/* ──────────────────────────────────────────────────────────────────────────
 * Elimusmart legacy-shell compatibility layer
 *
 * Bridges the master-bs5 (legacy chrome) class conventions that Phase 3
 * ports kept inside `.page-wrapper > .content` to the visual conventions
 * Preskool uses. The actual Blade markup is unchanged; only the styling
 * is adjusted so legacy `.grid-margin` / `.stretch-card` / `.btn-theme`
 * etc. read like their Preskool equivalents.
 *
 * Loaded by `layout/partials/head.blade.php` AFTER Preskool's `style.css`
 * and the per-tenant theme-tokens partial.
 *
 * When a view is fully rebuilt against Preskool primitives (using
 * `<x-ui.*>` atoms + bare `.mb-3` / `.card` / `.btn-primary`), the
 * corresponding rule here becomes a no-op for that surface. Eventually
 * (Phase 6 legacy clearance) this file shrinks back to zero.
 *
 * Doc 13 §15 — Adoption priority matrix
 * Doc 12 §6  — Legacy clearance plan
 * ────────────────────────────────────────────────────────────────────── */

/* ── Bootstrap layout bridges ───────────────────────────────────────── */

/* `.grid-margin` (master-bs5) ≈ Preskool's spacing between cards in a column.
   The reference template uses `.mb-3` / `.mb-4`; mirror its rhythm here. */
.page-wrapper .grid-margin,
.page-wrapper .grid-margin-md {
    margin-bottom: 1.5rem;
}

/* `.stretch-card` (master-bs5) wrapped cards in a flex column so they grew to
   match siblings. Preskool's `.card.flex-fill` does the same — translate. */
.page-wrapper .stretch-card {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.page-wrapper .stretch-card > .card {
    flex: 1 1 100%;
    width: 100%;
}

/* ── Button aliases ─────────────────────────────────────────────────── */

/* `.btn-theme` was master-bs5's accent button. Map to Preskool's primary
   so the button reads against the tenant palette. */
.btn-theme {
    background-color: var(--bs-primary, var(--brand-primary, #1C1C7E));
    border-color: var(--bs-primary, var(--brand-primary, #1C1C7E));
    color: #ffffff;
}
.btn-theme:hover,
.btn-theme:focus {
    background-color: var(--brand-primary-hover, #15155f);
    border-color: var(--brand-primary-hover, #15155f);
    color: #ffffff;
}
.btn-theme:disabled,
.btn-theme.disabled {
    opacity: 0.65;
}

/* ── Form layout bridges ────────────────────────────────────────────── */

/* `.form-group` (Bootstrap 4 era) — Preskool drops it in favour of `.mb-3`. */
.page-wrapper .form-group {
    margin-bottom: 1rem;
}

/* `.file-upload-default` / `.file-upload-info` / `.file-upload-browse` —
   the legacy hidden-file-input + display-input + browse-button trio.
   Style the visible cluster as a Preskool input-group so the legacy
   markup still reads as a coherent control. */
.page-wrapper .file-upload-default {
    display: none;
}
.page-wrapper .input-group .file-upload-info {
    border-right: 0;
}
.page-wrapper .file-upload-browse {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* `.remove-number-increment` — numeric inputs that shouldn't show the
   browser's up/down spin controls (mobile, currency fields, IDs). */
.remove-number-increment::-webkit-outer-spin-button,
.remove-number-increment::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.remove-number-increment {
    -moz-appearance: textfield;
}

/* ── Card header polish ─────────────────────────────────────────────── */

/* Phase 3 ports left a lot of `<h4 class="card-title">` style headings
   inside `.card-body` rather than emitting Preskool's `.card-header` block.
   Style the orphan title so it still reads like a section header even
   when wrapped only in `.card-body`. */
.page-wrapper .card-body > .card-title:first-child {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

/* ── Table tweaks ───────────────────────────────────────────────────── */

/* Bootstrap-Table list pages render inside .fixed-table-container.
   Phase 2.2 — the default is now COMFORTABLE padding. It used to be a
   crushed 0.65rem/0.75rem applied globally to cram >5 columns, which is
   what made every list read as "compressed/cluttered" (the original
   complaint). Wide tables now overflow into the .table-responsive
   horizontal scroll instead of squeezing every cell illegibly. Users who
   genuinely want density flip the "Compact" table toggle in the utility
   drawer (body.table-density-compact → 0.35rem/0.5rem, see
   theme-customizer.blade.php §Doc 12 §4.1). */
.page-wrapper .fixed-table-container .table th,
.page-wrapper .fixed-table-container .table td {
    padding: 0.625rem 1rem;
    vertical-align: middle;
}

/* Bootstrap-Table's pagination row needs a touch of breathing room
   against Preskool's tighter card-body. */
.page-wrapper .fixed-table-pagination {
    padding: 0.75rem 0;
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 2.7 — "card-in-card" mitigation. The codemod inserted the
   <x-ui.bootstrap-table> atom (which renders its OWN .card) INSIDE a
   leftover outer card+title on ~27 list pages, producing a card floating
   inside a card + an orphaned/empty atom header + misaligned filters.
   When the atom card is nested inside another .card, flatten it and hide
   its header so the page reads as ONE card using the outer card's title +
   filters + the table. Standalone atoms (e.g. the de-nested /fees) are NOT
   inside another .card, so they keep their full card chrome.
   ────────────────────────────────────────────────────────────────────── */
.card .elimusmart-bt-card {
    border: 0;
    box-shadow: none;
    margin: 0;
    background: transparent;
}
.card .elimusmart-bt-card > .card-header {
    display: none;
}
.card .elimusmart-bt-card > .card-body {
    padding: 0;
}

/* Phase 2.7 — "3/4-width container" fix. A .card inside a flex column
   (`col-* d-flex`) without `flex-fill` collapses to its content width
   (≈3/4 page) and squeezes the table. Force cards (incl. the atom card and
   form-wrapped cards) to fill the column. Affects /attendance + ~43 list pages. */
[class*="col-"].d-flex > .card,
[class*="col-"].d-flex > form > .card,
[class*="col-"].d-flex > .elimusmart-bt-card {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Phase 2.7 — bootstrap-table "stuck narrow" fix. bootstrap-table caches an inline
   width on .bootstrap-table/.fixed-table-container at init; when the surrounding card
   sizes late (flex fill above) the table can stay stuck at the old narrow width even
   though its container stretched. Force the wrapper + table to fill the container.
   (Paired with a resetView() on load in footer-scripts.) */
.page-wrapper .bootstrap-table,
.page-wrapper .fixed-table-container,
.page-wrapper .fixed-table-container > .fixed-table-body {
    width: 100% !important;
}
.page-wrapper .fixed-table-container .table {
    width: 100% !important;
}

/* ── Misc ───────────────────────────────────────────────────────────── */

/* `.text-theme` (legacy) — Preskool uses `.text-primary` for the same intent. */
.text-theme {
    color: var(--bs-primary, var(--brand-primary, #1C1C7E)) !important;
}
.bg-theme {
    background-color: var(--bs-primary, var(--brand-primary, #1C1C7E)) !important;
    color: #ffffff !important;
}

/* Doc 15 §5 — Status badge sweep.
   Bootstrap-Table inline `<span class='badge badge-{tone}'>` spans (in
   formatter.js + various views) should read as Preskool soft-tone pills.
   These rules bridge the legacy class chain to the soft equivalents
   without touching the JS. statusBadge() already emits the canonical
   markup with rounded-pill + ti-circle-filled; these rules only kick in
   for the inline raw badge spans. */
.fixed-table-container .badge.badge-success,
.page-wrapper .badge.badge-success {
    background-color: rgba(22, 163, 74, 0.12) !important;
    color: #166534 !important;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}
.fixed-table-container .badge.badge-danger,
.page-wrapper .badge.badge-danger {
    background-color: rgba(220, 38, 38, 0.12) !important;
    color: #991b1b !important;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}
.fixed-table-container .badge.badge-warning,
.page-wrapper .badge.badge-warning {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #92400e !important;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}
.fixed-table-container .badge.badge-info,
.page-wrapper .badge.badge-info {
    background-color: rgba(2, 132, 199, 0.12) !important;
    color: #075985 !important;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}
.fixed-table-container .badge.badge-primary,
.page-wrapper .badge.badge-primary {
    background-color: rgba(28, 28, 126, 0.10) !important;
    color: var(--brand-primary, #1C1C7E) !important;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}
.fixed-table-container .badge.badge-secondary,
.page-wrapper .badge.badge-secondary,
.fixed-table-container .badge.badge-dark,
.page-wrapper .badge.badge-dark {
    background-color: rgba(100, 116, 139, 0.15) !important;
    color: #334155 !important;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}
.fixed-table-container .badge.badge-danger-light,
.page-wrapper .badge.badge-danger-light {
    background-color: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
}

/* Doc 15 §5 — Row-action dropdown sweep.
   BootstrapTableService::menuItem now emits Preskool's btn-icon trigger.
   Style the dropdown-menu items so they have proper spacing + hover. */
.fixed-table-container .table-action-column .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.35rem;
    margin: 0 0.25rem;
}
.fixed-table-container .table-action-column .dropdown-menu .dropdown-item:hover {
    background-color: rgba(28, 28, 126, 0.05);
}
.fixed-table-container .table-action-column .dropdown-menu .dropdown-item.delete-form:hover,
.fixed-table-container .table-action-column .dropdown-menu .dropdown-item.trash-data:hover {
    background-color: rgba(220, 38, 38, 0.08);
    color: #991b1b;
}

/* Datepicker popup container styling — many legacy inputs use the
   `.datepicker-popup-no-future` class; the datepicker renders inline
   styling that conflicts with Preskool's form-control rounding. */
.page-wrapper .datepicker-popup-no-future,
.page-wrapper .datepicker-popup {
    background-image: none;
}

/* ──────────────────────────────────────────────────────────────────────
   Sidebar brand alignment — override Preskool's hardcoded
   #FE9F43 (orange) / #3D5EE1 (blue) / #F2F5FF (light blue) with the
   per-tenant tokens emitted by theme-tokens.blade.php. Selectors mirror
   public/preskool-assets/css/style.css:2863-3117 so specificity matches.
   ────────────────────────────────────────────────────────────────────── */

/* Top-level active item — uses brand-primary with a low-alpha tint */
.sidebar .sidebar-menu > ul > li > a.active {
    background: rgba(var(--brand-primary-rgb, 28, 28, 126), 0.08);
    color: var(--brand-primary, #1C1C7E);
}
.sidebar .sidebar-menu > ul > li > a.active span,
.sidebar .sidebar-menu > ul > li > a.active i {
    color: var(--brand-primary, #1C1C7E);
}
.sidebar .sidebar-menu > ul > li > a.active .menu-arrow {
    background: rgba(var(--brand-primary-rgb, 28, 28, 126), 0.12);
}
.sidebar .sidebar-menu > ul > li > a.active .menu-arrow::before {
    border-color: var(--brand-primary, #1C1C7E);
}

/* Top-level hover — subtle brand-primary tint */
.sidebar .sidebar-menu > ul > li > a:hover {
    background: rgba(var(--brand-primary-rgb, 28, 28, 126), 0.05);
    color: var(--brand-primary, #1C1C7E);
}
.sidebar .sidebar-menu > ul > li > a:hover span,
.sidebar .sidebar-menu > ul > li > a:hover i {
    color: var(--brand-primary, #1C1C7E);
}

/* Submenu (nested) hover + active — brand-primary text on a soft tint */
.sidebar .sidebar-menu > ul > li ul li a:hover,
.sidebar .sidebar-menu > ul > li ul li a.active,
.sidebar .sidebar-menu > ul > li ul li a.active a span,
.sidebar .sidebar-menu > ul > li ul li a:hover span {
    color: var(--brand-primary, #1C1C7E);
}
.sidebar .sidebar-menu > ul > li ul li a.active:after,
.sidebar .sidebar-menu > ul > li ul li a:hover:after {
    background: var(--brand-accent, #FE7E00);
    border-color: rgba(var(--brand-accent-rgb, 254, 126, 0), 0.4);
}

/* Submenu parent (expandable) — active / open state */
.sidebar .sidebar-menu > ul > li ul > li.active a,
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop,
.sidebar .sidebar-menu > ul li .submenu > a.active {
    background: rgba(var(--brand-primary-rgb, 28, 28, 126), 0.06);
}
.sidebar .sidebar-menu > ul > li ul > li.active a span,
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop span,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop span,
.sidebar .sidebar-menu > ul li .submenu > a.active span {
    color: var(--brand-primary, #1C1C7E);
}
.sidebar .sidebar-menu > ul > li ul > li.active a i,
.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop i,
.sidebar .sidebar-menu > ul li .submenu > a.subdrop i,
.sidebar .sidebar-menu > ul li .submenu > a.active i {
    color: var(--brand-primary, #1C1C7E);
    background: #FFF;
}
.sidebar .sidebar-menu > ul > li ul > li.active a .menu-arrow::before {
    border-right-color: var(--brand-primary, #1C1C7E);
    border-bottom-color: var(--brand-primary, #1C1C7E);
}

/* Cluster header divider — uses brand-accent hairline so it reads as
   an Elimusmart accent rather than the default neutral grey.
   Phase 1.5: demote it to a tight "eyebrow" (smaller, letter-spaced,
   reduced margins) so the cluster label reads as a group divider above
   the section headers rather than as a peer of them — kills the
   "double-decker header" stacking the audit flagged. */
.sidebar .sidebar-menu > ul > li h6.elimusmart-cluster-hdr {
    color: var(--brand-primary, #1C1C7E);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    margin-top: 6px;
    margin-bottom: 8px;
    opacity: 0.85;
}
.sidebar .sidebar-menu > ul > li h6.elimusmart-cluster-hdr::after {
    background: linear-gradient(
        90deg,
        rgba(var(--brand-primary-rgb, 28, 28, 126), 0.4) 0%,
        rgba(var(--brand-accent-rgb, 254, 126, 0), 0.0) 100%
    );
    height: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 1.6 — Accordion sections + Pinned/Frequent quick groups.
   Progressive enhancement: the server renders every section expanded;
   script.js sets data-collapsed="1" on all but the open one. Without JS
   nothing is hidden, so the sidebar is always fully navigable.
   ────────────────────────────────────────────────────────────────────── */
.sidebar .sidebar-menu .nav-section-toggle {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.sidebar .sidebar-menu .nav-section-caret {
    position: absolute;
    right: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--brand-primary, #1C1C7E);
    transition: transform 0.2s ease;
}
.sidebar .sidebar-menu .nav-section[data-collapsed="1"] .nav-section-caret {
    transform: rotate(-90deg);
}
.sidebar .sidebar-menu .nav-section[data-collapsed="1"] .nav-section-body {
    display: none;
}

/* Pin affordance — Phase 2.7: an IN-FLOW trailing icon inside the nav link
   (was an absolute overlay that collided with badges/labels). Hidden until the
   row is hovered; brand-accent when pinned. Sits flush at the row's right edge. */
.sidebar .sidebar-menu .nav-pin-btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 0 0 4px;
    border: 0;
    background: transparent;
    line-height: 1;
    font-size: 14px;
    color: var(--bs-gray-500, #98a2b3);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.sidebar .sidebar-menu .nav-leaf > a:hover .nav-pin-btn,
.sidebar .sidebar-menu .nav-pin-btn:focus,
.sidebar .sidebar-menu .nav-pin-btn.pinned {
    opacity: 1;
}
.sidebar .sidebar-menu .nav-pin-btn.pinned {
    color: var(--brand-accent, #FE7E00);
}
/* In the collapsed mini-sidebar the row is icon-only — never show the pin. */
body.mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu .nav-pin-btn {
    display: none;
}

/* Quick groups (Pinned / Frequent) are always-open static lists, never
   part of the accordion and never carry a toggle/caret. */
.sidebar .sidebar-menu .nav-quick-group .nav-section-body {
    display: block;
}

/* Header (top navbar) — brand-primary for active/hover affordances */
.header .header-left .logo {
    border-bottom-color: var(--brand-primary, #1C1C7E);
}
.header .top-nav-search .btn,
.header .nav-item-box a:hover {
    color: var(--brand-primary, #1C1C7E);
}

/* ──────────────────────────────────────────────────────────────────────
   Sidebar scrolling — use native CSS overflow instead of jQuery slimscroll.
   slimscroll computes a fixed height of (window.height - 60) once on page
   load and intercepts wheel events through .slimScrollDiv. On long admin
   sidebars this is fragile: when the sidebar grows past the cached height
   (because cluster headers + 8 sections + many subitems pushed it down) the
   slimscroll wheel handler refuses to scroll, and the page-body scroll
   doesn't take over either because the cursor is over the (locked) sidebar.
   Native overflow with overscroll-behavior: contain gives us touch + wheel
   + keyboard scrolling for free, with no JS dependency.

   We neutralize slimscroll's injected wrapper (.slimScrollDiv) and rail/bar
   so the native scrollbar of .sidebar-inner is the only one rendered.
   ────────────────────────────────────────────────────────────────────── */
.sidebar .sidebar-inner,
.sidebar .sidebar-inner.slimscroll {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
.sidebar .slimScrollDiv {
    height: auto !important;
    overflow: visible !important;
}
.sidebar .slimScrollBar,
.sidebar .slimScrollRail {
    display: none !important;
}
/* Make the native scrollbar slim + brand-tinted so it doesn't fight the
   Preskool aesthetic. Webkit + Firefox both supported. */
.sidebar .sidebar-inner::-webkit-scrollbar {
    width: 6px;
}
.sidebar .sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-primary-rgb, 28, 28, 126), 0.25);
    border-radius: 3px;
}
.sidebar .sidebar-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--brand-primary-rgb, 28, 28, 126), 0.45);
}
.sidebar .sidebar-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--brand-primary-rgb, 28, 28, 126), 0.25) transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Portal chrome (parent/student) — STEM FIX.
 *
 * The pp-*/sp-* utility classes used by ~34 portal page bodies live in
 * resources/scss/components/_portal.scss → main.scss, which mainlayout
 * deliberately does NOT load (head.blade.php only @vites elimusmart-overrides).
 * They were therefore rendering UNSTYLED — the cause of the "every page looks
 * plain" drift. We port them here (compat.css IS loaded on every mainlayout
 * page) and upgrade .pp-card/.sp-card to full Preskool-card chrome so portal
 * pages match the dashboard / school-admin standard. Brand tokens only.
 * ────────────────────────────────────────────────────────────────────────── */

/* Cards — match the Preskool .card look (surface, soft border, elevation, gap) */
.pp-card,
.sp-card {
    position: relative;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-light, #e6e8ee);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1.5rem;
}
.pp-card .pp-card-body,
.sp-card .sp-card-body { padding: 1.25rem; }

/* Optional card header chrome (used by the richer portal pages) */
.pp-card > .pp-card-header,
.sp-card > .sp-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light, #e6e8ee);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Interactive cards (used as links) lift on hover like the dashboard's animate-card */
a.pp-card,
a.sp-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.pp-card:hover,
a.sp-card:hover { box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.08); transform: translateY(-2px); }

.pp-stat,
.sp-stat { font-size: 1.5rem; font-weight: 700; }
.pp-stat-label,
.sp-stat-label {
    color: var(--text-muted, #6b7280);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pp-section-title,
.sp-section-title { font-size: 1.05rem; font-weight: 600; margin: 0.75rem 0 0.5rem; }

.pp-balance { color: var(--status-danger, #dc2626); }
.pp-balance.is-paid { color: var(--brand-secondary, #50A754); }
.pp-success { color: var(--brand-secondary, #50A754); }
.pp-danger  { color: var(--status-danger,  #dc2626); }
.pp-muted   { color: var(--text-muted,     #64748b); }
.pp-text    { color: var(--text-body,      #1f2937); }
.pp-border  { border-color: var(--border-light, #e5e7eb) !important; }

.pp-child-switcher { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pp-child-switcher .pp-chip {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-strong, #d1d5db);
    font-size: 0.85rem;
    color: var(--text-body, #374151);
    text-decoration: none;
}
.pp-child-switcher .pp-chip.active {
    background: var(--brand-primary, #1C1C7E);
    color: #fff;
    border-color: var(--brand-primary, #1C1C7E);
}

.sp-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-tint-primary, rgba(28, 28, 126, 0.08));
    color: var(--brand-primary, #1C1C7E);
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}
.sp-pill.due       { background: rgba(220, 38, 38, 0.10);  color: var(--status-danger, #dc2626); }
.sp-pill.published { background: rgba(80, 167, 84, 0.12);  color: var(--brand-secondary-hover, #2c6e30); }

.pp-mark-read,
.pp-mark-all-read { color: var(--brand-primary, #1C1C7E); cursor: pointer; }
.pp-mark-read:hover,
.pp-mark-all-read:hover { text-decoration: underline; }

/* Mobile bottom navigation (parent + student) */
.pp-bottom-nav,
.sp-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--surface-card, #fff);
    border-top: 1px solid var(--border-light, #e6e8ee);
    display: flex; justify-content: space-around;
    z-index: 1030; padding: 6px 0;
    box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.04);
}
.pp-bottom-nav a,
.sp-bottom-nav a {
    flex: 1; text-align: center; color: var(--text-muted, #6b7280);
    font-size: 0.72rem; text-decoration: none; padding: 8px 0; min-height: 44px;
}
.pp-bottom-nav a i,
.sp-bottom-nav a i { font-size: 1.2rem; display: block; margin-bottom: 2px; }
.pp-bottom-nav a.active,
.sp-bottom-nav a.active { color: var(--brand-primary, #1C1C7E); }
@media (min-width: 768px) {
    .pp-bottom-nav, .sp-bottom-nav { display: none; }
}
body.portal-shell { padding-bottom: 80px; }
@media (min-width: 768px) { body.portal-shell { padding-bottom: 0; } }

/* ───────────────────────────────────────────────────────────────────────
   U6.2 accessibility — skip link, visible keyboard focus, reduced motion.
   Skip link + reduced-motion are global (benefit the whole app); the
   focus-visible ring is scoped to the portal shell to avoid restyling admin.
   ─────────────────────────────────────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    left: 8px;
    top: -56px;
    z-index: 2000;
    padding: .55rem .95rem;
    background: var(--bs-primary, #3d5ee1);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: top .15s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 8px;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
#main-content:focus { outline: none; }

body.portal-shell a:focus-visible,
body.portal-shell button:focus-visible,
body.portal-shell .btn:focus-visible,
body.portal-shell .nav-leaf a:focus-visible,
body.portal-shell .form-control:focus-visible,
body.portal-shell .form-select:focus-visible,
body.portal-shell [tabindex]:focus-visible {
    outline: 2px solid var(--bs-primary, #3d5ee1);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}