/* Темы. Переключатель в шапке, выбор хранится в localStorage.
   Серо-чёрная осталась, но она больше не единственная и не по умолчанию. */
:root, [data-theme="slate"]{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d2129; --line:#2a2f3a; --head:#12151b;
  --text:#e6e9ef; --dim:#98a1b0; --accent:#4d9fff; --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --chip:#232833;
}
[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f0f3f7; --line:#dde3ea; --head:#ffffff;
  --text:#18202b; --dim:#5d6a7a; --accent:#0b6bcb; --ok:#1a7f37; --warn:#9a6700; --bad:#c0362c;
  --chip:#eef2f7;
}
[data-theme="ocean"]{
  --bg:#0b1f2a; --panel:#0f2b39; --panel2:#134152; --line:#1c4d61; --head:#0a1c26;
  --text:#e3f2f8; --dim:#8fb6c6; --accent:#37c2e0; --ok:#3ecf8e; --warn:#e8b04b; --bad:#ff7a6b;
  --chip:#123c4d;
}
[data-theme="sand"]{
  --bg:#f6f1e7; --panel:#fffdf8; --panel2:#f1ead9; --line:#e0d6c2; --head:#fffdf8;
  --text:#2b2519; --dim:#7a6d57; --accent:#b25c1e; --ok:#4d7c2f; --warn:#a97400; --bad:#b3402d;
  --chip:#efe6d4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header{position:sticky;top:0;z-index:20;background:var(--head);border-bottom:1px solid var(--line);
  padding:9px 14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.3px;white-space:nowrap}
header nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
header nav a{color:var(--dim);font-size:14px;padding:5px 10px;border-radius:6px}
header nav a.on{color:var(--text);background:var(--panel2)}
.themes{display:flex;gap:5px}
.themes button{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0}
.t-slate{background:#171a21}.t-light{background:#f0f3f7}.t-ocean{background:#134152}.t-sand{background:#e8dcc2}

main{padding:16px;max-width:1500px;margin:0 auto}
h1{font-size:21px;margin:0 0 4px}
h2{font-size:13px;margin:22px 0 9px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px}
.sub{color:var(--dim);font-size:14px;margin-bottom:14px}
.cards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  min-width:104px;flex:1 1 104px}
.card .n{font-size:22px;font-weight:700}
.card .l{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.5px}

table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);
  padding:9px 10px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
th a{color:var(--dim)}
th a.on{color:var(--accent)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--panel2)}
.num{text-align:right;font-variant-numeric:tabular-nums}

.pill{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;
  border:1px solid var(--line);color:var(--dim);background:var(--chip);white-space:nowrap}
.pill.urgent{color:#ff9d94;border-color:#7d3a33}
.pill.soon{color:#e5b567;border-color:#7a5c1e}
.pill.ok,.pill.done{color:var(--ok);border-color:var(--ok)}
.pill.open{color:var(--warn);border-color:var(--warn)}
.pill.src-owner{color:#7bd3ff;border-color:#2f6f92}
.pill.src-automation{color:#ff9d94;border-color:#7d3a33}
.pill.src-schedule{color:#c2a6ff;border-color:#5b4a8c}
.pill.src-inspection{color:#8ee79b;border-color:#2f6b3c}
.muted{color:var(--dim)}
.small{font-size:13px}
.mark{border-left:3px solid var(--ok);padding-left:9px}
.strike{text-decoration:line-through;color:var(--dim)}

button,.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:7px;
  padding:6px 11px;font-size:13px;cursor:pointer;display:inline-block}
button:hover,.btn:hover{border-color:var(--accent);text-decoration:none}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:7px;padding:7px 10px;font:inherit;max-width:100%}
input[type=file]{padding:4px}
form.inline{display:inline}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tabs{display:flex;gap:6px;margin:14px 0 8px;flex-wrap:wrap}
.tabs a{padding:6px 12px;border-radius:7px;background:var(--panel);border:1px solid var(--line);color:var(--dim)}
.tabs a.on{color:var(--text);border-color:var(--accent)}

.board{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px}
.col{min-width:230px;flex:1 0 230px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:9px}
.col.drop{outline:2px dashed var(--accent);outline-offset:-4px}
.col h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}
.job{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 9px;
  margin-bottom:7px;cursor:grab}
.job.dragging{opacity:.45}
.job .b{font-size:12px;color:var(--dim);margin-top:4px;display:flex;gap:5px;flex-wrap:wrap}

.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;min-height:130px}
.day.today{border-color:var(--accent)}
.day.drop{outline:2px dashed var(--accent);outline-offset:-4px}
.day h4{margin:0 0 7px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.slot{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 7px;
  margin-bottom:6px;font-size:13px;cursor:grab}
.blackout{background:var(--chip);border:1px dashed var(--bad);color:var(--bad);
  border-radius:7px;padding:5px 7px;margin-bottom:6px;font-size:12px}
.pool{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pool .job{min-width:220px;max-width:280px;margin:0}

.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.report{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:none}
.item .no{width:26px;color:var(--dim);font-variant-numeric:tabular-nums}
.item .body{flex:1;min-width:0}
.item .acts{display:flex;gap:5px;flex-wrap:wrap}

.insp-item{border-bottom:1px solid var(--line);padding:10px 0}
.insp-item:last-child{border-bottom:none}
.insp-head{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.insp-q{flex:1;min-width:180px}
.states{display:flex;gap:6px;flex-wrap:wrap}
.states label{padding:5px 11px;border:1px solid var(--line);border-radius:7px;cursor:pointer;
  font-size:13px;background:var(--panel2);user-select:none}
.states input{display:none}
.states input:checked + span{font-weight:700}
.states label:has(input[value="ok"]:checked){border-color:var(--ok);color:var(--ok)}
.states label:has(input[value="attention"]:checked){border-color:var(--warn);color:var(--warn)}
.states label:has(input[value="defect"]:checked){border-color:var(--bad);color:var(--bad)}
.states label:has(input[value="na"]:checked){border-color:var(--dim);color:var(--dim)}
.extra{margin-top:8px;display:none;gap:8px;flex-wrap:wrap}
.extra.show{display:flex}
.extra input[type=text]{flex:1;min-width:200px}
.sticky-actions{position:sticky;bottom:0;background:var(--head);border-top:1px solid var(--line);
  padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;z-index:15}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

footer{color:var(--dim);font-size:12px;padding:22px 14px;text-align:center}

/* Планшет и телефон: работа в поле. Таблицы превращаются в карточки. */
@media(max-width:1000px){ .grid2{grid-template-columns:1fr} .week{grid-template-columns:repeat(2,1fr)} }
@media(max-width:720px){
  main{padding:12px}
  h1{font-size:19px}
  .week{grid-template-columns:1fr}
  table.responsive thead{display:none}
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}
  table.responsive tr{border-bottom:1px solid var(--line);padding:8px 4px}
  table.responsive tr:last-child{border-bottom:none}
  table.responsive td{border:none;padding:3px 8px}
  table.responsive td[data-l]:before{content:attr(data-l) " ";color:var(--dim);font-size:12px;
    text-transform:uppercase;letter-spacing:.4px}
  .card{flex:1 1 44%}
  .states label{padding:9px 14px;font-size:14px}   /* пальцем, а не мышью */
  button,.btn{padding:9px 14px}
}

/* Полоса помощника. Не чат сбоку, а строка ввода на каждом экране: одно действие за заход. */
.askbar{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:47px;z-index:9}
.askbar input[name=text]{flex:1;min-width:120px;padding:10px 12px;font-size:15px}
.askbar #mic{font-size:16px;padding:8px 12px}
.askbar #mic.rec{border-color:var(--bad);color:var(--bad)}
@media(max-width:720px){ .askbar{top:auto;position:static} }