/* ==========================================================================
   DIXIT FINANCE ASSOCIATES - EXACT PORTFOLIO DESKTOP APP REPLICA (CSS)
   ========================================================================== */

:root {
  /* System UI Native Fonts matching Tkinter desktop feel */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* DEFAULT LIGHT MODE — Eye-relaxing warm white */
  --bg-app: #F5F5F7;         /* Warm off-white, easy on eyes */
  --bg-sidebar: #0d1b2a;
  --bg-card: #ffffff;
  --bg-hover: #eef0f4;
  --border-color: #d1d5db;
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --card-shadow: #dde1e9;
  
  /* Semantic Accents — vivid blue CTA */
  --primary-color: #3B82F6;
  --primary-hover: #2563EB;
  --primary-glow: rgba(59, 130, 246, 0.20);
  
  --success-color: #059669;
  --success-glow: rgba(5, 150, 105, 0.15);
  --warning-color: #D97706;
  --warning-glow: rgba(217, 119, 6, 0.15);
  --danger-color: #DC2626;
  --danger-glow: rgba(220, 38, 38, 0.15);

  /* #6 — About page uses same vars so light-mode toggling works */
  --about-text: #111827;
  --about-card-bg: #eef0f4;
  --about-border: #d1d5db;
  
  --border-radius: 12px;
  --transition-speed: 0s; /* Instant theme switching — no delay */
}

/* DARK MODE OVERRIDES (Matches theme.py NEGATIVE_MODE) */
body.dark-mode {
  --bg-app: #1a1c1e;
  --bg-sidebar: #0a0a0a;
  --bg-card: #242629;
  --bg-hover: #1e2022;
  --border-color: #333333;
  --text-primary: #e0e0e0;
  --text-secondary: #8a8d90;
  --card-shadow: #000000;
  
  --primary-color: #5271ff;
  --primary-hover: #3b50c4;
  --primary-glow: rgba(82, 113, 255, 0.18);
  --danger-color: #ef476f;

  /* #6 — About page dark mode overrides */
  --about-text: #e0e0e0;
  --about-card-bg: #1e293b;
  --about-border: #334155;
}

/* --- Base & Reset Rules --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
  font-family: var(--font-primary);
}

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background-color: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
}

/* --- Utilities --- */
.hidden { display: none !important; }
.text-green { color: var(--success-color) !important; }
.text-red { color: var(--danger-color) !important; }
.text-yellow { color: var(--warning-color) !important; }
.text-blue { color: var(--primary-color) !important; }
.font-bold { font-weight: 700 !important; }
.text-italic { font-style: italic !important; }
.text-center { text-align: center !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 2rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.flex-1 { flex: 1 !important; }
.w-100 { width: 100% !important; }
.divider { border: 0; border-top: 1px solid var(--border-color); }

/* --- App Container Grid --- */
.app-container {
  display: flex;
  width: 100vw;
  min-height: 100vh;
}

/* --- Left Sidebar Navigation --- */
.sidebar {
  width: 200px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
}

.logo-container {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-logo-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.sidebar-logo-text {
  font-size: 13px;
  font-weight: 800;
  color: white;
  text-align: center;
  /* #7 — Fix line-height & padding to prevent overlap with logo image */
  line-height: 1.25;
  padding: 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-links {
  padding: 24px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.nav-item {
  width: 100%;
  background: none;
  border: none;
  color: #94a3b8;
  padding: 12px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition: all var(--transition-speed);
}

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

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

.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  /* White outlined box so it stands out on dark sidebar */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  margin: 8px 10px 10px;
}

.zoom-controls {
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 6px !important;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: all var(--transition-speed);
}
.theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
}

/* --- Main content viewport --- */
.main-content {
  margin-left: 200px;
  flex: 1;
  padding: 30px 40px;
  min-height: 100vh;
  /* Prevent zoom overflow from breaking layout — horizontal scroll instead */
  overflow-x: auto;
}

.content-view {
  display: none;
}

.content-view.active {
  display: block;
}

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.view-header h1 {
  font-size: 28px; /* Matches Tkinter font size */
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.search-wrap {
  display: flex;
  gap: 12px;
}

.search-input {
  max-width: 400px;
}

/* --- Inputs & Dropdowns --- */
.form-control {
  width: 100%;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13.5px;
  outline: none;
}

.form-control:focus {
  border-color: var(--primary-color);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 32px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-primary {
  background-color: var(--primary-color);
  color: white;
  background-image: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  box-shadow: 0 2px 10px var(--primary-glow);
  letter-spacing: 0.3px;
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, var(--primary-hover) 0%, #1d4ed8 100%);
  box-shadow: 0 6px 20px var(--primary-glow);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-secondary {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.btn-secondary:hover {
  background-color: var(--border-color);
  border-color: var(--text-secondary);
}

.btn-danger {
  background-color: var(--danger-color);
  color: white;
  box-shadow: 0 2px 8px var(--danger-glow);
}
.btn-danger:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--danger-glow);
}

/* Date shortcut navigation buttons (Yesterday / Tomorrow) */
.date-shortcut-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-card);
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.date-shortcut-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--primary-glow);
}

/* --- Card Styles --- */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 4px 4px 0 var(--card-shadow); /* Matches flat shadow simulation */
}

/* --- Three-Column Dashboard Grid --- */
.dashboard-three-col-layout {
  display: block;
  position: relative;
}

.dash-middle-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-right: 260px; /* Leave space for fixed operations sidebar */
}

.dash-right-column {
  background-color: #0f172a; /* Fixed dark background matching Tkinter right_col */
  border-left: 1px solid var(--border-color);
  width: 260px;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* --- Live Operations Sidebar Right Column --- */
.live-ops-header {
  background-color: #b91c1c; /* Crimson alert header */
  color: white;
  padding: 18px 16px;
  text-align: center;
}

.live-ops-header h3 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.live-ops-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ops Card layout (op_card widget replica) */
.ops-item {
  display: flex;
  align-items: center;
  background-color: #1e293b; /* Dark slate background */
  border: 1px solid #334155;
  padding: 15px 20px;
  border-radius: var(--border-radius);
  transition: border-color var(--transition-speed), border-width 0.05s;
}

.ops-icon {
  font-size: 16px;
  background-color: #0f172a; /* Dark square backdrop */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 15px;
}

/* Specific ops colors */
.ops-item:nth-child(1) { --accent-color: #9333ea; }
.ops-item:nth-child(2) { --accent-color: #ef476f; }
.ops-item:nth-child(3) { --accent-color: #06d6a0; }
.ops-list-card:nth-child(4) { --accent-color: #ef476f; }
.ops-list-card:nth-child(5) { --accent-color: #3e5c76; }

.ops-item:hover, .ops-list-card:hover {
  border-color: var(--accent-color) !important;
  border-width: 2px !important;
  padding-top: 14px;
  padding-bottom: 14px;
}

.ops-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ops-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.ops-val {
  font-size: 18px;
  font-weight: 700;
  color: white;
}

.ops-list-card {
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ops-list-header {
  display: flex;
  align-items: center;
}

.ops-scrollable-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ops-list-item {
  font-size: 11px;
  color: #cbd5e1;
  padding: 6px 0;
  border-bottom: 1px dashed #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0; /* Prevent squishing inside the flex container */
}

.ops-list-item:last-child {
  border-bottom: none;
}

/* --- KPI Summary Card Grid (ElevatedCard Replica) --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.kpi-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  position: relative;
  box-shadow: 4px 4px 0 var(--card-shadow);
  transition: border-color var(--transition-speed);
}

/* Simulated status bar accent (top border 6px thick) */
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.kpi-card:nth-child(1)::before { background-color: var(--primary-color); }
.kpi-card:nth-child(2)::before { background-color: var(--warning-color); }
.kpi-card:nth-child(3)::before { background-color: var(--success-color); }
.kpi-card:nth-child(4)::before { background-color: var(--danger-color); }

.kpi-card:hover {
  border-color: var(--primary-color);
  cursor: pointer;
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.kpi-title {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.kpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.kpi-card:nth-child(1) .kpi-dot { background-color: var(--primary-color); }
.kpi-card:nth-child(2) .kpi-dot { background-color: var(--warning-color); }
.kpi-card:nth-child(3) .kpi-dot { background-color: var(--success-color); }
.kpi-card:nth-child(4) .kpi-dot { background-color: var(--danger-color); }

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  /* #2 — Ensure strong contrast in light mode (override secondary/muted color) */
  color: #111827;
  margin-top: 12px;
  margin-bottom: 6px;
}
body.dark-mode .kpi-value {
  color: #f0f4ff;
}

.kpi-subtext {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- NPA Scroll list inner widget --- */
.npa-content-area {
  display: flex;
  flex-direction: column;
}

.kpi-scroll-list-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-hover);
  border-radius: 4px;
  padding: 4px;
  margin-top: 6px;
}

.scroll-arrow {
  font-size: 8px;
  color: var(--text-secondary);
  user-select: none;
}

.kpi-sub-list {
  max-height: 38px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.npa-item {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}

/* --- Tables Layout --- */
.card-table {
  padding: 0;
  overflow: hidden;
}

.table-container, .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table th {
  /* #4 — Table headers match left panel (sidebar) dark theme */
  background-color: #0d1b2a;
  color: #94a3b8;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #1e293b;
  letter-spacing: 0.6px;
}

.table td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

.table tr:hover td {
  background-color: var(--bg-hover);
}

/* --- Status Badges --- */
.badge {
  display: inline-flex;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 12px;
}

.badge-active { background-color: var(--success-glow); color: var(--success-color); }
.badge-overdue { background-color: var(--danger-glow); color: var(--danger-color); }
.badge-pending { background-color: var(--warning-glow); color: var(--warning-color); }
.badge-closed { background-color: rgba(148, 163, 184, 0.15); color: var(--text-secondary); }

/* --- Line Charts --- */
.dashboard-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.chart-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  box-shadow: 4px 4px 0 var(--card-shadow);
}

.chart-card h3 {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.chart-container {
  position: relative;
  height: 200px;
  width: 100%;
}

/* --- Audit Logs Feed (Tkinter replica layout) --- */
.logs-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 4px 4px 0 var(--card-shadow);
}

.logs-card h3 {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.logs-container {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Log row replica */
.log-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--bg-card);
  transition: background-color var(--transition-speed);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}

.log-item:hover {
  background-color: var(--bg-hover);
}

.log-item.selected {
  background-color: var(--bg-hover) !important;
}

.log-badge-widget {
  background-color: var(--primary-color);
  color: white;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  width: 120px;
  text-align: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.log-badge-widget.new-cust { background-color: var(--primary-color); }
.log-badge-widget.emi-paid { background-color: var(--success-color); }
.log-badge-widget.debit { background-color: var(--warning-color); }
.log-badge-widget.deletion { background-color: var(--danger-color); }

.log-text-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.log-desc {
  font-size: 13px;
  color: var(--text-primary);
}

.log-item.undone .log-desc {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.log-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

/* --- Customer Ledger Detail View Layout --- */
.customer-details-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}

.profile-summary-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.profile-title-block h2 {
  font-size: 15px;
  font-weight: 700;
}

.profile-details-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.detail-item .lbl {
  color: var(--text-secondary);
}

.detail-item .val {
  font-weight: 600;
}

.profile-actions-footer {
  display: flex;
  gap: 8px;
}

.ledger-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 16px;
}

.l-stat {
  background-color: var(--bg-hover);
  padding: 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.l-stat .lbl {
  font-size: 10px;
  color: var(--text-secondary);
}

.l-stat .val {
  font-size: 15px;
  font-weight: 700;
}

.ledger-quick-actions {
  display: flex;
  gap: 10px;
}

/* --- Tabs --- */
.tab-header {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
  gap: 8px;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* --- Onboarding Stepper Wizard --- */
.stepper-track-outer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.stepper-line {
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--border-color);
  z-index: 1;
}

.stepper-steps-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
}

.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 60px;
}

.node-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--bg-hover);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.node-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
}

.step-node.active .node-circle {
  background-color: var(--bg-card);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.step-node.active .node-label {
  color: var(--primary-color);
}

.step-node.completed .node-circle {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: white;
}

.step-node.completed .node-label {
  color: var(--success-color);
}

.wizard-step-content { display: none; }
.wizard-step-content.active { display: block; }
.wizard-step-content h3 { font-size: 15px; margin-bottom: 16px; }

.math-preview-card {
  background-color: var(--bg-hover);
  border-radius: 4px;
  padding: 12px 16px;
  border-left: 3px solid var(--primary-color);
}

.preview-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
}

.docs-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.doc-card-upload {
  background-color: var(--bg-hover);
  border: 1.5px dashed var(--border-color);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.doc-card-upload:hover {
  border-color: var(--primary-color);
}

/* --- Recovery Operations Today Tasks --- */
.recovery-workflow-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recovery-nav-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.recovery-tab {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.recovery-tab.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.tasks-panels-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.tasks-list-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.task-card:hover {
  border-color: var(--primary-color);
}

.task-card.active-selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.task-badge-indicator {
  width: 4px;
  align-self: stretch;
  background-color: var(--border-color);
  margin-right: 12px;
  border-radius: 2px;
}

.task-card.task-Red .task-badge-indicator { background-color: var(--danger-color); }
.task-card.task-Orange .task-badge-indicator { background-color: var(--warning-color); }
.task-card.task-Yellow .task-badge-indicator { background-color: var(--primary-color); }
.task-card.task-Green .task-badge-indicator { background-color: var(--success-color); }

.task-card-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.task-meta h4 {
  font-size: 14px;
  font-weight: 700;
}

.task-meta span {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.task-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.task-due-amount {
  font-size: 14.5px;
  font-weight: 700;
}

/* WhatsApp action buttons */
.btn-wa-alert, .btn-wa-offer {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  color: #fff;
}
.btn-wa-alert {
  background: #25d366;
}
.btn-wa-alert:hover {
  background: #1da851;
  transform: scale(1.04);
}
.btn-wa-offer {
  background: #128c7e;
}
.btn-wa-offer:hover {
  background: #0e6e64;
  transform: scale(1.04);
}

.task-interaction-panel {
  position: sticky;
  top: 20px;
  align-self: start;
}

.interaction-header {
  display: flex;
  justify-content: space-between;
}

.task-badge {
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 700;
}

.task-badge.badge-Red { background-color: var(--danger-glow); color: var(--danger-color); }
.task-badge.badge-Orange { background-color: var(--warning-glow); color: var(--warning-color); }
.task-badge.badge-Yellow { background-color: var(--primary-glow); color: var(--primary-color); }
.task-badge.badge-Green { background-color: var(--success-glow); color: var(--success-color); }

.interaction-details p {
  font-size: 12px;
  margin-bottom: 6px;
}

/* --- Modals and backdrops --- */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}

.modal-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 4px 4px 0 var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 { font-size: 15px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; }

/* --- Analytics large layout --- */
.analytics-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.chart-container-large {
  position: relative;
  height: 300px;
  width: 100%;
}

.settings-card {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card h3 {
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

.empty-state {
  padding: 30px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
}

/* ==========================================================================
   SECURE LOGIN OVERLAY (Watermark Logo + Form Grid)
   ========================================================================== */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-app);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.login-watermark-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/assets/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 500px;
  opacity: 0.22; /* Increased opacity for clear visibility as watermark */
  pointer-events: none;
  z-index: 1;
}

.login-card {
  position: relative;
  z-index: 2;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 40px 32px;
  width: 90%;
  max-width: 400px;
  margin: auto;
  box-shadow: 6px 6px 0 var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

/* Top Accent bar for login card */
.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-color: #b91c1c; /* Crimson alert header accent */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.login-logo-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.login-logo-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.login-logo-header h2 {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

.login-logo-header span {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  user-select: none;
}

.input-with-icon {
  padding-left: 36px !important;
}

.login-error {
  background-color: var(--danger-glow);
  color: var(--danger-color);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  border-left: 3px solid var(--danger-color);
}

.btn-login {
  padding: 11px 16px;
  font-size: 13.5px;
  letter-spacing: 0.3px;
}

.login-footer {
  text-align: center;
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ==========================================================================
   CUSTOMERS DIRECTORY SUMMARY KPI CARDS
   ========================================================================== */
.customers-summary-cards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.summary-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--card-shadow);
}

.summary-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.blue-accent::before { background-color: #3b82f6; }
.green-accent::before { background-color: #10b981; }
.orange-accent::before { background-color: #f59e0b; }
.purple-accent::before { background-color: #8b5cf6; }
.pink-accent::before { background-color: #ec4899; }

.summary-kpi-card .card-icon {
  font-size: 20px;
  opacity: 0.85;
}

.card-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-kpi-title {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.card-kpi-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
}

/* ==========================================================================
   INSTALLMENTS LOG FILTERS BAR & ACTION FOOTER
   ========================================================================== */
.search-filters-bar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--card-shadow);
  flex-wrap: wrap;
}

.search-filters-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.search-filters-bar .filter-group label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.justify-end {
  justify-content: flex-end !important;
}

/* ==========================================================================
   ANALYTICS SPLIT 8-CHART GRID & OPERATIONAL KPIS SIDEBAR
   ========================================================================== */
.analytics-split-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

.analytics-charts-area {
  display: flex;
  flex-direction: column;
}

.analytics-layout-grid-8 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.analytics-layout-grid-8 .chart-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analytics-layout-grid-8 .chart-card h3 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
}

.analytics-layout-grid-8 .chart-container {
  position: relative;
  height: 200px;
  width: 100%;
}

.analytics-kpis-sidebar {
  position: sticky;
  top: 20px;
}

.kpis-container-card {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kpis-container-card h3 {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.kpi-box {
  background-color: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform var(--transition-speed);
}

.kpi-box:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

.kpi-lbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.kpi-sub {
  font-size: 9px;
  color: var(--text-secondary);
  font-style: italic;
}

.top-overdue-container h4 {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.top-overdue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.top-overdue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background-color: var(--bg-hover);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.top-overdue-item .name {
  font-size: 11.5px;
  color: var(--text-primary);
  font-weight: 500;
}

.top-overdue-item .amt {
  font-size: 11.5px;
  color: var(--danger-color);
  font-weight: 700;
}

/* --- Toast Notifications Container --- */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast-success {
  background: #059669;
  border-left: 5px solid #34D399;
}
.toast-error {
  background: #DC2626;
  border-left: 5px solid #FCA5A5;
}
.toast-info {
  background: #2563EB;
  border-left: 5px solid #93C5FD;
}
.toast-warning {
  background: #D97706;
  border-left: 5px solid #FCD34D;
}

@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

.forgot-pwd-link {
  color: #3b82f6;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.forgot-pwd-link:hover {
  color: #60a5fa;
  text-decoration: underline;
}

.forgot-pwd-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.forgot-pwd-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: scaleInModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes scaleInModal {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.forgot-pwd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-sidebar);
}
.forgot-pwd-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: white;
}
.forgot-pwd-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.forgot-pwd-close:hover {
  color: white;
}
.forgot-pwd-body {
  padding: 20px;
}
.forgot-pwd-body p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}
.recovery-error {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 15px;
  line-height: 1.4;
}
.recovery-success {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #a7f3d0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.mobile-header-bar {
  display: none;
}

/* ==========================================================================
   MOBILE SIDEBAR OVERLAY BACKDROP
   ========================================================================== */
.mobile-sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 8888;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-sidebar-backdrop.show {
  opacity: 1;
}

/* ==========================================================================
   MOBILE BOTTOM NAV BAR (hidden on desktop)
   ========================================================================== */
.mobile-bottom-nav {
  display: none;
}

/* ==========================================================================
   CHART SWIPE DOTS (hidden on desktop)
   ========================================================================== */
.chart-swipe-dots {
  display: none;
}

/* ==========================================================================
   MOBILE RESPONSIVE LAYOUT — MAX-WIDTH 768px
   Complete professional refactor: single-column, swipe charts, touch UI
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* -------------------------------------------------------------------
     1. GLOBAL BOX MODEL RESET
  ------------------------------------------------------------------- */
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* -------------------------------------------------------------------
     2. MOBILE HEADER BAR — Premium dark header
  ------------------------------------------------------------------- */
  .mobile-header-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #0a0a0a 0%, #0d1b2a 100%);
    border-bottom: 1px solid rgba(82, 113, 255, 0.25);
    padding: 0 16px;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 9000;
    width: 100%;
    box-shadow: 0 2px 16px rgba(0,0,0,0.5);
  }

  .btn-mobile-toggle {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    transition: background 0.2s;
  }

  .btn-mobile-toggle:active {
    background: rgba(82, 113, 255, 0.3);
  }

  .btn-mobile-refresh {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    transition: background 0.2s, transform 0.3s;
  }

  .btn-mobile-refresh:active {
    transform: rotate(180deg);
    background: rgba(82, 113, 255, 0.3);
  }

  .mobile-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-header-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
  }

  .mobile-header-title {
    font-weight: 800;
    color: white;
    font-size: 15px;
    letter-spacing: 0.3px;
  }

  /* -------------------------------------------------------------------
     3. SIDEBAR — Slide in from left with smooth animation
  ------------------------------------------------------------------- */
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: -280px !important;  /* hidden off-screen by default */
    width: 260px !important;
    height: 100vh !important;
    z-index: 9500 !important;
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
  }

  .sidebar.show-mobile {
    left: 0 !important;
  }

  .mobile-sidebar-backdrop.show {
    display: block !important;
    opacity: 1;
  }

  .mobile-sidebar-backdrop {
    display: none;
  }

  /* -------------------------------------------------------------------
     4. APP CONTAINER & MAIN LAYOUT — Single column
  ------------------------------------------------------------------- */
  .app-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 12px 12px 80px 12px !important; /* bottom padding for nav bar */
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
    overflow-x: hidden !important;
  }

  .dashboard-three-col-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .dash-middle-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* -------------------------------------------------------------------
     5. KPI GRID — 2x2 grid on mobile
  ------------------------------------------------------------------- */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .kpi-card {
    min-height: 110px !important;
    padding: 12px 14px 14px !important;
  }

  .kpi-value {
    font-size: 18px !important;
    margin-top: 8px !important;
  }

  .kpi-title {
    font-size: 8px !important;
  }

  /* -------------------------------------------------------------------
     6. CHARTS — Horizontal scroll-snap carousel on mobile
  ------------------------------------------------------------------- */
  .dashboard-charts-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;   /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
    padding-bottom: 4px !important;
    width: 100% !important;
  }

  .dashboard-charts-row::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .dashboard-charts-row .chart-card {
    flex: 0 0 calc(100% - 16px) !important;
    scroll-snap-align: start !important;
    min-width: calc(100% - 16px) !important;
    width: calc(100% - 16px) !important;
    box-sizing: border-box !important;
  }

  /* Swipe dots indicator */
  .chart-swipe-dots {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
  }

  .chart-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--border-color);
    transition: background-color 0.3s, width 0.3s;
    cursor: pointer;
  }

  .chart-dot.active {
    background-color: var(--primary-color);
    width: 18px;
    border-radius: 3px;
  }

  /* -------------------------------------------------------------------
     7. LIVE OPS / RIGHT COLUMN — stack below middle column
  ------------------------------------------------------------------- */
  .dash-right-column {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    border-left: none !important;
    border-top: 1px solid var(--border-color) !important;
    overflow-y: visible !important;
    z-index: auto !important;
  }

  .live-ops-content {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  /* -------------------------------------------------------------------
     8. CUSTOMERS SUMMARY CARDS — 3 columns on mobile
  ------------------------------------------------------------------- */
  .customers-summary-cards-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .summary-kpi-card {
    padding: 10px 10px !important;
    gap: 8px !important;
  }

  .card-kpi-val {
    font-size: 14px !important;
  }

  /* -------------------------------------------------------------------
     9. FORMS & INPUTS — 48px touch-height, 16px font (prevents auto-zoom)
  ------------------------------------------------------------------- */
  input, select, textarea, .form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    font-size: 16px !important;  /* 16px prevents iOS auto-zoom on focus */
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }

  /* Preserve icon padding on login inputs */
  .input-with-icon {
    padding-left: 40px !important;
  }

  /* -------------------------------------------------------------------
     10. BUTTONS — 48px touch height minimum
  ------------------------------------------------------------------- */
  .btn {
    min-height: 48px !important;
    font-size: 15px !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
  }

  .btn-sm {
    min-height: 36px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  .btn-login {
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* -------------------------------------------------------------------
     11. FORM LAYOUT — Single column stack
  ------------------------------------------------------------------- */
  .form-grid, .form-row, .grid-three-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .form-group {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* -------------------------------------------------------------------
     12. GRID COLLAPSES — specific fixed-width grids
  ------------------------------------------------------------------- */
  .customer-details-grid,
  .tasks-panels-split,
  .analytics-split-layout,
  .desk-progress-row,
  .analytics-layout-grid-8 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* desk kpi 6-col grid → 3 col */
  .desk-kpi-grid,
  div[style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* desk bottom split 1fr+340px → 1fr */
  .desk-bottom-split,
  div[style*="grid-template-columns: 1fr 340px"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  .customers-grid, .grid-two-col {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* -------------------------------------------------------------------
     13. HEADER ROW — Stack vertically on mobile
  ------------------------------------------------------------------- */
  .view-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .view-header h1 {
    font-size: 20px !important;
  }

  .view-header-right,
  .search-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .view-header-right .btn,
  .search-wrap .btn {
    flex: 1 1 auto !important;
  }

  .search-input,
  #search-customer-input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* -------------------------------------------------------------------
     14. TABLES — Horizontal scroll on mobile
  ------------------------------------------------------------------- */
  .table-container, .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100vw !important;
  }

  /* -------------------------------------------------------------------
     15. LOGIN CARD — Centered, mobile-sized
  ------------------------------------------------------------------- */
  .login-card {
    width: 92% !important;
    max-width: 380px !important;
    min-width: 0 !important;
    margin: 24px auto !important;
    padding: 28px 20px !important;
    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------------------
     16. MODALS — Full screen on very small phones
  ------------------------------------------------------------------- */
  .modal-card {
    width: 94% !important;
    max-width: 400px !important;
    margin: 0 12px !important;
    padding: 16px !important;
  }

  /* -------------------------------------------------------------------
     17. LOGS HEADER ROW — Stack on mobile
  ------------------------------------------------------------------- */
  .logs-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* -------------------------------------------------------------------
     18. TOAST NOTIFICATIONS — Full width on mobile
  ------------------------------------------------------------------- */
  #toast-container {
    top: 60px !important;
    right: 8px !important;
    left: 8px !important;
  }

  .toast {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: 13px !important;
  }

  /* -------------------------------------------------------------------
     19. BOTTOM NAV BAR — Pinned to bottom of screen
  ------------------------------------------------------------------- */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 8999 !important;
    background: linear-gradient(180deg, rgba(10,10,10,0.97) 0%, #0d1b2a 100%);
    border-top: 1px solid rgba(82, 113, 255, 0.2) !important;
    padding: 0 !important;
    height: 62px !important;
    align-items: stretch !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
  }

  .mob-nav-btn {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    padding: 6px 4px !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    position: relative !important;
    min-height: 62px !important;
  }

  .mob-nav-btn:active {
    background: rgba(82, 113, 255, 0.1) !important;
  }

  .mob-nav-btn.active {
    color: var(--primary-color) !important;
  }

  .mob-nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--primary-color);
    border-radius: 0 0 3px 3px;
    animation: slideInDown 0.2s ease;
  }

  @keyframes slideInDown {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .mob-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .mob-nav-btn span {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

  /* -------------------------------------------------------------------
     20. SEARCH FILTERS BAR — Stack filters vertically
  ------------------------------------------------------------------- */
  .search-filters-bar {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .search-filters-bar .filter-group {
    min-width: unset !important;
    width: 100% !important;
  }

  /* -------------------------------------------------------------------
     21. RECOVERY TABS — Horizontal scroll for chip tabs
  ------------------------------------------------------------------- */
  .recovery-nav-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }

  .recovery-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* -------------------------------------------------------------------
     22. PROFILE CHIPS — Wrap on mobile
  ------------------------------------------------------------------- */
  .profile-chips-row {
    gap: 6px !important;
  }

  /* -------------------------------------------------------------------
     23. DOCS GRID — 2 columns on mobile
  ------------------------------------------------------------------- */
  .docs-grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* -------------------------------------------------------------------
     24. SETTINGS CARD — Full width
  ------------------------------------------------------------------- */
  .settings-card {
    max-width: 100% !important;
  }

  /* -------------------------------------------------------------------
     25. LEDGER QUICK ACTIONS — Stack on mobile
  ------------------------------------------------------------------- */
  .ledger-quick-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .ledger-quick-actions .btn {
    width: 100% !important;
  }

  /* -------------------------------------------------------------------
     26. ANALYTICS 8-CHART GRID — Single column on mobile
  ------------------------------------------------------------------- */
  .analytics-layout-grid-8 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* -------------------------------------------------------------------
     27. FOOTER PADDING — Account for bottom nav bar height
  ------------------------------------------------------------------- */
  .app-container {
    padding-bottom: 62px !important;
  }

}

/* Extra small phones — 375px and below */
@media screen and (max-width: 375px) {
  .kpi-grid {
    grid-template-columns: 1fr !important; /* single column on tiny screens */
  }

  .customers-summary-cards-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .mobile-header-title {
    font-size: 13px !important;
  }

  .kpi-value {
    font-size: 16px !important;
  }
}



/* ==========================================================================
   NEW UTILITY RULES — v7.0_ui_updates
   ========================================================================== */

/* #10 — Unified styled calendar / date input component */
input[type="date"].form-control {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235271ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  padding-right: 36px;
}

input[type="date"].form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-glow);
  outline: none;
}

/* Webkit calendar icon color */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 20px;
  cursor: pointer;
}

/* #9 — Yesterday / Tomorrow shortcut buttons */
.date-shortcut-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--primary-color);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.date-shortcut-btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  transform: translateY(-1px);
}

/* #12 — Log username tag highlight in audit log */
.log-user-tag {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 11px;
}

/* Username shown inline beside action description */
.log-user-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background-color: var(--primary-glow);
  color: var(--primary-color);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 8px;
  white-space: nowrap;
  border: 1px solid var(--primary-color);
  vertical-align: middle;
}

/* #4 — Primary card section headers match sidebar left panel theme */
.card > h3:first-child,
.card-section-title,
.logs-card h3,
.chart-card h3 {
  background-color: #0d1b2a;
  color: #94a3b8;
  margin: -20px -20px 16px -20px;
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: 1px solid #1e293b;
}

/* ============================================================
   ABOUT PAGE — Theme-aware styles (light + dark)
   ============================================================ */

.about-container { margin-top: 20px; }

.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

/* Founder Card: always dark/premium look */
.founder-card {
  background-color: #1e1b24 !important;
  border: 1px solid #c5a880 !important;
  border-radius: 8px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}
.founder-card .accent-line {
  width: 12px; height: 2px;
  background-color: #c5a880; margin-bottom: 16px;
}
.founder-image-wrapper {
  width: 150px; height: 150px;
  border-radius: 8px; overflow: hidden;
  border: 2px solid #c5a880; margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.founder-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.founder-card h2 {
  font-size: 20px !important; font-weight: 800 !important;
  color: #c5a880 !important; margin: 0 !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
  background: none !important; padding: 0 !important;
  border-radius: 0 !important; border-bottom: none !important;
}
.founder-title {
  font-size: 11px; color: #94a3b8; font-weight: 600;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.founder-card .quote {
  font-style: italic; font-size: 13px; color: #d1d5db;
  margin: 24px 0; line-height: 1.6;
  border-top: 1px dashed rgba(197,168,128,0.3);
  border-bottom: 1px dashed rgba(197,168,128,0.3);
  padding: 16px 0;
}
.est-date {
  font-size: 10px; font-weight: 700; color: #c5a880;
  text-transform: uppercase; letter-spacing: 1px;
}

/* Right column: fully theme-aware */
.about-details { display: flex; flex-direction: column; justify-content: space-between; }
.sub-label {
  font-size: 11px; font-weight: 800; color: #c5a880;
  text-transform: uppercase; letter-spacing: 1.5px;
  display: block; margin-bottom: 8px;
}
.about-details h1 {
  font-size: 36px !important; font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 0 16px 0 !important; line-height: 1.2 !important;
  background: none !important; padding: 0 !important;
  border-radius: 0 !important; border-bottom: none !important;
  text-transform: none !important; letter-spacing: normal !important;
}
.header-divider {
  width: 60px; height: 3px;
  background-color: #c5a880; margin-bottom: 24px;
}
p.about-text {
  font-size: 14.5px; color: var(--text-secondary);
  line-height: 1.8; margin-bottom: 32px; font-weight: 400;
}

/* Mission / Vision grid */
.mission-vision-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 32px;
}
.sub-card {
  background-color: var(--about-card-bg) !important;
  border: 1px solid var(--about-border) !important;
  border-radius: 6px !important; padding: 20px !important;
  box-shadow: none !important;
}
.sub-card::before {
  content: ''; display: block; width: 20px; height: 2px;
  background-color: #c5a880; margin-bottom: 12px;
}
.sub-card h4 {
  font-size: 12px !important; font-weight: 800 !important;
  color: #c5a880 !important; text-transform: uppercase !important;
  margin: 0 0 8px 0 !important; letter-spacing: 0.5px !important;
  background: none !important; padding: 0 !important;
  border-radius: 0 !important; border-bottom: none !important;
}
.sub-card p {
  font-size: 12.5px !important; color: var(--about-text) !important;
  line-height: 1.6 !important; margin: 0 !important;
}

/* Enter ERP button */
.btn-outline {
  background: transparent; border: 1px solid #c5a880; color: #c5a880;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; padding: 10px 24px; border-radius: 4px;
  cursor: pointer; transition: background 0.15s;
}
.btn-outline:hover { background-color: rgba(197,168,128,0.1); }

/* Stats row */
.stats-row {
  display: flex; gap: 30px; margin-top: 40px;
  border-top: 1px solid var(--border-color); padding-top: 30px;
}
.stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.stat-circle {
  width: 80px; height: 80px; border-radius: 50%;
  border: 2px double #c5a880;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; background: rgba(197,168,128,0.08);
}
.stat-circle span { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.stat-item > span {
  font-size: 10px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; text-align: center; letter-spacing: 0.5px;
}

/* Mobile responsive */
@media screen and (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .about-details h1 { font-size: 26px !important; }
  .mission-vision-grid { grid-template-columns: 1fr !important; }
  .stats-row { gap: 12px !important; flex-wrap: wrap !important; }
  .stat-circle { width: 60px !important; height: 60px !important; }
  .stat-circle span { font-size: 12px !important; }
}
html.is-mobile .about-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
html.is-mobile .about-details h1 { font-size: 26px !important; }
html.is-mobile .mission-vision-grid { grid-template-columns: 1fr !important; }
html.is-mobile .stats-row { gap: 12px !important; flex-wrap: wrap !important; }
html.is-mobile .stat-circle { width: 60px !important; height: 60px !important; }
html.is-mobile .about-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
html.is-mobile .about-details h1 { font-size: 26px !important; }
html.is-mobile .mission-vision-grid { grid-template-columns: 1fr !important; }
html.is-mobile .stats-row { gap: 12px !important; flex-wrap: wrap !important; }
html.is-mobile .stat-circle { width: 60px !important; height: 60px !important; }
html.is-mobile .stat-circle span { font-size: 12px !important; }

/* ============================================================
   FLATPICKR CALENDAR — Custom theme overrides
   ============================================================ */

/* Light Mode */
.flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  width: 320px !important;
}
.flatpickr-months .flatpickr-month {
  background: #3B82F6 !important;
  border-radius: 12px 12px 0 0 !important;
  color: white !important;
  height: 48px !important;
}
.flatpickr-current-month {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: white !important;
  padding-top: 10px !important;
}
.flatpickr-prev-month, .flatpickr-next-month {
  fill: white !important;
  color: white !important;
}
.flatpickr-weekdays { background: #EFF6FF !important; }
.flatpickr-weekday {
  color: #3B82F6 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}
.flatpickr-day {
  border-radius: 8px !important;
  color: #111827 !important;
  font-weight: 500 !important;
  line-height: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  font-size: 13px !important;
}
.flatpickr-day:hover {
  background: #DBEAFE !important;
  border-color: transparent !important;
  color: #1d4ed8 !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: #3B82F6 !important;
  border-color: #3B82F6 !important;
  color: white !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(59,130,246,0.40) !important;
}
.flatpickr-day.today {
  border: 2px solid #3B82F6 !important;
  color: #3B82F6 !important;
  font-weight: 700 !important;
}
.flatpickr-day.today.selected { color: white !important; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: #9CA3AF !important;
}
.numInputWrapper span.arrowUp, .numInputWrapper span.arrowDown {
  border-color: #d1d5db !important;
}
.flatpickr-time input { color: #111827 !important; }
.flatpickr-innerContainer { padding: 8px !important; }

/* Dark Mode flatpickr overrides */
body.dark-mode .flatpickr-calendar {
  background: #1e2530 !important;
  border-color: #334155 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
body.dark-mode .flatpickr-months .flatpickr-month {
  background: #2563EB !important;
}
body.dark-mode .flatpickr-weekdays { background: #1a2032 !important; }
body.dark-mode .flatpickr-weekday { color: #60A5FA !important; }
body.dark-mode .flatpickr-day {
  color: #e2e8f0 !important;
}
body.dark-mode .flatpickr-day:hover {
  background: #1e3a5f !important;
  color: #93C5FD !important;
}
body.dark-mode .flatpickr-day.today {
  border-color: #60A5FA !important;
  color: #60A5FA !important;
}
body.dark-mode .flatpickr-day.today.selected { color: white !important; }
body.dark-mode .flatpickr-day.prevMonthDay, body.dark-mode .flatpickr-day.nextMonthDay {
  color: #475569 !important;
}

/* ============================================================
   KPI VALUES — High contrast in both light and dark modes
   ============================================================ */
.kpi-value {
  color: #111827 !important; /* Strong dark in light mode */
  font-size: 24px;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 6px;
}
body.dark-mode .kpi-value { color: #F9FAFB !important; }

/* Ensure badge colors pop in light mode */
.badge-active  { background-color: rgba(5,150,105,0.12) !important; color: #059669 !important; }
.badge-overdue { background-color: rgba(220,38,38,0.10) !important;  color: #DC2626 !important; }
.badge-pending { background-color: rgba(217,119,6,0.12) !important;  color: #D97706 !important; }
.badge-closed  { background-color: rgba(100,116,139,0.12) !important; color: #64748B !important; }


/* Fix for login watermark icon appearing weirdly on mobile */
@media screen and (max-width: 900px) {
  .login-watermark-bg {
    background-size: 200px !important;
    opacity: 0.1 !important;
  }
}

/* Fix login form input overlap */
#login-form input, .input-group input {
    padding-left: 44px !important;
}

/* Analytics Chart Overlaps */
.chart-container {
    position: relative;
    min-height: 280px;
    width: 100%;
}