:root {
    color-scheme: light;
    --bg: #f4f7fb;
    --panel: #ffffff;
    --raised: #f8fafc;
    --ink: #172033;
    --muted: #667085;
    --muted-strong: #475467;
    --line: #e5eaf1;
    --line-strong: #cbd5e1;
    --on-color: #ffffff;
    --blue: #2563eb;
    --blue-hover: #1d4ed8;
    --blue-dark: #1d4ed8;
    --blue-soft: #eff6ff;
    --blue-border: #bfdbfe;
    --blue-deep: #173f6d;
    --green: #08764f;
    --green-text: #08764f;
    --green-soft: #ecfdf5;
    --green-border: #a7f3d0;
    --amber: #b45309;
    --amber-soft: #fffbeb;
    --amber-border: #fcd34d;
    --red: #b42318;
    --red-soft: #fef2f2;
    --red-border: #fecaca;
    --red-fill: #b42318;
    --purple: #6d28d9;
    --purple-soft: #ede9fe;
    --indigo: #4338ca;
    --indigo-soft: #eef2ff;
    --indigo-border: #cdd9fd;
    --indigo-fill: #4f46e5;
    --cyan: #0e7490;
    --cyan-soft: #ecfeff;
    --cyan-border: #bae6fd;
    --notice-text: #9f3535;
    --notice-bg: #fff1f2;
    --notice-hover: #ffe8eb;
    --notice-active: #ffe0e3;
    --notice-active-hover: #ffd1d7;
    --notice-border: #f5b8c0;
    --report-text: #08764f;
    --report-bg: #ecfdf5;
    --report-hover: #d1fae5;
    --report-active: #08764f;
    --report-active-hover: #065f46;
    --calendar-public: #ef4444;
    --calendar-company: #7c3aed;
    --calendar-leave: #8b5cf6;
    --calendar-trip: #6366f1;
    --calendar-outside: #06b6d4;
    --toast-bg: #172033;
    --backdrop: rgba(23, 32, 51, .48);
    --shadow: 0 16px 40px rgba(20, 31, 56, .08);
    --rich-gray: #475569;
    --rich-red: #dc2626;
    --rich-orange: #c2410c;
    --rich-green: #15803d;
    --rich-blue: #2563eb;
    --rich-navy: #1e3a8a;
    --rich-purple: #7e22ce;
    --rich-bg-yellow: #fef08a;
    --rich-bg-green: #bbf7d0;
    --rich-bg-blue: #bae6fd;
    --rich-bg-pink: #fbcfe8;
    --rich-bg-purple: #e9d5ff;
    --surface: var(--panel);
    --surface-soft: var(--raised);
    --accent: var(--blue-dark);
    font-family: Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media screen {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #12161f;
        --panel: #1b2230;
        --raised: #232c3b;
        --ink: #e6edf7;
        --muted: #a2afc3;
        --muted-strong: #c3cee0;
        --line: #303c4f;
        --line-strong: #4c5b72;
        --blue: #356fe0;
        --blue-hover: #285cc5;
        --blue-dark: #96b8ff;
        --blue-soft: #223453;
        --blue-border: #3a557b;
        --blue-deep: #244b7b;
        --green: #177553;
        --green-text: #6edbb1;
        --green-soft: #19382f;
        --green-border: #355f4f;
        --amber: #f2c07a;
        --amber-soft: #3d3020;
        --amber-border: #6a5432;
        --red: #ff9ca6;
        --red-soft: #3c2630;
        --red-border: #71404a;
        --red-fill: #b93842;
        --purple: #c4b0ff;
        --purple-soft: #302941;
        --indigo: #b4b2ff;
        --indigo-soft: #292b48;
        --indigo-border: #454a78;
        --indigo-fill: #514ac8;
        --cyan: #7dd9ef;
        --cyan-soft: #1d3542;
        --cyan-border: #355f6c;
        --notice-text: #ffacb5;
        --notice-bg: #35252e;
        --notice-hover: #452c37;
        --notice-active: #54313e;
        --notice-active-hover: #623b49;
        --notice-border: #8b4b5b;
        --report-text: #79ddba;
        --report-bg: #1c352e;
        --report-hover: #25493c;
        --report-active: #176548;
        --report-active-hover: #1c7656;
        --calendar-public: #ff929b;
        --calendar-company: #b9a1ff;
        --calendar-leave: #d0b6ff;
        --calendar-trip: #a9adff;
        --calendar-outside: #7dd9ef;
        --toast-bg: #303e55;
        --backdrop: rgba(7, 11, 20, .72);
        --shadow: 0 16px 40px rgba(0, 0, 0, .2);
        --rich-gray: #bdcadc;
        --rich-red: #ffb0b5;
        --rich-orange: #ffc18b;
        --rich-green: #91e7b4;
        --rich-blue: #adcaff;
        --rich-navy: #c6d6ff;
        --rich-purple: #d7baff;
        --rich-bg-yellow: #433b20;
        --rich-bg-green: #203b2d;
        --rich-bg-blue: #203747;
        --rich-bg-pink: #402a38;
        --rich-bg-purple: #342b45;
    }
}

.theme-toggle { gap: 7px; flex-shrink: 0; }
.theme-toggle-icon { font-size: 18px; line-height: 1; }
.account-theme-actions { display: flex; justify-content: flex-end; margin-bottom: 18px; }
input, select, textarea { accent-color: var(--blue); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: inset 0 0 0 1000px var(--panel); }

@media print {
    :root { --bg: #ffffff; --shadow: none; }
    .button.theme-toggle, .account-theme-actions { display: none; }
}

.assignment-dialog.business-trip-dialog { width: min(900px, calc(100% - 32px)); max-height: min(880px, calc(100vh - 32px)); }
.business-trip-dialog form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(880px, calc(100vh - 32px));
}
.business-trip-dialog-body {
    display: grid;
    gap: 22px;
    min-height: 0;
    padding: 20px 24px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.business-trip-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 16px;
}
.business-trip-form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.business-trip-form-grid input,
.business-trip-form-grid select,
.business-trip-form-grid textarea,
.business-trip-day-row input,
.business-trip-day-row select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--panel);
}
.business-trip-form-grid textarea { min-height: 76px; resize: vertical; }
.business-trip-field-kind,
.business-trip-field-date { grid-column: span 4; }
.business-trip-field-destination { grid-column: span 7; }
.business-trip-field-reference { grid-column: span 5; }
.business-trip-field-wide { grid-column: 1 / -1; }
.business-trip-period-guide {
    grid-column: 1 / -1;
    margin: -6px 0 0;
    padding: 11px 13px;
    border: 1px solid var(--blue-border);
    border-radius: 11px;
    color: var(--blue-dark);
    background: var(--blue-soft);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.55;
}
.business-trip-period-guide[data-state="warning"] { color: var(--amber); border-color: var(--amber-border); background: var(--amber-soft); }
.business-trip-period-guide[data-state="ready"] { color: var(--green-text); border-color: var(--green-border); background: var(--green-soft); }
.business-trip-period-guide[data-state="error"] { color: var(--red); border-color: var(--red-border); background: var(--red-soft); }
.business-trip-days-section { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.business-trip-days-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.business-trip-days-heading h3 { margin: 0; font-size: 17px; }
.business-trip-days-heading p,
.business-trip-days-heading span { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.business-trip-days {
    display: grid;
    gap: 10px;
    overflow-x: hidden;
}
.business-trip-day-row {
    display: grid;
    grid-template-columns: minmax(112px, 0.6fr) minmax(180px, 0.9fr) minmax(0, 1.6fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--blue-soft);
}
.business-trip-day-date { font-size: 13px; }
.business-trip-day-type,
.business-trip-day-note { min-width: 0; }
.business-trip-actual-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.8fr);
    gap: 8px;
    padding-top: 1px;
}
.business-trip-actual-fields[hidden] { display: none; }
.business-trip-dialog .form-error { margin: 0; }
.business-trip-dialog-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 24px 18px;
    border-top: 1px solid var(--line);
    background: var(--panel);
}
.business-trip-action-spacer { flex: 1; }
.calendar-legend-mark.business-trip { background: var(--calendar-trip); }
.calendar-legend-mark.outside-work { background: var(--calendar-outside); }
.attendance-heading-actions { display: flex; align-items: center; gap: 9px; }
.business-trip-entry-button {
    color: var(--on-color);
    background: var(--indigo-fill);
    border: 1px solid var(--indigo-border);
    box-shadow: 0 7px 16px rgba(79, 70, 229, 0.22);
}
.business-trip-entry-button:hover { background: var(--indigo-fill); }

@media (max-width: 820px) {
    .business-trip-dialog-body { padding: 18px 20px 20px; }
    .business-trip-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-trip-field-kind,
    .business-trip-field-destination,
    .business-trip-field-reference,
    .business-trip-field-wide { grid-column: 1 / -1; }
    .business-trip-field-date { grid-column: auto; }
    .business-trip-day-row { grid-template-columns: 105px minmax(165px, 0.9fr) minmax(0, 1.4fr); }
}

@media (max-width: 560px) {
    .assignment-dialog.business-trip-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
    .business-trip-dialog form { max-height: calc(100dvh - 20px); }
    .business-trip-dialog .dialog-header { padding: 18px 16px 14px; }
    .business-trip-dialog-body { gap: 18px; padding: 16px; }
    .business-trip-form-grid { grid-template-columns: 1fr; }
    .business-trip-field-kind,
    .business-trip-field-date,
    .business-trip-field-destination,
    .business-trip-field-reference,
    .business-trip-field-wide { grid-column: auto; }
    .business-trip-day-row { grid-template-columns: 1fr; }
    .business-trip-actual-fields { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-trip-actual-fields > :last-child { grid-column: 1 / -1; }
    .business-trip-dialog-actions { align-items: stretch; flex-direction: column; }
    .business-trip-action-spacer { display: none; }
    .business-trip-dialog-actions .button { width: 100%; }
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.site-main { min-height: 100vh; }

.app-shell {
    width: min(1440px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 36px;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 8px 28px rgba(20, 31, 56, 0.05);
}

.brand-block, .login-brand, .header-actions, .section-nav, .welcome-row,
.panel-header, .date-filter { display: flex; align-items: center; }
.brand-block, .login-brand { gap: 12px; }
.brand-link { color: inherit; text-decoration: none; }
.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: var(--on-color);
    background: linear-gradient(145deg, var(--blue), var(--indigo-fill));
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
    font-size: 21px;
    font-weight: 800;
}
.brand-block h1 { margin: 1px 0 0; font-size: 18px; }
.eyebrow, .section-kicker {
    margin: 0;
    color: var(--blue-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}
.header-actions { gap: 9px; }
.header-actions form { margin: 0; }
.server-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--green-border);
    border-radius: 11px;
    color: var(--green-text);
    background: var(--green-soft);
    font-size: 13px;
    font-weight: 700;
}
.server-badge.error { color: var(--red); border-color: var(--red-border); background: var(--red-soft); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(15, 159, 110, 0.12); }

.button, .icon-button {
    border: 0;
    cursor: pointer;
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.button:hover, .icon-button:hover { transform: translateY(-1px); }
.button:disabled, .icon-button:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
.button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
}
.button-primary { color: var(--on-color); background: var(--blue); box-shadow: 0 7px 16px rgba(37, 99, 235, 0.2); }
.button-primary:hover { background: var(--blue-hover); }
.button-secondary { color: var(--blue-dark); background: var(--blue-soft); border: 1px solid var(--blue-border); }
.button-success { color: var(--on-color); background: var(--green); box-shadow: 0 7px 16px rgba(21, 128, 61, 0.22); }
.button-success:hover { background: var(--green); }
.button-excel-primary { color: var(--on-color); background: var(--green); box-shadow: 0 7px 16px rgba(21, 128, 61, 0.22); }
.button-excel-primary:hover { background: var(--green); }
.button-excel-secondary { color: var(--green-text); background: var(--green-soft); border: 1px solid var(--green-border); }
.button-excel-secondary:hover { background: var(--green-soft); }
.button-quiet { color: var(--muted-strong); background: var(--raised); border: 1px solid var(--line); }
.button-danger-quiet { color: var(--red); background: var(--red-soft); border: 1px solid var(--red-border); }
.button-danger-quiet:hover { background: var(--red-soft); }
.button-large { width: 100%; min-height: 50px; }
.button-small { min-height: 32px; padding: 0 11px; border-radius: 9px; font-size: 12px; white-space: nowrap; }
.icon-button { width: 38px; height: 38px; border-radius: 11px; color: var(--blue-dark); background: var(--blue-soft); font-size: 22px; }

.section-nav {
    gap: 6px;
    margin: 16px 0 0;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}
.section-nav a { padding: 8px 13px; border-radius: 9px; color: var(--muted-strong); text-decoration: none; white-space: nowrap; font-size: 13px; font-weight: 700; }
.section-nav a:hover { color: var(--blue-dark); background: var(--blue-soft); }
.section-nav a.active { color: var(--on-color); background: var(--blue); }
.section-nav a.section-nav-report { color: var(--report-text); background: var(--report-bg); }
.section-nav a.section-nav-report:hover { color: var(--report-text); background: var(--report-hover); }
.section-nav a.section-nav-report.active { color: var(--on-color); background: var(--report-active); }
.section-nav a.section-nav-report.active:hover { background: var(--report-active-hover); }
.section-nav a.section-nav-report:focus-visible { outline-color: var(--report-text); }

.welcome-row { justify-content: space-between; gap: 24px; margin: 30px 4px 20px; }
.welcome-row h2 { margin: 6px 0 7px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.035em; }
.welcome-row p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.manage-welcome { margin-top: 32px; }
.page-heading { margin-top: 28px; }

.manage-menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.manage-menu-card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 120px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: inherit; background: var(--panel); box-shadow: var(--shadow); text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.manage-menu-card::after { content: ""; position: absolute; top: -36px; right: -30px; width: 120px; height: 120px; border-radius: 50%; opacity: 0.75; }
.manage-menu-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 20px 44px rgba(20, 31, 56, 0.12); }
.manage-menu-card strong { display: block; margin: 6px 22px 4px 0; font-size: 18px; letter-spacing: -0.03em; }
.manage-menu-card p { position: relative; z-index: 1; max-width: 100%; margin: 0; padding-right: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.manage-menu-link { position: absolute; z-index: 1; top: 14px; right: 14px; color: var(--blue-dark); font-size: 18px; font-weight: 800; }
.manage-menu-blue::after { background: var(--blue-soft); }
.manage-menu-amber::after { background: var(--amber-soft); }
.manage-menu-green::after { background: var(--green-soft); }
.manage-menu-slate::after { background: var(--raised); }
.manage-menu-violet::after { background: var(--indigo-soft); }
.manage-menu-cyan::after { background: var(--cyan-soft); }
.manage-menu-rose::after { background: var(--red-soft); }
.manage-menu-download { min-height: 120px; border-color: var(--green-border); background: linear-gradient(145deg, var(--green-soft) 0%, var(--panel) 74%); }
.manage-menu-download::after { top: -42px; right: -28px; width: 145px; height: 145px; background: var(--green-soft); opacity: 0.55; }
.manage-menu-download:hover { border-color: var(--green-border); box-shadow: 0 20px 44px rgba(15, 159, 110, 0.16); }
.manage-menu-download .section-kicker { color: var(--green-text); }
.manage-menu-download > strong { max-width: 100%; font-size: 18px; }
.manage-menu-download > p { max-width: 100%; padding-right: 0; }
.download-platform-badge { position: absolute; z-index: 2; top: 17px; right: 18px; padding: 5px 9px; border: 1px solid var(--green-border); border-radius: 999px; color: var(--green-text); background: rgba(240, 253, 244, 0.92); font-size: 10px; font-weight: 900; letter-spacing: 0.04em; }
.download-android-icon { position: absolute; z-index: 1; top: 50px; right: 25px; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: var(--green-text); background: var(--panel); box-shadow: 0 8px 22px rgba(8, 118, 79, 0.13); }
.download-android-icon svg { width: 32px; height: 32px; overflow: visible; }
.download-android-icon path { fill: currentColor; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.download-android-icon path:last-of-type { fill: none; }
.download-android-icon circle { fill: var(--on-color); }
.download-card-action { position: relative; z-index: 2; display: inline-flex; align-items: center; align-self: stretch; justify-content: center; gap: 8px; min-height: 36px; margin-top: auto; padding: 0 13px; border-radius: 10px; color: var(--on-color); background: var(--green); box-shadow: 0 8px 18px rgba(15, 159, 110, 0.22); font-size: 12px; font-weight: 850; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.download-card-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.manage-menu-download:hover .download-card-action { background: var(--green); box-shadow: 0 10px 22px rgba(8, 118, 79, 0.28); transform: translateY(-1px); }

.main-calendar-stage { display: grid; width: min(1778px, calc(100vw - 40px), calc(50vw + 700px)); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 18px; margin: 6px 0 18px; }
.main-calendar-stage > .personal-attendance-panel { min-width: 0; margin: 0; }
.main-calendar-stage > .team-attendance-panel { align-self: start; box-shadow: var(--shadow); }
.main-app-download { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin: 22px 0 12px; }
.main-app-download-item { display: grid; gap: 7px; }
.main-app-download-meta { color: var(--muted); font-size: 12px; text-align: center; }
.main-app-download .button { min-height: 44px; gap: 8px; }
.personal-attendance-header { align-items: flex-end; }
.calendar-view-switch { display: inline-flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); }
.calendar-view-switch .button { min-height: 34px; padding: 0 14px; border-color: transparent; }
.calendar-view-switch .button.active { color: var(--on-color); border-color: var(--blue); background: var(--blue); }
.personal-work-progress { margin-bottom: 18px; }
.personal-work-progress[aria-busy="true"] .work-progress-grid { opacity: 0.55; }
.personal-work-progress-header { margin-bottom: 9px; }
.personal-work-progress-header h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -0.025em; }
.work-progress-notice { display: flex; align-items: center; gap: 13px; margin-bottom: 11px; padding: 9px 12px; border: 1px solid var(--blue-border); border-radius: 12px; color: var(--muted-strong); background: var(--blue-soft); font-size: 11px; line-height: 1.5; }
.work-progress-notice strong { flex: 0 0 auto; color: var(--blue-dark); }
.work-progress-notice ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.work-progress-notice li { display: flex; align-items: center; gap: 6px; }
.work-progress-notice li::before { width: 4px; height: 4px; border-radius: 50%; background: var(--blue-soft); content: ""; flex: 0 0 auto; }
.work-progress-live { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; padding: 9px 12px; border: 1px solid var(--green-border); border-radius: 11px; color: var(--green-text); background: var(--green-soft); font-size: 11px; }
.work-progress-live[hidden] { display: none; }
.work-progress-live strong { flex: 0 0 auto; }
.work-progress-live span { color: var(--green-text); }
.work-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transition: opacity 140ms ease; }
.work-progress-card { padding: 17px 18px; border: 1px solid var(--blue-border); border-radius: 16px; background: linear-gradient(145deg, var(--blue-soft) 0%, var(--panel) 72%); }
.work-progress-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.work-progress-card-header h4 { margin: 4px 0 0; font-size: 16px; }
.work-progress-card-header time { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.work-progress-value { display: flex; align-items: baseline; gap: 7px; margin: 17px 0 11px; }
.work-progress-value strong { color: var(--blue-dark); font-size: clamp(25px, 3vw, 34px); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.work-progress-value span { color: var(--muted); font-size: 13px; }
.work-progress-value b { color: var(--muted-strong); font-variant-numeric: tabular-nums; }
.work-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--blue-soft); }
.work-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--indigo-fill)); transition: width 220ms ease; }
.work-progress-status { margin: 9px 0 13px; color: var(--blue-dark); font-size: 12px; font-weight: 800; }
.work-progress-status.complete { color: var(--green-text); }
.work-progress-status.overtime { color: var(--purple); }
.work-progress-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; }
.work-progress-breakdown > div { padding: 9px 10px; border: 1px solid var(--blue-border); border-radius: 10px; background: var(--panel); }
.work-progress-breakdown dt { color: var(--muted); font-size: 10px; font-weight: 750; }
.work-progress-breakdown dd { margin: 4px 0 0; color: var(--ink); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.work-progress-issue { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; color: var(--amber); background: var(--amber-soft); font-size: 11px; font-weight: 700; }
.work-progress-unavailable { margin: 0; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); background: var(--raised); text-align: center; font-size: 12px; }
.personal-attendance-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.personal-attendance-summary[hidden], .personal-calendar-legend[hidden], .shared-calendar-guide[hidden] { display: none; }
.personal-attendance-summary > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.personal-attendance-summary span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 750; }
.personal-attendance-summary strong { font-size: 22px; letter-spacing: -0.03em; }
.calendar-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.calendar-mode-row > p { margin: 0; color: var(--muted); text-align: right; font-size: 11px; }
.calendar-mode-switch { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); }
.calendar-mode-switch button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.calendar-mode-switch button[aria-pressed="true"] { color: var(--on-color); background: var(--blue); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2); }
.personal-calendar-toolbar { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto auto; align-items: center; gap: 9px; margin-bottom: 12px; }
.personal-calendar-period { min-width: 0; text-align: center; }
.personal-calendar-period strong, .personal-calendar-period span { display: block; }
.personal-calendar-period strong { font-size: 18px; letter-spacing: -0.025em; }
.personal-calendar-period span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.personal-calendar-legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px 14px; margin: -2px 2px 9px; color: var(--muted); font-size: 10px; }
.personal-calendar-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.shared-calendar-guide { margin: -2px 2px 9px; color: var(--muted); text-align: right; font-size: 10px; }
.calendar-legend-mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--calendar-public); flex: 0 0 auto; }
.calendar-legend-mark.company { background: var(--calendar-company); }
.calendar-legend-mark.leave { border-radius: 2px; background: var(--calendar-leave); }
.calendar-legend-mark.excluded { border: 1px solid var(--line-strong); background: var(--panel); }
.personal-calendar-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.personal-calendar-weekdays, .personal-calendar-grid { display: grid; min-width: 760px; grid-template-columns: repeat(7, minmax(100px, 1fr)); }
.personal-calendar-weekdays { border-bottom: 1px solid var(--line); }
.personal-calendar-weekdays span { padding: 9px 6px; color: var(--muted); background: var(--raised); text-align: center; font-size: 11px; font-weight: 800; }
.personal-calendar-weekdays span:nth-child(7) { color: var(--blue-dark); }
.personal-calendar-weekdays span:nth-child(1) { color: var(--red); }
.personal-calendar-grid { transition: opacity 140ms ease; }
.personal-calendar-grid[aria-busy="true"] { opacity: 0.5; }
.personal-calendar-day, .personal-calendar-placeholder { min-height: 168px; background: var(--panel); }
.personal-calendar-day { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 11px; appearance: none; border: 0; border-radius: 0; color: inherit; text-align: left; cursor: pointer; transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.personal-calendar-weekdays > span:not(:nth-child(7n)), .personal-calendar-grid > :not(:nth-child(7n)) { border-right: 1px solid var(--line); }
.personal-calendar-grid > :not(:nth-last-child(-n + 7)) { border-bottom: 1px solid var(--line); }
.personal-calendar-day.weekend, .personal-calendar-placeholder { background: var(--bg); }
.personal-calendar-day.today { z-index: 1; box-shadow: inset 0 0 0 2px var(--blue); }
.personal-calendar-day:not(:disabled):hover { z-index: 2; color: var(--blue-dark); background: var(--blue-soft); box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.38); }
.personal-calendar-day.today:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--blue); }
.personal-calendar-day:focus-visible { z-index: 3; outline: 3px solid var(--blue-border); outline-offset: -3px; }
.personal-calendar-day:disabled { color: inherit; cursor: default; opacity: 1; }
.personal-calendar-day.is-loading { cursor: progress; background: var(--blue-soft); }
.personal-calendar-grid.week-view .personal-calendar-day { min-height: 220px; }
.personal-calendar-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.personal-calendar-day-heading strong { font-size: 14px; }
.personal-calendar-day.saturday .personal-calendar-day-heading strong { color: var(--blue-dark); }
.personal-calendar-day.sunday .personal-calendar-day-heading strong,
.personal-calendar-day.holiday .personal-calendar-day-heading strong { color: var(--red); }
.personal-calendar-day-heading span { padding: 3px 6px; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: 9px; font-weight: 800; }
.personal-calendar-holiday { display: grid; justify-items: start; gap: 4px; margin-top: 7px; min-width: 0; }
.personal-calendar-holiday-name { display: -webkit-box; overflow: hidden; color: var(--red); font-size: 11px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.personal-calendar-holiday.company .personal-calendar-holiday-name { color: var(--purple); }
.personal-calendar-holiday small { padding: 2px 5px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 8px; font-weight: 800; line-height: 1.2; }
.personal-calendar-leave { display: inline-flex; align-self: flex-start; margin-top: 7px; padding: 3px 7px; border-radius: 999px; color: var(--purple); background: var(--indigo-soft); font-size: 9px; font-weight: 800; }
.personal-calendar-work-tags { display: flex; max-width: 100%; align-self: flex-start; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.personal-calendar-work-tag { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.personal-calendar-work-tag.business-trip { color: var(--indigo); background: var(--blue-soft); }
.personal-calendar-work-tag.outside-work { color: var(--cyan); background: var(--cyan-soft); }
.personal-calendar-times { display: grid; gap: 4px; margin-top: 13px; color: var(--ink); font-size: 12px; font-weight: 700; }
.personal-calendar-holiday + .personal-calendar-times, .personal-calendar-leave + .personal-calendar-times, .personal-calendar-work-tags + .personal-calendar-times { margin-top: 8px; }
.personal-calendar-times .no-record { color: var(--muted); font-weight: 600; }
.personal-calendar-status { display: inline-flex; align-self: flex-start; margin-top: auto; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.personal-calendar-status.complete { color: var(--green-text); background: var(--green-soft); }
.personal-calendar-status.working { color: var(--blue-dark); background: var(--blue-soft); }
.personal-calendar-status.incomplete { color: var(--amber); background: var(--amber-soft); }
.personal-calendar-action { display: inline-flex; align-self: flex-start; margin-top: auto; padding-top: 8px; color: var(--blue-dark); font-size: 10px; font-weight: 800; opacity: 0; transform: translateY(3px); transition: opacity 150ms ease, transform 150ms ease; }
.personal-calendar-status + .personal-calendar-action { margin-top: 7px; padding-top: 0; }
.personal-calendar-day:hover .personal-calendar-action, .personal-calendar-day:focus-visible .personal-calendar-action, .personal-calendar-day.is-loading .personal-calendar-action { opacity: 1; transform: translateY(0); }
.shared-calendar-day { gap: 4px; }
.shared-calendar-title { display: block; width: 100%; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; line-height: 1.5; }
.shared-calendar-overflow { align-self: flex-start; color: var(--blue-dark); font-size: 9px; font-weight: 850; }
.personal-calendar-empty { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.personal-attendance-content { min-width: 0; }
.personal-calendar-area { min-width: 0; }
.team-attendance-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.team-attendance-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.team-attendance-header h3 { margin: 4px 0; font-size: 18px; letter-spacing: -0.025em; }
.team-attendance-header p { margin: 0; color: var(--muted); font-size: 11px; }
.team-attendance-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-bottom: 13px; }
.team-attendance-search { grid-column: 1 / -1; }
.team-attendance-filter input, .team-attendance-filter select { min-height: 38px; font-size: 12px; }
.team-attendance-filter .button { min-height: 38px; }
.team-attendance-list { display: grid; column-gap: 1px; row-gap: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); list-style: none; }
.team-attendance-list[aria-busy="true"] { opacity: 0.55; }
.team-attendance-list li { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--panel); }
.team-attendance-list li:last-child { border-bottom: 0; }
.team-attendance-list li > div { min-width: 0; }
.team-attendance-list strong, .team-attendance-identity > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-attendance-list strong { font-size: 12px; }
.team-attendance-identity > span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.team-attendance-badges { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.team-attendance-list .pill { flex: 0 0 auto; }
.team-attendance-empty { margin: 0; padding: 24px 10px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); background: var(--panel); text-align: center; font-size: 12px; }
.team-attendance-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--muted-strong); font-size: 11px; font-weight: 700; }
.team-attendance-pagination { display: flex; align-items: center; gap: 7px; }
.team-attendance-pagination > span { min-width: 44px; text-align: center; }
.team-attendance-updated { margin: 9px 0 0; color: var(--muted); text-align: right; font-size: 10px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-card { position: relative; overflow: hidden; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 9px 25px rgba(20, 31, 56, 0.04); }
.stat-card::after { content: ""; position: absolute; top: -20px; right: -16px; width: 76px; height: 76px; border-radius: 50%; opacity: 0.65; }
.stat-blue::after { background: var(--blue-soft); }
.stat-amber::after { background: var(--amber-soft); }
.stat-green::after { background: var(--green-soft); }
.stat-slate::after { background: var(--raised); }
.stat-label, .stat-caption { display: block; color: var(--muted); font-size: 12px; }
.stat-label { font-weight: 750; }
.stat-card strong { display: block; margin: 8px 0 5px; font-size: 32px; line-height: 1; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr); gap: 18px; }
.panel { margin-bottom: 18px; padding: 22px; scroll-margin-top: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.panel-accent { border-color: var(--amber-border); background: linear-gradient(180deg, var(--amber-soft) 0%, var(--panel) 40%); }
.panel-header { justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-actions { display: flex; align-items: center; gap: 8px; }
.panel-header h2 { margin: 4px 0 4px; font-size: 20px; letter-spacing: -0.025em; }
.panel-header p { margin: 0; color: var(--muted); font-size: 13px; }

.inline-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-bottom: 20px; padding: 14px; border-radius: 15px; background: var(--raised); }
.form-actions { display: flex; gap: 8px; }
.form-actions [hidden] { display: none; }
.reduced-work-open-ended { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.reduced-work-open-ended input { width: 17px; min-height: 0; height: 17px; margin: 0; padding: 0; }
.reduced-work-open-ended span { margin: 0; white-space: nowrap; }
.reduced-work-form { grid-template-columns: minmax(220px, 1.25fr) repeat(2, minmax(170px, 0.8fr)) minmax(220px, 1fr); }
.reduced-work-user-field { grid-column: 1; }
.reduced-work-start-field { grid-column: 2; }
.reduced-work-end-field { grid-column: 3; }
.reduced-work-open-ended-field { grid-column: 4; }
.reduced-work-basis-field { grid-column: 1; }
.reduced-work-hours-field { grid-column: 2; }
.reduced-work-note-field { grid-column: 3; }
.reduced-work-form-actions { grid-column: 4; align-self: end; }
label span, .date-filter label { display: block; margin-bottom: 6px; color: var(--muted-strong); font-size: 12px; font-weight: 750; }
input, select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--panel); }
input:focus, select:focus { border-color: var(--blue-border); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11); }

.filter-form { display: flex; align-items: end; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.filter-form label { min-width: 140px; }
.filter-form label:first-child { min-width: min(280px, 100%); }
.filter-form-compact label:first-child { min-width: 220px; }
.filter-actions { display: flex; gap: 8px; }
.assignment-toolbar { align-items: end; flex-wrap: wrap; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); text-align: left; white-space: nowrap; font-size: 11px; letter-spacing: 0.04em; }
td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--blue-soft); }
.empty-cell { padding: 28px 12px; color: var(--muted); text-align: center; }
.attendance-table { table-layout: fixed; }
.attendance-col-employee-number { width: 11%; }
.attendance-col-name { width: 10%; }
.attendance-col-work-date { width: 13%; }
.attendance-col-check-in { width: 17%; }
.attendance-col-check-out { width: 19%; }
.attendance-col-actions { width: 30%; }
.attendance-section-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 18px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(20, 31, 56, 0.05);
}
.attendance-section-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
}
.attendance-section-tabs button:hover { color: var(--blue-dark); background: var(--blue-soft); }
.attendance-section-tabs button[aria-selected="true"] { color: var(--on-color); background: var(--blue); box-shadow: 0 7px 16px rgba(37, 99, 235, 0.2); }
.attendance-section-tabs button:focus-visible { outline: 3px solid var(--blue-border); outline-offset: 2px; }
.attendance-section-panel { display: grid; gap: 18px; }
.attendance-section-panel[hidden] { display: none; }
.attendance-table th:nth-child(-n + 3),
.attendance-table td:nth-child(-n + 3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attendance-time-input { width: 122px; min-height: 34px; padding: 0 8px; }
.attendance-time-cell { min-width: 130px; white-space: nowrap; }
.attendance-check-out-cell { min-width: 170px; }
.attendance-time-value { display: inline-flex; min-width: max-content; align-items: center; gap: 5px; white-space: nowrap; }
.attendance-time-value .pill { padding: 3px 7px; font-size: 10px; }
.attendance-clock { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.attendance-next-day-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: 10px; font-weight: 800; line-height: 1; }
.attendance-action-cell { vertical-align: middle; white-space: normal; }
.attendance-action-cell-empty { color: var(--muted); text-align: center; }
.attendance-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.attendance-actions .button-small { min-height: 28px; padding: 0 7px; border-radius: 8px; font-size: 11px; }
.attendance-more-toggle[aria-expanded="true"] { color: var(--blue-dark); border-color: var(--blue-border); background: var(--blue-soft); }
.attendance-action-menu { position: fixed; z-index: 1200; display: grid; min-width: 190px; max-width: min(260px, calc(100vw - 16px)); max-height: calc(100vh - 16px); padding: 6px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 16px 38px rgba(20, 31, 56, 0.18); }
.attendance-action-menu .button-small { width: 100%; min-height: 34px; justify-content: flex-start; padding: 0 10px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; box-shadow: none; text-align: left; }
.attendance-action-menu .button-small:hover { transform: none; background: var(--raised); }
.attendance-action-menu .button-danger-quiet { color: var(--red); }
.attendance-action-menu .button-danger-quiet:hover { background: var(--red-soft); }
.attendance-action-menu-separator { height: 1px; margin: 5px 4px; background: var(--line); }
.manual-attendance-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.manual-attendance-header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.manual-attendance-panel h3 { margin: 5px 0; font-size: 18px; }
.manual-attendance-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.manual-attendance-form { grid-template-columns: minmax(150px, 0.9fr) repeat(2, minmax(130px, 0.75fr)) minmax(180px, 1.1fr) minmax(220px, 1.35fr) auto; margin: 18px 0 0; padding: 0; background: transparent; }
.manual-attendance-form-admin { grid-template-columns: minmax(180px, 1.1fr) minmax(140px, 0.8fr) repeat(2, minmax(120px, 0.7fr)) minmax(170px, 1fr) minmax(200px, 1.2fr) auto; }
.manual-attendance-form .form-actions { min-width: max-content; white-space: nowrap; }
.manual-attendance-feedback { display: grid; grid-column: 1 / -1; gap: 7px; }
.business-trip-history-panel { border-color: var(--indigo-border); }
.business-trip-history-panel > .panel-header { align-items: flex-start; margin-bottom: 12px; }
.business-trip-history-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.business-trip-history-year-controls { display: grid; grid-template-columns: auto 32px 82px 32px; align-items: center; gap: 6px; }
.business-trip-history-year-controls > .button { width: 32px; min-height: 38px; padding: 0; }
.business-trip-history-tools > .business-trip-history-create { width: auto; padding: 0 16px; white-space: nowrap; }
.business-trip-history-year-field { color: var(--muted-strong); font-size: 12px; font-weight: 750; white-space: nowrap; }
.business-trip-history-year-controls input { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--panel); text-align: center; }
.business-trip-history-summary { min-height: 19px; margin: 16px 0 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
.business-trip-history-list { display: grid; gap: 10px; }
.business-trip-history-item {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(270px, 0.9fr) 92px;
    align-items: center;
    gap: 16px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--blue-soft);
}
.business-trip-history-item[data-status="Cancelled"] { background: var(--raised); }
.business-trip-history-main { min-width: 0; }
.business-trip-history-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.business-trip-history-title strong { color: var(--ink); font-size: 15px; }
.business-trip-history-destination { margin: 7px 0 0; overflow: hidden; color: var(--muted-strong); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.business-trip-history-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.business-trip-history-metrics div { min-width: 0; padding: 8px 10px; border-radius: 9px; background: var(--panel); }
.business-trip-history-metrics dt { color: var(--muted); font-size: 10px; font-weight: 750; }
.business-trip-history-metrics dd { margin: 4px 0 0; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.business-trip-history-action { width: 92px; min-width: 92px; }
.business-trip-history-cancelled { width: 92px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.attendance-day-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.attendance-day-fieldset[hidden] { display: none; }
.attendance-day-fieldset legend { margin-bottom: 6px; padding: 0; color: var(--muted-strong); font-size: 12px; font-weight: 750; }
.attendance-day-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.attendance-day-options label { position: relative; min-width: 0; cursor: pointer; }
.attendance-day-options input { position: absolute; width: 1px; min-height: 1px; opacity: 0; pointer-events: none; }
.attendance-day-options label > span { display: flex; min-height: 58px; align-items: flex-start; justify-content: center; flex-direction: column; margin: 0; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--muted-strong); background: var(--panel); transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.attendance-day-options strong, .attendance-day-options small { display: block; }
.attendance-day-options strong { color: var(--ink); font-size: 12px; }
.attendance-day-options small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 650; }
.attendance-day-options input:checked + span { border-color: var(--blue-border); color: var(--blue-dark); background: var(--blue-soft); box-shadow: inset 0 0 0 1px #2563eb; }
.attendance-day-options input:checked + span strong { color: var(--blue-dark); }
.attendance-day-options input:focus-visible + span { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.attendance-day-options input:disabled + span { cursor: not-allowed; opacity: 0.48; background: var(--raised); }
.attendance-day-fieldset.is-disabled { opacity: 0.72; }
.attendance-day-options-compact { gap: 6px; }
.attendance-day-options-compact label > span { min-height: 42px; padding: 6px 8px; }
.attendance-entry-preview { padding: 10px 12px; border: 1px solid var(--blue-border); border-radius: 10px; color: var(--blue-dark) !important; background: var(--panel); font-size: 12px !important; font-weight: 750; line-height: 1.5; }
.attendance-entry-error { margin: 0; }
.manual-attendance-panel .attendance-entry-error { margin: 0; color: var(--red); font-size: 12px; font-weight: 700; }
.outside-work-form { display: grid; grid-template-columns: minmax(145px, 0.8fr) minmax(135px, 0.7fr) minmax(150px, 0.8fr) repeat(2, minmax(135px, 0.7fr)) auto; align-items: end; gap: 12px; margin-top: 18px; }
.outside-work-form > label { display: grid; gap: 6px; color: var(--muted-strong); font-size: 12px; font-weight: 750; }
.outside-work-form input, .outside-work-form select { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink); background: var(--panel); font: inherit; }
.outside-work-form input:focus, .outside-work-form select:focus { outline: 0; border-color: var(--cyan-border); box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12); }
.outside-work-direct-option { grid-column: span 2; display: grid !important; grid-template-columns: auto 1fr; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); cursor: pointer; }
.outside-work-direct-option[hidden] { display: none !important; }
.outside-work-direct-option input { width: 16px; min-height: 16px; }
.outside-work-direct-option span, .outside-work-direct-option strong, .outside-work-direct-option small { display: block; }
.outside-work-direct-option small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.outside-work-direct-option:has(input:disabled) { cursor: not-allowed; opacity: 0.65; }
.outside-work-reason-field { grid-column: span 3; }
.outside-work-feedback { grid-column: 1 / -1; }
.outside-work-filter label:first-child { min-width: 150px; }
.outside-work-list { display: grid; gap: 10px; }
.outside-work-item { display: grid; grid-template-columns: minmax(210px, 0.9fr) minmax(360px, 1.4fr) 156px; align-items: center; gap: 16px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--blue-soft); }
.outside-work-item[data-status="Cancelled"] { background: var(--raised); opacity: 0.78; }
.outside-work-main { min-width: 0; }
.outside-work-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.outside-work-title strong { color: var(--ink); font-size: 15px; }
.outside-work-reason { margin: 7px 0 0; overflow: hidden; color: var(--muted-strong); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.outside-work-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.outside-work-metrics div { min-width: 0; padding: 8px 10px; border-radius: 9px; background: var(--panel); }
.outside-work-metrics dt { color: var(--muted); font-size: 10px; font-weight: 750; }
.outside-work-metrics dd { margin: 4px 0 0; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.outside-work-end-value { display: flex; align-items: center; gap: 6px; }
.outside-work-end-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.outside-work-end-value .pill { flex: 0 0 auto; padding: 3px 7px; font-size: 10px; }
.outside-work-actions { display: flex; width: 156px; justify-content: flex-end; gap: 6px; }
.attendance-editor-dialog { width: min(620px, calc(100% - 32px)); }
.attendance-editor-form { display: grid; gap: 16px; max-height: min(650px, calc(100vh - 120px)); padding: 20px 22px 22px; overflow-y: auto; }
.attendance-editor-form textarea { width: 100%; min-height: 86px; padding: 10px 12px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--panel); font: inherit; line-height: 1.5; }
.attendance-editor-form textarea:focus { border-color: var(--blue-border); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11); }
.attendance-editor-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.attendance-editor-context > div { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--raised); }
.attendance-editor-context span, .attendance-editor-context strong { display: block; }
.attendance-editor-context span { color: var(--muted); font-size: 11px; font-weight: 750; }
.attendance-editor-context strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.attendance-editor-effect { margin: 0; padding: 11px 12px; border-radius: 10px; color: var(--ink); background: var(--raised); font-size: 12px; font-weight: 700; line-height: 1.55; }
.attendance-editor-bulk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.attendance-editor-bulk-fields[hidden] { display: none; }
.attendance-editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.calendar-attendance-dialog { width: min(560px, calc(100% - 32px)); }
.calendar-attendance-dialog-body { display: grid; gap: 16px; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); padding: 20px 22px 22px; overflow-y: auto; overscroll-behavior: contain; }
.manual-outside-work-dialog { width: min(720px, calc(100% - 32px)); }
.manual-outside-work-dialog form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(760px, calc(100vh - 48px)); }
.manual-outside-work-dialog-body { min-height: 0; padding: 20px 22px 22px; overflow-y: auto; overscroll-behavior: contain; }
.manual-outside-work-dialog .outside-work-form { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.manual-outside-work-dialog .outside-work-direct-option,
.manual-outside-work-dialog .outside-work-reason-field { grid-column: 1 / -1; }
.manual-outside-work-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 22px 18px; border-top: 1px solid var(--line); background: var(--panel); }
.shared-calendar-dialog { width: min(760px, calc(100% - 32px)); }
.shared-calendar-dialog-body { display: grid; min-height: 0; }
.shared-calendar-dialog-list { display: grid; gap: 10px; max-height: min(520px, calc(100vh - 230px)); padding: 18px 22px; overflow-y: auto; }
.shared-calendar-dialog-item { padding: 14px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); }
.shared-calendar-dialog-item-heading { display: flex; min-width: 0; align-items: center; gap: 9px; }
.shared-calendar-dialog-item-heading > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.shared-calendar-dialog-item dl { display: grid; gap: 7px; margin: 12px 0 0; }
.shared-calendar-dialog-item dl > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.shared-calendar-dialog-item dt { color: var(--muted); font-size: 11px; font-weight: 800; }
.shared-calendar-dialog-item dd { min-width: 0; margin: 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.shared-calendar-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 22px 20px; border-top: 1px solid var(--line); }
.calendar-attendance-records { display: grid; gap: 10px; }
.calendar-attendance-record { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); }
.calendar-attendance-record > div { min-width: 0; }
.calendar-attendance-record span, .calendar-attendance-record strong { display: block; }
.calendar-attendance-record span { color: var(--muted); font-size: 11px; font-weight: 750; }
.calendar-attendance-record strong { margin-top: 5px; font-size: 18px; font-variant-numeric: tabular-nums; }
.calendar-attendance-hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.calendar-attendance-actions { display: flex; justify-content: flex-end; gap: 8px; }
.assignment-dialog.attendance-history-dialog { width: min(1000px, calc(100% - 32px)); max-height: min(860px, calc(100vh - 32px)); }
.attendance-history-list { display: grid; gap: 12px; max-height: min(680px, calc(100vh - 150px)); padding: 22px 26px 26px; overflow-y: auto; }
.attendance-history-item { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow-wrap: anywhere; }
.attendance-history-item strong, .attendance-history-item span { display: block; }
.attendance-history-item strong { color: var(--ink); font-size: 15px; line-height: 1.55; }
.attendance-history-detail { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: baseline; gap: 12px; margin-top: 13px; }
.attendance-history-detail-label { color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.5; }
.attendance-history-timestamp { color: var(--ink); font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.5; }
.attendance-history-reason { padding-top: 13px; border-top: 1px solid var(--line); }
.attendance-history-reason p { margin: 0; color: var(--blue-dark); font-size: 15px; font-weight: 750; line-height: 1.6; }
.annual-leave-form { margin-bottom: 0; }
.attendance-export-form { grid-template-columns: minmax(180px, 260px) auto; margin-bottom: 0; }
.attendance-export-form .form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 320px; max-width: 100%; }
.attendance-export-form .form-actions .button { min-height: 42px; padding: 0 12px; white-space: nowrap; }
.user-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-hint { align-self: center; margin: 0; color: var(--muted); font-size: 0.88rem; }
.annual-leave-user-table { table-layout: fixed; min-width: 480px; }
.annual-leave-user-table .annual-leave-user-col-number { width: 30%; }
.annual-leave-user-table .annual-leave-user-col-name { width: 30%; }
.annual-leave-user-table .annual-leave-user-col-action { width: 40%; }
.annual-leave-user-table td:first-child,
.annual-leave-user-table td:nth-child(2) { overflow-wrap: anywhere; }
.annual-leave-user-table td:last-child .button { width: 112px; }
.annual-leave-user-row { cursor: pointer; }
.annual-leave-user-row.selected td { background: var(--blue-soft); }
.annual-leave-user-row .pill { margin-left: 6px; }
.filter-form .annual-leave-filter-check { display: flex; align-items: center; gap: 8px; min-height: 42px; cursor: pointer; }
.annual-leave-filter-check input { width: 17px; min-height: 0; height: 17px; margin: 0; padding: 0; }
.annual-leave-filter-check span { margin: 0; white-space: nowrap; }
.selected-user-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -4px 0 20px; padding: 14px 16px; border: 1px solid var(--blue-border); border-radius: 14px; background: var(--blue-soft); }
.selected-user-banner div > strong, .selected-user-banner div > span { display: block; }
.selected-user-banner div > strong { margin: 4px 0; font-size: 19px; }
.selected-user-banner div > span:last-child { color: var(--muted); font-size: 12px; }
.annual-leave-balance-summary { display: grid; min-width: 280px; gap: 3px; margin-left: auto; padding: 11px 15px; border: 1px solid var(--blue-border); border-radius: 12px; background: var(--panel); }
.annual-leave-balance-summary[hidden] { display: none; }
.annual-leave-balance-summary > span { color: var(--muted-strong); font-size: 11px; font-weight: 800; }
.annual-leave-balance-summary > strong { margin: 0; color: var(--blue-dark); font-size: 21px; }
.annual-leave-balance-summary > small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.annual-leave-balance-summary.is-warning { border-color: var(--red-border); background: var(--red-soft); }
.annual-leave-balance-summary.is-warning > strong,
.annual-leave-balance-summary.is-warning > small { color: var(--red); }
.annual-leave-balance-summary.is-missing { border-color: var(--amber-border); background: var(--amber-soft); }
.annual-leave-balance-summary.is-missing > strong { color: var(--amber); }
#annual-leave-page .annual-leave-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#annual-leave-page [hidden], .annual-leave-dialog [hidden] { display: none !important; }
.assignment-dialog.annual-leave-dialog { width: min(1280px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.annual-leave-dialog[open] { display: flex; flex-direction: column; }
.annual-leave-dialog > .dialog-header, .annual-leave-dialog > .selected-user-banner, .annual-leave-dialog-footer { flex-shrink: 0; }
.annual-leave-dialog .dialog-header { align-items: center; }
.annual-leave-dialog .dialog-header h2 { margin-bottom: 0; }
.annual-leave-dialog-actions { display: flex; align-items: center; gap: 8px; }
.annual-leave-dialog > .selected-user-banner { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 22px; }
.annual-leave-dialog .selected-user-banner > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.annual-leave-dialog .annual-leave-balance-summary { min-width: 0; max-width: 100%; }
.annual-leave-dialog-body { min-height: 0; padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.annual-leave-dialog-body > .panel { margin: 0 0 20px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.annual-leave-dialog-body > .panel:last-child { margin-bottom: 0; }
.annual-leave-dialog .annual-leave-form { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.annual-leave-dialog .annual-leave-form .form-actions { grid-column: 1 / -1; }
.annual-leave-dialog #annual-leave-grant-form { grid-template-columns: repeat(2, minmax(100px, 180px)) auto 1fr; }
.annual-leave-dialog #annual-leave-list-panel table { min-width: 1000px; }
.annual-leave-dialog .filter-form label, .annual-leave-dialog .filter-form label:first-child { min-width: 0; }
.annual-leave-dialog .annual-leave-dialog-status { flex-shrink: 0; margin: 0; padding: 10px 22px; color: var(--blue-dark); background: var(--blue-soft); overflow-wrap: anywhere; }
.annual-leave-dialog .annual-leave-dialog-status.error { color: var(--red); background: var(--red-soft); }
.annual-leave-dialog-footer { display: flex; justify-content: flex-end; padding: 12px 22px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
    .assignment-dialog.annual-leave-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
    .annual-leave-dialog .dialog-header { gap: 8px; padding: 14px; }
    .annual-leave-dialog > .selected-user-banner { gap: 10px; padding: 12px 14px; }
    .annual-leave-dialog .selected-user-banner div > strong { font-size: 17px; }
    .annual-leave-dialog .annual-leave-balance-summary { padding: 8px 12px; }
    .annual-leave-dialog-body { padding: 16px 14px; }
    .annual-leave-dialog .annual-leave-form, .annual-leave-dialog #annual-leave-grant-form { grid-template-columns: minmax(0, 1fr); }
    .annual-leave-dialog .list-footer { flex-wrap: wrap; gap: 10px; }
    .annual-leave-dialog .annual-leave-dialog-status, .annual-leave-dialog-footer { padding: 10px 14px; }
    .annual-leave-dialog input, .annual-leave-dialog select { font-size: 16px; }
}
.annual-leave-record-actions { display: flex; align-items: center; gap: 6px; min-width: 116px; }
.policy-note { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid var(--cyan-border); border-radius: 14px; color: var(--ink); background: var(--cyan-soft); font-size: 12px; line-height: 1.55; }
.policy-note strong { color: var(--cyan); }
.attendance-guide-nav { display: flex; gap: 8px; margin: -2px 0 18px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.attendance-guide-nav a { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--blue-border); border-radius: 999px; color: var(--blue-dark); background: var(--panel); font-size: 12px; font-weight: 800; text-decoration: none; }
.attendance-guide-nav a:hover { border-color: var(--blue-border); color: var(--blue-dark); background: var(--blue-soft); }
.attendance-policy-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.attendance-policy-summary article { padding: 19px; border: 1px solid var(--blue-border); border-radius: 18px; background: linear-gradient(145deg, var(--blue-soft) 0%, var(--panel) 76%); box-shadow: var(--shadow); }
.attendance-policy-summary span { display: block; color: var(--muted-strong); font-size: 12px; font-weight: 800; }
.attendance-policy-summary strong { display: block; margin: 8px 0 6px; color: var(--blue-dark); font-size: 25px; letter-spacing: -0.03em; }
.attendance-policy-summary p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.attendance-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.attendance-guide-grid > .panel { margin-bottom: 0; }
.attendance-guide-section { scroll-margin-top: 16px; }
.attendance-policy-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; counter-reset: attendance-policy-step; list-style: none; }
.attendance-policy-flow li { position: relative; min-height: 132px; padding: 43px 15px 15px; border: 1px solid var(--blue-border); border-radius: 14px; background: var(--panel); counter-increment: attendance-policy-step; }
.attendance-policy-flow li::before { content: counter(attendance-policy-step); position: absolute; top: 13px; left: 15px; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: var(--on-color); background: var(--blue); font-size: 11px; font-weight: 850; }
.attendance-policy-flow strong, .attendance-policy-flow span { display: block; }
.attendance-policy-flow strong { margin-bottom: 7px; font-size: 14px; }
.attendance-policy-flow span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.attendance-policy-callout { margin-top: 14px; padding: 15px 17px; border: 1px solid var(--amber-border); border-radius: 14px; color: var(--amber); background: var(--amber-soft); }
.attendance-policy-callout strong { font-size: 13px; }
.attendance-policy-callout p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; }
.attendance-policy-callout + .attendance-policy-help-grid { margin-top: 14px; }
.attendance-policy-rule-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.attendance-policy-rule-list li { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.attendance-policy-rule-list strong, .attendance-policy-rule-list span { display: block; }
.attendance-policy-rule-list strong { margin-bottom: 5px; color: var(--blue-dark); font-size: 13px; }
.attendance-policy-rule-list span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.attendance-policy-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.attendance-policy-help-grid article { padding: 14px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--raised); }
.attendance-policy-help-grid strong { display: block; color: var(--blue-dark); font-size: 13px; }
.attendance-policy-help-grid p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.attendance-guide-note { display: grid; gap: 5px; margin-top: 12px; padding: 13px 14px; border: 1px solid var(--cyan-border); border-radius: 13px; color: var(--cyan); background: var(--cyan-soft); }
.attendance-guide-note strong { font-size: 12px; }
.attendance-guide-note span { font-size: 11px; line-height: 1.6; }
.attendance-guide-note-warning { border-color: var(--amber-border); color: var(--amber); background: var(--amber-soft); }
.attendance-guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.attendance-guide-links a { display: grid; gap: 5px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; color: inherit; background: var(--raised); text-decoration: none; }
.attendance-guide-links a:hover { border-color: var(--blue-border); background: var(--blue-soft); }
.attendance-guide-links strong { color: var(--blue-dark); font-size: 13px; }
.attendance-guide-links span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.attendance-policy-footnote { margin: 0 4px 24px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.annual-grant-control-panel { padding-bottom: 18px; }
.annual-grant-year-form label:first-child { min-width: 145px; }
.annual-grant-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.annual-grant-policy { margin-top: 16px; border: 1px solid var(--cyan-border); border-radius: 14px; color: var(--ink); background: var(--cyan-soft); font-size: 12px; line-height: 1.55; }
.annual-grant-policy summary { padding: 12px 15px; color: var(--cyan); cursor: pointer; font-weight: 800; }
.annual-grant-policy > div { padding: 0 16px 14px; border-top: 1px solid var(--cyan-border); }
.annual-grant-policy p { margin: 10px 0 0; }
.annual-grant-policy ul { margin: 8px 0 0; padding-left: 20px; }
.annual-grant-policy code { color: var(--cyan); font-weight: 750; }
.annual-grant-stats { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.annual-grant-table { min-width: 980px; }
.annual-grant-user-cell strong, .annual-grant-user-cell span, .annual-grant-table td small { display: block; }
.annual-grant-user-cell span, .annual-grant-table td small { margin-top: 4px; color: var(--muted); font-size: 11px; white-space: normal; }
.annual-grant-period-cell { min-width: 190px; white-space: nowrap; }
.annual-grant-basis-cell { min-width: 210px; }
.annual-grant-auto-cell { min-width: 190px; }
.annual-grant-auto-cell > strong { display: block; color: var(--ink); font-size: 15px; }
.annual-grant-apply-button { margin-top: 6px; padding: 0; border: 0; color: var(--blue-dark); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.annual-grant-apply-button:hover { text-decoration: underline; }
.annual-grant-value-input { display: flex; align-items: center; gap: 7px; width: 128px; }
.annual-grant-value-input input { min-height: 36px; padding: 0 9px; }
.annual-grant-value-input span { color: var(--muted); font-size: 12px; }
.annual-grant-final-cell { min-width: 215px; }
.annual-grant-balance { display: grid; gap: 3px; margin-top: 8px; }
.annual-grant-balance strong { color: var(--blue-dark); font-size: 12px; }
.annual-grant-balance small { margin-top: 0 !important; }
.annual-grant-balance.is-warning strong,
.annual-grant-balance.is-warning small { color: var(--red); }
.annual-grant-balance.is-missing strong { color: var(--ink); }
.annual-grant-balance.is-missing small { color: var(--amber); }
.annual-grant-dirty-row td { background: var(--amber-soft); }
.annual-grant-unavailable-row td { color: var(--muted); background: var(--raised); }
.holiday-form { margin-bottom: 0; }
.holiday-sync-form label:first-child { min-width: 140px; }
.holiday-filter-form label:first-child { min-width: 110px; }
.holiday-filter-check { display: flex; min-width: auto !important; align-items: center; gap: 7px; min-height: 42px; padding: 0 4px; }
.holiday-filter-check input { width: 17px; min-height: 17px; margin: 0; }
.holiday-filter-check span { margin: 0; white-space: nowrap; }
.holiday-date-cell { min-width: 128px; white-space: nowrap; }
.holiday-record-actions { display: flex; align-items: center; gap: 6px; min-width: 116px; }
.user-account-status { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.user-actions { display: flex; align-items: center; gap: 6px; min-width: 188px; }
.holiday-excluded-row td { color: var(--muted); background: var(--raised); }
.action-log-filter-panel { padding-bottom: 18px; }
.action-log-filter { width: min(100%, 650px); max-width: none; }
.action-log-filter > label, .action-log-filter > label:first-child { min-width: 0; }
.action-log-filter-date { flex: 0 0 150px; }
.action-log-filter-category { flex: 0 0 120px; }
.action-log-filter-type { flex: 0 0 165px; }
.action-log-filter-person { flex: 0 0 210px; }
.action-log-table { min-width: 900px; }
.action-log-time { min-width: 170px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.action-log-person strong, .action-log-person span { display: block; }
.action-log-person span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.action-log-dialog { width: min(900px, calc(100% - 32px)); max-height: min(850px, calc(100vh - 32px)); }
.action-log-dialog-body { display: grid; gap: 22px; max-height: min(680px, calc(100vh - 170px)); padding: 20px 22px 24px; overflow-y: auto; }
.action-log-dialog-body h3 { margin: 0 0 10px; font-size: 15px; }

.suggestion-compose-panel { border-color: var(--indigo-border); background: linear-gradient(180deg, var(--purple-soft) 0%, var(--panel) 46%); }
.suggestion-form { display: grid; gap: 14px; }
.suggestion-form-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.suggestion-title-field { min-width: 0; }
.suggestion-anonymous-check, .suggestion-mine-check { display: flex; min-width: 0 !important; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.suggestion-anonymous-check input, .suggestion-mine-check input { width: 17px; min-height: 0; height: 17px; margin: 0; padding: 0; }
.suggestion-anonymous-check span, .suggestion-mine-check span { margin: 0; white-space: nowrap; }
.suggestion-form textarea, .suggestion-comment-form textarea { width: 100%; padding: 10px 12px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--panel); font: inherit; line-height: 1.6; }
.suggestion-form textarea:focus, .suggestion-comment-form textarea:focus { border-color: var(--blue-border); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11); }
.suggestion-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.suggestion-form-footer .form-help { margin: 0; }
.suggestion-filter-form .suggestion-mine-check { align-self: end; }
.suggestion-list { display: grid; gap: 10px; }
.suggestion-list[aria-busy="true"] { opacity: 0.58; }
.suggestion-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); transition: border-color 150ms ease, box-shadow 150ms ease; }
.suggestion-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 26px rgba(20, 31, 56, 0.07); }
.suggestion-card-header { display: flex; align-items: center; gap: 9px; }
.suggestion-card-author { color: var(--muted); font-size: 12px; font-weight: 700; }
.suggestion-card-title { display: block; max-width: 100%; margin: 11px 0 7px; padding: 0; overflow: hidden; border: 0; color: var(--ink); background: transparent; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.suggestion-card-title:hover { color: var(--blue-dark); }
.suggestion-card-excerpt { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted-strong); font-size: 13px; line-height: 1.65; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.suggestion-card-footer { display: flex; align-items: center; gap: 14px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.suggestion-card-footer time { color: var(--muted); font-size: 11px; }
.suggestion-card-metrics { display: flex; gap: 10px; margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 750; }
.suggestion-recommendation-metric.active { color: var(--blue-dark); }
.suggestion-dialog { width: min(820px, calc(100% - 32px)); max-height: min(880px, calc(100vh - 32px)); }
.suggestion-dialog-body { max-height: min(710px, calc(100vh - 160px)); padding: 20px 22px 24px; overflow-y: auto; }
.suggestion-detail-content { min-height: 100px; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggestion-detail-actions, .suggestion-owner-actions { display: flex; align-items: center; gap: 8px; }
.suggestion-detail-actions { justify-content: space-between; margin-top: 18px; }
#suggestion-recommend.active { color: var(--on-color); border-color: var(--blue); background: var(--blue); }
.suggestion-comments { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.suggestion-comments-header { margin-bottom: 13px; }
.suggestion-comments-header h3 { margin: 0 0 5px; font-size: 16px; }
.suggestion-comments-header p { margin: 0; color: var(--muted); font-size: 11px; }
.suggestion-comment-list { display: grid; gap: 8px; }
.suggestion-comment { position: relative; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.suggestion-comment-header { display: flex; align-items: center; gap: 9px; }
.suggestion-comment-header strong { font-size: 12px; }
.suggestion-comment-header span { color: var(--muted); font-size: 10px; }
.suggestion-comment > p { margin: 8px 0 0; color: var(--ink); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggestion-comment-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }
.suggestion-comment-actions .button { min-height: 27px; }
.suggestion-comment-form { display: grid; gap: 9px; margin-top: 14px; padding: 14px; border: 1px solid var(--blue-border); border-radius: 13px; background: var(--blue-soft); }
.suggestion-comment-form .form-actions { justify-content: flex-end; }
.schedule-calculation-notice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--amber-border); border-radius: 12px; color: var(--amber); background: var(--amber-soft); font-size: 12px; font-weight: 700; line-height: 1.55; }
.schedule-compose-panel { border-color: var(--blue-border); background: linear-gradient(180deg, var(--blue-soft) 0%, var(--panel) 46%); }
.schedule-compose-panel[hidden] { display: none; }
.schedule-form { display: grid; gap: 15px; }
.schedule-basic-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.75fr) minmax(180px, 0.75fr); gap: 10px; }
.schedule-title-field { min-width: 0; }
.schedule-period-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.schedule-content-field small, .schedule-attendee-fieldset legend small { color: var(--muted); font-size: 10px; font-weight: 700; }
.schedule-form textarea { width: 100%; padding: 10px 12px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--ink); background: var(--panel); font: inherit; line-height: 1.6; }
.schedule-form textarea:focus { border-color: var(--blue-border); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11); }
.schedule-attendee-fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.schedule-attendee-fieldset legend { padding: 0 4px; color: var(--muted-strong); font-size: 12px; font-weight: 800; }
.schedule-attendee-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.schedule-attendee-toolbar label { min-width: 0; }
.schedule-attendee-summary { color: var(--muted); font-size: 11px; font-weight: 750; white-space: nowrap; }
.schedule-attendee-actions { display: flex; gap: 7px; }
.schedule-attendee-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; max-height: 210px; padding: 3px; overflow-y: auto; }
.schedule-attendee-options[aria-busy="true"] { opacity: 0.58; }
.schedule-attendee-options .empty-state { grid-column: 1 / -1; margin: 0; padding: 22px 12px; }
.schedule-attendee-option { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.schedule-attendee-option:has(input:checked) { border-color: var(--blue-border); background: var(--blue-soft); }
.schedule-attendee-option input { width: 17px; min-height: 0; height: 17px; margin: 0; padding: 0; flex: 0 0 auto; }
.schedule-attendee-option span { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.schedule-attendee-option small { display: block; margin-top: 3px; color: var(--amber); font-size: 9px; }
.schedule-selected-attendees { display: flex; min-height: 28px; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.schedule-attendee-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; color: var(--green-text); background: var(--green-soft); font-size: 11px; font-weight: 800; }
.schedule-attendee-empty { color: var(--muted); font-size: 11px; }
.schedule-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.schedule-form-footer > p { margin: 0; color: var(--muted); font-size: 12px; }
.schedule-filter-form { justify-content: stretch; }
.schedule-filter-form > label { flex: 1 1 145px; min-width: 0; }
.schedule-filter-form > .schedule-filter-keyword { flex: 1.5 1 240px; min-width: 180px; }
.schedule-mine-check { display: flex; flex: 0 0 auto !important; min-width: 0 !important; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.schedule-mine-check input { width: 17px; min-height: 0; height: 17px; margin: 0; padding: 0; }
.schedule-mine-check span { margin: 0; white-space: nowrap; }
.schedule-list-section { margin-bottom: 18px; }
.schedule-list-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 24px 4px 12px; }
.schedule-list-header h2 { margin: 4px 0 0; font-size: 21px; }
.schedule-list-header > span { color: var(--muted); font-size: 12px; font-weight: 750; }
.schedule-list-scroll { width: 100%; padding-bottom: 2px; overflow-x: auto; }
.schedule-list-columns,
.schedule-list-item { display: grid; grid-template-columns: 125px 70px 125px 70px 80px minmax(180px, 1fr) 140px 80px 120px 28px; gap: 12px; min-width: 1180px; }
.schedule-list-columns { align-items: center; padding: 0 14px 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.025em; }
.schedule-list-columns > span:nth-child(3) { padding-left: 14px; }
.schedule-list-columns > span:nth-child(5) { text-align: center; }
.schedule-list { display: grid; min-width: 1180px; gap: 8px; }
.schedule-list[aria-busy="true"] { opacity: 0.58; }
.schedule-list-item { width: 100%; min-height: 64px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--panel); box-shadow: 0 8px 24px rgba(20, 31, 56, 0.04); cursor: pointer; text-align: left; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.schedule-list-item:hover { transform: translateY(-1px); border-color: var(--blue-border); box-shadow: 0 12px 28px rgba(20, 31, 56, 0.08); }
.schedule-list-date,
.schedule-list-time,
.schedule-list-location,
.schedule-list-attendees,
.schedule-list-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-list-date,
.schedule-list-time { font-variant-numeric: tabular-nums; }
.schedule-list-end-date { padding-left: 14px; border-left: 1px solid var(--line); }
.schedule-list-date { color: var(--ink); font-size: 12.5px; font-weight: 800; letter-spacing: -0.015em; }
.schedule-list-time { color: var(--blue-dark); font-size: 12px; font-weight: 800; }
.schedule-list-type { display: flex; min-width: 0; align-items: center; justify-content: center; }
.schedule-list-type .pill { width: 72px; min-height: 26px; justify-content: center; padding: 4px 8px; line-height: 1; white-space: nowrap; }
.schedule-list-title { min-width: 0; margin: 0; overflow: hidden; font-size: 15.5px; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.schedule-list-location,
.schedule-list-attendees,
.schedule-list-author { color: var(--muted-strong); font-size: 12.5px; font-weight: 750; }
.schedule-list-arrow { display: grid; width: 28px; height: 28px; align-self: center; place-items: center; border-radius: 50%; color: var(--muted); font-size: 22px; transition: color 150ms ease, background-color 150ms ease; }
.schedule-list-item:hover .schedule-list-arrow { color: var(--blue-dark); background: var(--blue-soft); }
.schedule-list-section .list-footer { justify-content: flex-end; }
.schedule-dialog { width: min(760px, calc(100% - 32px)); max-height: min(860px, calc(100vh - 32px)); }
.schedule-dialog-body { max-height: min(690px, calc(100vh - 160px)); padding: 20px 22px 24px; overflow-y: auto; }
.schedule-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.schedule-detail-grid > div { padding: 12px 13px; border-radius: 11px; background: var(--raised); }
.schedule-detail-grid dt { margin: 0 0 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.schedule-detail-grid dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 750; line-height: 1.55; overflow-wrap: anywhere; }
.schedule-detail-grid .schedule-detail-attendees { grid-column: 1 / -1; }
.schedule-detail-content { min-height: 100px; margin: 0 0 16px; padding: 14px; border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; color: var(--ink); background: var(--raised); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.schedule-dialog-notice { margin-bottom: 16px; }
.schedule-detail-actions { display: flex; justify-content: flex-end; gap: 8px; }
.schedule-detail-actions .button[hidden] { display: none; }
.action-log-meta, .action-log-extra { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.action-log-meta dt, .action-log-meta dd, .action-log-extra dt, .action-log-extra dd { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.action-log-meta dt, .action-log-extra dt { color: var(--muted-strong); background: var(--raised); font-size: 12px; font-weight: 800; }
.action-log-meta dd, .action-log-extra dd { overflow-wrap: anywhere; font-size: 13px; }
.action-log-meta > :nth-last-child(-n + 2), .action-log-extra > :nth-last-child(-n + 2) { border-bottom: 0; }
.action-log-change-table { min-width: 620px; }
.action-log-change-table td:first-child { color: var(--muted-strong); font-weight: 800; }
.action-log-detail-empty { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 12px; }
.attendance-change-filter-panel { padding-bottom: 18px; }
.attendance-change-filter-panel > .panel-header { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 0; }
.attendance-change-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, 0.85fr)) repeat(2, minmax(0, 1.1fr)) auto; max-width: none; }
.attendance-change-filter > label, .attendance-change-filter > label:first-child { min-width: 0; }
.attendance-change-filter > .filter-actions { align-self: end; justify-content: flex-end; }
.attendance-change-table { min-width: 1320px; }
.attendance-change-table td:nth-child(2) .pill { white-space: nowrap; }
.attendance-change-time, .attendance-change-work-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.attendance-change-time { min-width: 170px; }
.attendance-change-person { min-width: 130px; }
.attendance-change-person strong, .attendance-change-person span { display: block; }
.attendance-change-person span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.attendance-change-person .attendance-change-actor-scope { color: var(--blue-dark); font-weight: 750; }
.attendance-change-summary { min-width: 240px; line-height: 1.55; white-space: pre-line; }
.attendance-change-reason { min-width: 210px; max-width: 340px; color: var(--blue-dark); font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.attendance-change-actions { display: flex; min-width: 132px; align-items: center; gap: 6px; }
.attendance-change-dialog { width: min(900px, calc(100% - 32px)); max-height: min(850px, calc(100vh - 32px)); }
.attendance-change-dialog-body { display: grid; gap: 22px; max-height: min(680px, calc(100vh - 170px)); padding: 20px 22px 24px; overflow-y: auto; }
.attendance-change-dialog-body h3 { margin: 0 0 10px; font-size: 15px; }
.attendance-change-meta { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.attendance-change-meta dt, .attendance-change-meta dd { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.attendance-change-meta dt { color: var(--muted-strong); background: var(--raised); font-size: 12px; font-weight: 800; }
.attendance-change-meta dd { overflow-wrap: anywhere; font-size: 13px; }
.attendance-change-meta > :nth-last-child(-n + 2) { border-bottom: 0; }
.attendance-change-detail-list { display: grid; gap: 10px; }
.attendance-change-detail { padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.attendance-change-detail > strong { display: block; margin-top: 9px; color: var(--ink); font-size: 14px; line-height: 1.55; }
.attendance-change-detail p { margin: 7px 0 0; color: var(--muted-strong); font-size: 12px; font-variant-numeric: tabular-nums; }
.form-help { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.uid { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.pill { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.pill-green { color: var(--green-text); background: var(--green-soft); }
.pill-blue { color: var(--blue-dark); background: var(--blue-soft); }
.pill-amber { color: var(--amber); background: var(--amber-soft); }
.pill-slate { color: var(--muted-strong); background: var(--raised); }
.pill-violet { color: var(--purple); background: var(--indigo-soft); }

.list-footer { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.list-footer > span { margin-right: auto; font-weight: 750; }
.page-size-label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.page-size-label select { width: 76px; min-height: 34px; padding: 0 8px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.page-button { display: grid; min-width: 34px; height: 34px; padding: 0 8px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted-strong); background: var(--panel); cursor: pointer; font-size: 12px; font-weight: 750; }
.page-button:hover:not(:disabled) { color: var(--blue-dark); border-color: var(--blue-border); background: var(--blue-soft); }
.page-button.active { color: var(--on-color); border-color: var(--blue); background: var(--blue); }
.page-button:disabled { cursor: not-allowed; opacity: 0.45; }
.page-ellipsis { display: grid; width: 24px; height: 34px; place-items: center; color: var(--muted); }

.pending-list { display: grid; gap: 10px; }
.pending-card { padding: 14px; border: 1px solid var(--amber-border); border-radius: 14px; background: var(--panel); }
.pending-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.pending-card time { color: var(--muted); font-size: 11px; }
.pending-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; }
.pending-actions-buttons { grid-template-columns: auto auto; justify-content: end; }
.card-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 7px; min-width: 310px; }
.card-actions > .button-primary { width: 52px; flex: 0 0 52px; }
.card-actions .button-danger-quiet { margin-left: auto; }
.empty-state { padding: 34px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; font-size: 13px; background: var(--panel); }

.assignment-dialog { width: min(720px, calc(100% - 32px)); max-height: min(760px, calc(100vh - 48px)); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--panel); box-shadow: 0 28px 80px rgba(23, 32, 51, 0.28); }
.assignment-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin: 4px 0 7px; font-size: 21px; }
.dialog-header p { margin: 0; color: var(--muted); }
.dialog-search { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 9px; padding: 16px 22px; background: var(--raised); }
.assignment-filter-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }
.user-search-results { display: grid; gap: 8px; max-height: 400px; padding: 16px 22px; overflow-y: auto; }
.user-search-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; }
.user-search-item div { min-width: 0; }
.user-search-item strong, .user-search-item span { display: block; }
.user-search-item span { margin-top: 4px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.assignment-dialog > .pagination { padding: 0 22px 20px; }

.panel-header-responsive { align-items: flex-end; }
.date-filter { gap: 8px; }
.date-filter label { margin: 0 2px 0 0; }
.date-filter input { width: 150px; }

.executive-report-heading-actions,
.executive-report-controls,
.executive-period-switch,
.executive-period-picker,
.executive-simple-picker,
.executive-week-picker,
.executive-list-tools,
.executive-sort-buttons { display: flex; align-items: center; }
.executive-report-heading-actions { gap: 8px; }
.executive-report-heading-actions .button[hidden] { display: none; }
.executive-report-controls { position: relative; justify-content: space-between; gap: 20px; }
.executive-period-switch { gap: 5px; padding: 4px; border-radius: 13px; background: var(--raised); }
.executive-period-switch .button { min-height: 34px; border-color: transparent; background: transparent; }
.executive-period-switch .button[aria-pressed="true"],
.executive-sort-buttons .button[aria-pressed="true"] { color: var(--on-color); border-color: var(--blue); background: var(--blue); }
.executive-period-picker { position: relative; gap: 10px; }
.executive-control-label { color: var(--muted); font-size: 12px; font-weight: 800; }
.executive-simple-picker, .executive-week-picker { gap: 7px; }
.executive-simple-picker[hidden],
.executive-simple-current[hidden],
.executive-week-picker[hidden],
.executive-week-popover[hidden] { display: none; }
.executive-simple-picker input,
.executive-week-current {
    min-height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    color: var(--ink);
    background: var(--panel);
    font-weight: 750;
}
.executive-simple-picker input { padding: 0 11px; }
.executive-week-current { display: flex; min-width: 255px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px; cursor: pointer; }
.executive-week-current:hover { border-color: var(--blue-border); background: var(--blue-soft); }
.executive-week-popover {
    position: absolute;
    z-index: 6;
    top: calc(100% + 10px);
    right: 0;
    width: min(370px, calc(100vw - 40px));
    padding: 13px;
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    background: var(--panel);
    box-shadow: 0 20px 48px rgba(20, 31, 56, 0.2);
}
.executive-week-month-toolbar { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 7px; margin-bottom: 10px; text-align: center; }
.executive-week-month-toolbar strong { font-size: 14px; }
.executive-week-options { display: grid; gap: 6px; }
.executive-week-option {
    display: flex;
    min-height: 43px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: var(--panel);
    cursor: pointer;
    font-weight: 750;
}
.executive-week-option:hover { border-color: var(--blue-border); background: var(--blue-soft); }
.executive-week-option[aria-selected="true"] { color: var(--blue-dark); border-color: var(--blue-border); background: var(--blue-soft); }
.executive-week-option small { color: var(--muted); font-size: 11px; font-weight: 700; }
.executive-current-week { width: 100%; margin-top: 9px; }

.executive-report-context { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 13px 16px; border-left: 3px solid var(--blue); color: var(--muted); background: var(--blue-soft); font-size: 13px; }
.executive-report-context[hidden] { display: none; }
.executive-report-context strong { flex: 0 0 auto; color: var(--ink); font-size: 13px; }

.executive-people-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.executive-people-header h2 { margin: 4px 0; font-size: 20px; }
.executive-people-header p { margin: 0; color: var(--muted); font-size: 13px; }
.executive-list-tools { align-items: flex-end; flex-direction: column; gap: 9px; }
.executive-list-tools > span { color: var(--muted); font-size: 11px; }
.executive-sort-buttons { flex-wrap: wrap; gap: 5px; }
.executive-sort-buttons > span { margin-right: 3px; color: var(--muted); font-size: 11px; font-weight: 800; }
.executive-people-list { display: grid; gap: 9px; }
.executive-people-columns,
.executive-person-row { display: grid; grid-template-columns: minmax(110px, 0.65fr) minmax(200px, 1.2fr) minmax(160px, 0.95fr) minmax(125px, 0.65fr) minmax(125px, 0.7fr); align-items: center; gap: 16px; }
.executive-people-columns { padding: 0 15px 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }
.executive-person-row { min-height: 88px; padding: 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: 0 2px 8px rgba(20, 31, 56, 0.045); transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.executive-person-row:hover { border-color: var(--blue-border); background: var(--blue-soft); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.09); }
.executive-person-row[role="button"] { cursor: pointer; }
.executive-person-row[role="button"]:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--blue-border); outline-offset: -2px; background: var(--blue-soft); }
.executive-person-row.has-record-issue { border-color: var(--amber-border); box-shadow: inset 4px 0 #f59e0b, 0 2px 8px rgba(180, 83, 9, 0.08); }
.executive-person-identity,
.executive-person-work,
.executive-person-adjustment,
.executive-person-leave-balance { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.executive-person-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.executive-person-identity span,
.executive-person-work small,
.executive-person-adjustment small,
.executive-person-leave-balance small { color: var(--muted); font-size: 12px; }
.executive-person-work strong,
.executive-person-adjustment strong { font-size: 13px; font-weight: 750; }
.executive-person-leave-balance strong { color: var(--blue-dark); font-size: 17px; font-weight: 850; }
.executive-person-leave-balance.is-warning strong { color: var(--red); }
.executive-person-leave-balance.is-missing strong { color: var(--amber); }
.executive-person-work.executive-work-metrics { gap: 5px; }
.executive-work-metric { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 10px; color: var(--muted-strong); font-size: 13px; line-height: 1.35; }
.executive-work-metric span { font-size: 13px; font-weight: 750; }
.executive-work-metric strong { color: var(--ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.executive-work-metric.is-primary span { color: var(--ink); }
.executive-work-metric.is-primary strong { color: var(--ink); font-size: 15px; }
.executive-person-value { justify-self: stretch; padding: 10px; border-radius: 9px; color: var(--ink); background: var(--raised); font-size: 13px; text-align: center; }
.executive-person-value.is-mid { color: var(--cyan); background: var(--cyan-soft); }
.executive-person-value.is-high { color: var(--on-color); background: var(--blue-deep); }
.executive-person-value.is-shortfall { color: var(--red); background: var(--red-soft); }
.executive-person-value.is-working,
.executive-person-value.is-complete { color: var(--green-text); background: var(--green-soft); }
.executive-person-value.is-review { color: var(--amber); background: var(--amber-soft); }
.executive-person-value.is-none { color: var(--muted); background: var(--raised); }
.executive-work-track { position: relative; height: 11px; overflow: hidden; border-radius: 99px; background: var(--raised); }
.executive-work-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--blue)); transition: width 280ms ease; }
.executive-work-target { position: absolute; z-index: 1; top: -2px; bottom: -2px; left: 83.333%; width: 2px; background: var(--toast-bg); opacity: 0.6; }
.executive-work-track.has-no-target .executive-work-fill { background: var(--raised); }

.executive-attention-count { display: inline-grid; min-width: 43px; height: 32px; place-items: center; padding: 0 10px; border-radius: 99px; color: var(--amber); background: var(--amber-soft); font-size: 12px; font-weight: 800; }
.executive-attention-list { display: grid; }
.executive-attention-item { display: grid; grid-template-columns: minmax(110px, 0.6fr) minmax(230px, 2fr) auto; align-items: center; gap: 18px; min-height: 57px; padding: 10px 5px; border-top: 1px solid var(--line); }
.executive-attention-identity { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.executive-attention-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.executive-attention-identity span { color: var(--muted); font-size: 10px; }
.executive-attention-item p { margin: 0; color: var(--muted-strong); font-size: 12px; }
.executive-attention-status { min-width: 68px; padding: 6px 9px; border-radius: 8px; font-size: 11px; font-weight: 800; text-align: center; text-decoration: none; }
.executive-attention-status.is-amber { color: var(--amber); background: var(--amber-soft); }
.executive-attention-status.is-red { color: var(--red); background: var(--red-soft); }
.executive-attention-status[href]:hover { text-decoration: underline; }

.assignment-dialog.executive-person-dialog { width: min(1040px, calc(100% - 32px)); max-height: min(900px, calc(100vh - 32px)); }
.executive-person-dialog-body { max-height: min(799px, calc(100vh - 133px)); padding: 18px 22px 24px; overflow-y: auto; }
.executive-person-dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.executive-person-period-picker { display: grid; grid-template-columns: 38px minmax(155px, auto) 38px auto; align-items: center; gap: 7px; }
.executive-person-period-picker input { width: 165px; min-height: 38px; }
.executive-person-period-picker strong { min-width: 210px; color: var(--ink); font-size: 12px; text-align: center; }
.executive-person-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--blue-soft); }
.executive-person-summary.has-full-period { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.executive-person-summary article { display: flex; min-width: 0; min-height: 76px; flex-direction: column; justify-content: center; padding: 12px 16px; }
.executive-person-summary article + article { border-left: 1px solid var(--line); }
.executive-person-summary article:only-child { grid-column: 1 / -1; border-left: 0; }
.executive-person-summary article span, .executive-person-summary article small { display: block; color: var(--muted); }
.executive-person-summary article span { margin-bottom: 5px; font-size: 11px; font-weight: 800; }
.executive-person-summary article strong { display: block; margin-bottom: 4px; font-size: 20px; letter-spacing: -0.03em; }
.executive-person-summary article small { font-size: 11px; line-height: 1.45; }
.executive-person-summary article.is-warning { background: var(--red-soft); }
.executive-person-summary article.is-warning strong { color: var(--red); }
.executive-person-summary article.is-positive { background: var(--green-soft); }
.executive-person-summary article.is-positive strong { color: var(--green-text); }
.executive-person-summary article.is-info { background: var(--blue-soft); }
.executive-person-summary article.is-info strong { color: var(--blue-dark); }
.executive-person-meta { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.executive-person-meta > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.executive-person-meta dt { color: var(--muted); font-size: 11px; font-weight: 800; }
.executive-person-meta dd { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--ink); font-size: 11px; }
.executive-person-meta dd strong { font-size: 12px; }
.executive-person-meta dd small { color: var(--muted); font-size: 11px; }
.executive-person-meta .is-warning dd strong, .executive-person-meta .is-warning dd small { color: var(--red); }
.executive-person-days, .executive-person-trend, .executive-person-activities, .executive-person-attention { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.executive-person-trend, .executive-person-activities, .executive-person-attention { margin-top: 16px; }
.executive-person-trend[hidden], .executive-person-activities[hidden], .executive-person-attention[hidden] { display: none; }
.executive-person-section-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.executive-person-section-header h3 { margin: 3px 0 0; font-size: 16px; }
.executive-person-section-header > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.executive-person-trend { overflow: hidden; }
.executive-person-trend-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 16px 10px; }
.executive-person-trend-header h3 { margin: 3px 0 4px; font-size: 16px; }
.executive-person-trend-header p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.executive-person-trend-legend { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; color: var(--muted); font-size: 11px; font-weight: 750; }
.executive-person-trend-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.executive-person-trend-legend i { width: 22px; border-top: 3px solid var(--blue); }
.executive-person-trend-legend i.is-required { border-color: var(--line-strong); border-top-style: dashed; }
.executive-person-trend-chart { overflow-x: auto; padding: 7px 0 2px; overscroll-behavior-inline: contain; }
.executive-person-trend-chart .empty-state { margin: 0; padding: 24px 16px 28px; }
.executive-person-trend-chart svg { display: block; max-width: none; }
.executive-person-trend-grid { stroke: var(--line); stroke-width: 1; }
.executive-person-trend-axis-label { fill: var(--muted); font-size: 10px; }
.executive-person-trend-axis-label.is-horizontal { font-size: 11px; font-weight: 700; }
.executive-person-trend-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.executive-person-trend-line.is-actual { stroke: var(--blue); }
.executive-person-trend-line.is-required { stroke: var(--line-strong); stroke-dasharray: 6 5; }
.executive-person-trend-point { fill: var(--blue); stroke: var(--panel); stroke-width: 2; cursor: help; }
.executive-person-trend-point:focus { outline: none; fill: var(--blue-dark); stroke: var(--blue-border); stroke-width: 4; }
.executive-person-activities { overflow: hidden; }
.executive-person-activities-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.executive-person-activities-header h3 { margin: 3px 0 4px; font-size: 16px; }
.executive-person-activities-header p { margin: 0; color: var(--muted); font-size: 11px; }
.executive-person-activity-filters { display: flex; align-items: center; gap: 5px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); }
.executive-person-activity-filters button { min-height: 31px; padding: 5px 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.executive-person-activity-filters button:hover { color: var(--blue-dark); background: var(--blue-soft); }
.executive-person-activity-filters button:focus-visible { outline: 3px solid var(--blue-border); outline-offset: 1px; }
.executive-person-activity-filters button[aria-pressed="true"] { color: var(--on-color); background: var(--blue); }
.executive-person-activity-filters button span { display: inline-flex; min-width: 20px; min-height: 20px; align-items: center; justify-content: center; margin-left: 3px; padding: 0 5px; border-radius: 10px; color: inherit; background: rgba(148, 163, 184, 0.18); font-size: 11px; }
.executive-person-activity-filters button[aria-pressed="true"] span { background: var(--panel); }
.executive-person-activity-list { display: grid; }
.executive-person-activity-list .empty-state { margin: 0; padding: 28px 16px; }
.executive-person-activity-row { display: grid; grid-template-columns: minmax(105px, 0.7fr) minmax(78px, auto) minmax(230px, 1.7fr) minmax(150px, 1fr); align-items: center; gap: 13px; min-height: 62px; padding: 10px 16px; border-top: 1px solid var(--line); }
.executive-person-activity-row:first-child { border-top: 0; }
.executive-person-activity-row.needs-review { background: var(--amber-soft); }
.executive-person-activity-row > strong { font-size: 11px; }
.executive-person-activity-type { display: inline-flex; width: fit-content; align-items: center; justify-content: center; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 850; white-space: nowrap; }
.executive-person-activity-type.is-outside { color: var(--blue-dark); background: var(--blue-soft); }
.executive-person-activity-type.is-trip { color: var(--amber); background: var(--amber-soft); }
.executive-person-activity-content, .executive-person-activity-timing { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.executive-person-activity-content strong, .executive-person-activity-timing strong { overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; }
.executive-person-activity-content small, .executive-person-activity-timing small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.executive-person-activity-timing { align-items: flex-end; text-align: right; }
.executive-person-activity-footer { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--line); }
.executive-person-activity-footer > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.executive-person-activity-footer .pagination { justify-content: flex-end; }
.executive-person-activity-note { margin: 0; padding: 10px 16px; border-top: 1px solid var(--blue-border); color: var(--blue-dark); background: var(--blue-soft); font-size: 11px; line-height: 1.5; }
.executive-person-activity-note::before { content: "ⓘ"; margin-right: 6px; font-weight: 900; }
.executive-person-attention { border-color: var(--amber-border); }
.executive-person-attention > summary { border-bottom: 0; cursor: pointer; list-style: none; }
.executive-person-attention > summary::-webkit-details-marker { display: none; }
.executive-person-attention > summary::marker { content: ""; }
.executive-person-attention > summary:focus-visible { outline: 3px solid var(--blue-border); outline-offset: -3px; border-radius: 15px; }
.executive-person-attention[open] > summary { border-bottom: 1px solid var(--amber-border); }
.executive-person-section-heading { display: flex; flex-direction: column; gap: 3px; }
.executive-person-section-heading strong { color: var(--ink); font-size: 16px; }
.executive-person-attention-toggle { display: inline-flex; align-items: center; gap: 9px; }
.executive-person-attention-toggle i { color: var(--amber); font-size: 16px; font-style: normal; transition: transform 150ms ease; }
.executive-person-attention[open] .executive-person-attention-toggle i { transform: rotate(180deg); }
.executive-person-days-list, .executive-person-attention-list { display: grid; }
.executive-person-day-row { display: grid; grid-template-columns: minmax(120px, 0.75fr) minmax(170px, 1.1fr) minmax(180px, 1.3fr) minmax(90px, 0.55fr); align-items: center; gap: 16px; min-height: 70px; padding: 11px 16px; border-top: 1px solid var(--line); }
.executive-person-day-row:first-child { border-top: 0; }
.executive-person-day-row > strong { font-size: 12px; }
.executive-person-day-row.has-issue { background: var(--amber-soft); }
.executive-person-day-row.is-working { background: var(--green-soft); }
.executive-person-day-row.has-shortfall .executive-person-day-value strong { color: var(--red); }
.executive-person-day-record, .executive-person-day-value { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.executive-person-day-record span { font-size: 12px; font-weight: 750; }
.executive-person-day-record small, .executive-person-day-value small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.executive-person-day-graph { min-width: 0; }
.executive-person-day-value { align-items: flex-end; text-align: right; }
.executive-person-day-value strong { font-size: 12px; }
.executive-person-month-row { display: grid; grid-template-columns: minmax(80px, 0.5fr) minmax(235px, 1.45fr) minmax(180px, 1.1fr) minmax(105px, 0.65fr); align-items: center; gap: 16px; min-height: 66px; padding: 10px 16px; border-top: 1px solid var(--line); }
.executive-person-month-row:first-child { border-top: 0; }
.executive-person-month-row[role="button"] { cursor: pointer; transition: background 150ms ease; }
.executive-person-month-row[role="button"]:hover, .executive-person-month-row[role="button"]:focus-visible { outline: 0; background: var(--blue-soft); }
.executive-person-month-row.has-issue { background: var(--amber-soft); }
.executive-person-month-row.is-future { color: var(--muted); background: var(--blue-soft); }
.executive-person-month-date, .executive-person-month-work { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.executive-person-month-date strong, .executive-person-month-work strong, .executive-person-month-balance { font-size: 12px; }
.executive-person-month-date small, .executive-person-month-work small, .executive-person-month-adjustment { color: var(--muted); font-size: 11px; line-height: 1.45; }
.executive-person-month-adjustment { min-width: 0; }
.executive-person-month-balance { justify-self: end; text-align: right; }
.executive-person-month-balance.is-positive { color: var(--green-text); }
.executive-person-month-balance.is-warning { color: var(--red); }
.executive-person-days-list[data-period="daily"],
.executive-person-days-list[data-period="weekly"],
.executive-person-days-list[data-period="yearly"] { gap: 9px; padding: 12px; background: var(--raised); }
.executive-person-days-list[data-period="monthly"] { gap: 12px; padding: 12px; background: var(--raised); }
.executive-person-week-group { overflow: hidden; border: 1px solid var(--week-border); border-radius: 14px; background: var(--week-background); box-shadow: 0 2px 8px rgba(20, 31, 56, 0.04); }
.executive-person-week-group.is-blue { --week-border: var(--blue-border); --week-background: var(--blue-soft); }
.executive-person-week-group.is-slate { --week-border: var(--line); --week-background: var(--raised); }
.executive-person-week-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--week-border); }
.executive-person-week-header strong { color: var(--ink); font-size: 13px; }
.executive-person-week-header span { color: var(--muted); font-size: 11px; font-weight: 750; }
.executive-person-week-days { display: grid; gap: 7px; padding: 8px; }
.executive-person-days-list[data-period="daily"] .executive-person-day-row,
.executive-person-days-list[data-period="weekly"] .executive-person-day-row,
.executive-person-week-days .executive-person-day-row { grid-template-columns: minmax(120px, 0.75fr) minmax(170px, 1.1fr) minmax(180px, 1.3fr) minmax(90px, 0.55fr); align-items: center; gap: 16px; min-height: 72px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel); box-shadow: 0 2px 7px rgba(20, 31, 56, 0.035); }
.executive-person-days-list[data-period="daily"] .executive-person-day-row.is-non-working,
.executive-person-days-list[data-period="weekly"] .executive-person-day-row.is-non-working,
.executive-person-week-days .executive-person-day-row.is-non-working { border-color: var(--line); background: var(--raised); }
.executive-person-days-list[data-period="daily"] .executive-person-day-row.is-working,
.executive-person-days-list[data-period="weekly"] .executive-person-day-row.is-working,
.executive-person-week-days .executive-person-day-row.is-working { border-color: var(--green-border); background: var(--green-soft); }
.executive-person-days-list[data-period="daily"] .executive-person-day-row.has-shortfall:not(.has-issue),
.executive-person-days-list[data-period="weekly"] .executive-person-day-row.has-shortfall:not(.has-issue),
.executive-person-week-days .executive-person-day-row.has-shortfall:not(.has-issue) { border-color: var(--red-border); background: var(--red-soft); }
.executive-person-days-list[data-period="daily"] .executive-person-day-row.has-issue,
.executive-person-days-list[data-period="weekly"] .executive-person-day-row.has-issue,
.executive-person-week-days .executive-person-day-row.has-issue { border-color: var(--amber-border); background: var(--amber-soft); box-shadow: inset 3px 0 #f59e0b; }
.executive-person-days-list[data-period="yearly"] .executive-person-month-row { min-height: 72px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel); box-shadow: 0 2px 7px rgba(20, 31, 56, 0.035); }
.executive-person-days-list[data-period="yearly"] .executive-person-month-row[role="button"]:hover,
.executive-person-days-list[data-period="yearly"] .executive-person-month-row[role="button"]:focus-visible { border-color: var(--blue-border); background: var(--blue-soft); box-shadow: 0 7px 18px rgba(37, 99, 235, 0.1); }
.executive-person-days-list[data-period="yearly"] .executive-person-month-row.is-current { border-color: var(--blue-border); background: var(--blue-soft); box-shadow: inset 4px 0 var(--blue); }
.executive-person-days-list[data-period="yearly"] .executive-person-month-row.is-future { border-color: var(--line); color: var(--muted); background: var(--raised); box-shadow: none; }
.executive-person-days-list[data-period="yearly"] .executive-person-month-row.has-issue { border-color: var(--amber-border); background: var(--amber-soft); box-shadow: inset 4px 0 #f59e0b; }
.executive-person-days-list[data-period="yearly"] .executive-person-month-row.has-issue[role="button"]:hover,
.executive-person-days-list[data-period="yearly"] .executive-person-month-row.has-issue[role="button"]:focus-visible { border-color: var(--amber-border); background: var(--amber-soft); box-shadow: inset 4px 0 #f59e0b, 0 7px 18px rgba(180, 83, 9, 0.1); }
.executive-person-attention-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 55px; padding: 10px 16px; border-top: 1px solid var(--amber-border); }
.executive-person-attention-item:first-child { border-top: 0; }
.executive-person-attention-item p { margin: 0; color: var(--muted-strong); font-size: 12px; }

.app-footer { display: flex; justify-content: space-between; padding: 5px 4px 0; color: var(--muted); font-size: 11px; }
.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(400px, calc(100vw - 40px)); padding: 13px 16px; border-radius: 12px; color: var(--on-color); background: var(--toast-bg); box-shadow: 0 14px 35px rgba(23, 32, 51, 0.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; font-size: 13px; font-weight: 700; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red-fill); }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 25% 20%, var(--blue-soft) 0, transparent 30%), radial-gradient(circle at 80% 80%, var(--blue-soft) 0, transparent 28%), var(--bg); }
.login-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 24px 60px rgba(20, 31, 56, 0.13); }
.access-denied-card { width: min(500px, 100%); text-align: center; }
.access-denied-card h1 { margin: 12px 0 10px; font-size: 30px; letter-spacing: -0.04em; }
.access-denied-description { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.access-denied-card .button { min-width: 230px; }
.login-brand strong { font-size: 20px; }
.login-copy { margin: 32px 0 22px; }
.login-copy h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.04em; }
.login-copy p, .login-note { margin: 0; color: var(--muted); font-size: 13px; }
.login-form { display: grid; gap: 16px; }
.login-form input { min-height: 48px; }
.login-remember { display: flex; width: fit-content; align-items: center; gap: 8px; color: var(--muted-strong); cursor: pointer; font-size: 12px; font-weight: 750; }
.login-remember input { width: 17px; height: 17px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; }
.login-remember span { margin: 0; }
.login-note { margin-top: 22px; text-align: center; }
.form-error { margin-bottom: 15px; padding: 11px 13px; border-radius: 10px; color: var(--red); background: var(--red-soft); font-size: 12px; font-weight: 700; }
.form-error:empty { display: none; }

@media (hover: none) {
    .business-trip-history-year-controls > .button { width: 44px; min-height: 44px; }
    .business-trip-history-year-controls { grid-template-columns: auto 44px 82px 44px; }
    .personal-calendar-action { opacity: 1; transform: none; }
}

@media (min-width: 1181px) {
    .main-calendar-stage > .team-attendance-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}

@media (max-width: 1180px) {
    .attendance-change-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .attendance-change-filter > .filter-actions { grid-column: span 2; }
    .main-calendar-stage { width: auto; grid-template-columns: 1fr; margin: 6px 0 18px; transform: none; }
    .main-calendar-stage > .team-attendance-panel { position: static; order: -1; max-height: none; overflow: visible; scrollbar-gutter: auto; }
    .team-attendance-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 721px) and (max-width: 1180px) {
    .team-attendance-list li:nth-child(odd):nth-last-child(2) { border-bottom: 0; }
}

@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .manage-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .business-trip-history-panel > .panel-header { align-items: stretch; }
    .business-trip-history-tools { justify-content: flex-start; }
    .attendance-policy-summary, .attendance-policy-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel-header-responsive { align-items: stretch; flex-direction: column; }
    .personal-attendance-header .calendar-view-switch { align-self: flex-start; }
    .filter-form { justify-content: flex-start; }
    .manual-attendance-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reduced-work-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reduced-work-form > * { grid-column: auto; }
    .outside-work-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .outside-work-reason-field { grid-column: span 2; }
    .suggestion-form-row { grid-template-columns: 1fr; }
    .suggestion-anonymous-check { justify-self: stretch; }
    .suggestion-form-footer { align-items: stretch; flex-direction: column; }
    .suggestion-form-footer .form-actions { align-self: flex-end; }
    .schedule-basic-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-title-field { grid-column: 1 / -1; }
    .schedule-period-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .schedule-attendee-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .executive-people-header { align-items: stretch; flex-direction: column; }
    .executive-list-tools { align-items: flex-start; }
    .executive-people-columns,
    .executive-person-row { grid-template-columns: minmax(100px, 0.65fr) minmax(170px, 1.1fr) minmax(140px, 0.9fr) minmax(110px, 0.65fr) minmax(110px, 0.7fr); gap: 11px; }
    .executive-person-dialog-toolbar { align-items: stretch; flex-direction: column; }
    .executive-person-period-picker { justify-content: start; }
    .executive-person-summary,
    .executive-person-summary.has-full-period { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .executive-person-summary article:nth-child(n+3) { border-top: 1px solid var(--line); }
    .executive-person-summary article:nth-child(odd) { border-left: 0; }
}

@media (max-width: 720px) {
    .app-shell { width: min(100% - 24px, 1440px); padding-top: 12px; }
    .app-header { align-items: flex-start; }
    .header-actions { justify-content: flex-end; flex-wrap: wrap; }
    .server-badge { order: 3; width: 100%; justify-content: center; }
    .brand-block h1 { font-size: 15px; }
    .welcome-row { align-items: flex-end; }
    .welcome-row p:last-child { max-width: 420px; }
    .inline-form { grid-template-columns: 1fr; }
    .attendance-export-form .form-actions { width: 100%; }
    .reduced-work-form > * { grid-column: 1; }
    .form-actions .button { flex: 1; }
    .manual-attendance-header { align-items: flex-start; flex-direction: column; }
    .manual-attendance-header-actions { width: 100%; }
    .business-trip-history-item { grid-template-columns: minmax(0, 1fr) auto; }
    .business-trip-history-metrics { grid-column: 1 / -1; }
    .outside-work-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outside-work-direct-option, .outside-work-reason-field { grid-column: 1 / -1; }
    .outside-work-item { grid-template-columns: minmax(0, 1fr) auto; }
    .outside-work-metrics { grid-column: 1 / -1; }
    .attendance-editor-context { grid-template-columns: 1fr; }
    .attendance-editor-bulk-fields { grid-template-columns: 1fr; }
    .attendance-editor-actions .button { flex: 1; }
    .calendar-attendance-record { align-items: stretch; flex-direction: column; }
    .calendar-attendance-record .button { width: 100%; }
    .calendar-attendance-actions .button { flex: 1; }
    .manual-outside-work-dialog-actions .button { flex: 1; }
    .selected-user-banner { align-items: stretch; flex-direction: column; }
    .annual-leave-balance-summary { width: 100%; min-width: 0; margin-left: 0; }
    .panel-header-responsive { align-items: stretch; flex-direction: column; }
    .action-log-filter > label, .action-log-filter > label:first-child { flex: 1 1 calc(50% - 5px); }
    .action-log-filter > .filter-actions { margin-left: auto; }
    .date-filter { align-items: end; }
    .date-filter input { width: 100%; }
    .manage-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-change-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-change-filter > .filter-actions { grid-column: 1 / -1; }
    .personal-attendance-header { align-items: stretch; }
    .work-progress-notice { align-items: flex-start; flex-direction: column; gap: 5px; }
    .work-progress-notice ul { display: grid; gap: 3px; }
    .work-progress-grid { grid-template-columns: 1fr; }
    .calendar-view-switch { align-self: flex-start; }
    .main-calendar-stage > .team-attendance-panel { order: 0; }
    .team-attendance-list { grid-template-columns: 1fr; }
    .schedule-attendee-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-policy-summary, .attendance-guide-grid { grid-template-columns: 1fr; }
    .attendance-table { display: block; table-layout: auto; }
    .attendance-table colgroup { display: none; }
    .attendance-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .attendance-table tbody { display: grid; gap: 10px; }
    .attendance-table tbody tr {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: var(--panel);
    }
    .attendance-table td {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        border-bottom: 0;
    }
    .attendance-table td::before { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; }
    .attendance-table td:nth-child(1)::before { content: "사번"; }
    .attendance-table td:nth-child(2)::before { content: "이름"; }
    .attendance-table td:nth-child(3)::before { content: "근무일"; }
    .attendance-table td:nth-child(4)::before { content: "출근"; }
    .attendance-table td:nth-child(5)::before { content: "퇴근"; }
    .attendance-table td:nth-child(6)::before { content: "관리"; }
    .attendance-table td:nth-child(-n + 3) { grid-column: span 2; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
    .attendance-table td:nth-child(4), .attendance-table td:nth-child(5) { grid-column: span 3; border-top: 1px solid var(--line); }
    .attendance-table td:nth-child(2), .attendance-table td:nth-child(3), .attendance-table td:nth-child(5) { border-left: 1px solid var(--line); }
    .attendance-table .attendance-time-cell { min-width: 0; white-space: normal; }
    .attendance-table .attendance-time-value { min-width: 0; flex-wrap: wrap; }
    .attendance-table .attendance-action-cell { grid-column: 1 / -1; border-top: 1px solid var(--line); }
    .attendance-table .attendance-actions { width: 100%; }
    .attendance-table .attendance-actions .button-small { min-height: 36px; flex: 1 1 105px; }
    .attendance-table tbody .empty-cell { grid-column: 1 / -1; min-height: 76px; align-items: center; justify-content: center; border: 0; text-align: center; }
    .attendance-table tbody .empty-cell::before { content: none; }
    .list-footer { align-items: flex-start; flex-wrap: wrap; }
    .list-footer > span { width: 100%; }
    .pagination { flex-wrap: wrap; }
    .executive-report-controls { align-items: stretch; flex-direction: column; }
    .executive-period-picker { justify-content: space-between; }
    .executive-report-context { align-items: flex-start; flex-direction: column; gap: 3px; }
    .executive-people-columns { display: none; }
    .executive-person-row { grid-template-columns: 1fr auto; gap: 10px 16px; padding: 14px; }
    .executive-person-work { grid-column: 1; grid-row: 2; }
    .executive-person-adjustment { grid-column: 1; grid-row: 3; }
    .executive-person-leave-balance { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
    .executive-person-value { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
    .executive-attention-item { grid-template-columns: 1fr auto; gap: 7px 12px; }
    .executive-attention-item p { grid-column: 1 / -1; grid-row: 2; }
    .assignment-dialog.executive-person-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .executive-person-dialog .dialog-header { padding: 17px 16px 13px; }
    .executive-person-dialog-body { max-height: calc(100dvh - 89px); padding: 14px 14px 22px; }
    .executive-person-period-picker { grid-template-columns: 38px minmax(0, 1fr) 38px; }
    .executive-person-period-picker input, .executive-person-period-picker strong { width: 100%; min-width: 0; }
    .executive-person-period-picker .button { grid-column: 1 / -1; }
    .executive-person-summary, .executive-person-summary.has-full-period { grid-template-columns: 1fr; }
    .executive-person-summary article + article { border-top: 1px solid var(--line); border-left: 0; }
    .executive-person-meta { gap: 7px 16px; }
    .executive-person-trend-header { align-items: flex-start; flex-direction: column; gap: 10px; }
    .executive-person-trend-legend { justify-content: flex-start; }
    .executive-person-activities-header { align-items: flex-start; flex-direction: column; }
    .executive-person-activity-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 13px; }
    .executive-person-activity-type { justify-self: end; }
    .executive-person-activity-content, .executive-person-activity-timing { grid-column: 1 / -1; }
    .executive-person-activity-timing { align-items: flex-start; text-align: left; }
    .executive-person-activity-footer { align-items: flex-start; flex-wrap: wrap; }
    .executive-person-activity-footer .pagination { width: 100%; justify-content: flex-start; }
    .executive-person-day-row { grid-template-columns: 1fr auto; gap: 9px 14px; padding: 13px; }
    .executive-person-days-list[data-period="daily"] .executive-person-day-row,
    .executive-person-days-list[data-period="weekly"] .executive-person-day-row,
    .executive-person-week-days .executive-person-day-row { grid-template-columns: 1fr auto; gap: 9px 14px; padding: 13px; }
    .executive-person-day-record { align-items: flex-end; text-align: right; }
    .executive-person-day-graph { grid-column: 1 / -1; grid-row: 2; }
    .executive-person-day-value { grid-column: 1 / -1; grid-row: 3; align-items: flex-start; text-align: left; }
    .executive-person-month-row { grid-template-columns: 1fr auto; gap: 8px 14px; padding: 13px; }
    .executive-person-month-work, .executive-person-month-adjustment { grid-column: 1 / -1; }
    .executive-person-month-balance { grid-column: 2; grid-row: 1; }
    .executive-person-days-list[data-period="daily"],
    .executive-person-days-list[data-period="weekly"],
    .executive-person-days-list[data-period="monthly"],
    .executive-person-days-list[data-period="yearly"] { padding: 9px; }
    .executive-person-week-header { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media (max-width: 520px) {
    .attendance-export-form .form-actions { grid-template-columns: 1fr; }
    .main-app-download { align-items: stretch; flex-direction: column; }
    .main-app-download-item { width: 100%; }
    .main-app-download .button { width: 100%; }
    .app-header { flex-direction: column; }
    .header-actions { width: 100%; justify-content: stretch; }
    .header-actions .button, .header-actions form { flex: 1; }
    .header-actions form .button { width: 100%; }
    .access-denied-card .button { width: 100%; min-width: 0; }
    .server-badge { order: 0; }
    .welcome-row { align-items: stretch; flex-direction: column; margin-top: 24px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .stat-card { padding: 15px; }
    .manual-attendance-header-actions { align-items: stretch; flex-direction: column; }
    .manual-attendance-header-actions .button { width: 100%; }
    .attendance-section-tabs { position: sticky; z-index: 20; top: 8px; }
    .outside-work-form { grid-template-columns: 1fr; }
    .outside-work-direct-option, .outside-work-reason-field { grid-column: auto; }
    .manual-outside-work-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 16px; }
    .manual-outside-work-dialog form { max-height: calc(100dvh - 20px); }
    .manual-outside-work-dialog .outside-work-form { grid-template-columns: 1fr; }
    .manual-outside-work-dialog .outside-work-direct-option,
    .manual-outside-work-dialog .outside-work-reason-field { grid-column: auto; }
    .outside-work-item { grid-template-columns: 1fr; }
    .outside-work-metrics { grid-column: auto; grid-template-columns: 1fr; }
    .outside-work-actions { width: 100%; justify-content: stretch; }
    .outside-work-actions .button { flex: 1; }
    .manage-menu-grid { grid-template-columns: 1fr; }
    .attendance-change-filter { grid-template-columns: 1fr; }
    .business-trip-history-tools { width: 100%; }
    .business-trip-history-year-controls { width: 100%; grid-template-columns: auto 32px minmax(0, 1fr) 32px; }
    .business-trip-history-tools > .business-trip-history-create { width: 100%; }
    .business-trip-history-item { grid-template-columns: 1fr; }
    .business-trip-history-metrics { grid-column: auto; }
    .business-trip-history-action { width: 100%; }
    .business-trip-history-cancelled { width: 100%; text-align: left; }
    .attendance-history-detail { grid-template-columns: 1fr; gap: 4px; }
    .attendance-change-meta { grid-template-columns: 1fr; }
    .attendance-change-meta dt, .attendance-change-meta dd { border-bottom: 1px solid var(--line); }
    .attendance-change-meta > :last-child { border-bottom: 0; }
    .attendance-policy-flow, .attendance-policy-help-grid { grid-template-columns: 1fr; }
    .attendance-policy-flow li { min-height: 0; }
    .stat-card strong { font-size: 27px; }
    .panel { padding: 17px; border-radius: 17px; }
    .personal-attendance-summary { grid-template-columns: 1fr; gap: 7px; }
    .personal-attendance-summary > div { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; }
    .personal-attendance-summary span { margin: 0; }
    .personal-attendance-summary strong { font-size: 19px; }
    .calendar-mode-row { align-items: stretch; flex-direction: column; gap: 8px; }
    .calendar-mode-row > p { text-align: left; }
    .calendar-mode-switch { display: grid; grid-template-columns: repeat(2, 1fr); }
    .personal-calendar-toolbar { grid-template-columns: auto 1fr auto; }
    .personal-calendar-toolbar #calendar-previous { grid-column: 1; grid-row: 1; }
    .personal-calendar-toolbar .personal-calendar-period { grid-column: 2; grid-row: 1; }
    .personal-calendar-toolbar #calendar-next { grid-column: 3; grid-row: 1; }
    .personal-calendar-toolbar #calendar-today { grid-column: 1 / -1; grid-row: 2; }
    .shared-calendar-dialog-actions { flex-direction: column; }
    .shared-calendar-dialog-actions .button { width: 100%; }
    .pending-actions { grid-template-columns: 1fr; }
    .pending-actions-buttons { grid-template-columns: 1fr; }
    .date-filter { display: grid; grid-template-columns: 1fr auto; }
    .date-filter label { grid-column: 1 / -1; }
    .app-footer { gap: 8px; flex-direction: column; }
    .filter-form, .filter-form label, .filter-form label:first-child, .filter-actions { width: 100%; }
    .action-log-filter > label, .action-log-filter > label:first-child { flex-basis: 100%; }
    .filter-actions .button { flex: 1; }
    .page-size-label { margin-right: auto; }
    .dialog-search { grid-template-columns: 1fr; }
    .action-log-meta, .action-log-extra { grid-template-columns: 1fr; }
    .action-log-meta dt, .action-log-extra dt { border-bottom: 0; }
    .user-search-item { align-items: stretch; flex-direction: column; }
    .user-search-item .button { width: 100%; }
    .suggestion-card-footer { align-items: flex-start; flex-wrap: wrap; }
    .suggestion-card-metrics { order: 3; width: 100%; margin-left: 0; }
    .suggestion-card-footer > .button { margin-left: auto; }
    .suggestion-detail-actions { align-items: stretch; flex-direction: column; }
    .suggestion-detail-actions > .button, .suggestion-owner-actions .button { flex: 1; }
    .suggestion-owner-actions { width: 100%; }
    .suggestion-comment-header { align-items: flex-start; flex-direction: column; gap: 3px; }
    .schedule-basic-fields, .schedule-period-fields, .schedule-attendee-options, .schedule-detail-grid { grid-template-columns: 1fr; }
    .schedule-title-field, .schedule-detail-grid .schedule-detail-attendees { grid-column: auto; }
    .schedule-attendee-toolbar { grid-template-columns: 1fr; }
    .schedule-attendee-toolbar .button { width: 100%; }
    .schedule-attendee-summary { text-align: left; }
    .schedule-attendee-actions .button { width: auto; flex: 1; }
    .schedule-form-footer { align-items: stretch; flex-direction: column; }
    .schedule-form-footer .form-actions .button { flex: 1; }
    .schedule-detail-actions .button { flex: 1; }
    .executive-report-heading-actions { width: 100%; }
    .executive-report-heading-actions .button { flex: 1; padding: 0 10px; }
    .executive-period-switch { width: 100%; }
    .executive-period-switch .button { flex: 1; }
    .executive-period-picker { display: grid; grid-template-columns: 1fr; }
    .executive-simple-picker,
    .executive-week-picker { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; }
    .executive-simple-picker input,
    .executive-week-current { width: 100%; min-width: 0; }
    .executive-sort-buttons { width: 100%; align-items: stretch; flex-wrap: wrap; }
    .executive-sort-buttons > span { width: 100%; }
    .executive-sort-buttons .button { flex: 1; padding: 0 7px; }
}

/* 점심 선택과 업체·식단 관리 */
#lunch-page [hidden], .lunch-dialog [hidden] { display: none !important; }
.lunch-heading-actions, .lunch-week-heading, .lunch-week-switch,
.lunch-selection-actions, .lunch-selection-actions > div, .lunch-summary-tools,
.lunch-import-toolbar, .lunch-editor-actions, .lunch-editor-actions > div,
.lunch-products-heading, .lunch-dialog-heading { display: flex; align-items: center; gap: 12px; }
.lunch-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
.lunch-policy { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--blue-border); border-radius: 14px; background: var(--blue-soft); color: var(--ink); font-size: 13px; }
.lunch-policy > strong { color: var(--blue-dark); }
.lunch-week-panel { padding: 20px; margin-bottom: 20px; }
.lunch-week-heading { justify-content: space-between; margin-bottom: 18px; }
.lunch-week-switch { gap: 18px; }
.lunch-week-switch strong { font-size: 17px; }
.lunch-week-switch p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.lunch-arrow { min-width: 42px; font-size: 26px; line-height: 1; }
.lunch-date-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
.lunch-date { display: grid; gap: 6px; padding: 13px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; text-align: center; }
.lunch-date > span { color: var(--muted); font-size: 12px; }
.lunch-date > strong { font-size: 22px; }
.lunch-date > small { color: var(--muted); font-size: 11px; }
.lunch-date.active { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.lunch-date.active > strong, .lunch-date.active > span { color: var(--blue-dark); }
.lunch-choice-panel { padding: 24px; }
.lunch-current { margin-bottom: 18px; padding: 12px 16px; border-radius: 10px; background: var(--raised); color: var(--muted-strong); font-size: 13px; }
.lunch-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lunch-menu { display: flex; flex-direction: column; align-items: stretch; min-height: 230px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.lunch-menu:hover:not(:disabled) { border-color: var(--blue-border); background: var(--cyan-soft); }
.lunch-menu.selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-soft); }
.lunch-menu:disabled { cursor: default; }
.lunch-menu.unavailable { background: var(--raised); color: var(--muted); }
.lunch-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.lunch-menu-top > span:last-child { padding: 4px 8px; border-radius: 6px; background: var(--raised); color: var(--muted); font-size: 11px; }
.lunch-menu-symbol { font-size: 27px; }
.lunch-menu > strong { font-size: 14px; }
.lunch-menu h3 { margin: 9px 0 7px; font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; }
.lunch-menu p { flex: 1; margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.lunch-menu-choice { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.lunch-menu.selected .lunch-menu-choice { color: var(--blue-dark); font-weight: 700; }
.lunch-no-order { background: var(--raised); }
.lunch-selection-actions { justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.lunch-selection-actions p { margin: 0; font-size: 13px; color: var(--muted); }
.lunch-empty { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: center; padding: 50px 15px; text-align: center; }
.lunch-empty > span { font-size: 36px; }
.lunch-empty > p { margin: 0; color: var(--muted); font-size: 13px; }
.lunch-notice { margin: 14px 0; padding: 13px 16px; border-radius: 10px; font-size: 13px; overflow-wrap: anywhere; }
.lunch-notice-error { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-border); }
.lunch-dialog { width: min(1000px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; overscroll-behavior: contain; }
.lunch-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.lunch-dialog-heading { justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.lunch-dialog-heading h2 { margin: 8px 0; }
.lunch-dialog-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.lunch-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.lunch-stats > div { display: grid; gap: 12px; padding: 18px; border-radius: 12px; background: var(--raised); }
.lunch-stats span { color: var(--muted); font-size: 12px; }
.lunch-stats strong { font-size: 28px; }
.lunch-stats small { margin-left: 4px; font-size: 12px; font-weight: 400; }
.lunch-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.lunch-counts > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.lunch-counts > div > span { color: var(--blue-dark); font-weight: 700; }
.lunch-counts p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }
.lunch-summary-tools { justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; }
#lunch-people .lunch-person-no-order { outline: 1px solid var(--red); outline-offset: -1px; }
.lunch-summary-tools label, .lunch-import-toolbar label, .lunch-config-fields label, .lunch-config-source { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.lunch-dialog input:not([type="checkbox"]):not([type="radio"]), .lunch-dialog textarea, .lunch-dialog select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; }
.lunch-dialog textarea { resize: vertical; }
.lunch-dialog input[type="checkbox"], .lunch-dialog input[type="radio"] { width: 17px; height: 17px; accent-color: var(--blue); vertical-align: middle; }
.lunch-dialog input:disabled, .lunch-dialog textarea:disabled { background: var(--raised); color: var(--muted); }
.lunch-copy-fallback { display: grid; gap: 8px; margin-top: 16px; }
.lunch-management-tabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.lunch-management-tabs > button { padding: 13px 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.lunch-management-tabs > button.active { color: var(--blue-dark); border-bottom-color: var(--blue); }
.lunch-management-fields { min-width: 0; padding: 0; margin: 0; border: 0; }
.lunch-import-toolbar { align-items: flex-end; }
.lunch-import-toolbar label { min-width: 220px; }
.lunch-help { color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.lunch-editor-help { margin: 18px 0; padding: 13px 16px; border-radius: 10px; background: var(--blue-soft); color: var(--muted-strong); font-size: 12px; line-height: 1.7; }
.lunch-import-preview { margin: 16px 0; padding: 18px; border: 1px solid var(--blue-border); border-radius: 12px; background: var(--blue-soft); font-size: 12px; }
.lunch-import-preview h3 { margin: 0 0 10px; font-size: 15px; }
.lunch-import-preview details { padding: 9px 0; border-bottom: 1px solid var(--line); }
.lunch-import-preview summary { cursor: pointer; font-weight: 700; }
.lunch-import-preview p { line-height: 1.7; }
.lunch-import-preview > .button { margin-top: 14px; }
.lunch-editor-day { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lunch-editor-day > summary { display: flex; justify-content: space-between; gap: 10px; padding: 16px; cursor: pointer; background: var(--raised); }
.lunch-editor-day > summary::before { content: "›"; color: var(--muted); }
.lunch-editor-day[open] > summary::before { content: "⌄"; }
.lunch-editor-day > summary > strong { flex: 1; font-size: 14px; }
.lunch-editor-day > summary > span { color: var(--muted); font-size: 12px; }
.lunch-editor-day-options { display: flex; gap: 22px; padding: 14px 16px; font-size: 12px; }
.lunch-editor-day .table-wrap { padding: 0 12px 12px; }
.lunch-editor-table { min-width: 650px; table-layout: fixed; }
.lunch-editor-table th:first-child { width: 130px; }
.lunch-editor-table th:nth-child(2) { width: 220px; }
.lunch-editor-table th:last-child { width: 80px; }
.lunch-editor-table td { font-size: 12px; vertical-align: middle; }
.lunch-default-label { display: block; margin-top: 5px; color: var(--blue-dark); }
.lunch-editor-actions { justify-content: space-between; position: sticky; bottom: -26px; padding: 18px 0; margin-top: 16px; background: var(--panel); border-top: 1px solid var(--line); z-index: 1; }
.lunch-editor-actions > span { font-size: 12px; color: var(--muted); }
.lunch-config-source { max-width: 420px; margin-bottom: 18px; }
.lunch-user-policy-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.lunch-user-policy-tools > label { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.lunch-user-policies-table { min-width: 650px; table-layout: fixed; }
.lunch-user-policies-table td { vertical-align: middle; overflow-wrap: anywhere; }
.lunch-user-policies-table td:first-child { width: 140px; }
.lunch-user-policies-table td:nth-child(2) { width: 220px; }
.lunch-user-policies-table td:first-child > strong, .lunch-user-policies-table td:first-child > span { display: block; }
.lunch-user-policies-table details { font-size: 12px; margin-top: 8px; }
.lunch-user-policy-review { padding: 12px 16px; border-radius: 10px; background: var(--blue-soft); font-size: 12px; }
.lunch-user-policy-review p { margin: 7px 0 0; overflow-wrap: anywhere; }
.lunch-excluded-details { margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.lunch-excluded-details > summary { font-size: 13px; cursor: pointer; }
.lunch-config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lunch-config-url { grid-column: 1 / -1; }
.lunch-products-heading { justify-content: space-between; margin: 22px 0 12px; }
.lunch-products-heading h3 { margin: 0; font-size: 15px; }
.lunch-products-table { min-width: 600px; }
.lunch-products-table th:nth-child(1) { width: 170px; }
.lunch-products-table th:nth-child(3), .lunch-products-table th:nth-child(4) { width: 55px; }
.lunch-products-table th:last-child { width: 65px; }
@media (max-width: 900px) {
    .lunch-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lunch-heading-actions { justify-content: flex-start; }
    .lunch-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .lunch-heading-actions { width: 100%; gap: 8px; }
    .lunch-management-tabs { flex-wrap: wrap; gap: 0; }
    .lunch-management-tabs > button { padding: 12px 9px; font-size: 12px; }
    .lunch-user-policies-table { min-width: 0; table-layout: auto; }
    .lunch-user-policies-table thead { display: none; }
    .lunch-user-policies-table tr { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .lunch-user-policies-table td, .lunch-user-policies-table td:first-child, .lunch-user-policies-table td:nth-child(2) { display: block; width: 100%; padding: 0; border: 0; }
    .lunch-heading-actions .button { flex: 1; padding: 0 10px; font-size: 12px; white-space: nowrap; }
    .lunch-heading-actions > a { flex-basis: 100%; }
    .lunch-policy { padding: 14px; font-size: 12px; }
    .lunch-week-panel { padding: 14px; }
    .lunch-week-heading { align-items: stretch; gap: 12px; flex-direction: column; }
    .lunch-week-switch { justify-content: space-between; gap: 8px; }
    .lunch-week-switch strong { font-size: 14px; }
    .lunch-date-tabs { gap: 4px; }
    .lunch-date { padding: 10px 2px; border-radius: 8px; }
    .lunch-date > strong { font-size: 18px; }
    .lunch-date > small { font-size: 9px; letter-spacing: -.8px; }
    .lunch-choice-panel { padding: 16px; }
    .lunch-menu-grid { grid-template-columns: 1fr; }
    .lunch-menu { min-height: 200px; padding: 18px; }
    .lunch-selection-actions { align-items: stretch; flex-direction: column; gap: 14px; }
    .lunch-selection-actions > div .button { flex: 1; }
    .lunch-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 24px); padding: 16px; border-radius: 14px; }
    .lunch-dialog-heading h2 { font-size: 20px; }
    .lunch-dialog-heading { gap: 8px; margin-bottom: 18px; }
    .lunch-stats { gap: 6px; }
    .lunch-stats > div { padding: 12px; }
    .lunch-stats strong { font-size: 24px; }
    .lunch-counts { grid-template-columns: 1fr; }
    .lunch-summary-tools { align-items: stretch; flex-direction: column; }
    .lunch-import-toolbar { align-items: stretch; flex-direction: column; }
    .lunch-editor-day > summary { flex-wrap: wrap; }
    .lunch-editor-day > summary > span { flex-basis: 100%; padding-left: 16px; }
    .lunch-editor-day-options { gap: 12px; flex-wrap: wrap; }
    .lunch-editor-actions { align-items: stretch; flex-direction: column; gap: 12px; bottom: -16px; }
    .lunch-editor-actions > div .button { flex: 1; padding: 0 10px; }
    .lunch-config-fields { grid-template-columns: 1fr; }
}

@media (hover: none) and (max-width: 520px) {
    .business-trip-history-year-controls { grid-template-columns: auto 44px minmax(0, 1fr) 44px; }
}