/* ==========================================================================
   SPAZE TRISTAAR CRM — Design Tokens
   Palette: deep navy + brushed gold, evoking a premium retail/commercial
   property ledger rather than a generic admin template.
   ========================================================================== */
:root{
  --st-navy-950:#0b1220;
  --st-navy-900:#101a30;
  --st-navy-800:#16223d;
  --st-navy-700:#1d2d4d;
  --st-navy-600:#28406b;
  --st-gold-500:#c9a227;
  --st-gold-400:#dab945;
  --st-gold-100:#f6ecc9;
  --st-bg:#f3f4f7;
  --st-surface:#ffffff;
  --st-ink-900:#161c26;
  --st-ink-600:#5c6577;
  --st-ink-400:#8891a1;
  --st-border:#e6e8ee;
  --st-success:#1c7c54;
  --st-danger:#b3261e;
  --st-warning:#b8860b;
  --st-info:#2b6cb0;
  --st-radius:10px;
  --st-font-display:'Sora', 'Segoe UI', system-ui, sans-serif;
  --st-font-body:'Inter', 'Segoe UI', system-ui, sans-serif;
  --st-font-mono:'JetBrains Mono', 'Courier New', monospace;
}

body{
  background:var(--st-bg);
  font-family:var(--st-font-body);
  color:var(--st-ink-900);
  font-size:14.5px;
}

h1,h2,h3,h4,h5,h6, .brand-font{
  font-family:var(--st-font-display);
  letter-spacing:-0.01em;
}

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.st-sidebar{
  width:260px;
  flex-shrink:0;
  background:linear-gradient(180deg, var(--st-navy-950) 0%, var(--st-navy-900) 100%);
  color:#dbe2f0;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  transition:width .2s ease;
}
.st-sidebar .brand{
  display:flex; align-items:center; gap:.6rem;
  padding:1.25rem 1.25rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.st-sidebar .brand .mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg, var(--st-gold-400), var(--st-gold-500));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--st-font-display); font-weight:700; color:var(--st-navy-950);
}
.st-sidebar .brand .name{ font-family:var(--st-font-display); font-weight:700; font-size:1.05rem; color:#fff; line-height:1.1;}
.st-sidebar .brand .sub{ font-size:.68rem; color:var(--st-gold-400); letter-spacing:.12em; text-transform:uppercase;}

.st-nav{ padding:.75rem .6rem; }
.st-nav .nav-section-label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
  color:#6d7897; margin:1rem .75rem .35rem;
}
.st-nav a.nav-link{
  display:flex; align-items:center; gap:.65rem;
  color:#c4cce2; padding:.55rem .75rem; border-radius:8px;
  font-size:.87rem; font-weight:500; margin-bottom:2px;
}
.st-nav a.nav-link i{ width:18px; text-align:center; color:#8fa0c9; }
.st-nav a.nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.st-nav a.nav-link.active{ background:rgba(201,162,39,.14); color:#fff; border-left:3px solid var(--st-gold-500); padding-left:calc(.75rem - 3px); }
.st-nav a.nav-link.active i{ color:var(--st-gold-400); }

.st-main{ flex:1; min-width:0; }

.st-topbar{
  background:var(--st-surface);
  border-bottom:1px solid var(--st-border);
  padding:.65rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.st-topbar .search-box{
  background:var(--st-bg); border:1px solid var(--st-border); border-radius:8px;
  padding:.4rem .75rem; display:flex; align-items:center; gap:.5rem; width:320px;
}
.st-topbar .search-box input{ border:none; background:transparent; outline:none; font-size:.85rem; width:100%; }

.st-content{ padding:1.5rem; }

.breadcrumb-bar{ font-size:.8rem; color:var(--st-ink-600); margin-bottom:1rem; }
.breadcrumb-bar a{ color:var(--st-navy-700); text-decoration:none; }

/* ---------- Cards / KPI tiles ---------- */
.kpi-card{
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--st-radius);
  padding:1.1rem 1.25rem; height:100%; position:relative; overflow:hidden;
}
.kpi-card .kpi-label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--st-ink-400); font-weight:600;}
.kpi-card .kpi-value{ font-family:var(--st-font-display); font-size:1.65rem; font-weight:700; color:var(--st-navy-900); margin-top:.15rem;}
.kpi-card .kpi-icon{
  position:absolute; right:1rem; top:1rem; width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.kpi-card .kpi-trend{ font-size:.76rem; margin-top:.35rem; font-weight:600; }
.kpi-card.accent-gold::before, .kpi-card.accent-navy::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.kpi-card.accent-gold::before{ background:var(--st-gold-500); }
.kpi-card.accent-navy::before{ background:var(--st-navy-700); }
.kpi-card.accent-danger::before{ background:var(--st-danger); }
.kpi-card.accent-success::before{ background:var(--st-success); }

.panel{ background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--st-radius); padding:1.25rem; }
.panel .panel-title{ font-family:var(--st-font-display); font-weight:700; font-size:1rem; margin-bottom:1rem; display:flex; align-items:center; justify-content:space-between; }

/* ---------- Buttons ---------- */
.btn-st-primary{ background:var(--st-navy-800); border-color:var(--st-navy-800); color:#fff; }
.btn-st-primary:hover{ background:var(--st-navy-700); border-color:var(--st-navy-700); color:#fff; }
.btn-st-gold{ background:var(--st-gold-500); border-color:var(--st-gold-500); color:var(--st-navy-950); font-weight:600; }
.btn-st-gold:hover{ background:var(--st-gold-400); border-color:var(--st-gold-400); color:var(--st-navy-950); }

/* ---------- Tables ---------- */
table.dataTable{ font-size:.85rem; }
.table thead th{
  background:var(--st-navy-900); color:#e7ecf7; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; border:none; vertical-align:middle;
}
.table tbody tr:hover{ background:#faf7ec; }
.badge-status{ font-size:.7rem; padding:.35em .6em; border-radius:6px; font-weight:600; }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, var(--st-navy-700), var(--st-navy-950) 70%);
}
.login-card{
  background:var(--st-surface); border-radius:14px; padding:2.5rem 2.25rem; width:380px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.login-card .mark{
  width:52px;height:52px;border-radius:12px; margin:0 auto 1rem;
  background:linear-gradient(135deg, var(--st-gold-400), var(--st-gold-500));
  display:flex;align-items:center;justify-content:center; font-family:var(--st-font-display);
  font-weight:700; color:var(--st-navy-950); font-size:1.3rem;
}

@media (max-width: 991px){
  .st-sidebar{ position:fixed; left:-260px; z-index:1050; }
  .st-sidebar.open{ left:0; }
  .st-topbar .search-box{ display:none; }
}