/* Mobile-first overrides for the authenticated dashboard experience. */

@media (max-width: 767.98px) {
    body {
        background: #f5f5f5;
        -webkit-tap-highlight-color: color-mix(in srgb, var(--role-accent-text, #0d5f6a) 16%, transparent);
    }

    .main-content {
        padding: 20px var(--iv-mobile-gutter);
        min-height: calc(100dvh - 60px);
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .dash-header {
        position: sticky;
        top: 0;
        z-index: 1040;
        padding: 10px var(--iv-mobile-gutter);
        min-height: 58px;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.12);
    }

    .header-left,
    .header-rightside,
    .header-profile {
        min-width: 0;
    }

    .header-rightside {
        gap: 8px !important;
        flex: 0 0 auto;
    }

    .header-left {
        width: auto;
        max-width: calc(100vw - 156px);
        flex: 1 1 auto;
    }

    .dash-header .main-logo img {
        width: auto;
        max-height: 46px;
    }

    .mobile-toggle,
    .search-icon,
    .notification-icon,
    .header-profile .dropdown button {
        min-width: var(--iv-touch-target);
        min-height: var(--iv-touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .notification-wrp .dropdown-toggle {
        min-height: var(--iv-touch-target);
        min-width: var(--iv-touch-target);
        padding: 6px 10px;
        border-radius: 10px;
        background: #f8fafc;
    }

    .notification-wrp .dropdown-menu,
    .header-profile .dropdown-menu {
        position: fixed !important;
        top: 58px !important;
        right: 10px !important;
        left: auto !important;
        max-width: calc(100vw - 20px);
        transform: none !important;
        border-radius: 12px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22) !important;
    }

    .header-profile .dropdown-item,
    .notification-wrp .dropdown-item {
        min-height: var(--iv-touch-target);
        display: flex;
        align-items: center;
        font-size: 14px;
    }

    .profile-picture,
    .header-profile img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .page-head,
    .al-page-head {
        align-items: stretch !important;
        margin-bottom: 16px !important;
    }

    .page-head > div,
    .al-page-head > div,
    .page-head .al-page-head-left,
    .al-page-head .al-page-head-left {
        width: 100%;
    }

    .page-head .btn,
    .page-head a.btn,
    .al-page-head .btn,
    .al-page-head a.btn,
    .page-head .primary-button,
    .al-page-head .primary-button {
        min-height: var(--iv-touch-target);
    }

    .card-head,
    .card-header,
    .at-card-head,
    .pe-card-header,
    .lv-card-header,
    .ti-card-header,
    .ph-card-header,
    .list-card-head,
    .wcard-head,
    .inner-title,
    .card-title {
        line-height: 1.25;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-body,
    .inner-card,
    .dash-box,
    .content-box,
    .list-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .dash-box,
    .coach-dashbox {
        min-height: 132px;
        gap: 12px;
        align-items: flex-start !important;
        background-size: cover !important;
    }

    .dash-box .inner-title,
    .dash-box h3,
    .dash-box h4,
    .dash-box .stat-value,
    .lv-stat-val,
    .pe-stat-val {
        font-size: clamp(22px, 8vw, 30px) !important;
        line-height: 1.05;
    }

    .dash-box p,
    .lv-stat-label,
    .pe-stat-label {
        font-size: 12px !important;
        line-height: 1.35;
    }

    .icon-circle,
    .lv-stat-icon,
    .pe-stat-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .lv-stat-grid,
    .pe-stat-grid,
    .ti-stat-grid,
    .ph-stat-grid,
    .at-stat-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .lv-stat-card,
    .pe-stat-card,
    .ti-stat-card,
    .ph-stat-card,
    .at-stat-card {
        padding: 14px !important;
        border-radius: 12px !important;
        min-width: 0;
    }

    .wcard,
    .pe-card,
    .lv-card,
    .ti-card,
    .ph-card,
    .at-card {
        border-radius: 12px !important;
        overflow: hidden;
    }

    .wcard-head,
    .pe-card-header,
    .lv-card-header,
    .ti-card-header,
    .ph-card-header,
    .at-card-head {
        padding: 12px 14px !important;
    }

    .pe-card-body,
    .lv-card-body,
    .ti-card-body,
    .ph-card-body,
    .at-card-body {
        padding: 14px !important;
    }

    .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .row > [class*="col-sm-"],
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"],
    .row > [class*="col-xxl-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .form-control,
    .form-select,
    .main-content input,
    .main-content select,
    .main-content textarea,
    .lv-form-control,
    .lv-form-select,
    .pe-textarea,
    .pe-filter-bar select,
    .pe-filter-bar input,
    .lv-filter-bar select,
    .lv-filter-bar input,
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        min-height: var(--iv-touch-target);
        font-size: 16px !important;
    }

    textarea.form-control,
    .main-content textarea {
        min-height: 96px;
    }

    .inputgroup,
    .inputfiled,
    .form-group,
    .lv-form-group,
    .pe-form-group,
    .mb-3,
    .mb-4 {
        min-width: 0;
    }

    .lv-form-grid,
    .pe-form-grid,
    .ti-form-grid,
    .ph-form-grid,
    .at-form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .lv-filter-bar,
    .pe-filter-bar,
    .ti-filter-bar,
    .ph-filter-bar,
    .at-filter-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .lv-filter-divider,
    .pe-filter-divider,
    .ti-filter-divider,
    .ph-filter-divider,
    .at-filter-divider {
        display: none !important;
    }

    .main-content button,
    .main-content .btn,
    .main-content a.btn,
    .primary-button,
    .secondary-button,
    .pe-btn,
    .lv-btn,
    .at-btn,
    .ti-btn,
    .ph-btn,
    .cal-btn,
    .cal-view-btn,
    .btn-primary,
    .btn-secondary,
    .action-btn,
    .paginate_button {
        min-width: var(--iv-touch-target);
        min-height: var(--iv-touch-target);
    }

    .primary-button,
    .secondary-button,
    .pe-btn,
    .lv-btn,
    .at-btn,
    .ti-btn,
    .ph-btn {
        justify-content: center;
        white-space: normal;
        line-height: 1.25;
    }

    .page-head .primary-button,
    .al-page-head .primary-button,
    .lv-page-head .lv-btn,
    .pe-page-head .pe-btn,
    .at-page-head .at-btn {
        width: 100%;
    }

    .action-button,
    .table-actions,
    td:last-child {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100%;
        margin: 6px 0 0 !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        justify-content: flex-start !important;
    }

    .table-responsive {
        border-radius: 12px !important;
        max-width: 100%;
    }

    .table-responsive[style],
    .lv-table-wrap,
    .pe-table-wrap,
    .ti-table-wrap,
    .ph-table-wrap,
    .at-table-wrap {
        max-height: none !important;
        height: auto !important;
        overflow-x: visible !important;
    }

    .table-responsive table td,
    .table-responsive table th {
        padding: 10px 12px !important;
    }

    table.responsive-card-table {
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 12px !important;
    }

    table.responsive-card-table thead {
        display: none;
    }

    table.responsive-card-table,
    table.responsive-card-table tbody,
    table.responsive-card-table tr,
    table.responsive-card-table td {
        display: block;
        width: 100% !important;
    }

    table.responsive-card-table tr {
        margin-bottom: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    }

    table.responsive-card-table td {
        min-height: var(--iv-touch-target);
        white-space: normal !important;
        display: grid;
        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        border-bottom: 1px solid #eef2f7 !important;
        background-color: #fff !important;
    }

    table.responsive-card-table td::before {
        content: attr(data-label);
        color: var(--iv-text-2, #64748b);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
    }

    table.responsive-card-table td:empty::after {
        content: "-";
        color: var(--iv-muted, #6b7280);
    }

    table.responsive-card-table td:last-child {
        border-bottom: 0 !important;
    }

    table.responsive-card-table td.dataTables_empty {
        display: block;
        text-align: center;
    }

    table.responsive-card-table td.dataTables_empty::before {
        display: none;
    }

    .members-table {
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    .members-table thead {
        display: none;
    }

    .members-table,
    .members-table tbody,
    .members-table tr,
    .members-table td {
        display: block;
        width: 100% !important;
    }

    .members-table tr {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .members-table td {
        white-space: normal !important;
        padding: 10px 12px !important;
        min-height: var(--iv-touch-target);
    }

    .list-row,
    .team-row,
    .activity-row,
    .notification-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .list-row > *,
    .team-row > *,
    .activity-row > *,
    .notification-item > * {
        min-width: 0;
    }

    .modal-dialog,
    .modal-dialog.modal-sm,
    .modal-dialog.modal-md,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0 !important;
    }

    .modal-content {
        min-height: 100dvh;
        max-height: 100dvh;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .modal-header,
    .modal-footer {
        flex-shrink: 0;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        gap: 8px;
        flex-wrap: wrap;
    }

    .modal-footer .btn,
    .modal-footer button {
        flex: 1 1 140px;
    }

    .kpi-modal,
    .attendance-modal-container,
    .lv-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .kpi-modal-head,
    .attendance-modal-header,
    .lv-modal-header {
        padding: 14px 16px !important;
    }

    .kpi-modal-body,
    .attendance-modal-body,
    .lv-modal-body {
        padding: 14px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .kpi-modal-foot,
    .attendance-modal-footer,
    .lv-modal-footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .kpi-modal-close,
    .attendance-modal-close-btn,
    .lv-modal-close {
        min-width: var(--iv-touch-target) !important;
        min-height: var(--iv-touch-target) !important;
    }

    .fc {
        font-size: 13px;
    }

    .fc .fc-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 8px;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .fc .fc-button {
        min-height: 40px;
        padding: 6px 10px;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 72px;
    }

    .fc .fc-list-event-title,
    .fc .fc-event-title {
        overflow-wrap: anywhere;
    }

    .cal-shell,
    .cal-layout,
    .cal-grid,
    .calendar-layout,
    .calendar-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cal-sidebar,
    .calendar-sidebar,
    .cal-panel,
    .calendar-panel {
        width: 100% !important;
        max-width: 100% !important;
    }

    .cal-toolbar,
    .calendar-toolbar,
    .cal-view-switcher,
    .cal-view-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 2px;
    }

    .cal-toolbar::-webkit-scrollbar,
    .calendar-toolbar::-webkit-scrollbar,
    .cal-view-switcher::-webkit-scrollbar,
    .cal-view-tabs::-webkit-scrollbar {
        display: none;
    }

    .cal-view-btn,
    .cal-toolbar button,
    .calendar-toolbar button {
        flex: 0 0 auto;
    }

    .mini-cal-grid {
        gap: 4px !important;
    }

    .mini-cal-grid > * {
        min-height: 34px;
        display: grid;
        place-items: center;
        border-radius: 8px;
    }

    .cal-legend,
    .cal-legend-list {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .analytics-profile-info,
    .cover-profile {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .analytics-profile-info .primary-button,
    .cover-profile .primary-button,
    .edit-button,
    .invite-button {
        width: 100%;
    }

    .user-profile,
    .cover-profile img,
    .analytics-profile-info img {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
    }

    .cover-profile h1,
    .cover-profile h2,
    .cover-profile h3,
    .analytics-profile-info h1,
    .analytics-profile-info h2,
    .analytics-profile-info h3 {
        font-size: 20px !important;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .main-content .nav-pills,
    .main-content .nav-tabs,
    .calendar-tabs,
    .view-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .main-content .nav-pills::-webkit-scrollbar,
    .main-content .nav-tabs::-webkit-scrollbar,
    .calendar-tabs::-webkit-scrollbar,
    .view-tabs::-webkit-scrollbar {
        display: none;
    }

    .main-content .nav-pills .nav-link,
    .main-content .nav-tabs .nav-link,
    .calendar-tabs > *,
    .view-tabs > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Final users management toolbar override. */
@media (max-width: 767.98px) {
    .users-management-page > .page-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page > .page-head > * {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page .management-filter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        align-items: center !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page .management-filter > * {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page .management-filter .select-field {
        grid-column: auto !important;
    }

    .users-management-page .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 190px) !important;
        max-width: 190px !important;
    }

    .users-management-page .users-create-button,
    .users-management-page .users-export-dropdown {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .users-management-page .users-create-button,
    .users-management-page .users-export-dropdown .dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .users-management-page .users-export-dropdown .dropdown {
        width: 100% !important;
    }

    .users-management-page .table-data {
        margin-top: 16px !important;
    }
}

/* Users management mobile toolbar: direct class selectors, no :has dependency. */
@media (max-width: 767.98px) {
    .users-management-page > .page-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
        overflow: visible !important;
    }

    .users-management-page > .page-head > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .users-management-page .management-filter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .users-management-page .management-filter > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .users-management-page .management-filter .select-field {
        grid-column: auto !important;
    }

    .users-management-page .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 190px) !important;
        max-width: 190px !important;
    }

    .users-management-page .users-create-button,
    .users-management-page .users-export-dropdown {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .users-management-page .users-create-button,
    .users-management-page .users-export-dropdown .dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .users-management-page .users-export-dropdown .dropdown {
        width: 100% !important;
    }

    .users-management-page .table-data {
        margin-top: 16px !important;
    }
}

/* Mobile listing actions: Create and Export in one stable row. */
@media (max-width: 767.98px) {
    .main-content:has(table.responsive-card-table) .management-filter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter .select-field {
        grid-column: auto !important;
        width: 100% !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 190px) !important;
        max-width: 190px !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter .iv-listing-create-action,
    .main-content:has(table.responsive-card-table) .management-filter .iv-listing-export-action {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        z-index: auto !important;
        align-self: stretch !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter .iv-listing-create-action,
    .main-content:has(table.responsive-card-table) .management-filter .iv-listing-export-action .dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 9px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter .iv-listing-export-action .dropdown {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .main-content:has(table.responsive-card-table) > .iv-listing-export-action {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .main-content:has(table.responsive-card-table) .table-data {
        margin-top: 16px !important;
    }
}

/* DataTable/listing responsive V2: consistent card UI for mobile and tablets. */
@media (max-width: 991.98px) {
    body:has(table.responsive-card-table) {
        background-color: #f3f6fa;
    }

    .main-content:has(table.responsive-card-table) {
        background-color: #f3f6fa;
    }

    .dataTables_wrapper,
    .table-data:has(table.responsive-card-table) {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .dataTables_wrapper .table-responsive,
    .table-data:has(table.responsive-card-table) .table-responsive {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    table.responsive-card-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 13px !important;
        background: transparent !important;
    }

    table.responsive-card-table thead,
    table.responsive-card-table colgroup {
        display: none !important;
    }

    table.responsive-card-table tbody,
    table.responsive-card-table tr,
    table.responsive-card-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    table.responsive-card-table tbody {
        background: transparent !important;
    }

    table.responsive-card-table tr {
        overflow: hidden !important;
        margin: 0 0 13px !important;
        border: 1px solid #e1e8f0 !important;
        border-radius: 15px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .075) !important;
    }

    table.responsive-card-table td {
        min-height: 39px !important;
        padding: 9px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(108px, 36%) minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        border: 0 !important;
        border-bottom: 1px solid #edf2f7 !important;
        background: #fff !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    table.responsive-card-table td::before {
        content: attr(data-label);
        color: #314f6b !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: .045em !important;
        text-transform: uppercase !important;
    }

    table.responsive-card-table td.iv-card-primary-cell {
        min-height: 48px !important;
    }

    table.responsive-card-table td.iv-card-media-cell {
        min-height: 58px !important;
    }

    table.responsive-card-table td:last-child {
        border-bottom: 0 !important;
    }

    table.responsive-card-table td.iv-card-empty-cell::after {
        content: "-";
        color: var(--iv-muted, #6b7280);
    }

    table.responsive-card-table td.iv-card-action-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        background: #fbfdff !important;
    }

    table.responsive-card-table td.iv-card-action-cell::before {
        margin-right: auto !important;
    }

    table.responsive-card-table .action-button,
    table.responsive-card-table .table-actions,
    table.responsive-card-table .dt-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
    }

    table.responsive-card-table .action-btn,
    table.responsive-card-table a.action-btn,
    table.responsive-card-table button.action-btn,
    table.responsive-card-table .btn-icon,
    table.responsive-card-table td.iv-card-action-cell > a,
    table.responsive-card-table td.iv-card-action-cell > button {
        width: 31px !important;
        min-width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    table.responsive-card-table td.iv-card-media-cell img,
    table.responsive-card-table td.iv-card-media-cell .table-profile,
    table.responsive-card-table td.iv-card-media-cell .profile-picture,
    table.responsive-card-table td.iv-card-media-cell .user-profile,
    table.responsive-card-table td.iv-card-media-cell .rounded-circle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    table.responsive-card-table td.iv-card-status-cell .status,
    table.responsive-card-table td.iv-card-status-cell .badge,
    table.responsive-card-table td.iv-card-status-cell .status-badge {
        min-width: 76px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 4px 13px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    table.responsive-card-table td.dataTables_empty {
        display: block !important;
        padding: 22px 16px !important;
        text-align: center !important;
        color: #64748b !important;
    }

    table.responsive-card-table td.dataTables_empty::before {
        display: none !important;
    }

    .dataTables_wrapper .dt-top,
    .dataTables_wrapper .dt-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        align-items: stretch !important;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dt-info,
    .dataTables_wrapper .dt-pagination,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100% !important;
        color: #64748b !important;
        font-size: 11px !important;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        min-height: 42px !important;
        margin: 6px 0 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #0f172a !important;
        font-size: 12px !important;
    }

    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dataTables_paginate {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 7px !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dt-info {
        color: var(--iv-text-2, #64748b) !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 40px !important;
        min-height: 44px !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    table.responsive-card-table {
        display: grid !important;
    }

    table.responsive-card-table tbody {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    table.responsive-card-table tr {
        margin: 0 !important;
    }

    table.responsive-card-table td {
        grid-template-columns: minmax(112px, 35%) minmax(0, 1fr) !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Final calendar and navigation conflict polish for mobile/tablet. */
@media (max-width: 1199.98px) {
    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 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateX(-110%) !important;
        pointer-events: none !important;
    }

    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;
    }

    body.iv-bottom-nav-ready {
        overflow-x: hidden !important;
    }

    .main-content:has(#calendar) {
        padding-inline: 12px !important;
        padding-bottom: 112px !important;
        overflow-x: hidden !important;
    }

    .main-content:has(#calendar) .page-head,
    .main-content:has(#calendar) .dash-title,
    .main-content:has(#calendar) .dash-subtitle {
        max-width: 100% !important;
    }

    .main-content:has(#calendar) .page-head > .d-flex,
    .main-content:has(#calendar) .d-flex.align-items-center.justify-content-between {
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .cal-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 10px !important;
    }

    .cal-sidebar {
        display: none !important;
    }

    .cal-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
        overflow: hidden !important;
    }

    .cal-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        background: #fff !important;
        border-bottom: 1px solid rgba(226, 232, 240, .88) !important;
        overflow: visible !important;
    }

    .cal-toolbar-left,
    .cal-toolbar-right {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .cal-toolbar-left {
        display: grid !important;
        grid-template-columns: 32px 32px minmax(0, 1fr) auto !important;
    }

    .cal-toolbar-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .cal-current-month {
        min-width: 0 !important;
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cal-icon-btn,
    .cal-today-btn,
    .cal-btn,
    .cal-view-btn {
        min-height: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .cal-icon-btn {
        width: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
    }

    .cal-today-btn,
    .cal-btn {
        padding: 0 10px !important;
    }

    .cal-view-switcher {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 3px !important;
        border: 1px solid rgba(226, 232, 240, .9) !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        overflow: hidden !important;
    }

    .cal-view-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 4px !important;
        border: 0 !important;
        background: transparent !important;
        color: #475569 !important;
    }

    .cal-view-btn.active,
    .cal-view-btn[aria-pressed="true"] {
        background: #fff !important;
        color: var(--role-accent-text, #0b8f91) !important;
        box-shadow: 0 1px 5px rgba(15, 23, 42, .1) !important;
    }

    .cal-body {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 8px 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #calendar,
    #calendar .fc,
    .fc {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 10px !important;
    }

    .fc .fc-view-harness,
    .fc .fc-scroller,
    .fc .fc-scroller-liquid-absolute {
        min-height: 0 !important;
        overflow: visible !important;
    }

    .fc-theme-standard .fc-scrollgrid,
    .fc-theme-standard td,
    .fc-theme-standard th {
        border-color: rgba(226, 232, 240, .95) !important;
    }

    .fc .fc-col-header-cell-cushion {
        display: block !important;
        padding: 6px 2px !important;
        color: var(--role-accent-text, #0b8f91) !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 58px !important;
        padding: 2px !important;
    }

    .fc .fc-daygrid-day-top {
        justify-content: flex-end !important;
    }

    .fc .fc-daygrid-day-number {
        padding: 3px 4px !important;
        color: #0f172a !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    .fc .fc-day-today {
        background: rgba(11, 143, 145, .06) !important;
    }

    .fc .fc-day-today .fc-daygrid-day-number {
        width: 20px !important;
        height: 20px !important;
        margin: 2px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--role-accent-text, #0b8f91) !important;
        color: #fff !important;
    }

    /* dark: vincolato a [data-role] come i guard di mobile-calendar.css —
       senza ruolo --role-accent-text resta teal SCURO anche in dark
       e il bianco baseline è quello giusto. */
    [data-theme="dark"][data-role] .fc .fc-day-today .fc-daygrid-day-number,
    [data-theme="dark"] [data-role] .fc .fc-day-today .fc-daygrid-day-number {
        color: var(--role-accent-on, #0E1D21) !important;
    }

    .fc .fc-daygrid-event,
    .fc .fc-timegrid-event {
        margin: 1px 0 !important;
        padding: 1px 3px !important;
        border-radius: 4px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
    }

    .fc .fc-event-main {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .fc .fc-event-title {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fc .fc-daygrid-more-link {
        color: var(--role-accent-text, #0b8f91) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        text-decoration: none !important;
    }

    .fc .fc-timegrid-axis,
    .fc .fc-timegrid-slot-label {
        width: 42px !important;
        max-width: 42px !important;
        color: #64748b !important;
        font-size: 9px !important;
        font-weight: 800 !important;
    }

    .fc .fc-timegrid-slot {
        height: 34px !important;
    }

    .fc .fc-timegrid-col-frame {
        min-width: 0 !important;
    }

    .fc .fc-list {
        border: 0 !important;
    }

    .fc .fc-list-table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    .fc .fc-list-day-cushion {
        padding: 7px 8px !important;
        background: #f8fafc !important;
        color: var(--role-accent-text, #0b8f91) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
    }

    .fc .fc-list-event td {
        padding: 7px 6px !important;
        font-size: 10px !important;
        vertical-align: middle !important;
    }

    .fc .fc-list-event-time {
        width: 58px !important;
        max-width: 58px !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .fc .fc-list-event-title,
    .fc .fc-list-event-title a {
        color: #0f172a !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
    .main-content:has(#calendar) {
        padding-inline: 16px !important;
    }

    .cal-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
        align-items: center !important;
    }

    .cal-toolbar-left {
        grid-template-columns: 36px 36px minmax(0, 1fr) auto !important;
    }

    .cal-icon-btn,
    .cal-today-btn,
    .cal-btn,
    .cal-view-btn {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 11px !important;
    }

    .cal-icon-btn {
        width: 36px !important;
        min-width: 36px !important;
    }

    .cal-current-month {
        font-size: 17px !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 82px !important;
    }

    .fc .fc-timegrid-slot {
        height: 42px !important;
    }
}

@media (max-width: 575.98px) {
    .main-content:has(#calendar) {
        padding-inline: 8px !important;
    }

    .cal-toolbar-right {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cal-toolbar-right > .cal-btn,
    .cal-toolbar-right > .cal-btn-primary,
    .cal-toolbar-right > .cal-btn-outline {
        width: 100% !important;
        justify-content: center !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 52px !important;
    }

    .main-content:has(#calendar) .cal-main {
        min-height: calc(100dvh - 190px) !important;
    }

    .main-content:has(#calendar) .cal-body {
        min-height: calc(100dvh - 300px) !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: 360px !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: 360px !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: 360px !important;
    }

    .main-content:has(#calendar) .fc .fc-daygrid,
    .main-content:has(#calendar) .fc .fc-timegrid,
    .main-content:has(#calendar) .fc .fc-list {
        min-height: 360px !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;
    }
}

/* Last-word phone FullCalendar render fix: Month/Week/Day must not collapse. */
@media (max-width: 575.98px) {
    .main-content:has(#calendar) .cal-main {
        min-height: calc(100dvh - 190px) !important;
    }

    .main-content:has(#calendar) .cal-body {
        min-height: calc(100dvh - 300px) !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: 360px !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: 360px !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: 360px !important;
    }

    .main-content:has(#calendar) .fc .fc-daygrid,
    .main-content:has(#calendar) .fc .fc-timegrid,
    .main-content:has(#calendar) .fc .fc-list {
        min-height: 360px !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;
    }
}

/* Phone-only FullCalendar render fix: prevent Month/Week/Day from collapsing. */
@media (max-width: 575.98px) {
    .main-content:has(#calendar) .cal-main {
        min-height: calc(100dvh - 190px) !important;
    }

    .main-content:has(#calendar) .cal-body {
        min-height: calc(100dvh - 300px) !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: 360px !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: 360px !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: 360px !important;
    }

    .main-content:has(#calendar) .fc .fc-daygrid,
    .main-content:has(#calendar) .fc .fc-timegrid,
    .main-content:has(#calendar) .fc .fc-list {
        min-height: 360px !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-daygrid-day-frame {
        min-height: 50px !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;
    }
}

@media (max-width: 575.98px) {
    .main-content {
        padding: 16px 10px;
    }

    .dash-header {
        padding: 8px 10px;
    }

    .dash-header .main-logo img {
        max-height: 40px;
        max-width: 132px;
        object-fit: contain;
    }

    .mobile-menu {
        width: min(92vw, 340px) !important;
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
        overflow: hidden;
    }

    .mobile-menu .sidebar .menu-item {
        border-radius: 12px;
        margin-bottom: 4px;
        padding: 10px 12px;
    }

    .mobile-menu .sidebar .menu-item span,
    .mobile-menu .sidebar .dropdown-item {
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .mobile-menu .sidebar .dropdown-menu {
        padding-left: 12px;
    }

    .mobile-menu .offcanvas-header {
        min-height: 64px;
        padding: 10px 14px;
    }

    .mobile-menu .offcanvas-header img {
        max-height: 44px;
        width: auto;
    }

    .mobile-searchbar {
        left: 8px;
        right: 8px;
        width: auto;
    }

    .notification-dropdown {
        max-width: calc(100vw - 20px);
    }

    .card-body,
    .inner-card,
    .dash-box,
    .content-box,
    .list-card {
        padding: 12px !important;
    }

    .card-head {
        padding: 12px !important;
    }

    .card-title,
    .inner-title,
    .wcard-title,
    .pe-page-head h2,
    .lv-page-head h2,
    .at-page-head h2,
    .page-head h1,
    .page-head h2,
    .al-page-head h1,
    .al-page-head h2 {
        font-size: clamp(18px, 5vw, 22px) !important;
    }

    .main-content p,
    .main-content li,
    .main-content td,
    .main-content th,
    .main-content label,
    .main-content .form-label {
        font-size: 14px;
    }

    table.responsive-card-table td {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    table.responsive-card-table td::before {
        font-size: 11px;
        text-transform: uppercase;
    }

    .lv-stat-grid,
    .pe-stat-grid,
    .ti-stat-grid,
    .ph-stat-grid,
    .at-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-box,
    .coach-dashbox {
        min-height: 116px;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 58px;
    }

    .dataTables_paginate .paginate_button.previous,
    .dataTables_paginate .paginate_button.next {
        flex: 1 1 auto;
    }
}

@media (max-width: 380px) {
    .header-rightside {
        gap: 4px !important;
    }

    .mobile-toggle,
    .search-icon,
    .notification-icon,
    .header-profile .dropdown button {
        min-width: 38px;
        min-height: 38px;
    }

    .profile-picture,
    .header-profile img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }
}

/* Forceful mobile app compatibility layer.
   This intentionally wins over page-level inline/dashboard CSS below tablet size. */
@media (max-width: 767.98px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overscroll-behavior-x: none;
    }

    body {
        font-size: 14px !important;
        line-height: 1.45;
    }

    body > .sidebar,
    body > aside.sidebar,
    body > nav.sidebar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-menu,
    .mobile-menu .sidebar {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .dash-header,
    .main-content,
    .copyright-wrp,
    body.sidebar-collapse .dash-header,
    body.sidebar-collapse .main-content,
    body.sidebar-collapse .copyright-wrp {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .dash-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .dash-header * {
        min-width: 0;
    }

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

    .header-rightside {
        margin-left: auto;
    }

    .wlcm-title,
    .tgl-button,
    .head-searchbar,
    .header-profile .d-lg-block,
    .header-profile p,
    .header-profile span:not(.dropdown-item span) {
        display: none !important;
    }

    .mobile-toggle {
        border-radius: 10px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
    }

    .mobile-searchbar,
    .searchbar-collapse .mobile-searchbar {
        position: fixed !important;
        top: 58px !important;
        left: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        width: auto !important;
        padding: 10px !important;
        border-radius: 12px;
        background: #ffffff !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
        z-index: 1050;
    }

    .mobile-searchbar .inputgroup {
        max-width: none !important;
        width: 100%;
    }

    .main-content,
    .main-content *,
    .modal *,
    .offcanvas * {
        max-width: 100%;
    }

    .main-content > *,
    .main-content section,
    .main-content article,
    .main-content .container,
    .main-content .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .container,
    .container-fluid {
        padding-left: var(--iv-mobile-gutter) !important;
        padding-right: var(--iv-mobile-gutter) !important;
    }

    .main-content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-content .row > * {
        min-width: 0 !important;
    }

    .main-content [class*="col-"] {
        max-width: 100%;
    }

    .main-content [style*="width:"] {
        max-width: 100% !important;
    }

    .main-content [style*="min-width"] {
        min-width: 0 !important;
    }

    .main-content [style*="margin-left"] {
        margin-left: 0 !important;
    }

    .main-content [style*="margin-right"] {
        margin-right: 0 !important;
    }

    .main-content [style*="height:"] {
        max-height: none;
    }

    h1,
    .h1 {
        font-size: clamp(22px, 6vw, 28px) !important;
    }

    h2,
    .h2 {
        font-size: clamp(20px, 5.5vw, 24px) !important;
    }

    h3,
    .h3 {
        font-size: clamp(15px, 4vw, 21px) !important;
    }

    h4,
    h5,
    h6,
    .h4,
    .h5,
    .h6 {
        font-size: clamp(15px, 4.2vw, 18px) !important;
    }

    p,
    li,
    label,
    small,
    span,
    a,
    button,
    input,
    select,
    textarea,
    td,
    th {
        letter-spacing: 0 !important;
    }

    .main-content svg,
    .main-content i,
    .modal svg,
    .modal i,
    .offcanvas svg,
    .offcanvas i {
        flex-shrink: 0;
    }

    .main-content button svg,
    .main-content .btn svg,
    .primary-button svg,
    .secondary-button svg,
    .action-btn svg {
        width: 18px;
        height: 18px;
    }

    .kpi-row,
    .dash-grid,
    .dash-left,
    .dash-right,
    .kpi-grid,
    .stats-grid,
    .stat-grid,
    .summary-grid,
    .analytics-grid,
    .cards-grid,
    .tgrid,
    .calgrid,
    .sb-grid,
    .sub-grid,
    .mi-stat-grid,
    .training-grid,
    .team-grid,
    .club-grid,
    .feature-grid,
    .module-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .kpi-row,
    .stats-grid,
    .stat-grid,
    .summary-grid,
    .sb-grid,
    .mi-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .welcome-card,
    .kpi-card,
    .stat-card,
    .summary-card,
    .module-card,
    .team-card,
    .club-card,
    .feature-card,
    .training-card,
    .restricted-card,
    .discover-info,
    .content-box,
    .wcard,
    .inner-card,
    .dash-box,
    .list-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden;
    }

    .welcome-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .welcome-name,
    .kpi-val,
    .kpi-value,
    .stat-value,
    .summary-value {
        font-size: clamp(22px, 7vw, 30px) !important;
        line-height: 1.05 !important;
    }

    .kpi-card,
    .stat-card,
    .summary-card {
        min-height: 108px;
        padding: 12px !important;
    }

    .card-head-right,
    .page-actions,
    .actions,
    .toolbar,
    .filter-actions,
    .button-group,
    .btn-group:not(.fc .btn-group) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100%;
    }

    .card-head-right > *,
    .page-actions > *,
    .actions > *,
    .toolbar > *,
    .filter-actions > *,
    .button-group > * {
        min-width: var(--iv-touch-target);
    }

    .scroll-list,
    .scroll-table,
    .card-scroll,
    .canvas-wrap,
    .cw {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .canvas-wrap,
    .cw {
        min-height: 190px !important;
    }

    canvas {
        width: 100% !important;
        max-width: 100% !important;
    }

    .date-bubbles,
    .energy-row,
    .rating-row,
    .star-row,
    .calendar-strip,
    .quick-actions,
    .chip-row,
    .badge-row {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .date-bubbles::-webkit-scrollbar,
    .energy-row::-webkit-scrollbar,
    .rating-row::-webkit-scrollbar,
    .star-row::-webkit-scrollbar,
    .calendar-strip::-webkit-scrollbar,
    .quick-actions::-webkit-scrollbar,
    .chip-row::-webkit-scrollbar,
    .badge-row::-webkit-scrollbar {
        display: none;
    }

    .date-bubble,
    .energy-btn,
    .chip,
    .badge,
    .status,
    .lv-badge,
    .pe-badge {
        flex: 0 0 auto;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sched-item,
    .tl-item,
    .mi-session,
    .mi-match,
    .act-item,
    .sub-item,
    .today-card,
    .cal-card,
    .team-hero,
    .tcard {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .sched-info,
    .tl-body,
    .mi-body,
    .act-body,
    .sub-body,
    .today-body,
    .ctb,
    .tb,
    .ri,
    .row-info,
    .team-hero-body {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .sched-name,
    .tl-title,
    .mi-title,
    .rt,
    .row-title,
    .tbn,
    .team-hero-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }

    .table-data,
    .table-responsive,
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollHead,
    .dataTables_scrollBody,
    .dataTables_scrollFoot {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .dataTables_scrollBody {
        height: auto !important;
        max-height: none !important;
    }

    table {
        max-width: 100% !important;
    }

    table:not(.responsive-card-table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.responsive-card-table {
        display: block !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .dataTables_wrapper .dataTables_info {
        white-space: normal !important;
        line-height: 1.4;
    }

    .dt-buttons,
    .dataTables_wrapper .dt-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100%;
    }

    .dt-buttons .btn,
    .dt-button {
        min-height: var(--iv-touch-target) !important;
        flex: 1 1 120px;
    }

    .fc,
    .fc-view-harness,
    .fc-scroller,
    .fc-scroller-liquid-absolute {
        max-width: 100% !important;
        overflow: visible !important;
    }

    .fc-view-harness {
        height: auto !important;
        min-height: 420px;
    }

    .fc-scroller-liquid-absolute {
        position: relative !important;
    }

    .fc-header-toolbar,
    .fc-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .fc-toolbar-title {
        font-size: 18px !important;
        text-align: left;
    }

    .fc .fc-button-group,
    .fc .fc-toolbar-chunk {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .fc .fc-button-group::-webkit-scrollbar,
    .fc .fc-toolbar-chunk::-webkit-scrollbar {
        display: none;
    }

    .fc .fc-button {
        flex: 0 0 auto;
        min-width: var(--iv-touch-target);
        min-height: var(--iv-touch-target);
        font-size: 13px !important;
    }

    .fc-theme-standard td,
    .fc-theme-standard th {
        font-size: 12px !important;
    }

    .modal,
    .modal.show {
        padding: 0 !important;
    }

    .modal-dialog[style] {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
    }

    .modal-body [style*="max-height"],
    .modal-body [style*="height"] {
        max-height: none !important;
    }

    .offcanvas-backdrop,
    .modal-backdrop {
        touch-action: none;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-dropdown {
        max-width: calc(100vw - 20px) !important;
    }

    .tox.tox-tinymce,
    .tox-editor-container,
    .tox-edit-area {
        width: 100% !important;
        max-width: 100% !important;
    }

    .toast,
    #toast-container,
    .swal2-container {
        max-width: 100vw !important;
    }
}

@media (max-width: 420px) {
    .kpi-row,
    .stats-grid,
    .stat-grid,
    .summary-grid,
    .sb-grid,
    .mi-stat-grid {
        grid-template-columns: 1fr !important;
    }

    .header-left {
        max-width: calc(100vw - 132px);
    }

    .dash-header .main-logo img {
        max-width: 104px;
    }

    .notification-wrp .dropdown-toggle {
        padding-left: 8px;
        padding-right: 8px;
    }

    #current-lang {
        max-width: 28px;
        overflow: hidden;
    }
}

/* Consistency pass: compact mobile SaaS controls while preserving the existing theme. */
@media (max-width: 767.98px) {
    /* Invariante R1: su body, non :root. Il flip dark e' [data-theme="dark"] su
       <body>: su :root (=<html>) var(--iv-*) prende il ramo chiaro e ci resta. */
    body {
        --iv-touch-target: 38px;
        --iv-mobile-radius: 10px;
        /* Riconciliati sul guscio neutro (role-accents.css): alias, non duplicati.
           Così ereditano anche la variante scura via [data-theme="dark"]. */
        --iv-mobile-border: var(--iv-border, #e5e7eb);
        --iv-mobile-muted: var(--iv-muted, #64748b);
        --iv-mobile-text: var(--iv-text, #111827);
    }

    .dash-header {
        min-height: 54px !important;
        padding: 7px 10px !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08) !important;
    }

    .header-left {
        max-width: calc(100vw - 138px) !important;
        gap: 6px !important;
    }

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

    .mobile-toggle,
    .search-icon,
    .notification-icon,
    .notification-wrp .dropdown-toggle,
    .header-profile .dropdown button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 9px !important;
        padding: 0 !important;
    }

    .mobile-toggle svg,
    .search-icon svg,
    .notification-icon svg,
    .header-profile .dropdown button svg {
        width: 16px !important;
        height: 16px !important;
    }

    .notification-wrp .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 11px !important;
        color: var(--iv-mobile-text);
    }

    .notification-wrp .dropdown-toggle .fa-angle-down {
        display: none;
    }

    #current-lang {
        font-size: 11px !important;
        line-height: 1;
    }

    .profile-picture,
    .header-profile img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 12px !important;
    }

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

    .mobile-searchbar,
    .searchbar-collapse .mobile-searchbar {
        top: 54px !important;
        padding: 8px !important;
        border: 1px solid var(--iv-mobile-border);
        border-radius: var(--iv-mobile-radius);
    }

    .mobile-searchbar .form-control {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
    }

    .mobile-menu {
        background: var(--role-sidebar, #10606D) !important;
        color: #fff;
    }

    .mobile-menu .offcanvas-header {
        background: #fff !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        min-height: 58px !important;
        padding: 8px 12px !important;
    }

    .mobile-menu .offcanvas-body,
    .mobile-menu .sidebar {
        background: var(--role-sidebar, #10606D) !important;
    }

    .mobile-menu .sidebar-menu {
        padding: 12px 0 20px 12px !important;
    }

    .mobile-menu .sidebar .menu-item {
        min-height: 38px !important;
        padding: 9px 12px !important;
        gap: 12px !important;
        border-radius: 22px 0 0 22px !important;
        color: #fff !important;
        background: transparent !important;
        font-size: 13px !important;
    }

    .mobile-menu .sidebar .menu-item.active {
        background: #f5f5f5 !important;
        color: var(--secondary-color) !important;
    }

    .mobile-menu .sidebar .menu-item:hover,
    .mobile-menu .sidebar .menu-item.show {
        color: var(--role-accent, var(--primaryauth-color)) !important;
    }

    .mobile-menu .sidebar .menu-item svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px;
    }

    .mobile-menu .sidebar .menu-item span {
        font-size: 13px !important;
        line-height: 1.25;
    }

    .mobile-menu .sidebar .dropdown-menu {
        background: transparent !important;
        margin: 2px 0 8px 28px !important;
        padding: 0 !important;
    }

    .mobile-menu .sidebar .dropdown-item {
        min-height: 34px !important;
        padding: 7px 10px !important;
        color: rgba(255, 255, 255, 0.84) !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    .mobile-menu .sidebar .dropdown-item.active {
        background: rgba(245, 245, 245, 0.18) !important;
        color: #fff !important;
    }

    .main-content {
        padding: 12px 8px calc(14px + env(safe-area-inset-bottom)) !important;
    }

    .page-head,
    .al-page-head,
    .lv-page-head,
    .pe-page-head,
    .at-page-head {
        margin-bottom: 12px !important;
        gap: 8px !important;
    }

    .card-body,
    .inner-card,
    .dash-box,
    .content-box,
    .list-card,
    .wcard,
    .pe-card,
    .lv-card,
    .ti-card,
    .ph-card,
    .at-card {
        padding: 10px !important;
        border-radius: var(--iv-mobile-radius) !important;
    }

    .card-head,
    .card-header,
    .wcard-head,
    .pe-card-header,
    .lv-card-header,
    .ti-card-header,
    .ph-card-header,
    .at-card-head {
        padding: 10px !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .card-title,
    .inner-title,
    .wcard-title,
    .page-head h1,
    .page-head h2,
    .al-page-head h1,
    .al-page-head h2,
    .pe-page-head h2,
    .lv-page-head h2,
    .at-page-head h2 {
        font-size: 17px !important;
        line-height: 1.22 !important;
    }

    .main-content p,
    .main-content li,
    .main-content label,
    .main-content .form-label,
    .main-content td,
    .main-content th {
        font-size: 13px !important;
    }

    .form-control,
    .form-select,
    .main-content input,
    .main-content select,
    .main-content textarea,
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        min-height: 38px !important;
        font-size: 14px !important;
        border-radius: 9px !important;
    }

    .primary-button,
    .secondary-button,
    .btn,
    .main-content button,
    .pe-btn,
    .lv-btn,
    .at-btn,
    .ti-btn,
    .ph-btn,
    .cal-btn {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
        gap: 5px !important;
        line-height: 1.2 !important;
    }

    .page-head .primary-button,
    .al-page-head .primary-button,
    .lv-page-head .lv-btn,
    .pe-page-head .pe-btn,
    .at-page-head .at-btn {
        width: auto !important;
        flex: 1 1 auto;
    }

    .action-button,
    .table-actions,
    .dt-actions,
    .action-buttons,
    .btn-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .action-btn,
    .action-button .action-btn,
    .table-actions .action-btn,
    .dt-actions .action-btn,
    a.action-btn,
    button.action-btn,
    .btn-icon,
    .edit-btn,
    .delete-btn,
    .view-btn {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 30px !important;
    }

    .action-btn svg,
    .action-button .action-btn svg,
    .table-actions .action-btn svg,
    .dt-actions .action-btn svg,
    .btn-icon svg,
    .edit-btn svg,
    .delete-btn svg,
    .view-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    table.responsive-card-table {
        border-spacing: 0 8px !important;
    }

    table.responsive-card-table tr {
        margin-bottom: 8px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    }

    table.responsive-card-table td {
        min-height: 32px !important;
        padding: 7px 9px !important;
        grid-template-columns: minmax(78px, 34%) minmax(0, 1fr) !important;
        gap: 8px !important;
        font-size: 12px !important;
    }

    table.responsive-card-table td::before {
        font-size: 10px !important;
        letter-spacing: 0.02em !important;
        color: var(--iv-mobile-muted);
    }

    table.responsive-card-table td:last-child,
    table.responsive-card-table td[data-label*="Action"],
    table.responsive-card-table td[data-label*="action"],
    table.responsive-card-table td[data-label*="Options"],
    table.responsive-card-table td[data-label*="options"] {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    table.responsive-card-table td:last-child::before,
    table.responsive-card-table td[data-label*="Action"]::before,
    table.responsive-card-table td[data-label*="action"]::before,
    table.responsive-card-table td[data-label*="Options"]::before,
    table.responsive-card-table td[data-label*="options"]::before {
        flex: 0 0 auto;
        min-width: 72px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        font-size: 12px !important;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        height: 34px !important;
        min-height: 34px !important;
        font-size: 13px !important;
        padding: 5px 8px !important;
    }

    .dataTables_wrapper .dataTables_info {
        font-size: 11px !important;
        color: var(--iv-mobile-muted);
        margin: 6px 0 !important;
    }

    .dataTables_paginate .paginate_button {
        min-width: 40px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    .modal-dialog,
    .modal-content,
    .kpi-modal,
    .attendance-modal-container,
    .lv-modal {
        border-radius: 0 !important;
    }

    .modal-header,
    .modal-body,
    .modal-footer,
    .kpi-modal-head,
    .kpi-modal-body,
    .kpi-modal-foot,
    .attendance-modal-header,
    .attendance-modal-body,
    .attendance-modal-footer,
    .lv-modal-header,
    .lv-modal-body,
    .lv-modal-footer {
        padding: 10px 12px !important;
    }

    .fc-toolbar-title {
        font-size: 16px !important;
    }

    .fc .fc-button,
    .cal-view-btn,
    .cal-toolbar button,
    .calendar-toolbar button {
        min-height: 34px !important;
        min-width: 34px !important;
        padding: 5px 9px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 390px) {
    .header-left {
        max-width: calc(100vw - 126px) !important;
    }

    .dash-header .main-logo img {
        max-width: 92px !important;
    }

    .mobile-toggle,
    .search-icon,
    .notification-icon,
    .notification-wrp .dropdown-toggle,
    .header-profile .dropdown button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }

    .profile-picture,
    .header-profile img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    table.responsive-card-table td {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }
}

/* Mobile menu accordion safety: no overlapping floating dropdowns. */
@media (max-width: 991.98px) {
    .mobile-menu .sidebar,
    .mobile-menu .sidebar-menu,
    .mobile-menu .sidebar-menu li,
    .mobile-menu .sidebar .dropdown {
        overflow: visible !important;
    }

    .mobile-menu .sidebar .dropdown {
        position: relative !important;
    }

    .mobile-menu .sidebar .dropdown-menu {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        float: none !important;
        width: calc(100% - 12px) !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 0 !important;
        display: block !important;
        overflow: hidden !important;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.22s ease, opacity 0.18s ease;
    }

    .mobile-menu .sidebar .dropdown-menu.show {
        max-height: 420px !important;
        opacity: 1;
        visibility: visible;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu .sidebar .menu-item {
        cursor: pointer;
        touch-action: manipulation;
    }

    .mobile-menu .sidebar .menu-item .arrow {
        margin-left: auto;
        display: flex !important;
    }

    .mobile-menu .sidebar .menu-item.show .arrow,
    .mobile-menu .sidebar .menu-item[aria-expanded="true"] .arrow {
        transform: rotate(180deg);
    }
}

/* Mobile dropdowns, compact listings, and fitted popups. */
@media (max-width: 767.98px) {
    .main-content .dropdown-menu,
    .modal .dropdown-menu,
    .offcanvas .dropdown-menu {
        max-width: calc(100vw - 20px) !important;
        max-height: min(52dvh, 320px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px !important;
        font-size: 12px !important;
        z-index: 2060 !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18) !important;
    }

    .main-content .dropdown-item,
    .modal .dropdown-item,
    .offcanvas .dropdown-item {
        min-height: 34px !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        min-height: 36px !important;
        height: auto !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        min-height: 34px !important;
        line-height: 34px !important;
        padding-left: 10px !important;
        padding-right: 30px !important;
        font-size: 13px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 34px !important;
        right: 6px !important;
    }

    .select2-container--default .select2-selection--multiple {
        padding: 2px 5px !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin: 3px !important;
        padding: 2px 6px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }

    .select2-dropdown,
    .select2-container--open .select2-dropdown {
        z-index: 2070 !important;
        max-width: calc(100vw - 20px) !important;
        min-width: min(240px, calc(100vw - 20px)) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22) !important;
    }

    .select2-results__options {
        max-height: min(46dvh, 280px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .select2-results__option {
        min-height: 34px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .select2-search--dropdown {
        padding: 8px !important;
    }

    .select2-search__field {
        min-height: 34px !important;
        height: 34px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }

    .modal,
    .modal.show {
        padding: 10px !important;
    }

    .modal-dialog,
    .modal-dialog.modal-sm,
    .modal-dialog.modal-md,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog[style] {
        width: min(100%, 430px) !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 0 auto !important;
    }

    .modal-dialog-centered {
        min-height: calc(100dvh - 20px) !important;
        display: flex !important;
        align-items: center !important;
    }

    .modal-content,
    .kpi-modal,
    .attendance-modal-container,
    .lv-modal {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        min-height: auto !important;
        height: auto !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .modal-header,
    .kpi-modal-head,
    .attendance-modal-header,
    .lv-modal-header {
        min-height: 44px !important;
        padding: 9px 11px !important;
    }

    .modal-title,
    .kpi-modal-title,
    .attendance-modal-title,
    .lv-modal-header h3 {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .modal-body,
    .kpi-modal-body,
    .attendance-modal-body,
    .lv-modal-body {
        max-height: calc(100dvh - 128px) !important;
        overflow-y: auto !important;
        padding: 10px 11px !important;
        font-size: 12px !important;
    }

    .modal-footer,
    .kpi-modal-foot,
    .attendance-modal-footer,
    .lv-modal-footer {
        padding: 9px 11px !important;
        gap: 7px !important;
    }

    .modal-footer .btn,
    .modal-footer button {
        min-height: 34px !important;
        padding: 6px 9px !important;
        font-size: 12px !important;
        flex: 1 1 auto !important;
    }

    .btn-close,
    .kpi-modal-close,
    .attendance-modal-close-btn,
    .lv-modal-close {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
    }

    .swal2-popup,
    .swal2-modal,
    .adpop {
        width: min(430px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 12px !important;
        padding: 12px !important;
        overflow-y: auto !important;
    }

    .swal2-title {
        font-size: 15px !important;
    }

    .swal2-html-container {
        font-size: 12px !important;
        margin: 8px 0 !important;
    }

    .swal2-actions {
        gap: 7px !important;
        margin: 10px 0 0 !important;
        flex-wrap: wrap !important;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        min-height: 34px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        flex: 1 1 auto;
    }

    .dataTables_wrapper .dataTables_length {
        display: none !important;
    }

    .dataTables_wrapper .dataTables_filter {
        width: 100% !important;
        margin: 0 0 6px !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    table.responsive-card-table tr {
        margin-bottom: 6px !important;
        border-radius: 9px !important;
    }

    table.responsive-card-table td {
        min-height: 28px !important;
        padding: 5px 8px !important;
        grid-template-columns: minmax(68px, 32%) minmax(0, 1fr) !important;
        gap: 6px !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    table.responsive-card-table td::before {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    table.responsive-card-table .status,
    table.responsive-card-table .badge,
    table.responsive-card-table .lv-badge,
    table.responsive-card-table .pe-badge {
        min-height: 24px !important;
        padding: 3px 7px !important;
        font-size: 10px !important;
    }

    table.responsive-card-table .table-profile,
    table.responsive-card-table img.rounded-circle,
    table.responsive-card-table .profile-picture {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    table.responsive-card-table .action-btn,
    table.responsive-card-table .btn-icon,
    table.responsive-card-table .edit-btn,
    table.responsive-card-table .delete-btn,
    table.responsive-card-table .view-btn {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }

    table.responsive-card-table .action-btn svg,
    table.responsive-card-table .btn-icon svg,
    table.responsive-card-table .edit-btn svg,
    table.responsive-card-table .delete-btn svg,
    table.responsive-card-table .view-btn svg {
        width: 13px !important;
        height: 13px !important;
    }
}

/* Dashboard density pass: compact mobile dashboard, not oversized cards. */
@media (max-width: 767.98px) {
    .dashboard-page,
    .main-content.dashboard-page,
    .main-content:has(.kpi-row),
    .main-content:has(.dash-grid),
    .main-content:has(.coach-dashbox),
    .main-content:has(.wcard) {
        padding: 8px 8px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .dashboard-page .row,
    .main-content:has(.kpi-row) .row,
    .main-content:has(.coach-dashbox) .row,
    .main-content:has(.wcard) .row {
        --bs-gutter-x: 8px !important;
        --bs-gutter-y: 8px !important;
    }

    .dashboard-page .page-head,
    .dashboard-page .al-page-head,
    .main-content:has(.kpi-row) .page-head,
    .main-content:has(.coach-dashbox) .page-head,
    .main-content:has(.wcard) .page-head {
        margin-bottom: 8px !important;
    }

    .dashboard-page .page-head h1,
    .dashboard-page .page-head h2,
    .dashboard-page .al-page-head h1,
    .dashboard-page .al-page-head h2,
    .main-content:has(.kpi-row) h1,
    .main-content:has(.kpi-row) h2,
    .main-content:has(.coach-dashbox) h1,
    .main-content:has(.coach-dashbox) h2,
    .main-content:has(.wcard) h1,
    .main-content:has(.wcard) h2 {
        font-size: 16px !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }

    .dashboard-page .page-head p,
    .dashboard-page .al-page-head p,
    .main-content:has(.kpi-row) .page-head p,
    .main-content:has(.coach-dashbox) .page-head p,
    .main-content:has(.wcard) .page-head p {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    .welcome-card {
        min-height: auto !important;
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
        gap: 6px !important;
        box-shadow: 0 3px 12px rgba(15, 127, 136, 0.22) !important;
    }

    .welcome-card::before,
    .welcome-card::after {
        transform: scale(0.62);
        opacity: 0.65;
    }

    .welcome-name {
        font-size: 18px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .welcome-card p,
    .welcome-card span,
    .welcome-card small {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .kpi-row,
    .stats-grid,
    .stat-grid,
    .summary-grid,
    .sb-grid,
    .mi-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .dash-grid,
    .dash-left,
    .dash-right {
        gap: 8px !important;
    }

    .kpi-card,
    .stat-card,
    .summary-card,
    .dash-box,
    .coach-dashbox,
    .wcard,
    .inner-card,
    .list-card,
    .pcard,
    .plan-card {
        min-height: auto !important;
        padding: 8px !important;
        border-radius: 10px !important;
        gap: 4px !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    }

    .dash-box,
    .coach-dashbox {
        min-height: 82px !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    .kpi-top {
        gap: 4px !important;
        margin-bottom: 2px !important;
    }

    .kpi-icon,
    .icon-circle,
    .dash-box .icon-circle,
    .coach-dashbox .icon-circle {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        border-radius: 8px !important;
        margin-bottom: 3px !important;
    }

    .kpi-icon svg,
    .kpi-icon i,
    .icon-circle svg,
    .icon-circle i {
        width: 13px !important;
        height: 13px !important;
        font-size: 13px !important;
    }

    .kpi-val,
    .kpi-value,
    .stat-value,
    .summary-value,
    .dash-box .inner-title,
    .dash-box h3,
    .dash-box h4,
    .coach-dashbox .inner-title,
    .coach-dashbox h3,
    .coach-dashbox h4 {
        font-size: 18px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
    }

    .kpi-label,
    .kpi-period,
    .kpi-sub,
    .stat-label,
    .summary-label,
    .dash-box p,
    .coach-dashbox p {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin: 1px 0 0 !important;
    }

    .kpi-trend,
    .pcard-badge,
    .spill,
    .status-badge {
        min-height: 20px !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
        border-radius: 999px !important;
    }

    .wcard-head,
    .card-head,
    .card-header,
    .pcard-head,
    .list-card-head {
        min-height: 34px !important;
        padding: 8px !important;
        margin-bottom: 0 !important;
    }

    .wcard-title,
    .card-title,
    .pcard-title,
    .inner-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .wcard-head i,
    .card-head i,
    .pcard-head i,
    .list-card-head i {
        font-size: 12px !important;
    }

    .card-body,
    .wcard > div:not(.wcard-head),
    .pcard-body,
    .inner-card .card-body {
        padding: 8px !important;
    }

    .canvas-wrap,
    .cw {
        min-height: 120px !important;
        height: 120px !important;
        max-height: 140px !important;
    }

    .canvas-wrap.sm,
    .cw.sm {
        min-height: 96px !important;
        height: 96px !important;
        max-height: 110px !important;
    }

    .chart-empty,
    .empty-card,
    .empty-state {
        min-height: 92px !important;
        padding: 12px !important;
        font-size: 11px !important;
    }

    .scroll-list,
    .scroll-table {
        max-height: 220px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .sched-item,
    .tl-item,
    .mi-session,
    .mi-match,
    .act-item,
    .sub-item,
    .today-card,
    .cal-card,
    .team-hero,
    .tcard,
    .list-row {
        padding: 8px !important;
        gap: 8px !important;
        border-radius: 9px !important;
        min-height: auto !important;
    }

    .sched-avatar,
    .mi-avatar,
    .member-avatar,
    .tav,
    .dpill,
    .date-pill,
    .cdb {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }

    .sched-name,
    .tl-title,
    .mi-title,
    .rt,
    .row-title,
    .tbn,
    .team-hero-title {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .sched-meta,
    .tl-meta,
    .mi-meta,
    .rm,
    .row-meta,
    .today-meta {
        font-size: 10px !important;
        line-height: 1.25 !important;
        gap: 5px !important;
    }

    .date-bubble {
        padding: 5px 6px !important;
        border-radius: 8px !important;
        min-width: 42px !important;
    }

    .date-bubble .db-num,
    .dpill .dpd,
    .date-pill .dp-d,
    .cdb .cdd {
        font-size: 13px !important;
    }

    .mini-cal-grid > *,
    .mc-day {
        min-height: 28px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }

    .bar-chart {
        height: 64px !important;
        margin-top: 12px !important;
    }
}

@media (max-width: 390px) {
    .kpi-row,
    .stats-grid,
    .stat-grid,
    .summary-grid,
    .sb-grid,
    .mi-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .kpi-card,
    .stat-card,
    .summary-card,
    .dash-box,
    .coach-dashbox {
        padding: 7px !important;
    }

    .kpi-val,
    .kpi-value,
    .stat-value,
    .summary-value,
    .dash-box .inner-title,
    .dash-box h3,
    .dash-box h4 {
        font-size: 16px !important;
    }

    .kpi-label,
    .kpi-period,
    .kpi-sub,
    .dash-box p {
        font-size: 9px !important;
    }
}

/* Final mobile polish for managed context, profile hero, and calendar density. */
@media (max-width: 767.98px) {
    .top-header {
        min-height: 40px !important;
        padding: 7px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1125 !important;
    }

    .top-header > .row {
        display: none !important;
    }

    .top-header p {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .top-header p strong {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .top-header .exit {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 4px 8px !important;
        border: 1px solid color-mix(in srgb, var(--role-accent, #33FFF6) 55%, transparent) !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .top-header .exit svg {
        width: 14px !important;
        height: 14px !important;
        flex: 0 0 14px !important;
    }

    body:has(.top-header) .dash-header {
        top: 40px !important;
    }

    body:has(.top-header) .mobile-searchbar {
        top: 92px !important;
    }

    .analytics-page .page-head {
        margin-bottom: 10px !important;
    }

    .analytics-page .analytics-banner {
        min-height: 212px !important;
        height: 212px !important;
        padding: 10px !important;
        margin-bottom: 14px !important;
        border-radius: 16px !important;
        background-position: center !important;
        overflow: hidden !important;
    }

    .analytics-page .analytics-banner::after {
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .66) 100%) !important;
    }

    .analytics-page .analytics-banner .banner-content {
        width: 100% !important;
        height: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .analytics-page .edit-photo-btn {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .analytics-page .edit-photo-btn .upload-btn {
        min-height: 30px !important;
        max-width: calc(100vw - 40px) !important;
        padding: 6px 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .92) !important;
        color: #334155 !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .16) !important;
    }

    .analytics-page .analytics-profile-info {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .analytics-page .cover-profile {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        gap: 9px !important;
        margin-top: 0 !important;
        color: #fff !important;
    }

    .analytics-page .cover-profile[style] {
        margin-top: 0 !important;
    }

    .analytics-page .cover-picture {
        width: 62px !important;
        min-width: 62px !important;
        height: 62px !important;
        border-width: 2px !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .24) !important;
    }

    .analytics-page .cover-picture .user-profile,
    .analytics-page .cover-profile img.user-profile {
        width: 62px !important;
        min-width: 62px !important;
        height: 62px !important;
        object-fit: cover !important;
    }

    .analytics-page #editProfileBtn {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
        right: -4px !important;
        bottom: -4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .2) !important;
    }

    .analytics-page #editProfileBtn i {
        font-size: 10px !important;
    }

    .analytics-page .cover-profile > div:not(.cover-picture) {
        min-width: 0 !important;
    }

    .analytics-page .cover-profile .inner-title {
        max-width: 46vw !important;
        margin: 0 0 4px !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
    }

    .analytics-page .location-wrp,
    .analytics-page .team-info,
    .analytics-page .sport-info,
    .analytics-page .category-info {
        min-width: 0 !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
        color: rgba(255, 255, 255, .88) !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
    }

    .analytics-page .location-wrp span,
    .analytics-page .team-info span,
    .analytics-page .sport-info span,
    .analytics-page .category-info span {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .analytics-page .location-wrp svg,
    .analytics-page .team-info svg,
    .analytics-page .sport-info svg,
    .analytics-page .category-info svg,
    .analytics-page .sport-info img {
        width: 13px !important;
        min-width: 13px !important;
        height: 13px !important;
    }

    .analytics-page .analytics-profile-info .button-group {
        width: auto !important;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    .analytics-page .analytics-profile-info .primary-button,
    .analytics-page .analytics-profile-info .edit-button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 6px 9px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .analytics-page .analytics-profile-info .primary-button svg,
    .analytics-page .analytics-profile-info .edit-button svg,
    .analytics-page .analytics-profile-info .primary-button i,
    .analytics-page .analytics-profile-info .edit-button i {
        width: 12px !important;
        height: 12px !important;
        font-size: 11px !important;
    }

    .analytics-page .my-teams-list {
        padding-top: 4px !important;
        margin-top: 0 !important;
    }

    .main-content:has(#calendar) {
        padding: 8px !important;
    }

    .main-content:has(#calendar) .page-head {
        margin-bottom: 8px !important;
    }

    .main-content:has(#calendar) .page-head > .d-flex {
        gap: 8px !important;
    }

    .main-content:has(#calendar) .dash-title,
    .main-content:has(#calendar) .page-head h2 {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .main-content:has(#calendar) .dash-subtitle,
    .main-content:has(#calendar) .page-head p {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .cal-search-wrap {
        flex: 1 1 180px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .cal-search-input {
        width: 100% !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 6px 28px 6px 30px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    .cal-search-icon {
        left: 10px !important;
        width: 12px !important;
        height: 12px !important;
    }

    .cal-btn,
    .cal-today-btn,
    .cal-icon-btn,
    .cal-view-btn {
        min-height: 30px !important;
        min-width: 30px !important;
        padding: 5px 8px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        gap: 4px !important;
    }

    .cal-icon-btn {
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
    }

    .cal-btn svg,
    .cal-icon-btn svg,
    .cal-view-btn svg {
        width: 13px !important;
        height: 13px !important;
    }

    .cal-filter-panel {
        padding: 8px !important;
        margin-top: 8px !important;
        border-radius: 10px !important;
    }

    .cal-filter-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .cal-label {
        margin-bottom: 4px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .cal-select,
    .cal-input,
    .cal-textarea,
    .cal-filter-panel .select2-container .select2-selection--single {
        min-height: 32px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    .cal-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 8px !important;
    }

    .cal-main {
        min-width: 0 !important;
        border-radius: 10px !important;
    }

    .cal-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 7px !important;
        padding: 8px !important;
        overflow: visible !important;
    }

    .cal-toolbar-left,
    .cal-toolbar-right {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .cal-current-month {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cal-toolbar-right {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .cal-toolbar-right::-webkit-scrollbar {
        display: none !important;
    }

    .cal-view-switcher {
        flex: 1 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 9px !important;
    }

    .cal-view-btn {
        flex: 0 0 auto !important;
        padding-inline: 8px !important;
    }

    .cal-body {
        padding: 0 6px 8px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #calendar,
    .fc {
        font-size: 10px !important;
    }

    .fc .fc-col-header-cell-cushion {
        padding: 5px 2px !important;
        font-size: 10px !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 48px !important;
    }

    .fc .fc-daygrid-day-number {
        width: auto !important;
        height: auto !important;
        padding: 4px 5px !important;
        font-size: 10px !important;
    }

    .fc .fc-day-today .fc-daygrid-day-number {
        width: 20px !important;
        height: 20px !important;
        margin: 3px !important;
        padding: 0 !important;
        font-size: 10px !important;
    }

    .fc .fc-daygrid-event,
    .fc .fc-timegrid-event {
        padding: 1px 3px !important;
        border-radius: 4px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    .fc .fc-list-table {
        table-layout: fixed !important;
    }

    .fc .fc-list-day-cushion {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .fc .fc-list-event td {
        padding: 5px 6px !important;
        font-size: 10px !important;
        vertical-align: middle !important;
    }

    .fc .fc-list-event-time {
        width: 56px !important;
        max-width: 56px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .fc .fc-list-event-title,
    .fc .fc-list-event-title a {
        min-width: 0 !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cal-modal-content {
        width: 100% !important;
        max-height: calc(100vh - 16px) !important;
        border-radius: 12px !important;
    }

    .cal-modal-header,
    .cal-modal-footer {
        padding: 9px 10px !important;
        gap: 7px !important;
    }

    .cal-modal-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }

    .cal-modal-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .cal-modal-subtitle {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .cal-form-scrollable {
        max-height: calc(100vh - 156px) !important;
    }

    .cal-form-body {
        padding: 10px !important;
    }

    .cal-form-section {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .cal-form-row,
    .cal-form-row.triple {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

@media (max-width: 390px) {
    .analytics-page .analytics-banner {
        height: 196px !important;
        min-height: 196px !important;
    }

    .analytics-page .cover-picture,
    .analytics-page .cover-picture .user-profile,
    .analytics-page .cover-profile img.user-profile {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
    }

    .analytics-page .cover-profile .inner-title {
        max-width: 43vw !important;
        font-size: 14px !important;
    }

    .analytics-page .analytics-profile-info .primary-button,
    .analytics-page .analytics-profile-info .edit-button {
        padding-inline: 7px !important;
        font-size: 9px !important;
    }

    .cal-filter-grid {
        grid-template-columns: 1fr !important;
    }

    .cal-view-btn {
        padding-inline: 7px !important;
    }

    .fc .fc-list-event-time {
        width: 48px !important;
        max-width: 48px !important;
    }
}

/* Profile feed and managed-bar final pass. */
@media (max-width: 767.98px) {
    .top-header {
        width: 100% !important;
        min-height: 38px !important;
        padding: 6px 8px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        background: var(--role-accent-text, var(--primary-color)) !important;
    }

    .top-header-context {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
        color: var(--tertiory-color) !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .top-header-context span {
        flex: 0 0 auto !important;
    }

    .top-header-context .top-header-type {
        text-transform: capitalize !important;
        opacity: .9 !important;
    }

    .top-header-context strong {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 42vw !important;
        display: block !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .top-header .exit {
        width: auto !important;
        min-width: 0 !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 3px 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border: 1px solid color-mix(in srgb, var(--role-accent, #33FFF6) 60%, transparent) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .06) !important;
        color: #33fff6 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .top-header .exit svg {
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 12px !important;
    }

    .analytics-page .analytics-tabs {
        margin-top: 14px !important;
    }

    .analytics-page .tab-content .row,
    .analytics-page .analytics-tabs .row {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .analytics-page .tab-content [class*="col-"],
    .analytics-page .analytics-tabs [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .analytics-page .analytics-left-info,
    .analytics-page .recent-members,
    .analytics-page .feed-list,
    .analytics-page #postsFeed {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .analytics-page .post-creator-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
        overflow: visible !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, .08) !important;
    }

    .analytics-page .post-creator-header {
        padding: 9px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: 8px !important;
        border-bottom-width: 1px !important;
    }

    .analytics-page .user-info {
        min-width: 0 !important;
        gap: 8px !important;
    }

    .analytics-page .avatar-img,
    .analytics-page .avatar-initials {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    .analytics-page .username {
        min-width: 0 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .analytics-page .post-type-selector {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    .analytics-page .post-type-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 5px 3px !important;
        justify-content: center !important;
        border-radius: 8px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        gap: 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .analytics-page .post-type-btn i {
        font-size: 10px !important;
        flex: 0 0 auto !important;
    }

    .analytics-page .post-creator-body {
        padding: 9px !important;
    }

    .analytics-page .post-textarea {
        min-height: 68px !important;
        padding: 8px 9px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    .analytics-page .upload-section,
    .analytics-page .poll-section,
    .analytics-page .post-options-section {
        padding: 8px !important;
        margin-top: 8px !important;
        border-radius: 8px !important;
    }

    .analytics-page .post-options-section .row > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 6px !important;
    }

    .analytics-page .theme-submit-btn,
    .analytics-page #submitPost {
        width: 100% !important;
        min-height: 34px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    .analytics-page .feed-list {
        margin-top: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .analytics-page .feed-list .post,
    .analytics-page .post-card,
    .analytics-page #postsFeed > .post-card,
    .analytics-page #postsFeed > .post {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .analytics-page .post-card .card,
    .analytics-page .post-card.card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .analytics-page .post-card h6[style*="max-width"] {
        max-width: calc(100vw - 126px) !important;
        min-width: 0 !important;
    }

    .analytics-page .post-header,
    .analytics-page .feed-list .post-header,
    .analytics-page .post-card .card-header {
        padding: 8px 9px !important;
        gap: 7px !important;
        align-items: center !important;
    }

    .analytics-page .feed-list .user,
    .analytics-page .post-card .user-info,
    .analytics-page .post-card .d-flex {
        min-width: 0 !important;
    }

    .analytics-page .feed-list .user img,
    .analytics-page .post-card img.rounded-circle {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        object-fit: cover !important;
    }

    .analytics-page .post-content,
    .analytics-page .post-card .card-body {
        padding: 9px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }

    .analytics-page .post-image img,
    .analytics-page .post-card img:not(.rounded-circle) {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .analytics-page .post-media .row {
        --bs-gutter-x: 4px !important;
        --bs-gutter-y: 4px !important;
    }

    .analytics-page .post-media .row > [class*="col-"] {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .analytics-page .post-media .gallery-item,
    .analytics-page .post-media .single-image,
    .analytics-page .post-media .video-embed {
        max-width: 100% !important;
        border-radius: 8px !important;
    }

    .analytics-page .post-media .gallery-item img,
    .analytics-page .post-media video,
    .analytics-page .post-media iframe {
        width: 100% !important;
        max-height: 220px !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    .analytics-page .post-media .row .gallery-item,
    .analytics-page .post-media .row .gallery-item img {
        height: 118px !important;
        min-height: 118px !important;
    }

    .analytics-page .post-actions,
    .analytics-page .post-card .card-footer {
        padding: 7px 9px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .analytics-page #loadMoreContainer {
        margin-top: 10px !important;
        margin-bottom: 14px !important;
    }

    .analytics-page #loadMoreBtn,
    .analytics-page #noMorePosts {
        width: 100% !important;
        min-height: 34px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    .analytics-page .recent-members {
        margin-top: 8px !important;
    }

    .analytics-page .recent-members .inner-card {
        padding: 9px !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 390px) {
    .top-header-context strong {
        max-width: 34vw !important;
    }

    .analytics-page .post-type-selector {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    .analytics-page .post-type-btn {
        font-size: 0 !important;
        min-height: 30px !important;
    }

    .analytics-page .post-type-btn i {
        font-size: 12px !important;
    }
}

/* Professional compact header controls for phone screens. */
@media (max-width: 767.98px) {
    .dash-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 52px !important;
        padding: 7px 9px !important;
        background: rgba(255, 255, 255, .98) !important;
        border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
        backdrop-filter: blur(10px);
    }

    .header-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
    }

    .header-rightside {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    .mobile-toggle {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        border: 1px solid rgba(203, 213, 225, .95) !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .07) !important;
    }

    .mobile-toggle svg {
        width: 17px !important;
        height: 17px !important;
    }

    .mobile-toggle svg path {
        stroke: #0f172a !important;
        stroke-width: 1.8 !important;
    }

    .dash-header .main-logo {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .dash-header .main-logo img {
        width: auto !important;
        max-width: 96px !important;
        max-height: 32px !important;
        object-fit: contain !important;
    }

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

    .language-switcher > .d-flex {
        margin: 0 !important;
        gap: 0 !important;
    }

    .language-toggle {
        width: auto !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        box-shadow: none !important;
    }

    .language-toggle #current-lang {
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
    }

    .language-toggle .text-black {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 2px !important;
    }

    .language-toggle .fa-angle-down {
        display: inline-block !important;
        font-size: 9px !important;
        color: #64748b !important;
        line-height: 1 !important;
    }

    .language-switcher .dropdown-menu.language_active {
        position: fixed !important;
        top: 54px !important;
        right: 70px !important;
        left: auto !important;
        min-width: 94px !important;
        max-width: 130px !important;
        padding: 5px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important;
        transform: none !important;
        overflow: hidden !important;
        z-index: 1100 !important;
    }

    .language-switcher .dropdown-menu.language_active .dropdown-item {
        min-height: 32px !important;
        padding: 7px 9px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        color: #334155 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }

    .language-switcher .dropdown-menu.language_active .dropdown-item.language_active,
    .language-switcher .dropdown-menu.language_active .dropdown-item.active,
    .language-switcher .dropdown-menu.language_active .dropdown-item:hover {
        background: #e8f1f2 !important;
        color: var(--role-accent-text, #0d5f6a) !important;
    }

    .notification-icon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .notification-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    .notification-icon svg path {
        stroke: #475569 !important;
        stroke-width: 1.8 !important;
    }

    .ntf-count {
        width: 16px !important;
        min-width: 16px !important;
        height: 16px !important;
        top: -5px !important;
        right: -5px !important;
        border: 2px solid #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    .header-profile {
        flex: 0 0 auto !important;
        gap: 4px !important;
    }

    .header-profile img,
    .header-profile .profile-picture,
    .header-profile .user-initials-avatar {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        object-fit: cover !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .header-profile .dropdown {
        flex: 0 0 auto !important;
    }

    .header-profile .dropdown button,
    .header-profile .dropdown .profile-menu-toggle {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        box-shadow: none !important;
    }

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

    .header-profile .dropdown button svg path,
    .header-profile .dropdown .profile-menu-toggle svg path {
        stroke: currentColor !important;
    }

    .header-profile .dropdown-menu {
        position: fixed !important;
        top: 54px !important;
        right: 8px !important;
        left: auto !important;
        min-width: 184px !important;
        max-width: calc(100vw - 16px) !important;
        padding: 6px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important;
        transform: none !important;
        overflow: hidden !important;
        z-index: 1100 !important;
    }

    .header-profile .dropdown-item {
        min-height: 36px !important;
        padding: 8px 10px !important;
        border: 0 !important;
        border-radius: 8px !important;
        color: #334155 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    .header-profile .dropdown-item:hover,
    .header-profile .dropdown-item:focus {
        background: #e8f1f2 !important;
        color: var(--role-accent, #0d5f6a) !important;
    }

    .notification-dropdown {
        position: fixed !important;
        top: 54px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(70dvh, 460px) !important;
        border-radius: 14px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        box-shadow: 0 20px 46px rgba(15, 23, 42, .22) !important;
        overflow: hidden !important;
        z-index: 1105 !important;
    }

    .notification-header {
        min-height: 42px !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .notification-all {
        max-height: calc(min(70dvh, 460px) - 48px) !important;
    }

    .main-content .nav-pills,
    .main-content .nav-tabs,
    .analytics-tabs .nav,
    .analytics-tabs .nav-pills,
    .analytics-tabs .nav-tabs {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 4px !important;
        margin-bottom: 10px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .main-content .nav-pills::-webkit-scrollbar,
    .main-content .nav-tabs::-webkit-scrollbar,
    .analytics-tabs .nav::-webkit-scrollbar,
    .analytics-tabs .nav-pills::-webkit-scrollbar,
    .analytics-tabs .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .main-content .nav-pills .nav-item,
    .main-content .nav-tabs .nav-item,
    .analytics-tabs .nav .nav-item {
        flex: 0 0 auto !important;
    }

    .main-content .nav-pills .nav-link,
    .main-content .nav-tabs .nav-link,
    .analytics-tabs .nav .nav-link {
        min-height: 32px !important;
        padding: 7px 11px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #475569 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        background: transparent !important;
    }

    .main-content .nav-pills .nav-link.active,
    .main-content .nav-tabs .nav-link.active,
    .analytics-tabs .nav .nav-link.active {
        background: #ffffff !important;
        color: var(--role-accent-text, #0d5f6a) !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .08) !important;
    }
}

@media (max-width: 390px) {
    .dash-header {
        gap: 5px !important;
        padding-inline: 7px !important;
    }

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

    .dash-header .main-logo img {
        max-width: 82px !important;
    }

    .mobile-toggle,
    .language-toggle,
    .notification-icon,
    .header-profile .dropdown button,
    .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 9px !important;
    }

    .header-profile img,
    .header-profile .profile-picture,
    .header-profile .user-initials-avatar {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
    }
}

/* Sidebar switcher inside mobile offcanvas. */
@media (max-width: 767.98px) {
    .mobile-menu .sidebar-switch-wrapper,
    .offcanvas .sidebar-switch-wrapper {
        display: block !important;
        width: 100% !important;
        padding: 10px 12px !important;
        margin: 0 0 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
        position: relative !important;
    }

    .mobile-menu .sidebar-switch-btn,
    .offcanvas .sidebar-switch-btn {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) 14px !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 8px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        background: rgba(255, 255, 255, .11) !important;
        color: #fff !important;
        box-shadow: none !important;
        text-align: left !important;
    }

    .mobile-menu .sidebar-switch-btn > svg:not(.dropdown-arrow),
    .offcanvas .sidebar-switch-btn > svg:not(.dropdown-arrow) {
        width: 20px !important;
        height: 20px !important;
        justify-self: center !important;
    }

    .mobile-menu .sidebar-switch-btn > svg:not(.dropdown-arrow) path,
    .offcanvas .sidebar-switch-btn > svg:not(.dropdown-arrow) path {
        stroke: currentColor !important;
    }

    .mobile-menu .sidebar-switch-btn span,
    .offcanvas .sidebar-switch-btn span {
        min-width: 0 !important;
        display: block !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-menu .sidebar-switch-btn .dropdown-arrow,
    .offcanvas .sidebar-switch-btn .dropdown-arrow {
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        justify-self: end !important;
    }

    .mobile-menu .switch-dropdown,
    .offcanvas .switch-dropdown {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 6px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, .14) !important;
        background: color-mix(in srgb, var(--role-accent-text, #024850) 72%, transparent) !important;
        box-shadow: none !important;
        overflow: hidden !important;
        z-index: 3 !important;
    }

    .mobile-menu .switch-dropdown-header,
    .offcanvas .switch-dropdown-header {
        padding: 7px 8px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
    }

    .mobile-menu .switch-dropdown-header span,
    .offcanvas .switch-dropdown-header span {
        color: rgba(255, 255, 255, .68) !important;
        font-size: 10px !important;
        letter-spacing: .7px !important;
    }

    .mobile-menu .switch-option,
    .offcanvas .switch-option {
        min-height: 42px !important;
        padding: 8px !important;
        gap: 8px !important;
        border: 0 !important;
        border-radius: 10px !important;
        color: #fff !important;
    }

    .mobile-menu .switch-option:hover,
    .offcanvas .switch-option:hover,
    .mobile-menu .switch-option:focus,
    .offcanvas .switch-option:focus {
        background: rgba(255, 255, 255, .12) !important;
    }

    .mobile-menu .switch-option-icon,
    .offcanvas .switch-option-icon {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, .12) !important;
        color: #fff !important;
    }

    .mobile-menu .switch-option-icon svg path,
    .mobile-menu .switch-option-icon svg line,
    .mobile-menu .switch-option-icon svg circle,
    .mobile-menu .switch-option-icon svg rect,
    .mobile-menu .switch-option-icon svg polyline,
    .mobile-menu .switch-option-icon svg polygon,
    .offcanvas .switch-option-icon svg path,
    .offcanvas .switch-option-icon svg line,
    .offcanvas .switch-option-icon svg circle,
    .offcanvas .switch-option-icon svg rect,
    .offcanvas .switch-option-icon svg polyline,
    .offcanvas .switch-option-icon svg polygon {
        stroke: #fff !important;
    }

    .mobile-menu .switch-option-icon svg [fill]:not([fill="none"]),
    .offcanvas .switch-option-icon svg [fill]:not([fill="none"]) {
        fill: #fff !important;
    }

    .mobile-menu .switch-option-content,
    .offcanvas .switch-option-content {
        min-width: 0 !important;
    }

    .mobile-menu .switch-option-content strong,
    .offcanvas .switch-option-content strong {
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .mobile-menu .switch-option-content span,
    .offcanvas .switch-option-content span {
        color: rgba(255, 255, 255, .62) !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Managed context bar must stay fixed and centered while scrolling. */
@media (max-width: 767.98px) {
    body:has(.top-header) {
        padding-top: 38px !important;
    }

    .top-header {
        height: 38px !important;
        min-height: 38px !important;
        padding: 5px 8px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1200 !important;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 6px !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(15, 23, 42, .14) !important;
    }

    .top-header::before {
        content: "" !important;
        width: 28px !important;
        height: 1px !important;
    }

    .top-header-context {
        min-width: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .top-header-context span,
    .top-header-context strong {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .top-header-context strong {
        flex: 0 1 auto !important;
        max-width: 34vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .top-header .exit {
        height: 26px !important;
        min-height: 26px !important;
        padding: 3px 7px !important;
        justify-self: end !important;
        font-size: 10px !important;
    }

    body:has(.top-header) .dash-header {
        top: 38px !important;
        z-index: 1190 !important;
    }

    body:has(.top-header) .mobile-searchbar {
        top: 90px !important;
    }
}

/* Final phone header alignment. */
@media (max-width: 767.98px) {
    :root {
        --iv-context-header-h: 38px;
        --iv-dashboard-header-min-h: 52px;
    }

    body:has(.top-header) {
        padding-top: var(--iv-context-header-h) !important;
    }

    body:has(.top-header) .top-header {
        height: var(--iv-context-header-h) !important;
        min-height: var(--iv-context-header-h) !important;
        grid-template-columns: minmax(42px, 1fr) minmax(0, auto) minmax(42px, 1fr) !important;
        padding: 5px 8px !important;
    }

    body:has(.top-header) .top-header::before {
        content: none !important;
    }

    body:has(.top-header) .top-header-context {
        grid-column: 2 !important;
        justify-self: center !important;
        max-width: min(230px, 62vw) !important;
        width: auto !important;
        font-size: 10px !important;
    }

    body:has(.top-header) .top-header-context strong {
        max-width: 92px !important;
    }

    body:has(.top-header) .top-header .exit {
        grid-column: 3 !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 7px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }

    body:has(.top-header) .top-header .exit svg {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }

    body:has(.top-header) .dash-header {
        top: var(--iv-context-header-h) !important;
        min-height: var(--iv-dashboard-header-min-h) !important;
        padding: 7px 9px !important;
        margin-top: 0 !important;
        background: #fff !important;
    }

    body:has(.top-header) .mobile-searchbar {
        top: calc(var(--iv-context-header-h) + var(--iv-dashboard-header-min-h)) !important;
    }

    body:has(.top-header) .language-switcher .dropdown-menu.language_active,
    body:has(.top-header) .header-profile .dropdown-menu,
    body:has(.top-header) .notification-dropdown {
        top: calc(var(--iv-context-header-h) + var(--iv-dashboard-header-min-h) + 4px) !important;
    }

    body:has(.top-header) .main-content {
        padding-top: 14px !important;
        scroll-margin-top: calc(var(--iv-context-header-h) + var(--iv-dashboard-header-min-h) + 10px) !important;
    }

    body:has(.top-header) .main-content > .page-head:first-child,
    body:has(.top-header) .main-content > [class$="-page-head"]:first-child,
    body:has(.top-header) .main-content > .dash-title:first-child,
    body:has(.top-header) .main-content > h1:first-child,
    body:has(.top-header) .main-content > h2:first-child,
    body:has(.top-header) .main-content > h3:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.has-managed-context .dash-header {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: var(--iv-dashboard-header-min-h) !important;
        padding: 7px 9px !important;
    }

    body.has-managed-context .main-content {
        margin-top: var(--iv-dashboard-header-min-h) !important;
        padding-top: 14px !important;
    }
}

/* Final mobile-only SaaS polish for managed header, menu, dropdowns, and dashboard cards. */
@media (max-width: 767.98px) {
    body.has-managed-context .top-header,
    body:has(.top-header) .top-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 5px 8px !important;
        overflow: hidden !important;
    }

    body.has-managed-context .top-header-context,
    body:has(.top-header) .top-header-context {
        flex: 0 1 auto !important;
        max-width: calc(100vw - 92px) !important;
        width: auto !important;
        justify-content: center !important;
        gap: 3px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.has-managed-context .top-header-context span,
    body.has-managed-context .top-header-context strong,
    body:has(.top-header) .top-header-context span,
    body:has(.top-header) .top-header-context strong {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    body.has-managed-context .top-header-context strong,
    body:has(.top-header) .top-header-context strong {
        max-width: 88px !important;
    }

    body.has-managed-context .top-header .exit,
    body:has(.top-header) .top-header .exit {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    body.has-managed-context .top-header .exit svg,
    body:has(.top-header) .top-header .exit svg {
        width: 13px !important;
        height: 13px !important;
        flex: 0 0 13px !important;
    }

    body.has-managed-context .dash-header,
    body:has(.top-header) .dash-header {
        top: 40px !important;
        min-height: 56px !important;
        height: 56px !important;
        padding: 7px 8px !important;
        overflow: visible !important;
    }

    body.has-managed-context .main-content {
        margin-top: 56px !important;
        padding-top: 14px !important;
    }

    .mobile-menu,
    .offcanvas.mobile-menu,
    #offcanvasExample {
        width: min(86vw, 320px) !important;
        max-width: min(86vw, 320px) !important;
        top: 96px !important;
        height: calc(100dvh - 96px) !important;
        border-right: 0 !important;
        overflow: hidden !important;
        z-index: 1235 !important;
    }

    .mobile-menu .offcanvas-body,
    .mobile-menu .sidebar,
    #offcanvasExample .offcanvas-body,
    #offcanvasExample .sidebar {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-menu .sidebar-menu,
    #offcanvasExample .sidebar-menu {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 10px 0 24px 10px !important;
        overflow: visible !important;
    }

    .mobile-menu .sidebar .dropdown,
    #offcanvasExample .sidebar .dropdown {
        position: static !important;
    }

    .mobile-menu .sidebar .dropdown-menu,
    #offcanvasExample .sidebar .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: calc(100% - 8px) !important;
        max-width: none !important;
        margin: 4px 0 8px 8px !important;
        padding: 4px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .09) !important;
        box-shadow: none !important;
        float: none !important;
    }

    .mobile-menu .sidebar .dropdown-menu.show,
    #offcanvasExample .sidebar .dropdown-menu.show {
        display: block !important;
    }

    .mobile-menu .sidebar .menu-item,
    #offcanvasExample .sidebar .menu-item {
        min-height: 42px !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
        border-radius: 22px 0 0 22px !important;
    }

    .mobile-menu .sidebar .dropdown-item,
    #offcanvasExample .sidebar .dropdown-item {
        min-height: 34px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: normal !important;
    }

    body.has-managed-context .language-switcher .dropdown-menu.language_active,
    body:has(.top-header) .language-switcher .dropdown-menu.language_active {
        position: fixed !important;
        top: 102px !important;
        right: 96px !important;
        left: auto !important;
        transform: none !important;
        min-width: 92px !important;
        z-index: 1320 !important;
    }

    body.has-managed-context .header-profile .dropdown-menu,
    body:has(.top-header) .header-profile .dropdown-menu {
        position: fixed !important;
        top: 102px !important;
        right: 8px !important;
        left: auto !important;
        transform: none !important;
        width: min(172px, calc(100vw - 16px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        z-index: 1320 !important;
    }

    body.has-managed-context .notification-dropdown,
    body:has(.top-header) .notification-dropdown {
        position: fixed !important;
        top: 102px !important;
        right: 8px !important;
        left: 8px !important;
        transform: none !important;
        z-index: 1325 !important;
    }

    .main-content:has(.coach-dashbox) .row,
    .main-content:has(.dash-box) .row,
    .dashboard-page .row {
        --bs-gutter-x: 8px !important;
        --bs-gutter-y: 8px !important;
    }

    .main-content:has(.coach-dashbox) [class*="col-"],
    .main-content:has(.dash-box) [class*="col-"],
    .dashboard-page [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .dash-box,
    .coach-dashbox {
        min-height: 72px !important;
        height: auto !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        align-items: center !important;
    }

    .dash-box .icon-circle,
    .coach-dashbox .icon-circle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .dash-box .inner-title,
    .dash-box h3,
    .dash-box h4,
    .coach-dashbox .inner-title,
    .coach-dashbox h3,
    .coach-dashbox h4 {
        font-size: 15px !important;
        line-height: 1.05 !important;
    }

    .dash-box p,
    .coach-dashbox p {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }
}

/* Last-word calendar and dock/offcanvas consistency for mobile/tablet. */
@media (max-width: 1199.98px) {
    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 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translateX(-110%) !important;
        pointer-events: none !important;
    }

    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;
    }

    .main-content:has(#calendar) {
        padding-inline: 12px !important;
        padding-bottom: 112px !important;
        overflow-x: hidden !important;
    }

    .cal-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 10px !important;
    }

    .cal-sidebar {
        display: none !important;
    }

    .cal-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
        overflow: hidden !important;
    }

    .cal-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        background: #fff !important;
        border-bottom: 1px solid rgba(226, 232, 240, .88) !important;
        overflow: visible !important;
    }

    .cal-toolbar-left,
    .cal-toolbar-right {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .cal-toolbar-left {
        display: grid !important;
        grid-template-columns: 32px 32px minmax(0, 1fr) auto !important;
    }

    .cal-toolbar-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .cal-current-month {
        min-width: 0 !important;
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cal-icon-btn,
    .cal-today-btn,
    .cal-btn,
    .cal-view-btn {
        min-height: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    .cal-icon-btn {
        width: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
    }

    .cal-today-btn,
    .cal-btn {
        padding: 0 10px !important;
    }

    .cal-view-switcher {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 3px !important;
        border: 1px solid rgba(226, 232, 240, .9) !important;
        border-radius: 11px !important;
        background: #f8fafc !important;
        overflow: hidden !important;
    }

    .cal-view-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 4px !important;
        border: 0 !important;
        background: transparent !important;
        color: #475569 !important;
    }

    .cal-view-btn.active,
    .cal-view-btn[aria-pressed="true"] {
        background: #fff !important;
        color: var(--role-accent-text, #0b8f91) !important;
        box-shadow: 0 1px 5px rgba(15, 23, 42, .1) !important;
    }

    .cal-body {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 8px 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #calendar,
    #calendar .fc,
    .fc {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 10px !important;
    }

    .fc .fc-view-harness,
    .fc .fc-scroller,
    .fc .fc-scroller-liquid-absolute {
        min-height: 0 !important;
        overflow: visible !important;
    }

    .fc-theme-standard .fc-scrollgrid,
    .fc-theme-standard td,
    .fc-theme-standard th {
        border-color: rgba(226, 232, 240, .95) !important;
    }

    .fc .fc-col-header-cell-cushion {
        display: block !important;
        padding: 6px 2px !important;
        color: var(--role-accent-text, #0b8f91) !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 58px !important;
        padding: 2px !important;
    }

    .fc .fc-daygrid-day-top {
        justify-content: flex-end !important;
    }

    .fc .fc-daygrid-day-number {
        padding: 3px 4px !important;
        color: #0f172a !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    .fc .fc-day-today {
        background: rgba(11, 143, 145, .06) !important;
    }

    .fc .fc-day-today .fc-daygrid-day-number {
        width: 20px !important;
        height: 20px !important;
        margin: 2px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--role-accent-text, #0b8f91) !important;
        color: #fff !important;
    }

    /* dark: vincolato a [data-role] come i guard di mobile-calendar.css —
       senza ruolo --role-accent-text resta teal SCURO anche in dark
       e il bianco baseline è quello giusto. */
    [data-theme="dark"][data-role] .fc .fc-day-today .fc-daygrid-day-number,
    [data-theme="dark"] [data-role] .fc .fc-day-today .fc-daygrid-day-number {
        color: var(--role-accent-on, #0E1D21) !important;
    }

    .fc .fc-daygrid-event,
    .fc .fc-timegrid-event {
        margin: 1px 0 !important;
        padding: 1px 3px !important;
        border-radius: 4px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
    }

    .fc .fc-event-main,
    .fc .fc-event-title {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .fc .fc-event-title {
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fc .fc-daygrid-more-link {
        color: var(--role-accent-text, #0b8f91) !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        text-decoration: none !important;
    }

    .fc .fc-timegrid-axis,
    .fc .fc-timegrid-slot-label {
        width: 42px !important;
        max-width: 42px !important;
        color: #64748b !important;
        font-size: 9px !important;
        font-weight: 800 !important;
    }

    .fc .fc-timegrid-slot {
        height: 34px !important;
    }

    .fc .fc-list {
        border: 0 !important;
    }

    .fc .fc-list-table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    .fc .fc-list-day-cushion {
        padding: 7px 8px !important;
        background: #f8fafc !important;
        color: var(--role-accent-text, #0b8f91) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
    }

    .fc .fc-list-event td {
        padding: 7px 6px !important;
        font-size: 10px !important;
        vertical-align: middle !important;
    }

    .fc .fc-list-event-time {
        width: 58px !important;
        max-width: 58px !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    .fc .fc-list-event-title,
    .fc .fc-list-event-title a {
        color: #0f172a !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
    .main-content:has(#calendar) {
        padding-inline: 16px !important;
    }

    .cal-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
        align-items: center !important;
    }

    .cal-toolbar-left {
        grid-template-columns: 36px 36px minmax(0, 1fr) auto !important;
    }

    .cal-icon-btn,
    .cal-today-btn,
    .cal-btn,
    .cal-view-btn {
        min-height: 36px !important;
        height: 36px !important;
        font-size: 11px !important;
    }

    .cal-icon-btn {
        width: 36px !important;
        min-width: 36px !important;
    }

    .cal-current-month {
        font-size: 17px !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 82px !important;
    }

    .fc .fc-timegrid-slot {
        height: 42px !important;
    }
}

@media (max-width: 575.98px) {
    .main-content:has(#calendar) {
        padding-inline: 8px !important;
    }

    .cal-toolbar-right {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cal-toolbar-right > .cal-btn,
    .cal-toolbar-right > .cal-btn-primary,
    .cal-toolbar-right > .cal-btn-outline {
        width: 100% !important;
        justify-content: center !important;
    }

    .fc .fc-daygrid-day-frame {
        min-height: 52px !important;
    }
}
/* Global mobile DataTable/listing cards. */
@media (max-width: 767.98px) {
    .table-data,
    .dataTables_wrapper {
        background: transparent !important;
    }

    .table-data .table-responsive,
    .dataTables_wrapper .table-responsive {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    table.responsive-card-table {
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 12px !important;
        display: block !important;
        width: 100% !important;
        background: transparent !important;
    }

    table.responsive-card-table thead,
    table.responsive-card-table colgroup {
        display: none !important;
    }

    table.responsive-card-table tbody,
    table.responsive-card-table tr,
    table.responsive-card-table td {
        display: block !important;
        width: 100% !important;
    }

    table.responsive-card-table tbody {
        background: transparent !important;
    }

    table.responsive-card-table tr {
        position: relative;
        margin: 0 0 12px !important;
        overflow: hidden !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .07) !important;
    }

    table.responsive-card-table td {
        min-height: 38px !important;
        padding: 8px 12px !important;
        display: grid !important;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f7 !important;
        background: #fff !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    table.responsive-card-table td::before {
        content: attr(data-label);
        color: #476176 !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }

    table.responsive-card-table td:last-child {
        border-bottom: 0 !important;
    }

    table.responsive-card-table td.iv-card-media-cell {
        min-height: 52px !important;
    }

    table.responsive-card-table td.iv-card-media-cell img,
    table.responsive-card-table td.iv-card-media-cell .table-profile,
    table.responsive-card-table td.iv-card-media-cell .profile-picture,
    table.responsive-card-table td.iv-card-media-cell .user-profile,
    table.responsive-card-table td.iv-card-media-cell .rounded-circle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    table.responsive-card-table td.iv-card-status-cell .status,
    table.responsive-card-table td.iv-card-status-cell .badge,
    table.responsive-card-table td.iv-card-status-cell .status-badge {
        min-width: 74px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 4px 12px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    table.responsive-card-table td.iv-card-action-cell {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 7px !important;
        min-height: 42px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        background: #fbfdff !important;
    }

    table.responsive-card-table td.iv-card-action-cell::before {
        margin-right: auto !important;
    }

    table.responsive-card-table .action-button,
    table.responsive-card-table .table-actions,
    table.responsive-card-table .dt-actions {
        display: flex !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        margin-left: auto !important;
    }

    table.responsive-card-table .action-btn,
    table.responsive-card-table a.action-btn,
    table.responsive-card-table button.action-btn,
    table.responsive-card-table .btn-icon,
    table.responsive-card-table td.iv-card-action-cell > a,
    table.responsive-card-table td.iv-card-action-cell > button {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    table.responsive-card-table td.dataTables_empty {
        display: block !important;
        padding: 18px !important;
        text-align: center !important;
        color: #64748b !important;
    }

    table.responsive-card-table td.dataTables_empty::before {
        display: none !important;
    }

    .dataTables_wrapper .dt-top,
    .dataTables_wrapper .dt-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dt-info,
    .dataTables_wrapper .dt-pagination,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100% !important;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        min-height: 40px !important;
        border-radius: 9px !important;
        border: 1px solid #cbd5e1 !important;
        background-color: #fff !important;
        font-size: 12px !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 40px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
    }
}

/* Final listing override: keep mobile/tablet DataTables as polished cards. */
@media (max-width: 991.98px) {
    body:has(table.responsive-card-table),
    .main-content:has(table.responsive-card-table) {
        background-color: #f3f6fa !important;
    }

    .dataTables_wrapper,
    .table-data:has(table.responsive-card-table),
    .dataTables_wrapper .table-responsive,
    .table-data:has(table.responsive-card-table) .table-responsive {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    table.responsive-card-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 13px !important;
        background: transparent !important;
    }

    table.responsive-card-table thead,
    table.responsive-card-table colgroup {
        display: none !important;
    }

    table.responsive-card-table tbody,
    table.responsive-card-table tr,
    table.responsive-card-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    table.responsive-card-table tbody {
        background: transparent !important;
    }

    table.responsive-card-table tr {
        overflow: hidden !important;
        margin: 0 0 13px !important;
        border: 1px solid #e1e8f0 !important;
        border-radius: 15px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .075) !important;
    }

    table.responsive-card-table td {
        min-height: 39px !important;
        padding: 9px 14px !important;
        display: grid !important;
        grid-template-columns: minmax(108px, 36%) minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        border: 0 !important;
        border-bottom: 1px solid #edf2f7 !important;
        background: #fff !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    table.responsive-card-table td::before {
        content: attr(data-label);
        color: #314f6b !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: .045em !important;
        text-transform: uppercase !important;
    }

    table.responsive-card-table td.iv-card-primary-cell {
        min-height: 48px !important;
    }

    table.responsive-card-table td.iv-card-media-cell {
        min-height: 58px !important;
    }

    table.responsive-card-table td:last-child {
        border-bottom: 0 !important;
    }

    table.responsive-card-table td.iv-card-empty-cell::after {
        content: "-";
        color: var(--iv-muted, #6b7280);
    }

    table.responsive-card-table td.iv-card-action-cell {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-height: 44px !important;
        padding: 8px 14px !important;
        background: #fbfdff !important;
    }

    table.responsive-card-table td.iv-card-action-cell::before {
        margin-right: auto !important;
    }

    table.responsive-card-table .action-button,
    table.responsive-card-table .table-actions,
    table.responsive-card-table .dt-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
    }

    table.responsive-card-table .action-btn,
    table.responsive-card-table a.action-btn,
    table.responsive-card-table button.action-btn,
    table.responsive-card-table .btn-icon,
    table.responsive-card-table td.iv-card-action-cell > a,
    table.responsive-card-table td.iv-card-action-cell > button {
        width: 31px !important;
        min-width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    table.responsive-card-table td.iv-card-media-cell img,
    table.responsive-card-table td.iv-card-media-cell .table-profile,
    table.responsive-card-table td.iv-card-media-cell .profile-picture,
    table.responsive-card-table td.iv-card-media-cell .user-profile,
    table.responsive-card-table td.iv-card-media-cell .rounded-circle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    table.responsive-card-table td.iv-card-status-cell .status,
    table.responsive-card-table td.iv-card-status-cell .badge,
    table.responsive-card-table td.iv-card-status-cell .status-badge {
        min-width: 76px !important;
        width: fit-content !important;
        max-width: 100% !important;
        padding: 4px 13px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    table.responsive-card-table td.dataTables_empty {
        display: block !important;
        padding: 22px 16px !important;
        text-align: center !important;
        color: #64748b !important;
    }

    table.responsive-card-table td.dataTables_empty::before {
        display: none !important;
    }

    .dataTables_wrapper .dt-top,
    .dataTables_wrapper .dt-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
        align-items: stretch !important;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dt-info,
    .dataTables_wrapper .dt-pagination,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100% !important;
        color: #64748b !important;
        font-size: 11px !important;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        min-height: 42px !important;
        margin: 6px 0 0 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #0f172a !important;
        font-size: 12px !important;
    }

    .dataTables_wrapper .dt-buttons,
    .dataTables_wrapper .dataTables_paginate {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 7px !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dt-info {
        color: var(--iv-text-2, #64748b) !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 40px !important;
        min-height: 44px !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    table.responsive-card-table tbody {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    table.responsive-card-table tr {
        margin: 0 !important;
    }

    table.responsive-card-table td {
        grid-template-columns: minmax(112px, 35%) minmax(0, 1fr) !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Final listing toolbar/forms consistency for mobile and tablets. */
@media (max-width: 991.98px) {
    .main-content:has(table.responsive-card-table) .page-head,
    .main-content:has(table.responsive-card-table) .al-page-head,
    .main-content:has(table.responsive-card-table) [class$="-page-head"] {
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .main-content:has(table.responsive-card-table) .dt-top,
    .main-content:has(table.responsive-card-table) .filter-actions,
    .main-content:has(table.responsive-card-table) .lv-filter-bar,
    .main-content:has(table.responsive-card-table) .pe-filter-bar,
    .main-content:has(table.responsive-card-table) .ti-filter-bar,
    .main-content:has(table.responsive-card-table) .ph-filter-bar,
    .main-content:has(table.responsive-card-table) .at-filter-bar,
    .main-content:has(table.responsive-card-table) form .row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .main-content:has(table.responsive-card-table) .form-control,
    .main-content:has(table.responsive-card-table) .form-select,
    .main-content:has(table.responsive-card-table) input[type="text"],
    .main-content:has(table.responsive-card-table) input[type="search"],
    .main-content:has(table.responsive-card-table) input[type="email"],
    .main-content:has(table.responsive-card-table) input[type="number"],
    .main-content:has(table.responsive-card-table) select,
    .main-content:has(table.responsive-card-table) .dataTables_filter input,
    .main-content:has(table.responsive-card-table) .dataTables_length select,
    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--single,
    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--multiple {
        height: 42px !important;
        min-height: 42px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background-color: #fff !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        box-shadow: none !important;
    }

    .main-content:has(table.responsive-card-table) .form-control,
    .main-content:has(table.responsive-card-table) .form-select,
    .main-content:has(table.responsive-card-table) input[type="text"],
    .main-content:has(table.responsive-card-table) input[type="search"],
    .main-content:has(table.responsive-card-table) .dataTables_filter input {
        padding: 9px 14px !important;
    }

    .main-content:has(table.responsive-card-table) .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--single .select2-selection__rendered {
        height: 40px !important;
        padding-left: 14px !important;
        padding-right: 34px !important;
        color: #0f172a !important;
        font-size: 12px !important;
        line-height: 40px !important;
    }

    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--single .select2-selection__arrow {
        width: 34px !important;
        height: 40px !important;
        right: 4px !important;
    }

    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--multiple {
        height: auto !important;
        min-height: 42px !important;
        padding: 4px 8px !important;
    }

    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 4px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #e8f6f6 !important;
        color: #0f6f78 !important;
        font-size: 11px !important;
    }

    .select2-dropdown {
        border: 1px solid #cbd5e1 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .14) !important;
    }

    .select2-results__option {
        padding: 10px 12px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .select2-search__field {
        min-height: 38px !important;
        border-radius: 9px !important;
        border: 1px solid #cbd5e1 !important;
        font-size: 12px !important;
    }

    .main-content:has(table.responsive-card-table) .primary-button,
    .main-content:has(table.responsive-card-table) .btn,
    .main-content:has(table.responsive-card-table) button,
    .main-content:has(table.responsive-card-table) a.btn,
    .main-content:has(table.responsive-card-table) .dropdown-toggle,
    .main-content:has(table.responsive-card-table) .dt-button {
        min-height: 42px !important;
        height: 42px !important;
        padding: 9px 14px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        white-space: nowrap !important;
    }

    .main-content:has(table.responsive-card-table) .primary-button,
    .main-content:has(table.responsive-card-table) .btn-primary,
    .main-content:has(table.responsive-card-table) .dt-button,
    .main-content:has(table.responsive-card-table) .dropdown-toggle {
        border-color: #11b8b8 !important;
        background: #11b8b8 !important;
        color: #fff !important;
    }

    .main-content:has(table.responsive-card-table) .dropdown-menu,
    .main-content:has(table.responsive-card-table) .export-btn {
        min-width: 170px !important;
        padding: 8px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .16) !important;
    }

    .main-content:has(table.responsive-card-table) .dropdown-item {
        min-height: 36px !important;
        border-radius: 8px !important;
        padding: 8px 10px !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .main-content:has(table.responsive-card-table) .dropdown-item:hover,
    .main-content:has(table.responsive-card-table) .dropdown-item:focus {
        background: #eefafa !important;
        color: #0f6f78 !important;
    }

    .main-content:has(table.responsive-card-table) .dataTables_filter label {
        position: relative !important;
        display: block !important;
    }

    .main-content:has(table.responsive-card-table) .dataTables_filter input {
        padding-right: 40px !important;
    }
}

@media (max-width: 767.98px) {
    .main-content:has(table.responsive-card-table) .dt-top,
    .main-content:has(table.responsive-card-table) .filter-actions,
    .main-content:has(table.responsive-card-table) .lv-filter-bar,
    .main-content:has(table.responsive-card-table) .pe-filter-bar,
    .main-content:has(table.responsive-card-table) .ti-filter-bar,
    .main-content:has(table.responsive-card-table) .ph-filter-bar,
    .main-content:has(table.responsive-card-table) .at-filter-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .main-content:has(table.responsive-card-table) .dataTables_filter,
    .main-content:has(table.responsive-card-table) .dt-buttons {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .main-content:has(table.responsive-card-table) .dataTables_filter input,
    .main-content:has(table.responsive-card-table) .dt-buttons .btn,
    .main-content:has(table.responsive-card-table) .dt-buttons .dt-button {
        width: 100% !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 210px) !important;
    }

    .main-content:has(table.responsive-card-table) .management-filter > .primary-button,
    .main-content:has(table.responsive-card-table) .management-filter > a.primary-button {
        grid-column: 1 / 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        white-space: normal !important;
    }

    .main-content:has(table.responsive-card-table) > .d-flex.justify-content-end.align-items-center:has(.dropdown) {
        width: calc(50% - 5px) !important;
        margin-left: calc(50% + 5px) !important;
        margin-top: -52px !important;
        margin-bottom: 16px !important;
        justify-content: stretch !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .main-content:has(table.responsive-card-table) > .d-flex.justify-content-end.align-items-center:has(.dropdown) .dropdown {
        width: 100% !important;
    }

    .main-content:has(table.responsive-card-table) > .d-flex.justify-content-end.align-items-center:has(.dropdown) .dropdown-toggle {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter .select-field {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter .select-field .form-select,
    .main-content.club-management:has(.users_listing) .management-filter .select-field select,
    .main-content.club-management:has(.users_listing) .management-filter .select-field .select2-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 11px !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 190px) !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > .primary-button,
    .main-content.club-management:has(.users_listing) .management-filter > a.primary-button,
    .main-content.club-management:has(.users_listing) .management-filter > .dropdown {
        grid-column: 1 / 2 !important;
        justify-self: stretch !important;
        width: calc(100% - 6px) !important;
        max-width: calc(100% - 6px) !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 10px !important;
        padding: 8px 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > .dropdown {
        grid-column: 2 / 3 !important;
        justify-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > .dropdown .dropdown-toggle {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 10px !important;
        padding: 8px 9px !important;
    }

    .main-content.club-management:has(.users_listing) > .d-flex.justify-content-end.align-items-center:has(.dropdown) {
        display: none !important;
    }

    .main-content.club-management:has(.users_listing) > .d-flex.justify-content-end.align-items-center:has(.dropdown) .dropdown {
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-content.club-management:has(.users_listing) > .d-flex.justify-content-end.align-items-center:has(.dropdown) .dropdown-toggle {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 10px !important;
        padding: 8px 9px !important;
    }

    .main-content.club-management:has(.users_listing) .table-data {
        margin-top: 16px !important;
    }
}

/* Final mobile header control consistency. */
@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
        margin-top: 0 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .dash-header {
        align-items: center !important;
    }

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

    .dash-header .language-switcher,
    .dash-header .language-switcher > .d-flex,
    .dash-header .header-profile {
        align-items: center !important;
        height: 44px !important;
    }

    .dash-header .language-toggle,
    .dash-header .header-profile {
        min-height: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        max-width: none !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .language-flag {
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

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

    .dash-header .header-profile {
        padding: 0 6px 0 4px !important;
        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: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        min-height: 44px !important;
        height: 44px !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }
}

@media (max-width: 991.98px) {
    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 16px !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 1199.98px) {
    .dash-header .header-profile .dropdown button svg,
    .dash-header .header-profile .dropdown .profile-menu-toggle svg {
        width: 12px !important;
        height: 8px !important;
    }
}

/* Final header pill equalization. */
@media (max-width: 1199.98px) {
    .dash-header .language-toggle,
    .dash-header .header-profile {
        height: 44px !important;
        min-height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        padding: 0 12px !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    .dash-header .header-profile {
        padding: 0 6px 0 5px !important;
        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 {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .language-toggle .language-flag,
    .dash-header .language-toggle #current-lang,
    .dash-header .language-toggle .text-black,
    .dash-header .language-toggle .fa-angle-down {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .text-black {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

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

/* Final mobile header control consistency. */
@media (max-width: 767.98px) {
    .dash-header {
        align-items: center !important;
    }

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

    .dash-header .language-switcher,
    .dash-header .language-switcher > .d-flex,
    .dash-header .header-profile {
        align-items: center !important;
        height: 44px !important;
    }

    .dash-header .language-toggle,
    .dash-header .header-profile {
        min-height: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        max-width: none !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .language-flag {
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .text-black {
        margin-left: 0 !important;
        height: 16px !important;
        align-items: center !important;
    }

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

    .dash-header .header-profile {
        padding: 0 6px 0 4px !important;
        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: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }
}

/* Final mobile header control consistency. */
@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
        margin-top: 0 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .dash-header {
        align-items: center !important;
    }

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

    .dash-header .language-switcher,
    .dash-header .language-switcher > .d-flex,
    .dash-header .header-profile {
        align-items: center !important;
        height: 44px !important;
    }

    .dash-header .language-toggle,
    .dash-header .header-profile {
        min-height: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        max-width: none !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .language-flag {
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

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

    .dash-header .header-profile {
        padding: 0 6px 0 4px !important;
        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: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        min-height: 44px !important;
        height: 44px !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }
}

/* Final mobile header control consistency. */
@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
        margin-top: 0 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .dash-header {
        align-items: center !important;
    }

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

    .dash-header .language-switcher,
    .dash-header .language-switcher > .d-flex,
    .dash-header .header-profile {
        align-items: center !important;
        height: 44px !important;
    }

    .dash-header .language-toggle,
    .dash-header .header-profile {
        min-height: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        max-width: none !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .language-flag {
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

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

    .dash-header .header-profile {
        padding: 0 6px 0 4px !important;
        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: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        min-height: 44px !important;
        height: 44px !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }
}

/* Final mobile header control consistency. */
@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
        margin-top: 0 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .dash-header {
        align-items: center !important;
    }

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

    .dash-header .language-switcher,
    .dash-header .language-switcher > .d-flex,
    .dash-header .header-profile {
        align-items: center !important;
        height: 44px !important;
    }

    .dash-header .language-toggle,
    .dash-header .header-profile {
        min-height: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        max-width: none !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .language-flag {
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

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

    .dash-header .header-profile {
        padding: 0 6px 0 4px !important;
        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: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        min-height: 44px !important;
        height: 44px !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }
}

@media (max-width: 991.98px) {
    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 20px !important;
    }

    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 20px !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 20px !important;
        margin-top: 5px !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 {
    min-height: 35px !important;
}

/* Absolute final users management toolbar override. */
@media (max-width: 767.98px) {
    .users-management-page > .page-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page > .page-head > * {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page .management-filter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        align-items: center !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page .management-filter > * {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .users-management-page .management-filter .select-field {
        grid-column: auto !important;
    }

    .users-management-page .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 190px) !important;
        max-width: 190px !important;
    }

    .users-management-page .users-create-button,
    .users-management-page .users-export-dropdown {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .users-management-page .users-create-button,
    .users-management-page .users-export-dropdown .dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .users-management-page .users-export-dropdown .dropdown {
        width: 100% !important;
    }

    .users-management-page .table-data {
        margin-top: 16px !important;
    }
}

/* Final hard override: users listing mobile actions must share one row. */
@media (max-width: 767.98px) {
    .main-content.club-management:has(.users_listing) .management-filter {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        align-items: center !important;
        width: 100% !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 190px) !important;
        max-width: 190px !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > .iv-listing-create-action,
    .main-content.club-management:has(.users_listing) .management-filter > .iv-listing-export-action {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        z-index: auto !important;
        justify-self: stretch !important;
        align-self: stretch !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > .iv-listing-create-action,
    .main-content.club-management:has(.users_listing) .management-filter > .iv-listing-export-action .dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > .iv-listing-export-action .dropdown {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .main-content.club-management:has(.users_listing) > .iv-listing-export-action {
        display: none !important;
    }
}

/* Users listing toolbar visibility/layout. */
@media (max-width: 767.98px) {
    .main-content.club-management:has(.users_listing) > .page-head {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
    }

    .main-content.club-management:has(.users_listing) > .page-head > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    .main-content.club-management:has(.users_listing) .al-page-head,
    .main-content.club-management:has(.users_listing) .al-page-head-left {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter .inputfiled:not(.select-field) {
        grid-column: 1 / -1 !important;
        width: min(100%, 190px) !important;
        max-width: 190px !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > a.primary-button,
    .main-content.club-management:has(.users_listing) .management-filter > .dropdown {
        grid-column: auto !important;
    }

    .main-content.club-management:has(.users_listing) .management-filter > a.primary-button,
    .main-content.club-management:has(.users_listing) .management-filter > .dropdown .dropdown-toggle {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 8px 8px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .main-content.club-management:has(.users_listing) .table-data {
        margin-top: 16px !important;
    }
}

/* Final mobile header control consistency. */
@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 13px !important;
        margin-top: 0 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .dash-header {
        align-items: center !important;
    }

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

    .dash-header .language-switcher,
    .dash-header .language-switcher > .d-flex,
    .dash-header .header-profile {
        align-items: center !important;
        height: 44px !important;
    }

    .dash-header .language-toggle,
    .dash-header .header-profile {
        min-height: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        max-width: none !important;
        padding: 0 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .dash-header .language-toggle #current-lang {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .language-flag {
        width: 16px !important;
        height: 16px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

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

    .dash-header .header-profile {
        padding: 0 6px 0 4px !important;
        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: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .notification-icon,
    .dash-header .notification-wrp .dropdown-toggle,
    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        min-height: 44px !important;
        height: 44px !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }
}

@media (max-width: 991.98px) {
    .main-content:has(table.responsive-card-table) .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .dash-header .language-toggle .fa-angle-down {
        font-size: 16px !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 1199.98px) {
    .dash-header .header-profile .dropdown button svg,
    .dash-header .header-profile .dropdown .profile-menu-toggle svg {
        width: 12px !important;
        height: 8px !important;
    }
}

/* Final header pill equalization - must stay last. */
@media (max-width: 1199.98px) {
    .dash-header .language-toggle,
    .dash-header .header-profile {
        height: 44px !important;
        min-height: 44px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .dash-header .language-toggle {
        min-width: 74px !important;
        padding: 0 12px !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    .dash-header .header-profile {
        padding: 0 6px 0 5px !important;
        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 {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .dash-header .language-toggle .language-flag,
    .dash-header .language-toggle #current-lang,
    .dash-header .language-toggle .text-black,
    .dash-header .language-toggle .fa-angle-down {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .dash-header .language-toggle .text-black {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
    }

    .dash-header .language-toggle .fa-angle-down {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }

    .dash-header .header-profile .dropdown button,
    .dash-header .header-profile .dropdown .profile-menu-toggle {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        border: 1px solid rgba(226, 232, 240, .95) !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

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

@media (max-width: 575.98px) {
    .management-filter {
        padding-left: 10px !important;
    }

    .dash-header .header-profile,
    .dash-header button.dropdown-toggle.language-toggle,
    .dash-header .language-toggle,
    .dash-header .notification-icon,
    .dash-header #bellIcon {
        min-height: 38px !important;
        max-height: 38px !important;
        height: 38px !important;
    }

    .dash-header .header-profile,
    .dash-header .language-switcher,
    .dash-header .language-switcher > .d-flex,
    .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: 44px !important;
        max-height: 44px !important;
        border-radius: 17px !important;
    }

    .dash-header .header-profile,
    .dash-header button.dropdown-toggle.language-toggle,
    .dash-header .language-toggle,
    .dash-header .notification-icon,
    .dash-header #bellIcon {
        min-height: 38px !important;
        max-height: 38px !important;
        height: 38px !important;
    }
}