/* brand.css — Seguro Expert: світла тема в стилі seguro.expert. Підключається після app.css і перекриває лише токени.
   Зелений #2E8B57 — головна дія й активний стан (білий текст на зеленому). Без золотого акценту.
   Шрифти як на сайті: Montserrat (заголовки, цифри) / Roboto (текст) — локальні файли, без CDN (CSP). */

@font-face { font-family: Roboto; src: url(../fonts/roboto-cyrillic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Roboto; src: url(../fonts/roboto-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: Roboto; src: url(../fonts/roboto-cyrillic-500-normal.woff2) format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Roboto; src: url(../fonts/roboto-latin-500-normal.woff2) format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: Roboto; src: url(../fonts/roboto-cyrillic-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Roboto; src: url(../fonts/roboto-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: Montserrat; src: url(../fonts/montserrat-cyrillic-600-normal.woff2) format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Montserrat; src: url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family: Montserrat; src: url(../fonts/montserrat-cyrillic-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Montserrat; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

:root {
  color-scheme: light;
  --ground: #f3f5f3; --surface: #ffffff; --raised: #f0f3f1; --active: #e9f3ed; --hover: #f4f7f5;
  --rule: #e3e8e4; --control: #c7cfc9; --field: #ffffff; --field-focus: #ffffff;
  --text: #25302a; --muted: #56625b; --faint: #7a857e; --strong: #14201a;
  --accent: #2e8b57; --accent-ink: #ffffff; --accent-hover: #256f46; --accent-tint: #e6f3ec; --accent-tint-h: #d9ecdf;
  --blue: #2b6cb0; --blue-ink: #24588f; --blue-tint: #e8f0f9; --blue-tint-h: #dbe7f5;
  --negative: #c0392b; --neg-bg: #fbe9e6; --neg-tint: #fdf1ef; --neg-tint-h: #fae5e1;
  --warn: #a8620a; --warn-bg: #fcefd9; --warn-tint: #fdf6ea; --warn-tint-h: #faecd4;
  --positive: #2e8b57; --pos-bg: #e6f3ec;
  --radius-card: 12px; --radius-ctl: 8px; --radius-chip: 6px;
  --font: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: Montserrat, Roboto, system-ui, sans-serif;
  --wa: #128c4b; --ig: #c13584; --fb: #1877f2; --tg: #1d8fcf;
}

h1, h2, .figure, .kpis .v, .big, .brand strong { font-family: var(--font-head); }
h1 { letter-spacing: -.015em; }
.card, .panel, .kpis, .stats { box-shadow: 0 1px 2px rgba(20, 32, 26, .05); }
.side { border-right: 1px solid var(--rule); }
.top { border-bottom: 1px solid var(--rule); }
.btn:hover { color: var(--accent-hover); }
.btn.primary:hover, .btn-primary:hover { color: var(--accent-ink); }
a.strong, .t1 a { color: var(--strong); }
input::-webkit-calendar-picker-indicator { filter: none; opacity: .6; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: #9aa69e; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-tint); }
.dot, .dot.off, .dot.health-unknown { background: #b3bcb6; }
.tabs a:hover { border-color: var(--control); }
.card-accent { box-shadow: inset 0 0 0 1px var(--accent); }
.tag-vip { color: var(--accent-hover); border-color: transparent; background: var(--accent-tint); }
.panel.alert { box-shadow: inset 0 0 0 1px #efc4bd; }
mark { color: var(--accent-hover); background: var(--accent-tint); border-radius: 3px; padding: 0 2px; }

/* Лого: щит + назва */
.logo-sx { display: inline-flex; align-items: center; gap: 10px; color: var(--strong); }
.logo-sx img { width: 28px; height: 28px; display: block; }
.logo-sx strong { font: 700 15px/1 var(--font-head); letter-spacing: -.01em; white-space: nowrap; }
.auth-brand .logo-sx img { width: 36px; height: 36px; }
.auth-brand .logo-sx strong { font-size: 19px; }
.crm-tag { color: var(--accent-hover); background: var(--accent-tint); }

/* Доменні елементи страхової CRM (модулі Contacts / Policies / Today / Import) */
.st { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--raised); color: var(--muted); }
.st-active, .st-issued, .tag-client { background: var(--pos-bg); color: var(--positive); }
.st-draft, .st-submitted, .tag-lead { background: var(--blue-tint); color: var(--blue-ink); }
.st-suspended, .st-cancel_requested { background: var(--warn-bg); color: var(--warn); }
.st-cancelled, .st-lapsed, .tag-dnc { background: var(--neg-bg); color: var(--negative); }
.tag-former { background: var(--raised); color: var(--muted); }
.chan { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 500; background: var(--raised); color: var(--muted); text-decoration: none; }
.chan-whatsapp { color: var(--wa); } .chan-instagram { color: var(--ig); } .chan-messenger { color: var(--fb); } .chan-telegram { color: var(--tg); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed > li { padding: 10px 0; border-top: 1px solid var(--rule); }
.feed > li:first-child { border-top: 0; }
.feed .meta { display: block; font-size: var(--fs-small); color: var(--faint); }
.feed > li.row-item { display: flex; align-items: center; gap: 10px; }
.feed form { margin: 0; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 160px; margin: 0; }
.renew-soon { color: var(--warn); font-weight: 500; }
.renew-overdue { color: var(--negative); font-weight: 500; }
.grow { flex: 1 1 auto; min-width: 0; }
.kv-wide { grid-template-columns: minmax(120px, 34%) 1fr; }
.bar { display: block; height: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.bar-wrap { background: var(--raised); border-radius: 4px; overflow: hidden; min-width: 80px; }
td.r, th.r { text-align: right; }
.secret { font-family: var(--mono); letter-spacing: .04em; }

/* Телефон: поле у фокусі не масштабує сторінку (iOS збільшує, коли шрифт < 16px) */
@media (max-width: 820px) {
  input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=date],
  input[type=datetime-local], input[type=time], input[type=month], input[type=url], input[type=tel], select, textarea,
  .field > input, .field > select, .field > textarea { font-size: 16px !important; }
}
.sres { grid-template-columns: minmax(0, 1fr); }

/* Меню й дрібниці спільного макета під світлу тему */
.side { background: var(--surface); }
.nav a, .nav button { color: var(--muted); }
.nav a:hover, .nav button:hover { background: var(--hover); color: var(--strong); }
.nav .subnav a[aria-current=true] { color: var(--strong); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpis .v a, .toplogo, .brandlink { text-decoration: none; }
.kpis .v a:hover { color: var(--accent-hover); }
.feed .row-item > .small { white-space: nowrap; }
.grid > .span-3 { grid-column: 1 / -1; }
.tabbar > a[aria-current=page], .tabmore[open] > summary { color: var(--accent-hover); }
.mail-row.is-unread .mail-who, .mail-row.is-unread strong { color: var(--strong); }
.note-card.c-yellow, .note-open.c-yellow { background: #fdf6d8; border-color: #f0e2a0; }
.note-card.c-green, .note-open.c-green { background: #e6f3ec; border-color: #c4e2d0; }
.note-card.c-blue, .note-open.c-blue { background: #e8f0f9; border-color: #c8dbf0; }
.note-card.c-pink, .note-open.c-pink { background: #fbe9f1; border-color: #f2c9dc; }
.note-card.c-violet, .note-open.c-violet { background: #efeaf9; border-color: #d8cdf0; }
@media (max-width: 640px) {
  .feed > li.row-item { flex-wrap: wrap; row-gap: 2px; }
  .feed .row-item > .small { flex-basis: 100%; }
}
.inline-form > select { flex: 0 0 auto; width: auto; max-width: 100%; }
.inline-form > input.grow { flex: 1 1 220px; }
.inline-form > .w-short { flex: 0 0 76px; width: 76px; }
.stack > .inline-form { padding: 10px 0; border-top: 1px solid var(--rule); }
.stack > .inline-form:first-child { border-top: 0; }

/* Бічне меню — темно-зелене, як у макеті Seguro: на зеленому світло-сірі елементи з темним текстом, без золотого */
.side { --side: #1f3d2b; background: var(--side); border-right: 0; color: #d7e2da; }
.side .logo-sx, .side .brand strong { color: #ffffff; }
.side .crm-tag { background: rgba(255, 255, 255, .14); color: #e8efe9; }
.side .navgroup { color: #9db3a4; }
.side .nav a, .side .nav button { color: #d7e2da; }
.side .nav a:hover, .side .nav button:hover { background: rgba(255, 255, 255, .08); color: #ffffff; }
.side .nav a[aria-current=page] { background: #eef1ef; color: #14201a; }
.side .nav a[aria-current=page] svg { stroke: #2e8b57; }
.side .subnav { border-left-color: rgba(255, 255, 255, .18); }
.side .nav .subnav a { color: #b9c9be; }
.side .nav .subnav a:hover { color: #ffffff; background: none; }
.side .nav .subnav a[aria-current=true] { color: #ffffff; }
.side .nav .subnav a[aria-current=true]::before { background: #eef1ef; }
.side .nav .count { background: #eef1ef; color: #14201a; }
.side .nav .count.n { background: rgba(255, 255, 255, .16); color: #ffffff; }
.side .bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.side :focus-visible { outline-color: #eef1ef; }
.side .brand { border-bottom-color: rgba(255, 255, 255, .12); }
.side .logo-sx img { background: #eef1ef; border-radius: 8px; padding: 3px; }
.more-sheet .nav a[aria-current=page] { background: var(--accent-tint); }