:root {
        --bs-body-font-size: 1rem;
        --bs-menu-item-font-size: 16px;
    }

    body {
        font-size: 1rem;
        line-height: 1.5;
    }

    h1,
    .h1 {
        font-size: 2rem;
    }

    h2,
    .h2 {
        font-size: 1.65rem;
    }

    h3,
    .h3 {
        font-size: 1.4rem;
    }

    h4,
    .h4 {
        font-size: 1.2rem;
    }

    h5,
    .h5 {
        font-size: 1rem;
    }

    h6,
    .h6 {
        font-size: 0.9rem;
    }

    .form-control,
    .form-select,
    .btn,
    .table,
    .dropdown-menu {
        font-size: 0.9375rem;
    }

    .app-menu .menu-item .menu-link,
    .app-menu .menu-item .menu-link > .menu-text {
        font-size: 16px;
    }

    .app-menu .menu-item .sub-menu .menu-text {
        font-size: 15px;
    }

    .main-menu {
        background: linear-gradient(180deg, #0f2f5f 0%, #123d73 52%, #0f766e 140%) !important;
        border-right: 1px solid rgba(147, 197, 253, 0.18);
        box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12) !important;
    }

    .main-menu .logo-box {
        height: 88px;
        min-height: 88px;
        padding: 8px 14px;
        background: rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(191, 219, 254, 0.16);
    }

    .main-menu .logo-box .logo-lg {
        display: block;
        height: 64px !important;
        max-height: 64px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .main-menu [data-simplebar] {
        height: calc(100% - 88px);
    }

    .app-menu {
        padding: 12px 8px 20px;
        gap: 4px;
    }

    .app-menu > .menu-item {
        padding: 0 4px;
    }

    .app-menu .menu-item .menu-link {
        border-radius: 11px;
        color: rgba(239, 246, 255, 0.82);
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .app-menu .menu-item .menu-link:hover,
    .app-menu .menu-item .menu-link:focus,
    .app-menu .menu-item .menu-link[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        transform: translateX(2px);
    }

    .app-menu .menu-item.active > .menu-link {
        background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
        color: #ffffff;
        box-shadow: 0 7px 16px rgba(14, 165, 233, 0.2);
    }

    .app-menu .menu-item .menu-link > .menu-icon {
        color: #93c5fd;
    }

    .app-menu .menu-title {
        color: rgba(191, 219, 254, 0.64) !important;
        font-size: 0.72rem !important;
        font-weight: 800;
        letter-spacing: 0.1em;
        padding-top: 16px;
        padding-bottom: 7px;
    }

    .app-menu .menu-item.active > .menu-link > .menu-icon,
    .app-menu .menu-item .menu-link:hover > .menu-icon {
        color: #ffffff;
    }

    .app-menu .menu-item .sub-menu {
        margin: 4px 0 5px;
        padding: 4px 0;
        border-left: 1px solid rgba(191, 219, 254, 0.2);
    }

    .app-menu .menu-item .sub-menu .menu-link {
        color: rgba(219, 234, 254, 0.76);
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .navbar-custom {
        background: linear-gradient(90deg, #0f2f5f 0%, #123d73 62%, #145b69 100%) !important;
        border-bottom: 1px solid rgba(45, 212, 191, 0.3);
        box-shadow: 0 7px 20px rgba(15, 23, 42, 0.18);
    }

    .navbar-custom .topbar .nav-link,
    .navbar-custom .button-toggle-menu {
        color: rgba(239, 246, 255, 0.9);
    }

    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode {
        width: 38px;
        height: 38px;
        justify-content: center;
        border: 1px solid rgba(191, 219, 254, 0.18);
        background: rgba(255, 255, 255, 0.08);
        border-radius: 11px;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link:hover,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode:hover {
        background: rgba(45, 212, 191, 0.2);
        color: #ffffff;
        transform: translateY(-1px);
    }

    .navbar-custom .topbar .nav-link:hover,
    .navbar-custom .button-toggle-menu:hover {
        color: #ffffff;
    }

    .navbar-custom .nav-user {
        min-height: 42px;
        border: 1px solid rgba(191, 219, 254, 0.2);
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff !important;
        box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
    }

    .navbar-custom .nav-user img {
        border: 2px solid rgba(255, 255, 255, 0.72);
    }

    .navbar-custom .profile-dropdown {
        border: 1px solid rgba(96, 165, 250, 0.2);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
    }

    .main-menu {
        background: linear-gradient(180deg, #e8f7f1 0%, #e2f3ed 68%, #dff5f2 100%) !important;
        border-right: 1px solid #c7eee1;
        box-shadow: 8px 0 24px rgba(16, 185, 129, 0.08) !important;
    }

    .main-menu .logo-box {
        background: rgba(255, 255, 255, 0.56);
        border-bottom-color: #c7eee1;
    }

    .app-menu .menu-title {
        color: #64748b !important;
    }

    .app-menu .menu-item .menu-link {
        color: #334155;
    }

    .app-menu .menu-item .menu-link:hover,
    .app-menu .menu-item .menu-link:focus,
    .app-menu .menu-item .menu-link[aria-expanded="true"] {
        background: #d1fae5;
        color: #047857;
    }

    .app-menu .menu-item.active > .menu-link {
        background: #bbf7d0;
        color: #047857;
        box-shadow: 0 5px 12px rgba(16, 185, 129, 0.12);
    }

    .app-menu .menu-item .menu-link > .menu-icon,
    .app-menu .menu-item .sub-menu .menu-link > i {
        color: #059669;
    }

    .app-menu .menu-item.active > .menu-link > .menu-icon,
    .app-menu .menu-item .menu-link:hover > .menu-icon {
        color: #047857;
    }

    .app-menu .menu-item .sub-menu {
        border-left-color: #bfdbfe;
    }

    .app-menu .menu-item .sub-menu .menu-link {
        color: #475569;
    }

    .navbar-custom {
        background: linear-gradient(90deg, #e5f5ef 0%, #edf9f5 62%, #e1f6f3 100%) !important;
        border-bottom-color: #c7eee1;
        box-shadow: 0 6px 18px rgba(16, 185, 129, 0.08);
    }

    .navbar-custom .topbar .nav-link,
    .navbar-custom .button-toggle-menu {
        color: #334155;
    }

    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode {
        border-color: #dbeafe;
        background: rgba(255, 255, 255, 0.82);
    }

    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link:hover,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode:hover {
        background: #d1fae5;
        color: #047857;
    }

    .navbar-custom .nav-user {
        border-color: #bfdbfe;
        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
        color: #334155 !important;
    }

    .navbar-custom .nav-user img {
        border-color: #93c5fd;
    }

    .report-page .page-content {
        background: linear-gradient(135deg, #f8fbff 0%, #f4fbf9 100%);
    }

    .report-page .container-fluid > h4 {
        color: #1e3a8a;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

    .report-page .container-fluid > table,
    .report-page .container-fluid > .table-responsive {
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 16px;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
        overflow: hidden;
        background: #ffffff;
    }

    .report-page .container-fluid > table,
    .report-page .container-fluid > .table-responsive > table {
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .report-page .container-fluid table thead th {
        background: linear-gradient(180deg, #e4f7f0 0%, #effcf8 100%);
        color: #14532d;
        border-color: rgba(52, 211, 153, 0.2);
        font-weight: 800;
        white-space: nowrap;
    }

    .report-page .container-fluid table tbody td,
    .report-page .container-fluid table tbody th {
        border-color: rgba(148, 163, 184, 0.16);
        vertical-align: middle;
    }

    .report-page .container-fluid table tbody tr:nth-child(even) td {
        background: #fbfefd;
    }

    .report-page .container-fluid table tbody tr:hover td {
        background: #ecfdf5;
    }

    .report-page .container-fluid table tfoot th,
    .report-page .container-fluid table tfoot td {
        background: linear-gradient(180deg, #f8fafc 0%, #eefaf6 100%);
        border-top: 2px solid rgba(52, 211, 153, 0.22);
        font-weight: 800;
    }

    .report-page .container-fluid > .row:not(.g-0) .form-control,
    .report-page .container-fluid > .row:not(.g-0) .form-select {
        border-radius: 11px;
        border-color: rgba(148, 163, 184, 0.48);
        background: rgba(255, 255, 255, 0.92);
    }

    .report-page .container-fluid > .row:not(.g-0) .form-control:focus,
    .report-page .container-fluid > .row:not(.g-0) .form-select:focus {
        border-color: #34d399;
        box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.12);
    }

    /* ============ Distinct accent colour for every sidebar icon ============ */
    .app-menu > .menu-item:nth-child(1)  { --menu-accent: #2563eb; }
    .app-menu > .menu-item:nth-child(2)  { --menu-accent: #0891b2; }
    .app-menu > .menu-item:nth-child(3)  { --menu-accent: #059669; }
    .app-menu > .menu-item:nth-child(4)  { --menu-accent: #0d9488; }
    .app-menu > .menu-item:nth-child(5)  { --menu-accent: #ea580c; }
    .app-menu > .menu-item:nth-child(6)  { --menu-accent: #7c3aed; }
    .app-menu > .menu-item:nth-child(7)  { --menu-accent: #0284c7; }
    .app-menu > .menu-item:nth-child(8)  { --menu-accent: #d97706; }
    .app-menu > .menu-item:nth-child(9)  { --menu-accent: #4f46e5; }
    .app-menu > .menu-item:nth-child(10) { --menu-accent: #c026d3; }
    .app-menu > .menu-item:nth-child(11) { --menu-accent: #65a30d; }
    .app-menu > .menu-item:nth-child(12) { --menu-accent: #db2777; }
    .app-menu > .menu-item:nth-child(13) { --menu-accent: #b45309; }
    .app-menu > .menu-item:nth-child(14) { --menu-accent: #15803d; }
    .app-menu > .menu-item:nth-child(15) { --menu-accent: #475569; }
    .app-menu > .menu-item:nth-child(16) { --menu-accent: #9333ea; }
    .app-menu > .menu-item:nth-child(17) { --menu-accent: #0e7490; }
    .app-menu > .menu-item:nth-child(18) { --menu-accent: #dc2626; }

    .app-menu .menu-item .menu-link > .menu-icon,
    .app-menu .menu-item .menu-link > .menu-icon > i,
    .app-menu .menu-item .sub-menu .menu-link > i {
        color: var(--menu-accent, #059669);
    }

    .app-menu .menu-item .menu-link:hover > .menu-icon,
    .app-menu .menu-item .menu-link:focus > .menu-icon,
    .app-menu .menu-item .menu-link[aria-expanded="true"] > .menu-icon,
    .app-menu .menu-item.active > .menu-link > .menu-icon,
    .app-menu .menu-item .menu-link:hover > .menu-icon > i,
    .app-menu .menu-item.active > .menu-link > .menu-icon > i {
        color: var(--menu-accent, #047857);
    }

    .app-menu .menu-item .menu-link > .menu-icon > .text-danger {
        color: #dc2626 !important;
    }

    /* ---- Distinct colour per "All Reports" sub-menu icon ---- */
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(1)  { --menu-accent: #2563eb; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(2)  { --menu-accent: #059669; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(3)  { --menu-accent: #7c3aed; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(4)  { --menu-accent: #db2777; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(5)  { --menu-accent: #ea580c; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(6)  { --menu-accent: #0891b2; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(7)  { --menu-accent: #d97706; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(8)  { --menu-accent: #4f46e5; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(9)  { --menu-accent: #65a30d; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(10) { --menu-accent: #dc2626; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(11) { --menu-accent: #0d9488; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(12) { --menu-accent: #9333ea; }
    .app-menu #menuReports .sub-menu > .menu-item:nth-child(13) { --menu-accent: #b45309; }

    .app-menu #menuReports .sub-menu .menu-link > i {
        color: var(--menu-accent, #0891b2);
    }

    .app-menu #menuReports .sub-menu .menu-link:hover > i,
    .app-menu #menuReports .sub-menu .menu-link:focus > i {
        color: var(--menu-accent, #0891b2);
        filter: brightness(1.18);
    }

    /* ============================================================
       Navbar user chip (avatar + name + role)
       ============================================================ */
    .navbar-custom .topbar .nav-user {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.3rem 0.75rem 0.3rem 0.35rem;
        border-radius: 999px;
        border: 1px solid rgba(16, 185, 129, 0.28) !important;
        background: #ffffff !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
        text-decoration: none;
        transition: none !important;
    }

    /* no hover effect, decided on purpose */
    .navbar-custom .topbar .nav-user:hover,
    .navbar-custom .topbar .nav-user:focus,
    .navbar-custom .topbar .nav-user:active,
    .navbar-custom .topbar .nav-user.show,
    .navbar-custom .topbar .nav-user[aria-expanded="true"] {
        background: #ffffff !important;
        border-color: rgba(16, 185, 129, 0.28) !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
        color: inherit !important;
        transform: none !important;
        outline: none;
    }

    .navbar-custom .topbar .nav-user:hover .nav-user-name,
    .navbar-custom .topbar .nav-user:focus .nav-user-name,
    .navbar-custom .topbar .nav-user:hover .nav-user-role,
    .navbar-custom .topbar .nav-user:focus .nav-user-role {
        color: inherit;
    }

    .navbar-custom .topbar .nav-user:hover .nav-user-name,
    .navbar-custom .topbar .nav-user:focus .nav-user-name {
        color: #0f172a !important;
    }

    .navbar-custom .topbar .nav-user:hover .nav-user-role,
    .navbar-custom .topbar .nav-user:focus .nav-user-role {
        color: #059669 !important;
    }

    .navbar-custom .topbar .nav-user:focus-visible {
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(16, 185, 129, 0.28) !important;
    }

    /* hide Bootstrap's default caret */
    .navbar-custom .topbar .nav-user.dropdown-toggle::after {
        display: none;
    }

    .navbar-custom .topbar .nav-user .nav-user-avatar {
        position: relative;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        padding: 2px;
        border-radius: 50%;
        background: linear-gradient(135deg, #34d399 0%, #0ea5e9 100%);
        box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-custom .topbar .nav-user .nav-user-avatar::before {
        content: attr(data-initial);
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
        color: #ffffff;
        font-weight: 800;
        font-size: 0.95rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-custom .topbar .nav-user .nav-user-avatar img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ffffff;
        background: #ffffff;
    }

    .navbar-custom .topbar .nav-user .nav-user-status {
        position: absolute;
        z-index: 2;
        right: -1px;
        bottom: -1px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #22c55e;
        border: 2px solid #ffffff;
        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
    }

    .navbar-custom .topbar .nav-user .nav-user-meta {
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        text-align: left;
        line-height: 1.15;
    }

    .navbar-custom .topbar .nav-user .nav-user-name {
        display: block;
        font-size: 0.95rem;
        font-weight: 700;
        color: #0f172a !important;
        letter-spacing: 0.01em;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-custom .topbar .nav-user .nav-user-role {
        display: block;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: #059669;
    }

    .navbar-custom .topbar .nav-user .nav-user-caret {
        font-size: 1.15rem;
        color: #94a3b8;
        transition: transform 0.22s ease, color 0.22s ease;
    }

    .navbar-custom .topbar .nav-user[aria-expanded="true"] .nav-user-caret {
        transform: rotate(180deg);
        color: #059669;
    }

    @media (max-width: 767.98px) {
        .navbar-custom .topbar .nav-user {
            gap: 0;
            padding: 0.3rem;
        }
    }

    /* ============================================================
       Profile dropdown panel
       ============================================================ */
    .navbar-custom .profile-dropdown {
        min-width: 244px;
        padding: 0.4rem;
        border: 1px solid rgba(16, 185, 129, 0.22);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    }

    .navbar-custom .profile-dropdown .profile-dropdown-head {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.7rem 0.8rem;
        border-radius: 11px;
        background: linear-gradient(135deg, #ecfdf5 0%, #eff6ff 100%);
    }

    .navbar-custom .profile-dropdown .profile-dropdown-avatar {
        position: relative;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 2px;
        border-radius: 50%;
        background: linear-gradient(135deg, #34d399 0%, #0ea5e9 100%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-custom .profile-dropdown .profile-dropdown-avatar::before {
        content: attr(data-initial);
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
        color: #ffffff;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-custom .profile-dropdown .profile-dropdown-avatar img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ffffff;
    }

    .navbar-custom .profile-dropdown .profile-dropdown-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .navbar-custom .profile-dropdown .profile-dropdown-name {
        font-size: 0.92rem;
        font-weight: 700;
        color: #0f172a;
        max-width: 165px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-custom .profile-dropdown .profile-dropdown-mail {
        font-size: 0.76rem;
        color: #64748b;
        max-width: 165px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navbar-custom .profile-dropdown .dropdown-item {
        padding: 0.55rem 0.75rem;
        border-radius: 9px;
        font-weight: 600;
        color: #334155;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .navbar-custom .profile-dropdown .dropdown-item:hover,
    .navbar-custom .profile-dropdown .dropdown-item:focus {
        background: #ecfdf5;
        color: #047857;
    }

    .navbar-custom .profile-dropdown .dropdown-item.text-danger:hover,
    .navbar-custom .profile-dropdown .dropdown-item.text-danger:focus {
        background: #fef2f2;
        color: #dc2626;
    }

    .navbar-custom .profile-dropdown .dropdown-item i {
        color: inherit;
    }

    /* ============================================================
       Smooth hover states (no jumping / no heavy glow)
       ============================================================ */
    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode {
        border-radius: 12px;
        border: 1px solid rgba(16, 185, 129, 0.18);
        background: rgba(255, 255, 255, 0.7);
        box-shadow: none;
        transition: background-color 0.18s ease, color 0.18s ease,
                    border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link:hover,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link:focus,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode:hover,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode:focus {
        background: #d9f7ee;
        border-color: rgba(16, 185, 129, 0.42);
        box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.12);
        color: #047857;
        transform: none;
    }

    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link:hover i,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li:not(.dropdown) .nav-link:focus i,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode:hover i,
    .navbar-custom .topbar > ul.topbar-menu:last-child > li#theme-mode:focus i {
        color: #047857;
    }

    .navbar-custom .button-toggle-menu {
        border-radius: 12px;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .navbar-custom .button-toggle-menu:hover,
    .navbar-custom .button-toggle-menu:focus {
        background: #d9f7ee;
        color: #047857;
    }

    /* sidebar links: gentle tint instead of sliding */
    .app-menu .menu-item .menu-link {
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .app-menu .menu-item .menu-link:hover,
    .app-menu .menu-item .menu-link:focus,
    .app-menu .menu-item .menu-link[aria-expanded="true"] {
        transform: none;
    }

/* ==========================================================================
   NOTIFICATION BELL (topbar)
   Deletion alerts for administrators. Kept here rather than inline so the
   browser caches it with the rest of the skin.
   ========================================================================== */

.navbar-custom .notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-custom .notif-bell-badge {
    position: absolute;
    top: -1px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #be123c 0%, #f43f5e 100%);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px #ffffff, 0 4px 10px rgba(190, 18, 60, 0.35);
}

/* ---------------- Panel ---------------- */

.notif-panel {
    width: 370px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.18);
}

.notif-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.9rem;
    color: #312e81;
}

.notif-panel-title i {
    font-size: 1.1rem;
}

.notif-panel-count {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgba(244, 63, 94, 0.13);
    border: 1px solid rgba(244, 63, 94, 0.26);
    color: #be123c;
}

.notif-panel-body {
    max-height: 360px;
    overflow-y: auto;
}

.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    transition: background-color 0.15s ease;
}

.notif-row:last-child {
    border-bottom: none;
}

.notif-row:hover {
    background: rgba(99, 102, 241, 0.05);
}

.notif-row.is-unread {
    background: rgba(99, 102, 241, 0.07);
    box-shadow: inset 3px 0 0 #6366f1;
}

.notif-row-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 1.05rem;
    color: #ffffff;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}

.notif-row-icon.tone-rose    { background: linear-gradient(135deg, #be123c 0%, #f43f5e 100%); }
.notif-row-icon.tone-indigo  { background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 100%); }
.notif-row-icon.tone-blue    { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.notif-row-icon.tone-violet  { background: linear-gradient(135deg, #3730a3 0%, #6366f1 100%); }
.notif-row-icon.tone-emerald { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.notif-row-icon.tone-amber   { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
.notif-row-icon.tone-teal    { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); }
.notif-row-icon.tone-cyan    { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }
.notif-row-icon.tone-slate   { background: linear-gradient(135deg, #334155 0%, #64748b 100%); }

.notif-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.notif-row-title {
    display: block;
    font-weight: 800;
    font-size: 0.82rem;
    color: #1e293b;
}

.notif-row-msg {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 1px;
    word-break: break-word;
}

.notif-row-time {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 4px;
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 34px 16px;
    color: #94a3b8;
    font-size: 0.84rem;
    font-weight: 700;
}

.notif-empty i {
    font-size: 1.9rem;
    opacity: 0.45;
}

.notif-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fbfcff;
    border-top: 1px solid rgba(99, 102, 241, 0.16);
}

.notif-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.42rem 0.8rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 800;
    color: #4338ca;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.notif-foot-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    color: #312e81;
}

.notif-foot-primary {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(67, 56, 202, 0.24);
}

.notif-foot-primary:hover {
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
    color: #ffffff;
}

/* Tag beside a notification title in the header dropdown, so a deletion and an
   edit are distinguishable at a glance. */
.notif-row-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
    border: 1px solid transparent;
}

.notif-row-tag.is-del {
    background: rgba(244, 63, 94, 0.13);
    border-color: rgba(244, 63, 94, 0.26);
    color: #be123c;
}

.notif-row-tag.is-upd {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400e;
}