/* admin.html reuses style.css for tokens, fonts, nav, buttons, inputs, modals,
   toast, .kicker, .field-label, .msg-input/.dark-field, .ticket-btn. This file
   only adds admin-specific layout: login screen, tables, and the costing form. */

.admin-login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse 700px 500px at 15% 10%, rgba(201,151,107,0.14), transparent 60%),
    radial-gradient(ellipse 600px 500px at 100% 100%, rgba(194,59,90,0.12), transparent 55%),
    linear-gradient(165deg, var(--cocoa) 0%, #1F1116 100%);
}
.admin-login-card{
  width:min(380px, 100%); background:rgba(251,240,238,0.05);
  border:1px solid rgba(251,240,238,0.14); backdrop-filter:blur(6px);
  border-radius:var(--r-xl); padding:38px 32px; box-shadow:var(--shadow-lg);
}
.admin-login-card .logo-sub{ color:var(--butter); }
.admin-login-sub{
  color:rgba(251,240,238,0.65); font-size:0.85rem; text-align:center;
  margin:0 0 24px; line-height:1.5;
}
.admin-login-card .field-label{ color:var(--gold-soft); }
.admin-login-card .dark-field{ background:rgba(251,240,238,0.06); border-color:rgba(251,240,238,0.22); }

/* ---------- dashboard shell ---------- */
.admin-shell{
  display:flex; align-items:flex-start; gap:0;
  max-width:1440px; margin:0 auto; min-height:calc(100vh - 65px);
}
.admin-sidebar{
  width:210px; flex-shrink:0; display:flex; flex-direction:column; gap:4px;
  padding:28px 16px; position:sticky; top:65px; height:calc(100vh - 65px);
  border-right:1px solid var(--line-soft); background:var(--butter);
}
.sidebar-btn{
  display:flex; align-items:center; gap:10px; text-align:left;
  border:none; background:transparent; padding:11px 14px; border-radius:var(--r-md);
  font-size:0.86rem; font-weight:600; color:var(--cocoa-soft);
  transition:background 0.15s, color 0.15s;
}
.sidebar-btn:hover{ background:var(--butter-dim); color:var(--cocoa); }
.sidebar-btn.on{ background:var(--cocoa); color:var(--butter); }
.admin-content{ flex:1; min-width:0; padding:28px 32px 80px; }
.admin-panel-section .admin-section-head:first-child{ margin-top:0; }

@media (max-width:860px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{
    width:100%; height:auto; position:static; flex-direction:row; overflow-x:auto;
    border-right:none; border-bottom:1px solid var(--line-soft); padding:14px 16px;
  }
  .sidebar-btn{ white-space:nowrap; }
  .admin-content{ padding:24px 20px 60px; }
}

.admin-storefront-link{
  font-size:0.82rem; font-weight:600; color:var(--cocoa-soft); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color 0.15s, color 0.15s;
}
.admin-storefront-link:hover{ color:var(--cocoa); border-color:var(--raspberry); }
.admin-username{
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--cocoa-soft);
  background:var(--butter-dim); padding:5px 12px; border-radius:999px;
}

.admin-section{ margin-bottom:52px; }
.admin-section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:20px; flex-wrap:wrap;
}
.admin-section-head h2{ font-size:1.5rem; margin-top:8px; }
.admin-subhead{ font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--cocoa); margin:26px 0 6px; }
.admin-help-text{ font-size:0.8rem; color:var(--cocoa-soft); line-height:1.55; margin:0 0 12px; }

/* ---------- tables ---------- */
.admin-table-wrap{
  background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  overflow-x:auto; box-shadow:var(--shadow-sm);
}
.admin-table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
.admin-table th{
  text-align:left; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cocoa-soft); font-weight:700; padding:14px 16px; border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.admin-table td{ padding:12px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-cell-sub{ font-size:0.74rem; color:var(--cocoa-soft); margin-top:2px; }
.admin-thumb{ width:44px; height:44px; border-radius:10px; object-fit:cover; display:block; }
.admin-row-actions{ display:flex; gap:8px; white-space:nowrap; }
.admin-negative{ color:var(--raspberry-deep); font-weight:700; }
.admin-empty{ text-align:center; color:var(--cocoa-soft); padding:26px !important; font-size:0.85rem; }

/* ---------- forms / panels ---------- */
.admin-panel{
  background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:26px 28px; box-shadow:var(--shadow-sm);
}
.admin-form-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px;
}
.admin-add-ingredient-grid{ margin-top:16px; align-items:end; }
.color-input{
  width:100%; height:44px; border-radius:var(--r-sm); border:1px solid var(--line);
  padding:3px; background:var(--cream); cursor:pointer;
}

/* ---------- costing rows ---------- */
.costing-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.costing-row{
  display:grid; grid-template-columns:1fr 110px auto; gap:10px; align-items:center;
}
@media (max-width:640px){ .costing-row{ grid-template-columns:1fr; } }
.costing-summary{
  margin-top:20px; padding:18px 20px; background:var(--butter-dim);
  border-radius:var(--r-md); border:1px solid var(--line-soft);
}
.costing-summary-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; font-size:0.85rem; color:var(--cocoa-soft);
}
.costing-summary-row.highlight{
  color:var(--cocoa); font-weight:700; font-size:1rem;
  border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
  margin:4px 0; padding:10px 0;
}

/* ---------- custom cost rows ---------- */
.custom-cost-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.custom-cost-row{
  display:grid; grid-template-columns:1fr 160px auto; gap:10px; align-items:center;
}
@media (max-width:640px){ .custom-cost-row{ grid-template-columns:1fr; } }

/* ---------- ops board: staff assignment ---------- */
.ticket-staff{
  margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}

/* ---------- inventory stock cell ---------- */
.admin-stock-cell{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---------- inline table inputs ---------- */
.admin-inline-input{
  font-family:inherit; font-size:0.85rem; border:1px solid transparent; background:transparent;
  padding:6px 8px; border-radius:var(--r-sm); color:var(--ink); width:100%;
  transition:border-color 0.15s, background 0.15s;
}
.admin-inline-input:hover{ border-color:var(--line); }
.admin-inline-input:focus{ border-color:var(--raspberry); background:var(--butter); outline:none; }

/* ---------- order channel badge (ops tickets) ---------- */
.ticket-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.channel-badge{
  flex-shrink:0; color:var(--cream); font-size:0.6rem; font-weight:700;
  letter-spacing:0.03em; padding:3px 8px; border-radius:999px; white-space:nowrap;
}

/* ---------- manual order form ---------- */
.order-item-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.order-item-row{
  display:grid; grid-template-columns:240px 1fr; gap:10px; align-items:center;
}
.order-item-row-fields{ display:flex; gap:10px; flex-wrap:wrap; }
.order-item-row-fields > input{ flex:1; min-width:110px; }
.order-item-qty{ flex:0 0 90px !important; min-width:70px !important; }
@media (max-width:640px){ .order-item-row{ grid-template-columns:1fr; } }

/* ---------- inventory: purchase logging + history ---------- */
.inventory-expand-row td{ background:var(--butter-dim); padding:20px 16px !important; }
.purchase-form{
  background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--r-md);
  padding:18px 20px; box-shadow:var(--shadow-sm);
}
.purchase-history{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.purchase-history-row{
  display:grid; grid-template-columns:110px 90px 130px 110px 1fr; gap:12px; align-items:center;
  padding:7px 2px; font-size:0.8rem; color:var(--cocoa); border-bottom:1px dashed var(--line);
}
.purchase-history-row:last-child{ border-bottom:none; }
@media (max-width:760px){ .purchase-history-row{ grid-template-columns:1fr 1fr; row-gap:2px; } }

/* ---------- reports: time-range filter ---------- */
.range-filter-row{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.range-btn{
  border:1px solid var(--line); background:var(--cream); color:var(--cocoa-soft);
  font-size:0.78rem; font-weight:600; padding:8px 16px; border-radius:999px;
  transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.range-btn:hover{ border-color:var(--cocoa); color:var(--cocoa); }
.range-btn.on{ background:var(--cocoa); color:var(--butter); border-color:var(--cocoa); }

/* ---------- reports: best-sellers bar chart ----------
   Single measure (units sold) → one hue, no legend. 20px track, 4px rounded
   tip / square baseline edge, value rides at the bar's tip, whole row is the
   hover/focus hit target with a tooltip carrying revenue + profit detail. */
.report-bar-chart{ display:flex; flex-direction:column; gap:4px; margin-bottom:32px; }
.report-bar-row{
  display:grid; grid-template-columns:160px 1fr; align-items:center; gap:14px;
  position:relative; padding:7px 10px; border-radius:var(--r-sm);
  transition:background 0.15s;
}
.report-bar-row:hover, .report-bar-row:focus-visible{ background:var(--butter-dim); outline:none; }
.report-bar-label{
  font-size:0.83rem; font-weight:600; color:var(--cocoa);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.report-bar-track{
  position:relative; height:20px; border-radius:4px; background:var(--line-soft);
  display:flex; align-items:center;
}
.report-bar-fill{
  height:100%; background:var(--raspberry); border-radius:0 4px 4px 0;
  flex:0 0 auto; transition:width 0.35s ease;
}
.report-bar-value{
  margin-left:8px; font-family:'IBM Plex Mono',monospace; font-size:0.76rem;
  font-weight:700; color:var(--cocoa); white-space:nowrap;
}
.report-bar-tooltip{
  position:absolute; left:160px; bottom:100%; margin-bottom:6px;
  background:var(--cocoa); color:var(--butter); font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem; padding:6px 10px; border-radius:6px; white-space:nowrap;
  box-shadow:var(--shadow-md); z-index:5;
  opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity 0.15s, transform 0.15s;
}
.report-bar-row:hover .report-bar-tooltip, .report-bar-row:focus-visible .report-bar-tooltip{
  opacity:1; transform:translateY(0);
}
@media (max-width:640px){
  .report-bar-row{ grid-template-columns:110px 1fr; }
  .report-bar-tooltip{ left:110px; }
}