/* 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); }

/* 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 .glyphicon {
  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 .glyphicon,
.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: 767px) {
  .table-responsive table {
    min-width: 600px;
  }
}