/* Secure Access: presentation only. Keep operational status colours and capture behaviour. */
body[data-sa-surface] {
  --sa-ink: #0b2741;
  --sa-muted: #526779;
  --sa-page: #f3f8fc;
  --sa-card: #fbfdff;
  --sa-line: #cfdee9;
  --sa-accent: #005ea8;
  --sa-highlight: #00c8ef;
  --page: var(--sa-page);
  --ink: var(--sa-ink);
  --muted: var(--sa-muted);
  --line: var(--sa-line);
  --brand: var(--sa-accent);
  margin: 0;
  background: var(--sa-page);
  color: var(--sa-ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body[data-sa-surface] :is(h1, .welcome h1, .cc-welcome h1, .company-heading h1) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.14;
}
body[data-sa-surface] :is(.eyebrow, .cc-eyebrow) { color: var(--sa-accent); letter-spacing: .15em; font-size: 11px; }
body[data-sa-surface] :is(button, .button, .primary, .secondary, summary) { min-height: 44px; }
body[data-sa-surface] :is(input, select, textarea) { font-size: 16px; }
body[data-sa-surface] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #0077ba; outline-offset: 4px;
}
body[data-sa-surface] :is(.card, .quick, .metric, .auth-card, .company-panel, .company-site-picker, .company-nav-group) {
  border-radius: 5px; box-shadow: none;
}
body[data-sa-surface] :is(.identity, .brand, .company-brand, .workspace-brand, .brand-lockup) img {
  border-radius: 3px; padding: 3px;
}
body[data-sa-surface] :is(.auth-card, .auth-form, .card, .quick) { background: var(--sa-card); }
body[data-sa-surface] :is(.auth-brand, .entry-intro) {
  background: #062a4b; color: #f3f8fc; border-color: var(--sa-line);
}
body[data-sa-surface] .auth-brand :is(h1, p, .eyebrow, .quiet, .entry-site, .entry-site span) { color: #f3f8fc; }
body[data-sa-surface] .auth-brand .eyebrow { color: var(--sa-highlight); }
body[data-sa-surface] .auth-role-note { background: #ffffff08; border: 1px solid #00c8ef40; border-radius: 3px; }
body[data-sa-surface] :is(.auth-form h2, .auth-form label, .auth-form .sub) { color: var(--sa-ink); }
body[data-sa-surface] :is(.auth-form .primary, .auth-form .signin-submit) {
  background: var(--sa-accent); border-color: var(--sa-accent); color: #fff; border-radius: 4px;
}

/* Management keeps long forms on a light reading surface; navigation anchors the command identity. */
body[data-sa-surface="command"] { --sa-accent: #005ea8; }
body[data-sa-surface="command"] :is(.workspace-sidebar, .company-sidebar, .header, .company-header, .topbar) {
  background: #061b2f; color: #edf7ff; border-color: #2b353d;
}
body[data-sa-surface="command"] :is(.workspace-sidebar, .company-sidebar, .header, .company-header, .topbar) :is(a, strong, summary) {
  color: #edf7ff;
}
body[data-sa-surface="command"] :is(.workspace-sidebar, .company-sidebar, .header, .company-header, .topbar) :is(small, .company-access-note, .workspace-signature, .workspace-location, .workspace-estate) { color: #b9c1c4; }
body[data-sa-surface="command"] :is(.workspace-sidebar, .company-sidebar) :is(a.active, a[aria-current], a:hover) {
  background: #00c8ef15; color: #83e2f7; border-color: #197da3;
}
body[data-sa-surface="command"] :is(.company-role, .company-nav-group, .company-shortcuts a) {
  background: #0b2943; color: #edf7ff; border-color: #2b353d; border-radius: 4px;
}
body[data-sa-surface="command"] :is(.company-role span, .company-menu>summary) { color: #bac3c8; }
body[data-sa-surface="command"] :is(.company-daily-actions a, .company-site-picker, .company-metrics article) {
  background: var(--sa-card); border-color: var(--sa-line); color: var(--sa-ink); border-radius: 5px;
}
body[data-sa-surface="command"] .company-brand small { font-size: 11px; }
body[data-sa-surface="command"] :is(.workspace-brand, .company-brand) { font-weight: 500; letter-spacing: .04em; }
body[data-sa-surface="command"] :is(.profile>summary, .profile>div, .security-menu>summary, .security-menu-panel, .lf-menu>div, .nav-menu-panel) { background: #fbfdff; color: #173b56; border-color: #91acbf; }
body[data-sa-surface="command"] :is(.profile>div, .security-menu-panel, .lf-menu>div, .nav-menu-panel) :is(a, strong, summary, small) { color: #173b56; }
body[data-sa-surface="command"] .profile>summary small { color: #526779; }

/* The live map has its own fully dark canvas. Leaflet tiles and alert colours are untouched. */
body[data-sa-surface="map"] {
  --sa-page: #04101c; --sa-card: #082139; --sa-ink: #edf7ff;
  --sa-muted: #b2bbc2; --sa-line: #2b353d; --sa-accent: #00c8ef;
  --accent: var(--sa-accent);
}
body[data-sa-surface="map"] > header { background: #061b2f; border-color: var(--sa-line); padding-block: 24px; }
body[data-sa-surface="map"] .brand-mark {
  background: transparent; color: var(--sa-highlight); border: 1px solid #1683aa;
  font-family: Georgia, serif; font-weight: 400; font-size: 24px; border-radius: 3px;
}
body[data-sa-surface="map"] header h1 { font-size: clamp(25px, 2.2vw, 35px); }
body[data-sa-surface="map"] header h1 span { font-family: "Segoe UI", sans-serif; font-size: 13px; letter-spacing: .03em; color: var(--sa-muted); }
body[data-sa-surface="map"] :is(.metrics article, .map-column, .workspace>aside, .ops-panel, .ops-section, .timeline, .detail) {
  background: var(--sa-card); border-color: var(--sa-line); border-radius: 4px; box-shadow: none;
}
body[data-sa-surface="map"] .metrics article { padding: 20px; }
body[data-sa-surface="map"] .metrics strong { font-family: Georgia, serif; font-weight: 400; font-size: 35px; color: var(--sa-ink); }
body[data-sa-surface="map"] :is(.metrics small, .metrics article>span, .preview-note, .map-footer) { color: var(--sa-muted); }
body[data-sa-surface="map"] :is(button, .geo-nav a, select, input:not([type=checkbox])) {
  background: #0b2c49; color: var(--sa-ink); border: 1px solid #46525b; border-radius: 3px;
}
body[data-sa-surface="map"] :is(button, .geo-nav a):hover { border-color: var(--sa-highlight); }
body[data-sa-surface="map"] :is(.map-toolbar, .panel-heading, .layers, .map-footer, .timeline, .ops-section) { border-color: var(--sa-line); }
body[data-sa-surface="map"] :is(.map-toolbar h2, .panel-heading h2, .ops-section h2) { font-size: 20px; font-weight: 500; }
body[data-sa-surface="map"] .map-pin.selected { outline-color: var(--sa-highlight); }
body[data-sa-surface="map"] .geo-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 12px; font-size: 13px; text-decoration: none; }
body[data-sa-surface="map"] .geo-nav button { font-size: 13px; }
body[data-sa-surface="map"] a:focus-visible { outline-color: var(--sa-highlight); }

/* Officer workspace: large duty actions, legible evidence and uninterrupted capture controls. */
body[data-sa-surface="security"] {
  --sa-page: #041626; --sa-card: #09253e; --sa-ink: #edf7ff;
  --sa-muted: #b2bdc5; --sa-line: #33414c; --sa-accent: #00c8ef;
  color-scheme: dark;
}
body[data-sa-surface="security"] :is(.top, .header, .topbar, .bottom-nav, .security-bottom-nav) {
  background: #061b2f; color: var(--sa-ink); border-color: var(--sa-line);
}
body[data-sa-surface="security"] :is(.brand, .identity, .site-lockup, .brand-lockup) { color: var(--sa-ink); }
body[data-sa-surface="security"] .brand { font-size: 14px; letter-spacing: .04em; font-weight: 600; }
body[data-sa-surface="security"] :is(.brand small, .identity small, .site-lockup small) { color: var(--sa-muted); }
body[data-sa-surface="security"] :is(.text-button, a) { color: var(--sa-accent); }
body[data-sa-surface="security"] :is(.card, .site-card, .officer-assignment, .action, .officer-task-group, .jump-links a, .balances>div) {
  background: var(--sa-card); color: var(--sa-ink); border: 1px solid var(--sa-line); border-radius: 5px;
}
body[data-sa-surface="security"] .welcome h1 { font-size: clamp(32px, 5vw, 46px); }
body[data-sa-surface="security"] .welcome { margin: 12px 0 26px; }
body[data-sa-surface="security"] .officer-assignment { border-left: 2px solid var(--sa-highlight); padding: 16px 18px; }
body[data-sa-surface="security"] .officer-assignment strong { font-size: 17px; }
body[data-sa-surface="security"] :is(.officer-assignment span, .action small, .officer-task-group>summary small, .field small, .muted, .privacy, .person p) { color: var(--sa-muted); }
body[data-sa-surface="security"] .officer-primary-actions { gap: 12px; }
body[data-sa-surface="security"] .officer-primary-actions .action {
  background: linear-gradient(135deg, #103650, #09253e); border: 1px solid var(--sa-line); padding: 20px 18px;
}
body[data-sa-surface="security"] .officer-primary-actions .action strong { color: var(--sa-ink); font-size: 17px; }
body[data-sa-surface="security"] .officer-primary-actions .action small { color: var(--sa-muted); font-size: 14px; }
body[data-sa-surface="security"] .officer-primary-actions .action[href="/management/attendance/clock"] {
  background: linear-gradient(120deg, #58daf5, #00b9ed); border-color: #42d3f3; color: #05243c;
}
body[data-sa-surface="security"] .officer-primary-actions .action[href="/management/attendance/clock"] :is(strong, small) { color: #05243c; }
body[data-sa-surface="security"] .action:hover { border-color: var(--sa-highlight); }
body[data-sa-surface="security"] :is(h2, h3, .section-title, .officer-task-group>summary) { color: var(--sa-ink); }
body[data-sa-surface="security"] h2 { font-size: 20px; font-weight: 500; }
body[data-sa-surface="security"] :is(.record, .details>div, #attendance-receipt) { border-color: var(--sa-line); }
body[data-sa-surface="security"] :is(.pill, .avatar) { background: #143a55; color: #91e7f8; }
body[data-sa-surface="security"] :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background: #061b2f; color: var(--sa-ink); border: 1px solid #667680; border-radius: 4px; color-scheme: dark;
}
body[data-sa-surface="security"] input::placeholder, body[data-sa-surface="security"] textarea::placeholder { color: #a8b2ba; opacity: 1; }
body[data-sa-surface="security"] :is(button.primary, a.primary, .auth-form .primary) { background: var(--sa-highlight); border-color: var(--sa-highlight); color: #05243c; border-radius: 4px; }
body[data-sa-surface="security"] :is(.secondary, .password-toggle) { background: #10314b; color: var(--sa-ink); border: 1px solid #667680; border-radius: 4px; }
body[data-sa-surface="security"] .bottom-nav a { color: #c1c9cf; border-radius: 3px; }
body[data-sa-surface="security"] .bottom-nav a[aria-current] { background: #00c8ef15; color: #83e2f7; box-shadow: inset 0 2px #00c8ef; }
body[data-sa-surface="security"] .sos-button { background: #b52738; border-radius: 4px; color: #fff; }
body[data-sa-surface="security"] :is(.notice.error, .signin-error, .alert.error) { background: #391d25; color: #ffdae0; border: 1px solid #af6572; }
body[data-sa-surface="security"] .notice.success { background: #142f29; color: #c1ecdc; border-color: #527e70; }
body[data-sa-surface="security"] .auth-brand { background: #061b2f; }
body[data-sa-surface="security"] :is(.skip, .skip-to-content) { background: #58daf5; color: #05243c; }
body[data-sa-surface="security"] :is(a, button, input, select, textarea, summary):focus-visible { outline-color: #63ddf6; }
body[data-sa-surface="security"] :is(.login-frame, .login-masthead, .login-panel, .login-card, .login-foot) { background: #09253e; color: #edf7ff; border-color: #33414c; }
body[data-sa-surface="security"] .login-frame { border-top: 2px solid #00c8ef; border-radius: 5px; box-shadow: none; }
body[data-sa-surface="security"] .login-showcase { background: linear-gradient(135deg, #103650, #061b2f); color: #edf7ff; }
body[data-sa-surface="security"] .login-masthead>span { color: #00c8ef; }
body[data-sa-surface="security"] .login-masthead img { width: 64px; height: 64px; object-fit: contain; padding: 4px; border-radius: 3px; }
body[data-sa-surface="security"] .login-showcase :is(h1, h1 span, .showcase-grid b) { color: #edf7ff; }
body[data-sa-surface="security"] :is(.login-showcase p, .showcase-grid small, .login-card p, .security-note span, .showcase-feature span) { color: #bac5ce; }
body[data-sa-surface="security"] :is(.login-card label, .security-note b, .showcase-feature b) { color: #edf7ff; }
body[data-sa-surface="security"] :is(.showcase-grid, .security-note) { border-color: #46525b; }
body[data-sa-surface="security"] .showcase-feature { background: #09253e; border-color: #46525b; border-left-color: #00c8ef; }
body[data-sa-surface="security"] .login-card button[type=submit] { background: #00c8ef; color: #05243c; border-color: #00c8ef; border-radius: 4px; }
body[data-sa-surface="security"] .security-password-toggle { background: #10314b; color: #edf7ff; border-color: #667680; border-radius: 4px; }

/* Resident services: cool white, deep navy and the SIMI blue/cyan palette. */
body[data-sa-surface="resident"], body[data-sa-surface="resident"] .cc-page { --cc-red: #005ea8; }
body[data-sa-surface="resident"] .header { background: #fbfdff; border-top: 2px solid #00a8e0; border-bottom: 1px solid var(--sa-line); box-shadow: none; }
body[data-sa-surface="resident"] :is(.identity, .identity strong, h1, h2) { color: #062a4b; }
body[data-sa-surface="resident"] :is(.identity small, .edition, .cc-private-note) { color: var(--sa-muted); }
body[data-sa-surface="resident"] :is(a, .topnav a) { color: #005ea8; }
body[data-sa-surface="resident"] .cc-welcome { padding-block: 20px 32px; background: transparent; border: 0; border-bottom: 1px solid var(--sa-line); border-radius: 0; }
body[data-sa-surface="resident"] .cc-welcome h1 { font-size: clamp(38px, 4vw, 57px); }
body[data-sa-surface="resident"] .cc-welcome p { color: var(--sa-muted); }
body[data-sa-surface="resident"] .cc-welcome .cc-eyebrow { color: #005f96; }
body[data-sa-surface="resident"] :is(.cc-card, .cc-service, .cc-inbox-note, .cc-resident-conversation, .cc-resident-alert) {
  background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: 5px; box-shadow: none;
}
body[data-sa-surface="resident"] .cc-service { padding: 26px; transition: border-color .15s; }
body[data-sa-surface="resident"] .cc-service:hover { transform: none; border-color: #228bb8; }
body[data-sa-surface="resident"] .cc-service:first-child { background: linear-gradient(125deg, #062a4b, #005ea8); color: #f3f8fc; border-color: #005ea8; }
body[data-sa-surface="resident"] .cc-service:first-child :is(h2, p, b, .cc-symbol) { color: #f3f8fc; }
body[data-sa-surface="resident"] .cc-service h2 { font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
body[data-sa-surface="resident"] .cc-service p { color: #526779; }
body[data-sa-surface="resident"] .cc-symbol { color: #006aa5; background: transparent; }
body[data-sa-surface="resident"] :is(.cc-tag, .cc-event-icon) { background: #e7f3fb; color: #245271; border-radius: 3px; }
body[data-sa-surface="resident"] :is(.cc-card-heading, .cc-event) { border-color: #d5e6f0; }
body[data-sa-surface="resident"] :is(.cc-card-heading h2, .cc-event strong) { color: #0b3457; }
body[data-sa-surface="resident"] :is(.cc-empty, .cc-event small, .cc-card-heading p) { color: #526779; }
body[data-sa-surface="resident"] :is(.cc-resident-nav, .bottomnav) { background: #fbfdff; border-color: var(--sa-line); box-shadow: 0 -3px 18px #062a4b06; }
body[data-sa-surface="resident"] :is(.cc-resident-nav, .bottomnav) a { color: #4b657b; }
body[data-sa-surface="resident"] :is(.cc-resident-nav, .bottomnav) a[aria-current] { color: #062a4b!important; background: #e1f1fc; border-radius: 3px; }
body[data-sa-surface="resident"] :is(.cc-event-copy>small, .cc-event-copy>time, .cc-event>.cc-tag) { font-size: 12px; }
body[data-sa-surface="resident"] .cc-event-copy>strong { font-size: 15px; }
body[data-sa-surface="resident"] .cc-service p { font-size: 14px; }
body[data-sa-surface="resident"] .cc-service>b { font-size: 14px; }
body[data-sa-surface="resident"] :is(button.primary, a.primary, button.wide) { background: #005ea8; border-color: #005ea8; color: #fff; border-radius: 4px; }
body[data-sa-surface="resident"] .password-toggle { background: #e7f3fb; color: #005ea8; border-color: #8aabc1; }
body[data-sa-surface="resident"] :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { background: #ffffff; color: #133b59; border-color: #8aabc1; border-radius: 4px; }

@media (max-width: 600px) {
  body[data-sa-surface="security"] .shell { padding: 24px 18px; }
  body[data-sa-surface="security"] .top { gap: 8px; padding: 14px; flex-wrap: wrap; }
  body[data-sa-surface="security"] .brand { gap: 8px; }
  body[data-sa-surface="security"] .officer-primary-actions .action { padding: 16px 13px; min-height: 109px; }
  body[data-sa-surface="security"] .officer-primary-actions .action strong { font-size: 16px; }
  body[data-sa-surface="security"] .officer-primary-actions .action small { font-size: 13px; }
  body[data-sa-surface="security"] .officer-primary-actions .action[href="/management/attendance/clock"] { grid-column: 1 / -1; min-height: 82px; }
  body[data-sa-surface="resident"] .cc-welcome { padding-block: 12px 24px; }
  body[data-sa-surface="resident"] .cc-service { padding: 22px; }
  body[data-sa-surface="map"] > header { padding: 18px; }
  body[data-sa-surface="map"] .metrics article { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-sa-surface] :is(.action, .cc-service) { transition: none; }
}
@media print {
  body[data-sa-surface] { background: #fff; color: #111; color-scheme: light; --sa-ink: #111; --sa-muted: #444; --sa-card: #fff; --sa-line: #aaa; --sa-accent: #111; }
  body[data-sa-surface] :is(.card, .record, .officer-assignment, .cc-card, .metrics article) { background: #fff; color: #111; box-shadow: none; }
}