html, body { height: 100%; }

/* Custom scrollbar to match dark theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f1421; }
::-webkit-scrollbar-thumb { background: #2a3142; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4258; }

/* Collapsed sidebar: shrink to icon-only */
#app.sidebar-collapsed #sidebar { width: 4rem; }
#app.sidebar-collapsed #sidebar .sidebar-label { display: none; }
#app.sidebar-collapsed #sidebar nav a { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }

/* ---- Mobile shell (<768px) ------------------------------------------
 * The sidebar becomes an off-canvas drawer instead of a permanent
 * 14rem column (which left ~10rem of content on a phone). The topbar
 * hamburger opens it over the page with a backdrop; the desktop
 * icon-collapse state is ignored inside the drawer so labels always
 * show. The #sidebar id out-specifies Tailwind's .sticky/.w-56.
 */
@media (max-width: 767px) {
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100%;
    width: 16rem;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
  }
  #app.sidebar-open #sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, .65);
  }
  /* Desktop icon-collapse (persisted in localStorage) must not shrink
   * the drawer to icons — full labels whenever it's open on a phone. */
  #app.sidebar-collapsed #sidebar { width: 16rem; }
  #app.sidebar-collapsed #sidebar .sidebar-label { display: revert; }
  #app.sidebar-collapsed #sidebar nav a {
    justify-content: flex-start;
    padding-left: 0.5rem; padding-right: 0.5rem;
  }
  /* iOS Safari auto-zooms any focused input under 16px — pin form
   * controls to 16px on phones so tapping a search box doesn't zoom
   * the whole page. */
  input, select, textarea { font-size: 16px; }
}

/* Card primitive used by page templates */
.card {
  background: #1a1f2e;
  border: 1px solid #2a3142;
  border-radius: 0.5rem;
}

.stat-card {
  background: #1a1f2e;
  border: 1px solid #2a3142;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

/* Native <select> dropdowns: every form on the dashboard sets a dark
 * background on the <select> element itself, but when the browser
 * opens the native popup the <option> children fall back to system
 * colours (white-on-white on Chrome/Edge for Windows, which makes
 * the choices invisible until you hover). Force-style options so
 * the popup matches the rest of the UI. `option:checked` covers the
 * highlighted/current selection. Applied globally so every select
 * across the dashboard inherits the fix -- no per-page CSS needed.
 */
select option {
  background-color: #1a1f2e;
  color: #e7ecf2;
}
select option:checked,
select option:hover,
select option:focus {
  background-color: #2a3142;
  color: #ffffff;
}
/* Date / month / week / time inputs render a calendar / clock
 * picker icon that's near-invisible on dark backgrounds in
 * Chromium. Invert it so the icon shows up. Doesn't touch the
 * input's own colours -- those are already styled via Tailwind. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}