/* FIRSTCODE Fintech Design System v1.11.0
 * Premium Saudi fintech/marketplace visual layer.
 * Additive overrides only: no business logic dependency.
 */
:root{
  --primary:#054515;
  --primary-dark:#022A0D;
  --primary-mid:#0B6B2C;
  --accent:#CB982D;
  --accent-dark:#9B6D14;
  --accent-light:#FFF7E2;
  --sky:#256D85;
  --sky-light:#EAF5F8;
  --gold:#E2B64A;
  --gold-soft:#FFF7E2;
  --white:#FFFFFF;
  --bg:#F5F7FA;
  --bg-card:#FFFFFF;
  --bg-elevated:#FFFFFF;
  --text:#182230;
  --text-soft:#344054;
  --muted:#697586;
  --border:#E6E9EF;
  --success:#CB982D;
  --danger:#D92D20;
  --warning:#B54708;
  --info:#256D85;
  --shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 3px 14px rgba(16,24,40,.055);
  --shadow-md:0 12px 32px rgba(16,24,40,.085);
  --shadow-lg:0 22px 60px rgba(8,20,33,.15);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --sidebar-w:276px;
  --transition:.18s ease;
  --fc-ring:0 0 0 4px rgba(20,138,104,.12);
  --fc-surface-subtle:#F9FAFB;
  --fc-sidebar:#07111B;
  --fc-sidebar-2:#0A1B29;
}



body{
  background:
    radial-gradient(circle at 8% 0%,rgba(20,138,104,.035),transparent 28rem),
    var(--bg);
  color:var(--text);
}

::selection{background:rgba(20,138,104,.18);color:var(--text)}

/* Core surfaces */
.card,.client-section,.modal-box,.client-product-card,.client-order-card,.client-finance-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  background:var(--bg-card);
}
.card{
  padding:1.45rem;
}
.card-title{
  color:var(--text);
  border-bottom:1px solid var(--border);
  padding-bottom:.9rem;
  margin-bottom:1.15rem;
  font-weight:var(--fw-bold);
}
.card-title i{color:var(--accent)}

/* Buttons */
.btn{
  border-radius:10px;
  min-height:44px;
  box-shadow:none;
  letter-spacing:0;
}
.btn-primary{
  background:var(--primary-dark);
  border:1px solid var(--primary-dark);
}
.btn-primary:hover{
  background:#0D2232;
  border-color:#0D2232;
  box-shadow:0 8px 18px rgba(8,20,33,.16);
  transform:translateY(-1px);
}


.btn-accent,.btn-success{background:var(--accent);border-color:var(--accent)}
.btn-accent:hover,.btn-success:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-outline{border:1px solid var(--border);color:var(--text);background:var(--bg-card)}
.btn-outline:hover{background:var(--fc-surface-subtle);border-color:var(--accent);color:var(--accent)}
.btn-muted,.btn-ghost{background:var(--fc-surface-subtle);color:var(--text-soft);border-color:var(--border)}

/* Forms */
.form-group input,.form-group select,.form-group textarea,
.dt-search-box,.client-inline-form input,.client-inline-form select{
  border-color:var(--border);
  border-radius:10px;
  background:var(--bg-card);
  color:var(--text);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.dt-search-box:focus-within{
  border-color:var(--accent);
  box-shadow:var(--fc-ring);
}
.form-group label{color:var(--text-soft)}

/* Tables: enterprise density without visual heaviness */
.table-wrapper{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-card);
}
table{background:var(--bg-card)}
th{
  background:var(--fc-surface-subtle);
  color:var(--text-soft);
  border-bottom:1px solid var(--border);
  font-weight:var(--fw-bold);
  letter-spacing:0;
}
th:first-child,th:last-child{border-radius:0}
td{border-bottom-color:var(--border);color:var(--text)}
tr:hover td{background:color-mix(in srgb,var(--accent) 3.5%,var(--bg-card))}
code{background:var(--fc-surface-subtle);border-color:var(--border);color:var(--text-soft)}

/* Status language */
.badge{border-radius:999px;padding:.32rem .7rem;border:1px solid transparent}
.badge-success{background:var(--accent-light);color:var(--accent-dark);border-color:color-mix(in srgb,var(--accent) 16%,transparent)}
.badge-info{background:var(--sky-light);color:var(--info);border-color:color-mix(in srgb,var(--sky) 14%,transparent)}
.badge-warning{background:#FFF7E8;color:#9A4A04;border-color:#F5D6A2}
.badge-danger{background:#FEF0EF;color:#B42318;border-color:#F7C8C4}
.badge-secondary{background:var(--fc-surface-subtle);color:var(--muted);border-color:var(--border)}



/* Admin shell */
.sidebar{
  width:var(--sidebar-w);
  background:
    radial-gradient(circle at 50% -10%,rgba(20,138,104,.15),transparent 16rem),
    linear-gradient(180deg,var(--fc-sidebar) 0%,var(--fc-sidebar-2) 100%);
  border-left:1px solid rgba(255,255,255,.055);
  box-shadow:-10px 0 34px rgba(8,20,33,.18);
}
.sidebar-brand{
  min-height:76px;
  padding:1rem 1.2rem;
  border-bottom-color:rgba(255,255,255,.06);
}
.sidebar-brand img{max-width:42px;object-fit:contain}
.sidebar-brand-name{font-size:var(--fs-sm);letter-spacing:0}
.sidebar-brand-sub{color:rgba(255,255,255,.42);letter-spacing:.08em}
.sidebar-nav{padding:.9rem .65rem}
.nav-section-label{
  color:rgba(255,255,255,.34);
  padding:.8rem .75rem .35rem;
  letter-spacing:.06em;
}
.nav-item{
  margin:2px 0;
  padding:.72rem .78rem;
  border:1px solid transparent;
  border-right:1px solid transparent;
  border-radius:10px;
  color:rgba(255,255,255,.68);
}
.nav-item:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.05);border-right-color:rgba(255,255,255,.05)}
.nav-item.active{
  background:linear-gradient(90deg,rgba(20,138,104,.18),rgba(20,138,104,.08));
  border-color:rgba(45,181,142,.2);
  border-right-color:var(--accent);
  color:#fff;
}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{color:#5DD4AE}
.nav-icon{color:rgba(255,255,255,.42)}
.sidebar-user-avatar{background:rgba(20,138,104,.16);border-color:rgba(45,181,142,.25);color:#5DD4AE}

.admin-main{margin-right:var(--sidebar-w);background:transparent}
.admin-topbar{
  height:68px;
  background:color-mix(in srgb,var(--bg-card) 92%,transparent);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom-color:var(--border);
  box-shadow:none;
  padding-inline:1.65rem;
}
.topbar-action,.hamburger-btn,.topbar-user-pill{
  background:var(--bg-card);
  border-color:var(--border);
  color:var(--text-soft);
}
.topbar-action:hover,.hamburger-btn:hover{background:var(--fc-surface-subtle);color:var(--accent);border-color:var(--accent)}
.topbar-avatar{background:var(--primary-dark);color:#fff}

.breadcrumb-nav{color:var(--muted)}
.breadcrumb-nav a{color:var(--text-soft)}
.page-header{padding:1.5rem 1.65rem .35rem}
.page-title{color:var(--text);font-weight:var(--fw-extrabold);letter-spacing:-.01em}
.admin-content{padding:1rem 1.65rem 2.2rem}

/* Theme control */






/* Metric cards */
.stat-grid,.report-grid{gap:.9rem}
.stat-card,.report-card,.dash-card,.pay-card{
  background:var(--bg-card);
  border-color:var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-xs);
  padding:1.15rem;
}
.stat-card::before,.report-card::before,.dash-card::before,.pay-card::before{
  right:1rem;left:auto;top:0;width:42px;height:3px;border-radius:0 0 4px 4px;
}
.stat-card:hover,.report-card:hover,.dash-card:hover,.pay-card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--metric-accent) 24%,var(--border));
}
.dash-grid{gap:.9rem}
.dash-card{min-height:124px}
.dash-card-icon{top:1rem;left:1rem;width:38px;height:38px;border-radius:11px}
.dash-val{color:var(--text);font-weight:var(--fw-extrabold)}
.dash-lbl{color:var(--text-soft);font-weight:var(--fw-semibold)}
.dash-sub{color:var(--muted)}
.mini-stat{background:var(--fc-surface-subtle);border-color:var(--border);border-radius:12px;padding:.7rem .8rem}
.dash-small-stat{background:var(--fc-surface-subtle);border:1px solid var(--border);border-radius:12px;padding:.7rem}
.dash-highlight{background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 18%,transparent);border-radius:12px}

/* Client shell */
.client-topbar{
  min-height:66px;
  background:rgba(7,17,27,.97);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 28px rgba(8,20,33,.1);
  backdrop-filter:saturate(150%) blur(15px);
}
.client-topbar-brand img{height:36px}
.client-topbar-links>a{border:1px solid transparent;border-radius:9px;color:rgba(255,255,255,.7)}
.client-topbar-links>a:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.06)}
.client-topbar-links>a.active{background:rgba(20,138,104,.16);border-color:rgba(45,181,142,.2);color:#fff}
.client-topbar-icon,.client-topbar-profile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#fff}

.client-nav-wrapper{max-width:1180px;padding-top:1.9rem}
.client-page-header{margin-bottom:1.35rem}
.client-page-eyebrow{
  color:var(--accent);text-transform:none;letter-spacing:0;font-weight:var(--fw-bold)
}
.client-page-title{color:var(--text);font-weight:var(--fw-extrabold);letter-spacing:-.015em}
.client-page-subtitle{color:var(--muted);max-width:620px}
.client-summary-grid{gap:.9rem}
.client-summary-card{min-height:150px;border-radius:18px}
.client-summary-card--balance{
  background:
    radial-gradient(circle at 12% 0%,rgba(45,181,142,.25),transparent 13rem),
    linear-gradient(135deg,#07111B 0%,#102536 100%);
  box-shadow:0 18px 38px rgba(8,20,33,.16);
}
.client-summary-card--balance .value{color:#fff}
.client-quick-grid{gap:.75rem}
.client-quick-action{
  border:1px solid var(--border);background:var(--bg-card);border-radius:14px;box-shadow:var(--shadow-xs);
}
.client-quick-action:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border));box-shadow:var(--shadow);transform:translateY(-2px)}
.client-quick-icon{border-radius:11px}
.client-section{border-radius:18px;box-shadow:var(--shadow-xs)}
.client-section-head{border-bottom-color:var(--border);background:color-mix(in srgb,var(--fc-surface-subtle) 65%,var(--bg-card))}
.client-section-head h2{color:var(--text)}
.client-section-icon{background:var(--accent-light);color:var(--accent)}
.client-list-card{background:var(--bg-card);border-color:var(--border)}
.client-list-card:hover{background:color-mix(in srgb,var(--accent) 2.5%,var(--bg-card))}
.client-list-cta{border-radius:10px}

/* Financial timeline / progress language */
.progress-bar{height:8px;background:var(--border);border-radius:999px;overflow:hidden}
.progress-fill{border-radius:999px;background:var(--accent)}

/* Alerts */
.alert{border-radius:12px;border-right-width:1px;box-shadow:none}
.alert-success{background:var(--accent-light);color:var(--accent-dark);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.alert-info{background:var(--sky-light);color:var(--info);border-color:color-mix(in srgb,var(--sky) 18%,transparent)}

/* Bottom navigation: mobile fintech tab bar */
@media screen and (max-width:768px){
  .client-bottom-nav{
    background:color-mix(in srgb,var(--bg-card) 94%,transparent);
    border-top-color:var(--border);
    box-shadow:0 -8px 28px rgba(8,20,33,.09);
  }
  .client-bottom-nav a{color:var(--muted)}
  .client-bottom-nav a.active{background:var(--accent-light);color:var(--accent)}
  .client-nav-wrapper{padding-inline:.8rem}
}

@media(max-width:1023px){
  .admin-main{margin-right:0}
}

/* Dark-mode hardening for legacy hardcoded light surfaces */



/* Print must remain legal-document friendly. */
@media print{
  :root{--bg:#fff;--bg-card:#fff;--text:#111827;--muted:#6B7280;--border:#D1D5DB;--primary:#1B3A6B;--accent:#2F7A24}
  body{background:#fff!important;color:#111827!important}
}