/* ===== RESET & BASE ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{
    background:radial-gradient(circle at top,#0f172a,#020617 50%,#000 100%);
    color:#e5e7eb;
}
a{text-decoration:none;color:inherit}

/* ===== TOPBAR ===== */
.topbar{
    background:linear-gradient(90deg,#1d4ed8,#3b82f6,#0ea5e9);
    color:#fff;padding:14px 28px;
    display:flex;justify-content:space-between;align-items:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);position:sticky;top:0;z-index:99;
}
.topbar-title{font-size:20px;font-weight:800;letter-spacing:.5px}
.topbar nav a{
    margin-left:15px;font-size:14px;opacity:.9;
    transition:.2s ease-in-out;
}
.topbar nav a:hover{opacity:1;transform:translateY(-2px)}
.logout{color:#fecaca!important}

/* ===== LAYOUT ===== */
.container{max-width:1100px;margin:28px auto;padding:0 16px}

/* ===== BUTTONS ===== */
.btn{
    padding:8px 16px;border:none;border-radius:999px;
    cursor:pointer;font-size:13px;font-weight:600;
    transition:.2s;display:inline-flex;align-items:center;justify-content:center;
}
.btn-primary{
    background:linear-gradient(135deg,#2563eb,#38bdf8);
    color:white;box-shadow:0 10px 25px rgba(59,130,246,.5);
}
.btn-primary:hover{transform:scale(1.05)}
.btn-secondary{
    background:rgba(148,163,184,.2);border:1px solid #94a3b8;
    color:#e2e8f0;
}
.btn-danger{
    background:rgba(239,68,68,.2);border:1px solid #ef4444;color:#fecaca;
}
.btn-small{padding:4px 10px;font-size:12px}

/* ===== CARDS ===== */
.card{
    background:#0f172a;border:1px solid rgba(255,255,255,.08);
    padding:18px;border-radius:14px;margin-bottom:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* ===== TABLE ===== */
.table{
    width:100%;border-collapse:collapse;margin-top:12px;
    background:rgba(15,23,42,.95);border-radius:10px;overflow:hidden;
}
.table th,.table td{
    text-align:right;padding:10px;border-bottom:1px solid rgba(255,255,255,.1);
}
.table thead{background:#1e293b;color:#fff;font-weight:700}
.table tr:nth-child(even){background:#0f172acb}
.table tr:hover{background:rgba(59,130,246,.25)}

/* ===== FORMS ===== */
.form label{display:block;font-size:13px;margin-bottom:4px;color:#cbd5e1}
.form input,.form textarea,.form select{
    width:100%;padding:9px;border-radius:8px;border:1px solid #334155;
    background:#0a1120;color:#e2e8f0;font-size:13px;margin-bottom:8px;
}
.inline-form{display:flex;flex-wrap:wrap;gap:12px}
.inline-form>div{flex:1 1 160px}

/* ===== DASHBOARD ===== */
.dashboard-header{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;
}
.dashboard-title{font-size:22px;font-weight:700;color:white}
.stats-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;margin-bottom:18px;
}
.stat-card{
    background:#0f172a;padding:14px;border-radius:14px;
    border-left:4px solid #38bdf8;
    transition:.2s;box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.stat-card:hover{transform:scale(1.03);border-color:#facc15}
.stat-label{font-size:12px;color:#94a3b8}
.stat-value{font-size:20px;font-weight:700;color:white}

/* ===== BADGES ===== */
.badge{
    padding:3px 8px;border-radius:999px;font-weight:600;font-size:11px;
}
.badge-positive{background:#22c55e20;color:#86efac;border:1px solid #22c55e}
.badge-negative{background:#ef444420;color:#fecaca;border:1px solid #ef4444}
.badge-neutral{background:#94a3b820;color:#cbd5e1;border:1px solid #94a3b8}

/* ===== REPORT BOX ===== */
.report-box{
    background:#020617;border:1px solid rgba(255,255,255,.1);
    box-shadow:0 12px 35px rgba(0,0,0,.6);
    padding:24px;border-radius:16px;margin-bottom:26px;
}
.report-title{
    text-align:center;font-size:24px;font-weight:800;margin-bottom:4px;color:white;
}
.report-date{text-align:center;font-size:13px;color:#94a3b8;margin-bottom:8px}
.final-total-box{
    margin-top:15px;padding:12px;text-align:center;font-size:22px;
    font-weight:800;color:#facc15;border-top:2px solid #3b82f6;
}

/* ===== PRINT MODE ===== */
@media print{
    body{background:white!important;color:black!important}
    .topbar,.btn,.print-hide{display:none!important}
    .container{max-width:100%;padding:0;margin:0}
    .report-box{box-shadow:none!important;border:1px solid black!important}
    .table,.table td,.table th{border:1px solid black!important;color:black!important}
    .final-total-box{color:black!important;border-color:black!important}
}

/* ===== PAGE SPLIT FOR FULL REPORT ===== */
.break-after{margin-bottom:30px;}
@media print{
    .break-after{page-break-after:always;}
    .break-after:last-of-type{page-break-after:auto;}
}

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

.auth-body{
    min-height:100vh;
    background:radial-gradient(circle at top,#1d4ed8,#020617 55%,#000 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 12px;
}

.auth-shell{
    position:relative;
    width:100%;
    max-width:950px;
}

.auth-glow{
    position:absolute;
    inset:-40px;
    background:radial-gradient(circle at top,#60a5fa40,#22c55e10,#0000);
    filter:blur(18px);
    z-index:-1;
}

.auth-panel{
    display:grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
    gap:18px;
    background:linear-gradient(135deg,#020617dd,#020617f2);
    border-radius:22px;
    border:1px solid rgba(148,163,184,0.4);
    box-shadow:0 24px 60px rgba(0,0,0,0.85);
    padding:22px 22px 24px;
}

@media(max-width:820px){
    .auth-panel{
        grid-template-columns:1fr;
        padding:18px;
    }
}

/* LEFT SIDE */
.auth-left{
    padding:8px 8px 12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.auth-logo-circle{
    width:52px;height:52px;
    border-radius:999px;
    background:radial-gradient(circle at top,#38bdf8,#1d4ed8);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:20px;color:white;
    margin-bottom:10px;
}
.auth-title{
    font-size:26px;
    font-weight:800;
    color:#f9fafb;
    margin-bottom:4px;
}
.auth-subtitle{
    font-size:14px;
    color:#cbd5f5;
    margin-bottom:14px;
    max-width:320px;
}
.auth-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.auth-pill{
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    background:rgba(15,23,42,0.9);
    border:1px solid rgba(148,163,184,0.7);
    color:#e5e7eb;
}

/* RIGHT SIDE */
.auth-right{
    display:flex;
    align-items:center;
    justify-content:center;
}
.auth-card{
    background:#020617;
    border-radius:18px;
    padding:20px 18px 22px;
    border:1px solid rgba(148,163,184,0.6);
    box-shadow:0 18px 45px rgba(0,0,0,0.9);
    width:100%;
}
.auth-card-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:4px;
    color:#f9fafb;
}
.auth-card-subtitle{
    font-size:13px;
    color:#9ca3af;
    margin-bottom:14px;
}
.auth-form{
    margin-top:8px;
}
.auth-field label{
    font-size:13px;
    color:#e5e7eb;
}
.auth-field input{
    margin-top:3px;
}
.auth-submit{
    width:100%;
    margin-top:10px;
}
.auth-hint{
    font-size:11px;
    color:#9ca3af;
    margin-top:10px;
    line-height:1.5;
}
.auth-hint span{
    display:inline-block;
    margin-inline:2px;
}
.auth-alert{
    margin-bottom:12px;
}

/* لما نطبع، نخفي صفحة اللوجين لو حد ضغط Print بالغلط */
@media print{
    .auth-body{background:#fff!important}
    .auth-shell{box-shadow:none!important;border:none!important}
}

/* helper for full-report page splitting */
.break-after{margin-bottom:30px;}
@media print{
    .break-after{page-break-after:always;}
    .break-after:last-of-type{page-break-after:auto;}
}
/* ==== MODAL (تعديل المعاملة في Pop-up) ==== */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.75);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
}
.modal-overlay.modal-show{
    display:flex;
}
.modal-content{
    background:#020617;
    border-radius:16px;
    padding:18px 18px 20px;
    max-width:420px;
    width:100%;
    border:1px solid rgba(148,163,184,0.7);
    box-shadow:0 20px 45px rgba(0,0,0,0.9);
}
.modal-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
    color:#f9fafb;
}
.modal-content .form label{
    color:#e5e7eb;
}
.modal-content .form input,
.modal-content .form select{
    background:#020617;
    border:1px solid #334155;
}