/* =========================================================
   NEXORA AI — ADMIN DASHBOARD STYLES
   Reuses the public design tokens from css/style.css
   ========================================================= */

body{ background: var(--bg-0); }

.admin-header{
  position: sticky; top:0; z-index: 500;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft);
}
.admin-header-inner{
  max-width: 1320px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding: 14px 24px;
}
.admin-header-title{
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:16px; color:#fff;
}
.admin-header-title i{ color: var(--cyan); }
.admin-header-actions{ display:flex; align-items:center; gap:14px; }
.admin-security-note{
  font-size:12px; color: var(--text-tertiary);
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--border-soft); border-radius:999px; padding:6px 12px;
}
.admin-security-note i{ color:#4CE8B0; }

.admin-main{ max-width:1320px; margin:0 auto; padding: 28px 24px 80px; }

.admin-status-bar{
  display:flex; align-items:center; gap:10px;
  background: var(--surface); border:1px solid var(--border-soft);
  border-radius: var(--r-md); padding:12px 18px; margin-bottom:22px;
  font-size:13.5px; color: var(--text-secondary);
}
.admin-status-bar.ok{ border-color: rgba(0,200,150,0.35); color:#4CE8B0; }
.admin-status-bar.ok i{ color:#4CE8B0; }
.admin-status-bar.error{ border-color: rgba(255,80,80,0.35); color:#FF8A8A; }
.admin-status-bar.error i{ color:#FF8A8A; }

.admin-stats-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:26px;
}
@media (max-width:900px){ .admin-stats-grid{ grid-template-columns: repeat(2,1fr); } }
.admin-stat-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-lg);
  padding:18px; display:flex; align-items:center; gap:14px;
}
.admin-stat-card i{ font-size:22px; color: var(--cyan); }
.admin-stat-card strong{ display:block; font-size:20px; color:#fff; }
.admin-stat-card span{ font-size:12px; color: var(--text-tertiary); }

.admin-tabs{
  display:flex; gap:10px; margin-bottom:20px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap;
}
.admin-tab{
  background:transparent; border:none; color: var(--text-secondary);
  font-size:14px; font-weight:700; padding:12px 18px; border-bottom:2px solid transparent;
  display:flex; align-items:center; gap:8px; cursor:pointer;
}
.admin-tab.active{ color:#fff; border-bottom-color: var(--cyan); }
.admin-tab:hover{ color:#fff; }

.admin-panel{ display:none; }
.admin-panel.active{ display:block; }

.admin-panel-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px;
}
.admin-panel-head h2{ font-size:20px; color:#fff; font-family: var(--font-en); }

.admin-table-wrap{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-lg);
  overflow-x:auto;
}
.admin-table{ width:100%; border-collapse:collapse; min-width:760px; }
.admin-table th, .admin-table td{
  padding:14px 16px; text-align:right; font-size:13.5px; border-bottom:1px solid var(--border-soft); white-space:nowrap;
}
.admin-table th{ color: var(--text-tertiary); font-weight:700; font-size:12.5px; text-transform:uppercase; }
.admin-table td{ color: var(--text-secondary); }
.admin-table tbody tr:hover{ background: rgba(255,255,255,0.02); }
.admin-table td:last-child, .admin-table th:last-child{ white-space:nowrap; }
.admin-empty-row{ text-align:center !important; padding:40px 20px !important; color: var(--text-tertiary); }

.status-select{
  background: rgba(255,255,255,0.04); border:1px solid var(--border-soft); color:#fff;
  border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.status-select.status-New{ color:#9AB2FF; }
.status-select.status-Paid{ color:#4CE8B0; }
.status-select.status-In.Progress, .status-select.status-InProgress{ color:#FFC069; }
.status-select.status-Completed{ color:#4CE8B0; }
.status-select.status-Cancelled{ color:#FF8A8A; }

.admin-icon-btn{
  background:transparent; border:1px solid var(--border-soft); color: var(--text-secondary);
  border-radius:8px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; margin-inline-start:6px; transition: color .2s, border-color .2s;
}
.admin-icon-btn:hover{ color:#fff; border-color: var(--border-strong); }
.admin-icon-btn.danger:hover{ color:#FF6B7A; border-color:#FF6B7A; }

.badge-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px;
}
.badge-pill.on{ background: rgba(0,200,150,0.1); color:#4CE8B0; border:1px solid rgba(0,200,150,0.3); }
.badge-pill.off{ background: rgba(255,255,255,0.05); color: var(--text-tertiary); border:1px solid var(--border-soft); }

.admin-grid-cards{
  display:grid; grid-template-columns: repeat(3,1fr); gap:18px;
}
@media (max-width:900px){ .admin-grid-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .admin-grid-cards{ grid-template-columns: 1fr; } }

.admin-media-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--r-lg); overflow:hidden;
}
.admin-media-card .thumb{
  width:100%; height:150px; object-fit:cover; background: var(--surface-2);
  display:flex; align-items:center; justify-content:center; color: var(--text-tertiary); font-size:28px;
}
.admin-media-card .body{ padding:16px; }
.admin-media-card h4{ color:#fff; font-size:15px; margin-bottom:6px; }
.admin-media-card p{ font-size:12.5px; color: var(--text-tertiary); margin-bottom:12px; }
.admin-media-card .row{ display:flex; align-items:center; justify-content:space-between; }

.checkbox-row{ margin-bottom:20px; }
.admin-toggle-label{ display:flex; align-items:center; gap:10px; font-size:13.5px; color: var(--text-secondary); cursor:pointer; }
.admin-toggle-label input{ width:18px; height:18px; accent-color: var(--cyan); cursor:pointer; }

/* Admin login gate (client-side UX layer only) */
.admin-login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.admin-login-box{
  width:100%; max-width:420px; background: var(--surface); border:1px solid var(--border-soft);
  border-radius: var(--r-xl); padding:36px 30px; text-align:center;
}
.admin-login-box i.lock-icon{ font-size:38px; color: var(--cyan); margin-bottom:14px; }
.admin-login-box h1{ font-size:20px; color:#fff; margin-bottom:8px; }
.admin-login-box p{ font-size:13px; color: var(--text-tertiary); margin-bottom:22px; line-height:1.7; }