/* =============================
   AppNat – Global Theme (Light/Dark)
   ============================= */
html { font-size: 16px; }
@media (max-width: 576px) {
  html { font-size: 18px; }
  .container { padding: 0 .5rem; }
}
#monthRange { width: 100%; }
.noUi-target { width: 100%; }
.noUi-handle { z-index: 5; }

/* Light theme variables */
:root {
  --brand-grad-start: #0d6efd;
  --brand-grad-end:   #3aa0ff;
  --card-bg:          #ffffff;
  --card-border:      #e9ecef;
}

/* Dark theme variables */
html[data-bs-theme="dark"] {
  --brand-grad-start: #0b5ed7;
  --brand-grad-end:   #1f7bdc;
  --card-bg:          #1e293b;
  --card-border:      #233044;
}

.bg-appnat {
  background: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-end));
}
.navbar-brand img { height: 32px; width: auto; object-fit: contain; }
.navbar-brand .brand-text { font-weight: 700; letter-spacing: .2px; }
.card { border-radius: 1rem; background-color: var(--card-bg); border-color: var(--card-border); }
.shadow-soft { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
html[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #1f2937;
  --bs-table-striped-color: #e2e8f0;
}
.chart-box { height: 300px; }
.navbar .btn-outline-light { border-color: rgba(255,255,255,.65); color: #fff; }
.section { padding: 1.25rem 0; }

/* ==== Dark mode polish (only) ==== */
html[data-bs-theme="dark"] {
  --bs-body-bg: #0f172a;             /* page background */
  --bs-body-color: #f3f4f6;          /* brighter text */
  --bs-card-bg: #1e293b;             /* softer than pure black */
  --bs-card-border-color: #334155;
  --bs-secondary-color: #cbd5e1;     /* lighter muted */
}

/* Cards */
html[data-bs-theme="dark"] .card {
  background-color: var(--bs-card-bg);
  border-color: var(--bs-card-border-color);
}
html[data-bs-theme="dark"] .card .card-title { color: var(--bs-body-color); }
html[data-bs-theme="dark"] .table thead { background: #1e293b; }

/* Forms */
html[data-bs-theme="dark"] .form-label { color: var(--bs-body-color); }
html[data-bs-theme="dark"] .form-text { color: var(--bs-secondary-color); }

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-check-input {
  background-color: #334155; /* softer bg for inputs */
  color: var(--bs-body-color);
  border-color: #475569;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background-color: #334155;
  color: #fff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.25);
}

/* Input group addons & placeholders */
html[data-bs-theme="dark"] .input-group-text {
  background-color: #334155;
  color: var(--bs-secondary-color);
  border-color: #475569;
}
html[data-bs-theme="dark"] ::placeholder { color: #cbd5e1; }

/* Select arrow contrast (WebKit) */
html[data-bs-theme="dark"] select.form-select {
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23cbd5e1' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
}

/* Buttons */
html[data-bs-theme="dark"] .btn-outline-primary {
  color: #93c5fd;
  border-color: #2563eb;
}
html[data-bs-theme="dark"] .btn-outline-primary:hover {
  background-color: rgba(37,99,235,.15);
  color: #bfdbfe;
}

/* Dropdowns / menus */
html[data-bs-theme="dark"] .dropdown-menu {
  background-color: #1e293b;
  border-color: #334155;
}
html[data-bs-theme="dark"] .dropdown-item { color: var(--bs-body-color); }
html[data-bs-theme="dark"] .dropdown-item:hover { background: #334155; }

/* Horizontal rules and subtle dividers */
html[data-bs-theme="dark"] hr { border-color: #334155; }

/* Make small helper notes readable */
html[data-bs-theme="dark"] small, 
html[data-bs-theme="dark"] .text-muted { color: var(--bs-secondary-color) !important; }

/* Bigger chart area */
.chart-box { height: 420px; position: relative; }

/* On large screens go even taller */
@media (min-width: 1200px) {
  .chart-box { height: 520px; }
}