/* Trimex UI polish layer — visual consistency only; no application logic changes. */
:root {
  --ui-brand: #7a0019;
  --ui-brand-dark: #5f0013;
  --ui-brand-soft: #fff2f5;
  --ui-bg: #f5f7fb;
  --ui-card: #ffffff;
  --ui-border: #e5e9f0;
  --ui-text: #253044;
  --ui-muted: #667085;
  --ui-radius: 14px;
  --ui-shadow: 0 4px 16px rgba(16,24,40,.055);
}
html { scroll-behavior: smooth; }
body { color: var(--ui-text); background: var(--ui-bg); }
.main { min-width: 0; }
.header { align-items: center; }
.header h1 { letter-spacing: -.45px; font-weight: 700; }
.header p { line-height: 1.6; color: var(--ui-muted); }
.card, .panel, .table-card, .table-box, .profile-card, .summary, .summary-card, .stat {
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
  border-radius: var(--ui-radius);
}
.card, .panel, .table-card, .table-box, .profile-card { min-width: 0; }
.card h2, .panel h2, .panel h3, .table-card h2, .profile-card h2 { letter-spacing: -.2px; }
.cards, .stats, .summary-grid { align-items: stretch; }
.cards > *, .stats > *, .summary-grid > * { min-width: 0; }
button, .btn, a.btn, .submit-btn, .btn-primary, .btn-save, .action-btn, .edit-btn, .btn-edit, .btn-record, .print-btn {
  min-height: 40px; border-radius: 9px; font-weight: 600; transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(122,0,25,.20); outline-offset: 2px;
}
input, select, textarea { max-width: 100%; }
input::placeholder, textarea::placeholder { color: #98a2b3; }
label { display: inline-block; margin-bottom: 6px; }
.form-group, .form-field { min-width: 0; }
.table-wrap, .table-container, .table-responsive, .table-box { max-width: 100%; overflow-x: auto; }
table { border-collapse: separate; border-spacing: 0; }
thead th { font-weight: 600; letter-spacing: .1px; }
th:first-child { border-top-left-radius: 5px; }
th:last-child { border-top-right-radius: 5px; }
tbody tr:nth-child(even) td { background: #fcfcfd; }
tbody tr:hover td { background: #fff5f7; }
td { line-height: 1.45; }
.badge, .status-badge, .status-pill, .course-badge, .program-badge { white-space: nowrap; }
.alert, .success, .error { line-height: 1.55; }
hr { border: 0; border-top: 1px solid var(--ui-border); margin: 18px 0; }
.section, .content-section { margin-top: 22px; }
/* Better small-screen usability without replacing the existing sidebar or layout. */
@media (max-width: 900px) {
  .main { min-width: 0; }
  .header { gap: 12px; }
  .header h1 { overflow-wrap: anywhere; }
  .cards, .stats, .summary-grid { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
  .form-grid, .filter-grid, .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .main { padding: 12px !important; }
  .header { margin-bottom: 18px !important; }
  .header h1 { font-size: 22px !important; }
  .card, .panel, .table-card, .table-box, .profile-card { padding: 14px !important; }
  .cards, .stats, .summary-grid, .form-grid, .filter-grid, .form-row { grid-template-columns: minmax(0, 1fr) !important; }
  .button-row, .filter-actions, .actions, .action-group { flex-wrap: wrap; }
  .button-row > *, .filter-actions > * { max-width: 100%; }
  table { min-width: 650px; }
  .header-date, .date-badge, .date-box { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}