:root{
  --green:#16a34a; --green-d:#15803d; --forest:#14532d; --mint:#f0fdf4;
  --ink:#1e293b; --muted:#64748b; --faint:#94a3b8; --line:#e2e8f0; --line2:#f1f5f9;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Inter',system-ui,sans-serif;background:#f7faf8;color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}

.app{display:flex;min-height:100vh;}

/* ---------- SIDEBAR ---------- */
.sidebar{width:230px;background:var(--forest);color:#fff;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar::-webkit-scrollbar{width:6px;} .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px;}
.brand{display:flex;align-items:center;gap:9px;padding:18px 18px;font-size:16px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08);}
.brand .ti{font-size:22px;color:#4ade80;}
.nav-grp{padding:14px 10px 0;}
.nav-grp-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.38);padding:0 10px;margin-bottom:6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;color:rgba(255,255,255,.72);font-size:13px;margin-bottom:2px;transition:.15s;}
.nav-item:hover{background:rgba(255,255,255,.09);color:#fff;}
.nav-item.active{background:rgba(255,255,255,.16);color:#fff;font-weight:500;}
.nav-item .ti{font-size:17px;width:18px;text-align:center;flex-shrink:0;}
.nav-sub{margin:2px 0 4px 30px;display:flex;flex-direction:column;gap:1px;}
.nav-sub a{font-size:12.5px;color:rgba(255,255,255,.6);padding:5px 10px;border-radius:6px;}
.nav-sub a:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-sub a.active{color:#fff;font-weight:500;background:rgba(255,255,255,.1);}
.nav-badge{margin-left:auto;font-size:9px;font-weight:600;background:#4ade80;color:#14532d;padding:1px 6px;border-radius:10px;}
.sidebar-foot{margin-top:auto;padding:10px;border-top:1px solid rgba(255,255,255,.08);}

/* ---------- TOPBAR ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:50;}
.topbar h1{font-size:16px;font-weight:600;}
.topbar-r{display:flex;align-items:center;gap:16px;}
.topbar-search{position:relative;}
.topbar-search input{border:1px solid var(--line);border-radius:8px;padding:6px 10px 6px 30px;font-size:13px;width:200px;background:#f8fafc;}
.topbar-search input:focus{outline:none;border-color:var(--green);background:#fff;}
.topbar-search .ti{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:15px;}
.user-chip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.topbar-r a.tlink{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.topbar-r a.tlink:hover{color:var(--green);}

.wrap{padding:22px;flex:1;}

/* ---------- PAGE HEADER ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.page-head .h{font-size:20px;font-weight:600;}
.page-head .sub{font-size:12px;color:var(--muted);margin-top:2px;}
.head-actions{display:flex;gap:8px;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:7px 14px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.15s;background:#fff;}
.btn .ti{font-size:16px;}
.btn-green{background:var(--green);color:#fff;} .btn-green:hover{background:var(--green-d);}
.btn-out{background:#fff;border-color:var(--line);color:var(--muted);} .btn-out:hover{background:#f8fafc;border-color:#cbd5e1;}
.btn-sm{padding:4px 10px;font-size:12px;border-radius:6px;}
.btn-danger{color:#dc2626;border-color:#fecaca;background:#fff;} .btn-danger:hover{background:#fee2e2;}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted);} .btn-ghost:hover{background:#f8fafc;}

/* ---------- STAT CARDS ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;border-left:3px solid var(--green);}
.stat.blue{border-left-color:#3b82f6;} .stat.amber{border-left-color:#f59e0b;} .stat.purple{border-left-color:#8b5cf6;}
.stat .lab{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:6px;}
.stat .val{font-size:27px;font-weight:600;line-height:1;}
.stat .meta{font-size:12px;color:var(--muted);margin-top:5px;}

/* ---------- CARD ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px;}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card-h .t{font-size:14px;font-weight:600;}
.card-b{padding:18px;}
.card-b.flush{padding:0;}

/* ---------- TABLE ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:600;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfc;white-space:nowrap;}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover td{background:#fafdfb;}
.tbl .actions{display:flex;gap:5px;flex-wrap:wrap;}
.link{color:var(--green);font-weight:500;} .link:hover{text-decoration:underline;}
.muted{color:var(--muted);} .faint{color:var(--faint);}
.mono{font-variant-numeric:tabular-nums;}
.warn-txt{color:#f59e0b;font-style:italic;font-size:12px;}

/* ---------- BADGES ---------- */
.bdg{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.bdg .dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.bdg-green,.bdg-active,.bdg-delivered,.bdg-available,.bdg-paid{background:#dcfce7;color:#166534;}
.bdg-assigned{background:#dcfce7;color:#166534;}
.bdg-pending{background:#fee2e2;color:#991b1b;}
.bdg-regular,.bdg-invoiced{background:#dbeafe;color:#1e40af;}
.bdg-irregular,.bdg-outofstock,.bdg-pendingstock{background:#fef3c7;color:#92400e;}
.bdg-deleted,.bdg-disabled{background:#f1f5f9;color:#64748b;}
.bdg-archived,.bdg-init{background:#f1f5f9;color:#64748b;}
.bdg-new{background:var(--green);color:#fff;border-radius:4px;font-weight:700;font-size:9px;padding:1px 5px;}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;}
.tab{padding:9px 16px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:500;}
.tab .cnt{display:inline-block;background:#f1f5f9;border-radius:10px;font-size:11px;padding:1px 7px;margin-left:5px;color:var(--muted);}
.tab .cnt.red{background:#fee2e2;color:#991b1b;}
.tab.active .cnt{background:#dcfce7;color:#166534;}

/* ---------- TOOLBAR ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.toolbar-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.inp,.sel{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;background:#fff;color:var(--ink);}
.inp:focus,.sel:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.1);}
.search-box{position:relative;}
.search-box input{padding-left:30px;width:230px;}
.search-box .ti{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:15px;}

/* ---------- FORMS ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.form-grid .full{grid-column:1/-1;}
.fld label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.1);}
.fld .hint{font-size:11px;color:var(--faint);margin-top:4px;}
.form-actions{display:flex;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line2);}

/* ---------- ALERTS ---------- */
.alert{border-radius:10px;padding:11px 15px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:9px;}
.alert .ti{font-size:17px;}
.alert-success{background:#dcfce7;color:#166534;}
.alert-danger{background:#fee2e2;color:#991b1b;}

/* ---------- PAGINATION ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:10px;}
.pages{display:flex;gap:4px;}
.pages a{min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;font-size:12px;color:var(--muted);padding:0 8px;}
.pages a:hover{background:#f8fafc;}
.pages a.active{background:var(--green);color:#fff;border-color:var(--green);}
.pages a.disabled{opacity:.4;pointer-events:none;}

/* empty */
.empty{text-align:center;padding:50px 20px;color:var(--faint);}
.empty .ti{font-size:42px;opacity:.4;display:block;margin-bottom:10px;}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#14532d,#166534 55%,#15803d);padding:20px;}
.login-card{background:#fff;border-radius:18px;padding:38px 34px;width:100%;max-width:390px;box-shadow:0 24px 60px rgba(0,0,0,.22);}
.login-logo{text-align:center;margin-bottom:26px;}
.login-logo .ti{font-size:46px;color:var(--green);}
.login-logo h1{font-size:21px;font-weight:600;margin-top:8px;}
.login-logo p{color:var(--faint);font-size:13px;margin-top:3px;}
.login-card .fld{margin-bottom:15px;}
.login-card .btn{width:100%;justify-content:center;padding:11px;font-size:14px;}
.login-err{background:#fee2e2;color:#991b1b;border-radius:8px;padding:9px 13px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px;}

@media(max-width:820px){.sidebar{width:62px;} .brand span,.nav-grp-label,.nav-item span,.nav-sub,.nav-badge{display:none;} .nav-item{justify-content:center;} .form-grid{grid-template-columns:1fr;}}

/* ===== LABEL SHEET (box labels + dry goods labels) ===== */
.lbl-sheet{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px;}
.lbl{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:7px;min-height:188px;break-inside:avoid;page-break-inside:avoid;overflow:hidden;}
.lbl-box{border-left:4px solid var(--green);}
.lbl-dry{border-left:4px solid #8b5cf6;}
.lbl-top{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line2);padding-bottom:6px;}
.lbl-area{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--forest);line-height:1.1;}
.lbl-area .ti{font-size:16px;}
.lbl-seq{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;}
.lbl-name{font-size:26px;font-weight:600;line-height:1.08;color:var(--ink);}
.lbl-town{font-size:13px;font-weight:400;}
.lbl-box-type{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lbl-chip{display:inline-flex;align-items:center;gap:5px;background:#dcfce7;color:#166534;font-weight:600;font-size:14px;padding:4px 11px;border-radius:7px;}
.lbl-chip .ti{font-size:15px;}
.lbl-chip-warn{background:#fef3c7;color:#92400e;}
.lbl-items{font-size:12px;color:var(--muted);}
.lbl-addr{font-size:13px;line-height:1.4;color:var(--ink);}
.lbl-addr strong{font-weight:600;}
.lbl-phone{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);}
.lbl-phone .ti{font-size:14px;}
.lbl-notes{font-size:12px;line-height:1.35;color:#92400e;background:#fffbeb;border-radius:6px;padding:6px 9px;margin-top:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.lbl-notes-t{font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.4px;margin-right:4px;}
.lbl-dry-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#7c3aed;}
.lbl-dry-h .ti{font-size:14px;}
.lbl-dry-cnt{display:inline-block;background:#ede9fe;color:#6d28d9;border-radius:10px;font-size:11px;padding:1px 7px;margin-left:4px;}
.lbl-dry-bt{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);background:var(--line2);border-radius:6px;padding:2px 8px;}
.lbl-dry-nobox{color:#92400e;background:#fef3c7;}
.lbl-dg-list{list-style:none;display:flex;flex-direction:column;gap:2px;}
.lbl-dg-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.3;padding:2px 0;border-bottom:1px dotted var(--line);}
.lbl-dg-list li:last-child{border-bottom:none;}
.lbl-dg-qty{flex-shrink:0;min-width:38px;text-align:right;font-weight:700;color:var(--forest);}
.lbl-dg-name{flex:1;}
.lbl-dg-check{flex-shrink:0;width:14px;height:14px;border:1.5px solid var(--line);border-radius:3px;margin-top:2px;}
.lbl-sheet.cols-3{grid-template-columns:repeat(3,1fr);}
@media print{
  @page{size:A4;margin:10mm;}
  body{background:#fff;font-size:12px;}
  .sidebar,.topbar,.tabs,.toolbar,.alert,.page-head .head-actions,.btn{display:none !important;}
  .app,.main{display:block;}
  .wrap{padding:0;}
  .page-head{margin-bottom:8px;}
  .page-head .sub{display:block;}
  .lbl-sheet{gap:6mm;}
  .lbl{min-height:0;border:1px solid #cbd5e1;box-shadow:none;break-inside:avoid;page-break-inside:avoid;}
  .lbl-box{border-left:4px solid #16a34a;}
  .lbl-dry{border-left:4px solid #8b5cf6;}
  .lbl-chip,.lbl-chip-warn,.lbl-notes,.lbl-area,.lbl-dg-qty,.lbl-dry-cnt,.lbl-dry-bt{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  a[href]::after{content:"";}
}