/* ==========================================================================
   Modern Light Theme — clean, minimal refresh layered on top of app.css
   Only affects body.day-mode. Dark mode is untouched.
   ========================================================================== */

body.day-mode {
  --bg: #F6F7FB !important;
  --surface: #FFFFFF !important;
  --surface2: #F1F3F8 !important;
  --border: #E7EAF2 !important;
  --text: #14181F !important;
  --muted: #6B7280 !important;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 10px rgba(16,24,40,0.06), 0 2px 4px rgba(16,24,40,0.04);
  --shadow-lg: 0 12px 28px rgba(16,24,40,0.10), 0 4px 10px rgba(16,24,40,0.05);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.1px;
}

/* ---- Header: flat, calm, no gradient noise ---- */
body.day-mode .header {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md);
  backdrop-filter: none !important;
}
body.day-mode .header-title { letter-spacing: -0.3px !important; }
body.day-mode .brand-text { background: linear-gradient(90deg,#94A3B8,var(--accent)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }

/* ---- Cards: soft elevation instead of heavy borders ---- */
body.day-mode .stat-card,
body.day-mode .order-card,
body.day-mode .order-card-grid,
body.day-mode .order-card-compact,
body.day-mode .detail-card,
body.day-mode .form-section,
body.day-mode .settings-card,
body.day-mode .info-chip,
body.day-mode .dev-card,
body.day-mode .quick-stat-pill {
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 16px !important;
}
body.day-mode .stat-card:active,
body.day-mode .order-card:active,
body.day-mode .order-card-grid:active,
body.day-mode .order-card-compact:active {
  box-shadow: var(--shadow-md) !important;
}
body.day-mode .stat-card::before { display: none !important; }

/* ---- Buttons: flatter, clearer ---- */
body.day-mode .btn-primary {
  background: var(--accent) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 14px !important;
}
body.day-mode .btn-outline,
body.day-mode .btn-back,
body.day-mode #mode-btn {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
body.day-mode .status-btn { box-shadow: var(--shadow-sm) !important; }

/* ---- Forms: soft focus ring, calmer fields ---- */
body.day-mode .form-input,
body.day-mode .form-textarea,
body.day-mode .form-select {
  background: #FBFCFE !important;
  border-color: var(--border) !important;
  border-radius: 12px !important;
}
body.day-mode .form-input:focus,
body.day-mode .form-textarea:focus,
body.day-mode .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.12) !important;
  background: #FFFFFF !important;
}
body.day-mode .search-input {
  box-shadow: var(--shadow-sm) !important;
  border-radius: 14px !important;
}

/* ---- Bottom nav: clean flat bar ---- */
body.day-mode .bottom-nav {
  background: #FFFFFF !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -2px 10px rgba(16,24,40,0.05);
}
body.day-mode .nav-btn.active .nav-icon { animation: none !important; }

/* ---- Hero summary card: simplified shadow ---- */
body.day-mode .hero-summary { box-shadow: var(--shadow-lg) !important; }

/* ---- Modal sheets & popovers ---- */
body.day-mode .modal-sheet,
body.day-mode .photo-picker-sheet,
body.day-mode .search-dropdown {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--border) !important;
}

/* ---- FAB: quieter pulse ---- */
body.day-mode #fab-add {
  box-shadow: var(--shadow-lg) !important;
  animation: none !important;
}

/* ---- Pills / chips ---- */
body.day-mode .pill { box-shadow: var(--shadow-sm) !important; }
body.day-mode .pill.active { box-shadow: var(--shadow-md) !important; }

/* ---- Toast: softer ---- */
body.day-mode #toast { box-shadow: var(--shadow-lg) !important; }

/* ---- Reduce visual noise from decorative glow animations ---- */
body.day-mode .sync-dot { animation: pulse 2s infinite !important; }

/* ---- Avatars: thin subtle ring instead of thick colored border ---- */
body.day-mode .card-avatar,
body.day-mode .gc-avatar,
body.day-mode .cc-avatar,
body.day-mode .detail-avatar,
body.day-mode .profile-photo-ring {
  border-width: 2px !important;
  border-color: rgba(var(--accent-rgb),0.55) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ---- Cards: drop the outline, let the shadow do the work (flatter, cleaner) ---- */
body.day-mode .stat-card,
body.day-mode .order-card,
body.day-mode .order-card-grid,
body.day-mode .order-card-compact,
body.day-mode .detail-card,
body.day-mode .form-section,
body.day-mode .settings-card,
body.day-mode .info-chip,
body.day-mode .dev-card,
body.day-mode .quick-stat-pill {
  border-color: transparent !important;
}

/* ---- Extra breathing room between order cards / list items ---- */
body.day-mode #orders-list,
body.day-mode .orders-compact { gap: 10px !important; }
body.day-mode .order-card { margin-bottom: 4px; }
body.day-mode .content { padding-left: 16px !important; padding-right: 16px !important; }

/* ---- Softer, less shouty status/balance chips ---- */
body.day-mode .balance-chip,
body.day-mode .paid-chip { box-shadow: none !important; font-weight: 700 !important; }
body.day-mode .cc-chip { font-weight: 700 !important; }

/* ---- Hero card: keep brand gradient but calmer edge ---- */
body.day-mode .hero-summary { box-shadow: var(--shadow-md) !important; }

/* ---- Order card text: fix truncation + more breathing room ---- */
body.day-mode .order-naap-code {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
body.day-mode .order-name { margin-bottom: 1px; }
body.day-mode .order-naap-code { margin-top: 4px !important; }
body.day-mode .order-phone-line { margin-top: 6px !important; }
body.day-mode .order-card-top > div:first-child { min-width: 0; }
body.day-mode .order-card-top > div:first-child > div[style*="min-width:0"] { min-width: 0; max-width: 100%; overflow: hidden; }

/* ---- Balance/paid/status chips: smaller, sharper, hairline edge ---- */
body.day-mode .balance-chip,
body.day-mode .paid-chip {
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  border: 1px solid currentColor;
  opacity: 0.95;
}
body.day-mode .balance-chip { border-color: #EF444440 !important; }
body.day-mode .paid-chip { border-color: #10B98140 !important; }

/* ---- Card footer: hairline instead of dashed ---- */
body.day-mode .order-card-footer {
  border-top-style: solid !important;
  border-top-width: 1px !important;
  padding-top: 10px !important;
  margin-top: 12px !important;
}

/* ---- Hero card: flatten the gradient a touch for a calmer, premium feel ---- */
body.day-mode .hero-summary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 130%) !important;
}

/* ---- Empty avatar placeholder: soft accent-tinted circle instead of flat grey ---- */
body.day-mode .card-avatar,
body.day-mode .gc-avatar,
body.day-mode .cc-avatar,
body.day-mode .detail-avatar,
body.day-mode .profile-photo-img {
  background: linear-gradient(150deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.07)) !important;
}
body.day-mode .card-avatar svg,
body.day-mode .gc-avatar svg,
body.day-mode .cc-avatar svg,
body.day-mode .detail-avatar svg,
body.day-mode .profile-photo-img svg {
  color: rgba(var(--accent-rgb),0.75) !important;
  stroke-width: 1.6 !important;
}

/* ---- Filter pills (All / Due / Paid): more distinct active state ---- */
body.day-mode .pill {
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}
body.day-mode .pill.active {
  box-shadow: 0 4px 12px -3px rgba(var(--accent-rgb),0.55) !important;
  font-weight: 800 !important;
}

/* ---- Space the overdue/in-progress/advance chip row away from the hero card ---- */
body.day-mode .hero-summary { margin-bottom: 14px !important; }
body.day-mode .chip-row { margin-top: 2px !important; margin-bottom: 16px !important; }
body.day-mode .info-chip {
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

/* ---- View toggle (list/grid/compact): bigger tap targets ---- */
body.day-mode .view-toggle-row .view-btns { padding: 4px !important; gap: 3px !important; }
body.day-mode .view-btn {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
}
body.day-mode .view-btn.active {
  box-shadow: var(--shadow-sm) !important;
}