/* =========================================================
A-Two Finance - Shared Theme
Track · Manage · Grow
========================================================= */

:root {
--bg: #f4f7fb;
--surface: #ffffff;
--surface-2: #eef3f8;

--text: #182230;
--muted: #667085;

--primary: #166534;
--primary-2: #15803d;

--danger: #b42318;
--warning: #b54708;

--border: #dfe5ec;

--shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
--shadow-sm: 0 4px 14px rgba(16, 24, 40, 0.06);

--radius: 18px;
--radius-sm: 12px;

--sidebar-width: 250px;
--mobile-nav-height: 68px;

/* =======================================================
PAGE TRANSITION
======================================================= */

--page-transition-duration: 280ms;
--page-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
--page-transition-ease-out: cubic-bezier(0.4, 0, 1, 1);

}

/* =========================================================
DARK MODE
========================================================= */

[data-theme="dark"] {
--bg: #0e1512;
--surface: #16201b;
--surface-2: #202c25;

--text: #edf7f0;
--muted: #a6b5ab;

--primary: #4ade80;
--primary-2: #22c55e;

--danger: #ff6b6b;
--warning: #fdb022;

--border: #2d3b33;

--shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
--shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.18);

}

/* =========================================================
RESET
========================================================= */

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

html {
margin: 0;
padding: 0;
min-height: 100%;
scroll-behavior: smooth;
background: var(--bg);
}

body {
margin: 0;
min-height: 100vh;

font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

background: var(--bg);
color: var(--text);

line-height: 1.5;

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;

opacity: 1;
transform: translateY(0);

}

/* =========================================================
PAGE TRANSITION - INITIAL LOAD
========================================================= */

html.page-loading body {
opacity: 0;
transform: translateY(8px);
}

html.page-ready body {
animation:
page-enter
var(--page-transition-duration)
var(--page-transition-ease)
both;
}

@keyframes page-enter {
from {
opacity: 0;
transform: translateY(8px);
}

55% {
    opacity: 0.72;
}

to {
    opacity: 1;
    transform: translateY(0);
}

}

/* =========================================================
PAGE TRANSITION - EXIT
========================================================= */

html.page-exit body {
opacity: 0;
transform: translateY(5px);
pointer-events: none;

transition:
    opacity 180ms var(--page-transition-ease-out),
    transform 180ms var(--page-transition-ease-out);

}

html.page-exit.page-ready body {
animation: none;
}

/* =========================================================
BASIC ELEMENTS
========================================================= */

img {
max-width: 100%;
display: block;
}

a {
color: inherit;
text-decoration: none;
}

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

button {
cursor: pointer;
}

button:disabled {
cursor: not-allowed;
opacity: 0.6;
}

input,
select,
textarea {
color-scheme: light;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
color-scheme: dark;
}

.hidden {
display: none !important;
}

/* =========================================================
APP LAYOUT
========================================================= */

.app {
min-height: 100vh;
display: flex;
}

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

.sidebar {
position: fixed;
z-index: 20;

inset: 0 auto 0 0;

width: var(--sidebar-width);

background: var(--surface);

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

padding: 22px 16px;

display: flex;
flex-direction: column;

overflow-y: auto;
overflow-x: hidden;

box-sizing: border-box;

}

.brand {
display: flex;
align-items: center;

gap: 11px;

font-weight: 800;
font-size: 19px;

margin-bottom: 25px;

min-width: 0;
flex-shrink: 0;

}

.brand img {
width: 38px;
height: 38px;

flex: 0 0 38px;

}

.brand span {
min-width: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.brand small {
display: block;

font-size: 11px;
line-height: 1.3;

color: var(--muted);

font-weight: 500;

margin-top: 2px;

}

/* =========================================================
NAVIGATION
========================================================= */

.nav {
display: grid;

gap: 6px;

width: 100%;

min-width: 0;

}

.nav a {
position: relative;

width: 100%;
min-width: 0;
min-height: 44px;

padding: 11px 13px;

border-radius: 12px;

color: var(--muted);

display: flex;
align-items: center;

gap: 10px;

font-weight: 650;

overflow: hidden;

transform: translateX(0);

/*
Transisi berlaku pada SEMUA menu.
Jadi ketika pindah dari Beranda ke Riwayat,
efek tombol tetap konsisten.
*/

transition:
    background 220ms var(--page-transition-ease),
    color 220ms var(--page-transition-ease),
    transform 220ms var(--page-transition-ease),
    box-shadow 220ms var(--page-transition-ease),
    border-color 220ms var(--page-transition-ease);

}

.nav a span {
min-width: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

/* =========================================================
NAVIGATION EFFECT LAYER
========================================================= */

.nav a::after {
content: "";

position: absolute;

inset: 0;

border-radius: inherit;

background: transparent;

pointer-events: none;

opacity: 0;

transition:
    opacity 220ms var(--page-transition-ease),
    background 220ms var(--page-transition-ease);

}

/* =========================================================
NAV HOVER
========================================================= */

.nav a:hover {
background: var(--surface-2);

color: var(--primary);

transform: translateX(3px);

}

.nav a:hover::after {
opacity: 1;

background:
    linear-gradient(
        90deg,
        color-mix(
            in srgb,
            var(--primary) 6%,
            transparent
        ),
        transparent 80%
    );

}

/* =========================================================
ACTIVE MENU
========================================================= */

/*
Menu aktif dibuat seperti tombol Beranda pada tampilan:

background hijau transparan
teks hijau
indikator hijau di kiri
sedikit efek shadow
perpindahan halus
*/

.nav a.active,
.nav a[aria-current="page"] {
background:
color-mix(
in srgb,
var(--primary) 10%,
var(--surface)
);

color: var(--primary);

box-shadow:
    inset 0 0 0 1px
    color-mix(
        in srgb,
        var(--primary) 12%,
        transparent
    );

transform: translateX(1px);

}

.nav a.active::after,
.nav a[aria-current="page"]::after {
opacity: 1;

background:
    linear-gradient(
        90deg,
        color-mix(
            in srgb,
            var(--primary) 10%,
            transparent
        ),
        transparent 78%
    );

}

/* =========================================================
ACTIVE INDICATOR - DESKTOP
========================================================= */

.nav a.active::before,
.nav a[aria-current="page"]::before {
content: "";

position: absolute;

left: 0;
top: 50%;

width: 4px;
height: 24px;

transform:
    translateY(-50%)
    scaleY(1);

transform-origin: center;

background: var(--primary);

border-radius: 0 6px 6px 0;

box-shadow:
    0 0 12px
    color-mix(
        in srgb,
        var(--primary) 28%,
        transparent
    );

z-index: 3;

animation:
    active-menu-indicator
    220ms
    var(--page-transition-ease)
    both;

}

@keyframes active-menu-indicator {
from {
opacity: 0;

    transform:
        translateY(-50%)
        scaleY(0.2);
}

to {
    opacity: 1;

    transform:
        translateY(-50%)
        scaleY(1);
}

}

/* =========================================================
ACTIVE MENU PRESS EFFECT
========================================================= */

.nav a:active {
transform:
translateX(1px)
scale(0.985);
}

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

.sidebar-bottom {
margin-top: auto;

padding-top: 20px;

}

.logout {
width: 100%;

border: 0;

background: transparent;

color: var(--danger);

padding: 11px 13px;

text-align: left;

border-radius: 12px;

font-weight: 650;

transition:
    background 180ms ease,
    transform 180ms ease,
    color 180ms ease;

}

.logout:hover {
background:
color-mix(
in srgb,
var(--danger) 9%,
transparent
);

transform: translateX(2px);

}

/* =========================================================
MAIN CONTENT
========================================================= */

.main {
margin-left: var(--sidebar-width);

width: calc(100% - var(--sidebar-width));

min-height: 100vh;

padding: 26px;

min-width: 0;

}

/* =========================================================
TOPBAR
========================================================= */

.topbar {
display: flex;

align-items: center;

justify-content: space-between;

gap: 16px;

margin-bottom: 24px;

min-width: 0;

}

.topbar h1 {
margin: 0;

font-size: 28px;

line-height: 1.2;

letter-spacing: -0.02em;

}

.topbar p {
margin: 5px 0 0;

color: var(--muted);

font-size: 14px;

}

.user-chip {
display: flex;

align-items: center;

gap: 9px;

background: var(--surface);

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

padding: 9px 13px;

border-radius: 999px;

box-shadow: var(--shadow-sm);

white-space: nowrap;

flex-shrink: 0;

}

.avatar {
width: 32px;
height: 32px;

border-radius: 50%;

background: var(--primary);

color: #ffffff;

display: grid;

place-items: center;

font-weight: 800;

flex: 0 0 32px;

}

/* =========================================================
GRID
========================================================= */

.grid {
display: grid;

gap: 18px;

}

.cards {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
}

/* =========================================================
CARD
========================================================= */

.card {
background: var(--surface);

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

border-radius: var(--radius);

box-shadow: var(--shadow);

padding: 20px;

min-width: 0;

}

.card + .card {
margin-top: 0;
}

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

.stat {
display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 14px;

min-width: 0;

}

.stat .label {
color: var(--muted);

font-size: 13px;

font-weight: 700;

}

.stat .value {
font-size: 27px;

font-weight: 850;

margin-top: 6px;

line-height: 1.2;

letter-spacing: -0.02em;

overflow-wrap: anywhere;

}

.iconbox {
width: 42px;
height: 42px;

border-radius: 13px;

background: var(--surface-2);

display: grid;

place-items: center;

flex: 0 0 42px;

font-size: 18px;

}

/* =========================================================
SECTION HEADER
========================================================= */

.section-head {
display: flex;

align-items: center;

justify-content: space-between;

gap: 14px;

margin-bottom: 15px;

min-width: 0;

}

.section-head h2 {
font-size: 18px;

margin: 0;

line-height: 1.3;

letter-spacing: -0.01em;

}

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

.btn {
border: 1px solid var(--border);

background: var(--surface);

color: var(--text);

padding: 10px 14px;

border-radius: 11px;

font-weight: 750;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 7px;

line-height: 1.2;

transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;

}

.btn:hover {
background: var(--surface-2);
}

.btn:active {
transform:
translateY(1px)
scale(0.99);
}

.btn:focus-visible {
outline:
3px solid
color-mix(
in srgb,
var(--primary) 25%,
transparent
);

outline-offset: 2px;

}

.btn-primary {
background: var(--primary);

border-color: var(--primary);

color: #ffffff;

}

.btn-primary:hover {
background: var(--primary-2);

border-color: var(--primary-2);

color: #ffffff;

box-shadow:
    0 6px 18px
    color-mix(
        in srgb,
        var(--primary) 22%,
        transparent
    );

}

.btn-danger {
background: transparent;

border-color:
    color-mix(
        in srgb,
        var(--danger) 35%,
        var(--border)
    );

color: var(--danger);

}

.btn-danger:hover {
background:
color-mix(
in srgb,
var(--danger) 8%,
transparent
);
}

.btn-sm {
padding: 7px 10px;

font-size: 12px;

border-radius: 9px;

}

/* =========================================================
TABLE
========================================================= */

.table-wrap {
width: 100%;

overflow-x: auto;

-webkit-overflow-scrolling: touch;

border-radius: 12px;

}

table {
width: 100%;

border-collapse: collapse;

min-width: 620px;

}

th,
td {
text-align: left;

padding: 13px 11px;

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

white-space: nowrap;

}

thead th {
background: var(--surface);
}

th {
font-size: 12px;

color: var(--muted);

text-transform: uppercase;

letter-spacing: 0.03em;

font-weight: 800;

}

td {
font-size: 14px;
}

tbody tr {
transition:
background 150ms ease;
}

tbody tr:hover {
background:
color-mix(
in srgb,
var(--surface-2) 55%,
transparent
);
}

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

/* =========================================================
AMOUNTS
========================================================= */

.amount-income {
color: var(--primary-2);

font-weight: 800;

}

.amount-expense {
color: var(--danger);

font-weight: 800;

}

/* =========================================================
BADGE
========================================================= */

.badge {
display: inline-flex;

align-items: center;

padding: 5px 9px;

border-radius: 999px;

font-size: 12px;

font-weight: 750;

background: var(--surface-2);

color: var(--text);

line-height: 1.2;

}

/* =========================================================
FILTERS
========================================================= */

.filters {
display: flex;

flex-wrap: wrap;

gap: 10px;

align-items: end;

}

.field {
display: grid;

gap: 6px;

min-width: 160px;

}

.field label {
font-size: 12px;

color: var(--muted);

font-weight: 750;

}

.field input,
.field select,
.field textarea {
width: 100%;

padding: 10px 11px;

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

border-radius: 11px;

background: var(--surface);

color: var(--text);

outline: none;

transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;

}

.field input::placeholder,
.field textarea::placeholder {
color: var(--muted);

opacity: 0.8;

}

.field input:hover,
.field select:hover,
.field textarea:hover {
border-color:
color-mix(
in srgb,
var(--primary) 30%,
var(--border)
);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--primary);

box-shadow:
    0 0 0 3px
    color-mix(
        in srgb,
        var(--primary) 13%,
        transparent
    );

}

.field textarea {
min-height: 95px;

resize: vertical;

line-height: 1.5;

}

.field input[type="date"] {
min-height: 42px;
}

/* =========================================================
FORM GRID
========================================================= */

.form-grid {
display: grid;

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

gap: 14px;

}

.full {
grid-column: 1 / -1;
}

/* =========================================================
MODAL
========================================================= */

.modal {
position: fixed;

inset: 0;

z-index: 50;

background: rgba(0, 0, 0, 0.55);

display: grid;

place-items: center;

padding: 18px;

backdrop-filter: blur(3px);

}

.modal-card {
width: min(620px, 100%);

max-height: 92vh;

overflow: auto;

background: var(--surface);

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

border-radius: 20px;

padding: 22px;

box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.2);

}

.modal-head {
display: flex;

justify-content: space-between;

align-items: center;

gap: 12px;

margin-bottom: 17px;

}

.modal-head h2,
.modal-head h3 {
margin: 0;

line-height: 1.3;

}

.close {
border: 0;

background: var(--surface-2);

color: var(--text);

width: 34px;
height: 34px;

border-radius: 50%;

display: grid;

place-items: center;

flex: 0 0 34px;

transition:
    background 180ms ease,
    transform 180ms ease;

}

.close:hover {
background: var(--border);

transform: rotate(3deg);

}

/* =========================================================
ACTIONS
========================================================= */

.actions {
display: flex;

gap: 9px;

justify-content: flex-end;

margin-top: 16px;

flex-wrap: wrap;

}

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

.empty {
padding: 32px;

text-align: center;

color: var(--muted);

font-size: 14px;

}

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

.kpi-row {
display: grid;

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

gap: 16px;

}

/* =========================================================
CHART
========================================================= */

.chart-grid {
display: grid;

grid-template-columns:
    1.5fr 1fr;

gap: 18px;

}

.chart-box {
height: 330px;

position: relative;

min-width: 0;

}

.chart-box canvas {
max-width: 100%;
}

/* =========================================================
SUMMARY
========================================================= */

.summary {
display: flex;

justify-content: space-between;

gap: 18px;

flex-wrap: wrap;

padding-top: 16px;

margin-top: 16px;

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

}

.summary > div {
min-width: 140px;
}

.summary strong {
font-size: 20px;

line-height: 1.2;

}

/* =========================================================
AUTH PAGE
========================================================= */

.auth-page {
min-height: 100vh;

display: grid;

place-items: center;

padding: 20px;

background: var(--bg);

}

.auth-card {
width: min(460px, 100%);

background: var(--surface);

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

box-shadow: var(--shadow);

border-radius: 22px;

padding: 28px;

}

.auth-card .brand {
justify-content: center;

margin-bottom: 20px;

}

.auth-card h1 {
font-size: 25px;

text-align: center;

margin: 8px 0 4px;

line-height: 1.25;

}

.auth-card .sub {
text-align: center;

color: var(--muted);

margin: 0 0 22px;

font-size: 14px;

}

.auth-links {
text-align: center;

color: var(--muted);

font-size: 14px;

margin-top: 18px;

}

.auth-links a {
color: var(--primary);

font-weight: 750;

}

.auth-links a:hover {
text-decoration: underline;
}

/* =========================================================
ALERT
========================================================= */

.alert {
padding: 11px 13px;

border-radius: 11px;

background: #fff4ed;

color: #9a3412;

margin-bottom: 14px;

border: 1px solid
    color-mix(
        in srgb,
        #f97316 18%,
        transparent
    );

font-size: 14px;

}

[data-theme="dark"] .alert {
background: #351e15;

color: #fdba74;

border-color: #5c301f;

}

/* =========================================================
SETTINGS
========================================================= */

.settings-grid {
display: grid;

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

gap: 18px;

}

.setting-item {
padding: 14px 0;

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

}

.setting-item:first-child {
padding-top: 0;
}

.setting-item:last-child {
border-bottom: 0;
}

.setting-item h3 {
margin: 0 0 3px;

font-size: 15px;

}

.setting-item p {
margin: 0;

color: var(--muted);

font-size: 13px;

}

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

.mobile-menu {
display: none;
}

/* =========================================================
TOAST
========================================================= */

.toast {
position: fixed;

right: 18px;
bottom: 18px;

z-index: 100;

max-width:
    min(
        420px,
        calc(100vw - 36px)
    );

padding: 12px 15px;

border-radius: 12px;

background: var(--text);

color: var(--surface);

box-shadow: var(--shadow);

font-weight: 700;

font-size: 14px;

animation:
    toast-in
    200ms
    ease-out;

}

@keyframes toast-in {
from {
opacity: 0;

    transform: translateY(8px);
}

to {
    opacity: 1;

    transform: translateY(0);
}

}

/* =========================================================
SCROLLBAR
========================================================= */

{
scrollbar-width: thin;

scrollbar-color:
var(--border)
transparent;
}

::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
background: var(--border);

border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}

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

@media (max-width: 1100px) {
:root {
--sidebar-width: 220px;
}

.sidebar {
    padding: 20px 12px;
}

.main {
    padding: 22px;
}

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

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

}

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

@media (max-width: 900px) {
:root {
--sidebar-width: 76px;
}

.sidebar {
    width: 76px;

    padding: 18px 10px;
}

.brand {
    justify-content: center;
}

.brand span,
.brand small,
.nav a span,
.logout span {
    display: none;
}

.nav a,
.logout {
    justify-content: center;
}

.nav a {
    min-height: 44px;

    padding: 9px;

    gap: 0;
}

/*
Active indicator tablet.
*/

.nav a.active::before,
.nav a[aria-current="page"]::before {
    display: block;

    left: 0;

    top: 50%;

    width: 3px;

    height: 20px;

    transform:
        translateY(-50%)
        scaleY(1);
}

.nav a.active,
.nav a[aria-current="page"] {
    transform: translateX(1px);
}

.nav a:hover {
    transform: translateX(1px);
}

.main {
    margin-left: 76px;

    width: calc(100% - 76px);

    padding: 20px;
}

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

.chart-grid,
.settings-grid {
    grid-template-columns: 1fr;
}

.topbar h1 {
    font-size: 25px;
}

}

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

@media (max-width: 650px) {
.app {
min-height: 100vh;
}

/* =======================================================
BOTTOM NAVIGATION
======================================================= */

.sidebar {
    position: fixed;

    top: auto;
    bottom: 0;

    left: 0;
    right: 0;

    width: 100%;

    height: var(--mobile-nav-height);

    flex-direction: row;

    padding: 6px;

    background: var(--surface);

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

    border-right: 0;

    overflow: hidden;

    box-shadow:
        0 -6px 24px
        rgba(16, 24, 40, 0.07);
}

.brand,
.sidebar-bottom {
    display: none;
}

.nav {
    display: flex;

    justify-content: space-around;

    align-items: stretch;

    width: 100%;

    gap: 3px;
}

.nav a {
    position: relative;

    flex: 1;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    gap: 2px;

    padding: 6px 3px;

    border-radius: 10px;

    min-width: 0;

    min-height: 0;

    font-size: 0;

    transform: none !important;

    transition:
        background 220ms var(--page-transition-ease),
        color 220ms var(--page-transition-ease),
        box-shadow 220ms var(--page-transition-ease);
}

/* =======================================================
MOBILE ACTIVE MENU
======================================================= */

.nav a:hover,
.nav a.active,
.nav a[aria-current="page"] {
    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--surface)
        );

    color: var(--primary);

    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--primary) 10%,
            transparent
        );
}

.nav a:hover::after,
.nav a.active::after,
.nav a[aria-current="page"]::after {
    background: transparent;

    opacity: 0;
}

/*
Active indicator berada di bagian atas
tombol menu aktif.
*/

.nav a.active::before,
.nav a[aria-current="page"]::before {
    display: block;

    top: 3px;

    left: 50%;

    width: 26px;

    height: 3px;

    transform:
        translateX(-50%)
        scaleX(1);

    border-radius: 999px;

    box-shadow:
        0 0 10px
        color-mix(
            in srgb,
            var(--primary) 30%,
            transparent
        );

    animation:
        active-mobile-indicator
        220ms
        var(--page-transition-ease)
        both;
}

@keyframes active-mobile-indicator {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            scaleX(0.25);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            scaleX(1);
    }
}

/*
Icon/emoji menu tetap terlihat.
*/

.nav a::first-letter {
    font-size: 20px;
}

.nav a span {
    display: none;
}

.main {
    margin-left: 0;

    width: 100%;

    padding:
        16px
        16px
        calc(
            var(--mobile-nav-height) + 20px
        );
}

.topbar {
    align-items: flex-start;

    margin-bottom: 18px;

    gap: 10px;
}

.topbar h1 {
    font-size: 22px;
}

.topbar p {
    font-size: 13px;
}

.user-chip {
    padding: 7px 9px;
}

.user-chip .avatar {
    width: 30px;

    height: 30px;

    flex-basis: 30px;
}

.card {
    padding: 16px;

    border-radius: 16px;
}

.section-head {
    align-items: flex-start;

    flex-wrap: wrap;
}

.section-head h2 {
    font-size: 17px;
}

.form-grid,
.kpi-row {
    grid-template-columns: 1fr;
}

.full {
    grid-column: auto;
}

.filters {
    display: grid;

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

    width: 100%;
}

.filters .field {
    min-width: 0;

    width: 100%;
}

.filters .btn {
    width: 100%;
}

.chart-box {
    height: 280px;
}

.summary {
    display: grid;

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

    gap: 14px;
}

.summary > div {
    min-width: 0;
}

.summary strong {
    font-size: 18px;
}

.modal {
    padding: 10px;
}

.modal-card {
    max-height: 94vh;

    padding: 18px;

    border-radius: 17px;
}

.actions {
    width: 100%;
}

.actions .btn {
    flex: 1;

    min-width: 110px;
}

.auth-page {
    padding: 14px;
}

.auth-card {
    padding: 22px 18px;

    border-radius: 18px;
}

.auth-card h1 {
    font-size: 23px;
}

.toast {
    left: 16px;
    right: 16px;

    bottom:
        calc(
            var(--mobile-nav-height) + 12px
        );

    max-width: none;

    text-align: center;
}

}

/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
.main {
padding-left: 12px;

    padding-right: 12px;
}

.card {
    padding: 14px;
}

.topbar h1 {
    font-size: 20px;
}

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

.stat .value {
    font-size: 23px;
}

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

.nav a::first-letter {
    font-size: 18px;
}

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

html.page-loading body,
html.page-ready body,
html.page-exit body,
body,
body.page-enter,
body.page-exit {
    animation: none !important;

    transition: none !important;

    transform: none !important;

    opacity: 1 !important;
}

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
}

}