/* Final tablet/mobile navigation conflict guard.
   Loaded after mobile.css, so dock mode always wins over legacy side/offcanvas menus. */
@media (max-width: 1199.98px) {
    body > .sidebar,
    .sidebar,
    aside.sidebar,
    nav.sidebar,
    .dashboard-sidebar,
    .left-menu,
    .side-menu,
    .sidebar-wrapper,
    .sidebar-container,
    .main-wrapper > .sidebar,
    .page-wrapper > .sidebar,
    #offcanvasExample,
    #offcanvasExample.show,
    .mobile-menu,
    .mobile-menu.show,
    .offcanvas.mobile-menu,
    .offcanvas.mobile-menu.show,
    body.iv-bottom-nav-ready #offcanvasExample,
    body.iv-bottom-nav-ready #offcanvasExample.show,
    body.iv-bottom-nav-ready .mobile-menu,
    body.iv-bottom-nav-ready .mobile-menu.show,
    body.iv-bottom-nav-ready .offcanvas.mobile-menu,
    body.iv-bottom-nav-ready .offcanvas.mobile-menu.show {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateX(-120%) !important;
        pointer-events: none !important;
    }

    .dash-header,
    .main-content,
    .copyright-wrp,
    .page-wrapper,
    .main-wrapper,
    body.iv-bottom-nav-ready .dash-header,
    body.iv-bottom-nav-ready .main-content,
    body.iv-bottom-nav-ready .copyright-wrp,
    body.iv-bottom-nav-ready .page-wrapper,
    body.iv-bottom-nav-ready .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .offcanvas-backdrop,
    .offcanvas-backdrop.show,
    body.iv-bottom-nav-ready .offcanvas-backdrop,
    body.iv-bottom-nav-ready .offcanvas-backdrop.show {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Final mobile/tablet touch scale contract for header + dock consistency. */
@media (max-width: 1199.98px) {
    :root {
        --iv-touch-size: 52px;
        --iv-touch-icon: 28px;
        --iv-touch-radius: 18px;
        --iv-touch-font: 12px;
        --iv-touch-font-strong: 14px;
    }

    .dash-header {
        min-height: 72px !important;
        height: 72px !important;
        padding: 10px 16px !important;
        gap: 12px !important;
        align-items: center !important;
        overflow: visible !important;
    }

    body.has-managed-context .dash-header,
    body:has(.top-header) .dash-header {
        min-height: 72px !important;
        height: 72px !important;
    }

    .header-rightside {
        gap: 8px !important;
        align-items: center !important;
    }

    .language-toggle,
    .notification-icon,
    .notification-wrp .dropdown-toggle,
    .header-profile .dropdown button,
    .header-profile .dropdown .profile-menu-toggle {
        width: var(--iv-touch-size) !important;
        min-width: var(--iv-touch-size) !important;
        max-width: var(--iv-touch-size) !important;
        height: var(--iv-touch-size) !important;
        min-height: var(--iv-touch-size) !important;
        max-height: var(--iv-touch-size) !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: var(--iv-touch-radius) !important;
        font-size: var(--iv-touch-font) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .language-toggle {
        width: var(--iv-touch-size) !important;
        min-width: var(--iv-touch-size) !important;
        max-width: var(--iv-touch-size) !important;
    }

    .language-toggle #current-lang,
    .language-toggle .text-black,
    .header-profile .dropdown button,
    .header-profile .dropdown .profile-menu-toggle {
        font-size: var(--iv-touch-font) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .language-toggle .fa-angle-down,
    .header-profile .dropdown button svg,
    .header-profile .dropdown .profile-menu-toggle svg,
    .notification-icon svg,
    .notification-wrp .dropdown-toggle svg {
        width: var(--iv-touch-icon) !important;
        height: var(--iv-touch-icon) !important;
        min-width: var(--iv-touch-icon) !important;
    }

    .language-toggle .fa-angle-down {
        font-size: 14px !important;
    }

    .header-profile img,
    .header-profile .profile-picture,
    .header-profile .user-initials-avatar {
        width: var(--iv-touch-size) !important;
        min-width: var(--iv-touch-size) !important;
        max-width: var(--iv-touch-size) !important;
        height: var(--iv-touch-size) !important;
        min-height: var(--iv-touch-size) !important;
        max-height: var(--iv-touch-size) !important;
        flex: 0 0 var(--iv-touch-size) !important;
        border-radius: 50% !important;
        font-size: var(--iv-touch-font-strong) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-header-greeting span,
    .header-profile p,
    .header-profile span:not(.dropdown-item span) {
        font-size: var(--iv-touch-font) !important;
        line-height: 1.2 !important;
    }

    .mobile-header-greeting strong {
        font-size: calc(var(--iv-touch-font-strong) + 2px) !important;
        line-height: 1.15 !important;
    }

    .iv-bottom-dock {
        height: calc(var(--iv-touch-size) + 16px) !important;
        border-radius: calc(var(--iv-touch-radius) + 16px) !important;
    }

    .iv-bottom-dock-scroll {
        height: calc(var(--iv-touch-size) + 16px) !important;
        padding: 8px 10px !important;
    }

    .iv-bottom-nav-item,
    .iv-bottom-menu-toggle {
        width: var(--iv-touch-size) !important;
        min-width: var(--iv-touch-size) !important;
        max-width: var(--iv-touch-size) !important;
        height: var(--iv-touch-size) !important;
        min-height: var(--iv-touch-size) !important;
        max-height: var(--iv-touch-size) !important;
        border-radius: var(--iv-touch-radius) !important;
        font-size: var(--iv-touch-font) !important;
    }

    .iv-bottom-nav-icon,
    .iv-bottom-nav-icon svg,
    .iv-bottom-nav-icon img {
        width: var(--iv-touch-icon) !important;
        height: var(--iv-touch-icon) !important;
        min-width: var(--iv-touch-icon) !important;
    }

    .iv-bottom-nav-icon i {
        font-size: var(--iv-touch-icon) !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --iv-touch-size: 48px;
        --iv-touch-icon: 26px;
        --iv-touch-radius: 16px;
        --iv-touch-font: 11px;
        --iv-touch-font-strong: 13px;
    }

    .dash-header {
        min-height: 64px !important;
        height: 64px !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    body.has-managed-context .dash-header,
    body:has(.top-header) .dash-header {
        min-height: 64px !important;
        height: 64px !important;
    }

    .header-rightside {
        gap: 6px !important;
    }

    .mobile-header-greeting strong {
        max-width: 40vw !important;
    }
}

/* Last-word mobile/tablet header control order: language, bell, profile. */
@media (max-width: 1199.98px) {
    .dash-header .header-rightside {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }

    .dash-header .header-rightside .language-switcher {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dash-header .header-rightside #notificationToggle,
    .dash-header .header-rightside > .notification-wrp:not(.language-switcher) {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dash-header .header-rightside .header-profile {
        order: 3 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Final guard: prevent toastr's built-in base64 icons from doubling our iOS indicator. */
@media (max-width: 1199.98px) {
    #toast-container > .toast-success,
    #toast-container > .toast-error,
    #toast-container > .toast-info,
    #toast-container > .toast-warning,
    #toast-container > .toast-danger {
        background-image: none !important;
        background-repeat: no-repeat !important;
        background-position: 0 0 !important;
    }

    #toast-container .toast-close-button {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 3 !important;
        touch-action: manipulation !important;
    }

    #toast-container > .toast::before,
    #toast-container > .toast::after,
    #toast-container > div::before,
    #toast-container > div::after {
        pointer-events: none !important;
    }
}

/* Mobile/tablet iOS-style toast notifications, themed for iVolley. */
@media (max-width: 1199.98px) {
    #toast-container {
        position: fixed !important;
        top: max(14px, env(safe-area-inset-top)) !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: min(420px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        transform: translateX(-50%) !important;
        z-index: 2147483000 !important;
        pointer-events: none !important;
    }

    body.has-managed-context #toast-container,
    body:has(.top-header) #toast-container {
        top: calc(var(--iv-context-header-h, 0px) + 10px) !important;
    }

    #toast-container > .toast,
    #toast-container > div {
        pointer-events: auto !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 0 10px !important;
        padding: 12px 44px 12px 54px !important;
        display: flex !important;
        align-items: center !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 999px !important;
        background-color: rgba(8, 12, 16, .94) !important;
        background-image: none !important;
        background-position: initial !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
        color: #fff !important;
        opacity: 1 !important;
        overflow: hidden !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    }

    #toast-container > .toast::before,
    #toast-container > div::before {
        content: "" !important;
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 999px !important;
        transform: translateY(-50%) !important;
        background: #0bbfc0 !important;
        box-shadow: 0 0 0 5px rgba(11, 191, 192, .16) !important;
    }

    #toast-container > .toast-success::before,
    #toast-container > .toast-info::before,
    #toast-container > .toast-warning::before {
        background: #0bbfc0 !important;
        box-shadow: 0 0 0 5px rgba(11, 191, 192, .16) !important;
    }

    #toast-container > .toast-error::before,
    #toast-container > .toast-danger::before {
        background: #ef4444 !important;
        box-shadow: 0 0 0 5px rgba(239, 68, 68, .18) !important;
    }

    #toast-container > .toast-success::after,
    #toast-container > .toast-info::after,
    #toast-container > .toast-warning::after {
        content: "\2713" !important;
        position: absolute !important;
        left: 23px !important;
        top: 50% !important;
        color: #001f22 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        transform: translateY(-50%) !important;
    }

    #toast-container > .toast-error::after,
    #toast-container > .toast-danger::after {
        content: "!" !important;
        position: absolute !important;
        left: 27px !important;
        top: 50% !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        transform: translateY(-50%) !important;
    }

    #toast-container .toast-title {
        margin: 0 0 2px !important;
        color: rgba(255, 255, 255, .98) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
    }

    #toast-container .toast-message {
        margin: 0 !important;
        color: rgba(255, 255, 255, .86) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    #toast-container .toast-close-button {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .12) !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        opacity: 1 !important;
        text-shadow: none !important;
        transform: translateY(-50%) !important;
    }

    #toast-container .toast-progress {
        left: 54px !important;
        right: 44px !important;
        bottom: 9px !important;
        width: auto !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: var(--role-accent, #33fff6) !important;
        opacity: .75 !important;
    }

    .toast-container {
        z-index: 2147483000 !important;
    }

    .toast-container .toast,
    .at-toast,
    .ti-toast-popup {
        border-radius: 999px !important;
        background: rgba(8, 12, 16, .94) !important;
        color: #fff !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    }
}

@media (max-width: 575.98px) {
    #toast-container {
        top: max(10px, env(safe-area-inset-top)) !important;
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
    }

    body.has-managed-context #toast-container,
    body:has(.top-header) #toast-container {
        top: calc(var(--iv-context-header-h, 0px) + 8px) !important;
    }

    #toast-container > .toast,
    #toast-container > div {
        min-height: 54px !important;
        padding: 10px 38px 10px 48px !important;
    }

    #toast-container > .toast::before,
    #toast-container > div::before {
        left: 14px !important;
        width: 24px !important;
        height: 24px !important;
    }

    #toast-container > .toast-success::after,
    #toast-container > .toast-info::after,
    #toast-container > .toast-warning::after {
        left: 21px !important;
        font-size: 13px !important;
    }

    #toast-container > .toast-error::after,
    #toast-container > .toast-danger::after {
        left: 24px !important;
        font-size: 15px !important;
    }

    #toast-container .toast-message {
        font-size: 11px !important;
    }

    #toast-container .toast-progress {
        left: 48px !important;
        right: 38px !important;
    }
}

/* Mobile-only FullCalendar UX.
   Phones use agenda-style views for readable Month/Week/Day/List. */
@media (max-width: 575.98px) {
    .main-content:has(#calendar) .cal-toolbar-left {
        grid-template-columns: 30px 30px minmax(0, 1fr) 58px !important;
        gap: 5px !important;
    }

    .main-content:has(#calendar) .cal-toolbar-left.has-mobile-calendar-add {
        grid-template-columns: 30px 30px minmax(0, 1fr) 34px 58px !important;
    }

    .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        border-radius: 9px !important;
        background: var(--role-accent-text, #0b8f91) !important;
        color: #fff !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* dark: vincolato a [data-role] come i guard più sotto — senza ruolo
       --role-accent-text resta teal SCURO e il bianco baseline è giusto. */
    [data-theme="dark"][data-role] .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add,
    [data-theme="dark"] [data-role] .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add {
        color: var(--role-accent-on, #0E1D21) !important;
    }

    .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add svg,
    .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add i {
        display: none !important;
    }

    .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add {
        font-size: 0 !important;
        text-indent: 0 !important;
    }

    .main-content:has(#calendar) .cal-today-btn {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add::after {
        content: "+" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-indent: 0 !important;
    }

    .main-content:has(#calendar) .cal-main {
        min-height: 0 !important;
        overflow: visible !important;
    }

    .main-content:has(#calendar) .cal-body {
        min-height: 0 !important;
        padding: 0 8px 12px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .main-content:has(#calendar) #calendar,
    .main-content:has(#calendar) #calendar .fc {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .main-content:has(#calendar) .fc .fc-view-harness,
    .main-content:has(#calendar) .fc .fc-view-harness-active {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .main-content:has(#calendar) .fc .fc-view-harness-active > .fc-view {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    .main-content:has(#calendar) .fc .fc-daygrid,
    .main-content:has(#calendar) .fc .fc-timegrid,
    .main-content:has(#calendar) .fc .fc-list {
        min-height: 0 !important;
    }

    .main-content:has(#calendar) .fc .fc-scrollgrid,
    .main-content:has(#calendar) .fc .fc-scrollgrid table,
    .main-content:has(#calendar) .fc .fc-daygrid-body,
    .main-content:has(#calendar) .fc .fc-daygrid-body table {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
    }

    .main-content:has(#calendar) .fc .fc-scroller,
    .main-content:has(#calendar) .fc .fc-scroller-liquid-absolute {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .main-content:has(#calendar) .fc .fc-timegrid-slots,
    .main-content:has(#calendar) .fc .fc-timegrid-cols {
        min-height: 320px !important;
    }

    .main-content:has(#calendar) .fc .fc-timegrid-body,
    .main-content:has(#calendar) .fc .fc-timegrid-body table {
        width: 100% !important;
        min-width: 100% !important;
    }

    .main-content:has(#calendar) .fc .fc-list {
        border: 0 !important;
        background: transparent !important;
    }

    .main-content:has(#calendar) .fc .fc-list-table {
        display: block !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 6px !important;
    }

    .main-content:has(#calendar) .fc .fc-list-table tbody {
        display: block !important;
    }

    .main-content:has(#calendar) .fc .fc-list-day,
    .main-content:has(#calendar) .fc .fc-list-event {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .main-content:has(#calendar) .fc .fc-list-day-cushion {
        padding: 8px 10px !important;
        border-radius: 10px 10px 0 0 !important;
        background: var(--role-accent-soft, #f0fdfa) !important;
        color: var(--role-accent-text, #0b8f91) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .01em !important;
    }

    .main-content:has(#calendar) .fc .fc-list-event {
        margin-bottom: 6px !important;
        border-radius: 0 0 10px 10px !important;
        background: var(--iv-surface, #fff) !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .06) !important;
        overflow: hidden !important;
    }

    .main-content:has(#calendar) .fc .fc-list-event td {
        border: 0 !important;
        padding: 8px 6px !important;
        background: transparent !important;
        vertical-align: middle !important;
    }

    .main-content:has(#calendar) .fc .fc-list-event-time {
        width: 56px !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .main-content:has(#calendar) .fc .fc-list-event-graphic {
        width: 18px !important;
        padding-inline: 2px !important;
    }

    .main-content:has(#calendar) .fc .fc-list-event-dot {
        border-width: 5px !important;
    }

    .main-content:has(#calendar) .fc .fc-list-event-title,
    .main-content:has(#calendar) .fc .fc-list-event-title a {
        color: var(--iv-text, #0f172a) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .main-content:has(#calendar) .fc .fc-list-empty {
        min-height: 180px !important;
        border: 1px dashed rgba(148, 163, 184, .55) !important;
        border-radius: 14px !important;
        background: var(--iv-bg, #f8fafc) !important;
        color: #64748b !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }
}

/* Final small readability bump for mobile/tablet header controls. */
@media (max-width: 1199.98px) {
    .dash-header .language-toggle,
    .dash-header .language-toggle #current-lang,
    .dash-header .language-toggle .text-black,
    .dash-header .language-toggle .fa-angle-down,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        font-size: 20px !important;
        font-weight: 800 !important;
    }

    .dash-header .language-toggle {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        padding: 0 10px !important;
        gap: 6px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 14px !important;
    }

    .dash-header .language-toggle .text-black {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header .language-toggle,
    .dash-header .language-toggle #current-lang,
    .dash-header .language-toggle .text-black,
    .dash-header .language-toggle .fa-angle-down,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        font-size: 11px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        font-size: 20px !important;
        font-weight: 800 !important;
    }

    .dash-header .language-toggle {
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        padding: 0 8px !important;
        gap: 5px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 13px !important;
    }

    .dash-header .language-toggle .text-black {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        font-size: 12px !important;
        line-height: 1 !important;
    }
}

/* Ultimate header balance: medium, consistent mobile/tablet controls. */
@media (max-width: 1199.98px) {
    .dash-header {
        min-height: 64px !important;
        height: 64px !important;
        padding: 9px 14px !important;
    }

    .dash-header .header-rightside {
        gap: 8px !important;
        align-items: center !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle,
    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        border-radius: 15px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        border-radius: 50% !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
    }

    .dash-header .language-toggle {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 11px !important;
        gap: 7px !important;
        border-radius: 15px !important;
    }

    .dash-header .language-toggle,
    .dash-header .language-toggle #current-lang,
    .dash-header .language-toggle .text-black,
    .dash-header .language-toggle .fa-angle-down {
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .text-black {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
    }

    .dash-header .notification-icon svg,
    .dash-header .notification-wrp .dropdown-toggle svg {
        width: 22px !important;
        height: 22px !important;
    }

    .dash-header .header-profile .dropdown button svg,
    .dash-header .header-profile .dropdown .profile-menu-toggle svg {
        width: 19px !important;
        height: 12px !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header {
        min-height: 60px !important;
        height: 60px !important;
        padding: 8px 10px !important;
    }

    .dash-header .header-rightside {
        gap: 7px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle,
    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 14px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        border-radius: 50% !important;
        font-size: 14px !important;
    }

    .dash-header .language-toggle {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        border-radius: 14px !important;
    }

    .dash-header .language-toggle,
    .dash-header .language-toggle #current-lang,
    .dash-header .language-toggle .text-black,
    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        font-size: 12px !important;
    }

    .dash-header .notification-icon svg,
    .dash-header .notification-wrp .dropdown-toggle svg {
        width: 21px !important;
        height: 21px !important;
    }

    .dash-header .header-profile .dropdown button svg,
    .dash-header .header-profile .dropdown .profile-menu-toggle svg {
        width: 18px !important;
        height: 11px !important;
    }
}

/* Requested final large-chip mobile/tablet header sizing. */
@media (max-width: 1199.98px) {
    .dash-header {
        min-height: 72px !important;
        height: 72px !important;
        padding: 10px 14px !important;
    }

    .dash-header .header-rightside {
        gap: 8px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle,
    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        border-radius: 18px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .dash-header .language-toggle {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 0 12px !important;
        gap: 8px !important;
        border-radius: 18px !important;
    }

    .dash-header .language-toggle,
    .dash-header .language-toggle #current-lang {
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .dash-header .language-toggle .text-black {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        font-size: 25px !important;
        line-height: 1 !important;
    }

}

@media (max-width: 575.98px) {
    .dash-header {
        min-height: 68px !important;
        height: 68px !important;
        padding: 8px 10px !important;
    }

    .dash-header .header-rightside {
        gap: 6px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle,
    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle,
    .dash-header .language-toggle {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        border-radius: 17px !important;
    }

    .dash-header .language-toggle {
        padding: 0 10px !important;
        gap: 7px !important;
    }

    .dash-header .language-toggle,
    .dash-header .language-toggle #current-lang {
        font-size: 15px !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        font-size: 23px !important;
    }
}

/* Keep the header initials avatar perfectly round even when other chips are wide. */
@media (max-width: 1199.98px) {
    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        flex: 0 0 52px !important;
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        flex-basis: 50px !important;
    }
}

/* Last toast guard: remove toastr built-in base64 icons to avoid double symbols. */
@media (max-width: 1199.98px) {
    #toast-container > .toast-success,
    #toast-container > .toast-error,
    #toast-container > .toast-info,
    #toast-container > .toast-warning,
    #toast-container > .toast-danger {
        background-image: none !important;
        background-repeat: no-repeat !important;
        background-position: 0 0 !important;
    }

    #toast-container .toast-progress {
        display: block !important;
        width: calc(100% - 92px) !important;
        animation: iv-toast-countdown 3000ms linear forwards !important;
        transform-origin: left center !important;
    }

    #toast-container .toast-close-button {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 5 !important;
        touch-action: manipulation !important;
    }

    #toast-container > .toast::before,
    #toast-container > .toast::after,
    #toast-container > div::before,
    #toast-container > div::after {
        pointer-events: none !important;
    }
}

@keyframes iv-toast-countdown {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* Dashboard-only mobile repair: compact two-column KPI cards without overlaps. */
@media (max-width: 575.98px) {
    .main-content.dashboard-page {
        padding-inline: 10px !important;
        padding-top: 10px !important;
    }

    .dashboard-page .al-page-head {
        margin-bottom: 10px !important;
        gap: 8px !important;
    }

    .dashboard-page .al-page-head-left {
        gap: 8px !important;
        min-width: 0 !important;
    }

    .dashboard-page .al-page-icon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    .dashboard-page .al-page-title {
        font-size: 15px !important;
        line-height: 1.15 !important;
        margin-bottom: 2px !important;
    }

    .dashboard-page .al-page-sub {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    .dashboard-page .sec-lbl {
        margin: 10px 0 7px !important;
        gap: 5px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        letter-spacing: .04em !important;
    }

    .dashboard-page .sec-lbl svg {
        width: 10px !important;
        height: 10px !important;
        min-width: 10px !important;
    }

    .dashboard-page .sec-period {
        font-size: 7px !important;
        white-space: nowrap !important;
    }

    .dashboard-page .row {
        --bs-gutter-x: 7px !important;
        --bs-gutter-y: 7px !important;
    }

    .dashboard-page .row > .dash-column,
    .dashboard-page .row > [class*="col-"]:has(.dash-box) {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .dashboard-page .dash-box {
        min-height: 92px !important;
        height: 100% !important;
        padding: 8px !important;
        display: block !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .dashboard-page .dash-box > .d-flex:first-child {
        min-width: 0 !important;
        margin-bottom: 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }

    .dashboard-page .dash-box .icon-circle {
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        margin: 0 !important;
        border-radius: 7px !important;
    }

    .dashboard-page .dash-box .icon-circle svg {
        width: 14px !important;
        height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
    }

    .dashboard-page .dash-box .count-text {
        min-width: 0 !important;
        max-width: calc(100% - 30px) !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: 0 !important;
    }

    .dashboard-page .dash-box .inner-title,
    .dashboard-page .dash-box h3,
    .dashboard-page .dash-box h4 {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 0 3px !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.13 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-page .dash-box p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, .86) !important;
        font-size: 6.8px !important;
        font-weight: 600 !important;
        line-height: 1.16 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-page .dash-box .apexcharts-canvas,
    .dashboard-page .dash-box svg {
        max-width: 100% !important;
    }

    .dashboard-page .pcard {
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .dashboard-page .pcard-head {
        padding: 9px 10px 7px !important;
        gap: 6px !important;
    }

    .dashboard-page .pcard-title {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    .dashboard-page .pcard-badge {
        padding: 2px 6px !important;
        font-size: 6.5px !important;
    }

    .dashboard-page .chart-wrap {
        min-height: 124px !important;
        overflow: hidden !important;
    }

    .dashboard-page .chart-wrap canvas,
    .dashboard-page .chart-wrap .apexcharts-canvas {
        max-width: 100% !important;
    }
}

@media (max-width: 360px) {
    .dashboard-page .row {
        --bs-gutter-x: 6px !important;
        --bs-gutter-y: 6px !important;
    }

    .dashboard-page .dash-box {
        min-height: 88px !important;
        padding: 7px !important;
    }

    .dashboard-page .dash-box .count-text {
        font-size: 11px !important;
    }

    .dashboard-page .dash-box .inner-title,
    .dashboard-page .dash-box h3,
    .dashboard-page .dash-box h4 {
        font-size: 8px !important;
    }

    .dashboard-page .dash-box p {
        font-size: 6px !important;
    }
}

/* Admin dashboard lower panels: detailed charts/lists need readable mobile cards. */
@media (max-width: 575.98px) {
    .dashboard-page .row > [class*="col-"]:has(.pcard) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .dashboard-page .pcard {
        width: 100% !important;
        min-height: auto !important;
        border-radius: 11px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .07) !important;
    }

    .dashboard-page .pcard-head {
        min-height: 34px !important;
        padding: 9px 11px 8px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .dashboard-page .pcard-title {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #0d1b2a !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .dashboard-page .pcard-badge {
        max-width: 42% !important;
        flex: 0 1 auto !important;
        padding: 3px 7px !important;
        border-radius: 999px !important;
        font-size: 7px !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dashboard-page .pcard > div[style*="padding"] {
        padding: 10px 11px !important;
    }

    .dashboard-page .scroll-list {
        max-height: 265px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .dashboard-page .lrow {
        min-height: 44px !important;
        padding: 8px 11px !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .dashboard-page .lrow[style*="align-items:flex-start"],
    .dashboard-page .lrow[style*="align-items: flex-start"] {
        align-items: flex-start !important;
    }

    .dashboard-page .lrow-icon {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }

    .dashboard-page .lrow-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .dashboard-page .act-dot {
        width: 8px !important;
        min-width: 8px !important;
        height: 8px !important;
        margin-top: 5px !important;
    }

    .dashboard-page .lrow-body {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .dashboard-page .lrow-title,
    .dashboard-page .lrow-title[style] {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: var(--iv-text, #0f172a) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.22 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-page .lrow-sub {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-top: 2px !important;
        color: var(--iv-text-2, #64748b) !important;
        font-size: 7.2px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-page .lrow-end {
        max-width: 34% !important;
        flex: 0 0 auto !important;
        text-align: right !important;
    }

    .dashboard-page .lrow-time {
        color: var(--iv-text-2, #64748b) !important;
        font-size: 6.8px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .dashboard-page .spill {
        max-width: 100% !important;
        padding: 2px 6px !important;
        font-size: 6px !important;
        line-height: 1.15 !important;
        letter-spacing: .02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dashboard-page .role-row {
        min-height: 38px !important;
        padding: 8px 11px !important;
        gap: 8px !important;
    }

    .dashboard-page .role-name,
    .dashboard-page .stor-name {
        min-width: 0 !important;
        color: var(--iv-text, #0f172a) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dashboard-page .role-count,
    .dashboard-page .stor-mb,
    .dashboard-page .d-lval {
        color: var(--iv-text-2, #334155) !important;
        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .dashboard-page .role-bar-wrap {
        width: 76px !important;
        min-width: 76px !important;
    }

    .dashboard-page .prog-bg {
        height: 5px !important;
        margin-top: 4px !important;
        background: #eef3f7 !important;
    }

    .dashboard-page .lrow-body > .d-flex {
        gap: 4px !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
    }

    .dashboard-page .lrow-body > .d-flex .stor-name {
        flex: 1 1 55% !important;
    }

    .dashboard-page .lrow-body > .d-flex .stor-mb {
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }

    .dashboard-page .chart-wrap,
    .dashboard-page .chart-wrap[style] {
        width: 100% !important;
        min-height: 150px !important;
        height: 150px !important;
        overflow: hidden !important;
    }

    .dashboard-page .pcard:has(.d-legend) .chart-wrap,
    .dashboard-page .pcard:has(.d-legend) .chart-wrap[style] {
        min-height: 122px !important;
        height: 122px !important;
    }

    .dashboard-page .pcard:has(#storageChart) .chart-wrap,
    .dashboard-page .pcard:has(#storageChart) .chart-wrap[style] {
        min-height: 190px !important;
        height: 190px !important;
    }

    .dashboard-page .chart-wrap canvas {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    .dashboard-page .chart-empty {
        min-height: 118px !important;
        padding: 18px 12px !important;
    }

    .dashboard-page .chart-empty svg {
        width: 26px !important;
        height: 26px !important;
        margin-bottom: 7px !important;
    }

    .dashboard-page .chart-empty p {
        color: var(--iv-text-2, #64748b) !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .dashboard-page .d-legend {
        gap: 5px !important;
        padding: 0 12px 12px !important;
    }

    .dashboard-page .d-legend-row {
        min-height: 18px !important;
        gap: 6px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
    }

    .dashboard-page .d-dot {
        width: 8px !important;
        min-width: 8px !important;
        height: 8px !important;
        margin-right: 0 !important;
    }

    .dashboard-page .d-lname {
        min-width: 0 !important;
        color: #64748b !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 360px) {
    .dashboard-page .pcard-head {
        padding-inline: 9px !important;
    }

    .dashboard-page .pcard-title {
        font-size: 9px !important;
    }

    .dashboard-page .pcard-badge {
        max-width: 38% !important;
        font-size: 6.3px !important;
        padding-inline: 5px !important;
    }

    .dashboard-page .lrow {
        padding-inline: 9px !important;
        gap: 7px !important;
    }

    .dashboard-page .lrow-title,
    .dashboard-page .lrow-title[style],
    .dashboard-page .role-name,
    .dashboard-page .stor-name {
        font-size: 8.2px !important;
    }

    .dashboard-page .lrow-sub {
        font-size: 6.6px !important;
    }

    .dashboard-page .role-bar-wrap {
        width: 58px !important;
        min-width: 58px !important;
    }
}

/* Fallback + typography consistency for admin dashboard detail cards on mobile WebViews. */
@media (max-width: 575.98px) {
    .dashboard-page .row > .col-lg-3,
    .dashboard-page .row > .col-lg-4,
    .dashboard-page .row > .col-lg-5,
    .dashboard-page .row > .col-lg-8,
    .dashboard-page .row > .col-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .dashboard-page .row > .dash-column {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    .dashboard-page .pcard,
    .dashboard-page .pcard * {
        letter-spacing: 0 !important;
        text-rendering: geometricPrecision !important;
        -webkit-font-smoothing: antialiased !important;
    }

    .dashboard-page .pcard-head {
        border-bottom-color: #edf2f7 !important;
    }

    .dashboard-page .pcard-title {
        font-size: 10px !important;
        font-weight: 800 !important;
        color: #102033 !important;
    }

    .dashboard-page .pcard-badge {
        min-width: max-content !important;
        max-width: 48% !important;
        font-size: 7px !important;
        font-weight: 800 !important;
        text-transform: none !important;
    }

    .dashboard-page .lrow {
        position: relative !important;
        border-bottom-color: #eef2f7 !important;
    }

    .dashboard-page .lrow-title,
    .dashboard-page .role-name,
    .dashboard-page .stor-name {
        font-size: 9.5px !important;
        font-weight: 800 !important;
        color: var(--iv-text, #111827) !important;
    }

    .dashboard-page .lrow-sub {
        max-width: 100% !important;
        color: #667085 !important;
        font-size: 7.5px !important;
        font-weight: 600 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    .dashboard-page .lrow-end {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    .dashboard-page .lrow-time,
    .dashboard-page .role-count,
    .dashboard-page .stor-mb,
    .dashboard-page .d-lval {
        font-size: 7.5px !important;
        font-weight: 800 !important;
        color: var(--iv-text-2, #475467) !important;
    }

    .dashboard-page .spill {
        min-height: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 6.5px !important;
        font-weight: 800 !important;
        text-transform: none !important;
    }

    .dashboard-page .d-legend-row {
        display: grid !important;
        grid-template-columns: 8px minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    .dashboard-page .d-lname {
        font-size: 8.5px !important;
        font-weight: 700 !important;
        color: #667085 !important;
    }

    .dashboard-page .role-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 74px auto !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

@media (max-width: 360px) {
    .dashboard-page .pcard-title {
        font-size: 9.4px !important;
    }

    .dashboard-page .pcard-badge {
        font-size: 6.4px !important;
    }

    .dashboard-page .lrow-title,
    .dashboard-page .role-name,
    .dashboard-page .stor-name {
        font-size: 8.8px !important;
    }

    .dashboard-page .lrow-sub,
    .dashboard-page .lrow-time,
    .dashboard-page .role-count,
    .dashboard-page .stor-mb,
    .dashboard-page .d-lval {
        font-size: 7px !important;
    }
}

/* Mobile/tablet dock submenus: show nested menus as a readable vertical list. */
@media (max-width: 1199.98px) {
    .iv-bottom-submenu {
        width: min(420px, calc(100vw - 24px)) !important;
        max-height: min(52dvh, 420px) !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        border: 1px solid color-mix(in srgb, var(--role-accent-text, #0d5f6a) 12%, transparent) !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, .99) !important;
        color: var(--iv-text, #0f172a) !important;
        box-shadow: 0 22px 58px color-mix(in srgb, var(--role-accent-text, #0d5f6a) 20%, transparent) !important;
        overflow: hidden !important;
        backdrop-filter: blur(18px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    }

    .iv-bottom-submenu[hidden] {
        display: none !important;
    }

    .iv-bottom-submenu-title {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        min-height: 46px !important;
        padding: 13px 16px 11px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid color-mix(in srgb, var(--role-accent-text, #0d5f6a) 10%, transparent) !important;
        background: rgba(255, 255, 255, .98) !important;
        color: var(--iv-text, #0f172a) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .iv-bottom-submenu-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(52dvh, 420px) - 46px) !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding: 8px !important;
        scrollbar-width: thin !important;
        scrollbar-color: color-mix(in srgb, var(--role-accent-text, #0d5f6a) 22%, transparent) transparent !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .iv-bottom-submenu-scroll::-webkit-scrollbar {
        display: block !important;
        width: 4px !important;
        height: 0 !important;
    }

    .iv-bottom-submenu-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--role-accent-text, #0d5f6a) 22%, transparent) !important;
    }

    .iv-bottom-submenu-link {
        width: 100% !important;
        max-width: none !important;
        min-height: 44px !important;
        flex: 0 0 auto !important;
        padding: 10px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        border-radius: 14px !important;
        background: transparent !important;
        color: #183244 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-decoration: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        touch-action: manipulation !important;
    }

    .iv-bottom-submenu-link::after {
        content: "\203A" !important;
        flex: 0 0 auto !important;
        color: color-mix(in srgb, var(--role-accent-text, #0d5f6a) 55%, transparent) !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
    }

    .iv-bottom-submenu-link.active,
    .iv-bottom-submenu-link:hover,
    .iv-bottom-submenu-link:focus {
        background: color-mix(in srgb, var(--role-accent-text, #0d5f6a) 9%, transparent) !important;
        color: var(--role-accent-text, #0d5f6a) !important;
        outline: 0 !important;
    }

    .iv-bottom-submenu-link.active::after,
    .iv-bottom-submenu-link:hover::after,
    .iv-bottom-submenu-link:focus::after {
        color: var(--role-accent-text, #0d5f6a) !important;
    }

    .iv-bottom-submenu-link.disabled {
        opacity: .48 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-submenu {
        width: calc(100vw - 24px) !important;
        max-height: min(58dvh, 430px) !important;
        border-radius: 20px !important;
    }

    .iv-bottom-submenu-scroll {
        max-height: calc(min(58dvh, 430px) - 44px) !important;
    }

    .iv-bottom-submenu-title {
        min-height: 44px !important;
        padding: 12px 14px 10px !important;
        font-size: 12px !important;
    }

    .iv-bottom-submenu-link {
        min-height: 42px !important;
        padding: 9px 11px !important;
        border-radius: 13px !important;
        font-size: 11.5px !important;
    }
}

/* Dock tabs with labels, active underline, connected submenu pointer, and motion. */
@media (max-width: 1199.98px) {
    body.iv-bottom-nav-ready {
        padding-bottom: 106px !important;
    }

    body.iv-bottom-nav-ready .main-content {
        padding-bottom: max(122px, calc(env(safe-area-inset-bottom) + 122px)) !important;
    }

    .iv-bottom-dock {
        height: 78px !important;
        width: min(520px, calc(100vw - 28px)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        border-radius: 24px !important;
        overflow: visible !important;
    }

    .iv-bottom-dock-scroll {
        height: 78px !important;
        padding: 8px 12px 10px !important;
        gap: 6px !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        overflow: visible !important;
    }

    .iv-bottom-nav-item,
    .iv-bottom-menu-toggle {
        position: relative !important;
        width: auto !important;
        min-width: 58px !important;
        max-width: 86px !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        flex: 1 1 0 !important;
        padding: 5px 6px 7px !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 17px !important;
        color: var(--iv-text-2, #475569) !important;
        transition: color .18s ease, background-color .18s ease, transform .18s ease !important;
    }

    .iv-bottom-nav-item::after,
    .iv-bottom-menu-toggle::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 1px !important;
        width: 0 !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: var(--role-accent-text, #0d5f6a) !important;
        transform: translateX(-50%) !important;
        transition: width .2s ease !important;
    }

    .iv-bottom-nav-item.active,
    .iv-bottom-nav-item.is-open,
    .iv-bottom-nav-item:hover,
    .iv-bottom-nav-item:focus-visible,
    .iv-bottom-menu.is-panel-open .iv-bottom-menu-toggle {
        background: transparent !important;
        color: var(--role-accent-text, #0d5f6a) !important;
        transform: translateY(-1px) !important;
    }

    .iv-bottom-nav-item.active::after,
    .iv-bottom-nav-item.is-open::after,
    .iv-bottom-menu.is-panel-open .iv-bottom-menu-toggle::after {
        width: 28px !important;
    }

    .iv-bottom-nav-icon {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .iv-bottom-nav-icon svg,
    .iv-bottom-nav-icon i,
    .iv-bottom-nav-icon img {
        width: 23px !important;
        min-width: 23px !important;
        height: 23px !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .iv-bottom-nav-label,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label {
        max-width: 100% !important;
        min-width: 38px !important;
        display: block !important;
        color: currentColor !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        pointer-events: none !important;
    }

    .iv-bottom-menu-toggle > span:not(.iv-bottom-nav-label) {
        width: 19px !important;
        height: 2px !important;
        min-height: 2px !important;
        display: block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: currentColor !important;
    }

    .iv-bottom-menu.is-panel-open .iv-bottom-menu-toggle {
        font-size: 24px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
    }

    .iv-bottom-menu.is-panel-open .iv-bottom-menu-toggle > span:not(.iv-bottom-nav-label) {
        display: none !important;
    }

    .iv-bottom-submenu {
        bottom: max(100px, calc(env(safe-area-inset-bottom) + 100px)) !important;
        overflow: visible !important;
        transform-origin: var(--iv-submenu-anchor-x, 50vw) bottom !important;
    }

    .iv-bottom-submenu::after {
        content: "" !important;
        position: fixed !important;
        left: var(--iv-submenu-anchor-x, 50vw) !important;
        bottom: max(94px, calc(env(safe-area-inset-bottom) + 94px)) !important;
        width: 16px !important;
        height: 16px !important;
        border-right: 1px solid color-mix(in srgb, var(--role-accent-text, #0d5f6a) 12%, transparent) !important;
        border-bottom: 1px solid color-mix(in srgb, var(--role-accent-text, #0d5f6a) 12%, transparent) !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, .99) !important;
        box-shadow: 6px 8px 14px color-mix(in srgb, var(--role-accent-text, #0d5f6a) 8%, transparent) !important;
        transform: translateX(-50%) rotate(45deg) !important;
        z-index: -1 !important;
    }

    .iv-bottom-submenu.is-animating {
        animation: ivSubmenuReveal .22s cubic-bezier(.2, .8, .2, 1) both !important;
    }

    .iv-bottom-submenu.is-animating .iv-bottom-submenu-link {
        animation: ivSubmenuItemReveal .22s cubic-bezier(.2, .8, .2, 1) both !important;
    }

    .iv-bottom-submenu.is-animating .iv-bottom-submenu-link:nth-child(2) {
        animation-delay: .025s !important;
    }

    .iv-bottom-submenu.is-animating .iv-bottom-submenu-link:nth-child(3) {
        animation-delay: .05s !important;
    }

    .iv-bottom-submenu.is-animating .iv-bottom-submenu-link:nth-child(4) {
        animation-delay: .075s !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-dock {
        width: calc(100vw - 24px) !important;
        height: 76px !important;
        border-radius: 23px !important;
    }

    .iv-bottom-dock-scroll {
        height: 76px !important;
        padding: 8px 9px 10px !important;
        gap: 2px !important;
    }

    .iv-bottom-nav-item,
    .iv-bottom-menu-toggle {
        min-width: 50px !important;
        max-width: 72px !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding-inline: 4px !important;
    }

    .iv-bottom-nav-label,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label {
        min-width: 30px !important;
        font-size: 9px !important;
    }

    .iv-bottom-submenu {
        bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px)) !important;
    }

    .iv-bottom-submenu::after {
        bottom: max(90px, calc(env(safe-area-inset-bottom) + 90px)) !important;
    }
}

@keyframes ivSubmenuReveal {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes ivSubmenuItemReveal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Last-word profile identity: show name/role directly beside profile circle on mobile/tablet. */
@media (max-width: 1199.98px) {
    .dash-header .header-profile {
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        order: 1 !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block {
        order: 2 !important;
        display: flex !important;
        min-width: 82px !important;
        max-width: 150px !important;
        flex: 0 1 auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 2px !important;
        margin: 0 !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block p,
    .dash-header .header-profile > .d-none.d-lg-block .fw-medium {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        color: var(--iv-text, #0f172a) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block span {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        color: var(--iv-text-2, #475569) !important;
        font-size: 10.5px !important;
        font-weight: 650 !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dash-header .header-profile > .dropdown {
        order: 3 !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header .header-profile {
        gap: 6px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block {
        min-width: 62px !important;
        max-width: 96px !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block p,
    .dash-header .header-profile > .d-none.d-lg-block .fw-medium {
        font-size: 10.5px !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block span {
        font-size: 9px !important;
    }
}

/* Final mobile/tablet header composition: logo left, combined profile chip right. */
@media (max-width: 1199.98px) {
    .dash-header {
        display: grid !important;
        grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 70px !important;
        height: 70px !important;
        padding: 8px 12px !important;
        overflow: visible !important;
    }

    .dash-header .header-left {
        grid-column: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    .dash-header .mobile-header-logo {
        width: 96px !important;
        min-width: 96px !important;
        height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .dash-header .mobile-header-logo img {
        width: 92px !important;
        max-width: 92px !important;
        height: auto !important;
        max-height: 42px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .dash-header .mobile-header-greeting,
    .dash-header .header-left > .d-lg-flex {
        display: none !important;
    }

    .dash-header .header-rightside {
        grid-column: 2 / 4 !important;
        min-width: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .dash-header .header-rightside .language-switcher {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    .dash-header .header-rightside #notificationToggle,
    .dash-header .header-rightside .notification-wrp:not(.language-switcher):not(:has(.language-toggle)) {
        order: 2 !important;
        flex: 0 0 auto !important;
    }

    .dash-header .header-rightside .header-profile {
        order: 3 !important;
        margin-left: auto !important;
        justify-self: end !important;
        align-self: center !important;
    }

    .dash-header .mobile-searchbar {
        display: none !important;
    }

    .dash-header .header-profile {
        margin-left: auto !important;
        padding: 4px 6px 4px 5px !important;
        min-width: 172px !important;
        max-width: 230px !important;
        height: 52px !important;
        display: inline-grid !important;
        grid-template-columns: 42px minmax(72px, 1fr) 34px !important;
        align-items: center !important;
        column-gap: 7px !important;
        border: 1px solid color-mix(in srgb, var(--role-accent-text, #0d5f6a) 10%, transparent) !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
        overflow: visible !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        grid-column: 1 !important;
        order: initial !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex: none !important;
        border-radius: 50% !important;
        font-size: 12px !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block {
        grid-column: 2 !important;
        order: initial !important;
        display: flex !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block p,
    .dash-header .header-profile > .d-none.d-lg-block .fw-medium {
        margin: 0 !important;
        width: 100% !important;
        color: var(--iv-text, #0f172a) !important;
        font-size: 12px !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block span {
        margin: 0 !important;
        width: 100% !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dash-header .header-profile > .dropdown {
        grid-column: 3 !important;
        order: initial !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        border-radius: 13px !important;
        background: var(--iv-bg, #f8fafc) !important;
    }

    .dash-header .header-profile .dropdown button svg,
    .dash-header .header-profile .dropdown .profile-menu-toggle svg {
        width: 16px !important;
        height: 10px !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header {
        grid-template-columns: 78px minmax(0, 1fr) auto !important;
        gap: 6px !important;
        min-height: 64px !important;
        height: 64px !important;
        padding: 7px 8px !important;
    }

    .dash-header .mobile-header-logo {
        width: 78px !important;
        min-width: 78px !important;
        height: 42px !important;
    }

    .dash-header .mobile-header-logo img {
        width: 74px !important;
        max-width: 74px !important;
        max-height: 36px !important;
    }

    .dash-header .header-rightside {
        gap: 5px !important;
    }

    .dash-header .language-switcher {
        flex: 0 0 auto !important;
    }

    .dash-header .language-toggle {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 7px !important;
        gap: 3px !important;
        border-radius: 15px !important;
    }

    .dash-header .language-toggle,
    .dash-header .language-toggle #current-lang {
        font-size: 11px !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
    }

    .dash-header .notification-wrp:not(.language-switcher) {
        display: inline-flex !important;
        flex: 0 0 auto !important;
    }

    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle:not(.language-toggle) {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--iv-surface, #fff) !important;
        border: 1px solid color-mix(in srgb, var(--role-accent-text, #0d5f6a) 10%, transparent) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
    }

    .dash-header .notification-icon svg,
    .dash-header .notification-wrp .dropdown-toggle:not(.language-toggle) svg {
        width: 19px !important;
        height: 19px !important;
    }

    .dash-header .header-profile {
        min-width: 142px !important;
        max-width: 174px !important;
        height: 46px !important;
        padding: 3px 5px !important;
        grid-template-columns: 36px minmax(52px, 1fr) 30px !important;
        column-gap: 5px !important;
        border-radius: 17px !important;
    }

    .dash-header .header-profile > img,
    .dash-header .header-profile > .profile-picture,
    .dash-header .header-profile > .user-initials-avatar,
    .dash-header .header-profile > .rounded-circle {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: 10.5px !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block p,
    .dash-header .header-profile > .d-none.d-lg-block .fw-medium {
        font-size: 10px !important;
    }

    .dash-header .header-profile > .d-none.d-lg-block span {
        font-size: 8.5px !important;
    }

    .dash-header .header-profile > .dropdown,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        border-radius: 12px !important;
    }
}

/* Absolute final mobile/tablet header placement: logo left, controls grouped right. */
@media (max-width: 1199.98px) {
    .dash-header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    .dash-header .header-left {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .dash-header .header-rightside {
        grid-column: 3 !important;
        width: auto !important;
        max-width: calc(100vw - 120px) !important;
        margin-left: auto !important;
        justify-self: end !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .dash-header .header-rightside .language-switcher {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    .dash-header .header-rightside #notificationToggle,
    .dash-header .header-rightside > .notification-wrp:not(.language-switcher) {
        order: 2 !important;
        flex: 0 0 auto !important;
    }

    .dash-header .header-rightside .header-profile {
        order: 3 !important;
        flex: 0 1 auto !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header {
        grid-template-columns: 78px minmax(0, 1fr) auto !important;
    }

    .dash-header .header-rightside {
        max-width: calc(100vw - 94px) !important;
        gap: 4px !important;
    }
}

/* Final dock balance: few-menu pages should fill the bar cleanly on mobile/tablet. */
@media (max-width: 1199.98px) {
    .iv-bottom-menu.iv-few-items .iv-bottom-dock {
        width: clamp(300px, 62vw, 460px) !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock {
        width: clamp(270px, 48vw, 390px) !important;
    }

    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock {
        width: clamp(330px, 58vw, 460px) !important;
    }

    .iv-bottom-menu.iv-visible-count-5 .iv-bottom-dock,
    .iv-bottom-menu:not(.iv-few-items) .iv-bottom-dock {
        width: min(520px, calc(100vw - 32px)) !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-dock-scroll {
        justify-content: center !important;
        gap: clamp(8px, 2vw, 18px) !important;
        padding-inline: clamp(12px, 2.4vw, 20px) !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-item,
    .iv-bottom-menu.iv-few-items .iv-bottom-menu-toggle {
        flex: 1 1 0 !important;
        min-width: 68px !important;
        max-width: 104px !important;
        width: auto !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-nav-item,
    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-menu-toggle {
        max-width: 112px !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon {
        width: 27px !important;
        min-width: 27px !important;
        height: 27px !important;
        min-height: 27px !important;
        color: currentColor !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon svg,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon i,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon img {
        width: 25px !important;
        min-width: 25px !important;
        height: 25px !important;
        font-size: 24px !important;
        filter: none !important;
        transform: translateZ(0) !important;
        image-rendering: auto !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon svg,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon svg * {
        stroke-width: 2.3px !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-label {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-item.active::after,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-item.is-open::after {
        width: 34px !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-menu.iv-few-items .iv-bottom-dock,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock,
    .iv-bottom-menu.iv-visible-count-5 .iv-bottom-dock,
    .iv-bottom-menu:not(.iv-few-items) .iv-bottom-dock {
        width: calc(100vw - 28px) !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock {
        width: min(304px, calc(100vw - 28px)) !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-dock-scroll {
        gap: 4px !important;
        padding-inline: 10px !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-item,
    .iv-bottom-menu.iv-few-items .iv-bottom-menu-toggle {
        min-width: 0 !important;
        max-width: none !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 5px 3px 7px !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon svg,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon i,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-icon img {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        font-size: 21px !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-label {
        font-size: 8.8px !important;
        line-height: 1.05 !important;
    }
}

/* True final dock sizing: remove empty pill space when only 3-4 items are visible. */
@media (max-width: 1199.98px) {
    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock {
        width: min(270px, calc(100vw - 28px)) !important;
    }

    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock {
        width: min(342px, calc(100vw - 28px)) !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock-scroll,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock-scroll {
        justify-content: center !important;
        gap: 8px !important;
        padding-inline: 12px !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-nav-item,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-nav-item,
    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-menu-toggle,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-menu-toggle {
        flex: 0 0 72px !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock {
        width: min(236px, calc(100vw - 24px)) !important;
    }

    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock {
        width: min(292px, calc(100vw - 24px)) !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock-scroll,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock-scroll {
        gap: 4px !important;
        padding-inline: 10px !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-nav-item,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-nav-item,
    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-menu-toggle,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-menu-toggle {
        flex: 0 0 64px !important;
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }
}

/* Hard fallback: size the dock from the real rendered item count, not reserved slots. */
@media (max-width: 1199.98px) {
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(3):last-child),
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(4):last-child) {
        width: max-content !important;
        max-width: calc(100vw - 28px) !important;
        min-width: 0 !important;
    }

    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(3):last-child) .iv-bottom-dock-scroll,
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(4):last-child) .iv-bottom-dock-scroll {
        width: max-content !important;
        max-width: calc(100vw - 28px) !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding-inline: 12px !important;
        box-sizing: border-box !important;
    }

    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(3):last-child) .iv-bottom-nav-item,
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(4):last-child) .iv-bottom-nav-item {
        flex: 0 0 72px !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(3):last-child),
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(4):last-child) {
        width: max-content !important;
        max-width: calc(100vw - 24px) !important;
    }

    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(3):last-child) .iv-bottom-dock-scroll,
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(4):last-child) .iv-bottom-dock-scroll {
        width: max-content !important;
        max-width: calc(100vw - 24px) !important;
        gap: 4px !important;
        padding-inline: 9px !important;
    }

    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(3):last-child) .iv-bottom-nav-item,
    .iv-bottom-dock:has(.iv-bottom-dock-scroll > .iv-bottom-nav-item:nth-child(4):last-child) .iv-bottom-nav-item {
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
    }
}

/* JS-sized permission docks: keep compact athlete/parent docks centered and balanced. */
@media (max-width: 1199.98px) {
    .iv-bottom-menu.iv-few-items .iv-bottom-dock {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-dock-scroll {
        justify-content: flex-start !important;
        overflow: visible !important;
    }
}

/* Final compact permission dock + crisp source SVG icons. */
@media (max-width: 1199.98px) {
    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock {
        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        height: 74px !important;
        border-radius: 23px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .06) !important;
        border: 1px solid color-mix(in srgb, var(--role-accent-text, #0d5f6a) 8%, transparent) !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock-scroll,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock-scroll {
        width: max-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
        height: 74px !important;
        gap: 10px !important;
        padding: 8px 16px 10px !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-nav-item,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-nav-item {
        flex: 0 0 66px !important;
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        padding: 5px 5px 6px !important;
        border-radius: 16px !important;
    }

    .iv-bottom-nav-icon .iv-dock-source-icon,
    .iv-bottom-nav-icon .iv-dock-source-icon svg {
        width: 23px !important;
        height: 23px !important;
        display: block !important;
        overflow: visible !important;
    }

    .iv-bottom-nav-icon .iv-dock-source-icon path,
    .iv-bottom-nav-icon .iv-dock-source-icon line,
    .iv-bottom-nav-icon .iv-dock-source-icon polyline,
    .iv-bottom-nav-icon .iv-dock-source-icon circle,
    .iv-bottom-nav-icon .iv-dock-source-icon rect {
        stroke: currentColor !important;
        stroke-width: 2 !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock {
        height: 70px !important;
        border-radius: 22px !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-dock-scroll,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-dock-scroll {
        height: 70px !important;
        gap: 6px !important;
        padding: 8px 12px 9px !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-nav-item,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-nav-item {
        flex: 0 0 52px !important;
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        height: 53px !important;
        min-height: 53px !important;
        max-height: 53px !important;
        padding: 5px 3px 6px !important;
        border-radius: 15px !important;
    }

    .iv-bottom-nav-icon .iv-dock-source-icon,
    .iv-bottom-nav-icon .iv-dock-source-icon svg {
        width: 21px !important;
        height: 21px !important;
    }

    .iv-bottom-menu.iv-visible-count-3 .iv-bottom-nav-label,
    .iv-bottom-menu.iv-visible-count-4 .iv-bottom-nav-label {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 8px !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Translation-safe dock labels: allow compact two-line labels in every language. */
@media (max-width: 1199.98px) {
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-label {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
    }
}

/* Auto-resizing dock: JS controls width from real menu count and label text. */
@media (max-width: 1199.98px) {
    .iv-bottom-menu.iv-few-items .iv-bottom-dock,
    .iv-bottom-menu.iv-few-items .iv-bottom-dock-scroll {
        width: var(--iv-dock-auto-width, auto) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 28px) !important;
    }

    .iv-bottom-menu.iv-few-items .iv-bottom-nav-item {
        width: var(--iv-dock-item-width, auto) !important;
        min-width: var(--iv-dock-item-width, 52px) !important;
        max-width: var(--iv-dock-item-width, 112px) !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-menu.iv-few-items .iv-bottom-dock,
    .iv-bottom-menu.iv-few-items .iv-bottom-dock-scroll {
        max-width: calc(100vw - 22px) !important;
    }
}

/* Desktop guard: bottom dock is strictly mobile/tablet only. */
@media (min-width: 1200px) {
    .iv-bottom-menu,
    .iv-bottom-dock,
    .iv-bottom-submenu,
    .iv-bottom-menu-panel {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.iv-bottom-nav-ready {
        padding-bottom: 0 !important;
    }
}

/* Readable dock labels. */
@media (max-width: 1199.98px) {
    .iv-bottom-nav-label,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-label {
        font-size: 11px !important;
        line-height: 1.08 !important;
        font-weight: 800 !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-nav-label,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-label {
        font-size: 9.5px !important;
        line-height: 1.06 !important;
    }
}

/* Theme font for generated mobile/tablet dock and menu popup. */
@media (max-width: 1199.98px) {
    .iv-bottom-menu,
    .iv-bottom-menu *,
    .iv-bottom-dock,
    .iv-bottom-dock *,
    .iv-bottom-nav-item,
    .iv-bottom-menu-toggle,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label,
    .iv-bottom-menu-panel,
    .iv-bottom-menu-head,
    .iv-bottom-menu-head strong,
    .iv-bottom-menu-head span,
    .iv-bottom-menu-list,
    .iv-bottom-menu-row,
    .iv-bottom-menu-row-label,
    .iv-bottom-submenu,
    .iv-bottom-submenu-title,
    .iv-bottom-submenu-link {
        font-family: "Montserrat", sans-serif !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        font-synthesis: none !important;
    }

    .iv-bottom-nav-label,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label {
        font-family: "Montserrat", sans-serif !important;
        font-style: normal !important;
        font-weight: 800 !important;
    }

    .iv-bottom-menu.is-panel-open .iv-bottom-menu-toggle {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 600 !important;
    }

    .iv-bottom-menu-head {
        min-height: 44px !important;
        padding: 9px 12px !important;
        gap: 8px !important;
    }

    .iv-bottom-menu-head strong,
    .iv-bottom-menu-title {
        color: var(--iv-text, #0f172a) !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
    }

    .iv-bottom-menu-head span:not(.iv-bottom-menu-title),
    .iv-bottom-menu-hint {
        color: #64748b !important;
        font-size: 9.5px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        text-align: right !important;
    }

    .iv-bottom-menu-list {
        padding: 6px 8px !important;
    }

    .iv-bottom-menu-row {
        min-height: 40px !important;
        grid-template-columns: 32px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 5px 9px !important;
        border-radius: 11px !important;
    }

    .iv-bottom-menu-row-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
    }

    .iv-bottom-menu-row-icon svg,
    .iv-bottom-menu-row-icon img,
    .iv-bottom-menu-row-icon i {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 16px !important;
    }

    .iv-bottom-menu-row-label {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
    }

    .iv-bottom-nav-label,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-label {
        font-size: 8.8px !important;
        font-weight: 600 !important;
        line-height: 1.05 !important;
    }

    .iv-bottom-menu.is-panel-open .iv-bottom-menu-toggle {
        font-size: 22px !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-menu-head {
        min-height: 42px !important;
        padding: 8px 11px !important;
    }

    .iv-bottom-menu-head strong,
    .iv-bottom-menu-title {
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    .iv-bottom-menu-head span:not(.iv-bottom-menu-title),
    .iv-bottom-menu-hint {
        font-size: 9px !important;
        font-weight: 500 !important;
    }

    .iv-bottom-menu-row {
        min-height: 38px !important;
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
        gap: 7px !important;
        padding: 4px 8px !important;
    }

    .iv-bottom-menu-row-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .iv-bottom-menu-row-label {
        font-size: 11px !important;
        font-weight: 500 !important;
    }

    .iv-bottom-nav-label,
    .iv-bottom-menu-toggle .iv-bottom-nav-label,
    .iv-bottom-menu-toggle em.iv-bottom-nav-label,
    .iv-bottom-menu.iv-few-items .iv-bottom-nav-label {
        font-size: 8.2px !important;
        font-weight: 600 !important;
    }
}

/* Theme-normal submenu popup typography. */
@media (max-width: 1199.98px) {
    .iv-bottom-submenu-title,
    .iv-bottom-submenu-link,
    .iv-bottom-submenu-link.active,
    .iv-bottom-submenu-link:hover,
    .iv-bottom-submenu-link:focus {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .iv-bottom-submenu-title {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .iv-bottom-submenu-link {
        min-height: 32px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
        line-height: 1.12 !important;
    }
}

@media (max-width: 575.98px) {
    .iv-bottom-submenu-title {
        font-size: 9.5px !important;
        font-weight: 400 !important;
    }

    .iv-bottom-submenu-link {
        min-height: 30px !important;
        padding: 6px 9px !important;
        font-size: 10.5px !important;
        font-weight: 400 !important;
    }
}

/* ==========================================================================
   V2 MOBILE CALENDARIO — griglia mese compatta + day-list + stagione a card.
   Token M1 (--iv-*) + accento ruolo (--role-accent*). Regola d'oro: testo
   bianco SOLO su --role-accent-text. Solo <=575.98px salvo il toggle (mobile
   largo). Il markup .ivm-* è iniettato da responsive.js (ivMobileCalendarV2*).
   ========================================================================== */

@media (max-width: 1199.98px) {
    /* Toggle segmented (Giorno · Settimana · Mese · Stagione) — design V2. */
    .cal-view-switcher {
        background: var(--iv-surface, #fff) !important;
        border: 1px solid var(--iv-border, #E8E8E8) !important;
        border-radius: 30px !important;
        padding: 3px !important;
        gap: 2px !important;
        box-shadow: 0 1px 8px rgba(149, 157, 165, .10) !important;
    }

    .cal-view-switcher .cal-view-btn {
        flex: 1 1 0 !important;
        border-radius: 20px !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--iv-muted, #8A9799) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 7px 0 !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    .cal-view-switcher .cal-view-btn.active {
        background: var(--role-accent-text, #176D7A) !important;
        color: #fff !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    /* dark: superficie scura senza ombra; voce attiva su tono CHIARO →
       testo inchiostro via --role-accent-on (regola d'oro, WCAG).
       Vincolato a [data-role] come il guard CTA di role-accents.css:
       senza ruolo --role-accent-text resta teal SCURO anche in dark
       e il bianco baseline è quello giusto. */
    [data-theme="dark"] .cal-view-switcher {
        box-shadow: none !important;
    }

    [data-theme="dark"][data-role] .cal-view-switcher .cal-view-btn.active,
    [data-theme="dark"] [data-role] .cal-view-switcher .cal-view-btn.active {
        color: var(--role-accent-on, #0E1D21) !important;
    }
}

@media (max-width: 575.98px) {
    /* Lista sparisce dal toggle su telefono (resta su tablet/desktop). */
    .cal-view-switcher .cal-view-btn[data-view="listWeek"] {
        display: none !important;
    }

    .cal-view-switcher {
        margin-bottom: 14px !important;
    }

    /* Nav mese (toolbar custom dei blade): chevron a card + titolo Oswald. */
    .main-content:has(#calendar) .cal-icon-btn {
        height: 40px !important;
        border-radius: 10px !important;
        border: 1px solid var(--iv-line, #EAEFEF) !important;
        background: var(--iv-surface, #fff) !important;
        color: var(--iv-text-2, #5C6B6D) !important;
    }

    .main-content:has(#calendar) .cal-current-month {
        font-family: 'Oswald', sans-serif !important;
        font-size: 19px !important;
        font-weight: 600 !important;
        color: var(--iv-text, #0C2226) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* --- Griglia mese compatta (solo host V2 attivo) --- */
    /* Card della griglia (design V2): superficie, radius 14, celle senza
       bordi interni. */
    .ivm-host.ivm-on .fc .fc-view-harness {
        background: var(--iv-surface, #fff);
        border: 1px solid var(--iv-line, #EAEFEF);
        border-radius: 14px;
        padding: 4px 6px 8px;
        box-shadow: 0 2px 12px rgba(149, 157, 165, .10);
    }

    .ivm-host.ivm-on .fc .fc-scrollgrid,
    .ivm-host.ivm-on .fc .fc-scrollgrid td,
    .ivm-host.ivm-on .fc .fc-scrollgrid th {
        border: 0 !important;
    }

    .ivm-host.ivm-on .fc .fc-daygrid-day-frame {
        min-height: 44px !important;
        padding: 2px 0 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .ivm-host.ivm-on .fc .fc-daygrid-day-top {
        justify-content: center !important;
    }

    .ivm-host.ivm-on .fc .fc-daygrid-day-number {
        float: none !important;
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 0 !important;
        font-size: 12.5px !important;
        color: var(--iv-text, #0C2226);
        transition: transform .15s ease; /* design V2: zoom sul giorno attivo */
    }

    .ivm-host.ivm-on .fc .fc-day-other .fc-daygrid-day-number {
        color: var(--iv-muted, #8A9799);
        opacity: .55;
    }

    .ivm-host.ivm-on .fc .fc-day-today {
        background: transparent !important;
    }

    .ivm-host.ivm-on .fc .fc-day-today .fc-daygrid-day-number {
        background: var(--role-accent-soft, rgba(23, 109, 122, .12));
        color: var(--role-accent-text, #176D7A);
        font-weight: 700;
    }

    /* Giorno selezionato: cerchio pieno accento + numero bianco (regola
       d'oro: --role-accent-text). Vince su today. */
    .ivm-host.ivm-on .fc .fc-daygrid-day.ivm-sel {
        background: var(--role-accent-soft, rgba(23, 109, 122, .10)) !important;
    }

    .ivm-host.ivm-on .fc .fc-daygrid-day.ivm-sel .fc-daygrid-day-number {
        background: var(--role-accent-text, #176D7A) !important;
        color: #fff !important;
        font-weight: 700;
        transform: scale(1.1);
    }

    /* Header giorni settimana a lettera singola. */
    .ivm-host.ivm-on .fc .fc-col-header-cell-cushion {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: var(--iv-muted, #8A9799) !important;
        letter-spacing: .02em;
        padding: 4px 0 !important;
        text-transform: uppercase;
    }

    /* Eventi in cella: solo marker, host trasparente e non tappabile. */
    .ivm-host.ivm-on .fc .fc-daygrid-day-events {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
        min-height: 8px;
        margin: 1px 2px 0 !important;
        pointer-events: none;
    }

    .ivm-host.ivm-on .fc .fc-daygrid-event-harness {
        margin: 0 !important;
        width: auto !important;
        pointer-events: none !important;
    }

    .ivm-host.ivm-on .fc .ivm-evt-host {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        min-height: 0 !important;
    }

    .ivm-evt {
        display: inline-block;
        background: var(--role-accent, #0F766E);
    }

    .ivm-evt-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .ivm-evt-bar {
        width: 14px;
        height: 4px;
        border-radius: 2px;
    }

    .ivm-evt.ivm-draft {
        opacity: .55;
    }

    /* Popover "+N" neutralizzato (dayMaxEvents=false via JS, cintura CSS). */
    .ivm-host.ivm-on .fc .fc-daygrid-more-link,
    .ivm-host.ivm-on .fc .fc-popover {
        display: none !important;
    }

    /* --- Day-list sotto la griglia --- */
    .ivm-day-panel,
    .ivm-season-panel {
        display: none;
    }

    .ivm-host.ivm-on .ivm-day-panel.ivm-show,
    .ivm-host.ivm-on .ivm-season-panel.ivm-show {
        display: block;
        margin-top: 14px;
    }

    .ivm-day-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 0 4px 8px;
    }

    /* design V2: "GIO 10 LUGLIO" in accento, uppercase */
    .ivm-day-label {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--role-accent-text, #176D7A);
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .ivm-day-count {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--iv-muted, #8A9799);
        white-space: nowrap;
    }

    .ivm-day-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .ivm-row {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        text-align: left;
        background: var(--iv-surface, #fff);
        border: 1px solid var(--iv-border, #E8E8E8);
        border-radius: 12px;
        padding: 10px 12px;
        cursor: pointer;
    }

    /* design V2: parentesi/barretta verticale color-squadra a sinistra */
    .ivm-row-dot {
        flex: 0 0 auto;
        width: 4px;
        height: 22px;
        border-radius: 4px;
        background: var(--role-accent, #0F766E);
    }

    .ivm-row-time {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--role-accent-text, #176D7A);
        min-width: 44px;
    }

    .ivm-row-title {
        flex: 1 1 auto;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--iv-text, #0C2226);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ivm-empty {
        padding: 14px 12px;
        text-align: center;
        font-size: 11.5px;
        color: var(--iv-muted, #8A9799);
        background: var(--iv-surface, #fff);
        border: 1px dashed var(--iv-border, #E8E8E8);
        border-radius: 12px;
    }

    /* --- Stagione mobile: card riassunto, griglia FC nascosta --- */
    .ivm-host.ivm-on.ivm-season-active .fc {
        display: none !important;
    }

    .ivm-season-head {
        font-family: 'Oswald', sans-serif;
        font-size: 19px;
        font-weight: 600;
        color: var(--iv-text, #0C2226);
        padding: 2px 4px 6px;
    }

    .ivm-chips {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
        margin-bottom: 14px;
    }

    .ivm-chip {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        background: var(--iv-surface, #fff);
        border: 1px solid var(--iv-border, #E8E8E8);
        border-radius: 11px;
        padding: 8px 6px;
    }

    .ivm-chip b {
        font-family: 'Oswald', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: var(--role-accent-text, #176D7A);
    }

    /* design V2 (2c): etichetta chip in Capitalized ("Allen." / "Partite"),
       non uppercase — il testo arriva già capitalizzato da IVM_TEXT. */
    .ivm-chip span {
        font-size: 9px;
        font-weight: 600;
        color: var(--iv-muted, #8A9799);
        letter-spacing: .02em;
    }

    /* design V2: chip tematiche — allenamenti in accento ruolo, partite in
       rosso, trasferte/altri eventi in ambra (semantica per tipo evento). */
    .ivm-chip-training {
        background: var(--role-accent-soft, #E8F1F2);
        border-color: color-mix(in srgb, var(--role-accent, #278E95) 30%, transparent);
    }

    .ivm-chip-training span {
        color: var(--role-accent-text, #176D7A);
        opacity: .75;
    }

    .ivm-chip-match {
        background: #FDECEC;
        border-color: #F3D3D3;
    }

    .ivm-chip-match b {
        color: #C43C3C;
    }

    .ivm-chip-match span {
        color: #9A5151;
    }

    .ivm-chip-other {
        background: #FEF3E8;
        border-color: #F6E0C7;
    }

    .ivm-chip-other b {
        color: #B15402;
    }

    .ivm-chip-other span {
        color: #946111;
    }

    .ivm-mcard {
        background: var(--iv-surface, #fff);
        border: 1px solid var(--iv-border, #E8E8E8);
        border-radius: 14px;
        padding: 13px 14px;
        margin-bottom: 9px;
        box-shadow: 0 2px 12px rgba(149, 157, 165, .10);
    }

    .ivm-mcard-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 7px;
    }

    .ivm-mcard-top h4 {
        margin: 0;
        font-family: 'Oswald', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--iv-text, #0C2226);
    }

    .ivm-mcard.ivm-cur {
        background: var(--role-accent-soft, rgba(23, 109, 122, .10));
        border-color: color-mix(in srgb, var(--role-accent, #278E95) 32%, transparent);
        border-left: 4px solid var(--role-accent, #0F766E);
        box-shadow: none;
    }

    .ivm-mcard.ivm-cur h4 {
        font-size: 16px;
        color: var(--role-accent-text, #176D7A);
    }

    .ivm-badge {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #fff;
        background: var(--role-accent-text, #176D7A);
        border-radius: 20px;
        padding: 3px 9px;
        white-space: nowrap;
    }

    .ivm-mbar {
        height: 5px;
        border-radius: 3px;
        background: var(--iv-line, #EAEFEF);
        overflow: hidden;
        margin: 9px 0 7px;
    }

    .ivm-mbar span {
        display: block;
        height: 100%;
        border-radius: 3px;
        background: var(--role-accent, #0F766E);
    }

    /* design V2: nei mesi non correnti la barra carico è attenuata */
    .ivm-mcard:not(.ivm-cur) .ivm-mbar span {
        opacity: .55;
    }

    .ivm-mmeta {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--iv-text-2, #5C6B6D);
    }

    .ivm-mmeta-match {
        color: #C43C3C;
    }

    .ivm-mmeta-other {
        color: #B15402;
    }
}

/* --- V2 fedele, modalità scura: ombre spente, accenti chiari → testo
       inchiostro via --role-accent-on (vincolato a [data-role], vedi guard
       CTA in role-accents.css), semantiche partite/trasferte alzate per
       contrasto come nel design dark. --- */
@media (max-width: 575.98px) {
    [data-theme="dark"] .ivm-host.ivm-on .fc .fc-view-harness,
    [data-theme="dark"] .ivm-mcard {
        box-shadow: none;
    }

    [data-theme="dark"][data-role] .ivm-host.ivm-on .fc .fc-daygrid-day.ivm-sel .fc-daygrid-day-number,
    [data-theme="dark"] [data-role] .ivm-host.ivm-on .fc .fc-daygrid-day.ivm-sel .fc-daygrid-day-number {
        color: var(--role-accent-on, #0E1D21) !important;
    }

    [data-theme="dark"][data-role] .ivm-badge,
    [data-theme="dark"] [data-role] .ivm-badge {
        color: var(--role-accent-on, #0E1D21);
    }

    [data-theme="dark"] .ivm-chip-match {
        background: rgba(224, 90, 90, .14);
        border-color: rgba(224, 90, 90, .28);
    }

    [data-theme="dark"] .ivm-chip-match b {
        color: #F07575;
    }

    [data-theme="dark"] .ivm-chip-match span {
        color: #C79191;
    }

    [data-theme="dark"] .ivm-chip-other {
        background: rgba(240, 138, 43, .14);
        border-color: rgba(240, 138, 43, .28);
    }

    [data-theme="dark"] .ivm-chip-other b {
        color: #F5A24D;
    }

    [data-theme="dark"] .ivm-chip-other span {
        color: #C79A6B;
    }

    [data-theme="dark"] .ivm-mmeta-match {
        color: #F07575;
    }

    [data-theme="dark"] .ivm-mmeta-other {
        color: #F5A24D;
    }
}

/* ==========================================================================
   V2 RIFINITURA DESIGN — toolbar mobile fedele (design 2a/2b: toggle sopra,
   titolo a sinistra, frecce a destra), etichette toggle abbreviate su phone,
   ordine voci Giorno·Sett.·Mese·Stag., dark ravvivato per i marker squadra.
   ========================================================================== */

/* Etichette doppie nei bottoni vista (blade): la corta vive solo su phone. */
.cal-view-btn .cal-vlbl-s {
    display: none;
}

@media (max-width: 1199.98px) {
    /* design V2: ordine del toggle = Giorno · Sett. · Mese · Stag. (· Lista),
       qualunque sia l'ordine DOM del blade. */
    .cal-view-switcher .cal-view-btn[data-view="timeGridDay"] {
        order: -4;
    }

    .cal-view-switcher .cal-view-btn[data-view="timeGridWeek"] {
        order: -3;
    }

    .cal-view-switcher .cal-view-btn[data-view="dayGridMonth"] {
        order: -2;
    }

    .cal-view-switcher .cal-view-btn[data-view="season"] {
        order: -1;
    }

    .cal-view-switcher .cal-view-btn[data-view="listWeek"] {
        order: 0;
    }
}

@media (max-width: 575.98px) {
    /* Etichette abbreviate su phone (design 2a: "Sett." / "Stag."). */
    .cal-view-btn .cal-vlbl-f {
        display: none;
    }

    .cal-view-btn .cal-vlbl-s {
        display: inline;
    }

    /* Toolbar fedele al design 2a: il toggle (toolbar-right) sopra, sotto la
       riga titolo con le frecce a destra. Niente "Today" su phone (il design
       non lo prevede; il rientro a oggi resta dal tap sul giorno in griglia). */
    .main-content:has(#calendar) .cal-toolbar {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .main-content:has(#calendar) .cal-toolbar-right {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .main-content:has(#calendar) .cal-view-switcher {
        flex: 1 1 auto !important;
        display: flex !important;
    }

    .main-content:has(#calendar) .cal-toolbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* Titolo prima ("Luglio 2025"), poi l'eventuale "+", frecce in coda. */
    .main-content:has(#calendar) .cal-toolbar-left .cal-current-month {
        order: -2;
        flex: 1 1 auto !important;
    }

    .main-content:has(#calendar) #addEventBtn.iv-mobile-calendar-add {
        order: -1;
    }

    .main-content:has(#calendar) .cal-icon-btn {
        width: 40px !important;
        flex: 0 0 40px !important;
    }

    .main-content:has(#calendar) .cal-today-btn {
        display: none !important;
    }

    /* design V2 dark (2b): colori-squadra dei marker e delle righe day-list
       ravvivati per contrasto sul fondo scuro (i colori arrivano inline dal
       feed: si alzano via filter, senza toccare i fallback token). */
    [data-theme="dark"] .ivm-evt,
    [data-theme="dark"] .ivm-row-dot,
    [data-theme="dark"] .ivm-row-time {
        filter: saturate(1.15) brightness(1.35);
    }
}

/* ==========================================================================
   V2 FIX POST-STAGING — griglia mese e vista Stagione su phone
   ========================================================================== */

/* mobile.css (≤767.98px) forza table:not(.responsive-card-table)
   { display:block } su TUTTE le tabelle: quelle interne di FullCalendar
   perdono il layout tabellare e si restringono a ~118px. Qui, dentro il
   solo calendario, si ripristina il display tabellare. */
@media (max-width: 767.98px) {
    .main-content:has(#calendar) .fc table {
        display: table !important;
    }
}

/* La hide della griglia FC in vista Stagione (.ivm-host.ivm-on
   .ivm-season-active .fc { display:none }) perde contro
   `.main-content:has(#calendar) #calendar { display:block !important }`,
   che con l'ID pesa di più. NB: #calendar È l'elemento .fc stesso
   (`#calendar .fc` non matcha mai): la hide va rifatta con la stessa
   catena della regola vincente + le classi stagione. */
@media (max-width: 575.98px) {
    .main-content:has(#calendar) .ivm-host.ivm-on.ivm-season-active #calendar {
        display: none !important;
    }
}