/* ============================================================
   Гостиничные технологии — Design System (single file for Status app)
   Токены: цвета, типографика, отступы, база + общие компоненты.
   Источник: design_handoff_status_app (tokens/*.css)
   ============================================================ */

@font-face {
  font-family: "Grandis";
  src: url("fonts/Grandis-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Grandis";
  src: url("fonts/Grandis-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/Onest-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Brand teal scale */
  --teal-50:#ecf6f9; --teal-100:#cfe9ef; --teal-200:#a3d4df; --teal-300:#6cb6c8;
  --teal-400:#3d96ad; --teal-500:#147d97; --teal-600:#116a80; --teal-700:#0e5468;
  --teal-800:#0c4453; --teal-900:#0a3743;
  /* Accent turquoise */
  --turquoise-100:#eafafc; --turquoise-200:#d6f4f8; --turquoise-300:#beecf2;
  --turquoise-400:#97dde6; --turquoise-500:#6cccd9;
  /* Neutral / ink */
  --neutral-0:#ffffff; --neutral-25:#fafbfc; --neutral-50:#f4f6f7; --neutral-100:#e9edef;
  --neutral-200:#d7dde0; --neutral-300:#b9c2c6; --neutral-400:#8d999e; --neutral-500:#677378;
  --neutral-600:#4f595d; --neutral-700:#474747; --neutral-800:#2e2e2e; --neutral-900:#1a1c1d;
  /* Semantic */
  --success-bg:#e6f5ec; --success:#1e8a51; --success-fg:#0f5e35;
  --warning-bg:#fbf1dd; --warning:#c98a14; --warning-fg:#7a530a;
  --danger-bg:#fbe9e9; --danger:#c5362f; --danger-fg:#8a221d;
  --info-bg:var(--turquoise-200); --info:var(--teal-500); --info-fg:var(--teal-700);
  /* Aliases */
  --brand:var(--teal-500); --brand-hover:var(--teal-600); --brand-active:var(--teal-700);
  --brand-subtle:var(--teal-50); --brand-accent:var(--turquoise-300);
  --surface-page:var(--neutral-25); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-50);
  --surface-inverse:var(--teal-800); --surface-brand:var(--teal-500);
  --text-strong:var(--neutral-900); --text-body:var(--neutral-700); --text-muted:var(--neutral-500);
  --text-disabled:var(--neutral-400); --text-on-brand:var(--neutral-0); --text-on-inverse:var(--turquoise-300);
  --text-link:var(--teal-600);
  --border-subtle:var(--neutral-100); --border-default:var(--neutral-200); --border-strong:var(--neutral-300);
  --border-brand:var(--teal-500); --focus-ring:var(--teal-400);
  /* Typography */
  --font-display:"Grandis","Onest",system-ui,-apple-system,sans-serif;
  --font-body:"Onest","Grandis",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fw-regular:400; --fw-medium:500;
  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-md:16px; --text-lg:18px;
  --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:38px; --text-5xl:48px;
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tighter:-0.02em; --ls-tight:-0.01em; --ls-normal:0em; --ls-wide:0.02em; --ls-wider:0.06em;
  /* Spacing / radius / shadow / motion */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:14px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(10,55,67,.06);
  --shadow-sm:0 1px 3px rgba(10,55,67,.08),0 1px 2px rgba(10,55,67,.05);
  --shadow-md:0 4px 12px rgba(10,55,67,.08),0 2px 4px rgba(10,55,67,.05);
  --shadow-lg:0 12px 28px rgba(10,55,67,.10),0 4px 10px rgba(10,55,67,.06);
  --shadow-focus:0 0 0 3px rgba(61,150,173,.35);
  --ease-standard:cubic-bezier(.2,0,.1,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;

  /* Палитра статусов: тройка bg/border/fg на каждый, контраст fg ≥ 6:1 */
  --s-ready-bg:#e6f5ec; --s-ready-bd:#a9d8bd; --s-ready-fg:#12693e; --s-ready:#1e8a51;
  --s-lunch-bg:#fbf1dd; --s-lunch-bd:#eccf95; --s-lunch-fg:#7a530a; --s-lunch:#c98a14;
  --s-smoke-bg:#fdeee2; --s-smoke-bd:#f2c6a1; --s-smoke-fg:#8a4410; --s-smoke:#d4700f;
  --s-task-bg:#ececf9; --s-task-bd:#c1c1ed; --s-task-fg:#3b3a8f; --s-task:#4d4cb5;
  --s-conn-bg:var(--brand-subtle); --s-conn-bd:var(--turquoise-300); --s-conn-fg:var(--teal-800); --s-conn:var(--brand);
  --s-off-bg:var(--neutral-50); --s-off-bd:var(--border-default); --s-off-fg:var(--neutral-500); --s-off:var(--neutral-400);
}

/* ---- База ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { margin:0; font-family:var(--font-body); font-weight:var(--fw-regular); font-size:var(--text-md);
  line-height:var(--lh-relaxed); color:var(--text-body); background:var(--surface-page); }
h1,h2,h3,h4,h5,h6 { margin:0; font-family:var(--font-display); font-weight:var(--fw-medium);
  line-height:var(--lh-snug); letter-spacing:var(--ls-tight); color:var(--text-strong); }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-standard); }
a:hover { color:var(--brand-active); }
strong,b { font-weight:var(--fw-medium); }
button { font-family:inherit; }
::selection { background:var(--turquoise-300); color:var(--teal-900); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---- Навигация (компактная, без хрома портала) ---- */
.nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:22px; height:50px;
  padding:0 22px; background:var(--surface-card); border-bottom:1px solid var(--border-default); }
.nav .brand { font-family:var(--font-display); font-weight:500; font-size:14.5px; letter-spacing:-0.005em; color:var(--text-strong); }
.nav .lnk { font-size:13.5px; color:var(--text-muted); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.nav .lnk:hover { color:var(--text-body); }
.nav .lnk.on { color:var(--text-strong); border-bottom-color:var(--brand); font-family:var(--font-display); font-weight:500; }
.nav .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav .who { font-size:13.5px; color:var(--text-body); }
@media (max-width:700px){ .nav{gap:14px;padding:0 14px} .nav .lnk{display:none} .nav .who{display:none} }

/* ---- Карточка ---- */
.card { background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); }

/* ---- Заголовок зоны ---- */
.zone-h { display:flex; align-items:baseline; gap:9px; margin:0 0 8px; flex:none; }
.zone-h h2 { font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-muted); margin:0; }
.zone-h .n { font-size:11px; color:var(--text-disabled); font-variant-numeric:tabular-nums; }
.zone-h .aff { margin-left:auto; font-size:11px; color:var(--text-disabled); }

/* ---- Кнопки ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 16px; border-radius:var(--radius-md); border:1px solid transparent;
  font-family:var(--font-display); font-weight:500; font-size:14px; line-height:1; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  text-decoration:none; white-space:nowrap; }
.btn:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.btn-primary { background:var(--brand); color:var(--text-on-brand); }
.btn-primary:hover { background:var(--brand-hover); color:var(--text-on-brand); }
.btn-primary:active { background:var(--brand-active); }
.btn-secondary { background:var(--surface-card); color:var(--text-body); border-color:var(--border-default); }
.btn-secondary:hover { border-color:var(--border-strong); color:var(--text-strong); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#a92c26; color:#fff; }
.btn-sm { height:29px; padding:0 11px; font-size:12.5px; border-radius:var(--radius-sm); }
.btn-lg { height:44px; padding:0 20px; font-size:15px; }
.btn-full { width:100%; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* ---- Бейдж ---- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:2.5px 8px;
  border-radius:var(--radius-sm); border:1px solid var(--border-default);
  font-family:var(--font-display); font-weight:500; font-size:11.5px; line-height:1.3;
  background:var(--surface-sunken); color:var(--text-body); white-space:nowrap; }
.badge .dot { width:6px; height:6px; border-radius:50%; flex:none; background:currentColor; }
.badge-success { background:var(--success-bg); border-color:#a9d8bd; color:var(--success-fg); }
.badge-neutral { background:var(--surface-sunken); border-color:var(--border-default); color:var(--text-muted); }
.badge-sm { padding:1.5px 6px; font-size:10.5px; }
/* чип статуса: тон задаётся через data-tone */
.badge[data-tone="ready"] { background:var(--s-ready-bg); border-color:var(--s-ready-bd); color:var(--s-ready-fg); }
.badge[data-tone="lunch"] { background:var(--s-lunch-bg); border-color:var(--s-lunch-bd); color:var(--s-lunch-fg); }
.badge[data-tone="smoke"] { background:var(--s-smoke-bg); border-color:var(--s-smoke-bd); color:var(--s-smoke-fg); }
.badge[data-tone="task"] { background:var(--s-task-bg); border-color:var(--s-task-bd); color:var(--s-task-fg); }
.badge[data-tone="conn"] { background:var(--s-conn-bg); border-color:var(--s-conn-bd); color:var(--s-conn-fg); }
.badge[data-tone="off"] { background:var(--s-off-bg); border-color:var(--s-off-bd); color:var(--s-off-fg); }
.badge[data-tone] .dot { background:var(--tone-dot, currentColor); }
.badge[data-tone="ready"] .dot { background:var(--s-ready); }
.badge[data-tone="lunch"] .dot { background:var(--s-lunch); }
.badge[data-tone="smoke"] .dot { background:var(--s-smoke); }
.badge[data-tone="task"] .dot { background:var(--s-task); }
.badge[data-tone="conn"] .dot { background:var(--s-conn); }
.badge[data-tone="off"] .dot { background:var(--s-off); }

/* ---- Аватар (инициалы) ---- */
.avatar { display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:50%; background:var(--neutral-50);
  border:1px solid var(--border-default); color:var(--text-muted);
  font-family:var(--font-display); font-weight:500; font-size:10.5px; letter-spacing:.02em; }

/* ---- Алерт ---- */
.alert { display:flex; gap:9px; align-items:flex-start; padding:10px 13px;
  border-radius:var(--radius-md); border:1px solid; font-size:13px; line-height:1.45; }
.alert-warning { background:var(--warning-bg); border-color:#e0bd77; color:var(--warning-fg); }
.alert-danger { background:var(--danger-bg); border-color:#e5a5a1; color:var(--danger-fg); }
.alert-success { background:var(--success-bg); border-color:#a9d8bd; color:var(--success-fg); }
.alert-info { background:var(--info-bg); border-color:var(--turquoise-400); color:var(--info-fg); }

/* ---- Поле ввода ---- */
.input { display:block; width:100%; height:38px; padding:0 12px;
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--surface-card); color:var(--text-strong);
  font-family:var(--font-body); font-size:14px; }
.input::placeholder { color:var(--text-disabled); }
.input:focus { outline:none; border-color:var(--brand); box-shadow:var(--shadow-focus); }
.input.err { border-color:var(--danger); }
.input-error { font-size:12px; color:var(--danger-fg); margin-top:5px; }

/* ---- Флеш-сообщения ---- */
.flashes { position:fixed; top:58px; right:16px; z-index:1400; display:flex;
  flex-direction:column; gap:8px; max-width:420px; }
.flashes .alert { box-shadow:var(--shadow-md); background-clip:padding-box; }

/* ─── RustDesk: подключение и выбор клиента для устройства ─────────────────── */
/* чип подключения всегда идёт отдельной строкой под чипом статуса */
.rd-chip{display:flex;align-items:center;gap:6px;max-width:100%;margin-top:3px;font-size:11.5px;color:var(--s-task-fg,var(--text-body))}
.rd-chip svg{flex:none;opacity:.85}
.rd-chip .dev{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);white-space:nowrap}
.rd-chip .co{color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-chip .sla{flex:none;font-size:10px;padding:1px 5px;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--text-muted)}
.rd-holder{position:relative}
.rd-link{border:1px dashed var(--border-strong,var(--border-default));background:none;border-radius:var(--radius-sm);
  padding:1px 7px;font-size:11px;font-family:var(--font-display);font-weight:500;color:var(--teal-700);cursor:pointer;white-space:nowrap}
.rd-link:hover{background:var(--surface-sunken);color:var(--brand-active)}
.rd-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:320px;max-width:80vw;background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.14));padding:10px;text-align:left;cursor:default}
.rd-pop .rd-hd{font-size:11.5px;color:var(--text-muted);margin-bottom:7px}
.rd-pop .rd-hd b{font-family:var(--font-mono);font-weight:400;color:var(--text-strong)}
.rd-pop .rd-q{width:100%;margin-bottom:7px}
.rd-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column}
.rd-it{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:6px 7px;border-radius:var(--radius-sm);font-size:12.5px;color:var(--text-body)}
.rd-it:hover{background:var(--surface-sunken);color:var(--text-strong)}
.rd-it .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-it .sla{flex:none;font-size:10px;color:var(--text-muted)}
.rd-empty{padding:12px 6px;font-size:12px;color:var(--text-muted);text-align:center}