:root {
  color-scheme: only light;
  --ink: #17212b;
  --muted: #667681;
  --line: #d9e0e3;
  --canvas: #edf1f3;
  --white: #ffffff;
  --teal: #178a80;
  --teal-dark: #0b6962;
  --teal-soft: #e7f4f1;
  --coral: #d95c48;
  --coral-soft: #fff0ed;
  --amber: #b87819;
  --amber-soft: #fff5df;
  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; }
html { width: 100%; min-height: 100%; overflow-x: hidden; }
body { width: 100%; min-width: 320px; max-width: 100%; min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--canvas); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
[hidden] { display: none !important; }

.simulator-layout { min-height: 100vh; display: grid; grid-template-columns: 280px auto; justify-content: center; gap: 48px; padding: 28px 56px; }
.simulator-panel { width: 280px; align-self: start; position: sticky; top: 28px; padding: 22px; border: 1px solid #cfd8dc; background: var(--white); box-shadow: 0 16px 40px rgb(23 33 43 / 8%); }
.simulator-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 34px; height: 34px; display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 6px; background: var(--teal); color: white; font-weight: 800; }
.simulator-brand strong, .simulator-brand small { display: block; }
.simulator-brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.simulator-panel section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.simulator-panel h2 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; }
.simulator-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.simulator-panel select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #b8c4ca; border-radius: 4px; background: white; color: var(--ink); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; }
.segmented button { min-height: 36px; border: 1px solid #b8c4ca; background: white; color: var(--ink); font-size: 12px; font-weight: 700; }
.segmented button + button { margin-left: -1px; }
.segmented button.selected { z-index: 1; border-color: var(--teal); background: var(--teal); color: white; }
.sim-detail { margin-top: 10px; padding: 10px; border-left: 3px solid var(--teal); background: #f3f7f7; color: var(--muted); font-size: 11px; line-height: 1.45; }
.switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink) !important; }
.switch-row span strong, .switch-row span small { display: block; }
.switch-row span small { margin-top: 3px; color: var(--muted); font-weight: 400; }
.switch-row input { position: absolute; opacity: 0; }
.switch-row i { position: relative; width: 42px; height: 23px; flex: 0 0 42px; border-radius: 20px; background: #aeb9bf; }
.switch-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: white; transition: transform .16s; }
.switch-row input:checked + i { background: var(--teal); }
.switch-row input:checked + i::after { transform: translateX(19px); }
.simulator-foot { display: flex; align-items: center; gap: 8px; padding-top: 18px; color: var(--muted); font-size: 11px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

.mobile-device { width: 390px; height: min(844px, calc(100vh - 56px)); align-self: start; position: relative; overflow: hidden; border: 1px solid #b8c2c7; border-radius: 8px; background: #f7f9fa; box-shadow: 0 20px 60px rgb(23 33 43 / 18%); }
.mobile-device.large { width: 430px; height: min(900px, calc(100vh - 56px)); }
.mobile-login, .mobile-shell { width: 100%; max-width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.mobile-login::-webkit-scrollbar, .mobile-shell::-webkit-scrollbar { display: none; }
.mobile-startup { height: 100%; display: grid; place-content: center; justify-items: center; gap: 22px; background: white; }
.startup-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.startup-spinner { width: 24px; height: 24px; border: 3px solid var(--line); border-right-color: var(--teal); border-radius: 50%; animation: attendance-spin .7s linear infinite; }
.mobile-startup small { color: var(--muted); font-size: 11px; }
.mobile-login { display: flex; flex-direction: column; padding: 34px 26px 24px; background: white; }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-copy { margin: clamp(42px, 7vh, 62px) 0 30px; }
.login-copy p { margin: 0 0 8px; color: var(--teal-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.login-copy h1 { max-width: 290px; margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: 0; }
.mobile-login form { display: grid; gap: 14px; }
.mobile-login label, #mobile-leave-form > label, .date-fields label, .absence-times label { display: grid; gap: 6px; color: #40515b; font-size: 11px; font-weight: 750; }
.mobile-login input, #mobile-leave-form input, #mobile-leave-form select, #mobile-leave-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #b8c4ca; border-radius: 4px; background: white; color: var(--ink); }
.login-version { margin-top: 24px; color: #8a979f; text-align: center; }
.mobile-lock { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 32px 26px; background: white; text-align: center; }
.mobile-lock .brand-mark { width: 64px; height: 64px; flex-basis: 64px; align-self: center; border-radius: 8px; font-size: 28px; }
.mobile-lock p { margin: 0 0 7px; color: var(--teal-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.mobile-lock h1 { margin: 0; font-size: 25px; }
.mobile-lock small { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.mobile-lock .primary { margin-top: 16px; }
.form-error { margin: 0; color: #af2f21; font-size: 12px; }
.primary, .secondary { min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; font-weight: 800; }
.primary { border-color: var(--teal); background: var(--teal); color: white; }
.primary:hover { background: var(--teal-dark); }
.secondary { border-color: #aebbc1; background: white; color: var(--ink); }
.full { width: 100%; }
.compact { min-height: 36px; padding: 0 13px; }

.mobile-shell { padding-bottom: 72px; background: #f7f9fa; }
.mobile-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); background: white; }
.mobile-header span, .mobile-header strong { display: block; }
.mobile-header > div > span { margin-bottom: 3px; color: var(--muted); font-size: 11px; text-transform: capitalize; }
.mobile-header > div > strong { font-size: 16px; }
.avatar-button { width: 40px; height: 40px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: var(--teal-soft); color: var(--teal-dark); font-size: 12px; font-weight: 850; }
.avatar-button > span { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: inherit; }
.avatar-button > span.has-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.mobile-header-actions { display: flex; align-items: center; gap: 9px; }
.mobile-notification-shortcut { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); }
.mobile-notification-shortcut svg { width: 18px; height: 18px; fill: currentColor; }
.mobile-notification-shortcut b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid white; border-radius: 9px; background: var(--coral); color: white; font-size: 9px; }
.offline-banner { padding: 9px 16px; background: var(--amber-soft); color: #79500f; text-align: center; font-size: 11px; font-weight: 750; }
.mobile-view { display: none; }
.mobile-view.active { display: block; }
.mobile-incident-alerts { border-bottom: 1px solid #efc9c1; background: #fff4f1; }
.mobile-incident-alert { min-height: 76px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #f2d9d3; }
.mobile-incident-alert:last-child { border-bottom: 0; }
.mobile-incident-symbol { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-size: 16px; font-weight: 900; }
.mobile-incident-alert strong, .mobile-incident-alert small { display: block; }
.mobile-incident-alert strong { font-size: 12px; }
.mobile-incident-alert small { margin-top: 4px; color: #765047; font-size: 10px; line-height: 1.4; }
.mobile-incident-alert button { min-height: 32px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }
.mobile-incident-alert .pending { color: #8a5a11; font-size: 9px; font-weight: 800; text-align: right; }
.attendance-status { padding: 24px 20px 22px; background: var(--ink); color: white; }
.attendance-status.state-working { background: #123c37; }
.attendance-status.state-break { background: #4c3b1f; }
.status-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 750; }
.attendance-status > strong { display: block; margin: 25px 0 2px; font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.attendance-status > small { color: #c4d0d4; }
.attendance-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 24px; }
.mobile-attendance-action { min-height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 4px; color: white; font-size: 13px; font-weight: 800; }
.mobile-attendance-action:only-child { grid-column: 1 / -1; }
.mobile-attendance-action.action-clock-in, .mobile-attendance-action.action-break-end { border-color: #1c9a8e; background: #1c9a8e; }
.mobile-attendance-action.action-clock-out { border-color: #c94f43; background: #c94f43; }
.mobile-attendance-action.action-break-start { border-color: #c17b16; background: #c17b16; }
.mobile-attendance-action.is-loading::before, #attendance-location-save.is-loading::before { width: 13px; height: 13px; display: inline-block; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; vertical-align: -2px; animation: attendance-spin .7s linear infinite; }
@keyframes attendance-spin { to { transform: rotate(360deg); } }
.day-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); background: white; }
.day-summary div { padding: 0 12px; border-right: 1px solid var(--line); }
.day-summary div:first-child { padding-left: 0; }
.day-summary div:last-child { padding-right: 0; border-right: 0; }
.day-summary dt { color: var(--muted); font-size: 10px; }
.day-summary dd { margin: 3px 0 0; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.day-summary dd.negative { color: var(--coral); }
.mobile-section { margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.section-title { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.section-title h2, .section-title p { margin: 0; }
.section-title h2 { font-size: 15px; }
.section-title p { margin-top: 3px; color: var(--muted); font-size: 10px; text-transform: capitalize; }
.icon-button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #edf2f3; color: var(--ink); font-size: 18px; }
.icon-button svg { width: 18px; height: 18px; display: block; margin: auto; fill: currentColor; }
.event-list { padding: 4px 20px 8px; }
.event-row { min-height: 61px; display: grid; grid-template-columns: 48px 12px minmax(0, 1fr); align-items: center; gap: 8px; position: relative; }
.event-row::before { content: ""; position: absolute; top: 0; bottom: 0; left: 62px; width: 1px; background: var(--line); }
.event-row:first-child::before { top: 50%; }
.event-row:last-child::before { bottom: 50%; }
.event-row time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.event-dot { z-index: 1; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.event-row.break .event-dot { background: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.event-row strong, .event-row small { display: block; }
.event-row strong { font-size: 12px; }
.event-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.empty-state { padding: 26px 20px; color: var(--muted); text-align: center; font-size: 12px; }

.view-heading { min-height: 92px; display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 20px; border-bottom: 1px solid var(--line); background: white; }
.view-heading p, .view-heading h1 { margin: 0; }
.view-heading p { margin-bottom: 4px; color: var(--teal-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.view-heading h1 { font-size: 23px; text-transform: capitalize; }
.mobile-calendar-heading { display: grid; grid-template: "label label" auto "month action" auto / minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 7px; }
.mobile-calendar-heading > p { grid-area: label; margin: 0; }
.mobile-month-switcher { min-width: 0; display: flex; align-items: center; gap: 3px; }
.mobile-calendar-heading .mobile-month-switcher { grid-area: month; }
.mobile-calendar-heading > .primary { grid-area: action; align-self: center; }
.mobile-month-switcher h1 { min-width: 0; flex: 1; overflow: hidden; font-size: 16px; text-align: center; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.mobile-month-switcher .icon-button { width: 28px; height: 28px; flex: 0 0 28px; }
.vacation-balance { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 20px; border-bottom: 1px solid var(--line); background: white; }
.vacation-balance div { border-right: 1px solid var(--line); text-align: center; }
.vacation-balance div:last-child { border-right: 0; }
.vacation-balance strong, .vacation-balance small { display: block; }
.vacation-balance strong { font-size: 20px; }
.vacation-balance small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.calendar-weekdays, .mobile-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: white; }
.calendar-weekdays { padding: 12px 14px 4px; color: var(--muted); font-size: 9px; font-weight: 800; text-align: center; }
.mobile-calendar-grid { padding: 5px 14px 15px; border-bottom: 1px solid var(--line); touch-action: none; user-select: none; }
.calendar-day { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; border: 0; background: white; color: var(--ink); font-size: 11px; }
.mobile-calendar-grid > :nth-child(7n + 6), .mobile-calendar-grid > :nth-child(7n) { background: #f1f4f5; }
.calendar-day.outside { color: #b7c0c5; }
.calendar-day.today { border-radius: 50%; background: var(--ink); color: white; font-weight: 800; }
.calendar-day.selected { z-index: 1; border-radius: 50%; background: #d9eeea; color: var(--teal-dark); font-weight: 800; box-shadow: inset 0 0 0 2px var(--teal); }
.calendar-day.selected.today { background: var(--ink); color: white; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--teal); }
.mobile-calendar-grid > .calendar-day.holiday { border-radius: 50%; background: var(--calendar-event-color, #6f8e14); color: var(--calendar-event-ink, white); font-weight: 800; }
.mobile-calendar-grid > .calendar-day.vacation { border-radius: 50%; background: #31809a; color: white; font-weight: 800; }
.mobile-calendar-grid > .calendar-day.absence { border-radius: 50%; background: #a65447; color: white; font-weight: 800; }
.mobile-calendar-grid > .calendar-day.pending { border-radius: 50%; background: #bd7410; color: white; font-weight: 800; }
.mobile-calendar-grid > .calendar-day.holiday.selected, .mobile-calendar-grid > .calendar-day.vacation.selected, .mobile-calendar-grid > .calendar-day.absence.selected, .mobile-calendar-grid > .calendar-day.pending.selected { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--teal); }
.mobile-calendar-day-detail { min-height: 70px; display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line); background: white; }
.mobile-calendar-day-detail[hidden] { display: none; }
.calendar-detail-swatch { width: 10px; height: 42px; border-radius: 2px; background: #6f8e14; }
.calendar-detail-swatch.vacation { background: #31809a; }
.calendar-detail-swatch.absence { background: #a65447; }
.calendar-detail-swatch.pending { background: #bd7410; }
.mobile-calendar-day-detail small, .mobile-calendar-day-detail strong { display: block; }
.mobile-calendar-day-detail small { margin-bottom: 2px; color: var(--muted); font-size: 9px; text-transform: capitalize; }
.mobile-calendar-day-detail strong { font-size: 12px; }
.mobile-calendar-day-detail p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.mobile-calendar-selection { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--teal-soft); }
.mobile-calendar-selection small, .mobile-calendar-selection strong { display: block; }
.mobile-calendar-selection small { margin-bottom: 2px; color: var(--teal-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.mobile-calendar-selection strong { font-size: 12px; }
.leave-row, .document-row { width: 100%; min-height: 68px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.leave-row:last-child, .document-row:last-child { border-bottom: 0; }
.leave-row strong, .leave-row small, .document-row strong, .document-row small { display: block; }
.leave-row strong, .document-row strong { font-size: 12px; }
.leave-row small, .document-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.status { padding: 5px 7px; border-radius: 3px; background: #edf1f2; color: var(--muted); font-size: 9px; font-weight: 800; }
.status.approved { background: var(--teal-soft); color: var(--teal-dark); }
.status.pending { background: var(--amber-soft); color: #79500f; }
.status.denied, .status.cancelled { background: var(--coral-soft); color: #9d3024; }
.document-list { margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.document-row { grid-template-columns: 38px minmax(0, 1fr); }
.document-row.pending { border-left: 3px solid var(--amber); }
.document-row.signed { border-left: 3px solid var(--teal); }
.document-row-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; }
.document-row-actions button { min-height: 32px; padding: 7px 10px; font-size: 10px; }
.mobile-notification-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 14px 20px 0; background: white; }
.mobile-notification-categories button { min-width: 0; min-height: 34px; padding: 0 5px; overflow: hidden; border: 1px solid #aebbc1; border-radius: 17px; background: white; color: var(--muted); font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.mobile-notification-categories button.selected { border-color: var(--teal); background: var(--teal); color: white; }
.mobile-notification-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 12px 20px 10px; background: white; }
.mobile-notification-tabs button { min-height: 38px; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.mobile-notification-tabs button.selected { border-bottom: 2px solid var(--teal); color: var(--ink); }
.mobile-notification-tabs b { min-width: 18px; display: inline-grid; place-items: center; margin-left: 4px; padding: 1px 5px; border-radius: 9px; background: var(--coral); color: white; font-size: 9px; }
.mobile-notification-tabs b:empty { display: none; }
.mobile-notification-list { margin: 0 0 20px; border-top: 1px solid var(--line); background: white; }
.mobile-notification-item { width: 100%; min-height: 88px; display: grid; grid-template-columns: 34px minmax(0,1fr) 48px; align-items: center; gap: 11px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); text-align: left; }
.mobile-notification-item:last-child { border-bottom: 0; }
.mobile-notification-item .notification-state { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid #aab6bc; border-radius: 50%; color: #7a8991; }
.mobile-notification-item .notification-state svg { width: 18px; height: 18px; fill: currentColor; }
.mobile-notification-item.unread .notification-state { width: 10px; height: 10px; justify-self: center; border: 0; background: var(--teal); }
.mobile-notification-item strong, .mobile-notification-item small { display: block; }
.mobile-notification-item strong { margin-top: 4px; font-size: 12px; }
.mobile-notification-item p { margin: 4px 0 0; color: #42505b; font-size: 11px; line-height: 1.35; }
.mobile-notification-item small { color: var(--muted); font-size: 10px; }
.mobile-notification-item em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 750; text-align: right; }
.mobile-notification-item.unread em { color: var(--teal-dark); }
.document-icon { width: 34px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #c9d2d6; background: #f4f7f8; color: var(--teal-dark); font-size: 10px; font-weight: 850; }
.document-action { color: var(--teal-dark); font-size: 11px; font-weight: 800; }
.profile-head { padding: 34px 20px 24px; border-bottom: 1px solid var(--line); background: white; text-align: center; }
.profile-head > span { width: 74px; height: 74px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--teal-soft); color: var(--teal-dark); font-size: 20px; font-weight: 850; }
.profile-head > span.has-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-head h1 { margin: 14px 0 4px; font-size: 21px; }
.profile-head p { margin: 0; color: var(--muted); font-size: 11px; }
.profile-photo-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.profile-photo-actions .secondary { min-height: 36px; font-size: 11px; }
.profile-photo-picker { display: inline-flex; align-items: center; cursor: pointer; }
.profile-photo-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.profile-head .profile-photo-locked { margin-top: 14px; color: var(--muted); }
.profile-details { margin: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.profile-details div { display: grid; grid-template-columns: 90px minmax(0, 1fr); padding: 14px 20px; border-bottom: 1px solid var(--line); }
.profile-details div:last-child { border-bottom: 0; }
.profile-details dt { color: var(--muted); font-size: 11px; }
.profile-details dd { margin: 0; overflow: hidden; font-size: 11px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.profile-security { margin: 12px 20px; border: 1px solid var(--line); background: white; }
.profile-security label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
.profile-security input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--teal); }
.profile-security strong, .profile-security small { display: block; }
.profile-security strong { font-size: 11px; }
.profile-security small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
#mobile-view-profile > .secondary { width: calc(100% - 40px); margin: 8px 20px; }
.mobile-nav { height: 68px; display: grid; grid-template-columns: repeat(4, 1fr); position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; border-top: 1px solid var(--line); background: rgb(255 255 255 / 97%); }
.mobile-nav button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; color: #6c7a83; font-size: 9px; font-weight: 700; }
.mobile-nav button span { height: 20px; font-size: 18px; line-height: 20px; }
.mobile-nav button span svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.mobile-nav button.active { color: var(--teal-dark); }
.mobile-nav.admin { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 370px) {
  .mobile-calendar-heading { gap: 8px; padding-right: 14px; padding-left: 14px; }
  .mobile-month-switcher h1 { font-size: 15px; }
  .mobile-calendar-heading .primary.compact { padding-right: 11px; padding-left: 11px; }
}
.team-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: white; }
.team-summary div { padding: 15px 8px; border-right: 1px solid var(--line); text-align: center; }
.team-summary div:last-child { border-right: 0; }
.team-summary strong, .team-summary small { display: block; }
.team-summary strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.team-summary small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.team-list { margin-top: 12px; border-top: 1px solid var(--line); background: white; }
.team-row { min-height: 72px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 20px; border-bottom: 1px solid var(--line); }
.team-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--teal-soft); color: var(--teal-dark); font-size: 11px; font-weight: 850; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-row strong, .team-row small { display: block; }
.team-row > div > strong { font-size: 12px; }
.team-row > div > small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.team-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.team-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #aeb9bf; }
.team-state.working::before { background: var(--teal); }
.team-state.break::before { background: var(--amber); }
.team-state.vacation::before, .team-state.absence::before { background: #31809a; }
.team-state.finished::before { background: #71808a; }
.mobile-toast { position: absolute; z-index: 9; right: 14px; bottom: 82px; left: 14px; padding: 12px 14px; border-radius: 4px; background: var(--ink); color: white; font-size: 11px; box-shadow: 0 8px 24px rgb(0 0 0 / 24%); }

body.native-app { padding: 0; background: #f7f9fa; touch-action: manipulation; }
body.native-app .simulator-layout { display: block; min-height: 100vh; padding: 0; }
body.native-app .simulator-panel { display: none; }
body.native-app .mobile-device, body.native-app .mobile-device.large { width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
body.native-app .mobile-login { padding: calc(28px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); }
body.native-app .login-copy { margin-top: clamp(36px, 6vh, 48px); }
body.native-app .mobile-header { min-height: calc(82px + env(safe-area-inset-top)); padding-top: calc(18px + env(safe-area-inset-top)); padding-right: calc(20px + env(safe-area-inset-right)); padding-left: calc(20px + env(safe-area-inset-left)); }
body.native-app .mobile-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
body.native-app .mobile-nav { height: calc(68px + env(safe-area-inset-bottom)); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
body.native-app .mobile-lock { padding: calc(32px + env(safe-area-inset-top)) calc(26px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(26px + env(safe-area-inset-left)); }

@media (max-height: 620px) {
  .login-copy, body.native-app .login-copy { margin-top: 32px; margin-bottom: 22px; }
  .login-version { margin-top: 18px; }
}

dialog { width: min(390px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 7px; box-shadow: 0 25px 80px rgb(0 0 0 / 32%); }
dialog::backdrop { background: rgb(23 33 43 / 48%); }
.attendance-confirm-dialog form, .attendance-location-dialog form, .missing-attendance-dialog form { display: grid; gap: 16px; padding: 20px; }
.attendance-confirm-dialog header, .attendance-location-dialog header, .missing-attendance-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.attendance-confirm-dialog header small, .attendance-confirm-dialog header h2, .attendance-location-dialog header small, .attendance-location-dialog header h2 { display: block; margin: 0; }
.attendance-confirm-dialog header small, .attendance-location-dialog header small { margin-bottom: 4px; color: var(--teal-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.attendance-confirm-dialog header h2, .attendance-location-dialog header h2 { font-size: 18px; }
.attendance-confirm-dialog p { margin: 0; color: #40515b; font-size: 13px; line-height: 1.55; }
.attendance-confirm-dialog footer, .attendance-location-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }
.missing-attendance-dialog header small, .missing-attendance-dialog header h2 { display: block; margin: 0; }
.missing-attendance-dialog header small { margin-bottom: 4px; color: var(--coral); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.missing-attendance-dialog header h2 { font-size: 18px; }
.missing-attendance-dialog form { gap: 14px; }
.missing-attendance-dialog footer { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding-top: 2px; }
.missing-attendance-dialog footer button { width: 100%; padding: 0 10px; }
.missing-attendance-summary { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; padding: 11px 12px; background: var(--coral-soft); }
.missing-attendance-summary > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-weight: 900; }
.missing-attendance-summary p { margin: 0; color: #713d34; font-size: 11px; line-height: 1.45; }
.missing-attendance-time-help { margin: -6px 0 0; color: #60727b; font-size: 10px; line-height: 1.45; }
#missing-attendance-form > label { min-width: 0; display: grid; gap: 6px; color: #40515b; font-size: 11px; font-weight: 750; }
#missing-attendance-form input, #missing-attendance-form textarea { width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #b8c4ca; border-radius: 4px; background: white; color: var(--ink); }
#missing-attendance-form textarea { min-height: 88px; resize: vertical; line-height: 1.4; }
#missing-attendance-form input:focus, #missing-attendance-form textarea:focus { border-color: var(--teal); outline: 2px solid rgb(23 138 128 / 16%); outline-offset: 0; }
.attendance-location-state { min-height: 52px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; }
.attendance-location-state strong, .attendance-location-state small { display: block; }
.attendance-location-state strong { font-size: 13px; }
.attendance-location-state small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.location-spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-right-color: var(--teal); border-radius: 50%; animation: attendance-spin .7s linear infinite; }
.location-spinner.ready { border: 0; background: var(--teal); animation: none; }
.location-spinner svg { width: 15px; height: 15px; display: none; margin: 3px; fill: currentColor; }
.location-spinner.ready .location-ready-icon { display: block; color: white; }
.location-spinner.failed { border: 0; background: var(--amber-soft); animation: none; }
.location-spinner.failed .location-failed-icon { display: block; color: var(--amber); }
.missing-attendance-summary svg, .mobile-incident-symbol svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.attendance-location-map { height: 230px; overflow: hidden; border: 1px solid var(--line); background: #e9eef0; }
.attendance-location-map iframe { width: 100%; height: calc(100% + 58px); display: block; border: 0; }
.location-map-empty { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.attendance-location-dialog .map-attribution { margin: -10px 0 0; color: var(--muted); font-size: 8px; text-align: right; }
.attendance-location-dialog .map-attribution a { color: inherit; }
body.native-app .attendance-location-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
#mobile-leave-form { display: grid; gap: 14px; padding: 20px; }
#mobile-leave-form header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#mobile-leave-form header small, #mobile-leave-form header h2 { display: block; margin: 0; }
#mobile-leave-form header small { margin-bottom: 4px; color: var(--teal-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
#mobile-leave-form header h2 { font-size: 18px; }
.date-fields, .absence-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vacation-period { padding: 12px; border-left: 3px solid var(--teal); background: var(--teal-soft); }
.vacation-period small, .vacation-period strong { display: block; }
.vacation-period small { margin-bottom: 4px; color: var(--teal-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.vacation-period strong { font-size: 13px; }
#mobile-leave-form footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
#mobile-signature-form { display: grid; gap: 14px; padding: 20px; }
#mobile-signature-form header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#mobile-signature-form header small, #mobile-signature-form header h2 { display: block; margin: 0; }
#mobile-signature-form header small { margin-bottom: 4px; color: var(--teal-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
#mobile-signature-form header h2 { font-size: 18px; }
.signature-document-name { margin: 0; font-size: 13px; font-weight: 800; }
.signature-copy { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
#mobile-handwritten-signature > label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; }
#mobile-signature-canvas { width: 100%; height: 132px; display: block; border: 1px solid #b9c5ca; background-color: #fff !important; color-scheme: only light; forced-color-adjust: none; touch-action: none; }
#mobile-clear-signature { margin-top: 8px; }
.signature-confirmation { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; font-size: 11px; line-height: 1.45; }
.signature-confirmation input { width: auto; min-height: 0; margin-top: 2px; }
#mobile-signature-form footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

@media (max-width: 760px) {
  body { background: #f7f9fa; }
  input, select, textarea { font-size: 16px; }
  .simulator-layout { display: block; min-height: 100vh; padding: 0; }
  .simulator-panel { display: none; }
  .mobile-device, .mobile-device.large { width: 100%; height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
}