/* ==========================================================================
   ALPHA o'quv markazi — UI theme layer
   Loaded AFTER Sneat core.css / theme-default.css and overrides them.
   Everything is driven by tokens so light / dark share one set of rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* brand */
    --app-primary: #4f46e5;
    --app-primary-hover: #4338ca;
    --app-primary-contrast: #ffffff;
    --app-primary-soft: rgba(79, 70, 229, .10);
    --app-primary-soft-hover: rgba(79, 70, 229, .16);
    --app-primary-ring: rgba(79, 70, 229, .28);

    /* status */
    --app-success: #0f9d58;
    --app-success-soft: rgba(15, 157, 88, .12);
    --app-warning: #d97706;
    --app-warning-soft: rgba(217, 119, 6, .13);
    --app-danger: #dc2626;
    --app-danger-soft: rgba(220, 38, 38, .11);
    --app-info: #0284c7;
    --app-info-soft: rgba(2, 132, 199, .12);

    /* surfaces */
    --app-bg: #f4f5fa;
    --app-surface: #ffffff;
    --app-surface-2: #f7f8fc;
    --app-surface-3: #eef0f7;
    --app-sidebar: #ffffff;
    --app-navbar: rgba(255, 255, 255, .82);

    /* lines */
    --app-border: #e6e8f0;
    --app-border-strong: #d3d7e4;

    /* type */
    --app-text: #1b2233;
    --app-text-muted: #667085;
    --app-text-subtle: #98a1b3;
    --app-heading: #101828;

    /* elevation */
    --app-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --app-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --app-shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
    --app-shadow-lg: 0 14px 34px rgba(16, 24, 40, .12), 0 4px 10px rgba(16, 24, 40, .06);

    /* geometry */
    --app-radius-sm: 8px;
    --app-radius: 12px;
    --app-radius-lg: 16px;
    --app-radius-pill: 999px;

    --app-logo-filter: none;
    --app-scheme: light;
}

html[data-theme="dark"] {
    --app-primary: #818cf8;
    --app-primary-hover: #a5b0fb;
    --app-primary-contrast: #10131c;
    --app-primary-soft: rgba(129, 140, 248, .16);
    --app-primary-soft-hover: rgba(129, 140, 248, .24);
    --app-primary-ring: rgba(129, 140, 248, .34);

    --app-success: #34d399;
    --app-success-soft: rgba(52, 211, 153, .16);
    --app-warning: #fbbf24;
    --app-warning-soft: rgba(251, 191, 36, .16);
    --app-danger: #f87171;
    --app-danger-soft: rgba(248, 113, 113, .16);
    --app-info: #38bdf8;
    --app-info-soft: rgba(56, 189, 248, .16);

    --app-bg: #0e1017;
    --app-surface: #161922;
    --app-surface-2: #1c2029;
    --app-surface-3: #242936;
    --app-sidebar: #12151d;
    --app-navbar: rgba(18, 21, 29, .82);

    --app-border: #272c39;
    --app-border-strong: #363d4e;

    --app-text: #e5e8f0;
    --app-text-muted: #99a2b5;
    --app-text-subtle: #6f7889;
    --app-heading: #f3f5fa;

    --app-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
    --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30);
    --app-shadow-md: 0 4px 14px rgba(0, 0, 0, .48), 0 2px 4px rgba(0, 0, 0, .32);
    --app-shadow-lg: 0 18px 40px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .38);

    --app-logo-filter: invert(1) brightness(1.6) contrast(.92);
    --app-scheme: dark;
}

html[data-theme] {
    color-scheme: var(--app-scheme);

    /* bridge our tokens into the Bootstrap variables Sneat reads */
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-primary: var(--app-primary);
    --bs-secondary: var(--app-text-muted);
    --bs-success: var(--app-success);
    --bs-info: var(--app-info);
    --bs-warning: var(--app-warning);
    --bs-danger: var(--app-danger);
    --bs-border-color: var(--app-border);
    --bs-heading-color: var(--app-heading);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html[data-theme] body {
    background-color: var(--app-bg);
    color: var(--app-text);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: .9375rem;
    line-height: 1.55;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] h5,
html[data-theme] h6,
html[data-theme] .h1,
html[data-theme] .h2,
html[data-theme] .h3,
html[data-theme] .h4,
html[data-theme] .h5,
html[data-theme] .h6 {
    color: var(--app-heading);
    font-weight: 650;
    letter-spacing: -0.018em;
}

html[data-theme] a {
    color: var(--app-primary);
    text-decoration: none;
    transition: color .15s ease;
}

html[data-theme] a:hover {
    color: var(--app-primary-hover);
}

html[data-theme] hr,
html[data-theme] .dropdown-divider {
    border-color: var(--app-border);
    opacity: 1;
}

html[data-theme] small,
html[data-theme] .small {
    font-size: .8125rem;
}

html[data-theme] .text-muted {
    color: var(--app-text-muted) !important;
}

html[data-theme] .text-body {
    color: var(--app-text) !important;
}

html[data-theme] .text-dark {
    color: var(--app-heading) !important;
}

html[data-theme] .text-primary {
    color: var(--app-primary) !important;
}

html[data-theme] .border,
html[data-theme] .border-top,
html[data-theme] .border-end,
html[data-theme] .border-bottom,
html[data-theme] .border-start {
    border-color: var(--app-border) !important;
}

html[data-theme] .bg-white,
html[data-theme] .bg-body {
    background-color: var(--app-surface) !important;
}

html[data-theme] .bg-light {
    background-color: var(--app-surface-2) !important;
}

html[data-theme] ::selection {
    background: var(--app-primary-soft-hover);
    color: var(--app-text);
}

/* focus ring — one consistent treatment everywhere */
html[data-theme] :focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

html[data-theme] .btn:focus,
html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus,
html[data-theme] .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--app-primary-ring);
}

/* scrollbars */
html[data-theme] * {
    scrollbar-color: var(--app-border-strong) transparent;
    scrollbar-width: thin;
}

html[data-theme] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme] ::-webkit-scrollbar-track {
    background: transparent;
}

html[data-theme] ::-webkit-scrollbar-thumb {
    background: var(--app-border-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--app-radius-pill);
}

html[data-theme] ::-webkit-scrollbar-thumb:hover {
    background: var(--app-text-subtle);
    background-clip: content-box;
}

/* --------------------------------------------------------------------------
   3. Layout shell
   -------------------------------------------------------------------------- */

html[data-theme] .layout-wrapper,
html[data-theme] .layout-container,
html[data-theme] .layout-page,
html[data-theme] .content-wrapper {
    background-color: transparent;
}

html[data-theme] .content-wrapper {
    min-height: 100vh;
}

html[data-theme] .container-p-y {
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem !important;
}

/* ---- Sidebar ---- */

html[data-theme] .layout-menu,
html[data-theme] .bg-menu-theme {
    background-color: var(--app-sidebar) !important;
    border-right: 1px solid var(--app-border);
    box-shadow: none;
}

html[data-theme] .layout-menu {
    width: 264px;
}

/*
 * The brand block competes with the menu for vertical space. The logo is a
 * square lock-up, so an unconstrained `max-width: 150px` made it 150px TALL —
 * 183px with padding, i.e. a fifth of the sidebar — and pushed half the menu
 * below the fold. Constrain the HEIGHT, not the width.
 */
html[data-theme] .app-brand {
    padding: .85rem 1.25rem .7rem;
    min-height: auto !important;
    height: auto !important;
    border-bottom: 1px solid var(--app-border);
    margin-bottom: .25rem;
    flex: 0 0 auto;
}

html[data-theme] .app-brand-link img,
html[data-theme] .brand-logo {
    max-height: 58px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

html[data-theme] .app-brand-link img,
html[data-theme] .brand-logo {
    filter: var(--app-logo-filter);
    transition: filter .2s ease;
}

/*
 * The horizontal padding here is what insets the highlighted row from the
 * sidebar edges. Sneat sizes .menu-item assuming .menu-inner has no padding,
 * so the items kept their old width and hung 21px past the edge — the sidebar
 * scrolled sideways even though every label fitted. `width: auto` below lets
 * them fill this content box instead of a remembered one.
 */
html[data-theme] .menu-inner {
    padding: .25rem .75rem 1.25rem !important;
    /* Native fallback: PerfectScrollbar normally drives this, but if its JS
       fails to initialise the menu must still be scrollable rather than
       silently clipping everything below the fold. */
    overflow-y: auto;
}

/* PerfectScrollbar sets its own overflow once it takes over. */
html[data-theme] .menu-inner.ps {
    overflow-y: hidden;
}

html[data-theme] .menu-header {
    padding: .85rem .5rem .3rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-text-subtle);
}

/* The first header sits right under the brand rule — no extra gap. */
html[data-theme] .menu-inner > .menu-header:first-child {
    padding-top: .35rem;
}

html[data-theme] .bg-menu-theme .menu-header {
    color: var(--app-text-subtle);
}

html[data-theme] .bg-menu-theme .menu-header:before {
    display: none;
}

html[data-theme] .menu-item,
html[data-theme] .menu-header {
    margin: 2px 0 !important;
    /* Sneat gives these a width computed from the sidebar, which ignores the
       padding added to .menu-inner above. `auto` makes them fill whatever
       content box they are actually in, so nothing overflows sideways; and
       .menu-inner is a column flex container, so `align-self: stretch` is what
       makes the highlighted row span the full width instead of hugging its
       label. */
    width: auto !important;
    max-width: 100%;
    align-self: stretch;
}

/*
 * `:not(.layout-menu-toggle)` matters. The mobile close button in .app-brand
 * carries .menu-link purely to inherit the menu's colours, so `width: 100%`
 * turned it into a full-width blue slab sitting across the top of the sidebar.
 */
html[data-theme] .bg-menu-theme .menu-link:not(.layout-menu-toggle),
html[data-theme] .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item .menu-link {
    color: var(--app-text-muted);
    font-size: .89rem;
    font-weight: 500;
    border-radius: var(--app-radius-sm);
    padding: .48rem .75rem;
    min-height: auto;
    margin: 0;
    width: 100%;
    transition: background-color .15s ease, color .15s ease;
}

/* ---------------------------------------- mobile sidebar close button ---- */

/*
 * Sneat ships this as a round blue pill floating on the sidebar's edge:
 *
 *   .app-brand .layout-menu-toggle   { position: absolute; left: 15rem;
 *                                      background: #696cff; border: 7px solid #f5f5f9 }
 *   .app-brand .layout-menu-toggle i { width: 1.5rem; height: 1.5rem; color: #fff }
 *
 * Every one of those has to be undone, and `color` on the icon is the one that
 * is easy to miss: leave it and the chevron stays white, so a quiet button
 * renders as an empty box.
 */
html[data-theme] .app-brand .layout-menu-toggle {
    position: static;
    flex: 0 0 auto;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-muted);
    transition: background-color .15s ease, color .15s ease;
}

html[data-theme] .app-brand .layout-menu-toggle:hover,
html[data-theme] .app-brand .layout-menu-toggle:focus,
html[data-theme] .app-brand .layout-menu-toggle:active {
    background: var(--app-surface-3);
    color: var(--app-text);
    box-shadow: none;
}

html[data-theme] .app-brand .layout-menu-toggle i {
    width: auto;
    height: auto;
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
}

/* The logo takes the space that is left, not all of it — otherwise the close
   button is pushed onto a line of its own. */
html[data-theme] .app-brand .app-brand-link {
    flex: 1 1 auto;
    min-width: 0;
}

html[data-theme] .bg-menu-theme .menu-link:hover,
html[data-theme] .bg-menu-theme .menu-link:focus {
    background-color: var(--app-surface-3);
    color: var(--app-text);
}

html[data-theme] .bg-menu-theme .menu-item.active > .menu-link,
html[data-theme] .bg-menu-theme .menu-link.active {
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-weight: 600;
    box-shadow: none;
}

html[data-theme] .menu-icon {
    font-size: 1.2rem;
    margin-right: .625rem !important;
    width: 1.4rem;
    text-align: center;
    opacity: .95;
}

/* the little pill Sneat draws next to the active item */
html[data-theme] .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
    display: none;
}

html[data-theme] .menu-link .menu-badge {
    margin-left: auto;
}

/* ---- Top navbar ---- */

html[data-theme] .layout-navbar,
html[data-theme] .bg-navbar-theme {
    background-color: var(--app-navbar) !important;
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-xs);
    color: var(--app-text);
    min-height: 3.75rem;
}

html[data-theme] .layout-navbar .nav-link,
html[data-theme] .layout-navbar i {
    color: var(--app-text-muted);
}

html[data-theme] .layout-navbar .nav-link:hover {
    color: var(--app-text);
}

/* Only the quick-filter box is chromeless — inputs inside navbar dropdowns
   keep their normal field styling. */
html[data-theme] .layout-navbar .nav-search {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

html[data-theme] .layout-navbar .nav-search:hover {
    border-color: var(--app-border);
}

html[data-theme] .layout-navbar .nav-search:focus {
    background-color: var(--app-surface);
    border-color: var(--app-primary);
}

/* --------------------------------------------------------------------------
   4. Cards & panels
   -------------------------------------------------------------------------- */

html[data-theme] .card {
    background-color: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-xs);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

html[data-theme] .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-heading);
    padding: 1.1rem 1.35rem;
    font-weight: 650;
}

html[data-theme] .card-header:only-child,
html[data-theme] .card-header.border-0 {
    border-bottom: 0;
}

html[data-theme] .card-body {
    padding: 1.35rem;
}

html[data-theme] .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--app-border);
    padding: 1rem 1.35rem;
}

html[data-theme] .card-title {
    color: var(--app-heading);
    margin-bottom: .35rem;
}

/* interactive cards opt in with .card-hover */
html[data-theme] .card-hover:hover {
    box-shadow: var(--app-shadow-md);
    border-color: var(--app-border-strong);
    transform: translateY(-2px);
}

/* stat tile used on the dashboards */
html[data-theme] .stat-card {
    position: relative;
    overflow: hidden;
}

html[data-theme] .stat-card .stat-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}

html[data-theme] .stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--app-heading);
    letter-spacing: -0.02em;
}

html[data-theme] .stat-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-sm);
    font-size: 1.35rem;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    flex: 0 0 auto;
}

html[data-theme] .stat-icon.is-success { background: var(--app-success-soft); color: var(--app-success); }
html[data-theme] .stat-icon.is-warning { background: var(--app-warning-soft); color: var(--app-warning); }
html[data-theme] .stat-icon.is-danger  { background: var(--app-danger-soft);  color: var(--app-danger); }
html[data-theme] .stat-icon.is-info    { background: var(--app-info-soft);    color: var(--app-info); }

/* --------------------------------------------------------------------------
   5. Tables
   -------------------------------------------------------------------------- */

html[data-theme] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-striped-bg: var(--app-surface-2);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: var(--app-surface-2);
    --bs-table-hover-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    color: var(--app-text);
    border-color: var(--app-border);
    margin-bottom: 0;
}

html[data-theme] .table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom-color: var(--app-border);
    padding: .8rem 1.35rem;
    box-shadow: none;
}

html[data-theme] .table thead th {
    background-color: var(--app-surface-2);
    color: var(--app-text-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--app-border);
    white-space: nowrap;
}

html[data-theme] .table tbody tr {
    transition: background-color .12s ease;
}

html[data-theme] .table-hover > tbody > tr:hover > * {
    background-color: var(--app-surface-2);
}

html[data-theme] .table > :not(:first-child) {
    border-top: 0;
}

html[data-theme] .table tbody tr:last-child > * {
    border-bottom: 0;
}

/* a table living directly inside a card should meet its edges cleanly */
html[data-theme] .card > .table {
    border-bottom-left-radius: var(--app-radius);
    border-bottom-right-radius: var(--app-radius);
    overflow: hidden;
}

/* Same rounding for the scrolling wrapper — but NOT `overflow: hidden`.
   That is the whole point of .table-responsive: a table wider than the card
   has to scroll inside it. Hiding both axes clipped wide tables instead, so
   their last columns became unreachable on narrow screens. Only the vertical
   axis is hidden, which is what the rounded corners actually need. */
html[data-theme] .card > .table-responsive {
    border-bottom-left-radius: var(--app-radius);
    border-bottom-right-radius: var(--app-radius);
    overflow-x: auto;
    overflow-y: hidden;
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */

html[data-theme] .form-label,
html[data-theme] .col-form-label {
    color: var(--app-text);
    font-size: .85rem;
    font-weight: 600;
    /* Sneat uppercases every label; sentence case reads far better in forms. */
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: .4rem;
}

html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] .input-group-text {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border-strong);
    color: var(--app-text);
    border-radius: var(--app-radius-sm);
    padding: .5rem .75rem;
    font-size: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

html[data-theme] .form-control:hover:not(:disabled),
html[data-theme] .form-select:hover:not(:disabled) {
    border-color: var(--app-text-subtle);
}

html[data-theme] .form-control:focus,
html[data-theme] .form-select:focus {
    background-color: var(--app-surface);
    border-color: var(--app-primary);
    color: var(--app-text);
}

html[data-theme] .form-control::placeholder {
    color: var(--app-text-subtle);
    opacity: 1;
}

html[data-theme] .form-control:disabled,
html[data-theme] .form-control[readonly],
html[data-theme] .form-select:disabled {
    background-color: var(--app-surface-3);
    color: var(--app-text-muted);
    opacity: 1;
}

html[data-theme] .input-group-text {
    background-color: var(--app-surface-2);
    color: var(--app-text-muted);
}

html[data-theme] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px 11px;
    padding-right: 2.25rem;
}

html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2399a2b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

/* native date/time pickers are unreadable on dark without this */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(.85);
    cursor: pointer;
}

html[data-theme] .form-check-input {
    background-color: var(--app-surface);
    border-color: var(--app-border-strong);
}

html[data-theme] .form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

html[data-theme] .form-check-label {
    color: var(--app-text);
}

html[data-theme] .form-text {
    color: var(--app-text-muted);
}

html[data-theme] .invalid-feedback,
html[data-theme] .text-danger {
    color: var(--app-danger) !important;
}

html[data-theme] .form-control.is-invalid,
html[data-theme] .was-validated .form-control:invalid {
    border-color: var(--app-danger);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

html[data-theme] .btn {
    --bs-btn-focus-shadow-rgb: none;
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem 1rem;
    border-width: 1px;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}

html[data-theme] .btn:active {
    transform: translateY(1px);
}

html[data-theme] .btn-sm {
    padding: .3rem .65rem;
    font-size: .8rem;
    border-radius: 7px;
}

html[data-theme] .btn-lg {
    padding: .7rem 1.35rem;
    font-size: .975rem;
}

html[data-theme] .btn-primary {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-primary-contrast);
}

html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus,
html[data-theme] .btn-primary:active {
    background-color: var(--app-primary-hover);
    border-color: var(--app-primary-hover);
    color: var(--app-primary-contrast);
}

html[data-theme] .btn-secondary {
    background-color: var(--app-surface-3);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme] .btn-secondary:hover,
html[data-theme] .btn-secondary:focus,
html[data-theme] .btn-secondary:active {
    background-color: var(--app-border);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme] .btn-success { background-color: var(--app-success); border-color: var(--app-success); color: #fff; }
html[data-theme] .btn-danger  { background-color: var(--app-danger);  border-color: var(--app-danger);  color: #fff; }
html[data-theme] .btn-warning { background-color: var(--app-warning); border-color: var(--app-warning); color: #fff; }
html[data-theme] .btn-info    { background-color: var(--app-info);    border-color: var(--app-info);    color: #fff; }

html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-info {
    color: #10131c;
}

html[data-theme] .btn-success:hover { filter: brightness(.94); color: #fff; }
html[data-theme] .btn-danger:hover  { filter: brightness(.94); color: #fff; }
html[data-theme] .btn-warning:hover { filter: brightness(.94); color: #fff; }
html[data-theme] .btn-info:hover    { filter: brightness(.94); color: #fff; }

html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-info:hover {
    filter: brightness(1.08);
    color: #10131c;
}

/* outline family */
html[data-theme] .btn-outline-primary {
    color: var(--app-primary);
    border-color: var(--app-primary);
    background-color: transparent;
}

html[data-theme] .btn-outline-primary:hover,
html[data-theme] .btn-outline-primary:active {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-primary-contrast);
}

html[data-theme] .btn-outline-secondary,
html[data-theme] .btn-outline-dark {
    color: var(--app-text);
    border-color: var(--app-border-strong);
    background-color: transparent;
}

html[data-theme] .btn-outline-secondary:hover,
html[data-theme] .btn-outline-dark:hover {
    background-color: var(--app-surface-3);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme] .btn-outline-danger  { color: var(--app-danger);  border-color: var(--app-danger);  background-color: transparent; }
html[data-theme] .btn-outline-success { color: var(--app-success); border-color: var(--app-success); background-color: transparent; }
html[data-theme] .btn-outline-warning { color: var(--app-warning); border-color: var(--app-warning); background-color: transparent; }
html[data-theme] .btn-outline-info    { color: var(--app-info);    border-color: var(--app-info);    background-color: transparent; }

html[data-theme] .btn-outline-danger:hover  { background-color: var(--app-danger);  color: #fff; }
html[data-theme] .btn-outline-success:hover { background-color: var(--app-success); color: #fff; }
html[data-theme] .btn-outline-warning:hover { background-color: var(--app-warning); color: #fff; }
html[data-theme] .btn-outline-info:hover    { background-color: var(--app-info);    color: #fff; }

html[data-theme] .btn-light {
    background-color: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme] .btn-light:hover {
    background-color: var(--app-surface-3);
    color: var(--app-text);
}

html[data-theme] .btn-dark {
    background-color: var(--app-heading);
    border-color: var(--app-heading);
    color: var(--app-surface);
}

html[data-theme] .btn-link {
    color: var(--app-primary);
    text-decoration: none;
}

/* subtle icon-only button used in toolbars */
html[data-theme] .btn-icon {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border-radius: var(--app-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--app-text-muted);
}

html[data-theme] .btn-icon:hover {
    background: var(--app-surface-3);
    color: var(--app-text);
}

/* --------------------------------------------------------------------------
   8. Badges
   -------------------------------------------------------------------------- */

html[data-theme] .badge {
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .01em;
    /* Sneat uppercases badge text — keep the author's casing instead. */
    text-transform: none;
    padding: .34em .7em;
    border-radius: 6px;
}

html[data-theme] .badge.rounded-pill {
    border-radius: var(--app-radius-pill);
}

html[data-theme] .badge.bg-primary { background-color: var(--app-primary) !important; color: var(--app-primary-contrast); }
html[data-theme] .badge.bg-success { background-color: var(--app-success) !important; color: #fff; }
html[data-theme] .badge.bg-danger  { background-color: var(--app-danger)  !important; color: #fff; }
html[data-theme] .badge.bg-warning { background-color: var(--app-warning) !important; color: #fff; }
html[data-theme] .badge.bg-info    { background-color: var(--app-info)    !important; color: #fff; }
html[data-theme] .badge.bg-secondary { background-color: var(--app-surface-3) !important; color: var(--app-text); }

html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.bg-info {
    color: #10131c;
}

/* Sneat's soft "label" badges */
html[data-theme] .bg-label-primary { background-color: var(--app-primary-soft) !important; color: var(--app-primary) !important; }
html[data-theme] .bg-label-success { background-color: var(--app-success-soft) !important; color: var(--app-success) !important; }
html[data-theme] .bg-label-danger  { background-color: var(--app-danger-soft)  !important; color: var(--app-danger)  !important; }
html[data-theme] .bg-label-warning { background-color: var(--app-warning-soft) !important; color: var(--app-warning) !important; }
html[data-theme] .bg-label-info    { background-color: var(--app-info-soft)    !important; color: var(--app-info)    !important; }
html[data-theme] .bg-label-secondary { background-color: var(--app-surface-3) !important; color: var(--app-text-muted) !important; }

/* --------------------------------------------------------------------------
   9. Alerts
   -------------------------------------------------------------------------- */

html[data-theme] .alert {
    border: 1px solid transparent;
    border-radius: var(--app-radius);
    padding: .85rem 1.1rem;
    font-size: .9rem;
}

html[data-theme] .alert-success {
    background-color: var(--app-success-soft);
    border-color: color-mix(in srgb, var(--app-success) 30%, transparent);
    color: var(--app-success);
}

html[data-theme] .alert-danger {
    background-color: var(--app-danger-soft);
    border-color: color-mix(in srgb, var(--app-danger) 30%, transparent);
    color: var(--app-danger);
}

html[data-theme] .alert-warning {
    background-color: var(--app-warning-soft);
    border-color: color-mix(in srgb, var(--app-warning) 30%, transparent);
    color: var(--app-warning);
}

html[data-theme] .alert-info,
html[data-theme] .alert-primary {
    background-color: var(--app-info-soft);
    border-color: color-mix(in srgb, var(--app-info) 30%, transparent);
    color: var(--app-info);
}

html[data-theme] .btn-close {
    filter: var(--app-logo-filter);
    opacity: .6;
}

html[data-theme] .btn-close:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   10. Dropdowns, modals, offcanvas, popovers
   -------------------------------------------------------------------------- */

html[data-theme] .dropdown-menu {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
    padding: .4rem;
    color: var(--app-text);
}

html[data-theme] .dropdown-item {
    color: var(--app-text);
    border-radius: var(--app-radius-sm);
    padding: .5rem .7rem;
    font-size: .875rem;
}

html[data-theme] .dropdown-item:hover,
html[data-theme] .dropdown-item:focus {
    background-color: var(--app-surface-3);
    color: var(--app-text);
}

html[data-theme] .dropdown-item.active,
html[data-theme] .dropdown-item:active {
    background-color: var(--app-primary-soft);
    color: var(--app-primary);
}

html[data-theme] .dropdown-header {
    color: var(--app-text-subtle);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html[data-theme] .modal-content {
    background-color: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
}

html[data-theme] .modal-header,
html[data-theme] .modal-footer {
    border-color: var(--app-border);
    padding: 1.1rem 1.4rem;
}

html[data-theme] .modal-body {
    padding: 1.4rem;
}

html[data-theme] .modal-title {
    color: var(--app-heading);
    font-weight: 650;
}

html[data-theme] .modal-backdrop.show {
    opacity: .55;
}

html[data-theme="dark"] .modal-backdrop.show {
    opacity: .7;
}

html[data-theme] .offcanvas {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme] .popover,
html[data-theme] .tooltip-inner {
    background-color: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-md);
    border-radius: var(--app-radius-sm);
}

/* --------------------------------------------------------------------------
   11. Navs, tabs, pagination, breadcrumbs, list groups
   -------------------------------------------------------------------------- */

html[data-theme] .nav-tabs {
    border-bottom: 1px solid var(--app-border);
    gap: .25rem;
}

html[data-theme] .nav-tabs .nav-link {
    color: var(--app-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    font-size: .9rem;
    padding: .6rem .9rem;
    background: transparent;
}

html[data-theme] .nav-tabs .nav-link:hover {
    color: var(--app-text);
    border-bottom-color: var(--app-border-strong);
}

html[data-theme] .nav-tabs .nav-link.active {
    color: var(--app-primary);
    background: transparent;
    border-bottom-color: var(--app-primary);
}

html[data-theme] .nav-pills .nav-link {
    color: var(--app-text-muted);
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    font-size: .875rem;
}

html[data-theme] .nav-pills .nav-link.active {
    background-color: var(--app-primary-soft);
    color: var(--app-primary);
}

html[data-theme] .pagination {
    gap: .25rem;
}

html[data-theme] .page-link {
    background-color: transparent;
    border: 1px solid var(--app-border);
    color: var(--app-text-muted);
    border-radius: var(--app-radius-sm) !important;
    font-size: .875rem;
    font-weight: 600;
    padding: .4rem .75rem;
    box-shadow: none;
}

html[data-theme] .page-link:hover {
    background-color: var(--app-surface-3);
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme] .page-item.active .page-link {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-primary-contrast);
    box-shadow: none;
}

html[data-theme] .page-item.disabled .page-link {
    background-color: transparent;
    border-color: var(--app-border);
    color: var(--app-text-subtle);
}

html[data-theme] .breadcrumb {
    margin-bottom: 0;
    font-size: .85rem;
}

html[data-theme] .breadcrumb-item,
html[data-theme] .breadcrumb-item a {
    color: var(--app-text-muted);
}

html[data-theme] .breadcrumb-item.active {
    color: var(--app-text);
    font-weight: 600;
}

html[data-theme] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--app-text-subtle);
}

html[data-theme] .list-group {
    border-radius: var(--app-radius);
}

html[data-theme] .list-group-item {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme] .list-group-item-action:hover {
    background-color: var(--app-surface-2);
    color: var(--app-text);
}

html[data-theme] .accordion-item {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme] .accordion-button {
    background-color: var(--app-surface);
    color: var(--app-text);
    box-shadow: none;
}

html[data-theme] .accordion-button:not(.collapsed) {
    background-color: var(--app-primary-soft);
    color: var(--app-primary);
}

/* --------------------------------------------------------------------------
   12. Progress, avatars, misc
   -------------------------------------------------------------------------- */

html[data-theme] .progress {
    background-color: var(--app-surface-3);
    border-radius: var(--app-radius-pill);
    height: .5rem;
}

html[data-theme] .progress-bar {
    background-color: var(--app-primary);
    border-radius: var(--app-radius-pill);
}

/*
 * Round, always. This used to force a small square radius, which quietly
 * defeated the `rounded-circle` class the markup asks for.
 */
html[data-theme] .avatar img,
html[data-theme] .avatar .avatar-initial {
    border-radius: 50%;
    /* A hairline ring keeps a light photo from bleeding into a light row. */
    box-shadow: 0 0 0 1px var(--app-border);
}

html[data-theme] .avatar .avatar-initial {
    font-weight: 600;
    letter-spacing: .01em;
}

/* Sneat's tints, restated against the theme tokens so they hold in dark mode.
   The component picks one per person from their name, so a long list of
   initials does not read as a single block of colour. */
html[data-theme] .avatar .avatar-initial.bg-label-primary   { background-color: var(--app-primary-soft);   color: var(--app-primary); }
html[data-theme] .avatar .avatar-initial.bg-label-success   { background-color: var(--app-success-soft);   color: var(--app-success); }
html[data-theme] .avatar .avatar-initial.bg-label-info      { background-color: var(--app-info-soft);      color: var(--app-info); }
html[data-theme] .avatar .avatar-initial.bg-label-warning   { background-color: var(--app-warning-soft);   color: var(--app-warning); }
html[data-theme] .avatar .avatar-initial.bg-label-danger    { background-color: var(--app-danger-soft);    color: var(--app-danger); }
html[data-theme] .avatar .avatar-initial.bg-label-secondary { background-color: var(--app-surface-3);      color: var(--app-text-muted); }

/* Name + picture in one cell: the name truncates, the picture never shrinks. */
html[data-theme] .avatar-cell {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
}

html[data-theme] .avatar-cell > .avatar {
    flex: 0 0 auto;
}

html[data-theme] .avatar-cell .avatar-cell-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme] a.avatar-cell:hover .avatar-cell-text {
    color: var(--app-primary);
}

html[data-theme] .avatar.avatar-online:after {
    background-color: var(--app-success);
    box-shadow: 0 0 0 2px var(--app-surface);
}

/* empty state block */
html[data-theme] .empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--app-text-muted);
}

html[data-theme] .empty-state i {
    font-size: 2.75rem;
    color: var(--app-text-subtle);
    display: block;
    margin-bottom: .75rem;
}

html[data-theme] .empty-state h6 {
    color: var(--app-text);
    margin-bottom: .25rem;
}

/* page header used at the top of each screen */
html[data-theme] .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

html[data-theme] .page-head h4,
html[data-theme] .page-head h5 {
    margin-bottom: .15rem;
}

html[data-theme] .page-head .page-sub {
    color: var(--app-text-muted);
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   13. Theme switch control
   -------------------------------------------------------------------------- */

.theme-toggle {
    position: relative;
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.theme-toggle:hover {
    background: var(--app-surface-3);
    color: var(--app-text);
}

.theme-toggle i {
    font-size: 1.2rem;
    line-height: 1;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --------------------------------------------------------------------------
   14. Third-party widgets
   -------------------------------------------------------------------------- */

/* Choices.js */
html[data-theme] .choices__inner {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-sm);
    color: var(--app-text);
    min-height: 42px;
    padding: .3rem .5rem;
}

html[data-theme] .choices.is-focused .choices__inner {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px var(--app-primary-ring);
}

html[data-theme] .choices__list--dropdown,
html[data-theme] .choices__list[aria-expanded] {
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-lg);
    color: var(--app-text);
}

html[data-theme] .choices__list--dropdown .choices__item--selectable.is-highlighted,
html[data-theme] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--app-surface-3);
}

html[data-theme] .choices__list--multiple .choices__item {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--app-primary-contrast);
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 600;
}

html[data-theme] .choices__input {
    background-color: transparent !important;
    color: var(--app-text);
}

html[data-theme] .choices[data-type*="select-one"]::after {
    border-top-color: var(--app-text-muted);
}

html[data-theme] .choices__placeholder {
    color: var(--app-text-subtle);
    opacity: 1;
}

/* SweetAlert2 */
html[data-theme] .swal2-popup {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
}

html[data-theme] .swal2-title,
html[data-theme] .swal2-html-container {
    color: var(--app-text);
}

html[data-theme] .swal2-input,
html[data-theme] .swal2-textarea,
html[data-theme] .swal2-select {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border-strong);
    color: var(--app-text);
    border-radius: var(--app-radius-sm);
    box-shadow: none;
}

html[data-theme] .swal2-styled.swal2-confirm {
    background-color: var(--app-primary) !important;
    color: var(--app-primary-contrast) !important;
    border-radius: var(--app-radius-sm) !important;
    font-weight: 600;
}

html[data-theme] .swal2-styled.swal2-cancel {
    background-color: var(--app-surface-3) !important;
    color: var(--app-text) !important;
    border-radius: var(--app-radius-sm) !important;
    font-weight: 600;
}

html[data-theme="dark"] .swal2-icon.swal2-warning { border-color: var(--app-warning); color: var(--app-warning); }
html[data-theme="dark"] .swal2-icon.swal2-error   { border-color: var(--app-danger);  color: var(--app-danger); }
html[data-theme="dark"] .swal2-icon.swal2-success { border-color: var(--app-success); color: var(--app-success); }

html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--app-success-soft);
}

html[data-theme="dark"] .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--app-success);
}

html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix,
html[data-theme="dark"] .swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
    background-color: var(--app-surface);
}

/* Apex / Google charts sit on the card surface */
html[data-theme] .apexcharts-tooltip {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: var(--app-shadow-md) !important;
}

html[data-theme] .apexcharts-tooltip-title {
    background: var(--app-surface-2) !important;
    border-bottom-color: var(--app-border) !important;
}

html[data-theme] .apexcharts-text,
html[data-theme] .apexcharts-legend-text {
    fill: var(--app-text-muted) !important;
    color: var(--app-text-muted) !important;
}

html[data-theme] .apexcharts-gridline {
    stroke: var(--app-border) !important;
}

/* --------------------------------------------------------------------------
   15. Responsive tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    html[data-theme] .layout-navbar {
        border-radius: var(--app-radius);
    }
}

@media (max-width: 767.98px) {
    html[data-theme] .card-body,
    html[data-theme] .card-header {
        padding: 1rem;
    }

    html[data-theme] .table > :not(caption) > * > * {
        padding: .7rem 1rem;
    }

    html[data-theme] .stat-card .stat-value {
        font-size: 1.4rem;
    }

    html[data-theme] .page-head {
        margin-bottom: 1rem;
    }
}

/* --------------------------------------------------------------------------
   16. Grading, progress & layout helpers
   -------------------------------------------------------------------------- */

/* Used by half a dozen flex rows to let a child actually truncate. */
.min-w-0 {
    min-width: 0;
}

/* Small figure on a tinted plate — group cards, skill breakdowns, summaries. */
html[data-theme] .metric-box {
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .6rem .75rem;
    text-align: center;
}

html[data-theme] .metric-box .metric-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--app-heading);
}

html[data-theme] .metric-box .metric-label {
    font-size: .7rem;
    color: var(--app-text-muted);
}

/* Narrow numeric inputs inside grading matrices. */
html[data-theme] .grade-input {
    max-width: 5.5rem;
    text-align: center;
}

html[data-theme] .grade-table th,
html[data-theme] .grade-table td {
    vertical-align: middle;
}

html[data-theme] .grade-table thead th {
    text-align: center;
}

html[data-theme] .grade-table thead th:first-child,
html[data-theme] .grade-table tbody td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--app-surface);
    z-index: 1;
}

html[data-theme] .grade-table thead th:first-child {
    background: var(--app-surface-2);
}

/* Trend delta next to a progress figure. */
html[data-theme] .delta {
    font-size: .8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

html[data-theme] .delta.is-up   { color: var(--app-success); }
html[data-theme] .delta.is-down { color: var(--app-danger); }
html[data-theme] .delta.is-flat { color: var(--app-text-muted); }

/* Thin bar used to show a score inline in a table row. */
html[data-theme] .score-bar {
    height: 6px;
    border-radius: var(--app-radius-pill);
    background: var(--app-surface-3);
    overflow: hidden;
    min-width: 60px;
}

html[data-theme] .score-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--app-primary);
}

html[data-theme] .score-bar.is-success > span { background: var(--app-success); }
html[data-theme] .score-bar.is-warning > span { background: var(--app-warning); }
html[data-theme] .score-bar.is-danger  > span { background: var(--app-danger); }

/* Filter bar sitting above a table. */
html[data-theme] .filter-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   17. Motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html[data-theme] *,
    html[data-theme] *::before,
    html[data-theme] *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    html[data-theme] .layout-menu,
    html[data-theme] .layout-navbar,
    html[data-theme] .theme-toggle,
    html[data-theme] .d-print-none {
        display: none !important;
    }

    html[data-theme] .card {
        box-shadow: none;
        border-color: #ddd;
    }
}