:root {
  --ink: #253638;
  --muted: #69797b;
  --line: #d9e5e1;
  --canvas: #f7f8f3;
  --surface: #ffffff;
  --brand: #176f67;
  --brand-2: #1c9183;
  --brand-panel: #dcefe9;
  --brand-panel-ink: #245c55;
  --brand-panel-muted: #557a74;
  --mint: #d8f1ea;
  --mint-strong: #62b9aa;
  --sand: #f7e4c2;
  --rose: #f9ded7;
  --blue: #dcecf4;
  --violet: #ebe2f4;
  --warning: #a96017;
  --danger: #b24747;
  --shadow: 0 18px 48px rgba(23, 111, 103, 0.11);
  --radius-lg: 24px;
  --radius-md: 16px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); overflow-x: clip; }
body.auth-pending .app-shell, body.auth-pending > .modal { visibility: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #efb75d; outline-offset: 3px; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 78px; padding: 10px clamp(18px, 3vw, 42px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(23,111,103,.14); box-shadow: 0 5px 22px rgba(23,111,103,.05); backdrop-filter: blur(18px); }
.topbar--single { grid-template-columns: 1fr auto; }
.brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; width: fit-content; }
.brand-logo { width: clamp(190px, 20vw, 250px); height: 68px; display: block; object-fit: contain; object-position: left center; filter: hue-rotate(-18deg) saturate(.85) brightness(.82) contrast(1.08); }
.brand strong, .brand small, .profile-copy strong, .profile-copy small { display: block; }
.brand strong { font-size: 18px; letter-spacing: -.03em; }
.brand small, .profile-copy small { color: var(--muted); font-size: 12px; margin-top: 2px; }

.view-switch { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: #edf1ee; }
.view-switch__button { border: 0; background: transparent; border-radius: 9px; padding: 9px 17px; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.view-switch__button.is-active { background: #fff; color: var(--ink); box-shadow: 0 3px 12px rgba(25,50,46,.08); }

.profile-account { justify-self: end; display: flex; align-items: center; gap: 10px; padding: 4px 2px; text-align: left; }
.profile-signout { min-height: 34px; padding: 0 2px 0 10px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--brand-2); font-size: 10px; font-weight: 800; cursor: pointer; }
.profile-signout:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.profile-account svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.profile-copy strong { font-size: 13px; }
.avatar { width: 40px; height: 40px; border-radius: 13px; display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--mint); color: var(--brand); font-size: 12px; font-weight: 800; }
.avatar--small { width: 38px; height: 38px; border-radius: 50%; }

.view[hidden] { display: none !important; }

/* Neutral access gateway */
.gateway { min-height: 100dvh; padding: 28px; display: grid; place-items: center; background: radial-gradient(circle at 14% 12%, rgba(98,185,170,.34), transparent 28%), radial-gradient(circle at 88% 86%, rgba(240,180,94,.28), transparent 26%), var(--canvas); }
.gateway-card { width: min(100%, 610px); padding: clamp(30px, 6vw, 58px); border: 1px solid rgba(20,37,35,.09); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); text-align: center; }
.gateway-mark { width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 18px; }
.gateway-mark svg { width: 38px; }
.gateway-card h1 { font-size: clamp(31px, 6vw, 48px); }
.gateway-card > p:not(.eyebrow) { max-width: 490px; margin: 0 auto; color: var(--muted); line-height: 1.7; }
.gateway-areas { margin: 28px 0 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.gateway-areas span { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #f7f9f7; color: var(--brand); font-size: 11px; font-weight: 800; }
.gateway-card > small { color: var(--muted); font-size: 10px; }

/* Authentication */
.access-page { min-height: 100dvh; padding: clamp(22px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .75fr); align-items: center; gap: clamp(38px, 7vw, 110px); background: radial-gradient(circle at 8% 10%, rgba(98,185,170,.36), transparent 28%), radial-gradient(circle at 92% 90%, rgba(240,180,94,.3), transparent 26%), var(--canvas); }
.access-intro { width: min(100%, 690px); min-height: min(740px, calc(100dvh - 80px)); display: flex; flex-direction: column; }
.access-brand { margin-bottom: auto; padding: 0; }
.access-brand .brand-logo { width: clamp(320px, 33vw, 430px); height: 150px; filter: hue-rotate(-18deg) saturate(.85) brightness(.82) contrast(1.08); }
.access-copy { padding: 70px 0 54px; }
.access-copy h1 { max-width: 680px; margin-bottom: 22px; font-size: clamp(42px, 6vw, 72px); line-height: .98; }
.access-copy > p:last-child { max-width: 590px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.access-trust { margin-top: auto; display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); font-size: 11px; font-weight: 750; }
.access-trust span { display: inline-flex; align-items: center; gap: 8px; }
.access-trust i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 0 4px var(--mint); }
.login-card { width: min(100%, 500px); justify-self: end; padding: clamp(30px, 4vw, 48px); border: 1px solid rgba(20,37,35,.1); border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: 0 26px 70px rgba(22,63,60,.12); }
.login-heading { margin-bottom: 30px; }
.login-lock { width: 52px; height: 52px; margin-bottom: 24px; border-radius: 16px; display: grid; place-items: center; background: var(--mint); color: var(--brand); }
.login-lock svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.login-heading h2 { margin-bottom: 9px; font-size: 32px; letter-spacing: -.04em; }
.login-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-form { display: grid; }
.login-form > label { margin: 0 0 8px; font-size: 11px; font-weight: 800; }
.login-form > label:not(:first-child) { margin-top: 18px; }
.login-field { min-height: 54px; padding: 0 15px; border: 1px solid #d8e1de; border-radius: 14px; display: flex; align-items: center; gap: 11px; background: #fbfcfb; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.login-field:focus-within { border-color: var(--brand-2); background: #fff; box-shadow: 0 0 0 4px rgba(36,106,97,.1); }
.login-field > svg { width: 20px; flex: 0 0 auto; fill: none; stroke: #7d8b88; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.login-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.login-field input::placeholder { color: #9aa5a2; }
.password-toggle { min-height: 38px; padding: 0 4px; border: 0; background: transparent; color: var(--brand-2); font-size: 10px; font-weight: 800; cursor: pointer; }
.remember-login { margin-top: 17px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; }
.remember-login input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.remember-login > span[aria-hidden="true"] { width: 20px; height: 20px; border: 1px solid #c9d7d3; border-radius: 6px; display: grid; place-items: center; background: #fbfcfb; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.remember-login > span[aria-hidden="true"]::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; opacity: 0; transform: translateY(-1px) rotate(-45deg); }
.remember-login input:checked + span[aria-hidden="true"] { border-color: var(--brand); background: var(--brand); }
.remember-login input:checked + span[aria-hidden="true"]::after { opacity: 1; }
.remember-login input:focus-visible + span[aria-hidden="true"] { box-shadow: 0 0 0 4px rgba(36,106,97,.13); }
.remember-login > span:last-child { display: grid; gap: 3px; }
.remember-login strong { color: var(--ink); font-size: 11px; line-height: 1.25; }
.remember-login small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.45; }
.login-message { min-height: 20px; margin: 13px 0 0; color: var(--brand-2); font-size: 10px; line-height: 1.5; }
.login-message.is-error { color: var(--danger); }
.login-submit { min-height: 55px; margin-top: 4px; border: 0; border-radius: 14px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 850; cursor: pointer; box-shadow: 0 12px 24px rgba(22,63,60,.2); transition: transform .2s ease, box-shadow .2s ease; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(22,63,60,.25); }
.login-submit:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }
.login-help { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; }
.login-help span, .login-help small { font-size: 10px; }
.login-help span { font-weight: 800; }
.login-help small { color: var(--muted); text-align: right; }

/* Reception kiosk */
.kiosk-view { min-height: calc(100dvh - 78px); padding: 38px clamp(18px, 4vw, 64px) 28px; background: radial-gradient(circle at 8% 8%, rgba(98,185,170,.33), transparent 24%), radial-gradient(circle at 92% 92%, rgba(240,180,94,.27), transparent 25%), var(--canvas); }
.kiosk-shell { width: min(100%, 1180px); margin: 0 auto; }
.kiosk-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.kiosk-heading h1 { margin-bottom: 9px; font-size: clamp(32px, 4vw, 52px); }
.kiosk-heading > div:first-child > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.kiosk-time { flex: 0 0 auto; min-width: 190px; padding-left: 26px; border-left: 1px solid #cad6d2; text-align: right; font-variant-numeric: tabular-nums; }
.kiosk-time strong, .kiosk-time span { display: block; }
.kiosk-time strong { font-size: 35px; letter-spacing: -.05em; }
.kiosk-time span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.holiday-badge { width: fit-content; padding: 5px 9px; border: 1px solid #e9b7b1; border-radius: 999px; display: inline-flex; align-items: center; background: #fff1ef; color: #a33c34; font-size: 9px; font-weight: 900; letter-spacing: .01em; }
.holiday-badge[hidden] { display: none !important; }
.kiosk-time .holiday-badge--kiosk { margin: 7px 0 0 auto; color: #a33c34; font-size: 9px; }

.kiosk-connectivity { max-width: 760px; min-height: 56px; margin: 24px auto -12px; padding: 10px 13px; border: 1px solid #ddc58f; border-radius: 15px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; background: #fff8e7; color: #72521e; box-shadow: 0 8px 22px rgba(89,65,24,.06); }
.kiosk-connectivity[hidden] { display: none; }
.kiosk-connectivity__icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #f2dfb4; font-size: 17px; font-weight: 850; }
.kiosk-connectivity strong, .kiosk-connectivity small { display: block; }
.kiosk-connectivity strong { font-size: 11px; }
.kiosk-connectivity small { margin-top: 3px; color: #8c7040; font-size: 9px; line-height: 1.4; }
.kiosk-connectivity b { min-width: 30px; padding: 7px 9px; border-radius: 999px; background: #d39a35; color: #fff; font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.kiosk-connectivity.is-syncing .kiosk-connectivity__icon { animation: kiosk-sync-spin 1.2s linear infinite; }
.kiosk-connectivity.is-review { border-color: #e1aaa4; background: #fff3f1; color: #953f38; }
.kiosk-connectivity.is-review .kiosk-connectivity__icon { background: #f5d4d0; }
.kiosk-connectivity.is-review b { background: #b64d45; }
@keyframes kiosk-sync-spin { to { transform: rotate(360deg); } }

.kiosk-progress { max-width: 760px; margin: 34px auto 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.kiosk-progress li { position: relative; display: grid; justify-items: center; gap: 8px; color: #8a9794; font-size: 11px; }
.kiosk-progress li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: calc(50% + 21px); right: calc(-50% + 21px); top: 18px; height: 2px; background: #d8e0dd; }
.kiosk-progress span { position: relative; z-index: 1; width: 38px; height: 38px; border: 2px solid #d8e0dd; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); font-weight: 800; }
.kiosk-progress strong { font-size: 11px; }
.kiosk-progress li.is-current { color: var(--brand); }
.kiosk-progress li.is-current span { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 0 0 5px rgba(22,63,60,.1); }
.kiosk-progress li.is-complete { color: var(--brand-2); }
.kiosk-progress li.is-complete span { border-color: var(--brand-2); background: var(--mint); color: var(--brand); }
.kiosk-progress li.is-complete::after { background: var(--brand-2); }

.kiosk-card { min-height: 485px; padding: clamp(24px, 4vw, 46px); border: 1px solid rgba(20,37,35,.09); border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(22,63,60,.11); }
.kiosk-step { max-width: 980px; margin: 0 auto; animation: kiosk-step-in .24s ease-out both; }
.kiosk-step[hidden] { display: none; }
@keyframes kiosk-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.kiosk-step-heading { margin-bottom: 27px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 16px; }
.kiosk-step-heading h2 { margin-bottom: 7px; font-size: clamp(24px, 3vw, 34px); }
.kiosk-step-heading p:last-child { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.step-number { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--mint); color: var(--brand); font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.kiosk-back { min-height: 44px; margin: -8px 0 22px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; gap: 5px; background: transparent; color: var(--brand-2); font-size: 12px; font-weight: 800; cursor: pointer; transition: background .2s ease; }
.kiosk-back:hover { background: #eef4f1; }
.kiosk-back svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

.department-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.department-button { min-height: 126px; padding: 20px; border: 1px solid var(--line); border-radius: 19px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; background: #fff; text-align: left; cursor: pointer; box-shadow: 0 5px 16px rgba(20,44,40,.035); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.department-button:hover { border-color: #94b9ad; background: #f8fbf9; box-shadow: 0 12px 24px rgba(20,44,40,.08); }
.department-button:active { background: #edf5f1; }
.department-button__icon { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); }
.department-button:nth-child(2) .department-button__icon { background: var(--sand); color: #8b652f; }
.department-button:nth-child(3) .department-button__icon { background: var(--rose); color: #934d4d; }
.department-button:nth-child(4) .department-button__icon { background: var(--blue); color: #527699; }
.department-button:nth-child(5) .department-button__icon { background: var(--violet); color: #76568a; }
.department-button:nth-child(6) .department-button__icon { background: #e8e9df; color: #6c7152; }
.department-button__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.department-button strong, .department-button small { display: block; }
.department-button strong { margin-bottom: 5px; font-size: 16px; }
.department-button small { color: var(--muted); font-size: 11px; }
.department-button > svg { width: 20px; fill: none; stroke: #82908d; stroke-width: 1.8; }

.employee-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kiosk-data-message { grid-column: 1 / -1; margin: 0; padding: 34px 20px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); text-align: center; }
.kiosk-data-message.is-error { border-color: rgba(176,68,68,.28); background: rgba(176,68,68,.06); color: var(--danger); }
.kiosk-reset-feedback { margin: -10px 0 22px; padding: 12px 15px; border: 1px solid rgba(28,145,131,.2); border-radius: 13px; background: rgba(216,241,234,.72); color: var(--brand); font-size: 11px; font-weight: 750; text-align: center; }
.kiosk-reset-feedback[hidden] { display: none; }
.employee-button { min-height: 88px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.employee-button:hover { border-color: #94b9ad; background: #f8fbf9; box-shadow: 0 8px 18px rgba(20,44,40,.07); }
.employee-button .avatar { width: 46px; height: 46px; border-radius: 14px; }
.employee-button strong, .employee-button small { display: block; }
.employee-button strong { margin-bottom: 4px; font-size: 14px; }
.employee-button small { color: var(--muted); font-size: 10px; }
.employee-state { padding: 6px 8px; border-radius: 20px; background: #edf0ef; color: var(--muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.employee-state.is-working { background: var(--mint); color: #28715e; }

.kiosk-step--pin { max-width: 520px; }
.pin-identity { margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 15px; text-align: left; }
.avatar--kiosk { width: 58px; height: 58px; border-radius: 18px; font-size: 15px; }
.pin-identity h2 { margin-bottom: 5px; font-size: 28px; }
.pin-identity p:last-child { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.pin-display { min-height: 54px; margin: 22px auto 7px; display: flex; align-items: center; justify-content: center; gap: 13px; }
.pin-display span { width: 15px; height: 15px; border: 2px solid #aeb9b6; border-radius: 50%; background: transparent; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.pin-display span.is-filled { border-color: var(--brand); background: var(--brand); transform: scale(1.08); }
.pin-error { min-height: 20px; margin-bottom: 5px; color: var(--danger); font-size: 11px; font-weight: 750; text-align: center; }
.pin-pad { max-width: 355px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-pad button { min-height: 60px; border: 1px solid #dce3e0; border-radius: 15px; background: #f7f9f7; font-size: 20px; font-weight: 750; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.pin-pad button:hover { border-color: #9db9b0; background: #eef5f2; }
.pin-pad button:active { background: var(--mint); }
.pin-pad .pin-pad__utility { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pin-pad__delete { display: grid; place-items: center; }
.pin-pad__delete svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.kiosk-continue, .kiosk-finish { width: min(100%, 355px); min-height: 54px; margin: 14px auto 0; border: 0; border-radius: 15px; display: block; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; transition: opacity .2s ease, box-shadow .2s ease; }
.kiosk-continue:hover:not(:disabled), .kiosk-finish:hover { box-shadow: 0 10px 22px rgba(22,63,60,.2); }
.kiosk-continue:disabled { opacity: .38; cursor: not-allowed; }

.kiosk-step--confirm, .kiosk-step--success { max-width: 610px; text-align: center; }
.confirmation-icon, .success-mark { width: 64px; height: 64px; margin: 4px auto 18px; border-radius: 20px; display: grid; place-items: center; background: var(--mint); color: var(--brand); }
.confirmation-icon svg, .success-mark svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 2; }
.kiosk-step--confirm h2, .kiosk-step--success h2 { margin-bottom: 8px; font-size: clamp(28px, 4vw, 38px); }
.kiosk-step--confirm > p:not(.eyebrow), .kiosk-step--success > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.confirmation-summary { margin: 24px 0; padding: 7px 20px; border: 1px solid var(--line); border-radius: 18px; background: #f7f9f7; text-align: left; }
.confirmation-summary div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e3e8e6; }
.confirmation-summary div:first-child { border-top: 0; }
.confirmation-summary dt { color: var(--muted); font-size: 11px; }
.confirmation-summary dd { margin: 0; font-size: 12px; font-weight: 800; text-align: right; }
.kiosk-submit { width: 100%; min-height: 72px; padding: 13px 18px; border: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 13px; background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 12px 26px rgba(22,63,60,.2); transition: box-shadow .2s ease, background .2s ease; }
.kiosk-submit.is-exit { background: #8d4c45; }
.kiosk-submit:hover { box-shadow: 0 16px 30px rgba(22,63,60,.27); }
.kiosk-submit svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 2; }
.kiosk-submit small, .kiosk-submit strong { display: block; text-align: left; }
.kiosk-submit small { margin-bottom: 3px; color: rgba(255,255,255,.7); font-size: 10px; }
.kiosk-submit strong { font-size: 16px; }
.kiosk-step--success { padding-top: 42px; }
.success-mark { border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 9px var(--mint); }
.kiosk-reset-note { width: fit-content; margin: 20px auto 0; padding: 10px 14px; border-radius: 999px; background: #f2f6f4; color: var(--muted); font-size: 10px; }
.kiosk-reset-note strong { color: var(--brand); font-variant-numeric: tabular-nums; }
.kiosk-finish { margin-top: 26px; }

.kiosk-footer { padding: 17px 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 10px; }
.kiosk-footer span { display: inline-flex; align-items: center; gap: 7px; }
.kiosk-footer svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.kiosk-footer i { width: 7px; height: 7px; border-radius: 50%; background: #3f9b7e; box-shadow: 0 0 0 4px var(--mint); }
.kiosk-footer #kiosk-terminal-status.is-offline { color: #8a641f; font-weight: 800; }
.kiosk-footer #kiosk-terminal-status.is-offline i { background: #d49b35; box-shadow: 0 0 0 4px #f7e8c8; }
.kiosk-footer #kiosk-terminal-status.is-review { color: var(--danger); font-weight: 800; }
.kiosk-footer #kiosk-terminal-status.is-review i { background: var(--danger); box-shadow: 0 0 0 4px var(--rose); }

.employee-view { min-height: calc(100vh - 78px); padding: 42px 24px 80px; background: radial-gradient(circle at 10% 8%, rgba(98,185,170,.3), transparent 25%), radial-gradient(circle at 90% 30%, rgba(240,180,94,.23), transparent 22%), var(--canvas); }
.employee-layout { width: min(100%, 1120px); margin: 0 auto; display: grid; gap: 18px; }
.employee-intro { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.employee-kicker { margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.employee-kicker .eyebrow { margin-bottom: 0; }
.employee-kicker span { padding: 5px 8px; border-radius: 20px; background: var(--sand); color: #7d5927; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.employee-profile-button { min-height: 58px; padding: 7px 9px; border: 1px solid rgba(20,37,35,.09); border-radius: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: rgba(255,255,255,.74); color: var(--ink); text-align: left; cursor: pointer; transition: background .2s ease, box-shadow .2s ease; }
.employee-profile-button:hover { background: #fff; box-shadow: 0 10px 24px rgba(20,44,40,.08); }
.employee-profile-button strong, .employee-profile-button small { display: block; }
.employee-profile-button strong { font-size: 11px; }
.employee-profile-button small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.employee-profile-button > svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.avatar--employee { width: 42px; height: 42px; border-radius: 13px; background: var(--mint); color: var(--brand-2); font-size: 10px; }
.eyebrow { margin: 0 0 7px; color: var(--brand-2); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(30px, 5vw, 44px); line-height: 1.06; letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.025em; }
.employee-intro > p:last-child, .dashboard-header > div > p:last-child { color: var(--muted); line-height: 1.6; }
.employee-status-card, .employee-summary-card, .employee-hours-card, .employee-shift-card, .employee-review-card, .employee-identity-card, .panel { border: 1px solid rgba(20,37,35,.08); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.employee-status-card { padding: clamp(24px, 4vw, 34px); overflow: hidden; background: var(--brand); color: #fff; box-shadow: 0 18px 40px rgba(22,63,60,.2); }
.employee-status-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.status-caption { margin-bottom: 7px; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 750; }
.employee-status-line { display: flex; align-items: center; gap: 10px; }
.employee-status-line > span { width: 10px; height: 10px; border-radius: 50%; background: #77d2ae; box-shadow: 0 0 0 5px rgba(119,210,174,.14); }
.employee-status-card.is-off-duty .employee-status-line > span { background: #bdc8c5; box-shadow: 0 0 0 5px rgba(189,200,197,.14); }
.employee-status-card.is-review .employee-status-line > span { background: #f0c36f; box-shadow: 0 0 0 5px rgba(240,195,111,.14); }
.employee-status-line h2 { font-size: 24px; }
.employee-status-heading > div:first-child > p:last-child { margin: 8px 0 0; color: rgba(255,255,255,.62); font-size: 10px; }
.employee-live-time { text-align: right; }
.employee-live-time strong, .employee-live-time span { display: block; }
.employee-live-time strong { font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.employee-live-time span { margin-top: 3px; color: rgba(255,255,255,.56); font-size: 9px; }
.employee-status-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.07); }
.employee-status-grid div { padding: 16px 18px; border-left: 1px solid rgba(255,255,255,.12); }
.employee-status-grid div:first-child { border-left: 0; }
.employee-status-grid span, .employee-status-grid strong, .employee-status-grid small { display: block; }
.employee-status-grid span { color: rgba(255,255,255,.56); font-size: 9px; }
.employee-status-grid strong { margin: 5px 0 3px; font-size: 19px; font-variant-numeric: tabular-nums; }
.employee-status-grid small { color: rgba(255,255,255,.7); font-size: 8px; }
.reception-only-note { margin-top: 14px; padding: 12px 14px; border-radius: 13px; display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.08); }
.reception-only-note > svg { width: 21px; flex: 0 0 auto; fill: none; stroke: #f1d39c; stroke-width: 1.7; }
.reception-only-note strong, .reception-only-note small { display: block; }
.reception-only-note strong { color: #fff; font-size: 9px; }
.reception-only-note small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: 8px; }

.employee-summary-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.employee-summary-card { min-width: 0; padding: 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.employee-summary-card--primary { border-color: #bedfd6; background: var(--brand-panel); }
.summary-icon { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); }
.summary-icon--sand { background: var(--sand); color: #8b652f; }
.summary-icon--blue { background: var(--blue); color: #4e779c; }
.summary-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.employee-summary-card div span, .employee-summary-card div strong, .employee-summary-card div small { display: block; }
.employee-summary-card div span { color: var(--muted); font-size: 9px; font-weight: 750; }
.employee-summary-card div strong { margin: 4px 0 2px; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.employee-summary-card div small { color: #899491; font-size: 8px; }
.summary-progress { padding: 6px 8px; border-radius: 20px; background: #fff; color: var(--brand-2); font-size: 9px; font-weight: 850; }

.employee-content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); gap: 16px; align-items: start; }
.employee-hours-card, .employee-shift-card, .employee-review-card, .employee-identity-card { padding: 22px; box-shadow: 0 10px 30px rgba(20,44,40,.05); }
.section-heading, .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.soft-badge, .total-time, .alert-badge { padding: 7px 10px; border-radius: 20px; background: var(--mint); color: var(--brand-2); font-size: 11px; font-weight: 800; }
.employee-period-switch { padding: 3px; display: inline-flex; gap: 3px; border-radius: 10px; background: #eef1ef; }
.employee-period-switch button { min-height: 40px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.employee-period-switch button.is-active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(20,44,40,.08); }
.employee-hours-total { margin: 20px 0 6px; padding: 14px 16px; border: 1px solid #bedfd6; border-radius: 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; background: var(--brand-panel); }
.employee-hours-total span { color: var(--muted); font-size: 9px; font-weight: 750; }
.employee-hours-total strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.employee-hours-total small { grid-column: 1 / -1; color: #899491; font-size: 8px; }
.employee-day-list { display: grid; }
.employee-day-row { min-height: 62px; padding: 10px 4px; border-bottom: 1px solid #edf0ef; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.employee-day-row:last-child { border-bottom: 0; }
.employee-day-row.is-paid-holiday { margin-inline: -8px; padding-inline: 12px; border-color: #f0c4bf; border-radius: 10px; background: #fff5f4; }
.employee-day-date strong, .employee-day-date small, .employee-day-events strong, .employee-day-events small { display: block; }
.employee-day-date strong, .employee-day-events strong { font-size: 10px; }
.employee-day-date small, .employee-day-events small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.employee-day-total { font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; }
.employee-day-total .holiday-x2 { margin-left: 6px; }
.employee-day-status { min-width: 74px; padding: 6px 8px; border-radius: 20px; background: var(--mint); color: #28715e; font-size: 8px; font-weight: 800; text-align: center; }
.employee-day-status--rest { background: #edf0ef; color: var(--muted); }
.employee-day-status--current { background: var(--blue); color: #486d90; }
.employee-day-status--review { background: var(--sand); color: #7d5927; }
.employee-data-note { margin: 16px 0 0; padding: 11px; border-radius: 11px; display: flex; align-items: flex-start; gap: 8px; background: #fff7e8; color: #73542c; font-size: 8px; line-height: 1.5; }
.employee-data-note svg { width: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }

.employee-side-stack { display: grid; gap: 16px; }
.employee-shift-details { margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.employee-shift-details div { padding: 11px; border-radius: 11px; background: #f4f6f4; }
.employee-shift-details dt { margin-bottom: 5px; color: var(--muted); font-size: 8px; }
.employee-shift-details dd { margin: 0; font-size: 10px; font-weight: 800; }
.employee-events { margin: 18px 0 0; padding: 0; list-style: none; }
.employee-events li { position: relative; min-height: 48px; padding: 7px 0 7px 25px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.employee-events li > span { position: absolute; left: 3px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: #9da8a5; }
.employee-events li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 28px; bottom: -9px; border-left: 1px solid var(--line); }
.employee-events li.is-complete > span { background: #3c9a7d; box-shadow: 0 0 0 4px var(--mint); }
.employee-events li.is-current > span { background: #6d98bd; box-shadow: 0 0 0 4px var(--blue); }
.employee-events strong, .employee-events small { display: block; }
.employee-events strong { font-size: 9px; }
.employee-events small, .employee-events time { margin-top: 3px; color: var(--muted); font-size: 8px; }
.employee-review-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; background: #fffaf0; }
.review-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sand); color: #8b652f; }
.review-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.employee-review-card h2 { font-size: 14px; }
.employee-review-card p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.employee-identity-card { scroll-margin-top: 100px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.avatar--profile { width: 48px; height: 48px; border-radius: 15px; background: var(--mint); color: var(--brand-2); font-size: 11px; }
.employee-identity-card h2 { font-size: 15px; }
.employee-identity-card p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.employee-identity-card button { width: 44px; height: 44px; border: 0; border-radius: 12px; display: grid; place-items: center; background: #f2f5f3; color: var(--muted); cursor: pointer; }
.employee-identity-card button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mobile-nav { display: none; }

.director-view { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
.sidebar { padding: 30px 18px; background: #f8faf8; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.sidebar nav { display: grid; gap: 4px; }
.sidebar-label { margin: 20px 12px 6px; color: #8b9694; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-label:first-child { margin-top: 0; }
.sidebar-link { width: 100%; min-height: 44px; padding: 11px 12px; border: 0; border-radius: 10px; display: flex; align-items: center; gap: 11px; background: transparent; color: #5d6b68; font-size: 12px; font-weight: 650; text-align: left; cursor: pointer; }
.sidebar-link > svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-link:hover, .sidebar-link.is-active { background: #e8f0ec; color: var(--brand); }
.nav-count { margin-left: auto; min-width: 20px; padding: 3px 6px; border-radius: 10px; background: #d9e5e0; font-size: 9px; text-align: center; }
.nav-count--alert { background: var(--rose); color: var(--danger); }
.support-card { padding: 17px; border-radius: 16px; background: var(--brand); color: #fff; }
.support-card > svg { width: 27px; height: 27px; padding: 6px; border-radius: 8px; background: rgba(255,255,255,.14); fill: none; stroke: currentColor; stroke-width: 1.6; }
.support-card strong { display: block; margin-top: 12px; font-size: 12px; }
.support-card p { margin: 5px 0 12px; color: rgba(255,255,255,.65); font-size: 9px; line-height: 1.5; }
.support-card button { padding: 0; border: 0; background: transparent; color: #f6d79d; font-size: 10px; font-weight: 800; cursor: pointer; }

.dashboard { min-width: 0; padding: 38px clamp(24px, 4vw, 56px) 60px; }
.dashboard-header { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.dashboard-header h1 { margin-bottom: 7px; font-size: clamp(28px, 3vw, 40px); }
.dashboard-header h1[tabindex="-1"]:focus { outline: none; }
.dashboard-header p { margin-bottom: 0; font-size: 13px; }
.dashboard-header p strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.director-kicker { margin-bottom: 7px; display: flex; align-items: center; gap: 9px; }
.director-kicker .eyebrow { margin-bottom: 0; }
.director-kicker span, .demo-badge { padding: 5px 8px; border-radius: 20px; background: var(--sand); color: #7d5927; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { position: relative; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; background: #fff; cursor: pointer; }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.icon-button--small { width: 30px; height: 30px; border: 0; background: transparent; }
.notification-dot { position: absolute; right: 9px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #d36d5c; border: 1px solid #fff; }
.secondary-button, .primary-button { min-height: 44px; padding: 0 15px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 800; cursor: pointer; }
.secondary-button { border: 1px solid var(--line); background: #fff; }
.secondary-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.primary-button { border: 1px solid var(--brand); background: var(--brand); color: #fff; }

.director-toolbar { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.period-switch { padding: 4px; display: inline-flex; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: #edf1ee; }
.period-switch button { min-height: 44px; padding: 0 15px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.period-switch button.is-active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(20,44,40,.08); }
.date-control { min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #4f5e5b; font-size: 10px; font-weight: 750; cursor: pointer; }
.date-control svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.date-control--input { cursor: default; }
.date-control--input > span { color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.date-control input { min-width: 132px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: #fff; }
.metric-card--accent { background: var(--brand-panel); color: var(--brand-panel-ink); border-color: #bedfd6; }
.metric-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); }
.metric-card--accent .metric-icon { background: rgba(255,255,255,.68); color: var(--brand); }
.metric-icon--blue { background: var(--blue); color: #4e779c; }
.metric-icon--sand { background: var(--sand); color: #9b7137; }
.metric-icon--rose { background: var(--rose); color: var(--danger); }
.metric-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.metric-card div span, .metric-card div strong, .metric-card div small { display: block; }
.metric-card div span { color: var(--muted); font-size: 10px; font-weight: 700; }
.metric-card--accent div span, .metric-card--accent div small { color: var(--brand-panel-muted); }
.metric-card div strong { margin: 3px 0 1px; font-size: 25px; letter-spacing: -.04em; }
.metric-card div strong, .hours-total strong, .hours-breakdown strong, .events-list time { font-variant-numeric: tabular-nums; }
.metric-card div small { color: #899491; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend { align-self: start; padding: 5px 7px; border-radius: 10px; background: rgba(255,255,255,.12); font-size: 9px; font-weight: 800; }
.metric-card--accent .trend { background: rgba(255,255,255,.68); color: var(--brand-panel-ink); }
.trend--warning { background: var(--rose); color: var(--danger); }
.trend--neutral { background: #edf0ee; color: var(--muted); }
.text-button { align-self: end; justify-self: end; padding: 0; border: 0; background: transparent; color: var(--danger); font-size: 9px; font-weight: 800; cursor: pointer; }

.dashboard-grid { min-width: 0; margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr); gap: 16px; align-items: start; }
.panel { min-width: 0; max-width: 100%; padding: 22px; border-radius: 18px; box-shadow: 0 8px 24px rgba(20,44,40,.04); overflow: hidden; }
.panel-heading { margin-bottom: 20px; }
.panel-heading h2 { font-size: 17px; }
.filter-group { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #f0f3f1; }
.filter-chip { min-height: 36px; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.filter-chip.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(20,44,40,.07); }
.department-filter { min-height: 42px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 1px; background: #fff; }
.department-filter > span { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.department-filter select { min-width: 150px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 9px; font-weight: 750; cursor: pointer; }
.attendance-history__header { margin-bottom: 20px; }
.history-toolbar { margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; display: grid; grid-template-columns: minmax(170px, 1.2fr) repeat(2, minmax(130px, 1fr)) max-content; align-items: stretch; gap: 10px; background: #f7f9f7; }
.history-toolbar .date-control, .history-toolbar .department-filter { width: 100%; min-width: 0; }
.history-toolbar .date-control input, .history-toolbar .department-filter select { width: 100%; min-width: 0; }
.history-toolbar .secondary-button { min-width: 100px; margin-left: 0; white-space: nowrap; }
.history-summary-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.history-summary-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 7px 20px rgba(20,44,40,.035); }
.history-summary-grid span, .history-summary-grid strong, .history-summary-grid small { display: block; }
.history-summary-grid span { color: var(--muted); font-size: 9px; font-weight: 750; }
.history-summary-grid strong { margin: 5px 0 2px; color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.history-summary-grid small { color: #8a9693; font-size: 8px; }
.history-table-panel { background: #fff; }
.history-table-wrap td:nth-child(n+3), .history-table-wrap th:nth-child(n+3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.history-punch-list { display: flex; flex-wrap: wrap; gap: 5px; }
.history-punch-detail { display: inline-grid; justify-items: start; gap: 4px; }
.history-late-note { padding-left: 3px; color: var(--danger); font-size: 7px; font-weight: 800; white-space: nowrap; }
.history-punch { padding: 5px 8px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 8px; font-weight: 850; }
.history-punch--in { background: var(--mint); color: #28715e; }
.history-punch--out { background: var(--rose); color: var(--danger); }
.history-session-actions { min-width: 112px; display: grid; gap: 4px; }
.history-correction-button { min-height: 32px; padding: 0 9px; border: 1px solid rgba(28,145,131,.34); border-radius: 9px; background: var(--mint); color: var(--brand); font-size: 8px; font-weight: 850; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 10px rgba(23,111,103,.07); }
.history-correction-button:hover { border-color: var(--brand-2); background: #c9ebe2; transform: translateY(-1px); }
.history-void-button, .history-restore-button { min-height: 30px; padding: 0 8px; border-radius: 8px; font-size: 8px; font-weight: 820; white-space: nowrap; cursor: pointer; }
.history-void-button { border: 1px solid rgba(171,64,64,.24); background: #fff7f6; color: var(--danger); }
.history-void-button:hover { border-color: rgba(171,64,64,.48); background: var(--rose); }
.history-restore-button { border: 1px solid rgba(36,106,97,.25); background: #fff; color: var(--brand); }
.history-restore-button:hover { border-color: var(--brand-2); background: var(--mint); }
.history-punch--voided { background: #f2f2f0; color: #7d8582; text-decoration: line-through; }
.history-voided-label { padding: 3px 6px; border-radius: 999px; display: inline-flex; justify-content: center; background: var(--rose); color: var(--danger); font-size: 7px; font-weight: 850; text-transform: uppercase; }
.history-table-wrap th:last-child, .history-table-wrap td:last-child { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: -10px 0 18px rgba(23,111,103,.06); }
.history-table-wrap th:last-child { z-index: 3; }
.history-empty { color: #a2aba9; }
.history-hours { color: var(--ink); font-size: 10px; }
.history-hours--total { color: var(--brand-2); }
.history-hours-pending { display: block; margin-top: 3px; color: #a36a19; font-size: 8px; font-weight: 750; white-space: nowrap; }

/* Shift planning */
.shift-management, .employee-team-schedule { min-width: 0; }
.shift-management__header { align-items: flex-end; }
.shift-header-actions { display: flex; align-items: center; gap: 9px; }
.shift-header-actions svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.shift-create-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.shift-toolbar { margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: stretch; gap: 10px; background: #f7f9f7; }
.shift-week-nav { min-width: 300px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.shift-week-nav .icon-button { border: 0; border-radius: 0; }
.shift-week-nav > div { text-align: center; }
.shift-week-nav span, .shift-week-nav strong { display: block; }
.shift-week-nav span { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.shift-week-nav strong { margin-top: 2px; font-size: 10px; font-variant-numeric: tabular-nums; }
.shift-toolbar > .department-filter { min-width: 210px; margin-left: auto; }
.shift-summary { margin-bottom: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shift-summary article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.shift-summary span, .shift-summary strong { display: block; }
.shift-summary span { color: var(--muted); font-size: 9px; font-weight: 750; }
.shift-summary strong { margin-top: 5px; font-size: 22px; font-variant-numeric: tabular-nums; }
.shift-board { padding: 0; background: #fff; }
.shift-board > .panel-heading { padding: 22px 22px 0; }
.shift-board-scroll { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
.shift-board-table { min-width: 1180px; table-layout: fixed; }
.shift-board-table th:first-child { width: 190px; position: sticky; left: 0; z-index: 3; background: #fff; }
.shift-board-table thead th { height: 64px; padding: 11px 8px; background: #f8faf8; text-align: center; }
.shift-board-table thead th:first-child { text-align: left; background: #f8faf8; }
.shift-board-table thead th span, .shift-board-table thead th strong { display: block; }
.shift-board-table thead th span { color: var(--muted); font-size: 8px; text-transform: capitalize; }
.shift-board-table thead th strong { margin-top: 4px; color: var(--ink); font-size: 16px; }
.shift-board-table thead .shift-day-note-row th,
.employee-schedule-table thead .shift-day-note-row th { height: 48px; padding: 6px; background: #edf4f1; border-bottom: 1px solid #d9e6e1; }
.shift-board-table thead .shift-day-note-row th:first-child,
.employee-schedule-table thead .shift-day-note-row th:first-child { color: var(--brand); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.shift-day-note-button { width: 100%; min-height: 34px; padding: 5px 6px; border: 1px dashed #b9cec7; border-radius: 8px; background: rgba(255,255,255,.72); color: #436d64; font-size: 7px; font-weight: 750; line-height: 1.3; cursor: pointer; }
.shift-day-note-button:hover, .shift-day-note-button:focus-visible { border-color: var(--brand-2); background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(36,106,97,.08); }
.shift-day-note-button.is-empty { color: #80908b; font-weight: 700; }
.shift-day-note-summary { display: block; color: #5d746e; font-size: 7px; line-height: 1.35; text-align: center; }
.shift-board-table .is-today { background: #f0f7f4; }
.shift-board-table .is-paid-holiday, .employee-schedule-table .is-paid-holiday { background: #fff2f0; }
.shift-board-table thead th.is-paid-holiday strong, .employee-schedule-table thead th.is-paid-holiday strong { color: #9f3831; }
.holiday-x2 { width: fit-content; margin-top: 3px; padding: 2px 6px; border-radius: 999px; display: inline-block; background: #fce0dc; color: #9f3831; font-size: 8px; font-weight: 900; line-height: 1.25; white-space: nowrap; }
.shift-board-table thead .holiday-x2, .employee-schedule-table thead .holiday-x2 { margin: 3px auto 0; }
.shift-board-table tbody th { padding: 12px; border-top: 1px solid var(--line); text-align: left; text-transform: none; letter-spacing: normal; }
.shift-cell { min-width: 138px; height: 126px; padding: 8px; vertical-align: top; border-left: 1px solid #edf0ef; }
.shift-cell-slots { display: grid; gap: 6px; }
.shift-slot { width: 100%; min-height: 40px; padding: 7px 8px; border: 1px solid #bad8cf; border-radius: 10px; display: block; background: var(--mint); color: #246657; text-align: left; cursor: pointer; }
.shift-slot:hover, .shift-slot:focus-visible { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(36,106,97,.1); outline: 0; }
.shift-slot--cavallo { border-color: #c8c9df; background: #f0eff8; color: #5f5b83; }
.shift-slot--rest { border-color: #d8dedb; background: #f4f6f5; color: #66726e; }
.shift-slot--sick { border-color: #e9c8c4; background: #fff0ee; color: #9b4942; }
.shift-slot--holiday { border-color: #c6d8e8; background: #edf5fb; color: #4b7192; }
.shift-slot--leave { border-color: #ead9b9; background: #fff7e8; color: #87642d; }
.shift-slot strong, .shift-slot small { display: block; overflow: hidden; text-overflow: ellipsis; }
.shift-slot strong { font-size: 9px; font-variant-numeric: tabular-nums; }
.shift-slot small { margin-top: 3px; color: #4e776e; font-size: 7px; white-space: nowrap; }
.shift-slot sup, .employee-shift-pill sup { margin-left: 2px; font-size: 6px; }
.shift-add-cell { width: 100%; min-height: 34px; margin-top: 6px; border: 1px dashed #cdd8d4; border-radius: 9px; background: transparent; color: var(--muted); font-size: 8px; font-weight: 800; cursor: pointer; }
.shift-add-cell:hover { border-color: var(--brand-2); color: var(--brand-2); background: #f7fbf9; }
.shift-add-cell span { margin-right: 3px; font-size: 13px; }
.shift-board-note { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.shift-board-note > span { width: 21px; height: 21px; border-radius: 7px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); font-size: 14px; }
.shift-modal { width: min(calc(100% - 32px), 650px); }
.shift-day-note-modal { width: min(calc(100% - 32px), 540px); }
.shift-day-note-modal textarea { min-height: 104px; resize: vertical; }
.shift-day-note-actions { grid-template-columns: auto 1fr auto; }
.shift-form-grid { grid-template-columns: 1fr 1fr; }
.shift-form-grid .form-field > input, .shift-form-grid .form-field > select { height: 46px; }
.shift-time-help { grid-column: 1 / -1; margin-top: -9px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.shift-form-grid [data-shift-time-field][hidden] { display: none; }
.shift-modal-actions { grid-template-columns: auto 1fr auto; }
.shift-delete-button { margin-right: auto; color: var(--danger); border-color: #e8c9c4; }
.shift-delete-button[hidden] { display: none !important; }

.employee-team-schedule { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(20,44,40,.04); }
.employee-schedule-heading { margin-bottom: 5px; }
.employee-schedule-copy { margin: 0 0 17px; color: var(--muted); font-size: 9px; }
.employee-schedule-controls { min-height: 40px; display: grid; grid-template-columns: 40px minmax(130px, 1fr) 40px; align-items: center; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.employee-schedule-controls button { height: 100%; border: 0; background: #f5f8f6; color: var(--brand-2); font-size: 21px; cursor: pointer; }
.employee-schedule-controls strong { padding: 0 10px; font-size: 9px; text-align: center; font-variant-numeric: tabular-nums; }
.employee-schedule-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.employee-schedule-table { min-width: 1000px; table-layout: fixed; }
.employee-schedule-table th:first-child { width: 180px; position: sticky; left: 0; z-index: 3; background: #fff; }
.employee-schedule-table thead th { height: 58px; padding: 9px; background: #f8faf8; text-align: center; }
.employee-schedule-table thead th:first-child { text-align: left; background: #f8faf8; }
.employee-schedule-table thead span, .employee-schedule-table thead strong { display: block; }
.employee-schedule-table thead span { font-size: 8px; text-transform: capitalize; }
.employee-schedule-table thead strong { margin-top: 3px; color: var(--ink); font-size: 14px; }
.employee-schedule-table tbody th { padding: 10px; border-top: 1px solid var(--line); text-align: left; text-transform: none; letter-spacing: normal; }
.employee-schedule-table td { min-width: 112px; padding: 8px; border-left: 1px solid #edf0ef; vertical-align: top; }
.employee-schedule-table .is-today { background: #f0f7f4; }
.employee-schedule-table tr.is-current-employee th, .employee-schedule-table tr.is-current-employee td { box-shadow: inset 0 1px 0 #b9d8cf, inset 0 -1px 0 #b9d8cf; }
.employee-shift-stack { display: grid; gap: 5px; }
.employee-shift-pill { padding: 7px 6px; border-radius: 8px; display: block; background: var(--mint); color: #286b5a; font-size: 8px; font-weight: 850; text-align: center; font-variant-numeric: tabular-nums; }
.employee-shift-pill i { font-style: normal; opacity: .55; }
.employee-shift-pill--cavallo { background: #f0eff8; color: #5f5b83; }
.employee-shift-pill--rest { background: #f0f3f2; color: #66726e; }
.employee-shift-pill--sick { background: #fff0ee; color: #9b4942; }
.employee-shift-pill--holiday { background: #edf5fb; color: #4b7192; }
.employee-shift-pill--leave { background: #fff7e8; color: #87642d; }
.shift-kind-inline { margin-right: 4px; font-size: 7px; text-transform: uppercase; letter-spacing: .04em; }
.employee-shift-rest { display: block; padding: 7px 4px; color: #a0aaa7; font-size: 8px; text-align: center; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { padding: 0 12px 10px; color: #8b9693; font-size: 8px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { padding: 12px; border-top: 1px solid #edf0ef; color: #55625f; font-size: 10px; }
.person { display: flex; align-items: center; gap: 9px; }
.person .avatar { width: 33px; height: 33px; border-radius: 10px; font-size: 9px; }
.person strong, .person small { display: block; }
.person strong { color: var(--ink); font-size: 10px; }
.person small { margin-top: 2px; color: #98a19f; font-size: 8px; }
.avatar--sand { background: var(--sand); color: #856128; }
.avatar--blue { background: var(--blue); color: #486d90; }
.avatar--rose { background: var(--rose); color: var(--danger); }
.avatar--violet { background: var(--violet); color: #76568a; }
.table-status { padding: 5px 8px; border-radius: 20px; font-size: 8px; font-weight: 800; }
.table-status--present { background: var(--mint); color: #28715e; }
.table-status--late { background: var(--rose); color: var(--danger); }
.table-status--break { background: var(--sand); color: #866127; }
.table-status--absent { background: #edf0ef; color: #5e6b68; }
.attendance-status-stack { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.panel-footer-button { width: 100%; min-height: 44px; padding: 14px 0 0; border: 0; border-top: 1px solid #edf0ef; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--brand-2); font-size: 9px; font-weight: 800; cursor: pointer; }

.department-list { display: grid; gap: 19px; }
.department-row { display: grid; grid-template-columns: 1fr 76px auto; align-items: center; gap: 9px; }
.department-row > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.department-row strong { font-size: 10px; }
.department-row small { grid-column: 2; margin-top: 2px; color: var(--muted); font-size: 8px; }
.department-row b { font-size: 9px; }
.department-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-strong); }
.department-dot--blue { background: #6d98bd; }
.department-dot--sand { background: #d09a50; }
.department-dot--rose { background: #c76c6c; }
.department-dot--violet { background: #9a77ad; }
.progress { height: 5px; border-radius: 5px; background: #edf0ef; overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand-2); }

.anomalies-panel { scroll-margin-top: 100px; }
.alert-badge { background: var(--rose); color: var(--danger); }
.anomaly-list { display: grid; }
.anomaly-row { width: 100%; padding: 13px 0; border: 0; border-top: 1px solid #edf0ef; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 11px; background: transparent; text-align: left; cursor: pointer; }
.anomaly-row:first-child { border-top: 0; padding-top: 0; }
.anomaly-row:last-child { padding-bottom: 0; }
.anomaly-icon { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; background: var(--rose); color: var(--danger); font-size: 11px; font-weight: 900; }
.anomaly-icon--blue { background: var(--blue); color: #486d90; }
.anomaly-icon--sand { background: var(--sand); color: #866127; }
.anomaly-row strong, .anomaly-row small { display: block; }
.anomaly-row strong { font-size: 10px; }
.anomaly-row small, .anomaly-row time { margin-top: 3px; color: var(--muted); font-size: 8px; }
.anomaly-row > span:last-child { color: #9ba5a3; }

.week-chart { height: 162px; display: flex; align-items: end; justify-content: space-around; gap: 12px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 39px, #eef1ef 40px); }
.week-chart > div { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; }
.week-chart span { width: min(34px, 72%); min-height: 12px; border-radius: 8px 8px 2px 2px; background: #b8d5cc; }
.week-chart .is-today span { background: var(--brand-2); }
.week-chart small { padding-bottom: 7px; color: var(--muted); font-size: 8px; }

.hours-total { margin-bottom: 20px; padding: 18px; border: 1px solid #bedfd6; border-radius: 15px; background: var(--brand-panel); color: var(--brand-panel-ink); }
.hours-total strong, .hours-total span { display: block; }
.hours-total strong { margin-bottom: 5px; font-size: 29px; letter-spacing: -.04em; }
.hours-total span { color: var(--brand-panel-muted); font-size: 9px; }
.hours-total span[hidden], .report-summary-grid small[hidden], .payroll-summary-grid small[hidden] { display: none !important; }
.hours-breakdown { display: grid; gap: 16px; }
.hours-breakdown div { position: relative; padding-bottom: 9px; display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.hours-breakdown span { color: var(--muted); font-size: 9px; }
.hours-breakdown strong { font-size: 10px; }
.hours-breakdown i { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 4px; background: var(--brand-2); }
.hours-breakdown div::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: #edf0ef; }
.hours-breakdown i.is-warning { background: #c48839; }
.data-caveat { margin: 21px 0 0; padding: 11px; border-radius: 11px; display: flex; align-items: flex-start; gap: 8px; background: #fff7e8; color: #73542c; font-size: 8px; line-height: 1.5; }
.data-caveat svg { width: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }

.live-badge { padding: 5px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; background: var(--mint); color: #28715e; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #3b9679; box-shadow: 0 0 0 3px rgba(59,150,121,.14); }
.events-list { margin: 0; padding: 0; display: grid; list-style: none; }
.events-list li { min-height: 55px; padding: 9px 0; border-top: 1px solid #edf0ef; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.events-list li:first-child { border-top: 0; padding-top: 0; }
.event-direction { width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; background: var(--mint); color: #28715e; }
.event-direction--out { background: var(--rose); color: var(--danger); }
.event-direction--break { background: var(--sand); color: #866127; }
.event-direction svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.events-list strong, .events-list small { display: block; }
.event-offline-badge { margin-left: 7px; padding: 3px 6px; border-radius: 999px; display: inline-flex; vertical-align: middle; background: #fff0cf; color: #8a641f; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.events-list strong { margin-bottom: 3px; font-size: 10px; }
.events-list small, .events-list time { color: var(--muted); font-size: 8px; }

.modal { width: min(calc(100% - 32px), 480px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; color: var(--ink); box-shadow: 0 28px 90px rgba(10,29,26,.25); overflow-y: auto; }
.modal::backdrop { background: rgba(12,27,25,.58); backdrop-filter: blur(4px); }
.modal form { position: relative; padding: 32px; }
.modal-close { position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f0f3f1; color: var(--muted); font-size: 20px; cursor: pointer; }
.modal-icon { width: 50px; height: 50px; margin-bottom: 20px; border-radius: 16px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); }
.modal-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.modal-icon--alert { background: var(--rose); color: var(--danger); font-size: 18px; font-weight: 900; }
.modal h2 { margin-bottom: 10px; font-size: 24px; }
.modal > form > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.6; }
.modal-location { margin-top: 20px; padding: 14px; border-radius: 12px; display: flex; justify-content: space-between; background: #f3f6f4; font-size: 12px; }
.modal-location span { color: var(--muted); }
.modal-actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 9px; }
.danger-button { min-height: 44px; padding: 0 18px; border: 1px solid #a84c4c; border-radius: 12px; background: #a84c4c; color: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; box-shadow: 0 8px 18px rgba(168,76,76,.18); }
.danger-button:hover { background: #933d3d; }
.danger-button:disabled { opacity: .55; cursor: wait; }
.danger-button:focus-visible, .history-void-button:focus-visible, .history-restore-button:focus-visible { outline: 3px solid rgba(168,76,76,.2); outline-offset: 2px; }
.void-session-summary { margin: 20px 0; padding: 15px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 4px; background: #f7f9f7; font-size: 12px; line-height: 1.45; }
.void-session-summary strong, .void-session-summary span { display: block; }
.void-session-summary span { color: var(--muted); font-size: 10px; }
.anomaly-detail { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.anomaly-detail div { padding: 13px; border-radius: 12px; background: #f3f6f4; }
.anomaly-detail span, .anomaly-detail strong { display: block; }
.anomaly-detail span { margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.anomaly-detail strong { font-size: 11px; }

/* Director · user and role management */
[data-director-panel][hidden] { display: none !important; }
.user-management { width: 100%; max-width: 1480px; }
.user-management__header { align-items: flex-end; }
.user-create-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.user-stats { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.user-stats article { min-width: 0; min-height: 92px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; display: flex; align-items: center; gap: 12px; background: #fff; box-shadow: 0 8px 24px rgba(20,44,40,.035); }
.user-stats small, .user-stats strong { display: block; }
.user-stats small { color: var(--muted); font-size: 9px; font-weight: 750; }
.user-stats strong { margin-top: 4px; font-size: 23px; font-variant-numeric: tabular-nums; }
.user-stat-icon { width: 39px; height: 39px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #4e779c; }
.user-stat-icon--active { background: var(--mint); color: #28715e; }
.user-stat-icon--director { background: var(--sand); color: #8a652f; }
.user-stat-icon--disabled { background: var(--rose); color: var(--danger); }
.user-stat-icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.user-directory { padding: 0; }
.user-directory__toolbar { padding: 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.user-directory__toolbar h2 { font-size: 17px; }
.user-directory__controls { display: flex; align-items: center; gap: 9px; }
.user-search { width: min(300px, 30vw); min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 8px; background: #fbfcfb; }
.user-search:focus-within, .compact-select:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(36,106,97,.1); }
.user-search svg { width: 17px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.user-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.compact-select { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; background: #fbfcfb; }
.compact-select select { min-height: 42px; padding: 0 34px 0 12px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; font-weight: 750; cursor: pointer; }
.user-table-wrap { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; contain: inline-size; }
.user-table { min-width: 780px; }
.user-table th { padding: 15px 18px 10px; }
.user-table td { padding: 13px 18px; }
.user-table th:last-child, .user-table td:last-child { text-align: right; }
.role-badge, .account-status, .credential-state { min-height: 26px; padding: 5px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 850; }
.role-badge--director { background: var(--sand); color: #7b5829; }
.role-badge--reception { background: var(--blue); color: #416c90; }
.role-badge--employee { background: var(--mint); color: #28715e; }
.role-badge--accounting { background: #eef1df; color: #53622f; }
.role-badge--head_reception { background: #e4f0ea; color: #27634f; }

body[data-restricted-director-role="true"] [data-director-page][aria-hidden="true"],
body[data-restricted-director-role="true"] [data-director-jump][aria-hidden="true"],
body[data-restricted-director-role="true"] [data-scroll-anomalies][aria-hidden="true"],
body[data-restricted-director-role="true"] .sidebar-label[hidden],
body[data-restricted-director-role="true"] .sidebar-callout[hidden] {
  display: none !important;
}

body[data-app-role="accounting"] #open-correction-from-anomaly,
body[data-app-role="accounting"] [data-add-missing-shift],
body[data-app-role="accounting"] #correction-modal,
body[data-app-role="accounting"] #void-session-modal,
body[data-app-role="accounting"] #restore-session-modal,
body[data-app-role="accounting"] #shift-modal {
  display: none !important;
}

body[data-app-role="head_reception"] #open-correction-from-anomaly,
body[data-app-role="head_reception"] [data-add-missing-shift],
body[data-app-role="head_reception"] #correction-modal,
body[data-app-role="head_reception"] #void-session-modal,
body[data-app-role="head_reception"] #restore-session-modal {
  display: none !important;
}
.account-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-status--active { background: #e7f3ee; color: #28715e; }
.account-status--disabled { background: #f0f2f1; color: #77827f; }
.credential-state { background: #f1f4f2; color: var(--muted); }
.credential-state--temporary { background: #fff3de; color: #8b652f; }
.user-row-actions { display: inline-flex; justify-content: flex-end; gap: 5px; }
.user-action { min-width: 36px; min-height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--brand-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.user-action:hover { background: #f0f5f2; }
.user-action--danger { color: var(--danger); }
.user-action--delete { border-color: #ead1cd; color: var(--danger); }
.user-action--delete:hover { border-color: #dba59c; background: #fff2ef; }
.user-action--delete:focus-visible { outline: 3px solid rgba(167, 61, 43, .2); outline-offset: 2px; }
.user-delete-warning { margin-top: 14px; padding: 12px 14px; border: 1px solid #ead1cd; border-radius: 12px; background: #fff7f5; color: #75463e; font-size: 10px; line-height: 1.55; }
.user-empty { min-width: 100%; padding: 52px 24px; text-align: center; }
.user-empty > span { width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); }
.user-empty svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.user-empty h3 { font-size: 16px; }
.user-empty p { margin: 6px auto 16px; color: var(--muted); font-size: 10px; }
.user-directory__note { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: #f8faf8; color: var(--muted); font-size: 9px; line-height: 1.5; }
.user-directory__note svg { width: 16px; flex: 0 0 auto; fill: none; stroke: var(--brand-2); stroke-width: 1.7; }
.user-modal { width: min(calc(100% - 32px), 720px); }
.credential-modal { width: min(calc(100% - 32px), 470px); }
.user-form-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.form-field { min-width: 0; display: grid; gap: 7px; }
.form-field--wide { grid-column: 1 / -1; }
.form-field > span:first-child { font-size: 10px; font-weight: 800; }
.form-field > input, .form-field > select, .password-field { width: 100%; min-height: 46px; border: 1px solid #d8e1de; border-radius: 12px; background: #fbfcfb; color: var(--ink); font-size: 12px; }
.form-field > input, .form-field > select { padding: 0 12px; }
.form-field > textarea { width: 100%; min-height: 94px; padding: 12px; resize: vertical; border: 1px solid #d8e1de; border-radius: 12px; background: #fbfcfb; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.5; }
.form-field > input:focus, .form-field > select:focus, .form-field > textarea:focus { border-color: var(--brand-2); background: #fff; box-shadow: 0 0 0 4px rgba(36,106,97,.1); outline: 0; }
.form-field small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.password-field { padding-left: 12px; display: flex; align-items: center; }
.password-field:focus-within { border-color: var(--brand-2); background: #fff; box-shadow: 0 0 0 4px rgba(36,106,97,.1); }
.password-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.password-field button { width: 44px; height: 44px; flex: 0 0 auto; border: 0; display: grid; place-items: center; background: transparent; color: var(--brand-2); cursor: pointer; }
.password-field button[hidden] { display: none !important; }
.password-field svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.form-message { min-height: 18px; margin: 12px 0 0; color: var(--danger); font-size: 10px; line-height: 1.5; }
.primary-button:disabled, .secondary-button:disabled { opacity: .62; cursor: wait; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; max-width: min(390px, calc(100% - 32px)); padding: 14px 17px; border-radius: 13px; background: var(--brand); color: #fff; box-shadow: 0 16px 42px rgba(20,44,40,.24); font-size: 11px; font-weight: 750; line-height: 1.45; }
.toast.is-error { background: var(--danger); }

/* Director · department management */
.department-management { width: 100%; max-width: 1480px; }
.department-management__header { align-items: flex-end; }
.department-create-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.department-stats { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.department-stats article { min-height: 88px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 17px; display: grid; align-content: center; gap: 5px; background: #fff; box-shadow: 0 8px 24px rgba(20,44,40,.035); }
.department-stats span { color: var(--muted); font-size: 9px; font-weight: 750; }
.department-stats strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.department-directory { min-width: 0; max-width: 100%; padding: 0; overflow: hidden; contain: inline-size; }
.department-directory__heading { padding: 22px; border-bottom: 1px solid var(--line); }
.department-directory__heading h2 { font-size: 17px; }
.department-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; contain: inline-size; }
.department-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.department-table th, .department-table td { padding: 15px 22px; border-bottom: 1px solid #edf0ef; text-align: left; }
.department-table th { color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.department-table td { font-size: 10px; }
.department-table th:last-child, .department-table td:last-child { text-align: right; }
.department-table tbody tr:last-child td { border-bottom: 0; }
.department-name { display: grid; gap: 3px; }
.department-name strong { font-size: 11px; }
.department-name small { color: var(--muted); font-size: 8px; }
.department-employee-total { font-variant-numeric: tabular-nums; }
.department-employee-total strong { display: block; font-size: 12px; }
.department-employee-total small { color: var(--muted); font-size: 8px; }
.department-directory__note { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; background: #f8faf8; color: var(--muted); font-size: 9px; line-height: 1.5; }
.department-directory__note svg { width: 16px; flex: 0 0 auto; fill: none; stroke: var(--brand-2); stroke-width: 1.7; }
.department-modal { width: min(calc(100% - 32px), 500px); }
.department-name-field { margin-top: 22px; }
.department-modal .modal-actions { margin-top: 22px; }
.department-danger-submit { background: var(--danger); }
.department-danger-submit:hover { background: #9d3d38; }

/* Required password change */
.password-change-modal { width: min(calc(100% - 32px), 520px); }
.password-change-modal::backdrop { background: rgba(10,27,24,.78); backdrop-filter: blur(7px); }
.password-change-modal form { padding: 36px; }
.password-change-fields { margin-top: 24px; display: grid; gap: 17px; }
.password-change-actions { margin-top: 23px; display: grid; grid-template-columns: auto minmax(180px, 1fr); justify-content: end; gap: 9px; }
.form-message.is-success { color: #28715e; }
.correction-modal { width: min(calc(100% - 32px), 620px); }
.correction-person { margin: 18px 0; padding: 12px 14px; border-radius: 12px; background: var(--mint); color: var(--brand-2); font-size: 12px; font-weight: 850; }
.correction-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.correction-audit { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfb; }
.correction-audit > div { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.correction-audit > div span { color: var(--muted); }
.correction-audit ol { max-height: 120px; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; overflow-y: auto; list-style: none; }
.correction-audit li { padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.45; }
.correction-audit li:first-child { padding-top: 0; border-top: 0; }

/* Director · anomaly management */
.anomaly-management { display: grid; gap: 18px; }
.anomaly-management__header { margin-bottom: 2px; }
.anomaly-toolbar { padding: 14px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: stretch; gap: 10px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.anomaly-toolbar .department-filter { min-width: 230px; }
.anomaly-status-filter { min-width: 230px; display: flex; align-items: center; }
.anomaly-status-filter select { width: 100%; min-height: 42px; }
.anomaly-toolbar .secondary-button { margin-left: auto; }
.anomaly-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.anomaly-summary-grid article { min-height: 108px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; display: grid; align-content: center; gap: 4px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.anomaly-summary-grid article.is-urgent { border-color: #eac5c1; background: linear-gradient(135deg, #fff3f1, #fff 78%); }
.anomaly-summary-grid span, .anomaly-summary-grid strong, .anomaly-summary-grid small { display: block; }
.anomaly-summary-grid span { color: var(--muted); font-size: 9px; font-weight: 750; }
.anomaly-summary-grid strong { color: var(--ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.anomaly-summary-grid article.is-urgent strong { color: var(--danger); }
.anomaly-summary-grid small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.offline-review-panel { padding: 0; background: #fffdf8; }
.offline-review-panel > .panel-heading { padding: 22px 22px 0; }
.offline-review-panel td { font-variant-numeric: tabular-nums; }
.offline-review-panel td:first-child strong, .offline-review-panel td:first-child small { display: block; }
.offline-review-panel td:first-child small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.offline-review-status { padding: 5px 8px; border-radius: 999px; display: inline-flex; background: var(--rose); color: var(--danger); font-size: 8px; font-weight: 850; white-space: nowrap; }
.anomaly-table-panel { padding: 0; background: #fff; }
.anomaly-table-panel > .panel-heading { padding: 22px 22px 0; }
.anomaly-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.anomaly-table-wrap table { min-width: 800px; }
.anomaly-table-wrap th, .anomaly-table-wrap td { padding: 14px 18px; }
.anomaly-table-wrap td:nth-child(3), .anomaly-table-wrap td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.anomaly-table-status { padding: 6px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 850; white-space: nowrap; }
.anomaly-table-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.anomaly-table-status.is-urgent { background: var(--rose); color: var(--danger); }
.anomaly-table-status.is-current { background: var(--mint); color: #28715e; }
.anomaly-review-button { min-height: 34px; padding: 0 11px; border: 1px solid #d8e1de; border-radius: 9px; background: #fff; color: var(--brand-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.anomaly-review-button:hover { border-color: var(--brand-2); background: var(--mint); }
.anomaly-empty-state { margin: 0 22px 22px; padding: 26px; border: 1px dashed #cbd9d4; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 13px; background: #f8fbf9; text-align: left; }
.anomaly-empty-state[hidden] { display: none; }
.anomaly-empty-state > span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); font-size: 17px; font-weight: 900; }
.anomaly-empty-state strong { font-size: 11px; }
.anomaly-empty-state p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.anomaly-guidance { padding: 19px 20px; border: 1px solid #d8e4e0; border-radius: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; background: linear-gradient(135deg, #edf6f2, #fff 76%); }
.anomaly-guidance > span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); }
.anomaly-guidance svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.anomaly-guidance h2 { margin-top: 3px; font-size: 17px; }
.anomaly-guidance p:last-child { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }

/* Director · monthly reports */
.report-management { display: grid; gap: 18px; }
.report-management__header { margin-bottom: 2px; }
.report-export-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.report-toolbar { padding: 18px; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(190px, .8fr) auto auto; align-items: stretch; gap: 12px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.report-toolbar__heading { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid #edf0ef; display: flex; align-items: center; gap: 11px; }
.report-toolbar__heading > div, .report-section-label > div { display: grid; gap: 3px; }
.report-toolbar__heading strong, .report-section-label strong { font-size: 13px; }
.report-toolbar__heading small, .report-section-label small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.report-step { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; display: inline-grid; place-items: center; background: var(--brand); color: #fff; font-size: 11px; font-weight: 900; }
.report-updated { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.report-month-control { min-height: 58px; padding: 7px 9px 7px 13px; border: 1px solid #d8e1de; border-radius: 13px; display: flex; align-items: center; gap: 10px; background: #fbfcfb; }
.report-month-control:focus-within, .report-department-filter:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(36,106,97,.1); }
.report-month-control > svg { width: 19px; flex: 0 0 auto; fill: none; stroke: var(--brand-2); stroke-width: 1.7; }
.report-month-control > span { min-width: 0; display: grid; gap: 2px; }
.report-month-control small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.report-month-control strong { font-size: 11px; }
.report-month-control input { min-height: 40px; margin-left: auto; padding: 0 9px; border: 0; border-radius: 9px; outline: 0; background: #eef3f0; color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.report-department-filter { min-height: 58px; min-width: 190px; padding: 8px 12px; border-radius: 13px; background: #fbfcfb; }
.report-department-filter > span { font-size: 8px; }
.report-department-filter select { width: 100%; min-width: 0; min-height: 28px; font-size: 11px; }
.report-period-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.report-period-actions .secondary-button { min-height: 58px; padding: 0 13px; white-space: nowrap; }
.report-period-actions .secondary-button.is-current { border-color: #b9d7cd; background: var(--mint); color: var(--brand-2); }
.report-refresh-button { min-height: 58px; }
.report-state-card { padding: 18px 20px; border: 1px solid #bad9cf; border-radius: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; background: linear-gradient(135deg, #edf8f3, #fff 74%); }
.report-state-card[data-state="open"] { border-color: #ead7b8; background: linear-gradient(135deg, #fff8eb, #fff 74%); }
.report-state-card[data-state="blocked"] { border-color: #eac5c1; background: linear-gradient(135deg, #fff1ef, #fff 74%); }
.report-state-card[data-state="empty"] { border-color: var(--line); background: #fff; }
.report-state-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--mint); color: var(--brand-2); }
.report-state-card[data-state="open"] .report-state-icon { background: var(--sand); color: #815c28; }
.report-state-card[data-state="blocked"] .report-state-icon { background: var(--rose); color: var(--danger); }
.report-state-card[data-state="empty"] .report-state-icon { background: #edf0ef; color: var(--muted); }
.report-state-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.report-state-card h2 { margin-top: 3px; font-size: 18px; }
.report-state-card p:last-child { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.report-state-actions { display: grid; justify-items: end; gap: 8px; }
.report-state-badge { min-height: 29px; padding: 6px 10px; border-radius: 999px; background: var(--mint); color: #246a54; font-size: 9px; font-weight: 850; white-space: nowrap; }
.report-review-button { min-height: 35px; padding: 0 11px; border: 1px solid #dfb8b3; border-radius: 10px; background: #fff; color: var(--danger); font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.report-review-button:hover { border-color: var(--danger); background: #fff4f2; }
.report-review-button[hidden] { display: none; }
.report-state-card[data-state="open"] .report-state-badge { background: #fff0d5; color: #865e27; }
.report-state-card[data-state="blocked"] .report-state-badge { background: var(--rose); color: var(--danger); }
.report-state-card[data-state="empty"] .report-state-badge { background: #edf0ef; color: var(--muted); }
.report-section-label { display: flex; align-items: center; gap: 11px; }
.report-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.report-summary-grid article { min-height: 108px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; display: grid; align-content: center; gap: 4px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.report-summary-grid article.is-blocked { border-color: #eac5c1; background: #fff8f7; }
.report-summary-grid span { color: var(--muted); font-size: 11px; font-weight: 750; }
.report-summary-grid strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.report-summary-grid small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.report-summary-grid article.is-blocked strong { color: var(--danger); }
.report-table-panel { padding: 0; background: #fff; }
.report-table-panel > .panel-heading { padding: 22px 22px 0; }
.report-table-title { display: flex; align-items: center; gap: 11px; }
.report-table-title .eyebrow { margin-bottom: 3px; }
.report-table-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.report-search { min-height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; gap: 7px; background: #fbfcfb; }
.report-search:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(36,106,97,.1); }
.report-search svg { width: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.report-search input { width: 150px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 10px; }
.report-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.report-table { min-width: 760px; }
.report-table th, .report-table td { padding: 15px 18px; }
.report-table td:nth-child(n+3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-hours { color: var(--brand-2); font-size: 12px; }
.report-table-empty { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 5px; text-align: center; }
.report-table-empty strong { font-size: 12px; }
.report-table-empty small { color: var(--muted); font-size: 10px; }
.report-data-note { margin: 0; padding: 15px 22px; border-top: 1px solid #eee5d7; display: flex; align-items: flex-start; gap: 9px; background: #fffaf1; color: #73542c; font-size: 10px; line-height: 1.55; }
.report-data-note strong { color: #5f431f; }
.report-data-note svg { width: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Director · monthly payroll closure */
.payroll-management { display: grid; gap: 18px; }
.payroll-management__header { margin-bottom: 2px; }
.payroll-toolbar { padding: 14px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; gap: 12px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.payroll-month-control { min-height: 54px; min-width: 330px; padding: 7px 9px 7px 13px; border: 1px solid #d8e1de; border-radius: 13px; display: flex; align-items: center; gap: 10px; background: #fbfcfb; }
.payroll-month-control:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(36,106,97,.1); }
.payroll-month-control > svg { width: 19px; flex: 0 0 auto; fill: none; stroke: var(--brand-2); stroke-width: 1.7; }
.payroll-month-control > span { min-width: 0; display: grid; gap: 2px; }
.payroll-month-control small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.payroll-month-control strong { font-size: 10px; white-space: nowrap; }
.payroll-month-control input { min-height: 38px; margin-left: auto; padding: 0 8px; border: 0; border-radius: 9px; outline: 0; background: #eef3f0; color: var(--ink); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.payroll-toolbar .secondary-button { margin-left: auto; }
.payroll-toolbar .secondary-button span { font-size: 15px; }
.payroll-state-card { padding: 18px 20px; border: 1px solid #ead7b8; border-radius: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; background: linear-gradient(135deg, #fffaf1, #fff 72%); }
.payroll-state-card[data-state="ready"] { border-color: #bcdacf; background: linear-gradient(135deg, #edf8f3, #fff 72%); }
.payroll-state-card[data-state="locked"] { border-color: #a9d0c5; background: linear-gradient(135deg, #e7f4ef, #fff 72%); }
.payroll-state-card[data-state="blocked"] { border-color: #eac5c1; background: linear-gradient(135deg, #fff0ee, #fff 72%); }
.payroll-state-icon, .payroll-lock-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sand); color: #815c28; }
.payroll-state-card[data-state="ready"] .payroll-state-icon, .payroll-state-card[data-state="locked"] .payroll-state-icon { background: var(--mint); color: var(--brand-2); }
.payroll-state-card[data-state="blocked"] .payroll-state-icon { background: var(--rose); color: var(--danger); }
.payroll-state-icon svg, .payroll-lock-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.payroll-state-card h2 { margin-top: 3px; font-size: 17px; }
.payroll-state-card p:last-child { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.payroll-state-badge { min-height: 29px; padding: 6px 10px; border-radius: 999px; background: #fff3de; color: #865e27; font-size: 8px; font-weight: 850; white-space: nowrap; }
.payroll-state-card[data-state="ready"] .payroll-state-badge, .payroll-state-card[data-state="locked"] .payroll-state-badge { background: #dff1e9; color: #246a54; }
.payroll-state-card[data-state="blocked"] .payroll-state-badge { background: #fae1de; color: var(--danger); }
.payroll-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.payroll-summary-grid article { min-height: 110px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; display: grid; align-content: center; gap: 4px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.payroll-summary-grid span { color: var(--muted); font-size: 9px; font-weight: 750; }
.payroll-summary-grid strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.payroll-summary-grid small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.payroll-summary-grid article.is-blocked { border-color: #eac5c1; background: #fff8f7; }
.payroll-summary-grid article.is-blocked strong { color: var(--danger); }

/* Evidenzia soltanto il totale principale di ogni sezione. */
article.total-summary-card {
  border-color: #bedfd6;
  background: var(--brand-panel);
}
.report-table tr.is-paid-holiday td, .payroll-table tr.is-paid-holiday td { background: #fffafa; }
.report-hours + .holiday-x2, .payroll-hours + .holiday-x2 { margin-left: 7px; vertical-align: middle; }
.payroll-table-panel { overflow: hidden; }
.payroll-table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.payroll-table { min-width: 760px; }
.payroll-table th, .payroll-table td { padding: 14px 18px; }
.payroll-table td:nth-child(3), .payroll-table td:nth-child(4), .payroll-table td:nth-child(5) { font-variant-numeric: tabular-nums; }
.payroll-hours { font-size: 12px; font-weight: 850; }
.payroll-row-status { min-height: 27px; padding: 5px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; background: #e7f3ee; color: #28715e; font-size: 8px; font-weight: 850; white-space: nowrap; }
.payroll-row-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.payroll-row-status--blocked { background: #fae1de; color: var(--danger); }
.payroll-row-status--locked { background: var(--blue); color: #416c90; }
.payroll-lock-card { padding: 19px 20px; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.payroll-lock-card h2 { margin-top: 3px; font-size: 17px; }
.payroll-lock-card p:last-child { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.payroll-lock-icon { background: #eef3f0; color: var(--brand-2); }
.payroll-lock-card .primary-button { min-width: 145px; }
.payroll-lock-card .primary-button:disabled { cursor: not-allowed; }
.payroll-lock-modal { width: min(calc(100% - 32px), 600px); }
.payroll-lock-summary { margin: 20px 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.payroll-lock-summary div { padding: 13px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 4px; background: #f8faf8; }
.payroll-lock-summary span { color: var(--muted); font-size: 8px; font-weight: 750; }
.payroll-lock-summary strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.payroll-confirm-check { margin-top: 15px; padding: 13px; border: 1px solid #d8e1de; border-radius: 12px; display: flex; align-items: flex-start; gap: 10px; background: #fbfcfb; color: var(--ink); font-size: 10px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.payroll-confirm-check:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(36,106,97,.1); }
.payroll-confirm-check input { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--brand-2); }

/* Director · essential settings */
.settings-management { display: grid; gap: 18px; }
.settings-management__header { margin-bottom: 2px; }
.settings-form { display: grid; gap: 14px; }
.settings-card { padding: 21px; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: auto minmax(210px, .72fr) minmax(300px, 1fr); align-items: start; gap: 17px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.settings-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #eef3f0; color: var(--brand-2); }
.settings-card__icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.settings-card__heading h2, .settings-security-card h2 { margin-top: 3px; font-size: 17px; }
.settings-card__heading > p:last-child, .settings-security-card p:last-child { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.settings-fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: 12px; }
.settings-fields--single { grid-template-columns: minmax(220px, 360px); }
.settings-fields .form-field { margin: 0; align-content: start; }
.settings-fields .form-field input, .settings-fields .form-field select { min-height: 44px; }
.settings-number-control { position: relative; display: block; }
.settings-number-control input { width: 100%; padding-right: 54px; font-variant-numeric: tabular-nums; }
.settings-number-control b { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--muted); font-size: 10px; pointer-events: none; }
.settings-security-card { padding: 18px 20px; border: 1px solid #bcdacf; border-radius: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; background: linear-gradient(135deg, #edf8f3, #fff 72%); }
.settings-security-card > span:first-child { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #dff1e9; color: #246a54; }
.settings-security-card svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.settings-security-badge { min-height: 29px; padding: 6px 10px; border-radius: 999px; background: #dff1e9; color: #246a54; font-size: 8px; font-weight: 850; white-space: nowrap; }
.settings-form-actions { padding: 15px 18px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; box-shadow: 0 8px 24px rgba(24,55,50,.04); }
.settings-save-state { display: grid; gap: 3px; }
.settings-save-state strong { font-size: 11px; }
.settings-save-state small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.settings-form-message { margin: 0; color: var(--muted); font-size: 9px; }
.settings-form-message.is-error { color: var(--danger); }
.settings-form-message.is-success { color: #246a54; }
.settings-form-actions .primary-button { min-width: 180px; }
.holiday-settings-card { grid-template-columns: auto minmax(210px, .72fr) minmax(360px, 1fr); }
.settings-card__icon--holiday { border: 1px solid #efc5c0; background: #fff1ef; color: #9f3831; font-size: 15px; font-weight: 950; }
.holiday-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(145px, .8fr); gap: 11px; }
.holiday-form .form-field { margin: 0; }
.holiday-form .form-field input { min-height: 44px; }
.holiday-recurring { grid-column: 1 / -1; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: flex-start; gap: 10px; background: #fafcfa; cursor: pointer; }
.holiday-recurring input { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; accent-color: #a33c34; }
.holiday-recurring strong, .holiday-recurring small { display: block; }
.holiday-recurring strong { font-size: 10px; }
.holiday-recurring small { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.holiday-add-button { min-height: 42px; }
.holiday-form-message { align-self: center; }
.holiday-list { grid-column: 3; display: grid; gap: 8px; }
.holiday-list-item { min-height: 55px; padding: 9px 10px; border: 1px solid #efd2ce; border-radius: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #fffafa; }
.holiday-list-item__multiplier { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fce0dc; color: #9f3831; font-size: 11px; font-weight: 950; }
.holiday-list-item strong, .holiday-list-item small { display: block; }
.holiday-list-item strong { color: var(--ink); font-size: 10px; }
.holiday-list-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.holiday-remove-button { min-height: 32px; padding: 0 9px; border: 1px solid #e9c0bb; border-radius: 8px; background: #fff; color: #9f3831; font-size: 8px; font-weight: 850; cursor: pointer; }
.holiday-remove-button:hover, .holiday-remove-button:focus-visible { border-color: #a33c34; outline: 0; }
.holiday-empty { margin: 0; padding: 13px; border: 1px dashed #dfd7d5; border-radius: 11px; color: var(--muted); font-size: 9px; text-align: center; }

/* Privacy, cookie e presa visione */
.legal-dock { position: fixed; right: 18px; bottom: 14px; z-index: 14; min-height: 34px; padding: 8px 12px; border: 1px solid rgba(23,111,103,.15); border-radius: 999px; display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(20,44,40,.08); backdrop-filter: blur(12px); }
.legal-dock a { color: var(--brand-2); font-size: 9px; font-weight: 800; text-decoration: none; }
.legal-dock a:hover, .legal-dock a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.technical-notice-open .legal-dock { display: none; }
.technical-storage-notice { position: fixed; left: 50%; bottom: 18px; z-index: 90; width: min(760px, calc(100% - 32px)); padding: 15px 16px 15px 18px; border: 1px solid #bcd8d0; border-radius: 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; background: rgba(250,253,251,.98); box-shadow: 0 18px 52px rgba(16,45,40,.2); transform: translateX(-50%); backdrop-filter: blur(16px); }
.technical-storage-notice strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 11px; }
.technical-storage-notice p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.technical-storage-notice__actions { display: flex; align-items: center; gap: 9px; }
.technical-storage-notice__actions a { color: var(--brand-2); font-size: 9px; font-weight: 850; text-underline-offset: 3px; }
.technical-storage-notice__actions button { min-height: 39px; padding: 0 15px; border: 1px solid var(--brand); border-radius: 11px; background: var(--brand); color: #fff; font-size: 9px; font-weight: 850; cursor: pointer; }
.privacy-notice-modal { width: min(calc(100% - 32px), 680px); }
.privacy-notice-modal::backdrop { background: rgba(10,27,24,.78); backdrop-filter: blur(7px); }
.privacy-notice-modal form { padding: 34px; }
.privacy-notice-summary { max-height: min(34dvh, 280px); margin: 21px 0 16px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 15px; overflow-y: auto; background: #f8faf8; }
.privacy-notice-summary h3 { margin: 0 0 7px; font-size: 12px; }
.privacy-notice-summary p, .privacy-notice-summary li { color: var(--muted); font-size: 10px; line-height: 1.55; }
.privacy-notice-summary p { margin: 0 0 10px; }
.privacy-notice-summary ul { margin: 0; padding-left: 18px; }
.privacy-notice-summary a { color: var(--brand-2); font-weight: 800; }
.privacy-acknowledgement-check { padding: 13px 14px; border: 1px solid #c9ddd7; border-radius: 13px; display: flex; align-items: flex-start; gap: 11px; background: #f3faf7; cursor: pointer; }
.privacy-acknowledgement-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--brand); }
.privacy-acknowledgement-check span { color: var(--ink); font-size: 10px; font-weight: 750; line-height: 1.5; }
.privacy-notice-actions { margin-top: 18px; display: grid; grid-template-columns: auto minmax(210px, 1fr); gap: 9px; }
.privacy-notice-actions .primary-button:disabled { opacity: .5; cursor: not-allowed; }
.legal-page { min-height: 100dvh; background: linear-gradient(180deg, #eef6f2 0, #f8faf8 270px, #f8faf8 100%); }
.legal-page__header { min-height: 92px; padding: 14px clamp(18px, 5vw, 68px); border-bottom: 1px solid rgba(23,111,103,.13); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }
.legal-page__header img { width: 230px; height: 64px; object-fit: contain; }
.legal-page__header .secondary-button { text-decoration: none; }
.legal-document { width: min(900px, calc(100% - 36px)); margin: 54px auto 34px; padding: clamp(25px, 5vw, 58px); border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 24px 70px rgba(20,44,40,.08); }
.legal-document h1 { max-width: 720px; margin: 7px 0 8px; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -.045em; }
.legal-document__version { margin: 0 0 28px; color: var(--brand-2) !important; font-size: 9px !important; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.legal-document > p, .legal-document li { color: #4f5e5b; font-size: 12px; line-height: 1.75; }
.legal-document > section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal-document h2 { margin-bottom: 10px; font-size: 18px; }
.legal-document section p, .legal-document section li { color: #4f5e5b; font-size: 12px; line-height: 1.72; }
.legal-document ul { padding-left: 20px; }
.legal-document a { color: var(--brand-2); text-underline-offset: 3px; }
.legal-table-wrap { width: 100%; overflow-x: auto; }
.legal-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 13px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 10px; line-height: 1.55; }
.legal-table th { background: #edf6f2; color: var(--ink); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.legal-document__footer { padding: 0 18px 42px; display: flex; justify-content: center; gap: 9px; color: var(--muted); font-size: 10px; }
.legal-document__footer a { color: var(--brand-2); font-weight: 800; }

@media (max-width: 1100px) {
  .access-page { grid-template-columns: minmax(0, 1fr) minmax(370px, .8fr); gap: 40px; }
  .access-copy h1 { font-size: 50px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .department-panel, .weekly-panel { order: 2; }
  .employee-content-grid { grid-template-columns: 1fr; }
  .employee-side-stack { grid-template-columns: repeat(2, 1fr); }
  .employee-shift-card { grid-column: 1 / -1; }
  .user-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anomaly-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-period-actions { grid-column: 1; }
  .report-refresh-button { grid-column: 2; }
  .report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-card { grid-template-columns: auto minmax(0, 1fr); }
  .holiday-settings-card { grid-template-columns: auto minmax(0, 1fr); }
  .holiday-settings-card .holiday-form, .holiday-settings-card .holiday-list { grid-column: 1 / -1; }
  .settings-fields { grid-column: 2; }
}

@media (max-width: 820px) {
  .access-page { min-height: 100dvh; grid-template-columns: 1fr; gap: 28px; }
  .access-intro { width: 100%; min-height: auto; }
  .access-brand { margin-bottom: 52px; }
  .access-copy { padding: 0; }
  .access-copy h1 { font-size: clamp(38px, 9vw, 54px); }
  .access-copy > p:last-child { font-size: 14px; }
  .access-trust { margin-top: 30px; }
  .login-card { width: 100%; max-width: none; justify-self: stretch; }
  .topbar { grid-template-columns: 1fr auto; min-height: 68px; }
  .profile-account { display: none; }
  .topbar--single .profile-account { display: flex; }
  .view-switch { justify-self: end; }
  .view-switch__button { padding: 8px 10px; }
  .director-view { grid-template-columns: 1fr; }
  .sidebar { width: 100%; min-width: 0; max-width: 100vw; padding: 10px 16px; display: block; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-inline: contain; contain: inline-size; }
  .sidebar nav { display: flex; width: max-content; }
  .sidebar-label, .support-card, .sidebar-link > svg, .nav-count { display: none; }
  .sidebar-link { width: auto; white-space: nowrap; }
  .dashboard { padding: 28px 18px 50px; }
  .kiosk-view { padding: 28px 18px 24px; }
  .department-grid, .employee-picker { grid-template-columns: repeat(2, 1fr); }
  .employee-summary-grid { grid-template-columns: 1fr 1fr; }
  .employee-summary-card--primary { grid-column: auto; }
  .user-directory__toolbar { align-items: stretch; flex-direction: column; }
  .user-directory__controls { width: 100%; }
  .user-search { width: 100%; }
  .shift-management__header { align-items: stretch; flex-direction: column; }
  .shift-header-actions { width: 100%; flex-wrap: wrap; }
  .shift-header-actions > button { flex: 1 1 180px; }
  .shift-create-button { width: 100%; }
  .shift-toolbar { flex-wrap: wrap; }
  .shift-toolbar > .department-filter { min-width: 100%; margin-left: 0; }
  .anomaly-toolbar { flex-wrap: wrap; }
  .anomaly-toolbar .department-filter, .anomaly-status-filter { min-width: calc(50% - 5px); flex: 1; }
  .report-management__header { align-items: stretch; flex-direction: column; }
  .report-export-button { width: 100%; }
  .report-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-month-control, .report-department-filter { min-width: 0; }
  .settings-management__header { align-items: stretch; flex-direction: column; }
  .department-management__header { align-items: stretch; flex-direction: column; }
  .settings-fields { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .access-page { padding: 20px 14px 28px; align-items: start; }
  .legal-dock { right: 12px; bottom: 82px; }
  .technical-storage-notice { bottom: 12px; padding: 15px; grid-template-columns: 1fr; gap: 13px; }
  .technical-storage-notice__actions { justify-content: space-between; }
  .technical-storage-notice__actions button { min-width: 112px; }
  .privacy-notice-modal form { padding: 26px 21px; }
  .privacy-notice-summary { max-height: 32dvh; padding: 14px; }
  .privacy-notice-actions { grid-template-columns: 1fr; }
  .legal-page__header { min-height: 76px; padding: 10px 16px; }
  .legal-page__header img { width: 178px; height: 52px; }
  .legal-page__header .secondary-button { min-height: 39px; padding: 0 11px; font-size: 9px; }
  .legal-document { width: calc(100% - 24px); margin: 22px auto 28px; padding: 25px 20px; border-radius: 20px; }
  .legal-document h1 { font-size: 34px; }
  .access-brand { margin: 0 4px 38px; padding: 0; }
  .access-brand .brand-logo { width: 290px; height: 105px; }
  .access-copy { padding: 0 4px; }
  .access-copy h1 { margin-bottom: 17px; font-size: 36px; }
  .access-trust { padding: 0 4px; gap: 13px 18px; }
  .login-card { padding: 25px 20px; border-radius: 22px; }
  .login-lock { width: 45px; height: 45px; margin-bottom: 18px; }
  .login-heading { margin-bottom: 24px; }
  .login-heading h2 { font-size: 27px; }
  .login-help { align-items: flex-start; flex-direction: column; gap: 4px; }
  .login-help small { text-align: left; }
  .profile-signout { padding-left: 8px; font-size: 9px; }
  .topbar { padding: 10px 14px; grid-template-columns: 1fr; gap: 8px; }
  .topbar--single { grid-template-columns: 1fr auto; }
  .brand-logo { width: 172px; height: 50px; }
  .brand { display: none; }
  .topbar--single .brand { display: inline-flex; }
  .topbar--single .profile-account .avatar { display: none; }
  .topbar--single .profile-copy { min-width: 0; max-width: 108px; }
  .topbar--single .profile-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .view-switch { width: 100%; }
  .view-switch__button { flex: 1; min-height: 44px; padding: 7px 5px; font-size: 11px; }
  .kiosk-view { min-height: calc(100dvh - 58px); padding: 24px 12px 20px; }
  .kiosk-heading { align-items: flex-start; }
  .kiosk-heading h1 { font-size: 31px; }
  .kiosk-heading > div:first-child > p:last-child { font-size: 13px; }
  .kiosk-time { min-width: auto; padding-left: 0; border-left: 0; }
  .kiosk-time strong { font-size: 27px; }
  .kiosk-time span { display: none; }
  .kiosk-time span.holiday-badge--kiosk:not([hidden]) { display: inline-flex; }
  .kiosk-progress { margin: 28px auto 16px; }
  .kiosk-progress span { width: 34px; height: 34px; }
  .kiosk-progress li:not(:last-child)::after { left: calc(50% + 18px); right: calc(-50% + 18px); top: 16px; }
  .kiosk-progress strong { font-size: 9px; }
  .kiosk-card { min-height: 510px; padding: 22px 16px; border-radius: 21px; }
  .kiosk-step-heading { margin-bottom: 20px; grid-template-columns: 1fr; gap: 10px; }
  .step-number { width: 39px; height: 39px; border-radius: 12px; }
  .department-grid, .employee-picker { grid-template-columns: 1fr; gap: 10px; }
  .department-button { min-height: 84px; padding: 13px; border-radius: 16px; }
  .department-button__icon { width: 47px; height: 47px; border-radius: 14px; }
  .employee-button { min-height: 80px; }
  .employee-state { font-size: 8px; }
  .pin-identity { justify-content: flex-start; }
  .pin-pad button { min-height: 56px; }
  .kiosk-step--confirm .kiosk-back { display: flex; }
  .confirmation-summary { padding: 5px 14px; }
  .kiosk-footer { align-items: flex-start; }
  .kiosk-footer > span:first-child { display: none; }
  .employee-view { min-height: calc(100dvh - 64px); padding: 28px 12px 104px; }
  .employee-intro { padding: 0 6px; align-items: stretch; flex-direction: column; gap: 14px; }
  .employee-kicker { align-items: flex-start; flex-direction: column; }
  .employee-intro h1 { font-size: 31px; }
  .employee-intro > div > p:last-child { font-size: 13px; }
  .employee-profile-button { width: 100%; }
  .employee-status-card { padding: 22px 17px; border-radius: 20px; }
  .employee-status-heading { align-items: center; }
  .employee-status-line h2 { font-size: 21px; }
  .employee-status-heading > div:first-child > p:last-child { max-width: 220px; line-height: 1.5; }
  .employee-live-time strong { font-size: 24px; }
  .employee-status-grid { margin-top: 20px; }
  .employee-status-grid div { padding: 13px 9px; }
  .employee-status-grid strong { font-size: 16px; }
  .employee-status-grid small { line-height: 1.35; }
  .reception-only-note { align-items: flex-start; }
  .employee-summary-grid { grid-template-columns: 1fr; }
  .employee-summary-card--primary { grid-column: auto; }
  .employee-content-grid { gap: 14px; }
  .employee-hours-card, .employee-shift-card, .employee-review-card, .employee-identity-card { padding: 18px; border-radius: 18px; }
  .employee-hours-heading { align-items: stretch; flex-direction: column; }
  .employee-period-switch { width: 100%; }
  .employee-period-switch button { min-height: 44px; flex: 1; }
  .employee-day-row { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 9px; }
  .employee-day-status { grid-column: 2 / 4; min-width: 0; justify-self: start; }
  .employee-side-stack { grid-template-columns: 1fr; }
  .employee-shift-card { grid-column: auto; }
  .employee-shift-details { grid-template-columns: repeat(3, 1fr); }
  .mobile-nav { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 15; padding: 7px; border: 1px solid rgba(255,255,255,.5); border-radius: 18px; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(22,63,60,.95); box-shadow: 0 16px 36px rgba(20,44,40,.24); backdrop-filter: blur(15px); }
  .mobile-nav button { min-height: 48px; border: 0; border-radius: 12px; display: grid; place-items: center; gap: 2px; background: transparent; color: rgba(255,255,255,.65); font-size: 9px; font-weight: 750; }
  .mobile-nav button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .mobile-nav button.is-active { background: rgba(255,255,255,.12); color: #fff; }
  .dashboard-header { align-items: flex-start; }
  .director-toolbar { align-items: stretch; flex-direction: column; }
  .period-switch { width: 100%; }
  .period-switch button { flex: 1; }
  .date-control { width: 100%; justify-content: center; }
  .director-kicker { align-items: flex-start; flex-direction: column; }
  .dashboard-actions .secondary-button { width: 44px; padding: 0; font-size: 0; }
  .metrics-grid { grid-template-columns: 1fr; }
  .panel { padding: 18px; }
  .panel-heading { flex-direction: column; }
  .filter-group { width: 100%; }
  .filter-chip { min-height: 44px; flex: 1; }
  .department-filter { width: 100%; }
  .department-filter select { width: 100%; min-height: 24px; }
  .history-toolbar { grid-template-columns: 1fr; }
  .history-toolbar .date-control, .history-toolbar .department-filter { flex: 1 1 auto; }
  .history-toolbar .secondary-button { width: 100%; margin-left: 0; }
  .history-summary-grid { grid-template-columns: 1fr; }
  .anomaly-toolbar { flex-direction: column; }
  .anomaly-toolbar .department-filter, .anomaly-status-filter { width: 100%; min-width: 0; }
  .anomaly-toolbar .secondary-button { width: 100%; margin-left: 0; }
  .anomaly-summary-grid { grid-template-columns: 1fr; }
  .anomaly-table-panel > .panel-heading { padding: 18px 18px 0; }
  .anomaly-empty-state { margin: 0 18px 18px; padding: 20px; align-items: flex-start; }
  .anomaly-guidance { align-items: start; }
  .report-toolbar { grid-template-columns: 1fr; padding: 15px; }
  .report-toolbar__heading, .report-period-actions, .report-refresh-button { grid-column: 1; }
  .report-toolbar__heading { align-items: flex-start; flex-wrap: wrap; }
  .report-updated { width: 100%; margin-left: 39px; }
  .report-month-control, .report-department-filter { width: 100%; min-width: 0; }
  .report-period-actions { grid-template-columns: 1fr 1fr; }
  .report-toolbar .secondary-button { width: 100%; margin-left: 0; }
  .report-state-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .report-state-actions { grid-column: 2; justify-items: start; }
  .report-summary-grid { grid-template-columns: 1fr; }
  .report-table-panel > .panel-heading { padding: 18px 18px 0; }
  .report-table-tools { width: 100%; justify-content: flex-start; }
  .report-search { width: 100%; }
  .report-search input { width: 100%; }
  .report-data-note { padding: 14px 18px; }
  .settings-card { padding: 18px; grid-template-columns: auto minmax(0, 1fr); }
  .settings-card__icon { width: 42px; height: 42px; }
  .settings-card__heading, .settings-fields { grid-column: 1 / -1; }
  .holiday-form { grid-template-columns: 1fr; }
  .holiday-recurring { grid-column: 1; }
  .holiday-list-item { grid-template-columns: auto minmax(0, 1fr); }
  .holiday-remove-button { grid-column: 2; justify-self: start; }
  .settings-security-card { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
  .settings-security-badge { grid-column: 2; justify-self: start; }
  .settings-form-actions { align-items: stretch; flex-direction: column; }
  .settings-form-actions .primary-button { width: 100%; }
  .shift-toolbar { flex-direction: column; }
  .shift-week-nav { width: 100%; min-width: 0; }
  .shift-toolbar > .secondary-button { width: 100%; }
  .shift-summary { grid-template-columns: 1fr; }
  .shift-board > .panel-heading { padding: 18px 18px 0; }
  .shift-board-note { padding: 13px 18px; align-items: flex-start; line-height: 1.5; }
  .shift-form-grid { grid-template-columns: 1fr; }
  .correction-form-grid { grid-template-columns: 1fr; }
  .shift-modal-actions { grid-template-columns: 1fr; }
  .shift-day-note-actions { grid-template-columns: 1fr; }
  .shift-delete-button { width: 100%; order: 3; }
  .employee-team-schedule { padding: 18px; border-radius: 18px; }
  .employee-schedule-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .employee-schedule-controls { width: 100%; }
  .text-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }
  .icon-button--small { width: 44px; height: 44px; }
  .anomaly-row { grid-template-columns: auto 1fr auto; }
  .anomaly-row time { display: none; }
  .modal form { padding: 28px 22px; }
  .modal-actions { display: grid; grid-template-columns: 1fr 1.3fr; }
  .anomaly-detail { grid-template-columns: 1fr; }
  .user-management__header { align-items: stretch; flex-direction: column; }
  .user-create-button { width: 100%; }
  .department-create-button { width: 100%; }
  .department-stats { grid-template-columns: 1fr; }
  .department-table { min-width: 0; display: block; }
  .department-table thead { display: none; }
  .department-table tbody { width: 100%; display: block; }
  .department-table tr { width: 100%; padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; border-bottom: 1px solid #edf0ef; }
  .department-table tr:last-child { border-bottom: 0; }
  .department-table td { padding: 0; border: 0; }
  .department-table td:first-child { grid-column: 1; grid-row: 1; }
  .department-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .department-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .department-table td:last-child { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .department-table .user-row-actions { width: 100%; justify-content: flex-start; }
  .department-table .user-action { min-height: 42px; flex: 1; }
  .department-modal .modal-actions { grid-template-columns: 1fr; }
  .user-stats { grid-template-columns: 1fr; }
  .user-directory__controls { align-items: stretch; flex-direction: column; }
  .compact-select select { width: 100%; }
  .user-table th { padding-left: 14px; padding-right: 14px; }
  .user-table td { padding-left: 14px; padding-right: 14px; }
  .user-form-grid { grid-template-columns: 1fr; }
  .form-field--wide { grid-column: auto; }
  .user-modal .modal-actions, .credential-modal .modal-actions { grid-template-columns: 1fr; }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .password-change-modal form { padding: 28px 22px; }
  .password-change-actions { grid-template-columns: 1fr; }
  .payroll-toolbar { align-items: stretch; flex-direction: column; }
  .payroll-month-control { width: 100%; min-width: 0; }
  .payroll-toolbar .secondary-button { width: 100%; margin-left: 0; }
  .payroll-state-card, .payroll-lock-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .payroll-state-badge { grid-column: 2; justify-self: start; }
  .payroll-lock-card .primary-button { width: 100%; grid-column: 1 / -1; }
  .payroll-summary-grid { grid-template-columns: 1fr; }
  .payroll-lock-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}