/* Shared layout and Cobalt theme from concepts-v2/src. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--nav-ink);
  text-decoration: none;
  font-size: 18px;
  letter-spacing: -.025em;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
}
.shell-controls { display: flex; align-items: center; flex: none; gap: 9px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 5px; min-height: 31px; padding: 4px 8px; color: var(--nav-ink); font-size: 12px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--nav-ink);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.nav-group { display: grid; align-content: start; gap: 1px; min-width: 0; }
.nav-group .nav-link { width: 100%; text-align: left; }
.nav-caption { padding: 5px 8px 3px; color: var(--nav-muted); font-size: 11px; font-weight: 650; }
.nav-group .nav-link.active, .nav-group .nav-link.active:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--link);
}
.shell-footer { display: flex; flex-wrap: wrap; gap: 2px 7px; }
.shell-footer button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nav-muted);
  font-size: 12px;
}
.mobile-nav { display: none; }
.mobile-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(284px, calc(100vw - 37px));
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--nav-ink);
  background: var(--nav-bg);
  border: 0;
  border-inline-end: 1px solid var(--line-strong);
}
.mobile-drawer::backdrop { background: var(--scrim); }
.drawer-content { display: flex; flex-direction: column; min-height: 100%; padding: 10px; }
.drawer-content nav { display: grid; gap: 5px; }
.drawer-content .shell-footer { margin-top: auto; padding-top: 9px; }
.drawer-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drawer-close, .drawer-toggle { min-height: 32px; padding: 4px 7px; }
.drawer-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
body:has(.mobile-drawer[open]) { overflow: hidden; }

.shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 11px 8px 9px;
  background: var(--nav-bg);
  border-inline-end: 1px solid var(--line);
}
.rail > .brand { margin-inline: 6px; }
.rail .nav-link { min-height: 28px; padding: 3px 6px; font-size: 12px; }
.rail .nav-caption { padding-inline: 6px; }
.rail > .shell-footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 6px; }
.shell-frame { min-width: 0; }
.shell-frame > .shell-main { padding-inline: 20px; }

@media (max-width: 1050px) {
  .shell-frame > .shell-main { padding-inline: 15px; }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .rail { display: none; }
  .mobile-nav { display: flex; align-items: center; gap: 9px; }
  .mobile-drawer .nav-group .nav-link { white-space: normal; }
}
@media (max-width: 540px) {
  .shell-frame > .shell-main { padding-inline: 10px; }
  .brand { gap: 6px; font-size: 17px; }
  .brand-mark { width: 26px; height: 26px; border-radius: 6px; }
  .brand-mark svg { width: 15px; }
  .shell-controls { gap: 5px; }
  .theme-toggle { padding-inline: 7px; }
  .theme-toggle span { display: none; }
}

/* Пульт — navy navigation, discrete KPI tiles and a blue revenue tile. */
body[data-variant="cobalt"] {
  color-scheme: light;
  --bg: #edf1f7;
  --surface: #fff;
  --surface-alt: #f5f7fb;
  --ink: #172337;
  --muted: #606e84;
  --line: #dce3ee;
  --line-strong: #b8c6d9;
  --hover: #f1f5ff;
  --accent: #2459df;
  --accent-hover: #1848c4;
  --on-accent: #fff;
  --accent-soft: #eaf0ff;
  --accent-line: #b9cbf6;
  --link: #1748c5;
  --focus: #1c51d1;
  --good: #2757bd;
  --good-soft: #edf2ff;
  --warn: #885110;
  --warn-soft: #fff3df;
  --bad: #a83d3d;
  --bad-soft: #fff0ed;
  --control-ink: #253a61;
  --control-on: #fff;
  --nav-bg: #14233e;
  --nav-ink: #e8eefb;
  --nav-muted: #a4b4ce;
  --media-zone: #f1f4f9;
  --lead-zone: #edf2fe;
  --money-zone: #e9efff;
  --total-zone: #e2ebfe;
  --chart-spend: #356be7;
  --chart-leads: #203553;
  --scroll-thumb: #7486a2;
  --scrim: rgb(7 21 43 / .58);
  --control-radius: 6px;
  --cobalt-rail-line: #2d3c57;
  --cobalt-rail-hover: #273956;
  --cobalt-rail-focus: #a3bfff;
  --cobalt-rail-accent: #2a59dc;
  --cobalt-feature: #2459df;
  --cobalt-feature-line: #2459df;
  --cobalt-feature-muted: #e2eaff;
  --cobalt-shadow: 0 2px 3px #20365c06, 0 6px 18px #20365c08;
  --cobalt-feature-shadow: 0 4px 12px #2459df29;
}

body[data-variant="cobalt"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #0d1422;
  --surface: #172133;
  --surface-alt: #131d2d;
  --ink: #eef3fe;
  --muted: #a3b2ca;
  --line: #2a3a51;
  --line-strong: #506789;
  --hover: #202f49;
  --accent: #82a8ff;
  --accent-hover: #a3bfff;
  --on-accent: #0d2045;
  --accent-soft: #203659;
  --accent-line: #476799;
  --link: #adc5ff;
  --focus: #a3bfff;
  --good: #a7c1ff;
  --good-soft: #203457;
  --warn: #f2bf76;
  --warn-soft: #3b3021;
  --bad: #ffb0a7;
  --bad-soft: #432b31;
  --control-ink: #dce8ff;
  --control-on: #172133;
  --nav-bg: #101a2c;
  --nav-ink: #e5edfb;
  --nav-muted: #a1b1cb;
  --media-zone: #1b273b;
  --lead-zone: #1c2c47;
  --money-zone: #203354;
  --total-zone: #253b60;
  --chart-spend: #76a1ff;
  --chart-leads: #dce8ff;
  --scroll-thumb: #8398ba;
  --scrim: rgb(3 9 19 / .75);
  --cobalt-rail-line: #26374e;
  --cobalt-rail-hover: #243650;
  --cobalt-rail-accent: #264c9e;
  --cobalt-feature: #254b97;
  --cobalt-feature-line: #3963b0;
  --cobalt-feature-muted: #dce8ff;
  --cobalt-shadow: 0 3px 16px #0002, inset 0 1px #ffffff05;
  --cobalt-feature-shadow: inset 0 1px #ffffff18;
}

body[data-variant="cobalt"] .cobalt-shell { --rail-width: 206px; }
body[data-variant="cobalt"] :is(.cobalt-rail, .mobile-drawer) {
  --focus: var(--cobalt-rail-focus);
  border-inline-end-color: var(--cobalt-rail-line);
  scrollbar-color: var(--scroll-thumb) var(--nav-bg);
}
body[data-variant="cobalt"] .cobalt-rail { gap: 13px; padding: 20px 13px 11px; }
body[data-variant="cobalt"] .cobalt-rail > .brand { margin: 0 7px 3px; }
body[data-variant="cobalt"] .brand { gap: 9px; }
body[data-variant="cobalt"] .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #fff;
  background: #3262e7;
  box-shadow: inset 0 1px #fff4, 0 3px 8px #0002;
}
body[data-variant="cobalt"] .cobalt-wordmark { display: grid; }
body[data-variant="cobalt"] .cobalt-wordmark strong { font-size: 23px; line-height: 1; letter-spacing: -.03em; }
body[data-variant="cobalt"] .cobalt-wordmark strong span { color: var(--cobalt-rail-focus); }
body[data-variant="cobalt"] .cobalt-wordmark small {
  color: var(--nav-muted);
  font-size: 9px;
  line-height: 1.25;
  margin-top: 4px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
body[data-variant="cobalt"] .cobalt-portfolio {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 45px;
  padding: 6px 7px;
  border-color: var(--cobalt-rail-line);
  background: transparent;
  color: var(--nav-ink);
  text-align: left;
}
body[data-variant="cobalt"] .cobalt-portfolio-icon {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 6px;
  background: var(--cobalt-rail-line);
  color: var(--nav-ink);
}
body[data-variant="cobalt"] .cobalt-portfolio strong { display: block; font-size: 12px; line-height: 1.15; }
body[data-variant="cobalt"] .cobalt-portfolio small { display: block; margin-top: 3px; color: var(--nav-muted); font-size: 10px; line-height: 1.15; }
body[data-variant="cobalt"] .cobalt-nav { display: grid; gap: 9px; }
body[data-variant="cobalt"] :is(.cobalt-nav, .mobile-drawer) .nav-caption {
  padding: 4px 9px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
}
body[data-variant="cobalt"] :is(.cobalt-nav, .mobile-drawer) .nav-link {
  min-height: 32px;
  padding: 5px 8px;
  gap: 9px;
  color: var(--nav-muted);
  font-size: 12px;
  font-weight: 600;
}
body[data-variant="cobalt"] :is(.cobalt-nav, .mobile-drawer) .nav-link:hover,
body[data-variant="cobalt"] :is(.cobalt-rail, .mobile-drawer) .shell-footer button:hover,
body[data-variant="cobalt"] :is(.cobalt-portfolio, .drawer-close):hover { background: var(--cobalt-rail-hover); color: var(--nav-ink); }
body[data-variant="cobalt"] :is(.cobalt-nav, .mobile-drawer) .nav-link.active,
body[data-variant="cobalt"] :is(.cobalt-nav, .mobile-drawer) .nav-link.active:hover {
  color: #fff;
  border-color: transparent;
  background: var(--cobalt-rail-accent);
  box-shadow: 0 3px 8px #0002;
}
body[data-variant="cobalt"] .cobalt-rail > .shell-footer { border-color: var(--cobalt-rail-line); gap: 1px; }
body[data-variant="cobalt"] .shell-footer button { padding-inline: 5px; font-size: 11px; }
body[data-variant="cobalt"] .drawer-close { color: var(--nav-ink); background: var(--cobalt-rail-line); border-color: transparent; }

body[data-variant="cobalt"] .cobalt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  padding: 6px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
body[data-variant="cobalt"] .cobalt-topbar :is(.cobalt-location, .cobalt-sync) { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
body[data-variant="cobalt"] .cobalt-location strong { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); }
body[data-variant="cobalt"] .cobalt-location strong span {
  background: var(--accent-soft);
  color: var(--link);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
body[data-variant="cobalt"] .cobalt-topbar .theme-toggle { color: var(--ink); border-color: var(--line-strong); background: var(--surface-alt); }
body[data-variant="cobalt"] .cobalt-utility { display: grid; place-items: center; width: 31px; min-height: 31px; padding: 0; border-color: var(--line-strong); }
body[data-variant="cobalt"] .cobalt-topbar .theme-toggle:hover,
body[data-variant="cobalt"] .cobalt-utility.active { color: var(--link); background: var(--accent-soft); }
body[data-variant="cobalt"] .cobalt-shell .shell-main { max-width: 1760px; padding: 20px 24px 34px; }
body[data-variant="cobalt"] .screen-heading { grid-template-columns: minmax(160px, 1fr) auto; gap: 9px 14px; margin-bottom: 17px; }
body[data-variant="cobalt"] .screen-heading .heading-copy { display: block; }
body[data-variant="cobalt"] .screen-heading h1 { font-size: 26px; font-weight: 680; letter-spacing: -.03em; margin-bottom: 4px; }
body[data-variant="cobalt"] #globalControls select { background: var(--surface); color: var(--ink); border-color: var(--field-line); }
body[data-variant="cobalt"] .screen-heading .portfolio-context { gap: 6px; margin-inline-end: 3px; }

body[data-variant="cobalt"] .overview-dashboard { gap: 13px; }
body[data-variant="cobalt"] .overview-kpis {
  grid-auto-flow: row;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  overflow: visible;
  background: transparent;
  border: 0;
}
body[data-variant="cobalt"] .overview-kpis > .overview-metric {
  min-height: 91px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--cobalt-shadow);
}
body[data-variant="cobalt"] .overview-kpis > .overview-metric > span { font-weight: 600; }
body[data-variant="cobalt"] .overview-kpis > .overview-metric > strong {
  margin: 6px 0;
  font-size: clamp(19px, 1.84vw, 29px);
  font-weight: 670;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
body[data-variant="cobalt"] .overview-kpis > .overview-metric > small { font-size: 11px; white-space: normal; }
body[data-variant="cobalt"] .overview-kpis > .metric-revenue {
  color: #fff;
  background: var(--cobalt-feature);
  border-color: var(--cobalt-feature-line);
  box-shadow: var(--cobalt-feature-shadow);
}
body[data-variant="cobalt"] .overview-kpis > .metric-revenue > :is(span, strong) { color: #fff; }
body[data-variant="cobalt"] .overview-kpis > .metric-revenue > small { color: var(--cobalt-feature-muted); }
body[data-variant="cobalt"] .overview-facts { border-radius: 7px; box-shadow: var(--cobalt-shadow); }
body[data-variant="cobalt"] .overview-fact { display: flex; padding: 8px 13px; }
body[data-variant="cobalt"] .overview-grid { gap: 13px; }
body[data-variant="cobalt"] .overview-grid > :is(.overview-priorities, .overview-trend) { align-self: stretch; }
body[data-variant="cobalt"] .overview-card { padding: 12px 15px; box-shadow: var(--cobalt-shadow); }
body[data-variant="cobalt"] .overview-heading { margin-bottom: 7px; }
body[data-variant="cobalt"] .overview-heading h2 { font-size: 15px; font-weight: 690; }
body[data-variant="cobalt"] .overview-priorities .overview-heading { padding-bottom: 8px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
body[data-variant="cobalt"] .overview-task { min-height: 59px; padding-block: 6px; }
body[data-variant="cobalt"] .overview-task > .priority-icon { border-radius: 7px; }
body[data-variant="cobalt"] .overview-client-list { column-gap: 24px; }
body[data-variant="cobalt"] .overview-client { min-height: 40px; }
body[data-variant="cobalt"] .overview-client > :is(span:first-child, span:nth-child(3)) { display: grid; gap: 1px; }
body[data-variant="cobalt"] .overview-brief { background: var(--surface); border: 1px solid var(--line); }

body[data-variant="cobalt"] .table-workspace { box-shadow: var(--cobalt-shadow); }
body[data-variant="cobalt"] .analytics-table .metric-groups th { text-transform: uppercase; font-size: 10px; letter-spacing: .055em; }
body[data-variant="cobalt"] .analytics-table thead tr:nth-child(2) th { border-bottom-color: var(--line-strong); }
body[data-variant="cobalt"] .analytics-table .total-row :is(th, td) { border-bottom-color: var(--accent-line); }
body[data-variant="cobalt"] .analytics-table .client-avatar { width: 26px; height: 26px; background: var(--accent-soft); color: var(--link); }
body[data-variant="cobalt"] .analytics-table .row-client:nth-child(3n + 2) .client-avatar { background: var(--money-zone); }
body[data-variant="cobalt"] .analytics-table .row-client:nth-child(3n + 3) .client-avatar { background: var(--surface-alt); color: var(--muted); }

@media (min-width: 1101px) {
  body[data-variant="cobalt"] .overview-grid {
    grid-template-columns: minmax(350px, .88fr) minmax(0, 1.42fr);
    grid-template-areas: "priorities trend" "clients clients" "tail tail";
  }
}
@media (min-width: 1180px) and (max-height: 820px) {
  body[data-variant="cobalt"] .cobalt-rail { gap: 9px; }
  body[data-variant="cobalt"] .cobalt-nav { gap: 6px; }
  body[data-variant="cobalt"] .cobalt-nav .nav-caption { padding-block: 2px; }
  body[data-variant="cobalt"] .cobalt-nav .nav-link { min-height: 28px; padding-block: 3px; }
  body[data-variant="cobalt"].route-overview .cobalt-topbar { min-height: 42px; padding-block: 5px; }
  body[data-variant="cobalt"].route-overview .cobalt-shell .shell-main { padding-top: 11px; }
  body[data-variant="cobalt"].route-overview .screen-heading { margin-bottom: 10px; }
  body[data-variant="cobalt"].route-overview .screen-heading .heading-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
  body[data-variant="cobalt"].route-overview .screen-heading h1 { margin: 0; }
  body[data-variant="cobalt"] :is(.overview-dashboard, .overview-grid) { gap: 8px; }
  body[data-variant="cobalt"] .overview-kpis > .overview-metric { min-height: 68px; padding: 7px 10px; }
  body[data-variant="cobalt"] .overview-kpis > .overview-metric > strong { margin-block: 3px; font-size: clamp(19px, 1.75vw, 24px); }
  body[data-variant="cobalt"] .overview-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1px 6px; padding: 5px 11px; }
  body[data-variant="cobalt"] .overview-fact small { grid-column: 1 / -1; }
  body[data-variant="cobalt"] .overview-card { padding: 9px 12px; }
  body[data-variant="cobalt"] .overview-priorities .overview-heading { padding-bottom: 4px; }
  body[data-variant="cobalt"] .overview-task { min-height: 0; padding-block: 3px; }
  body[data-variant="cobalt"] .overview-trend .crm-chart-plot { width: min(100%, 460px); }
  body[data-variant="cobalt"] .overview-trend .module-toolbar { margin-block: 3px; }
  body[data-variant="cobalt"] .overview-trend .module-toolbar > button { min-height: 28px; padding-block: 3px; }
  body[data-variant="cobalt"] .overview-client { min-height: 29px; padding-block: 2px; }
  body[data-variant="cobalt"] .overview-client > :is(span:first-child, span:nth-child(3)) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; }
}
@media (max-width: 1100px) {
  body[data-variant="cobalt"] .cobalt-shell { --rail-width: 188px; }
  body[data-variant="cobalt"] .cobalt-shell .shell-main { padding-inline: 16px; }
  body[data-variant="cobalt"] .cobalt-topbar { padding-inline: 16px; }
  body[data-variant="cobalt"] .overview-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-variant="cobalt"] .overview-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "priorities" "trend" "clients" "tail";
  }
}
@media (max-width: 1050px) {
  body[data-variant="cobalt"] .screen-heading { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body[data-variant="cobalt"] .cobalt-topbar { min-height: 50px; padding-inline: 11px; }
  body[data-variant="cobalt"] .cobalt-topbar :is(.cobalt-sync, .cobalt-location, .cobalt-utility) { display: none; }
  body[data-variant="cobalt"] .cobalt-topbar .brand { color: var(--ink); }
  body[data-variant="cobalt"] .cobalt-topbar .cobalt-wordmark { display: none; }
  body[data-variant="cobalt"] .cobalt-topbar .mobile-nav .brand::after { content: "Пульт"; font-weight: 720; font-size: 16px; }
  body[data-variant="cobalt"] .cobalt-topbar .brand-mark { width: 27px; height: 27px; border-radius: 7px; }
  body[data-variant="cobalt"] .cobalt-shell .shell-main { padding: 15px 11px 24px; }
  body[data-variant="cobalt"] .screen-heading { margin-bottom: 11px; }
  body[data-variant="cobalt"] .screen-heading .heading-copy { grid-row: auto; grid-column: auto; }
  body[data-variant="cobalt"] .heading-context { grid-row: auto; grid-column: auto; }
  body[data-variant="cobalt"] .mobile-drawer .nav-link { min-height: 40px; }
  body[data-variant="cobalt"] .overview-client-list { column-gap: 12px; }
}
@media (max-width: 540px) {
  body[data-variant="cobalt"] .overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-variant="cobalt"] .overview-kpis > .overview-metric { min-height: 83px; padding: 9px 10px; }
  body[data-variant="cobalt"] .overview-kpis > .overview-metric > strong { font-size: 21px; }
  body[data-variant="cobalt"] .overview-fact { flex-direction: row; }
  body[data-variant="cobalt"] .overview-dashboard, body[data-variant="cobalt"] .overview-grid { gap: 10px; }
  body[data-variant="cobalt"] .overview-card { padding: 10px 11px; }
  body[data-variant="cobalt"] .overview-client { min-height: 42px; }
}