/* iter34.170 — Field Flow PRO component + utility styles.
 * Carved out of the original app-main.css (Phase 3b-bis refactor).
 * Tokens + light-theme overrides moved to /css/tokens.css — must be
 * linked BEFORE this file.
 */
/* ===== iter31-q: Apple-review polish pass (global) ===== */
/* Skip-to-content — hidden visually until keyboard-focused */
#skip-to-content{position:absolute;top:-40px;left:10px;background:var(--accent-blue);color:#0a0e1a;padding:10px 16px;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-weight:600;font-size:14px;text-decoration:none;z-index:9999;transform:translateY(-100%);transition:transform var(--transition-fast)}
#skip-to-content:focus{transform:translateY(40px);outline:3px solid var(--accent-cyan);outline-offset:2px}
/* Empty-state pattern — used everywhere (Apple hates vague empty states) */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;min-height:220px}
.empty-state-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.04);color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px}
.empty-state-icon.success{background:rgba(46,213,115,0.12);color:#2ed573}
.empty-state-icon.warning{background:rgba(255,167,38,0.12);color:#ffa502}
.empty-state-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:-0.01em}
.empty-state-sub{font-size:13.5px;color:var(--text-muted);line-height:1.45;max-width:320px;margin-bottom:18px}
.empty-state-cta{padding:10px 18px;background:var(--accent-gradient);color:#0a0e1a;border:none;border-radius:var(--radius-sm);font-weight:600;font-size:13.5px;cursor:pointer;min-height:var(--tap-target-min)}

/* Company card action-overflow menu (Platform Admin — collapses 7 actions into 2) */
.company-more-item{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap-target-min);padding:10px 12px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:background var(--transition-fast)}
.company-more-item:hover{background:rgba(255,255,255,0.05)}
.company-more-item i{width:16px;color:var(--text-muted)}
.company-more-item--danger{color:#ff6b6b}
.company-more-item--danger i{color:#ff6b6b}
.company-more-menu.hidden{display:none}
/* Tech user card — stack actions on narrow screens */
.tech-user-card{transition:border-color var(--transition-fast), transform var(--transition-fast)}
.tech-user-card:hover{border-color:var(--border-accent)}
@media (max-width:520px){.tech-user-card > div{flex-direction:column}.tech-user-card > div > div:last-child{width:100%}.tech-user-card > div > div:last-child > div{flex-direction:row !important;flex-wrap:wrap}.tech-user-card > div > div:last-child .workflow-btn{flex:1;min-width:calc(50% - 4px)}}
/* Locations billing banner — fix mobile text wrap */
.locations-billing-banner{display:flex;gap:var(--spacing-md);align-items:center;padding:var(--spacing-md);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}
.locations-billing-banner>div[style*="flex:1"]{min-width:0;word-break:break-word}
@media (max-width:520px){.locations-billing-banner{flex-direction:column;align-items:flex-start;text-align:left}.locations-billing-banner>button, .locations-billing-banner>.workflow-btn{width:100%}}

/* 16px inputs on iOS = no auto-zoom on focus. 44×44 tap target = Apple HIG minimum. */
input, select, textarea, .input-field{font-size:16px;min-height:var(--tap-target-min);border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid var(--border-light);color:var(--text-primary);padding:0 16px;font-family:var(--font-family);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}
textarea, .input-field[as="textarea"], textarea.input-field{padding:12px 16px;min-height:88px;line-height:1.5}
input:focus, select:focus, textarea:focus, .input-field:focus{border-color:var(--border-focus);outline:none;box-shadow:0 0 0 3px rgba(0,242,254,0.2)}
input::placeholder, textarea::placeholder{color:var(--text-muted)}
input[type="checkbox"], input[type="radio"]{min-height:auto;width:18px;height:18px;accent-color:var(--accent-cyan);cursor:pointer;padding:0}
input[type="file"]{padding:10px 16px}
button{font-family:var(--font-family)}
button:disabled{opacity:0.55;cursor:not-allowed}
/* Every interactive button meets tap target minimum */
.workflow-btn{min-height:var(--tap-target-min)}
/* Respects user's motion preference — required for Apple Accessibility pass */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.001s !important;transition-duration:0.001s !important}}
/* Global scroll behavior */
html{-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 20%,rgba(79,172,254,0.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,242,254,0.05) 0%,transparent 50%);pointer-events:none;z-index:-1}
h1,h2,h3,h4{font-weight:600;line-height:1.25;color:var(--text-primary)}
p{color:var(--text-secondary)}
.app-container{max-width:100%;min-height:100vh;padding-bottom:100px}
/* iter34.119: #admin-dashboard is the *shell* (header + nav drawer) — the
   actual page content (admin-tab-*) lives as a *sibling* of it, NOT a
   child. So forcing 100vh min-height on the shell creates 500-700px of
   empty space between the nav bar and the tab content. Override it. */
#admin-dashboard.app-container{min-height:0;padding-bottom:var(--spacing-md);}
/* iter34.140: align ALL admin tab content with the dashboard shell (same 1400px
   cap + centered + matching gutters), so the FF brand header and the inner pages
   read as one continuous container instead of two visually disjoint widths.
   Per-tab overrides (legacy <details> cards, fixed-width modals, etc.) can still
   opt-out by setting their own max-width on a child element. */
.admin-tab-content{max-width:1400px;margin:0 auto;padding:0 var(--spacing-xl) var(--spacing-md);box-sizing:border-box;width:100%;}
.admin-tab-content:not(.hidden){display:block;}
.app-header{position:sticky;top:0;z-index:100;background:rgba(10,10,15,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);padding:var(--spacing-md)}
.header-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto}
.brand-logo{display:flex;align-items:center;gap:var(--spacing-sm)}
.brand-logo img{width:40px;height:40px;border-radius:var(--radius-md)}
.brand-logo span{font-size:16px;font-weight:600;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.home-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:18px;cursor:pointer;transition:all var(--transition-fast)}
.home-btn:hover{border-color:var(--border-accent);box-shadow:var(--shadow-glow)}

#home-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-xl);text-align:center}
#service-selector{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-xl);text-align:center}

/* iter34.2: tech-home schedule-driven mode — collapse the marketing chrome.
   Replaced :where() compound selector with explicit per-element rules to
   avoid an over-matching quirk that hid sibling .workflow-buttons. */
#service-selector.tech-home-schedule-mode .home-brand { display: none !important; }
#service-selector.tech-home-schedule-mode .home-subtitle { display: none !important; }
#service-selector.tech-home-schedule-mode .home-description { display: none !important; }
#service-selector.tech-home-schedule-mode #tech-welcome-wrap { display: none !important; }
#service-selector.tech-home-schedule-mode [data-testid="tech-service-hvac-btn"] { display: none !important; }
#service-selector.tech-home-schedule-mode [data-testid="tech-service-plumbing-btn"] { display: none !important; }
#service-selector.tech-home-schedule-mode { padding-top: var(--spacing-md); justify-content:flex-start; }
#plumbing-home{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-xl);text-align:center}
.home-brand{margin-bottom:var(--spacing-xl)}
.home-brand-logo{width:120px;height:120px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg),var(--shadow-glow);margin-bottom:var(--spacing-lg);animation:float 6s ease-in-out infinite}
/* iter31-v.3: Login-screen wordmark uses auto height + no shadow/rounding — the PNG already has its own shape. */
#service-selector .home-brand-logo{width:min(320px,80vw);height:auto;border-radius:0;box-shadow:none;background:transparent;margin-bottom:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.home-brand h1{font-size:24px;margin-bottom:var(--spacing-sm);background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.home-brand p{color:var(--text-muted);font-size:13px}
.ai-badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:var(--accent-gradient);border-radius:50px;font-size:11px;font-weight:600;color:var(--bg-dark);margin-bottom:var(--spacing-lg);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,172,254,0.4)}50%{box-shadow:0 0 0 10px rgba(79,172,254,0)}}
.home-subtitle{font-size:32px;font-weight:700;margin-bottom:var(--spacing-sm)}
.home-description{color:var(--text-secondary);margin-bottom:var(--spacing-xl);max-width:400px}
.workflow-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:320px}
.workflow-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-lg);font-family:var(--font-family);font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}
.workflow-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s ease}
.workflow-btn:hover::before{left:100%}
.workflow-btn.primary{background:var(--accent-gradient);color:var(--bg-dark);box-shadow:var(--shadow-sm),0 0 30px rgba(79,172,254,0.3)}
.workflow-btn.primary:hover{transform:translateY(-2px)}
.workflow-btn.secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-color)}
.workflow-btn.secondary:hover{border-color:var(--border-accent);box-shadow:var(--shadow-glow)}

label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}
input[type="text"],input[type="number"],input[type="date"],input[type="tel"],input[type="email"],input[type="password"],select,textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-input)!important;border:1px solid var(--border-color)!important;border-radius:var(--radius-md);color:var(--text-primary)!important;font-family:var(--font-family);font-size:16px!important;transition:all var(--transition-fast)}
input[type="text"][style],input[type="email"][style],input[type="password"][style],input[type="tel"][style],input[type="number"][style],input[type="date"][style],select[style],textarea[style]{background:var(--bg-input)!important;border:1px solid var(--border-color)!important;color:var(--text-primary)!important;font-size:16px!important}
input,select,textarea{background:var(--bg-input)!important;border:1px solid var(--border-color)!important;color:var(--text-primary)!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(79,172,254,0.15)}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
textarea{min-height:100px;resize:vertical}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-md) center;padding-right:40px}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--spacing-md)}
.field-group{display:flex;flex-direction:column}
.measure-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}
.measure-grid-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-md)}@media(max-width:768px){.measure-grid-4col{grid-template-columns:repeat(2,1fr)}}
.measure-group{display:contents}
.measure-group .measure-pair:nth-child(1),.measure-group .measure-pair:nth-child(2){padding-right:var(--spacing-md);border-right:1px solid var(--border-color)}
.measure-pair{display:flex;flex-direction:column}
.measure-pair label{font-size:11px;text-transform:uppercase;letter-spacing:0.5px}

.button-group{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}
.button-group input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.button-group label.btn{display:flex;align-items:center;justify-content:center;min-width:55px;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:2px solid transparent;margin:0}
.condition-rating label.green{background:var(--status-green-bg);color:var(--status-green);border-color:rgba(0,230,118,0.3)}
.condition-rating label.yellow{background:var(--status-yellow-bg);color:var(--status-yellow);border-color:rgba(255,171,0,0.3)}
.condition-rating label.red{background:var(--status-red-bg);color:var(--status-red);border-color:rgba(255,82,82,0.3)}
.condition-rating input:checked+label.green{background:var(--status-green);color:var(--bg-dark);box-shadow:0 0 20px rgba(0,230,118,0.5)}
.condition-rating input:checked+label.yellow{background:var(--status-yellow);color:var(--bg-dark);box-shadow:0 0 20px rgba(255,171,0,0.5)}
.condition-rating input:checked+label.red{background:var(--status-red);color:var(--bg-dark);box-shadow:0 0 20px rgba(255,82,82,0.5)}
.yes-no label.yes{background:var(--status-green-bg);color:var(--status-green);border-color:rgba(0,230,118,0.3)}
.yes-no label.no{background:var(--status-red-bg);color:var(--status-red);border-color:rgba(255,82,82,0.3)}
.yes-no input:checked+label.yes{background:var(--status-green);color:var(--bg-dark);box-shadow:0 0 20px rgba(0,230,118,0.5)}
.yes-no input:checked+label.no{background:var(--status-red);color:var(--bg-dark);box-shadow:0 0 20px rgba(255,82,82,0.5)}

details{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:var(--spacing-md);overflow:hidden;transition:all var(--transition-normal)}
details:hover{border-color:var(--border-accent)}
details[open]{box-shadow:var(--shadow-sm)}
details summary{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-elevated);font-size:16px;font-weight:600;cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:11px;color:var(--text-muted);transition:transform var(--transition-fast)}
details[open] summary::before{transform:rotate(180deg)}
details summary:hover{background:rgba(79,172,254,0.1)}
details>div,details>section{padding:var(--spacing-lg)}
.subsection-title{font-size:14px;font-weight:600;color:var(--accent-blue);margin:var(--spacing-lg) 0 var(--spacing-md) 0;padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-accent)}
.subsection-title:first-child{margin-top:0}
.helper-note{font-size:11px;color:var(--text-muted);font-style:italic;margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:rgba(79,172,254,0.05);border-radius:6px;border-left:2px solid var(--accent-blue)}
.equipment-section.hidden{display:none}

.report-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-dark);z-index:1000;overflow-y:auto;display:none;animation:slideIn 0.3s ease}
.report-overlay.active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.report-header{position:sticky;top:0;background:rgba(10,10,15,0.95);backdrop-filter:blur(20px);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;z-index:10}
.report-close-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:13px;cursor:pointer}
.report-close-btn:hover{border-color:var(--border-accent)}
.report-actions{display:flex;gap:var(--spacing-sm)}
.report-action-btn{display:flex;align-items:center;gap:4px;padding:var(--spacing-sm) var(--spacing-md);background:var(--accent-gradient);border:none;border-radius:var(--radius-md);color:var(--bg-dark);font-size:13px;font-weight:600;cursor:pointer}
.report-action-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)}
.report-body{padding:var(--spacing-xl);max-width:800px;margin:0 auto}
.report-hero{text-align:center;padding:var(--spacing-xl) 0;margin-bottom:var(--spacing-xl);border-bottom:1px solid var(--border-color)}
.report-hero-logo{width:80px;height:80px;border-radius:var(--radius-lg);margin-bottom:var(--spacing-md)}
.report-hero h1{font-size:24px;margin-bottom:4px;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.report-hero p{color:var(--text-muted);font-size:13px}
.report-section{margin-bottom:var(--spacing-xl)}
.report-section-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:18px;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}
.report-section-title i{color:var(--accent-blue)}
.report-finding{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);border-left:3px solid var(--border-color)}
.report-finding.good{border-color:var(--status-green)}
.report-finding.warning{border-color:var(--status-yellow)}
.report-finding.bad{border-color:var(--status-red)}
.report-finding-icon{font-size:18px;min-width:24px;text-align:center}
.report-finding.good .report-finding-icon{color:var(--status-green)}
.report-finding.warning .report-finding-icon{color:var(--status-yellow)}
.report-finding.bad .report-finding-icon{color:var(--status-red)}
.report-finding-content{flex:1}
.report-finding-title{font-weight:600;font-size:13px;margin-bottom:4px}
.report-finding-description{font-size:13px;color:var(--text-secondary)}
.report-summary-card{background:var(--bg-elevated);border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}
.report-summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);text-align:center}
.report-stat{padding:var(--spacing-md)}
.report-stat-value{font-size:32px;font-weight:700}
.report-stat-value.good{color:var(--status-green)}
.report-stat-value.warning{color:var(--status-yellow)}
.report-stat-value.bad{color:var(--status-red)}
.report-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg)}

.floating-menu{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);z-index:500}
.floating-menu-trigger{width:56px;height:56px;border-radius:50%;background:var(--accent-gradient);border:none;color:var(--bg-dark);font-size:18px;cursor:pointer;box-shadow:var(--shadow-lg),0 0 30px rgba(79,172,254,0.4)}
.floating-menu-trigger:hover{transform:scale(1.1)}
.floating-menu-items{position:absolute;bottom:70px;right:0;display:none;flex-direction:column;gap:var(--spacing-sm)}
.floating-menu.open .floating-menu-items{display:flex;animation:fadeInUp 0.3s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ff-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* iter31-v.2: Field Flow brand icon cleanup. The source PNG has a thick dark-navy square
   safe-area around the rounded FF mark (delivered as a full square for iOS icon slots).
   We render it with our own rounded corners AND scale-up so the mark fills the tile
   edge-to-edge without the dark surround. Applied globally by src-match to keep HTML clean.
   Parent's `overflow:hidden` is provided by `display:inline-block` wrapping — but for bare
   img placements we fall back to clip-path which respects the transform. */
img[src*="4duiyn4m_78F1D58A"]{
  border-radius:22%!important;
  /* Source PNG has 12-15% solid black safe-area on each edge. Scale 1.35 shows the
     inner 74% — fully eats the black and leaves the blue FF mark on navy filling
     the tile. Combined with clip-path for proper rounded corners. */
  transform:scale(1.35);
  transform-origin:center center;
  clip-path:inset(0 round 22%);
  background:transparent!important;
  filter:none!important;
}
/* Ensure parents of this branded img clip the scaled overflow to their own rounded box. */
.brand-logo,.home-brand-logo-wrap{overflow:hidden;border-radius:22%}

/* ============== iter31-u: Vehicle card grid (Fleet & Van Inventory) ============== */
.vehicles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md)}
@media (max-width:520px){.vehicles-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}}
.vehicle-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:transform 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease;animation:fadeInUp 0.28s ease-out both}
.vehicle-card:hover{transform:translateY(-2px);border-color:rgba(79,172,254,0.35);box-shadow:0 12px 28px rgba(0,0,0,0.35),0 0 0 1px rgba(79,172,254,0.15)}
.vehicle-card__header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);min-height:48px;color:var(--bg-dark)}
.vehicle-card__badge{font-size:10px;font-weight:800;letter-spacing:1.2px;padding:4px 10px;background:rgba(0,0,0,0.28);color:#fff;border-radius:999px;backdrop-filter:blur(4px)}
.vehicle-card__menu{display:flex;gap:6px}
.vehicle-card__icon-btn{width:36px;height:36px;border-radius:10px;background:rgba(0,0,0,0.28);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:background 0.15s ease}
.vehicle-card__icon-btn:hover{background:rgba(0,0,0,0.45)}
.vehicle-card__icon-btn--danger:hover{background:rgba(255,75,75,0.6)}
.vehicle-card__body{padding:var(--spacing-md);flex:1;display:flex;flex-direction:column;gap:10px}
.vehicle-card__number{font-size:22px;font-weight:800;letter-spacing:-0.5px;line-height:1.1;color:var(--text-primary)}
.vehicle-card__nickname{font-size:13px;color:var(--text-muted);margin-top:-4px;line-height:1.3;word-break:break-word}
.vehicle-card__assignee{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,0.03);border:1px solid var(--border-light);border-radius:10px;margin-top:auto}
.vehicle-card__avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(103,232,172,0.3),rgba(79,172,254,0.2));color:#67e8ac;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;letter-spacing:-0.02em}
.vehicle-card__assignee-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;font-weight:600}
.vehicle-card__assignee-name{font-size:13px;color:var(--text-primary);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vehicle-card__footer{padding:0 var(--spacing-md) var(--spacing-md) var(--spacing-md);display:flex;gap:var(--spacing-sm)}
/* iter31-t: Company Branding responsive layout — side-by-side on desktop, stacked on mobile */
.branding-grid{display:grid;grid-template-columns:1fr 260px;gap:var(--spacing-xl);align-items:start}
@media (max-width:720px){.branding-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.branding-preview-col{order:-1}}
/* Feature-flag toggle switch (iter31-t) */
.ff-switch-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);min-height:56px}
.ff-switch-row__label{display:flex;flex-direction:column;gap:2px;min-width:0}
.ff-switch-row__title{font-weight:600;font-size:14px;color:var(--text-primary)}
.ff-switch-row__desc{font-size:12px;color:var(--text-muted);line-height:1.4}
.ff-switch{position:relative;display:inline-block;flex-shrink:0;width:52px;height:30px;cursor:pointer}
.ff-switch input{opacity:0;width:0;height:0}
.ff-switch__slider{position:absolute;inset:0;background:rgba(255,255,255,0.1);border:1px solid var(--border-color);border-radius:999px;transition:background 0.2s}
.ff-switch__slider::before{content:"";position:absolute;left:3px;top:2px;width:22px;height:22px;background:#e8eaf0;border-radius:50%;transition:transform 0.2s}
.ff-switch input:checked + .ff-switch__slider{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);border-color:transparent}
.ff-switch input:checked + .ff-switch__slider::before{transform:translateX(22px);background:#fff}
.ff-switch input:focus-visible + .ff-switch__slider{box-shadow:0 0 0 3px rgba(79,172,254,0.35)}
.floating-menu-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.floating-menu-item:hover{border-color:var(--border-accent);box-shadow:var(--shadow-glow)}
.floating-menu-item i{width:20px;text-align:center;color:var(--accent-blue)}

.system-banner{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:rgba(79,172,254,0.1);border:1px solid var(--border-accent);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}
.system-banner i{color:var(--accent-blue)}
.system-banner strong{color:var(--text-primary)}
.system-banner span{color:var(--text-secondary);font-size:13px}

.inv-row{display:grid;grid-template-columns:1fr 80px 70px;gap:var(--spacing-md);align-items:center;padding:var(--spacing-sm) 0;border-bottom:1px solid var(--border-color)}
.inv-row label{margin:0;font-size:13px}
.inv-row input{padding:6px 10px;font-size:14px}
.inv-chip{padding:4px 8px;border-radius:50px;font-size:10px;font-weight:600;text-transform:uppercase;text-align:center}
.inv-chip.good{background:var(--status-green-bg);color:var(--status-green)}
.inv-chip.low{background:var(--status-yellow-bg);color:var(--status-yellow)}
.inv-chip.out{background:var(--status-red-bg);color:var(--status-red)}
.inv-section{padding:var(--spacing-lg)}
.inv-category{font-size:13px;font-weight:600;color:var(--accent-blue);margin:var(--spacing-md) 0 var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--border-accent)}
.inv-category:first-child{margin-top:0}

.photo-upload-area{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;cursor:pointer}
.photo-upload-area:hover{border-color:var(--accent-blue);background:rgba(79,172,254,0.05)}
.photo-upload-area i{font-size:32px;color:var(--text-muted);margin-bottom:var(--spacing-sm);display:block}
.photo-upload-area p{color:var(--text-muted);font-size:13px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}
.photo-thumbnail-card{background:rgba(79,172,254,0.05);border:1px solid rgba(79,172,254,0.2);border-radius:var(--radius-md);overflow:hidden;transition:all 0.3s ease}
.photo-thumbnail-card:hover{border-color:var(--accent-blue);box-shadow:0 4px 12px rgba(79,172,254,0.2)}
.photo-thumbnail-image{aspect-ratio:4/3;position:relative;overflow:hidden;background:rgba(0,0,0,0.3)}
.photo-thumbnail-image img{width:100%;height:100%;object-fit:contain;background:#0a0a14;transition:transform 0.3s ease}
.photo-thumbnail-card:hover .photo-thumbnail-image img{transform:scale(1.05)}
.photo-thumbnail-remove{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(239,68,68,0.9);border:2px solid white;color:white;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;z-index:10}
.photo-thumbnail-remove:hover{background:#ef4444;transform:scale(1.1)}
.photo-caption-input{width:100%;padding:var(--spacing-sm);background:rgba(26,26,46,0.5);border:1px solid rgba(79,172,254,0.2);color:var(--text);font-size:13px;outline:none;transition:all 0.2s ease}
.photo-caption-input:focus{border-color:var(--accent-blue);background:rgba(26,26,46,0.8)}
.photo-caption-input::placeholder{color:var(--text-muted);opacity:0.6}
.photo-thumbnail{aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;position:relative}
.photo-thumbnail img{width:100%;height:100%;object-fit:contain;background:#0a0a14}

/* Parts Used (structured) + Notification bell */
.parts-used-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}
.parts-used-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--spacing-md);align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:rgba(79,172,254,0.06);border:1px solid rgba(79,172,254,0.18);border-radius:var(--radius-md)}
.parts-used-row .pu-name{font-weight:600;color:var(--text)}
.parts-used-row .pu-qty{color:var(--accent-blue);font-weight:600;white-space:nowrap}
.parts-used-row .pu-remove{background:transparent;border:1px solid rgba(255,107,107,0.4);color:#ff6b6b;padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px}
.parts-used-row .pu-remove:hover{background:rgba(255,107,107,0.15)}
.parts-used-empty{color:var(--text-muted);font-size:13px;font-style:italic;padding:var(--spacing-md);text-align:center}

.location-filter-pill{align-items:center;gap:8px;padding:7px 12px 7px 12px;background:rgba(79,172,254,0.08);border:1px solid rgba(79,172,254,0.3);border-radius:999px;transition:all 0.2s ease;max-width:220px}
.location-filter-pill:hover{background:rgba(79,172,254,0.14);border-color:rgba(79,172,254,0.45)}
.location-filter-pill__icon{color:var(--accent-blue);font-size:12px;flex-shrink:0}
.location-filter-pill__caret{color:var(--accent-blue);font-size:9px;opacity:0.7;pointer-events:none;flex-shrink:0}
.location-filter-pill__select,
.location-filter-pill select.location-filter-pill__select,
select.location-filter-pill__select{-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;background:transparent !important;background-color:transparent !important;background-image:none !important;border:none !important;box-shadow:none !important;color:var(--text);font-size:13px;font-weight:600;padding:0;margin:0;cursor:pointer;outline:none;min-width:0;max-width:140px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-family:inherit;line-height:1.2;height:auto}
.location-filter-pill__select:focus{outline:none}
.location-filter-pill__select option{background:#0f1423;color:var(--text)}
.location-filter-pill.is-locked{opacity:0.9}
.location-filter-pill.is-locked .location-filter-pill__caret{display:none}
.location-filter-pill.is-locked .location-filter-pill__select{cursor:not-allowed}

.change-loc-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}
.change-loc-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:rgba(255,255,255,0.02);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all 0.15s ease;position:relative}
.change-loc-option:hover{background:rgba(79,172,254,0.08);border-color:rgba(79,172,254,0.35)}
.change-loc-option.is-selected{background:rgba(79,172,254,0.12);border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue)}
.change-loc-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.change-loc-option__body{flex:1;min-width:0}
.change-loc-option__title{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.change-loc-option__title i{color:var(--accent-blue);font-size:13px}
.change-loc-option__meta{font-size:12px;color:var(--text-muted);margin-top:2px}
.change-loc-option__tick{color:var(--accent-blue);font-size:14px;opacity:0;transition:opacity 0.15s ease}
.change-loc-option.is-selected .change-loc-option__tick{opacity:1}
.change-loc-option--warn .change-loc-option__title i{color:#ffa500}
.change-loc-option--warn.is-selected{border-color:#ffa500;box-shadow:0 0 0 1px #ffa500;background:rgba(255,165,0,0.1)}
.change-loc-option--warn.is-selected .change-loc-option__tick{color:#ffa500}

/* iter31-j: sticky per-tab location bar + Manage Locations cards */
.tab-loc-bar{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;padding:10px 14px;margin-bottom:var(--spacing-md);background:linear-gradient(135deg,rgba(79,172,254,0.08),rgba(0,242,254,0.04));border:1px solid rgba(79,172,254,0.28);border-radius:var(--radius-md);position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.tab-loc-bar__label{font-size:12px;font-weight:700;color:var(--accent-blue);text-transform:uppercase;letter-spacing:0.5px;display:inline-flex;align-items:center;gap:6px}
.tab-loc-bar__pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(255,255,255,0.04);border:1px solid var(--border-color);border-radius:999px}
.tab-loc-bar__pill.is-locked{opacity:0.8}
.tab-loc-bar__select,
.tab-loc-bar select.tab-loc-bar__select,
select.tab-loc-bar__select{-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;background:transparent !important;background-color:transparent !important;background-image:none !important;border:none !important;box-shadow:none !important;color:var(--text);font-size:13px;font-weight:600;padding:0;margin:0;cursor:pointer;outline:none;max-width:220px;font-family:inherit}
.tab-loc-bar__select option{background:#0f1423;color:var(--text)}
.tab-loc-bar__caret{color:var(--accent-blue);font-size:9px;opacity:0.7;pointer-events:none}
.tab-loc-bar__hint{font-size:11px;color:var(--text-muted);margin-left:auto}

.location-card{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:border-color 0.15s ease}
.location-card:hover{border-color:rgba(79,172,254,0.45)}
.location-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color);flex-wrap:wrap}
.location-card__title{margin:0;font-size:17px;color:var(--text);display:inline-flex;align-items:center;gap:8px}
.location-card__title i{color:var(--accent-blue);font-size:14px}
.location-card__addr{font-size:12px;color:var(--text-muted);margin-top:4px}
.location-card__stats{display:flex;gap:var(--spacing-md)}
.location-card__stats>div{text-align:center;padding:6px 14px;background:rgba(79,172,254,0.08);border:1px solid rgba(79,172,254,0.2);border-radius:var(--radius-sm);min-width:72px}
.location-card__stats strong{display:block;font-size:20px;color:var(--accent-blue);line-height:1}
.location-card__stats span{font-size:10px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);margin-top:2px;display:block}
.location-card__roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.location-roster-row{display:flex;align-items:center;gap:var(--spacing-md);padding:10px 12px;background:rgba(255,255,255,0.02);border:1px solid var(--border-color);border-radius:var(--radius-sm)}
.location-roster-row__main{flex:1;min-width:0}
.location-roster-row__name{font-size:14px;color:var(--text);font-weight:500}
.location-roster-row__meta{font-size:11px;color:var(--text-muted);margin-top:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.location-roster-row__role{padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;text-transform:capitalize;white-space:nowrap}

.waiver-banner{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,rgba(67,233,123,0.15),rgba(56,249,215,0.08));border:1px solid rgba(67,233,123,0.45);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg)}
.waiver-banner__icon{width:42px;height:42px;border-radius:50%;background:rgba(67,233,123,0.2);color:#43e97b;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.waiver-banner__title{font-size:15px;font-weight:700;color:#43e97b;margin:0}
.waiver-banner__sub{font-size:12px;color:var(--text-secondary);margin-top:4px}

.locations-billing-banner{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:rgba(79,172,254,0.08);border:1px solid rgba(79,172,254,0.3);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg)}
.locations-billing-banner--waived{background:linear-gradient(135deg,rgba(67,233,123,0.14),rgba(56,249,215,0.06));border-color:rgba(67,233,123,0.4)}
.locations-billing-banner__icon{width:38px;height:38px;border-radius:50%;background:rgba(79,172,254,0.18);color:var(--accent-blue);display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.locations-billing-banner--waived .locations-billing-banner__icon{background:rgba(67,233,123,0.2);color:#43e97b}
.locations-billing-banner__title{font-size:14px;font-weight:700;color:var(--text)}
.locations-billing-banner--waived .locations-billing-banner__title{color:#43e97b}
.locations-billing-banner__sub{font-size:12px;color:var(--text-secondary);margin-top:2px}

.user-multi-loc-pill{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;background:rgba(67,233,123,0.2);color:#43e97b;border:1px solid rgba(67,233,123,0.4);border-radius:9px;font-size:10px;font-weight:700;margin-left:4px}


/* ─────────────────────────────────────────────────────────────────────
   iter34.208 — SaaS-grade Admin Banner ("Welcome back…" hero)
   Replaces the legacy gradient pill header. Auto-themes via [data-ff-theme].
   Inline SVG (desert + city skyline + delivery van) lives on the right side.
   ───────────────────────────────────────────────────────────────────── */
.ff-banner{
  position:relative;
  margin-bottom:var(--spacing-xl);
  padding:24px 28px;
  border-radius:20px;
  overflow:hidden;
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  box-shadow:0 2px 4px rgba(0,0,0,0.18),0 14px 40px rgba(0,0,0,0.30);
}
:root[data-ff-theme="light"] .ff-banner{
  background:#ffffff;
  border-color:rgba(15,23,42,0.07);
  box-shadow:0 1px 2px rgba(15,23,42,0.04),0 12px 36px rgba(15,23,42,0.08);
}
.ff-banner__accent{
  position:absolute;top:0;right:0;bottom:0;width:55%;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(79,172,254,0.10) 0%, rgba(79,172,254,0) 65%),
    radial-gradient(ellipse 40% 60% at 100% 0%, rgba(0,242,254,0.08) 0%, rgba(0,242,254,0) 60%);
}
:root[data-ff-theme="light"] .ff-banner__accent{
  background:
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(79,172,254,0.10) 0%, rgba(79,172,254,0) 65%),
    radial-gradient(ellipse 40% 60% at 100% 0%, rgba(0,242,254,0.10) 0%, rgba(0,242,254,0) 60%);
}
@media (max-width:520px){
  .ff-banner__accent{display:none;}
  .ff-banner{padding:20px 18px;}
}
.ff-banner__row{
  position:relative;z-index:2;
  display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
}
.ff-banner__logo{
  flex-shrink:0;width:62px;height:62px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  box-shadow:0 8px 22px rgba(15,23,42,0.30),inset 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;
}
.ff-banner__logo img{width:78%;height:78%;object-fit:contain;display:block;}
.ff-banner__title-block{flex:1;min-width:220px;}
.ff-banner__kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent-blue);margin-bottom:6px;
}
.ff-banner__title{
  margin:0;font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:-0.02em;
  color:var(--text-primary);line-height:1.15;
}
.ff-banner__title .ff-banner__name{
  display:inline;
  background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ff-banner__tagline{
  margin:8px 0 0;color:var(--text-muted);font-size:13px;font-style:italic;
  display:flex;align-items:center;gap:6px;
}
.ff-banner__tagline .fa-star{color:#f59e0b;font-size:11px;}
.ff-banner__right{
  display:flex;align-items:center;gap:8px;margin-left:auto;
}
.ff-banner__role-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;
  background:rgba(79,172,254,0.10);color:var(--accent-blue);
  border:1px solid rgba(79,172,254,0.30);
  font-size:12px;font-weight:700;letter-spacing:0.02em;white-space:nowrap;
}
:root[data-ff-theme="light"] .ff-banner__role-pill{
  background:rgba(79,172,254,0.08);
  border-color:rgba(79,172,254,0.25);
}

/* Sub-row: location · date · time · logout · quick actions */
.ff-banner__divider{
  height:1px;background:var(--border-color);
  margin:18px 0 14px;position:relative;z-index:2;
}
.ff-banner__subrow{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.ff-banner__chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:11px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-color);
  color:var(--text-secondary);font-size:13px;font-weight:600;
  white-space:nowrap;
}
:root[data-ff-theme="light"] .ff-banner__chip{
  background:#f8fafc;
  border-color:rgba(15,23,42,0.07);
}
.ff-banner__chip i{color:var(--accent-blue);font-size:12px;}
.ff-banner__chip select{
  background:transparent!important;border:none!important;color:inherit!important;
  font:inherit!important;padding:0!important;cursor:pointer;font-weight:600!important;
  appearance:none;-webkit-appearance:none;padding-right:14px!important;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)!important;
  background-position:calc(100% - 6px) 50%,calc(100% - 2px) 50%!important;
  background-size:4px 4px,4px 4px!important;background-repeat:no-repeat!important;
  min-height:auto!important;
}
.ff-banner__chip select:focus{outline:none!important;box-shadow:none!important;}

.ff-banner__logout{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:11px;
  background:transparent;border:1px solid var(--border-color);
  color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;
  transition:all 0.15s ease;
}
.ff-banner__logout:hover{
  color:var(--text-primary);border-color:rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.03);
}
:root[data-ff-theme="light"] .ff-banner__logout:hover{
  background:#f1f5f9;border-color:rgba(15,23,42,0.14);
}
.ff-banner__qa-wrap{margin-left:auto;position:relative;}
.ff-banner__qa{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:11px;
  background:linear-gradient(135deg,#4facfe 0%,#0ea5e9 100%);
  color:#fff;border:none;
  font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(14,165,233,0.30);
  transition:transform 0.12s ease,box-shadow 0.12s ease;
}
.ff-banner__qa:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(14,165,233,0.42);}
.ff-banner__qa:active{transform:translateY(0);}
.ff-banner__qa i{font-size:12px;}

/* Quick Actions popover */
.ff-qa-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;
  background:transparent;border:none;border-radius:10px;
  color:var(--text-primary);cursor:pointer;text-align:left;
  transition:background-color 0.12s ease;
}
.ff-qa-item:hover{background:rgba(255,255,255,0.05);}
:root[data-ff-theme="light"] .ff-qa-item:hover{background:#f1f5f9;}
.ff-qa-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;font-size:14px;flex-shrink:0;
}
.ff-qa-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ff-qa-title{font-size:13px;font-weight:700;color:var(--text-primary);line-height:1.2;}
.ff-qa-sub{font-size:11px;color:var(--text-muted);line-height:1.2;}
.ff-qa-divider{height:1px;background:var(--border-color);margin:4px 6px;}

/* Hide legacy theme/logout buttons inside .ff-banner — sub-row replaces them */
.ff-banner .legacy-admin-actions{display:none;}

/* iter34.209 — KPI tile icon background (colored soft tile) */
.kpi-icon-tile{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  font-size:15px;flex-shrink:0;
}
/* iter34.210 — Settings sub-nav segmented tabs */
.ff-settings-tab{
  flex:1;min-width:140px;padding:9px 14px;border:none;background:transparent;
  color:var(--text-secondary);border-radius:9px;cursor:pointer;
  font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;justify-content:center;
  transition:background-color 0.15s,color 0.15s;
}
.ff-settings-tab:hover{color:var(--text-primary);background:rgba(255,255,255,0.03);}
:root[data-ff-theme="light"] .ff-settings-tab:hover{background:#f1f5f9;}
.ff-settings-tab.active{
  background:linear-gradient(135deg,#4facfe 0%,#0ea5e9 100%);
  color:#fff;box-shadow:0 4px 12px rgba(14,165,233,0.30);
}
.ff-settings-tab.active i{color:#fff;}
.ff-settings-tab i{font-size:12px;color:var(--accent-blue);}

/* iter34.209 — Sparkline absolute-positioned top-right of each KPI tile. */
.kpi-spark-pos{
  position:absolute;top:14px;right:14px;
  display:block;line-height:0;opacity:0.95;pointer-events:none;
}



/* Floating notification bell (FAB-style) — always accessible while scrolling */
.notif-bell-wrap{position:fixed;top:calc(20px + env(safe-area-inset-top, 0px));right:20px;z-index:900;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto}
.notif-bell-btn{background:linear-gradient(135deg,rgba(79,172,254,0.95),rgba(0,242,254,0.85));border:1px solid rgba(255,255,255,0.15);color:#0a0e1a;width:52px;height:52px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:19px;transition:transform 0.2s ease,box-shadow 0.2s ease;box-shadow:0 8px 24px rgba(79,172,254,0.35),0 2px 6px rgba(0,0,0,0.4)}
.notif-bell-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 28px rgba(79,172,254,0.5),0 4px 10px rgba(0,0,0,0.45)}
.notif-bell-btn:active{transform:translateY(0) scale(0.97)}
.notif-bell-badge{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff4757;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg-dark),0 4px 10px rgba(255,71,87,0.45);animation:notifPulse 2.2s ease-in-out infinite}
@keyframes notifPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (max-width:520px){.notif-bell-wrap{top:calc(16px + env(safe-area-inset-top, 0px));right:14px}.notif-bell-btn{width:48px;height:48px;font-size:17px}}

/* --- Notifications drawer v2 (iter31-n overhaul) --- */
.notif-drawer{position:fixed;top:80px;right:20px;width:min(460px,calc(100vw - 40px));max-height:calc(100vh - 100px);overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(17,23,41,0.98),rgba(12,16,28,0.98));border:1px solid rgba(79,172,254,0.2);border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,0.6),0 0 60px rgba(79,172,254,0.08);z-index:800;backdrop-filter:blur(24px);visibility:hidden;opacity:0;transform:translateY(-8px) scale(0.98);transition:opacity 0.22s ease,transform 0.22s ease,visibility 0.22s}
.notif-drawer.open{visibility:visible;opacity:1;transform:translateY(0) scale(1)}
@media (max-width:520px){.notif-drawer{top:auto;bottom:0;right:0;left:0;width:100%;max-height:82vh;border-radius:18px 18px 0 0;transform:translateY(100%)}.notif-drawer.open{transform:translateY(0)}}
.notif-drawer-header{position:sticky;top:0;z-index:2;padding:16px 18px 12px;background:linear-gradient(180deg,rgba(17,23,41,0.98),rgba(17,23,41,0.92));border-bottom:1px solid rgba(79,172,254,0.12)}
.notif-drawer-headrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.notif-drawer-title{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px;letter-spacing:-0.01em}
.notif-drawer-title .notif-drawer-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(79,172,254,0.15);color:var(--accent-blue);font-size:14px}
.notif-drawer-title .notif-drawer-count{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,107,107,0.15);color:#ff8787;letter-spacing:0.02em}
.notif-drawer-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:15px;padding:8px;border-radius:8px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;transition:all 0.15s ease}
.notif-drawer-close:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.notif-tabs{display:flex;gap:4px;margin-top:12px;padding:3px;background:rgba(0,0,0,0.25);border-radius:10px;border:1px solid rgba(255,255,255,0.04)}
.notif-tab{flex:1;border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:600;padding:8px 10px;border-radius:7px;cursor:pointer;transition:all 0.15s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px}
.notif-tab:hover{color:var(--text)}
.notif-tab.active{background:rgba(79,172,254,0.15);color:var(--accent-blue);box-shadow:0 1px 2px rgba(0,0,0,0.15)}
.notif-tab-pill{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;font-size:10px;font-weight:700;border-radius:999px;background:rgba(255,107,107,0.2);color:#ff8787}
.notif-tab.active .notif-tab-pill{background:rgba(79,172,254,0.25);color:var(--accent-blue)}
.notif-drawer-scroll{flex:1;overflow-y:auto;padding:14px 16px 18px;-webkit-overflow-scrolling:touch}

/* Section */
.notif-section{margin-bottom:20px}
.notif-section:last-child{margin-bottom:6px}
.notif-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
.notif-section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-muted);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.notif-section-action{background:transparent;border:none;color:var(--accent-blue);font-size:11px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;min-height:30px;transition:background 0.15s ease}
.notif-section-action:hover{background:rgba(79,172,254,0.1)}

/* Restock summary card (prominent) */
.notif-summary-card{background:linear-gradient(135deg,rgba(255,167,38,0.12),rgba(255,107,107,0.06));border:1px solid rgba(255,167,38,0.28);border-radius:12px;padding:14px;margin-bottom:10px;position:relative;overflow:hidden}
.notif-summary-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ffa502,#ff6b6b)}
.notif-summary-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.notif-summary-icon{width:32px;height:32px;border-radius:10px;background:rgba(255,167,38,0.2);color:#ffa502;display:inline-flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.notif-summary-text{flex:1;min-width:0}
.notif-summary-headline{font-size:14px;font-weight:700;color:var(--text);line-height:1.2;letter-spacing:-0.005em}
.notif-summary-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;line-height:1.3}

/* Tech card (tappable) */
.notif-tech-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:11px 12px;margin-bottom:6px;cursor:pointer;transition:all 0.15s ease;min-height:54px}
.notif-tech-card:hover{background:rgba(79,172,254,0.08);border-color:rgba(79,172,254,0.25);transform:translateX(2px)}
.notif-tech-card:active{transform:translateX(2px) scale(0.99)}
.notif-tech-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(79,172,254,0.3),rgba(0,242,254,0.2));color:var(--accent-blue);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:-0.02em}
.notif-tech-info{flex:1;min-width:0}
.notif-tech-name{font-weight:600;color:var(--text);font-size:13px;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-tech-sub{font-size:11px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.notif-tech-sub .sev{color:#ffa502;font-weight:600}
.notif-tech-arrow{color:var(--text-muted);font-size:12px;flex-shrink:0;opacity:0.6;transition:transform 0.15s ease}
.notif-tech-card:hover .notif-tech-arrow{opacity:1;transform:translateX(3px)}

/* Time group header */
.notif-time-group{font-size:10.5px;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-muted);font-weight:600;margin:14px 2px 8px;opacity:0.7}
.notif-time-group:first-child{margin-top:0}

/* Alert row v2 */
.notif-alert-row{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;background:rgba(255,107,107,0.05);border:1px solid rgba(255,107,107,0.15);border-radius:10px;margin-bottom:6px;position:relative;transition:all 0.15s ease}
.notif-alert-row.read{background:rgba(255,255,255,0.02);border-color:rgba(255,255,255,0.05);opacity:0.72}
.notif-alert-row .nar-dot{width:8px;height:8px;border-radius:50%;background:#ff6b6b;margin-top:5px;flex-shrink:0;box-shadow:0 0 8px rgba(255,107,107,0.6)}
.notif-alert-row.read .nar-dot{background:transparent;box-shadow:none;border:1.5px solid rgba(255,255,255,0.15)}
.notif-alert-row .nar-body{flex:1;min-width:0;font-size:12.5px;color:var(--text);line-height:1.4}
.notif-alert-row .nar-title{font-weight:600;color:var(--text);letter-spacing:-0.005em}
.notif-alert-row .nar-sub{font-size:11.5px;color:var(--text-muted);margin-top:3px;line-height:1.35}
.notif-alert-row .nar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:10.5px;color:var(--text-muted);margin-top:6px}
.notif-alert-row .nar-threshold{opacity:0.75}
.notif-alert-row .nar-when{margin-left:auto;opacity:0.75}
.notif-alert-row .nar-qty-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;background:rgba(255,107,107,0.12);color:#ff8787;border-radius:999px;font-weight:600;font-size:10.5px}
.notif-alert-row.read .nar-qty-pill{background:rgba(255,255,255,0.05);color:var(--text-muted)}
.notif-alert-row .nar-mark{background:transparent;border:none;color:var(--accent-blue);cursor:pointer;padding:0;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;transition:all 0.15s ease;opacity:0.65}
.notif-alert-row .nar-mark:hover{background:rgba(79,172,254,0.12);opacity:1}
.notif-alert-row .nar-mark:active{transform:scale(0.92)}

/* Password reset request card (iter31-o) */
.notif-reset-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,167,38,0.1),rgba(255,107,107,0.06));border:1px solid rgba(255,167,38,0.3);border-radius:10px;padding:12px;margin-bottom:8px}
.notif-reset-card .nrc-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,167,38,0.22);color:#ffa502;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.notif-reset-card .nrc-body{flex:1;min-width:0}
.notif-reset-card .nrc-title{font-weight:600;color:var(--text);font-size:13px;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-reset-card .nrc-sub{font-size:11px;color:var(--text-muted);margin-top:2px;text-transform:capitalize}
.notif-reset-card .nrc-grant{background:linear-gradient(135deg,#ffa502,#ff6b6b);color:#fff;border:none;padding:8px 12px;border-radius:8px;font-size:11.5px;font-weight:600;cursor:pointer;flex-shrink:0;transition:all 0.15s ease;white-space:nowrap;min-height:36px}
.notif-reset-card .nrc-grant:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,167,38,0.35)}
.notif-reset-card .nrc-grant:active{transform:translateY(0) scale(0.97)}

/* Empty states */
.notif-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;text-align:center;color:var(--text-muted)}
.notif-empty-icon{width:56px;height:56px;border-radius:50%;background:rgba(46,213,115,0.12);color:#2ed573;display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:12px}
.notif-empty-icon.muted{background:rgba(255,255,255,0.04);color:var(--text-muted)}
.notif-empty-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;letter-spacing:-0.005em}
.notif-empty-sub{font-size:12px;color:var(--text-muted);line-height:1.4;max-width:260px}

/* Skeleton loader */
.notif-skel{display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.notif-skel-row{height:62px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 100%);background-size:200% 100%;animation:notifSkel 1.4s infinite ease-in-out}
@keyframes notifSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.notif-empty{color:var(--text-muted);font-size:13px}



/* Photo Report Grid - On-Screen View */
.photo-report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin:var(--spacing-md) 0}
.photo-report-card{border:2px solid rgba(79,172,254,0.2);border-radius:var(--radius-md);overflow:hidden;background:rgba(26,26,46,0.5)}
.photo-report-image{background:rgba(10,10,20,0.8);aspect-ratio:4/3;overflow:hidden;max-height:200px}
.photo-report-image img{width:100%;height:100%;object-fit:contain;display:block;background:#0a0a14}
.photo-report-caption{padding:var(--spacing-sm);color:var(--text-muted);font-size:13px;line-height:1.5;background:rgba(79,172,254,0.05);border-top:1px solid rgba(79,172,254,0.2)}

/* Responsive: Single column on mobile */
@media(max-width:600px){
  .photo-report-grid{grid-template-columns:1fr}
  .photo-report-image{max-height:250px}
}

.hidden{display:none!important}
.mt-md{margin-top:var(--spacing-md)}
.mb-md{margin-bottom:var(--spacing-md)}
.text-center{text-align:center}

@media print{
  @page{size:letter;margin:0.5in;background:#0a0a0f}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important;-webkit-filter:none!important}
  html,body{background:#0a0a0f!important;margin:0!important;padding:0!important}
  body{color:#fff!important}
  
  /* Hide everything except reports or estimate workflows */
  body>*:not(.report-overlay):not(#estimate-workflow):not(#plumbing-estimate-workflow){display:none!important}
  #home-screen,#service-workflow,#inventory-workflow,#plumbing-home,#plumbing-service-workflow,#plumbing-inventory-workflow,#service-selector{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important}
  .floating-menu,.floating-menu-trigger,#floating-restock-btn,#plumb-floating-restock-btn,#hvac-estimate-print-btn,#plumb-estimate-print-btn,#plumb-floating-menu,.btn.home-btn{display:none!important}
  
  /* Show estimate workflows when printing */
  #estimate-workflow:not(.hidden),#plumbing-estimate-workflow:not(.hidden){display:block!important;visibility:visible!important;position:static!important;background:#0a0a0f!important;padding:0.5in!important}
  #estimate-workflow .app-header,#plumbing-estimate-workflow .app-header{display:block!important;text-align:center!important;margin-bottom:24px!important;border-bottom:2px solid #4facfe!important;padding-bottom:16px!important}
  #estimate-workflow .app-header .brand-logo,#plumbing-estimate-workflow .app-header .brand-logo{justify-content:center!important}
  #estimate-workflow .app-header .home-btn,#plumbing-estimate-workflow .app-header .home-btn{display:none!important}
  
  /* Style estimate sections for print */
  #estimate-workflow details,#plumbing-estimate-workflow details{border:2px solid #333!important;background:#1a1a24!important;border-radius:8px!important;margin:12px 0!important;page-break-inside:avoid!important}
  #estimate-workflow summary,#plumbing-estimate-workflow summary{background:#1a1a24!important;color:#4facfe!important;padding:12px!important;font-weight:700!important;font-size:16px!important;border-bottom:1px solid #333!important}
  #estimate-workflow details>div,#plumbing-estimate-workflow details>div{padding:16px!important;background:#0a0a0f!important}
  #estimate-workflow label,#plumbing-estimate-workflow label{color:#aaa!important;font-size:12px!important;display:block!important;margin-bottom:4px!important}
  #estimate-workflow input,#plumbing-estimate-workflow input,#estimate-workflow select,#plumbing-estimate-workflow select,#estimate-workflow textarea,#plumbing-estimate-workflow textarea{background:#1a1a24!important;border:1px solid #333!important;color:#fff!important;padding:8px!important;border-radius:4px!important;font-size:14px!important}
  #estimate-workflow .field-grid,#plumbing-estimate-workflow .field-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:12px!important}
  
  /* Report overlays (existing) */
  .report-overlay{display:none!important;visibility:hidden!important}
  .report-overlay.active{display:block!important;visibility:visible!important;position:static!important;background:#0a0a0f!important;width:100%!important;height:auto!important;overflow:visible!important}
  /* iter31-l: hide the action bar (Back / Save / Print + the "Tip" helper text) on print —
     it was rendering as a floating overlay on top of the report content. */
  .report-header,.report-overlay .report-actions,#report-close-btn{display:none!important}
  #report-overlay:not(.active),#restock-overlay:not(.active),#plumb-restock-overlay:not(.active){display:none!important;visibility:hidden!important;height:0!important;position:absolute!important;left:-9999px!important}
  .report-body{padding:0.5in!important;background:#0a0a0f!important;color:#fff!important}
  .report-hero{background:#0a0a0f!important;text-align:center!important;padding:24px 0!important;border-bottom:2px solid #4facfe!important;page-break-after:avoid!important}
  .report-hero-logo{width:80px!important;height:80px!important;margin:0 auto 16px!important}
  .report-hero h1{font-size:24px!important;color:#4facfe!important;margin:8px 0!important;font-weight:700!important}
  .report-hero p{color:#aaa!important;font-size:14px!important}
  .card{background:#1a1a24!important;border:2px solid #333!important;border-radius:12px!important;padding:16px!important;margin:16px 0!important;color:#fff!important;page-break-inside:avoid!important}
  .report-section{background:transparent!important;margin:20px 0!important;page-break-inside:avoid!important}
  .report-section-title{color:#fff!important;font-size:18px!important;font-weight:700!important;margin:16px 0 12px!important;padding-bottom:8px!important;border-bottom:2px solid #4facfe!important;page-break-after:avoid!important}
  .report-section-title i{color:#4facfe!important;margin-right:8px!important}
  .report-summary-card{background:#1a1a24!important;border:2px solid #4facfe!important;border-radius:12px!important;padding:20px!important;margin:16px 0!important;page-break-inside:avoid!important}
  .report-summary-card h4{color:#fff!important;font-size:16px!important;text-align:center!important;margin-bottom:16px!important}
  .report-summary-stats{display:flex!important;justify-content:space-around!important;gap:16px!important}
  .report-stat{text-align:center!important}
  .report-stat-value{font-size:32px!important;font-weight:700!important;margin-bottom:4px!important}
  .report-stat-value.good{color:#00e676!important}
  .report-stat-value.warning{color:#ffab00!important}
  .report-stat-value.bad{color:#ff5252!important}
  .report-stat-label{color:#aaa!important;font-size:12px!important;text-transform:uppercase!important}
  .report-finding{background:#1a1a24!important;border-radius:8px!important;padding:12px!important;margin:8px 0!important;display:flex!important;gap:12px!important;page-break-inside:avoid!important}
  .report-finding.good{border-left:4px solid #00e676!important}
  .report-finding.warning{border-left:4px solid #ffab00!important}
  .report-finding.bad{border-left:4px solid #ff5252!important}
  .report-finding-icon{color:#4facfe!important;font-size:20px!important}
  .report-finding-title{color:#fff!important;font-weight:700!important;margin-bottom:4px!important}
  .report-finding-description{color:#bbb!important;font-size:14px!important}
  .field-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:12px!important}
  .field-grid div{color:#fff!important}
  .field-grid strong{color:#4facfe!important;font-weight:600!important}
  .photo-report-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:16px!important;margin:16px 0!important;page-break-inside:avoid!important}
  .photo-report-card{border:2px solid #333!important;border-radius:12px!important;overflow:hidden!important;background:#1a1a24!important;page-break-inside:avoid!important;break-inside:avoid!important}
  /* iter34.11: drop fixed aspect-ratio + object-fit:cover so full photos render
     uncropped on the printed page. Cap height instead so two photos still fit
     side-by-side without overflow. */
  .photo-report-image{background:#0a0a14!important;overflow:visible!important;max-height:3in!important;page-break-inside:avoid!important;break-inside:avoid!important}
  .photo-report-image img{width:100%!important;height:auto!important;max-height:3in!important;object-fit:contain!important;display:block!important}
  .photo-report-caption{padding:12px!important;color:#ccc!important;font-size:13px!important;line-height:1.5!important;background:rgba(79,172,254,0.08)!important;border-top:1px solid rgba(79,172,254,0.2)!important}
  .photo-report-item{border:2px solid #333!important;border-radius:8px!important;overflow:hidden!important;background:#1a1a24!important;page-break-inside:avoid!important}
  .photo-report-item img{width:100%!important;height:auto!important;display:block!important}
  p,div,span{color:#fff!important}
  strong{color:#4facfe!important}
  .report-action-btn,.report-close-btn,button{display:none!important}
}
@media(max-width:768px){.field-grid{grid-template-columns:1fr}.measure-grid{grid-template-columns:1fr}.report-summary-stats{grid-template-columns:1fr}.floating-menu{bottom:var(--spacing-md);right:var(--spacing-md)}.inv-row{grid-template-columns:1fr 70px 60px}}

/* Responsive Design for All Reports Section */
@media(max-width:1024px){
  /* Tablet: 3-column grid */
  .report-card-grid{grid-template-columns:1.5fr 1fr auto!important}
  .report-service-col{display:none!important}
}

@media(max-width:768px){
  /* Mobile: Stack layout */
  .report-filter-bar-grid{grid-template-columns:1fr!important;gap:var(--spacing-sm)!important;align-items:stretch!important}
  .report-card-grid{grid-template-columns:1fr!important;gap:var(--spacing-sm)!important}
  .report-card-mobile-stack{display:flex!important;flex-direction:column!important;gap:8px!important}
  .report-service-col{display:block!important}
  .report-tech-date-col{display:flex!important;justify-content:space-between!important;align-items:center!important}
  .report-view-btn{width:100%!important;margin-top:var(--spacing-sm)!important}
  /* iter34.119: tighten the cushion between the admin-dashboard chrome
     (persona banner + Menu/Clock-In nav) and the active tab content on
     mobile. The defaults were tuned for desktop and stacked to ~150-180px
     of empty space on phones. */
  #admin-dashboard{padding:var(--spacing-md)!important;}
  #admin-dashboard > div:first-of-type{padding:var(--spacing-md)!important;margin-bottom:var(--spacing-md)!important;}
  #admin-dashboard > div:nth-of-type(2){margin-bottom:var(--spacing-md)!important;padding-bottom:var(--spacing-sm)!important;}
  .admin-tab-content{padding:var(--spacing-sm) 0 !important;}
  /* iter34.120: drawer goes full-width on phones so the menu reads as a real modal nav. */
  #admin-menu-drawer{width:100vw!important;max-width:100vw!important;border-left:none!important;}
  /* iter34.120b: same rule applies up to 480px (the original rule lives
     inside max-width:768px, but on viewports between 480-768 the wider
     360px drawer reads fine). Belt-and-suspenders override below. */
}
@media(max-width:480px){
  #admin-menu-drawer{width:100vw!important;max-width:100vw!important;border-left:none!important;}
}

@media(max-width:480px){
  /* Small mobile: Compact everything */
  .report-filter-pills{gap:4px!important}
  .report-filter-btn{padding:5px 10px!important;font-size:11px!important}
  .admin-tab-content{padding:var(--spacing-md)!important;display:flex;justify-content:center;align-items:flex-start;}
  .admin-tab-content > *{max-width:800px;width:100%;}
  .hide-mobile{display:none!important;}
  .show-mobile{display:inline!important;}
}
@media (min-width:768px){
  .hide-mobile{display:inline!important;}
  .show-mobile{display:none!important;}
}

/* Authentication & Admin Styles */
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.admin-tab{transition:all var(--transition-fast)}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;margin:2px 0;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;text-align:left;transition:all var(--transition-fast);}
.menu-item:hover{background:rgba(79,172,254,0.08);border-color:rgba(79,172,254,0.25);}
.menu-item.active{background:rgba(79,172,254,0.14);border-color:var(--accent-blue);color:var(--text-primary);font-weight:700;}
.menu-item i{width:18px;color:var(--accent-blue);font-size:14px;}
.admin-tab:hover{color:var(--text-primary)!important}
.admin-tab.active{border-bottom-color:var(--accent-blue)!important;color:var(--text-primary)!important}
/* iter34.50 — tech tabs share visual chrome with admin tabs */
.tech-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;min-height:44px;transition:all var(--transition-fast);}
.tech-tab i{font-size:12px;}
.tech-tab:hover{color:var(--text-primary);}
.tech-tab.active{border-bottom-color:var(--accent-blue);color:var(--text-primary);}
.tech-tab-content:not(.hidden){animation:ff-slide-up 0.28s cubic-bezier(.2,.85,.3,1) both;}

/* ===== iter32.2: Native-app feel animations ============================= */
/* All CSS-only, no JS dependencies. Honors prefers-reduced-motion. */

@keyframes ff-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ff-scale-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ff-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ff-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ff-slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ff-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ff-pop-in { 0% { opacity: 0; transform: scale(0.85); } 70% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ff-toast-in { 0% { opacity: 0; transform: translateY(-24px) scale(0.96); } 60% { opacity: 1; transform: translateY(2px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
@keyframes ff-checkmark-draw { 0% { stroke-dasharray: 0 40; } 100% { stroke-dasharray: 40 0; } }
@keyframes ff-shimmer-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

/* --- 1. Screen transitions: fade the whole app-container in when it becomes active --- */
.app-container:not(.hidden) { animation: ff-fade-in 0.32s cubic-bezier(.2,.8,.25,1) both; }

/* --- 2. Modal choreography --- */
.ff-modal-overlay { animation: ff-fade-in 0.24s ease both; }
.ff-modal-overlay > div:first-child,
.ff-modal-card { animation: ff-scale-in 0.28s cubic-bezier(.2,.9,.3,1.15) both; transform-origin: center center; }
@media (max-width: 520px) {
  .ff-modal-overlay > div:first-child,
  .ff-modal-card { animation: ff-sheet-up 0.34s cubic-bezier(.2,.8,.3,1) both; }
}

/* --- 3. Button press feedback (native tap-down) --- */
.press-fx,
.workflow-btn,
button.workflow-btn,
.menu-item,
.admin-tab,
.tech-user-card,
.card,
.location-card,
.notif-tab,
.notif-summary-card,
.notif-reset-card,
.floating-menu-item,
button:not([disabled]) {
  /* iter34.69: faster, GPU-accelerated transitions so taps feel instant. */
  transition: transform 0.08s cubic-bezier(.3,.8,.4,1), box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* iter34.231: cards and card-like containers were previously listed here,
   which caused a visual glitch on mobile — every touch (including scroll
   gestures that start on top of a card) activates :active until the finger
   lifts, so the whole card visibly pulsed shrink/enlarge as if the entire
   page were a button being tapped. Only elements the user *intends* to
   tap (buttons, tabs, menu items, opt-in .press-fx) keep the scale.
   Cards can opt in by adding class="press-fx" (or nesting a real button). */
.press-fx:active,
button:not([disabled]):active,
.workflow-btn:not([disabled]):active,
.menu-item:active,
.admin-tab:active,
.floating-menu-item:active {
  transform: scale(0.97);
  transition-duration: 0.04s;
}

/* --- 4. Card hover lift (desktop only; mobile uses :active) --- */
@media (hover: hover) and (pointer: fine) {
  .tech-user-card:hover,
  .location-card:hover,
  .notif-summary-card:hover,
  .card.hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.25), 0 0 0 1px rgba(79,172,254,0.25);
  }
}

/* --- 5. Stagger reveal for lists, cards, grids --- */
[data-ff-stagger] > * { animation: ff-slide-up 0.28s cubic-bezier(.2,.85,.3,1) both; }
[data-ff-stagger] > *:nth-child(1)  { animation-delay: 0.00s; }
[data-ff-stagger] > *:nth-child(2)  { animation-delay: 0.025s; }
[data-ff-stagger] > *:nth-child(3)  { animation-delay: 0.05s; }
[data-ff-stagger] > *:nth-child(4)  { animation-delay: 0.075s; }
[data-ff-stagger] > *:nth-child(5)  { animation-delay: 0.10s; }
[data-ff-stagger] > *:nth-child(6)  { animation-delay: 0.125s; }
[data-ff-stagger] > *:nth-child(7)  { animation-delay: 0.15s; }
[data-ff-stagger] > *:nth-child(8)  { animation-delay: 0.175s; }
[data-ff-stagger] > *:nth-child(9)  { animation-delay: 0.20s; }
[data-ff-stagger] > *:nth-child(n+10) { animation-delay: 0.22s; }

/* --- 6. Admin tab crossfade --- */
.admin-tab-content:not(.hidden) { animation: ff-slide-up 0.28s cubic-bezier(.2,.85,.3,1) both; }
/* iter34.5: force grid layout on dash-charts (inline style was being clobbered) */
#dash-charts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important; }
@media (max-width: 880px) { #dash-charts { grid-template-columns: 1fr !important; } }
/* iter34.6: cross-app mobile polish — unified breakpoint at 720px so the whole
   admin surface (dispatch board, job modal, customers, chart cards, KPI strip)
   respects the same compact layout rules instead of each tab inventing its own. */
@media (max-width: 720px) {
  /* Universal: any "card" we use has consistent compact padding + radius. */
  .admin-tab-content > * { padding: var(--spacing-md) !important; border-radius: var(--radius-md) !important; }
  .admin-tab-content h2 { font-size: 18px !important; line-height: 1.25 !important; }
  /* Header strip with Command Center / location pill / Logout. */
  #admin-dashboard > .admin-greeting,
  #admin-dashboard .admin-header-row { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  /* Job modal — grid rows of two side-by-side fields collapse to one column. */
  #job-modal form > div[style*="grid-template-columns:1fr 1fr"],
  #job-modal form > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Dispatch Board chip rows — keep tappable but tight. */
  #db-view-chips, #db-range-chips { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .db-view-chip, .db-range-chip { min-height: 36px; }
  /* Chart cards take full width and a bit more vertical breathing room. */
  #dash-charts svg { height: 180px !important; max-width: 100% !important; }
  /* Compact KPI strip — 2-up on phones instead of 4 squished cells. */
  #dash-bento { grid-template-columns: repeat(2, 1fr) !important; }
  /* Calendar internals already use overflow:auto — make sure scrollbars stay visible-on-touch. */
  #dispatch-board-body { -webkit-overflow-scrolling: touch; overflow-x: hidden !important; }
  /* iter34.13: clamp the day-pill / agenda content to the viewport so horizontal
     scroll lives ONLY inside the dedicated scroller pill rows — nothing else. */
  #dispatch-board-body section,
  #dispatch-board-body > div { max-width: 100% !important; box-sizing: border-box; }
  /* The day-pill row uses negative margins to allow edge bleed — keep its scroll
     container clamped to its parent so it never escapes off the right of the screen. */
  #dispatch-board-body > div[style*="overflow-x:auto"],
  #dispatch-board-body > div[style*="overflow-x: auto"] {
    max-width: calc(100vw - 24px) !important;
    overscroll-behavior-x: contain;
  }
  /* Hard rule: nothing inside the dispatch board may push the page wider on phones. */
  #admin-tab-dispatch-board, #admin-tab-dispatch-board * { max-width: 100%; }
  /* Chip in tech-multi looks better full-width on tap. */
  #job-tech-add { font-size: 14px !important; min-height: 40px; }

  /* iter34.10: ===== iOS-ready modal + Customers + Dispatch polish ===== */

  /* Modals — pure full-screen sheet on phones (no awkward 16px gutter). */
  .ff-modal-overlay { padding: 0 !important; align-items: stretch !important; }
  .ff-modal-card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    display: flex !important;
    flex-direction: column !important;
    /* Honor the iOS safe areas (notch + home-indicator). */
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  .ff-modal-card > div[data-modal-body], .ff-modal-card [data-modal-body="true"] {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 24px !important;
  }
  /* Modal header — sticky, tappable, flush. */
  .ff-modal-card > div:first-child {
    padding: 14px 16px !important;
    border-radius: 0 !important;
  }
  .ff-modal-card h3 { font-size: 17px !important; }
  /* Any inner grid inside a modal collapses to single-column on phones. */
  .ff-modal-card [style*="grid-template-columns:1fr 1fr"],
  .ff-modal-card [style*="grid-template-columns: 1fr 1fr"],
  .ff-modal-card [style*="grid-template-columns:repeat(auto-fit,minmax(180px"],
  .ff-modal-card [style*="grid-template-columns:repeat(auto-fit,minmax(220px"],
  .ff-modal-card [style*="grid-template-columns:repeat(auto-fit,minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  /* Buttons inside a modal footer/CTA row stack full-width for thumbs. */
  .ff-modal-card .workflow-btn,
  .ff-modal-card button[class*="workflow-btn"] { min-height: 48px !important; flex: 1 1 100% !important; }
  /* Inputs inside modals — bigger tap targets on iOS. */
  .ff-modal-card input, .ff-modal-card select, .ff-modal-card textarea {
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  .ff-modal-card textarea { min-height: 100px !important; }

  /* ===== Customers tab ===== */
  /* Title row + search/new-customer pile vertically. */
  #admin-tab-customers .admin-greeting,
  #admin-tab-customers > div > div[style*="display:flex"][style*="justify-content"] {
    flex-direction: column !important; align-items: stretch !important; gap: 10px !important;
  }
  #customers-search { width: 100% !important; max-width: 100% !important; }
  /* The 2-pane list+detail layout collapses to a stack — list scrolls inline,
     detail is below until a customer is tapped. */
  #customers-list-wrap { grid-template-columns: 1fr !important; }
  #customers-list { max-height: none !important; }
  #customer-detail { min-height: auto !important; }

  /* ===== Dispatch board / inventory list cards — also unify. ===== */
  #admin-tab-dispatch-board > div:first-child,
  #admin-tab-shop-inventory > div:first-child,
  #admin-tab-inventory-items > div:first-child,
  #admin-tab-van-inventory > div:first-child,
  #admin-tab-billing > div:first-child,
  #admin-tab-locations > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* Inventory tables become stacked cards — each row gets row-style padding. */
  #admin-tab-inventory-items table,
  #admin-tab-shop-inventory table { font-size: 13px; }
  #admin-tab-inventory-items table th,
  #admin-tab-inventory-items table td,
  #admin-tab-shop-inventory table th,
  #admin-tab-shop-inventory table td {
    padding: 10px 6px !important;
  }
  /* Auto-fit grids that target 280px+ minmax break on a 414px screen — nudge to single col. */
  [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(260px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(420px"] {
    grid-template-columns: 1fr !important;
  }

  /* Top header strip — wrap nicer when there's a notification bell + location pill + logout. */
  .admin-greeting { font-size: 14px !important; }

  /* Touch-friendly buttons across the app. */
  button, .workflow-btn { min-height: 44px; }
}

/* ===== iOS notch / home-indicator safe areas — ALL viewports. ===== */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* --- 7. Menu / notif drawer entrance polish --- */
.notif-drawer.open { animation: ff-scale-in 0.26s cubic-bezier(.2,.85,.3,1.1) both; }
@media (max-width: 520px) {
  .notif-drawer.open { animation: ff-sheet-up 0.32s cubic-bezier(.2,.85,.3,1) both; }
}

/* --- 8. Input focus pulse --- */
input:not([disabled]):focus,
textarea:not([disabled]):focus,
select:not([disabled]):focus {
  box-shadow: 0 0 0 3px rgba(79,172,254,0.22) !important;
  border-color: var(--accent-blue) !important;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

/* --- 9. Toast / banner bounce-in (anything with data-ff-toast) --- */
[data-ff-toast] { animation: ff-toast-in 0.42s cubic-bezier(.2,.85,.3,1.3) both; }

/* --- 10. Icon micro-animations on hover --- */
@media (hover: hover) {
  .workflow-btn:hover:not([disabled]) i.fa-arrow-right,
  .workflow-btn:hover:not([disabled]) i.fa-arrow-up-right-from-square { transform: translateX(2px); transition: transform 0.2s ease; }
  .press-fx:hover i.fa-arrow-up-right-from-square { transform: translate(2px, -2px); transition: transform 0.2s ease; }
  .workflow-btn:hover:not([disabled]) i.fa-chevron-down { transform: translateY(1px); transition: transform 0.2s ease; }
}

/* --- 11. Shimmer / skeleton loaders --- */
.ff-skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); }
.ff-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(79,172,254,0.12) 50%, transparent 100%); animation: ff-shimmer-sweep 1.4s infinite; }

/* --- 12. Checkmark / success pulse --- */
.ff-success-pulse { animation: ff-pop-in 0.44s cubic-bezier(.2,.85,.3,1.25) both; }

/* --- 13. Login screen entrance --- */
#login-screen:not(.hidden) > div { animation: ff-scale-in 0.5s cubic-bezier(.2,.85,.3,1.1) both; }

/* --- 14. Respect accessibility preferences --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .press-fx:active,
  button:active { transform: none !important; }
}
/* --- Vehicle restock sheet: keep grid compact on narrow screens --- */
@media (max-width: 480px) {
  .vrs-grid { grid-template-columns: minmax(0,1fr) 36px 28px 28px 44px !important; gap: 4px !important; }
  .vrs-grid > div { font-size: 12px !important; }
  .vrs-container { padding: var(--spacing-sm) !important; }
}

/* iter34.152 / iter34.160: Inventory pages mobile polish ------------------- */
@media (max-width: 768px) {
  /* Tighter outer padding on every inventory + transfers + export + parts-used surface */
  #admin-tab-van-inventory,
  #admin-tab-shop-inventory,
  #admin-tab-transfers,
  #admin-tab-inventory-export {
    padding: 0 !important;
  }
  #admin-tab-van-inventory > div:first-child,
  #admin-tab-shop-inventory > div:first-child,
  #admin-tab-transfers > div,
  #admin-tab-inventory-export > div {
    padding: 12px !important;
  }
  /* iter34.160 — force the title + actions to stack vertically. The previous
     rule kept the title row as a horizontal flex, which on narrow phones
     squeezed the heading + description into a 1-character-wide column. */
  #admin-tab-van-inventory > div:first-child > div:first-child,
  #admin-tab-shop-inventory > div:first-child > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  /* Title block — full width, larger heading, no maxwidth squeeze on description */
  #admin-tab-van-inventory > div:first-child > div:first-child > div:first-child,
  #admin-tab-shop-inventory > div:first-child > div:first-child > div:first-child {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }
  #admin-tab-van-inventory h2,
  #admin-tab-shop-inventory h2 { font-size: 18px !important; line-height: 1.25 !important; word-break: normal !important; }
  #admin-tab-van-inventory h2 + p,
  #admin-tab-shop-inventory h2 + p { font-size: 12px !important; max-width: none !important; }
  /* Top-right action buttons (Quick-add, Manage Categories, Add Vehicle/Location) become full-width row of equal pills */
  #admin-tab-van-inventory > div:first-child > div:first-child > div:last-child,
  #admin-tab-shop-inventory > div:first-child > div:first-child > div:last-child {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #admin-tab-van-inventory > div:first-child > div:first-child > div:last-child > button,
  #admin-tab-shop-inventory > div:first-child > div:first-child > div:last-child > button {
    min-height: 44px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    justify-content: center;
  }
  /* Per-vehicle / per-shop accordion details (manage vehicles, manage shop locations) */
  #admin-tab-van-inventory details > .card,
  #admin-tab-shop-inventory details > .card,
  #admin-tab-van-inventory > div > details.card,
  #admin-tab-shop-inventory > div > details.card {
    padding: 12px !important;
  }
}
@media (max-width: 640px) {
  /* Parts Used report modal — convert table to stacked cards */
  #parts-used-report-modal table thead { display: none; }
  #parts-used-report-modal table,
  #parts-used-report-modal tbody,
  #parts-used-report-modal tr,
  #parts-used-report-modal td { display: block; width: 100%; }
  #parts-used-report-modal tr {
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-elevated);
  }
  #parts-used-report-modal td {
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 13px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  #parts-used-report-modal td:nth-child(1)::before { content: 'Date'; }
  #parts-used-report-modal td:nth-child(2)::before { content: 'Customer'; }
  #parts-used-report-modal td:nth-child(3)::before { content: 'Part'; }
  #parts-used-report-modal td:nth-child(4)::before { content: 'Qty'; }
  #parts-used-report-modal td:nth-child(5)::before { content: 'Workflow'; }
  #parts-used-report-modal td::before {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  #parts-used-report-modal td:nth-child(3) { font-weight: 700; color: var(--text-primary); }
}

/* --- Platform admin: polished row + filter chip states --- */
.pf-filter-chip { transition: background 0.15s ease, color 0.15s ease; }
@media (hover: hover) {
  .pf-filter-chip:not(.active):hover { background: rgba(79,172,254,0.1) !important; color: var(--text-primary) !important; }
  .pf-company-row:hover { border-color: rgba(79,172,254,0.45) !important; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
}
.pf-company-row { transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease; }
@media (max-width: 960px) {
  .pf-growth-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  .pf-company-row { grid-template-columns: 1fr !important; gap: var(--spacing-sm) !important; }
  .pf-company-row > div:nth-child(n+2):nth-child(-n+5) { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--border-color); }
  .pf-company-row > div:nth-child(n+3):nth-child(-n+5) > div:first-child { font-size: 11px !important; }
  .pf-company-row .company-card-actions { justify-self: stretch !important; }
  .pf-company-row .company-card-actions button:first-child { flex: 1; }
}
@media (max-width: 520px) {
  .pf-btn-label { display: none; }
}
/* ===== end iter32.2 ===== */
/* iter34.82: Tech Dashboard Phase 2 responsive bits — widget grid collapses
   to 1 column on mobile/tablet (≤900px). Bottom tab bar appears ≤820px. */
@media (max-width: 900px) {
  [data-testid="tech-widgets-row"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 820px) {
  #tech-dashboard { padding-bottom: 80px !important; }
  #tech-bottom-tab-bar { display: flex !important; }
  /* iter34.104: hide the secondary tech-tab strip on mobile — the bottom
     tab bar handles all navigation. Avoids the duplicate-nav UX issue
     reported on iPhone where techs saw two stacked tab bars. */
  #tech-tab-strip { display: none !important; }
}
#tech-bottom-tab-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 15, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-color);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  justify-content: space-around;
  align-items: stretch;
}
#tech-bottom-tab-bar button {
  flex: 1; min-width: 0;
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px; gap: 2px;
  color: var(--text-muted); font-size: 10px; font-weight: 600;
}
#tech-bottom-tab-bar button.active { color: var(--accent-blue); }
#tech-bottom-tab-bar button i { font-size: 18px; line-height: 1; }
.tech-timeline-row { position: relative; padding: 10px 0 10px 26px; }
.tech-timeline-row::before {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 2px; background: var(--border-color);
}
.tech-timeline-row:first-child::before { top: 50%; }
.tech-timeline-row:last-child::before  { bottom: 50%; }
.tech-timeline-row .tech-timeline-dot {
  position: absolute; left: 0; top: 12px; width: 16px; height: 16px;
  border-radius: 50%; border: 3px solid var(--bg-elevated); z-index: 1;
}
.tech-timeline-row .tech-time { font-size: 11px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.04em; }
.tech-timeline-row .tech-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.tech-timeline-row .tech-addr { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tech-timeline-row .tech-status { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }