/*
 * Общий стиль веб-страниц сервера «Охрана рядом» — тот же, что у приложений: шрифт Golos Text, цвета темы
 * (ui/theme/Theme.kt), мягкие серые блоки, чёрные кнопки, скругления. Светлая и тёмная тема — по системе
 * или вручную (data-theme на <html>).
 */
@font-face {
  font-family: "Golos Text";
  src: url("/assets/golos.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #FFFFFF;
  --text: #111418;
  --muted: #6B7280;
  --s1: #F7F8FA;
  --s2: #F0F2F5;
  --s3: #E8EAEE;
  --s4: #E0E3E8;
  --outline: #D3D7DC;
  --line: #E8EAEE;
  --primary: #111418;
  --on-primary: #FFFFFF;
  --blue: #2F5BD3;
  --blue-bg: #E6EDFC;
  --green: #16A34A;
  --green-bg: #E3F6EA;
  --red: #E5484D;
  --red-bg: #FDECEC;
  --amber: #B45309;
  --amber-bg: #FEF3C7;
  --star: #F5A524;
  --inverse: #111418;
  --on-inverse: #F2F4F7;
  --scrim: rgba(11, 13, 16, .42);
  --shadow: 0 1px 2px rgba(17, 20, 24, .05), 0 12px 32px rgba(17, 20, 24, .08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0D10; --text: #F2F4F7; --muted: #9AA1AC;
    --s1: #121418; --s2: #17191D; --s3: #202328; --s4: #292D33;
    --outline: #3A3E45; --line: #22252A; --primary: #F2F4F7; --on-primary: #0B0D10;
    --blue: #86A8F5; --blue-bg: #1B2846; --green: #3DD27A; --green-bg: #123323;
    --red: #FF6B6F; --red-bg: #3A1416; --amber: #F0B355; --amber-bg: #3A2A10;
    --inverse: #F2F4F7; --on-inverse: #0B0D10; --scrim: rgba(0, 0, 0, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0D10; --text: #F2F4F7; --muted: #9AA1AC;
  --s1: #121418; --s2: #17191D; --s3: #202328; --s4: #292D33;
  --outline: #3A3E45; --line: #22252A; --primary: #F2F4F7; --on-primary: #0B0D10;
  --blue: #86A8F5; --blue-bg: #1B2846; --green: #3DD27A; --green-bg: #123323;
  --red: #FF6B6F; --red-bg: #3A1416; --amber: #F0B355; --amber-bg: #3A2A10;
  --inverse: #F2F4F7; --on-inverse: #0B0D10; --scrim: rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }

/* Знак: щит с круглым окном, как на значке приложения */
.logo { width: 36px; height: 36px; border-radius: 11px; background: var(--primary); display: grid; place-items: center; flex: none; }
.logo svg { width: 22px; height: 22px; fill: var(--on-primary); }

/* Атрибут hidden прячет всегда: иначе display у .btn и других классов перебивает его (кнопка «пряталась», но была видна) */
[hidden] { display: none !important; }

/* Кнопки — как в приложениях: главная чёрная, вторая серая, тихая — текстом */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
  background: var(--primary); color: var(--on-primary); transition: transform .08s ease, opacity .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; opacity: .92; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.secondary { background: var(--s2); color: var(--text); }
.btn.secondary:hover { background: var(--s3); opacity: 1; }
.btn.quiet { background: transparent; color: var(--text); padding: 0 10px; }
.btn.quiet:hover { background: var(--s2); opacity: 1; }
.btn.danger { background: transparent; color: var(--red); }
.btn.danger:hover { background: var(--red-bg); opacity: 1; }
.btn.small { min-height: 36px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.btn.wide { width: 100%; }

/* Блоки и поля */
.block { background: var(--s2); border-radius: 20px; padding: 18px 20px; }
.field {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid transparent; border-radius: 14px;
  background: var(--s2); color: var(--text); font: inherit; outline: none; transition: border-color .15s ease, background .15s ease;
}
.field:focus { border-color: var(--outline); background: var(--bg); }
.field::placeholder { color: var(--muted); }
textarea.field { min-height: 88px; resize: vertical; }
label.lbl { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 2px; }

/* Метки состояния — как Tag в приложении */
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 9px;
  font-size: 13px; font-weight: 550; background: var(--s3); color: var(--text); white-space: nowrap;
}
.tag.green { background: var(--green-bg); color: var(--green); }
.tag.red { background: var(--red-bg); color: var(--red); }
.tag.amber { background: var(--amber-bg); color: var(--amber); }
.tag.blue { background: var(--blue-bg); color: var(--blue); }

/* Выбор — как Choice в приложении */
.chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; border: 0;
  background: var(--s2); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--s3); }
.chip.on { background: var(--primary); color: var(--on-primary); }

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }