:root {
  --ink: #161914;
  --muted: #6f746b;
  --line: #e5e7df;
  --paper: #f5f5f1;
  --surface: #ffffff;
  --accent: #ffd437;
  --accent-dark: #e4b900;
  --green: #35a96d;
  --green-soft: #e9f7ef;
  --pause-soft: #fff8d8;
  --danger: #c34d45;
  --shadow: 0 22px 70px rgba(28, 33, 24, .09);
  --radius-lg: 28px;
  --radius-md: 18px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 0 6%, rgba(255, 212, 55, .15) 0 1px, transparent 2px) 0 0 / 24px 24px,
    var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(228, 185, 0, .45); outline-offset: 3px; }
[hidden] { display: none !important; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
  height: 82px;
  padding: 0 clamp(24px, 5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(22, 25, 20, .08);
  background: rgba(245, 245, 241, .92);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 29px; height: 29px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 5px; background: var(--ink); border-radius: 9px; }
.brand-mark span { display: block; background: var(--accent); border-radius: 1px; }
.brand-mark span:nth-child(1) { height: 7px; }
.brand-mark span:nth-child(2) { height: 13px; }
.brand-mark span:nth-child(3) { height: 9px; }
.brand-word { font-size: 21px; font-weight: 780; letter-spacing: -.05em; }
.brand-word span { color: #b48e00; }
.brand-divider { width: 1px; height: 22px; margin-left: 3px; background: #ccd0c7; }
.brand-product { color: var(--muted); font-size: 14px; font-weight: 650; }
.primary-nav { align-self: stretch; display: flex; align-items: center; gap: 5px; }
.primary-nav button { height: 42px; padding: 0 14px; border: 0; border-radius: 11px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 720; }
.primary-nav button:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.primary-nav button.active { color: var(--ink); background: #fff; box-shadow: 0 5px 18px rgba(28,33,24,.07); }
.primary-nav svg { width: 16px; height: 16px; }
.header-meta { display: flex; align-items: center; gap: 18px; }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.connection > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(53, 169, 109, .12); }
.theme-toggle { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: #62685e; background: var(--surface); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; }
.theme-toggle:hover { color: var(--ink); border-color: #c4c8bd; transform: translateY(-1px); }
.theme-toggle svg { grid-area: 1 / 1; width: 17px; height: 17px; transition: opacity .18s ease, transform .18s ease; }
.theme-toggle .theme-sun { opacity: 0; transform: rotate(-25deg) scale(.7); }
.theme-toggle .theme-moon { opacity: 1; transform: rotate(0) scale(1); }
.terminal-countdown { min-height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border: 1px solid #e6dfbd; border-radius: 10px; color: #74601a; background: #fffaf0; font-size: 10px; font-weight: 700; white-space: nowrap; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.terminal-countdown svg { width: 14px; height: 14px; }
.terminal-countdown strong { min-width: 25px; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.terminal-countdown.is-urgent { border-color: #efc4be; color: #9e3f35; background: #fff1ef; }
.terminal-countdown.is-urgent strong { color: #9e3f35; }
.lock-button { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 9px 13px; display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 700; }
.lock-button:hover { border-color: #c4c8bd; }
.lock-button svg { width: 15px; height: 15px; }

main { min-height: calc(100vh - 146px); }
.login-view { max-width: 1180px; margin: 0 auto; min-height: calc(100vh - 146px); padding: clamp(42px, 7vh, 90px) 24px 50px; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(54px, 8vw, 112px); align-items: center; }
.login-view[hidden] { display: none; }
.welcome-panel { padding-left: clamp(0px, 2.5vw, 36px); }
.eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 9px; color: #757a70; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow > span { width: 22px; height: 3px; border-radius: 2px; background: var(--accent-dark); }
.welcome-copy h1, .dashboard-topline h1 { margin: 0; font-size: clamp(44px, 5vw, 68px); line-height: 1.04; letter-spacing: -.06em; font-weight: 790; }
.welcome-copy h1 em { color: #ae8800; font-style: normal; }
.intro { max-width: 520px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.clock-block { display: flex; align-items: center; gap: 16px; margin-top: 54px; }
.clock-block > svg { box-sizing: content-box; width: 21px; height: 21px; padding: 11px; border-radius: 50%; color: #9a7800; background: #ffed9c; }
.clock-block div { display: flex; flex-direction: column; }
.live-clock { font-size: 34px; line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; font-weight: 760; }
.live-date { margin-top: 3px; color: var(--muted); font-size: 13px; }
.trust-note { width: fit-content; margin-top: 34px; padding: 13px 18px 13px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #e2e4dd; border-radius: 14px; background: rgba(255,255,255,.55); }
.trust-note > svg { width: 20px; color: var(--green); }
.trust-note div { display: flex; flex-direction: column; gap: 2px; }
.trust-note strong { font-size: 12px; }
.trust-note span { color: var(--muted); font-size: 10px; }

.pin-panel { position: relative; padding: 37px 42px 29px; background: var(--surface); border: 1px solid rgba(22, 25, 20, .08); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pin-panel::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; z-index: -1; border: 1px solid rgba(22,25,20,.06); border-radius: var(--radius-lg); }
.demo-note { position: absolute; top: 19px; right: 21px; padding: 6px 9px; border-radius: 8px; color: #6d5700; background: #fff7d2; font-size: 10px; }
.demo-note span { margin-right: 5px; padding: 2px 5px; border-radius: 4px; color: #fff; background: #8c6d00; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pin-heading { display: flex; align-items: center; gap: 14px; }
.pin-icon { width: 45px; height: 45px; border-radius: 14px; display: grid; place-items: center; color: #795f00; background: var(--accent); }
.pin-icon svg { width: 20px; }
.pin-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.pin-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.pin-slots { min-height: 57px; margin-top: 27px; display: flex; justify-content: center; gap: 10px; }
.pin-slot { width: 48px; height: 54px; display: grid; place-items: center; border: 1.5px solid #dfe2da; border-radius: 13px; background: #fafbf8; transition: .15s ease; }
.pin-slot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.pin-slot.filled { border-color: var(--ink); background: #fff; }
.pin-slot.filled::after { background: var(--ink); }
.pin-slot.next { border-color: #e4b900; box-shadow: 0 0 0 3px rgba(255,212,55,.18); }
.pin-slots.shake { animation: shake .32s ease; }
@keyframes shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
.form-message { height: 18px; margin: 6px 0 1px; color: var(--danger); text-align: center; font-size: 11px; font-weight: 650; }
.keypad { width: 252px; margin: 4px auto 23px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 14px; }
.keypad button, .keypad > span { height: 45px; }
.keypad button { border: 1px solid #eaebe6; border-radius: 12px; color: var(--ink); background: #f8f9f6; cursor: pointer; font-size: 17px; font-weight: 670; transition: transform .1s ease, background .1s ease, border-color .1s ease; }
.keypad button:hover { border-color: #d1d4cc; background: #fff; }
.keypad button:active { transform: scale(.95); background: #f0f1ec; }
.keypad .key-delete { border-color: transparent; background: transparent; color: #848980; }
.key-delete svg { width: 20px; }
.button { min-height: 50px; padding: 0 20px; border: 0; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-weight: 750; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button-dark { color: #fff; background: var(--ink); box-shadow: 0 9px 20px rgba(22, 25, 20, .14); }
.button-dark:hover:not(:disabled) { background: #292d27; }
.button-light { color: var(--ink); background: #f2f3ef; }
.button-accent { color: var(--ink); background: var(--accent); box-shadow: 0 10px 28px rgba(205, 164, 0, .22); }
.button-accent:hover:not(:disabled) { background: #ffda53; }
.pin-submit { width: 100%; justify-content: space-between; }
.pin-submit svg { width: 19px; }
.pin-help { margin: 17px 0 0; color: #959a91; text-align: center; font-size: 9.5px; }

.web-login-view { max-width: 1120px; min-height: calc(100vh - 146px); margin: 0 auto; padding: clamp(52px, 9vh, 110px) 24px 60px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr); align-items: center; gap: clamp(60px, 9vw, 124px); }
.web-login-view[hidden] { display: none; }
.web-login-copy h1 { margin: 0; font-size: clamp(44px, 5vw, 68px); line-height: 1.04; letter-spacing: -.06em; font-weight: 790; }
.web-login-copy h1 em { color: #ae8800; font-style: normal; }
.web-login-benefits { margin-top: 34px; display: grid; gap: 12px; }
.web-login-benefits > div { width: fit-content; display: flex; align-items: center; gap: 12px; }
.web-login-benefits > div > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #287b52; background: var(--green-soft); }
.web-login-benefits svg { width: 18px; height: 18px; }
.web-login-benefits p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.web-login-benefits strong { font-size: 12px; }
.web-login-benefits small { color: var(--muted); font-size: 10px; }
.web-auth-panel { position: relative; padding: 39px 42px 30px; border: 1px solid rgba(22,25,20,.08); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.web-auth-panel::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; z-index: -1; border: 1px solid rgba(22,25,20,.06); border-radius: var(--radius-lg); }
.web-auth-panel form { margin-top: 30px; }
.web-field { margin-top: 16px; display: grid; gap: 7px; }
.web-field > span { color: #5f645b; font-size: 10px; font-weight: 750; }
.web-field input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #dfe2da; border-radius: 12px; outline: none; color: var(--ink); background: #fafbf8; font: inherit; font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.web-field input:focus { border-color: #d2aa0d; background: #fff; box-shadow: 0 0 0 3px rgba(255,212,55,.2); }
.web-form-message { height: auto; min-height: 18px; margin: 10px 0 6px; text-align: left; line-height: 1.35; }
.web-login-submit { width: 100%; justify-content: space-between; }
.web-login-submit svg { width: 19px; }

.dashboard-view { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 62px; }
.dashboard-topline { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); align-items: flex-end; gap: 22px; margin-bottom: 34px; }
.dashboard-topline .eyebrow { margin-bottom: 11px; }
.dashboard-topline h1 { font-size: clamp(37px, 4.2vw, 55px); }
.dashboard-topline > div > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.dashboard-meta { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; gap: 8px; }
.employee-chip { min-width: 0; padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.65); display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #634f00; background: var(--accent); font-size: 12px; font-weight: 850; }
.employee-chip div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.employee-chip strong, .employee-chip div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-chip strong { font-size: 12px; }
.employee-chip div span { color: var(--muted); font-size: 10px; }
.top-sync-card { min-width: 0; padding: 10px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid #d9eee2; border-radius: 16px; background: #f3fbf6; }
.top-sync-card > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.top-sync-card strong { color: #287b52; font-size: 10px; }
.top-sync-card div span { overflow: hidden; color: #668373; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); gap: 22px; }
.timer-card, .day-card { border: 1px solid rgba(22,25,20,.08); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 16px 54px rgba(28,33,24,.065); }
.timer-card { min-height: 500px; padding: 27px 31px 31px; display: flex; flex-direction: column; transition: background .25s ease; }
.timer-card.is-paused { background: var(--pause-soft); }
.timer-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.status-pill { padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-radius: 100px; color: #60655c; background: #f1f2ee; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.status-pill > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #a8ada3; }
.status-pill.working { color: #267f53; background: var(--green-soft); }
.status-pill.working > span:first-child { background: var(--green); box-shadow: 0 0 0 4px rgba(53,169,109,.12); }
.status-pill.paused { color: #7c6200; background: #fff0ab; }
.status-pill.paused > span:first-child { background: #caa000; box-shadow: 0 0 0 4px rgba(202,160,0,.12); }
.mini-clock { text-align: right; display: flex; flex-direction: column; }
.mini-clock > span { font-size: 18px; line-height: 1; font-weight: 760; font-variant-numeric: tabular-nums; }
.mini-clock small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.timer-center { flex: 1; min-height: 250px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.timer-kicker { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.main-timer { margin: 10px 0 9px; font-size: clamp(54px, 7vw, 88px); line-height: 1; font-weight: 720; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.current-session { min-width: 250px; margin-top: 8px; padding: 10px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 18px; border: 1px solid rgba(22,25,20,.08); border-radius: 13px; background: rgba(250,251,248,.82); }
.current-session > span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.current-session > strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.timer-since { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.timer-card.is-paused .current-session { border-color: rgba(124,98,0,.15); background: rgba(255,255,255,.5); }
.action-area { display: grid; grid-template-columns: 1fr; gap: 11px; }
.action-area.two-actions { grid-template-columns: minmax(0, 1.35fr) minmax(180px, .65fr); }
.action-primary { min-height: 73px; justify-content: flex-start; padding: 0 18px; text-align: left; }
.action-primary > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.action-primary strong { font-size: 14px; }
.action-primary small { color: rgba(22,25,20,.58); font-size: 9px; font-weight: 620; }
.button-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.56); }
.button-icon svg { width: 19px; }
.action-arrow { width: 20px; margin-left: auto; }
.secondary-action { min-height: 73px; border: 1px solid var(--line); background: #fafbf8; box-shadow: none; }
.secondary-action svg { width: 18px; }
.secondary-action:hover:not(:disabled) { border-color: #ccd0c7; background: #fff; }
.timer-card.is-paused .secondary-action { background: rgba(255,255,255,.55); border-color: rgba(124,98,0,.18); }
.timer-card.is-paused .button-dark { background: #27271e; }

.day-card { padding: 26px; display: flex; flex-direction: column; }
.day-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.day-card-head .eyebrow { margin-bottom: 9px; }
.day-card-head h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.date-tile { width: 48px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 13px; background: #f9faf7; }
.date-tile strong { font-size: 19px; line-height: 1; }
.date-tile span { margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.status-list { margin-top: 34px; }
.day-timeline { max-height: 278px; padding: 2px 5px 2px 0; overflow-y: auto; scrollbar-color: #d5d8d0 transparent; }
.status-row { display: flex; align-items: center; gap: 13px; }
.status-row.is-active strong { color: #267f53; }
.status-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #287b52; background: var(--green-soft); }
.status-icon svg { width: 17px; }
.status-icon-break { color: #866900; background: #fff3ba; }
.status-icon-active { box-shadow: 0 0 0 4px rgba(53,169,109,.1); }
.status-icon-end { color: #666b63; background: #eff0ec; }
.status-row div { display: flex; flex-direction: column; gap: 3px; }
.status-row div span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.status-row strong { font-size: 12px; }
.status-line { height: 29px; margin-left: 19px; border-left: 1px dashed #d3d6ce; }
.day-timeline .status-line { height: 18px; }
.timeline-empty { margin: 20px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.overtime-card { margin-top: auto; padding: 13px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #e6dfbd; border-radius: 14px; background: #fffaf0; }
.overtime-card[hidden] { display: none; }
.overtime-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #725c00; background: #f7df73; }
.overtime-icon svg { width: 17px; }
.overtime-card > div { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 10px; }
.overtime-card > div > span { color: #746b45; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.overtime-card strong { color: #526116; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.overtime-card strong.negative { color: #a34835; }
.overtime-card strong.positive { color: #287b52; }
.overtime-card small { grid-column: 1 / -1; color: #77715d; font-size: 8.5px; line-height: 1.35; }
.sync-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.sync-icon svg { width: 16px; }
.day-tip { margin: 16px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.day-tip span { margin-right: 5px; padding: 3px 6px; border-radius: 5px; color: #7a6000; background: #fff2b5; font-size: 7.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

footer { height: 64px; padding: 0 clamp(24px, 5vw, 78px); display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(22,25,20,.07); color: #92978e; font-size: 9px; }
.footer-separator { width: 3px; height: 3px; border-radius: 50%; background: #b8bcb4; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; min-width: 310px; max-width: calc(100vw - 48px); padding: 15px 18px 15px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(22,25,20,.1); border-radius: 16px; background: #fff; box-shadow: 0 18px 60px rgba(22,25,20,.18); opacity: 0; pointer-events: none; transform: translateY(20px); transition: .25s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.toast svg { width: 18px; }
.toast div { display: flex; flex-direction: column; gap: 3px; }
.toast strong { font-size: 12px; }
.toast p { margin: 0; color: var(--muted); font-size: 9px; }
.confirm-dialog { width: min(420px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 30px 100px rgba(22,25,20,.28); }
.confirm-dialog::backdrop { background: rgba(22,25,20,.45); backdrop-filter: blur(4px); }
.confirm-dialog form { padding: 34px; text-align: center; }
.confirm-icon { width: 48px; height: 48px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 15px; color: #7a6000; background: var(--accent); }
.confirm-dialog h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.confirm-dialog p { margin: 9px 0 25px; color: var(--muted); font-size: 13px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Teamplanung und Urlaub */
.workspace-view { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 46px 0 62px; }
.workspace-heading { min-height: 88px; margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.workspace-heading .eyebrow { margin-bottom: 10px; }
.workspace-heading h1 { margin: 0; font-size: clamp(38px, 4vw, 55px); line-height: 1; letter-spacing: -.055em; }
.workspace-heading > div:first-child > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.workspace-actions { display: flex; align-items: center; gap: 13px; }
.period-controls { display: flex; align-items: stretch; gap: 7px; }
.icon-button, .period-label { border: 1px solid var(--line); background: rgba(255,255,255,.76); cursor: pointer; }
.icon-button { width: 43px; border-radius: 12px; display: grid; place-items: center; color: #777c73; }
.icon-button:hover, .period-label:hover { border-color: #c5c9c0; background: #fff; }
.icon-button svg { width: 17px; }
.icon-button .flip { transform: rotate(180deg); }
.period-label { min-width: 178px; min-height: 50px; padding: 7px 17px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.period-label strong { font-size: 11px; }
.period-label span { color: var(--muted); font-size: 8px; }
.request-vacation { min-height: 50px; padding: 0 17px; font-size: 11px; }
.request-vacation svg { width: 16px; }
.shift-legend { margin: 0 0 17px; display: flex; flex-wrap: wrap; gap: 8px; }
.legend-item { padding: 7px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--shift-color, var(--line)); border-radius: 100px; color: var(--shift-text, #656a62); background: var(--shift-bg, #fff); font-size: 8.5px; font-weight: 750; }
.legend-item i { width: 8px; height: 8px; border-radius: 3px; background: var(--shift-color); }
.legend-item.is-draggable { cursor: grab; user-select: none; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.legend-item.is-draggable::after { content: '⋮⋮'; margin-left: 2px; opacity: .42; letter-spacing: -3px; }
.legend-item.is-draggable:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(22,25,20,.1); }
.legend-item.is-draggable:active { cursor: grabbing; }
.legend-item.is-dragging { opacity: .48; transform: scale(.97); }
.shift-es { --shift-color: #ef4444; --shift-bg: #fee2e2; --shift-text: #991b1b; }
.shift-es-faq { --shift-color: #7f1d1d; --shift-bg: #7f1d1d; --shift-text: #fff; }
.shift-light { --shift-color: #eab308; --shift-bg: #fef3c7; --shift-text: #713f12; }
.shift-gg { --shift-color: #3b82f6; --shift-bg: #dbeafe; --shift-text: #1e3a8a; }
.shift-installation { --shift-color: #22c55e; --shift-bg: #dcfce7; --shift-text: #166534; }
.shift-management { --shift-color: #1e3a8a; --shift-bg: #1e3a8a; --shift-text: #fff; }
.shift-always { --shift-color: #64748b; --shift-bg: #e2e8f0; --shift-text: #334155; }
.shift-default { --shift-color: #9ca3af; --shift-bg: #f3f4f6; --shift-text: #374151; }
.planner-card, .vacation-card, .upcoming-card { position: relative; overflow: hidden; border: 1px solid rgba(22,25,20,.08); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 16px 54px rgba(28,33,24,.065); }
.planner-toolbar { height: 70px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.planner-toolbar > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.planner-toolbar strong { font-size: 12px; }
.planner-toolbar > div:first-child > span { color: var(--muted); font-size: 9px; }
.planner-toolbar > p { margin: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8.5px; }
.edit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-dark); }
.edit-dot.readonly { background: #a9ada5; }
.planner-scroll, .vacation-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #ced1c9 transparent; }
.mobile-scroll-note { display: none; }
.planner-grid { min-width: 1040px; display: grid; grid-template-columns: 210px repeat(7, minmax(116px, 1fr)); }
.planner-grid.has-monthly-summary { min-width: 1320px; grid-template-columns: 210px repeat(7, minmax(116px, 1fr)) 280px; }
.planner-cell { min-height: 72px; padding: 10px; border-right: 1px solid #eff0ec; border-bottom: 1px solid #eff0ec; display: flex; align-items: center; }
.planner-head { min-height: 57px; justify-content: center; color: var(--muted); background: #fafbf8; font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.planner-head strong { margin-left: 5px; color: var(--ink); font-size: 12px; }
.planner-head.today { color: #876900; background: #fff8da; }
.employee-cell { position: sticky; left: 0; z-index: 2; gap: 10px; background: #fff; }
.planner-head.employee-cell { z-index: 3; justify-content: flex-start; color: #9a9e96; background: #fafbf8; }
.mini-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #715800; background: #fff0a8; font-size: 9px; font-weight: 850; }
.employee-cell div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.employee-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.employee-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 8px; }
.monthly-summary-head { flex-direction: column; justify-content: center; gap: 3px; }
.monthly-summary-head span { font-size: 8px; }
.monthly-summary-head strong { margin: 0; font-size: 10px; text-transform: none; letter-spacing: 0; }
.monthly-summary-cell { align-content: center; flex-wrap: wrap; gap: 5px; background: #fcfcfa; }
.monthly-shift-count { max-width: 100%; padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--shift-color); border-radius: 7px; color: var(--shift-text); background: var(--shift-bg); font-size: 7px; font-weight: 720; line-height: 1.2; }
.monthly-shift-count b { flex: 0 0 auto; font-size: 8px; font-weight: 900; }
.monthly-summary-empty { color: var(--muted); font-size: 8px; font-style: italic; }
.assignment-cell { width: 100%; min-height: 48px; padding: 6px 8px 6px 11px; border: 1px solid var(--shift-color); border-radius: 11px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; color: var(--shift-text); background: var(--shift-bg); box-shadow: inset 4px 0 0 var(--shift-color); cursor: pointer; text-align: left; }
.assignment-cell:hover { filter: brightness(.97); transform: translateY(-1px); box-shadow: inset 5px 0 0 var(--shift-color), 0 4px 10px rgba(22,25,20,.08); }
.assignment-cell strong { font-size: 9px; line-height: 1.25; }
.assignment-cell span { color: inherit; opacity: .78; font-size: 7.5px; }
.assignment-cell.has-on-call { position: relative; padding-right: 43px; }
.assignment-cell .on-call-badge { position: absolute; top: 6px; right: 6px; padding: 3px 5px; border-radius: 5px; color: #fff; background: #475569; font-size: 6.5px; font-style: normal; font-weight: 850; letter-spacing: .04em; }
.assignment-cell.split-assignment { padding: 0; overflow: hidden; gap: 0; border-color: #d8dbd3; color: var(--ink); background: transparent; box-shadow: none; }
.assignment-cell.split-assignment:hover { box-shadow: 0 4px 10px rgba(22,25,20,.08); }
.assignment-cell.split-assignment.is-readonly, .assignment-cell.split-assignment.is-readonly:hover { box-shadow: none; }
.assignment-cell.split-assignment.has-on-call { padding-right: 0; }
.half-shift { width: 100%; min-height: 29px; padding: 5px 8px 5px 11px; display: flex; flex-direction: column; justify-content: center; color: var(--shift-text); background: var(--shift-bg); box-shadow: inset 4px 0 0 var(--shift-color); opacity: 1 !important; }
.half-shift + .half-shift { border-top: 1px solid rgba(22,25,20,.14); }
.split-assignment.has-on-call .half-shift { padding-right: 43px; }
.half-shift strong { color: inherit; }
.half-shift small { color: inherit; opacity: .72; font-size: 6.5px; font-weight: 700; }
.assignment-cell.empty { align-items: center; color: #9b9f97; background: transparent; border: 1px dashed #dfe1db; }
.assignment-cell.empty:hover { color: #6e736a; border-color: #bfc3b9; background: #fafbf8; }
.shift-drop-cell { transition: background-color .15s ease, box-shadow .15s ease; }
.planner-grid.is-dragging .shift-drop-cell { background: rgba(255,248,218,.45); }
.shift-drop-cell.drop-target { background: #fff8da; box-shadow: inset 0 0 0 3px rgba(234,179,8,.38); }
.shift-drop-cell.drop-target .assignment-cell { filter: brightness(.97); transform: scale(1.025); box-shadow: 0 8px 18px rgba(22,25,20,.14); }
.assignment-cell.is-readonly, .assignment-cell.is-readonly:hover { filter: none; transform: none; cursor: default; box-shadow: inset 4px 0 0 var(--shift-color); }
.assignment-cell.empty.is-readonly, .assignment-cell.empty.is-readonly:hover { color: #a1a59d; border-color: #e4e6e0; background: transparent; box-shadow: none; }
.loading-state { position: absolute; inset: 70px 0 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255,255,255,.93); }
.loading-state > span { width: 26px; height: 26px; border: 3px solid #e5e7df; border-top-color: var(--accent-dark); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-state p { margin: 0; color: var(--muted); font-size: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

.vacation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
.vacation-card { min-width: 0; }
.vacation-legend { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 8.5px; }
.vacation-legend span { display: flex; align-items: center; gap: 6px; }
.vacation-legend i { width: 8px; height: 8px; border-radius: 3px; }
.vacation-legend .approved { background: #64b986; }
.vacation-legend .requested { background: #e9bb26; }
.vacation-legend .declined { background: #dc2626; }
.vacation-legend .holiday { background: #1e3a8a; }
.vacation-grid { min-width: 1120px; display: grid; grid-template-columns: 190px repeat(var(--day-count), minmax(28px, 1fr)); }
.vacation-cell { position: relative; min-height: 56px; border-right: 1px solid #f0f1ed; border-bottom: 1px solid #eff0ec; display: grid; place-items: center; background: #fff; }
.vacation-day-head { min-height: 54px; color: var(--muted); background: #fafbf8; font-size: 8px; }
.vacation-day-head strong { display: block; color: var(--ink); font-size: 11px; }
.vacation-day-head.weekend, .vacation-cell.weekend { background: #f7f8f5; }
.vacation-day-head.today { color: #765c00; background: #fff5c5; }
.vacation-day-head.today strong { color: #765c00; }
.vacation-day-head.holiday { color: #40577f; background: #dce6f5; box-shadow: none; cursor: help; }
.vacation-day-head.holiday strong { color: #29466f; }
.vacation-cell.holiday:not(.vacation-day-head) { background: #edf2fa; box-shadow: none; cursor: help; }
.vacation-employee { position: sticky; left: 0; z-index: 2; padding: 8px 11px; display: flex; place-items: initial; align-items: center; gap: 9px; background: #fff; }
.vacation-employee > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vacation-employee > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.vacation-employee > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 8px; }
.vacation-day-head.vacation-employee { z-index: 3; color: #999e95; background: #fafbf8; font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.vacation-block { position: absolute; inset: 9px 2px; z-index: 1; border-radius: 5px; background: #dff2e7; border-block: 1px solid #bfe4ce; }
.vacation-block.approved { background: #dff2e7; border-color: #b4ddc4; }
.vacation-block.new, .vacation-block.verified { background: #fff1b7; border-color: #efd470; }
.vacation-block.declined { background: #fee2e2; border-color: #dc2626; }
.vacation-block.range-start { left: 5px; border-radius: 8px 0 0 8px; }
.vacation-block.range-end { right: 5px; border-radius: 0 8px 8px 0; }
.vacation-block.range-start.range-end { border-radius: 8px; }
.vacation-block[title] { cursor: help; }
.upcoming-card { padding: 24px; align-self: start; }
.upcoming-card .eyebrow { margin-bottom: 9px; }
.upcoming-card .eyebrow b { font: inherit; }
.upcoming-card h2 { margin: 0 0 23px; font-size: 19px; letter-spacing: -.035em; }
.upcoming-list { display: flex; flex-direction: column; }
.upcoming-item { padding: 13px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid #eff0ec; }
.upcoming-item:first-child { padding-top: 0; border-top: 0; }
.upcoming-item .mini-avatar { background: #e9f5ed; color: #2f7e52; }
.upcoming-item > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.upcoming-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.upcoming-item span { color: var(--muted); font-size: 8px; }
.upcoming-item em { width: fit-content; padding: 2px 5px; border-radius: 4px; color: #2d7950; background: #e7f5ec; font-size: 6.5px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.upcoming-item em.requested { color: #7d6200; background: #fff1b7; }
.upcoming-item .vacation-cause-label { color: #4e596a; font-weight: 720; }
.approval-item { align-items: flex-start; flex-wrap: wrap; }
.vacation-review-actions { width: 100%; padding-left: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.approve-vacation { margin-left: auto; padding: 7px 9px; border: 0; border-radius: 8px; color: #fff; background: #287b52; cursor: pointer; font: inherit; font-size: 7.5px; font-weight: 800; }
.approve-vacation:hover:not(:disabled) { background: #206743; }
.decline-vacation { padding: 7px 9px; border: 1px solid #e4b2ab; border-radius: 8px; color: #9f382e; background: #fff4f2; cursor: pointer; font: inherit; font-size: 7.5px; font-weight: 800; }
.decline-vacation:hover:not(:disabled) { background: #fde4e0; }
.approve-vacation, .decline-vacation { width: 100%; margin: 0; }
.approve-vacation:disabled, .decline-vacation:disabled { opacity: .55; cursor: wait; }
.empty-list { padding: 30px 0; color: var(--muted); text-align: center; font-size: 10px; }

.form-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 25px; background: #fff; box-shadow: 0 30px 100px rgba(22,25,20,.28); }
.form-dialog::backdrop { background: rgba(22,25,20,.45); backdrop-filter: blur(4px); }
.form-dialog form { padding: 28px; }
.dialog-header { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.form-dialog-icon { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; color: #765c00; background: var(--accent); }
.form-dialog-icon svg { width: 19px; }
.form-dialog-icon.vacation-icon { color: #26774e; background: #dff2e7; }
.form-dialog-icon.decline-icon { color: #9f382e; background: #fde4e0; }
.dialog-header > div { display: flex; flex-direction: column; gap: 2px; }
.dialog-header p { margin: 0; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dialog-header h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.dialog-header div > span { color: var(--muted); font-size: 9px; }
.dialog-close { width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 10px; color: #858a81; background: #f3f4f0; cursor: pointer; font-size: 21px; line-height: 1; }
.shift-options { margin: 0 0 20px; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.shift-options legend { width: 100%; margin-bottom: 9px; color: #6f746b; font-size: 9px; font-weight: 750; }
.shift-choice { position: relative; }
.shift-choice input { position: absolute; opacity: 0; pointer-events: none; }
.shift-choice span { min-height: 43px; padding: 8px 11px; border: 1px solid var(--shift-color); border-radius: 11px; display: flex; align-items: center; gap: 8px; color: var(--shift-text); background: var(--shift-bg); cursor: pointer; font-size: 9px; font-weight: 720; }
.shift-choice span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--shift-color); }
.shift-choice input:checked + span { border-width: 2px; box-shadow: 0 0 0 3px rgba(22,25,20,.12); transform: translateY(-1px); }
.on-call-choice { position: relative; margin: 2px 0 18px; display: block; }
.on-call-choice input { position: absolute; opacity: 0; pointer-events: none; }
.on-call-choice > span { min-height: 54px; padding: 10px 12px; border: 1px solid var(--shift-color); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; color: var(--shift-text); background: var(--shift-bg); cursor: pointer; }
.on-call-choice > span::before { content: ""; position: absolute; right: 13px; width: 16px; height: 16px; border: 1px solid #94a3b8; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 3px #fff; }
.on-call-choice strong { font-size: 10px; }
.on-call-choice small { padding-right: 30px; font-size: 8px; opacity: .76; }
.on-call-choice input:checked + span { border-width: 2px; box-shadow: 0 0 0 3px rgba(71,85,105,.13); }
.on-call-choice input:checked + span::before { border-color: #475569; background: #475569; }
.field { margin: 0 0 18px; display: flex; flex-direction: column; gap: 7px; }
.field > span { color: #676c63; font-size: 9px; font-weight: 750; }
.field small { color: #9a9f96; font-weight: 500; }
.second-shift-field > small { margin-top: -2px; font-size: 8px; line-height: 1.4; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fafbf8; padding: 11px 12px; font: inherit; font-size: 11px; }
.field input, .field select { height: 43px; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid rgba(228,185,0,.32); border-color: #d3b02a; background: #fff; }
.form-dialog-actions { margin-top: 24px; }
.form-dialog-actions .button { min-height: 47px; font-size: 10px; }
.button-danger { color: #fff; background: #a83e34; box-shadow: 0 8px 18px rgba(168,62,52,.18); }
.button-danger:hover:not(:disabled) { background: #91342c; }
.remove-assignment { color: var(--danger); }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.request-preview { min-height: 46px; margin-top: 3px; padding: 10px 12px; border-radius: 11px; display: flex; align-items: center; gap: 9px; color: #64766a; background: #f2f8f4; font-size: 9px; }
.request-preview svg { width: 16px; color: var(--green); }
.form-error { min-height: 15px; margin: 8px 0 -8px; color: var(--danger); font-size: 9px; font-weight: 650; }

/* Admin-Bereich */
.admin-heading { align-items: center; }
.admin-badge { min-width: 235px; padding: 12px 15px; border: 1px solid #d7dfed; border-radius: 15px; display: flex; align-items: center; gap: 11px; color: #18346b; background: #eef4ff; }
.admin-badge > svg { width: 20px; }
.admin-badge > div { display: flex; flex-direction: column; gap: 2px; }
.admin-badge strong { font-size: 10px; }
.admin-badge span { color: #60708d; font-size: 8px; }
.admin-card { position: relative; overflow: hidden; border: 1px solid rgba(22,25,20,.08); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 16px 54px rgba(28,33,24,.065); }
.admin-toolbar { min-height: 76px; padding: 14px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-toolbar > div { display: flex; flex-direction: column; gap: 4px; }
.admin-toolbar strong { font-size: 12px; }
.admin-toolbar div > span { color: var(--muted); font-size: 9px; }
.admin-search { width: min(280px, 42vw); height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 8px; background: #fafbf8; }
.admin-search:focus-within { border-color: #c2a325; box-shadow: 0 0 0 3px rgba(250,204,21,.14); background: #fff; }
.admin-search svg { width: 16px; color: #888d84; }
.admin-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.admin-table-head, .admin-row { display: grid; grid-template-columns: minmax(230px, 1.4fr) minmax(220px, .8fr) minmax(100px, .45fr) 105px; align-items: center; gap: 18px; }
.admin-table-head { min-height: 43px; padding: 0 22px; border-bottom: 1px solid #eceee8; color: #989d94; background: #fafbf8; font-size: 7.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.admin-row { min-height: 72px; padding: 10px 22px; border-bottom: 1px solid #eff0ec; }
.admin-row:last-child { border-bottom: 0; }
.admin-person { min-width: 0; display: flex; align-items: center; gap: 11px; }
.admin-person > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.admin-person strong, .admin-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-person strong { font-size: 10.5px; }
.admin-person div span { color: var(--muted); font-size: 8px; }
.pin-editor { height: 42px; padding: 0 5px 0 11px; border: 1px solid #dfe2da; border-radius: 11px; display: flex; align-items: center; background: #fafbf8; }
.pin-editor:focus-within { border-color: #c2a325; box-shadow: 0 0 0 3px rgba(250,204,21,.14); background: #fff; }
.pin-editor input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 750; letter-spacing: .13em; }
.pin-editor button { width: 33px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 8px; display: grid; place-items: center; color: #747a70; background: transparent; cursor: pointer; }
.pin-editor button:hover { color: var(--ink); background: #eeefe9; }
.pin-editor svg { width: 16px; }
.pin-status { width: fit-content; padding: 5px 8px; border-radius: 100px; color: #267b50; background: #e7f5ec; font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pin-status.missing { color: #8a6300; background: #fff2bb; }
.save-pin { min-height: 39px; padding: 0 14px; border-radius: 10px; font-size: 9px; box-shadow: none; }
.save-pin:disabled { opacity: .32; }
.admin-security-note { width: fit-content; max-width: 610px; margin: 16px 0 0 auto; padding: 12px 15px; border: 1px solid #e1e4dc; border-radius: 13px; display: flex; align-items: center; gap: 10px; color: #656a61; background: rgba(255,255,255,.64); }
.admin-security-note svg { width: 18px; color: #9a7800; }
.admin-security-note div { display: flex; flex-direction: column; gap: 2px; }
.admin-security-note strong { color: var(--ink); font-size: 9px; }
.admin-security-note span { font-size: 8px; }
.admin-empty { padding: 48px 20px; color: var(--muted); text-align: center; font-size: 10px; }

body.busy .action-area button, body.busy .lock-button, body.busy .keypad button, body.busy .web-auth-panel button { pointer-events: none; }
body.busy .action-area button { opacity: .55; }

@media (max-width: 850px) {
  .login-view { grid-template-columns: 1fr; max-width: 590px; gap: 42px; }
  .web-login-view { max-width: 590px; grid-template-columns: 1fr; gap: 42px; }
  .web-login-copy { text-align: center; }
  .web-login-copy .eyebrow { justify-content: center; }
  .web-login-benefits { width: fit-content; margin-right: auto; margin-left: auto; text-align: left; }
  .welcome-panel { padding: 0; text-align: center; }
  .welcome-copy .eyebrow, .clock-block, .trust-note { margin-left: auto; margin-right: auto; }
  .welcome-copy .eyebrow { justify-content: center; }
  .intro { margin-left: auto; margin-right: auto; }
  .clock-block { width: fit-content; text-align: left; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-topline { grid-template-columns: 1fr; }
  .dashboard-meta { width: min(100%, 520px); }
  .day-card { min-height: 360px; }
  .site-header { padding-inline: 24px; }
  .brand-divider, .brand-product { display: none; }
  .primary-nav button { padding: 0 10px; }
  .primary-nav button span { display: none; }
  .vacation-layout { grid-template-columns: 1fr; }
  .upcoming-card { width: 100%; }
  .upcoming-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
  .admin-table-head, .admin-row { grid-template-columns: minmax(190px, 1fr) minmax(190px, .75fr) 95px; }
  .admin-table-head span:nth-child(3), .admin-row .pin-status { display: none; }
}

@media (max-width: 600px) {
  html { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.is-authenticated { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .site-header { position: sticky; top: 0; z-index: 40; height: 64px; padding: 0 14px; backdrop-filter: none; }
  .connection { display: none; }
  .brand-word { display: inline; font-size: 18px; }
  .primary-nav {
    position: fixed;
    inset: auto 12px max(10px, env(safe-area-inset-bottom));
    z-index: 60;
    height: 64px;
    margin: 0;
    padding: 5px;
    align-items: stretch;
    gap: 3px;
    border: 1px solid rgba(22,25,20,.11);
    border-radius: 19px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 45px rgba(22,25,20,.2);
    backdrop-filter: blur(18px);
  }
  .primary-nav button { width: auto; min-width: 0; height: 52px; flex: 1; padding: 4px 2px; flex-direction: column; justify-content: center; gap: 3px; border-radius: 14px; font-size: 8px; line-height: 1; }
  .primary-nav button span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .primary-nav button svg { width: 18px; height: 18px; }
  .primary-nav button.active { color: #fff; background: var(--ink); box-shadow: 0 6px 15px rgba(22,25,20,.18); }
  .primary-nav button.active svg { color: var(--accent); }
  .header-meta { gap: 6px; }
  .terminal-countdown { min-height: 38px; padding: 0 9px; }
  .terminal-countdown > span { display: none; }
  .lock-button { min-width: 0; min-height: 38px; padding: 0 11px; justify-content: center; font-size: 9px; }
  main { min-height: calc(100dvh - 118px); }
  .login-view { min-height: auto; padding: 27px 14px 36px; gap: 22px; }
  .web-login-view { min-height: auto; padding: 27px 14px 36px; gap: 22px; }
  .web-login-copy .eyebrow { margin-bottom: 12px; }
  .web-login-copy h1 { font-size: clamp(32px, 10.5vw, 40px); }
  .web-login-benefits { width: 100%; margin-top: 22px; }
  .web-login-benefits > div { width: 100%; }
  .web-auth-panel { width: 100%; padding: 24px 18px 22px; border-radius: 23px; }
  .web-auth-panel::before { display: none; }
  .web-auth-panel form { margin-top: 24px; }
  .welcome-copy .eyebrow { margin-bottom: 12px; }
  .welcome-copy h1 { font-size: clamp(32px, 10.5vw, 40px); }
  .intro { margin-top: 14px; font-size: 13px; line-height: 1.55; }
  .clock-block { display: none; }
  .trust-note { display: none; }
  .pin-panel { width: 100%; padding: 24px 18px 22px; border-radius: 23px; }
  .pin-panel::before { display: none; }
  .pin-heading h2 { font-size: 22px; }
  .pin-heading p { font-size: 11px; }
  .demo-note { position: static; width: fit-content; margin: -8px 0 18px auto; }
  .pin-slots { min-height: 49px; margin-top: 22px; gap: 5px; }
  .pin-slot { width: clamp(25px, 8vw, 36px); height: 44px; border-radius: 10px; }
  .keypad { width: min(100%, 270px); margin-bottom: 18px; gap: 8px 12px; }
  .keypad button, .keypad > span { height: 50px; }
  .dashboard-view { width: calc(100% - 28px); padding: 30px 0 40px; }
  .dashboard-topline { align-items: flex-start; margin-bottom: 24px; }
  .dashboard-topline h1 { font-size: clamp(34px, 10vw, 38px); }
  .dashboard-topline > div > p:last-child { font-size: 12px; }
  .dashboard-meta { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .employee-chip, .top-sync-card { min-width: 0; min-height: 56px; padding: 8px 10px; }
  .employee-chip div, .top-sync-card > div { display: flex; }
  .avatar { width: 36px; height: 36px; flex: 0 0 auto; }
  .timer-card, .day-card { border-radius: 21px; }
  .timer-card { min-height: 450px; padding: 20px 16px 16px; }
  .timer-center { min-height: 225px; }
  .main-timer { font-size: clamp(48px, 16vw, 66px); }
  .current-session { width: 100%; min-width: 0; }
  .action-area.two-actions { grid-template-columns: 1fr; }
  .action-primary, .secondary-action { min-height: 66px; }
  .day-card { min-height: 0; padding: 20px; }
  .status-list { margin-top: 26px; }
  .day-timeline { max-height: none; }
  .overtime-card { margin-top: 28px; }
  footer { height: 54px; padding: 0 18px; }
  footer span:last-child, .footer-separator { display: none; }
  .workspace-view { width: calc(100% - 28px); padding: 30px 0 40px; }
  .workspace-heading { min-height: 0; align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 22px; }
  .workspace-heading h1 { font-size: clamp(31px, 10vw, 39px); overflow-wrap: anywhere; }
  .workspace-heading > div:first-child > p:last-child { font-size: 11px; line-height: 1.5; }
  .period-controls { justify-content: stretch; }
  .icon-button { width: 48px; min-height: 50px; flex: 0 0 48px; }
  .period-label { min-width: 0; flex: 1; }
  .workspace-actions { align-items: stretch; flex-direction: column; }
  .request-vacation { width: 100%; }
  .shift-legend { width: calc(100% + 28px); margin: 0 0 10px -14px; padding: 0 14px 7px; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
  .shift-legend::-webkit-scrollbar { display: none; }
  .legend-item { min-height: 34px; flex: 0 0 auto; scroll-snap-align: start; font-size: 9px; }
  .planner-card, .vacation-card, .upcoming-card, .admin-card { border-radius: 21px; }
  .planner-toolbar { height: auto; min-height: 66px; padding: 14px 16px; }
  .planner-toolbar > p { display: none; }
  .vacation-card .planner-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .vacation-legend { flex-flow: row wrap; align-items: center; gap: 6px 12px; }
  .mobile-scroll-note { margin: 0; padding: 9px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #eceee8; color: #777c73; background: #fafbf8; font-size: 8.5px; font-weight: 650; }
  .mobile-scroll-note span { color: #8a6a00; font-size: 14px; line-height: 1; }
  .planner-scroll, .vacation-scroll { touch-action: pan-x pan-y; scrollbar-width: thin; }
  .planner-grid { min-width: 810px; grid-template-columns: 145px repeat(7, minmax(95px, 1fr)); }
  .planner-grid.has-monthly-summary { min-width: 1030px; grid-template-columns: 145px repeat(7, minmax(95px, 1fr)) 220px; }
  .planner-cell { min-height: 67px; padding: 8px; }
  .employee-cell, .vacation-employee { box-shadow: 5px 0 12px rgba(22,25,20,.06); }
  .vacation-grid { min-width: 1140px; grid-template-columns: 145px repeat(var(--day-count), minmax(32px, 1fr)); }
  .upcoming-list { grid-template-columns: 1fr; }
  .upcoming-card { padding: 20px; }
  .confirm-dialog, .form-dialog { width: 100%; max-width: none; max-height: calc(100dvh - 10px); margin: auto 0 0; border-radius: 23px 23px 0 0; }
  .confirm-dialog form { padding: 28px 18px calc(22px + env(safe-area-inset-bottom)); }
  .form-dialog form { padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .dialog-header { align-items: flex-start; margin-bottom: 22px; }
  .dialog-header > div { min-width: 0; }
  .dialog-header h2, .dialog-header div > span { overflow-wrap: anywhere; }
  .dialog-close { flex: 0 0 auto; }
  .shift-options { grid-template-columns: 1fr; }
  .date-fields { grid-template-columns: 1fr; gap: 0; }
  .form-dialog-actions { grid-template-columns: 1fr; }
  .admin-heading { align-items: stretch; }
  .admin-badge { min-width: 0; }
  .admin-toolbar { padding: 16px; align-items: stretch; flex-direction: column; }
  .admin-search { width: 100%; }
  .admin-table-head { display: none; }
  .admin-row { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .admin-person, .pin-editor, .admin-row .save-pin { width: 100%; min-width: 0; grid-column: 1; }
  .admin-row .save-pin { min-height: 43px; }
  .admin-security-note { width: 100%; margin-top: 12px; }
  .toast { right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); left: 12px; min-width: 0; max-width: none; }
}

@media (max-width: 360px) {
  .brand-word { font-size: 16px; }
  .lock-button:not([hidden]) { width: 38px; padding: 0; font-size: 0; }
  .pin-panel { padding-inline: 14px; }
  .primary-nav { right: 8px; left: 8px; }
  .primary-nav button { font-size: 7.5px; }
  .current-session { padding-inline: 11px; }
  .current-session > strong { font-size: 15px; }
  .dialog-actions { gap: 7px; }
}

@media (hover: none) and (pointer: coarse) {
  .legend-item.is-draggable { cursor: default; }
  .legend-item.is-draggable::after { display: none; }
  .legend-item.is-draggable:hover, .assignment-cell:hover, .button:hover:not(:disabled) { transform: none; box-shadow: none; filter: none; }
  .assignment-cell:hover { box-shadow: inset 4px 0 0 var(--shift-color); }
}

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

/* Dark Mode */
html[data-theme='dark'] {
  --ink: #f1f4ec;
  --muted: #a5ada1;
  --line: #353c32;
  --paper: #10130f;
  --surface: #1a1f18;
  --accent: #e9bd32;
  --accent-dark: #d7aa22;
  --green: #55c889;
  --green-soft: #173425;
  --pause-soft: #302a16;
  --danger: #f08075;
  --shadow: 0 24px 72px rgba(0, 0, 0, .34);
  color-scheme: dark;
}
html[data-theme='dark'] body { background: radial-gradient(circle at 0 6%, rgba(233,189,50,.11) 0 1px, transparent 2px) 0 0 / 24px 24px, var(--paper); }
html[data-theme='dark'] .site-header { border-bottom-color: rgba(255,255,255,.08); background: rgba(16,19,15,.92); }
html[data-theme='dark'] .brand-word span { color: #efc33b; }
html[data-theme='dark'] .brand-divider { background: #41483e; }
html[data-theme='dark'] .primary-nav button:hover { background: rgba(255,255,255,.06); }
html[data-theme='dark'] .primary-nav button.active { color: var(--ink); background: rgba(255,255,255,.045); box-shadow: inset 0 -2px 0 rgba(233,189,50,.72); }
html[data-theme='dark'] .theme-toggle,
html[data-theme='dark'] .lock-button { color: #d8ddd3; border-color: var(--line); background: #20251e; }
html[data-theme='dark'] .theme-toggle:hover,
html[data-theme='dark'] .lock-button:hover { border-color: #566052; background: #272d24; }
html[data-theme='dark'] .theme-toggle .theme-moon { opacity: 0; transform: rotate(25deg) scale(.7); }
html[data-theme='dark'] .theme-toggle .theme-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme='dark'] .terminal-countdown { color: #e5c966; border-color: #504725; background: #292615; }
html[data-theme='dark'] .terminal-countdown strong { color: #fff3c0; }
html[data-theme='dark'] .terminal-countdown.is-urgent { color: #ff9e94; border-color: #6d3833; background: #321c1a; }
html[data-theme='dark'] .terminal-countdown.is-urgent strong { color: #ff9e94; }
html[data-theme='dark'] .eyebrow { color: #9fa79b; }
html[data-theme='dark'] .welcome-copy h1 em,
html[data-theme='dark'] .web-login-copy h1 em { color: #efc33b; }
html[data-theme='dark'] .clock-block > svg { color: #f0c53e; background: #393118; }
html[data-theme='dark'] .trust-note { border-color: var(--line); background: rgba(255,255,255,.035); }
html[data-theme='dark'] .pin-panel,
html[data-theme='dark'] .web-auth-panel,
html[data-theme='dark'] .timer-card,
html[data-theme='dark'] .day-card,
html[data-theme='dark'] .planner-card,
html[data-theme='dark'] .vacation-card,
html[data-theme='dark'] .upcoming-card,
html[data-theme='dark'] .admin-card { border-color: rgba(255,255,255,.075); }
html[data-theme='dark'] .pin-panel::before,
html[data-theme='dark'] .web-auth-panel::before { border-color: rgba(255,255,255,.06); }
html[data-theme='dark'] .demo-note { color: #f1d76f; background: #332d14; }
html[data-theme='dark'] .demo-note span { color: #18150b; background: #e5ba31; }
html[data-theme='dark'] .pin-icon,
html[data-theme='dark'] .avatar { color: #17140a; }
html[data-theme='dark'] .pin-slot,
html[data-theme='dark'] .keypad button,
html[data-theme='dark'] .web-field input { border-color: var(--line); background: #151914; }
html[data-theme='dark'] .pin-slot.filled,
html[data-theme='dark'] .keypad button:hover,
html[data-theme='dark'] .web-field input:focus { background: #222820; }
html[data-theme='dark'] .keypad button:hover { border-color: #50594c; }
html[data-theme='dark'] .keypad button:active { background: #2b3228; }
html[data-theme='dark'] .web-field > span { color: #c2c8be; }
html[data-theme='dark'] .button-dark { color: #17140a; background: var(--accent); box-shadow: 0 9px 24px rgba(0,0,0,.3); }
html[data-theme='dark'] .button-dark:hover:not(:disabled) { background: #f2cb4f; }
html[data-theme='dark'] .button-light { color: var(--ink); background: #292f27; }
html[data-theme='dark'] .button-accent { color: #17140a; }
html[data-theme='dark'] .button-accent:hover:not(:disabled) { background: #f2cb4f; }
html[data-theme='dark'] .timer-card.is-paused .button-dark { color: #17140a; background: var(--accent); }
html[data-theme='dark'] .timer-card.is-paused .button-dark:hover:not(:disabled) { background: #f2cb4f; }
html[data-theme='dark'] .employee-chip { background: rgba(255,255,255,.035); }
html[data-theme='dark'] .top-sync-card { border-color: #28513a; background: #162b20; }
html[data-theme='dark'] .top-sync-card strong { color: #72d49c; }
html[data-theme='dark'] .top-sync-card div span { color: #93b8a1; }
html[data-theme='dark'] .status-pill { color: #adb4a9; background: #292e27; }
html[data-theme='dark'] .status-pill.working { color: #70d39b; }
html[data-theme='dark'] .status-pill.paused { color: #edd16a; background: #383117; }
html[data-theme='dark'] .current-session { border-color: var(--line); background: rgba(8,10,8,.28); }
html[data-theme='dark'] .timer-card.is-paused .current-session,
html[data-theme='dark'] .timer-card.is-paused .secondary-action { border-color: #514723; background: rgba(8,10,8,.22); }
html[data-theme='dark'] .action-primary small { color: rgba(22,25,20,.68); }
html[data-theme='dark'] .button-icon { color: #17140a; background: rgba(255,255,255,.35); }
html[data-theme='dark'] .secondary-action,
html[data-theme='dark'] .date-tile { background: #151914; }
html[data-theme='dark'] .secondary-action:hover:not(:disabled) { border-color: #50594c; background: #222820; }
html[data-theme='dark'] .status-row.is-active strong { color: #6bd297; }
html[data-theme='dark'] .status-icon-break { color: #efd26b; background: #373017; }
html[data-theme='dark'] .status-icon-end { color: #b5bcb1; background: #292e27; }
html[data-theme='dark'] .status-line { border-left-color: #444c40; }
html[data-theme='dark'] .overtime-card { border-color: #504725; background: #292615; }
html[data-theme='dark'] .overtime-card > div > span,
html[data-theme='dark'] .overtime-card small { color: #c6b978; }
html[data-theme='dark'] .overtime-card strong { color: #c8db77; }
html[data-theme='dark'] .overtime-card strong.negative { color: #f28d82; }
html[data-theme='dark'] .overtime-card strong.positive { color: #6bd297; }
html[data-theme='dark'] .overtime-icon { color: #211b08; background: #d5ae35; }
html[data-theme='dark'] .day-tip span { color: #1e1807; background: #d9b63f; }
html[data-theme='dark'] footer { border-top-color: rgba(255,255,255,.07); color: #7f887b; }
html[data-theme='dark'] .toast,
html[data-theme='dark'] .confirm-dialog,
html[data-theme='dark'] .form-dialog { color: var(--ink); border-color: var(--line); background: #20251e; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
html[data-theme='dark'] .icon-button,
html[data-theme='dark'] .period-label { color: var(--muted); background: rgba(30,35,28,.92); }
html[data-theme='dark'] .icon-button:hover,
html[data-theme='dark'] .period-label:hover { border-color: #525b4e; background: #272d24; }
html[data-theme='dark'] .shift-es { --shift-color: #ff6b6f; --shift-bg: #55272b; --shift-text: #ffc2c4; }
html[data-theme='dark'] .shift-es-faq { --shift-color: #df3f73; --shift-bg: #2b0d19; --shift-text: #ff9fbe; }
html[data-theme='dark'] .shift-light { --shift-color: #e5b92c; --shift-bg: #403617; --shift-text: #f5da75; }
html[data-theme='dark'] .shift-gg { --shift-color: #62a0f5; --shift-bg: #1c3150; --shift-text: #b9d6ff; }
html[data-theme='dark'] .shift-installation { --shift-color: #49c878; --shift-bg: #193b27; --shift-text: #9de7b8; }
html[data-theme='dark'] .shift-management { --shift-color: #668dcc; --shift-bg: #1c2b45; --shift-text: #c5d9ff; }
html[data-theme='dark'] .shift-always { --shift-color: #91a0b5; --shift-bg: #2b333d; --shift-text: #d4deeb; }
html[data-theme='dark'] .shift-default { --shift-color: #8f9990; --shift-bg: #2b302a; --shift-text: #d2d8cf; }
html[data-theme='dark'] .planner-cell { border-color: #2c322a; }
html[data-theme='dark'] .planner-head,
html[data-theme='dark'] .planner-head.employee-cell,
html[data-theme='dark'] .employee-cell { background: #181c17; }
html[data-theme='dark'] .monthly-summary-cell { background: #1b2019; }
html[data-theme='dark'] .planner-head.today,
html[data-theme='dark'] .shift-drop-cell.drop-target { color: #edd06a; background: #332d16; }
html[data-theme='dark'] .mini-avatar { color: #231c06; background: #d9b73e; }
html[data-theme='dark'] .assignment-cell.empty { color: #899185; border-color: #444b40; }
html[data-theme='dark'] .assignment-cell.empty:hover { color: #c5cbc1; border-color: #626c5d; background: #222720; }
html[data-theme='dark'] .planner-grid.is-dragging .shift-drop-cell { background: rgba(89,76,27,.28); }
html[data-theme='dark'] .loading-state { background: rgba(26,31,24,.94); }
html[data-theme='dark'] .loading-state > span { border-color: #3a4237; border-top-color: var(--accent); }
html[data-theme='dark'] .vacation-cell,
html[data-theme='dark'] .vacation-employee { border-color: #2c322a; background: #1a1f18; }
html[data-theme='dark'] .vacation-day-head,
html[data-theme='dark'] .vacation-day-head.vacation-employee { background: #181c17; }
html[data-theme='dark'] .vacation-day-head.weekend,
html[data-theme='dark'] .vacation-cell.weekend { background: #151914; }
html[data-theme='dark'] .vacation-day-head.today { color: #efd36c; background: #342e17; }
html[data-theme='dark'] .vacation-day-head.today strong { color: #efd36c; }
html[data-theme='dark'] .vacation-day-head.holiday { color: #a9c3ed; background: #202e43; }
html[data-theme='dark'] .vacation-day-head.holiday strong { color: #c5d8f7; }
html[data-theme='dark'] .vacation-cell.holiday:not(.vacation-day-head) { background: #172235; }
html[data-theme='dark'] .vacation-block.approved { background: #214333; border-color: #347052; }
html[data-theme='dark'] .vacation-block.new,
html[data-theme='dark'] .vacation-block.verified { background: #4a3d17; border-color: #8a7026; }
html[data-theme='dark'] .vacation-block.declined { background: #4a2222; border-color: #a83f3f; }
html[data-theme='dark'] .upcoming-item { border-top-color: #30362e; }
html[data-theme='dark'] .upcoming-item .mini-avatar { color: #82d7a6; background: #183325; }
html[data-theme='dark'] .upcoming-item em { color: #83d5a6; background: #183225; }
html[data-theme='dark'] .upcoming-item em.requested { color: #efd36c; background: #3d3417; }
html[data-theme='dark'] .upcoming-item .vacation-cause-label { color: #bac5d5; }
html[data-theme='dark'] .decline-vacation { color: #ffaaa0; border-color: #72433e; background: #351f1d; }
html[data-theme='dark'] .decline-vacation:hover:not(:disabled) { background: #482724; }
html[data-theme='dark'] .form-dialog-icon.vacation-icon { color: #79d19d; background: #183426; }
html[data-theme='dark'] .form-dialog-icon.decline-icon { color: #ffa49a; background: #3b211e; }
html[data-theme='dark'] .dialog-close { color: #b4bbb0; background: #2a3028; }
html[data-theme='dark'] .shift-options legend,
html[data-theme='dark'] .field > span { color: #c0c6bc; }
html[data-theme='dark'] .on-call-choice > span::before { border-color: #727d70; background: #181c17; box-shadow: inset 0 0 0 3px #181c17; }
html[data-theme='dark'] .field input,
html[data-theme='dark'] .field select,
html[data-theme='dark'] .field textarea,
html[data-theme='dark'] .admin-search,
html[data-theme='dark'] .pin-editor { background: #151914; }
html[data-theme='dark'] .field input:focus,
html[data-theme='dark'] .field select:focus,
html[data-theme='dark'] .field textarea:focus,
html[data-theme='dark'] .admin-search:focus-within,
html[data-theme='dark'] .pin-editor:focus-within { background: #20251e; }
html[data-theme='dark'] .request-preview { color: #a8c5b2; background: #182820; }
html[data-theme='dark'] .admin-badge { color: #b9d1ff; border-color: #354a70; background: #1b2941; }
html[data-theme='dark'] .admin-badge span { color: #93a7c9; }
html[data-theme='dark'] .admin-table-head { color: #929b8e; border-color: #30362e; background: #181c17; }
html[data-theme='dark'] .admin-row { border-color: #30362e; }
html[data-theme='dark'] .pin-editor button:hover { background: #2a3028; }
html[data-theme='dark'] .pin-status { color: #82d7a6; background: #183325; }
html[data-theme='dark'] .pin-status.missing { color: #efd36c; background: #3d3417; }
html[data-theme='dark'] .admin-security-note { color: #abb3a7; border-color: var(--line); background: rgba(255,255,255,.035); }
@media (max-width: 600px) {
  html[data-theme='dark'] .primary-nav { border-color: rgba(255,255,255,.11); background: rgba(26,31,24,.95); box-shadow: 0 16px 45px rgba(0,0,0,.38); }
  html[data-theme='dark'] .primary-nav button.active { color: #17140a; background: var(--accent); }
  html[data-theme='dark'] .primary-nav button.active svg { color: #17140a; }
}