/* BIDSMART Web Application Polish Layer
   Final UI overrides only. No business logic is changed. */

:root {
  --app-red: #c91820;
  --app-red-hover: #a9131a;
  --app-red-soft: #fff3f4;
  --app-ink: #16181d;
  --app-muted: #667085;
  --app-bg: #f5f6f8;
  --app-card: #ffffff;
  --app-border: #e4e7ec;
  --app-border-strong: #d6dae1;
  --app-success: #087443;
  --app-success-soft: #ecfdf3;
  --app-warning: #a15c00;
  --app-warning-soft: #fff8e6;
  --app-danger: #c91820;
  --app-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --app-shadow-md: 0 6px 18px rgba(16,24,40,.08);
  --app-shadow-lg: 0 12px 30px rgba(16,24,40,.10);
  --app-radius: 14px;
  --app-radius-sm: 10px;
}

/* App canvas: cleaner and flatter than the earlier neumorphic layer. */
html { background: var(--app-bg) !important; }
body,
.roof-dashboard-body,
.portal-layout,
.portal-main,
.roof-dashboard-main {
  background: var(--app-bg) !important;
  color: var(--app-ink) !important;
}

.roof-dashboard-content {
  width: min(1400px, calc(100% - 40px)) !important;
  padding-top: 32px !important;
}

/* Headings */
.portal-page-heading {
  align-items: center !important;
  margin-bottom: 22px !important;
}
.portal-page-heading h1,
.roof-page-title {
  font-size: clamp(1.8rem, 2.6vw, 2.35rem) !important;
  letter-spacing: -.035em !important;
  line-height: 1.1 !important;
}
.portal-page-heading p { color: var(--app-muted) !important; font-size: .94rem !important; }

/* Main application cards */
.dashboard-section-card,
.roof-design-card,
.profile-summary-card,
.profile-details-under-card,
.profile-section-card,
.dashboard-card,
.dashboard-overview-card,
.dashboard-stat-card,
.dashboard-kpi-card,
.notification-card,
.announcement-card,
.bid-card,
.request-card,
.quotation-card,
.visualizer-card,
.auth-panel,
.admin-section-card,
.admin-stat-card,
.admin-card,
.admin-panel,
.admin-filter-bar,
.table-wrap,
.admin-table-wrap {
  background: var(--app-card) !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

.dashboard-section-card:hover,
.roof-design-card:hover,
.notification-card:hover,
.announcement-card:hover,
.bid-card:hover,
.request-card:hover,
.quotation-card:hover {
  box-shadow: var(--app-shadow-md) !important;
}

/* Unified button system */
.roof-post-btn,
.main-btn,
.profile-primary-btn,
.roof-select-btn,
.admin-btn-red,
.client-approve-btn,
.modal-save-btn,
.signup-otp-button-primary,
.header-btn-red,
.hero-primary-btn,
button.roof-post-btn,
a.roof-post-btn {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 1px solid var(--app-red) !important;
  background: var(--app-red) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(201,24,32,.18) !important;
  font-size: .86rem !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.roof-post-btn:hover,
.main-btn:hover,
.profile-primary-btn:hover,
.roof-select-btn:hover,
.admin-btn-red:hover,
.client-approve-btn:hover,
.modal-save-btn:hover,
.signup-otp-button-primary:hover:not(:disabled),
.header-btn-red:hover,
.hero-primary-btn:hover {
  background: var(--app-red-hover) !important;
  border-color: var(--app-red-hover) !important;
  box-shadow: 0 5px 12px rgba(201,24,32,.20) !important;
  transform: translateY(-1px) !important;
}

.admin-btn-neutral,
.profile-secondary-btn,
.client-bids-back-btn,
.manufacturer-bid-back-btn,
.signup-otp-button:not(.signup-otp-button-primary),
.header-btn-light,
.hero-secondary-btn,
a.admin-btn-neutral,
button.admin-btn-neutral {
  min-height: 42px !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  border: 1px solid var(--app-border-strong) !important;
  background: #fff !important;
  color: #2b2f36 !important;
  box-shadow: var(--app-shadow-sm) !important;
  font-size: .86rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.admin-btn-neutral:hover,
.profile-secondary-btn:hover,
.client-bids-back-btn:hover,
.manufacturer-bid-back-btn:hover,
.signup-otp-button:not(.signup-otp-button-primary):hover:not(:disabled),
.header-btn-light:hover,
.hero-secondary-btn:hover {
  background: #f9fafb !important;
  border-color: #c8cdd5 !important;
  color: var(--app-ink) !important;
  box-shadow: 0 3px 8px rgba(16,24,40,.07) !important;
  transform: translateY(-1px) !important;
}

/* Dark action button: useful for Archive / secondary destructive operations. */
.admin-btn-danger,
.roof-remove-btn {
  min-height: 42px !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  background: #252930 !important;
  color: #fff !important;
  border: 1px solid #252930 !important;
  box-shadow: 0 2px 6px rgba(16,24,40,.13) !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
}
.admin-btn-danger:hover,
.roof-remove-btn:hover {
  background: #111318 !important;
  border-color: #111318 !important;
  box-shadow: 0 5px 12px rgba(16,24,40,.16) !important;
  transform: translateY(-1px) !important;
}

/* Explicit Delete stays red. */
.announcement-delete-btn {
  min-height: 42px !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  background: var(--app-danger) !important;
  color: #fff !important;
  border: 1px solid var(--app-danger) !important;
  box-shadow: 0 2px 6px rgba(201,24,32,.18) !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
}
.announcement-delete-btn:hover {
  background: var(--app-red-hover) !important;
  border-color: var(--app-red-hover) !important;
  transform: translateY(-1px) !important;
}

/* Small table/list actions */
.admin-btn-compact,
.announcement-action-btn,
.announcement-filter-button {
  min-height: 36px !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  font-size: .79rem !important;
  font-weight: 700 !important;
}

/* Keep action groups tidy and predictable. */
.dashboard-primary-actions,
.profile-button-row,
.admin-filter-actions,
.catalogue-card-actions,
.inventory-card-actions,
.readonly-camera-actions {
  gap: 8px !important;
}

.admin-action-stack { gap: 7px !important; }
.admin-action-stack form { margin: 0 !important; }

/* Announcement actions intentionally remain vertically aligned. */
.announcement-history-actions {
  gap: 7px !important;
  min-width: 138px !important;
}
.announcement-history-actions > a,
.announcement-history-actions > form,
.announcement-history-actions > form > button {
  min-height: 38px !important;
  width: 100% !important;
  font-size: .79rem !important;
}

/* Inputs and selects should look like a modern application form. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea {
  border-radius: 10px !important;
  border: 1px solid var(--app-border-strong) !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--app-ink) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  border-color: rgba(201,24,32,.65) !important;
  box-shadow: 0 0 0 3px rgba(201,24,32,.10) !important;
  outline: none !important;
}

/* Search/filter bars */
.list-navigation-bar,
.admin-filter-bar,
.announcement-filter-bar,
.filter-toolbar,
.search-filter-bar {
  background: #fff !important;
  border: 1px solid var(--app-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--app-shadow-sm) !important;
}

/* Tables: lighter chrome, clearer hover and spacing. */
.admin-clean-table,
.dashboard-table,
.roof-table,
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.admin-clean-table thead th,
.dashboard-table thead th,
.roof-table thead th {
  background: #f8f9fb !important;
  color: #475467 !important;
  border-bottom: 1px solid var(--app-border) !important;
  font-size: .74rem !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}
.admin-clean-table tbody td,
.dashboard-table tbody td,
.roof-table tbody td {
  border-bottom: 1px solid #eef0f3 !important;
}
.admin-clean-table tbody tr:hover,
.dashboard-table tbody tr:hover,
.roof-table tbody tr:hover {
  background: #fafbfc !important;
}

/* Status badges */
.status-badge,
.verification-badge,
.portal-verified-check,
.profile-verification-badge {
  border-radius: 999px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

/* Pagination */
.list-pagination,
.pagination,
.admin-pagination {
  gap: 5px !important;
}
.list-pagination a,
.list-pagination span,
.pagination a,
.pagination span,
.admin-pagination a,
.admin-pagination span {
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 9px !important;
  border: 1px solid var(--app-border) !important;
  background: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
}
.list-pagination .active,
.pagination .active,
.admin-pagination .active,
.list-pagination [aria-current="page"],
.pagination [aria-current="page"],
.admin-pagination [aria-current="page"] {
  background: var(--app-red) !important;
  border-color: var(--app-red) !important;
  color: #fff !important;
}

/* Top bar: crisp SaaS/application appearance. */
.portal-topbar {
  background: #17191e !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(12px) !important;
}
.portal-topbar-inner { min-height: 70px !important; }
.portal-top-brand-logo { border-radius: 10px !important; box-shadow: none !important; }
.portal-top-menu-link {
  min-height: 38px !important;
  border-radius: 9px !important;
  font-size: .83rem !important;
}
.portal-top-menu-link.active {
  background: var(--app-red) !important;
  box-shadow: 0 2px 6px rgba(201,24,32,.25) !important;
}
.portal-top-user { border-radius: 10px !important; }
.portal-top-avatar { border-radius: 9px !important; box-shadow: none !important; }
.portal-top-logout { min-height: 38px !important; border-radius: 9px !important; }

/* Login / signup polish */
.auth-panel {
  border-radius: 16px !important;
  box-shadow: var(--app-shadow-lg) !important;
}
.role-toggle-btn {
  border-radius: 9px !important;
  box-shadow: none !important;
}
.role-toggle-btn.active {
  background: var(--app-red) !important;
  color: #fff !important;
  border-color: var(--app-red) !important;
}
.signup-otp-panel {
  border-radius: 12px !important;
  background: #fbfcfd !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: none !important;
}

/* Admin shell refinements */
.admin-main { background: var(--app-bg) !important; }
.admin-main .admin-section-card,
.admin-main .admin-stat-card,
.admin-main .admin-filter-bar,
.admin-main .table-wrap {
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

/* More compact destructive confirmations / action layouts on small screens. */
@media (max-width: 760px) {
  .roof-dashboard-content { width: calc(100% - 24px) !important; padding-top: 22px !important; }
  .portal-page-heading { align-items: flex-start !important; }
  .dashboard-primary-actions,
  .profile-button-row,
  .admin-filter-actions { width: 100% !important; }
  .dashboard-primary-actions > *,
  .profile-button-row > *,
  .admin-filter-actions > * { flex: 1 1 auto; }
  .announcement-history-actions { min-width: 120px !important; }
}

@media (max-width: 520px) {
  .roof-post-btn,
  .main-btn,
  .profile-primary-btn,
  .profile-secondary-btn,
  .admin-btn-red,
  .admin-btn-neutral,
  .client-approve-btn,
  .client-bids-back-btn,
  .manufacturer-bid-back-btn {
    min-height: 40px !important;
    padding-inline: 13px !important;
    font-size: .82rem !important;
  }
}


/* =========================================================
   Roof catalogue availability + navigation polish
   ========================================================= */
.catalogue-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.catalogue-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.catalogue-status-badge.active {
  color: #17633a;
  background: #edf8f1;
  border-color: #c9ead6;
}
.catalogue-status-badge.archived {
  color: #6b4d11;
  background: #fff7e5;
  border-color: #f0ddb0;
}
.catalogue-card-archived {
  opacity: .82;
  border-style: dashed !important;
}
.catalogue-card-archived .roof-design-image img {
  filter: grayscale(.22) saturate(.75);
}
.roof-design-card .catalogue-card-actions-admin {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.catalogue-restore-btn {
  color: #17633a !important;
  border-color: #bfe1cb !important;
  background: #f4fbf6 !important;
}
.catalogue-restore-btn:hover {
  color: #0f512e !important;
  border-color: #9fd3b2 !important;
  background: #eaf7ef !important;
}

.design-modal-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.design-modal-title-row > div { min-width: 0; }
.design-modal-title-row h2 { margin: 2px 0 0 !important; }
.design-modal-kicker {
  display: block;
  color: #7a818d;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.design-modal-back {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--app-border, #dde2e8);
  background: #fff;
  color: #17191e;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.design-modal-back:hover {
  border-color: #c91820;
  background: #fff5f5;
  color: #c91820;
  transform: translateX(-1px);
}
.design-modal-back:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(201,24,32,.22) !important;
  outline-offset: 2px !important;
}
.catalogue-unavailable-note {
  display: grid;
  gap: 3px;
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid #f0ddb0;
  border-radius: 10px;
  background: #fff9ec;
  color: #6b4d11;
  font-size: .82rem;
  line-height: 1.45;
}
.catalogue-unavailable-note strong { font-size: .84rem; }

@media (max-width: 760px) {
  .roof-design-card .catalogue-card-actions-admin {
    grid-template-columns: 1fr !important;
  }
  .design-modal-title-row { gap: 9px; }
  .design-modal-back { flex-basis: 38px; width: 38px; height: 38px; }
}

/* Admin roof catalogue: all specifications are intentionally selectable. */
.admin-spec-control-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(20,24,31,.08);
  border-radius: 12px;
  background: #f7f8fa;
  color: #4f5865;
  font-size: .88rem;
  line-height: 1.45;
}
.admin-spec-control-note strong {
  flex: 0 0 auto;
  color: #171a1f;
  font-weight: 800;
}
.admin-spec-control-note span { min-width: 0; }
@media (max-width: 720px) {
  .admin-spec-control-note { flex-direction: column; gap: 4px; }
}

/* ================= CLIENT REQUEST MODAL POLISH ================= */
.design-modal-box {
  max-width: 1180px !important;
  padding: 28px !important;
  border: 1px solid rgba(14,18,26,.08);
  box-shadow: 0 32px 70px rgba(15, 23, 42, .20) !important;
}
.design-modal-content {
  grid-template-columns: minmax(320px, 1.05fr) minmax(360px, .95fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.design-modal-image {
  position: relative;
  min-height: 540px;
  height: 100%;
  padding: 22px;
  border-radius: 24px !important;
  border: 1px solid rgba(0,0,0,.06);
  background: radial-gradient(circle at top left, #ffffff, #f5f7fb 62%, #eef1f6 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 20px 45px rgba(15,23,42,.08);
}
.design-modal-image::before {
  content: 'Live roof preview';
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  color: #6b7280;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.design-modal-image img {
  object-fit: contain !important;
  padding: 28px 24px 20px;
  filter: drop-shadow(0 20px 26px rgba(15,23,42,.16));
}
.design-modal-details {
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  margin: 0 !important;
}
.design-modal-details > * {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.design-modal-title-card {
  padding: 22px !important;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.06) !important;
}
.design-modal-title-row {
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}
.design-modal-title-row h2 {
  font-size: clamp(1.65rem, 2vw, 2.05rem);
  line-height: 1.12;
}
.design-modal-kicker {
  color: #8b93a1 !important;
  font-size: .74rem !important;
  letter-spacing: .12em !important;
}
.design-modal-intro {
  margin: 10px 0 0;
  color: #667085;
  font-size: .97rem;
  line-height: 1.6;
}
.design-modal-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.design-modal-highlight {
  padding: 14px 16px;
  border-radius: 16px;
  background: #f7f8fa;
  border: 1px solid rgba(0,0,0,.05);
}
.highlight-label {
  display: block;
  margin-bottom: 6px;
  color: #808896;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.design-modal-highlight strong {
  color: #13161b;
  font-size: 1rem;
}
.design-request-form {
  padding: 22px !important;
  border-radius: 22px;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
}
.design-request-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.design-request-field {
  display: grid;
  gap: 8px;
}
.design-request-field-full {
  grid-column: 1 / -1;
}
.design-request-form .quantity-label,
.design-request-form .profile-label {
  margin-bottom: 0 !important;
  color: #303641;
  font-size: .92rem;
}
.design-request-form input,
.design-request-form select {
  min-height: 54px;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: #fafbfc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  padding: 0 16px !important;
  font-size: 1rem;
}
.design-request-form input:focus,
.design-request-form select:focus {
  border-color: rgba(201,24,32,.45) !important;
  box-shadow: 0 0 0 4px rgba(201,24,32,.10) !important;
  background: #ffffff !important;
}
.design-request-form input[disabled] {
  color: #475467 !important;
  background: #f3f4f6 !important;
}
.design-modal-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.design-form-helper {
  color: #667085;
  font-size: .92rem;
  line-height: 1.55;
}
.design-request-form .modal-save-btn {
  min-width: 220px;
  min-height: 56px;
  border-radius: 16px !important;
  padding: 0 22px !important;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 16px 34px rgba(181,18,24,.22) !important;
}
.design-request-form .modal-save-btn:hover {
  transform: translateY(-1px);
}
.design-modal-close {
  top: 16px !important;
  right: 18px !important;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f5f6f8;
  border: 1px solid rgba(0,0,0,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.design-modal-close:hover {
  background: #fff2f3;
  color: #c91820;
  transform: rotate(90deg);
}
@media (max-width: 980px) {
  .design-modal-box { max-width: 760px !important; }
  .design-modal-content { grid-template-columns: 1fr !important; }
  .design-modal-image { min-height: 320px; }
}
@media (max-width: 680px) {
  .design-modal-box {
    padding: 16px !important;
    border-radius: 20px !important;
  }
  .design-modal-image {
    min-height: 260px;
    padding: 14px;
  }
  .design-modal-image img { padding: 24px 12px 10px; }
  .design-modal-title-card,
  .design-request-form { padding: 18px !important; }
  .design-modal-highlight-grid,
  .design-request-form-grid { grid-template-columns: 1fr; }
  .design-modal-footer-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .design-request-form .modal-save-btn { width: 100%; min-width: 0; }
}

/* ================= FLOATING CATALOGUE EDITOR ================= */
.catalogue-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 18px;
}
.catalogue-toolbar-copy p {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: .96rem;
}
.catalogue-add-btn {
  min-width: 210px;
  text-align: center;
}
.catalogue-editor-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, .54);
  backdrop-filter: blur(7px);
  z-index: 9998;
}
.catalogue-editor-overlay.show { display: flex; }
.catalogue-editor-modal {
  width: min(1320px, 100%);
  max-height: calc(100vh - 44px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 28px;
  box-shadow: 0 36px 80px rgba(15,23,42,.24);
}
.catalogue-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
.catalogue-editor-header p {
  margin: 8px 0 0;
  color: #6b7280;
}
.catalogue-editor-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: #8a91a0;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.catalogue-editor-close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1.7rem;
  font-weight: 800;
  color: #141821;
  background: #f5f6f8;
  border: 1px solid rgba(0,0,0,.06);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.catalogue-editor-close:hover {
  background: #fff1f2;
  color: #c91820;
  transform: rotate(90deg);
}
.catalogue-editor-body {
  overflow: auto;
  padding: 0 24px 24px;
}
.catalogue-floating-form {
  margin-top: 18px !important;
}
.catalogue-floating-form .roof-product-overview-card {
  padding: 18px;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.catalogue-floating-form .spec-checkbox-grid {
  max-height: none;
}
.catalogue-editor-actions {
  justify-content: flex-start !important;
  gap: 12px !important;
  padding-top: 8px;
}
.catalogue-card-actions-admin .admin-btn-neutral,
.catalogue-card-actions-admin .admin-btn-red,
.catalogue-card-actions-admin .admin-btn-danger {
  min-height: 46px;
}
body.catalogue-modal-open { overflow: hidden; }
@media (max-width: 860px) {
  .catalogue-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .catalogue-add-btn { width: 100%; min-width: 0; }
  .catalogue-editor-overlay { padding: 12px; }
  .catalogue-editor-modal {
    max-height: calc(100vh - 24px);
    border-radius: 22px;
  }
  .catalogue-editor-header,
  .catalogue-editor-body { padding-left: 16px; padding-right: 16px; }
  .catalogue-editor-header {
    padding-top: 18px;
    padding-bottom: 16px;
  }
}

/* =========================================================
   CROSS-DEVICE RESPONSIVE HARDENING
   Windows / macOS / Android / iPhone / iPad
   ========================================================= */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { max-width: 100%; font: inherit; }
input, select, textarea { min-width: 0; }

/* iPhone / iPad safe-area support without affecting desktop browsers. */
.portal-topbar,
.admin-sidebar {
  padding-top: max(env(safe-area-inset-top), 0px);
}
.roof-dashboard-content,
.admin-main {
  padding-bottom: max(34px, env(safe-area-inset-bottom));
}
.design-modal-overlay,
.catalogue-editor-overlay {
  padding-top: max(14px, env(safe-area-inset-top));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left));
}

/* Long names, addresses, filenames, hashes and status text cannot force layout overflow. */
.admin-main,
.roof-dashboard-content,
.dashboard-section-card,
.admin-section-card,
.roof-design-card,
.request-summary-card,
.client-bids-table-card,
.profile-card,
.verification-card,
.portal-page-heading,
.portal-top-user-copy,
.catalogue-toolbar-copy,
.catalogue-editor-header,
.design-modal-title-row,
.design-modal-details {
  min-width: 0;
}
.admin-main p,
.admin-main td,
.admin-main th,
.roof-dashboard-content p,
.roof-dashboard-content td,
.roof-dashboard-content th,
.portal-account-name,
.roof-design-desc {
  overflow-wrap: anywhere;
}

/* Tables stay readable on phones by scrolling inside their own container. */
.table-wrap,
.admin-table-wrap,
.client-bids-table-card,
.report-table-wrap,
.database-table-wrap,
.audit-table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.table-wrap table,
.admin-table-wrap table,
.client-bids-table-card table,
.report-table-wrap table,
.database-table-wrap table,
.audit-table-wrap table {
  width: 100%;
}

/* Admin navigation becomes a compact application menu on tablets/phones. */
.admin-sidebar-mobile-head { display: block; }
.admin-sidebar-toggle { display: none; }

/* Better pointer/touch targets across desktop touchscreens and phones. */
button,
a[class*="btn"],
.portal-top-menu-link,
.sidebar-menu a,
.roof-nav-pill,
.color-swatch-button,
.spec-check-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(201,24,32,.12);
}

/* Prevent responsive grids from retaining oversized minimum columns. */
.roof-card-grid,
.dashboard-preview-grid,
.dashboard-cards,
.dashboard-actions,
.admin-design-list,
.admin-form-grid,
.profile-grid-form,
.signup-grid,
.spec-checkbox-grid,
.request-summary-grid,
.client-bids-summary,
.design-request-form-grid {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .admin-main { min-width: 0; }
  .admin-header { gap: 18px; }
  .catalogue-editor-modal,
  .design-modal-box { width: min(100%, 980px) !important; }
}

@media (max-width: 900px) {
  /* Administrator shell: compact header + collapsible navigation. */
  .admin-layout {
    display: block !important;
    min-height: 100dvh;
    padding: 0 !important;
  }
  .admin-sidebar {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)) !important;
    border-radius: 0 !important;
  }
  .admin-sidebar-mobile-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
  }
  .admin-sidebar .sidebar-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
    margin: 0 !important;
    min-width: 0;
  }
  .admin-sidebar .sidebar-logo img {
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    flex: 0 0 42px;
  }
  .admin-sidebar-brand-copy { min-width: 0; }
  .admin-sidebar .sidebar-logo h2 {
    margin: 0 !important;
    font-size: 1rem !important;
    white-space: nowrap;
  }
  .admin-sidebar .sidebar-logo p {
    margin: 2px 0 0 !important;
    font-size: .74rem !important;
  }
  .admin-sidebar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 78px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 11px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
  }
  .admin-sidebar .sidebar-menu {
    display: none !important;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 0 4px !important;
    gap: 5px !important;
  }
  .admin-sidebar .sidebar-menu.is-open { display: flex !important; }
  .admin-sidebar .sidebar-menu a,
  .admin-sidebar .admin-logout-form .logout-link {
    min-height: 44px !important;
    border-radius: 10px !important;
  }
  .admin-main {
    width: 100% !important;
    padding: 18px 14px max(34px, env(safe-area-inset-bottom)) !important;
  }
  .admin-header {
    padding: 20px !important;
    border-radius: 16px !important;
  }
  .admin-header h1 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .admin-avatar { flex: 0 0 auto; }

  .catalogue-editor-modal,
  .design-modal-box {
    width: 100% !important;
    max-height: calc(100dvh - 28px) !important;
  }
  .catalogue-editor-body,
  .design-modal-box {
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 760px) {
  /* Avoid iOS Safari zooming inputs below 16px. */
  input,
  select,
  textarea,
  .auth-panel input,
  .auth-panel select,
  .auth-panel textarea,
  .design-request-form input,
  .design-request-form select {
    font-size: 16px !important;
  }

  .portal-topbar { padding-left: 0 !important; padding-right: 0 !important; }
  .portal-topbar-inner { width: calc(100% - 20px) !important; }
  .portal-nav-panel {
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .portal-top-menu-link,
  .portal-top-logout,
  .portal-nav-toggle { min-height: 44px !important; }

  .roof-dashboard-content {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .portal-page-heading,
  .admin-header,
  .client-bids-table-header,
  .catalogue-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .admin-avatar { align-self: flex-start; }

  .dashboard-cards,
  .dashboard-actions,
  .admin-mini-stats,
  .roof-card-grid,
  .dashboard-preview-grid,
  .profile-grid-form,
  .admin-form-grid,
  .signup-grid,
  .spec-checkbox-grid,
  .request-summary-grid,
  .client-bids-summary,
  .design-request-form-grid,
  .overview-stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-section-card,
  .dashboard-section-card,
  .request-summary-card,
  .profile-card,
  .client-bids-table-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .catalogue-editor-overlay,
  .design-modal-overlay {
    align-items: flex-start !important;
    overflow-y: auto;
  }
  .catalogue-editor-modal,
  .design-modal-box {
    margin: auto 0;
    border-radius: 20px !important;
  }
  .catalogue-editor-header { padding: 18px 16px 14px !important; }
  .catalogue-editor-body { padding: 0 16px 18px !important; }
  .design-modal-content { gap: 16px !important; }
  .design-modal-image { min-height: 240px !important; }

  /* Controls use a phone-friendly full-width layout where side-by-side buttons get cramped. */
  .profile-button-row,
  .dashboard-primary-actions,
  .admin-filter-actions,
  .catalogue-editor-actions,
  .design-modal-footer-actions {
    width: 100% !important;
  }
  .catalogue-editor-actions > *,
  .design-modal-footer-actions > * { width: 100% !important; }

  /* Keep data tables usable instead of squeezing columns until text breaks. */
  .table-wrap table,
  .admin-table-wrap table,
  .client-bids-table-card table,
  .report-table-wrap table,
  .database-table-wrap table,
  .audit-table-wrap table {
    min-width: 680px;
  }
}

@media (max-width: 480px) {
  .portal-top-brand-logo { width: 38px !important; height: 38px !important; }
  .portal-top-brand-copy strong { font-size: .95rem !important; }
  .portal-nav-toggle { min-width: 72px !important; padding-inline: 12px !important; }
  .portal-top-menu { grid-template-columns: 1fr !important; }
  .portal-top-account { flex-direction: column !important; align-items: stretch !important; }
  .portal-top-logout { width: 100% !important; }

  .admin-main { padding-left: 10px !important; padding-right: 10px !important; }
  .admin-header { padding: 16px !important; }
  .admin-avatar { width: 42px !important; height: 42px !important; }

  .roof-design-card,
  .dashboard-section-card,
  .admin-section-card,
  .request-summary-card,
  .client-bids-table-card { border-radius: 14px !important; }

  .auth-panel,
  .signup-panel,
  .signup-panel-wide { padding-left: 16px !important; padding-right: 16px !important; }

  .design-modal-image { min-height: 210px !important; }
  .design-modal-title-card,
  .design-request-form { padding: 15px !important; }
  .design-modal-highlight-grid { grid-template-columns: 1fr !important; }

  .spec-check-item { min-height: 48px; }
  .roof-post-btn,
  .main-btn,
  .profile-primary-btn,
  .profile-secondary-btn,
  .admin-btn-red,
  .admin-btn-neutral,
  .admin-btn-danger,
  .client-approve-btn,
  .client-bids-back-btn,
  .manufacturer-bid-back-btn {
    min-height: 44px !important;
  }
}

/* Apple-device hardening: preserve native controls while keeping touch geometry consistent. */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { border-radius: 12px; background-clip: padding-box; }
  input[type="date"] { min-height: 52px; }
  .portal-topbar { position: -webkit-sticky; position: sticky; }
}


/* Lock the page behind the Client procurement modal on desktop, Android, and iOS. */
body.design-modal-open {
  position: fixed !important;
  left: 0;
  right: 0;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
body.design-modal-open .design-modal-overlay {
  touch-action: pan-y;
  overscroll-behavior: contain;
}
body.design-modal-open .design-modal-box {
  touch-action: pan-y;
}

/* ================= ADMIN STATIC SIDEBAR / MAIN-SCROLL LAYOUT ================= */
@media (min-width: 901px) {
  .admin-layout {
    display: grid !important;
    grid-template-columns: 292px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 !important;
  }

  .admin-main {
    min-width: 0 !important;
    min-height: 0 !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding-right: 6px !important;
    border-radius: 28px;
  }

  /* Keep top content visible and avoid awkward bottom clipping. */
  .admin-main > *:first-child {
    margin-top: 0 !important;
  }

  .admin-main::-webkit-scrollbar,
  .admin-sidebar::-webkit-scrollbar {
    width: 10px;
  }

  .admin-main::-webkit-scrollbar-thumb,
  .admin-sidebar::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  .admin-main::-webkit-scrollbar-track,
  .admin-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
}

@media (max-width: 900px) {
  .admin-layout {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-main,
  .admin-sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ================= MOBILE STATIC / CENTERED NAVIGATION ================= */
@media (max-width: 900px) {
  /* Client & Supplier: keep the top bar visible while page content scrolls. */
  .portal-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1600 !important;
  }

  /* Center the opened mobile navigation like an app sheet instead of pinning it left. */
  .portal-nav-panel {
    position: fixed !important;
    top: calc(max(env(safe-area-inset-top), 0px) + 78px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(440px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 98px - env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 22px !important;
    padding: 16px !important;
    z-index: 1700 !important;
  }

  .portal-nav-panel.is-open {
    display: grid !important;
    gap: 14px !important;
  }

  .portal-top-menu {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .portal-top-menu-link,
  .portal-top-account,
  .portal-top-user,
  .portal-top-logout {
    width: 100% !important;
  }

  .portal-top-account {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Admin: the compact mobile header stays fixed/sticky, while the page content scrolls. */
  .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1600 !important;
  }

  .admin-sidebar .sidebar-menu {
    position: fixed !important;
    top: calc(max(env(safe-area-inset-top), 0px) + 78px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(440px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 98px - env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
    border-radius: 22px !important;
    background: rgba(18,20,23,.99) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 24px 54px rgba(0,0,0,.32) !important;
    z-index: 1700 !important;
  }

  .admin-sidebar .sidebar-menu.is-open {
    display: flex !important;
  }

  .admin-sidebar .sidebar-menu a,
  .admin-sidebar .admin-logout-form,
  .admin-sidebar .admin-logout-form .logout-link {
    width: 100% !important;
  }

  /* Dim the page behind an open menu. */
  body.portal-mobile-menu-open::before,
  body.admin-mobile-menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1550;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
    pointer-events: none;
  }

  /* Keep the open menu completely static while preventing the page behind it from scrolling. */
  body.portal-mobile-menu-open,
  body.admin-mobile-menu-open {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.portal-mobile-menu-open .portal-topbar,
  body.admin-mobile-menu-open .admin-sidebar {
    z-index: 1650 !important;
  }
}

@media (max-width: 480px) {
  .portal-nav-panel,
  .admin-sidebar .sidebar-menu {
    width: min(420px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 20px !important;
    padding: 14px !important;
  }
}

/* ================= MOBILE MENU ITEMS CENTERED ================= */
@media (max-width: 900px) {
  /* Client & Supplier menu: keep the sheet centered and center every action inside it. */
  .portal-nav-panel.is-open {
    justify-items: center !important;
  }

  .portal-top-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .portal-top-menu-link {
    width: min(100%, 280px) !important;
    min-height: 54px !important;
    margin: 0 auto !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 18px !important;
  }

  .portal-top-menu-link > span:first-child {
    flex: 0 1 auto !important;
    text-align: center !important;
  }

  .portal-top-menu-badge {
    margin-left: 8px !important;
  }

  .portal-top-account {
    width: min(100%, 280px) !important;
    margin: 4px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .portal-top-user,
  .portal-logout-form,
  .portal-top-logout {
    width: 100% !important;
    margin: 0 auto !important;
  }

  .portal-top-user {
    min-height: 58px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .portal-top-user-copy {
    text-align: center !important;
  }

  .portal-top-logout {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Admin mobile menu follows the same centered app-menu treatment. */
  .admin-sidebar .sidebar-menu.is-open {
    align-items: center !important;
  }

  .admin-sidebar .sidebar-menu a,
  .admin-sidebar .admin-logout-form {
    width: min(100%, 280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .admin-sidebar .sidebar-menu a,
  .admin-sidebar .admin-logout-form .logout-link {
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .portal-top-menu-link,
  .portal-top-account,
  .admin-sidebar .sidebar-menu a,
  .admin-sidebar .admin-logout-form {
    width: min(100%, 260px) !important;
  }
}

/* =========================================================
   MOBILE PORTAL NAVIGATION — MATCH ADMIN PHONE LAYOUT
   Client and Supplier use the same compact two-column app menu
   treatment as the Administrator on phone/tablet widths.
   ========================================================= */
@media (max-width: 900px) {
  .portal-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1800 !important;
    width: 100% !important;
    background: #111315 !important;
  }

  .portal-topbar-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
  }

  .portal-top-brand {
    min-width: 0 !important;
  }

  .portal-top-brand-logo {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .portal-top-brand-copy strong {
    font-size: 1rem !important;
  }

  .portal-top-brand-copy small {
    font-size: .72rem !important;
  }

  .portal-nav-toggle {
    min-width: 76px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: #cf1720 !important;
    border: 1px solid #df2630 !important;
    color: #fff !important;
    font-weight: 800 !important;
  }

  /* Open immediately below the top bar, full-width like Admin mobile navigation. */
  .portal-nav-panel,
  .portal-nav-panel.is-open {
    position: fixed !important;
    top: calc(max(env(safe-area-inset-top), 0px) + 68px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 68px - env(safe-area-inset-bottom)) !important;
    transform: none !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 0 0 18px 18px !important;
    background: #121416 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.30) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1850 !important;
  }

  .portal-nav-panel:not(.is-open) {
    display: none !important;
  }

  .portal-nav-panel.is-open {
    display: block !important;
  }

  /* Same compact button arrangement as the Admin phone menu. */
  .portal-top-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .portal-top-menu-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.035) !important;
    color: #d9d9d9 !important;
    box-shadow: none !important;
  }

  .portal-top-menu-link.active {
    color: #fff !important;
    background: #d71920 !important;
    border-color: #e22d34 !important;
    box-shadow: 0 8px 18px rgba(215,25,32,.20) !important;
  }

  .portal-top-menu-link > span:first-child {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .portal-top-menu-badge {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Account and logout become the bottom row instead of a narrow left column. */
  .portal-top-account {
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .portal-top-user,
  .portal-logout-form,
  .portal-top-logout {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .portal-top-user {
    min-height: 54px !important;
    padding: 7px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  .portal-top-user-copy {
    min-width: 0 !important;
    text-align: left !important;
  }

  .portal-top-user-copy strong,
  .portal-top-user-copy small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .portal-top-logout {
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
  }

  body.portal-mobile-menu-open::before {
    z-index: 1750 !important;
  }

  body.portal-mobile-menu-open .portal-topbar {
    z-index: 1800 !important;
  }
}

@media (max-width: 430px) {
  .portal-nav-panel,
  .portal-nav-panel.is-open {
    padding: 10px !important;
  }

  .portal-top-menu {
    gap: 7px !important;
  }

  .portal-top-menu-link {
    min-height: 48px !important;
    padding-inline: 8px !important;
    font-size: .86rem !important;
  }

  .portal-top-account {
    gap: 7px !important;
  }

  .portal-top-user {
    padding-inline: 9px !important;
  }

  .portal-top-avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }
}

/* ================= UI COPY CLEANUP ================= */
.compact-helper {
  margin: 8px 0 0;
  color: #667085;
  font-size: .92rem;
  line-height: 1.5;
}
.admin-header h1 + p,
.portal-page-heading h1 + p {
  margin-top: 6px;
}
.admin-section-card > h2 + .admin-action-stack {
  margin-top: 14px;
}
.design-modal-title-card .design-modal-title-row {
  margin-bottom: 0 !important;
}
.design-modal-footer-actions:has(.modal-save-btn:only-child) {
  justify-content: flex-end;
}


/* Deployment RC: registration privacy consent */
.privacy-consent-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: #f8f9fb;
  color: #454b55;
  font-size: .9rem;
  line-height: 1.55;
}
.privacy-consent-card input[type="checkbox"] {
  flex: 0 0 19px;
  width: 19px !important;
  height: 19px !important;
  margin-top: 2px;
  accent-color: #c91820;
}
.privacy-consent-card a { color: #b51218; font-weight: 800; }
.privacy-consent-card a:hover { text-decoration: underline; }

/* =========================================================
   Compact UI tune: buttons, checkbox/radio controls, auth actions
   ========================================================= */
.roof-post-btn,
.main-btn,
.profile-primary-btn,
.roof-select-btn,
.admin-btn-red,
.client-approve-btn,
.modal-save-btn,
.signup-otp-button-primary,
.header-btn-red,
.hero-primary-btn,
button.roof-post-btn,
a.roof-post-btn {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  font-size: .84rem !important;
  font-weight: 760 !important;
  box-shadow: 0 3px 10px rgba(201,24,32,.16) !important;
}

.admin-btn-neutral,
.profile-secondary-btn,
.client-bids-back-btn,
.manufacturer-bid-back-btn,
.signup-otp-button:not(.signup-otp-button-primary),
.header-btn-light,
.hero-secondary-btn,
a.admin-btn-neutral,
button.admin-btn-neutral,
.admin-btn-danger,
.roof-remove-btn,
.announcement-delete-btn {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  font-size: .84rem !important;
}

.auth-panel .main-btn,
.auth-panel .profile-primary-btn,
.auth-panel .profile-secondary-btn {
  min-height: 46px !important;
  border-radius: 12px !important;
  font-size: .92rem !important;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  transform: none !important;
  accent-color: var(--app-red) !important;
  vertical-align: middle;
}

.spec-check-item input[type="checkbox"],
.privacy-consent-card input[type="checkbox"],
.recovery-choice input[type="radio"] {
  transform: none !important;
}

.spec-check-item {
  gap: 9px !important;
}

.link-button {
  font-size: .86rem !important;
}

@media (max-width: 640px) {
  .roof-post-btn,
  .main-btn,
  .profile-primary-btn,
  .profile-secondary-btn,
  .admin-btn-red,
  .admin-btn-neutral,
  .admin-btn-danger,
  .client-approve-btn,
  .client-bids-back-btn,
  .manufacturer-bid-back-btn,
  .roof-remove-btn,
  .roof-select-btn,
  .announcement-delete-btn {
    min-height: 40px !important;
    padding: 0 13px !important;
    font-size: .83rem !important;
  }
}

/* =========================================================
   2026-08-30 UI QA STABILIZATION
   Final, low-risk visual overrides. No business logic changes.
   ========================================================= */

/* Prevent accidental page-level horizontal clipping while preserving
   intentional scrolling inside table / data wrappers. */
html {
  max-width: 100%;
  overflow-x: clip;
}
body {
  max-width: 100%;
  overflow-x: hidden;
}
img,
svg,
video,
canvas {
  max-width: 100%;
}
input,
select,
textarea,
button {
  min-width: 0;
}

/* Flex/grid children are allowed to shrink instead of forcing the page
   wider than the viewport. */
.landing-header > *,
.landing-brand,
.header-actions,
.auth-wrapper > *,
.auth-panel,
.portal-topbar-inner > *,
.portal-nav-panel,
.portal-top-menu,
.portal-top-account,
.roof-dashboard-content > *,
.dashboard-section-card,
.admin-main,
.admin-main > *,
.admin-section-card,
.table-wrap,
.admin-table-wrap {
  min-width: 0;
}

/* ---------- Public landing header ---------- */
.landing-header {
  width: min(1440px, calc(100% - 48px)) !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding-left: max(0px, env(safe-area-inset-left)) !important;
  padding-right: max(0px, env(safe-area-inset-right)) !important;
}
.landing-brand {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}
.landing-brand > span:last-child {
  min-width: 0 !important;
}
.landing-brand strong,
.landing-brand small {
  max-width: 100%;
}
.header-actions {
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
}
.header-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* At tablet widths the navigation is already collapsed by landing-pro-ui.
   This layer also guarantees the brand and actions stay inside the viewport. */
@media (max-width: 980px) {
  .landing-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
  }
  .landing-brand strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 560px) {
  .landing-header {
    width: calc(100% - 20px) !important;
    gap: 8px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .landing-brand {
    gap: 8px !important;
  }
  .landing-brand-mark {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    flex: 0 0 40px !important;
  }
  .landing-brand-mark img {
    width: 30px !important;
    height: 30px !important;
  }
  .landing-brand strong {
    font-size: .82rem !important;
    letter-spacing: .055em !important;
  }
  .header-actions {
    gap: 6px !important;
  }
  .header-btn {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-size: .76rem !important;
  }
}

@media (max-width: 380px) {
  .landing-brand > span:last-child {
    display: none !important;
  }
  .header-btn {
    padding-inline: 9px !important;
  }
}

/* ---------- Authentication / registration / recovery ---------- */
.auth-page,
.auth-wrapper,
.auth-right {
  width: 100%;
}
.auth-right {
  min-width: 0 !important;
}
.auth-panel {
  margin-inline: auto !important;
}
.auth-panel h2 {
  text-align: center !important;
  line-height: 1.16 !important;
  text-wrap: balance;
}
.auth-panel form,
.auth-panel .alert,
.auth-complete-action {
  width: 100%;
}
.auth-panel .alert {
  margin: 0 0 16px !important;
  padding: 14px 16px !important;
  border-radius: 13px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

/* The old signup link rule had greater specificity than .main-btn and could
   make a red action button use red text. Explicitly keep button-links white. */
.auth-panel .signup-bottom a.main-btn,
.auth-panel a.main-btn,
.auth-complete-action a.main-btn {
  color: #fff !important;
  text-decoration: none !important;
}
.auth-panel .signup-bottom a.main-btn:hover,
.auth-panel a.main-btn:hover,
.auth-complete-action a.main-btn:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.auth-complete-action {
  display: flex;
  margin-top: 16px;
}
.auth-complete-action .main-btn {
  width: 100% !important;
}
.auth-panel .login-bottom-link {
  width: 100%;
  margin-top: 14px !important;
  text-align: center;
}
.auth-panel .login-bottom-link p {
  margin: 0 !important;
}
.link-button {
  max-width: 100%;
  white-space: normal;
  line-height: 1.35 !important;
  text-align: center;
}

/* The two-column auth layout has hard minimum columns. Collapse before those
   minimums can force horizontal overflow on 900–1050 px browser widths. */
@media (max-width: 1050px) {
  .auth-wrapper {
    display: block !important;
    min-height: 100svh !important;
  }
  .auth-left {
    display: none !important;
  }
  .auth-right {
    min-height: 100svh !important;
    padding: clamp(24px, 5vw, 48px) !important;
  }
  .auth-panel {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
  }
  .signup-panel,
  .signup-panel-wide {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
  }
}

@media (max-width: 600px) {
  .auth-right {
    min-height: 100svh !important;
    align-items: flex-start !important;
    padding: max(18px, env(safe-area-inset-top)) 12px max(28px, env(safe-area-inset-bottom)) !important;
  }
  .auth-panel,
  .signup-panel,
  .signup-panel-wide {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px !important;
    border-radius: 18px !important;
  }
  .auth-panel h2 {
    font-size: 1.55rem !important;
    margin-bottom: 18px !important;
  }
  .auth-panel input,
  .auth-panel select,
  .auth-panel textarea {
    font-size: 16px !important; /* avoids mobile browser auto-zoom */
  }
  .recovery-choice {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Shared content alignment / responsive actions ---------- */
.portal-page-heading,
.dashboard-section-header,
.overview-action-header,
.admin-bid-monitor-header,
.dashboard-primary-actions,
.profile-button-row,
.admin-filter-actions,
.catalogue-card-actions,
.roof-top-actions,
.inventory-form-actions,
.inventory-card-actions,
.final-cta-actions {
  flex-wrap: wrap;
}
.portal-page-heading > *,
.dashboard-section-header > *,
.overview-action-header > *,
.admin-bid-monitor-header > * {
  min-width: 0;
}

/* Data must remain usable on phones without making the entire page overflow. */
.table-wrap,
.admin-table-wrap,
.client-bids-table-card,
.audit-table-wrap,
.report-table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table,
.admin-table-wrap table,
.client-bids-table-card table,
.audit-table-wrap table,
.report-table-wrap table {
  max-width: none;
}
.table-wrap td,
.admin-table-wrap td,
.client-bids-table-card td,
.audit-table-wrap td,
.report-table-wrap td {
  overflow-wrap: anywhere;
}

/* Long transaction IDs, hashes, file names, email addresses and URLs should
   wrap within their cards rather than widen the page. */
code,
pre,
.transaction-id,
.fabric-transaction,
.fabric-fingerprint,
.audit-fingerprint,
.file-name,
.profile-value,
.notification-card,
.announcement-card {
  overflow-wrap: anywhere;
  word-break: break-word;
}
pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Modal content remains reachable on short laptop/mobile viewports. */
.design-modal-box,
.catalogue-editor-modal,
.modal-content,
.admin-modal-content,
.audit-modal-content,
.visualizer-modal-content {
  max-height: calc(100dvh - 28px) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Portal header safety on very narrow phones. */
@media (max-width: 480px) {
  .portal-topbar-inner {
    padding-inline: 10px !important;
    gap: 8px !important;
  }
  .portal-top-brand-copy small,
  .portal-top-user-copy {
    display: none !important;
  }
  .portal-top-brand-copy strong {
    font-size: .92rem !important;
  }
  .portal-nav-toggle {
    min-width: 62px !important;
    padding-inline: 10px !important;
  }
  .dashboard-primary-actions > *,
  .profile-button-row > *,
  .admin-filter-actions > *,
  .catalogue-card-actions > * {
    flex: 1 1 100% !important;
    width: 100%;
  }
}

/* Keep focus visible and consistent after the final overrides. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(201, 24, 32, .18) !important;
  outline-offset: 2px !important;
}


/* ==========================================================
   BidSmart UI hotfix v2 — 2026-08-30
   Public header: full-width glass bar, centered navigation,
   stronger desktop edge spacing, and no right-side clipping.
   ========================================================== */
@media (min-width: 981px) {
  .landing-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 92px !important;
    height: auto !important;
    padding-block: 14px !important;
    padding-left: max(32px, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(32px, calc((100vw - 1320px) / 2)) !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 24px !important;
    box-sizing: border-box !important;
  }

  .landing-brand {
    justify-self: start !important;
  }

  .landing-nav {
    justify-self: center !important;
  }

  .header-actions {
    justify-self: end !important;
    padding-right: 2px !important;
  }
}

@media (max-width: 980px) {
  .landing-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 560px) {
  .landing-header {
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Password-reset completion action must be readable before hover. */
.auth-complete-action > a.main-btn,
.auth-complete-action > a.main-btn:link,
.auth-complete-action > a.main-btn:visited,
.auth-complete-action > a.main-btn:hover,
.auth-complete-action > a.main-btn:focus,
.auth-complete-action > a.main-btn:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* ==========================================================
   BidSmart UI hotfix v3 — 2026-08-30
   Public landing header: transparent/floating integration.
   Removes the full-width navbar slab so the header visually
   belongs to the landing page while retaining safe edge space.
   ========================================================== */
.landing-header {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.landing-nav a {
  background: transparent !important;
}

.landing-nav a:hover,
.landing-nav a:focus-visible {
  background: rgba(255,255,255,.74) !important;
  box-shadow: 0 8px 22px rgba(15,20,28,.06) !important;
}

.header-actions {
  flex-wrap: nowrap !important;
}

.header-actions .header-btn {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

@media (min-width: 981px) {
  .landing-header {
    width: 100% !important;
    max-width: none !important;
    min-height: 96px !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 10px !important;
    padding-left: max(32px, calc((100vw - 1440px) / 2 + 24px)) !important;
    padding-right: max(32px, calc((100vw - 1440px) / 2 + 24px)) !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    gap: 24px !important;
  }

  .landing-brand { justify-self: start !important; }
  .landing-nav { justify-self: center !important; }
  .header-actions { justify-self: end !important; }
}

@media (max-width: 980px) {
  .landing-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 20px 8px !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 14px !important;
  }
  .header-actions { justify-self: end !important; }
}

@media (max-width: 560px) {
  .landing-header {
    padding: 12px 12px 6px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .landing-brand { gap: 8px !important; min-width: 0 !important; }
  .landing-brand-mark {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
    flex: 0 0 40px !important;
  }
  .landing-brand-mark img { width: 29px !important; height: 29px !important; }
  .landing-brand strong { font-size: .82rem !important; letter-spacing: .07em !important; white-space: nowrap !important; }
  .header-actions { gap: 6px !important; }
  .header-actions .header-btn {
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    font-size: .73rem !important;
  }
}

@media (max-width: 350px) {
  .landing-header { padding-inline: 9px !important; }
  .landing-brand-mark { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  .landing-brand-mark img { width: 26px !important; height: 26px !important; }
  .landing-brand strong { font-size: .76rem !important; }
  .header-actions .header-btn { padding-inline: 8px !important; font-size: .69rem !important; }
}

/* ==========================================================
   BIDSMART MASTER UI POLISH v5 — 2026-08-30
   Comprehensive presentation-only pass. No business logic.
   Goals: cleaner hierarchy, consistent spacing, responsive
   cards/forms/tables, better mobile fit, calmer shadows.
   ========================================================== */

:root {
  --ui-red: #c91820;
  --ui-red-dark: #a9131a;
  --ui-red-soft: #fff3f4;
  --ui-ink: #17191f;
  --ui-muted: #667085;
  --ui-subtle: #8a94a3;
  --ui-bg: #f5f6f8;
  --ui-card: #ffffff;
  --ui-line: #e5e8ee;
  --ui-line-strong: #d7dce4;
  --ui-black: #15171b;
  --ui-radius-xl: 22px;
  --ui-radius-lg: 18px;
  --ui-radius-md: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow-xs: 0 1px 2px rgba(16,24,40,.04);
  --ui-shadow-sm: 0 4px 12px rgba(16,24,40,.06);
  --ui-shadow-md: 0 10px 28px rgba(16,24,40,.08);
  --ui-shadow-lg: 0 18px 48px rgba(16,24,40,.12);
  --ui-focus: 0 0 0 4px rgba(201,24,32,.12);
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  min-width: 0;
  margin: 0;
}

::selection { background: rgba(201,24,32,.18); color: #111; }

/* Cleaner browser scrollbars without changing functionality. */
@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb { background: #c7ccd4; border: 3px solid transparent; border-radius: 999px; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: #aeb5bf; border: 3px solid transparent; background-clip: content-box; }
}

/* ----- Public landing page ----- */
.landing-page {
  min-height: 100svh !important;
  background:
    radial-gradient(circle at 88% 4%, rgba(201,24,32,.08), transparent 28%),
    radial-gradient(circle at 8% 18%, rgba(17,24,39,.045), transparent 24%),
    linear-gradient(180deg, #fafafa 0%, #f4f5f7 100%) !important;
}

.landing-header {
  z-index: 30 !important;
  padding-top: 20px !important;
  padding-bottom: 12px !important;
}

.landing-brand {
  min-width: 0;
  text-decoration: none !important;
}

.landing-brand-mark {
  border: 1px solid rgba(17,24,39,.07) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 22px rgba(16,24,40,.07) !important;
}

.landing-brand strong { color: #17191f !important; letter-spacing: .12em !important; }
.landing-brand small { color: #747d8b !important; }

.landing-nav {
  padding: 5px !important;
  border: 1px solid rgba(17,24,39,.06) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.56) !important;
  box-shadow: 0 5px 18px rgba(16,24,40,.04) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.landing-nav a {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: #555d69 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
}

.landing-nav a:hover,
.landing-nav a:focus-visible {
  color: #17191f !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(16,24,40,.06) !important;
}

.header-actions .header-btn {
  min-width: 78px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding-inline: 16px !important;
  border-radius: 12px !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
.header-actions .header-btn-light {
  background: rgba(255,255,255,.92) !important;
  color: #22262d !important;
  border-color: var(--ui-line-strong) !important;
}
.header-actions .header-btn-light:hover { background: #fff !important; color: var(--ui-red) !important; }
.header-actions .header-btn-red { background: var(--ui-red) !important; border-color: var(--ui-red) !important; }

.landing-hero {
  min-height: auto !important;
  padding-top: clamp(42px, 6vw, 86px) !important;
  padding-bottom: clamp(56px, 7vw, 96px) !important;
  gap: clamp(38px, 5vw, 76px) !important;
  align-items: center !important;
}

.landing-hero-copy { max-width: 720px !important; }
.hero-badge {
  width: fit-content;
  padding: 8px 12px !important;
  border: 1px solid #eadadd !important;
  border-radius: 999px !important;
  color: #7f171c !important;
  background: rgba(255,248,248,.94) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.landing-hero-copy h1 {
  max-width: 760px;
  margin-top: 20px !important;
  color: #17191f !important;
  font-size: clamp(2.75rem, 5.25vw, 5.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}
.hero-lead {
  max-width: 650px !important;
  margin-top: 22px !important;
  color: #606977 !important;
  font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
  line-height: 1.72 !important;
}
.hero-cta-row { gap: 10px !important; margin-top: 28px !important; }
.hero-primary-btn,
.hero-secondary-btn {
  min-height: 48px !important;
  border-radius: 12px !important;
  padding-inline: 20px !important;
}
.hero-trust-row {
  margin-top: 34px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--ui-line) !important;
  gap: 18px !important;
}
.hero-trust-row > div { min-width: 0; }
.hero-trust-row strong { color: #252930 !important; }
.hero-trust-row span { color: #7a8492 !important; }

.hero-browser-card,
.platform-panel,
.company-proof-strip,
.final-cta-section,
.workflow-card,
.capability-grid article {
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow-md) !important;
}
.hero-browser-card {
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.hero-browser-bar { border-bottom: 1px solid var(--ui-line) !important; }
.hero-browser-content { gap: 22px !important; }
.hero-roof-showcase { border-radius: 18px !important; overflow: hidden !important; }

.company-proof-strip {
  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(10px);
}
.company-proof-strip > div { padding: 20px !important; }
.proof-label { color: var(--ui-red) !important; }

.landing-section { padding-block: clamp(58px, 7vw, 96px) !important; }
.section-heading { max-width: 780px !important; }
.section-heading h2,
.platform-copy h2,
.final-cta-section h2 {
  color: #1b1e24 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}
.section-heading p,
.platform-copy > p,
.final-cta-section p { color: #687180 !important; line-height: 1.7 !important; }

.workflow-grid,
.capability-grid { gap: 18px !important; }
.workflow-card,
.capability-grid article {
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.workflow-card:hover,
.capability-grid article:hover {
  transform: translateY(-3px) !important;
  border-color: #d8dce3 !important;
  box-shadow: var(--ui-shadow-md) !important;
}
.workflow-number { color: var(--ui-red) !important; opacity: .9; }
.workflow-card h3,
.capability-grid h3 { color: #20242b !important; }
.workflow-card p,
.capability-grid p { color: #6c7582 !important; line-height: 1.65 !important; }

.platform-panel,
.final-cta-section {
  border-radius: 24px !important;
  background: #fff !important;
}
.platform-dashboard-mock { border-radius: 18px !important; }
.platform-list li { border-bottom-color: var(--ui-line) !important; }

.landing-footer {
  border-top: 1px solid var(--ui-line) !important;
  color: #737c89 !important;
}

/* ----- Authentication / signup / recovery ----- */
.auth-page {
  min-height: 100svh !important;
  background: #f4f5f7 !important;
}
.auth-wrapper {
  min-height: 100svh !important;
  background: #f4f5f7 !important;
}
.auth-left {
  padding: clamp(40px, 5vw, 72px) !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(201,24,32,.20), transparent 32%),
    linear-gradient(150deg, #1a1c21 0%, #101216 100%) !important;
}
.auth-left::after { display: none !important; }
.left-content { width: min(100%, 620px) !important; margin-inline: auto !important; }
.brand-title {
  margin-bottom: 8px !important;
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  letter-spacing: .06em !important;
}
.tagline { margin-top: 0 !important; color: #d8dbe0 !important; line-height: 1.45 !important; }
.feature-grid { gap: 12px !important; margin-top: 34px !important; }
.feature-card {
  min-height: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
}
.feature-card h3 { margin-top: 12px !important; color: #fff !important; font-size: .96rem !important; }
.feature-card p { margin-top: 5px !important; color: #aeb4be !important; font-size: .8rem !important; line-height: 1.5 !important; }
.feature-icon { color: #ff555c !important; }

.auth-right {
  min-width: 0 !important;
  padding: clamp(24px, 5vw, 72px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.auth-panel {
  width: min(100%, 540px) !important;
  margin: 0 auto !important;
  padding: clamp(26px, 4vw, 42px) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 18px 46px rgba(16,24,40,.10) !important;
}
.signup-panel,
.signup-panel-wide { width: min(100%, 780px) !important; max-width: 780px !important; }
.auth-panel h2,
.signup-heading {
  margin: 0 0 24px !important;
  color: #1b1f26 !important;
  font-size: clamp(1.65rem, 3vw, 2rem) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  letter-spacing: -.035em !important;
}
.auth-panel form { gap: 14px !important; }
.auth-panel input:not([type="checkbox"]):not([type="radio"]),
.auth-panel select,
.auth-panel textarea,
.signup-field-label select {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 12px !important;
  background: #fbfbfc !important;
  color: #22262d !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.auth-panel textarea { min-height: 108px !important; padding-top: 13px !important; }
.auth-panel input:focus,
.auth-panel select:focus,
.auth-panel textarea:focus {
  border-color: rgba(201,24,32,.55) !important;
  background: #fff !important;
  box-shadow: var(--ui-focus) !important;
  outline: 0 !important;
}
.password-wrap { min-width: 0 !important; }
.toggle-password { right: 12px !important; }
.role-toggle {
  padding: 5px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  background: #f7f8fa !important;
  box-shadow: none !important;
}
.role-toggle-btn { min-height: 40px !important; border-radius: 9px !important; }
.role-toggle-btn.active { box-shadow: 0 3px 9px rgba(201,24,32,.18) !important; }

.main-btn { width: 100% !important; min-height: 48px !important; border-radius: 12px !important; }
.login-bottom-link { margin-top: 4px !important; text-align: center !important; }
.login-bottom-link a { color: #5d6673 !important; text-decoration: none !important; font-weight: 750 !important; }
.login-bottom-link a:hover { color: var(--ui-red) !important; }

.alert {
  border-radius: 12px !important;
  padding: 13px 15px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
.alert.success { border: 1px solid #cfe9dc !important; border-left: 4px solid #168455 !important; background: #f4fbf7 !important; color: #155f41 !important; }
.alert.error { border: 1px solid #f0ccd0 !important; border-left: 4px solid var(--ui-red) !important; background: #fff5f6 !important; color: #8f151a !important; }
.alert.warning { border: 1px solid #f0dfb8 !important; border-left: 4px solid #b87a17 !important; background: #fffaf0 !important; color: #6e4b10 !important; }

.signup-grid { gap: 14px 16px !important; }
.signup-section-title {
  margin: 10px 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--ui-line) !important;
  color: #272b32 !important;
  font-size: .82rem !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
.signup-field-label { gap: 6px !important; color: #454b55 !important; font-size: .78rem !important; }
.signup-otp-box,
.signup-requirements-box,
.privacy-consent-card,
.address-preview {
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: #fafbfc !important;
  box-shadow: none !important;
}
.recovery-choice { gap: 10px !important; }
.recovery-option {
  border: 1px solid var(--ui-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.recovery-option.active { border-color: rgba(201,24,32,.55) !important; background: #fff7f7 !important; box-shadow: 0 0 0 3px rgba(201,24,32,.08) !important; }
.auth-complete-action { margin-top: 2px !important; }
.auth-complete-action > a.main-btn { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ----- Client / Supplier application shell ----- */
.portal-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(18,20,24,.97) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 8px 24px rgba(16,24,40,.13) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.portal-topbar-inner {
  width: 100% !important;
  max-width: 1600px !important;
  min-height: 76px !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 3vw, 40px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 20px !important;
}
.portal-top-brand { flex: 0 0 auto !important; min-width: 190px !important; gap: 10px !important; }
.portal-top-brand-logo { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
.portal-top-brand-logo img { width: 30px !important; height: 30px !important; }
.portal-top-brand-copy strong { font-size: .98rem !important; letter-spacing: -.01em !important; }
.portal-top-brand-copy small { margin-top: 2px !important; font-size: .7rem !important; }

.portal-nav-panel { min-width: 0 !important; gap: 18px !important; }
.portal-top-menu { min-width: 0 !important; gap: 4px !important; }
.portal-top-menu-link {
  min-height: 40px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  font-size: .78rem !important;
  font-weight: 720 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
.portal-top-menu-link:hover { background: rgba(255,255,255,.065) !important; box-shadow: none !important; }
.portal-top-menu-link.active { background: var(--ui-red) !important; border-color: var(--ui-red) !important; box-shadow: 0 3px 10px rgba(201,24,32,.25) !important; }
.portal-top-menu-badge { min-width: 20px !important; height: 20px !important; padding: 0 6px !important; border-radius: 999px !important; font-size: .68rem !important; }

.portal-top-account { gap: 10px !important; padding-left: 16px !important; }
.portal-top-user { min-width: 0 !important; gap: 9px !important; }
.portal-top-avatar { width: 36px !important; height: 36px !important; font-size: .84rem !important; box-shadow: none !important; }
.portal-account-name { max-width: 160px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.portal-top-logout { min-height: 38px !important; height: 38px !important; padding-inline: 13px !important; border-radius: 10px !important; box-shadow: none !important; }
.portal-nav-toggle { min-height: 40px !important; border-radius: 10px !important; box-shadow: none !important; }

.portal-main,
.roof-dashboard-main { min-width: 0 !important; padding-bottom: 56px !important; }
.roof-dashboard-content {
  width: min(1440px, calc(100% - 36px)) !important;
  margin-inline: auto !important;
  padding-top: clamp(24px, 3vw, 38px) !important;
}
.portal-page-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 24px !important;
}
.roof-page-title,
.portal-page-heading .roof-page-title {
  margin: 0 !important;
  color: #181b20 !important;
  font-size: clamp(1.72rem, 2.6vw, 2.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}
.roof-subtitle { margin-top: 0 !important; color: #252930 !important; letter-spacing: -.02em !important; }
.portal-page-heading p { max-width: 760px !important; margin: 7px 0 0 !important; color: #707987 !important; }
.dashboard-primary-actions { flex: 0 0 auto !important; flex-wrap: wrap !important; justify-content: flex-end !important; }

/* Cards and grids */
.roof-card-grid,
.dashboard-preview-grid,
.admin-mini-stats,
.overview-stats-grid {
  gap: 18px !important;
}
.roof-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)) !important; }
.overview-stats-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
.dashboard-preview-grid { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)) !important; }

.dashboard-section-card,
.admin-section-card,
.roof-design-card,
.notification-card,
.profile-summary-card,
.profile-details-under-card,
.edit-profile-single-card,
.inventory-editor-card,
.client-bids-table-card,
.request-summary-card,
.bid-status-list-card {
  border: 1px solid var(--ui-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
.dashboard-section-card,
.admin-section-card { padding: clamp(18px, 2.2vw, 28px) !important; }
.dashboard-section-card:hover,
.roof-design-card:hover,
.notification-card:hover { box-shadow: var(--ui-shadow-sm) !important; }

.dashboard-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}
.dashboard-section-header h2,
.dashboard-section-header h3 { margin: 0 !important; }
.overview-view-link { white-space: nowrap !important; }

.roof-design-card {
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
.roof-design-card:hover { transform: translateY(-2px) !important; border-color: #d8dce3 !important; }
.roof-design-image {
  min-height: 210px !important;
  height: clamp(210px, 17vw, 250px) !important;
  background: #f7f8fa !important;
  border-bottom: 1px solid var(--ui-line) !important;
  overflow: hidden !important;
}
.roof-design-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.roof-design-body {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.roof-design-body h3 { margin: 0 !important; font-size: 1.03rem !important; line-height: 1.35 !important; }
.roof-design-desc { margin: 0 !important; line-height: 1.6 !important; }
.roof-design-meta { margin-top: 2px !important; }
.catalogue-card-actions,
.roof-bid-actions,
.request-draft-primary-actions { margin-top: auto !important; padding-top: 8px !important; }

.admin-mini-stat-card,
.client-overview-stat-card {
  min-height: 112px !important;
  padding: 18px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
  position: relative !important;
  overflow: hidden !important;
}
.admin-mini-stat-card::before,
.client-overview-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ui-red);
}
.admin-mini-stat-card span { color: #6d7582 !important; font-size: .72rem !important; letter-spacing: .06em !important; }
.admin-mini-stat-card strong,
.admin-stat-number { color: #b4141b !important; }

.empty-design-box {
  min-height: 150px !important;
  padding: 28px !important;
  border: 1px dashed #ccd2db !important;
  border-radius: 16px !important;
  background: #fafbfc !important;
  color: #75808e !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* ----- Forms everywhere ----- */
.dashboard-form input,
.dashboard-form select,
.dashboard-form textarea,
.manufacturer-bid-form input,
.manufacturer-bid-form select,
.manufacturer-bid-form textarea,
.profile-grid-form input,
.profile-grid-form select,
.profile-grid-form textarea,
.design-quantity-form input,
.design-quantity-form select,
.design-quantity-form textarea,
.inventory-form input,
.inventory-form select,
.inventory-form textarea,
.quotation-detail-form input,
.quotation-detail-form select,
.quotation-detail-form textarea,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea,
.admin-filter-bar input,
.admin-filter-bar select,
.verification-action-form textarea {
  min-height: 46px !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 11px !important;
  background: #fbfbfc !important;
  color: #23272e !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.dashboard-form textarea,
.manufacturer-bid-form textarea,
.profile-grid-form textarea,
.design-quantity-form textarea,
.inventory-form textarea,
.quotation-detail-form textarea,
.admin-form-grid textarea,
.verification-action-form textarea { min-height: 108px !important; }

.dashboard-form input:focus,
.dashboard-form select:focus,
.dashboard-form textarea:focus,
.manufacturer-bid-form input:focus,
.manufacturer-bid-form select:focus,
.manufacturer-bid-form textarea:focus,
.profile-grid-form input:focus,
.profile-grid-form select:focus,
.profile-grid-form textarea:focus,
.design-quantity-form input:focus,
.design-quantity-form select:focus,
.design-quantity-form textarea:focus,
.inventory-form input:focus,
.inventory-form select:focus,
.inventory-form textarea:focus,
.quotation-detail-form input:focus,
.quotation-detail-form select:focus,
.quotation-detail-form textarea:focus,
.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus,
.admin-filter-bar input:focus,
.admin-filter-bar select:focus,
.verification-action-form textarea:focus {
  border-color: rgba(201,24,32,.52) !important;
  background: #fff !important;
  box-shadow: var(--ui-focus) !important;
  outline: none !important;
}

.profile-label,
.quantity-label,
.design-request-field label,
.form-check-label { color: #4f5661 !important; font-size: .78rem !important; font-weight: 750 !important; }

/* Consistent buttons */
.roof-post-btn,
.main-btn,
.profile-primary-btn,
.roof-select-btn,
.admin-btn-red,
.client-approve-btn,
.modal-save-btn,
.signup-otp-button-primary,
a.roof-post-btn,
button.roof-post-btn {
  min-height: 44px !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 6px rgba(201,24,32,.16) !important;
}
.admin-btn-neutral,
.profile-secondary-btn,
.client-bids-back-btn,
.manufacturer-bid-back-btn,
.view-post-link,
.overview-view-link {
  min-height: 42px !important;
  border-radius: 11px !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

/* ----- Tables / list data ----- */
.table-wrap,
.admin-table-wrap,
.client-bids-table-card,
.audit-table-wrap,
.report-table-wrap {
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
  overflow-x: auto !important;
}
.table-wrap table,
.admin-table-wrap table,
.client-bids-table-card table,
.audit-table-wrap table,
.report-table-wrap table,
.admin-clean-table,
.hyperledger-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff !important;
}
.table-wrap th,
.admin-table-wrap th,
.client-bids-table-card th,
.audit-table-wrap th,
.report-table-wrap th,
.admin-clean-table th,
.hyperledger-table th {
  padding: 12px 14px !important;
  background: #191b20 !important;
  color: #fff !important;
  border-bottom: 0 !important;
  font-size: .69rem !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.table-wrap td,
.admin-table-wrap td,
.client-bids-table-card td,
.audit-table-wrap td,
.report-table-wrap td,
.admin-clean-table td,
.hyperledger-table td {
  padding: 13px 14px !important;
  border-bottom: 1px solid #edf0f3 !important;
  color: #343942 !important;
  vertical-align: middle !important;
  line-height: 1.45 !important;
}
table tbody tr:last-child td { border-bottom: 0 !important; }
table tbody tr:hover { background: #fff8f8 !important; }

/* Notifications and activity rows */
.notification-card,
.bid-status-item,
.dashboard-recent-item {
  border-radius: 14px !important;
  border: 1px solid var(--ui-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.notification-card { padding: 16px 18px !important; }
.notification-card:hover,
.bid-status-item:hover,
.dashboard-recent-item:hover { border-color: #d8dce3 !important; background: #fff !important; box-shadow: var(--ui-shadow-sm) !important; }

/* ----- Modal / 3D presentation ----- */
.design-modal-overlay,
.audit-modal-overlay { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.design-modal-box,
.design-modal,
.modal-content,
.admin-modal-content,
.audit-modal-content {
  width: min(960px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(16,24,40,.24) !important;
  overflow-y: auto !important;
}
.design-modal-content { gap: 20px !important; }
.design-modal-image { border-radius: 16px !important; overflow: hidden !important; background: #f6f7f9 !important; }
.design-modal-details { gap: 14px !important; }

.visualizer-control-panel,
.visualizer-preview-panel {
  border-radius: 18px !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
.visualizer-stage-3d { border-radius: 16px !important; overflow: hidden !important; }

/* ----- Admin shell ----- */
.admin-layout {
  min-height: 100svh !important;
  gap: 20px !important;
  padding: 16px !important;
  background: #f3f4f6 !important;
}
.admin-sidebar {
  width: 250px !important;
  height: calc(100svh - 32px) !important;
  top: 16px !important;
  padding: 18px 14px !important;
  border-radius: 20px !important;
  background: #15171b !important;
  box-shadow: 0 16px 38px rgba(16,24,40,.15) !important;
  overflow-y: auto !important;
}
.sidebar-logo {
  margin: 0 4px 18px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  text-align: left !important;
}
.sidebar-logo img { width: 46px !important; height: 46px !important; margin: 0 0 9px !important; }
.sidebar-logo h2 { font-size: 1rem !important; letter-spacing: .02em !important; }
.sidebar-logo p { margin: 3px 0 0 !important; font-size: .72rem !important; color: #9ea5b0 !important; }
.sidebar-menu { gap: 4px !important; }
.sidebar-menu a,
.admin-logout-form .logout-link {
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #cfd3da !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
}
.sidebar-menu a:hover,
.admin-logout-form .logout-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.05) !important;
  box-shadow: none !important;
  transform: none !important;
}
.sidebar-menu a.active {
  color: #fff !important;
  background: var(--ui-red) !important;
  border-color: var(--ui-red) !important;
  box-shadow: 0 3px 10px rgba(201,24,32,.25) !important;
}
.admin-logout-form { margin-top: auto !important; }
.admin-logout-form .logout-link { color: #fff !important; background: rgba(201,24,32,.12) !important; border-color: rgba(201,24,32,.26) !important; }
.admin-logout-form .logout-link:hover { background: var(--ui-red) !important; }

.admin-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 302px) !important;
  padding: 0 0 40px !important;
}
.admin-header {
  min-height: 86px !important;
  margin: 0 0 18px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
.admin-header h1 { margin: 0 !important; color: #191c21 !important; font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important; letter-spacing: -.04em !important; }
.admin-header p { margin: 6px 0 0 !important; color: #707987 !important; }
.admin-avatar { width: 42px !important; height: 42px !important; border-radius: 12px !important; background: #17191f !important; border: 0 !important; box-shadow: none !important; }

.admin-mini-stats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
.admin-design-list { gap: 16px !important; }
.admin-section-card { margin-bottom: 18px !important; }
.verification-card-list { gap: 14px !important; }
.verification-card {
  padding: 18px !important;
  border-radius: 16px !important;
  box-shadow: var(--ui-shadow-xs) !important;
}
.verification-card-header { gap: 14px !important; }
.verification-details,
.verification-details-wide { gap: 10px !important; }
.verification-details > div,
.verification-details-wide > div,
.hyperledger-network-grid > div {
  padding: 13px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  background: #fafbfc !important;
  box-shadow: none !important;
}
.admin-filter-bar {
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: #fafbfc !important;
  box-shadow: none !important;
}
.dashboard-recent-list { gap: 8px !important; }
.dashboard-recent-item { padding: 13px 14px !important; }

/* Status chips: compact and readable. */
.bid-status,
.bid-status-badge,
.client-bid-status,
.admin-status-badge,
.audit-badge,
.profile-badge,
.security-chip,
.client-bid-tag {
  min-height: 26px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* ----- Responsive behavior ----- */
@media (max-width: 1180px) {
  .portal-top-brand { min-width: 0 !important; }
  .portal-top-brand-copy small { display: none !important; }
  .portal-top-menu-link { padding-inline: 9px !important; font-size: .74rem !important; }
  .portal-account-name { max-width: 110px !important; }
  .landing-hero { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 1100px) {
  .portal-topbar-inner { min-height: 70px !important; }
  .portal-nav-panel {
    top: calc(100% + 8px) !important;
    left: 14px !important;
    right: 14px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    background: #17191f !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.30) !important;
  }
  .portal-top-menu { gap: 6px !important; }
  .portal-top-menu-link { min-height: 44px !important; padding-inline: 13px !important; font-size: .8rem !important; }
  .portal-top-account { padding: 12px 2px 2px !important; }

  .admin-layout { display: block !important; padding: 12px !important; }
  .admin-sidebar {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }
  .sidebar-logo {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    align-items: center !important;
  }
  .sidebar-logo img { grid-row: 1 / 3 !important; margin: 0 !important; }
  .sidebar-menu { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 6px !important; }
  .admin-logout-form { margin-top: 10px !important; }
  .admin-main { max-width: none !important; width: 100% !important; }
}

@media (max-width: 980px) {
  .landing-nav { display: none !important; }
  .landing-hero { grid-template-columns: 1fr !important; padding-top: 30px !important; }
  .landing-hero-copy { max-width: 760px !important; }
  .landing-hero-visual { max-width: 760px !important; width: 100% !important; margin-inline: auto !important; }
  .company-proof-strip { grid-template-columns: 1fr !important; }
  .company-proof-strip > div + div { border-left: 0 !important; border-top: 1px solid var(--ui-line) !important; }
  .platform-panel { grid-template-columns: 1fr !important; }

  .auth-wrapper { grid-template-columns: 1fr !important; }
  .auth-left { min-height: auto !important; padding: 30px 24px !important; }
  .left-content { max-width: 820px !important; }
  .feature-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; margin-top: 22px !important; }
  .feature-card { padding: 14px !important; }
  .feature-card p { display: none !important; }
  .auth-right { padding: 28px 18px 42px !important; }
}

@media (max-width: 760px) {
  .roof-dashboard-content { width: min(100% - 24px, 1440px) !important; padding-top: 22px !important; }
  .portal-page-heading { align-items: flex-start !important; flex-direction: column !important; }
  .dashboard-primary-actions { width: 100% !important; justify-content: flex-start !important; }
  .dashboard-primary-actions > * { flex: 1 1 auto !important; }
  .dashboard-section-card,
  .admin-section-card { padding: 18px !important; }
  .dashboard-section-header { align-items: flex-start !important; }
  .roof-design-image { height: 220px !important; }
  .design-modal-content { grid-template-columns: 1fr !important; }
  .design-modal-image { min-height: 220px !important; }

  .sidebar-menu { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .admin-header { padding: 17px !important; }
  .admin-mini-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .verification-card-header { align-items: flex-start !important; flex-direction: column !important; }
}

@media (max-width: 620px) {
  .landing-header { padding: 12px 12px 7px !important; }
  .landing-brand small { display: none !important; }
  .landing-hero { padding-inline: 14px !important; padding-bottom: 56px !important; }
  .landing-hero-copy h1 { font-size: clamp(2.35rem, 12vw, 3.35rem) !important; }
  .hero-cta-row { display: grid !important; grid-template-columns: 1fr !important; }
  .hero-primary-btn, .hero-secondary-btn { width: 100% !important; }
  .hero-trust-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .landing-section { padding-block: 50px !important; }
  .workflow-grid, .capability-grid { grid-template-columns: 1fr !important; }
  .final-cta-section { align-items: flex-start !important; flex-direction: column !important; }
  .final-cta-actions { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; }

  .auth-left { padding: 24px 18px !important; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .auth-right { padding: 20px 12px 34px !important; }
  .auth-panel { padding: 22px 17px !important; border-radius: 16px !important; }
  .signup-grid,
  .nested-signup-grid,
  .document-upload-grid,
  .conditional-document-grid,
  .signup-otp-row { grid-template-columns: 1fr !important; }
  .signup-grid > *, .full-span { grid-column: 1 / -1 !important; }

  .portal-topbar-inner { padding-inline: 12px !important; }
  .portal-top-brand-logo { width: 38px !important; height: 38px !important; }
  .portal-top-brand-copy strong { font-size: .88rem !important; }
  .portal-nav-toggle { min-width: 60px !important; }

  .roof-card-grid,
  .dashboard-preview-grid,
  .overview-stats-grid { grid-template-columns: 1fr !important; }
  .admin-mini-stats { grid-template-columns: 1fr !important; }
  .sidebar-menu { grid-template-columns: 1fr !important; }
  .admin-layout { padding: 8px !important; }
  .admin-sidebar { border-radius: 15px !important; }
  .admin-header { border-radius: 15px !important; }
  .admin-section-card { border-radius: 15px !important; }
}

@media (max-width: 420px) {
  .landing-brand-mark { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .landing-brand strong { font-size: .76rem !important; }
  .header-actions .header-btn { min-width: 0 !important; min-height: 38px !important; height: 38px !important; padding-inline: 10px !important; font-size: .71rem !important; }
  .roof-dashboard-content { width: calc(100% - 18px) !important; }
  .roof-page-title, .portal-page-heading .roof-page-title { font-size: 1.6rem !important; }
  .dashboard-section-header { flex-direction: column !important; }
  .overview-view-link { width: 100% !important; }
  .catalogue-card-actions,
  .inventory-card-actions,
  .request-draft-primary-actions,
  .verification-actions { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ========================================================================== 
   BIDSMART UI V6 — auth background restoration + soft cross-page navigation
   ========================================================================== */
.auth-left {
  background:
    linear-gradient(115deg, rgba(12, 15, 20, .50), rgba(12, 15, 20, .68)),
    radial-gradient(circle at 18% 15%, rgba(201, 24, 32, .20), transparent 34%),
    url('/background.webp') center center / cover no-repeat !important;
  background-color: #111318 !important;
}
.auth-left .brand-title,
.auth-left .tagline,
.auth-left .feature-card h3,
.auth-left .feature-card p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.auth-left .feature-card {
  background: rgba(15, 18, 23, .48) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@view-transition {
  navigation: none;
}
::view-transition-group(root) {
  animation-duration: 120ms;
  animation-timing-function: ease-out;
}
::view-transition-old(root) {
  animation: bidsmart-page-out 90ms ease-in both;
}
::view-transition-new(root) {
  animation: bidsmart-page-in 120ms ease-out both;
}
@keyframes bidsmart-page-out {
  from { opacity: 1; }
  to   { opacity: .94; }
}
@keyframes bidsmart-page-in {
  from { opacity: .94; }
  to   { opacity: 1; }
}
html {
  background-color: #f4f5f7 !important;
}
body.admin-body,
body.roof-dashboard-body,
body.dashboard-page,
.admin-main,
.portal-page-main {
  background-color: #f4f5f7 !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms !important;
  }
}


/* ========================================================================== 
   BIDSMART UI V7 — platform copy visibility + zero-flash page navigation
   ========================================================================== */
/* V5 changed the procurement platform panel from dark to white. Restore the
   corresponding list typography so the copy never inherits the old white text. */
.platform-panel {
  color: #20242b !important;
}
.platform-copy > p {
  color: #687180 !important;
}
.platform-list {
  gap: 12px !important;
}
.platform-list li {
  grid-template-columns: 12px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid #e7e9ee !important;
  border-radius: 14px !important;
  background: #fafbfc !important;
}
.platform-list li > span {
  margin-top: 7px !important;
}
.platform-list li > div {
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.platform-list strong {
  color: #23272f !important;
  opacity: 1 !important;
}
.platform-list small {
  color: #707987 !important;
  opacity: 1 !important;
}

/* Cross-document View Transitions created a bright wash between traditional
   PHP pages. BidSmart now changes pages immediately with a stable canvas. */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  animation-duration: 0s !important;
}
html,
body,
body.admin-body,
body.roof-dashboard-body,
body.dashboard-page,
.admin-main,
.portal-page-main {
  background-color: #f4f5f7 !important;
}

/* ========================================================================== 
   BIDSMART UI V8 — client/supplier hard no-flash navigation
   ========================================================================== */
.portal-route-shield {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #f4f5f7;
  pointer-events: none;
  opacity: 1;
}
html.portal-route-leaving,
html.portal-route-leaving body {
  background: #f4f5f7 !important;
}

/* BidSmart v27 — supplier registration cleanup */
.signup-heading-clean {
  margin-bottom: 18px !important;
}
.signup-heading-clean h2 {
  margin-bottom: 7px !important;
}
.signup-heading-clean p {
  max-width: 600px !important;
  margin: 0 auto !important;
  color: #68707c !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
}
.signup-company-form {
  gap: 14px 16px !important;
}
.signup-company-form > .signup-section-title:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.signup-company-form .signup-section-title {
  margin: 4px 0 0 !important;
  padding: 18px 0 9px !important;
  border-top: 1px solid var(--ui-line) !important;
  border-bottom: 0 !important;
  color: #3e454f !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .085em !important;
}
.signup-company-form input:not([type="checkbox"]):not([type="file"]),
.signup-company-form select {
  min-height: 48px !important;
  border-radius: 12px !important;
}
.signup-company-form .signup-field-label {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  color: #424954 !important;
  font-size: .78rem !important;
  font-weight: 760 !important;
}
.signup-company-form .signup-field-label select {
  margin-top: 0 !important;
}
.signup-company-form .signup-otp-box {
  padding: 15px !important;
  border-radius: 14px !important;
  background: #f8f9fb !important;
}
.signup-company-form .signup-otp-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
.signup-company-form .signup-otp-header strong {
  display: block !important;
  margin-bottom: 2px !important;
  color: #242932 !important;
  font-size: .88rem !important;
}
.signup-company-form .signup-otp-header small {
  display: block !important;
  color: #727a86 !important;
  font-size: .74rem !important;
  line-height: 1.35 !important;
}
.signup-company-form .signup-otp-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 126px !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.signup-company-form .signup-otp-row input {
  min-width: 0 !important;
  text-align: center !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
}
.signup-company-form .signup-otp-button {
  min-width: 126px !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.signup-company-form .signup-otp-status {
  min-height: 18px !important;
  margin: 9px 0 0 !important;
  color: #6d7581 !important;
  font-size: .75rem !important;
  line-height: 1.4 !important;
}
.signup-company-form .address-preview {
  padding: 12px 14px !important;
}
.signup-company-form .address-preview-label {
  margin-bottom: 4px !important;
  font-size: .67rem !important;
  letter-spacing: .08em !important;
}
.signup-company-form .address-preview strong {
  font-size: .82rem !important;
  line-height: 1.45 !important;
}
.signup-company-form .password-strength {
  margin: -5px 0 0 !important;
  color: #747c87 !important;
  font-size: .75rem !important;
}
.signup-documents-box {
  gap: 14px !important;
  padding: 16px !important;
  background: #fafbfc !important;
}
.signup-requirements-heading {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.signup-requirements-heading h3 {
  margin: 0 !important;
  color: #2d323a !important;
  font-size: .96rem !important;
}
.signup-requirements-heading p {
  margin: 0 !important;
  color: #747c87 !important;
  font-size: .74rem !important;
  text-align: right !important;
}
.signup-documents-box .document-upload-grid {
  gap: 11px !important;
}
.signup-documents-box .document-upload-grid label {
  min-height: 118px !important;
  padding: 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  align-content: start !important;
}
.signup-documents-box input[type="file"] {
  min-height: 42px !important;
  margin-top: 2px !important;
  padding: 8px !important;
  border: 1px dashed #bdc4ce !important;
  border-radius: 9px !important;
  background: #fbfcfd !important;
}
.signup-company-form .required-mark,
.signup-company-form .optional-mark {
  width: fit-content !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  font-size: .61rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}
.signup-company-form .optional-mark {
  background: #eef1f4 !important;
  color: #69717c !important;
}
.signup-company-form .privacy-consent-card {
  display: grid !important;
  grid-template-columns: 18px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 13px 14px !important;
  color: #606874 !important;
  font-size: .76rem !important;
  line-height: 1.45 !important;
}
.signup-company-form .privacy-consent-card input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 1px 0 0 !important;
  accent-color: var(--ui-red) !important;
}
.signup-company-form .privacy-consent-card a {
  color: var(--ui-red) !important;
  font-weight: 800 !important;
}
.signup-company-form .signup-bottom {
  gap: 10px !important;
  margin-top: 0 !important;
}
.signup-company-form .signup-bottom .main-btn {
  min-height: 50px !important;
  border-radius: 11px !important;
  font-size: .9rem !important;
}
.signup-company-form .signup-bottom p {
  margin: 0 !important;
  color: #6d7580 !important;
  font-size: .8rem !important;
}
.signup-company-form .signup-bottom a {
  color: #3f4650 !important;
  font-weight: 800 !important;
}
.signup-company-form .signup-bottom a:hover {
  color: var(--ui-red) !important;
}

@media (max-width: 620px) {
  .signup-company-form .signup-otp-header,
  .signup-requirements-heading {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .signup-company-form .signup-otp-row {
    grid-template-columns: 1fr !important;
  }
  .signup-company-form .signup-otp-button {
    width: 100% !important;
  }
  .signup-requirements-heading p {
    text-align: left !important;
  }
}

/* === BIDSMART_SUPPLIER_VIEW_DETAILS_MODAL_EXISTING_ASSETS_V4 === */
#bidsmartQuotationModalV4[hidden]{display:none!important}
#bidsmartQuotationModalV4{
  position:fixed!important;inset:0!important;z-index:2147483000!important;
  display:grid!important;place-items:center!important;padding:24px!important;
  background:rgba(12,18,26,.66)!important;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)
}
body.bidsmart-quotation-modal-open-v4{overflow:hidden!important}
#bidsmartQuotationModalV4 .bqv4-dialog{
  width:min(1120px,calc(100vw - 48px))!important;height:min(88vh,860px)!important;
  min-height:560px!important;display:flex!important;flex-direction:column!important;
  overflow:hidden!important;background:#fff!important;border:1px solid rgba(255,255,255,.35)!important;
  border-radius:22px!important;box-shadow:0 28px 90px rgba(0,0,0,.38)!important
}
#bidsmartQuotationModalV4 .bqv4-head{
  flex:0 0 auto!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:16px!important;padding:15px 18px!important;
  border-bottom:1px solid #e1e6eb!important;background:#fff!important
}
#bidsmartQuotationModalV4 .bqv4-kicker{
  display:block!important;margin:0 0 2px!important;color:#c9161e!important;
  font-size:.67rem!important;font-weight:900!important;letter-spacing:.07em!important;text-transform:uppercase!important
}
#bidsmartQuotationModalV4 .bqv4-title{
  margin:0!important;color:#1c2229!important;font-size:1.12rem!important;font-weight:950!important;line-height:1.2!important
}
#bidsmartQuotationModalV4 .bqv4-close{
  width:40px!important;height:40px!important;display:grid!important;place-items:center!important;
  flex:0 0 auto!important;border:1px solid #d6dce2!important;border-radius:11px!important;
  background:#f8f9fa!important;color:#444e59!important;font:inherit!important;
  font-size:1.35rem!important;line-height:1!important;cursor:pointer!important
}
#bidsmartQuotationModalV4 .bqv4-close:hover{background:#eef1f4!important}
#bidsmartQuotationModalV4 .bqv4-framebox{flex:1 1 auto!important;min-height:0!important;background:#f3f5f7!important}
#bidsmartQuotationModalV4 .bqv4-frame{display:block!important;width:100%!important;height:100%!important;border:0!important;background:#f3f5f7!important}

body.quotation-modal-embed-v4{
  margin:0!important;min-height:100%!important;background:#fff!important;
  color:#1c2229!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important
}
body.quotation-modal-embed-v4 *{box-sizing:border-box!important}
body.quotation-modal-embed-v4 .portal-topbar,
body.quotation-modal-embed-v4 .roof-dashboard-overlay,
body.quotation-modal-embed-v4 .roof-page-title,
body.quotation-modal-embed-v4 .sq-page-head,
body.quotation-modal-embed-v4 .sqm-modal-topbar,
body.quotation-modal-embed-v4 .manufacturer-bid-back-btn,
body.quotation-modal-embed-v4 .sq-back-top{display:none!important}
body.quotation-modal-embed-v4 .portal-layout,
body.quotation-modal-embed-v4 .portal-main,
body.quotation-modal-embed-v4 .roof-dashboard-main{min-height:100%!important;background:#fff!important}
body.quotation-modal-embed-v4 .roof-dashboard-content{
  width:100%!important;max-width:none!important;min-height:0!important;
  margin:0!important;padding:16px!important;background:#fff!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-container{width:100%!important;max-width:none!important;margin:0!important}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-card{
  width:100%!important;display:grid!important;
  grid-template-columns:minmax(0,330px) minmax(0,1fr)!important;
  gap:0!important;padding:0!important;margin:0!important;overflow:hidden!important;
  border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important
}
body.quotation-modal-embed-v4 .sq-visual-column{
  min-width:0!important;padding:18px!important;
  border-right:1px solid #e2e7ec!important;background:linear-gradient(180deg,#f8fafb,#f0f3f6)!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-image{
  width:100%!important;height:235px!important;min-height:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;padding:14px!important;border:1px solid #dfe4e9!important;
  border-radius:15px!important;background:#fff!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-image img{
  display:block!important;width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;object-fit:contain!important
}
body.quotation-modal-embed-v4 .sq-visual-meta{
  display:grid!important;gap:3px!important;margin-top:11px!important;padding:11px 13px!important;
  border:1px solid #e1e6eb!important;border-radius:12px!important;background:#fff!important
}
body.quotation-modal-embed-v4 .sq-visual-meta-label,
body.quotation-modal-embed-v4 .sq-info-label{
  display:block!important;color:#717c88!important;font-size:.64rem!important;
  font-weight:900!important;letter-spacing:.055em!important;text-transform:uppercase!important
}
body.quotation-modal-embed-v4 .sq-request-code{color:#252b32!important;font-size:.82rem!important;font-weight:900!important;overflow-wrap:anywhere!important}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-info{
  min-width:0!important;display:flex!important;flex-direction:column!important;
  gap:12px!important;padding:18px 20px 22px!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-top{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-top h2{
  margin:0!important;color:#1d232a!important;font-size:1.3rem!important;line-height:1.18!important;font-weight:950!important
}
body.quotation-modal-embed-v4 .manufacturer-detail-status{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:28px!important;padding:0 10px!important;border-radius:999px!important;
  font-size:.66rem!important;font-weight:900!important;white-space:nowrap!important
}
body.quotation-modal-embed-v4 .manufacturer-detail-status.pending{background:#fff4d7!important;color:#8b5900!important;border:1px solid #ebd09a!important}
body.quotation-modal-embed-v4 .manufacturer-detail-status.approved{background:#eef9f1!important;color:#176638!important;border:1px solid #c8e4cf!important}
body.quotation-modal-embed-v4 .manufacturer-detail-status.declined{background:#fff0f1!important;color:#a01927!important;border:1px solid #eec3c9!important}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-desc{
  margin:0!important;color:#65707c!important;font-size:.8rem!important;line-height:1.5!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-message-box{
  margin:0!important;padding:10px 12px!important;border:1px solid #e1e6eb!important;
  border-radius:11px!important;background:#f8f9fb!important;color:#4a5561!important;
  font-size:.75rem!important;line-height:1.42!important
}
body.quotation-modal-embed-v4 .sq-section{
  overflow:hidden!important;border:1px solid #e1e6eb!important;border-radius:13px!important;background:#fff!important
}
body.quotation-modal-embed-v4 .sq-section-head{padding:10px 12px!important;border-bottom:1px solid #edf0f3!important;background:#fafbfc!important}
body.quotation-modal-embed-v4 .sq-section-head h3{margin:0!important;color:#262c33!important;font-size:.76rem!important;font-weight:900!important}
body.quotation-modal-embed-v4 .sq-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.quotation-modal-embed-v4 .sq-info-item{min-width:0!important;padding:9px 12px!important;border-bottom:1px solid #edf0f3!important}
body.quotation-modal-embed-v4 .sq-info-item:nth-child(odd){border-right:1px solid #edf0f3!important}
body.quotation-modal-embed-v4 .sq-info-item:nth-last-child(-n+2){border-bottom:0!important}
body.quotation-modal-embed-v4 .sq-info-value{
  display:block!important;margin-top:3px!important;color:#272e35!important;
  font-size:.76rem!important;font-weight:800!important;line-height:1.38!important;overflow-wrap:anywhere!important
}
body.quotation-modal-embed-v4 .sq-info-value a{color:#bd111a!important;font-weight:900!important}
body.quotation-modal-embed-v4 .sq-total-item{background:#fff7f7!important}
body.quotation-modal-embed-v4 .sq-total-item .sq-info-value{color:#bd111a!important;font-size:.96rem!important;font-weight:950!important}
body.quotation-modal-embed-v4 .sq-note{padding:10px 12px!important;border-top:1px solid #edf0f3!important;background:#fcfcfd!important}
body.quotation-modal-embed-v4 .sq-privacy-note{
  display:flex!important;gap:8px!important;align-items:flex-start!important;padding:10px 12px!important;
  border:1px solid #e1e6eb!important;border-radius:11px!important;background:#f8f9fa!important;
  color:#596470!important;font-size:.69rem!important;line-height:1.42!important
}
body.quotation-modal-embed-v4 .sq-privacy-dot{
  width:7px!important;height:7px!important;flex:0 0 7px!important;margin-top:4px!important;
  border-radius:50%!important;background:#c9161e!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-meta{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-meta>span{
  display:block!important;margin:0!important;padding:9px 11px!important;
  border:1px solid #e1e6eb!important;border-radius:11px!important;background:#f8f9fb!important;
  color:#313943!important;font-size:.74rem!important;line-height:1.4!important
}
body.quotation-modal-embed-v4 .manufacturer-bid-detail-meta>span strong{
  display:block!important;margin-bottom:2px!important;color:#717c88!important;
  font-size:.62rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.04em!important
}
body.quotation-modal-embed-v4 .quotation-revision-panel{
  margin:0!important;padding:14px!important;border:1px solid #e1e6eb!important;
  border-radius:13px!important;background:#fbfcfd!important;box-shadow:none!important
}
body.quotation-modal-embed-v4 .quotation-revision-panel h3{margin:0 0 2px!important;font-size:.86rem!important}
body.quotation-modal-embed-v4 .quotation-revision-panel p{margin:0 0 10px!important;color:#68737f!important;font-size:.72rem!important}
body.quotation-modal-embed-v4 .quotation-field-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
body.quotation-modal-embed-v4 .quotation-detail-form label>span{
  display:block!important;margin-bottom:4px!important;color:#424c57!important;font-size:.66rem!important;font-weight:850!important
}
body.quotation-modal-embed-v4 .quotation-detail-form input,
body.quotation-modal-embed-v4 .quotation-detail-form textarea{
  width:100%!important;min-height:38px!important;padding:7px 9px!important;
  border:1px solid #d7dde3!important;border-radius:8px!important;background:#fff!important;
  color:#20262d!important;font:inherit!important;font-size:.75rem!important;outline:none!important
}
body.quotation-modal-embed-v4 .quotation-detail-form textarea{min-height:76px!important;resize:vertical!important}
body.quotation-modal-embed-v4 .quotation-detail-form small{display:block!important;margin-top:3px!important;color:#78828d!important;font-size:.62rem!important}
body.quotation-modal-embed-v4 .quotation-note-field{margin-top:9px!important}
body.quotation-modal-embed-v4 .quotation-detail-form .main-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:39px!important;margin-top:9px!important;padding:0 14px!important;
  border:1px solid #a41017!important;border-radius:8px!important;background:#c9161e!important;
  color:#fff!important;font:inherit!important;font-size:.72rem!important;font-weight:900!important;cursor:pointer!important
}
@media(max-width:900px){
  #bidsmartQuotationModalV4{padding:12px!important}
  #bidsmartQuotationModalV4 .bqv4-dialog{width:100%!important;height:94vh!important;min-height:0!important;border-radius:17px!important}
  body.quotation-modal-embed-v4 .manufacturer-bid-detail-card{grid-template-columns:1fr!important}
  body.quotation-modal-embed-v4 .sq-visual-column{border-right:0!important;border-bottom:1px solid #e1e6eb!important}
  body.quotation-modal-embed-v4 .manufacturer-bid-detail-image{height:200px!important}
}
@media(max-width:620px){
  #bidsmartQuotationModalV4{padding:0!important}
  #bidsmartQuotationModalV4 .bqv4-dialog{width:100%!important;height:100vh!important;border:0!important;border-radius:0!important}
  #bidsmartQuotationModalV4 .bqv4-head{padding:12px 13px!important}
  body.quotation-modal-embed-v4 .roof-dashboard-content{padding:9px!important}
  body.quotation-modal-embed-v4 .manufacturer-bid-detail-info{padding:14px!important}
  body.quotation-modal-embed-v4 .sq-info-grid,
  body.quotation-modal-embed-v4 .manufacturer-bid-detail-meta,
  body.quotation-modal-embed-v4 .quotation-field-grid{grid-template-columns:1fr!important}
  body.quotation-modal-embed-v4 .sq-info-item,
  body.quotation-modal-embed-v4 .sq-info-item:nth-child(odd){
    border-right:0!important;border-bottom:1px solid #edf0f3!important
  }
}

/* === BIDSMART_SUPPLIER_QUOTATION_FORCED_MODAL_PAGE_V5 === */

/* Force the standalone quotation-details URL to LOOK and behave like a modal. */
html:has(body.quotation-forced-modal-v5){
  background:#1a2028!important;
}
body.quotation-forced-modal-v5{
  margin:0!important;
  min-height:100vh!important;
  overflow:hidden!important;
  background:rgba(15,23,42,.72)!important;
  color:#1e252c!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
body.quotation-forced-modal-v5 *{box-sizing:border-box!important}

body.quotation-forced-modal-v5 .portal-topbar{
  display:none!important;
}
body.quotation-forced-modal-v5 .portal-layout,
body.quotation-forced-modal-v5 .portal-main,
body.quotation-forced-modal-v5 .roof-dashboard-main{
  width:100%!important;
  min-width:0!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  background:rgba(15,23,42,.72)!important;
}
body.quotation-forced-modal-v5 .roof-dashboard-overlay{
  display:none!important;
}

body.quotation-forced-modal-v5 .roof-dashboard-content{
  position:relative!important;
  width:min(1120px,calc(100vw - 48px))!important;
  max-width:1120px!important;
  height:auto!important;
  max-height:calc(100vh - 48px)!important;
  overflow:auto!important;
  margin:24px auto!important;
  padding:0 0 22px!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 32px 100px rgba(0,0,0,.40)!important;
}

/* Sticky modal title bar. */
body.quotation-forced-modal-v5 .roof-page-title{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
  margin:0!important;
  padding:20px 72px 18px 24px!important;
  border-bottom:1px solid #e2e6ea!important;
  background:#fff!important;
  color:#1c2229!important;
  font-size:1.35rem!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:-.015em!important;
}
body.quotation-forced-modal-v5 .roof-page-title::before{
  content:"Supplier Portal"!important;
  display:block!important;
  margin-bottom:4px!important;
  color:#c9161e!important;
  font-size:.67rem!important;
  font-weight:900!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}

body.quotation-forced-modal-v5 .quotation-modal-close-v5{
  position:absolute!important;
  top:13px!important;
  right:16px!important;
  z-index:40!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #d6dce2!important;
  border-radius:12px!important;
  background:#f8f9fa!important;
  color:#46505b!important;
  text-decoration:none!important;
  font-size:1.45rem!important;
  line-height:1!important;
  font-weight:700!important;
}
body.quotation-forced-modal-v5 .quotation-modal-close-v5:hover{
  background:#eef1f4!important;
  color:#1d232a!important;
}

/* Messages stay inside the modal. */
body.quotation-forced-modal-v5 .roof-dashboard-content>.alert,
body.quotation-forced-modal-v5 .roof-dashboard-content>.verification-banner{
  margin:14px 20px 0!important;
  border-radius:12px!important;
}

body.quotation-forced-modal-v5 .manufacturer-bid-detail-container{
  width:auto!important;
  max-width:none!important;
  margin:18px 20px 0!important;
  padding:0!important;
}

/* Main 2-column content. */
body.quotation-forced-modal-v5 .manufacturer-bid-detail-card{
  display:grid!important;
  grid-template-columns:minmax(0,330px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #e1e6eb!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
}

/* Handles both current structured markup and the older markup. */
body.quotation-forced-modal-v5 .sq-visual-column{
  min-width:0!important;
  padding:18px!important;
  border-right:1px solid #e1e6eb!important;
  background:linear-gradient(180deg,#f8fafb,#eff3f6)!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-detail-image{
  width:100%!important;
  height:230px!important;
  min-height:0!important;
  max-height:230px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  margin:0!important;
  padding:14px!important;
  border:1px solid #dfe4e8!important;
  border-radius:15px!important;
  background:#f8fafb!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-detail-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
}
body.quotation-forced-modal-v5 .sq-visual-meta{
  display:grid!important;
  gap:4px!important;
  margin-top:11px!important;
  padding:11px 13px!important;
  border:1px solid #e1e6eb!important;
  border-radius:12px!important;
  background:#fff!important;
}
body.quotation-forced-modal-v5 .sq-visual-meta-label,
body.quotation-forced-modal-v5 .sq-info-label{
  display:block!important;
  color:#707b87!important;
  font-size:.64rem!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
body.quotation-forced-modal-v5 .sq-request-code{
  color:#252b32!important;
  font-size:.82rem!important;
  font-weight:900!important;
  overflow-wrap:anywhere!important;
}

body.quotation-forced-modal-v5 .manufacturer-bid-detail-info{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:13px!important;
  padding:20px!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-detail-top{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-detail-top h2{
  margin:0!important;
  color:#1d232a!important;
  font-size:1.35rem!important;
  line-height:1.18!important;
  font-weight:950!important;
}
body.quotation-forced-modal-v5 .manufacturer-detail-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:29px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:.66rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
body.quotation-forced-modal-v5 .manufacturer-detail-status.pending{
  border:1px solid #ecd39f!important;
  background:#fff4d8!important;
  color:#895900!important;
}
body.quotation-forced-modal-v5 .manufacturer-detail-status.approved{
  border:1px solid #c8e3cf!important;
  background:#eef9f1!important;
  color:#176438!important;
}
body.quotation-forced-modal-v5 .manufacturer-detail-status.declined{
  border:1px solid #efc3c8!important;
  background:#fff0f1!important;
  color:#a01a27!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-detail-desc{
  margin:0!important;
  color:#64707c!important;
  font-size:.81rem!important;
  line-height:1.52!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-message-box{
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid #e1e6eb!important;
  border-radius:11px!important;
  background:#f8f9fb!important;
  color:#4b5662!important;
  font-size:.75rem!important;
  line-height:1.43!important;
}

/* Structured request/quotation cards from the current cleanup patch. */
body.quotation-forced-modal-v5 .sq-section{
  overflow:hidden!important;
  border:1px solid #e1e6eb!important;
  border-radius:13px!important;
  background:#fff!important;
}
body.quotation-forced-modal-v5 .sq-section-head{
  padding:10px 12px!important;
  border-bottom:1px solid #edf0f3!important;
  background:#fafbfc!important;
}
body.quotation-forced-modal-v5 .sq-section-head h3{
  margin:0!important;
  color:#262d34!important;
  font-size:.76rem!important;
  font-weight:900!important;
}
body.quotation-forced-modal-v5 .sq-info-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.quotation-forced-modal-v5 .sq-info-item{
  min-width:0!important;
  padding:9px 12px!important;
  border-bottom:1px solid #edf0f3!important;
}
body.quotation-forced-modal-v5 .sq-info-item:nth-child(odd){
  border-right:1px solid #edf0f3!important;
}
body.quotation-forced-modal-v5 .sq-info-item:nth-last-child(-n+2){
  border-bottom:0!important;
}
body.quotation-forced-modal-v5 .sq-info-value{
  display:block!important;
  margin-top:3px!important;
  color:#272e35!important;
  font-size:.76rem!important;
  font-weight:800!important;
  line-height:1.38!important;
  overflow-wrap:anywhere!important;
}
body.quotation-forced-modal-v5 .sq-info-value a{
  color:#bd111a!important;
  font-weight:900!important;
}
body.quotation-forced-modal-v5 .sq-total-item{
  background:#fff7f7!important;
}
body.quotation-forced-modal-v5 .sq-total-item .sq-info-value{
  color:#bd111a!important;
  font-size:.95rem!important;
  font-weight:950!important;
}
body.quotation-forced-modal-v5 .sq-note{
  padding:10px 12px!important;
  border-top:1px solid #edf0f3!important;
  background:#fcfcfd!important;
}
body.quotation-forced-modal-v5 .sq-privacy-note{
  display:flex!important;
  gap:8px!important;
  align-items:flex-start!important;
  padding:10px 12px!important;
  border:1px solid #e1e6eb!important;
  border-radius:11px!important;
  background:#f8f9fa!important;
  color:#596470!important;
  font-size:.69rem!important;
  line-height:1.42!important;
}
body.quotation-forced-modal-v5 .sq-privacy-dot{
  width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  margin-top:4px!important;
  border-radius:50%!important;
  background:#c9161e!important;
}

/* Fallback for the older live markup seen in screenshots. */
body.quotation-forced-modal-v5 .manufacturer-bid-detail-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-detail-meta>span{
  display:block!important;
  margin:0!important;
  padding:9px 11px!important;
  border:1px solid #e1e6eb!important;
  border-radius:11px!important;
  background:#f8f9fb!important;
  color:#313943!important;
  font-size:.74rem!important;
  line-height:1.4!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-detail-meta>span strong{
  display:block!important;
  margin-bottom:2px!important;
  color:#717c88!important;
  font-size:.62rem!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}

/* Revision form. */
body.quotation-forced-modal-v5 .quotation-revision-panel{
  margin:0!important;
  padding:14px!important;
  border:1px solid #e1e6eb!important;
  border-radius:13px!important;
  background:#fbfcfd!important;
  box-shadow:none!important;
}
body.quotation-forced-modal-v5 .quotation-revision-panel h3{
  margin:0 0 2px!important;
  font-size:.86rem!important;
}
body.quotation-forced-modal-v5 .quotation-revision-panel p{
  margin:0 0 10px!important;
  color:#68737f!important;
  font-size:.72rem!important;
}
body.quotation-forced-modal-v5 .quotation-field-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
body.quotation-forced-modal-v5 .quotation-detail-form label>span{
  display:block!important;
  margin-bottom:4px!important;
  color:#424c57!important;
  font-size:.66rem!important;
  font-weight:850!important;
}
body.quotation-forced-modal-v5 .quotation-detail-form input,
body.quotation-forced-modal-v5 .quotation-detail-form textarea{
  width:100%!important;
  min-height:38px!important;
  padding:7px 9px!important;
  border:1px solid #d7dde3!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#20262d!important;
  font:inherit!important;
  font-size:.75rem!important;
  outline:none!important;
}
body.quotation-forced-modal-v5 .quotation-detail-form textarea{
  min-height:76px!important;
  resize:vertical!important;
}
body.quotation-forced-modal-v5 .quotation-detail-form small{
  display:block!important;
  margin-top:3px!important;
  color:#78828d!important;
  font-size:.62rem!important;
}
body.quotation-forced-modal-v5 .quotation-note-field{
  margin-top:9px!important;
}
body.quotation-forced-modal-v5 .quotation-detail-form .main-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:39px!important;
  margin-top:9px!important;
  padding:0 14px!important;
  border:1px solid #a41017!important;
  border-radius:8px!important;
  background:#c9161e!important;
  color:#fff!important;
  font:inherit!important;
  font-size:.72rem!important;
  font-weight:900!important;
  cursor:pointer!important;
}
body.quotation-forced-modal-v5 .manufacturer-bid-back-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-height:39px!important;
  padding:0 13px!important;
  border:1px solid #d7dde3!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#37414b!important;
  text-decoration:none!important;
  font-size:.72rem!important;
  font-weight:850!important;
}

@media(max-width:900px){
  body.quotation-forced-modal-v5{
    overflow:auto!important;
  }
  body.quotation-forced-modal-v5 .roof-dashboard-content{
    width:calc(100vw - 24px)!important;
    max-height:none!important;
    margin:12px auto!important;
  }
  body.quotation-forced-modal-v5 .manufacturer-bid-detail-card{
    grid-template-columns:1fr!important;
  }
  body.quotation-forced-modal-v5 .sq-visual-column{
    border-right:0!important;
    border-bottom:1px solid #e1e6eb!important;
  }
  body.quotation-forced-modal-v5 .manufacturer-bid-detail-image{
    height:205px!important;
    max-height:205px!important;
  }
}
@media(max-width:620px){
  body.quotation-forced-modal-v5 .roof-dashboard-content{
    width:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    min-height:100vh!important;
  }
  body.quotation-forced-modal-v5 .manufacturer-bid-detail-container{
    margin:12px!important;
  }
  body.quotation-forced-modal-v5 .manufacturer-bid-detail-info{
    padding:14px!important;
  }
  body.quotation-forced-modal-v5 .sq-info-grid,
  body.quotation-forced-modal-v5 .manufacturer-bid-detail-meta,
  body.quotation-forced-modal-v5 .quotation-field-grid{
    grid-template-columns:1fr!important;
  }
  body.quotation-forced-modal-v5 .sq-info-item,
  body.quotation-forced-modal-v5 .sq-info-item:nth-child(odd){
    border-right:0!important;
    border-bottom:1px solid #edf0f3!important;
  }
}

/* === BIDSMART_SUPPLIER_QUOTATION_FRAGMENT_MODAL_FIX_V6 === */

/*
  IMPORTANT:
  The live Supplier My Quotations page can inject #quotationAjaxContent into the
  current page. Therefore V6 styles the fragment ID itself instead of depending
  on a body class from manufacturer_view_bids.php.
*/
#quotationAjaxContent{
  position:fixed!important;
  inset:0!important;
  z-index:2147483200!important;
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  margin:0!important;
  padding:24px!important;
  overflow:auto!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(12,18,27,.68)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  box-sizing:border-box!important;
}

#quotationAjaxContent .manufacturer-bid-detail-card{
  position:relative!important;
  width:min(1120px,calc(100vw - 48px))!important;
  max-width:1120px!important;
  max-height:calc(100vh - 48px)!important;
  margin:auto!important;
  padding:0!important;
  overflow:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,340px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:0!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 32px 100px rgba(0,0,0,.40)!important;
  box-sizing:border-box!important;
}

#quotationAjaxContent .quotation-overlay-close-v6{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  z-index:50!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #d6dce2!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#46505b!important;
  text-decoration:none!important;
  font-family:Arial,sans-serif!important;
  font-size:1.5rem!important;
  line-height:1!important;
  font-weight:400!important;
  box-shadow:0 4px 14px rgba(15,23,42,.09)!important;
}
#quotationAjaxContent .quotation-overlay-close-v6:hover{
  background:#f0f2f4!important;
  color:#1e242b!important;
}

/* ---------- Left visual pane: CURRENT structured markup ---------- */
#quotationAjaxContent .sq-visual-column{
  min-width:0!important;
  align-self:stretch!important;
  padding:20px!important;
  border-right:1px solid #e1e6eb!important;
  background:linear-gradient(180deg,#f8fafb 0%,#eff3f6 100%)!important;
}

/* ---------- Left visual pane: OLD markup fallback ---------- */
#quotationAjaxContent .manufacturer-bid-detail-card > .manufacturer-bid-detail-image{
  min-width:0!important;
  align-self:stretch!important;
  height:auto!important;
  min-height:360px!important;
  max-height:none!important;
  margin:0!important;
  padding:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid #e1e6eb!important;
  border-radius:0!important;
  background:linear-gradient(180deg,#f8fafb 0%,#eff3f6 100%)!important;
}

/* Image inside the structured pane. */
#quotationAjaxContent .sq-visual-column .manufacturer-bid-detail-image{
  width:100%!important;
  height:260px!important;
  min-height:0!important;
  max-height:260px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  margin:0!important;
  padding:15px!important;
  border:1px solid #dfe4e8!important;
  border-radius:16px!important;
  background:#fff!important;
}

/* Image rules work for both old + new structures. */
#quotationAjaxContent .manufacturer-bid-detail-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
}

/* Old markup direct image needs a sane intrinsic box. */
#quotationAjaxContent .manufacturer-bid-detail-card > .manufacturer-bid-detail-image img{
  width:100%!important;
  height:auto!important;
  max-width:300px!important;
  max-height:280px!important;
  object-fit:contain!important;
}

#quotationAjaxContent .sq-visual-meta{
  display:grid!important;
  gap:4px!important;
  margin-top:12px!important;
  padding:12px 13px!important;
  border:1px solid #e1e6eb!important;
  border-radius:13px!important;
  background:#fff!important;
}
#quotationAjaxContent .sq-visual-meta-label,
#quotationAjaxContent .sq-info-label{
  display:block!important;
  color:#707b87!important;
  font-size:.65rem!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
#quotationAjaxContent .sq-request-code{
  color:#252b32!important;
  font-size:.84rem!important;
  font-weight:900!important;
  overflow-wrap:anywhere!important;
}

/* ---------- Main details pane ---------- */
#quotationAjaxContent .manufacturer-bid-detail-info{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  margin:0!important;
  padding:22px 24px 24px!important;
  background:#fff!important;
}
#quotationAjaxContent .manufacturer-bid-detail-top{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding-right:52px!important;
}
#quotationAjaxContent .manufacturer-bid-detail-top h2{
  margin:0!important;
  color:#1d232a!important;
  font-size:1.38rem!important;
  line-height:1.18!important;
  font-weight:950!important;
}
#quotationAjaxContent .manufacturer-detail-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:29px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:.67rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
#quotationAjaxContent .manufacturer-detail-status.pending{
  border:1px solid #ecd39f!important;
  background:#fff4d8!important;
  color:#895900!important;
}
#quotationAjaxContent .manufacturer-detail-status.approved{
  border:1px solid #c8e3cf!important;
  background:#eef9f1!important;
  color:#176438!important;
}
#quotationAjaxContent .manufacturer-detail-status.declined{
  border:1px solid #efc3c8!important;
  background:#fff0f1!important;
  color:#a01a27!important;
}
#quotationAjaxContent .manufacturer-bid-detail-desc{
  margin:0!important;
  color:#64707c!important;
  font-size:.82rem!important;
  line-height:1.52!important;
}
#quotationAjaxContent .manufacturer-bid-message-box{
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid #e1e6eb!important;
  border-radius:11px!important;
  background:#f8f9fb!important;
  color:#4b5662!important;
  font-size:.76rem!important;
  line-height:1.43!important;
}

/* ---------- New structured sections ---------- */
#quotationAjaxContent .sq-section{
  overflow:hidden!important;
  border:1px solid #e1e6eb!important;
  border-radius:13px!important;
  background:#fff!important;
}
#quotationAjaxContent .sq-section-head{
  padding:10px 12px!important;
  border-bottom:1px solid #edf0f3!important;
  background:#fafbfc!important;
}
#quotationAjaxContent .sq-section-head h3{
  margin:0!important;
  color:#262d34!important;
  font-size:.77rem!important;
  font-weight:900!important;
}
#quotationAjaxContent .sq-info-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#quotationAjaxContent .sq-info-item{
  min-width:0!important;
  padding:10px 12px!important;
  border-bottom:1px solid #edf0f3!important;
}
#quotationAjaxContent .sq-info-item:nth-child(odd){
  border-right:1px solid #edf0f3!important;
}
#quotationAjaxContent .sq-info-item:nth-last-child(-n+2){
  border-bottom:0!important;
}
#quotationAjaxContent .sq-info-value{
  display:block!important;
  margin-top:3px!important;
  color:#272e35!important;
  font-size:.77rem!important;
  font-weight:800!important;
  line-height:1.4!important;
  overflow-wrap:anywhere!important;
}
#quotationAjaxContent .sq-info-value a{
  color:#bd111a!important;
  font-weight:900!important;
}
#quotationAjaxContent .sq-total-item{
  background:#fff7f7!important;
}
#quotationAjaxContent .sq-total-item .sq-info-value{
  color:#bd111a!important;
  font-size:.97rem!important;
  font-weight:950!important;
}
#quotationAjaxContent .sq-note{
  padding:10px 12px!important;
  border-top:1px solid #edf0f3!important;
  background:#fcfcfd!important;
}
#quotationAjaxContent .sq-privacy-note{
  display:flex!important;
  gap:8px!important;
  align-items:flex-start!important;
  padding:10px 12px!important;
  border:1px solid #e1e6eb!important;
  border-radius:11px!important;
  background:#f8f9fa!important;
  color:#596470!important;
  font-size:.7rem!important;
  line-height:1.43!important;
}
#quotationAjaxContent .sq-privacy-dot{
  width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  margin-top:4px!important;
  border-radius:50%!important;
  background:#c9161e!important;
}

/* ---------- Old meta-list fallback seen in the screenshots ---------- */
#quotationAjaxContent .manufacturer-bid-detail-meta{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
#quotationAjaxContent .manufacturer-bid-detail-meta>span{
  display:block!important;
  margin:0!important;
  padding:10px 11px!important;
  border:1px solid #e1e6eb!important;
  border-radius:11px!important;
  background:#f8f9fb!important;
  color:#313943!important;
  font-size:.75rem!important;
  line-height:1.42!important;
  overflow-wrap:anywhere!important;
}
#quotationAjaxContent .manufacturer-bid-detail-meta>span strong{
  display:block!important;
  margin-bottom:2px!important;
  color:#717c88!important;
  font-size:.63rem!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
#quotationAjaxContent .manufacturer-bid-detail-meta>span a{
  color:#bd111a!important;
  font-weight:900!important;
}

/* ---------- Revision form ---------- */
#quotationAjaxContent .quotation-revision-panel{
  margin:0!important;
  padding:14px!important;
  border:1px solid #e1e6eb!important;
  border-radius:13px!important;
  background:#fbfcfd!important;
  box-shadow:none!important;
}
#quotationAjaxContent .quotation-revision-panel h3{
  margin:0 0 2px!important;
  font-size:.87rem!important;
}
#quotationAjaxContent .quotation-revision-panel p{
  margin:0 0 10px!important;
  color:#68737f!important;
  font-size:.72rem!important;
}
#quotationAjaxContent .quotation-field-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
#quotationAjaxContent .quotation-detail-form label>span{
  display:block!important;
  margin-bottom:4px!important;
  color:#424c57!important;
  font-size:.66rem!important;
  font-weight:850!important;
}
#quotationAjaxContent .quotation-detail-form input,
#quotationAjaxContent .quotation-detail-form textarea{
  width:100%!important;
  min-height:38px!important;
  padding:7px 9px!important;
  border:1px solid #d7dde3!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#20262d!important;
  font:inherit!important;
  font-size:.75rem!important;
  outline:none!important;
}
#quotationAjaxContent .quotation-detail-form textarea{
  min-height:76px!important;
  resize:vertical!important;
}
#quotationAjaxContent .quotation-detail-form input:focus,
#quotationAjaxContent .quotation-detail-form textarea:focus{
  border-color:#c44b53!important;
  box-shadow:0 0 0 3px rgba(201,22,30,.10)!important;
}
#quotationAjaxContent .quotation-detail-form small{
  display:block!important;
  margin-top:3px!important;
  color:#78828d!important;
  font-size:.62rem!important;
}
#quotationAjaxContent .quotation-note-field{
  margin-top:9px!important;
}
#quotationAjaxContent .quotation-detail-form .main-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:39px!important;
  margin-top:9px!important;
  padding:0 14px!important;
  border:1px solid #a41017!important;
  border-radius:8px!important;
  background:#c9161e!important;
  color:#fff!important;
  font:inherit!important;
  font-size:.72rem!important;
  font-weight:900!important;
  cursor:pointer!important;
}

/* Bottom back button stays useful if the X is not visible for any reason. */
#quotationAjaxContent .manufacturer-bid-back-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-height:39px!important;
  padding:0 13px!important;
  border:1px solid #d7dde3!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#37414b!important;
  text-decoration:none!important;
  font-size:.72rem!important;
  font-weight:850!important;
}

@media(max-width:900px){
  #quotationAjaxContent{
    padding:12px!important;
    place-items:start center!important;
  }
  #quotationAjaxContent .manufacturer-bid-detail-card{
    width:100%!important;
    max-height:none!important;
    grid-template-columns:1fr!important;
  }
  #quotationAjaxContent .sq-visual-column{
    border-right:0!important;
    border-bottom:1px solid #e1e6eb!important;
  }
  #quotationAjaxContent .manufacturer-bid-detail-card > .manufacturer-bid-detail-image{
    min-height:220px!important;
    border-right:0!important;
    border-bottom:1px solid #e1e6eb!important;
  }
  #quotationAjaxContent .sq-visual-column .manufacturer-bid-detail-image{
    height:210px!important;
    max-height:210px!important;
  }
}

@media(max-width:620px){
  #quotationAjaxContent{
    padding:0!important;
    background:#fff!important;
  }
  #quotationAjaxContent .manufacturer-bid-detail-card{
    min-height:100vh!important;
    width:100%!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  #quotationAjaxContent .manufacturer-bid-detail-info{
    padding:15px!important;
  }
  #quotationAjaxContent .sq-info-grid,
  #quotationAjaxContent .manufacturer-bid-detail-meta,
  #quotationAjaxContent .quotation-field-grid{
    grid-template-columns:1fr!important;
  }
  #quotationAjaxContent .sq-info-item,
  #quotationAjaxContent .sq-info-item:nth-child(odd){
    border-right:0!important;
    border-bottom:1px solid #edf0f3!important;
  }
}

/* === BIDSMART_SUPPLIER_MY_QUOTATIONS_TRUE_MODAL_V81_SAFE === */
#supplierQuoteModalV81[hidden]{display:none!important}
#supplierQuoteModalV81{
  position:fixed!important;inset:0!important;z-index:2147483600!important;
  display:grid!important;place-items:center!important;padding:24px!important;
  background:rgba(12,18,27,.68)!important;
  backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important
}
body.supplier-quote-modal-open-v81{overflow:hidden!important}
#supplierQuoteModalV81 .sqv81-dialog{
  width:min(1120px,calc(100vw - 48px))!important;height:min(88vh,860px)!important;
  min-height:540px!important;display:flex!important;flex-direction:column!important;
  overflow:hidden!important;border:1px solid rgba(255,255,255,.42)!important;
  border-radius:24px!important;background:#fff!important;
  box-shadow:0 32px 100px rgba(0,0,0,.42)!important
}
#supplierQuoteModalV81 .sqv81-header{
  flex:0 0 auto!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:16px!important;padding:16px 18px!important;
  border-bottom:1px solid #e1e6eb!important;background:linear-gradient(180deg,#fff,#fafbfc)!important
}
#supplierQuoteModalV81 .sqv81-kicker{
  display:block!important;margin:0 0 3px!important;color:#c9161e!important;
  font-size:.67rem!important;font-weight:900!important;letter-spacing:.075em!important;text-transform:uppercase!important
}
#supplierQuoteModalV81 .sqv81-title{
  margin:0!important;color:#1c2229!important;font-size:1.16rem!important;line-height:1.2!important;font-weight:950!important
}
#supplierQuoteModalV81 .sqv81-close{
  width:42px!important;height:42px!important;display:grid!important;place-items:center!important;
  flex:0 0 auto!important;border:1px solid #d7dde3!important;border-radius:12px!important;
  background:#fff!important;color:#47515c!important;font:inherit!important;
  font-size:1.5rem!important;line-height:1!important;cursor:pointer!important
}
#supplierQuoteModalV81 .sqv81-close:hover{background:#eef1f4!important;color:#171c22!important}
#supplierQuoteModalV81 .sqv81-content{
  flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding:18px!important;background:#f4f6f8!important
}
#supplierQuoteModalV81 .sqv81-loading,#supplierQuoteModalV81 .sqv81-error{
  min-height:360px!important;display:grid!important;place-items:center!important;padding:30px!important;
  text-align:center!important;color:#68737f!important;font-size:.9rem!important
}
#supplierQuoteModalV81 .sqv81-spinner{
  width:34px!important;height:34px!important;border:3px solid #e3e7eb!important;
  border-top-color:#c9161e!important;border-radius:50%!important;animation:sqv81spin .75s linear infinite!important
}
@keyframes sqv81spin{to{transform:rotate(360deg)}}

/* Neutralize all older experimental quotation-overlay rules inside V8.1. */
#supplierQuoteModalV81 #quotationAjaxContent{
  position:static!important;inset:auto!important;z-index:auto!important;
  width:100%!important;height:auto!important;max-width:none!important;margin:0!important;
  padding:0!important;overflow:visible!important;display:block!important;
  background:transparent!important;backdrop-filter:none!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-card{
  position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
  display:grid!important;grid-template-columns:330px minmax(0,1fr)!important;gap:0!important;
  align-items:start!important;overflow:hidden!important;border:1px solid #e0e5ea!important;
  border-radius:18px!important;background:#fff!important;box-shadow:0 12px 34px rgba(15,23,42,.09)!important
}
#supplierQuoteModalV81 .supplier-quote-close-v7,
#supplierQuoteModalV81 .quotation-overlay-close-v6,
#supplierQuoteModalV81 .quotation-modal-close-v5,
#supplierQuoteModalV81 .manufacturer-bid-back-btn{display:none!important}

/* Old live markup: image is a direct child. */
#supplierQuoteModalV81 .manufacturer-bid-detail-card>.manufacturer-bid-detail-image{
  width:100%!important;height:100%!important;min-height:350px!important;max-height:none!important;
  margin:0!important;padding:24px!important;display:flex!important;align-items:center!important;
  justify-content:center!important;overflow:hidden!important;border:0!important;
  border-right:1px solid #e1e6eb!important;border-radius:0!important;
  background:linear-gradient(180deg,#f8fafb,#eef2f5)!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-card>.manufacturer-bid-detail-image img{
  display:block!important;width:100%!important;height:auto!important;max-width:290px!important;
  max-height:270px!important;object-fit:contain!important
}

/* Newer structured markup. */
#supplierQuoteModalV81 .sq-visual-column{
  min-width:0!important;min-height:100%!important;padding:20px!important;
  border-right:1px solid #e1e6eb!important;background:linear-gradient(180deg,#f8fafb,#eef2f5)!important
}
#supplierQuoteModalV81 .sq-visual-column .manufacturer-bid-detail-image{
  width:100%!important;height:245px!important;min-height:0!important;max-height:245px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;
  padding:14px!important;border:1px solid #dfe4e8!important;border-radius:15px!important;background:#fff!important
}
#supplierQuoteModalV81 .sq-visual-column .manufacturer-bid-detail-image img{
  display:block!important;width:100%!important;height:100%!important;max-width:100%!important;
  max-height:100%!important;object-fit:contain!important
}
#supplierQuoteModalV81 .sq-visual-meta{
  display:grid!important;gap:4px!important;margin-top:12px!important;padding:12px 13px!important;
  border:1px solid #e1e6eb!important;border-radius:12px!important;background:#fff!important
}
#supplierQuoteModalV81 .sq-visual-meta-label,#supplierQuoteModalV81 .sq-info-label{
  display:block!important;color:#747e89!important;font-size:.64rem!important;font-weight:900!important;
  letter-spacing:.055em!important;text-transform:uppercase!important
}
#supplierQuoteModalV81 .sq-request-code{
  color:#252c33!important;font-size:.82rem!important;font-weight:900!important;overflow-wrap:anywhere!important
}

/* Main information. */
#supplierQuoteModalV81 .manufacturer-bid-detail-info{
  min-width:0!important;margin:0!important;padding:22px 24px!important;
  display:flex!important;flex-direction:column!important;gap:13px!important;background:#fff!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-top{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-top h2{
  margin:0!important;color:#1c2229!important;font-size:1.38rem!important;line-height:1.18!important;font-weight:950!important
}
#supplierQuoteModalV81 .manufacturer-detail-status{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;
  min-height:29px!important;padding:0 10px!important;border-radius:999px!important;
  font-size:.66rem!important;font-weight:900!important;white-space:nowrap!important
}
#supplierQuoteModalV81 .manufacturer-detail-status.pending{
  border:1px solid #ecd49f!important;background:#fff5da!important;color:#895b00!important
}
#supplierQuoteModalV81 .manufacturer-detail-status.approved{
  border:1px solid #c8e4cf!important;background:#eef9f1!important;color:#176439!important
}
#supplierQuoteModalV81 .manufacturer-detail-status.declined{
  border:1px solid #edc3c8!important;background:#fff0f1!important;color:#a11a27!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-desc{
  margin:0!important;color:#65717d!important;font-size:.82rem!important;line-height:1.5!important
}
#supplierQuoteModalV81 .manufacturer-bid-message-box{
  margin:0!important;padding:10px 12px!important;border:1px solid #e1e6eb!important;
  border-radius:11px!important;background:#f8f9fb!important;color:#4b5662!important;
  font-size:.75rem!important;line-height:1.43!important
}

/* Old detail list -> clean tiles. */
#supplierQuoteModalV81 .manufacturer-bid-detail-meta{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:0!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-meta>span{
  display:block!important;min-width:0!important;margin:0!important;padding:10px 11px!important;
  border:1px solid #e1e6eb!important;border-radius:11px!important;background:#f8f9fb!important;
  color:#303942!important;font-size:.75rem!important;line-height:1.42!important;overflow-wrap:anywhere!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-meta>span strong{
  display:block!important;margin:0 0 3px!important;color:#747e89!important;font-size:.63rem!important;
  font-weight:900!important;letter-spacing:.045em!important;text-transform:uppercase!important
}
#supplierQuoteModalV81 .manufacturer-bid-detail-meta>span a{color:#b9121b!important;font-weight:900!important}

/* Structured cards. */
#supplierQuoteModalV81 .sq-section{
  overflow:hidden!important;border:1px solid #e1e6eb!important;border-radius:13px!important;background:#fff!important
}
#supplierQuoteModalV81 .sq-section-head{
  padding:10px 12px!important;border-bottom:1px solid #edf0f3!important;background:#fafbfc!important
}
#supplierQuoteModalV81 .sq-section-head h3{margin:0!important;color:#252c33!important;font-size:.76rem!important;font-weight:900!important}
#supplierQuoteModalV81 .sq-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
#supplierQuoteModalV81 .sq-info-item{min-width:0!important;padding:9px 12px!important;border-bottom:1px solid #edf0f3!important}
#supplierQuoteModalV81 .sq-info-item:nth-child(odd){border-right:1px solid #edf0f3!important}
#supplierQuoteModalV81 .sq-info-item:nth-last-child(-n+2){border-bottom:0!important}
#supplierQuoteModalV81 .sq-info-value{
  display:block!important;margin-top:3px!important;color:#272e35!important;font-size:.76rem!important;
  font-weight:800!important;line-height:1.38!important;overflow-wrap:anywhere!important
}
#supplierQuoteModalV81 .sq-info-value a{color:#b9121b!important;font-weight:900!important}
#supplierQuoteModalV81 .sq-total-item{background:#fff7f7!important}
#supplierQuoteModalV81 .sq-total-item .sq-info-value{color:#b9121b!important;font-size:.96rem!important;font-weight:950!important}
#supplierQuoteModalV81 .sq-note{padding:10px 12px!important;border-top:1px solid #edf0f3!important;background:#fcfcfd!important}
#supplierQuoteModalV81 .sq-privacy-note{
  display:flex!important;gap:8px!important;align-items:flex-start!important;padding:10px 12px!important;
  border:1px solid #e1e6eb!important;border-radius:11px!important;background:#f8f9fa!important;
  color:#596470!important;font-size:.69rem!important;line-height:1.42!important
}
#supplierQuoteModalV81 .sq-privacy-dot{
  width:7px!important;height:7px!important;flex:0 0 7px!important;margin-top:4px!important;
  border-radius:50%!important;background:#c9161e!important
}

/* Pending quotation revision form. */
#supplierQuoteModalV81 .quotation-revision-panel{
  margin:0!important;padding:14px!important;border:1px solid #e1e6eb!important;
  border-radius:13px!important;background:#fbfcfd!important;box-shadow:none!important
}
#supplierQuoteModalV81 .quotation-revision-panel h3{margin:0 0 3px!important;font-size:.86rem!important}
#supplierQuoteModalV81 .quotation-revision-panel p{margin:0 0 10px!important;color:#68737f!important;font-size:.72rem!important}
#supplierQuoteModalV81 .quotation-field-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important
}
#supplierQuoteModalV81 .quotation-detail-form label>span{
  display:block!important;margin-bottom:4px!important;color:#424c57!important;font-size:.66rem!important;font-weight:850!important
}
#supplierQuoteModalV81 .quotation-detail-form input,
#supplierQuoteModalV81 .quotation-detail-form textarea{
  width:100%!important;min-height:38px!important;padding:7px 9px!important;border:1px solid #d7dde3!important;
  border-radius:8px!important;background:#fff!important;color:#20262d!important;font:inherit!important;
  font-size:.75rem!important;outline:none!important
}
#supplierQuoteModalV81 .quotation-detail-form textarea{min-height:76px!important;resize:vertical!important}
#supplierQuoteModalV81 .quotation-detail-form input:focus,
#supplierQuoteModalV81 .quotation-detail-form textarea:focus{
  border-color:#c64a53!important;box-shadow:0 0 0 3px rgba(201,22,30,.10)!important
}
#supplierQuoteModalV81 .quotation-detail-form small{
  display:block!important;margin-top:3px!important;color:#78828d!important;font-size:.62rem!important
}
#supplierQuoteModalV81 .quotation-note-field{margin-top:9px!important}
#supplierQuoteModalV81 .quotation-detail-form .main-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:39px!important;margin-top:9px!important;padding:0 14px!important;
  border:1px solid #a41017!important;border-radius:8px!important;background:#c9161e!important;
  color:#fff!important;font:inherit!important;font-size:.72rem!important;font-weight:900!important;cursor:pointer!important
}

@media(max-width:900px){
  #supplierQuoteModalV81{padding:12px!important}
  #supplierQuoteModalV81 .sqv81-dialog{
    width:100%!important;height:94vh!important;min-height:0!important;border-radius:18px!important
  }
  #supplierQuoteModalV81 .manufacturer-bid-detail-card{grid-template-columns:1fr!important}
  #supplierQuoteModalV81 .manufacturer-bid-detail-card>.manufacturer-bid-detail-image,
  #supplierQuoteModalV81 .sq-visual-column{border-right:0!important;border-bottom:1px solid #e1e6eb!important}
  #supplierQuoteModalV81 .manufacturer-bid-detail-card>.manufacturer-bid-detail-image{min-height:220px!important}
}
@media(max-width:620px){
  #supplierQuoteModalV81{padding:0!important}
  #supplierQuoteModalV81 .sqv81-dialog{
    width:100%!important;height:100vh!important;border:0!important;border-radius:0!important
  }
  #supplierQuoteModalV81 .sqv81-header{padding:12px 13px!important}
  #supplierQuoteModalV81 .sqv81-content{padding:10px!important}
  #supplierQuoteModalV81 .manufacturer-bid-detail-info{padding:15px!important}
  #supplierQuoteModalV81 .manufacturer-bid-detail-meta,
  #supplierQuoteModalV81 .sq-info-grid,
  #supplierQuoteModalV81 .quotation-field-grid{grid-template-columns:1fr!important}
}