/* ------------------------------------------------------------------ */
/*  IncrelogEMS — custom overrides on top of the Viho theme           */
/* ------------------------------------------------------------------ */

/* Sidebar nav icons: Viho forces svg width:16px with no height, which
   squashes the 18px icon spans — normalize to a square shape */
.page-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li a .feather-inline,
.page-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li a .feather-inline svg {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* Mobile: Viho forces sidebar-user img to width:35px !important while the
   inline height stays 90px — stretching logos into a strip. Keep it square
   and proportional (contain) at a size that suits Viho's mobile layout. */
@media screen and (max-width: 991px) {
  .page-wrapper .page-body-wrapper header.main-nav .sidebar-user img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
    border-radius: 50%;
  }
}

/* ------------------------------------------------------------------ */
/*  Mobile tabs — professional scrollable pill row                     */
/*  Bootstrap tab borders wrap into a messy multi-row stack on phones; */
/*  convert every .nav-tabs into a single swipeable row of pills with  */
/*  a solid active state (applies to all 17 tabbed pages at once).     */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 991px) {
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 2px 2px 6px 2px;
    border-bottom: 0 !important;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-item {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    margin-bottom: 0 !important;
    border: 1px solid #dfe7ec !important;
    border-radius: 50rem !important;
    background-color: #ffffff;
    color: #5c6f8a;
    padding: 7px 16px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:focus {
    background-color: #f4f9f7;
    color: #24695c;
    border-color: #cfe0dc !important;
  }
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    background-color: #24695c !important;
    border-color: #24695c !important;
    color: #ffffff !important;
  }

  /* Keep tab chips (category icons) compact inside pills */
  .nav-tabs .nav-link .ems-cat {
    width: 22px !important;
    height: 22px !important;
  }
  .nav-tabs .nav-link .badge {
    font-size: 10px;
    padding: 2px 7px;
  }
}

/* Body background: fixed BG image (white fallback), applied to the
   page-body-wrapper too — Viho paints it #f5f7fb and would otherwise
   cover the body image; `fixed` keeps both layers viewport-aligned */
body,
.page-wrapper .page-body-wrapper,
.page-wrapper .page-body-wrapper footer.footer {
  background: url("/assets/images/bg.png") no-repeat fixed top center #ffffff;
}

/* Viho paints .page-body solid #f5f7fb (style.css) — it sits above the
   wrapper and hides the background image across the entire content area.
   Transparent lets the wrapper's fixed image show through every section. */
.page-wrapper .page-body-wrapper .page-body {
  background-color: transparent;
}

/* ------------------------------------------------------------------ */
/*  Typography — Poppins (Latin) + Tiro Bangla (বাংলা)                 */
/*  Per-character fallback: Latin glyphs render in Poppins, Bengali   */
/*  glyphs fall through to Tiro Bangla — correct in both locales.     */
/* ------------------------------------------------------------------ */
body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea, table,
.badge, .nav-menu, .theme-form,
.landing-wrraper .landing-header ul.landing-menu li.nav-item a.nav-link {
  font-family: "Poppins", "Tiro Bangla", sans-serif;
}
/* Tiro Bangla's ascenders are taller — give Bangla text a little air */
html[lang="bn"] body {
  line-height: 1.8;
}

/* Base text color inside the page content (<main> wraps panel pages).
   Layered on purpose: weak defaults, so utility classes such as
   .text-muted / .text-danger / badges still override. */
@layer base {
  main p, main span {
    color: #3d3d3d;
  }
  /* Spans inside controls must follow the control's own text color
     (buttons set white/teal on themselves — the span inherits it),
     fixing dark-on-green button labels. */
  main button span,
  main a span,
  main .btn span {
    color: inherit;
  }
}

/* ------------------------------------------------------------------ */
/*  Native control theming — teal instead of the browser default blue  */
/*  (checkboxes, radios, date/time/month pickers, select dropdowns)    */
/* ------------------------------------------------------------------ */
input[type="checkbox"],
input[type="radio"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="datetime-local"] {
  accent-color: #24695c;
}
/* accent-color is inherited — theming body covers every native control
   (select popup highlight, picker selected day, etc.) */
body {
  accent-color: #24695c;
}

/* Bootstrap skins .form-check-input itself and hardcodes blue on
   :checked (bootstrap.css "#0d6efd") — accent-color never applies to
   explicitly-styled inputs, so override the blue directly. */
.form-check-input:checked {
  background-color: #24695c;
  border-color: #24695c;
}
.form-check-input:focus {
  border-color: #5ec8b4;
  box-shadow: 0 0 0 0.2rem rgba(36, 105, 92, 0.15);
}
.form-check-input:active {
  filter: none;
  background-color: rgba(36, 105, 92, 0.15);
  border-color: #5ec8b4;
}

/* Kill Bootstrap's remaining blue at the root: --bs-primary drives the
   spinner (PageLoader), .text-primary, links and default focus rings */
:root {
  --bs-primary: #24695c;
  --bs-primary-rgb: 36, 105, 92;
}
.form-control:focus,
.form-control:focus-visible {
  border-color: #5ec8b4;
  box-shadow: 0 0 0 0.2rem rgba(36, 105, 92, 0.12);
}
.text-primary {
  color: #24695c !important;
}

/* Pagination — Viho's bootstrap.css hardcodes Bootstrap blue (#0d6efd) on
   .page-link (text, hover, focus ring and the active pill) instead of using
   CSS variables, so override the classes directly in Viho teal. */
.pagination .page-link {
  color: #5b6b6e;
  border-color: #e6edef;
  border-radius: 6px;
  margin: 0 2px;
  font-weight: 600;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
  color: #24695c;
  background-color: rgba(36, 105, 92, 0.08);
  border-color: #cfe0dc;
  box-shadow: 0 0 0 0.2rem rgba(36, 105, 92, 0.12);
}
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
  color: #ffffff;
  background-color: #24695c;
  border-color: #24695c;
  box-shadow: none;
}
.pagination .page-item.disabled .page-link {
  color: #a3b1af;
  background-color: #f5f7fb;
  border-color: #e6edef;
}

/* ---------------- Alerts (soft tinted, high contrast) ----------------
   Bootstrap's defaults look washed out and Viho repaints .alert-primary
   as solid 80% teal with white text — harsh and hard to read. Use the
   same soft-tint treatment as the badge-style buttons instead. */
.alert {
  border-radius: 10px;
  border-width: 1px;
}
.alert-success {
  background-color: rgba(40, 167, 69, 0.12);
  border-color: rgba(40, 167, 69, 0.28);
  color: #1e7e34;
}
.alert-success .btn-close svg,
.alert-success .btn-close {
  color: #1e7e34;
}
.alert-danger {
  background-color: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.26);
  color: #b02a37;
}
.alert-danger .btn-close svg,
.alert-danger .btn-close {
  color: #b02a37;
}
.alert-warning {
  background-color: rgba(255, 193, 7, 0.16);
  border-color: rgba(210, 165, 10, 0.32);
  color: #8a6d00;
}
.alert-warning .btn-close svg,
.alert-warning .btn-close {
  color: #8a6d00;
}
.alert-primary,
.alert-info {
  background-color: rgba(36, 105, 92, 0.1);
  border-color: rgba(36, 105, 92, 0.24);
  color: #1c5247;
}
.alert-primary .btn-close svg,
.alert-primary .btn-close,
.alert-info .btn-close svg,
.alert-info .btn-close {
  color: #1c5247;
  -webkit-filter: none;
  filter: none;
}

/* ---------------- Custom select dropdown (ui.tsx <Select>) ----------------
   Native <select> popups are painted by the OS (system blue on Windows) and
   cannot be themed, so <Select> renders its own list. These rules keep it
   visually identical to .form-control with the app's teal variant. */
.ems-select {
  position: relative;
}
.ems-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.ems-select-btn:focus,
.ems-select-btn:focus-visible {
  border-color: #5ec8b4;
  box-shadow: 0 0 0 0.2rem rgba(36, 105, 92, 0.12);
  outline: none;
}
.ems-select-btn:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}
.ems-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}
.ems-select-caret {
  flex-shrink: 0;
  color: #59667a;
  transition: transform 0.18s ease;
}
.ems-select.open .ems-select-caret {
  transform: rotate(180deg);
}

/* The open list — same panel styling as the modals / popovers */
.ems-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1060; /* above .ems-modal (1055) */
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  background-color: #ffffff;
  border: 1px solid #e6edef;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  animation: ems-select-in 0.14s ease;
  scrollbar-width: thin;
  scrollbar-color: #9fc9be #f2f8f6;
}
/* Option-list sizing — ONLY for <Select> dropdown lists (never the date /
   time picker menus, which set their own geometry): widens to fit the
   longest option, never narrower than the button, capped to the viewport,
   and right-anchored (.ems-menu-end) when the button is near the right edge */
.ems-select-list {
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: min(480px, calc(100vw - 32px));
}
.ems-select-list.ems-menu-end {
  left: auto;
  right: 0;
}
/* open upward when the button sits near the bottom of the viewport */
.ems-select-list.ems-menu-up {
  top: auto;
  bottom: calc(100% + 4px);
  transform-origin: bottom left;
}
.ems-select-list.ems-menu-up.ems-menu-end {
  transform-origin: bottom right;
}
/* Option labels always show in full: no ellipsis inside the open list.
   The label also fills the row (flex-grow), so multi-select checkboxes
   stay glued to their text — space-between otherwise pushes the label to
   the far right edge — while the single-select check mark keeps its
   right-aligned slot. */
.ems-select-item .ems-select-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Themed scrollbars for the dropdown lists (teal variant, matching the UI
   instead of the browser's default gray) — Chromium/Edge + Firefox */
.ems-select-menu::-webkit-scrollbar,
.ems-time-col::-webkit-scrollbar {
  width: 8px;
}
.ems-select-menu::-webkit-scrollbar-track,
.ems-time-col::-webkit-scrollbar-track {
  background: #f2f8f6;
  border-radius: 8px;
}
.ems-select-menu::-webkit-scrollbar-thumb,
.ems-time-col::-webkit-scrollbar-thumb {
  background: #9fc9be;
  border-radius: 8px;
}
.ems-select-menu::-webkit-scrollbar-thumb:hover,
.ems-time-col::-webkit-scrollbar-thumb:hover {
  background: #24695c;
}
@keyframes ems-select-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Item search inside long dropdowns (8+ options) */
.ems-select-search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 4px 8px;
  background: #ffffff;
  border-bottom: 1px solid #eef3f6;
}
.ems-select-search .form-control {
  border-radius: 8px;
  padding: 0.3rem 0.65rem;
  font-size: 12.5px;
}
.ems-select-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 12.5px;
  color: #8a97a8;
}

/* Rows: white base, soft teal hover/keyboard highlight, solid teal selected */
.ems-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  margin-bottom: 2px; /* a hint of separation between rows */
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: #3d3d3d;
  cursor: pointer;
  user-select: none;
}
/* <optgroup> header row inside the dropdown */
.ems-select-group {
  padding: 9px 14px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a97a8;
  cursor: default;
  user-select: none;
}
.ems-select-group ~ .ems-select-item {
  margin-top: 0;
}
.ems-select-item:last-child {
  margin-bottom: 0;
}
.ems-select-item input[type="checkbox"] {
  flex: 0 0 auto;
  align-self: center;
  margin: 0 10px 0 2px;
  cursor: pointer;
}
.ems-select-item:hover,
.ems-select-item.active {
  background-color: #e7f2ef;
  color: #24695c;
}
.ems-select-item.selected {
  background-color: #24695c;
  color: #ffffff;
  font-weight: 600;
}
.ems-select-item.selected:hover,
.ems-select-item.selected.active {
  background-color: #2b7a6b;
  color: #ffffff;
}
.ems-select-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background-color: transparent;
  color: #6c757d;
}
.ems-select-check {
  flex-shrink: 0;
  color: #ffffff;
}

/* ---------------- Custom time picker (ui.tsx <TimePicker>) ----------------
   Reuses the .ems-select shell (button + menu panel) and adds a
   three-column hour / minute / AM-PM layout with the same teal rows. */
.ems-time-btn .ems-time-clock {
  flex-shrink: 0;
  color: #59667a;
  margin-right: 2px;
}
.ems-time-menu {
  display: flex;
  gap: 4px;
}
.ems-time-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 248px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: #9fc9be #f2f8f6;
}
.ems-time-col.ems-time-mer {
  flex: 0 0 62px;
  justify-content: center;
}
.ems-time-opt {
  width: 100%;
  text-align: center;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background-color: transparent;
  color: #3d3d3d;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.ems-time-opt:hover {
  background-color: #e7f2ef;
  color: #24695c;
}
.ems-time-opt:focus-visible {
  outline: 2px solid #5ec8b4;
  outline-offset: -2px;
}
.ems-time-opt.selected {
  background-color: #24695c;
  color: #ffffff;
  font-weight: 700;
}
.ems-time-opt.selected:hover {
  background-color: #2b7a6b;
  color: #ffffff;
}

/* ---------------- Custom date / month pickers (ui.tsx) ----------------
   Reuse the .ems-select panel; add a month calendar grid and a
   3-column month chooser with the same teal treatment. */
.ems-date-menu {
  display: block;
  min-width: 272px;
  /* natural width (calendar), left-aligned with the button instead of
     stretching to it like the .ems-select list does */
  left: 0;
  right: auto;
}

/* Portalled picker menu (Date/Month) — rendered at <body> with fixed
   coordinates so tall calendars are never clipped by modal overflow */
.ems-select-menu-fixed {
  position: fixed;
  left: auto;
  right: auto;
}
.ems-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 8px 4px;
}
.ems-date-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background-color: transparent;
  color: #59667a;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ems-date-nav:hover:not(:disabled) {
  background-color: #e7f2ef;
  color: #24695c;
}
.ems-date-nav:disabled {
  color: #c3cbd6;
  cursor: not-allowed;
}
.ems-date-title {
  font-size: 13px;
  font-weight: 700;
  color: #242934;
}
/* clickable title — toggles the 12-year quick-jump grid (birth dates) */
.ems-date-title-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  background-color: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #242934;
  cursor: pointer;
}
.ems-date-title-btn:hover {
  background-color: #e7f2ef;
  color: #24695c;
}
.ems-date-title-caret {
  font-size: 10px;
  color: #8a97a8;
  transition: transform 0.15s ease;
}
.ems-date-title-btn[aria-expanded="true"] .ems-date-title-caret {
  transform: rotate(180deg);
}
.ems-year-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px 6px 6px;
}
.ems-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 2px 6px;
}
.ems-date-wd {
  text-align: center;
  padding: 4px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #8a97a8;
}
.ems-date-day {
  border: none;
  border-radius: 8px;
  height: 32px;
  background-color: transparent;
  color: #3d3d3d;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.ems-date-day:hover:not(:disabled) {
  background-color: #e7f2ef;
  color: #24695c;
}
.ems-date-day.today {
  color: #24695c;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px #5ec8b4;
}
.ems-date-day.selected,
.ems-date-day.selected:hover,
.ems-date-day.selected.today {
  background-color: #24695c;
  color: #ffffff;
  font-weight: 700;
  box-shadow: none;
}
.ems-date-day:disabled {
  background-color: transparent;
  color: #c3cbd6;
  cursor: not-allowed;
}
.ems-date-foot {
  padding: 2px 6px 6px;
}
.ems-date-today-btn {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 7px;
  background-color: rgba(36, 105, 92, 0.1);
  color: #24695c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ems-date-today-btn:hover {
  background-color: rgba(36, 105, 92, 0.18);
}
.ems-month-menu {
  min-width: 248px;
}
.ems-month-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding-bottom: 6px;
}
.ems-month-opt {
  border: none;
  border-radius: 8px;
  padding: 9px 4px;
  background-color: transparent;
  color: #3d3d3d;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.ems-month-opt:hover:not(:disabled) {
  background-color: #e7f2ef;
  color: #24695c;
}
.ems-month-opt.selected,
.ems-month-opt.selected:hover {
  background-color: #24695c;
  color: #ffffff;
  font-weight: 700;
}
.ems-month-opt:disabled {
  color: #c3cbd6;
  cursor: not-allowed;
}

/* Legacy safety net for any native <select> rendered outside the <Select>
   component: white rows + teal selected instead of the OS blue */
select.form-control {
  accent-color: #24695c;
  color-scheme: light;
}
select option {
  background-color: #ffffff;
  color: #3d3d3d;
}
select option:checked,
select option:selected {
  background-color: #24695c;
  color: #ffffff;
}

/* Bootstrap dropdown-menu items (menus built with .dropdown-item) —
   bootstrap.css hardcodes the active/clicked row to the BS blue #0d6efd */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(36, 105, 92, 0.08);
  color: #1c5247;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: #24695c !important;
  color: #ffffff !important;
}

/* Date / time / month picker indicator icons — replaced with teal SVGs
   (the default icons ignore color) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2324695c'%3E%3Cpath d='M14 0H2A2 2 0 0 0 0 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.5A1.5 1.5 0 0 1 2.5 2h11A1.5 1.5 0 0 1 15 3.5v1H1v-1zM1 6h14v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6zm5.5-3h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm4.5 0h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
  cursor: pointer;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2324695c'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1zm.5 2.5a.5.5 0 0 0-1 0v4.2a.5.5 0 0 0 .25.43l3 1.8a.5.5 0 0 0 .5-.86l-2.75-1.65V3.5z'/%3E%3C/svg%3E");
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(36, 105, 92, 0.12);
  border-radius: 4px;
}
input[type="date"].form-control:focus,
input[type="time"].form-control:focus,
input[type="month"].form-control:focus,
select.form-control:focus {
  border-color: #5ec8b4;
  box-shadow: 0 0 0 0.2rem rgba(36, 105, 92, 0.12);
}

/* ---------------- EMS brand badge (logo) ---------------- */
.ems-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #24695c 0%, #5ec8b4 100%);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(36, 105, 92, 0.35);
}
.ems-logo-badge.sm {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.ems-logo-badge.lg {
  width: 52px;
  height: 52px;
  font-size: 20px;
}
.ems-logo-badge.white {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

/* ---------------- Feather inline icon sizing ---------------- */
.feather-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 1;
  vertical-align: middle;
}
.feather-inline svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feather-inline.svg-12, .feather-inline.svg-12 svg { width: 12px; height: 12px; }
.feather-inline.svg-14, .feather-inline.svg-14 svg { width: 14px; height: 14px; }
.feather-inline.svg-16, .feather-inline.svg-16 svg { width: 16px; height: 16px; }
.feather-inline.svg-20, .feather-inline.svg-20 svg { width: 20px; height: 20px; }
.feather-inline.svg-24, .feather-inline.svg-24 svg { width: 24px; height: 24px; }
.feather-inline.svg-32, .feather-inline.svg-32 svg { width: 32px; height: 32px; }

/* ---------------- Cursor / misc ---------------- */
.cursor-pointer { cursor: pointer; }
.text-underline { text-decoration: underline; }
.min-w-0 { min-width: 0; }

/* ---------------- Stat / media cards ---------------- */
.ems-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ems-stat-icon svg { width: 24px; height: 24px; }
.ems-stat-icon.teal   { background: rgba(36, 105, 92, 0.12); color: #24695c; }
.ems-stat-icon.blue   { background: rgba(34, 126, 230, 0.12); color: #227ee6; }
.ems-stat-icon.purple { background: rgba(122, 96, 214, 0.12); color: #7a60d6; }
.ems-stat-icon.orange { background: rgba(247, 154, 27, 0.14); color: #f79a1b; }
.ems-stat-icon.red    { background: rgba(232, 74, 91, 0.12); color: #e84a5b; }
.ems-stat-icon.sky    { background: rgba(67, 180, 229, 0.14); color: #43b4e5; }
.ems-stat-icon.pink   { background: rgba(236, 101, 144, 0.13); color: #ec6590; }

/* ---------------- Type gradient chips (institution types) ---------------- */
.ems-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  white-space: nowrap;
}
.ems-type-KINDERGARTEN { background: rgba(236, 101, 144, 0.13); color: #d64b7e; }
.ems-type-PRIMARY      { background: rgba(67, 180, 229, 0.15); color: #2b9ecf; }
.ems-type-HIGH_SCHOOL  { background: rgba(36, 105, 92, 0.13); color: #24695c; }
.ems-type-COLLEGE      { background: rgba(122, 96, 214, 0.13); color: #7a60d6; }
.ems-type-UNIVERSITY   { background: rgba(64, 169, 118, 0.14); color: #40a976; }
.ems-type-COACHING     { background: rgba(247, 154, 27, 0.16); color: #d9820b; }
.ems-type-MADRASHA     { background: rgba(32, 155, 155, 0.14); color: #209b9b; }

/* Neutral teal pill for card meta (e.g. "1,200 students" on landing package
   cards). Replaces badge-light, whose white .badge text sat unreadably on the
   pale #e6edef badge background. Same shape as .ems-type-pill. */
.ems-pill-teal {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  white-space: nowrap;
  background: rgba(36, 105, 92, 0.1);
  color: #24695c;
}

/* ---------------- Academic category accents (badge style) ---------------- */
/* Soft tinted badge backgrounds with the icon in the category color —
   matches the badge/notification styling used across the app */
.ems-cat {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ems-cat-CLASS      { background: rgba(36, 105, 92, 0.14);  color: #24695c; }
.ems-cat-SECTION    { background: rgba(34, 126, 230, 0.14); color: #227ee6; }
.ems-cat-DEPARTMENT { background: rgba(122, 96, 214, 0.14); color: #7a60d6; }
.ems-cat-SESSION    { background: rgba(64, 169, 118, 0.16); color: #2e9166; }
.ems-cat-SUBJECT    { background: rgba(247, 154, 27, 0.18); color: #d9820b; }
.ems-cat-GROUP      { background: rgba(232, 74, 91, 0.14);  color: #e84a5b; }
.ems-cat-SHIFT      { background: rgba(32, 155, 155, 0.16); color: #1c8b8b; }
.ems-cat-ROOM       { background: rgba(107, 124, 147, 0.16); color: #5c6f8a; }
.ems-cat-KINDERGARTEN { background: rgba(236, 101, 144, 0.15); color: #d64b7e; }
.ems-cat-PRIMARY      { background: rgba(67, 180, 229, 0.16); color: #2b9ecf; }
.ems-cat-HIGH_SCHOOL  { background: rgba(36, 105, 92, 0.14); color: #24695c; }
.ems-cat-COLLEGE      { background: rgba(122, 96, 214, 0.14); color: #7a60d6; }
.ems-cat-UNIVERSITY   { background: rgba(64, 169, 118, 0.16); color: #2e9166; }
.ems-cat-COACHING     { background: rgba(247, 154, 27, 0.18); color: #d9820b; }
.ems-cat-MADRASHA     { background: rgba(32, 155, 155, 0.16); color: #1c8b8b; }

/* ---------------- Landing page ---------------- */
.ems-hero {
  background:
    radial-gradient(1000px 400px at 70% -10%, rgba(94, 200, 180, 0.35), transparent),
    radial-gradient(800px 400px at 10% 110%, rgba(36, 105, 92, 0.18), transparent),
    linear-gradient(180deg, #ffffff 0%, #f3f9f7 100%);
}
.ems-hero-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(36, 105, 92, 0.08);
  transition: all 0.3s ease;
}
.ems-hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(36, 105, 92, 0.14);
}
/* ---------------- Landing footer ---------------- */
/* Viho's bare "footer {}" rule (style.css) offsets every footer by the
   admin panel's 275px sidebar (margin-left) and pads it 15px — meant for
   dashboard pages. The landing footer is a full-width page footer that
   must align with the centered .container body content. */
.ems-footer {
  margin-left: 0;
  padding: 0;
  width: 100%;
}
/* Footer column captions: small uppercase teal labels instead of the
   body-weight h6, so link columns read as groups at a glance */
.ems-footer-head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #24695c;
  margin-bottom: 0.85rem;
}
/* Muted links turn teal with an underline on hover (footer is center-
   aligned, so a slide effect would look off-balance) */
.ems-footer-links li {
  margin-bottom: 0.55rem;
}
.ems-footer-links a {
  color: #7c8a9a;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ems-footer-links a:hover {
  color: #24695c !important;
  text-decoration: underline;
}
/* Institution-type chips lift gently on hover */
.ems-footer-types .ems-type-pill {
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ems-footer-types .ems-type-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(36, 105, 92, 0.14);
}
/* Footer brand lockup: logo + name + tagline on one line from md up */
.ems-footer-brand { flex-wrap: wrap; }
.ems-footer-brand-sep { width: 1px; height: 18px; background: #d8e2df; display: none; }
@media (min-width: 768px) {
  .ems-footer-brand { flex-wrap: nowrap; }
  .ems-footer-brand-sep { display: inline-block; }
  .ems-footer-brand p { white-space: nowrap; }
}
/* Soft divider above the copyright row (replaces the bare <hr>) */
.ems-footer-bar {
  border-top: 1px solid #eef2f5;
}

/* ---------------- Portal dashboard hero ---------------- */
/* Teal gradient welcome banner; the subscription summary sits in a
   white card on the right (ems-hero-side) */
.ems-dash-hero {
  background: linear-gradient(120deg, #24695c 0%, #38857a 55%, #5ec8b4 100%);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(36, 105, 92, 0.18);
}
.ems-dash-hero .ems-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-radius: 50rem;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ems-hero-side {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 12px;
  color: #212529;
}

/* Notice/event feed rows in the dashboard cards */
.ems-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #e9eef2;
  text-decoration: none !important;
}
.ems-feed-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ems-feed-item:first-child {
  padding-top: 2px;
}
.ems-feed-date {
  flex-shrink: 0;
  min-width: 52px;
  text-align: center;
  border-radius: 10px;
  background: rgba(36, 105, 92, 0.08);
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #24695c;
  line-height: 1.3;
}
.ems-feed-date span {
  display: block;
  font-size: 15px;
}
.ems-cta {
  background: linear-gradient(120deg, #24695c 0%, #38857a 55%, #5ec8b4 100%);
  color: #fff;
  border-radius: 14px;
}
/* Viho's .btn-primary-light (10% teal tint + dark-teal label) is meant for
   white page backgrounds — on the dark .ems-cta gradient the label vanishes.
   Give the CTA button a solid white pill with teal text instead. */
.ems-cta .btn-primary-light,
.ems-cta .btn-primary-light:hover,
.ems-cta .btn-primary-light:focus {
  background: linear-gradient(135deg, #3aac93 0%, #1f8b78 100%) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 12px 24px -10px rgba(31, 139, 120, 0.5);
}
.ems-cta .btn-primary-light:hover,
.ems-cta .btn-primary-light:focus {
  filter: brightness(1.05);
  color: #fff !important;
}

/* ---------------- Revenue chart (CSS bars) ---------------- */
/* ---------------- Profile dropdown opens on tap (touch screens) ----------------
   The theme shows the topbar profile menu only on :hover — phones/tablets
   have none, so PanelShell toggles .open on the avatar tap. State-driven
   only (no :focus-within): it would keep the menu open after an outside
   tap-to-close while the avatar still holds focus. Same reveal as hover. */
.onhover-dropdown.open .onhover-show-div {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}
.onhover-dropdown.open .onhover-show-div::before {
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  content: ""; top: -7px; position: absolute; left: 10px; z-index: 2;
}

/* ---------------- Premium SVG charts (Accounts module) ---------------- */
.ems-chart-wrap { position: relative; }
.ems-chart-tip {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(16, 42, 36, 0.28);
  padding: 8px 12px;
  pointer-events: none;
  z-index: 5;
  min-width: 132px;
}
.ems-chart-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px; height: 9px;
  background: #fff;
  border-right: 1px solid #e4e9ef;
  border-bottom: 1px solid #e4e9ef;
  transform: translateX(-50%) rotate(45deg);
}

/* ---------------- Chart.js external tooltips (src/components/charts.tsx) ----
   Rendered as DOM (not canvas) so small charts like the 148px attendance
   donuts never clip them. Rows align strictly: color dot · label … value. */
.ems-chart-wrap { position: relative; }
.ems-chart-tooltip {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  min-width: 118px;
  max-width: 280px;
  padding: 8px 11px 9px;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(16, 42, 36, 0.32);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: #1c2b27;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ems-chart-tooltip .ems-tip-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9aa7a3;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ems-chart-tooltip .ems-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ems-chart-tooltip .ems-tip-row + .ems-tip-row { margin-top: 4px; }
.ems-chart-tooltip .ems-tip-dot {
  width: 8px; height: 8px;
  border-radius: 3px;
  border: 1px solid rgba(28, 43, 39, 0.18);
  box-sizing: border-box;
  flex: 0 0 auto;
}
.ems-chart-tooltip .ems-tip-label {
  color: #717171;
  font-weight: 600;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ems-chart-tooltip .ems-tip-row b {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 800;
  font-size: 12.5px;
  color: #1c2b27;
  flex: 0 0 auto;
}


.ems-bar {
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #5ec8b4 0%, #24695c 100%);
  min-height: 6px;
  transition: height 0.4s ease;
  max-width: 46px;
  margin: 0 auto;
  width: 100%;
}

/* ---------------- Badge-style soft buttons (whole system) ---------------- */
/* Pill-shaped, tinted badge look: soft background + colored label.
   Used for secondary/action buttons (Suspend, Approve, Logout, Edit…) */
.btn-soft-primary {
  background: rgba(36, 105, 92, 0.12);
  color: #24695c;
  border-radius: 50rem;
  border: 1px solid rgba(36, 105, 92, 0.16);
}
.btn-soft-primary:hover, .btn-soft-primary:focus {
  background: rgba(36, 105, 92, 0.2);
  color: #1c5247;
}
.btn-soft-success {
  background: rgba(40, 167, 69, 0.13);
  color: #1e7e34;
  border-radius: 50rem;
  border: 1px solid rgba(40, 167, 69, 0.18);
}
.btn-soft-success:hover, .btn-soft-success:focus {
  background: rgba(40, 167, 69, 0.22);
  color: #17692b;
}
.btn-soft-danger {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
  border-radius: 50rem;
  border: 1px solid rgba(220, 53, 69, 0.16);
}
.btn-soft-danger:hover, .btn-soft-danger:focus {
  background: rgba(220, 53, 69, 0.2);
  color: #b02a37;
}
.btn-soft-warning {
  background: rgba(255, 193, 7, 0.18);
  color: #9a7b00;
  border-radius: 50rem;
  border: 1px solid rgba(210, 165, 10, 0.22);
}
.btn-soft-warning:hover, .btn-soft-warning:focus {
  background: rgba(255, 193, 7, 0.28);
  color: #7c6300;
}
.btn-soft-info {
  background: rgba(23, 162, 184, 0.13);
  color: #117a8b;
  border-radius: 50rem;
  border: 1px solid rgba(23, 162, 184, 0.18);
}
.btn-soft-info:hover, .btn-soft-info:focus {
  background: rgba(23, 162, 184, 0.22);
  color: #0d6675;
}
.btn-soft-secondary {
  background: #f1f4f6;
  color: #5c6f8a;
  border-radius: 50rem;
  border: 1px solid #e3e9ee;
}
.btn-soft-secondary:hover, .btn-soft-secondary:focus {
  background: #e8edf1;
  color: #46587a;
}

/* ---------------- Auth show/hide toggle ---------------- */
/* Viho generates a CSS "show" text label on .show-hide span.show::before;
   the EMS login uses the language-neutral eye icon instead */
.show-hide span.show::before,
.show-hide span.hide::before {
  content: none !important;
}
.show-hide span {
  display: inline-flex;
  align-items: center;
  color: #24695c;
}

/* ---------------- Auth pages ---------------- */
.ems-auth-wrapper {
  min-height: 100vh;
  background-color: transparent; /* no tint — only a background image, if any, shows */
}
.ems-auth-brand {
  background: linear-gradient(135deg, #24695c 0%, #35907f 55%, #5ec8b4 100%);
}

/* ---------------- Login page — fits the viewport, no page scrollbar ----------------
   Scoped to the login wrapper (.ems-auth-fit) only: the theme's .login-card is
   height:100vh, which stacked under the language-switcher row + container
   padding always pushed the page past the viewport. Here the wrapper becomes a
   fixed-height shell — the card centers in what's left and never overflows;
   register/forgot keep their natural page scrolling. */
@media (min-width: 992px) {
  .ems-auth-fit {
    height: 100vh;
    overflow: hidden;
  }
  .ems-auth-fit > .container-fluid {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    padding-bottom: 8px;
  }
  /* language switcher row — slimmer inside the fitted shell */
  .ems-auth-fit > .container-fluid > .d-flex {
    padding-top: 0 !important;
    padding-bottom: 2px !important;
  }
  .ems-auth-fit .login-card {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    /* the theme paints a teal 10% tint on this band — drop the color only
       (a background image, if the theme ever adds one, stays) */
    background-color: transparent;
  }
  .ems-auth-fit .ems-login-split {
    max-height: 100%;
  }
  /* safety net for unusually short viewports: the form column scrolls inside
     the card (menus stay unclipped on normal heights, where overflow is
     visible) instead of the page */
  @media (max-height: 639px) {
    .ems-auth-fit .ems-login-formcol {
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
}

/* ---------------- Login card — compact + premium ---------------- */
.ems-login-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(36, 105, 92, 0.14) !important;
  border-radius: 18px !important;
  background: linear-gradient(168deg, #ffffff 0%, #fbfefd 55%, #f1f8f4 100%) !important;
  box-shadow:
    0 26px 60px -20px rgba(16, 58, 50, 0.28),
    0 2px 8px rgba(16, 58, 50, 0.06) !important;
}
/* brand accent rail */
.ems-login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #24695c 0%, #5ec8b4 55%, #d4af37 100%);
}
/* soft mint glow, top right */
.ems-login-card::after {
  content: ""; position: absolute; top: -70px; right: -70px; width: 200px; height: 200px;
  border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, rgba(94, 200, 180, 0.18) 0%, transparent 70%);
}
.ems-login-card .card-body { position: relative; }
@media (min-width: 768px) {
  .ems-login-card .card-body { padding: 26px 28px 16px !important; }
}
.ems-login-card .form-group { margin-bottom: 0.9rem; }
.ems-login-card .col-form-label { padding-bottom: 0.25rem; font-size: 13px; }
/* institution-code hint stays out of the way until the field is in use */
.ems-login-card .institution-hint {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
.ems-login-card .form-group:focus-within .institution-hint {
  max-height: 44px; opacity: 1; margin-top: 4px;
}
/* secondary card (demo credentials) — same finish, quieter */
.ems-login-side {
  border-radius: 14px !important;
  border: 1px solid rgba(36, 105, 92, 0.12) !important;
  background-color: #ffffff !important;
  box-shadow: 0 14px 34px -18px rgba(16, 58, 50, 0.22) !important;
}

/* ---------------- Public apply wizard ----------------
   .login-card's height:100vh + align-items:center clips a tall form's top
   out of the viewport. This wrapper centers via child margin:auto instead —
   centered when short, fully reachable by page scroll when tall. */
.ems-apply-wrap {
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 4px 0 28px;
}
.ems-apply-wrap > * {
  margin: auto 0;
}
/* the wizard card always fits the screen: title/stepper/nav stay visible and
   only the step body scrolls (ems-wizard-scroll) */
.ems-wizard-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 170px);
}
/* the theme's .login-form adds 30px card padding around the card-body —
   the wizard card's own body padding is enough */
.ems-wizard-card.login-form {
  padding: 0;
}
.ems-wizard-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden; /* dropdown menus anchor inside — nothing may widen the body */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
/* inside dialogs without a height-constrained flex chain (portal modal) the
   step body still gets its own viewport-based ceiling */
.ems-modal .ems-wizard-scroll {
  max-height: calc(100vh - 340px);
}
@media (max-width: 767.98px) {
  /* phones: natural page scrolling beats a nested scroll box */
  .ems-apply-wrap {
    min-height: 0;
  }
  .ems-wizard-card {
    max-height: none;
  }
  .ems-wizard-scroll {
    max-height: none;
    overflow-y: visible;
  }
  /* phones: slim side padding so the form uses the available width */
  .ems-apply-page > .container-fluid {
    padding-left: 6px;
    padding-right: 6px;
  }
  .ems-apply-page .card-body {
    padding: 10px 12px 12px !important;
  }
  /* auth cards (login / register / forgot): no forced 100vh centering —
     tall stacks (form + demo credentials) flow from the top and scroll
     naturally instead of being clipped at the viewport edge */
  .login-card {
    height: auto;
    min-height: 0;
    align-items: flex-start;
    padding: 4px 6px 24px;
  }
  /* drop the theme's .login-form padding that stacks on top of the
     card-body's own padding — halves the side chrome */
  .login-card .login-form {
    padding: 0;
  }
  .login-card .card-body {
    padding: 20px 16px !important;
  }
  /* dropdown lists hang centered under their control instead of hugging the
     button's left edge — menus are nearly full-width on phones, so a left
     anchor makes them sit off-center in the card. animation-name needs
     !important to beat the base .ems-select-menu shorthand later in the
     file, and that keyframe pair ends at the same translateX(-50%). */
  .ems-select-list {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    transform-origin: top center;
    animation-name: emsMenuInCenter !important;
  }
}

/* ---------------- React-controlled modal (Bootstrap markup) ---------------- */
.ems-modal {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ems-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 41, 52, 0.45);
}
.ems-modal .modal-content {
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* tall forms (e.g. the inquiry form) scroll their BODY only — the header
   stays pinned and the dialog always fits the screen */
.ems-modal .modal-header {
  flex: 0 0 auto;
}
.ems-modal .modal-body {
  overflow-y: auto;
}

/* ---------------- Internet connection status (ConnectionStatus.tsx) ---------------- */
.ems-conn-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(36, 41, 52, 0.55);
  backdrop-filter: blur(3px);
  animation: ems-conn-fade 0.2s ease both;
}
@keyframes ems-conn-fade {
  from { opacity: 0; }
}
.ems-conn-card {
  max-width: 400px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 30px 26px 24px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  animation: ems-conn-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ems-conn-pop {
  from { transform: scale(0.92); opacity: 0; }
}
/* pulsing halo ring around the emblem */
.ems-conn-ring {
  transform-origin: 60px 60px;
  animation: ems-conn-ring 2.2s ease-in-out infinite;
}
@keyframes ems-conn-ring {
  0% { transform: scale(0.94); stroke-opacity: 0.9; }
  70% { transform: scale(1.08); stroke-opacity: 0.15; }
  100% { transform: scale(0.94); stroke-opacity: 0.9; }
}
/* wifi arcs "searching" — light up in sequence */
.ems-conn-arc { opacity: 0.25; }
.ems-conn-arc-1 { animation: ems-conn-arc 1.6s ease-in-out infinite; }
.ems-conn-arc-2 { animation: ems-conn-arc 1.6s ease-in-out 0.2s infinite; }
@keyframes ems-conn-arc {
  0%, 100% { opacity: 0.25; }
  35% { opacity: 1; }
}
.ems-conn-dot {
  transform-origin: 60px 82px;
  animation: ems-conn-dot 1.6s ease-in-out infinite;
}
@keyframes ems-conn-dot {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  35% { transform: scale(1.35); opacity: 1; }
}
/* slash draws itself in, then stays */
.ems-conn-slash {
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
  animation: ems-conn-slash 0.5s ease-out 0.15s forwards;
}
@keyframes ems-conn-slash {
  to { stroke-dashoffset: 0; }
}
/* "reconnecting…" dots */
.ems-conn-dots {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.ems-conn-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #24695c;
  animation: ems-conn-pulse 1.2s ease-in-out infinite;
}
.ems-conn-pulse:nth-child(2) { animation-delay: 0.18s; }
.ems-conn-pulse:nth-child(3) { animation-delay: 0.36s; }
@keyframes ems-conn-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.35; }
  50% { transform: scale(1.15); opacity: 1; }
}
/* back-online toast */
.ems-conn-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #24695c;
  color: #ffffff;
  font-size: 13.5px;
  box-shadow: 0 12px 34px rgba(36, 105, 92, 0.4);
  animation: ems-conn-toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ems-conn-toast-icon { display: inline-flex; }
@keyframes ems-conn-toast-in {
  from { transform: translate(-50%, -26px); opacity: 0; }
}

/* ---------------- Track page status emblems ---------------- */
.ems-track-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.ems-track-pending {
  background: rgba(36, 105, 92, 0.08);
}
.ems-track-pending .ems-track-ring {
  transform-origin: 24px 24px;
  animation: ems-track-spin 1.6s linear infinite;
}
@keyframes ems-track-spin {
  to { transform: rotate(360deg); }
}
.ems-track-approved {
  background: rgba(37, 158, 106, 0.12);
  color: #1d9a67;
  animation: ems-track-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ems-track-rejected {
  background: rgba(217, 83, 79, 0.1);
  color: #d9534f;
  animation: ems-track-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ems-track-pop {
  from { transform: scale(0.6); opacity: 0; }
}

/* ---------------- Public User Guide (/guide) ---------------- */
.ems-guide-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(36, 105, 92, 0.09);
  color: #24695c;
}
.ems-guide-legend {
  border: 1px solid rgba(36, 105, 92, 0.2);
  border-radius: 10px;
  background: rgba(36, 105, 92, 0.04);
  padding: 12px 14px;
}
.ems-guide-role {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 11px;
  background: #ffffff;
  border: 1px solid rgba(36, 105, 92, 0.25);
  color: #24695c;
  font-size: 11.5px;
  font-weight: 700;
}
.ems-guide-role.sm {
  font-size: 10.5px;
  padding: 2px 9px;
}
.ems-guide-section-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #24695c;
  box-shadow: 0 0 0 4px rgba(36, 105, 92, 0.14);
  flex-shrink: 0;
}
.ems-guide-module {
  border: 1px solid #e6edef;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #ffffff;
}
.ems-guide-module-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
/* process timeline: START chip → numbered steps on a connector → DONE chip */
.ems-guide-flow {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ems-guide-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  align-self: center;
  white-space: nowrap;
}
.ems-guide-chip.start {
  background: rgba(36, 105, 92, 0.1);
  color: #24695c;
}
.ems-guide-chip.done {
  background: rgba(37, 158, 106, 0.12);
  color: #1d9a67;
}
.ems-guide-steps {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.ems-guide-steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, #5ec8b4 0%, rgba(94, 200, 180, 0.25) 100%);
}
.ems-guide-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;
}
.ems-guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #24695c;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px #ffffff;
}
@media (max-width: 575.98px) {
  .ems-guide-flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ems-guide-module {
    padding: 12px;
  }
}

/* ---------------- Tables ---------------- */
.table > :not(caption) > * > * { padding: 0.75rem 0.9rem; }
.ems-table-head { background: #f8f9fa; }

/* ---------------- Empty state ---------------- */
.ems-empty-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 105, 92, 0.09);
  color: #24695c;
}
.ems-empty-icon svg { width: 30px; height: 30px; }

/* ---------------- Spinner ---------------- */
.ems-spin {
  animation: ems-rotate 0.8s linear infinite;
}
@keyframes ems-rotate {
  to { transform: rotate(360deg); }
}

/* ---------------- Selection item tiles (portal academic) ---------------- */
.ems-select-tile {
  border: 2px solid #e6edef;
  border-radius: 12px;
  background: #fff;
  padding: 18px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  height: 100%;
}
.ems-select-tile:hover { border-color: #5ec8b4; background: #f7fcfa; }
.ems-select-tile.active {
  border-color: #24695c;
  background: linear-gradient(160deg, rgba(36, 105, 92, 0.07), rgba(94, 200, 180, 0.12));
}
.ems-select-tile .ems-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #24695c;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}
.ems-select-tile.active .ems-check { display: inline-flex; }
.ems-select-tile .ems-check svg { width: 12px; height: 12px; }

/* ---------------- Payment progress ---------------- */
.ems-progress-thin { height: 8px; border-radius: 6px; }

/* ---------------- Sidebar user (Viho) tweak for two panels ---------------- */
.main-nav .sidebar-user img {
  object-fit: cover;
}

/* ---------------- Sidebar nav active state (EMS) ---------------- */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.active > a.nav-link.menu-title {
  background-color: #24695c;
  color: #fff;
  position: relative;
  box-shadow: 0 4px 12px rgba(36, 105, 92, 0.35);
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.active > a.nav-link.menu-title svg {
  color: #fff;
}
/* Sidebar hover: soft teal tint with teal text — must override Viho's pale-mint
   hover color (#d0efe9) and its !important svg color, which are unreadable on
   a light background. Active keeps the solid teal + white treatment. */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li > a.nav-link.menu-title:hover {
  background-color: rgba(36, 105, 92, 0.12) !important;
  color: #24695c !important;
  border-radius: 6px;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li > a.nav-link.menu-title:hover svg {
  color: #24695c !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.active > a.nav-link.menu-title:hover {
  background-color: #24695c !important;
  color: #fff !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.active > a.nav-link.menu-title:hover svg {
  color: #fff !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.active > a.nav-link.menu-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  height: 84%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #5ec8b4;
}

/* ---------------- Sidebar section headers (grouped menu) ----------------
   Menu items keep their sequence; a non-clickable uppercase label is shown
   whenever the item's `group` changes, so the long list scans in sections. */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.ems-nav-group {
  list-style: none;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.ems-nav-group > span {
  display: block;
  margin: 14px 0 4px;
  padding: 14px 15px 2px;
  border-top: 1px solid #e6edef;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b95a5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* The first section sits right under the panel title's own divider — no double line */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.sidebar-main-title + li.ems-nav-group > span {
  margin-top: 0;
  padding-top: 2px;
  border-top: 0;
}

/* Profile dropdown (onhover) */
.profile-dropdown {
  padding: 0;
  list-style: none;
}

/* ---------------- Topbar language switcher (compact EN | বাং) ---------------- */
[aria-label="Language"] .btn {
  padding: 2px 9px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
}

/* ---------------- Avatar profile dropdown (anchored inside the page) ------- */
.nav-right .onhover-dropdown {
  position: relative;
}
.nav-right .profile-dropdown.onhover-show-div {
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 6px;
  border: 1px solid #e6edef;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding-bottom: 6px;
}
.nav-right .profile-dropdown.onhover-show-div:before,
.nav-right .profile-dropdown.onhover-show-div:after {
  display: none;
}

/* Page header title */
.page-header-title h4 {
  color: #242934;
}

/* Footer lighter */
footer.footer {
  box-shadow: none;
}

/* ---------------- Sidebar footer (pinned to the menu bottom) ------------ */
/* Viho's main-nav is position:fixed with height:100% + top:83px (taller than
   the viewport). Re-pin it to the real viewport height and lay it out as a
   flex column: sidebar-user (fixed) → nav (flexible, scrolls) → footer.
   The full chain main-nav → nav → .main-navbar → #mainnav → .nav-menu must
   each flex/size, otherwise the menu pushes the footer out of the sidebar. */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* top comes from the theme per breakpoint (83px desktop, 65/59px mobile in
     responsive.css) — anchoring the bottom makes the height follow it exactly,
     so the menu always reaches the screen bottom with no gap */
  bottom: 0;
  height: auto;
  overflow: hidden;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav > nav {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav > nav .main-navbar,
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav > nav .main-navbar #mainnav {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
/* Same specificity as Viho's `calc(100vh - 355px)` rule; increlog.css loads
   after style.css, so this wins and the menu fills the flex column. */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu {
  height: 100%;
  max-height: 100%;
}
/* Viho styles every <footer> as the page footer that sits beside the sidebar
   (`footer { margin-left: 275px; padding: 15px }` in style.css). That rule also
   matches this in-sidebar footer: the margin squeezes it into a ~30px strip whose
   per-character-wrapped text grows ~1200px tall, and with flex-shrink: 0 it
   crushes the nav menu to 0 height (menu items disappear). Reset the leaked
   page-footer geometry — increlog.css loads after style.css, so this wins. */
.ems-sidebar-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: 0;
  width: 100%;
  padding: 14px 16px 16px;
  border-top: 1px solid #e6edef;
  background: #fff;
}
.ems-sidebar-footer p {
  color: #7f8fa4;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 0;
  word-break: break-word;
}
@media (max-width: 1199px) {
  .ems-sidebar-footer {
    padding-bottom: 24px; /* room above the mobile back button overlay */
  }
}

/* ---------------- Body footer (moved out of the sidebar menu) ----------------
   Viho styles every <footer> with margin-left: 275px and shifts it with the
   sidebar state via `header.main-nav ~ footer` rules — the same treatment the
   page body gets, which is exactly what we want here. Only the typography is
   toned down; centered content via the text-center utility. */
.ems-body-footer {
  padding: 14px 20px 16px;
}
.ems-body-footer p {
  color: #7f8fa4;
  font-size: 12px;
  line-height: 1.6;
}
/* logo + copyright + developed-by on a single line from md up */
.ems-body-footer-line { flex-wrap: wrap; }
.ems-body-footer-sep { width: 1px; height: 14px; background: #d7dfe6; display: none; }
@media (min-width: 768px) {
  .ems-body-footer-line { flex-wrap: nowrap; }
  .ems-body-footer-line p { white-space: nowrap; }
  .ems-body-footer-sep { display: inline-block; }
}
/* landing footer bottom bar: never wrap the two items on desktop */
@media (min-width: 768px) {
  .ems-footer-bar { flex-wrap: nowrap !important; }
  .ems-footer-bar p { white-space: nowrap; }
}

/* ---------------- Invoice number chip (high contrast) ---------------- */
.ems-invoice-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(36, 105, 92, 0.14);
  color: #1c5247;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ---------------- Student roll chip (high contrast) ---------------- */
.ems-roll-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(44, 50, 63, 0.09);
  color: #34405a;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ---------------- Print / misc ---------------- */
.ems-fs-11 { font-size: 11px; }
.ems-fs-12 { font-size: 12px; }
.ems-fs-13 { font-size: 13px; }
.ems-fw-800 { font-weight: 800; }
.ems-text-teal { color: #24695c; }
.ems-bg-soft { background: #f8fafb; }

/* ---------------- Student avatar (photo with initials fallback) ---------------- */
.ems-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(36, 105, 92, 0.14);
  color: #24695c;
  font-weight: 800;
  letter-spacing: 0.3px;
  user-select: none;
}
.ems-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ems-avatar-click {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ems-avatar-click:hover,
.ems-avatar-click:focus-visible {
  border-color: #24695c;
  box-shadow: 0 0 0 3px rgba(36, 105, 92, 0.15);
  outline: none;
}
.ems-avatar-edit-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #24695c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* ---------------- Owned academic tile holder (edit/delete row) ---------------- */
.ems-select-tile-hold {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ems-select-tile-hold .ems-select-tile { flex: 1 1 auto; }

/* ---------------- Channel toggle pills (communication panel) ---------------- */
.ems-channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid #e6edef;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 13px;
  color: #525f7f;
  user-select: none;
}
.ems-channel:hover { border-color: #5ec8b4; }
.ems-channel.active {
  border-color: #24695c;
  background: linear-gradient(160deg, rgba(36, 105, 92, 0.07), rgba(94, 200, 180, 0.12));
  color: #24695c;
}
.ems-channel svg { width: 16px; height: 16px; }

/* ---------------- Pinned notice card ---------------- */
.card.ems-notice-pinned {
  border-color: rgba(36, 105, 92, 0.28);
  box-shadow: 0 4px 14px rgba(36, 105, 92, 0.1);
}

/* ---------------- Committee member chips ---------------- */
.ems-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: 8px;
  background: #f5f8f7;
  border: 1px solid #e3ece9;
  font-size: 12.5px;
}
.ems-member-role {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  background: #24695c;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ems-member-name {
  font-weight: 600;
  color: #3d3d3d;
  white-space: nowrap;
}
.ems-member-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #8a97a8;
  border-radius: 6px;
  padding: 3px;
  cursor: pointer;
}
.ems-member-x:hover {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

/* ---------------- Promotion selected row ---------------- */
.table tr.ems-row-selected td {
  background-color: rgba(36, 105, 92, 0.07);
}

/* ---------------- Support ticket conversation thread ---------------- */
.ems-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #9fc9be #f2f8f6;
}
.ems-thread::-webkit-scrollbar { width: 8px; }
.ems-thread::-webkit-scrollbar-track { background: #f2f8f6; border-radius: 8px; }
.ems-thread::-webkit-scrollbar-thumb { background: #9fc9be; border-radius: 8px; }
.ems-thread::-webkit-scrollbar-thumb:hover { background: #24695c; }
.ems-thread-item {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
/* institution's own messages — left, neutral */
.ems-thread-me {
  align-self: flex-start;
  background: #f1f4f9;
  color: #2c323f;
  border-bottom-left-radius: 4px;
}
/* support team answers — right, teal */
.ems-thread-support {
  align-self: flex-end;
  background: #e7f2ef;
  color: #24695c;
  border-bottom-right-radius: 4px;
}

/* ------------------------------------------------------------------ */
/*  Result sheet print — isolate the sheet, hide app chrome            */
/* ------------------------------------------------------------------ */
/* stale-while-refreshing: the previous sheet stays mounted while a new
   one loads (dimmed) so the page height never collapses mid-refresh */
.ems-sheet-card { transition: opacity 0.15s ease; }
.ems-sheet-card.ems-refreshing { opacity: 0.55; }
/* Dedicated print root: holds exactly the result sheets (the red area).
   Hidden on screen; on print the whole app wrapper is hidden instead. */
.ems-print-root { display: none; }

@media print {
  /* hide the entire application chrome — only #emsPrintRoot prints */
  #pageWrapper,
  .page-wrapper .page-main-header,
  .page-wrapper .main-nav,
  .page-wrapper footer.footer,
  .no-print,
  .ems-sheet-card > .card-header {
    display: none !important;
  }
  .ems-print-root {
    display: block !important;
  }
  /* each marksheet = one clean page */
  .ems-print-root .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
    break-inside: avoid;
    page-break-after: always;
    margin-bottom: 0 !important;
  }
  .ems-print-root .card:last-child {
    page-break-after: auto;
  }
  @page {
    size: A4;
    margin: 8mm;
  }
  body { padding: 0 !important; background: #fff !important; }
  .page-wrapper .page-body-wrapper .page-body {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  .ems-sheet-letterhead,
  .ems-sheet-footer {
    page-break-inside: avoid;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
    break-inside: avoid;
  }
}

/* ------------------------------------------------------------------ */
/*  ফলাফল বিবরণী — Academic Marksheet (reference template)            */
/* ------------------------------------------------------------------ */
.ems-mks {
  width: 675px;      /* definite width — auto margins center it in the flex card */
  max-width: 100%;
  margin: 0 auto;    /* center inside the card so print left/right margins match */
  font-family: "Noto Sans Bengali", "SolaimanLipi", Arial, sans-serif;
  color: #30363b;
}

/* Header band — certificate palette (teal primary + tint band + gold rule),
   ID-card information arrangement (logo | school | photo) */
.ems-mks-header {
  background: var(--ems-tint, #eef6f3);
  border-bottom: 2px solid var(--ems-primary, #24695c);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
}
.ems-mks-header::after { content: none; }
.ems-mks-header .gold-rule {
  border-top: 2px solid var(--ems-accent, #c9a227);
}
.ems-mks-logo {
  width: 52px; height: 52px; object-fit: contain;
  border-radius: 10px; background: #fff; padding: 3px;
  border: 1px solid var(--ems-primary-33, rgba(36, 105, 92, 0.25));
}
.ems-mks-photo {
  width: 72px; height: 88px; object-fit: cover;
  border: 2px solid var(--ems-primary-55, rgba(36, 105, 92, 0.45)); border-radius: 12px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #9aa8ae; font-weight: 700; letter-spacing: 1px;
}
.ems-mks-school { text-align: center; flex: 1; margin: 0 10px; min-width: 0; }
.ems-mks-school h5 {
  font-size: 20px; font-weight: 800; color: var(--ems-dark, #1a4a40); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ems-mks-school .addr { font-size: 11px; font-weight: 600; color: #5b6b79; line-height: 1.5; margin: 0; }
.ems-mks-school .contact { font-size: 11px; font-weight: 600; color: #5b6b79; margin: 0; }

/* ID column: student photo + verification QR, top-right of the header */
.ems-mks-id { display: flex; align-items: center; gap: 10px; }
.ems-mks-id .ems-mks-photo { width: 62px; height: 76px; }
.ems-mks-qr-mini { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ems-mks-qr-mini .qr-frame {
  width: 58px; height: 58px; padding: 2px;
  border: 2px solid var(--ems-accent, #c9a227); border-radius: 10px;
  background: #fff; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.ems-mks-qr-mini .qr-frame img { width: 100%; height: 100%; display: block; }
.ems-mks-qr-mini .cap {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--ems-primary, #24695c); white-space: nowrap; margin: 0;
}
.ems-mks-qr-mini .qr-wait {
  width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #9aa8ae;
  border: 2px dashed var(--ems-primary-25, rgba(36, 105, 92, 0.18)); border-radius: 10px;
}

/* Exam identity band — exam name · type · date range, under the header */
.ems-mks-exam-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 14px; flex-wrap: wrap;
  background: var(--ems-primary, #24695c); color: #fff;
  border-bottom: 3px solid var(--ems-accent, #c9a227);
  border-radius: 8px; margin-top: 6px; padding: 6px 14px;
}
.ems-mks-exam-band .exam-name {
  font-size: 15px; font-weight: 800; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ems-mks-exam-band .exam-meta { font-size: 11px; font-weight: 600; opacity: 0.93; text-align: right; }

/* Student details — certificate-style bands */
.ems-mks-title {
  background: var(--ems-primary, #24695c); color: #fff; font-size: 18px; font-weight: 700;
  line-height: 30px; text-align: center; margin: 12px 0 0 0;
  border-bottom: 3px solid var(--ems-accent, #c9a227);
}
.ems-mks-name {
  background: var(--ems-tint, #eef6f3); color: var(--ems-dark, #1a4a40); font-size: 16px; font-weight: 800;
  line-height: 26px; text-align: center; margin: 8px 0 0 0;
  border-left: 3px solid var(--ems-accent, #c9a227); border-right: 3px solid var(--ems-accent, #c9a227);
}
.ems-mks-guardian {
  background: var(--ems-tint-soft, #f7faf9); padding: 6px 2px; font-size: 13px; line-height: 20px;
  text-align: center; margin-top: 6px;
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.18)); border-radius: 0 0 8px 8px;
}
.ems-mks-guardian strong { color: var(--ems-primary, #24695c); }
.ems-mks-classinfo { font-size: 12px; text-align: center; margin-top: 6px; font-weight: 700; color: #34405a; }

/* ID-card style field grid for student info */
.ems-mks-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px;
  margin-top: 8px; font-size: 12.5px;
}
.ems-mks-fields .f { display: flex; gap: 6px; padding: 3px 0; }
.ems-mks-fields .f.span { grid-column: 1 / -1; }
.ems-mks-fields .k { color: var(--ems-dark-muted, #6b7a88); font-weight: 700; min-width: 64px; text-align: right; }
.ems-mks-fields .v { color: #2c323f; font-weight: 700; }

/* Marks table */
.ems-mks-table {
  width: 100%; border-collapse: collapse; margin-top: 14px;
  font-size: 12px; font-weight: 700;
}
.ems-mks-table th, .ems-mks-table td {
  border: 1px solid #c3d2cc; text-align: center; padding: 5px 6px; height: 31px;
}
.ems-mks-table thead th { font-size: 12px; background: var(--ems-tint, #eef6f3); color: var(--ems-dark, #1a4a40); }
.ems-mks-table thead tr:first-child th { border-bottom: 2px solid var(--ems-accent, #c9a227); }
.ems-mks-table .subject { width: 21%; font-size: 14px; text-align: left; }
.ems-mks-table .score {
  background: #e2f3e8; color: #55b979; border-radius: 5px;
  padding: 4px; display: block;
}
.ems-mks-table .pass {
  display: block; background: #72c68b; color: #fff;
  border-radius: 5px; padding: 4px; font-size: 12px;
}
.ems-mks-table .fail {
  display: block; background: #fa8992; color: #fff;
  border-radius: 5px; padding: 4px; font-size: 12px;
}
.ems-mks-table .total-row td { height: 22px; padding: 3px; font-weight: 800; }
/* marks digits — uniform 13px across all result sheets */
.ems-mks-table td { font-size: 13px; }

/* Result sheets on phones — the marksheet (675px design) and the Final
   Result (3 sets) table carry too many columns for a phone screen. Instead
   of squeezing the columns together they keep their design width and scroll
   sideways inside their card. Desktop and print are untouched (print width
   never matches this query). The chained selector out-ranks the Viho theme's
   `.page-wrapper .page-body-wrapper .card { overflow: hidden }` (≤575px). */
@media (max-width: 767.98px) {
  .page-wrapper .page-body-wrapper .card.ems-mks-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ems-mks-card .ems-mks {
    min-width: 675px;
    margin: 0;
  }
  .ems-final {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ems-final .ems-final-table {
    min-width: 860px;
  }
}

/* Merit row */
.ems-mks-merit {
  width: 100%; border-collapse: collapse; margin-top: 3px;
  font-size: 12px; font-weight: 700;
}
.ems-mks-merit td { border: 1px solid #c3d2cc; padding: 4px; text-align: center; }
.ems-mks-merit td + td { font-size: 13px; }
.ems-mks-merit .lbl { width: 21%; }

/* Attendance rows — soft professional tints (theme-aware, not solid) */
.ems-mks-att-row { display: flex; gap: 6px; margin-top: 5px; align-items: stretch; }
.ems-mks-att-lbl {
  width: 21%; padding: 4px 6px; text-align: center;
  font-size: 12px; font-weight: 700; border-radius: 6px 0 0 6px;
}
.ems-mks-att-val {
  flex: 1; border-radius: 0 6px 6px 0; padding: 4px 6px; text-align: center;
  font-size: 13px; font-weight: 800; background: #fff;
}
.ems-mks-att-academic {
  background: var(--ems-tint, #eef6f3);
  color: var(--ems-dark, #1a4a40);
  border: 1px solid var(--ems-primary-25, rgba(36,105,92,0.25));
}
.ems-mks-att-val.ems-mks-att-academic {
  color: var(--ems-primary, #24695c);
  border: 1px solid var(--ems-primary-25, rgba(36,105,92,0.25));
  border-left: 0;
}
.ems-mks-att-present {
  background: var(--ems-present-tint, #e2f3e8);
  color: var(--ems-present-text, #2c7a4b);
  border: 1px solid var(--ems-present-border, #bfe3cc);
}
.ems-mks-att-val.ems-mks-att-present {
  color: var(--ems-present-text, #2c7a4b);
  border: 1px solid var(--ems-present-border, #bfe3cc);
  border-left: 0;
}
.ems-mks-att-absent {
  background: var(--ems-absent-tint, #f7e9d9);
  color: var(--ems-absent-text, #8a5a17);
  border: 1px solid var(--ems-absent-border, #e6cfa9);
}
.ems-mks-att-val.ems-mks-att-absent {
  color: var(--ems-absent-text, #8a5a17);
  border: 1px solid var(--ems-absent-border, #e6cfa9);
  border-left: 0;
}

/* Marksheet body: 80% student info | 20% verification QR (under the photo) */
.ems-mks-body { display: flex; gap: 12px; margin-top: 12px; }
.ems-mks-info { flex: 1 1 80%; min-width: 0; }
.ems-mks-qr {
  flex: 0 0 20%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 2px 8px 12px; text-align: center;
  border-left: 1px dashed var(--ems-primary-25, rgba(36,105,92,0.25));
}
/* rounded static QR frame in the theme accent — scanner-friendly:
   flat white background, no overlays/animation, high-contrast modules */
.ems-mks-qr .qr-frame {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 14px;
  border: 2px solid var(--ems-accent, #c9a227);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.ems-mks-qr .qr-frame img {
  width: 100%; height: 100%;
  display: block;
  border-radius: 12px; /* hugs the frame border — no white padding */
  background: #fff;
}
.ems-mks-qr .cap {
  font-size: 10px; font-weight: 700; color: var(--ems-primary, #24695c);
  letter-spacing: 0.4px; line-height: 1.4;
}


/* Progress options */
.ems-mks-progress {
  display: flex; border: 1px solid #c3d2cc; min-height: 34px;
  font-size: 12px; font-weight: 700; margin-top: 5px;
}
.ems-mks-progress .lbl {
  width: 21%; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #c3d2cc; background: var(--ems-tint, #eef6f3); color: var(--ems-dark, #1a4a40);
}
.ems-mks-progress .opts {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* Authorization table */
.ems-mks-auth { width: 100%; border-collapse: collapse; margin-top: 5px; font-size: 12px; font-weight: 700; }
.ems-mks-auth th, .ems-mks-auth td { border: 1px solid #c3d2cc; text-align: center; padding: 5px; }
.ems-mks-auth thead th { background: var(--ems-tint, #eef6f3); color: var(--ems-dark, #1a4a40); }
.ems-mks-auth thead th { height: 23px; }
/* principal's signature image in the sheets' signature sections */
.ems-sig-img {
  display: inline-block;
  max-height: 48px;
  max-width: 150px;
  object-fit: contain;
  vertical-align: bottom;
  -webkit-user-drag: none;
}

/* ---------------- Result formula info badge (results page) ---------------- */
.ems-formula-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(36, 105, 92, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(36, 105, 92, 0.06);
  color: #24695c;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ems-formula-badge:hover,
.ems-formula-badge.open {
  background: rgba(36, 105, 92, 0.12);
  border-color: rgba(36, 105, 92, 0.4);
}
.ems-formula-badge .fmt {
  font-weight: 600;
  color: #59667a;
  border-left: 1px solid rgba(36, 105, 92, 0.25);
  padding-left: 8px;
  margin-left: 3px;
}
.ems-formula-box {
  margin-top: 8px;
  border: 1px solid rgba(36, 105, 92, 0.2);
  border-radius: 10px;
  background: rgba(36, 105, 92, 0.04);
  padding: 12px 16px;
  animation: ems-conn-fade 0.18s ease both;
}
.ems-formula-box .gt {
  font-size: 13px;
  font-weight: 700;
  color: #24695c;
}
.ems-formula-box ul {
  padding-left: 18px;
  margin: 0;
}
.ems-formula-box li {
  font-size: 12.5px;
  color: #3d4a5c;
  line-height: 1.65;
  padding-left: 2px;
}
.ems-formula-box li::marker {
  color: #5ec8b4;
}

/* ------------------------------------------------------------------ */
/*  Merit list — failure detail (screen card + printed page)          */
/* ------------------------------------------------------------------ */
.ems-merit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ems-merit-table th {
  background: var(--ems-tint, #eef6f3); color: var(--ems-dark, #1a4a40);
  border: 1px solid #c3d2cc; border-bottom: 2px solid var(--ems-accent, #c9a227);
  padding: 6px 8px; font-size: 12px; text-align: left; white-space: nowrap;
}
.ems-merit-table td { border: 1px solid #c3d2cc; padding: 5px 8px; vertical-align: middle; }
.ems-merit-table tr:nth-child(even) td { background: var(--ems-tint-soft, #f7faf9); }
.ems-merit-table .pos-col, .ems-merit-table .num-col { text-align: center; }
.ems-merit-table .pos { font-weight: 800; color: var(--ems-primary, #24695c); }
.ems-merit-table .num { white-space: nowrap; }
.ems-merit-table .fail-n { font-weight: 800; color: #c0392b; }
.ems-merit-table .pass-n { font-weight: 800; color: var(--ems-primary, #24695c); }
.ems-merit-table .subj { font-size: 12px; line-height: 1.45; }

/* printed merit page — follows the marksheets, starts on a fresh page */
.ems-merit-print { page-break-before: always; padding-top: 8px; }
/* merit sheet header — same design as the marksheet header (.ems-mks-header),
   with the merit context block on the right */
.ems-merit-head { margin-bottom: 6px; }
.ems-merit-head .ems-merit-head-meta { text-align: right; min-width: 0; margin-left: 10px; }
.ems-merit-head .ems-merit-head-meta .title {
  display: block; font-size: 15px; font-weight: 800; color: var(--ems-dark, #1a4a40);
}
.ems-merit-head .ems-merit-head-meta .ctx {
  display: block; font-size: 11px; font-weight: 700; color: #5b6b79; line-height: 1.5;
}
.ems-mks-auth tbody td { height: 57px; }
.ems-mks-auth .lbl { width: 21%; }

@media (max-width: 500px) {
  .ems-mks-header { padding: 5px 10px; }
  .ems-mks-school h5 { font-size: 15px; }
  .ems-mks-school .addr, .ems-mks-school .contact { font-size: 7px; }
  .ems-mks-table { font-size: 10px; }
  .ems-mks-table th, .ems-mks-table td { padding: 3px; font-size: 10px; }
  .ems-mks-merit td + td { font-size: 10px; }
  .ems-mks-att-val { font-size: 10px; }
}
@media print {
  .ems-mks { max-width: 675px; width: 100%; }
}

/* ---------------- Monitoring: teacher-attendance bar variant ---------------- */
.ems-bar-teacher {
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #7db8f5 0%, #227ee6 100%);
  min-height: 6px;
  transition: height 0.4s ease;
  max-width: 46px;
  margin: 0 auto;
  width: 100%;
}

/* ---------------- Monitoring: premium interaction states ---------------- */
/* Content stays mounted under a soft veil while filters refetch — no full-page flash */
.ems-mon-veil-host { position: relative; }
.ems-mon-content { transition: opacity 0.2s ease; }
.ems-mon-content.is-loading { opacity: 0.45; }
.ems-mon-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 247, 251, 0.55);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  animation: emsFadeIn 0.18s ease both;
}

@keyframes emsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes emsSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.ems-fade-in { animation: emsFadeIn 0.25s ease both; }
/* `backwards` for the transform-animated classes — see the emsStateIn note:
   a `both` fill leaves an identity-matrix stacking context that buries
   z-indexed children (dropdown menus) under later sibling sections. */
.ems-tab-panel { animation: emsSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
.ems-row-in { animation: emsSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards; }

/* Drill-down rows: pointer + focus affordance */
.table tbody tr.ems-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.table tbody tr.ems-clickable:focus-visible {
  outline: 2px solid rgba(36, 105, 92, 0.5);
  outline-offset: -2px;
}

/* Location breadcrumb (All districts › District › Sub-district) */
.ems-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-size: 13px; }
.ems-crumb-sep { color: #a6b0c3; font-size: 12px; padding: 0 2px; }
.ems-crumb-link {
  color: #24695c;
  font-weight: 600;
  background: none;
  border: none;
  padding: 3px 10px;
  border-radius: 6px;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.ems-crumb-link:hover { background: rgba(36, 105, 92, 0.1); }
.ems-crumb-current {
  color: #525f7f;
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(36, 105, 92, 0.08);
  border-radius: 6px;
}

/* Animated numerals keep a stable width while counting */
.ems-num { font-variant-numeric: tabular-nums; }

/* Period toggle + tabs smooth color shift */
.btn-group .btn,
.nav-tabs .nav-link {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ems-fade-in,
  .ems-tab-panel,
  .ems-row-in,
  .ems-mon-veil { animation: none; }
  .ems-mon-content,
  .table tbody tr.ems-clickable,
  .ems-crumb-link,
  .btn-group .btn,
  .nav-tabs .nav-link { transition: none; }
}

/* ================================================================
   System-wide smooth state changes (menus, pages, modals, selects)
   ================================================================ */

/* ---- Page content state-change animation ----
   Pages render as: .ems-page-enter > root-div > [sections...]. Each section
   (stat-card rows, cards, tables, tab blocks…) fades/slides in with a short
   stagger whenever it mounts — on route changes AND on in-page state changes
   (loader → content, tab switches, empty → data). Fixed overlays with their
   own animation (modal, monitoring tab panel) are excluded. */
/* fill-mode is `backwards`, NOT `both`: a finished transform animation filled
   forwards keeps a computed identity matrix (not `none`), which leaves a
   permanent stacking context on these sections. Later siblings (e.g. the
   monitoring stat cards under the filters card) then paint above a section's
   z-indexed children — the <Select> dropdown list appeared behind the cards.
   `backwards` still covers the stagger delay and reverts to transform: none
   after finishing, so the visuals are identical. */
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel) {
  animation: emsStateIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel):nth-child(1) { animation-delay: 0ms; }
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel):nth-child(2) { animation-delay: 45ms; }
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel):nth-child(3) { animation-delay: 90ms; }
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel):nth-child(4) { animation-delay: 135ms; }
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel):nth-child(5) { animation-delay: 175ms; }
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel):nth-child(6) { animation-delay: 210ms; }
.ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel):nth-child(n + 7) { animation-delay: 240ms; }
@keyframes emsStateIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- Route progress bar (shown while a menu navigation is pending) ---- */
.ems-route-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2000;
  overflow: hidden;
  pointer-events: none;
}
.ems-route-progress::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, #24695c, #5ec8b4);
  animation: emsProgressSlide 0.9s ease-in-out infinite;
}
@keyframes emsProgressSlide {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(160%); }
  100% { transform: translateX(260%); }
}

/* ---- Sidebar menu: smooth selection state ----
   The accent bar grows in and the background/color cross-fade when the
   active item moves, instead of snapping between items. */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li > a.nav-link.menu-title {
  position: relative;
  transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, border-radius 0.22s ease, transform 0.12s ease;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li > a.nav-link.menu-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #5ec8b4;
  transform: translateY(-50%);
  transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li.active > a.nav-link.menu-title::before {
  top: 50%;
  height: 84%;
  transform: translateY(-50%);
}
/* Pressed feedback while a menu item navigates */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav
  .main-navbar .nav-menu > li > a.nav-link.menu-title:active {
  transform: scale(0.985);
}
/* Pending-navigation inline spinner keeps the icon slot width stable */
.nav-menu .ems-nav-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex: 0 0 20px;
}
.nav-menu .ems-nav-pending .spinner-border {
  width: 14px;
  height: 14px;
  border-width: 2px;
  color: #fff;
}

/* ---- PageLoader: stable height + spinner fades in after a short delay,
        so fast page loads never flash a loader at all ---- */
/* Skeleton loading — shimmering placeholder blocks (PageLoader/TableSkeleton) */
.ems-skeleton {
  display: inline-block; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #e9f0ec 0%, #e1ebe6 100%);
  border-radius: 8px; vertical-align: middle;
}
.ems-skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  animation: ems-skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes ems-skeleton-sweep {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ems-skeleton::after { animation: none; }
}
.ems-page-loader { min-height: 220px; }
.ems-page-loader .ems-page-loader-inner { transition: opacity 0.25s ease; }

/* ---- LoadingArea: quiet in-page loading for member pages. The page header
        stays mounted above it and the reserved height keeps the layout from
        collapsing, so the swap to real content (which slides in via the
        page-enter stagger) reads as one smooth transition ---- */
.ems-load-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 38vh;
  animation: emsFadeIn 0.2s ease backwards;
}
.ems-load-area .spinner-border { width: 1.5rem; height: 1.5rem; border-width: 2px; }

/* ---- Modal: fade backdrop + panel slide/scale in, quick fade out ---- */
.ems-modal-opening .ems-modal-backdrop { animation: emsBackdropIn 0.2s ease both; }
.ems-modal-opening .ems-modal .modal-content,
.ems-modal-opening .modal-content { animation: emsModalIn 0.24s cubic-bezier(0.4, 0, 0.2, 1) both; }
.ems-modal-closing .ems-modal-backdrop { animation: emsBackdropOut 0.16s ease both; }
.ems-modal-closing .modal-content { animation: emsModalOut 0.16s ease both; }
@keyframes emsBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes emsBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes emsModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes emsModalOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ---- Searchable select dropdown: menu drops in softly, caret rotates ---- */
.ems-select-menu { animation: emsMenuIn 0.16s cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: top left; }
.ems-select-menu.ems-menu-end { transform-origin: top right; }
@keyframes emsMenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* mobile: menus hang centered under their control — the entrance animation
   must end at the same translateX(-50%) the resting transform uses */
@keyframes emsMenuInCenter {
  from { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(0.985); }
  to { opacity: 1; transform: translateX(-50%); }
}
.ems-select-caret { transition: transform 0.2s ease; }
.ems-select.open .ems-select-caret { transform: rotate(180deg); }
.ems-select-btn { transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; }
.ems-select-item { transition: background-color 0.12s ease, color 0.12s ease; }

/* ---- Global micro-transitions ---- */
.btn { transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; }
.btn:active { transform: translateY(1px); }
.form-control { transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.table > :not(caption) > * > * { transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; }
.card { transition: box-shadow 0.2s ease; }
.alert { animation: emsSlideUp 0.28s cubic-bezier(0.4, 0, 0.2, 1) backwards; }

/* Reduced motion: disable all of the above for users who opt out */
@media (prefers-reduced-motion: reduce) {
  .ems-page-enter > * > *:not(.ems-modal):not(.ems-tab-panel),
  .ems-route-progress,
  .ems-route-progress::before,
  .ems-select-menu,
  .alert,
  .ems-modal-opening .ems-modal-backdrop,
  .ems-modal-opening .modal-content,
  .ems-modal-closing .ems-modal-backdrop,
  .ems-modal-closing .modal-content { animation: none; }
  .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.nav-link.menu-title,
  .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.nav-link.menu-title::before,
  .ems-page-loader .ems-page-loader-inner,
  .ems-select-caret,
  .ems-select-btn,
  .ems-select-item,
  .btn,
  .form-control,
  .table > :not(caption) > * > *,
  .card { transition: none; }
}

/* ---------------- Layout stability (no sideways "spikes") ----------------
   Reserving the scrollbar gutter keeps the page width constant whether or
   not content overflows — so opening a modal (scroll lock) or swapping a
   loader for tall content never shifts the layout sideways. */
html { scrollbar-gutter: stable; }

/* ---------------- Themed scrollbars ----------------
   The document scrollbar gets the EMS treatment: thin, rounded, teal-tinted
   thumb on a transparent track — it blends with the panel background instead
   of the chunky OS-default bar, and the reserved gutter (scrollbar-gutter:
   stable) shrinks to this width. Responsive tables get the same style for
   their horizontal scroll. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 105, 92, 0.35) transparent;
}
html::-webkit-scrollbar { width: 9px; height: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: rgba(36, 105, 92, 0.32);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: rgba(36, 105, 92, 0.55);
  background-clip: padding-box;
}

.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 105, 92, 0.35) transparent;
}
.table-responsive::-webkit-scrollbar { height: 8px; width: 8px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(36, 105, 92, 0.32);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(36, 105, 92, 0.55);
  background-clip: padding-box;
}

/* ================= Final Result sheet (3 exam sets, weighted) =================
   Landscape A4 sheet: header | title band | details | marks table | summary |
   progress | signatures. Themed via the marksheet CSS vars (--ems-primary…). */
.ems-final {
  --f-border: #8a9ba0;
  --f-border-dark: #60777e;
  --f-band: var(--ems-primary, #24695c);
  --f-tint: var(--ems-tint, #e9f2f0);
  background: #fff;
  border: 1px solid #e6edef;
  border-radius: 8px;
  padding: 10px 12px 12px;
}
.ems-final-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--f-border);
}
.ems-final-header .logo { width: 66px; height: 66px; object-fit: contain; flex: 0 0 66px; }
.ems-final-header .school { flex: 1; text-align: center; min-width: 0; }
.ems-final-header .school h5 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--ems-dark, #394b50);
  line-height: 1.25;
}
.ems-final-header .school p { margin: 0; font-size: 10px; color: #6b7a80; }
.ems-final-header .photo {
  width: 68px; height: 76px; flex: 0 0 68px;
  object-fit: cover; border: 1px solid var(--f-border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: var(--ems-primary, #24695c);
  background: var(--f-tint);
}
.ems-final-title {
  background: var(--f-band);
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px 8px 6px;
  margin-top: 8px;
}
.ems-final-title h6 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0.4px; }
.ems-final-title p { margin: 1px 0 0; font-size: 12px; font-weight: 700; }
.ems-final-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: #43525a;
}
.ems-final-details span b { color: #6b7a80; font-weight: 700; }

.ems-final-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  border: 1px solid var(--f-border-dark);
}
.ems-final-table th,
.ems-final-table td {
  border: 1px solid var(--f-border);
  padding: 3px 2px;
  font-size: 11px;
  vertical-align: middle;
  height: 26px;
}
.ems-final-table thead th { font-weight: 700; }
.ems-final-table .group { font-size: 12.5px; background: var(--f-tint); }
.ems-final-table .sub { font-size: 10px; height: 22px; background: #fafcfb; }
.ems-final-table .subject { text-align: left; padding-left: 6px; font-weight: 700; font-size: 11.5px; }
.ems-final-table .num { font-variant-numeric: tabular-nums; }
.ems-final-table .contrib { background: #fbfdfc; font-weight: 700; }
.ems-final-table .total-mark { font-weight: 800; background: var(--f-tint); }
.ems-final-table .pass-pill {
  display: inline-block;
  min-width: 42px;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.ems-final-table .pass-pill.ok { background: rgba(64, 180, 92, 0.16); color: #35924b; }
.ems-final-table .pass-pill.no { background: rgba(255, 127, 139, 0.16); color: #d9536a; }
.ems-final-table tr.total-row td { font-weight: 800; background: #f7faf9; }
.ems-final-table tr.total-row td.underline { text-decoration: underline; }

.ems-final-summary {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ems-final-summary td {
  border: 1px solid var(--f-border);
  text-align: center;
  font-size: 11px;
  height: 24px;
}
.ems-final-summary .lbl {
  font-weight: 700;
  padding: 3px;
}
.ems-final-summary .lbl span {
  display: block;
  border-radius: 4px;
  padding: 2px 0;
  color: #fff;
  font-size: 10.5px;
}
.ems-final-summary .lbl.day span { background: var(--ems-primary-55, #80aab0); }
.ems-final-summary .lbl.present span { background: #49c26d; }
.ems-final-summary .lbl.absent span { background: #ff7c87; }
.ems-final-summary .v { font-weight: 700; color: #55676e; }
.ems-final-summary .v.present { color: #49c26d; background: rgba(112, 207, 130, 0.1); }
.ems-final-summary .v.absent { color: #ff7c87; background: rgba(255, 127, 139, 0.1); }
.ems-final-summary .merit { font-weight: 800; color: var(--ems-dark, #394b50); }

.ems-final-progress {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--f-border);
  border-top: none;
  min-height: 32px;
}
.ems-final-progress .lbl {
  flex: 0 0 10.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border-right: 1px solid var(--f-border);
}
.ems-final-progress .opts {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 12px;
  font-weight: 700;
}

.ems-final-sign {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 0;
}
.ems-final-sign td { border: 1px solid var(--f-border-dark); }
.ems-final-sign .lbl {
  width: 10.6%;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  border-right: 1px solid var(--f-border-dark);
}
.ems-final-sign .title { height: 26px; text-align: center; font-weight: 700; font-size: 11.5px; }
.ems-final-sign .area { height: 52px; }

@media print {
  .ems-final {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    break-inside: avoid;
    page-break-after: always;
  }
  .ems-final:last-child { page-break-after: auto; }
}

/* Final sheet: keep numeric cells on one line (no wrapping in fixed layout) */
.ems-final-table td.num,
.ems-final-table td.total-mark,
.ems-final-table th.sub {
  white-space: nowrap;
}
.ems-final-table td.total-mark .text-muted { font-size: 9.5px; }

/* Final sheet summary column widths (3 set columns + label + merit pair) */
.ems-final-summary .lbl { width: 12%; }
.ems-final-summary .v { width: 20.7%; }
.ems-final-summary .merit { width: 10.38%; }

/* ================= Journal report table (Final Result 3 sets) =================
   One unified table: 3-row header with double-border group separators,
   subject + total rows, and a tfoot carrying attendance/merit, progress and
   the authorization/signature block. Scrollable on screen (min-width), and
   scaled down to fit A4 landscape in print. */
.journalReportTable { overflow-x: auto; }
.journal-table {
  width: 100%;
  min-width: 1800px;
  border-collapse: collapse;
  border: 1px solid #63737a;
}
.journal-table th,
.journal-table td {
  border: 1px solid #8a9ba0;
  padding: 5px 6px;
  text-align: center;
  font-size: 11px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.journal-table .g-start { border-left: 3px double #63737a; }
.journal-table thead .term {
  font-size: 14px;
  font-weight: 700;
  padding: 6px;
  background: var(--f-tint, #e9f2f0);
}
.journal-table thead .sub2 {
  font-size: 11px;
  font-weight: 600;
  background: #fafcfb;
}
.journal-table .subject-cell {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.journal-table .num-cell { white-space: nowrap; }
/* marks/weighted/attendance digits — uniform 13px across all result sheets */
.journal-table td.num-cell,
.journal-table .att-row th:not(.att-label) { font-size: 13px; }
.journal-table .total-line th,
.journal-table .total-line td {
  font-weight: 700;
  background: #f7faf9;
}
.journal-table .pass-badge {
  display: inline-block;
  background: #d1e7dd;
  color: #0f5132;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.journal-table .fail-badge {
  display: inline-block;
  background: #f8d7da;
  color: #842029;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.journal-table tfoot th { font-weight: 600; }
.journal-table .att-label { background: var(--f-tint, #e9f2f0); }
.journal-table .att-row th:nth-child(2) { border-left: 3px double #63737a; }
.journal-table .merit-cell {
  font-size: 13px;
  font-weight: 700;
  background: var(--f-tint, #e9f2f0);
}
.journal-table .progress-opts { text-align: center; }
.journal-table .progress-opts label {
  margin: 0 12px;
  font-weight: 600;
  cursor: default;
}
.journal-table .auth-sep { border-top: 6px double #63737a; font-size: 13px; }
.journal-table .sig-sep { border-top: 4px double #63737a; }
.journal-table .sig-space { padding: 30px 6px; }

@media print {
  .journal-table { min-width: 0 !important; }
  .journal-table th,
  .journal-table td { padding: 3px 2px; font-size: 8.5px; }
  .journal-table td.num-cell,
  .journal-table .att-row th:not(.att-label),
  .journal-table .merit-cell { font-size: 10px; }
  .journal-table .subject-cell { font-size: 10px; }
  .journal-table thead .term { font-size: 11px; padding: 3px; }
  .journal-table .sig-space { padding: 20px 4px; }
  .journal-table .pass-badge,
  .journal-table .fail-badge { padding: 2px 5px; font-size: 8.5px; }
}

/* Final Result sheet: periodical-pattern header block above the journal table.
   The marksheet is a fixed 675px document card — inside the wide final sheet
   the same pattern spans the full sheet width instead of a small centered block. */
.ems-final .ems-mks {
  width: 100%;
  margin: 0 0 10px 0;
}

/* Final Result print: scale the marksheet-pattern header down to A4-landscape
   proportions so it matches the journal table's print size (8.5px body text)
   instead of keeping its screen dimensions. Scoped to .ems-final only — the
   portrait periodical marksheets keep their own scale. */
@media print {
  /* the base marksheet caps itself at 675px for portrait sheets — the wide
     final sheet's header block must keep the full landscape width */
  .ems-final .ems-mks { max-width: 100%; width: 100%; }
  .ems-final .ems-mks-title { font-size: 10px; line-height: 16px; margin: 5px 0 0 0; }
  .ems-final .ems-mks-header {
    padding: 6px 10px;
    gap: 8px;
    border-radius: 6px 6px 0 0;
  }
  .ems-final .ems-mks-logo { width: 34px; height: 34px; border-radius: 6px; }
  .ems-final .ems-mks-school h5 { font-size: 13px; }
  .ems-final .ems-mks-school .addr,
  .ems-final .ems-mks-school .contact { font-size: 7.5px; line-height: 1.3; }
  .ems-final .ems-mks-photo { width: 42px; height: 52px; border-radius: 6px; font-size: 7px; }
  .ems-final .ems-mks-body { margin-top: 6px; gap: 8px; }
  .ems-final .ems-mks-info { flex-basis: 88%; }
  .ems-final .ems-mks-qr { flex: 0 0 12%; padding: 2px 0 2px 8px; }
  .ems-final .ems-mks-qr .qr-frame { width: 48px; height: 48px; border-radius: 8px; }
  .ems-final .ems-mks-qr .cap { font-size: 6.5px; letter-spacing: 0.2px; }
  .ems-final .ems-mks-name { font-size: 11px; line-height: 18px; margin-top: 4px; }
  .ems-final .ems-mks-guardian { font-size: 8.5px; line-height: 14px; padding: 2px; margin-top: 3px; }
  .ems-final .ems-mks-fields { font-size: 8.5px; gap: 0 12px; margin-top: 4px; }
  .ems-final .ems-mks-fields .f { padding: 1px 0; }
  .ems-final .ems-mks-fields .k { min-width: 42px; }
}

/* Final Result sheet title band — restrained document styling: a near-white
   tinted strip, dark teal lettering with air, and a thin gold rule. Keeps the
   hierarchy calm between the tinted header band and the student name banner. */
.ems-final .ems-mks-title {
  background: var(--ems-tint-soft, #f7faf9);
  color: var(--ems-dark, #1a4a40);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  line-height: 24px;
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.18));
  border-bottom: 2px solid var(--ems-accent, #c9a227);
  border-radius: 6px;
  margin-top: 8px;
}

@media print {
  .ems-final .ems-mks-title {
    font-size: 10px;
    line-height: 16px;
    margin-top: 5px;
    border-radius: 4px;
  }
}

/* Final Result header split — three zones under the title band:
   Student Profile (photo + identity) | Grading Scale table | Verification QR */
.ems-final .ems-mks-body.ems-final-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0 14px;
  align-items: stretch;
}
.ems-final-profile { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }

/* grading scale table — same document language as the title band:
   tinted head strip, gold rule, tabular numbers */
.ems-final .ems-final-grades {
  align-self: stretch;
  background: #fff;
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.18));
  border-radius: 6px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.ems-final .ems-final-grades .gt {
  margin: 0;
  background: var(--ems-tint-soft, #f7faf9);
  color: var(--ems-dark, #1a4a40);
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  text-align: center; line-height: 20px;
  border-bottom: 2px solid var(--ems-accent, #c9a227);
}
.ems-final .ems-final-grades table { border-collapse: collapse; width: 100%; }
.ems-final .ems-final-grades th {
  background: var(--ems-tint-soft, #f7faf9);
  color: var(--ems-dark, #1a4a40);
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  text-align: center; padding: 3px 14px;
  border-bottom: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.18));
}
.ems-final .ems-final-grades td {
  font-size: 11px; color: #2c323f; text-align: center;
  padding: 2px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--ems-primary-12, rgba(36, 105, 92, 0.1));
}
.ems-final .ems-final-grades tr:last-child td { border-bottom: 0; }
.ems-final .ems-final-grades td.g { font-weight: 800; color: var(--ems-dark, #1a4a40); }
.ems-final .ems-final-grades td.r { font-weight: 700; }
.ems-final .ems-mks-body.ems-final-split .ems-mks-qr { justify-content: center; }

@media print {
  .ems-final .ems-mks-body.ems-final-split { gap: 0 8px; }
  .ems-final-profile { gap: 6px; }
  .ems-final .ems-final-grades { border-radius: 4px; }
  .ems-final .ems-final-grades .gt { font-size: 7px; line-height: 13px; letter-spacing: 0.4px; }
  .ems-final .ems-final-grades th { font-size: 6.5px; padding: 1px 8px; }
  .ems-final .ems-final-grades td { font-size: 7px; padding: 0.5px 8px; }
}

/* Journal table: letter-grade badge (A+ … F) in the Status column */
.journal-table .grade-badge {
  display: inline-block;
  min-width: 34px;
  background: #eef6f3;
  color: #1a4a40;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.journal-table .grade-badge.f {
  background: #f8d7da;
  color: #842029;
}

@media print {
  .journal-table .grade-badge { padding: 1px 5px; font-size: 9px; min-width: auto; }
}

/* ================= Education-pattern pricing ================= */

/* Central packages hero — intro + setup fee + student calculator */
.ems-price-hero {
  display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(201, 162, 39, 0.10) 0%, transparent 46%),
    linear-gradient(135deg, #1d4a41 0%, #24695c 58%, #2c7d6d 100%);
  border-radius: 16px; padding: 22px 26px; margin-bottom: 26px; color: #fff;
  box-shadow: 0 10px 30px rgba(26, 74, 64, 0.28);
}
.ems-price-hero-main { flex: 1 1 380px; min-width: 0; }
.ems-price-hero-badge {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: #f3d98a;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(243, 217, 138, 0.4);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.ems-price-hero-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: 0.2px; }
.ems-price-hero-text { font-size: 13px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 640px; }
.ems-price-hero-side { flex: 0 1 320px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.ems-price-setup {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px; padding: 10px 14px;
}
.ems-price-setup .lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: #f3d98a; }
.ems-price-setup .val { font-size: 20px; font-weight: 800; }
.ems-price-setup .note { font-size: 11px; color: rgba(255, 255, 255, 0.75); }
.ems-price-calc {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, 0.94); border-radius: 12px; padding: 10px 14px; color: #2c323f;
}
.ems-price-calc .k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 800; color: #1a4a40; }
.ems-price-calc .k input {
  width: 96px; text-align: right; font-weight: 800; color: #1a4a40;
  border: 1px solid rgba(36, 105, 92, 0.3); border-radius: 8px; padding: 3px 8px;
}
.ems-price-calc .hint { font-size: 10.5px; color: #6b7a88; }

/* pattern group heading */
.ems-price-group { margin-bottom: 26px; }
.ems-price-group-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: #1a4a40; margin: 0 0 14px;
}
.ems-price-group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(36, 105, 92, 0.35), transparent); }

/* pattern pricing card - premium layered treatment:
   accent hairline on top, soft radial tint, gradient rate digits,
   icon chip, check chips and a gradient CTA. Tones set the palette vars. */
.ems-price-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background:
    radial-gradient(150% 110px at 88% -30px, var(--pc-soft, rgba(36, 105, 92, 0.07)) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid rgba(36, 105, 92, 0.1);
  border-radius: 18px; padding: 15px 16px 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(16, 44, 38, 0.06);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ems-price-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pc-accent, #24695c) 0%, var(--pc-accent-soft, rgba(36, 105, 92, 0.25)) 46%, rgba(255, 255, 255, 0) 82%);
}
.ems-price-card.tone-govt   { --pc-accent: #3f6fa9; --pc-accent-soft: rgba(63, 111, 169, 0.28); --pc-soft: rgba(63, 111, 169, 0.08);  --pc-border: rgba(63, 111, 169, 0.34); --pc-shadow: rgba(51, 89, 140, 0.24); }
.ems-price-card.tone-teal   { --pc-accent: #24695c; --pc-accent-soft: rgba(36, 105, 92, 0.26);  --pc-soft: rgba(36, 105, 92, 0.07);  --pc-border: rgba(36, 105, 92, 0.3);   --pc-shadow: rgba(26, 74, 64, 0.24); }
.ems-price-card.tone-violet { --pc-accent: #6e4fd0; --pc-accent-soft: rgba(110, 79, 208, 0.26); --pc-soft: rgba(110, 79, 208, 0.07); --pc-border: rgba(110, 79, 208, 0.3); --pc-shadow: rgba(86, 60, 168, 0.24); }
.ems-price-card.tone-amber  { --pc-accent: #b8901d; --pc-accent-soft: rgba(201, 162, 39, 0.32);  --pc-soft: rgba(201, 162, 39, 0.09);  --pc-border: rgba(184, 144, 29, 0.32); --pc-shadow: rgba(160, 124, 28, 0.24); }
.ems-price-card:hover {
  transform: translateY(-6px);
  border-color: var(--pc-border, rgba(36, 105, 92, 0.3));
  box-shadow: 0 24px 44px -14px var(--pc-shadow, rgba(26, 74, 64, 0.24));
}
.ems-price-card.inactive { opacity: 0.55; }

.ems-price-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ems-price-icon {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--pc-soft, rgba(36, 105, 92, 0.08)), #ffffff 78%);
  border: 1px solid var(--pc-border, rgba(36, 105, 92, 0.3));
  color: var(--pc-accent, #24695c);
  box-shadow: 0 3px 8px -2px var(--pc-shadow, rgba(26, 74, 64, 0.18)), inset 0 1px 0 #fff;
}
.ems-price-sector {
  flex: 1 1 auto; font-size: 9.5px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; text-align: center;
  background: var(--pc-soft, rgba(36, 105, 92, 0.08)); color: var(--pc-accent, #24695c);
  border: 1px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.25));
}
.ems-price-sector.sector-govt { background: var(--pc-soft); color: var(--pc-accent); border-color: var(--pc-accent-soft); }
.ems-price-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #35b56f; box-shadow: 0 0 0 3px rgba(53, 181, 111, 0.18);
}
.ems-price-dot.off { background: #a9b3ba; box-shadow: 0 0 0 3px rgba(169, 179, 186, 0.2); }
.ems-price-name { font-size: 16px; font-weight: 800; color: #1c2630; margin: 0 0 10px; line-height: 1.35; }
.ems-price-rate { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.ems-price-rate .amt {
  font-size: 32px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.05;
  background: linear-gradient(120deg, var(--pc-accent, #24695c) 30%, #4b6a62 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ems-price-rate .per { font-size: 11.5px; font-weight: 700; color: #7c8a95; }
.ems-price-yearly { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ems-price-yearly .save {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; color: #1d7a48;
  background: rgba(53, 181, 111, 0.15);
  border: 1px solid rgba(53, 181, 111, 0.34);
  border-radius: 999px; padding: 2.5px 9px;
}
.ems-price-yearly .strike { color: #a2aeb6; text-decoration: line-through; font-weight: 600; }
.ems-price-yearly .now { font-weight: 800; color: #1d5c39; }
.ems-price-yearly .yr { color: #7c8a95; font-size: 11px; }
.ems-price-yearly.only .k { font-size: 11.5px; font-weight: 700; color: #7c8a95; }

/* Student-count slab rows inside a pricing card (multi-range cards) */
.ems-tier-list { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 14px; }
.ems-tier-row {
  background: var(--pc-soft, rgba(36, 105, 92, 0.06)); border: 1px solid rgba(36, 105, 92, 0.14);
  border-radius: 12px; padding: 10px 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.ems-tier-row .rng {
  display: inline-flex; align-items: center; gap: 6px; color: var(--pc-accent, #24695c);
  font-weight: 700; font-size: 12.5px; background: #ffffff; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(36, 105, 92, 0.16);
}
.ems-tier-row .rng .st { color: #6b857c; font-weight: 600; }
.ems-tier-row .pri { display: flex; align-items: baseline; gap: 4px; }
.ems-tier-row .pri .amt { font-size: 17px; font-weight: 800; color: #123a32; }
.ems-tier-row .pri .per { font-size: 11px; font-weight: 600; color: #7c8a95; }
.ems-tier-row .yr {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px dashed rgba(36, 105, 92, 0.22); padding-top: 6px; margin-top: 2px; font-size: 11.5px;
}
.ems-tier-row .yr .save { color: #1e8e5a; font-weight: 700; }
.ems-tier-row .yr .eff { color: #a17d16; font-weight: 700; }
/* Billing cycle toggle — Monthly | Yearly (pricing reference layout) */
.ems-cycle-toggle {
  display: inline-flex; background: #ffffff; border: 1px solid #d5e8de;
  border-radius: 999px; padding: 4px; gap: 4px; box-shadow: 0 4px 14px rgba(18, 58, 50, 0.08);
}
.ems-cycle-toggle button {
  border: none; background: transparent; border-radius: 999px; padding: 8px 26px;
  font-size: 13px; font-weight: 700; color: #4a6d63; cursor: pointer; transition: all 0.18s ease;
}
.ems-cycle-toggle button.on { background: #24695c; color: #ffffff; box-shadow: 0 4px 12px rgba(36, 105, 92, 0.3); }

/* Selectable student-range list inside a pricing card (compact) */
.ems-tier-select-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #6b857c; margin: 4px 0 7px;
}
.ems-tier-options {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;
  max-height: 252px; overflow-y: auto; padding-right: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ems-tier-options::-webkit-scrollbar { display: none; }
.ems-tier-option {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--pc-soft, rgba(36, 105, 92, 0.05)); border: 1.4px solid rgba(36, 105, 92, 0.13);
  border-radius: 9px; padding: 5.5px 10px; transition: all 0.15s ease;
}
.ems-tier-option:hover { border-color: rgba(36, 105, 92, 0.35); }
.ems-tier-option input { position: absolute; opacity: 0; pointer-events: none; }
.ems-tier-option .chk {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 999px;
  border: 1.6px solid #b9cfc6; background: #ffffff; color: transparent;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease;
}
.ems-tier-option .rng { font-size: 12px; font-weight: 600; color: #33443f; white-space: nowrap; }
.ems-tier-option .amt { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--pc-accent, #24695c); white-space: nowrap; }
.ems-tier-option.selected {
  border-color: var(--pc-accent, #24695c); background: #ffffff;
  box-shadow: 0 4px 12px rgba(36, 105, 92, 0.14);
}
.ems-tier-option.selected .chk { background: var(--pc-accent, #24695c); border-color: var(--pc-accent, #24695c); color: #ffffff; }
.ems-tier-option.selected .rng { font-weight: 700; color: #123a32; }
.ems-tier-range-chip {
  display: inline-flex; align-items: center; gap: 6px; color: var(--pc-accent, #24695c);
  font-weight: 700; font-size: 12.5px; background: var(--pc-soft, rgba(36, 105, 92, 0.08));
  padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(36, 105, 92, 0.16); margin-bottom: 10px;
}

/* "Contact For Custom Offer" — the open-ended row after the largest slab
 * (3500+ students get a tailored plan through the demo-request flow) */
.ems-custom-offer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  width: 100%; text-align: left; background: transparent;
  border: 1.4px dashed rgba(36, 105, 92, 0.32); border-radius: 9px;
  padding: 6.5px 10px; transition: all 0.15s ease; margin-top: 2px;
}
.ems-custom-offer:hover { border-color: var(--pc-accent, #24695c); background: var(--pc-soft, rgba(36, 105, 92, 0.05)); }
.ems-custom-offer .rng { font-size: 11px; font-weight: 600; color: #717171; white-space: nowrap; }
.ems-custom-offer .cta {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--pc-accent, #24695c);
}

.ems-price-features { list-style: none; margin: 0 0 14px; padding: 0; flex: 1 0 auto; }
.ems-price-features li {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #3a4550;
  padding: 3.5px 0; line-height: 1.45;
}
.ems-price-features li .chk {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-soft, rgba(36, 105, 92, 0.09)); color: var(--pc-accent, #24695c);
}
.ems-price-features li svg { color: var(--pc-accent, #24695c); }
.ems-price-est {
  background: linear-gradient(135deg, var(--pc-soft, rgba(36, 105, 92, 0.07)), rgba(255, 255, 255, 0.65));
  border: 1px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.22));
  border-radius: 12px; padding: 9px 13px; margin-bottom: 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.ems-price-est .k { font-size: 11px; font-weight: 800; color: var(--pc-accent, #24695c); }
.ems-price-est .vals { font-size: 12.5px; font-weight: 800; color: #24413a; font-variant-numeric: tabular-nums; }
.ems-price-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid rgba(36, 105, 92, 0.09); padding-top: 13px; margin-top: auto;
}
.ems-price-foot .subs { font-size: 11.5px; font-weight: 700; color: #7c8a95; }
.ems-price-foot .actions { display: flex; gap: 4px; }
.ems-price-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 29px; height: 29px; border-radius: 9px; border: 1px solid rgba(36, 105, 92, 0.16);
  background: #fff; color: #24695c; cursor: pointer; transition: all 0.15s ease;
}
.ems-price-act:hover { background: #24695c; color: #fff; border-color: #24695c; }
.ems-price-act.danger { color: #b6453f; border-color: rgba(182, 69, 63, 0.3); }
.ems-price-act.danger:hover { background: #b6453f; color: #fff; border-color: #b6453f; }

/* landing CTA - gradient button with a hover shine */
a.ems-price-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: 12px; text-decoration: none;
  background: var(--pc-soft, rgba(36, 105, 92, 0.09));
  border: 1.5px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.3));
  color: var(--pc-accent-deep, #173f37);
  font-weight: 800; font-size: 13px; letter-spacing: 0.2px;
  box-shadow: 0 4px 12px -6px rgba(36, 105, 92, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative; overflow: hidden;
}
a.ems-price-cta:hover {
  background: rgba(36, 105, 92, 0.16);
  border-color: var(--pc-accent, #24695c);
  color: var(--pc-accent-deep, #173f37);
}
a.ems-price-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left 0.45s ease;
}
a.ems-price-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(36, 105, 92, 0.35); }
a.ems-price-cta:hover::after { left: 130%; }

/* pattern strip in the edit modal */
.ems-price-pattern-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ems-tint-soft, #f2f6f5); border: 1px solid rgba(36, 105, 92, 0.18);
  border-left: 3px solid #c9a227; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
}
.ems-price-pattern-strip .k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: #6b7a88; }
.ems-price-pattern-strip .v { font-size: 13px; font-weight: 800; color: #1a4a40; }

/* legacy plans collapsible */
.ems-price-legacy { margin-top: 8px; }
.ems-price-legacy-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: #f6f8f7; border: 1px dashed rgba(36, 105, 92, 0.25); border-radius: 10px;
  padding: 9px 14px; font-size: 12px; font-weight: 700; color: #6b7a88; cursor: pointer;
}

/* govt badge on institution rows */
.ems-govt-badge {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: #33598c;
  background: rgba(63, 111, 169, 0.13); border: 1px solid rgba(63, 111, 169, 0.28);
  border-radius: 999px; padding: 2px 8px;
}

/* Portal packages - per-student context strip + cards */
.ems-portal-price-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(36, 105, 92, 0.09), rgba(201, 162, 39, 0.07));
  border: 1px solid rgba(36, 105, 92, 0.18); border-radius: 12px;
  padding: 12px 18px; margin-bottom: 22px;
}
.ems-portal-price-strip .students { display: flex; align-items: baseline; gap: 8px; }
.ems-portal-price-strip .students .k { font-size: 11.5px; font-weight: 800; color: #6b7a88; text-transform: uppercase; letter-spacing: 0.6px; }
.ems-portal-price-strip .students .v { font-size: 22px; font-weight: 800; color: #1a4a40; font-variant-numeric: tabular-nums; }
.ems-portal-price-strip .note { font-size: 12px; color: #4c5a66; font-weight: 600; }

.ems-portal-price-card {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background:
    radial-gradient(150% 110px at 88% -30px, var(--pc-soft, rgba(36, 105, 92, 0.07)) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid rgba(36, 105, 92, 0.1); border-radius: 18px; padding: 20px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(16, 44, 38, 0.06);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ems-portal-price-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pc-accent, #24695c) 0%, var(--pc-accent-soft, rgba(36, 105, 92, 0.25)) 46%, rgba(255, 255, 255, 0) 82%);
}
.ems-portal-price-card.tone-govt   { --pc-accent: #3f6fa9; --pc-accent-soft: rgba(63, 111, 169, 0.28); --pc-soft: rgba(63, 111, 169, 0.08);  --pc-border: rgba(63, 111, 169, 0.34); --pc-shadow: rgba(51, 89, 140, 0.24); }
.ems-portal-price-card.tone-teal   { --pc-accent: #24695c; --pc-accent-soft: rgba(36, 105, 92, 0.26);  --pc-soft: rgba(36, 105, 92, 0.07);  --pc-border: rgba(36, 105, 92, 0.3);   --pc-shadow: rgba(26, 74, 64, 0.24); }
.ems-portal-price-card.tone-violet { --pc-accent: #6e4fd0; --pc-accent-soft: rgba(110, 79, 208, 0.26); --pc-soft: rgba(110, 79, 208, 0.07); --pc-border: rgba(110, 79, 208, 0.3); --pc-shadow: rgba(86, 60, 168, 0.24); }
.ems-portal-price-card.tone-amber  { --pc-accent: #b8901d; --pc-accent-soft: rgba(201, 162, 39, 0.32);  --pc-soft: rgba(201, 162, 39, 0.09);  --pc-border: rgba(184, 144, 29, 0.32); --pc-shadow: rgba(160, 124, 28, 0.24); }
.ems-portal-price-card:hover {
  transform: translateY(-6px);
  border-color: var(--pc-border, rgba(36, 105, 92, 0.3));
  box-shadow: 0 24px 44px -14px var(--pc-shadow, rgba(26, 74, 64, 0.24));
}
.ems-portal-price-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(26, 74, 64, 0.14); }
.ems-portal-price-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ems-portal-price-card .head .name { font-size: 15.5px; font-weight: 800; color: #1f2937; margin: 0; }
.ems-portal-price-card .rate { display: flex; align-items: baseline; gap: 6px; }
.ems-portal-price-card .rate .amt {
  font-size: 32px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.05;
  background: linear-gradient(120deg, var(--pc-accent, #24695c) 30%, #4b6a62 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ems-portal-price-card .rate .per { font-size: 11.5px; font-weight: 700; color: #6b7a88; }
.ems-portal-price-card .yearly { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 4px 0 10px; }
.ems-portal-price-card .yearly .save {
  font-size: 9.5px; font-weight: 800; color: #1d5c39; background: #d9f2e2; border-radius: 999px; padding: 2px 8px;
}
.ems-portal-price-card .yearly .strike { color: #a2aeb6; text-decoration: line-through; font-weight: 600; }
.ems-portal-price-card .yearly .now { font-weight: 800; color: #1d5c39; }
.ems-portal-price-card .yearly .yr { color: #6b7a88; font-size: 11px; }
.ems-portal-price-card .yearly.only { font-size: 11.5px; font-weight: 700; color: #6b7a88; }
.ems-portal-price-card .est {
  background: linear-gradient(135deg, var(--pc-soft, rgba(36, 105, 92, 0.07)), rgba(255, 255, 255, 0.65));
  border: 1px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.22));
  border-radius: 10px; padding: 8px 12px; margin-bottom: 12px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.ems-portal-price-card .est .k { font-size: 11px; font-weight: 800; color: #1a4a40; }
.ems-portal-price-card .est .vals { font-size: 12.5px; font-weight: 800; color: #24695c; font-variant-numeric: tabular-nums; }
.ems-portal-price-card .features { list-style: none; margin: 0 0 14px; padding: 0; }
.ems-portal-price-card .features li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #3a4550; margin-bottom: 7px; line-height: 1.45; }
.ems-portal-price-card .features li .chk {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-soft, rgba(36, 105, 92, 0.09)); color: var(--pc-accent, #24695c);
}
.ems-portal-price-card .features li svg { flex: 0 0 auto; margin-top: 2px; color: #24695c; }

/* request modal - plan head + cycle picker + breakdown */
.ems-portal-request-head {
  background: rgba(36, 105, 92, 0.07); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.ems-cycle-picker { margin-bottom: 14px; }
.ems-cycle-picker .k { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #6b7a88; margin-bottom: 7px; }
.ems-cycle-picker .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ems-cycle-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  border: 1.5px solid rgba(36, 105, 92, 0.2); border-radius: 10px; background: #fff;
  padding: 9px 12px; cursor: pointer; text-align: left; transition: all 0.15s ease;
}
.ems-cycle-opt .lbl { font-size: 12px; font-weight: 800; color: #1a4a40; }
.ems-cycle-opt .save { font-size: 9.5px; font-weight: 800; color: #1d5c39; background: #d9f2e2; border-radius: 999px; padding: 1px 7px; }
.ems-cycle-opt .amt { font-size: 15px; font-weight: 800; color: #24695c; font-variant-numeric: tabular-nums; }
.ems-cycle-opt:hover { border-color: rgba(36, 105, 92, 0.5); }
.ems-cycle-opt.on { border-color: #24695c; background: rgba(36, 105, 92, 0.06); box-shadow: 0 0 0 3px rgba(36, 105, 92, 0.12); }

.ems-cost-breakdown { border: 1px solid rgba(36, 105, 92, 0.18); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.ems-cost-breakdown .row-line {
  display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
  padding: 7px 13px; border-bottom: 1px solid rgba(36, 105, 92, 0.1); color: #3d4753;
}
.ems-cost-breakdown .row-line span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.ems-cost-breakdown .row-line.disc { color: #1d5c39; background: rgba(53, 181, 111, 0.08); }
.ems-cost-breakdown .row-line.setup { color: #7a5a17; background: rgba(201, 162, 39, 0.09); }
.ems-cost-breakdown .row-line.total {
  background: rgba(36, 105, 92, 0.08); font-weight: 800; color: #1a4a40; font-size: 13.5px;
}
.ems-cost-breakdown .note { font-size: 11px; color: #6b7a88; padding: 7px 13px; margin: 0 !important; }

/* badge-soft-teal for cycle chips in my-requests */
.badge-soft-teal {
  background: rgba(36, 105, 92, 0.12); color: #24695c;
  font-weight: 700; border-radius: 6px; padding: 4px 8px; font-size: 11px;
}

/* Landing page — setup-fee chip above the pattern pricing grid */
.ems-landing-setup-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; color: #7a5a17;
  box-shadow: 0 2px 10px rgba(201, 162, 39, 0.12);
}
.ems-landing-setup-chip svg { color: #c9a227; }

/* landing pricing cards sit on the soft section background — keep them light */
.ems-bg-soft .ems-price-card { box-shadow: 0 4px 18px rgba(26, 74, 64, 0.07); }

/* ---------------- Landing: features section ---------------- */
.feather-inline.svg-22, .feather-inline.svg-22 svg { width: 22px; height: 22px; }

.ems-feat-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: #1a4a40; background: rgba(36, 105, 92, 0.1);
  border: 1px solid rgba(36, 105, 92, 0.22);
  border-radius: 999px; padding: 6px 14px;
}
.ems-feat-badge svg { color: #c9a227; }

/* feature card v3 — tinted diagonal wash into white, solid gradient
   icon tile with white glyph, white tag chips. Deliberately different
   silhouette from the pricing cards (no hairline, no watermark). */
.ems-feat-card {
  position: relative; height: 100%;
  display: flex; flex-direction: row; align-items: stretch; gap: 18px;
  background: linear-gradient(155deg, var(--pc-wash, rgba(36, 105, 92, 0.11)) 0%, rgba(255, 255, 255, 0.9) 46%, #ffffff 74%);
  border: 1px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.22));
  border-radius: 18px; padding: 24px;
  box-shadow: 0 2px 12px rgba(16, 44, 38, 0.05);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ems-feat-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ems-feat-card.tone-teal {
  --pc-accent: #24695c; --pc-accent-deep: #173f37;
  --pc-accent-soft: rgba(36, 105, 92, 0.24); --pc-wash: rgba(36, 105, 92, 0.12);
  --pc-shadow: rgba(26, 74, 64, 0.26);
}
.ems-feat-card.tone-blue {
  --pc-accent: #227ee6; --pc-accent-deep: #15509b;
  --pc-accent-soft: rgba(34, 126, 230, 0.24); --pc-wash: rgba(34, 126, 230, 0.12);
  --pc-shadow: rgba(28, 96, 176, 0.26);
}
.ems-feat-card.tone-violet {
  --pc-accent: #6e4fd0; --pc-accent-deep: #4c33a0;
  --pc-accent-soft: rgba(110, 79, 208, 0.24); --pc-wash: rgba(110, 79, 208, 0.11);
  --pc-shadow: rgba(86, 60, 168, 0.26);
}
.ems-feat-card.tone-amber {
  --pc-accent: #b8901d; --pc-accent-deep: #8a6a12;
  --pc-accent-soft: rgba(184, 144, 29, 0.3); --pc-wash: rgba(201, 162, 39, 0.14);
  --pc-shadow: rgba(160, 124, 28, 0.26);
}
.ems-feat-card:hover {
  transform: translateY(-5px);
  border-color: var(--pc-accent, #24695c);
  box-shadow: 0 22px 42px -14px var(--pc-shadow, rgba(26, 74, 64, 0.26));
}

/* head row — title only; the animated SVG scene is the visual anchor */
.ems-feat-head { display: flex; align-items: center; margin-bottom: 12px; }
.ems-feat-head h5 { color: #17222b; font-size: 17px; line-height: 1.3; letter-spacing: -0.15px; }

.ems-feat-desc {
  color: #535f6b; font-size: 13px; line-height: 1.68; margin: 0 0 15px;
}

/* capability chips — white on the tinted wash */
.ems-feat-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.ems-feat-tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap;
  color: var(--pc-accent-deep, #173f37);
  background: #ffffff;
  border: 1px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.24));
  border-radius: 999px; padding: 4px 11px;
  box-shadow: 0 1px 4px rgba(16, 44, 38, 0.08);
}


/* ---------------- Feature card animated SVG artwork ---------------- */
/* art lives in its own right-hand column — never overlaps the text */
.ems-feat-art {
  flex: 0 0 88px; width: 88px; height: 88px; align-self: flex-start;
  margin-top: 4px; pointer-events: none;
  color: var(--pc-accent, #24695c); opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ems-feat-card:hover .ems-feat-art { opacity: 1; transform: scale(1.05); }
.ems-feat-svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 575.5px) {
  .ems-feat-art { flex-basis: 68px; width: 68px; height: 68px; }
}

/* looping scene motion — stroke drawing, pulses, floats, orbit, flip, slide */
@keyframes emsSvgDraw {
  0% { stroke-dashoffset: 170; }
  45%, 78% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes emsSvgPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@keyframes emsSvgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes emsSvgOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes emsSvgSwing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes emsSvgFlip {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
}
@keyframes emsSvgSlide {
  0% { transform: translateY(2px); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: translateY(9px); opacity: 1; }
  90%, 100% { transform: translateY(9px); opacity: 0; }
}

.ems-feat-svg .a-draw { stroke-dasharray: 170; animation: emsSvgDraw 4.2s ease-in-out infinite; }
.ems-feat-svg .a-pulse { animation: emsSvgPulse 2.6s ease-in-out infinite; }
.ems-feat-svg .a-float { animation: emsSvgFloat 3s ease-in-out infinite; }
.ems-feat-svg .a-orbit { transform-origin: 36px 36px; animation: emsSvgOrbit 9s linear infinite; }
.ems-feat-svg .a-swing { transform-origin: 36px 14px; animation: emsSvgSwing 3.4s ease-in-out infinite; }
.ems-feat-svg .a-flip { transform-origin: 36px 20px; animation: emsSvgFlip 3.2s ease-in-out infinite; }
.ems-feat-svg .a-slide { animation: emsSvgSlide 3.4s ease-in-out infinite; }

.ems-feat-svg .d1 { animation-delay: 0.3s; }
.ems-feat-svg .d2 { animation-delay: 0.7s; }
.ems-feat-svg .d3 { animation-delay: 1.1s; }
.ems-feat-svg .d4 { animation-delay: 1.5s; }

.ems-feat-card:hover .ems-feat-svg .a-draw { animation-duration: 2.6s; }
.ems-feat-card:hover .ems-feat-svg .a-orbit { animation-duration: 5s; }
.ems-feat-card:hover .ems-feat-svg .a-swing { animation-duration: 2s; }

@media (prefers-reduced-motion: reduce) {
  .ems-feat-svg .a-draw, .ems-feat-svg .a-pulse, .ems-feat-svg .a-float,
  .ems-feat-svg .a-orbit, .ems-feat-svg .a-swing, .ems-feat-svg .a-flip,
  .ems-feat-svg .a-slide { animation: none; }
  .ems-feat-svg .a-draw { stroke-dashoffset: 0; }
}

/* ---------------- Features infographic: module map ---------------- */
.ems-map-panel {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201, 162, 39, 0.12) 0%, transparent 44%),
    linear-gradient(135deg, #1d4a41 0%, #24695c 58%, #2c7d6d 100%);
  border-radius: 22px; padding: 26px 28px 20px;
  color: #fff; box-shadow: 0 14px 34px rgba(26, 74, 64, 0.30);
}
.ems-map-head { text-align: center; margin-bottom: 20px; }
.ems-map-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #f3d98a; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(243, 217, 138, 0.4);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
}
.ems-map-title { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.2px; color: #fff; }
.ems-map-subtitle { font-size: 12.5px; color: rgba(255, 255, 255, 0.82); max-width: 640px; margin: 0 auto; line-height: 1.6; }
.ems-map-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.ems-map-group {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px; padding: 14px 14px 12px;
  backdrop-filter: blur(2px);
}
.ems-map-group-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: #f3d98a; white-space: nowrap; overflow: hidden;
}
.ems-map-group-icon {
  display: inline-flex; width: 26px; height: 26px; flex: 0 0 26px;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14); border-radius: 8px; color: #fff;
}
.ems-map-group-icon svg { width: 14px; height: 14px; }
.ems-map-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ems-map-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; padding: 3px 9px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.ems-map-chip:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }
.ems-map-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: #5ec8b4; flex: 0 0 5px; }
.ems-map-footer {
  margin-top: 16px; text-align: center; font-size: 11.5px; font-weight: 700;
  color: rgba(255, 255, 255, 0.75); letter-spacing: 0.3px;
}
@media (max-width: 1199.5px) { .ems-map-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.5px) { .ems-map-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.5px) { .ems-map-grid { grid-template-columns: 1fr; } }
/* ---------------- Features infographic: compact flowchart ----------------
   No illustrations — each module is a node on a connected spine with a
   compact capability-chip card, so the whole section stays scannable. */
.ems-flow-wrap {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  max-width: 960px; margin: 0 auto;
}
/* the connecting spine */
.ems-flow-wrap::before {
  content: "";
  position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px;
  background: linear-gradient(180deg, rgba(36, 105, 92, 0.35) 0%, rgba(201, 162, 39, 0.35) 100%);
}
.ems-flow-row { position: relative; display: flex; gap: 18px; align-items: flex-start; }
.ems-flow-node {
  position: relative; z-index: 1;
  flex: 0 0 56px; display: flex; justify-content: center;
}
.ems-flow-node .ic {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pc-accent, #24695c); color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px -8px var(--pc-shadow, rgba(26, 74, 64, 0.55));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ems-flow-node .ic svg { width: 22px; height: 22px; }
.ems-flow-row:hover .ems-flow-node .ic {
  transform: scale(1.08);
  box-shadow: 0 12px 22px -8px var(--pc-shadow, rgba(26, 74, 64, 0.6));
}
.ems-flow-card {
  flex: 1 1 auto; min-width: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.2));
  border-radius: 14px; padding: 15px 18px 14px;
  box-shadow: 0 3px 12px rgba(16, 44, 38, 0.05);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.ems-flow-row:hover .ems-flow-card {
  transform: translateY(-3px);
  border-color: var(--pc-accent, #24695c);
  box-shadow: 0 18px 34px -16px var(--pc-shadow, rgba(26, 74, 64, 0.4));
}
.ems-flow-card .head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 11px; flex-wrap: wrap;
}
.ems-flow-card .t { font-size: 15.5px; font-weight: 800; color: #17222b; margin: 0 0 3px; letter-spacing: -0.2px; }
.ems-flow-card .d { font-size: 12px; color: #535f6b; margin: 0; line-height: 1.55; }
.ems-flow-card .stat {
  white-space: nowrap;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--pc-accent, #24695c);
  border-radius: 999px; padding: 6px 13px;
  box-shadow: 0 8px 16px -8px var(--pc-shadow, rgba(26, 74, 64, 0.5));
}
.ems-flow-card .stat b { font-size: 12.5px; font-weight: 800; margin-right: 4px; }
.ems-flow-card .chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.ems-flow-card .chips li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: #33424e;
  background: #fff;
  border: 1px solid var(--pc-accent-soft, rgba(36, 105, 92, 0.22));
  border-radius: 999px; padding: 4px 11px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ems-flow-card .chips li:hover { border-color: var(--pc-accent, #24695c); background: #f2faf7; }
.ems-flow-card .chips li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pc-accent, #24695c); flex: 0 0 5px;
}
/* tone accents */
.ems-flow-row.tone-teal {
  --pc-accent: #24695c; --pc-accent-deep: #173f37;
  --pc-accent-soft: rgba(36, 105, 92, 0.24); --pc-wash: rgba(36, 105, 92, 0.12);
  --pc-shadow: rgba(26, 74, 64, 0.5);
}
.ems-flow-row.tone-blue {
  --pc-accent: #227ee6; --pc-accent-deep: #15509b;
  --pc-accent-soft: rgba(34, 126, 230, 0.24); --pc-wash: rgba(34, 126, 230, 0.11);
  --pc-shadow: rgba(28, 96, 176, 0.5);
}
.ems-flow-row.tone-violet {
  --pc-accent: #6e4fd0; --pc-accent-deep: #4c33a0;
  --pc-accent-soft: rgba(110, 79, 208, 0.24); --pc-wash: rgba(110, 79, 208, 0.11);
  --pc-shadow: rgba(86, 60, 168, 0.5);
}
.ems-flow-row.tone-amber {
  --pc-accent: #b8901d; --pc-accent-deep: #8a6a12;
  --pc-accent-soft: rgba(184, 144, 29, 0.3); --pc-wash: rgba(201, 162, 39, 0.14);
  --pc-shadow: rgba(160, 124, 28, 0.5);
}
@media (max-width: 767.5px) {
  .ems-flow-wrap::before { left: 21px; }
  .ems-flow-node { flex: 0 0 44px; }
  .ems-flow-node .ic { width: 44px; height: 44px; }
  .ems-flow-node .ic svg { width: 18px; height: 18px; }
  .ems-flow-card .head { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ems-flow-row:hover .ems-flow-node .ic { transform: none; }
  .ems-flow-row:hover .ems-flow-card { transform: none; }
}
}

/* ---------------- FAQ accordion ---------------- */
.ems-faq-list { display: flex; flex-direction: column; gap: 10px; }
.ems-faq-item {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid rgba(36, 105, 92, 0.14);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(16, 44, 38, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ems-faq-item.open {
  border-color: rgba(36, 105, 92, 0.32);
  box-shadow: 0 12px 28px -12px rgba(26, 74, 64, 0.22);
}
.ems-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: 0; text-align: left; cursor: pointer;
  padding: 16px 20px;
  font-size: 14.5px; font-weight: 700; color: #1c2630; line-height: 1.45;
}
.ems-faq-q:hover { color: #24695c; }
.ems-faq-q .q { min-width: 0; }
.ems-faq-toggle {
  position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
  background: rgba(36, 105, 92, 0.1); transition: transform 0.3s ease, background 0.3s ease;
}
.ems-faq-toggle::before, .ems-faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px; border-radius: 2px; background: #24695c;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease;
}
.ems-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.ems-faq-item.open .ems-faq-toggle { transform: rotate(45deg); background: #24695c; }
.ems-faq-item.open .ems-faq-toggle::before,
.ems-faq-item.open .ems-faq-toggle::after { background: #fff; }

.ems-faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.ems-faq-item.open .ems-faq-a { grid-template-rows: 1fr; }
.ems-faq-a .inner { overflow: hidden; }
.ems-faq-a p {
  padding: 0 20px 16px; margin: 0;
  color: #535f6b; font-size: 13.5px; line-height: 1.7;
  border-top: 1px dashed rgba(36, 105, 92, 0.18);
  padding-top: 12px; margin-top: 0;
}

/* pricing card — animated SVG emblem (replaces the static icon chip on the landing) */
.ems-price-artwrap {
  flex: 0 0 auto; width: 52px; height: 52px;
  color: var(--pc-accent, #24695c); opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ems-price-card:hover .ems-price-artwrap { opacity: 1; transform: scale(1.07); }
.ems-price-artwrap .ems-feat-svg { width: 100%; height: 100%; }
@media (max-width: 575.5px) {
  .ems-price-artwrap { width: 44px; height: 44px; }
}

/* Result sheet footer — Increlog branding under every sheet (screen + print) */
.ems-sheet-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--ems-primary-25, rgba(36, 105, 92, 0.22));
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  color: #7c8a95;
}
.ems-sheet-footer img, .ems-sheet-footer svg { opacity: 0.85; }

/* Control Panel — module toggle tiles */
.ems-module-toggle {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid rgba(36, 105, 92, 0.16);
  border-radius: 10px; padding: 9px 12px; cursor: pointer;
  transition: all 0.15s ease; text-align: left;
}
.ems-module-toggle .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #a9b3ba; box-shadow: 0 0 0 3px rgba(169, 179, 186, 0.18);
  transition: all 0.15s ease;
}
.ems-module-toggle.on .dot { background: #35b56f; box-shadow: 0 0 0 3px rgba(53, 181, 111, 0.18); }
.ems-module-toggle .lbl { flex: 1 1 auto; font-size: 12.5px; font-weight: 700; color: #2c3640; }
.ems-module-toggle:hover { border-color: rgba(36, 105, 92, 0.4); }
.ems-module-toggle.on { background: rgba(36, 105, 92, 0.04); border-color: rgba(36, 105, 92, 0.3); }

/* Themed confirm dialog (replaces window.confirm) */
.ems-confirm .modal-content { border-radius: 16px; border: 0; overflow: hidden; }
.ems-confirm .modal-body { text-align: center; padding: 26px 24px 10px; }
.ems-confirm-icon {
  width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(36, 105, 92, 0.1); color: #24695c;
}
.ems-confirm .modal-footer { justify-content: center; gap: 8px; padding-bottom: 18px; }

/* Student documents & media — upload slots + viewer */
.ems-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px;
}
.ems-media-slot {
  border: 1px solid rgba(36, 105, 92, 0.16); border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.ems-media-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 10px; background: var(--ems-tint-soft, #f2f6f5);
}
.ems-media-head .k { font-size: 10.5px; font-weight: 800; color: #1a4a40; line-height: 1.25; }
.ems-media-head .s { font-size: 9px; font-weight: 700; color: #6b7a88; white-space: nowrap; }
.ems-media-thumb {
  position: relative; height: 96px; background: #fbfdfc; cursor: pointer;
}
.ems-media-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ems-media-thumb.empty {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #f7faf9, #f7faf9 8px, #f1f5f3 8px, #f1f5f3 16px);
}
.ems-media-thumb .empty-lbl { font-size: 10px; font-weight: 700; color: #a9b3ba; }
.ems-media-busy {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.7);
}
.ems-media-acts {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-top: 1px solid rgba(36, 105, 92, 0.1);
}
.ems-media-acts .btn { padding: 2px 8px; font-size: 11px; }

/* Competition manager — club cards */
.ems-club-card {
  background:
    radial-gradient(150% 110px at 88% -30px, rgba(36, 105, 92, 0.07) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid rgba(36, 105, 92, 0.14);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 2px 10px rgba(16, 44, 38, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.ems-club-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(26, 74, 64, 0.2); }
.min-width-0 { min-width: 0; }

/* ---------------- High School result sheet ---------------- */
/* theme-aware translation of the reference design: rounded table frame,
   part in/out badges, paired paper grades, double-rule signatures. */
.ems-hs { display: flex; flex-direction: column; }
.hs-table-wrapper {
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.25));
  border-radius: 14px; overflow: hidden; background: #fff; margin-top: 10px;
  width: 675px; max-width: 100%; margin-left: auto; margin-right: auto;
}
.hs-table {
  width: 100%; border-collapse: collapse; font-size: 8.5px;
  min-width: 0; border-style: hidden; table-layout: fixed;
}
.hs-table th, .hs-table td {
  border: 1px solid var(--hs-line, #cbd5e1);
  padding: 2.5px 1.5px; text-align: center; vertical-align: middle; background: #fff;
  overflow: hidden;
}
.hs-table thead th { background: var(--ems-tint, #eef6f3); font-weight: 700; color: var(--ems-dark, #1a4a40); }
.hs-table thead tr:first-child th { background: var(--ems-tint-soft, #f2f6f5); border-bottom-width: 2px; }
.hs-subject-head { font-size: 12px; }
.hs-term { font-size: 12.5px; letter-spacing: 0.4px; }
.hs-subject { font-weight: 600; text-align: left; padding-left: 8px; }
.hs-num { font-variant-numeric: tabular-nums; }
.hs-out { color: #7c8a95; font-weight: 600; font-size: 8px; }
.hs-muted { color: #a9b3ba; }
.hs-point { font-weight: 800; color: var(--ems-dark, #1a4a40); font-variant-numeric: tabular-nums; }

/* part in/out badges — pass/fail by 33% of the part full */
.hs-badge {
  display: inline-block; min-width: 34px; padding: 1.5px 4px; border-radius: 30px;
  font-size: 8.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hs-badge.pass { background: rgba(53, 181, 111, 0.14); color: #0b5e2e; border: 1px solid rgba(53, 181, 111, 0.35); }
.hs-badge.fail { background: rgba(226, 86, 86, 0.12); color: #a1171f; border: 1px solid rgba(226, 86, 86, 0.35); }
.hs-badge.neutral { background: var(--ems-tint-soft, #f2f6f5); color: var(--ems-dark, #1a4a40); border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.25)); }

/* totals + meta rows */
.hs-total th { background: var(--ems-tint-soft, #f2f6f5); font-weight: 800; font-size: 12px; }
.hs-meta-row th { background: #fff; font-weight: 700; }
.hs-merit { color: var(--ems-dark, #1a4a40); }

/* progress + signatures */
.hs-table .progress-check {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px;
}
.hs-table .progress-check label {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; cursor: default; margin: 0;
}
.hs-sign-head th { border-top: 4px double var(--hs-line, #94a9c2); background: var(--ems-tint-soft, #f2f6f5); font-weight: 700; }
.hs-sign-line {
  padding: 14px 4px 6px !important; border-bottom: none !important;
  color: #7c8a95; font-weight: 500; font-size: 9px;
}

/* screen card look */
.ems-hs .ems-mks { width: 675px; max-width: 100%; margin: 0 auto 10px; }

/* High-School result sheets on phones — same sideways-scroll treatment as
   the primary marksheet: the .ems-hs sheet (header band + tabulation table)
   and the board-pattern sheet keep their design width and scroll inside
   their own container instead of collapsing the columns together. Desktop
   and print are untouched. */
@media (max-width: 767.98px) {
  .ems-hs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ems-hs .ems-mks {
    min-width: 675px;
    margin: 0 0 10px;
  }
  .ems-hs .hs-table-wrapper {
    min-width: 675px;
    margin-left: 0;
    margin-right: 0;
  }
  .ems-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ems-board > div {
    min-width: 700px;
  }
}

/* print — match the periodical portrait scale */
@media print {
  /* full-bleed portrait: the sheet uses the whole printable width */
  .ems-hs .ems-mks { width: 100% !important; max-width: 100% !important; margin: 0 0 8px 0; }
  .ems-hs .hs-table-wrapper { width: 100% !important; max-width: 100% !important; }
  /* readability bump */
  .ems-hs .hs-table { min-width: 0; font-size: 10px; }
  .hs-table th, .hs-table td { padding: 3.5px 3px; }
  .hs-table th.hs-subject { font-size: 10.5px; }
  .hs-table .hs-point { font-size: 10.5px; }
  .hs-badge { min-width: 42px; font-size: 9.5px; padding: 1.5px 5px; }
  .hs-out { font-size: 9px; }
  .ems-hs .grade-badge { font-size: 9.5px; min-width: 38px; }
  .hs-meta-row th { font-size: 10px; }
  .hs-total th { font-size: 10.5px; }
  .ems-hs .ems-final-grades th { font-size: 9px; }
  .ems-hs .ems-final-grades td { font-size: 9px; }
  .hs-sign-line { padding: 14px 4px 6px !important; font-size: 10px; }
}

/* HS portrait card — compact grading table beside the student profile */
.ems-hs .ems-final-split { gap: 10px; }
.ems-hs .ems-final-grades th { font-size: 7.5px; padding: 1px 7px; }
.ems-hs .ems-final-grades td { font-size: 7.5px; padding: 0.5px 7px; }
.ems-hs .ems-final-grades table { min-width: 118px; }
.ems-hs .ems-mks-qr { flex: 0 0 auto; }
@media (max-width: 700px) {
  .ems-hs .ems-final-split { flex-wrap: wrap; }
  .ems-hs .ems-final-profile { flex: 1 1 100%; }
}

/* stacked in/out part cell — portrait density */
.hs-part-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; }

/* HS portrait header — fixed 60/20/20 split: profile | grading table | QR */
.ems-hs .ems-mks-body.hs-split {
  display: grid;
  grid-template-columns: 60% 20% 20%;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}
.ems-hs .hs-split .ems-final-profile { min-width: 0; display: flex; }

/* grading scale — proper bordered tabular grid */
.ems-hs .ems-final-grades { min-width: 0; }
.ems-hs .ems-final-grades table {
  border-collapse: collapse; width: 100%;
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.25));
  border-radius: 4px; overflow: hidden;
}
.ems-hs .ems-final-grades th,
.ems-hs .ems-final-grades td {
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.22));
  padding: 1px 4px;
}
.ems-hs .ems-final-grades thead th {
  background: var(--ems-tint-soft, #f2f6f5);
  border-bottom: 2px solid var(--ems-accent, #c9a227);
  text-align: center;
}
.ems-hs .ems-final-grades td.g { text-align: center; font-weight: 800; }
.ems-hs .ems-final-grades td.r { text-align: center; }

/* QR keeps to its 20% lane */
.ems-hs .hs-split .ems-mks-qr {
  flex: none; border-left: 1px dashed var(--ems-primary-25, rgba(36, 105, 92, 0.25));
  padding: 4px 0 4px 8px;
}
@media (max-width: 700px) {
  .ems-hs .ems-mks-body.hs-split { grid-template-columns: 1fr; }
  .ems-hs .hs-split .ems-mks-qr { border-left: 0; padding-left: 0; }
}

/* fixed layout: subject column wider, grade columns steady */
.hs-table th.hs-subject,
.hs-table thead th.hs-subject-head { width: 20%; }
.hs-table th.hs-subject { text-align: left; padding-left: 5px; white-space: normal; }
.hs-table th.hs-point { width: 8%; }

/* ---------------- HS sheet polish ---------------- */

/* title band — premium light treatment instead of the dark solid fill */
.ems-hs .ems-mks-title {
  background: linear-gradient(180deg, #ffffff 0%, var(--ems-tint-soft, #f2f6f5) 100%);
  color: var(--ems-dark, #1a4a40);
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.18));
  border-bottom: 2px solid var(--ems-accent, #c9a227);
  border-radius: 6px;
  font-family: "Tiro Bangla", "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 30px;
}

/* letter grade — conditional badge: success unless F (danger), matching
   the CQ / MCQ part badges */
.ems-hs .grade-badge {
  display: inline-block; min-width: 36px;
  padding: 1.5px 8px; border-radius: 30px;
  font-weight: 800; font-size: 9px;
  background: rgba(53, 181, 111, 0.14);
  color: #0b5e2e;
  border: 1px solid rgba(53, 181, 111, 0.35);
}
.ems-hs .grade-badge.f {
  background: rgba(226, 86, 86, 0.12);
  color: #a1171f;
  border-color: rgba(226, 86, 86, 0.35);
}

/* print — one student per page, slimmer side margins, wider subject column */
@media print {
  .ems-hs {
    page-break-after: always;
    break-inside: avoid;
  }
  .ems-hs:last-child { page-break-after: auto; }
  .ems-hs .hs-table th.hs-subject { width: 24%; }
  .ems-hs .hs-table thead th.hs-subject-head { width: 24%; }
  .ems-hs .ems-mks-title { font-size: 16px; line-height: 28px; }
}

/* HS grading table — top aligns with the student name banner
   (.ems-mks-name margin-top: 8px) now that its label is gone */
.ems-hs .hs-split .ems-final-grades { margin-top: 8px; }

/* HS merit row — "Merit Position [n]  |  Failed [n] (subjects)" as
   caption + value pairs with a divider, centered like the badge rows */
.ems-hs .hs-merit {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.ems-hs .hs-merit-lbl {
  font-size: 11px; font-weight: 700; color: var(--ems-dark, #1a4a40);
}
.ems-hs .hs-merit-pos {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 22px; padding: 0 10px; border-radius: 999px;
  background: var(--ems-tint-soft, #f2f6f5);
  border: 1px solid var(--ems-primary-25, rgba(36, 105, 92, 0.25));
  color: var(--ems-dark, #1a4a40);
  font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums;
}
.ems-hs .hs-merit-sep {
  width: 1px; height: 16px; margin: 0 6px;
  background: var(--ems-primary-25, rgba(36, 105, 92, 0.3));
}
.ems-hs .hs-merit-subj {
  font-size: 10px; font-weight: 700; color: #a1171f;
}

/* optional (4th) subject rows — tinted with an accent edge + tag */
.ems-hs .hs-table tr.hs-opt > th {
  background: #fff;
}
.ems-hs .hs-table tr.hs-opt > th.hs-subject {
  border-left: 2px solid var(--ems-accent, #c9a227);
}
.hs-opt-tag {
  display: inline; margin-left: 5px; vertical-align: middle; white-space: nowrap;
  font-size: 8px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: #b8901d; font-style: italic;
}
.hs-opt-note {
  font-size: 8.5px !important; font-weight: 500; color: #8a97a3;
  background: #fff !important; border: 0 !important;
  text-align: right; padding: 2px 6px;
}

/* ===== Forgot-password recovery (3-step) ============================== */
.ems-forgot-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.ems-forgot-steps .ems-step {
  display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0;
}
.ems-forgot-steps .ems-step .n {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: #eef2f5; color: #8a97a3; border: 1.5px solid #e6edef;
  transition: all .2s ease;
}
.ems-forgot-steps .ems-step .lbl {
  font-size: 11.5px; font-weight: 700; color: #8a97a3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ems-forgot-steps .ems-step .bar {
  flex: 1 1 auto; height: 2px; border-radius: 2px; background: #e6edef; min-width: 10px;
}
.ems-forgot-steps .ems-step.active .n { background: #24695c; border-color: #24695c; color: #fff; box-shadow: 0 4px 10px rgba(36,105,92,.28); }
.ems-forgot-steps .ems-step.active .lbl { color: #24695c; }
.ems-forgot-steps .ems-step.done .n { background: rgba(36,105,92,.1); border-color: rgba(36,105,92,.4); color: #24695c; }
.ems-forgot-steps .ems-step.done .lbl { color: #24695c; }
.ems-forgot-steps .ems-step.done .bar,
.ems-forgot-steps .ems-step.active ~ .ems-step .bar { background: #e6edef; }
.ems-forgot-steps .ems-step.done .bar { background: #24695c; }

.ems-channel-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1.5px solid #e6edef; border-radius: 12px;
  background: #fff; cursor: pointer; transition: all .18s ease; margin-bottom: 10px;
}
.ems-channel-card:hover { border-color: #b9cfd3; transform: translateY(-1px); }
.ems-channel-card.selected {
  border-color: #24695c; background: rgba(36,105,92,.05);
  box-shadow: 0 6px 16px rgba(36,105,92,.12);
}
.ems-channel-card .ic {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(36,105,92,.09); color: #24695c;
}
.ems-channel-card.selected .ic { background: #24695c; color: #fff; }
.ems-channel-card .ttl { font-size: 13.5px; font-weight: 700; color: #2c323f; }
.ems-channel-card .dst { font-size: 12px; color: #718096; font-family: Rubik, monospace; }
.ems-channel-card .tick {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid #d7dee4; display: flex; align-items: center; justify-content: center;
  color: transparent; flex: 0 0 20px; transition: all .18s ease;
}
.ems-channel-card.selected .tick { background: #24695c; border-color: #24695c; color: #fff; }

.ems-otp-row { display: flex; gap: 8px; justify-content: center; margin: 6px 0 4px; }
.ems-otp-box {
  width: 46px; height: 54px; text-align: center; font-size: 22px; font-weight: 700;
  font-family: Rubik, sans-serif; color: #2c323f;
  border: 1.5px solid #e6edef; border-radius: 10px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -moz-appearance: textfield; appearance: textfield;
}
.ems-otp-box::-webkit-outer-spin-button, .ems-otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ems-otp-box:focus {
  outline: none; border-color: #24695c; background: rgba(36,105,92,.03);
  box-shadow: 0 0 0 3px rgba(36,105,92,.12);
}
.ems-otp-box.filled { border-color: #24695c; background: rgba(36,105,92,.06); }
.ems-otp-box.error { border-color: #dc3545; background: rgba(220,53,69,.05); }

@keyframes emsOtpShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.ems-otp-row.shake { animation: emsOtpShake .35s ease; }

@keyframes emsSuccessPop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.ems-forgot-success .circle { animation: emsSuccessPop .45s cubic-bezier(.34,1.56,.64,1) both; }
.ems-forgot-success .txt { animation: emsFadeUp .4s ease .15s both; }

/* notify settings (control panel / central) */
.ems-notify-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer; user-select: none;
}
.ems-notify-head .ic {
  width: 36px; height: 36px; border-radius: 10px; margin-right: 12px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(36,105,92,.09); color: #24695c;
}
.ems-notify-head .caret { transition: transform .2s ease; color: #8a97a3; }
.ems-notify-body { border-top: 1px solid #e6edef; padding: 16px; }
.collapsed .ems-notify-body { display: none; }
.collapsed .ems-notify-head .caret { transform: rotate(-90deg); }
@keyframes emsFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ================= Landing premium redesign: hero, types, why, CTA ================= */

/* Hero — gradient mesh backdrop, dot grid, split copy + illustration */
.ems-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(56% 64% at 84% 12%, rgba(201, 162, 39, 0.10) 0%, transparent 60%),
    radial-gradient(48% 58% at 8% 88%, rgba(36, 105, 92, 0.12) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f4f9f8 100%);
}
.ems-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(36, 105, 92, 0.12) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(100deg, transparent 4%, #000 34%, #000 72%, transparent 98%);
  mask-image: linear-gradient(100deg, transparent 4%, #000 34%, #000 72%, transparent 98%);
  pointer-events: none;
}
.ems-hero .container { position: relative; }
.ems-hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: 44px; align-items: center;
}
.ems-hero-title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 800; letter-spacing: -0.6px; line-height: 1.16;
  color: #17222b; max-width: 560px;
}
.ems-hero-sub {
  font-size: 15px; color: #535f6b; line-height: 1.75;
  max-width: 520px; margin: 14px 0 26px;
}
.ems-hero-cta .btn {
  border-radius: 12px; padding: 11px 26px; font-weight: 700;
}
.ems-hero-cta .btn-grad,
.ems-hero-cta .btn-primary {
  background: linear-gradient(135deg, #3aac93 0%, #1f8b78 100%);
  border: none; color: #fff;
  box-shadow: 0 14px 26px -10px rgba(31, 139, 120, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ems-hero-cta .btn-grad:hover,
.ems-hero-cta .btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 32px -10px rgba(31, 139, 120, 0.55);
  background: linear-gradient(135deg, #3aac93 0%, #1f8b78 100%);
  border: none; color: #fff;
}
/* Navbar register — soft tinted pill instead of a dark solid block */
.ems-nav-cta .btn {
  background-color: rgba(36, 105, 92, 0.1) !important;
  border-color: transparent !important;
  color: #24695c !important;
  border-radius: 999px;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ems-nav-cta .btn:hover, .ems-nav-cta .btn:focus {
  background-color: #24695c !important;
  color: #fff !important;
}
.ems-hero-cta .btn-soft-secondary {
  background: #fff; border: 1.5px solid rgba(36, 105, 92, 0.35); color: #24695c;
}
.ems-hero-cta .btn-soft-secondary:hover, .ems-hero-cta .btn-soft-secondary:focus {
  background: rgba(36, 105, 92, 0.07); border-color: #24695c; color: #1d4f45;
}
.ems-hero-stats {
  display: flex; flex-wrap: wrap; gap: 14px 0;
  border-top: 1px solid rgba(36, 105, 92, 0.12); padding-top: 18px;
}
.ems-hero-stat { display: flex; flex-direction: column; padding: 0 26px; }
.ems-hero-stat:first-child { padding-left: 0; }
.ems-hero-stat + .ems-hero-stat { border-left: 1px solid rgba(36, 105, 92, 0.14); }
.ems-hero-stat .v { font-size: 22px; font-weight: 800; color: #173f37; letter-spacing: -0.4px; }
.ems-hero-stat .l { font-size: 11px; font-weight: 600; color: #8b99a6; max-width: 110px; line-height: 1.4; }
.ems-hero-art { position: relative; }
.ems-hero-svg { width: 100%; height: auto; display: block; }
.ems-hero-svg .a-float, .ems-hero-svg .a-pulse { transform-box: fill-box; }
.ems-hero-svg .a-float { transform-origin: center; }
@media (max-width: 991.5px) {
  .ems-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .ems-hero-art { max-width: 520px; margin: 0 auto; }
  .ems-hero-stat { padding: 0 18px; }
}

/* Institution types — gradient icon tiles */
.ems-type-tile {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  width: 100%; height: 100%; padding: 20px 12px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  border: 1px solid rgba(36, 105, 92, 0.14); border-radius: 16px;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.ems-type-tile:hover {
  transform: translateY(-5px);
  border-color: var(--tg-deep, #24695c);
  box-shadow: 0 18px 34px -14px var(--tg-shadow, rgba(26, 74, 64, 0.4));
}
.ems-type-icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tg-deep, #24695c);
  background: var(--tg-soft, linear-gradient(135deg, #e7f1ee, #d7e9e2));
  border: 1px solid var(--tg-border, rgba(36, 105, 92, 0.16));
}
.ems-type-icon svg { width: 22px; height: 22px; }
.tg-kindergarten { --tg: linear-gradient(135deg, #f2b632, #e0912a); --tg-deep: #b3770f; --tg-shadow: rgba(224, 145, 42, 0.5); --tg-soft: linear-gradient(135deg, #fdf6e3, #fbedcf); --tg-border: rgba(224, 145, 42, 0.25); }
.tg-primary      { --tg: linear-gradient(135deg, #2c7d6d, #24695c); --tg-deep: #24695c; --tg-shadow: rgba(36, 105, 92, 0.5); --tg-soft: linear-gradient(135deg, #e7f5ef, #d3ebe2); --tg-border: rgba(36, 105, 92, 0.22); }
.tg-highschool   { --tg: linear-gradient(135deg, #3a8bef, #227ee6); --tg-deep: #227ee6; --tg-shadow: rgba(34, 126, 230, 0.5); --tg-soft: linear-gradient(135deg, #e9f2fe, #d8e7fd); --tg-border: rgba(34, 126, 230, 0.22); }
.tg-college      { --tg: linear-gradient(135deg, #8465e0, #6e4fd0); --tg-deep: #6e4fd0; --tg-shadow: rgba(110, 79, 208, 0.5); --tg-soft: linear-gradient(135deg, #f1ecfd, #e5dcfb); --tg-border: rgba(110, 79, 208, 0.22); }
.tg-university   { --tg: linear-gradient(135deg, #3450b5, #24399b); --tg-deep: #2c439f; --tg-shadow: rgba(36, 57, 155, 0.5); --tg-soft: linear-gradient(135deg, #eaeefb, #d9e1f7); --tg-border: rgba(36, 57, 155, 0.22); }
.tg-coaching     { --tg: linear-gradient(135deg, #f29b4b, #e2792a); --tg-deep: #d06a1c; --tg-shadow: rgba(226, 121, 42, 0.5); --tg-soft: linear-gradient(135deg, #fdf0e2, #fbe4cd); --tg-border: rgba(226, 121, 42, 0.25); }
.tg-madrasha     { --tg: linear-gradient(135deg, #2aa38a, #1c8b7e); --tg-deep: #1c8b7e; --tg-shadow: rgba(28, 139, 126, 0.5); --tg-soft: linear-gradient(135deg, #e4f4f0, #d0ebe5); --tg-border: rgba(28, 139, 126, 0.22); }

/* Why — dark gradient panel with glass tiles */
.ems-why-panel {
  background:
    radial-gradient(90% 120% at 96% 0%, rgba(201, 162, 39, 0.14) 0%, transparent 45%),
    linear-gradient(135deg, #1d4a41 0%, #24695c 58%, #2c7d6d 100%);
  border-radius: 22px; padding: 28px 28px 22px;
  box-shadow: 0 16px 38px rgba(26, 74, 64, 0.3);
}
.ems-why-tile {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px; padding: 20px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.ems-why-tile:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.14); }
.ems-why-tile .ic {
  width: 44px; height: 44px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); color: #f3d98a; margin-bottom: 13px;
}
.ems-why-tile .ic svg { width: 22px; height: 22px; }
.ems-why-tile h5 { color: #fff; font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.ems-why-tile p { color: rgba(255, 255, 255, 0.82); font-size: 12.5px; line-height: 1.65; margin: 0; }
.ems-why-foot {
  margin-top: 18px; text-align: center; font-size: 11.5px; font-weight: 700;
  color: rgba(255, 255, 255, 0.75); letter-spacing: 0.3px;
}

/* CTA — gradient banner with decorative rings */
.ems-cta {
  position: relative; overflow: hidden;
  padding: 48px 30px; border-radius: 24px;
  background:
    radial-gradient(70% 110% at 90% 0%, rgba(201, 162, 39, 0.16) 0%, transparent 50%),
    linear-gradient(125deg, #1d4a41 0%, #24695c 55%, #2c7d6d 100%);
  box-shadow: 0 18px 42px -14px rgba(26, 74, 64, 0.55);
}
.ems-cta h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -0.3px; position: relative; }
.ems-cta .cta-sub {
  color: rgba(255, 255, 255, 0.85); font-size: 14px; line-height: 1.7;
  max-width: 620px; margin: 12px auto 26px; position: relative;
}
.ems-cta .deco { position: absolute; pointer-events: none; }
.ems-cta .deco.ring {
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.14);
}
.ems-cta .deco.ring.r1 { width: 220px; height: 220px; left: -70px; top: -80px; }
.ems-cta .deco.ring.r2 { width: 150px; height: 150px; right: -46px; bottom: -60px; border-color: rgba(243, 217, 138, 0.28); }
.ems-cta .deco.dots {
  right: 8%; top: 18%; width: 120px; height: 70px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.6px, transparent 1.7px);
  background-size: 18px 18px;
}
.ems-cta .btn-light {
  background: #fff; color: #1d4f45; border: none; font-weight: 700;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.35);
}
.ems-cta .btn-light:hover { background: #e9f5f1; color: #173f37; }
.ems-cta .btn-soft-secondary {
  background: #fff; border: 1.5px solid rgba(36, 105, 92, 0.35); color: #24695c;
}
.ems-cta .btn-soft-secondary:hover, .ems-cta .btn-soft-secondary:focus {
  background: #eaf6f2; border-color: #24695c; color: #1d4f45;
}

/* ================= Landing motion: smooth scroll, reveals, hero drift ================= */
html {
  scroll-behavior: smooth;
}
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.7, 0.3, 1), transform 0.75s cubic-bezier(0.22, 0.7, 0.3, 1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
@keyframes emsHeroDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.ems-hero-art .ems-hero-svg {
  animation: emsHeroDrift 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ems-hero-art .ems-hero-svg { animation: none; }
}

/* Per-card student counter — icon pill input inside the estimate row */
.ems-price-est.has-input { align-items: center; gap: 10px; }
.ems-price-est .st {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0; padding: 4px 5px 4px 10px;
  background: #fff; color: var(--pc-accent, #24695c);
  border: 1.5px solid rgba(36, 105, 92, 0.22); border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ems-price-est .st:focus-within {
  border-color: var(--pc-accent, #24695c);
  box-shadow: 0 0 0 3px rgba(36, 105, 92, 0.12);
}
.ems-price-est .st svg { width: 14px; height: 14px; flex: 0 0 14px; }
.ems-price-est .st input {
  width: 58px; border: none; background: transparent;
  text-align: right; font-size: 12.5px; font-weight: 800; color: #173f37;
  padding: 2px 6px 2px 0;
  appearance: textfield; -moz-appearance: textfield;
}
.ems-price-est .st input::-webkit-outer-spin-button,
.ems-price-est .st input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ems-price-est .st input:focus { outline: none; }
/* yearly total highlighted as the package benefit */
.ems-price-est .hl {
  display: inline-block;
  background: var(--pc-accent, #24695c); color: #fff;
  border-radius: 8px; padding: 3px 9px;
  font-weight: 800;
  box-shadow: 0 6px 14px -6px var(--pc-shadow, rgba(26, 74, 64, 0.5));
}
/* plan perk strip — every plan unlocks everything */
.ems-plan-perk {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 2px 0 13px; align-self: flex-start;
  font-size: 11px; font-weight: 700; color: #8a6a12;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.18), rgba(201, 162, 39, 0.07));
  border: 1px solid rgba(201, 162, 39, 0.38);
  border-radius: 999px; padding: 5px 12px;
}
.ems-plan-perk svg { color: #c9a227; flex: 0 0 auto; }
/* pricing section tagline */
.ems-plans-tagline {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: #1a4a40;
}
.ems-plans-tagline svg { color: #c9a227; }

/* ---------------- Landing: request-a-demo panel ---------------- */
.ems-demo-panel {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 34px; align-items: center;
  background:
    radial-gradient(90% 130% at 96% 4%, rgba(201, 162, 39, 0.16) 0%, transparent 48%),
    linear-gradient(135deg, #1d4a41 0%, #24695c 58%, #2c7d6d 100%);
  border-radius: 22px; padding: 34px;
  box-shadow: 0 16px 38px rgba(26, 74, 64, 0.3);
}
.ems-demo-title { color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.3px; margin: 14px 0 8px; }
.ems-demo-subtitle { color: rgba(255, 255, 255, 0.82); font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; max-width: 460px; }
.ems-demo-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ems-demo-points li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 600; line-height: 1.5; }
.ems-demo-points .chk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  border-radius: 7px; background: rgba(243, 217, 138, 0.9); color: #1d4a41;
}
.ems-demo-form-wrap {
  background: #fff; border-radius: 18px; padding: 22px 22px 10px;
  box-shadow: 0 18px 40px -12px rgba(10, 30, 26, 0.45);
}
.ems-demo-form .form-group label { font-size: 12px; font-weight: 700; color: #33424e; }
.ems-demo-form .form-control {
  border-radius: 10px; border-color: rgba(36, 105, 92, 0.22); font-size: 13px;
}
.ems-demo-form .form-control:focus {
  border-color: #24695c; box-shadow: 0 0 0 3px rgba(36, 105, 92, 0.12);
}
@media (max-width: 991.5px) {
  .ems-demo-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}

/* ================= Bangla text readability =================
   Montserrat has no Bangla glyphs, so Bangla falls back to the generic
   sans-serif and renders thin/unclear at small sizes. Adding Bangla-capable
   fonts after it only affects Bangla characters (per-glyph fallback). */
body {
  font-family: "Montserrat", "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI",
    "SolaimanLipi", "Kalpurush", "Bangla", sans-serif;
}
.ems-map-chip {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 11px;
}
.ems-map-group-head {
  font-size: 11.5px;
  letter-spacing: 0.4px;
}

/* ---------------- Landing header: static at top, premium hide/show on scroll ----------------
   At scrollY 0 it occupies its normal static position. Scrolling down slides it
   out of the way; scrolling up brings it back as an animated glass bar. */
.ems-site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: #fff;
  transform: translateY(0);
  transition:
    transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1),
    box-shadow 0.35s ease,
    background-color 0.35s ease;
  will-change: transform;
}
.ems-site-header.is-hidden { transform: translateY(-110%); }
.ems-site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 10px 28px -14px rgba(16, 44, 38, 0.3);
}
.ems-header-spacer { height: 63px; }
@media (prefers-reduced-motion: reduce) {
  .ems-site-header { position: static; transition: none; }
  .ems-header-spacer { display: none; }
}

/* ================= Light mint premium surface for feature panels =================
   Same family as the pricing cards: white-to-mint gradients, soft radial
   glows, hairline mint borders and airy shadows. */
.ems-map-panel,
.ems-why-panel,
.ems-demo-panel,
.ems-cta {
  background:
    radial-gradient(56% 90% at 92% 0%, rgba(94, 200, 180, 0.22) 0%, transparent 58%),
    radial-gradient(42% 64% at 0% 100%, rgba(201, 162, 39, 0.12) 0%, transparent 58%),
    linear-gradient(165deg, #ecf7f2 0%, #f5fbf9 52%, #ffffff 100%);
  border: 1px solid rgba(36, 105, 92, 0.16);
  box-shadow: 0 26px 54px -30px rgba(16, 44, 38, 0.4);
}
/* badges on light surface: gold tint + deep gold text */
.ems-map-badge {
  color: #8a6a12;
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.42);
}
/* panel headings and copy flip to ink */
.ems-map-title,
.ems-demo-title { color: #17222b; }
.ems-map-subtitle,
.ems-demo-subtitle { color: #535f6b; }
.ems-map-footer,
.ems-why-foot { color: #4a7a6e; }
/* group and why tiles become white cards */
.ems-map-group,
.ems-why-tile {
  background: linear-gradient(180deg, #ffffff 0%, #f7fcfa 100%);
  border: 1px solid rgba(36, 105, 92, 0.16);
  box-shadow: 0 4px 14px rgba(16, 44, 38, 0.06);
}
.ems-map-group:hover,
.ems-why-tile:hover {
  background: #ffffff;
  border-color: rgba(36, 105, 92, 0.42);
  box-shadow: 0 16px 30px -14px rgba(16, 44, 38, 0.3);
}
.ems-map-group-head { color: #1a4a40; letter-spacing: 0.4px; }
.ems-map-group-icon {
  background: linear-gradient(135deg, #2c7d6d, #24695c);
  color: #fff;
}
.ems-why-tile .ic {
  background: linear-gradient(135deg, #2c7d6d, #24695c);
  color: #fff;
}
.ems-why-tile h5 { color: #17222b; }
.ems-why-tile p { color: #535f6b; }
/* module chips: white pills with teal text */
.ems-map-chip {
  color: #173f37;
  background: #ffffff;
  border: 1px solid rgba(36, 105, 92, 0.2);
  box-shadow: 0 1px 4px rgba(16, 44, 38, 0.08);
}
.ems-map-chip:hover {
  background: #eaf6f2;
  border-color: rgba(36, 105, 92, 0.42);
}
.ems-map-chip .dot { background: #24695c; }
/* demo panel copy + points flip to ink with teal checks */
.ems-demo-points li { color: #33424e; }
.ems-demo-points .chk {
  background: #24695c;
  color: #fff;
}
.ems-demo-form-wrap {
  border: 1px solid rgba(36, 105, 92, 0.18);
  box-shadow: 0 18px 42px -18px rgba(16, 44, 38, 0.3);
}
/* CTA banner on light mint: ink text, mint gradient primary button */
.ems-cta h3 { color: #17222b; }
.ems-cta .cta-sub { color: #535f6b; }
.ems-cta .deco.ring { border-color: rgba(36, 105, 92, 0.16); }
.ems-cta .deco.ring.r2 { border-color: rgba(201, 162, 39, 0.32); }
.ems-cta .deco.dots {
  background-image: radial-gradient(rgba(36, 105, 92, 0.24) 1.6px, transparent 1.7px);
}

/* ---- Landing "Explore every module — in depth": icon backgrounds go
   light mint (glyphs pick the tone color) instead of dark solids ---- */
.ems-map-group-icon {
  background: linear-gradient(135deg, #e9f6f0 0%, #d7ede4 100%);
  color: #1a4a40;
  border: 1px solid rgba(36, 105, 92, 0.2);
  box-shadow: none;
}
.ems-why-tile .ic {
  background: linear-gradient(135deg, #e9f6f0 0%, #d7ede4 100%);
  color: #1a4a40;
  border: 1px solid rgba(36, 105, 92, 0.2);
  box-shadow: none;
}
.ems-flow-node .ic {
  background: linear-gradient(135deg, #eef8f3 0%, #dcf0e7 100%);
  color: var(--pc-accent, #24695c);
}

/* ---------------- Login — professional split card ----------------
   Brand panel (teal gradient, value points) + white form column. */
.ems-login-split {
  display: grid; grid-template-columns: 1fr; width: 100%;
  max-width: 980px; margin: 0 auto;
  background: #ffffff; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(36, 105, 92, 0.14);
  box-shadow:
    0 42px 90px -34px rgba(16, 58, 50, 0.42),
    0 2px 10px rgba(16, 58, 50, 0.06);
}
@media (min-width: 992px) { .ems-login-split { grid-template-columns: 400px 1fr; } }
.ems-login-brand {
  position: relative; overflow: hidden; display: none;
  flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 26px 30px 20px;
  color: #fff;
  background:
    radial-gradient(70% 46% at 92% 0%, rgba(94, 200, 180, 0.38) 0%, transparent 62%),
    radial-gradient(52% 42% at 0% 100%, rgba(212, 175, 55, 0.24) 0%, transparent 62%),
    linear-gradient(160deg, #1d4a41 0%, #24695c 48%, #2f8b7a 100%);
}
@media (min-width: 992px) { .ems-login-brand { display: flex; } }
.ems-login-brand-deco { pointer-events: none; }
.ems-login-brand-deco.ring { border: 1.5px solid rgba(255, 255, 255, 0.14); border-radius: 999px; }
.ems-login-brand-deco.dots {
  width: 120px; height: 84px; border-radius: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.6px);
  background-size: 15px 15px;
}
.ems-login-brand-top { display: flex; align-items: center; gap: 10px; position: relative; }
.ems-login-brand-logo {
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px; padding: 4px 6px; display: inline-flex;
}
.ems-login-brand-name {
  font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 700; letter-spacing: 0.4px;
}
.ems-login-brand-gold { color: #f0d78c; }
.ems-login-brand-body { position: relative; }
.ems-login-brand-body h3 {
  font-size: 20px; line-height: 1.32; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.2px;
}
.ems-login-brand-body > p {
  font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0 0 14px;
}
.ems-login-brand-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ems-login-brand-body li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.93);
}
.ems-login-brand-body li .pt {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 999px; margin-top: 1px;
  background: rgba(94, 200, 180, 0.25); border: 1px solid rgba(94, 200, 180, 0.55);
  display: inline-flex; align-items: center; justify-content: center;
  color: #c9f3e6; font-size: 10px; font-weight: 800;
}
.ems-login-brand-foot {
  position: relative; display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.ems-login-brand-foot::before { content: ""; width: 26px; height: 2px; background: rgba(212, 175, 55, 0.75); }
.ems-login-formcol { padding: 20px 24px 12px; background: #ffffff; }
@media (min-width: 992px) { .ems-login-formcol { padding: 26px 34px 12px; } }
.ems-login-formcol .form-group { margin-bottom: 0.75rem; }
.ems-login-formcol .col-form-label { padding-bottom: 0.2rem; font-size: 12.5px; }
/* compact inputs — slightly shorter than the theme default */
.ems-login-formcol .form-control { padding: 0.42rem 0.75rem; font-size: 14px; }
.ems-login-formcol .input-group-text { padding: 0.42rem 0.7rem; }
.ems-login-formcol h4 { font-size: 1.2rem; }
.ems-login-formcol .institution-hint {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
.ems-login-formcol .form-group:focus-within .institution-hint {
  max-height: 44px; opacity: 1; margin-top: 4px;
}
/* the form column's dropdowns (demo credentials) open upward, over the form —
   the list stays on the card instead of spilling past its bottom edge; the
   larger gap keeps it clear of the inputs it covers */
.ems-login-formcol .ems-select-list {
  top: auto;
  bottom: calc(100% + 10px);
  transform-origin: bottom left;
}
.ems-login-formcol .ems-select-list.ems-menu-end {
  transform-origin: bottom right;
}
/* premium primary button */
.ems-login-btn {
  background: linear-gradient(135deg, #2b7a68 0%, #1d5a4d 100%) !important;
  border: none !important;
  box-shadow: 0 12px 24px -10px rgba(27, 79, 69, 0.55);
  letter-spacing: 0.4px; font-weight: 700; padding: 8px 16px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ems-login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2f8b7a 0%, #1d5a4d 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(27, 79, 69, 0.6);
}

/* ---------------- Sidebar logout — last item, pinned to the menu's bottom ---
   The portal menu is long (40+ items) — sticky keeps the logout riding the
   bottom edge of the visible menu area instead of being buried at the end
   of the scroll; it settles into its natural last position once scrolled. */
.nav-menu li.ems-nav-logout {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e6edef;
  background: #ffffff;
}
.nav-menu li.ems-nav-logout .nav-link {
  cursor: pointer;
  color: #dc3545;
}
.nav-menu li.ems-nav-logout .nav-link:hover,
.nav-menu li.ems-nav-logout .nav-link:focus {
  background: rgba(220, 53, 69, 0.08);
  color: #b02a37;
}

/* ---------------- Central: platform flowchart page ------------------------ */
.ems-flow-card { border-radius: 14px; }
.ems-flow-card .card-body { padding: 26px 14px; }
@media (min-width: 768px) { .ems-flow-card .card-body { padding: 32px 26px; } }

.ems-flow-tier { display: flex; flex-direction: column; align-items: center; }
.ems-flow-tierlabel {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #7a8a95; margin-bottom: 10px; text-align: center;
}

/* tier 1 — root node (dark teal, the source of the flow) */
.ems-flow-root {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 14px;
  background: linear-gradient(135deg, #1d5a4d 0%, #2b7a68 100%); color: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(27, 79, 69, 0.55);
}
.ems-flow-root-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); color: #d9f2ea;
}
.ems-flow-root-tt { font-weight: 800; font-size: 15px; line-height: 1.3; }
.ems-flow-root-ds { font-size: 11.5px; opacity: 0.85; }

/* tiers of nodes */
.ems-flow-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ems-flow-node {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  min-width: 116px; max-width: 172px; padding: 12px 12px 10px; background: #ffffff;
  border: 1px solid #e3edea; border-radius: 12px;
  box-shadow: 0 6px 16px -10px rgba(27, 79, 69, 0.25);
}
.ems-flow-node-ic {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(43, 122, 104, 0.12); color: #1d5a4d;
}
.ems-flow-node-tt { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.ems-flow-node-ds { font-size: 10.5px; color: #7a8a95; line-height: 1.45; }
.ems-flow-node-soft { background: rgba(43, 122, 104, 0.06); border-style: dashed; box-shadow: none; }

.ems-flow-chipnote {
  width: fit-content; margin: 8px auto 0; font-size: 10.5px; font-weight: 700; color: #1d5a4d;
  background: rgba(43, 122, 104, 0.1); border: 1px dashed rgba(43, 122, 104, 0.35);
  border-radius: 999px; padding: 2px 12px;
}

/* connectors between tiers: label chip → stem → arrowhead */
.ems-flow-link { display: flex; flex-direction: column; align-items: center; padding: 8px 0 2px; }
.ems-flow-link-chip {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  color: #1d5a4d; background: rgba(43, 122, 104, 0.1); border-radius: 999px;
  padding: 2px 12px; margin-bottom: 3px; text-align: center;
}
.ems-flow-link-line { width: 2px; height: 22px; background: linear-gradient(#2b7a68, #1d5a4d); }
.ems-flow-link-arrow {
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid #1d5a4d;
}

/* tier 3 — horizontal pipeline of numbered steps */
.ems-flow-pipe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.ems-flow-step {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #174c41;
  background: #ffffff; border: 1px solid #bfd9d2; border-radius: 999px; padding: 5px 13px 5px 6px;
}
.ems-flow-step b {
  width: 20px; height: 20px; border-radius: 999px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1d5a4d; color: #ffffff; font-size: 10.5px; font-weight: 800;
}
.ems-flow-parrow { color: #2b7a68; flex: 0 0 auto; }

/* cross-cutting capabilities band */
.ems-flow-band {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px; border: 1.5px dashed rgba(43, 122, 104, 0.4); border-radius: 14px;
  padding: 12px 16px; background: rgba(43, 122, 104, 0.05);
}
.ems-flow-band-tt {
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: #1d5a4d; margin-right: 4px;
}
.ems-flow-band-item {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #2b6155;
  background: #ffffff; border: 1px solid #d5e6e1; border-radius: 999px; padding: 4px 12px;
}
.ems-flow-band-item svg { color: #1d5a4d; }

/* competitive-edge feature cards */
.ems-edge-card {
  border-radius: 14px; border: 1px solid #e3edea;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.ems-edge-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(27, 79, 69, 0.5); }
.ems-edge-ic {
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(43, 122, 104, 0.14), rgba(29, 90, 77, 0.2)); color: #1d5a4d;
}

/* ---------------- Dashboard attendance trend bars ---------------- */
.ems-att-bar {
  border-radius: 8px 8px 3px 3px;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(28, 43, 39, 0.1);
}
.ems-att-bar:hover {
  filter: brightness(0.93) saturate(1.05);
  transform: translateY(-2px);
}
.ems-att-bar.is-selected {
  box-shadow: 0 0 0 2px rgba(36, 105, 92, 0.45), 0 2px 8px rgba(28, 43, 39, 0.14);
}

/* ---------------- Conversations thread list ---------------- */
.ems-chat-thread {
  border-bottom: 1px solid #f0f4f3;
  transition: background 0.12s ease;
  color: inherit;
}
.ems-chat-thread:hover { background: #f5f7fb; }
.ems-chat-thread-active {
  background: rgba(36, 105, 92, 0.08);
  border-bottom: 1px solid #f0f4f3;
}
.ems-chat-thread-active h6 { color: #24695c; }