/* ===========================================================================
   Madrasah Darul Quraan - theme layer
   Designed for older, non-technical admin users:
   large type, high contrast, big targets, no low-contrast grey, no icon-only
   controls. Where "modern and minimal" conflicts with legibility, legibility wins.
   =========================================================================== */

:root {
  /* Type: base 17px. Never below 16px anywhere in this app. */
  --ms-font-base: 1.0625rem;
  --ms-font-lg: 1.1875rem;
  --ms-font-money: 1.25rem;

  /* Minimum interactive height. 48px comfortably exceeds the 44px guideline. */
  --ms-touch: 48px;

  /* Sage-and-beige palette shared with the Lecture Library app. Every colour that carries
     text is darkened from that app's original so it still clears WCAG AA (4.5:1) on white -
     the staff using this are older, and the README commits to AA throughout. The lighter
     sage and gold are kept for decoration only: chart fills, borders, washes. */
  --ms-ink: #2C3E2C;          /* 11.46:1 */
  --ms-ink-soft: #4A5A48;
  --ms-line: #D4BC9E;
  --ms-bg: #F5E6D3;
  --ms-surface: #ffffff;

  --ms-green: #5A6B55;        /* 5.72:1 - sage, darkened from #6B7E65 (4.38:1) */
  --ms-green-dark: #556654;   /* 6.15:1 */
  --ms-green-wash: #EDF0EB;

  /* Decorative only - never put text on these. */
  --ms-sage-light: #8B9D83;
  --ms-gold: #C9A963;
  --ms-beige-medium: #E8D4B8;

  /* Gold dark enough to carry text, for headings and accents. */
  --ms-gold-dark: #8A6D28;    /* 4.89:1 */

  --ms-red: #a4262c;
  --ms-red-wash: #fdeaea;
  --ms-amber: #8a5300;
  --ms-amber-wash: #fdf3e2;

  --bs-body-font-size: var(--ms-font-base);
  --bs-body-color: var(--ms-ink);
  --bs-border-color: var(--ms-line);
}

body {
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-size: var(--ms-font-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* No thin weights - they thin out badly on older eyes and cheap monitors. */
h1, h2, h3, h4, .h1, .h2, .h3 { font-weight: 650; letter-spacing: -0.01em; color: var(--ms-ink); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* Muted text is still readable here - Bootstrap's default grey is too light. */
.text-muted, .form-text { color: var(--ms-ink-soft) !important; }

a { color: var(--ms-green-dark); text-underline-offset: 3px; }
a:hover { color: var(--ms-green); }

/* ---------- Layout ---------- */
.ms-shell { min-height: 100vh; display: flex; flex-direction: column; }

.ms-header {
  background: var(--ms-surface);
  border-bottom: 3px solid var(--ms-green);
  padding: 0.75rem 0;
}
.ms-brand {
  font-size: 1.4rem; font-weight: 700; color: var(--ms-ink);
  text-decoration: none; display: flex; align-items: center; gap: .6rem;
}
.ms-brand:hover { color: var(--ms-green-dark); }

.ms-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.ms-nav a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--ms-touch); padding: .5rem 1rem;
  border-radius: .5rem; font-weight: 600; font-size: var(--ms-font-base);
  color: var(--ms-ink); text-decoration: none; border: 2px solid transparent;
}
.ms-nav a:hover { background: var(--ms-green-wash); color: var(--ms-green-dark); }
.ms-nav a.active { background: var(--ms-green); color: #fff; }

.ms-main { flex: 1; padding: 2rem 0 4rem; }

/* ---------- Surfaces ---------- */
.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: .75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.ms-card-title {
  font-size: 1.25rem; font-weight: 650; margin: 0 0 1.25rem;
  padding-bottom: .75rem; border-bottom: 2px solid var(--ms-line);
}

/* ---------- Forms: big, obvious, labelled ---------- */
.form-label { font-weight: 650; font-size: var(--ms-font-base); margin-bottom: .35rem; color: var(--ms-ink); }
.form-control, .form-select {
  min-height: var(--ms-touch);
  font-size: var(--ms-font-lg);
  padding: .55rem .85rem;
  border: 2px solid var(--ms-line);
  border-radius: .5rem;
  color: var(--ms-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ms-green);
  box-shadow: 0 0 0 .25rem rgba(90,107,85,.30);
}
.form-control::placeholder { color: #6b7d75; opacity: 1; }

/* Focus must always be visible - never remove the ring. */
:focus-visible { outline: 3px solid var(--ms-green); outline-offset: 2px; }

/* ---------- Buttons: minimum 48px, always text-labelled ---------- */
.btn {
  min-height: var(--ms-touch);
  font-size: var(--ms-font-base);
  font-weight: 650;
  padding: .55rem 1.35rem;
  border-radius: .5rem;
  border-width: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-lg { min-height: 56px; font-size: var(--ms-font-lg); padding: .7rem 1.75rem; }
.btn-primary {
  background: var(--ms-green); border-color: var(--ms-green); color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background: var(--ms-green-dark); border-color: var(--ms-green-dark); color:#fff; }
.btn-outline-secondary {
  border-color: var(--ms-line); color: var(--ms-ink); background: var(--ms-surface);
}
.btn-outline-secondary:hover { background: var(--ms-beige-medium); color: var(--ms-ink); border-color: var(--ms-ink-soft); }
.btn-danger { background: var(--ms-red); border-color: var(--ms-red); }

/* ---------- Money ---------- */
.ms-money { font-variant-numeric: tabular-nums; font-size: var(--ms-font-money); font-weight: 650; }
.ms-money-sm { font-variant-numeric: tabular-nums; font-weight: 650; }

/* Status colours are ALWAYS paired with text - never colour alone. */
.ms-status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; padding: .25rem .7rem; border-radius: 2rem; font-size: 1rem; }
.ms-status-paid   { background: var(--ms-green-wash); color: var(--ms-green-dark); }
.ms-status-part   { background: var(--ms-amber-wash); color: var(--ms-amber); }
.ms-status-owing  { background: var(--ms-red-wash); color: var(--ms-red); }

/* ---------- Tables ---------- */
.table { font-size: var(--ms-font-base); color: var(--ms-ink); }
.table > thead > tr > th {
  font-weight: 700; background: var(--ms-green-wash); color: var(--ms-ink);
  border-bottom: 2px solid var(--ms-line); padding: .85rem;
  white-space: nowrap;
}
.table > tbody > tr > td { padding: .85rem; vertical-align: middle; }
.table > tbody > tr:hover { background: var(--ms-green-wash); }

/* ---------- Alerts ---------- */
.alert { font-size: var(--ms-font-base); border-width: 2px; border-radius: .5rem; padding: 1rem 1.25rem; }
.alert-success { background: var(--ms-green-wash); border-color: var(--ms-green); color: var(--ms-green-dark); }
.alert-danger  { background: var(--ms-red-wash); border-color: var(--ms-red); color: var(--ms-red); }
.alert-warning { background: var(--ms-amber-wash); border-color: var(--ms-amber); color: var(--ms-amber); }

/* ---------- Empty states ---------- */
.ms-empty { text-align: center; padding: 3rem 1.5rem; color: var(--ms-ink-soft); }
.ms-empty i { font-size: 3rem; color: var(--ms-line); display: block; margin-bottom: 1rem; }
.ms-empty p { font-size: var(--ms-font-lg); margin-bottom: 1.5rem; }

/* ---------- Child chips on the family list ---------- */
.ms-chip {
  display: inline-block; background: var(--ms-green-wash); border: 1px solid var(--ms-line);
  border-radius: 2rem; padding: .2rem .75rem; margin: .15rem .2rem .15rem 0;
  font-size: 1rem; font-weight: 600; color: var(--ms-ink);
}

/* Print: statements must come out clean. */
@media print {
  .ms-header, .ms-noprint { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .ms-card { border: none; padding: 0; }
}

/* Money state colours as classes, so views and scripts stop hardcoding hex values
   and a palette change reaches every screen. */
.ms-owing { color: var(--ms-red); }
.ms-settled { color: var(--ms-green-dark); }