/* Design tokens — Phase 09 frontend foundation
   Custom properties mirror current literal values so first commit is pixel-identical.
   Served via src/ui/Layout.php on every migrated page.
*/
:root {
  /* Brand */
  --cu-green: #00421c;
  --cu-gold: #eab676;
  --cu-green-dark: #003318;

  /* Status */
  --status-success-bg: #e2fce9;
  --status-rejected-bg: #ffe0e0;
  --status-rejected-alt: #ffcccc;
  --status-pending-bg: #fff8e1;
  --status-warning: #f0ad4e;
  --status-danger: #d9534f;

  /* Typography scale — 4 sizes + legacy alias for 11px dense tables */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --border-light: #aaaaaa;
}

/* Typography utilities — replace inline style="font-size: XXpx" */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Bilingual TR+EN pairing — Phase 12 (D-02/D-03).
   TR primary stays prominent; EN secondary uses .text-en (~83% size, gray).
   Locked pair shape: TR line + <br> + <span class="text-en">EN line</span>. */
.text-en { display: block; color: #666; font-size: 0.83em; line-height: 1.35; margin-top: 2px; font-weight: normal; }
h1 .text-en, h2 .text-en, h3 .text-en, h4 .text-en { font-size: 0.7em; }
table .text-en, .text-sm .text-en, .text-xs .text-en { font-size: 10px; color: #6c757d; }
/* D-04 accordion for very long paragraphs only: native <details>, zero JS */
.pair-en-accordion summary { cursor: pointer; color: #666; font-size: 0.83em; display: inline-block; }
.pair-en-accordion .text-en { display: inline; }
/* G-12-5 button-context override — Phase 12 plan 14 (D-02/D-03 agent discretion).
   Shared .text-en base (#666) is unreadable inside saturated dark button
   backgrounds; EN lines nested in the five dark Bootstrap variants render in a
   light secondary tone so TR stays white-prominent. Inherits shared size and
   display behavior; the legacy default-button variant and body text intentionally untouched. */
.btn-primary .text-en,
.btn-success .text-en,
.btn-danger .text-en,
.btn-warning .text-en,
.btn-info .text-en { color: rgba(255, 255, 255, 0.85); font-weight: normal; }
/* G-14-1 navbar EN sizing — Phase 14 plan 01 (D-04/D-09).
   EN lines inside the dark-green navbar render smaller than the 0.83em base
   in a light secondary tone so TR stays white-prominent on CU green.
   Follows the button-context override idiom above; :root vars and the base
   .text-en rule intentionally untouched. */
.navbar .text-en { display: block; font-size: 0.72em; color: rgba(255, 255, 255, 0.78); }
/* G-14-1 navbar active/hover gold treatment — Phase 14 plan 04 (D-04/D-09).
   Bare BS5 navbar-dark state delta is white-alpha text only (inactive 55% ->
   hover 75% -> active 100%), near-invisible on solid CU green. These
   project-owned rules add a CU-visible gold treatment: a translucent gold
   pill background plus full-white text on hover, and a gold underline bar
   plus gold EN sub-line on the active link so both link lines change with
   state. Selector shape (.navbar .navbar-nav .nav-link) ties BS5
   .navbar-dark .navbar-nav .nav-link specificity and wins by source order
   (tokens.css loads after the BS5 bundle); :root vars and the base .text-en
   rule intentionally untouched; all selectors scoped under .navbar. */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible { color: #ffffff; background-color: rgba(234, 182, 118, 0.22); border-radius: 6px; }
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link[aria-current="page"] { color: #ffffff; background-color: rgba(234, 182, 118, 0.28); border-radius: 6px; box-shadow: inset 0 -3px 0 var(--cu-gold, #eab676); }
.navbar .navbar-nav .nav-link.active .text-en,
.navbar .navbar-nav .nav-link[aria-current="page"] .text-en { color: var(--cu-gold, #eab676); }

/* Color utilities — replace inline style="color: #... / background-color: #..." */
.bg-cu-green { background-color: var(--cu-green); }
.text-cu-green { color: var(--cu-green); }
.border-cu-gold { border-color: var(--cu-gold); }
.bg-cu-gold { background-color: var(--cu-gold); }
.status-success { background-color: var(--status-success-bg) !important; }
.status-rejected { background-color: var(--status-rejected-bg) !important; }
.status-rejected-alt { background-color: var(--status-rejected-alt) !important; }
.status-pending { background-color: var(--status-pending-bg) !important; }

/* Spacing utilities — replace inline padding/margin */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Legacy overrides — ensure token classes win over inline where needed */
.table.text-sm td,
.table .text-sm { font-size: var(--text-sm); }

/* Empty state component — unified phrasing */
.empty-state {
  text-align: center;
  padding: var(--space-lg);
  font-size: var(--text-sm);
  color: #666;
}
.empty-state .bi {
  font-size: 28px;
  color: #999;
  display: block;
  margin-bottom: var(--space-sm);
}

/* Spinner — for AJAX loading states */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-top-color: var(--cu-green);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
.spinner-lg {
  width: 22px;
  height: 22px;
  border-width: 3px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn-loading {
  opacity: 0.7;
  pointer-events: none;
}
.btn-loading .bi,
.btn-loading .spinner {
  animation: spin 1s linear infinite;
}

/* Noscritp unified banner */
.noscript-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
}

/* Responsive helpers — complement Bootstrap 3 */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767.98px) {
  .table-responsive table:not(.dataTable) {
    min-width: 600px;
  }
}

/* UAT G-14-8 student buttons in CU green/gold — scoped to the student login
   form and the left-column host (#left in index.php) so admin/instructor
   btn-primary/btn-info usage elsewhere is untouched (D-04). */
#login-form .btn-primary,
#left .btn-primary {
  background-color: var(--cu-green, #00421c);
  border-color: var(--cu-green, #00421c);
}
#login-form .btn-primary:hover,
#login-form .btn-primary:focus-visible,
#left .btn-primary:hover,
#left .btn-primary:focus-visible {
  background-color: var(--cu-green-dark, #003318);
  border-color: var(--cu-gold, #eab676);
  color: #ffffff;
}
#login-form .btn-info {
  background-color: transparent;
  border-color: var(--cu-gold, #eab676);
  color: var(--cu-green, #00421c);
}
#login-form .btn-info:hover,
#login-form .btn-info:focus-visible {
  background-color: rgba(234, 182, 118, 0.22);
  border-color: var(--cu-gold, #eab676);
  color: var(--cu-green, #00421c);
}

/* CU-tone badge ramp — Phase 15 (D-04/D-05/D-17).
   Append-only: five .badge-cu-* utilities plus --badge-cu-* vars.
   Tone steps read as progress order: neutral gray (pending/not-started)
   -> CU gold (in-progress) -> CU green (done/success); danger red reserved
   for reject/fail; light neutral for informational states.
   No important-flag declarations (unlike legacy .status-* above); row tints
   keep token vars while badge fill comes only from .badge-cu-*, never both
   on one element. Zero Bootstrap theme-variable overrides (v2 BRAND-01
   boundary). Use with BS5 `badge rounded-pill` base. */
:root {
  --badge-cu-pending-bg: #6c757d;
  --badge-cu-pending-fg: #ffffff;
  --badge-cu-neutral-bg: #e9ecef;
  --badge-cu-neutral-fg: #495057;
  --badge-cu-progress-bg: #eab676;
  --badge-cu-progress-fg: #00421c;
  --badge-cu-done-bg: #00421c;
  --badge-cu-done-fg: #ffffff;
  --badge-cu-reject-bg: #d9534f;
  --badge-cu-reject-fg: #ffffff;
}
.badge-cu-pending { background-color: var(--badge-cu-pending-bg); color: var(--badge-cu-pending-fg); }
.badge-cu-neutral { background-color: var(--badge-cu-neutral-bg); color: var(--badge-cu-neutral-fg); }
.badge-cu-progress { background-color: var(--badge-cu-progress-bg); color: var(--badge-cu-progress-fg); }
.badge-cu-done { background-color: var(--badge-cu-done-bg); color: var(--badge-cu-done-fg); }
.badge-cu-reject { background-color: var(--badge-cu-reject-bg); color: var(--badge-cu-reject-fg); }
/* G-15-4a badge-pill softening — Phase 15 plan 05.
    Same-specificity border-radius override for all five badge-cu-* classes.
    Later-in-cascade wins over the rounded-pill markup class (.5rem reads as
    comfortable progress pills instead of fully round); no markup churn,
    no important flags, no Bootstrap theme-variable overrides. */
.badge-cu-pending,
.badge-cu-neutral,
.badge-cu-progress,
.badge-cu-done,
.badge-cu-reject { border-radius: .5rem; }
/* Bilingual EN line inside saturated pills follows the button-context idiom:
   light secondary tone on dark fills, dark secondary tone on light fills. */
.badge-cu-pending .text-en,
.badge-cu-done .text-en,
.badge-cu-reject .text-en { color: rgba(255, 255, 255, 0.85); }
.badge-cu-progress .text-en,
.badge-cu-neutral .text-en { color: rgba(0, 0, 0, 0.62); }

/* ── Phase 16 MOB — mobile/tablet responsive contract ─────────────────────
   Project-owned rules only: zero --bs-* overrides (v2 BRAND-01), zero
   !important, zero markup churn. Band-scoped, so desktop (>=992px, fine
   pointer) is byte-identical. */

/* Container migration (D-09/D-10): the inline font-size/margin leave the
   container string and land here so the phone band can override them without
   !important. padding:5px stays inline and is the shared rule/gate anchor;
   the border:1px solid term narrows the match to the canonical
   custom-container family so header.php's D-17-exempt width:100%/border:0px
   variant is left untouched (WR-01). */
.container[style*="padding:5px"][style*="border:1px solid"] { font-size: var(--text-sm); margin: 50px auto; }

@media (max-width: 991.98px), (pointer: coarse) {
  /* MOB-04 touch-target floor (measured today: .btn 38px, .btn-sm 31px,
     .form-control/.form-select 38px, small controls 31px). */
  .btn, .btn-sm,
  .form-control, .form-control-sm,
  .form-select, .form-select-sm { min-height: 44px; }
  .navbar .nav-link,
  .dropdown-menu .dropdown-item,
  .page-link { min-height: 44px; }
  .navbar-toggler { min-width: 44px; min-height: 44px; }
  /* D-08 labelled expander — vendor three-class selector family; the .parent
     and .arrow-right variants must be overridden too or the label reverts to
     a bare glyph the moment a row is expanded (RESEARCH Pattern 3). */
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
  table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before {
    content: "\25BA Detaylar / Details";
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    white-space: normal;
  }
  .switch { height: 44px; }
  .switch .slider { top: 5px; bottom: 5px; }
  /* The only new accent usage this phase introduces (no new colour value). */
  a:focus-visible,
  td.dtr-control:focus-visible,
  .navbar-toggler:focus-visible { outline: 2px solid var(--cu-gold); outline-offset: 2px; }
}

@media (max-width: 767.98px) {
  /* Phone band: container reads at 14px with a tightened top gap (D-09/D-10). */
  .container[style*="padding:5px"][style*="border:1px solid"] { font-size: var(--text-base); margin-top: var(--space-md); }

  /* iOS Safari zooms the layout viewport when a focused text control computes
     < 16px; DataTables search/length controls are .form-control-sm. */
  .form-control-sm, .form-select-sm,
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select { font-size: 16px; }

  /* MOB-03 readability floor: retire the legacy 10px table EN sub-line. */
  table .text-en, .table .text-en, .text-sm .text-en, .text-xs .text-en { font-size: 12px; }

  /* R-06.3 floor, non-table contexts (WR-02): the base EN sub-line (0.83em)
     computes 9.96px under a 12px parent and 11.62px under the 14px phone
     container; the navbar EN sub-line (0.72em) is smaller still and was not
     band-scoped at all; the stepper EN sub-line inherits the 12px
     .stepper-item size (0.83em → 9.96px). Equal-specificity later declarations
     win by source order, so these band rules take effect without !important.
     Computed size only: the TR<br><span class="text-en">EN</span> pair shape,
     copy and order stay byte-identical. h1-h4 .text-en is deliberately absent —
     0.7em of a >=20px heading is already >=14px, and a flat 12px there would
     shrink it below its current rendered size. */
  .text-en, .navbar .text-en, .stepper-wrapper .text-en { font-size: var(--text-sm); }

  /* Stepper: 10px wrapper + flex item that cannot shrink → overflow at 360px. */
  .stepper-wrapper { font-size: 12px; }
  .stepper-item { min-width: 0; }
}