/* layout.css - App shell, header, area-nav, per-area chrome
 *
 * MERGED CORE (ala-suite Phase 2). One light header (dayplanner treatment) with
 * area-nav tabs on the left and the active area's controls inline to the right.
 * Per-area chrome containers (#chrome-plan/-day/-students) swap with the active
 * area; the area view containers in #app-main toggle via body.area-<x>.
 */

/* ── App screen ──────────────────────────────────────────────────────────── */

#screen-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

#app-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 14px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px var(--color-shadow);
  flex-shrink: 0;
}

.header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo { width: 30px; height: auto; cursor: pointer; }
.header-logo:hover { opacity: 0.85; }

/* ── Area-nav tabs ───────────────────────────────────────────────────────── */

.area-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
}

.area-tab {
  background: none;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.area-tab:hover { color: var(--color-text); }
.area-tab.active {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: 0 1px 2px var(--color-shadow);
}

/* ── Per-area chrome (active area's controls) ────────────────────────────── */

.area-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;          /* let inner controls shrink/scroll instead of pushing header-right off */
  overflow: hidden;
}
.area-chrome[hidden] { display: none; }

/* Planning term picker + breadcrumb live in the header chrome. */
#term-select {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: var(--color-surface);
  cursor: pointer;
}
#term-select:disabled { opacity: 0.5; cursor: default; }

#breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  overflow: hidden;
}
.bc-item { color: var(--color-text-muted); white-space: nowrap; }
.bc-current { color: var(--color-text); font-weight: 600; }
.bc-link { cursor: pointer; }
.bc-link:hover { color: var(--color-primary); text-decoration: underline; }
.bc-sep { color: var(--color-border); font-size: 14px; line-height: 1; }

/* Day chrome: the day/week date-nav + action buttons live inline in the header.
   Each sub-view's controls show only in that sub-view (body.view-*); the coverage
   sub-view falls back to just the new-booking + search cluster. */
.chrome-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chrome-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#day-label, #week-label { margin: 0; }

/* Second header row (Day area): the date label + calendar/hour count, aligned
   to the header's left padding so it sits under the logo. Shown only for the
   day / teacher-week sub-views (collapsed otherwise). */
.header-meta { display: none; }
body.area-day.view-day          #header-meta,
body.area-day.view-teacher-week #header-meta { display: flex; }
.chrome-meta { align-items: baseline; gap: 10px; min-width: 0; }

.chrome-day-only,
.chrome-week-only { display: none; }
body.view-day          .chrome-day-only  { display: flex; }
body.view-teacher-week .chrome-week-only { display: flex; }

#btn-toggle-availability[aria-pressed="true"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Day chrome: search box + new-booking button live inline in the header. */
#search-input {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  width: 180px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: var(--color-surface);
}
#search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Booking affordance hidden for non-schedulers (canonical body gate). */
body.is-read-only #btn-new-booking { display: none; }

/* ── Header right ────────────────────────────────────────────────────────── */

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#user-name {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.session-stats {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.session-stats:empty { display: none; }
/* Session/hour count is a Foldy metric only — hide it in other areas. */
body:not(.area-plan) #session-stats { display: none; }

.readonly-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: help;
}

/* ── Main + area containers ──────────────────────────────────────────────── */

#app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;   /* anchor for right-docked panels (slot panel / booking drawer) */
}

/* Show only the active area. Body carries area-plan|area-day|area-students. */
.area-container { display: none; flex: 1; min-height: 0; overflow: hidden; flex-direction: column; }
body.area-plan     #area-plan,
body.area-day      #area-day,
body.area-students #area-students { display: flex; }

.area-placeholder {
  margin: 48px auto;
  max-width: 420px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Per-area header chrome visibility follows the active area too. */
body.area-plan     #chrome-plan,
body.area-day      #chrome-day,
body.area-students #chrome-students { display: flex; }