/* ── Admin CSS ─────────────────────────────────────────────── */
.admin-body { background:#f0f2f7; }
.admin-layout { display:flex; min-height:100vh; }

.admin-sidebar { width:240px; background:var(--ink); color:#fff; flex-shrink:0; position:fixed; inset-y:0; left:0; display:flex; flex-direction:column; z-index:200; overflow-y:auto; transition:transform .3s; }
.admin-sidebar__logo { padding:1.25rem 1.25rem .75rem; font-family:'Baloo 2',cursive; font-size:1.5rem; font-weight:800; border-bottom:1px solid rgba(255,255,255,.08); }
.admin-sidebar__nav { flex:1; padding:.75rem .75rem; }
.admin-sidebar__nav a,.admin-sidebar__nav button { display:flex; align-items:center; gap:.75rem; width:100%; padding:.625rem 1rem; border-radius:.875rem; font-size:.875rem; font-weight:600; color:rgba(255,255,255,.6); background:none; border:none; cursor:pointer; transition:background .15s,color .15s; margin-bottom:.2rem; text-align:left; text-decoration:none; }
.admin-sidebar__nav a:hover,.admin-sidebar__nav button:hover,.admin-sidebar__nav a.active { background:rgba(255,255,255,.1); color:#fff; }
.nav-group-label { font-size:.65rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.3); padding:.75rem 1rem .25rem; margin-top:.5rem; }
.badge-count { background:var(--blush-deep); color:#fff; border-radius:999px; min-width:1.25rem; height:1.25rem; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; margin-left:auto; padding:0 .35rem; }
.admin-sidebar__footer { padding:.75rem .75rem 1rem; border-top:1px solid rgba(255,255,255,.08); }

.admin-topbar { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.sidebar-toggle { display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--ink); }
.admin-main { margin-left:240px; flex:1; padding:1.5rem 2rem; min-height:100vh; }
.admin-page-title { font-family:'Baloo 2',cursive; font-size:1.75rem; font-weight:800; color:var(--ink); margin-bottom:.15rem; }
.admin-page-sub { font-size:.875rem; color:var(--ink-faint); margin-bottom:1.5rem; }

.kpi-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-bottom:2rem; }
.kpi-card { border-radius:1.5rem; padding:1.25rem; }
.kpi-card__emoji { font-size:1.6rem; margin-bottom:.4rem; }
.kpi-card__value { font-family:'Baloo 2',cursive; font-size:1.6rem; font-weight:800; color:var(--ink); }
.kpi-card__label { font-size:.72rem; font-weight:600; color:var(--ink-soft); margin-top:.1rem; }

.admin-card { background:#fff; border-radius:1.5rem; box-shadow:0 2px 12px -4px rgba(61,58,80,.1); padding:1.5rem; margin-bottom:1.5rem; }
.admin-card h3 { font-family:'Baloo 2',cursive; font-size:1.1rem; font-weight:700; margin-bottom:1rem; }
.admin-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.admin-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }

.img-preview { width:80px; height:80px; border-radius:1rem; object-fit:cover; background:var(--sun-soft); display:flex; align-items:center; justify-content:center; font-size:2rem; overflow:hidden; }
.img-preview img { width:100%; height:100%; object-fit:cover; }
.tint-badge { display:inline-block; width:20px; height:20px; border-radius:999px; vertical-align:middle; margin-right:.5rem; }

.char-counter { font-size:.72rem; color:var(--ink-faint); text-align:right; margin-top:.25rem; }
.seo-preview { background:var(--cream); border:1px solid rgba(61,58,80,.1); border-radius:1rem; padding:1rem 1.25rem; margin-top:.75rem; }
.seo-preview__title { color:#1a0dab; font-size:1rem; font-weight:600; margin-bottom:.15rem; }
.seo-preview__url { color:#006621; font-size:.8rem; margin-bottom:.25rem; }
.seo-preview__desc { color:#545454; font-size:.875rem; line-height:1.4; }

.slide-card { border:2px solid rgba(61,58,80,.1); border-radius:1.5rem; padding:1.25rem; margin-bottom:1rem; background:#fff; }
.slide-card.inactive { opacity:.6; }

@media(max-width:900px){
  .admin-sidebar{transform:translateX(-100%)}
  .admin-sidebar.open{transform:translateX(0)}
  .admin-main{margin-left:0;padding:1rem}
  .sidebar-toggle{display:block}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .admin-grid-2,.admin-grid-3{grid-template-columns:1fr}
}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr 1fr}}

/* ── Admin sidebar fixes ─────────────────────────────────── */
.admin-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.admin-sidebar__nav a {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: .55rem .875rem !important;
  border-radius: .875rem !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.admin-sidebar__nav a span:first-child {
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}
.nav-group-label {
  font-size: .62rem !important;
  letter-spacing: .08em !important;
  padding: .75rem .875rem .25rem !important;
  opacity: .45 !important;
}
.admin-sidebar__logo {
  padding: 1.25rem .875rem 1rem !important;
  font-size: 1.4rem !important;
}
.admin-main {
  margin-left: 220px !important;
}
.badge-count {
  background: var(--blush-deep, #F094B8) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: .6rem !important;
  font-weight: 800 !important;
  padding: .1rem .4rem !important;
  margin-left: auto !important;
}

/* ── Admin sidebar footer ─────────────────────────────────── */
.admin-sidebar__footer {
  padding: .75rem !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.admin-sidebar__footer a,
.admin-sidebar__footer button {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: .5rem .875rem !important;
  border-radius: .875rem !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,.6) !important;
  transition: background .15s !important;
}
.admin-sidebar__footer a:hover,
.admin-sidebar__footer button:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* ── Mobile admin ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-sidebar {
    position: fixed !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform .3s !important;
    z-index: 999 !important;
  }
  .admin-sidebar.open {
    transform: translateX(0) !important;
  }
  .admin-main {
    margin-left: 0 !important;
    padding: 1rem !important;
  }
  .sidebar-toggle {
    display: flex !important;
  }
}

/* ── Sidebar scroll fix ─────────────────────────────────── */
.admin-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 200 !important;
}
.admin-sidebar__logo {
  padding: .875rem 1rem !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
}
.admin-sidebar__nav {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: .5rem 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.15) transparent !important;
}
.admin-sidebar__nav a {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .45rem .875rem !important;
  border-radius: .75rem !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: .05rem .5rem !important;
}
.admin-sidebar__nav a span:first-child {
  font-size: .95rem !important;
  flex-shrink: 0 !important;
  width: 18px !important;
}
.nav-group-label {
  font-size: .58rem !important;
  letter-spacing: .1em !important;
  padding: .625rem .875rem .2rem !important;
  opacity: .4 !important;
}
.admin-sidebar__footer {
  flex-shrink: 0 !important;
  padding: .5rem !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.admin-sidebar__footer a,
.admin-sidebar__footer button {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .4rem .75rem !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  border-radius: .75rem !important;
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,.55) !important;
  cursor: pointer !important;
}
.admin-sidebar__footer a:hover,
.admin-sidebar__footer button:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.admin-main {
  margin-left: 200px !important;
  min-height: 100vh !important;
}
.badge-count {
  background: #F094B8 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  padding: .1rem .35rem !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Mobile sidebar */
@media(max-width:900px) {
  .admin-sidebar {
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
  }
  .admin-sidebar.open {
    transform: translateX(0) !important;
  }
  .admin-main {
    margin-left: 0 !important;
  }
  .sidebar-toggle {
    display: flex !important;
  }
}