/* Premium UI layer for Expense Pro. Loaded after page-level styles. */

:root{
    --app-sidebar:264px;
    --app-bg:#eef2f5;
    --app-bg-soft:#f7fafc;
    --app-surface:#ffffff;
    --app-surface-soft:#f8fafc;
    --app-ink:#17211f;
    --app-muted:#6b7280;
    --app-line:#dce3ea;
    --app-primary:#0f8f72;
    --app-primary-dark:#075f58;
    --app-accent:#d99a24;
    --app-blue:#2563eb;
    --app-red:#dc2626;
    --app-green:#16a34a;
    --app-shadow:0 18px 48px rgba(15, 32, 39, .10);
    --app-shadow-soft:0 10px 28px rgba(15, 32, 39, .08);
}

*{
    letter-spacing:0 !important;
}

html{
    background:var(--app-bg);
}

body{
    min-height:100vh;
    color:var(--app-ink) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.54) 42%, rgba(238,242,245,.92)),
        repeating-linear-gradient(90deg, rgba(15,143,114,.035) 0 1px, transparent 1px 80px),
        var(--app-bg) !important;
    font-family:Poppins, Arial, sans-serif !important;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.dark{
    color:#eef7f4 !important;
    background:
        linear-gradient(180deg, rgba(15,23,22,.96), rgba(12,18,17,.98)),
        #0f1514 !important;
}

html.dark body{
    color:#eef7f4 !important;
    background:
        linear-gradient(180deg, rgba(15,23,22,.96), rgba(12,18,17,.98)),
        #0f1514 !important;
}

a{
    transition:color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Sidebar */
.sidebar{
    width:var(--app-sidebar) !important;
    padding:18px 14px !important;
    background:
        linear-gradient(180deg, #0d2d28 0%, #10231f 52%, #141f1d 100%) !important;
    border-right:1px solid rgba(255,255,255,.10);
    box-shadow:18px 0 50px rgba(13, 32, 29, .26);
}

.sidebar::-webkit-scrollbar{
    width:8px !important;
}

.sidebar::-webkit-scrollbar-track{
    background:rgba(255,255,255,.05);
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(217,154,36,.72) !important;
    border-radius:8px !important;
}

.brand{
    gap:12px !important;
    padding:4px 8px 18px !important;
    margin-bottom:16px !important;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.brand i,
.brand-logo{
    width:46px;
    height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:22px !important;
    color:#10231f !important;
    background:linear-gradient(135deg, #f4c15d, #ffe6a8) !important;
    border-radius:8px;
    box-shadow:0 12px 24px rgba(217,154,36,.24);
}

.brand-logo{
    object-fit:contain;
    padding:0;
    background:none !important;
}

.brand h3{
    margin:0 !important;
    color:#fff !important;
    font-size:20px !important;
    line-height:1.05;
    font-weight:700 !important;
}

.user-box{
    padding:12px !important;
    margin-bottom:18px !important;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px !important;
    background:rgba(255,255,255,.08) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.user-box i{
    color:#f4c15d !important;
}

.user-box strong,
.user-box small{
    color:#fff !important;
}

.user-box small{
    opacity:.68 !important;
    font-weight:500;
}

.menu{
    display:grid;
    gap:4px;
}

.menu li{
    margin:0 !important;
}

.menu a{
    min-height:43px;
    padding:11px 12px !important;
    gap:12px !important;
    color:rgba(255,255,255,.78) !important;
    border:1px solid transparent;
    border-radius:8px !important;
    font-size:14px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
}

.menu a i{
    width:22px !important;
    color:rgba(244,193,93,.92);
}

.menu a:hover,
.menu a.active{
    color:#fff !important;
    background:linear-gradient(135deg, rgba(15,143,114,.95), rgba(7,95,88,.92)) !important;
    border-color:rgba(255,255,255,.16);
    box-shadow:0 12px 26px rgba(5, 95, 88, .28);
    transform:translateX(2px);
}

.menu a.active i,
.menu a:hover i{
    color:#fff !important;
}

.menu li:last-child a{
    margin-top:12px !important;
    color:#fff !important;
    background:rgba(220,38,38,.16) !important;
    border-color:rgba(248,113,113,.22);
}

.menu li:last-child a:hover,
.menu li:last-child a.active{
    background:#b91c1c !important;
}

/* Main layout */
.content{
    min-height:100vh;
    margin-left:var(--app-sidebar) !important;
    padding:30px clamp(18px, 3vw, 38px) !important;
}

.topbar,
.header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin-bottom:24px !important;
    padding:15px 16px !important;
    background:rgba(255,255,255,.86) !important;
    border:1px solid rgba(220,227,234,.92);
    border-radius:8px !important;
    box-shadow:var(--app-shadow-soft);
    backdrop-filter:blur(14px);
}

body.dark .topbar,
body.dark .header{
    background:rgba(22,32,30,.88) !important;
    border-color:rgba(255,255,255,.10);
    box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.topbar h2,
.header h2,
.content > h2{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 !important;
    color:var(--app-ink) !important;
    font-size:clamp(21px, 2vw, 29px) !important;
    line-height:1.15 !important;
    font-weight:700 !important;
}

body.dark .topbar h2,
body.dark .header h2,
body.dark .content > h2{
    color:#f6fffb !important;
}

.topbar h2 i,
.header h2 i,
.content > h2 i{
    color:var(--app-primary) !important;
}

.toggle,
.theme-btn{
    width:42px !important;
    height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto;
    border:1px solid rgba(15,143,114,.18);
    border-radius:8px !important;
    color:var(--app-primary-dark) !important;
    background:#fff !important;
    box-shadow:0 10px 22px rgba(15, 32, 39, .08);
}

.mobile-btn{
    width:42px !important;
    height:42px !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto;
    border:1px solid rgba(15,143,114,.18);
    border-radius:8px !important;
    color:var(--app-primary-dark) !important;
    background:#fff !important;
    box-shadow:0 10px 22px rgba(15, 32, 39, .08);
}

.toggle:hover,
.mobile-btn:hover,
.theme-btn:hover{
    color:#fff !important;
    background:var(--app-primary) !important;
    transform:translateY(-1px);
}

body.dark .mobile-btn,
body.dark .toggle,
body.dark .theme-btn{
    color:#f4c15d !important;
    background:#182522 !important;
    border-color:rgba(255,255,255,.12);
}

/* Surfaces */
.card,
.form-box,
.filter-box,
.search-box,
.search,
.table-box,
.table-card,
.chart,
.statement-card,
.transaction-card,
.item-card,
.box,
.login-box{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(220,227,234,.95) !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:var(--app-shadow-soft) !important;
}

body.dark .card,
body.dark .form-box,
body.dark .filter-box,
body.dark .search-box,
body.dark .search,
body.dark .table-box,
body.dark .table-card,
body.dark .chart,
body.dark .statement-card,
body.dark .transaction-card,
body.dark .item-card,
body.dark .box,
body.dark .login-box{
    color:#eef7f4 !important;
    background:rgba(22,32,30,.94) !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:0 18px 46px rgba(0,0,0,.22) !important;
}

.cards{
    gap:16px !important;
}

.card{
    min-height:108px;
    padding:18px !important;
}

.card::before,
.form-box::before,
.filter-box::before,
.table-box::before,
.table-card::before,
.chart::before,
.login-box::before,
.box::before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    margin:0;
    background:linear-gradient(90deg, var(--app-primary), var(--app-accent), var(--app-blue));
}

.form-box,
.filter-box,
.table-box,
.table-card,
.chart{
    padding:20px !important;
}

.card:hover{
    transform:translateY(-2px);
    box-shadow:var(--app-shadow) !important;
}

.icon,
.icon-box,
.item-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px;
    border-radius:8px !important;
    color:var(--app-primary-dark) !important;
    background:linear-gradient(135deg, #e9fbf6, #fff6df) !important;
    border:1px solid rgba(15,143,114,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

body.dark .icon,
body.dark .icon-box,
body.dark .item-icon{
    color:#f4c15d !important;
    background:rgba(15,143,114,.14) !important;
    border-color:rgba(255,255,255,.10);
}

.number,
.amount,
.card-info .number,
.statement-card h2{
    color:var(--app-primary-dark) !important;
    font-weight:700 !important;
}

body.dark .number,
body.dark .amount,
body.dark .card-info .number,
body.dark .statement-card h2{
    color:#6ee7c8 !important;
}

p,
.card-info p,
small{
    color:var(--app-muted) !important;
}

body.dark p,
body.dark .card-info p,
body.dark small{
    color:#a8b8b4 !important;
}

/* Forms */
form{
    max-width:100%;
}

label{
    color:#25312e !important;
    font-weight:600 !important;
}

body.dark label{
    color:#dcece8 !important;
}

input,
select,
textarea{
    min-height:44px;
    color:var(--app-ink) !important;
    background:#fbfdfe !important;
    border:1px solid var(--app-line) !important;
    border-radius:8px !important;
    outline:none !important;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

textarea{
    min-height:112px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(15,143,114,.72) !important;
    box-shadow:0 0 0 4px rgba(15,143,114,.12) !important;
    background:#fff !important;
}

body.dark input,
body.dark select,
body.dark textarea{
    color:#eef7f4 !important;
    background:#111c1a !important;
    border-color:rgba(255,255,255,.14) !important;
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus{
    background:#14211f !important;
}

::placeholder{
    color:#8b98a5 !important;
}

input[type="checkbox"],
input[type="radio"]{
    width:auto !important;
    min-width:16px;
    height:16px !important;
    min-height:16px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:4px !important;
    box-shadow:none !important;
    accent-color:var(--app-primary);
}

.options label{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
}

.row,
.filter{
    gap:16px !important;
}

.filter{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
}

.filter-box h3,
.chart h3,
.table-box h3{
    color:var(--app-ink) !important;
    font-size:18px !important;
    font-weight:700 !important;
}

body.dark .filter-box h3,
body.dark .chart h3,
body.dark .table-box h3{
    color:#f6fffb !important;
}

/* Buttons and links styled as controls */
.btn,
button,
.add-btn,
.back-btn,
.save,
.cancel,
input[type="submit"]{
    min-height:42px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px !important;
    border:1px solid transparent !important;
    border-radius:8px !important;
    color:#fff !important;
    background:linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)) !important;
    box-shadow:0 10px 22px rgba(7,95,88,.18);
    font-weight:700 !important;
    text-decoration:none !important;
    cursor:pointer;
}

.btn:hover,
button:hover,
.add-btn:hover,
.save:hover,
input[type="submit"]:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(7,95,88,.24);
}

.cancel,
.back-btn,
a[href*="history.back"]{
    background:linear-gradient(135deg, #667085, #475467) !important;
    box-shadow:0 10px 22px rgba(71,84,103,.18) !important;
}

.pdf,
.btn.pdf,
a[href*="pdf"],
a[href*="PDF"]{
    background:linear-gradient(135deg, #ef4444, #b91c1c) !important;
}

.excel,
.btn.excel,
a[href*="excel"],
a[href*="Excel"]{
    background:linear-gradient(135deg, #22c55e, #15803d) !important;
}

.print,
.btn.print,
a[href*="print"],
a[href*="Print"]{
    background:linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}

/* Tables */
.table-box,
.table-card{
    overflow:auto !important;
}

table{
    width:100%;
    border-collapse:separate !important;
    border-spacing:0 !important;
}

thead th,
th{
    color:#fff !important;
    background:#10231f !important;
    border:0 !important;
    padding:13px 14px !important;
    font-size:12px !important;
    line-height:1.2;
    font-weight:700 !important;
    text-align:left !important;
    text-transform:uppercase;
}

thead th:first-child,
tr:first-child th:first-child{
    border-top-left-radius:8px;
}

thead th:last-child,
tr:first-child th:last-child{
    border-top-right-radius:8px;
}

td{
    color:#273330 !important;
    padding:13px 14px !important;
    border-bottom:1px solid rgba(220,227,234,.9) !important;
    vertical-align:middle;
}

tbody tr{
    transition:background .18s ease, transform .18s ease;
}

tbody tr:hover{
    background:#f4fbf8 !important;
}

body.dark th{
    background:#09110f !important;
}

body.dark td{
    color:#e9f5f1 !important;
    border-color:rgba(255,255,255,.09) !important;
}

body.dark tbody tr:hover{
    background:#172522 !important;
}

.statement-link{
    color:var(--app-primary-dark) !important;
    font-weight:700 !important;
    text-decoration:none !important;
}

.statement-link i{
    color:var(--app-primary) !important;
    background:#e9fbf6 !important;
    border:1px solid rgba(15,143,114,.14);
    border-radius:8px !important;
}

body.dark .statement-link{
    color:#6ee7c8 !important;
}

body.dark .statement-link i{
    color:#f4c15d !important;
    background:rgba(15,143,114,.14) !important;
}

/* Badges and action icons */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:28px;
    padding:5px 10px !important;
    border-radius:999px !important;
    color:#0f5132 !important;
    background:#dcfce7 !important;
    border:1px solid rgba(22,163,74,.16);
    font-weight:700 !important;
}

.badge.inactive,
.inactive{
    color:#991b1b !important;
    background:#fee2e2 !important;
    border-color:rgba(220,38,38,.16) !important;
}

.green{
    color:#166534 !important;
    background:#dcfce7 !important;
}

.orange{
    color:#92400e !important;
    background:#fef3c7 !important;
}

.red{
    color:#991b1b !important;
    background:#fee2e2 !important;
}

.action a,
td > a.view,
td > a.edit,
td > a.delete{
    width:36px !important;
    height:36px !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin:3px !important;
    color:var(--app-primary-dark) !important;
    background:#f4fbf8 !important;
    border:1px solid rgba(15,143,114,.14);
    border-radius:8px !important;
    text-decoration:none !important;
}

.inline-delete-form{
    display:inline-flex;
    margin:3px;
    vertical-align:middle;
}

.inline-delete-form button{
    width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    margin:0 !important;
    color:var(--app-red) !important;
    background:#f4fbf8 !important;
    border:1px solid rgba(15,143,114,.14) !important;
    border-radius:8px !important;
    box-shadow:none !important;
}

.inline-delete-form button:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(15, 32, 39, .10) !important;
}

body.dark .inline-delete-form button{
    background:#111c1a !important;
    border-color:rgba(255,255,255,.10) !important;
}

/* Budget allocation category cells */
#budgetTable td[data-label="Category"]{
    min-width:260px;
}

#budgetTable .budget-category-link{
    width:min(310px, 100%);
    min-height:64px;
    display:inline-grid;
    grid-template-columns:42px minmax(0, 1fr) 18px;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:8px;
    text-decoration:none !important;
    color:var(--app-ink) !important;
    background:
        linear-gradient(135deg, rgba(15,143,114,.10), rgba(217,154,36,.08)),
        #ffffff;
    border:1px solid rgba(15,143,114,.16);
    box-shadow:0 8px 22px rgba(15, 32, 39, .07);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

#budgetTable .budget-category-link:hover{
    transform:translateY(-1px);
    border-color:rgba(15,143,114,.34);
    box-shadow:0 14px 30px rgba(15, 32, 39, .12);
}

#budgetTable .budget-category-icon{
    width:42px;
    height:42px;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#ffffff;
    background:linear-gradient(135deg, var(--app-primary), var(--app-primary-dark));
    box-shadow:0 10px 18px rgba(15,143,114,.24);
}

#budgetTable .budget-category-copy{
    min-width:0;
}

#budgetTable .budget-category-copy strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:inherit;
    font-size:14px;
    line-height:1.2;
}

#budgetTable .budget-category-copy small{
    display:block;
    margin-top:4px;
    color:var(--app-muted);
    font-size:11px;
    font-weight:700;
}

#budgetTable .budget-category-arrow{
    color:var(--app-primary);
    font-size:12px;
}

body.dark #budgetTable .budget-category-link,
html.dark body #budgetTable .budget-category-link{
    color:#eef7f4 !important;
    background:
        linear-gradient(135deg, rgba(15,143,114,.18), rgba(217,154,36,.10)),
        rgba(17,28,26,.92);
    border-color:rgba(255,255,255,.12);
    box-shadow:0 10px 26px rgba(0,0,0,.24);
}

body.dark #budgetTable .budget-category-copy small,
html.dark body #budgetTable .budget-category-copy small{
    color:#9fb3ad;
}

@media(max-width:768px){
    #budgetTable td[data-label="Category"]{
        display:block !important;
        padding:0 0 12px !important;
        min-width:0;
    }

    #budgetTable td[data-label="Category"]::before{
        display:none !important;
    }

    #budgetTable .budget-category-link{
        width:100%;
    }
}

.action a:hover,
td > a.view:hover,
td > a.edit:hover,
td > a.delete:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(15, 32, 39, .10);
}

.action a.edit,
.edit{
    color:#b45309 !important;
}

.action a.delete,
.delete,
.fa-trash{
    color:var(--app-red) !important;
}

.action a.view,
.view{
    color:var(--app-primary-dark) !important;
}

body.dark .action a,
body.dark td > a.view,
body.dark td > a.edit,
body.dark td > a.delete{
    background:#111c1a !important;
    border-color:rgba(255,255,255,.10);
}

.pagination{
    margin:22px 0 !important;
}

.pagination a{
    min-width:42px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px !important;
    color:var(--app-primary-dark) !important;
    background:#fff !important;
    border:1px solid rgba(15,143,114,.14);
    box-shadow:0 8px 20px rgba(15, 32, 39, .06);
}

.pagination a.active,
.pagination a:hover{
    color:#fff !important;
    background:var(--app-primary-dark) !important;
}

/* Auth screens */
.login-box,
.box{
    max-width:440px;
    padding:30px !important;
    overflow:hidden;
}

.login-box::before,
.box::before{
    margin:0;
}

.logo i{
    color:var(--app-primary) !important;
}

.login-logo{
    width:82px;
    height:82px;
    display:block;
    object-fit:contain;
    margin:0 auto 14px;
    border-radius:20px;
    box-shadow:0 18px 36px rgba(7,95,88,.18);
}

.logo h2,
.box h2{
    color:var(--app-ink) !important;
    font-weight:700 !important;
}

body.dark .logo h2,
body.dark .box h2{
    color:#f6fffb !important;
}

.input-box{
    min-height:52px;
    border:1px solid var(--app-line) !important;
    border-radius:8px !important;
    background:#fbfdfe !important;
}

.input-box:focus-within{
    border-color:rgba(15,143,114,.72) !important;
    box-shadow:0 0 0 4px rgba(15,143,114,.12) !important;
}

.input-box input{
    min-height:auto !important;
    height:auto !important;
    padding:12px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.input-box input:focus{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

body.dark .input-box{
    background:#111c1a !important;
    border-color:rgba(255,255,255,.14) !important;
}

.error,
.success,
.message,
.alert{
    border-radius:8px !important;
    border:1px solid transparent;
    font-weight:600;
}

.success,
.message{
    color:#166534 !important;
    background:#dcfce7 !important;
    border-color:rgba(22,163,74,.18);
}

.error{
    color:#991b1b !important;
    background:#fee2e2 !important;
    border-color:rgba(220,38,38,.18);
}

.footer{
    color:#7b8794 !important;
}

/* Overlay and mobile */
.overlay.show{
    display:block !important;
    background:rgba(10, 15, 14, .58) !important;
    backdrop-filter:blur(4px);
}

@media(max-width:768px){
    .sidebar{
        left:calc(var(--app-sidebar) * -1 - 24px) !important;
        width:var(--app-sidebar) !important;
        z-index:1000 !important;
    }

    .sidebar.active{
        left:0 !important;
    }

    .content{
        margin-left:0 !important;
        padding:16px !important;
    }

    .mobile-btn{
        display:inline-flex !important;
    }

    .topbar,
    .header{
        flex-wrap:wrap;
        align-items:flex-start !important;
        padding:13px !important;
    }

    .topbar h2,
    .header h2{
        flex:1 1 auto;
        min-width:0;
        justify-content:flex-start;
    }

    .topbar > div,
    .header > div{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

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

    .filter,
    .row{
        grid-template-columns:1fr !important;
    }

    .form-box,
    .filter-box,
    .table-box,
    .table-card,
    .chart,
    .card{
        padding:16px !important;
    }

    tbody tr{
        border:1px solid rgba(220,227,234,.9);
        border-radius:8px !important;
    }

    body.dark tbody tr{
        border-color:rgba(255,255,255,.10);
    }

    tbody td::before{
        color:var(--app-primary-dark) !important;
        padding-right:14px;
    }

    body.dark tbody td::before{
        color:#6ee7c8 !important;
    }
}

@media(max-width:480px){
    .topbar h2,
    .header h2,
    .content > h2{
        font-size:20px !important;
    }

    .btn,
    button,
    .add-btn,
    .back-btn{
        width:100%;
    }

    .topbar > div:last-child,
    .header > div:last-child{
        width:100%;
    }

    .topbar .toggle,
    .header .toggle,
    .mobile-btn,
    .theme-btn{
        width:40px !important;
        height:40px !important;
    }
}

.app-loader-topbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:4px;
    z-index:10050;
    pointer-events:none;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease;
    background:rgba(15,143,114,.12);
}

.app-loader-topbar.is-visible{
    opacity:1;
    transform:translateY(0);
}

.app-loader-topbar span{
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg, var(--app-primary), var(--app-accent));
    box-shadow:0 0 22px rgba(15,143,114,.38);
    transition:width .22s ease;
}

.app-loader{
    position:fixed;
    inset:0;
    z-index:10040;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    opacity:0;
    pointer-events:none;
    background:rgba(239,244,247,.74);
    backdrop-filter:blur(10px);
    transition:opacity .18s ease;
}

.app-loader.is-visible{
    opacity:1;
    pointer-events:auto;
}

body.dark .app-loader,
html.dark body .app-loader{
    background:rgba(7,12,11,.72);
}

.app-loader-card{
    width:min(360px, 92vw);
    border:1px solid rgba(220,227,234,.92);
    border-radius:8px;
    background:rgba(255,255,255,.94);
    box-shadow:var(--app-shadow);
    padding:22px;
    display:grid;
    grid-template-columns:48px 1fr;
    gap:14px;
    transform:translateY(8px) scale(.98);
    transition:transform .18s ease;
}

.app-loader.is-visible .app-loader-card{
    transform:translateY(0) scale(1);
}

body.dark .app-loader-card,
html.dark body .app-loader-card{
    background:rgba(17,28,26,.95);
    border-color:rgba(255,255,255,.12);
}

.app-loader-mark{
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(15,143,114,.12);
}

.app-loader-mark span{
    width:28px;
    height:28px;
    border-radius:50%;
    border:3px solid rgba(15,143,114,.18);
    border-top-color:var(--app-primary);
    animation:app-loader-spin .85s linear infinite;
}

.app-loader-copy strong{
    display:block;
    color:var(--app-ink);
    font-size:16px;
    line-height:1.25;
}

.app-loader-copy small{
    display:block;
    margin-top:4px;
    color:var(--app-muted);
    font-size:12px;
}

body.dark .app-loader-copy strong,
html.dark body .app-loader-copy strong{
    color:#eef7f4;
}

.app-loader-track{
    grid-column:1 / -1;
    height:8px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(15,143,114,.10);
}

.app-loader-track span{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--app-primary), var(--app-accent));
    transition:width .22s ease;
}

.app-loader-meta{
    grid-column:1 / -1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    color:var(--app-muted);
    font-size:12px;
    font-weight:700;
}

.app-loader-percent{
    color:var(--app-primary-dark);
}

body.dark .app-loader-percent,
html.dark body .app-loader-percent{
    color:#6ee7c8;
}

body.app-loading{
    cursor:progress;
}

@keyframes app-loader-spin{
    to{
        transform:rotate(360deg);
    }
}

@media print{
    body{
        background:#fff !important;
        color:#111 !important;
    }

    .sidebar,
    .topbar,
    .header,
    .mobile-btn,
    .toggle,
    .btn,
    button,
    .overlay{
        display:none !important;
    }

    .app-loader,
    .app-loader-topbar{
        display:none !important;
    }

    .content{
        margin:0 !important;
        padding:0 !important;
    }

    .card,
    .form-box,
    .filter-box,
    .table-box,
    .table-card,
    .chart,
    .statement-card{
        box-shadow:none !important;
        border:1px solid #ddd !important;
    }
}