/* Парк машин — PWA, стиль PWRBOX UI-kit (светлый) */

:root {
  --bg:#ececec; --card:#ffffff; --sub:#f3f3f5; --line:#e4e4e7;
  --txt:#1b1b1f; --dim:#8b8b90;
  --accent:#ffdc60; --accent-press:#f0cd4a; --accent-dim:rgba(255,220,96,.45);
  --teal:#00a19b; --ok:#34c759; --warn:#ff9f0a; --bad:#ff5c5c;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --shadow-lg:0 16px 48px rgba(0,0,0,.22);
}

* { box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--txt);
       font:400 15px/1.45 -apple-system,system-ui,sans-serif;
       font-variant-numeric:tabular-nums; }
button { font-family:inherit; }
:focus-visible { outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.hidden { display:none !important; }

/* ---------- шапка ---------- */
header { position:sticky; top:0; z-index:5; background:var(--card);
         padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
         border-bottom:1px solid var(--line);
         box-shadow:0 1px 6px rgba(0,0,0,.04); }
.brand { display:flex; align-items:center; gap:10px; }
.brand h1 { font-size:19px; font-weight:700; display:flex; align-items:center; gap:8px; }
.brand h1::before { content:""; width:11px; height:11px; border-radius:4px;
                    background:var(--accent); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.sub { color:var(--dim); font-size:12px; margin-top:1px; }
.logo { width:34px; height:34px; color:var(--txt); flex:none; }
.logo svg { width:100%; height:100%; }
.logo.big { width:52px; height:52px; margin:0 auto 10px; }
.hdr-right { display:flex; align-items:center; gap:8px; margin-top:8px; justify-content:flex-end; }
.user-chip { font-size:13px; font-weight:700; background:var(--sub); color:var(--txt);
             border-radius:10px; padding:7px 11px; }
.demo { font-size:10.5px; font-weight:800; color:var(--dim); border:1.5px solid var(--line);
        border-radius:999px; padding:2px 8px; text-transform:uppercase; letter-spacing:.05em; }

/* кнопки шапки */
#btn-notif, #btn-logout, #btn-archive, .icon-btn { flex:none; min-width:36px; height:36px;
        border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--dim);
        display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0 8px; }
#btn-notif svg, #btn-logout svg, #btn-archive svg, .icon-btn svg { width:19px; height:19px; }
#btn-notif:active, #btn-logout:active, #btn-archive:active, .icon-btn:active { background:var(--accent-dim); color:var(--txt); }
.icon-btn.danger { color:var(--bad); }

/* табы */
.tabs { display:flex; gap:6px; margin-top:10px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:1; border:none; border-radius:12px; padding:9px 6px; font-size:13px; font-weight:700;
       background:var(--card); color:var(--dim); cursor:pointer; box-shadow:var(--shadow);
       display:flex; flex-direction:column; align-items:center; gap:3px; white-space:nowrap; }
.tab svg { width:20px; height:20px; }
.tab.active { background:var(--accent); color:var(--txt); }
.tab span { font-size:11px; }

/* поиск */
#search-wrap { display:flex; gap:8px; margin-top:10px; }
#search { flex:1; background:var(--sub); border:none; border-radius:12px; padding:10px 14px;
          font-size:14px; color:var(--txt); }
#search::placeholder { color:var(--dim); }

/* ---------- контент ---------- */
main { max-width:760px; margin:0 auto; padding:0 16px 48px; }
.sec-title { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
             color:var(--dim); margin:22px 2px 8px; }
.badge { display:inline-block; min-width:20px; text-align:center; font-size:11.5px; font-weight:800;
         background:var(--accent); color:var(--txt); border-radius:999px; padding:1px 7px;
         text-transform:none; letter-spacing:0; vertical-align:2px; }

/* карточки */
.card, .panel { background:var(--card); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow); }
.card + .card, .panel + .panel { margin-top:8px; }
.card.click { cursor:pointer; }
.card-top { display:flex; align-items:center; gap:8px; }
.card .name { font-size:15px; font-weight:700; }
.card .ip { font-size:13px; color:var(--dim); font-weight:600; }
.card .label { font-size:12px; color:var(--dim); margin-top:6px; }
.spacer { flex:1; }
.state { font-size:12px; color:var(--dim); font-weight:600; }
.empty { color:var(--dim); font-size:13.5px; padding:14px 4px; }
.err { color:var(--bad); font-size:13px; margin-top:8px; }

/* статус-точка и теги */
.dot { flex:none; width:10px; height:10px; border-radius:50%; background:#c8c8cd; }
.dot.on { background:var(--ok); box-shadow:0 0 0 3px rgba(52,199,89,.18); }
.dot.off { background:#c8c8cd; }
.tag { font-size:12px; font-weight:700; border-radius:10px; padding:4px 10px; background:var(--sub); color:var(--dim); }
.tag.active { color:#1d9e4b; background:#e5f8ec; }
.tag.role-admin { color:#8a6d00; background:#fff3bf; }
.tag.role-technician { color:var(--teal); background:#d9f3f2; }

/* блокировки/сбросы в списке машин */
.card.blocked { border-left:4px solid var(--warn); }
.card.reset { border-left:4px solid var(--teal); }
.card.archived { opacity:.55; }
.blocked-note, .reset-note { font-size:12px; font-weight:700; margin-top:6px; }
.blocked-note { color:var(--warn); }
.reset-note { color:var(--teal); }

/* ---------- кнопки ---------- */
button:not(.tab):not(.icon-btn):not(#btn-notif):not(#btn-logout):not(#btn-archive):not(.mtab):not(.fav-btn):not(.titem):not(.dchips button) {
  border:none; border-radius:12px; padding:11px 16px; font-size:14px; font-weight:700;
  background:var(--accent); color:var(--txt); cursor:pointer; }
button:not(:disabled):active { background:var(--accent-press); }
button.ghost { background:var(--sub); color:var(--txt); }
button.ghost:active { background:var(--accent-dim); }
.form-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.form-row:first-child { margin-top:0; }
.panel input, .panel select, input[type="text"], input[type="password"], input[type="search"], select {
  background:var(--sub); border:none; border-radius:12px; padding:10px 12px; font-size:14px;
  color:var(--txt); }
.panel input { flex:1; min-width:120px; }
.btn-dl { display:block; text-align:center; text-decoration:none; padding:13px; border-radius:14px;
          background:var(--accent); color:var(--txt); font-size:15px; font-weight:700; }
.mir-hint { font-size:12.5px; color:var(--dim); margin-top:8px; line-height:1.5; }

/* ---------- логин ---------- */
.login { max-width:400px; margin:48px auto 0; }
.login-box { background:var(--card); border-radius:18px; padding:22px; box-shadow:var(--shadow);
             display:flex; flex-direction:column; gap:10px; }
.login-box h2 { font-size:18px; text-align:center; margin-bottom:4px; }
.login-box input { background:var(--sub); border:none; border-radius:12px; padding:12px 14px; font-size:15px; }
#btn-login { width:100%; padding:13px; font-size:15px; }

/* ---------- модалка ---------- */
.modal { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45);
         display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-card { background:var(--card); border-radius:18px; box-shadow:var(--shadow-lg);
              max-width:520px; width:100%; max-height:86vh; overflow:auto; padding:18px; }
.modal-title { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.modal-title h3 { font-size:17px; font-weight:700; }
.actions { display:flex; gap:8px; margin-top:12px; }
.actions button { flex:1; }
.conf-text { width:100%; height:220px; background:var(--sub); border:none; border-radius:12px;
             padding:12px; font:12px/1.5 ui-monospace,monospace; color:var(--txt); resize:vertical; }

/* ---------- страница машины ---------- */
.mhead { display:flex; align-items:center; gap:10px; margin:18px 0 10px; }
.mhead h3 { font-size:19px; font-weight:700; }
.mtab, .mtabs { display:flex; gap:6px; }
.mtabs { margin-bottom:12px; }
.mtab { flex:1; border:none; border-radius:12px; padding:10px; font-size:14px; font-weight:700;
        background:var(--card); color:var(--dim); cursor:pointer; box-shadow:var(--shadow); }
.mtab.active { background:var(--accent); color:var(--txt); }
#mtab-info .kv-row, .kv-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.kv { min-width:90px; }
.kv .k { font-size:11px; color:var(--dim); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.kv .v { font-size:16.5px; font-weight:800; margin-top:1px; word-break:break-all; }
.lv { display:flex; gap:10px; align-items:baseline; }
.lv .big { font-size:30px; font-weight:800; letter-spacing:-.02em; }
.lv .unit { font-size:14px; color:var(--dim); font-weight:700; }
.fav-btn.fav-on svg, .fav-btn.on svg { fill:var(--accent); stroke:var(--accent); }

/* инструменты машины */
.tgroup { margin-top:14px; }
.tgroup-title, .pgroup-title { font-size:13px; font-weight:800; text-transform:uppercase;
                               letter-spacing:.06em; color:var(--dim); margin:0 2px 8px; }
.titem { width:100%; display:flex; align-items:center; gap:12px; background:var(--card);
         border:none; border-radius:18px; padding:14px 16px; box-shadow:var(--shadow);
         cursor:pointer; text-align:left; color:var(--txt); font-size:15px; font-weight:600; }
.titem + .titem { margin-top:8px; }
.titem:active { background:var(--accent-dim); }
.ticon { width:38px; height:38px; border-radius:12px; background:var(--sub); color:var(--txt);
         display:flex; align-items:center; justify-content:center; flex:none; }
.ticon svg { width:20px; height:20px; }
.ttitle { flex:1; }
.tsub { display:block; font-size:12px; color:var(--dim); font-weight:400; margin-top:1px; }
.tbody { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:13px; }
svg.fav-ico { width:18px; height:18px; flex:none; fill:var(--accent); stroke:var(--accent-press); }
.fav-btn svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; }
button svg { max-width:22px; max-height:22px; }

/* предупреждения-холды */
.warn-hold, .danger-hold { display:flex; gap:10px; align-items:center; background:#fff7e8;
  border-radius:14px; padding:12px 14px; margin-top:10px; font-size:13.5px; color:#8a5a00; }
.danger-hold { background:#ffe9e9; color:#c03434; }
.warn-hold svg, .danger-hold svg { width:20px; height:20px; flex:none; }
.hold { position:relative; overflow:hidden; border-radius:12px; background:var(--sub); flex:1; }
.hold-fill { position:absolute; inset:0; background:var(--accent-dim); width:0; }
.hold button { position:relative; width:100%; background:transparent; }

/* ---------- зеркало ---------- */
.mir-head { display:flex; align-items:center; gap:8px; }
.mir-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.mir-item:first-child { border-top:none; }
.mir-owner { font-size:12px; color:var(--dim); }
.mir-params { font-size:13px; font-weight:600; }
.mir-actions { display:flex; gap:6px; margin-left:auto; }
.mir-actions button { padding:7px 12px; font-size:13px; }
.mir-hub { display:flex; gap:10px; align-items:center; }
.mir-casc { font-size:12px; color:var(--dim); }
.sm-empty { color:var(--dim); font-size:13px; padding:8px 4px; }

/* lan-панель */
.lan-panel { background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:14px 16px; }
.lan-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.lan-row:first-child { border-top:none; }
.lan-status { font-size:12px; font-weight:700; border-radius:10px; padding:4px 10px; }
.lan-status.on { color:#1d9e4b; background:#e5f8ec; }
.lan-status.off { color:#e04444; background:#ffe9e9; }

/* ---------- LAN-view ---------- */
#view-lan { position:fixed; inset:0; z-index:50; background:var(--bg);
            display:flex; flex-direction:column; }
.lhead { display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
         background:var(--card); border-bottom:1px solid var(--line); }
.ltitle { flex:1; min-width:0; display:flex; flex-direction:column; }
#l-target { font-weight:700; font-size:15px; }
#l-note { color:var(--dim); font-size:12px; }
#l-frame { flex:1; border:none; width:100%; background:#fff; }

/* ---------- ESP ---------- */
.esp-token { font-family:ui-monospace,monospace; font-size:1.05em; background:var(--sub);
             padding:.4em .7em; border-radius:10px; word-break:break-all; }

/* lock-ico */
.lock-ico { width:16px; height:16px; color:var(--dim); }

@media (min-width:761px) {
  .tab { flex-direction:row; gap:6px; padding:10px 14px; }
  .tab span { font-size:13px; }
}