* { box-sizing: border-box; }
.roster-scroll { max-height: 70vh; overscroll-behavior: contain; }
.roster-scroll .roster-grid { width: max-content; min-width: 100%; table-layout: auto; font-size: .9rem; }
.roster-scroll .roster-grid th, .roster-scroll .roster-grid td { min-width: 84px; height: 66px; padding: .65rem .8rem; text-align: center; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.roster-scroll .roster-grid thead th { position: sticky; top: 0; z-index: 2; background: #edf2f8; }
.roster-scroll .roster-grid th:first-child { position: sticky; left: 0; min-width: 230px; text-align: left; z-index: 3; background: #fff; }
.roster-scroll .roster-grid thead th:first-child { z-index: 4; background: #edf2f8; }
.roster-scroll .roster-grid tbody tr:nth-child(even) th, .roster-scroll .roster-grid tbody tr:nth-child(even) td { background: #f5f7fa; }
.roster-number, .roster-name { display: block; white-space: nowrap; }
.roster-duty { display: block; white-space: nowrap; font-size: .82rem; margin-top: .25rem; color: #30425f; }
.roster-day .roster-duty { white-space: normal; overflow-wrap: anywhere; }
.roster-number { color: #60708a; font-size: .75rem; }
.roster-name { font-weight: 650; }
.roster-value { display: inline-block; white-space: nowrap; font-weight: 650; font-variant-numeric: tabular-nums; padding: .25rem .35rem; border-radius: 5px; }
.roster-shift .roster-value { background: #e7eff9; color: #24476c; }
.roster-absence .roster-value { background: #e8f2eb; color: #27573c; }
.roster-missing .roster-value { background: #fff0d6; color: #704610; }
.roster-lock { font-size: .7rem; margin-left: .2rem; }
.roster-legend, .roster-legend details > div { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; }
.roster-legend { margin: 1rem 0; }
.roster-legend summary { cursor: pointer; }
.roster-personal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.roster-personal .roster-day { min-width: 0; margin: 1rem 0 0; }
.roster-time { white-space: nowrap; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .roster-personal { display: block; } .roster-scroll .roster-grid th:first-child { min-width: 180px; } }
body { margin: 0; color: #17263c; background: #f4f6fa; font: 16px/1.55 system-ui, -apple-system, sans-serif; }
a { color: var(--brand-primary); text-underline-offset: 3px; }
button, .button { min-height: 44px; padding: .7rem 1rem; border: 1px solid #d6deeb; border-radius: .65rem; background: white; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; color: #17263c; }
button:disabled { opacity: .6; cursor: wait; }
.primary { background: var(--brand-primary); color: var(--brand-text, white); border-color: var(--brand-primary); }
.quiet { background: transparent; }
.full { width: 100%; }
:focus-visible { outline: 3px solid #d89412; outline-offset: 3px; }
.skip-link { position: absolute; top: -100px; z-index: 20; }
.skip-link:focus { top: 1rem; background: white; padding: 1rem; }
.desktop-navigation { position: fixed; inset: 0 auto 0 0; width: 248px; background: white; border-right: 1px solid #e1e7f0; overflow-y: auto; }
.desktop-navigation .brand { margin-bottom: 2rem; }
.desktop-navigation > a { display: block; min-height: 44px; padding: .7rem; color: #30425f; text-decoration: none; border-radius: .5rem; }
a[aria-current="page"] { background: #e8eef8; font-weight: 700; }
.management main { margin-left: 248px; max-width: none; padding: 1.5rem 2rem; }
.brand span { font-weight: 700; overflow-wrap: anywhere; }
.account-bar, .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.account-bar { color: #56657b; font-size: .9rem; }
.account-bar form { margin: 0; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; margin: .25rem 0 1rem; }
h2 { font-size: 1.2rem; margin: .25rem 0 .8rem; }
.eyebrow { color: #60708a; font-size: .8rem; font-weight: 700; letter-spacing: .07em; }
.muted { color: #64738a; margin: .25rem 0; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.metric, .panel, .shift-card { background: white; border: 1px solid #e1e7f0; border-radius: .9rem; padding: 1.25rem; }
.metric span { font-size: .9rem; color: #586980; }
.metric strong { display: block; font-size: 2rem; line-height: 1.4; }
.panel { margin: 1rem 0; }
.shift-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #edf0f5; }
.officer main { max-width: 680px; padding: 1rem; margin: auto; }
.officer .desktop-navigation { display: none; }
.officer .mobile-header { display: block; background: white; }
.shift-time { font-size: 2rem; font-weight: 700; margin: .5rem 0; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.bottom-navigation { display: none; }
.notice { border-radius: .5rem; padding: 1rem; background: #e8eef8; }
.success { background: #e0f3e8; color: #165d38; }
.warning, .error { background: #fff0d6; color: #704610; }
[hidden] { display: none !important; }
.login-brand { text-align: center; }
.login-brand .brand { justify-content: center; }
body:has(.login-panel) main { margin: auto; max-width: 440px; }
.login-panel { background: white; border: 1px solid #e1e7f0; padding: 1.5rem; border-radius: 1rem; }
form label { display: block; margin-bottom: .35rem; font-weight: 600; }
input:not([type="hidden"]):not([type="checkbox"]), select, textarea { width: 100%; max-width: 100%; min-height: 44px; border: 1px solid #b9c5d6; border-radius: .45rem; padding: .6rem; font: inherit; }
.errorlist { color: #9b2727; padding-left: 1.25rem; }
.narrow { max-width: 600px; margin: auto; }
.announcement-body { overflow-wrap: anywhere; }
.filters { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; }
.filters > div { flex: 1; min-width: 150px; }
.responsive-table { width: 100%; border-collapse: collapse; background: white; }
.responsive-table th, .responsive-table td { padding: .9rem; text-align: left; border-bottom: 1px solid #e1e7f0; overflow-wrap: anywhere; }
.actions, .pagination { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin: 1rem 0; }
.info-grid { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr; gap: .65rem 1rem; }
.info-grid dt { color: #586980; }
.info-grid dd { margin: 0; overflow-wrap: anywhere; }
.badge { display: inline-block; padding: .2rem .5rem; border-radius: .4rem; background: #edf0f5; }
.badge.valid { background: #e0f3e8; color: #165d38; }
.badge.soon, .badge.expired { background: #fff0d6; color: #704610; }
.profile-layout { max-width: 680px; margin: auto; }
@media (max-width: 767px) {
  .filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; }
  .responsive-table thead { display: none; }
  .responsive-table tr { border: 1px solid #e1e7f0; border-radius: .75rem; margin-bottom: 1rem; padding: .5rem; }
  .responsive-table td { border: 0; padding: .5rem; }
  .responsive-table td[data-label]::before { content: attr(data-label) ': '; display: block; font-size: .8rem; color: #586980; }
  .info-grid { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .info-grid dd { margin-bottom: .7rem; }
}
.mobile-menu summary, .more-menu summary { min-height: 44px; padding: .7rem; cursor: pointer; }
.mobile-menu a { display: block; min-height: 44px; padding: .7rem; }
.more-menu { position: relative; flex: 1; font-size: .78rem; }
.more-menu > div { position: absolute; bottom: 100%; right: 0; width: 180px; background: white; border: 1px solid #dde4ef; }
.more-menu a { display: block; }
@media (max-width: 767px) {
  .desktop-navigation { display: none; }
  .mobile-header { display: block; background: white; border-bottom: 1px solid #e1e7f0; }
  .management main, .officer main { margin: 0; padding: 1rem 1rem calc(7rem + env(safe-area-inset-bottom)); }
  .bottom-navigation { display: flex; flex-wrap: wrap; position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid #dde4ef; padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
  .bottom-navigation a { flex: 1; min-width: 60px; min-height: 52px; text-align: center; padding: .7rem .35rem; font-size: .78rem; text-decoration: none; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .metric { padding: .9rem; }
  .account-bar { align-items: start; }
  .page-heading { align-items: start; }
}
/* Phones use a vertical list rather than a wide planning calendar. */
.planning-calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:20px 0}
.planning-calendar.daily{grid-template-columns:1fr}
.calendar-day{min-width:0;border:1px solid #dce2e8;border-radius:12px;padding:12px;background:#f7f9fc}
.calendar-day h2{font-size:1rem;margin:0 0 12px}
.calendar-day .shift-card{padding:14px;margin-bottom:12px}
.planning-calendar .shift-card p{overflow-wrap:anywhere}
@media(max-width:767px){.planning-calendar{display:block}.calendar-day{margin-bottom:12px}}
.photo-item{padding:1rem;margin:1rem 0;border:1px solid #dce2e8;border-radius:12px;background:white;overflow-wrap:anywhere}
.photo-item img{display:block;max-width:100%;max-height:70vh;object-fit:contain;margin:1rem 0}
.incident-timeline{padding-left:1.4rem;overflow-wrap:anywhere}.incident-timeline li{margin-bottom:1rem}
.severity{font-weight:700;border-radius:6px;padding:3px 7px}.severity.high{background:#ffe6e6;color:#8b2020}.severity.medium{background:#fff0cb;color:#704500}.severity.low{background:#e3f1ea;color:#165735}
.announcement-card,.announcement-body{overflow-wrap:anywhere;min-width:0}.announcement-body{white-space:normal;line-height:1.65}.announcement-card{max-width:100%;margin-bottom:1.2rem}.announcement-card fieldset{min-width:0;margin-bottom:1rem}.announcement-card input[type=checkbox]{width:auto}.announcement-card ul{padding-left:1.3rem}#employee-results button{display:block;max-width:100%;overflow-wrap:anywhere;margin:.4rem 0}
.table-scroll{max-width:100%;overflow-x:auto;margin:1rem 0}.table-scroll table{border-collapse:collapse;min-width:100%}.table-scroll th,.table-scroll td{padding:.65rem;border:1px solid #dce2e8;white-space:nowrap}.table-scroll th:first-child{position:sticky;left:0;background:#f4f7fb;z-index:1}.card{border:1px solid #dce2e8;padding:1rem;border-radius:12px;margin:1rem 0;background:#fff;overflow-wrap:anywhere}.notification-slot{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.85rem}.account-bar{flex-wrap:wrap}code{overflow-wrap:anywhere}