/* DEC-076: Archi — terracotta, cream, espresso, taupe, beige. */
:root {
    color-scheme: light;
    --bg:#f7f2eb; --surface:#fffdf9; --surface-2:#f5e6d3;
    --ink:#2b283b; --muted:#73685e; --line:#e7dccf; --line-strong:#c4b29e;
    --brand:#c0653d; --on-brand:#fff; --accent:#a34b2a; --accent-soft:#f8e6db;
    --cream:#f5e6d3; --beige:#dbc7b5; --taupe:#8a8176;
    --ok:#32634b; --ok-soft:#e8efe7; --warn:#86551d; --warn-soft:#f7edd7;
    --bad:#a33432; --bad-soft:#f9e6e2;
    --shadow:0 3px 14px #49362006; --radius:14px;
}
body { font-size:14px; line-height:1.55; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
h1,h2,h3 { line-height:1.25; }
.ui-icon { flex:0 0 auto; vertical-align:middle; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; background:var(--surface); padding:12px; }
.skip-link:focus { top:12px; }
.sidebar { width:240px; position:fixed; inset:0 auto 0 0; background:var(--ink); color:var(--cream); z-index:40; padding:26px 18px 18px; display:flex; flex-direction:column; overflow-y:auto; }
.sidebar-brand { margin:0 7px 24px; gap:10px; color:var(--cream); }
.sidebar-brand .brand-name { color:var(--cream); display:block; font-size:18px; }
.sidebar-brand small { display:block; color:var(--beige); font-weight:400; font-size:11px; letter-spacing:.03em; margin-top:2px; }
.sidebar-brand em { color:#e4a07c; }
.sidebar-create { justify-content:center; width:100%; margin-bottom:20px; }
.nav-group-label { font-size:10px; font-weight:700; letter-spacing:.14em; margin:19px 14px 7px; color:#c2b6ad; }
.side-link { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 13px; border-radius:9px; color:#e3d9cf; font-size:13px; margin:2px 0; }
.side-link .ui-icon { opacity:.8; width:19px; }
.side-link:hover { background:#ffffff0d; color:#fff; text-decoration:none; }
.side-link.is-active { background:#c0653d29; color:#f0b08b; box-shadow:inset 3px 0 var(--brand); }
.side-link.is-active .ui-icon { opacity:1; }
.sidebar-foot { margin-top:auto; padding:28px 13px 0; color:var(--beige); font-size:12px; }
.sidebar-foot small { display:block; font-size:10px; margin-top:6px; color:#b3a79e; }
.brand-dot { display:inline-block; background:var(--brand); height:7px; width:7px; border-radius:50%; margin-right:6px; }
.app-workspace { margin-left:240px; min-width:0; }
.workspace-header { min-height:76px; padding:12px 32px; border-bottom:1px solid var(--line); background:var(--surface); display:flex; align-items:center; gap:24px; }
.breadcrumb { display:flex; gap:10px; align-items:center; min-width:0; font-size:12px; color:var(--muted); }
.breadcrumb strong { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.header-search { display:flex; align-items:center; gap:9px; margin-left:auto; width:min(330px,38%); padding:2px 6px 2px 12px; border:1px solid var(--line); background:var(--bg); border-radius:9px; color:var(--muted); }
.header-search input { min-width:0; background:transparent; border:0; padding:9px 0; font-size:12px; }
.header-search button { display:grid; place-items:center; border:0; background:transparent; color:var(--accent); cursor:pointer; width:34px; height:40px; }
.profile-link { display:flex; align-items:center; gap:10px; color:var(--ink); flex-shrink:0; min-height:44px; }
.profile-link:hover { text-decoration:none; }
.avatar { width:36px; height:36px; background:var(--accent-soft); color:var(--accent); font-size:13px; }
.profile-name { font-size:12px; font-weight:600; }
.profile-name small { display:block; font-size:10px; color:var(--muted); font-weight:400; }
.header-logout { margin:0; }
.mobile-brand,.bottom-nav { display:none; }
.wrap { max-width:1440px; padding:30px 32px 22px; }
.staging-banner { background:var(--cream); color:#79513a; padding:8px 32px; font-size:11px; display:flex; gap:12px; align-items:center; }
.staging-banner strong { font-size:9px; letter-spacing:.1em; border:1px solid var(--beige); padding:2px 6px; border-radius:4px; }
.page-head { margin-bottom:24px; gap:16px; }
.page-head h1 { font-size:26px; font-weight:750; letter-spacing:-.04em; }
.page-head .sub { font-size:12px; margin-top:7px; }
.eyebrow { font-size:10px; letter-spacing:.15em; color:var(--accent); font-weight:700; margin:0 0 6px; }
.card { box-shadow:var(--shadow); min-width:0; }
.card-head { padding:18px 22px; font-size:14px; gap:12px; }
.card-head h2,.card-head h3 { font-size:inherit; margin:0; font-weight:650; }
.card-body { padding:22px; }
.card-head small { display:block; color:var(--muted); font-weight:400; font-size:11px; margin-top:4px; }
.stats { gap:16px; margin-bottom:24px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat { padding:20px; position:relative; }
.stat .label { text-transform:none; letter-spacing:0; font-weight:500; font-size:12px; padding-right:28px; }
.stat .value { font-size:29px; margin-top:12px; line-height:1.2; }
.stat .value.sm { font-size:23px; }
.stat .hint { font-size:10px; margin-top:9px; }
.stat-icon { position:absolute; top:17px; right:17px; padding:7px; border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.stat-icon .ui-icon { width:17px; height:17px; }
.stat-link { color:inherit; }
.stat-link:hover { text-decoration:none; border-color:var(--brand); }
.stats.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-middle { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:20px; margin-bottom:24px; }
.dashboard-middle>.card { margin-top:0; }
.bars { padding:22px; display:grid; gap:17px; }
.bar-row { display:grid; grid-template-columns:120px minmax(30px,1fr) 95px; align-items:center; gap:12px; font-size:11px; }
.bar-row>a { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { height:10px; background:var(--cream); border-radius:20px; overflow:hidden; }
.bar-fill { height:100%; background:var(--brand); border-radius:inherit; min-width:2px; }
.bar-row .num { font-size:11px; }
.attention { padding:22px; }
.attention-number { font-size:35px; font-weight:750; color:var(--accent); letter-spacing:-.04em; margin:0 0 4px; }
.attention p { font-size:12px; color:var(--muted); }
.attention .btn { margin-top:6px; }
.quick-links { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.quick-links a { display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:12px; padding:10px 13px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.btn { min-height:44px; padding:10px 16px; font-size:12px; border-radius:9px; font-weight:600; justify-content:center; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:#8c3e23; filter:none; }
.btn-sm { min-height:40px; padding:8px 12px; font-size:11px; }
.btn-remove,.icon-button { min-width:44px; min-height:44px; }
.icon-button { display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea { min-height:44px; border-radius:9px; font-size:13px; color:var(--ink); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { padding:10px 12px; border:1px solid var(--line-strong); width:100%; background:var(--surface); }
.header-search input[type=search] { border:0; background:transparent; font-size:12px; padding:6px 0; min-height:38px; }
label { font-size:12px; font-weight:550; }
label>input:not([type=checkbox]):not([type=radio]),label>select { display:block; margin-top:7px; }
.field label { font-size:12px; }
.help { color:var(--muted); font-size:11px; font-weight:400; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.grid-2 .field,.grid-3 .field { margin-bottom:0; }
.grid-2+.grid-3 { margin-top:18px; }
.field+.grid-2,.grid-2+.field { margin-top:18px; }
.toolbar { padding:18px 22px; gap:10px; background:#fefaf5; border-radius:14px 14px 0 0; }
.toolbar input[type=search] { max-width:360px; }
table.data { font-size:12px; }
table.data th,table.data td { padding:16px 20px; }
table.data thead th { font-size:10px; background:#f8f2ea; letter-spacing:.07em; }
table.data .num { text-align:right; }
table.data a { font-weight:600; }
.badge { font-size:10px; padding:4px 10px; }
.badge::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; margin-right:6px; background:currentColor; vertical-align:1px; }
.pagination a,.pagination .current { min-width:40px; min-height:40px; display:inline-grid; place-items:center; }
details>summary { cursor:pointer; min-height:44px; }
summary.card-head::after { content:'+'; font-size:19px; color:var(--accent); }
details[open]>summary.card-head::after { content:'−'; }
.warehouse-tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:-4px 0 22px; padding-bottom:12px; }
.warehouse-tabs a { padding:10px 13px; color:var(--muted); border-radius:8px; min-height:44px; font-size:12px; display:flex; align-items:center; gap:8px; }
.warehouse-tabs a:hover { text-decoration:none; background:var(--cream); }
.warehouse-tabs a.is-active { background:var(--accent-soft); color:var(--accent); font-weight:650; }
.warehouse-note { margin:0 0 18px; padding-left:11px; border-left:2px solid var(--beige); }
.entry-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); gap:20px; margin-bottom:22px; align-items:start; }
.entry-grid>.card { margin-top:0; }
.guide-card { background:var(--cream); border:1px solid var(--beige); border-radius:var(--radius); padding:24px; }
.guide-card h2 { font-size:16px; margin:0 0 13px; }
.guide-card p,.guide-card li { font-size:12px; color:#70604f; }
.guide-card ol { padding-left:18px; display:grid; gap:14px; }
.recipe-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:20px; }
.recipe-grid .card+.card { margin-top:0; }
.recipe-output { border-top:1px solid var(--line); padding-top:14px; margin-top:16px; color:var(--accent); font-size:12px; }
.ingredient-list { list-style:none; padding:0; margin:0; }
.ingredient-list li { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12px; }
.ingredient-list li:last-child { border:0; }
.wallet-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.wallet-card { background:var(--ink); color:var(--cream); padding:22px; border-radius:13px; }
.wallet-card .ui-icon { color:#e4a07c; }
.wallet-card p { font-size:12px; margin:16px 0 6px; color:var(--beige); }
.wallet-card strong { font-size:24px; font-weight:650; }
.invoice-editor { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }
.invoice-main { min-width:0; }
.invoice-summary { position:sticky; top:22px; }
.invoice-summary .totals { width:100%; margin:0; }
.invoice-summary .form-actions { flex-direction:column-reverse; margin-top:22px; }
.invoice-summary .form-actions .btn { width:100%; }
.invoice-summary .help { margin-top:16px; }
table.items { font-size:12px; }
.col-qty { width:80px; } .col-price { width:120px; } .col-total { width:100px; }
.line-total { font-size:11px; padding-top:12px; }
.system-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.system-grid>.card { margin:0; }
.workspace-foot { color:var(--muted); display:flex; justify-content:space-between; gap:16px; font-size:10px; padding:28px 0 0; margin-top:22px; border-top:1px solid var(--line); }
.workspace-foot span:first-child { font-weight:650; }
.all-menu { width:min(580px,calc(100% - 24px)); max-height:calc(100dvh - 80px); border:1px solid var(--line); border-radius:20px; padding:24px; background:var(--surface); color:var(--ink); overscroll-behavior:contain; }
.all-menu::backdrop { background:#2b283b99; }
.menu-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.menu-head h2 { margin:0; font-size:22px; }
.all-menu .nav-group-label { color:var(--muted); margin-left:0; }
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.menu-tile { min-height:52px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:9px; padding:10px; font-size:12px; color:var(--ink); }
.menu-tile:hover,.menu-tile.is-active { background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.menu-account { display:flex; gap:10px; border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
body:has(dialog[open]) { overflow:hidden; }
.auth-page { background:radial-gradient(ellipse at 20% 10%,var(--cream),transparent 65%),var(--bg); }
.auth-logo { background:var(--ink); }
.auth-card { border-radius:20px; padding:30px; }
.auth-title em { color:var(--accent); }

@media (max-width:1200px) {
    .workspace-header { padding-inline:24px; gap:18px; }
    .wrap { padding-inline:24px; }
    .breadcrumb>span { display:none; }
    .profile-name { display:none; }
    .stats { gap:12px; } .stat { padding:17px; }
    .stat .value.sm { font-size:20px; }
    .stat-icon { right:12px; top:12px; padding:5px; }
    .invoice-editor { grid-template-columns:minmax(0,1fr); gap:16px; }
    .invoice-summary { position:static; }
    .dashboard-middle { grid-template-columns:minmax(0,1fr) minmax(220px,.8fr); }
    .bar-row { grid-template-columns:100px minmax(20px,1fr) 85px; gap:8px; }
}
@media (max-width:1023px) {
    .sidebar { display:none; } .app-workspace { margin-left:0; }
    .workspace-header { min-height:60px; padding:8px 24px; position:sticky; top:0; z-index:30; }
    .mobile-brand { display:inline-block; font-size:18px; color:var(--ink); font-weight:800; letter-spacing:-.04em; white-space:nowrap; }
    .mobile-brand span { color:var(--accent); }
    .breadcrumb { display:none; } .header-search { width:min(360px,55%); }
    .wrap { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
    .bottom-nav { display:flex; position:fixed; inset:auto 0 0; z-index:40; background:var(--surface); border-top:1px solid var(--line); min-height:68px; padding:5px 8px calc(5px + env(safe-area-inset-bottom)); box-shadow:0 -4px 24px #49362006; }
    .bottom-nav a,.bottom-nav button { flex:1; min-width:0; min-height:56px; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--muted); font:inherit; font-size:10px; font-weight:550; cursor:pointer; border-radius:9px; }
    .bottom-nav .is-active,.bottom-nav button[aria-expanded=true] { color:var(--accent); background:var(--accent-soft); }
    .bottom-nav a:hover { text-decoration:none; }
    .staging-banner { padding-inline:24px; } .invoice-summary { top:80px; }
}
@media (max-width:767px) {
    .btn-sm { min-height:44px; }
    .workspace-header { padding-inline:16px; gap:12px; }
    .header-logout { display:none; }
    .header-search { margin-left:auto; padding:0; border:0; background:transparent; width:auto; }
    .header-search>.ui-icon,.header-search input { display:none; }
    .header-search button { width:44px; height:44px; border:1px solid var(--line); border-radius:9px; }
    .header-search:focus-within { position:absolute; inset:8px 70px 8px 16px; background:var(--surface); padding-left:10px; border:1px solid var(--line); border-radius:9px; }
    .header-search:focus-within input { display:block; width:100%; }
    .header-search:focus-within button { border:0; flex-shrink:0; }
    .wrap { padding:22px 16px calc(100px + env(safe-area-inset-bottom)); }
    .staging-banner { padding-inline:16px; font-size:10px; gap:8px; }
    .staging-banner strong { flex-shrink:0; }
    .page-head { gap:14px; margin-bottom:20px; }
    .page-head h1 { font-size:24px; } .page-head .sub { font-size:12px; }
    .page-head>.btn { width:100%; }
    .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:20px; }
    .stat { padding:15px; } .stat .label { font-size:11px; padding:0; }
    .stat .value { font-size:26px; } .stat .value.sm { font-size:18px; }
    .stat .hint { font-size:10px; }
    .stat-icon { position:static; float:right; margin:0 0 8px 5px; }
    .stat-icon .ui-icon { width:14px; height:14px; }
    .dashboard-middle,.entry-grid,.invoice-editor { grid-template-columns:minmax(0,1fr); gap:16px; }
    .invoice-summary { position:static; } .dashboard-middle { margin-bottom:20px; }
    .card-head,.card-body,.attention,.bars { padding:18px; }
    .card-head { font-size:13px; }
    .bar-row { grid-template-columns:100px minmax(20px,1fr) 85px; gap:8px; }
    .guide-card { padding:20px; }
    .recipe-grid,.system-grid { grid-template-columns:minmax(0,1fr); }
    .grid-2,.grid-3 { grid-template-columns:minmax(0,1fr); gap:16px; }
    .toolbar { padding:16px; }
    .toolbar input[type=search],.toolbar select { max-width:100%; }
    .toolbar select { flex:1; min-width:140px; }
    .table-scroll:has(table.data[data-card-table]) { overflow:visible; }
    table.data[data-card-table],table.data[data-card-table] tbody { display:block; width:100%; }
    table.data[data-card-table] thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    table.data[data-card-table] tbody tr { display:block; padding:15px 18px; border-bottom:1px solid var(--line); }
    table.data[data-card-table] tbody tr:last-child { border:0; }
    table.data[data-card-table] tbody td { display:flex; align-items:baseline; justify-content:space-between; text-align:right; gap:16px; border:0; padding:5px 0; font-size:12px; white-space:normal; overflow-wrap:anywhere; }
    table.data[data-card-table] tbody td::before { content:attr(data-label); text-align:left; color:var(--muted); font-size:11px; flex:0 0 88px; font-weight:400; }
    table.data[data-card-table] tbody td:first-child { padding-bottom:10px; font-weight:650; }
    table.data[data-card-table] tbody td:first-child a { font-size:13px; }
    table.data[data-card-table] tbody td[colspan] { display:block; text-align:center; }
    table.data[data-card-table] tbody td[colspan]::before { display:none; }
    table.data[data-card-table] td>details { text-align:left; max-width:calc(100% - 100px); }
    table.data[data-card-table] td>details form { padding-top:10px; }
    table.items,table.items tbody { display:block; }
    table.items thead { display:none; }
    table.items tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 44px; gap:12px 8px; border-bottom:1px solid var(--line); padding:18px 0; }
    table.items tr:first-child { padding-top:0; }
    table.items td { display:block; padding:0; width:auto; min-width:0; }
    table.items td:first-child { display:none; }
    table.items td:nth-child(2) { grid-column:1 / -1; }
    table.items td:nth-child(3)::before { content:'Jumlah'; }
    table.items td:nth-child(4)::before { content:'Harga satuan (Rp)'; }
    table.items td:nth-child(3)::before,table.items td:nth-child(4)::before { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }
    table.items td:nth-child(5) { grid-column:1 / 3; grid-row:3; }
    table.items td:nth-child(5) .line-total { text-align:left; padding:0; color:var(--ink); }
    table.items td:last-child { grid-column:3; grid-row:2; align-self:end; }
    .warehouse-tabs { gap:4px; }
    .warehouse-tabs a { font-size:11px; padding:9px 10px; }
    .warehouse-tabs .ui-icon { width:16px; }
    .wallet-card strong { font-size:23px; } .wallet-grid { gap:12px; }
    .form-actions>.btn { flex:1; }
    .workspace-foot { flex-direction:column; gap:4px; margin-top:20px; padding-top:20px; }
    .all-menu { padding:20px; } .menu-tile { font-size:11px; }
    dl.kv { grid-template-columns:minmax(80px,auto) minmax(0,1fr); }
    dl.kv dd { overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:no-preference) { .btn,.side-link,.menu-tile { transition:background-color .15s,border-color .15s; } }
@media print { .sidebar,.workspace-header,.bottom-nav,.staging-banner,.workspace-foot,.all-menu { display:none; } .app-workspace { margin:0; } .wrap { padding:0; } }