/* ── DENSITY ─────────────────────────────────────────────────
   Screen density, set on <html data-density="compact|dense"> by
   base.html before first paint: Compact by default, Dense when the
   user picks it in the top bar (kept in localStorage). Without the
   attribute the original, roomier spacing of theme-styles.css shows.
   Each level only sets the --d-* sizes; the rules below apply them
   to the shell, cards, tables, forms and buttons. Selectors carry
   html[data-density] so they win over theme-styles.css's !important. */

html[data-density="compact"] {
  --d-font: 13px;    --d-small: 11.5px;
  --d-side: 212px;   --d-top: 46px;
  --d-page: 14px 16px 20px;  --d-gap: 12px;  --d-h1: 18px;  --d-title: 21px;  --d-display: 1.9rem;
  --d-card-h: 8px 12px;  --d-card-b: 12px;
  --d-th: 7px 10px;  --d-td: 6px 10px;  --d-td-sm: 4px 8px;
  --d-btn: 5px 12px; --d-btn-sm: 3px 8px;  --d-input: 5px 9px;
  --d-side-item: 6px 16px;  --d-side-sub: 4px 16px 4px 40px;
  --d-stat: 12px;  --d-stat-val: 21px;  --d-stat-icon: 36px;
}
html[data-density="dense"] {
  --d-font: 12.5px;  --d-small: 11px;
  --d-side: 196px;   --d-top: 40px;
  --d-page: 10px 12px 16px;  --d-gap: 8px;  --d-h1: 16px;  --d-title: 18px;  --d-display: 1.5rem;
  --d-card-h: 6px 10px;  --d-card-b: 10px;
  --d-th: 5px 8px;   --d-td: 4px 8px;  --d-td-sm: 3px 6px;
  --d-btn: 4px 10px; --d-btn-sm: 2px 7px;  --d-input: 4px 8px;
  --d-side-item: 4px 14px;  --d-side-sub: 3px 14px 3px 36px;
  --d-stat: 10px;  --d-stat-val: 18px;  --d-stat-icon: 30px;
}

/* Shell */
html[data-density] body { font-size: var(--d-font); }
html[data-density] { --sidebar-width: var(--d-side); --topbar-height: var(--d-top); }
html[data-density] .sidebar-brand { padding-top: 10px; padding-bottom: 10px; }
html[data-density] .sidebar-nav { padding: 6px 0; }
html[data-density] .sidebar-group-label { padding-top: 10px; }
html[data-density] .sidebar-subgroup-label { padding-top: 5px; padding-left: 40px; }
html[data-density] .sidebar-item,
html[data-density] .sidebar-toggle { padding: var(--d-side-item); font-size: var(--d-font); }
html[data-density] .sidebar-subitem { padding: var(--d-side-sub); font-size: var(--d-small); }
html[data-density] .sidebar-user { padding-top: 8px; padding-bottom: 8px; }
html[data-density] .topbar { padding: 0 var(--d-gap); }
html[data-density] .topbar-title { font-size: 15px; }
html[data-density] .page-content { padding: var(--d-page); }
html[data-density] .page-header { margin-bottom: var(--d-gap); gap: var(--d-gap); }
html[data-density] .page-header-left h1, html[data-density] .page-header-left .h1,
html[data-density] .page-header-left h2, html[data-density] .page-header-left .h2 { font-size: var(--d-h1); }
html[data-density] .page-header-left p { font-size: var(--d-small); }
/* Most screens title themselves with <h1 class="h2"> + a muted line */
html[data-density] .page-content h1,
html[data-density] .page-content h1.h2 { font-size: var(--d-title); margin-bottom: 2px; }
html[data-density] .page-content h1 + p.text-muted { margin-bottom: 0; font-size: var(--d-small); }
html[data-density] .display-5 { font-size: var(--d-display); }
html[data-density] .display-4 { font-size: calc(var(--d-display) * 1.15); }
html[data-density] .flash-container { margin-bottom: var(--d-gap); }
html[data-density] .alert { padding: 8px 12px !important; font-size: var(--d-font); }
html[data-density] .app-footer { padding: 8px var(--d-gap); }

/* Spacing utilities between blocks (Bootstrap's 1rem / 1.5rem) */
html[data-density] .mb-4, html[data-density] .my-4 { margin-bottom: var(--d-gap) !important; }
html[data-density] .mt-4, html[data-density] .my-4 { margin-top: var(--d-gap) !important; }
html[data-density] .mb-3 { margin-bottom: calc(var(--d-gap) * .75) !important; }
html[data-density] .row.g-4, html[data-density] .row.g-3 { --bs-gutter-x: var(--d-gap); --bs-gutter-y: var(--d-gap); }

/* Cards */
html[data-density] .card-header { padding: var(--d-card-h) !important; font-size: var(--d-font); }
html[data-density] .card-body { padding: var(--d-card-b) !important; }
html[data-density] .card-body.p-0 { padding: 0 !important; }
html[data-density] .card-footer { padding: var(--d-card-h) !important; }
html[data-density] .dashboard-chart-card .card-body { padding: var(--d-card-b) !important; }
html[data-density] .stat-card { padding: var(--d-stat); gap: calc(var(--d-stat) * .8); }
html[data-density] .stat-icon { width: var(--d-stat-icon); height: var(--d-stat-icon); font-size: calc(var(--d-stat-icon) * .42); }
html[data-density] .stat-value { font-size: var(--d-stat-val); }
html[data-density] .stat-label { font-size: var(--d-small); }
html[data-density] .upcoming-item { padding: calc(var(--d-gap) * .5) 0; font-size: var(--d-font); }
html[data-density] .section-title { margin-bottom: calc(var(--d-gap) * .75); }

/* Tables */
html[data-density] .table { font-size: var(--d-font); }
html[data-density] .table thead th { padding: var(--d-th) !important; font-size: var(--d-small); }
html[data-density] .table tbody td { padding: var(--d-td) !important; }
html[data-density] .table-sm thead th,
html[data-density] .table-sm tbody td { padding: var(--d-td-sm) !important; }

/* Buttons, forms, menus */
html[data-density] .btn { padding: var(--d-btn); font-size: var(--d-font); }
html[data-density] .btn-sm,
html[data-density] .btn-group-sm > .btn { padding: var(--d-btn-sm) !important; font-size: var(--d-small) !important; }
html[data-density] .form-control, html[data-density] .form-select { padding: var(--d-input) !important; font-size: var(--d-font) !important; }
html[data-density] .form-select { padding-right: 1.9rem !important; background-position: right .55rem center !important; }
html[data-density] .input-group-text { padding: var(--d-input) !important; font-size: var(--d-font) !important; }
html[data-density] .form-label { font-size: var(--d-small); margin-bottom: 3px; }
html[data-density] .form-text { font-size: var(--d-small); }
html[data-density] .nav-tabs .nav-link { padding: 6px 12px !important; font-size: var(--d-font); }
html[data-density] .dropdown-menu { font-size: var(--d-font); }
html[data-density] .dropdown-item { padding: 5px 10px !important; }
html[data-density] .list-group-item { font-size: var(--d-font); padding-top: 6px; padding-bottom: 6px; }
html[data-density] .modal-header { padding: 10px 16px !important; }
html[data-density] .modal-body { padding: 14px 16px !important; }
html[data-density] .modal-footer { padding: 8px 16px !important; }
html[data-density] .page-link { padding: 3px 8px !important; }

/* Dense only: tighter line height so rows really shrink */
html[data-density="dense"] .table { line-height: 1.3; }
html[data-density="dense"] .badge { padding: 2px 6px !important; font-size: 10.5px !important; }

/* Compact + Dense: keep the reference column on one line */
html[data-density="compact"] .table tbody td:first-child,
html[data-density="dense"] .table tbody td:first-child { white-space: nowrap; }

/* Section headings inside and between cards */
html[data-density] .card-header :is(h2, h3, h4, h5, .h2, .h3, .h4, .h5) { font-size: calc(var(--d-font) + 2px); margin-bottom: 0; }
html[data-density] .page-content :is(h2, h3, .h3):not(.card-header *) { font-size: calc(var(--d-title) - 3px); }
html[data-density] .page-content :is(h4, .h4):not(.card-header *) { font-size: calc(var(--d-font) + 3px); }

/* Action buttons in a table cell stay on one line instead of stacking */
html[data-density] .table td:has(> .btn, > .btn-group, > form > .btn) { white-space: nowrap; }
html[data-density] .table td:has(> .btn, > .btn-group, > form > .btn) > form { display: inline-block; }

/* Button labels never wrap inside the button; whole buttons flow to the next line instead */
html[data-density] .btn { white-space: nowrap; }
/* Small dropdowns (table cells, -sm): a tighter arrow gap so short values like "Month" fit */
html[data-density] .table .form-select,
html[data-density] .form-select-sm,
html[data-density] .input-group-sm .form-select { padding-right: 1.7rem !important; background-position: right .4rem center !important; }