/* app/assets/stylesheets/application.css */

/* =========================================
   1. GLOBAL SAFETY SHIELD & THEME
   (Prevents horizontal scrolling and forces Dark Mode)
   ========================================= */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* CRITICAL: Stops the page from drifting right */
  margin: 0;
  padding: 0;
  background-color: #0f172a !important; /* Forces the dark background globally */
  color: #f8fafc !important; /* Forces default text to be light */
  color-scheme: dark; /* Tells the browser to use dark scrollbars and native inputs */
}

/* =========================================
   GLOBAL HEADINGS (site-wide, 2026-07-16)
   Pico ships light-theme heading colors (near-black), which vanish on our
   forced-dark background — e.g. the "Quote for:" header on quotes#show.
   Set them once here instead of per page.
   ========================================= */
h1, h2, h3, h4, h5, h6 {
  color: #f8fafc;
}
h1 a, h2 a, h3 a { color: #60a5fa; }
h1 a:hover, h2 a:hover, h3 a:hover { color: #93c5fd; }

/* =========================================
   GLOBAL TEXT SELECTION (2026-07-16)
   The browser's default selection color is nearly invisible on the dark
   theme (highlighting text to edit it was hard to see).
   ========================================= */
::selection {
  background: #3b82f6;
  color: #ffffff;
}

/* =========================================
   2. LAYOUT OVERRIDES (The "Nuclear Option")
   ========================================= */

/* Reset the Main Container */
.app-main {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

/* The Centering Wrapper */
.app-shell {
  width: 100%;
  display: flex;       
  justify-content: center; /* Center children horizontally */
  padding-top: 20px; 
  box-sizing: border-box;
}

/* Ensure the inner content can take full width */
.app-shell > * {
  width: 100%;
}

/* =========================================
   GLOBAL CONTENT WIDTH (85% of screen — James Jones, 2026-07-02)
   Page content should occupy 85% of the viewport on desktop.
   ========================================= */
:root {
  --content-width: 85vw;
}

/* On phones/small tablets, use the full width instead of 85% */
@media (max-width: 768px) {
  :root {
    --content-width: 100%;
  }
}

/* PAGE CONTAINER (The Master Definition) */
.page-container {
  width: min(var(--content-width), 100%);
  margin-inline: auto; /* Standard centering */
  padding-inline: 20px;
  box-sizing: border-box;
}

/* GLOBAL CONTENT WRAPPER: the layout wraps every signed-in page's content in
   .page-content, so all pages get the 85% width without per-page styling.
   Also used by the franchise-switcher bar and flash messages in the layout.
   (Declared AFTER .app-shell > * so this width wins the specificity tie.) */
.page-content {
  width: min(var(--content-width), 100%);
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/* NOTE: per-page hardcoded max-width wrappers (1000px/1040px/1100px/1200px,
   inline and in view <style> blocks) were removed at the source 2026-07-02 —
   every page now inherits its width from .page-content / main.container. */

/* =========================================
   3. RESPONSIVE NAVIGATION BAR
   ========================================= */

.main-nav {
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: #f8f9fa; /* Kept light to contrast the dark app body */
  border-bottom: 1px solid #e1e4e8;
  position: relative;
  width: 100%; 
  box-sizing: border-box;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap; 
  gap: 0.5rem;
}

/* --- Logo styling --- */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #111827; /* Forced dark so it shows on the light navbar */
  font-weight: bold;
  margin-right: 1rem;
}

.nav-logo img {
  height: 40px;
}

/* --- UNIFORM LINK STYLES --- */
.nav-link {
  color: #57606a; 
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover {
  color: #24292f;
  background-color: #f6f8fa;
  text-decoration: none;
}

.nav-link.active {
  color: #3B82F6; 
  background-color: #eff6ff;
  font-weight: 800;
}

/* --- Dropdown Button Styling --- */
.dropbtn {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: #57606a;
  font-weight: 600;
  padding: 8px 12px;
  font-family: inherit;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0;
  line-height: inherit;
  display: flex;
  align-items: center;
}

.dropbtn:hover {
  color: #24292f;
  background-color: #f6f8fa;
}

.dropbtn.active {
  color: #3B82F6;
  background-color: #eff6ff;
  font-weight: 800;
}

/* --- MOBILE-FIRST STYLES --- */
.desktop-links,
.desktop-only {
  display: none;
}

/* --- CSS Hover Dropdown Logic --- */
.mobile-dropdown {
  position: relative;
  display: block;
}

.hamburger-button {
  background: none;
  border: none;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0;
  color: #374151;
}

.mobile-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
  padding: 1rem;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
}

.mobile-dropdown-content a,
.mobile-dropdown-content form {
  display: block;
  padding: 0.5rem;
  white-space: nowrap;
  text-align: left;
  color: #57606a;
  text-decoration: none;
}

.mobile-dropdown-content a:hover {
  background-color: #f6f8fa;
  color: #24292f;
}

.mobile-dropdown-content hr {
  margin: 0.5rem 0;
}

.mobile-dropdown:hover .mobile-dropdown-content {
  display: block;
}

/* Show desktop links on large screens */
@media (min-width: 1200px) {
  .desktop-links,
  .desktop-only {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .mobile-dropdown {
    display: none;
  }
}

/* --- Google Maps Styling --- */
.gm-style img {
  max-width: none !important;
  height: auto !important;
}

.gm-style,
.gm-style * {
  box-sizing: content-box;
}

.gm-style div,
.gm-style svg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gm-style .gm-style-iw-c {
  background-color: #374151 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

.gm-style .gm-style-iw-d {
  overflow: auto !important;
  color: #ffffff !important;
}

.gm-style .gm-style-iw-d a {
  color: #60a5fa !important;
  text-decoration: none !important;
  font-weight: bold !important;
}

.gm-style .gm-style-iw-tc::after {
  background: #374151 !important;
}

/* Navbar Dropdown (Desktop) */
.dropdown {
  position: relative;
  display: flex;       
  align-items: center; 
  height: 100%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  z-index: 100;
  border-radius: 6px;
  border: 1px solid #e1e4e8;
  top: 100%; 
  right: 0;
  margin-top: 4px;
}

.dropdown-content a {
  color: #57606a;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 0.9rem;
}

.dropdown-content a:hover {
  background-color: #f6f8fa;
  color: #24292f;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* =========================================
   4. DASHBOARD COMPONENTS
   ========================================= */

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff; /* Updated for Dark Mode */
  margin-bottom: 4px;
}

.dashboard-subtitle {
  font-size: 0.95rem;
  color: #9ca3af; /* Updated for Dark Mode */
}

.dashboard-alert {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #92400e;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1);
}

.dashboard-alert strong {
  color: #b45309;
}

/* --- KPI GRID & CARDS (Updated for Icons) --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

a.kpi-card {
  display: flex; /* Aligns content side-by-side */
  justify-content: space-between; /* Pushes text left, icon right */
  align-items: center; /* Vertically centers them */
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

a.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  border-color: #d1d5db;
}

/* Helper to stack text vertically inside the card */
.kpi-content {
  display: flex;
  flex-direction: column;
}

/* Icon Styling */
.kpi-icon {
  height: 64px;
  width: auto;
  opacity: 0.9;
  margin-left: 16px;
}

/* Color Accents */
.kpi-card.blue   { border-top: 4px solid #3b82f6; }
.kpi-card.green  { border-top: 4px solid #10b981; }
.kpi-card.orange { border-top: 4px solid #f59e0b; }

/* Text Styling */
.kpi-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-subtext {
  font-size: 0.9rem;
  color: #9ca3af;
  font-weight: 500;
}

/* --- Insight Grid --- */
/* 2026-07-16: use the same 3-column tracks as .kpi-grid (with the left panel
   spanning 2 of them) so the column boundary lines up exactly with the KPI
   cards above. The old `2fr 1fr` boundary sat 8px to the left of the KPI
   boundary (2fr of (W-24px) vs 2 cols + gap of (W-48px)). */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
  align-items: stretch;
}

.insight-grid > .dashboard-panel:first-child {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .insight-grid { grid-template-columns: 1fr; }
  .insight-grid > .dashboard-panel:first-child { grid-column: auto; }
}

.dashboard-panel {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 0; 
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}

.panel-hint {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9ca3af;
  background: #f9fafb;
  padding: 4px 8px;
  border-radius: 6px;
}

.panel-body {
  padding: 24px;
  flex-grow: 1; 
}

.map-container {
  height: 650px; /* 2026-07-16: enlarged from 450px per James (900px test-drove as too tall) */
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

/* =========================================
   PAGINATION (pagy 9.x, site-wide, 2026-07-16)
   Default pagy_nav renders bare <a> tags that sit flush together
   (e.g. "<12345>" on customers) — too small to click reliably.
   ========================================= */
nav.pagy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
}

nav.pagy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  margin: 0; /* Pico gives nav links NEGATIVE margins — without this the buttons overlap */
  border: 1px solid #334155;
  border-radius: 8px;
  background: #1e293b;
  color: #cbd5e0;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

nav.pagy a:hover:not(.current):not([aria-disabled="true"]) {
  border-color: #60a5fa;
  color: #f8fafc;
  background: #334155;
}

nav.pagy a.current {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  cursor: default;
}

nav.pagy a[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

nav.pagy a.gap {
  border: none;
  background: transparent;
  pointer-events: none;
}

/* =========================================
   GLOBAL FORM ACTIONS + BUTTON NORMALIZATION (2026-07-16)
   One shared definition for the Save/Cancel row at the bottom of every
   form. Pico makes submit inputs 100%-wide with their own margins, so
   without this each page's Save and Cancel render at different sizes.
   Use <div class="form-actions"> around form.submit + Cancel link.
   ========================================= */
.form-actions {
  margin-top: 2rem;
  display: flex;
  gap: 15px;
  align-items: stretch;
}

.form-actions input[type="submit"],
.form-actions button,
.form-actions a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 12px 24px;
  font-size: 1rem;
  line-height: 1.2;
  box-sizing: border-box;
  white-space: nowrap;
}

/* The primary action stretches; secondary actions hug their label */
.form-actions input[type="submit"],
.form-actions .btn-primary {
  flex: 1;
  border: 1px solid transparent;
}

/* Buttons anywhere should never wrap their label mid-word, and Pico's
   default margin-bottom on buttons throws off vertical centering in flex
   rows — zero it (2026-07-16) */
a.btn-primary, a.btn-secondary, a.btn-info,
button.btn-primary, button.btn-secondary, button.btn-info {
  white-space: nowrap;
  margin-bottom: 0;
}

/* =========================================
   GLOBAL PAGE-HEADER BUTTONS (2026-07-16)
   One size for action buttons that sit in a page header (Saved Estimates,
   Tasks/Workflows/Create Estimate, saved-estimate Print, etc.). Pages were
   each hardcoding 42px inline.
   ========================================= */
.header-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 50px; /* matches the standard .btn-primary height (10px padding + ~1.5 line-height) */
  padding: 0 20px;
  margin: 0;
  white-space: nowrap;
  box-sizing: border-box;
}

/* =========================================
   GLOBAL CHECKBOXES (2026-07-16)
   One size everywhere (matches the jobs-form equipment picker). Pages
   previously each defined their own (.modern-checkbox 24px on jobs,
   .fixed-checkbox 20px on machines) and drifted.
   ========================================= */
input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  cursor: pointer;
  accent-color: #3b82f6;
}

/* =========================================
   GLOBAL CARD NORMALIZATION (2026-07-16)
   Pico gives <article> large default margins AND padding, which
   double-spaces our .dashboard-card articles (cards manage their own
   inner padding). This was blowing out the prospect page's card gaps.
   ========================================= */
article.dashboard-card {
  margin: 0;
  padding: 0;
}

/* Pico also gives article > header/footer NEGATIVE margins (to bleed into
   the article padding we just removed) — with overflow:hidden cards that
   pulled the .card-header clean out of view. Pin them in place. */
article.dashboard-card > header,
article.dashboard-card > footer {
  margin: 0;
  border-radius: 0;
}

/* =========================================
   GLOBAL PRINT HYGIENE (2026-07-16)
   When any page is printed, drop the app chrome: sticky nav, test-env
   banner, flash messages, footer, pagination. Pages with their own
   @media print rules (saved estimates, quote print) build on this.
   ========================================= */
@media print {
  #sticky-nav-wrapper,
  .main-nav,
  .test-env-banner,
  .flash-message,
  .app-footer,
  nav.pagy {
    display: none !important;
  }

  html, body {
    background: #ffffff !important;
    color: #111827 !important;
    padding-top: 0 !important;
  }
}

/* --- Charts --- */
.chart-bar-container {
  display: flex; 
  justify-content: space-between; 
  height: 180px; 
  width: 100%;
  align-items: stretch; 
}

.chart-column {
  text-align: center; 
  width: 100%; 
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  height: 100%; 
}

/* NEW: Style for the number above the bar */
.chart-value {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
  line-height: 1;
}

.chart-bar {
  background-color: #3b82f6; 
  width: 60%; 
  margin: 0 auto; 
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
  opacity: 0.8;
}

.chart-bar:hover {
  opacity: 1;
  background-color: #2563eb;
}

.chart-label {
  font-size: 0.75rem; 
  color: #9ca3af; 
  margin-top: 8px;
  font-weight: 500;
  flex-shrink: 0;
}

.stat-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.stat-label {
  width: 120px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-bar-bg {
  flex-grow: 1;
  background: #f3f4f6;
  height: 8px;
  border-radius: 99px;
  margin: 0 12px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 99px;
}

.stat-value {
  width: 30px;
  text-align: right;
  font-weight: 700;
  color: #111827;
  font-size: 0.9rem;
}


/* =========================================
   5. ORDER SUMMARY (Legacy Component)
   ========================================= */
.order-summary-container {
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.order-summary-header {
  background: #1e293b; /* Unified with Slate 800 */
  padding: 12px 20px;
  border-bottom: 1px solid #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-summary-header h4 {
  margin: 0;
  color: #e6edf3;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
  gap: 16px;
  padding: 20px;
  background: #ffffff;
}

.summary-card {
  position: relative; 
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #d1d5db;
}

/* Subtle Tinting */
.card-type-machine { background: linear-gradient(180deg, #ffffff, #f0f9ff); border-color: #bae6fd; }
.card-type-bin     { background: linear-gradient(180deg, #ffffff, #f0fdf4); border-color: #bbf7d0; }
.card-type-filter  { background: linear-gradient(180deg, #ffffff, #fefce8); border-color: #fde68a; }
.card-type-part    { background: linear-gradient(180deg, #ffffff, #f3f4f6); border-color: #e5e7eb; }

.qty-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #1d4ed8;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 99px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
}

.card-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 700;
  margin-bottom: 4px;
}

.card-model {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.order-summary-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 10px 20px;
  font-size: 0.85rem;
  color: #64748b;
  display: flex;
  justify-content: space-between;
}


/* =========================================
   6. FULFILLMENT ITEM CARD
   ========================================= */
.item-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}

.item-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.item-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 16px;
}

.item-card__title-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.item-card__icon {
  font-size: 1.5rem;
  background: #f9fafb;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.item-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.2;
}

.item-card__model {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 2px;
}

.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.status-badge.pending { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.status-badge.active { background: #def7ec; color: #03543f; border: 1px solid #bcf0da; }
.status-badge.neutral { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }

.item-card__note {
  background: #fffbeb; 
  border: 1px solid #fef3c7;
  color: #b45309;
  font-size: 0.85rem;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-card__section {
  margin-bottom: 16px;
}

.item-card__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
}

.checkbox-label {
  font-size: 0.8rem;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 0.9rem;
  background: #ffffff;
  color: #111827;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
  color: #9ca3af;
}

.form-input[readonly] {
  background-color: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

.shipping-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}


/* =========================================
   7. INFO PANELS (Dark Theme)
   ========================================= */
.panel {
  background: #1e293b; /* Unified with Slate 800 */
  border-radius: 14px;
  border: 1px solid #334155; /* Unified Border */
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.panel__header {
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #e6edf3;
  border-bottom: 1px solid #334155; /* Unified Border */
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel__body {
  padding: 18px;
}

.panel__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.meta-row--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.meta-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.meta-value {
  font-size: 0.9rem;
  color: #e5e7eb; 
  text-align: right;
  font-feature-settings: "tnum"; 
}

.meta-value.muted {
  color: #9ca3af;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.5;
}

.meta-divider {
  height: 1px;
  background: #334155; /* Unified Border */
  margin: 8px 0;
}

.workflow-status {
  margin-bottom: 16px;
}

.select-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0f172a; /* Unified Inset Dark Slate */
  border: 1px solid #475569;
  color: #e5e7eb;
  font-size: 0.9rem;
  appearance: none; 
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.select-input:focus, .text-area:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.text-area {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0f172a; /* Unified Inset Dark Slate */
  border: 1px solid #475569;
  color: #e5e7eb;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}


/* =========================================
   8. INDEX PAGE SYSTEM
   ========================================= */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  margin-bottom: 24px;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff; /* Updated for Dark Mode */
  line-height: 1.2;
}

.page-subtitle {
  font-size: 0.9rem;
  color: #9ca3af; /* Updated for Dark Mode */
  margin-top: 4px;
}

.control-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-panel {
  flex-grow: 1;
  background: #0f172a; /* Unified Inset Dark Slate */
  border: 1px solid #475569;
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-panel:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.search-icon {
  color: #9ca3af;
  font-size: 1.1rem;
}

.search-input-field {
  background: transparent;
  border: none;
  color: #e5e7eb;
  width: 100%;
  font-size: 0.95rem;
  padding: 8px 0;
}

.search-input-field:focus {
  outline: none;
}

.search-input-field::placeholder {
  color: #6b7280;
}

.data-table-panel {
  background: #1e293b; /* Unified with Slate 800 */
  border-radius: 14px;
  border: 1px solid #334155; /* Unified Border */
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.data-table-header {
  padding: 16px 20px;
  border-bottom: 1px solid #334155; /* Unified Border */
  font-size: 0.95rem;
  font-weight: 600;
  color: #e6edf3;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table.admin-table {
  width: 100%;
  border-collapse: collapse;
}

table.admin-table th {
  text-align: left;
  padding: 14px 20px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #9ca3af;
  border-bottom: 1px solid #334155; /* Unified Border */
}

table.admin-table td {
  padding: 16px 20px;
  font-size: 0.9rem;
  color: #e5e7eb;
  border-bottom: 1px solid #334155; /* Unified Border */
  vertical-align: middle;
}

table.admin-table tr:last-child td {
  border-bottom: none;
}

table.admin-table tr:hover {
  background: rgba(255,255,255,0.03); 
}

.text-primary { color: #e5e7eb; font-weight: 600; }
.text-muted { color: #9ca3af; font-size: 0.85rem; }
.text-link { color: #38bdf8; text-decoration: none; font-weight: 500; }
.text-link:hover { text-decoration: underline; }

.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-pill.active { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
.status-pill.inactive { background: rgba(107, 114, 128, 0.15); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.2); }
/* 2026-07-23: pending/neutral variants were referenced by views (customer
   quotes/jobs lists, prospect pages) but never defined, so those pills
   rendered as bare text. Amber for pending, slate for neutral. */
.status-pill.pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
.status-pill.neutral { background: rgba(148, 163, 184, 0.12); color: #cbd5e0; border: 1px solid rgba(148, 163, 184, 0.2); }


/* =========================================
   9. RESOURCE SHOW PAGES (BLOWOUT PREVENTION)
   ========================================= */

/* Force layout containers to allow children to shrink */
.resource-layout > div {
  min-width: 0;
}

.resource-panel,
.list-group,
.list-item {
  min-width: 0;
}

/* Force safety wrapping on all text within panels */
.resource-panel * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Subject line truncation logic */
.comm-subject {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layout Grid */
.resource-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .resource-layout { grid-template-columns: 1fr; }
}

.identity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  border-bottom: 1px solid #334155; /* Unified Border */
  padding-bottom: 24px;
}

.identity-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff; 
  line-height: 1.1;
  margin-bottom: 8px;
}

.identity-subtitle {
  font-size: 1rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Monthly-revenue figure leading the identity subtitle (customers/show):
   money-green, reads as data, underlines on hover to signal the lease link. */
.revenue-link {
  color: #34d399;
  font-weight: 700;
  text-decoration: none;
}
.revenue-link:hover {
  text-decoration: underline;
}

.resource-panel {
  background: #1e293b; /* Unified with Slate 800 */
  border: 1px solid #334155; /* Unified Border */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.resource-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid #334155; /* Unified Border */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e293b; /* Unified with Slate 800 */
}

.panel-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e5e7eb; 
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.panel-action {
  font-size: 0.85rem;
  font-weight: 600;
  color: #60a5fa; 
  text-decoration: none;
}
.panel-action:hover { text-decoration: underline; }

.list-group {
  display: flex;
  flex-direction: column;
}

.list-item {
  padding: 16px 20px;
  border-bottom: 1px solid #334155; /* Unified Border */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.list-item:last-child { border-bottom: none; }
.list-item:hover { background: rgba(255, 255, 255, 0.05); }

.item-main { font-weight: 600; color: #f3f4f6; font-size: 0.95rem; } 
.item-sub  { font-size: 0.85rem; color: #9ca3af; margin-top: 2px; } 

.empty-panel {
  padding: 32px;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
  font-style: italic;
}

.danger-zone {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #334155; /* Unified Border */
}


/* --- Fix for Checkboxes --- */
input[type="checkbox"] {
  width: auto !important;
  display: inline-block !important;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* =========================================
   10. JOB CHECKLIST FIXES
   ========================================= */

/* Force the checkboxes to have a standard size and appearance */
.task-checkbox {
  appearance: auto !important;
  -webkit-appearance: auto !important; /* For Safari/Chrome */
  
  /* Set a nice clickable size (20px) */
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem;
  min-height: 1.25rem;
  
  /* Spacing and Pointer */
  margin-right: 0.75rem;
  cursor: pointer;
  
  /* Color the checkmark with your brand blue */
  accent-color: #0ea5e9; 
  
  /* Ensure it sits vertically centered with the text */
  vertical-align: middle;
}

/* Ensure the label text is clickable and aligned */
.task-row label {
  cursor: pointer;
  line-height: 1.4;
  margin-bottom: 0 !important; /* Override global label margins */
  padding-top: 2px;
}

/* =========================================
   11. MOBILE HEADER FIXES
   ========================================= */

@media (max-width: 768px) {
  /* 1. Force the header to stack vertically instead of side-by-side */
  .identity-header {
    flex-direction: column;
    align-items: stretch !important; /* Stretch children to full width */
    gap: 16px;
  }

  /* 2. Make the buttons container full width */
  .identity-header > div:last-child {
    display: flex;
    flex-direction: column; /* Stack buttons on top of each other */
    width: 100%;
    gap: 12px !important;
  }

  /* 3. Make the actual buttons full width for easy tapping */
  .identity-header .btn {
    width: 100%;
    justify-content: center; /* Center the text inside the button */
    padding: 12px; /* A bit more padding for touch targets */
  }
}
/* =========================================
   SHARED MODAL (James, 2026-09-02): one standard for every modal in the app,
   lifted from the estimate page's machine picker (.mp-modal): 760 px wide,
   max-width 100%, max-height 82vh, #1e293b on a #334155 border, 12 px radius,
   head / body split, X in the head.
     <dialog class="app-modal">            native <dialog> shell (Pico paints a
                                           bare <dialog> as a full-screen flex
                                           overlay; this strips its padding /
                                           border / background and keeps the
                                           centering)
       <div class="app-modal__box">        the visible box
         <div class="app-modal__head">     title + .app-modal__close
         <div class="app-modal__body">     content (scrolls inside 82vh)
   The estimate picker keeps its own <div class="mp-overlay"> shell and uses
   the same __box / __head / __body / __close classes.
   ========================================= */
dialog.app-modal { padding: 0; border: none; background: transparent; margin: auto; overflow: visible; max-width: 100vw; }
dialog.app-modal::backdrop { background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(4px); }
.app-modal__box {
  background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 12px;
  width: var(--modal-lg); max-width: 100%; max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); box-sizing: border-box; text-align: left;
}
/* Pico's <dialog> is already a centring flex container; the picker's overlay is top-aligned on purpose, so the box carries no margin: auto */
.app-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; border-bottom: 1px solid #334155; flex: 0 0 auto; }
.app-modal__head h3, .app-modal__head strong.app-modal__title { margin: 0; font-size: 0.95rem; font-weight: 600; color: #f8fafc; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.app-modal__close {
  background: none !important; border: none !important; color: #64748b !important; box-shadow: none !important;
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px !important; margin: 0 !important; width: auto !important;
  height: auto !important; flex: 0 0 auto; text-decoration: none; font-family: inherit;
}
.app-modal__close:hover { color: #f8fafc !important; }
.app-modal__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0; }

/* ---------------------------------------------------------------------------
   2026-09-22 IFG admin Price Table (admin/price_table)
   The page scrolls, never a box inside it (James, 2026-09-22): no max-height on
   the grid, the heading row sticks under the fixed nav, and when the user turns
   on more columns than fit, the page itself scrolls sideways.
   --------------------------------------------------------------------------- */
.price-grid-page .pt-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid #334155; color: #cbd5e0; font-size: 0.9rem; text-decoration: none; background: rgba(30, 41, 59, 0.6); }
.price-grid-page .pt-chip.active { border-color: #3b82f6; color: #f8fafc; background: rgba(59, 130, 246, 0.15); }
.price-grid-page .pt-chip.warn { border-color: rgba(245, 158, 11, 0.5); color: #fbbf24; text-decoration: none; }
.price-grid-page .pt-chip.warn.active { border-color: #f59e0b; background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.price-grid-page .pt-chip .badge { margin: 0; }
.price-grid-page .pt-input { height: 40px; margin: 0; padding: 0 0.75rem; border-radius: 8px; font-size: 0.9rem; }
.price-grid-page select.pt-input { padding-right: 2.4rem; }
.price-grid-page .pt-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: #94a3b8; margin: 0; }
.price-grid-page .pt-small { height: 32px; padding: 0 0.75rem; font-size: 0.8rem; width: auto; margin: 0; border-radius: 6px; }
.price-grid-page .pt-meta { color: #64748b; font-size: 0.75rem; margin-top: 0.2rem; white-space: normal; }
.price-grid-page .pt-scroll { position: relative; overflow: visible; }
/* The card grows with the table instead of the table spilling past it */
/* The layout puts overflow-x: hidden on body, which makes body the scroll
   container for position: sticky and kills it; body must stay visible so the
   toolbar sticks against the viewport. */
html.pt-page body { overflow: visible; max-width: none; }
/* Card stays page width; the grid scrolls sideways inside it (James, 2026-09-22).
   That makes the card the scroll container, so the heading row cannot use
   position: sticky against the page; the controller translates it instead. */
.price-grid-page .pt-card { overflow-x: auto; overflow-y: visible; }
.price-grid.modern-table thead th { position: static; }
/* Zero-height sticky slot; the copy hangs below it absolutely, so showing it never shifts the layout */
.price-grid-page .pt-head-clone { position: sticky; top: var(--pt-sticky-top, 0px); z-index: 14; height: 0; }
.price-grid-page .pt-head-clone > div { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; background: #0f172a; border: 1px solid #334155; border-bottom: 0; border-radius: 12px 12px 0 0; }
.price-grid-page .pt-head-clone table { table-layout: fixed; border-collapse: collapse; margin: 0; }
.price-grid-page .pt-head-clone th { position: static; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; white-space: nowrap; }
.price-grid-page .pt-btn { height: 40px; padding: 0 1rem; border-radius: 8px; width: auto; margin: 0; white-space: nowrap; }
.price-grid-page .pt-toolbar { position: sticky; top: var(--pt-nav-top, 0px); z-index: 15; background: #0f172a; padding: 0.6rem 0 0.6rem; margin: 0 0 0.5rem; box-shadow: 0 8px 12px -8px rgba(2, 6, 23, 0.8); }
.price-grid-page .pt-toolbar > * { padding-left: 13px; }
.price-grid-page .pt-toolbar-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.price-grid-page .pt-toolbar form .pt-toolbar-row { margin-top: 0.75rem; }
.price-grid-page .pt-add { margin-top: 0.6rem; padding: 0.75rem 1rem; border: 1px solid #334155; border-radius: 10px; background: #1e293b; }
.price-grid-page .pt-multi { position: relative; display: inline-block; }
.price-grid-page .pt-multi-btn { display: inline-flex; align-items: center; gap: 0.6rem; width: auto; color: #94a3b8 !important; text-align: left; cursor: pointer; font-weight: 400; }
.price-grid-page .pt-multi-btn.chosen { color: #f8fafc !important; border-color: #3b82f6 !important; }
.price-grid-page .pt-multi-btn .pt-caret { font-size: 0.7rem; color: #64748b; }
.price-grid-page .pt-multi-menu { position: absolute; left: 0; top: 44px; z-index: 30; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 0.6rem 0.9rem; min-width: 14rem; max-height: 22rem; overflow: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.price-grid-page .pt-multi-menu label { display: flex; align-items: center; gap: 0.5rem; color: #cbd5e0; font-size: 0.85rem; margin: 0.15rem 0; cursor: pointer; white-space: nowrap; }
.price-grid-page .pt-multi-menu input { margin: 0; width: 16px; height: 16px; }
.price-grid.modern-table { font-size: 0.85rem; width: 100%; }
.price-grid.modern-table th { white-space: nowrap; padding: 0.7rem 0.6rem; }
.price-grid.modern-table td { white-space: nowrap; vertical-align: middle; padding: 0.3rem 0.6rem; line-height: 1.3; }
.price-grid [hidden], .price-grid-page [hidden] { display: none !important; }
.price-grid .pt-check { width: 1.5rem; text-align: center; padding-left: 0.5rem; padding-right: 0.25rem; }
/* Same native checkbox as the franchisee pages (accent-color, appearance auto), sized for a dense grid */
.price-grid-page input.pt-cb, .pt-gear-menu input { appearance: auto !important; -webkit-appearance: auto !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 !important; cursor: pointer; accent-color: #3b82f6; vertical-align: middle; }
.price-grid .pt-sort { color: #94a3b8; text-decoration: none; font-weight: 600; }
.price-grid .pt-sort.active, .price-grid .pt-sort:hover { color: #f8fafc; }
.price-grid .pt-arrow { font-size: 0.7rem; }
.price-grid td[data-col="description"], .price-grid td[data-col="cost_checked_against"], .price-grid td[data-col="review_question"], .price-grid td[data-col="notes"], .price-grid td[data-col="review_answer"] { white-space: normal; }
.price-grid .pt-wrap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 16rem; min-width: 11rem; }
.price-grid td[data-col="cost_checked_against"] .pt-wrap { max-width: 20rem; }
.price-grid .pt-qlink { color: #fbbf24; text-decoration: none; }
.price-grid .pt-qlink strong { color: #60a5fa; }
.price-grid .pt-qlink:hover { text-decoration: underline; }
.pt-qtable tr:target td { background: rgba(59, 130, 246, 0.12); }
.price-grid .pt-question { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 15rem; min-width: 9rem; color: #fbbf24; font-size: 0.8rem; line-height: 1.25; }
.price-grid .pt-strong { color: #f8fafc; font-weight: 700; }
.price-grid-page .cell-input, .price-grid-page select.cell-input, .price-grid-page textarea.cell-input {
  height: 30px; margin: 0; padding: 0 0.5rem; border-radius: 6px; font-size: 0.85rem; background: rgba(15, 23, 42, 0.6); border: 1px solid #334155; color: #f8fafc; width: 100%; min-width: 0; box-shadow: none;
}
.price-grid-page textarea.cell-input { height: auto; min-height: 3.2rem; padding: 0.35rem 0.5rem; white-space: pre-wrap; resize: vertical; }
.price-grid-page .cell-input.num { width: 6rem; min-width: 6rem; text-align: right; }
.price-grid-page .cell-input.text { width: 14rem; min-width: 10rem; }
.price-grid-page .cell-input.date { width: 9.5rem; min-width: 9.5rem; }
.price-grid-page .cell-input.derived { background: transparent; border-color: transparent; color: #94a3b8; cursor: default; }
.price-grid-page .cell-input.derived:focus { border-color: transparent; box-shadow: none; background: transparent; }
.price-grid-page .cell-input:focus { border-color: #3b82f6; outline: none; background: #0f172a; }
.price-grid-page select.cell-input { width: 6.5rem; min-width: 6.5rem; padding-right: 1.5rem; background-position: right 0.4rem center; }
.price-grid tr.has-warning td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.price-grid .pt-check { padding-left: 0.4rem; padding-right: 0.4rem; }
.price-grid tr.archived td { opacity: 0.55; }
.price-grid .pt-actions { width: 7.5rem; }
.price-grid .pt-actions form { display: inline-block; margin: 0; vertical-align: middle; }
.price-grid .pt-link, .price-grid-page button.pt-link { display: inline; line-height: 1.2; background: none; border: 0; color: #60a5fa; padding: 0 0.25rem; margin: 0; height: auto; width: auto; font-size: 0.8rem; cursor: pointer; box-shadow: none; }
.price-grid .pt-link:hover { text-decoration: underline; }
.price-grid .pt-save-state { font-size: 0.75rem; color: #94a3b8; margin-right: 0.2rem; }
.price-grid .pt-save-state.ok { color: #34d399; }
.price-grid .pt-save-state.err { color: #f87171; }
.pt-gear-wrap { position: relative; display: inline-block; }
.pt-gear { background: none; border: 1px solid #475569; color: #cbd5e0; border-radius: 8px; width: 40px; height: 40px; padding: 0; margin: 0; font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: none; }
.pt-gear:hover { color: #f8fafc; border-color: #3b82f6; }
.pt-gear-menu { position: absolute; right: 0; top: 44px; z-index: 20; background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 0.75rem 1rem; width: 30rem; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-weight: 400; text-transform: none; letter-spacing: normal; }
.pt-gear-menu .pt-gear-cols { columns: 2; column-gap: 1rem; }
.pt-gear-menu label { display: flex; break-inside: avoid; align-items: center; gap: 0.5rem; color: #cbd5e0; font-size: 0.85rem; margin: 0.15rem 0; cursor: pointer; }
.pt-questions details { margin: 0; border: 0; padding-bottom: 0; }
.pt-questions summary { list-style: none; margin: 0; }
.pt-questions summary::-webkit-details-marker { display: none; }
.pt-questions summary::before { content: "▸ "; color: #64748b; }
.pt-questions details[open] summary::before { content: "▾ "; }
.pt-qtable.modern-table { table-layout: fixed; width: 100%; font-size: 0.85rem; }
.pt-qtable td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.pt-qtable tr.answered td { opacity: 0.7; }
.app-modal__box.pt-history-box { width: 94vw; max-width: 94vw; }
.pt-history td:last-child { white-space: normal; min-width: 14rem; }
.pt-history td { white-space: nowrap; font-size: 0.85rem; }
/* Hover tooltip for clipped text (question, description, notes, freight): one
   floating box positioned by the controller, centred on the cell */
.pt-floating-tip { position: fixed; z-index: 60; white-space: normal; background: #1e293b; color: #e2e8f0; border: 1px solid #475569; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.85rem; line-height: 1.4; font-weight: 400; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); pointer-events: none; }
.price-grid .pt-tip-input { display: inline-block; }
.pt-pairings.modern-table th, .pt-pairings.modern-table td { padding-left: 0.5rem; padding-right: 24px; }
/* 2026-09-23 (James): six columns share the width evenly instead of bunching
   left with a dead gap before the actions. Fixed layout + colgroup percentages;
   the sticky clone copies the real header widths, so it follows. */
.pt-pairings.modern-table { table-layout: fixed; width: 100%; }
/* Numbers stay right-aligned inside their inputs, but every column's content
   (inputs, selects, the history/archive links) starts at the column's left
   edge, so a heading is always over its cells, no right-aligned column
   collides with the next one, and the gap after each column is the same
   kind of gap. Measured 2026-09-23: 1440 gaps within 20 px of each other. */
.pt-pairings th, .pt-pairings td { text-align: left; }
.pt-pairings th.pt-actions, .pt-pairings td.pt-actions { text-align: left; }
/* The actions column is sized to its two links; the saving / saved / error
   text goes on its own line under them (hidden when empty) instead of
   pushing them past the card edge. */
.pt-pairings .pt-actions .pt-save-state { display: block; white-space: normal; line-height: 1.2; margin: 2px 0 0; }
.pt-pairings .pt-actions .pt-save-state:empty { display: none; }
/* 2026-09-23: "N models" chip on a family row; hover lists the covered models. */
.pt-pairings .pt-family-chip { display: inline-block; margin-left: 0.45rem; padding: 1px 8px; border-radius: 999px; background: rgba(59, 130, 246, 0.15); color: #93c5fd; font-size: 0.72rem; font-weight: 600; vertical-align: middle; cursor: help; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   2026-10-06 PO status dots (admin Purchase Orders dashboard; read-only copy
   on the franchisee PO list / page). One partial: purchase_orders/_status_dots.
   green = has what it needs (or nothing owed), yellow = partial, red = missing.
   No hollow state (James, round 2). Colours chosen for the dark app body
   (#0f172a / #1e293b), each dot carries a title tooltip naming the gap.
   --------------------------------------------------------------------------- */
.po-dots { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.po-dots__cell { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; }
.po-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; border: 2px solid transparent; cursor: help; }
/* Round 4 (2026-10-06): the small live dot next to a field label or a column
   heading on Manage Order. Its base rule lives HERE, above the state classes,
   on purpose: in round 3 it sat in the page's own <style>, which loads after
   this file, so its grey background out-cascaded .po-dot--green at equal
   specificity and every dot on that page rendered grey. The state classes
   below must always be the last word. */
.po-dot-ref { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid transparent; background: #475569; box-sizing: border-box; vertical-align: middle; }
.po-dot--green  { background: #22c55e; border-color: #22c55e; }
.po-dot--yellow { background: #eab308; border-color: #eab308; }
.po-dot--red    { background: #ef4444; border-color: #ef4444; }
.po-dot--na     { background: #475569; border-color: #475569; } /* rounds 12 / 13: SB # when no line's vendor is Ice-O-Matic, Serials when no machine / bin line (gray, same size, not hollow) */
/* Larger, labelled form on the PO page header */
.po-dots--labelled { gap: 0.25rem; flex-wrap: wrap; }
.po-dots--labelled .po-dots__cell { width: auto; flex-direction: column; gap: 4px; padding: 0.4rem 0.75rem; border-radius: 8px; background: rgba(15, 23, 42, 0.6); border: 1px solid #334155; min-width: 4.5rem; }
.po-dots--labelled .po-dot { width: 14px; height: 14px; }
.po-dots__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 700; white-space: nowrap; }
/* Legend under the admin list */
.po-dots-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; color: #94a3b8; font-size: 0.78rem; margin-top: 0.75rem; align-items: center; }
.po-dots-legend span { display: inline-flex; align-items: center; gap: 6px; }
.po-dots-legend .po-dot { cursor: default; width: 10px; height: 10px; }
.po-dots-legend--right { justify-content: flex-end; padding-right: 1px; } /* rounds 9 / 15: below the card, the last item ends on the Update heading's right edge (1 px inside the card border) */
/* Admin list: dot column headings are filter links */
.po-list th.po-dot-th { text-align: center; padding-left: 0; padding-right: 0; font-size: 0.68rem; letter-spacing: 0.03em; min-width: 96px; }
.po-list th.po-dot-th a { color: inherit; text-decoration: none; display: inline-block; padding: 2px 4px; border-radius: 4px; }
.po-list th.po-dot-th a:hover { background: #334155; color: #f8fafc; }
.po-list th.po-dot-th a.is-on { background: #3b82f6; color: #fff; }
.po-list td.po-dot-td { text-align: center; padding-left: 0; padding-right: 0; }
.po-list td.po-dot-td:first-of-type { border-left: 1px solid #334155; }
/* Page footer (2026-10-07, James): one line, "IceBox © <year> | v<VERSION>", the site's font, smaller and muted, centred.
   Both layouts (dashboard and sign-in) render it. */
.app-footer { text-align: center; padding: 1.75rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.05); color: #64748b; font-family: inherit; font-style: normal; font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap; }

/* Trix link dialog on the dark theme (2026-10-06, PO round 8): shared by the PO update editor and the job
   form's Invite Notes. Pico styles input[type=url] / [type=button] by element and both pages sized every
   .trix-button to an icon square, so the URL box came up light and the Link / Unlink buttons read "Lin" /
   "Unl". Dark input with the standard border and padding, full width, app-style buttons, nothing clipped. */
trix-toolbar .trix-dialogs .trix-dialog { background: #1e293b; border: 1px solid #475569; border-radius: 8px; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45); color: #e2e8f0; padding: 14px; font-size: 0.9rem; }
trix-toolbar .trix-dialogs .trix-dialog__link-fields { display: flex; align-items: center; gap: 10px; }
trix-toolbar .trix-dialogs .trix-dialog .trix-input--dialog { flex: 1 1 auto; min-width: 0; width: auto; height: 44px; margin: 0; padding: 0 12px; background: #0f172a; color: #f8fafc; border: 1px solid #475569; border-radius: 6px; font-size: 0.9rem; box-shadow: none; line-height: 1.2; }
trix-toolbar .trix-dialogs .trix-dialog .trix-input--dialog::placeholder { color: #64748b; }
trix-toolbar .trix-dialogs .trix-dialog .trix-input--dialog:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); outline: none; }
trix-toolbar .trix-dialogs .trix-dialog .trix-button-group { display: inline-flex; gap: 8px; border: 0; border-radius: 0; margin: 0; flex: 0 0 auto; }
trix-toolbar .trix-dialogs .trix-dialog .trix-button--dialog { width: auto; height: 44px; padding: 0 16px; margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1; border-radius: 6px; border: 1px solid #475569; background: transparent; color: #cbd5e0; cursor: pointer; text-indent: 0; opacity: 1; white-space: nowrap; }
trix-toolbar .trix-dialogs .trix-dialog .trix-button--dialog:first-child { background: #3b82f6; border-color: #3b82f6; color: #fff; }
trix-toolbar .trix-dialogs .trix-dialog .trix-button--dialog:hover { filter: brightness(110%); }
trix-toolbar .trix-dialogs .trix-dialog .trix-button--dialog:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
/* Round 7 (James): no tooltip; the dot is a link to that section of Manage Order (a generous hit area) */
.po-list td.po-dot-td .po-dot { cursor: pointer; }
.po-list a.po-dot-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; text-decoration: none; }
.po-list a.po-dot-link:hover { background: #334155; }
.po-list .po-status-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; margin-left: 6px; vertical-align: middle; }
.po-list .po-status-label.is-active { color: #60a5fa; border-color: rgba(59, 130, 246, 0.35); }
.po-list .po-status-label.is-completed { color: #34d399; border-color: rgba(16, 185, 129, 0.35); }
.po-list .po-status-label.is-cancelled { color: #f87171; border-color: rgba(239, 68, 68, 0.35); }
.po-list .po-status-label.is-draft { color: #94a3b8; border-color: #475569; }

/* 2026-10-13 (James and Adrian): the Ship-to block on the PO form (both layouts) and admin Manage Order.
   Three stacked choices; the workspace default shows its address read-only; Other reveals the text box. */
.po-ship-to { width: 100%; }
.po-ship-to[hidden] { display: none; }
.po-ship-to__title { color: #f8fafc; margin-bottom: 8px; }
.po-ship-to__choices { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.po-ship-to__choice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid #334155; border-radius: 8px; background: #0f172a; cursor: pointer; font-weight: 400; }
.po-ship-to__choice:has(input:checked) { border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35); }
.po-ship-to__choice.is-off { opacity: 0.6; cursor: not-allowed; }
.po-ship-to__choice input[type="radio"] { margin: 3px 0 0 !important; width: 16px !important; height: 16px !important; flex: 0 0 16px; accent-color: #38bdf8; }
.po-ship-to__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-ship-to__name { color: #f1f5f9; font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.po-ship-to__kind { color: #38bdf8; font-weight: 500; }
.po-ship-to__addr { color: #94a3b8; font-size: 0.8rem; line-height: 1.4; white-space: normal; }
.po-ship-to__addr--none { color: #fbbf24; }
.po-ship-to__other { margin-top: 8px; }
.po-ship-to__other[hidden] { display: none; }
.po-ship-to--compact .po-ship-to__choice { padding: 7px 10px; }
.po-ship-to--compact .po-ship-to__name { font-size: 0.85rem; }
.po-ship-to--compact .po-ship-to__addr { font-size: 0.75rem; }
/* round 3 (James): the four placeholder lines fit; placeholder at the Notes box's size */
.po-ship-to__other textarea.po-ship-to__box { height: auto !important; min-height: 8rem !important; width: 100%; resize: vertical; }

/* Text links (James 2026-10-25, design sheet): brand turquoise at rest, accent blue and an underline on hover.
   Anything with a class (buttons, pills, cards, nav) keeps its own style. */
main a:not([class]) { color: var(--brand); text-decoration: none; transition: color 0.2s; }
main a:not([class]):hover, main a:not([class]):focus-visible { color: var(--accent); text-decoration: underline; }

/* ---- Customer note cards (customers/_sticky_note, customers/_account_notes): shared by the customer page and the job page, on the design tokens (James 2026-10-25). ---- */
  .sticky-note-card { margin-top: 0; }
  .sticky-note-body { padding: var(--space-5); background: var(--sticky-paper); color: var(--sticky-ink); font-size: 0.9rem; line-height: 1.5; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .account-notes-card { margin-top: 0; }
  #account-notes form.account-notes-add { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px dashed var(--line); margin: 0; }
  #account-notes input.account-notes-input { flex: 1; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 var(--space-3); margin: 0; height: var(--control-height); font-size: 0.9rem; }
  /* Pico paints input[type=submit] its own colour at full width; this one is the standard button */
  #account-notes input[type="submit"].account-notes-submit { width: auto !important; flex-shrink: 0; margin: 0 !important; height: var(--control-height); padding: 0 var(--space-5) !important; background: var(--surface-control) !important; background-image: none !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; font-weight: 600; font-size: 0.95rem !important; transition: background 0.2s, border-color 0.2s; }
  #account-notes input[type="submit"].account-notes-submit:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
  .account-note { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
  .account-note-main { flex: 1; min-width: 0; }
  .account-note-meta { margin: 0 0 var(--space-1) 0; }
  .account-note-meta strong { color: var(--ink-muted); }
  .account-note-sep { color: var(--line-strong); margin: 0 6px; }
  .account-note-body { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; overflow-wrap: break-word; }
  .account-note-remove-form { display: inline-block; flex-shrink: 0; margin: 0; }
  .account-notes-card button.account-note-remove { background: none; border: none; font-size: 1.1rem; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: var(--space-1) var(--space-2); margin: 0; width: auto; }
  .account-notes-card button.account-note-remove:hover { color: var(--danger); }
  .account-note-modal { width: var(--modal-sm); }
  .account-note-modal .app-modal__body p { margin: 0; color: var(--ink-soft); }
  .account-note-modal .app-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }

/* ---- Card stack (customer page, job page): cards --space-6 apart, one column; the cards' own
   margins are zeroed so the gap is the only rhythm (James 2026-10-25). ---- */
.card-stack { display: flex; flex-direction: column; gap: var(--space-6); max-width: 100%; }
.card-stack > .resource-panel, .card-stack > .customer-tabs-card, .card-stack > .dashboard-card, .card-stack > form, .card-stack > form > .dashboard-card { margin: 0; } /* Pico gives a section 80px below */

/* ---- Contacts card (customers/_contacts_card): Contacts | Location in one panel, shared by the
   customer page and the job page, on the design tokens (James 2026-10-25). ---- */
.contacts-location-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: stretch; }
.clg-contacts { min-width: 0; border-right: 1px solid var(--line); }
.clg-location { display: flex; flex-direction: column; min-width: 0; }
.clg-map { flex: 1; min-height: 250px; background: var(--surface); }
.clg-map-canvas { height: 100%; width: 100%; }
.clg-map-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 0.85rem; }
.clg-address { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-soft); }
.clg-directions { margin-top: var(--space-2); }
.contact-list { padding: var(--space-2); }
.contacts-card .list-item.contact-row { align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-1); border-bottom: 1px solid var(--line); }
.contacts-card .list-item.contact-row:last-child { border-bottom: none; }
.contacts-card .list-item.contact-row--primary { border: 1px solid var(--accent); background: var(--brand-tint); border-radius: var(--radius-md); }
.contact-main { flex: 1; min-width: 0; padding-right: var(--space-2); }
.contact-name { font-size: 1rem; line-height: 1.3; font-weight: 600; color: var(--ink); word-break: break-word; }
.contact-tag-row { margin-top: var(--space-1); }
.contact-primary-tag { font-size: 0.65rem; background: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; display: inline-block; }
.contact-role { font-size: 0.85rem; color: var(--ink-muted); margin-top: var(--space-1); }
.contact-side { text-align: right; flex-shrink: 0; max-width: 55%; }
.contact-action { font-size: 0.85rem; margin-bottom: 6px; font-weight: 600; }
.contact-phone { font-size: 0.85rem; color: var(--ink-soft); }
.contact-email { font-size: 0.85rem; color: var(--ink-muted); margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .contacts-location-grid { grid-template-columns: 1fr; }
  .clg-contacts { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---- Customer tabs card (customers/_tabs_card and customers/tabs/*): segmented tab strip, a solid
   pill on the active tab (James 2026-07-23), equal-width buttons (2026-08-11), count badges. Shared
   by the customer page and the job page, on the design tokens (James 2026-10-25). ---- */
.customer-tabs-card { min-height: 460px; background: var(--surface-raised); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); margin: 0 0 var(--space-6); padding: 0; }
.customer-tabs-card .tabs-header { display: flex; gap: 6px; padding: var(--space-2); background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.customer-tabs-card .tab-button { appearance: none; border: none; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); padding: 10px var(--space-3); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.15s; white-space: nowrap; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; box-shadow: none; }
.customer-tabs-card .tab-button:hover { color: var(--ink); background: var(--surface-control); }
.customer-tabs-card .tab-button.active { color: var(--on-accent); background: var(--accent); }
.customer-tabs-card .tab-button .badge-inline { min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; background: var(--surface-control); color: var(--ink-soft); border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: middle; }
.customer-tabs-card .tab-button.active .badge-inline { background: var(--focus-ring); color: var(--surface); }
.customer-tabs-card .tab-panel { display: none; }
.customer-tabs-card .tab-panel.active { display: block; animation: tabFadeIn 0.2s ease-in-out; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
.tab-action-row { display: flex; justify-content: flex-end; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.tab-section-head { background: transparent; border-bottom: 1px dashed var(--line); }
.tab-section-head .panel-heading { margin-bottom: 0; }
.tab-section-head--next { border-top: 1px solid var(--line); }
.section-subtitle { margin-top: var(--space-1); font-size: 0.8rem; color: var(--ink-muted); font-weight: 500; text-transform: none; letter-spacing: normal; }
.list-main { flex: 1; min-width: 0; }
.list-sep { color: var(--line-strong); margin: 0 6px; }
.list-sub-muted { color: var(--ink-muted); font-size: 0.9em; }
.list-item--link { cursor: pointer; }
.tag-pill { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid; text-decoration: none; white-space: nowrap; }
.tag-pill--franchise { background: var(--info-tint); color: var(--info); border-color: var(--info); }
.tag-pill--customer { background: var(--warning-tint); color: var(--warning); border-color: var(--warning); }
.tag-pill--visit { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }
.tag-pill--lease { background: var(--brand-tint); color: var(--accent); border-color: var(--accent); font-size: 0.7rem; padding: 2px 8px; }
/* Equipment tab */
.equipment-row { display: block; }
.equipment-head { display: flex; justify-content: space-between; align-items: flex-start; }
.equipment-main { flex: 1; min-width: 0; }
.equipment-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.equipment-nickname { font-size: 0.8em; color: var(--accent); font-weight: 600; background: var(--brand-tint); padding: 2px 8px; border-radius: var(--radius-sm); }
.equipment-sub { margin-top: var(--space-1); }
.equipment-status { margin-left: 10px; flex-shrink: 0; }
.equipment-components { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--ink-muted); }
.equipment-component { display: flex; gap: 6px; align-items: center; }
.equipment-component strong { color: var(--ink-soft); }
.equipment-component-sn { color: var(--ink-muted); font-size: 0.8em; }
/* Service tab, past jobs (job page) */
.past-job-row { gap: var(--space-4); }
.past-job-main { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.past-job-side { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.past-job-pdf { font-weight: 700; }
/* Estimates tab */
.estimates-filter-note { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: 0.85rem; }
.estimates-filter-link { color: var(--info); text-decoration: none; margin-left: 6px; }
.estimates-filter-link:hover { text-decoration: underline; }
.estimates-quote-link { color: var(--info); font-size: 0.8rem; margin-left: 6px; }
.status-pill.converted { background: var(--info-tint); color: var(--info); border: 1px solid var(--info); }
.customer-tabs-card .table-responsive { overflow-x: auto; }
.customer-tabs-card .modern-table { width: 100%; border-collapse: collapse; margin: 0; }
.customer-tabs-card .modern-table th { background: transparent; color: var(--ink-muted); padding: var(--space-4) var(--space-6); text-align: left; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); }
.customer-tabs-card .modern-table td { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 0.95rem; vertical-align: middle; }
.customer-tabs-card .modern-table tr:last-child td { border-bottom: none; }
.customer-tabs-card .modern-table tr:hover { background: var(--surface-control); }
.customer-tabs-card .cell-right { text-align: right; }
.customer-tabs-card .cell-strong { color: var(--ink); font-weight: 600; }
.customer-tabs-card .cell-rate { color: var(--info); font-weight: 600; }
.customer-tabs-card .count-pill { background: var(--surface-control); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-weight: 700; color: var(--ink); font-size: 0.85rem; }
.customer-tabs-card .btn-xs { font-size: 0.8rem; padding: 6px var(--space-3); border-radius: var(--radius-sm); text-decoration: none; display: inline-block; cursor: pointer; transition: all 0.2s; font-weight: 600; }
.customer-tabs-card .btn-xs.outline { border: 1px solid var(--line-strong); color: var(--ink-soft); background: transparent; }
.customer-tabs-card .btn-xs.outline:hover { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.customer-tabs-card .btn-xs--next { margin-left: var(--space-2); }
/* Documents tab */
.doc-upload-label { cursor: pointer; margin: 0; }
.doc-upload-form { display: none; }
.doc-row { display: flex; align-items: center; justify-content: space-between; }
.doc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: baseline; gap: 10px; }
.doc-link { color: var(--ink); text-decoration: none; }
.doc-link:hover { color: var(--accent); text-decoration: underline; }
.doc-missing { color: var(--danger); font-style: italic; }
.doc-date { margin: 0; flex-shrink: 0; }
.doc-source { margin-top: 6px; }
.doc-remove-form { display: inline-block; flex-shrink: 0; margin: 0; }
.customer-tabs-card button.doc-remove { background: none; border: none; font-size: 1.1rem; line-height: 1; color: var(--ink-muted); cursor: pointer; margin: 0 0 0 10px; padding: var(--space-1) var(--space-2); width: auto; box-shadow: none; }
.customer-tabs-card button.doc-remove:hover { color: var(--danger); }
/* Upload and remove land back at #documents (lease, machine, bin pages; James 2026-11-11): a little room above the card */
#documents { scroll-margin-top: var(--space-5); }
.doc-remove-modal .app-modal__body p { margin: 0; color: var(--ink-soft); }
.doc-remove-modal .app-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
/* Communications tab, while the Gmail frame loads */
.comm-loading { padding: 3rem 1rem; text-align: center; color: var(--ink-muted); }
.comm-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--line); border-radius: 50%; border-top-color: var(--accent); animation: commSpin 1s ease-in-out infinite; margin-bottom: 10px; }
.comm-loading-label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
@keyframes commSpin { to { transform: rotate(360deg); } }

/* Serial numbers are data (mono) and link to the machine (James 2026-10-25) */
main a.serial-link { font-family: var(--font-mono); font-size: 0.9em; color: var(--brand); }

/* Destructive button: the standard button's size and shape, in red (design sheet; James 2026-10-25) */
button.btn-danger, a.btn-danger, input.btn-danger { background: transparent !important; color: var(--danger) !important; border: 1px solid var(--danger) !important; height: var(--control-height); padding: 0 var(--space-5) !important; border-radius: var(--radius-md) !important; font-weight: 600; font-size: 0.95rem !important; width: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; box-shadow: none !important; }
button.btn-danger:hover, a.btn-danger:hover, input.btn-danger:hover { background: var(--danger) !important; color: var(--on-accent) !important; border-color: var(--danger) !important; }

/* Edit Job: the customer's Sticky Note on the invite (tick + read-only preview) (James 2026-10-25) */
.sticky-on-invite { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }
.sticky-on-invite--first { margin: 0 0 var(--space-6); padding: 0 0 var(--space-5); border-top: 0; border-bottom: 1px solid var(--line); }
.sticky-on-invite-check { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); font-weight: 600; font-size: 0.95rem; cursor: pointer; margin: 0; }
.sticky-on-invite-check input[type="checkbox"] { margin: 0; }
.sticky-on-invite-preview { padding: var(--space-4) var(--space-5); background: var(--sticky-paper); color: var(--sticky-ink); border-radius: var(--radius-md); font-size: 0.9rem; line-height: 1.5; white-space: pre-line; }
.sticky-on-invite-preview.is-empty { background: var(--surface); color: var(--ink-muted); border: 1px dashed var(--line-strong); }

/* Job page and Edit Job foot: the page's buttons, right-aligned with the cards, each at its own width (James 2026-10-25) */
.job-foot-actions { display: flex; gap: var(--space-3); align-items: center; justify-content: flex-end; margin-left: auto; flex: 0 0 auto; }
.job-foot-actions > button, .job-foot-actions > a { width: auto !important; min-width: 0; white-space: nowrap; flex: 0 0 auto; margin: 0 !important; height: var(--control-height) !important; padding: 0 var(--space-5) !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--radius-md) !important; font-size: 0.95rem !important; font-weight: 600; line-height: 1 !important; box-shadow: none !important; }
.job-foot-actions > button.btn-secondary, .job-foot-actions > a.btn-secondary { background: var(--surface-control) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
.job-foot-actions > button.btn-secondary:hover, .job-foot-actions > a.btn-secondary:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.job-foot-actions > button.btn-danger { background: transparent !important; color: var(--danger) !important; border: 1px solid var(--danger) !important; }
.job-foot-actions > button.btn-danger:hover { background: var(--danger) !important; color: var(--on-accent) !important; border-color: var(--danger) !important; }

/* Collapsible form card (Manual Override on Edit Job, James 2026-10-25): the summary is the card title */
details.form-card--details { padding: 0; }
details.form-card--details > summary.form-card-summary { list-style: none; cursor: pointer; padding: 1.25rem 2rem; color: var(--ink); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: var(--space-3); }
details.form-card--details > summary.form-card-summary::-webkit-details-marker { display: none; }
details.form-card--details > summary.form-card-summary::after { display: none !important; content: none !important; } /* Pico draws its own chevron */
details.form-card--details > summary.form-card-summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(-45deg); transition: transform 0.2s; }
details.form-card--details[open] > summary.form-card-summary::before { transform: rotate(45deg); }
details.form-card--details[open] > summary.form-card-summary { border-bottom: 1px solid var(--line); }
details.form-card--details > .form-card-note, details.form-card--details > .form-grid { padding-left: 2rem; padding-right: 2rem; }
details.form-card--details > .form-card-note { margin: 1.25rem 0 1rem; }
details.form-card--details > .form-grid { padding-bottom: 2rem; }

/* Caution button (Manual Override): the standard button's size, in the warning amber (James 2026-10-25) */
.job-foot-actions > button.btn-warning, .app-modal__actions > button.btn-secondary.btn-warning { background: transparent !important; color: var(--warning) !important; border: 1px solid var(--warning) !important; }
.job-foot-actions > button.btn-warning:hover, .app-modal__actions > button.btn-secondary.btn-warning:hover { background: var(--warning) !important; color: var(--surface) !important; border-color: var(--warning) !important; }
.manual-override-modal .app-modal__box { width: var(--modal-sm); border: 1px solid var(--warning); box-shadow: var(--shadow-modal), 0 0 0 1px var(--warning-tint); }
.manual-override-modal .app-modal__head { border-bottom-color: var(--warning-tint); }
.manual-override-modal .app-modal__title { color: var(--warning); }
.manual-override-fields { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); }
.manual-override-modal .app-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 0 1.25rem 1.25rem; }

/* Status pills (moved from the checklist panel so every page shares them, 2026-10-25) */
  .jc-pill-link { text-decoration: none; cursor: pointer; }
  .jc-pill-link:hover { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
  .jc-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; white-space: nowrap; }
  .jc-pill-draft { background: var(--info-tint); color: var(--info); border: 1px solid var(--info); }
  .jc-pill-expired { background: var(--warning-tint); color: var(--warning); border: 1px solid var(--warning); }
  .jc-pill-done { background: var(--success-tint); color: var(--success); border: 1px solid var(--success); }

/* Modal sizes (design sheet, James 2026-10-25): --modal-sm for a confirmation or a short form, --modal-lg (the default) for pickers and content */
.app-modal--sm .app-modal__box { width: var(--modal-sm); }

/* Standard buttons inside any app modal (the job page defines .btn-secondary locally; modals on other pages need it too) */
.app-modal__actions > button.btn-secondary { background: var(--surface-control) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; height: var(--control-height); padding: 0 var(--space-5) !important; border-radius: var(--radius-md) !important; font-size: 0.95rem !important; font-weight: 600; width: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: none !important; }
.app-modal__actions > button.btn-secondary:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.job-foot-actions--new { justify-content: flex-start; margin: 2rem 0 0; }
.invites-sent-note { margin: 0 0 1.5rem; }
.app-modal__actions > button.btn-secondary.btn-warning { background: transparent !important; color: var(--warning) !important; border: 1px solid var(--warning) !important; }
.app-modal__actions > button.btn-secondary.btn-warning:hover { background: var(--warning) !important; color: var(--surface) !important; border-color: var(--warning) !important; }

/* ==================================   JOB PAGES (job page, Edit Job, New Job): one set of rules on the design
   tokens, read by jobs/show, jobs/edit, jobs/new and jobs/_form (James
   2026-10-25). The per-page <style> blocks keep only what is specific to
   that page.
   ========================================= */
/* Header: eyebrow (job type | Job: id) in brand, the title with the customer name linked in brand,
   the status pill and schedule line, the address line linking to Google Maps */
.job-head { max-width: none; margin-bottom: var(--space-8); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); }
.job-eyebrow { font-size: 0.85rem; color: var(--brand); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--space-2) 0; }
.job-head-sep { color: var(--line-strong); }
.job-title { color: var(--ink); font-weight: 800; font-size: 2.5rem; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 var(--space-5) 0; }
.job-title a.job-title-customer { color: var(--brand); text-decoration: none; }
.job-title a.job-title-customer:hover, .job-title a.job-title-customer:focus-visible { color: var(--accent); text-decoration: underline; }
.job-head-meta { font-size: 1.1rem; color: var(--ink-muted); margin-bottom: var(--space-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* A Tentative job (James, 2026-11-04): a dashed warning pill beside the status, and a short lead word on calendar entries. */
.tentative-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--warning-tint); color: var(--warning); border: 1px dashed var(--warning); font: 700 0.8rem/1 var(--font-sans); white-space: nowrap; vertical-align: middle; }
.job-badge-tentative { font-style: italic; font-weight: 700; margin-right: 4px; }
.job-head-address { font-size: 0.95rem; color: var(--ink-soft); }
.job-head-address strong { color: var(--ink-muted); }

/* Foot: text links on the left (the global link style, with the arrow), the page's buttons on the right (.job-foot-actions) */
.job-foot { max-width: none; margin-top: var(--space-8); padding-top: var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.job-foot-links { display: flex; align-items: center; gap: var(--space-3); font-size: 0.95rem; font-weight: 600; }
.job-foot-links a, a.job-foot-back { color: var(--brand); text-decoration: none; transition: color 0.2s; font-size: 0.95rem; font-weight: 600; }
.job-foot-links a:hover, .job-foot-links a:focus-visible, a.job-foot-back:hover, a.job-foot-back:focus-visible { color: var(--accent); text-decoration: underline; }
.job-foot-sep { color: var(--line-strong); }

/* Cards */
.dashboard-card { background-color: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.card-header-row { background: var(--surface-raised); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); }
.card-header-row h3 { margin: 0; color: var(--ink); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.form-card { background-color: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); margin-bottom: var(--space-6); box-shadow: var(--shadow-card); }
.form-card[hidden] { display: none; }
.form-card-title { color: var(--ink); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-6); border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); }
.form-card--info { border-color: var(--info); background: var(--info-tint); }
.form-card--info .form-card-title { color: var(--info); border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-4); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-6); }
.form-grid--pair { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-grid--spaced { margin-bottom: var(--space-6); }
.form-span-all { grid-column: 1 / -1; }
.form-span-2 { grid-column: span 2; }
.form-divider { border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.form-help { color: var(--ink-muted); display: block; margin-top: var(--space-2); }
.form-check-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-check-row label, .form-check-label { color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; cursor: pointer; margin: 0; }
.form-errors { background-color: var(--danger-tint); border: 1px solid var(--danger); color: var(--danger); padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.form-errors h2 { font-size: 1.1rem; margin: 0 0 var(--space-2); color: var(--danger); }
.form-errors ul { margin: 0; padding-left: var(--space-6); }

/* Labels and controls: Pico's blue on inputs and selects is overridden with the tokens */
.form-label { display: block; color: var(--ink-muted); font-size: 0.8rem; font-weight: 700; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.05em; }
.modern-input { width: 100%; padding: var(--space-3); background-color: var(--surface) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-md); color: var(--ink) !important; font-size: 0.95rem; font-family: var(--font-sans); transition: border-color 0.2s; box-sizing: border-box; box-shadow: none; }
input.modern-input, select.modern-input { height: var(--control-height); padding-top: 0; padding-bottom: 0; line-height: normal; }
textarea.modern-input { height: auto; min-height: 110px; }
.modern-input::placeholder { color: var(--ink-muted); opacity: 1; }
.modern-input:focus { outline: none; border-color: var(--focus-ring) !important; box-shadow: var(--accent-glow); }
select.modern-input option { background-color: var(--surface); color: var(--ink); }
.modern-checkbox { width: 24px; height: 24px; min-width: 24px; cursor: pointer; accent-color: var(--accent); margin: 0; }
.req-star { color: var(--danger); margin-left: 3px; cursor: help; }
/* =========================================
   FLOATING FLASH (James 2026-11-11): layouts/_flash_stack + _flash_toast,
   flash_controller.js. Fixed under the nav (--flash-top, set by the
   controller), the width of the page's content column, above page content
   (sticky toolbars and menus sit at 30 or less) and below every modal: an
   open <dialog class="app-modal"> is in the top layer, the estimate picker's
   overlay is 60, the customer flyout 9998/9999, the nav 9999. Out of the
   flow, so it never moves the page when it appears or goes. The colours are
   the old in-flow banner's (tint on the page surface, opaque so the page
   under it does not show through), plus a shadow so it reads as floating.
   Placed above the job-foot @media block below: that block is never closed
   on main (a stray ======= merge marker, found 2026-11-11), so any rule
   after it applies only at 640 px and narrower.
   ========================================= */
.flash-stack {
  position: fixed; top: calc(var(--flash-top, 0px) + var(--space-3)); left: 0; right: 0; z-index: 50;
  width: min(var(--content-width), 100%); margin-inline: auto; padding-inline: 20px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none;
}
.flash-stack:empty { display: none; }
/* the gap a page that opens at the top keeps for the banner (dashboard layout); the controller sets the height: only what the page's own top space lacks */
.flash-reserve { height: var(--flash-reserve, 0px); }
.flash-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid currentColor; box-shadow: var(--shadow-float); text-align: left; line-height: 1.45;
  animation: flash-toast-in 0.2s ease-out; transition: opacity 0.2s ease, transform 0.2s ease;
}
.flash-toast--notice { color: var(--success); background: linear-gradient(var(--success-tint), var(--success-tint)), var(--surface); }
.flash-toast--warning { color: var(--warning); background: linear-gradient(var(--warning-tint), var(--warning-tint)), var(--surface); }
.flash-toast--alert { color: var(--danger); background: linear-gradient(var(--danger-tint), var(--danger-tint)), var(--surface); }
.flash-toast__text { flex: 1 1 auto; min-width: 0; padding-block: var(--space-1); overflow-wrap: anywhere; }
.flash-stack .flash-toast__close {
  flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: inherit; box-shadow: none; font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.flash-stack .flash-toast__close:hover,
.flash-stack .flash-toast__close:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); outline: none; }
.flash-stack .flash-toast__close:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }
.flash-toast.is-leaving { opacity: 0; transform: translateY(-6px); }
@keyframes flash-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .flash-toast { animation: none; transition: none; }
}
/* Narrow screens: the foot's buttons wrap under the links instead of running off the right edge (seen at 390px) */
@media (max-width: 640px) {
  .job-foot { flex-direction: column; align-items: flex-start; }
  .job-foot-actions { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; width: 100%; }
=======
/* 2026-10-27 (James): franchisee PO page. SB # column (first data column, the
   same font, size, weight and colour as the Serial # cell: James's drive, no
   larger or brighter), the IFG Invoice cell in Status Tracking, the muted italic
   Pending used by the other Pending cells on that page, and Cancel Order at the
   standard button size (red, destructive). */
.po-pending { color: #64748b; font-family: sans-serif; font-style: italic; font-weight: 400; font-size: 0.95rem; }
.po-sb-th { white-space: nowrap; }
.po-sb-cell { white-space: nowrap; font-family: monospace; color: #cbd5e0; }
.po-sb-none { color: #cbd5e0; } /* same as the Carrier column dash */
.po-track-label { color: #94a3b8; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.po-track-value { color: #f8fafc; font-weight: 700; font-size: 1.1rem; }
a.po-invoice-link { color: #60a5fa; font-weight: 700; font-size: 1.1rem; text-decoration: underline; text-underline-offset: 3px; }
a.po-invoice-link:hover, a.po-invoice-link:focus { color: #3b82f6; }
.po-cancel-row { margin-top: 3rem; border-top: 1px dashed #334155; padding-top: 2rem; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; }
button.po-cancel-btn { width: auto; margin: 0; padding: 10px 20px; border-radius: 6px; border: 1px solid #ef4444; background: transparent; color: #ef4444; font-size: 0.95rem; font-weight: 600; line-height: 1.5; cursor: pointer; }
button.po-cancel-btn:hover, button.po-cancel-btn:focus { background: #ef4444; border-color: #ef4444; color: #fff; }
#cancel-modal .po-modal-btn { width: auto; height: auto; margin: 0; padding: 10px 20px; border-radius: 6px; font-size: 0.95rem; font-weight: 600; line-height: 1.5; }
#cancel-modal button.po-cancel-btn { border: 1px solid #ef4444; background: transparent; color: #ef4444; }
#cancel-modal button.po-cancel-btn:hover, #cancel-modal button.po-cancel-btn:focus { background: #ef4444; border-color: #ef4444; color: #fff; }
/* 2026-10-27 (James): the franchisee Purchase Orders list. PO # first, styled like the Date cell beside it;
   a search row; and every row a card when the table does not fit (one markup source: CSS grid on the row). */
.po-list-id, .po-list-id-th { white-space: nowrap; }
.po-list-id, .po-list-date, .po-list-items { color: #cbd5e0; }
.po-list-date { white-space: nowrap; }
a.po-list-link { color: #f8fafc; font-weight: 700; text-decoration: none; }
a.po-list-link:hover, a.po-list-link:focus { color: #3b82f6; }
/* the order link covers its whole row (table) or card: one real link, middle-click / cmd-click / keyboard work */
.po-list-table tr.po-list-row { position: relative; cursor: pointer; }
.po-list-table a.po-list-link::after { content: ""; position: absolute; inset: 0; }
.po-list-table a.po-list-link:focus-visible { outline: none; }
.po-list-table tr.po-list-row:has(a.po-list-link:focus-visible) { outline: 2px solid #3b82f6; outline-offset: -2px; }
.po-list-table tr.po-list-row:hover a.po-list-link { color: #3b82f6; }
.po-status-pill { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.po-status-pill--active { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.po-status-pill--completed { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.po-status-pill--cancelled { background: rgba(248, 113, 113, 0.2); color: #f87171; }

/* the table's own min width decides when it turns into cards (container query below): tighter cell padding
   keeps it a table on a laptop (it was 1177 px wide at its narrowest, clipped in any card under that) */
table.po-list-table th, table.po-list-table td { padding-left: 0.75rem; padding-right: 0.75rem; }
table.po-list-table th:first-child, table.po-list-table td:first-child { padding-left: 1.5rem; }
table.po-list-table th:last-child, table.po-list-table td:last-child { padding-right: 1.5rem; }
.po-search { display: flex; align-items: center; gap: 8px; margin: 0 0 1rem; max-width: 640px; }
.po-search input.po-search-input[type=search] { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0 12px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; background-image: none; color: #f8fafc; font-size: 16px; }
.po-search input.po-search-input[type=search]:focus { border-color: #3b82f6; box-shadow: none; outline: none; }
.po-search button.po-search-btn { flex: 0 0 auto; width: auto; height: 40px; margin: 0; padding: 0 16px; border-radius: 8px; border: 1px solid #3b82f6; background: #3b82f6; color: #fff; font-weight: 600; font-size: 0.95rem; line-height: 1; cursor: pointer; }
.po-search-note { color: #94a3b8; margin: 0 0 1rem; }
a.po-search-clear { color: #93c5fd; margin-left: 0.5rem; text-decoration: none; }

/* Cards whenever the list is narrower than the table needs (measured: 884 px at its narrowest without the Actions column; was 997), not at a fixed
   screen width: phones, tablets and a narrow laptop window all get cards; nothing is ever clipped or scrolled. */
.po-list-card { container-type: inline-size; }
@container (max-width: 900px) {
  .po-list-table, .po-list-table tbody { display: block; width: 100%; }
  .po-list-table thead { display: none; }
  .po-list-table tr.po-list-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "id name" "date status" "dots items"; gap: 6px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #334155; }
  .po-list-table tr.po-list-row:last-child { border-bottom: none; }
  .po-list-table tr.po-list-row > td { display: block; padding: 0; border: none; min-width: 0; }
  .po-list-table td.po-list-id { grid-area: id; }
  .po-list-table td.po-list-name { grid-area: name; overflow-wrap: anywhere; }
  .po-list-table td.po-list-date { grid-area: date; }
  .po-list-table td.po-list-status { grid-area: status; justify-self: start; }
  .po-list-table td.po-list-dots { grid-area: dots; }
  .po-list-table td.po-list-items { grid-area: items; justify-self: end; white-space: nowrap; }
  .po-list-table tr.po-list-empty-row, .po-list-table tr.po-list-empty-row td { display: block; }
}