/* Shared application language; loaded after the individual page layouts. */
:root {
  --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f3f4f4;
  --text: #101514;
  --muted: #69726e;
  --line: #e8ebe9;
  --line-strong: #cbd2ce;
  --primary: #087c43;
  --primary-dark: #056333;
  --primary-soft: #d8f9e4;
  --accent: #16bd66;
  --accent-hover: #12ad5d;
  --accent-ink: #052b17;
  --progress: #087c70;
  --progress-soft: #e4f5f0;
  --sidebar: #f6f7f6;
  --sidebar-soft: #e8eeea;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 8px 28px rgba(15, 25, 20, .06);
  --header-glass: rgba(255, 255, 255, .78);
  --tab-glass: rgba(246, 248, 247, .4);
  --tab-fallback: #f3f4f4;
  --tab-ink: #202522;
  --tab-shadow: rgba(15, 25, 20, .16);
  /* Position the capsule closer to the home indicator while retaining a gesture gap. */
  --tabbar-bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) - 14px));
  --tabbar-clearance: calc(88px + var(--tabbar-bottom));
}
html[data-theme="dark"] {
  --bg: #0b0b0b;
  --surface: #161817;
  --surface-soft: #232323;
  --text: #f5f5f5;
  --muted: #a0a5a2;
  --line: #292c2a;
  --line-strong: #424944;
  --primary: #1acb6b;
  --primary-dark: #50dc91;
  --primary-soft: #123b29;
  --accent: #1acb6b;
  --accent-hover: #38d77f;
  --progress: #7bd9c5;
  --progress-soft: #17372e;
  --sidebar: #111312;
  --sidebar-soft: #232825;
  --shadow: 0 8px 28px rgba(0, 0, 0, .22);
  --header-glass: rgba(11, 11, 11, .76);
  --tab-glass: rgba(29, 31, 30, .38);
  --tab-fallback: #272927;
  --tab-ink: #f5f5f5;
  --tab-shadow: rgba(0, 0, 0, .34);
}
body, body h1, body h2, body h3, body .button, body .nav-link,
body .topbar, body .page-header, body .auth-navbar,
body .auth-login-panel-minimal h1, body .video-auth-page label {
  font-family: var(--app-font);
}
body :focus-visible { outline-color: var(--primary); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--primary); }
body.app-body .page-header h1, body.app-body .page-heading h1 { font-size: 32px; font-weight: 750; letter-spacing: -.035em; }
body.app-body .page-heading { margin-bottom: 22px; }
body .eyebrow, body .pwa-eyebrow { color: var(--muted); letter-spacing: .035em; }

/* Navigation is the same neutral surface on every screen. */
body.app-body .sidebar { color: var(--text); background: var(--sidebar); border-right: 1px solid var(--line); }
body.app-body .brand-mark { color: var(--accent-ink); background: var(--accent); border-radius: 14px; box-shadow: none; }
body.app-body .brand-copy strong, body.app-body .user-copy strong { color: var(--text); }
body.app-body .brand-copy small, body.app-body .nav-label,
body.app-body .user-copy small, body.app-body .sidebar-account-link { color: var(--muted); }
body.app-body .nav-link { color: var(--text); border-radius: 16px; min-height: 46px; }
body.app-body .nav-link:hover { color: var(--text); background: var(--sidebar-soft); }
body.app-body .nav-link.is-active { color: var(--primary); background: var(--primary-soft); box-shadow: none; }
body.app-body .nav-badge[data-nav-unread] { color: var(--accent-ink); background: var(--accent); }
body.app-body .sidebar-user { border-color: var(--line); }
body.app-body .sidebar-account-link:hover { color: var(--primary); }
body.app-body .logout-button, body.app-body .sidebar-close { color: var(--muted); border-radius: 50%; }
body.app-body .logout-button:hover { color: var(--text); background: var(--surface-soft); }
body.app-body .topbar { background: var(--header-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
body.app-body .topbar-user { color: var(--text); }
body.app-body .topbar-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--primary-soft); }
body.app-body .theme-toggle, body.app-body .menu-button { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-soft); border: 1px solid var(--line); }
body.app-body .theme-toggle:hover { transform: none; background: var(--primary-soft); }
body.app-body .nav-scrim { background: rgba(0, 0, 0, .45); }

/* A normal, addressable menu page replaces the mobile drawer. */
.menu-page { width: min(100%, 960px); margin-inline: auto; }
.menu-page .page-heading { margin-bottom: 24px; }
.menu-profile { display: flex; align-items: center; gap: 18px; padding: 22px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 24px; color: var(--text); background: var(--surface-soft); }
.menu-profile:hover { color: var(--text); border-color: var(--line-strong); }
.menu-profile img { width: 64px; height: 64px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }
.menu-profile-copy { display: grid; gap: 4px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.menu-profile-copy strong { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.menu-profile-copy > span { color: var(--muted); font-size: 13px; }
.menu-profile-copy small { color: var(--primary); font-size: 13px; }
.menu-chevron { flex-shrink: 0; color: var(--muted); opacity: .65; }
.menu-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px 24px; }
.menu-section { min-width: 0; }
.menu-section h2 { padding-inline: 16px; margin-bottom: 10px; font-size: 13px; font-weight: 650; color: var(--muted); }
.menu-group { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.menu-group > * + * { border-top: 1px solid var(--line); }
.menu-group form { margin: 0; }
.menu-row { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: 66px; padding: 14px 16px; border: 0; color: var(--text); background: transparent; font: inherit; text-align: left; text-decoration: none; touch-action: manipulation; }
.menu-group > .menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row:hover { color: var(--text); background: var(--surface-soft); }
.menu-row:focus-visible, .menu-profile:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.menu-row-icon { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; color: var(--primary); background: var(--primary-soft); border-radius: 12px; }
.menu-row-icon > span { display: grid; place-items: center; }
.menu-row-copy { display: grid; gap: 3px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.menu-row-copy strong { font-size: 16px; line-height: 1.35; font-weight: 550; }
.menu-row-copy small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.menu-badge { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; border-radius: 14px; color: var(--accent-ink); background: var(--accent); font-size: 12px; font-weight: 650; }
.menu-badge-alert { color: var(--danger); background: var(--danger-soft); }
.menu-switch { width: 46px; height: 28px; position: relative; flex-shrink: 0; border-radius: 20px; background: var(--line-strong); transition: background .18s ease; }
.menu-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0003; transition: transform .18s ease; }
.menu-row[aria-checked="true"] .menu-switch { background: var(--accent); }
.menu-row[aria-checked="true"] .menu-switch::after { transform: translateX(18px); }
.menu-row-logout, .menu-row-logout:hover { color: var(--danger); }
.menu-row-logout .menu-row-icon { color: var(--danger); background: var(--danger-soft); }

/* Rounded controls, native type and one green action colour. */
body .button { min-height: 44px; border-radius: 24px; padding-inline: 18px; }
body .button-small { min-height: 36px; padding-inline: 12px; }
body .button-primary { color: var(--accent-ink); background: var(--accent); }
html[data-theme="dark"] body .button-primary { color: var(--accent-ink); background: var(--accent); }
body .button-primary:hover, html[data-theme="dark"] body .button-primary:hover { color: var(--accent-ink); background: var(--accent-hover); }
body .button-secondary { color: var(--text); border-color: var(--line); background: var(--surface-soft); }
html[data-theme="dark"] body .button-secondary { background: var(--surface-soft); }
body .button-secondary:hover { color: var(--text); border-color: var(--line-strong); background: var(--sidebar-soft); }
body .button-ghost:hover { color: var(--primary); background: var(--primary-soft); }
body.app-body .text-input, body.app-body .search-field input,
body.app-body .select-field select, body.app-body .users-search input {
  min-height: 46px; border-radius: 14px; color: var(--text); background: var(--surface-soft); border-color: var(--line);
}
body.app-body .search-field input, body.app-body .users-search input { border-radius: 24px; }
body.app-body .text-input:focus, body.app-body .search-field input:focus,
body.app-body .select-field select:focus, body.app-body .users-search input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft);
}
body.app-body .text-input.is-invalid { border-color: var(--danger); }
body.app-body .field-group label, body.app-body .inline-form label,
body.app-body .problem-create label { color: var(--text); }
body.app-body .icon-button { border-radius: 50%; background: var(--surface-soft); color: var(--text); }
body.app-body .pagination-button { border-radius: 22px; }

/* Cases, profile, settings and administration share the messenger's surfaces. */
body.app-body .panel, body.app-body .profile-card, body .pwa-card {
  border-color: var(--line); border-radius: 20px; background: var(--surface); box-shadow: none;
}
body.app-body .stat-card { border-radius: 18px; background: var(--surface-soft); border-color: transparent; }
body.app-body .stat-card:hover { box-shadow: none; border-color: var(--line-strong); transform: none; }
body.app-body .stat-card.is-active { background: var(--primary-soft); border-color: var(--primary); box-shadow: none; }
body.app-body .stat-label { color: var(--muted); }
body.app-body .stat-card strong { font-weight: 750; letter-spacing: -.04em; }
body.app-body .stat-icon, body.app-body .section-number { border-radius: 50%; }
body.app-body .data-table th { background: var(--surface-soft); }
body.app-body .data-table td { border-color: var(--line); }
body.app-body .case-row { cursor: pointer; }
body.app-body .case-row:hover { background: var(--surface-soft); }
body.app-body .cell-primary, body.app-body .vin-code,
body.app-body .facts-grid dd, body.app-body .file-main,
body.app-body .document-preview-link, body.app-body .timeline-content p { color: var(--text); }
body.app-body .dropdown-menu { border-radius: 18px; background: var(--surface); }
body.app-body .dropdown-menu > a, body.app-body .dropdown-menu > form > button,
body.app-body .nested-action > summary { color: var(--text); border-radius: 12px; min-height: 40px; }
body.app-body .dropdown-menu > .dropdown-disabled { color: var(--muted); }
body.app-body .flash, body.app-body .inline-form, body.app-body .file-item { border-radius: 16px; background: var(--surface); }
body.app-body .sticky-actions { border-radius: 20px; background: var(--header-glass); -webkit-backdrop-filter: blur(18px); }
body.app-body .document-preview-media { background: var(--surface-soft); }
body.app-body .upload-plus { color: var(--primary); border-radius: 16px; border-color: var(--line-strong); background: var(--surface-soft); }
body.app-body .upload-plus:hover { border-color: var(--primary); background: var(--primary-soft); }
body.app-body .workflow-step.is-current .workflow-marker { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] body .workflow-step.is-current .workflow-marker { background: var(--accent); }
body .pwa-page { color: var(--text); }
html[data-theme="dark"] body .pwa-card { border-color: var(--line); background: var(--surface); }
body .pwa-muted, html[data-theme="dark"] body .pwa-muted { color: var(--muted); }
body .pwa-card details, html[data-theme="dark"] body .pwa-card details { border-color: var(--line); }
body.auth-body:has(.pwa-page) { background: var(--bg); }
html[data-theme="dark"] body.auth-body:has(.pwa-page) { background: var(--bg); }
body .pwa-logo { display: grid; place-items: center; flex: none; width: 80px; height: 80px; border-radius: 24px; color: var(--accent-ink); background: var(--accent); }
body .pwa-logo svg { width: 44px; height: 44px; }

/* Keep messenger colours connected to the shared palette. */
html body.messenger-body {
  --m-bg: var(--bg); --m-surface: var(--surface-soft); --m-text: var(--text);
  --m-muted: var(--muted); --m-line: var(--line); --m-accent: var(--accent); --m-soft: var(--primary-soft);
}
html[data-theme="dark"] body.messenger-body {
  --m-bg: var(--bg); --m-surface: var(--surface-soft); --m-text: var(--text);
  --m-muted: var(--muted); --m-line: var(--line); --m-accent: var(--accent); --m-soft: var(--primary-soft);
}
body.messenger-body .chat-message { min-width: 0; grid-template-columns: minmax(0, 1fr); }
body.messenger-body .message-attachments { grid-template-columns: minmax(0, 1fr); }

/* File viewer chrome stays dark so photos and white document pages stand out. */
body .file-viewer { background: #0b0b0b; color: #f5f5f5; }
body .viewer-header, body .viewer-footer { background: #171918; border-color: #303632; }
body .viewer-toolbar { background: #111312; }
body .viewer-button { color: #f5f5f5; background: #252925; border-color: #424944; border-radius: 24px; }
body .viewer-button:hover { background: #363d37; }
body .viewer-close, body .viewer-close:hover { color: #052b17; background: #1acb6b; border-color: #1acb6b; }
body .viewer-heading small, body .viewer-download-card p, body .viewer-status,
body .viewer-document-note, body .sheet-hint { color: #bec6c0; }
body .viewer-button:focus-visible, body .viewer-stage:focus-visible { outline-color: #1acb6b; }
body .sheet-grid { color: var(--text); background: var(--surface); }
body .sheet-grid td, body .sheet-grid th { border-color: var(--line-strong); }
body .sheet-grid th, body .sheet-grid .sheet-row-number { color: var(--text); background: var(--surface-soft); }
body .sheet-grid .is-changed { color: #523900; background: #fff1ca; }
body .sheet-cell:focus-visible { outline-color: var(--primary); }
body .pdf-text-editor:not([readonly]) { border-color: #1acb6b; }
body .call-card { background: #151a17; border-color: #39463e; }
body .call-avatar { color: #052b17; background: #1acb6b; box-shadow: 0 0 0 10px rgba(26, 203, 107, .11); }
@keyframes call-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(26, 203, 107, .1); }
  50% { box-shadow: 0 0 0 18px rgba(26, 203, 107, .025); }
}
body .call-action > span { background: #343c36; }
body .call-action-accept > span { background: #16bd66; }
body .call-action-reject > span, body .call-action-end > span { background: #d92d20; }

/* The sign-in screen retains its video while using the same controls. */
body.video-auth-page { --auth-purple: #16bd66; --auth-purple-hover: #38d77f; --auth-dark: #171918; --auth-black: #0b0b0b; }
body.video-auth-page .auth-hero { background: #0b0b0b; }
body.video-auth-page .auth-hero-video { filter: grayscale(1) brightness(.72); }
body.video-auth-page .auth-login-panel { background: rgba(15, 20, 17, .76); border-radius: 28px; }
body.video-auth-page .auth-login-panel-minimal { background: rgba(15, 20, 17, .76); }
body.video-auth-page .auth-login-icon { color: #052b17; background: #16bd66; box-shadow: none; border-radius: 50%; }
body.video-auth-page .field-group label { font-family: var(--app-font); }
body.video-auth-page .text-input { border-radius: 14px; }
body.video-auth-page .text-input:focus { border-color: #1acb6b; box-shadow: 0 0 0 2px rgba(26, 203, 107, .2); }
body.video-auth-page .auth-password-toggle-icon[aria-pressed="true"] { background: rgba(26, 203, 107, .2); }
body.video-auth-page .button-primary { font-family: var(--app-font); color: #052b17; background: #16bd66; border-radius: 26px; box-shadow: none; }
body.video-auth-page .button-primary:hover { background: #38d77f; }

@media (max-width: 960px) {
  body.app-body .sidebar { display: none; }
  .mobile-tabbar { bottom: var(--tabbar-bottom); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-body .page-wrap { padding-bottom: var(--tabbar-clearance); }
  .app-body .sticky-actions { bottom: calc(77px + var(--tabbar-bottom)); }
  .app-body.is-keyboard-open .sticky-actions { bottom: 0; }
  body.messenger-body .conversation-scroll { padding-bottom: var(--tabbar-clearance); scroll-padding-bottom: var(--tabbar-clearance); }
  html { scroll-padding-bottom: var(--tabbar-clearance); }
  body.app-body .page-header h1, body.app-body .page-heading h1 { font-size: 34px; }
  body.app-body .page-header { align-items: flex-start; }
  body.app-body .sidebar { padding-top: max(20px, env(safe-area-inset-top)); }
}
@media (min-width: 961px) {
  body.messenger-body .messenger-shell { height: calc(100dvh - 36px); }
}
@media (max-width: 760px) {
  /* A native link covers the card, so the first tap works before JavaScript loads.
     Keep the actions and secondary link above it, including their touch targets. */
  .case-row { isolation: isolate; }
  .case-row .case-number::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
  .case-row .case-number:focus-visible::after { outline: 2px solid var(--primary); outline-offset: 2px; }
  .case-row .plate-number { position: relative; z-index: 2; }
  .case-row .table-actions { z-index: 3; }
  .case-row a { touch-action: manipulation; }
  body.app-body .data-table tr { border-radius: 18px; background: var(--surface); border-color: var(--line); }
  body.app-body:not(.messenger-body):not(.file-viewer-body) .page-wrap { padding-inline: 16px; }
  body.app-body .topbar { padding-inline: 16px; }
  body.app-body .case-hero { border-radius: 20px; }
  body .pwa-page { padding-inline: 0; }
  body.auth-body .pwa-page { padding-inline: 16px; }
  body .pwa-heading { gap: 14px; }
  body .pwa-logo { width: 56px; height: 56px; border-radius: 18px; }
  body .pwa-logo svg { width: 32px; height: 32px; }
  .menu-sections { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .menu-profile { padding: 18px; gap: 14px; margin-bottom: 24px; }
  .menu-profile-copy strong { font-size: 20px; }
  .menu-row { padding-inline: 14px; gap: 12px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.app-body .topbar, body.app-body .sticky-actions { background: var(--bg); }
}
@media (max-width: 360px) {
  .menu-profile { padding: 16px; gap: 12px; }
  .menu-profile img { width: 56px; height: 56px; }
  .menu-profile-copy strong { font-size: 18px; }
}
@media (prefers-reduced-transparency: reduce) {
  body.app-body .topbar, body.app-body .sticky-actions { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-switch, .menu-switch::after { transition: none; }
}