/* Mobile View Fix v2 — Totelman Payroll
   Scope: responsive/UI only. No payroll, commission, PNL, auth, import, role or calculation logic changed. */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

/* Fix: older mobile CSS makes every .btn width:100%; this must NOT affect topbar icons. */
@media (max-width: 575.98px) {
    .glass-theme .topnav .btn,
    .glass-theme .topnav .btn.btn-icon,
    .glass-theme .topnav .dropdown-toggle {
        width: auto !important;
        min-width: 2.35rem;
        margin-bottom: 0 !important;
        flex: 0 0 auto;
    }

    .glass-theme .topnav.navbar {
        min-height: 3.55rem;
        padding-left: .5rem;
        padding-right: .5rem;
        gap: .25rem;
        flex-wrap: nowrap;
    }

    .glass-theme .topnav .navbar-brand {
        min-width: 0;
        padding-left: .35rem !important;
        padding-right: .35rem !important;
        margin-right: .25rem;
    }

    .glass-theme .topnav .navbar-nav {
        flex-direction: row;
        align-items: center;
        gap: .1rem;
    }

    .glass-theme .topnav .nav-item,
    .glass-theme .topnav .dropdown {
        margin-right: .15rem !important;
    }

    .glass-theme .brand-mark {
        width: 1.95rem !important;
        height: 1.95rem !important;
        border-radius: .72rem !important;
        font-size: .95rem !important;
        flex: 0 0 auto;
    }

    .glass-theme .dropdown-menu-end {
        right: .35rem !important;
        left: auto !important;
    }
}

/* General app mobile tidy-up */
@media (max-width: 767.98px) {
    .glass-theme .container-xl,
    .container-xl {
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }

    .glass-theme .page-header {
        padding-bottom: 5.6rem !important;
    }

    .glass-theme .page-header-content {
        padding-top: .85rem !important;
    }

    .glass-theme .page-header-title {
        display: flex;
        align-items: center;
        gap: .55rem;
        font-size: 1.22rem !important;
        line-height: 1.2 !important;
        letter-spacing: -.02em !important;
    }

    .glass-theme .page-header-icon {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem;
        border-radius: .72rem !important;
        margin-right: 0 !important;
    }

    .glass-theme .page-header-subtitle {
        font-size: .82rem !important;
        line-height: 1.35 !important;
        margin-top: .25rem;
    }

    .glass-theme .card,
    .glass-theme .filter-card,
    .glass-theme .quick-action-card {
        border-radius: 1rem !important;
    }

    .glass-theme .card-header {
        padding: .85rem 1rem !important;
    }

    .glass-theme .card-body {
        padding: 1rem !important;
    }

    .glass-theme .form-control,
    .glass-theme .form-select {
        min-height: 2.75rem;
        font-size: 16px !important; /* prevents iOS input zoom */
    }

    .glass-theme .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .glass-theme .table-responsive table {
        min-width: 680px !important;
    }
}

/* Login page mobile rebuild v2
   Decision: on phone, hide the marketing/hero copy. Login must be the only focus. */
@media (max-width: 767.98px) {
    body.login-bg.glass-theme {
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.login-bg.glass-theme::before {
        width: 15rem;
        height: 15rem;
        right: -6rem;
        top: -4rem;
        opacity: .58;
    }

    body.login-bg.glass-theme::after {
        width: 12rem;
        height: 12rem;
        left: -5.5rem;
        bottom: -4.5rem;
        opacity: .48;
    }

    body.login-bg.glass-theme .auth-shell {
        min-height: 100svh;
        display: flex;
        align-items: center !important;
        justify-content: center !important;
        padding: max(1rem, env(safe-area-inset-top)) .95rem max(1rem, env(safe-area-inset-bottom)) !important;
    }

    body.login-bg.glass-theme .login-row,
    body.login-bg.glass-theme .auth-shell > .row {
        width: 100%;
        min-height: calc(100svh - 2rem);
        margin: 0 !important;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        align-items: center !important;
        justify-content: center !important;
    }

    body.login-bg.glass-theme .auth-copy {
        display: none !important;
    }

    body.login-bg.glass-theme .login-card-wrap {
        width: 100%;
        max-width: 23.5rem;
        flex: 0 0 auto;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    body.login-bg.glass-theme .login-card-wrap::before,
    body.login-bg.glass-theme .login-card-wrap::after {
        display: none !important;
    }

    body.login-bg.glass-theme .login-card {
        width: 100%;
        border-radius: 1.25rem !important;
        background: rgba(15, 23, 42, .78) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        box-shadow: 0 1.1rem 2.8rem rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14) !important;
        overflow: hidden;
    }

    body.login-bg.glass-theme .login-card .card-header {
        padding: .95rem 1rem !important;
        background: rgba(255,255,255,.08) !important;
        border-bottom: 1px solid rgba(255,255,255,.13) !important;
    }

    body.login-bg.glass-theme .login-card .card-body {
        padding: 1rem !important;
    }

    body.login-bg.glass-theme .login-card h3 {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        color: #fff !important;
    }

    body.login-bg.glass-theme .login-card .small {
        font-size: .75rem !important;
        line-height: 1.25 !important;
    }

    body.login-bg.glass-theme .login-logo {
        width: 2.15rem !important;
        height: 2.15rem !important;
        min-width: 2.15rem;
        border-radius: .78rem !important;
        font-size: .95rem !important;
    }

    body.login-bg.glass-theme .login-card label {
        margin-bottom: .35rem !important;
        font-size: .72rem !important;
        color: rgba(255,255,255,.84) !important;
    }

    body.login-bg.glass-theme .login-card .mb-3 {
        margin-bottom: .8rem !important;
    }

    body.login-bg.glass-theme .login-card .mb-4 {
        margin-bottom: .95rem !important;
    }

    body.login-bg.glass-theme .login-card .form-control,
    body.login-bg.glass-theme .login-card .form-control-lg {
        width: 100%;
        min-height: 2.9rem;
        font-size: 16px !important;
        padding: .64rem .78rem !important;
        border-radius: .82rem !important;
        background: rgba(255,255,255,.90) !important;
        color: #111827 !important;
        border: 1px solid rgba(255,255,255,.35) !important;
        box-shadow: none !important;
    }

    body.login-bg.glass-theme .login-card .form-control::placeholder {
        color: #6b7280 !important;
    }

    body.login-bg.glass-theme .login-card .form-control:focus {
        background: #fff !important;
        color: #111827 !important;
        border-color: rgba(96,165,250,.95) !important;
        box-shadow: 0 0 0 .18rem rgba(59,130,246,.22) !important;
    }

    body.login-bg.glass-theme .login-card .btn-lg {
        width: 100%;
        min-height: 2.9rem;
        font-size: .92rem !important;
        border-radius: .9rem !important;
        margin-bottom: 0 !important;
    }

    body.login-bg.glass-theme .login-meta-card {
        margin-top: .85rem !important;
        padding: .68rem .75rem !important;
        border-radius: .85rem !important;
        line-height: 1.35 !important;
        font-size: .72rem !important;
        background: rgba(255,255,255,.08) !important;
        border: 1px solid rgba(255,255,255,.13) !important;
    }
}

/* Short phone screens: keep the form visible without feeling cramped. */
@media (max-width: 767.98px) and (max-height: 680px) {
    body.login-bg.glass-theme .auth-shell {
        align-items: flex-start !important;
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
    }

    body.login-bg.glass-theme .login-row,
    body.login-bg.glass-theme .auth-shell > .row {
        min-height: auto;
    }

    body.login-bg.glass-theme .login-card .card-header {
        padding: .8rem .9rem !important;
    }

    body.login-bg.glass-theme .login-card .card-body {
        padding: .9rem !important;
    }
}

/* Mobile Dashboard Cleanup v3 — dashboard polish only.
   Scope: responsive/UI only. No payroll, commission, PNL, import, auth or permission logic changed. */
@media (max-width: 767.98px) {
    body.nav-fixed.glass-theme {
        background:
            radial-gradient(circle at 95% 4%, rgba(139,92,246,.22) 0, rgba(139,92,246,0) 15rem),
            radial-gradient(circle at 0% 85%, rgba(59,130,246,.20) 0, rgba(59,130,246,0) 13rem),
            linear-gradient(135deg, #07111f 0%, #111b3d 52%, #24124f 100%) !important;
    }

    body.glass-theme::before {
        width: 13rem;
        height: 13rem;
        right: -6.5rem;
        top: 2.75rem;
        opacity: .34;
        filter: blur(1px);
    }

    body.glass-theme::after {
        width: 11rem;
        height: 11rem;
        left: -5.5rem;
        bottom: 1rem;
        opacity: .28;
        filter: blur(1px);
    }

    .glass-theme #layoutSidenav_content main > .container-xl,
    .glass-theme .container-xl.mt-n10 {
        margin-top: -3.7rem !important;
        padding-bottom: 1.25rem;
    }

    .glass-theme .page-header {
        padding-bottom: 4.6rem !important;
        background: linear-gradient(135deg, rgba(7,17,31,.82), rgba(17,27,61,.70) 58%, rgba(76,29,149,.48)) !important;
    }

    .glass-theme .page-header::before {
        width: 12rem !important;
        height: 7.2rem !important;
        right: -4.75rem !important;
        top: 1.45rem !important;
        opacity: .28 !important;
        border-radius: 1.35rem !important;
        transform: rotate(9deg) !important;
    }

    .glass-theme .page-header::after {
        width: 6.8rem !important;
        height: 6.8rem !important;
        right: 2.2rem !important;
        bottom: -3.8rem !important;
        opacity: .26 !important;
    }

    .glass-theme .page-header-content {
        padding-top: .45rem !important;
    }

    .glass-theme .page-header-content .col-auto.mt-4 {
        margin-top: .9rem !important;
    }

    .glass-theme .page-header-content .col-12.col-xl-auto.mt-4 {
        margin-top: .55rem !important;
    }

    .glass-theme .page-header .badge {
        font-size: .66rem !important;
        padding: .34rem .6rem !important;
    }

    .glass-theme .page-header-title {
        font-size: 1.12rem !important;
        letter-spacing: -.035em !important;
        margin-bottom: .16rem !important;
    }

    .glass-theme .page-header-icon {
        width: 1.88rem !important;
        height: 1.88rem !important;
        min-width: 1.88rem !important;
        border-radius: .65rem !important;
    }

    .glass-theme .page-header-subtitle {
        max-width: 21rem;
        font-size: .74rem !important;
        line-height: 1.3 !important;
        color: rgba(226,232,240,.74) !important;
    }

    .glass-theme .card,
    .glass-theme .filter-card,
    .glass-theme .quick-action-card {
        background: rgba(255,255,255,.94) !important;
        border-color: rgba(255,255,255,.72) !important;
        box-shadow: 0 .75rem 1.6rem rgba(0,0,0,.16) !important;
    }

    .glass-theme .card-header {
        padding: .72rem .85rem !important;
        font-size: .82rem !important;
        background: rgba(248,250,252,.86) !important;
    }

    .glass-theme .card-body {
        padding: .85rem !important;
    }

    .glass-theme .dashboard-filter-card {
        margin-bottom: .8rem !important;
        border-radius: 1.05rem !important;
    }

    .glass-theme .dashboard-filter-card .card-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 6.9rem;
        gap: .55rem;
        align-items: end !important;
        padding: .82rem !important;
    }

    .glass-theme .dashboard-filter-card .card-body > div:first-child {
        min-width: 0;
    }

    .glass-theme .dashboard-filter-card .form-label {
        margin-bottom: .28rem !important;
        font-size: .68rem !important;
        font-weight: 800;
        color: rgba(15,23,42,.52) !important;
    }

    .glass-theme .dashboard-filter-card .form-select {
        min-height: 2.55rem !important;
        height: 2.55rem !important;
        border-radius: .74rem !important;
        font-size: 16px !important;
        padding-top: .42rem !important;
        padding-bottom: .42rem !important;
        background-color: rgba(255,255,255,.96) !important;
    }

    .glass-theme .dashboard-filter-card .btn,
    .glass-theme .dashboard-filter-card a.btn {
        width: auto !important;
        min-height: 2.55rem !important;
        margin: 0 !important;
        border-radius: .74rem !important;
        font-size: .78rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .glass-theme .dashboard-filter-card a.btn {
        grid-column: 1 / -1;
        width: 100% !important;
        min-height: 2.35rem !important;
        background: rgba(255,255,255,.88) !important;
    }

    .glass-theme .dashboard-kpi-row {
        --bs-gutter-x: .7rem;
        margin-left: -.35rem !important;
        margin-right: -.35rem !important;
        margin-bottom: .28rem !important;
    }

    .glass-theme .dashboard-kpi-row > [class*="col-"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: .35rem !important;
        padding-right: .35rem !important;
        margin-bottom: .7rem !important;
    }

    .glass-theme .totel-kpi-card {
        min-height: 6.05rem;
        border-radius: 1rem !important;
        background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,245,249,.92)) !important;
        box-shadow: 0 .62rem 1.28rem rgba(15,23,42,.14) !important;
    }

    .glass-theme .totel-kpi-card:hover {
        transform: none !important;
    }

    .glass-theme .totel-kpi-card::before {
        opacity: .62 !important;
    }

    .glass-theme .totel-kpi-card::after {
        width: 4rem !important;
        height: 4rem !important;
        right: -1.35rem !important;
        top: -1.35rem !important;
    }

    .glass-theme .totel-kpi-card .card-body {
        padding: .74rem .78rem !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .glass-theme .totel-kpi-label {
        font-size: .58rem !important;
        line-height: 1.18 !important;
        letter-spacing: .075em !important;
        margin-bottom: .24rem !important;
    }

    .glass-theme .totel-kpi-value {
        font-size: 1.04rem !important;
        line-height: 1.04 !important;
        letter-spacing: -.035em !important;
        margin-bottom: .2rem !important;
        overflow-wrap: anywhere;
    }

    .glass-theme .totel-kpi-card .small,
    .glass-theme .totel-kpi-card .text-muted {
        font-size: .64rem !important;
        line-height: 1.18 !important;
    }

    .glass-theme .dashboard-staff-card,
    .glass-theme .dashboard-quick-actions,
    .glass-theme .dashboard-flow-card,
    .glass-theme .dashboard-snapshot-card {
        margin-bottom: .95rem !important;
        border-radius: 1.05rem !important;
    }

    .glass-theme .dashboard-staff-card .card-header {
        align-items: center !important;
        gap: .55rem;
    }

    .glass-theme .dashboard-staff-card .card-header a {
        font-size: .72rem !important;
        font-weight: 800;
        white-space: nowrap;
    }

    .glass-theme .dashboard-staff-card .card-body.table-responsive {
        padding: .55rem !important;
        background: rgba(248,250,252,.86) !important;
        border: 0 !important;
        border-radius: 0 0 1.05rem 1.05rem !important;
    }

    .glass-theme .dashboard-staff-card .card-body.table-responsive::before {
        content: "Swipe kiri/kanan untuk lihat table penuh.";
        display: block;
        color: rgba(100,116,139,.68);
        font-size: .66rem;
        font-weight: 700;
        margin: .05rem 0 .45rem .05rem;
    }

    .glass-theme .dashboard-staff-card .table {
        background: rgba(255,255,255,.92);
        border-radius: .8rem;
        overflow: hidden;
    }

    .glass-theme .dashboard-staff-card .table-responsive table,
    .glass-theme .dashboard-staff-card table {
        min-width: 620px !important;
    }

    .glass-theme .dashboard-staff-card .table thead th {
        font-size: .63rem !important;
        padding: .55rem .62rem !important;
    }

    .glass-theme .dashboard-staff-card .table td {
        font-size: .73rem !important;
        padding: .58rem .62rem !important;
    }

    .glass-theme .dashboard-quick-actions .list-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .58rem;
        padding: .75rem;
        background: transparent !important;
    }

    .glass-theme .dashboard-quick-actions .list-group-item {
        min-height: 3.35rem;
        padding: .66rem .65rem !important;
        border: 1px solid rgba(15,23,42,.08) !important;
        border-radius: .86rem !important;
        background: rgba(255,255,255,.72) !important;
        display: flex;
        align-items: center;
        gap: .45rem;
        font-size: .72rem !important;
        font-weight: 800;
        line-height: 1.2;
    }

    .glass-theme .dashboard-quick-actions .list-group-item svg {
        width: 1rem;
        height: 1rem;
        margin-right: 0 !important;
        color: #334155;
        flex: 0 0 auto;
    }

    .glass-theme .dashboard-flow-card .card-body {
        padding: .82rem .86rem !important;
    }

    .glass-theme .dashboard-flow-card .timeline.timeline-xs {
        margin: 0 !important;
    }

    .glass-theme .dashboard-flow-card .timeline-item {
        padding-bottom: .72rem !important;
    }

    .glass-theme .dashboard-flow-card .timeline-item:last-child {
        padding-bottom: 0 !important;
    }

    .glass-theme .dashboard-flow-card .timeline-item-marker-text {
        font-size: .62rem !important;
    }

    .glass-theme .dashboard-flow-card .timeline-item-marker-indicator {
        width: .72rem !important;
        height: .72rem !important;
    }

    .glass-theme .dashboard-flow-card .timeline-item-content {
        font-size: .74rem !important;
        line-height: 1.42 !important;
        color: #1f2937 !important;
        padding-top: .08rem !important;
    }

    .glass-theme .dashboard-snapshot-card .card-body {
        padding: .78rem .85rem !important;
        font-size: .72rem !important;
    }

    .glass-theme .dashboard-snapshot-card .card-body .d-flex {
        padding: .22rem 0;
        margin-bottom: .28rem !important;
        border-bottom: 1px solid rgba(15,23,42,.06);
    }

    .glass-theme .dashboard-snapshot-card .card-body .d-flex:last-child {
        border-bottom: 0;
        margin-bottom: 0 !important;
    }

    .glass-theme .footer-admin {
        padding: .95rem 0 1.25rem !important;
        font-size: .68rem !important;
        color: rgba(226,232,240,.62) !important;
    }
}

@media (max-width: 374.98px) {
    .glass-theme .dashboard-kpi-row > [class*="col-"] {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    .glass-theme .dashboard-quick-actions .list-group {
        grid-template-columns: 1fr;
    }

    .glass-theme .dashboard-filter-card .card-body {
        grid-template-columns: 1fr;
    }

    .glass-theme .dashboard-filter-card .btn,
    .glass-theme .dashboard-filter-card a.btn {
        width: 100% !important;
    }
}

/* Mobile Typography Balance v4 — based on practical mobile typography research.
   Goal: stop over-shrinking mobile text while keeping dashboard compact.
   Scope: CSS/UI only. No payroll, commission, PNL, import, auth, role or database logic changed. */
@media (max-width: 767.98px) {
    html {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body,
    body.glass-theme,
    body.login-bg.glass-theme,
    .glass-theme,
    .glass-theme .card,
    .glass-theme .card-body,
    .glass-theme .list-group-item,
    .glass-theme .dropdown-menu,
    .glass-theme p {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    .glass-theme .small,
    .glass-theme small,
    .glass-theme .text-muted,
    .glass-theme .dropdown-item,
    .glass-theme .badge {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    /* Top navigation remains compact, but not microscopic. */
    .glass-theme .topnav.navbar {
        min-height: 3.65rem !important;
    }

    .glass-theme .topnav .navbar-brand,
    .glass-theme .brand-text {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .glass-theme .topnav .btn.btn-icon svg,
    .glass-theme .topnav .btn svg {
        width: 17px !important;
        height: 17px !important;
    }

    /* Page header typography */
    .glass-theme .page-header-title {
        font-size: 22px !important;
        line-height: 1.18 !important;
        letter-spacing: -0.02em !important;
    }

    .glass-theme .page-header-subtitle {
        font-size: 14px !important;
        line-height: 1.38 !important;
        max-width: 24rem !important;
    }

    .glass-theme .page-header .badge {
        font-size: 12px !important;
        line-height: 1.2 !important;
        padding: .36rem .65rem !important;
    }

    /* Cards */
    .glass-theme .card-header {
        font-size: 15px !important;
        line-height: 1.35 !important;
        padding: .82rem .95rem !important;
    }

    .glass-theme .card-body {
        padding: .95rem !important;
    }

    /* Forms/buttons: 16px inputs avoid mobile browser zoom and improve readability. */
    .glass-theme .form-label,
    .glass-theme label,
    .glass-theme .dashboard-filter-card .form-label {
        font-size: 13px !important;
        line-height: 1.25 !important;
        margin-bottom: .35rem !important;
    }

    .glass-theme .form-control,
    .glass-theme .form-select,
    .glass-theme .dashboard-filter-card .form-select {
        font-size: 16px !important;
        line-height: 1.35 !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: .56rem .78rem !important;
    }

    .glass-theme .btn,
    .glass-theme .dashboard-filter-card .btn,
    .glass-theme .dashboard-filter-card a.btn {
        font-size: 14px !important;
        line-height: 1.25 !important;
        min-height: 42px !important;
        padding: .56rem .78rem !important;
    }

    /* Dashboard month filter: readable without becoming huge. */
    .glass-theme .dashboard-filter-card .card-body {
        grid-template-columns: minmax(0, 1fr) 7.4rem !important;
        gap: .65rem !important;
        padding: .95rem !important;
    }

    .glass-theme .dashboard-filter-card a.btn {
        min-height: 40px !important;
    }

    /* KPI cards: label can stay smaller, but value/subtext must be readable. */
    .glass-theme .totel-kpi-card {
        min-height: 6.75rem !important;
    }

    .glass-theme .totel-kpi-card .card-body {
        padding: .9rem .88rem !important;
    }

    .glass-theme .totel-kpi-label {
        font-size: 12px !important;
        line-height: 1.22 !important;
        letter-spacing: .045em !important;
        margin-bottom: .34rem !important;
    }

    .glass-theme .totel-kpi-value {
        font-size: 21px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: .32rem !important;
    }

    .glass-theme .totel-kpi-card .small,
    .glass-theme .totel-kpi-card .text-muted {
        font-size: 13px !important;
        line-height: 1.28 !important;
    }

    /* Tables: still scrollable, but columns no longer look like tiny print. */
    .glass-theme .table,
    .glass-theme .dashboard-staff-card .table,
    .glass-theme .table-responsive table {
        font-size: 14px !important;
        line-height: 1.38 !important;
    }

    .glass-theme .table thead th,
    .glass-theme .dashboard-staff-card .table thead th {
        font-size: 12px !important;
        line-height: 1.25 !important;
        padding: .64rem .68rem !important;
    }

    .glass-theme .table td,
    .glass-theme .table th,
    .glass-theme .dashboard-staff-card .table td {
        font-size: 14px !important;
        line-height: 1.35 !important;
        padding: .66rem .68rem !important;
    }

    .glass-theme .dashboard-staff-card .card-body.table-responsive::before {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: .55rem !important;
    }

    .glass-theme .dashboard-staff-card .card-header a {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    /* Quick actions: icon grid remains, text is now finger-friendly/readable. */
    .glass-theme .dashboard-quick-actions .list-group {
        gap: .65rem !important;
        padding: .85rem !important;
    }

    .glass-theme .dashboard-quick-actions .list-group-item {
        min-height: 58px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        padding: .78rem .72rem !important;
        gap: .5rem !important;
    }

    .glass-theme .dashboard-quick-actions .list-group-item svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Timeline / master flow */
    .glass-theme .dashboard-flow-card .timeline-item-marker-text {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .glass-theme .dashboard-flow-card .timeline-item-marker-indicator {
        width: .8rem !important;
        height: .8rem !important;
    }

    .glass-theme .dashboard-flow-card .timeline-item-content {
        font-size: 14px !important;
        line-height: 1.48 !important;
    }

    /* Snapshot / footer */
    .glass-theme .dashboard-snapshot-card .card-body,
    .glass-theme .dashboard-snapshot-card .card-body .d-flex {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .glass-theme .footer-admin {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
    }

    /* Login page typography */
    body.login-bg.glass-theme .login-card h3 {
        font-size: 18px !important;
        line-height: 1.22 !important;
    }

    body.login-bg.glass-theme .login-card .small,
    body.login-bg.glass-theme .login-card .small.opacity-75 {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body.login-bg.glass-theme .login-card label,
    body.login-bg.glass-theme .login-card .form-label {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    body.login-bg.glass-theme .login-card .form-control,
    body.login-bg.glass-theme .login-card .form-control-lg {
        font-size: 16px !important;
        min-height: 48px !important;
        height: 48px !important;
        line-height: 1.35 !important;
    }

    body.login-bg.glass-theme .login-card .btn,
    body.login-bg.glass-theme .login-card .btn-lg {
        font-size: 15px !important;
        min-height: 48px !important;
        line-height: 1.25 !important;
    }

    body.login-bg.glass-theme .login-meta-card {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}

/* Very narrow phones: prioritize readability over two-column compactness. */
@media (max-width: 389.98px) {
    .glass-theme .dashboard-kpi-row > [class*="col-"] {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    .glass-theme .dashboard-quick-actions .list-group,
    .glass-theme .dashboard-filter-card .card-body {
        grid-template-columns: 1fr !important;
    }

    .glass-theme .dashboard-filter-card .btn,
    .glass-theme .dashboard-filter-card a.btn {
        width: 100% !important;
    }

    .glass-theme .totel-kpi-card {
        min-height: 5.65rem !important;
    }
}