/* ============================================================================
   Mahir EMS — Premium corporate refinement layer
   ----------------------------------------------------------------------------
   Loaded LAST, over ems-modern.css (admin), parent-theme.css / portal-ui-kit.css
   (portal) and portal-modern.css (legacy AdminLTE). It refines what those layers
   already establish; it does not replace them.

   THREE RULES THIS FILE KEEPS, WITHOUT EXCEPTION:

   1. EVERYTHING IS INSIDE `@media screen`.
      Printing is untouched — not "probably fine", structurally impossible to
      affect. @media print blocks in ems-print.css and in individual report views
      never see a single declaration from this file, so every voucher, transcript,
      ledger and report prints exactly as it did before. The Portrait/Landscape
      dialog, the DOMPDF letterhead partials and the print_fallback @page handling
      are all equally untouched.

   2. PRESENTATION ONLY.
      No markup, no PHP, no class names invented that a view would have to emit.
      Every selector hooks onto structure that is already in the DOM. Delete this
      file and the application is exactly what it was.

   3. NEW TOKENS ARE NAMESPACED --emsp-*.
      The existing --ems-*, --u-*, --pt-* and portal token sets are left alone.
      Some of those are consumed by print CSS; redefining them here — even inside
      @media screen — would be a needless way to get close to rule 1.

   Design direction: corporate, quiet, dense. Confidence comes from restraint —
   one hairline, one soft shadow, one accent. The accent is INDIGO, taken from --u-primary, a
   standing decision; there is no purple anywhere in this file.
   ============================================================================ */

@media screen {

  :root {
    /* Neutrals carry a slight blue bias so they sit under the accent rather than
       beside it. A pure grey next to a blue accent reads as two unrelated systems. */
    --emsp-ink:      #0b1220;
    --emsp-ink-2:    #1e293b;
    --emsp-body:     #334155;
    --emsp-muted:    #475569;
    --emsp-soft:     #64748b;

    --emsp-line:     #e6ebf2;
    --emsp-line-2:   #f1f5f9;
    --emsp-surface:  #ffffff;
    --emsp-raised:   #fbfcfe;
    --emsp-canvas:   #f6f8fb;

    --emsp-accent:      var(--u-primary,#5b4be8);
    --emsp-accent-d:    var(--u-primary-d,#4a3bd0);
    --emsp-accent-tint: #eff5ff;
    --emsp-ring:        rgba(91, 75, 232, .18);

    /* One elevation scale. Two stacked shadows on a page of ten cards adds up to
       visible grey; a hairline plus one very soft shadow reads as depth without it. */
    --emsp-sh-1: 0 1px 2px rgba(15, 23, 42, .04);
    --emsp-sh-2: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --emsp-sh-3: 0 18px 48px -16px rgba(15, 23, 42, .22);

    --emsp-r:    12px;
    --emsp-r-sm: 9px;
    --emsp-r-xs: 7px;

    --emsp-t: 140ms cubic-bezier(.4, 0, .2, 1);
  }

  /* ------------------------------------------------------------------ *
   * 1. Foundations
   * ------------------------------------------------------------------ */

  .ems-ui,
  body.ems-portal,
  .ems-parent {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--emsp-body);
  }

  /* Figures line up as a column instead of ragged text. Applied to the containers
     where numbers actually live rather than globally, so prose keeps proportional
     digits and does not go stiff. */
  .ems-ui .table,
  .ems-ui .card-body .h1, .ems-ui .card-body .h2, .ems-ui .card-body .h3,
  body.ems-portal .table,
  .ems-parent .table,
  .ems-ui .badge,
  .ems-ui .pagination { font-variant-numeric: tabular-nums; }

  /* Headings: tightened tracking, and text-wrap:balance so a two-line card title
     breaks evenly instead of leaving one orphaned word. */
  .ems-ui h1, .ems-ui h2, .ems-ui h3, .ems-ui h4, .ems-ui h5, .ems-ui h6,
  .ems-ui .card-title, .ems-ui .panel-title, .ems-ui .box-title,
  body.ems-portal .box-title, body.ems-portal .card-title {
    color: var(--emsp-ink);
    letter-spacing: -.012em;
    text-wrap: balance;
  }

  /* A visible focus state everywhere, keyboard-only. Corporate software is operated
     by people who tab through forms all day; :focus-visible costs a mouse user
     nothing and gives a keyboard user the whole screen back. */
  .ems-ui a:focus-visible,
  .ems-ui .btn:focus-visible,
  .ems-ui .form-control:focus-visible,
  .ems-ui .custom-select:focus-visible,
  .ems-ui .nav-link:focus-visible,
  .ems-ui .dropdown-item:focus-visible,
  body.ems-portal a:focus-visible,
  body.ems-portal .btn:focus-visible,
  .ems-parent a:focus-visible,
  .ems-parent .btn:focus-visible {
    outline: 2px solid var(--emsp-accent);
    outline-offset: 2px;
    border-radius: var(--emsp-r-xs);
  }

  /* Slimmer, self-coloured scrollbars — the default chrome-grey bar is the loudest
     thing on a scrolling report. */
  .ems-ui *::-webkit-scrollbar,
  body.ems-portal *::-webkit-scrollbar { width: 10px; height: 10px; }
  .ems-ui *::-webkit-scrollbar-track,
  body.ems-portal *::-webkit-scrollbar-track { background: transparent; }
  .ems-ui *::-webkit-scrollbar-thumb,
  body.ems-portal *::-webkit-scrollbar-thumb {
    background: #d7dee8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
  }
  .ems-ui *::-webkit-scrollbar-thumb:hover,
  body.ems-portal *::-webkit-scrollbar-thumb:hover { background: #c2ccda; background-clip: content-box; }

  /* ------------------------------------------------------------------ *
   * 2. Surfaces — cards, panels, AdminLTE boxes
   *    All three chrome stacks get ONE card treatment, so a screen that
   *    mixes them (several reports do) stops looking assembled.
   * ------------------------------------------------------------------ */

  .ems-ui .card:not([class*="bg-"]),
  .ems-ui .panel:not([class*="bg-"]),
  body.ems-portal .box:not([class*="bg-"]),
  body.ems-portal .card:not([class*="bg-"]),
  body.ems-portal .panel:not([class*="bg-"]),
  .ems-parent .ep-card {
    background: var(--emsp-surface);
    border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r);
    box-shadow: var(--emsp-sh-1);
    transition: box-shadow var(--emsp-t), border-color var(--emsp-t);
  }

  /* Lift on hover ONLY where the card is itself a control. A whole page of cards
     that all rise under the pointer is noise, and implies clickability that is not
     there. */
  .ems-ui a > .card:not([class*="bg-"]):hover,
  .ems-ui .card.card-link:not([class*="bg-"]):hover,
  body.ems-portal a > .box:not([class*="bg-"]):hover {
    box-shadow: var(--emsp-sh-2);
    border-color: #d8e2f0;
  }

  .ems-ui .card-header:not([class*="bg-"]),
  .ems-ui .panel-heading:not([class*="bg-"]),
  body.ems-portal .box-header:not([class*="bg-"]),
  body.ems-portal .panel-heading:not([class*="bg-"]) {
    background: transparent;
    border-bottom: 1px solid var(--emsp-line-2);
    padding: 13px 16px;
    border-radius: var(--emsp-r) var(--emsp-r) 0 0;
  }

  .ems-ui .card-title,
  .ems-ui .panel-title,
  body.ems-portal .box-title,
  body.ems-portal .panel-title { font-size: 13.5px; font-weight: 700; margin: 0; }

  .ems-ui .card-footer:not([class*="bg-"]),
  body.ems-portal .box-footer:not([class*="bg-"]) {
    background: var(--emsp-raised);
    border-top: 1px solid var(--emsp-line-2);
    border-radius: 0 0 var(--emsp-r) var(--emsp-r);
  }

  /* Section eyebrow — the small uppercase label above a group of cards. */
  .ems-ui .text-uppercase.font-size-sm,
  .ems-ui .card-title small.text-uppercase {
    letter-spacing: .06em; font-weight: 700; color: var(--emsp-soft);
  }

  /* ------------------------------------------------------------------ *
   * 3. Data — tables
   *    A report screen IS its table. Header as a rule rather than a filled
   *    band, hairline rows, and a hover that tracks the row being read.
   * ------------------------------------------------------------------ */

  .ems-ui .table:not(.table-dark):not([class*="bg-"]) thead th,
  body.ems-portal .table:not(.table-dark):not([class*="bg-"]) thead th {
    background: transparent;
    border-top: 0;
    border-bottom: 2px solid var(--emsp-line);
    color: var(--emsp-ink-2);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
  }

  .ems-ui .table:not(.table-dark) tbody td,
  body.ems-portal .table:not(.table-dark) tbody td {
    border-top: 1px solid var(--emsp-line-2);
    vertical-align: middle;
  }

  .ems-ui .table:not(.table-dark) tbody tr:hover > td:not([class*="bg-"]),
  body.ems-portal .table:not(.table-dark) tbody tr:hover > td:not([class*="bg-"]) {
    background: var(--emsp-raised);
  }

  /* Totals read as a conclusion, not another row. */
  .ems-ui .table:not(.table-dark) tfoot th,
  .ems-ui .table:not(.table-dark) tfoot td,
  body.ems-portal .table:not(.table-dark) tfoot td {
    background: var(--emsp-raised);
    border-top: 2px solid var(--emsp-line);
    font-weight: 700;
    color: var(--emsp-ink);
  }

  /* A table that scrolls keeps its own rounded frame instead of bleeding to the
     card edge. */
  .ems-ui .table-responsive,
  body.ems-portal .table-responsive {
    border-radius: var(--emsp-r-sm);
  }

  /* ------------------------------------------------------------------ *
   * 4. Controls — buttons
   * ------------------------------------------------------------------ */

  .ems-ui .btn,
  body.ems-portal .btn,
  .ems-parent .btn {
    border-radius: var(--emsp-r-sm);
    font-weight: 600;
    letter-spacing: -.005em;
    transition: background-color var(--emsp-t), border-color var(--emsp-t),
                box-shadow var(--emsp-t), transform var(--emsp-t);
  }
  .ems-ui .btn:active,
  body.ems-portal .btn:active { transform: translateY(.5px); }

  .ems-ui .btn-primary,
  body.ems-portal .btn-primary,
  .ems-parent .btn-primary {
    background: var(--emsp-accent);
    border-color: var(--emsp-accent);
    box-shadow: 0 1px 2px rgba(91, 75, 232, .22);
  }
  .ems-ui .btn-primary:hover,
  .ems-ui .btn-primary:focus,
  body.ems-portal .btn-primary:hover,
  .ems-parent .btn-primary:hover {
    background: var(--emsp-accent-d);
    border-color: var(--emsp-accent-d);
    box-shadow: 0 2px 8px -1px rgba(91, 75, 232, .32);
  }

  /* The neutral button is a bordered white surface, not a grey slab. On a screen
     with one primary action and six secondary ones, six grey slabs compete with
     the primary and none of them wins. */
  .ems-ui .btn-light,
  .ems-ui .btn-default,
  .ems-ui .btn-outline-secondary,
  body.ems-portal .btn-default {
    background: var(--emsp-surface);
    border: 1px solid #dbe3ee;
    color: var(--emsp-ink-2);
    box-shadow: var(--emsp-sh-1);
  }
  .ems-ui .btn-light:hover,
  .ems-ui .btn-default:hover,
  .ems-ui .btn-outline-secondary:hover,
  body.ems-portal .btn-default:hover {
    background: var(--emsp-raised);
    border-color: #c8d4e4;
    color: var(--emsp-ink);
  }

  .ems-ui .btn-group > .btn:not(:first-child),
  .ems-ui .btn-group > .btn:not(:last-child) { border-radius: 0; }
  .ems-ui .btn-group > .btn:first-child { border-radius: var(--emsp-r-sm) 0 0 var(--emsp-r-sm); }
  .ems-ui .btn-group > .btn:last-child  { border-radius: 0 var(--emsp-r-sm) var(--emsp-r-sm) 0; }
  .ems-ui .btn-group > .btn:only-child  { border-radius: var(--emsp-r-sm); }

  /* ------------------------------------------------------------------ *
   * 5. Controls — forms
   *    Search panels sit at the top of nearly every report. They are the
   *    first thing touched and should feel precise.
   * ------------------------------------------------------------------ */

  .ems-ui .form-control,
  .ems-ui .custom-select,
  .ems-ui .select2-container--default .select2-selection--single,
  .ems-ui .select2-container--default .select2-selection--multiple,
  body.ems-portal .form-control,
  .ems-parent .form-control {
    border-radius: var(--emsp-r-sm);
    border-color: #dbe3ee;
    color: var(--emsp-ink-2);
    background-color: var(--emsp-surface);
    transition: border-color var(--emsp-t), box-shadow var(--emsp-t);
  }

  .ems-ui .form-control:hover:not(:focus),
  .ems-ui .custom-select:hover:not(:focus),
  body.ems-portal .form-control:hover:not(:focus) { border-color: #c8d4e4; }

  .ems-ui .form-control:focus,
  .ems-ui .custom-select:focus,
  .ems-ui .select2-container--default.select2-container--focus .select2-selection--single,
  body.ems-portal .form-control:focus,
  .ems-parent .form-control:focus {
    border-color: var(--emsp-accent);
    box-shadow: 0 0 0 3px var(--emsp-ring);
  }

  .ems-ui .form-control::placeholder,
  body.ems-portal .form-control::placeholder { color: #9aa7b8; }

  .ems-ui label,
  body.ems-portal label {
    font-weight: 600;
    font-size: 12px;
    color: var(--emsp-muted);
    letter-spacing: .005em;
  }

  .ems-ui .input-group-text {
    border-radius: var(--emsp-r-sm);
    border-color: #dbe3ee;
    background: var(--emsp-raised);
    color: var(--emsp-soft);
  }

  .ems-ui .form-control[readonly],
  .ems-ui .form-control:disabled { background: var(--emsp-line-2); color: var(--emsp-soft); }

  /* Select2 single-select: centre the label and the arrow.
     Select2 pads the box vertically AND gives the inner span a hard-coded
     line-height:32px. Inside the 34px box a .form-control gets, that is
     5.7 + 32 + 5.7 = 43px of content in 34px of room, so the label could not sit
     on the centre line and rode high — visible next to any native select beside
     it (reported on the Free Students filter bar, where "Group By" is the only
     Select2 among four).

     Fixed by making the box a flex row and dropping the fixed line-height, rather
     than by nudging a magic number: no height is asserted here, so the control
     keeps whatever height the form theme gives it and this stays correct at every
     size. Applies wherever Select2 is used — the misalignment was never specific
     to that one screen. */
  .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0; bottom: 0; height: auto;
    display: flex; align-items: center;
  }

  .ems-ui .invalid-feedback, .ems-ui .text-danger { font-weight: 600; }

  /* ------------------------------------------------------------------ *
   * 6. Navigation — navbars, tabs, dropdowns, pagination
   * ------------------------------------------------------------------ */

  .navbar.navbar-static,
  .navbar.navbar-expand.navbar-light,
  .ems-parent-navbar {
    border-bottom: 1px solid var(--emsp-line);
    box-shadow: var(--emsp-sh-1);
  }

  .navbar-light .navbar-nav-link {
    letter-spacing: -.005em;
    transition: background-color var(--emsp-t), color var(--emsp-t);
  }

  .navbar .dropdown-menu,
  .ems-ui .dropdown-menu,
  body.ems-portal .dropdown-menu {
    border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r);
    box-shadow: var(--emsp-sh-3);
    padding: 6px;
  }
  .navbar .dropdown-menu .dropdown-item,
  .ems-ui .dropdown-menu .dropdown-item,
  body.ems-portal .dropdown-menu .dropdown-item {
    border-radius: var(--emsp-r-xs);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--emsp-body);
    transition: background-color var(--emsp-t), color var(--emsp-t);
  }
  .navbar .dropdown-menu .dropdown-item:hover,
  .ems-ui .dropdown-menu .dropdown-item:hover,
  body.ems-portal .dropdown-menu .dropdown-item:hover {
    background: var(--emsp-accent-tint);
    color: var(--emsp-accent);
  }
  .ems-ui .dropdown-header,
  .navbar .dropdown-header {
    font-size: 10px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--emsp-soft); padding: 9px 10px 5px;
  }

  /* Tabs: an underline that moves, not a set of folder shapes. */
  .ems-ui .nav-tabs { border-bottom: 1px solid var(--emsp-line); }
  .ems-ui .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    color: var(--emsp-muted);
    padding: 10px 14px;
    transition: color var(--emsp-t), border-color var(--emsp-t);
  }
  .ems-ui .nav-tabs .nav-link:hover { color: var(--emsp-ink); border-bottom-color: #cfdaea; background: transparent; }
  .ems-ui .nav-tabs .nav-link.active,
  .ems-ui .nav-tabs .nav-item.active > .nav-link {
    color: var(--emsp-accent); background: transparent;
    border-color: transparent transparent var(--emsp-accent);
  }

  .ems-ui .pagination .page-link {
    border-radius: var(--emsp-r-xs);
    margin: 0 2px;
    border-color: var(--emsp-line);
    color: var(--emsp-muted);
    font-weight: 600;
  }
  .ems-ui .pagination .page-item.active .page-link {
    background: var(--emsp-accent); border-color: var(--emsp-accent); color: #fff;
  }

  .ems-ui .breadcrumb { background: transparent; padding-left: 0; font-size: 12.5px; }

  /* ------------------------------------------------------------------ *
   * 7. Status — badges, pills, alerts
   *    Semantic colour is kept separate from the accent: status must not
   *    change meaning when branding does.
   * ------------------------------------------------------------------ */

  .ems-ui .badge,
  body.ems-portal .badge {
    border-radius: 6px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .02em;
    padding: 4px 8px;
  }

  .ems-ui .alert,
  body.ems-portal .alert {
    border-radius: var(--emsp-r-sm);
    border: 1px solid transparent;
    font-size: 12.5px;
    box-shadow: none;
  }
  /* A 3px leading rule makes severity readable before the text is. */
  .ems-ui .alert-success, body.ems-portal .alert-success { border-left: 3px solid #16a34a; }
  .ems-ui .alert-danger,  body.ems-portal .alert-danger  { border-left: 3px solid #dc2626; }
  .ems-ui .alert-warning, body.ems-portal .alert-warning { border-left: 3px solid #b45309; }
  .ems-ui .alert-info,    body.ems-portal .alert-info    { border-left: 3px solid #0891b2; }

  .ems-ui .progress { border-radius: 999px; background: var(--emsp-line-2); height: 6px; }
  .ems-ui .progress-bar { border-radius: 999px; }

  /* ------------------------------------------------------------------ *
   * 8. Overlays — modals
   * ------------------------------------------------------------------ */

  .modal-content {
    border: 0;
    border-radius: var(--emsp-r);
    box-shadow: var(--emsp-sh-3);
  }
  .modal-header {
    border-bottom: 1px solid var(--emsp-line-2);
    padding: 15px 18px;
  }
  .modal-title { font-weight: 700; font-size: 14.5px; color: var(--emsp-ink); letter-spacing: -.012em; }
  .modal-body { padding: 16px 18px; }
  .modal-footer { border-top: 1px solid var(--emsp-line-2); padding: 13px 18px; background: var(--emsp-raised); }
  .modal-backdrop.show { opacity: .38; }

  /* ------------------------------------------------------------------ *
   * 9. DataTables chrome
   * ------------------------------------------------------------------ */

  .ems-ui .dataTables_wrapper .dataTables_filter input,
  .ems-ui .dataTables_wrapper .dataTables_length select {
    border-radius: var(--emsp-r-sm);
    border: 1px solid #dbe3ee;
  }
  .ems-ui .dataTables_wrapper .dataTables_info,
  .ems-ui .dataTables_wrapper .dataTables_length,
  .ems-ui .dataTables_wrapper .dataTables_filter { color: var(--emsp-soft); font-size: 12px; }
  .ems-ui .dt-buttons .btn { font-size: 11.5px; }

  /* ------------------------------------------------------------------ *
   * 10. Portal specifics
   *     The parent portal is the outward-facing surface. It gets the same
   *     system, one notch softer.
   * ------------------------------------------------------------------ */

  .ems-parent .ep-card,
  body.ems-portal .box { border-radius: var(--emsp-r); }

  .ems-parent .ep-pill,
  .pt-pill { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }

  .pt-btn {
    border-radius: var(--emsp-r-sm);
    transition: background-color var(--emsp-t), border-color var(--emsp-t), box-shadow var(--emsp-t);
  }
  .pt-btn--primary { box-shadow: 0 1px 2px rgba(91, 75, 232, .22); }
  .pt-btn--primary:hover { box-shadow: 0 2px 8px -1px rgba(91, 75, 232, .32); }

  .pt-card { border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1); }

  /* Child cards on the "Select a child" screen ARE controls — they get the lift. */
  .ems-parent .ep-kid {
    border-radius: var(--emsp-r);
    transition: box-shadow var(--emsp-t), border-color var(--emsp-t), transform var(--emsp-t);
  }
  .ems-parent .ep-kid:hover {
    box-shadow: var(--emsp-sh-2);
    border-color: #d8e2f0;
    transform: translateY(-1px);
  }

  /* ------------------------------------------------------------------ *
   * 10b. Parent dashboard — the .ep-* component layer
   *
   *     ⚠ THIS MARKUP HAD ALMOST NO CSS. parent/dashboard-widgets.php is built
   *     from .ep-phead, .ep-active, .ep-switch, .ep-sec, .ep-kpis, .ep-kpi,
   *     .ep-modules, .ep-mod and .ep-badge — and of those, only .ep-pill and a
   *     skin rule for .ep-kpi (background and border, no layout) existed
   *     anywhere in theme/custom/css. Everything else resolved to nothing, so
   *     the landing page every parent sees rendered as a column of bare divs:
   *     the KPI row was not a row, the child switcher was not a switcher, and
   *     the eighteen Quick access tiles stacked one per line.
   *
   *     Written against the tokens above rather than fresh values, so the
   *     dashboard inherits the same indigo, radius and shadow ramp as the rest
   *     of the portal instead of becoming a sixth competing look.
   * ------------------------------------------------------------------ */

  .ems-parent .ep-phead {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin: 0 0 20px;
  }
  .ems-parent .ep-phead h1 {
    margin: 0; font-size: 20px; font-weight: 650;
    letter-spacing: -.02em; color: var(--emsp-ink);
  }
  .ems-parent .ep-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; font-size: 12px;
    background: var(--emsp-raised); border: 1px solid var(--emsp-line);
    color: var(--emsp-muted);
  }

  /* Section labels. Quiet on purpose — they separate, they do not announce. */
  .ems-parent .ep-sec {
    margin: 26px 0 10px; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--emsp-soft);
  }

  .ems-parent .ep-active {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1);
  }
  .ems-parent .ep-active-av,
  .ems-parent .ep-switch .av {
    flex: 0 0 auto; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--emsp-accent-tint); color: var(--emsp-accent); font-weight: 700;
  }
  .ems-parent .ep-active-av { width: 52px; height: 52px; font-size: 18px; }
  .ems-parent .ep-switch .av { width: 26px; height: 26px; font-size: 11px; }
  .ems-parent .ep-active-av img,
  .ems-parent .ep-switch .av img { width: 100%; height: 100%; object-fit: cover; }

  .ems-parent .ep-active-body { min-width: 0; }
  .ems-parent .ep-active-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ems-parent .ep-active-nm { font-size: 15px; font-weight: 650; color: var(--emsp-ink); }
  .ems-parent .ep-active-sub { font-size: 12.5px; color: var(--emsp-muted); margin-top: 2px; }
  .ems-parent .ep-active-hint { font-size: 11.5px; color: var(--emsp-soft); margin-top: 3px; }

  .ems-parent .ep-badge {
    display: inline-flex; padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; background: var(--emsp-accent-tint); color: var(--emsp-accent-d);
  }
  .ems-parent .ep-badge.ok { background: #ecfdf5; color: #047857; }

  /* Switching child is a control, so it gets the same lift .ep-kid has. */
  .ems-parent .ep-switch { display: flex; gap: 10px; flex-wrap: wrap; }
  /* ⚠ BOTH SELECTORS. The chip is a <div class="ep-switch-chip"> carrying a JS
     click handler, not an anchor — styling only .ep-switch a left the real
     control unstyled while an <a> that does not exist here looked correct. */
  .ems-parent .ep-switch a,
  .ems-parent .ep-switch-chip {
    display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 8px;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    border-radius: 999px; text-decoration: none; cursor: pointer;
    transition: box-shadow var(--emsp-t), border-color var(--emsp-t);
  }
  .ems-parent .ep-switch a:hover,
  .ems-parent .ep-switch-chip:hover { box-shadow: var(--emsp-sh-2); border-color: #d8e2f0; }
  .ems-parent .ep-switch-chip.sel { border-color: var(--emsp-accent); background: var(--emsp-accent-tint); }
  .ems-parent .ep-switch .tx { display: flex; flex-direction: column; line-height: 1.25; }
  .ems-parent .ep-switch .nm { font-size: 12.5px; font-weight: 600; color: var(--emsp-ink-2); }
  .ems-parent .ep-switch .cl { font-size: 11px; color: var(--emsp-soft); }
  .ems-parent .ep-switch .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--emsp-accent); margin-left: 2px;
  }

  /* ⚠ auto-fit, NOT a fixed column count: this strip carries one tile when the
     fee module is off and two when it is on, and a fixed grid leaves a hole. */
  .ems-parent .ep-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
  }
  .ems-parent .ep-kpi {
    display: flex; align-items: center; gap: 13px; padding: 15px 16px;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1);
    text-decoration: none; color: inherit;
    transition: box-shadow var(--emsp-t), border-color var(--emsp-t);
  }
  .ems-parent a.ep-kpi:hover { box-shadow: var(--emsp-sh-2); border-color: #d8e2f0; }
  .ems-parent .ep-kpi .ic,
  .ems-parent .ep-mod .ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--emsp-accent-tint); color: var(--emsp-accent);
  }
  .ems-parent .ep-kpi .ic { width: 40px; height: 40px; font-size: 17px; }
  .ems-parent .ep-mod .ic { width: 36px; height: 36px; font-size: 15px; }
  .ems-parent .ep-kpi .val {
    font-size: 20px; font-weight: 700; letter-spacing: -.02em;
    color: var(--emsp-ink); font-variant-numeric: tabular-nums;
  }
  .ems-parent .ep-kpi .lbl { font-size: 12.5px; font-weight: 600; color: var(--emsp-ink-2); }
  .ems-parent .ep-kpi .sub { font-size: 11px; color: var(--emsp-soft); }

  .ems-parent .ep-modules {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 11px;
  }
  .ems-parent .ep-mod {
    display: flex; align-items: center; gap: 12px; padding: 13px 14px;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1);
    text-decoration: none; color: inherit;
    transition: box-shadow var(--emsp-t), border-color var(--emsp-t), transform var(--emsp-t);
  }
  .ems-parent .ep-mod:hover {
    box-shadow: var(--emsp-sh-2); border-color: #d8e2f0; transform: translateY(-1px);
  }
  .ems-parent .ep-mod .t { font-size: 13px; font-weight: 600; color: var(--emsp-ink-2); }
  .ems-parent .ep-mod .d { font-size: 11.5px; color: var(--emsp-soft); margin-top: 1px; }

  /* ------------------------------------------------------------------ *
   * 10c. The rest of the .ep-* family — child chooser and fee history
   *
   *     ⚠ SAME DEFECT AS 10b, ON TWO MORE SCREENS. user/choose.php is the FIRST
   *     page a parent with more than one child sees after signing in, and ten of
   *     its classes had no rule: .ep-kids, .ep-kid-row, .ep-kid-av, .ep-kid-nm,
   *     .ep-kid-cls, .ep-kid-meta, .ep-kid-badge, .ep-kid-flag, .ep-card-b and
   *     .ep-btn. The fee history page was missing four more.
   *
   *     .ep-kid itself already had a radius and a hover lift in section 10 — the
   *     card was styled while everything inside it was not.
   * ------------------------------------------------------------------ */

  .ems-parent .ep-kids {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px;
  }
  /* position:relative so .ep-kid-flag can sit in the corner of its own card. */
  .ems-parent .ep-kid {
    position: relative; display: flex; flex-direction: column; gap: 3px;
    padding: 18px 16px 16px; text-align: center; cursor: pointer;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    box-shadow: var(--emsp-sh-1);
  }
  .ems-parent .ep-kid.sel { border-color: var(--emsp-accent); box-shadow: 0 0 0 3px var(--emsp-ring); }
  .ems-parent .ep-kid-flag {
    position: absolute; top: 10px; right: 10px;
    font-size: 10.5px; font-weight: 700; color: var(--emsp-accent);
  }
  .ems-parent .ep-kid-av {
    width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--emsp-accent-tint); color: var(--emsp-accent);
    font-size: 22px; font-weight: 700;
  }
  .ems-parent .ep-kid-av img { width: 100%; height: 100%; object-fit: cover; }
  .ems-parent .ep-kid-nm { font-size: 15px; font-weight: 650; color: var(--emsp-ink); }
  .ems-parent .ep-kid-cls { font-size: 12.5px; color: var(--emsp-muted); }
  .ems-parent .ep-kid-badge { align-self: center; margin: 6px 0 2px; }
  .ems-parent .ep-kid-meta {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--emsp-line-2);
    display: flex; flex-direction: column; gap: 4px;
  }
  .ems-parent .ep-kid-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 11.5px;
  }
  .ems-parent .ep-kid-row .k { color: var(--emsp-soft); }
  .ems-parent .ep-kid-row .v { color: var(--emsp-ink-2); font-weight: 600; }
  .ems-parent .ep-kid-row .v.adm { font-variant-numeric: tabular-nums; }

  .ems-parent .ep-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border: 0; border-radius: var(--emsp-r-sm);
    background: var(--emsp-accent); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color var(--emsp-t), box-shadow var(--emsp-t);
  }
  .ems-parent .ep-btn:hover { background: var(--emsp-accent-d); box-shadow: 0 2px 8px -1px var(--emsp-ring); }
  .ems-parent .ep-btn.block { display: flex; width: 100%; margin-top: 12px; }

  .ems-parent .ep-card-b { padding: 16px; }

  /* ⚠ The inline border-top colour on each .ep-fcard is the card's own accent and
     must survive — so no border shorthand here, only the other three sides. */
  .ems-parent .ep-fcards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px;
  }
  .ems-parent .ep-fcard {
    padding: 14px 16px 13px;
    background: var(--emsp-surface);
    border-right: 1px solid var(--emsp-line);
    border-bottom: 1px solid var(--emsp-line);
    border-left: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1);
  }
  .ems-parent .ep-fcard .h {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--emsp-soft); margin-bottom: 9px;
  }
  .ems-parent .ep-fcard .r {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-size: 12.5px; padding: 3px 0; color: var(--emsp-muted);
  }
  .ems-parent .ep-fcard .r b { color: var(--emsp-ink); font-variant-numeric: tabular-nums; }

  .ems-parent .ep-detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px;
  }

  /* ------------------------------------------------------------------ *
   * 10d. Teacher dashboard — .td-*
   *
   *     ⚠ THIS LAYER DEPENDS ON NOTHING, AND THAT IS THE POINT. The teacher
   *     chrome requests 25 stylesheets and 37 scripts from /backend/, and every
   *     one of them returns CI's 404 page as HTTP 200 text/html — no Bootstrap
   *     grid, no AdminLTE, no jQuery, no icon fonts. Measured 2026-09-07 against
   *     a control: theme/custom/css/ems-premium.css answers text/css 32,960
   *     bytes, backend/bootstrap/css/bootstrap.min.css answers text/html 7,746.
   *
   *     ems-premium.css is one of the four sheets that DOES load there, so the
   *     dashboard is styled from here with its own grid and no icon glyphs. It
   *     will keep working if /backend/ is restored, and works now because it
   *     never needed it.
   * ------------------------------------------------------------------ */

  .ems-portal .td-hero {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 20px; margin-bottom: 4px;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1);
  }
  .ems-portal .td-hero-av {
    flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--emsp-accent-tint); color: var(--emsp-accent);
    font-size: 26px; font-weight: 700;
  }
  .ems-portal .td-hero-av img { width: 100%; height: 100%; object-fit: cover; }
  .ems-portal .td-hero-body { min-width: 0; flex: 1 1 240px; }
  .ems-portal .td-hero-nm {
    font-size: 19px; font-weight: 650; letter-spacing: -.02em; color: var(--emsp-ink);
  }
  .ems-portal .td-hero-sub { font-size: 12.5px; color: var(--emsp-muted); margin-top: 3px; }

  .ems-portal .td-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
  .ems-portal .td-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px; font-size: 12px;
    background: var(--emsp-raised); border: 1px solid var(--emsp-line); color: var(--emsp-muted);
  }
  .ems-portal .td-chip b { color: var(--emsp-ink-2); font-weight: 600; }

  .ems-portal .td-sec {
    margin: 24px 0 10px; font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--emsp-soft);
  }

  /* ⚠ Its OWN grid. `row` and `col-md-*` resolve to nothing in this portal, so a
     Bootstrap two-column layout here silently becomes one full-width column. */
  .ems-portal .td-classes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 12px;
  }
  .ems-portal .td-class {
    padding: 14px 16px;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1);
  }
  .ems-portal .td-class-nm {
    font-size: 13.5px; font-weight: 650; color: var(--emsp-ink); letter-spacing: -.01em;
  }
  .ems-portal .td-class-ct {
    font-size: 11px; color: var(--emsp-soft); margin-top: 1px;
  }
  .ems-portal .td-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ems-portal .td-sub {
    display: inline-flex; padding: 3px 9px; border-radius: var(--emsp-r-xs);
    font-size: 12px; background: var(--emsp-accent-tint); color: var(--emsp-accent-d);
  }

  .ems-portal .td-empty {
    padding: 22px; text-align: center; font-size: 13px; color: var(--emsp-muted);
    background: var(--emsp-surface); border: 1px dashed var(--emsp-line);
    border-radius: var(--emsp-r);
  }
  .ems-portal .td-empty b { display: block; color: var(--emsp-ink-2); margin-bottom: 3px; }

  .ems-portal .td-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 2px 22px;
    padding: 14px 16px;
    background: var(--emsp-surface); border: 1px solid var(--emsp-line);
    border-radius: var(--emsp-r); box-shadow: var(--emsp-sh-1);
  }
  .ems-portal .td-fact {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--emsp-line-2);
  }
  .ems-portal .td-fact:last-child { border-bottom: 0; }
  .ems-portal .td-fact .k { color: var(--emsp-soft); }
  .ems-portal .td-fact .v { color: var(--emsp-ink-2); font-weight: 600; text-align: right; }

  /* ------------------------------------------------------------------ *
   * 11. Motion
   * ------------------------------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .ems-ui *, body.ems-portal *, .ems-parent * {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
    .ems-ui .btn:active { transform: none; }
    .ems-parent .ep-kid:hover,
    .ems-parent .ep-mod:hover { transform: none; }
  }

}
/* end @media screen — nothing below this line, by design */