/* ============================================================
   MDMS interface layer (v17)

   Loaded after Bootstrap, so it overrides rather than replaces.
   Removing this one file returns the system to plain Bootstrap,
   which is the point: nothing here is load-bearing.

   Four problems it fixes, in order of how much they matter to a
   teacher holding a phone:

   1. Touch targets. Bootstrap's small buttons are about 30px
      tall. A thumb needs 44px. Every control below is sized for
      a thumb, not a mouse pointer.
   2. Font size. Below 16px, mobile browsers zoom the page every
      time a field is tapped, which is why forms felt jumpy.
   3. Wide tables. On a phone the learner name scrolls out of
      sight before you reach the mark. Below 700px, tables marked
      .table-cards become one card per row with the labels beside
      the values.
   4. Contrast. Light grey on white is unreadable outdoors, which
      is where a rural school often is.
   ============================================================ */

:root {
  /* Overridden per school by the brand colour set in Settings. */
  --mdms-brand: #0d6efd;
  --mdms-brand-dark: #0a58ca;
  --mdms-ink: #1a1a1a;
  --mdms-muted: #555555;      /* never lighter than this on white */
  --mdms-line: #d8dee6;
  --mdms-tap: 44px;           /* minimum touch target */
}

/* ---------- Base ---------- */

body {
  font-size: 16px;            /* stops iOS and Android zooming forms */
  color: var(--mdms-ink);
  background: #f4f6f9;
}

.text-muted { color: var(--mdms-muted) !important; }
small, .small { font-size: 0.9rem; }

/* ---------- Brand ---------- */

.navbar.bg-primary { background-color: var(--mdms-brand) !important; }
.btn-primary {
  background-color: var(--mdms-brand);
  border-color: var(--mdms-brand);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--mdms-brand-dark);
  border-color: var(--mdms-brand-dark);
}
.btn-outline-primary { color: var(--mdms-brand); border-color: var(--mdms-brand); }
.btn-outline-primary:hover { background-color: var(--mdms-brand); border-color: var(--mdms-brand); }
a { color: var(--mdms-brand-dark); }

.navbar-brand { font-weight: 600; letter-spacing: .2px; }
.navbar-brand img { height: 30px; width: 30px; object-fit: contain; border-radius: 4px; background: #fff; padding: 2px; }

/* ---------- Touch targets ---------- */

.btn, .form-control, .form-select {
  min-height: var(--mdms-tap);
  font-size: 1rem;
}
.btn-sm, .form-control-sm, .form-select-sm {
  min-height: 38px;           /* still tappable, for dense admin tables */
  font-size: 0.95rem;
}
.form-check-input { width: 1.35em; height: 1.35em; margin-top: 0.15em; }
.form-check-label { padding-left: 0.25rem; }
.nav-link, .dropdown-item { min-height: var(--mdms-tap); display: flex; align-items: center; }
.dropdown-menu { padding: 0.4rem 0; }
.dropdown-item { padding: 0.55rem 1rem; }

/* Buttons sitting next to each other need room between them, or a
   thumb hits the wrong one. */
.btn + .btn { margin-left: 0.35rem; }
td .btn + .btn, td form + form { margin-left: 0.3rem; }

/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--mdms-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--mdms-line);
  font-weight: 600;
  padding: 0.7rem 1rem;
}

/* ---------- Dashboard shortcut tiles ----------
   The one-or-two-tap path to what a teacher does every day.
   Big enough to hit while walking. */

.mdms-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.mdms-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 104px; padding: 0.9rem 0.5rem;
  background: #fff; border: 1px solid var(--mdms-line); border-radius: 10px;
  text-decoration: none; color: var(--mdms-ink); text-align: center;
  transition: transform .08s ease, box-shadow .12s ease;
}
.mdms-action:hover, .mdms-action:focus {
  color: var(--mdms-brand-dark);
  border-color: var(--mdms-brand);
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.10);
  transform: translateY(-1px);
}
.mdms-action i { font-size: 1.7rem; color: var(--mdms-brand); margin-bottom: 0.4rem; }
.mdms-action span { font-size: 0.92rem; font-weight: 500; line-height: 1.2; }

/* ---------- Empty states ----------
   A blank table is a dead end. This turns it into an instruction. */

.mdms-empty { text-align: center; padding: 2.2rem 1rem; color: var(--mdms-muted); }
.mdms-empty i { font-size: 2.4rem; color: #9aa8bb; display: block; margin-bottom: 0.6rem; }
.mdms-empty h6 { color: var(--mdms-ink); font-weight: 600; margin-bottom: 0.3rem; }
.mdms-empty p { max-width: 34rem; margin: 0 auto 1rem; font-size: 0.95rem; }

/* ---------- Status colours (duty register) ---------- */

.mdms-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot-present { background: #198754; }
.dot-late    { background: #ffc107; }
.dot-absent  { background: #dc3545; }
.dot-out     { background: #0d6efd; }

/* ---------- Tables ---------- */

.table > :not(caption) > * > * { padding: 0.6rem 0.55rem; }
.table thead th { font-size: 0.9rem; letter-spacing: .2px; }

/* Keep the name column visible while the marks scroll sideways.
   Add class="table-sticky" to any table where column one is the
   thing you need to keep reading. */
@media (max-width: 991px) {
  .table-sticky th:first-child,
  .table-sticky td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #fff; box-shadow: 2px 0 0 var(--mdms-line);
  }
  .table-sticky thead th:first-child { background: #e9eef5; z-index: 3; }
}

/* One card per row on a phone. The table must carry
   class="table-cards" and every cell a data-label attribute. */
@media (max-width: 700px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    border: 1px solid var(--mdms-line); border-radius: 9px;
    margin-bottom: 0.7rem; padding: 0.25rem 0.1rem; background: #fff;
  }
  .table-cards td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border: 0; border-bottom: 1px solid #eef1f5; text-align: right;
  }
  .table-cards tr td:last-child { border-bottom: 0; }
  .table-cards td::before {
    content: attr(data-label);
    font-weight: 600; font-size: 0.85rem; color: var(--mdms-muted);
    text-align: left; flex: 0 0 42%;
  }
  .table-cards td[data-label=""]::before { content: none; }
}

/* ---------- Phone layout ---------- */

@media (max-width: 575px) {
  .container, .container-fluid { padding-left: 0.85rem; padding-right: 0.85rem; }
  h3 { font-size: 1.4rem; }
  h4 { font-size: 1.2rem; }
  .card-body { padding: 0.9rem; }
  /* A form's submit button is easier to hit across the full width. */
  form .btn-primary:only-of-type { width: 100%; }
  .mdms-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Print ----------
   Report cards, timetables and ID cards carry their own print
   rules; this only stops the navigation appearing on every one. */

@media print {
  .navbar, .mdms-actions, .no-print, footer { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .card { border: 0; box-shadow: none; }
}

/* ============================================================
   v43: Interface refinement
   ============================================================
   The aim is a system that looks considered without becoming
   fashionable. MDMS is used on cheap Android phones over slow
   connections, often by someone with thirty other things to do,
   so every change here has to earn its place against three tests:

     1. Does it make the screen easier to read at arm's length?
     2. Does it still work at 320px wide?
     3. Does it cost nothing to render?

   That rules out the usual decoration - animations, gradients on
   every surface, oversized whitespace that pushes content below
   the fold. What is left is mostly typography, spacing and
   contrast, which is where readability actually comes from.

   Nothing here changes layout structure, so no existing page can
   break: it is all colour, weight, spacing and radius.
   ============================================================ */

:root {
  --mdms-ink: #0f172a;
  --mdms-muted: #64748b;
  --mdms-line: #e2e8f0;
  --mdms-surface: #f8fafc;
  --mdms-radius: 12px;
}

body {
  background: var(--mdms-surface);
  color: var(--mdms-ink);
  -webkit-font-smoothing: antialiased;
}

/* Headings carry the hierarchy, so they get the weight. Page titles
   were competing with card titles at the same weight, which is why
   dense screens read as a wall. */
h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.4rem; }
h5 { font-size: 1.05rem; }

/* Cards: softer edge, lighter shadow, no heavy border. A page of
   twelve bordered boxes looks like a form from 1998. */
.card {
  border: 1px solid var(--mdms-line);
  border-radius: var(--mdms-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--mdms-line);
  font-weight: 600;
  padding: .8rem 1rem;
}
.card-body { padding: 1.1rem; }

/* Tables are the workhorse of this system - class lists, marks,
   registers. Row separation matters more than borders. */
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mdms-muted);
  font-weight: 600;
  border-bottom-width: 1px;
}
.table-hover tbody tr:hover { background: #f1f5f9; }

/* Buttons: slightly taller, so they are reliable targets on a phone
   held in one hand. 38px is around the practical minimum for a
   thumb; anything smaller produces mis-taps in a hurry. */
.btn { border-radius: 9px; font-weight: 500; }
.btn-lg { border-radius: 11px; }
.btn:not(.btn-sm):not(.btn-link) { min-height: 38px; }

/* Form controls sized to match, and a focus ring that is actually
   visible - the default is nearly invisible on a bright screen
   outdoors, which matters when half the users are on a veranda. */
.form-control, .form-select { border-radius: 9px; border-color: #cbd5e1; }
.form-control:focus, .form-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .18);
}
.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
.form-text { font-size: .8rem; color: var(--mdms-muted); }

/* Badges were shouting. Lower the weight, raise the padding. */
.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .6em; border-radius: 7px; }

/* Alerts: a coloured left edge reads faster than a full wash,
   and prints better on a monochrome laser printer. */
.alert { border: 1px solid var(--mdms-line); border-left-width: 4px; border-radius: 10px; }
.alert-success { border-left-color: #16a34a; }
.alert-warning { border-left-color: #d97706; }
.alert-danger  { border-left-color: #dc2626; }
.alert-info    { border-left-color: #0284c7; }

/* Navigation. The dropdowns hold a lot of items; give them room
   and a clear hover so a mis-tap is obvious before it happens. */
.dropdown-menu { border-radius: 10px; border-color: var(--mdms-line); box-shadow: 0 6px 24px rgba(15,23,42,.10); }
.dropdown-item { padding: .5rem .9rem; border-radius: 7px; margin: 1px .3rem; width: auto; }
.dropdown-item:active { color: #fff; }
.navbar { box-shadow: 0 1px 3px rgba(15,23,42,.08); }

/* The dashboard action tiles - the four things a teacher does daily.
   These are the most-tapped things in the system, so they get the
   clearest target and the most obvious pressed state. */
.mdms-action {
  border-radius: var(--mdms-radius);
  border: 1px solid var(--mdms-line);
  background: #fff;
  transition: box-shadow .12s ease, transform .12s ease;
}
.mdms-action:hover { box-shadow: 0 4px 14px rgba(15,23,42,.10); }
.mdms-action:active { transform: translateY(1px); }

/* Give the page room to breathe without pushing content off a small
   screen. Tighter on phones, where every line counts. */
main, .container-fluid > .row { padding-top: .25rem; }
@media (max-width: 576px) {
  .card-body { padding: .9rem; }
  h3 { font-size: 1.2rem; }
  .table > :not(caption) > * > * { padding: .5rem .5rem; }
}

/* Print: none of the above should reach paper. Report cards and ID
   cards define their own appearance and must not inherit screen
   shadows or background tints. */
@media print {
  body { background: #fff; }
  .card { box-shadow: none; border: none; }
  .alert { border-left-width: 1px; }
}

/* ============================================================
   v53: printing long tables
   ============================================================
   Bootstrap's .table-responsive sets overflow-x, and an element with
   overflow is treated by the print engine as a single unbreakable
   block. Any list longer than one page was therefore pushed whole
   onto a fresh page, leaving most of the previous one blank.

   Releasing the overflow at print time lets rows flow to the bottom
   of each page. Individual rows still move whole, because a row split
   across a page boundary is unreadable on a document somebody signs.
   ============================================================ */
@media print {
  .table-responsive { overflow: visible !important; }
  table thead { display: table-header-group; }
  table tfoot { display: table-footer-group; }
  table tr    { page-break-inside: avoid; break-inside: avoid; }
  .card, .card-body { break-inside: auto; page-break-inside: auto; }
}