/* ==========================================================================
   VIJ B2B Platform — design system.

   Deliberately independent of the public marketing site's stylesheet:
   this is enterprise software, not editorial. Cooler neutrals, tighter
   rhythm, denser information, and a full dark theme.

   Contents
     1. Tokens (light + dark)
     2. Reset & typography
     3. App shell (content frame)
     4. Horizontal navigation
     5. Cards & surfaces
     6. Stat tiles
     7. Tables
     8. Forms
     9. Buttons
    10. Badges & pills
    11. Wizard stepper
    12. Alerts, empty states, misc
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  color-scheme: light dark;

  /* Neutrals — cool, screen-native */
  --p-bg: #f7f8fa;
  --p-surface: #ffffff;
  --p-surface-2: #f2f4f7;

  --p-text: #101828;
  --p-text-2: #475467;
  --p-text-3: #667085;
  --p-border: #e4e7ec;
  --p-border-2: #d0d5dd;

  /* Brand — shared with the marketing site for continuity */
  --p-brand: #00508b;
  --p-brand-strong: #003e6d;
  --p-brand-soft: #eaf2f8;
  --p-brand-border: #bcd4e6;

  /* Semantics */
  --p-success: #067647;
  --p-success-soft: #ecfdf3;
  --p-success-border: #abefc6;
  --p-warning: #b54708;
  --p-warning-soft: #fffaeb;
  --p-warning-border: #fedf89;
  --p-danger: #b42318;
  --p-danger-soft: #fef3f2;
  --p-danger-border: #fecdca;
  --p-info: #175cd3;
  --p-info-soft: #eff8ff;
  --p-info-border: #b2ddff;

  /* Shape & depth — soft, never heavy */
  --p-r-sm: 6px;
  --p-r: 10px;
  --p-r-lg: 14px;
  --p-r-pill: 999px;
  --p-shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
  --p-shadow-sm: 0 1px 3px rgb(16 24 40 / 0.1), 0 1px 2px rgb(16 24 40 / 0.06);
  --p-shadow: 0 4px 8px -2px rgb(16 24 40 / 0.1), 0 2px 4px -2px rgb(16 24 40 / 0.06);
  --p-shadow-lg: 0 12px 16px -4px rgb(16 24 40 / 0.08), 0 4px 6px -2px rgb(16 24 40 / 0.03);

  /* Navigation brand bar */
  --p-nav: #00508b;
  --p-nav-strong: #003e6d;

  --p-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --p-fast: 140ms;
  --p-base: 220ms;

  --p-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"] {
  --p-bg: #0b0f14;
  --p-surface: #131a23;
  --p-surface-2: #1a222d;
  --p-nav: #0b1220;
  --p-nav-strong: #070c16;

  --p-text: #e7ecf3;
  --p-text-2: #98a5b7;
  --p-text-3: #7d8b9e;
  --p-border: #232e3b;
  --p-border-2: #2f3b4a;

  --p-brand: #4a9fdc;
  --p-brand-strong: #6bb4e8;
  --p-brand-soft: #10202e;
  --p-brand-border: #1d364c;

  --p-success-soft: #0a1f16;
  --p-success-border: #12492f;
  --p-success: #75e0a7;
  --p-warning-soft: #241a08;
  --p-warning-border: #4e3510;
  --p-warning: #fdb022;
  --p-danger-soft: #2a1210;
  --p-danger-border: #55211c;
  --p-danger: #fda29b;
  --p-info-soft: #0d1d33;
  --p-info-border: #17325a;
  --p-info: #84caff;

  --p-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --p-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
  --p-shadow: 0 4px 10px -2px rgb(0 0 0 / 0.55);
  --p-shadow-lg: 0 14px 24px -6px rgb(0 0 0 / 0.6);
}

/* ------------------------------------------------- 2. Reset & typography */
*, *::before, *::after { box-sizing: border-box; }

.p-app, .p-auth {
  margin: 0;
  font-family: var(--p-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--p-text);
  background: var(--p-bg);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

.p-app h1, .p-app h2, .p-app h3, .p-app h4,
.p-auth h1, .p-auth h2, .p-auth h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--p-text);
}

/* :where() for the same reason as the anchor reset below. `.p-app p`
   (0,1,1) outranked every component class (0,1,0), so a <p> could not be
   given a margin: .p-empty__text lost its `margin: 0 auto` and every
   empty state's explanatory line sat flush left instead of centred, and
   the catalogue's ledes and prices lost their spacing. */
:where(.p-app, .p-auth) p { margin: 0; }
/* :where() keeps this at zero specificity so component classes (.p-btn,
   .p-nav-link, .p-menu__item) always win. Without it, `.p-app a` (0,1,1)
   beat `.p-btn--primary` (0,1,0) and painted button text brand-blue on a
   brand-blue background — invisible in dark mode. */
:where(.p-app, .p-auth) a { color: var(--p-brand); text-decoration: none; }
:where(.p-app, .p-auth) a:hover { text-decoration: underline; }
.p-app img, .p-auth img { max-width: 100%; display: block; }

.p-h1 { font-size: 24px; }
.p-h2 { font-size: 18px; }
.p-h3 { font-size: 15px; }
.p-muted { color: var(--p-text-2); }
.p-dim { color: var(--p-text-3); }
.p-small { font-size: 13px; }
.p-tiny { font-size: 12px; }
.p-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:where(.p-app, .p-auth) :focus-visible {
  outline: 2px solid var(--p-brand);
  outline-offset: 2px;
  border-radius: var(--p-r-sm);
}

.p-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------- 3. App shell (horizontal) */
.p-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.p-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }

.p-content {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 22px 24px 48px;
  flex: 1 1 auto;
}
.p-content--narrow { max-width: 900px; }

.p-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.p-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--p-text-3); margin-bottom: 6px;
  list-style: none; padding: 0;
}
.p-crumbs li { display: flex; align-items: center; gap: 6px; }
.p-crumbs li + li::before { content: "/"; color: var(--p-border-2); }

/* ------------------------------------------ 4. Horizontal navigation */
.p-topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--p-nav);
  box-shadow: 0 1px 0 rgb(16 24 40 / 0.08), 0 2px 8px -4px rgb(16 24 40 / 0.18);
}

/* ---- Brand bar ---- */
.p-topnav__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 10px 24px;
}

.p-topnav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.p-topnav__brand:hover { text-decoration: none; }

.p-topnav__logo { height: 30px; width: auto; flex-shrink: 0; }
.p-topnav__wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.p-topnav__sub {
  font-size: 11px; color: rgb(255 255 255 / 0.62); letter-spacing: 0.02em;
}

.p-topnav__search { position: relative; flex: 1 1 auto; max-width: 460px; }
.p-topnav__search input {
  width: 100%; height: 38px;
  padding: 0 12px 0 36px;
  font: inherit; font-size: 13.5px; color: #fff;
  background: rgb(255 255 255 / 0.13);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--p-r);
  transition: background var(--p-fast), border-color var(--p-fast);
}
.p-topnav__search input::placeholder { color: rgb(255 255 255 / 0.6); }
.p-topnav__search input:focus {
  outline: none;
  background: rgb(255 255 255 / 0.2);
  border-color: rgb(255 255 255 / 0.45);
}
.p-topnav__search svg {
  position: absolute; left: 11px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: rgb(255 255 255 / 0.7);
  pointer-events: none;
}

.p-topnav__actions {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
}

.p-topnav__help {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--p-r);
  font-size: 13px; font-weight: 500;
  color: rgb(255 255 255 / 0.88); text-decoration: none;
  transition: background var(--p-fast);
}
.p-topnav__help:hover {
  background: rgb(255 255 255 / 0.12); color: #fff; text-decoration: none;
}
.p-topnav__help svg { width: 17px; height: 17px; }

/* ---- In-page search box (filter toolbars on list screens) ---- */
.p-search { position: relative; flex: 1 1 auto; max-width: 460px; }
.p-search input {
  width: 100%; height: 38px;
  padding: 0 12px 0 36px;
  font: inherit; font-size: 13.5px; color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--p-r);
  box-shadow: var(--p-shadow-xs);
  transition: border-color var(--p-fast), box-shadow var(--p-fast);
}
.p-search input::placeholder { color: var(--p-text-3); }
.p-search input:focus {
  outline: none;
  border-color: var(--p-brand);
  box-shadow: 0 0 0 3px var(--p-brand-soft);
}
.p-search svg {
  position: absolute; left: 11px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--p-text-3); pointer-events: none;
}

/* ---- Stay search bar (Book: hotels / transfers / sightseeing / packages) ---- */
.p-searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-shadow-sm);
}

.p-searchbar__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  padding: 8px 12px;
  border: 1.5px solid var(--p-border-2);
  border-radius: var(--p-r);
  background: var(--p-surface);
  cursor: text;
  transition: border-color var(--p-fast), box-shadow var(--p-fast);
}
.p-searchbar__field:focus-within {
  border-color: var(--p-brand);
  box-shadow: 0 0 0 3px var(--p-brand-soft);
}
/* Descendant selector, not a direct-child one: the Rooms & Guests field's
   icon sits inside <summary>, one level deeper than the other fields'.
   A `>` combinator here silently never matches it, and an unsized <svg>
   falls back to the browser's raw default (~300x150px). */
.p-searchbar__field svg {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--p-text-3);
}

.p-searchbar__field-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.p-searchbar__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-text-3);
  margin-bottom: 1px;
}

.p-searchbar__field input,
.p-searchbar__field select {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--p-text);
  width: 100%;
}
.p-searchbar__field input:focus,
.p-searchbar__field select:focus { outline: none; }
.p-searchbar__field select { cursor: pointer; }

.p-searchbar__dates {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.p-searchbar__dates > span {
  display: flex;
  flex-direction: column;
  /* Native <input type="date"> renders its own locale-formatted text
     (e.g. "05-May-2026") that CSS can't reflow — if this shrinks below
     what that text needs, the browser silently clips it instead of
     wrapping. 108px is enough for the longest realistic date text. */
  min-width: 108px;
  flex: 1 1 0;
}
.p-searchbar__dates-sep {
  color: var(--p-text-3);
  font-size: 13px;
  flex-shrink: 0;
}

/* Whole date field is the click target — book-search.js opens the native
   picker from it, so the label and the empty space beside the date read
   as clickable too, not just the date text. */
.p-searchbar__dates > span,
.p-searchbar__dates input[type="date"] {
  cursor: pointer;
}
/* Only once JS has confirmed showPicker() exists (see book-search.js) is
   the native indicator redundant. Without that guard, hiding it would
   leave no way at all to reach a calendar. */
.p-searchbar--haspicker .p-searchbar__dates
  input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* The Rooms & Guests field is a <details class="p-menu"> — inherits the
   shared one-open-at-a-time / Escape-to-close behaviour from portal.js. */
.p-searchbar__guests > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}
.p-searchbar__guests > summary::-webkit-details-marker { display: none; }
.p-searchbar__guests-panel {
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.p-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.p-stepper-row label { font-size: 13px; font-weight: 500; color: var(--p-text); }
.p-stepper-row input[type="number"] {
  width: 60px;
  text-align: center;
  padding: 6px 4px;
  font: inherit;
  font-size: 13.5px;
  color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--p-r-sm);
}
.p-stepper-row input[type="number"]:focus {
  outline: none;
  border-color: var(--p-brand);
}

.p-searchbar__submit {
  flex: 0 0 auto;
  height: auto;
  align-self: stretch;
  padding-inline: 28px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .p-searchbar { flex-direction: column; align-items: stretch; }
  .p-searchbar__field { width: 100%; }
  .p-searchbar__submit { width: 100%; }
}

/* ---- Recent searches (client-side only, see book-search.js) ---- */
.p-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.p-recent__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border-radius: var(--p-r-pill);
  border: 1px solid var(--p-border-2);
  background: var(--p-surface);
  font-size: 12.5px;
  color: var(--p-text-2);
  cursor: pointer;
  transition: border-color var(--p-fast), color var(--p-fast);
}
.p-recent__chip:hover { border-color: var(--p-brand-border); color: var(--p-text); }
.p-recent__chip button {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--p-surface-2);
  color: var(--p-text-3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.p-recent__chip button:hover { background: var(--p-border); color: var(--p-text); }

/* ---- Book search results: toolbar, sort, star filter, result cards ---- */
.p-result-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.p-result-count { font-size: 13.5px; color: var(--p-text-2); }
.p-result-count strong { color: var(--p-text); }

.p-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.p-sort a {
  padding: 7px 13px;
  border-radius: var(--p-r-pill);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--p-border-2);
  color: var(--p-text-2);
  text-decoration: none;
  transition: border-color var(--p-fast), color var(--p-fast), background var(--p-fast);
}
.p-sort a:hover { border-color: var(--p-brand-border); color: var(--p-text); text-decoration: none; }
.p-sort a.is-active {
  background: var(--p-brand); border-color: var(--p-brand); color: #fff;
}

.p-filter-rail { display: flex; flex-direction: column; gap: 14px; }
.p-filter-rail form { display: flex; flex-direction: column; gap: 14px; }

.p-filter-options { display: flex; flex-direction: column; gap: 10px; }
.p-filter-options label {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--p-text); cursor: pointer;
}

.p-filter-price { display: flex; align-items: center; gap: 8px; }
.p-filter-price input {
  width: 0; flex: 1 1 auto; min-width: 0;
  padding: 7px 9px; border: 1px solid var(--p-border); border-radius: var(--p-r);
  background: var(--p-surface); color: var(--p-text); font-size: 13px;
}
.p-filter-price span { color: var(--p-text-3); }

.p-results { display: flex; flex-direction: column; gap: 14px; }

.p-result-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-shadow-xs);
  transition: box-shadow var(--p-fast), border-color var(--p-fast);
}
.p-result-card:hover { box-shadow: var(--p-shadow-sm); border-color: var(--p-border-2); }
.p-result-card--unavailable { opacity: 0.65; }

.p-result-card__media {
  flex: 0 0 140px;
  width: 140px;
  height: 110px;
  border-radius: var(--p-r);
  overflow: hidden;
  background: var(--p-surface-2);
}
.p-result-card__media img { width: 100%; height: 100%; object-fit: cover; }
.p-result-card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--p-text-3);
}
.p-result-card__placeholder svg { width: 34px; height: 34px; }

.p-result-card__body { flex: 1 1 auto; min-width: 0; }
.p-result-card__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.p-result-card__title { font-size: 15px; font-weight: 600; margin: 0; }
.p-result-card__stars {
  font-size: 12.5px; font-weight: 600; color: var(--p-warning); white-space: nowrap;
}
.p-result-card__meta { font-size: 12.5px; color: var(--p-text-2); margin-top: 3px; }
.p-result-card__detail { font-size: 12.5px; color: var(--p-text-3); margin-top: 8px; }
.p-result-card__badges { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

.p-result-card__price {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
  gap: 10px;
}
.p-result-card__total {
  font-size: 17px; font-weight: 700; color: var(--p-text);
  font-variant-numeric: tabular-nums;
}
.p-result-card__unit, .p-result-card__net {
  font-size: 11.5px; color: var(--p-text-3); font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .p-result-card { flex-direction: column; }
  .p-result-card__media { width: 100%; height: 150px; }
  .p-result-card__price { flex-direction: row-reverse; width: 100%; align-items: center; }
}

/* ---- Icon button + avatar (shared by the nav, tables and cards) ---- */
.p-icon-btn {
  position: relative;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--p-r);
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--p-text-2); cursor: pointer;
  transition: background var(--p-fast), color var(--p-fast);
}
.p-icon-btn:hover { background: var(--p-surface-2); color: var(--p-text); }
/* Explicit size: without it an inline <svg> falls back to 300x150. */
.p-icon-btn svg { width: 18px; height: 18px; }

.p-icon-btn__dot {
  position: absolute; top: 5px; right: 5px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: var(--p-r-pill);
  background: var(--p-danger); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}

.p-icon-btn--onbrand { color: rgb(255 255 255 / 0.85); }
.p-icon-btn--onbrand:hover {
  background: rgb(255 255 255 / 0.14); color: #fff;
}

.p-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--p-brand-soft); color: var(--p-brand);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--p-brand-border);
  object-fit: cover;
}
.p-avatar--lg { width: 56px; height: 56px; font-size: 18px; }

.p-topnav__user {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px; border-radius: var(--p-r);
  background: none; border: 1px solid transparent; cursor: pointer;
  color: #fff; text-align: left;
}
.p-topnav__user:hover { background: rgb(255 255 255 / 0.12); }
.p-topnav__user .p-avatar {
  background: rgb(255 255 255 / 0.2);
  border-color: rgb(255 255 255 / 0.3);
  color: #fff;
}
.p-topnav__user-text { display: flex; flex-direction: column; line-height: 1.2; }
.p-topnav__user-name { font-size: 13px; font-weight: 600; }
.p-topnav__user-role { font-size: 11.5px; color: rgb(255 255 255 / 0.65); }
.p-topnav__caret { width: 14px; height: 14px; color: rgb(255 255 255 / 0.7); }

/* ---- Tab row ---- */
.p-topnav__menu {
  border-top: 1px solid rgb(255 255 255 / 0.12);
  background: rgb(0 0 0 / 0.08);
}

.p-topnav__tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 20px;
  /* Must stay visible: `overflow-x: auto` here would clip the dropdown
     panels, because setting overflow on one axis forces the other axis
     from `visible` to `auto`. Tabs wrap instead of scrolling. */
  overflow: visible;
}

.p-tab { position: relative; }
.p-tab > summary { list-style: none; cursor: pointer; }
.p-tab > summary::-webkit-details-marker { display: none; }

.p-tab__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 84px;
  padding: 9px 14px 8px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: rgb(255 255 255 / 0.82);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--p-fast), color var(--p-fast);
}
.p-tab__button:hover {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  text-decoration: none;
}
.p-tab__button.is-active {
  background: var(--p-bg);
  color: var(--p-brand);
  font-weight: 600;
}
.p-tab__icon { width: 19px; height: 19px; }
.p-tab__label { display: flex; align-items: center; gap: 4px; }
.p-tab__caret {
  width: 12px; height: 12px; opacity: 0.75;
  transition: rotate var(--p-fast) var(--p-ease);
}
.p-tab[open] .p-tab__caret { rotate: 180deg; }
.p-tab[open] .p-tab__button {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}
.p-tab[open] .p-tab__button.is-active {
  background: var(--p-bg);
  color: var(--p-brand);
}

.p-tab__panel {
  left: 0;
  right: auto;
  top: calc(100% + 2px);
  min-width: 232px;
}
/* Keep the last tabs' panels inside the viewport. */
.p-tab:nth-last-child(-n + 2) .p-tab__panel { left: auto; right: 0; }

.p-topnav__burger {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.p-topnav__burger svg { width: 18px; height: 18px; }

/* Dropdown panels are shared with the account/notification menus. */
.p-menu { position: relative; }
.p-menu > summary { list-style: none; cursor: pointer; }
.p-menu > summary::-webkit-details-marker { display: none; }
.p-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 240px; padding: 6px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-shadow-lg);
}
.p-menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--p-r-sm);
  font-size: 13.5px; color: var(--p-text); text-decoration: none;
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
}
.p-menu__item:hover {
  background: var(--p-surface-2); color: var(--p-brand); text-decoration: none;
}
.p-menu__sep { height: 1px; background: var(--p-border); margin: 6px 0; }

/* ------------------------------------------------- 5. Cards & surfaces */
.p-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-shadow-xs);
}
.p-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--p-border);
}
.p-card__body { padding: 20px; }
.p-card__foot {
  padding: 14px 20px; border-top: 1px solid var(--p-border);
  background: var(--p-surface-2);
  border-radius: 0 0 var(--p-r-lg) var(--p-r-lg);
}

.p-grid { display: grid; gap: 16px; }
.p-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* Filter rail first, results second — narrow fixed-ish rail, flexible
   results. Used by the Book search screens. */
.p-grid--filters { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }

.p-stack { display: flex; flex-direction: column; gap: 16px; }
.p-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-row--between { justify-content: space-between; }
.p-divider { height: 1px; background: var(--p-border); border: 0; margin: 0; }

/* Definition list used for record detail */
.p-dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px 18px; }
.p-dl dt { font-size: 12.5px; color: var(--p-text-3); }
.p-dl dd { margin: 0; font-size: 13.5px; color: var(--p-text); }

/* ---------------------------------------------------- 6. Stat tiles */
.p-stat {
  padding: 18px 20px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-shadow-xs);
  transition: box-shadow var(--p-base) var(--p-ease),
              transform var(--p-base) var(--p-ease);
}
.p-stat:hover { box-shadow: var(--p-shadow); transform: translateY(-1px); }
.p-stat__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--p-text-2);
}
.p-stat__value {
  margin-top: 10px; font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--p-text);
  font-variant-numeric: tabular-nums;
}
.p-stat__meta { margin-top: 4px; font-size: 12.5px; color: var(--p-text-3); }
.p-stat__icon {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--p-brand-soft); color: var(--p-brand);
}
.p-stat__icon svg { width: 16px; height: 16px; }

/* -------------------------------------------------------- 7. Tables */
.p-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  background: var(--p-surface);
}
.p-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.p-table thead th {
  position: sticky; top: 0;
  text-align: left; white-space: nowrap;
  padding: 11px 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--p-text-3);
  background: var(--p-surface-2);
  border-bottom: 1px solid var(--p-border);
}
.p-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--p-border);
  vertical-align: middle;
}
.p-table tbody tr:last-child td { border-bottom: 0; }
.p-table tbody tr { transition: background var(--p-fast); }
.p-table tbody tr:hover { background: var(--p-surface-2); }
.p-table__primary { font-weight: 600; color: var(--p-text); }
.p-table__sub { font-size: 12px; color: var(--p-text-3); }
.p-table td.p-num, .p-table th.p-num {
  text-align: right; font-variant-numeric: tabular-nums;
}

.p-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.p-toolbar__spacer { margin-left: auto; }

.p-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; font-size: 13px; color: var(--p-text-2);
}
.p-pagination__links { display: flex; gap: 6px; }

/* --------------------------------------------------------- 8. Forms */
.p-form { display: flex; flex-direction: column; gap: 18px; }
.p-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.p-form-grid--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 500; color: var(--p-text); }
.field__req { color: var(--p-danger); }
.field__help { font-size: 12.5px; color: var(--p-text-3); }
.field__error { font-size: 12.5px; color: var(--p-danger); font-weight: 500; }

.field__input, .field__select, .field__textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  font: inherit; font-size: 13.5px;
  color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--p-r);
  box-shadow: var(--p-shadow-xs);
  transition: border-color var(--p-fast), box-shadow var(--p-fast);
}
.field__textarea { min-height: 96px; resize: vertical; }
.field__input::placeholder, .field__textarea::placeholder { color: var(--p-text-3); }
.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: none;
  border-color: var(--p-brand);
  box-shadow: 0 0 0 3px var(--p-brand-soft);
}
.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea { border-color: var(--p-danger); }
.field--error .field__input:focus {
  box-shadow: 0 0 0 3px var(--p-danger-soft);
}

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.field__file {
  width: 100%; font-size: 13px; color: var(--p-text-2);
  padding: 10px; background: var(--p-surface-2);
  border: 1px dashed var(--p-border-2); border-radius: var(--p-r);
  cursor: pointer;
}

/* ---- Company logo: current logo beside its upload form ---- */
.p-logo-upload {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.p-logo-upload__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 132px;
  height: 96px;
  padding: 10px;
  background: var(--p-surface-2);
  border: 1px solid var(--p-border-2);
  border-radius: var(--p-r);
}
/* Logos arrive at any aspect ratio — contain keeps a wide lockup and a
   square mark both intact rather than cropping one of them. */
.p-logo-upload__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.p-logo-upload__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 240px;
  min-width: 0;
}
.field__file::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 500;
  margin-right: 12px; padding: 6px 12px; cursor: pointer;
  color: var(--p-text); background: var(--p-surface);
  border: 1px solid var(--p-border-2); border-radius: var(--p-r-sm);
}

.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field__check { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--p-brand); }

/* ---- Password field: show/hide toggle ---- */
.field__password { position: relative; }
.field__password .field__input { padding-right: 42px; }

.field__eye {
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--p-r-sm);
  background: transparent;
  border: 0;
  color: var(--p-text-3);
  cursor: pointer;
  transition: background var(--p-fast), color var(--p-fast);
}
.field__eye:hover { background: var(--p-surface-2); color: var(--p-text-2); }
.field__eye:focus-visible { outline: 2px solid var(--p-brand); outline-offset: 1px; }
.field__eye svg { width: 18px; height: 18px; }

/* --------------------------------------------------------- 9. Buttons */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  border-radius: var(--p-r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--p-fast), border-color var(--p-fast),
              color var(--p-fast), box-shadow var(--p-fast), transform var(--p-fast);
}
.p-btn:hover { text-decoration: none; }
.p-btn:active { transform: translateY(0.5px); }
.p-btn svg { width: 16px; height: 16px; }
.p-btn--sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
.p-btn--lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.p-btn--block { width: 100%; }

.p-btn--primary { background: var(--p-brand); color: #fff; box-shadow: var(--p-shadow-xs); }
.p-btn--primary:hover { background: var(--p-brand-strong); color: #fff; }

.p-btn--secondary {
  background: var(--p-surface); color: var(--p-text);
  border-color: var(--p-border-2); box-shadow: var(--p-shadow-xs);
}
.p-btn--secondary:hover { background: var(--p-surface-2); }

.p-btn--ghost { background: transparent; color: var(--p-text-2); }
.p-btn--ghost:hover { background: var(--p-surface-2); color: var(--p-text); }

.p-btn--success { background: var(--p-success); color: #fff; }
.p-btn--success:hover { filter: brightness(0.94); color: #fff; }
.p-btn--danger { background: var(--p-danger); color: #fff; }
.p-btn--danger:hover { filter: brightness(0.94); color: #fff; }
.p-btn--warning {
  background: var(--p-warning-soft); color: var(--p-warning);
  border-color: var(--p-warning-border);
}

.p-btn:disabled, .p-btn[aria-disabled="true"] {
  opacity: 0.55; pointer-events: none;
}

/* ------------------------------------------------ 10. Badges & pills */
.p-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--p-r-pill);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent;
}
.p-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.p-badge--neutral {
  background: var(--p-surface-2); color: var(--p-text-2); border-color: var(--p-border);
}
.p-badge--success {
  background: var(--p-success-soft); color: var(--p-success);
  border-color: var(--p-success-border);
}
.p-badge--warning {
  background: var(--p-warning-soft); color: var(--p-warning);
  border-color: var(--p-warning-border);
}
.p-badge--danger {
  background: var(--p-danger-soft); color: var(--p-danger);
  border-color: var(--p-danger-border);
}
.p-badge--info {
  background: var(--p-info-soft); color: var(--p-info); border-color: var(--p-info-border);
}
.p-badge--brand {
  background: var(--p-brand-soft); color: var(--p-brand);
  border-color: var(--p-brand-border);
}
.p-badge--plain::before { display: none; }

/* --------------------------------------------------- 11. Wizard stepper */
.p-stepper {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  list-style: none; margin: 0 0 26px; padding: 0;
}
.p-step { display: flex; align-items: center; gap: 10px; }
.p-step__dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600;
  background: var(--p-surface); color: var(--p-text-3);
  border: 1.5px solid var(--p-border-2);
  transition: background var(--p-base), color var(--p-base), border-color var(--p-base);
}
.p-step__label { font-size: 12.5px; color: var(--p-text-3); white-space: nowrap; }
.p-step__bar {
  width: 34px; height: 2px; margin: 0 10px;
  background: var(--p-border-2); border-radius: 2px;
}
.p-step.is-done .p-step__dot {
  background: var(--p-success); border-color: var(--p-success); color: #fff;
}
.p-step.is-done .p-step__label { color: var(--p-text-2); }
.p-step.is-current .p-step__dot {
  background: var(--p-brand); border-color: var(--p-brand); color: #fff;
  box-shadow: 0 0 0 4px var(--p-brand-soft);
}
.p-step.is-current .p-step__label { color: var(--p-text); font-weight: 600; }

.p-progress {
  height: 5px; border-radius: var(--p-r-pill);
  background: var(--p-surface-2); overflow: hidden;
}
.p-progress__bar {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--p-brand), #3b8fd0);
  transition: width var(--p-base) var(--p-ease);
}

/* ----------------------------------- 12. Alerts, empty states, misc */
.p-alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--p-r);
  border: 1px solid var(--p-border); background: var(--p-surface-2);
  font-size: 13.5px;
}
.p-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.p-alert__title { font-weight: 600; margin-bottom: 2px; }
.p-alert--success {
  background: var(--p-success-soft); border-color: var(--p-success-border);
  color: var(--p-success);
}
.p-alert--warning {
  background: var(--p-warning-soft); border-color: var(--p-warning-border);
  color: var(--p-warning);
}
.p-alert--danger {
  background: var(--p-danger-soft); border-color: var(--p-danger-border);
  color: var(--p-danger);
}
.p-alert--info {
  background: var(--p-info-soft); border-color: var(--p-info-border);
  color: var(--p-info);
}
.p-alert--success .p-alert__body,
.p-alert--warning .p-alert__body,
.p-alert--danger .p-alert__body,
.p-alert--info .p-alert__body { color: inherit; }

.p-empty {
  padding: 56px 24px; text-align: center;
  border: 1px dashed var(--p-border-2); border-radius: var(--p-r-lg);
  background: var(--p-surface);
}
.p-empty__icon {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--p-surface-2); color: var(--p-text-3);
}
.p-empty__icon svg { width: 21px; height: 21px; }
.p-empty__title { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.p-empty__text { font-size: 13.5px; color: var(--p-text-2); max-width: 42ch; margin: 0 auto; }

/* Timeline used for audit history */
.p-timeline { list-style: none; margin: 0; padding: 0; }
.p-timeline li {
  position: relative; padding: 0 0 18px 24px;
  border-left: 1.5px solid var(--p-border); margin-left: 5px;
}
.p-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.p-timeline li::before {
  content: ""; position: absolute; left: -5.5px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--p-surface); border: 2px solid var(--p-brand);
}
.p-timeline__title { font-size: 13.5px; font-weight: 500; }
.p-timeline__meta { font-size: 12px; color: var(--p-text-3); margin-top: 2px; }

/* ---------------------------------------------- Quote builder (day cards) */
.q-day {
  padding: 14px 16px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-r);
  background: var(--p-surface-2);
}

.q-day__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.q-day__num {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--p-r-pill);
  background: var(--p-brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.q-day__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.q-lines {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.q-lines td {
  padding: 8px 10px;
  border-top: 1px solid var(--p-border);
  vertical-align: top;
  font-size: 13px;
}

.q-lines tr:first-child td { border-top: 1px solid var(--p-border); }
.q-lines td.p-num { text-align: right; white-space: nowrap; }

@media (max-width: 640px) {
  .q-lines, .q-lines tbody, .q-lines tr, .q-lines td { display: block; width: 100%; }
  .q-lines td { border-top: 0; padding: 2px 0; }
  .q-lines tr { border-top: 1px solid var(--p-border); padding: 8px 0; }
  .q-lines td.p-num { text-align: left; }
}

/* ------------------------------------------------------ CRM pipeline board */
.crm-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.crm-col {
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r-lg);
  padding: 12px;
  min-width: 0;
}

.crm-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.crm-col__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-text-2);
}

.crm-col__count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--p-r-pill);
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: var(--p-text-2);
}

.crm-col__value {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--p-text-3);
  font-variant-numeric: tabular-nums;
}

.crm-col__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.crm-card {
  display: block;
  padding: 10px 12px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-r);
  text-decoration: none;
  box-shadow: var(--p-shadow-xs);
  transition:
    transform var(--p-fast) var(--p-ease),
    border-color var(--p-fast) var(--p-ease),
    box-shadow var(--p-fast) var(--p-ease);
}

.crm-card:hover {
  transform: translateY(-1px);
  border-color: var(--p-brand-border);
  box-shadow: var(--p-shadow-sm);
  text-decoration: none;
}

.crm-card__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
  line-height: 1.3;
}

.crm-card__meta {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--p-text-3);
}

.crm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
}

/* ------------------------------------------------------- Support thread */
.sup-msg {
  padding: 12px 14px;
  border-radius: var(--p-r);
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
}

.sup-msg--internal {
  background: var(--p-warning-soft);
  border-color: var(--p-warning-border);
}

/* Auth screens (split layout) */
.p-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.p-auth__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(24px, 6vw, 80px);
}
.p-auth__card { width: 100%; max-width: 400px; margin: 0 auto; }
.p-auth__aside {
  position: relative; overflow: hidden;
  background: var(--p-nav-strong); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px;
}
.p-auth__aside img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.34;
}
.p-auth__aside > * { position: relative; }
.p-auth__quote {
  font-size: 21px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em;
  max-width: 22ch;
}

.p-logo-lockup { height: 34px; width: auto; }

/* Auth-shell logo: dark lockup on the light theme's off-white panel,
   light lockup on the dark theme's near-black panel — same dark/white
   swap rule as the public site header (media.css .brand__logo--*),
   driven by [data-theme] instead of scroll/overlay state. */
.p-logo-lockup--light { display: none; }

[data-theme="dark"] .p-logo-lockup--dark { display: none; }
[data-theme="dark"] .p-logo-lockup--light { display: inline-block; }

/* ------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .p-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-grid--sidebar, .p-grid--filters { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  /* Search moves out of the brand bar; the tab row scrolls sideways. */
  .p-topnav__search { display: none; }
  .p-topnav__help span { display: none; }
  .p-grid--2, .p-grid--3 { grid-template-columns: 1fr; }
  .p-form-grid { grid-template-columns: 1fr; }
  .p-auth { grid-template-columns: 1fr; }
  .p-auth__aside { display: none; }
  .p-dl { grid-template-columns: 1fr; gap: 3px 0; }
  .p-dl dd { margin-bottom: 10px; }
}

@media (max-width: 760px) {
  /* Tabs collapse behind a Menu button and stack as a full-width drawer. */
  .p-topnav__burger { display: flex; }
  .p-topnav__tabs {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 12px 12px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .p-app.is-nav-open .p-topnav__tabs { display: flex; }
  .p-tab { width: 100%; }
  .p-tab__button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    width: 100%;
    border-radius: var(--p-r-sm);
    padding: 11px 12px;
    font-size: 14px;
  }
  .p-tab__caret { margin-left: auto; }
  .p-tab__panel {
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 2px 0 6px 30px;
  }
  .p-menu__item { color: rgb(255 255 255 / 0.85); }
  .p-menu__item:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
  /* The account/notification panels keep their card styling. */
  .p-topnav__actions .p-menu__panel {
    position: absolute;
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    box-shadow: var(--p-shadow-lg);
    padding: 6px;
  }
  .p-topnav__actions .p-menu__item { color: var(--p-text); }
}

@media (max-width: 640px) {
  .p-content { padding: 16px 14px 40px; }
  .p-topnav__bar { padding: 10px 14px; gap: 10px; }
  .p-grid--4 { grid-template-columns: 1fr; }
  .p-topnav__user-text, .p-topnav__sub { display: none; }
  .p-stepper { gap: 6px; }
  .p-step__label, .p-step__bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p-app *, .p-auth * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------
   Safety net: an inline icon <svg> that reaches this point without ANY
   sizing rule having matched it (component classes above all take
   precedence — this has low specificity and sits last) would otherwise
   fall back to the browser's raw default of ~300x150px and blow out
   whatever it sits in. 20px is a reasonable universal default, matching
   the middle of this stylesheet's existing 16-21px icon sizes.
   ------------------------------------------------------------------- */
.p-app svg:not([width]), .p-auth svg:not([width]) {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------ 13. Coarse-pointer targets */
/* The 44x44 minimum is a touch rule, not a desktop one — raising every
   control to 44px unconditionally would cost this console the density it
   is built for. Scoped to coarse pointers so tablets and phones get the
   target size while mouse users keep the compact rhythm. */
@media (pointer: coarse) {
  .p-btn { min-height: 44px; }
  .p-btn--sm { min-height: 40px; }
  .p-icon-btn { width: 44px; height: 44px; }
  .field__input, .field__select, .field__textarea { min-height: 44px; }
  .p-search input, .p-topnav__search input { height: 44px; }
  .p-tab__button { min-height: 44px; }
  /* 8px+ between adjacent targets so a fingertip cannot hit two. */
  .p-toolbar, .p-sort, .p-row { gap: 10px; }
}

/* ==========================================================================
   14. Visual refinement pass

   Polish only — no layout or behaviour is redefined here, so every screen
   keeps its structure. Three things carry the "premium" read in a console
   like this: layered elevation instead of a single flat shadow, numerals
   that line up, and surfaces that separate from the page without shouting.
   ========================================================================== */

:root {
  /* Layered shadows: a tight contact shadow plus a wider ambient one.
     A single blur reads flat at every size; two reads like a real card.
     The hairline is folded in as a colour stop so a card needs no border
     of its own on top of it. */
  --p-shadow-xs:
    0 0 0 1px rgb(16 24 40 / 0.04),
    0 1px 2px -1px rgb(16 24 40 / 0.08);
  --p-shadow-sm:
    0 0 0 1px rgb(16 24 40 / 0.04),
    0 1px 3px rgb(16 24 40 / 0.07),
    0 4px 8px -4px rgb(16 24 40 / 0.06);
  --p-shadow:
    0 0 0 1px rgb(16 24 40 / 0.04),
    0 2px 4px -2px rgb(16 24 40 / 0.06),
    0 8px 16px -6px rgb(16 24 40 / 0.10);
  --p-shadow-lg:
    0 0 0 1px rgb(16 24 40 / 0.05),
    0 4px 8px -4px rgb(16 24 40 / 0.06),
    0 20px 32px -12px rgb(16 24 40 / 0.14);
}

[data-theme="dark"] {
  /* On a dark ground a drop shadow barely reads, so the top highlight
     does the lifting instead — the same trick native dark UIs use. */
  --p-shadow-xs:
    inset 0 1px 0 rgb(255 255 255 / 0.03),
    0 0 0 1px rgb(0 0 0 / 0.5);
  --p-shadow-sm:
    inset 0 1px 0 rgb(255 255 255 / 0.04),
    0 0 0 1px rgb(0 0 0 / 0.5),
    0 2px 6px rgb(0 0 0 / 0.4);
  --p-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 0 0 1px rgb(0 0 0 / 0.55),
    0 8px 18px -6px rgb(0 0 0 / 0.6);
  --p-shadow-lg:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 22px 38px -12px rgb(0 0 0 / 0.7);
}

/* ---- Numerals ---- */
/* Any figure a person compares down a column has to be tabular, or the
   digits jitter and the column stops being scannable. */
.p-stat__value, .p-table td.p-num, .p-table th.p-num,
.p-result-card__total, .p-result-card__unit, .p-result-card__net {
  font-variant-numeric: tabular-nums;
}

/* ---- Stat tiles ---- */
.p-stat {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--p-surface-2) 0%, var(--p-surface) 46%);
}
/* A brand hairline along the top edge — the one piece of colour on an
   otherwise neutral tile, and it ties the row to the nav bar above it. */
.p-stat::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg,
    var(--p-brand) 0%, var(--p-brand-border) 60%, transparent 100%);
  opacity: 0.55;
}
.p-stat__value {
  font-size: 30px;
  letter-spacing: -0.03em;
}
.p-stat__icon {
  border: 1px solid var(--p-brand-border);
  box-shadow: var(--p-shadow-xs);
}

/* ---- Cards ---- */
.p-card {
  /* The ring now lives in the shadow, so a border here would double it. */
  border-color: transparent;
  box-shadow: var(--p-shadow-xs);
  transition: box-shadow var(--p-base) var(--p-ease);
}
.p-card__head { border-bottom-color: var(--p-border); }
.p-card__head .p-h2, .p-card__head .p-h3 { letter-spacing: -0.015em; }

/* ---- Page heading ---- */
.p-h1 { letter-spacing: -0.028em; }

/* ---- Grids: cards size to their content ---- */
/* Without this the shorter column is stretched to match the taller one,
   which is what left the empty review queue as ~600px of blank card. */
.p-grid--sidebar, .p-grid--filters { align-items: start; }

/* An empty state inside a card is already framed by the card, so it does
   not need its own dashed box or the tall padding a standalone one uses. */
.p-card > .p-empty,
.p-card__body > .p-empty {
  border: 0; background: none; padding: 40px 24px;
}

/* ---- Tables ---- */
.p-table thead th {
  /* Slightly stronger than the row hairline so the header reads as a
     header when the table scrolls under it. */
  border-bottom-color: var(--p-border-2);
}

/* ---- Buttons ---- */
.p-btn--primary {
  background-image: linear-gradient(180deg,
    rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 100%);
}
.p-btn--primary:hover { background-image: none; }