/* ============================================================================
   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 stays BLUE (#2563eb), 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:      #2563eb;
    --emsp-accent-d:    #1d4ed8;
    --emsp-accent-tint: #eff5ff;
    --emsp-ring:        rgba(37, 99, 235, .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(37, 99, 235, .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(37, 99, 235, .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(37, 99, 235, .22); }
  .pt-btn--primary:hover { box-shadow: 0 2px 8px -1px rgba(37, 99, 235, .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);
  }

  /* ------------------------------------------------------------------ *
   * 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 { transform: none; }
  }

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