:root{
  --cream:#FAF7F0;
  --card:#FFFFFF;
  --ink:#23302B;
  --muted:#6B7568;
  --teal:#1F6F6B;
  --teal-dark:#164F4C;
  --butter:#E3B23C;
  --clay:#B7472A;
  --clay-bg:#FBEAE4;
  --green:#3F7D53;
  --green-bg:#E9F4EC;
  --border:#E4DFD2;
  --shadow: 0 1px 2px rgba(35,48,43,0.04), 0 4px 16px rgba(35,48,43,0.06);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:'Fraunces',serif; letter-spacing:-0.01em; }
#app{ display:flex; min-height:100vh; }
.loading-screen{ display:flex; align-items:center; justify-content:center; height:100vh; width:100%; color:var(--muted); font-family:'Fraunces',serif; font-size:16px; }

/* ---------- Auth screens ---------- */
.auth-wrap{
  min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center;
  background:var(--cream);
}
.auth-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  padding:36px 34px; width:100%; max-width:380px;
}
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.auth-brand .drop{ color:var(--butter); }
.auth-brand-name{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; }
.auth-card h2{ font-size:19px; margin:0 0 18px 0; }
.auth-error{ background:var(--clay-bg); color:var(--clay); padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:14px; }

/* ---------- Sidebar ---------- */
#sidebar{
  width:224px; flex-shrink:0; background:var(--teal-dark);
  color:#EFEAE0; display:flex; flex-direction:column; padding:20px 14px;
}
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 20px 8px; }
.brand-name{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:#fff; line-height:1.2; }
.brand-sub{ font-size:11px; color:#B9CFCC; }
nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.navbtn{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:#D6E6E4; cursor:pointer; font-size:13.5px; font-weight:500; border:none; background:none;
  text-align:left; width:100%; transition:background .15s;
}
.navbtn:hover{ background:rgba(255,255,255,0.07); }
.navbtn.active{ background:var(--teal); color:#fff; }
.navbtn svg{ flex-shrink:0; opacity:0.9; }
.sidebar-foot{ margin-top:auto; font-size:11px; color:#8FB0AC; padding:8px; }
.sidebar-user{ padding:10px 8px; border-top:1px solid rgba(255,255,255,0.12); margin-top:10px; }
.sidebar-user-name{ font-weight:600; font-size:13px; color:#fff; }
.sidebar-user-role{ font-size:11px; color:#9FC1BD; text-transform:uppercase; letter-spacing:.03em; }
.logout-btn{ margin-top:8px; font-size:12px; color:#F3C7B8; background:none; border:none; cursor:pointer; padding:0; }
.logout-btn:hover{ text-decoration:underline; }

/* ---------- Main ---------- */
#main{ flex:1; padding:28px 32px; max-width:1180px; }
.topbar{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:8px;}
.topbar h1{ font-size:24px; margin:0; font-weight:600; }
.topbar .date{ color:var(--muted); font-size:13px; }

/* ---------- Shift bar ---------- */
.shift-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 16px; margin-bottom:20px;
}
.shift-bar.open{ border-color:var(--green); background:var(--green-bg); }
.shift-bar.closed{ border-color:var(--border); }
.shift-status{ font-size:13px; font-weight:600; }
.shift-status.open{ color:var(--green); }
.shift-status.closed{ color:var(--muted); }

.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:1fr 1fr; }
@media(max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} #app{flex-direction:column;} #sidebar{width:100%; flex-direction:row; align-items:center; overflow-x:auto;} nav{flex-direction:row;} .brand{padding:6px 12px;} .sidebar-foot,.sidebar-user{display:none;} }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px; box-shadow:var(--shadow);
}
.stat-label{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-value{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; margin-top:6px; }
.stat-value.clay{ color:var(--clay); }
.stat-value.green{ color:var(--green); }
.stat-value.teal{ color:var(--teal); }

h2.section-title{ font-size:16px; font-weight:600; margin:28px 0 12px 0; }
h2.section-title:first-child{margin-top:0;}

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:8px 10px; border-bottom:1px solid var(--border); }
td{ padding:10px 10px; border-bottom:1px solid var(--border); }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:#FBFAF6; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:600; }
.tag.debt{ background:var(--clay-bg); color:var(--clay); }
.tag.ok{ background:var(--green-bg); color:var(--green); }
.tag.neutral{ background:#EFEAE0; color:var(--muted); }

button{ font-family:'Inter',sans-serif; cursor:pointer; }
.btn{
  background:var(--teal); color:#fff; border:none; padding:9px 16px; border-radius:8px;
  font-size:13.5px; font-weight:600; transition:background .15s;
}
.btn:hover{ background:var(--teal-dark); }
.btn.secondary{ background:transparent; color:var(--teal); border:1px solid var(--teal); }
.btn.secondary:hover{ background:#EEF6F5; }
.btn.danger{ background:transparent; color:var(--clay); border:1px solid var(--clay); }
.btn.danger:hover{ background:var(--clay-bg); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:5px 10px; font-size:12px; border-radius:6px; }
.btn-block{ width:100%; }

.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}

label{ font-size:12.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:4px; }
input,select,textarea{
  width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--border);
  font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.field{ margin-bottom:12px; }
.row-fields{ display:grid; gap:10px; }
.row-2{ grid-template-columns:1fr 1fr; }
.row-3-eq{ grid-template-columns:1fr 1fr 1fr; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(35,48,43,0.45); display:flex; align-items:flex-start;
  justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;
}
.modal{ background:#fff; border-radius:14px; padding:24px 26px; width:100%; max-width:480px; box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.modal h3{ margin:0 0 16px 0; font-size:18px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

.empty{ text-align:center; padding:36px 20px; color:var(--muted); }
.empty svg{ opacity:0.5; margin-bottom:10px; }

.sale-layout{ display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }
@media(max-width:900px){ .sale-layout{ grid-template-columns:1fr; } }
.product-list{ display:flex; flex-direction:column; gap:6px; max-height:640px; overflow-y:auto; }
.product-pick{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--border); border-radius:9px; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.product-pick:hover{ background:#EEF6F5; border-color:var(--teal); }
.product-pick-name{ font-weight:600; font-size:13.5px; }
.product-pick-stock{ font-size:12.5px; color:var(--green); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cart-product-name{
  padding:9px 11px; border-radius:8px; border:1px solid var(--border); background:#F5F3EC;
  font-weight:600; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cart-price{ font-variant-numeric:tabular-nums; font-weight:500; color:var(--muted); }
.sale-line{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.sale-line-head{ font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.line-total{ font-variant-numeric:tabular-nums; font-weight:600; text-align:right;}
.remove-line{ background:none; border:none; color:var(--clay); font-size:18px; }

.dealer-link{ color:var(--teal); font-weight:600; cursor:pointer; }
.dealer-link:hover{ text-decoration:underline; }
.muted-sm{ font-size:12px; color:var(--muted); }

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--ink); color:#fff; padding:11px 18px;
  border-radius:8px; font-size:13px; box-shadow:var(--shadow); z-index:100; opacity:0; transform:translateY(8px);
  transition:all .25s;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.err{ background:var(--clay); }