/* Shared Accutronic customer theme. Load after each page's structural styles.
   Navy anchors navigation and data; red highlights actions and selections.
   Operational status colors (success, warning, risk and live) stay semantic. */
:root {
  --brand-navy: #303052;
  --brand-navy-deep: #222239;
  --brand-red: #c92539;
  --brand-red-hover: #a91e30;
  --brand-gray: #73777b;
  --chart-usual: #85859f;
  --brand-ink: #26263e;
  --brand-slate: #60636e;
  --bg: #f2f2f4;
  --panel: #fff;
  --line: #dedee5;
  --line-strong: #c8c8d3;
  --ink: var(--brand-ink);
  --muted: var(--brand-slate);
  --faint: #707380;
  --accent: var(--brand-red);
  --accent-hover: var(--brand-red-hover);
  --accent-soft: #fceef0;
  --accent-line: #e7adb5;
  --accent-ink: #a51e30;
  --topbar: var(--brand-navy);
  --top-h: 60px;
  --bar: var(--brand-navy);
  --bar-hover: var(--brand-red);
  --shift: var(--brand-navy);
}

body[data-customer-page] {
  background: var(--bg);
  color: var(--ink);
  accent-color: var(--brand-red);
}

/* Use an inset accent so fixed-height navigation keeps its layout geometry. */
body[data-customer-page] > .top,
body[data-customer-page] > .nav {
  background: linear-gradient(115deg, var(--brand-navy-deep), var(--brand-navy));
  box-shadow: inset 0 -3px var(--brand-red), 0 3px 14px #22223918;
}
body[data-customer-page] > header {
  background: var(--brand-navy) !important; /* signing headers use inline styles */
  border-bottom: 3px solid var(--brand-red);
}
body[data-customer-page] > .top a {
  border-radius: 6px;
  padding: 7px 8px;
  color: #eeeef5;
}
body[data-customer-page] > .top a:hover {
  background: #ffffff14;
  color: #fff;
}
body[data-customer-page] > .top .title > .ti { color: #ff8c9b; }
body[data-customer-page] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}
body[data-customer-page] .sw input:focus-visible + i {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}

/* Dashboard: navy navigation, red active item, and alternating brand accents. */
body[data-customer-page="dashboard"] .nav .menu a.active {
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 3px 10px #17172830;
}
body[data-customer-page="dashboard"] .nav .menu i { color: #c4c4d6; }
body[data-customer-page="dashboard"] .nav .menu a.active i { color: #fff; }
body[data-customer-page="dashboard"] .summary .tile {
  border-top: 3px solid var(--brand-navy);
  box-shadow: 0 3px 12px #22223906;
}
body[data-customer-page="dashboard"] .summary .tile:nth-child(2n) { border-top-color: var(--brand-red); }
body[data-customer-page="dashboard"] .summary .tile:last-child { border-top-color: var(--brand-gray); }
body[data-customer-page="dashboard"] .summary .tile .v { color: var(--brand-navy); }
body[data-customer-page="dashboard"] .tile.filter.active {
  border-color: var(--brand-red);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px #c9253918;
}
body[data-customer-page="dashboard"] :is(.loc, .audit-location, .inc) {
  border-color: var(--line);
  box-shadow: 0 3px 12px #22223906;
}
body[data-customer-page="dashboard"] :is(.loc-name, .audit-location-name, .section-h, .camera-strip-title) { color: var(--brand-navy); }
body[data-customer-page="dashboard"] :is(.loc-foot, .audit-location-head) { background: #f5f5f7; }
body[data-customer-page="dashboard"] .btn:not(.amber):not(.outline),
body[data-customer-page="dashboard"] .map-popup-actions button.primary {
  background: var(--brand-red);
  color: #fff;
}
body[data-customer-page="dashboard"] .btn:not(.amber):not(.outline):hover,
body[data-customer-page="dashboard"] .map-popup-actions button.primary:hover { background: var(--brand-red-hover); }

/* Detections: gray filter rail, navy charts and red selection markers. */
body[data-customer-page="detections"] .side { background: #eaeaec; }
body[data-customer-page="detections"] .strip { background: #fafafb; }
body[data-customer-page="detections"] .busy {
  border-top: 3px solid var(--brand-navy);
  box-shadow: 0 3px 14px #22223908;
}
body[data-customer-page="detections"] .busy:nth-child(2) { border-top-color: var(--brand-red); }
body[data-customer-page="detections"] .busy-col:not(.nodata) .u,
body[data-customer-page="detections"] .dtz-bars .c:not(.later) i { background: var(--chart-usual); }
body[data-customer-page="detections"] .busy-col .t { background: var(--brand-navy); }
body[data-customer-page="detections"] .dtz-bars .c.now i { background: var(--brand-red); }
body[data-customer-page="detections"] .busy-col.now::after { border-color: var(--brand-red); }
body[data-customer-page="detections"] .busy-now {
  color: var(--accent-ink);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
body[data-customer-page="detections"] .busy-now .dot {
  background: var(--brand-red);
  box-shadow: 0 0 0 3px #c9253918;
}

/* Operational pages share white cards, gray section bands and red details. */
body:is([data-customer-page="timeclock"], [data-customer-page="notifications"]) .loc,
body[data-customer-page="zones"] .zcard,
body[data-customer-page="suspicious"] .card {
  border-top: 3px solid var(--brand-navy);
  box-shadow: 0 4px 16px #22223908;
}
body[data-customer-page="timeclock"] .loc-head,
body[data-customer-page="notifications"] .loc-h { background: #f7f7f9; }
body[data-customer-page="timeclock"] .shift.no_in {
  background: linear-gradient(90deg, #30305259, var(--shift) 40%);
}
body[data-customer-page="timeclock"] .legend .sw.no_in {
  background: linear-gradient(90deg, #30305259, var(--shift));
}
body[data-customer-page="zones"] .stats {
  padding: 10px 12px;
  background: #f1f1f5;
  border-left: 3px solid var(--brand-red);
  border-radius: 6px;
}
body[data-customer-page="zones"] .col:hover,
body[data-customer-page="zones"] .col:focus-visible { background: var(--accent-soft); }
body[data-customer-page="suspicious"] th { background: #ededf2; color: #57576e; }
body[data-customer-page="suspicious"] tr.row:hover td { background: #f7f4f5; }
body[data-customer-page="suspicious"] .counts span:first-child { border-left: 3px solid var(--brand-red); }

/* Camera monitoring retains dark surfaces with warmer gray and navy tones. */
body[data-customer-page="cameras"] {
  --bg: #14141f;
  --panel: #20202f;
  --panel-2: #2b2b40;
  --line: #39394e;
  --line-strong: #53536b;
  --ink: #f0f0f6;
  --muted: #b5b5c6;
  --faint: #9999ae;
  --accent: #e34559;
  --accent-soft: #e3455926;
  --accent-line: #df7c89;
  --accent-ink: #ff9ba9;
}
body[data-customer-page="cameras"] .side { border-top: 3px solid var(--brand-gray); }
body[data-customer-page="cameras"] .bar { border-top: 3px solid var(--brand-red); }
body[data-customer-page="cameras"] .seg button.on,
body[data-customer-page="cameras"] .btn.primary { background: var(--brand-red); }
body[data-customer-page="cameras"] .btn.primary:hover { background: var(--brand-red-hover); }

/* Sign-in and verification use the same palette as authenticated pages. */
body[data-customer-page="index"] .login-visual {
  box-shadow: inset 0 5px var(--brand-red);
  background-color: var(--brand-navy);
}
body[data-customer-page="index"] .login-visual::after {
  background: linear-gradient(155deg, #22223966, #303052cc 75%, #c9253955);
}
body[data-customer-page="index"] .login-panel { background: #ededf1; }
body[data-customer-page="index"] .login-visual__title { color: #fff; }
body[data-customer-page="index"] .login-card { border-top: 4px solid var(--brand-red); }
body[data-customer-page="index"] .login-title-icon { background: var(--accent-soft); color: var(--brand-red); }
body[data-customer-page="index"] .btn-outline-primary { color: var(--brand-navy); border-color: var(--brand-navy); }
body[data-customer-page="index"] .btn-outline-primary:hover { color: #fff; background: var(--brand-navy); }
body[data-customer-page="index"] .btn-primary,
body[data-customer-page="dashboard"] .gate .btn { background: var(--brand-red); border-color: var(--brand-red); }
body[data-customer-page="index"] .btn-primary:hover,
body[data-customer-page="dashboard"] .gate .btn:hover { background: var(--brand-red-hover); border-color: var(--brand-red-hover); }

/* Customer response, preference and signing pages. */
body[data-customer-page] :is(.panel, .gate, .account-section, .case) { border-color: var(--line); }
body:is([data-customer-page="email-preferences"], [data-customer-page="incident-response"], [data-customer-page="newsletter-unsubscribe"]) .panel {
  border-top: 3px solid var(--brand-red);
}
body:is([data-customer-page="email-preferences"], [data-customer-page="incident-response"], [data-customer-page="newsletter-unsubscribe"]) button[type=submit],
body:is([data-customer-page="noi-sign"], [data-customer-page="noi-tech-sign"]) .btn-primary {
  background: var(--brand-red);
  color: #fff;
}
body[data-customer-page="incident-response"] .action-option.service {
  background: #f1f1f7;
  border-color: #c8c8d8;
}
body[data-customer-page="incident-response"] .action-option.service i { color: var(--brand-navy); }
body[data-customer-page="incident-response"] .action-option.service:has(input:checked) {
  border-color: var(--brand-navy);
  background: #e5e5f0;
}
body[data-customer-page="group-weekly-audio"] .player {
  background: #f3f3f6;
  border-color: var(--line);
  border-left-color: var(--brand-red);
}

/* Long navigation stays reachable on narrow screens without page overflow. */
@media (max-width: 1100px) {
  body[data-customer-page] > .top:has(.title) {
    overflow-x: auto;
    gap: 10px;
    padding-inline: 12px;
  }
  body[data-customer-page] > .top:has(.title) > * { flex-shrink: 0; }
}
@media (max-width: 640px) {
  body[data-customer-page] > .top:has(.title) > img { display: none; }
  body[data-customer-page] > .top:has(.title) a span { display: none; }
  body[data-customer-page] > .top .title { font-size: 14px; }
}

body[data-customer-page="contact-update-request"] :is(.btn-submit, .copy-btn-apply),
body[data-customer-page="march-case-response"] .quote {
  background: var(--brand-red);
  color: #fff;
}
body[data-customer-page="contact-update-request"] :is(.btn-submit, .copy-btn-apply):hover,
body[data-customer-page="march-case-response"] .quote:hover { background: var(--brand-red-hover); }

/* Shared Detections navigation: identical links and sizing on all six pages. */
body[data-customer-page] > .customer-topbar {
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  overflow: visible;
}
body[data-customer-page] > .customer-topbar > img { height: 28px; flex-shrink: 0; }
body[data-customer-page] > .customer-topbar > .title {
  display: block;
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}
.customer-topnav {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: safe flex-end;
  gap: 4px;
  margin-left: auto;
  padding: 5px 3px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #9a9aaf transparent;
}
body[data-customer-page] > .customer-topbar .customer-topnav a {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 8px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
body[data-customer-page] > .customer-topbar .customer-topnav a[aria-current="page"] {
  background: var(--brand-red);
  color: #fff;
}
body[data-customer-page] > .customer-topbar .customer-topnav a span { display: inline; }
body[data-customer-page] > .customer-topbar .customer-topnav .ti { font-size: 17px; }
@media (max-width: 1100px) {
  body[data-customer-page] > .customer-topbar:has(.title) { overflow: visible; padding-inline: 12px; }
  body[data-customer-page] > .customer-topbar > img { display: none; }
  body[data-customer-page] > .customer-topbar:has(.title) > .customer-topnav { flex: 0 1 auto; }
}
@media (max-width: 640px) {
  body[data-customer-page] > .customer-topbar:has(.title) { gap: 8px; }
  body[data-customer-page] > .customer-topbar > .title { font-size: 13px; }
}