:root {
  --ink: #17212b;
  --muted: #66727e;
  --line: #dce2e7;
  --surface: #ffffff;
  --canvas: #f3f5f7;
  --teal: #167c72;
  --teal-dark: #0d5e56;
  --coral: #d95c48;
  --amber: #b7791f;
  --green-soft: #e5f3ef;
  --coral-soft: #fbeae6;
  --amber-soft: #fff4d9;
  --sidebar-width: 210px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #e8eeee; }
.login-panel { width: min(100%, 420px); background: var(--surface); border: 1px solid var(--line); padding: 38px; box-shadow: 0 18px 60px rgb(23 33 43 / 12%); }
.login-panel h1 { margin: 34px 0 6px; font-size: 28px; letter-spacing: 0; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 750; font-size: 18px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--teal); color: white; border-radius: 6px; font-weight: 800; }
.brand-mark.has-company-logo { overflow: hidden; background: white; }
.brand-mark.logo-circle { border-radius: 50%; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.sidebar-user > span:nth-child(2) { cursor: pointer; }
.brand-login { font-size: 22px; }
.brand-login .brand-mark { width: 42px; height: 42px; }
.stack-form { display: grid; gap: 18px; margin-top: 28px; }
label { display: grid; gap: 7px; color: #46515c; font-size: 13px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #bdc7cf; border-radius: 4px; background: white; color: var(--ink); padding: 10px 11px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(22 124 114 / 12%); }
button.primary, button.secondary { min-height: 40px; border-radius: 4px; padding: 0 16px; font-weight: 700; border: 1px solid transparent; }
button.primary { background: var(--teal); color: white; }
button.primary:hover { background: var(--teal-dark); }
button.secondary { background: white; border-color: #bcc6cd; color: var(--ink); }
button.danger { min-height: 40px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--coral); color: white; font-weight: 700; }
button.danger:hover { background: #bd4938; }
.full { width: 100%; }
.compact { min-height: 34px !important; padding: 0 11px !important; justify-self: start; }
.form-error { margin: 0; color: #b42318; font-size: 13px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.app-shell.sidebar-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 14px 10px 11px; overflow: hidden; background: var(--ink); color: white; display: flex; flex-direction: column; transition: transform 160ms ease, visibility 160ms ease; }
.sidebar-hidden .sidebar { transform: translateX(-100%); visibility: hidden; }
.sidebar > .brand { flex: 0 0 auto; }
.sidebar nav { min-height: 0; flex: 1 1 auto; display: grid; align-content: start; gap: 1px; margin-top: 12px; padding-right: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #526371 transparent; }
.sidebar nav::-webkit-scrollbar { width: 5px; }
.sidebar nav::-webkit-scrollbar-thumb { border-radius: 5px; background: #526371; }
.nav-group { margin: 0; }
.nav-group > summary { position: relative; margin: 7px 7px 2px; padding: 3px 18px 3px 2px; display: flex; align-items: center; justify-content: space-between; color: #8e9da8; font-size: 9px; font-weight: 800; text-transform: uppercase; list-style: none; cursor: pointer; user-select: none; }
.nav-group:first-child > summary { margin-top: 0; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-chevron { position: absolute; right: 1px; width: 15px; height: 15px; fill: currentColor; transform: rotate(0); transition: transform 140ms ease; }
.nav-group:not([open]) .nav-group-chevron { transform: rotate(-90deg); }
.nav-group > summary:hover { color: white; }
.nav-group-items { display: grid; gap: 1px; }
.nav-item { position: relative; width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 4px; padding: 4px 8px; background: transparent; color: #bfc8d0; text-align: left; text-decoration: none; font-size: 12px; font-weight: 600; }
.nav-badge { min-width: 19px; height: 19px; margin-left: auto; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: #c9413b; color: white; font-size: 10px; font-weight: 850; }
.nav-item:hover { background: #243341; color: white; }
.nav-item.active { background: var(--teal); color: white; }
.nav-symbol { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; }
.nav-symbol svg { width: 17px; height: 17px; fill: currentColor; }
.sidebar-user { flex: 0 0 auto; margin-top: 6px; border-top: 1px solid #344250; padding-top: 8px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 7px; }
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { font-size: 12px; }
.sidebar-user small { color: #9eabb5; margin-top: 2px; }
.sidebar-user .avatar { width: 28px; height: 28px; }
.sidebar-action-icon svg { width: 17px; height: 17px; fill: currentColor; }
.sidebar-close, .sidebar-backdrop, .mobile-quick-nav { display: none; }
.sidebar-resizer { position: absolute; z-index: 3; top: 0; right: 0; width: 8px; height: 100%; cursor: ew-resize; touch-action: none; }
.sidebar-resizer::after { content: ""; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: transparent; transition: background 120ms ease; }
.sidebar-resizer:hover::after, .sidebar-resizer:focus::after, .sidebar-resizing .sidebar-resizer::after { background: var(--teal); }
.sidebar-resizer:focus { outline: none; }
.sidebar-resizing { cursor: ew-resize; user-select: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #edf4f3; color: var(--teal-dark); font-weight: 800; font-size: 12px; }
.avatar-photo { overflow: hidden; padding: 0; }
.avatar-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: inherit; font-size: 20px; display: grid; place-items: center; }
.icon-button svg, .event-action svg { width: 18px; height: 18px; display: block; fill: currentColor; }
button.primary > svg, button.secondary > svg, .back-link > svg { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; }
.back-link { display: inline-flex; align-items: center; gap: 3px; }
.icon-button:hover { background: rgb(255 255 255 / 10%); }
.sidebar .sidebar-close { display: none; }

.workspace { min-width: 0; padding: 0 34px 52px; }
.topbar { min-height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.topbar-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.sidebar-toggle { flex: 0 0 auto; color: var(--ink); font-size: 18px; }
.topbar h1 { font-size: 24px; margin: 0 0 4px; }
.topbar p { margin: 0; font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.support-session-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-14px 0 18px; padding:11px 14px; border:1px solid #d79b32; background:#fff4d8; color:#5f430c; }
.support-session-banner[hidden] { display:none; }
.support-session-banner div { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.support-session-banner span { font-size:13px; }
.notification-center { position: relative; }
.notification-button { position: relative; }
.notification-button svg { width: 19px; height: 19px; fill: currentColor; }
.notification-count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border: 2px solid var(--surface); border-radius: 9px; background: #c73e3e; color: white; font-size: 10px; font-weight: 800; }
.notification-panel { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: min(390px, calc(100vw - 32px)); max-height: 480px; overflow: auto; border: 1px solid var(--line); background: white; box-shadow: 0 14px 36px rgba(23,33,43,.18); }
.notification-panel > header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: white; }
.notification-item { width: 100%; display: grid; grid-template-columns: 8px minmax(0,1fr); gap: 10px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.notification-item:hover { background: #f4f7f8; }
.notification-item > span { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: transparent; }
.notification-item.unread > span { background: var(--teal); }
.notification-item strong, .notification-item time { display: block; }
.notification-item p { margin: 3px 0; color: var(--muted); }
.notification-item time { color: var(--muted); font-size: 11px; }
.live-clock { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 700; }
.view { display: none; }
.active-view { display: block; }

.attendance-banner { min-height: 112px; padding: 20px 24px; background: var(--surface); border-left: 5px solid var(--teal); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.attendance-copy h2 { margin: 0 0 5px; font-size: 18px; }
.attendance-copy p { margin: 0; }
.attendance-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.attendance-actions button { min-width: 120px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.metric { min-height: 104px; border: 1px solid var(--line); background: var(--surface); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-button { width: 100%; color: var(--ink); text-align: left; cursor: pointer; }
.metric-button:hover, .metric-button:focus-visible { background: #f5faf9; border-color: #9bbcb6; }
.metric span { font-size: 13px; color: var(--muted); }
.metric strong { font-size: 30px; }
.metric-present { border-top: 3px solid var(--teal); }
.metric-absent { border-top: 3px solid var(--coral); }
.metric-pending { border-top: 3px solid var(--amber); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 18px; }
.panel-section { background: var(--surface); border: 1px solid var(--line); padding: 20px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 17px; }
.section-heading p { margin: 5px 0 0; font-size: 13px; }
.page-actions { margin-bottom: 20px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.page-heading > div > h2:first-child { display: none; }
.page-heading h2 { margin: 0 0 4px; font-size: 21px; }
.page-heading p { margin: 0; font-size: 13px; }
.activity-list { display: grid; }
.activity-row { min-height: 52px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid #edf0f2; }
.activity-row:first-child { border-top: 0; }
.activity-row p { margin: 0; font-size: 13px; }
.activity-row time { color: var(--muted); font-size: 12px; }
.empty-state { padding: 32px 12px; color: var(--muted); text-align: center; }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.calendar span { min-height: 35px; display: grid; place-items: center; font-size: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar .weekday { min-height: 28px; background: #f6f8f9; color: var(--muted); font-weight: 700; }
.calendar > :nth-child(7n + 6), .calendar > :nth-child(7n) { background: #f1f4f5; }
.calendar .outside { color: #b7c0c7; }
.calendar .today { background: var(--teal); color: white; font-weight: 800; }

.attendance-main { min-height: 220px; margin-bottom: 18px; background: var(--ink); color: white; padding: 32px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
.attendance-main h2 { margin: 0 0 8px; font-size: 22px; }
.attendance-main .worked { display: block; font-size: 42px; font-variant-numeric: tabular-nums; font-weight: 750; margin-top: 18px; }
.timeline { position: relative; display: grid; gap: 0; }
.timeline-row { display: grid; grid-template-columns: 70px 18px minmax(0, 1fr); gap: 12px; min-height: 56px; align-items: start; }
.timeline-row time { color: var(--muted); font-size: 13px; padding-top: 3px; }
.timeline-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--green-soft); }
.timeline-row p { margin: 0; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.team-person { width: 100%; min-height: 70px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-left-width: 4px; color: var(--ink); text-align: left; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.team-person:hover, .team-person:focus-visible { transform: translateY(-1px); filter: brightness(.985); }
.team-person strong, .team-person small { display: block; }
.team-person small { margin-top: 3px; color: var(--muted); }
.team-person.status-not_started, .team-person.status-finished { border-color: #d88e86; background: #fff3f1; }
.team-person.status-working { border-color: #4aa47d; background: #edf8f2; }
.team-person.status-break { border-color: #d6a13b; background: #fff8e7; }
.team-person.status-vacation { border-color: #4d91bd; background: #edf6fc; }
.team-person.status-absence { border-color: #94674c; background: #f7efe9; }
.team-status { width: 10px; height: 10px; border-radius: 50%; background: #aeb8be; }
.team-status.working { background: #198754; }
.team-status.break { background: var(--amber); }
.team-status.vacation { background: #3b82a0; }
.team-status.absence { background: var(--coral); }
.team-status.not_started, .team-status.finished { background: #c74338; }
.team-state-icon { width: 26px; height: 26px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.team-state-icon.vacation { color: #2476a3; }
.team-state-icon.absence { color: #815037; font-size: 24px; font-weight: 800; }

.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.calendar-main { padding: 0; overflow: hidden; }
.calendar-toolbar { min-height: 62px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.calendar-toolbar h3 { min-width: 190px; margin: 0; font-size: 17px; text-transform: capitalize; }
.calendar-toolbar .secondary { margin-left: auto; }
.icon-button.light { color: var(--ink); background: #f3f6f6; }
.icon-button.light:hover { background: #e5ebec; }
.full-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekday { min-height: 34px; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f6f8f8; color: var(--muted); font-size: 11px; font-weight: 800; }
.calendar-day { position: relative; min-height: 106px; min-width: 0; padding: 8px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; overflow: hidden; }
.calendar-day:hover { background: #f8fbfa; }
.calendar-day.outside { background: #fafbfb; color: #aab4ba; }
.calendar-day.today .day-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: white; }
.day-number { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 750; }
.calendar-event { display: block; margin-top: 3px; padding: 3px 5px; border-left: 3px solid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.calendar-event.vacation { border-color: #31809a; background: #e5f3f7; color: #245e70; }
.calendar-event.absence { border-color: var(--coral); background: var(--coral-soft); color: #943b2e; }
.calendar-event.pending { border-color: var(--amber); background: var(--amber-soft); color: #79540f; }
.calendar-event.holiday { border-color: #6f8e14; background: #eef4d8; color: #536c0b; }
.calendar-aside { display: grid; gap: 14px; }
.balance-panel, .legend-panel { padding: 19px; border: 1px solid var(--line); background: white; }
.section-kicker { display: block; color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.balance-panel > strong { display: block; margin-top: 8px; font-size: 42px; line-height: 1; }
.balance-panel > small { color: var(--muted); }
.balance-panel dl { margin: 20px 0 0; }
.balance-panel dl div { min-height: 34px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #edf0f1; }
.balance-panel dt { color: var(--muted); font-size: 12px; }
.balance-panel dd { margin: 0; font-weight: 750; }
.legend-panel h3 { margin: 0 0 13px; font-size: 14px; }
.legend-panel span { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; background: #aaa; }
.legend-dot.vacation { background: #31809a; }.legend-dot.absence { background: var(--coral); }.legend-dot.pending { background: var(--amber); }.legend-dot.holiday { background: #6f8e14; }

.timeline-panel { margin-bottom: 18px; }
.attendance-bar { position: relative; height: 92px; margin-top: 8px; padding-top: 30px; }
.bar-track { position: relative; height: 24px; border-radius: 4px; background: #e8ecee; overflow: hidden; }
.bar-segment { position: absolute; top: 0; height: 100%; min-width: 2px; }
.bar-segment.work, .bar-segment.break { background: var(--segment-color, var(--teal)); }
.bar-segment.is-open::after, .month-bar-segment.is-open::after, .daily-track i.is-open::after { content: ""; position: absolute; z-index: 2; top: -2px; right: -2px; bottom: -2px; border-right: 2px dotted #075f59; }
.bar-segment, .month-bar-segment { cursor: help; }
.segment-tooltip { position: absolute; z-index: 8; left: 50%; bottom: calc(100% + 8px); min-width: max-content; max-width: 260px; transform: translateX(-50%); display: none; padding: 7px 9px; border-radius: 3px; background: #17212b; color: white; font-size: 11px; line-height: 1.3; box-shadow: 0 5px 16px rgb(0 0 0 / 20%); }
.bar-segment:hover .segment-tooltip, .bar-segment:focus .segment-tooltip, .month-bar-segment:hover .segment-tooltip, .month-bar-segment:focus .segment-tooltip { display: block; }
.bar-tick { position: absolute; top: 0; transform: translateX(-50%); color: var(--muted); font-size: 10px; }
.bar-tick::after { content: ""; position: absolute; top: 17px; left: 50%; width: 1px; height: 36px; background: rgb(102 114 126 / 25%); }
.day-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.day-summary div { padding: 15px 12px 0; border-right: 1px solid var(--line); }
.day-summary div:last-child { border: 0; }
.day-summary span, .day-summary strong { display: block; }
.day-summary span { color: var(--muted); font-size: 11px; }
.day-summary strong { margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; }
.day-summary strong.negative { color: var(--coral); }
.immutable-label { padding: 5px 8px; border: 1px solid #bad8d3; border-radius: 4px; background: var(--green-soft); color: var(--teal-dark); font-size: 11px; font-weight: 750; }

.month-attendance { margin-bottom: 18px; padding: 0; }
.month-attendance .section-heading { min-height: 68px; margin: 0; padding: 0 18px; border-bottom: 1px solid var(--line); }
.month-switcher, .leave-year-switcher { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.month-switcher strong { min-width: 126px; text-align: center; font-size: 13px; }
.attendance-month-toolbar { display: flex; align-items: center; gap: 12px; }
.attendance-period-control { height: 34px; display: grid; grid-template-columns: 34px minmax(150px, auto) 34px; align-items: center; overflow: hidden; border: 1px solid #c7d0d6; border-radius: 4px; background: #f8fafa; }
.attendance-period-control .icon-button { width: 34px; height: 32px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 17px; }
.attendance-period-control .icon-button:first-child { border-right: 1px solid #d7dee2; }
.attendance-period-control .icon-button:last-child { border-left: 1px solid #d7dee2; }
.attendance-period-control .icon-button:hover { background: #eaf0f1; }
.attendance-period-control strong { padding: 0 12px; text-align: center; text-transform: capitalize; font-size: 13px; white-space: nowrap; }
.attendance-export-actions { min-height: 34px; display: flex; align-items: center; gap: 5px; padding-left: 12px; border-left: 1px solid var(--line); }
.attendance-export-actions > span { margin-right: 2px; color: var(--muted); font-size: 11px; font-weight: 650; }
.attendance-export-actions a { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #c7d0d6; border-radius: 4px; background: white; color: var(--ink); padding: 0 10px; text-decoration: none; font-size: 12px; font-weight: 750; }
.attendance-export-actions a:hover { border-color: #94a5ae; background: #f5f8f8; }
.attendance-export-actions svg { width: 15px; height: 15px; fill: var(--teal); }
.month-day-list { display: grid; }
.month-day { border-bottom: 1px solid var(--line); }
.month-day:last-child { border-bottom: 0; }
.month-day summary { min-height: 64px; display: grid; grid-template-columns: 88px minmax(300px, 1fr) 82px 82px 90px 24px; align-items: center; gap: 12px; padding: 0 16px; cursor: pointer; list-style: none; }
.month-day summary::-webkit-details-marker { display: none; }
.month-day summary:hover { background: #f8faf9; }
.month-day.is-non-working > summary { background: #eef1f2; }
.month-day.is-non-working > summary:hover { background: #e7ebed; }
.month-day.is-non-working .month-track { border-color: #cfd6d9; background: repeating-linear-gradient(90deg, #e3e7e9 0, #e3e7e9 calc(25% - 1px), #cbd2d6 calc(25% - 1px), #cbd2d6 25%); }
.month-day.is-non-working .month-day-events { background: #f1f3f4; }
.month-date { display: flex; align-items: baseline; gap: 8px; }
.month-date b { min-width: 24px; font-size: 20px; }
.month-date span { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.month-hours small, .month-hours strong { display: block; }
.month-hours small { color: var(--muted); font-size: 10px; }
.month-hours strong { margin-top: 3px; font-size: 13px; font-variant-numeric: tabular-nums; }
.month-hours strong.negative { color: var(--coral); }
.month-status { color: var(--muted); font-size: 11px; text-align: right; }
.month-timeline { position: relative; height: 42px; color: var(--muted); font-size: 9px; }
.month-timeline > i { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); }
.month-timeline > i.scale-start { transform: none; }
.month-timeline > i.scale-end { right: 0; left: auto !important; transform: none; }
.month-track { position: absolute; inset: 19px 0 auto; height: 13px; border: 1px solid #dce2e5; background: repeating-linear-gradient(90deg, #f0f3f4 0, #f0f3f4 calc(25% - 1px), #d7dde0 calc(25% - 1px), #d7dde0 25%); }
.month-bar-segment { position: absolute; top: -1px; height: 13px; min-width: 3px; background: var(--segment-color); }
.has-incident .month-status { color: var(--coral); font-weight: 750; }
.disclosure { color: var(--muted); font-size: 18px; transition: transform 150ms ease; }
.disclosure svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.month-day[open] .disclosure { transform: rotate(180deg); }
.month-day.incident-focus { position: relative; z-index: 1; outline: 2px solid var(--teal); outline-offset: -2px; background: #f1faf8; }
.month-day-events { display: grid; padding: 0 18px 0 104px; background: #f7f9f9; }
.attendance-event-row { min-height: 56px; display: grid; grid-template-columns: 10px 112px minmax(180px, 1fr) auto auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.attendance-event-row:first-child { border-top: 0; }
.event-light { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: #8a979f; }
.event-light-clock_in, .event-light-break_end { background: #3fac83; }
.event-light-break_start { background: #d99a27; }
.event-light-clock_out { background: #ef4e5b; }
.event-light-automatic { background: #ef4e5b; box-shadow: 0 0 0 3px #fde8ea; }
.attendance-event-row.automatic-incident { background: #fff8f8; }
.attendance-event-row.automatic-incident { grid-template-columns: 10px 112px minmax(150px, 1fr) minmax(560px, auto); }
.attendance-event-time strong, .attendance-event-time time, .attendance-event-copy strong, .attendance-event-copy span, .attendance-event-copy small { display: block; }
.attendance-event-time strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.attendance-event-time time, .attendance-event-copy span, .attendance-event-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.attendance-event-copy small { color: #52616a; font-style: italic; }
.event-corrected { padding: 4px 6px; border-radius: 3px; background: var(--amber-soft); color: #79500f !important; font-size: 9px; font-weight: 800; }
.attendance-event-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.attendance-info-content { display: grid; gap: 8px; }
.audit-info-row { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); background: #f8faf9; }
.audit-info-row span { font-variant-numeric: tabular-nums; }
.audit-info-row small { color: var(--muted); line-height: 1.45; }
.event-action { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #5e98ed; color: white; font-size: 14px; font-weight: 800; }
.event-action:hover { filter: brightness(.92); }
.event-action.info { background: #5e98ed; }
.event-action.edit { background: #43b9a4; }
.event-action.delete { background: #f08a79; font-size: 20px; font-weight: 400; }
.event-action.comment { flex: 0 0 28px; border: 1px solid #cbd5da; background: white; color: #52616a; }
.event-action.no-location { background: #c3cbd0; }
.event-action:disabled { cursor: default; filter: none; opacity: .65; }
.attendance-event-kind { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-left: 3px solid var(--teal); background: #f3f7f7; }
.automatic-event-editor { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.automatic-event-editor > span { color: #52616a; font-size: 11px; }
.automatic-event-editor input[type="datetime-local"] { width: 176px; min-height: 34px; padding: 5px 8px; }
.automatic-event-comment { flex: 1 0 100%; display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.automatic-event-comment[hidden] { display: none; }
.automatic-event-comment input { min-height: 34px; padding: 5px 8px; }
.attendance-map-dialog { width: min(650px, calc(100% - 32px)); }
.attendance-map-frame { height: 360px; overflow: hidden; border: 1px solid var(--line); background: #edf1f2; }
.attendance-map-frame iframe { width: 100%; height: 100%; border: 0; }
.map-external-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.original-log { padding: 0; }
.original-log summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; cursor: pointer; font-size: 14px; font-weight: 750; }
.original-log .timeline { padding: 4px 18px 18px; border-top: 1px solid var(--line); }

.dialog-kicker { margin: 0 0 3px; color: var(--teal); font-size: 11px; font-weight: 800; text-transform: uppercase; }

.settings-tabs { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; }
.settings-section { max-width: 920px; }
.settings-grid { max-width: 760px; }
.form-footer { display: flex; justify-content: flex-end; margin-top: 22px; }
.toggle-field { grid-template-columns: 18px minmax(0, 1fr); align-items: start; font-weight: 570; line-height: 1.4; }
.toggle-field input { width: 17px; margin: 1px 0 0; accent-color: var(--teal); }
.schedule-rules { display: grid; }
.schedule-details { margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.schedule-details > summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; list-style: none; cursor: pointer; }
.schedule-details > summary::-webkit-details-marker { display: none; }
.schedule-details > summary strong, .schedule-details > summary small { display: block; }
.schedule-details > summary strong { font-size: 13px; }
.schedule-details > summary small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
.schedule-details > summary .disclosure { transition: transform 120ms ease; }
.schedule-details[open] > summary .disclosure { transform: rotate(180deg); }
.schedule-details[open] .schedule-rules { border-top: 1px solid var(--line); }
.employee-config-section input[readonly] { background: #f2f5f6; color: #4e5c65; }
.contract-duration-fields { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 16px; }
.contract-indefinite { min-height: 40px; padding-bottom: 10px; white-space: nowrap; }
.contract-duration-fields.is-indefinite { grid-template-columns: minmax(180px, 1fr) auto; }
.contract-duration-fields.is-indefinite .contract-end-field { display: none; }
.schedule-row { min-height: 58px; display: grid; grid-template-columns: 110px 100px 120px 120px 100px; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.schedule-row:first-child { border-top: 0; }
.schedule-row strong { font-size: 13px; }
.schedule-row .day-toggle { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.schedule-row .day-toggle input { width: 16px; accent-color: var(--teal); }
.schedule-row input { min-height: 36px; padding: 6px 8px; }
.company-schedule-row { grid-template-columns: 78px 90px 95px 95px 110px 95px 95px 72px; gap: 8px; }
#company-settings-form input[readonly], #company-settings-form input:disabled { background: #f2f5f6; color: #4e5c65; cursor: not-allowed; }
.holiday-list { display: grid; }
.holiday-row { min-height: 58px; display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px 34px; align-items: center; gap: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.holiday-row:first-child { border-top: 0; }
.holiday-row small { display: block; margin-top: 3px; color: var(--muted); }
.report-placeholder { min-height: 330px; display: grid; place-content: center; justify-items: center; padding: 40px; border: 1px solid var(--line); background: white; text-align: center; }
.report-placeholder h3 { margin: 14px 0 5px; }
.report-placeholder p { max-width: 540px; margin: 0; color: var(--muted); line-height: 1.6; }
.report-icon { font-size: 35px; color: var(--teal); }
.report-controls { display: grid; grid-template-columns: minmax(200px, 1fr) 180px auto; align-items: end; gap: 14px; margin-bottom: 14px; padding: 15px; }
.validation-month-switcher { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: -6px 0 14px; }
.validation-month-switcher strong { min-width: 180px; text-align: center; }
.validation-month-switcher svg, .icon-text-button svg, .validation-action svg { width: 18px; height: 18px; fill: currentColor; }
.validation-schedule { display: grid; grid-template-columns: minmax(230px, 1fr) auto 100px 120px minmax(190px, .7fr) auto; align-items: end; gap: 14px; margin-bottom: 12px; padding: 14px 16px; }
.validation-schedule > div { align-self: center; }
.validation-schedule > div p { margin: 3px 0 0; font-size: 12px; }
.validation-schedule > .toggle-field { min-height: 40px; white-space: nowrap; }
.validation-schedule .form-error { grid-column: 1 / -1; }
.validation-toolbar { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto auto; align-items: end; gap: 12px; margin-bottom: 12px; padding: 14px 16px; }
.icon-text-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.validation-export { min-width: 58px; border-color: var(--teal) !important; border-radius: 20px !important; color: var(--teal-dark) !important; }
.validation-table-wrap table { min-width: 820px; }
.validation-table-wrap th { background: white; color: var(--ink); font-size: 12px; text-transform: none; }
.validation-table-wrap tbody tr:nth-child(even) { background: #f8f9fa; }
.validation-state-column, .validation-action-column { width: 112px; text-align: center; }
.validation-table-wrap td:first-child, .validation-table-wrap td:last-child { text-align: center; }
.validation-status-icon { display: inline-grid; place-items: center; color: #c92e2e; }
.validation-status-icon.is-valid { color: #16813b; }
.validation-status-icon svg { width: 17px; height: 17px; fill: currentColor; }
.validation-action { width: 36px; height: 34px; display: inline-grid; place-items: center; border: 1px solid #bcc6cd; border-radius: 4px; background: white; color: var(--ink); }
.validation-action:hover { border-color: var(--teal); color: var(--teal-dark); background: #f2faf8; }

.table-wrap { overflow: auto; border: 1px solid var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { height: 56px; padding: 0 16px; border-bottom: 1px solid #e7ebee; text-align: left; font-size: 13px; }
th { height: 42px; background: #f7f8f9; color: #5c6873; font-size: 11px; text-transform: uppercase; }
tbody tr:hover { background: #fafcfc; }
tbody tr[data-open-leave] { cursor: pointer; }
tbody tr[data-open-leave]:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
tbody tr.focused-row { background: #e8f4f1; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.employee-avatar-wrap { position: relative; display: inline-grid; flex: 0 0 auto; }
.employee-day-badge { position: absolute; right: -5px; bottom: -4px; width: 19px; height: 19px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: white; cursor: help; box-shadow: 0 1px 3px rgba(16, 35, 43, .18); }
.employee-day-badge.weekly-rest { background: #197f75; }
.employee-day-badge.vacation { background: #247ca3; }
.employee-day-badge > span { font-size: 8px; font-weight: 800; letter-spacing: 0; line-height: 1; }
.employee-day-badge svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.team-state-icon.weekly-rest { display: grid; place-items: center; color: #197f75; cursor: help; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.team-state-icon.vacation svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.person-cell strong, .person-cell small { display: block; }
.person-cell small { color: var(--muted); margin-top: 2px; }
.employee-directory-toolbar { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(140px, .65fr)); align-items: end; gap: 12px; margin-bottom: 10px; padding: 14px; }
.directory-summary { margin: 0 0 10px; font-size: 12px; }
.employee-directory tbody tr { cursor: pointer; }
.employee-directory tbody tr.is-inactive { opacity: .56; background: #f7f8f9; }
.employee-directory tbody tr.is-inactive:hover,
.employee-directory tbody tr.is-inactive:focus-visible { opacity: .72; }
.employee-directory tbody tr:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.employee-directory td:nth-child(2) strong, .employee-directory td:nth-child(2) small { display: block; }
.employee-directory td:nth-child(2) small { margin-top: 3px; color: var(--muted); }
.hours-progress { min-width: 220px; display: grid; grid-template-columns: minmax(110px, 1fr) 64px; align-items: center; gap: 10px; }
.hours-progress-bars { display: grid; gap: 5px; }
.hours-progress-track { height: 7px; overflow: hidden; border-radius: 2px; background: #e2e7ea; cursor: help; }
.hours-progress-track i { display: block; height: 100%; border-radius: inherit; }
.hours-progress-track.worked i { background: var(--teal); }
.hours-progress-track.due i { background: #6ca6c4; }
.hours-progress-total { display: grid; justify-items: end; line-height: 1.15; cursor: help; }
.hours-progress-total strong { font-size: 11px; white-space: nowrap; }
.hours-progress-total small { margin-top: 4px; font-size: 10px; white-space: nowrap; }
.hours-progress-total em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 400; }
.historical-metric { display: grid; gap: 2px; color: #52616b; }
.historical-metric strong { font-size: 11px; }
.historical-metric small { color: var(--muted); font-size: 10px; }
.positive { color: #16785d; }
.negative { color: #b34e3d; }
.employee-directory table { table-layout: fixed; min-width: 980px; }
.employee-directory th:nth-child(1) { width: 19%; }
.employee-directory th:nth-child(2) { width: 14%; }
.employee-directory th:nth-child(3) { width: 30%; }
.employee-directory th:nth-child(4) { width: 25%; }
.employee-directory th:nth-child(5) { width: 8%; }
.employee-directory th:nth-child(6) { width: 48px; }
.vacation-summary { max-width: 350px; display: grid; grid-template-columns: minmax(0, 1fr) 116px; align-items: center; gap: 12px; }
.vacation-summary-copy { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 5px; }
.vacation-summary-copy strong { color: #245e70; font-size: 17px; }
.vacation-summary-copy span { color: #40505b; font-size: 11px; }
.vacation-summary-copy small { grid-column: 1 / -1; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.vacation-day-grid { width: 116px; display: grid; grid-template-columns: repeat(11, 8px); grid-auto-rows: 8px; justify-content: end; gap: 3px; }
.vacation-day-grid i { display: block; border-radius: 1px; background: #e1e6e8; }
.vacation-day-grid .approved { background: #4d91bd; }
.vacation-day-grid .pending { background: var(--amber); }
.employee-profile-head { min-height: 88px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.employee-profile-identity { display: flex; align-items: center; gap: 13px; }
.employee-profile-identity h2 { margin: 0 0 5px; font-size: 21px; }
.profile-avatar { width: 48px; height: 48px; font-size: 14px; }
.employee-profile-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.employee-profile-tabs { display: flex; gap: 5px; margin: 14px 0 20px; border-bottom: 1px solid var(--line); }
.employee-profile-tabs .filter { border-bottom: 2px solid transparent; border-radius: 0; }
.employee-profile-tabs .filter.active { border-bottom-color: var(--teal); }
.employee-period-heading { align-items: end; }
.employee-period-heading label { min-width: 180px; }
.employee-month-control { display: flex; align-items: end; gap: 7px; }
.employee-month-control .icon-button { margin-bottom: 5px; }
.employee-checks-metrics { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); margin-bottom: 14px; border: 1px solid var(--line); background: white; }
.employee-checks-metrics > div { min-height: 72px; padding: 13px 16px; border-right: 1px solid var(--line); }
.employee-checks-metrics > div:last-child { border-right: 0; }
.employee-checks-metrics span, .employee-checks-metrics strong { display: block; }
.employee-checks-metrics span { color: var(--muted); font-size: 11px; }
.employee-checks-metrics strong { margin-top: 7px; font-size: 20px; }
.employee-month-attendance { padding: 0; }
.employee-vacation-heading { margin-bottom: 14px; }
.employee-vacation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: 16px; }
.employee-vacation-calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.employee-vacation-calendar .annual-day { cursor: default; }
.employee-vacation-calendar .annual-day.holiday-mark { background: var(--event-color, #6f8e14); color: var(--event-ink, white); box-shadow: none; font-weight: 750; }
.employee-vacation-calendar .annual-day.vacation-mark { background: #31809a; color: white; box-shadow: none; font-weight: 750; cursor: pointer; }
.employee-vacation-calendar .annual-day.absence-mark { background: #9a6a42; color: white; box-shadow: none; font-weight: 750; cursor: pointer; }
.employee-vacation-calendar .annual-day.pending-mark { background: var(--amber); color: white; box-shadow: none; font-weight: 750; cursor: pointer; }
.employee-vacation-aside { display: grid; gap: 12px; }
.employee-vacation-aside > section { padding: 16px; border: 1px solid var(--line); background: white; }
.employee-vacation-requests { display: grid; }
.employee-vacation-requests > button { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }
.employee-vacation-requests > button:first-child { border-top: 0; }
.employee-vacation-requests strong, .employee-vacation-requests small { display: block; }
.employee-vacation-requests small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.status { display: inline-flex; align-items: center; min-height: 25px; border-radius: 4px; padding: 0 8px; font-size: 11px; font-weight: 750; }
.status-active, .status-approved, .status-signed { background: var(--green-soft); color: var(--teal-dark); }
.status-pending { background: var(--amber-soft); color: #80560f; }
.status-denied, .status-unsigned, .status-cancelled { background: var(--coral-soft); color: #a23d2d; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.row-actions button, .row-actions a { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #c7d0d6; border-radius: 4px; background: white; color: var(--ink); padding: 6px 10px; text-decoration: none; font-weight: 650; white-space: nowrap; }
.row-actions button > svg { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; }
.row-actions button.danger { min-height: 31px; padding: 6px 10px; border: 1px solid #d7aaa3; background: white; color: #a23d2d; }
.filter-tabs { min-width: 0; display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; }
.filter-tabs .filter { flex: 0 0 auto; }
.leave-list-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.leave-list-toolbar .filter-tabs { margin-bottom:0; }
.leave-list-toolbar > label { width:110px; }
.filter { border: 0; background: transparent; padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.filter.active { color: var(--teal-dark); border-color: var(--teal); font-weight: 700; }

dialog { width: min(100% - 28px, 620px); border: 0; padding: 0; background: white; color: var(--ink); box-shadow: 0 22px 80px rgb(20 31 40 / 28%); }
dialog.wide-dialog { width: min(100% - 28px, 1180px); max-height: calc(100vh - 36px); }
dialog::backdrop { background: rgb(13 23 31 / 58%); }
.dialog-form { padding: 24px; }
.dialog-form header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.dialog-form header h2 { margin: 0; font-size: 19px; }
.dialog-form header .icon-button:hover { background: #edf0f2; }
.dialog-form footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.leave-request-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.leave-request-fields { display: grid; gap: 14px; position: sticky; top: 0; }
.leave-year-switcher { justify-content: center; }
.leave-year-switcher strong { min-width: 60px; text-align: center; }
.selection-label { min-height: 36px; margin: 0; padding: 9px 10px; background: #f1f7f6; color: var(--teal-dark); font-size: 12px; line-height: 1.45; }
.date-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.annual-leave-calendar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.annual-month { border: 1px solid var(--line); min-width: 0; }
.annual-month h3 { height: 30px; display: grid; place-items: center; margin: 0; background: #66747d; color: white; font-size: 11px; font-weight: 700; text-transform: capitalize; }
.annual-month > div { display: grid; grid-template-columns: repeat(7, 1fr); }
.annual-month.show-week-numbers > div { grid-template-columns: 27px repeat(7, 1fr); }
.annual-weekday, .annual-week-number, .annual-blank, .annual-day { min-width: 0; height: 22px; display: grid; place-items: center; border: 0; border-right: 1px solid #edf0f1; border-bottom: 1px solid #edf0f1; background: white; color: var(--ink); font-size: 9px; }
.annual-weekday { height: 23px; background: #f1f3f4; color: var(--muted); font-weight: 750; }
.annual-week-heading, .annual-week-number { background: #e5eaec; color: #66747d; font-weight: 750; }
.annual-blank { background: #fafbfb; }
.annual-day.weekend { background: #eef2f3; }
.annual-day:hover { background: #e4f3f0; }
.annual-day.holiday-mark { background: var(--event-color, #6f8e14); color: var(--event-ink, white); font-weight: 750; }
.annual-day.vacation-mark { background: #31809a; color: white; font-weight: 750; }
.annual-day.pending-mark { background: #bd7410; color: white; font-weight: 750; }
.annual-day.absence-mark { background: #a65447; color: white; font-weight: 750; }
.annual-day.holiday-mark:hover, .annual-day.vacation-mark:hover, .annual-day.pending-mark:hover, .annual-day.absence-mark:hover { filter: brightness(.9); }
.annual-month > div > .annual-day.selected { background: var(--selected-color, var(--teal)); color: white; box-shadow: inset 0 0 0 2px #07554e; font-weight: 800; }
.annual-month > div > .annual-day.range-start, .annual-month > div > .annual-day.range-end { background: var(--teal); color: white; box-shadow: inset 0 0 0 2px #063e39; font-weight: 800; }
.my-calendar-request { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; margin-bottom: 12px; padding: 13px 16px; }
.request-balance { display: grid; align-content: center; justify-items: center; border-right: 1px solid var(--line); text-align: center; }
.request-balance span { color: var(--muted); font-size: 12px; }
.request-balance > strong { margin: 3px 0; font-size: 34px; line-height: 1; }
.request-balance small { max-width: 130px; color: var(--muted); line-height: 1.35; }
.request-balance #balance-selection { color: var(--ink); }
.request-balance.is-insufficient > strong { color: #b42318; }
.request-fields { min-width: 0; display: grid; gap: 9px; }
.request-topline { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 10px; align-items: end; }
.selection-box { min-height: 40px; display: grid; align-content: center; padding: 5px 11px; border-left: 3px solid var(--teal); background: #f0f7f5; }
.selection-box span, .selection-box strong { display: block; }
.selection-box span { color: var(--muted); font-size: 10px; }
.selection-box strong { margin-top: 2px; font-size: 12px; }
.absence-fields { display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(145px, 1fr) minmax(120px, .8fr) minmax(120px, .8fr); gap: 8px; }
.absence-fields[hidden], .vacation-only[hidden], .absence-only[hidden] { display: none; }
.request-bottomline { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(210px, .65fr) auto; gap: 10px; align-items: end; }
.my-calendar-request:not(.absence-mode) .request-bottomline { grid-template-columns: minmax(240px, 1fr) auto auto; }
.request-bottomline > .toggle-field { min-height: 40px; align-self: end; white-space: nowrap; }
.request-fields textarea { min-height: 48px; max-height: 80px; resize: vertical; }
.request-bottomline > .primary { min-width: 112px; min-height: 40px; }
.attachment-picker { position: relative; min-height: 48px; display: grid; place-items: center; padding: 6px 10px; border: 1px dashed #8d9ba4; background: #fafcfc; color: var(--teal-dark); text-align: center; cursor: pointer; }
.attachment-picker:hover { border-color: var(--teal); background: #f0f7f5; }
.attachment-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-picker span, .attachment-picker small { display: block; }
.attachment-picker small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 400; }
.request-fields .form-error { margin: 0; }
.annual-calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; }
.calendar-week-option { margin-top: 4px; padding: 11px 12px; border: 1px solid var(--line); background: white; }
.pending-leave-list { display: grid; gap: 7px; }
.pending-leave-item { padding: 8px 0; border-top: 1px solid var(--line); }
.pending-leave-item:first-child { padding-top: 0; border-top: 0; }
.pending-leave-item strong, .pending-leave-item small { display: block; }
.pending-leave-item small { margin-top: 3px; color: var(--muted); line-height: 1.35; }
.compact-copy { margin: 0; font-size: 12px; }
.pending-leave-list + #calendar-clear-selection { margin-top: 12px; }
.personal-calendar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.calendar-admin-toolbar { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: end; gap: 18px; margin-bottom: 14px; padding: 14px 18px; }
.calendar-admin-toolbar p { margin: 4px 0 0; }
.calendar-template-list { display: grid; gap: 8px; }
.calendar-template { min-height: 72px; display: grid; grid-template-columns: 8px minmax(0, 1fr) 70px auto; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--line); background: white; }
.template-swatch { width: 8px; height: 44px; }
.calendar-template h3, .calendar-template p { margin: 0; }
.calendar-template h3 { font-size: 14px; }
.calendar-template p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.template-year { color: var(--muted); font-size: 13px; font-weight: 750; }
.template-editor-fields { display: grid; grid-template-columns: 110px minmax(220px, 1fr) 100px 170px minmax(180px, .7fr); gap: 12px; align-items: end; }
.color-picker, .template-editor-fields input[type="color"], .form-grid input[type="color"] { width: 100%; min-width: 76px; height: 40px; padding: 3px; border: 1px solid #aeb8bf; background: white; cursor: pointer; appearance: auto; }
.color-picker::-webkit-color-swatch-wrapper, .template-editor-fields input[type="color"]::-webkit-color-swatch-wrapper, .form-grid input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch, .template-editor-fields input[type="color"]::-webkit-color-swatch, .form-grid input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.color-picker::-moz-color-swatch, .template-editor-fields input[type="color"]::-moz-color-swatch, .form-grid input[type="color"]::-moz-color-swatch { border: 0; border-radius: 2px; }
.weekday-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; }
.weekday-shortcuts span { margin-right: 5px; color: var(--muted); font-size: 12px; }
.weekday-shortcuts button { min-height: 32px; padding: 0 10px; }
.employee-picker { max-height: 150px; margin-top: 14px; overflow: auto; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.employee-picker label { min-height: 52px; display: grid; grid-template-columns: 18px 32px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 600; }
.employee-picker input { width: 16px; }
.employee-picker small { display: block; color: var(--muted); font-weight: 400; }
.template-calendar { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 430px; overflow: auto; padding-right: 4px; gap: 9px; }
.target-field { position: relative; }
.select-button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #aeb8bf; background: white; color: var(--ink); font-weight: 500; }
.select-button svg { width: 17px; height: 17px; flex: 0 0 17px; fill: var(--muted); }
.team-state-icon svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.target-picker { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: min(390px, 90vw); max-height: 430px; overflow: auto; border: 1px solid #aeb8bf; background: white; box-shadow: 0 12px 34px rgb(20 31 40 / 20%); }
.target-picker > input { position: sticky; z-index: 2; top: 0; width: calc(100% - 16px); margin: 8px; background: white; }
.target-actions { display: grid; grid-template-columns: 1fr 1fr; margin: 0 8px; border: 1px solid var(--line); }
.target-actions button { min-height: 30px; border: 0; border-right: 1px solid var(--line); background: white; color: var(--muted); font-size: 11px; }
.target-actions button:last-child { border-right: 0; }
.target-picker section { padding: 9px 10px; border-top: 1px solid var(--line); }
.target-picker h4 { margin: 0 0 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.target-picker section label { min-height: 30px; display: flex; align-items: center; gap: 9px; font-weight: 500; }
.target-picker section input { width: 15px; accent-color: var(--teal); }
.work-center-list { display: grid; gap: 9px; }
.department-panel { margin-top: 20px; }
.department-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; align-items: end; gap: 10px; }
.department-form .form-error { grid-column: 1 / -1; }
.departments-list { margin-top: 14px; border-top: 1px solid var(--line); }
.tv-messages-panel { margin-top: 20px; }
.tv-message-form { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto auto; gap: 12px; align-items: end; }
.tv-message-form .wide { grid-column: span 2; }
.tv-message-form .form-error { grid-column: 1 / -1; }
.tv-message-list { margin-top: 16px; border-top: 1px solid var(--line); }
.tv-message-row { min-height: 68px; display: grid; grid-template-columns: 36px minmax(220px, 1fr) auto auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.tv-message-row.is-inactive { opacity: .62; }
.tv-message-row small { display: block; margin-top: 4px; color: var(--muted); }
.tv-message-order { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tv-message-order .icon-button { width: 17px; height: 30px; padding: 0; }
.tv-message-order .icon-button svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .tv-message-form { grid-template-columns: 1fr 1fr; } .tv-message-form .wide { grid-column: 1 / -1; } .tv-message-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .tv-message-row .row-actions { grid-column: 2 / -1; } }
.department-row { min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.department-row span:first-child { display: grid; }
.department-row small { color: var(--muted); }
.work-center-card { min-height: 84px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 38px; align-items: center; gap: 14px; padding: 12px 15px; border: 1px solid var(--line); background: white; }
.center-color { align-self: stretch; }
.work-center-card h3, .work-center-card p { margin: 0; }
.work-center-card p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.work-center-card small { display: block; margin-top: 6px; color: var(--muted); }
.organization-tabs { margin-bottom: 16px; }
.organization-panel { display: grid; gap: 14px; }
.directory-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 14px; padding: 14px 16px; }
.organization-layout { display: grid; grid-template-columns: minmax(330px, .72fr) minmax(620px, 1.28fr); gap: 16px; align-items: start; }
.organization-map, .center-map-preview { position: relative; min-height: 390px; overflow: hidden; border: 1px solid var(--line); background: #e9eef0; }
.organization-map iframe, .center-map-preview iframe { width: 100%; height: 100%; min-height: inherit; border: 0; display: block; }
.map-empty { min-height: inherit; display: grid; place-items: center; padding: 30px; color: var(--muted); text-align: center; }
.geofence-ring { position: absolute; pointer-events: none; left: 50%; top: 50%; width: var(--ring-size); height: var(--ring-size); border: 2px solid var(--teal); border-radius: 50%; background: color-mix(in srgb, var(--teal) 13%, transparent); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgb(255 255 255 / 70%); }
.map-credit { position: absolute; right: 5px; bottom: 5px; padding: 3px 5px; background: rgb(255 255 255 / 88%); color: #315a76; font-size: 10px; text-decoration: none; }
.organization-row { cursor: pointer; }
.organization-row:hover td, .organization-row.selected td { background: #f0f7f6; }
.organization-name { display: flex; align-items: center; gap: 10px; }
.organization-name i { width: 7px; height: 34px; flex: 0 0 auto; }
.organization-name span, .organization-name small { display: block; }
.organization-name small { margin-top: 3px; color: var(--muted); }
.organization-actions { justify-content: flex-end; flex-wrap: nowrap; }
.department-editor { margin-top: 4px; }
.department-editor footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.wide-dialog { width: min(1080px, calc(100% - 28px)); }
.center-editor-layout { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(390px, .9fr); gap: 22px; }
.center-map-preview { min-height: 440px; }
.input-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.geocode-results { display: grid; gap: 1px; max-height: 190px; overflow: auto; border: 1px solid var(--line); }
.geocode-results:empty { display: none; }
.geocode-results button { padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; font-size: 12px; }
.geocode-results button:hover { background: #edf6f4; }
.map-attribution { margin: 6px 0 0; color: var(--muted); font-size: 11px; text-align: right; }
.organization-members-list { max-height: 390px; overflow: auto; border: 1px solid var(--line); }
.organization-members-list label { min-height: 50px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--line); font-weight: 500; }
.organization-members-list input { width: 16px; }
.organization-members-list span, .organization-members-list small { display: block; }
.organization-members-list small { margin-top: 3px; color: var(--muted); }
.organization-members-list label.is-inactive { background: #f7f8f9; opacity: .64; }
.organization-members-list .member-status { display: inline-block; margin-left: 8px; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; }
.mobile-notification-layout { display: grid; grid-template-columns: minmax(430px, .8fr) minmax(500px, 1.2fr); gap: 16px; align-items: start; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); }
.weekday-picker legend { padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.weekday-picker label { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); background: #f6f8f9; }
.weekday-picker input { width: 14px; }
.mobile-campaign-list { display: grid; }
.mobile-campaign { min-height: 96px; display: grid; grid-template-columns: minmax(0, 1fr) 135px; align-items: center; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.mobile-campaign:first-child { border-top: 0; }
.mobile-campaign.is-inactive { opacity: .58; }
.mobile-campaign h3, .mobile-campaign p { margin: 4px 0; }
.mobile-campaign p { color: #3e4953; }
.mobile-campaign small { color: var(--muted); }
.campaign-mode { color: var(--teal-dark); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.campaign-stats { display: grid; text-align: right; }
.campaign-stats strong { font-size: 25px; }
.campaign-stats span { color: var(--muted); font-size: 11px; }
.mobile-campaign-history { margin-top: 16px; }
.mobile-campaign-history table { min-width: 1120px; }
.mobile-campaign-history td { vertical-align: middle; }
.mobile-campaign-history tr.is-inactive { background: #f8f9fa; color: #6d7780; }
.campaign-message-cell { display: grid; min-width: 210px; max-width: 360px; gap: 4px; }
.campaign-message-cell small, .mobile-campaign-history td > small { display: block; color: var(--muted); }
.campaign-message-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-channel { display: inline-block; padding: 4px 7px; background: var(--green-soft); color: var(--teal-dark); font-size: 11px; font-weight: 750; white-space: nowrap; }
.campaign-table-actions { flex-wrap: nowrap; }
@media (max-width: 1100px) { .organization-layout, .mobile-notification-layout, .center-editor-layout { grid-template-columns: 1fr; } .organization-map { min-height: 300px; } }
@media (max-width: 700px) { .directory-toolbar { grid-template-columns: 1fr; } .mobile-campaign { grid-template-columns: 1fr auto; } .campaign-stats { text-align: left; } }
@media (max-width: 700px) { .contract-duration-fields, .contract-duration-fields.is-indefinite { grid-template-columns: 1fr; } .contract-indefinite { padding-bottom: 0; } }
.employee-schedule { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.employee-config-section { padding: 15px 0; border-top: 1px solid var(--line); }
.employee-config-section:first-of-type { padding-top: 0; border-top: 0; }
.employee-config-section h3 { margin: 0 0 14px; font-size: 14px; }
.employee-config-section .schedule-rules { margin-top: 18px; border-top: 1px solid var(--line); }
.schedule-overnight-help { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); background: #f3f7f7; color: #52616a; font-size: 12px; line-height: 1.45; }
.editor-form { max-width: 980px; padding: 22px; }
.editor-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.back-link { min-height: 30px; margin: 0 0 8px; padding: 0; border: 0; background: transparent; color: var(--teal-dark); font-weight: 750; }
.back-link:hover { text-decoration: underline; }
.incident-list { display: grid; gap: 9px; }
.incident-card { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.4fr) 92px auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); background: white; }
.incident-card p { margin: 4px 0 0; font-size: 12px; }
.incident-actions { flex-wrap: wrap; }
.incident-actions button.primary { border-color: var(--teal); background: var(--teal); color: white; }
.incident-review { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.incident-review[hidden] { display: none; }
.incident-review .form-error { grid-column: 1 / -1; }
.daily-report-list { border: 1px solid var(--line); background: white; }
.daily-report-row { width: 100%; min-height: 72px; display: grid; grid-template-columns: minmax(220px, 1fr) 90px minmax(280px, 2fr) 110px; align-items: center; gap: 16px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; cursor: pointer; }
.daily-report-row:hover, .daily-report-row:focus-visible { background: #f5faf9; }
.daily-report-row:last-child { border-bottom: 0; }
.daily-hours strong, .daily-hours small { display: block; }
.daily-hours small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.daily-track { position: relative; height: 15px; border: 1px solid #d5dde1; background: repeating-linear-gradient(90deg, #f2f4f5 0, #f2f4f5 calc(25% - 1px), #dce2e5 calc(25% - 1px), #dce2e5 25%); }
.daily-track i { position: absolute; top: -1px; height: 15px; min-width: 3px; background: var(--segment-color); }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.document-upload { margin-bottom: 18px; }
.document-upload-fields { display: grid; grid-template-columns: 190px minmax(360px, 720px) auto; align-items: end; justify-content: start; gap: 14px; }
.delivery-channel-picker { width: min(100%, 1067px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 18px 0 0; padding: 10px 14px 12px; border: 1px solid var(--line); }
.delivery-channel-picker legend { padding: 0 5px; font-weight: 700; }
.delivery-channel-picker .toggle-field { margin: 0; white-space: nowrap; }
.delivery-channel-picker .delivery-schedule-toggle { margin-left: auto; }
.delivery-schedule-at { min-width: 220px; }
.document-review { margin-bottom: 22px; }
.document-review .table-wrap { margin: 0 -1px; }
.document-review td:first-child, .document-review th:first-child { width: 82px; text-align: center; }
.document-review input.batch-pages { min-width: 110px; }
.batch-preview-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.batch-preview-link svg { width: 17px; height: 17px; fill: currentColor; }
.compact-help { margin: 12px 0 0; font-size: 12px; }
.company-document-history { margin-top: 24px; }
.document-history-filters { display: grid; grid-template-columns: minmax(170px, 220px) minmax(170px, 220px) minmax(160px, 190px) minmax(150px, 180px) auto auto; align-items: end; gap: 12px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); background: #f7f9fa; }
.document-history-filters button { min-height: 40px; }
.document-policy-list { display: grid; gap: 0; border: 1px solid var(--line); }
.document-policy-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(210px, 280px) minmax(180px, 240px); gap: 18px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.document-policy-row:last-child { border-bottom: 0; }
.document-policy-row strong, .document-policy-row small { display: block; }
.document-policy-row small { margin-top: 3px; color: var(--muted); }
.correction-request-list { display: grid; gap: 0; }
.correction-request-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.correction-request-row:last-child { border-bottom: 0; }
.correction-request-row strong, .correction-request-row small { display: block; }
.correction-request-row small { margin-top: 3px; color: var(--muted); }
.correction-request-row p { margin: 5px 0 0; }
.correction-change { display: flex; align-items: stretch; gap: 9px; margin-top: 9px; }
.correction-change-value { min-width: 190px; padding: 8px 10px; border-left: 3px solid var(--line); background: #f4f6f7; }
.correction-change-value small { margin: 0 0 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.correction-change-value strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.correction-change-value.is-original { border-color: #d06451; }
.correction-change-value.is-requested { border-color: var(--teal); background: #eef8f6; }
.correction-change-value.is-requested small { color: var(--teal-dark); }
.correction-change-arrow { display: grid; place-items: center; color: var(--muted); }
.correction-change-arrow svg { width: 18px; height: 18px; fill: currentColor; }
.table-link { color: var(--teal-dark); font-weight: 700; text-decoration: none; }
.table-link:hover { text-decoration: underline; }
.tv-preview { max-width: 1100px; height: 520px; margin-top: 14px; padding: 0; overflow: hidden; }
.tv-preview iframe { width: 100%; height: 100%; border: 0; }
.danger-outline { color: #a23d2d; border-color: #d7aaa3; }
.compact-metrics { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.statistics-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.employee-statistics-filters { display: grid; grid-template-columns: 180px 180px auto; align-items: end; gap: 12px; margin-bottom: 14px; }
.employee-statistics-filters button { min-width: 110px; }
.employee-statistics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.employee-statistics-grid h3 { margin: 0 0 18px; font-size: 15px; }
.employee-statistics-list { margin: 0; }
.employee-statistics-list > div { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); }
.employee-statistics-list > div:first-child { border-top: 0; }
.employee-statistics-list dt { color: var(--muted); font-size: 12px; }
.employee-statistics-list dd { margin: 0; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.employee-statistics-bars { display: grid; gap: 15px; }
.employee-statistics-bar > div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; font-size: 12px; }
.employee-statistics-bar strong { font-variant-numeric: tabular-nums; }
.employee-statistics-bar .stat-progress-track { width: 100%; display: block; }
.statistics-balance-panel { margin-bottom: 14px; padding: 16px 18px 18px; }
.statistics-balance-panel .section-heading { margin-bottom: 12px; }
.statistics-balance-panel h3 { margin: 0 0 3px; font-size: 15px; }
.balance-chart-legend { display: flex; gap: 14px; color: var(--muted); font-size: 10px; }
.balance-chart-legend span { display: flex; align-items: center; gap: 5px; }
.balance-chart-legend i { width: 9px; height: 9px; border-radius: 2px; }
.balance-chart-legend .positive, .balance-chart-track i.positive { background: #198a78; }
.balance-chart-legend .negative, .balance-chart-track i.negative { background: #d06451; }
.statistics-balance-chart { --chart-label-width: 220px; display: grid; gap: 3px; }
.balance-chart-scale { height: 22px; display: grid; grid-template-columns: var(--chart-label-width) 1fr 1fr; padding: 0 50px 0 0; color: var(--muted); font-size: 9px; }
.balance-chart-scale span:first-child { grid-column: 2; text-align: left; }
.balance-chart-scale span:nth-child(2) { grid-column: 2 / 4; justify-self: center; }
.balance-chart-scale span:last-child { grid-column: 3; text-align: right; }
.balance-chart-row { width: 100%; min-height: 39px; display: grid; grid-template-columns: var(--chart-label-width) minmax(0, 1fr); align-items: center; padding: 3px 50px 3px 0; border: 0; border-radius: 2px; background: transparent; text-align: left; }
.balance-chart-row:hover { background: #f7f9fa; }
.balance-chart-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.balance-chart-person { min-width: 0; padding-right: 16px; }
.balance-chart-person strong, .balance-chart-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-chart-person strong { font-size: 11px; }
.balance-chart-person small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.balance-chart-track { position: relative; height: 18px; background: linear-gradient(90deg, transparent calc(50% - .5px), #9eabb3 calc(50% - .5px), #9eabb3 calc(50% + .5px), transparent calc(50% + .5px)); }
.balance-chart-track::before { content: ""; position: absolute; inset: 8px 0 auto; height: 1px; background: #e3e7e9; }
.balance-chart-track > i { position: absolute; z-index: 1; top: 4px; height: 10px; min-width: 2px; border-radius: 2px; }
.balance-chart-track > i:hover .segment-tooltip, .balance-chart-row:focus-visible .segment-tooltip { display: block; }
.balance-chart-track > b { position: absolute; z-index: 2; top: 1px; padding: 1px 5px; background: white; font-size: 10px; white-space: nowrap; transform: translateX(-50%); }
.balance-chart-track > b.negative { color: #b34e3d; }
.balance-chart-track > b.positive { color: #16785d; }
.report-filter-grid { display: grid; grid-template-columns: 150px 150px minmax(170px, 1fr) minmax(170px, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 14px; }
.export-builder { display: grid; grid-template-columns: minmax(260px, 1.4fr) 170px 170px minmax(250px, auto); align-items: end; gap: 12px; margin-bottom: 14px; }
.leave-export-builder { grid-template-columns: minmax(260px, 1.4fr) 130px 170px minmax(250px, auto); }
.format-selector { min-width: 0; margin: 0; padding: 0; border: 0; }
.format-selector legend { margin-bottom: 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
.format-selector label { display: inline-block; }
.format-selector input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.format-selector span { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; margin-right: -1px; padding: 0 16px; border: 1px solid #b9c4ca; background: white; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.format-selector input:checked + span { position: relative; z-index: 1; border-color: var(--teal); background: var(--teal); color: white; }
.format-selector input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.report-catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.report-choice { position: relative; min-height: 92px; display: block; padding: 15px 38px 13px 15px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); text-align: left; cursor: pointer; }
.report-choice:hover { border-color: #8ca8a5; background: #f7fbfa; }
.report-choice.selected { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal); }
.report-choice strong, .report-choice small { display: block; }
.report-choice strong { margin-bottom: 7px; font-size: 13px; }
.report-choice small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.report-choice-mark { position: absolute; top: 12px; right: 12px; width: 19px; height: 19px; display: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--teal); color: white; font-size: 11px; }
.report-choice.selected .report-choice-mark { display: flex; }
.export-preview-heading { margin-top: 22px; }
.export-preview-heading h3 { margin: 0; font-size: 16px; }
.export-table-wrap { max-width: 100%; overflow-x: hidden; }
.export-table-wrap table { min-width: 0; table-layout: fixed; }
.export-table-wrap th, .export-table-wrap td { height: auto; min-height: 42px; padding: 10px 8px; overflow-wrap: anywhere; vertical-align: top; font-size: 11px; }
.export-table-wrap th { font-size: 9px; }
.export-table-wrap thead { position:sticky; top:0; z-index:1; background:#f5f7f8; }
.export-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; color:var(--muted); font-size:12px; }
.export-pagination > div { display:flex; gap:6px; }
@media (max-width: 900px) { .document-history-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .document-history-filters { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .correction-change { display: grid; grid-template-columns: 1fr; }
  .correction-change-value { min-width: 0; }
  .correction-change-arrow { transform: rotate(90deg); }
}
.balance-positive { color: var(--teal-dark); font-weight: 750; }
.balance-negative { color: #b42318; font-weight: 750; }
.stat-progress { width: 150px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.stat-progress-track { height: 7px; overflow: hidden; background: #e2e7ea; border-radius: 2px; }
.stat-progress-track i { display: block; height: 100%; max-width: 100%; background: var(--teal); }
.company-timeline { position: relative; max-width: 1100px; min-height: 220px; margin: 0 auto; padding: 24px 0; background: white; border: 1px solid var(--line); }
.company-timeline::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 1px; background: #bfc9ce; }
.company-timeline-row { position: relative; min-height: 82px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 7px 32px; }
.company-timeline-dot { position: absolute; z-index: 2; top: 50%; left: 50%; width: 14px; height: 14px; border: 3px solid white; border-radius: 50%; background: var(--timeline-color, var(--teal)); box-shadow: 0 0 0 2px var(--timeline-color, var(--teal)); transform: translate(-50%, -50%); }
.timeline-entry { width: min(100%, 420px); min-height: 64px; display: flex; align-items: center; gap: 13px; border: 0; background: transparent; color: var(--ink); text-align: left; }
.timeline-entry:hover .timeline-copy strong { color: var(--teal-dark); text-decoration: underline; }
.timeline-entry .avatar { width: 58px; height: 58px; flex: 0 0 58px; border: 3px solid var(--timeline-color, var(--teal)); font-size: 15px; }
.timeline-side-left .timeline-entry { grid-column: 1; justify-self: end; flex-direction: row-reverse; padding-right: 34px; text-align: right; }
.timeline-side-right .timeline-entry { grid-column: 2; justify-self: start; padding-left: 34px; }
.timeline-copy strong, .timeline-copy small { display: block; }
.timeline-copy time { margin-left: 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.timeline-copy small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.timeline-event-badge { display: inline-block; margin-top: 5px; color: var(--teal-dark); font-size: 11px; font-weight: 750; }
.validation-banner { margin-bottom: 14px; padding: 14px 18px; border: 1px solid #ddc58c; border-left: 4px solid var(--amber); background: var(--amber-soft); }
.validation-banner > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.validation-banner p { margin: 3px 0 0; font-size: 13px; }
.employee-photo-editor { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.employee-photo-editor p { margin: 4px 0 10px; font-size: 12px; }
.employee-photo-preview { width: 86px; height: 86px; font-size: 20px; }
.file-button { position: relative; min-height: 34px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid #bcc6cd; border-radius: 4px; background: white; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.team-leave-toolbar { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)) auto; align-items: end; gap: 12px; margin-bottom: 14px; }
.team-leave-legend { min-height: 24px; display: flex; align-items: center; gap: 18px; margin: 0 0 10px; font-size: 12px; }
.team-leave-legend span { display: inline-flex; align-items: center; gap: 7px; }
.team-leave-legend i { width: 11px; height: 11px; display: inline-block; background: var(--legend-color); }
.team-leave-calendar { margin-bottom: 18px; }
.team-leave-calendar .annual-day { position: relative; height: 30px; align-content: start; padding-top: 4px; }
.team-leave-calendar .annual-day.has-team-leave { background: #f5faf9; font-weight: 750; }
.team-leave-markers { position: absolute; right: 2px; bottom: 3px; left: 2px; display: flex; justify-content: center; gap: 2px; }
.team-leave-markers i { width: 5px; height: 5px; border-radius: 50%; background: var(--marker-color); }
.team-month-heading { position: relative; min-height: 48px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.team-month-heading > .month-switcher { position: absolute; left: 50%; gap: 16px; transform: translateX(-50%); }
.team-month-heading > .month-switcher strong { min-width: 190px; }
.team-month-calendar-wrap { margin-bottom: 18px; overflow: hidden; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: white; }
.team-month-calendar { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.team-month-weekday { min-width: 0; padding: 7px 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #717c83; color: white; text-align: center; font-size: 11px; font-weight: 750; }
.team-month-day { position: relative; min-width: 0; min-height: 96px; padding: 7px 6px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.team-month-weekday.weekend { background: #59666e; }
.team-month-day.weekend { background-color: #f1f4f5; }
.team-month-day.outside { background: #f5f7f8; color: #a3adb4; }
.team-month-day.today { box-shadow: inset 0 0 0 2px var(--teal); }
.team-month-day-number { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 750; }
.team-month-people { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.team-month-person { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.team-month-person .avatar { width: 28px; height: 28px; border: 2px solid var(--leave-tone, #31809a); font-size: 9px; box-shadow: 0 0 0 1px white; }
.team-month-person:hover .avatar { transform: translateY(-1px); box-shadow: 0 2px 7px rgb(0 0 0 / 20%); }
.team-month-person.tone-vacation { --leave-tone: #31809a; }
.team-month-person.tone-absence { --leave-tone: #9a6a42; }
.team-month-person.tone-pending { --leave-tone: #b7791f; }
.team-month-overflow { display: none; }
.team-month-day.expanded .team-month-overflow { display: block; }
.team-month-day-footer { position: absolute; right: 6px; bottom: 5px; left: 6px; display: flex; align-items: center; justify-content: space-between; gap: 4px; overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; }
.team-month-more { padding: 0; border: 0; background: transparent; color: var(--teal-dark); font-size: 11px; font-weight: 750; }
.leave-history { padding: 0; }
.leave-history > summary { padding: 14px 18px; font-weight: 750; cursor: pointer; }
.leave-history .table-wrap { border-right: 0; border-bottom: 0; border-left: 0; }
.settings-panel-stack { display: grid; gap: 14px; }
#api-settings-content { display: grid; gap: 14px; }
#api-settings-content[hidden] { display: none; }
.employee-schedule h3 { margin: 0; font-size: 14px; }
.compact-schedule .schedule-row { grid-template-columns: 96px 92px 105px 105px 112px 105px 105px 88px; }
.split-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; }
.split-toggle input { width: 15px; min-height: 15px; accent-color: var(--teal); }
.employee-history { max-width: 980px; border-top: 1px solid var(--line); }
.employee-history-entry { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.employee-history-entry time { color: var(--muted); font-size: 12px; }
.employee-history-entry h3, .employee-history-entry p { margin: 0 0 5px; }
.employee-history-entry ul { margin: 12px 0 0; padding: 0; list-style: none; }
.employee-history-entry li { display: grid; grid-template-columns: 150px minmax(100px,1fr) minmax(100px,1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px; }
.employee-history-entry li span { color: var(--muted); }
.employee-history-entry li del { color: #9a3d36; }
.inline-times { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.schedule-period-list { display: grid; gap: 8px; margin-bottom: 16px; }
.schedule-period-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) 100px 150px 95px auto; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); background: var(--panel); }
.schedule-period-row.active { border-left: 4px solid var(--teal); padding-left: 13px; }
.schedule-period-row strong, .schedule-period-row small { display: block; }
.schedule-period-row small { margin-top: 3px; color: var(--muted); }
.schedule-period-row .row-actions { justify-content: flex-end; }
.schedule-period-form { margin-top: 16px; }
.inspection-access-panel { margin-top: 18px; }
.inspection-access-form { display: grid; grid-template-columns: minmax(220px,1fr) 160px auto; align-items: end; gap: 12px; }
.inspection-access-form .form-error { grid-column: 1 / -1; }
.inspection-access-list { display: grid; gap: 8px; margin-top: 14px; }
.inspection-access-row { display: grid; grid-template-columns: minmax(220px,1fr) minmax(220px,.7fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.inspection-access-row strong, .inspection-access-row small { display: block; }
.inspection-access-row small { margin-top: 4px; color: var(--muted); }
.inspection-shell { min-height: 100vh; background: var(--page); color: var(--ink); }
.inspection-header { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 0 clamp(18px,4vw,64px); background: var(--sidebar); color: white; }
.inspection-main { width: min(1500px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 60px; }
.inspection-main h1 { margin: 0; font-size: 28px; }
.inspection-summary dl { display: grid; grid-template-columns: 1fr 1fr 110px 2fr; gap: 20px; margin: 0; }
.inspection-summary dt { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.inspection-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.inspection-table { margin-top: 16px; }
.file-field input { min-height: 40px; border: 1px dashed #9ba8b1; padding: 7px 10px; }
.signature-form canvas { width: 100%; height: 180px; border: 1px solid #9ba8b1; background: #fbfcfc; touch-action: none; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 10; max-width: min(380px, calc(100% - 48px)); background: var(--ink); color: white; padding: 13px 16px; border-radius: 4px; box-shadow: 0 10px 35px rgb(0 0 0 / 24%); }

@media (max-width: 1200px) {
  .my-calendar-request.absence-mode .request-topline { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
  .my-calendar-request.absence-mode .absence-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .validation-schedule { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .validation-schedule > div { grid-column: 1 / -1; }
  .validation-toolbar { grid-template-columns: minmax(220px, 1fr) auto auto; }
  .validation-toolbar > label { grid-column: 1 / -1; }
  .schedule-period-row { grid-template-columns: minmax(180px, 1fr) 90px 130px auto; }
  .schedule-period-row > .status { display: none; }
  .inspection-access-form { grid-template-columns: 1fr 1fr; }
  .inspection-access-form button { grid-column: 1 / -1; }
  .inspection-summary dl { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statistics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-statistics-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .employee-directory-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-search { grid-column: 1 / -1; }
  .employee-checks-metrics { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
  .employee-vacation-layout { grid-template-columns: 1fr; }
  .employee-vacation-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-layout { grid-template-columns: 1fr; }
  .calendar-aside { grid-template-columns: 1fr 1fr; }
  .leave-request-layout { grid-template-columns: 1fr; }
  .leave-request-fields { position: static; }
  .annual-calendar-layout { grid-template-columns: 1fr; }
  .personal-calendar, .template-calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .request-topline { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
  .absence-fields { grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(110px, 1fr)); }
  .request-bottomline { grid-template-columns: minmax(220px, 1fr) minmax(190px, .8fr) auto; }
  .template-editor-fields { grid-template-columns: repeat(2, 1fr); }
  .employee-picker { grid-template-columns: repeat(2, 1fr); }
  .incident-card { grid-template-columns: 1fr auto; }
  .incident-card > div:nth-child(2), .incident-review { grid-column: 1 / -1; }
  .daily-report-row { grid-template-columns: minmax(190px, 1fr) 80px minmax(220px, 1.5fr); }
  .daily-report-row > div:last-child { display: none; }
  .report-filter-grid, .export-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-filter-grid button, .export-builder button { justify-self: start; }
  .report-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-leave-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body.mobile-menu-visible { overflow: hidden; }
  .app-shell { display: block; padding-bottom: 72px; }
  .app-shell.sidebar-hidden { display: block; }
  .sidebar, .sidebar-hidden .sidebar { position: fixed; z-index: 61; inset: 0 auto 0 0; width: min(86vw, 310px); height: 100dvh; padding: 14px 11px 12px; overflow: hidden; display: flex; transform: translateX(-102%); visibility: hidden; box-shadow: 12px 0 32px rgb(9 18 26 / 28%); }
  .mobile-menu-open .sidebar { transform: translateX(0); visibility: visible; }
  .sidebar .brand { display: flex; min-height: 38px; }
  .sidebar .sidebar-close { display: grid; margin-left: auto; color: white; font-size: 25px; }
  .sidebar-user { display: grid; }
  .sidebar-resizer { display: none; }
  .sidebar-toggle { display: grid; }
  .sidebar nav { height: auto; margin-top: 10px; padding-right: 3px; display: grid; overflow-x: hidden; overflow-y: auto; }
  .nav-group { display: block; }
  .nav-group > summary { display: block; }
  .nav-group-items { display: grid; }
  .nav-item { min-height: 38px; padding: 6px 9px; flex-direction: row; gap: 9px; text-align: left; font-size: 13px; }
  .nav-symbol { width: 20px; height: 20px; flex-basis: 20px; }
  .nav-symbol svg { width: 19px; height: 19px; }
  .sidebar-backdrop { position: fixed; z-index: 60; inset: 0; width: 100%; height: 100%; border: 0; background: rgb(9 18 26 / 48%); }
  .mobile-menu-open .sidebar-backdrop { display: block; }
  .mobile-quick-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: stretch; border-top: 1px solid #35434f; background: var(--ink); color: white; }
  .mobile-quick-item { position: relative; min-width: 0; min-height: 64px; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 0; padding: 5px 2px; background: transparent; color: #bfc8d0; font-size: 10px; font-weight: 700; }
  .mobile-quick-item span { font-size: 18px; line-height: 20px; }
  .mobile-quick-item span svg { width: 20px; height: 20px; display: block; fill: currentColor; }
  .mobile-quick-item:hover, .mobile-quick-item.active { background: #243341; color: white; }
  .mobile-quick-item.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; background: var(--teal); }
  .workspace { padding: 0 16px 28px; }
  .topbar { min-height: 78px; margin-bottom: 18px; }
  .topbar h1 { font-size: 20px; }
  .live-clock { font-size: 17px; }
  .attendance-banner, .attendance-main { display: grid; grid-template-columns: 1fr; padding: 20px; }
  .attendance-actions { justify-content: stretch; }
  .attendance-actions button { flex: 1; }
  .metric-grid { gap: 10px; }
  .statistics-metrics, .report-catalog, .export-builder { grid-template-columns: 1fr; }
  .employee-statistics-filters { grid-template-columns: 1fr 1fr; }
  .employee-statistics-filters button { grid-column: 1 / -1; justify-self: start; }
  .validation-schedule, .validation-toolbar { grid-template-columns: 1fr; }
  .validation-schedule > *, .validation-toolbar > * { grid-column: auto; }
  .validation-toolbar button, .validation-schedule button { width: 100%; }
  .statistics-balance-panel { padding: 14px 12px; }
  .statistics-balance-chart { --chart-label-width: 125px; }
  .balance-chart-row { padding-right: 28px; }
  .balance-chart-scale { padding-right: 28px; }
  .balance-chart-person { padding-right: 8px; }
  .balance-chart-track > b { font-size: 9px; }
  .export-table-wrap { overflow-x: auto; }
  .export-table-wrap table { min-width: 720px; table-layout: auto; }
  .metric { min-height: 88px; padding: 14px; }
  .metric strong { font-size: 25px; }
  .page-actions { align-items: flex-end; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .login-panel { padding: 28px 22px; }
  .calendar-day { min-height: 82px; padding: 5px; }
  .calendar-event { padding: 2px 3px; font-size: 9px; }
  .calendar-aside { grid-template-columns: 1fr; }
  .day-summary { grid-template-columns: repeat(2, 1fr); }
  .day-summary div:nth-child(2) { border-right: 0; }
  .schedule-row { grid-template-columns: 90px 90px 1fr 1fr; gap: 7px; padding: 9px 0; }
  .schedule-row .minutes-field { grid-column: 2 / -1; }
  .holiday-row { grid-template-columns: 88px minmax(0, 1fr) 34px; }
  .holiday-row .holiday-category { display: none; }
  .page-heading { align-items: flex-end; }
  dialog.wide-dialog { max-height: calc(100vh - 16px); }
  .wide-dialog .dialog-form { padding: 18px; }
  .annual-leave-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .month-day summary { grid-template-columns: 64px repeat(2, minmax(70px, 1fr)) 24px; }
  .month-hours:nth-of-type(3), .month-difference, .month-status { display: none; }
  .month-day-events { padding-left: 18px; }
  .attendance-event-row { grid-template-columns: 9px 86px minmax(120px, 1fr) auto; gap: 8px; padding: 8px 0; }
  .attendance-event-row.automatic-incident { grid-template-columns: 9px 86px minmax(120px, 1fr); }
  .attendance-event-row.automatic-incident .automatic-event-editor { grid-column: 2 / -1; justify-content: flex-start; }
  .automatic-event-editor > span { flex-basis: 100%; }
  .event-corrected { display: none; }
  .attendance-event-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .my-calendar-request { grid-template-columns: 1fr; }
  .request-balance { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .request-topline, .request-bottomline { grid-template-columns: 1fr; }
  .absence-fields { grid-template-columns: 1fr 1fr; }
  .absence-fields label:nth-child(-n + 2) { grid-column: 1 / -1; }
  .request-bottomline > .primary { width: 100%; }
  .personal-calendar, .template-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-picker { grid-template-columns: 1fr; }
  .incident-review { grid-template-columns: 1fr; }
  .daily-report-row { grid-template-columns: 1fr 72px; }
  .company-timeline { padding: 12px 0; }
  .company-timeline::before { left: 34px; }
  .company-timeline-row { display: block; min-height: 74px; padding: 5px 12px 5px 54px; }
  .company-timeline-dot { left: 34px; }
  .timeline-side-left .timeline-entry, .timeline-side-right .timeline-entry { width: 100%; padding: 0; flex-direction: row; text-align: left; }
  .timeline-entry .avatar { width: 48px; height: 48px; flex-basis: 48px; }
  .team-leave-toolbar { grid-template-columns: 1fr; }
  .employee-vacation-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-vacation-aside { grid-template-columns: 1fr; }
  .document-upload-fields { grid-template-columns: 1fr; }
  .delivery-channel-picker .delivery-schedule-toggle { margin-left: 0; }
  .delivery-schedule-at { width: 100%; }
  .leave-list-toolbar { align-items: stretch; flex-direction: column; }
  .leave-list-toolbar .filter-tabs { width: 100%; }
  .leave-list-toolbar > label { width: 100%; }
  .document-policy-row { grid-template-columns: 1fr; }
  .daily-track { grid-column: 1 / -1; }
  .tv-preview { height: 380px; }
}

.scope-picker { border: 1px solid var(--line); padding: 10px 12px; min-width: 0; }
.scope-picker legend { padding: 0 5px; font-weight: 700; }
.scope-picker .toggle-field { margin: 7px 0; }
.credential-result { border-left: 4px solid var(--teal); }
.credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.integration-list { display: grid; gap: 12px; }
.integration-client { border: 1px solid var(--line); padding: 14px; background: #fff; }
.integration-client > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.integration-client h3 { margin: 0 0 4px; }
.integration-client code { overflow-wrap: anywhere; color: var(--muted); }
.integration-client.is-revoked { opacity: .68; }
.integration-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.integration-scopes span { padding: 4px 7px; background: #edf4f3; color: #176b5b; font-size: 12px; }
.integration-mappings { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.integration-mapping { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.integration-mapping span { display: grid; }
.integration-mapping small { color: var(--muted); }
.integration-mapping-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; gap: 8px; margin-top: 12px; }
.integration-mapping-form .form-error { grid-column: 1 / -1; }
.integration-client > footer { justify-content: flex-end; margin-top: 12px; }
.kiosk-pin-editor { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(220px,1fr); align-items:end; gap:16px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.kiosk-pin-editor p { margin:4px 0 0; }
.kiosk-create-form { display:grid; grid-template-columns:minmax(240px,1.4fr) minmax(180px,1fr) minmax(180px,1fr) auto; align-items:end; gap:16px; }
.kiosk-create-form h2, .kiosk-create-form p { margin:0; }
.kiosk-create-form p { margin-top:4px; }
.kiosk-create-form .form-error { grid-column:1 / -1; }
.kiosk-list { display:grid; gap:10px; margin-top:14px; }
.kiosk-terminal { display:grid; grid-template-columns:minmax(180px,.8fr) auto minmax(300px,1.4fr) auto; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid var(--line); }
.kiosk-terminal h3, .kiosk-terminal p { margin:0; }
.kiosk-terminal p { margin-top:3px; color:var(--muted); }
.kiosk-terminal small { display:block; margin-top:5px; color:var(--muted); }
.kiosk-terminal.is-revoked { opacity:.68; grid-template-columns:1fr auto; }
.kiosk-url input { min-width:0; }
.vacation-expiry-list { display:grid; gap:10px; }
.vacation-expiry-card { border:1px solid var(--line); background:#fff; padding:14px; }
.vacation-expiry-card > summary { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; list-style:none; cursor:pointer; }
.vacation-expiry-card > summary::-webkit-details-marker { display:none; }
.vacation-expiry-card > summary .disclosure { align-self: center; }
.vacation-expiry-card[open] > summary .disclosure { transform: rotate(180deg); }
.vacation-expiry-card h3, .vacation-expiry-card p { margin:0; }
.vacation-expiry-card summary p { margin-top:4px; color:var(--muted); }
.vacation-expiry-detail { margin-top:14px; }
.expiry-balance { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:4px; text-align:right; }
.expiry-balance strong { font-size:23px; }.expiry-balance span { color:var(--muted); }.expiry-balance small { grid-column:1 / -1; color:var(--muted); }
.expiry-notices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.expiry-notice { min-height:48px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); }
.expiry-notice span:first-child { display:grid; }.expiry-notice small { margin-top:2px; color:var(--muted); }
.expiry-review-form { display:grid; grid-template-columns:minmax(240px,1fr) auto; align-items:end; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.expiry-review-form .form-error { grid-column:1 / -1; }.expiry-help { margin-top:12px !important; padding-top:10px; border-top:1px solid var(--line); }
.vacation-settlement-list { display:grid; gap:10px; }
.vacation-settlement-card { display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(360px,1.4fr); align-items:end; gap:18px; border:1px solid var(--line); padding:14px; background:#fff; }
.vacation-settlement-card h3, .vacation-settlement-card p { margin:0; }.vacation-settlement-card p { margin-top:4px; color:var(--muted); }
.settlement-balance { display:grid; text-align:right; }.settlement-balance strong { font-size:23px; }.settlement-balance span { color:var(--muted); font-size:12px; }
.vacation-settlement-card form { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; }.vacation-settlement-card .form-error { grid-column:1 / -1; }
.absence-type-form { display:grid; grid-template-columns:minmax(220px,1fr) 110px auto auto; gap:10px; align-items:end; }
.absence-type-options { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:8px 18px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.absence-type-form .form-error { grid-column:1 / -1; }.absence-types-list { margin-top:14px; display:grid; gap:6px; }
.absence-type-row { display:grid; grid-template-columns:18px minmax(180px,1fr) auto auto auto; align-items:center; gap:12px; border-top:1px solid var(--line); padding:10px 0; }
.absence-type-row i { width:14px; height:14px; background:var(--absence-color); }.absence-type-row small { color:var(--muted); }
.audit-integrity-result { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.audit-integrity-result small { color:var(--muted); font-family:ui-monospace,monospace; }
.employee-credentials-banner { position:relative; display:grid; grid-template-columns:minmax(220px,1fr) minmax(420px,2fr) auto; align-items:center; gap:18px; margin-bottom:12px; padding:14px 48px 14px 16px; border:1px solid var(--teal); background:var(--green-soft); }.employee-credentials-banner p { margin:4px 0 0; color:var(--muted); }.employee-credentials-banner dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }.employee-credentials-banner dl div { min-width:0; }.employee-credentials-banner dt { color:var(--muted); font-size:11px; }.employee-credentials-banner dd { margin:3px 0 0; font-family:ui-monospace,monospace; overflow-wrap:anywhere; }.employee-credentials-banner .icon-button { position:absolute; right:8px; top:8px; }
.email-delivery-status { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }.email-delivery-status strong { font-size:22px; }.email-delivery-status small { color:var(--muted); }
.totp-setup { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.totp-setup img { width: 150px; height: 150px; }
.totp-setup code { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.authenticator-header { align-items: flex-start !important; }
.authenticator-downloads { display: flex; flex: 0 0 auto; gap: 7px; }
.authenticator-downloads a { min-width: 108px; min-height: 43px; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #b9c4ca; border-radius: 4px; background: #fff; color: var(--ink); text-decoration: none; }
.authenticator-downloads a:hover { border-color: var(--teal); background: #f3f9f8; }
.authenticator-downloads svg { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; }
.authenticator-downloads span, .authenticator-downloads small { display: block; }
.authenticator-downloads span { font-size: 11px; font-weight: 800; line-height: 1.15; }
.authenticator-downloads small { margin-bottom: 2px; color: var(--muted); font-size: 8px; font-weight: 600; }
.recovery-codes { padding: 14px; background: #f2f5f6; border: 1px solid var(--line); font: 600 14px/1.7 monospace; column-count: 2; }

@media (max-width: 720px) {
  .credential-grid, .integration-mapping-form, .kiosk-pin-editor, .kiosk-create-form, .kiosk-terminal, .expiry-notices, .expiry-review-form, .vacation-settlement-card, .vacation-settlement-card form, .absence-type-form, .absence-type-row, .absence-type-options { grid-template-columns: 1fr; }
  .settlement-balance { text-align:left; }
  .employee-credentials-banner, .employee-credentials-banner dl { grid-template-columns:1fr; }
  .authenticator-header { align-items: stretch !important; flex-direction: column; }
  .authenticator-downloads { width: 100%; }
  .authenticator-downloads a { flex: 1; }
}

@media (max-width: 480px) {
  .support-session-banner { align-items: stretch; flex-direction: column; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading .row-actions { justify-content: flex-start; }
  .employee-directory-toolbar { grid-template-columns: 1fr; }
  .directory-search { grid-column: auto; }
  .employee-profile-head { grid-template-columns: 1fr; gap: 10px; }
  .employee-profile-actions { justify-content: space-between; }
  .employee-profile-tabs { overflow-x: auto; }
  .employee-profile-tabs .filter { flex: 0 0 auto; }
  .employee-statistics-filters { grid-template-columns: 1fr; }
  .employee-statistics-filters button { grid-column: auto; width: 100%; }
  .employee-checks-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-vacation-calendar { grid-template-columns: 1fr; }
  .calendar-toolbar h3 { min-width: 0; flex: 1; font-size: 15px; }
  .calendar-toolbar .secondary { display: none; }
  .calendar-day { min-height: 68px; }
  .calendar-event { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; color: transparent; }
  .calendar-event.vacation { background: #31809a; }.calendar-event.absence { background: var(--coral); }.calendar-event.pending { background: var(--amber); }.calendar-event.holiday { background: #6f8e14; }
  .preview-grid { grid-template-columns: 1fr; }
  .annual-leave-calendar { grid-template-columns: 1fr; }
  .date-inputs { grid-template-columns: 1fr; }
  .month-attendance .section-heading { align-items: flex-start; flex-direction: column; padding: 14px; }
  .attendance-month-toolbar { width: 100%; justify-content: space-between; }
  .attendance-period-control { flex: 1; grid-template-columns: 34px minmax(110px, 1fr) 34px; }
  .attendance-export-actions { padding-left: 9px; }
  .attendance-export-actions > span { display: none; }
  .month-switcher { width: 100%; justify-content: space-between; }
  .month-day summary { grid-template-columns: 58px 1fr 1fr 20px; padding: 0 10px; gap: 6px; }
  .month-day-events > div { grid-template-columns: 54px 1fr; }
  .month-day-events > div span { grid-column: 2; }
  .request-fields, .template-editor-fields, .calendar-admin-toolbar { grid-template-columns: 1fr; }
  .personal-calendar, .template-calendar { grid-template-columns: 1fr; }
  .calendar-template { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .calendar-template .row-actions { grid-column: 2 / -1; }
}

@media print {
  body.printing-export .sidebar,
  body.printing-export .topbar,
  body.printing-export .page-heading,
  body.printing-export .export-builder,
  body.printing-export .report-catalog,
  body.printing-export .view:not(.active) { display: none !important; }
  body.printing-export .app-shell,
  body.printing-export .workspace { display: block; padding: 0; }
  body.printing-export .view.active { display: block !important; }
  body.printing-export .export-preview-heading { margin: 0 0 14px; }
  body.printing-export .table-wrap { overflow: visible; border-color: #777; }
  body.printing-export table { font-size: 9pt; }
  body.printing-export th, body.printing-export td { padding: 6px; }
}