/* Product shell: a calm, data-first interface inspired by modern Russian SaaS.
   This file intentionally sits after legacy page styles so it can modernize
   appearance without changing page markup or application behaviour. */
:root {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --soft: #f7f8fa;
  --ink: #1d2028;
  --muted: #6d7885;
  --line: #e2e5e9;
  --teal: #2688eb;
  --green: #1e9b63;
  --gold: #e9a227;
  --slate: #1d2028;
  --uzor-coral: #2688eb;
  --uzor-blue: #2688eb;
  --shadow: 0 1px 2px rgba(20, 27, 38, .04), 0 6px 20px rgba(20, 27, 38, .05);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Navigation: compact, quiet, and readable at a glance. */
.sidebar {
  width: 256px;
  min-height: 100vh;
  padding: 18px 12px;
  gap: 18px;
  overflow: visible;
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}
.sidebar::before { display: none; }
.sidebar-toggle {
  top: 18px;
  right: -14px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20,27,38,.12);
  color: #64707d;
  font-size: 21px;
}
.brand { min-height: 44px; padding: 0 9px; gap: 10px; }
.brand-mark {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #2688eb;
}
.brand-mark img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.brand strong { color: #1d2028; font-size: 18px; font-weight: 750; letter-spacing: -.03em; }
.brand span, .block-tab small { color: #818c99; font-size: 10px; }
.block-nav { gap: 3px; }
.block-nav-secondary { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.block-tab {
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 0;
  min-height: 46px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  color: #414b57;
}
.block-tab span.nav-icon {
  grid-row: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #c6e2fb;
  border-radius: 9px;
  background: #f1f8ff;
  color: #4097df;
  box-shadow: none !important;
}
.block-tab span.nav-icon::before,
.block-tab span.nav-icon::after { display: none; }
.block-tab span.nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.block-tab span.nav-icon svg path,
.block-tab:nth-child(even) span.nav-icon svg path { stroke: currentColor; }
.block-tab strong {
  min-width: 0;
  align-self: center;
  color: #35404d;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  /* Keep labels readable: a phrase may take two lines, but words stay whole. */
  overflow-wrap: normal;
  word-break: normal;
}
.block-tab small { display: none; }
.block-tab.active, .block-tab:hover { border: 0; background: #eaf3fd; color: #1976d2; }
.block-tab.active strong, .block-tab:hover strong { color: #1976d2; }
.block-tab.active span.nav-icon, .block-tab:hover span.nav-icon {
  border-color: #a9d5f7;
  background: #dff0ff;
  color: #1976d2;
}

body.sidebar-collapsed .sidebar { width: 68px; padding: 56px 10px 16px; }
body.sidebar-collapsed .sidebar-toggle { right: -14px; }
body.sidebar-collapsed .brand { padding: 0; }
body.sidebar-collapsed .block-tab { padding: 7px; }
body.sidebar-collapsed .block-tab span { width: 32px; height: 32px; }

/* Main canvas and page context. */
.workspace { padding: 24px 28px 42px; }
.workspace:has(> section:not(.page-hidden)), body > .shell > main:has(> .topbar) { padding: 22px 28px 42px; }
:is(#accountPage, #summaryPage, #rnpPage, #dashboardPage, #planPage, #tasksPage, #crmPage, #helpPage, #workspacePage, main) > .topbar {
  min-height: 64px;
  margin: 0 0 18px;
  padding: 0 0 16px;
  gap: 10px 16px;
  border-bottom: 1px solid var(--line);
}
:is(#accountPage, #summaryPage, #rnpPage, #dashboardPage, #planPage, #tasksPage, #crmPage, #helpPage, #workspacePage, main) > .topbar::before,
:is(#accountPage, #summaryPage, #rnpPage, #dashboardPage, #planPage, #tasksPage, #crmPage, #helpPage, #workspacePage, main) > .topbar::after { display: none; }
:is(#accountPage, #summaryPage, #rnpPage, #dashboardPage, #planPage, #tasksPage, #crmPage, #helpPage, #workspacePage, main) > .topbar h1 {
  color: #1d2028;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -.025em;
}
:is(#accountPage, #summaryPage, #rnpPage, #dashboardPage, #planPage, #tasksPage, #crmPage, #helpPage, #workspacePage, main) > .topbar > div:first-child > p:not(.eyebrow) { color: var(--muted); font-size: 12px; }
.eyebrow { color: #2688eb; font-size: 10px; letter-spacing: .08em; font-weight: 750; }

/* Controls: one clear primary action, neutral secondary actions. */
button, input, select, textarea { border-radius: 8px; }
input, select, textarea { border-color: #d9dde3; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(38,136,235,.15); border-color: #2688eb; }
.primary-button, .primary-action, .account-page button[type="submit"] {
  border-color: #2688eb;
  background: #2688eb;
  box-shadow: none;
  color: #fff;
}
.primary-button:hover, .primary-action:hover, .account-page button[type="submit"]:hover { background: #1476d4; box-shadow: 0 4px 12px rgba(38,136,235,.22); }
.ghost-button, .secondary-button { border-color: #d9dde3; background: #fff; color: #386b9d; box-shadow: none; }
.ghost-button:hover, .secondary-button:hover { border-color: #b8d6f4; background: #f3f8fe; transform: none; box-shadow: none; }

/* Information surfaces retain hierarchy without visual noise. */
.table-card, .dashboard-card, .dashboard-kpi, .source-panel, .manual-form, .empty-block, .key-card,
.agent-summary-help, .agent-summary-hero, .agent-summary-stat, .rnp-control-strip, .rnp-table-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.table-card, .dashboard-card { box-shadow: var(--shadow); }
.dashboard-kpi::before { width: 3px; border-radius: 0 3px 3px 0; background: #2688eb; }
.dashboard-kpi.positive::before { background: #1e9b63; }
.dashboard-kpi.negative::before { background: #e15a5a; }
.dashboard-kpi.positive strong { color: #148452; }
.dashboard-kpi.negative strong { color: #d04848; }
.dashboard-card-head h2, .table-card h2 { color: #242a33; }

/* Tables are the product's core: reduce decoration and improve scanability. */
th { color: #687482; background: #f7f8fa; border-top: 0 !important; }
th, td { border-color: #edf0f2; }
tbody tr:hover td { background: #f6faff; }
.rnp-table-shell, .table-shell { border: 1px solid var(--line); border-radius: 10px; }
.rnp-table th { background: #f5f7f9; color: #596675; }

/* Small-screen hierarchy stays intact instead of inheriting desktop density. */
@media (max-width: 900px) {
  .workspace, .workspace:has(> section:not(.page-hidden)), body > .shell > main:has(> .topbar) { padding: 18px 16px 32px; }
  .sidebar { width: 224px; }
}
@media (max-width: 720px) {
  .workspace, .workspace:has(> section:not(.page-hidden)) { padding: 14px 12px 26px; }
  :is(#accountPage, #summaryPage, #rnpPage, #dashboardPage, #planPage, #tasksPage, #crmPage, #helpPage, #workspacePage, main) > .topbar { margin-bottom: 14px; padding-bottom: 13px; }
  :is(#accountPage, #summaryPage, #rnpPage, #dashboardPage, #planPage, #tasksPage, #crmPage, #helpPage, #workspacePage, main) > .topbar h1 { font-size: 21px; }
}

/* Authentication uses the same system, but remains deliberately focused. */
body.legal-footer-auth {
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f2f3f5;
}
body.legal-footer-auth::before { display: none; }
body.legal-footer-auth .card {
  width: min(420px, 100%);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(20,27,38,.10);
}
body.legal-footer-auth .card::before { display: none; }
body.legal-footer-auth .brand { margin: 0 0 26px; padding: 0; }
body.legal-footer-auth .brand-mark { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: #2688eb; }
body.legal-footer-auth .brand-mark img { width: 25px; height: 25px; filter: brightness(0) invert(1); }
body.legal-footer-auth .brand strong,
body.legal-footer-auth h1 { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
body.legal-footer-auth .brand strong { font-size: 19px; letter-spacing: -.02em; }
body.legal-footer-auth h1 { margin: 0; font-size: 27px; font-weight: 750; letter-spacing: -.03em; }
body.legal-footer-auth p { color: var(--muted); }
body.legal-footer-auth input { border-color: #d9dde3; background: #fff; border-radius: 8px; }
body.legal-footer-auth input:focus { outline-color: rgba(38,136,235,.15); border-color: #2688eb; }
body.legal-footer-auth button { border-radius: 8px; background: #2688eb; box-shadow: none; }
body.legal-footer-auth button:hover { background: #1476d4; }
body.legal-footer-auth .legal { border-top-color: var(--line); }
@media (max-width: 520px) {
  body.legal-footer-auth { padding: 16px; }
  body.legal-footer-auth .card { padding: 26px 22px; }
}