/* =====================================================================
   theme.css – shared layout pieces, loaded after site.css on every page.
   Uses only the token names from tokens.css (no colour values here).
   1. Collapsed side menu   .app-shell.sidebar-collapsed  (wide screens: icons only)
   2. Theme picker          #themeMenuButton / #themeMenuPanel (theme.js)
   3. Data grid             .grid-*  (grid.js: toolbar, columns, sort, pager)
   4. Row ⋮ menu            .row-menu (grid.js rowMenu)
   ===================================================================== */

/* ---------- 1. Collapsed side menu (wide screens; phones keep the slide-in menu) ---------- */
@media (min-width: 992px) {
  .app-sidebar, .app-main { transition: width .18s ease, margin-left .18s ease; }
  .app-shell.sidebar-collapsed { --sidebar-width: var(--sidebar-collapsed-width); }
  .sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
  .sidebar-collapsed .sidebar-brand > .min-w-0,
  .sidebar-collapsed .nav-group-title,
  .sidebar-collapsed .nav-item > span,
  .sidebar-collapsed .soon-badge { display: none; }
  .sidebar-collapsed .sidebar-nav { padding: .75rem .5rem; }
  .sidebar-collapsed .nav-list { margin-bottom: .35rem; }
  .sidebar-collapsed .nav-list:not(:first-child) { border-top: 1px solid var(--on-brand-line); padding-top: .35rem; }
  .sidebar-collapsed .nav-item { justify-content: center; padding: .6rem 0; }
  .sidebar-collapsed .nav-item i { font-size: 1.15rem; width: auto; }
}
.topbar-menu-toggle { color: var(--text-muted); }

/* ---------- 2. Theme picker ---------- */
.theme-menu { position: relative; }
.theme-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; padding: .75rem; z-index: 1030; }
.theme-menu-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .4rem; }
.theme-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .85rem; }
.theme-mode { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .25rem; font-size: .78rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text); }
.theme-mode i { font-size: 1.05rem; }
.theme-mode:hover { background: var(--hover-bg); }
.theme-mode.active { border-color: var(--brand); background: var(--brand-soft); color: var(--heading); font-weight: 600; }
.theme-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.theme-swatch { --swatch: var(--swatch-navy); width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; position: relative; background: var(--swatch); }
.theme-swatch[data-accent="teal"]   { --swatch: var(--swatch-teal); }
.theme-swatch[data-accent="green"]  { --swatch: var(--swatch-green); }
.theme-swatch[data-accent="purple"] { --swatch: var(--swatch-purple); }
.theme-swatch[data-accent="orange"] { --swatch: var(--swatch-orange); }
.theme-swatch[data-accent="rose"]   { --swatch: var(--swatch-rose); }
.theme-swatch[data-accent="slate"]  { --swatch: var(--swatch-slate); }
.theme-swatch.active { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--swatch); }
.theme-swatch.active::after { content: "\F26E"; font-family: "bootstrap-icons"; color: var(--on-brand); position: absolute; inset: 0; display: grid; place-items: center; font-size: .85rem; }

/* ---------- 3. Data grid (grid.js) ---------- */
.grid-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-sm); }
.grid-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.grid-title { font-size: 1.15rem; font-weight: 700; margin: 0 .5rem 0 0; white-space: nowrap; }
.grid-title .grid-count { font-weight: 500; color: var(--text-muted); font-size: .95rem; margin-left: .25rem; }
.grid-toolbar .search-box { flex: 1 1 200px; max-width: 280px; }
.grid-filters { display: contents; }
.grid-filters .att-filter, .grid-filters .grid-filter { flex: 0 1 165px; min-width: 130px; }
.grid-filters input[type="date"] { min-width: 140px; }
.grid-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.grid-subbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem 1rem; border-bottom: 1px solid var(--border); font-size: .88rem; }
.grid-subbar .grid-range { margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.grid-subbar .grid-range strong { color: var(--text); }
.grid-subbar .form-select { width: auto; padding-top: .25rem; padding-bottom: .25rem; font-size: .85rem; }
.grid-pager { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.grid-pager .btn-icon { width: 30px; height: 30px; }
.grid-columns { position: relative; }
.grid-columns-panel { position: absolute; left: 0; top: calc(100% + 4px); min-width: 220px; max-height: 320px; overflow: auto; padding: .4rem .25rem; z-index: 1030; }
.grid-columns-panel .form-check { padding: .3rem .75rem .3rem 2.1rem; margin: 0; }
.grid-scroll { overflow-x: auto; }
.grid-table { --bs-table-bg: transparent; margin: 0; }
.grid-table > thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border); padding: .6rem .85rem; white-space: nowrap; vertical-align: middle; }
.grid-table > tbody td { padding: .55rem .85rem; border-color: var(--border); vertical-align: middle; font-size: .92rem; }
.grid-table > tbody tr.grid-row-click { cursor: pointer; }
.grid-table > tbody tr.grid-row-click:hover > td { background: var(--hover-bg); }
.grid-sort { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.grid-sort i { opacity: .45; font-size: .85rem; }
.grid-sort.is-sorted { color: var(--heading); }
.grid-sort.is-sorted i { opacity: 1; color: var(--brand-text); }
.grid-kebab-cell { width: 48px; text-align: right; }
.grid-table .grid-check { width: 42px; padding-right: 0; }
.grid-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .5rem 1rem; border-bottom: 1px solid var(--border); background: var(--brand-soft); font-size: .88rem; }
.grid-bulk-actions { display: flex; gap: .5rem; margin-left: auto; }
.grid-notice:empty { display: none; }
.filter-pills.grid-filter-pills { flex: 0 0 auto; }
.grid-empty { padding: 2.5rem 1rem; }
.grid-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* Phones: rows become compact cards (grid.js marks cells with data-label) */
@media (max-width: 767.98px) {
  .grid-title { width: 100%; }
  .grid-toolbar .search-box { max-width: none; flex-basis: 100%; }
  .grid-filters .att-filter, .grid-filters .grid-filter { flex: 1 1 45%; }
  .grid-actions { margin-left: 0; width: 100%; }
  .grid-actions > .btn { flex: 1 1 auto; }
  .grid-subbar .grid-range { margin-left: 0; }
  .grid-table.grid-cards > thead { display: none; }
  .grid-table.grid-cards > tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
  .grid-table.grid-cards > tbody td { display: block; padding: 0; border: 0; font-size: .88rem; }
  .grid-table.grid-cards > tbody td.grid-primary { grid-column: 1; font-size: .95rem; }
  .grid-table.grid-cards > tbody td.grid-kebab-cell { grid-column: 2; grid-row: 2 / span 3; align-self: start; }
  .grid-table.grid-cards > tbody td.grid-check { grid-column: 2; grid-row: 1; justify-self: end; }
  .grid-table.grid-cards > tbody tr:not(:has(td.grid-check)) td.grid-kebab-cell { grid-row: 1 / span 3; }
  .grid-bulk-actions { margin-left: 0; width: 100%; }
  .grid-bulk-actions > .btn { flex: 1 1 0; }
  .grid-table.grid-cards > tbody td:not(.grid-primary):not(.grid-kebab-cell)[data-label]::before {
    content: attr(data-label) ": "; color: var(--text-muted); font-size: .78rem;
  }
  .grid-table.grid-cards > tbody td.grid-hide-sm { display: none; }
}

/* ---------- 4. Row ⋮ menu (one popup for the page, placed next to its button by grid.js) ---------- */
.row-menu { position: fixed; z-index: 1065; min-width: 190px; padding: .35rem 0; display: block; }
.row-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .9rem; font-size: .9rem; }
.row-menu .dropdown-item i { width: 1rem; text-align: center; color: var(--text-muted); }
.row-menu .dropdown-item.text-danger, .row-menu .dropdown-item.text-danger i { color: var(--danger); }
.row-menu .dropdown-item:focus { background: var(--hover-bg); outline: none; }