/* ─── Admin Sections ─── */
.admin-section { display: none; }
.admin-section.active { display: block; animation: fadeIn 0.2s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.course-badge-sm {
  display: inline-block;
  background: var(--gold, #FFD700);
  color: #1a202c;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Admin Card ─── */
.admin-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.admin-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

/* ─── Toolbar ─── */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.admin-toolbar h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.admin-input {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.admin-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ─── Table ─── */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th {
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  background: var(--bg);
  border-bottom: 1px solid var(--card-border);
}

.admin-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-primary);
}

.admin-table tr:last-child td { border-bottom: none; }

.admin-table tr:hover td { background: rgba(0,0,0,0.015); }

/* ─── Role Badge ─── */
.role-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--primary-glow);
  color: var(--primary);
}

.role-badge.role-admin {
  background: var(--gold-light);
  color: #B8860B;
}

.role-badge.role-student {
  background: var(--primary-glow);
  color: var(--primary);
}

/* ─── Sidebar Group Header ─── */
.sidebar-group-header {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 0.75rem 0.75rem 0.25rem;
  pointer-events: none;
  opacity: 0.6;
}

/* ─── Creator Studio Tabs ─── */
.cstab { flex:1; padding:10px 16px; border:none; font-size:0.82rem; font-weight:500; cursor:pointer; font-family:inherit; transition:all 0.15s; background:transparent; color:var(--text-secondary); }
.cstab:hover { background:rgba(0,102,204,0.04); }
.cstab.active { background:var(--primary); color:#fff; font-weight:600; }

/* ─── Creator Form Inputs ─── */
.cs-input {
  padding:10px 12px;
  border:1px solid var(--card-border);
  border-radius:6px;
  font-size:14px;
  font-family:inherit;
  background:var(--bg);
  color:var(--text-primary);
  outline:none;
  transition:border-color 0.15s;
  width:100%;
}
.cs-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }

/* ─── Empty State ─── */
.admin-empty {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-tertiary);
  font-size: 0.88rem;
}

/* ─── Button Overrides ─── */
.btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; border-radius: var(--radius-pill); border: none; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--bg); color: var(--text-primary); border: 1px solid var(--card-border); }
.btn-secondary:hover { background: var(--primary-glow); border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.btn-primary-sm { background: var(--primary); color: white; border: none; border-radius: var(--radius-pill); padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; }
.btn-primary-sm:hover { background: var(--primary-dark); }
.btn-secondary-sm { background: var(--bg); color: var(--text-primary); border: 1px solid var(--card-border); border-radius: var(--radius-pill); padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; }
.btn-secondary-sm:hover { background: var(--primary-glow); border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--error); color: white; border: none; border-radius: var(--radius-pill); padding: 0.35rem 0.75rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-danger:hover { background: #c0392b; }