/* ==========================================================================
   Golden Power Security — Admin Panel
   Reuses the public design tokens from style.css, adds layout for the
   sidebar dashboard, data tables, and the login screen.
   ========================================================================== */

body.admin-body, body.admin-login-body{ background: var(--onyx-2); }

/* ---- Login screen -------------------------------------------------------- */
.admin-login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-card{
  width:100%; max-width: 380px; background: var(--slate); border:1px solid var(--steel);
  padding: 40px 32px; text-align:center; color: var(--bone);
}
.login-card .brand-mark{ margin: 0 auto 18px; }
.login-card h1{ font-size:1.4rem; margin-bottom:4px; }
.login-card .form-grid{ text-align:left; margin-top: 22px; }

/* ---- Shell / sidebar ------------------------------------------------------ */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width: 240px; flex: none; background: var(--onyx); color: var(--bone);
  display:flex; flex-direction:column; padding: 24px 18px; position:sticky; top:0; height:100vh;
  border-right: 1px solid var(--steel);
}
.admin-brand{ display:flex; align-items:center; gap:10px; padding-bottom: 22px; border-bottom:1px solid var(--steel); margin-bottom:18px; }
.admin-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.admin-nav a{
  padding: 10px 12px; border-radius: var(--radius); color: var(--bone-dim);
  font-family: var(--font-display); text-transform:uppercase; font-size:.86rem; letter-spacing:.03em;
}
.admin-nav a:hover{ background: rgba(200,155,44,.1); color: var(--gold); }
.admin-nav a.active{ background: var(--gold); color: var(--onyx); }
.admin-sidebar-foot{ border-top:1px solid var(--steel); padding-top:16px; display:grid; gap:10px; }
.admin-view-site{ font-size:.82rem; color: var(--gold); text-align:center; }

.admin-main{ flex:1; background: var(--bone); padding: 36px 40px; min-width:0; }
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 28px; flex-wrap:wrap; gap:14px; }
.admin-topbar h1{ font-size:1.6rem; margin:0; }

/* ---- Dashboard stat cards -------------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:32px; }
.stat-card{ background:#fff; border:1px solid #ddd6c2; padding:20px; }
.stat-card .num{ font-family: var(--font-display); font-size:2rem; color: var(--onyx); }
.stat-card .lbl{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--steel); }

/* ---- Panels / cards -------------------------------------------------------- */
.admin-panel{ background:#fff; border:1px solid #ddd6c2; padding: 24px; margin-bottom: 24px; }
.admin-panel h2{ font-size:1.15rem; margin-bottom:16px; }
.admin-panel .light{ color: var(--onyx); }
.admin-panel label{ color: var(--steel); }
.admin-panel input, .admin-panel select, .admin-panel textarea{
  background:#fff; color: var(--onyx); border:1px solid #cfc7ab;
}
.admin-panel .alert{ color: var(--onyx); }

/* ---- Data table -------------------------------------------------------------- */
.admin-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.admin-table th, .admin-table td{ text-align:left; padding: 12px 10px; border-bottom:1px solid #e6e0cc; vertical-align:top; }
.admin-table th{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--steel); }
.admin-table tr:hover td{ background: rgba(200,155,44,.06); }
.table-wrap{ overflow-x:auto; }

.badge{ display:inline-block; padding:3px 9px; font-size:.72rem; font-family:var(--font-mono); text-transform:uppercase; border-radius:999px; }
.badge-pending{ background:#f3e4c2; color:#7a5a12; }
.badge-contacted{ background:#d8e6ce; color:#3d5c2c; }
.badge-closed{ background:#e2e2e2; color:#555; }
.badge-live{ background:#d8e6ce; color:#3d5c2c; }
.badge-off{ background:#e2e2e2; color:#666; }

.icon-btn{ background:none; border:1px solid #cfc7ab; padding:6px 10px; font-size:.8rem; cursor:pointer; border-radius:3px; color:var(--onyx); }
.icon-btn.danger{ border-color:#c0392b; color:#c0392b; }
.icon-btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--onyx); }
.row-actions{ display:flex; gap:6px; flex-wrap:wrap; }

.operations-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.operations-grid .admin-panel{ margin-bottom:0; }
.badge-high{ background:#f5d7c8; color:#8c351e; }
.badge-critical{ background:#d64c3b; color:#fff; }
.badge-medium{ background:#f3e4c2; color:#7a5a12; }
.badge-low{ background:#d8e6ce; color:#3d5c2c; }

.thumb{ width:60px; height:44px; object-fit:cover; border:1px solid #ddd6c2; }
.form-inline{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

@media (max-width: 900px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ position:relative; width:100%; height:auto; }
  .admin-main{ padding: 24px 18px; }
  .operations-grid{ grid-template-columns:1fr; }
}