/* =====================================================
   PHONLAB DASHBOARD — LOCKED LAYOUT
   DO NOT CENTER CONTENT ANYWHERE ELSE
===================================================== */

:root {
  --header-height: 50px;
  --header-gutter: 0px;

  --sidebar-width: 140px;
  --right-sidebar-width: 160px;

  --dashboard-max-width: 960px;

  --z-header: 1000;
  --z-panel: 900;
  --z-content: 1;
  --z-modal: 1055;

  /* ── Theme tokens ── */
  --theme-bg:            linear-gradient(135deg, #080d18 0%, #0f1e35 100%);
  --theme-header-bg:     linear-gradient(180deg, rgba(10,20,35,0.98), rgba(10,20,35,0.95));
  --theme-header-border: rgba(255,255,255,0.08);
  --theme-sidebar-bg:    rgba(255,255,255,0.04);
  --theme-sidebar-border:rgba(255,255,255,0.07);
  --theme-card-bg:       rgba(255,255,255,0.06);
  --theme-card-border:   rgba(255,255,255,0.10);
  --theme-card-blur:     blur(14px);
  --theme-text-primary:  rgba(255,255,255,0.92);
  --theme-text-muted:    rgba(255,255,255,0.45);
  --theme-text-faint:    rgba(255,255,255,0.25);
  --theme-input-bg:      rgba(255,255,255,0.06);
  --theme-input-border:  rgba(255,255,255,0.12);
  --theme-nav-btn-bg:    rgba(255,255,255,0.06);
  --theme-nav-btn-border:rgba(255,255,255,0.14);
  --theme-accent:        rgba(14,144,163,1);
  --theme-accent-soft:   rgba(14,144,163,0.18);
}

body.theme-soft-dark {
  --theme-bg:            linear-gradient(135deg, #161416 0%, #1e1a1e 100%);
  --theme-header-bg:     linear-gradient(180deg, rgba(20,18,20,0.98), rgba(22,20,22,0.95));
  --theme-header-border: rgba(255,255,255,0.06);
  --theme-sidebar-bg:    rgba(255,255,255,0.03);
  --theme-sidebar-border:rgba(255,255,255,0.06);
  --theme-card-bg:       rgba(255,255,255,0.05);
  --theme-card-border:   rgba(255,255,255,0.09);
  --theme-card-blur:     blur(12px);
  --theme-text-primary:  rgba(255,248,240,0.90);
  --theme-text-muted:    rgba(255,248,240,0.45);
  --theme-text-faint:    rgba(255,248,240,0.22);
  --theme-input-bg:      rgba(255,255,255,0.05);
  --theme-input-border:  rgba(255,255,255,0.10);
  --theme-nav-btn-bg:    rgba(255,255,255,0.05);
  --theme-nav-btn-border:rgba(255,255,255,0.12);
  --theme-accent:        rgba(180,120,60,1);
  --theme-accent-soft:   rgba(180,120,60,0.18);
}

body.theme-light {
  --theme-bg:            linear-gradient(135deg, #eef2f7 0%, #e4eaf4 100%);
  --theme-header-bg:     linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,248,252,0.95));
  --theme-header-border: rgba(0,0,0,0.08);
  --theme-sidebar-bg:    rgba(0,0,0,0.03);
  --theme-sidebar-border:rgba(0,0,0,0.07);
  --theme-card-bg:       rgba(255,255,255,0.75);
  --theme-card-border:   rgba(0,0,0,0.08);
  --theme-card-blur:     blur(14px);
  --theme-text-primary:  rgba(20,30,50,0.92);
  --theme-text-muted:    rgba(20,30,50,0.50);
  --theme-text-faint:    rgba(20,30,50,0.28);
  --theme-input-bg:      rgba(255,255,255,0.80);
  --theme-input-border:  rgba(0,0,0,0.14);
  --theme-nav-btn-bg:    rgba(0,0,0,0.05);
  --theme-nav-btn-border:rgba(0,0,0,0.14);
  --theme-accent:        rgba(14,144,163,1);
  --theme-accent-soft:   rgba(14,144,163,0.12);
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--theme-bg);
  color: var(--theme-text-primary);
}

#appHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background: var(--theme-header-bg);
  border-bottom: 1px solid var(--theme-header-border);
  z-index: var(--z-header);
}

.dashboard-frame {
  margin-left: var(--sidebar-width);
  margin-right: var(--right-sidebar-width);
  max-width: var(--dashboard-max-width);
  width: 100%;
}

/* dashboard-header-inner is no longer used — layout handled directly in dashboard_header.php */
.dashboard-header-inner {
  display: contents;
}

.teacher-layout {
  /* Override components.css which sets position:fixed + top:50px
     That stacks on top of our margin-top:50px creating a 100px gap.
     Force relative positioning so only margin-top applies. */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex;
  margin-top: calc(var(--header-height) + var(--header-gutter));
  height: calc(100vh - var(--header-height) - var(--header-gutter));
  overflow-x: visible;
  overflow-y: hidden;
}

.teacher-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
  display: flex;
  justify-content: flex-start;
}

.content-inner {
  width: 100%;
  /* No max-width cap — use full available column width */
  padding: 8px 12px 12px !important; /* matches admin-content-inner spacing */
}

/* View header row inside glass-card — compact, consistent across all views */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.view-header__title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
.view-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.right-sidebar {
  width: var(--right-sidebar-width);
  flex-shrink: 0;
}

aside.sidebar-right {
  width: var(--right-sidebar-width);
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-left: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -2px 0 12px rgba(0,0,0,0.25);
}

.teacher-layout.present-fullscreen .teacher-main {
  overflow-y: hidden;
  align-items: stretch;
  height: 100%;
}

.teacher-layout.present-fullscreen .content-inner {
  padding: 0;
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.teacher-layout.present-fullscreen #viewRoot {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.teacher-layout.present-fullscreen #presentView {
  height: 100%;
}

.pres-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
  gap: 1rem;
}

/* Compact card grid -- for data-light cards like rooms, courses */
.compact-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  align-items: start;
  /* max-width on the grid itself prevents extreme stretching on very wide screens */
  max-width: 900px;
}

/* Compact card variant -- no min-height, tighter padding */
.phonlab-card--compact {
  min-height: unset !important;
}

.phonlab-card--compact .phonlab-card__body {
  padding: 8px 10px !important;
}

.phonlab-card--compact .phonlab-card__title {
  font-size: 13px !important;
}

.phonlab-card--compact .phonlab-card__desc {
  font-size: 11px !important;
}

.phonlab-card--compact .phonlab-card__footer {
  padding: 6px 10px 8px !important;
}

/* pres-deck-card: inherits all styling from .phonlab-card in teacher_ui.css.
   Only override what's specific to deck cards (footer layout). */
.pres-deck-card {
  cursor: pointer;
}

.deck-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin-top: 0.25rem;
}

.deck-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.pres-deck-card__footer {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.pres-deck-card__footer button { flex: 0 0 auto; font-size: 0.75rem; }
.pres-deck-card__footer .btn-present-card { margin-left: auto; }

#navBtnNewPresentation {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 10px;
}

.teacher-layout.present-fullscreen #presentBuilder,
.teacher-layout.present-fullscreen #presentLive {
  top: 0;
  padding-top: 0;
}

.teacher-layout.present-fullscreen #presentDashboard {
  padding: 1.5rem 2rem;
}