/* ==========================================================================
   Zenith Nutra Products — admin panel stylesheet
   ========================================================================== */

:root {
  --a-navy:#0A1424;
  --a-navy-800:#0F1E36;
  --a-navy-700:#172C4B;
  --a-gold:#C19A4B;
  --a-gold-light:#D4AF6A;
  --a-brown:#55381C;
  --a-bg:#F4F5F7;
  --a-card:#FFFFFF;
  --a-border:#E2E5EA;
  --a-ink:#141C28;
  --a-body:#414A57;
  --a-muted:#77818F;
  --a-danger:#B4442F;
  --a-green:#2C7A45;
  --a-radius:4px;
  --a-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --a-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

*,*::before,*::after { box-sizing:border-box; }

body.admin {
  margin:0; font-family:var(--a-sans); font-size:15px; line-height:1.6;
  color:var(--a-body); background:var(--a-bg); -webkit-font-smoothing:antialiased;
}

a { color:var(--a-brown); text-decoration:none; }
a:hover { color:var(--a-gold); }
h1,h2,h3 { color:var(--a-ink); margin:0 0 .6em; line-height:1.25; }
h1 { font-size:1.6rem; font-weight:650; }
h2 { font-size:1.02rem; font-weight:650; }
p { margin:0 0 1em; }
code { font-family:var(--a-mono); font-size:.86em; background:#EEF0F3; padding:1px 5px; border-radius:3px; }
.muted { color:var(--a-muted); }
.nowrap { white-space:nowrap; }
.inline { display:inline; }
:focus-visible { outline:2px solid var(--a-gold); outline-offset:2px; }

/* ---------- Login ---------- */
.admin-login-body {
  display:grid; place-items:center; min-height:100vh; padding:24px;
  background:radial-gradient(ellipse at 20% 10%, #55381C33 0%, transparent 55%),
             linear-gradient(160deg,#0A1424,#070E1A 60%,#241809);
}
.login-card {
  background:#fff; border-radius:6px; padding:44px 40px;
  width:100%; max-width:420px; box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.login-mark {
  width:52px; height:52px; margin:0 auto 1.2rem; border-radius:50%;
  border:1.5px solid var(--a-gold); display:grid; place-items:center;
  font-family:Georgia,serif; font-size:1.5rem; font-weight:700; color:var(--a-gold);
  background:linear-gradient(140deg,#0F1E36,#241809);
}
.login-card h1 { text-align:center; font-size:1.3rem; margin-bottom:.2em; }
.login-sub { text-align:center; color:var(--a-muted); font-size:.85rem; margin-bottom:1.8rem; }
.login-foot { text-align:center; margin:1.5rem 0 0; font-size:.85rem; }

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

.admin-sidebar {
  width:238px; flex-shrink:0; background:var(--a-navy); color:#B9C5D8;
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:50;
}
.admin-brand {
  display:flex; align-items:center; gap:11px; padding:20px 20px;
  border-bottom:1px solid rgba(255,255,255,.08); color:#fff;
}
.admin-brand .brand-mark {
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--a-gold);
  display:grid; place-items:center; font-family:Georgia,serif; font-weight:700;
  color:var(--a-gold-light); background:linear-gradient(140deg,#0F1E36,#241809); flex-shrink:0;
}
.admin-brand span span,.admin-brand strong { display:block; }
.admin-brand strong { font-size:1rem; color:#F5F1E9; }
.admin-brand small { font-size:.68rem; color:var(--a-gold); letter-spacing:.1em; text-transform:uppercase; }

.admin-nav { flex:1; padding:14px 10px; overflow-y:auto; }
.admin-nav a {
  display:flex; align-items:center; gap:10px; padding:9px 13px; margin-bottom:2px;
  border-radius:var(--a-radius); color:#B9C5D8; font-size:.9rem; transition:background 150ms,color 150ms;
}
.admin-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.admin-nav a.active { background:rgba(193,154,75,.16); color:var(--a-gold-light); font-weight:600; }
.admin-nav .ico { width:18px; text-align:center; opacity:.85; }
.admin-nav .pill {
  margin-left:auto; background:var(--a-gold); color:var(--a-navy);
  font-size:.7rem; font-weight:700; padding:1px 7px; border-radius:100px;
}

.admin-side-foot { padding:14px 20px 20px; border-top:1px solid rgba(255,255,255,.08); font-size:.84rem; }
.admin-side-foot a { display:block; color:#8A99AF; padding:4px 0; }
.admin-side-foot a:hover { color:var(--a-gold-light); }

.admin-main { flex:1; margin-left:238px; display:flex; flex-direction:column; min-width:0; }

.admin-top {
  background:#fff; border-bottom:1px solid var(--a-border);
  padding:0 28px; height:58px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:40;
}
.admin-top-title { font-weight:650; color:var(--a-ink); }
.admin-top-right { margin-left:auto; font-size:.85rem; color:var(--a-muted); }
.admin-menu-btn {
  display:none; background:none; border:1px solid var(--a-border);
  border-radius:var(--a-radius); font-size:1.1rem; padding:5px 11px; cursor:pointer; color:var(--a-ink);
}

.admin-content { padding:26px 28px 60px; max-width:1400px; width:100%; }

.page-head { display:flex; align-items:center; gap:16px; margin-bottom:1.4rem; flex-wrap:wrap; }
.page-head h1 { margin:0; }
.page-head > *:nth-child(2) { margin-left:auto; }
.count-pill {
  font-size:.8rem; background:var(--a-border); color:var(--a-muted);
  padding:2px 10px; border-radius:100px; vertical-align:middle; font-weight:600;
}

/* ---------- Panels ---------- */
.panel-box {
  background:var(--a-card); border:1px solid var(--a-border);
  border-radius:var(--a-radius); padding:22px 24px; margin-bottom:20px;
}
.panel-box > h2 {
  padding-bottom:.6rem; border-bottom:1px solid var(--a-border); margin-bottom:1.1rem;
}
.sticky-save { position:sticky; bottom:16px; box-shadow:0 6px 24px rgba(10,20,36,.14); }

.form-cols { display:grid; grid-template-columns:1fr 330px; gap:20px; align-items:start; }

/* ---------- Stats ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
.stat {
  background:#fff; border:1px solid var(--a-border); border-radius:var(--a-radius);
  padding:18px 20px; display:block; transition:all 150ms;
}
.stat:hover { border-color:var(--a-gold); box-shadow:0 3px 12px rgba(10,20,36,.07); }
.stat strong { display:block; font-size:1.85rem; color:var(--a-ink); line-height:1.1; font-weight:650; }
.stat span { font-size:.79rem; color:var(--a-muted); letter-spacing:.03em; }
.stat-alert { border-color:var(--a-gold); background:#FFFDF7; }
.stat-alert strong { color:var(--a-brown); }

/* ---------- Tables ---------- */
.admin-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.admin-table th,.admin-table td { padding:11px 12px; text-align:left; border-bottom:1px solid var(--a-border); vertical-align:middle; }
.admin-table thead th {
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--a-muted); font-weight:700; border-bottom:2px solid var(--a-border);
}
.admin-table tbody tr:hover { background:#FAFBFC; }
.admin-table tbody tr:last-child td { border-bottom:0; }
.admin-table.compact th,.admin-table.compact td { padding:8px 10px; font-size:.86rem; }
.admin-table.compact th { color:var(--a-muted); font-weight:600; width:40%; }
.row-unread { background:#FFFDF5; }
.row-unread td:first-child { box-shadow:inset 3px 0 0 var(--a-gold); }
.table-group {
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--a-gold); font-weight:700; background:#FAFBFC; padding-top:14px !important;
}
.thumb { width:44px; height:44px; object-fit:cover; border-radius:3px; border:1px solid var(--a-border); background:var(--a-navy); }

.dot {
  display:inline-block; width:9px; height:9px; border-radius:50%;
  border:1.5px solid #C9CFD8; margin-right:4px;
}
.dot-on { background:var(--a-green); border-color:var(--a-green); }

/* ---------- Badges ---------- */
.badge {
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  padding:2px 8px; border-radius:3px; text-transform:uppercase;
}
.badge-green { background:#E6F4EA; color:var(--a-green); }
.badge-gray  { background:#EDEFF2; color:var(--a-muted); }
.badge-gold  { background:#FBF3E2; color:var(--a-brown); }

/* ---------- Forms ---------- */
.field { display:flex; flex-direction:column; margin-bottom:15px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px; }
label {
  font-size:.76rem; font-weight:650; letter-spacing:.04em;
  color:var(--a-ink); margin-bottom:6px;
}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],select,textarea {
  font-family:var(--a-sans); font-size:.92rem; color:var(--a-ink);
  padding:9px 12px; border:1px solid #CFD5DE; border-radius:var(--a-radius);
  background:#fff; width:100%; transition:border-color 150ms,box-shadow 150ms;
}
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--a-gold); box-shadow:0 0 0 3px rgba(193,154,75,.16);
}
textarea { resize:vertical; line-height:1.6; }
textarea.mono { font-family:var(--a-mono); font-size:.84rem; line-height:1.65; }
input[type=file] { font-size:.86rem; padding:7px; background:#FAFBFC; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2377818F' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.hint { font-size:.78rem; color:var(--a-muted); margin-top:5px; line-height:1.5; }
.check { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:400; color:var(--a-body); margin-bottom:8px; text-transform:none; letter-spacing:0; }
.check input { width:auto; }

.img-preview {
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--a-radius);
  border:1px solid var(--a-border); background:var(--a-navy); margin-bottom:10px; display:block;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; font-family:var(--a-sans); font-size:.85rem; font-weight:600;
  padding:9px 18px; border:1px solid transparent; border-radius:var(--a-radius);
  cursor:pointer; transition:all 150ms; text-align:center; line-height:1.4;
}
.btn-primary { background:var(--a-gold); color:var(--a-navy); border-color:var(--a-gold); }
.btn-primary:hover { background:var(--a-gold-light); color:var(--a-navy); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-ghost { background:#fff; color:var(--a-body); border-color:#CFD5DE; }
.btn-ghost:hover { border-color:var(--a-gold); color:var(--a-brown); }
.btn-danger { background:#fff; color:var(--a-danger); border-color:#E8CDC7; }
.btn-danger:hover { background:var(--a-danger); color:#fff; border-color:var(--a-danger); }
.btn-sm { padding:5px 11px; font-size:.78rem; }
.btn-block { display:block; width:100%; }
.btn + .btn { margin-left:6px; }

/* ---------- Flash ---------- */
.flash { padding:12px 16px; border-radius:var(--a-radius); margin-bottom:18px; font-size:.9rem; border:1px solid; }
.flash-success { background:#EDF7EF; border-color:#C3E0CA; color:#25623A; }
.flash-error { background:#FCF0ED; border-color:#EBCCC6; color:#8F3526; }

/* ---------- Tabs ---------- */
.tab-row { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--a-border); flex-wrap:wrap; }
.tab { padding:9px 16px; font-size:.87rem; color:var(--a-muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--a-ink); }
.tab.active { color:var(--a-brown); border-bottom-color:var(--a-gold); font-weight:650; }

/* ---------- Misc ---------- */
.message-body { white-space:pre-wrap; font-size:.95rem; line-height:1.75; color:var(--a-ink); }
.tick-list { list-style:none; padding:0; margin:0; font-size:.86rem; }
.tick-list li { padding-left:22px; position:relative; margin-bottom:.6em; line-height:1.55; }
.tick-list li::before { content:'✓'; position:absolute; left:0; color:var(--a-green); font-weight:700; }

.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.media-item { margin:0; border:1px solid var(--a-border); border-radius:var(--a-radius); overflow:hidden; background:#fff; }
.media-item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--a-navy); }
.media-item figcaption { padding:10px; font-size:.8rem; }
.media-item strong { display:block; margin-bottom:6px; color:var(--a-ink); font-size:.82rem; }
.copy-url { font-family:var(--a-mono); font-size:.72rem; padding:5px 7px; margin-bottom:6px; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .form-cols { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .admin-sidebar { transform:translateX(-100%); transition:transform 200ms; }
  .admin-sidebar.open { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.4); }
  .admin-main { margin-left:0; }
  .admin-menu-btn { display:block; }
  .admin-content { padding:20px 16px 50px; }
  .admin-top { padding:0 16px; }
  .admin-top-right { display:none; }
  .grid-2 { grid-template-columns:1fr; }
  .admin-table { display:block; overflow-x:auto; white-space:nowrap; }
}