/* ==========================================================================
   خشت — Design System
   Shared styles for all pages of the platform
   ========================================================================== */

:root{
  --navy:        #0B1B3A;
  --navy-2:      #122A57;
  --navy-3:      #1B3A6B;
  --gold:        #F2A93B;
  --gold-dark:   #D98A1F;
  --green:       #17A768;
  --green-bg:    #E8F8F0;
  --amber:       #F0A73C;
  --amber-bg:    #FDF1DD;
  --red:         #E5484D;
  --red-bg:      #FBE9EA;
  --bg:          #F3F5F9;
  --card:        #FFFFFF;
  --border:      #E6EAF1;
  --text:        #16213E;
  --text-light:  #6B7794;
  --text-faint:  #97A1B8;
  --radius-lg:   18px;
  --radius-md:   12px;
  --radius-sm:   8px;
  --shadow:      0 8px 24px rgba(11,27,58,0.06);
  --shadow-lg:   0 20px 45px rgba(11,27,58,0.12);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

a{ text-decoration: none; color: inherit; }
ul{ list-style: none; margin: 0; padding: 0; }
img{ max-width: 100%; display: block; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Layout helpers ---------- */
.container{ max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.section{ padding: 64px 0; }
.section-tight{ padding: 40px 0; }
.grid{ display: grid; gap: 24px; }
.flex{ display: flex; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-center{ display: flex; align-items: center; justify-content: center; }
.muted{ color: var(--text-light); }
.faint{ color: var(--text-faint); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px;
  border: 1.5px solid transparent; cursor: pointer; transition: .2s ease; white-space: nowrap;
}
.btn-gold{ background: var(--gold); color: var(--navy); }
.btn-gold:hover{ background: var(--gold-dark); }
.btn-navy{ background: var(--navy); color: #fff; }
.btn-navy:hover{ background: var(--navy-2); }
.btn-outline{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--navy); }
.btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.35); color:#fff; }
.btn-outline-light:hover{ border-color: #fff; }
.btn-green{ background: var(--green); color: #fff; }
.btn-sm{ padding: 8px 16px; font-size: 13px; }
.btn-block{ width: 100%; }
.btn-disabled{ background: #E9ECF3; color: var(--text-faint); cursor: not-allowed; }

/* ---------- Top navbar (public pages) ---------- */
.topbar{
  background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 500;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.topbar-inner{ display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; max-width: 1320px; margin: 0 auto; }
.logo{ display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; color: #fff; }
.logo .logo-icon{
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(145deg, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 16px;
}
.logo-sub{ display: block; font-size: 10px; font-weight: 500; color: rgba(255,255,255,.55); margin-top: 1px; }
.nav-links{ display: flex; align-items: center; gap: 30px; }
.nav-links a{ font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); padding: 6px 2px; border-bottom: 2px solid transparent; transition: .2s; }
.nav-links a:hover{ color: #fff; }
.nav-links a.active{ color: #fff; border-color: var(--gold); }
.nav-actions{ display: flex; align-items: center; gap: 12px; }
.icon-btn{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; position:relative; }
.icon-btn .dot{ position:absolute; top:6px; left:8px; width:8px; height:8px; border-radius:50%; background: var(--red); border:2px solid var(--navy); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size: 13px; color: var(--text-light); display:flex; align-items:center; gap: 8px; }
.breadcrumb a{ color: var(--text-light); }
.breadcrumb a:hover{ color: var(--navy); }
.breadcrumb .current{ color: var(--text); font-weight: 700; }
.breadcrumb i{ font-size: 10px; color: var(--text-faint); }

/* ---------- Cards ---------- */
.card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-pad{ padding: 26px; }
.card-header{ display:flex; align-items:center; justify-content:space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 15px; }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.badge-progress{ background: var(--gold); color: var(--navy); }
.badge-presale{ background: var(--amber); color: #5A3C0A; }
.badge-done{ background: var(--green-bg); color: var(--green); }
.badge-risk-low{ background: var(--green-bg); color: var(--green); }
.badge-risk-mid{ background: var(--amber-bg); color: #8A5A0E; }
.badge-risk-high{ background: var(--red-bg); color: var(--red); }

/* ---------- Progress bar ---------- */
.progress-track{ width: 100%; height: 8px; border-radius: 20px; background: #EBEEF4; overflow: hidden; }
.progress-fill{ height: 100%; border-radius: 20px; background: var(--green); }
.progress-fill.navy{ background: var(--navy); }
.progress-fill.gold{ background: var(--gold); }

/* ---------- Stat box ---------- */
.stat-box{ background: #F7F9FC; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.stat-box .label{ font-size: 11px; color: var(--text-light); margin-bottom: 6px; }
.stat-box .value{ font-size: 16px; font-weight: 800; color: var(--navy); }

.kpi-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px 22px; display:flex; flex-direction:column; gap:10px; }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.kpi-icon{ width: 42px; height:42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font-size:17px; }
.kpi-value{ font-size: 24px; font-weight: 900; color: var(--navy); }
.kpi-change{ font-size: 12px; font-weight: 700; }
.kpi-change.up{ color: var(--green); }
.kpi-change.down{ color: var(--red); }
.kpi-label{ font-size: 12px; color: var(--text-light); }

/* ---------- Donut chart (pure CSS conic-gradient) ---------- */
.donut{
  width: 150px; height: 150px; border-radius: 50%; position: relative;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.donut::before{ content:''; position:absolute; inset: 14px; background: var(--card); border-radius: 50%; }
.donut .donut-label{ position:relative; text-align:center; z-index:2; }
.donut .donut-label .pct{ font-size: 22px; font-weight: 900; color: var(--navy); display:block; }
.donut .donut-label .cap{ font-size: 11px; color: var(--text-light); }
.donut-sm{ width: 96px; height: 96px; }
.donut-sm::before{ inset: 10px; }
.donut-sm .pct{ font-size: 16px !important; }

.legend-item{ display:flex; align-items:center; justify-content:space-between; font-size: 13px; padding: 6px 0; }
.legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:8px; }

/* ---------- Tables ---------- */
.table{ width:100%; border-collapse: collapse; font-size: 13px; }
.table th{ text-align: right; color: var(--text-light); font-weight: 700; font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table td{ padding: 12px; border-bottom: 1px solid var(--border); }
.table tr:last-child td{ border-bottom: none; }
.table-project{ display:flex; align-items:center; gap:10px; }
.table-thumb{ width: 42px; height: 42px; border-radius: 8px; background-size:cover; background-position:center; flex-shrink:0; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap: 6px; border-bottom: 1px solid var(--border); overflow-x:auto; }
.tab{ padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--text-light); border-bottom: 3px solid transparent; cursor:pointer; white-space:nowrap; }
.tab.active{ color: var(--navy); border-color: var(--gold); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- Footer (public) ---------- */
.site-footer{ background: var(--navy); color: rgba(255,255,255,.75); padding: 50px 0 22px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-bottom{ text-align:center; font-size:12px; padding-top: 20px; color: rgba(255,255,255,.5); }

/* ---------- Dashboard shell (sidebar layouts) ---------- */
.dash-shell{ display: grid; grid-template-columns: 1fr 260px; min-height: 100vh; }
.dash-main{ padding: 26px 32px 60px; }
.dash-sidebar{
  background: var(--navy); color: #fff; padding: 24px 20px; display:flex; flex-direction:column;
  position: sticky; top:0; height: 100vh;
}
.sidebar-logo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:20px; margin-bottom: 26px; }
.sidebar-user{ display:flex; align-items:center; gap:10px; background: rgba(255,255,255,.06); border-radius: var(--radius-md); padding: 12px; margin-bottom: 18px; }
.sidebar-avatar{ width:42px; height:42px; border-radius:50%; background:#3a4d78; flex-shrink:0; background-size:cover; background-position:center; }
.sidebar-nav a{ display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: var(--radius-sm); font-size:14px; color: rgba(255,255,255,.72); margin-bottom:4px; }
.sidebar-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{ background: var(--gold); color: var(--navy); font-weight:800; }
.sidebar-nav a i{ width:18px; text-align:center; }
.sidebar-promo{ margin-top:auto; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.25); border-radius: var(--radius-md); padding:16px; text-align:center; }
.sidebar-bottom{ margin-top: 16px; }

.dash-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 24px; flex-wrap:wrap; gap:12px; }

/* ---------- Simple line-chart via inline SVG (shared visual look) ---------- */
.linechart{ width:100%; height:auto; }
.linechart .grid-line{ stroke: var(--border); stroke-width: 1; }
.linechart .plan-line{ stroke: var(--text-faint); stroke-width: 2; stroke-dasharray: 6 5; fill:none; }
.linechart .actual-line{ stroke: var(--green); stroke-width: 3; fill:none; }
.linechart .main-line{ stroke: var(--navy-3); stroke-width: 3; fill:none; }
.linechart .dot{ fill: var(--navy-3); }
.linechart .axis-label{ font-size: 10px; fill: var(--text-faint); font-family:'Vazirmatn',sans-serif; }

/* ---------- Utility spacing ---------- */
.mt-8{ margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-8{ margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .dash-shell{ grid-template-columns: 1fr; }
  .dash-sidebar{ position: static; height:auto; flex-direction: row; flex-wrap:wrap; }
  .sidebar-nav{ display:flex; flex-wrap:wrap; gap:6px; }
  .sidebar-promo{ display:none; }
}
@media (max-width: 900px){
  .nav-links{ display:none; }
  .container{ padding: 0 18px; }
}