/* The cabinet in the landing's own look (agents.ostroai.com, frontend/src/index.css) - a layer over styles.css,
   draft of 14.10.2026 in the branch cabinet-redesign: the landing's fonts (Unbounded for headings and numbers,
   Golos Text for text, JetBrains Mono for small labels), its navy palette, sharp corners with the notched corner on
   the main things, an accent of the module (Лидоген - blue «signal», AI-сейлз - violet «iris»), hints as a line with a
   bar on the left instead of cards with an icon and a button. */

@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("/static/cabinet/fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("/static/cabinet/fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/cabinet/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/cabinet/fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/static/cabinet/fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/static/cabinet/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --font-display: "Unbounded", "Golos Text", sans-serif;
  --font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 2px;
  --radius-sm: 2px;
  --notch: 14px;
}

/* the landing's navy */
:root[data-theme="dark"] {
  --bg: #00051e;
  --surface: #060b25;
  --surface-2: #0b1131;
  --surface-3: #111842;
  --line: rgba(120, 150, 255, 0.12);
  --line-strong: rgba(120, 150, 255, 0.22);
  --text: #f4f6fb;
  --text-2: #c6cddf;
  --muted: #7f889f;
  --accent: #3374ff;
  --accent-hover: #5c8fff;
  --accent-soft: rgba(51, 116, 255, 0.14);
  --accent-text: #7ea4ff;
  --grid: rgba(120, 150, 255, 0.1);
  --shadow-sm: none;
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* AI-сейлз in violet, like on the landing */
:root[data-module="sales"] { --accent: #9333ea; --accent-hover: #a855f7; --accent-soft: rgba(147, 51, 234, 0.1); --accent-text: #7e22ce; }
:root[data-theme="dark"][data-module="sales"] { --accent: #9333ea; --accent-hover: #a855f7; --accent-soft: rgba(168, 85, 247, 0.15); --accent-text: #c99bff; }

body { font-family: var(--font-sans); letter-spacing: -0.005em; }

/* a faint grid at the top, as in the landing's header */
:root[data-theme="dark"] body {
  background-image:
    linear-gradient(to right, rgb(120 150 255 / 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(120 150 255 / 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
  background-position: -1px -1px;
}
:root[data-theme="dark"] .appbar { background: color-mix(in srgb, var(--bg) 88%, transparent); }

/* headings and numbers: Unbounded */
#viewTitle, .screen h2, .sheet-body h3, .kpi-value, .sales-addon-total strong {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
}
#viewTitle { font-size: 26px; }
.card-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }

/* no module label above the title (21.10.2026): the header already names the product */
.view-head { display: grid; gap: 6px; }

/* small labels: mono, capitals */
.kpi-label, .field-label, .section-head b, .appbar-status .status-text, .badge {
  font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
}
.kpi-label { font-size: 10.5px; letter-spacing: 0.16em; }
.field-label { font-size: 11px; color: var(--muted); }
.badge { font-size: 10px; }
.appbar-status .status-text { font-size: 10.5px; }

/* sharp corners everywhere, the notched corner on the main things */
.card, .btn, .input, .select, .textarea, .seg, .seg button, .choice, .mode-option, .kb-link, .filter-menu, .filter-option,
.list-item, .kpi, .sales-addon, .sales-addon-total, .badge, .appbar-status, .appbar-support, .tab, .modal, .guide-sheet,
.setup-steps, .kb-example, .script-block, .bubble, .avatar, .card-title-icon, .pill, .meter, .meter i, .range {
  border-radius: 0 !important;
}
.btn-primary, .kpi.is-accent, .mode-option.is-active, .choice.is-active {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.btn-primary { --notch: 10px; }
.choice.is-active, .mode-option.is-active { --notch: 10px; }
.card { border: 1px solid var(--line); box-shadow: none; }
.btn { font-weight: 600; letter-spacing: -0.005em; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.avatar { background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-display); }

/* the accent tile of the summary: the module's colour, as the landing's buttons */
.kpi.is-accent { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #00051e)); border: 0; }
:root[data-module="sales"] .kpi.is-accent { background: linear-gradient(135deg, #9333ea, #3b1c86); }

/* hints: no card and no button - a bar on the left, the text and a link with an arrow */
.callout {
  background: transparent !important; border: 0 !important; border-left: 2px solid var(--accent) !important;
  padding: 2px 0 2px 14px !important; gap: 0 !important; color: var(--text-2);
}
.callout > .ic { display: none; }
.callout b { color: var(--text); font-weight: 650; }
.callout-warning { border-left-color: var(--warning) !important; }
.callout-success { border-left-color: var(--success) !important; }
.callout-danger { border-left-color: var(--danger) !important; }
.callout .btn {
  height: auto; margin-top: 8px; padding: 0; border: 0; background: none !important; clip-path: none;
  color: var(--accent-text); font-weight: 650;
}
.callout-warning .btn { color: var(--warning); }
.callout .btn::after { content: " →"; }
.callout .btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the tab bar: a hairline and the module's colour */
.tabbar { border-top: 1px solid var(--line); }
.tab.is-active .tab-icon { border-radius: 0 !important; }
.tab-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

/* the sheet from below: sharp, the module's bar on top */
.guide-sheet { border-top: 2px solid var(--accent); }
.sheet-handle { border-radius: 0; }
.callout { border-radius: 0 !important; }
:root[data-module="sales"] { --series-1: #a855f7; }
:root[data-module="leadgen"] { --series-1: #3374ff; }
.callout { border-radius: 0 !important; }
:root[data-module="sales"] { --series-1: #a855f7; }
:root[data-module="leadgen"] { --series-1: #3374ff; }

/* every button gets the notched corner (owner 14.10.2026: the plain square secondary buttons looked off) - the others
   as the landing's «ghost»: a light fill and a hairline ring, the headings' font */
.btn:not(.btn-icon) { --notch: 10px; clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: -0.02em; }
.btn-sm:not(.btn-icon) { --notch: 8px; }
/* «В заявки» under a message: a small quiet action, not a main button */
.btn.msg-to-lead:not(.btn-icon) { --notch: 6px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-icon) {
  background: rgba(255, 255, 255, 0.06); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); color: var(--text);
}
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-icon):hover { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-icon) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.callout .btn.btn { clip-path: none; box-shadow: none !important; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; color: var(--accent-text) !important; }
.callout-warning .btn.btn { color: var(--warning) !important; }

/* 05.11.2026 (разработчик): the chosen thing has the notched corner too - the picked option of a switch («Основное /
   Слова», the theme, the periods), the section in the menu and the «ИИ включён» badge; the Mini App and the site alike */
.seg button.is-active, .tab.is-active .tab-icon, .appbar-status {
  --notch: 8px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.appbar-status { --notch: 6px; }