/* ============================================================
   PHONLAB — Components
   Cards, buttons, forms, modals, nav, dropdowns, badges.
   All colours via tokens.css variables.
   ============================================================ */

/* ── Glass Card ──────────────────────────────────────────── */
.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
}

.glass-card--lg {
  border-radius: var(--card-radius-lg);
}

/* ── Activity / Presentation Deck Cards ─────────────────── */
.ph-card {
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast);
  cursor: pointer;
  position: relative;
}

.ph-card:hover {
  border-color: var(--card-hover-border);
  transform: translateY(-2px);
}

.ph-card__image {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  background: var(--card-bg);
  flex-shrink: 0;
}

.ph-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph-card__image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.ph-card__body {
  flex: 1;
  padding: var(--gap-sm) var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.ph-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ph-card__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ph-card__footer {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-xs) var(--gap-md) var(--gap-sm);
  flex-wrap: wrap;
  border-top: 1px solid var(--divider);
  margin-top: auto;
}

.ph-card__badge {
  position: absolute;
  top: var(--gap-sm);
  right: var(--gap-sm);
}

/* Draft overlay */
.ph-card--draft {
  opacity: 0.70;
}

.ph-card--draft .ph-card__image {
  filter: grayscale(0.6);
}

/* Card grid */
.ph-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
  gap: var(--gap-md);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
  line-height: 1.4;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.40;
  cursor: not-allowed;
}

.btn--sm {
  padding: 4px 10px;
  font-size: var(--text-xs);
  border-radius: 6px;
}

.btn--lg {
  padding: 10px 20px;
  font-size: var(--text-md);
}

.btn--ghost {
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-color) !important;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--btn-ghost-hover-bg);
  color: var(--text-primary) !important;
}

.btn--primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-color);
}
.btn--primary:hover:not(:disabled) {
  background: var(--btn-primary-hover);
}

.btn--danger {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-color);
}
.btn--danger:hover:not(:disabled) {
  background: var(--btn-danger-hover);
}

.btn--success {
  background: var(--btn-success-bg);
  border-color: var(--btn-success-border);
  color: var(--btn-success-color);
}
.btn--success:hover:not(:disabled) {
  background: var(--btn-success-hover);
}

.btn--icon {
  padding: 5px 8px;
  border-radius: 7px;
}

/* ── Nav Buttons (header) ────────────────────────────────── */
.nav-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--nav-btn-border);
  background: var(--nav-btn-bg);
  color: var(--nav-btn-color);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}

.nav-btn:hover {
  background: var(--btn-ghost-hover-bg);
  color: var(--text-primary);
}

.nav-btn.active {
  background: var(--nav-btn-active-bg);
  border-color: var(--btn-ghost-border);
  color: var(--nav-btn-active-color);
  font-weight: 600;
}

/* ── Form Controls ───────────────────────────────────────── */
input,
textarea,
select {
  width: 100%;
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  color: var(--input-color);
  font-size: var(--text-md);
  font-family: var(--font-base);
  outline: none;
  transition: border-color var(--t-fast);
  color-scheme: dark;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.10);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

/* Unified select — removes browser default arrow, adds custom */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

/* Select dropdown options inherit dark background */
select option {
  background: #0f1e35;
  color: rgba(255,255,255,0.88);
}

[data-theme="light"] select option {
  background: #ffffff;
  color: rgba(15,23,42,0.88);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-label);
}

.form-row {
  display: flex;
  gap: var(--gap-sm);
  align-items: flex-end;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Input size variants */
input.sm, select.sm, textarea.sm {
  padding: 5px 9px;
  font-size: var(--text-sm);
  border-radius: 6px;
}

/* ── Modal ───────────────────────────────────────────────── */
.ph-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: calc(var(--z-modal) - 1);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gap-lg);
}

.ph-modal-backdrop.open {
  display: flex;
}

.ph-modal {
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--card-radius-lg);
  backdrop-filter: var(--modal-blur);
  -webkit-backdrop-filter: var(--modal-blur);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ph-modal--lg { max-width: 860px; }
.ph-modal--sm { max-width: 420px; }

.ph-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-md) var(--gap-lg);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}

.ph-modal__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.ph-modal__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: color var(--t-fast);
  line-height: 1;
}
.ph-modal__close:hover { color: var(--text-primary); }

.ph-modal__body {
  padding: var(--gap-lg);
  flex: 1;
  overflow-y: auto;
}

.ph-modal__footer {
  padding: var(--gap-md) var(--gap-lg);
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-sm);
  flex-shrink: 0;
}

/* ── Tables ──────────────────────────────────────────────── */
.ph-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ph-table th {
  text-align: left;
  padding: var(--gap-sm) var(--gap-md);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-label);
  border-bottom: 1px solid var(--divider);
}

.ph-table td {
  padding: 10px var(--gap-md);
  border-bottom: 1px solid var(--divider);
  color: var(--text-primary);
  vertical-align: middle;
}

.ph-table tr:hover td {
  background: var(--sidebar-item-hover);
}

.ph-table__muted {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ── Status Badges ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--active   { background: var(--status-active-bg);  color: var(--status-active-color);  border-color: var(--status-active-border); }
.badge--pending  { background: var(--status-pending-bg); color: var(--status-pending-color); border-color: var(--status-pending-border); }
.badge--danger   { background: var(--status-danger-bg);  color: var(--status-danger-color);  border-color: var(--status-danger-border); }
.badge--draft    { background: var(--status-draft-bg);   color: var(--status-draft-color);   border-color: var(--status-draft-border); }

/* ── CEFR Badges ─────────────────────────────────────────── */
.cefr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  color: #fff;
}

.cefr-A1 { background: var(--cefr-a1-bg); border-color: var(--cefr-a1-border); }
.cefr-A2 { background: var(--cefr-a2-bg); border-color: var(--cefr-a2-border); }
.cefr-B1 { background: var(--cefr-b1-bg); border-color: var(--cefr-b1-border); }
.cefr-B2 { background: var(--cefr-b2-bg); border-color: var(--cefr-b2-border); }
.cefr-C1 { background: var(--cefr-c1-bg); border-color: var(--cefr-c1-border); }

/* ── Section Header ──────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--divider);
}

.section-header h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  margin: 0;
}

/* ── Panel Title ─────────────────────────────────────────── */
.panel-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-label);
}

/* ── Divider ─────────────────────────────────────────────── */
.ph-divider {
  border: none;
  border-top: 1px solid var(--divider);
  margin: var(--gap-md) 0;
}

/* ── Empty State ─────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gap-xl) var(--gap-lg);
  text-align: center;
  color: var(--text-muted);
  gap: var(--gap-sm);
}

.empty-state__icon {
  font-size: 36px;
  opacity: 0.4;
}

.empty-state p {
  font-size: var(--text-md);
  max-width: 280px;
  line-height: 1.6;
}

/* ── Loading ─────────────────────────────────────────────── */
.loading {
  padding: var(--gap-xl);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ── Glass Wrapper (login/standalone pages) ──────────────── */
.glass-wrapper {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-lg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
  padding: var(--gap-xl);
}

/* ── Theme Switcher ──────────────────────────────────────── */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.theme-switcher select {
  width: auto;
  padding: 4px 28px 4px 10px;
  font-size: var(--text-xs);
  border-radius: 6px;
}

/* ── Avatar ──────────────────────────────────────────────── */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  color: var(--accent-light);
}

/* ── Timetable Grid ──────────────────────────────────────── */
.tt-grid {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  border: 1px solid var(--divider);
  border-radius: 12px;
  overflow: hidden;
  min-width: 700px;
}

.tt-cell {
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  min-height: 60px;
  position: relative;
}

.tt-cell:last-child { border-right: none; }

.tt-cell--header {
  background: var(--sidebar-bg);
  padding: 6px;
  min-height: auto;
  text-align: center;
}

.tt-day  { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); }
.tt-date { font-size: var(--text-xs); color: var(--text-muted); }

.tt-cell--time {
  background: var(--sidebar-bg);
  padding: 4px 6px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 6px;
}

.tt-event {
  border-radius: 6px;
  padding: 4px 6px;
  margin: 2px;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.tt-event:hover { opacity: 0.80; }

.tt-event__title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-event__meta {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Sidebar Filters (CEFR + category) ──────────────────── */
.sidebar-cefr {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  padding: var(--gap-xs) var(--gap-sm);
}

.sidebar-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--btn-ghost-bg);
  border: 1px solid var(--btn-ghost-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
}

.sidebar-filter:hover { background: var(--btn-ghost-hover-bg); color: var(--text-primary); }
.sidebar-filter.active {
  outline: 2px solid rgba(255,255,255,0.18);
  outline-offset: 2px;
  filter: brightness(1.1);
}

.sidebar-cats {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-xs) var(--gap-sm);
}

.panel-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--btn-ghost-border);
  background: var(--btn-ghost-bg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: center;
  white-space: nowrap;
}

.panel-link:hover { background: var(--btn-ghost-hover-bg); color: var(--text-primary); }
.panel-link.active {
  background: var(--sidebar-item-active-bg);
  border-color: var(--sidebar-item-active-border);
  color: var(--sidebar-item-active-color);
  font-weight: 600;
}

/* ── Preview Canvas ──────────────────────────────────────── */
.preview-frame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.preview-phone {
  width: 260px;
  max-width: 100%;
  border-radius: 18px;
  padding: 8px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.preview-canvas {
  border-radius: 14px;
  height: 420px;
  padding: 8px;
  background: rgba(0,0,0,0.12);
  border: 1px dashed var(--card-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.preview-canvas iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   PHONLAB — Legacy Class Aliases
   Backward compatibility for older PHP/JS files that use
   the original class names. Maps to new token-based system.
   ============================================================ */

/* Layout aliases */
.teacher-layout        { display: flex; position: fixed; top: var(--header-height);
                         left: 0; right: 0; bottom: 0; overflow: hidden; }
.teacher-main          { flex: 1; min-width: 0; height: 100%; overflow-y: auto;
                         overflow-x: hidden; display: flex; flex-direction: column; }
.content-inner         { flex: 1; padding: var(--gap-lg); max-width: var(--content-max-width);
                         width: 100%; }
.activity-sidebar      { width: var(--sidebar-width); flex-shrink: 0; height: 100%;
                         overflow-y: auto; overflow-x: hidden; display: flex;
                         flex-direction: column; background: var(--sidebar-bg);
                         border-right: 1px solid var(--sidebar-border); }
.left-panel-inner      { padding: var(--gap-sm); display: flex; flex-direction: column;
                         gap: var(--gap-sm); }

/* Card aliases */
.phonlab-card,
.activity-card         { width: 100%; min-height: 220px; display: flex;
                         flex-direction: column; background: var(--card-bg);
                         border: 1px solid var(--card-border);
                         border-radius: var(--card-radius);
                         backdrop-filter: var(--card-blur);
                         -webkit-backdrop-filter: var(--card-blur);
                         box-shadow: var(--card-shadow); overflow: hidden;
                         transition: border-color var(--t-fast), transform var(--t-fast); }

.phonlab-card:hover,
.activity-card:hover   { border-color: var(--card-hover-border);
                         transform: translateY(-2px); }

.phonlab-card__image   { position: relative; width: 100%; height: 100px;
                         overflow: hidden; background: var(--card-bg);
                         flex-shrink: 0; }

.phonlab-card__image img { position: absolute; inset: 0; width: 100%; height: 100%;
                           object-fit: cover; }

.phonlab-card__image-placeholder { position: absolute; inset: 0; display: flex;
                                    align-items: center; justify-content: center;
                                    font-size: var(--text-sm); color: var(--text-muted); }

.phonlab-card__level   { position: absolute; top: var(--gap-sm); right: var(--gap-sm); }

.phonlab-card__body,
.phonlab-card__body    { flex: 1; padding: var(--gap-sm) var(--gap-md);
                         display: flex; flex-direction: column; gap: var(--gap-xs); }

.phonlab-card__title   { font-size: var(--text-md); font-weight: 600;
                         color: var(--text-primary); line-height: 1.25; }

.phonlab-card__desc    { font-size: var(--text-sm); color: var(--text-muted);
                         line-height: 1.4; }

.phonlab-card__footer  { display: flex; align-items: center; gap: var(--gap-xs);
                         padding: var(--gap-xs) var(--gap-md) var(--gap-sm);
                         flex-wrap: wrap; border-top: 1px solid var(--divider);
                         margin-top: auto; }

/* Button aliases */
.btn-glass,
.btn-secondary-action  { background: var(--btn-ghost-bg);
                         border: 1px solid var(--btn-ghost-border);
                         color: var(--btn-ghost-color);
                         padding: 4px 10px; border-radius: 6px;
                         font-size: var(--text-xs); cursor: pointer;
                         transition: background var(--t-fast); }

.btn-glass:hover,
.btn-secondary-action:hover { background: var(--btn-ghost-hover-bg);
                               color: var(--text-primary); }

.btn-primary-action    { background: var(--btn-primary-bg);
                         border: 1px solid var(--btn-primary-border);
                         color: var(--btn-primary-color);
                         padding: 4px 10px; border-radius: 6px;
                         font-size: var(--text-xs); cursor: pointer;
                         transition: background var(--t-fast); }

.btn-primary-action:hover { background: var(--btn-primary-hover); }

.btn-danger-action,
.btn-delete-activity   { background: var(--btn-danger-bg);
                         border: 1px solid var(--btn-danger-border);
                         color: var(--btn-danger-color);
                         padding: 4px 10px; border-radius: 6px;
                         font-size: var(--text-xs); cursor: pointer;
                         transition: background var(--t-fast); }

.btn-danger-action:hover,
.btn-delete-activity:hover { background: var(--btn-danger-hover); }

/* Present fullscreen aliases */
.teacher-layout.present-fullscreen .teacher-main { overflow: hidden; }
.teacher-layout.present-fullscreen .content-inner { max-width: none; padding: 0;
                                                    height: 100%; display: flex;
                                                    flex-direction: column; }