/* ============================================================
   CR Buildout
   global.css — Brand tokens, typography, base reset
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ─── Brand Color Tokens ─────────────────────────────────── */
:root {
  /* Dark surfaces */
  --c-dark:         #101820;
  --c-dark-alt:     #1C2A35;
  --c-dark-mid:     #243444;
  --c-dark-border:  #2E3F50;

  /* Blue (primary accent) */
  --c-blue:         #5BC2E7;
  --c-blue-dark:    #3A9FC4;
  --c-blue-light:   #E8F7FC;

  /* Yellow */
  --c-yellow:       #F2CD00;
  --c-yellow-light: #FEF9CC;

  /* Gold */
  --c-gold:         #E0A526;
  --c-gold-light:   #FDF0D0;

  /* Neutral light */
  --c-off-white:    #F7F5F0;
  --c-cream:        #F0EDE6;
  --c-sand:         #DDD8CE;
  --c-mid-gray:     #8A9BAA;
  --c-light-gray:   #E8ECF0;

  /* Status colors */
  --c-green:        #1A7A4A;
  --c-green-light:  #D4F0E3;
  --c-orange:       #C86A1A;
  --c-orange-light: #FDECD4;

  /* Slate */
  --c-slate:        #4A6070;
  --c-slate-light:  #E0E8EE;

  /* Purple */
  --c-purple:       #6C3483;
  --c-purple-light: #E8DAEF;

  /* ─── Surface (overridden in dark mode) ─────────────────── */
  --c-surface: #fff;

  /* ─── Typography ─────────────────────────────────────────── */
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', Arial, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ─── Sizing ─────────────────────────────────────────────── */
  --sidebar-w: 224px;
  --header-h:  56px;

  /* ─── Safe Area Insets (notch / home indicator) ──────────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─── Dark Mode Overrides ────────────────────────────────── */
/* Applied via body.dark-mode; overrides light surface tokens */
body.dark-mode {
  /* Surfaces */
  --c-surface:      #1e2a38;   /* cards, inputs, dropdowns   */
  --c-off-white:    #141E28;   /* main content area bg       */
  --c-cream:        #1e2a38;   /* hover states               */
  --c-sand:         #2E3F50;   /* borders                    */
  --c-light-gray:   #243444;   /* subtle bg, progress tracks */
  --c-slate-light:  #243444;   /* badge backgrounds          */

  /* Tinted accent lights — muted for dark bg */
  --c-blue-light:   #162F40;
  --c-green-light:  #0D2A1A;
  --c-orange-light: #2A1A08;
  --c-gold-light:   #25200A;
  --c-yellow-light: #25200A;
  --c-purple-light: #2A1A40;

  /* Text tokens — lighten for dark surfaces */
  --c-slate:        #8BA5BA;   /* secondary text on dark bg  */
}

/* ─── Dark Mode: Content Surface Overrides ───────────────────
   CSS variables handle surfaces. These rules handle text,
   borders, and elements where JS uses C.* hardcoded values.
   ─────────────────────────────────────────────────────────── */

/* Main content area: base text for elements with no explicit color */
body.dark-mode #main {
  color: #C8D8E8;
  /* Remap --c-dark as a TEXT color within main content area.
     home.js and other views use var(--c-dark) for headings and body text.
     Redefining it inside #main inverts those text colors without affecting
     header/sidebar backgrounds which are outside #main. */
  --c-dark: #D8E8F4;
}

/* Content cards */
body.dark-mode .cr-card {
  color: #C8D8E8;
  border-color: var(--c-dark-border);
}
body.dark-mode .cr-stat-card {
  color: #C8D8E8;
  border-color: var(--c-dark-border);
}

/* Section headers */
body.dark-mode .cr-section-head {
  color: #C8D8E8;
  border-bottom-color: var(--c-dark-border);
}

/* Toolbar row */
body.dark-mode .cr-toolbar {
  border-bottom-color: var(--c-dark-border);
}

/* View toggle buttons */
body.dark-mode .cr-view-btn {
  color: var(--c-mid-gray);
  border-color: var(--c-dark-border);
}
body.dark-mode .cr-view-btn:hover {
  background: var(--c-dark-mid);
  color: #fff;
}

/* Ghost-light buttons in modals and light contexts */
body.dark-mode .btn-ghost-light {
  color: var(--c-mid-gray);
  border-color: var(--c-dark-border);
}
body.dark-mode .btn-ghost-light:hover {
  background: var(--c-dark-mid);
  color: #fff;
}

/* Resp / assignee badge */
body.dark-mode .cr-resp-badge {
  background: var(--c-dark-border);
  color: var(--c-mid-gray);
}

/* Task row hover shadow on dark bg */
body.dark-mode .cr-task-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── JS inline style overrides ────────────────────────────────
   When JS does el.style.color = '#101820', browsers serialize
   the inline style attribute as rgb() — these selectors target
   those serialized values to flip them in dark mode.
   ─────────────────────────────────────────────────────────── */

/* C.dark = #101820 → rgb(16, 24, 32) — dark text on dark surface */
body.dark-mode [style*="color: rgb(16, 24, 32)"] {
  color: #C8D8E8 !important;
}

/* C.lightGray = #E8ECF0 → rgb(232, 236, 240) — progress tracks, section bgs */
body.dark-mode [style*="background: rgb(232, 236, 240)"],
body.dark-mode [style*="background-color: rgb(232, 236, 240)"] {
  background-color: var(--c-dark-border) !important;
}

/* C.cream = #F0EDE6 → rgb(240, 237, 230) — hover/section bgs */
body.dark-mode [style*="background: rgb(240, 237, 230)"],
body.dark-mode [style*="background-color: rgb(240, 237, 230)"] {
  background-color: var(--c-surface) !important;
}

/* C.offWhite = #F7F5F0 → rgb(247, 245, 240) — subtle bgs */
body.dark-mode [style*="background: rgb(247, 245, 240)"],
body.dark-mode [style*="background-color: rgb(247, 245, 240)"] {
  background-color: var(--c-off-white) !important;
}

/* C.slate = #4A6070 → rgb(74, 96, 112) — secondary text, too dark on dark bg */
body.dark-mode [style*="color: rgb(74, 96, 112)"] {
  color: #8BA5BA !important;
}

/* C.slateLight = #E0E8EE → rgb(224, 232, 238) — badge backgrounds */
body.dark-mode [style*="background: rgb(224, 232, 238)"],
body.dark-mode [style*="background-color: rgb(224, 232, 238)"] {
  background-color: var(--c-dark-mid) !important;
}

/* C.sand (border) = #DDD8CE → rgb(221, 216, 206) — inline borders */
body.dark-mode [style*="border-color: rgb(221, 216, 206)"] {
  border-color: var(--c-dark-border) !important;
}
body.dark-mode [style*="border: 1px solid rgb(221, 216, 206)"] {
  border-color: var(--c-dark-border) !important;
}

/* ── Notification panel ───────────────────────────────────── */
body.dark-mode .cr-notif-panel {
  border-color: var(--c-dark-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
body.dark-mode .cr-notif-item {
  border-bottom-color: var(--c-dark-border);
}
body.dark-mode .cr-notif-item-title {
  color: #C8D8E8;
}
body.dark-mode .cr-notif-section-head {
  border-top-color: var(--c-dark-border);
  border-bottom-color: var(--c-dark-border);
}

/* ── Search dropdown ──────────────────────────────────────── */
body.dark-mode .cr-search-dropdown {
  border-color: var(--c-dark-border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
body.dark-mode .cr-search-item {
  border-bottom-color: var(--c-dark-border);
}
body.dark-mode .cr-search-item:hover {
  background: var(--c-dark-mid);
}
body.dark-mode .cr-search-item-label {
  color: #C8D8E8;
}
body.dark-mode .cr-search-group-head {
  border-bottom-color: var(--c-dark-border);
}

/* ── Keyboard shortcut keys ───────────────────────────────── */
body.dark-mode kbd.cr-kbd,
body.dark-mode span.cr-kbd {
  background: var(--c-dark-mid);
  border-color: var(--c-dark-border);
  color: #C8D8E8;
  box-shadow: 0 1px 0 var(--c-dark-border);
}
body.dark-mode .cr-shortcuts-section,
body.dark-mode .cr-shortcuts-row,
body.dark-mode .cr-shortcuts-hint {
  border-color: var(--c-dark-border);
}

/* ── Tables (permits, budget) ─────────────────────────────── */
body.dark-mode table {
  color: #C8D8E8;
}
body.dark-mode table th,
body.dark-mode table td {
  border-color: var(--c-dark-border) !important;
}
body.dark-mode table thead th {
  background: var(--c-dark-mid) !important;
  color: var(--c-mid-gray) !important;
}
body.dark-mode table tbody tr:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Form inputs: text must be light on dark surface */
body.dark-mode .form-input {
  color: #C8D8E8;
  border-color: var(--c-dark-border);
}

/* Light modal: all content text must flip */
body.dark-mode .modal-box-light {
  background: var(--c-dark-alt);
  border-color: var(--c-dark-border);
  color: #C8D8E8;
}

/* Scrollbar thumb in main area */
body.dark-mode #main::-webkit-scrollbar-thumb {
  background: var(--c-sand);
}

/* ─── Base Reset ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-dark);
  background: var(--c-dark);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: 14px;
}

a {
  color: var(--c-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─── App Shell ──────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  /* Use 100dvh (dynamic viewport) on supporting browsers so the app shell
     resizes cleanly as iOS Safari's URL bar collapses/expands. Fall back
     to 100vh for older browsers that don't know dvh. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#header {
  flex: 0 0 calc(var(--header-h) + env(safe-area-inset-top, 0px));
  background: var(--c-dark);
  border-bottom: 1px solid var(--c-dark-border);
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 16px 0;
  gap: 16px;
  z-index: 100;
}

#body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

#sidebar {
  flex: 0 0 var(--sidebar-w);
  background: var(--c-dark-alt);
  border-right: 1px solid var(--c-dark-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#main {
  flex: 1;
  background: var(--c-off-white);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ─── Loading Screen ─────────────────────────────────────── */
#loading {
  position: fixed;
  inset: 0;
  background: var(--c-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#loading img {
  width: 80px;
  opacity: 0.95;
}

#loading-text {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--c-mid-gray);
  text-transform: uppercase;
}

#loading.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ─── Typography Utilities ───────────────────────────────── */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.15em;
}

.font-mono {
  font-family: var(--font-mono);
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-dark-border);
  border-radius: 3px;
}
#main::-webkit-scrollbar-thumb {
  background: var(--c-sand);
}

/* ─── Tab Containers ─────────────────────────────────────── */
.tab-pane {
  display: none;
  flex: 1;
}
.tab-pane.active {
  display: flex;
  flex-direction: column;
}

/* ─── Modal Base ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-box {
  background: var(--c-dark-alt);
  border: 1px solid var(--c-dark-border);
  border-radius: 8px;
  padding: 24px;
  min-width: 360px;
  max-width: 560px;
  width: 100%;
  color: #fff;
}

.modal-box-light {
  background: var(--c-surface);
  border: 1px solid var(--c-sand);
  border-radius: 8px;
  padding: 24px;
  min-width: 400px;
  max-width: 640px;
  width: 100%;
  color: var(--c-dark);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

/* ─── Form Elements ──────────────────────────────────────── */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-mid-gray);
}

.form-input {
  padding: 8px 10px;
  border: 1px solid var(--c-sand);
  border-radius: 4px;
  font-size: 14px;
  background: var(--c-surface);
  color: var(--c-dark);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--c-blue);
}

.form-input-dark {
  padding: 8px 10px;
  border: 1px solid var(--c-dark-border);
  border-radius: 4px;
  font-size: 14px;
  background: var(--c-dark-mid);
  color: #fff;
  outline: none;
}

.form-input-dark:focus {
  border-color: var(--c-blue);
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s, opacity 0.15s;
}

.btn-primary {
  background: var(--c-blue);
  color: var(--c-dark);
}
.btn-primary:hover { background: var(--c-blue-dark); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--c-mid-gray);
  border: 1px solid var(--c-dark-border);
}
.btn-ghost:hover { background: var(--c-dark-mid); color: #fff; }

.btn-ghost-light {
  background: transparent;
  color: var(--c-slate);
  border: 1px solid var(--c-sand);
}
.btn-ghost-light:hover { background: var(--c-cream); }

.btn-danger {
  background: transparent;
  color: var(--c-orange);
  border: 1px solid var(--c-orange);
}
.btn-danger:hover { background: var(--c-orange-light); }

/* ─── Tag / Badge ────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Progress Bar ───────────────────────────────────────── */
.progress-track {
  background: var(--c-dark-border);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  border-radius: 99px;
  transition: width 0.3s ease;
}

/* ─── Mobile Sidebar Backdrop ───────────────────────────── */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 499;
}
#sidebar-backdrop.visible { display: block; }

#mobile-menu-btn { display: none; }

/* ─── Tablet: ≤ 1024px ────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Stat cards: 2-col grid */
  .cr-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Dashboard phase/milestones: collapse to single column */
  .cr-dash-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Mobile: ≤ 768px ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* iOS Safari auto-zooms when a form control's computed font-size is
     below 16px. Once it zooms in, it never zooms back out — the user
     has to pinch-zoom manually, and the rest of the app renders at a
     compressed visual viewport (icons crammed against the logo, etc).
     Bump every text input/textarea/select to 16px on mobile to prevent
     the zoom-trigger entirely. Desktop stays at the denser 13–14px. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"],
  input[type="url"], input[type="date"], input[type="time"],
  input[type="datetime-local"], textarea, select,
  .form-input, .form-input-dark, .cr-search-input {
    font-size: 16px !important;
  }

  #mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid var(--c-dark-border);
    color: var(--c-mid-gray);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    order: -1;
  }

  .header-subtitle  { display: none !important; }
  .header-data-wrap { display: none !important; }

  /* On desktop the hidden-away `.header-subtitle` carries margin-right:auto
     and pushes the icon cluster (search, bell, gear, avatar) to the right
     edge. With that element `display: none` on mobile, the auto-margin goes
     away and the icons sit next to the logo. Re-anchor by pushing the search
     input — the first element of the cluster — with margin-left:auto so
     everything after it stays flush right, matching desktop alignment. */
  #header .cr-search-input { margin-left: auto; }

  #sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    flex: none;
    width: var(--sidebar-w);
  }
  #sidebar.open { transform: translateX(0); }

  .modal-box {
    min-width: unset !important;
    width: calc(100vw - 24px) !important;
    max-height: 85vh;
    overflow-y: auto;
  }
  .modal-box-light {
    min-width: unset !important;
    width: calc(100vw - 24px) !important;
  }

  /* Stat cards: 1-col on mobile */
  .cr-stat-row {
    grid-template-columns: 1fr !important;
  }

  /* Board: horizontal-scroll swipe between columns on mobile.
     Previously stacked vertically which meant scrolling through hundreds of
     cards to reach Done. Now each column takes ~88vw with CSS scroll snap
     so you swipe one column at a time (closer to Trello's mobile UX). */
  .cr-board {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: flex-start !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding: 0 10px !important;
  }
  .cr-board-col {
    width: 88vw !important;
    max-width: 340px !important;
    flex-shrink: 0 !important;
    max-height: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Hide the scrollbar on mobile for a cleaner swipe feel */
  .cr-board::-webkit-scrollbar { display: none; }
  .cr-board { scrollbar-width: none; }

  /* Location grid: single column */
  .cr-location-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tighter dashboard padding */
  #tab-dashboard > div > div:first-child {
    padding: 12px 14px !important;
  }

  /* Filter toolbar: allow wrapping more aggressively */
  .cr-toolbar {
    flex-wrap: wrap;
  }

  /* Task detail modal: stack columns vertically */
  .task-detail-body {
    flex-direction: column !important;
  }
  .task-detail-body > div {
    width: 100% !important;
    flex: unset !important;
  }

  /* Touch targets: minimum 44×44px (Apple HIG / WCAG 2.5.5) */
  button, .cr-btn, [role="button"], select,
  input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Minimum 16px on inputs prevents iOS auto-zoom on focus */
  .form-input, .form-input-dark, select, textarea {
    font-size: 16px !important;
  }
}

/* ─── Standard phones (≤ 500px, iPhone 14/15 size) ──────────── */
@media (max-width: 500px) {
  .modal-box,
  .modal-box-light {
    min-width: unset;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 80px);
    border-radius: 12px;
  }

  #main {
    padding: 8px;
  }

  .cr-toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}

/* ─── Tablet and below (≤ 768px) — hide role switcher, bottom nav padding ── */
@media (max-width: 768px) {
  .header-role-bar {
    display: none !important;
  }
  /* Prevent content from hiding behind bottom nav bar */
  #main {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── Very small (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
  /* Allow header to wrap if role bar ever re-enabled */
  #header {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 12px 2px;
  }

  /* Sidebar: cap width so it doesn't consume the whole screen on tiny phones */
  #sidebar {
    width: min(224px, 80vw);
  }

  /* Reduce tab-pane padding */
  .tab-pane {
    padding: 0;
  }

  /* ── Filter toolbar: single scrollable row ──────────────── */
  .cr-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 16px;    /* breathing room after last control */
  }
  .cr-filter-bar::-webkit-scrollbar { display: none; }
  /* Keep each control from shrinking below its natural width */
  .cr-filter-bar > * { flex-shrink: 0; }

  /* ── Budget summary: 2-up then 1-col at 375px ───────────── */
  .cr-budget-summary-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Budget category table: horizontal scroll ───────────── */
  .cr-budget-table {
    overflow-x: auto !important;   /* overrides inline overflow:hidden */
  }
  /* Give the fixed grid rows a minimum width so they scroll */
  .cr-budget-thead,
  .cr-budget-catrow {
    min-width: 480px;
  }

  /* ── Modal: tighten padding on very small screens ────────── */
  .modal-box-light {
    padding: 16px 14px !important;
    width: calc(100vw - 12px) !important;
  }
  .modal-box {
    padding: 16px 14px !important;
    width: calc(100vw - 12px) !important;
  }

  /* ── Breadcrumb: truncate long project names ─────────────── */
  .cr-breadcrumb-project {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Switchable project breadcrumb: show a subtle chevron + underline so
     users know they can tap it to pick a different location. */
  .cr-breadcrumb-switchable::after {
    content: ' ⌄';
    font-size: 0.9em;
    opacity: 0.7;
  }
  .cr-breadcrumb-switchable {
    text-decoration-color: rgba(139, 165, 186, 0.4);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
  }

  /* ── Breadcrumb bar: tighten horizontal padding ─────────── */
  #cr-breadcrumb > div {
    padding: 0 8px;
    gap: 4px;
  }
}

/* ─── Sidebar scroll area ────────────────────────────────── */
.sidebar-scroll-area::-webkit-scrollbar { width: 4px; }
.sidebar-scroll-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.sidebar-scroll-area::-webkit-scrollbar-track { background: transparent; }

/* ─── Sidebar Utilities ──────────────────────────────────── */
.sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-mid-gray);
  padding: 12px 12px 4px;
}

.sidebar-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-mid-gray);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.sidebar-nav-btn:hover {
  background: var(--c-dark-mid);
  color: #fff;
}

.sidebar-nav-btn.active {
  background: var(--c-dark-mid);
  color: #fff;
}

.sidebar-nav-btn .nav-icon {
  width: 16px;
  text-align: center;
  font-size: 14px;
}

/* ─── Sidebar depth gradient ─────────────────────────────── */
#sidebar {
  background: linear-gradient(175deg, var(--c-dark-alt) 0%, var(--c-dark-mid) 100%) !important;
}

/* ─── Animations & Transitions ──────────────────────────── */
@keyframes cr-modal-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cr-overdue-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes cr-status-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes cr-backdrop-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cr-modal-fadein { animation: cr-backdrop-fadein 0.2s ease; }
.cr-modal-fadeout { opacity: 0 !important; transition: opacity 0.18s ease !important; }

.cr-overdue-pulse { animation: cr-overdue-pulse 2s ease-in-out infinite; }
.cr-status-pop    { animation: cr-status-pop 0.22s ease; }

/* ─── Task row hover lift ────────────────────────────────── */
.cr-task-row {
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.cr-task-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  transform: translateY(-1px);
  position: relative;
  z-index: 1;
}

/* ─── Button transitions ─────────────────────────────────── */
.btn {
  transition: background 0.15s, color 0.15s, transform 0.12s, opacity 0.15s !important;
}
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(0.97); }

/* ─── FAB hover grow ─────────────────────────────────────── */
.cr-fab {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.cr-fab:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.28) !important;
}

/* ─── Sidebar project row transitions ────────────────────── */
.cr-proj-row {
  transition: background 0.12s ease;
}
.cr-proj-row:hover {
  background: var(--c-dark-mid) !important;
}

/* ─── Sidebar sub-menu (location tabs) ───────────────────── */
.sidebar-sub-menu {
  padding-left: 20px;
  margin-bottom: 4px;
}

.sidebar-sub-btn {
  font-size: 12px !important;
  padding: 5px 8px !important;
  gap: 8px !important;
  min-height: 32px;
}

.sidebar-sub-btn i {
  font-size: 16px;
}

/* Caret rotation */
.cr-proj-row .caret-icon {
  transition: transform 0.15s ease;
}

@media (max-width: 768px) {
  .sidebar-sub-menu {
    padding-left: 16px;
  }
  .sidebar-sub-btn {
    padding: 8px 8px !important;
    min-height: 44px;
  }

  /* Notification panel: drop the desktop min-width so it doesn't
     overflow a 320–375px viewport. The panel's inline style already
     caps max-width at calc(100vw - 16px). */
  .cr-notif-panel {
    min-width: 280px !important;
  }
}

/* ─── Tab switch transition ──────────────────────────────── */
.tab-pane.active {
  animation: cr-modal-slide-up 0.18s ease;
}

/* ─── Empty state ────────────────────────────────────────── */
.cr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--c-mid-gray);
  gap: 10px;
}
.cr-empty-state-icon {
  font-size: 36px;
  opacity: 0.4;
}
.cr-empty-state-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ─── Drag handle ────────────────────────────────────────── */
.cr-drag-handle {
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s;
  user-select: none;
}
.cr-drag-handle:active { cursor: grabbing; }
.cr-task-row:hover .cr-drag-handle { opacity: 1; }

/* ─── Consistent border-radius fixes ────────────────────── */
.modal-box        { border-radius: 12px !important; }
.modal-box-light  { border-radius: 12px !important; }
.form-input       { border-radius: 6px !important; }
.btn              { border-radius: 6px !important; }
.modal-overlay    { transition: opacity 0.18s ease; }

/* ─── Drop indicator for task reorder ───────────────────── */
.cr-drop-above { border-top: 2px solid var(--c-blue) !important; }
.cr-drop-below { border-bottom: 2px solid var(--c-blue) !important; }

/* ─── Status badge pop on change ─────────────────────────── */
.cr-status-badge-animated {
  animation: cr-status-pop 0.22s ease;
}

/* ─── Reusable Component Patterns ───────────────────────── */

/* White card base (border + radius, no padding) */
.cr-card {
  background: var(--c-surface);
  border: 1px solid var(--c-sand);
  border-radius: 8px;
}

/* Stat card: white card + flex column layout */
.cr-stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-sand);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Stat label: 11px uppercase mono midGray */
.cr-stat-label {
  font-size: 11px;
  color: var(--c-mid-gray);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Toolbar: white bar with sand border-bottom */
.cr-toolbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-sand);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* View / group-by toggle button */
.cr-view-btn {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  border: 1px solid var(--c-sand);
  background: transparent;
  color: var(--c-mid-gray);
  cursor: pointer;
}
.cr-view-btn.active {
  border-color: var(--c-blue);
  background: var(--c-blue);
  color: var(--c-dark);
  font-weight: 600;
}

/* Modal button row: flex-end, 8px gap, 16px top margin */
.cr-modal-btn-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Meta label: 10px font-mono midGray */
.cr-meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-mid-gray);
}

/* Resp / assignee badge: slate pill */
.cr-resp-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-slate);
  background: var(--c-slate-light);
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Section card header: offWhite bg, sand border-bottom */
.cr-section-head {
  padding: 12px 16px;
  background: var(--c-off-white);
  border-bottom: 1px solid var(--c-sand);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icon action button: ghost, tiny, no border */
.cr-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
  flex-shrink: 0;
  color: var(--c-mid-gray);
}

/* ─── Notifications ──────────────────────────────────────── */
.cr-notif-btn {
  background: transparent;
  border: 1px solid var(--c-dark-border);
  border-radius: 6px;
  color: var(--c-mid-gray);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 5px 8px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.cr-notif-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--c-blue);
  color: #fff;
}

.cr-notif-badge {
  align-items: center;
  background: #e53935;
  border-radius: 9px;
  color: #fff;
  display: flex;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  height: 16px;
  justify-content: center;
  line-height: 1;
  min-width: 16px;
  padding: 0 3px;
  pointer-events: none;
  position: absolute;
  right: -5px;
  top: -5px;
}

.cr-notif-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  max-height: 480px;
  min-width: 360px;
  overflow-y: auto;
  position: fixed;
  z-index: 9999;
}

.cr-notif-panel-head {
  align-items: center;
  background: var(--c-dark);
  border-bottom: 1px solid var(--c-dark-border);
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.cr-notif-panel-title {
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.12em;
}

.cr-notif-count-pill {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  color: var(--c-mid-gray);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
}

.cr-notif-close-btn {
  background: transparent;
  border: none;
  color: var(--c-mid-gray);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
}
.cr-notif-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

.cr-notif-empty {
  align-items: center;
  color: var(--c-mid-gray);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 36px 24px;
  text-align: center;
}

.cr-notif-section-head {
  background: var(--c-off-white);
  border-bottom: 1px solid var(--c-light-gray);
  border-top: 1px solid var(--c-light-gray);
  color: var(--c-mid-gray);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 14px 4px;
  position: sticky;
  top: 44px;
  z-index: 1;
}

.cr-notif-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--c-light-gray);
  display: flex;
  gap: 10px;
  padding: 10px 14px;
}
.cr-notif-item:last-child { border-bottom: none; }
.cr-notif-item--new { background: var(--c-blue-light); }

.cr-notif-item-icon {
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 1px;
  text-align: center;
  width: 18px;
}

.cr-notif-item-body { flex: 1; min-width: 0; }

.cr-notif-item-title {
  color: var(--c-dark);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-notif-item-detail {
  color: var(--c-slate);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 2px;
}

.cr-notif-item-time {
  color: var(--c-mid-gray);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 2px;
  white-space: nowrap;
}

/* ─── Global Search ──────────────────────────────────────── */
.cr-search-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--c-dark-border);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  padding: 6px 12px;
  transition: background 0.15s, border-color 0.15s, width 0.2s ease;
  width: clamp(120px, 30vw, 200px);
}
.cr-search-input::placeholder {
  color: var(--c-mid-gray);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.cr-search-input:focus {
  background: rgba(255,255,255,0.13);
  border-color: var(--c-blue);
  width: clamp(160px, 40vw, 260px);
}

.cr-search-dropdown {
  background: var(--c-surface);
  border: 1px solid var(--c-sand);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  max-height: 400px;
  min-width: min(320px, calc(100vw - 16px));
  overflow-y: auto;
  position: fixed;
  z-index: 9999;
}

.cr-search-group-head {
  background: var(--c-off-white);
  border-bottom: 1px solid var(--c-light-gray);
  color: var(--c-mid-gray);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 6px 12px 5px;
  position: sticky;
  top: 0;
}

.cr-search-item {
  align-items: center;
  border-bottom: 1px solid var(--c-light-gray);
  cursor: pointer;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 9px 12px;
}
.cr-search-item:hover { background: var(--c-blue-light); }
.cr-search-item:last-child { border-bottom: none; }

.cr-search-item-label {
  color: var(--c-dark);
  flex: 1;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-search-item-sub {
  color: var(--c-mid-gray);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Keyboard Navigation ────────────────────────────────────── */
.cr-task-row.cr-task-focused {
  outline: 2px solid var(--c-blue);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

/* Keyboard badge (used in shortcuts modal) */
kbd.cr-kbd {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--c-off-white);
  border: 1px solid var(--c-sand);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-dark);
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--c-sand);
}

span.cr-kbd {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--c-off-white);
  border: 1px solid var(--c-sand);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-dark);
  white-space: nowrap;
}

.cr-kbd--info {
  background: var(--c-blue-light);
  border-color: var(--c-blue);
  color: var(--c-blue-dark);
  font-style: italic;
}

.cr-kbd-sep {
  font-size: 11px;
  color: var(--c-mid-gray);
  margin: 0 3px;
  font-family: var(--font-mono);
}

/* Shortcuts modal */
.cr-shortcuts-box { max-width: 520px; }

.cr-shortcuts-section {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-mid-gray);
  text-transform: uppercase;
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--c-light-gray);
  margin-bottom: 4px;
}

.cr-shortcuts-table { display: flex; flex-direction: column; }

.cr-shortcuts-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-light-gray);
}

.cr-shortcuts-row:last-child { border-bottom: none; }

.cr-shortcuts-keys {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 120px;
  flex-shrink: 0;
}

.cr-shortcuts-desc {
  font-size: 13px;
  color: var(--c-slate);
  line-height: 1.4;
}

.cr-shortcuts-hint {
  margin-top: 16px;
  font-size: 11px;
  color: var(--c-mid-gray);
  font-family: var(--font-mono);
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid var(--c-light-gray);
}

/* ─── Undo Toast ─────────────────────────────────────────────── */
@keyframes cr-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
@keyframes cr-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

.cr-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-dark);
  border: 1px solid var(--c-dark-border);
  color: #fff;
  padding: 12px 16px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  font-size: 13px;
  z-index: 99999;
  white-space: nowrap;
  animation: cr-toast-in 0.18s ease forwards;
  overflow: hidden;
}

.cr-toast--out {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.cr-toast-msg {
  color: rgba(255,255,255,0.9);
  font-size: 13px;
}

.cr-toast-undo {
  background: var(--c-blue);
  color: var(--c-dark);
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter 0.12s;
}

.cr-toast-undo:hover { filter: brightness(1.12); }

.cr-toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
  transition: color 0.12s;
}

.cr-toast-close:hover { color: rgba(255,255,255,0.75); }

.cr-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--c-blue);
  opacity: 0.6;
  border-radius: 0 0 8px 8px;
  animation: cr-toast-progress 5s linear forwards;
}

/* ── Phosphor Icon defaults ── */
.ph, .ph-fill, .ph-bold, .ph-light, .ph-thin, .ph-duotone {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

body.dark-mode .ph,
body.dark-mode .ph-fill,
body.dark-mode .ph-bold {
  color: inherit;
}

/* ─── Home Dashboard ─────────────────────────────────────── */
.cr-home-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
  overflow-x: hidden;
}

.cr-home-2col {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 20px;
  align-items: start;
}

.cr-home-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.cr-home-card {
  background: #fff;
  border: 1px solid var(--c-light-border);
  border-radius: 10px;
  padding: 16px 18px;
}

.cr-home-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

body.dark-mode .cr-home-card {
  background: var(--c-dark-alt);
  border-color: var(--c-dark-border);
}

body.dark-mode .cr-home-card-title {
  color: var(--c-off-white);
}

@media (max-width: 900px) {
  .cr-home-2col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cr-home-2col {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .cr-home-2col > div {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 600px) {
  .cr-home-wrap {
    padding: 12px;
    gap: 12px;
  }
  .cr-home-proj-grid,
  .cr-home-countdown-grid {
    grid-template-columns: 1fr !important;
  }

  /* Task rows: hide project badge and phase number, keep name + date */
  .home-task-badge,
  .home-task-phase {
    display: none !important;
  }
}

@media (max-width: 500px) {
  .cr-home-calendar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .home-budget-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Dark Mode Contrast Overrides ─────────────────────────────────── */

body.dark-mode .form-label {
  color: #8BA5BA;
}

body.dark-mode .modal-title {
  color: #E0E8F0;
}

/* Inline white backgrounds → surface color */
body.dark-mode [style*="background: rgb(255, 255, 255)"],
body.dark-mode [style*="background-color: rgb(255, 255, 255)"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"] {
  background-color: var(--c-surface) !important;
}

/* Inline sand borders → dark border */
body.dark-mode [style*="border-bottom: 1px solid rgb(221, 216, 206)"] {
  border-bottom-color: var(--c-dark-border) !important;
}
body.dark-mode [style*="border-top: 1px solid rgb(221, 216, 206)"] {
  border-top-color: var(--c-dark-border) !important;
}

/* Task rows */
body.dark-mode .cr-task-row {
  background: var(--c-surface);
}

/* Gold/projected date badges */
body.dark-mode [style*="color: rgb(224, 165, 38)"] {
  color: #F0C040 !important;
}

/* Empty state text */
body.dark-mode .cr-empty-state-text {
  color: var(--c-mid-gray);
}

/* Gantt grid lines */
body.dark-mode [style*="background: rgb(232, 236, 240)"] {
  background: var(--c-dark-border) !important;
}

/* Gantt / sticky date headers (offWhite bg) */
body.dark-mode [style*="background: rgb(247, 245, 240)"] {
  background: var(--c-dark-alt) !important;
}

/* Gantt section header rows */
body.dark-mode .cr-section-head {
  background: var(--c-dark-mid) !important;
}

@media (max-width: 500px) {
  /* Welcome header: stack stats below greeting */
  .home-welcome-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .home-welcome-stats {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Budget grid: single column */
  .home-budget-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Budget: responsive detail table + dashboard header ─────────── */
/* On narrow screens we drop the Vendor column entirely (often empty
   for template rows anyway), give Description the reclaimed space,
   and tighten the numeric column widths so the table fits without
   horizontal scroll. The delete button also becomes always-visible
   on touch since there's no hover to reveal it. */
@media (max-width: 560px) {
  /* Tighten outer padding so the table itself has more room */
  .cr-budget-detail-table { padding: 0 10px 16px !important; }

  /* Drop the 520px min-width — we're collapsing a column so the table
     fits inside narrow viewports now. */
  .cr-budget-table { min-width: 0 !important; }

  /* New 5-column grid: description | budget | actual | variance | delete */
  .cr-budget-row {
    grid-template-columns: 1fr 82px 82px 70px 28px !important;
    gap: 4px !important;
  }

  /* Hide the Vendor column (always the first child in every row variant:
     head, data, subcategory subtotal, category total). */
  .cr-budget-row > *:first-child { display: none !important; }

  /* Description cell: allow 2-line wrap so long names stay readable */
  .cr-budget-row [title],
  .cr-budget-row > *:nth-child(2) {
    font-size: 13px !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }

  /* Numeric columns: shrink font + padding */
  .cr-budget-row > *:nth-child(3),
  .cr-budget-row > *:nth-child(4),
  .cr-budget-row > *:nth-child(5) {
    font-size: 12px !important;
    padding: 6px 4px !important;
  }

  /* Header row: even more compact labels on mobile */
  .cr-budget-row--head > * { font-size: 9px !important; padding: 2px !important; }

  /* Delete button: always visible on touch (no hover-to-reveal) */
  .cr-budget-row button { opacity: 1 !important; }

  /* Dashboard header: tighter spacing on phone */
  .cr-budget-dash-header {
    gap: 8px !important;
    padding: 12px 12px !important;
  }
  .cr-budget-dash-header h2 {
    font-size: 16px !important;
  }

  /* Cash-flow: 2-up on phones instead of 4-up */
  .cr-budget-cf-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Summary cards (Budget / Actual / Variance) shrink font */
  .cr-budget-detail-table ~ * { }
}

/* Prevent iOS Safari from auto-zooming when the user focuses a budget cell
   input. iOS zooms if the field's font-size < 16px, and doesn't zoom back
   out on blur — leaving the page awkwardly scaled. Bump budget table inputs
   (which use inline 13px/14px) to 16px on phones. */
@media (max-width: 768px) {
  .cr-budget-detail-table input,
  .cr-budget-table input {
    font-size: 16px !important;
  }
}

/* Extra-tight screens (< 380px — iPhone SE, folded): drop one more column */
@media (max-width: 380px) {
  .cr-budget-row {
    grid-template-columns: 1fr 74px 74px 28px !important;
  }
  /* Hide the Variance column (5th child in original 6-column layout).
     Users still see Budget and Actual, and Variance is shown per-category
     in the summary cards above the table. */
  .cr-budget-row > *:nth-child(5) { display: none !important; }
}

/* ─── Dashboard header: stack grand-opening widget on narrow screens ── */
/* The widget has a 280px fixed inline width; below ~720px of available
   header space it forces the dates to collide, so we let the header wrap
   (already flex-wrap:wrap) and widen the widget to full width below 720px. */
@media (max-width: 720px) {
  .cr-dash-header {
    padding: 16px 16px !important;
  }
  .cr-dash-countdown {
    width: 100% !important;
    margin-top: 8px;
  }
}

/* ─── Header icon buttons (notification, feedback, settings) ───────── */
/* Keeps all header action buttons consistent in size + cramming behaviour
   so adding/removing one (like the new feedback button) doesn't push
   siblings off the end of the bar. */
.cr-header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 34px;
  min-height: 34px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.cr-header-icon-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* On phones the header starts to cram. Shrink the search input so there's
   room for bell + feedback + gear + avatar without wrapping. */
@media (max-width: 600px) {
  .cr-search-input {
    width: clamp(96px, 24vw, 140px) !important;
  }
  .cr-search-input:focus {
    width: clamp(140px, 36vw, 200px) !important;
  }
  /* Tighten header gap so a 6th control (feedback) fits without wrapping */
  #header { gap: 8px !important; padding: 0 10px !important; }
}

/* Very small phones: hide the search input entirely — users can still
   navigate via the sidebar — and keep all icon buttons visible. */
@media (max-width: 420px) {
  .cr-search-input { display: none !important; }
}

/* ─── Permits: card layout on phones ──────────────────────────────
   Below 640px the 6-column grid is unreadable. Override to a flex column
   where each field renders on its own line with an inline label. The
   table header row is hidden programmatically above this breakpoint. */
@media (max-width: 640px) {
  .cr-permits-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cr-permit-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 12px 14px !important;
    position: relative;
  }
  /* Permit name line (keep big, make room for the absolute-positioned status) */
  .cr-permit-row > *:nth-child(1) {
    font-size: 14px !important;
    font-weight: 600 !important;
    padding-right: 90px; /* reserves space for status badge */
  }
  /* Status badge pinned to the top-right corner of the card */
  .cr-permit-row .cr-permit-status-col {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
  }
  /* Every other field: inline label + value */
  .cr-permit-row > *[data-label] {
    font-size: 11px !important;
    color: var(--c-slate) !important;
  }
  .cr-permit-row > *[data-label]:not([data-label=''])::before {
    content: attr(data-label) ': ';
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--c-mid-gray);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 5px;
  }
}

/* ── Print styles for Daily Reports ────────────────────────────── */
@media print {
  /* Modal print support (daily reports, draws, etc.) */
  .modal-overlay { position: static !important; background: none !important; }
  .modal-overlay > div { box-shadow: none !important; max-width: none !important; width: 100% !important; max-height: none !important; overflow: visible !important; }
  .daily-report-print .no-print { display: none !important; }
  .draw-print .no-print { display: none !important; }
  .draw-print .draw-header { display: block !important; text-align: center; margin-bottom: 20px; }
  .draw-print .draw-sigs { display: block !important; }
  .draw-print table { page-break-inside: avoid; }
  .punch-list-print .no-print { display: none !important; }
}