/* ============================================================
   DRISHTI — DESIGN SYSTEM v1.0
   "আপনার গাড়ি। আমাদের নজরে।"
   tokens.css — The Constitution. Nothing ships without this.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ── */
:root {
  --bg-primary:        #0A0B0D;
  --bg-secondary:      #111318;
  --bg-tertiary:       #181B22;
  --bg-card:           rgba(17, 19, 24, 0.8);
  --bg-glass:          rgba(255, 255, 255, 0.03);
  --bg-glass-hover:    rgba(255, 255, 255, 0.06);

  --border:            #1E2028;
  --border-subtle:     rgba(30, 32, 40, 0.6);
  --border-glow:       rgba(255, 107, 26, 0.4);
  --border-teal:       rgba(0, 212, 170, 0.3);

  --text-primary:      #F0F2F5;
  --text-secondary:    #A8AEBB;
  --text-muted:        #6B7280;
  --text-disabled:     #3D4149;

  /* THE 3-LOCATION ORANGE RULE — Logo | CTA | Critical Alert ONLY */
  --orange:            #FF6B1A;
  --amber:             #E85D00;
  --teal:              #00D4AA;
  --teal-dim:          rgba(0, 212, 170, 0.12);
  --teal-glow:         rgba(0, 212, 170, 0.4);

  --status-active:     #00D4AA;
  --status-idle:       #6B7280;
  --status-alert:      #E85D00;
  --status-offline:    #3D4149;

  --font-display:      'Syne', sans-serif;
  --font-body:         'Hind Siliguri', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   3rem;
  --text-4xl:   4rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-card:         0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --shadow-glow-orange:  0 0 24px rgba(255, 107, 26, 0.3);
  --shadow-glow-teal:    0 0 24px rgba(0, 212, 170, 0.2);

  --ease-micro:  200ms ease-out;
  --ease-panel:  400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: 300ms ease-in-out;

  --sidebar-width:     260px;
  --sidebar-collapsed: 72px;
  --header-height:     64px;
  --right-panel:       320px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }

/* ── TYPOGRAPHY ── */
.display-hero {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.display-section {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.text-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.text-data { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--ease-micro);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
  border: 1px solid transparent;
}
.btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-primary:hover { background: var(--amber); border-color: var(--amber); box-shadow: var(--shadow-glow-orange); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-glass); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-glass-hover); border-color: rgba(255,255,255,0.15); }
.btn-teal { background: var(--teal-dim); color: var(--teal); border-color: var(--border-teal); }
.btn-teal:hover { background: rgba(0,212,170,0.2); box-shadow: var(--shadow-glow-teal); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-glass); color: var(--text-primary); border-color: var(--border); }
.btn-danger { background: rgba(232,93,0,0.1); color: var(--amber); border-color: rgba(232,93,0,0.3); }
.btn-danger:hover { background: rgba(232,93,0,0.2); }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-md); }
.btn-icon { padding: 0; width: 36px; height: 36px; justify-content: center; border-radius: var(--radius-sm); }

/* ── CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--ease-micro), box-shadow var(--ease-micro);
}
.card:hover { border-color: rgba(255,107,26,0.2); box-shadow: 0 0 0 1px rgba(255,107,26,0.08), var(--shadow-card); }
.card-teal:hover { border-color: rgba(0,212,170,0.25); box-shadow: 0 0 0 1px rgba(0,212,170,0.08), var(--shadow-card); }
.glass { background: var(--bg-glass); backdrop-filter: blur(20px); border: 1px solid var(--border); }

/* ── STATUS ── */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.active  { background: var(--status-active); animation: pulse-teal 2s infinite; }
.status-dot.idle    { background: var(--status-idle); }
.status-dot.alert   { background: var(--status-alert); animation: pulse-amber 1.5s infinite; }
.status-dot.offline { background: var(--status-offline); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid transparent;
}
.status-badge.active  { background: var(--teal-dim); color: var(--teal); border-color: var(--border-teal); }
.status-badge.idle    { background: rgba(107,114,128,0.12); color: var(--text-muted); border-color: rgba(107,114,128,0.2); }
.status-badge.alert   { background: rgba(232,93,0,0.1); color: var(--amber); border-color: rgba(232,93,0,0.25); }
.status-badge.offline { background: rgba(61,65,73,0.2); color: var(--text-disabled); border-color: rgba(61,65,73,0.3); }

.live-indicator { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--teal); letter-spacing: 0.08em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: pulse-teal 2s infinite; }

/* ── FUEL GAUGE ── */
.fuel-gauge { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.fuel-gauge-fill { height: 100%; border-radius: 2px; transition: width 1s ease-out; }
.fuel-high { background: var(--teal); }
.fuel-mid  { background: #F59E0B; }
.fuel-low  { background: var(--amber); box-shadow: 0 0 8px rgba(232,93,0,0.5); }

/* ── TOGGLE ── */
.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all var(--ease-micro); }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); top: 2px; left: 2px; transition: all var(--ease-micro); }
.toggle input:checked + .toggle-slider { background: var(--teal-dim); border-color: var(--teal); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--teal); box-shadow: 0 0 8px var(--teal-glow); }

/* ── ANIMATIONS ── */
@keyframes pulse-teal  { 0%,100%{box-shadow:0 0 0 0 rgba(0,212,170,0.6)} 50%{box-shadow:0 0 0 6px rgba(0,212,170,0)} }
@keyframes pulse-amber { 0%,100%{box-shadow:0 0 0 0 rgba(232,93,0,0.6)} 50%{box-shadow:0 0 0 6px rgba(232,93,0,0)} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes countUp     { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.animate-fadeInUp    { animation: fadeInUp 0.6s ease-out both; }
.animate-fadeIn      { animation: fadeIn 0.4s ease-out both; }
.animate-slideInLeft { animation: slideInLeft 0.4s ease-out both; }
.delay-1{animation-delay:.1s} .delay-2{animation-delay:.2s} .delay-3{animation-delay:.3s} .delay-4{animation-delay:.4s} .delay-5{animation-delay:.5s} .delay-6{animation-delay:.6s}

/* ── TOAST ── */
.toast-container { position:fixed; top:var(--space-6); right:var(--space-6); z-index:9999; display:flex; flex-direction:column; gap:var(--space-3); max-width:360px; width:90%; }
.toast { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-secondary); backdrop-filter:blur(20px); animation:slideInRight 0.3s ease-out; box-shadow:var(--shadow-card); }
.toast.success { border-left:3px solid var(--teal); }
.toast.warning { border-left:3px solid #F59E0B; }
.toast.critical{ border-left:3px solid var(--amber); }
.toast.info    { border-left:3px solid var(--text-muted); }
.toast-icon    { font-size:18px; line-height:1.4; }
.toast-title   { font-size:var(--text-sm); font-weight:600; margin-bottom:2px; }
.toast-message { font-size:var(--text-xs); color:var(--text-muted); }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.2s ease-out; }
.modal { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-8); max-width:440px; width:90%; animation:fadeInUp 0.3s ease-out; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── UTILS ── */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 var(--space-6); }
.flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center} .items-start{align-items:flex-start}
.justify-between{justify-content:space-between} .justify-center{justify-content:center} .justify-end{justify-content:flex-end}
.gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)} .gap-4{gap:var(--space-4)} .gap-6{gap:var(--space-6)} .gap-8{gap:var(--space-8)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.text-orange{color:var(--orange)} .text-teal{color:var(--teal)} .text-amber{color:var(--amber)}
.text-muted{color:var(--text-muted)} .text-secondary{color:var(--text-secondary)}
.w-full{width:100%} .h-full{height:100%} .relative{position:relative} .overflow-hidden{overflow:hidden}
.flex-1{flex:1} .flex-shrink-0{flex-shrink:0} .ml-auto{margin-left:auto}

@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .container{padding:0 var(--space-4)}
  .hide-mobile{display:none!important}
}
@media(min-width:769px){.hide-desktop{display:none!important}}