/* =========================================================
   BIDSMART_SYSTEM_UI_UNIFICATION_V1
   One visual language across Public, Client, Supplier and RJL Admin.
   Visual-only layer: no workflow/business logic changes.
   ========================================================= */

:root{
  --bdu-red:#c51622;
  --bdu-red-dark:#a90f18;
  --bdu-red-soft:#fff0f1;
  --bdu-ink:#17191d;
  --bdu-ink-2:#24282e;
  --bdu-muted:#707985;
  --bdu-bg:#f4f5f7;
  --bdu-surface:#ffffff;
  --bdu-surface-2:#fafbfc;
  --bdu-border:#e3e7eb;
  --bdu-border-strong:#d8dde3;
  --bdu-success:#128052;
  --bdu-warning:#9a6700;
  --bdu-danger:#b42318;
  --bdu-info:#315d9b;
  --bdu-radius-sm:10px;
  --bdu-radius:14px;
  --bdu-radius-lg:18px;
  --bdu-shadow-sm:0 3px 10px rgba(18,20,25,.045);
  --bdu-shadow:0 9px 28px rgba(18,20,25,.065);
  --bdu-shadow-hover:0 14px 34px rgba(18,20,25,.09);
  --bdu-content:1240px;
  --bdu-font:"Segoe UI Variable Text","Segoe UI Variable",Aptos,"Segoe UI",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
}

/* ---------- Global foundation ---------- */
html{background:var(--bdu-bg);color-scheme:light}
body{
  color:var(--bdu-ink)!important;
  font-family:var(--bdu-font)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:not(.auth-page):not(.client-auth-page):not(.client-portal-page){
  background:var(--bdu-bg)!important;
}
button,input,select,textarea{font-family:inherit}
a{transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease}
img{max-width:100%}
::selection{background:rgba(197,22,34,.14);color:var(--bdu-ink)}
:focus-visible{outline:3px solid rgba(197,22,34,.18)!important;outline-offset:2px!important}
*{scrollbar-width:thin;scrollbar-color:#c6ccd2 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c6ccd2;border:3px solid transparent;background-clip:padding-box;border-radius:999px}

/* ---------- Shared page rhythm ---------- */
.dashboard-container,
.roof-catalogue-container,
.roof-marketplace-container,
.profile-page-shell,
.notifications-page,
.announcements-page,
.portal-page-shell,
.inquiry-shell,
.inquiry-container,
.track-inquiry-shell,
.public-page-shell{
  width:min(var(--bdu-content),calc(100% - 40px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.portal-page-heading,
.page-heading,
.roof-page-heading{
  margin-bottom:22px!important;
}
.portal-page-heading h1,
.page-heading h1,
.roof-page-title,
.client-portal-welcome h1,
.admin-header h1{
  color:var(--bdu-ink)!important;
  letter-spacing:-.035em!important;
  font-weight:900!important;
}
.portal-page-heading p,
.page-heading p,
.roof-page-heading p,
.muted-copy{
  color:var(--bdu-muted)!important;
}

/* ---------- Portal navigation: Client + Supplier ---------- */
.portal-topbar{
  background:rgba(20,22,25,.98)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 10px 30px rgba(8,10,13,.14)!important;
  backdrop-filter:blur(14px);
}
.portal-topbar-inner{
  width:min(var(--bdu-content),calc(100% - 40px))!important;
  min-height:74px!important;
}
.portal-top-brand-logo{
  width:44px!important;height:44px!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 5px 15px rgba(0,0,0,.18)!important;
}
.portal-top-brand-copy strong{font-weight:900!important;letter-spacing:-.01em!important}
.portal-top-menu-link{
  min-height:40px!important;
  border-radius:10px!important;
  padding:0 12px!important;
  color:rgba(255,255,255,.70)!important;
  font-size:.82rem!important;
  font-weight:800!important;
}
.portal-top-menu-link:hover{color:#fff!important;background:rgba(255,255,255,.065)!important;transform:none!important}
.portal-top-menu-link.active{
  color:#fff!important;
  background:var(--bdu-red)!important;
  border-color:var(--bdu-red)!important;
  box-shadow:0 6px 14px rgba(197,22,34,.23)!important;
}
.portal-top-avatar{
  border-radius:10px!important;
  color:var(--bdu-red)!important;
}
.portal-top-user{border-radius:11px!important}
.portal-top-logout,.portal-nav-toggle{border-radius:10px!important}

/* ---------- Core cards ---------- */
.dashboard-section-card,
.roof-design-card,
.profile-summary-card,
.profile-details-under-card,
.edit-profile-single-card,
.verification-resubmit-card,
.bid-status-list-card,
.visualizer-control-panel,
.visualizer-preview-panel,
.saved-visualizer-card,
.inventory-card,
.quotation-detail-form,
.card,
.notifications-list,
.signup-requirements-box,
.manufacturer-card,
.request-card,
.quotation-card,
.rjl-client-card,
.client-auth-card,
.client-register-card,
.client-register-head,
.client-portal-welcome,
.client-status-card,
.client-inquiry-list-card{
  background:var(--bdu-surface)!important;
  border:1px solid var(--bdu-border)!important;
  border-radius:var(--bdu-radius-lg)!important;
  box-shadow:var(--bdu-shadow-sm)!important;
}
.roof-design-card,
.request-card,
.quotation-card,
.manufacturer-card{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.roof-design-card:hover,
.request-card:hover,
.quotation-card:hover,
.manufacturer-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--bdu-shadow-hover)!important;
  border-color:#d5dae0!important;
}

/* ---------- Shared forms ---------- */
body:not(.admin-layout) input[type="text"],
body:not(.admin-layout) input[type="email"],
body:not(.admin-layout) input[type="password"],
body:not(.admin-layout) input[type="number"],
body:not(.admin-layout) input[type="tel"],
body:not(.admin-layout) input[type="date"],
body:not(.admin-layout) input[type="file"],
body:not(.admin-layout) select,
body:not(.admin-layout) textarea{
  border:1px solid var(--bdu-border-strong)!important;
  border-radius:var(--bdu-radius-sm)!important;
  background:#fff!important;
  color:var(--bdu-ink)!important;
  box-shadow:none!important;
}
body:not(.admin-layout) input:focus,
body:not(.admin-layout) select:focus,
body:not(.admin-layout) textarea:focus{
  border-color:rgba(197,22,34,.55)!important;
  box-shadow:0 0 0 3px rgba(197,22,34,.09)!important;
  outline:none!important;
}
label{color:#4e5660}
input::placeholder,textarea::placeholder{color:#9aa2ab!important}

/* ---------- Shared buttons ---------- */
.roof-post-btn,
.main-btn,
.profile-primary-btn,
.roof-select-btn,
.client-primary-btn,
a.client-primary-btn,
button.client-primary-btn,
.admin-btn-red{
  border-radius:var(--bdu-radius-sm)!important;
  background:var(--bdu-red)!important;
  border:1px solid var(--bdu-red)!important;
  color:#fff!important;
  box-shadow:0 5px 13px rgba(197,22,34,.17)!important;
  font-weight:850!important;
}
.roof-post-btn:hover,
.main-btn:hover,
.profile-primary-btn:hover,
.roof-select-btn:hover,
.client-primary-btn:hover,
.admin-btn-red:hover{
  background:var(--bdu-red-dark)!important;
  border-color:var(--bdu-red-dark)!important;
  transform:translateY(-1px)!important;
}
.admin-btn-neutral,
.profile-secondary-btn,
.client-secondary-btn,
a.client-secondary-btn,
button.client-secondary-btn,
.view-post-link{
  border-radius:var(--bdu-radius-sm)!important;
  background:#fff!important;
  border:1px solid var(--bdu-border-strong)!important;
  color:var(--bdu-ink)!important;
  box-shadow:var(--bdu-shadow-sm)!important;
  font-weight:800!important;
}
.admin-btn-neutral:hover,
.profile-secondary-btn:hover,
.client-secondary-btn:hover,
.view-post-link:hover{
  background:#f8f9fa!important;
  border-color:#cfd5dc!important;
  transform:translateY(-1px)!important;
}
.admin-btn-danger,.roof-remove-btn{
  border-radius:var(--bdu-radius-sm)!important;
  background:var(--bdu-ink)!important;
  border-color:var(--bdu-ink)!important;
  color:#fff!important;
  box-shadow:none!important;
}
button:disabled,.disabled,[aria-disabled="true"]{opacity:.58!important;cursor:not-allowed!important;transform:none!important}

/* ---------- Status chips / badges ---------- */
.bid-status,
.status-badge,
.verification-badge,
.client-verification-badge,
.pill,
.badge{
  border-radius:999px!important;
  font-weight:850!important;
  letter-spacing:.01em;
}
.status-pending,.pending-badge,.client-verification-badge.pending{background:#fff5d9!important;color:#825800!important}
.status-approved,.status-verified,.verified-badge,.client-verification-badge.verified{background:#e9f8f0!important;color:#087648!important}
.status-rejected,.status-failed,.rejected-badge{background:#fff0f0!important;color:#a51c1c!important}
.status-active,.status-confirmed{background:#edf5ff!important;color:#315d9b!important}

/* ---------- Tables ---------- */
.table-wrap,
.admin-table-wrap,
.table-container{
  border:1px solid var(--bdu-border)!important;
  border-radius:var(--bdu-radius)!important;
  background:#fff!important;
  box-shadow:var(--bdu-shadow-sm)!important;
  overflow:auto!important;
}
table{border-collapse:separate;border-spacing:0}
table thead th{
  font-weight:850!important;
  letter-spacing:.035em!important;
}
.admin-main table tbody tr,
.table-wrap table tbody tr{transition:background .14s ease}
.admin-main table tbody tr:hover,
.table-wrap table tbody tr:hover{background:#fafbfc!important}

/* =========================================================
   RJL / SUPER ADMIN
   Dashboard is the visual source of truth.
   ========================================================= */
.admin-layout{
  min-height:100vh!important;
  background:var(--bdu-bg)!important;
  padding:14px!important;
  gap:14px!important;
}
.admin-sidebar{
  width:250px!important;
  flex:0 0 250px!important;
  height:calc(100vh - 28px)!important;
  top:14px!important;
  margin:0!important;
  padding:15px 12px!important;
  background:linear-gradient(180deg,#17191d 0%,#101216 100%)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:20px!important;
  box-shadow:0 12px 34px rgba(12,14,17,.14)!important;
  overflow-y:auto!important;
}
.sidebar-logo{
  margin:0 2px 15px!important;
  padding:13px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
.sidebar-logo img{
  width:42px!important;height:42px!important;
  border-radius:10px!important;
  padding:4px!important;
}
.sidebar-logo h2{font-size:.98rem!important;font-weight:900!important}
.sidebar-logo p{font-size:.68rem!important}
.sidebar-menu{gap:3px!important}
.sidebar-menu a,
.admin-logout-form .logout-link{
  min-height:40px!important;
  padding:0 11px!important;
  border-radius:10px!important;
  color:rgba(255,255,255,.68)!important;
  font-size:.79rem!important;
  font-weight:800!important;
}
.sidebar-menu a:hover{
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  transform:none!important;
}
.sidebar-menu a.active{
  background:var(--bdu-red)!important;
  color:#fff!important;
  border-color:var(--bdu-red)!important;
  box-shadow:0 6px 14px rgba(197,22,34,.22)!important;
}
.admin-nav-section-label{
  color:rgba(255,255,255,.42)!important;
  font-size:.59rem!important;
  letter-spacing:.1em!important;
}
.admin-main{
  min-width:0!important;
  padding:8px 6px 42px!important;
  background:transparent!important;
}
.admin-header{
  min-height:82px!important;
  margin:0 0 16px!important;
  padding:19px 21px!important;
  background:#fff!important;
  border:1px solid var(--bdu-border)!important;
  border-radius:18px!important;
  box-shadow:var(--bdu-shadow-sm)!important;
}
.admin-header:after{opacity:.65}
.admin-header h1{font-size:clamp(1.55rem,2.5vw,2.05rem)!important}
.admin-header p{margin-top:5px!important;font-size:.82rem!important;color:var(--bdu-muted)!important}
.admin-avatar,.user-avatar{
  width:44px!important;height:44px!important;
  border-radius:12px!important;
  background:var(--bdu-ink)!important;
  border:0!important;
  box-shadow:none!important;
}
.admin-mini-stats,
.dashboard-cards{
  gap:12px!important;
  margin-bottom:16px!important;
}
.admin-mini-stat-card,
.dashboard-card{
  min-height:112px!important;
  padding:16px!important;
  background:#fff!important;
  border:1px solid var(--bdu-border)!important;
  border-radius:15px!important;
  box-shadow:var(--bdu-shadow-sm)!important;
}
.admin-mini-stat-card:before,
.dashboard-card:before{
  left:0!important;top:0!important;bottom:0!important;
  width:3px!important;border-radius:15px 0 0 15px!important;
  background:#d9dde2!important;
}
.admin-mini-stat-card:nth-child(3n+1):before,
.dashboard-card:nth-child(3n+1):before{background:var(--bdu-red)!important}
.admin-mini-stat-card strong,
.dashboard-card h2{
  margin-top:9px!important;
  font-size:1.7rem!important;
}
.admin-section-card,
.action-box,
.verification-card,
.hyperledger-network-card,
.rjl-panel,
.rjl-card,
.client-verification-item{
  background:#fff!important;
  border:1px solid var(--bdu-border)!important;
  border-radius:16px!important;
  box-shadow:var(--bdu-shadow-sm)!important;
}
.admin-section-card,.action-box{padding:18px!important}
.admin-section-card{margin-bottom:15px!important}
.admin-design-list,.dashboard-actions,.rjl-grid{gap:12px!important}
.admin-main input[type="text"],
.admin-main input[type="email"],
.admin-main input[type="number"],
.admin-main input[type="date"],
.admin-main input[type="password"],
.admin-main input[type="tel"],
.admin-main select,
.admin-main textarea,
.admin-filter-bar input:not([type="hidden"]),
.admin-filter-bar select{
  min-height:42px!important;
  padding:9px 11px!important;
  background:#fff!important;
  border:1px solid var(--bdu-border-strong)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.admin-main textarea{min-height:92px!important}
.admin-main input:focus,
.admin-main select:focus,
.admin-main textarea:focus{
  border-color:rgba(197,22,34,.50)!important;
  box-shadow:0 0 0 3px rgba(197,22,34,.08)!important;
}
.admin-filter-bar{
  margin-bottom:15px!important;
  padding:12px!important;
  background:#fff!important;
  border:1px solid var(--bdu-border)!important;
  border-radius:14px!important;
  box-shadow:var(--bdu-shadow-sm)!important;
}
.admin-clean-table th,
.admin-main table thead th,
.hyperledger-table th{
  background:var(--bdu-ink)!important;
  color:#fff!important;
  font-size:.68rem!important;
  padding:11px 12px!important;
}
.admin-clean-table td,
.admin-main table tbody td,
.hyperledger-table td{
  padding:11px 12px!important;
  border-bottom:1px solid #eef0f2!important;
}
.admin-pagination a,
.audit-source-tabs a,
.database-table-nav a{
  border-radius:9px!important;
  box-shadow:none!important;
}
.admin-pagination a.active,
.audit-source-tabs a.active,
.database-table-nav a.active{
  background:var(--bdu-ink)!important;
  color:#fff!important;
  border-color:var(--bdu-ink)!important;
}

/* =========================================================
   NEW CLIENT ACCOUNT / ID VERIFICATION PAGES
   ========================================================= */
.client-auth-page,
.client-portal-page{background:var(--bdu-bg)!important}
.client-auth-shell{max-width:1180px!important;padding:20px!important;gap:16px!important}
.client-auth-brand{
  border-radius:20px!important;
  background:linear-gradient(145deg,#17191d,#25292f)!important;
  box-shadow:var(--bdu-shadow)!important;
}
.client-auth-card{border-radius:20px!important;padding:30px!important}
.client-auth-eyebrow{color:var(--bdu-red)!important}
.client-register-shell{max-width:1120px!important;padding:20px!important}
.client-register-head{padding:18px!important;margin-bottom:14px!important}
.client-register-card{padding:18px!important}
.client-form-section{
  background:var(--bdu-surface-2)!important;
  border:1px solid var(--bdu-border)!important;
  border-radius:13px!important;
  padding:14px!important;
}
.client-form-section-head strong{color:var(--bdu-ink)!important}
.client-upload-card{border-color:#cfd5dc!important}
.client-otp-final{
  background:#fffafb!important;
  border-color:#efd2d5!important;
}
.client-phone-input{
  border:1px solid var(--bdu-border-strong)!important;
  border-radius:10px!important;
}
.client-portal-topbar{
  max-width:var(--bdu-content)!important;
  background:var(--bdu-ink)!important;
  border:1px solid #111318!important;
  box-shadow:0 8px 24px rgba(10,12,15,.13)!important;
}
.client-portal-topbar .client-register-brand,
.client-portal-topbar .client-register-brand strong{color:#fff!important}
.client-portal-topbar .client-register-brand small{color:rgba(255,255,255,.56)!important}
.client-portal-topbar nav>a,
.client-portal-topbar button{
  background:transparent!important;
  color:rgba(255,255,255,.78)!important;
  border-color:rgba(255,255,255,.10)!important;
}
.client-portal-topbar nav>a:hover,
.client-portal-topbar button:hover{color:#fff!important;background:rgba(255,255,255,.06)!important}
.client-portal-topbar .client-primary-link{background:var(--bdu-red)!important;color:#fff!important;border-color:var(--bdu-red)!important}
.client-portal-main{max-width:var(--bdu-content)!important}
.client-portal-welcome{padding:19px!important}
.client-status-card,.client-inquiry-list-card{padding:17px!important}
.client-inquiry-row{border-color:var(--bdu-border)!important;border-radius:10px!important}
.client-inquiry-row:hover{background:#fafbfc!important;border-color:#d5dae0!important}

/* ---------- Login/signup consistency ---------- */
.auth-panel{
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 18px 46px rgba(9,11,14,.16)!important;
}
.auth-panel input,
.auth-panel select{
  background:#fff!important;
  border:1px solid var(--bdu-border-strong)!important;
  border-radius:10px!important;
}
.auth-right{background:linear-gradient(150deg,#a90f18,#d51d28)!important}
.role-toggle{background:#f1f3f5!important}
.role-toggle-btn{border-radius:10px!important}
.role-toggle-btn.active{background:#fff!important;color:var(--bdu-red)!important;box-shadow:var(--bdu-shadow-sm)!important}

/* ---------- Public browse / roof catalogue ---------- */
.public-topbar,
.landing-nav,
.site-header{
  box-shadow:0 6px 20px rgba(15,18,22,.06);
}
.roof-design-image,
.roof-card-image{background:#eef0f2!important}
.roof-design-body h3,
.roof-card-title{color:var(--bdu-ink)!important}
.roof-design-meta,
.roof-design-desc{color:var(--bdu-muted)!important}

/* ---------- Alerts / empty states ---------- */
.alert,.client-alert{
  border-radius:11px!important;
  box-shadow:none!important;
}
.alert.success,.client-alert.success{background:#edf9f3!important;border:1px solid #c9ead8!important;color:#126b45!important}
.alert.error,.client-alert.error{background:#fff1f1!important;border:1px solid #f2cece!important;color:#9e1f1f!important}
.empty-design-box,
.empty-state,
.client-empty-state{
  border-radius:14px!important;
  color:var(--bdu-muted)!important;
}

/* ---------- Modal consistency ---------- */
.audit-modal-overlay,
.design-modal-overlay,
.modal-overlay{
  background:rgba(8,10,14,.60)!important;
  backdrop-filter:blur(7px)!important;
}
.audit-modal-content,
.design-modal,
.modal-card,
.modal-content{
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:20px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.22)!important;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .portal-topbar-inner{width:calc(100% - 28px)!important}
  .admin-sidebar{width:232px!important;flex-basis:232px!important}
}
@media(max-width:900px){
  .admin-layout{display:block!important;padding:0!important}
  .admin-sidebar{
    width:100%!important;height:auto!important;top:0!important;
    border-radius:0 0 16px 16px!important;padding:9px 10px!important;
  }
  .admin-main{padding:16px 13px 36px!important}
  .admin-header{border-radius:15px!important}
  .portal-topbar-inner{width:calc(100% - 24px)!important}
  .client-auth-shell{grid-template-columns:1fr!important;padding:12px!important}
  .client-register-shell{padding:12px!important}
  .client-portal-topbar,.client-portal-main{margin-left:12px!important;margin-right:12px!important}
}
@media(max-width:640px){
  :root{--bdu-radius-lg:15px}
  .dashboard-container,
  .roof-catalogue-container,
  .roof-marketplace-container,
  .profile-page-shell,
  .notifications-page,
  .announcements-page,
  .portal-page-shell,
  .inquiry-shell,
  .inquiry-container,
  .track-inquiry-shell,
  .public-page-shell{width:calc(100% - 24px)!important}
  .client-form-grid{grid-template-columns:1fr!important}
  .client-register-actions{display:grid!important;grid-template-columns:1fr!important}
  .client-register-actions>*{width:100%!important}
  .admin-mini-stats,.dashboard-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .admin-header{padding:16px!important}
  .portal-page-heading h1,.roof-page-title{font-size:1.75rem!important}
}