/* Shared presentation only. Keep page layouts, visibility and interaction hooks intact. */
:root {
  --navy: #1e2849;
  --blue: #1b75bc;
  --ink: #2b2b2b;
  --muted: #607481;
  --line: #dfe7ed;
  --wash: #f9f6f0;
  --teal: #d3e4f0;
  --green: #20745e;
  --workspace-navy: var(--navy);
  --workspace-navy-dark: #1e2849;
  --workspace-bg: var(--wash);
  --workspace-line: var(--line);
  --workspace-muted: var(--muted);
  --ui-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-radius: 12px;
  --ui-shadow: 0 3px 16px #18384a08;
}

body, body.app-shell, body.call-screen .call-workspace {
  font-family: var(--ui-font);
  color: var(--ink);
  line-height: 1.6;
}
body { background: var(--wash); }
h1, h2, h3, strong, .brand { font-family: inherit; }
h1, h2, h3 { color: var(--navy); }
button, input, select, textarea { font-family: inherit; }
a { color: var(--blue); }
:focus-visible, .app-shell :focus-visible {
  outline: 3px solid #e5a823;
  outline-offset: 3px;
}
.muted, .app-shell .muted, .auth-note { color: var(--muted); }
.eyebrow, .app-shell .eyebrow { color: var(--green); font-weight: 700; letter-spacing: .12em; }

/* Public navigation and the signed-in workspace share the same identity. */
.top { min-height: 76px; box-shadow: 0 2px 12px #18384a04; }
.brand-mark, .sidebar-mark {
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff30;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font: 800 23px var(--ui-font);
}
.sidebar-mark { background: #ffffff12; }
.sidebar-nav a[aria-current=page] { background: #ffffff10; border-left-color: #e5a823; }
.role-badge { background: #ffffff12; color: #d9e9f3; border-radius: 5px; padding: 3px 7px; }
.sidebar-brand small, .nav-group>p { color: #adc3d3; }
.app-topbar { box-shadow: 0 2px 12px #18384a04; }
.workspace-label, .account-link { color: var(--muted); }
.mfa-indicator { border-radius: 7px; }

/* Consistent surfaces across dashboards, accounts, reports and management. */
.form-card, .panel, .stat, .service-card, .chat-card, .incident-card,
.app-shell .form-card, .app-shell .panel, .app-shell .stat,
.app-shell .incident-card, .citizen-action {
  border-color: var(--line);
  border-radius: var(--ui-radius);
  background: #fff;
  box-shadow: var(--ui-shadow);
}
.form-card, .app-shell .form-card { padding: clamp(20px, 3vw, 30px); }
.form-wrap .panel, .app-shell .form-wrap .panel { margin: 20px 0; padding: 22px; }
.panel-title, .app-shell .panel-title { padding-top: 20px; padding-bottom: 20px; }
.panel>h2:first-child { padding-top: 20px; }
.form-wrap .panel>h2:first-child, .detail-grid .panel>h2:first-child { padding-top: 0; }
.auth-page, .app-shell .auth-page { max-width: 480px; }
.auth-page .form-card { box-shadow: 0 8px 30px #18384a09; }
.form-heading { margin-bottom: 24px; }
.form-heading h1, .auth-page .form-heading h1 { font-size: clamp(28px, 4vw, 34px); line-height: 1.2; }
.form-wrap>h1 { font-size: clamp(27px, 4vw, 36px); letter-spacing: -.8px; }
.auth-page ol { padding-left: 22px; margin: 0 0 24px; }
.auth-page ol li { padding-left: 6px; margin-bottom: 14px; }
.auth-page ol li::marker { color: var(--green); font-weight: 700; }
.auth-note { border-top: 1px solid var(--line); padding-top: 16px; }
.credential-card { background: #edf4f7; border: 1px solid var(--line); border-radius: var(--ui-radius); overflow-wrap: anywhere; }

/* Controls retain their existing names, types, actions and JavaScript bindings. */
.button, .app-shell .button, #photo-analyze {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid #cddae3;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font: 700 13px/1.5 var(--ui-font);
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.button.primary, .app-shell .button.primary, .nav-join {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}
.button.danger, .app-shell .button.danger { background: #c0272b; border-color: #c0272b; color: #fff; }
.button:hover, .app-shell .button:hover { filter: brightness(.96); }
button:disabled, .button[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.field label, .app-shell .field label, .update-form label { color: #324c5b; font-size: 13px; font-weight: 700; }
.field input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .field select, .field textarea,
.app-shell .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.app-shell .field select, .app-shell .field textarea,
.filter-form input, .filter-form select, .app-shell .filter-form input, .app-shell .filter-form select,
.update-form select, .update-form textarea {
  min-height: 44px;
  max-width: 100%;
  border: 1px solid #cbd8e1;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  font: 14px/1.5 var(--ui-font);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #e5a823;
  outline: 2px solid #e5a82333;
  outline-offset: 2px;
}
input[type=checkbox], input[type=radio], .app-shell input[type=checkbox] { accent-color: var(--green); }
input[type=file]::file-selector-button { border: 0; border-radius: 5px; padding: 6px 10px; margin-right: 10px; background: #edf3f7; color: var(--navy); font: inherit; }
.field small, .app-shell .field small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.errorlist { color: #a3253c; }
.message { border: 1px solid #c9e3d7; background: #eaf6ef; color: #245d48; border-radius: 8px; padding: 14px 18px; }
.alert-note { border: 1px solid #edddba; background: #fff8e9; color: #79551f; border-radius: 8px; padding: 14px 16px; line-height: 1.7; }

/* Lists, status badges and supporting content. */
.approval-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; background: var(--teal); color: var(--green); border-radius: 12px; font-size: 24px; }
.approval-steps { padding: 0; margin: 24px 0; list-style: none; counter-reset: approval; }
.approval-steps li { position: relative; padding: 0 0 22px 44px; counter-increment: approval; }
.approval-steps li::before { content: counter(approval); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--wash); border: 1px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 700; }
.approval-steps li[aria-current=step]::before { background: var(--navy); color: #fff; border-color: var(--navy); }
.approval-steps strong, .approval-steps span { display: block; }
.approval-steps span { color: var(--muted); font-size: 13px; }
.approval-form, .approval-note { margin-top: 24px; }
.status, .app-shell .status { border-radius: 6px; padding: 5px 9px; font-size: 11px; font-weight: 600; }
.report-info { min-width: 0; }
.report-info strong, .detail-meta strong { overflow-wrap: anywhere; }
a.report-row:hover { background: #f5f9fb; text-decoration: none; }
.workspace-table th { background: #f3f7fa; color: #566c7a; }
.workspace-table td small, .app-shell .report-info small { color: var(--muted); }
.stat small, .app-shell .stat small { color: #566c7a; }
.empty, .app-shell .empty { color: var(--muted); }
.pagination { gap: 12px; flex-wrap: wrap; }
.pagination a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.wizard-progress { gap: 12px 32px; padding: 18px 18px 18px 38px; margin: 24px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); color: var(--muted); }
.wizard-progress li::marker { color: var(--green); font-weight: 700; }
.map-panel { border-radius: var(--ui-radius); border-color: var(--line); }
.help-widget { border-radius: var(--ui-radius); box-shadow: 0 8px 32px #18384a1a; }
.help-widget>summary, .app-shell .help-widget>summary { background: var(--navy); }
.quick-replies button { padding: 8px 10px; border-radius: 7px; color: var(--navy); }
.app-shell>footer { color: var(--navy); }
.app-shell>footer p, .app-shell>footer .copyright { color: var(--muted); }
.app-shell>footer .copyright { border-color: var(--line); }

@media (max-width: 650px) {
  .detail-head, .panel-title, .app-shell .panel-title { flex-wrap: wrap; gap: 12px; }
  .detail-meta { flex-wrap: wrap; gap: 6px; }
  .form-wrap .panel, .app-shell .form-wrap .panel { padding: 18px; }
  .actions .button { max-width: 100%; }
  .auth-page .form-card { padding: 22px; }
  .app-shell .filter-form label { min-width: 0; flex-basis: 100%; }
  .filter-form input, .filter-form select { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .app-shell .button, .service-card { transition: none; }
  .service-card:hover { transform: none; }
}

/* Preserve the proportions and lettering of official department logos. */
.department-logo { object-fit: contain; flex-shrink: 0; background: #fff; border-radius: 6px; }
.workspace-label { display: flex; align-items: center; gap: 10px; }
.department-list-logo { margin-right: 12px; vertical-align: middle; }