/* ============================================
   TEACHER LAYOUT — Shared page container
   Used by: T1, T2, T3, T4, T5, T7, T-settings
   Source of truth: _docs/09-design-decisions.md

   All teacher/admin screens MUST use this file.
   ONE standard — no per-screen deviations.
   ============================================ */

/* Base container — web-first at 1200px */
.page-content,
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 48px;
}

@media (min-width: 768px) {
  .page-content,
  .dashboard {
    padding: 28px 32px 56px;
  }
}

@media (min-width: 1024px) {
  .page-content,
  .dashboard {
    padding: 36px 48px 64px;
  }
}

/* ============================================
   INPUT FIELD CATEGORIES — Content vs Translation
   Used by: T3, T4, T5
   Source of truth: _docs/09-design-decisions.md

   Two categories based on data destination:
   - Content: source-language text → main table (gold border)
   - Translation: translated text → translation table (teal border)
   ============================================ */

/* Content = source-language inputs saved to main table (gold left border) */
.field-content .form-input,
.field-content .match-pair-input {
  border-left: 3px solid #D4A843;
  padding-left: 12px;
}

/* Translation = inputs inside translation bar saved to translation table (teal left border) */
.trans-expand .form-input {
  border-left: 3px solid #3B7A8A;
  padding-left: 12px;
}