/* ITCC shared styles: colours as variables (light and dark follow the computer's setting), one size system
   (32 px controls, 20 px tags, 15 px text), tables, cards and the tool-tier badges R0 grey / R1 green / R2 amber / R3 red. */
:root { --bg:#f5f6f8; --card:#fff; --text:#1b1f24; --muted:#5b6470; --line:#e2e5ea; --ok:#1a7f37; --bad:#cf222e; --warn:#9a6700;
  --accent:#0969da; --accent-text:#fff; --hover:#eef1f5; --r0:#6e7781; --r1:#1a7f37; --r2:#bf8700; --r3:#cf222e; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1720; --card:#16212d; --text:#e6edf3; --muted:#9aa7b4; --line:#26323f; --ok:#3fb950;
  --bad:#f85149; --warn:#d29922; --accent:#2f81f7; --accent-text:#fff; --hover:#1c2a38; --r0:#8b949e; --r1:#3fb950; --r2:#d29922; --r3:#f85149; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); }
main { max-width:1200px; margin:auto; padding:20px 16px 40px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:15px; margin:22px 0 8px; color:var(--muted); }
p.sub, .muted { color:var(--muted); } p.sub { margin:0 0 16px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* top bar */
header.top { display:flex; align-items:center; gap:16px; padding:0 16px; height:48px; background:var(--card); border-bottom:1px solid var(--line); }
header.top .brand { font-weight:600; text-decoration:none; color:var(--text); }
header.top nav a { text-decoration:none; color:var(--muted); margin-right:12px; } header.top nav a.on { color:var(--text); font-weight:600; }
header.top .who { margin-left:auto; color:var(--muted); display:flex; gap:8px; align-items:center; }
header.top .brand { white-space:nowrap; }
header.top { height:auto; min-height:48px; flex-wrap:wrap; row-gap:0; }
header.top nav { flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; align-items:center; line-height:48px; }   /* wide screens: a long menu wraps */
header.top nav a { white-space:nowrap; }
header.top .who { white-space:nowrap; }

/* controls: one height everywhere */
button, .btn, input, select { height:32px; font:inherit; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--text); padding:0 12px; }
button, .btn { cursor:pointer; display:inline-flex; align-items:center; text-decoration:none; }
button:hover, .btn:hover { background:var(--hover); }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
button.danger { color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
input[type=checkbox] { height:auto; }
label { display:block; margin:10px 0 4px; color:var(--muted); }
.row-actions button { margin-right:6px; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 12px; }
.toolbar .grow { flex:1; }

/* tags and badges: 20 px */
.tag, .badge { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:10px; font-size:12px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.badge.pending { color:var(--warn); border-color:var(--warn); } .badge.active { color:var(--ok); border-color:var(--ok); }
.badge.blocked { color:var(--bad); border-color:var(--bad); } .badge.retired { color:var(--muted); }
.tier { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:4px; font-size:12px; font-weight:600; color:#fff; }
.tier.r0 { background:var(--r0); } .tier.r1 { background:var(--r1); } .tier.r2 { background:var(--r2); } .tier.r3 { background:var(--r3); }

/* catalogue item statuses (task 0.5) */
.badge.item-draft { color:var(--warn); border-color:var(--warn); } .badge.item-verified { color:var(--ok); border-color:var(--ok); font-weight:600; }
.badge.item-retired { color:var(--muted); }

/* job statuses (Succeeded = it ran, Verified = it was checked) and progress */
.badge.job-queued, .badge.job-leased { color:var(--muted); }
.badge.job-running { color:var(--accent); border-color:var(--accent); }
.badge.job-verified { color:var(--ok); border-color:var(--ok); font-weight:600; } .badge.job-succeeded { color:var(--ok); }
.badge.job-failed, .badge.job-verify_failed, .badge.job-interrupted { color:var(--bad); border-color:var(--bad); }
.badge.job-declined_by_user, .badge.job-expired, .badge.job-cancelled, .badge.job-rolled_back { color:var(--warn); }
.badge.job-awaiting_approval { color:var(--warn); border-color:var(--warn); } .badge.job-rejected { color:var(--bad); }

/* scheduled jobs and alert severities (task 1.5) */
.badge.job-scheduled { color:var(--accent); border-color:var(--accent); }
.badge.alert-crit { color:#fff; background:var(--bad); border-color:var(--bad); font-weight:600; } .badge.alert-warn { color:var(--warn); border-color:var(--warn); }
.badge.alert-info { color:var(--muted); }
.bulkbar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:8px 10px; margin:0 0 12px; background:var(--card); border:1px solid var(--accent); border-radius:10px; }
.dash { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:12px; }
.dash .card h2 { margin-top:0; display:flex; align-items:center; gap:8px; } .dash .num { font-size:22px; font-weight:600; }
.dash ul { margin:6px 0 0; padding-left:18px; } .dash li { margin:2px 0; }

/* approvals (task 1.4) and the pending count in the top bar */
.badge.ap-pending { color:var(--warn); border-color:var(--warn); font-weight:600; } .badge.ap-executed, .badge.ap-approved { color:var(--ok); border-color:var(--ok); }
.badge.ap-rejected, .badge.ap-failed { color:var(--bad); border-color:var(--bad); } .badge.ap-expired { color:var(--muted); }
.count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; font-size:12px;
  font-weight:600; background:var(--warn); color:#fff; }
.card.focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.stages { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:6px 0; } .stages .tag.done { color:var(--ok); border-color:var(--ok); }
.stages .tag.now { color:var(--warn); border-color:var(--warn); font-weight:600; }
.decide { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; } .decide input.note { flex:1; min-width:200px; }
.decide input.code { width:110px; letter-spacing:2px; }
.progress { display:inline-block; width:80px; height:6px; border-radius:3px; background:var(--line); vertical-align:middle; overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--accent); }
pre.out { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px; overflow:auto; max-height:420px; white-space:pre-wrap; word-break:break-word; margin:0; font-size:13px; }
tr.clickable { cursor:pointer; } tr.clickable:hover td { background:var(--hover); }
td.pick, th.pick { width:32px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:4px 16px; }
.form-grid .hint { color:var(--muted); font-size:13px; }

/* staff self-service pages (task 1.1): bigger buttons, one column */
.fixes { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; }
.fixes button { height:auto; min-height:48px; padding:10px 14px; text-align:left; justify-content:flex-start; white-space:normal; }
textarea.plain { font:15px/1.45 system-ui, sans-serif; min-height:96px; }

/* cards and tiles */
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:16px 0; }
.tile { display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 18px; text-decoration:none; color:var(--text); min-height:120px; }
a.tile:hover { border-color:var(--accent); } .tile b { display:block; font-size:18px; margin-bottom:6px; } .tile span { color:var(--muted); }
.tile.off { opacity:.6; }
.strip { display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); }
.strip b { color:var(--text); }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }

/* tables */
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--line); border-radius:10px; }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; color:var(--muted); font-size:13px; }
tr:last-child td { border-bottom:none; }
table.kv th { width:220px; }
td.num { text-align:right; }

/* two panes side by side (Install apps), tabs, a bar that stays at the bottom, ordered lists (task 0.5) */
.split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; align-items:start; }
@media (max-width: 860px) { .split { grid-template-columns:minmax(0, 1fr); } }
.split .card { margin-bottom:0; } .pane-list { max-height:520px; overflow:auto; }
.tabs { display:flex; gap:4px; margin:0 0 10px; } .tabs button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.bottombar { position:sticky; bottom:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin-top:12px; box-shadow:0 -2px 8px rgba(0,0,0,.08); }
.bottombar .grow { flex:1; min-width:160px; }
tr.on td { background:var(--hover); } tr.disabled td { opacity:.55; }
ol.steps { margin:6px 0; padding-left:22px; } ol.steps li { padding:4px 0; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
ol.steps li .grow { flex:1; }
textarea { font:13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width:100%; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--text); padding:8px; }
.rule-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.rule-row input { width:auto; min-width:90px; } .rule-row input.wide { flex:1; min-width:220px; }
.answer-yes { color:var(--ok); font-weight:600; } .answer-no { color:var(--bad); font-weight:600; } .answer-unknown { color:var(--warn); font-weight:600; }
progress { width:200px; height:10px; vertical-align:middle; }
.counts .tag { margin-right:4px; }

/* AI technician cases (task 1.7): the timeline, plan cards and the staff page's progress */
.timeline { list-style:none; margin:0; padding:0; } .timeline > li { border-left:3px solid var(--line); padding:6px 0 8px 12px; margin-left:6px; }
.timeline > li.k-escalation, .timeline > li.k-abort { border-left-color:var(--bad); } .timeline > li.k-plan { border-left-color:var(--r2); }
.timeline > li.k-final { border-left-color:var(--ok); } .timeline > li.deny { border-left-color:var(--warn); }
.timeline .when { color:var(--muted); font-size:13px; margin-right:6px; } .timeline details { margin-top:4px; }
.plancard { border:2px solid var(--accent); } .plancard ol { margin:6px 0; padding-left:22px; }
.choices { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.progresslist { list-style:none; padding:0; margin:0; } .progresslist li { padding:4px 0; border-bottom:1px solid var(--line); }
.progresslist li:last-child { font-weight:600; border-bottom:none; }
.badge.case-running, .badge.case-open { color:var(--accent); border-color:var(--accent); } .badge.case-awaiting_user, .badge.case-awaiting_approval { color:var(--warn); border-color:var(--warn); font-weight:600; }
.badge.case-resolved { color:var(--ok); border-color:var(--ok); font-weight:600; } .badge.case-escalated { color:var(--bad); border-color:var(--bad); } .badge.case-aborted { color:var(--muted); }
.badge.kb-draft { color:var(--warn); border-color:var(--warn); } .badge.kb-approved { color:var(--ok); border-color:var(--ok); font-weight:600; } .badge.kb-retired { color:var(--muted); }

/* dialog and messages */
dialog { border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--text); padding:18px 20px; max-width:440px; width:100%; }
dialog.wide { max-width:640px; } dialog.xwide { max-width:880px; }
dialog::backdrop { background:rgba(0,0,0,.4); }
.code-once { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:34px; letter-spacing:3px; text-align:center; padding:12px; border:2px dashed var(--accent); border-radius:10px; margin:10px 0; }
.msg { padding:8px 12px; border-radius:6px; margin:8px 0; } .msg.err { color:var(--bad); border:1px solid var(--bad); } .msg.info { color:var(--muted); border:1px solid var(--line); }
.hidden { display:none !important; }

/* phones and narrow windows (Android, a small Windows window): brand + sign-out on the first line, the menu as one
   swipeable line under it; tables scroll inside their card, never the whole page. */
@media (max-width: 760px) {
  header.top { flex-wrap:wrap; height:auto; padding:8px 12px 0; gap:4px 12px; }
  header.top nav { order:3; flex:1 0 100%; padding:6px 0 8px; display:block; overflow-x:auto; white-space:nowrap; line-height:normal; scrollbar-width:none; }
  header.top nav::-webkit-scrollbar { display:none; }
  header.top nav a { display:inline-block; padding:4px 0; margin-right:16px; }
  header.top .who .me { display:none; }
  main { padding:16px 12px 32px; }
  input:not([type=checkbox]):not([type=radio]), select { max-width:100%; }
  button, .btn, input, select { height:40px; }          /* finger-sized */
  input[type=checkbox] { height:auto; }
  p, li, label, .msg, .card { overflow-wrap:break-word; }
  .card { overflow-x:auto; }                                  /* a wide table (apps, disks, network) scrolls inside its card */   /* long keys, paths and IDs wrap instead of widening the page */
  .tabs { flex-wrap:wrap; }
  table.kv th { width:auto; min-width:90px; }
  table.kv td { overflow-wrap:anywhere; }                     /* settings JSON, hashes and paths wrap inside the card */
  .decide input.note { flex:1 1 100%; min-width:0; }          /* Approve / Reject: note on its own line, big buttons under it */
  .decide input.code { flex:1 1 120px; }
  .decide button { flex:1 1 120px; justify-content:center; }
}
/* inside the installed app (no browser bar): keep clear of the phone's notch / status bar */
.app header.top { padding-top:max(8px, env(safe-area-inset-top)); }