:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --border: #e1e6ec;
  --text: #1c2530;
  --muted: #6b7785;
  --accent: #0a84d6;
  --accent-hover: #0870b6;
  --accent-soft: #e5f2fc;
  --danger: #d13438;
  --ok: #1f9d55;
  --online: #3cb44b;
  --away: #f5b400;
  --busy: #e0393e;
  --offline: #a3adb8;
  --bubble-me: #d9efff;
  --bubble-other: #ffffff;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 4px 16px rgba(16, 24, 40, .06);
  --radius: 10px;
  color-scheme: light;
}
/* dark theme: follows the OS unless the user picked one (theme.js -> <html data-theme>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181d;
    --surface: #1c2128;
    --surface-2: #222830;
    --border: #2e3640;
    --text: #e6ebf0;
    --muted: #8e99a6;
    --accent: #3aa0f0;
    --accent-hover: #5ab1f5;
    --accent-soft: #1d3346;
    --bubble-me: #1f4466;
    --bubble-other: #262d36;
    --offline: #5d6773;
    --shadow: 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14181d;
  --surface: #1c2128;
  --surface-2: #222830;
  --border: #2e3640;
  --text: #e6ebf0;
  --muted: #8e99a6;
  --accent: #3aa0f0;
  --accent-hover: #5ab1f5;
  --accent-soft: #1d3346;
  --bubble-me: #1f4466;
  --bubble-other: #262d36;
  --offline: #5d6773;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.45rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.muted { color: var(--muted); }
.center { text-align: center; }
.ok { color: var(--ok); }
.nowrap { white-space: nowrap; }
.inline { display: inline; margin: 0; }

/* ---- forms ---- */
label { display: block; margin: 0 0 .85rem; font-weight: 500; }
label small { display: block; font-weight: 400; color: var(--muted); margin-top: .2rem; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: .55rem .7rem;
}
label input, label select { display: block; width: 100%; margin-top: .3rem; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input:disabled { opacity: .65; }
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
label.check input { width: auto; margin: 0; }
input.code { display: block; width: 100%; font-size: 1.6rem; letter-spacing: .35em; text-align: center; margin: .5rem 0 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none !important;
  padding: .5rem 1rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--danger); }
.btn.small { padding: .25rem .6rem; font-size: .85rem; }
.btn.wide { width: 100%; padding: .65rem; }
.linklike { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }

.alert { padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.alert.error { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.alert.success { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
code.secret { display: inline-block; padding: .2rem .45rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); user-select: all; word-break: break-all; }

/* ---- auth pages ---- */
body.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 1.75rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.2rem; color: var(--text); margin-bottom: 1.25rem; }
.brand-logo { font-size: 1.35rem; }
.brand-mark { width: 1.6rem; height: 1.6rem; flex-shrink: 0; fill: var(--accent); }
.brand-mark .brand-mark-talk { fill: #f59e0b; }
.steps { padding-left: 1.2rem; margin: .5rem 0; }
.qr { display: flex; justify-content: center; margin: .5rem 0 1rem; }
.qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
details { margin-bottom: 1rem; }
summary { cursor: pointer; }

/* ---- admin / account pages ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .brand { margin: 0; }
.topbar .brand:hover { text-decoration: none; }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; }
.page-body { max-width: 1150px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.row { display: flex; gap: .5rem; align-items: center; }
.row.wrap { flex-wrap: wrap; margin-bottom: .4rem; }
.row.wrap input { flex: 1 1 160px; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.st-pending { background: var(--accent-soft); }
tr.st-disabled td { color: var(--muted); }
.page-body.wide { max-width: 1600px; }
table.users td { vertical-align: middle; }
table.users td.email { overflow-wrap: anywhere; min-width: 12rem; }
.actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.actions .role-form { display: inline-flex; gap: .3rem; align-items: center; }
.actions select { padding: .25rem .5rem; font-size: .85rem; }
/* admin: inline phone / department editor (✏️ button opens a small form under the buttons) */
.contact-edit summary { list-style: none; }
.contact-edit summary::-webkit-details-marker { display: none; }
.contact-edit[open] { flex-basis: 100%; order: 10; }
.contact-edit[open] summary { background: var(--accent-soft); border-color: var(--accent); }
.contact-edit form { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.contact-edit input { flex: 1 1 9rem; min-width: 0; padding: .3rem .5rem; font-size: .85rem; }
table.users td.dept { min-width: 7rem; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); }
.badge.pending { background: var(--away); color: #3a2c00; border-color: transparent; }
.badge.active { color: var(--ok); }
.badge.disabled { color: var(--danger); }

/* admin user list on phones: one compact card per user instead of a wide, very tall table row */
@media (max-width: 760px) {
  .table-wrap:has(> table.users) { overflow: visible; }
  table.users, table.users tbody { display: block; }
  table.users thead { display: none; }
  table.users tr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .7rem .85rem; border-bottom: 1px solid var(--border); }
  table.users tr:last-child { border-bottom: 0; }
  table.users tr::before { content: ''; order: 2; flex-basis: 100%; height: 0; } /* line break after name + status */
  table.users td { display: block; padding: 0; border: 0; }
  table.users td.name { order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  table.users td.status { order: 1; flex: none; }
  table.users td.uname, table.users td.role, table.users td.twofa, table.users td.login { order: 3; font-size: .82rem; color: var(--muted); }
  table.users tr::after { content: ''; order: 4; flex-basis: 100%; height: 0; } /* department + phone on their own line */
  table.users td.none { display: none; }
  table.users td.dept, table.users td.phone { order: 5; font-size: .85rem; }
  table.users td.dept::before { content: '🏢 '; }
  table.users td.phone::before { content: '📞 '; }
  table.users td.uname::before { content: '@'; }
  table.users td.twofa::before, table.users td.login::before { content: attr(data-label) ': '; }
  table.users td.email { order: 6; flex-basis: 100%; min-width: 0; font-size: .85rem; }
  table.users td.email:has(> .muted) { display: none; }
  table.users td.acts { order: 7; flex-basis: 100%; margin-top: .25rem; padding-top: .45rem; border-top: 1px dashed var(--border); }
  table.users .actions { gap: .3rem; }
}

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--offline); vertical-align: middle; }
.dot.online { background: var(--online); }
.dot.away { background: var(--away); }
.dot.busy { background: var(--busy); }
.dot.invisible, .dot.offline { background: var(--offline); }

/* ---- language switcher ---- */
.flag { display: inline-block; flex: none; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); line-height: 0; }
.flag svg { width: 100%; height: 100%; display: block; }
.lang-check { width: 16px; height: 16px; flex: none; color: var(--accent); }

.auth-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.auth-head .brand { margin: 0; }

.lang-dd { position: relative; }
.lang-pill {
  list-style: none; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; user-select: none;
  padding: .32rem .55rem .32rem .45rem; border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.lang-pill::-webkit-details-marker { display: none; }
.lang-pill:hover { background: var(--surface-2); }
.lang-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-dd[open] > .lang-pill { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lang-pill .flag { width: 18px; height: 18px; border-radius: 50%; }
.lang-chevron { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; }
.lang-dd[open] .lang-chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; min-width: 210px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08);
  transform-origin: top right; animation: lang-pop .14s ease-out;
}
.lang-dd.align-left .lang-menu { right: auto; left: 0; transform-origin: top left; }
@keyframes lang-pop { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } .lang-chevron { transition: none; } }
.lang-menu-title { padding: .35rem .6rem .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lang-opt {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 8px;
  color: var(--text); font-weight: 500; text-decoration: none !important;
}
.lang-opt:hover, .lang-opt:focus-visible { background: var(--surface-2); outline: none; }
.lang-opt.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lang-opt .lang-name { flex: 1; }
.lang-opt-code { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.lang-opt .flag, .lang-tile .flag { border-radius: 50%; width: 22px; height: 22px; }

.topbar nav .lang-dd { order: 0; }

.lang-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.lang-tile {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500;
  text-decoration: none !important; transition: border-color .15s, background .15s;
}
.lang-tile:hover { background: var(--surface-2); }
.lang-tile.current { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: 0 0 0 1px var(--accent) inset; }
.lang-tile .lang-name { flex: 1; }

/* ---- guide ---- */
.small-link { font-size: .88rem; margin-top: -.25rem; }
.guide { max-width: 900px; }
.guide .lead { font-size: 1.05rem; color: var(--muted); margin: -.25rem 0 1.25rem; }
.guide h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
.guide ul { margin: 0; padding-left: 1.2rem; }
.guide li { margin: .45rem 0; line-height: 1.55; }
.guide section.card { scroll-margin-top: 1rem; }
.guide .card h2 { font-size: 1.15rem; }
.guide kbd { display: inline-block; padding: .05rem .4rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); font: .82rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.guide .dot { margin: 0 .1rem 0 .25rem; }
.facts { margin-bottom: 1rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.facts h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: .8rem; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.fact { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: start; padding: .7rem .8rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.fact-icon { grid-row: span 2; font-size: 1.4rem; line-height: 1.2; }
.fact strong { font-size: 1.05rem; }
.fact span:last-child { font-size: .83rem; color: var(--muted); line-height: 1.35; }
.toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.toc a { padding: .35rem .75rem; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-size: .88rem; color: var(--text); text-decoration: none; }
.toc a:hover { border-color: var(--accent); color: var(--accent); }
.guide-table { margin-bottom: .5rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.guide-table th { width: 32%; white-space: normal; }
@media (max-width: 600px) { .guide-table th, .guide-table td { display: block; width: 100%; } .guide-table th { border-bottom: 0; padding-bottom: .1rem; } }

/* ---- admin storage page ---- */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4;
  --meter-neutral: #a3adb8; --meter-track: #e6eaef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
    --meter-neutral: #5d6773; --meter-track: #2a313a;
  }
}
:root[data-theme="dark"] {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181;
  --meter-neutral: #5d6773; --meter-track: #2a313a;
}
.small { font-size: .85rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin: 1rem 0; }
.stat { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.stat-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: .82rem; color: var(--muted); }
.storage-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .storage-grid { grid-template-columns: 1fr; } }
.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.donut-box { position: relative; width: min(240px, 100%); flex: none; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.donut-center strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.donut-center span { font-size: .8rem; color: var(--muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .15rem; }
.donut-legend li { display: grid; grid-template-columns: 14px 1fr auto 3.2rem; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .4rem .5rem; border-radius: 8px; cursor: default; }
.donut-legend li:hover { background: var(--surface-2); }
.donut-legend .swatch { grid-row: span 2; }
.lg-name { font-weight: 600; }
.lg-val { font-variant-numeric: tabular-nums; text-align: right; }
.lg-pct { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
.lg-count { grid-column: 2 / span 3; font-size: .78rem; color: var(--muted); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--meter-track); }
.swatch.s1 { background: var(--series-1); } .swatch.s2 { background: var(--series-2); } .swatch.s3 { background: var(--series-3); }
.swatch.s4 { background: var(--series-4); } .swatch.s5 { background: var(--series-5); }
.swatch.neutral { background: var(--meter-neutral); }
.swatch.track { background: var(--meter-track); box-shadow: inset 0 0 0 1px var(--border); }
.meter { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; background: var(--meter-track); margin: .25rem 0 1rem; }
.meter-seg { height: 100%; }
.m-uploads { background: var(--series-1); }
.m-other { background: var(--meter-neutral); }
.meter-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.meter-legend li { display: grid; grid-template-columns: 14px 1fr auto 3.5rem; gap: .6rem; align-items: center; }
.meter-legend strong, .meter-legend .muted { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap.flat { border: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.fname { max-width: 360px; overflow-wrap: anywhere; }

/* 2FA method switch (setup page) */
.seg { display: flex; gap: .25rem; padding: .25rem; margin: 0 0 1rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.seg a { flex: 1; text-align: center; padding: .45rem .5rem; border-radius: 7px; color: var(--muted); font-weight: 600; text-decoration: none; }
.seg a:hover { color: var(--text); }
.seg a.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* admin user list: search + paging */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.list-tools input[type=search] { flex: 1 1 260px; max-width: 420px; }
.inline-label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; color: var(--muted); }
.inline-label select { padding: .4rem .5rem; }
.list-count { margin-left: auto; font-size: .9rem; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin: 1rem 0; }
.pager a, .pager span { min-width: 2.2rem; padding: .35rem .6rem; border-radius: 8px; text-align: center; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .cur { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pager .off { color: var(--muted); opacity: .5; }
.pager .gap { border-color: transparent; background: none; }

/* guide: back to top */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .9rem; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent-hover); color: #fff; }
.to-top:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; opacity: 1; pointer-events: auto; }
.guide section.card:focus { outline: none; }
@media (max-width: 600px) { .to-top { padding: .6rem .75rem; } .to-top-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---- light / dark theme toggle (theme.js) ---- */
.theme-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.theme-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.theme-btn:active { transform: scale(.94); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
.auth-tools { display: flex; align-items: center; gap: .5rem; }

/* admin statistics */
.stats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.stats-head h1 { margin: 0; }
.stats-head .seg { margin: 0; min-width: min(360px, 100%); }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 .6rem; padding: 0; font-size: .9rem; }
.chart-legend li { display: flex; align-items: center; gap: .4rem; }
.bar-box { position: relative; height: 280px; }
.chart-table { margin-top: .75rem; }
.chart-table summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.chart-table .table-wrap { max-height: 320px; overflow-y: auto; }

/* admin webhooks */
.hook-help pre { overflow-x: auto; padding: .7rem .85rem; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: .82rem; line-height: 1.45; }
.hook-url { margin: .35rem .35rem .35rem 0; }
table.hooks td { vertical-align: middle; }
table.hooks .contact-edit summary { color: var(--text); cursor: pointer; }
table.hooks small { display: block; }

/* 📇 phone book */
.dir-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.dir-head h1 { margin: 0; }
.dir-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.dir-tools input[type=search] { width: min(320px, 100%); }
.dir-count { margin: .4rem 0 1rem; font-size: .9rem; }
.dir-group { padding: .8rem 1rem; border-color: #000; }   /* thin black frame: the cards stand apart (white in dark mode) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dir-group { border-color: #fff; } }
:root[data-theme="dark"] .dir-group { border-color: #fff; }
.dir-group h2 { margin: 0 0 .4rem; font-size: .9rem; display: flex; align-items: baseline; gap: .5rem; }
.dir-group h2 .muted { font-size: .8rem; font-weight: 400; }
.dir-name strong { font-size: 1.05rem; }
.dir-table { width: 100%; border-collapse: collapse; }
.dir-table tr[hidden], .dir-group[hidden] { display: none !important; }   /* the phone layout's display: grid would show filtered rows */
.dir-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dir-table tr:last-child td { border-bottom: 0; }
.dir-name { width: 34%; }
.dir-status { display: block; width: fit-content; margin: .25rem 0 0 1.2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem;
  background: var(--surface-2, rgba(127, 127, 127, .12)); color: var(--text); }
.dir-status small { color: var(--muted); }
.dir-status.out { background: #fff3cd; color: #6b4e00; font-weight: 600; }
.dir-status.out small { color: #8a6a10; font-weight: 400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dir-status.out { background: #4a3a0a; color: #ffe08a; } :root:not([data-theme="light"]) .dir-status.out small { color: #e6c46a; } }
:root[data-theme="dark"] .dir-status.out { background: #4a3a0a; color: #ffe08a; }
:root[data-theme="dark"] .dir-status.out small { color: #e6c46a; }
.dir-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; }
.dir-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; cursor: pointer; }
.dir-chip b { font-weight: 700; color: var(--muted); }
.dir-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dir-chip.on b { color: var(--accent); }
.dir-phone a { white-space: nowrap; font-weight: 600; }
.dir-chat { text-align: right; width: 1%; white-space: nowrap; }
@media screen and (max-width: 600px) {
  .dir-table tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
  .dir-table tr:last-child { border-bottom: 0; }
  .dir-table td { padding: 0; border: 0; width: auto; }
  .dir-name { grid-column: 1 / -1; }
  .dir-phone { padding-left: 1.2rem !important; }
}
.print-only { display: none; }
@media print {
  .topbar, .page-foot, .no-print, .alert { display: none !important; }
  body, .card { background: #fff !important; color: #000 !important; }
  .page-body { max-width: none; padding: 0; }
  .dot { display: none; }
}
/* 📇 phone book on paper / PDF: one clean table, a band per department, column heads repeated on every page */
@media print {
  @page { size: A4; margin: 14mm 12mm 16mm; }
  .print-only { display: revert; }
  thead.print-only { display: table-header-group; }
  :root { color-scheme: light !important; }
  html, body { font-size: 10pt; background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dir-head { border-bottom: 2px solid #1c2530; padding-bottom: 2mm; }
  .dir-head h1 { font-size: 18pt; letter-spacing: -.01em; }
  .dir-count { color: #555 !important; font-size: 9pt; margin: 2mm 0 5mm; }
  .dir-group { border: 0 !important; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 5mm; }
  .dir-group h2 { break-after: avoid; margin: 0; padding: 1.6mm 2.5mm; background: #1c2530 !important; color: #fff !important;
    font-size: 10.5pt; font-weight: 700; border-radius: 1.5mm 1.5mm 0 0; }
  .dir-group h2 .muted { color: #c9d1d9 !important; font-size: 9pt; font-weight: 400; margin-left: auto; }
  .dir-table { border: 1px solid #c9d1d9; border-top: 0; font-size: 9.5pt; table-layout: fixed; }
  .dir-table th { text-align: left; font-size: 8pt; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #555; background: #eef1f4 !important; padding: 1.4mm 2.5mm; border-bottom: 1px solid #c9d1d9; }
  .dir-table tr { break-inside: avoid; }
  .dir-table td { padding: 1.6mm 2.5mm; border-bottom: 1px solid #e3e7eb; vertical-align: top; }
  .dir-table tbody tr:nth-child(even) td { background: #f7f9fa !important; }
  .dir-table th:nth-child(1), .dir-name { width: 33%; }
  .dir-table th:nth-child(2), .dir-phone { width: 21%; }
  .dir-mail { font-size: 9pt; }
  .dir-name strong { font-size: 10pt; }
  .dir-photo, .dir-status { display: none !important; }
  .dir-phone a { color: #000; text-decoration: none; font-weight: 600; white-space: nowrap; }
  .dir-mail a { color: #000; text-decoration: none; }
  .dir-table .muted { color: #999 !important; }
}
.celebrate-box { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .85rem .75rem; margin: .4rem 0 .8rem; }
.celebrate-box legend { padding: 0 .35rem; font-weight: 600; }
.celebrate-box select { width: auto; }
.celebrate-box .row.wrap > label { flex: 1 1 200px; }
.dir-mail a { overflow-wrap: anywhere; }
@media screen and (max-width: 600px) { .dir-mail { grid-column: 1 / -1; padding-left: 1.2rem !important; } .dir-chat { grid-row: 2; grid-column: 2; } }
@media print { .dir-mail a { color: #000; text-decoration: none; } }

/* 🖼 profile photo on the account page / phone book */
.avatar-edit { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-bottom: .5rem; }
.avatar-preview { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--border); }
.avatar-preview.initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 2rem; border: 0; }
.avatar-form { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 200px; min-width: 0; }
.avatar-form input[type=file] { max-width: 100%; }
.crop-box[hidden] { display: none; }
.crop-box { display: flex; flex-direction: column; gap: .4rem; }
.crop-view { position: relative; width: min(280px, 100%); aspect-ratio: 1; overflow: hidden; border-radius: 8px;
  background: #000; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.crop-view.dragging { cursor: grabbing; }
.crop-view:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
.crop-view img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-view::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .8); }
.crop-zoom { display: flex; align-items: center; gap: .5rem; width: min(280px, 100%); }
.crop-zoom input { flex: 1; min-width: 0; }
.dir-photo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .35rem; cursor: zoom-in; }

/* big profile photo (static/avatar-view.js) */
.avatar-view { padding: 0; border: 0; background: transparent; overflow: visible; max-width: 92vw; }
.avatar-view::backdrop { background: rgba(0, 0, 0, .75); }
.avatar-view figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.avatar-view img { display: block; width: min(80vw, 60vh, 420px); aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); background: #000; }
.avatar-view figcaption { color: #fff; font-weight: 600; font-size: 1.15rem; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.avatar-view-x { position: absolute; top: -.4rem; right: -.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: #1c2530; font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.avatar.zoomable { cursor: zoom-in; }

/* storage page: "Largest files" - the name gets room; on phones one card per file */
table.largest td.fname { min-width: 14rem; max-width: 420px; word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  table.largest, table.largest tbody { display: block; }
  table.largest thead { display: none; }
  table.largest tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; padding: .6rem .2rem; border-bottom: 1px solid var(--border); }
  table.largest tr:last-child { border-bottom: 0; }
  table.largest td { display: block; padding: 0; border: 0; }
  table.largest td.fname { flex-basis: 100%; min-width: 0; max-width: none; font-weight: 600; }
  table.largest td.ftype, table.largest td.fup, table.largest td.fdel { font-size: .82rem; color: var(--muted); }
  table.largest td.fsize { font-weight: 700; font-size: .85rem; text-align: left; }
  table.largest td.fup::before, table.largest td.fdel::before { content: attr(data-label) ': '; }
  table.largest td.fdel { flex-basis: 100%; }
}

/* ---- header logo (admin → Logo, templates/_brand.html) ---- */
.brand-img { height: 32px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.brand-img-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-img.has-dark { display: none; }
  :root:not([data-theme="light"]) .brand-img-dark { display: block; }
}
:root[data-theme="dark"] .brand-img.has-dark { display: none; }
:root[data-theme="dark"] .brand-img-dark { display: block; }
.side-brand { margin: 0; min-width: 0; }
.side-brand .brand-img { height: 28px; }
.brand-preview-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.brand-preview { display: flex; flex-direction: column; gap: .4rem; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid #d0d7de; min-width: 200px; }
.brand-preview .brand { margin: 0; color: inherit; }
.brand-preview.light { background: #fff; color: #1f2328; }
.brand-preview.dark { background: #161b22; color: #e6edf3; border-color: #30363d; }
.brand-preview small { opacity: .7; }
.pdf-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: .6rem 0 1rem; }
.pdf-logo-preview { display: flex; align-items: center; justify-content: center; min-width: 180px; min-height: 64px; padding: .6rem 1rem;
  background: #fff; border: 1px solid #d0d7de; border-radius: var(--radius); }
.pdf-logo-preview img { display: block; max-width: 240px; max-height: 56px; object-fit: contain; }

/* 📁 personal storage: usage bar (Storage page, My files) */
.mini-meter { display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.mini-meter > span { display: block; height: 100%; background: var(--accent); }
.mini-meter.warn > span { background: var(--danger); }
input.narrow { width: 7.5rem; }
table.drive-usage td { vertical-align: middle; }
.quota-form { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.quota-form .quota-input { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-weight: 400; white-space: nowrap; }
.quota-form .quota-input input { width: 5.5rem; padding: .3rem .5rem; font-size: .85rem; }
.quota-presets { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.quota-presets .btn.on { background: var(--accent-soft); border-color: var(--accent); }
.drive-meter { font-size: .85rem; }
.drive-meter .mini-meter { width: 70px; margin-right: .3rem; }
@media (max-width: 760px) {
  table.users td.drive { order: 3; font-size: .82rem; color: var(--muted); }
  table.users td.drive::before { content: attr(data-label) ' '; }
}
.quota-edit summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .35rem; margin: -.15rem -.35rem; border-radius: 6px; }
.quota-edit summary::-webkit-details-marker { display: none; }
.quota-edit summary:hover, .quota-edit[open] summary { background: var(--accent-soft); }
.quota-pen { font-size: .75rem; opacity: .6; }
.quota-edit .quota-form { margin-top: .4rem; min-width: 15rem; }
@media (max-width: 760px) { table.users td.drive:has(> details[open]) { flex-basis: 100%; } }
/* Storage page → personal storage: on phones one compact card per user: name · files / bar · limit */
table.drive-usage .quota-edit { display: inline-block; vertical-align: middle; margin: 0; }
@media (max-width: 600px) {
  table.drive-usage, table.drive-usage tbody { display: block; }
  table.drive-usage thead { display: none; }
  table.drive-usage tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem;
    padding: .55rem .2rem; border-bottom: 1px solid var(--border); }
  table.drive-usage tr:last-child { border-bottom: 0; }
  table.drive-usage td { display: block; padding: 0; border: 0; }
  table.drive-usage td.du-name { font-weight: 600; overflow-wrap: anywhere; }
  table.drive-usage td.du-files { font-size: .82rem; color: var(--muted); text-align: right; }
  table.drive-usage td.du-files::before { content: attr(data-label) ': '; }
  table.drive-usage td.du-limit { font-size: .85rem; text-align: right; }
  table.drive-usage td.du-limit:has(> details[open]) { grid-column: 1 / -1; text-align: left; }
  table.drive-usage .quota-edit .quota-form { min-width: 0; }
}
@media (min-width: 761px) {   /* users table: bar above the numbers, so the column stays narrow */
  table.users .drive-meter { display: inline-flex; flex-direction: column; align-items: stretch; gap: .2rem; font-size: .8rem; }
  table.users .drive-meter .mini-meter { width: 100%; margin: 0; }
}

/* ---- line icons (static/icons.svg, Lucide; templates: ic('name'), JS: C.icon('name')) ---- */
svg.ic {
  display: inline-block; width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; overflow: visible;
  fill: none !important; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.swap-ic { display: inline-flex; }
.swap-ic .ic.off, .swap-ic.is-off .ic.on { display: none; }
.swap-ic.is-off .ic.off { display: inline-block; }
.btn svg.ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
h1 svg.ic, h2 svg.ic { color: var(--accent); vertical-align: -.16em; }
.guide svg.ic { color: var(--accent); }

/* ---- Logo page: main colour ---- */
.accent-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.accent-sample { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .8rem; border-radius: 10px; border: 1px solid #e1e6ec; background: #f3f5f8; color: #1c2530; }
.accent-sample.dark { background: #14181d; border-color: #2e3640; color: #e6ebf0; }
.accent-sample small { flex-basis: 100%; font-weight: 600; opacity: .7; }
.accent-sample .s-btn { padding: .3rem .8rem; border-radius: 8px; background: var(--s-accent); color: #fff; font-weight: 600; font-size: .85rem; }
.accent-sample .s-link { color: var(--s-accent); text-decoration: underline; font-size: .9rem; }
.accent-sample .s-chip { padding: .25rem .6rem; border-radius: 8px; background: var(--s-soft); color: var(--s-accent); font-weight: 600; font-size: .85rem; }
.accent-sample .s-bubble { padding: .35rem .7rem; border-radius: 12px; background: var(--s-bubble); font-size: .85rem; }
.accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.accent-label { min-width: 7.5rem; font-size: .88rem; color: var(--muted); }
.swatch-btn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.swatch-btn:hover { transform: scale(1.1); }
.swatch-btn.on { box-shadow: 0 0 0 2px var(--text); }
.accent-own { margin-bottom: .6rem; }
/* own colour picker (static/colorpicker.js): saturation / brightness square + hue bar + code */
.cpick { display: flex; flex-direction: column; gap: .6rem; width: min(340px, 100%); margin-top: .4rem; }
.cp-sv { position: relative; height: 170px; border-radius: 10px; cursor: crosshair; touch-action: none; background-color: red;
  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); }
.cp-sv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-thumb { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .35); pointer-events: none; }
.cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; border-radius: 9px; padding: 0; border: 0; margin: 0;
  background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); cursor: pointer; }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.35); }
.cp-hue::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.35); }
.cp-hue::-moz-range-track { background: transparent; }
.cp-row { display: flex; align-items: center; gap: .5rem; }
.cp-swatch { flex: none; width: 38px; height: 38px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.cp-hex { flex: 1; min-width: 0; font-family: ui-monospace, monospace; text-transform: lowercase; }
.cp-hex:invalid { border-color: var(--danger); }
.cp-note:empty { display: none; }

/* Account → logged-in devices */
table.sessions td { vertical-align: middle; }
table.sessions td.dev svg.ic { color: var(--muted); margin-right: .2rem; }
table.sessions tr.current td { background: var(--accent-soft); }
table.sessions td.acts { text-align: right; }
table.sessions .badge { margin-left: .35rem; }
.sessions-all { margin-top: .75rem; }
@media (max-width: 640px) {
  table.sessions thead { display: none; }
  table.sessions, table.sessions tbody, table.sessions tr { display: block; }
  table.sessions tr { padding: .6rem .7rem; border-bottom: 1px solid var(--border); }
  table.sessions td { display: block; padding: .1rem 0; border: 0; text-align: left !important; }
  table.sessions td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); font-size: .85rem; }
}

/* approvals page + invited registration */
.approval-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.ap-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.ap-head .avatar { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: none; }
.ap-data { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0 0 .8rem; font-size: .9rem; }
.ap-data dt { color: var(--muted); }
.ap-data dd { margin: 0; overflow-wrap: anywhere; }
.invite-welcome { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; margin-bottom: 1rem; border-radius: 12px; background: var(--accent-soft); }
.invite-welcome strong { display: block; margin-bottom: .2rem; }
.invite-welcome .iw-icon { flex: none; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; }
.invite-welcome .iw-icon svg.ic { width: 18px; height: 18px; }

/* /admin/translate: mode choice */
label.radio-row { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
label.radio-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
label.radio-row input { width: auto; margin: .2rem 0 0; flex: none; }
label.radio-row strong { display: block; }
label textarea { display: block; width: 100%; margin-top: .3rem; font-weight: 400; }
.row-actions { display: flex; gap: .5rem; flex-wrap: wrap; }


/* department dropdown + "Other" field (_dept_field.html), /departments page */
.dept-field { display: flex; flex-direction: column; gap: .35rem; }
.dept-field .dept-other[hidden] { display: none !important; }
.row.wrap .dept-field { flex: 1 1 180px; }
.row.wrap .dept-field input, .row.wrap .dept-field select { width: 100%; }
.dept-table td { vertical-align: middle; }
.dept-table .dept-members { color: var(--muted); font-size: .85rem; max-width: 26rem; }
.dept-table .dept-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.dept-table details form { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.dept-table details input, .dept-table details select { width: auto; flex: 1 1 10rem; min-width: 0; }
.dept-table .new-name { font-weight: 600; }
@media (max-width: 640px) {
  .dept-table thead { display: none; }
  .dept-table tr { display: block; border-bottom: 1px solid var(--border); padding: .4rem 0; }
  .dept-table td { display: block; border: 0; padding: .25rem .75rem; }
}

/* ---- 🗓 absence calendar ---- */
.abs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .4rem 0 .8rem; }
.abs-month { display: flex; align-items: center; gap: .4rem; }
.abs-month strong { min-width: 9.5rem; text-align: center; font-size: 1.05rem; text-transform: capitalize; }
.abs-dept select { width: auto; max-width: 100%; }
.abs-legend { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .82rem; }
.abs-key { display: inline-block; padding: .08rem .5rem; border-radius: 999px; white-space: nowrap; }
.k-holiday { --abs: #f6c453; --abs-ink: #5c4300; }
.k-sick { --abs: #f19a9a; --abs-ink: #6b1414; }
.k-remote { --abs: #8fc7f2; --abs-ink: #0c3a5e; }
.abs-key, .abs-grid td[class*="k-"] { background: var(--abs); color: var(--abs-ink); }
.abs-key.st, .abs-grid td.st { background: repeating-linear-gradient(135deg, var(--abs) 0 4px, color-mix(in srgb, var(--abs) 45%, var(--surface)) 4px 8px); }
.abs-key.pend, .abs-grid td.pend { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--abs) 55%, var(--surface)) 0 3px, var(--surface) 3px 6px);
  outline: 1px dashed var(--abs-ink); outline-offset: -3px; }
.abs-key.pend { background: var(--surface-2); color: var(--text); outline-offset: -1px; }
.abs-requests { border-left: 4px solid var(--away, #f0b400); }
.abs-req-list { list-style: none; margin: 0; padding: 0; }
.abs-req { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.abs-req:last-child { border-bottom: 0; }
.abs-req-info { flex: 1 1 260px; min-width: 0; display: grid; gap: .2rem; }
.abs-req-actions { flex: 1 1 260px; display: grid; gap: .4rem; margin: 0; }
.abs-req-actions .row { display: flex; gap: .4rem; flex-wrap: wrap; }
.abs-req-actions .btn { flex: 1 1 auto; }
.abs-approval-hint { margin: -.3rem 0 .8rem; padding: .45rem .65rem; border-radius: 8px; background: var(--surface-2); font-size: .88rem; }
.count-pill { display: inline-block; min-width: 1.5em; padding: 0 .45em; border-radius: 99px; background: var(--danger); color: #fff; font-size: .8rem; text-align: center; vertical-align: middle; }
.abs-card { padding: .6rem; }
.abs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.abs-grid { border-collapse: separate; border-spacing: 0; font-size: .8rem; min-width: 100%; }
.abs-grid th, .abs-grid td { padding: 0; text-align: center; border-bottom: 1px solid var(--border); }
.abs-grid thead th { font-weight: 600; min-width: 1.75rem; padding: .2rem 0; line-height: 1.15; color: var(--text); }
.abs-grid thead th span { display: block; font-size: .68rem; font-weight: 400; color: var(--muted); }
.abs-grid td { height: 1.9rem; min-width: 1.75rem; border-left: 1px solid var(--border); font-size: .85rem; }
.abs-grid .we { background: var(--surface-2); }
.abs-grid thead th.today { background: var(--accent); color: #fff; border-radius: 6px 6px 0 0; }
.abs-grid thead th.today span { color: #fff; }
.abs-grid td.today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.abs-grid .abs-name { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 0 .6rem 0 .2rem;
  min-width: 9rem; max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.abs-grid tr.me .abs-name { color: var(--accent); }
.abs-grid .abs-sum { min-width: 2rem; font-weight: 600; color: var(--muted); border-left: 1px solid var(--border); }
.abs-dept-row th { text-align: left; background: var(--surface); padding: .7rem 0 .2rem; font-size: .8rem; color: var(--muted); border-bottom: 0; }
.abs-dept-row th span { position: sticky; left: .2rem; }
.abs-empty { margin: .6rem; }
.abs-kinds { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.abs-kind { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .35rem .75rem; border-radius: 999px; border: 2px solid transparent;
  background: color-mix(in srgb, var(--abs) 35%, var(--surface)); cursor: pointer; font-weight: 500; }
.abs-kind input { margin: 0; width: auto; }
.abs-kind:has(input:checked) { border-color: var(--abs-ink); background: var(--abs); color: var(--abs-ink); }
.abs-hint { display: block; margin: -.5rem 0 .8rem 1.6rem; }
.abs-list { list-style: none; margin: 0; padding: 0; }
.abs-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.abs-list li:last-child { border-bottom: 0; }
.abs-list form { margin-left: auto; }
@media (max-width: 640px) {
  .abs-grid .abs-name { min-width: 6.5rem; max-width: 7.5rem; font-size: .78rem; }
  .abs-month strong { min-width: 7.5rem; }
}
.accent-more { margin-top: .2rem; }
.accent-more > summary { list-style: none; display: inline-block; }
.accent-more > summary::-webkit-details-marker { display: none; }

/* 📊 spreadsheet preview (static/sheetview.js): chat dialog + My files viewer */
.sheet-view { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); overflow: hidden; }
.sheet-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.sheet-table { width: max-content; border-collapse: separate; border-spacing: 0; font-size: .82rem; line-height: 1.35; }
.sheet-table th, .sheet-table td { padding: .25rem .5rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: pre; min-width: 2.5rem; vertical-align: top; text-align: left; }
.sheet-table td.long { white-space: pre-wrap; min-width: 14rem; max-width: 24rem; overflow-wrap: break-word; }
.sheet-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-table thead th { position: sticky; top: 0; z-index: 1; }
.sheet-table th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: .75rem; text-align: center; }
.sheet-table tbody th { position: sticky; left: 0; min-width: 2.2rem; text-align: right; }
.sheet-table th.sheet-corner { left: 0; z-index: 2; }
.sheet-table tbody tr:hover td { background: var(--accent-soft); }
.sheet-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 .4rem; border-top: 1px solid var(--border); background: var(--surface-2); flex: none; }
.sheet-tab { flex: none; padding: .35rem .8rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; }
.sheet-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); font-weight: 600; background: var(--surface); }
.sheet-note { flex: none; margin: 0; padding: .35rem .6rem; line-height: 1.4; max-height: calc(3 * 1.4em + .7rem); overflow: auto; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.sheet-empty, .sheet-loading { margin: 0; padding: 1.5rem; color: var(--muted); text-align: center; }

/* 📄 Word preview (static/docview.js): a simple page, the note line is shared with the spreadsheet view */
.doc-view { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); overflow: hidden; }
.doc-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 1rem; }
.doc-page { max-width: 820px; margin: 0 auto; padding: 2rem 2.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); line-height: 1.55; font-size: .95rem; overflow-wrap: break-word; }
.doc-page .doc-h { margin: 1.2em 0 .45em; line-height: 1.25; }
.doc-page .doc-h:first-child { margin-top: 0; }
.doc-page h1.doc-h { font-size: 1.5rem; } .doc-page h2.doc-h { font-size: 1.25rem; } .doc-page h3.doc-h { font-size: 1.1rem; }
.doc-page :is(h4, h5, h6).doc-h { font-size: 1rem; }
.doc-p { margin: 0 0 .6em; white-space: pre-wrap; tab-size: 4; }
.doc-li { display: flex; gap: .5rem; margin: 0 0 .3em calc(var(--lvl, 0) * 1.5rem + .4rem); white-space: pre-wrap; }
.doc-marker { flex: none; min-width: 1.2rem; text-align: right; color: var(--muted); }
.doc-li-text { min-width: 0; }
.doc-table-wrap { overflow-x: auto; margin: .4em 0 1em; padding: 0 1px 1px 0; }
.doc-table { width: auto; border-collapse: collapse; font-size: .88rem; }
.doc-table td { border: 1px solid var(--border); padding: .3rem .55rem; vertical-align: top; }
.doc-table td p { margin: 0; white-space: pre-wrap; }
@media (max-width: 640px) {
  .doc-scroll { padding: .4rem; }
  .doc-page { padding: 1rem .9rem; font-size: .92rem; }
}

/* Fiókom: független oszlopok, hogy a magas Profil-kártya ne hagyjon lyukakat a többi mellett */
.acct-cols { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.acct-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.acct-col > .card { margin: 0; }
@media (min-width: 700px) {
  .acct-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .acct-col:first-child { grid-row: span 2; }
}
@media (min-width: 1000px) {
  .acct-cols { grid-template-columns: repeat(3, 1fr); }
  .acct-col:first-child { grid-row: auto; }
}

/* ---- page header: links on the left of the tools; on phones folded into a ☰ menu (nav.js) ---- */
@media (min-width: 761px) {
  .topbar { flex-wrap: nowrap; }
  .topbar nav { order: 1; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
}
.topbar .top-tools { order: 2; display: flex; align-items: center; gap: .5rem; }
.topbar .nav-group { display: contents; }
.topbar nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .topbar .top-tools { order: 1; margin-left: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; padding: 0;
  }
  .nav-toggle:hover { background: var(--surface-2); }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle .i-close, .nav-open .nav-toggle .i-menu { display: none; }
  .nav-open .nav-toggle .i-close { display: block; }
  .topbar nav { order: 2; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: .25rem 0 0; }
  .topbar.nav-open nav { display: flex; }
  .topbar .nav-group { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .35rem; }
  .topbar nav a, .topbar nav .linklike { display: block; width: 100%; text-align: left; padding: .6rem .5rem; border-radius: 8px; font-size: 1rem; }
  .topbar nav a:hover, .topbar nav .linklike:hover { background: var(--surface-2); text-decoration: none; }
  .topbar nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
}

/* ---- page footer ---- */
body.page { min-height: 100vh; display: flex; flex-direction: column; }
body.page > .page-body { flex: 1 0 auto; width: 100%; }
.page-foot { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .9rem; }
.page-foot .foot-inner { max-width: 1150px; margin: 0 auto; padding: .9rem 16px; display: flex; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; }
.page-foot .foot-brand { order: 0; }
.page-foot .foot-links { order: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; }
.page-foot .foot-btns { order: 2; margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.page-foot .btn { padding: .4rem .85rem; font-size: .9rem; }
@media (max-width: 760px) {
  .page-foot .foot-inner { flex-direction: column; align-items: stretch; text-align: center; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom)); }
  .page-foot .foot-btns { order: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .page-foot .foot-btns > :only-child { grid-column: 1 / -1; }
  .page-foot .btn { padding: .65rem .75rem; font-size: .95rem; }
  .page-foot .foot-links { justify-content: center; gap: .25rem 1.25rem; }
  .page-foot .foot-brand { order: 3; }
  .page-foot .foot-links a, .page-foot .foot-links .linklike { padding: .35rem 0; }
}

/* 💬 our own alert / confirm / prompt (static/confirm.js) */
.ui-dlg {
  width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08);
  animation: ui-dlg-in .16s ease-out;
}
.ui-dlg::backdrop { background: rgba(10, 16, 24, .45); backdrop-filter: blur(2px); animation: ui-dlg-fade .16s ease-out; }
.ui-dlg.ui-dlg-out { animation: ui-dlg-out .12s ease-in forwards; }
.ui-dlg.ui-dlg-out::backdrop { animation: ui-dlg-fade .12s ease-in reverse forwards; }
.ui-dlg form { padding: 1.25rem 1.25rem 1rem; margin: 0; }
.ui-dlg-head { display: flex; gap: .9rem; align-items: flex-start; }
.ui-dlg-ic {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.ui-dlg-ic svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-dlg-danger { --ui-dlg-red: var(--danger); }
.ui-dlg-danger .ui-dlg-ic { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); color: var(--ui-dlg-red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-dlg-danger { --ui-dlg-red: color-mix(in srgb, var(--danger) 65%, #fff); } }
:root[data-theme="dark"] .ui-dlg-danger { --ui-dlg-red: color-mix(in srgb, var(--danger) 65%, #fff); }
.ui-dlg-body { flex: 1; min-width: 0; padding-top: .45rem; }
.ui-dlg-title { margin: 0 0 .3rem; font-size: 1.05rem; }
.ui-dlg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.ui-dlg-input { display: block; width: 100%; min-width: 0; margin-top: 1rem; }
.ui-dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
.ui-dlg-actions .btn { min-width: 6rem; padding: .5rem 1rem; border-radius: 10px; font-weight: 600; }
.ui-dlg-actions .ui-dlg-ok-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.ui-dlg-actions .ui-dlg-ok-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }
.ui-dlg-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .ui-dlg-actions { flex-direction: column-reverse; }
  .ui-dlg-actions .btn { width: 100%; padding: .65rem 1rem; }
}
@keyframes ui-dlg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ui-dlg-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes ui-dlg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-dlg, .ui-dlg::backdrop, .ui-dlg.ui-dlg-out { animation: none; } }
/* hero layout: big icons on top, centred text (static/mediaperm.js) */
.ui-dlg-hero { width: min(400px, calc(100vw - 32px)); }
.ui-dlg-hero form { padding: 1.6rem 1.4rem 1.1rem; }
.ui-dlg-hero .ui-dlg-head { flex-direction: column; align-items: center; text-align: center; gap: .9rem; }
.ui-dlg-hero .ui-dlg-ics { display: flex; gap: .75rem; }
.ui-dlg-hero .ui-dlg-ic { width: 64px; height: 64px; }
.ui-dlg-hero .ui-dlg-ic svg.ic { width: 30px; height: 30px; }
.ui-dlg-hero .ui-dlg-ic:only-child { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.ui-dlg-hero .ui-dlg-body { padding-top: 0; }
.ui-dlg-hero .ui-dlg-title { font-size: 1.15rem; margin-bottom: .45rem; }
.ui-dlg-note { margin: .7rem 0 0; padding: .6rem .75rem; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: .88rem; line-height: 1.45; text-align: left; }
.ui-dlg-hero .ui-dlg-actions { justify-content: center; }
.ui-dlg-hero .ui-dlg-actions .btn { width: 100%; padding: .65rem 1rem; }