/* hub@hxs Telegram Mini App
   Theme-aware design system. Light by default; adapts to Telegram dark
   scheme via :root[data-theme="dark"] (set from JS) and to the OS via
   prefers-color-scheme when opened outside Telegram. */

:root {
    color-scheme: light dark;

    --bg: #eef2f8;
    --bg-accent: #e6ecf6;
    --panel: #ffffff;
    --panel-2: #f6f9ff;
    --line: #e2e8f3;
    --line-strong: #cdd8ea;
    --text: #131a2a;
    --muted: #6a778c;
    --faint: #96a2b6;
    --surface: #f4f7fd;
    --text-soft: #3d4a61;

    /* Kept in sync with the real visible area (excludes the on-screen
       keyboard) by initKeyboardViewportHandling() in the JS. Modals use
       these instead of raw vh units so they never end up partly hidden
       behind the keyboard. */
    --vv-height: 100vh;
    --vv-offset-top: 0px;

    --brand: #2f6bff;
    --brand-dark: #1f4fd8;
    --brand-soft: #e9f0ff;
    --brand-line: #bfd3ff;
    --on-brand: #ffffff;

    --ok: #0f9f6e;
    --ok-soft: #e7faf1;
    --ok-line: #a7ebcd;
    --danger: #e0342b;
    --danger-soft: #fdeeed;
    --danger-line: #f6c9c5;
    --warning: #b45309;
    --warning-soft: #fff5e9;
    --warning-line: #fcd9ac;

    --radius: 18px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --shadow: 0 10px 30px rgba(19, 26, 42, 0.07);
    --shadow-soft: 0 4px 14px rgba(19, 26, 42, 0.05);
    --shadow-brand: 0 12px 26px rgba(47, 107, 255, 0.28);

    --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    --bg: #0e131c;
    --bg-accent: #121926;
    --panel: #182130;
    --panel-2: #1d283a;
    --line: #2a3547;
    --line-strong: #34445c;
    --text: #eef2fa;
    --muted: #93a1b8;
    --faint: #6c7c96;
    --surface: #141d2b;
    --text-soft: #c3cddf;

    --brand: #5b8dff;
    --brand-dark: #7aa5ff;
    --brand-soft: rgba(91, 141, 255, 0.16);
    --brand-line: rgba(91, 141, 255, 0.34);
    --on-brand: #0b1220;

    --ok: #34d399;
    --ok-soft: rgba(52, 211, 153, 0.14);
    --ok-line: rgba(52, 211, 153, 0.35);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --danger-line: rgba(248, 113, 113, 0.35);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.14);
    --warning-line: rgba(251, 191, 36, 0.32);

    --shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.32);
    --shadow-brand: 0 12px 26px rgba(47, 107, 255, 0.38);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0e131c;
        --bg-accent: #121926;
        --panel: #182130;
        --panel-2: #1d283a;
        --line: #2a3547;
        --line-strong: #34445c;
        --text: #eef2fa;
        --muted: #93a1b8;
        --faint: #6c7c96;
        --surface: #141d2b;
        --text-soft: #c3cddf;
        --brand: #5b8dff;
        --brand-dark: #7aa5ff;
        --brand-soft: rgba(91, 141, 255, 0.16);
        --brand-line: rgba(91, 141, 255, 0.34);
        --on-brand: #0b1220;
        --ok: #34d399;
        --ok-soft: rgba(52, 211, 153, 0.14);
        --ok-line: rgba(52, 211, 153, 0.35);
        --danger: #f87171;
        --danger-soft: rgba(248, 113, 113, 0.14);
        --danger-line: rgba(248, 113, 113, 0.35);
        --warning: #fbbf24;
        --warning-soft: rgba(251, 191, 36, 0.14);
        --warning-line: rgba(251, 191, 36, 0.32);
        --shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
        --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.32);
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(120% 60% at 100% 0%, var(--bg-accent) 0%, var(--bg) 46%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    overflow-x: hidden;
}

html {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

body {
    height: auto;
    overflow-y: visible;
    overscroll-behavior-y: auto;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    touch-action: pan-y;
}

body.modal-open {
    height: 100%;
    overflow: hidden;
    touch-action: none;
}

button, input, select, textarea {
    font: inherit;
}

::selection {
    background: var(--brand-soft);
}

/* ---------- Layout shell ---------- */

.mini-shell {
    max-width: 720px;
    min-height: 100%;
    margin: 0 auto;
    padding: 8px 16px 40px;
    animation: shell-in 0.35s ease both;
    touch-action: pan-y;
}

@keyframes shell-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 12px;
    background:
        linear-gradient(180deg, var(--bg) 72%, rgba(0, 0, 0, 0));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.topbar-copy h1,
.hero-copy h1,
.panel-head h2 {
    margin: 0;
}

.topbar-copy h1,
.hero-copy h1 {
    font-size: 25px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.topbar-copy p:last-child,
.hero-copy p,
.panel-head p,
.metric-card span,
.capture-copy span,
.capture-title span,
.item-body span,
label,
.empty-note,
.stack-item time {
    color: var(--muted);
}

.topbar-copy p:last-child {
    margin: 6px 0 0;
    font-size: 13px;
}

.topbar-side {
    display: grid;
    gap: 8px;
    justify-items: end;
}

/* ---------- Pills / chips ---------- */

.status-pill,
.mini-badge,
.capture-state,
.chip-button {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--panel);
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.status-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.status-pill.in { color: var(--ok); }
.status-pill.out { color: var(--faint); }

.chip-button,
.mini-badge {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--brand-dark);
}

.chip-button {
    box-shadow: var(--shadow-soft);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.chip-button:active {
    transform: scale(0.96);
}

/* ---------- Panels / cards ---------- */

.panel,
.hero-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel {
    padding: 16px;
    margin-bottom: 14px;
}

.hero-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.center-card {
    margin-top: 16vh;
}

.hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    box-shadow: var(--shadow-brand);
    flex: 0 0 auto;
}

.hero-icon svg { width: 26px; height: 26px; }

/* ---------- Toast notice ---------- */

.notice {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 250;
    width: min(calc(100% - 24px), 690px);
    border: 1px solid var(--line-strong);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-radius: 14px;
    padding: 13px 14px;
    background: var(--brand-soft);
    background: color-mix(in srgb, var(--brand-soft) 88%, var(--panel));
    color: var(--brand-dark);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
    animation: toast-in 0.25s ease both;
}

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.notice.error {
    border-color: var(--danger-line);
    background: var(--danger-soft);
    color: var(--danger);
}

.notice-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.notice-close {
    width: 26px;
    height: 26px;
    min-height: 26px;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    flex: 0 0 auto;
    opacity: 0.75;
}

.hidden {
    display: none !important;
}

/* ---------- Navigation (segmented tab bar) ---------- */

.nav-pills {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 16px;
    padding: 5px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.nav-pills::-webkit-scrollbar {
    display: none;
}

.admin-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.admin-nav::-webkit-scrollbar {
    display: none;
}

.nav-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 48px;
    padding: 7px 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-nav .nav-pill {
    flex: 0 0 calc((100% - 16px) / 5);
    width: calc((100% - 16px) / 5);
}

.nav-pills:not(.admin-nav) .nav-pill {
    flex: 0 0 calc((100% - 16px) / 5);
    width: calc((100% - 16px) / 5);
}

.nav-pill svg {
    width: 19px;
    height: 19px;
}

.nav-pill-icon-wrap {
    position: relative;
    display: inline-flex;
}

/* Urgent-events banner: Events are one-off, out-of-the-blue assignments,
   so on top of the nav badge, the home tab gets an attention-grabbing
   card the moment one is pending — no need to notice the badge first. */
.urgent-events-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--warning-line);
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.urgent-events-banner:active {
    transform: scale(0.98);
}

.urgent-events-banner-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--panel);
    color: var(--warning);
}

.urgent-events-banner-icon svg {
    width: 19px;
    height: 19px;
}

.urgent-events-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.urgent-events-banner-copy strong {
    color: var(--warning);
    font-size: 13.5px;
    font-weight: 800;
}

.urgent-events-banner-copy small {
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 650;
}

.urgent-events-banner-arrow {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--warning);
}

/* iOS-style unread badge: a small red circle with a count, pinned to the
   corner of the Events tab icon until the underlying reports are cleared. */
.nav-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--panel);
}

.nav-pill.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* ---------- Sub-tabs (within a section) ---------- */

.subtabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.subtab {
    min-width: 0;
    min-height: 42px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.subtab.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* ---------- Buttons ---------- */

button {
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--text);
    padding: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

button:active {
    transform: translateY(1px) scale(0.99);
}

button.primary {
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: var(--on-brand);
    border-color: transparent;
    box-shadow: var(--shadow-brand);
}

button.soft {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: transparent;
}

button.danger {
    background: var(--danger);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--danger) 32%, transparent);
}

button.ghost {
    background: transparent;
    color: var(--muted);
    border-color: var(--line-strong);
}

button:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

button.is-busy {
    opacity: 0.72;
    pointer-events: none;
}

.small-button {
    width: auto;
    min-width: 84px;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: var(--radius-pill);
}

.nested-tab-back {
    margin-bottom: 12px;
}

/* ---------- Tab sections ---------- */

.tab-section {
    display: none;
}

.tab-section.active {
    display: block;
    animation: tab-in 0.28s ease both;
}

@keyframes tab-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-head h2 {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 800;
}

.panel-head p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.35;
}

/* ---------- Metrics ---------- */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.metrics-grid.metrics-2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 13px 12px;
    background: var(--panel-2);
}

.metric-card.accent {
    background: linear-gradient(165deg, var(--panel-2) 0%, var(--brand-soft) 130%);
    border-color: var(--line-strong);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
}

.metric-card span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-card strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---------- Upcoming activity ---------- */

.upcoming-activity-list {
    display: grid;
}

.upcoming-rows {
    display: grid;
    gap: 8px;
}

/* One row per scheduled range: status code, name, then the dates. Boxed with
   generous padding so each entry reads as its own cell. */
.upcoming-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
}

/* Fallbacks only for statuses missing from the legend; normally the badge
   takes the legend's own colours inline. */
.upcoming-row .status-code-badge.mc {
    background: #fff1f2;
    color: #9f1239;
}

.upcoming-row .status-code-badge.leave {
    background: #e0f2fe;
    color: #075985;
}

.upcoming-row .status-code-badge.event {
    background: #dbeafe;
    color: #1e40af;
}

.upcoming-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upcoming-when {
    /* Pinned to the far right of the row. justify-self keeps it flush to the
       edge even when the name is short and the middle column collapses. */
    justify-self: end;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

/* Anything happening today is called out in the danger colour. */
.upcoming-row.today .upcoming-when {
    color: var(--danger);
    font-weight: 850;
}

.upcoming-row.today .upcoming-name {
    color: var(--text);
    font-weight: 850;
}

/* The date column is pinned to the far right at every width. The name column
   is the flexible one, so a long name ellipses rather than pushing the date
   out of alignment. */
@media (max-width: 430px) {
    .upcoming-row {
        gap: 8px;
        padding: 11px 10px;
    }

    .upcoming-name {
        font-size: 13px;
    }

    .upcoming-when {
        font-size: 11px;
    }
}

.upcoming-activity-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
}

/* ---------- Status legend ---------- */

.legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.legend-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/* The single definition of a status code badge. Shared by the Status Legend,
   the active codes on the overview, and the Upcoming Activity rows, so all
   three stay the same size. Only the colours are set per badge. */
.legend-badge,
.status-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    min-width: 32px;
    padding: 0 6px;
    border-radius: 7px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.02em;
    box-sizing: border-box;
}

/* Chips that carry a count need more room than a bare code badge, so the
   number never crowds the letters. */
.status-code-badge.has-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 50px;
    min-width: 50px;
    height: 24px;
    gap: 4px;
    padding: 0 6px;
    border-radius: 7px;
    box-sizing: border-box;
    white-space: nowrap;
}

.status-code-label {
    display: inline;
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1;
}

.status-code-count {
    display: inline;
    margin: 0;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.8;
}

.legend-name {
    min-width: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* ---------- Hero action ---------- */

/* Laid out to match the photo and location capture cards above it: an icon
   tile, a title with its state underneath, and the control on the right.
   Previously used --border and --surface-soft, neither of which is defined
   in this file, so the card rendered with no border and no background. */
.on-course-checkin-option {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.on-course-checkin-option:active {
    border-color: var(--line-strong);
}

/* Turns brand-tinted while On Course is enabled, so the state is obvious
   without reading the label. */
.on-course-checkin-option.is-on {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}

.on-course-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--panel);
    color: var(--muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.on-course-checkin-option.is-on .on-course-icon {
    background: var(--brand);
    color: var(--on-brand);
}

.on-course-icon svg {
    width: 19px;
    height: 19px;
}

.on-course-checkin-option .on-course-copy {
    display: block;
    min-width: 0;
}

.on-course-checkin-option strong,
.on-course-checkin-option small {
    display: block;
}

.on-course-checkin-option strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

.on-course-checkin-option small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.on-course-checkin-option.is-on small {
    color: var(--brand-dark);
    font-weight: 800;
}

/* The switch itself is the shared .switch / .switch-slider component used by
   the Photo and Location cards above, so all three toggles look identical. */

.hero-action {
    display: grid;
    gap: 12px;
}

.action-hero {
    min-height: 60px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    border-radius: 16px;
}

/* Action tab only: keep the primary clock action above optional evidence
   preparation and make the status summary faster to scan on a phone. */
#tab-s-action.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#tab-s-action > .urgent-events-banner { order: 0; }
#tab-s-action > .action-status-panel { order: 1; }
#tab-s-action > .action-clock-panel { order: 2; }
#tab-s-action > .action-evidence-panel { order: 3; }

#tab-s-action > .panel {
    margin: 0;
}

.action-welcome {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 11px;
}

.action-welcome > span:last-child,
.action-welcome strong,
.action-welcome small {
    display: block;
}

.action-welcome-icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.action-welcome-icon svg {
    width: 20px;
    height: 20px;
}

.action-welcome strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
}

.action-welcome small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
}

.action-status-panel .metric-card {
    min-height: 76px;
    padding: 11px 12px;
}

.action-status-panel .metric-card strong {
    margin-top: 4px;
    font-size: 19px;
}

.action-clock-panel {
    border-color: var(--brand-line);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(150deg, var(--panel) 35%, var(--brand-soft) 145%);
}

.action-evidence-panel {
    margin-top: -12px !important;
    border-top: 1px dashed var(--brand-line);
    border-radius: 0 0 var(--radius) var(--radius);
}

.action-clock-panel .panel-head {
    margin-bottom: 10px;
    align-items: center;
}

.action-clock-panel .action-state-head {
    justify-content: space-between;
    margin-bottom: 9px;
}

.action-evidence-panel .panel-head {
    margin-bottom: 10px;
    align-items: center;
}

.action-evidence-panel .capture-card {
    padding: 12px;
}

.action-progress {
    position: relative;
    height: 5px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--brand-soft);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.action-progress.is-active { opacity: 1; }

.action-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-dark), var(--brand), #7c8cff);
    animation: action-progress-slide 1.05s ease-in-out infinite;
}

@keyframes action-progress-slide {
    from { transform: translateX(-110%); }
    to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
    .action-progress span { animation-duration: 2.2s; }
}

@media (min-width: 560px) {
    .action-status-panel .metrics-grid.metrics-2x2 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    #tab-s-action.active { gap: 10px; }
    .action-status-panel,
    .action-clock-panel,
    .action-evidence-panel { padding: 14px; }
    .action-evidence-panel .panel-head p { font-size: 12px; }
    .action-status-panel .metric-card { min-height: 70px; }
}

.button-row,
.button-column,
.capture-actions {
    display: grid;
    gap: 10px;
}

.button-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Capture cards (photo + location) ---------- */

.capture-list {
    display: grid;
    gap: 12px;
}

.capture-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    padding: 14px;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.capture-card.is-off {
    opacity: 0.72;
}

.capture-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.capture-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    flex: 0 0 auto;
}

.capture-icon svg { width: 22px; height: 22px; }

.capture-title strong,
.capture-copy strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.capture-title span,
.capture-copy span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

.capture-body {
    margin-top: 14px;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.capture-preview {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    background: var(--panel);
}

.capture-preview .capture-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-photo-preview {
    display: block;
    width: 100%;
    max-height: 260px;
    border: 1px solid var(--line);
    border-radius: 12px;
    object-fit: cover;
    background: var(--panel);
}

.capture-state {
    min-width: 74px;
    padding: 6px 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    flex: 0 0 auto;
}

.capture-state.ready {
    background: var(--ok-soft);
    border-color: var(--ok-line);
    color: var(--ok);
}

.capture-state.busy {
    background: var(--brand-soft);
    border-color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
    color: var(--brand-dark);
}

.capture-state.skipped {
    background: var(--warning-soft);
    border-color: var(--warning-line);
    color: var(--warning);
}

.capture-actions {
    grid-template-columns: minmax(0, 1fr);
}

.capture-subrow {
    display: flex;
    gap: 10px;
}

.capture-subrow button {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------- Theme switcher ---------- */

.theme-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.theme-option {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 66px;
    padding: 12px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.theme-option svg {
    width: 20px;
    height: 20px;
}

.theme-option.active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* ---------- Toggle switch ---------- */

.switch {
    position: relative;
    width: 48px;
    height: 28px;
    flex: 0 0 auto;
}

.switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.switch-slider {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
    transition: background 0.2s ease;
}

.switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
    transition: transform 0.2s ease;
}

.switch input:checked + .switch-slider {
    background: var(--brand);
}

.settings-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
}

.settings-row > span:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.settings-row strong {
    font-size: 13px;
    color: var(--text);
}

.settings-row small {
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
}

.full-width {
    width: 100%;
}

.switch input:checked + .switch-slider::after {
    transform: translateX(20px);
}

/* ---------- Result card ---------- */

.result-card {
    border: 1px solid var(--ok-line);
    border-radius: var(--radius-sm);
    padding: 14px;
    background: var(--ok-soft);
    animation: tab-in 0.3s ease both;
}

.result-card > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ok);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 11px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.result-tile {
    border: 1px solid var(--ok-line);
    border: 1px solid color-mix(in srgb, var(--ok) 22%, var(--line));
    border-radius: 10px;
    background: var(--panel);
    padding: 9px;
}

.result-tile span {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.result-tile b {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Forms ---------- */

.form-grid,
.stack-list {
    display: grid;
    gap: 12px;
}

label {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

input,
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    padding: 12px;
    color: var(--text);
    background: var(--panel);
    /* Every field in this app sits inside a <label>, and label text is
       deliberately small (11-13px). Because inputs use font: inherit below,
       without a font-size of their own they were quietly inheriting that
       small label size - and anything under 16px makes iOS/Android WebViews
       auto-zoom the whole page the instant the field is focused, which is
       exactly what made typing (and the caret riding along with that zoom)
       look "messed up". Pinning 16px here overrides the inherited value on
       every text/number/date field that doesn't already set its own size. */
    font-size: 16px;
    /* Some in-app WebViews render the typing caret faintly unless it's
       pinned explicitly — always make it match the text color. */
    caret-color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Native iOS/Android date and time controls keep an intrinsic layout width
   for their internal segments + calendar/clock icon that plain width/
   max-width can't shrink - that's what was pushing Work date/Start time/
   End time wider than the modal even after the field and its column were
   both capped at 100%. -webkit-appearance/appearance: none strips that
   native chrome so the box below (and the pseudo-elements after it) are
   what actually determine its size - the same fix already used for the
   Date of Birth and report-period date fields elsewhere in this file. */
.mini-shell input[type="date"],
.mini-shell input[type="month"],
.mini-shell input[type="time"],
.mini-modal input[type="date"],
.mini-modal input[type="month"],
.mini-modal input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    font: inherit;
    font-size: 16px;
    line-height: 48px;
    background: var(--panel);
}

.mini-shell input[type="date"]::-webkit-date-and-time-value,
.mini-shell input[type="month"]::-webkit-date-and-time-value,
.mini-shell input[type="time"]::-webkit-date-and-time-value,
.mini-modal input[type="date"]::-webkit-date-and-time-value,
.mini-modal input[type="month"]::-webkit-date-and-time-value,
.mini-modal input[type="time"]::-webkit-date-and-time-value {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: 48px;
    text-align: left;
}

.mini-shell input[type="date"]::-webkit-calendar-picker-indicator,
.mini-shell input[type="month"]::-webkit-calendar-picker-indicator,
.mini-shell input[type="time"]::-webkit-calendar-picker-indicator,
.mini-modal input[type="date"]::-webkit-calendar-picker-indicator,
.mini-modal input[type="month"]::-webkit-calendar-picker-indicator,
.mini-modal input[type="time"]::-webkit-calendar-picker-indicator {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px;
}

.form-grid > *,
.person-editor-grid > *,
.person-schedule-time-grid > *,
.person-schedule-day-body > *,
.history-filters > *,
.report-period-field {
    min-width: 0;
    max-width: 100%;
}

.report-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    padding: 10px;
}

.input-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Product Library ---------- */

.library-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 4px 0 16px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-2);
}

.library-mode-tab {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.library-mode-tab.active {
    color: #fff;
    background: var(--brand);
    box-shadow: var(--shadow-soft);
}

.library-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.library-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(132px, 0.8fr);
    gap: 10px;
}

.library-filters input,
.library-filters select {
    min-height: 46px;
}

.library-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    margin: 12px 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

/* ---------- Leave history filters ---------- */

.history-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(120px, 0.8fr);
    gap: 10px;
    margin-bottom: 10px;
}

.history-filters label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.history-filters label span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.history-filters select {
    width: 100%;
    min-height: 46px;
}

.history-result-count {
    min-height: 18px;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 520px) {
    .history-filters {
        grid-template-columns: 1fr;
    }
}

/* ---------- Product Library rows ---------- */

.library-results {
    display: grid;
    gap: 8px;
}

.library-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    padding: 11px 12px;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.library-row:hover {
    border-color: var(--line-strong);
}

.library-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.library-row-icon.catalogue {
    background: var(--ok-soft);
    color: var(--ok);
}

.library-row-icon.namecard {
    background: #e0e7ff;
    color: #4338ca;
}

.library-row-icon.poster {
    background: #fef3c7;
    color: #b45309;
}

.library-row-icon svg {
    width: 21px;
    height: 21px;
}

.library-row-body {
    min-width: 0;
}

.library-row-title {
    display: block;
    overflow: hidden;
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.library-row-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 0 0 auto;
    /* Anchors the numeral to the top-left corner of the row. */
    align-self: flex-start;
}

.library-row-number {
    padding-left: 2px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.library-row-subtitle {
    display: block;
    overflow: hidden;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.library-row-subtitle:empty {
    display: none;
}

.library-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.library-kind {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.library-kind.catalogue {
    background: var(--ok-soft);
    color: var(--ok);
}

.library-kind.namecard {
    background: #e0e7ff;
    color: #4338ca;
}

.library-kind.poster {
    background: #fef3c7;
    color: #b45309;
}

.library-row-meta span:not(.library-kind) {
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--muted);
    background: var(--panel-2);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-row-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.library-row-primary {
    min-width: 68px;
    min-height: 36px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.library-row-primary:active {
    background: var(--brand-dark);
}

.library-row-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--panel-2);
    color: var(--muted);
    cursor: pointer;
}

.library-row-more svg {
    width: 17px;
    height: 17px;
}

.library-row-more[aria-expanded="true"] {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.library-row-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    top: auto;
    right: 0;
    z-index: 40;
    min-width: 178px;
    padding: 5px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.library-menu-item {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.library-menu-item:active,
.library-menu-item:hover {
    background: var(--panel-2);
}

.library-menu-item:disabled {
    color: var(--faint);
    cursor: default;
}

.library-empty {
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    padding: 24px 14px;
    color: var(--muted);
    text-align: center;
}

.download-history-results {
    display: grid;
    gap: 10px;
}

.download-history-card {
    display: grid;
    grid-template-columns: minmax(190px, 1.1fr) minmax(170px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: var(--shadow-soft);
}

.download-history-person,
.download-history-document {
    min-width: 0;
}

.download-history-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 5px;
}

.download-history-action {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.download-history-action.view {
    background: #e0e7ff;
    color: #4338ca;
}

.download-history-person h3 {
    overflow: hidden;
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.download-history-person p,
.download-history-person > span,
.download-history-document span,
.download-history-card time {
    display: block;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

.download-history-document strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.download-history-card time {
    min-width: 116px;
    color: var(--brand-dark);
    font-weight: 800;
    text-align: right;
}

@media (max-width: 520px) {
    .library-filters {
        grid-template-columns: 1fr;
    }

    .library-row {
        gap: 10px;
        padding: 10px;
    }

    .library-row-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .library-row-icon svg {
        width: 19px;
        height: 19px;
    }

    .library-row-primary {
        min-width: 0;
        padding: 8px 12px;
    }

    .download-history-card {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .download-history-card time {
        min-width: 0;
        padding-top: 8px;
        border-top: 1px solid var(--line);
        text-align: left;
    }
}

.leave-document-editor {
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px;
}

.leave-document-review-title {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.leave-document-review-copy {
    margin: 4px 0 10px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.leave-document-preview-stage {
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 6px;
    background: #fff;
}

.leave-document-upload-preview {
    display: block;
    width: 100%;
    height: min(72vw, 300px);
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    transition: transform 160ms ease;
}

.leave-document-pdf-preview {
    display: block;
    width: 100%;
    height: min(105vw, 440px);
    border: 0;
    border-radius: 6px;
    background: #fff;
}

.leave-document-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
}

.leave-document-editor-actions button {
    width: auto;
    min-height: 36px;
}

.leave-document-editor-actions span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.leave-document-confirmation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    background: #fff1f2;
    cursor: pointer;
}

.leave-document-confirmation input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #9f1239;
}

.leave-document-confirmation span {
    color: #881337;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.selected-date-list {
    display: block;
}

#leaveBalanceCard {
    position: sticky;
    top: 8px;
    z-index: 12;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(248, 250, 252, 0.96);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
}

#userUsingUpCard.unpaid {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

#userUsingUpCard.unpaid span,
#userUsingUpCard.unpaid strong {
    color: #991b1b !important;
}

#userUsingUpCard.split {
    background: #fff1f2 !important;
    border-color: #fb7185 !important;
}

#userUsingUpCard.split span,
#userUsingUpCard.split strong {
    color: #9f1239 !important;
}

.leave-payment-state {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 12px;
}

.leave-payment-state strong {
    font-size: 13px;
    font-weight: 850;
}

.leave-payment-state span {
    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
}

.leave-payment-state.unpaid {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.leave-payment-state.split {
    background: #fff1f2;
    border-color: #fb7185;
    color: #9f1239;
}

.leave-date-summary {
    display: grid;
    gap: 4px;
    margin-top: -4px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--brand-soft);
    padding: 11px 13px;
}

.leave-date-summary.empty {
    background: var(--panel);
}

.leave-date-summary.unpaid,
.leave-date-summary.split {
    background: #fee2e2;
    border-color: #fca5a5;
}

.leave-date-summary.unpaid span,
.leave-date-summary.unpaid strong,
.leave-date-summary.split span,
.leave-date-summary.split strong {
    color: #991b1b;
}

.leave-date-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.leave-date-summary strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.35;
}

.inline-calendar {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    padding: 12px;
}

.inline-calendar-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
}

.inline-calendar-head strong {
    min-width: 0;
    color: var(--text);
    text-align: center;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
}

.inline-calendar-weekdays,
.inline-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.inline-calendar-weekdays span {
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    font-weight: 850;
}

.inline-calendar-day {
    aspect-ratio: 1;
    min-height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 850;
    padding: 0;
}

.inline-calendar-day.empty {
    visibility: hidden;
}

.inline-calendar-day.today {
    border-color: var(--brand);
}

.inline-calendar-day.selected {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #93c5fd;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.inline-calendar-day.selected.unpaid,
.inline-calendar-day.selected.split {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.14);
}

textarea {
    min-height: 92px;
    resize: vertical;
}

/* ---------- Stack list (logs / rows) ---------- */

.stack-item {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    padding: 13px;
    overflow-wrap: break-word;
}

.stack-item.highlight-item {
    border-color: var(--ok-line);
    background: var(--ok-soft);
    box-shadow: 0 0 0 3px rgba(15, 159, 110, 0.14);
}

.stack-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.person-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stack-item > span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

.stack-item time {
    display: block;
    margin-top: 6px;
    font-size: 11px;
}

.leave-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.leave-card-head strong {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
    overflow-wrap: anywhere;
    padding-right: 0;
}

.icon-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    padding: 0;
    margin: 0;
    background: var(--panel);
    color: var(--muted);
    flex: 0 0 auto;
    box-sizing: border-box;
    border: none;
    outline: none;
}

.icon-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.calendar-button {
    align-self: center;
    margin: 0;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
}

/* ---------- Leave approval cards ---------- */

.leave-card {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.leave-card-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 11px;
}

.leave-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.leave-avatar.leave-type-mc {
    background: #fce7f3;
    color: #be185d;
}

.leave-avatar.leave-type-leave {
    background: #e0f2fe;
    color: #075985;
}

.user-subtab-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.user-subtab-btn {
    background: var(--panel, #ffffff);
    color: var(--muted, #64748b);
    border: 1px solid var(--line-strong, #cbd5e1);
    transition: all 0.2s ease;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}
.user-subtab-btn.active {
    background: var(--brand, #2563eb);
    color: #ffffff;
    border-color: var(--brand, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.leave-balance-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.leave-stat-box {
    background: #ffffff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}

.leave-stat-box .stat-box-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.leave-stat-box .stat-box-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--brand, #2563eb);
}

.leave-stat-box.using-up-card {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.leave-stat-box.using-up-card .stat-box-label {
    color: #1e40af;
}

.leave-stat-box.using-up-card .stat-box-value {
    color: #1d4ed8;
}

.leave-submit-row {
    display: flex;
    gap: 8px;
}

.leave-submit-row .primary {
    flex: 1;
}

.panel-head-actions {
    display: flex;
    gap: 8px;
}

.status-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.leave-bubble-box {
    background: #ffffff !important;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    padding: 8px 10px;
}

.leave-card-identity {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.leave-card-identity strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.leave-type-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.leave-type-pill.leave-type-mc {
    background: #fce7f3;
    border-color: #fbcfe8;
    color: #be185d;
}

.leave-type-pill.leave-type-leave {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #075985;
}

.leave-type-pill.leave-type-mu {
    background: #ffe4e6;
    border-color: #fecdd3;
    color: #9f1239;
}

.leave-type-pill.leave-type-lu {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.leave-type-pill.leave-type-default {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand-dark);
}

.leave-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}

.leave-info-cell {
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--panel);
    padding: 9px 11px;
}

.leave-info-cell span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.leave-info-cell strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.leave-balance {
    margin-top: 4px;
    display: grid;
    gap: 2px;
}

.leave-balance span {
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
}

.leave-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.leave-meta-row .leave-doc-btn {
    margin-left: auto;
    width: auto;
}

.leave-remarks {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.leave-card .tag {
    font-weight: 500;
}

.leave-decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

.leave-decision-actions.single {
    grid-template-columns: minmax(0, 1fr);
}

.btn-decision {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-decision svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.btn-approve {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-approve:active {
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
    transform: translateY(1px);
}

.btn-reject {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-reject:active {
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
    transform: translateY(1px);
}

.btn-unapprove {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.empty-state {
    text-align: center;
}

.reports-panel {
    display: grid;
    gap: 14px;
}

.report-group {
    display: grid;
    gap: 14px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    padding: 16px;
}

.report-group-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.report-group-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    flex: 0 0 auto;
}

.report-group-icon svg {
    width: 20px;
    height: 20px;
}

.report-group-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.report-group-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.report-period-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}

.report-period-field > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    display: block;
}

.report-period-field input[type="date"],
.report-period-field input[type="month"],
.report-period-field input[type="number"],
.report-period-field select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    color-scheme: light;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    display: block;
    line-height: 48px;
}

.report-period-field select {
    cursor: pointer;
    line-height: normal;
    text-align-last: center;
}

.report-period-field input[type="date"]::-webkit-calendar-picker-indicator,
.report-period-field input[type="month"]::-webkit-calendar-picker-indicator {
    display: none;
    opacity: 0;
}

.report-period-field input[type="date"]::-webkit-date-and-time-value,
.report-period-field input[type="month"]::-webkit-date-and-time-value {
    text-align: center;
    display: block;
    width: 100%;
    margin: 0;
    min-height: 48px;
    line-height: 48px;
    padding: 0;
}

.report-period-field input[type="date"]:focus-visible,
.report-period-field input[type="month"]:focus-visible,
.report-period-field input[type="number"]:focus-visible,
.report-period-field select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

:root[data-theme="dark"] .report-period-field input[type="date"],
:root[data-theme="dark"] .report-period-field input[type="month"] {
    color-scheme: dark;
}

.report-export-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.report-export-grid button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.report-export-grid-single {
    grid-template-columns: 1fr;
}

.item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.leave-date-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.leave-date-range.many-dates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leave-date-range > div {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    padding: 10px;
}

.leave-date-range span,
.leave-reason span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.leave-date-range strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 800;
}

.leave-reason {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    padding: 11px;
}

.leave-reason p {
    margin: 6px 0 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.leave-tags .tag {
    min-height: 30px;
    min-width: 92px;
    justify-content: center;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--panel);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.tag.ok {
    border-color: var(--ok-line);
    background: var(--ok-soft);
    color: var(--ok);
}

.tag.present-status {
    border-color: #7dd3fc;
    background: #e0f2fe;
    color: #0369a1;
}

.tag.late-present {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #9f1239;
}

.tag.warn {
    border-color: var(--warning-line);
    background: var(--warning-soft);
    color: var(--warning);
}

#adminAbsentList .tag.warn {
    border-color: var(--danger-line);
    background: var(--danger-soft);
    color: var(--danger);
}

.rest-day-absent-row {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.rest-day-absent-row strong {
    color: #1e3a8a;
}

.rest-day-absent-row > span {
    color: #2563eb;
}

.rest-day-absent-row .tag.danger {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: transparent;
    position: relative;
}

.rest-day-absent-row .tag.danger::after {
    content: "Rest day";
    color: #1d4ed8;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag.danger {
    border-color: var(--danger-line);
    background: var(--danger-soft);
    color: var(--danger);
}

.admin-ai-form {
    display: grid;
    gap: 12px;
}

.admin-ai-heading {
    align-items: flex-start;
}

.admin-ai-state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.admin-ai-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
}

.admin-ai-state.is-working .admin-ai-state-dot {
    background: #2563eb;
    box-shadow: 0 0 0 4px #dbeafe;
}

.admin-ai-state.is-error .admin-ai-state-dot {
    background: #dc2626;
    box-shadow: none;
}

.admin-ai-composer {
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.admin-ai-composer:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-ai-form label {
    display: block;
    padding: 11px 12px 0;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.admin-ai-form textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border: 0;
    border-radius: 0;
    padding: 8px 12px 12px;
    background: #fff;
    color: var(--text);
    caret-color: #0f172a;
    font: inherit;
    line-height: 1.45;
}

.admin-ai-form textarea:focus {
    outline: 0;
}

.admin-ai-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 8px 8px 8px 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.admin-ai-composer-footer span {
    color: #64748b;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.admin-ai-composer-footer .primary {
    width: auto;
    min-width: 124px;
    min-height: 38px;
    margin: 0;
}

.admin-ai-output {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #fff;
}

.admin-ai-output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.admin-ai-output-head strong {
    color: #0f172a;
    font-size: 13px;
}

.admin-ai-output-head span {
    color: #64748b;
    font-size: 11px;
    text-align: right;
}

.admin-ai-result {
    min-height: 72px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background: #fff;
}

.admin-ai-result.is-error {
    background: var(--danger-soft);
}

.admin-ai-result.is-error .admin-ai-result-copy {
    color: var(--danger);
}

.admin-ai-progress {
    margin-top: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px;
    background: #eff6ff;
}

.admin-ai-progress-head {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.admin-ai-progress-head strong {
    display: block;
    color: #1e3a8a;
    font-size: 13px;
}

.admin-ai-progress-head p,
.admin-ai-progress-note {
    margin: 3px 0 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.4;
}

.admin-ai-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #bfdbfe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: admin-ai-spin 0.8s linear infinite;
}

.admin-ai-elapsed {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.admin-ai-progress-track {
    height: 4px;
    margin: 12px 0 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #dbeafe;
}

.admin-ai-progress-track span {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
    animation: admin-ai-progress 1.6s ease-in-out infinite;
}

.admin-ai-progress .small-button {
    width: 100%;
    margin-top: 12px;
}

@keyframes admin-ai-spin {
    to { transform: rotate(360deg); }
}

@keyframes admin-ai-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(310%); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-ai-spinner,
    .admin-ai-progress-track span {
        animation-duration: 3s;
    }
}

.admin-ai-result-copy {
    margin: 0;
    padding: 12px;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
}

.admin-ai-message-state {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 24px 18px;
    text-align: center;
}

.admin-ai-message-state svg {
    width: 34px;
    height: 34px;
    margin-bottom: 3px;
}

.admin-ai-message-state strong {
    color: #0f172a;
    font-size: 16px;
}

.admin-ai-message-state p {
    max-width: 420px;
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.admin-ai-message-state span {
    color: #64748b;
    font-size: 12px;
}

.admin-ai-message-state.is-empty {
    background: #f8fafc;
}

.admin-ai-message-state.is-empty svg {
    color: #475569;
}

.admin-ai-message-state.is-failure {
    background: var(--danger-soft);
}

.admin-ai-message-state.is-failure svg,
.admin-ai-message-state.is-failure strong,
.admin-ai-message-state.is-failure p {
    color: var(--danger);
}

.admin-ai-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-ai-table th,
.admin-ai-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.admin-ai-table th {
    background: #eef4ff;
    color: #1e3a8a;
    font-weight: 800;
}

@media (max-width: 420px) {
    .admin-ai-heading {
        gap: 12px;
    }

    .admin-ai-state {
        min-height: 28px;
        padding: 5px 8px;
    }

    .admin-ai-composer-footer .primary {
        min-width: 112px;
    }

    .admin-ai-progress-head {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .admin-ai-elapsed {
        grid-column: 2;
        justify-self: start;
    }
}

.tag.mc {
    border-color: #fbcfe8;
    background: #fce7f3;
    color: #be185d;
}

.tag.aw,
.tag.awol {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #991b1b;
}

.role-tag {
    flex: 0 0 auto;
    font-weight: 800;
}

.role-tag.role-admin {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.role-tag.role-manager {
    border-color: var(--warning-line);
    background: var(--warning-soft);
    color: var(--warning);
}

.role-tag.role-staff {
    border-color: var(--line-strong);
    background: var(--panel-2);
    color: var(--muted);
}

.request-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.request-actions .small-button {
    width: 100%;
}

.request-actions .decision-button {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
}

.report-scope {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.report-scope-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

input[type="checkbox"],
.report-scope input[type="checkbox"],
.report-user-options input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: middle !important;
    display: inline-grid !important;
    place-content: center !important;
    box-sizing: border-box !important;
}

input[type="checkbox"]:checked,
.report-scope input[type="checkbox"]:checked,
.report-user-options input[type="checkbox"]:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

input[type="checkbox"]:checked::before,
.report-scope input[type="checkbox"]:checked::before,
.report-user-options input[type="checkbox"]:checked::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(0.5px, -0.5px);
}

/* Consistent bordered toggle rows for Summary / All staff. */
.report-scope-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.report-user-picker {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
}

.report-user-picker summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.report-user-picker summary::-webkit-details-marker {
    display: none;
}

.report-user-picker-chevron {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform 0.18s ease;
    flex: 0 0 auto;
}

.report-user-picker[open] summary {
    border-bottom: 1px solid var(--line);
    color: var(--brand-dark);
}

.report-user-picker[open] .report-user-picker-chevron {
    transform: rotate(180deg);
    color: var(--brand-dark);
}

.report-user-options {
    display: grid;
    gap: 6px;
    max-height: 210px;
    padding: 10px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.report-user-options label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 34px;
    color: var(--text);
    font-weight: 600;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.mini-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-offset-top, 0px);
    height: var(--vv-height, 100vh);
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 16px;
}

.mini-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}

.mini-modal-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 680px);
    max-height: min(calc(var(--vv-height, 100vh) - 32px), 720px);
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24);
    padding: 16px;
}

.person-editor-panel {
    width: min(100%, 760px);
    box-sizing: border-box;
    padding: 20px;
}

.person-editor-form {
    display: grid;
    gap: 18px;
}

.person-editor-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 4px;
    padding: 4px;
    background: var(--panel-2);
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.person-editor-tabs::-webkit-scrollbar {
    display: none;
}

.person-editor-tab {
    flex: 1 1 auto;
    white-space: nowrap;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.person-editor-tab.active {
    background: var(--panel);
    color: var(--brand);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.person-editor-tabpanel {
    display: grid;
    gap: 18px;
}

.person-editor-section {
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.person-editor-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.person-editor-section h3 {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
}

.person-editor-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.person-editor-section-heading h3 {
    margin-bottom: 3px;
}

.person-editor-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.person-schedule-days {
    display: grid;
    gap: 8px;
}

.person-schedule-day {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 13px;
    background: var(--panel);
}

.person-schedule-day.is-off {
    background: var(--panel-2);
}

.person-schedule-day summary {
    display: grid;
    grid-template-columns: minmax(68px, 0.7fr) minmax(92px, 1fr) auto 16px;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 12px;
    cursor: pointer;
    list-style: none;
}

.person-schedule-day summary::-webkit-details-marker {
    display: none;
}

.person-schedule-day-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-schedule-day-summary {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-schedule-day-state {
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #ecfdf5;
    padding: 3px 7px;
    color: #047857;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.person-schedule-day.is-off .person-schedule-day-state {
    border-color: var(--line);
    background: var(--panel);
    color: var(--muted);
}

.person-schedule-day summary svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform 0.16s ease;
}

.person-schedule-day[open] summary {
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}

.person-schedule-day[open] summary svg {
    transform: rotate(90deg);
}

.person-schedule-day-body {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.person-schedule-day-body > label,
.person-schedule-time-grid label,
.person-schedule-ot-hours {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.person-schedule-day-body input[type="text"],
.person-schedule-day-body input[type="time"],
.person-schedule-day-body input[type="number"] {
    min-width: 0;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
}

.person-schedule-day-body input[type="time"] {
    height: 46px;
    min-height: 46px;
    padding-inline: 11px;
}

.person-editor-form,
.person-editor-section,
#personWeeklyScheduleEditor,
.person-schedule-days,
.person-schedule-day-body,
.person-editor-native-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.person-editor-native-field {
    display: grid !important;
    gap: 6px !important;
    overflow: hidden;
}

.native-control-shell {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    margin-top: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--panel);
}

.native-control-shell:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.native-control-shell input[type="date"],
.native-control-shell input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 46px;
    min-height: 46px;
    margin: 0 !important;
    padding: 0 11px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text);
    font-size: 16px;
}

.native-control-shell input::-webkit-date-and-time-value {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}

.native-control-shell input::-webkit-calendar-picker-indicator {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px;
}

.person-schedule-time-grid .native-control-shell input[type="time"] {
    position: relative;
    height: 46px;
    min-height: 46px;
    padding: 0 8px !important;
    line-height: 46px;
    text-align: center;
}

.person-schedule-time-grid .native-control-shell input[type="time"]::-webkit-date-and-time-value {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    min-height: 46px;
    margin: 0;
    padding: 0;
    line-height: 46px;
    text-align: center;
}

.person-schedule-time-grid .native-control-shell input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.person-schedule-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.person-schedule-working-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start;
    gap: 9px !important;
    color: var(--text) !important;
}

.person-schedule-working-toggle input {
    flex: 0 0 auto;
    margin-top: 1px !important;
}

.person-schedule-working-toggle strong,
.person-schedule-working-toggle small {
    display: block;
}

.person-schedule-working-toggle strong {
    color: var(--text);
    font-size: 12px;
}

.person-schedule-working-toggle small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.person-schedule-ot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: end;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.person-schedule-save {
    width: 100%;
    margin-top: 12px;
}

.person-payroll-section {
    display: grid;
    gap: 12px;
}

.person-payroll-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--panel-2);
    padding: 4px;
}

.person-payroll-type button {
    min-width: 0;
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.person-payroll-type button.is-active {
    background: var(--panel);
    color: var(--brand);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.person-payroll-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.person-payroll-fields.hidden {
    display: none;
}

.person-payroll-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.person-payroll-fields label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.person-payroll-fields input,
.person-payroll-fields select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0;
    font-size: 16px;
}

.person-payroll-note {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.person-payroll-save {
    width: 100%;
}

.person-schedule-loading,
.person-schedule-error {
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    padding: 18px 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.person-schedule-error {
    border-color: var(--danger-line);
    background: var(--danger-soft);
    color: var(--danger);
}

.person-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.add-employee-password-field {
    align-self: start;
}

.password-policy-card {
    margin-top: 8px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
}

.password-policy-card p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.password-policy-card ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-policy-card li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.password-policy-card li::before {
    content: "";
    width: 7px;
    height: 7px;
    margin: 4px auto 0;
    border: 1.5px solid var(--faint);
    border-radius: 50%;
    background: transparent;
}

.password-policy-card li.is-met {
    color: #167047;
}

.password-policy-card li.is-met::before {
    border-color: #22a66a;
    background: #22a66a;
}

.password-policy-card li.is-unmet {
    color: var(--danger);
}

.password-policy-card li.is-unmet::before {
    border-color: var(--danger);
}

.person-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.person-balance-card {
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    padding: 12px;
}

.person-balance-card.medical {
    border-color: #fecdd3;
    background: #fff1f2;
}

.person-balance-card span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.person-balance-card strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.1;
}

.person-leave-group {
    margin-bottom: 16px;
}

.person-leave-group:last-child {
    margin-bottom: 0;
}

.person-leave-group + .person-leave-group {
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.person-leave-group .person-balance-grid {
    margin-bottom: 10px;
}

.person-editor-grid input:disabled {
    color: var(--faint);
    background: var(--panel-2);
    cursor: not-allowed;
}

.person-editor-checks {
    display: grid;
    gap: 13px;
}

.role-choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.role-choice-fieldset legend { margin-bottom: 7px; color: var(--text); font-size: 12px; font-weight: 800; }
.role-choice-list { display: grid; gap: 8px; }
.role-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); cursor: pointer; }
.role-choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.role-choice:has(input:disabled) { opacity: .48; cursor: not-allowed; }
.role-choice input { position: absolute; opacity: 0; pointer-events: none; }
.role-choice-mark { display: grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; border: 1.5px solid var(--muted); border-radius: 5px; background: var(--panel); color: transparent; font-size: 12px; font-weight: 900; }
.role-choice input:checked + .role-choice-mark { border-color: var(--brand); background: var(--brand); color: #fff; }
.role-choice input:focus-visible + .role-choice-mark { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
.role-choice-fieldset > small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.4; }

.person-editor-checks label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
}

.person-editor-checks input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--brand);
}

.person-editor-checks strong,
.person-editor-checks small {
    display: block;
}

.person-editor-checks strong {
    font-size: 13px;
}

.person-editor-checks small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.person-editor-telegram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
}

.person-editor-telegram strong,
.person-editor-telegram span {
    display: block;
}

.person-editor-telegram strong {
    color: var(--text);
    font-size: 13px;
}

.person-editor-telegram span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.person-editor-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.person-editor-actions .primary {
    min-width: 132px;
}

.document-modal-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(100%, 720px);
    height: min(85vh, 700px);
    max-height: 100%;
    padding: 16px;
    box-sizing: border-box;
    /* The panel manages its own internal scroll area, so it must never
       overflow its fixed container and push the header/footer off-screen. */
    overflow: hidden;
}

.document-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
}

.zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
}

.zoom-controls .zoom-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    font-size: 15px;
    font-weight: 800;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-toolbar span {
    min-width: 44px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.toolbar-action-btn {
    width: auto;
    min-width: 64px;
    min-height: 32px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-pill);
}

.document-viewer-area {
    min-height: 280px;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #ffffff;
    overscroll-behavior: contain;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    touch-action: pan-x pan-y pinch-zoom;
}

.document-viewer-area.is-zoomed {
    overflow: auto;
}

.document-viewer-area.is-zoomed .document-scale-surface {
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
}

.document-scale-surface {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    box-sizing: border-box;
    position: relative;
}

.document-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: 0;
    background: #ffffff;
    border-radius: 6px;
    transform-origin: center center;
}

.document-image {
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0;
    margin: auto;
    background: transparent;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transform-origin: center center;
}

.document-canvas {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.2);
}

.document-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.library-pdf-modal {
    /* Stretch instead of centring: a panel taller than the Telegram viewport
       would otherwise overflow equally top and bottom, putting the header X
       above the top edge and the Close button below the bottom edge with no
       way to scroll to either. */
    align-items: stretch;
    justify-items: center;
    padding: 2px;
    padding-top: max(2px, env(safe-area-inset-top));
    padding-bottom: max(2px, env(safe-area-inset-bottom));
}

.library-pdf-modal .document-modal-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(100%, 980px);
    height: 100%;
    max-height: 100%;
    padding: 6px;
    border-radius: 10px;
    overflow: hidden;
}

.library-pdf-modal .document-toolbar {
    display: none;
}

.library-pdf-modal .mini-modal-head {
    align-items: center;
    margin-bottom: 6px;
    padding-left: 4px;
    /* Keep the close control above the rendered canvas at all times. */
    position: relative;
    z-index: 2;
}

.library-pdf-modal .mini-modal-head .icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--panel-2);
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.library-pdf-modal .mini-modal-head .icon-button:active {
    background: var(--line);
}

.library-pdf-modal .mini-modal-head span {
    display: none;
}

.library-pdf-modal .document-viewer-area {
    min-height: 0;
    padding: 2px;
    overflow: hidden;
    touch-action: pan-y;
    background: #dfe5ee;
}

.library-pdf-modal .document-viewer-area.is-zoomed {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    touch-action: pan-x pan-y;
}

.library-pdf-modal .document-scale-surface {
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
}

.library-pdf-modal .document-canvas {
    max-width: none;
    max-height: none;
}

.library-pdf-modal .document-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
}

.library-pdf-modal .document-actions .small-button {
    min-height: 38px;
}

/* Products: Save PDF and Send PDF form one full-width bottom row. */
.product-document-modal .document-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.product-document-modal .document-namecard-send-sheet,
.product-document-modal .namecard-send-actions {
    width: 100%;
}

.product-document-modal .namecard-send-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-document-modal .namecard-send-actions > button {
    min-width: 0;
    width: 100%;
}

.namecard-document-modal .document-actions {
    grid-template-columns: minmax(0, 1fr);
}

.library-pdf-modal.namecard-document-modal {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.library-pdf-modal.namecard-document-modal .document-modal-panel {
    grid-template-rows: auto auto auto;
    width: min(100%, 680px);
    height: auto;
    max-height: calc(100% - 24px);
    padding: 10px;
    border-radius: 16px;
}

.library-pdf-modal.namecard-document-modal .mini-modal-head span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

.library-pdf-modal.namecard-document-modal .document-viewer-area {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 1.75 / 1;
    padding: 0;
    border-radius: 12px;
    background: #e2e8f0;
}

.library-pdf-modal.namecard-document-modal .document-scale-surface {
    width: 100% !important;
    height: 100% !important;
}

.document-namecard-send-sheet {
    display: grid;
    gap: 10px;
    width: 100%;
    /* This sheet is the only visible child of `.document-actions` for both
       namecards and plain library documents, but that parent still lays out
       a 2-column grid (for the old Save/Share pair) - without spanning both
       tracks the sheet (and the Save/Send buttons inside it) would only
       fill the first half of the row. */
    grid-column: 1 / -1;
}

.namecard-format-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.document-namecard-format-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.namecard-format-option {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
}

.namecard-format-option.is-selected {
    border-color: #60a5fa;
    background: #dbeafe;
    color: #0755bd;
}

.namecard-send-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.namecard-send-confirm {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 10px;
    background: #111111;
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 850;
}

.namecard-send-confirm:active {
    background: #000000;
    transform: translateY(1px);
}

.namecard-share-btn {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 850;
}

.namecard-share-btn:active {
    background: var(--panel-2);
    transform: translateY(1px);
}

.library-pdf-modal .document-frame {
    transform: none !important;
}

.library-pdf-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #475569;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
}

.mini-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mini-modal-head strong,
.mini-modal-head span {
    display: block;
}

.mini-modal-head span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.mini-calendar-body {
    display: grid;
    gap: 14px;
}

.mini-calendar-month {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: var(--panel-2);
}

.mini-calendar-month h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.mini-calendar-weekdays,
.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.mini-calendar-weekdays span {
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    font-weight: 800;
}

.mini-calendar-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    background: var(--panel);
    border: 1px solid transparent;
}

.mini-calendar-day.empty {
    visibility: hidden;
}

.mini-calendar-day.selected {
    color: #1d4ed8;
    background: #dbeafe;
    border-color: #93c5fd;
}

.top-gap {
    margin-top: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    .metrics-grid,
    .button-row,
    .result-grid {
        grid-template-columns: 1fr 1fr;
    }

    .request-actions {
        grid-template-columns: 1fr;
    }

    .leave-date-range {
        grid-template-columns: 1fr;
    }

    .person-editor-grid,
    .person-balance-grid {
        grid-template-columns: 1fr;
    }

    .person-editor-telegram {
        align-items: flex-start;
        flex-direction: column;
    }

    .person-editor-telegram .small-button,
    .person-editor-actions .primary {
        width: 100%;
    }

    .person-editor-panel {
        width: 100%;
        max-width: calc(100vw - 20px);
        max-height: calc(var(--vv-height, 100vh) - 24px);
        padding: 14px;
        border-radius: 17px;
    }

    .person-schedule-day summary {
        grid-template-columns: minmax(58px, 0.65fr) minmax(80px, 1fr) auto 14px;
        gap: 6px;
        padding: 0 9px;
    }

    .person-schedule-day-name {
        font-size: 12px;
    }

    .person-schedule-day-state {
        padding-inline: 5px;
        font-size: 8px;
    }

    .person-schedule-time-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .person-payroll-secondary {
        grid-template-columns: minmax(0, 1fr);
    }

    .person-schedule-day-body input[type="time"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .reports-panel {
        gap: 16px;
        padding: 14px;
    }

    .reports-panel .panel-head {
        margin-bottom: 0;
    }

    .report-group {
        gap: 12px;
        padding: 14px;
    }

    .report-group-head p {
        display: none;
    }

    .report-period-field input[type="date"],
    .report-period-field input[type="month"],
    .report-period-field input[type="number"],
    .report-period-field select {
        height: 48px;
        min-height: 48px;
        font-size: 15px;
        text-align: center;
        display: block;
        padding: 0 14px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        line-height: 48px;
    }

    .report-period-grid {
        grid-template-columns: 1fr;
    }

    .report-period-field input[type="date"]::-webkit-calendar-picker-indicator,
    .report-period-field input[type="month"]::-webkit-calendar-picker-indicator {
        display: none;
        opacity: 0;
    }

    .report-period-field input[type="date"]::-webkit-date-and-time-value,
    .report-period-field input[type="month"]::-webkit-date-and-time-value {
        text-align: center;
        min-height: 48px;
        line-height: 48px;
        padding: 0;
    }

    .report-period-field > span {
        text-align: left;
    }

    .report-export-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .report-export-grid button {
        height: 42px;
        min-height: 42px;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .report-user-picker summary {
        min-height: 46px;
    }

    .report-user-options {
        max-height: 184px;
        padding: 8px 12px 12px;
    }

    .topbar {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .mini-shell {
        padding: 8px 12px 40px;
    }

    .result-grid {
        grid-template-columns: 1fr 1fr;
    }

    .topbar-copy h1,
    .hero-copy h1 {
        font-size: 22px;
    }

    .nav-pill {
        font-size: 10px;
    }
}

.status-legend-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

@media (max-width: 580px) {
    .status-legend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.legend-chip {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    min-height: 48px;
    justify-content: center;
    box-sizing: border-box;
}

.legend-chip strong {
    font-size: 13px;
    font-weight: 850;
    line-height: 1.1;
}

.legend-chip span {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 3px;
}

.legend-chip.status-pr { background: #dbeafe; color: #1e40af; }
.legend-chip.status-df { background: #d1fae5; color: #065f46; }
.legend-chip.status-mc { background: #fce7f3; color: #be185d; }
.legend-chip.status-lf { background: #e0f2fe; color: #075985; }
.legend-chip.status-rd { background: #f1f5f9; color: #334155; }

.legend-chip.status-aw { background: #fee2e2; color: #991b1b; }
.legend-chip.status-dm { background: #cffafe; color: #155e75; }
.legend-chip.status-mm { background: #fce7f3; color: #be185d; }
.legend-chip.status-lm { background: #e0f2fe; color: #075985; }
.legend-chip.status-rm { background: #f1f5f9; color: #334155; }

.legend-chip.status-hp { background: #ede9fe; color: #5b21b6; }
.legend-chip.status-da { background: #fef3c7; color: #92400e; }
.legend-chip.status-ma { background: #fce7f3; color: #be185d; }
.legend-chip.status-la { background: #e0f2fe; color: #075985; }
.legend-chip.status-ra { background: #f1f5f9; color: #334155; }

/* ---------- Work Assignments (Events) ---------- */

.work-assignment-panel {
    overflow: hidden;
}

.assignment-summary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.assignment-summary-row article {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    overflow: hidden;
}

.assignment-summary-row article + article {
    border-left: 1px solid var(--line);
}

.assignment-summary-row span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.assignment-summary-row strong {
    color: var(--text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.assignment-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.assignment-view-tabs button {
    min-height: 36px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.assignment-view-tabs button.active {
    background: var(--panel);
    color: var(--brand-dark);
    box-shadow: var(--shadow-soft);
}

.assignment-list {
    display: grid;
    gap: 10px;
}

.assignment-card {
    position: relative;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.assignment-card.is-complete {
    border-color: var(--ok-line);
}

.assignment-card.is-in-progress {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

.assignment-card.is-cancelled {
    opacity: 0.78;
}

.assignment-card.is-cancelled .assignment-card-head h3 {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--line-strong);
}

.assignment-card-head,
.assignment-card-actions,
.assignment-progress,
.assignment-assignee-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.assignment-card-head {
    align-items: flex-start;
}

.assignment-card h3 {
    margin: 0;
    min-width: 0;
    color: var(--text);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.assignment-card-copy {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-line;
}

.assignment-meta {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: var(--surface);
}

.assignment-meta-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 650;
}

.assignment-meta-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.assignment-meta-row svg {
    width: 24px;
    height: 24px;
    padding: 4.5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
}

.assignment-location-link {
    width: fit-content;
    max-width: 100%;
    padding: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    color: var(--brand-dark);
    font-size: 12.5px;
    font-weight: 750;
    justify-content: flex-start;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.assignment-status {
    flex: 0 0 auto;
    padding: 4px 9px;
    border: 1px solid var(--warning-line);
    border-radius: var(--radius-pill);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.assignment-status.completed {
    border-color: var(--ok-line);
    background: var(--ok-soft);
    color: var(--ok);
}

.assignment-status.in_progress {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.assignment-status.ended {
    border-color: var(--ok-line);
    background: var(--ok-soft);
    color: var(--ok);
}

.assignment-status.cancelled {
    border-color: var(--line);
    background: var(--surface);
    color: var(--muted);
}

.assignment-progress {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.assignment-progress span:first-child {
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.assignment-progress span:last-child {
    flex: 0 0 auto;
    text-align: right;
}

.assignment-assignees {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.assignment-assignee {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
}

.assignment-assignee.completed {
    border-left-color: var(--ok);
}

.assignment-assignee.in-progress {
    border-left-color: var(--brand);
}

.assignment-actual-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.assignment-actual-times span {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text-soft);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.assignment-actual-times strong {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.assignment-assignee strong {
    color: var(--text);
    font-size: 12.5px;
    font-weight: 750;
}

.assignment-assignee small {
    color: var(--muted);
    font-size: 10.5px;
}

.assignment-assignee .assignment-status {
    padding: 3px 7px;
    font-size: 9px;
}

.assignment-report-copy {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-line;
}

.assignment-report-copy strong {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.assignment-report-copy strong + br {
    display: none;
}

.assignment-assignee .assignment-report-copy {
    background: var(--panel);
}

.assignment-card-actions {
    margin-top: 12px;
    justify-content: flex-end;
}

.assignment-card-actions button {
    width: auto;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 750;
}

.assignment-card-actions button.primary {
    flex: 1 1 auto;
}

.assignment-card-actions button.soft {
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text-soft);
    box-shadow: none;
}

.assignment-editor-panel,
.assignment-report-panel {
    width: min(94vw, 520px);
    max-height: min(calc(var(--vv-height, 100vh) - 32px), 88vh);
    overflow-y: auto;
}

.assignment-editor-form {
    display: grid;
    /* Without an explicit track, a plain "display: grid" container sizes its
       single implicit column to fit its content's natural width - and a
       native date/time control's internal layout doesn't want to shrink
       below its own intrinsic size the way a text input does. That pushed
       the Work date / Start time / End time fields (and the column track
       carrying them) wider than the modal, forcing the whole thing to
       overflow past the edge of the screen. minmax(0, 1fr) caps the track's
       minimum at 0 so it fills the available width instead of the content's. */
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
}

.assignment-editor-form label,
.assignment-employee-fieldset legend,
.assignment-location-fieldset legend {
    min-width: 0;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 6px;
}

.assignment-editor-form input,
.assignment-editor-form select,
.assignment-editor-form textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
}

.assignment-editor-form textarea {
    min-height: 94px;
    resize: vertical;
}

.assignment-time-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.optional-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.assignment-employee-fieldset {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.assignment-employee-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.assignment-employee-head .assignment-select-actions {
    margin: 0;
}

.assignment-employee-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 0;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    background: var(--panel);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.assignment-employee-toggle-arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform 0.16s ease;
}

.assignment-employee-toggle[aria-expanded="true"] .assignment-employee-toggle-arrow {
    transform: rotate(180deg);
}

.assignment-selected-summary {
    display: block;
    max-height: 190px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.assignment-selected-summary:empty::before {
    content: "No employees selected yet.";
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.assignment-selected-summary:not(:empty) {
    border: 1px solid var(--line);
    border-radius: 8px;
}

.assignment-selected-row {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.assignment-selected-row + .assignment-selected-row {
    border-top: 1px solid var(--line);
}

.assignment-location-fieldset {
    display: grid;
    gap: 13px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.location-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
}

.location-mode-btn {
    min-height: 34px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    transition: background 0.16s ease, color 0.16s ease;
}

.location-mode-btn.active {
    background: var(--panel);
    color: var(--brand-dark);
    box-shadow: var(--shadow-soft);
}

.location-mode-panel select {
    margin-top: 0;
}

.assignment-map-wrap {
    position: relative;
    /* Locked (the default, behind the tap gate below) lets a touch here pass
       through as an ordinary vertical scroll of the modal - nothing to cede
       to Leaflet yet since dragging is disabled. Once unlocked, gestures are
       ceded entirely to Leaflet's own touch handling so a drag on the map
       can't also scroll the modal behind it - that fight is what made
       pinning on phone feel glitchy before. */
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.assignment-map-wrap.is-unlocked {
    touch-action: none;
}

.assignment-map {
    height: 260px;
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    touch-action: none;
}

.assignment-map-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 500;
    color: var(--danger);
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, 0.35));
}

.assignment-map-crosshair svg {
    width: 100%;
    height: 100%;
}

.assignment-map-crosshair::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.25);
    transform: translate(-50%, 50%);
}

.map-tap-gate {
    position: absolute;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.22);
    border-radius: inherit;
    cursor: pointer;
}

.map-tap-gate.hidden {
    display: none;
}

.map-tap-gate span {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.68);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
}

.assignment-select-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: 6px 0;
}

.assignment-select-actions button {
    width: auto;
    min-height: 30px;
    padding: 5px 9px;
    font-size: 10px;
}

.assignment-employee-list {
    display: grid;
    max-height: 190px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.assignment-employee-option {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 10px;
}

.assignment-employee-option + .assignment-employee-option {
    border-top: 1px solid var(--line);
}

.assignment-employee-option input {
    width: 17px !important;
    height: 17px;
    margin: 0 !important;
}

.assignment-employee-option span {
    min-width: 0;
    color: var(--text);
    font-size: 12px;
}

.assignment-employee-option small {
    display: block;
    color: var(--muted);
    font-size: 10px;
}

.assignment-editor-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
    padding-top: 4px;
}

.assignment-editor-actions button {
    border-width: 1px;
    border-style: solid;
    border-color: var(--line-strong);
}

.assignment-report-panel .icon-button {
    border: 1px solid var(--line-strong);
}

.assignment-evidence-field {
    display: grid;
    gap: 8px;
}

.assignment-evidence-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.assignment-evidence-heading strong {
    font-size: 13px;
}

.assignment-evidence-heading span,
.assignment-evidence-help,
.assignment-evidence-file-type {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.assignment-evidence-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 8px;
}

.assignment-evidence-picker {
    display: grid;
    place-items: center;
    min-height: 42px;
    margin: 0;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
}

.assignment-evidence-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.assignment-evidence-list {
    display: grid;
    gap: 8px;
}

.assignment-evidence-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted, rgba(0, 0, 0, 0.03));
}

.assignment-evidence-item-preview {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--panel-2);
}

.assignment-evidence-item-file {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-weight: 800;
}

.assignment-evidence-item-info {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.assignment-evidence-item-name {
    font-size: 11px;
    font-weight: 650;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-evidence-time-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}

.assignment-evidence-time-field input[type="time"] {
    width: auto;
    max-width: 108px;
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 32px;
    text-align: center;
}

.assignment-evidence-time-field input[type="time"]::-webkit-date-and-time-value {
    width: 100%;
    text-align: center;
    line-height: 32px;
}

/* Multiple evidence photo buttons should wrap onto their own lines and
   start-align, instead of the space-between/flex-end layout the shared
   `.assignment-card-actions` rules use for a single action button. */
.assignment-evidence-gallery {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.assignment-evidence-thumb {
    flex: 0 1 auto;
}

.assignment-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 26px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.assignment-empty-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    color: var(--faint);
}

.assignment-empty-icon svg {
    width: 20px;
    height: 20px;
}

.assignment-empty strong {
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 750;
}

.assignment-empty p {
    margin: 0;
    max-width: 30ch;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.45;
}

@media (max-width: 420px) {
    .assignment-time-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .assignment-card-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .assignment-card-actions button.primary {
        width: 100%;
    }

    .assignment-actual-times {
        grid-template-columns: minmax(0, 1fr);
    }

    .assignment-summary-row article {
        padding: 9px 10px;
    }

    .assignment-summary-row strong {
        font-size: 20px;
    }
}

.reminder-row-fields {
    /* Always one field per row - a wrapping flex row used to let Check-in
       and Check-out sit side by side whenever the card was wide enough,
       which made the layout flip between 1 row and 2 rows depending on
       screen size. Stacking unconditionally keeps it consistent everywhere. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0;
}

.reminder-row-field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: var(--surface-muted, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
}

.reminder-row-field input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.reminder-row-field input[type="time"] {
    margin: 0 0 0 auto;
    width: auto;
    max-width: 108px;
    height: 32px;
    min-height: 32px;
    padding: 0 8px;
    /* Native time pickers don't get the free-text caret the 16px base rule
       above is guarding against, so this can stay at its original compact
       size instead of forcing the row wider than it needs to be. */
    font-size: 12px;
    line-height: 32px;
    text-align: center;
}

.reminder-row-field input[type="time"]::-webkit-date-and-time-value {
    width: 100%;
    text-align: center;
    line-height: 32px;
}

/* ---------- Settings-style rows (Admin Tools "More" tab) ---------- */

.settings-section-label {
    margin: 14px 2px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.settings-section-label:first-of-type {
    margin-top: 4px;
}

.settings-list {
    display: grid;
    gap: 8px;
}

.settings-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.settings-row:active {
    background: var(--surface);
}

.settings-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
    flex: 0 0 auto;
}

.settings-row-icon svg {
    width: 20px;
    height: 20px;
}

.settings-row-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.settings-row-text strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-row-text span {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-row-chevron {
    width: 20px;
    height: 20px;
    color: var(--faint);
    flex: 0 0 auto;
}

.settings-row.settings-row-exit {
    background: var(--surface);
    border-style: dashed;
}

.settings-row.settings-row-exit .settings-row-icon {
    background: var(--panel-2);
    color: var(--muted);
}

.location-gps-toggle .settings-row-chevron {
    transition: transform 0.15s ease;
}

.location-gps-toggle[aria-expanded="true"] .settings-row-chevron {
    transform: rotate(90deg);
}

.location-gps-body {
    display: grid;
    gap: 13px;
    margin-top: 12px;
}

.location-gps-body.hidden {
    display: none;
}

.location-clear-gps-btn {
    justify-self: start;
}

/* ---------- Manage Locations: simple list rows ---------- */

.location-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
}

.location-row-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.location-row-actions .icon-button {
    background: var(--surface);
}

/* ---------- PWA overview additions ---------- */

/* Align the header logo's top-left corner with the real site header's logo
   (templates/base.html + static/css/site.css: .logo has margin: 10px 0 0,
   sitting inside a container with a fixed 14px side inset on phone widths)
   so the hxl logo lands in the same spot on both the mini app and the real
   site pages -- phone widths only, since that's the only place the real
   site uses that fixed 14px inset (desktop centers a 980px-wide header
   instead, so there's no matching desktop position to aim for). Longhand
   properties only, so padding-bottom stays whatever the base/breakpoint
   rules above set it to -- this just pins top/left/right. */
@media (max-width: 720px), (max-height: 520px) and (orientation: landscape) {
    .mini-shell {
        padding-top: 0;
        padding-left: 14px;
        padding-right: 14px;
    }

    .topbar {
        padding-top: 10px;
    }
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-logo {
    display: block;
    flex: 0 0 auto;
}

.topbar-logo img {
    display: block;
    width: auto;
    height: 48px;
}

.topbar-user-name {
    width: 100%;
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
}

/* Top-right workspace pill, matched to the Telegram reference. */
.workspace-switch-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #d7dce6;
    border-radius: 999px;
    background: #fff;
    color: #778197;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: .01em;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .10);
}

.workspace-switch-chip:hover,
.workspace-switch-chip:focus-visible {
    background: #fff;
    color: #59657d;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
}

.workspace-switch-chip__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #d8dde7;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .13);
}


/* ============================================================
   Auth / login page (attendance_portal/templates/login.html)
   Reuses this file's existing design tokens (--brand, --panel,
   --radius, --shadow, ...) instead of the old one-off Tailwind-
   CDN glass-morphism template, so the sign-in screen matches the
   rest of the portal. Kept deliberately minimal per YiLin's
   request: no logo/brand block, no copy outside the one white
   card, back control is icon-only and pinned to the corner.
   Added 2026-09-07.
   ============================================================ */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 16px;
}

.auth-back {
    /* Hangs above the card's top-left corner rather than sitting in the
       column's flow. In the flow it was part of what the page centred, which
       pushed the card itself below centre and left the button floating on its
       own -- so the card is what gets centred now, and the button follows it. */
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--muted);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
}

.auth-back svg {
    width: 17px;
    height: 17px;
}

.auth-back:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.auth-shell {
    position: relative;
    width: 100%;
    max-width: 360px;
}

.auth-card {
    width: 100%;
    margin-bottom: 0;
    padding: 26px 24px;
}

.auth-card-title {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    text-align: center;
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 16px;
}

.auth-alert svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.auth-alert.is-danger {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger-line);
}

.auth-alert.is-ok {
    color: var(--ok);
    background: var(--ok-soft);
    border-color: var(--ok-line);
}

.auth-field {
    margin-bottom: 14px;
}

.auth-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.auth-input-wrap {
    position: relative;
    display: block;
}

.auth-input {
    /* block, not the inline-block an <input> defaults to: the line box under an
       inline input left the wrapper a few px taller than the field, so the
       absolutely-centred eye toggle sat high inside it. */
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Keyed to the wrapper, not to [type="password"]. The eye toggle flips the
   input to type="text" to reveal the password, which used to stop this rule
   matching: the padding snapped back to 14px and the revealed password ran
   underneath the eye icon. */
.auth-input-wrap--eye .auth-input {
    padding-right: 42px;
}

.auth-input::placeholder {
    color: var(--faint);
    font-weight: 500;
}

.auth-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.auth-eye-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    /* The global `button` rule sets min-height: 48px, which made this 48px tall
       inside a 42px field -- its hover pill then painted over the field's top
       and bottom border. Reset it so the toggle stays inside the input. */
    min-height: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--faint);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* No fill in any state. A filled pill inside a 42px field sits right on top of
   the input's rounded border, so hovering read as the icon cutting through the
   field. Darkening the glyph is enough of a hover cue. */
.auth-eye-toggle:hover {
    color: var(--muted);
}

.auth-eye-toggle:focus,
.auth-eye-toggle:focus-visible,
.auth-eye-toggle:active {
    outline: none;
    box-shadow: none;
    background: transparent;
}

/* The global `button:active` rule is `transform: translateY(1px) scale(0.99)`,
   and transform is a single property -- so on mouse-down it REPLACED the
   translateY(-50%) that centres this button, dropping it 17px and leaving it
   hanging 12px below the field, across the bottom border. Re-state the
   centring here (0,2,0 beats that rule's 0,1,1) and express the press as a
   scale only, which cannot move the box. */
.auth-eye-toggle:active {
    transform: translateY(-50%) scale(0.94);
}

.auth-eye-toggle svg {
    width: 16px;
    height: 16px;
    overflow: visible;
}

/* The eye is always drawn; only this line fades, so the glyph never jumps
   between the two states. It shows while the password is hidden -- a struck-
   through eye for "you can't see this" -- and clears once the password is
   revealed, leaving a plain open eye. */
.auth-eye-slash {
    opacity: 1;
    transition: opacity 0.14s ease;
}

.auth-eye-slash-cut {
    stroke: var(--surface);
}

.auth-eye-toggle[aria-pressed="true"] .auth-eye-slash {
    opacity: 0;
}

/* The cut line is painted in the field's own background, and that no longer
   changes under the button in any state, so it needs no hover variant. */

.auth-submit {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: var(--on-brand);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 800;
    box-shadow: var(--shadow-brand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.auth-submit:hover {
    filter: brightness(1.05);
}

.auth-submit:active {
    transform: scale(0.98);
}

.auth-submit:disabled {
    cursor: default;
    filter: none;
    opacity: 0.85;
}

.auth-hint {
    margin: 14px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--faint);
    text-align: center;
}

/* A hint used as a card's intro line: it sits under the title and above the
   first field, so it needs the spacing the other way round. Declared after
   .auth-hint because both are single-class selectors. */
.auth-card-intro {
    margin: -6px 0 20px;
}

/* Sits under the submit button on both auth pages. It used to be pulled up by
   a negative margin, which left it overlapping the button's drop shadow. */
.auth-forgot-link {
    display: block;
    margin-top: 14px;
    text-align: center;
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.auth-forgot-link:hover {
    text-decoration: underline;
}

.auth-otp-input {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 8px;
    font-variant-numeric: tabular-nums;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

.auth-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: auth-spin 0.6s linear infinite;
    flex: 0 0 auto;
}

/* "Request another code" is a real button, not a link, so it posts to the
   resend route instead of sending the employee back to retype their email.
   It reads as secondary to the card's primary action. */
.auth-resend-form {
    margin-top: 10px;
}

.auth-secondary-submit {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--brand);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.auth-secondary-submit:hover {
    background: var(--panel-alt, var(--panel));
    border-color: var(--brand);
}

.auth-secondary-submit:active {
    transform: scale(0.98);
}

.auth-secondary-submit:disabled {
    cursor: default;
    transform: none;
}

/* The shared spinner is white for the brand-filled button; on the outlined
   one it has to be drawn in the brand colour to be visible at all. */
.auth-secondary-submit .auth-spinner {
    border-color: rgba(37, 42, 129, 0.25);
    border-top-color: var(--brand);
}