/*
  ML Software, LLC
  Copyright 2026. All rights reserved.

  JobQuote IQ | app.jobquoteiq.com
  assets/css/app.css

  Created : 2026-04-22
  Updated : 2026-04-25
  Version : 1.9.7

  Version History
    1.9.7 - 2026-04-25 : Finished namespace migration. Renamed remaining
                         #jq-* ID selectors to #iq-*. The 1.9.6 pass only
                         caught class selectors (.jq-*) and missed ID
                         selectors, leaving #jq-root unmatched after JS
                         emitted iq-root, which broke the entire root
                         grid layout (login showed full-bleed unstyled).
    1.9.6 - 2026-04-25 : Namespace migration. All .jq-* selectors renamed
                         to .iq-* to match window.IQ JS namespace adoption.
                         150 selector renames, no rule logic changes.
    1.9.5 - 2026-04-25 : Modal infrastructure (.iq-modal-*), .iq-form-row
                         utility, select chevron coverage on .form-input,
                         badge rename manager to admin / viewer to user.
    1.9.4 - 2026-04-25 : Badge rename: .settings-team-badge-manager to
                         -admin, -viewer to -user.
    1.9.3 - 2026-04-23 : Sortable column headers in Quotes table.
    1.9.2 - 2026-04-23 : Dashboard Action filter pills bumped for legibility.
    1.9.1 - 2026-04-23 : Dashboard KPI cards unified with Quotes status tiles.
    1.9.0 - 2026-04-23 : Job Board adopts pinned-layout pattern (.j-page).
    1.8.3 - 2026-04-23 : Quotes pinned layout (.q-page) + footer redesign.
    1.8.2 - 2026-04-23 : Quotes status-strip tiles bumped for glanceability.
    1.8.1 - 2026-04-23 : Kanban column header bumped + drawer status pill
                         repositioned.
    1.8.0 - 2026-04-23 : Shop-floor legibility pass + drawer header rebuild
                         (.status-pill family).
    1.7.x - 2026-04-23 : Drawer flex-column structural fix; tall content
                         now scrolls correctly.
    1.7.0 - 2026-04-23 : Job Board kanban CSS appended.
    1.6.2 - 2026-04-23 : Drawer close button rebuilt (44px tap target).
    1.6.1 - 2026-04-23 : Drawer + backdrop offset by --topbar-h.
    1.6.0 - 2026-04-23 : Nav icons switched from CSS-mask to inline SVG.
    1.5.0 - 2026-04-23 : Quotes list view CSS + .iq-toast--error rules.
    1.4.0 - 2026-04-23 : KPI + pipeline refresh; --pipe-* jewel palette.
    1.3.0 - 2026-04-22 : Dashboard view CSS appended.
    1.2.1 - 2026-04-22 : Topbar flame accent strip restored.
    1.2.0 - 2026-04-22 : Grid topology: topbar full-width on top, sidebar
                         and main below.
    1.1.0 - 2026-04-22 : Grid topology rework + brand/user-meta/topbar-titles
                         selectors.
    1.0.0 - 2026-04-22 : Initial version.
*/

/* -- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; color-scheme: dark; }
button, [role="button"], a { touch-action: manipulation; }

/* -- Variables -------------------------------------------------------------- */
:root {
  /* Surface stack -- darkest at base, lightest at top (from design files) */
  --bg-base:      #0d0d0f;
  --bg-surface:   #16161a;
  --bg-raised:    #1c1c22;
  --bg-overlay:   #222228;

  /* Borders */
  --border:       #2a2a32;
  --border-light: #333340;

  /* Status colors (semantic, used selectively) */
  --green:        #4cff91;
  --yellow:       #ffc832;
  --red:          #ff6450;
  --crimson:      #7a0000;
  --crimson-text: #ffaaaa;
  --blue:         #64a0ff;
  --orange:       #ff9c3a;
  --purple:       #b464ff;

  /* Text */
  --text-primary:   #f0f0f4;
  --text-secondary: #b0b0c4;
  --text-dim:       #7a7a94;

  /* Layout */
  --sidebar-w:  220px;
  --topbar-h:   64px;
  --radius:     6px;
  --radius-lg:  10px;

  /* Typography */
  --font-ui:      'Inter', sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Flame accent palette -- the JobQuote IQ identity (from design files) */
  --accent:       #ff6b1a;
  --accent-light: #ff8533;
  --accent-deep:  #cc4f0a;
  --accent-dim:   rgba(255, 107, 26, 0.18);
  --accent-bord:  rgba(255, 107, 26, 0.35);

  /* Pipeline palette -- rich metallic jewel tones for dashboard pipeline strip + mini-stages. Job Board kanban uses the brighter status tokens. */
  --pipe-new:   #1e5a8a;  /* rich cobalt steel   -- saturated industrial blue */
  --pipe-prog:  #c77a1a;  /* hot brass / copper  -- molten forge work */
  --pipe-done:  #2d7a3e;  /* bottle green        -- deep saturated emerald */
  --pipe-ship:  #6b3a7a;  /* forged plum         -- rich aubergine */

  /* Legacy compat for any RIQ blocks that reference --amber */
  --amber:        var(--accent);
  --amber-dim:    var(--accent-deep);

  --amber-glow:   var(--accent-dim);
}


/* -- Base ------------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* -- Layout ----------------------------------------------------------------- */
#iq-root {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height - handles mobile browser chrome */
  overflow: hidden;
}

/* When showing login, root switches from grid to flex centering */
#iq-root:has(.iq-login-wrap) {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* iOS safe area - pushes content below status bar when launched from home screen */
@supports (padding-top: env(safe-area-inset-top)) {
  #iq-root {
    padding-top: env(safe-area-inset-top);
  }
  .iq-sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .iq-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* -- Sidebar ---------------------------------------------------------------- */
.iq-sidebar {
  grid-column: 1;
  grid-row: 2;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.22s ease;
  z-index: 200;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* When brand is inside topbar, give it a visual separator on the right
   side and consistent left padding so it aligns with the sidebar width. */
.topbar-brand {
  width: var(--sidebar-w);
  padding-left: 18px;
  margin-left: -24px; /* cancel topbar's outer padding so width is exact */
  margin-right: 4px;
  border-right: 1px solid var(--border);
  height: 100%;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.brand-mark svg {
  width: 30px;
  height: 30px;
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 0;
}

.brand-iq {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-left: 3px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 20px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-left: 3px solid transparent;
  margin: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.nav-item:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.04);
}

.nav-item.active {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-left-color: var(--accent);
}

.nav-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-dim);
  /* Stroke color inherits from .nav-item via currentColor on the SVG.
     Sized to match the design file (18x18 inside a 24-viewBox). */
}
.nav-item:hover  .nav-icon { color: var(--text-primary); }
.nav-item.active .nav-icon { color: var(--accent); }

.nav-section {
  padding: 8px 16px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
}

.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb, 26,111,255), 0.18);
  color: var(--accent-light, #4d8fff);
}

/* Legacy CSS-mask nav icons removed in app.css v1.6.0. */

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.user-initials {
  width: 28px;
  height: 28px;
  background: var(--accent-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-light);
  flex-shrink: 0;
}

.user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.user-company {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 1px;
}

.btn-logout {
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.btn-logout:hover { color: var(--red); border-color: var(--red); }

/* -- Main area -------------------------------------------------------------- */
.iq-main {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* -- Topbar ----------------------------------------------------------------- */
.iq-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 24px;
  padding-right: max(24px, env(safe-area-inset-right));
  gap: 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 100;
}

/* Flame accent strip across the bottom edge of the topbar. Carries the JobQuote IQ identity color across the full width. Same pattern as RIQ and DZiq, tuned to the flame palette. */
.iq-topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent-light) 35%,
    var(--accent-dim) 70%,

    transparent 100%);
  pointer-events: none;
}

.topbar-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.page-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.1;
}

.page-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

.topbar-spacer { flex: 1; }

.topbar-action {
  display: flex;
  align-items: center;
  gap: 10px;
}



.topbar-brand {
  display: flex;
  align-items: center;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  padding: 0 12px 0 12px;
  flex-shrink: 0;
  overflow: hidden;
}

.topbar-left  { display: flex; align-items: center; gap: 16px; border-left: 1px solid var(--border); padding-left: 16px; }

.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
}
.topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* -- Connection status badge -- */
.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cff91;
  flex-shrink: 0;
  transition: background 0.3s;
  box-shadow: 0 0 0 2px rgba(76,255,145,0.2);
}

.conn-dot--offline {
  background: #ff6450;
  box-shadow: 0 0 0 2px rgba(255,100,80,0.2);
}


.conn-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ff6450;
  text-transform: uppercase;
  display: none;
}

.conn-label--visible {
  display: block;
}

.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-light);
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
}
.topbar-avatar:hover {
  background: var(--accent);
  color: #fff;
}
.topbar-avatar:active {
  transform: scale(0.92);
}
.topbar-avatar.refreshing {
  animation: avatar-spin 0.6s linear;
}
@keyframes avatar-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.location-switcher {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-ui);
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
}

.location-switcher:focus { border-color: var(--amber); }

/* -- Content ---------------------------------------------------------------- */
.iq-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  background: var(--bg-base);
}

/* -- Login ------------------------------------------------------------------ */
.iq-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-base);
  padding: 24px;
  box-sizing: border-box;
}

.iq-login-box {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.brand-mark-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.brand-mark-lg svg { width: 60px; height: 60px; display: block; }

.brand-text-wrap { display: flex; flex-direction: column; gap: 2px; }
.brand-tag-lg {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.brand-name-lg {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* -- Forms ------------------------------------------------------------------ */
.form-group  { margin-bottom: 16px; }
.form-row    { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  padding: 8px 12px;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.12s;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

.form-select,
select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' stroke='rgba(240,240,244,0.85)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-input:focus,
.form-input:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-textarea:focus,
.form-textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--amber);
}

.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.form-input::placeholder { color: var(--text-dim); }

/* Kill browser autofill yellow */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-raised) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}

/* Hide Firefox password reveal/lock icon */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-moz-password-reveal { display: none; }
input[type="password"] { -moz-appearance: none; }

.form-textarea { resize: vertical; min-height: 80px; }

.form-error {
  background: rgba(255, 100, 80, 0.12);
  border: 1px solid rgba(255, 100, 80, 0.3);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* -- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--amber); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--amber-dim); }

.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-light); }
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border); background: var(--bg-raised); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #e0503e; }

.btn-block { width: 100%; }
.btn-sm    { padding: 5px 10px; font-size: 13px; }

/* -- Badges ----------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--green  { background: rgba(76,  255, 145, 0.12); color: var(--green);  }
.badge--yellow { background: rgba(255, 200,  50, 0.12); color: var(--yellow); }
.badge--red    { background: rgba(255, 100,  80, 0.12); color: var(--red);    }
.badge--orange { background: rgba(255, 156,  58, 0.12); color: var(--orange); }
.badge--blue   { background: rgba(26,  111, 255, 0.15); color: var(--amber);   }
.badge--purple { background: rgba(180, 100, 255, 0.12); color: var(--purple); }
.badge--gray   { background: rgba(144, 144, 168, 0.12); color: var(--text-secondary); }

/* -- Tables ----------------------------------------------------------------- */
.iq-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.iq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.iq-table thead tr {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

.iq-table th {
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.iq-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.iq-table tbody tr:last-child td { border-bottom: none; }
.iq-table tbody tr:hover          { background: var(--bg-raised); }
.iq-table tbody tr.clickable      { cursor: pointer; }

/* -- Cards ------------------------------------------------------------------ */
.iq-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.iq-card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* -- Stat grid -------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-value.blue   { color: var(--amber);   }
.stat-value.green  { color: var(--green);  }
.stat-value.yellow { color: var(--yellow); }
.stat-value.red    { color: var(--red);    }

/* -- Section header --------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.section-title {


  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.section-actions { display: flex; gap: 8px; align-items: center; }

/* -- Utilities -------------------------------------------------------------- */
.iq-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-light);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.iq-empty,
.iq-error-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: var(--text-dim);
  font-size: 14px;
}

.iq-error-block { color: var(--red); }

.iq-init-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--red);
}

/* -- Toast ------------------------------------------------------------------ */
.iq-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}


/* Non-error toasts slide down from top-right */
.iq-toast:not(.iq-toast--error) {
  transform: translateY(-8px);
}
.iq-toast:not(.iq-toast--error).iq-toast--visible {
  transform: translateY(0);
}
.iq-toast--visible  { opacity: 1; }
.iq-toast--success  { background: var(--green); color: #0a1a10; }
.iq-toast--info     { background: var(--bg-overlay); color: var(--text-primary); border: 1px solid var(--border-light); }

/* Error toasts: true center-screen blocking alert, click-to-dismiss. Added in v1.5.0 -- the RIQ port dropped this block, leaving the stub comment but no rules. */
.iq-toast--error {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.94);
  max-width: 560px;
  width: calc(100vw - 48px);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  padding: 28px 32px;
  border-radius: 14px;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  background: #0d0d0f;
  color: #fff;
  border: 1.5px solid rgba(255, 100, 80, 0.7);
  box-shadow:
    inset 0 0 40px rgba(255, 100, 80, 0.12),
    0 0 0 1px rgba(255, 100, 80, 0.2),
    0 0 32px rgba(255, 100, 80, 0.3),
    0 0 80px rgba(255, 100, 80, 0.12),
    0 16px 48px rgba(0, 0, 0, 0.9);
}
.iq-toast--error.iq-toast--visible {
  transform: translate(-50%, -50%) scale(1);
}


/* ===== RENEWAL IQ -- PERMIT DASHBOARD COMPONENTS ===== */

/* -- Stat cards --------------------------------------------------------------- */
.iq-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 0;
  gap: 12px;
  margin-bottom: 28px;
}

.iq-stat {
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid var(--border);
}

/* Option C -- tinted card backgrounds per urgency state */
.iq-stat--expired   { background: rgba(224,32,32,0.22); border-color: rgba(224,32,32,0.6); }
.iq-stat--critical  { background: rgba(224,32,32,0.12); border-color: rgba(224,32,32,0.3); }
.iq-stat--expiring  { background: rgba(255,200,50,0.16); border-color: rgba(255,200,50,0.45); }
.iq-stat--compliant { background: rgba(76,255,145,0.08); border-color: rgba(76,255,145,0.2); }
.iq-stat--total     { background: rgba(37,99,235,0.1);  border-color: rgba(37,99,235,0.25); }

.iq-stat-label {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
  line-height: 1.3;
  font-family: var(--font-display);
  font-weight: 600;
}

.iq-stat-val {
  font-family: var(--font-display);

  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.iq-stat-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
}

.stat-green   { color: #4cff91; }
.stat-blue    { color: #f0f0f4; }
.stat-yellow  { color: #f0f0f4; }
.stat-red     { color: #f0f0f4; }
.stat-crimson { color: #f0f0f4; }
.stat-dim     { color: var(--text-dim); }

/* -- Section header ---------------------------------------------------------- */
.iq-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.iq-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: var(--font-display);
}

.iq-btn-add {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s;
  white-space: nowrap;
}

.iq-btn-add:hover { background: rgba(217, 119, 6, 0.25); }

@media (pointer: coarse) {
  .iq-btn-add { padding: 10px 18px; font-size: 14px; }
}

/* -- Group labels ------------------------------------------------------------ */
.iq-group-label {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius);
  margin: 16px 0 10px;
}

.iq-group-label--red {
  background: var(--red);
  color: #fff;
}

.iq-group-label--yellow {
  background: var(--yellow);
  color: #1a1a1a;
}

.iq-group-label--green {
  background: #1f6e3a;
  color: #e0ffe0;
}

.iq-group-label--gray {
  background: #2d1f4e;
  color: #e0d8f8;
  border: none;
}

/* -- Expired group label -- dark crimson + diagonal stripes right side + pulse dot -- */
.iq-group-label--crimson {
  background: var(--crimson);
  color: var(--crimson-text);
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Diagonal stripes full width -- barber pole animation */
.iq-group-label--crimson::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(0,0,0,0.12) 6px,
    rgba(0,0,0,0.12) 11px
  );
  background-size: 15.56px 15.56px;
  animation: jq-stripe-scroll 1.2s linear infinite;
  pointer-events: none;
}

@keyframes jq-stripe-scroll {
  from { background-position: 0 0; }
  to   { background-position: 15.56px 15.56px; }
}

/* Pulsing alert dot -- sits left of label text */
.iq-alert-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--crimson-text);
  display: inline-block;
  animation: jq-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes jq-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.55); }
}

.urgbar-crimson { background: var(--crimson); }
.badge-crimson  { background: rgba(122,0,0,0.35); color: var(--crimson-text); }

/* -- Permit cards ------------------------------------------------------------ */
.iq-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.iq-card {
  background: var(--bg-raised);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.iq-card:hover {
  border-color: var(--border-light);
  background: var(--bg-overlay);
}

.iq-urgbar {
  width: 4px;
  min-width: 4px;
  height: 52px;
  border-radius: 2px;
  flex-shrink: 0;
}

.urgbar-red    { background: var(--red); }
.urgbar-yellow { background: var(--yellow); }
.urgbar-green  { background: var(--green); }
.urgbar-gray   { background: rgba(255,255,255,0.1); }

.iq-pulse {
  animation: jq-pulse 1.5s ease-in-out infinite;
}

@keyframes jq-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.iq-card-body {
  flex: 1;
  min-width: 0;
}

.iq-card-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iq-card-meta {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 4px;
}

.iq-card-right {
  text-align: right;
  flex-shrink: 0;
  min-width: 100px;
}

.iq-card-days {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
}

.days-red    { color: var(--red); }
.days-yellow { color: var(--yellow); }
.days-dim    { color: var(--text-dim); }

.iq-card-loc {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* -- Urgency badges ---------------------------------------------------------- */
.iq-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: 0.2px;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.badge-red    { background: rgba(255,100,80,0.12);  color: var(--red); }
.badge-yellow { background: rgba(255,200,50,0.12);  color: var(--yellow); }
.badge-green  { background: rgba(76,255,145,0.10);  color: var(--green); }
.badge-gray   { background: rgba(255,255,255,0.06); color: var(--text-dim); }

/* Plan status badge -- larger, used in billing tab */
.badge-plan {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.badge-plan.badge-green  { background: rgba(76,255,145,0.12); color: var(--green);   border-color: rgba(76,255,145,0.25); }
.badge-plan.badge-yellow { background: rgba(255,200,50,0.12); color: var(--yellow);  border-color: rgba(255,200,50,0.25); }
.badge-plan.badge-red    { background: rgba(255,100,80,0.12); color: var(--red);     border-color: rgba(255,100,80,0.25); }
.badge-plan.badge-gray   { background: rgba(255,255,255,0.06); color: var(--text-dim); border-color: var(--border); }

/* Billing tab -- plan options grid */
.settings-plan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.settings-plan-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  background: var(--bg-raised);
}

.settings-plan-option:hover {
  border-color: var(--border-light);
}

.settings-plan-option.current {
  border-color: var(--accent);
  background: rgba(217,119,6,0.08);
  cursor: default;
}

.settings-plan-option-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.settings-plan-option.current .settings-plan-option-name {
  color: var(--accent);
}

.settings-plan-option-price {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 4px;
}

.settings-plan-option-limits {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.settings-plan-option-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
}

/* Billing info banner (trial notice) */
.settings-info-banner {
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* Cancellation warning */
.settings-cancel-warning {
  background: rgba(255,100,80,0.07);
  border: 1px solid rgba(255,100,80,0.2);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (pointer: coarse) {
  .settings-plan-options { grid-template-columns: 1fr; }
}

/* -- Tooltip system ---------------------------------------------------------- */
.iq-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 5px;
  border-radius: 50%;
  transition: color 0.12s;
  flex-shrink: 0;
}

.iq-tip-icon:hover,
.iq-tip-icon:focus {
  color: var(--accent);
  outline: none;
}

.iq-tooltip-bubble {
  display: none;
  position: absolute;
  z-index: 9000;
  max-width: 300px;
  background: #1e1e26;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: auto;
  transition: opacity 0.1s;
}

/* -- Permit notes field ------------------------------------------------------ */
.iq-notes-wrap {
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.iq-notes-label {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.iq-notes-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  min-height: 40px;
  cursor: pointer;
  white-space: pre-wrap;
  word-break: break-word;
  transition: color 0.12s;
}

.iq-notes-text.empty {
  color: var(--text-dim);
  font-style: italic;
}

.iq-notes-text:hover { color: var(--text-primary); }

.iq-notes-textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
  line-height: 1.6;

  padding: 10px 12px;
  min-height: 100px;
  resize: vertical;
  outline: none;
}

.iq-notes-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.iq-notes-save {
  height: 36px;
  padding: 0 18px;
  background: var(--accent);
  color: #0d0d0f;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s;
}

.iq-notes-save:hover    { background: var(--amber-dim); }
.iq-notes-save:disabled { opacity: 0.5; cursor: not-allowed; }

.iq-notes-cancel {
  height: 36px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.iq-notes-cancel:hover { color: var(--text-primary); }

.iq-notes-char {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  text-align: right;
}

.iq-notes-char.warn { color: var(--yellow); }

/* -- Empty state ------------------------------------------------------------- */
.iq-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-dim);
}

.iq-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

.iq-empty-sub {
  font-size: 13px;
  color: var(--text-dim);
  display: block;
}

/* -- Dashboard empty state -------------------------------------------------- */
.iq-empty-state {
  text-align: center;
  padding: 64px 24px 48px;
  max-width: 420px;
  margin: 0 auto;
}

.iq-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.2);
  margin: 0 auto 24px;
}

.iq-empty-state-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.iq-empty-state-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}

.iq-empty-state-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  touch-action: manipulation;
}

.iq-empty-state-btn:hover { opacity: 0.88; }

/* -- Location dropdown (DZiq pattern) --------------------------------------- */
.topbar-dz {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: background 0.12s;
  user-select: none;
  position: relative;
}

.topbar-dz:hover { background: rgba(255,255,255,0.06); }

.topbar-dz strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}


.dz-dropdown-caret {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}

.dz-location-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 16px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 200px;
  z-index: 300;
  overflow: hidden;
}

.dz-location-dropdown.open { display: block; }

.dz-loc-option {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.dz-loc-option:hover   { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.dz-loc-option.is-active { color: var(--accent); font-weight: 600; }

/* -- Hamburger menu toggle -- hidden on desktop, shown on touch via pointer:coarse */
.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;

}


/* ===== TABLET & MOBILE -- Copied directly from DZiq app.css proven pattern. ===== */

/* -- Tablet/touch: sidebar hidden, slides in from left ---------------------- */
/* -- Sidebar location block (mobile only) ----------------------------------- */
.sidebar-loc-block {
  display: none;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Trigger row -- shows active location name + caret */
.sidebar-loc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s;
  min-height: 56px;
}

.sidebar-loc-trigger:hover,
.sidebar-loc-trigger:active {
  background: rgba(255,255,255,0.04);
}

.sidebar-loc-trigger-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sidebar-loc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sidebar-loc-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-loc-caret {
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.18s;
}

/* Inline dropdown -- hidden until .open */
.sidebar-loc-dropdown {
  display: none;
  flex-direction: column;
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
}

.sidebar-loc-dropdown.open {
  display: flex;
}

.sidebar-loc-opt {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
  min-height: 48px;
  display: flex;
  align-items: center;
  touch-action: manipulation;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sidebar-loc-opt:last-child { border-bottom: none; }

.sidebar-loc-opt:hover,
.sidebar-loc-opt:active {
  background: rgba(217,119,6,0.1);
  color: var(--text-primary);
}

.sidebar-loc-opt.active {
  color: var(--accent);
  font-weight: 700;
}

.sidebar-loc-opt.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  flex-shrink: 0;
}


@media (pointer: coarse) {
  /* Collapse sidebar column to zero -- sidebar floats over content */
  #iq-root {
    grid-template-columns: 0 1fr !important;
  }

  /* Sidebar slides in from left as a fixed overlay */
  .iq-sidebar {
    position: fixed !important;
    top: env(safe-area-inset-top, 0);
    left: 0;
    height: calc(100% - env(safe-area-inset-top, 0px));
    width: var(--sidebar-w);
    transform: translateX(-100%) !important;
    z-index: 200;
  }

  .iq-sidebar.open { transform: translateX(0) !important; }

  /* Show hamburger on touch devices */
  .btn-menu-toggle { display: flex !important; }

  /* Show location block in sidebar on mobile */
  .sidebar-loc-block { display: block; }

  .iq-content { padding: 16px; }
}

/* -- Sidebar overlay (tap outside to close) --------------------------------- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.active { display: block; }

/* -- Portrait phone/tablet (<=768px) ---------------------------------------- */
@media (max-width: 768px) and (pointer: coarse) {
  .iq-stats { grid-template-columns: repeat(3, 1fr); }  /* already 3 on desktop */
  .topbar-dz strong { font-size: 14px; }
  .dz-location-dropdown { min-width: 160px; }
}

/* -- Small phone (<=480px) -------------------------------------------------- */
@media (max-width: 480px) {
  .iq-stats { grid-template-columns: 1fr; }

  /* Hide location label on small phones -- just logo + hamburger */
  .topbar-left   { display: none !important; }
  .topbar-right  { margin-left: auto; }
  .iq-topbar    { padding: 0 12px 8px; gap: 10px; }
  .btn-menu-toggle { font-size: 22px; padding: 6px; }
}

/* -- Tap delay elimination -------------------------------------------------- */
a,
button,
.btn,
.nav-item,
.btn-logout,
.btn-menu-toggle,
.pm-btn,
.pm-table-row,
.iq-card,
.dz-loc-option,
[role="button"] {
  touch-action: manipulation;
}

/* -- Minimum tap targets: 44px ---------------------------------------------- */
.btn        { min-height: 44px; padding: 10px 18px; }
.btn-sm     { min-height: 38px; padding: 8px 12px; }
.nav-item   { min-height: 44px; padding: 12px 20px; }
.btn-logout { min-height: 44px; padding: 10px; }
.pm-btn     { min-height: 48px; }
.pm-table-row { min-height: 60px; }
.iq-card   { min-height: 64px; }

.btn-menu-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
  align-items: center;
  justify-content: center;
}

/* -- iOS auto-zoom fix: all inputs >= 16px ---------------------------------- */
/* iOS zooms viewport if focused input font-size < 16px                        */
.form-input,
.form-select,
.form-textarea,
.pm-modal-input,
.pm-modal-textarea,
.pm-search,
input[type="date"],
input[type="time"],
input[type="number"],
input[type="text"],
select {
  font-size: 16px;
}

/* iOS Safari: date inputs ignore box-sizing without explicit appearance reset */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Restore 14px-15px on desktop only */
@media (min-width: 1025px) {
  .form-input,
  .form-select,
  .form-textarea,
  .pm-modal-input,
  .pm-modal-textarea,
  .pm-search {
    font-size: 15px;
  }
}

/* -- Active state feedback (touch has no hover) ----------------------------- */
@media (hover: none) {
  .iq-card:active       { background: var(--bg-overlay); }
  .pm-table-row:active   { background: rgba(255,255,255,0.04); }
  .nav-item:active       { background: rgba(255,255,255,0.06); }
  .dz-loc-option:active  { background: rgba(255,255,255,0.06); }
}

/* ===== SETTINGS VIEW ===== */

/* --- Layout --- */

.settings-wrap {
  padding: 28px 32px;
  max-width: 780px;
}

.settings-header {
  margin-bottom: 20px;
}

.settings-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.settings-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.settings-tab-bar::-webkit-scrollbar {
  display: none;
}

.settings-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.settings-tab:hover {
  color: var(--text-primary);
}

.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-tab-content {
  /* Content rendered by JS */
}

/* --- Section + Card --- */

.settings-section {
  margin-bottom: 28px;
}

.settings-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.settings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

/* --- Fields --- */

.settings-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.settings-field-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 3px;
}

.settings-note {
  font-size: 13px;
  color: var(--text-dim);
  margin: 8px 0 0;
}

/* --- Actions row --- */

.settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* --- Confirm bar (inline, not native dialog) --- */

.settings-confirm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.settings-confirm-msg {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}

/* Inline confirm inside a row (notification remove) */

.settings-inline-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* --- Info banner (trial, etc.) --- */

.settings-info-banner {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 20px;
}

/* --- Plan display --- */

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

.settings-plan-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.settings-plan-limits {
  font-size: 13px;
  color: var(--text-dim);
}

/* --- Locations --- */

.settings-loc-card {
  margin-bottom: 12px;
}

.settings-loc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.settings-loc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.settings-loc-meta {
  font-size: 13px;
  color: var(--text-dim);
}

.settings-loc-slug-row {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-slug-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.settings-slug-link:hover {
  text-decoration: underline;
}

.settings-dim {
  color: var(--text-dim);
}

/* Edit form spacing */

.settings-loc-edit .form-row {
  margin-bottom: 0;
}

.settings-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Slug section inside edit form */

.settings-slug-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.settings-slug-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0 10px;
}

.settings-slug-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-slug-input {
  flex: 1;
}

.settings-slug-error {
  font-size: 12px;
  color: var(--red);
  margin-top: 6px;
}

/* Add location block */

.settings-add-block {
  margin-top: 12px;
}

.settings-add-form {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 10px;
}

.settings-limit-note {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* --- Notifications --- */

.settings-notif-intro {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.settings-recipients-card {
  padding: 0;
  overflow: hidden;
}

.settings-recipient-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.settings-recipient-row:last-child {
  border-bottom: none;
}

.settings-recipient-row.settings-recipient-inactive {
  opacity: 0.45;
}

/* .settings-recipient-email now inside .settings-recipient-email-wrap above */

.settings-recipient-type-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}

.settings-recipient-type-to {
  background: rgba(217, 119, 6, 0.15);
  color: var(--accent);
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.settings-recipient-type-cc {
  background: rgba(77, 143, 255, 0.12);
  color: #4d8fff;
  border: 1px solid rgba(77, 143, 255, 0.25);
}

.settings-recipient-type-bcc {
  background: rgba(240, 240, 244, 0.07);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Recipient row layout updates for phone + channel */

.settings-recipient-email-wrap {
  flex: 1;
  min-width: 0;
}

.settings-recipient-email {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-all;
}

.settings-recipient-phone {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.settings-recipient-note {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 2px;
}

.settings-recipient-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Channel badge */

.settings-recipient-channel-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}

.settings-recipient-channel-email {
  background: rgba(240, 240, 244, 0.07);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.settings-recipient-channel-sms {
  background: rgba(76, 255, 145, 0.1);
  color: var(--green);
  border: 1px solid rgba(76, 255, 145, 0.25);
}

.settings-recipient-channel-both {
  background: rgba(77, 143, 255, 0.12);
  color: #4d8fff;
  border: 1px solid rgba(77, 143, 255, 0.25);
}

/* Location delete button row */

.settings-loc-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.settings-loc-confirm {
  margin-top: 10px;
}

/* Compliance slug URL display row */

.settings-slug-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.settings-slug-url-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-family: var(--font-mono, monospace);
}

.settings-slug-url-input:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-slug-url-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

/* Slug inline editor row (DZiq pattern) */

.settings-slug-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  width: 100%;
}

.settings-slug-prefix {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.settings-slug-inline-input {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.settings-slug-editor-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.settings-slug-msg {
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.4;
}

@media (pointer: coarse) {
  .settings-slug-url-row { flex-direction: column; align-items: stretch; }
  .settings-slug-url-row .btn { min-height: 44px; }
  .settings-slug-editor-row { flex-wrap: wrap; }
  .settings-slug-inline-input { max-width: 100%; }
}

.settings-recipient-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.settings-empty-recipients {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--text-dim);
}

.settings-add-recipient-form .settings-actions {
  margin-top: 12px;
}

/* --- Toast --- */

.settings-toast {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  animation: settings-toast-in 0.2s ease;
}

.settings-toast-success {
  background: rgba(76, 255, 145, 0.1);
  border: 1px solid rgba(76, 255, 145, 0.25);
  color: var(--green);
}

.settings-toast-error {
  background: rgba(224, 32, 32, 0.1);
  border: 1px solid rgba(224, 32, 32, 0.25);
  color: var(--red);
}

@keyframes settings-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Loading / error states --- */

.settings-loading,
.settings-error {
  padding: 60px 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.settings-error {
  color: var(--red);
}

/* --- Mobile --- */

@media (pointer: coarse) {
  .settings-wrap {
    padding: 20px 16px;
  }

  .settings-tab {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .settings-field-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-field-row .btn {
    width: 100%;
    min-height: 44px;
  }

  .settings-loc-header {
    flex-direction: column;
  }

  .settings-loc-btns {
    width: 100%;
  }

  .settings-loc-btns .btn {
    flex: 1;
    min-height: 44px;
  }

  .settings-plan-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-form-actions {
    flex-direction: column;
  }

  .settings-form-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .settings-slug-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-slug-row .btn {
    min-height: 44px;
  }

  .settings-recipient-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .settings-recipient-actions {
    width: 100%;
  }

  .settings-recipient-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  .settings-confirm-bar,
  .settings-inline-confirm {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-confirm-bar .btn,
  .settings-inline-confirm .btn {
    width: 100%;
    min-height: 44px;
  }
}


/* -- Team tab ---------------------------------------------------------------- */

.settings-team-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.settings-team-row:last-child {
  border-bottom: none;
}

.settings-team-row-inactive {
  opacity: 0.5;
}

.settings-team-info {
  flex: 1;
  min-width: 0;
}

.settings-team-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-team-email {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-team-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.settings-team-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.settings-team-badge-owner {
  background: rgba(217,119,6,0.15);
  color: var(--accent);
}

.settings-team-badge-admin {
  background: rgba(76,255,145,0.1);
  color: var(--green);
}

.settings-team-badge-user {
  background: rgba(144,144,168,0.12);
  color: var(--text-secondary);
}

.settings-team-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.settings-team-role-select {
  width: auto;
  min-width: 110px;
  height: 32px;
  font-size: 13px;
  padding: 0 10px;
}

.settings-team-confirm {
  width: 100%;
  margin-top: 8px;
}

.settings-team-limit {
  display: inline-block;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 8px;
}

.settings-team-role-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
}

.settings-team-role-hint strong {
  color: var(--text-secondary);
}

.settings-upgrade-prompt {
  text-align: center;
  padding: 32px 24px;
}

.settings-upgrade-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.settings-upgrade-msg {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.settings-upgrade-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

@media (pointer: coarse) {
  .settings-team-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .settings-team-actions {
    flex-wrap: wrap;
  }

  .settings-team-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  .settings-team-role-select {
    min-height: 44px;
    font-size: 16px;
    flex: 1;
  }
}

/* -- Support tab ------------------------------------------------------------- */

.settings-support-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.settings-support-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

.settings-support-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.settings-support-value {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.settings-support-sub {
  font-size: 12px;
  color: var(--text-dim);
}

.settings-support-result {
  font-size: 13px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(76,255,145,0.08);
  border-radius: var(--radius);
}

/* -- Legal modal button ------------------------------------------------------ */

.settings-legal-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  touch-action: manipulation;
}

.settings-legal-btn:hover { text-decoration: underline; }

/* -- Sidebar copyright ------------------------------------------------------- */

.sidebar-copyright {
  padding: 8px 16px 4px;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.5;
  letter-spacing: 0.03em;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}


/* ===== JOBQUOTE IQ ADDITIONS ===== */

/* -- Chrome/Edge/Safari autofill override (dark-theme inputs) ------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-base) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s;
}

/* -- Mono font for badges + numerics (per design files) ------------------- */
.nav-badge {
  font-family: var(--font-mono);
}

/* Empty section-divider used before Help nav item to give it breathing room. */
.nav-section-help {
  padding-top: 18px;
}


/* ===== DASHBOARD VIEW (design-2) ===== */

.greeting {
  margin-bottom: 24px;
}
.greet-h {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.greet-h .em { color: var(--accent); }
.greet-sub {
  font-size: 14.5px;
  color: var(--text-secondary);
}

/* Top KPI strip */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.kpi::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 107, 26, 0.04), transparent 70%);
  pointer-events: none;
}
.kpi-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.kpi-val {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-primary);
  line-height: 1;
}
.kpi-val .unit { font-size: 20px; color: var(--text-dim); font-weight: 500; margin-left: 4px; }
.kpi-delta {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi-delta.down { color: var(--red); }

/* Semantic KPI color variants. */
.kpi-flame .kpi-val { color: var(--accent); }
.kpi-blue  .kpi-val { color: var(--pipe-new); }
.kpi-green .kpi-val { color: var(--pipe-done); }
.kpi-spark {
  height: 36px;
  margin-top: 10px;
  opacity: 0.6;
}
.kpi-spark path { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.kpi-spark .fill { fill: var(--accent); opacity: 0.15; stroke: none; }

/* Two-column content: left = big action feed, right = side widgets */
.layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
}

/* Attention panel - the heart of the dashboard */
.attention {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.panel-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.panel-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-left: 2px;
}
.panel-spacer { flex: 1; }
.tab-pills {
  display: flex;
  gap: 5px;
  background: var(--bg-base);
  padding: 5px;
  border-radius: 10px;
}
.tab-pill {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 7px;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, color 0.12s;
}
.tab-pill:hover { color: var(--text-primary); }
.tab-pill.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.tab-pill .n {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
}

/* Action-item rows */
.action-list { padding: 6px 0; }
.action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.action:last-child { border-bottom: none; }
.action:hover { background: var(--bg-raised); }

.action-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.action-icon svg { width: 18px; height: 18px; }
.action-icon.urgent { background: rgba(255, 100, 80, 0.15); color: var(--red); border: 1px solid rgba(255, 100, 80, 0.3); }
.action-icon.ready { background: rgba(76, 255, 145, 0.12); color: var(--green); border: 1px solid rgba(76, 255, 145, 0.3); }
.action-icon.hot { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-bord); }
.action-icon.review { background: rgba(255, 200, 50, 0.12); color: var(--yellow); border: 1px solid rgba(255, 200, 50, 0.3); }
.action-icon.info { background: rgba(100, 160, 255, 0.12); color: var(--blue); border: 1px solid rgba(100, 160, 255, 0.3); }

.action-body { flex: 1; min-width: 0; }
.action-line1 {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-line1 b { font-weight: 700; }
.action-line2 {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.action-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.action-amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.action-cta {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
}
.action-cta.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0a00;
}
.action-cta:hover { background: var(--bg-raised); color: var(--text-primary); }
.action-cta.primary:hover { background: var(--accent-light); }

/* Pipeline mini-snapshot */
.pipeline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.pipe-bar {
  height: 12px;
  background: var(--bg-base);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
  margin: 12px 0 14px;
}
.pipe-seg {
  height: 100%;
  position: relative;
}
.pipe-seg.new  { background: var(--pipe-new);  }
.pipe-seg.prog { background: var(--pipe-prog); }
.pipe-seg.done { background: var(--pipe-done); }
.pipe-seg.ship { background: var(--pipe-ship); }
.pipe-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.pipe-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.pipe-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pipe-dot.new  { background: var(--pipe-new);  }
.pipe-dot.prog { background: var(--pipe-prog); }
.pipe-dot.done { background: var(--pipe-done); }
.pipe-dot.ship { background: var(--pipe-ship); }
.pipe-lbl {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-dim);
}
.pipe-n {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 13px;
}
.pipe-amt {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Revenue card */
.rev-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.rev-amt {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.01em;
  margin: 10px 0 4px;
}
.rev-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.rev-chart {
  height: 90px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.rev-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent-light), var(--accent-deep));
  border-radius: 2px 2px 0 0;
  opacity: 0.8;
  transition: opacity 0.15s;
  cursor: pointer;
  min-height: 3px;
}
.rev-bar:hover { opacity: 1; }
.rev-bar.today { opacity: 1; box-shadow: 0 0 0 1px var(--accent-light); }
.rev-days {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* Jobs-by-stage mini kanban */
.mini-stages {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.stage-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.stage-row:hover { border-color: var(--border-light); }
.stage-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stage-row.new  .dot { background: var(--pipe-new);  }
.stage-row.prog .dot { background: var(--pipe-prog); }
.stage-row.done .dot { background: var(--pipe-done); }
.stage-row.ship .dot { background: var(--pipe-ship); }
.stage-row .lbl {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.stage-row .cnt {
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 12px;
}
.stage-row .amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Design label */
.design-label {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(13,13,15,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  padding: 6px 16px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  pointer-events: none;
}
.design-label b { color: var(--accent); }

/* Scrollbars */

/* ===== QUOTES LIST VIEW  (design-3-quotes-list.html) ===== */

/* -- Status strip ----------------------------------------------------------- */
.status-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.status-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  position: relative;
  overflow: hidden;
}
.status-tile:hover { border-color: var(--border-light); }
.status-tile.active {
  background: var(--accent-dim);
  border-color: var(--accent-bord);
}
.status-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tile-color, var(--border));
}
.status-tile.draft    { --tile-color: var(--text-dim); }
.status-tile.sent     { --tile-color: var(--blue); }
.status-tile.viewed   { --tile-color: var(--accent); }
.status-tile.accepted { --tile-color: var(--green); }
.status-tile.lost     { --tile-color: var(--red); }
.status-tile.all      { --tile-color: var(--text-secondary); }
.st-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.status-tile.active .st-label { color: var(--accent); }
.st-count {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.st-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
}


/* -- Toolbar row ------------------------------------------------------------ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.select {
  height: 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 0 28px 0 12px;
  border-radius: 6px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237a7a94' stroke-width='1.8'><polyline points='4 6 8 10 12 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px;
  cursor: pointer;
}
.toolbar-spacer { flex: 1; }


/* -- Table wrap, sticky header, body scroll --------------------------------- */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tbl thead {
  background: var(--bg-base);
  position: sticky;
  top: 0;
  z-index: 5;
}
.tbl th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl th.rt { text-align: right; }
.tbl th.sortable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: color 0.12s, background 0.12s;
}
.tbl th.sortable:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.02); }
.tbl th .sort-arrow {
  margin-left: 4px;
  color: var(--text-dim);
  font-size: 10px;
  opacity: 0;           /* hidden by default; only active column shows it */
  transition: opacity 0.12s;
}
.tbl th.sortable:hover .sort-arrow { opacity: 0.4; color: var(--text-secondary); }
.tbl th.active { color: var(--text-primary); }
.tbl th.active .sort-arrow { color: var(--accent); opacity: 1; }
.tbl td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 13.5px;
  vertical-align: middle;
}
.tbl tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.tbl tbody tr:hover { background: var(--bg-raised); }
.tbl tbody tr.sel   { background: var(--accent-dim); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl-body-scroll {
  flex: 1;
  overflow-y: auto;
}


/* -- Row primitives --------------------------------------------------------- */
.chk {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-light);
  border-radius: 3px;
  background: var(--bg-base);
  display: inline-block;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}
.chk.on {
  background: var(--accent);
  border-color: var(--accent);
}
.chk.on::after {
  content: '';
  position: absolute;
  top: 2px; left: 5px;
  width: 4px; height: 8px;
  border: solid #1a0a00;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.q-no {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 12px;
}
.q-cust {
  color: var(--text-primary);
  font-weight: 600;
}
.q-title {
  color: var(--text-secondary);
  font-size: 12.5px;
  margin-top: 2px;
}


/* -- Status badge (reused by Jobs + Invoices later) ------------------------- */
.status-badge {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.sb.draft    { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--border); }
.sb.draft::before    { background: var(--text-dim); }
.sb.sent     { background: rgba(100, 160, 255, 0.12); color: var(--blue); border: 1px solid rgba(100, 160, 255, 0.3); }
.sb.sent::before     { background: var(--blue); }
.sb.viewed   { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-bord); }
.sb.viewed::before   { background: var(--accent); }
.sb.accepted { background: rgba(76, 255, 145, 0.12); color: var(--green); border: 1px solid rgba(76, 255, 145, 0.3); }
.sb.accepted::before { background: var(--green); }
.sb.lost     { background: rgba(255, 100, 80, 0.12); color: var(--red); border: 1px solid rgba(255, 100, 80, 0.3); }
.sb.lost::before     { background: var(--red); }


/* -- Opens column ----------------------------------------------------------- */
.opens-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.opens-cell .eye           { color: var(--text-dim); }
.opens-cell.hot .eye       { color: var(--accent); }
.opens-cell.hot            { color: var(--accent); font-weight: 600; }


/* -- Amount cell (right-aligned display treatment) -------------------------- */
.tbl td.amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-align: right;
}


/* -- Age cell --------------------------------------------------------------- */
.age-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}
.age-cell.warn   { color: var(--yellow); }
.age-cell.urgent { color: var(--red); font-weight: 600; }


/* -- Row action buttons (hover to reveal) ----------------------------------- */
.row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.12s;
}
.tbl tbody tr:hover .row-actions { opacity: 1; }
.ra-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 28px; height: 28px;
  border-radius: 5px;
  cursor: pointer;
  display: grid; place-items: center;
}
.ra-btn:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border-color: var(--border-light);
}
.ra-btn svg { width: 14px; height: 14px; }


/* -- Table footer ----------------------------------------------------------- */
.table-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-base);
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.foot-showing {
  font-size: 15px;
  color: var(--text-secondary);
}
.foot-spacer { flex: 1; }
.foot-total {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.foot-total .amt-val {
  color: var(--accent);
  margin-left: 12px;
  font-size: 19px;
  letter-spacing: 0;
}


/* --------------------------------------------------------------------------- Pinned-header. */
.iq-content-fixed {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.q-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 18px;
}
/* Null default bottom margins inside .q-page so the flex gap is the only vertical spacing contributor. Without this, .status-strip adds its 22px bottom margin on top of the 18px flex gap = 40px between strip and toolbar. */
.q-page .status-strip { flex-shrink: 0; margin-bottom: 0; }
.q-page .toolbar      { flex-shrink: 0; margin-bottom: 0; }
.q-page .table-wrap   {
  flex: 1;
  min-height: 0;
}

/* Mobile: tighten padding so the table has room. Matches the existing
   .iq-content { padding: 16px } override at the 900px breakpoint. */
@media (max-width: 900px) {
  .q-page { padding: 16px; gap: 14px; }
}


/* --------------------------------------------------------------------------- Job Board full. */
.j-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 18px;
}
.j-page .filters { flex-shrink: 0; margin-bottom: 0; }
.j-page .board {
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}

@media (max-width: 900px) {
  .j-page { padding: 16px; gap: 14px; }
}

/* At 1-col stacking, fall back to whole-page scroll. */
@media (max-width: 640px) {
  .iq-content-board {
    overflow-y: auto;
  }
  .iq-content-board .j-page {
    flex: 0 0 auto;
    min-height: auto;
  }
  .iq-content-board .board {
    flex: 0 0 auto;
    min-height: auto;
  }
  .iq-content-board .col-body {
    overflow-y: visible;
  }
}


/* ===== DRAWER  (shared by Quotes, Jobs, Invoices) ===== */

.drawer {
  position: fixed;
  top: var(--topbar-h);
  right: 0; bottom: 0;
  width: 540px;
  max-width: 100vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 50px rgba(0,0,0,0.5);
}
/* The drawer has an inner wrapper (#iq-q-drawer-inner or #iq-j-drawer-inner) that the view J. */
.drawer > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed;
  top: var(--topbar-h);
  right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
  z-index: 49;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

.drawer-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* Drawer header action buttons (close, refresh) -- right-aligned chunky pills with label. Ported from DZiq .mf-btn-close, sized up to 44px min-height per Platform Standards Section 22.5 (mobile tap target). */
.drawer-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.drawer-close:hover,
.drawer-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  outline: none;
}
.drawer-close svg { width: 16px; height: 16px; }

/* Legacy drawer-head-spacer is no longer used by drawer-head-v2 but kept
   for any stray callers. */
.drawer-head-spacer { flex: 1; }

/* --------------------------------------------------------------------------- Drawer head v2. */
.drawer-head-v2 {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px;
}
.drawer-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.drawer-head-main .status-pill {
  margin-top: 4px;
}
.drawer-head-side {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.drawer-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.drawer-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 0;
  line-height: 1.3;
}

/* Status pill -- solid status-color fill, white text. Sized to command attention on drawer open. Status color comes from the --pipe-* tokens so it matches the Kanban column + Dashboard Pipeline strip. */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 20px;
  border-radius: 22px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

/* Job statuses map to the --pipe-* palette. Complete uses pipe-done, which is bottle green; text stays white. Shipped uses pipe-ship (forged plum); in_progress uses pipe-prog (hot brass); new uses pipe-new (cobalt steel). */
.status-pill.sp-new         { background: var(--pipe-new); }
.status-pill.sp-in_progress { background: var(--pipe-prog); }
.status-pill.sp-complete    { background: var(--pipe-done); }
.status-pill.sp-shipped     { background: var(--pipe-ship); }

/* Quote statuses: draft is neutral, sent uses pipe-new (blue), viewed uses pipe-prog (brass -- implies heat/activity), accepted uses pipe-done (green), declined + expired share a muted red. */
.status-pill.sp-draft    { background: #55555f; }
.status-pill.sp-sent     { background: var(--pipe-new); }
.status-pill.sp-viewed   { background: var(--pipe-prog); }
.status-pill.sp-accepted { background: var(--pipe-done); }
.status-pill.sp-declined { background: #8a3b3b; }
.status-pill.sp-expired  { background: #5a4a3a; }
.status-pill.sp-lost     { background: #8a3b3b; }


/* -- Horizontal pipeline strip (Quote -> Job -> Invoice) -------------------- */
.pipe-strip {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: center;
  padding: 16px 24px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pipe-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.pipe-step-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-dim);
}
.pipe-step.done .pipe-step-icon {
  background: rgba(76, 255, 145, 0.15);
  border-color: var(--green);
  color: var(--green);
}
.pipe-step.active .pipe-step-icon {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.1);
}
.pipe-step-icon svg { width: 16px; height: 16px; }
.pipe-step-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pipe-step.active .pipe-step-label { color: var(--accent); }
.pipe-step.done   .pipe-step-label { color: var(--green); }
.pipe-connector {
  height: 2px;
  background: var(--border);
}
.pipe-connector.done { background: var(--green); }


/* -- Drawer body ------------------------------------------------------------ */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
}

/* Scope the drawer's section-title so it doesn't collide with the existing
   16px .section-title used elsewhere in RIQ-ported blocks. */
.drawer-body .section-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.drawer-body .section-title ~ .section-title { margin-top: 22px; }

.kv-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 18px;
  font-size: 15px;
  margin-bottom: 26px;
}
.kv-grid dt {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 3px;
}
.kv-grid dd { color: var(--text-primary); font-size: 15px; line-height: 1.35; }


/* -- Activity feed ---------------------------------------------------------- */
.activity {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
}
.act-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14.5px;
}
.act-item:last-child { border-bottom: none; }
.act-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  margin-top: 7px;
  flex-shrink: 0;
}
.act-item.hot .act-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.act-item.ok  .act-dot { background: var(--green); }
.act-body { flex: 1; }
.act-text { color: var(--text-secondary); line-height: 1.45; font-size: 14.5px; }
.act-text b { color: var(--text-primary); }
.act-time {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: 3px;
}


/* -- Line items table (inside drawer) --------------------------------------- */
.lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-bottom: 10px;
}
.lines-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
}
.lines-table th.rt { text-align: right; }
.lines-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
}
.lines-table td.rt {
  text-align: right;
  font-family: var(--font-mono);
}
.lines-table .desc-main { color: var(--text-primary); }
.lines-table .desc-sub  { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; }


/* -- Totals block ----------------------------------------------------------- */
.totals {
  margin-top: 20px;
  padding: 18px;
  background: var(--bg-raised);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.total-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--text-secondary);
  padding: 4px 0;
  font-family: var(--font-mono);
}
.total-row.grand {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}
.total-row.grand .n {
  color: var(--accent);
  font-family: var(--font-display);
}


/* -- Drawer footer ---------------------------------------------------------- */
.drawer-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}


/* ===== JOB BOARD KANBAN (jobs.js v1.0.0+) — added in app.css v1.7.0 ===== */

/* Filter chips row */
.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.filter-chip {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  touch-action: manipulation;
}
.filter-chip:hover {
  border-color: var(--border-light);
  color: var(--text-primary);
}
.filter-chip.active {
  background: var(--accent-dim);
  border-color: var(--accent-bord);
  color: var(--accent);
}
.filter-chip .count {
  background: var(--bg-overlay);
  padding: 1px 7px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
}
.filter-chip.active .count {
  background: rgba(255, 107, 26, 0.30);
  color: var(--accent-light);
}
.filter-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

/* Board grid */
.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  padding-bottom: 20px;
}

/* Column shell */
.col {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.col-head {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.col-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.col-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.col-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-base);
  padding: 4px 11px;
  border-radius: 12px;
}
.col-total {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.col-total b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.col-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}
.col-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  text-align: center;
}
.col-foot-link {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 8px;
  min-height: 32px;
  touch-action: manipulation;
  transition: color 0.12s;
}
.col-foot-link:hover {
  color: var(--accent);
}

/* Column accent dots — earthy palette per Matthew (stick with set palette) */
.col.new  .col-dot { background: var(--pipe-new); }
.col.prog .col-dot { background: var(--pipe-prog); }
.col.done .col-dot { background: var(--pipe-done); }
.col.ship .col-dot { background: var(--pipe-ship); }

/* Job card */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 13px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
  position: relative;
}
.card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}
.card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-bord), 0 4px 14px rgba(255, 107, 26, 0.15);
}
/* Rush jobs get a flame-tinted left edge so they pop in the column */
.card.is-rush {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

.card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.job-no {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  font-weight: 500;
}
.job-cust {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job-title {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}
.job-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

/* Due-date pill */
.due-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.due-badge.urgent {
  background: rgba(255, 100, 80, 0.15);
  color: var(--red);
  border: 1px solid rgba(255, 100, 80, 0.30);
}
.due-badge.soon {
  background: rgba(255, 200, 50, 0.12);
  color: var(--yellow);
  border: 1px solid rgba(255, 200, 50, 0.30);
}
.due-badge.ok {
  background: var(--bg-base);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* Card footer meta row */
.card-meta {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  align-items: center;
}
.tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-base);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.tag.flame {
  color: var(--accent);
  border-color: var(--accent-bord);
  background: var(--accent-dim);
}
.tag.warn {
  color: var(--yellow);
  border-color: rgba(255, 200, 50, 0.30);
  background: rgba(255, 200, 50, 0.10);
}

/* Assignee chips, right-aligned */
.assignees {
  margin-left: auto;
  display: flex;
}
.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg-raised);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  color: #1a0a00;
  display: grid;
  place-items: center;
  margin-left: -6px;
  flex-shrink: 0;
}
.avatar:first-child { margin-left: 0; }
.avatar.a { background: #8fd4ff; }
.avatar.b { background: #ffb347; }
.avatar.c { background: #bfa0ff; }

/* Tablet breakpoint -- 2-column kanban */
@media (max-width: 1100px) {
  .board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .board { grid-template-columns: 1fr; }
}

/* ===== JQ FORM ROW ===== */

.iq-form-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.iq-form-row .form-input,
.iq-form-row .form-select,
.iq-form-row select.form-input,
.iq-form-row .btn {
  height: 44px;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

.iq-form-row .form-input,
.iq-form-row .form-select,
.iq-form-row select.form-input {
  flex: 1 1 220px;
  min-width: 160px;
}

.iq-form-row .form-input--narrow,
.iq-form-row select.form-input--narrow {
  flex: 0 0 auto;
  width: auto;
  min-width: 140px;
}

.iq-form-row .btn {
  flex: 0 0 auto;
}


/* ===== JQ MODAL ===== */

body.iq-modal-open {
  overflow: hidden;
}

.iq-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9000;
  animation: jqModalFade 0.16s ease-out;
}

@keyframes jqModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.iq-modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: jqModalSlide 0.2s ease-out;
}

@keyframes jqModalSlide {
  from { transform: translateY(8px); opacity: 0.6; }
  to   { transform: translateY(0);   opacity: 1; }
}

.iq-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.iq-modal-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.iq-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}

.iq-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-raised);
}

.iq-modal-body {
  padding: 22px;
  overflow-y: auto;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.55;
}

.iq-modal-body p {
  margin: 0 0 14px 0;
}

.iq-modal-body p:last-child {
  margin-bottom: 0;
}

.iq-confirm-message {
  font-size: 15px;
  color: var(--text-primary);
  margin: 0 0 22px 0;
  line-height: 1.5;
}

.iq-confirm-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  flex-wrap: wrap;
}

.iq-confirm-actions .btn {
  height: 44px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
}


/* ---------------------------------------------------------------------------- Cancel-subscription modal: warning banner + acknowledgment checkbox ---------------------------------------------------------------------------- */

.iq-modal-warning {
  background: rgba(217, 87, 87, 0.08);
  border: 1px solid rgba(217, 87, 87, 0.4);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0 22px 0;
}

.iq-modal-warning-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--red);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.iq-modal-warning-body {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.55;
  margin: 0;
}

.iq-modal-warning-body strong {
  color: var(--text-primary);
  font-weight: 700;
}

.iq-modal-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0 22px 0;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

.iq-modal-ack input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}


@media (max-width: 480px) {
  .iq-modal {
    max-width: 100%;
  }
  .iq-confirm-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .iq-confirm-actions .btn {
    width: 100%;
  }
}