/*
 * UPLIFT - Overrides CSS sobre Sneat
 * ----------------------------------
 * Convencions UI universals (alineades amb el patró Kumbai/altres clients).
 *
 * REGLES DURES (acordades amb Roger 2026-05-18):
 *   1. Botons SEMPRE outline. Hover: fons al 8% del color, color/border es mantenen.
 *   2. Botons dins taules: amb BORDER visible (no btn-text...), mida llegible.
 *   3. Modal close: X simple. Hover canvia NOMÉS el color de la X a vermell (SENSE fons).
 *   4. Menu lateral active: fons subtil + bold + color. NO border-left mai.
 *   5. HOVER mai desplaça l'element (sense transform/translate).
 *   6. NO border-left en CAP component (massa repetitiu, vist a múltiples llocs).
 *   7. Layout cercadors: filtres a l'esquerra, dates a la dreta.
 */

/* ============================================================
   0. ICONES BoxIcons — alineació vertical amb el text
   (per defecte queden desalineades respecte el text adjacent)
   ============================================================ */
.bx {
    vertical-align: middle;
}

/* ============================================================
   1. BOTONS OUTLINE — hover sutil sense desplaçament
   ============================================================ */

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
    background-color: var(--bs-paper-bg) !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Hover/focus/active: fons sutil del color, mai desplaçament */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: rgba(var(--bs-secondary-rgb), 0.08) !important;
    color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: rgba(var(--bs-success-rgb), 0.08) !important;
    color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: rgba(var(--bs-danger-rgb), 0.08) !important;
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background-color: rgba(var(--bs-warning-rgb), 0.08) !important;
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: rgba(var(--bs-info-rgb), 0.08) !important;
    color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ============================================================
   2. MODAL — X simple de text dins el modal, hover vermell, SENSE moviment
   ============================================================ */

.modal-header .btn-close {
    /* SVG/fons OFF */
    background: none;
    background-image: none;
    --bs-btn-close-bg: none;
    /* Caixa neutra, dins el modal (sense marges negatius de Bootstrap) */
    border: 0;
    outline: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0 auto;
    width: 2rem;
    height: 2rem;
    opacity: 1;
    cursor: pointer;
    /* Color X */
    color: #6c757d;
    /* X centrada amb line-height = height del botó */
    font-size: 1.75rem;
    line-height: 2rem;
    text-align: center;
    /* Anti-moviment: si Sneat/Bootstrap intenten transform al hover, NO */
    transform: none;
    transition: color 0.15s ease;
}

.modal-header .btn-close::before {
    content: "\00d7"; /* × */
    display: inline;
    line-height: inherit;
    color: inherit;
    background: none;     /* Sneat aplica background-color al ::before — KILL */
    background-color: transparent;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus,
.modal-header .btn-close:active {
    color: #dc3545;
    background: none;
    box-shadow: none;
    outline: 0;
    transform: none;       /* MAI moure */
    opacity: 1;
}

/* ============================================================
   2b. FORM CONTROLS — fons blanc (Sneat per defecte els fa transparent
       i amb el card de filtres tret es confonen amb el fons gris)
   ============================================================ */

.form-control,
.form-select {
    background-color: var(--bs-paper-bg);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--bs-paper-bg);
}

/* ============================================================
   3. MENU — active subtil (SENSE border-left, mai)
   ============================================================ */

.menu-inner .menu-item.active > .menu-link {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
    color: var(--bs-primary) !important;
    font-weight: 600 !important;
}

.menu-inner .menu-item.active > .menu-link i {
    color: var(--bs-primary) !important;
}

.menu-inner .menu-item.active > .menu-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
}

/* Submenu obert (parent amb fill actiu): fons MUY sutil per indicar context */
.menu-inner .menu-item.open > .menu-link {
    background-color: rgba(var(--bs-primary-rgb), 0.04) !important;
    color: var(--bs-primary) !important;
    font-weight: 500 !important;
}

/* ============================================================
   4. NO HOVER DISPLACEMENT — sense transforms
   ============================================================ */

.card, .table tr, .list-group-item {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.card:hover,
.table tbody tr:hover {
    transform: none !important;
}

/* ============================================================
   5. BOTONS DINS TAULES — amb border visible
   ============================================================ */

.table .btn-outline-secondary,
.table .btn-outline-primary,
.table .btn-outline-danger,
.table .btn-outline-success,
.table .btn-outline-warning,
.table .btn-outline-info {
    padding: 0.375rem 0.625rem;
    line-height: 1;
}

.table .btn-outline-secondary i,
.table .btn-outline-primary i,
.table .btn-outline-danger i,
.table .btn-outline-success i {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* ============================================================
   6. BTN-GROUP active state (date presets) — filled per indicar selección
   ============================================================ */

.btn-group .btn-outline-primary.active,
.btn-group .btn-outline-secondary.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}

.btn-group .btn-outline-primary.active:hover,
.btn-group .btn-outline-secondary.active:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
    filter: brightness(0.95);
}

/* ============================================================
   7. FILTER BAR — input-group dates compactos
   ============================================================ */

.app-date-range {
    width: auto;
    flex-wrap: nowrap;
}
.app-date-range .form-control {
    min-width: 130px;
}

/* ============================================================
   8. MENU — eliminar TOTS els pseudo-elements decoratius
   ============================================================ */

/* Mata NOMÉS els pseudo-elements decoratius de TOP-LEVEL (la franja vertical
   i punts dels items de primer nivell). NO toquem els punts del submenu
   (.menu-sub), que són l'indicador d'arbre estil Kumbai. */
.menu-inner > .menu-item::before,
.menu-inner > .menu-item::after,
.menu-inner > .menu-item > .menu-link::before,
.menu-inner > .menu-item > .menu-link::after,
.menu-inner > .menu-item.active::before,
.menu-inner > .menu-item.active::after,
.menu-inner > .menu-item.active > .menu-link::before,
.menu-inner > .menu-item.active > .menu-link::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   8b. SUBMENU TREE (estil Kumbai): punts indicadors + item actiu filled
   ============================================================ */

/* Amagar el rail del PerfectScrollbar (la línia vertical que apareix en
   hover a la dreta del menu). Els menus són curts; estil net sense
   scrollbar visible. El scroll segueix funcionant amb roda/touch. */
#layout-menu .ps__rail-y,
#layout-menu .ps__rail-x,
#layout-menu .ps__thumb-y,
#layout-menu .ps__thumb-x {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

/* Fletxa del parent desplegable (menu-toggle): dreta quan tancat,
   avall quan obert — estil Kumbai. (El killer top-level l havia eliminat.) */
.menu-inner .menu-item > .menu-link.menu-toggle::after {
    display: block !important;
    content: "" !important;
    position: absolute;
    /* !important obligatori: el killer top-level posa border:none !important */
    border: 2px solid !important;
    border-block-end: 0 !important;
    border-inline-start: 0 !important;
    block-size: 0.45em;
    inline-size: 0.45em;
    inset-block-start: 49%;
    inset-inline-end: 1.25rem;
    transform: translateY(-50%) rotate(45deg); /* tancat → apunta dreta */
    transition: transform 0.3s ease;
    background: transparent !important;
}
.menu-inner .menu-item.open > .menu-link.menu-toggle::after {
    transform: translateY(-50%) rotate(135deg); /* obert → apunta avall */
}

/* Punt indicador de cada item del submenu (restaurem el de Sneat) */
.menu-inner .menu-sub > .menu-item > .menu-link::before {
    display: inline-block !important;
    content: "" !important;
    position: absolute;
    border-radius: 50%;
    background-color: var(--bs-gray-400) !important;
    block-size: 0.375rem;
    inline-size: 0.375rem;
    inset-inline-start: 1.4375rem;
}

/* Item ACTIU que és una FULLA (pàgina actual, sense submenu obert):
   filled sòlid LILA (primary) + text blanc — estil Kumbai.
   El lila és el color comú del sistema; NO canvia per rol. */
.menu-inner .menu-item.active:not(.open) > .menu-link {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.3);
}
.menu-inner .menu-item.active:not(.open) > .menu-link i,
.menu-inner .menu-item.active:not(.open) > .menu-link::before {
    color: #fff !important;
    background-color: #fff !important; /* el punt del submenu actiu, blanc */
}
.menu-inner .menu-item.active:not(.open) > .menu-link:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    filter: brightness(0.96);
}

/* ============================================================
   8c. ACCENT PER PANELL (rol/context) + etiqueta fixa + hero sticky
   ============================================================ */

/* Accent de color segons el panell on ets (classe a .layout-wrapper).
   NOMÉS s'aplica al badge/etiqueta sota el logo. El menu es queda lila
   (color comú del sistema). */
.app-panel-admin   { --app-accent: var(--bs-danger);  --app-accent-rgb: var(--bs-danger-rgb); }
.app-panel-owner   { --app-accent: #c78f1e; --app-accent-rgb: var(--bs-warning-rgb); }
.app-panel-manager { --app-accent: #55a32b; --app-accent-rgb: var(--bs-success-rgb); }

/* Etiqueta fixa de panell sota el logo (SENSE border-left, regla 6) */
.app-panel-label {
    padding: 0.5rem 0.75rem;
    margin: 0 1rem 0.25rem;
    background-color: rgba(var(--app-accent-rgb, var(--bs-primary-rgb)), 0.1);
    border-radius: 0.375rem;
}
.app-panel-label-kicker {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--app-accent, var(--bs-primary));
    font-weight: 600;
    line-height: 1.3;
}
.app-panel-label-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-heading-color, #384551);
    line-height: 1.2;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hero contextual sticky (es queda a dalt en fer scroll) */
.app-context-hero {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
}

/* ============================================================
   9. AVATAR/LOGO IMG circular forçat (sobreescriu Sneat block-size)
   ============================================================ */



/* IMG dentro de avatares: clip explícit + fondo per a transparents */
img.rounded-circle {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
}
img.rounded:not(.rounded-circle) {
    border-radius: 0.375rem !important;
}

/* ============================================================
   N. HELP BUBBLE — botó flotant "?" abaix-dreta + offcanvas
   ============================================================ */

.app-help-bubble {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bs-paper-bg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #6c757d;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1040;
    transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-help-bubble:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.app-help-bubble i {
    font-size: 1.5rem;
    line-height: 1;
}
.app-help-bubble:focus {
    outline: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.app-help-panel {
    width: 22rem !important;
}
.app-help-panel .offcanvas-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Sidebar: el .menu-footer (logout) queda enganxat a baix gràcies a
   mt-auto. Sneat ja té .layout-menu flex column i .menu-inner amb
   flex-grow, així que NO redefinim aquí (si ho fem, trenquem
   PerfectScrollbar i el menu real es col·lapsa a 0 altura). */
#layout-menu .menu-footer {
    flex: 0 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Widget d'usuari al peu del sidebar (estil Kumbai) */
#layout-menu .app-user-widget {
    background: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    color: var(--bs-menu-color, #566a7f);
}
#layout-menu .app-user-widget:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}
#layout-menu .app-user-widget:focus {
    outline: none;
    box-shadow: none;
}
/* El menú desplegable cap amunt — evitar que el clip del aside l'amagui */
#layout-menu .app-user-menu {
    z-index: 1090;
    min-width: 100%;
}
/* La fletxa chevron gira quan el dropdown està obert */
#layout-menu .app-user-widget[aria-expanded="true"] .bx-chevron-up {
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}

/* ============================================================
   Badges bg-label-* : más contraste de texto.
   El groc (warning) y el verd (success) tenían el texto demasiado
   claro sobre su fondo tenue. Se oscurece SOLO en .badge (no afecta
   a los avatares que usan bg-label-* como fondo). El lila (primary)
   ya se ve bien y no se toca.
   ============================================================ */
/* Qualsevol badge groc/ambar amb text llegible en tema clar.
   Sneat usa color: var(--bs-warning) (#ffab00) que sobre fons groc subtil
   te poca llegibilitat. Override a #8a5a00 (brown-amber) per a tema clar. */
:root:not([data-bs-theme="dark"]) .badge.bg-label-warning,
[data-bs-theme="light"] .badge.bg-label-warning,
:root:not([data-bs-theme="dark"]) .badge.bg-warning,
[data-bs-theme="light"] .badge.bg-warning,
:root:not([data-bs-theme="dark"]) .badge.bg-warning-subtle,
[data-bs-theme="light"] .badge.bg-warning-subtle,
:root:not([data-bs-theme="dark"]) .alert-warning,
[data-bs-theme="light"] .alert-warning {
    color: #8a5a00 !important;
}
.badge.bg-label-success {
    color: #55a32b !important;
}
.badge.bg-label-secondary {
    color: #4c5158 !important;
}

/* Panell de la campana d'alertes al hero contextual */
.app-alert-menu {
    min-width: 18rem;
}

/* Botó dins del form d'alerta (campana): neutre, sense estils de .btn,
   text alineat a l'esquerra. */
.app-alert-link {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.app-alert-link:hover .fw-medium {
    color: var(--bs-primary);
}

/* Campana d'alertes: botó circular tipus icona (no sembla un botó normal) */
.app-alert-bell {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color, #d9dee3);
    color: var(--bs-body-color, #566a7f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.app-alert-bell:hover,
.app-alert-bell:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

/* ============================================================
   8. CANVI DE TEMA — selector clar / auto / fosc
   Viu al dropdown d usuari del peu del sidebar (al costat del logout).
   Botons outline + actiu lila subtil (regla UI 1).
   ============================================================ */
/* Control segmentado: borde en el contenedor + separador (border-right) por
   botón. Sin solapamiento de btn-group, así el hover no afecta al borde del
   botón vecino. */
.app-theme-switch {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}
.app-theme-switch .btn {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.25rem;
    font-size: 0.7rem;
    line-height: 1.1;
    color: var(--bs-body-color);
    background-color: transparent;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--bs-border-color) !important;
    border-radius: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    transform: none !important;
    box-shadow: none !important;
}
.app-theme-switch .btn:last-child {
    border-right: 0 !important;
}
.app-theme-switch .btn i {
    font-size: 1.05rem;
}
/* Hover: SOLO color/fondo, sin desplazamiento ni cambio de bordes. */
.app-theme-switch .btn:hover,
.app-theme-switch .btn:focus,
.app-theme-switch .btn:active {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    transform: none !important;
    box-shadow: none !important;
}
.app-theme-switch .btn.active {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
}

/* ============================================================
   9. TEMA FOSC — tons neutres tipus Google dark
   Sneat referencia tot via variables CSS; redefinint-les aqui
   (overrides.css carrega l ultim -> guanya la cascada) la majoria
   de components segueixen sols. Bootstrap 5.3 ja aporta els
   contextuals (*-bg-subtle, *-text-emphasis) per a badges/alerts.
   El lila (--bs-primary #696cff) es mante com a color de contrast.
   ============================================================ */
[data-bs-theme="dark"] {
    /* Superficies */
    --bs-body-bg: #1b1c1e;        /* llenc base */
    --bs-body-bg-rgb: 27, 28, 30;
    --bs-paper-bg: #26282b;       /* superficie elevada: cards, navbar, dropdown, modal, menu */
    --bs-paper-bg-rgb: 38, 40, 43;

    /* Text */
    --bs-body-color: #c7cacf;
    --bs-heading-color: #e8eaed;
    --bs-secondary-color: #9aa0a6;   /* text-muted */
    --bs-base-color: #e3e3e6;        /* base del color-mix -> vores/inputs subtils clars sobre fosc */

    /* Vores */
    --bs-border-color: #3a3c40;

    /* Menu lateral: el fons (menu-bg=paper-bg) ja segueix; forcem els colors de text estatics */
    --bs-menu-color: #c7cacf;
    --bs-menu-hover-color: #e8eaed;
    /* --bs-menu-active-color ja es var(--bs-primary) -> lila */
}

/* Vora del peu de menu hardcoded en negre: invisible en fosc */
[data-bs-theme="dark"] #layout-menu .menu-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Ombres mes marcades perque les superficies destaquin sobre el llenc fosc */
[data-bs-theme="dark"] .app-user-menu,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .card {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   Tema fosc: detalls amb colors pensats originalment per light
   ------------------------------------------------------------ */

/* Badges bg-label-*: l override de light forca text fosc (il.legible en fosc).
   En fosc fem servir el text-emphasis clar de Bootstrap. */
[data-bs-theme="dark"] .badge.bg-label-warning {
    color: var(--bs-warning-text-emphasis) !important;
}
[data-bs-theme="dark"] .badge.bg-label-success {
    color: var(--bs-success-text-emphasis) !important;
}
[data-bs-theme="dark"] .badge.bg-label-secondary {
    color: var(--bs-secondary-text-emphasis) !important;
}

/* Modal close X: gris massa fosc sobre fons fosc */
[data-bs-theme="dark"] .modal-header .btn-close {
    color: var(--bs-secondary-color);
}

/* Help bubble (?): vora negra invisible + icona massa fosca */
[data-bs-theme="dark"] .app-help-bubble {
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* Vores hardcoded en negre que s esvaeixen sobre fons fosc */
[data-bs-theme="dark"] .app-help-panel .offcanvas-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------
   Tema fosc: taules de llistat
   - Linia separadora mes subtil (la vora general #3a3c40 es massa clara)
   - Zebra striping cada 2 files (els llistats no usen .table-striped)
   - El hover guanya per especificitat (.table.table-hover ... :hover)
   ------------------------------------------------------------ */
[data-bs-theme="dark"] .table {
    --bs-border-color: rgba(255, 255, 255, 0.06);
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] .table > tbody > tr:nth-of-type(2n) > * {
    background-color: rgba(255, 255, 255, 0.03);
}
[data-bs-theme="dark"] .table.table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.065);
}

/* ------------------------------------------------------------
   Tema fosc: utilitats de fons clar de Bootstrap (no son theme-aware)
   .bg-white (hero contextual) i .bg-light (caixes/inputs) -> superficie fosca.
   En light paper-bg ja es #fff, aixi que no canvia res.
   ------------------------------------------------------------ */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-paper-bg) !important;
}

/* ------------------------------------------------------------
   Tema fosc: hover dels items de menu NO actius.
   Sneat usa --bs-menu-hover-bg: #f2f3f3 (quasi blanc) -> amb text clar
   el text es perd. El passem a un subtil sobre fosc.
   ------------------------------------------------------------ */
[data-bs-theme="dark"] {
    --bs-menu-hover-bg: rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------------
   Tema fosc: accent de panell (kicker de l etiqueta).
   En light usa colors foscos (#55a32b verd, #c78f1e or...) que en fosc
   desentonen amb els badges. Unifiquem amb el *-text-emphasis de Bootstrap
   (el mateix to clar que ja usen els badges bg-label-* en fosc).
   Nomes afecta el color de text del kicker; el fons usa --app-accent-rgb.
   ------------------------------------------------------------ */
[data-bs-theme="dark"] .app-panel-admin   { --app-accent: var(--bs-danger-text-emphasis); }
[data-bs-theme="dark"] .app-panel-owner   { --app-accent: var(--bs-warning-text-emphasis); }
[data-bs-theme="dark"] .app-panel-manager { --app-accent: var(--bs-success-text-emphasis); }

/* ============================================================
   10. APP STAFF — app mòbil (bottom-nav + tabs Bootstrap)
   Mobile-first, columna centrada. Superfícies via --bs-paper-bg
   i vores via --bs-border-color → segueixen el tema sols.
   Variants dark explícites al final del bloc.
   ============================================================ */
.app-staff {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
}

/* Fade per sobre del bottom-nav: capa fixa centrada a l'amplada del staff
   (480px), z-index 1029 = per darrere del nav (1030) però per davant del
   contingut. La part superior (3.5rem) és gradient transparent → body-bg;
   la resta cobreix la zona del nav perquè el contingut quedi tallat suau
   fora del menu, sense que es vegi cap "capa" amb cantons rodons. */
.app-staff::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    max-width: 100%;
    height: 19.5rem;
    background: linear-gradient(to bottom,
        rgba(var(--bs-body-bg-rgb), 0) 0,
        var(--bs-body-bg) 3.5rem);
    z-index: 1029;
    pointer-events: none;
}

/* Cos amb espai inferior pel bottom-nav (panell alt estil OLD).
   Sense padding lateral: el contingut va a tota l'amplada (com el bottom-nav). */
.app-staff-body {
    padding: 0.125rem 1.5rem 21rem;
}
/* Variant del panell staff sense bottom-nav (ex: wizard de formacio):
   treu el gradient inferior i el padding-bottom reservat per al menu. */
.app-staff--no-nav::before { display: none; }
.app-staff--no-nav .app-staff-body { padding-bottom: 2rem; }


/* El .tab-content del template Sneat porta padding 1.5rem; dins del panell
   staff li treiem el lateral perquè el contingut arribi a la vora. */
.app-staff .tab-content {
    padding-left: 0;
    padding-right: 0;
}

/* Caixes d'estadística (Inici) */
.app-staff-stat {
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    height: 100%;
}
.app-staff-stat-val {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}
.app-staff-stat-lbl {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    line-height: 1.1;
    word-spacing: -0.5px;
}
/* Mòbil estret: shrink label perque CUMPLIDAS no quedi tallada */
@media (max-width: 420px) {
    .app-staff-stat-lbl {
        font-size: 0.62rem;
        letter-spacing: 0;
    }
    .app-staff-stat {
        padding: 0.5rem 0.25rem;
    }
}

/* Historial de moviments (Saldo) */
.app-staff-ledger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.app-staff-ledger-item:last-child { border-bottom: 0; }

/* Barra de progrés de misiones (fina) amb track visible (per veure el % faltant) */
.app-staff-progress {
    height: 6px;
    background-color: rgba(0, 0, 0, 0.08);
}
[data-bs-theme="dark"] .app-staff-progress {
    background-color: rgba(255, 255, 255, 0.10);
}

/* Estat "próximamente" (scaffolds sense backend) */
.app-staff-soon-icon {
    font-size: 2.75rem;
    color: var(--bs-primary);
    opacity: 0.55;
}

/* Botons d'icona del hero (tema, tancar sessió): cercle tipus campana d'alertes
   (.app-alert-bell). Fons paper + border, hover NOMÉS color/fons/border (sense
   transform → no es desplaça, regla UI 5). */
.app-staff-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.app-staff-icon-btn:hover,
.app-staff-icon-btn:focus,
.app-staff-icon-btn.show {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}
.app-staff-icon-btn--danger { color: var(--bs-danger); }
.app-staff-icon-btn--danger:hover,
.app-staff-icon-btn--danger:focus {
    background-color: rgba(var(--bs-danger-rgb), 0.08);
    color: var(--bs-danger);
    border-color: rgba(var(--bs-danger-rgb), 0.4);
}

/* Bottom-nav fixa (estil OLD): panell amb barra usuari + grid + Donaciones.
   Centrada dins la columna de 480px. */
.app-staff-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 480px;
    border-radius: 1rem 1rem 0 0;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 1030;
    /* Mateix shadow que .card (Bootstrap/Sneat default) però invertit cap amunt. */
    box-shadow: 0 -0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
}

/* Barra d'usuari: nom (esquerra) + saldo en daurat (dreta) */
.app-staff-nav-userbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.app-staff-nav-user {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-weight: 700;
    font-size: 0.875rem;
}
.app-staff-nav-tokens {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--bs-warning);
}
.app-staff-nav-tokens .bx { font-size: 1.1rem; align-self: center; }
.app-staff-nav-tokens small { font-size: 0.65rem; font-weight: 600; opacity: 0.7; }

/* Grid de seccions: 3 columnes, items en format targeta */
.app-staff-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
    padding: 0.375rem;
}
.app-staff-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 58px;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.app-staff-nav-item .bx { font-size: 1.4rem; }
@media (hover: hover) {
    .app-staff-nav-item:hover {
        border-color: rgba(var(--bs-primary-rgb), 0.4);
        color: var(--bs-primary);
    }
}
/* Tap feedback (touch real): mateix to que active pero sense quedar fix */
.app-staff-nav-item:active {
    background-color: rgba(var(--bs-primary-rgb), 0.16);
}
/* Actiu: fons subtil + bold + color/border primary. SENSE border-left, SENSE transform (regles 5 i 6). */
.app-staff-nav-item.active {
    color: var(--bs-primary);
    font-weight: 700;
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-color: var(--bs-primary);
}

/* Botó Donaciones: ample i destacat (to càlid, com el coral d'OLD) */
.app-staff-nav-donate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 0.75rem);
    margin: 0 0.375rem 0.5rem;
    padding: 0.7rem;
    border: 1px solid rgba(var(--bs-danger-rgb), 0.4);
    border-radius: 0.5rem;
    background-color: rgba(var(--bs-danger-rgb), 0.08);
    color: var(--bs-danger);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.app-staff-nav-donate .bx { font-size: 1.2rem; }
@media (hover: hover) {
    .app-staff-nav-donate:hover {
        background-color: rgba(var(--bs-danger-rgb), 0.16);
        border-color: var(--bs-danger);
    }
}
.app-staff-nav-donate.active,
.app-staff-nav-donate:active {
    background-color: rgba(var(--bs-danger-rgb), 0.16);
    border-color: var(--bs-danger);
}

/* Variant dark: les superfícies segueixen via --bs-paper-bg; reforcem l'ombra del nav. */
[data-bs-theme="dark"] .app-staff-nav {
    box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   Nav-pills: separacio entre pestanyes (per defecte Bootstrap les
   deixa enganxades). Aplica a login, misiones i qualsevol nav-pills.
   Les utilitats gap-* de Bootstrap (!important) el poden sobreescriure
   puntualment si cal.
   ------------------------------------------------------------ */
.nav-pills {
    gap: 0.5rem;
}

/* Badge lila (bg-label-primary) en fosc: text mes clar i llegible */
[data-bs-theme="dark"] .badge.bg-label-primary {
    color: #c084ff !important;
}

/* Botó d'icona quadrat a l'alçada exacta d'un input sm (.form-control-sm =
   1.5em + padding-y 0.5rem + 2px border). Ús: botó treure condició a misiones. */
.app-btn-icon-sm {
    width: calc(1.5em + 0.5rem + 2px);
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Botó lupa (submit) dels filtres de data: mateixa alçada exacta que els
   inputs date (.form-control-sm = 1.5em + padding-y 0.5rem + 2px border). */
.app-date-submit {
    height: calc(1.5em + 0.5rem + 2px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Selector de tema en fosc: el border dels botons inactius es massa fluix
   i no es veu la separacio lateral. El fem visible. :not(.active) perque
   l actiu conservi el seu border lila. */
[data-bs-theme="dark"] .app-theme-switch .btn:not(.active) {
    border-color: rgba(255, 255, 255, 0.14);
}

/* Card "temporal" (provisional fins a integració TPV): fons i vora vermellosos suaus. */
.app-card-temporal {
    background-color: rgba(var(--bs-danger-rgb), 0.06);
    border: 1px solid rgba(var(--bs-danger-rgb), 0.30);
}

/* Full-bleed dins del cos del staff: cards i caixes a tota l'amplada de la
   columna (480px, igual que el bottom-nav). Ara el body ja no té padding
   lateral, així que no cal marge negatiu; el deixem a 0 (i evita l'overflow
   del gutter de .row als stats). */
/* Misió "near" — a punt de cumplir-se (>= 80%): border ambar pulsant
   + badge "🔥 Al X%". Inspirat al disseny OLD per gamificar lultim esforç. */
.app-near {
    border: 2px solid rgba(243, 156, 18, 0.65) !important;
    animation: app-near-pulse 2s ease-in-out infinite;
}
@keyframes app-near-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.18); }
}
.app-near-tag {
    background-color: rgba(243, 156, 18, 0.12);
    border: 1px solid rgba(243, 156, 18, 0.35);
    color: #b67800;
    font-weight: 700;
    letter-spacing: 0.5px;
}
[data-bs-theme="dark"] .app-near-tag {
    color: rgb(243, 200, 100);
}

/* Variant block: full-width sota la fila de badges */
.app-near-tag-block {
    display: block;
    text-align: center;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
}

.app-staff-bleed {
    margin-left: 0;
    margin-right: 0;
}

/* Comptador de la campana d'alertes: bombolla compacta. */
.app-alert-count {
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.3em 0.5em;
    min-width: 1.2rem;
    margin-top: 4px;
    margin-left: -4px;
}

/* Cabeceras de sección dentro de formularios (ficha de restaurante, etc.):
   destacadas en color primario + negrita. */
.app-form-section {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bs-primary);
}
.app-form-section i {
    font-size: 1.2rem;
}

/* Campana: centrar el glifo BoxIcons 100% dins del cercle (el <i> inline
   deixa un petit offset; block + line-height:1 el centra exacte amb el flex). */
.app-alert-bell i {
    display: block;
    line-height: 1;
}

/* ============================================================
   Filtros de listados: inputs PROPORCIONALES, nunca a todo el ancho.
   Aplicar la clase .app-filters a la <form class="row ... app-filters">
   de las páginas de listado (misiones, staff, biblioteca, usuarios…).
   En >=md las columnas dejan de estirarse (Bootstrap .col = flex-grow:1)
   y los controles toman un ancho fijo y legible. En móvil se mantiene
   el comportamiento Bootstrap (col-6/col-12 apiladas).
   ============================================================ */
@media (min-width: 768px) {
    .app-filters > [class*="col"] {
        flex: 0 0 auto;
        width: auto;
    }
    .app-filters .form-select,
    .app-filters .form-control {
        width: auto;
        min-width: 8rem;
    }
    .app-filters input[type="text"].form-control,
    .app-filters input[type="search"].form-control,
    .app-filters input:not([type]).form-control {
        width: 15rem;
        max-width: 100%;
    }
}


/* Popup del motiu de rebuig (canjes) — toggle manual, no Bootstrap popover */
.app-motive-popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1050;
    min-width: 220px;
    max-width: 280px;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
    line-height: 1.35;
}


/* ============================================================
   Premios adicionales del creador de misiones (toggle cards)
   ============================================================ */
.app-prize-card {
    position: relative;
    background-color: var(--bs-paper-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.05s ease;
    height: 100%;
    user-select: none;
}
.app-prize-card:hover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}
.app-prize-card.active {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.10);
}
.app-prize-card .app-prize-check {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
}
.app-prize-card.active .app-prize-check { display: inline-flex; }
.app-prize-icon {
    font-size: 1.75rem;
    line-height: 1.2;
}
.app-prize-name {
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.app-prize-desc {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6b7280);
    line-height: 1.25;
    margin-top: 0.15rem;
}


/* Frame del bloc Recompensa + Premios al creador de misions: border
   ambar (en consistencia amb tokens = warning) per separar visualment
   la unitat de recompenses de la resta de camps del form. */
.app-rewards-block {
    border: 2px solid rgba(var(--bs-warning-rgb), 0.45);
    border-radius: 0.5rem;
    background-color: rgba(var(--bs-warning-rgb), 0.025);
}

/* Marge sota el panell extra del premi (badge select / textarea) per
   reduir l overlap visual quan s obre el dropdown natiu del navegador. */
.prize-extra { margin-bottom: 0.5rem; }

/* Manager > Misiones index: badges Recompensa amb mateixa amplada
   per alinear-se verticalment entre files, independentment dels digits. */
.app-mission-reward {
    min-width: 3.75rem;
    text-align: center;
    justify-content: center;
}

/* Staff dashboard: badges destacats amb border al color del propi badge
   (currentColor pren el color del text que ja imposa bg-label-*). */
.badge.app-bordered {
    border: 1.5px solid currentColor !important;
    font-weight: 500;
}

/* Wrapper amb fade lateral indicador de scroll horitzontal.
   Estructura: .app-fade-scroll (relative) > .app-fade-scroll-inner (overflow-x: auto)
   Les fades es marquen via JS: is-at-start amaga el fade esquerre, is-at-end l esquerre. */
.app-fade-scroll {
    position: relative;
}
.app-fade-scroll::before,
.app-fade-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s ease;
}
.app-fade-scroll::before {
    left: 0;
    background: linear-gradient(to right, var(--bs-body-bg) 20%, rgba(0,0,0,0) 100%);
}
.app-fade-scroll::after {
    right: 0;
    background: linear-gradient(to left, var(--bs-body-bg) 20%, rgba(0,0,0,0) 100%);
}
.app-fade-scroll.is-at-start::before { opacity: 0; }
.app-fade-scroll.is-at-end::after { opacity: 0; }
.app-fade-scroll-inner { scrollbar-width: none; }
.app-fade-scroll-inner::-webkit-scrollbar { display: none; }


/* Mobil: feedback de tap mes immediat (sense 300ms delay iOS antic ni
   highlight gris) i evita seleccio accidental dels botons del bottom-nav. */
.app-staff-nav-item,
.app-staff-nav-donate,
.app-staff-icon-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

/* Mobile: assegura que el click event llisca a l element button i no a un fill
   (icona/text), perque Android Chrome es vegui sempre el currentTarget correcte. */
.app-staff-nav-item > *,
.app-staff-nav-donate > * {
    pointer-events: none;
}

/* Mobile: assegura que el click event arribi a l element button i no a un fill
   (icona/text), perque Android Chrome rebi sempre el target correcte. */
.app-staff-nav-item > *,
.app-staff-nav-donate > * {
    pointer-events: none;
}

/* Staff > Misiones: filtre adaptable. Cada boto creix per omplir l espai
   i, si no caben tots en una linia, fan wrap a la seguent. Evita scroll horitzontal. */
.app-mission-filter .btn {
    flex: 1 1 auto;
    min-width: 5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.78rem;
}
.app-mission-filter .btn-outline-primary.active,
.app-mission-filter .btn-outline-primary.active:hover,
.app-mission-filter .btn-outline-primary.active:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Bottom-nav collapsible: per defecte amagat (nomes userbar visible).
   En expandir, mostra grid + boto Donaciones. Fletxa rota 180deg quan expandit. */
.app-staff-nav-toggle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1.1rem;
    width: 3.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    background-color: var(--bs-paper-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    box-shadow: 0 -0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
    /* Talla l ombra al limit inferior perque no es vegi una linia entre el bulto i la barra */
    clip-path: inset(-100% -100% 0 -100%);
    color: var(--bs-secondary-color);
    font-size: 1.3rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.app-staff-nav-toggle > * { pointer-events: none; }
.app-staff-nav-toggle:hover { color: var(--bs-primary); }
.app-staff-nav-toggle .bx { transition: transform 0.2s ease; }

/* Estat collapsed (per defecte): amaga collapsible, fletxa amunt */
.app-staff.is-nav-collapsed .app-staff-nav-collapsible { display: none; }
.app-staff.is-nav-collapsed .app-staff-nav-userbar { border-bottom: 0; }

/* Estat expanded: fletxa avall (rotacio 180deg) */
.app-staff:not(.is-nav-collapsed) .app-staff-nav-toggle .bx { transform: rotate(180deg); }

/* Padding-bottom del body i altura del fade: depenen de l estat */
.app-staff.is-nav-collapsed .app-staff-body { padding-bottom: 7.5rem; }
.app-staff.is-nav-collapsed::before { height: 6rem; }

/* Userbar collapsed: cursor pointer NOMES al bulto (toggle), no a tota la barra. */
.app-staff.is-nav-collapsed .app-staff-nav-toggle {
    cursor: pointer;
}
.app-staff.is-nav-collapsed .app-staff-nav-userbar {
    cursor: default;
}

/* En tema fosc, ombra del toggle mes marcada per coherencia amb el nav */
[data-bs-theme="dark"] .app-staff-nav-toggle {
    box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Staff > Formacio (quiz): estil OLD pick amb lletra prefix
   ============================================================ */
.app-quiz-pick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: var(--bs-paper-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    user-select: none;
}
.app-quiz-pick:hover:not(.locked) {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}
.app-quiz-letter {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
    border-radius: 0.35rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.app-quiz-text { flex-grow: 1; font-weight: 500; }
.app-quiz-pick.locked { cursor: default; }
/* Selected before lock (multi) */
.app-quiz-pick.is-picked {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}
.app-quiz-pick.is-picked .app-quiz-letter {
    background-color: var(--bs-primary);
    color: #fff;
}
/* Correct/incorrect feedback */
.app-quiz-pick.is-correct {
    border-color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.12);
    color: var(--bs-success);
}
.app-quiz-pick.is-correct .app-quiz-letter {
    background-color: var(--bs-success);
    color: #fff;
}
.app-quiz-pick.is-incorrect {
    border-color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}
.app-quiz-pick.is-incorrect .app-quiz-letter {
    background-color: var(--bs-danger);
    color: #fff;
}
/* Quan l usuari ha equivocat, marquem la correcta amb outline verd */
.app-quiz-pick.is-show-correct {
    border-color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.04);
}
.app-quiz-pick.is-show-correct .app-quiz-letter {
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), 0.15);
}

/* Boto d accio icona-only quadrat utilitzable a llistats compactes */
.app-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Banner ROI del Dashboard Manager: degradat sutil i acent visual */
.app-roi-banner {
    background: linear-gradient(135deg, rgba(105,108,255,0.04) 0%, rgba(255,171,0,0.04) 100%);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.15);
}
[data-bs-theme="dark"] .app-roi-banner {
    background: linear-gradient(135deg, rgba(105,108,255,0.12) 0%, rgba(255,171,0,0.10) 100%);
    border-color: rgba(var(--bs-primary-rgb), 0.30);
}

/* Menú usuari del sidebar quan està OBERT: destacar-lo del fons del menu
   amb fons paper-bg + border + shadow més marcat per evitar confusió visual. */
#layout-menu .app-user-menu.show {
    background-color: var(--bs-paper-bg) !important;
    border: 1px solid var(--bs-primary) !important;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18) !important;
    border-radius: 0.5rem;
}
[data-bs-theme="dark"] #layout-menu .app-user-menu.show {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55) !important;
    border-color: var(--bs-primary) !important;
}
/* Mentre està obert, ressaltem subtilment també el widget de baix */
#layout-menu .app-user-widget[aria-expanded="true"] {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-radius: 0.375rem;
}

/* Equipo Live: cards filtre clicables */
.app-live-filter { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; border: 2px solid transparent; }
.app-live-filter:hover { border-color: rgba(var(--bs-primary-rgb), 0.4); }
.app-live-filter.active {
    border-color: var(--bs-primary) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18), 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.12) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}
.app-live-filter.active .display-6 { font-weight: 700; }

/* Badge de tokens amb amplada uniforme per llistats compactes.
   Sajusta a un mínim que serveix per a la majoria de valors (3-4 dígits).
   Si cal valors molt grans, augmentar el min-width. */
.badge.app-token-badge {
    min-width: 4rem;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
}

/* Hero contextual: una mica mes ample que el contingut perque destaqui
   (bleed lateral de 1rem a banda i banda). */
.app-context-hero {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}
@media (min-width: 992px) {
    .app-context-hero {
        margin-left: -2.5rem;
        margin-right: -2.5rem;
    }
}


/* Hero contextual: efecte blur visible al fer scroll (sticky + backdrop-filter).
   Fons mes transparent + blur mes fort perque sintueixi clarament el contingut. */
.app-context-hero {
    background-color: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
[data-bs-theme="dark"] .app-context-hero {
    background-color: rgba(40, 47, 60, 0.45) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* === UPLIFT: animació pulse pel badge ONLINE (Equipo Live) === */
@keyframes pulse {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.4; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

/* Badge de rol unificat (admin/owner/manager/staff). Amplada fixa per coherencia
   visual a llistats, perfils i headers. S aplica via _partials/role-badge. */
.app-role-badge {
    min-width: 110px;
    text-align: center;
    display: inline-block;
}