/* =========================================================
   Compatibility layer — utility classes used by Laravel
   admin/student forms & tables (kept consistent with the
   Cambridge design system variables). Do not rename the
   classes; they are referenced across Blade views and JS.
   ========================================================= */

/* Legacy variable aliases from the previous design system */
:root {
  --primary: var(--primary-900);
  --gold: var(--gold-600);
  --gold-dark: var(--gold-700);
  --danger: var(--error);
  --border: var(--gray-200);
  --border-opacity: 1;
  --bg-opacity: 0.04;
  --text-secondary: var(--gray-600);
  --text-opacity: 1;
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-6);
  --space-xl: var(--space-10);
  --radius: var(--radius-md);
}

.hidden { display: none !important; }
.mt-lg { margin-top: var(--space-6); }
.mb-lg { margin-bottom: var(--space-6); }
.flex { display: flex; gap: var(--space-4); }
.gap-sm { gap: var(--space-2); }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 1023px) { .grid-2 { grid-template-columns: 1fr; } }

.form-group { margin-bottom: var(--space-5); }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--primary-900); margin-bottom: var(--space-2); }
.form-control {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md); background: var(--white); font-size: 0.95rem;
  transition: var(--transition-fast); font-family: inherit; color: var(--gray-800);
}
.form-control:focus { border-color: var(--gold-600); outline: none; box-shadow: 0 0 0 3px rgba(201,151,26,0.15); }
.form-control.invalid { border-color: var(--error); }
.form-control:disabled, .form-control[readonly] { background: var(--gray-50); color: var(--gray-400); }
textarea.form-control { min-height: 110px; resize: vertical; }
.form-error { display: none; color: var(--error); font-size: 0.8rem; margin-top: var(--space-1); }
.form-group.invalid .form-error, .has-error .form-error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.password-field { position: relative; }
.password-toggle { position: absolute; right: 14px; top: 46px; background: none; border: none; color: var(--gray-400); font-size: 0.78rem; font-weight: 600; cursor: pointer; }

.status-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--success); }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-dot.pending { color: var(--warning); }
.status-dot.inactive { color: var(--gray-400); }

.row-media { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; color: var(--primary-900); }
.row-media img { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; }
.row-media.round img { border-radius: 50%; }

.dash-panel .form-group { margin-bottom: var(--space-5); }
.table-wrap { overflow-x: auto; }

.btn-outline-red { background: transparent; border: 1.5px solid var(--error); color: var(--error); padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.btn-outline-red:hover { background: #FBE7E3; }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

.logo-link { display: inline-block; margin-bottom: var(--space-4); }

/* Learning page lesson list */
.lesson-list { margin-top: var(--space-4); }
.lesson-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-2); transition: var(--transition-fast); }
.lesson-item:hover { background: var(--gray-50); }
.lesson-item.active { background: var(--gold-100); }
.lesson-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-700); }
.player-title { font-size: 1.2rem; }
.progress-label { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--gray-600); margin-bottom: var(--space-2); margin-top: var(--space-5); }

/* Legacy progress bars used by category chart */
.progress-track { height: 8px; }
.hbar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.8s ease; }
.bar { transition: height 0.8s ease; }

/* ---------- Admin table polish ---------- */
.dash-panel > .table-wrap { margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); overflow-x: auto; }
.dash-panel > .table-wrap > .data-table {
  box-shadow: none; border-radius: 0; border-top: 1px solid var(--gray-100); margin: 0; width: 100%; border-collapse: collapse;
}
.data-table thead { background: var(--primary-900); height: 50px; }
.dash-panel > .table-wrap > .data-table th {
  white-space: nowrap; padding: 0 var(--space-5);
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em;
  vertical-align: middle;
}
.dash-panel > .table-wrap > .data-table tbody tr:first-child td {
  border-top: 16px solid var(--white);
}
.dash-panel > .table-wrap > .data-table td { vertical-align: middle; }
.dash-panel > .table-wrap > .data-table td[align] { text-align: left; }
.dash-panel > .table-wrap > .data-table tbody tr { transition: background var(--transition-fast); }
@media (max-width: 1023px) { .dash-panel > .table-wrap { margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); } }

.table-actions { display: flex; align-items: center; gap: var(--space-2); }
.table-actions .icon-btn,
.table-actions button.icon-btn,
.table-actions a.icon-btn {
  width: 34px; height: 34px; min-width: 34px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600);
  padding: 0; cursor: pointer; transition: var(--transition-fast);
}
.table-actions .icon-btn:hover { border-color: var(--primary-700); color: var(--primary-900); background: var(--gray-50); }
.table-actions .icon-btn.danger:hover { border-color: var(--error); color: var(--error); background: #FBE7E3; }
.table-actions .icon-btn svg { width: 16px; height: 16px; }

.data-table .badge { display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.data-table-empty td { text-align: center; color: var(--gray-400); padding: var(--space-10) var(--space-5) !important; }

/* Mobile sidebar toggle inside dashboards */
.sidebar-toggle { display: none; }
@media (max-width: 1023px) {
  .sidebar-toggle { display: inline-flex !important; margin-right: var(--space-3); }
}

/* Auth (admin login) compatibility */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-wrap .auth-media { position: relative; background: var(--primary-900); display: flex; align-items: flex-end; }
.auth-wrap .auth-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.auth-wrap .auth-media-content { position: relative; padding: var(--space-12); }
.auth-wrap .auth-form-side { display: flex; align-items: center; justify-content: center; padding: var(--space-10); background: var(--gray-50); }
.auth-box { width: 100%; max-width: 420px; }
@media (max-width: 1023px) { .auth-wrap { grid-template-columns: 1fr; } .auth-wrap .auth-media { display: none; } }

/* Curriculum builder */
.curriculum-module { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-5); background: var(--gray-50); }
.curriculum-lesson { border: 1px solid var(--gray-200); background: var(--white); border-radius: var(--radius-md); padding: var(--space-4); }

/* Stat cards (legacy admin dashboard layout) */
.stat-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
.stat-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); display: flex; align-items: center; gap: var(--space-4); }
.stat-card .num { font-family: var(--font-heading); font-size: 1.6rem; color: var(--primary-900); line-height: 1; }
.stat-card .label { font-size: 0.8rem; color: var(--gray-600); margin-top: 2px; }
@media (max-width: 1023px) { .stat-cards-grid { grid-template-columns: repeat(2, 1fr); } }

/* Error page */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.error-page h1 { font-size: 5rem; color: var(--gold-600); font-family: var(--font-heading); }