/* Written by Philip Tomlinson. Copyright (c) 2026 Elite Security. All rights reserved. */
/* EPIC — premium design system. Corporate chrome, colourful data.
   All colours/spacing come from the active theme via CSS custom properties
   (--color-*, --c-*, --font-sans, --radius, --shadow) injected in the page head. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans, 'Inter', system-ui, 'Segoe UI', Arial, sans-serif);
  background: var(--color-bg, #0a0e14);
  color: var(--color-text, #e8edf4);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02","cv03","cv04";
}
a { color: var(--color-accent, #5b87ff); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
.muted { color: var(--color-muted, #8593a6); }
.small { font-size: 12px; }
.num, .mono, table td, table th { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 13px 22px;
  background: var(--color-surface, #111824);
  border-bottom: 1px solid var(--color-border, #232e3d);
}
.brand { font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; color: var(--color-text, #e8edf4);
  display: flex; align-items: center; gap: 8px; }
.brand::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--color-accent, #5b87ff); display: inline-block; }
.brand .sub { color: var(--color-muted, #8593a6); font-weight: 500; font-size: .8rem; margin-left: 2px; }
.switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.switch .lbl { color: var(--color-muted, #8593a6); font-size: .8rem; }

/* ---------- containers ---------- */
.wrap { max-width: 1000px; margin: 26px auto; padding: 0 22px; display: flex; flex-direction: column; gap: 18px; }
.foot { text-align: center; color: var(--color-muted, #8593a6); font-size: .82rem; padding: 26px; }

/* ---------- cards ---------- */
.card {
  background: var(--color-surface, #111824);
  border: 1px solid var(--color-border, #232e3d);
  border-radius: var(--radius, 13px);
  padding: 18px 20px;
  box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.5));
}
.card > h3 { margin: 0 0 12px; font-size: 14px; font-weight: 650; }
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-h h3 { margin: 0; font-size: 14px; font-weight: 650; }
.hero h1 { margin: 0 0 6px; font-size: 1.7rem; }
.hero p { margin: 4px 0; }

/* ---------- feature grid / stat row ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid .card { padding: 16px; }
.grid h4 { margin: 0 0 6px; font-size: 1rem; }
.statrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.statrow .card { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px; }
.statrow .card span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted, #8593a6); font-weight: 700; }
.statrow b { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; }

/* ---------- chips / pills / tags ---------- */
.chip {
  display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--color-border, #232e3d); background: transparent; color: var(--color-text, #e8edf4);
}
a.chip:hover { text-decoration: none; border-color: var(--color-accent, #5b87ff); }
.chip.on { background: var(--color-accent, #5b87ff); color: var(--color-accent-text, #fff); border-color: var(--color-accent, #5b87ff); }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; width: fit-content; color: #fff; letter-spacing: .01em; }
.pill.ok { background: var(--color-ok, #22c55e); }
.pill.warn { background: var(--color-warn, #f59e0b); }
.pill.danger { background: var(--color-danger, #ef4444); }
.pill.info { background: var(--color-info, #3b82f6); }
.pill.accent { background: var(--color-accent, #5b87ff); }
.pill.purple { background: var(--c-purple, #a855f7); }
.pill.teal { background: var(--c-teal, #14b8a6); }
.pill.neutral { background: var(--color-surface2, #18212e); color: var(--color-muted, #8593a6); border: 1px solid var(--color-border, #232e3d); }

/* auto-coloured status pills (by value) */
.apill, .rpill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--color-surface2, #18212e); color: var(--color-muted, #8593a6); border: 1px solid var(--color-border, #232e3d); text-transform: capitalize; }
.apill[data-a="login"], .apill[data-a="auto"] { background: var(--c-blue, #3b82f6); color: #fff; border-color: transparent; }
.apill[data-a="create"], .apill[data-a="install"], .apill[data-a="enable"] { background: var(--c-green, #22c55e); color: #fff; border-color: transparent; }
.apill[data-a="update"] { background: var(--c-amber, #f59e0b); color: #fff; border-color: transparent; }
.apill[data-a="delete"], .apill[data-a="blocked"], .apill[data-a="uninstall"] { background: var(--c-red, #ef4444); color: #fff; border-color: transparent; }
.rpill[data-r="success"] { background: var(--c-green, #22c55e); color: #fff; border-color: transparent; }
.rpill[data-r="fail"] { background: var(--c-red, #ef4444); color: #fff; border-color: transparent; }
.tag { font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 6px; color: var(--t, var(--color-accent)); background: color-mix(in srgb, var(--t, var(--color-accent)) 15%, transparent); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--color-border, #232e3d); }
thead th { color: var(--color-muted, #8593a6); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-surface2, #18212e); }
.num { text-align: right; }

/* ---------- code / status text ---------- */
.code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--color-surface2, #18212e);
  border: 1px solid var(--color-border, #232e3d); border-radius: 8px; padding: 7px 10px; word-break: break-all; font-size: .85rem; }
.ok { background: color-mix(in srgb, var(--color-ok,#22c55e) 12%, transparent); border: 1px solid var(--color-ok,#22c55e);
  color: var(--color-ok,#22c55e); padding: 8px 12px; border-radius: 8px; font-size: .9rem; }
.error { background: color-mix(in srgb, var(--color-danger,#ef4444) 12%, transparent); border: 1px solid var(--color-danger,#ef4444);
  color: var(--color-danger,#ef4444); padding: 8px 12px; border-radius: 8px; font-size: .9rem; }

/* ---------- buttons / forms ---------- */
button, .btn {
  background: var(--color-accent, #5b87ff); border: 0; color: var(--color-accent-text, #fff);
  padding: 9px 15px; border-radius: var(--radius-sm, 8px); cursor: pointer; font: inherit; font-weight: 600;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { filter: brightness(1.08); }
button.chip { background: transparent; color: var(--color-text, #e8edf4); }
button.chip:hover { border-color: var(--color-accent, #5b87ff); filter: none; }
.btn.danger, button.danger { background: var(--color-danger, #ef4444); color: #fff; }
.inline { display: inline; margin: 0; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input[type=text] { flex: 1; padding: 7px 10px; border: 1px solid var(--color-border, #232e3d);
  border-radius: var(--radius-sm, 8px); background: var(--color-surface2, #18212e); color: var(--color-text, #e8edf4); font: inherit; }

.auth { max-width: 420px; margin: 44px auto; }
.auth h1 { margin: 0 0 14px; font-size: 1.4rem; }
.auth h3 { margin: 0 0 12px; }
.auth form { display: flex; flex-direction: column; gap: 12px; }
.auth label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--color-muted, #8593a6); }
.auth label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--color-text, #e8edf4); }
.auth input[type=text], .auth input[type=password], .auth input[type=email], .auth input[type=date],
.auth input[type=datetime-local], .auth input[type=number], .auth input:not([type]), .auth select, .auth textarea {
  padding: 10px 12px; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-border, #232e3d);
  background: var(--color-surface2, #18212e); color: var(--color-text, #e8edf4); font: inherit; width: 100%; box-sizing: border-box;
}
.auth textarea { resize: vertical; min-height: 64px; }
.auth input:focus, .auth select:focus, .auth textarea:focus { outline: 0; border-color: var(--color-accent, #5b87ff); }

/* ---------- admin shell ---------- */
.admin-shell { display: flex; align-items: stretch; min-height: calc(100vh - 58px); }
/* Dark "control-room" sidebar, tinted with the brand accent in every theme */
.sidebar {
  flex: 0 0 246px; width: 246px; padding: 12px 10px;
  background: color-mix(in srgb, var(--color-accent, #5b87ff) 22%, #0b0f16);
  border-right: 1px solid color-mix(in srgb, var(--color-accent, #5b87ff) 30%, #1a2431);
}
.sidebar details { margin-bottom: 3px; border-radius: 10px; overflow: hidden; }
.sidebar details[open] { background: rgba(255,255,255,.04); padding-bottom: 5px; }
.sidebar summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; font-size: 13px; font-weight: 600; color: #e7ecf3; border-radius: 10px;
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary:hover { background: rgba(255,255,255,.06); }
.sidebar .ic { display: inline-flex; align-items: center; }
.sidebar summary .ic { color: var(--color-accent, #5b87ff); }
.sidebar summary .lbl { flex: 1; }
.sidebar summary .chev {
  width: 7px; height: 7px; border-right: 2px solid #7c8798;
  border-bottom: 2px solid #7c8798; transform: rotate(-45deg); transition: transform .15s;
}
.sidebar details[open] summary .chev { transform: rotate(45deg); }
.side-items { padding: 2px 6px 4px; display: flex; flex-direction: column; gap: 2px; }
.side-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 15px; border-radius: 8px; color: #aab4c2; font-size: 13px; font-weight: 500;
}
.side-link .ic { color: #8493a6; }
.side-link:hover { text-decoration: none; background: rgba(255,255,255,.06); color: #fff; }
.side-link:hover .ic { color: #fff; }
.side-link.active { background: rgba(255,255,255,.09); color: #fff; font-weight: 600; }
/* brighten the accent inside the tinted sidebar so it pops */
.sidebar summary .ic,
.side-link.active .ic { color: color-mix(in srgb, var(--color-accent, #5b87ff) 62%, #ffffff); }
.side-link.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--color-accent, #5b87ff) 68%, #ffffff);
}
.side-link.active::after {
  content: ""; position: absolute; right: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent, #5b87ff) 68%, #ffffff);
}
/* top-level plugin link (single-item plugin = its own root, no group) */
.sidebar > .side-link.top { padding: 11px 12px; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: #e7ecf3; }
.sidebar > .side-link.top .ic { color: color-mix(in srgb, var(--color-accent, #5b87ff) 62%, #ffffff); }
.sidebar > .side-link.top:hover { background: rgba(255,255,255,.06); }
/* ---------- sales pipeline board ---------- */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
.board-col { flex: 0 0 220px; background: var(--color-surface2, #18212e); border: 1px solid var(--color-border, #232e3d); border-radius: var(--radius, 12px); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.board-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.board-stage { font-size: 12px; font-weight: 700; text-transform: capitalize; }
.board-card { display: flex; flex-direction: column; gap: 2px; background: var(--color-surface, #0f1620); border: 1px solid var(--color-border, #232e3d); border-radius: 8px; padding: 8px 10px; color: var(--color-text, #e8edf4); }
.board-card:hover { text-decoration: none; border-color: var(--color-accent, #5b87ff); }
/* ---------- quote add-line row ---------- */
.qadd { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.qadd input[type=text], .qadd input:not([type]) { flex: 1; min-width: 160px; }
.qadd input, .qadd input[type=number] { padding: 8px 10px; border: 1px solid var(--color-border, #232e3d); border-radius: var(--radius-sm, 8px); background: var(--color-surface2, #18212e); color: var(--color-text, #e8edf4); font: inherit; }
.qadd input[type=number] { width: 96px; }
/* ---------- tickets ---------- */
.ticket-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ticket-grid { grid-template-columns: 1fr; } }
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { border: 1px solid var(--color-border, #232e3d); border-radius: 10px; padding: 10px 12px; background: var(--color-surface2, #18212e); }
.msg.internal { background: color-mix(in srgb, var(--color-warn, #f59e0b) 12%, var(--color-surface2, #18212e)); border-color: color-mix(in srgb, var(--color-warn, #f59e0b) 35%, var(--color-border, #232e3d)); }
.msg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.msg-h .muted { margin-left: auto; }
.msg-b { white-space: pre-wrap; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--color-border, #232e3d); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--color-muted, #8593a6); }
.admin-main { flex: 1; padding: 24px; min-width: 0; display: flex; flex-direction: column; gap: 16px; background: var(--color-bg, #0a0e14); }
.admin-main h1 { margin: 0 0 2px; font-size: 20px; }

/* ---------- top bar: home button + EPIC — brand ---------- */
.homebtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--color-accent, #5b87ff); color: var(--color-accent-text, #fff); flex: 0 0 auto; }
.homebtn:hover { text-decoration: none; filter: brightness(1.1); }
.brandtxt { font-weight: 800; font-size: 1.12rem; letter-spacing: .01em; color: var(--color-text, #e8edf4); }
.brandtxt .sub { color: var(--color-muted, #8593a6); font-weight: 500; font-size: .85rem; }
.spacer { flex: 1; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border, #232e3d); margin-bottom: 4px; }
.tab { padding: 9px 16px; color: var(--color-muted, #8593a6); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; }
.tab:hover { text-decoration: none; color: var(--color-text, #e8edf4); }
.tab.on { color: var(--color-accent, #5b87ff); border-bottom-color: var(--color-accent, #5b87ff); }
.listhead { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-head h1 { margin: 0; }

/* ---------- month calendar (Jobs) ---------- */
.calbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.calbar b { font-size: 16px; min-width: 150px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--color-border, #232e3d);
  border: 1px solid var(--color-border, #232e3d); border-radius: var(--radius, 12px); overflow: hidden; }
.cal-h { background: var(--color-surface2, #18212e); color: var(--color-muted, #8593a6); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; text-align: center; }
.cal-day { background: var(--color-surface, #0f1620); min-height: 104px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-day.out { background: color-mix(in srgb, var(--color-surface, #0f1620) 60%, #000); }
.cal-day.out .cal-num { opacity: .4; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--color-accent, #5b87ff); }
.cal-num { font-size: 12px; font-weight: 700; color: var(--color-muted, #8593a6); }
.cal-day.today .cal-num { color: var(--color-accent, #5b87ff); }
.cal-job { display: block; font-size: 11px; line-height: 1.25; padding: 3px 6px; border-radius: 6px;
  background: var(--color-surface2, #18212e); color: var(--color-text, #e8edf4);
  border-left: 3px solid var(--color-accent, #5b87ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-job:hover { text-decoration: none; filter: brightness(1.15); }
.cal-hol { background: color-mix(in srgb, var(--color-warn, #f59e0b) 20%, var(--color-surface2, #18212e)); }
/* interactive calendar: drag-select */
.epic-cal .cal-day { cursor: pointer; user-select: none; -webkit-user-select: none; }
.epic-cal .cal-day.sel { box-shadow: inset 0 0 0 2px var(--color-accent, #5b87ff); background: color-mix(in srgb, var(--color-accent, #5b87ff) 16%, var(--color-surface, #0f1620)); }
.calbar .chip { cursor: pointer; }
.cal-views .chip.on { background: var(--color-accent, #5b87ff); color: var(--color-accent-text, #fff); border-color: var(--color-accent, #5b87ff); }
/* week / day time grid */
.tg { border: 1px solid var(--color-border, #232e3d); border-radius: var(--radius, 12px); overflow: hidden; background: var(--color-surface, #0f1620); }
.tg-head, .tg-allday, .tg-grid { display: flex; }
.tg-corner, .tg-lbl, .tg-hours { flex: 0 0 56px; width: 56px; }
.tg-lbl { font-size: 10px; color: var(--color-muted, #8593a6); padding: 3px 6px; text-transform: uppercase; letter-spacing: .04em; }
.tg-head { background: var(--color-surface2, #18212e); border-bottom: 1px solid var(--color-border, #232e3d); }
.tg-dayhead { flex: 1; text-align: center; padding: 6px 4px; font-size: 12px; color: var(--color-muted, #8593a6); border-left: 1px solid var(--color-border, #232e3d); }
.tg-dayhead b { color: var(--color-text, #e8edf4); font-size: 15px; }
.tg-dayhead.today b { color: var(--color-accent, #5b87ff); }
.tg-allday { min-height: 26px; border-bottom: 1px solid var(--color-border, #232e3d); }
.tg-adcol { flex: 1; border-left: 1px solid var(--color-border, #232e3d); padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.tg-scroll { max-height: 560px; overflow-y: auto; }
.tg-grid { position: relative; }
.tg-hour { font-size: 10px; color: var(--color-muted, #8593a6); text-align: right; padding-right: 6px; border-top: 1px solid var(--color-border, #232e3d); box-sizing: border-box; }
.tg-daycol { flex: 1; position: relative; border-left: 1px solid var(--color-border, #232e3d); cursor: pointer; }
.tg-line { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--color-border, #232e3d) 60%, transparent); }
.tg-ev { position: absolute; left: 2px; right: 2px; border-radius: 6px; color: #fff; font-size: 11px; line-height: 1.2; padding: 2px 5px; overflow: hidden; background: var(--color-accent, #5b87ff); }
.tg-ev:hover { text-decoration: none; filter: brightness(1.1); }
.tg-sel { position: absolute; left: 2px; right: 2px; background: color-mix(in srgb, var(--color-accent, #5b87ff) 30%, transparent); border: 1px solid var(--color-accent, #5b87ff); border-radius: 6px; pointer-events: none; }
@media (max-width: 720px) { .cal-day { min-height: 72px; } .cal-job { font-size: 10px; } }

/* ---------- permission grid (Yes / No / Never) ---------- */
.permform { display: flex; flex-direction: column; gap: 14px; }
.permsec { background: var(--color-surface, #111824); border: 1px solid var(--color-border, #232e3d); border-radius: var(--radius, 13px); box-shadow: var(--shadow); overflow: hidden; }
.permsec h3 { margin: 0; padding: 12px 18px; font-size: 13.5px; font-weight: 650; color: var(--color-accent, #5b87ff); border-bottom: 1px solid var(--color-border, #232e3d); background: var(--color-surface2, #18212e); }
.prow { display: flex; align-items: center; gap: 20px; padding: 9px 18px; border-bottom: 1px solid var(--color-border, #232e3d); }
.prow:last-child { border-bottom: 0; }
.plabel { flex: 0 0 260px; text-align: right; font-size: 13px; color: var(--color-text, #e8edf4); }
.popts { display: flex; gap: 10px; flex-wrap: wrap; }
.popt { position: relative; cursor: pointer; }
.popt input { position: absolute; opacity: 0; width: 0; height: 0; }
.popt span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--color-border, #232e3d); color: var(--color-muted, #8593a6); font-size: 13px; font-weight: 600; }
.popt span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-border, #232e3d); box-sizing: border-box; }
.popt input:focus-visible + span { outline: 2px solid var(--color-accent, #5b87ff); outline-offset: 1px; }
.popt.p-yes input:checked + span { background: var(--color-ok, #22c55e); color: #fff; border-color: transparent; }
.popt.p-no input:checked + span { background: var(--color-warn, #f59e0b); color: #fff; border-color: transparent; }
.popt.p-never input:checked + span { background: var(--color-danger, #ef4444); color: #fff; border-color: transparent; }
.popt input:checked + span::before { border-color: #fff; background: #fff; }
.permsave { display: flex; justify-content: flex-start; }
.grouppick { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.grow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 1px solid var(--color-border, #232e3d); border-radius: var(--radius-sm, 8px); }
.grow .base { color: var(--color-muted, #8593a6); font-size: 12px; }
.cdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(255,255,255,.25); }
.colourrow { flex-direction: row !important; align-items: center; gap: 12px !important; }
.colourrow input[type=color] { width: 46px; height: 30px; padding: 0; border: 1px solid var(--color-border, #232e3d); border-radius: 8px; background: none; cursor: pointer; }

@media (max-width: 720px) { .plabel { flex-basis: auto; text-align: left; } .prow { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ---------- theme selector (bottom-left dropdown) ---------- */
.theme-fab { position: fixed; left: 16px; bottom: 16px; z-index: 60; }
.theme-btn {
  background: var(--color-surface, #111824); color: var(--color-text, #e8edf4);
  border: 1px solid var(--color-border, #232e3d); border-radius: 999px;
  padding: 9px 15px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.5));
}
.theme-btn:hover { border-color: var(--color-accent, #5b87ff); filter: none; }
.theme-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 190px;
  background: var(--color-surface, #111824); border: 1px solid var(--color-border, #232e3d);
  border-radius: var(--radius, 13px); box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35));
  padding: 6px; display: none; flex-direction: column; gap: 2px;
}
.theme-fab:hover .theme-menu, .theme-fab:focus-within .theme-menu { display: flex; }
.theme-opt {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm, 8px);
  color: var(--color-text, #e8edf4); font-size: .85rem;
}
.theme-opt:hover { background: var(--color-surface2, #18212e); text-decoration: none; }
.theme-opt.on { background: var(--color-accent-soft, rgba(91,135,255,.18)); color: var(--color-accent, #5b87ff); font-weight: 600; }

@media (max-width: 820px) {
  .statrow { grid-template-columns: repeat(2, 1fr); }
  .admin-shell { flex-direction: column; }
  .sidebar { width: auto; flex-basis: auto; }
}
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

/* ---- Job sheets (installations) ---------------------------------- */
.js-tag { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:600; color:#fff; }
.js-life { background:#dc2626; }        /* life safety = red */
.js-intruder { background:#2563eb; }    /* intruder = blue */
.js-access { background:#16a34a; }       /* access = green */
.js-general { background:#6b7280; }      /* general = grey */
.sum-pass { background:#16a34a; color:#fff; }
.sum-fail { background:#dc2626; color:#fff; }
.sum-corrective { background:#d97706; color:#fff; }
.sum-condemned { background:#111827; color:#fff; }
.js-sheet { border-left:5px solid #6b7280; }
.js-sheet.js-life { border-left-color:#dc2626; }
.js-sheet.js-intruder { border-left-color:#2563eb; }
.js-sheet.js-access { border-left-color:#16a34a; }
.js-head { display:flex; flex-wrap:wrap; gap:2rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1rem; }
.grid2 label { display:flex; flex-direction:column; gap:.25rem; }
.js-form .card h3 { margin-top:0; }
.js-checks, .js-force { width:100%; }
.js-checks input, .js-force input, .js-checks select { width:100%; }
.js-force td.num input { text-align:right; }
.js-add input, .js-add select { background:rgba(127,127,127,.06); }
.js-photos { display:flex; flex-wrap:wrap; gap:1rem; }
.js-photo { margin:0; width:180px; }
.js-photo img { width:100%; height:130px; object-fit:cover; border-radius:8px; display:block; }
.js-upload { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:1rem; }
.chip.danger { background:var(--color-danger,#ef4444); color:#fff; }

/* ---- SSAIB certification set ------------------------------------- */
.cert-set { width:100%; }
.cert-set td.right, .cert-set th.right, td.right { text-align:right; }
.cert-set td.right .chip { margin-left:.25rem; }
.cert-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.cert-actions form.inline { display:inline; margin:0; }

/* ---- Installation asset list ------------------------------------- */
.asset-list { width:100%; }
.asset-list input, .asset-list select { width:100%; }
.asset-list td.right { white-space:nowrap; }
.asset-list tr.asset-add input, .asset-list tr.asset-add select { background:rgba(127,127,127,.06); }

/* ---- Maintenance schedule + KPI --------------------------------- */
.kpi-big { font-size:1.4rem; } .kpi-big.good { color:#16a34a; } .kpi-big.ok { color:#d97706; } .kpi-big.bad { color:#dc2626; }
.kpi-table { width:100%; }
.kpi-bar { display:inline-block; width:120px; height:10px; background:rgba(127,127,127,.2); border-radius:6px; overflow:hidden; vertical-align:middle; }
.kpi-fill { display:block; height:100%; }
.kpi-fill.good { background:#16a34a; } .kpi-fill.ok { background:#d97706; } .kpi-fill.bad { background:#dc2626; }
.kpi-pct { margin-left:.5rem; font-size:.85rem; }
.maint-month { margin:1.2rem 0 .3rem; }
.maint-list { width:100%; }
.maint-rec { display:flex; gap:.4rem; align-items:center; margin:0; flex-wrap:wrap; }
.maint-rec input { min-width:120px; }
.pill.danger { background:#dc2626; color:#fff; }

/* ---- RAMS (risk assessment + method statement) ------------------ */
.rams-hz, .rams-st { width:100%; }
.rams-hz input, .rams-st input { width:100%; }
.rams-hz td.num { width:52px; } .rams-hz td.num input { text-align:center; }
.risk { display:inline-block; min-width:26px; text-align:center; padding:2px 8px; border-radius:10px; color:#fff; font-weight:600; font-size:.8rem; }
.risk-low { background:#16a34a; } .risk-med { background:#d97706; } .risk-high { background:#ea580c; } .risk-crit { background:#dc2626; }
.rams-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.rams-actions form.inline { display:inline; margin:0; }
.rams-send { display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; margin:.75rem 0; }
.rams-send label { flex:1; min-width:240px; }

ul.plain{list-style:none;padding:0;margin:.25rem 0}
ul.plain li{padding:.15rem 0}

/* ---- Customer portal ---- */
.portal-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.6rem 1rem; margin-bottom:1rem; border:1px solid rgba(127,127,127,.2); border-radius:10px; }
.portal-nav a { margin-left:1rem; }

/* ---- EPIC theme: purple→pink→indigo gradient accents ----
   Uses --accent-grad when a theme defines it (EPIC), else falls back to the solid accent. */
button[type="submit"], .auth button, .btn:not(.danger), a.btn:not(.danger) { background: var(--accent-grad, var(--color-accent, #9d5cff)); border: 0; color: var(--color-accent-text, #fff); }
.chip.on, .pill.accent { background: var(--accent-grad, var(--color-accent, #9d5cff)); color: var(--color-accent-text, #fff); }
.brand::before { background: var(--accent-grad, var(--color-accent, #9d5cff)); }
.kpi-big.good, .kpi-fill.good { }