/* ============================================================================
   app.css — central design system
   Loaded AFTER Bootstrap and BEFORE each view's own inline <style>, so it is a
   base "uplift" layer: it modernises Bootstrap's generic defaults app-wide
   (colour, radius, shadow, typography, cards, buttons, forms, tables) while any
   page that has carefully-tuned inline styles still wins over it. Purely
   additive — no layout/structure changes, safe to revert (delete this file +
   its <link> in layout-top.php).
   ============================================================================ */

:root {
  /* Brand — keep the established indigo, add a fuller, modern token set */
  --brand:        #1a237e;   /* deep indigo — sidebar, headers */
  --brand-dark:   #0d1461;
  --brand-600:    #303f9f;   /* interactive primary */
  --brand-500:    #3949ab;   /* hover / accents */
  --brand-tint:   #eef0fb;   /* subtle brand-tinted surfaces */

  /* Neutrals / surfaces */
  --surface:      #ffffff;
  --surface-2:    #f7f8fc;   /* app background, subtle */
  --border:       #e7eaf3;
  --text:         #1f2433;
  --muted:        #6b7280;

  /* Elevation — layered soft shadows for a modern, non-flat feel */
  --shadow-sm: 0 1px 2px rgba(16,24,64,.05), 0 1px 3px rgba(16,24,64,.06);
  --shadow-md: 0 2px 6px rgba(16,24,64,.06), 0 8px 24px rgba(16,24,64,.07);
  --shadow-lg: 0 8px 30px rgba(16,24,64,.12);

  /* Shape */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Bootstrap variable overrides — so components we don't restyle by hand still
     pick up the brand + softer shape automatically */
  --bs-primary:        #303f9f;
  --bs-primary-rgb:    48,63,159;
  --bs-body-color:     var(--text);
  --bs-border-color:   var(--border);
  --bs-border-radius:  var(--radius-sm);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; }
::selection { background: var(--brand-tint); }

/* ── Cards — softer border + layered shadow + rounder corners ─────────────── */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: .2px;
}

/* ── Buttons — smoother, with a touch of depth on the primary ─────────────── */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .2s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: 0 1px 2px rgba(48,63,159,.25);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-500);
  border-color: var(--brand-500);
  box-shadow: 0 4px 12px rgba(48,63,159,.30);
}
.btn-outline-primary { color: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn-sm { border-radius: 7px; }

/* ── Forms — brand focus ring, softer controls ───────────────────────────── */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 .2rem rgba(57,73,171,.15);
}
.input-group-text { background: var(--surface-2); border-color: var(--border); }

/* ── Badges / pills — a little softer ─────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .2px; border-radius: 6px; }

/* ── Tables — cleaner header, gentler rows ───────────────────────────────── */
.table > thead th {
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.table-hover > tbody > tr:hover > * { background: var(--brand-tint); }

/* ── Utility accents used across the app ─────────────────────────────────── */
.text-brand   { color: var(--brand) !important; }
.bg-brand     { background: var(--brand) !important; }
.shadow-soft  { box-shadow: var(--shadow-md) !important; }
.rounded-xl   { border-radius: var(--radius-lg) !important; }

/* ── Dropdowns / modals — match the elevation language ───────────────────── */
.dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.alert { border-radius: var(--radius-sm); }

/* ── Responsive polish ───────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .card { border-radius: var(--radius-sm); }
  .card .card-body { padding: 1rem; }
  /* Let wide tables scroll instead of squashing on small screens */
  .table-responsive-always { -webkit-overflow-scrolling: touch; }
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  .btn { padding-top: .5rem; padding-bottom: .5rem; }  /* comfortable tap target */
}