/* Soft light theme: off-white surfaces and dark-grey (not black) text, gentle on the eyes without being dark. */
:root {
  color-scheme: light;
  --bg: #e9eff2; --card: #f8fbfb; --ink: #2b3845; --muted: #607080; --line: #d3dce2;
  --brand: #2a7f66; --brand-ink: #ffffff; --accent: #dff0e8; --warn: #a85c0e; --danger: #b3382e; --chip: #e0e8ed;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, "Segoe UI", sans-serif; }
a { color: var(--brand); }
.top { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand small { font-weight: 400; color: var(--muted); }
.logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--brand); color: var(--brand-ink); }
nav a { margin-right: 2px; padding: 7px 9px; white-space: nowrap; border-radius: 8px; text-decoration: none; color: var(--ink); }
nav a.on { background: var(--accent); color: var(--brand); font-weight: 600; }
main { max-width: 1150px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
button, .btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); cursor: pointer; text-decoration: none; display: inline-block; }
button.primary, .btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600; }
button.danger { color: var(--danger); }
button:disabled { opacity: .5; cursor: default; }
.search { flex: 1 1 260px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* register tables (RAMS, inspections, observations): use the whole screen and wrap text, so no sideways scrolling is needed */
main.wide { max-width: none; padding-left: 18px; padding-right: 18px; }
table.register { font-size: 13px; }
table.register th, table.register td { padding: 6px 5px; overflow-wrap: anywhere; }
table.register th { font-size: 11px; letter-spacing: .02em; }
table.register th.nowrap, table.register td.nowrap { white-space: nowrap; overflow-wrap: normal; }
table.register td.wide { width: 24%; }
.wide-modal { width: min(820px, 96vw); max-height: 92vh; }
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 13px; }
.cat input { padding: 4px 6px; }
.catgrid { align-items: start; }
.cat-wrap { display: flex; flex-direction: column; gap: 4px; }
.cat-notes { display: grid; gap: 4px; padding: 6px; border: 1px dashed var(--brand); border-radius: 8px; background: var(--accent); }
.cat-notes textarea { width: 100%; font-size: 13px; min-height: 34px; resize: vertical; }
.cat-peek { text-align: left; font-size: 12px; padding: 3px 8px; border-radius: 6px; color: var(--brand); background: var(--accent); border-color: transparent; }
.hist { padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.hist:first-child { border-top: 0; }
.hist-change { padding-left: 10px; overflow-wrap: anywhere; }
#notes textarea { width: 100%; }
.note { border-top: 1px solid var(--line); padding: 10px 0 2px; margin-top: 10px; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-meta { font-size: 12px; margin-top: 4px; }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--brand); }
th.sortable .arrow { opacity: .35; }
th.sorted { color: var(--brand); }
th.sorted .arrow { opacity: 1; }
tbody tr.link { cursor: pointer; }
tbody tr.link:hover { background: var(--accent); }
.chip { display: inline-block; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 99px; background: var(--chip); font-size: 12px; white-space: nowrap; }
.chip.ok { background: var(--accent); color: var(--brand); }
.chip.warn { background: transparent; color: var(--warn); border: 1px dashed var(--warn); }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.profile-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 700; background: var(--accent); color: var(--brand); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.editable { cursor: pointer; position: relative; }
.avatar .edit-badge { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 13px; display: grid; place-items: center; opacity: .85; }
.avatar.editable:hover .edit-badge { opacity: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 .full { grid-column: 1 / -1; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.f input, label.f select, label.f textarea { color: var(--ink); font-size: 15px; }
.certs { display: flex; flex-wrap: wrap; gap: 8px; }
.certs label { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.certs label:has(input:checked) { background: var(--accent); border-color: var(--brand); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.photo { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.photo img { width: 100%; height: 120px; object-fit: cover; display: block; cursor: zoom-in; }
.photo div { padding: 6px 8px; font-size: 12px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.photo button { padding: 1px 7px; font-size: 12px; }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); margin-top: 12px; }
.drop.over { border-color: var(--brand); background: var(--accent); }
/* drop-down you can type in */
.combo { position: relative; }
.combo input { width: 100%; padding-right: 34px; }
.combo-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px; padding: 0; border: 0; border-radius: 0 7px 7px 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.combo-toggle:hover { background: var(--accent); color: var(--brand); }
.combo-menu { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(43, 56, 69, .18); z-index: 40; }
.combo-opt { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; cursor: pointer; }
.combo-opt:hover, .combo-opt.active { background: var(--accent); }
.combo-empty { padding: 8px 10px; }
.suggest { border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; background: var(--card); max-height: 260px; overflow: auto; }
.suggest button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.suggest button:hover { background: var(--accent); }
.stat { display: inline-block; margin-right: 18px; }
.stat b { font-size: 20px; }
dialog { border: 0; border-radius: 12px; padding: 12px; max-width: 94vw; background: var(--card); }
dialog img { max-width: 90vw; max-height: 80vh; display: block; margin-bottom: 10px; }
dialog::backdrop { background: rgba(43, 56, 69, .4); }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 99px; z-index: 20; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.top .grow { flex: 1; }
.top .me { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 12px; text-align: center; }
.badge.orange { background: #ef8a1f; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; background: var(--chip); }
.tag.admin { background: var(--brand); color: var(--brand-ink); }
.tag.pending { background: #f5d98b; color: #4a3500; }
.tag.approved { background: var(--accent); color: var(--brand); }
.tag.denied, .tag.failed { background: #f6d0cd; color: #7a1610; }
.chip.photo { cursor: pointer; }
.chip.photo:hover { outline: 1px solid var(--brand); }
.issues { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
/* alerts at the top of the Home page */
.alerts { display: grid; gap: 8px; margin-bottom: 14px; }
.alert { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 6px solid var(--brand); background: var(--card); }
.alert.danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--card)); }
.alert.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
.alert.closed { opacity: .65; }
.alert-icon { font-size: 20px; line-height: 1; }
.alert-body { flex: 1; min-width: 0; }
.alert-x { margin-left: 0; padding: 4px 9px; font-size: 14px; }
.alert-more { text-align: right; font-size: 13px; }
@media (max-width: 760px) { .alert { flex-wrap: wrap; } .alert-body { flex-basis: calc(100% - 40px); } }
@media print { .alerts { display: none; } }
.issue { padding: 10px 0; border-top: 1px solid var(--line); }
.issue:first-of-type { border-top: 0; }
.issue h3 { margin: 0 0 2px; font-size: 14px; }
.issue .acts { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.expiry { font-size: 16px; line-height: 1; cursor: help; }
.expiry.expiring { color: #e67e00; }
.expiry.expired { color: #d92d20; }
.ind-expiring { color: #c76a00; }
.ind-expired { color: #d92d20; }
.ind-valid { color: var(--brand); }
tr.done td { background: color-mix(in srgb, #3aa564 20%, var(--card)); }
.warn-icon { color: var(--warn); font-weight: 700; cursor: help; }
.warnbtn.active { background: var(--warn); color: #fff; }
.warnbtn { color: var(--warn); border-color: var(--warn); font-weight: 600; }
.mini { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.sbs .mini.keep { border-color: var(--brand); background: var(--accent); }
.modal { width: min(640px, 94vw); }
.modal h2 { margin-top: 0; }
.modal textarea, .modal .row input { width: 100%; flex: 1 1 140px; }
.login { max-width: 380px; margin: 8vh auto; }
.login input { width: 100%; margin-bottom: 10px; }
.err { color: var(--danger); min-height: 1.4em; }
.pick { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
/* ---- dashboard, search, company page ---- */
dialog { color: var(--ink); }
.bigsearch { width: 100%; font-size: 17px; padding: 12px 14px; }
.search-out { margin-top: 8px; }
.sr-section { margin-top: 14px; }
.sr-item { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.sr-item:hover { background: var(--accent); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); cursor: pointer; }
.kpi:hover { border-color: var(--brand); }
.kpi-n { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--brand); }
.kpi.warn .kpi-n { color: var(--warn); }
.kpi-l { font-weight: 600; margin-top: 2px; }
.kpi-s { color: var(--muted); font-size: 13px; }
.attn { display: grid; gap: 4px; }
.attn a { color: var(--ink); text-decoration: none; padding: 3px 0; }
.attn a:hover { color: var(--brand); }
.attn b { color: var(--warn); font-size: 18px; }
.grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 16px; }
.chart svg { width: 100%; height: auto; display: block; }
.hbar { display: grid; grid-template-columns: minmax(80px, 36%) 1fr 54px; gap: 8px; align-items: center; padding: 3px 0; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { background: var(--chip); border-radius: 99px; height: 10px; overflow: hidden; }
.hbar-track i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.hbar-val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.co-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.co-link:hover { color: var(--brand); border-bottom-color: var(--brand); }
.line { padding: 2px 0; }
td.nowrap { white-space: nowrap; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.theme-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px; }
.theme-card.on { outline: 2px solid var(--brand); }
.theme-card small { color: var(--muted); }
.swatch { display: flex; border-radius: 6px; overflow: hidden; width: 100%; border: 1px solid var(--line); }
.swatch i { flex: 1; height: 22px; }

/* ---- colour themes (each user picks their own; "soft" is the default defined at the top) ---- */
:root[data-theme="sage"] { --bg: #e8efe9; --card: #f7faf7; --ink: #2a3a30; --muted: #5d7064; --line: #d0ddd3; --brand: #3f7d4e; --brand-ink: #fff; --accent: #dcebdf; --chip: #dfe9e1; --warn: #a8620f; --danger: #b3382e; }
:root[data-theme="ocean"] { --bg: #e6f0f5; --card: #f6fafc; --ink: #203544; --muted: #587184; --line: #cfdde6; --brand: #1f7a99; --brand-ink: #fff; --accent: #d9edf4; --chip: #deeaf0; --warn: #a8620f; --danger: #b3382e; }
:root[data-theme="sand"] { --bg: #f1ebe0; --card: #fbf8f2; --ink: #3a3128; --muted: #7a6b5a; --line: #e0d6c6; --brand: #b0602f; --brand-ink: #fff; --accent: #f3e3d3; --chip: #ebe2d4; --warn: #9a5a0c; --danger: #b3382e; }
:root[data-theme="lavender"] { --bg: #ece9f3; --card: #faf9fd; --ink: #2f2a40; --muted: #6b6580; --line: #d9d4e6; --brand: #6a55b0; --brand-ink: #fff; --accent: #e5dff3; --chip: #e4e0ee; --warn: #a8620f; --danger: #b3382e; }
:root[data-theme="rose"] { --bg: #f3e9ec; --card: #fcf8f9; --ink: #3a2a31; --muted: #7d6670; --line: #e6d6db; --brand: #b13a62; --brand-ink: #fff; --accent: #f6dfe6; --chip: #eddde2; --warn: #a8620f; --danger: #a82d2d; }
:root[data-theme="slate"] { --bg: #e7eaee; --card: #f9fafb; --ink: #1f2933; --muted: #5f6b7a; --line: #d3d8df; --brand: #3b5bdb; --brand-ink: #fff; --accent: #dfe5fb; --chip: #e1e5ea; --warn: #a8620f; --danger: #b3382e; }
:root[data-theme="mint"] { --bg: #e5f3ee; --card: #f6fcfa; --ink: #1f3a33; --muted: #55756b; --line: #cbe3da; --brand: #0f9d7a; --brand-ink: #fff; --accent: #d3efe6; --chip: #dcece6; --warn: #a8620f; --danger: #b3382e; }
:root[data-theme="peach"] { --bg: #f6ece6; --card: #fffaf6; --ink: #3c2e29; --muted: #806c63; --line: #ead9cf; --brand: #d2693a; --brand-ink: #fff; --accent: #fadfd1; --chip: #f0e1d8; --warn: #a8620f; --danger: #b3382e; }
:root[data-theme="dusk"] { color-scheme: dark; --bg: #2b3240; --card: #353d4d; --ink: #e6eaf0; --muted: #aab3c2; --line: #465064; --brand: #6cc3a1; --brand-ink: #10241c; --accent: #2f4a47; --chip: #424b5c; --warn: #f0b266; --danger: #ff9a8f; }
:root[data-theme="contrast"] { --bg: #ffffff; --card: #ffffff; --ink: #111111; --muted: #444444; --line: #8a8a8a; --brand: #0b57d0; --brand-ink: #fff; --accent: #e4edff; --chip: #ececec; --warn: #8a4b00; --danger: #a60000; }

@media (max-width: 720px) {
  .sbs { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .top { gap: 10px; padding: 8px 12px; }
  .brand small { display: none; }
}

/* ---- 0.9: Management menu, expandable notes, "+ Add new", compact admin ---- */
.dropdown { position: relative; display: inline-block; }
.dropdown .menu { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 250px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.dropdown .menu[hidden] { display: none; }
.dropdown .menu a { display: block; margin: 0; padding: 8px 10px; }
.dropdown .menu a:hover, nav a:hover { background: var(--accent); }
.dropdown .menu small { display: block; color: var(--muted); font-weight: 400; }
.dd-toggle.on { background: var(--accent); color: var(--brand); font-weight: 600; }
.combo-add { color: var(--brand); font-weight: 600; border-top: 1px solid var(--line); }
textarea.xnote { width: 100%; height: 36px; min-height: 36px; resize: vertical; overflow: hidden; transition: height .15s ease; }
textarea.xnote:focus { height: 120px; overflow: auto; }
tr.expired-row td { color: var(--muted); }
/* admin page */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.admin-grid > .card { margin-bottom: 0; }
.card.compact { padding: 12px 14px; }
.card.compact h2 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.info { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font: italic 700 11px/1 Georgia, serif; cursor: help; position: relative; flex: none; }
.info:hover, .info:focus { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); outline: none; }
.info .tip { display: none; position: absolute; top: 22px; left: -8px; z-index: 40; width: 320px; max-width: 80vw; padding: 9px 11px; border-radius: 8px; background: var(--ink); color: var(--card); font: 400 12.5px/1.4 system-ui, sans-serif; text-align: left; white-space: normal; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.info:hover .tip, .info:focus .tip { display: block; }
.stats-line { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-row button, .btn-row .btn { padding: 5px 10px; font-size: 13px; }
.drop.big { padding: 22px 14px; cursor: pointer; margin-top: 0; }
.drop.big b { color: var(--ink); }
.drop.has-file { border-style: solid; border-color: var(--brand); color: var(--ink); }
table.mini-table td, table.mini-table th { padding: 5px 8px; font-size: 13px; }
details.admin-sec { margin-bottom: 14px; }
details.admin-sec > summary { cursor: pointer; font-weight: 600; padding: 8px 2px; }
.top nav { display: flex; align-items: center; flex-wrap: wrap; }
.top .me { white-space: nowrap; }

.modal textarea.xnote { flex: 0 0 auto; }

/* ---- 0.10: tabs, attachments, legend, paperclip ---- */
.tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.tab { padding: 8px 14px; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.att { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; }
.att-x { padding: 0 7px; line-height: 1.4; border-radius: 6px; margin-left: auto; font-size: 12px; }
.att-drop { margin-top: 8px; padding: 12px; }
.clip { font-size: 12px; white-space: nowrap; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 4px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }

.reref { color: var(--muted); font-size: 13px; white-space: nowrap; }

.history-box > summary { cursor: pointer; }
.history-box[open] > summary { margin-bottom: 6px; }

.upd { margin-top: 10px; }
.upd-label { font-size: 13px; }
.upd-pct { font-variant-numeric: tabular-nums; }
.upd-track { height: 12px; border-radius: 99px; background: var(--chip); overflow: hidden; margin: 6px 0; }
.upd-track i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 99px; transition: width .6s ease; }
.upd-track i.failed { background: #c0392b; }
.upd-steps { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.upd-steps .done { color: var(--brand); } .upd-steps .done::before { content: '✓ '; }
.upd-steps .now { color: var(--ink); font-weight: 700; }
.upd-note { font-size: 12px; margin-top: 4px; }

/* ---- header: version under the name ---- */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand .ver { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .02em; }

/* ---- 0.12: three more soft themes (light, low contrast between surfaces, no pure black or white text) ---- */
/* Studio meadow: misty sky fading into grass, storybook headings */
:root[data-theme="meadow"] { --bg: #edf1e2; --card: #fbfbf3; --ink: #2f3b3a; --muted: #667470; --line: #dbdfcb; --brand: #2f6b8d; --brand-ink: #fff; --accent: #dcecd6; --chip: #e4e9d5; --warn: #a2610f; --danger: #b0392f; }
:root[data-theme="meadow"] body { background: linear-gradient(180deg, #dcebf0 0, #e6f0e6 260px, #edf1e2 520px) fixed; }
:root[data-theme="meadow"] h1, :root[data-theme="meadow"] h2 { font-family: "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: .005em; }
:root[data-theme="meadow"] .card { border-radius: 16px; }
/* Woodland: linen and lichen, moss green, soft rounded corners */
:root[data-theme="woodland"] { --bg: #eeeadb; --card: #fbf9f0; --ink: #34332a; --muted: #6d6a58; --line: #dcd6bf; --brand: #5b6f2f; --brand-ink: #fff; --accent: #e6e8cc; --chip: #e7e2d0; --warn: #a8620f; --danger: #aa392c; }
:root[data-theme="woodland"] body { background: linear-gradient(180deg, #eeeadb 0, #eceedb 60%, #e4e8cf 100%) fixed; }
:root[data-theme="woodland"] .card { border-radius: 16px; }
:root[data-theme="woodland"] button, :root[data-theme="woodland"] .btn { border-radius: 10px; }
/* Soft circuit: graphite with a gentle cyan, a faint grid and monospaced headings */
:root[data-theme="circuit"] { --bg: #e9ecee; --card: #f8f9fa; --ink: #1d2327; --muted: #5b666e; --line: #d4d9dd; --brand: #00798c; --brand-ink: #fff; --accent: #d5eef1; --chip: #dfe3e6; --warn: #a45f0c; --danger: #b0372d; }
:root[data-theme="circuit"] body { background-color: #e9ecee; background-image: linear-gradient(rgba(0, 121, 140, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 121, 140, .045) 1px, transparent 1px); background-size: 28px 28px; background-attachment: fixed; }
:root[data-theme="circuit"] h1, :root[data-theme="circuit"] h2, :root[data-theme="circuit"] .brand { font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; letter-spacing: -.01em; }
:root[data-theme="circuit"] .card { border-radius: 8px; }

/* "Elite": the login page look - a deep green-black stage, emerald accents, gold hairlines and a serif headline */
:root[data-theme="elite"] { color-scheme: dark; --bg: #07110f; --card: #0e1f1a; --ink: #e9f2ee; --muted: #8fa89e; --line: #1f3a30; --brand: #46d6a4; --brand-ink: #04130e; --accent: #123a2e; --chip: #153027; --warn: #e5c07b; --danger: #ff9a8a; --gold: #cdb176; }
:root[data-theme="elite"] body { background: radial-gradient(900px 560px at 6% -8%, #12392f 0%, transparent 62%), radial-gradient(760px 560px at 104% 104%, #0f2d3a 0%, transparent 62%), #07110f fixed; background-attachment: fixed; }
:root[data-theme="elite"] h1, :root[data-theme="elite"] h2 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 400; letter-spacing: .005em; }
:root[data-theme="elite"] h1 { background: linear-gradient(100deg, #f1dfae 0%, #cdb176 50%, #a68c55 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="elite"] .card { border-radius: 16px; border-color: rgba(255,255,255,.08); background: linear-gradient(160deg, rgba(20,40,34,.82), rgba(10,22,19,.86)); box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
:root[data-theme="elite"] .top { background: #091411; border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
:root[data-theme="elite"] .top nav { background: rgba(9,20,17,.92); border-right-color: rgba(255,255,255,.07); }
:root[data-theme="elite"] input, :root[data-theme="elite"] select, :root[data-theme="elite"] textarea { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); border-radius: 10px; }
:root[data-theme="elite"] input:focus, :root[data-theme="elite"] select:focus, :root[data-theme="elite"] textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(70,214,164,.16); }
:root[data-theme="elite"] :where(button, .btn) { border-radius: 10px; }
:root[data-theme="elite"] button.primary, :root[data-theme="elite"] .btn.primary { background: linear-gradient(135deg, #5be4b4, #2fb98a); border-color: transparent; color: var(--brand-ink); }
:root[data-theme="elite"] a { color: #7fe3c0; }
:root[data-theme="elite"] ::selection { background: rgba(205,177,118,.35); }

/* ---- man-hours ---- */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hrs-in { width: 120px; text-align: right; }
table.register tfoot td { border-top: 2px solid var(--line); padding: 8px 10px; }

table.register tbody tr:has(.hrs-in) td { vertical-align: middle; }

/* ================= phone-friendly mode (automatic by screen width) ================= */
.burger { display: none; font-size: 22px; line-height: 1; padding: 6px 12px; }
.mobile-only { display: none; }
.walk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.walk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; min-height: 120px; text-align: left; border-radius: 16px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.walk-tile:hover, .walk-tile:active { border-color: var(--brand); background: var(--accent); }
.walk-tile b { font-size: 17px; }
.walk-tile:disabled { opacity: .5; cursor: not-allowed; }
.walk-tile:disabled:hover { border-color: var(--line); background: var(--card); }
/* the bar under the menu: no connection / entries waiting to upload (offline.js) */
#offline-bar { position: sticky; top: var(--hdr-h, 0); z-index: 6; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: color-mix(in srgb, var(--warn) 14%, var(--card)); border-bottom: 1px solid var(--warn); font-size: 14px; text-align: center; }
#offline-bar[hidden] { display: none; }
#offline-bar button, #offline-bar .btn { padding: 4px 12px; font-size: 13px; }
.pend { align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.pend-main { flex: 1; min-width: 180px; }
.pend-err { color: var(--danger); font-size: 13px; }
/* the top menu: user (name over role), who is online, Alerts and Chat */
.top .me { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.me-user { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.me-user b { font-size: 14px; }
.me-user:hover b { color: var(--brand); text-decoration: underline; }
.team { display: inline-flex; align-items: center; gap: 8px; }
.online { display: inline-flex; align-items: center; padding-left: 6px; }
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--card); background: hsl(var(--h, 160) 45% 82%); color: hsl(var(--h, 160) 55% 22%); font-size: 11px; font-weight: 700; cursor: default; }
.avatar::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #2ea36b; border: 2px solid var(--card); }
.avatar.more::after, .avatar.small::after { display: none; }
.avatar.more { background: var(--chip); color: var(--ink); }
.avatar.self { box-shadow: 0 0 0 2px var(--brand); }
.avatar.small { width: 22px; height: 22px; margin-left: 0; font-size: 9px; border-width: 1px; }
.hdr-btn { padding: 5px 10px; font-size: 13px; white-space: nowrap; }
.hdr-btn .badge { margin-left: 6px; }
.on-home .hdr-print { display: none; }
.panel { position: fixed; z-index: 30; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .2); }
.panel[hidden] { display: none; }
.panel-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 8px 4px 8px 6px; }
.panel-head .muted { margin-right: auto; font-size: 12px; }
#alerts-panel { top: calc(var(--hdr-h, 56px) + 6px); right: 12px; width: min(460px, calc(100vw - 24px)); max-height: 72vh; overflow: auto; padding: 6px 10px 10px; }
#alerts-panel .alerts { margin: 0 0 8px; }
#chat-panel { bottom: 12px; right: 12px; width: min(370px, calc(100vw - 24px)); height: min(480px, 78vh); display: flex; flex-direction: column; padding: 4px 10px 10px; }
#chat-panel[hidden] { display: none; }
.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.msg { max-width: 88%; align-self: flex-start; }
.msg.mine { align-self: flex-end; }
.msg-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 2px; }
.msg.mine .msg-meta { justify-content: flex-end; }
.msg-body { padding: 7px 11px; border-radius: 12px; background: var(--chip); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.msg.mine .msg-body { background: var(--accent); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; }
.chat-form textarea { flex: 1; resize: none; }
@media (max-width: 820px) {
  .top .me { justify-content: flex-start; }
  #alerts-panel { right: 8px; left: 8px; width: auto; }
  #chat-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: 70vh; }
}
@media print { .team, .panel { display: none !important; } }
@media print { #offline-bar { display: none; } }
.walk-tile small { color: var(--muted); font-size: 13px; }
.walk-icon { font-size: 30px; }

@media (max-width: 820px) {
  .top { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .burger { display: inline-flex; order: 0; }
  .brand { order: 1; flex: 1 1 auto; }
  .top .grow { display: none; }
  .top .me { order: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
  .top nav { order: 3; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
  .top.nav-open nav { display: flex; }
  .top nav a { margin: 0; padding: 12px 10px; font-size: 16px; }
  .mobile-only { display: block; }
  .dropdown { display: block; }
  .dropdown .menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; background: transparent; }
  .dropdown .menu a { padding: 12px 10px; }
  main { padding: 14px 10px 50px; }
  h1 { font-size: 20px; }
  .row { gap: 8px; }
  input, select, textarea { font-size: 16px; }   /* 16px stops phones zooming in when a box is tapped */
  button, .btn { min-height: 42px; }
  .search, .bigsearch { width: 100%; flex: 1 1 100%; }
  .filters select, .card .row select { flex: 1 1 140px; }
  .grid2 { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .modal, dialog.modal { width: 100vw; max-width: 100vw; margin: 0; max-height: 100vh; border-radius: 0; padding: 14px 12px; }
  .modal .row.end { position: sticky; bottom: 0; background: var(--card); padding: 10px 0; }
  .upd-steps { font-size: 10px; }
  .tabs { overflow-x: auto; white-space: nowrap; }
  .pager { flex-wrap: wrap; }
  .hide-sm { display: none; }
}
@media (max-width: 760px) {
  /* tables become a stack of cards: one card per row, each value with its column heading */
  table.cardify { display: block; width: 100%; }
  table.cardify thead { display: none; }
  table.cardify tbody, table.cardify tfoot { display: block; }
  table.cardify tr { display: block; margin: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  table.cardify td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
  table.cardify td::before { content: attr(data-label); flex: 0 0 36%; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  table.cardify td[data-label=""]::before { display: none; }
  table.cardify td[colspan] { display: block; text-align: left; }
  table.cardify tr.done { background: color-mix(in srgb, #3aa564 20%, var(--card)); }
  table.cardify tr.done td { background: transparent; }
  .hrs-in { width: 110px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-n { font-size: 24px; }
}
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr; }
  .walk-grid { grid-template-columns: 1fr 1fr; }
  .walk-tile { min-height: 100px; padding: 14px; }
  .brand small:not(.ver) { display: none; }
}

@media (max-width: 760px) { table.cardify td { flex-wrap: wrap; } table.cardify td > .chip, table.cardify td > .tag { margin: 2px 0 2px 4px; } }

/* ---- Home: project tracker ---- */
.tracker { background: linear-gradient(135deg, var(--card) 0%, var(--accent) 100%); }
.tr-tab { padding: 5px 12px; font-size: 13px; }
.tr-tab.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.tr-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.5fr); gap: 20px; margin-top: 14px; align-items: center; }
.tr-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tr-big { font-size: 44px; font-weight: 800; line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.tr-mid { display: inline; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-line { margin-top: 2px; color: var(--ink); }
.tr-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.tr-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.tr-unit { background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; }
.tr-num { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-unit .tr-label { margin-top: 2px; }
.tr-unit .tr-sub { font-size: 12px; }
@media (max-width: 820px) { .tr-grid { grid-template-columns: 1fr; } .tr-big { font-size: 36px; } .tr-units { grid-template-columns: 1fr 1fr; } }

/* ---- chart tooltip, activity calendar ---- */
#chart-tip { position: fixed; z-index: 100; pointer-events: none; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--card); font-size: 12.5px; line-height: 1.4; white-space: pre-line; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.heatmap { overflow-x: auto; }
.heatmap svg { display: block; }
.chart svg [data-tip]:hover rect:not([fill="transparent"]) { filter: brightness(1.08); }

/* ---- Daily Diary ---- */
table.dd2 td { padding: 4px 6px; vertical-align: top; }
table.dd2 input:not([type=checkbox]), table.dd2 textarea { width: 100%; }
.dd-co { min-width: 190px; } .dd-sup { min-width: 130px; } .dd-work { min-width: 240px; } .dd-grid { min-width: 120px; } .dd-cjr { min-width: 70px; }
.dd-num { width: 58px !important; text-align: right; }
.dd-flag { text-align: center; }
.dd-flag input { width: 18px; height: 18px; }
table.dd2 .dd-totals td { border-top: 2px solid var(--line); padding: 8px 6px; }
.print-only { display: none; }
.dd-ptitle, .dd-pfoot { display: none; }
   /* the title block and the bottom margin of the paper version */

/* ================= login page =================
   Always dark (whatever theme the user keeps): a deep green-black stage, a gold hairline, a frosted card. */
body.on-login { background: #07110f; }
body.on-login main { max-width: none; padding: 0; margin: 0; width: auto; }
.lg { --lg-ink: #e9f2ee; --lg-mut: #8fa89e; --lg-gold: #cdb176; --lg-em: #46d6a4; position: relative; overflow: hidden; min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1.2fr) minmax(360px, 1fr); color: var(--lg-ink);
  background: radial-gradient(1000px 640px at 8% -10%, #12392f 0%, transparent 62%), radial-gradient(800px 600px at 105% 105%, #0f2d3a 0%, transparent 62%), #07110f; }
.lg::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 72%); }
.lg-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .5; animation: lgFloat 16s ease-in-out infinite alternate; }
.lg-orb.o1 { width: 420px; height: 420px; left: -120px; top: 20%; background: #1c6b55; }
.lg-orb.o2 { width: 360px; height: 360px; right: -80px; bottom: -80px; background: #1d4f6b; animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes lgFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.15); } }
.lg-side { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 56px clamp(28px, 7vw, 110px); }
.lg-brand { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--lg-ink); }
.lg-mono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--lg-gold);
  border: 1px solid color-mix(in srgb, var(--lg-gold) 55%, transparent); background: linear-gradient(145deg, rgba(205,177,118,.16), rgba(205,177,118,.02)); box-shadow: 0 0 24px rgba(205,177,118,.12), inset 0 0 12px rgba(205,177,118,.08); }
.lg-rule { width: 64px; height: 1px; margin: 22px 0 4px; background: linear-gradient(90deg, var(--lg-gold), transparent); }
.lg-title { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 400; font-size: clamp(38px, 5vw, 66px); line-height: 1.04; margin: 0; letter-spacing: -.015em; }
.lg-title em { display: block; font-style: italic; background: linear-gradient(100deg, #f1dfae 0%, #cdb176 45%, #9d8450 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-lead { max-width: 470px; font-size: 16px; line-height: 1.6; color: var(--lg-mut); margin: 6px 0 0; }
.lg-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; max-width: 470px; }
.lg-list li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: #c4d6ce; }
.lg-list li i { flex: none; width: 22px; height: 1px; background: var(--lg-gold); opacity: .8; }
.lg-foot { margin-top: 30px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #5f7a70; }
.lg-card { position: relative; z-index: 1; align-self: center; justify-self: center; width: min(420px, calc(100% - 32px)); margin: 28px 0; padding: 38px 34px 34px; display: grid; gap: 14px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(20,40,34,.78), rgba(10,22,19,.82)); border: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.lg-card::before { content: ''; position: absolute; left: 34px; right: 34px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--lg-gold), transparent); }
.lg-card-logo .lg-mono { width: 48px; height: 48px; }
.lg-h2 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 400; font-size: 30px; margin: 6px 0 0; color: #fff; }
.lg-card p { margin: 0; }
.lg-card .muted { color: var(--lg-mut); font-size: 14px; }
.lg-card label.f { display: grid; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lg-mut); }
.lg-card input, body.on-login .lg-card label.f input { padding: 13px 14px; font-size: 15px; letter-spacing: 0; text-transform: none; color: #ecd79b !important; -webkit-text-fill-color: #ecd79b !important; caret-color: #ecd79b; color-scheme: dark; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; transition: border-color .2s, box-shadow .2s, background .2s; }
.lg-card input::placeholder { color: #6a7f74; -webkit-text-fill-color: #6a7f74; opacity: 1; }
.lg-card input:focus, body.on-login .lg-card label.f input:focus { outline: 0; border-color: var(--lg-em); background: rgba(70,214,164,.07); box-shadow: 0 0 0 4px rgba(70,214,164,.14); }
.lg-card input:-webkit-autofill, .lg-card input:-webkit-autofill:hover, .lg-card input:-webkit-autofill:focus, .lg-card input:-webkit-autofill:active { -webkit-text-fill-color: #ecd79b !important; caret-color: #ecd79b; box-shadow: 0 0 0 100px #12261f inset !important; transition: background-color 9999s ease-out 0s; }
.lg-card input:autofill { -webkit-text-fill-color: #ecd79b !important; color: #ecd79b !important; box-shadow: 0 0 0 100px #12261f inset !important; }
.lg-card input::selection { background: rgba(205,177,118,.35); }
.lg-pass { position: relative; display: flex; }
.lg-pass input { flex: 1; padding-right: 46px; }
.lg-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 6px 9px; cursor: pointer; opacity: .6; filter: grayscale(1) brightness(1.6); }
.lg-eye:hover { opacity: 1; }
.lg-card .lg-go { margin-top: 6px; padding: 14px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #04130e; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, #5be4b4, #2fb98a); box-shadow: 0 10px 28px rgba(47,185,138,.28); transition: transform .15s, box-shadow .2s, filter .2s; }
.lg-card .lg-go:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(47,185,138,.38); filter: brightness(1.05); }
.lg-card .lg-go:active { transform: none; }
.lg-card .lg-go:disabled { opacity: .6; cursor: wait; transform: none; }
.lg-card .err { min-height: 1.2em; color: #ff9a8a; font-size: 13.5px; }
.lg-side > *, .lg-card { animation: lgIn .6s ease both; }
.lg-title { animation-delay: .06s; } .lg-lead { animation-delay: .12s; } .lg-list { animation-delay: .18s; } .lg-card { animation-delay: .12s; }
@keyframes lgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .lg { grid-template-columns: 1fr; }
  .lg-side { padding: 30px 24px 38px; gap: 10px; }
  .lg-list, .lg-lead, .lg-rule { display: none; }
  .lg-title { font-size: 32px; margin-top: 8px; }
  .lg-card { margin: -14px auto 28px; padding: 30px 24px 26px; }
}

/* ================= the animation between logging in and the landing page (welcome.js) ================= */
.wc { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; color: #e9f2ee; transition: opacity .45s ease;
  background: radial-gradient(700px 500px at 50% 42%, #14443a 0%, transparent 70%), radial-gradient(900px 600px at 100% 100%, #0f2d3a 0%, transparent 65%), #07110f; }
.wc.out { opacity: 0; pointer-events: none; }
.wc-box { display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; animation: lgIn .5s ease both; }
.wc-art { width: min(320px, 66vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.1), rgba(255,255,255,.02) 68%); border: 1px solid rgba(205,177,118,.28); box-shadow: 0 0 60px rgba(70,214,164,.1), inset 0 0 40px rgba(0,0,0,.25); overflow: hidden; }
.wc-art svg { width: 100%; height: 100%; display: block; }
.wc-hello { margin-top: 14px; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 28px; color: #fff; }
.wc-sub { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: #8fa89e; }
.wc-dots i { display: inline-block; width: 4px; height: 4px; margin-left: 4px; border-radius: 50%; background: #cdb176; animation: wcDot 1.2s ease-in-out infinite; }
.wc-dots i:nth-child(2) { animation-delay: .15s; } .wc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes wcDot { 0%, 80%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.wc-bar { width: 150px; height: 2px; margin-top: 6px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.wc-bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, #cdb176, transparent); animation: wcBar 1.3s ease-in-out infinite; }
@keyframes wcBar { from { transform: translateX(-110%); } to { transform: translateX(270%); } }
/* the characters are drawn and moved by welcome.js; only the plain HS ring is animated here */
@keyframes wcSpin { to { transform: rotate(360deg); } }
.wc-ring { transform-origin: 100px 100px; animation: wcSpin 1.4s linear infinite; }

/* ================= gentle motion (transform and opacity only, so it never slows a page down) ================= */
#app.page-in > * { animation: pageIn .22s ease both; }
#app.page-in > *:nth-child(2) { animation-delay: .03s; } #app.page-in > *:nth-child(3) { animation-delay: .06s; } #app.page-in > *:nth-child(n+4) { animation-delay: .09s; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.skeleton { display: grid; gap: 14px; padding-top: 8px; }
.skeleton i { display: block; border-radius: 12px; background: linear-gradient(90deg, var(--chip) 25%, var(--accent) 50%, var(--chip) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.sk-h { height: 28px; width: 40%; } .sk-b { height: 90px; } .sk-b.short { width: 65%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.hdr-icon { padding: 5px 9px; }
.hdr-icon svg { display: block; }
@media (prefers-reduced-motion: reduce) { #app.page-in > *, .lg-side > *, .lg-card, .skeleton i, .upd-track i { animation: none !important; transition: none !important; } }

/* ================= search overlay (Ctrl+F) ================= */
.so-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(20, 30, 40, .35); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 12px 0; animation: soIn .12s ease; }
@keyframes soIn { from { opacity: 0; } to { opacity: 1; } }
.so-box { width: min(640px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.28); overflow: hidden; }
.so-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 18px; font-size: 17px; background: transparent; }
.so-input:focus { outline: none; }
.so-list { max-height: 56vh; overflow: auto; padding: 6px 0 8px; }
.so-hint { padding: 12px 18px; }
/* each kind of result (People, RAMS ...) has its own coloured band, which stays at the top while its results scroll */
.so-sec { position: sticky; top: 0; z-index: 1; margin-top: 8px; padding: 7px 18px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, var(--card)); border-top: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-left: 4px solid var(--brand); }
.so-list > .so-sec:first-child { margin-top: 0; }
.sr-section > .row:first-child { padding: 6px 10px; border-radius: 8px; border-left: 4px solid var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--card)); margin-bottom: 4px; }
.so-item { display: flex; justify-content: space-between; gap: 14px; padding: 8px 18px; cursor: pointer; }
.so-item.on, .so-item:hover { background: var(--accent); }
.so-item span { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .hdr-icon[aria-label="Print"] { display: none; } }

/* ================= printing (to a printer or "Save as PDF") ================= */
@media print {
  :root, :root[data-theme] { --bg: #fff !important; --card: #fff !important; --ink: #111 !important; --muted: #555 !important; --line: #c8c8c8 !important; --accent: #efefef !important; --chip: #efefef !important; --brand: #1f6f58 !important; --brand-ink: #fff !important; color-scheme: light !important; }
  body, :root[data-theme] body { background: #fff !important; color: #111; font-size: 11pt; }
  #top, nav, .no-print, button, .btn, .pager, .tabs, .warnbtn, #toast, #chart-tip, .so-wrap, .att-x, .combo-toggle, input[type=search], .legend-controls, .burger, .skeleton { display: none !important; }
  .print-only { display: block !important; }
  .print-title { font-size: 15pt; font-weight: 700; margin: 0 0 8px; }
  main, #app, #app.wide { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  #app.page-in > * { animation: none !important; }
  .card, .kpi { box-shadow: none !important; border: 1px solid #c8c8c8 !important; background: #fff !important; break-inside: avoid; }
  .tracker { background: #fff !important; }
  select, input, textarea { border: 0 !important; background: transparent !important; padding: 0 !important; appearance: none; -webkit-appearance: none; resize: none; box-shadow: none !important; }
  textarea.xnote { height: auto !important; overflow: visible !important; }
  table { width: 100% !important; border-collapse: collapse; }
  table.cardify { display: table !important; } table.cardify thead { display: table-header-group !important; } table.cardify tbody { display: table-row-group !important; } table.cardify tfoot { display: table-footer-group !important; }
  table.cardify tr { display: table-row !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } table.cardify td { display: table-cell !important; text-align: left !important; } table.cardify td::before { display: none !important; }
  thead { display: table-header-group; } tfoot { display: table-footer-group; }
  tr { break-inside: avoid; } th, td { border-bottom: 1px solid #ddd; padding: 3px 5px !important; font-size: 9.5pt; }
  .card[style*="overflow"] { overflow: visible !important; }
  .chart svg, .heatmap svg { max-width: 100%; height: auto; }
  .heatmap { overflow: visible; }
  .grid-charts, .kpis { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  dialog { display: none !important; }
  /* the whole register (all pages, not just the 50 on screen) is built into #print-all by "Print all" */
  body.printing-all #app { display: none !important; }
  body.printing-all #print-all { display: block !important; }
  .print-head { display: block !important; border-bottom: 2px solid #1f6f58; margin-bottom: 8px; padding-bottom: 4px; font-size: 9pt; color: #444; }
}
.print-head, #print-all { display: none; }

/* ================= no up/down arrows in number boxes (numbers are typed) ================= */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ================= table headings stay put while a list scrolls =================
   A scrolling wrapper would trap them, so wrappers that only hold a table stop being scroll containers (a table that is wider than the
   screen then scrolls with the page); wrappers with their own max-height keep scrolling and their headings stick inside them. */
div:has(> table):not([style*="max-height"])[style*="overflow"] { overflow: visible !important; }
#app table thead th { position: sticky; top: var(--hdr-h, 56px); z-index: 4; background: var(--card); box-shadow: 0 1px 0 var(--line); }
div[style*="max-height"] > table thead th, div[style*="max-height"] table thead th { top: 0; }
table.dd2 { min-width: 0; table-layout: auto; }
table.dd2 td, table.dd2 th { padding: 5px 7px; vertical-align: middle; }
table.dd2 th { font-size: 11px; }
.dd-work { min-width: 200px; max-width: 360px; white-space: normal; }
.dd-co { min-width: 140px; }
.dd-act { width: 1%; }
@media print { #app table thead th { position: static; box-shadow: none; } }
@media (max-width: 760px) { #app table thead th { position: static; } }

/* diary columns: readable widths (the page scrolls sideways on a narrow screen rather than squeezing the text) */
table.dd2 td, table.dd2 th { overflow-wrap: break-word; }
table.dd2 th { white-space: nowrap; }
table.dd2 td.num { width: 64px; }

/* ---- Daily Diary on paper: A4 portrait, the table fits the page, only contractors with people, no buttons, no permit columns ---- */
@media print {
  .diary-card { overflow: visible !important; border: 0 !important; }
  table.dd2 { min-width: 0 !important; width: 100% !important; table-layout: fixed; font-size: 8.5pt; border-collapse: collapse; }
  table.dd2 th, table.dd2 td { white-space: normal !important; overflow-wrap: anywhere; padding: 3px 4px !important; font-size: 8.5pt !important; vertical-align: middle; border: 1px solid #bbb; }
  table.dd2 thead th { background: #eee !important; font-size: 7.5pt !important; line-height: 1.15; text-transform: uppercase; }
  /* permits and hazards (columns 10-18) and the edit buttons (19) are left off the paper */
  table.dd2 th:nth-child(n+10), table.dd2 td:nth-child(n+10), .dd-act { display: none !important; }
  /* the typing boxes become plain numbers that stay inside their column */
  table.dd2 td.num input, table.dd2 .dd-num { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; text-align: right; font-size: 8.5pt !important; }
  table.dd2.print-active-only tr.dd-empty { display: none !important; }
  table.dd2 tr { break-inside: avoid; }
  .print-title { font-size: 13pt; }
}
@media print {
  #app:has(> .print-title) > .row:first-child h1 { display: none; }   /* the printed title line already says it */
  ::placeholder { color: transparent !important; }
}

@media print { table.dd2 .dd-totals td.num { text-align: right !important; } }

/* a card that holds a long table must be allowed to split across pages (otherwise the whole table jumps to page 2 and page 1 stays blank) */
@media print { .card:has(> table), .card:has(> div > table), .diary-card, div:has(> table.register) { break-inside: auto !important; page-break-inside: auto !important; } }

/* ---- dashboards: things you can click ---- */
.chart.clickable [data-go], .heatmap.clickable [data-go] { cursor: pointer; }
.kpi-link { cursor: pointer; }
.kpi-link:hover, .kpi-link:focus { border-color: var(--brand); outline: none; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.hbar.link { cursor: pointer; border-radius: 8px; }
.hbar.link:hover { background: var(--accent); }
.hbar.link:hover .hbar-label { text-decoration: underline; }
.scope-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.scope-chip { display: inline-block; padding: 5px 12px; border-radius: 99px; background: var(--accent); color: var(--brand); font-weight: 600; }

.tag.superadmin { background: var(--brand); color: var(--brand-ink); }

/* ---- pop-up windows: title bar with minimize and close, and the dock of minimized windows ---- */
.win-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: sticky; top: -1px; z-index: 3; background: var(--card); padding-bottom: 6px; }
.win-bar h2 { margin: 0 0 6px; }
.win-btns { display: inline-flex; gap: 2px; flex: none; }
.win-btn { border: 0; background: none; font-size: 18px; line-height: 1; padding: 5px 10px; border-radius: 8px; cursor: pointer; color: var(--muted); }
.win-btn:hover { background: var(--accent); color: var(--ink); }
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 12px; background: color-mix(in srgb, var(--card) 94%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
#dock[hidden] { display: none; }
.dock-chip { display: flex; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; max-width: 260px; }
.dock-open { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 0; background: var(--accent); color: var(--brand); font-weight: 600; padding: 6px 12px; cursor: pointer; }
.dock-x { border: 0; border-radius: 0; background: none; color: var(--muted); padding: 6px 9px; cursor: pointer; }
body:has(#dock:not([hidden])) main { padding-bottom: 80px; }
@media print { #dock { display: none !important; } }

/* ---- inspections: GP / BP, RAMS URN; RAMS: automatic URN ---- */
.finding { display: grid; gap: 4px; margin-bottom: 8px; }
.gpbp-pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gpbp-btn { padding: 3px 11px; font-size: 12.5px; border-radius: 99px; min-height: 0; }
.gpbp-btn.gp.on { background: #2f8f5b; border-color: #2f8f5b; color: #fff; }
.gpbp-btn.bp.on { background: #c0392b; border-color: #c0392b; color: #fff; }
.need-mark { color: var(--danger); font-size: 12.5px; }
.chip.bp { background: #f6d0cd; color: #7a1610; }
.urn-info { min-height: 1.2em; font-size: 13px; }
.auto-wrap { display: flex; gap: 6px; align-items: center; }
.auto-wrap input { flex: 1; }
input.auto-field { background: var(--chip); color: var(--muted); cursor: default; }
/* a printed page is narrow, so the phone rules would hide these columns' headings but not their cells */
@media print { .hide-sm { display: table-cell !important; } }

/* ================= the menu is a column on the left (wide screens); phones keep the ☰ menu ================= */
.xl-icon { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.dropdown .menu a b { display: inline; }
.dropdown .dd-toggle.open { background: var(--accent); }
@media (min-width: 821px) {
  :root { --side: 218px; }
  .top nav { position: fixed; left: 0; top: var(--hdr-h, 56px); bottom: 0; width: var(--side); z-index: 4; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; padding: 10px 8px 16px; overflow-y: auto; background: var(--card); border-right: 1px solid var(--line); }
  .top nav a { display: block; margin: 0; padding: 8px 12px; }
  .top nav a.mobile-only { display: none; }   /* Site walk and Desktop view are for phones */
  .top nav .dropdown { display: block; }
  .top nav .dropdown .menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 10px; min-width: 0; background: transparent; }
  .top nav .dropdown .menu a { padding: 7px 10px; }
  .top nav .dropdown .menu small { font-size: 12px; line-height: 1.25; }
  main { margin-left: calc(var(--side) + max(0px, (100vw - var(--side) - 1150px) / 2)); margin-right: auto; max-width: 1150px; width: auto; }
  main.wide { margin-left: var(--side); max-width: none; }
  #offline-bar { margin-left: var(--side); }
  .top .brand { min-width: calc(var(--side) - 32px); }
}
@media print { .top nav { display: none !important; } main, main.wide, #offline-bar { margin-left: 0 !important; } }

/* ================= Signs and Forms library ================= */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.lib-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.lib-card:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.lib-pic { position: relative; display: grid; place-items: center; height: 130px; border-radius: 8px; background: var(--chip); overflow: hidden; }
.lib-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; }
.lib-pic.has-img img { opacity: 1; }
.lib-pic.has-img .lib-badge { display: none; }
.lib-badge { display: inline-block; padding: 10px 14px; border-radius: 8px; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
td .lib-badge { padding: 2px 8px; font-size: 11px; }
.lib-title { font-weight: 600; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.lib-meta { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lib-cat { padding: 4px 11px; border-radius: 99px; font-size: 13px; }
.lib-cat.on { background: var(--accent); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 6px 12px; }
.seg button.on { background: var(--accent); color: var(--brand); font-weight: 600; }
.lib-preview { min-height: 120px; }
.lib-big { display: block; max-width: 100%; max-height: 66vh; margin: 0 auto 12px; background: #fff; border: 1px solid var(--line); }
.lib-frame { width: 100%; height: 66vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.lib-doc { max-height: 52vh; overflow: auto; padding: 4px 6px; font-size: 14px; }
.lib-doc table.doc { border-collapse: collapse; width: 100%; margin: 8px 0; }
.lib-doc table.doc td { border: 1px solid var(--line); padding: 4px 8px; vertical-align: top; }
.lib-doc h4 { margin: 14px 0 4px; }
.lib-doc p { margin: 4px 0; }
.lib-note { margin-top: 0; }
.lib-print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
@media print { .lib-print-frame { display: none; } }
@media (max-width: 820px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lib-pic { height: 110px; } }
.lib-card { min-width: 0; }
.lib-crumb { margin: 0 0 6px; }
.lib-intro { margin: -6px 0 12px; }
.lib-bigsearch { width: 100%; font-size: 18px; padding: 14px 16px; border-radius: 14px; margin-bottom: 16px; }
.lib-h { margin: 6px 0 10px; }
.lib-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lib-folder { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; min-width: 0; }
.lib-folder:hover { border-color: var(--brand); box-shadow: 0 3px 14px rgba(0, 0, 0, .1); text-decoration: none; }
.lf-icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px; background: var(--accent); font-size: 32px; }
.lf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-text b { font-size: 18px; }
.lf-text small { font-size: 13px; line-height: 1.3; }
.lf-count { color: var(--brand); font-weight: 600; }
.lf-edit { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 8px; opacity: .55; }
.lf-edit:hover { opacity: 1; }
.lib-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-icon { width: 42px; height: 42px; font-size: 22px; padding: 0; border-radius: 10px; }
.lib-icon.on { border-color: var(--brand); background: var(--accent); }
@media (max-width: 820px) { .lib-folders { grid-template-columns: 1fr; } .lib-bigsearch { font-size: 16px; } }

/* ================= folded option cards (Admin, Sync): the title is a button that opens them ================= */
details.fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 700; font-size: 16px; padding: 2px 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--muted); transition: transform .12s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold[open] > summary { margin-bottom: 10px; }
.xl-title { display: flex; align-items: center; gap: 10px; }
.xl-title .xl-icon { margin: 0; }
.xl-title .xl-icon svg { width: 28px; height: 28px; }
.upd-head { font-size: 16px; font-weight: 700; margin-bottom: 6px; }

/* ================= tag box: one or several companies ================= */
.tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.tagbox:focus-within { outline: 2px solid var(--brand); outline-offset: -1px; }
.tagbox .combo { flex: 1 1 150px; min-width: 130px; }
.tagbox .combo input { border: 0; outline: none; background: transparent; padding: 5px 4px; width: 100%; }
.tagbox .combo input:focus { outline: none; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 99px; background: var(--accent); color: var(--brand); font-weight: 600; font-size: 14px; }
.tag-chip button { padding: 0 6px; min-height: 0; line-height: 1.5; border: 0; border-radius: 99px; background: transparent; color: inherit; font-size: 12px; }
.tag-chip button:hover { background: var(--brand); color: var(--brand-ink); }
@media print { .tag-chip button { display: none; } }

/* ================= company merge progress card ================= */
#merge-progress { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; gap: 12px; align-items: flex-start; width: min(390px, calc(100vw - 24px)); padding: 14px 12px 14px 14px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); }
#merge-progress.warn { border-left-color: var(--warn); }
.merge-body { flex: 1; min-width: 0; }
.merge-steps { margin-top: 8px; display: grid; gap: 3px; font-size: 13px; }
.merge-step { display: flex; align-items: center; gap: 8px; }
.merge-step .muted { margin-left: auto; }
.merge-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: mergeSpin .8s linear infinite; flex: none; }
.merge-dot.ok { animation: none; border-color: var(--brand); background: var(--brand); }
.merge-dot.none { animation: none; border-color: var(--line); background: var(--chip); }
.merge-left { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 12%, var(--card)); font-size: 13px; }
.merge-icon { position: relative; width: 34px; height: 34px; flex: none; margin-top: 2px; }
.merge-icon i { position: absolute; top: 12px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: mergeL 1.2s ease-in-out infinite; }
.merge-icon i + i { left: auto; right: 2px; background: var(--warn); animation-name: mergeR; }
.merge-icon b { position: absolute; inset: 7px; border-radius: 50%; background: var(--brand); transform: scale(0); animation: mergePop 1.2s ease-in-out infinite; }
.merge-icon.done i, .merge-icon.failed i { display: none; }
.merge-icon.done b, .merge-icon.failed b { animation: none; inset: 3px; transform: scale(1); display: grid; place-items: center; }
.merge-icon.done b::after { content: '✓'; color: var(--brand-ink); font-weight: 800; font-size: 17px; }
.merge-icon.failed b { background: var(--danger); }
.merge-icon.failed b::after { content: '!'; color: #fff; font-weight: 800; font-size: 17px; }
@keyframes mergeL { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(10px); } }
@keyframes mergeR { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(-10px); } }
@keyframes mergePop { 0%, 50% { transform: scale(0); opacity: 0; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes mergeSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .merge-icon i, .merge-icon b, .merge-dot { animation: none !important; } .merge-icon i { transform: none; } }
@media print { #merge-progress { display: none; } }

/* ================= daily diary: numbers save as they are typed ================= */
.dd-cell { position: relative; display: inline-block; }
.dd-tick { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .25s; pointer-events: none; }
.dd-tick.wait { opacity: .55; color: var(--muted); }
.dd-tick.wait::before { content: '…'; }
.dd-tick.ok { opacity: 1; color: var(--brand); }
.dd-tick.ok::before { content: '✓'; }
.dd-tick.err { opacity: 1; color: var(--danger); }
.dd-tick.err::before { content: '!'; }
.dd-status.ok { color: var(--brand); font-weight: 600; }
.dd-status.err { color: var(--danger); }
@media print { .dd-tick, .dd-status { display: none; } }

/* ================= Updates tab in the bell; several groups merged at once ================= */
.panel-head .seg button { padding: 5px 12px; font-size: 13px; }
.panel-head .seg .badge { margin-left: 6px; }
.upd-item { padding: 9px 10px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card); }
.upd-item.fresh { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.upd-head2 { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.upd-head2 .att-x { margin-left: auto; }
.upd-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.merge-many { max-height: 240px; overflow: auto; }
.merge-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.merge-dot.wait { animation: none; border-style: dashed; border-color: var(--line); }
.merge-dot.bad { animation: none; border-color: var(--danger); background: var(--danger); }
@media (min-width: 821px) {
  .burger { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 18px; min-height: 0; }
  body.side-off .top nav { display: none; }
  body.side-off main { margin: 0 auto; }
  body.side-off main.wide { margin: 0; }
  body.side-off #offline-bar { margin-left: 0; }
  body.side-off .top .brand { min-width: 0; }
}

/* ================= choosing the Excel file on the server ================= */
.browse-path { padding: 6px 10px; border-radius: 8px; background: var(--chip); font-family: ui-monospace, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.browse-list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.browse-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 8px 12px; }
.browse-item:last-child { border-bottom: 0; }
.browse-item:hover { background: var(--accent); }
.browse-item .muted { margin-left: auto; font-size: 12px; white-space: nowrap; }
.browse-item.file b { color: var(--brand); }
.browse-icon { width: 18px; text-align: center; }

/* ================= daily diary: companies from the website offered under the search ================= */
.dd-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.dd-suggest:empty { display: none; }
.dd-add { padding: 4px 11px; font-size: 13px; border-radius: 99px; background: var(--accent); border-color: var(--brand); color: var(--ink); }
.dd-add b { color: var(--brand); }
.dd-add:hover { background: var(--brand); color: var(--brand-ink); }
.dd-add:hover b { color: inherit; }
tr.dd-flash td { animation: ddFlash 2.2s ease-out; }
@keyframes ddFlash { 0% { background: color-mix(in srgb, var(--brand) 28%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.dd-flash td { animation: none; } }

/* ================= the Daily Diary on paper =================
   A4 portrait, no page margin from the browser (so it adds no address, date or page number line); the page gets its own margins:
   10 mm at the sides, and at the top and bottom of every sheet through the repeating title block and the empty footer row. */
@media print {
  body.print-clean .print-head { display: none !important; }
  body.print-clean #app { padding: 0 10mm !important; }
  body.print-clean .diary-card { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  body.print-clean table.dd2 { font-size: 9pt; border-collapse: collapse; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; }
  /* the title block, repeated at the top of every sheet */
  body.print-clean table.dd2 tr.dd-ptitle { display: table-row; }
  body.print-clean table.dd2 tr.dd-ptitle td { border: 0 !important; padding: 11mm 0 4mm !important; }
  .dd-ph { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2.2pt solid #000; padding-bottom: 3.2mm; }
  .dd-ph-brand { font-size: 8.5pt; letter-spacing: .16em; text-transform: uppercase; color: #000; font-weight: 700; }
  .dd-ph-title { font-size: 25pt; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
  .dd-ph-right { text-align: right; line-height: 1.3; }
  .dd-ph-area { display: inline-block; padding: 1pt 9pt; border: 1.4pt solid #000; border-radius: 99px; color: #000; font-weight: 800; font-size: 11pt; margin-bottom: 1.5mm; }
  .dd-ph-date { font-size: 12pt; font-weight: 700; }
  .dd-ph-week { font-size: 10pt; color: #000; }
  /* the column headings */
  body.print-clean table.dd2 thead tr:not(.dd-ptitle) th { background: #fff !important; color: #000; border: 0 !important; border-bottom: 1.4pt solid #000 !important; border-top: 0 !important;
    padding: 4px 5px !important; font-size: 7.4pt !important; letter-spacing: .05em; font-weight: 700; text-align: left; }
  /* the lines */
  body.print-clean table.dd2 tbody td { border: 0 !important; border-bottom: .5pt solid #777 !important; padding: 4.2px 5px !important; font-size: 9pt !important; vertical-align: middle; }
  body.print-clean table.dd2 tbody:not(.dd-totals) tr:nth-child(even) td { background: #fff !important; }
  body.print-clean table.dd2 tbody td:first-child { font-weight: 700; }
  body.print-clean table.dd2 tbody td.num { font-weight: 700; font-variant-numeric: tabular-nums; }
  body.print-clean table.dd2 tbody td .muted { color: #000; }
  body.print-clean table.dd2 tr { break-inside: avoid; }
  /* the total */
  body.print-clean table.dd2 tbody.dd-totals td { border-top: 1.6pt solid #000 !important; border-bottom: 0 !important; background: #fff !important; font-weight: 800; padding: 5px 5px !important; font-size: 9.5pt !important; }
  body.print-clean table.dd2 tbody.dd-totals td[colspan] { display: none !important; }
  /* the empty row at the bottom of every sheet is its bottom margin */
  body.print-clean table.dd2 tfoot.dd-pfoot { display: table-footer-group !important; }
  body.print-clean table.dd2 tfoot.dd-pfoot td { height: 10mm; border: 0 !important; padding: 0 !important; background: none !important; }
  /* comments only when something is written - no empty boxes */
  body.print-clean .dd-comments { display: none !important; }
  body.print-clean .dd-comments.has-text { display: block !important; border: 0 !important; background: none !important; padding: 3mm 0 0 !important; margin: 0 !important; break-inside: avoid; }
  body.print-clean .dd-comments.has-text textarea { font-size: 9pt; height: auto !important; }
  body.print-clean .dd-comments.has-text .muted { font-size: 7.4pt; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; color: #000; }
}
@media print {
  /* the widths of the columns on paper (a fixed layout takes them from the <col> row, since the first row of the table is the title block) */
  body.print-clean table.dd2 { table-layout: fixed; width: 100% !important; }
  table.dd2.print-active-only tr.dd-pin.dd-empty { display: table-row !important; }   /* QSC Safety is always on the paper */
  body.print-clean .co-link { border: 0 !important; }   /* the names are links on the screen, plain text on paper */
  body.print-clean table.dd2 th, body.print-clean table.dd2 td { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
}


/* black and white on paper, whatever colours the theme has on the screen */
@media print {
  html, body, body.print-clean #app, body.print-clean .diary-card, body.print-clean table.dd2 { background: #fff !important; color: #000 !important; }
  body.print-clean #app * { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
  body.print-clean table.dd2 th, body.print-clean table.dd2 td { background: #fff !important; }
  body.print-clean table.dd2 thead tr:not(.dd-ptitle) th { border-bottom: 1.6pt solid #000 !important; }
  body.print-clean .co-link, body.print-clean a { color: #000 !important; text-decoration: none !important; }
}

/* RAMS time scope: a second row in the register's filter card */
.span-bar { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, #e3e8e5); align-items: center; }
.span-bar input[type=date] { width: auto; }
.span-bar button.small { padding: 4px 9px; font-size: 13px; }
@media (max-width: 700px) { .span-bar input[type=date] { flex: 1 1 130px; } }

/* Daily Diary: a file dragged over the page */
.diary-drop { position: relative; }
.diary-drop.over::after { content: 'Drop the daily diary file to fill in the numbers'; position: fixed; inset: 12px; z-index: 50; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: var(--accent, #2a7a5a); background: color-mix(in srgb, var(--card, #fff) 85%, transparent); border: 3px dashed var(--accent, #2a7a5a); border-radius: 14px; pointer-events: none; }

/* new induction: a file slot for every ticked competency; PDF cards; labelled F10 files */
.card-slots { display: grid; gap: 8px; margin-top: 12px; }
.card-slot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line, #d8dee4); border-radius: 10px; }
.card-slot.need { border-color: var(--danger, #c0392b); }
.card-slot.has { border-color: #2f8f5b; }
.card-slot > b { min-width: 120px; }
.slot-btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pdf-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 110px; background: var(--chip, #eef1f4); border-radius: 8px; cursor: pointer; padding: 8px; text-align: center; font-size: 12px; overflow: hidden; }
.pdf-tile b { font-size: 15px; }
.att-group { padding: 8px 0; border-bottom: 1px solid var(--line, #e2e6ea); }
.att-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ================= daily diary: company names and numbers only ================= */
table.dd2 { width: 100%; max-width: 860px; min-width: 0; table-layout: auto; }
table.dd2 td, table.dd2 th { padding: 5px 8px; vertical-align: middle; }
table.dd2 td.num, table.dd2 th.num { width: 92px; text-align: right; }
table.dd2 .dd-num { width: 64px !important; }
table.dd2 .dd-co { min-width: 220px; }
table.dd2 td.dd-act { width: 1%; text-align: right; }
table.dd2 tr.dd-main td { border-bottom-color: transparent; }
table.dd2 tr.dd-sub td.dd-co { padding-left: 26px; }
table.dd2 tr.dd-sub td.dd-co b { font-weight: 500; }
.dd-arrow { color: var(--muted); }
table.dd2 .dd-totals td { border-top: 2px solid var(--line); padding: 8px; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dd-main-fixed { display: block; padding: 6px 0; }
@media print {
  body.print-clean table.dd2 { table-layout: fixed; width: 100% !important; max-width: none; font-size: 10pt; }
  body.print-clean table.dd2 col:nth-child(1) { width: 44%; }
  body.print-clean table.dd2 col:nth-child(n+2):nth-child(-n+5) { width: 14%; }
  body.print-clean table.dd2 col:nth-child(6), body.print-clean table.dd2 th:nth-child(6), body.print-clean table.dd2 td.dd-act { display: none !important; }
  body.print-clean table.dd2 thead tr:not(.dd-ptitle) th:nth-child(n+2):nth-child(-n+5) { text-align: right; }
  body.print-clean table.dd2 tbody td { font-size: 10pt !important; padding: 5px 6px !important; }
  body.print-clean table.dd2 tr.dd-sub td.dd-co { padding-left: 7mm !important; }
  body.print-clean table.dd2 tr.dd-sub td:first-child { font-weight: 400; }
  body.print-clean table.dd2 tr.dd-main td { border-bottom: 0 !important; }
  body.print-clean table.dd2 td.num input, body.print-clean table.dd2 .dd-num { width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; text-align: right; font-size: 10pt !important; }
  table.dd2.print-active-only tr.dd-empty { display: none !important; }
  table.dd2.print-active-only tr.dd-pin.dd-empty { display: table-row !important; }
  table.dd2 tr { break-inside: avoid; }
}

/* ---- Admin -> Logs ---- */
.log-table td { vertical-align: top; }
#app .log-table thead th { top: 0; }   /* the table scrolls inside its own box, so its heading sticks to the top of that box */
.log-detail { word-break: break-word; max-width: 420px; }
.log-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; background: var(--line, #e3e6ea); white-space: nowrap; }
.log-kind.log-access { background: #dbeafe; color: #1e40af; } .log-kind.log-excel { background: #dcfce7; color: #166534; } .log-kind.log-admin { background: #ede9fe; color: #5b21b6; } .log-kind.log-change { background: #fef3c7; color: #92400e; }
.log-bad td { background: rgba(220, 38, 38, .08); } .log-bad td b { color: #b91c1c; }

/* ---- My profile ---- */
.pf-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 14px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--accent), var(--card) 72%); }
.pf-avatar { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 55% 48%), hsl(calc(var(--h) + 35) 55% 36%)); box-shadow: 0 4px 14px rgba(0, 0, 0, .2), inset 0 0 0 3px rgba(255, 255, 255, .25); }
.pf-who { flex: 1; min-width: 200px; }
.pf-name { margin: 0; font-size: 26px; line-height: 1.15; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 14px; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-folds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pf-fold { min-width: 0; }
.pf-fold { padding: 10px 16px; }
.pf-fold > summary { padding: 4px 0; gap: 12px; }
.pf-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); font-size: 18px; }
.pf-hint { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--muted); text-align: right; }
.pf-body { padding-top: 4px; }
.pf-fold[open] { box-shadow: 0 2px 12px rgba(0, 0, 0, .06); }
@media (max-width: 600px) { .pf-hint { display: none; } .pf-avatar { width: 64px; height: 64px; font-size: 24px; } .pf-name { font-size: 22px; } }

/* ---- Prepare timesheet: the QSC weekly time sheet (always black on white, like the paper) ---- */
.ts-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ts-help { margin: 0 0 10px; font-size: 13px; }
.ts-saved { font-size: 13px; min-width: 56px; text-align: right; }
.ts-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ts-print { container-type: inline-size; min-width: 900px; padding: 1.2cqw; background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif; color-scheme: light; box-sizing: border-box; }
.ts-grid { display: grid; width: 100%; font-size: 1.21cqw; line-height: 1.1; padding: 0 1px 1px 0; box-sizing: border-box; }
.ts-c { display: flex; align-items: center; min-width: 0; overflow: hidden; box-sizing: border-box; padding: 0 .45cqw; }
.ts-c.b { border: 1px solid #000; margin: 0 -1px -1px 0; }
.ts-c.ul { border-bottom: 1px solid #000; } .ts-c.ud { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.ts-c { white-space: nowrap; } .ts-c.r { justify-content: flex-end; text-align: right; font-size: 1.05cqw; } .ts-c.ts-fit { font-size: .92cqw; } .ts-c.m { justify-content: center; text-align: center; } .ts-c.bold { font-weight: 700; } .ts-admin { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--accent); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ts-c.top { align-items: flex-start; padding-top: .35cqw; }
.ts-admin { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--accent); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ts-c.top { white-space: normal; line-height: 1.15; }
.ts-c.ts-title { font-size: 1.9cqw; letter-spacing: .02em; } .ts-c.ts-small { font-size: .85cqw; }
.ts-c img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ts-c input[type=text] { width: 100%; height: 100%; padding: 0 .2cqw; border: 0; border-radius: 0; background: transparent; font: inherit; color: #000; text-align: inherit; box-sizing: border-box; }
.ts-c input[type=text]:focus { outline: 0; background: #fff6c8; }
.ts-c.ts-small input[type=text] { font-size: 1cqw; }
.ts-c input[type=checkbox] { width: 1.3cqw; height: 1.3cqw; margin: 0; accent-color: #000; }
@media (max-width: 600px) { .ts-print { min-width: 760px; } }
@media print {
  body.print-ts > *:not(main) { display: none !important; }
  body.print-ts #app { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
  body.print-ts #app *:not(.ts-print):not(.ts-print *):not(:has(.ts-print)) { display: none !important; }
  body.print-ts #app :has(.ts-print) { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; overflow: visible !important; }
  body.print-ts .ts-print { min-width: 0 !important; width: 100% !important; padding: 0 !important; }
  body.print-ts .print-head { display: none !important; }
  .ts-c input[type=text]::placeholder { color: transparent; }
}

/* ---- Induction Materials (Inductions page) ----
.mat-body { min-width: 0; }
.mat-pic { background: #111; }
.mat-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mat-play { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; padding-left: 3px; border: 2px solid rgba(255, 255, 255, .85); }
.mat-video { display: block; width: 100%; max-height: 68vh; background: #000; border-radius: 8px; }
.mat-frame { background: #fff; }
.mat-frame:fullscreen { display: flex; } .mat-frame:fullscreen .lib-frame { height: 100vh; border: 0; border-radius: 0; }
.fold-count { font-weight: 400; }

/* ---- cogs behind the Project tracker, faint pictures behind the home page tiles ---- */
.card.tracker { position: relative; isolation: isolate; overflow: hidden; }
.cogs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--brand); opacity: .13; }
.cog { animation: cogturn 60s linear infinite; }
@keyframes cogturn { to { transform: rotate(360deg); } }
.kpi { position: relative; isolation: isolate; overflow: hidden; }
.kpi-bg { position: absolute; right: 8px; bottom: 6px; width: 74px; height: 74px; z-index: -1; pointer-events: none; color: var(--brand); opacity: .11; }
@media print { .cogs, .kpi-bg { display: none !important; } }

.assign-sel { width: 100%; margin: 4px 0; }

.cz-group { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line, #d8dee4); border-radius: 10px; display: grid; gap: 6px; }
.cz-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cz-found { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.kpi.on { outline: 2px solid var(--brand); outline-offset: -2px; }
#co-panel:empty { display: none; }

/* Super Admin: click an online icon to see where everybody is */
.avatar.peek { cursor: pointer; border: 0; font: inherit; }
#where-panel { right: 12px; top: 54px; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; }
.where-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--line, #e2e6ea); }
.where-row.focus { background: var(--accent); border-radius: 8px; }
.where-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }