html {
    scrollbar-gutter: stable;
}

:root {
    --fa-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fa-surface: #ffffff;
    --fa-border: #e2e8f0;
    --fa-muted: #64748b;
    --fa-chart-grid: rgba(148, 163, 184, 0.12);
    --fa-sidebar-width: clamp(248px, 19vw, 332px);
    --fa-sidebar-group-max-h: 18rem;
    --fa-flash-blur: 5px;
    --fa-flash-dim: rgba(15, 23, 42, 0.28);
}

body {
    background: #f4f7fb;
    color: #0f172a;
    font-family: var(--fa-font-sans);
}

/* Global animated corner shades (project-wide) */
body.app-shell-layout,
body.admin-shell-layout,
body.auth-body {
    position: relative;
    isolation: isolate;
}

body.app-shell-layout::before,
body.app-shell-layout::after,
body.admin-shell-layout::before,
body.admin-shell-layout::after,
body.auth-body::before,
body.auth-body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
    filter: blur(42px);
    opacity: 0.68;
    border-radius: 999px;
    will-change: transform, opacity;
    animation: faCornerShadeLoop 18s ease-in-out infinite alternate;
}

body.app-shell-layout::before,
body.admin-shell-layout::before,
body.auth-body::before {
    width: clamp(16rem, 36vw, 34rem);
    height: clamp(16rem, 36vw, 34rem);
    top: -7rem;
    left: -6rem;
    background:
        radial-gradient(circle at 36% 34%, rgba(37, 99, 235, 0.5) 0%, rgba(14, 165, 233, 0.3) 46%, rgba(37, 99, 235, 0) 72%);
    animation-delay: 0s;
}

body.app-shell-layout::after,
body.admin-shell-layout::after,
body.auth-body::after {
    width: clamp(18rem, 40vw, 38rem);
    height: clamp(18rem, 40vw, 38rem);
    right: -8rem;
    bottom: -8rem;
    background:
        radial-gradient(circle at 58% 52%, rgba(147, 51, 234, 0.34) 0%, rgba(249, 115, 22, 0.26) 44%, rgba(147, 51, 234, 0) 74%);
    animation-delay: 2.2s;
}

@keyframes faCornerShadeLoop {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 0.58;
    }
    50% {
        transform: translate3d(1.1rem, -0.8rem, 0) scale(1.08) rotate(4deg);
        opacity: 0.73;
    }
    100% {
        transform: translate3d(-0.7rem, 0.9rem, 0) scale(1.03) rotate(-3deg);
        opacity: 0.63;
    }
}

.dashboard-body {
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-body {
    min-height: 100vh;
    overflow: hidden;
    background: #ffffff;
}

.auth-stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

.auth-stage.has-auth-flash {
    padding-top: 4.25rem;
}

.auth-flash-wrap {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(38rem, calc(100% - 1.5rem));
    z-index: 5;
}

/* Centered flash toast — one blur/dim layer over sidebar + main (clicks pass through) */
body.fa-flash-active .app-shell-wrap {
    position: relative;
}

body.fa-flash-active .app-shell-wrap::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--fa-flash-dim);
    -webkit-backdrop-filter: blur(var(--fa-flash-blur));
    backdrop-filter: blur(var(--fa-flash-blur));
    pointer-events: none;
}

.fa-flash-overlay {
    position: fixed;
    inset: 0;
    z-index: 1110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.fa-flash-overlay--visible {
    opacity: 1;
    pointer-events: none;
}

.fa-flash-overlay .fa-flash-card {
    pointer-events: auto;
}

.fa-flash-overlay--leaving {
    opacity: 0;
}

.fa-flash-card {
    position: relative;
    width: min(21rem, 100%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.15rem;
    padding: 1.35rem 1.25rem 1.15rem;
    text-align: center;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 16px 40px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    transform: scale(0.92) translateY(12px);
    opacity: 0;
    animation: faFlashCardIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fa-flash-overlay--leaving .fa-flash-card {
    animation: faFlashCardOut 0.2s ease forwards;
}

@keyframes faFlashCardIn {
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes faFlashCardOut {
    to {
        transform: scale(0.95) translateY(8px);
        opacity: 0;
    }
}

.fa-flash-ring-wrap {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 0.85rem;
}

.fa-flash-pulse {
    position: absolute;
    inset: 0.35rem;
    border-radius: 999px;
    opacity: 0.45;
    animation: faFlashPulse 1s ease-out infinite;
}

.fa-flash-card--success .fa-flash-pulse {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, rgba(34, 197, 94, 0) 70%);
}

.fa-flash-card--danger .fa-flash-pulse {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.32) 0%, rgba(239, 68, 68, 0) 70%);
}

.fa-flash-card--warning .fa-flash-pulse {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.34) 0%, rgba(245, 158, 11, 0) 70%);
}

.fa-flash-card--info .fa-flash-pulse {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.34) 0%, rgba(59, 130, 246, 0) 70%);
}

@keyframes faFlashPulse {
    0% {
        transform: scale(0.82);
        opacity: 0.55;
    }
    70% {
        transform: scale(1.12);
        opacity: 0.15;
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

.fa-flash-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    display: block;
}

.fa-flash-ring-track {
    fill: none;
    stroke: #e8eef5;
    stroke-width: 4;
}

.fa-flash-ring-bar {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    animation-name: faFlashRingCountdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.fa-flash-card--success .fa-flash-ring-bar {
    stroke: #22c55e;
}

.fa-flash-card--danger .fa-flash-ring-bar {
    stroke: #ef4444;
}

.fa-flash-card--warning .fa-flash-ring-bar {
    stroke: #f59e0b;
}

.fa-flash-card--info .fa-flash-ring-bar {
    stroke: #3b82f6;
}

@keyframes faFlashRingCountdown {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 264;
    }
}

.fa-flash-icon {
    position: absolute;
    inset: 0.72rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    animation: faFlashIconPop 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes faFlashIconPop {
    0% {
        transform: scale(0.55);
        opacity: 0;
    }
    65% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fa-flash-card--success .fa-flash-icon {
    color: #fff;
    background: linear-gradient(145deg, #22c55e, #16a34a);
}

.fa-flash-card--danger .fa-flash-icon {
    color: #fff;
    background: linear-gradient(145deg, #ef4444, #dc2626);
}

.fa-flash-card--warning .fa-flash-icon {
    color: #fff;
    background: linear-gradient(145deg, #fbbf24, #d97706);
}

.fa-flash-card--info .fa-flash-icon {
    color: #fff;
    background: linear-gradient(145deg, #60a5fa, #2563eb);
}

.fa-flash-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.fa-flash-message {
    margin: 0 0 0.4rem;
    font-size: 0.94rem;
    line-height: 1.4;
    font-weight: 600;
    color: #1e293b;
}

.fa-flash-helper {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .fa-flash-overlay,
    .fa-flash-card,
    .fa-flash-icon,
    .fa-flash-pulse,
    .fa-flash-ring-bar {
        animation: none !important;
        transition: none !important;
    }

    .fa-flash-card {
        transform: none;
        opacity: 1;
    }

    .fa-flash-ring-bar {
        stroke-dashoffset: 264;
    }

    .fa-flash-pulse {
        display: none;
    }
}

.auth-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
}

.auth-card {
    width: 100%;
    max-width: 27.5rem;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 1.1rem;
    box-shadow:
        0 34px 72px rgba(15, 23, 42, 0.2),
        0 10px 26px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 2;
    animation: authCardPopup 540ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-logo {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.9rem;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    font-size: 1.65rem;
    border: 1px solid #bfdbfe;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.22);
}

.auth-logo-letter {
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: 0.01em;
}

@keyframes authCardPopup {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes authPremiumDrift {
    0% {
        background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%;
    }
    100% {
        background-position: 8% 4%, 94% 6%, 52% 94%, 50% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell-layout::before,
    body.app-shell-layout::after,
    body.admin-shell-layout::before,
    body.admin-shell-layout::after,
    body.auth-body::before,
    body.auth-body::after {
        animation: none !important;
    }

    .auth-body {
        animation: none;
    }
    .auth-card,
    .auth-login-form.is-submitting .auth-login-btn__pulse {
        animation: none !important;
    }
}

.auth-input-group .input-group-text {
    background: #f8fafc;
    border-color: #dbe3ef;
    color: #64748b;
}

.auth-input-group .form-control {
    border-color: #dbe3ef;
}

.auth-input-group .form-control:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.16);
}

.auth-login-btn {
    min-height: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.auth-login-btn__label {
    position: relative;
    z-index: 2;
}

.auth-login-btn__pulse {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.auth-login-form.is-submitting .auth-login-btn {
    transform: scale(0.985);
}

.auth-login-form.is-submitting .auth-login-btn__pulse {
    animation: authSubmitPulse 700ms ease-out;
}

@keyframes authSubmitPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(24);
        opacity: 0;
    }
}

.sidebar {
    min-height: 100vh;
}

.app-shell {
    flex-wrap: nowrap;
}

.app-sidebar-col {
    width: var(--fa-sidebar-width);
    flex: 0 0 var(--fa-sidebar-width);
    max-width: var(--fa-sidebar-width);
    padding-left: 0;
    padding-right: 0;
}

.app-main-col {
    flex: 1 1 auto;
    width: calc(100% - var(--fa-sidebar-width));
    max-width: calc(100% - var(--fa-sidebar-width));
    min-width: 0;
    position: relative;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
}

.app-main {
    min-height: 100vh;
    overflow-x: hidden;
}

/* ——— Top bar: centered floating brand (popup chip) ——— */
.fa-topbar-shell {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.1rem;
}

.fa-topbar-left {
    display: none;
    align-items: center;
    gap: 0.4rem;
    z-index: 2;
}

.fa-topbar-menu-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #d6deea;
}

.fa-topbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    max-width: calc(100% - 18rem);
    pointer-events: none;
}

/* Colourful ring: colours shift around the pill edge (no spinning element) */
@property --fa-brand-ring-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.fa-topbar-brand-ring {
    position: relative;
    display: inline-flex;
    max-width: min(22rem, 100%);
    padding: 2px;
    border-radius: 9999px;
    overflow: hidden;
    isolation: isolate;
    pointer-events: auto;
}

.fa-topbar-brand-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--fa-brand-ring-angle),
        #4285f4,
        #34a853,
        #fbbc05,
        #ea4335,
        #4285f4
    );
    animation: fa-topbar-brand-ring-colors 3.5s linear infinite;
}

@keyframes fa-topbar-brand-ring-colors {
    to {
        --fa-brand-ring-angle: 360deg;
    }
}

.fa-topbar-brand-popup {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem 0.38rem;
    padding: 0.55rem 1.4rem;
    max-width: 100%;
    text-align: center;
    line-height: 1.28;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #0f172a;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: none;
    border-radius: 9999px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 32px rgba(15, 23, 42, 0.08),
        0 28px 64px rgba(37, 99, 235, 0.07);
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
    pointer-events: auto;
}

.fa-topbar-brand-ring:hover .fa-topbar-brand-popup {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 12px 36px rgba(15, 23, 42, 0.1),
        0 32px 70px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .fa-topbar-brand-ring::before {
        animation: none;
        --fa-brand-ring-angle: 0deg;
        background: conic-gradient(
            from 0deg,
            #4285f4,
            #34a853,
            #fbbc05,
            #ea4335,
            #4285f4
        );
    }
}

.fa-topbar-brand-sep {
    color: var(--fa-muted);
    font-weight: 500;
}

.fa-topbar-brand-tagline {
    font-weight: 500;
    color: var(--fa-muted);
    font-size: 0.895em;
}

.fa-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.fa-topbar-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #d6deea;
}

.fa-topbar-user {
    max-width: 10rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.fa-topbar-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-color: #d6deea;
    background: #fff;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .fa-topbar-shell {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .fa-topbar-center {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        pointer-events: auto;
        text-align: center;
    }

    .fa-topbar-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ——— Sidebar: Bootstrap 5 + dashboard “clean-card” look (Faizan Links ISP) ——— */
.fa-sidebar.sidebar {
    max-height: 100vh;
    border-color: #e2e8f0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.fa-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

.fa-sidebar-logo {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 52%, #06b6d4 100%);
}

.fa-sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 0.2rem !important;
    cursor: pointer;
    border-radius: 0.48rem;
    padding-right: 2rem !important;
    position: relative;
}

.fa-sidebar-section-label::after {
    content: "▼";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #1e3a8a;
    background: #e8f1ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 0.1rem 0.34rem;
    line-height: 1.05;
    transition: all 0.16s ease;
}

.fa-sidebar-section-label[aria-expanded="true"]::after {
    content: "▲";
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.fa-sidebar-section-label:hover {
    background: #f8fbff;
}

.fa-sidebar-section-label:hover::after {
    border-color: #60a5fa;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

.fa-sidebar .nav-pills .nav-link.fa-sidebar-pill {
    display: flex;
    align-items: center;
    color: #334155;
    font-weight: 600;
    font-size: 0.84rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

.fa-sidebar nav .mb-3 {
    margin-bottom: 0.6rem !important;
}

.fa-sidebar nav .mt-3 {
    margin-top: 0.7rem !important;
}

.fa-sidebar .nav-pills .nav-link.fa-sidebar-pill:hover {
    background-color: #eef5ff;
    border-color: #c9dcff;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.fa-sidebar .nav-pills .nav-link.fa-sidebar-pill.active {
    background-color: #1d4ed8;
    border-color: #1e40af;
    color: #fff;
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.25);
}

.fa-sidebar .nav-pills .nav-link.fa-sidebar-pill.active .fa-sidebar-pill-ico,
.fa-sidebar .nav-pills .nav-link.fa-sidebar-pill.active i {
    color: rgba(255, 255, 255, 0.95) !important;
}

.fa-sidebar .card.clean-card {
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}

/* Module category: Bootstrap collapse toggle */
.fa-sidebar-cat-toggle {
    background-color: #fff;
    color: #475569;
    box-shadow: none;
}

.fa-sidebar-cat-toggle:hover {
    background-color: #f8fafc;
    color: #1d4ed8;
}

.fa-sidebar-cat-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}

.fa-sidebar-cat-toggle:not(.collapsed) {
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
    color: #1e40af;
}

.fa-sidebar-cat-chevron {
    font-size: 0.8rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.fa-sidebar-cat-toggle:not(.collapsed) .fa-sidebar-cat-chevron {
    transform: rotate(180deg);
    color: #1d4ed8;
}

.fa-sidebar-cat-toggle.collapsed .fa-sidebar-cat-chevron {
    transform: rotate(0deg);
}

.fa-sidebar .list-group-item-action {
    color: #475569;
    font-weight: 500;
}

.fa-sidebar .list-group-item-action:hover {
    background-color: #f8fafc;
    color: #1d4ed8;
}

.fa-sidebar .list-group-item.active {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.fa-sidebar .list-group-item.active .fa-sidebar-module-ico {
    color: rgba(255, 255, 255, 0.95);
}

.fa-sidebar .fa-sidebar-module-ico {
    font-size: 1rem;
    color: #64748b;
    width: 1.25rem;
    text-align: center;
}

.fa-sidebar-group {
    border: 1px solid #e5edf8;
    border-radius: 0.72rem;
    background: #fff;
    padding: 0.1rem 0.3rem 0.32rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.fa-sidebar-group > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    margin: 0;
    border-radius: 0.42rem;
    position: relative;
    min-height: 1.35rem;
}

.fa-sidebar-group-toggle {
    display: block;
    width: 100%;
    text-align: right;
    padding: 0 !important;
    min-height: 0 !important;
}

.fa-sidebar-group > summary::-webkit-details-marker {
    display: none;
}

.fa-sidebar-group > summary::after {
    display: none;
}

.fa-sidebar-group.is-active {
    border-color: #bfdbfe;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.fa-sidebar-group > .nav {
    max-height: var(--fa-sidebar-group-max-h);
    overflow: auto;
    padding-right: 0.1rem;
}

.fa-sidebar-cat + .fa-sidebar-cat {
    margin-top: 0.18rem;
}

.fa-sidebar-brand {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.menu-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 0.75rem;
}

.menu-item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: #334155;
    text-decoration: none;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.menu-item:hover {
    background: #eef2ff;
}

.menu-item.active {
    background: #1d4ed8;
    color: white;
}

/* Collect bill / Receive list */
.collect-results-card .collect-results-wrap {
    max-height: min(28rem, 62vh);
    overflow: auto;
}

.collect-bills-table tbody tr.collect-bill-row {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.collect-bills-table .collect-col-notes {
    max-width: 11rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    color: #64748b;
}

.collect-bills-table .collect-col-notes[title]:not([title=""]) {
    cursor: help;
}

.collect-bills-table tbody tr.collect-bill-row:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.collect-pay-card .collect-summary {
    border-radius: 0.65rem;
}

/* Collect bill: payment card fits viewport width; dropdown scrolls independently */
.collect-pay-shell {
    width: min(52rem, 100%);
    max-width: 100%;
}

/* Compact collect bill: aim for one-screen layout on typical laptop viewports */
.collect-bill-page--compact .bills-category-tabs {
    margin-bottom: 0.5rem !important;
}

.collect-bill-page--compact .collect-page-intro p {
    max-width: 42rem;
    line-height: 1.35;
}

.collect-bill-page--compact.mt-2 {
    margin-top: 0.35rem !important;
}

.collect-pay-card--compact .collect-invoice-ac__opt {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.collect-bill-page--compact .collect-pay-shell {
    width: min(42rem, 100%);
}

.collect-pay-card--compact .collect-pay-card__head {
    padding: 0.45rem 0.75rem 0 !important;
}

.collect-pay-card--compact .collect-pay-card__title {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.collect-pay-card--compact .collect-pay-card-body {
    padding: 0 0.75rem 0.65rem !important;
}

.collect-pay-card--compact .form-label {
    font-size: clamp(0.74rem, 0.75vw, 0.82rem);
    font-weight: 600;
    line-height: 1.2;
}

/* Customer & invoice: no inner scroll; dense grid so content stays short */
.collect-detail--compact {
    overflow: visible;
}

.collect-detail--compact .collect-detail-inner {
    padding: 0.5rem 0.6rem !important;
    color: #0f172a;
}

.collect-detail--compact .collect-detail-title {
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 0.25rem !important;
}

.collect-detail--compact .collect-detail-label {
    font-size: 0.74rem;
    line-height: 1.25;
    font-weight: 600;
    color: #475569;
}

.collect-detail-grid--tiles {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.08rem 0.4rem;
    align-items: start;
    font-size: 0.78rem;
    line-height: 1.25;
}

@media (min-width: 400px) {
    .collect-detail-grid--tiles {
        grid-template-columns: auto 1fr auto 1fr;
        column-gap: 0.35rem 0.5rem;
        row-gap: 0.05rem;
    }
}

.collect-detail-grid--tiles dt {
    font-weight: 600;
    color: #475569;
    margin: 0;
    white-space: nowrap;
}

.collect-detail-grid--tiles dd {
    margin: 0 !important;
    color: #0f172a;
    font-weight: 500;
    min-width: 0;
    word-break: break-word;
}

.collect-detail-notes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 0.5rem;
    align-items: start;
}

@media (max-width: 399.98px) {
    .collect-detail-notes-grid {
        grid-template-columns: 1fr;
    }
}

.collect-pay-card--compact .collect-summary {
    border-radius: 0.5rem;
}

.collect-pay-card--compact .collect-summary-line {
    font-size: 0.76rem;
    line-height: 1.25;
}

.collect-summary-line--advance #sum_prev_due_label {
    color: #15803d !important;
    font-weight: 700;
}

.collect-summary-value--advance {
    color: #15803d !important;
}

.collect-pay-card--compact .collect-summary-balance {
    font-size: 1rem;
    line-height: 1.2;
}

.collect-pay-card--fit {
    overflow: visible;
}

.collect-pay-card--fit .collect-pay-card-body {
    overflow: visible;
}

.collect-invoice-ac .collect-invoice-clear {
    line-height: 1;
    text-decoration: none;
    color: #64748b;
    min-width: 1.5rem;
}

.collect-invoice-ac .collect-invoice-clear:hover {
    color: #0f172a;
}

.collect-invoice-ac__dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 1060;
    max-height: min(9.5rem, 26vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.collect-invoice-ac__opt:hover,
.collect-invoice-ac__opt:focus-visible {
    background: #eff6ff !important;
}

.collect-invoice-ac__opt.collect-invoice-ac--active,
.collect-invoice-ac__opt.collect-invoice-ac--active:focus-visible {
    background: #dbeafe !important;
    box-shadow: inset 0 0 0 1px #93c5fd;
}

.collect-detail-grid dt {
    font-weight: 500;
}

.collect-detail-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.76rem;
    line-height: 1.25;
    color: #0f172a;
}

.collect-pay-card--compact .collect-detail-pre {
    font-size: 0.74rem;
    line-height: 1.24;
}

.collect-detail-pre--fit {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    margin-top: 0.05rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Bills category tabs (Bills / Collect / Receive) */
.bills-category-tabs {
    gap: 0.4rem;
    flex-wrap: wrap;
}

.bills-category-tabs .nav-link {
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.38rem 0.8rem;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    touch-action: manipulation;
}

.bills-category-tabs .nav-link:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.bills-category-tabs .nav-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.bills-category-tabs .nav-link.active {
    background: #1d4ed8;
    border-color: #1e40af;
    color: #fff;
}

.correct-bill-module-tabs {
    scrollbar-width: thin;
}

[data-correct-bill-module].correct-bill-module--loading {
    opacity: 0.72;
    pointer-events: none;
}

/* Advance bill — scrollable main invoice list */
.ab-invoice-list-scroll thead.sticky-top {
    z-index: 2;
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.25);
}

.ab-invoice-list-card {
    max-height: min(70vh, 42rem);
}

.ab-invoice-list-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: min(68vh, 40rem);
}

.recv-toolbar .recv-owing-toggle .btn.active {
    background: #1d4ed8;
    border-color: #1e40af;
    color: #fff;
}

.recv-table-card .recv-table {
    font-size: 0.92rem;
}

.recv-table th,
.recv-table td {
    white-space: nowrap;
}

.recv-table th:nth-child(8),
.recv-table td:nth-child(8) {
    min-width: 15rem;
}

.recv-table th:nth-child(9),
.recv-table td:nth-child(9),
.recv-table th:nth-child(10),
.recv-table td:nth-child(10) {
    white-space: nowrap;
}

.recv-row--paid {
    border-left: 3px solid #2563eb;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06) 0%, transparent 12px);
}

.recv-row--unpaid {
    border-left: 3px solid #e11d48;
    background: linear-gradient(90deg, rgba(225, 29, 72, 0.06) 0%, transparent 12px);
}

.recv-badge--paid {
    background: #2563eb !important;
    color: #fff !important;
}

.recv-badge--unpaid {
    background: #e11d48 !important;
    color: #fff !important;
}

.recv-row--advance {
    border-left: 3px solid #16a34a;
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.08) 0%, transparent 12px);
}

.recv-chip-advance {
    margin-left: 0.35rem;
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac;
    font-weight: 700;
}

.recv-next-month-bar {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.recv-next-month-switch .form-check-input:checked {
    background-color: #7c3aed;
    border-color: #7c3aed;
}

.recv-chip-next-month {
    margin-left: 0.35rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    padding: 0.35em 0.65em;
}

.recv-chip-next-month--on {
    background: #7c3aed !important;
    color: #fff !important;
    border-color: #6d28d9;
}

.recv-chip-next-month--off {
    background: #f5f3ff !important;
    color: #5b21b6 !important;
    border-color: #c4b5fd;
}

.recv-chip-next-month--off:hover {
    background: #ede9fe !important;
    border-color: #a78bfa;
}

.recv-chip-next-month:disabled {
    opacity: 0.65;
    cursor: wait;
}

.recv-mobile-next-month {
    display: none;
}

.recv-mobile-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.recv-prev-balance {
    white-space: nowrap;
}

.recv-prev-balance--advance {
    display: inline-block;
    padding: 0.05rem 0.38rem;
    border-radius: 0.35rem;
    font-weight: 700;
    color: #15803d;
    background: rgba(220, 252, 231, 0.9);
    border: 1px solid #86efac;
}

.collect-paid-at-auto__lbl {
    font-size: 0.72rem;
    letter-spacing: 0.035em;
}

.collect-paid-at-auto__hint {
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 0.2rem;
}

.collect-bill-page--compact .collect-pay-card--compact {
    max-height: none;
}

.collect-bill-page--compact .collect-pay-card--compact .collect-pay-card-body {
    overflow-y: visible;
}

.recv-legend {
    font-size: 0.75rem;
    margin-right: 0.75rem;
    white-space: nowrap;
}

.recv-legend i {
    font-size: 0.45rem;
    vertical-align: 0.15em;
    margin-right: 0.2rem;
}

.recv-legend--paid i {
    color: #2563eb;
}

.recv-legend--unpaid i {
    color: #e11d48;
}

.recv-summary-footer {
    border-color: var(--fa-border) !important;
}

.recv-bill-notes {
    max-width: 18rem;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.recv-table .recv-notes-cell--empty {
    vertical-align: middle;
}

.recv-table .recv-notes-dash {
    display: inline-block;
    min-width: 1.25ch;
    line-height: inherit;
    vertical-align: baseline;
}

.recv-row--readonly {
    opacity: 0.97;
}

/* Sidebar: collapsible categories (compact, less scrolling) */
.sidebar-scroll {
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-accordion .accordion-item {
    background: transparent;
}

.sidebar-accordion .accordion-button.sidebar-accordion-btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem !important;
    box-shadow: none;
    margin-bottom: 0.35rem;
}

.sidebar-accordion .accordion-button.sidebar-accordion-btn:not(.collapsed) {
    background: #eef2ff;
    color: #1d4ed8;
    border-color: #c7d2fe;
}

.sidebar-accordion .accordion-button.sidebar-accordion-btn::after {
    margin-left: 0.35rem;
    transform: scale(0.85);
}

.sidebar-accordion .accordion-button.sidebar-accordion-btn:focus {
    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.2);
}

.sidebar-accordion .accordion-body {
    border: 0;
}

.sidebar-accordion-title {
    text-align: left;
    flex: 1;
    min-width: 0;
}

.menu-item-nested {
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem 0.4rem 1.75rem;
    margin-bottom: 0.15rem;
}

.clean-card {
    border: 0;
    border-radius: 0.9rem;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}

.modern-kpi {
    color: #fff;
    overflow: hidden;
    position: relative;
}

.modern-kpi::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -60px;
    top: -60px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 50%;
}

.card-gradient-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.card-gradient-teal {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.card-gradient-amber {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.card-gradient-violet {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
}

.card-gradient-slate {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.card-gradient-rose {
    background: linear-gradient(135deg, #be123c, #e11d48);
}

/* ——— Command center (Power BI–style density, BS5 cards) ——— */
.command-center .cc-hero {
    background: linear-gradient(125deg, #ffffff 0%, #f0f4ff 55%, #eef6ff 100%);
    border: 1px solid var(--fa-border) !important;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
}

.cc-hero-inner {
    padding: 1rem 1.25rem;
}

.cc-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cc-subtitle {
    max-width: 42rem;
    line-height: 1.45;
}

.cc-nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    color: #334155;
    background: #fff;
    border: 1px solid var(--fa-border);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cc-nav-pills .nav-link i {
    font-size: 1rem;
    opacity: 0.88;
}

.cc-nav-pills .nav-link:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
}

.cc-nav-pills .nav-link.active {
    background: linear-gradient(120deg, #1d4ed8, #3b82f6);
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 8px 22px rgba(29, 78, 216, 0.28);
}

.cc-nav-pills .nav-link.active i {
    color: rgba(255, 255, 255, 0.95);
}

.cc-hero-tight .cc-hero-inner {
    padding: 0.65rem 1rem;
}

.cc-viewport {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cc-viewport-tabs {
    flex-shrink: 0;
}

.cc-viewport-panes {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chart-canvas-wrap--cc {
    position: relative;
    flex: 1 1 auto;
    min-height: 160px;
    height: 100%;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.chart-canvas-wrap--cc-short {
    min-height: 120px;
    height: 150px;
    flex: 0 0 auto;
}

.cc-kpi-grid--tight {
    gap: 0.4rem;
}

@media (min-width: 768px) {
    .cc-pane-subscribers .cc-kpi-grid--tight {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.cc-table-clip-inner {
    max-height: 7.5rem;
    overflow-y: auto;
}

.cc-bill-status-list li:last-child {
    border-bottom: 0 !important;
}

@media (min-width: 1200px) {
    .dashboard-main:has(.command-center--full) {
        height: 100vh;
        min-height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    .dashboard-main:has(.command-center--full) section.dashboard-section.command-center {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        margin-top: 0.25rem !important;
    }

    .command-center--full .cc-viewport {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    .command-center--full .cc-viewport-panes {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    .command-center--full .cc-viewport-panes.dashboard-tab-content {
        padding-bottom: 0;
    }

    .command-center--full .cc-viewport-pane.tab-pane.active {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .command-center--full .cc-viewport-pane-inner {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        gap: 0.35rem;
    }

    .command-center--full .cc-pane-subscribers {
        display: grid;
        grid-template-rows: auto minmax(120px, 1fr);
        overflow: hidden;
    }

    .command-center--full .cc-pane-subscribers .cc-subscriber-finance .chart-canvas-wrap--cc {
        min-height: min(32vh, 280px);
    }

    .command-center--full .cc-pane-billing {
        display: grid;
        grid-template-rows: auto minmax(140px, 1fr);
        overflow: hidden;
    }

    .command-center--full .cc-pane-cash {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .command-center--full .cc-pane-cash .cc-latest-payments-card--fit {
        min-height: 0;
        height: auto;
        flex: 0 0 auto;
    }

    .command-center--full .cc-pane-cash .cc-latest-payments-table--compact {
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .command-center--full .cc-pane-cash .cc-latest-payments-table--compact th,
    .command-center--full .cc-pane-cash .cc-latest-payments-table--compact td {
        padding: 0.14rem 0.35rem;
        vertical-align: middle;
    }

    .command-center--full .cc-pane-cash .cc-latest-payments-table--compact thead th {
        font-size: 0.68rem;
        font-weight: 600;
        color: #64748b;
    }

    .command-center--full .cc-pane-cash .cc-latest-pay-name {
        max-width: 14rem;
    }

    .command-center--full .cc-collections-latest-wrap {
        flex: 0 0 auto;
    }

    .command-center--full .cc-pane-revenue {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .command-center--full .cc-pane-revenue .chart-canvas-wrap--revenue-trend {
        min-height: 240px;
    }

    .command-center--full .cc-pane-revenue .chart-canvas-wrap--revenue-new-customers {
        min-height: min(52vh, 22rem);
    }

    .command-center--full .cc-pane-network .chart-canvas-wrap--network-packages {
        min-height: min(42vh, 18rem);
        max-height: min(52vh, 24rem);
    }

    .command-center--full .cc-pane-profit {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .command-center--full .cc-pane-profit .chart-canvas-wrap--profit {
        min-height: 168px;
    }

    .chart-canvas-wrap--cc-mini {
        position: relative;
        width: 100%;
        height: 132px;
        min-height: 132px;
        flex: 0 0 132px;
    }

    .chart-canvas-wrap--revenue-trend {
        min-height: 156px;
    }

    .command-center--full .cc-pane-modules {
        overflow-y: auto;
    }
}

/* Laptop range: keep dashboard panes fluid to prevent clipped content. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .dashboard-main:has(.command-center--full) {
        height: auto;
        min-height: 100vh;
        max-height: none;
        overflow: visible;
    }

    .dashboard-main:has(.command-center--full) section.dashboard-section.command-center,
    .command-center--full .cc-viewport,
    .command-center--full .cc-viewport-panes,
    .command-center--full .cc-viewport-pane.tab-pane.active,
    .command-center--full .cc-viewport-pane-inner {
        overflow: visible;
        height: auto;
        max-height: none;
    }

    .command-center--full .cc-pane-today-reports .chart-canvas-wrap--cc {
        min-height: 180px;
    }
}

@media (max-width: 991.98px) {
    .command-center--full .cc-viewport-pane-inner:not(.cc-pane-modules) {
        max-height: min(32rem, 72vh);
        overflow-y: auto;
    }
}

/* Customers list photo: desktop circle, mobile square card */
.excel-table-module[data-excel-module="customers"] .customer-photo-block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.excel-table-module[data-excel-module="customers"] .customer-photo-btn {
    border: 0;
    background: transparent;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.excel-table-module[data-excel-module="customers"] .customer-photo-square {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f1f5f9;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.excel-table-module[data-excel-module="customers"] .customer-photo-empty {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-weight: 600;
    font-size: 0.48rem;
    line-height: 1.08;
    text-align: center;
    padding: 0 2px;
    background: #f8fafc;
}

.customer-photo-viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 10800;
    box-sizing: border-box;
    padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) max(0.5rem, env(safe-area-inset-left, 0px));
}

.customer-photo-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.76);
    z-index: 0;
}

.customer-photo-viewer__dialog {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    pointer-events: none;
}

.customer-photo-viewer__dialog img {
    max-width: min(96vw, 980px);
    max-height: 85vh;
    max-height: 85dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.38);
    background: #fff;
    pointer-events: auto;
    -webkit-user-drag: none;
    user-select: none;
}

.customer-photo-viewer__close {
    position: absolute;
    top: max(0.55rem, env(safe-area-inset-top, 0px));
    right: max(0.65rem, env(safe-area-inset-right, 0px));
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

html.customer-photo-viewer-open,
body.customer-photo-viewer-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

@media (max-width: 767.98px) {
    .mobile-table-wrap {
        display: none;
    }

    .mobile-data-card {
        border-color: #dbe3ef !important;
        border-radius: 0.65rem;
        background: #fff;
    }

    .mobile-data-card .card-body {
        padding: 0.68rem !important;
    }

    .mobile-data-card .fw-semibold {
        line-height: 1.25;
    }

    .mobile-data-card .small {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .mobile-data-card .badge {
        font-weight: 600;
        padding: 0.38rem 0.5rem;
    }

    .mobile-data-card .btn.btn-sm {
        min-height: 2.25rem;
        padding-top: 0.38rem;
        padding-bottom: 0.38rem;
        font-weight: 600;
    }

    .receive-list-page .recv-next-month-bar {
        text-align: center;
        padding-bottom: 0.65rem;
    }

    .receive-list-page .recv-next-month-switch {
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        gap: 0.55rem;
        max-width: 100%;
        margin: 0 auto;
        text-align: left;
    }

    .receive-list-page .recv-next-month-switch .form-check-input {
        flex-shrink: 0;
        margin-top: 0.15rem;
    }

    .receive-list-page .recv-next-month-switch .form-check-label {
        line-height: 1.35;
    }

    .recv-mobile-card-head {
        align-items: flex-start !important;
    }

    .recv-mobile-status {
        flex: 0 0 auto;
        max-width: 46%;
    }

    .recv-mobile-status-stack {
        align-items: center;
        gap: 0.4rem;
    }

    .recv-mobile-status-primary .badge {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .recv-mobile-next-month {
        display: block;
        width: 100%;
    }

    .recv-mobile-next-month .recv-chip-next-month {
        margin-left: 0;
        display: block;
        width: 100%;
        min-width: 6.75rem;
        padding: 0.42rem 0.65rem;
        font-size: 0.78rem;
        text-align: center;
    }

    .recv-mobile-status-extra {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        justify-content: center;
    }

    .recv-mobile-status-extra .recv-chip-advance {
        margin-left: 0;
        font-size: 0.72rem;
        white-space: normal;
        text-align: center;
    }

    .recv-mobile-amounts {
        justify-content: flex-start;
    }

    .recv-mobile-amounts .badge {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 0;
        text-align: center;
    }

    .recv-mobile-card .d-grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .recv-mobile-card .d-grid > .d-flex {
        flex: 1 1 100%;
        justify-content: stretch !important;
    }

    .recv-mobile-card .d-grid .btn {
        flex: 1 1 auto;
        min-height: 2.35rem;
    }

    .mobile-list-page .btn.btn-sm {
        min-height: 2.2rem;
    }

    body {
        padding-bottom: 4.6rem;
    }

    .auth-body {
        padding-bottom: 0;
        overflow: hidden;
    }

    .mobile-sticky-actionbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(244, 247, 251, 0.9) 0%, rgba(244, 247, 251, 0.98) 100%);
        border-top: 1px solid #dbe3ef;
        backdrop-filter: blur(4px);
    }

    .mobile-sticky-actionbar-inner {
        max-width: 38rem;
        margin: 0 auto;
    }

    .mobile-sticky-actionbar .btn {
        min-height: 2.35rem;
        font-weight: 600;
    }

    .excel-table-module[data-excel-module="customers"] .table th,
    .excel-table-module[data-excel-module="customers"] .table td {
        font-size: 0.84rem;
        padding-top: 0.56rem;
        padding-bottom: 0.56rem;
    }

    .excel-table-module[data-excel-module="customers"] .table td .btn.btn-sm {
        min-height: 2rem;
    }

    .excel-table-module[data-excel-module="customers"] .table-responsive {
        overflow-x: clip;
    }

    .excel-table-module[data-excel-module="customers"] table.table {
        width: 100%;
        table-layout: fixed;
    }

    .excel-table-module[data-excel-module="customers"] table.table thead {
        display: none;
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody tr {
        display: block;
        margin: 0.5rem 0.5rem 0.7rem;
        border: 1px solid #dbe3ef;
        border-radius: 0.65rem;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody td {
        display: grid;
        grid-template-columns: 7.1rem 1fr;
        align-items: start;
        gap: 0.35rem;
        border: 0 !important;
        padding: 0.42rem 0.62rem !important;
        white-space: normal;
        word-break: break-word;
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody td::before {
        content: attr(data-label);
        color: #64748b;
        font-weight: 600;
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody td:first-child {
        grid-template-columns: 1fr;
        padding-bottom: 0.1rem !important;
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody td:first-child::before {
        display: none;
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody td:last-child {
        grid-template-columns: 1fr;
        padding-top: 0.25rem !important;
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody td:last-child::before {
        margin-bottom: 0.2rem;
    }

    .excel-table-module[data-excel-module="customers"] table.table tbody td:last-child .btn,
    .excel-table-module[data-excel-module="customers"] table.table tbody td:last-child form {
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .excel-table-module[data-excel-module="customers"] .customer-photo-block {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.15rem 0 0.4rem;
    }

    .excel-table-module[data-excel-module="customers"] .customer-photo-btn {
        width: min(72vw, 220px);
        height: auto;
        border-radius: 0.8rem;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .excel-table-module[data-excel-module="customers"] .customer-photo-square {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .excel-table-module[data-excel-module="customers"] .customer-photo-empty {
        width: min(72vw, 220px);
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 0.8rem;
        font-size: 0.8rem;
        line-height: 1.2;
        padding: 0;
    }
}

/* Dashboard KPIs: compact light tiles (4 + 4 + full-width summary) */
.cc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

.cc-kpi-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cc-kpi-cell > a.card,
.cc-kpi-cell > div.card {
    flex: 1 1 auto;
    min-height: 0;
}

.cc-kpi-cell--wide {
    grid-column: 1 / -1;
}

@media (min-width: 576px) {
    .cc-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Command center — employee cash ledger tab */
.cc-ledger-formula-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.cc-ledger-formula-term {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--fa-border, #e2e8f0);
    min-width: 5.5rem;
}

.cc-ledger-formula-term--result {
    background: rgba(13, 110, 253, 0.08);
    border-color: rgba(13, 110, 253, 0.25);
}

.cc-ledger-formula-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
}

.cc-ledger-formula-value {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.cc-ledger-formula-op {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
}

.cc-ledger-kpi-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

@media (min-width: 576px) {
    .cc-ledger-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .cc-ledger-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cc-ledger-kpi-cell {
    min-width: 0;
    display: flex;
}

.cc-ledger-kpi {
    flex: 1 1 auto;
    border-radius: 0.75rem !important;
    border: 1px solid var(--fa-border, #e2e8f0) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.cc-ledger-kpi--opening {
    border-top: 3px solid #64748b !important;
}

.cc-ledger-kpi--collected {
    border-top: 3px solid #198754 !important;
}

.cc-ledger-kpi--submitted {
    border-top: 3px solid #0d6efd !important;
}

.cc-ledger-kpi--closing {
    border-top: 3px solid #b45309 !important;
}

.cc-ledger-kpi-icon {
    font-size: 1.1rem;
    opacity: 0.55;
}

.cc-ledger-kpi-total {
    font-variant-numeric: tabular-nums;
}

.cc-ledger-kpi-breakdown {
    max-height: 9rem;
    overflow-y: auto;
    font-size: 0.8rem;
}

.cc-ledger-kpi-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.cc-ledger-kpi-breakdown-row + .cc-ledger-kpi-breakdown-row {
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
}

.cc-ledger-kpi-emp {
    flex: 1 1 auto;
    min-width: 0;
    color: #334155;
}

.cc-ledger-kpi-emp-amt {
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* Light KPI tiles (replaces dark gradient stat cards) */
.cc-kpi-tile {
    display: flex;
    flex-direction: column;
    background: #fff !important;
    border: 1px solid var(--fa-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cc-kpi-tile:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

/* Subscriber summary: five distinct status tiles */
.cc-kpi-grid--subscriber {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

@media (min-width: 992px) {
    .command-center--full .cc-kpi-grid--subscriber.cc-kpi-grid--tight {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.cc-kpi-tile--subscriber {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.cc-kpi-tile--subscriber:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1) !important;
}

.cc-kpi-tile--sub-total {
    border-left: 3px solid #6366f1 !important;
    background: linear-gradient(160deg, #f5f3ff 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-total .cc-kpi-tile-ico {
    color: #6366f1;
}

.cc-kpi-tile--sub-active {
    border-left: 3px solid #10b981 !important;
    background: linear-gradient(160deg, #ecfdf5 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-active .cc-kpi-tile-ico {
    color: #059669;
}

.cc-kpi-tile--sub-deactivated {
    border-left: 3px solid #ef4444 !important;
    background: linear-gradient(160deg, #fef2f2 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-deactivated .cc-kpi-tile-ico {
    color: #dc2626;
}

.cc-kpi-tile--sub-free {
    border-left: 3px solid #2563eb !important;
    background: linear-gradient(160deg, #eff6ff 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-free .cc-kpi-tile-ico {
    color: #1d4ed8;
}

.cc-kpi-tile--sub-suspended {
    border-left: 3px solid #f59e0b !important;
    background: linear-gradient(160deg, #fffbeb 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-suspended .cc-kpi-tile-ico {
    color: #d97706;
}

/* Collections tab — month KPI row (5 tiles) */
.cc-kpi-grid--collections-strip {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

@media (min-width: 1200px) {
    .command-center--full .cc-kpi-grid--collections-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.command-center .cc-kpi-tile-body .cc-kpi-tile-sub {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.cc-kpi-tile--collections-total {
    border-left: 3px solid #2563eb !important;
    background: linear-gradient(160deg, #eff6ff 0%, #fff 58%) !important;
}

.cc-kpi-tile--collections-total .cc-kpi-tile-ico {
    color: #1d4ed8;
}

.cc-kpi-tile--collections-previous-due {
    border-left: 3px solid #b45309 !important;
    background: linear-gradient(160deg, #fffbeb 0%, #fff 58%) !important;
}

.cc-kpi-tile--collections-previous-due .cc-kpi-tile-ico {
    color: #b45309;
}

.cc-kpi-tile--collections-advance {
    border-left: 3px solid #0d9488 !important;
    background: linear-gradient(160deg, #ecfdf5 0%, #fff 58%) !important;
}

.cc-kpi-tile--collections-advance .cc-kpi-tile-ico {
    color: #0f766e;
}

.cc-kpi-grid--subscriber-money {
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
}

@media (min-width: 1200px) {
    .command-center--full .cc-kpi-grid--subscriber-money {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cc-kpi-tile--sub-money-collected {
    border-left: 3px solid #0d9488 !important;
    background: linear-gradient(160deg, #ecfdf5 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-money-collected .cc-kpi-tile-ico {
    color: #0f766e;
}

.cc-kpi-tile--sub-money-unpaid {
    border-left: 3px solid #d97706 !important;
    background: linear-gradient(160deg, #fffbeb 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-money-unpaid .cc-kpi-tile-ico {
    color: #b45309;
}

.cc-kpi-tile--sub-money-people {
    border-left: 3px solid #7c3aed !important;
    background: linear-gradient(160deg, #f5f3ff 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-money-people .cc-kpi-tile-ico {
    color: #6d28d9;
}

.cc-kpi-tile--sub-money-expense {
    border-left: 3px solid #e11d48 !important;
    background: linear-gradient(160deg, #fff1f2 0%, #fff 58%) !important;
}

.cc-kpi-tile--sub-money-expense .cc-kpi-tile-ico {
    color: #be123c;
}

/* Collections tab — cash KPI hues */
.cc-kpi-tile--cash-unpaid {
    border-left: 3px solid #f59e0b !important;
    background: linear-gradient(160deg, #fffbeb 0%, #fff 55%) !important;
}

.cc-kpi-tile--cash-unpaid .cc-kpi-tile-ico {
    color: #d97706;
}

.cc-kpi-tile--cash-collected {
    border-left: 3px solid #10b981 !important;
    background: linear-gradient(160deg, #ecfdf5 0%, #fff 55%) !important;
}

.cc-kpi-tile--cash-collected .cc-kpi-tile-ico {
    color: #059669;
}

.cc-kpi-tile--cash-pending {
    border-left: 3px solid #6366f1 !important;
    background: linear-gradient(160deg, #eef2ff 0%, #fff 55%) !important;
}

.cc-kpi-tile--cash-pending .cc-kpi-tile-ico {
    color: #4f46e5;
}

.cc-kpi-tile--cash-mine .cc-kpi-tile-ico {
    color: #1d4ed8 !important;
}

.cc-kpi-tile--emphasis.cc-kpi-tile--cash-mine {
    border-left: 3px solid #2563eb !important;
}

/* Profit tab KPIs */
.cc-kpi-tile--profit-collected {
    border-left: 3px solid #0d9488 !important;
    background: linear-gradient(160deg, #ecfdf5 0%, #fff 58%) !important;
}

.cc-kpi-tile--profit-collected .cc-kpi-tile-ico {
    color: #0f766e;
}

.cc-kpi-tile--profit-expense {
    border-left: 3px solid #e11d48 !important;
    background: linear-gradient(160deg, #fff1f2 0%, #fff 58%) !important;
}

.cc-kpi-tile--profit-expense .cc-kpi-tile-ico {
    color: #be123c;
}

.cc-kpi-tile--profit-net {
    border-left: 3px solid #6366f1 !important;
    background: linear-gradient(160deg, #f5f3ff 0%, #fff 58%) !important;
}

.cc-kpi-tile--profit-net .cc-kpi-tile-ico {
    color: #5b21b6;
}

.cc-profit-stat {
    border-radius: 0.75rem;
}

.cc-profit-stat--collected {
    border-left: 3px solid #0d9488;
}

.cc-profit-stat--expenses {
    border-left: 3px solid #e11d48;
}

.cc-profit-stat--net {
    border-left: 3px solid #6366f1;
}

.cc-kpi-tile--emphasis {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 55%) !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08);
}

.cc-kpi-tile-body {
    padding: 0.45rem 0.55rem !important;
    min-height: 3.35rem;
}

@media (min-width: 576px) {
    .cc-kpi-tile-body {
        min-height: 3.5rem;
        padding: 0.5rem 0.6rem !important;
    }
}

.command-center .cc-kpi-tile-label,
.command-center .cc-kpi-tile .kpi-label {
    color: #64748b !important;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.command-center .cc-kpi-tile-value,
.command-center .cc-kpi-tile .kpi-value {
    color: #0f172a !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .command-center .cc-kpi-tile-value,
    .command-center .cc-kpi-tile .kpi-value {
        font-size: 1.05rem;
    }
}

.command-center .cc-kpi-tile-ico,
.command-center .cc-kpi-tile .kpi-icon {
    color: #3b82f6 !important;
    opacity: 0.92;
    font-size: 1rem !important;
}

.cc-kpi-tile--emphasis .cc-kpi-tile-ico,
.cc-kpi-tile--emphasis .kpi-icon {
    color: #1d4ed8 !important;
}

a.cc-kpi-tile.cc-kpi-tile--link {
    display: flex;
    flex-direction: column;
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
}

a.cc-kpi-tile.cc-kpi-tile--link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

a.cc-kpi-tile.cc-kpi-tile--link .card-body {
    flex: 1 1 auto;
}

.cc-network-shortcuts .cc-link-card .card-body {
    min-height: 3rem;
}

.cc-pane-modules {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Legacy gradient stat card (unused on command center KPIs) */
.cc-stat-card {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.cc-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14) !important;
}

.cc-chart-card,
.cc-panel,
.cc-data-card {
    border: 1px solid var(--fa-border) !important;
    border-radius: 1rem !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.command-center .cc-chart-card,
.command-center .cc-data-card,
.command-center .cc-panel {
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 70%) !important;
}

.command-center .cc-data-card--bill-today {
    background: linear-gradient(165deg, #eff6ff 0%, #fff 65%) !important;
    border-color: #bfdbfe !important;
}

.command-center .cc-data-card--bill-week {
    background: linear-gradient(165deg, #f5f3ff 0%, #fff 65%) !important;
    border-color: #ddd6fe !important;
}

.command-center .cc-data-card--bill-month {
    background: linear-gradient(165deg, #ecfdf5 0%, #fff 65%) !important;
    border-color: #a7f3d0 !important;
}

.cc-chart-card:hover,
.cc-panel:hover,
.cc-data-card:hover {
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px);
}

.command-center .cc-chart-card:hover,
.command-center .cc-panel:hover,
.command-center .cc-data-card:hover {
    border-color: #cbd5e1 !important;
}

.cc-chart-card .card-header,
.cc-data-card .card-header {
    border-radius: 1rem 1rem 0 0 !important;
}

.fa-notif-menu {
    min-width: 20rem;
    max-width: min(22rem, 96vw);
}

.fa-notif-list {
    max-height: 22rem;
    overflow-y: auto;
}

.fa-notif-item--unread {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), transparent);
}

.cc-panel-head {
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%) !important;
    border-radius: 1rem 1rem 0 0;
}

.cc-link-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a:hover .cc-link-card {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
    border-color: #93c5fd !important;
}

.cc-link-ico {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
    color: #1d4ed8;
    font-size: 1.15rem;
}

.cc-table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fa-muted);
    border-bottom-color: var(--fa-border);
}

.chart-canvas-wrap--tall {
    height: 220px;
    min-height: 200px;
}

.chart-canvas-wrap--role {
    height: 220px;
    min-height: 200px;
}

.cc-scroll-pane {
    min-height: 0;
}

.kpi-label {
    color: rgba(255, 255, 255, 0.85);
}

.kpi-value {
    color: #fff;
    font-weight: 700;
}

.kpi-foot {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
}

.kpi-icon {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.94);
}

.btn-theme-light {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.btn-theme-light:hover {
    background: #dbeafe;
    color: #1e40af;
}

.table th {
    white-space: nowrap;
    font-size: 0.85rem;
}

.table td {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
}

.live-search-input {
    min-width: 260px;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

.dashboard-header-card {
    background: linear-gradient(120deg, #ffffff, #f3f7ff);
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
}

.dashboard-tabs {
    gap: 0.5rem;
}

.dashboard-tabs .nav-link {
    border-radius: 999px;
    color: #334155;
    background: #eef2ff;
    border: 1px solid #dbeafe;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.dashboard-tabs .nav-link.active {
    background: linear-gradient(120deg, #2563eb, #3b82f6);
    color: #fff;
    border-color: #2563eb;
}

.dashboard-main {
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
}

.dashboard-main > *:not(.dashboard-section) {
    flex-shrink: 0;
}

.dashboard-main > .container-fluid,
.dashboard-main .row {
    min-height: 0;
}

.mobile-tabs-row {
    scrollbar-width: thin;
    padding-bottom: 0.15rem;
}

.dashboard-main section {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.dashboard-section {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.dashboard-overview-only,
.dashboard-tab-content {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
}

.dashboard-tab-content .tab-pane {
    height: auto;
    overflow: visible;
    padding-bottom: 0.75rem;
}

/* Prevent Today Reports charts from pushing outside viewport. */
.cc-pane-today-reports .row > [class*="col-"] {
    min-width: 0;
}

.cc-pane-today-reports .cc-chart-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.cc-pane-today-reports .chart-canvas-wrap--cc {
    min-height: 200px;
}

.cc-pane-today-reports .cc-chart-card .card-header {
    min-height: 3.1rem;
}

.cc-pane-today-reports .cc-chart-card .card-body {
    display: flex;
    flex-direction: column;
}

.chart-canvas-wrap {
    position: relative;
    height: 220px;
    min-height: 200px;
    width: 100%;
}

.chart-canvas-wrap--wide {
    height: 240px;
    min-height: 220px;
}

.cc-chart-card .chart-canvas-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.dashboard-chart-grid {
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
}

.kpi-compact .kpi-value {
    font-size: 1.1rem;
}

.kpi-icon-sm {
    font-size: 1.1rem;
    opacity: 0.95;
}

.dashboard-table-clip {
    max-height: 9.5rem;
    overflow: hidden;
}

.dashboard-module-links .btn {
    font-size: 0.75rem;
}

.compact-table-scroll {
    max-height: 290px;
    overflow-y: auto;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.module-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.86rem;
}

@media (max-width: 992px) {
    .app-shell-layout .fa-topbar-left,
    .admin-shell-layout .fa-topbar-left {
        display: inline-flex;
    }

    .app-shell-layout .fa-topbar-center,
    .admin-shell-layout .fa-topbar-center {
        position: static;
        transform: none;
        max-width: none;
        width: auto;
        margin-inline: auto;
    }

    .app-shell-layout .fa-topbar-brand-popup,
    .admin-shell-layout .fa-topbar-brand-popup {
        padding: 0.45rem 0.85rem;
        font-size: 0.84rem;
    }

    .app-shell-layout .fa-topbar-brand-ring,
    .admin-shell-layout .fa-topbar-brand-ring {
        padding: 1.5px;
    }

    .app-shell {
        flex-wrap: wrap;
    }
    .app-sidebar-col,
    .app-main-col {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        max-height: 100vh;
        width: min(86vw, 320px);
        max-width: min(86vw, 320px);
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 0 16px 44px rgba(15, 23, 42, 0.22);
        z-index: 1045;
    }

    body.fa-mobile-sidebar-open {
        overflow: hidden;
    }

    body.fa-mobile-sidebar-open .app-sidebar,
    body.fa-mobile-sidebar-open .fa-admin-sidebar[data-mobile-sidebar] {
        transform: translateX(0);
    }

    .app-shell-layout [data-mobile-main]::before,
    .admin-shell-layout [data-mobile-main]::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.28);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 1040;
    }

    body.fa-mobile-sidebar-open [data-mobile-main]::before {
        opacity: 1;
        pointer-events: auto;
    }

    .fa-admin-sidebar[data-mobile-sidebar] {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(86vw, 320px);
        max-width: min(86vw, 320px);
        max-height: 100vh;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        z-index: 1045;
        box-shadow: 0 16px 44px rgba(15, 23, 42, 0.22);
        overflow-y: auto;
    }

    .app-main,
    .admin-shell-layout main {
        padding: 1rem !important;
    }

    .fa-sidebar-group > summary {
        min-height: 0;
    }

    .fa-sidebar-section-label::after {
        font-size: 0.68rem;
        padding: 0.16rem 0.44rem;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .table td,
    .table th {
        font-size: 0.8rem;
    }

    .table th {
        white-space: nowrap;
    }

    .table td {
        white-space: normal;
    }

    .btn,
    .form-control,
    .form-select {
        min-height: 2.35rem;
    }

    .input-group .btn {
        min-height: 2.35rem;
    }

    .live-search-input {
        min-width: 0;
        width: 100%;
    }

    .fa-notif-menu {
        min-width: min(18rem, 92vw);
        max-width: 92vw;
    }

    .collect-results-card .collect-results-wrap {
        max-height: min(20rem, 48vh);
    }

    .recv-table th:nth-child(8),
    .recv-table td:nth-child(8) {
        min-width: 11rem;
    }

    .cc-pane-today-reports .chart-canvas-wrap--cc {
        min-height: 170px;
    }
}

/* Staff & access hub */
.fa-staff-hub-header h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fa-staff-tabs .nav-link {
    border-radius: 2rem;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    background: #f1f5f9;
    border: 1px solid transparent;
}

.fa-staff-tabs .nav-link.active {
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 0.2rem 0.5rem rgba(var(--bs-primary-rgb), 0.25);
}

.fa-staff-roster-card .fa-staff-roster-list {
    max-height: min(32rem, 65vh);
    overflow-y: auto;
}

.fa-staff-roster-list .list-group-item {
    border-left: 3px solid transparent;
    transition: background 0.12s ease;
}

.fa-staff-roster-list .list-group-item.active {
    border-left-color: #fff;
}

.fa-staff-empty-card {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.fa-staff-modules-header {
    padding: 1.25rem 1.5rem;
}

.fa-staff-modules-header-main h5 {
    font-weight: 700;
}

.fa-staff-modules-picker {
    max-width: 22rem;
    margin-top: 0.35rem;
}

.fa-staff-modules-picker .form-select {
    font-weight: 600;
    border-radius: 0.65rem;
}

.fa-staff-list {
    max-height: min(28rem, 70vh);
    overflow-y: auto;
}

.fa-staff-area-pill {
    cursor: pointer;
}

.fa-staff-hub #staffEditorTabs .nav-link {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Staff → Modules access editor */
.fa-mod-layout {
    display: grid;
    grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.fa-mod-main {
    min-width: 0;
}

.fa-mod-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color);
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
}

.fa-mod-toolbar-label {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
}

.fa-mod-toolbar-hint {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.fa-mod-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fa-mod-jump-mobile {
    width: 100%;
    max-width: 100%;
}

.fa-mod-panel {
    margin-bottom: 1.75rem;
}

.fa-mod-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.fa-mod-panel-head i {
    font-size: 1.35rem;
    margin-top: 0.1rem;
}

.fa-mod-panel-head h6 {
    font-weight: 700;
}

.fa-mod-rail-inner {
    position: sticky;
    top: 1rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color);
    background: #f8fafc;
}

.fa-mod-rail-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.fa-mod-rail-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.fa-mod-rail-link:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.fa-mod-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.75rem;
}

.fa-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 0.85rem;
}

.fa-mod-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fa-mod-card--on {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: 0 0.15rem 0.65rem rgba(var(--bs-primary-rgb), 0.1);
}

.fa-mod-card--solo .fa-mod-card-body {
    padding: 1rem 1.1rem;
}

.fa-mod-card-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem 0.5rem;
}

.fa-mod-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    flex-shrink: 0;
}

.fa-mod-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.fa-mod-card-desc {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    line-height: 1.35;
}

.mod-grant-badge {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.fa-mod-crud-block {
    padding: 0 1rem 0.85rem;
    transition: opacity 0.15s ease;
}

.fa-mod-crud-block.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.fa-mod-crud-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.4rem;
}

.fa-mod-crud-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fa-mod-crud-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.28rem 0.65rem 0.28rem 0.5rem;
    border-radius: 2rem;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    cursor: pointer;
    user-select: none;
    transition: all 0.12s ease;
}

.fa-mod-crud-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fa-mod-crud-pill i {
    font-size: 0.85rem;
    opacity: 0.75;
}

.fa-mod-crud-pill:has(input:checked) {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.fa-mod-crud-pill:has(input:checked) i {
    opacity: 1;
}

.fa-mod-card-foot {
    padding: 0 0.75rem 0.75rem;
    border-top: 1px dashed var(--bs-border-color-translucent);
    margin-top: 0.15rem;
    padding-top: 0.65rem;
}

.fa-mod-link-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fa-mod-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.32rem 0.6rem;
    border-radius: 2rem;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
}

.fa-mod-link-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fa-mod-link-chip.is-on {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    color: var(--bs-primary);
    font-weight: 600;
}

.fa-mod-widget-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.fa-mod-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 0.5rem;
}

.fa-mod-widget-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    margin: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    background: #fff;
    cursor: pointer;
}

.fa-mod-widget-tile.is-on {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.fa-mod-grid--widgets {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.fa-mod-card--widget .fa-mod-widget-body {
    padding: 0 1rem 1rem;
}

.fa-mod-card--widget .fa-mod-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
}

.fa-mod-card--widget .mod-widget-bulk {
    margin-left: auto;
}

.fa-mod-widget-tile-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.fa-mod-widget-tile-label {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
}

.fa-mod-widget-tile-hint {
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

.mod-widget-badge {
    font-size: 0.68rem;
    font-weight: 600;
}

.fa-mod-switch-lg .form-check-input {
    width: 2.6em;
    height: 1.4em;
}

.fa-mod-card--on .fa-mod-card-icon {
    background: var(--bs-primary);
    color: #fff;
}

@media (max-width: 991.98px) {
    .fa-mod-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.fa-access-compact .card-header h5 {
    font-size: 1.02rem;
}

.fa-access-compact .table {
    --bs-table-bg: transparent;
}

.fa-access-compact .table th,
.fa-access-compact .table td {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    vertical-align: middle;
}

.fa-access-compact .form-check-input[type="checkbox"] {
    transform: scale(0.92);
}

.fa-access-compact .border.rounded-3 .bg-light {
    background: #f8fafc !important;
}

.fa-access-compact code {
    font-size: 0.72rem;
}

.fa-access-compact .fa-access-sections .nav-link {
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    border: 1px solid #dbe2ea;
    background: #fff;
    color: #3a4b62;
}

.fa-access-compact .fa-access-sections .nav-link.active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.fa-access-compact .fa-access-viewport {
    min-height: 0;
    max-height: none;
}

.fa-access-compact .fa-access-viewport .tab-pane {
    height: 100%;
}

.fa-access-compact .card-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

@media print {
    .sidebar,
    .btn,
    form,
    .pagination,
    .top-actions {
        display: none !important;
    }
    main {
        width: 100% !important;
        padding: 0 !important;
    }
    .clean-card {
        box-shadow: none !important;
    }
}

/* ——— Customer form (add / edit) ——— */
.customer-form .invalid-feedback {
    display: block;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}
.customer-form .form-label {
    font-weight: 600;
    color: #334155;
}
.customer-form-wa-preview {
    border-style: solid !important;
}
.customer-form-wa-preview .whatsapp-preview {
    display: inline-block;
}
.customer-form .whatsapp-preview {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: #0f766e;
    background: #ecfdf5;
    border-radius: 0.375rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #99f6e4;
    line-height: 1.35;
}
.customer-form .profile-preview-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--fa-border);
}
.customer-form .profile-drop {
    max-width: 20rem;
}

.whatsapp-settings-page .clean-card {
    border: 1px solid #dbe3ef !important;
}

.whatsapp-template-item {
    background: linear-gradient(180deg, #fafcff 0%, #ffffff 70%);
    border-color: #dbeafe !important;
}

/* Excel-style list column filters */
.excel-filter-popover {
    font-size: 0.875rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    max-width: calc(100vw - 1rem);
}
.excel-filter-popover .excel-facet-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.excel-filter-popover .excel-facet-row:last-child {
    border-bottom: 0 !important;
}
.excel-table-module .excel-filter-btn {
    line-height: 1;
    vertical-align: middle;
}

/* Shared list pager + excel filter controls (minimal + responsive) */
#moduleListForm .form-control,
#moduleListForm .form-select {
    min-height: 2rem;
}

#moduleListForm .btn {
    min-height: 2rem;
    border-radius: 0.45rem;
}

.pagination {
    gap: 0.25rem;
    flex-wrap: wrap;
}

.pagination .page-item .page-link {
    border-radius: 0.45rem;
    border-color: #dbe3ef;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    background: #fff;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.pagination .page-item .page-link:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.pagination .page-item.active .page-link {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(29, 78, 216, 0.28);
}

.pagination .page-item .page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.17rem rgba(37, 99, 235, 0.22);
}

.excel-table-module .excel-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    color: #64748b;
    text-decoration: none;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.excel-table-module .excel-filter-btn:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.excel-table-module .excel-filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.14rem rgba(37, 99, 235, 0.22);
}

@media (max-width: 575.98px) {
    .pagination .page-item .page-link {
        min-width: 1.85rem;
        height: 1.85rem;
        font-size: 0.78rem;
        padding: 0 0.45rem;
    }
}

/* Administration hub (narrow dark rail) */
.admin-hub-body {
    background: #eef2f6;
}

.fa-admin-sidebar .nav-link {
    border-radius: 0.6rem;
    color: #334155 !important;
    margin: 0.08rem 0.55rem;
    border: 1px solid transparent;
    font-weight: 600;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.fa-admin-sidebar .nav-link:hover {
    background: #eef5ff;
    color: #1d4ed8 !important;
    border-color: #c9dcff;
}

.fa-admin-sidebar .nav-link.active {
    background: #1d4ed8;
    color: #fff !important;
    border-color: #1e40af;
    box-shadow: 0 8px 18px rgba(29, 78, 216, 0.25);
}

.fa-admin-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #e2e8f0 !important;
}

.fa-admin-sidebar-brand {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-bottom-color: #e2e8f0 !important;
}

.fa-admin-sidebar-sep {
    color: #475569 !important;
    letter-spacing: 0.08em;
    font-size: 0.66rem !important;
}

.fa-admin-sidebar .nav-link.small {
    color: #64748b !important;
    font-weight: 500;
}

.fa-admin-sidebar .nav-link i {
    color: #64748b;
}

.fa-admin-sidebar .nav-link:hover i {
    color: #1d4ed8;
}

.fa-admin-sidebar .nav-link.active i {
    color: rgba(255, 255, 255, 0.95);
}

.dp-geo-map {
    width: 100%;
    min-height: 28rem;
    border-radius: 0.75rem;
    border: 1px solid #e9ecef;
}

@media (max-width: 991.98px) {
    .auth-wrap--mobile {
        align-items: stretch;
    }

    .auth-wrap--mobile .auth-card {
        max-width: min(31rem, 100%);
    }

    .auth-card-body {
        padding: 1.2rem !important;
    }

    .mobile-dashboard .cc-hero-inner {
        padding: 0.7rem 0.85rem;
    }

    .mobile-dashboard .cc-title {
        font-size: 1.05rem;
    }

    .mobile-dashboard .cc-nav-pills .nav-link {
        padding: 0.45rem 0.8rem;
        font-size: 0.78rem;
    }

    .mobile-dashboard .chart-canvas-wrap,
    .mobile-dashboard .chart-canvas-wrap--wide,
    .mobile-dashboard .chart-canvas-wrap--cc {
        height: 200px;
        min-height: 170px;
    }

    .mobile-list-page .mobile-page-head {
        align-items: stretch !important;
        flex-direction: column;
    }

    .mobile-list-page .mobile-page-head .btn {
        width: 100%;
    }

    .mobile-list-page .mobile-action-row {
        width: 100%;
        flex-wrap: wrap;
    }

    .mobile-list-page .mobile-action-row .btn {
        flex: 1 1 auto;
    }

    .mobile-list-page .mobile-filter-grid > [class*="col-"],
    .mobile-list-page .mobile-filter-row > * {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .mobile-list-page .card-header {
        padding: 0.65rem 0.85rem;
    }

    .mobile-list-page .table td:last-child .btn,
    .mobile-list-page .table td:last-child form .btn {
        margin-top: 0.2rem;
    }
}

/* ——— Sensitive money on cards (eye + mask) + code badges + layout safety ——— */
.fa-money-sensitive__toggle {
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    text-decoration: none !important;
}

.fa-money-sensitive__toggle:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a !important;
}

.fa-money-sensitive:not(.is-revealed) .fa-money-sensitive__val {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.fa-money-sensitive:not(.is-revealed) .fa-money-sensitive__dots {
    letter-spacing: 0.12em;
    font-weight: 600;
    color: #64748b;
}

.fa-money-sensitive.is-revealed .fa-money-sensitive__dots {
    display: none;
}

.fa-money-sensitive.is-revealed .fa-money-sensitive__val {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
}

.fa-code-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.fa-code-badge-wrap code {
    margin: 0;
}

.fa-code-kind-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.fa-idle-warning-pulse {
    animation: faIdleWarningPulse 0.9s ease-in-out infinite alternate;
}

@keyframes faIdleWarningPulse {
    from {
        transform: scale(1);
        box-shadow: 0 0.25rem 0.75rem rgba(220, 53, 69, 0.25);
    }
    to {
        transform: scale(1.015);
        box-shadow: 0 0.5rem 1.1rem rgba(220, 53, 69, 0.45);
    }
}

.app-shell-wrap,
.admin-shell-layout > .container-fluid {
    max-width: 100%;
}

.app-main,
.admin-shell-layout main {
    min-width: 0;
}

.app-shell .row,
.admin-shell-layout > .container-fluid > .row {
    min-width: 0;
}

.table-responsive {
    max-width: 100%;
}

@media (max-width: 576px) {
    .fa-money-sensitive__toggle {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
}

/* Expenses list — month / type grouping */
.excel-table-module[data-excel-module="expenses"] .expenses-month-head td {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.excel-table-module[data-excel-module="expenses"] .expenses-type-head td {
    border-top: none;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.excel-table-module[data-excel-module="expenses"] .expenses-data-row td:nth-child(2) {
    padding-left: 0.5rem;
}

.excel-table-module[data-excel-module="expenses"] .expenses-type-total td {
    background: rgba(var(--bs-light-rgb), 0.65);
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.25rem;
    padding-bottom: 0.35rem;
}

.excel-table-module[data-excel-module="expenses"] .expenses-month-total td {
    border-bottom: 2px solid var(--bs-border-color);
}

.excel-table-module[data-excel-module="expenses"] .expenses-month-total:last-of-type td {
    border-bottom-width: 1px;
}