@font-face {
    font-family: "Manrope ERP";
    src: url("/fonts/manrope/Manrope-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --erp-primary: #1976d2;
    --erp-primary-dark: #0f5faf;
    --erp-accent: #0ea89b;
    --erp-navy: #101827;
    --erp-navy-soft: #172235;
    --erp-canvas: #f4f6fb;
    --erp-card: #fff;
    --erp-text: #1d2738;
    --erp-muted: #718096;
    --erp-border: #e7eaf0;
    --erp-shadow: 0 12px 32px rgba(20, 31, 55, .065);
    --erp-shadow-hover: 0 18px 42px rgba(20, 31, 55, .11);
    --tblr-primary: var(--erp-primary);
    --tblr-primary-rgb: 25, 118, 210;
    --tblr-body-bg: var(--erp-canvas);
    --tblr-body-color: var(--erp-text);
    --tblr-font-sans-serif: "Manrope ERP", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    --tblr-border-radius: .7rem;
    --tblr-border-radius-lg: 1rem;
}

* { scrollbar-width: thin; scrollbar-color: #cbd2df transparent; }
html { font-size: 16px; }
body { color: var(--erp-text); background: var(--erp-canvas); font-size: 1rem; font-weight: 470; line-height: 1.55; letter-spacing: -.012em; }
h1, h2, h3, h4, h5, h6, .card-title { font-family: "Manrope ERP", Inter, "Segoe UI", sans-serif; letter-spacing: -.035em; }
.page { background: radial-gradient(circle at 85% 0, rgba(91, 91, 214, .055), transparent 27rem), var(--erp-canvas); }
.page-wrapper { min-height: 100vh; }
.page-body { min-height: calc(100vh - 10rem); padding-top: 2rem; }
.app-container { max-width: 1800px; }

/* Navigation */
.app-sidebar { --tblr-navbar-vertical-width: 18rem; position: relative; overflow: hidden; border: 0; background: linear-gradient(165deg, #131e31 0%, #0d1523 68%, #101a2a 100%); box-shadow: .75rem 0 2.5rem rgba(15, 23, 42, .08); }
.app-sidebar::before { content: ""; position: absolute; inset: -8rem -10rem auto auto; width: 20rem; height: 20rem; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(91, 91, 214, .22), transparent 67%); }
.app-sidebar > .container-fluid { position: relative; z-index: 1; min-height: 0; }
.app-sidebar .navbar-collapse { min-height: 0; }
.app-menu-toggle { display: none; }
.sidebar-scroll { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(255,255,255,.18) transparent; }
.app-sidebar .navbar-brand { min-height: 5.5rem; justify-content: flex-start; gap: .8rem; padding: 1rem .65rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.brand-symbol { display: inline-grid; place-items: center; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: .85rem; color: #fff; background: linear-gradient(135deg, #2491eb, #08a6c9); box-shadow: 0 .65rem 1.5rem rgba(25, 118, 210, .28); font-size: 1.35rem; }
.login-brand-logo { width: 100%; height: 100%; padding: .18rem; border-radius: .72rem; object-fit: contain; }
.brand-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.12; text-align: left; }
.brand-copy strong { color: #fff; font-size: 1.1rem; font-weight: 760; letter-spacing: -.03em; }
.brand-copy small { margin-top: .28rem; color: rgba(226, 232, 240, .53); font-size: .74rem; font-weight: 520; }
.brand-badge { padding: .2rem .38rem; border: 1px solid rgba(255,255,255,.12); border-radius: .35rem; color: rgba(255,255,255,.5); font-size: .55rem; letter-spacing: .08em; }
.nav-section-label { display: flex; align-items: center; gap: .48rem; padding: 1.2rem 1rem .42rem; color: rgba(203, 213, 225, .48); font-size: .67rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.nav-section-icon { display: grid; width: 1.2rem; place-items: center; color: rgba(169,169,255,.72); font-size: .88rem; }
.nav-section-line { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(255,255,255,.09), transparent); }
.app-sidebar .navbar-nav { padding-inline: .15rem; }
.app-sidebar .nav-link { position: relative; min-height: 2.95rem; margin: .08rem .4rem; padding: .7rem .78rem; border-radius: .7rem; color: rgba(226, 232, 240, .72); font-size: .91rem; font-weight: 590; transition: color .18s ease, background .18s ease, transform .18s ease; }
.app-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(2px); }
.app-sidebar .nav-item.active > .nav-link { color: #fff; background: linear-gradient(90deg, rgba(91, 91, 214, .28), rgba(91, 91, 214, .11)); box-shadow: inset 0 0 0 1px rgba(143, 143, 255, .12); }
.app-sidebar .nav-item.active > .nav-link::before { content: ""; position: absolute; inset: .65rem auto .65rem -.4rem; width: 3px; border-radius: 3px; background: #63b3ed; box-shadow: 0 0 12px #2196f3; }
.app-sidebar .nav-link-icon { width: 1.8rem; margin-right: .45rem; color: rgba(226,232,240,.55); font-size: 1.2rem; }
.app-sidebar .active .nav-link-icon { color: #90caf9; }
.sidebar-foot { flex: 0 0 auto; margin: .35rem .55rem .75rem; padding: .7rem; border: 1px solid rgba(255,255,255,.08); border-radius: .9rem; color: rgba(226,232,240,.75); background: rgba(255,255,255,.045); box-shadow: 0 .75rem 2rem rgba(0,0,0,.12); }
.sidebar-user { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .12rem .15rem .7rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-user-avatar { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: .68rem; color: #b8ddff; background: rgba(25,118,210,.2); font-size: 1.05rem; }
.sidebar-user-copy { min-width: 0; flex: 1; }
.sidebar-user-copy strong, .sidebar-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-copy strong { color: #f4f6ff; font-size: .76rem; font-weight: 700; }
.sidebar-user-copy small { margin-top: .12rem; color: rgba(226,232,240,.42); font-size: .64rem; }
.sidebar-online { width: .48rem; height: .48rem; flex: 0 0 .48rem; border-radius: 50%; background: #31c59d; box-shadow: 0 0 0 4px rgba(49,197,157,.1); }
.sidebar-account-actions { display: grid; grid-template-columns: 1fr auto; gap: .35rem; padding-top: .55rem; }
.sidebar-account-actions form { margin: 0; }
.sidebar-account-link { display: flex; min-height: 2.1rem; align-items: center; justify-content: center; gap: .4rem; padding: .38rem .55rem; border-radius: .58rem; color: rgba(226,232,240,.65); font-size: .68rem; font-weight: 650; text-decoration: none; transition: color .15s ease, background .15s ease; }
.sidebar-account-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.sidebar-account-link--danger { color: #ff9f9f; }
.sidebar-account-link--danger:hover { color: #ffc2c2; background: rgba(220,53,69,.1); }

/* Top bar */
.app-topbar { position: sticky; top: 0; z-index: 1020; min-height: 4.75rem; border: 0; border-bottom: 1px solid rgba(222,226,235,.78); background: rgba(255,255,255,.84); box-shadow: 0 .35rem 1.4rem rgba(20,31,55,.035); backdrop-filter: blur(16px); }
.topbar-context { display: flex; align-items: center; gap: .7rem; }
.topbar-context-icon { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .72rem; color: var(--erp-primary); background: rgba(var(--tblr-primary-rgb), .09); font-size: 1.2rem; }
.topbar-context small, .topbar-context strong { display: block; line-height: 1.2; }
.topbar-context small { margin-bottom: .18rem; color: var(--erp-muted); font-size: .69rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.topbar-context strong { font-size: 1rem; font-weight: 720; }
.btn-pill { padding-inline: 1rem; border-radius: 999px; box-shadow: 0 .4rem 1.1rem rgba(var(--tblr-primary-rgb), .2); }
.quick-menu { width: 18rem; padding: .45rem; border: 0; border-radius: .9rem; box-shadow: 0 1rem 3rem rgba(20,31,55,.16); }
.quick-menu .dropdown-item { display: flex; align-items: center; gap: .7rem; padding: .65rem; border-radius: .6rem; }
.quick-menu .dropdown-item-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .55rem; color: var(--erp-primary); background: rgba(var(--tblr-primary-rgb),.09); font-size: 1rem; }
.quick-menu .dropdown-item span:last-child { font-size: .82rem; font-weight: 600; }
.quick-menu .dropdown-item small { display: block; margin-top: .1rem; color: var(--erp-muted); font-size: .66rem; font-weight: 400; }

/* Page and cards */
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; }
.page-heading h1 { margin: 0; color: #172033; font-size: clamp(1.8rem, 2.35vw, 2.25rem); font-weight: 780; line-height: 1.15; letter-spacing: -.05em; }
.page-heading p { max-width: 52rem; margin: .45rem 0 0; color: var(--erp-muted); font-size: clamp(.92rem, 1vw, 1.02rem); line-height: 1.6; }
.page-kicker { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .55rem; color: var(--erp-primary); font-size: .74rem; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; }
.page-status { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .78rem; border: 1px solid #e5e9f1; border-radius: 999px; color: var(--erp-muted); background: rgba(255,255,255,.68); font-size: .76rem; font-weight: 570; }
.page-status > span { width: .45rem; height: .45rem; border-radius: 50%; background: #22b98a; box-shadow: 0 0 0 4px rgba(34,185,138,.1); }
.card { overflow: hidden; border: 1px solid rgba(226,230,238,.8); border-radius: 1rem; background: rgba(255,255,255,.94); box-shadow: var(--erp-shadow); }
.card-header { min-height: 3.65rem; padding-inline: 1.25rem; border-bottom-color: #edf0f5; background: rgba(255,255,255,.84) !important; }
.card-title { color: #283448; font-size: 1.06rem; font-weight: 760; letter-spacing: -.025em; }
.card-footer { border-top-color: #edf0f5; background: #fbfcfe !important; }
.list-group-item { border-color: #edf0f5; }

/* Dashboard */
.stat-card { min-height: 10.5rem; border: 0; color: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--erp-shadow-hover); }
.stat-card::after { content: ""; position: absolute; right: -2.5rem; bottom: -3rem; width: 9rem; height: 9rem; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.stat-card::before { content: ""; position: absolute; right: 1rem; bottom: -4rem; width: 7rem; height: 7rem; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.stat-card--violet { background: linear-gradient(135deg, #1565c0, #42a5f5); }
.stat-card--cyan { background: linear-gradient(135deg, #137fa0, #16a6b6); }
.stat-card--emerald { background: linear-gradient(135deg, #10806f, #18a98d); }
.stat-card--amber { background: linear-gradient(135deg, #b77218, #da9732); }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.stat-icon { display: grid; width: 2.45rem; height: 2.45rem; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: .75rem; background: rgba(255,255,255,.13); font-size: 1.25rem; backdrop-filter: blur(8px); }
.stat-link { color: rgba(255,255,255,.65); font-size: 1.1rem; }
.stat-value { position: relative; z-index: 1; font-size: clamp(2.15rem, 3vw, 2.65rem); font-weight: 790; line-height: 1; letter-spacing: -.06em; }
.stat-label { position: relative; z-index: 1; margin-top: .5rem; color: rgba(255,255,255,.96); font-size: .9rem; font-weight: 690; }
.stat-meta { position: relative; z-index: 1; margin-top: .35rem; color: rgba(255,255,255,.62); font-size: .73rem; font-weight: 540; }

/* Tables */
.table { margin-bottom: 0; }
.table { font-size: .91rem; }
.table thead th { padding-top: .8rem; padding-bottom: .8rem; border-bottom-width: 1px; color: #6f7c91; background: #fafbfe; font-size: .72rem; font-weight: 790; letter-spacing: .065em; text-transform: uppercase; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .95rem 1rem; border-bottom-color: #eef1f5; vertical-align: middle; }
.table td strong { font-weight: 720; }
.table-hover > tbody > tr { transition: background .14s ease; }
.table-hover > tbody > tr:hover > * { --tblr-table-bg-state: rgba(var(--tblr-primary-rgb), .035); }
.table tbody tr:last-child td { border-bottom: 0; }

/* Controls and actions */
.btn { min-height: 2.55rem; padding: .57rem .9rem; border-radius: .65rem; font-size: .88rem; font-weight: 690; letter-spacing: -.012em; }
.btn-sm { min-height: 2.1rem; padding: .38rem .65rem; font-size: .79rem; }
.btn-primary { --tblr-btn-bg: var(--erp-primary); --tblr-btn-border-color: var(--erp-primary); --tblr-btn-hover-bg: var(--erp-primary-dark); --tblr-btn-hover-border-color: var(--erp-primary-dark); box-shadow: 0 .35rem .85rem rgba(var(--tblr-primary-rgb), .13); }
.btn-outline-primary { --tblr-btn-color: var(--erp-primary); --tblr-btn-border-color: rgba(var(--tblr-primary-rgb), .45); --tblr-btn-hover-bg: var(--erp-primary); --tblr-btn-hover-border-color: var(--erp-primary); }
.btn-light { border-color: #e7eaf0; background: #f8f9fc; }
.badge-status { padding: .43rem .68rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.badge-active { color: #087451; background: #dcf7ea; }
.badge-inactive { color: #657185; background: #eef1f5; }

.input > input:not([type="checkbox"]):not([type="radio"]), .input > select, .input > textarea,
form > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), form > select, form > textarea { display: block; width: 100%; min-height: 2.95rem; padding: .68rem .82rem; color: var(--erp-text); background-color: #fff; border: 1px solid #dfe4ec; border-radius: .7rem; outline: 0; font-size: .94rem; font-weight: 510; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.input > input:hover, .input > select:hover, .input > textarea:hover { border-color: #cbd2de; }
.input > input:focus, .input > select:focus, .input > textarea:focus { border-color: rgba(var(--tblr-primary-rgb), .65); box-shadow: 0 0 0 .24rem rgba(var(--tblr-primary-rgb), .1); }
.input > label, .control-label { display: block; margin-bottom: .46rem; color: #354156; font-size: .86rem; font-weight: 720; }
.input, form .mb-3 { margin-bottom: 1rem; }
.input.checkbox { display: flex; align-items: center; gap: .6rem; min-height: 2.4rem; }
.input.checkbox input { width: 1.05rem; height: 1.05rem; accent-color: var(--erp-primary); }
.input.checkbox label { margin: 0; }
.input .error-message { margin-top: .35rem; color: var(--tblr-danger); font-size: .76rem; }
.input.error input, .input.error select, .input.error textarea { border-color: var(--tblr-danger); }

.alert { border: 0; border-radius: .85rem; box-shadow: 0 .4rem 1.4rem rgba(20,31,55,.06); }
.paging, .pagination { display: inline-flex; align-items: center; gap: .28rem; margin: 0; }
.paging a, .paging span, .pagination a, .pagination span { display: inline-grid; min-width: 2.1rem; height: 2.1rem; place-items: center; padding: 0 .5rem; border: 1px solid var(--erp-border); border-radius: .58rem; color: #526075; background: #fff; text-decoration: none; }
.paging .current, .pagination .active { color: #fff; background: var(--erp-primary); border-color: var(--erp-primary); box-shadow: 0 .3rem .7rem rgba(var(--tblr-primary-rgb),.18); }
.paging .disabled, .pagination .disabled { opacity: .4; }

/* Domain-specific views */
.gallery-card { height: 100%; padding: .65rem; border: 1px solid var(--erp-border); border-radius: .9rem; background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.gallery-card:hover { transform: translateY(-2px); box-shadow: var(--erp-shadow); }
.gallery-card img { width: 100%; height: 165px; object-fit: cover; border-radius: .7rem; background: #f1f3f7; }
.image-primary { border-color: rgba(var(--tblr-primary-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .1); }
.audit-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.audit-json { min-height: 100%; padding: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--erp-border); border-radius: .75rem; background: #f8f9fc; }

/* Login */
.login-page { min-height: 100vh; overflow-x: hidden; background: #f4f6fb; }
.login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); }
.login-showcase { position: relative; display: flex; overflow: hidden; align-items: center; color: #fff; background: linear-gradient(145deg, #101a2c 0%, #172643 58%, #18213a 100%); }
.login-showcase::before, .login-showcase::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.login-showcase::before { top: -13rem; right: -9rem; width: 34rem; height: 34rem; background: radial-gradient(circle, rgba(25,118,210,.46), rgba(25,118,210,0) 68%); }
.login-showcase::after { bottom: -14rem; left: -9rem; width: 32rem; height: 32rem; background: radial-gradient(circle, rgba(14,168,155,.3), rgba(14,168,155,0) 68%); }
.login-showcase-inner { position: relative; z-index: 1; width: min(650px, 100%); margin: auto; padding: 4rem clamp(3rem, 7vw, 7rem); }
.showcase-brand { display: flex; align-items: center; gap: .85rem; }
.showcase-brand strong, .showcase-brand small { display: block; }
.showcase-brand strong { font-size: 1rem; }
.showcase-brand small { margin-top: .18rem; color: rgba(226,232,240,.55); font-size: .68rem; }
.showcase-copy { margin: clamp(5rem, 12vh, 8rem) 0 3rem; }
.showcase-kicker { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1rem; padding: .38rem .65rem; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: #b9bdff; background: rgba(255,255,255,.055); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.showcase-copy h1 { max-width: 650px; margin: 0; color: #fff; font-size: clamp(2.7rem, 4.5vw, 4.7rem); font-weight: 790; line-height: 1.02; letter-spacing: -.065em; }
.showcase-copy p { max-width: 590px; margin: 1.5rem 0 0; color: rgba(226,232,240,.7); font-size: 1.08rem; font-weight: 500; line-height: 1.75; }
.showcase-features { display: grid; gap: .75rem; grid-template-columns: repeat(3, 1fr); }
.showcase-features > div { padding: .9rem; border: 1px solid rgba(255,255,255,.08); border-radius: .85rem; background: rgba(255,255,255,.045); backdrop-filter: blur(10px); }
.showcase-features i { margin-bottom: .55rem; color: #71dbd1; font-size: 1.25rem; }
.showcase-features strong, .showcase-features small { display: block; }
.showcase-features strong { font-size: .84rem; font-weight: 720; }
.showcase-features small { margin-top: .2rem; color: rgba(226,232,240,.5); font-size: .69rem; line-height: 1.4; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 3rem; background: radial-gradient(circle at 100% 0, rgba(25,118,210,.1), transparent 22rem), #f4f8fc; }
.login-panel-inner { width: min(440px, 100%); }
.mobile-login-brand { display: none; }
.login-form-card { padding: clamp(2rem, 4vw, 3rem); border: 1px solid rgba(224,228,237,.85); border-radius: 1.25rem; background: rgba(255,255,255,.94); box-shadow: 0 2rem 5rem rgba(20,31,55,.12); backdrop-filter: blur(12px); }
.login-form-card h2 { color: #172033; font-size: clamp(1.75rem, 2.5vw, 2.15rem); font-weight: 790; line-height: 1.15; letter-spacing: -.05em; }
.login-security { margin-top: 1.1rem; color: var(--erp-muted); text-align: center; font-size: .7rem; }

@media (max-width: 991.98px) {
    .app-sidebar { position: sticky; top: 0; z-index: 1040; overflow: visible; box-shadow: 0 .5rem 1.5rem rgba(15,23,42,.2); }
    .app-sidebar > .container-fluid { min-height: 4.35rem; padding: .55rem .8rem; }
    .app-sidebar .navbar-brand { min-height: auto; margin: 0 auto 0 .65rem; padding: 0; border: 0; }
    .app-menu-toggle { display: inline-flex; min-width: 5.9rem; min-height: 2.75rem; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: .72rem; color: #fff; background: rgba(255,255,255,.08); font-size: .86rem; font-weight: 720; }
    .app-menu-toggle i { font-size: 1.25rem; }
    .app-menu-toggle:hover, .app-menu-toggle:focus { color: #fff; background: rgba(255,255,255,.14); }
    .app-menu-toggle[aria-expanded="true"] { border-color: rgba(92,173,239,.55); background: rgba(25,118,210,.3); }
    .app-sidebar .navbar-collapse.show,
    .app-sidebar .navbar-collapse.collapsing { display: flex; max-height: calc(100dvh - 4.2rem); flex-direction: column; overflow: hidden; }
    .app-sidebar .navbar-collapse { position: absolute; top: 100%; right: 0; left: 0; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(165deg, #131e31 0%, #0d1523 82%); box-shadow: 0 1rem 2rem rgba(15,23,42,.25); }
    .sidebar-scroll { width: 100%; }
    .sidebar-foot { width: calc(100% - 1.1rem); margin-top: .35rem; }
    .brand-badge { display: none; }
    .page-body { padding-top: 1.25rem; }
    .login-layout { display: block; }
    .login-showcase { display: none; }
    .login-panel { min-height: 100vh; padding: 1.5rem; }
    .mobile-login-brand { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: 1.5rem; }
    .mobile-login-brand strong { color: #1c2739; font-size: 1rem; }
}

@media (min-width: 992px) {
    .app-sidebar { height: 100dvh; }
    .app-sidebar > .container-fluid { display: flex !important; height: 100%; flex-direction: column; }
    .app-sidebar .navbar-collapse { display: flex !important; min-height: 0; flex: 1 1 auto; flex-direction: column; }
}

@media (max-width: 767.98px) {
    html { font-size: 15px; }
    .page-heading { align-items: stretch; flex-direction: column; margin-bottom: 1.15rem; }
    .page-heading > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; }
    .page-heading > .btn { width: 100%; }
    .page-status { align-self: flex-start; }
    .stat-card { min-height: 9.4rem; }
    .page-heading h1 { font-size: clamp(1.6rem, 7vw, 1.9rem); }
    .page-heading p { font-size: .91rem; }
    .stat-value { font-size: 2rem; }
    .stat-label { font-size: .82rem; }
    .table { font-size: .86rem; }
    .table thead th { font-size: .67rem; }
    .audit-diff { grid-template-columns: 1fr; }
    .card-footer { gap: .75rem; flex-wrap: wrap; }
    .table > :not(caption) > * > * { padding: .72rem; }
    .login-panel { padding: 1rem; }
    .login-form-card { padding: 1.5rem; border-radius: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}