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

/* ============================================================================
   Avyukta IntelliCall — Modern Enterprise Design System ($100M SaaS UI)
   ========================================================================= */

:root {
  --primary-blue:           #2563EB;
  --secondary-blue:         #3B82F6;
  --accent-cyan:            #06B6D4;
  --dark-navy:              #0F172A;
  
  --background:             210 50% 98%;
  --foreground:             222 47% 11%;
  --card:                   0 0% 100%;
  --card-foreground:        222 47% 11%;
  --popover:                0 0% 100%;
  --popover-foreground:     222 47% 11%;
  --primary:                221 83% 53%;
  --primary-foreground:     0 0% 100%;
  --secondary:              217 91% 60%;
  --secondary-foreground:   0 0% 100%;
  --muted:                  214 32% 95%;
  --muted-foreground:       215 16% 47%;
  --accent:                 189 94% 43%;
  --accent-foreground:      0 0% 100%;
  --destructive:            0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border:                 214 32% 91%;
  --input:                  214 32% 91%;
  --ring:                   221 83% 53%;
  --radius:                 1.25rem;
  --brand:                  221 83% 53%;
  --brand-deep:             224 76% 48%;

  /* Glassmorphism tokens */
  --glass-bg:               rgba(255, 255, 255, 0.75);
  --glass-border:           rgba(226, 232, 240, 0.8);
  --glass-shadow:           0 20px 40px -15px rgba(37, 99, 235, 0.08), 0 0 1px rgba(15, 23, 42, 0.08);
  --hover-shadow:           0 25px 50px -12px rgba(37, 99, 235, 0.22), 0 0 20px rgba(6, 182, 212, 0.15);

  --font-inter: 'Inter', system-ui, sans-serif;
  --font-poppins: 'Poppins', system-ui, sans-serif;
  --font-space: 'Space Grotesk', system-ui, sans-serif;
  --ds-font: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
}

.dark {
  --background:             222 47% 7%;
  --foreground:             210 40% 98%;
  --card:                   222 47% 9%;
  --card-foreground:        210 40% 98%;
  --popover:                222 47% 9%;
  --popover-foreground:     210 40% 98%;
  --primary:                221 83% 60%;
  --primary-foreground:     0 0% 100%;
  --secondary:              217 91% 65%;
  --secondary-foreground:   0 0% 100%;
  --muted:                  217 33% 15%;
  --muted-foreground:       215 20% 65%;
  --accent:                 189 94% 50%;
  --accent-foreground:      0 0% 100%;
  --border:                 217 33% 18%;
  --input:                  217 33% 18%;
  --ring:                   221 83% 60%;
  --brand:                  221 83% 60%;
  --brand-deep:             224 76% 55%;

  --glass-bg:               rgba(15, 23, 42, 0.75);
  --glass-border:           rgba(255, 255, 255, 0.1);
  --glass-shadow:           0 20px 40px -15px rgba(0, 0, 0, 0.5);
  --hover-shadow:           0 25px 50px -12px rgba(37, 99, 235, 0.35);
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
/* 17px root — the whole scale is lifted, so 13px body and 11px labels read
   comfortably. Don't "fix" small type by bumping component sizes. */
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--ds-font);
  /* Jost is a geometric sans with thin stems: grayscale antialiasing keeps it
     crisp on low-DPI, and a hair of tracking lifts legibility. */
  font-feature-settings: "cv11", "ss01", "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { -webkit-font-smoothing: auto; }
}

button, input, select, textarea { font-family: inherit; }

/* Numeric columns line up and read faster with tabular figures. */
table, .tabular-nums, .data-value { font-variant-numeric: tabular-nums; }

h1, h2, h3 { letter-spacing: -0.02em; }

::selection { background: hsl(var(--brand) / 0.16); }

/* ── PAGE CANVAS ────────────────────────────────────────────────────────── */
.panel-main {
  padding: 24px;
  background-image:
    radial-gradient(circle at 4% 0%, hsl(var(--brand) / 0.055), transparent 30rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
}
.panel-main > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .panel-main { padding: 16px; } }

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.sidebar-root {
  background: linear-gradient(180deg, var(--sidebar-bg-from) 0%, var(--sidebar-bg-to) 100%);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 4px 0 24px rgba(0,0,0,0.08);
}

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0; gap: 8px; overflow: hidden;
}

.sidebar-logo-wrap { transition: all 300ms cubic-bezier(0.4,0,0.2,1); }

.sidebar-pin-btn {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sidebar-hover-bg);
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-muted);
  cursor: pointer; flex-shrink: 0; transition: all 150ms;
}
.sidebar-pin-btn:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }

.sidebar-edge-pin {
  position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 28px; border-radius: 0 6px 6px 0;
  background: rgba(0,174,239,0.13);
  border: 1px solid rgba(0,174,239,0.24); border-left: none;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,174,239,0.72); cursor: pointer; transition: all 200ms; opacity: 0;
}
.sidebar-root:hover .sidebar-edge-pin { opacity: 1; }
.sidebar-edge-pin:hover { background: rgba(0,174,239,0.22); color: #28c2f5; }

.sidebar-section-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--sidebar-muted);
  padding: 0 10px; margin: 4px 0 6px;
}

.sidebar-divider { height: 1px; background: var(--sidebar-border); margin: 6px 10px 10px; }

.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--sidebar-text); text-decoration: none;
  transition: background 150ms, color 150ms, transform 150ms;
  white-space: nowrap; overflow: hidden; position: relative;
}
.sidebar-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
  transform: translateX(1px);
}
.sidebar-link-active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text) !important;
  box-shadow: inset 2px 0 0 #00aeef;
}
.sidebar-link-active:hover { background: rgba(0,174,239,0.17); }

.sidebar-link-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--sidebar-muted); transition: color 150ms;
}
.sidebar-link:hover .sidebar-link-icon { color: var(--sidebar-hover-text); }
.sidebar-link-active .sidebar-link-icon { color: var(--sidebar-active-icon) !important; }

.sidebar-link-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left;
}

/* Admin nav — violet instead of cyan, so privileged pages read differently. */
.sidebar-link-admin { color: var(--sidebar-text); }
.sidebar-link-admin:hover { background: rgba(139,92,246,0.1); color: var(--sidebar-hover-text); }
.sidebar-link-admin-active {
  background: rgba(139,92,246,0.14);
  color: var(--sidebar-active-text) !important;
  box-shadow: inset 3px 0 0 #8b5cf6;
}

.sidebar-footer {
  padding: 8px; border-top: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
}

.sidebar-balance {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(16,185,129,0.15);
  background: rgba(16,185,129,0.06);
  text-decoration: none; transition: background 150ms;
  margin-bottom: 2px; overflow: hidden;
}
.sidebar-balance:hover { background: rgba(16,185,129,0.1); }
.sidebar-balance-low { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.07); }
.sidebar-balance-low:hover { background: rgba(239,68,68,0.12); }

.sidebar-user {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  background: var(--sidebar-chip-bg); overflow: hidden;
}

.sidebar-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #05658a, #00aeef);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0; letter-spacing: 0;
}

.sidebar-footer-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--sidebar-text); text-decoration: none;
  transition: background 150ms, color 150ms;
  overflow: hidden; white-space: nowrap;
}
.sidebar-footer-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-text); }
.sidebar-signout:hover { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; }

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar-root {
  height: 56px; min-height: 56px;
  display: flex; align-items: center;
  padding: 0 24px; gap: 8px; flex-shrink: 0;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 20;
}
.topbar-breadcrumb-parent {
  font-size: 13px; color: hsl(var(--muted-foreground));
  font-weight: 500; white-space: nowrap;
}
.topbar-title {
  font-size: 15px; font-weight: 700; color: hsl(var(--foreground));
  letter-spacing: -0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.topbar-icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px; color: hsl(var(--muted-foreground));
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; transition: all 150ms;
}
.topbar-icon-btn:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }

.topbar-user-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px; border-radius: 20px;
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  margin-left: 4px; cursor: default;
}
.topbar-user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #05658a, #00aeef);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.topbar-user-name {
  font-size: 12px; font-weight: 600;
  color: hsl(var(--foreground)); white-space: nowrap;
}

/* ── SURFACES ───────────────────────────────────────────────────────────── */
.surface-card { box-shadow: var(--ds-shadow); }

.ds-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  box-shadow: var(--ds-shadow);
}
/* Dense pages override the roomy default padding — p-6 cards look bloated
   next to these tables. */
.ds-card-header { padding: 16px 20px 4px; }
.ds-card-title  { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ds-card-desc   { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 3px 0 0; }
.ds-card-body   { padding: 16px 20px 20px; }

/* ── METRICS BOARD ──────────────────────────────────────────────────────── */
/* One editorial surface split by hairlines — NOT four floating cards. */
.metrics-board {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--ds-shadow-board);
}

.metric-tile {
  position: relative; min-width: 0; width: 100%;
  padding: 18px 20px 17px;
  appearance: none;
  border-top: 0; border-right: 0; border-bottom: 0;
  border-left: 1px solid hsl(var(--border));
  background: transparent; color: inherit; font: inherit; text-align: left;
}
.metric-tile:first-child { border-left: 0; }

/* Per-tile accent rule, coloured by the --metric-accent inline variable. */
.metric-tile::before {
  position: absolute; top: 0; left: 20px;
  width: 32px; height: 2px; border-radius: 99px;
  background: var(--metric-accent, hsl(var(--brand))); content: "";
}

.metric-tile-action { cursor: pointer; transition: background-color 150ms ease; }
.metric-tile-action:hover { background: hsl(var(--accent) / 0.55); }

.metric-icon {
  display: inline-flex; height: 29px; width: 29px;
  align-items: center; justify-content: center; border-radius: 9px;
}
.metric-value {
  margin-top: 16px; color: hsl(var(--foreground));
  font-size: clamp(1.7rem, 2.3vw, 2.05rem);
  font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em; line-height: 1;
}
.metric-label { margin-top: 9px; color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 500; }
.metric-context {
  display: flex; align-items: center; gap: 4px; margin-top: 5px;
  color: hsl(var(--muted-foreground)); font-size: 11px;
}
.metric-context-positive { color: #059669; }
.metric-context-negative { color: #e11d48; }
.metric-context-live     { color: #059669; }

/* Secondary summary strip: labelled heading block + 4 quiet cells. */
.usage-strip {
  display: flex; overflow: hidden; align-items: stretch;
  border: 1px solid hsl(var(--border));
  border-radius: 14px; background: hsl(var(--card) / 0.72);
}
.usage-heading {
  display: flex; width: 176px; flex-shrink: 0;
  flex-direction: column; justify-content: center;
  padding: 14px 18px; background: hsl(var(--muted) / 0.38);
}
.usage-items { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.usage-item  { padding: 13px 18px; border-left: 1px solid hsl(var(--border)); }

.data-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.chart-tooltip {
  min-width: 94px; border: 1px solid hsl(var(--border)); border-radius: 10px;
  background: hsl(var(--card) / 0.94); padding: 8px 10px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.1); backdrop-filter: blur(10px);
}

@media (max-width: 1023px) {
  .metrics-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-tile:nth-child(odd)  { border-left: 0; }
  .metric-tile:nth-child(n+3)  { border-top: 1px solid hsl(var(--border)); }
  .usage-strip   { flex-direction: column; }
  .usage-heading { width: auto; }
  .usage-item:first-child { border-left: 0; }
}
@media (max-width: 540px) {
  .usage-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-item:nth-child(odd) { border-left: 0; }
  .usage-item:nth-child(n+3) { border-top: 1px solid hsl(var(--border)); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .sidebar-link:hover { transform: none; }
}

/* ── TABLES ─────────────────────────────────────────────────────────────── */
.data-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.data-table th {
  padding: 10px 16px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.4);
  border-bottom: 1px solid hsl(var(--border));
}
.data-table td {
  padding: 11px 16px;
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  color: hsl(var(--foreground));
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: hsl(var(--accent) / 0.5); }

.table-scroll {
  width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; border-radius: var(--radius);
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; border-radius: 8px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; cursor: pointer;
  transition: color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms, transform 150ms;
}
.ds-btn:active   { transform: translateY(1px); }
.ds-btn:disabled { pointer-events: none; opacity: 0.5; }
.ds-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.ds-btn-primary {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.ds-btn-primary:hover { background: hsl(var(--primary) / 0.92); box-shadow: 0 4px 12px rgba(15,23,42,0.1); }

.ds-btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.ds-btn-secondary:hover { background: hsl(var(--secondary) / 0.8); }

.ds-btn-outline {
  border-color: hsl(var(--input)); background: hsl(var(--background) / 0.8);
  color: hsl(var(--foreground));
}
.ds-btn-outline:hover { border-color: hsl(var(--primary) / 0.2); background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.ds-btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.ds-btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.ds-btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.ds-btn-destructive:hover { background: hsl(var(--destructive) / 0.9); }

.ds-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 7px; }
.ds-btn-lg { height: 44px; padding: 0 28px; font-size: 14px; }
.ds-btn-icon { width: 38px; height: 38px; padding: 0; }

/* ── BADGES ─────────────────────────────────────────────────────────────── */
.ds-badge {
  display: inline-flex; align-items: center;
  border-radius: 9999px; border: 1px solid transparent;
  padding: 2px 10px; font-size: 11px; font-weight: 600;
  transition: background-color 150ms;
}
.ds-badge-default     { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.ds-badge-secondary   { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.ds-badge-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.ds-badge-outline     { border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.ds-badge-success     { background: #d1fae5; color: #065f46; }
.ds-badge-warning     { background: #fef3c7; color: #92400e; }
.ds-badge-info        { background: #dbeafe; color: #1e40af; }
.ds-badge-neutral     { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.dark .ds-badge-success { background: rgba(16,185,129,0.16); color: #6ee7b7; }
.dark .ds-badge-warning { background: rgba(245,158,11,0.16); color: #fcd34d; }
.dark .ds-badge-info    { background: rgba(0,174,239,0.16); color: #7dd3fc; }

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.ds-input, .ds-select, .ds-textarea {
  display: block; width: 100%;
  height: 38px; padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 13px; font-family: inherit;
  transition: border-color 150ms, box-shadow 150ms;
}
.ds-textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.ds-select   { cursor: pointer; }
.ds-input::placeholder, .ds-textarea::placeholder { color: hsl(var(--muted-foreground)); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { cursor: not-allowed; opacity: 0.5; }

.ds-label {
  display: block; font-size: 12px; font-weight: 600;
  color: hsl(var(--foreground)); margin-bottom: 6px;
}

/* ── ALERTS ─────────────────────────────────────────────────────────────── */
.ds-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
}
.ds-alert-success { background: rgba(16,185,129,0.08);  border-color: rgba(16,185,129,0.25); color: #047857; }
.ds-alert-error   { background: rgba(239,68,68,0.08);   border-color: rgba(239,68,68,0.25);  color: #b91c1c; }
.ds-alert-warning { background: rgba(245,158,11,0.09);  border-color: rgba(245,158,11,0.28); color: #b45309; }
.ds-alert-info    { background: rgba(0,174,239,0.08);   border-color: rgba(0,174,239,0.24);  color: #0369a1; }
.dark .ds-alert-success { color: #6ee7b7; }
.dark .ds-alert-error   { color: #fca5a5; }
.dark .ds-alert-warning { color: #fcd34d; }
.dark .ds-alert-info    { color: #7dd3fc; }

/* ── PAGE HEADINGS ──────────────────────────────────────────────────────── */
.page-header { margin-bottom: 20px; }
.page-header h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
  color: hsl(var(--foreground)); margin: 0;
}
.page-header p { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 3px 0 0; }

/* ── EMPTY STATE ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px; text-align: center; gap: 12px;
}
.empty-state-icon {
  width: 48px; height: 48px; border-radius: 16px;
  background: hsl(var(--muted));
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
  color: hsl(var(--muted-foreground));
}
.empty-state-title { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); margin: 0; }
.empty-state-desc  { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 0; max-width: 300px; }

/* ── LIVE PULSE DOT ─────────────────────────────────────────────────────── */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0);   }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);   }
}
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── SKELETON ───────────────────────────────────────────────────────────── */
.ds-skeleton {
  background: hsl(var(--muted) / 0.7);
  border-radius: 12px;
  animation: ds-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; }

input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }

/* ── RESPONSIVE TABLE HELPERS ───────────────────────────────────────────── */
@media (max-width: 639px) {
  .col-hide-sm { display: none !important; }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 12px; }
  .topbar-user-name { display: none; }
}
@media (max-width: 767px) {
  .col-hide-md { display: none !important; }
  .page-header-row { flex-direction: column; align-items: flex-start !important; gap: 0.75rem; }
}
/* Card-style rows below 480px — opt in with .card-rows on the wrapper and
   data-label="Column name" on each <td>. */
@media (max-width: 479px) {
  .card-rows table, .card-rows thead, .card-rows tbody,
  .card-rows th, .card-rows td, .card-rows tr { display: block; width: 100%; }
  .card-rows thead { display: none; }
  .card-rows tr {
    border: 1px solid hsl(var(--border)); border-radius: var(--radius);
    margin-bottom: 0.5rem; padding: 0.5rem;
  }
  .card-rows td { border: none; padding: 4px 0; font-size: 12px; }
  .card-rows td::before {
    content: attr(data-label);
    font-weight: 600; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); display: block;
  }
}

/* ── ENTERPRISE SAAS UTILITIES ($100M UI) ───────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--hover-shadow);
  border-color: rgba(37, 99, 235, 0.35);
}

.gradient-text {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 40%, #06B6D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-border-wrap {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(6, 182, 212, 0.2));
  padding: 1px;
  transition: all 0.35s ease;
}

.gradient-border-wrap:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.6), rgba(6, 182, 212, 0.6));
  box-shadow: 0 15px 35px -10px rgba(37, 99, 235, 0.3);
}

.btn-blue-gradient {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: #ffffff !important;
  border-radius: 14px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
}

.btn-blue-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -4px rgba(37, 99, 235, 0.6), 0 0 20px rgba(6, 182, 212, 0.35);
  color: #ffffff !important;
}

.btn-outline-blue {
  background: rgba(255, 255, 255, 0.85);
  color: #1E293B;
  border-radius: 14px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #CBD5E1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
}

.dark .btn-outline-blue {
  background: rgba(15, 23, 42, 0.7);
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline-blue:hover {
  border-color: #2563EB;
  color: #2563EB;
  background: rgba(37, 99, 235, 0.05);
  transform: translateY(-2px);
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float 5s ease-in-out infinite 2s;
}

/* Reveal classes for IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: #ffffff;
  border-radius: 24px;
  max-width: 560px;
  width: 100%;
  padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .modal-box {
  background: #0F172A;
  color: #F8FAFC;
  border: 1px solid rgba(255,255,255,0.1);
}

.modal-overlay.open .modal-box {
  transform: scale(1);
}

/* ── TECH GRID BACKGROUND & LOGIN CARD STYLES ────────────────────────── */
.bg-tech-grid {
  background-color: #070D1B;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

.login-card-main {
  background: #FFFFFF;
  border-radius: 24px;
  max-width: 450px;
  width: 100%;
  padding: 36px 32px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.dark .login-card-main {
  background: #0F172A;
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}

.login-input-field {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.dark .login-input-field {
  background: #1E293B;
  border-color: rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
}

.login-input-field:focus {
  outline: none;
  border-color: #2563EB;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.dark .login-input-field:focus {
  background: #0F172A;
  border-color: #3B82F6;
}

.divider-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 20px 0;
}

.divider-with-text::before,
.divider-with-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #E2E8F0;
}

.dark .divider-with-text::before,
.dark .divider-with-text::after {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.divider-with-text span {
  padding: 0 12px;
}