/* PCI Shell: one header, one action bar and one button language for every
   PCI ACCESS surface. Built at runtime by pci-theme.js; legacy headers stay in
   the DOM (hidden) so existing IDs and scripts keep working. */
:root { --pci-shell-h: 64px; --pci-shell-max: 1180px; }

body.pci-has-shell { padding-top: 0; margin-top: 0; }
.pci-legacy-hidden { display: none; }

.pci-shell {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 14px;
  min-height: var(--pci-shell-h);
  padding: 8px max(16px, calc((100vw - var(--pci-shell-max)) / 2));
  background: var(--pci-surface);
  color: var(--pci-text);
  border-bottom: 1px solid var(--pci-border);
  box-shadow: var(--pci-shadow-sm);
  font-family:var(--pci-font-sans);
}
.pci-shell::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--pci-primary), var(--pci-accent));
}
.pci-shell-brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.pci-shell-brand img { display: block; width: auto; height: 40px; max-width: none; border-radius: 6px; background: #fff; }
.pci-shell-title { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--pci-border); }
.pci-shell-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pci-accent-ink); line-height: 1.2; }
.pci-shell-title h1 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--pci-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pci-shell-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pci-shell-tools .pci-clock,
.pci-shell-tools [data-pci-clock] {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  border: 1px solid var(--pci-border); border-radius: 999px;
  background: var(--pci-surface-alt); color: var(--pci-text);
  font: 700 12px/1 var(--pci-font-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pci-shell-tools .pci-theme-controls { position: relative; display: inline-flex; gap: 6px; }
.pci-shell-tools .pci-theme-toggle {
  width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0;
  display: inline-grid; place-items: center; border-radius: 10px !important;
  border: 1px solid var(--pci-border) !important; background: var(--pci-surface) !important; color: var(--pci-text) !important;
  box-shadow: none;
}
.pci-shell-tools .pci-theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.pci-shell-tools .pci-theme-menu { top: 44px; right: 0; }

/* One button language everywhere. */
html:root body .pci-shell-btn.pci-shell-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; min-height: 36px; padding: 0 14px !important; margin: 0;
  border-radius: 10px !important; border: 1px solid var(--pci-border) !important;
  background: var(--pci-surface) !important; color: var(--pci-text) !important;
  font: 700 13px/1 var(--pci-font-sans); letter-spacing: 0; text-transform: none;
  text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transform: none;
  width: auto; flex: 0 0 auto;
}
html:root body .pci-shell-btn.pci-shell-btn:hover { border-color: var(--pci-primary) !important; color: var(--pci-primary) !important; }
html:root body .pci-shell-btn.pci-shell-btn--primary { background: var(--pci-primary) !important; border-color: var(--pci-primary) !important; color: #fff !important; }
html:root body .pci-shell-btn.pci-shell-btn--primary:hover { background: var(--pci-primary-hover) !important; color: #fff !important; }
html:root body .pci-shell-btn.pci-shell-btn--current { border-color: var(--pci-primary) !important; color: var(--pci-accent-ink) !important; background: color-mix(in srgb, var(--pci-primary) 8%, var(--pci-surface)) !important; }
html:root body .pci-shell-btn.pci-shell-btn[hidden] { display: none !important; }
html:root body .pci-shell-btn.pci-shell-btn small:not([class*="badge"]), html:root body .pci-shell-btn.pci-shell-btn span:not([class*="badge"]) { font: inherit; color: inherit; }

/* Action bar: Home + navigation on the left, page actions on the right. */
.pci-shell-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: var(--pci-shell-max); margin: 14px auto 10px; padding: 0 16px;
  font-family:var(--pci-font-sans);
}
.pci-shell-nav, .pci-shell-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pci-shell-actions { justify-content: flex-end; }
.pci-shell-actions:empty { display: none; }
.pci-shell-nav .nav-links { display: contents !important; }
.pci-shell-nav .nav-group { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
.pci-shell-nav .nav-group[hidden] { display: none !important; }
.pci-shell-nav .nav-group-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pci-text-muted); margin-left: 6px; }
.pci-shell-nav .nav-tile { flex-direction: row; }

/* Status messages: only visible when they carry text. */
.status:empty, .vi-status:empty, #status:empty, .pci-status-message:empty { display: none; }

/* Embedded native apps inside PCI wrappers show no second header. */
body.pci-embedded .pci-shell, body.pci-embedded .pci-shell-bar { display: none !important; }

/* Login keeps only the brand header. */
body.pci-login .pci-shell-bar { display: none; }

/* Home with the shell: the shell carries the global actions; the hero keeps the
   banner and tabs. Home without it (body[data-pci-shell="off"]) keeps its clock,
   theme and Sign out inside the hero, so there is nothing to hide. */
body.pci-home.pci-has-shell .hero-toolbar .top-actions { display: none; }

/* Invoice Supervisor: map its private dark palette to PCI tokens so values stay readable. */
body.pci-invoice .panel h2, body.pci-invoice .heading h1, body.pci-invoice .editor h2 { color: var(--pci-text); }
body.pci-invoice .bar-row { color: var(--pci-text-muted); }
body.pci-invoice .bar-row b, body.pci-invoice .kpi b, body.pci-invoice td { color: var(--pci-text); }
body.pci-invoice .bar, body.pci-invoice .table-scroll, body.pci-invoice .status-grid div { background: var(--pci-surface-alt); border-color: var(--pci-border); }
body.pci-invoice .status-grid small, body.pci-invoice .kpi small, body.pci-invoice .kpi span, body.pci-invoice th, body.pci-invoice .heading p { color: var(--pci-text-muted); }
body.pci-invoice .status-grid b { color: var(--pci-text); }
body.pci-invoice th { background: var(--pci-surface-alt); }
body.pci-invoice tbody tr:hover { background: color-mix(in srgb, var(--pci-primary) 6%, var(--pci-surface)) !important; }
body.pci-invoice .stripe { display: none; }

@media (max-width: 720px) {
  :root { --pci-shell-h: 56px; }
  .pci-shell { gap: 10px; padding: 6px 12px; }
  .pci-shell-brand img { height: 32px; }
  .pci-shell-title { padding-left: 10px; }
  .pci-shell-title h1 { font-size: 15px; }
  .pci-shell-eyebrow { font-size: 9px; }
  .pci-shell-tools { gap: 6px; }
  html body .pci-shell .pci-shell-tools .pci-clock, html body .pci-shell .pci-shell-tools [data-pci-clock] { display: none; }
  .pci-shell-tools .pci-shell-btn { padding: 0 10px; }
  .pci-shell-bar { margin: 10px auto 8px; padding: 0 12px; flex-wrap: nowrap; }
  .pci-shell-nav { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pci-shell-actions { flex: 0 0 auto; flex-wrap: nowrap; }
}
@media (max-width: 420px) {
  .pci-shell-eyebrow { display: none; }
  html body .pci-shell .pci-shell-tools [data-pci-accent-picker] { display: none; }
}
@media print { .pci-shell, .pci-shell-bar { display: none !important; } }

/* Consistent icons inside shell buttons. */
.pci-shell-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Label Editor (React bundle): keep its Design / Print tabs, drop its duplicate brand bar. */
body.pci-has-shell #root .topbar .brand-logo,
body.pci-has-shell #root .topbar .clock,
body.pci-has-shell #root .topbar .stripe,
body.pci-has-shell #root .topbar-title h1,
body.pci-has-shell #root .topbar-title .sub { display: none !important; }
body.pci-has-shell #root header.topbar { padding-top: 0 !important; padding-bottom: 6px !important; min-height: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ---- Body unification ---------------------------------------------------- */
/* Export group inside the action bar. */
.pci-shell-export { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--pci-border); }
.pci-shell-export-label { font: 800 10px/1 var(--pci-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pci-text-muted); }
/* Status chips moved from private headers (Parking Operations). */
/* Controls moved into the action bar (e.g. Cashiers business date). */
.pci-shell-actions label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font: 800 10px/1 var(--pci-font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pci-text-muted) !important; }
.pci-shell-actions label input, .pci-shell-actions > input, .pci-shell-actions > select { height: 36px !important; padding: 0 10px !important; border-radius: 10px !important; border: 1px solid var(--pci-border) !important; background: var(--pci-surface) !important; color: var(--pci-text) !important; font: 600 13px var(--pci-font-sans)!important; letter-spacing: 0; text-transform: none; }

/* One status line style: plain text under the action bar, colour only for errors. */
html:root body.pci-has-shell :is(#status, #statusMessage, .status, .vi-status, .dash-status, .pci-status-message):not(:empty) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 2px 4px; min-height: 0; color: var(--pci-text-muted) !important;
  font: 600 13px/1.4 var(--pci-font-sans);
}
html:root body.pci-has-shell :is(#status, #statusMessage, .status, .vi-status, .dash-status):is(.error, .err, .bad, .danger, [data-kind="error"]) { color: var(--pci-danger) !important; }
html:root body.pci-has-shell :is(#status, .status, .vi-status) .pci-status-icon { display: none; }

/* Tool/filter rows look like the dashboard filter cards. */
html:root body.pci-has-shell main > :is(.tools, .toolbar) {
  background: var(--pci-surface); border: 1px solid var(--pci-border); border-radius: 16px;
  box-shadow: var(--pci-shadow-sm); padding: 14px; gap: 10px;
}

/* Auxiliary apps: tabs use the same button language as the rest of PCI ACCESS. */
@media (max-width: 720px) {
  .pci-shell-export-label { display: none; }
}

/* In-page buttons (filters, tool rows, form submit) share the shell button shape. */
html:root body.pci-has-shell main :is(.filters, .tools, .toolbar, .filters-panel) :is(button, .button),
html:root body.pci-has-shell main form:is(.form, .card, #form) > :is(button, .button),
html:root body.pci-has-shell main form:is(.form, .card, #form) :is(button[type="submit"], .button.primary) {
  height: 40px; min-height: 40px; padding: 0 16px; border-radius: 10px !important;
  border: 1px solid var(--pci-border) !important; background: var(--pci-surface) !important; background-image: none;
  color: var(--pci-text); font: 700 13px/1 var(--pci-font-sans); letter-spacing: 0;
  text-transform: none; box-shadow: none; transform: none; width: auto; justify-self: start;
}
html:root body.pci-has-shell main :is(.filters, .tools, .toolbar, .filters-panel) :is(#refresh, .primary, .button.primary, button:not([type]):only-of-type),
html:root body.pci-has-shell main :is(.filters, .tools, .toolbar) :is(button, .button):is([id*="refresh" i], [id*="search" i]),
html:root body.pci-has-shell main form:is(.form, .card, #form) :is(button[type="submit"], .button.primary) {
  background: var(--pci-primary) !important; border-color: var(--pci-primary) !important; color: #fff !important;
}

/* Management/dashboard pages use the same content width as the shell. */
html:root body.pci-invoice main, html:root body.pci-page-contacts main { max-width: 1180px; margin-left: auto; margin-right: auto; }

@media (max-width: 720px) {
  .pci-shell-bar { flex-wrap: wrap; row-gap: 8px; }
  .pci-shell-actions { flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .pci-shell-export { border-right: 0; }
}
@media (max-width: 720px) {
  /* On phones the primary action comes first so it is never scrolled out of view. */
  .pci-shell-actions > .pci-shell-btn--primary { order: -1; }
}

/* Shift Manager lays its body out as a flex row; the shell must stack above the page. */

/* Hardening: aux apps style bare `header`/`nav` elements (gradients, radius,
   padding). The shell and its bar must look identical everywhere. */
html body header.pci-shell.pci-shell {
  position: sticky; top: 0; z-index: 1000;
  align-items: center; gap: 14px;
  margin: 0; border-radius: 0 !important; width: auto !important; max-width: none;
  min-height: var(--pci-shell-h);
  padding: 8px max(16px, calc((100vw - var(--pci-shell-max)) / 2));
  background: var(--pci-surface) !important; color: var(--pci-text) !important;
  border: 0 !important; border-bottom: 1px solid var(--pci-border) !important;
  box-shadow: var(--pci-shadow-sm);
}
html body nav.pci-shell-bar.pci-shell-bar { border-radius: 0; background: transparent; box-shadow: none; border: 0; }
@media (max-width: 720px) {
  html body header.pci-shell.pci-shell { gap: 10px; padding: 6px 12px; }
}

/* Camera Control: light sidebar and shell-style filters, like the rest of PCI ACCESS. */