/* Admin dashboard — extends tokens from style.css */

body.admin-body{ padding-bottom:0; background:var(--surface-sunk); }

/* ---------- Login screen ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:32px 28px;
  width:100%; max-width:380px; box-shadow:var(--shadow-pop); border:1px solid var(--line);
}
.login-card .brand-mark{ margin:0 auto 16px; }
.login-card h1{ font-size:24px; text-align:center; }
.login-card p.sub{ text-align:center; margin-bottom:24px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-size:14.5px; font-family:var(--font-body); background:var(--surface); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--primary); outline:none; }
.login-hint{ margin-top:16px; padding:10px 12px; background:var(--primary-tint); border-radius:var(--radius-sm); font-size:12.5px; color:var(--primary-dark); }
.login-error{ color:var(--danger); font-size:13px; margin-top:10px; display:none; }

/* ---------- Shell ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:230px; background:var(--primary-dark); color:#fff; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.admin-sidebar .side-brand{ padding:22px 18px 14px; display:flex; align-items:center; gap:10px; }
.admin-sidebar .side-brand .brand-mark{ background:rgba(255,255,255,.15); }
.admin-sidebar .side-brand b{ font-family:var(--font-display); font-size:16px; }
.side-nav{ flex:1; padding:10px; overflow-y:auto; }
.side-nav button{
  width:100%; text-align:left; display:flex; align-items:center; gap:11px;
  padding:11px 12px; border-radius:10px; border:none; background:transparent; color:rgba(255,255,255,.72);
  font-size:14px; font-weight:600; cursor:pointer; margin-bottom:2px;
}
.side-nav button svg{ width:18px; height:18px; flex-shrink:0; }
.side-nav button.active{ background:rgba(255,255,255,.14); color:#fff; }
.side-nav button:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-nav .badge{ margin-left:auto; background:var(--accent); color:#fff; font-size:10.5px; padding:2px 7px; border-radius:999px; font-family:var(--font-mono); }
.side-foot{ padding:14px; border-top:1px solid rgba(255,255,255,.12); }
.side-foot button{ width:100%; }

.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:0; z-index:20;
}
.admin-topbar h1{ font-size:20px; margin:0; }
.admin-topbar .sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.mobile-menu-btn{ display:none; }
.admin-content{ padding:22px 24px 60px; max-width:1180px; }

/* Mobile bottom tab bar (admin) */
.admin-bottom-nav{ display:none; }

@media (max-width:900px){
  .admin-sidebar{ position:fixed; left:0; top:0; bottom:0; z-index:80; transform:translateX(-100%); transition:transform .25s ease; }
  .admin-sidebar.open{ transform:translateX(0); }
  .admin-overlay{ display:none; position:fixed; inset:0; background:rgba(10,20,17,.4); z-index:70; }
  .admin-overlay.show{ display:block; }
  .mobile-menu-btn{ display:flex; }
  .admin-content{ padding:16px 14px 90px; }
}

/* ---------- Cards / grid ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px; box-shadow:var(--shadow-card);
}
.stat-card .lbl{ font-size:12px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px; }
.stat-card .val{ font-family:var(--font-mono); font-weight:600; font-size:24px; color:var(--primary-dark); margin-top:6px; }
.stat-card .delta{ font-size:11.5px; margin-top:4px; color:var(--ok); font-weight:600; }
.stat-card.warn .val{ color:var(--warn); }
.stat-card.danger .val{ color:var(--danger); }
@media (max-width:900px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; box-shadow:var(--shadow-card); margin-bottom:18px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.panel-head h2{ font-size:17px; margin:0; }
.panel-head .actions{ display:flex; gap:8px; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data-table th{
  text-align:left; padding:10px 12px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border-bottom:1.5px solid var(--line); white-space:nowrap;
}
table.data-table td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:var(--surface-sunk); }
.row-actions{ display:flex; gap:6px; }
.icon-action{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);
}
.icon-action:hover{ background:var(--surface-sunk); }
.icon-action svg{ width:14px; height:14px; }
.icon-action.danger{ color:var(--danger); }

.pill{ font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; display:inline-block; }
.pill.ok{ background:#E4F5EC; color:var(--ok); }
.pill.warn{ background:var(--warn-tint); color:var(--warn); }
.pill.danger{ background:var(--danger-tint); color:var(--danger); }
.pill.muted{ background:var(--surface-sunk); color:var(--muted); }

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,20,17,.45); z-index:100; display:none; align-items:flex-end; justify-content:center; }
.modal-overlay.show{ display:flex; }
.modal-card{
  background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0; width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto; padding:22px 22px 26px;
}
@media (min-width:640px){
  .modal-overlay{ align-items:center; }
  .modal-card{ border-radius:var(--radius-lg); }
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-head h2{ margin:0; font-size:18px; }
.modal-close{ background:var(--surface-sunk); border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:18px; color:var(--ink-soft); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid .full{ grid-column:1 / -1; }
.modal-foot{ display:flex; gap:10px; margin-top:18px; }

/* ---------- POS / Billing ---------- */
.pos-layout{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; align-items:flex-start; }
@media (max-width:980px){ .pos-layout{ grid-template-columns:1fr; } }
.pos-pick{ max-height:60vh; overflow-y:auto; }
.pos-item{
  display:flex; justify-content:space-between; align-items:center; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:8px; cursor:pointer;
}
.pos-item:hover{ background:var(--primary-tint); border-color:var(--primary); }
.pos-item .n{ font-weight:700; font-size:13.5px; }
.pos-item .m{ font-size:12px; color:var(--muted); }
.pos-item .p{ font-family:var(--font-mono); font-weight:600; color:var(--primary-dark); }

.cart-line{ display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px dashed var(--line); }
.cart-line .n{ flex:1; font-size:13.5px; font-weight:600; }
.cart-line .qty-ctl{ display:flex; align-items:center; gap:6px; }
.cart-line .qty-ctl button{ width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.cart-line .qty-ctl span{ font-family:var(--font-mono); width:20px; text-align:center; font-size:13px; }
.cart-total{ display:flex; justify-content:space-between; align-items:center; padding-top:12px; font-size:16px; font-weight:700; color:var(--primary-dark); }
.cart-total .amt{ font-family:var(--font-mono); }

.empty-mini{ text-align:center; color:var(--muted); font-size:13px; padding:24px 10px; }

.toast-msg{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-size:13.5px; font-weight:600;
  z-index:200; transition:transform .25s ease; box-shadow:var(--shadow-pop);
}
.toast-msg.show{ transform:translateX(-50%) translateY(0); }