:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#132b3d;background:#f3f6fa;font-size:16px;line-height:1.5;--navy:#12334c;--blue:#126295;--muted:#536779;--border:#cfdbe5}*{box-sizing:border-box}body{margin:0}header{background:var(--navy);color:white;display:flex;justify-content:space-between;align-items:center;padding:20px max(24px,calc((100vw - 1240px)/2));gap:24px}.brand{display:flex;align-items:center;gap:14px}.brand strong{font-size:20px;display:block}.brand span:not(.mark){display:block;color:#c6dce9;font-size:14px}.mark{display:block;width:50px;height:46px;flex-shrink:0;object-fit:contain;filter:grayscale(1) invert(1) contrast(2);mix-blend-mode:screen}.header-right{display:flex;gap:16px;align-items:center}.environment{font-size:14px;border:1px solid #8cafc4;padding:4px 10px;border-radius:4px}main{max-width:1290px;margin:auto;padding:34px 24px}h1{font-size:32px;letter-spacing:-.7px;line-height:1.2;margin:0 0 10px}h2{font-size:20px;margin:0 0 10px}p{margin:8px 0 16px}.eyebrow{text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--blue);margin:0 0 12px}.muted,.section-heading p{color:var(--muted)}.title-row,.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:center}.date-control label{display:block;font-size:14px;margin-bottom:8px}.date-control div{display:flex;gap:8px}input{font:inherit;padding:10px 12px;background:white;border:1px solid #8ba3b6;border-radius:5px;min-width:0}#day{width:165px}button{font:inherit;font-weight:600;border:1px solid transparent;border-radius:5px;padding:10px 18px;background:var(--blue);color:white;cursor:pointer}button:disabled{opacity:.55;cursor:wait}button.quiet{background:white;border-color:var(--border);color:var(--navy)}header button.quiet{background:transparent;color:white;border-color:#7c9aae}button:hover{filter:brightness(.93)}button:focus-visible,input:focus-visible{outline:3px solid #e9a93d;outline-offset:3px}.notice{padding:12px 16px;border-left:4px solid #ad7620;background:#fff6e4;color:#674917;font-size:14px;margin:20px 0}nav{display:flex;gap:24px;border-bottom:1px solid var(--border);margin:26px 0 24px}.tab{background:transparent;color:var(--muted);border-radius:0;padding:12px 0;border-bottom:3px solid transparent}.tab.active{color:var(--blue);border-bottom-color:var(--blue)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 30px}.metric{background:white;border:1px solid var(--border);padding:18px 22px;border-radius:6px}.metric strong{display:block;font-size:32px;font-weight:650;font-variant-numeric:tabular-nums}.metric span{font-size:14px;color:var(--muted)}.section-heading{margin:24px 0 14px}.section-heading p{font-size:14px;margin-bottom:0}.table-wrap{overflow:auto;background:white;border:1px solid var(--border);border-radius:6px}table{border-collapse:collapse;width:100%;text-align:left;font-size:14px}th{background:#eaf0f6;font-weight:650;color:#344f63;white-space:nowrap}th,td{padding:14px 16px;border-bottom:1px solid #e1e8ef;vertical-align:top}tr:last-child td{border-bottom:0}.empty{border:1px dashed #b4c5d3;background:#fafcfe;padding:30px;border-radius:6px;color:var(--muted)}.empty strong{display:block;color:var(--navy);margin-bottom:6px}.split{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;margin:30px 0}.row-card{background:white;padding:14px 16px;border:1px solid var(--border);border-radius:5px;margin:8px 0;overflow-wrap:anywhere}.row-card span{display:block;color:var(--muted);font-size:14px}.badge{font-size:13px;display:inline-block;background:#e9f0f7;color:#25465e;border-radius:4px;padding:3px 7px;white-space:nowrap}.badge.warn{background:#fff0d5;color:#754c0a}.error{color:#a32727;font-weight:600}.login{max-width:490px;margin:70px auto;padding:30px;background:white;border:1px solid var(--border);border-radius:8px}.login h1{font-size:29px}.login label{display:block;margin:24px 0 8px}.login input{width:100%;margin-bottom:16px}.login button{width:100%}.note{max-width:320px;white-space:pre-wrap;overflow-wrap:anywhere}.mono{font-family:ui-monospace,monospace;font-size:13px}footer{margin-top:34px;border-top:1px solid var(--border);padding-top:18px;font-size:14px;color:var(--muted)}[hidden]{display:none!important}#report-list button{margin:4px 8px 4px 0}#report-detail{margin-top:26px}@media(max-width:760px){header{padding:16px}.brand strong{font-size:17px}main{padding:24px 16px}.title-row,.section-heading{align-items:stretch;flex-direction:column;gap:14px}.metrics{grid-template-columns:repeat(2,1fr);gap:10px}.metric{padding:14px}.split{grid-template-columns:1fr}.date-control div{width:100%}#day{flex:1;width:100px}nav{gap:20px}.tab{font-size:14px}.environment{font-size:12px}.header-right{gap:8px}h1{font-size:28px}.login{margin:20px auto;padding:22px}.mark{width:40px;height:40px}}

.scope-control{display:flex;align-items:center;gap:12px;margin:12px 0 16px}.scope-control label{font-size:14px}.scope-control select{font:inherit;border:1px solid #8ba3b6;padding:9px;border-radius:5px;background:white;max-width:100%;min-width:0}.scope-control select:focus-visible{outline:3px solid #e9a93d;outline-offset:3px}@media(max-width:760px){.scope-control{align-items:stretch;flex-direction:column;gap:6px}}

.schedule-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:800px;margin:20px 0}.schedule-fields label{display:flex;flex-direction:column;gap:8px}.saved-heading{margin-top:28px}#schedule-message{color:#25465e}#schedule-preview{margin-top:16px}.schedule-fields input{width:100%}nav{flex-wrap:wrap} @media(max-width:760px){.schedule-fields{grid-template-columns:1fr;gap:14px}nav{gap:8px 20px}}

.report-settings{background:white;border:1px solid var(--border);padding:24px;border-radius:6px;margin-bottom:24px}.report-settings label{display:block}.report-settings input{display:block;width:100%;margin:8px 0 16px}.report-actions,.report-dates{display:flex;gap:16px;flex-wrap:wrap}.report-dates label{flex:1;min-width:180px}#report-revisions button{margin:4px 8px 4px 0}@media(max-width:760px){nav{flex-wrap:wrap;gap:12px}.report-settings{padding:16px}}

.recipient-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}.recipient-row span{overflow-wrap:anywhere;min-width:0}

/* Checkpoint forms remain usable on a patrol phone as well as a desktop. */
#checkpoint-management form{margin:20px 0}
#checkpoint-management form>label{display:flex;flex-direction:column;gap:8px;margin:16px 0;max-width:800px}
#checkpoint-management input,#checkpoint-management select,#checkpoint-management textarea{width:100%;min-width:0;max-width:100%;font:inherit}
#checkpoint-management select,#checkpoint-management textarea{padding:10px 12px;border:1px solid #8ba3b6;border-radius:5px;background:white}
#checkpoint-management textarea{min-height:90px;resize:vertical}
#checkpoint-management .schedule-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
#checkpoint-management summary{cursor:pointer}
#checkpoint-management details details{border-top:1px solid var(--border);padding-top:16px}
#checkpoint-management select:focus-visible,#checkpoint-management textarea:focus-visible{outline:3px solid #e9a93d;outline-offset:3px}
@media(max-width:760px){header{flex-wrap:wrap;gap:16px}.header-right{flex-wrap:wrap;max-width:100%}#account-name{overflow-wrap:anywhere}#checkpoint-management .schedule-fields{grid-template-columns:minmax(0,1fr)}}

.phone-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:24px 24px 24px 44px;background:#f0f5f8;border-radius:12px;margin:24px 0}
.phone-steps li{padding:0 8px}.phone-steps span{display:block;margin-top:8px;line-height:1.6}
#add-phone-form{max-width:650px}#phone-id,#phone-access-key{width:100%;min-width:0;box-sizing:border-box}
.phone-key{border:2px solid #2d7160;background:#f2faf6;border-radius:12px;padding:24px;margin:24px 0;max-width:800px}
#phones .mono{overflow-wrap:anywhere}#phones .row-card button{justify-self:start;align-self:start}#phone-message{white-space:pre-wrap}
@media(max-width:760px){.phone-steps{grid-template-columns:1fr;gap:20px}.phone-key{padding:16px}}

#automatic-report-form label:has(input[type="checkbox"]) { display:flex; align-items:center; gap:.6rem; }
#automatic-report-enabled { width:auto; margin:0; flex:0 0 auto; }

#automatic-report-form .email-switch { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; cursor:pointer; min-height:44px; }
#automatic-report-form .email-switch input { position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.email-switch-track { display:inline-block; width:46px; height:26px; border-radius:16px; background:#657580; border:2px solid transparent; box-sizing:border-box; flex-shrink:0; }
.email-switch-track::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:white; margin:2px; transition:transform .15s; }
#automatic-report-enabled:checked + .email-switch-track { background:#176991; }
#automatic-report-enabled:checked + .email-switch-track::after { transform:translateX(20px); }
#automatic-report-enabled:focus-visible + .email-switch-track { outline:3px solid #176991; outline-offset:3px; }
#automatic-report-state { min-width:2rem; font-weight:600; }
#automatic-report-delivery { font-weight:600; }
@media(prefers-reduced-motion:reduce) { .email-switch-track::after { transition:none; } }

.calendar-field { display:flex; align-items:center; gap:6px; min-width:0; }
.calendar-field input[type="text"] { flex:1; min-width:0; }
.pdf-actions { margin:16px 0; }
.pdf-actions p { margin-top:8px; }
.print-brand { font-weight:700; font-size:20px; }
@media print {
 @page { size:A4; margin:15mm; }
 body.printing-report { background:white; color:black; font-size:10pt; }
 body.printing-report > header, body.printing-report main > :not(#workspace),
 body.printing-report #workspace > :not(#reports),
 body.printing-report #reports > :not(#report-detail),
 body.printing-report .pdf-actions { display:none!important; }
 body.printing-report main, body.printing-report #workspace, body.printing-report #reports, body.printing-report #report-detail { display:block!important; padding:0; margin:0; max-width:none; }
 body.printing-report .table-wrap { overflow:visible; border:0; }
 body.printing-report table { width:100%; table-layout:fixed; font-size:9pt; }
 body.printing-report th, body.printing-report td { white-space:normal; overflow-wrap:anywhere; padding:6px; }
 body.printing-report thead { display:table-header-group; }
 body.printing-report tr, body.printing-report .metric { break-inside:avoid; }
 body.printing-report h2, body.printing-report .print-brand { break-after:avoid; }
 body.printing-report .metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0; }
 body.printing-report .metric { padding:8px; }
 body.printing-report .metric strong { font-size:18pt; }
 body.printing-report .metric span { font-size:9pt; }
 body.printing-report .note { max-width:none; }
 body.printing-report .badge { white-space:normal; }
 body.printing-report .notice { color:black; background:white; border-left:2px solid #777; }
}

@media print { html:has(body.printing-report) { background:white; } }

.calendar-open { display:flex; align-items:center; justify-content:center; flex:0 0 46px; width:46px; height:46px; padding:8px; }
#date-calendar { position:fixed; margin:0; padding:12px; width:330px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow:auto; border:1px solid #8ba3b6; border-radius:10px; background:white; color:#132b3d; box-shadow:0 8px 30px #132b3d33; z-index:1000; }
.calendar-heading { display:flex; align-items:center; gap:5px; margin-bottom:10px; }
.calendar-heading strong { flex:1; text-align:center; }
.calendar-heading button { padding:4px 9px; font-size:22px; }
.calendar-days,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.calendar-days span { text-align:center; font-size:12px; color:#536779; padding:4px 0; }
.calendar-grid .calendar-date { padding:7px 0; min-height:36px; background:white; color:#132b3d; border:2px solid transparent; }
.calendar-grid .calendar-date:hover { background:#eaf0f6; }
.calendar-grid .calendar-date.today { border-color:#126295; font-weight:800; }
.calendar-grid .calendar-date.selected { background:#126295; color:white; }
.calendar-grid .calendar-date.today.selected { box-shadow:inset 0 0 0 2px white; }
.calendar-footer { margin-top:10px; display:flex; gap:8px; align-items:center; }
.calendar-footer button { padding:6px 8px; font-size:13px; }
.calendar-footer span { font-size:11px; color:#536779; }
@media print { #date-calendar { display:none!important; } }
/* Shift settings use the same full-size controls on desktop and phones. */
#shift-settings-form select,#plan-guard{width:100%;min-height:48px;padding:10px;font:inherit;border:1px solid #91a7ba;border-radius:5px;background:#fff;color:#17374a}
#shift-settings-form label:has(input[type=checkbox]){display:flex;flex-direction:row;align-items:center;gap:10px}
#hours-enabled{width:20px;height:20px;flex:0 0 20px;margin:0}
.hours-override-group{grid-column:1/-1;padding:16px;border:1px solid var(--border);border-radius:6px;background:#f3f6fa}
.hours-override-group .schedule-fields{margin:0}
.hours-choice{margin-top:12px}
.hours-choice label{min-height:44px;font-weight:600}
#hours-enabled-help{margin:0 0 0 30px;font-size:14px}
#site-selection{display:flex;flex-direction:column;gap:4px;font-size:12px;max-width:330px}
#site-selector{max-width:100%;font:inherit;font-size:14px;padding:8px;border-radius:4px;background:#fff;color:#17374a}
#tenancy form{margin:24px 0}#tenancy select{width:100%;min-height:46px;padding:8px;font:inherit;background:white;border:1px solid #91a7ba;border-radius:5px}
#tenancy input[type=checkbox]{width:20px;height:20px}#tenancy label:has(input[type=checkbox]){display:flex;flex-direction:row;align-items:center;gap:10px}
#tenancy summary{cursor:pointer}#tenancy .row-card{display:block}#tenancy .row-card form{padding:12px 0}
@media(max-width:600px){#site-selection{max-width:100%;width:100%}#site-selector{width:100%}}

/* Phone registration remains comfortable to use on smaller screens. */
#add-phone-form label{display:block;margin-bottom:8px}
#phone-guard{display:block;width:100%;min-height:44px;font:inherit;padding:10px;border:1px solid #9bb0bf;border-radius:6px;margin-bottom:16px}

/* Keep key actions clear of the input and its keyboard focus outline. */
.phone-key .report-actions{margin-top:20px;align-items:stretch;gap:12px}
.phone-key .report-actions button{margin:0}
@media(max-width:760px){.phone-key .report-actions{flex-direction:column}.phone-key .report-actions button{width:100%}}

/* Give account names the full form width without widening mobile screens. */
#user-access-form .schedule-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
#user-access-form .schedule-fields>label:first-child{grid-column:1 / -1;min-width:0}
#access-user{max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:760px){#user-access-form .schedule-fields{grid-template-columns:minmax(0,1fr)}}

.phone-key label[for="phone-access-key"]{display:block;margin-bottom:12px}

[data-phone-name] label{display:inline-flex;align-items:center;gap:12px;max-width:100%}
[data-phone-name] input{min-width:0;max-width:100%;box-sizing:border-box}

/* Site time zones need room for regional names on desktop and phones. */
.site-timezone-field{grid-column:1 / -1;min-width:0}
.site-timezone-field select{width:100%;min-width:0;max-width:100%}
#site-timezone{font-size:14px;overflow-wrap:anywhere}
.header-right{flex-wrap:wrap}

.agreement-panel{max-width:900px;margin:24px auto}.agreement-copy{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:white;border:1px solid var(--border);border-radius:8px;margin:16px 0}.agreement-check{display:flex;align-items:flex-start;gap:12px;margin:20px 0}.agreement-check input{flex:0 0 auto;margin-top:6px}#agreement-form button{margin:0 12px 12px 0}#agreement-receipts{margin-top:16px}
#client-create{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
#client-create h3{flex-basis:100%;margin-bottom:0}
#client-create label{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}
#client-create input{max-width:100%}
@media(max-width:760px){#client-create label{align-items:stretch;flex-direction:column;width:100%}}

.installation-email-copy{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;line-height:1.6;padding:16px;background:white;border:1px solid #cbd9e5;border-radius:8px}
#phone-installation-preview{margin-top:16px}

header .header-help,header .header-help:visited{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:2px solid white;border-radius:6px;background:white;color:#12334c;font-weight:700;text-decoration:none;white-space:nowrap}header .header-help:hover{background:#e6f2fa;border-color:#e6f2fa}header .header-help:focus-visible{outline:3px solid #ffbf47;outline-offset:3px}

.header-right{flex:1;min-width:0}.account-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-left:auto;flex-shrink:0}.account-actions button{white-space:nowrap}.account-actions:not(:has(button:not([hidden]))){display:none}@media(max-width:480px){.account-actions{width:100%;gap:8px;flex-wrap:wrap}}

#client-list form[data-client-edit]{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}#client-list form[data-client-edit]>label{display:flex;flex-direction:row;align-items:center;gap:12px;margin:0;min-width:0}#client-list form[data-client-edit] input,#client-list form[data-client-edit] select{margin:0;max-width:100%}#client-list form[data-client-edit] button{margin:0}@media(max-width:760px){#client-list form[data-client-edit]>label{flex-direction:column;align-items:stretch;width:100%}}

#client-list form[data-client-edit]>label{white-space:nowrap;flex-shrink:0}#client-list form[data-client-edit] select{width:auto;min-width:110px}

#logo-form .schedule-fields{grid-template-columns:minmax(0,1fr)}#logo-form .schedule-fields>label{min-width:0;width:100%}#logo-site{width:100%;max-width:100%;min-width:0}