:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #dde1e7;
  --text: #1d2330;
  --muted: #667085;
  --accent: #2f6fde;
  --accent-text: #ffffff;
  --danger: #c93a3a;
  --success: #1f8a4c;
  --sidebar: #17202f;
  --sidebar-text: #c6cede;
  --c-article: #2f6fde;
  --c-company: #8a4fd8;
  --c-asset: #1f9a7a;
  --c-credential: #c4791a;
  --c-site: #b0407a;
  --c-network: #0f7fa8;
  --c-tasklist: #5a6b20;
  --c-procedure: #3f51b5;
  --c-licence: #b03a5b;
  --c-contact: #2a7f62;
  --c-rack: #5b6575;
  --radius: 8px;
  color-scheme: light;
}
/* Dark colours: used when the device is in dark mode (unless the user picked Light), or when the user picked Dark.
   The choice is made with the ☀/☾ button in the sidebar (saved in this browser). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141c;
    --surface: #171e29;
    --surface-2: #1e2734;
    --border: #2a3444;
    --text: #e4e8ef;
    --muted: #94a0b3;
    --accent: #5b8ff0;
    --sidebar: #0b1017;
    --sidebar-text: #b5bfd0;
    --c-article: #5b8ff0;
    --c-company: #a77ef0;
    --c-asset: #3cbf9c;
    --c-credential: #e09a3e;
    --c-site: #e070a8;
    --c-network: #3cb0dc;
    --c-tasklist: #a8c050;
    --c-procedure: #8c9eff;
    --c-licence: #e8789a;
    --c-contact: #5cc39c;
    --c-rack: #9aa6b8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0f141c;
    --surface: #171e29;
    --surface-2: #1e2734;
    --border: #2a3444;
    --text: #e4e8ef;
    --muted: #94a0b3;
    --accent: #5b8ff0;
    --sidebar: #0b1017;
    --sidebar-text: #b5bfd0;
    --c-article: #5b8ff0;
    --c-company: #a77ef0;
    --c-asset: #3cbf9c;
    --c-credential: #e09a3e;
    --c-site: #e070a8;
    --c-network: #3cb0dc;
    --c-tasklist: #a8c050;
    --c-procedure: #8c9eff;
    --c-licence: #e8789a;
    --c-contact: #5cc39c;
    --c-rack: #9aa6b8;
    color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; line-height: 1.25; }
h3 { font-size: 1rem; margin: 0 0 .6rem; }
code, .mono, pre { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.pre { white-space: pre-wrap; }

/* ---------- Layout ---------- */
body.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--sidebar); color: var(--sidebar-text);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar a { color: var(--sidebar-text); }
.brand { font-weight: 700; font-size: 1.15rem; color: #fff !important; padding: 4px 8px; }
.logo { color: var(--accent); }
.sidebar-search input { width: 100%; background: rgba(255,255,255,.08); border-color: transparent; color: #fff; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a { padding: 7px 10px; border-radius: 6px; }
.sidebar nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.sidebar nav a.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-section { text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; opacity: .6; margin: 14px 10px 4px; }
.sidebar-user { border-top: 1px solid rgba(255,255,255,.1); padding: 10px 8px 0; font-size: .9rem; }
.sidebar-user .link { color: var(--sidebar-text); padding: 0; margin-top: 4px; }
.content { padding: 24px 32px; max-width: 1400px; width: 100%; min-width: 0; }
body.app .content { max-width: none; }
body.bare .content { display: grid; place-items: center; min-height: 100vh; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head > div:last-child { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.layout-main-side { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .layout-main-side { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) {
  body.app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .content { padding: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

/* ---------- Components ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.count { color: var(--muted); font-weight: 400; font-size: .85rem; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: .75rem; font-weight: 500; color: var(--muted); vertical-align: middle; }
.type-pill { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 4px; color: #fff; font-weight: 600; vertical-align: middle; }
.type-article { background: var(--c-article); }
.type-company { background: var(--c-company); }
.type-asset { background: var(--c-asset); }
.type-credential { background: var(--c-credential); }
.type-site { background: var(--c-site); }
.type-network { background: var(--c-network); }
.type-tasklist { background: var(--c-tasklist); }
.type-procedure { background: var(--c-procedure); }
.type-licence { background: var(--c-licence); }
.type-contact { background: var(--c-contact); }
.type-rack { background: var(--c-rack); }
/* Company workspace */
.workspace-head { margin-bottom: 16px; }
.workspace-head .page-head { margin-bottom: 8px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-link { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.tab-link:hover { color: var(--text); text-decoration: none; }
.tab-link.active { color: var(--accent); border-bottom-color: var(--accent); }
.workspace-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 0; }
.tab-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-head .table-filter { margin-bottom: 0; }
.site-filter select { min-width: 200px; }
.danger-zone { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.ip-add { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr 1fr 1fr 1.4fr auto; gap: 6px; margin-top: 10px; }
@media (max-width: 1100px) { .ip-add { grid-template-columns: 1fr 1fr; } }
/* IP address map */
.ip-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; margin: 10px 0; }
.ip-cell { display: block; text-align: center; font: 12px/1 ui-monospace, Consolas, monospace; padding: 7px 0; border-radius: 4px; border: 1px solid transparent; color: var(--text); text-decoration: none !important; }
a.ip-cell:hover { outline: 2px solid var(--accent); }
.ip-free { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.ip-dhcp { background: color-mix(in srgb, var(--c-network) 18%, var(--surface)); border-color: color-mix(in srgb, var(--c-network) 40%, transparent); }
.ip-used { background: var(--c-asset); color: #fff; }
.ip-gateway { background: var(--accent); color: #fff; font-weight: 700; }
.ip-reserved { background: var(--c-credential); color: #fff; }
.ip-network, .ip-broadcast { background: transparent; border: 1px dashed var(--border); color: var(--muted); }
.cell-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
@media (max-width: 800px) { .ip-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* Procedures */
kbd { font: .8em ui-monospace, Consolas, monospace; padding: 1px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }
.paste-steps { margin: 6px 0 14px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 6px; }
.paste-steps summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.paste-steps textarea { margin-top: 6px; }
.step-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.step-row { display: grid; grid-template-columns: 34px 1fr 24px; gap: 8px; align-items: start; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.step-handle { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .75rem; color: var(--muted); }
.step-num { font-weight: 700; font-size: .9rem; color: var(--text); }
.step-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.step-main { display: grid; grid-template-columns: 1fr 220px; gap: 6px; }
@media (max-width: 800px) { .step-main { grid-template-columns: 1fr; } }
.step-section { font-size: .85rem; }
.proc-steps { padding-left: 22px; margin: 0; }
.proc-section { display: block; list-style: none; margin: 16px 0 4px -22px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.proc-step { padding: 6px 0; border-bottom: 1px solid var(--border); }
.proc-step:last-child { border-bottom: 0; }
.proc-title { font-weight: 500; }
.proc-instructions { margin-top: 4px; color: var(--muted); }
.proc-instructions > :last-child { margin-bottom: 0; }
.task-details { margin: 4px 0 0 28px; }
.task-details summary { cursor: pointer; color: var(--accent); font-size: .85rem; }
.task-details .markdown { margin-top: 6px; padding: 8px 12px; background: var(--surface-2); border-radius: 6px; }

/* Expiry badges */
.due { display: inline-block; font-size: .78rem; font-weight: 600; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.due-expired { background: var(--danger); color: #fff; }
.due-urgent { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); color: var(--danger); border: 1px solid var(--danger); }
.due-soon { background: color-mix(in srgb, #e0a100 20%, var(--surface)); color: #9a6a00; border: 1px solid #e0a100; }
.due-later { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.expiry-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* Contacts */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.contact-card { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; background: var(--surface); }
.contact-head { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.contact-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.key-badge { color: #9a6a00; border-color: #e0a100; }
.star { font-size: 1.15rem; color: var(--muted); }
.star.on { color: #e0a100; }

/* Racks */
.rack-layout { display: grid; grid-template-columns: minmax(320px, 460px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .rack-layout { grid-template-columns: 1fr; } }
.rack { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: repeat(var(--rack-u), 24px); gap: 1px 0;
  background: #2b3240; border: 10px solid #3a4352; border-radius: 6px; padding: 4px 6px 4px 0; }
.rack-u { grid-column: 1; color: #9aa6b8; font: 10px/24px ui-monospace, Consolas, monospace; text-align: right; padding-right: 6px; }
.rack-slot { grid-column: 2; background: #232a36; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: transparent; text-decoration: none !important; }
a.rack-slot:hover, .rack-slot.selected { background: #2f3a4c; color: #9aa6b8; outline: 1px dashed #6b7a90; }
.rack-item { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 10px; border-radius: 3px;
  color: #fff; font-size: .8rem; overflow: hidden; text-decoration: none !important; border: 1px solid rgba(255,255,255,.15); }
.rack-item:hover, .rack-item.selected { outline: 2px solid #ffd43b; }
.rack-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rack-item-meta { font-size: .7rem; opacity: .75; white-space: nowrap; }
.kind-device { background: linear-gradient(#3f6fb8, #345e9e); }
.kind-patch { background: repeating-linear-gradient(90deg, #4d5566 0 6px, #3e4554 6px 8px); }
.kind-cable { background: #4a4f5a; }
.kind-shelf { background: #6b5b45; }
.kind-blank { background: #1b2029; color: #7d8796; border-style: dashed; }
.kind-reserved { background: repeating-linear-gradient(45deg, #5a4a20 0 6px, #4a3d1a 6px 12px); }
.kind-other { background: #555b6e; }

/* Diagrams */
body.full-bleed { grid-template-columns: 1fr; }
body.full-bleed .sidebar { display: none; }
body.full-bleed .content { max-width: none; padding: 10px 14px; }
.flash-info { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.diagram-preview img { max-width: 100%; height: auto; background: #fff; border-radius: 6px; }
.diagram-inline { overflow: auto; }
.diagram-inline svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.diagram-inline a .dn:hover rect:first-child { stroke-opacity: 1; }

/* Diagram builder */
body.full-bleed .content:has(.dg-app) { padding: 0; }
.dg-app { display: flex; flex-direction: column; height: 100vh; }
.dg-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.dg-title { display: flex; gap: 6px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }
.dg-tools { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.dg-save { display: flex; align-items: center; gap: 8px; }
.dg-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.dg-btn:hover { border-color: var(--accent); }
.dg-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.dg-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.dg-main { flex: 1; display: grid; grid-template-columns: 220px 1fr 250px; min-height: 0; }
.dg-palette, .dg-inspector { overflow-y: auto; padding: 10px 12px; background: var(--surface); }
.dg-palette { border-right: 1px solid var(--border); }
.dg-inspector { border-left: 1px solid var(--border); }
.dg-palette h4, .dg-inspector h4 { margin: 10px 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dg-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dg-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: grab; font: inherit; font-size: .68rem; line-height: 1.15; text-align: center; }
.dg-icon:hover { border-color: var(--accent); background: var(--surface-2); }
.dg-icon span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#dg-asset-search { width: 100%; margin-bottom: 6px; }
.dg-assets { display: flex; flex-direction: column; gap: 3px; }
.dg-asset { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .82rem; text-align: left; cursor: grab; }
.dg-asset:hover { border-color: var(--border); background: var(--surface-2); }
.dg-asset span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dg-asset small { display: block; color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: .72rem; }
.dg-asset.placed { opacity: .6; }
.dg-asset i { font-style: normal; color: var(--success); }
.dg-canvas { position: relative; overflow: hidden; outline: none; cursor: default; touch-action: none; user-select: none;
  background-color: var(--bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--muted) 35%, transparent) 1px, transparent 1.2px); }
.dg-canvas svg { display: block; }
.dg-canvas.linking { cursor: crosshair; }
.dg-canvas [data-kind="node"], .dg-canvas [data-kind="zone"] > rect:first-child, .dg-canvas [data-kind="text"] { cursor: move; }
.dg-canvas [data-kind="handle"] { cursor: crosshair; }
.dg-canvas [data-kind="resize"] { cursor: nwse-resize; }
.dg-canvas [data-kind="link"] { cursor: pointer; }
.dg-inspector label, .dg-field { display: block; font-size: .82rem; margin-bottom: 9px; color: var(--muted); }
.dg-inspector input, .dg-inspector select { width: 100%; margin-top: 3px; }
.dg-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dg-swatches { display: flex; gap: 6px; margin-top: 5px; }
.dg-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.dg-swatch.on { box-shadow: 0 0 0 2px var(--c); }
.dg-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.dg-quick .chip { cursor: pointer; font: inherit; font-size: .75rem; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.dg-row .btn { padding: 4px 10px; font-size: .8rem; }
.dg-help { padding-left: 16px; margin: 0; color: var(--muted); }
.dg-help li { margin-bottom: 5px; }
.dg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ffb020; vertical-align: middle; }
.dg-legend { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.dg-legend svg { vertical-align: middle; }
@media (max-width: 900px) { .dg-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } .dg-palette, .dg-inspector { max-height: 30vh; border: 0; } }
.diagram-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.diagram-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 6px; padding: 8px; color: var(--text); background: var(--surface); }
.diagram-card:hover { border-color: var(--accent); text-decoration: none; }
.diagram-card img { width: 100%; height: 110px; object-fit: contain; background: #fff; border-radius: 4px; }
.diagram-empty { height: 110px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border-radius: 4px; font-size: .85rem; }

/* Task lists */
.progress { display: inline-block; width: 90px; height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; vertical-align: middle; }
.progress span { display: block; height: 100%; background: var(--success); }
.progress.big { width: 100%; max-width: 360px; height: 12px; }
.task-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.done-badge { color: var(--success); border-color: var(--success); }
.task-section { margin: 18px 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.task { padding: 8px 0; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.task-check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 1rem; cursor: pointer; }
.task-check input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.task.is-done .task-text { text-decoration: line-through; color: var(--muted); }
.task-meta { display: flex; gap: 12px; align-items: center; margin: 4px 0 0 28px; flex-wrap: wrap; }
.task-note { max-width: 420px; padding: 3px 8px; font-size: .85rem; background: transparent; border-color: transparent; }
.task-note:hover, .task-note:focus { border-color: var(--border); background: var(--surface); }
.task-note.saved { border-color: var(--success); }
.ticket a { font-weight: 600; }
/* Settings & branding */
.settings-nav { margin-bottom: 16px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.module-card { align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; background: var(--surface); }
.module-card input { margin-top: 4px; }
.module-card > span { display: flex; flex-direction: column; gap: 2px; }
.color-pair { display: flex; gap: 6px; }
.color-pair input[type=color] { width: 44px; padding: 2px; flex: none; }
.brand-logo { height: 26px; max-width: 120px; object-fit: contain; vertical-align: middle; }
.login-logo { height: 40px; max-width: 200px; object-fit: contain; vertical-align: middle; }
.brand-preview { height: 32px; vertical-align: middle; background: var(--surface-2); padding: 4px; border-radius: 4px; }
.login-message { background: var(--surface-2); border-radius: 6px; padding: 8px 12px; font-size: .9rem; }
.status-ok { color: var(--success); font-weight: 600; }
.status-bad { color: var(--danger); font-weight: 600; }
.vault-note { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; color: var(--muted); }
.tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: .8rem; background: var(--surface-2); border: 1px solid var(--border); padding: 0 8px; border-radius: 99px; }

.btn {
  display: inline-block; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none !important;
}
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.link.danger { color: var(--danger); }
.link:disabled { opacity: .4; cursor: not-allowed; }
form.inline { display: inline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; align-items: center; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type=checkbox] { width: auto; }
textarea { resize: vertical; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: .9rem; }
label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.form-wide { max-width: 1000px; }
.form-narrow { max-width: 460px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px 16px; }
legend { font-weight: 600; padding: 0 6px; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; border: 1px solid; }
.flash-success { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.flash-error { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }

.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: min(420px, 92vw); }

.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { background: var(--surface-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
.table.compact td, .table.compact th { padding: 5px 8px; }
.table .num { text-align: right; width: 90px; }
.table-filter { max-width: 360px; margin-bottom: 10px; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.filters label { min-width: 160px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 12px 0; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; color: var(--text); }
.stat:hover { border-color: var(--accent); text-decoration: none; }
.stat strong { font-size: 1.8rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .85rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.card:hover { border-color: var(--accent); text-decoration: none; }

ul.plain { list-style: none; padding: 0; margin: 0 0 12px; }
ul.plain li { padding: 3px 0; }
.inline-list { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.folder { margin: 12px 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.row-link { padding: 3px 0; }

dl.fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.fields dt { color: var(--muted); font-size: .9rem; }
dl.fields dd { margin: 0; word-break: break-word; }
.copyable { cursor: copy; }
.copyable.copied::after, .copy.copied::after { content: " ✓ copied"; color: var(--success); font-size: .8rem; }

/* Relationships */
.rel-list { list-style: none; padding: 0; margin: 0 0 12px; }
.rel-list li { position: relative; padding: 8px 24px 8px 0; border-bottom: 1px solid var(--border); }
.rel-list li:last-child { border-bottom: 0; }
.rel-remove { position: absolute; right: 0; top: 8px; }
.rel-add { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.lookup { position: relative; }
.lookup-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); list-style: none; margin: 0; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
  max-height: 300px; overflow-y: auto;
}
.lookup-results li { padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.lookup-results li.active, .lookup-results li:hover { background: var(--surface-2); }
.lookup-results .muted { display: block; font-size: .78rem; }
.lookup-input.selected { border-color: var(--success); }
.wiki-suggest { top: auto; width: 360px; right: auto; }
.file-list { list-style: none; padding: 0; margin: 0 0 10px; }
.file-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; }
.upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.upload input[type=file] { flex: 1; min-width: 0; }

/* Markdown */
.markdown { overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3 { margin: 1.3em 0 .5em; }
.markdown h2 { font-size: 1.3rem; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.markdown pre { background: var(--surface-2); padding: 12px; border-radius: 6px; overflow-x: auto; }
.markdown code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
.markdown pre code { background: none; padding: 0; }
.markdown table { border-collapse: collapse; margin: 1em 0; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 5px 10px; }
.markdown blockquote { margin: 1em 0; padding: 4px 14px; border-left: 4px solid var(--accent); background: var(--surface-2); }
.markdown img { max-width: 100%; border-radius: 6px; }
.wikilink { border-bottom: 1px dashed currentColor; }
.wikilink:hover { text-decoration: none; border-bottom-style: solid; }
.wikilink.missing { color: var(--danger); }
.search-big { display: flex; gap: 8px; max-width: 700px; margin-bottom: 12px; }
.results { list-style: none; padding: 0; }
.results li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; }
.snippet { color: var(--muted); font-size: .9rem; margin-top: 4px; }
mark { background: color-mix(in srgb, #ffd43b 55%, transparent); color: inherit; border-radius: 2px; }

/* Editor */
.editor-tabs { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.tab { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; cursor: pointer; color: var(--text); font: inherit; }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.editor-help { margin-left: auto; }
.preview { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px; min-height: 300px; }

/* Graph */
#graph { height: calc(100vh - 260px); min-height: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.line { width: 26px; height: 0; border-top: 2px solid var(--muted); display: inline-block; }
.line.dotted { border-top-style: dotted; }
.line.dashed { border-top-style: dashed; }

/* Roles */
.table-wrap { overflow-x: auto; }
.roles-table th { font-size: .78rem; white-space: nowrap; }
.lvl { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: .74rem; border: 1px solid var(--border); color: var(--muted); }
.lvl-1 { color: var(--text); }
.lvl-2 { color: var(--accent); border-color: var(--accent); }
.lvl-3 { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
.perm-table { max-width: 640px; }
.perm-table th:not(:first-child), .perm-table td:not(:first-child) { text-align: center; width: 70px; }
.perm-cell { display: block; cursor: pointer; padding: 2px; }
.role-form:has(input[name="all_clients"][value="1"]:checked) .role-clients { display: none; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 8px 0; max-height: 320px; overflow-y: auto; }
.danger-link { color: var(--danger); }
.role-form label.check { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.role-form label.check input { width: auto; margin: 0; }
.roles-table td:first-child { min-width: 210px; }

/* Client tab bar on item pages, asset type chips, add-IP box */
.client-tabs { margin: -4px 0 16px; }
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip-filter .chip { padding: 3px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .85rem; }
.chip-filter .chip:hover { border-color: var(--accent); text-decoration: none; }
.chip-filter .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.chip-filter .chip.on .count { color: inherit; opacity: .85; }
details.asset-ip-add { margin-top: 10px; }
details.asset-ip-add summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.ip-add-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; margin-top: 10px; }
.ip-add-form label { font-size: .82rem; color: var(--muted); }
.ip-add-form input, .ip-add-form select { width: 100%; margin-top: 3px; }
.ip-add-form .actions { grid-column: 1 / -1; align-items: center; }

/* Atera */
.ok-badge { color: var(--success); border-color: var(--success); }
.warn-badge { color: var(--danger); border-color: var(--danger); }
.sync-status { margin-top: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.sync-status p { margin: 4px 0; }
.warn-text { color: #b7791f; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form select { width: auto; }

/* Sign in with Microsoft */
.btn-microsoft { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); margin: 6px 0 4px; }
.btn-microsoft:hover { border-color: var(--accent); text-decoration: none; }
.or-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin: 14px 0; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* Photos */
.photo-upload { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.photo-upload label { font-size: .85rem; color: var(--muted); }
.photo-upload input[type=file] { display: block; margin-top: 4px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.photo-card { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.photo-card img, .photo-nopreview { display: block; width: 100%; height: 160px; object-fit: cover; background: var(--surface-2); }
.photo-nopreview { display: grid; place-items: center; text-align: center; color: var(--muted); font-weight: 600; }
.photo-card figcaption { padding: 8px 10px; font-size: .88rem; display: flex; flex-direction: column; gap: 2px; }
.sp-ok { color: var(--success); }

/* Settings section menu */
.settings-top { margin-bottom: 18px; }
.settings-label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; margin-bottom: 2px; }
.settings-sections { flex-wrap: wrap; }
.on-this-page { color: var(--muted); margin-top: -6px; }

/* Click-to-edit item pages: inputs look like text until hovered / focused */
.inline-edit { position: relative; }
.inline-edit .ie-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.inline-edit label, .inline-edit .ie-label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.inline-edit input:not([type=checkbox]):not([type=radio]), .inline-edit select, .inline-edit textarea {
  border: 1px solid transparent; background: transparent; color: var(--text); font-size: .95rem; padding: 5px 8px; margin-left: -8px; width: calc(100% + 8px); border-radius: 6px; }
.inline-edit input:not([type=checkbox]):hover, .inline-edit select:hover, .inline-edit textarea:hover { border-color: var(--border); background: var(--surface-2); }
.inline-edit input:focus, .inline-edit select:focus, .inline-edit textarea:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.inline-edit input::placeholder, .inline-edit textarea::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.inline-edit select { appearance: none; -webkit-appearance: none; background-image: none; }
.inline-edit select:hover, .inline-edit select:focus { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.inline-edit fieldset:not(.ie-fields) { border: 0; border-top: 1px solid var(--border); padding: 10px 0 0; margin: 12px 0 0; }
.inline-edit fieldset:not(.ie-fields) legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 6px 0 0; }
.inline-edit .ie-fields:disabled input, .inline-edit .ie-fields:disabled select, .inline-edit .ie-fields:disabled textarea { cursor: default; opacity: 1; -webkit-text-fill-color: var(--text); }
.inline-edit .ie-fields:disabled input:hover, .inline-edit .ie-fields:disabled select:hover { border-color: transparent; background: transparent; background-image: none; }
.inline-edit .stack { gap: 6px; }
.md-field .md-view { cursor: text; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; margin-left: -8px; min-height: 2.2em; }
.md-field .md-view:hover { border-color: var(--border); background: var(--surface-2); }
.ie-fields:disabled .md-field .md-view { cursor: default; }
.ie-fields:disabled .md-field .md-view:hover { border-color: transparent; background: transparent; }
.ie-savebar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ie-savebar-text { margin-right: auto; font-weight: 600; color: var(--accent); }
.field-with-action { display: flex; align-items: center; gap: 4px; }
.field-with-action input { flex: 1; }
.field-action { flex: none; padding: 4px 7px; border-radius: 6px; color: var(--accent); font-size: .9rem; }
.field-action:hover { background: var(--surface-2); text-decoration: none; }
.ie-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ie-heading h3 { margin: 0; }
.ie-hint { font-size: .78rem; color: var(--muted); }
.section-title { margin: 28px 0 8px; font-size: 1.05rem; }
.settings-h2 { margin: 30px 0 10px; font-size: 1.25rem; padding-top: 6px; border-top: 1px solid var(--border); }
.dg-title .crumbs { margin: 0; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Client title doubles as a site switcher (shown on hover / keyboard focus) */
.title-switch-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.title-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 8px; padding: 0 6px; margin-left: -6px; outline: none; }
.title-caret { font-size: .7em; color: var(--muted); opacity: 0; transition: opacity .12s; }
.title-switch:hover, .title-switch:focus-within { background: var(--surface-2); }
.title-switch:hover .title-caret, .title-switch:focus-within .title-caret { opacity: 1; }
.title-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 260px; max-height: 60vh; overflow-y: auto;
  padding: 6px; margin-top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size: .95rem; font-weight: 400; }
.title-switch:hover .title-menu, .title-switch:focus-within .title-menu { display: block; }
.title-menu a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text); white-space: nowrap; }
.title-menu a:hover, .title-menu a:focus { background: var(--surface-2); text-decoration: none; outline: none; }
.title-menu a.on { color: var(--accent); font-weight: 600; }
.title-menu small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.title-menu-sep { display: block; height: 1px; background: var(--border); margin: 4px 0; }

/* Context tabs */
.tabstrip { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-height: 44px; }
.tabstrip.in-workspace { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.ts-group { flex: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .88rem; padding-right: 8px; border-right: 1px solid var(--border); }
.ts-ticket small { font-weight: 400; color: var(--muted); }
.ts-tabs { flex: 1; display: flex; gap: 4px; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.ts-tab { display: flex; align-items: center; flex: none; max-width: 230px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-2); }
.ts-tab > a { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 4px 4px 8px; color: var(--text); font-size: .85rem; }
.ts-tab > a:hover { text-decoration: none; }
.ts-tab:hover { border-color: var(--border); }
.ts-tab.active { background: var(--surface); border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.ts-tab.dragging { opacity: .4; }
.ts-type { font-size: .62rem; padding: 1px 5px; flex: none; }
.ts-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-dirty { display: none; color: var(--accent); font-size: .7rem; }
.ts-tab.dirty .ts-dirty { display: inline; }
.ts-tab button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 5px; border-radius: 5px; font-size: .85rem; line-height: 1; }
.ts-tab button:hover { background: var(--border); color: var(--text); }
.ts-pin { opacity: 0; }
.ts-tab:hover .ts-pin, .ts-tab.pinned .ts-pin, .ts-pin:focus { opacity: 1; }
.ts-tab.pinned { border-style: dashed; border-color: var(--border); }
.ts-tab.pinned.active { border-style: solid; border-color: var(--accent); }
.ts-empty { padding: 4px 6px; }
.ts-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.ts-menu { position: relative; outline: none; }
.ts-menu-list { display: none; position: absolute; right: 0; top: 100%; z-index: 40; min-width: 260px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ts-menu:hover .ts-menu-list, .ts-menu:focus-within .ts-menu-list { display: flex; flex-direction: column; gap: 2px; }
.ts-menu-list > a, .ts-menu-list > button, .ts-menu-list form > button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; }
.ts-menu-list > a:hover, .ts-menu-list button:hover { background: var(--surface-2); text-decoration: none; }
.ts-ws-form { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.ts-ws-form label { font-size: .8rem; color: var(--muted); }
.ts-ws-form input { width: 100%; margin-top: 2px; }
.ts-ws-form .btn { align-self: flex-start; }
.btn.small { padding: 4px 10px; font-size: .82rem; }

/* Quick peek (Alt+click) */
.peek { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 92vw); z-index: 100; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.3); animation: peek-in .15s ease-out; }
.peek[hidden] { display: none; }
@keyframes peek-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.peek-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.peek-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek iframe { flex: 1; border: 0; width: 100%; background: var(--bg); }
html.in-peek body { grid-template-columns: 1fr !important; }
html.in-peek .sidebar, html.in-peek .tabstrip, html.in-peek .client-tabs { display: none !important; }
html.in-peek .content { max-width: none; padding: 14px 16px; }
html.in-peek .layout-main-side { grid-template-columns: 1fr; }
html.in-peek .tk-layout { grid-template-columns: 1fr; }
.ts-plus { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ts-plus:hover { border-color: var(--accent); color: var(--accent); }
.ws-start { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.ws-start label { font-size: .85rem; color: var(--muted); flex: 1; min-width: 200px; }
.ws-start input { width: 100%; margin-top: 3px; }
.ts-menu-list .ts-ws-form > button.btn { width: auto; background: var(--accent); color: var(--accent-text); padding: 5px 14px; border-radius: 8px; }
.ts-menu-list .ts-ws-form > button.btn:hover { background: var(--accent); filter: brightness(1.08); }
.ie-details { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 10px; }
.ie-details > summary { cursor: pointer; font-size: .85rem; color: var(--muted); padding: 2px 0 6px; }
.ie-details[open] > summary { margin-bottom: 6px; }
.article-view { font-size: 1rem; line-height: 1.6; }
.step-open { margin-left: 8px; white-space: nowrap; }
.step-link { display: flex; align-items: center; flex-wrap: wrap; }
.step-link input[type=text] { flex: 1; }
.layout-single { max-width: 980px; }

/* Sub-tasks on a task page */
.subtask { margin: 4px 0 2px 28px; font-size: .9rem; }
.subtask > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.subtask > summary::-webkit-details-marker { display: none; }
.subtask > summary::before { content: '▸'; color: var(--muted); font-size: .8rem; transition: transform .12s; }
.subtask[open] > summary::before { transform: rotate(90deg); }
.subtask-pct { font-size: .78rem; padding: 0 7px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); }
.subtask-pct.complete { color: var(--success); border-color: var(--success); }
.subtask-steps { list-style: none; margin: 6px 0 4px; padding: 0 0 0 18px; border-left: 2px solid var(--border); }
.subtask-steps li { padding: 2px 0; }
.subtask-steps li.is-done span { text-decoration: line-through; color: var(--muted); }
.subtask-steps label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.subtask-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.subtask-list li:last-child { border-bottom: 0; }
.subtask-list .progress { grid-column: 1 / -1; width: 100%; }
.subtask-steps label { flex-direction: row !important; align-items: center !important; font-weight: 400; color: var(--text); margin: 0; }
.subtask-steps input[type=checkbox] { width: auto; margin: 0; flex: none; }

/* ===== Edge-style tab strip with tab groups (overrides the earlier tab styles) ===== */
.tabstrip { gap: 6px; margin: -8px 0 16px; padding: 6px 8px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg)); min-height: 42px; align-items: flex-end; box-shadow: none; }
.tabstrip.in-workspace { box-shadow: inset 0 2px 0 var(--accent); border-color: var(--border); }
.ts-ticket { align-self: center; flex: none; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-text); margin-bottom: 4px; }
.ts-tabs { gap: 2px; align-items: flex-end; padding-bottom: 0; }
.ts-tab { max-width: 200px; min-width: 0; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; height: 34px; position: relative; }
.ts-tab > a { padding: 4px 2px 4px 10px; height: 100%; }
.ts-tab:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); border-color: transparent; }
.ts-tab.active { background: var(--surface); border-color: var(--border); box-shadow: none; z-index: 1; margin-bottom: -1px; height: 35px; }
.ts-tab + .ts-tab::before { content: ''; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 1px; background: var(--border); }
.ts-tab.active::before, .ts-tab.active + .ts-tab::before, .ts-tab:hover::before, .ts-tab:hover + .ts-tab::before { display: none; }
.ts-tab .ts-pin { opacity: 0; }
.ts-tab:hover .ts-pin { opacity: .8; }
.ts-tab.compact { max-width: 56px; }
.ts-tab.compact > a { padding: 4px 4px 4px 8px; }
.ts-tab.compact .ts-pin { position: absolute; right: 1px; top: 1px; font-size: .7rem; padding: 0 2px; opacity: 0; }
.ts-tab.compact:hover .ts-pin, .ts-tab.compact .ts-pin:focus { opacity: 1; }
.ts-tab.pinned { border-style: solid; border-color: transparent; }
.ts-tab.pinned.active { border-color: var(--border); }
.ts-group { display: flex; align-items: flex-end; gap: 2px; flex: none; margin-left: 6px; --g: #5b6575; }
.ts-group.group-blue { --g: #2f6fde; } .ts-group.group-purple { --g: #7a5af8; } .ts-group.group-green { --g: #1f9a7a; } .ts-group.group-orange { --g: #d4860f; }
.ts-group.group-pink { --g: #d6409f; } .ts-group.group-cyan { --g: #0f8fbf; } .ts-group.group-red { --g: #d0453f; } .ts-group.group-yellow { --g: #b7950b; } .ts-group.group-grey { --g: #5b6575; }
.ts-group-label { position: relative; align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 170px; margin-bottom: 4px;
  padding: 3px 9px; border-radius: 7px; background: var(--g); color: #fff; font-size: .78rem; font-weight: 600; cursor: pointer; user-select: none; }
.ts-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-group-count { display: none; font-weight: 500; opacity: .85; }
/* The group's x sits over the end of the label (shown on hover), so hovering never shifts the tabs sideways. */
.ts-group-close { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); visibility: hidden; border: 0; background: var(--g); box-shadow: -6px 0 6px var(--g); color: #fff; border-radius: 4px; width: 16px; height: 16px; line-height: 14px; padding: 0; font-size: .8rem; cursor: pointer; }
.ts-group-label:hover .ts-group-close, .ts-group-label:focus-within .ts-group-close { visibility: visible; }
.ts-group-tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 2px solid var(--g); margin-bottom: -1px; padding-bottom: 0; }
.ts-group-tabs .ts-tab.active { margin-bottom: -2px; height: 36px; border-bottom: 2px solid var(--surface); }
.ts-group.collapsed .ts-group-tabs { display: none; }
.ts-group.collapsed .ts-group-count { display: inline; }
.ts-group.collapsed .ts-group-label { opacity: .85; }
.ts-actions { align-self: center; margin-bottom: 4px; }
html[data-theme] .tabstrip, .tabstrip { color: var(--text); }
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
.step-chips:not(:has(.step-chip:not([hidden]))) { display: none; }
.step-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); font-size: .82rem; }
.step-chip button { padding: 0 5px; color: var(--muted); }
.step-link-row { display: flex; gap: 8px; width: 100%; align-items: center; }
.step-link-row .step-link-search { flex: 1; }
.step-create { position: relative; flex: none; }
.step-create .btn { white-space: nowrap; }
.step-create-menu { position: absolute; right: 0; top: 100%; z-index: 30; margin-top: 4px; min-width: 190px; padding: 6px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.step-create-menu[hidden] { display: none; }
.step-create-menu button { text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; }
.step-create-menu button:hover { background: var(--surface-2); }

/* Click-to-edit procedure steps */
.ie-clickable { cursor: text; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; margin: 0 -8px; }
.ie-clickable:hover { border-color: var(--border); background: var(--surface-2); }
.diagram-preview.is-editable { cursor: pointer; }
.diagram-preview.is-editable:hover { outline: 1px solid var(--border); }
/* Click-to-edit IP rows: cells look like plain text until hovered or focused */
.cell-input { width: 100%; min-width: 6em; border: 1px solid transparent; background: transparent; padding: 3px 5px; color: inherit; font: inherit; border-radius: 4px; text-overflow: ellipsis; }
select.cell-input { min-width: 8em; }
.cell-input:hover { border-color: var(--border); }
.cell-input:focus { border-color: var(--accent, #4c8dff); background: var(--surface-2); outline: none; }
tr.is-dirty { background: var(--surface-2); }

/* ===== Tab groups, Edge look: a coloured label pill, a coloured line under the group's tabs,
   and the open tab raised with the group colour along its top. (Overrides the older .ts-group rule
   that capped the group's width and clipped the label.) ===== */
.ts-group { max-width: none; overflow: visible; border-right: 0; padding-right: 0; font-weight: 400; font-size: inherit; white-space: normal; align-items: flex-end; gap: 0; margin-left: 8px; }
.ts-group:first-child { margin-left: 0; }
.ts-group-label { flex: none; max-width: 240px; align-self: center; margin: 0 6px 5px 0; padding: 4px 11px; border-radius: 8px; font-size: .82rem; font-weight: 600; line-height: 1.3;
  background: var(--g); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ts-group-label:hover { filter: brightness(1.08); }
.ts-group-label:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.ts-group-tabs { gap: 0; border-bottom: 2px solid var(--g); margin-bottom: -1px; }
.ts-group-tabs .ts-tab { border-radius: 8px 8px 0 0; }
.ts-group-tabs .ts-tab.active { background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--g); border-bottom: 0;
  height: 37px; margin-bottom: -2px; box-shadow: 0 2px 0 var(--surface); }
.ts-group.collapsed .ts-group-label { opacity: 1; filter: saturate(.75); }
/* Like Edge, tabs shrink to fit before the row has to scroll. */
.ts-tabs { overflow-y: hidden; }
.ts-group { flex: 0 1 auto; min-width: 0; }
.ts-group-tabs { flex: 0 1 auto; min-width: 0; }
.ts-group-tabs .ts-tab, .ts-tabs > .ts-tab:not(.compact) { flex: 0 1 200px; min-width: 88px; }
.ts-tab .ts-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-tab > a { min-width: 0; overflow: hidden; }
.ts-tab .ts-close { flex: none; }
.step-row.step-flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .3s; }
/* New task: searchable procedure picker */
.proc-picker { position: relative; display: flex; flex-direction: column; gap: 4px; }
.proc-picker > label { font-weight: 600; }
.proc-picker-box { display: flex; gap: 8px; align-items: center; }
.proc-picker-box input { flex: 1; }
.proc-picker-list { position: absolute; z-index: 30; top: 62px; left: 0; right: 0; max-height: 320px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.proc-picker-list[hidden], .proc-picker-list [hidden] { display: none; }
.proc-picker-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px 2px; }
.proc-picker-list button { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; cursor: pointer; }
.proc-picker-list button:hover, .proc-picker-list button.active { background: var(--surface-2); }

/* Light / dark switch in the sidebar */
.theme-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255,255,255,.07); margin-top: 8px; }
.theme-switch button { border: 0; background: none; color: var(--sidebar-text); padding: 3px 9px; border-radius: 6px; font: inherit; font-size: .8rem; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: #fff; }
/* Procedure task preview */
.task-preview .task-check { align-items: center; }
.task-preview .pv-title { font-size: 1rem; flex: 1; }
.task-preview .pv-instructions { margin: 2px 0 0 30px; }
.task-preview .pv-instructions .ie-label { display: none; }
.task-preview .pv-instructions .md-view { font-size: .9rem; min-height: 1.6em; }
.task-preview .pv-instructions .md-empty { font-size: .85rem; }

/* Dev server (HUBU_ENV=dev): a banner you can't miss, and a striped sidebar edge */
.dev-banner { grid-column: 1 / -1; align-self: start; position: sticky; top: 0; z-index: 100; padding: 6px 16px; text-align: center; font-size: .85rem; font-weight: 700; letter-spacing: .02em;
  color: #1d1300; background: repeating-linear-gradient(45deg, #f5b301 0 18px, #ffcc33 18px 36px); }
body.is-dev .sidebar { box-shadow: inset -4px 0 0 #f5b301; }
/* Procedure import preview */
.warn-text { color: #c4791a; }
.import-steps { margin: 6px 0 4px; padding-left: 20px; }
.import-steps .proc-section { display: block; list-style: none; margin-left: -20px; font-weight: 600; margin-top: 6px; }
.import-instr { white-space: pre-line; }
.import-preview details > summary { cursor: pointer; }
/* Search: item-type filter chips */
.search-big { flex-wrap: wrap; }
.search-types { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 10px; }
.search-types .chip { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border: 1px solid var(--border); border-radius: 99px;
  font-size: .85rem; font-weight: 500; line-height: 1.3; white-space: nowrap; cursor: pointer; background: var(--surface); }
.search-types .chip input { position: absolute; opacity: 0; pointer-events: none; }
.search-types .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.search-types .chip.empty { opacity: .55; }
.search-types .chip .count { min-width: 1.6em; padding: 0 6px; border-radius: 99px; background: var(--surface-2); color: var(--text); font-size: .75rem; font-weight: 600; text-align: center; }
.search-types .chip.on .count { background: rgba(255, 255, 255, .25); color: var(--accent-text); }
.search-types .chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pop-up over the procedure editor (linked / newly created KB article or procedure) */
.peek.peek-popup { top: 4vh; bottom: 4vh; right: auto; left: 50%; transform: translateX(-50%); width: min(1100px, 94vw);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: none; z-index: 101; }
.peek-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45); }
.peek-backdrop[hidden] { display: none; }
.peek-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .peek-hint { display: none; } }
.ts-actions { display: inline-flex; gap: 6px; align-items: center; }
.ts-close-all:hover { border-color: var(--danger); color: var(--danger); }

/* In-app dialog (replaces the browser's confirm / prompt boxes) */
.rc-dialog-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; background: rgba(0,0,0,.45); }
.rc-dialog-backdrop[hidden] { display: none; }
.rc-dialog { width: min(460px, 92vw); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rc-dialog-msg { margin: 0 0 12px; white-space: pre-line; }
.rc-dialog-input { width: 100%; margin-bottom: 12px; }
.rc-dialog-actions { justify-content: flex-end; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
/* IP rows: the address is never cut short (e.g. on a phone) */
.ip-row-edit input[name=address].cell-input { min-width: calc(15ch + 12px); }
.table-wrap, .ip-table-wrap { overflow-x: auto; }
/* Tab strip with many tabs: groups never squeeze below their label, tabs keep a readable width, and the row
   scrolls sideways instead of overlapping. */
.ts-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ts-group { flex: 0 0 auto; min-width: max-content; }
.ts-group.collapsed { flex: none; }
.ts-group-tabs { flex: 0 0 auto; }
.ts-group-tabs .ts-tab, .ts-tabs > .ts-tab:not(.compact) { flex: 0 0 auto; width: clamp(120px, 14vw, 200px); min-width: 120px; }
.ts-group-label { flex: none; position: relative; z-index: 1; }
/* Diagram editor toolbar: one line on normal screens; the status text truncates instead of wrapping the bar */
@media (min-width: 1100px) { .dg-bar { flex-wrap: nowrap; } }
.dg-tools { display: flex; flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.dg-tools .dg-btn { white-space: nowrap; }
.dg-save { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
#dg-status { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Image previews in dark mode; modern inline SVGs use page theme variables directly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diagram-preview img,
  :root:not([data-theme="light"]) .diagram-card img { filter: invert(.9) hue-rotate(180deg); }
}
:root[data-theme="dark"] .diagram-preview img, :root[data-theme="dark"] .diagram-card img { filter: invert(.9) hue-rotate(180deg); }
/* Phones: tables scroll inside themselves (not the whole page), and the menu folds away */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-toggle { display: none; border: 1px solid rgba(255,255,255,.2); background: none; color: var(--sidebar-text); border-radius: 8px; padding: 4px 10px; font: inherit; cursor: pointer; }
@media (max-width: 800px) {
  .content { min-width: 0; }
  .table { display: block; max-width: 100%; overflow-x: auto; }
  .nav-toggle { display: inline-block; }
  .sidebar nav, .sidebar .sidebar-search, .sidebar .sidebar-user { display: none; }
  body.nav-open .sidebar nav { display: flex; }
  body.nav-open .sidebar .sidebar-search, body.nav-open .sidebar .sidebar-user { display: block; }
}

/* Rack editing: keep the manual forms available alongside pointer gestures. */
.rack-item { position: relative; }
[data-editable="true"] .rack-item, .rack-asset-choice:not(:disabled) { cursor: grab; touch-action: none; user-select: none; }
.rack-resize { position: absolute; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 2; touch-action: none; }
.rack-resize-top { top: 0; border-top: 2px solid rgba(255,255,255,.5); }
.rack-resize-bottom { bottom: 0; border-bottom: 2px solid rgba(255,255,255,.5); }
.rack-drop-preview { grid-column: 2; z-index: 3; pointer-events: none; background: #174e3ddd; border: 2px solid #67e8a5; color: white; display: grid; place-items: center; font-size: .8rem; }
.rack-drop-preview.invalid { background: #692f32dd; border-color: #ff8c8c; }
.rack-dragging { opacity: .55; }
.rack-type-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.rack-type-filters label { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: .85rem; }
.rack-type-filters input { width: auto; }
.rack-asset-list { max-height: 320px; overflow-y: auto; display: grid; gap: 6px; }
.rack-asset-choice { display: flex; justify-content: space-between; gap: 12px; text-align: left; padding: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.rack-asset-choice small { opacity: .7; }
.rack-asset-choice.selected { outline: 2px solid var(--accent); }
.rack-asset-choice:disabled { opacity: .55; }
.rack-asset-choice[hidden] { display: none; }

/* Titled panels start compact; the heading remains an accessible toggle. */
.panel-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.panel-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.panel-arrow { flex: 0 0 auto; transition: transform .15s ease; }
.panel-toggle[aria-expanded="true"] > .panel-arrow { transform: rotate(90deg); }
.panel-body[hidden] { display: none !important; }
.collapsible-panel.panel-collapsed > .panel-heading { margin-bottom: 0; }
.collapsible-panel.panel-collapsed > .panel-heading > h2,
.collapsible-panel.panel-collapsed > .panel-heading > h3 { margin-bottom: 0; }
.collapsible-panel.panel-collapsed > .panel-heading:not(h2):not(h3) > :not(h2):not(h3) { display: none; }
.collapsible-panel > .panel-heading h2,
.collapsible-panel > .panel-heading h3 { flex: 1; }
.panel-collapsed > .panel-body { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .panel-arrow { transition: none; } }

/* Keep search chip hit areas inside their own labels. */
.search-types .chip { position: relative; }
.search-types .chip input { width: 1px; height: 1px; margin: 0; clip-path: inset(50%); }
/* Prevent tab labels from overlapping; overflowing tab rows scroll instead. */
.ts-group, .ts-group-tabs { flex-shrink: 0; }
.ts-group-tabs .ts-tab, .ts-tabs > .ts-tab:not(.compact) { flex: 0 0 180px; min-width: 120px; }
form:has(.ie-savebar:not([hidden])) { padding-bottom: 88px; }

.pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
/* Keep the diagram toolbar on one line; tools scroll without hiding Save or status. */
.dg-bar { flex-wrap: nowrap; min-width: 0; }
.dg-tools { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; }
.dg-tools > * { flex-shrink: 0; }
.dg-save { flex-shrink: 0; }
#dg-status { max-width: 24ch; white-space: normal; }
@media (max-width: 800px) { #dg-status { max-width: 12ch; } .dg-title { max-width: 24%; } }

html { scroll-padding-bottom: 110px; }
.ie-fields label { scroll-margin-bottom: 110px; }

/* ---------- Tickets ---------- */
.ticket-status, .prio { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .75rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); vertical-align: middle; white-space: nowrap; }
.ticket-status.status-new { color: var(--accent); border-color: var(--accent); }
.ticket-status.status-open { color: var(--text); border-color: var(--text); }
.ticket-status.status-waiting { color: #b7791f; border-color: #b7791f; }
.ticket-status.status-resolved { color: var(--success); border-color: var(--success); }
.ticket-status.status-closed { color: var(--muted); }
.prio-urgent { background: var(--danger); border-color: var(--danger); color: #fff; }
.prio-high { color: var(--danger); border-color: var(--danger); }
.prio-normal { color: var(--text); }
.prio-low { color: var(--muted); }
.overdue-badge { background: var(--danger); border-color: var(--danger); color: #fff; }
tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.ticket-table td { vertical-align: top; }
.tmsg { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; background: var(--surface); }
.tmsg header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.tmsg .markdown > :first-child { margin-top: 0; }
.tmsg .markdown > :last-child { margin-bottom: 0; }
.tmsg .markdown { overflow-wrap: anywhere; }
.tmsg-kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.tmsg-inbound { border-left: 4px solid var(--accent); }
.tmsg-reply { border-left: 4px solid var(--success); }
.tmsg-note { border-left: 4px solid #b7791f; background: color-mix(in srgb, #b7791f 7%, var(--surface)); }
.tmsg-description { border-left: 4px solid var(--muted); }
.tmsg-event { border: 0; background: none; padding: 2px 4px; margin: 0 0 8px; }
.reply-kind { display: flex; flex-wrap: wrap; gap: 6px; }
.reply-kind .chip { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; font-size: .9rem; }
.reply-kind .chip input { width: auto; margin: 0; }
.reply-kind .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.ticket-reply.is-note textarea { background: color-mix(in srgb, #b7791f 6%, var(--surface)); }
.ticket-mini { list-style: none; padding: 0; margin: 0; }
.ticket-mini li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ticket-mini li:last-child { border-bottom: 0; }
.sla-table input { width: 7em; }

/* ---------- Ticket page layout (conversation left, icon-bar side panel right) ---------- */
.tk-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; margin-bottom: 14px; }
.tk-back { font-size: 1.4rem; line-height: 1; padding: 30px 4px 0; color: var(--muted); text-decoration: none; }
.tk-back:hover { color: var(--accent); text-decoration: none; }
.tk-title h1 { margin: 2px 0 4px; overflow-wrap: anywhere; }
.tk-num { font-weight: 500; }
.tk-sep { margin: 0 10px; color: var(--muted); font-weight: 300; }
.tk-actions { align-items: center; padding-top: 22px; flex-wrap: wrap; justify-content: flex-end; }
.tk-more { position: relative; }
.tk-more > summary { list-style: none; cursor: pointer; }
.tk-more > summary::-webkit-details-marker { display: none; }
.tk-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.tk-menu form, .tk-menu .btn { width: 100%; }

.tk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.tk-main { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 18px 18px; min-width: 0; }
.tk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 -18px 14px; padding: 0 12px; overflow-x: auto; }
.tk-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 12px 12px; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tk-tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.tk-tabs .count { color: inherit; }
.tk-thread { min-height: 120px; }

.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.avatar-sm { width: 30px; height: 30px; font-size: .7rem; background: var(--text); color: var(--surface); border: 0; }
.avatar-lg { width: 52px; height: 52px; font-size: 1.05rem; background: #4a5160; color: #fff; border: 0; }
.tmsg-row { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.tmsg-row .tmsg { flex: 1; min-width: 0; margin: 0; border-radius: 12px; border: 1px solid var(--border); border-left-width: 1px; }
.tmsg-row-inbound .tmsg { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.tmsg-row-reply .tmsg { background: var(--surface); }
.tmsg-row-note .tmsg { background: color-mix(in srgb, #b7791f 9%, var(--surface)); border-color: color-mix(in srgb, #b7791f 35%, var(--border)); }
.tmsg-row-description .tmsg { background: var(--surface-2); }
.tmsg-when { margin-left: auto; }
.tmsg footer { margin-top: 8px; }
.tk-activity li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tk-activity li:last-child { border-bottom: 0; }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; align-self: center; }

.ticket-reply { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.reply-kind.seg { display: inline-flex; gap: 0; padding: 3px; border-radius: 8px; background: var(--surface-2); align-self: flex-start; }
.reply-kind.seg .chip { border: 0; border-radius: 6px; background: transparent; padding: 4px 12px; font-size: .88rem; }
.reply-kind.seg .chip input { position: absolute; opacity: 0; pointer-events: none; }
.reply-kind.seg .chip.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 600; }
.reply-kind.seg .chip:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.ticket-reply textarea { border: 0; padding: 6px 2px; resize: vertical; background: transparent; }
.ticket-reply textarea:focus { outline: none; box-shadow: none; }
.ticket-reply.is-note { background: color-mix(in srgb, #b7791f 6%, var(--surface)); }
.ticket-reply.is-note textarea { background: transparent; }
.tk-reply-foot { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; border-top: 1px solid var(--border); padding-top: 10px; }
.tk-reply-foot label:not(.check) { flex: 1 1 150px; }
.tk-reply-foot .check { padding-bottom: 8px; }
.tk-reply-foot .btn { margin-left: auto; }

.tk-side { position: sticky; top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.tk-side-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tk-timer { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: 8px; }
.tk-timer-time { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 5.2em; }
.tk-timer.running { border-color: var(--success); }
.tk-timer.running .tk-timer-time { color: var(--success); }
.icon-btn { background: none; border: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--accent); font-size: 1rem; line-height: 1; }
.icon-btn:hover { background: var(--surface-2); }
.tk-side-body { display: grid; grid-template-columns: minmax(0, 1fr) 52px; }
.tk-panels { padding: 14px 16px; min-width: 0; border-right: 1px solid var(--border); }
.tk-panel h2 { font-size: 1.35rem; margin: 0 0 14px; }
.tk-panel h3 { font-size: 1rem; margin: 18px 0 8px; }
.tk-panel > .panel { border: 0; padding: 0; background: none; box-shadow: none; margin: 0; }
.tk-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.tk-rail button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.tk-rail button:hover { background: var(--surface-2); color: var(--text); }
.tk-rail button.on { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--text); }
.tk-person { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.tk-person-name { font-weight: 600; font-size: 1.05rem; }
.tk-props { border: 0; padding: 0; margin-top: 8px; background: none; box-shadow: none; }
.tk-props .grid-2 { grid-template-columns: 1fr; }
.tk-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 12px 0; }
.tk-dl dt { color: var(--muted); }
.tk-dl dd { margin: 0; overflow-wrap: anywhere; }
.tk-tasks li, .tk-time li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.tk-tasks li a { flex: 1; min-width: 0; }
.tk-overall { display: flex; align-items: center; gap: 8px; }
.sla-chip { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 6px; font-size: .82rem; font-weight: 600; }
.sla-ok { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }
.sla-soon { background: color-mix(in srgb, #b7791f 16%, var(--surface)); color: #b7791f; }
.sla-late { background: var(--danger); color: #fff; }
.ring { flex: none; vertical-align: middle; }
.ring-track { fill: none; stroke: var(--border); stroke-width: 3; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.ring-done .ring-fill { stroke: var(--success); }

@media (max-width: 1100px) {
  .tk-layout { grid-template-columns: 1fr; }
  .tk-side { position: static; }
}
@media (max-width: 640px) {
  .tk-head { grid-template-columns: auto minmax(0, 1fr); }
  .tk-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 0; }
  .tk-back { padding-top: 26px; }
  .tk-main { padding: 0 12px 12px; }
  .tk-tabs { margin: 0 -12px 12px; }
  .tmsg-row .avatar { display: none; }
  .tk-side-body { grid-template-columns: 1fr; }
  .tk-rail { flex-direction: row; justify-content: space-around; order: -1; border-bottom: 1px solid var(--border); padding: 6px 4px; }
  .tk-rail button.on { box-shadow: inset 0 -2px 0 var(--text); }
  .tk-panels { border-right: 0; }
}

/* Ticket header actions: always on the right, sized to their content. */
.tk-actions { flex-wrap: nowrap; justify-content: flex-end; margin: 0; }
.tk-actions > * { flex: none; }
.tk-status-pill { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.tk-status-pill::-webkit-details-marker { display: none; }
.tk-status-pill.status-waiting { border-color: #b7791f; color: #b7791f; background: color-mix(in srgb, #b7791f 10%, var(--surface)); }
.tk-status-pill.status-resolved { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.tk-status-pill.status-closed { border-color: var(--border); color: var(--muted); background: var(--surface-2); }
.tk-caret { font-size: .8em; }
.tk-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.tk-menu-item:hover:not(:disabled) { background: var(--surface-2); }
.tk-menu-item:disabled { cursor: default; font-weight: 600; }
.tk-dot.status-new { background: var(--accent); }
.tk-dot.status-open { background: var(--text); }
.tk-dot.status-waiting { background: #b7791f; }
.tk-dot.status-resolved { background: var(--success); }
.tk-dot.status-closed { background: var(--muted); }
@media (max-width: 640px) {
  .tk-actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
}

/* Ticket time entries */
.time-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.time-fields label { font-size: .8rem; font-weight: 500; min-width: 0; }
.time-fields input { padding: 6px 8px; min-width: 0; }
.hhmm { font-variant-numeric: tabular-nums; text-align: center; }
input.is-invalid { border-color: var(--danger); outline-color: var(--danger); }
.time-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.time-foot .btn { margin-left: auto; }
.time-add { padding: 12px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); gap: 8px; }
.tk-time li { display: block; padding: 10px 0; }
.time-entry { display: flex; flex-direction: column; gap: 6px; }
.time-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.time-entry input { padding: 5px 8px; }
.time-del { margin-top: 4px; }

/* Long addresses and commands in help text wrap instead of making the page scroll sideways. */
main code { overflow-wrap: anywhere; }
.tk-time-add { font-size: 1.25rem; font-weight: 600; padding: 0 6px; }

/* ---------- Client banner (a client is open): one slim line ---------- */
.client-banner { --g: #5b6575; display: flex; align-items: center; gap: 10px; min-height: 38px; margin: 0 0 14px; padding: 4px 6px 4px 10px;
  border-left: 4px solid var(--g); border-radius: 6px; background: color-mix(in srgb, var(--g) 8%, transparent); font-size: .9rem; }
.client-banner-mark { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: var(--g); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .02em; text-decoration: none; }
.client-banner-mark:hover { text-decoration: none; filter: brightness(1.08); }
.client-banner-name { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.client-banner-site { color: var(--muted); white-space: nowrap; }
.client-banner-facts { display: flex; gap: 14px; margin-left: auto; padding-left: 12px; white-space: nowrap; font-size: .84rem; }
.client-banner-facts a { color: var(--muted); }
.client-banner-facts a:hover { color: var(--text); }
.client-banner-leave { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.client-banner-leave:hover { background: color-mix(in srgb, var(--g) 18%, transparent); color: var(--text); text-decoration: none; }
html.in-peek .client-banner { display: none; }
@media (max-width: 1100px) { .client-banner-extra { display: none; } }
@media (max-width: 640px) { .client-banner-site { display: none; } .client-banner-facts { padding-left: 6px; } }

/* Client colours (shared by tab groups, the client banner and the client icon in the top bar). */
.group-blue { --g: #2f6fde; } .group-purple { --g: #7a5af8; } .group-green { --g: #1f9a7a; } .group-orange { --g: #d4860f; }
.group-pink { --g: #d6409f; } .group-cyan { --g: #0f8fbf; } .group-red { --g: #d0453f; } .group-yellow { --g: #b7950b; } .group-grey { --g: #5b6575; }

/* Type colours for tickets and diagrams (their labels had no background, so they were unreadable in light mode). */
:root { --c-ticket: #b8432f; --c-diagram: #2b7a8c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-ticket: #d9735c; --c-diagram: #4fa6b8; } }
:root[data-theme="dark"] { --c-ticket: #d9735c; --c-diagram: #4fa6b8; }
.type-ticket { background: var(--c-ticket); }
.type-diagram { background: var(--c-diagram); }
.h1-sub { font-weight: 500; color: var(--muted); font-size: .7em; }
.expiring-table .exp-narrow { display: none; }
@media (max-width: 640px) {
  .expiring-table .exp-wide { display: none; }
  .expiring-table .exp-narrow { display: block; margin-top: 2px; }
  .expiring-table td { overflow-wrap: anywhere; }
}
.error-page { max-width: 560px; margin: 40px auto; text-align: center; }
.error-page .actions { justify-content: center; }