/* GuardPatrola brand — authoritative visual layer for dashboard and registration.
   Layout, semantic status, keyboard focus and map geometry remain independent. */
:root, html[data-theme] {
  color-scheme: dark;
  --theme-name: "Patrola";
  /* Borderless cards need a clear surface step from the surrounding workspace. */
  --page: #0b1219; --page-mid: #0b1219; --page-end: #0b1219;
  --ink: #f3f6f8; --text: var(--ink); --muted: #a7b7c5; --charcoal: var(--ink);
  --surface: #1a2b38; --surface-strong: #1a2b38; --surface-soft: #233746;
  --line: #314657; --line-strong: #7e9db8;
  /* Patrola stays neutral; each product selects its own accent below. */
  --app-accent-guard: #c77a43; --app-accent-time: #75d3a5;
  --product-accent: var(--app-accent-guard); --product-accent-soft: #49301d;
  --active: #7e9db8; --active-strong: #7e9db8; --active-soft: #263f56;
  --blue: #7e9db8; --teal: #a7b7c5; --green: #75d3a5;
  --success: #75d3a5; --success-soft: #183e32; --status-online: #75d3a5;
  --warning: var(--product-accent); --yellow: var(--product-accent); --warning-soft: var(--product-accent-soft);
  --danger: #ffb4ab; --red: #ffb4ab; --danger-soft: #601410;
  --brand-mark-bg: #7e9db8; --brand-mark-soft: #a7b7c5; --brand-mark-ink: #101821;
  --sidebar-bg: #0b1219; --sidebar-ink: #f3f6f8; --sidebar-muted: #a7b7c5;
  --sidebar-active-bg: #263f56; --sidebar-active-border: transparent;
  --sidebar-card-bg: #1a2b38; --sidebar-gradient-start: #0b1219; --sidebar-gradient-end: #0b1219;
  --sidebar-glow: transparent;
  --input-bg: #101a23; --filter-panel-bg: #1a2b38; --filter-control-bg: #101a23;
  --glass-surface: #1a2b38; --glass-surface-raised: #233746;
  --glass-border: #314657; --glass-highlight: transparent;
  --glass-shadow: none; --control-shadow: none; --panel-shadow-hover: none;
  --button-primary-start: #7e9db8; --button-primary-end: #7e9db8;
  --button-primary-shadow: none; --button-secondary-shadow: none;
  --danger-button-start: #601410; --danger-button-end: #601410; --danger-button-shadow: none;
  --overlay-bg: #060c14c9;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 24px 70px #0006;
  --shadow: none; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px;
  --focus-ring: 0 0 0 3px #7e9db866;
}
html[data-app="guard"] { --product-accent: var(--app-accent-guard); --product-accent-soft: #49301d; }
html[data-app="time"] { --product-accent: var(--app-accent-time); --product-accent-soft: #183e32; }
body { background: var(--page); color: var(--ink); font-family: "Segoe UI", system-ui, sans-serif; }
body::before, body::after { background: none; pointer-events: none; }
/* Shared Patrola wordmark; the second line identifies the product (GuardPatrola / TimePatrola). */
html[data-theme] .brand-home .brand-mark,
html[data-theme] .brand-home:hover .brand-mark,
html[data-theme] .brand-home:focus-visible .brand-mark {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible; flex: 0 0 44px; width: 44px; height: 44px;
}
html[data-theme] .brand-home .brand-mark img { width: 44px; height: 44px; object-fit: contain; }
html[data-theme] .brand-home strong { font-size: 28.8px; line-height: 1; letter-spacing: -.03em; }
html[data-theme] .brand .brand-product-accent { color: var(--product-accent); display: inline; margin: 0; font: inherit; letter-spacing: inherit; }
html[data-theme] .login-brand-logo { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
html[data-theme] :is(.brand-home, .login-brand) { display: grid; grid-template-columns: 44px max-content; justify-content: start; align-items: end; gap: 5px 7px; }
html[data-theme] :is(.brand-copy, .login-brand-copy) { display: contents; }
html[data-theme] :is(.brand-home, .login-brand) strong { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 2px; font-family: inherit; font-size: 28.8px; font-weight: 700; line-height: 1; letter-spacing: -.03em; white-space: nowrap; color: var(--ink); }
html[data-theme] .login-brand-logo { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
html[data-theme] .workspace { background: var(--page); }
html[data-theme] .sidebar .nav-list { margin-top: 30px; }
html[data-theme] :is(.topbar, .section-header) { border: 0; background: transparent; box-shadow: none; padding-left: 0; }
html[data-theme] :is(.panel, .card, .stat-card, .metric-card, .summary-card,
  .login-panel, .login-card, .join-card, .settings-card, .setup-wizard-records,
  .management-card, .setup-card, .log-metric-card, .overview-patrol-card,
  .incident-alert-card, .log-command-bar, .setup-panel:not(.management-modal)) {
  background: var(--surface); border: 0; box-shadow: none; border-radius: 20px;
}
html[data-theme] :is(.panel, .card) :is(.panel, .card) {
  background: var(--surface-soft); box-shadow: none;
}
/* Overview patrols are buttons, so they need their own surface step instead of
   inheriting the same panel surface as the list behind them. */
html[data-theme] .overview-card-list > .overview-patrol-card {
  background: var(--surface-soft); box-shadow: none;
}
html[data-theme] .overview-card-list > .overview-patrol-card:hover {
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--active-soft));
}
html[data-theme] :is(.sidebar, .login-presentation) {
  background: var(--page); border: 0; box-shadow: none;
}
html[data-theme] .nav-item { border-color: transparent; box-shadow: none; border-radius: 12px; }
html[data-theme] .nav-item:hover { background: var(--surface-soft); }
html[data-theme] .nav-item.active { background: var(--active-soft); color: var(--ink); border-color: transparent; }
html[data-theme] :is(.sidebar-status, .sidebar-card) { border: 0; background: var(--surface); box-shadow: none; }
.sidebar-status { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.sidebar-status .status-dot { flex-shrink: 0; }
html[data-theme] .login-screen { background: var(--page); }
html[data-theme] :is(.secondary-button, .mini-action, .segment, .compact-link-button) {
  background: var(--surface-soft); color: var(--ink); border-color: transparent; box-shadow: none;
}
html[data-theme] :is(.secondary-button, .mini-action):hover:not(:disabled) { background: var(--active-soft); }
html[data-theme] a { color: #a7c9e6; }
html[data-theme] :is(.panel-title-row, .section-heading) { margin-bottom: 20px; }
html[data-theme] :is(h1, h2, h3) { letter-spacing: -.025em; text-shadow: none; }
html[data-theme] :is(.primary-button, .button-primary, .login-submit, button[type="submit"]) {
  background: #7e9db8; color: #101821; border-color: transparent; box-shadow: none; font-weight: 700;
}
html[data-theme] .warning-button { background: var(--product-accent); color: #101821; }
html[data-theme] .incident-alert-card.priority-medium { border-left-color: var(--product-accent); }
html[data-theme] .incident-priority-medium { color: var(--product-accent) !important; }
html[data-theme] :is(button, .button) { text-shadow: none; }
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background: var(--input-bg); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none;
}
html[data-theme] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme] :is(.action-dialog, .management-modal-card, .filter-panel) {
  background: var(--surface); color: var(--ink); border: 0; box-shadow: var(--shadow-lg);
}
html[data-theme] :is(table, .table-wrap, .table-container) { box-shadow: none; border: 0; }
html[data-theme] :is(.panel-title-row, .section-header) { border-bottom: 0; }
/* One page title in the topbar. Keep header actions, not duplicate intro cards.
   Nodes remain available to existing renderers and aria-labelledby references. */
html[data-theme] .view-panel > .mode-banner { display: none; }
html[data-theme] .view-panel > .section-header :is(h2, p.eyebrow) { display: none; }
html[data-theme] .view-panel > .section-header > p,
html[data-theme] .view-panel > .section-header > div > p { display: none; }
html[data-theme] .view-panel > .section-header > div:has(h2):not(:has(button, input, select, a, [role="status"])) { display: none; }
html[data-theme] .view-panel > .section-header:not(:has(button, input, select, a, [role="status"])) { display: none; }
html[data-theme] .view-panel > .section-header {
  min-height: 0; padding: 0; margin: 0 0 16px; justify-content: flex-end; gap: 12px;
}
html[data-theme] :is(th, td) { border-left: 0; border-right: 0; border-bottom-color: var(--line); }
html[data-theme] th { background: var(--surface-soft); color: var(--muted); }
html[data-theme] tbody tr:hover { background: var(--surface-soft); }
html[data-theme] :is(.danger-button, .button-danger) { background: var(--danger-soft); color: var(--danger); }
html[data-theme] :where(button, input, select, textarea, summary, a[href], [tabindex]):focus-visible {
  outline: 3px solid #a7c9e6; outline-offset: 3px;
}
html[data-theme] :is(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: .55; }
/* Registration shares the same palette without importing the dashboard layout. */
html[data-theme] .join-card { color: var(--ink); }
html[data-theme] .offer { background: var(--active-soft); }
html[data-theme] .join-card a { color: #a7c9e6; }
html[data-theme] .join-card button { background: #7e9db8; color: #101821; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}