/* ===================================================================
   Pool Pro — Look Better + Work Better (iPhone + PC) v3
   Loaded last to override portal.css / pool-pro.css
   iPhone: SE 360, 14 Pro 390, Pro Max 430, landscape 500h
   PC: 1024 tablet, 1280 laptop, 1440 desktop, 1920 ultra
   =================================================================== */

/* 0. Fundamentals — crisp text, stable viewport, smooth motion */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pp-topbar-h, 64px) + var(--pp-safe-top, 0px));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
* { -webkit-tap-highlight-color: rgba(214,178,94,0.14); }
*::selection { background: rgba(214,178,94,0.24); }
/* Touch laptops: only fast-tap the nav/btn that need it — don't block page scroll starting on cards/links */
.portal-btn, .pp-bottomnav__item, .portal-nav__item, .pp-quick__btn { touch-action: manipulation; -webkit-touch-callout: none; }
button, a { -webkit-user-select: auto; user-select: auto; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
/* Scroll: let the page and main content scroll naturally (fixes everywhere-stuck on touch laptops).
   Only modal/sheet bodies trap scroll; sidebar/content chain normally. */
.portal-content, .portal-sidebar { -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; scrollbar-width: thin; scrollbar-color: rgba(10,35,66,0.18) transparent; }
.portal-table__wrap, .pp-chem-history__tablewrap, .pp-modal__body, .pp-more-sheet__body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.portal-content::-webkit-scrollbar, .portal-sidebar::-webkit-scrollbar { width: 6px; height: 6px; }
.portal-content::-webkit-scrollbar-thumb, .portal-sidebar::-webkit-scrollbar-thumb { background: rgba(10,35,66,0.18); border-radius: 999px; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
img { content-visibility: auto; }
/* Avoid forced compositing on every frame — only sidebar needs will-change when sliding */
.portal-sidebar { will-change: transform; }
.portal-topbar, .pp-bottomnav { transform: none; will-change: auto; }

/* 1. Safe-area — Dynamic Island / home indicator */
:root {
  --pp-safe-top: env(safe-area-inset-top, 0px);
  --pp-safe-right: env(safe-area-inset-right, 0px);
  --pp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pp-safe-left: env(safe-area-inset-left, 0px);
  --pp-topbar-h: 64px; --pp-bottomnav-h: 56px;
  --pp-radius-sm: 10px; --pp-radius-md: 12px; --pp-radius-lg: 14px; --pp-radius-xl: 16px;
  --pp-shadow-sm: 0 1px 2px rgba(10,35,66,0.06), 0 2px 8px rgba(10,35,66,0.06);
  --pp-shadow-md: 0 2px 8px rgba(10,35,66,0.08), 0 8px 24px rgba(10,35,66,0.10);
  --pp-shadow-lg: 0 8px 24px rgba(10,35,66,0.12), 0 24px 48px rgba(10,35,66,0.14);
  --pp-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}
body.hps-root { padding-left: var(--pp-safe-left); padding-right: var(--pp-safe-right); overscroll-behavior-y: auto; }
.portal-topbar {
  padding-top: max(0px, var(--pp-safe-top));
  padding-left: max(16px, var(--pp-safe-left));
  padding-right: max(16px, var(--pp-safe-right));
  min-height: calc(var(--pp-topbar-h) + var(--pp-safe-top));
  backdrop-filter: saturate(1.18) blur(8px); -webkit-backdrop-filter: saturate(1.18) blur(8px);
  background: rgba(10,35,66,0.96); border-bottom: 1px solid rgba(214,178,94,0.12);
}
@media (max-width: 768px) {
  .portal-content {
    padding-bottom: calc(var(--pp-bottomnav-h) + var(--pp-safe-bottom) + 28px) !important;
    padding-left: max(var(--hps-space-4), var(--pp-safe-left));
    padding-right: max(var(--hps-space-4), var(--pp-safe-right));
  }
  .pp-bottomnav { padding-bottom: var(--pp-safe-bottom); min-height: calc(var(--pp-bottomnav-h) + var(--pp-safe-bottom)); }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .pp-bottomnav { display: none !important; }
  .portal-content { padding-bottom: max(var(--hps-space-4), var(--pp-safe-bottom)) !important; }
}

/* 2. Shell — PC wide, iPhone full-bleed */
.portal-shell { display: flex; min-height: 100dvh; min-height: calc(var(--vh, 1dvh) * 100); background: var(--hps-bg, #F4F8FB); }
.portal-sidebar {
  width: 240px; flex: 0 0 240px; position: sticky; top: 0; align-self: flex-start;
  height: 100dvh; height: calc(var(--vh, 1dvh) * 100); overflow-y: auto; overscroll-behavior: contain;
}
.portal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.portal-content { max-width: 100%; }
.portal-view { max-width: 1100px; margin-inline: auto; width: 100%; }
@media (min-width: 1280px) { .portal-view { max-width: 1280px; } .portal-content { padding: var(--hps-space-8) var(--hps-space-8); } }
@media (min-width: 1440px) { .portal-view { max-width: 1360px; } .portal-sidebar { width: 260px; flex-basis: 260px; } }
@media (min-width: 1920px) { .portal-view { max-width: 1440px; } }

/* 3. Topbar — compact iPhone, spacious PC */
.portal-topbar { position: sticky; top: 0; z-index: var(--hps-z-sticky, 50); display: flex; align-items: center; justify-content: space-between; gap: var(--hps-space-4); height: var(--pp-topbar-h); }
/* HPS logo was crowding the bar — hide topbar logo (login logo stays). */
.portal-topbar .portal-topbar__logo-img { display: none !important; }
.portal-topbar__menu-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.portal-topbar__menu-btn:active { background: rgba(255,255,255,0.10); transform: scale(0.97); }
@media (max-width: 768px) {
  .portal-topbar { height: calc(var(--pp-topbar-h) - 8px + var(--pp-safe-top)); gap: 10px; }
  .portal-topbar__name, .portal-topbar__plan { display: none; }
  .portal-topbar__logout span { display: none; }
  .portal-topbar__logout { min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; }
}
@media (min-width: 769px) { .portal-topbar__menu-btn { display: none !important; } }

/* 4. Sidebar — slide-over iPhone, sticky PC */
@media (max-width: 768px) {
  .portal-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--hps-z-overlay, 200);
    width: min(84vw, 300px); transform: translateX(-100%);
    transition: transform 250ms var(--pp-ease-spring); box-shadow: 0 24px 64px rgba(10,35,66,0.32);
    padding-bottom: var(--pp-safe-bottom); border-right: 1px solid rgba(214,178,94,0.14);
  }
  .portal-sidebar.is-open { transform: translateX(0); }
  .portal-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(10,35,66,0.44); backdrop-filter: blur(2px); z-index: calc(var(--hps-z-overlay, 200) - 1); }
  .portal-sidebar-overlay.is-visible { display: block; }
  .portal-nav__item { min-height: 44px; font-size: 15px; }
}
@media (min-width: 769px) { .portal-sidebar-overlay { display: none !important; } .portal-sidebar { border-right: 1px solid rgba(10,35,66,0.08); } }
.portal-nav__item:focus-visible { outline: 2px solid #D6B25E; outline-offset: -2px; border-radius: 10px; }

/* 5. Bottom nav — iPhone only, pill active */
.pp-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--hps-z-sticky, 50);
  display: none; align-items: stretch; justify-content: space-around;
  background: #0A2342; border-top: 1px solid rgba(214,178,94,0.16);
  padding-left: var(--pp-safe-left); padding-right: var(--pp-safe-right);
  box-shadow: 0 -8px 24px rgba(10,35,66,0.18);
}
.pp-bottomnav__item {
  flex: 1 1 0; min-height: calc(var(--pp-bottomnav-h) + var(--pp-safe-bottom)); min-width: 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 6px calc(6px + var(--pp-safe-bottom)); font-size: 10.5px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,0.70) !important; text-decoration: none; border-radius: 12px;
  transition: background var(--hps-transition-fast), color var(--hps-transition-fast), transform var(--hps-transition-fast);
}
.pp-bottomnav__item svg { width: 22px; height: 22px; stroke-width: 1.9; }
.pp-bottomnav__item:active { transform: scale(0.96); }
.pp-bottomnav__item.is-active { color: #D6B25E !important; background: rgba(214,178,94,0.13); margin: 6px 4px calc(6px + var(--pp-safe-bottom)); min-height: var(--pp-bottomnav-h); box-shadow: inset 0 0 0 1px rgba(214,178,94,0.18); }
@media (max-width: 768px) { .pp-bottomnav { display: flex; } }
@media (min-width: 769px) { .pp-bottomnav, .pp-more-sheet { display: none !important; } }

/* 6. Forms — 16px iOS anti-zoom, 44px taps, brass focus */
.portal-input, .portal-select, .portal-textarea,
.pp-chem-grid input, .pp-chem-grid select, .pp-chem-grid textarea,
.portal-form__field input, .portal-form__field select, .portal-form__field textarea {
  font-size: 16px; line-height: 1.45; border-radius: 10px;
}
.portal-input:focus, .portal-select:focus, .portal-textarea:focus,
.pp-chem-grid input:focus, .pp-chem-grid select:focus {
  outline: none; border-color: #D6B25E !important; box-shadow: 0 0 0 3px rgba(214,178,94,0.22) !important;
}
@media (max-width: 768px) {
  .portal-input, .portal-select, .portal-textarea { min-height: 44px; padding: 10px 12px; }
  .portal-btn, .portal-btn--primary, .portal-btn--ghost, .pp-mini-btn { min-height: 44px; min-width: 44px; }
  input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
}
@media (min-width: 769px) { .portal-input, .portal-select { min-height: 40px; } .portal-btn { min-height: 40px; } }

/* 7. Chemistry — paired Current/Target pH, responsive grid, grouped surface on phone */
.pp-chem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pp-chem-grid label { font-weight: 600; color: #0F2A4A; }
@media (max-width: 1024px) { .pp-chem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pp-chem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .pp-chem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: rgba(244,248,251,0.6); border-radius: 12px; padding: 10px; border: 1px solid rgba(10,35,66,0.06); }
  .pp-chem-grid label { font-size: 11.5px; line-height: 1.25; }
  .pp-chem-grid input, .pp-chem-grid select { font-size: 16px; font-weight: 600; }
}
@media (max-width: 480px) { .pp-chem-grid { grid-template-columns: 1fr 1fr; } .pp-chem-grid .pp-chem-field--full { grid-column: 1 / -1; } }
@media (max-width: 380px) { .pp-chem-grid { grid-template-columns: 1fr; } }
@media (min-width: 1280px) { .pp-chem-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1440px) { .pp-chem-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
#pp-rd-ph-target { border-color: rgba(214,178,94,0.55) !important; background: #FFFBEB !important; }
#pp-rd-ph-target:focus { border-color: #D6B25E !important; box-shadow: 0 0 0 3px rgba(214,178,94,0.28) !important; }
#pp-rd-ph, #pp-rd-ph-target { font-variant-numeric: tabular-nums; font-weight: 700; }

/* 8. Dashboard — 4→2→1 metrics, 1.4/0.9 split, 3-col cards */
.pp-owner-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hps-space-4); }
.pp-owner-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: var(--hps-space-6); }
.pp-owner-grid--three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hps-space-4); }
.portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hps-space-4); }
@media (max-width: 1024px) { .pp-owner-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-owner-grid { grid-template-columns: 1fr; } .pp-owner-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pp-owner-metrics, .pp-owner-grid--three, .portal-cards { grid-template-columns: 1fr; } .pp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .pp-quick { grid-template-columns: 1fr; } }
@media (min-width: 769px) { .pp-owner-panel, .portal-panel, .pp-lsi-calc, .pp-chem-history { content-visibility: auto; contain-intrinsic-size: auto 420px; } }
.portal-card, .portal-panel, .pp-owner-metric, .pp-owner-panel { contain: layout paint; border-radius: 14px; box-shadow: var(--pp-shadow-sm); border: 1px solid rgba(10,35,66,0.08); }

/* 9. Tables — swipe on phone, full on PC, header polish */
.portal-table__wrap, .pp-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.portal-table { min-width: 560px; border-collapse: separate; border-spacing: 0; }
@media (max-width: 768px) {
  .portal-table { min-width: 640px; }
  .portal-view__header { flex-direction: column; gap: var(--hps-space-3); align-items: stretch; }
  .portal-table__wrap { border-radius: 12px; border: 1px solid var(--hps-border); }
  .portal-table__wrap::after { content: "← swipe →"; display: block; text-align:center; font-size: 11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--hps-text-faint); padding: 6px 0 8px; background: linear-gradient(to right, transparent, rgba(244,248,251,0.9) 20%, rgba(244,248,251,0.9) 80%, transparent); }
}
@media (min-width: 1024px) { .portal-table { min-width: 0; width: 100%; } .portal-table__wrap { overflow: visible; border: 0; } .portal-table__wrap::after { display: none; } }
@media (min-width: 769px) {
  .portal-table thead th { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 800; color: #0F2A4A; background: rgba(244,248,251,0.84); border-bottom: 1px solid rgba(10,35,66,0.08); }
  .portal-table tbody tr:hover td { background: rgba(214,178,94,0.06); }
}

/* 10. Polish — soft shadows, spring, brass */
.portal-btn--primary { background: linear-gradient(180deg, #0A2342 0%, #06172B 100%); box-shadow: 0 1px 2px rgba(10,35,66,0.18), 0 4px 12px rgba(10,35,66,0.14); }
.portal-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--pp-shadow-md); }
.portal-btn--primary:active { transform: translateY(0) scale(0.98); }
.portal-card__label { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: #5F6F7F; }
.portal-card__value { font-variant-numeric: tabular-nums; letter-spacing: -0.015em; font-weight: 800; }
@media (min-width: 769px) {
  .portal-nav__item.is-active { background: #FFEFD1; color: #0A2342 !important; box-shadow: inset 3px 0 0 #D6B25E, var(--pp-shadow-sm); }
  .portal-card--link:hover, .pp-quick__btn:hover { transform: translateY(-1px); box-shadow: var(--pp-shadow-md); border-color: rgba(10,35,66,0.14); }
  .pp-owner-metric { position: relative; overflow: hidden; }
  .pp-owner-metric::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: linear-gradient(180deg, #D6B25E, #B99336); opacity:0; transition: opacity 180ms ease; }
  .pp-owner-metric:hover::after { opacity:1; }
}
@media (hover: none) { .portal-card--link:hover, .pp-quick__btn:hover { transform:none; box-shadow:none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }
@media (prefers-reduced-motion: no-preference) {
  .portal-nav__item, .portal-btn, .portal-card, .pp-quick__btn, .portal-table tr, .pp-bottomnav__item { transition: transform 220ms var(--pp-ease-spring), box-shadow 220ms var(--pp-ease-spring), background 180ms ease, border-color 180ms ease; }
}

/* 11. Modals — blurred backdrop, full-screen phone, centered PC */
.pp-modal, .portal-modal { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: max(var(--hps-space-4), var(--pp-safe-top)) max(var(--hps-space-4), var(--pp-safe-right)) max(var(--hps-space-4), var(--pp-safe-bottom)) max(var(--hps-space-4), var(--pp-safe-left)); }
.pp-modal__panel, .portal-modal__panel { max-height: calc(var(--vh, 1dvh) * 100 - 32px - var(--pp-safe-top) - var(--pp-safe-bottom)); max-height: calc(100dvh - 32px - var(--pp-safe-top) - var(--pp-safe-bottom)); overflow-y:auto; border-radius: 16px; box-shadow: var(--pp-shadow-lg); }
.pp-modal__close, .portal-modal__close { min-width: 44px; min-height: 44px; border-radius: 10px; }
@media (max-width: 768px) {
  .pp-modal__panel, .portal-modal__panel { width:100%; max-width:none; margin:0; border-radius:16px 16px 0 0; max-height: calc(var(--vh, 1dvh) * 100 - 12px - var(--pp-safe-top)); max-height: calc(100dvh - 12px - var(--pp-safe-top)); }
  .pp-modal, .portal-modal { align-items: flex-end; padding: 0; }
}
@media (min-width: 769px) { .pp-modal, .portal-modal { align-items:center; justify-content:center; } .pp-modal__panel, .portal-modal__panel { max-width:640px; width:100%; } }

/* 12. Typography — fluid, tight tracking on headings */
@media (max-width: 768px) { .portal-view__title { font-size: clamp(20px, 5.4vw, 24px); line-height:1.18; letter-spacing:-0.015em; } .portal-view__subtitle { font-size:14px; } }
@media (min-width: 1280px) { .portal-view__title { font-size:28px; letter-spacing:-0.025em; } }

/* 13. iOS anti-zoom — ensure no input triggers zoom */
@supports (-webkit-touch-callout: none) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], select, textarea { font-size:16px !important; }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .portal-card, .portal-panel, .pp-owner-panel, .portal-input { border-width: 0.5px; }
}
@media (min-width: 769px) { :focus-visible { outline:2px solid #D6B25E; outline-offset:2px; border-radius:6px; } }

/* 14. Touch — reliable scroll, 44-48px taps, no hover-trap, no snap fighting scroll
   Fixes: touch laptops everywhere-stuck scroll (allow page chain), remove
   overflow:hidden ripple that clipped modals, drop scale(0.97) that jittered taps,
   drop snap that fought vertical scroll, keep thumb reach. */
@media (pointer: coarse) {
  /* Tap targets: ensure 44px min even after readability !important paddings */
  .portal-btn, .pp-bottomnav__item, .portal-nav__item, .pp-quick__btn,
  .portal-card--link, .pp-table-wrap a, .portal-table a,
  .pp-lead-filter, .pp-toolbar .portal-btn {
    min-height: 44px;
  }
  .portal-btn--primary { min-height: 48px; }
  .portal-topbar__menu-btn, .portal-topbar__logout, .pp-modal__close, .portal-modal__close {
    min-width: 44px; min-height: 44px;
  }
  /* Checklist: bigger hit, keep scroll free */
  .pp-check { min-height: 44px; padding: 10px 12px !important; gap: 12px; touch-action: manipulation; }
  .pp-check input[type="checkbox"] { width: 22px; height: 22px; accent-color: #0A2342; touch-action: manipulation; }
  .portal-login__checkbox input[type="checkbox"] { width: 20px; height: 20px; }
  /* Remove hover lift persisting after tap on touch — keep no transform, just subtle tint */
  .portal-card--link:hover, .pp-quick__btn:hover, .portal-table tbody tr:hover td,
  .pp-owner-metric:hover, .portal-nav__item:hover { transform: none !important; box-shadow: var(--pp-shadow-sm) !important; }
  /* No scale jitter on tap — use opacity only (scale cancels taps on some laptops) */
  .portal-card--link:active, .pp-quick__btn:active, .portal-nav__item:active,
  .portal-btn:active, .pp-bottomnav__item:active { transform: none !important; opacity: 0.94; }
  /* Tables: native momentum scroll, no snap (snap was fighting vertical scroll everywhere) */
  .portal-table__wrap, .pp-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: none;
    touch-action: pan-x pan-y;
  }
  .portal-table__wrap::-webkit-scrollbar, .pp-table-wrap::-webkit-scrollbar { display: none; scrollbar-width: none; }
  /* Chemistry inputs: keep 44px tap and allow text select scroll */
  .pp-chem-field input { min-height: 44px !important; touch-action: manipulation; }
  .pp-chem-input { touch-action: auto; }
  /* Bottom nav thumb */
  .pp-bottomnav__item { padding-bottom: max(10px, calc(8px + var(--pp-safe-bottom))); }
  /* Sidebar scroll free */
  .portal-sidebar { touch-action: pan-y; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; }
}
/* Fine pointer keeps hover polish */
@media (pointer: fine) and (hover: hover) {
  .portal-nav__item:hover { background: rgba(255,255,255,0.08); }
  .portal-card--link:hover { transform: translateY(-1px); box-shadow: var(--pp-shadow-md); }
}

/* 15. Print */
@media print { .portal-sidebar, .portal-topbar, .pp-bottomnav, .pp-more-sheet { display:none !important; } .portal-shell, .portal-content, .portal-view { display:block; max-width:none; padding:0; } }

/* 16. Chemistry Readings — polished card grid with ideal pills, units, and grouped sections */
.pp-chem-panel {
  border-top: 3px solid #0A2342 !important;
  overflow: hidden;
}
.pp-chem-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 14px 18px !important;
}
.pp-chem-panel__head-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-chem-panel__head-main .portal-panel__title {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0A2342;
  margin: 0;
}
.pp-chem-panel__head-main .portal-panel__title svg { color: #0A2342; flex-shrink: 0; }
.pp-chem-panel__subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #475569;
  font-weight: 500;
}
.pp-chem-panel__hint {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .pp-chem-panel__header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pp-chem-panel__hint { display: none; }
}

/* Previous-visit cap banner */
#pp-prev-cap.pp-chem-prev-cap {
  margin: 12px 18px 0 18px;
  padding: 8px 12px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}
#pp-prev-cap.pp-chem-prev-cap:empty { display: none; margin: 0; padding: 0; border: 0; }

/* Sections */
.pp-chem-section { padding: 16px 18px 0 18px; }
.pp-chem-section:last-of-type { padding-bottom: 8px; }
.pp-chem-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #0A2342;
  line-height: 1;
}
.pp-chem-section__icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #0A2342;
  color: #D6B25E;
  font-size: 11px;
  flex-shrink: 0;
}
.pp-chem-section__title em,
.pp-chem-section__note {
  margin-left: 8px;
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: #64748B;
}
@media (max-width: 640px) {
  .pp-chem-section { padding: 14px 12px 0 12px; }
  .pp-chem-section__title em, .pp-chem-section__note { display: none; }
}

/* Grid: polished cards */
.pp-chem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1100px) { .pp-chem-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .pp-chem-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
@media (max-width: 380px)  { .pp-chem-grid { grid-template-columns: 1fr; } }
@media (min-width: 1280px) { .pp-chem-grid { gap: 14px; } }

/* Input card */
.pp-chem-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(10,35,66,0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--pp-ease-spring, ease);
}
.pp-chem-input:hover { border-color: #CBD5E1; box-shadow: 0 2px 8px rgba(10,35,66,0.06); }
.pp-chem-input:focus-within { border-color: #0A2342; box-shadow: 0 0 0 3px rgba(10,35,66,0.10), 0 2px 10px rgba(10,35,66,0.08); }
.pp-chem-input--wide { grid-column: 1 / -1; }
.pp-chem-input--wide .pp-chem-field { max-width: 280px; }
@media (max-width: 640px) { .pp-chem-input { padding: 10px; } }

/* Label row: label text + ideal pill, prev on second line if present */
.pp-chem-input label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0F2A4A;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.3;
  margin: 0;
}
.pp-chem-ideal {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  margin-left: auto;
}
.pp-chem-input--ph-target .pp-chem-ideal {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.pp-chem-prev {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  line-height: 1;
}
.pp-chem-prev:empty { display: none; }
.pp-chem-prev:not(:empty) {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  color: #1E40AF;
}
.pp-chem-prev:not(:empty)::before {
  content: "↺ ";
  font-size: 10px;
  margin-right: 2px;
  opacity: 0.8;
}

/* Field wrapper with unit */
.pp-chem-field {
  position: relative;
  display: flex;
  align-items: center;
}
.pp-chem-field input {
  width: 100%;
  padding: 11px 54px 11px 12px !important;
  border: 1px solid #D5E0E8 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  box-shadow: none !important;
}
.pp-chem-field input::placeholder { color: #94A3B8; font-weight: 500; }
.pp-chem-field input:focus {
  outline: none !important;
  border-color: #0A2342 !important;
  box-shadow: 0 0 0 3px rgba(10,35,66,0.12) !important;
  background: #FFFFFF !important;
}
.pp-chem-field--target input {
  border-color: rgba(214,178,94,0.55) !important;
  background: #FFFBEB !important;
}
.pp-chem-field--target input:focus {
  border-color: #D6B25E !important;
  box-shadow: 0 0 0 3px rgba(214,178,94,0.28) !important;
}
.pp-chem-field__unit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 8px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  pointer-events: none;
  line-height: 1;
}
.pp-chem-field:focus-within .pp-chem-field__unit {
  background: #0A2342;
  border-color: #0A2342;
  color: #D6B25E;
}

/* Keep salt wrap ability to hide via JS */
#pp-salt-wrap[style*="display: none"] { display: none !important; }

/* History / LSI / Chlorine panels — add breathing room now that chemistry is carded */
.pp-chem-panel .pp-chem-history { margin: 16px 18px 0 18px; }
.pp-chem-panel .pp-lsi-calc { margin: 16px 18px 0 18px; }
.pp-chem-panel .pp-chem-recs { margin: 16px 18px 18px 18px; }
@media (max-width: 640px) {
  .pp-chem-panel .pp-chem-history { margin: 14px 12px 0 12px; }
  .pp-chem-panel .pp-lsi-calc { margin: 14px 12px 0 12px; }
  .pp-chem-panel .pp-chem-recs { margin: 14px 12px 12px 12px; }
}

/* Override old mobile grid background from pool-pro-optimize.css section 7 */
@media (max-width: 768px) {
  .pp-chem-grid { background: transparent !important; border: 0 !important; padding: 0 !important; }
}

/* Tighter portal-split on this view so chemistry and checklist sit comfortably */
#view-pp-visits .portal-split { gap: 18px; }
@media (max-width: 900px) {
  #view-pp-visits .portal-split { gap: 14px; }
}

/* 17. Readability — Pool Pro easiest to read: larger type, higher contrast, clearer hierarchy, more air */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Base: slightly larger, looser, darker secondary text inside the portal only */
.portal-app,
.portal-content,
.portal-view,
.portal-panel,
.pp-chem-panel,
.portal-card,
.pp-owner-panel {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.portal-content {
  font-size: 16px;
  line-height: 1.65;
  color: #102033;
  letter-spacing: -0.01em;
}
.portal-content p,
.portal-content li,
.portal-content dd,
.portal-content .portal-panel__title,
.portal-content .portal-card__body {
  line-height: 1.6;
}
/* Darken muted text for WCAG AA+ without tint shift — portal only */
.portal-content { --hps-text-muted: #334155; --hps-text-faint: #64748B; }
.portal-content .portal-view__subtitle,
.portal-content .portal-panel__date,
.portal-content .portal-card__sub,
.portal-content .portal-card__label,
.portal-content .pp-owner-asof,
.portal-content .pp-chem-panel__subtitle,
.portal-content .pp-chem-section__title em,
.portal-content .pp-owner-metric span,
.portal-content .pp-chem-history__hint {
  color: #334155 !important;
}
::placeholder { color: #64748B !important; opacity: 1; }

/* Headings: bigger, tighter, bolder, more contrast */
.portal-view__header { margin-bottom: 28px; gap: 16px; }
.portal-view__title {
  font-size: clamp(26px, 2.1vw, 32px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  color: #0A2342 !important;
  margin-bottom: 6px !important;
}
.portal-view__title::after { width: 44px; height: 4px; margin-top: 10px; }
.portal-view__subtitle {
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  color: #334155 !important;
  max-width: 65ch;
}
.portal-panel__header { padding: 18px 22px !important; gap: 12px; }
.portal-panel__title {
  font-size: 17px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  font-weight: 800 !important;
}
.portal-panel__date { font-size: 13px !important; font-weight: 600 !important; }
.portal-panel { padding: 22px !important; }
@media (max-width: 640px) {
  .portal-panel { padding: 16px !important; }
  .portal-panel__header { padding: 14px 16px !important; }
  .portal-view__title { font-size: 24px !important; }
}

/* Cards: more air, bigger numbers, clearer labels */
.portal-cards { gap: 16px !important; }
.portal-card--status { padding: 18px !important; gap: 14px !important; align-items: center; }
.portal-card__icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
.portal-card__icon svg { width: 22px !important; height: 22px !important; }
.portal-card__label {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  font-weight: 800 !important;
  color: #334155 !important;
  line-height: 1.3;
}
.portal-card__value {
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  margin-top: 2px;
}
.portal-card__sub {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #334155 !important;
}

/* Sidebar & topbar: clearer hierarchy */
.portal-sidebar { padding: 18px 12px !important; }
.portal-nav__section {
  font-size: 11px !important;
  letter-spacing: 0.09em !important;
  font-weight: 800 !important;
  color: #FFDFA0 !important;
  padding: 18px 12px 8px !important;
}
.portal-nav__item {
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  letter-spacing: -0.01em;
}
.portal-nav__item.is-active { font-weight: 800 !important; }
.portal-topbar__name { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.portal-topbar__plan { font-size: 13px !important; font-weight: 500 !important; }

/* Tables: larger, airier, easier to scan */
.portal-table th {
  font-size: 12.5px !important;
  letter-spacing: 0.07em !important;
  font-weight: 800 !important;
  padding: 14px 16px !important;
  line-height: 1.3;
  color: #0F2A4A !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.portal-table td {
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 14px 16px !important;
  color: #102033 !important;
  vertical-align: middle;
}
.portal-table tbody tr + tr td { border-top: 1px solid #F1F5F9; }
.portal-table tbody tr:hover td { background: #F8FAFC !important; }
.portal-table__wrap { border-radius: 12px !important; }

/* Toolbar / filters: larger type */
.pp-toolbar { gap: 12px !important; }
.pp-search, .pp-filter {
  font-size: 16px !important;
  line-height: 1.45 !important;
  padding: 11px 14px !important;
}
.pp-lead-filter {
  font-size: 14px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
}

/* Forms: biggest win for field readability */
.portal-form__field { gap: 8px !important; margin-bottom: 18px !important; }
.portal-form__field label {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  color: #0F2A4A !important;
  letter-spacing: -0.01em;
}
.portal-form__field input,
.portal-form__field select,
.portal-form__field textarea {
  font-size: 16px !important;
  line-height: 1.5 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  color: #0F172A !important;
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
}
.portal-form__field input::placeholder,
.portal-form__field textarea::placeholder { color: #64748B !important; }
.portal-form__field input:focus,
.portal-form__field select:focus,
.portal-form__field textarea:focus {
  border-color: #0A2342 !important;
  box-shadow: 0 0 0 3px rgba(10,35,66,0.12) !important;
}

/* Checklist: more readable rows */
.pp-checklist { gap: 10px !important; }
.pp-check {
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
}
.pp-check__mark { width: 20px !important; height: 20px !important; border-width: 2px !important; }

/* Quick actions / dashboard sections */
.pp-quick__btn { padding: 16px !important; gap: 14px !important; }
.pp-quick__lbl { font-size: 15px !important; line-height: 1.35 !important; font-weight: 700 !important; }
.pp-dash-section__title { font-size: 18px !important; }
.pp-dash-section__hint { font-size: 15px !important; color: #334155 !important; }

/* Chemistry: ensure polish stays readable (overrides small labels from earlier polish) */
.pp-chem-input label { font-size: 13px !important; line-height: 1.35 !important; }
.pp-chem-field input { font-size: 16px !important; }
.pp-chem-ideal { font-size: 11.5px !important; }
.pp-chem-field__unit { font-size: 11.5px !important; }
.pp-chem-panel__subtitle { font-size: 14px !important; }

/* LSI & Chlorine guide: larger body */
.pp-lsi-calc__rec, .pp-lsi-plan__why, .pp-chem-rec__purpose { font-size: 14px !important; line-height: 1.6 !important; }
.pp-chem-rec__name { font-size: 15px !important; }
.pp-cl-status__head { font-size: 15px !important; line-height: 1.5 !important; }

/* Modals & sheets: clearer text */
.pp-modal__header h2 { font-size: 18px !important; line-height: 1.3 !important; }
.pp-modal__form, .pp-modal__body { font-size: 16px !important; line-height: 1.6 !important; }

/* Bottom nav labels slightly larger for glanceability */
.pp-bottomnav__item { font-size: 11px !important; letter-spacing: 0.02em !important; }

/* Reduce uppercase shouting where it hurts readability */
.portal-badge, .pp-lead-filter, .pp-chem-section__title { text-transform: none; letter-spacing: 0.02em; }
.portal-badge { font-size: 13px !important; padding: 4px 10px !important; font-weight: 700 !important; }

/* Owner / dashboard metrics more legible */
.pp-owner-metric strong { font-size: clamp(20px, 2vw, 28px) !important; line-height: 1.1 !important; }
.pp-owner-metric > span { font-size: 13px !important; line-height: 1.5 !important; }

/* Ensure visited-history chemistry table is readable */
.pp-chem-history__table th, .pp-chem-history__table td { font-size: 13px !important; line-height: 1.5 !important; padding: 10px 12px !important; }

/* Print / high-contrast tweaks keep brass accents but never wash out */
@media (prefers-contrast: more) {
  .portal-nav__item.is-active { outline: 2px solid #D6B25E; outline-offset: -2px; }
}

/* 18. Touch laptop — scroll everywhere + hybrid pointer
   Windows touch laptops are (any-pointer: coarse) even when primary is fine.
   Previous overscroll:contain on portal-content trapped scroll at top/bottom,
   making the whole app feel stuck when swiping with a finger. */
@media (any-pointer: coarse) {
  .portal-nav__item, .pp-bottomnav__item, .portal-btn, .pp-quick__btn,
  .pp-lead-filter, .pp-chem-field input { min-height: 44px; }
  .portal-btn--primary { min-height: 48px; }
  .portal-table__wrap, .pp-table-wrap { scroll-snap-type: none !important; touch-action: pan-x pan-y !important; }
}
@media (max-width: 1024px) and (any-pointer: coarse) {
  .portal-content { overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y !important; }
}
/* Allow fingers to scroll the chemistry grid/panels without fighting the page */
.pp-chem-input, .pp-chem-field, .portal-panel { touch-action: auto; }
/* Number inputs: hide tiny spinner that steals taps on Windows touch */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* 19. iPhone service photos — show FULL pool, not cropped
   iPhone photos are often portrait 3:4 but tiles were square/4:3 with
   object-fit:cover, so the pool was cropped. Switch to contain + letterbox
   so the entire service is visible; pinch-zoom still works for detail. */
.pp-photo-tile__img,
.pp-visit-photo__thumb,
.pp-tech-photo__thumb,
.pp-cust-photo {
  background: #F7F6F2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}
.pp-photo-tile__img { aspect-ratio: 4/3 !important; height: auto !important; }
.pp-photo-tile__img img,
.pp-visit-photo__thumb img,
.pp-tech-photo__thumb img,
.pp-cust-photo img {
  object-fit: contain !important;
  object-position: center !important;
  background: #F7F6F2 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  touch-action: pinch-zoom pan-y !important;
}
.pp-photo-tile__img img {
  aspect-ratio: 4/3 !important;
  height: auto !important;
  max-height: min(62vh, 420px) !important;
}
.pp-visit-photos__preview { gap: 10px !important; }
.pp-visit-photo__thumb { aspect-ratio: 1 !important; border: 1px solid #E2E8F0; }
.pp-cust-photo { aspect-ratio: 4/3 !important; }
.pp-cust-photo img { max-height: min(62vh, 420px) !important; }
@media (max-width: 480px) {
  .pp-photo-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .pp-visit-photos__preview { grid-template-columns: repeat(2, 1fr) !important; }
  .pp-tech-photos__preview { grid-template-columns: repeat(2, 1fr) !important; }
}
#pp-photo-lightbox { touch-action: pinch-zoom pan-y; cursor: zoom-out; }
#pp-photo-lightbox img { touch-action: pinch-zoom; max-width: 100%; max-height: min(78vh, 78dvh); }

/* 20. Visit actions — don't block Service Photos on mobile
   The Complete Visit / Save Draft bar was inside the Service Photos
   panel (overflow:hidden) with position:sticky bottom:56px, so it
   covered the last thumbnail rows. Moved outside the panel and give
   the view bottom padding so photos scroll fully above the sticky
   footer + iPhone bottom nav + safe-area. */
@media (max-width: 768px) {
  #view-pp-visits.is-active {
    padding-bottom: calc(96px + 56px + env(safe-area-inset-bottom, 0)) !important;
  }
  #view-pp-visits.is-active #pp-photos-panel {
    margin-bottom: 12px !important;
  }
  #view-pp-visits.is-active .pp-visit-actions {
    position: sticky !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0)) !important;
    z-index: 230 !important;
    margin: auto calc(-1 * var(--hps-space-8, 24px)) 0 calc(-1 * var(--hps-space-8, 24px)) !important;
    background: #fff !important;
    border-top: 1px solid #0A2342 !important;
    box-shadow: 0 -4px 16px rgba(10, 25, 46, 0.12) !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0)) !important;
    gap: 10px !important;
    display: flex !important;
  }
  #view-pp-visits.is-active .pp-visit-actions .portal-btn { min-height: 48px; }
  #view-pp-visits.is-active .pp-visit-actions .portal-btn--primary { flex: 1 1 auto; }
}
@media (max-width: 768px) and (display-mode: standalone) {
  #view-pp-visits.is-active .pp-visit-actions { bottom: env(safe-area-inset-bottom, 0) !important; }
}
/* Desktop: actions sit naturally below photos, no sticky */
@media (min-width: 769px) {
  #pp-visit-actions { margin-top: 16px; gap: 12px; }
}

/* 21. Report Service Issue — on-site follow-up task for the owner dashboard.
   Amber alert feel, but still navy/gold system. Mobile: grid collapses. */
#view-pp-visits .pp-issue-panel {
  border-top: 3px solid #CA8A04 !important;
  border-left: 4px solid #CA8A04 !important;
  background: #FFFBEB !important;
}
#view-pp-visits .pp-issue-panel .portal-panel__header {
  background: #FFF7ED !important;
  border-bottom: 1px solid #FDE68A !important;
}
#view-pp-visits .pp-issue-panel .portal-panel__title {
  color: #78350F !important;
}
#view-pp-visits .pp-issue-panel .portal-panel__hint {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 999px;
  padding: 3px 8px;
}
.pp-issue-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #57534E;
}
.pp-issue-intro strong { color: #1C1917; }
.pp-issue-form .portal-form__field { margin-bottom: 12px; }
.pp-issue-form .portal-form__field:last-child { margin-bottom: 0; }
.pp-issue-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pp-issue-optional {
  font-weight: 400;
  font-size: 11px;
  color: #78716C;
  text-transform: none;
  letter-spacing: 0;
}
.pp-issue-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pp-issue-actions .portal-btn--primary {
  min-height: 44px;
  font-weight: 700;
}
.pp-issue-status {
  font-size: 13px;
  line-height: 1.4;
  color: #57534E;
}
.pp-issue-status.is-ok { color: #065F46; font-weight: 600; }
.pp-issue-status.is-err { color: #991B1B; font-weight: 600; }
.pp-issue-foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #78716C;
}
.pp-issue-foot strong { color: #44403C; }
#pp-issue-panel .portal-form__field select,
#pp-issue-panel .portal-form__field input,
#pp-issue-panel .portal-form__field textarea {
  background: #fff;
}
@media (max-width: 768px) {
  .pp-issue-row { grid-template-columns: 1fr; gap: 0; }
  .pp-issue-actions { flex-direction: column; align-items: stretch; }
  .pp-issue-actions .portal-btn { width: 100%; }
  .pp-issue-status { text-align: center; min-height: 18px; }
}
@media (max-width: 480px) {
  #view-pp-visits .pp-issue-panel .portal-panel__header { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* 22. PC Dashboard — reclaim your monitor (Dallas PC: 1280-1920)
   Goal: stop wasting 200-300px side margins, tighten vertical rhythm,
   show more columns where it helps. Mobile unchanged. */
@media (min-width: 1024px) {
  /* Use more of the viewport — desktop is wide, not 1100px narrow */
  .portal-content { padding: 24px 24px !important; }
  .portal-view { max-width: 1220px !important; }
  #view-pp-dashboard.portal-view { max-width: 1280px !important; }
  /* Tighter topbar + header saves vertical space above the fold */
  .portal-view__header { margin-bottom: 20px !important; }
  #pp-owner-dashboard { gap: 16px !important; }
  #pp-owner-dashboard > section, .pp-owner-panel { padding: 18px !important; }
  .pp-owner-metrics { gap: 0 !important; }
  .pp-owner-metric { padding: 14px 16px !important; }
  .pp-owner-grid { gap: 16px !important; }
  .pp-owner-grid--three { gap: 16px !important; }
  .pp-owner-topbar { padding: 14px 16px !important; margin-bottom: 14px !important; }
}
@media (min-width: 1280px) {
  .portal-content { padding: 24px 28px !important; }
  .portal-view { max-width: 1360px !important; }
  #view-pp-dashboard.portal-view { max-width: 1420px !important; }
  /* On a real laptop/monitor show 3 alerts across instead of 2 — saves ~1 row */
  .pp-owner-alerts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* Activity: 3 columns on PC so 6 items fit without scroll */
  .pp-owner-activitylist { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 20px !important; }
  /* Financial metrics stay 4-across but a touch tighter */
  .pp-owner-metric strong { font-size: clamp(18px, 1.6vw, 24px) !important; }
}
@media (min-width: 1360px) {
  #view-pp-dashboard.portal-view { max-width: 1480px !important; }
}
@media (min-width: 1440px) {
  .portal-sidebar { width: 260px !important; flex-basis: 260px !important; }
  .portal-content { padding: 24px 28px !important; }
  .portal-view { max-width: 1480px !important; }
  #view-pp-dashboard.portal-view { max-width: 1600px !important; }
  /* Keep header compact at this size */
  .portal-view__title { font-size: 28px !important; }
}
@media (min-width: 1680px) {
  .portal-view { max-width: 1600px !important; }
  #view-pp-dashboard.portal-view { max-width: 1680px !important; }
  .portal-content { padding: 24px 32px !important; }
}
@media (min-width: 1920px) {
  /* Ultra-wide / 1080p fullscreen — stop capping at 1440, use 92vw */
  .portal-view { max-width: min(1720px, calc(100vw - 300px)) !important; }
  #view-pp-dashboard.portal-view { max-width: min(1800px, calc(100vw - 292px)) !important; }
  .portal-content { padding: 24px 32px !important; }
  /* Even tighter vertical rhythm so more fits above the fold */
  #pp-owner-dashboard { gap: 14px !important; }
  #pp-owner-dashboard > section, .pp-owner-panel { padding: 16px 18px !important; }
  .pp-owner-sectionhead { margin-bottom: 12px !important; }
  .pp-owner-sectionhead h2 { font-size: 1.05rem !important; }
  /* Metrics: slightly leaner on ultra so 4 fit with breathing room */
  .pp-owner-metric { padding: 12px 14px !important; gap: 4px !important; }
  .pp-owner-metric strong { font-size: 22px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 1024 tablet-landscape: keep alerts at 2 columns, activity at 2 — more would crowd */
  .pp-owner-alerts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Dashboard-only density tweak: when the owner command is loaded, hide the legacy
   quick / dash sections (already done) but also tighten their removal collapse */
#view-pp-dashboard.is-owner-loaded { padding-bottom: 24px; }
/* Ensure sticky sidebar never causes horizontal scroll on PC */
@media (min-width: 1024px) {
  .portal-shell { max-width: 100vw; overflow-x: clip; }
  .portal-main { min-width: 0; }
}


/* 23. Staff portal finish — focused sign-in, clear account shell, route confidence */
#pp-login-screen.portal-login {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(36rem 30rem at 10% 12%, rgba(214,178,94,0.18), transparent 68%),
    radial-gradient(34rem 28rem at 92% 88%, rgba(0,109,143,0.16), transparent 70%),
    linear-gradient(145deg, #06172B 0%, #0A2342 58%, #12385C 100%);
}
#pp-login-screen.portal-login::before,
#pp-login-screen.portal-login::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  border: 1px solid rgba(214,178,94,0.16);
  border-radius: 50%;
  pointer-events: none;
}
#pp-login-screen.portal-login::before { top: -13rem; right: -4rem; box-shadow: 0 0 0 30px rgba(214,178,94,0.035), 0 0 0 60px rgba(214,178,94,0.025); }
#pp-login-screen.portal-login::after { bottom: -17rem; left: -9rem; width: 28rem; height: 28rem; border-color: rgba(255,255,255,0.08); }
#pp-login-screen .portal-login__card {
  position: relative;
  width: min(100%, 480px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(255,255,255,0.72);
  border-top: 4px solid #D6B25E;
  border-radius: 24px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 24px 72px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.12);
}
#pp-login-screen .portal-login__logo {
  margin-bottom: 22px;
  gap: 12px;
}
#pp-login-screen .portal-login__logo-img {
  width: 56px;
  height: 46px;
  padding: 3px;
  border: 1px solid #E5EAF0;
  border-radius: 12px;
  background: #fff;
}
#pp-login-screen .portal-login__logo span { color: #0A2342; font-size: 20px; letter-spacing: -0.03em; }
.pp-login-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #6B7280;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.pp-login-kicker > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #D6B25E; box-shadow: 0 0 0 3px rgba(214,178,94,0.16); }
.pp-login-kicker b { color: #B58B36; font-size: 12px; }
#pp-login-screen .portal-login__title { margin: 0; color: #0A2342; font-size: clamp(28px, 5vw, 34px); letter-spacing: -0.045em; line-height: 1.12; }
#pp-login-screen .portal-login__subtitle { margin: 8px 0 0; color: #526174; line-height: 1.55; }
#pp-login-screen .pp-role-select {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}
#pp-login-screen .pp-role-card {
  position: relative;
  min-width: 0;
  min-height: 76px;
  padding: 14px;
  border: 1px solid #D9E1E9;
  border-radius: 14px;
  background: #F8FAFC;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#pp-login-screen .pp-role-card:hover { border-color: #A9BAC8; background: #fff; transform: translateY(-1px); }
#pp-login-screen .pp-role-card.is-selected {
  border-color: #0A2342;
  background: linear-gradient(145deg, #F2F6FA, #fff);
  box-shadow: inset 0 0 0 1px #0A2342, 0 4px 12px rgba(10,35,66,0.08);
}
#pp-login-screen .pp-role-card input {
  display: block !important;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#pp-login-screen .pp-role-card:focus-within { outline: 3px solid rgba(214,178,94,0.8); outline-offset: 2px; }
#pp-login-screen .pp-role-card__content { gap: 10px; }
#pp-login-screen .pp-role-card__content svg { width: 22px; height: 22px; color: #0A2342; }
#pp-login-screen .pp-role-card__title { color: #102A46; font-size: 14px; }
#pp-login-screen .pp-role-card__desc { margin-top: 3px; color: #64748B; font-size: 11px; line-height: 1.35; }
#pp-login-screen .portal-login__form { gap: 14px; }
#pp-login-screen .portal-login__field { gap: 6px; }
#pp-login-screen .portal-login__field label { color: #24364B; font-size: 12px; font-weight: 700; }
#pp-login-screen .portal-login__field input {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #CED7E0;
  border-radius: 11px;
  background: #fff;
  color: #102033;
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
#pp-login-screen .portal-login__field input:focus { border-color: #0A2342; box-shadow: 0 0 0 3px rgba(10,35,66,0.12); }
#pp-login-screen .portal-login__field-row { margin-top: 1px; }
#pp-login-screen .portal-login__checkbox { color: #526174; font-size: 12px; }
#pp-login-screen .portal-login__checkbox input { accent-color: #0A2342; }
#pp-login-screen .portal-login__link { color: #006D8F; font-weight: 700; }
#pp-login-screen .portal-login__submit {
  min-height: 50px;
  margin-top: 2px;
  border: 1px solid #0A2342;
  border-radius: 12px;
  background: linear-gradient(100deg, #0A2342, #12385C);
  box-shadow: 0 8px 18px rgba(10,35,66,0.18);
  color: #F4D78F;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
#pp-login-screen .portal-login__submit:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(10,35,66,0.24); background: linear-gradient(100deg, #06172B, #0A2342); }
#pp-login-screen .portal-login__submit:focus-visible { outline: 3px solid rgba(214,178,94,0.85); outline-offset: 3px; }
.pp-login-security {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 12px;
  border: 1px solid #E5EAF0;
  border-radius: 12px;
  background: #F7F9FB;
  color: #475569;
}
.pp-login-security__mark { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 50%; background: #E8F2ED; color: #26724C; font-size: 14px; font-weight: 900; }
.pp-login-security strong, .pp-login-security small { display: block; }
.pp-login-security strong { color: #24364B; font-size: 11px; }
.pp-login-security small { margin-top: 2px; color: #64748B; font-size: 10px; line-height: 1.4; }
#pp-login-screen .portal-login__footer { margin: 16px 0 0; font-size: 12px; }

/* Account shell: consistent, legible controls without changing the navigation model */
.portal-topbar { border-bottom-width: 3px; box-shadow: 0 3px 18px rgba(6,23,43,0.22); }
.portal-topbar__left { gap: 10px; }
.portal-topbar__menu-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(214,178,94,0.25);
  background: rgba(255,255,255,0.035);
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.portal-topbar__menu-btn:hover { border-color: rgba(214,178,94,0.55); background: rgba(255,255,255,0.09); }
.portal-topbar__menu-btn:focus-visible,
.portal-topbar__logout:focus-visible { outline: 3px solid rgba(214,178,94,0.88); outline-offset: 2px; }
.portal-topbar__right { gap: clamp(8px, 1.5vw, 18px); }
#pp-role-badge { padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.portal-topbar__user { gap: 9px; }
.portal-topbar__avatar { box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.portal-topbar__name { font-size: 13px; line-height: 1.25; }
.portal-topbar__plan { margin-top: 2px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.portal-topbar__logout { transition: background 150ms ease, transform 150ms ease; }
.portal-topbar__logout:active { transform: scale(0.96); }
.portal-sidebar { box-shadow: inset -1px 0 rgba(255,255,255,0.025); }
.portal-nav__item { transition: background 150ms ease, color 150ms ease, transform 150ms ease; }
.portal-nav__item:not(.is-active):hover { transform: translateX(2px); }
.portal-nav__item.is-active { box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.portal-nav__item:focus-visible { outline: 3px solid #D6B25E; outline-offset: -3px; }
#pp-owner-command[aria-busy="true"] { cursor: progress; }
#view-pp-dashboard .portal-view__header { gap: 20px; }
#view-pp-dashboard .portal-view__header > div { min-width: 0; }
#view-pp-dashboard .portal-view__title { letter-spacing: -0.04em; }
#view-pp-dashboard #pp-owner-asof { font-variant-numeric: tabular-nums; }

/* Technician route: a clear field-ops header, fast scan stats and readable progress */
#view-pp-techmode.pp-tech-mode { max-width: 760px; padding: 20px 14px 88px; }
#view-pp-techmode .pp-tech-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 5vw, 28px);
  border: 1px solid rgba(214,178,94,0.3);
  border-radius: 20px;
  background: linear-gradient(135deg, #06172B 0%, #0A2342 66%, #12385C 100%);
  box-shadow: 0 12px 30px rgba(6,23,43,0.2);
  text-align: left;
}
#view-pp-techmode .pp-tech-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  top: -112px;
  right: -46px;
  border: 1px solid rgba(214,178,94,0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(214,178,94,0.035), 0 0 0 42px rgba(214,178,94,0.025);
}
.pp-tech-header__eyebrow { display: block; margin-bottom: 5px; color: #E6C77E; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
#view-pp-techmode .pp-tech-header__title { color: #fff; font-size: clamp(26px, 6vw, 34px); letter-spacing: -0.04em; line-height: 1.1; }
#view-pp-techmode .pp-tech-header__date { margin: 7px 0 20px; color: rgba(239,245,250,0.78); font-size: 13px; font-weight: 600; }
#view-pp-techmode .pp-tech-stats { justify-content: stretch; gap: 9px; }
#view-pp-techmode .pp-tech-stat {
  min-width: 0;
  flex: 1 1 0;
  padding: 12px 8px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 13px;
  background: rgba(255,255,255,0.07);
}
#view-pp-techmode .pp-tech-stat__num { color: #F4D78F; font-size: 27px; font-variant-numeric: tabular-nums; }
#view-pp-techmode .pp-tech-stat__num--done { color: #93D5B1; }
#view-pp-techmode .pp-tech-stat__label { margin-top: 6px; color: rgba(239,245,250,0.78); font-size: 9px; letter-spacing: 0.1em; }
.pp-tech-progress { margin-top: 15px; }
.pp-tech-progress__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: rgba(239,245,250,0.76); font-size: 11px; }
.pp-tech-progress__label strong { color: #F4D78F; font-size: 11px; font-variant-numeric: tabular-nums; }
.pp-tech-progress__track { height: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.1); }
.pp-tech-progress__track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #D6B25E, #F4D78F); transition: width 220ms ease; }
.pp-tech-progress.is-complete .pp-tech-progress__track span { background: linear-gradient(90deg, #68B58A, #A6E3C0); }
#pp-tech-stops .pp-tech-stop { border-color: #D9E2EA; border-left: 4px solid #D6B25E; border-radius: 16px; box-shadow: 0 4px 16px rgba(10,35,66,0.07); transition: box-shadow 160ms ease, transform 160ms ease; }
#pp-tech-stops .pp-tech-stop:not(.pp-tech-stop--done):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10,35,66,0.12); }
#pp-tech-stops .pp-tech-stop--done { border-left-color: #2A9D5C; opacity: 0.82; }
#pp-tech-stops .pp-tech-stop__name { letter-spacing: -0.025em; }
#pp-tech-stops .pp-tech-btn { min-height: 50px; border-radius: 12px; }
#pp-tech-stops .pp-tech-btn:focus-visible { outline: 3px solid rgba(214,178,94,0.85); outline-offset: 2px; }
#pp-tech-stops .pp-tech-btn--call { background: #E8F2ED; color: #1E6B48; border: 1px solid #C4DFD0; }
#pp-tech-stops .pp-tech-btn--map { background: #EAF2F8; color: #0A5270; border: 1px solid #C7DCEB; }

@media (max-width: 520px) {
  #pp-login-screen.portal-login { padding: max(16px, var(--pp-safe-top)) 14px max(20px, var(--pp-safe-bottom)); }
  #pp-login-screen .portal-login__card { padding: 22px 18px; border-radius: 20px; }
  #pp-login-screen .portal-login__logo { margin-bottom: 18px; }
  #pp-login-screen .pp-role-select { gap: 8px; margin: 18px 0; }
  #pp-login-screen .pp-role-card { min-height: 72px; padding: 11px 9px; }
  #pp-login-screen .pp-role-card__content { gap: 7px; }
  #pp-login-screen .pp-role-card__content svg { width: 20px; height: 20px; }
  #pp-login-screen .pp-role-card__title { font-size: 12px; }
  #pp-login-screen .pp-role-card__desc { font-size: 10px; }
  #pp-login-screen .portal-login__field-row { align-items: flex-start; }
  #pp-login-screen .portal-login__link { font-size: 11px; }
  #pp-login-screen .portal-login__checkbox { min-height: 36px; }
  .portal-topbar { gap: 7px; }
  .portal-topbar__right { gap: 7px; }
  #pp-role-badge { padding: 4px 8px; font-size: 9px; }
  .portal-topbar__avatar { width: 34px; height: 34px; }
  .portal-topbar__logout { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
  #view-pp-techmode.pp-tech-mode { padding: 16px 12px 84px; }
  #view-pp-techmode .pp-tech-header { padding: 18px 15px; border-radius: 17px; }
  #view-pp-techmode .pp-tech-stat { padding: 10px 5px 9px; }
  #view-pp-techmode .pp-tech-stat__num { font-size: 24px; }
  #view-pp-techmode .pp-tech-stat__label { font-size: 8px; letter-spacing: 0.07em; }
  #pp-tech-stops .pp-tech-stop { padding: 16px; }
}
@media (max-width: 360px) {
  #pp-login-screen .portal-login__field-row { flex-wrap: wrap; }
  #pp-login-screen .pp-role-card__desc { display: none; }
  #pp-login-screen .pp-role-card { min-height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  #pp-login-screen *, .portal-nav__item, .pp-tech-progress__track span, #pp-tech-stops .pp-tech-stop { transition-duration: 0.01ms !important; }
}

/* 24. Owner dashboard — executive hierarchy, clean KPI cards, clear route entry */
#view-pp-dashboard {
  --pp-dashboard-ink: #0A2342;
  --pp-dashboard-muted: #64748B;
  --pp-dashboard-line: #DCE5ED;
}
#view-pp-dashboard .pp-dashboard-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 142px;
  margin-bottom: 22px;
  padding: clamp(22px, 3.2vw, 34px);
  overflow: hidden;
  border: 1px solid var(--pp-dashboard-line);
  border-left: 4px solid #D6B25E;
  border-radius: 19px;
  background: linear-gradient(112deg, #FFFFFF 0%, #FBFCFE 66%, #F1F6F9 100%);
  box-shadow: 0 4px 18px rgba(10,35,66,0.055), 0 1px 3px rgba(10,35,66,0.04);
}
#view-pp-dashboard .pp-dashboard-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -112px;
  right: 255px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(10,35,66,0.055);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(10,35,66,0.018), 0 0 0 42px rgba(10,35,66,0.014);
  pointer-events: none;
}
.pp-dashboard-header__copy { min-width: 0; position: relative; z-index: 1; }
.pp-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #567083;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}
.pp-dashboard-eyebrow::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #D6B25E; box-shadow: 0 0 0 3px rgba(214,178,94,0.16); }
.pp-dashboard-eyebrow i { color: #B1BFCA; font-style: normal; }
#view-pp-dashboard .pp-dashboard-header .portal-view__title {
  margin: 0 !important;
  color: var(--pp-dashboard-ink) !important;
  font-size: clamp(29px, 3vw, 38px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
}
#view-pp-dashboard .pp-dashboard-header .portal-view__title::after { display: none; }
#view-pp-dashboard .pp-dashboard-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 11px 0 0;
  padding: 5px 10px;
  border: 1px solid #E5EBF0;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #516477 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
#view-pp-dashboard .pp-dashboard-date:empty { display: none; }
#view-pp-dashboard .pp-dashboard-date::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #2A9D5C; }
#view-pp-dashboard .pp-dashboard-route-button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-width: 248px;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid rgba(10,35,66,0.92);
  border-radius: 14px;
  background: linear-gradient(135deg, #0E2D4D 0%, #071B31 100%);
  box-shadow: 0 6px 16px rgba(10,35,66,0.17), inset 0 1px rgba(255,255,255,0.08);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
#view-pp-dashboard .pp-dashboard-route-button:hover { transform: translateY(-2px); border-color: #D6B25E; box-shadow: 0 10px 22px rgba(10,35,66,0.22); }
#view-pp-dashboard .pp-dashboard-route-button:active { transform: translateY(0); }
#view-pp-dashboard .pp-dashboard-route-button:focus-visible { outline: 3px solid rgba(214,178,94,0.86); outline-offset: 3px; }
.pp-dashboard-route-button__icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(214,178,94,0.36); border-radius: 12px; background: rgba(214,178,94,0.12); color: #F4D78F; }
.pp-dashboard-route-button__icon svg { width: 22px; height: 22px; }
.pp-dashboard-route-button__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-dashboard-route-button__copy strong { color: #fff; font-size: 13px; font-weight: 750; line-height: 1.2; }
.pp-dashboard-route-button__copy small { color: rgba(235,242,248,0.72); font-size: 10px; font-weight: 550; line-height: 1.35; }
.pp-dashboard-route-button__arrow { justify-self: end; color: #E6C77E; font-size: 17px; }

/* Business snapshot shell */
#view-pp-dashboard #pp-owner-command {
  position: relative;
  margin-bottom: 0;
  border: 1px solid rgba(214,178,94,0.22);
  border-radius: 20px;
  background:
    radial-gradient(28rem 20rem at 100% 0%, rgba(49,103,145,0.22), transparent 68%),
    linear-gradient(138deg, #06172B 0%, #0A2342 58%, #102F50 100%);
  box-shadow: 0 12px 32px rgba(6,23,43,0.17), 0 2px 6px rgba(6,23,43,0.08);
}
#view-pp-dashboard .pp-owner-topbar {
  align-items: center;
  min-height: 82px;
  margin: 0 20px 16px;
  padding: 19px 4px 16px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  background: transparent;
}
.pp-owner-heading { min-width: 0; }
#view-pp-dashboard .pp-owner-eyebrow { display: flex; align-items: center; gap: 9px; color: #E7C978; font-size: 10px; letter-spacing: 0.13em; }
.pp-owner-live-dot { position: relative; display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #74C697; box-shadow: 0 0 0 3px rgba(116,198,151,0.14); }
#view-pp-dashboard .pp-owner-asof { margin: 6px 0 0; color: rgba(234,241,247,0.72) !important; font-size: 11px !important; font-weight: 500 !important; }
#view-pp-dashboard .pp-owner-actions { gap: 9px; }
#view-pp-dashboard .pp-owner-actions .portal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 10px; font-size: 12px; font-weight: 700; }
#view-pp-dashboard .pp-owner-actions .portal-btn svg { width: 15px; height: 15px; }
#view-pp-dashboard .pp-owner-actions .portal-btn--ghost { color: #F0F4F8; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.055); box-shadow: none; }
#view-pp-dashboard .pp-owner-actions .portal-btn--ghost:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.32); }
#view-pp-dashboard .pp-owner-actions .portal-btn--primary { border: 1px solid #E0BB62; background: linear-gradient(135deg, #F0D58D, #D6B25E); color: #0A2342; box-shadow: 0 4px 12px rgba(0,0,0,0.14); }
#view-pp-dashboard .pp-owner-actions .portal-btn--primary:hover { transform: translateY(-1px); background: linear-gradient(135deg, #F6E3AD, #E3C675); }
#view-pp-dashboard #pp-owner-dashboard { gap: 14px; padding: 0 20px 20px; }
#view-pp-dashboard #pp-owner-dashboard > section,
#view-pp-dashboard #pp-owner-dashboard .pp-owner-panel {
  contain: layout;
  padding: 20px;
  border: 1px solid #E2E8EF;
  border-radius: 15px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFE 100%);
  box-shadow: 0 2px 8px rgba(10,35,66,0.045), 0 1px 2px rgba(10,35,66,0.04);
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
#view-pp-dashboard #pp-owner-dashboard > section:hover,
#view-pp-dashboard #pp-owner-dashboard .pp-owner-panel:hover { border-color: #D4DEE7; box-shadow: 0 6px 18px rgba(10,35,66,0.07), 0 1px 3px rgba(10,35,66,0.04); }
#view-pp-dashboard #pp-owner-dashboard > .pp-owner-priority { border-top: 3px solid #D6B25E !important; }
#view-pp-dashboard .pp-owner-sectionhead { align-items: center; margin-bottom: 15px; }
#view-pp-dashboard .pp-owner-sectionhead > div > span { color: #0E7890; font-size: 9px; letter-spacing: 0.13em; }
#view-pp-dashboard .pp-owner-sectionhead h2 { margin-top: 4px; color: #102A46; font-size: 16px !important; font-weight: 780; letter-spacing: -0.025em; }
#view-pp-dashboard .pp-owner-sectionhead > strong { min-width: 0; padding: 5px 9px; border: 1px solid #EBDCA9; border-radius: 999px; background: #FFFAEA; color: #805B17; font-size: 10px; text-align: center; }
#view-pp-dashboard .pp-owner-link { color: #0E6683; font-size: 11px; }
#view-pp-dashboard .pp-owner-link:hover { color: #0A2342; }

/* Separate financial indicators into easy-to-scan, clickable cards */
#view-pp-dashboard .pp-owner-metrics { gap: 10px; overflow: visible; border: 0; border-radius: 0; }
#view-pp-dashboard .pp-owner-metric {
  contain: layout;
  min-height: 118px;
  gap: 8px;
  padding: 15px 16px;
  border: 1px solid #E2E8EF;
  border-radius: 13px;
  background: linear-gradient(145deg, #FFFFFF, #F9FBFD);
  box-shadow: 0 2px 6px rgba(10,35,66,0.035);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
#view-pp-dashboard .pp-owner-metric:last-child { border-right: 1px solid #E2E8EF; }
#view-pp-dashboard .pp-owner-metric:hover { transform: translateY(-2px); border-color: #C6D4E0; background: #fff; box-shadow: 0 8px 20px rgba(10,35,66,0.09); }
#view-pp-dashboard .pp-owner-metric__label,
#view-pp-dashboard .pp-owner-metric > span:last-child { color: #617386 !important; font-size: 10px !important; font-weight: 600; line-height: 1.4 !important; }
#view-pp-dashboard .pp-owner-metric strong { color: #0A2342; font-size: clamp(22px, 2.1vw, 29px) !important; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#view-pp-dashboard .pp-owner-metric.is-risk strong { color: #B8453D; }
#view-pp-dashboard .pp-owner-metric.is-good strong { color: #21734E; }
#view-pp-dashboard .pp-owner-metric:focus-visible,
#view-pp-dashboard .pp-owner-alert:focus-visible,
#view-pp-dashboard .pp-owner-activity:focus-visible,
#view-pp-dashboard .pp-owner-factbtn:focus-visible,
#view-pp-dashboard .pp-owner-link:focus-visible { outline: 3px solid rgba(214,178,94,0.82); outline-offset: 3px; }

/* Operations, capacity and customer-health cards */
#view-pp-dashboard .pp-owner-grid { gap: 14px; }
#view-pp-dashboard .pp-owner-grid--three { gap: 12px; }
#view-pp-dashboard .pp-owner-progress strong { color: #0A2342; font-size: 25px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
#view-pp-dashboard .pp-owner-progress span,
#view-pp-dashboard .pp-owner-bigstat span,
#view-pp-dashboard .pp-owner-team span { color: #65778A; font-size: 11px; font-weight: 550; }
#view-pp-dashboard .pp-owner-track { height: 8px; background: #E8EEF3; }
#view-pp-dashboard .pp-owner-track span { background: linear-gradient(90deg, #288761, #71C196); }
#view-pp-dashboard .pp-owner-facts { gap: 8px; margin-top: 14px; }
#view-pp-dashboard .pp-owner-facts > span,
#view-pp-dashboard .pp-owner-facts > .pp-owner-factbtn {
  min-width: 92px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #E7EDF2;
  border-radius: 10px;
  background: #F8FAFC;
}
#view-pp-dashboard .pp-owner-facts strong { color: #243A50; font-size: 14px; font-variant-numeric: tabular-nums; }
#view-pp-dashboard .pp-owner-facts > .pp-owner-factbtn { color: #617386; font-size: 10px; }
#view-pp-dashboard .pp-owner-facts > .pp-owner-factbtn:hover { border-color: #CBD8E2; background: #F1F5F8; }
#view-pp-dashboard .pp-owner-facts > .pp-owner-factbtn.has-unassigned { border-color: #F1D9B5; background: #FFFAF1; }
#view-pp-dashboard .pp-owner-facts > .pp-owner-factbtn.has-unassigned strong { color: #9A5B13; }
#view-pp-dashboard .pp-owner-stage { padding: 6px 9px; border: 1px solid #E8EDF2; background: #F8FAFC; color: #66788A; font-size: 9px; font-weight: 600; }
#view-pp-dashboard .pp-owner-stage strong { color: #173956; }
#view-pp-dashboard .pp-owner-team strong,
#view-pp-dashboard .pp-owner-bigstat strong { color: #0A2342; font-size: 32px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#view-pp-dashboard .pp-owner-alert { min-height: 66px; border-color: #E6EBF0; border-radius: 12px; background: #FBFCFD; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
#view-pp-dashboard .pp-owner-alert:hover { transform: translateY(-1px); border-color: #D1DCE5; box-shadow: 0 4px 10px rgba(10,35,66,0.06); }
#view-pp-dashboard .pp-owner-alert.is-high { border-left: 3px solid #C9524A; }
#view-pp-dashboard .pp-owner-alert.is-medium { border-left: 3px solid #D6A34A; }
#view-pp-dashboard .pp-owner-alert strong { color: #20374D; font-size: 12px; }
#view-pp-dashboard .pp-owner-alert small { color: #67798B; font-size: 10px; }
#view-pp-dashboard .pp-owner-alert__dot { width: 8px; height: 8px; }
#view-pp-dashboard .pp-owner-clear { min-height: 82px; justify-content: center; border: 1px solid #DDEBE3; background: #F5FAF7; color: #28724E; }
#view-pp-dashboard .pp-owner-clear span { color: #61786C; }
#view-pp-dashboard .pp-owner-activitylist { gap: 0 18px; }
#view-pp-dashboard .pp-owner-activity { min-height: 58px; padding: 10px 2px; border-bottom-color: #E9EEF2; }
#view-pp-dashboard .pp-owner-activity strong { color: #233A50; font-size: 11px; }
#view-pp-dashboard .pp-owner-activity small { color: #687A8C; font-size: 10px; }
#view-pp-dashboard .pp-owner-activity time { color: #75869A; font-size: 10px; font-weight: 650; }
#view-pp-dashboard .pp-owner-loading,
#view-pp-dashboard .pp-owner-error { min-height: 190px; border: 1px dashed rgba(255,255,255,0.25); border-radius: 14px; color: rgba(239,245,250,0.76); }
#view-pp-dashboard .pp-owner-error strong { color: #fff; }

@media (max-width: 900px) {
  #view-pp-dashboard .pp-dashboard-header { min-height: 0; }
  #view-pp-dashboard .pp-owner-metric { min-height: 108px; }
  #view-pp-dashboard .pp-owner-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-pp-dashboard .pp-owner-grid--three > .pp-owner-panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  #view-pp-dashboard .pp-dashboard-header { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 16px; padding: 21px 18px; border-radius: 16px; }
  #view-pp-dashboard .pp-dashboard-header::after { right: -100px; top: -120px; }
  #view-pp-dashboard .pp-dashboard-route-button { width: 100%; min-width: 0; }
  #view-pp-dashboard .pp-owner-topbar { align-items: flex-start; flex-direction: column; gap: 14px; margin: 0 13px 12px; padding: 17px 2px 13px; }
  #view-pp-dashboard .pp-owner-actions { width: 100%; }
  #view-pp-dashboard .pp-owner-actions .portal-btn--ghost { flex: 0 0 44px; padding-inline: 10px; }
  #view-pp-dashboard .pp-owner-actions .portal-btn--ghost span { display: none; }
  #view-pp-dashboard .pp-owner-actions .portal-btn--primary { flex: 1; }
  #view-pp-dashboard #pp-owner-dashboard { gap: 11px; padding: 0 13px 13px; }
  #view-pp-dashboard #pp-owner-dashboard > section,
  #view-pp-dashboard #pp-owner-dashboard .pp-owner-panel { padding: 15px; border-radius: 13px; }
  #view-pp-dashboard .pp-owner-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #view-pp-dashboard .pp-owner-metric { min-height: 106px; padding: 12px; }
  #view-pp-dashboard .pp-owner-metric strong { font-size: clamp(20px, 6vw, 26px) !important; }
  #view-pp-dashboard .pp-owner-grid--three { grid-template-columns: 1fr; }
  #view-pp-dashboard .pp-owner-grid--three > .pp-owner-panel:last-child { grid-column: auto; }
  #view-pp-dashboard .pp-owner-alerts { grid-template-columns: 1fr; }
  #view-pp-dashboard .pp-owner-facts > span,
  #view-pp-dashboard .pp-owner-facts > .pp-owner-factbtn { flex: 1 1 28%; min-width: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  #view-pp-dashboard .pp-dashboard-route-button,
  #view-pp-dashboard #pp-owner-dashboard > section,
  #view-pp-dashboard #pp-owner-dashboard .pp-owner-panel,
  #view-pp-dashboard .pp-owner-metric,
  #view-pp-dashboard .pp-owner-alert { transition-duration: 0.01ms !important; }
}

/* 25. Pool Pro shell — branded topbar, calmer navigation, intentional mobile drawer */
body.hps-root { margin: 0; }
#pp-app .portal-topbar {
  position: sticky;
  isolation: isolate;
  min-height: calc(var(--pp-topbar-h, 64px) + var(--pp-safe-top, 0px));
  background:
    radial-gradient(34rem 12rem at 78% -65%, rgba(74,117,151,0.34), transparent 72%),
    linear-gradient(112deg, #071A2E 0%, #0A2342 55%, #102D4C 100%) !important;
  border-bottom: 1px solid rgba(214,178,94,0.34);
  box-shadow: 0 7px 22px rgba(6,23,43,0.24);
}
#pp-app .portal-topbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(214,178,94,0.58) 50%, transparent 98%);
  pointer-events: none;
}
#pp-app .portal-topbar__left { gap: 12px; min-width: 0; }
#pp-app .portal-topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 6px 4px 0;
  border-radius: 12px;
  text-decoration: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
#pp-app .portal-topbar__logo:hover { opacity: 0.92; transform: translateY(-1px); }
#pp-app .portal-topbar__logo:focus-visible,
#pp-app .portal-sidebar__mobile-brand:focus-visible { outline: 3px solid rgba(214,178,94,0.88); outline-offset: 3px; }
.pp-shell-brand__mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(233,202,124,0.46);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(214,178,94,0.19), rgba(255,255,255,0.045));
  box-shadow: inset 0 1px rgba(255,255,255,0.14), 0 3px 10px rgba(0,0,0,0.13);
  color: #F2D78F;
}
.pp-shell-brand__mark svg { display: block; width: 22px; height: 22px; }
.pp-shell-brand__copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; line-height: 1; }
.pp-shell-brand__copy strong { color: #FFFFFF; font-size: 14px; font-weight: 800; letter-spacing: -0.025em; white-space: nowrap; }
.pp-shell-brand__copy small { color: #B9C9D7; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
#pp-app .portal-topbar__right { gap: clamp(8px, 1.35vw, 16px); }
#pp-app #pp-role-badge {
  padding: 5px 10px;
  border: 1px solid rgba(229,197,115,0.4);
  border-radius: 999px;
  background: rgba(214,178,94,0.13);
  color: #F2D991;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
#pp-app .portal-topbar__user {
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.16);
}
#pp-app .portal-topbar__avatar {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255,255,255,0.86);
  background: linear-gradient(145deg, #F0D78F 0%, #D6B25E 100%);
  box-shadow: 0 0 0 3px rgba(214,178,94,0.12), 0 3px 10px rgba(0,0,0,0.18);
  color: #0A2342;
  font-size: 11px;
  font-weight: 850;
}
#pp-app .portal-topbar__name { color: #FFFFFF !important; font-size: 12px !important; font-weight: 750 !important; letter-spacing: 0; }
#pp-app .portal-topbar__plan { margin-top: 3px; color: #B9C9D7 !important; font-size: 9px !important; font-weight: 650 !important; letter-spacing: 0.09em; opacity: 1; }
#pp-app .portal-topbar__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 11px;
  background: rgba(255,255,255,0.055);
  color: #D9E3EB;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.045em;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
#pp-app .portal-topbar__logout svg { width: 16px; height: 16px; }
#pp-app .portal-topbar__logout:hover { border-color: rgba(214,178,94,0.52); background: rgba(214,178,94,0.13); color: #F2D78F; }
#pp-app .portal-topbar__logout:focus-visible,
#pp-app .portal-topbar__menu-btn:focus-visible,
#pp-app .portal-sidebar__close:focus-visible { outline: 3px solid rgba(214,178,94,0.9); outline-offset: 2px; }
#pp-app .portal-topbar__menu-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(214,178,94,0.3);
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  color: #F0D78F;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
#pp-app .portal-topbar__menu-btn:hover { border-color: rgba(214,178,94,0.62); background: rgba(255,255,255,0.095); }
#pp-app .portal-topbar__menu-btn svg { width: 21px; height: 21px; }

#pp-app .portal-sidebar {
  padding: 17px 11px 18px;
  border-right: 1px solid rgba(214,178,94,0.17);
  background: linear-gradient(180deg, #0A2342 0%, #081E37 100%) !important;
  box-shadow: inset -1px 0 rgba(255,255,255,0.025);
  scrollbar-color: rgba(214,178,94,0.3) transparent;
}
#pp-app .portal-sidebar::-webkit-scrollbar { width: 5px; }
#pp-app .portal-sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(214,178,94,0.28); }
#pp-app .portal-sidebar__mobile-head { display: none; }
#pp-app .portal-sidebar .portal-nav__section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 3px 0;
  padding: 15px 9px 7px !important;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #DCC47F !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.25;
  text-shadow: none;
}
#pp-app .portal-sidebar .portal-nav__section::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 2px; background: #D6B25E; box-shadow: 0 0 0 3px rgba(214,178,94,0.1); }
#pp-app .portal-sidebar .portal-nav__section:first-of-type { margin-top: 4px; padding-top: 8px !important; border-top-color: transparent; }
#pp-app .portal-sidebar .portal-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 8px 10px !important;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 11px !important;
  background: transparent;
  color: #E5EDF4 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  line-height: 1.35 !important;
  text-shadow: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
#pp-app .portal-sidebar .portal-nav__item > svg { width: 18px; height: 18px; flex: 0 0 18px; color: #D5BB77 !important; opacity: 0.9; stroke-width: 1.85; }
#pp-app .portal-sidebar .portal-nav__item > span { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 8px; }
#pp-app .portal-sidebar .portal-nav__item:not(.is-active):hover { transform: translateX(2px); border-color: rgba(255,255,255,0.055); background: rgba(255,255,255,0.065); color: #FFFFFF !important; box-shadow: inset 0 1px rgba(255,255,255,0.035); }
#pp-app .portal-sidebar .portal-nav__item:not(.is-active):hover > svg { color: #F0D78F !important; opacity: 1; }
#pp-app .portal-sidebar .portal-nav__item.is-active {
  padding: 8px 10px !important;
  border: 1px solid rgba(214,178,94,0.24);
  border-left: 3px solid #D6B25E;
  background: linear-gradient(100deg, #FFF9E9 0%, #FFFDF8 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15), inset 0 1px rgba(255,255,255,0.9);
  color: #0A2342 !important;
  font-weight: 800 !important;
}
#pp-app .portal-sidebar .portal-nav__item.is-active > svg { color: #B28A32 !important; opacity: 1; }
#pp-app .portal-sidebar .portal-nav__item.is-active .pp-nav-badge { border-color: #0A2342; background: #0A2342; color: #F1D78F; }
#pp-app .portal-sidebar .portal-nav__item:focus-visible { outline: 3px solid rgba(214,178,94,0.92); outline-offset: -3px; }
#pp-app .portal-sidebar .pp-nav-badge { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; padding: 0 6px; margin-left: auto; border: 1px solid rgba(234,202,123,0.42); border-radius: 999px; background: rgba(214,178,94,0.18); color: #F2D78F; font-size: 10px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  #pp-app .portal-topbar__left { gap: 8px; }
  #pp-app .portal-topbar__logo { gap: 8px; padding-right: 0; }
  #pp-app .pp-shell-brand__mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; }
  #pp-app .pp-shell-brand__mark svg { width: 20px; height: 20px; }
  #pp-app .pp-shell-brand__copy strong { font-size: 13px; }
  #pp-app .pp-shell-brand__copy small { font-size: 8px; letter-spacing: 0.08em; }
  #pp-app .portal-topbar__right { gap: 7px; }
  #pp-app .portal-topbar__user { padding-left: 8px; }
  #pp-app .portal-topbar__logout { min-width: 44px; min-height: 44px; padding: 0; border-radius: 12px; }
  #pp-app .portal-topbar__logout svg { width: 17px; height: 17px; }
  #pp-app .portal-sidebar {
    padding-top: max(14px, var(--pp-safe-top));
    padding-bottom: calc(16px + var(--pp-safe-bottom));
    border-right-color: rgba(214,178,94,0.24);
    box-shadow: 12px 0 44px rgba(2,12,24,0.32);
  }
  #pp-app .portal-sidebar__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 15px;
    margin: 0 2px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.13);
  }
  #pp-app .portal-sidebar__mobile-brand { display: inline-flex; min-width: 0; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
  #pp-app .portal-sidebar__mobile-brand .pp-shell-brand__copy strong { font-size: 14px; }
  #pp-app .portal-sidebar__mobile-brand .pp-shell-brand__copy small { color: #C1CFDA; font-size: 8px; letter-spacing: 0.11em; }
  #pp-app .portal-sidebar__close {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.17);
    border-radius: 12px;
    background: rgba(255,255,255,0.055);
    color: #E8D18F;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  }
  #pp-app .portal-sidebar__close:hover { border-color: rgba(214,178,94,0.5); background: rgba(255,255,255,0.1); }
  #pp-app .portal-sidebar__close:active { transform: scale(0.96); }
  #pp-app .portal-sidebar .portal-nav__item { min-height: 46px; font-size: 14px !important; }
  #pp-app .portal-sidebar .portal-nav__section { padding-top: 16px !important; }
  #pp-app .portal-sidebar .portal-nav__section:first-of-type { padding-top: 8px !important; }
  #pp-app .portal-sidebar-overlay { background: rgba(3,16,30,0.56); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
@media (max-width: 380px) {
  #pp-app .pp-shell-brand__copy small { display: none; }
  #pp-app .portal-topbar__right { gap: 5px; }
  #pp-app .portal-topbar__user { padding-left: 6px; }
}
@media (hover: none) {
  #pp-app .portal-topbar__logo:hover,
  #pp-app .portal-sidebar .portal-nav__item:not(.is-active):hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #pp-app .portal-topbar__logo,
  #pp-app .portal-topbar__logout,
  #pp-app .portal-topbar__menu-btn,
  #pp-app .portal-sidebar .portal-nav__item,
  #pp-app .portal-sidebar__close { transition-duration: 0.01ms !important; }
}

/* 22. Service visits — calmer hierarchy, roomier field layout, accessible controls */
#view-pp-visits .pp-visits-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  align-items: center;
  gap: 24px;
  margin-bottom: 22px !important;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid #D7E3EA;
  border-left: 4px solid #0D6E86;
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 8%, rgba(214,178,94,0.14), transparent 15rem),
    linear-gradient(115deg, #FFFFFF 0%, #F7FAFB 55%, #EFF7F8 100%);
  box-shadow: 0 4px 18px rgba(10,35,66,0.06);
}
#view-pp-visits .pp-visits-hero__intro { min-width: 0; }
#view-pp-visits .pp-visits-hero__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #8A6A21;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}
#view-pp-visits .pp-visits-hero .portal-view__title {
  margin: 0;
  color: #0A2342;
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}
#view-pp-visits .pp-visits-hero__description {
  margin: 7px 0 0;
  color: #536579;
  font-size: 14px;
  line-height: 1.5;
}
#view-pp-visits .pp-visits-hero__customer {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #DFE8EC;
  border-radius: 13px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 2px 8px rgba(10,35,66,0.045);
}
#view-pp-visits .pp-visits-hero__customer-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  background: #EAF4F6;
  color: #0D6E86;
}
#view-pp-visits .pp-visits-hero__customer-icon svg { width: 21px; height: 21px; }
#view-pp-visits .pp-visits-hero__customer-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
#view-pp-visits .pp-visits-hero__customer-label {
  color: #647588;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}
#view-pp-visits .pp-visits-hero .portal-view__subtitle {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
  color: #0A2342;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

#view-pp-visits .pp-visit-details-panel { padding-top: 18px; }
#view-pp-visits .pp-visit-details-panel__header { margin-bottom: 14px; }
#view-pp-visits .pp-visit-details-panel__header > div,
#view-pp-visits .pp-visit-panel-header > div { min-width: 0; }
#view-pp-visits .pp-visit-panel__hint {
  margin: 4px 0 0;
  color: #5F7082;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
#view-pp-visits .pp-visit-start-tag,
#view-pp-visits .pp-visit-count-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid #D8E5E9;
  border-radius: 999px;
  background: #F0F7F8;
  color: #0D6178;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 7px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
#view-pp-visits .pp-visit-details-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(190px, 0.8fr);
  align-items: start;
  gap: 16px;
  margin-bottom: 0;
}
#view-pp-visits .pp-visit-details-row .portal-form__field,
#view-pp-visits .pp-visit-details-panel > .portal-form__field { min-width: 0; }
#view-pp-visits .pp-visit-details-panel > .portal-form__field:last-child { margin-bottom: 0; }

#view-pp-visits .pp-visit-main-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(290px, 0.75fr);
  align-items: start;
  gap: 20px;
  margin-bottom: 20px;
}
#view-pp-visits .pp-visit-main-grid > .portal-panel,
#view-pp-visits .pp-visit-followup-grid > .portal-panel { min-width: 0; margin-bottom: 0; }
#view-pp-visits .pp-visit-panel-header { align-items: flex-start; gap: 12px; }
#view-pp-visits .pp-visit-checklist-panel .pp-checklist { gap: 8px; }
#view-pp-visits .pp-check {
  position: relative;
  min-height: 48px;
  gap: 12px;
  padding: 10px 12px;
  color: #1D3045;
  font-size: 13px;
  line-height: 1.35;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
#view-pp-visits .pp-check:hover { transform: translateX(1px); }
#view-pp-visits .pp-check input {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#view-pp-visits .pp-check input:focus-visible + .pp-check__mark {
  outline: 3px solid rgba(13,110,134,0.34);
  outline-offset: 3px;
}
#view-pp-visits .pp-check input:checked ~ span:last-child { color: #526375; }

#view-pp-visits .pp-visit-followup-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 20px;
}
#view-pp-visits .pp-visit-chem-added-panel .portal-panel__header,
#view-pp-visits .pp-visit-notes-panel .portal-panel__header { align-items: flex-start; }
#view-pp-visits .pp-visit-chem-added-panel .pp-chem-added {
  gap: 7px;
  text-align: left;
}
#view-pp-visits .pp-chem-added__group {
  margin-top: 12px;
  color: #526579;
  font-size: 10px;
  letter-spacing: 0.09em;
}
#view-pp-visits .pp-chem-added__item--dual {
  padding: 9px 10px;
  border: 1px solid #E5ECF0;
  border-radius: 10px;
  background: #FBFCFD;
}
#view-pp-visits .pp-chem-added__name { color: #142D49; font-size: 13px; font-weight: 650; }
#view-pp-visits .pp-chem-added__dual-fields { gap: 10px; }
#view-pp-visits .pp-chem-added__field label { font-size: 11px; font-weight: 700; }
#view-pp-visits .pp-chem-added__field input {
  min-height: 40px;
  border-color: #D7E2E8;
  border-radius: 9px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
#view-pp-visits .pp-chem-added__field input:focus-visible,
#view-pp-visits .pp-chem-stayout input:focus-visible { outline: 3px solid rgba(13,110,134,0.28); outline-offset: 2px; }
#view-pp-visits .pp-chem-stayout { align-items: flex-start; line-height: 1.45; }
#view-pp-visits .pp-chem-stayout input { margin-top: 2px; }
#view-pp-visits .pp-visit-notes-panel textarea { min-height: 96px; resize: vertical; }
#view-pp-visits .pp-visit-notes-panel .portal-form__field:last-child { margin-bottom: 0; }

#view-pp-visits .pp-visit-photos__dropzone {
  width: 100%;
  min-height: 150px;
  padding: 24px 16px;
  border-color: #BDD0D8;
  background: linear-gradient(145deg, #FBFDFE, #F4F9FA);
  color: #0A2342;
  font: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
#view-pp-visits .pp-visit-photos__dropzone:hover { border-color: #0D6E86; background: #F0F7F8; }
#view-pp-visits .pp-visit-photos__dropzone:focus-visible {
  outline: 3px solid rgba(13,110,134,0.28);
  outline-offset: 3px;
}
#view-pp-visits .pp-visit-photos__dropzone svg { color: #0D6E86; }
#view-pp-visits .pp-visit-photos__dropzone > span:first-of-type { font-size: 14px; font-weight: 750; }
#view-pp-visits .pp-visit-photos__hint { margin-top: 2px; color: #65768A; font-size: 12px; }

@media (max-width: 1080px) {
  #view-pp-visits .pp-visit-main-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #view-pp-visits .pp-visit-followup-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #view-pp-visits .pp-visits-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    margin-bottom: 16px !important;
    padding: 18px 16px;
  }
  #view-pp-visits .pp-visits-hero__customer { padding: 10px 12px; }
  #view-pp-visits .pp-visit-details-panel { padding-top: 14px; }
  #view-pp-visits .pp-visit-details-panel__header { align-items: center; }
  #view-pp-visits .pp-visit-details-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #view-pp-visits .pp-visit-details-panel > .portal-form__field { margin-bottom: 0; }
  #view-pp-visits .pp-visit-main-grid,
  #view-pp-visits .pp-visit-followup-grid { gap: 12px; }
  #view-pp-visits .pp-visit-panel-header { gap: 8px; }
  #view-pp-visits .pp-visit-panel__hint { font-size: 12px; }
  #view-pp-visits .pp-chem-added__item--dual { padding: 10px; }
  #view-pp-visits .pp-visit-photos__dropzone { min-height: 138px; padding: 20px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #view-pp-visits .pp-check { transition-duration: 0.01ms; }
}