/* Sales Command Center — design tokens */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Type */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Neutrals (slate-leaning) */
  --bg: #F4F5F9;
  --surface: #FFFFFF;
  --surface-sunken: #F8F9FC;
  --border: #E6E8EE;
  --border-strong: #D2D6DF;
  --divider: #EFF1F5;

  /* Text */
  --text: #0E1320;
  --text-2: #4A5168;
  --text-3: #7A8198;
  --text-4: #AAB0C0;
  --text-on-dark: #E6E9F2;

  /* Sidebar (navy) */
  --nav-bg: #0B1024;
  --nav-bg-2: #131A38;
  --nav-text: #C7CCE0;
  --nav-text-muted: #6F779A;
  --nav-active: #1B2347;
  --nav-divider: rgba(255,255,255,0.07);

  /* Accent — indigo (overridden by tweaks panel) */
  --accent: #4F46E5;
  --accent-2: #6366F1;
  --accent-soft: #EEF0FF;
  --accent-soft-2: #E0E3FF;
  --accent-ink: #2E2BA8;

  /* Status */
  --crit:    #D63B3B;  --crit-soft: #FDECEC;  --crit-ink: #8A1F1F;
  --warn:    #E26A1A;  --warn-soft: #FDF1E6;  --warn-ink: #8A3A05;
  --notice:  #C99005;  --notice-soft: #FBF4DD; --notice-ink: #6B4B01;
  --good:    #1E9E5C;  --good-soft: #E6F5EE;  --good-ink: #0E5B33;
  --info:    #2367C5;  --info-soft: #E9F0FB;  --info-ink: #133E7B;

  /* Pipeline tier colors (Bronze / Silver / Gold) */
  --bronze: #B8743A;  --bronze-soft: #F6EADD;
  --silver: #8B91A8;  --silver-soft: #EEF0F5;
  --gold:   #C99005;  --gold-soft: #FBF4DD;

  /* Shape */
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadow */
  --sh-1: 0 1px 0 rgba(15,20,40,0.04), 0 1px 2px rgba(15,20,40,0.04);
  --sh-2: 0 4px 14px rgba(15,20,40,0.06), 0 1px 2px rgba(15,20,40,0.04);
  --sh-drawer: -24px 0 60px rgba(15,20,40,0.18);
}

/* Reset just inside our app surface */
.scc, .scc * {
  box-sizing: border-box;
}
.scc {
  font-family: var(--font-sans);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  height: 100%;
  width: 100%;
  display: flex;
}
.scc .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.scc .tnum { font-variant-numeric: tabular-nums; }

/* ── ChatDrawer behavior ────────────────────────────────────
   On desktop the drawer is non-modal — the page behind stays
   interactive (no dim, no click-blocking). On phones the
   backdrop dims the page and click-outside closes the drawer.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 721px) {
  .scc-chat-backdrop { display: none !important; }
}

/* ── Chat reply button reveal ───────────────────────────────
   Hidden by default, fades in when the row is hovered or the
   button itself is focused. On touch (no hover) keep it always
   visible at low opacity so users can still discover it.
   ──────────────────────────────────────────────────────────── */
.scc-chat-reply-btn {
  opacity: 0.25;
  transition: opacity 120ms ease-out;
}
.scc-chat-msg:hover .scc-chat-reply-btn,
.scc-chat-reply-btn:focus-visible {
  opacity: 0.9;
}
.scc-chat-reply-btn:hover {
  opacity: 1;
}
@media (hover: none) {
  /* On touch devices, no hover → keep buttons visible. */
  .scc-chat-reply-btn { opacity: 0.7; }
}

/* ── Responsive behavior ─────────────────────────────────────
   The design is built for ~1280-1440px viewports. On smaller
   screens collapse the sidebar to icons, stack the queue's
   filter panel above the rows, and turn KPI strips into a
   2-column grid so the page stays usable on tablets and phones.
   ──────────────────────────────────────────────────────────── */

/* Tablet and below */
@media (max-width: 1024px) {
  /* KPI grid → 2 cols */
  .scc [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Two-col detail layout → stacked */
  .scc-detail-twocol {
    grid-template-columns: 1fr !important;
  }
  /* Right-rail layouts → stacked */
  .scc [style*="grid-template-columns: minmax(0, 1fr) 320px"],
  .scc [style*="grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr)"],
  .scc [style*="grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Detail stat strip → 2 cols */
  .scc-detail-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phone */
@media (max-width: 720px) {
  body { font-size: 13px; }

  /* Sidebar narrows to a 56px icon rail */
  .scc > aside {
    width: 56px !important;
    flex-shrink: 0 !important;
  }
  /* Hide text inside the navigation when collapsed */
  .scc > aside nav span,
  .scc > aside nav > div > div:first-child {
    display: none !important;
  }
  .scc > aside > div:first-child > div:nth-child(2),
  .scc > aside > div:first-child > button,
  .scc > aside > div:nth-child(2),
  .scc > aside > div:last-child > div:nth-child(2),
  .scc > aside > div:last-child > svg {
    display: none !important;
  }

  /* Queue filter panel becomes a top strip, scrolls horizontally */
  .scc-queue-body { flex-direction: column !important; }
  .scc-queue-filters {
    width: auto !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    gap: 18px !important;
    padding: 10px 14px !important;
  }
  .scc-queue-filters > div { flex-shrink: 0; min-width: 140px; }

  /* Queue rows collapse rule/rep/stage onto a second visual line */
  .scc-queue-head { display: none !important; }
  .scc-queue-row {
    grid-template-columns: 20px 28px 1fr auto !important;
    gap: 8px !important;
    row-gap: 4px !important;
  }
  .scc-queue-row > *:nth-child(4),
  .scc-queue-row > *:nth-child(5),
  .scc-queue-row > *:nth-child(6) {
    grid-column: 3 / 5;
    font-size: 11px;
  }
  .scc-queue-row > *:nth-child(7) {
    grid-column: 4;
  }

  /* KPI grid full-width single column */
  .scc [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Detail stat strip stacks */
  .scc-detail-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .scc-detail-stats > div { border-right: none !important; border-bottom: 1px solid var(--border); }
}

/* Very narrow (Telegram in-app browser) */
@media (max-width: 480px) {
  .scc-detail-stats { grid-template-columns: 1fr !important; }
}