/* ═══════════════════════════════════════════════════════════
   EDÍK – Mobile-first PWA Design
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Variables ─────────────────────────────────── */
:root {
    --bg: #0f172a; --bg-card: #1e293b; --bg-card-hover: #334155;
    --text: #e2e8f0; --text-muted: #94a3b8; --text-heading: #f1f5f9;
    --primary: #3b82f6; --primary-hover: #2563eb; --primary-glow: rgba(59,130,246,.25);
    --success: #10b981; --success-bg: rgba(16,185,129,.15);
    --warning: #f59e0b; --warning-bg: rgba(245,158,11,.15);
    --error: #ef4444; --error-bg: rgba(239,68,68,.15);
    --border: #334155; --radius: 16px; --radius-sm: 10px;
    --shadow: 0 4px 24px rgba(0,0,0,.3);
    --nav-h: 64px; --header-h: 56px;
    --font: 'Inter', -apple-system, sans-serif;
    color-scheme: dark;
}
[data-theme="light"] {
    --bg: #F4F7F9; --bg-card: #FFFFFF; --bg-card-hover: #F1F5F9;
    --text: #0F172A; --text-muted: #475569; --text-heading: #0F172A;
    --primary: #2563EB; --primary-hover: #1D4ED8; --primary-glow: rgba(37,99,235,.14);
    --success: #15803D; --success-bg: #DCFCE7;
    --warning: #B45309; --warning-bg: #FEF3C7;
    --error: #B91C1C; --error-bg: #FEE2E2;
    --border: #E2E8F0;
    --shadow: 0 8px 28px rgba(15,23,42,.08);
    color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100dvh; line-height: 1.5; }
a { color: var(--primary); text-decoration: none; }
code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: .85em; }
img { max-width: 100%; }

/* ── Header ────────────────────────────────────────────── */
.app-header { position: sticky; top: 0; z-index: 100; background: rgba(15,23,42,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
[data-theme="light"] .app-header { background: rgba(255,255,255,.86); box-shadow: 0 1px 12px rgba(15,23,42,.05); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; height: var(--header-h); max-width: 640px; margin: 0 auto; }
.header-logo { display: flex; align-items: center; gap: .5rem; color: var(--text-heading); font-weight: 700; font-size: 1.1rem; }
.header-logo .material-icons-round { color: var(--primary); font-size: 1.5rem; }
.header-logo-mark { width: 2rem; height: 2rem; object-fit: contain; flex: 0 0 auto; }
.header-user { display: flex; align-items: center; gap: .5rem; }
.user-name { font-size: .8rem; color: var(--text-muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-muted); transition: .2s; }
.btn-icon:hover { background: var(--bg-card-hover); color: var(--text); }

/* ── Bottom Nav ────────────────────────────────────────── */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(15,23,42,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--border); display: flex; justify-content: space-around; padding: .4rem 0 max(.4rem, env(safe-area-inset-bottom)); transition: transform .3s; }
[data-theme="light"] .bottom-nav { background: rgba(255,255,255,.92); box-shadow: 0 -8px 24px rgba(15,23,42,.06); }
.bottom-nav.hidden { transform: translateY(100%); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem .5rem; color: var(--text-muted); font-size: .65rem; font-weight: 500; border-radius: 12px; transition: .2s; min-width: 56px; }
.nav-item .material-icons-round { font-size: 1.4rem; }
.nav-item.active { color: var(--primary); }
.nav-item:active { transform: scale(.92); }

/* ── Main ──────────────────────────────────────────────── */
.app-main { max-width: 640px; margin: 0 auto; padding: 1rem 1rem calc(var(--nav-h) + 1.5rem); min-height: calc(100dvh - var(--header-h)); }

/* ── Flash Messages ────────────────────────────────────── */
.flash-container { max-width: 640px; margin: 0 auto; padding: 0 1rem; }
.flash { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: var(--radius-sm); margin-top: .5rem; font-size: .875rem; font-weight: 500; transition: .3s; }
.flash--success { background: var(--success-bg); color: var(--success); }
.flash--error { background: var(--error-bg); color: var(--error); }
.flash--info { background: var(--primary-glow); color: var(--primary); }

/* ── Buttons ───────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font); font-size: .9rem; font-weight: 600; border: none; cursor: pointer; transition: .2s; text-align: center; }
.btn:active { transform: scale(.96); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); box-shadow: 0 0 20px var(--primary-glow); }
.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #059669; }
.btn--warning { background: var(--warning); color: #1a1a1a; }
.btn--outline { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }
.btn--large { padding: 1rem 2rem; font-size: 1.1rem; border-radius: var(--radius); width: 100%; }
.btn--block { width: 100%; }
.btn--sm { padding: .4rem .75rem; font-size: .8rem; }
.btn--disabled { background: var(--bg-card-hover); color: var(--text-muted); cursor: not-allowed; opacity: .6; }
.btn-icon--danger:hover { color: var(--error); }

/* ── Dashboard ─────────────────────────────────────────── */
.dashboard { display: flex; flex-direction: column; gap: 1rem; }
.welcome-card { padding: 1.5rem; background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%); border-radius: var(--radius); }
[data-theme="light"] .welcome-card { background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%); border: 1px solid var(--border); box-shadow: var(--shadow); }
.welcome-title { font-size: 1.5rem; font-weight: 800; color: var(--text-heading); display: flex; align-items: center; gap: .5rem; }
.welcome-sub { color: var(--text-muted); margin-top: .25rem; }
.wave { display: inline-block; animation: wave 2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%,100% { transform: rotate(0); } 10%,30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }

.alert-card { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: var(--radius-sm); }
.alert-card--warning { background: var(--warning-bg); color: var(--warning); }
.alert-card--success { background: var(--success-bg); color: var(--success); }
.alert-card p { font-size: .8rem; margin-top: .15rem; }

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.action-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; border-radius: var(--radius); transition: .2s; }
.action-card:active { transform: scale(.96); }
.action-card--primary { background: linear-gradient(135deg, var(--primary), #6366f1); color: #fff; }
.action-card--secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
.action-card--attendance { grid-column: 1 / -1; order: 3; position: relative; min-height: 96px; justify-content: center; background: linear-gradient(135deg, rgba(16,185,129,.14), var(--bg-card)); border: 1px solid rgba(16,185,129,.35); color: var(--text); cursor: pointer; }
[data-theme="light"] .action-card--primary { background: linear-gradient(135deg, #2563EB, #1D4ED8); color: #fff; }
[data-theme="light"] .action-card--attendance { background: linear-gradient(135deg, #DCFCE7, #FFFFFF); border-color: #BBF7D0; color: #15803D; }
.action-card--attendance .action-icon { color: var(--success); }
.action-card--admin { grid-column: 1 / -1; order: 4; border-color: var(--primary); }
.action-card--admin .action-icon { color: var(--primary); }
.action-badge { position: absolute; top: .65rem; right: .65rem; padding: .18rem .5rem; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.action-icon { font-size: 2.5rem !important; margin-bottom: .5rem; }
.action-title { font-weight: 700; font-size: 1rem; }
.action-desc { font-size: .75rem; opacity: .8; margin-top: .2rem; }

/* ── Sections & Loan Cards ─────────────────────────────── */
.section { margin-top: .5rem; }
.section-title { font-size: .9rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .75rem; }
.loan-list { display: flex; flex-direction: column; gap: .5rem; }
.loan-card { display: flex; align-items: center; gap: .75rem; padding: .85rem; background: var(--bg-card); border-radius: var(--radius-sm); transition: .2s; color: var(--text); }
.loan-card:hover { background: var(--bg-card-hover); }
.loan-card-color { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.loan-card-info { flex: 1; min-width: 0; }
.loan-card-name { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loan-card-meta { font-size: .75rem; color: var(--text-muted); }
.loan-card-arrow { color: var(--text-muted); font-size: 1.2rem !important; }
.loan-card-status { text-align: right; flex-shrink: 0; }
.loan-card-date { font-size: .7rem; color: var(--text-muted); display: block; }

/* ── Badges ────────────────────────────────────────────── */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .7rem; font-weight: 600; }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--primary { background: var(--primary-glow); color: var(--primary); }
.badge--error { background: var(--error-bg); color: var(--error); }
.badge--outline { border: 1px solid var(--border); color: var(--text-muted); }

/* ── Sign-in Page ──────────────────────────────────────── */
.sign-page-body { height: 100dvh; overflow: hidden; background: #081226; }
.sign-page-body::before,
.sign-page-body::after { content: ''; position: fixed; z-index: -1; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(90px); opacity: .18; pointer-events: none; }
.sign-page-body::before { top: -15rem; left: -12rem; background: #2563eb; }
.sign-page-body::after { right: -15rem; bottom: -18rem; background: #fbbf24; opacity: .1; }
.sign-page-body .header-inner,
.sign-page-body .flash-container,
.sign-page-body .app-main { max-width: 1180px; }
.sign-page-body .app-main { display: grid; align-items: center; height: calc(100dvh - var(--header-h)); min-height: 0; padding: clamp(.75rem, 2.2vh, 1.5rem) clamp(1rem, 3vw, 2.5rem); overflow: hidden; }
.sign-page-body .flash-container { display: none; }
.edik-login-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr); width: 100%; height: 100%; min-height: 0; max-height: 690px; overflow: hidden; border: 1px solid rgba(148,163,184,.2); border-radius: 1.75rem; background: #111c31; box-shadow: 0 30px 90px rgba(2,6,23,.48); }
.edik-login-visual { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; padding: clamp(1.5rem, 3.2vw, 3.25rem); overflow: hidden; color: #fff; background: linear-gradient(145deg, #0b3d91 0%, #1558c0 56%, #1d4ed8 100%); }
.edik-login-visual::before { content: ''; position: absolute; z-index: -1; width: 30rem; height: 30rem; right: -13rem; top: -12rem; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255,255,255,.035), 0 0 0 9rem rgba(255,255,255,.025); }
.edik-login-visual::after { content: ''; position: absolute; z-index: -1; width: 17rem; height: 17rem; left: -8rem; bottom: -9rem; border-radius: 50%; background: rgba(251,191,36,.18); filter: blur(2px); }
.edik-login-brand { display: flex; align-items: center; gap: .9rem; }
.edik-login-brand-mark { width: 4.25rem; height: 4.25rem; object-fit: contain; filter: drop-shadow(0 .5rem 1.2rem rgba(2,6,23,.22)); }
.edik-login-brand div { display: grid; line-height: 1.15; }
.edik-login-brand strong { font-size: 1.65rem; letter-spacing: .08em; }
.edik-login-brand span { margin-top: .25rem; color: #bfdbfe; font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.edik-login-intro { max-width: 36rem; margin: clamp(1.5rem, 5vh, 3.5rem) 0; }
.edik-login-eyebrow { display: inline-flex; margin-bottom: 1rem; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.1); color: #dbeafe; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.edik-login-intro h1 { max-width: 34rem; font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -.045em; }
.edik-login-intro p { max-width: 34rem; margin-top: 1.25rem; color: #dbeafe; font-size: clamp(.95rem, 1.5vw, 1.08rem); line-height: 1.7; }
.edik-login-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.edik-login-features div { display: grid; align-content: start; gap: .65rem; min-height: 7.25rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; background: rgba(7,29,73,.26); backdrop-filter: blur(8px); }
.edik-login-features .material-icons-round { color: #fbbf24; font-size: 1.55rem; }
.edik-login-features strong { font-size: .78rem; line-height: 1.4; }
.edik-login-panel { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(1.5rem, 3.2vw, 3.25rem); overflow: hidden; background: linear-gradient(160deg, rgba(30,41,59,.98), rgba(15,23,42,.98)); }
.edik-login-card { width: 100%; max-width: 28rem; margin: auto; }
.edik-login-security { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; color: #60a5fa; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.edik-login-security .material-icons-round { font-size: 1.15rem; }
.edik-login-card h2 { color: var(--text-heading); font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.15; letter-spacing: -.035em; }
.edik-login-description { margin: .75rem 0 2rem; color: var(--text-muted); }
.edik-login-card .flash { margin: 0 0 1rem; }
.btn-microsoft { display: flex; align-items: center; justify-content: center; gap: .8rem; width: 100%; min-height: 3.65rem; padding: .9rem 1rem; background: #fff; color: #172033; border: 1px solid #dbe2ea; border-radius: .9rem; font-family: var(--font); font-size: .94rem; font-weight: 750; transition: transform .2s, box-shadow .2s, border-color .2s; }
.btn-microsoft:hover { border-color: #93c5fd; box-shadow: 0 14px 30px rgba(2,6,23,.24); transform: translateY(-2px); }
.btn-microsoft:focus-visible { outline: 3px solid rgba(96,165,250,.45); outline-offset: 3px; }
.btn-microsoft-arrow { margin-left: auto; color: #64748b; font-size: 1.25rem !important; }
.edik-login-note { display: flex; gap: .65rem; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: .9rem; color: var(--text-muted); font-size: .75rem; line-height: 1.55; }
.edik-login-note .material-icons-round { flex: 0 0 auto; color: #60a5fa; font-size: 1.05rem; margin-top: .05rem; }
.edik-login-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .75rem; margin: 2rem auto 0; color: #64748b; font-size: .72rem; text-align: center; }
.edik-login-footer a { color: #94a3b8; transition: color .2s; }
.edik-login-footer a:hover { color: #60a5fa; }
.edik-login-footer a + a { padding-left: .75rem; border-left: 1px solid #334155; }
[data-theme="light"] .sign-page-body { background: #eef4fb; }
[data-theme="light"] .edik-login-shell { background: #fff; border-color: #dbe3ee; box-shadow: 0 30px 80px rgba(15,23,42,.14); }
[data-theme="light"] .edik-login-panel { background: linear-gradient(160deg, #fff, #f8fafc); }

@media (max-width: 860px) {
    .edik-login-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; max-height: none; }
    .edik-login-visual { padding: clamp(1rem, 2.5vh, 1.35rem) 1.35rem; }
    .edik-login-intro { margin: clamp(.75rem, 2vh, 1.35rem) 0 0; }
    .edik-login-eyebrow { margin-bottom: .65rem; padding: .32rem .65rem; font-size: .65rem; }
    .edik-login-intro h1 { font-size: clamp(1.75rem, 7.5vw, 2.35rem); line-height: 1.05; }
    .edik-login-intro p { margin-top: .7rem; font-size: .82rem; line-height: 1.5; }
    .edik-login-features { display: none; }
    .edik-login-panel { justify-content: center; padding: clamp(1rem, 2.5vh, 1.5rem) 1.35rem; }
    .edik-login-security { margin-bottom: .75rem; }
    .edik-login-card h2 { font-size: clamp(1.5rem, 6vw, 1.85rem); }
    .edik-login-description { margin: .4rem 0 1rem; font-size: .88rem; }
    .btn-microsoft { min-height: 3.3rem; }
    .edik-login-note { margin-top: .75rem; padding: .75rem; line-height: 1.4; }
    .edik-login-footer { margin-top: .8rem; }
}

@media (max-width: 480px) {
    .sign-page-body .app-main { padding: .55rem; }
    .edik-login-shell { border-radius: 1.25rem; }
    .edik-login-brand-mark { width: 3rem; height: 3rem; }
    .edik-login-brand strong { font-size: 1.25rem; }
    .edik-login-brand span { font-size: .68rem; }
    .edik-login-panel { padding-right: 1rem; padding-left: 1rem; }
}

@media (max-height: 760px) and (min-width: 861px) {
    .edik-login-visual,
    .edik-login-panel { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .edik-login-intro { margin: 1.25rem 0; }
    .edik-login-intro h1 { font-size: clamp(2rem, 3.7vw, 3rem); }
    .edik-login-features div { min-height: 5.6rem; padding: .8rem; }
    .edik-login-footer { margin-top: 1rem; }
}

@media (max-width: 860px) and (max-height: 700px) {
    .edik-login-eyebrow,
    .edik-login-intro p,
    .edik-login-note,
    .edik-login-footer { display: none; }
    .edik-login-intro { margin: .45rem 0 0; }
    .edik-login-intro h1 { font-size: clamp(1.45rem, 6vw, 1.85rem); }
    .edik-login-security { margin-bottom: .45rem; }
    .edik-login-description { margin-bottom: .75rem; }
}

/* ── Scan Page ─────────────────────────────────────────── */
.scan-page { display: flex; flex-direction: column; gap: 1rem; }
.scan-header { text-align: center; }
.page-title { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; color: var(--text-heading); }
.page-desc { font-size: .85rem; color: var(--text-muted); margin-top: .25rem; }
.scan-done-button { min-height: 52px; }
.scanner-container { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 1; width: 100%; max-width: 400px; margin: 0 auto; }
#qr-reader { width: 100% !important; }
#qr-reader video { border-radius: var(--radius) !important; }
.scanner-result { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem; border-radius: var(--radius-sm); transition: background 0.3s ease; }
.scanner-result--success { background: var(--success-bg); }
.scanner-result--success .scanner-result-icon { color: var(--success); }
.scanner-result--error { background: var(--error-bg); }
.scanner-result--error .scanner-result-icon { color: var(--error); }
.scanner-result-icon { font-size: 3rem !important; margin-bottom: .5rem; }
.scanner-error { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem; background: var(--bg-card); border-radius: var(--radius-sm); color: var(--text-muted); }
.scanner-error .material-icons-round { font-size: 3rem !important; margin-bottom: .5rem; }
.scan-manual { text-align: center; padding: 1rem; }
.scan-manual p { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; }
.manual-code-form { display: flex; gap: .5rem; }
.input-field { flex: 1; padding: .7rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: .9rem; outline: none; transition: .2s; }
.input-field:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }

/* ── Item Detail ───────────────────────────────────────── */
.item-detail { display: flex; flex-direction: column; gap: 1rem; }
.item-detail-header { background: var(--bg-card); padding: 1.25rem; border-radius: var(--radius); }
.item-category-badge { display: inline-block; padding: .25rem .75rem; border-radius: 20px; font-size: .75rem; font-weight: 600; margin-bottom: .5rem; }
.item-name { font-size: 1.4rem; font-weight: 800; color: var(--text-heading); }
.item-code { display: flex; align-items: center; gap: .35rem; color: var(--text-muted); font-size: .85rem; margin-top: .35rem; }
.status-card { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); }
.status-card--available { background: var(--success-bg); }
.status-card--borrowed { background: var(--warning-bg); }
.status-icon { font-size: 2rem !important; }
.status-card--available .status-icon { color: var(--success); }
.status-card--borrowed .status-icon { color: var(--warning); }
.status-label { font-weight: 700; font-size: 1rem; display: block; }
.status-desc { font-size: .8rem; color: var(--text-muted); }
.item-actions { margin: .5rem 0; }
.item-section { background: var(--bg-card); padding: 1.25rem; border-radius: var(--radius-sm); }
.item-description { font-size: .9rem; color: var(--text-muted); line-height: 1.6; }
.info-grid { display: grid; gap: .75rem; }
.info-item { display: flex; justify-content: space-between; }
.info-label { font-size: .8rem; color: var(--text-muted); }
.info-value { font-weight: 600; font-size: .9rem; }

/* ── History & Empty State ─────────────────────────────── */
.history-page { display: flex; flex-direction: column; gap: 1rem; }
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-icon { font-size: 4rem !important; color: var(--text-muted); opacity: .4; }
.empty-title { font-size: 1.1rem; font-weight: 700; margin-top: 1rem; }
.empty-desc { font-size: .85rem; color: var(--text-muted); }

/* ── Admin ─────────────────────────────────────────────── */
.admin-page { display: flex; flex-direction: column; gap: 1rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stat-card { background: var(--bg-card); padding: 1.25rem; border-radius: var(--radius-sm); text-align: center; }
.stat-value { display: block; font-size: 2rem; font-weight: 800; color: var(--primary); }
.stat-card--warning .stat-value { color: var(--warning); }
.stat-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; }

.admin-menu { display: flex; flex-direction: column; gap: .5rem; }
.admin-menu-item { display: flex; align-items: center; gap: .75rem; padding: 1rem; background: var(--bg-card); border-radius: var(--radius-sm); color: var(--text); transition: .2s; }
.admin-menu-item:hover { background: var(--bg-card-hover); }
.admin-menu-item > .material-icons-round:first-child { color: var(--primary); font-size: 1.5rem !important; }
.admin-menu-item > .material-icons-round:last-child { margin-left: auto; color: var(--text-muted); }
.admin-menu-title { font-weight: 600; display: block; }
.admin-menu-desc { font-size: .75rem; color: var(--text-muted); }

/* ── Tables ────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.data-table th { text-align: left; padding: .6rem .75rem; background: var(--bg-card); color: var(--text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: .6rem .75rem; border-top: 1px solid var(--border); white-space: nowrap; }
.data-table tr:hover td { background: var(--bg-card); }
.actions-cell { display: flex; gap: .25rem; }
.category-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: .35rem; }
.category-dot--large { width: 16px; height: 16px; }
.category-admin-table tbody tr { transition: background .18s, box-shadow .18s; }
.category-admin-table tbody tr:hover { background: rgba(16,185,129,.08); box-shadow: inset 3px 0 0 rgba(16,185,129,.65); }
.category-inline-cell { position: relative; cursor: pointer; transition: background .18s; }
.category-inline-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.category-inline-cell:hover { background: rgba(16,185,129,.08) !important; }
.category-color-cell { min-width: 150px; white-space: nowrap; }
.category-color-cell code { color: var(--text-muted); background: transparent; font-family: var(--font); font-size: .76rem; }
.category-name-cell { min-width: 240px; }
.category-name-value { font-weight: 700; }
.category-name-cell input[type="text"] { width: min(100%, 520px); padding: .5rem .65rem; border: 1px solid #86efac; border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-weight: 650; outline: 3px solid rgba(34,197,94,.18); }
.category-edit-icon { margin-left: .45rem; color: var(--primary); font-size: 1rem !important; vertical-align: middle; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.category-inline-cell:hover .category-edit-icon,
.category-inline-cell:focus-visible .category-edit-icon { opacity: .9; transform: translateX(0); }
.category-name-cell.is-editing .category-name-value,
.category-name-cell.is-editing .category-edit-icon { display: none; }
.category-color-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.category-save-state { margin-left: .4rem; color: var(--success); font-size: 1rem !important; vertical-align: middle; opacity: 0; transition: opacity .18s; }
.category-admin-table tr.is-saving { opacity: .68; }
.category-admin-table tr.is-saving .category-edit-icon { opacity: 0; }
.category-admin-table tr.is-saved .category-save-state { opacity: 1; }
[data-theme="light"] .category-admin-table tbody tr:hover,
[data-theme="light"] .category-inline-cell:hover { background: #ecfdf5 !important; }

/* ── Forms ─────────────────────────────────────────────── */
.form-card { background: var(--bg-card); padding: 1.25rem; border-radius: var(--radius-sm); }
.form-card label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-muted); margin-bottom: .35rem; margin-top: .75rem; }
.form-card input[type="text"], .form-card input[type="password"], .form-card textarea, .form-card select {
    width: 100%; padding: .65rem .85rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: .9rem; outline: none; transition: .2s;
}
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.form-card textarea { min-height: 80px; resize: vertical; }
.form-card input[type="submit"] { margin-top: 1rem; width: 100%; padding: .75rem; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font); font-size: .95rem; font-weight: 600; cursor: pointer; transition: .2s; }
.form-card input[type="submit"]:hover { background: var(--primary-hover); }

/* Vratné terminály */
.terminal-page-header { align-items: flex-start; }
.terminal-page-header .page-title { margin-bottom: .35rem; }
.terminal-count { display: inline-flex; align-items: baseline; gap: .35rem; padding: .5rem .75rem; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; }
.terminal-count strong { color: var(--primary); font-size: 1.05rem; }
.terminal-create-card { padding: 1.25rem; border: 1px solid var(--border); }
.terminal-section-intro { display: flex; align-items: flex-start; gap: .75rem; }
.terminal-section-intro > .material-icons-round { color: var(--primary); font-size: 1.65rem !important; }
.terminal-section-intro .section-title { margin: 0 0 .2rem; }
.terminal-section-intro p { margin: 0; color: var(--text-muted); font-size: .82rem; }
.terminal-create-form { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(16rem, 1.2fr) auto; gap: .8rem; align-items: end; margin-top: 1rem; }
.terminal-create-form label { display: grid; gap: .35rem; margin: 0; }
.terminal-create-form label > span { color: var(--text-muted); font-size: .75rem; font-weight: 600; }
.terminal-create-form .input-field { width: 100%; min-height: 2.7rem; }
.terminal-create-submit { min-height: 2.7rem; white-space: nowrap; }
.terminal-create-form .form-errors { grid-column: 1 / -1; margin: 0; padding: .7rem 1rem .7rem 2rem; color: var(--danger); background: var(--danger-bg); border-radius: var(--radius-sm); font-size: .8rem; }
.terminal-list-section { display: grid; gap: .75rem; }
.terminal-list-section .section-title { margin: .25rem 0 0; }
.terminal-table tr.is-inactive { opacity: .58; }
.terminal-name { display: inline-flex; align-items: center; gap: .55rem; }
.terminal-name .material-icons-round { color: var(--primary); font-size: 1.2rem !important; }
.terminal-table code { white-space: nowrap; }
.terminal-empty-state > .material-icons-round { color: var(--text-muted); font-size: 2rem !important; }
.terminal-security-note { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; color: var(--text-muted); background: color-mix(in srgb, var(--primary) 8%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: var(--radius-sm); }
.terminal-security-note > .material-icons-round { color: var(--primary); }
.terminal-security-note strong { color: var(--text); }
.terminal-security-note p { margin: .2rem 0 0; font-size: .78rem; line-height: 1.5; }

@media (max-width: 820px) {
    .terminal-create-form { grid-template-columns: 1fr; }
    .terminal-create-submit { width: 100%; }
}

/* Administrátorské sestavy a exporty */
.admin-menu-item--reports { border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--bg-card)); }
.report-center-header, .report-builder-header { align-items: flex-start; }
.admin-only-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .75rem; color: var(--success); background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--success) 32%, transparent); border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.admin-only-chip .material-icons-round { font-size: 1rem !important; }
.report-section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: .7rem 0 .85rem; }
.report-section-title h2 { margin: .15rem 0 0; font-size: 1.15rem; }
.report-section-title > span { color: var(--text-muted); font-size: .75rem; }
.report-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.report-type-card { position: relative; display: flex; flex-direction: column; min-height: 12rem; padding: 1.1rem; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; overflow: hidden; }
.report-type-card::after { content: ''; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; background: var(--primary-glow); border-radius: 50%; pointer-events: none; }
.report-type-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: var(--shadow); }
.report-type-icon { display: grid !important; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .8rem; color: var(--primary); background: var(--primary-glow); border-radius: .75rem; font-size: 1.45rem !important; }
.report-type-card strong { display: block; font-size: .95rem; }
.report-type-card p { margin: .35rem 0 .85rem; color: var(--text-muted); font-size: .76rem; line-height: 1.5; }
.report-type-action { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; color: var(--primary); font-size: .74rem; font-weight: 700; }
.report-type-action .material-icons-round { font-size: 1rem !important; }
.saved-report-section { padding: 1rem; background: color-mix(in srgb, var(--primary) 6%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: var(--radius); }
.saved-report-section .report-section-title { margin-top: 0; }
.saved-report-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.saved-report-card { display: flex; align-items: stretch; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.saved-report-open { flex: 1; display: flex; align-items: center; min-width: 0; gap: .65rem; padding: .75rem; color: var(--text); }
.saved-report-open > .material-icons-round:first-child { color: var(--primary); }
.saved-report-open > .material-icons-round:last-child { margin-left: auto; color: var(--text-muted); font-size: 1.1rem !important; }
.saved-report-open div { min-width: 0; }
.saved-report-open strong, .saved-report-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-report-open strong { font-size: .82rem; }
.saved-report-open small { margin-top: .15rem; color: var(--text-muted); font-size: .67rem; }
.saved-report-card form { display: grid; place-items: center; margin: 0; padding: .35rem; border-left: 1px solid var(--border); }
.report-security-note { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.report-security-note > .material-icons-round { color: var(--primary); }
.report-security-note strong { color: var(--text); }
.report-security-note p { margin: .2rem 0 0; font-size: .75rem; line-height: 1.5; }

.report-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.report-builder-form { display: grid; gap: .7rem; }
.report-config-card { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .8rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.report-config-number { display: grid; place-items: center; align-self: start; width: 2.1rem; height: 2.1rem; color: #fff; background: var(--primary); border-radius: .65rem; font-size: .82rem; font-weight: 800; }
.report-config-content { min-width: 0; }
.report-config-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.report-config-heading h2 { margin: .12rem 0 0; font-size: 1rem; }
.report-main-select { width: 100%; min-height: 2.75rem; padding: .55rem .7rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-weight: 650; }
.report-column-tools { display: flex; gap: .35rem; }
.report-column-tools button { padding: .3rem .55rem; color: var(--primary); background: transparent; border: 1px solid var(--border); border-radius: .45rem; font: inherit; font-size: .67rem; font-weight: 700; cursor: pointer; }
.report-column-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.report-column-option { position: relative; display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .62rem .65rem; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: .55rem; cursor: pointer; transition: .15s ease; }
.report-column-option input { position: absolute; opacity: 0; pointer-events: none; }
.report-column-option > .material-icons-round { display: grid; place-items: center; flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; color: transparent; border: 1px solid var(--border); border-radius: .3rem; font-size: .85rem !important; }
.report-column-option strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.report-column-option:has(input:checked) { color: var(--text); background: var(--primary-glow); border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); }
.report-column-option:has(input:checked) > .material-icons-round { color: #fff; background: var(--primary); border-color: var(--primary); }
.report-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.report-filter-grid label { display: grid; gap: .3rem; }
.report-filter-grid label > span { color: var(--text-muted); font-size: .67rem; font-weight: 700; }
.report-filter-grid input, .report-filter-grid select { width: 100%; min-height: 2.5rem; padding: .45rem .55rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .5rem; font: inherit; font-size: .76rem; }
.report-apply-button { width: 100%; min-height: 2.8rem; }
.report-preview-card { padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.report-preview-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .8rem; }
.report-preview-header h2 { margin: .12rem 0; font-size: 1.1rem; }
.report-preview-header p { margin: 0; color: var(--text-muted); font-size: .72rem; }
.report-save-form { display: flex; align-items: center; gap: .4rem; margin: 0; }
.report-save-form input[type="text"] { min-height: 2.35rem; padding: .45rem .6rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .5rem; font: inherit; font-size: .74rem; }
.report-summary-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.report-summary-grid article { min-width: 9rem; padding: .65rem .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: .55rem; }
.report-summary-grid span, .report-summary-grid strong { display: block; }
.report-summary-grid span { color: var(--text-muted); font-size: .63rem; }
.report-summary-grid strong { margin-top: .15rem; font-size: .95rem; }
.report-preview-table-wrap { max-height: 34rem; border: 1px solid var(--border); border-radius: .6rem; }
.report-preview-table { min-width: max-content; }
.report-preview-table thead { position: sticky; top: 0; z-index: 2; }
.report-preview-table th, .report-preview-table td { max-width: 22rem; font-size: .71rem; white-space: nowrap; }
.report-preview-table td { overflow: hidden; text-overflow: ellipsis; }
.report-empty-cell { padding: 2rem !important; color: var(--text-muted); text-align: center !important; }
.report-empty-cell .material-icons-round { display: block; margin: 0 auto .35rem; }

.admin-report-print-page { width: min(100%, 1200px); margin: 0 auto; }
.report-print-toolbar { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.admin-report-print-sheet { padding: 1.4rem; color: #111827; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-report-print-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: .9rem; border-bottom: 2px solid #111827; }
.admin-report-print-header h1 { margin: .15rem 0; color: #111827; font-size: 1.45rem; }
.admin-report-print-header p { max-width: 42rem; margin: 0; color: #4b5563; font-size: .72rem; }
.admin-report-print-meta { display: grid; gap: .15rem; flex: 0 0 auto; color: #4b5563; font-size: .68rem; text-align: right; }
.admin-report-print-meta strong { color: #111827; font-size: .82rem; }
.admin-report-filter-line { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin: .7rem 0; color: #4b5563; font-size: .68rem; }
.admin-report-print-table { width: 100%; border-collapse: collapse; color: #111827; font-size: .68rem; }
.admin-report-print-table thead { display: table-header-group; }
.admin-report-print-table th, .admin-report-print-table td { padding: .38rem .42rem; border: 1px solid #9ca3af; text-align: left; vertical-align: top; }
.admin-report-print-table th { color: #111827; background: #e5e7eb; font-size: .62rem; text-transform: uppercase; letter-spacing: .025em; }
.admin-report-print-table tr { break-inside: avoid; page-break-inside: avoid; }
.admin-report-print-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding-top: .5rem; color: #6b7280; border-top: 1px solid #d1d5db; font-size: .6rem; }

@media (max-width: 980px) {
    .report-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-column-grid, .report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .report-center-header, .report-builder-header, .report-preview-header { align-items: stretch; flex-direction: column; }
    .report-export-actions, .report-export-actions .btn { width: 100%; }
    .report-card-grid, .saved-report-list, .report-column-grid, .report-filter-grid { grid-template-columns: 1fr; }
    .report-config-card { grid-template-columns: 1fr; }
    .report-config-number { width: 1.8rem; height: 1.8rem; }
    .report-config-heading { align-items: flex-start; flex-direction: column; }
    .report-save-form { align-items: stretch; flex-direction: column; }
    .report-save-form input, .report-save-form .btn { width: 100%; }
}

@page adminReportPortrait { size: A4 portrait; margin: 10mm; }
@page adminReportLandscape { size: A4 landscape; margin: 9mm; }
@media print {
    html:has(.admin-report-print-page), body:has(.admin-report-print-page) { width: auto !important; min-height: 0 !important; height: auto !important; background: #fff !important; overflow: visible !important; }
    body:has(.admin-report-print-page) .app-main { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .admin-report-print-page { width: auto; margin: 0; page: adminReportPortrait; }
    .admin-report-print-page--wide { page: adminReportLandscape; }
    .admin-report-print-sheet { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .admin-report-print-header { padding-bottom: 3mm; }
    .admin-report-print-header h1 { font-size: 14pt; }
    .admin-report-print-table { font-size: 7pt; }
    .admin-report-print-page--wide .admin-report-print-table { font-size: 6.2pt; }
    .admin-report-print-table th, .admin-report-print-table td { padding: 1.4mm 1.6mm; }
    .admin-report-print-footer { margin-top: 4mm; }
}

/* ── QR Grid ───────────────────────────────────────────── */
.qr-grid { display: flex; flex-direction: column; gap: .5rem; }
.qr-card { display: flex; align-items: center; justify-content: space-between; padding: .85rem; background: var(--bg-card); border-radius: var(--radius-sm); }
.qr-card-info { display: flex; align-items: center; gap: .5rem; }
.qr-card-code { font-size: .75rem; color: var(--text-muted); }
.qr-bulk-form { display: flex; flex-direction: column; gap: 1rem; }
.qr-bulk-controls { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.qr-size-control { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .85rem; font-weight: 600; }
.qr-size-control .input-field { width: 90px; flex: 0 0 auto; }
.qr-bulk-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.qr-item-check { width: 20px; height: 20px; accent-color: var(--primary); flex-shrink: 0; }
.qr-print-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.qr-label-sheet { display: flex; flex-wrap: wrap; gap: .18cm; align-items: flex-start; align-content: flex-start; }
.qr-label { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .08cm; padding: .1cm; background: #fff; color: #111827; border: 1px dashed #cbd5e1; break-inside: avoid; page-break-inside: avoid; }
.qr-label-code { object-fit: contain; display: block; }
.qr-label-text { width: 100%; text-align: center; line-height: 1.15; }
.qr-label-text strong { display: block; font-size: 8pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media print {
    @page { margin: 8mm; }
    body { background: #fff; color: #111827; }
    .app-header, .bottom-nav, .flash-container, .qr-print-toolbar, .qr-print-note { display: none !important; }
    .app-main { max-width: none; padding: 0; min-height: auto; }
    .qr-print-page { display: block; }
    .qr-label-sheet { gap: .15cm; }
}

/* ── Inventory ───────────────────────────────────────── */
.inventory-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.25rem; }
.inventory-panel h2 { font-size: 1.1rem; color: var(--text-heading); margin-bottom: .35rem; }
.inventory-start-form { display: flex; gap: .75rem; margin-top: 1rem; align-items: center; flex-wrap: wrap; }
.inventory-start-form .filter-select { flex: 1 1 240px; }
.inventory-list { display: flex; flex-direction: column; gap: .5rem; }
.inventory-row { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; padding: .85rem; background: var(--bg-card); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.inventory-row strong { display: block; color: var(--text-heading); }
.inventory-row span:not(.badge):not(.material-icons-round) { display: block; color: var(--text-muted); font-size: .8rem; }
.inventory-row-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.inventory-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.inventory-message { padding: .85rem 1rem; border-radius: var(--radius-sm); font-weight: 700; }
.inventory-message--success { background: var(--success-bg); color: var(--success); }
.inventory-message--error { background: var(--error-bg); color: var(--error); }
.inventory-scanner { max-width: 360px; }

/* ── Výkazy, docházka a profil ─────────────────────────────── */
[hidden] { display: none !important; }
.cancel-vacation-form { display: none; }
.header-profile-summary { display: flex; align-items: center; gap: .4rem; color: var(--text); }
.header-profile-summary > .material-icons-round { color: var(--primary); }
.header-user-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.header-user-copy .user-name { font-weight: 800; }
.header-user-copy small { color: var(--text-muted); font-size: .62rem; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-help, .header-notification, .header-settings, .theme-toggle { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; transition: .2s; }
.header-help:hover, .header-notification:hover, .header-settings:hover, .theme-toggle:hover { background: var(--primary-glow); color: var(--primary); }
.header-notification b { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--error); color: #fff; font-size: .55rem; border: 2px solid var(--bg); }
.header-vacation-alert:has(b) { color: #f59e0b; background: rgba(245,158,11,.14); }
.header-vacation-alert:has(b):hover { color: #d97706; background: rgba(245,158,11,.22); }
.theme-toggle { border: 1px solid transparent; }
[data-theme="light"] .theme-toggle { background: #F1F5F9; border-color: #E2E8F0; color: #2563EB; }
.eyebrow { display: block; color: var(--primary); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .25rem; }
.attendance-page, .profile-page { display: flex; flex-direction: column; gap: 1rem; }
.attendance-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.attendance-heading h1 { font-size: clamp(1.55rem, 3vw, 2.2rem); color: var(--text-heading); line-height: 1.1; }
.attendance-heading p { color: var(--text-muted); font-size: .88rem; margin-top: .35rem; }
.attendance-intro-mobile, .mobile-attendance-step, .mobile-step-number { display: none; }
.attendance-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .8fr); gap: 1rem; align-items: start; }
.attendance-layout > .absence-actions-card { grid-column: 1 / -1; }
.attendance-side { position: relative; min-height: 640px; overflow: hidden; }
.attendance-side-default { display: flex; flex-direction: column; gap: 1rem; transition: opacity .22s ease, transform .28s ease; }
.attendance-side-default--hidden { opacity: 0; transform: translateX(-18px); pointer-events: none; }
.attendance-card, .profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.15rem; box-shadow: 0 8px 30px rgba(15, 23, 42, .05); }
.attendance-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.attendance-card-header h2, .profile-card h2 { color: var(--text-heading); font-size: 1.15rem; }
.attendance-calendar-card > .attendance-card-header { align-items: center; }
.calendar-card-heading { min-width: 0; }
.calendar-month-navigation { display: flex; align-items: center; gap: .55rem; }
.calendar-month-navigation h2 { min-width: 9.5rem; text-align: center; }
.card-header-icon { color: var(--primary); background: var(--primary-glow); padding: .5rem; border-radius: 12px; }
.status-pill { padding: .35rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.status-pill--draft { color: #b45309; background: #fef3c7; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0 .75rem; }
.calendar-arrow { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text-muted); cursor: pointer; }
.calendar-arrow:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-glow); }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.calendar-weekdays span { text-align: center; color: var(--text-muted); font-size: .7rem; font-weight: 700; padding: .35rem 0; }
.calendar-carousel { overflow: hidden; touch-action: pan-y; }
.calendar-days { transition: transform .2s ease, opacity .18s ease; }
.calendar-carousel--out-next .calendar-days { transform: translateX(-24%); opacity: 0; }
.calendar-carousel--out-prev .calendar-days { transform: translateX(24%); opacity: 0; }
.calendar-carousel--in-next .calendar-days { transform: translateX(24%); opacity: 0; transition: none; }
.calendar-carousel--in-prev .calendar-days { transform: translateX(-24%); opacity: 0; transition: none; }
.calendar-day { position: relative; min-height: 60px; padding: .45rem; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-family: inherit; cursor: pointer; transition: .18s; }
.calendar-day:hover { border-color: var(--primary); transform: translateY(-1px); }
.calendar-day span { font-weight: 700; }
.calendar-day small { display: block; margin-top: .5rem; color: var(--success); font-size: .58rem; }
.calendar-day--complete { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .2); }
.calendar-day--weekend { background: rgba(148, 163, 184, .12); color: var(--text-muted); }
.calendar-day--holiday { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); color: #fca5a5; }
.calendar-day--holiday small { color: #f87171; }
.calendar-day--today { border-color: #94a3b8; border-style: dashed; background: rgba(148, 163, 184, .1); color: var(--text-heading); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18); }
.calendar-day--today small { color: var(--text-muted); font-weight: 800; }
.calendar-day--empty { border-color: transparent; background: transparent; pointer-events: none; }
.calendar-day--selected { background: rgba(59, 130, 246, .24); border-color: #60a5fa; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .5); color: var(--text-heading); }
.calendar-day--selected small { color: #93c5fd; }
.calendar-day--pending { background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .7); color: var(--text-heading); }
.calendar-day--pending small { color: #f59e0b; }
.calendar-day--approved { background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .65); color: var(--text-heading); }
.calendar-day--approved small { color: var(--success); }
[data-theme="light"] .calendar-day { background: #FFFFFF; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
[data-theme="light"] .calendar-day--today { background: #F8FAFC; border-color: #64748B; box-shadow: inset 0 0 0 1px rgba(100,116,139,.12); color: #334155; }
[data-theme="light"] .calendar-day--today small { color: #64748B; }
[data-theme="light"] .calendar-day--complete { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
[data-theme="light"] .calendar-day--weekend { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .calendar-day--holiday { background: #FEE2E2; border-color: #FECACA; color: #B91C1C; }
[data-theme="light"] .calendar-day--holiday small { color: #B91C1C; }
[data-theme="light"] .calendar-day--selected { background: #EFF6FF; border-color: #2563EB; box-shadow: inset 0 0 0 1px rgba(37,99,235,.35); color: #1D4ED8; }
[data-theme="light"] .calendar-day--selected small { color: #1D4ED8; }
[data-theme="light"] .calendar-day--pending { background: #FEF3C7; border-color: #F59E0B; color: #B45309; }
[data-theme="light"] .calendar-day--pending small { color: #B45309; }
[data-theme="light"] .calendar-day--approved { background: #DCFCE7; border-color: #86EFAC; color: #15803D; }
[data-theme="light"] .calendar-day--approved small { color: #15803D; }
.calendar-position-mark { position: absolute; top: 7px; right: 7px; width: 7px; height: 18px; border-radius: 4px; background: #f59e0b; }
.calendar-footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.calendar-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; color: var(--text-muted); font-size: .7rem; }
.calendar-legend span, .work-pattern-legend span { display: flex; align-items: center; gap: .35rem; }
.calendar-edit-hint { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; margin-top: .85rem; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(59,130,246,.08); color: var(--text); }
.calendar-edit-hint > .material-icons-round { color: var(--primary); }
.calendar-edit-hint strong { display: block; font-size: .82rem; }
.calendar-edit-hint p { margin: .1rem 0 0; color: var(--text-muted); font-size: .74rem; }
.calendar-edit-hint .btn:disabled { border-color: var(--border); background: var(--bg); color: var(--text-muted); cursor: not-allowed; opacity: .52; box-shadow: none; }
.calendar-edit-hint .btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.legend-dot--complete { background: var(--success); }
.legend-dot--today { background: #64748b; }
.legend-dot--weekend { background: #94a3b8; }
.legend-dot--holiday { background: #ef4444; }
.legend-dot--selected { background: #60a5fa; }
.legend-dot--pending { background: #f59e0b; }
.legend-dot--direct { background: #2563eb; }
.legend-dot--indirect { background: #8b5cf6; }
.legend-dot--break { background: #f59e0b; }
.attendance-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1rem; }
.attendance-stats div { padding: .75rem; background: var(--bg); border-radius: 10px; }
.attendance-stats span { display: block; color: var(--text-muted); font-size: .65rem; }
.attendance-stats strong { display: block; color: var(--text-heading); margin-top: .2rem; }
.position-month-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; margin-top: .65rem; }
.position-month-stats article { display: flex; justify-content: space-between; gap: .7rem; align-items: center; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--bg); }
.position-month-stats strong { color: var(--text-heading); font-size: .78rem; }
.position-month-stats span { color: var(--text-muted); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.attendance-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: .65rem; margin-top: .75rem; }
.calendar-selection { display: flex; align-items: center; gap: .4rem; padding: .45rem .65rem; background: var(--primary-glow); color: var(--primary); border-radius: 9px; font-size: .7rem; }
.calendar-selection > .material-icons-round { font-size: 1rem !important; }
.calendar-selection button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.calendar-selection--warning { background: var(--warning-bg); color: var(--warning); animation: selectionPulse .35s ease 2; }
@keyframes selectionPulse { 50% { transform: scale(1.02); } }
.absence-actions-card { padding: .9rem 1rem 1rem; }
.absence-actions-heading { margin-bottom: .7rem; }
.absence-actions-heading h2 { color: var(--text-heading); font-size: 1.05rem; }
.absence-actions-heading p { margin-top: .18rem; color: var(--text-muted); font-size: .7rem; }
.absence-action-groups { display: grid; gap: .75rem; }
.absence-action-group { display: grid; gap: .42rem; }
.absence-action-group h3 { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--text-muted); font-size: .64rem; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.absence-action-group h3 .material-icons-round { color: var(--primary); font-size: 1rem !important; }
.absence-action-grid { display: grid; gap: .6rem; }
.absence-action-grid--time-off { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.absence-action-grid--health { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.absence-action-grid .balance-card { min-width: 0; }
.request-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.balance-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 86px; padding: .7rem .75rem; appearance: none; border: 1px solid transparent; border-radius: 12px; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 7px rgba(15,23,42,.06); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease; }
.balance-card--vacation { background: linear-gradient(145deg, #ecfdf5, #d1fae5); color: #065f46; }
.balance-card--unpaid { background: linear-gradient(145deg, #f8fafc, #e2e8f0); color: #334155; }
.balance-card--study { background: linear-gradient(145deg, #eff6ff, #dbeafe); color: #1e40af; }
.balance-card--training { background: linear-gradient(145deg, #f5f3ff, #ede9fe); color: #6d28d9; }
.balance-card--care { background: linear-gradient(145deg, #fff7ed, #ffedd5); color: #c2410c; }
.balance-card--sick { background: linear-gradient(145deg, #fef2f2, #fee2e2); color: #b91c1c; }
.balance-card--doctor { background: linear-gradient(145deg, #ecfeff, #cffafe); color: #0e7490; }
.balance-card--obstacle { background: linear-gradient(145deg, #fff7ed, #fed7aa); color: #9a3412; }
.balance-card__icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 10px; background: rgba(255,255,255,.58); font-size: 1.2rem !important; }
.balance-card__content, .balance-card__title, .balance-card__description, .balance-card strong { display: block; min-width: 0; }
.balance-card__title { font-size: .72rem; font-weight: 850; }
.balance-card strong { margin-top: .08rem; font-size: .9rem; line-height: 1.2; }
.balance-card em { display: inline-block; margin-left: .2rem; font-size: .66rem; font-style: normal; font-weight: 800; }
.balance-card__description { margin-top: .16rem; font-size: .62rem; line-height: 1.25; opacity: .78; }
.balance-card__arrow { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: rgba(255,255,255,.6); font-size: 1rem !important; transition: transform .18s ease, background .18s ease; }
.balance-card:hover { border-color: currentColor; filter: saturate(1.05); box-shadow: 0 7px 16px rgba(15,23,42,.12); transform: translateY(-2px); }
.balance-card:hover .balance-card__arrow { background: rgba(255,255,255,.9); transform: translateX(2px); }
.balance-card:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; border-color: currentColor; }
.balance-card:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .55; box-shadow: none; transform: none; }
.empty-compact { display: flex; gap: .65rem; align-items: center; margin-top: .75rem; padding: .75rem; border: 1px dashed var(--border); border-radius: 10px; }
.empty-compact > span { color: var(--success); }
.empty-compact strong { font-size: .78rem; }
.empty-compact p { color: var(--text-muted); font-size: .68rem; margin-top: .1rem; }
.request-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .75rem; }
.request-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; padding: .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.request-row > .material-icons-round { color: #f59e0b; }
.request-row strong, .request-row small { display: block; }
.request-row strong { color: var(--text-heading); font-size: .72rem; }
.request-row small { color: var(--text-muted); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.request-row p { margin: .18rem 0 0; color: var(--error); font-size: .64rem; line-height: 1.35; }
.request-row--ordered_vacation { border-color: rgba(37,99,235,.45); background: rgba(37,99,235,.09); }
.request-status { padding: .3rem .45rem; border-radius: 999px; font-size: .56rem; font-weight: 800; white-space: nowrap; }
.request-status--pending { background: #fef3c7; color: #b45309; }
.request-status--approved { background: var(--success-bg); color: var(--success); }
.request-status--recorded { background: var(--primary-glow); color: var(--primary); }
.request-cancel { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; transition: .2s; }
.request-cancel:hover { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.request-cancel .material-icons-round { font-size: 1rem !important; }
.request-row-main { min-width: 0; }
.request-cancellation-open { display: inline-flex; align-items: center; gap: .28rem; margin-top: .45rem; padding: .35rem .5rem; border: 1px solid rgba(37,99,235,.35); border-radius: 7px; background: var(--primary-glow); color: var(--primary); font: inherit; font-size: .62rem; font-weight: 800; cursor: pointer; }
.request-cancellation-open:hover { border-color: var(--primary); }
.request-cancellation-open .material-icons-round { font-size: .9rem !important; }
.request-cancellation-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem; margin-top: .4rem; padding: .38rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); }
.request-cancellation-state > .material-icons-round { font-size: .95rem !important; }
.request-cancellation-state strong { font-size: .62rem; }
.request-cancellation-state small { font-size: .58rem; white-space: normal; }
.request-cancellation-state--pending { border-color: rgba(245,158,11,.4); color: var(--warning); }
.request-cancellation-state--approved { border-color: rgba(34,197,94,.4); color: var(--success); }
.request-cancellation-state--rejected { border-color: rgba(239,68,68,.4); color: var(--error); }
.request-cancellation-withdraw { padding: .25rem .4rem; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .56rem; font-weight: 800; cursor: pointer; }
.substitution-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .75rem; }
.substitution-summary div { background: var(--bg); border-radius: 10px; padding: .75rem; text-align: center; }
.substitution-summary strong, .substitution-summary span { display: block; }
.substitution-summary strong { color: var(--text-heading); font-size: 1.35rem; }
.substitution-summary span { color: var(--text-muted); font-size: .68rem; }
.substitution-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .75rem; }
.substitution-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: .55rem; padding: .65rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.substitution-row time { color: var(--text-heading); font-size: .7rem; font-weight: 800; }
.substitution-row strong, .substitution-row small { display: block; }
.substitution-row strong { color: var(--text-heading); font-size: .7rem; }
.substitution-row small { color: var(--text-muted); font-size: .58rem; margin-top: .12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.substitution-row small b { color: var(--primary); }
.substitution-hours { padding: .3rem .45rem; border-radius: 999px; background: var(--primary-glow); color: var(--primary); font-size: .65rem; font-weight: 800; white-space: nowrap; }
.substitution-preparation-status { color: var(--success); font-size: 1.15rem !important; }
.substitution-delete { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.substitution-delete:hover { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.substitution-delete .material-icons-round { font-size: 1rem !important; }
.btn--soft { background: var(--primary-glow); color: var(--primary); border: 0; }
.attendance-tip { display: flex; gap: .75rem; background: linear-gradient(135deg, var(--primary-glow), var(--bg-card)); }
[data-theme="light"] .attendance-tip { background: linear-gradient(135deg, #EFF6FF, #FFFFFF); border-color: #BFDBFE; }
.attendance-tip > span { color: var(--primary); }
.attendance-tip strong { font-size: .8rem; }
.attendance-tip p { color: var(--text-muted); font-size: .72rem; margin-top: .15rem; line-height: 1.45; }

.vacation-drawer { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: -18px 0 40px rgba(2, 6, 23, .18); transform: translateX(105%); opacity: 0; pointer-events: none; overflow-y: auto; transition: transform .3s cubic-bezier(.22,.8,.35,1), opacity .2s ease; }
.vacation-drawer--open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.vacation-drawer:focus { outline: none; }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.drawer-header h2 { display: flex; align-items: center; gap: .45rem; color: var(--text-heading); }
.drawer-header h2 .material-icons-round { color: var(--success); }
.drawer-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--text-muted); cursor: pointer; }
.drawer-date-summary { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; padding: .9rem; border-radius: 12px; background: var(--primary-glow); }
.drawer-date-summary > .material-icons-round { color: var(--primary); }
.drawer-date-summary small, .drawer-date-summary strong, .drawer-date-summary p { display: block; }
.drawer-date-summary small { color: var(--text-muted); font-size: .65rem; }
.drawer-date-summary strong { color: var(--text-heading); margin-top: .1rem; }
.drawer-date-summary p { color: var(--text-muted); font-size: .68rem; margin-top: .15rem; }
.vacation-request-form { display: flex; flex-direction: column; flex: 1; }
.vacation-request-form > input[type="hidden"] { display: none; }
.drawer-dynamic-fields { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .85rem; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.drawer-dynamic-fields label > span { display: block; margin-bottom: .3rem; color: var(--text-muted); font-size: .65rem; font-weight: 700; }
.drawer-dynamic-fields input, .drawer-dynamic-fields textarea, .drawer-dynamic-fields select { width: 100%; padding: .58rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font: inherit; font-size: .72rem; outline: none; }
.drawer-dynamic-fields input:focus, .drawer-dynamic-fields textarea:focus, .drawer-dynamic-fields select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.drawer-dynamic-fields textarea { min-height: 90px; resize: vertical; }
.substitution-user-field { position: relative; z-index: 4; }
.substitution-user-field > label { display: block; margin-bottom: .3rem; color: var(--text-muted); font-size: .65rem; font-weight: 700; }
.substitution-user-combobox { position: relative; }
.substitution-user-native-select { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.substitution-user-options { position: absolute; z-index: 30; top: calc(100% + .35rem); right: 0; left: 0; max-height: 250px; overflow-y: auto; padding: .35rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); box-shadow: 0 14px 36px rgba(15, 23, 42, .18); }
.substitution-user-option { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .58rem .62rem; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.substitution-user-option:hover, .substitution-user-option.is-active { background: var(--primary-glow); color: var(--primary); }
.substitution-user-option .material-icons-round { flex: 0 0 auto; font-size: 1.05rem; }
.substitution-user-option strong { font-size: .72rem; font-weight: 700; }
.substitution-user-options__empty { margin: 0; padding: .7rem .6rem; color: var(--text-muted); font-size: .68rem; text-align: center; }
.substitution-user-field .field-hint { display: block; margin-top: .3rem; color: var(--text-muted); font-size: .6rem; line-height: 1.4; }
.substitution-field-hint { display: block; margin-top: .3rem; color: var(--text-muted); font-size: .6rem; line-height: 1.4; }
.drawer-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.drawer-check-option { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); cursor: pointer; }
.drawer-check-option input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: .05rem; accent-color: var(--primary); }
.drawer-check-option strong, .drawer-check-option small { display: block; }
.drawer-check-option strong { color: var(--text-heading); font-size: .74rem; }
.drawer-check-option small { color: var(--text-muted); font-size: .64rem; line-height: 1.45; margin-top: .12rem; }
.drawer-field-title { color: var(--text-heading); font-size: .72rem; font-weight: 800; }
.substitution-fields { margin-top: 1rem; }
.substitution-preparation { display: flex; align-items: center; gap: .6rem; padding: .7rem; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.substitution-preparation input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--primary); }
.substitution-preparation > span { margin: 0 !important; color: var(--text-heading) !important; font-size: .72rem !important; }
.health-mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.health-mode-option, .day-mode-option { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: .55rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); color: var(--text-muted); font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }
.health-mode-option .material-icons-round, .day-mode-option .material-icons-round { font-size: 1.05rem !important; }
.health-mode-option--active, .day-mode-option--active { border-color: var(--primary); background: var(--primary-glow); color: var(--primary); }
.drawer-section { border: 0; padding: 0; margin: 0; }
.drawer-section legend { color: var(--text-heading); font-size: .75rem; font-weight: 800; margin-bottom: .55rem; }
.drawer-section-hint { color: var(--text-muted); font-size: .68rem; line-height: 1.45; margin-bottom: .55rem; }
.drawer-request-summary { margin-top: .65rem; padding: .65rem .75rem; border: 1px solid rgba(59,130,246,.3); border-radius: .65rem; background: rgba(59,130,246,.1); color: var(--text); font-size: .78rem; line-height: 1.4; }
.drawer-request-summary--warning { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.12); }
.scope-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .3rem; border-radius: 11px; background: var(--bg); }
.scope-option { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: .55rem; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-muted); font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; }
.scope-option .material-icons-round { font-size: 1.05rem !important; }
.scope-option--active { background: var(--bg-card); border-color: var(--primary); color: var(--primary); box-shadow: 0 3px 10px rgba(2, 6, 23, .08); }
.drawer-positions { display: flex; flex-direction: column; gap: .4rem; margin-top: .65rem; }
.drawer-positions label { display: flex; align-items: center; gap: .6rem; padding: .65rem; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.drawer-positions input { width: 18px; height: 18px; accent-color: var(--primary); }
.drawer-positions strong, .drawer-positions small { display: block; }
.drawer-positions strong { color: var(--text-heading); font-size: .72rem; }
.drawer-positions small { color: var(--text-muted); font-size: .62rem; margin-top: .1rem; }
.drawer-balance { display: flex; align-items: center; gap: .65rem; margin-top: 1rem; padding: .8rem; border-radius: 10px; background: rgba(16, 185, 129, .1); color: var(--success); }
.drawer-balance p { color: var(--text-muted); font-size: .72rem; line-height: 1.5; }
.drawer-balance strong { color: var(--text-heading); }
.drawer-message { margin-top: .7rem; padding: .65rem; border-radius: 8px; background: var(--error-bg); color: var(--error); font-size: .72rem; }
.drawer-actions { display: grid; gap: .55rem; margin-top: 1rem; }
.drawer-submit { min-height: 48px; justify-content: center; font-weight: 800; }
.drawer-submit.is-loading { opacity: .65; cursor: wait; }

.day-editor-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; background: rgba(2, 6, 23, .72); backdrop-filter: blur(5px); }
.day-editor-modal { width: min(620px, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); }
.vacation-cancellation-form { display: flex; flex-direction: column; gap: .85rem; margin-top: 1rem; }
.vacation-cancellation-form > input[type="hidden"] { display: none; }
.vacation-cancellation-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .45rem; }
.vacation-cancellation-days label { display: flex; align-items: center; gap: .5rem; padding: .65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text-heading); font-size: .72rem; font-weight: 750; cursor: pointer; }
.vacation-cancellation-days input { width: 18px; height: 18px; accent-color: var(--primary); }
.vacation-cancellation-reason span { display: block; margin-bottom: .35rem; color: var(--text-heading); font-size: .72rem; font-weight: 800; }
.vacation-cancellation-reason textarea { width: 100%; min-height: 100px; padding: .7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.vacation-cancellation-reason textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-glow); }
.cancellation-queue-heading { display: flex; align-items: center; gap: .55rem; margin: 1.15rem 0 .55rem; color: var(--text-heading); }
.cancellation-queue-heading .material-icons-round { color: var(--warning); }
.cancellation-days-list { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .3rem; }
.cancellation-days-list span { padding: .18rem .35rem; border-radius: 5px; background: var(--warning-bg); color: var(--warning); font-size: .66rem; font-weight: 750; }
.cancellation-reason { display: block; margin-top: .3rem; color: var(--text-muted); font-size: .7rem; line-height: 1.4; }
.day-editor-absence { display: flex; gap: .55rem; align-items: center; margin: .8rem 0; padding: .7rem; border-radius: 9px; background: var(--warning-bg); color: var(--warning); font-size: .7rem; }
.day-editor-source { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .75rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--bg); color: var(--text-muted); font-size: .78rem; }
.day-editor-source p { margin: 0; }
.day-editor-source .material-icons-round { color: var(--primary); font-size: 1.15rem !important; }
.day-editor-source--manual { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.1); color: var(--text); }
.day-editor-source--auto, .day-editor-source--import { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); color: var(--text); }
.day-position-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .45rem; margin: .85rem 0; }
.day-position-tab { padding: .65rem; text-align: left; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; cursor: pointer; }
.day-position-tab strong, .day-position-tab small { display: block; }
.day-position-tab strong { color: var(--text-heading); font-size: .72rem; }
.day-position-tab small { color: var(--text-muted); font-size: .6rem; margin-top: .15rem; }
.day-position-tab--active { border-color: var(--primary); background: var(--primary-glow); }
.day-editor-loading { color: var(--text-muted); font-size: .75rem; }
.day-editor-form > input[type="hidden"] { display: none; }
.day-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.day-time-grid label span { display: block; margin-bottom: .3rem; color: var(--text-muted); font-size: .65rem; font-weight: 700; }
.day-time-grid input { width: 100%; padding: .65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; }
.day-editor-total { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; padding: .75rem; border-radius: 9px; background: var(--primary-glow); }
.day-editor-total span { color: var(--text-muted); font-size: .7rem; }
.day-editor-total strong { color: var(--primary); }

.profile-note { display: flex; align-items: flex-start; gap: .6rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: var(--primary-glow); color: var(--primary); font-size: .8rem; }
.profile-note--direct-activity { background: color-mix(in srgb, var(--success) 10%, var(--bg-card)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border)); }
.position-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .65rem; }
.position-tab { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); transition: .2s; }
.position-tab:hover { border-color: var(--primary); transform: translateY(-1px); }
.position-tab > .material-icons-round { color: var(--text-muted); background: var(--bg); padding: .5rem; border-radius: 10px; }
.position-tab strong, .position-tab small { display: block; }
.position-tab strong { color: var(--text-heading); font-size: .82rem; }
.position-tab small { color: var(--text-muted); font-size: .67rem; margin-top: .15rem; }
.position-tab--active { border-color: var(--primary); background: var(--primary-glow); box-shadow: inset 0 0 0 1px var(--primary); }
.position-tab--active > .material-icons-round { color: #fff; background: var(--primary); }
.profile-empty-position { text-align: center; padding: 3rem 1rem; }
.profile-empty-position > .material-icons-round { color: var(--text-muted); font-size: 3rem; opacity: .6; }
.profile-empty-position p { color: var(--text-muted); font-size: .82rem; margin-top: .4rem; }
.work-pattern-form { display: flex; flex-direction: column; gap: 1rem; }
.form-error-panel { display: grid; gap: .25rem; padding: .85rem 1rem; border: 1px solid rgba(239,68,68,.45); border-radius: var(--radius-sm); background: var(--error-bg); color: var(--error); font-size: .82rem; font-weight: 700; }
.form-error-panel p { margin: 0; }
.profile-basics { display: grid; grid-template-columns: 1fr minmax(220px, .65fr); gap: 1rem; align-items: end; }
.profile-basics p, .work-pattern-heading p { color: var(--text-muted); font-size: .78rem; margin-top: .2rem; }
.profile-card label > span { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 700; margin-bottom: .3rem; }
.profile-input, .time-pair input { width: 100%; min-width: 0; padding: .6rem .65rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 9px; font: inherit; outline: 0; }
.profile-input:focus, .time-pair input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.work-pattern-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.work-pattern-heading > div:first-child { max-width: 680px; }
.work-pattern-help { margin-top: .35rem !important; }
.work-pattern-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; min-width: 210px; }
.work-pattern-meta label { width: 100%; }
.work-pattern-legend { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; color: var(--text-muted); font-size: .68rem; }
.week-pattern-tabs { display: inline-flex; gap: .35rem; margin: 0 0 1rem; padding: .3rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.week-pattern-tab { display: flex; align-items: center; gap: .45rem; padding: .65rem 1rem; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); font-weight: 800; cursor: pointer; }
.week-pattern-tab small { padding: .15rem .4rem; border-radius: 999px; background: rgba(59,130,246,.14); color: var(--primary-light); font-size: .62rem; }
.week-pattern-tab--active { background: var(--primary); color: #fff; }
.week-pattern-tab--active small { background: rgba(255,255,255,.18); color: #fff; }
.week-pattern-panel[hidden] { display: none; }
.week-pattern-panel-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin: 0 0 .65rem; }
.week-pattern-panel-heading h3 { margin: 0; }
.week-pattern-panel-heading p { margin: 0; color: var(--text-muted); font-size: .75rem; }
.work-pattern-table { display: flex; flex-direction: column; gap: .4rem; overflow-x: auto; }
.work-pattern-row { min-width: 1080px; display: grid; grid-template-columns: 110px repeat(5, minmax(145px, 1fr)) 110px; gap: .5rem; align-items: center; padding: .55rem; border: 1px solid var(--border); border-radius: 10px; }
.work-pattern-row--split { min-width: 1220px; grid-template-columns: 110px repeat(6, minmax(135px, 1fr)) 110px; }
.work-pattern-row--header { border: 0; padding-top: 0; padding-bottom: .2rem; color: var(--text-muted); font-size: .68rem; font-weight: 700; text-align: center; }
.work-pattern-row--header span:first-child { text-align: left; }
.day-toggle { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
.day-toggle input { accent-color: var(--primary); width: 18px; height: 18px; }
.day-toggle span { margin: 0 !important; color: var(--text-heading) !important; font-size: .78rem !important; }
.time-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .25rem; padding: .25rem; border-radius: 9px; }
.time-pair:has(.time-pair-clear) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 1.45rem; }
.time-pair b { color: var(--text-muted); font-weight: 400; }
.time-pair--direct { background: rgba(37, 99, 235, .07); }
.time-pair--indirect { background: rgba(139, 92, 246, .07); }
.time-pair--break { background: rgba(245, 158, 11, .08); }
.time-pair input { padding: .48rem .25rem; font-size: .72rem; text-align: center; }
.time-pair-clear { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; padding: 0; border: 0; border-radius: 50%; background: rgba(245,158,11,.16); color: var(--warning); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.time-pair-clear:hover { background: var(--warning); color: #111827; transform: scale(1.08); }
.time-pair-clear:focus-visible { outline: 2px solid var(--warning); outline-offset: 2px; }
.time-pair-clear .material-icons-round { font-size: .95rem; }
.workday-total { display: block; padding: .65rem .4rem; border-radius: 9px; background: var(--success-bg); color: var(--success); font-size: .76rem; font-weight: 800; text-align: center; white-space: nowrap; }
.work-pattern-row:not(.work-pattern-row--header):has(.day-toggle input:not(:checked)) .workday-total { background: var(--bg); color: var(--text-muted); }
.work-pattern-summary { display: flex; align-items: flex-start; gap: .7rem; margin-top: .85rem; padding: .85rem 1rem; border: 1px solid rgba(34,197,94,.35); border-radius: var(--radius-sm); background: rgba(34,197,94,.12); color: #bbf7d0; }
.work-pattern-summary > .material-icons-round { color: #22c55e; }
.work-pattern-summary strong { color: inherit; }
.work-pattern-summary p { margin: .2rem 0 0; color: inherit; font-size: .78rem; opacity: .9; }
.work-pattern-summary--error { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.13); color: #fecaca; }
.work-pattern-summary--error > .material-icons-round { color: #ef4444; }
[data-theme="light"] .work-pattern-summary { background: #DCFCE7; border-color: #86EFAC; color: #166534; }
[data-theme="light"] .work-pattern-summary--error { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }

/* ── Náhled a tisk měsíčního výkazu ──────────────────────── */
.report-preview-page { display: flex; flex-direction: column; gap: 1.25rem; }
.report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.report-position-switch { display: flex; gap: .55rem; flex: 1; justify-content: center; }
.report-position-switch .position-tab { max-width: 260px; }
.print-sheet { width: 100%; padding: 1rem; background: #fff; color: #111827; border-radius: 10px; box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.report-title { display: flex; align-items: baseline; gap: .65rem; padding-bottom: .45rem; border-bottom: 2px solid #111827; }
.report-title h1 { color: #111827; font-size: 1.35rem; }
.report-title p { color: #374151; font-size: .7rem; }
.report-title--small h1 { font-size: 1.1rem; }
.report-identification { display: grid; grid-template-columns: 1.4fr 1fr .8fr; border: 1px solid #111827; border-top: 0; }
.report-identification div { padding: .42rem .55rem; border-right: 1px solid #111827; }
.report-identification div:last-child { border-right: 0; }
.report-identification span, .report-identification strong { display: block; }
.report-identification span { color: #4b5563; font-size: .58rem; }
.report-identification strong { margin-top: .12rem; font-size: .72rem; }
.work-report-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #111827; }
.work-report-table th, .work-report-table td { padding: .2rem .25rem; border: 1px solid #111827; text-align: center; vertical-align: middle; font-size: .61rem; line-height: 1.15; }
.work-report-table th { background: #f3f4f6; font-weight: 800; }
.work-report-table--daily { margin-top: .55rem; }
.work-report-table--daily th, .work-report-table--daily td { height: 23px; padding: .12rem .15rem; font-size: .51rem; }
.work-report-table--daily td small { display: block; color: #b91c1c; font-size: .42rem; }
.work-report-table tfoot th { background: #e5e7eb; }
.work-report-table .c-date { width: 5.5%; }
.work-report-table .c-time { width: 5%; }
.work-report-table .c-hours { width: 6%; }
.work-report-table .c-note { width: 7.5%; }
.work-report-table .c-small { width: 6%; }
.report-nonworking td { background: #e5e7eb; color: #6b7280; }
.report-holiday td { background: #fee2e2; color: #991b1b; }
.report-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .55rem; }
.report-summary-card { min-height: 68px; padding: .45rem .55rem; border: 1px solid #111827; }
.report-summary-card h2, .report-substitutions h2, .report-explanations h2 { color: #111827; font-size: .72rem; margin-bottom: .3rem; }
.report-summary-card p { font-size: .59rem; line-height: 1.35; }
.report-study-description { display: block; margin-top: .12rem; color: #374151; }
.report-balance { margin-top: .25rem; padding-top: .25rem; border-top: 1px dotted #9ca3af; }
.report-empty { color: #6b7280; font-style: italic; }
.report-substitutions { margin-top: .55rem; }
.report-substitutions .work-report-table th, .report-substitutions .work-report-table td { font-size: .58rem; padding: .2rem; }
.report-explanations { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .16rem .4rem; margin-top: .55rem; padding: .45rem .55rem; border: 1px solid #111827; }
.report-explanations h2 { grid-column: 1 / -1; }
.report-explanations div { display: contents; }
.report-explanations strong, .report-explanations span { font-size: .56rem; }
.report-signatures { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-top: .7rem; }
.report-signatures div { height: 35px; display: flex; align-items: flex-end; border-bottom: 1px solid #111827; }
.report-signatures span { font-size: .58rem; }

@page {
    size: A4 landscape;
    margin: 6mm;
}
@media print {
    html, body { width: 297mm; min-height: 210mm; background: #fff !important; }
    * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .app-header, .bottom-nav, .no-print, .flash, #it-support-fab, #it-support-panel { display: none !important; }
    .app-main { max-width: none !important; margin: 0 !important; padding: 0 !important; }
    .report-preview-page { display: block; }
    .print-sheet {
        width: 285mm;
        height: 198mm;
        margin: 0;
        padding: 3mm;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        break-after: page;
        page-break-after: always;
    }
    .print-sheet:last-child { break-after: auto; page-break-after: auto; }
    .work-report-table--daily th, .work-report-table--daily td { height: 4.35mm; }
}
.profile-form-footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.profile-form-footer p { display: flex; align-items: center; gap: .35rem; color: var(--text-muted); font-size: .75rem; }
.profile-form-footer p span { color: var(--primary); }
.profile-save-button { min-width: 230px; min-height: 48px; padding: .8rem 1.25rem; justify-content: center; font-size: .9rem; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 20px var(--primary-glow); }
.profile-save-button .material-icons-round { font-size: 1.2rem !important; }

@media (min-width: 1000px) {
    .app-main:has(.attendance-page), .app-main:has(.profile-page), .app-main:has(.report-preview-page) { max-width: 1320px; }
}
@media (max-width: 900px) {
    .attendance-layout { grid-template-columns: 1fr; }
    .attendance-side { min-height: 580px; }
    .absence-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-basics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .header-user-copy small { display: none; }
    .header-profile-summary .user-name { display: none; }
    .attendance-intro-desktop { display: none; }
    .attendance-intro-mobile { display: block; }
    .attendance-calendar-card { order: 1; scroll-margin-top: 4.5rem; }
    .absence-actions-card { order: 2; scroll-margin-top: 4.5rem; }
    .attendance-side { order: 3; min-height: 0; overflow: visible; scroll-margin-top: 4.5rem; }
    .mobile-attendance-step { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
    .mobile-attendance-step > span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8rem; font-weight: 900; }
    .mobile-attendance-step strong, .mobile-attendance-step small { display: block; }
    .mobile-attendance-step strong { color: var(--text-heading); font-size: .85rem; }
    .mobile-attendance-step small { margin-top: .08rem; color: var(--text-muted); font-size: .68rem; }
    .mobile-step-number { display: inline; }
    .attendance-card, .profile-card { padding: .85rem; }
    .attendance-calendar-card > .attendance-card-header { align-items: flex-start; }
    .calendar-month-navigation h2 { min-width: 0; font-size: 1rem; }
    .calendar-edit-hint { grid-template-columns: auto 1fr; }
    .calendar-edit-hint .btn { grid-column: 1 / -1; width: 100%; }
    .calendar-day { min-height: 48px; padding: .35rem; }
    .calendar-day small { display: none; }
    .attendance-stats { grid-template-columns: 1fr 1fr; }
    .attendance-actions, .request-balance-grid { grid-template-columns: 1fr; }
    .absence-actions-heading .eyebrow { display: none; }
    .absence-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .balance-card { grid-template-columns: auto minmax(0, 1fr); padding: .7rem; gap: .45rem; }
    .balance-card__icon { width: 2rem; height: 2rem; font-size: 1.1rem !important; }
    .balance-card__arrow { display: none; }
    .calendar-footer { align-items: stretch; }
    .calendar-selection { width: 100%; justify-content: center; }
    .attendance-side-default--hidden { display: none; }
    .attendance-side .vacation-drawer { position: relative; inset: auto; display: none; padding: .9rem; transform: none; opacity: 1; pointer-events: auto; overflow: visible; box-shadow: 0 10px 30px rgba(2, 6, 23, .14); transition: none; }
    .attendance-side .vacation-drawer--open { display: flex; }
    .drawer-time-grid { grid-template-columns: 1fr; }
    .profile-basics { grid-template-columns: 1fr; }
    .profile-basics { grid-template-columns: 1fr; }
    .work-pattern-meta { width: 100%; align-items: stretch; }
    .week-pattern-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .week-pattern-tab { justify-content: center; padding-inline: .65rem; }
    .week-pattern-tab small { display: none; }
    .week-pattern-panel-heading { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .work-pattern-heading, .profile-form-footer { align-items: flex-start; flex-direction: column; }
    .profile-form-footer .btn { width: 100%; }
    .work-pattern-table { gap: .75rem; overflow: visible; }
    .work-pattern-row--header { display: none; }
    .work-pattern-row:not(.work-pattern-row--header),
    .work-pattern-row--split:not(.work-pattern-row--header) { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: .65rem; padding: .8rem; }
    .day-toggle { min-height: 2.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
    .day-toggle input { width: 1.25rem; height: 1.25rem; }
    .day-toggle span { font-size: .9rem !important; }
    .time-pair,
    .time-pair:has(.time-pair-clear) { position: relative; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .45rem; padding: 1.9rem .25rem .25rem; }
    .time-pair::before { content: attr(data-label); position: absolute; top: .3rem; left: .35rem; color: var(--text-muted); font-size: .7rem; font-weight: 800; }
    .time-pair input { min-width: 0; min-height: 3rem; padding: .65rem .5rem; font-size: 1rem; text-align: left; }
    .time-pair-clear { position: absolute; top: .2rem; right: .3rem; width: 1.75rem; height: 1.75rem; }
    .workday-total { display: flex; justify-content: space-between; align-items: center; min-height: 2.75rem; padding: .65rem .75rem; text-align: right; }
    .workday-total::before { content: attr(data-label); color: var(--text-muted); font-size: .7rem; }
    .work-pattern-row:not(.work-pattern-row--header):has(.day-toggle input:not(:checked)) > :not(.day-toggle) { display: none; }
}
@media (max-width: 340px) {
    .absence-action-grid { grid-template-columns: 1fr; }
}
.inventory-action-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.inventory-report-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.inventory-report-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.inventory-report-summary > div { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .85rem; }
.inventory-report-summary strong { display: block; font-size: .75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem; }
.inventory-report-summary span { font-weight: 700; color: var(--text-heading); }
@media (max-width: 640px) {
    .inventory-row { grid-template-columns: 1fr; }
    .inventory-row-actions { justify-content: flex-start; }
    .inventory-report-summary { grid-template-columns: 1fr 1fr; }
}
@media print {
    .inventory-report-toolbar, .app-header, .bottom-nav, .flash-container { display: none !important; }
    .inventory-report-page { color: #111827; }
    .inventory-report-summary > div, .data-table th, .data-table td { color: #111827; background: #fff; }
    .inventory-print-all { page-break-before: always; }
}

/* ── Error Page ────────────────────────────────────────── */
.error-page { text-align: center; padding: 3rem 1rem; }
.error-icon { font-size: 4rem !important; color: var(--warning); }
.error-page h1 { margin: 1rem 0 .5rem; }
.error-page p { color: var(--text-muted); margin-bottom: 1.5rem; }

/* ── Responsive ────────────────────────────────────────── */
@media (min-width: 768px) {
    .app-main { padding-bottom: 2rem; }
    .bottom-nav { display: none; }
    .header-inner { max-width: 800px; }
    .app-main { max-width: 800px; }
    .action-card--attendance { order: 0; min-height: 220px; padding: 2.5rem 2rem; background: linear-gradient(135deg, #047857, #0f766e); border-color: rgba(52,211,153,.55); color: #fff; box-shadow: 0 18px 45px rgba(4,120,87,.22); }
    .action-card--attendance .action-icon { color: #fff; font-size: 4rem !important; margin-bottom: .75rem; }
    .action-card--attendance .action-title { font-size: 1.5rem; }
    .action-card--attendance .action-desc { font-size: .9rem; }
    .action-card--attendance .action-badge { top: 1rem; right: 1rem; background: rgba(255,255,255,.16); color: #fff; }
    .action-card--primary,
    .action-card--secondary:not(.action-card--admin) { min-height: 140px; justify-content: center; }
}

/* ── Řízení zaměstnanců ─────────────────────────────────── */
.header-leading { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.management-menu-toggle { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: .75rem; cursor: pointer; }
.management-menu-toggle:hover { background: rgba(255,255,255,.15); }
.management-menu-backdrop { position: fixed; inset: 0; z-index: 149; background: rgba(2,6,23,.65); backdrop-filter: blur(2px); }
.management-menu { position: fixed; z-index: 150; inset: 0 auto 0 0; width: min(23rem, 92vw); padding: 1rem; background: #0f172a; border-right: 1px solid rgba(255,255,255,.12); box-shadow: 1.5rem 0 4rem rgba(0,0,0,.35); transform: translateX(-105%); transition: transform .22s ease; }
.management-menu.is-open { transform: translateX(0); }
.management-menu > header { display: flex; align-items: center; justify-content: space-between; padding: .6rem .5rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.management-menu > header div { display: grid; gap: .2rem; }
.management-menu > header strong { color: #fff; font-size: 1.05rem; }
.management-menu > header button { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: #cbd5e1; background: transparent; border: 0; border-radius: .6rem; cursor: pointer; }
.management-menu nav { display: grid; gap: .35rem; padding-top: 1rem; }
.management-menu nav a { display: grid; grid-template-columns: 2.4rem 1fr; gap: .75rem; align-items: center; padding: .8rem; color: #e2e8f0; text-decoration: none; border-radius: .85rem; }
.management-menu nav a:hover { background: rgba(59,130,246,.14); }
.management-menu nav a.has-menu-badge { background: rgba(239,68,68,.12); box-shadow: inset 0 0 0 1px rgba(248,113,113,.22); }
.management-menu nav a.has-menu-badge:hover { background: rgba(239,68,68,.18); }
.management-menu nav a > .material-icons-round { color: #60a5fa; }
.management-menu nav a div { display: grid; gap: .12rem; }
.menu-item-title { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.menu-badge { min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; display: inline-grid; place-items: center; border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 900; line-height: 1; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.management-menu nav small { color: #94a3b8; font-size: .73rem; }
.menu-divider { margin: .8rem .8rem .2rem; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.management-menu-open { overflow: hidden; }
.management-menu-toggle { color: var(--text); background: var(--bg-card); border-color: var(--border); }
.management-menu-toggle:hover { background: var(--bg-card-hover); }
[data-theme="light"] .management-menu-backdrop { background: rgba(15,23,42,.28); }
[data-theme="light"] .management-menu { background: #FFFFFF; border-right-color: #E2E8F0; box-shadow: 1.5rem 0 4rem rgba(15,23,42,.16); }
[data-theme="light"] .management-menu > header { border-bottom-color: #E2E8F0; }
[data-theme="light"] .management-menu > header strong { color: #0F172A; }
[data-theme="light"] .management-menu > header button { color: #475569; }
[data-theme="light"] .management-menu nav a { color: #0F172A; }
[data-theme="light"] .management-menu nav a:hover { background: #EFF6FF; }
[data-theme="light"] .management-menu nav a.has-menu-badge { background: #FEF2F2; box-shadow: inset 0 0 0 1px #FCA5A5; }
[data-theme="light"] .management-menu nav a.has-menu-badge:hover { background: #FEE2E2; }
[data-theme="light"] .management-menu nav a > .material-icons-round { color: #2563EB; }
[data-theme="light"] .management-menu nav small { color: #475569; }
.notification-panel { position: fixed; z-index: 145; top: calc(var(--header-h) + .5rem); right: max(1rem, calc((100vw - 800px) / 2)); width: min(26rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100dvh - var(--header-h) - 2rem)); overflow: hidden; color: var(--text); background: #0f172a; border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.4); }
.notification-panel > header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.notification-panel > header div { display: flex; align-items: center; gap: .5rem; }
.notification-panel > header button { color: var(--text-muted); background: none; border: 0; cursor: pointer; }
.notification-list { max-height: 31rem; overflow-y: auto; padding: .5rem; }
.notification-item { display: grid; gap: .45rem; padding: .8rem; border-bottom: 1px solid var(--border); border-radius: .65rem; }
.notification-item.is-unread { background: rgba(59,130,246,.1); }
.notification-item > div { display: flex; justify-content: space-between; gap: .75rem; }
.notification-item time { color: var(--text-muted); font-size: .68rem; white-space: nowrap; }
.notification-item p { margin: 0; color: #cbd5e1; font-size: .82rem; line-height: 1.45; }
.vacation-alert-item { background: rgba(245,158,11,.08); box-shadow: inset 0 0 0 1px rgba(245,158,11,.22); }
.vacation-alert-item time { color: #fbbf24; font-weight: 800; }
.vacation-alert-item.is-overdue { background: rgba(239,68,68,.12); box-shadow: inset 0 0 0 1px rgba(239,68,68,.32); }
.vacation-alert-item.is-overdue time { color: #f87171; }
.notification-item footer { display: flex; align-items: center; gap: .6rem; }
.notification-item footer form { margin: 0; }
.notification-item footer a, .notification-item footer button { color: #93c5fd; background: none; border: 0; font-size: .72rem; cursor: pointer; text-decoration: none; }
.notification-item footer .is-delete { color: #fca5a5; }
.notification-item footer .material-icons-round { font-size: 1rem; }
.notification-empty { display: grid; justify-items: center; padding: 2rem; color: var(--text-muted); }
[data-theme="light"] .notification-panel { background: #FFFFFF; box-shadow: 0 1.5rem 4rem rgba(15,23,42,.14); }
[data-theme="light"] .notification-item p { color: #475569; }
[data-theme="light"] .vacation-alert-item { background: #FFFBEB; box-shadow: inset 0 0 0 1px #FCD34D; }
[data-theme="light"] .vacation-alert-item time { color: #B45309; }
[data-theme="light"] .vacation-alert-item.is-overdue { background: #FEF2F2; box-shadow: inset 0 0 0 1px #FCA5A5; }
[data-theme="light"] .vacation-alert-item.is-overdue time { color: #B91C1C; }

.management-page { display: grid; gap: 1.25rem; max-width: 900px; margin: 0 auto; }
.app-main:has(.management-page) { max-width: 1320px; }
.management-page--wide { max-width: 1280px; }
.management-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.management-heading--row { align-items: center; }
.management-heading h1 { margin: .2rem 0; font-size: clamp(1.55rem, 4vw, 2.2rem); }
.management-heading p { margin: 0; color: var(--text-muted); }
.eyebrow { color: #60a5fa; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.heading-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.management-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.management-summary article { display: flex; gap: .8rem; align-items: center; padding: 1rem; background: linear-gradient(135deg, var(--bg-card), rgba(59,130,246,.08)); border: 1px solid var(--border); border-radius: 1rem; }
.management-summary article > span { color: #60a5fa; font-size: 2rem; }
.management-summary article div { display: grid; }
.management-summary strong { font-size: 1.5rem; }
.management-summary small { color: var(--text-muted); }
.management-grid { display: grid; gap: .65rem; }
.management-grid > a { display: grid; grid-template-columns: 2.8rem 1fr auto; gap: .9rem; align-items: center; padding: 1rem; color: var(--text); text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; transition: border-color .15s, transform .15s; }
.management-grid > a:hover { border-color: #3b82f6; transform: translateY(-1px); }
.management-grid > a > span:first-child { color: #60a5fa; font-size: 1.8rem; }
.management-grid > a div { display: grid; gap: .2rem; }
.management-grid small { color: var(--text-muted); }
.management-panel { padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; }
.management-panel > summary { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; cursor: pointer; list-style: none; }
.panel-title { margin-bottom: 1rem; }
.panel-title > div { display: flex; gap: .7rem; align-items: flex-start; }
.panel-title .material-icons-round { color: #60a5fa; }
.panel-title h2 { margin: 0; font-size: 1.05rem; }
.panel-title p { margin: .2rem 0 0; color: var(--text-muted); font-size: .8rem; }
.management-form { display: grid; gap: .75rem; margin-top: 1rem; }
.management-form--inline { grid-template-columns: repeat(3, minmax(9rem, 1fr)) auto; align-items: end; }
.management-form--entitlements { grid-template-columns: 6rem 1fr; }
.management-form--entitlements > label { grid-template-rows: minmax(2rem, auto) 2.45rem; align-self: stretch; }
.entitlement-assignment { grid-column: 1 / -1; margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; }
.entitlement-assignment legend { padding: 0 .45rem; color: var(--text-heading); font-size: .82rem; font-weight: 750; }
.entitlement-assignment-grid { display: grid; grid-template-columns: repeat(5, minmax(8rem, 1fr)); gap: .75rem; align-items: end; }
.entitlement-submit { grid-column: 1 / -1; justify-self: start; }
.management-form label, .assignment-row label, .request-edit-form label { display: grid; gap: .35rem; }
.management-form label > span, .assignment-row label > span, .request-edit-form label > span { color: var(--text-muted); font-size: .72rem; font-weight: 600; }
.management-form input, .management-form select, .assignment-row input, .assignment-row select, .compact-form select, .request-edit-form input, .request-edit-form textarea, .decision-form input { width: 100%; min-height: 2.45rem; padding: .5rem .65rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .55rem; }
.management-table-wrap { border: 1px solid var(--border); border-radius: 1rem; background: var(--bg-card); }
.management-table td { vertical-align: middle; }
.management-table td > strong, .management-table td > small { display: block; }
.management-table td > small { margin-top: .2rem; color: var(--text-muted); }
.management-table tr.is-inactive { opacity: .58; }
.management-table th:first-child, .management-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 13rem; background: var(--bg-card); box-shadow: .75rem 0 1rem -.95rem rgba(0,0,0,.55); }
.management-table th:first-child { z-index: 3; }
.management-table tr:hover td:first-child { background: var(--bg-card); }
[data-theme="light"] .management-table th:first-child, [data-theme="light"] .management-table td:first-child { background: #FFFFFF; box-shadow: .75rem 0 1rem -.95rem rgba(15,23,42,.35); }
:is(.users-table, .requests-table, .report-overview-table) tbody tr:nth-child(even) td { background: #233044; }
:is(.users-table, .requests-table, .report-overview-table) tbody tr:hover td { background: #293951; }
[data-theme="light"] :is(.users-table, .requests-table, .report-overview-table) tbody tr:nth-child(even) td { background: #F8FAFC; }
[data-theme="light"] :is(.users-table, .requests-table, .report-overview-table) tbody tr:hover td { background: #EFF6FF; }
.requests-table { table-layout: fixed; min-width: 960px; }
.requests-table th:nth-child(1), .requests-table td:nth-child(1) { width: 15rem; }
.requests-table th:nth-child(2), .requests-table td:nth-child(2) { width: 12rem; }
.requests-table th:nth-child(3), .requests-table td:nth-child(3) { width: 13rem; }
.requests-table th:nth-child(4), .requests-table td:nth-child(4) { width: 11rem; }
.requests-table th:nth-child(5), .requests-table td:nth-child(5) { width: 9rem; }
.requests-table th:nth-child(6), .requests-table td:nth-child(6) { width: 35rem; }
.role-badge, .request-type, .request-status, .assignment-chip { display: inline-flex; align-items: center; padding: .22rem .48rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.role-badge--administrator { color: #fecaca; background: rgba(239,68,68,.15); }
.role-badge--power_user { color: #bfdbfe; background: rgba(59,130,246,.15); }
.role-badge--analyst { color: #ddd6fe; background: rgba(139,92,246,.17); }
.role-badge--user { color: #d1fae5; background: rgba(16,185,129,.13); }
[data-theme="light"] .role-badge--administrator { color: #991B1B; background: #FECACA; border: 1px solid #F87171; }
[data-theme="light"] .role-badge--power_user { color: #1D4ED8; background: #DBEAFE; border: 1px solid #93C5FD; }
[data-theme="light"] .role-badge--analyst { color: #5B21B6; background: #EDE9FE; border: 1px solid #A78BFA; }
[data-theme="light"] .role-badge--user { color: #166534; background: #BBF7D0; border: 1px solid #22C55E; }
.user-state-role { display: inline-flex; align-items: center; gap: .55rem; }
.status-dot { display: inline-block; width: .62rem; height: .62rem; flex: 0 0 .62rem; vertical-align: middle; background: #64748b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(100,116,139,.14); }
.status-dot.is-active { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.assignment-chip { margin: .1rem; color: #cbd5e1; background: rgba(148,163,184,.12); }
[data-theme="light"] .status-dot { background: #94A3B8; box-shadow: 0 0 0 3px #E2E8F0; }
[data-theme="light"] .status-dot.is-active { background: #16A34A; box-shadow: 0 0 0 3px #BBF7D0; }
[data-theme="light"] .assignment-chip { color: #334155; background: #F1F5F9; border: 1px solid #CBD5E1; }
.muted { color: var(--text-muted); }
.row-actions { display: flex; align-items: center; gap: .35rem; }
.management-user-state { width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; border: 1px solid var(--border); border-radius: .65rem; }
.management-user-state .material-icons-round { font-size: 1.15rem; }
.management-user-state--deactivate { color: #fca5a5; background: rgba(239,68,68,.08); }
.management-user-state--deactivate:hover { color: #fff; background: #b91c1c; border-color: #b91c1c; }
.management-user-state--activate { color: #86efac; background: rgba(34,197,94,.08); }
.management-user-state--activate:hover { color: #fff; background: #15803d; border-color: #15803d; }
.compact-form { display: inline-flex; margin: 0; }
.compact-form select { min-width: 9rem; }
.assignment-list { display: grid; gap: .25rem; }
.assignment-row { display: grid; grid-template-columns: minmax(12rem, 2fr) 8rem 8.5rem 9rem 9rem auto; gap: .65rem; align-items: start; padding: .8rem; border: 1px solid var(--border); border-radius: .75rem; }
.assignment-row:has([data-direct-activity-field]:not([hidden])) { grid-template-columns: minmax(11rem, 2fr) 8rem 8rem 8.5rem 9rem 9rem auto; }
.assignment-row > label:not(.assignment-check) { grid-template-rows: 1rem 2.45rem minmax(2rem, auto); align-self: stretch; }
.assignment-row > label:not(.assignment-check) > span { grid-row: 1; align-self: end; }
.assignment-row > label:not(.assignment-check) > select,
.assignment-row > label:not(.assignment-check) > input,
.assignment-row > label:not(.assignment-check) > .input-suffix { grid-row: 2; }
.assignment-row > label:not(.assignment-check) > small { grid-row: 3; }
.assignment-row small { color: var(--text-muted); font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.assignment-check { display: flex !important; align-items: center; gap: .45rem; min-height: 2.45rem; margin-top: 1.35rem; padding: .5rem .65rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .55rem; font-size: .78rem; font-weight: 800; }
.assignment-check input { width: 1rem !important; min-height: 1rem !important; padding: 0 !important; accent-color: var(--primary); }
.assignment-check span { color: inherit !important; font-size: inherit !important; }
.assignment-row > .btn { margin-top: 1.35rem; white-space: nowrap; }
.assignment-row.is-history { opacity: .72; background: rgba(148,163,184,.08); }
.assignment-row--new { margin-top: 1rem; border-style: dashed; border-color: #3b82f6; }
.assignment-helper-actions { display: flex; justify-content: flex-end; margin: .25rem 0 .65rem; }
.assignment-mode-note { color: var(--text-muted); font-size: .78rem; }
.assignment-close-form { display: flex; justify-content: flex-end; margin: -.1rem .8rem .5rem; }
.link-danger { color: #fca5a5; background: none; border: 0; font-size: .72rem; cursor: pointer; }
.assignment-history { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.assignment-history h3 { margin: 0; color: var(--text-heading); font-size: 1rem; }
.assignment-history p { margin: .15rem 0 .8rem; color: var(--text-muted); font-size: .8rem; }
[data-theme="light"] .assignment-row.is-history { background: #F8FAFC; }
.assignment-chip--inactive { color: #cbd5e1; background: rgba(148,163,184,.14); }
.position-admin-list { display: grid; gap: .7rem; }
.position-admin-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: end; padding: .85rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--bg); }
.position-admin-row.is-inactive { opacity: .68; }
.position-admin-form { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(10rem, auto) auto auto; gap: .75rem; align-items: end; }
.position-admin-form label { display: grid; gap: .35rem; }
.position-admin-form label > span { color: var(--text-muted); font-size: .72rem; font-weight: 600; }
.position-admin-form input { width: 100%; min-height: 2.45rem; padding: .5rem .65rem; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: .55rem; }
.position-admin-ppc { display: flex !important; align-items: center; gap: .55rem; min-height: 2.45rem; padding: .42rem .6rem; color: var(--text); background: color-mix(in srgb, var(--primary) 6%, var(--bg-card)); border: 1px solid var(--border); border-radius: .55rem; }
.position-admin-ppc input { width: 1rem !important; min-height: 1rem !important; padding: 0 !important; accent-color: var(--primary); }
.position-admin-ppc > span { display: grid; gap: .05rem; color: var(--text) !important; }
.position-admin-ppc strong { font-size: .74rem; }
.position-admin-ppc small { color: var(--text-muted); font-size: .64rem; font-weight: 500; }
.position-admin-meta { display: grid; gap: .25rem; justify-items: start; min-width: 9.5rem; }
.position-admin-meta small { color: var(--text-muted); font-size: .72rem; }
.position-admin-state-form { display: flex; justify-content: flex-end; }
.input-suffix { position: relative; }
.input-suffix b { position: absolute; right: .65rem; top: .65rem; color: var(--text-muted); }
.input-suffix input { padding-right: 2rem; }
.assignment-total { display: flex; align-items: baseline; justify-content: flex-end; gap: .6rem; margin-top: .8rem; }
.assignment-total strong { font-size: 1.2rem; }
.assignment-total small { color: var(--text-muted); }
.assignment-total.is-over, .assignment-total.is-over small { color: #fca5a5; }
.request-type--vacation { color: #bfdbfe; background: rgba(59,130,246,.15); }
.request-type--study_leave { color: #ddd6fe; background: rgba(139,92,246,.16); }
.request-type--unpaid_leave { color: #fecaca; background: rgba(239,68,68,.14); }
.request-type--doctor { color: #a5f3fc; background: rgba(6,182,212,.14); }
.request-type--training { color: #fde68a; background: rgba(245,158,11,.14); }
.request-type--personal_obstacle { color: #fed7aa; background: rgba(234,88,12,.14); }
.request-type--vacation-cancellation { color: #fde68a; background: rgba(245,158,11,.17); }
[data-theme="light"] .request-type--vacation { color: #1D4ED8; background: #DBEAFE; border: 1px solid #93C5FD; }
[data-theme="light"] .request-type--study_leave { color: #6D28D9; background: #EDE9FE; border: 1px solid #C4B5FD; }
[data-theme="light"] .request-type--unpaid_leave { color: #991B1B; background: #FECACA; border: 1px solid #F87171; }
[data-theme="light"] .request-type--doctor { color: #0E7490; background: #CFFAFE; border: 1px solid #67E8F9; }
[data-theme="light"] .request-type--training { color: #92400E; background: #FDE68A; border: 1px solid #F59E0B; }
[data-theme="light"] .request-type--personal_obstacle { color: #9A3412; background: #FFEDD5; border: 1px solid #FDBA74; }
[data-theme="light"] .request-type--vacation-cancellation { color: #92400E; background: #FEF3C7; border: 1px solid #F59E0B; }
.request-status--pending { color: #fde68a; background: rgba(245,158,11,.15); }
.request-status--approved { color: #bbf7d0; background: rgba(34,197,94,.15); }
.request-status--rejected { color: #fecaca; background: rgba(239,68,68,.15); }
.request-status--cancelled { color: #cbd5e1; background: rgba(148,163,184,.15); }
[data-theme="light"] .request-status--pending { color: #92400E; background: #FDE68A; border: 1px solid #F59E0B; }
[data-theme="light"] .request-status--approved { color: #166534; background: #BBF7D0; border: 1px solid #22C55E; }
[data-theme="light"] .request-status--recorded { color: #1D4ED8; background: #DBEAFE; border: 1px solid #93C5FD; }
[data-theme="light"] .request-status--rejected { color: #991B1B; background: #FECACA; border: 1px solid #F87171; }
[data-theme="light"] .request-status--cancelled { color: #475569; background: #E2E8F0; border: 1px solid #94A3B8; }
.row-editor summary, .audit-detail summary { color: #93c5fd; cursor: pointer; }
.request-action-summary { font-weight: 700; }
.request-audit-summary { color: #bfdbfe; }
[data-theme="light"] .request-audit-summary { display: inline-flex; align-items: center; color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: .55rem; padding: .28rem .5rem; }
.request-row-actions { display: flex; align-items: flex-start; gap: .55rem; }
.request-row-actions .row-editor { flex: 1 1 auto; min-width: 0; }
.request-print-button { width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem; color: #93c5fd; border: 1px solid var(--border); border-radius: .55rem; }
.request-print-button:hover { color: #fff; background: #2563eb; border-color: #2563eb; }
.request-print-button .material-icons-round { font-size: 1.05rem; }
.request-edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; max-width: 31rem; margin-top: .65rem; padding: .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: .75rem; }
.request-edit-form .span-2 { grid-column: 1 / -1; }
.request-edit-form textarea { min-height: 3.7rem; resize: vertical; }
.request-edit-note { max-width: 26rem; margin: .15rem 0 0; padding: .55rem .7rem; border: 1px solid rgba(245,158,11,.35); border-radius: .55rem; color: #fbbf24; background: rgba(245,158,11,.1); font-size: .73rem; line-height: 1.38; white-space: normal; overflow-wrap: anywhere; }
.request-position-list, .request-impact-list { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .35rem; }
.request-position-list span, .request-impact-list span { display: inline-flex; align-items: center; padding: .18rem .45rem; border-radius: 999px; color: var(--text-muted); background: rgba(148,163,184,.14); font-size: .72rem; font-weight: 700; }
.request-balance-preview { margin-top: .35rem; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
[data-theme="light"] .request-edit-note { color: #92400E; background: #FEF3C7; border-color: #F59E0B; }
.decision-form { display: grid; grid-template-columns: minmax(10rem, 1fr) auto auto; gap: .4rem; max-width: 31rem; margin-top: .5rem; }
.btn--danger { color: #fff; background: #b91c1c; border-color: #b91c1c; }
.audit-detail { max-width: 22rem; white-space: normal; }
.audit-detail p, .audit-detail small { display: block; margin: .4rem 0; }
.request-corrected-badge { display: inline-flex; align-items: center; gap: .25rem; margin-top: .35rem; padding: .24rem .45rem; border: 1px solid rgba(245,158,11,.5); border-radius: 999px; color: #fde68a; background: rgba(245,158,11,.13); font-size: .67rem; font-weight: 800; white-space: nowrap; }
.request-corrected-badge .material-icons-round { font-size: .9rem; }
.request-corrected-label { display: block; margin-top: .2rem; color: #b45309; font-weight: 800; }
.approved-correction-detail { flex: 1 1 29rem; min-width: min(29rem, 100%); max-width: 38rem; white-space: normal; }
.request-correction-summary { display: inline-flex; align-items: center; gap: .3rem; color: #fbbf24; cursor: pointer; font-weight: 800; }
.request-correction-summary .material-icons-round { font-size: 1rem; }
.approved-correction-form { display: grid; gap: .75rem; margin-top: .55rem; padding: .75rem; border: 1px solid rgba(245,158,11,.38); border-radius: .75rem; background: rgba(15,23,42,.45); }
.approved-correction-warning { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem; border-radius: .6rem; color: #fde68a; background: rgba(245,158,11,.1); }
.approved-correction-warning .material-icons-round { flex: 0 0 auto; font-size: 1.2rem; }
.approved-correction-warning p { margin: 0; font-size: .72rem; line-height: 1.4; }
.approved-correction-form fieldset { min-width: 0; margin: 0; padding: .65rem; border: 1px solid var(--border); border-radius: .65rem; }
.approved-correction-form legend { padding: 0 .3rem; color: var(--text); font-size: .72rem; font-weight: 800; }
.approved-correction-form fieldset > small { display: block; margin-top: .5rem; color: var(--text-muted); font-size: .68rem; }
.approved-correction-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.approved-correction-days label { display: inline-flex; align-items: center; gap: .32rem; padding: .32rem .45rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg-card-hover); font-size: .7rem; font-weight: 700; cursor: pointer; }
.approved-correction-days label.is-excluded { opacity: .65; text-decoration: line-through; }
.approved-correction-days input { width: auto; margin: 0; }
.approved-correction-form > label { display: grid; gap: .3rem; font-size: .72rem; font-weight: 800; }
.approved-correction-form textarea { min-height: 4.5rem; resize: vertical; }
[data-theme="light"] .request-corrected-badge { color: #92400E; background: #FEF3C7; border-color: #F59E0B; }
[data-theme="light"] .approved-correction-form { background: #FFFBEB; }
[data-theme="light"] .approved-correction-warning { color: #92400E; background: #FEF3C7; }
.request-print-status div > span { margin-top: .12rem; font-size: .76rem; font-weight: 800; }
.request-print-correction { border-color: #f59e0b; background: rgba(245,158,11,.07); }
.request-audit-timeline .request-audit-correction::before { background: #f59e0b; }
.request-filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; align-items: end; margin: 1rem 0 1.1rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.request-filter-form label { display: grid; gap: .35rem; color: var(--text-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.request-filter-form input, .request-filter-form select { width: 100%; padding: .62rem .75rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .55rem; font: inherit; text-transform: none; letter-spacing: 0; }
.request-filter-form input:focus, .request-filter-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.request-filter-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ordered-vacation-panel { margin: 1rem 0 1.1rem; }
.ordered-vacation-panel summary { display: flex; align-items: center; gap: .65rem; width: fit-content; max-width: 100%; padding: .75rem .95rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); cursor: pointer; list-style: none; transition: .2s; }
.ordered-vacation-panel summary::-webkit-details-marker { display: none; }
.ordered-vacation-panel summary:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.ordered-vacation-panel summary .material-icons-round { color: var(--primary); }
.ordered-vacation-panel summary strong { white-space: nowrap; }
.ordered-vacation-panel summary small { color: var(--text-muted); font-size: .78rem; }
.ordered-vacation-panel[open] summary { border-color: var(--primary); }
.ordered-vacation-form { margin-top: .75rem; }
.empty-table { display: grid; justify-items: center; gap: .3rem; padding: 2rem; color: var(--text-muted); }
.empty-table .material-icons-round { color: #22c55e; font-size: 2rem; }
.coming-soon { display: grid; justify-items: center; gap: .7rem; padding: 2.5rem; text-align: center; }
.coming-soon > .material-icons-round { color: #60a5fa; font-size: 3rem; }
.coming-soon h2, .coming-soon p { margin: 0; }
.report-period-form { display: flex; gap: .5rem; }
.report-period-form select, .report-period-form input, .report-return textarea, .report-return select, .report-return input { padding: .55rem .7rem; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: .55rem; }
.report-period-form input { width: 6.5rem; }
.table-sort-link { display: inline-flex; align-items: center; gap: .25rem; color: inherit; text-decoration: none; }
.table-sort-link:hover, .table-sort-link.is-active { color: #bfdbfe; }
.table-sort-link .material-icons-round { font-size: .95rem; }
[data-theme="light"] .table-sort-link:hover, [data-theme="light"] .table-sort-link.is-active { color: #1D4ED8; }
.report-state { display: inline-flex; align-items: center; padding: .34rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 800; line-height: 1; border: 1px solid transparent; white-space: nowrap; }
.report-state--missing, .report-state--draft { color: #fde68a; background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.4); }
.report-state--returned { color: #fecaca; background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); }
.report-state--submitted { color: #bfdbfe; background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.4); }
.report-state--locked { color: #bbf7d0; background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.4); }
[data-theme="light"] .report-state--missing, [data-theme="light"] .report-state--draft { color: #92400E; background: #FDE68A; border-color: #F59E0B; }
[data-theme="light"] .report-state--returned { color: #991B1B; background: #FECACA; border-color: #F87171; }
[data-theme="light"] .report-state--submitted { color: #1D4ED8; background: #DBEAFE; border-color: #93C5FD; }
[data-theme="light"] .report-state--locked { color: #166534; background: #BBF7D0; border-color: #22C55E; }
.report-action-icon { width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: .55rem; }
.report-action-icon .material-icons-round { font-size: 1.05rem; }
.report-position-states { display: grid; gap: .28rem; margin-top: .45rem; }
.report-position-state { width: fit-content; max-width: 100%; padding: .22rem .5rem; border-radius: 999px; color: var(--text-muted); background: rgba(148,163,184,.13); font-size: .72rem; font-weight: 700; }
.report-position-state--ready { color: #bbf7d0; background: rgba(34,197,94,.16); }
.report-position-state--incomplete { color: #fde68a; background: rgba(245,158,11,.16); }
.report-position-state--missing_fund { color: #fecaca; background: rgba(239,68,68,.16); }
[data-theme="light"] .report-position-state--ready { color: #166534; background: #DCFCE7; }
[data-theme="light"] .report-position-state--incomplete { color: #92400E; background: #FEF3C7; }
[data-theme="light"] .report-position-state--missing_fund { color: #991B1B; background: #FEE2E2; }
.report-issue-list { display: grid; gap: .25rem; margin-top: .45rem; }
.report-issue-list span { display: inline-flex; align-items: flex-start; gap: .25rem; color: #fbbf24; font-size: .72rem; line-height: 1.25; }
.report-issue-list .material-icons-round { font-size: .9rem; line-height: 1; }
[data-theme="light"] .report-issue-list span { color: #92400E; }
.report-return-note { display: block; margin-top: .4rem; color: var(--text-muted); max-width: 24rem; }
.report-return { position: relative; }
.report-return > summary { list-style: none; cursor: pointer; }
.report-return > form { position: absolute; z-index: 5; right: 0; top: calc(100% + .35rem); display: grid; gap: .55rem; width: min(24rem, 82vw); padding: .75rem; background: #0f172a; border: 1px solid var(--border); border-radius: .8rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.35); }
.report-return textarea { min-height: 5rem; resize: vertical; }
[data-theme="light"] .report-return > form { background: #FFFFFF; box-shadow: 0 1rem 2rem rgba(15,23,42,.14); }
.report-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.report-inline-fields label { display: grid; gap: .2rem; font-size: .7rem; color: var(--text-muted); }
.report-submit-form { display: inline-flex; margin: 0; }
.report-submit-form--wide { display: grid; gap: .65rem; margin-top: .75rem; }
.report-submit-note { display: grid; gap: .35rem; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.report-submit-note textarea { width: 100%; min-height: 4.2rem; padding: .7rem .8rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: .7rem; font: inherit; font-size: .82rem; resize: vertical; outline: none; }
.report-submit-note textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.report-submit-note textarea:disabled { opacity: .65; cursor: not-allowed; }
.report-workflow-state { display: inline-flex; align-items: center; justify-content: center; min-height: 2.45rem; padding: .58rem .9rem; border-radius: .7rem; font-size: .8rem; font-weight: 800; border: 1px solid transparent; white-space: nowrap; }
.report-workflow-state--submitted { color: #bfdbfe; background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.45); }
.report-workflow-state--locked { color: #bbf7d0; background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.5); }
[data-theme="light"] .report-workflow-state--submitted { color: #1D4ED8; background: #DBEAFE; border-color: #93C5FD; }
[data-theme="light"] .report-workflow-state--locked { color: #166534; background: #BBF7D0; border-color: #22C55E; box-shadow: 0 8px 18px rgba(34,197,94,.12); }
.attendance-page--locked .calendar-days { cursor: not-allowed; }
.calendar-day.calendar-day--locked { cursor: not-allowed; opacity: .48; filter: grayscale(.75); box-shadow: none; }
.calendar-day.calendar-day--locked:hover { transform: none; border-color: var(--border); }
.attendance-page--locked .absence-action-grid .balance-card { opacity: .58; filter: grayscale(.45); }
.attendance-page--locked .open-absence-drawer:disabled { cursor: not-allowed; }
@media (min-width: 768px) {
    [data-theme="light"] .action-card--attendance {
        background: linear-gradient(135deg, #DCFCE7, #EFF6FF);
        border-color: #BBF7D0;
        color: #15803D;
        box-shadow: 0 18px 45px rgba(21,128,61,.12);
    }
    [data-theme="light"] .action-card--attendance .action-icon { color: #15803D; }
    [data-theme="light"] .action-card--attendance .action-badge { background: rgba(255,255,255,.72); color: #15803D; }
}

.request-print-sheet { display: grid; gap: 1rem; max-width: 900px; margin: 0 auto; }
.request-print-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid #3b82f6; }
.request-print-header h1 { margin: .2rem 0; }
.request-print-header p { margin: 0; color: var(--text-muted); }
.request-print-toolbar { display: flex; gap: .5rem; }
.request-print-status { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: .8rem; }
.request-print-status > span { font-size: 1.8rem; }
.request-print-status div { display: grid; }
.request-print-status small { color: var(--text-muted); }
.request-print-status strong { font-size: 1.15rem; letter-spacing: .01em; }
.request-print-status--approved { color: #16a34a; background: linear-gradient(135deg, #bbf7d0, #dcfce7); border-color: #22c55e; box-shadow: 0 10px 26px rgba(34,197,94,.18); }
.request-print-status--approved > span { color: #ffffff; background: #22c55e; border-radius: 999px; padding: .22rem; box-shadow: 0 0 0 .35rem rgba(34,197,94,.16); }
.request-print-status--approved small { color: #166534; }
.request-print-status--approved strong { color: #15803d; font-size: 1.35rem; }
.request-print-status--rejected { color: #dc2626; background: linear-gradient(135deg, #fecaca, #fee2e2); border-color: #ef4444; box-shadow: 0 10px 26px rgba(239,68,68,.18); }
.request-print-status--rejected > span { color: #ffffff; background: #ef4444; border-radius: 999px; padding: .22rem; box-shadow: 0 0 0 .35rem rgba(239,68,68,.16); }
.request-print-status--rejected small { color: #991b1b; }
.request-print-status--rejected strong { color: #b91c1c; font-size: 1.35rem; }
.request-print-status--pending { color: #fde68a; background: rgba(245,158,11,.08); }
.request-print-section { padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: .8rem; }
.request-print-section h2 { margin: 0 0 .85rem; font-size: 1rem; }
.request-print-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; margin: 0; }
.request-print-grid > div { display: grid; gap: .2rem; }
.request-print-grid dt { color: var(--text-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.request-print-grid dd { margin: 0; font-weight: 600; white-space: pre-wrap; }
.request-print-full { grid-column: 1 / -1; }
.request-audit-timeline { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.request-audit-timeline li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; position: relative; padding-left: 1.1rem; }
.request-audit-timeline li::before { content: ""; position: absolute; left: 0; top: .35rem; width: .55rem; height: .55rem; background: #3b82f6; border-radius: 50%; }
.request-audit-timeline time { color: var(--text-muted); font-size: .78rem; }
.request-audit-timeline li div { display: grid; gap: .15rem; }
.request-audit-timeline span { color: var(--text-muted); font-size: .8rem; }
.request-print-footer { display: flex; justify-content: space-between; color: var(--text-muted); font-size: .72rem; }

.help-page { display: flex; flex-direction: column; gap: 1.1rem; }
.help-heading { align-items: center; }
.help-card, .help-section, .help-toc, .help-search-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(15, 23, 42, .05); }
.help-card--intro { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.15rem; }
.help-card--intro > div:first-child { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; color: var(--primary); background: var(--primary-glow); }
.help-card h2, .help-section h2, .help-search-panel h2 { color: var(--text-heading); }
.help-card p, .help-section p, .help-flow span { color: var(--text-muted); line-height: 1.55; }
.help-search-panel { padding: 1rem 1.15rem; scroll-margin-top: 96px; }
.help-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.help-search-heading h2 { margin-top: .12rem; font-size: 1.15rem; }
.help-search-heading > .material-icons-round { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border-radius: .85rem; background: var(--primary-glow); color: var(--primary); }
.help-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.help-search-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-height: 3.1rem; padding: .25rem .4rem .25rem .85rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--bg); transition: border-color .2s, box-shadow .2s; }
.help-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.help-search-box > .material-icons-round { color: var(--text-muted); }
.help-search-box input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: .88rem; }
.help-search-box button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: .7rem; background: transparent; color: var(--text-muted); cursor: pointer; }
.help-search-box button:hover { background: var(--primary-glow); color: var(--primary); }
.help-search-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.help-search-suggestions button { padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-muted); font: inherit; font-size: .68rem; font-weight: 750; cursor: pointer; }
.help-search-suggestions button:hover { border-color: var(--primary); color: var(--primary); }
.help-search-status { margin: .55rem 0 0; color: var(--text-muted); font-size: .7rem; }
.help-no-results { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.15rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg-card); }
.help-no-results > span { color: var(--text-muted); font-size: 2rem; }
.help-no-results strong { color: var(--text-heading); }
.help-no-results p { margin-top: .12rem; color: var(--text-muted); font-size: .75rem; }
.help-toc { display: flex; flex-wrap: wrap; gap: .55rem; padding: .8rem; position: sticky; top: 72px; z-index: 5; }
.help-toc a { display: inline-flex; align-items: center; min-height: 2.2rem; padding: .45rem .75rem; border-radius: 999px; color: var(--text); background: var(--bg); border: 1px solid var(--border); font-weight: 700; font-size: .82rem; text-decoration: none; transition: .2s; }
.help-toc a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-glow); }
.help-section { padding: 1.15rem; scroll-margin-top: 96px; }
.help-section-title { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.help-section-title > span { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .9rem; color: var(--primary); background: var(--primary-glow); }
.help-section-title h2 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.help-section-title p { margin-top: .25rem; }
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.help-step { position: relative; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--bg); }
.help-step > strong { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; color: #fff; background: var(--primary); margin-bottom: .75rem; }
.help-step h3, .help-list h3 { color: var(--text-heading); margin-bottom: .35rem; font-size: 1rem; }
.help-step a { color: var(--primary); font-weight: 800; }
.help-list { display: grid; gap: .75rem; }
.help-list > div { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--bg); }
.help-request-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.help-request-grid article { display: grid; gap: .65rem; align-content: start; padding: .9rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--bg); }
.help-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.help-topic { display: grid; gap: .65rem; align-content: start; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--bg); }
.help-topic--featured { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); background: color-mix(in srgb, var(--primary-glow) 35%, var(--bg)); }
.help-topic h3 { margin: 0; color: var(--text-heading); font-size: 1rem; }
.help-topic p { margin: 0; }
.help-mini-steps { display: grid; gap: .48rem; margin: 0; padding-left: 1.35rem; color: var(--text); font-size: .8rem; line-height: 1.5; }
.help-mini-steps li::marker { color: var(--primary); font-weight: 900; }
.help-flow { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; counter-reset: help-flow; }
.help-flow li { counter-increment: help-flow; display: grid; grid-template-columns: auto 1fr; gap: .7rem 1rem; align-items: start; padding: .9rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--bg); }
.help-flow li::before { content: counter(help-flow); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; color: var(--primary); background: var(--primary-glow); font-weight: 900; }
.help-flow strong { color: var(--text-heading); }
.help-flow span { grid-column: 2; }
.help-faq { display: grid; gap: .6rem; }
.help-faq details { border: 1px solid var(--border); border-radius: .9rem; background: var(--bg); overflow: hidden; }
.help-faq summary { position: relative; padding: .85rem 2.6rem .85rem 1rem; color: var(--text-heading); font-size: .85rem; font-weight: 800; cursor: pointer; list-style: none; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::after { content: 'expand_more'; position: absolute; top: 50%; right: .9rem; transform: translateY(-50%); color: var(--primary); font-family: 'Material Icons Round'; font-size: 1.25rem; font-weight: normal; transition: transform .2s; }
.help-faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.help-faq details[open] summary { border-bottom: 1px solid var(--border); background: var(--primary-glow); }
.help-faq details p { margin: 0; padding: .85rem 1rem; }
.help-search-item[hidden], .help-section[hidden], .help-toc a[hidden], .help-no-results[hidden], .help-search-box button[hidden] { display: none !important; }
[data-theme="light"] .help-card--intro > div:first-child,
[data-theme="light"] .help-section-title > span,
[data-theme="light"] .help-flow li::before { background: #DBEAFE; }

@page requestPortrait {
    size: A4 portrait;
    margin: 8mm;
}

@media (max-width: 900px) {
    .help-grid, .help-request-grid, .help-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help-toc { position: static; }
    .management-form--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.entitlement-assignment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .management-form--entitlements > label { grid-template-rows: minmax(2rem, auto) 2.45rem; }
    .assignment-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .assignment-row:has([data-direct-activity-field]:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .assignment-row .btn { min-height: 2.45rem; }
    .position-admin-row, .position-admin-form { grid-template-columns: 1fr; }
    .position-admin-state-form { justify-content: stretch; }
    .position-admin-state-form .btn { width: 100%; }
    .requests-table { min-width: 900px; }
    .requests-table th:nth-child(6), .requests-table td:nth-child(6) { width: 30rem; }
}
@media (max-width: 600px) {
    .help-card--intro, .help-grid, .help-request-grid, .help-topic-grid { grid-template-columns: 1fr; }
    .help-topic--featured { grid-column: auto; }
    .help-search-panel { padding: .9rem; }
    .help-search-suggestions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
    .help-search-suggestions button { flex: 0 0 auto; }
    .help-heading .btn { width: 100%; justify-content: center; }
    .help-section { padding: .9rem; }
    .help-flow li { grid-template-columns: 1fr; }
    .help-flow span { grid-column: auto; }
    .management-heading--row { align-items: flex-start; flex-direction: column; }
    .management-summary { grid-template-columns: 1fr; }
    .management-form--inline, .assignment-row { grid-template-columns: 1fr; }
	.entitlement-assignment-grid { grid-template-columns: 1fr; }
    .management-form--entitlements > label { grid-template-rows: auto auto; }
    .assignment-row > label:not(.assignment-check) { grid-template-rows: auto auto auto; }
    .assignment-row:has([data-direct-activity-field]:not([hidden])) { grid-template-columns: 1fr; }
    .assignment-check, .assignment-row > .btn { margin-top: 0; }
    .assignment-row > .btn, .management-form--entitlements > .btn { width: 100%; }
    .heading-actions { width: 100%; }
    .heading-actions .btn { flex: 1; }
    .header-title { display: none; }
    .header-help { display: none; }
    .decision-form { grid-template-columns: 1fr 1fr; }
    .decision-form input { grid-column: 1 / -1; }
}
@media print {
    .management-page--wide { max-width: none; }
    .management-table-wrap { border: 0; }
    .management-table th, .management-table td { color: #111827 !important; background: #fff !important; white-space: normal; }
    .request-type, .request-status { border: 1px solid #9ca3af; color: #111827 !important; background: #fff !important; }
    html:has(.request-print-sheet),
    html:has(.requests-table),
    body:has(.requests-table),
    body:has(.request-print-sheet) {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        background-image: none !important;
    }
    body:has(.request-print-sheet) .app-main,
    body:has(.requests-table) .app-main {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        background-image: none !important;
    }
    body:has(.request-print-sheet) *,
    body:has(.request-print-sheet) *::before,
    body:has(.request-print-sheet) *::after,
    body:has(.requests-table) *,
    body:has(.requests-table) *::before,
    body:has(.requests-table) *::after {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .request-print-sheet {
        page: requestPortrait;
        width: auto;
        height: auto;
        min-height: 0;
        max-width: none;
        gap: .55rem;
        color: #111827;
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    .request-print-sheet * {
        background-image: none !important;
        box-shadow: none !important;
    }
    .request-print-header, .request-print-section, .request-print-status { break-inside: avoid; color: #111827; background: transparent !important; border-color: #d1d5db; }
    .request-print-header { padding-bottom: .55rem; }
    .request-print-status { padding: .45rem 0; border-width: 0 0 1px; border-radius: 0; }
    .request-print-section { padding: .45rem 0; border-width: 0 0 1px; border-radius: 0; }
    .request-print-section h2 { margin-bottom: .45rem; }
    .request-print-grid { gap: .45rem 1.2rem; }
    .request-audit-timeline { gap: .4rem; }
    .request-print-grid dt, .request-print-header p, .request-print-status small, .request-audit-timeline time, .request-audit-timeline span, .request-print-footer { color: #4b5563 !important; }
    .management-page:has(.requests-table) {
        page: requestPortrait;
        display: block;
        max-width: none;
        margin: 0;
        color: #111827;
        background: #fff !important;
    }
    .management-page:has(.requests-table) .management-table-wrap {
        overflow: visible;
        background: #fff !important;
    }
    .management-page:has(.requests-table) .management-table {
        width: 100%;
        font-size: 8pt;
        border-collapse: collapse;
    }
    .management-page:has(.requests-table) .management-table th,
    .management-page:has(.requests-table) .management-table td {
        position: static !important;
        min-width: 0 !important;
        padding: 3mm 2mm;
        box-shadow: none !important;
    }
    .management-page:has(.requests-table) .management-table tr {
        break-inside: avoid;
    }
    .management-page:has(.requests-table) .request-type,
    .management-page:has(.requests-table) .request-status {
        padding: 1mm 2mm;
        font-size: 7pt;
    }
}

/* ── Loans Filter ───────────────────────────────────────── */
.loans-filter {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1 1 160px;
    min-width: 140px;
}
.filter-label {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.filter-label .material-icons-round { font-size: .95rem !important; }
.filter-select,
.filter-input {
    padding: .6rem .85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: .875rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
.filter-select:focus,
.filter-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.filter-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(.7);
    cursor: pointer;
}
.filter-actions {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-active-info {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    padding: .5rem .75rem;
    background: var(--primary-glow);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    color: var(--primary);
    font-weight: 500;
}
@media (min-width: 768px) {
    .filter-group { flex: 0 1 200px; }
}

/* ── IT Support Widget ────────────────────────────────── */
/* Loan list printing */
.loans-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.loans-section-heading--history { margin-top: 2rem; }
.loans-section-heading .section-title { margin: 0; }
.loans-print-link { flex: 0 0 auto; }
.loans-print-link .material-icons-round { font-size: 1.1rem !important; }
.loan-return-column { width: 1%; text-align: right; white-space: nowrap; }
.loan-return-form { display: inline-flex; margin: 0; }
.loan-return-button .material-icons-round { font-size: 1rem !important; }

.loan-print-page {
    width: min(100%, 920px);
    margin: 0 auto;
}
.loan-print-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.loan-print-sheet {
    background: #fff;
    color: #111827;
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.loan-print-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #111827;
}
.loan-print-brand {
    display: block;
    margin-bottom: .25rem;
    color: #2563eb;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.loan-print-header h1 {
    margin: 0;
    color: #111827;
    font-size: 1.55rem;
}
.loan-print-header p {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .7rem;
    margin: .45rem 0 0;
    color: #4b5563;
    font-size: .78rem;
}
.loan-print-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
    color: #4b5563;
    font-size: .72rem;
}
.loan-print-meta strong { color: #111827; font-size: .9rem; }
.loan-print-table {
    width: 100%;
    border-collapse: collapse;
    color: #111827;
    font-size: .78rem;
}
.loan-print-table thead { display: table-header-group; }
.loan-print-table th,
.loan-print-table td {
    padding: .55rem .6rem;
    border: 1px solid #9ca3af;
    text-align: left;
    vertical-align: top;
}
.loan-print-table th {
    background: #e5e7eb;
    color: #111827;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.loan-print-table tr { break-inside: avoid; page-break-inside: avoid; }
.loan-print-empty { padding: 2rem !important; color: #6b7280; text-align: center !important; }
.loan-print-footer {
    margin-top: 1rem;
    color: #6b7280;
    font-size: .65rem;
    text-align: right;
}

@media (max-width: 620px) {
    .loans-section-heading { align-items: stretch; flex-direction: column; }
    .loans-print-link { justify-content: center; }
    .loan-print-header { flex-direction: column; }
    .loan-print-meta { align-items: flex-start; }
}

@page loan-list {
    size: A4 portrait;
    margin: 12mm;
}
@media print {
    html:has(.loan-print-page),
    body:has(.loan-print-page) {
        width: auto !important;
        min-height: 0 !important;
        height: auto !important;
        background: #fff !important;
        overflow: visible !important;
    }
    body:has(.loan-print-page) .app-main {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .loan-print-page {
        width: auto;
        margin: 0;
        page: loan-list;
    }
    .loan-print-sheet {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .loan-print-header { margin-bottom: 6mm; padding-bottom: 4mm; }
    .loan-print-header h1 { font-size: 16pt; }
    .loan-print-table { font-size: 8.5pt; }
    .loan-print-table th,
    .loan-print-table td { padding: 2.2mm 2.5mm; }
    .loan-print-footer { margin-top: 5mm; }
}

.it-support-fab {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.it-support-fab .material-icons-round {
    font-size: 28px;
}
.it-support-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.6);
}
.it-support-fab:active {
    transform: scale(0.95);
}

/* Pulsing effect for FAB */
.it-support-fab .fab-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.4;
    z-index: -1;
    animation: fab-pulse 2s infinite;
}
@keyframes fab-pulse {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Support Panel Glassmorphism */
.it-support-panel {
    position: fixed;
    bottom: 145px;
    right: 16px;
    width: 360px;
    max-width: calc(100% - 32px);
    background: rgba(30, 41, 59, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    /* Animation base */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.it-support-panel.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Header style */
.it-support-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.75rem;
}
.it-support-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-heading);
}
.it-support-title .material-icons-round {
    color: var(--primary);
    font-size: 24px;
}

/* Form layout */
.it-support-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.it-support-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Checkboxes customized styling */
.it-support-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.support-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    transition: background 0.2s;
    user-select: none;
}
.support-checkbox-label:hover {
    background: rgba(255, 255, 255, 0.04);
}
.support-checkbox-label input[type="checkbox"] {
    display: none;
}
.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.2s;
    background: rgba(15, 23, 42, 0.5);
    margin-top: 2px;
}
.support-checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}
.checkbox-custom::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s;
    margin-bottom: 2px;
}
.support-checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    transform: rotate(45deg) scale(1);
}
.checkbox-text {
    flex: 1;
    line-height: 1.3;
}

/* Textarea styling */
.it-support-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.it-support-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
.it-support-field textarea {
    width: 100%;
    min-height: 90px;
    padding: 0.65rem 0.85rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    outline: none;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.it-support-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Desktop styles override */
@media (min-width: 768px) {
    .it-support-fab {
        bottom: 24px;
        right: 24px;
    }
    .it-support-panel {
        bottom: 90px;
        right: 24px;
    }
}
/* Kontrolní dashboard zastupování */
.substitution-control-page { max-width: 1680px; }
.app-main:has(.substitution-control-page) { max-width: 1760px; }
.substitution-control-heading { align-items: end; gap: 24px; }
.control-period-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.control-period-form label { display: grid; gap: 5px; color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.control-period-form input { width: 92px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text); }
.control-lead-summary { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--primary) 8%, var(--bg-card)); }
.control-lead-summary > span { color: var(--primary); font-size: 2rem; }
.control-lead-summary p { margin: 0; line-height: 1.5; }
.control-summary-grid { display: grid; grid-template-columns: repeat(9, minmax(125px, 1fr)); gap: 10px; margin-bottom: 18px; }
.control-summary-grid article { min-height: 112px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); display: flex; flex-direction: column; gap: 4px; }
.control-summary-grid article > span { color: var(--text-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; }
.control-summary-grid article strong { font-size: 1.8rem; line-height: 1; }
.control-summary-grid article small { color: var(--text-muted); line-height: 1.25; }
.control-summary-grid .is-ok { border-top: 3px solid #22c55e; }
.control-summary-grid .is-warning { border-top: 3px solid #f59e0b; }
.control-summary-grid .is-danger { border-top: 3px solid #ef4444; }
.control-summary-grid .is-locked { border-top: 3px solid #6366f1; }
.control-import-state { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 15px 18px; border: 1px dashed var(--border); border-radius: 14px; background: var(--bg-card); }
.control-import-state > div { display: flex; align-items: center; gap: 12px; }
.control-import-state .material-icons-round { color: var(--primary); font-size: 2rem; }
.control-import-state p { margin: 4px 0 0; color: var(--text-muted); }
.control-import-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.control-file-field { display: grid; gap: 5px; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.control-file-field input { max-width: 290px; min-height: 42px; padding: 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); }
.control-file-field input::file-selector-button { margin-right: 8px; padding: 7px 10px; border: 0; border-radius: 7px; background: var(--bg-card-hover); color: var(--text); cursor: pointer; }
.control-import-badge { padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 15%, transparent); color: #d97706; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.control-table-section, .control-stat-card { border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); overflow: hidden; }
.control-table-section > header, .control-stat-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.control-table-section h2, .control-stat-card h2 { margin: 2px 0 0; font-size: 1.1rem; }
.control-view-switch { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 10px; }
.control-view-switch a { padding: 7px 10px; border-radius: 7px; color: var(--text-muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.control-view-switch a.active { background: var(--primary); color: #fff; }
.control-table-wrap { max-height: 690px; }
.control-table { min-width: 1450px; font-size: .82rem; }
.control-table th { position: sticky; top: 0; z-index: 2; background: var(--bg-card); }
.control-table td { vertical-align: top; }
.control-table td > strong, .control-table td > span, .control-table td > small { display: block; margin-bottom: 3px; }
.control-table tr.is-control-problem { background: color-mix(in srgb, #f59e0b 5%, transparent); }
.control-table tr.is-control-ok { opacity: .82; }
.control-lesson-cell { white-space: nowrap; }
.control-status { display: inline-flex !important; width: fit-content; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 14%, transparent); color: #d97706; font-size: .72rem; font-weight: 800; line-height: 1.2; }
.control-status--matched, .control-status--manually_confirmed { background: color-mix(in srgb, #22c55e 14%, transparent); color: #16a34a; }
.control-status--possible_duplicate, .control-status--requires_explanation, .control-status--substituting_mismatch, .control-status--substituted_mismatch, .control-status--class_subject_mismatch { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; }
.control-review-cell { min-width: 260px; }
.control-review-cell details summary { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); cursor: pointer; font-weight: 700; }
.control-review-cell details summary .material-icons-round { font-size: 1.1rem; }
.control-review-cell form { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.control-review-cell label { display: grid; gap: 4px; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.control-review-cell select, .control-review-cell textarea { width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font: inherit; }
.control-review-cell textarea { min-height: 72px; resize: vertical; }
.control-secondary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.control-stat-card--wide { grid-column: 1 / -1; }
.control-ranking { list-style: none; margin: 0; padding: 8px 16px 14px; }
.control-ranking li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.control-ranking li:last-child { border-bottom: 0; }
.control-ranking .is-empty { color: var(--text-muted); }

@media (max-width: 1250px) {
    .control-summary-grid { grid-template-columns: repeat(3, 1fr); }
    .control-secondary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .substitution-control-heading, .control-import-state { align-items: stretch; flex-direction: column; }
    .control-import-form { align-items: stretch; flex-direction: column; }
    .control-file-field input { max-width: none; width: 100%; }
    .control-period-form { display: grid; grid-template-columns: 1fr 1fr; }
    .control-period-form input { width: 100%; }
    .control-period-form .btn { grid-column: 1 / -1; }
    .control-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .control-summary-grid article { min-height: 100px; }
    .control-lead-summary { align-items: flex-start; }
    .control-table-section > header { align-items: stretch; flex-direction: column; }
    .control-view-switch a { flex: 1; text-align: center; }
    .control-secondary-grid { grid-template-columns: 1fr; }
    .control-stat-card--wide { grid-column: auto; }
}

/* ── Application footer & audit trail document ───────── */
.app-footer { margin-top: -1px; padding: 0 1rem calc(var(--nav-h) + 1rem); color: var(--text-muted); }
.sign-page-body > .app-footer { display: none; }
.app-footer-inner { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto; align-items: center; gap: 1.25rem; max-width: 1320px; margin: 0 auto; padding: 1.25rem 0; border-top: 1px solid var(--border); }
.app-footer-brand { display: flex; align-items: center; gap: .65rem; }
.app-footer-brand img { width: 2.1rem; height: 2.1rem; object-fit: contain; opacity: .9; }
.app-footer-brand > span { display: grid; }
.app-footer-brand strong { color: var(--text-heading); font-size: .85rem; letter-spacing: .06em; }
.app-footer-brand small, .app-footer-copy { font-size: .68rem; }
.app-footer-links { display: flex; align-items: center; justify-content: center; gap: .75rem 1.25rem; font-size: .72rem; }
.app-footer-links a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); transition: color .2s; }
.app-footer-links a:hover { color: var(--primary); }
.app-footer-links .material-icons-round { font-size: 1rem; }
.app-footer-author strong { color: var(--text); }
.app-footer-copy { white-space: nowrap; }

.app-main:has(.legal-page) { max-width: 1040px; }
.legal-page { display: grid; gap: 1.15rem; }
.legal-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(59,130,246,.35); border-radius: var(--radius); background: linear-gradient(135deg, rgba(59,130,246,.16), var(--bg-card)); box-shadow: var(--shadow); }
.legal-hero h1 { max-width: 45rem; margin-top: .25rem; color: var(--text-heading); font-size: clamp(1.8rem, 4vw, 2.75rem); line-height: 1.12; letter-spacing: -.04em; }
.legal-hero p { max-width: 45rem; margin-top: .75rem; color: var(--text-muted); }
.legal-hero-actions { display: grid; flex: 0 0 auto; gap: .65rem; min-width: 13.5rem; }
.legal-summary { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.15rem; border: 1px solid rgba(16,185,129,.35); border-radius: var(--radius); background: var(--success-bg); }
.legal-summary > .material-icons-round { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; color: var(--success); background: var(--bg-card); }
.legal-summary h2, .legal-card h2, .legal-section h2, .legal-sources h2 { color: var(--text-heading); }
.legal-summary h2 { font-size: 1.05rem; }
.legal-summary p { margin-top: .25rem; color: var(--text); line-height: 1.65; }
.legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.legal-card, .legal-section, .legal-sources { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.legal-card-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .8rem; border-radius: .9rem; color: var(--primary); background: var(--primary-glow); }
.legal-card h2, .legal-section h2 { font-size: 1.18rem; }
.legal-card > p, .legal-card li, .legal-section p, .legal-sources p { color: var(--text-muted); line-height: 1.65; }
.legal-card ol, .legal-card ul { display: grid; gap: .55rem; margin: .8rem 0 0 1.15rem; }
.legal-note { margin: 1rem 0 0; padding: .8rem; border-radius: .75rem; background: var(--bg); font-size: .82rem; }
.legal-note strong { color: var(--text); }
.legal-section-heading { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.legal-section-heading > .material-icons-round { flex: 0 0 auto; color: var(--primary); }
.legal-section-heading p { margin-top: .2rem; }
.legal-law-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.legal-law-grid article { padding: .9rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--bg); }
.legal-law-grid strong { color: var(--text-heading); font-size: .87rem; }
.legal-law-grid p { margin-top: .35rem; font-size: .8rem; }
.legal-conclusion { margin-top: 1rem; padding: .9rem; border-left: 3px solid var(--primary); background: var(--primary-glow); }
.legal-section--warning { border-color: rgba(245,158,11,.38); background: linear-gradient(135deg, var(--warning-bg), var(--bg-card) 65%); }
.legal-section--warning .legal-section-heading > .material-icons-round { color: var(--warning); }
.legal-checklist { display: grid; gap: .65rem; list-style: none; }
.legal-checklist li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; color: var(--text-muted); line-height: 1.55; }
.legal-checklist .material-icons-round { margin-top: .1rem; color: var(--success); font-size: 1.15rem; }
.legal-sources > p { margin-top: .25rem; }
.legal-sources > div { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.legal-sources a { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: .75rem; color: var(--text); background: var(--bg); font-size: .78rem; font-weight: 700; }
.legal-sources a:hover { color: var(--primary); border-color: var(--primary); }
.legal-sources .material-icons-round { font-size: .95rem; }
.legal-document-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .2rem .15rem; color: var(--text-muted); font-size: .7rem; }

@media (max-width: 760px) {
    .app-footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .app-footer-links { flex-direction: column; gap: .5rem; }
    .legal-hero { display: grid; gap: 1.25rem; }
    .legal-hero-actions { width: 100%; min-width: 0; }
    .legal-grid, .legal-law-grid { grid-template-columns: 1fr; }
}

@media print {
    .app-header, .app-footer, .bottom-nav, .flash-container, .legal-hero-actions { display: none !important; }
    .app-main:has(.legal-page) { max-width: none !important; min-height: auto; padding: 0 !important; }
    .legal-page { color: #111827; gap: 4mm; font-size: 9pt; }
    .legal-hero, .legal-summary, .legal-card, .legal-section, .legal-sources { break-inside: avoid; box-shadow: none; background: #fff !important; border-color: #cbd5e1; }
    .legal-hero { padding: 5mm; }
    .legal-hero h1, .legal-summary h2, .legal-card h2, .legal-section h2, .legal-sources h2, .legal-card strong, .legal-law-grid strong { color: #111827 !important; }
    .legal-hero p, .legal-card > p, .legal-card li, .legal-section p, .legal-sources p, .legal-checklist li, .legal-document-footer { color: #334155 !important; }
    .legal-law-grid article, .legal-note, .legal-sources a { background: #fff !important; }
    .legal-sources a { color: #111827 !important; }
}