/* ============================================================
   PPWI Admin Panel — Stylesheet
   ============================================================ */

:root {
  --admin-navy:   #1A2A4A;
  --admin-blue:   #2C4A8A;
  --admin-gold:   #C9901A;
  --admin-green:  #2E7D32;
  --admin-red:    #C62828;
  --admin-teal:   #00695C;
  --admin-bg:     #F4F6FA;
  --admin-card:   #FFFFFF;
  --admin-border: #E2E8F0;
  --admin-text:   #1A2440;
  --admin-muted:  #64748B;
  --admin-sidebar-w: 240px;
  --admin-topbar-h:  60px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; }
body { font-family:'Lato',sans-serif; background:var(--admin-bg); color:var(--admin-text); }

/* ─── LOGIN PAGE ─────────────────────────────────────────── */
.admin-login-body {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0D1B35,#1A2A4A);
}
.login-wrap { width:100%; max-width:420px; padding:1.5rem; }
.login-box {
  background:#fff; border-top:4px solid #C9901A;
  padding:2.5rem; box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.login-logo { text-align:center; margin-bottom:2rem; }
.login-logo img { width:70px; height:70px; object-fit:contain; border-radius:50%; margin:0 auto 0.8rem; }
.login-logo h1 { font-family:'Playfair Display',serif; font-size:1.5rem; color:#1A2A4A; }
.login-tagline { font-family:'Dancing Script',cursive; font-size:1rem; color:#C9901A; margin-top:0.2rem; }
.login-form .field-group { margin-bottom:1rem; }
.login-form label { font-size:0.65rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#64748B; display:block; margin-bottom:0.35rem; }
.login-form input { width:100%; border:1.5px solid #E2E8F0; padding:11px 14px; font-size:0.9rem; font-family:inherit; border-radius:4px; outline:none; transition:border-color 0.2s; }
.login-form input:focus { border-color:#C9901A; }
.btn-login { width:100%; background:#1A2A4A; color:#fff; border:none; padding:14px; font-size:0.8rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; cursor:pointer; border-radius:4px; margin-top:0.5rem; transition:background 0.2s; }
.btn-login:hover { background:#C9901A; }

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

.admin-sidebar {
  width:var(--admin-sidebar-w); flex-shrink:0;
  background:var(--admin-navy); color:#fff;
  display:flex; flex-direction:column; position:fixed;
  top:0; left:0; bottom:0; z-index:200; overflow-y:auto;
  transition:transform 0.3s;
}
.sidebar-logo {
  display:flex; align-items:center; gap:0.8rem;
  padding:1.2rem 1.2rem; border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
}
.sidebar-logo img { height:40px; width:auto; max-width:130px; object-fit:contain; border-radius:0; filter:brightness(0) invert(1) sepia(0.3) saturate(0.8) brightness(1.3); }
.sidebar-logo strong { display:block; font-size:0.85rem; color:#fff; }
.sidebar-logo span { font-size:0.68rem; color:rgba(255,255,255,0.4); }

.sidebar-nav { flex:1; padding:1rem 0; }
.nav-section-label { font-size:0.58rem; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:rgba(255,255,255,0.5); padding:1rem 1.2rem 0.4rem; }
.nav-item {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.65rem 1.2rem; font-size:0.82rem;
  color:rgba(255,255,255,0.6); text-decoration:none;
  transition:all 0.2s; position:relative;
}
.nav-item:hover { color:#fff; background:rgba(255,255,255,0.06); }
.nav-item.active { color:#fff; background:rgba(201,144,26,0.2); border-right:3px solid var(--admin-gold); }
.nav-icon { font-size:0.95rem; flex-shrink:0; width:20px; text-align:center; }
.nav-badge {
  margin-left:auto; background:#E53935; color:#fff;
  font-size:0.6rem; font-weight:700; padding:1px 7px;
  border-radius:50px; min-width:18px; text-align:center;
}
.nav-item-logout:hover { background:rgba(230,0,0,0.1); color:#ff8a80; }

.sidebar-footer { padding:1rem 1.2rem; border-top:1px solid rgba(255,255,255,0.08); }
.sidebar-user { display:flex; align-items:center; gap:0.7rem; }
.su-avatar { width:34px; height:34px; border-radius:50%; background:var(--admin-gold); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:700; font-size:0.9rem; color:var(--admin-navy); flex-shrink:0; }
.su-name { font-size:0.8rem; color:#fff; font-weight:700; }
.su-role { font-size:0.65rem; color:rgba(255,255,255,0.4); text-transform:capitalize; }

.admin-main { flex:1; margin-left:var(--admin-sidebar-w); display:flex; flex-direction:column; min-width:0; }

.admin-topbar {
  position:sticky; top:0; z-index:100;
  height:var(--admin-topbar-h); background:#fff;
  border-bottom:1px solid var(--admin-border);
  display:flex; align-items:center; gap:1rem; padding:0 1.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.sidebar-toggle { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--admin-muted); display:none; }
.topbar-title { font-size:0.95rem; font-weight:700; color:var(--admin-text); flex:1; }
.topbar-actions { display:flex; gap:1rem; }
.topbar-link { font-size:0.75rem; font-weight:700; color:var(--admin-muted); text-decoration:none; transition:color 0.2s; }
.topbar-link:hover { color:var(--admin-navy); }

.admin-content { flex:1; padding:1.5rem; }

/* ─── PAGE HEADER ────────────────────────────────────────── */
.admin-page-header { margin-bottom:1.5rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.admin-page-title { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; color:var(--admin-text); }
.admin-page-sub { font-size:0.82rem; color:var(--admin-muted); margin-top:0.2rem; }
.admin-page-actions { display:flex; gap:0.6rem; flex-wrap:wrap; }

/* ─── STATS CARDS ────────────────────────────────────────── */
.stats-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card {
  background:#fff; border-radius:6px; padding:1.3rem;
  border-left:4px solid #ddd; box-shadow:0 1px 4px rgba(0,0,0,0.06);
  position:relative; transition:transform 0.2s;
}
.stat-card:hover { transform:translateY(-2px); }
.stat-card.blue  { border-left-color:#1565C0; }
.stat-card.gold  { border-left-color:var(--admin-gold); }
.stat-card.green { border-left-color:var(--admin-green); }
.stat-card.navy  { border-left-color:var(--admin-navy); }
.stat-card.red   { border-left-color:var(--admin-red); }
.stat-card.teal  { border-left-color:var(--admin-teal); }
.stat-card-icon  { font-size:1.4rem; margin-bottom:0.5rem; }
.stat-card-num   { font-family:'Playfair Display',serif; font-size:2rem; font-weight:800; color:var(--admin-text); line-height:1; }
.stat-card-lbl   { font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--admin-muted); margin-top:0.25rem; }
.stat-card-badge { display:inline-block; background:#E53935; color:#fff; font-size:0.6rem; font-weight:700; padding:2px 8px; border-radius:50px; margin-top:0.5rem; }

/* ─── QUICK ACTIONS ──────────────────────────────────────── */
.quick-actions { background:#fff; border-radius:6px; padding:1.3rem; margin-bottom:1.5rem; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.quick-actions h3 { font-size:0.75rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--admin-muted); margin-bottom:1rem; }
.qa-grid { display:flex; flex-wrap:wrap; gap:0.6rem; }
.qa-btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--admin-bg); color:var(--admin-text);
  font-size:0.75rem; font-weight:700; padding:8px 16px;
  border-radius:4px; text-decoration:none; border:1px solid var(--admin-border);
  transition:all 0.2s;
}
.qa-btn:hover { background:var(--admin-navy); color:#fff; border-color:var(--admin-navy); }
.qa-btn .badge { background:#E53935; color:#fff; font-size:0.58rem; padding:1px 6px; border-radius:50px; margin-left:0.2rem; }

/* ─── DASH COLS ──────────────────────────────────────────── */
.dash-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.dash-card { background:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.05); overflow:hidden; }
.dash-card-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.3rem; border-bottom:1px solid var(--admin-border); }
.dash-card-header h3 { font-size:0.85rem; font-weight:700; color:var(--admin-text); }
.dash-card-header a { font-size:0.72rem; color:var(--admin-gold); font-weight:700; text-decoration:none; }
.dash-list-item { display:flex; align-items:flex-start; gap:0.8rem; padding:0.9rem 1.3rem; border-bottom:1px solid var(--admin-border); transition:background 0.2s; position:relative; }
.dash-list-item:last-child { border-bottom:none; }
.dash-list-item:hover { background:var(--admin-bg); }
.dash-list-item.unread { background:#FFF8F0; }
.dli-avatar { width:32px; height:32px; border-radius:50%; background:#1A2A4A; color:var(--admin-gold); font-family:'Playfair Display',serif; font-size:0.85rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.dli-name { font-size:0.82rem; font-weight:700; color:var(--admin-text); }
.dli-loc { font-size:0.7rem; color:var(--admin-muted); font-weight:400; }
.dli-text { font-size:0.78rem; color:var(--admin-muted); line-height:1.5; margin-top:0.15rem; }
.dli-meta { font-size:0.68rem; color:#aaa; margin-top:0.2rem; }
.unread-dot { width:8px; height:8px; border-radius:50%; background:#E53935; flex-shrink:0; margin-top:4px; }
.dli-actions { display:flex; gap:0.5rem; }
.dli-btn-approve { font-size:0.65rem; font-weight:700; background:#E8F5E9; color:#2E7D32; padding:3px 10px; border-radius:50px; text-decoration:none; }
.dli-btn-delete  { font-size:0.65rem; font-weight:700; background:#FFEBEE; color:#C62828; padding:3px 10px; border-radius:50px; text-decoration:none; }

/* ─── TABLES ─────────────────────────────────────────────── */
.admin-table-wrap { background:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.05); overflow:hidden; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { font-size:0.65rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--admin-muted); padding:0.9rem 1.2rem; background:var(--admin-bg); border-bottom:1px solid var(--admin-border); text-align:left; }
.admin-table td { padding:0.85rem 1.2rem; border-bottom:1px solid var(--admin-border); font-size:0.82rem; color:var(--admin-text); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:#FFF8F0; }
.tbl-actions { display:flex; gap:0.4rem; }
.btn-tbl { font-size:0.65rem; font-weight:700; padding:4px 12px; border-radius:4px; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; }
.btn-tbl-edit   { background:#E3F2FD; color:#1565C0; }
.btn-tbl-delete { background:#FFEBEE; color:#C62828; }
.btn-tbl-approve{ background:#E8F5E9; color:#2E7D32; }
.btn-tbl-view   { background:var(--admin-bg); color:var(--admin-text); border:1px solid var(--admin-border); }

/* ─── FORMS ──────────────────────────────────────────────── */
.admin-form-card { background:#fff; border-radius:6px; padding:2rem; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.form-section-title { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; color:var(--admin-text); padding-bottom:0.8rem; margin-bottom:1.5rem; border-bottom:1px solid var(--admin-border); }
.admin-form .field-group { margin-bottom:1.2rem; }
.admin-form label { display:block; font-size:0.65rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--admin-muted); margin-bottom:0.35rem; }
.admin-form input[type=text],
.admin-form input[type=email],
.admin-form input[type=url],
.admin-form input[type=date],
.admin-form select,
.admin-form textarea {
  width:100%; border:1.5px solid var(--admin-border); padding:10px 14px;
  font-size:0.88rem; font-family:inherit; color:var(--admin-text);
  background:#fff; border-radius:4px; outline:none; transition:border-color 0.2s;
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus { border-color:var(--admin-gold); }
.admin-form textarea { resize:vertical; min-height:120px; }
.admin-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.admin-form .form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.admin-form .hint { font-size:0.7rem; color:var(--admin-muted); margin-top:0.25rem; }
.toggle-wrap { display:flex; align-items:center; gap:0.7rem; }
.toggle { position:relative; width:42px; height:22px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#cbd5e1; border-radius:22px; transition:0.3s; cursor:pointer; }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:0.3s; }
.toggle input:checked + .toggle-slider { background:var(--admin-gold); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn-admin { display:inline-flex; align-items:center; gap:0.4rem; font-family:inherit; font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:10px 20px; border-radius:4px; border:none; cursor:pointer; text-decoration:none; transition:all 0.2s; }
.btn-admin-navy  { background:var(--admin-navy);  color:#fff; }
.btn-admin-navy:hover  { background:#263B6A; }
.btn-admin-gold  { background:var(--admin-gold);  color:#fff; }
.btn-admin-gold:hover  { background:#DBA832; }
.btn-admin-red   { background:var(--admin-red);   color:#fff; }
.btn-admin-ghost { background:#fff; color:var(--admin-text); border:1px solid var(--admin-border); }
.btn-admin-ghost:hover { background:var(--admin-bg); }
.btn-admin-sm { padding:7px 14px; font-size:0.68rem; }

/* ─── ALERTS ─────────────────────────────────────────────── */
.alert { padding:0.9rem 1.2rem; border-radius:4px; font-size:0.85rem; margin-bottom:1.2rem; display:flex; align-items:center; gap:0.7rem; }
.alert-success { background:#E8F5E9; color:#2E7D32; border-left:3px solid #2E7D32; }
.alert-error   { background:#FFEBEE; color:#C62828; border-left:3px solid #C62828; }
.alert-info    { background:#E3F2FD; color:#1565C0; border-left:3px solid #1565C0; }

/* ─── BADGES ─────────────────────────────────────────────── */
.badge-status { display:inline-block; font-size:0.62rem; font-weight:700; padding:2px 8px; border-radius:50px; }
.badge-published { background:#E8F5E9; color:#2E7D32; }
.badge-draft     { background:#FFF3E0; color:#E65100; }
.badge-pending   { background:#FFF9C4; color:#F57F17; }
.badge-approved  { background:#E8F5E9; color:#2E7D32; }

/* ─── FILTER BAR ─────────────────────────────────────────── */
.filter-bar { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; margin-bottom:1.2rem; }
.filter-bar input[type=search] { border:1.5px solid var(--admin-border); padding:8px 14px; font-size:0.82rem; font-family:inherit; border-radius:4px; outline:none; min-width:240px; }
.filter-bar input:focus { border-color:var(--admin-gold); }
.filter-bar select { border:1.5px solid var(--admin-border); padding:8px 12px; font-size:0.82rem; font-family:inherit; border-radius:4px; outline:none; }

/* ─── PAGINATION ─────────────────────────────────────────── */
.pagination { display:flex; gap:0.3rem; justify-content:center; margin-top:1.5rem; }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:4px; font-size:0.8rem; font-weight:700; border:1px solid var(--admin-border); color:var(--admin-muted); text-decoration:none; transition:all 0.2s; }
.pagination a:hover { background:var(--admin-navy); color:#fff; border-color:var(--admin-navy); }
.pagination .current { background:var(--admin-gold); color:#fff; border-color:var(--admin-gold); }

/* ─── MEDIA LIBRARY ──────────────────────────────────────── */
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; }
.media-item { border:1.5px solid var(--admin-border); border-radius:6px; overflow:hidden; cursor:pointer; transition:all 0.2s; }
.media-item:hover { border-color:var(--admin-gold); box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.media-thumb { height:100px; background:var(--admin-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.media-thumb img { width:100%; height:100%; object-fit:cover; }
.media-thumb .media-icon { font-size:2rem; }
.media-name { font-size:0.68rem; color:var(--admin-muted); padding:0.5rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

/* ─── SETTINGS PAGE ──────────────────────────────────────── */
.settings-tabs { display:flex; gap:0; border-bottom:1px solid var(--admin-border); margin-bottom:1.5rem; }
.settings-tab { font-size:0.75rem; font-weight:700; padding:10px 20px; color:var(--admin-muted); cursor:pointer; border-bottom:2px solid transparent; text-decoration:none; transition:all 0.2s; }
.settings-tab:hover,.settings-tab.active { color:var(--admin-navy); border-bottom-color:var(--admin-gold); }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:900px) {
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); }
  .admin-main { margin-left:0; }
  .sidebar-toggle { display:block; }
  .dash-cols { grid-template-columns:1fr; }
  .admin-form .form-row,.admin-form .form-row-3 { grid-template-columns:1fr; }
}

/* ─── Admin Login Logo ──────────────────────────────────────── */
.admin-login-logo {
    height: 80px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: block;
    margin: 0 auto 0.5rem;
    /* No filter needed — navy transparent logo reads well on white login card */
}