:root{
    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-2:#eef2ff;
    --ink:#111827;
    --muted:#6b7280;
    --line:#d8deea;
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --nav:#0f172a;
    --nav-2:#1e293b;
    --success:#15803d;
    --warning:#b45309;
    --danger:#b91c1c;
    --info:#0369a1;
    --purple:#6d28d9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family: Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-size:15px;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0f172a;
}
.login-card{
    width:100%;
    max-width:420px;
    background:#fff;
    border:3px solid #1e293b;
    padding:28px;
}
.login-card h1{margin:0 0 8px;font-size:30px}
.login-card p{margin:0 0 20px;color:var(--muted)}

.app-shell{display:flex;min-height:100vh}
.sidebar{
    width:260px;
    background:var(--nav);
    color:#fff;
    padding:18px 14px;
    position:fixed;
    inset:0 auto 0 0;
    overflow-y:auto;
}
.brand{
    padding:10px 12px 18px;
    border-bottom:1px solid #334155;
    margin-bottom:14px;
}
.brand-title{font-size:22px;font-weight:800;line-height:1}
.brand-sub{font-size:12px;color:#cbd5e1;margin-top:6px}
.nav-link{
    display:block;
    color:#e5e7eb;
    padding:11px 12px;
    margin:4px 0;
    border:1px solid transparent;
}
.nav-link:hover,.nav-link.active{
    background:var(--nav-2);
    color:#fff;
    border-color:#475569;
    text-decoration:none;
}
.main{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:22px;
}
.topbar{
    background:#fff;
    border:1px solid var(--line);
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.topbar h1{font-size:22px;margin:0}
.topbar .meta{color:var(--muted);font-size:13px}

.card{
    background:var(--surface);
    border:1px solid var(--line);
    padding:16px;
    margin-bottom:16px;
}
.card h2,.card h3{margin-top:0}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{
    background:#fff;
    border:1px solid var(--line);
    padding:16px;
}
.kpi .label{color:var(--muted);font-size:13px;margin-bottom:8px}
.kpi .value{font-size:26px;font-weight:800}
.kpi.primary{border-top:5px solid var(--primary)}
.kpi.success{border-top:5px solid var(--success)}
.kpi.warning{border-top:5px solid var(--warning)}
.kpi.danger{border-top:5px solid var(--danger)}

.table-wrap{overflow:auto;border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#eef2ff;font-size:13px;text-transform:uppercase;letter-spacing:.02em}
tr:last-child td{border-bottom:0}

.form-row{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row-3{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.form-field{margin-bottom:13px}
label{display:block;font-weight:700;margin-bottom:6px;font-size:13px}
input,select,textarea{
    width:100%;
    border:1px solid #b8c2d6;
    padding:10px;
    font-size:15px;
    background:#fff;
    color:var(--ink);
}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{
    outline:3px solid #bfdbfe;
    border-color:var(--primary);
}
.btn{
    display:inline-block;
    border:1px solid var(--primary);
    background:var(--primary);
    color:#fff;
    padding:9px 13px;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
}
.btn:hover{background:var(--primary-dark);text-decoration:none;color:#fff}
.btn.secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn.dark{background:#111827;border-color:#111827;color:#fff}
.btn.success{background:var(--success);border-color:var(--success)}
.btn.warning{background:var(--warning);border-color:var(--warning)}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn.small{font-size:12px;padding:6px 8px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.badge{
    display:inline-block;
    padding:4px 8px;
    font-size:12px;
    font-weight:800;
    border:1px solid currentColor;
}
.badge.active,.badge.paid{color:var(--success);background:#ecfdf5}
.badge.pending{color:var(--warning);background:#fffbeb}
.badge.overdue,.badge.late{color:var(--danger);background:#fef2f2}
.badge.cancelled{color:#374151;background:#f3f4f6}
.badge.partial{color:var(--info);background:#eff6ff}

.flash{
    padding:12px 14px;
    margin-bottom:15px;
    border:1px solid;
    background:#fff;
}
.flash.success{border-color:var(--success);color:var(--success)}
.flash.error{border-color:var(--danger);color:var(--danger)}
.flash.warning{border-color:var(--warning);color:var(--warning)}

.compact-card{padding:12px}
.checkbox-line{
    display:flex;
    gap:10px;
    align-items:flex-start;
    cursor:pointer;
    font-weight:400;
    margin:0;
}
.checkbox-line input{
    width:auto;
    margin-top:3px;
    min-width:18px;
    height:18px;
}

.note{
    background:#fffbeb;
    border:1px solid #f59e0b;
    padding:12px;
    margin-bottom:14px;
}
.muted{color:var(--muted)}
.right{text-align:right}
.center{text-align:center}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}

.receipt{
    max-width:760px;
    margin:20px auto;
    background:#fff;
    border:1px solid #111827;
    padding:24px;
}
.receipt h1{margin:0 0 6px}
.print-only{display:none}

@media(max-width:900px){
    .sidebar{position:static;width:100%;height:auto}
    .app-shell{display:block}
    .main{margin-left:0;width:100%;padding:14px}
    .grid-2,.grid-3,.grid-4,.form-row,.form-row-3{grid-template-columns:1fr}
    .topbar{display:block}
}

@media print{
    body{background:#fff}
    .sidebar,.topbar,.no-print,.actions{display:none!important}
    .main{margin:0;width:100%;padding:0}
    .card,.table-wrap{border:0}
    .receipt{border:0;margin:0;max-width:100%;padding:0}
}


.inline-tool{
    margin-top:14px;
    border:1px solid var(--line);
    background:#f8fafc;
    padding:12px;
    display:flex;
    gap:12px;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
}
.inline-form{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
.inline-form input[type="date"]{
    width:auto;
    min-width:170px;
}

.static-box{
    border:1px solid var(--line);
    background:#f8fafc;
    padding:10px;
    min-height:43px;
}
.clean-list{
    margin:0;
    padding-left:18px;
}
.clean-list li{
    margin:6px 0;
}