/* ==========================================================================
   Design tokens
   Direction: exact clone of the approved Finly-style reference file
   (gargona_finly_reference.html) — violet is the dominant interactive color
   (gradient primary buttons, active nav, primary chart line), values copied
   1:1 from that file's own --p/--work/--soft/--line tokens rather than
   re-derived. The small orange logo dot is the one surviving trace of
   Gargona's original identity — everything else is violet-first by design.
   Space Grotesk carries headings/numbers, IBM Plex Sans carries UI text,
   IBM Plex Mono carries data (phone numbers, proxy host:port, ids, timestamps).
   ========================================================================== */
:root {
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-bg: #F3F6F5;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F8F6FF;
  --color-border: rgba(70, 61, 110, 0.12);
  --color-text: #202126;
  --color-text-muted: #777986;
  --color-text-faint: #A0A1AA;

  /* The "workspace" panel — the big rounded violet-tinted zone the whole page
     content sits inside, distinct from both the plain outer --color-bg and
     the white --color-surface cards floating on top of it. */
  --color-work: #E9E4FB;

  --color-primary: #8D73F6;
  --color-primary-hover: #765CE7;
  --color-primary-grad-end: #A88FFF;
  --color-on-primary: #FFFFFF;
  --color-primary-bg: #EEEAFF;

  --color-accent: #4BBDA0;
  --color-accent-hover: #3DA88E;
  --color-blue: #75AAF7;
  --color-lime: #A5DC4E;
  --color-yellow: #F2C12E;

  --color-danger: #E86673;
  --color-danger-hover: #D14F5C;
  --color-danger-bg: #E866731A;
  --color-danger-text: #C23B49;

  --color-warning: #E79A48;
  --color-warning-bg: #E79A4820;
  --color-warning-text: #A15E1C;

  --color-success-bg: #4BBDA020;
  --color-success-text: #2E8E76;

  --color-info: var(--color-blue);
  --color-ring: var(--color-primary);

  /* Auth (login/register) brand pane only — intentionally untouched by this
     pass, kept fully separate from the sidebar tokens below. */
  --panel-bg: #E7E3F0;
  --panel-bg-hover: #DCD7E9;
  --panel-border: #D1CCDF;
  --panel-text: #403A4D;
  --panel-text-muted: #6E6980;
  --panel-accent: #9C480C;
  --panel-on-accent: #FFFFFF;

  /* Sidebar — same tone as the page background (not a separate white panel),
     exactly like the reference's --side (which just equals --bg). */
  --sidebar-bg: var(--color-bg);
  --sidebar-bg-hover: var(--color-primary-bg);
  --sidebar-border: var(--color-border);
  --sidebar-text: var(--color-text-muted);
  --sidebar-text-muted: var(--color-text-faint);
  --sidebar-accent: var(--color-primary);
  --sidebar-on-accent: var(--color-on-primary);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --radius-sm: 0.3125rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.375rem;
  --radius-3xl: 1.8rem;
  --radius-full: 9999px;

  --shadow-sm: 0 4px 10px rgba(56, 44, 100, 0.06);
  --shadow-md: 0 15px 36px rgba(56, 44, 100, 0.10);
  --shadow-lg: 0 20px 48px rgba(56, 44, 100, 0.14);
  --shadow-xl: 0 30px 80px rgba(24, 18, 33, 0.33);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms;
  --transition-base: 200ms;

  /* --sidebar-width is the one source of truth .sidebar's own width reads from;
     html.sidebar-collapsed below re-points it at the collapsed value instead of
     a separate selector overriding .sidebar directly, so anything else that
     ever needs "how wide is the sidebar right now" (now or later) can just
     read this one variable instead of duplicating the collapsed-state check. */
  --sidebar-width-expanded: 15rem;
  --sidebar-width-collapsed: 4.5rem;
  --sidebar-width: var(--sidebar-width-expanded);

  /* Shared scrollbar look for every real scroll container (see .custom-scrollbar
     below) — calm/muted at rest, violet on hover or while actively scrolling.
     Never a bare system scrollbar. */
  --scrollbar-size: 10px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(110, 101, 145, 0.28);
  --scrollbar-thumb-hover: rgba(141, 115, 246, 0.58);
  --scrollbar-thumb-active: rgba(118, 92, 231, 0.78);
  --scrollbar-thumb-border: 3px;

  /* Matches the theme (light tooltip on the light theme, dark on the dark theme) —
     separation from whatever's directly behind it (sidebar, card, ...) comes from the
     tooltip's own shadow (see #global-tooltip's box-shadow, deliberately stronger than
     a plain card's), not from inverting to the opposite tone. */
  --tooltip-bg: var(--color-surface);
  --tooltip-text: var(--color-text);
}

html.sidebar-collapsed {
  --sidebar-width: var(--sidebar-width-collapsed);
}

:root.dark {
  --color-bg: #0A0A0B;
  --color-surface: #131316;
  --color-surface-muted: #1C1C21;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-text: #F7F7F8;
  --color-text-muted: #A6A6AE;
  --color-text-faint: #6F6F78;

  --color-work: #202024;

  --color-primary: #9B80FF;
  --color-primary-hover: #B09AFF;
  --color-primary-grad-end: #B09AFF;
  --color-on-primary: #17131F;
  --color-primary-bg: rgba(155, 128, 255, 0.14);

  --color-accent: #4BBDA0;
  --color-accent-hover: #5ECDB0;
  --color-blue: #75AAF7;
  --color-lime: #A5DC4E;
  --color-yellow: #F2C12E;

  --color-danger: #E86673;
  --color-danger-hover: #F0808C;
  --color-danger-bg: #E866732A;
  --color-danger-text: #F0919C;

  --color-warning: #E79A48;
  --color-warning-bg: #E79A482A;
  --color-warning-text: #F0B573;

  --color-success-bg: #4BBDA02A;
  --color-success-text: #7FDABF;

  --color-info: var(--color-blue);
  --color-ring: var(--color-primary);

  --panel-bg: #14171D;
  --panel-bg-hover: #1E222A;
  --panel-border: #262A33;
  --panel-text: #C6CAD2;
  --panel-text-muted: #6C7280;
  --panel-accent: #E8A448;
  --panel-on-accent: #1C1206;

  --sidebar-bg: var(--color-bg);
  --sidebar-bg-hover: var(--color-primary-bg);
  --sidebar-border: var(--color-border);
  --sidebar-text: var(--color-text-muted);
  --sidebar-text-muted: var(--color-text-faint);
  --sidebar-accent: var(--color-primary);
  --sidebar-on-accent: var(--color-on-primary);

  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.4);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --scrollbar-thumb-hover: rgba(155, 128, 255, 0.55);
  --scrollbar-thumb-active: rgba(176, 154, 255, 0.76);

  --tooltip-bg: var(--color-surface);
  --tooltip-text: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body { font-family: var(--font-sans); }

/* html/body themselves never scroll on desktop — see the AppShell block below,
   where .workspace-scroll becomes the one real scroll container so the lavender
   workspace's rounded corners stay put instead of scrolling out of view. Mobile
   (<=680px, same breakpoint the sidebar/topbar already switch on) is excluded on
   purpose: an inner scroll container there fights the on-screen keyboard and
   overscroll/bounce gestures more than it's worth, so it just keeps the plain,
   already-working page-level scroll. */
html, body { height: 100%; }
@media (min-width: 681px) {
  html, body { overflow: hidden; }
}


/* The `hidden` utility the rest of the panel has always assumed exists.

   It did not. 340 KB of stylesheet across 38 files mention `.hidden` only inside
   comments — automation-shell.css even works around "the plain .hidden utility
   class" and its specificity — but no rule ever declared it. Everything that hides
   by class therefore did not hide at all: the three view tabs on every module page
   (Настройка/Активность/История) rendered stacked one under the other, source-mode
   panels showed all at once, and empty states sat on top of the content they were
   meant to replace.

   !important because this is a utility, not a component rule: it is toggled by JS
   onto elements whose own class already sets `display` (.dm-empty-state,
   .dm-section-card, .chm-first-panel), and a utility that loses to the element it
   is applied to is the bug above all over again. Same reason Bootstrap's .d-none
   and Tailwind's .hidden are both !important.

   [hidden] is here for the same reason: the UA stylesheet does declare it, but at
   specificity (0,1,0) it loses to any class that sets display, so the attribute is
   just as unreliable without this. */
[hidden],
.hidden { display: none !important; }