/* =====================================================================
   Local Bee — Admin panel design system
   Palette: ink #1F1B2E · paper #F4F1FB · plum (primary) #7C3AED
            purple-dark #5B21B6 · accent gold #F5A623 · teal #14B8A6
            pink #EC4899 · line #E7E1F5
   ===================================================================== */
:root{
  --ink:#231A3A; --paper:#F6F3FC; --card:#FFFFFF;
  --primary:#7C3AED; --primary-dark:#5B21B6; --primary-light:#EDE4FD;
  --accent:#F5A623; --teal:#14B8A6; --pink:#EC4899;
  --urgent:#E4572E; --muted:#8B84A3; --line:#E9E3F6;
  --radius:16px; --radius-sm:10px;
  --shadow: 0 8px 24px -8px rgba(91,33,182,0.18);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family: var(--font); background: var(--paper); color: var(--ink); }
a{ color: var(--primary); text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- Login ---------- */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background: linear-gradient(160deg, #F3EBFF 0%, #FCEFFB 55%, #FFF6EC 100%);
  padding: 20px;
}
.login-wrap{ width:100%; max-width:380px; position:relative; }
.login-back{
  position:absolute; top:-52px; left:0;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow: var(--shadow);
}
.login-hero{ text-align:center; margin-bottom:22px; }
.login-bee{ font-size:56px; line-height:1; margin-bottom:6px; }
.login-hero h1{ font-size:24px; margin:0 0 4px; color: var(--primary-dark); font-weight:800; }
.login-hero p{ margin:0; color: var(--muted); font-size:14px; }
.login-card{
  background:#fff; padding: 28px 26px; border-radius: 24px; width:100%;
  box-shadow: 0 20px 50px -12px rgba(91,33,182,0.28); border: 1px solid var(--line);
}
.login-card label{ display:block; font-size:13px; font-weight:700; margin-bottom:16px; color: var(--ink); }
.input-icon{ position:relative; margin-top:6px; }
.input-icon span{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color: var(--primary); font-size:15px;
}
.input-icon input{ padding-left:36px; }
.login-card input{ width:100%; margin-top:0; border-radius:12px; }
.hint{ font-size:12px; color:var(--muted); margin-top:16px; text-align:center; }

/* ---------- Top nav shell (replaces sidebar) ---------- */
.admin-shell{ min-height:100vh; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.admin-brand{ display:flex; align-items:center; gap:10px; }
.admin-brand .bee{ font-size:26px; }
.admin-brand-text strong{ display:block; font-size:17px; font-weight:800; color: var(--primary-dark); line-height:1.2; }
.admin-brand-text span{ display:block; font-size:11px; color:var(--muted); }
.admin-user{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); }
.hamburger{ display:none; background:none; border:none; font-size:20px; color:var(--primary-dark); }

.admin-tabs{
  display:flex; gap:6px; padding: 10px 28px; background:#fff;
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
  position: sticky; top: 65px; z-index:19;
}
.admin-tabs::-webkit-scrollbar{ display:none; }
.admin-tabs a{
  flex:0 0 auto; padding:10px 20px; border-radius:12px; font-size:14px; font-weight:700;
  color: var(--muted);
}
.admin-tabs a.active{ background: var(--ink); color:#fff; }
.admin-tabs a:hover:not(.active){ background: var(--primary-light); color: var(--primary-dark); }

.admin-page-head{ padding: 22px 28px 0; }
.admin-page-head h1{ font-size:20px; margin:0; font-weight:800; }

.admin-content{ padding: 20px 28px 40px; max-width: 1080px; margin:0 auto; }

/* ---------- Stat grid (gradient tiles like dashboard) ---------- */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:22px; }
.stat-card{
  border-radius: 20px; padding:20px; color:#fff; position:relative; overflow:hidden;
  min-height:96px; box-shadow: var(--shadow);
}
.stat-card .stat-icon{
  position:absolute; right:16px; top:18px; font-size:22px; opacity:0.85;
}
.stat-card .stat-label{ font-size:13px; opacity:0.92; font-weight:600; color:#fff; }
.stat-card .stat-value{ display:block; font-size:30px; font-weight:800; margin-top:6px; color:#fff; }
.stat-card.grad-purple{ background: linear-gradient(135deg,#A855F7 0%, #7C3AED 100%); }
.stat-card.grad-orange{ background: linear-gradient(135deg,#FBBF24 0%, #F97316 100%); }
.stat-card.grad-teal{   background: linear-gradient(135deg,#2DD4BF 0%, #0D9488 100%); }
.stat-card.grad-pink{   background: linear-gradient(135deg,#FB7185 0%, #DB2777 100%); }

/* ---------- Panels / cards ---------- */
.panel{ background:var(--card); border:1px solid var(--line); border-radius: var(--radius); padding:22px; margin-bottom:20px; box-shadow: 0 4px 16px -8px rgba(35,26,58,0.06); }
.panel h2{ margin:0 0 16px; font-size:16px; font-weight:800; color: var(--primary-dark); }

/* ---------- Recent list (dashboard) ---------- */
.recent-list{ display:flex; flex-direction:column; }
.recent-row{
  display:flex; align-items:center; gap:14px; padding:12px 10px; border-radius:12px;
}
.recent-row:hover{ background: var(--primary-light); }
.recent-row img{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.recent-row .info{ flex:1; min-width:0; }
.recent-row .info strong{ display:block; font-size:14px; color: var(--primary-dark); }
.recent-row .info span{ display:block; font-size:12.5px; color:var(--muted); }
.recent-code{
  font-family: 'Space Mono', monospace; font-size:11px; font-weight:700;
  background: var(--primary-light); color: var(--primary-dark);
  padding:5px 10px; border-radius:999px; white-space:nowrap;
}

.steps{ padding-left:18px; font-size:14px; line-height:1.9; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-grid label{ font-size:13px; font-weight:700; display:flex; flex-direction:column; gap:6px; color:var(--ink); }
.form-grid label.full{ grid-column: 1 / -1; }
.field-hint{ font-weight:400; color:var(--muted); font-size:11px; }
input, select, textarea{
  font-family:inherit; font-size:14px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  width:100%;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--primary); outline-offset:1px; }
textarea{ resize:vertical; }
.form-actions{ grid-column: 1 / -1; display:flex; gap:10px; margin-top:6px; }
.thumb{ margin-top:8px; width:70px; height:70px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }

@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 20px; border-radius:12px; font-weight:700; font-size:13px; border:none; cursor:pointer; }
.btn-primary{ background: linear-gradient(135deg,#8B5CF6,#7C3AED); color:#fff; box-shadow: 0 6px 16px -6px rgba(124,58,237,0.55); }
.btn-primary:hover{ background: var(--primary-dark); }
.btn-ghost{ background: var(--primary-light); color: var(--primary-dark); }
.btn-outline{ background:#fff; color:var(--primary-dark); border:1px solid var(--line); }
.btn-block{ width:100%; }
.btn-sm{ padding:7px 14px; font-size:12px; }
.btn-danger{ background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.btn-danger:hover{ background:#fee2e2; }

/* ---------- Hero slideshow manager ---------- */
.hero-image-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:14px; margin-bottom:20px; }
.hero-image-card{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.hero-image-card img{ width:100%; height:90px; object-fit:cover; display:block; }
.hero-image-card form{ padding:8px; display:flex; justify-content:center; }
.hero-image-card__edit{ flex-direction:column; gap:6px; align-items:stretch !important; border-top:1px solid var(--line); }
.hero-image-card__edit input{ font-size:12px; padding:7px 9px; }
.hero-image-card__edit .btn{ margin-top:2px; }

/* ---------- Store highlight preview grid ---------- */
.highlight-preview-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:16px; margin-bottom:22px; }
.highlight-preview-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.highlight-preview-media{ position:relative; height:110px; background:var(--bg2, #f7f2ea); }
.highlight-preview-media img, .highlight-preview-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.highlight-preview-360{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:30px; }
.highlight-type-tag{
  position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.55); color:#fff; font-size:10.5px;
  font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.02em;
}
.highlight-preview-body{ padding:10px 10px 12px; display:flex; flex-direction:column; gap:8px; }
.highlight-preview-caption{ margin:0; font-size:13px; font-weight:700; color:var(--ink); }
.highlight-preview-btn{ font-size:11.5px; font-weight:700; color:var(--primary-dark, #5B21B6); display:flex; gap:4px; align-items:center; overflow:hidden; }
.highlight-preview-btn .truncate{ max-width:120px; font-weight:500; color:var(--muted); }
.highlight-preview-btn.none{ color:var(--muted); font-weight:500; }
.btn-danger.full{ width:100%; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse: collapse; font-size:13px; }
.data-table th{ text-align:left; padding:12px 10px; border-bottom:2px solid var(--line); color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; }
.data-table td{ padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:none; }
.thumb-sm{ width:40px; height:40px; object-fit:cover; border-radius:8px; }
.thumb-sm.round{ border-radius:50%; }
.truncate{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.title-cell strong{ color: var(--primary-dark); font-weight:700; }
.title-cell span{ display:block; font-size:12px; color:var(--muted); }
.code-pill{
  font-family:'Space Mono', monospace; font-size:11.5px; font-weight:700;
  background: var(--primary-light); color: var(--primary-dark);
  padding:5px 10px; border-radius:999px; display:inline-block;
}
.row-actions{ display:flex; gap:8px; white-space:nowrap; }
.icon-action{
  width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--primary-light); color: var(--primary-dark); font-size:14px; border:none;
}
.icon-action.danger{ background:#FCE4E1; color:#C0392B; }
.icon-action:hover{ filter:brightness(0.95); }
.empty{ text-align:center; color:var(--muted); padding:30px; }

.badge{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; text-transform:capitalize; }
.badge.active{ background:#DCFCE7; color:#16A34A; }
.badge.inactive{ background:#FEE2E2; color:#DC2626; }

/* ---------- Alerts ---------- */
.alert{ padding:12px 16px; border-radius:12px; font-size:13px; margin-bottom:16px; font-weight:600; }
.alert.error{ background:#FDE7E4; color:#A22; }
.alert.success{ background:#DCFCE7; color:#16A34A; }

/* ---------- Search box ---------- */
.search-box{ position:relative; margin-bottom:0; }
.search-box span{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-box input{ padding-left:38px; border-radius:14px; }

/* ---------- Responsive top nav ---------- */
@media (max-width: 860px){
  .hamburger{ display:block; }
  .admin-topbar{ padding:14px 16px; }
  .admin-tabs{
    padding:10px 16px; top:61px;
    display:none; flex-wrap:wrap; position:static;
  }
  .admin-tabs.open{ display:flex; }
  .admin-page-head, .admin-content{ padding-left:16px; padding-right:16px; }
  .stat-grid{ grid-template-columns: repeat(2, 1fr); }
}