/* ============================================================
   LAYOUTS — Page Structure, Sidebar, Header, Split View, Responsive
   ============================================================
   Source: css/styles.css
   - Main layout: line 49, lines 416, 445
   - Sidebar: lines 417-443
   - Header: line 45, lines 693-718
   - Customers layout: lines 139-175
   - Split view: lines 446-692
   - Notifications: lines 695-717
   - Responsive breakpoints: lines 765-768, 900, 1263-1498
   - Desktop readability: lines 1724-1750, 1854-1865
   - Print: line 768
   ============================================================ */

/* ---------- Main Layout ---------- */
.header { display: none; }
.main { padding: 1.5rem 2rem 3rem; max-width: 1440px; margin: 0 auto; }
.app-layout { display: flex; min-height: 100vh; }
.main-content { margin-left: var(--sidebar-width); flex: 1; min-height: 100vh; transition: margin-left var(--transition); overflow-y: auto; }
.main-body { padding: 1.5rem 2rem 3rem; max-width: 1440px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Sidebar ---------- */
.sidebar { width: var(--sidebar-width); background: linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%); border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform var(--transition); }
.sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: radial-gradient(circle at 50% 0%, rgba(212,175,55,0.06) 0%, transparent 70%); pointer-events: none; }
.sidebar-brand { padding: 1.25rem 1rem; border-bottom: 1px solid var(--glass-border); text-align: center; position: relative; overflow: visible; flex-shrink: 0; }
.sidebar-brand .brand-logo { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 20px rgba(212,175,55,0.3); margin: 0 auto 0.5rem; object-fit: cover; display: block; }
.sidebar-brand h1 { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; line-height: 1.3; overflow: visible; overflow-wrap: break-word; word-wrap: break-word; }
.sidebar-brand .brand-sub { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; color: var(--gray-300); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.2rem; overflow: visible; overflow-wrap: break-word; word-wrap: break-word; white-space: normal; max-width: 100%; display: block; }
.sidebar-nav { flex: 1; padding: 0.75rem 0; overflow-y: auto; }
.nav-heading { padding: 0.5rem 1.25rem 0.2rem; font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 0.5rem; user-select: none; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: color 0.2s; }
.nav-heading:hover { color: var(--champagne); }
.nav-heading .nav-chevron { font-size: 0.5rem; transition: transform 0.25s ease; color: var(--gray-500); margin-right: 0.25rem; }
.nav-heading.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-heading::after { content: ''; position: absolute; bottom: 0; left: 1.25rem; right: 1.25rem; height: 1px; background: linear-gradient(90deg, var(--gold-dark), transparent); }
.nav-heading:first-child { margin-top: 0; }
.nav-section-items { overflow: hidden; max-height: 500px; transition: max-height 0.3s ease, opacity 0.25s ease; opacity: 1; }
.nav-section-items.collapsed { max-height: 0; opacity: 0; }
.nav-star { position:absolute; right:0.5rem; font-size:0.7rem; cursor:pointer; color:var(--gray-600); opacity:0.3; transition:all 0.2s; z-index:2; }
.nav-star:hover { opacity:1; color:var(--gold); transform:scale(1.2); }
.nav-star.starred { opacity:1; color:var(--gold); }
.nav-item.fav-dragging { opacity:0.5; }
#favorites-list .nav-item { border-left:3px solid transparent; }
#favorites-list .nav-item.drag-over { border-left-color:var(--gold); background:rgba(212,175,55,0.08); }
.nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1.25rem; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 0.82rem; color: var(--gray-300); cursor: pointer; transition: all var(--transition); text-transform: uppercase; letter-spacing: 0.5px; border-left: 3px solid transparent; position: relative; }
.nav-item:hover { color: var(--champagne); background: rgba(212, 175, 55, 0.05); }
.nav-item.active { color: var(--gold); background: linear-gradient(90deg, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0.02) 100%); border-left-color: var(--gold); }
.nav-item .nav-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; }
.nav-item .nav-shortcut { position: absolute; right: 0.75rem; font-size: 0.6rem; color: var(--gray-500); background: var(--navy); padding: 0.1rem 0.35rem; border-radius: 3px; font-family: monospace; }
.sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid var(--glass-border); font-size: 0.7rem; color: var(--gray-500); text-align: center; overflow: visible; flex-shrink: 0; }
.sidebar-toggle { display: none; position: fixed; top: 0.75rem; left: 0.75rem; z-index: 300; background: var(--navy-light); border: 1px solid var(--gold); color: var(--gold); padding: 0.5rem; border-radius: var(--radius); cursor: pointer; font-size: 1.2rem; line-height: 1; }

/* Sidebar swipe-to-hide (iPad/tablet) */
.sidebar.sidebar-hidden { transform: translateX(-100%); }
.sidebar.sidebar-hidden + .main-content { margin-left: 0; }
#sidebar-reveal-tab { -webkit-tap-highlight-color: transparent; }
#sidebar-reveal-tab:hover { background: rgba(212,175,55,0.45); }
body.day-mode #sidebar-reveal-tab { background: rgba(37,99,235,0.15); border-color: rgba(37,99,235,0.3); color: #2563EB; }
body.day-mode #sidebar-reveal-tab:hover { background: rgba(37,99,235,0.3); }

/* ---------- Main Header ---------- */
.main-header { position: sticky; top: 0; z-index: 100; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); padding: 0.75rem 2rem; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); flex-shrink: 0; }
.main-header .page-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: 1.2rem; color: var(--gold); }

/* ---------- Notifications ---------- */
.notif-wrapper { position: relative; }
.notif-bell { background: none; border: none; cursor: pointer; font-size: 1.35rem; color: var(--champagne); position: relative; padding: 0.3rem 0.5rem; border-radius: var(--radius); transition: background 0.2s; }
.notif-bell:hover { background: rgba(212,175,55,0.1); }
.notif-badge { position: absolute; top: 0; right: 0; background: var(--red); color: white; font-size: 0.55rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-family: 'Inter', sans-serif; }
.notif-badge:empty, .notif-badge[data-count="0"] { display: none; }
.notif-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-height: 520px; background: var(--navy-light); border: 1px solid var(--gold-dim); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 999; overflow: hidden; }
.notif-dropdown.open { display: block; animation: notifSlide 0.2s ease-out; }
@keyframes notifSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--navy-lighter); }
.notif-header-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: 0.9rem; color: var(--gold); }
.notif-clear { font-size: 0.7rem; color: var(--gray-500); cursor: pointer; background: none; border: none; padding: 0.2rem 0.5rem; border-radius: 4px; }
.notif-clear:hover { color: var(--champagne); background: var(--navy-lighter); }
.notif-body { max-height: 440px; overflow-y: auto; padding: 0.25rem 0; }
.notif-item { display: flex; gap: 0.6rem; padding: 0.6rem 1rem; border-bottom: 1px solid rgba(26,45,74,0.5); cursor: pointer; transition: background 0.15s; align-items: flex-start; }
.notif-item:hover { background: rgba(212,175,55,0.05); }
.notif-item.unread { border-left: 3px solid var(--gold); }
.notif-icon { font-size: 1.1rem; flex-shrink: 0; width: 28px; text-align: center; margin-top: 2px; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 0.78rem; font-weight: 600; color: var(--champagne); margin-bottom: 2px; }
.notif-desc { font-size: 0.7rem; color: var(--gray-300); line-height: 1.4; }
.notif-time { font-size: 0.6rem; color: var(--gray-500); margin-top: 3px; }
.notif-empty { text-align: center; padding: 2rem 1rem; color: var(--gray-500); font-size: 0.82rem; }
.notif-section { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-500); padding: 0.5rem 1rem 0.25rem; }

/* ---------- Customers Layout ---------- */
.customers-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; min-height: 600px; transition: grid-template-columns 0.3s ease; }
.customers-layout.has-detail { grid-template-columns: 260px 340px 1fr; }
.customer-info-panel { display: none; border-left: 1px solid var(--navy-lighter); border-right: 1px solid var(--navy-lighter); overflow-y: auto; max-height: 80vh; background: var(--navy-light); }
.customer-jobs-panel { display: none; overflow-y: auto; max-height: 80vh; padding: 0.75rem; }
.customers-layout.has-detail .customer-info-panel,
.customers-layout.has-detail .customer-jobs-panel { display: block; }
.customers-layout.has-detail .customer-detail { display: none; }
.customer-sidebar { background: var(--navy-light); border: 1px solid var(--navy-lighter); border-radius: var(--radius-lg); padding: 1rem; overflow-y: auto; max-height: 700px; }
.customer-search { margin-bottom: 0.75rem; }
.customer-search input { font-size: 0.82rem; padding: 0.45rem 0.65rem; }
.customer-filters { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--navy-lighter); }
.customer-filters .filter-row { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.customer-filters .filter-row label { font-size: 0.68rem; margin-bottom: 0; min-width: 50px; color: var(--gray-500); }
.customer-filter-btn { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 0.65rem; padding: 0.2rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--navy-lighter); background: var(--navy); color: var(--gray-300); cursor: pointer; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.2px; }
.customer-filter-btn:hover { border-color: var(--gold); color: var(--gold); }
.customer-filter-btn.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.customer-count { font-size: 0.72rem; color: var(--gray-500); margin-bottom: 0.5rem; padding: 0 0.25rem; }
.archived-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--gray-500); cursor: pointer; margin-top: 0.35rem; }
.archived-toggle input { width: 14px; height: 14px; accent-color: var(--gold); }
.customer-list-item { padding: 0.6rem 0.75rem; border-radius: var(--radius); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.15s; font-size: 0.88rem; }
.customer-list-item:hover { background: var(--navy-lighter); }
.customer-list-item.active { background: var(--navy-lighter); border-left: 3px solid var(--gold); }
.customer-list-item.archived-item { opacity: 0.5; }
.customer-list-item .cust-type { font-size: 0.65rem; padding: 0.15rem 0.4rem; border-radius: 4px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
.customer-list-item .cust-stage { font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 3px; text-transform: uppercase; font-weight: 600; background: rgba(212,175,55,0.15); color: var(--gold); }
.customer-detail { background: var(--navy-light); border: 1px solid var(--navy-lighter); border-radius: var(--radius-lg); padding: 1.25rem; }
.customer-detail .detail-name { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--gold); margin-bottom: 0.75rem; }
.customer-detail .detail-row { display: flex; gap: 0.5rem; font-size: 0.85rem; margin-bottom: 0.3rem; }
.customer-detail .detail-row .dlabel { color: var(--gray-500); min-width: 70px; }

/* =============================================
   SPLIT VIEW v2 — Fully Rebuilt (source: lines 446-692)
   ============================================= */
body.split-view { overflow: hidden; }
body.split-view html, html.split-view-active { zoom: 1 !important; }
.split-shell {
  display: none;
  position: fixed;
  top: 0; left: var(--sidebar-width); right: 0; bottom: 0;
  z-index: 200;
  flex-direction: column;
  background: var(--navy);
}
body.split-view .split-shell { display: flex; }
body.split-view .main-content { display: none !important; }
.split-shell.orientation-h { flex-direction: column; }
.split-shell.orientation-v { flex-direction: column; }
.split-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.split-shell.orientation-v .split-row { flex-direction: column; }
.split-pane {
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 200px;
  overflow: hidden;
  position: relative;
  background: var(--navy);
}
.split-shell.orientation-v .split-pane { min-width: unset; min-height: 120px; }
.split-pane.collapsed { flex: 0 0 40px !important; min-width: 40px; }
.split-shell.orientation-v .split-pane.collapsed { flex: 0 0 36px !important; min-height: 36px; min-width: unset; }
.split-pane-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  min-height: 36px;
  z-index: 10;
  overflow: hidden;
}
.split-pane-header .split-tab-select {
  font-size: 0.75rem;
  padding: 0.18rem 0.35rem;
  background: var(--navy);
  border: 1px solid var(--navy-lighter);
  color: var(--champagne);
  border-radius: 4px;
  flex: 1;
  min-width: 0;
  max-width: 200px;
}
.split-pane-header .split-tab-select:focus { outline: 1px solid var(--gold); }
.split-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}
.split-zoom-btn {
  background: none;
  border: 1px solid var(--navy-lighter);
  color: var(--gray-400);
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.split-zoom-btn:hover { color: var(--gold); border-color: var(--gold); }
.split-zoom-label {
  font-size: 0.62rem;
  color: var(--gray-500);
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.split-pane-btn {
  background: none;
  border: 1px solid var(--navy-lighter);
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 0.3rem;
  height: 20px;
  border-radius: 3px;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.split-pane-btn:hover { color: var(--champagne); border-color: var(--champagne); }
.split-pane-btn.danger:hover { color: var(--red); border-color: var(--red); }
.split-pane-btn.gold:hover { color: var(--gold); border-color: var(--gold); }
.split-pane-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  position: relative;
}
.split-pane-scaler {
  padding: 1rem 1.25rem;
  transform-origin: top left;
}
.split-pane.collapsed .split-pane-body { display: none; }
.split-pane.collapsed .split-pane-header .split-tab-select,
.split-pane.collapsed .split-pane-header .split-zoom-controls { display: none; }
.split-pane.collapsed .split-pane-header { justify-content: center; writing-mode: vertical-rl; padding: 0.4rem 0; }
.split-pane.collapsed .split-pane-header .split-pane-btn.collapse-btn { writing-mode: horizontal-tb; }
.split-drag-handle {
  flex-shrink: 0;
  width: 6px;
  background: var(--navy-lighter);
  cursor: col-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 20;
  user-select: none;
}
.split-drag-handle:hover, .split-drag-handle.dragging { background: var(--gold-dim); }
.split-drag-handle::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 32px;
  background: var(--gold-dim);
  border-radius: 2px;
  box-shadow: -3px 0 0 var(--gold-dim), 3px 0 0 var(--gold-dim);
  opacity: 0.6;
  transition: opacity 0.15s;
}
.split-drag-handle:hover::before, .split-drag-handle.dragging::before { opacity: 1; }
.split-shell.orientation-v .split-drag-handle {
  width: unset;
  height: 6px;
  cursor: row-resize;
}
.split-shell.orientation-v .split-drag-handle::before {
  width: 32px;
  height: 2px;
  box-shadow: 0 -3px 0 var(--gold-dim), 0 3px 0 var(--gold-dim);
}
.split-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: var(--navy-light);
  border-bottom: 1px solid var(--gold-dim);
  min-height: 32px;
}
.split-toolbar-title {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.split-toolbar-sep { width: 1px; height: 16px; background: var(--navy-lighter); flex-shrink: 0; }
.split-toolbar-spacer { flex: 1; }
.split-toolbar-btn {
  background: none;
  border: 1px solid var(--navy-lighter);
  color: var(--gray-400);
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.68rem;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.split-toolbar-btn:hover { color: var(--champagne); border-color: var(--champagne); }
.split-toolbar-btn.active { color: var(--gold); border-color: var(--gold); background: rgba(212,175,55,0.08); }
.split-toolbar-btn.close-btn:hover { color: var(--red); border-color: var(--red); }
.split-pane-scaler .tab-content { display: block !important; }
.split-pane-scaler .section-heading { font-size: 1rem; margin-bottom: 0.75rem; }
.split-pane-scaler .card { margin-bottom: 0.75rem; }
.split-pane-scaler .kanban-wrapper,
.split-pane-scaler .jobs-kanban-wrapper { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (max-width: 1199px) {
  body.split-view { overflow: unset; }
  body.split-view .split-shell { display: none !important; }
  body.split-view .main-content { display: block !important; }
}
@media (max-width: 1366px) {
  body.split-view .split-shell { left: 0; }
  body.split-view .sidebar { display: none; }
}

/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */

@media (max-width: 1100px) { .kanban-wrapper { grid-template-columns: repeat(3, 1fr); } .gauge-grid { grid-template-columns: repeat(2, 1fr); } .jobs-kanban-wrapper { grid-template-columns: repeat(3, 1fr); } #kpi-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 900px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar-toggle { display: block; } .main-content { margin-left: 0; } .main-header { padding-left: 3.5rem; } }
@media (max-width: 768px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .kanban-wrapper { grid-template-columns: repeat(2, 1fr); } .customers-layout, .customers-layout.has-detail { grid-template-columns: 1fr; } .customers-layout.has-detail .customer-info-panel, .customers-layout.has-detail .customer-jobs-panel { max-height: none; } .customer-info-panel { border-left: none; border-right: none; border-top: 1px solid var(--navy-lighter); } .main-body { padding: 1rem; } .form-row { flex-direction: column; } .modal-fullscreen { padding: 1.25rem; width: 96%; } .modal-fullscreen .edit-grid { grid-template-columns: 1fr; } .pipeline-filter-bar { flex-direction: column; align-items: flex-start; } .pipeline-cust-filter { margin-left: 0; width: 100%; } .gauge-grid { grid-template-columns: 1fr 1fr; } .jobs-kanban-wrapper { grid-template-columns: 1fr 1fr; } #kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } .notif-dropdown { width: calc(100vw - 2rem); right: -0.5rem; } }
@media print { .sidebar, .sidebar-toggle, .main-header, .toast-container, .motivational-banner { display: none !important; } .main-content { margin-left: 0 !important; } body { background: white; color: black; } .card { border: 1px solid #ccc; background: white; } }

/* =============================================
   DAY MODE OVERRIDES (source: lines 770-861)
   ============================================= */
body.day-mode {
  --navy: #F5F5F5;
  --navy-light: #FFFFFF;
  --navy-lighter: #E5E7EB;
  --gold: #2563EB;
  --gold-dim: #1D4ED8;
  --gold-dark: #1E40AF;
  --gold-light: #60A5FA;
  --gold-alt: #3B82F6;
  --gold-glow: rgba(37, 99, 235, 0.15);
  --gold-gradient: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #3B82F6 100%);
  --gold-gradient-btn: linear-gradient(135deg, #1E40AF 0%, #2563EB 40%, #3B82F6 70%, #60A5FA 100%);
  --champagne: #111827;
  --champagne-dim: #374151;
  --white: #ffffff;
  --gray-300: #6B7280;
  --gray-400: #6B7280;
  --gray-500: #9CA3AF;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-gold: 0 2px 8px rgba(37,99,235,0.15);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --card-hover-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(37,99,235,0.1);
  --emboss-light: none;
  --emboss-dark: none;
  --glass-bg: #FFFFFF;
  --glass-border: #E5E7EB;
  --glass-blur: none;
  color: #111827;
  background: #F5F5F5;
}
body.day-mode .sidebar { background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%); border-right: 1px solid #E5E7EB; }
body.day-mode .sidebar-brand h1 { background: #2563EB; -webkit-background-clip: text; background-clip: text; }
body.day-mode .sidebar-brand .brand-logo { border-color: #2563EB; box-shadow: 0 0 10px rgba(37,99,235,0.15); }
body.day-mode .nav-heading::after { background: linear-gradient(90deg, #E5E7EB, transparent); }
body.day-mode .nav-heading:hover { color: #2563EB; }
body.day-mode .nav-heading .nav-chevron { color: #9CA3AF; }
body.day-mode #ai-model-select { background: #F3F4F6; color: #111827; border-color: #D1D5DB; }
body.day-mode .nav-item:hover { background: #F3F4F6; color: #111827; }
body.day-mode .nav-item.active { color: #2563EB; background: linear-gradient(90deg, rgba(37,99,235,0.08) 0%, transparent 100%); border-left-color: #2563EB; }
body.day-mode .card { background: #FFFFFF; border: 1px solid #E5E7EB; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
body.day-mode .card:hover { border-color: #D1D5DB; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
body.day-mode .card-title { color: #2563EB; }
body.day-mode h2.section-heading { color: #111827; }
body.day-mode input, body.day-mode select, body.day-mode textarea { background: #F9FAFB; border: 1px solid #D1D5DB; color: #111827; }
body.day-mode input:focus, body.day-mode select:focus, body.day-mode textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
body.day-mode .btn-gold { background: linear-gradient(135deg, #1E40AF, #2563EB, #3B82F6); color: white; box-shadow: 0 1px 3px rgba(37,99,235,0.3); text-shadow: none; }
body.day-mode .btn-outline { border-color: #2563EB; color: #2563EB; }
body.day-mode .btn-outline:hover { background: #2563EB; color: white; }
body.day-mode .btn-link { background: #F3F4F6; border-color: #E5E7EB; color: #111827; }
body.day-mode .kanban-col { background: #F9FAFB; border: 1px solid #E5E7EB; }
body.day-mode .kanban-card { background: #FFFFFF; border: 1px solid #E5E7EB; }
body.day-mode .kanban-card:hover { border-color: #2563EB; box-shadow: 0 2px 8px rgba(37,99,235,0.1); }
body.day-mode .kanban-card .card-contact-btns a { background: #F3F4F6; color: #374151; }
body.day-mode .kanban-card .card-contact-btns a:hover { background: #2563EB; color: white; }
body.day-mode .customer-sidebar { background: #FFFFFF; border: 1px solid #E5E7EB; }
body.day-mode .customer-detail { background: #FFFFFF; border: 1px solid #E5E7EB; }
body.day-mode .customer-detail .detail-name { color: #111827; }
body.day-mode .customer-list-item:hover { background: #F3F4F6; }
body.day-mode .customer-list-item.active { background: #EFF6FF; border-left-color: #2563EB; }
body.day-mode .filter-toggle { background: #F9FAFB; border-color: #D1D5DB; color: #374151; }
body.day-mode .filter-toggle:hover { border-color: #2563EB; color: #2563EB; }
body.day-mode .filter-toggle.active { background: #2563EB; color: white; border-color: #2563EB; }
body.day-mode .pipeline-filter-bar { background: #F9FAFB; border-color: #E5E7EB; }
body.day-mode .metrics-period-btn.active { background: #2563EB; color: white; }
body.day-mode .progress-bar-track { background: #E5E7EB; border-color: #D1D5DB; }
body.day-mode .progress-bar-fill { background: linear-gradient(90deg, #1E40AF, #2563EB); color: white; }
body.day-mode .sidebar-toggle { background: #FFFFFF; color: #111827; border: 1px solid #E5E7EB; }
body.day-mode .main-header { background: #FFFFFF; border-bottom: 1px solid #E5E7EB; }
body.day-mode .page-title { color: #111827; }
body.day-mode .modal-overlay { background: rgba(0,0,0,0.4); }
body.day-mode .modal { background: #FFFFFF; border: 1px solid #E5E7EB; color: #111827; }
body.day-mode .modal-title { color: #111827; border-bottom-color: #E5E7EB; }
body.day-mode .section-label { border-top-color: #E5E7EB; color: #6B7280; }
body.day-mode .toast { background: #FFFFFF; border: 1px solid #E5E7EB; color: #111827; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
body.day-mode .kanban-col-header .col-count { background: #E5E7EB; color: #374151; }
body.day-mode .tab-btn { color: #6B7280; }
body.day-mode .tab-btn:hover { color: #111827; background: #F3F4F6; }
body.day-mode .tab-btn.active { color: #2563EB; background: #EFF6FF; border-bottom-color: #2563EB; }
body.day-mode .notif-dropdown { background: #FFFFFF; border: 1px solid #E5E7EB; }
body.day-mode .motivational-banner { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border-color: #BFDBFE; color: #1E40AF; }
body.day-mode #login-screen { background: #F5F5F5; }
body.day-mode .login-card { background: #FFFFFF; border-color: #E5E7EB; }
body.day-mode .login-card input { background: #F9FAFB; border-color: #D1D5DB; color: #111827; }
body.day-mode .portal-layout { background: #F5F5F5; }
body.day-mode .portal-header { background: #FFFFFF; border-bottom-color: #E5E7EB; }
body.day-mode .portal-nav { background: #FFFFFF; border-bottom-color: #E5E7EB; }
body.day-mode .portal-card { background: #FFFFFF; border-color: #E5E7EB; }
body.day-mode .day-toggle { background: #FEF3C7; border-color: #F59E0B; color: #92400E; }
body.day-mode .day-toggle:hover { background: #FDE68A; }

/* =============================================
   IPAD / TABLET FIXES (source: lines 1263-1498)
   ============================================= */

/* Safe area insets for PWA standalone mode + iPhone notch */
@supports (padding: env(safe-area-inset-top)) {
  .sidebar { padding-top: env(safe-area-inset-top); }
  /* Sticky header must sit BELOW the status bar, not under it */
  .main-header { top: env(safe-area-inset-top, 0px); padding-top: 0.75rem; }
  /* Add safe area background fill above header so glass-bg extends behind status bar */
  .main-content::before { content: ''; position: sticky; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); z-index: 101; display: block; flex-shrink: 0; }
  #login-screen { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .main-body { padding-bottom: max(3rem, calc(1rem + env(safe-area-inset-bottom))); }
  #pbf-debug-btn { bottom: max(12px, calc(6px + env(safe-area-inset-bottom))) !important; right: max(12px, calc(6px + env(safe-area-inset-right))) !important; }
  #pbf-debug-panel { padding-bottom: env(safe-area-inset-bottom); }
  .toast-container { right: auto; left: 50%; transform: translateX(-50%); top: max(80px, calc(60px + env(safe-area-inset-top))); width: 90vw; max-width: 360px; align-items: center; }
  .toast { transform: translateY(-20px); }
  .toast.show { transform: translateY(0); }
  .toast.hide { transform: translateY(-20px); }
  .sidebar-toggle { top: max(0.75rem, calc(0.25rem + env(safe-area-inset-top))); left: max(0.75rem, calc(0.25rem + env(safe-area-inset-left))); }
  .modal-overlay { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
}

/* 44px touch targets on touch devices */
@media (pointer: coarse) {
  .btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; min-width: 38px; }
  .nav-item { min-height: 44px; }
  .sidebar-toggle { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .notif-bell { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .modal-fullscreen .modal-close { width: 44px; height: 44px; font-size: 1.3rem; }
  .filter-toggle { min-height: 38px; padding: 0.4rem 0.7rem; }
  .customer-filter-btn { min-height: 36px; padding: 0.3rem 0.6rem; }
  .login-tab { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .tab-btn { min-height: 44px; }
  .metrics-period-btn { min-height: 38px; }
  .checklist-item { min-height: 44px; }
  .checklist-item input[type="checkbox"] { width: 22px; height: 22px; }
  .kanban-card .card-contact-btns a { min-height: 32px; min-width: 32px; padding: 0.25rem 0.5rem; display: inline-flex; align-items: center; }
  .kanban-card .card-delete { min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
  .jk-card .card-delete { min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
  .inv-table .view-btn { min-height: 36px; padding: 0.3rem 0.6rem; }
  .contact-btn { min-height: 38px; padding: 0.35rem 0.7rem; }
  .dbg-tab { min-height: 38px; padding: 0.5rem 0.75rem; }
  .dbg-header-actions button { min-height: 36px; padding: 0.3rem 0.6rem; }
  .split-pane-btn { min-height: 32px; min-width: 32px; }
  .split-zoom-btn { width: 32px; height: 32px; }
  .portal-nav-item { min-height: 44px; display: flex; align-items: center; }
  .cp-theme .cp-nav-link { min-height: 44px; }
  .cp-theme .cp-toggle { min-height: 44px; }
  .lead-task-item .task-sync-btn { width: 36px; height: 36px; }
  .lead-task-item .task-remove { min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
  .checklist-actions button { min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
  .nav-heading { min-height: 40px; display: flex; align-items: center; }
  html { -webkit-text-size-adjust: 100%; }
  .card:hover { transform: none; }
  #inv-actions-menu > div, #ni-actions-menu > div { min-height: 44px; display: flex; align-items: center; }
  input, select, textarea { min-height: 44px; padding: 0.6rem 0.75rem; font-size: 0.85rem; }
  .canvass-pin-btn { min-height: 44px; padding: 0.5rem 0.8rem; font-size: 0.8rem !important; }
  #canvass-map-wrapper + div .btn-sm { min-height: 44px; font-size: 0.78rem; }
  .kanban-card .card-contact-btns a { min-height: 40px; padding: 0.35rem 0.6rem; font-size: 0.75rem; }
  .btn-gold:hover, .btn-outline:hover, .btn-sm:hover { transform: none; }
}

/* iPad portrait and landscape */
@media (min-width: 744px) and (max-width: 1099px) {
  .kanban-wrapper { grid-template-columns: repeat(3, 1fr); }
  .jobs-kanban-wrapper { grid-template-columns: repeat(3, 1fr); }
  .gauge-grid { grid-template-columns: repeat(2, 1fr); }
  .inv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  #kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .customers-layout { grid-template-columns: 260px 1fr; }
  .customers-layout.has-detail { grid-template-columns: 220px 280px 1fr; }
  .main-body { padding: 1.25rem 1.5rem 3rem; }
  .modal-fullscreen { width: 94%; max-width: 700px; max-height: calc(100vh - 2rem); }
  #fp-card-detail .modal-fullscreen { max-width: 96vw; width: 96%; }
  .inv-detail-modal { max-width: 92vw; }
}

/* iPhone (up to 767px) */
@media (max-width: 767px) {
  .customers-layout { grid-template-columns: 1fr !important; }
  .customers-layout.has-detail .customer-info-panel,
  .customers-layout.has-detail .customer-jobs-panel { display: none !important; }
  .customers-layout.has-detail .customer-detail { display: block; }
  .customer-list-item { padding: 0.75rem; min-height: 48px; font-size: 0.92rem; }
  button, .btn, .btn-sm, .btn-gold, .btn-outline { min-height: 44px; }
  select, input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], textarea { min-height: 44px; font-size: 16px !important; }
  .kanban-wrapper, .jobs-kanban-wrapper { grid-template-columns: 1fr; }
  .kanban-col, .jobs-kanban-col { min-height: 200px; }
  .kanban-card, .jk-card { padding: 0.75rem; min-height: 48px; }
  #kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gauge-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .modal { width: 96%; max-width: none; max-height: none; }
  #modal-edit-card .modal { max-height: none; width: 98%; }
  .modal-fullscreen { width: 98%; padding: 1rem; }
  #tt-customer-select, #tt-job-select, #tt-task-select { width: 100%; min-height: 44px; font-size: 16px !important; }
  .sidebar { width: 280px; }
  .main-header { padding: 0.25rem 0.5rem; flex-wrap: wrap; gap: 0; height: auto !important; min-height: auto; justify-content: center; }
  .main-header .page-title { font-size: 0.95rem; width: 100%; text-align: center; order: -1; margin: 0; padding: 0.15rem 0; }
  #header-live-clock { font-size: 0.6rem !important; padding: 0.1rem 0.3rem !important; background: none !important; border: none !important; }
  #offline-indicator { font-size: 0.55rem !important; padding: 0.1rem 0.3rem !important; }
  .main-body { padding: 0.75rem; }
  .motivational-banner { margin-top: 0.25rem; font-size: 0.78rem; padding: 0.5rem 0.75rem; }
  .line-items-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inv-kpi-grid { grid-template-columns: 1fr 1fr; }
  .notif-dropdown { width: calc(100vw - 1rem); right: -0.25rem; }
  .pipeline-filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.4rem 0.5rem; gap: 0.3rem; margin-bottom: 0.5rem; scrollbar-width: none; }
  .pipeline-filter-bar::-webkit-scrollbar { display: none; }
  .pipeline-filter-bar > label { display: none; }
  .filter-toggle { font-size: 0.6rem !important; padding: 0.2rem 0.5rem !important; min-height: 28px !important; white-space: nowrap; flex-shrink: 0; }
  .pipeline-filter-bar .btn { font-size: 0.58rem !important; padding: 0.15rem 0.4rem !important; white-space: nowrap; flex-shrink: 0; margin-left: 0 !important; }
  .pipeline-cust-filter { margin-left: 0; width: auto; flex-shrink: 0; }
  .pipeline-cust-filter label { display: none; }
  .pipeline-cust-filter select { min-width: 100px; font-size: 0.7rem; padding: 0.2rem 0.3rem; }
  .form-row { flex-direction: column; }
  .main-header > div:nth-child(2) { display: none !important; }
  .main-header > input[type="file"] { display: none !important; }
  #header-timer-name { display: none !important; }
  #header-timer-time { font-size: 0.65rem !important; }
  /* V3.16: Mobile UX */
  .modal-overlay .modal {
    width: 95vw;
    max-width: none;
    max-height: 88vh;
    padding: 0.75rem;
    margin: auto;
    border-radius: 12px;
  }
  .modal-title { font-size: 1rem; margin-bottom: 0.5rem; }
  .modal-actions { gap: 0.4rem; flex-wrap: wrap; }
  .form-group {
    width: 100% !important;
    flex: none !important;
  }
  .card { padding: 0.75rem; margin-bottom: 0.75rem; }
  .card-title { font-size: 0.88rem; margin-bottom: 0.5rem; }
  .fp-section { margin-bottom: 0.75rem; padding-bottom: 0.6rem; }
  .fp-section-title { font-size: 0.72rem; margin-bottom: 0.4rem; }
  .fp-detail-row { padding: 0.15rem 0; font-size: 0.78rem; }
  .fp-detail-label { font-size: 0.7rem; min-width: 70px; }
  .modal-fullscreen .detail-name { font-size: 1.1rem; padding-right: 2.5rem; }
  .modal-fullscreen .detail-badges { margin-bottom: 0.6rem; gap: 0.35rem; }
  .modal-fullscreen .section-label { font-size: 0.78rem; padding-top: 0.5rem; margin-bottom: 0.35rem; }
  .modal-fullscreen .action-bar { flex-wrap: wrap; gap: 0.4rem; }
  .modal-fullscreen .action-bar .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  #fp-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.4rem !important; }
  #photo-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
  .modal-fullscreen textarea { width: 100%; min-height: 80px; }
  .fp-task-row { padding: 0.35rem 0; gap: 0.4rem; }
  .fp-task-text { font-size: 0.78rem; }
  .fp-task-sub { font-size: 0.62rem; }
  .contact-btns { gap: 0.35rem; }
  .contact-btn { min-height: 42px; padding: 0.4rem 0.75rem; font-size: 0.75rem; }
  .customer-detail { padding: 0.75rem; }
  .customer-detail .detail-name { font-size: 1.1rem; margin-bottom: 0.5rem; }
  .customer-detail .detail-row { font-size: 0.82rem; margin-bottom: 0.25rem; }
  .btn { min-height: 42px; font-size: 0.82rem; }
  .btn-sm { min-height: 38px; font-size: 0.75rem; }
}

/* iPad split screen / Slide Over */
@media (min-width: 320px) and (max-width: 507px) {
  .kanban-wrapper { grid-template-columns: 1fr; }
  .jobs-kanban-wrapper { grid-template-columns: 1fr; }
  .kanban-col { min-height: 200px; }
  .jobs-kanban-col { min-height: 200px; }
  .gauge-grid { grid-template-columns: 1fr; }
  #kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .inv-kpi-grid { grid-template-columns: 1fr 1fr; }
  .main-header { padding: 0.25rem 0.5rem; flex-wrap: wrap; gap: 0; height: auto !important; min-height: auto; justify-content: center; }
  .main-header .page-title { font-size: 0.95rem; width: 100%; text-align: center; order: -1; margin: 0; padding: 0.15rem 0; }
  #header-live-clock { font-size: 0.6rem !important; padding: 0.1rem 0.3rem !important; background: none !important; border: none !important; }
  #offline-indicator { font-size: 0.55rem !important; padding: 0.1rem 0.3rem !important; }
  .main-body { padding: 0.75rem; }
  .motivational-banner { margin-top: 0.25rem; font-size: 0.78rem; padding: 0.5rem 0.75rem; }
  .main-header > div:nth-child(2) { display: none !important; }
  .main-header > input[type="file"] { display: none !important; }
  #header-timer-name { display: none !important; }
  #header-timer-time { font-size: 0.65rem !important; }
  .customers-layout, .customers-layout.has-detail { grid-template-columns: 1fr; }
  .modal { width: 96%; max-width: none; }
  .modal-fullscreen { width: 98%; padding: 1rem; }
  .line-items-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .notif-dropdown { width: calc(100vw - 1rem); right: -0.25rem; }
  .pipeline-filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.4rem 0.5rem; gap: 0.3rem; margin-bottom: 0.5rem; scrollbar-width: none; }
  .pipeline-filter-bar::-webkit-scrollbar { display: none; }
  .pipeline-filter-bar > label { display: none; }
  .filter-toggle { font-size: 0.6rem !important; padding: 0.2rem 0.5rem !important; min-height: 28px !important; white-space: nowrap; flex-shrink: 0; }
  .pipeline-filter-bar .btn { font-size: 0.58rem !important; padding: 0.15rem 0.4rem !important; white-space: nowrap; flex-shrink: 0; margin-left: 0 !important; }
  .pipeline-cust-filter { margin-left: 0; width: auto; flex-shrink: 0; }
  .pipeline-cust-filter label { display: none; }
  .pipeline-cust-filter select { min-width: 100px; font-size: 0.7rem; padding: 0.2rem 0.3rem; }
  .form-row { flex-direction: column; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Desktop readability (source: lines 1724-1750) */
@media (min-width: 1400px) {
  body { font-size: 17px; }
  .section-heading { font-size: 1.5rem; }
  .card-title { font-size: 1.1rem; }
  .card { font-size: 0.92rem; }
  .btn { font-size: 0.88rem; }
  .btn-sm { font-size: 0.82rem; }
  .form-group label { font-size: 0.88rem; }
  .form-group input, .form-group select, .form-group textarea { font-size: 0.88rem; }
  .nav-item { font-size: 0.72rem !important; padding: 0.35rem 0.75rem !important; }
  .nav-icon { font-size: 0.85rem !important; }
  .section-label { font-size: 0.6rem !important; padding: 0.3rem 0.75rem !important; }
  .pipeline-total-bar { font-size: 1rem; }
  .kanban-card { font-size: 0.88rem; }
  .modal-title { font-size: 1.2rem; }
  .modal { font-size: 0.9rem; }
  .toast { font-size: 0.88rem; }
  .cal-job { font-size: 0.78rem; }
  .cal-header { font-size: 0.82rem; }
  .cal-day { font-size: 0.92rem; }
  table, td, th { font-size: 0.88rem; }
}

/* Ultrawide (source: lines 1854-1865) */
@media (min-width: 2400px) {
  body { font-size: 19px; }
  .section-heading { font-size: 1.7rem; }
  .card-title { font-size: 1.25rem; }
  .card { font-size: 1rem; }
  .btn { font-size: 0.95rem; }
  .btn-sm { font-size: 0.88rem; }
  .nav-item { font-size: 0.75rem !important; padding: 0.4rem 0.75rem !important; }
  .nav-icon { font-size: 0.9rem !important; }
  .modal { font-size: 0.95rem; }
}