/* ============================================================ Aim Caffee — Design System v1 (app.css) Dua lapis: (A) GLOBAL : reset dasar + appbar/nav + komponen baru yg tidak bentrok (B) .newui : komponen konten (kartu, tombol, tabel, form, badge...) hanya aktif di halaman yg , biar halaman lama tidak rusak saat migrasi bertahap. Palette: kopi hangat + aksen emas. ============================================================ */ :root{ --bg:#f7f4ef; --surface:#ffffff; --surface-2:#fbf8f4; --ink:#241a13; --ink-2:#5c4a3d; --muted:#8a7768; --line:#eadfd3; --brand:#6f3416; --brand-2:#a2571f; --gold:#c8963e; --gold-soft:#f3e6cd; --ok:#1e8449; --ok-bg:#e8f8ee; --warn:#b7791f; --warn-bg:#fdf6e3; --danger:#c0392b; --danger-bg:#fdecea; --info:#1e5aa8; --info-bg:#e8f1fd; --r:16px; --r-sm:10px; --r-lg:22px; --r-pill:999px; --shadow-1:0 1px 2px rgba(36,26,19,.06),0 2px 8px rgba(36,26,19,.05); --shadow-2:0 8px 28px rgba(36,26,19,.12); --max:960px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ---------- (A) GLOBAL ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ font-family:var(--font); background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} button{font-family:inherit} /* Appbar — header seragam semua halaman */ header.appbar{ background:linear-gradient(135deg,#2c1a10,#4a2a17); color:#fff; position:sticky;top:0;z-index:40; border-bottom:2px solid var(--gold); box-shadow:0 2px 12px rgba(36,26,19,.18); padding:0;margin:0;text-align:initial; } .appbar-in{ position:relative; max-width:var(--max);margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 12px;min-height:56px; } .appbar .title{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); text-align:center;font-weight:800;font-size:1.06rem;line-height:1.15; max-width:62%;min-width:0;pointer-events:none; } .appbar .title small{ display:block;font-size:.62rem;font-weight:700;color:var(--gold); letter-spacing:.6px;text-transform:uppercase;margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .appbar .brand{font-weight:800;line-height:1.15} .iconbtn{ display:inline-flex;align-items:center;gap:6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff;text-decoration:none; border-radius:var(--r-pill); padding:7px 13px;font-size:.78rem;font-weight:700; cursor:pointer;transition:.15s;white-space:nowrap; flex:0 0 auto;max-width:34vw;overflow:hidden; } .iconbtn:hover{background:rgba(255,255,255,.22)} .iconbtn:active{transform:scale(.96)} .iconbtn.solid{background:var(--gold);border-color:var(--gold);color:#2c1a10} .appbar .notif-badge{flex:0 0 auto} .appnav{ max-width:var(--max);margin:0 auto; display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;justify-content:safe center; padding:0 12px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none; } .appnav::-webkit-scrollbar{display:none} .appnav a,.appnav span.link{ background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22); color:#fff;border-radius:var(--r-pill);padding:5px 11px; font-size:.72rem;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap; flex:0 0 auto; } .appnav a:hover,.appnav span.link:hover{background:rgba(255,255,255,.22)} @media(max-width:560px){ .iconbtn .lbl{display:none} } .notif-badge{background:var(--danger);color:#fff;border-radius:var(--r-pill);padding:3px 9px;font-size:.72rem;font-weight:800;min-width:26px;text-align:center;display:inline-block} .pv{background:var(--gold);color:#2c1a10;text-align:center;font-size:.72rem;font-weight:800;padding:6px;letter-spacing:.4px} /* ---------- (B) NEWUI — konten ---------- */ .newui .wrap{max-width:var(--max);margin:0 auto;padding:0 16px} .newui .stack>*+*{margin-top:16px} .newui .muted{color:var(--muted)} .newui .small{font-size:.82rem} .newui .center{text-align:center} .newui .row{display:flex;align-items:center;gap:10px} .newui .row.wrap{flex-wrap:wrap} .newui .spacer{flex:1} .newui{background:var(--bg)} .newui .sec{ display:flex;align-items:center;gap:9px; margin:22px 0 10px;font-size:.78rem;font-weight:800; color:var(--ink-2);text-transform:uppercase;letter-spacing:.7px; } .newui .sec::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--gold)} .newui .card{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:16px;box-shadow:var(--shadow-1); } .newui .card.tight{padding:12px 14px} .newui .card h3{font-size:1rem;font-weight:800} .newui .card .sub{font-size:.8rem;color:var(--muted);margin-top:3px} .newui .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px} .newui .tile{ display:flex;flex-direction:column;gap:10px; background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:15px;text-decoration:none;color:var(--ink); box-shadow:var(--shadow-1);transition:.16s; } .newui .tile:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:#dccbb6} .newui .tile:active{transform:scale(.985)} .newui .tile .ico{ width:44px;height:44px;border-radius:13px;display:grid;place-items:center; font-size:1.4rem;background:var(--surface-2);border:1px solid var(--line); } .newui .tile .t{font-weight:800;font-size:.94rem;line-height:1.25} .newui .tile .d{font-size:.72rem;color:var(--muted);font-weight:600;line-height:1.35} .newui .badge{ display:inline-block;font-size:.6rem;font-weight:800; border-radius:var(--r-pill);padding:3px 9px;letter-spacing:.3px; text-transform:uppercase;align-self:flex-start; } .newui .badge.gold{background:var(--gold-soft);color:#8a5a12} .newui .badge.blue{background:var(--info-bg);color:var(--info)} .newui .badge.green{background:var(--ok-bg);color:var(--ok)} .newui .badge.red{background:var(--danger-bg);color:var(--danger)} .newui .badge.gray{background:#f0ece6;color:var(--ink-2)} .newui .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; border:1px solid var(--line);background:var(--surface);color:var(--ink); border-radius:var(--r-sm);padding:10px 15px;font-size:.88rem;font-weight:700; cursor:pointer;transition:.15s;text-decoration:none;line-height:1; } .newui .btn:hover{background:var(--surface-2)} .newui .btn:active{transform:scale(.97)} .newui .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:var(--brand);color:#fff} .newui .btn.gold{background:var(--gold);border-color:var(--gold);color:#2c1a10} .newui .btn.ghost{background:transparent} .newui .btn.danger{background:var(--danger);border-color:var(--danger);color:#fff} .newui .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff} .newui .btn.block{width:100%} .newui .btn.sm{padding:7px 11px;font-size:.78rem} .newui .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px} .newui .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px;text-align:center;box-shadow:var(--shadow-1)} .newui .stat b{display:block;font-size:1.45rem;font-weight:800;line-height:1.1} .newui .stat span{font-size:.72rem;color:var(--muted);font-weight:700} .newui .field{margin-bottom:12px} .newui .field label{display:block;font-size:.78rem;font-weight:800;color:var(--ink-2);margin-bottom:5px} .newui .input,.newui .select,textarea.newui .input{ width:100%;padding:11px 12px;border:1.5px solid var(--line); border-radius:var(--r-sm);font-size:.95rem;background:var(--surface);color:var(--ink); } .newui .input:focus,.newui .select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,150,62,.18)} .newui .table{width:100%;border-collapse:collapse;font-size:.86rem} .newui .table th,.newui .table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)} .newui .table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)} .newui .table tr:last-child td{border-bottom:none} .newui .table .num{text-align:right;font-variant-numeric:tabular-nums} .newui .divider{height:1px;background:var(--line);margin:14px 0} .newui .pill-row{display:flex;gap:8px;flex-wrap:wrap} .newui .foot{text-align:center;font-size:.72rem;color:var(--muted);padding:26px 16px 0;line-height:1.6}