/* =========================================================
   AMER CRM - COMPLETE RESPONSIVE DESIGN SYSTEM
   ========================================================= */

:root {
    --amer-bg: #f4f7fb;
    --amer-surface: #ffffff;
    --amer-surface-2: #f8fafc;
    --amer-surface-3: #eef3f8;
    --amer-text: #102033;
    --amer-muted: #6f7e91;
    --amer-border: #e1e8f0;

    --amer-primary: #155eef;
    --amer-primary-2: #3b82f6;
    --amer-cyan: #0fb5c9;
    --amer-success: #16a66b;
    --amer-warning: #f3a71a;
    --amer-danger: #df4b50;
    --amer-purple: #7950f2;

    --amer-sidebar: #07111f;
    --amer-sidebar-2: #0b1727;
    --amer-sidebar-text: #d9e5f2;
    --amer-sidebar-muted: #7d91a8;

    --amer-sidebar-width: 292px;
    --amer-topbar-height: 68px;
    --amer-bottom-nav-height: 70px;

    --amer-radius-sm: 12px;
    --amer-radius: 18px;
    --amer-radius-lg: 24px;

    --amer-shadow-xs: 0 4px 15px rgba(16, 32, 51, .04);
    --amer-shadow: 0 14px 38px rgba(16, 32, 51, .08);

    --amer-safe-top: env(safe-area-inset-top, 0px);
    --amer-safe-right: env(safe-area-inset-right, 0px);
    --amer-safe-bottom: env(safe-area-inset-bottom, 0px);
    --amer-safe-left: env(safe-area-inset-left, 0px);
}

[data-bs-theme="dark"] {
    --amer-bg: #07101c;
    --amer-surface: #0d1928;
    --amer-surface-2: #111f30;
    --amer-surface-3: #17283b;
    --amer-text: #e9f1f9;
    --amer-muted: #93a4b7;
    --amer-border: #20344a;

    --amer-sidebar: #050b13;
    --amer-sidebar-2: #09131f;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;

    overflow-x: hidden;

    font-family:
        "Vazirmatn",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--amer-bg);

    color:
        var(--amer-text);

    line-height: 1.7;

    -webkit-font-smoothing:
        antialiased;

    -webkit-tap-highlight-color:
        transparent;
}

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

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* =========================================================
   APPLICATION SHELL
   ========================================================= */

.amer-app-shell {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;
}


.amer-main {
    min-width: 0;

    min-height: 100vh;
    min-height: 100dvh;

    margin-right:
        var(--amer-sidebar-width);
}


.amer-content {
    width: 100%;

    min-width: 0;

    padding:
        26px;
}


.amer-content-inner {
    width: 100%;

    min-width: 0;

    max-width:
        1580px;

    margin:
        0 auto;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.amer-sidebar {
    position: fixed;

    inset:
        0
        0
        0
        auto;

    width:
        var(--amer-sidebar-width);

    min-height:
        100vh;

    flex-direction:
        column;

    z-index:
        1040;

    color:
        var(--amer-sidebar-text);

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(21, 94, 239, .17),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            var(--amer-sidebar),
            var(--amer-sidebar-2)
        );

    border-left:
        1px solid
        rgba(255, 255, 255, .06);
}


.amer-sidebar-brand {
    height:
        var(--amer-topbar-height);

    padding:
        0 19px;

    display:
        flex;

    align-items:
        center;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);
}


.amer-brand-link {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    text-decoration:
        none;
}


.amer-logo {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        900;

    background:
        linear-gradient(
            145deg,
            var(--amer-primary),
            var(--amer-cyan)
        );
}


.amer-brand-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.25;
}


.amer-brand-copy strong {
    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        900;
}


.amer-brand-copy small {
    margin-top:
        3px;

    color:
        var(--amer-sidebar-muted);

    font-size:
        9px;
}


.amer-sidebar-scroll {
    flex:
        1;

    min-height:
        0;

    padding:
        17px 12px;

    overflow-y:
        auto;
}


.amer-nav-group +
.amer-nav-group {
    margin-top:
        22px;
}


.amer-nav-label {
    padding:
        0 13px 7px;

    color:
        var(--amer-sidebar-muted);

    font-size:
        10px;

    font-weight:
        800;
}


.amer-nav-item {
    min-width:
        0;

    min-height:
        45px;

    margin:
        3px 0;

    padding:
        0 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border-radius:
        13px;

    color:
        #aabbd0;

    text-decoration:
        none;

    transition:
        .18s ease;
}


.amer-nav-item:hover {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .055);
}


.amer-nav-item.is-active {
    color:
        #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(21, 94, 239, .23),
            rgba(15, 181, 201, .07)
        );

    box-shadow:
        inset -3px 0 0
        var(--amer-cyan);
}


.amer-nav-item i {
    width:
        22px;

    flex:
        0 0 auto;

    text-align:
        center;

    font-size:
        16px;
}


.amer-nav-item span:not(.amer-nav-badge) {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.amer-nav-badge {
    margin-right:
        auto;

    padding:
        2px 7px;

    border-radius:
        20px;

    color:
        #dffcff;

    background:
        rgba(15, 181, 201, .17);

    font-size:
        9px;

    font-weight:
        900;
}


.amer-sidebar-user {
    padding:
        13px 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}


.amer-user-avatar,
.amer-top-user-avatar {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    color:
        #ffffff;

    font-weight:
        900;

    background:
        linear-gradient(
            145deg,
            var(--amer-purple),
            var(--amer-primary)
        );
}


.amer-user-avatar {
    width:
        40px;

    height:
        40px;

    border-radius:
        13px;
}


.amer-user-copy {
    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;
}


.amer-user-copy strong {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        11px;
}


.amer-user-copy small {
    color:
        var(--amer-sidebar-muted);

    font-size:
        9px;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.amer-topbar {
    position:
        sticky;

    top:
        0;

    z-index:
        1020;

    width:
        100%;

    min-width:
        0;

    min-height:
        calc(
            var(--amer-topbar-height) +
            var(--amer-safe-top)
        );

    padding:
        var(--amer-safe-top)
        24px
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border-bottom:
        1px solid
        var(--amer-border);

    background:
        color-mix(
            in srgb,
            var(--amer-surface) 93%,
            transparent
        );

    backdrop-filter:
        blur(18px);
}


.amer-topbar-start,
.amer-topbar-actions {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.amer-topbar-title {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.amer-topbar-title strong {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;

    font-weight:
        900;
}


.amer-topbar-title small {
    margin-top:
        2px;

    color:
        var(--amer-muted);

    font-size:
        9px;
}


.amer-icon-button {
    width:
        40px;

    height:
        40px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    border:
        1px solid
        var(--amer-border);

    border-radius:
        12px;

    color:
        var(--amer-text);

    background:
        var(--amer-surface);

    text-decoration:
        none;
}


.amer-top-user {
    min-width:
        0;

    align-items:
        center;

    gap:
        8px;
}


.amer-top-user-avatar {
    width:
        35px;

    height:
        35px;

    border-radius:
        11px;
}


.amer-top-user > span:last-child {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.amer-top-user strong {
    max-width:
        130px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        10px;
}


.amer-top-user small {
    color:
        var(--amer-muted);

    font-size:
        8px;
}


/* =========================================================
   PAGE SYSTEM
   ========================================================= */

.amer-page {
    width:
        100%;

    min-width:
        0;

    max-width:
        100%;
}


.amer-page-header {
    width:
        100%;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        22px;
}


.amer-page-heading {
    min-width:
        0;
}


.amer-eyebrow {
    margin-bottom:
        4px;

    color:
        var(--amer-primary);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .8px;
}


.amer-page-heading h1 {
    margin:
        0;

    font-size:
        clamp(
            1.65rem,
            2.3vw,
            2.35rem
        );

    font-weight:
        900;

    letter-spacing:
        -.6px;
}


.amer-page-heading p {
    margin:
        5px 0 0;

    color:
        var(--amer-muted);

    font-size:
        12px;
}


.amer-page-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        8px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.amer-btn {
    min-height:
        42px;

    padding:
        8px 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        12px;

    font-weight:
        800;
}


.amer-btn-primary {
    border:
        0;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            var(--amer-primary),
            var(--amer-primary-2)
        );

    box-shadow:
        0 8px 20px
        rgba(21, 94, 239, .18);
}


.amer-btn-primary:hover,
.amer-btn-primary:focus {
    color:
        #ffffff;
}


/* =========================================================
   KPI
   ========================================================= */

.amer-kpi-grid {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        14px;
}


.amer-kpi {
    min-width:
        0;

    min-height:
        118px;

    padding:
        17px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border:
        1px solid
        var(--amer-border);

    border-radius:
        var(--amer-radius);

    background:
        var(--amer-surface);

    box-shadow:
        var(--amer-shadow-xs);
}


.amer-kpi-icon {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    color:
        var(--amer-primary);

    background:
        rgba(21, 94, 239, .09);

    font-size:
        20px;
}


.amer-kpi-copy {
    min-width:
        0;
}


.amer-kpi-label {
    color:
        var(--amer-muted);

    font-size:
        10px;

    font-weight:
        700;
}


.amer-kpi-value {
    margin-top:
        2px;

    font-size:
        28px;

    font-weight:
        900;

    line-height:
        1.1;
}


.amer-kpi-note {
    margin-top:
        5px;

    color:
        var(--amer-muted);

    font-size:
        9px;
}


/* =========================================================
   CARDS
   ========================================================= */

.amer-card {
    width:
        100%;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        var(--amer-border);

    border-radius:
        var(--amer-radius);

    background:
        var(--amer-surface);

    box-shadow:
        var(--amer-shadow-xs);
}


.amer-card-header {
    min-height:
        62px;

    padding:
        14px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border-bottom:
        1px solid
        var(--amer-border);
}


.amer-card-header h2 {
    margin:
        0;

    font-size:
        14px;

    font-weight:
        900;
}


.amer-card-subtitle {
    margin-top:
        2px;

    color:
        var(--amer-muted);

    font-size:
        9px;
}


.amer-card-body {
    padding:
        18px;
}


/* =========================================================
   STATUS
   ========================================================= */

.amer-status {
    min-height:
        28px;

    padding:
        4px 9px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    border-radius:
        20px;

    font-size:
        9px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.amer-status-info {
    color:
        #087b89;

    background:
        rgba(15, 181, 201, .11);
}


.amer-status-warning {
    color:
        #9c6500;

    background:
        rgba(243, 167, 26, .13);
}


.amer-status-success {
    color:
        #08794a;

    background:
        rgba(22, 166, 107, .12);
}


.amer-status-danger {
    color:
        #b62d32;

    background:
        rgba(223, 75, 80, .11);
}


/* =========================================================
   DAILY CALL QUEUE
   ========================================================= */

.amer-table {
    width:
        100%;

    margin:
        0;
}


.amer-table thead th {
    padding:
        13px 16px;

    color:
        var(--amer-muted);

    background:
        var(--amer-surface-2);

    border-bottom:
        1px solid
        var(--amer-border);

    font-size:
        10px;

    font-weight:
        900;

    white-space:
        nowrap;
}


.amer-table tbody td {
    padding:
        15px 16px;

    border-bottom:
        1px solid
        var(--amer-border);

    font-size:
        11px;

    vertical-align:
        middle;
}


.amer-table tbody tr:last-child td {
    border-bottom:
        0;
}


.amer-customer-cell {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.amer-mini-avatar {
    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        900;

    background:
        linear-gradient(
            145deg,
            var(--amer-primary),
            var(--amer-cyan)
        );
}


.amer-customer-cell > div:last-child {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.amer-customer-cell strong {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.amer-customer-cell small {
    margin-top:
        2px;

    color:
        var(--amer-muted);
}


.amer-score-row {
    display:
        flex;

    align-items:
        baseline;

    gap:
        3px;
}


.amer-score-row strong {
    font-size:
        13px;
}


.amer-score-row span {
    color:
        var(--amer-muted);

    font-size:
        9px;
}


.amer-score-progress {
    width:
        105px;

    height:
        5px;

    margin-top:
        5px;

    background:
        var(--amer-surface-3);
}


.amer-priority-pill {
    min-width:
        34px;

    min-height:
        30px;

    padding:
        3px 8px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--amer-surface-2);

    font-weight:
        900;
}


.amer-mobile-call-list {
    padding:
        12px;
}


.amer-call-mobile-card {
    padding:
        14px;

    border:
        1px solid
        var(--amer-border);

    border-radius:
        16px;

    background:
        var(--amer-surface);
}


.amer-call-mobile-card +
.amer-call-mobile-card {
    margin-top:
        10px;
}


.amer-call-mobile-top {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;
}


.amer-call-mobile-metrics {
    margin-top:
        15px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.amer-call-mobile-metrics > div {
    padding:
        10px;

    border-radius:
        12px;

    background:
        var(--amer-surface-2);
}


.amer-call-mobile-metrics span {
    display:
        block;

    color:
        var(--amer-muted);

    font-size:
        9px;
}


.amer-call-mobile-metrics strong {
    display:
        block;

    margin-top:
        2px;

    font-size:
        15px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.amer-empty {
    min-height:
        300px;

    padding:
        34px 18px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


.amer-empty-icon {
    width:
        58px;

    height:
        58px;

    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    color:
        var(--amer-primary);

    background:
        rgba(21, 94, 239, .08);

    font-size:
        26px;
}


.amer-empty strong {
    font-size:
        15px;
}


.amer-empty p {
    margin:
        5px 0 15px;

    color:
        var(--amer-muted);

    font-size:
        11px;
}


/* =========================================================
   MOBILE DRAWER
   ========================================================= */

.amer-mobile-drawer {
    width:
        min(
            88vw,
            340px
        ) !important;

    padding-top:
        var(--amer-safe-top);

    background:
        var(--amer-surface);
}


.amer-mobile-drawer
.offcanvas-body {
    padding-bottom:
        calc(
            20px +
            var(--amer-safe-bottom)
        );
}


.amer-mobile-menu {
    display:
        grid;

    gap:
        7px;
}


.amer-mobile-menu > a {
    min-height:
        50px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border-radius:
        14px;

    color:
        var(--amer-text);

    background:
        var(--amer-surface-2);

    text-decoration:
        none;
}


.amer-mobile-menu > a i {
    width:
        22px;

    color:
        var(--amer-primary);

    text-align:
        center;
}


/* =========================================================
   MOBILE BOTTOM NAV
   ========================================================= */

.amer-bottom-nav {
    position:
        fixed;

    right:
        max(
            8px,
            var(--amer-safe-right)
        );

    left:
        max(
            8px,
            var(--amer-safe-left)
        );

    bottom:
        max(
            8px,
            var(--amer-safe-bottom)
        );

    z-index:
        1050;

    height:
        var(--amer-bottom-nav-height);

    padding:
        7px 8px;

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    align-items:
        center;

    border:
        1px solid
        var(--amer-border);

    border-radius:
        22px;

    background:
        color-mix(
            in srgb,
            var(--amer-surface) 96%,
            transparent
        );

    box-shadow:
        0 18px 50px
        rgba(16, 32, 51, .18);

    backdrop-filter:
        blur(18px);
}


.amer-bottom-nav > a {
    min-width:
        0;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        2px;

    color:
        var(--amer-muted);

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        700;
}


.amer-bottom-nav > a i {
    font-size:
        18px;
}


.amer-bottom-nav > a.is-active {
    color:
        var(--amer-primary);
}


.amer-bottom-primary {
    transform:
        translateY(-14px);
}


.amer-bottom-primary-icon {
    width:
        46px;

    height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            145deg,
            var(--amer-primary),
            var(--amer-cyan)
        );

    box-shadow:
        0 12px 26px
        rgba(21, 94, 239, .28);
}


/* =========================================================
   BOOTSTRAP FIXES
   ========================================================= */

.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width:
        0;
}


.table-responsive {
    width:
        100%;

    overflow-x:
        auto;

    -webkit-overflow-scrolling:
        touch;
}


.form-control,
.form-select {
    max-width:
        100%;

    border-color:
        var(--amer-border);

    background-color:
        var(--amer-surface);

    color:
        var(--amer-text);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {

    .amer-main {
        width:
            100%;

        max-width:
            100%;

        margin-right:
            0;
    }


    .amer-content {
        width:
            100%;

        max-width:
            100%;

        padding:
            18px
            max(
                14px,
                var(--amer-safe-right)
            )
            calc(
                var(--amer-bottom-nav-height) +
                var(--amer-safe-bottom) +
                48px
            )
            max(
                14px,
                var(--amer-safe-left)
            );
    }


    .amer-kpi-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    :root {
        --amer-topbar-height:
            60px;

        --amer-bottom-nav-height:
            68px;
    }


    body {
        font-size:
            13px;
    }


    .amer-topbar {
        padding-left:
            max(
                10px,
                var(--amer-safe-left)
            );

        padding-right:
            max(
                10px,
                var(--amer-safe-right)
            );
    }


    .amer-topbar-title small {
        display:
            none;
    }


    .amer-content {
        padding-top:
            12px;

        padding-right:
            max(
                10px,
                var(--amer-safe-right)
            );

        padding-left:
            max(
                10px,
                var(--amer-safe-left)
            );

        padding-bottom:
            calc(
                var(--amer-bottom-nav-height) +
                var(--amer-safe-bottom) +
                48px
            );
    }


    .amer-page-header {
        align-items:
            stretch;

        flex-direction:
            column;

        margin-bottom:
            16px;
    }


    .amer-page-heading h1 {
        font-size:
            1.55rem;
    }


    .amer-page-actions {
        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr 1fr;
    }


    .amer-page-actions > *,
    .amer-page-actions form,
    .amer-page-actions .btn {
        width:
            100%;
    }


    .amer-kpi-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            9px;
    }


    .amer-kpi {
        min-height:
            94px;

        padding:
            12px;

        gap:
            10px;
    }


    .amer-kpi-icon {
        width:
            40px;

        height:
            40px;

        border-radius:
            12px;

        font-size:
            17px;
    }


    .amer-kpi-value {
        font-size:
            22px;
    }


    .amer-card-header {
        padding:
            12px 14px;
    }


    .amer-mobile-call-list {
        padding:
            10px;
    }


    .form-control,
    .form-select {
        min-height:
            44px;

        font-size:
            16px;
    }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .amer-page-actions {
        grid-template-columns:
            1fr;
    }


    .amer-kpi-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .amer-kpi {
        min-height:
            88px;

        padding:
            10px;
    }


    .amer-kpi-icon {
        display:
            none;
    }


    .amer-kpi-note {
        display:
            none;
    }

}


/* =========================================================
   PWA / TWA
   ========================================================= */

@media (display-mode: standalone) {

    body {
        min-height:
            100dvh;
    }


    .amer-content {
        padding-bottom:
            calc(
                var(--amer-bottom-nav-height) +
                var(--amer-safe-bottom) +
                52px
            );
    }

}