/* ============================================================
   admin.css — GoodVizes admin panel only
   Not shared with the customer-facing site.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --a-gold:#DAA520;
  --a-gold-dark:#B8860B;
  --a-ink:#1a1a1a;
  --a-bg:#F5F5F3;
  --a-card:#ffffff;
  --a-border:#e6e6e6;
  --a-muted:#8a8a8a;
  --a-danger:#C0392B;
  --a-sidebar:#1a1a1a;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:'Noto Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--a-bg);
  color:var(--a-ink);
}

/* -------- login screen -------- */
.admin-login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.admin-login-card{
  width:100%; max-width:360px; background:var(--a-card);
  border:1px solid var(--a-border); border-radius:16px; padding:28px;
}
.admin-login-card .brand{
  font-weight:800; font-size:1.1rem; margin-bottom:2px;
}
.admin-login-card .brand span{ color:var(--a-gold-dark); }
.admin-login-card p.sub{ color:var(--a-muted); font-size:.82rem; margin:0 0 20px; }

.a-field{ margin-bottom:14px; }
.a-field label{ display:block; font-size:.78rem; font-weight:700; margin-bottom:6px; }
.a-field input{
  width:100%; padding:11px 12px; border:1px solid var(--a-border);
  border-radius:9px; font-size:.9rem;
}
.a-field input:focus{ outline:2px solid var(--a-gold); border-color:var(--a-gold); }

.a-btn{
  width:100%; padding:12px; border:none; border-radius:10px;
  background:var(--a-ink); color:#fff; font-weight:700; font-size:.9rem;
  cursor:pointer;
}
.a-btn:hover{ background:var(--a-gold-dark); }
.a-btn.gold{ background:var(--a-gold); color:#1a1a1a; }
.a-btn.gold:hover{ background:var(--a-gold-dark); color:#fff; }
.a-btn:disabled{ background:#ddd; color:#999; cursor:not-allowed; }

.a-error{ color:var(--a-danger); font-size:.8rem; margin:-4px 0 12px; display:none; }
.a-error.show{ display:block; }

/* -------- shell layout -------- */
.admin-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width:200px; background:var(--a-sidebar); color:#fff;
  padding:20px 14px; flex-shrink:0;
}
.admin-sidebar .brand{ font-weight:800; padding:0 10px 22px; font-size:1.05rem; }
.admin-sidebar .brand span{ color:var(--a-gold); }
.admin-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:9px; margin-bottom:4px;
  color:#cfcfcf; font-size:.85rem; font-weight:600; cursor:pointer;
}
.admin-nav-item:hover{ background:#2a2a2a; }
.admin-nav-item.active{ background:var(--a-gold); color:#1a1a1a; }
.admin-nav-item.logout{ margin-top:20px; color:#e08a80; }

.admin-main{ flex:1; padding:24px 28px; overflow-x:auto; display:block; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.admin-topbar h1{ font-size:1.2rem; margin:0; }
.admin-topbar .who{ font-size:.8rem; color:var(--a-muted); display:flex; align-items:center; gap:10px; cursor:pointer; }

/* -------- topbar profile pic -------- */
.a-profile-pic{
  width:32px; height:32px; border-radius:50%; overflow:hidden;
  background:#e2e2e2; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--a-border); flex-shrink:0;
}
.a-profile-pic img{ width:100%; height:100%; object-fit:cover; display:block; }

/* -------- profile edit avatar (shared shape w/ shop avatar-upload) -------- */
.a-avatar-block{ display:flex; flex-direction:column; align-items:center; margin-bottom:18px; }
.a-avatar-upload{ position:relative; width:88px; height:88px; }
.a-avatar-photo{
  width:100%; height:100%; border-radius:50%;
  background:#eee; overflow:hidden; border:2px solid var(--a-border);
}
.a-avatar-upload img{ width:100%; height:100%; object-fit:cover; display:block; }
.a-avatar-upload .a-avatar-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#bbb;
}
.a-avatar-edit-btn{
  position:absolute; bottom:-2px; right:-2px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  background:var(--a-gold); color:#1a1a1a; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.a-avatar-edit-btn svg{ width:13px; height:13px; }
.a-avatar-upload input[type="file"]{ display:none; }

/* topbar avatar also needs the circular mask */
.a-profile-pic{ overflow:hidden; }

/* mobile */
.admin-mobile-toggle{ display:none; }
@media (max-width:800px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{
    width:100%; display:flex; align-items:center; gap:4px;
    padding:12px; overflow-x:auto;
  }
  .admin-sidebar .brand{ display:none; }
  .admin-nav-item{ white-space:nowrap; margin-bottom:0; }
  .admin-nav-item.logout{ margin-top:0; margin-left:auto; }
  .admin-main{ padding:18px; }
}

/* -------- stat cards -------- */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card{ background:var(--a-card); border:1px solid var(--a-border); border-radius:14px; padding:16px; }
.stat-card .label{ font-size:.75rem; color:var(--a-muted); font-weight:600; }
.stat-card .value{ font-size:1.4rem; font-weight:800; margin-top:4px; }

/* -------- panels / tables -------- */
.a-panel{ background:var(--a-card); border:1px solid var(--a-border); border-radius:14px; padding:18px; margin-bottom:20px; }
.a-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.a-panel-head h2{ font-size:1rem; margin:0; }

.a-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.a-table th{ text-align:left; padding:9px 8px; color:var(--a-muted); font-size:.72rem; text-transform:uppercase; border-bottom:1px solid var(--a-border); }
.a-table td{ padding:10px 8px; border-bottom:1px solid var(--a-border); vertical-align:middle; }
.a-table img{ width:36px; height:36px; border-radius:8px; object-fit:cover; background:#f0f0f0; }
.a-table tr:last-child td{ border-bottom:none; }

.a-badge{ font-size:.68rem; font-weight:800; padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.a-badge.pending{ background:#FFF3CD; color:#8a6d00; }
.a-badge.processing{ background:#DDEBFF; color:#1652A6; }
.a-badge.completed{ background:#DEF7E4; color:#1E7D34; }
.a-badge.cancelled{ background:#FBE0DE; color:#C0392B; }
.a-badge.active{ background:#DEF7E4; color:#1E7D34; }
.a-badge.inactive{ background:#eee; color:#888; }

.a-status-select{ font-size:.78rem; padding:5px 7px; border-radius:7px; border:1px solid var(--a-border); }

.a-icon-btn{
  border:none; background:transparent; cursor:pointer;
  color:var(--a-muted); padding:5px; border-radius:6px;
}
.a-icon-btn:hover{ background:#f2f2f2; color:var(--a-ink); }
.a-icon-btn.danger:hover{ color:var(--a-danger); }

/* -------- modal -------- */
.a-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center; padding:16px; z-index:50;
}
.a-modal-overlay.show{ display:flex; }
.a-modal{ width:100%; max-width:420px; background:#fff; border-radius:16px; padding:22px; max-height:90vh; overflow-y:auto; }
.a-modal h2{ margin:0 0 16px; font-size:1.05rem; }

.a-field{ margin-bottom:12px; }
.a-field textarea{ width:100%; padding:11px 12px; border:1px solid var(--a-border); border-radius:9px; font-size:.88rem; font-family:inherit; resize:vertical; min-height:70px; }
.a-field select{ width:100%; padding:11px 12px; border:1px solid var(--a-border); border-radius:9px; font-size:.88rem; }

.a-modal-actions{ display:flex; gap:10px; margin-top:16px; }
.a-modal-actions .a-btn{ flex:1; }

.empty-row td{ text-align:center; color:var(--a-muted); padding:30px 0; }

/* -------- inline delivery estimate input (orders table) -------- */
.eta-input{
  width:120px; font-size:.78rem; padding:6px 7px;
  border:1px solid var(--a-border); border-radius:7px;
}

/* -------- settings view (payout / bank details) -------- */
.settings-form .a-field{ max-width:420px; }
.settings-note{ color:var(--a-muted); font-size:.8rem; margin-bottom:16px; }
.settings-saved{ color:#1E7D34; font-size:.82rem; margin:-4px 0 12px; display:none; }
.settings-saved.show{ display:block; }


.auth-page{min-height:100vh;background:var(--a-bg)}
.auth-switch{margin:18px 0 0;text-align:center;color:var(--a-muted);font-size:.8rem}.auth-switch button{border:0;background:none;color:var(--a-gold-dark);font:inherit;font-weight:700;cursor:pointer;padding:0}.auth-switch button:hover{text-decoration:underline}
.admin-page-loader{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:24px 28px;background:var(--a-bg)}.admin-loader-card{width:100%;max-width:1200px}.skeleton{position:relative;overflow:hidden;background:#e8e8e8;border-radius:8px}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:skeleton-shimmer 1.25s infinite}@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}.skeleton-title{width:180px;height:26px;margin-bottom:9px}.skeleton-subtitle{width:280px;height:14px;margin-bottom:24px}.skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-bottom:22px}.skeleton-stat{height:94px;border-radius:14px;border:1px solid var(--a-border)}.skeleton-panel{height:330px;border-radius:14px;border:1px solid var(--a-border)}.stat-card.is-loading .label,.stat-card.is-loading .value{display:flex;align-items:center}.skeleton-text{display:inline-block;height:12px;width:90px}.skeleton-text.short{width:70px}.skeleton-text.value{width:82px;height:24px;margin-top:4px}@media(max-width:800px){.admin-page-loader{padding:18px}.skeleton-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}}

/* -------- store hours settings -------- */
.store-hours-panel .a-panel-head{
  align-items:flex-start;
  gap:18px;
}
.store-hours-panel .a-panel-head h2{margin-bottom:5px}
.store-hours-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,260px));
  gap:16px;
  margin-top:4px;
}
.store-hours-grid input[type="time"]{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--a-border);
  border-radius:9px;
  background:#fff;
  color:var(--a-text);
  font:inherit;
}
.store-status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:999px;
  background:#eaf7ee;
  color:#1e7d34;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.store-status-badge:before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:#1e9b45;
}
.store-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 16px;
  cursor:pointer;
  user-select:none;
}
.store-toggle input{position:absolute;opacity:0;pointer-events:none}
.store-toggle-ui{
  width:44px;height:24px;border-radius:20px;
  background:#cfd4da;position:relative;flex:none;
  transition:.2s ease;
}
.store-toggle-ui:after{
  content:"";position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:.2s ease;
}
.store-toggle input:checked + .store-toggle-ui{background:var(--a-gold)}
.store-toggle input:checked + .store-toggle-ui:after{transform:translateX(20px)}
.store-toggle strong{display:block;font-size:.88rem}
.store-toggle small{display:block;color:var(--a-muted);font-size:.76rem;margin-top:2px}
.settings-saved.show{display:block}
@media (max-width:600px){
  .store-hours-grid{grid-template-columns:1fr}
  .store-hours-panel .a-panel-head{flex-direction:column}
}