/**
 * Tujuan    : Styling global aplikasi Tactic Project.
 * Dipakai   : includes/header.php semua halaman.
 * Dependensi: Font system lokal/browser default.
 * Fungsi    : Layout dashboard, responsive, print document, KPI card.
 * Side FX   : Styling UI dan print media.
 */
:root{--black:#070707;--black2:#111;--cream:#f5e6c8;--cream2:#d8be92;--bg:#f7f3ea;--card:#fff;--border:#e7ddcc;--text:#111;--muted:#6b7280;--danger:#e32636;--success:#22a565;--blue:#2563eb;--purple:#7c3aed;--green:#16a34a;--shadow:0 18px 50px rgba(0,0,0,.08);--radius:20px;}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:72px;background:linear-gradient(180deg,#050505,#171717);display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:110px;z-index:20}.side-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.08)}.side-icon.active{background:var(--cream);color:#111}.main-area{margin-left:72px;min-height:100vh;padding-bottom:90px}.topbar{height:96px;background:linear-gradient(135deg,#050505,#171717);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:15}.hamburger{background:transparent;color:#fff;border:0;font-size:24px;display:none}.brand-box{display:flex;align-items:center;gap:16px}.brand-logo{width:130px;max-height:52px;object-fit:contain;filter:brightness(1.2)}.brand-box h1{margin:0;font-size:26px}.brand-box h1 span{color:var(--cream)}.brand-box p{margin:0;font-size:13px;color:#ddd}.logout-btn{border:1px solid var(--cream);color:var(--cream);border-radius:10px;padding:10px 16px}.tabbar{background:#111;display:flex;gap:4px;padding:0 28px;min-height:48px;align-items:flex-end;position:sticky;top:96px;z-index:14}.tabbar a{color:#fff;padding:14px 16px;border-radius:12px 12px 0 0;font-weight:700;font-size:14px}.tabbar a.active{background:#1f1f1f;border-bottom:3px solid var(--cream);color:var(--cream)}.filter-card,.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin:20px 24px;padding:18px}.filter-card{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end}.filter-card label,.form-grid label{font-weight:700;font-size:13px}.filter-card select,.filter-card input,.form-grid input,.form-grid select,.form-grid textarea,.search-row input,.inline-form select{width:100%;height:42px;margin-top:8px;border:1px solid var(--border);border-radius:12px;padding:0 12px;background:#fff}.form-grid textarea{height:90px;padding:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:11px 18px;background:#fff;font-weight:800;cursor:pointer}.btn.dark{background:#111;color:#fff;border-color:#111}.btn.cream,.cream{background:var(--cream);color:#111;border-color:var(--cream2)}.btn.xs{font-size:12px;padding:7px 10px;border-radius:9px}.btn.full{width:100%}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 24px}.kpi{border-radius:18px;padding:22px;box-shadow:var(--shadow);background:#fff;border:1px solid var(--border);display:grid;gap:8px}.kpi span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}.kpi small{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}.kpi b{font-size:28px}.kpi.blue span{background:#dbeafe;color:#1d4ed8}.kpi.purple span{background:#ede9fe;color:#6d28d9}.kpi.red span{background:#fee2e2;color:#dc2626}.kpi.green span{background:#dcfce7;color:#15803d}.kpi.cream-kpi span{background:var(--cream);color:#111}.month-bars{display:grid;gap:12px}.month-row{display:grid;grid-template-columns:110px 100px 1fr 140px;gap:12px;align-items:center}.month-row em{font-style:normal;background:#edf2f7;border:1px solid #dbe4ef;border-radius:999px;padding:6px 10px;text-align:center;font-weight:800}.bar{height:16px;background:#e6edf5;border-radius:999px;overflow:hidden}.bar.small{height:12px}.bar i{display:block;height:100%;border-radius:999px}.bar i.ok{background:#111}.bar i.bad{background:var(--danger)}.ok-text{color:#0f7a38;font-weight:800}.bad-text{color:var(--danger);font-weight:800}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 24px}.mini{margin:0}.mini h3{margin-top:0}.data-table,.mini table{width:100%;border-collapse:collapse}.data-table th,.mini th{background:#070707;color:#fff;padding:12px;text-align:left}.data-table td,.mini td{border-bottom:1px solid var(--border);padding:12px}.data-table th:first-child{border-radius:12px 0 0 0}.data-table th:last-child{border-radius:0 12px 0 0}.total{font-weight:900;background:#f7f3ea}.empty{text-align:center;color:var(--muted);padding:28px!important}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.section-head h2,.card h2{font-size:28px;margin:0 0 8px}.section-head p,.card p{color:var(--muted);margin:0}.search-row{display:flex;gap:10px;margin:16px 0}.search-row input{max-width:360px}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}.form-grid.compact{grid-template-columns:repeat(2,1fr)}.full{grid-column:1/-1}.item-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:10px}.actions{display:flex;gap:8px;flex-wrap:wrap}.badge{border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px}.cream-badge,.warn{background:var(--cream);color:#111}.success{background:#dcfce7;color:#166534}.locked{text-align:center;padding:60px}.flash{margin:16px 24px;padding:14px;border-radius:12px;font-weight:700}.flash.success{background:#dcfce7;color:#166534}.flash.danger{background:#fee2e2;color:#991b1b}.login-body{min-height:100vh;background:linear-gradient(135deg,#070707,#302719);display:grid;place-items:center;padding:20px}.login-card{width:min(420px,100%);background:#fff;border-radius:24px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.login-logo{width:190px;display:block;margin:0 auto 10px}.login-card h1{text-align:center;margin-bottom:6px}.login-card p{text-align:center;color:var(--muted)}.login-card label{display:block;margin:14px 0;font-weight:800}.login-card input{width:100%;height:46px;border:1px solid var(--border);border-radius:12px;padding:0 12px}.preview-box{display:grid;gap:8px;background:#f7f3ea;border:1px solid var(--border);border-radius:16px;padding:18px;margin:18px 0}.invoice-maker{display:grid;grid-template-columns:2fr 1fr;gap:24px}.flow-card{background:#111;color:#fff;border-radius:18px;padding:24px}.master-list{padding-left:18px}.table-foot{margin-top:12px;color:var(--muted)}.bottomnav{display:none}.print-body{background:#eee}.print-page{width:210mm;min-height:297mm;margin:0 auto;background:#fff;padding:16mm;position:relative;font-family:Arial,sans-serif;color:#111}.doc-top{display:flex;justify-content:space-between;align-items:flex-start;border-top:14px solid #7b0000;padding-top:16px}.doc-top img{max-width:210px;max-height:70px;object-fit:contain}.doc-title{margin-top:24px;width:330px;text-align:center;font-size:30px;font-weight:900;letter-spacing:12px;padding:8px 0}.red-title{background:#760000;color:#f5e6c8}.gray-title{background:#d9d9d9;color:#111}.doc-date{text-align:right;margin-top:10px}.doc-info{display:grid;grid-template-columns:150px 1fr;gap:4px;margin:10px 0 14px 55px;font-size:13px}.doc-table-wrap{position:relative}.doc-table{width:100%;border-collapse:collapse}.doc-table th,.doc-table td{border:1px solid #111;padding:8px;font-size:13px}.doc-table th{background:#f2f2f2}.doc-bottom-grid{display:grid;grid-template-columns:1fr 280px;gap:30px;margin-top:16px}.payment-box{border:1px solid #111;padding:14px;width:320px}.total-table{width:100%;border-collapse:collapse}.total-table th,.total-table td{border-bottom:1px solid #111;padding:8px;text-align:left}.total-table td{text-align:right;font-weight:800}.noted{font-size:12px;margin-top:28px;line-height:1.45}.sign{position:absolute;right:35mm;bottom:45mm;text-align:center;display:grid;gap:8px}.invoice-stamp{position:absolute;left:50%;top:90px;transform:translateX(-50%);color:rgba(200,0,0,.25);border:5px solid rgba(200,0,0,.18);font-size:42px;font-weight:900;letter-spacing:2px;padding:8px 28px;z-index:2}.stamp-lunas{top:140px}.print-btn{position:fixed;right:20px;bottom:20px}.no-print{display:block}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.hamburger{display:block}.main-area{margin-left:0}.tabbar{overflow:auto;padding:0 16px}.filter-card,.kpi-grid,.summary-grid{grid-template-columns:1fr;margin:14px}.card{margin:14px}.form-grid,.form-grid.compact,.invoice-maker{grid-template-columns:1fr}.month-row{grid-template-columns:80px 90px 1fr;gap:8px}.month-row span{grid-column:2/-1}.data-table{min-width:820px}.card{overflow:auto}.bottomnav{position:fixed;left:0;right:0;bottom:0;background:#111;display:grid;grid-template-columns:repeat(4,1fr);z-index:30}.bottomnav a{color:#fff;display:grid;place-items:center;padding:9px;font-size:18px}.bottomnav span{font-size:11px}.bottomnav a.active{color:var(--cream)}.brand-logo{width:110px}.brand-box h1{font-size:20px}.topbar{padding:0 14px}.logout-btn{padding:8px}}
@media print{.no-print{display:none!important}.print-page{margin:0;box-shadow:none}.print-body{background:#fff}@page{size:A4;margin:0}}