/* White surfaces with the unchanged original TAGTIX logo asset. */

html { scrollbar-gutter: stable; }

:root {
  --accent: #087f91;
  --teal: #087586;
  --muted: #536b75;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  line-height: 1;
}
.brand img { display: block; width: 180px; height: auto; }
.brand small {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .25em;
  margin-top: 10px;
}
.topbar .brand img { width: 152px; }
.auth-art .brand img { width: min(300px, 100%); }
.terminal-top .brand img { width: 220px; max-width: 48vw; }
.topbar {
  background: #fff;
  color: #20383f;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px #09171e05;
}
.topbar .brand { color: #20383f; font-size: 21px; }
.topbar .location-select {
  width: 205px;
  min-width: 205px;
  max-width: 205px;
  flex: 0 0 205px;
  height: 42px;
  background: #f5f8f9;
  border: 1px solid #e0e9eb;
  color: #42616b;
}
.topbar .nav {
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b8c9d0 transparent;
}
.topbar .nav button {
  flex: 0 0 auto;
  height: 42px;
  padding: 10px 13px;
  border: 1px solid #e2e8ec;
  border-radius: 6px;
  background: #f5f7f8;
  box-shadow: 0 1px 2px #20383f08;
  font-size: 13px;
  font-weight: 500;
  color: #405863;
}
.topbar .nav button:hover {
  color: #087586;
  background: #eaf2f4;
  border-color: #c7dce2;
}
.topbar .nav .active {
  background: #e0f1f3;
  border-color: #98cbd2;
  color: #087586;
  box-shadow: inset 0 -2px #168c99, 0 1px 2px #20383f08;
}
.topbar .account { flex-shrink: 0; }
.topbar .location-switcher { flex: 0 0 205px; width: 205px; }
@media(max-width:1250px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 12px; gap: 12px; }
  .topbar .nav { order: 3; flex: 0 0 100%; width: 100%; height: 48px; }
  .topbar .account { margin-left: auto; }
}
@media(max-width:520px) {
  .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .topbar .brand { grid-column: 1; grid-row: 1; }
  .topbar .account { grid-column: 2; grid-row: 1; }
  .topbar .location-switcher { grid-column: 1 / -1; grid-row: 2; }
  .topbar .nav { grid-column: 1 / -1; grid-row: 3; }
}
.topbar .account small { color: #718b95; }
.topbar .account .avatar { background: #e8f3f5; color: #287385; border-color: #dcecee; }
.topbar .account .flat { color: #66808a; }
.topbar .account .flat:hover { background: #f2f6f7; }
.demo-banner { background: #f5fafb; border-color: #e3edef; color: #67818a; }

button.primary:hover { background: #066979; border-color: #066979; }
input:focus, select:focus, textarea:focus {
  border-color: #168f9e;
  outline: 2px solid #d2eff1;
}
button:focus-visible, a:focus-visible { outline: 2px solid #1595a6; }
.month { color: #14798c; }
.schedule-toolbar { height: auto; min-height: 89px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.schedule-toolbar .month { width: 136px; flex: 0 0 136px; font-size: 17px; font-weight: 650; line-height: 1.5; }
.schedule-toolbar .month button { font-size: 14px; font-weight: 500; padding-top: 4px; color: #425963; }
.week-strip { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.week-strip .week-chip { min-width: 82px; flex: 0 0 auto; padding: 7px 8px; font-size: 12px; white-space: nowrap; }
.week-chip > span { display: block; }
.template-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.template-option { padding: 18px; text-align: left; border: 1px solid #cfdfe4; background: #f9fcfc; }
.template-option:hover { background: #eef8f8; border-color: #168c99; }
.template-option > strong { display: block; font-size: 18px; color: #132d37; margin-bottom: 14px; }
.template-preview { display: grid; gap: 9px; }
.template-preview-row { display: grid; grid-template-columns: 32px 1fr; gap: 6px; font-size: 12px; line-height: 1.5; }
.template-preview-row > span:first-child { color: #617a85; }
.template-option-action { display: block; margin-top: 18px; font-weight: 600; font-size: 13px; color: #087586; }
@media(max-width:650px) {
  .template-options { grid-template-columns: 1fr; }
}
.week-chip.selected { color: #096f80; }
.week-chip.selected strong { border-color: #44acb9; background: #e9f9fa; }
.steps .current { color: #087688; }
.steps .current b { color: #087688; background: #e2f4f5; }
.tabs button.active { color: #087688; background: #e9f6f7; border-color: #bcdfe4; }
.card, .stat, .modal { border-radius: 8px; }
.page-title h1 { font-size: 23px; letter-spacing: -.5px; }

.auth-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-art {
  background: #f7fbfb;
  border-right: 1px solid #e2ecef;
  color: #20383f;
  align-items: center;
  justify-content: center;
  gap: 52px;
  min-width: 0;
}
.auth-art .brand { width: 100%; align-items: center; font-size: 30px; color: #20383f; }
.auth-art .brand small { color: #638995; }
.auth-art h1 { color: #20383f; }
.auth-art p { color: #627e89; }
.auth-art > small { color: #718e99; }
.auth-art .mini-calendar { width: 100%; margin: 0; text-align: center; }
.mini-calendar div { background: #fff; color: #65828d; border: 1px solid #e0e9ec; }
.auth-form-wrap { min-width: 0; }
.auth-form { max-width: 400px; }
.demo-logins { border-color: #c5dfe5; }
#toast { background: #fff; color: #244852; border: 1px solid #c5dfe5; }

.terminal-page {
  background: #fff;
  color: #20383f;
}
.terminal-top .brand { color: #20383f; }
.terminal-top .brand small { color: #638995; }
.terminal-top button { color: #68838d; border-color: #dce7eb; }
.terminal-top button:hover { background: #f4f8f9; }
.terminal-card h1 {
  color: #20383f;
  font-size: 22px;
  letter-spacing: -.3px;
}
.terminal-card p, .terminal-foot { color: #6c8590; }
.terminal-clock {
  font-size: 32px;
  letter-spacing: .04em;
  color: #087f91;
}
.pin-display {
  background: #fafcfc;
  color: #20383f;
  border: 1px solid #b3cfd6;
  border-radius: 8px;
  box-shadow: none;
}
.pin-display:focus { border-color: #168f9e; outline: 2px solid #d2eff1; }
.keypad { gap: 9px; }
.keypad button {
  font-size: 25px;
  background: #f7fafb;
  color: #365d68;
  border-color: #dce7eb;
  border-radius: 8px;
}
.keypad button:hover {
  background: #eaf6f8;
  border-color: #83c2cc;
  color: #087586;
}
.terminal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: 700;
}
.terminal-action-icon { width: 22px; height: 22px; flex: 0 0 22px; }
.terminal-actions .in { background: #087f91; color: #fff; }
.terminal-actions .in:hover { background: #066979; }
.terminal-actions .out { background: #fbe3d8; color: #853b27; border: 1px solid #e8b7a3; }
.terminal-actions .out:hover { background: #f6d2c2; border-color: #d99c82; }
.terminal-page .demo-logins { background: #f5f9fa; border-color: #c5dfe5; color: #66818c; }
.terminal-page .demo-logins button { background: #fff; color: #426a78; border-color: #ccdee4; }
.terminal-page .auth-form label { color: #587681; }
.terminal-page .auth-form > p { color: #6c8590; }
.terminal-page .auth-form .primary { background: #087f91; color: #fff; border-color: #087f91; }
.terminal-page .auth-form .primary:hover { background: #066979; }
.terminal-result { background: #edf8f2; color: #28735b; border: 1px solid #cfebdc; }
.terminal-result.error { background: #fff0f2; color: #b93c4e; border-color: #f5d6dc; }
.terminal-location-label { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0 4px; padding: 10px 15px; border: 1px solid #dce7eb; border-radius: 8px; background: #f5fafb; color: #253b45; font-size: 16px; }
.terminal-location-label .location-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.terminal-location-label strong { font-weight: 600; }
.terminal-code-locations { margin: 16px 0; }
.terminal-code-locations strong, .terminal-code-locations span { display: block; }
.terminal-code-locations span { margin-top: 6px; font-size: 15px; color: #183d48; font-weight: 600; }

.rights-group {
  border: 1px solid #dce8eb;
  border-radius: 8px;
  padding: 16px;
  margin: 18px 0;
  min-width: 0;
}
.rights-group legend { color: #375e6b; font-size: 12px; font-weight: 600; padding: 0 6px; }
.location-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
.rights-group .check-label { line-height: 1.5; align-items: flex-start; }
.rights-group input[type=checkbox] { flex: 0 0 16px; margin-top: 1px; }
.modal-body .rights-help { font-size: 11px; margin: 8px 0 0; line-height: 1.6; }
.all-location-option { padding-bottom: 12px; border-bottom: 1px solid #e6eef0; }
.location-checks input:disabled + span { color: #71858e; }
#director-preset { margin-top: 3px; color: #087586; background: #f3fafb; border-color: #c6e2e7; }
.manager-permissions { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.modal-body .manager-permissions .rights-help { grid-column: 1 / -1; margin: 0 0 12px; }

.plan-hour-pair { display: flex; align-items: baseline; white-space: nowrap; color: #253b45; font-size: 12px; line-height: 1.5; margin-top: 3px; }
.hour-separator { display: inline-block; border-left: 2px solid #253b45; height: 12px; width: 0; margin: 0 7px; font-size: 0; vertical-align: -1px; flex-shrink: 0; align-self: center; }
.plan-hour-pair b { font-weight: 600; font-variant-numeric: tabular-nums; color: #253b45; }
.staff-sidebar { width: 270px; max-height: calc(100vh - 190px); overflow-y: auto; }
.sidebar-heading { font-size: 13px; color: #243b44; }
.sidebar-search input { font-size: 13px; }
.staff-person { padding: 9px 18px; font-size: 14px; align-items: center; }
.staff-person .avatar { margin-top: 2px; width: 36px; height: 36px; font-size: 12px; }
.staff-person > span:last-child { min-width: 0; }
.staff-person .plan-hour-pair { font-size: 13px; margin-top: 2px; }
.staff-person small { margin-top: 0; }
.sidebar-bottom { font-size: 12px; color: #526773; }
.hours-name { cursor: help; border-radius: 3px; color: #000; font-size: 14px; font-weight: 500; line-height: 1.45; }
.hours-name:focus-visible { outline: 2px solid #69b7c1; outline-offset: 3px; }
.plan-tooltip { position: fixed; z-index: 500; width: 340px; max-width: calc(100vw - 24px); padding: 16px; background: #fff; border: 1px solid #bfd9df; border-radius: 8px; box-shadow: 0 8px 30px #173f4e29; color: #264b57; font-size: 14px; pointer-events: none; }
.plan-tooltip > strong { display: block; line-height: 1.5; color: #000; }
.plan-tooltip small { display: block; font-size: 12px; line-height: 1.5; color: #526773; }
.tooltip-sub { display: block; font-size: 12px; color: #526773; margin: 4px 0 12px; }
.tooltip-total { display: flex; justify-content: space-between; gap: 15px; margin: 8px 0; font-size: 14px; }
.tooltip-total b { font-variant-numeric: tabular-nums; color: #087586; }
.plan-tooltip > small { border-top: 1px solid #e5eef0; margin-top: 12px; padding-top: 10px; }
.tooltip-heading { display: block; font-size: 12px; margin: 14px 0 5px; }
.tooltip-person { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; color: #000; }
.tooltip-person small { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shift-detail-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; color: #43555e; margin-bottom: 20px; }
.shift-tabs { display: flex; border-bottom: 1px solid #dce8eb; margin: 0 -24px; padding: 0 24px; gap: 18px; }
.shift-tabs button { padding: 13px 0; border: 0; background: transparent; border-radius: 0; color: #4c646e; font-size: 14px; border-bottom: 2px solid transparent; }
.shift-tabs button[aria-selected=true] { color: #087586; border-bottom-color: #087f91; font-weight: 600; }
.shift-empty { padding: 30px 15px; text-align: center; font-size: 14px; color: #536b75; }
.person-actions { display: flex; gap: 7px; }
.person-actions button { white-space: nowrap; }
.person-actions button.return-assignment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 36px;
  padding: 7px;
  color: #087586;
  background: #eef7f8;
  border-color: #bddbe1;
}
.person-actions button.return-assignment:hover { background: #dceff2; border-color: #7eb8c3; }
.return-assignment svg { width: 20px; height: 20px; }
@media (max-width: 700px) {
  .person-actions button.return-assignment { min-width: 44px; min-height: 44px; }
}
button.accept { color: #168362; border-color: #bfdfd2; background: #eff9f4; }
.person-actions .accept, .person-actions .danger { min-width: 31px; }
.candidate-section { margin-top: 16px; border-top: 1px solid #dce8eb; padding-top: 22px; }
.candidate-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.candidate-heading h3 { color: #111; font-size: 15px; }
.candidate-search input { width: 100%; margin-top: 3px; }
.candidate-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.candidate-card { padding: 12px; border: 1px solid #e2ecef; border-radius: 6px; font-size: 14px; background: #fbfdfd; }
.candidate-card .row { align-items: flex-start; }
.candidate-card .row > div { min-width: 0; overflow-wrap: anywhere; }
.candidate-card button { margin-top: 13px; width: 100%; background: #fff; color: #365563; font-size: 13px; }
.candidate-card button.direct-assign { color: #076b7b; background: #edf8f9; border-color: #badce1; font-weight: 600; }
.candidate-card button.direct-assign:hover { background: #def1f3; }
.candidate-status { margin-top: 10px; }
.applicant-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 22px 0; }
.applicant-card { border: 1px solid #cce1e6; border-radius: 7px; padding: 12px; background: #f7fbfc; min-width: 0; }
.applicant-card .person-row { border: 0; padding: 0; align-items: flex-start; }
.applicant-card .person-name { min-width: 0; overflow-wrap: anywhere; }
.applicant-card .person-actions { margin-top: 3px; flex-shrink: 0; }
.applicant-card .plan-hour-pair, .candidate-card .plan-hour-pair { font-size: 13px; }
.modal-body .assignment-note { font-size: 12px; margin-top: 22px; margin-bottom: 0; color: #526773; }
.modal-body .swap-explanation { padding-top: 20px; margin-bottom: 0; }
.swap-count { font-size: 12px; color: #80501d; margin-top: 3px; }
.self-shift { display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 22px; border: 1px solid #dce8eb; border-radius: 7px; background: #f8fbfc; font-size: 12px; }
.self-shift .grow > span:last-child { display: block; color: #526773; font-size: 12px; margin-top: 7px; }

.modal.wide { width: 760px; }
.modal.shift-dialog { width: 900px; }
.modal-body p { color: #526773; font-size: 13px; }
.modal label { font-size: 13px; color: #43555e; }
.modal .badge { font-size: 12px; }
.person-row { font-size: 14px; padding: 14px 0; }
.person-actions button.small { font-size: 13px; }
.shift { padding: 2px 4px; min-height: 24px; line-height: 18px; }
.shift-time { align-items: center; height: 18px; }
.shift-time strong { font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.schedule-grid { grid-template-columns: 115px repeat(7,minmax(140px,1fr)); min-width: 1095px; }
.shift-time small { font-size: 10.5px; line-height: 18px; }
.shift-person { height: 18px; line-height: 18px; align-items: center; margin-top: 0; gap: 4px; }
.shift-person > .avatar { margin: 0; width: 14px; height: 14px; }
.shift-person-detail { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; }
.shift-person-detail .plan-hour-pair { margin: 0; font-size: 11px; line-height: 18px; flex-shrink: 0; }
.shift-person-detail .plan-hour-pair b { font-weight: 500; }
.shift-person-detail .hour-separator { height: 10px; margin: 0 4px; }
.shift-person .hours-name { display: block; flex: 1; min-width: 0; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift .applications, .shift .swap-count { font-size: 10.5px; line-height: 12px; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.applications { color: #5b542d; }
.shift.assigned .applications { color: #435b66; }
.grid-head strong { font-size: 13px; }
.grid-head span { color: #506773; }
.area-cell small { font-size: 12px; color: #526773; }
.plan-meta { font-size: 12px; color: #526773; }
.week-chip { font-size: 11px; color: #526773; }
.week-chip strong { font-size: 12px; }
.toolbar-group > small { font-size: 12px; color: #536b75; }
.steps { font-size: 12px; color: #536b75; }
.topbar .account .name { font-size: 13px; color: #000; }
.topbar .account small { font-size: 11px; color: #536b75; }

@media (max-width: 1350px) {
  .staff-sidebar { width: 240px; }
}
@media (max-width: 1000px) {
  .staff-sidebar { width: 225px; max-height: calc(100vh - 250px); }
}

@media (max-width: 680px) {
  .topbar .brand { font-size: 19px; }
  .page-title h1 { font-size: 18px; }
  .manager-permissions { grid-template-columns: 1fr; }
  .candidate-grid, .applicant-grid { grid-template-columns: 1fr; }
  .shift-tabs { gap: 14px; }
  .shift-tabs button { font-size: 13px; }
  .person-actions { flex-wrap: wrap; justify-content: flex-end; }
  .self-shift { flex-wrap: wrap; }
  .schedule-grid { grid-template-columns: 85px repeat(7,140px); min-width: 1065px; }
}
@media print {
  .schedule-grid { min-width: 0; grid-template-columns: 80px repeat(7,1fr); }
}


/* Subtle raised headers and direct day-level shift creation. */
.grid-head {
  position: relative;
  z-index: 1;
  background: linear-gradient(#f3f6f7, #eaf0f2);
  border-bottom-color: #ccd9de;
  box-shadow: 0 2px 3px #173f4e10;
}
.grid-head.today { background: linear-gradient(#edf8fb, #dfedf3); }
.area-cell {
  background: #edf2f4;
  border-right-color: #ccd9de;
  box-shadow: inset -3px 0 5px #173f4e08;
}
.add-mini { width: 20px; height: 20px; flex-shrink: 0; font-size: 16px; color: #537a88; background: #dce8ec; }
.add-mini:hover { background: #c7dfe5; color: #087586; }
.day-column { position: relative; container-type: inline-size; }
@container (max-width: 170px) {
  .shift-person > .avatar { display: none; }
  .shift-person-detail { gap: 4px; }
}
.day-column.can-add { cursor: pointer; }
.day-add {
  position: absolute;
  top: 3px;
  left: 4px;
  right: 4px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #527987;
  opacity: 0;
  transition: opacity .12s, background .12s;
}
.day-add span { display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-size: 15px; line-height: 1; }
.day-column:hover .day-add, .day-column:focus-within .day-add { opacity: 1; }
.day-add:hover, .day-add:focus-visible { background: #e3eef1; color: #087586; }
@media (hover: none) { .day-add { opacity: 1; } }
@media print { .day-add { display: none; } }


.shift-time-select { min-height: 44px; font-size: 16px; font-variant-numeric: tabular-nums; cursor: pointer; }
input[type=date], input[type=datetime-local] { cursor: pointer; }
.workflow-actions { display: flex; align-items: center; gap: 8px; }
.workflow-actions button { font-size: 12px; white-space: nowrap; }
.workflow:has(.workflow-actions #reopen-applications) { flex-wrap: wrap; justify-content: center; }
.release-notifications { margin-top: 22px; }
.release-notifications h3 { font-size: 15px; margin-bottom: 8px; color: #172f39; }
.notification-list { display: grid; gap: 10px; margin-top: 20px; }
.notification-card { background: #fff; border: 1px solid #dce8eb; border-radius: 7px; overflow: hidden; }
.notification-card summary { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 14px; }
.notification-card summary::before { content: '›'; font-size: 22px; color: #087586; }
.notification-card[open] summary::before { transform: rotate(90deg); }
.notification-card summary:focus-visible { outline: 2px solid #168f9e; outline-offset: -3px; }
.notification-person { min-width: 160px; font-size: 13px; }
.notification-person strong { color: #000; display: block; }
.notification-person small { display: block; font-size: 12px; color: #526773; overflow-wrap: anywhere; margin-top: 3px; }
.notification-subject { flex: 1; color: #243b44; font-size: 13px; line-height: 1.5; }
.notification-content { border-top: 1px solid #e3ecef; padding: 18px; background: #fbfdfd; }
.notification-envelope { display: grid; gap: 5px; color: #526773; font-size: 12px; margin-bottom: 18px; }
.notification-content pre { font: 14px/1.7 "Segoe UI", sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: #172f39; }
.time-page { max-width: 1060px; margin-left: 0; margin-right: auto; padding: 28px 30px; }
.time-page .page-title { margin-bottom: 24px; }
.time-page .page-title h1 { font-size: 23px; }
.time-actions { flex-wrap: wrap; gap: 10px; }
.time-actions button { font-size: 14px; min-height: 40px; }
.terminal-link { font-size: 13px; color: #526773; padding: 10px 5px; }
.time-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 18px; padding: 18px; background: #f0f5f7; border: 1px solid #dce6ea; border-radius: 7px; }
.time-toolbar label, .time-range-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: #425963; margin: 0; }
.time-toolbar select { min-height: 42px; font-size: 14px; color: #152d38; cursor: pointer; margin: 0; min-width: 130px; }
.time-range-controls { display: flex; gap: 0; }
.time-range-controls button { min-height: 42px; border-radius: 0; font-size: 14px; color: #152d38; margin: 0; }
.time-range-controls button:first-child { border-radius: 5px 0 0 5px; border-right: 0; font-size: 24px; padding: 0 13px; }
.time-range-controls button:last-child { border-radius: 0 5px 5px 0; border-left: 0; font-size: 24px; padding: 0 13px; }
#time-range { min-width: 235px; font-variant-numeric: tabular-nums; }
.time-employee-field { min-width: 235px; }
.time-reset { min-height: 42px; margin-left: auto; font-size: 13px; }
.time-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 23px 0 18px; font-size: 14px; color: #526773; }
.time-summary strong { font-size: 23px; color: #0a6e7b; margin-right: 7px; font-variant-numeric: tabular-nums; }
.time-table-wrap { width: fit-content; max-width: 100%; }
.time-table { width: 810px; table-layout: fixed; font-size: 14px; }
.time-table.is-cross-site { width: 950px; }
.time-col-person { width: 220px; }
.time-col-location { width: 140px; }
.time-col-date { width: 155px; }
.time-col-duration { width: 120px; }
.time-col-actions { width: 160px; }
.time-table th { background: #eef3f6; font-size: 13px; padding: 13px 16px; color: #344e5c; white-space: nowrap; }
.time-table td { padding: 12px 16px; vertical-align: middle; }
.time-person { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: #000; }
.time-person strong { overflow: hidden; text-overflow: ellipsis; }
.time-person .avatar { flex: 0 0 32px; width: 32px; height: 32px; margin: 0; font-size: 11px; }
.time-day { display: block; color: #526773; font-size: 12px; margin-bottom: 5px; white-space: nowrap; }
.time-table td strong { color: #111; font-weight: 600; }
.time-duration { white-space: nowrap; font-variant-numeric: tabular-nums; }
.time-table-actions { text-align: left; }
.time-running { color: #986300; font-size: 13px; }
.time-footnote { color: #526773; font-size: 13px; margin-top: 18px; }
.time-open-note { margin-bottom: 18px; font-size: 13px; }
.time-list-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #526773; margin-bottom: 14px; }
.time-list-tools > div { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.deleted-times-toggle { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; font-size: 13px; cursor: pointer; }
.deleted-times-toggle input { margin: 0; width: 16px; height: 16px; accent-color: #087f8c; }
.time-click-row { cursor: pointer; transition: background .1s; }
.time-click-row:hover { background: #f0f8fa; }
.time-click-row:focus-visible { outline: 2px solid #087f8c; outline-offset: -2px; background: #eaf6f8; }
.time-deleted { background: #f5f5f6; }
.time-deleted .time-duration { text-decoration: line-through; color: #6a747b; }
.deleted-time-label { display: block; font-size: 11px; color: #785264; margin: 5px 0 0 42px; }
.modal.time-detail-dialog { width: min(900px,calc(100vw - 32px)); max-width: 900px; }
.time-detail-person { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.time-detail-person > div { flex: 1; }
.time-detail-person strong { display: block; color: #111; font-size: 17px; }
.time-detail-person span:not(.avatar):not(.badge) { display: block; color: #526773; margin-top: 4px; font-size: 13px; }
.time-detail-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 20px 0 28px; }
.time-detail-values > div { padding: 15px; border-radius: 7px; background: #eff5f7; font-size: 13px; color: #344e5c; }
.time-detail-values small { display: block; margin-bottom: 10px; font-size: 12px; color: #526773; }
.time-detail-values strong { display: block; font-size: 18px; color: #152d38; margin-top: 7px; }
.time-history-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.time-history-heading h3 { margin: 0; font-size: 16px; color: #152d38; }
.history-empty { padding: 18px; border: 1px dashed #d4e0e4; border-radius: 6px; color: #526773; font-size: 13px; line-height: 1.7; }
.audit-timeline { list-style: none; padding: 0 0 0 20px; margin: 0; }
.audit-item { position: relative; padding: 0 0 25px 22px; border-left: 2px solid #dce8ec; }
.audit-item::before { content: ''; position: absolute; top: 3px; left: -6px; width: 10px; height: 10px; border-radius: 50%; background: #168c99; box-shadow: 0 0 0 4px #f5fafb; }
.audit-item:last-child { padding-bottom: 5px; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #526773; font-size: 12px; line-height: 1.5; }
.audit-meta span { color: #285966; font-weight: 600; }
.audit-item h3 { font-size: 14px; line-height: 1.6; color: #172f39; margin: 7px 0; font-weight: 600; }
.audit-lines p { font-size: 13px; line-height: 1.7; color: #425963; margin: 3px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-change-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid #dce6e9; border-radius: 5px; }
.audit-changes { width: 100%; font-size: 12px; border-collapse: collapse; margin: 0; }
.audit-changes th, .audit-changes td { padding: 9px 12px; text-align: left; line-height: 1.6; white-space: normal; min-width: 100px; }
.audit-changes thead th { background: #eff5f7; color: #425963; font-size: 12px; }
.audit-changes tbody th { color: #425963; font-weight: 600; }
.audit-changes td:last-child { color: #075f6b; background: #f2faf9; }
.audit-time-link { margin-top: 8px; padding-left: 0; }
.audit-page { max-width: 1100px; }
.audit-card { padding: 25px 20px; }
.audit-load-more { display: block; margin: 20px auto; }
.time-confirm-summary { display: grid; gap: 7px; background: #eff5f7; border-radius: 7px; padding: 15px; color: #425963; font-size: 13px; }
.time-confirm-summary strong { color: #111; font-size: 16px; }
@media(max-width:600px) {
  .time-detail-values { grid-template-columns: 1fr; }
  .time-detail-values > div { padding: 12px; }
  .time-detail-values small { margin-bottom: 4px; }
  .time-detail-values strong { font-size: 16px; }
  .audit-timeline { padding-left: 7px; }
  .audit-item { padding-left: 15px; }
  .audit-card { padding: 18px 12px; }
}
@media(max-width:900px) {
  .time-page { padding: 20px 15px; }
  .time-page .page-title { align-items: flex-start; gap: 15px; flex-wrap: wrap; }
  .time-reset { margin-left: 0; }
}
@media(max-width:520px) {
  .time-toolbar { padding: 12px; gap: 12px; }
  .time-range-field { width: 100%; order: -1; }
  .time-range-controls { width: 100%; }
  #time-range { flex: 1; min-width: 0; font-size: 13px; }
  .time-employee-field { min-width: 170px; flex: 1; }
}
@media(max-width:680px) {
  .notification-card summary { flex-wrap: wrap; gap: 9px; }
  .notification-person { min-width: 0; flex: 1; }
  .notification-subject { order: 3; flex-basis: 100%; }
  .workflow-actions { flex-wrap: wrap; justify-content: center; }
}

.week-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

/* Open applications on the week selector, independently of the selected filter. */
.week-chip .week-number { position: relative; }
.week-application-badge {
  position: absolute; top: -8px; right: -10px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 5px;
  border: 2px solid #fff; border-radius: 12px;
  background: #087df0; color: #fff; box-shadow: 0 1px 3px #12384a22;
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.mobile-week-switch .mobile-week-number { position: relative; display: inline-block; }
.mobile-week-switch .week-application-badge {
  display: inline-flex; right: -26px; top: -6px; margin: 0;
  font-size: 11px; color: #fff;
}


/* Password visibility controls share the input's size on desktop and mobile. */
.password-input { position: relative; display: block; width: 100%; min-width: 0; }
.password-input > input { width: 100%; min-height: 40px; padding-right: 48px; }
.password-input > input::-ms-reveal { display: none; }
.password-input > .password-visibility-toggle {
  position: absolute; top: 1px; right: 2px; bottom: 1px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; min-width: 40px; padding: 0; margin: 0;
  border: 0; border-radius: 5px; background: transparent; color: #526773;
}
.password-input > .password-visibility-toggle:hover { background: #edf5f6; color: #087586; }
.password-input > .password-visibility-toggle:focus-visible { outline: 2px solid #087586; outline-offset: -3px; }
.password-visibility-toggle svg { display: block; pointer-events: none; }

/* Current calendar week stays distinct from the week selected for viewing. */
.week-strip .week-chip,.location-week-nav .location-week{background:#f0f3f5;border:1px solid #e0e7eb;border-radius:9px;transition:background .15s,border-color .15s;color:#435762}
.week-strip .week-chip:hover,.location-week-nav .location-week:hover{background:#e6ecef;border-color:#c2d1d8}
.week-strip .week-chip.is-current,.location-week-nav .location-week.is-current{background:#e3f2ef;border-color:#9cc7bd;color:#164e48}
.week-strip .week-chip.is-current:hover,.location-week-nav .location-week.is-current:hover{background:#d7eae5}
.week-strip .week-chip.selected,.location-week-nav .location-week.selected{border-color:#176b7b;box-shadow:inset 0 0 0 1px #176b7b;background:#e7eef3;color:#153d4a}
.week-strip .week-chip.selected.is-current,.location-week-nav .location-week.selected.is-current{background:#d4ebe4}
.week-chip.is-current .week-number::after,.location-week.is-current b::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#1a7862;margin-left:4px;vertical-align:middle}
.week-strip .week-chip:focus-visible,.location-week-nav .location-week:focus-visible{outline:2px solid #176b7b;outline-offset:3px}
.month #today{white-space:nowrap;font-size:13px}
.template-option-buttons,.template-card-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.template-option-buttons button{flex:1;white-space:nowrap;padding:10px 12px;font-size:13px}
article.template-option:hover{background:#f9fcfc;border-color:#cfdfe4}
.mobile-week-switch.is-current{background:#e7f3ef;border-color:#a9cfc3}