@font-face {
    font-family: 'Civil Premium';
    src: url('../fonts/Civil Premium Regular.woff2') format('woff2'),
         url('../fonts/Civil Premium Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Civil Premium';
    src: url('../fonts/Civil Premium Medium.woff2') format('woff2'),
         url('../fonts/Civil Premium Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Civil Premium';
    src: url('../fonts/Civil Premium Bold.woff2') format('woff2'),
         url('../fonts/Civil Premium Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primary: #00b199;
    --color-primary-dark: #009980;
    --color-primary-light: #cef9f5;
    --color-primary-mid: #e0f7f4;
    --color-bg: #f9f9f6;
    --color-surface: #ffffff;
    --color-text: var(--color-primary);
    --color-border: #e0e0e0;
    --color-warning: #f39c12;
    --color-error: #dc3545;
    --color-success: #27ae60;
    --nav-height: 5rem;
    --border-radius: 4px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --content-padding: 4rem;
}

html.dark {
    --color-primary: #1dd1a1;
    --color-primary-dark: #17b88e;
    --color-primary-light: rgba(29,209,161,0.12);
    --color-primary-mid: rgba(29,209,161,0.18);
    --color-bg: #1a1a2e;
    --color-surface: #16213e;
    --color-border: #2a2a4a;
    --color-text: #e0e0e0;
    --color-warning: #ffb81c;
    --color-error: #ff6b6b;
    --color-success: #51cf66;
}

html.colorblind {
    --color-primary: #000000;
    --color-primary-dark: #000000;
    --color-primary-light: rgba(0,0,0,0.06);
    --color-primary-mid: rgba(0,0,0,0.1);
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-border: #000000;
    --color-text: #000000;
    --color-warning: #000000;
    --color-error: #000000;
    --color-success: #000000;
}

@media screen and (orientation: portrait) {
    :root { --content-padding: 2rem; }
}

* {
    --scrollbarBG: var(--color-bg);
    --thumbBG: var(--color-primary);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Civil Premium', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--scrollbarBG); }
*::-webkit-scrollbar-thumb { background-color: var(--thumbBG); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--thumbBG), black 15%); }

::selection { background-color: var(--color-primary); color: #fff; }

html, body { min-height: 100% !important; height: 100%; width: 100%; overflow: auto; }
body { background: var(--color-bg); color: var(--color-text); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }
.hidden { display: none !important; }
.d-none { display: none !important; }

/* ── Nav ────────────────────────────────────────────────────────── */
nav { position: absolute; display: block; top: 0; width: 100%; height: var(--nav-height); background-color: var(--color-primary); box-shadow: var(--shadow-md); z-index: 20; }
.logo { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; left: var(--content-padding); padding-left: 10px; display: inline-block; }
.logo-nav { display: block; height: calc(var(--nav-height) - 2rem); }
.nav-home { text-decoration: none; }
/* The logo anchor has ZERO SIZE: its only child `.logo` is position:absolute and
   so is out of flow, collapsing the <a>. An <a href> is focusable, so Tab DOES
   stop here — the browser simply has nothing to draw a ring around, making the
   stop invisible (WCAG 2.4.7). Found by the owner tabbing the real page; no
   static check would have seen it, because the markup is correct and the defect
   is in the geometry. So the indicator is drawn on the CHILD, which has a box.
   `outline: none` is safe here ONLY because a replacement is provided directly
   below and `.logo` is unconditional in the markup — never split these two.
   A DOUBLE ring, not a single: the nav is `--color-primary` (#00b199), against
   which white is ~2.8:1 and fails the 3:1 that WCAG 1.4.11 wants of a focus
   indicator. White-on-black is visible against any background, so it also holds
   up in the dark and high-contrast themes without a per-theme override. */
.nav-home:focus-visible { outline: none; }
.nav-home:focus-visible .logo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; border-radius: 4px; }
.nav-links { position: absolute; bottom: 0.4rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1.5rem; align-items: center; }
.nav-link { color: white; font-size: 0.95rem; font-weight: 600; opacity: 0.7; text-decoration: none; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 0.35rem; border-bottom: 2px solid transparent; padding-bottom: 0.15rem; }
a.nav-link:hover { opacity: 1; text-decoration: none; }
.nav-link-active { opacity: 1; border-bottom-color: white; }
.nav-link-icon { width: 0.85em; height: 0.85em; color: white; }
.nav-user { position: absolute; bottom: 0.4rem; right: var(--content-padding); color: white; font-size: 0.9rem; opacity: 0.85; display: flex; align-items: center; gap: 0.4rem; }
.nav-user a { display: flex; align-items: center; }
/* The name and the stop label are SPANS so the narrow breakpoint can hide them
   visually (KITT6/sablona#73). The `*` reset sets 14px on every element, so a
   span does NOT inherit its parent's size the way the bare text it replaced did:
   without this the name grows from 12.6px to 14px at every width. The name is
   also CAPPED: it is the one toolbar item whose width the template does not
   choose, so without a cap no breakpoint measured against one name holds for
   the next (a 26-character name overlapped the wordmark at 769 px). */
.nav-user-name, .impersonate-stop-label { font-size: inherit; }
.nav-user-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-role { font-size: 0.7rem; background: transparent; border: 1px solid rgba(255,255,255,0.6); padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 500; white-space: nowrap; }
.nav-logout-icon { width: 1rem; height: 1rem; color: white; opacity: 0.85; cursor: pointer; transition: opacity 0.2s; }
.nav-logout-icon:hover { opacity: 1; }

/* ── Impersonate ───────────────────────────────────────────────── */
.nav-impersonate-icon { height: 1rem; width: 1rem; color: white; opacity: 0.85; cursor: pointer; transition: opacity 0.2s; }
.nav-impersonate-icon:hover { opacity: 1; }
/* The "stop impersonating" control (KITT6/sablona#20). Sits in the nav beside
   the user name and is the only way back, so it must stay visible wherever the
   nav is. Below 600 px it gives up its words and keeps its icon (#73). */
.impersonate-stop-form { display: inline; }
/* Sits beside .nav-role in the same bar and must read as its sibling, so the
   font-size TRACKS .nav-role (0.7rem, 0.6rem narrow) rather than being set
   independently. It was 0.8rem: 11.2px against the pill's 9.8px at a 14px root,
   and the narrow breakpoint shrank the pill to 0.6rem while leaving this alone,
   widening the mismatch to 33%. */
.impersonate-stop { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 1px solid rgba(255,255,255,0.5); color: white; font: inherit; font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 3px; cursor: pointer; opacity: 0.9; transition: opacity 0.2s, background 0.2s; }
.impersonate-stop:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.impersonate-modal { position: absolute; top: calc(var(--nav-height) - 0.4rem); right: var(--content-padding); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1rem; box-shadow: var(--shadow-lg); z-index: 25; width: 20rem; }
.impersonate-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.impersonate-header modal-title { display: block; font-size: 1rem; font-weight: 700; color: var(--color-primary); margin: 0; }
.impersonate-modal .form-input { width: 100%; box-sizing: border-box; margin-bottom: 0.6rem; }
.impersonate-modal .form-actions { justify-content: flex-end; }

/* ── Nav workspace toggle (app ↔ admin/settings) ──────────────────── */
/* Workspace switchers and the hamburger are <button>s (KITT6/sablona#30) — all
   three were <div>s: click-only, unfocusable, named by a title attribute alone.
   NOTE this reset deliberately does NOT set `display`: .nav-hamburger is
   display:none by default and display:flex only at the narrow breakpoint, so
   setting it here would break the responsive show/hide. */
button.nav-toolbar-icon, button.nav-hamburger { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; font: inherit; color: inherit; }

.nav-toolbar-icon { display: inline-flex; align-items: center; cursor: pointer; margin-right: 0.2rem; }
.nav-toolbar-svg { width: 16px; height: 16px; color: white; opacity: 0.8; transition: opacity 0.15s; }
.nav-toolbar-icon:hover .nav-toolbar-svg { opacity: 1; }

/* ── Dark toggle ────────────────────────────────────────────────── */
/* <button>s, not <div>s (KITT6/sablona#30): both are controls, and both were
   click-only, unfocusable, and named by a `title` ATTRIBUTE alone. The UA
   chrome is stripped so they look exactly as they did.
   NOTE the theme toggle is THREE-state (light / dark / high-contrast), so
   aria-pressed would be wrong for it; announcing the CURRENT state is a
   separate question and is deliberately still open. */
button.dark-toggle, button.push-toggle { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; padding: 0; color: inherit; }
.dark-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.dark-toggle-svg { width: 16px; height: 16px; color: white; opacity: 0.8; }
.dark-toggle-svg:hover { opacity: 1; }

/* ── Reminder toggle ───────────────────────────────────────────── */

/* ── Push toggle ───────────────────────────────────────────────── */
.push-toggle { display: inline-flex; align-items: center; cursor: pointer; position: relative; margin-left: 0.35rem; }
.push-toggle .dark-toggle-svg { opacity: 0.75; transition: opacity 0.15s; }
.push-toggle:hover .dark-toggle-svg { opacity: 1; }
.push-toggle.active .dark-toggle-svg { opacity: 1; }

/* ── Icons ──────────────────────────────────────────────────────── */
svg.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; overflow: visible; }
.icon-button { width: 2.4rem; height: 2.4rem; color: var(--color-primary); }
.svg-theme { color: var(--color-primary); }
.svg-red { color: var(--color-error); }
.clickable { cursor: pointer; transition: transform 0.2s; }
.clickable:hover { transform: scale(1.2); }
/* Interactive icons are real <button>s (KITT6/sablona#30): the name, focus ring,
   Enter/Space and disabled semantics come from the platform. This strips the UA
   chrome so the button is visually just the icon it wraps — every paint class
   stays on the inner <svg>, so nothing about the rendering moves.
   The focus outline is deliberately NOT restyled: the brand #00b199 is 2.57:1
   on the light ground and would fail the 3:1 a focus indicator needs (the same
   defect /pristupnost documents), and `outline: none` without a replacement is
   the classic regression. The UA ring is high-contrast by design; only the
   offset is set, so it is not clipped by the glyph. */
button.icon-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
button.icon-btn:focus-visible { outline-offset: 2px; }
/* Carries over what `.detail-header .icon-button` gave the svg when the svg was
   itself the flex child; the button is the flex child now. */
.detail-header .icon-btn, .form-header .icon-btn, .impersonate-header .icon-btn { flex-shrink: 0; align-self: center; }

#filter-toggle { opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
#filter-toggle:hover { opacity: 0.8; }
#filter-toggle.active { opacity: 1; }

/* ── Backdrop & Progress ────────────────────────────────────────── */
#backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.15); backdrop-filter: blur(6px); z-index: 15; }
.lds-ring { position: fixed; display: block; left: calc(50% - 2.5rem); top: calc(50% - 2.5rem); width: 80px; height: 80px; z-index: 2000; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px; border: 8px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: var(--color-primary) transparent transparent transparent; }
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ── Toast ──────────────────────────────────────────────────────── */
#toast { visibility: hidden; min-width: 250px; background-color: var(--color-primary); color: #fff; text-align: center; border-radius: var(--border-radius); padding: 12px 24px; position: fixed; z-index: 3000; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
#toast.show { visibility: visible; animation: fadein 0.3s; }
#toast.toast-err { background-color: var(--color-error); }
#toast-icon { width: 16px; height: 16px; flex-shrink: 0; display: block; color: white; transform: translateY(-0.05em); }
@keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } }

/* ── Main content ───────────────────────────────────────────────── */
main { position: absolute; top: var(--nav-height); display: block; left: var(--content-padding); padding: 1rem; padding-bottom: 7rem; width: calc(100% - var(--content-padding) * 2); color: var(--color-primary); }
h1 { font-weight: 600; font-size: 1.6rem; margin-top: 0.5rem; }

/* ── List table ─────────────────────────────────────────────────── */
.list-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.list-table thead th { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: 0.6rem 0.5rem; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); opacity: 0.7; text-align: left; font-weight: 600; white-space: nowrap; }
.list-table thead th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 1.2rem; }
.list-table thead th.sortable:hover { opacity: 1; }
.list-table thead th.sorted-asc::after { content: '\25B2'; position: absolute; right: 0.2rem; opacity: 0.9; font-size: 0.6rem; }
.list-table thead th.sorted-desc::after { content: '\25BC'; position: absolute; right: 0.2rem; opacity: 0.9; font-size: 0.6rem; }
/* The operable half of a sortable header (KITT6/sablona#33). The <th> keeps the
   click listener and carries `aria-sort`; this button exists so the control is
   reachable by Tab and activated by Enter/Space, which a <th> never is.
   Deliberately chrome-free: every header style stays on the <th> and is
   inherited here, so nothing about the rendering moves. `font: inherit` does not
   cover letter-spacing/text-transform (they are not `font` longhands and some UA
   sheets reset them on form controls), so both are named explicitly.
   The focus ring is NOT restyled, for the reason given at button.icon-btn. */
.list-table thead th.sortable > .th-sort-btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.list-table thead th.sortable > .th-sort-btn:focus-visible { outline-offset: 2px; }
.list-table th, .list-table td { vertical-align: top; padding: 0.6rem 0.5rem; white-space: normal; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; }
.list-table td { border-bottom: 1px solid var(--color-border); }
.list-table td:last-child { overflow: visible; }
tr.row-highlight { cursor: pointer; transition: background-color 0.15s; }
tr.row-highlight:hover { background-color: var(--color-primary-light) !important; }
.list-table tbody tr.highlight { background: var(--color-primary-mid); }
.th-actions { text-align: right !important; }
.th-actions .icon { vertical-align: middle; margin-left: 6px; }
.td-actions { white-space: nowrap; text-align: right; }
.row-action-icon { width: 0.95rem; height: 0.95rem; cursor: pointer; opacity: 0.7; transition: opacity 0.15s, transform 0.15s; margin-left: 0.3rem; vertical-align: middle; }
.row-action-icon:hover { opacity: 1; transform: scale(1.2); }
.row-action-icon.svg-red { color: var(--color-error); }
.row-action-link { text-decoration: none; display: inline; }

/* ── Filter row ─────────────────────────────────────────────────── */
.filter-row.filter-hidden { display: none; }
.list-table .filter-row th { padding: 0.4rem 0.5rem; border-bottom: none; text-transform: none; letter-spacing: normal; opacity: 1; }
.filter-wrap { position: relative; display: block; }
/* A <button>, not a <span> (KITT6/sablona#30): it clears a field, so it is a
   control — it was click-only, unfocusable, and named with a bare "×", which
   says nothing to a screen reader. The UA chrome is stripped so it looks
   exactly as it did; `appearance: none` because a button also picks up a
   platform background on some engines. */
.filter-clear { appearance: none; -webkit-appearance: none; border: 0; background: none; font-family: inherit; padding: 0; cursor: pointer; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); color: var(--color-primary); font-size: 1rem; line-height: 1; cursor: pointer; display: none; opacity: 0.6; transition: opacity 0.15s; }
.filter-clear:hover { opacity: 1; }
.filter-wrap.has-value .filter-clear { display: block; }
input[type=text].filter-input { width: 100%; height: 1.8rem; border: 1px solid var(--color-primary); border-radius: 0 0 6px 6px; outline: none; padding: 0 1.4rem 0 0.4rem; font-size: 0.8rem; color: var(--color-primary); box-sizing: border-box; text-align: left; background: var(--color-surface); }
input[type=text].filter-input::placeholder { color: var(--color-primary); opacity: 0.4; }
input[type=text].filter-input:focus { box-shadow: 0 0 0 2px rgba(0,177,153,0.15); border-color: var(--color-primary); }

/* ── Fulltext search ───────────────────────────────────────────── */
.fulltext-bar { margin-bottom: 0.6rem; }
.fulltext-wrap { display: flex; align-items: center; width: 100%; position: relative; }
.fulltext-icon { position: absolute; left: 0.5rem; width: 14px; height: 14px; color: var(--color-primary); opacity: 0.5; pointer-events: none; z-index: 1; }
.fulltext-input { padding-left: 1.8rem !important; height: 2.2rem; font-size: 0.9rem; border-radius: 0 0 8px 8px; width: 100%; }
.fulltext-wrap .filter-clear { right: 0.4rem; }
.search-progress { position: absolute; bottom: 0; left: 2px; height: 4px; width: 0; background: var(--color-primary); opacity: 0.85; border-radius: 0 0 6px 6px; pointer-events: none; z-index: 2; }
.search-progress.animating { transition: width 1s linear; }

/* ── Room pills ─────────────────────────────────────────────────── */
.pills-bar { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.pills-bar > .pills-group { flex-basis: 100%; }
.pills-group { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; }
.filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.2rem; padding: 0 1rem; border: 2px solid var(--color-primary); border-radius: 0 0 6px 6px; background: var(--color-surface); color: var(--color-primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.filter-pill .pill-icon { width: 14px; height: 14px; opacity: 0.7; }
.filter-pill:not(.active):hover { background: var(--color-primary-mid); }
.filter-pill.active { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.filter-pill.active .pill-icon { color: #fff; opacity: 1; }
#status-pills-bar { margin-top: 0.6rem; }
#time-pills-bar { margin-top: 0.6rem; }
.page-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.page-header h1 { margin: 0.5rem 0; }
#view-toggle-bar { display: inline-flex; }
.pill-separator { width: 1px; height: 1.6rem; background: var(--color-border); align-self: center; margin: 0 0.15rem; }
.time-pill-month { font-size: 0.8rem; padding: 0 0.7rem; }

/* ── Invite recipient pills ─────────────────────────────────────── */
.invite-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 2rem; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); margin-bottom: 0.5rem; }
.invite-pills-empty { color: var(--color-text); opacity: 0.5; font-size: 0.85rem; padding: 0.2rem 0.4rem; }
.invite-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; background: var(--color-primary); color: #fff; border-radius: 1rem; font-size: 0.85rem; font-weight: 500; }
.invite-pill-x { width: 14px; height: 14px; cursor: pointer; opacity: 0.85; }
.invite-pill-x:hover { opacity: 1; }
.form-hint { display: block; font-size: 0.8rem; color: var(--color-text); opacity: 0.6; }
.form-warn { display: block; font-size: 0.8rem; color: #c0392b; margin-top: 0.25rem; }

/* ── Room ACL pills (in list) ───────────────────────────────────── */
.acl-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.acl-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.acl-pill-icon { width: 11px; height: 11px; }
.acl-pill-person { background: rgba(0, 177, 153, 0.15); color: var(--color-primary); }
.acl-pill-group { background: rgba(100, 116, 139, 0.18); color: #475569; }
.acl-pill-public { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.acl-pill-private { background: rgba(234, 88, 12, 0.15); color: #c2410c; }
html.dark .acl-pill-person { background: rgba(0, 177, 153, 0.25); }
html.dark .acl-pill-group { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
html.dark .acl-pill-public { background: rgba(34, 197, 94, 0.25); color: #86efac; }
html.dark .acl-pill-private { background: rgba(251, 146, 60, 0.25); color: #fdba74; }
.acl-pill-equip { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
html.dark .acl-pill-equip { background: rgba(129, 140, 248, 0.25); color: #a5b4fc; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.4rem; }
.equip-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; color: var(--color-text); cursor: pointer; padding: 0.3rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; transition: background 0.15s; }
.equip-check:hover { background: var(--color-primary-light); }
.equip-check input[type="checkbox"] { margin: 0; accent-color: var(--color-primary); }
.equip-check .acl-pill-icon { color: var(--color-primary); }
.equip-admin-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.equip-admin-row .acl-pill-icon { color: var(--color-primary); flex-shrink: 0; }
.equip-admin-name { flex: 1; }
.equip-admin-actions { display: flex; gap: 0.3rem; flex-shrink: 0; white-space: nowrap; }
.equip-admin-empty { font-size: 0.85rem; color: var(--color-text); opacity: 0.5; font-style: italic; padding: 0.5rem 0; }
.acl-empty { font-size: 0.8rem; color: var(--color-text); opacity: 0.5; font-style: italic; }
.room-vis-icon { width: 14px; height: 14px; vertical-align: -2px; }
.room-vis-public { color: var(--color-primary); }
.room-vis-private { color: var(--color-text); opacity: 0.55; }
.form-row-checkbox label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: normal; font-size: 0.9rem; color: var(--color-text); }
.form-row-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.form-row-checkbox input[type="checkbox"]:hover { border-color: var(--color-primary); }
.form-row-checkbox input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
    background-size: 0.85rem 0.85rem;
    background-position: center;
    background-repeat: no-repeat;
}
.form-row-checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

.form-row-radio { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.form-row-radio label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: normal; font-size: 0.9rem; color: var(--color-text); margin-bottom: 0; }
.form-row-radio input[type="radio"] { accent-color: var(--color-primary); cursor: pointer; }

.weekday-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.weekday-chip { padding: 0.35rem 0.7rem; border: 2px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary); border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-width: 2.4rem; transition: background 0.15s, color 0.15s; }
.weekday-chip:hover { background: var(--color-primary-light); }
.weekday-chip.is-active { background: var(--color-primary); color: #fff; }
html.colorblind .weekday-chip { border-color: #000; color: #000; }
html.colorblind .weekday-chip.is-active { background: #000; color: #fff; }

/* ── Filter match highlight ────────────────────────────────────── */
mark { background-color: #fff3b0; color: inherit; padding: 0; border-radius: 2px; box-shadow: 0 0 0 0.15em #fff3b0; }
html.dark mark { background-color: rgba(255, 243, 176, 0.25); box-shadow: 0 0 0 0.15em rgba(255, 243, 176, 0.25); }

/* ── Room color indicators ─────────────────────────────────────── */
.room-color-dot { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0,0,0,0.1); }
.room-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.room-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.room-color-square { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 3px; vertical-align: middle; border: 1px solid rgba(0,0,0,0.1); }
.row-conflict-icon { width: 1rem; height: 1rem; vertical-align: middle; color: var(--color-error); margin-left: 0.35rem; }
.row-action-icon-watched { color: var(--color-primary); }
.row-action-icon-watched:hover { color: var(--color-primary-dark); }
.series-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; background: var(--color-primary-mid); color: var(--color-primary); border-radius: 1rem; font-size: 0.85rem; font-weight: 500; }
.series-badge .icon { width: 14px; height: 14px; }

/* ── Row count ──────────────────────────────────────────────────── */
.row-count { font-size: 0.85rem; color: var(--color-primary); opacity: 0.6; padding: 0.6rem 0; }

/* ── Detail panel ───────────────────────────────────────────────── */
#detail-panel { position: fixed; display: block; z-index: 250; left: 15%; width: 70%; top: calc(var(--nav-height) + 2rem); max-height: calc(100vh - var(--nav-height) - 6rem); overflow-y: auto; transition: left 0.2s, width 0.2s; }
#detail-container { background: var(--color-surface); border: 1px solid rgba(0,177,153,0.2); border-radius: 8px; padding: 1.5rem; box-shadow: var(--shadow-lg); }
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin: -1.5rem -1.5rem 1rem -1.5rem; padding: 1rem 1.5rem; position: sticky; top: 0; background: var(--color-surface); z-index: 10; border-radius: 8px 8px 0 0; }
.detail-header .icon-button { width: 2.4rem; height: 2.4rem; flex-shrink: 0; align-self: center; }
.detail-title { font-size: 1.35rem; font-weight: 700; color: var(--color-primary); }
.detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.5rem; margin-bottom: 1.5rem; }
.detail-info-full { grid-column: 1 / -1; }
.detail-info-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--color-primary); }
.detail-info-value { background: var(--color-primary-light); border: 2px solid var(--color-primary); border-radius: 0 0 8px 8px; padding: 0.4rem 0.5rem; font-size: 0.9rem; color: var(--color-primary); min-height: 2.2rem; line-height: 1.4rem; word-break: break-word; }
.detail-info-value:empty::after { content: '\2014'; opacity: 0.3; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-icon { width: 0.95rem; height: 0.95rem; display: block; transform: translateY(-0.05em); }
.cta-button .btn-icon { color: #fff; }
.cta-button-secondary .btn-icon { color: var(--color-primary); }
.cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.4rem; background-color: var(--color-primary); color: #fff; border: none; border-radius: 0 0 8px 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, transform 0.15s; }
.cta-button:hover { background-color: var(--color-primary-dark); transform: translateY(-1px); }
.cta-button-secondary { background-color: var(--color-surface); color: var(--color-primary); border: 2px solid var(--color-primary); }
.cta-button-secondary:hover { background-color: var(--color-primary-light); }
.cta-button-danger { background-color: var(--color-error); }
.cta-button-danger:hover { background-color: color-mix(in srgb, var(--color-error), black 15%); transform: translateY(-1px); }
.cta-button-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.mini-modal-stacked .form-actions { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
.mini-modal-stacked .form-actions .cta-button { justify-content: flex-start; padding: 0.75rem 1rem; width: 100%; }
.form-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.form-header .icon-button { width: 2.4rem; height: 2.4rem; flex-shrink: 0; align-self: center; }

/* ── Mini modal ─────────────────────────────────────────────────── */
.mini-modal { position: fixed; z-index: 1500; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: calc(var(--nav-height) + 2rem); padding-bottom: 2rem; overflow: hidden; background: rgba(0,0,0,0.15); backdrop-filter: blur(6px); }
#confirm-modal { z-index: 1600; }
.mini-modal-container { background: var(--color-surface); border: 1px solid rgba(0,177,153,0.2); border-radius: 8px; padding: 1.5rem; box-sizing: border-box; width: 30rem; max-width: 90vw; max-height: calc(100vh - var(--nav-height) - 4rem); overflow-y: auto; box-shadow: var(--shadow-lg); }
.mini-modal-container modal-title { display: block; font-size: 1.25rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.75rem; }
.confirm-message { margin-bottom: 1rem; font-size: 0.95rem; }

/* ── Form inputs ────────────────────────────────────────────────── */
.form-row { margin-bottom: 1rem; }
.form-row-pair { display: flex; gap: 1rem; }
.form-row-pair > .form-row { flex: 1; min-width: 0; }
.form-row label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--color-primary); }
/* A mandatory field (KITT6/sablona#61; car, nahlizeni, gremium): ` *` after the
   label text, never typed into the Czech label itself. The asterisk is only the
   visual half: the control also carries `required`, which is what a screen
   reader announces. */
label.required::after { content: ' *'; color: var(--color-primary); font-weight: 600; }
.form-input { display: block; width: 100%; height: 2.2rem; border: 2px solid var(--color-primary); border-radius: 0 0 8px 8px; outline-color: var(--color-primary); padding: 0 0.5rem; font-size: 0.9rem; text-align: left; color: var(--color-primary); background: var(--color-surface); box-sizing: border-box; }
textarea.form-input { height: auto; min-height: 4rem; padding: 0.4rem 0.5rem; resize: vertical; }
.form-input:focus { box-shadow: 0 0 0 3px rgba(0,177,153,0.15); border-color: var(--color-primary); }
.form-input::placeholder { color: var(--color-primary); opacity: 0.55; }

/* The clear cross of a text .form-input (#61), mirroring .filter-wrap /
   .filter-clear above: a <button>, so it is focusable and named (#30). Wired
   by UI.initClearButtons(). In a textarea it sits at the top, not centred. */
.input-wrap { position: relative; display: block; }
.input-clear { appearance: none; -webkit-appearance: none; border: 0; background: none; font-family: inherit; padding: 0; cursor: pointer; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--color-primary); font-size: 1rem; line-height: 1; display: none; opacity: 0.6; transition: opacity 0.15s; }
.input-clear:hover { opacity: 1; }
.input-wrap.has-value .input-clear { display: block; }
.input-wrap .form-input { padding-right: 1.6rem; }
.input-wrap textarea.form-input + .input-clear { top: 0.5rem; transform: none; }

.gc-row { display: flex; gap: 0.5rem; align-items: stretch; }
.gc-row .gc-input { flex: 1; min-width: 0; }
.gc-row .gc-create-btn { flex: 0 0 auto; white-space: nowrap; }
.gc-create-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.form-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: rgba(0,0,0,0.05); padding: 0 0.25rem; border-radius: 3px; }

/* ── Searchable combobox ───────────────────────────────────────── */
.combo-wrap { position: relative; }
select.combo-hidden { display: none !important; }
input.combo-input { display: block; width: 100%; height: 2.2rem; border: 2px solid var(--color-primary); border-radius: 0 0 8px 8px; outline-color: var(--color-primary); padding: 0 2rem 0 0.5rem; font-size: 0.9rem; text-align: left; box-sizing: border-box; color: var(--color-primary); background-color: var(--color-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b199' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 1.2rem; cursor: pointer; }
input.combo-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,177,153,0.15); border-color: var(--color-primary); }
input.combo-input::placeholder { color: var(--color-primary); opacity: 0.4; }
.combo-clear { position: absolute; right: 1.8rem; top: 50%; transform: translateY(-50%); color: var(--color-primary); font-size: 1rem; cursor: pointer; display: none; opacity: 0.5; line-height: 1; z-index: 1; }
.combo-clear:hover { opacity: 1; }
.combo-wrap.has-value .combo-clear { display: block; }
.combo-list { display: none; position: fixed; max-height: 14rem; overflow-y: auto; background: var(--color-surface); border: 2px solid var(--color-primary); border-top: none; border-radius: 0 0 8px 8px; z-index: 2000; }
.combo-list.open { display: block; }
.combo-item { padding: 0.4rem 0.5rem; font-size: 0.9rem; color: var(--color-primary); cursor: pointer; }
.combo-item:hover, .combo-item.highlighted { background-color: var(--color-primary-light); }
.combo-item.active { font-weight: 600; background-color: var(--color-primary-light); }
html.dark input.combo-input { background-color: var(--color-surface); color: var(--color-text); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231dd1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html.dark .combo-list { background: var(--color-surface); }
html.dark .combo-item { color: var(--color-text); }

/* ── FAB ────────────────────────────────────────────────────────── */
cta { position: fixed; display: flex; width: 5rem; height: 5rem; margin: auto; background: var(--color-primary); z-index: 10; bottom: 0; border-radius: 50%; border: 0.25rem solid white; left: calc(50% - 2.5rem); box-shadow: var(--shadow-lg); transition: transform 0.2s, box-shadow 0.2s; }
cta:hover { transform: scale(1.05); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
icon { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; cursor: pointer; }
.fab-icon { width: 3.2rem; height: 3.2rem; color: white; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer { position: fixed; left: 0; bottom: 0; width: 100%; height: 3rem; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 1.5rem 1.5rem 0 0; z-index: 5; min-width: 25rem; box-shadow: 0 -2px 8px rgba(0,0,0,0.04); }
version { position: absolute; display: block; font-size: 0.65rem; color: var(--color-primary); opacity: 0.5; bottom: 0.5rem; right: var(--content-padding); }
/* Mirrors `version` on the opposite edge so the two never collide. Required to
   be reachable from every page by zakon c. 99/2019 Sb. -- see pristupnost.php. */
.footer-link { position: absolute; display: block; font-size: 0.65rem; color: var(--color-primary); opacity: 0.5; bottom: 0.5rem; left: var(--content-padding); text-decoration: none; }
.footer-link:hover, .footer-link:focus-visible { opacity: 1; text-decoration: underline; }

/* ── Landing page ───────────────────────────────────────────────── */
.banner { display: block; width: 750px; max-width: 90%; margin-top: 10%; margin-left: auto; margin-right: auto; }
.landing-buttons { position: fixed; bottom: 8%; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.landing-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.6rem; border-radius: 2rem; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s; cursor: pointer; min-width: 260px; justify-content: center; }
.landing-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.landing-btn-secondary { background-color: var(--color-surface); color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.landing-btn-secondary:hover { background-color: #f0faf8; }
.landing-btn-icon { height: 1.2em; width: auto; }
.landing-btn-secondary .landing-btn-icon { filter: invert(58%) sepia(85%) saturate(953%) hue-rotate(124deg) brightness(79%) contrast(103%); }
.landing-footer { position: fixed; bottom: 1rem; right: 1.5rem; display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--color-primary); opacity: 0.6; }
.landing-footer a { color: inherit; text-decoration: none; }
.landing-footer a:hover, .landing-footer a:focus-visible { text-decoration: underline; }

html.dark .landing-btn-secondary { background-color: var(--color-surface); color: var(--color-primary); }
html.dark .landing-btn-secondary:hover { background-color: var(--color-primary-light); }
html.dark footer { background: rgba(22,33,62,0.85); }
html.dark .detail-info-value { color: var(--color-text); }

/* ── Login log ─────────────────────────────────────────────────── */
.ll-event { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; }
.ll-event-icon { width: 14px; height: 14px; }
.ll-event-login { color: var(--color-success); }
.ll-event-logout { color: var(--color-primary); }
.ll-event-impersonation { color: var(--color-warning); }
/* Start and stop share the warning colour deliberately: in an audit log you scan
   for impersonation ACTIVITY as one group, and the icon plus label separate them. */
.ll-event-impersonation-stop { color: var(--color-warning); }
.ll-admin-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; color: var(--color-warning); opacity: 0.8; margin-left: 0.3rem; }
.ll-badge-icon { width: 12px; height: 12px; }
.ll-browser { font-size: 0.8rem; opacity: 0.7; }

/* ── History ────────────────────────────────────────────────────── */
.detail-section-title { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); margin-top: 1.5rem; margin-bottom: 0.5rem; border-bottom: 2px solid var(--color-primary); padding-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.detail-history-row { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); cursor: pointer; font-size: 0.82rem; transition: background 0.15s; }
.detail-history-row:last-child { border-bottom: none; }
.detail-history-action { font-weight: 600; flex-shrink: 0; color: var(--color-primary); }
.detail-history-action.action-create { color: var(--color-success); }
.detail-history-action.action-delete { color: var(--color-error); }
.detail-history-action.action-invite { color: var(--color-primary); }
.detail-history-subject { flex: 2; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-history-user { opacity: 0.7; flex-shrink: 0; text-align: right; }
.detail-history-behalf { font-style: italic; opacity: 0.6; font-size: 0.75rem; }
.detail-history-time { opacity: 0.5; flex-shrink: 0; font-size: 0.75rem; text-align: right; }
.history-body.history-collapsed { display: none; }
.history-chevron { transition: transform 0.2s; width: 0.8rem; height: 0.8rem; }
.history-chevron-open { transform: rotate(90deg); }
.history-empty { opacity: 0.5; font-style: italic; padding: 0.5rem 0; font-size: 0.85rem; }
.history-diff-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 0.5rem; }
.history-diff-table th { text-align: left; padding: 0.3rem 0.5rem; font-weight: 700; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.history-diff-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--color-border); word-break: break-word; }
.history-diff-table td:first-child { font-weight: 600; color: var(--color-primary); white-space: nowrap; }
.history-diff-old { background-color: rgba(220,53,69,0.08); color: var(--color-error); }
.history-diff-new { background-color: rgba(39,174,96,0.08); color: var(--color-success); }

/* ── Calendar View ─────────────────────────────────────────────── */
.calendar-view { margin-top: 1rem; }
.calendar-view.hidden { display: none !important; }
.calendar-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.calendar-nav .cal-month-label { font-size: 0.9rem; font-weight: 600; min-width: 10rem; text-align: center; }
.calendar-nav button.cal-arrow { background: none; border: 2px solid var(--color-primary); border-radius: 0 0 6px 6px; height: 2.2rem; padding: 0 0.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.calendar-nav button.cal-arrow:hover { background: var(--color-primary-light); }
.calendar-nav button.cal-arrow .icon { width: 16px; height: 16px; }
.cal-view-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.8rem; border: 2px solid var(--color-primary); border-radius: 0 0 6px 6px; background: var(--color-surface); color: var(--color-primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.cal-view-btn:hover { background: var(--color-primary-light); }
.cal-view-btn.active { background: var(--color-primary); color: #fff; }
.cal-view-btn .icon { width: 14px; height: 14px; }
.cal-view-btn.active .icon { color: #fff; }
#btn-calendar-toggle.btn-calendar-active { opacity: 1; color: var(--color-primary); }

.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; }
.calendar-grid .cal-header { background: var(--color-primary); color: #fff; text-align: center; padding: 0.5rem 0.25rem; font-size: 0.85rem; font-weight: 500; }
.calendar-grid .cal-day { background: var(--color-surface); min-height: 5.5rem; padding: 0.35rem; position: relative; vertical-align: top; overflow: hidden; min-width: 0; }
.calendar-grid .cal-day.cal-other-month { opacity: 0.35; }
.calendar-grid .cal-day.cal-today { background: var(--color-primary-mid); }
.cal-day-number { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.25rem; display: flex; justify-content: space-between; align-items: center; }
.cal-day-number-text { cursor: pointer; padding: 0 0.2rem; border-radius: 3px; }
.cal-day-number-text:hover { background: var(--color-primary-light); text-decoration: underline; }
.cal-day { cursor: pointer; }
.cal-day-add { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--color-primary); position: relative; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; cursor: pointer; }
.cal-day-add::before, .cal-day-add::after { content: ''; position: absolute; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 1px; }
.cal-day-add::before { width: 10px; height: 2px; }
.cal-day-add::after { width: 2px; height: 10px; }
.cal-day:hover .cal-day-add { opacity: 0.7; }
.cal-day-add:hover { opacity: 1 !important; }
.cal-row-add { display: block; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--color-primary); position: absolute; top: 0.25rem; right: 0.25rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; cursor: pointer; z-index: 10; }
.cal-row-add::before, .cal-row-add::after { content: ''; position: absolute; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 1px; }
.cal-row-add::before { width: 8px; height: 2px; }
.cal-row-add::after { width: 2px; height: 8px; }
.cal-week-cell:hover .cal-row-add, .cal-day-content:hover .cal-row-add { opacity: 0.7; }
.cal-row-add:hover { opacity: 1 !important; }
/* On touch devices there's no hover, so show the + affordance at low opacity always. */
@media (hover: none) {
    .cal-day-add, .cal-row-add { opacity: 0.45; }
}
.cal-week-cell, .cal-day-content { cursor: pointer; }
.cal-week-cell:hover, .cal-day-content:hover { background: var(--color-primary-light); }
.cal-day-records { display: flex; flex-direction: column; gap: 2px; }
.cal-record { font-size: 0.7rem; padding: 2px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: opacity 0.15s; }
.cal-record:hover { opacity: 0.8; }
.cal-more { font-size: 0.65rem; color: var(--color-primary); cursor: pointer; font-weight: 500; margin-top: 2px; }
.cal-more:hover { text-decoration: underline; }

/* ── Week view ── */
.cal-week-grid { border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; }
.cal-week-header { display: flex; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 600; }
.cal-week-header .cal-week-time-col { width: 3rem; flex-shrink: 0; }
.cal-week-header .cal-week-day-col { flex: 1; text-align: center; padding: 0.4rem 0; }
.cal-week-header .cal-week-day-col.cal-today { background: rgba(255,255,255,0.2); font-weight: 700; }
.cal-week-body { position: relative; height: 40rem; overflow-y: auto; }
.cal-week-row { display: flex; min-height: 2.5rem; border-bottom: 1px solid var(--color-primary-light); }
.cal-week-time-col { width: 3rem; flex-shrink: 0; font-size: 0.7rem; color: var(--color-primary); opacity: 0.6; padding: 0.15rem 0.3rem; text-align: right; }
.cal-week-cell { flex: 1; border-left: 1px solid var(--color-primary-light); position: relative; padding: 0.25rem; }
.cal-week-blocks { position: absolute; top: 0; left: 3rem; right: 0; bottom: 0; pointer-events: none; }
.cal-week-block { position: absolute; color: #fff; font-size: 0.65rem; padding: 1px 4px; border-radius: 3px; overflow: hidden; cursor: pointer; pointer-events: auto; opacity: 0.85; white-space: nowrap; text-overflow: ellipsis; }
.cal-week-block:hover { opacity: 1; z-index: 2; }

/* ── Day view ── */
.cal-day-grid { position: relative; border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; }
.cal-day-row { display: flex; min-height: 3rem; border-bottom: 1px solid var(--color-primary-light); }
.cal-day-time-col { width: 3rem; flex-shrink: 0; font-size: 0.75rem; color: var(--color-primary); opacity: 0.6; padding: 0.2rem 0.3rem; text-align: right; }
.cal-day-content { flex: 1; border-left: 1px solid var(--color-primary-light); position: relative; padding: 0.25rem; }
.cal-day-blocks { position: absolute; top: 0; left: 3rem; right: 0; bottom: 0; pointer-events: none; }
.cal-day-block { position: absolute; color: #fff; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 4px; overflow: hidden; cursor: pointer; pointer-events: auto; opacity: 0.85; line-height: 1.3; }
.cal-day-block:hover { opacity: 1; z-index: 2; }
.cal-day-block strong { font-weight: 700; }
.cal-week-block.cal-block-draggable, .cal-day-block.cal-block-draggable { cursor: grab; touch-action: none; }
.cal-week-block.cal-block-dragging, .cal-day-block.cal-block-dragging { cursor: grabbing; opacity: 0.95; box-shadow: 0 6px 14px rgba(0,0,0,0.25); z-index: 20; transition: none; }
.star-fav { color: #b0b0b0; cursor: pointer; transition: color 0.15s, transform 0.15s; }
.star-fav:hover { color: #f5b942; transform: scale(1.15); }
.star-fav.active { color: #f5b942; fill: currentColor; }
.pill-star { color: #f5b942; fill: currentColor; width: 0.85em; height: 0.85em; margin-right: 0.15rem; vertical-align: -0.08em; }

.cal-record.cal-record-draggable { cursor: grab; touch-action: none; }
.cal-record.cal-record-dragging { cursor: grabbing; opacity: 0.95; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: none; }
.cal-day.cal-day-drop-target { outline: 2px dashed var(--color-primary); outline-offset: -2px; }

/* ── Conflict highlight ────────────────────────────────────────── */
.cal-record-conflict {
    outline: 2px solid var(--color-error);
    outline-offset: -2px;
    box-shadow: 0 0 0 1px #fff inset;
    position: relative;
}
.cal-record-conflict::after {
    content: "\26A0";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: #fff;
    text-shadow: 0 0 2px var(--color-error), 0 0 1px var(--color-error);
    pointer-events: none;
}
.cal-block-conflict {
    outline: 2px solid var(--color-error);
    outline-offset: -2px;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(220, 53, 69, 0.35) 0,
        rgba(220, 53, 69, 0.35) 6px,
        transparent 6px,
        transparent 12px
    );
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
    opacity: 1;
}
.cal-block-conflict::before {
    content: "\26A0";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 0 0 3px var(--color-error), 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
}
html.dark .cal-block-conflict {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 99, 132, 0.4) 0,
        rgba(255, 99, 132, 0.4) 6px,
        transparent 6px,
        transparent 12px
    );
}

/* ── Generic status / success classes ──────────────────────────── */
.svg-success { color: var(--color-success); }
.svg-warning { color: var(--color-warning); }
.cta-button-success { background-color: var(--color-success); }
.cta-button-success:hover { background-color: color-mix(in srgb, var(--color-success), black 15%); transform: translateY(-1px); }
html.colorblind .cta-button-success { background-color: #000; }
html.colorblind .cta-button-success:hover { background-color: #333; }

/* ── Statistics ─────────────────────────────────────────────────── */
.stats-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.stats-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stats-card { background: var(--color-surface); border: 2px solid var(--color-primary); border-radius: 0 0 8px 8px; padding: 1rem; text-align: center; }
.stats-card-value { font-size: 1.4rem; font-weight: 700; color: var(--color-primary); }
.stats-card-label { font-size: 0.8rem; color: var(--color-text); opacity: 0.6; margin-top: 0.2rem; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.stats-section h2 { font-size: 1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.75rem; border-bottom: 2px solid var(--color-primary); padding-bottom: 0.3rem; }
.stats-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
.stats-bar-label { width: 10rem; flex-shrink: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-bar-track { flex: 1; height: 1.2rem; background: var(--color-primary-light); border-radius: 4px; overflow: hidden; }
.stats-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.stats-bar-value { width: 6rem; flex-shrink: 0; font-weight: 600; font-size: 0.8rem; }
.stats-bar-count { opacity: 0.5; font-weight: 400; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stats-table th { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }
.stats-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); }
.heatmap-grid { display: grid; grid-template-columns: 2.5rem repeat(16, 1fr); gap: 2px; font-size: 0.7rem; }
.heatmap-cell { display: flex; align-items: center; justify-content: center; min-height: 1.8rem; border-radius: 3px; }
.heatmap-corner { }
.heatmap-header { font-weight: 600; color: var(--color-primary); opacity: 0.7; font-size: 0.65rem; }
.heatmap-day { font-weight: 600; color: var(--color-primary); font-size: 0.75rem; }
.heatmap-data { cursor: default; font-weight: 500; }
@media screen and (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stats-bar-label { width: 6rem; }
    .heatmap-grid { font-size: 0.55rem; }
    .heatmap-cell { min-height: 1.4rem; }
}

/* ── Maintenance banners ───────────────────────────────────────── */
.cal-day-maintenance { background: repeating-linear-gradient(135deg, rgba(245,158,11,0.08) 0, rgba(245,158,11,0.08) 6px, transparent 6px, transparent 12px); }
.cal-maintenance-banner { font-size: 0.6rem; font-weight: 600; color: var(--color-warning); display: flex; align-items: center; gap: 2px; padding: 1px 3px; border-radius: 3px; background: rgba(245,158,11,0.12); margin-bottom: 2px; }
.cal-maintenance-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; background: rgba(245,158,11,0.12); color: var(--color-warning); font-size: 0.85rem; font-weight: 600; border-bottom: 2px solid var(--color-warning); }
.cal-week-day-maintenance { background: rgba(245,158,11,0.15) !important; }
.cal-cell-maintenance { background: repeating-linear-gradient(135deg, rgba(245,158,11,0.06) 0, rgba(245,158,11,0.06) 6px, transparent 6px, transparent 12px); }
html.dark .cal-day-maintenance { background: repeating-linear-gradient(135deg, rgba(245,158,11,0.12) 0, rgba(245,158,11,0.12) 6px, transparent 6px, transparent 12px); }
html.dark .cal-cell-maintenance { background: repeating-linear-gradient(135deg, rgba(245,158,11,0.1) 0, rgba(245,158,11,0.1) 6px, transparent 6px, transparent 12px); }
.maint-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; flex-wrap: wrap; }
.maint-dates { font-weight: 600; color: var(--color-warning); }
.maint-reason { opacity: 0.7; font-size: 0.8rem; }
.maint-add-form { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }

.cal-day-modal { position: fixed; z-index: 1500; top: calc(var(--nav-height) + 2rem); left: 50%; transform: translateX(-50%); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; box-shadow: var(--shadow-lg); width: 24rem; max-width: 90vw; max-height: 60vh; overflow-y: auto; }
.cal-day-modal h3 { font-size: 1rem; font-weight: 700; color: var(--color-primary); }
.cal-day-list { display: flex; flex-direction: column; gap: 4px; margin-top: 0.75rem; }
.cal-day-item { font-size: 0.85rem; padding: 0.4rem 0.5rem; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.cal-day-item:hover { background: var(--color-primary-light); }

/* ── Mobile ─────────────────────────────────────────────────────── */

/* Hamburger toggle */
.nav-hamburger { display: none; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; cursor: pointer; z-index: 25; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-hamburger span { display: block; width: 1.4rem; height: 2px; background: white; border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(2.5px, 2.5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(2.5px, -2.5px); }

@media screen and (max-width: 768px) {
    :root { --content-padding: 1rem; --nav-height: 3.5rem; }

    /* Nav: hamburger + dropdown */
    .nav-hamburger { display: flex; }
    .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--color-primary); flex-direction: column; padding: 0.5rem 1rem 1rem; gap: 0.5rem; transform: translateY(-120%); transition: transform 0.2s; z-index: 20; box-shadow: var(--shadow-md); }
    .nav-links.open { transform: translateY(0); }
    .nav-link { font-size: 1rem; opacity: 1; padding: 0.5rem 0; }
    .nav-user { right: 1rem; font-size: 0.8rem; gap: 0.3rem; }
    .nav-role { font-size: 0.6rem; padding: 0.1rem 0.4rem; }
    .impersonate-stop { font-size: 0.6rem; padding: 0.1rem 0.4rem; }
    .nav-impersonate-icon { display: none; }
    .nav-user .nav-link-icon { display: none; }
    .logo { left: 3.5rem; padding-left: 0; }
    .logo-nav { height: calc(var(--nav-height) - 1.5rem); }

    /* Main content */
    main { left: 0; width: 100%; padding: 0.75rem; padding-bottom: 7rem; }
    h1 { font-size: 1.2rem; }

    /* Pills: smaller, wrap */
    .filter-pill { font-size: 0.75rem; padding: 0 0.6rem; height: 1.8rem; }
    .pill-icon { width: 12px; height: 12px; }
    .time-pill-month { font-size: 0.7rem; padding: 0 0.5rem; }
    #time-pills-bar { margin-top: 0.4rem; }

    /* Table: card layout */
    .list-table { table-layout: auto; min-width: 0 !important; border-collapse: separate; border-spacing: 0 0.5rem; }
    .list-table colgroup { display: none; }
    .list-table thead tr { display: none; }
    .list-table thead tr:first-child { display: flex; justify-content: flex-end; padding: 0.5rem 0; }
    .list-table thead tr:first-child th { display: none; }
    .list-table thead tr:first-child th.th-actions { display: flex; gap: 0.5rem; border: none; padding: 0; }
    .list-table tbody tr { display: block; background: var(--color-surface); border: 1px solid rgba(0,177,153,0.15); border-radius: var(--border-radius); padding: 0.75rem; box-shadow: var(--shadow-sm); }
    .list-table tbody td { display: flex; align-items: baseline; padding: 0.2rem 0; border-bottom: none; gap: 0.5rem; font-size: 0.85rem; }
    .list-table tbody td::before { content: attr(data-label); font-size: 0.75rem; font-weight: 600; color: var(--color-primary); opacity: 0.7; min-width: 5.5rem; flex-shrink: 0; }
    .list-table tbody td[data-label=""]::before { display: none; }
    .list-table tbody td[data-label=""] { display: none; }
    .list-table tbody td:empty { display: none; }
    /* Actions cell: bottom of card */
    .list-table tbody td.td-actions { border-top: 1px solid rgba(0,177,153,0.1); margin-top: 0.3rem; padding-top: 0.5rem; justify-content: flex-end; }
    .list-table tbody td.td-actions::before { display: none; }
    .row-action-icon { width: 1.3rem; height: 1.3rem; margin-left: 0.5rem; }

    /* Detail panel: full width */
    #detail-panel { left: 1%; width: 98%; top: calc(var(--nav-height) + 1rem); }
    .detail-info-grid { grid-template-columns: 1fr; }
    .detail-header { padding: 0.75rem 1rem; }
    .detail-title { font-size: 1.15rem; }

    /* Form modal: full width */
    .mini-modal { padding-top: calc(var(--nav-height) + 1rem); }
    .mini-modal-container { width: 95vw !important; max-width: 95vw; }
    .form-row-pair { flex-direction: column; gap: 0; }
    .form-actions { flex-wrap: wrap; }

    /* Calendar nav: reorder into two rows via order + forced break */
    .calendar-nav { gap: 0.4rem 0.4rem; }
    .calendar-nav .cal-view-btn { order: 1; padding: 0.25rem 0.4rem; font-size: 0.65rem; }
    .calendar-nav .cal-item-quick { order: 1; }
    .calendar-nav .cal-item-date { order: 2; }
    .calendar-nav .cal-item-date.cal-month-label { min-width: auto; font-size: 0.8rem; }
    .calendar-nav .cal-item-date.cal-arrow { height: 1.8rem; padding: 0 0.4rem; }
    .calendar-nav .cal-item-date.cal-arrow .icon { width: 14px; height: 14px; }
    /* Force date row onto new line */
    .calendar-nav::after { content: ''; order: 1; flex-basis: 100%; height: 0; }
    .calendar-grid .cal-day { min-height: 3.5rem; padding: 0.2rem; }
    .cal-record { font-size: 0.6rem; }
    .cal-day-number { font-size: 0.7rem; }
    .cal-week-body { height: 30rem; }

    /* Impersonate modal */
    .impersonate-modal { right: 1rem; width: calc(100vw - 2rem); }

    /* Combo items: touch-friendly */
    .combo-item { padding: 0.6rem 0.5rem; min-height: 2.5rem; }

    /* FAB */
    cta { width: 4rem; height: 4rem; left: calc(50% - 2rem); }
    .fab-icon { width: 2.5rem; height: 2.5rem; }

    /* Footer */
    footer { height: 2.5rem; }
    version { font-size: 0.55rem; }

    /* Landing */
    .banner { max-width: 80vw; margin-top: 5%; }

    /* Dark mode card bg */
    html.dark .list-table tbody tr { background: var(--color-surface); border-color: var(--color-border); }

    /* Hover states: disable on touch */
    .clickable:hover { transform: none; }
    cta:hover { transform: none; }
}

/* ── Colorblind mode overrides ─────────────────────────────────── */
html.colorblind nav { background-color: #000; }
html.colorblind .filter-pill { border-color: #000; color: #000; background: #fff; }
html.colorblind .filter-pill.active { background: #000; color: #fff; }
html.colorblind .filter-pill:not(.active):hover { background: rgba(0,0,0,0.08); }
html.colorblind .cal-view-btn { border-color: #000; color: #000; background: #fff; }
html.colorblind .cal-view-btn:hover { background: rgba(0,0,0,0.08); }
html.colorblind .cal-view-btn.active { background: #000; color: #fff; }
html.colorblind .calendar-nav button.cal-arrow { border-color: #000; }
html.colorblind .calendar-nav button.cal-arrow:hover { background: rgba(0,0,0,0.08); }
html.colorblind .calendar-grid .cal-header { background: #000; color: #fff; }
html.colorblind .cal-week-header { background: #000; color: #fff; }
html.colorblind .calendar-grid .cal-day.cal-today { background: rgba(0,0,0,0.06); }
html.colorblind .acl-pill-person { background: rgba(0,0,0,0.1); color: #000; }
html.colorblind .acl-pill-group { background: rgba(0,0,0,0.18); color: #000; }
html.colorblind .acl-pill-public { background: #fff; color: #000; border: 1px solid #000; }
html.colorblind .acl-pill-private { background: #000; color: #fff; }
html.colorblind .acl-pill-equip { background: rgba(0,0,0,0.08); color: #000; border: 1px solid #000; }
html.colorblind .invite-pill { background: #000; color: #fff; }
html.colorblind .series-badge { background: rgba(0,0,0,0.1); color: #000; }
html.colorblind mark { background-color: rgba(0,0,0,0.15); box-shadow: 0 0 0 0.15em rgba(0,0,0,0.15); }
html.colorblind .history-diff-old { background-color: rgba(0,0,0,0.08); color: #000; text-decoration: line-through; }
html.colorblind .history-diff-new { background-color: rgba(0,0,0,0.15); color: #000; font-weight: 700; }
html.colorblind .detail-history-action.action-create { color: #000; font-style: italic; }
html.colorblind .detail-history-action.action-delete { color: #000; text-decoration: line-through; }
html.colorblind .ll-event-login { color: #000; }
html.colorblind .ll-event-logout { color: #000; }
html.colorblind .ll-event-impersonation { color: #000; font-weight: 700; }
html.colorblind .ll-event-impersonation-stop { color: #000; font-weight: 700; }
html.colorblind .ll-admin-badge { color: #000; }
html.colorblind .cta-button { background-color: #000; color: #fff; }
html.colorblind .cta-button:hover { background-color: #333; }
html.colorblind .cta-button-secondary { background-color: #fff; color: #000; border-color: #000; }
html.colorblind .cta-button-secondary:hover { background-color: rgba(0,0,0,0.06); }
html.colorblind .cta-button-danger { background-color: #000; color: #fff; }
html.colorblind .cta-button-danger:hover { background-color: #333; }
html.colorblind cta { background: #000; }
html.colorblind footer { background: rgba(255,255,255,0.95); }
html.colorblind .form-row-checkbox input[type="checkbox"]:checked { background: #000; border-color: #000; }
html.colorblind .landing-btn-secondary { border-color: #000; color: #000; }
html.colorblind .landing-btn-secondary:hover { background-color: rgba(0,0,0,0.04); }
html.colorblind .landing-btn-secondary .landing-btn-icon { filter: brightness(0); }
html.colorblind input.combo-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html.colorblind ::selection { background-color: #000; color: #fff; }

/* Colorblind: override inline room colors via CSS */
html.colorblind .room-color-dot,
html.colorblind .room-color-square { background: #000 !important; }
html.colorblind .cal-record { background: #000 !important; color: #fff !important; border: 1px solid #000; }
html.colorblind .cal-week-block { background: #000 !important; color: #fff !important; border: 1px solid #000; }
html.colorblind .cal-day-block { background: #000 !important; color: #fff !important; border: 1px solid #000; }
html.colorblind .cal-day-item { color: #000; }

/* Colorblind: conflict uses pattern differentiation, not color */
html.colorblind .cal-record-conflict { outline-color: #000; }
html.colorblind .cal-record-conflict::after { color: #000; text-shadow: none; font-weight: 700; }
html.colorblind .cal-block-conflict {
    outline-color: #000;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.5) 0,
        rgba(0,0,0,0.5) 4px,
        transparent 4px,
        transparent 8px
    ) !important;
}
html.colorblind .cal-block-conflict::before { text-shadow: none; color: #fff; font-weight: 700; }
html.colorblind .row-conflict-icon { color: #000; }
html.colorblind .cal-day-maintenance { background: repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0, rgba(0,0,0,0.06) 6px, transparent 6px, transparent 12px); }
html.colorblind .cal-maintenance-banner { color: #000; background: rgba(0,0,0,0.1); }
html.colorblind .cal-maintenance-bar { color: #000; background: rgba(0,0,0,0.08); border-color: #000; }
html.colorblind .cal-week-day-maintenance { background: rgba(0,0,0,0.08) !important; }
html.colorblind .cal-cell-maintenance { background: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 6px, transparent 6px, transparent 12px); }
html.colorblind .maint-dates { color: #000; }

/* Colorblind: theme toggle icon */
html.colorblind .dark-toggle-svg { color: white; }

/* ── Narrow toolbar: reflow (KITT6/sablona#73, from KITT6/gremium#101) ──
   .logo is position:absolute, so it never pushes the toolbar aside: .nav-user
   grows leftwards over the wordmark, and at 320 px an impersonating session's
   toolbar reached x 30, over the hamburger (WCAG 1.4.10). Measured with the
   template's wordmark, as a user, an admin and an admin impersonating, with a
   17- and a 36-character name: the widest case (impersonating, the name at its
   9rem cap) first overlaps at 540 px, so the toolbar gives up its words below
   600 -- not 480, where gremium cut, which left 481-560 overlapping here. The
   name is still read by a screen reader; the impersonation stop keeps its
   icon. A child's wordmark is wider or narrower than this one: re-measure. */
@media screen and (max-width: 600px) {
    .nav-user-name, .impersonate-stop-label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    /* The stop's only glyph once its words are gone. Explicit, because the 768 px
       rule `.nav-impersonate-icon { display: none }` is meant for the admin's
       toggle; it loses to `svg.icon` on specificity today, and a tidy-up that
       "fixes" that must not leave the way back an empty button. */
    .impersonate-stop .nav-impersonate-icon { display: inline-block; }
}

@media screen and (max-width: 480px) {
    .filter-pill { font-size: 0.7rem; padding: 0 0.5rem; height: 1.6rem; }
    .cal-view-btn { padding: 0.25rem 0.4rem; font-size: 0.65rem; }
    .calendar-grid .cal-header { font-size: 0.7rem; padding: 0.3rem 0.15rem; }
    .calendar-grid .cal-day { min-height: 2.5rem; }
    .cal-record { font-size: 0.55rem; }
    /* The theme switch is NOT hidden here, and must not be: the dark and
       high-contrast themes are the conforming alternative /pristupnost offers
       for the light theme's 2.57:1 brand teal, and a phone had no way to reach
       them. The wordmark shrinks instead. */
    .logo-nav { height: calc(var(--nav-height) - 2rem); }
}
@media screen and (max-width: 360px) {
    .logo-nav { height: 1.25rem; }
}

/* ── Print: calendar ───────────────────────────────────────────── */
@media print {
    /* Hide everything except the calendar */
    nav, footer, cta, #backdrop, #progress, #toast,
    #fulltext-bar, #pills-bar, #status-pills-bar, #time-pills-bar,
    #list-container, .page-header, #detail-panel,
    .mini-modal, .calendar-nav,
    .cal-day-add, .cal-row-add { display: none !important; }

    body { background: #fff !important; margin: 0; padding: 0; }
    main { padding: 0 !important; margin: 0 !important; }
    .content-area { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .calendar-view { display: block !important; }
    .calendar-view.hidden { display: block !important; }

    /* Print title — injected via ::before on the calendar container */
    .calendar-view::before {
        content: attr(data-print-title);
        display: block;
        font-size: 14pt;
        font-weight: 700;
        text-align: center;
        margin-bottom: 8pt;
        color: #000;
    }

    /* Force colors to print */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

    /* Month grid: compact for A4 landscape */
    .calendar-grid { border-color: #ccc; gap: 0; }
    .calendar-grid .cal-header { font-size: 8pt; padding: 3pt 2pt; background: #00b199 !important; color: #fff !important; }
    .calendar-grid .cal-day { min-height: 3.5rem; padding: 2pt; border: 0.5pt solid #ddd; }
    .cal-day-number { font-size: 7pt; }
    .cal-record { font-size: 6pt; padding: 1pt 2pt; margin-bottom: 1pt; border-radius: 2pt; }
    .cal-day-records { gap: 1pt; }
    .cal-more { font-size: 6pt; }
    .cal-other-month { opacity: 0.3 !important; }

    /* Week grid: compact for A4 portrait */
    .cal-week-grid { border-color: #ccc; }
    .cal-week-header { font-size: 7pt; }
    .cal-week-header .cal-week-day-col { padding: 2pt; }
    .cal-week-header .cal-week-time-col { font-size: 7pt; }
    .cal-week-body { height: auto !important; }
    .cal-week-row { min-height: 1.2rem; }
    .cal-week-row .cal-week-time-col { font-size: 6pt; padding: 1pt 2pt; }
    .cal-week-cell { border-color: #eee; }
    .cal-week-block { font-size: 6pt; padding: 1pt 2pt; border-radius: 2pt; }

    /* Day grid: compact for A4 portrait */
    .cal-day-grid { border-color: #ccc; }
    .cal-day-row { min-height: 1.5rem; border-color: #eee; }
    .cal-day-row .cal-day-time-col { font-size: 7pt; padding: 1pt 3pt; }
    .cal-day-block { font-size: 7pt; padding: 2pt 3pt; border-radius: 2pt; }

    /* Maintenance banners: subtle in print */
    .cal-maintenance-banner { font-size: 6pt; }
    .cal-maintenance-bar { font-size: 7pt; }
}

@page { margin: 10mm; }


/* ── Members + Committees (Milestone 2) ────────────────────────── */
/* All structural conventions (.filter-pill, .pills-group, .filter-row,
 * .list-table, .row-action-icon, .td-actions, .th-actions, #detail-panel,
 * .detail-header, .acl-pills, .acl-pill, .mini-modal, .form-actions,
 * .cta-button*) are inherited from the rezervace toolset higher up in
 * this file. Only member/committee-specific extras live below.
 */

.member-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; display: block; }
.member-thumb-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-mid, #e6f7f4); color: var(--color-primary); }
.member-thumb-placeholder .icon { width: 18px; height: 18px; }

.member-photo-row { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.member-photo-row .member-photo { max-width: 160px; }
.member-photo-img { width: 100%; height: auto; border-radius: 10px; display: block; }
.member-photo-placeholder { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 10px; background: var(--color-primary-mid, #e6f7f4); color: var(--color-primary); }
.member-photo-placeholder .icon { width: 64px; height: 64px; }

/* Komise column in the members list: pill widths vary (KV vs KPSKKC4Q), so
 * default flex-wrap leaves the second row's pills misaligned with the first.
 * Override to a uniform-column grid only inside the list cell; detail panels
 * keep the standard flex-wrap pattern. */
.members-table td .acl-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 0.3rem; }
.members-table td .acl-pill { justify-content: center; min-width: 0; }

/* Edit-form section dividers and the Strapi-dirty indicator. */
.form-section-title { font-size: 0.95rem; font-weight: 600; color: var(--color-primary); margin: 1.2rem 0 0.6rem 0; padding-bottom: 0.3rem; border-bottom: 1px solid var(--color-border); }
.form-section-title:first-child { margin-top: 0; }
.dirty-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #dc2626; margin-right: 0.4rem; vertical-align: middle; }
.dirty-dot[title] { cursor: help; }
.synced-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-success); margin-right: 0.4rem; vertical-align: middle; }
.synced-dot[title] { cursor: help; }

/* ── Dashboard (#13) ───────────────────────────────────────────── */
.dash-welcome { margin: 0 0 1rem; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; align-items: start; }
.dash-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.6rem; padding: 1rem 1.1rem; box-shadow: var(--shadow-lg, 0 1px 3px rgba(0,0,0,0.08)); }
.dash-card-wide { grid-column: 1 / -1; }
.dash-card h2 { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); }
.dash-stat { font-size: 2rem; font-weight: 700; line-height: 1.15; }
.dash-sub { display: block; margin-top: 0.2rem; opacity: 0.7; font-size: 0.85rem; }
.dash-pills { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dash-empty { opacity: 0.6; font-size: 0.9rem; margin: 0; }
.dash-ok { color: var(--color-success); font-size: 0.9rem; margin: 0; }
.dash-bars { display: flex; flex-direction: column; gap: 0.45rem; }
.dash-bar-row { display: grid; grid-template-columns: 9rem 1fr 2.2rem; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.dash-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bar-track { background: var(--color-border); border-radius: 0.3rem; height: 0.7rem; overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; background: var(--color-primary); border-radius: 0.3rem; }
.dash-bar-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-card-warn { border-color: #dc2626; }
.dash-warn-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.dash-warn-reason { color: #dc2626; font-size: 0.8rem; }
.dash-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; }
.dash-activity li { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; border-bottom: 1px solid var(--color-border); padding-bottom: 0.35rem; }
.dash-activity li:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-act-obj { font-weight: 600; }
.dash-act-name { font-weight: 600; }
a.dash-act-name { color: var(--color-primary); text-decoration: none; }
a.dash-act-name:hover { text-decoration: underline; }
.dash-act-action { opacity: 0.8; }
.dash-act-meta { margin-left: auto; opacity: 0.65; font-size: 0.8rem; }

/* /terms management page */
.form-hint { font-size: 0.8rem; color: var(--color-text); opacity: 0.6; margin: 0.8rem 0 0 0; line-height: 1.4; }

/* Committee membership editor (#12) */
.members-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.members-editor-stack { display: flex; flex-direction: column; }
.me-add-wrap { margin-bottom: 1rem; }
.members-editor-stack .me-col-title:not(:first-child) { margin-top: 0.2rem; }
.me-col-title { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-primary); }
.me-current { display: flex; flex-wrap: wrap; gap: 0.3rem; align-content: flex-start; min-height: 3rem; max-height: 22rem; overflow-y: auto; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; }
.me-pill .me-x { cursor: pointer; font-weight: 700; margin-left: 0.2rem; opacity: 0.65; }
.me-pill .me-x:hover { opacity: 1; }
.me-available { max-height: 20rem; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 6px; margin-top: 0.4rem; }
.me-avail-item { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; cursor: pointer; border-bottom: 1px solid var(--color-border); }
.me-avail-item:last-child { border-bottom: none; }
.me-avail-item:hover { background: var(--color-primary-mid); }
.me-avail-party { font-size: 0.75rem; opacity: 0.6; white-space: nowrap; }
@media (max-width: 640px) { .members-editor { grid-template-columns: 1fr; } }

/* Global term switcher (#15) */
.term-switcher { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.term-switcher:empty { display: none; }
.term-switcher-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.term-pill .term-pill-cur { color: inherit; opacity: 0.7; }

/* ── Committee meeting list (termíny zasedání, #31) ───────────────── */
.meeting-list { display: flex; flex-direction: column; gap: 0.2rem; max-height: 16rem; overflow-y: auto; padding-right: 0.25rem; }
.meeting-count { font-size: 0.78rem; opacity: 0.6; margin-bottom: 0.2rem; }
.meeting-row { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.9rem; }
.meeting-date { font-weight: 600; min-width: 6rem; }
.meeting-time { min-width: 3rem; opacity: 0.75; }
.meeting-extra { opacity: 0.7; }
.meeting-empty { font-size: 0.9rem; opacity: 0.6; }

/* ── Committee membership timeline (join/leave history, #28) ───────── */
.mhist-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 16rem; overflow-y: auto; padding-right: 0.25rem; }
.mhist-row { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.9rem; flex-wrap: wrap; }
.mhist-date { min-width: 8.5rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.mhist-badge { font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.5rem; border-radius: 999px; color: #fff; white-space: nowrap; }
.mhist-add { background: var(--color-success); }
.mhist-remove { background: #dc2626; }
.mhist-target { font-weight: 500; }
.mhist-actor { opacity: 0.55; font-size: 0.82rem; }
.mhist-empty { font-size: 0.9rem; opacity: 0.6; }

/* Member personal number column (#34). */
.member-pers-num { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* ── Meetings list / calendar filters (#31) ───────────────────────── */
.filter-select { padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-surface); color: var(--color-text); font-size: 0.85rem; max-width: 18rem; }
/* Committee filter is a searchable combo — give it room for long committee names. */
#pills-bar .combo-wrap { width: min(34rem, 100%); }
.muted-inline { opacity: 0.6; font-size: 0.85em; }

/* ── Attendance (docházka) editor + badge (#32) ───────────────────── */
.att-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary); margin-left: 0.4rem; vertical-align: middle; }
/* Colour-coded summary: a chip per status (present / excused / absent). */
.att-badge-coded { background: transparent; padding: 0; }
.att-seg { display: inline-block; min-width: 1.1em; text-align: center; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; margin-left: 0.25rem; vertical-align: middle; }
.att-seg-present { background: var(--color-success); }
.att-seg-excused { background: #d97706; }
.att-seg-absent { background: #dc2626; }
.meeting-att-action { margin-left: 0.5rem; cursor: pointer; }
/* Meetings list: 6 row-action icons (dot + 5 svgs) need a guaranteed minimum
 * so the sync ✓ never wraps onto a second line on narrower viewports. */
.meetings-table td.td-actions, .meetings-table th.th-actions { min-width: 9.5rem; white-space: nowrap; }
.att-quick { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.att-quick-btn { font-size: 0.8rem; padding: 0.3rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.att-quick-btn:hover { background: var(--color-primary-light); }
.att-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 26rem; overflow-y: auto; }
.att-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0.1rem; border-bottom: 1px solid var(--color-border); }
.att-name { font-size: 0.92rem; }
.att-pills { display: flex; gap: 0.3rem; flex-shrink: 0; }
.att-pill { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--color-border); cursor: pointer; color: var(--color-text); opacity: 0.65; white-space: nowrap; user-select: none; }
.att-pill:hover { opacity: 1; }
.att-pill.active { opacity: 1; color: #fff; border-color: transparent; }
.att-pill-present.active { background: var(--color-success); }
.att-pill-excused.active { background: #d97706; }
.att-pill-absent.active { background: #dc2626; }

/* ── Bulk selection + floating action toolbar (#38) ─────────────── */
.th-bulk,
.td-bulk { width: 2.5rem; text-align: center; vertical-align: top !important; padding-top: 0.55rem !important; }
.bulk-cb { -webkit-appearance: none; appearance: none; width: 1.1rem; height: 1.1rem; border: 2px solid var(--color-primary); border-radius: 3px; background: var(--color-surface); cursor: pointer; position: relative; flex-shrink: 0; vertical-align: middle; margin: 0; }
.bulk-cb:checked::after { content: ''; position: absolute; left: 50%; top: 45%; width: 3px; height: 7px; border: solid var(--color-primary); border-width: 0 2px 2px 0; transform: translate(-50%, -55%) rotate(45deg); }
.bulk-cb:indeterminate::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; background: var(--color-primary); transform: translate(-50%, -50%); border-radius: 1px; }
.bulk-toolbar { position: fixed; bottom: 4rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-primary-light); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 0.4rem 0.6rem; z-index: 40; max-width: calc(100vw - 2rem); flex-wrap: wrap; }
.bulk-toolbar.hidden { display: none; }
.bulk-count { font-size: 0.9rem; font-weight: 600; color: var(--color-primary); padding: 0 0.4rem; }
.bulk-toolbar-sep { width: 1px; height: 1.4rem; background: var(--color-primary-light); }
.bulk-actions { display: flex; align-items: center; gap: 0.3rem; }
.bulk-action-btn,
.bulk-clear-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: none; padding: 0.4rem 0.7rem; border-radius: 5px; font-size: 0.9rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: background 0.15s, color 0.15s; }
.bulk-action-btn:hover { background: var(--color-primary-light); }
.bulk-action-btn.bulk-action-destructive { color: var(--color-error); }
.bulk-action-btn.bulk-action-destructive:hover { background: rgba(220,53,69,0.1); }
.bulk-clear-btn { opacity: 0.7; }
.bulk-clear-btn:hover { opacity: 1; background: var(--color-primary-light); }

/* ── Member declarations (#30) ─────────────────────────────────────── */
.decl-section { margin-top: 1.25rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.decl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.decl-section-head > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-primary); margin: 0; }
.decl-mini-btn { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.decl-empty { font-size: 0.85rem; color: var(--color-text); opacity: 0.7; }

.decl-list { display: flex; flex-direction: column; gap: 0.6rem; }
.decl-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.6rem 0.75rem; background: var(--color-surface); cursor: pointer; }
.decl-card-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.decl-year { font-weight: 700; font-size: 1rem; color: var(--color-primary); }
.decl-status-draft { background: rgba(100,116,139,0.18); color: #475569; }
.decl-status-submitted { background: rgba(243,156,18,0.18); color: #b45309; }
.decl-status-published { background: rgba(34,197,94,0.18); color: #15803d; }
html.dark .decl-status-draft { background: rgba(148,163,184,0.25); color: #cbd5e1; }
html.dark .decl-status-submitted { background: rgba(243,156,18,0.28); color: #fcd34d; }
html.dark .decl-status-published { background: rgba(34,197,94,0.25); color: #86efac; }
.decl-signed { font-size: 0.78rem; color: var(--color-text); opacity: 0.75; }
.decl-card-actions { margin-left: auto; display: inline-flex; gap: 0.35rem; }
.decl-files { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-top: 0.5rem; }
.decl-file { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; }
.decl-file .icon { width: 14px; height: 14px; }
.decl-pub { font-size: 0.68rem; }

/* Read-only declaration detail — rendered in #edit-form with the template's
   save/cancel footer hidden; the body carries its own .form-actions
   (detail-panel convention: Upravit secondary, Smazat danger). */
#edit-form.modal-detail-mode #form-save,
#edit-form.modal-detail-mode #form-cancel { display: none; }
.decl-detail-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.25rem 0 0.75rem; }
.decl-detail-table th { text-align: left; padding: 0.3rem 0.5rem; font-weight: 600; font-size: 0.75rem; color: var(--color-primary); border-bottom: 1px solid var(--color-border); }
.decl-detail-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--color-border); }
.decl-detail-q { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.decl-detail-q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.decl-ans { font-weight: 700; font-size: 0.8rem; flex: 0 0 auto; }
.decl-ans-ano { color: var(--color-error); }
.decl-ans-ne { color: var(--color-success); }
/* Array snapshot fields (functions/relations/income) diff as one line per item. */
.history-diff-table td:not(:first-child) { white-space: pre-line; }

/* Editor (inside #edit-form) */
.decl-form .form-section-title { margin-top: 1.1rem; }
.decl-rows { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.decl-row { display: flex; gap: 0.5rem; align-items: center; }
.decl-func-period { flex: 1; }
.decl-func-role { flex: 2; }
.decl-income-year { flex: 0 0 7rem; }
.decl-income-amount { flex: 1; }
.decl-row-del { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border: none; background: transparent; color: var(--color-error); font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 4px; }
.decl-row-del:hover { background: rgba(220,53,69,0.1); }

.decl-q { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; }
.decl-q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.decl-q-label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.decl-q-ans { flex: 0 0 auto; }
.decl-lines { display: flex; flex-direction: column; gap: 0.5rem; }
.decl-line { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.decl-line-col { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 8rem; min-width: 6rem; margin: 0; }
.decl-line-col > span { font-size: 0.72rem; font-weight: 600; color: var(--color-primary); }
.decl-line-col .form-input { font-size: 0.85rem; }
.decl-line-del { align-self: center; }

.decl-file-mgr { display: flex; flex-direction: column; gap: 0.6rem; }
.decl-file-list { display: flex; flex-direction: column; gap: 0.35rem; }
.decl-file-row { display: flex; align-items: center; gap: 0.6rem; }
.decl-file-row .decl-file { flex: 1; min-width: 0; }
.decl-file-meta { font-size: 0.75rem; opacity: 0.7; white-space: nowrap; }
.decl-upload { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; border-top: 1px dashed var(--color-border); padding-top: 0.6rem; }
.decl-upload-file { flex: 1 1 14rem; }
.decl-upload-kind { flex: 0 0 12rem; }
.decl-upload-pub { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 640px) {
    .decl-q-head { flex-direction: column; gap: 0.4rem; }
    .decl-income-year { flex: 0 0 5rem; }
}

/* ── Declaration AI import (#30) ───────────────────────────────────── */
.decl-file-wrap { display: inline-flex; align-items: center; gap: 0.3rem; }
.decl-ai-btn { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.05rem 0.35rem; border: 1px solid var(--color-primary); color: var(--color-primary); background: var(--color-surface); border-radius: 0.7rem; cursor: pointer; line-height: 1.4; }
.decl-ai-btn:hover { background: var(--color-primary-light); }
.decl-import-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.decl-import-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; }
.decl-import-row:hover { background: var(--color-primary-light); }
.decl-import-cb { flex: 0 0 auto; }
.decl-import-year { font-weight: 700; color: var(--color-primary); flex: 0 0 3rem; }
.decl-import-sum { font-size: 0.82rem; color: var(--color-text); opacity: 0.85; flex: 1; min-width: 0; }
.decl-import-conflict { flex: 0 0 auto; font-size: 0.68rem; }

/* Declaration section header actions (Import / New) */
.decl-head-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }