/* ============================================================
   PrairieOps — theme-v2.css
   Premium dark charcoal + bronze/copper identity
   Mobile-first: bottom tab bar, clean enterprise look
   ============================================================ */

/* Deep charcoal overscroll on iOS pull-down */
html, body { background: #111111; }
#dashboard  { background: var(--bg-app, #111111); }

/* ── 1. Palette overrides ────────────────────────────────────── */
:root {
  /* Pure charcoal — no blue tint */
  --bg-app:        #111111;
  --bg-surface:    #191919;
  --bg-elevated:   #202020;
  --bg-hover:      #272727;
  --bg-input:      #191919;

  /* Bronze/copper — brand identity only */
  --brand:         #c49060;
  --brand-mid:     #a07040;
  --brand-light:   #d4a878;
  --brand-bg:      #1c1208;
  --brand-border:  #4a3010;

  /* Borders — neutral, no blue */
  --border:        #2a2a2a;
  --border-subtle: #1e1e1e;
  --border-focus:  #c49060;

  /* Text — sunlight readable */
  --text-primary:   #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-muted:     #606060;
  --text-inverse:   #111111;

  /* Operational greens — muted, used sparingly */
  --green-500: #1e6b35;
  --green-400: #288442;
  --green-300: #3aa355;
  --green-100: #0d1f12;

  /* Priority — red ONLY for true urgent/breakdown */
  --urgent:        #e03535;
  --urgent-bg:     #1e0a0a;
  --urgent-border: #5a1515;

  --deadline:        #c07838;
  --deadline-bg:     #161008;
  --deadline-border: #3a2010;

  --eod:        #c49060;
  --eod-bg:     #1c1208;
  --eod-border: #4a3010;

  --eow:        #5b8dd9;
  --eow-bg:     #0c1828;
  --eow-border: #1e3458;

  --backlog:        #505050;
  --backlog-bg:     #181818;
  --backlog-border: #282828;

  /* Board identity */
  --board-field:  #1e5c26;
  --board-grain:  #7a5a10;
  --board-shop:   #1a3060;

  /* Status — muted, professional */
  --status-live:       #28844200;
  --status-claimed:    #3a6aaa;
  --status-progress:   #c07838;
  --status-signoff:    #c49060;
  --status-complete:   #28844200;
  --status-rejected:   #e03535;

  /* Role — subdued */
  --role-manager:  #9060c4;
  --role-foreman:  #4a7ec4;
  --role-crew:     #288442;
  --role-owner:    #c49060;  /* bronze — matches brand; Phase 2 / Owner-auth */

  /* Feedback */
  --success: #288442;
  --warning: #c49060;
  --danger:  #e03535;
  --info:    #4a7ec4;

  /* Flat shadows — no glow rings */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-lg:  0 4px 20px rgba(0,0,0,0.6);

  /* Tight radius — industrial, not bubbly */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-pill: 999px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}

/* ── 2. Base ─────────────────────────────────────────────────── */
body {
  background: var(--bg-app);
  color: var(--text-primary);
}

::-webkit-scrollbar-track  { background: var(--bg-app); }
::-webkit-scrollbar-thumb  { background: #3a3f4a; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #4a5060; }

::selection { background: rgba(196,144,96,0.25); }

/* ── 3. Topbar ───────────────────────────────────────────────── */
#topbar {
  background: #111111;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  height: 52px;
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 200;
}

.topbar-title    { color: var(--text-primary); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.topbar-subtitle { color: var(--text-muted); font-size: 12px; }

#btn-menu-toggle { color: var(--text-secondary); font-size: 22px; }
#btn-menu-toggle:hover { color: var(--text-primary); }
#btn-menu-toggle svg { stroke: currentColor; display: block; }

.notif-btn { color: var(--text-secondary); font-size: 22px; }
.notif-btn:hover { color: var(--text-primary); }
.notif-btn svg { stroke: currentColor; display: block; }

.notif-badge { background: var(--ios-red); border-color: #141414; }

/* Add task button — topbar (standard box, not pill — Phase 4) */
#topbar .btn.btn-primary.btn-sm,
.topbar .btn.btn-primary.btn-sm {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: transform 0.08s ease-out, background var(--transition-fast);
}
#topbar .btn.btn-primary.btn-sm:hover,
.topbar .btn.btn-primary.btn-sm:active { background: rgba(196, 144, 96, 0.12); }
/* Subtle press-in for tactility */
#topbar .btn.btn-primary.btn-sm:active,
.topbar .btn.btn-primary.btn-sm:active { transform: scale(0.96); }

/* ── 4. Sidebar — desktop ────────────────────────────────────── */
#sidebar {
  background: #111111;
  border-right: 1px solid var(--border);
  width: 220px;
  min-width: 220px;
}

.sidebar-logo {
  background: #111111;
  border-bottom: 1px solid var(--border);
  padding: 14px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.logo-monogram {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--brand-bg);
  border: 1.5px solid var(--brand-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--brand);
  letter-spacing: -0.5px;
}

.logo-text-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.sidebar-logo .logo-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logo .logo-sub {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
}

.sidebar-section-label { color: var(--text-muted); font-size: 11px; letter-spacing: 0.10em; }

.nav-item {
  margin: 2px 8px;
  width: calc(100% - 16px);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 15px;
  min-height: 44px;
  gap: 10px;
}

.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }

.nav-item.active {
  background: var(--brand-bg);
  color: var(--brand);
  font-weight: 600;
}

.nav-item.active::before {
  background: var(--brand);
  width: 3px;
  border-radius: 0 3px 3px 0;
  left: -8px;
}

.nav-item .nav-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-item .nav-icon svg { width: 20px; height: 20px; display: block; stroke: currentColor; transition: stroke 0.15s ease; }
.nav-item:hover .nav-icon svg { stroke: var(--text-primary); }
.nav-item.active .nav-icon svg { stroke: var(--brand); }

.sidebar-user { background: #141414; border-top: 1px solid var(--border); }
.sidebar-avatar { background: var(--brand-bg); border-color: var(--brand-border); color: var(--brand); }

#btn-logout { background: transparent; border-color: var(--border); color: var(--text-secondary); border-radius: var(--radius-md); }
#btn-logout:hover, #btn-logout:active { background: var(--urgent-bg); border-color: var(--urgent); color: var(--urgent); }

/* ── 5. Mobile: bottom tab bar ───────────────────────────────── */
@media (max-width: 768px) {
  #sidebar {
    position: fixed !important;
    /* Lifted clear of iOS home-indicator swipe zone (~20px from bottom edge)
       so app-switching gesture doesn't interfere with pill dragging. */
    bottom: 24px !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    transform: none !important;
    flex-direction: row !important;
    border-right: none !important;
    border-top: none !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(22, 22, 22, 0.72) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.65),
      0 2px 8px rgba(0,0,0,0.40) !important;
    border-radius: 9999px !important;
    z-index: 300 !important;
    padding: 5px 8px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .sidebar-logo,
  .sidebar-user,
  .sidebar-section-label { display: none !important; }

  .sidebar-nav {
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 2px !important;
    flex: 1 !important;
    min-height: 0 !important;
    align-items: center !important;
    position: relative !important;
    /* touch-action: none = while finger is on the pill area, iOS does NOT
       scroll the page vertically OR preempt our horizontal drag. Matches
       Apple Files behavior — the dock is for nav, not scrolling. Page still
       scrolls normally from touches on content above. */
    touch-action: none !important;
  }

  .nav-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    min-height: 56px !important;
    padding: 8px 6px !important;
    gap: 3px !important;
    flex: 1 !important;
    border-radius: 18px !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    transform-origin: center !important;
  }

  .nav-item .nav-icon {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  .nav-item .nav-icon svg { width: 22px !important; height: 22px !important; stroke: currentColor !important; }

  .nav-item .nav-label {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .nav-item .nav-badge {
    position: absolute !important;
    top: -8px !important;
    right: -12px !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 15px !important;
    text-align: center !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .nav-item .nav-badge.hidden { display: none !important; }

  /* Active tab — color only, indicator handles the background */
  .nav-item.active {
    background: transparent !important;
    color: #C8956C !important;
    box-shadow: none !important;
    font-weight: 600 !important;
  }
  .nav-item.active .nav-label { color: #C8956C !important; font-weight: 600 !important; }
  .nav-item.active .nav-icon svg { stroke: #C8956C !important; }
  .nav-item.active::before { display: none !important; }

  /* Show nav indicator on mobile */
  .nav-slide-indicator { display: block !important; }

  #main-content { padding-bottom: 110px !important; }  /* matches lifted dock */
  #btn-menu-toggle { display: none !important; }
  .sidebar-overlay { display: none !important; }
  #page-content { padding-bottom: 20px !important; }
}

/* ── Board tags ──────────────────────────────────────────────── */
.tag-field { background: #0e2118 !important; color: #2d8a47 !important; border: 1px solid #1a4d22 !important; }
.tag-grain { background: #1e1409 !important; color: #c49060 !important; border: 1px solid #5a3a18 !important; }
.tag-shop  { background: #0d1f3c !important; color: #4a9eff !important; border: 1px solid #1a3a6e !important; }

/* Role badges */
.badge-manager { background: #1e1030 !important; border-color: #4a2080 !important; color: #a371f7 !important; font-weight: 700 !important; }
.badge-foreman { background: #0d1f3c !important; border-color: #1a3a6e !important; color: #4a9eff !important; }
.badge-crew    { background: #0e2118 !important; border-color: #1a4d22 !important; color: #2d8a47 !important; }
.badge-owner   { background: #2a1e10 !important; border-color: #6a4820 !important; color: #c49060 !important; font-weight: 800 !important; }
.badge-signoff { background: #2b2000 !important; border-color: #6b5000 !important; color: #f0c040 !important; }

/* Queue card meta */
.queue-card-meta { color: var(--text-secondary); font-size: 14px; }
.queue-card-meta div { display: flex; align-items: center; line-height: 1.6; }
.queue-card-meta strong { color: var(--text-primary); }
.queue-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.queue-card-actions .btn { min-height: 36px; font-size: 13px; }

/* Card meta SVG icons */
.meta-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  color: var(--text-muted);
}
.meta-icon svg { display: block; }
.tag { display: inline-flex !important; align-items: center; gap: 3px; }
.tag svg { flex-shrink: 0; }

/* ── 6. Board tabs ───────────────────────────────────────────── */
.board-tabs {
  background: rgba(22, 22, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  position: relative;
  overflow: hidden;
  /* Asymmetric padding: pill's downward shadow + legacy 2px border-bottom on
     .board-tab visually fills the bottom — top padding reduced so the gap above
     the pill matches the gap below. */
  padding: 2.5px 5px 5px;
  /* touch-action: none = while finger is on the tab bar, iOS does NOT scroll
     the page or preempt our horizontal drag. Page still scrolls from content. */
  touch-action: none;
}

.board-tab {
  border-radius: 9999px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  padding: 16px 22px;
  transition: color 0.18s ease;
  transform: none;
  position: relative;
  z-index: 1;
  transform-origin: center;
}
.board-tab:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
}
.board-tab.active {
  background: transparent;
  border: none;
  color: #C8956C;
  font-weight: 600;
  transform: none;
  box-shadow: none;
}
/* Unified active color for all boards — indicator handles background */
.board-tab.active[data-board="field"],
.board-tab.active[data-board="grain"],
.board-tab.active[data-board="shop"] {
  background: transparent;
  color: #C8956C;
}

/* ── 7. Task cards ───────────────────────────────────────────── */
/* Phase 4 (2026-05-24): bg matches approval cards now (--bg-surface).    */
.task-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: box-shadow 0.18s ease, transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.task-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  transform: translateY(-1px);
}

/* task card colours handled in boards.css */
.card-footer      { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.card-footer-name { color: var(--text-secondary); font-weight: 600; }

.card-status-live     { color: #2d8a47; font-weight: 700; }
.card-status-claimed  { color: #4a9eff; font-weight: 700; }
.card-status-progress { color: #ff8c00; font-weight: 700; }

.card-timer {
  background: transparent;
  border: 1px solid rgba(192, 120, 56, 0.45);
  border-radius: var(--radius-pill);
  color: var(--deadline);
  padding: 3px 7px 3px 5px;
}
.card-timer.near {
  background: transparent;
  border-color: rgba(224, 53, 53, 0.55);
  color: var(--urgent);
}
.card-timer.expired {
  background: transparent;
  border: 1px solid rgba(224, 53, 53, 0.55);
  color: var(--urgent);
  font-size: 12px;
  padding: 4px 10px 4px 8px;
}

.priority-header { border-bottom-color: rgba(255,255,255,0.06); }
.priority-count  { background: var(--bg-elevated); border-color: rgba(255,255,255,0.07); }

.urgent-banner { background: var(--urgent-bg); border-color: var(--urgent-border); border-left-color: var(--urgent); color: var(--urgent); }

/* ── 8. Priority badges ──────────────────────────────────────── */
.priority-badge.urgent   { background: var(--urgent-bg);   color: var(--urgent);   border-color: var(--urgent-border); }
.priority-badge.deadline { background: var(--deadline-bg); color: var(--deadline); border-color: var(--deadline-border); }
.priority-badge.eod      { background: var(--eod-bg);      color: var(--eod);      border-color: var(--eod-border); }
.priority-badge.eow      { background: var(--eow-bg);      color: var(--eow);      border-color: var(--eow-border); }
.priority-badge.backlog  { background: var(--backlog-bg);  color: var(--backlog);  border-color: var(--backlog-border); }

/* ── 9. Buttons ──────────────────────────────────────────────── */
/* Outlined-only: definitions live in components.css. No background overrides here. */
.btn { border-radius: var(--radius-md); font-weight: 600; }

/* ── 10. Task detail modal ───────────────────────────────────── */
.task-detail-overlay { background: rgba(0,0,0,0.65); }

.task-detail-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.task-detail-header { background: #141414; border-bottom: 1px solid var(--border); padding: 16px 20px; }
.task-detail-title { color: var(--text-primary); font-size: 20px; font-weight: 700; }

.task-detail-header .priority-badge {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text-secondary) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.task-detail-close { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--text-secondary); font-size: 14px; border-radius: var(--radius-md); }
.task-detail-close:hover, .task-detail-close:active { background: rgba(255,255,255,0.12); color: var(--text-primary); }

.task-detail-body { background: var(--bg-surface); }
.detail-field { border-bottom-color: var(--border-subtle); padding: 9px 0; }
.detail-label { color: var(--text-muted); font-size: 11px; font-weight: 700; min-width: 120px; text-transform: uppercase; letter-spacing: 0.05em; }
.detail-value { color: var(--text-primary); font-size: 14px; font-weight: 500; }

.detail-notes { background: var(--bg-elevated); border-left: 3px solid var(--brand); color: var(--text-primary); font-size: 15px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.task-detail-actions { background: var(--bg-elevated); border-top: 1px solid var(--border); }
.task-detail-close-strip { background: var(--bg-elevated); border-top-color: var(--border); }
.task-detail-close-bottom { background: var(--bg-surface); border-color: var(--border); color: var(--text-secondary); font-size: 16px; }
.task-detail-close-bottom:hover, .task-detail-close-bottom:active { background: var(--urgent-bg); border-color: var(--urgent); color: var(--urgent); }

.stall-banner { background: var(--urgent-bg); border-color: var(--urgent-border); color: var(--urgent); }

/* ── Modal action buttons — outlined-only ────────────────────── */
/* Match the global outlined system: transparent at rest, brief fill on press. */
/* Phase 4 (2026-05-24): removed the prior `.btn-danger`-as-amber override.   */
/*   btn-danger now reads as urgent-red consistently — Stop Work + Delete     */
/*   in the modal both want red, not amber. The new btn-support variant       */
/*   handles "amber attention" semantics for Request Support.                 */

.task-detail-actions .btn-urgent {
  background: transparent;
  border-color: var(--urgent);
  color: var(--urgent);
  font-weight: var(--weight-bold);
}
.task-detail-actions .btn-urgent:hover:not(:disabled),
.task-detail-actions .btn-urgent:active:not(:disabled) {
  background: rgba(224, 53, 53, 0.12);
}

.task-detail-actions .btn-info {
  background: transparent;
  border-color: var(--eow);
  color: var(--eow);
}
.task-detail-actions .btn-info:hover:not(:disabled),
.task-detail-actions .btn-info:active:not(:disabled) {
  background: rgba(91, 141, 217, 0.12);
}

.task-detail-actions .btn-primary {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
.task-detail-actions .btn-primary:hover:not(:disabled),
.task-detail-actions .btn-primary:active:not(:disabled) {
  background: rgba(196, 144, 96, 0.12);
}

/* ── Phase 4 semantic variants — inside modal (2026-05-24) ── */
/* These mirror the global variants; explicit overrides ensure they survive  */
/* any future modal-scoped style additions.                                  */
.task-detail-actions .btn-success {
  background: transparent;
  border-color: var(--green-400);
  color: var(--green-300);
}
.task-detail-actions .btn-success:hover:not(:disabled),
.task-detail-actions .btn-success:active:not(:disabled) {
  background: rgba(45, 122, 66, 0.16);
}

.task-detail-actions .btn-support {
  background: transparent;
  border-color: var(--deadline);
  color: var(--deadline);
}
.task-detail-actions .btn-support:hover:not(:disabled),
.task-detail-actions .btn-support:active:not(:disabled) {
  background: rgba(212, 130, 10, 0.16);
}

.task-detail-actions .btn-update {
  background: transparent;
  border-color: var(--eow);
  color: var(--eow);
}
.task-detail-actions .btn-update:hover:not(:disabled),
.task-detail-actions .btn-update:active:not(:disabled) {
  background: rgba(74, 127, 212, 0.16);
}

.task-detail-actions .btn-edit {
  background: transparent;
  border-color: var(--brand-light);
  color: var(--brand-light);
}
.task-detail-actions .btn-edit:hover:not(:disabled),
.task-detail-actions .btn-edit:active:not(:disabled) {
  background: rgba(212, 170, 128, 0.14);
}

.task-detail-actions .btn-neutral {
  background: transparent;
  border-color: #e0e0e0;
  color: #f0f0f0;
}
.task-detail-actions .btn-neutral:hover:not(:disabled),
.task-detail-actions .btn-neutral:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.10);
}

/* ── 11. Forms ───────────────────────────────────────────────── */
input, select, textarea { background: var(--bg-input); border: 1.5px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 15px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: none; outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
.form-group label { color: var(--text-muted); font-size: 13px; font-weight: 600; }

/* ── 12. Notification panel ──────────────────────────────────── */
.notif-panel { background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: var(--radius-lg); }
.notif-panel-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: var(--text-primary); }

.notif-list { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Notification panel border-bottom + min-height override (components.css uses 56px) */
button.notif-item, .notif-item { border-bottom: 1px solid var(--border-subtle); min-height: 64px; }
/* Font-size override — bumps from components.css token defaults for panel legibility */
.notif-item-title { font-size: 15px; font-weight: 600; }
.notif-item-time  { font-size: 13px; }
/* (Removed May 21 2026: .notif-item:hover, .notif-item.unread, and
   .notif-item-clickable:hover/:active — duplicates of components.css with
   identical effective values. Components.css now owns those.) */

/* ── 13. Inline modal ────────────────────────────────────────── */
.inline-modal-overlay { background: rgba(0,0,0,0.65); }
.inline-modal-panel { background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.inline-modal-header { background: var(--bg-elevated); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: var(--text-primary); }
.inline-modal-header > span { color: var(--text-primary); }
.inline-modal-header > div > div:first-child { color: var(--text-primary) !important; }
.inline-modal-header > div > div:last-child  { color: var(--text-muted) !important; }
.inline-modal-actions { background: var(--bg-elevated); border-top: 1px solid var(--border); }

/* ── 14. Parts page ──────────────────────────────────────────── */
.parts-task-group { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.parts-task-header { border-bottom-color: var(--border); }
.parts-task-header:hover { background: var(--bg-elevated); }
.parts-task-name { font-weight: 700; font-size: 16px; }
.parts-row { border-bottom: 1px solid var(--border-subtle); }
.parts-row:last-child { border-bottom: none; }
.parts-all-clear { color: var(--brand); font-weight: 600; }
.order-modal-part-row { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); }
.order-modal-part-ordered { background: #0e2118; border-color: #1a4d22; }

/* ── 15. Settings page — mirror of .board-tabs glass material ──── */
.settings-tabs {
  background: rgba(22, 22, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Asymmetric padding — matches board-tabs visual balance */
  padding: 2.5px 5px 5px;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  /* pan-x: allow horizontal scroll of the tabs container (so users can reach
     Dealers/Audit when they don't fit), but block vertical scroll (so the page
     doesn't scroll while finger is on the tabs). Pill drag still works because
     .settings-tab.active overrides with touch-action: none — see below. */
  touch-action: pan-x;
  --press: 0;
  --vel:   0;
}
.settings-tabs::-webkit-scrollbar { display: none; }

/* Active tab area locks touch entirely → finger on the pill = drag, not scroll.
   iOS evaluates touch-action at touch START, so the gesture stays in "drag mode"
   even if the finger crosses into adjacent tabs while dragging. */
.settings-tab.active {
  touch-action: none;
}

.settings-tab {
  border-radius: 9999px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  padding: 16px 22px;
  transition: color 0.18s ease;
  transform: none;
  position: relative;
  z-index: 1;
  transform-origin: center;
  flex: 0 0 auto;
  white-space: nowrap;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  display: inline-block;
}
.settings-tab:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
}
.settings-tab.active,
.settings-tab-active {
  background: transparent !important;
  border: none !important;
  color: #C8956C !important;
  font-weight: 600 !important;
  transform: none;
  box-shadow: none !important;
}

.settings-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

/* ── 16. Toasts ──────────────────────────────────────────────── */
.toast { background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: var(--radius-lg); color: var(--text-primary); }
.toast-success { border-left: 3px solid var(--success); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-urgent  { background: var(--urgent-bg); border-left: 3px solid var(--urgent); }
.toast-info    { border-left: 3px solid var(--info); }

/* ── 17. Login screen ────────────────────────────────────────── */

/* Extremely faint field-row texture — login screen only */
#login-screen {
  background-color: #131313;
  background-image: repeating-linear-gradient(
    168deg,
    transparent,
    transparent 30px,
    rgba(196,144,96,0.016) 30px,
    rgba(196,144,96,0.016) 31px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 0;
}

/* Frameless — content floats directly on background */
.login-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  max-width: 360px;
  padding: 28px 16px 16px;
}

/* ── Wordmark — image asset ── */
.brand-wordmark-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto 2px;
  /* Prevent browser drag highlight on mobile */
  -webkit-user-drag: none;
  user-select: none;
}

/* Fallback text wordmark (unused while image loads, kept for resilience) */
.brand-wordmark {
  font-family: 'Cinzel', 'Times New Roman', Georgia, serif;
  font-size: 28px;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 8px;
  font-weight: 600;
}
.brand-prairie { color: var(--text-primary); font-weight: 600; }
.brand-ops     { color: var(--brand); font-weight: 400; }

.brand-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

/* ── Keypad — dark with bronze outline, premium intent ── */
.login-card .pin-key {
  background: rgba(14,14,14,0.85);
  border-color: rgba(196,144,96,0.22);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  font-weight: 600;
}
.login-card .pin-key:hover {
  background: rgba(196,144,96,0.07);
  border-color: rgba(196,144,96,0.48);
  box-shadow: 0 2px 10px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
}
.login-card .pin-key:active {
  background: rgba(196,144,96,0.11);
  border-color: rgba(196,144,96,0.60);
}
.login-card .pin-key.pin-backspace {
  border-color: rgba(255,255,255,0.10);
}
.login-card .pin-key.pin-backspace:hover {
  border-color: rgba(224,53,53,0.50);
}

/* ── Pin dots — larger, more intentional ── */
.login-card .pin-dot {
  width: 12px;
  height: 12px;
  border-color: rgba(196,144,96,0.30);
}
.login-card .pin-dot.filled {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 6px rgba(196,144,96,0.40);
}

/* User picker rows — keep subtle surface */
.login-card #picker-list button {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(196,144,96,0.18) !important;
}
.login-card #picker-list button:hover {
  background: rgba(196,144,96,0.06) !important;
  border-color: var(--brand) !important;
}

/* ── 18. Approval queues ─────────────────────────────────────── */
.queue-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.queue-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ── 19. Empty states ────────────────────────────────────────── */
.empty-state { color: var(--text-muted); }
.empty-title { color: var(--text-secondary); font-weight: 700; }

/* ── 20. Activity feed ───────────────────────────────────────── */
.detail-feed-section { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); }
.detail-feed-title { color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 11px; }
.feed-author { color: var(--text-primary); font-weight: 700; }
.feed-text   { color: var(--text-secondary); }
.feed-ts     { color: var(--text-muted); }

/* ── 21. Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar-track  { background: var(--bg-app); }
::-webkit-scrollbar-thumb  { background: #3a3f4a; }
::-webkit-scrollbar-thumb:hover { background: #4a5060; }

/* ── 22a. Interaction hygiene — prevent iOS long-press bugs ──── */
/*
 * Suppresses text selection handles, callout menus, and drag highlights
 * on ALL nav interaction containers and their children.
 * Does NOT affect page scroll — only applies to pill nav elements.
 */
.sidebar-nav,
.sidebar-nav *,
.board-tabs,
.board-tabs *,
.settings-tabs,
.settings-tabs * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.nav-slide-indicator,
.board-slide-indicator,
.settings-slide-indicator {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ── 22. Sliding tab indicators — physics-driven liquid glass ── */
/*
 * Material depth is driven by a single rAF-interpolated CSS variable: --press (0..1).
 * The parent container (.sidebar-nav / .board-tabs) owns --press so the indicator
 * AND the active item content share one clock — content lifts WITH the glass,
 * not above it. Transform is still 100% JS/rAF-owned. No CSS transitions on
 * shadow/background — JS interpolates --press smoothly.
 *
 * Visual size increase comes mostly from depth (shadow, fog, inset highlight,
 * layered glass overlay) — NOT from geometry. Geometric scaling stays subtle.
 */

.sidebar-nav,
.board-tabs,
.settings-tabs {
  --press: 0;
  --vel:   0;   /* Chunk 4: signed velocity (-1..1) — drives edge refraction */
}

.nav-slide-indicator,
.board-slide-indicator,
.settings-slide-indicator {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  /* No transition on shadow/bg — --press is rAF-interpolated for continuous depth */
}

.nav-slide-indicator {
  display: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, calc(0.09 + 0.05 * var(--press)));
  border: 1px solid rgba(255, 255, 255, calc(0.14 + 0.08 * var(--press)));
  box-shadow:
    /* Feathered outer halo — Chunk 3, always on, soft edge diffusion */
    0 0 10px 1px rgba(255, 255, 255, 0.025),
    /* Primary elevation — interpolated with --press */
    0 calc(2px + 4px * var(--press)) calc(14px + 12px * var(--press))
      rgba(0, 0, 0, calc(0.30 + 0.16 * var(--press))),
    inset 0 calc(1px + 0.6px * var(--press)) 0
      rgba(255, 255, 255, calc(0.22 + 0.14 * var(--press))),
    inset 0 -1px 0 rgba(0, 0, 0, calc(0.08 + 0.04 * var(--press))),
    0 0 0 calc(0.5px * var(--press)) rgba(255, 255, 255, 0.14);
}

.board-slide-indicator,
.settings-slide-indicator {
  border-radius: 9999px;
  background: rgba(255, 255, 255, calc(0.09 + 0.05 * var(--press)));
  border: 1px solid rgba(255, 255, 255, calc(0.14 + 0.07 * var(--press)));
  box-shadow:
    /* Feathered outer halo — Chunk 3 */
    0 0 8px 1px rgba(255, 255, 255, 0.02),
    /* Primary elevation */
    0 calc(2px + 3px * var(--press)) calc(10px + 10px * var(--press))
      rgba(0, 0, 0, calc(0.24 + 0.14 * var(--press))),
    inset 0 calc(1px + 0.5px * var(--press)) 0
      rgba(255, 255, 255, calc(0.22 + 0.12 * var(--press))),
    inset 0 -1px 0 rgba(0, 0, 0, calc(0.06 + 0.04 * var(--press))),
    0 0 0 calc(0.5px * var(--press)) rgba(255, 255, 255, 0.12);
}

/* Soft internal highlight — top white refraction (rest layer) */
.nav-glass-highlight,
.board-glass-highlight,
.settings-glass-highlight {
  position: absolute;
  top: 1px; left: 10px; right: 10px;
  height: 36%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.00) 100%
  );
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

/* Layered glass interior — Chunks 3 + 4.
   Layer 1 (always on): internal fog — subtle centered glow → atmospheric depth at REST.
   Layer 2 (--press driven): "lifted" overlay → stronger top refraction on touch.
   Layer 3 (--vel driven): directional edge highlight that shifts toward the
     leading edge of motion → reads as light refracting at moving glass edges.
     Position % shifts from 50% rest → 50%+25% in direction of motion.
   All stacked in a single ::before — no extra DOM nodes, GPU-cheap. */
.nav-slide-indicator::before,
.board-slide-indicator::before,
.settings-slide-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* Edge refraction — directional, drag-only (visible because --vel ≠ 0 only mid-drag) */
    radial-gradient(
      40% 70% at calc(50% + 25% * var(--vel)) 50%,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.00) 70%
    ),
    /* Internal fog — always on, very subtle */
    radial-gradient(
      70% 55% at 50% 50%,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.00) 75%
    ),
    /* Lifted overlay — pressure-driven via rgba alpha calc() */
    radial-gradient(
      130% 90% at 50% 0%,
      rgba(255, 255, 255, calc(0.14 * var(--press))) 0%,
      rgba(255, 255, 255, 0.00) 65%
    );
  pointer-events: none;
}

/* Inset fog rim — subtle inner darkening that makes content feel embedded
   INSIDE the glass rather than stamped on top. Intensifies with --press. */
.nav-slide-indicator::after,
.board-slide-indicator::after,
.settings-slide-indicator::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(
    100% 100% at 50% 50%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, calc(0.07 * var(--press))) 100%
  );
  pointer-events: none;
}

/* Active content embedding — icon + label gain a matching elevation shadow
   driven by --press. Combined with subtle scaling in JS, this makes the
   content read as physically inside the lifted glass plane. */
@media (max-width: 768px) {
  .sidebar-nav .nav-item.active .nav-icon svg {
    filter: drop-shadow(
      0 calc(1px * var(--press)) calc(2.5px * var(--press))
      rgba(0, 0, 0, calc(0.40 * var(--press)))
    );
  }
  .sidebar-nav .nav-item.active .nav-label {
    text-shadow: 0 calc(1px * var(--press)) calc(2px * var(--press))
      rgba(0, 0, 0, calc(0.45 * var(--press)));
  }
  /* Extended vertical touch hit region — invisible, no layout impact,
     no horizontal overlap with adjacent items (those already partition via flex:1).
     Pointer events still resolve via existing closest('.nav-item') check. */
  .nav-item {
    position: relative;
  }
  .nav-item::after {
    content: '';
    position: absolute;
    inset: -14px 0;   /* Chunk 5: larger vertical hit acquisition zone */
    pointer-events: auto;
    background: transparent;
  }
}

.board-tabs .board-tab.active,
.settings-tabs .settings-tab.active {
  text-shadow: 0 calc(1px * var(--press)) calc(2px * var(--press))
    rgba(0, 0, 0, calc(0.35 * var(--press)));
}
.board-tabs .board-tab.active svg,
.settings-tabs .settings-tab.active svg {
  filter: drop-shadow(
    0 calc(1px * var(--press)) calc(2px * var(--press))
    rgba(0, 0, 0, calc(0.35 * var(--press)))
  );
}

code, pre { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }