@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap');
:root{
    --navy:#081a2f;
    --navy2:#0c2748;
    --cyan:#00b4d8;
    --bg:#f4f7fb;
    --text:#14213d;
    --muted:#718096;
    --line:#e8edf4;
    --green:#10b981;
    --red:#ef4444;
    --shadow:0 14px 34px rgba(23,42,70,.07)
}
*{
    box-sizing:border-box
}
body{
    font-family:'Tajawal',sans-serif;
    background:var(--bg);
    color:var(--text);
    margin:0
}
.app-shell{
    min-height:100vh
}
.sidebar{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    width:255px;
    background:linear-gradient(165deg,#07182c 0%,#0a2442 100%);
    z-index:1050;
    color:#fff;
    padding:26px 18px;
    display:flex;
    flex-direction:column
}
.brand-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 8px 25px;
    border-bottom:1px solid rgba(255,255,255,.09)
}
.brand-mark{
    width:42px;
    height:42px;
    border-radius:13px;
    background:linear-gradient(145deg,#02c8ed,#008aaf);
    color:white;
    display:grid;
    place-items:center;
    font-size:24px;
    font-weight:800;
    box-shadow:0 8px 24px rgba(0,180,216,.25)
}
.brand-name{
    font-size:21px;
    font-weight:800
}
.brand-sub{
    font-size:10px;
    color:#83a0bd;
    letter-spacing:.5px
}
.sidebar-nav{
    gap:7px;
    margin-top:26px
}
.sidebar-nav .nav-link{
    color:#9fb0c4;
    border-radius:11px;
    padding:12px 13px;
    font-weight:600;
    display:flex;
    gap:12px;
    align-items:center
}
.sidebar-nav .nav-link i{
    font-size:18px
}
.sidebar-nav .nav-link:hover,.sidebar-nav .nav-link.active{
    background:rgba(0,180,216,.12);
    color:#fff
}
.sidebar-nav .nav-link.active{
    box-shadow:inset -3px 0 var(--cyan)
}
.sidebar-footer{
    margin-top:auto;
    padding:18px 8px 0;
    border-top:1px solid rgba(255,255,255,.09)
}
.main-content{
    margin-right:255px;
    min-height:100vh;
    display:flex;
    flex-direction:column
}
.topbar{
    min-height:98px;
    padding:20px 32px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:16px
}
.page-title{
    font-size:24px;
    font-weight:800
}
.page-subtitle{
    color:var(--muted);
    font-size:13px;
    margin-top:4px
}
.topbar-actions{
    margin-right:auto
}
.content-wrap{
    padding:28px 32px;
    flex:1
}
.app-footer{
    padding:20px 32px;
    text-align:center;
    color:#96a2b1;
    font-size:12px
}
.app-footer span{
    color:var(--cyan)
}
.panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px;
    box-shadow:var(--shadow)
}
.panel-head{
    display:flex;
    justify-content:space-between;
    align-items:start;
    margin-bottom:20px
}
.panel-head h5{
    font-weight:800;
    margin:0 0 3px
}
.panel-head p{
    margin:0;
    color:var(--muted);
    font-size:13px
}
.period-bar{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:var(--shadow)
}
.period-bar .label{
    font-size:11px;
    color:var(--muted);
    display:block
}
.month-input{
    width:170px
}
.stat-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:16px;
    box-shadow:var(--shadow);
    min-height:118px
}
.stat-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:22px
}
.stat-card span{
    font-size:12px;
    color:var(--muted)
}
.stat-card h3{
    font-size:22px;
    margin:5px 0 0;
    font-weight:800;
    white-space:nowrap
}
.stat-card h3 small{
    font-size:12px;
    color:#8291a5;
    font-weight:600
}
.stat-card.income .stat-icon{
    background:#e9fbf4;
    color:var(--green)
}
.stat-card.expense .stat-icon{
    background:#fff0f0;
    color:var(--red)
}
.stat-card.net .stat-icon{
    background:#eaf8fc;
    color:#0891b2
}
.stat-card.movements .stat-icon{
    background:#f1f0ff;
    color:#7c3aed
}
.chart-wrap{
    height:310px
}
.link-more{
    font-size:12px;
    text-decoration:none
}
.activity-list{
    display:flex;
    flex-direction:column
}
.activity-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid var(--line)
}
.activity-item:last-child{
    border:0
}
.activity-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    display:grid;
    place-items:center
}
.activity-icon.income{
    background:#e9fbf4;
    color:var(--green)
}
.activity-icon.expense{
    background:#fff0f0;
    color:var(--red)
}
.activity-main{
    flex:1;
    min-width:0
}
.activity-main strong{
    display:block;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.activity-main span{
    font-size:11px;
    color:var(--muted)
}
.activity-amount{
    font-size:13px;
    font-weight:800
}
.activity-amount.income{
    color:var(--green)
}
.activity-amount.expense{
    color:var(--red)
}
.summary-strip{
    border-radius:16px;
    padding:20px 24px;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.summary-strip.income{
    background:linear-gradient(120deg,#087f5b,#12b886)
}
.summary-strip.expense{
    background:linear-gradient(120deg,#c92a2a,#f03e3e)
}
.summary-strip span{
    display:block;
    font-size:12px;
    opacity:.78
}
.summary-strip strong{
    font-size:24px
}
.summary-strip i{
    font-size:42px;
    opacity:.28
}
.filter-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1.2fr 1.5fr auto;
    gap:12px;
    align-items:end
}
.filter-grid label,.report-filter label{
    font-size:11px;
    color:var(--muted);
    margin-bottom:5px
}
.filter-actions{
    display:flex;
    gap:6px
}
.app-table thead th{
    background:#f8fafc;
    color:#65758a;
    font-size:11px;
    font-weight:700;
    border-bottom:1px solid var(--line);
    padding:13px 16px;
    white-space:nowrap
}
.app-table tbody td{
    padding:14px 16px;
    border-color:#eef2f6;
    font-size:13px
}
.app-table tbody tr:hover{
    background:#fbfdff
}
.date-cell{
    white-space:nowrap;
    color:#607087
}
.category-badge{
    background:#f0f4f8;
    border-radius:50px;
    padding:5px 9px;
    color:#59697b;
    font-size:11px
}
.notes-cell{
    color:var(--muted);
    max-width:220px
}
.table-actions{
    display:flex;
    gap:5px
}
.table-actions form{
    margin:0
}
.money{
    white-space:nowrap
}
.empty-state{
    text-align:center;
    color:#9aa7b6;
    padding:25px
}
.empty-state i{
    font-size:32px
}
.empty-state p{
    margin:8px 0 0
}
.form-shell{
    max-width:1000px;
    margin:auto
}
.form-intro{
    text-align:center;
    padding:18px 15px 25px
}
.form-intro .big-icon{
    width:64px;
    height:64px;
    margin:0 auto 12px;
    border-radius:20px;
    display:grid;
    place-items:center;
    font-size:27px
}
.form-intro.income .big-icon{
    background:#e9fbf4;
    color:var(--green)
}
.form-intro.expense .big-icon{
    background:#fff0f0;
    color:var(--red)
}
.form-intro h4{
    font-weight:800
}
.form-intro p{
    color:var(--muted);
    margin:0
}
.form-panel{
    padding:30px
}
.form-label{
    font-weight:600;
    font-size:13px
}
.form-label span{
    color:var(--red)
}
.form-label small{
    font-weight:400;
    color:var(--muted)
}
.form-control,.form-select{
    border-color:#dde5ee;
    border-radius:10px
}
.form-control:focus,.form-select:focus{
    border-color:#55c9df;
    box-shadow:0 0 0 .2rem rgba(0,180,216,.10)
}
.form-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid var(--line)
}
.type-pill{
    border-radius:50px;
    padding:5px 10px;
    font-size:11px;
    font-weight:700
}
.type-pill.income{
    background:#e9fbf4;
    color:#078356
}
.type-pill.expense{
    background:#fff0f0;
    color:#ce3333
}
.report-filter{
    display:flex;
    gap:14px;
    align-items:end
}
.report-filter>div{
    min-width:200px
}
.report-kpi{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
    box-shadow:var(--shadow)
}
.report-kpi span{
    display:block;
    color:var(--muted);
    font-size:12px
}
.report-kpi strong{
    display:block;
    font-size:24px;
    margin-top:5px
}
.report-kpi.income{
    border-top:3px solid var(--green)
}
.report-kpi.expense{
    border-top:3px solid var(--red)
}
.report-kpi.net{
    border-top:3px solid var(--cyan)
}
.category-progress{
    margin-bottom:19px
}
.category-progress>div:first-child{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:6px
}
.progress{
    height:7px;
    background:#edf1f5
}
.progress-bar{
    background:#ef6b6b
}
.insight-box{
    background:#f1fbfd;
    border:1px solid #d4f3f8;
    border-radius:13px;
    padding:18px;
    display:flex;
    gap:13px
}
.insight-box>i{
    color:#0797b5;
    font-size:22px
}
.insight-box strong{
    font-size:14px
}
.insight-box p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:13px
}
.disclaimer{
    margin-top:15px;
    color:#7e8b9c;
    font-size:11px
}
.report-section-head{
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--line)
}
.report-section-head h5{
    font-weight:800;
    margin:0
}
.report-title-print{
    display:none
}
.login-body{
    background:#06182c;
    min-height:100vh
}
.login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.15fr .85fr
}
.login-visual{
    position:relative;
    background:radial-gradient(circle at 30% 35%,rgba(0,180,216,.26),transparent 28%),linear-gradient(145deg,#06182c,#092d52);
    display:flex;
    align-items:center;
    padding:8vw;
    color:#fff;
    overflow:hidden
}
.login-visual:after{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    border:1px solid rgba(0,180,216,.15);
    border-radius:50%;
    left:-180px;
    bottom:-230px;
    box-shadow:0 0 0 90px rgba(0,180,216,.025),0 0 0 180px rgba(0,180,216,.018)
}
.login-copy{
    position:relative;
    z-index:2
}
.brand-pill{
    display:inline-block;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;
    font-size:12px;
    letter-spacing:1px;
    margin-bottom:35px
}
.brand-pill span{
    color:#71dff1
}
.login-copy h1{
    font-size:48px;
    line-height:1.25;
    font-weight:800
}
.login-copy h1 span{
    color:#68d9ec
}
.login-copy p{
    color:#9cb2c9;
    font-size:17px;
    margin:22px 0 35px
}
.visual-stat{
    display:flex;
    gap:12px;
    align-items:center;
    color:#a9bed1;
    font-size:13px
}
.visual-stat strong{
    color:#00c4e7;
    font-size:20px
}
.login-panel{
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px
}
.login-card{
    width:100%;
    max-width:410px
}
.login-card h2{
    font-weight:800;
    font-size:30px
}
.mobile-brand{
    display:none;
    align-items:center;
    gap:10px;
    margin-bottom:35px
}
.input-icon{
    position:relative
}
.input-icon i{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    color:#93a1b2
}
.input-icon .form-control{
    padding-right:44px;
    height:52px
}
.login-note{
    text-align:center;
    color:#9ca8b5;
    font-size:11px;
    margin-top:25px
}
.btn{
    border-radius:9px;
    font-weight:600
}
.btn-primary{
    background:#008eae;
    border-color:#008eae
}
.btn-primary:hover{
    background:#007a96;
    border-color:#007a96
}
@media(max-width:991.98px){

    .main-content{
        margin-right:0;
    }

    .topbar{
        padding:17px 20px;
        min-height:84px;
    }

    .content-wrap{
        padding:20px;
    }

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

    .filter-actions{
        grid-column:1/-1;
    }

    .login-shell{
        grid-template-columns:1fr;
    }

    .login-visual{
        display:none;
    }

    .login-panel{
        min-height:100vh;
    }

    .mobile-brand{
        display:flex;
    }

    /* Bootstrap mobile sidebar */
    .sidebar.offcanvas-lg{
        z-index:1060 !important;
    }

    .sidebar.offcanvas-lg.show,
    .sidebar.offcanvas-lg.showing{
        z-index:1060 !important;
    }

    .offcanvas-backdrop{
        z-index:1050 !important;
    }
}
@media(max-width:575.98px){
    .page-title{
        font-size:19px
    }
    .page-subtitle{
        font-size:11px
    }
    .topbar{
        gap:9px;
        padding:14px
    }
    .content-wrap{
        padding:14px
    }
    .period-bar{
        padding:11px
    }
    .month-input{
        width:145px
    }
    .stat-card{
        min-height:100px;
        padding:15px
    }
    .stat-card h3{
        font-size:19px
    }
    .panel{
        padding:17px
    }
    .filter-grid{
        grid-template-columns:1fr
    }
    .filter-actions{
        grid-column:auto
    }
    .form-panel{
        padding:18px
    }
    .form-footer{
        flex-direction:column-reverse
    }
    .form-footer .btn{
        width:100%
    }
    .report-filter{
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .report-filter>div{
        min-width:0
    }
    .report-filter .btn{
        grid-column:1/-1
    }
    .login-panel{
        padding:22px
    }
    .login-card h2{
        font-size:26px
    }
}
@media print{
    body{
        background:#fff
    }
    .sidebar,.topbar,.app-footer,.d-print-none{
        display:none!important
    }
    .main-content{
        margin:0
    }
    .content-wrap{
        padding:0
    }
    .panel,.report-kpi{
        box-shadow:none
    }
    .report-title-print{
        display:block;
        margin-bottom:20px
    }
    .report-title-print h2{
        font-weight:800
    }
    .report-title-print p{
        color:#666
    }
}


.brand-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    overflow: hidden;

    background: transparent;
}

.brand-logo-mark img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    display: block;

    filter: drop-shadow(0 4px 10px rgba(0, 180, 216, .18));
}


/* =========================================================
   MOBILE SIDEBAR - FINAL FIX
========================================================= */

@media (max-width: 991.98px) {

    .sidebar.offcanvas-lg {
        z-index: 1060 !important;
    }

    .sidebar.offcanvas-lg.show,
    .sidebar.offcanvas-lg.showing {
        z-index: 1060 !important;
    }

    .offcanvas-backdrop {
        z-index: 1050 !important;
    }

}