/* Admin Panel Theme Overrides to match OneCreed site (yaqeen.css) */
:root {
  --primary-dark: #0f1419;
  --secondary-dark: #1a1f26;
  --tertiary-dark: #242b33;
  --quaternary-dark: #2d3540;
  /* Map any legacy gold usage to green to avoid yellow accents */
  --gold: #2d6b52; /* primary green */
  --gold-light: #14a085; /* light green */
  --gold-dark: #0a5d61; /* dark green */
  --text-primary: #ffffff;
  --text-secondary: #b8c2cc;
  --text-muted: #7d8590;
  --islamic-green: #0d7377;
  --islamic-green-light: #14a085;
  --islamic-green-dark: #0a5d61;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

/* Use Inter like the rest of the site */
body {
  font-family: "Inter", sans-serif;
  background: var(--primary-dark);
  color: var(--text-primary);
}

/* Header + user info */
.admin-header {
  background: var(--secondary-dark) !important;
  border-bottom: 1px solid var(--tertiary-dark) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

#page-title,
.admin-header h1 {
  color: var(--text-primary) !important;
}

.admin-username {
  color: var(--text-secondary) !important;
}
.admin-avatar {
  color: var(--islamic-green-light) !important;
}

/* Sidebar */
.admin-sidebar {
  background: linear-gradient(
    135deg,
    var(--secondary-dark),
    var(--tertiary-dark)
  ) !important;
  color: var(--text-primary) !important;
}

.admin-logo h2 {
  color: var(--gold) !important;
}

.admin-nav .nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
  border-left-color: transparent !important;
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link.active {
  background: rgba(20, 160, 133, 0.15) !important;
  color: var(--islamic-green-light) !important;
  border-left-color: var(--islamic-green-light) !important;
}

.approval-badge {
  background: #ef4444 !important;
}

/* Main background */
.admin-main {
  background: var(--primary-dark) !important;
}
.admin-content {
  color: var(--text-primary) !important;
}

/* Cards & tables */
.stat-card,
.dashboard-charts,
.category-card,
.approval-card,
.modal,
.modal .modal-header,
.modal .modal-body,
.content-table-container,
.users-table-container,
.available-item,
.spotlight-slot {
  background: var(--secondary-dark) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--tertiary-dark) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.stat-info p,
.activity-details p,
.category-description,
.item-excerpt,
.content-stats,
.approval-card-meta {
  color: var(--text-secondary) !important;
}

.stat-info h3,
.section-header h2,
.chart-container h3,
.category-name,
.item-title,
.content-title {
  color: var(--text-primary) !important;
}

/* Buttons consistent with site */
.btn.btn-primary,
.login-btn {
  background: linear-gradient(
    135deg,
    var(--islamic-green),
    var(--islamic-green-light)
  ) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn.btn-primary:hover,
.login-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(20, 160, 133, 0.3) !important;
}

.btn.btn-secondary {
  border: 2px solid var(--islamic-green-light) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}
.btn.btn-secondary:hover {
  background: var(--islamic-green-light) !important;
  color: #0f1419 !important;
}

.btn.btn-success {
  background: linear-gradient(
    135deg,
    var(--islamic-green),
    var(--islamic-green-light)
  ) !important;
  color: #fff !important;
  border: none !important;
}
/* Avoid yellow for warning; use teal tone */
.btn.btn-warning {
  background: linear-gradient(135deg, #0ea5a6, #0d9488) !important;
  color: #ffffff !important;
  border: none !important;
}
.btn.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: none !important;
}

/* Inputs */
.form-group input,
.form-group select,
.form-group textarea,
.search-input,
.filter-select,
.search-box input {
  background: var(--tertiary-dark) !important;
  border: 1px solid var(--quaternary-dark) !important;
  color: var(--text-primary) !important;
}

.form-group input::placeholder,
.search-input::placeholder {
  color: var(--text-muted) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-box input:focus {
  outline: none !important;
  border-color: var(--islamic-green-light) !important;
  box-shadow: 0 0 0 3px rgba(20, 160, 133, 0.2) !important;
}

/* Tables */
.admin-table th {
  background: var(--tertiary-dark) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--quaternary-dark) !important;
}
.admin-table td {
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--tertiary-dark) !important;
}
.admin-table tbody tr:hover {
  background: var(--tertiary-dark) !important;
}

/* Status badges */
.status-published,
.status-active {
  background: rgba(20, 160, 133, 0.15) !important;
  color: var(--islamic-green-light) !important;
}
.status-draft {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
}
.status-inactive {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

/* Spotlight accents */
.slot-position {
  background: linear-gradient(
    135deg,
    var(--islamic-green),
    var(--islamic-green-light)
  ) !important;
  color: #ffffff !important;
}
.slot-header h4 i {
  color: var(--islamic-green-light) !important;
}

/* Modal overlay and spinner */
.modal-overlay {
  background: rgba(15, 20, 25, 0.75) !important;
}
.loading-overlay {
  background: rgba(0, 0, 0, 0.35) !important;
}
.spinner {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-top-color: var(--islamic-green-light) !important;
}

/* Login overlay */
.login-overlay {
  background: linear-gradient(
    135deg,
    var(--secondary-dark),
    var(--tertiary-dark)
  ) !important;
}
.login-header h2 {
  color: var(--text-primary) !important;
}
.login-header h2 i {
  color: var(--islamic-green-light) !important;
}
.login-header p {
  color: var(--text-secondary) !important;
}

/* Links and subtle labels */
label,
.pending-count,
.approval-card-type,
.content-type,
.content-type.article,
.content-type.video,
.content-type.audio {
  color: var(--text-secondary) !important;
}

/* Keep radii consistent */
.stat-card,
.approval-card,
.available-item,
.spotlight-slot,
.modal,
.login-form-container,
.admin-table,
.content-table-container,
.users-table-container {
  border-radius: var(--radius-md) !important;
}

/* Section headers gradient text like site */
.section-header h2 {
  background: linear-gradient(
    135deg,
    var(--text-primary),
    var(--islamic-green-light)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}