/* ekshamata-theme.css — blue/purple government-dashboard palette (matched to the
   e-Sakshamta reference) + Poppins/Lexend type + breadcrumb separator, applied via
   the same Bootstrap 5 / ubold CSS variables the theme's own color presets use. */
:root,
[data-bs-theme="light"] {
  /* ubold's compiled utility classes consume --ins-* vars, not Bootstrap's --bs-*
     ones — both namespaces are set here so either kind of class picks up the brand color. */
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-primary-text-emphasis: #1d4ed8;
  --bs-primary-bg-subtle: #eff6ff;
  --bs-primary-border-subtle: #bfdbfe;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-breadcrumb-divider: "\203A";

  --ins-primary: #2563eb;
  --ins-primary-rgb: 37, 99, 235;
  --ins-primary-text-emphasis: #1d4ed8;
  --ins-primary-bg-subtle: #eff6ff;
  --ins-primary-border-subtle: #bfdbfe;
  --ins-link-color: #2563eb;
  --ins-link-color-rgb: 37, 99, 235;
  --ins-link-hover-color: #1d4ed8;
  --ins-link-hover-color-rgb: 29, 78, 216;
  --ins-focus-ring-color: rgba(37, 99, 235, 0.25);

  /* Ubold only defines --ins-purple inside its data-skin variants; this app runs the
     default skin, so it's otherwise undefined. */
  --ins-purple: #7c3aed;
  --ins-purple-rgb: 124, 58, 237;
  --ins-purple-text-emphasis: #5b21b6;
  --ins-purple-bg-subtle: #f5f3ff;
  --ins-purple-border-subtle: #ddd6fe;

  /* --ins-secondary is the neutral/muted semantic (badges like "Not Started",
     inactive filter chips) — not a brand accent. Keep this slate/gray, not a
     saturated color: an earlier teal here bled green into every neutral spot
     site-wide (e.g. status chips rendering green regardless of status). */
  --ins-secondary: #64748b;
  --ins-secondary-rgb: 100, 116, 139;
  --ins-secondary-text-emphasis: #475569;
  --ins-secondary-bg-subtle: #f1f5f9;
  --ins-secondary-border-subtle: #e2e8f0;

  /* Reference's teal accent (filter-toggle buttons, "facility" legend dot) has no
     Bootstrap utility consumer yet — parked on ubold's unused --ins-teal so
     bg-teal/text-teal are ready if a page opts in later. */
  --ins-teal: #0f766e;
  --ins-teal-rgb: 15, 118, 110;
  --ins-teal-text-emphasis: #115e59;
  --ins-teal-bg-subtle: #f0fdfa;
  --ins-teal-border-subtle: #99f6e4;

  --ins-success: #16a34a;
  --ins-success-rgb: 22, 163, 74;
  --ins-success-text-emphasis: #15803d;
  --ins-success-bg-subtle: #f0fdf4;
  --ins-success-border-subtle: #bbf7d0;

  --ins-warning: #f59e0b;
  --ins-warning-rgb: 245, 158, 11;
  --ins-warning-text-emphasis: #92400e;
  --ins-warning-bg-subtle: #fffbeb;
  --ins-warning-border-subtle: #fde68a;

  --ins-danger: #dc2626;
  --ins-danger-rgb: 220, 38, 38;
  --ins-danger-text-emphasis: #b91c1c;
  --ins-danger-bg-subtle: #fef2f2;
  --ins-danger-border-subtle: #fecaca;

  --ins-info: #0ea5e9;
  --ins-info-rgb: 14, 165, 233;
  --ins-info-text-emphasis: #0369a1;
  --ins-info-bg-subtle: #f0f9ff;
  --ins-info-border-subtle: #bae6fd;

  /* Exact variable names ubold's data-skin presets use to swap fonts, so every
     h1-h6/body element repaints with no markup changes. Loaded via Google Fonts
     <link> in each page's <head>. */
  --ins-font-sans-serif: "Poppins", sans-serif;
  --ins-font-family-secondary: "Lexend", sans-serif;
}

/* RACB user registration */
.ek-registration-form {
  max-width: 1180px;
  margin-inline: auto;
}
.ek-registration-form .card {
  overflow: hidden;
}
.ek-registration-form .card-header {
  background: linear-gradient(90deg, rgba(36, 107, 253, 0.07), transparent);
}
.ek-section-number {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #246bfd, #12a8a0);
  font-family: Lexend, sans-serif;
  font-weight: 700;
  box-shadow: 0 7px 16px rgba(36, 107, 253, 0.2);
}

/* ubold's card padding/radius (1.5rem/1.125rem, ~4.8px corners) is roomier and
   sharper-cornered than this app's compact, data-dense look. A :root override
   alone doesn't work: ubold's own .card{} rule re-sets these same custom
   properties directly on .card, and .card-header/.card-body inherit from that
   nearer ancestor, not :root. Overriding on .card itself (this file loads after
   app.min.css) is what actually reaches every card on every page. */
.card {
  --ins-card-cap-padding-y: 10px;
  --ins-card-cap-padding-x: 15px;
  --ins-card-spacer-y: 1.125rem;
  --ins-card-spacer-x: 1.25rem;
  border-radius: 12px;
}

html[data-topbar-color="light"] {
  --ins-topbar-bg: #ffffff;
  --ins-topbar-item-color: #6c757d;
  --ins-topbar-item-hover-color: #2563eb;
  --ins-topbar-search-bg: transparent;
  --ins-topbar-search-border: #e7e9eb;
}

html[data-menu-color="light"] {
  --ins-sidenav-bg: #ffffff;
  --ins-sidenav-border-color: #e7e9eb;
  --ins-sidenav-item-color: #6c757d;
  --ins-sidenav-item-hover-color: #2563eb;
  --ins-sidenav-item-hover-bg: #eff6ff;
  --ins-sidenav-item-active-color: #2563eb;
  --ins-sidenav-item-active-bg: #eff6ff;

  --ins-sidenav-item-padding-y: 10px;
  --ins-sidenav-item-font-size: 0.8125rem;
  --ins-sidenav-item-gap: 11px;
  --ins-sidenav-item-icon-size: 0.85rem;
}

/* ubold's app.min.css hardcodes min-height:1900px on .content-page whenever the
   sidebar is condensed (auto-triggered below ~1140px width, or the hamburger
   toggle) — a leftover from the vendor template's own long demo pages, unrelated
   to this app's actual content length. */
html[data-sidenav-size="condensed"] .content-page {
  min-height: 100vh;
}

.side-nav {
  gap: 8px;
}

.page-title-head {
  min-height: 40px;
  padding: 1rem 0;
}

.side-nav-title {
  padding: 6px 12px 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
}

/* "sidebar-with-line"'s dashed tree-connector is positioned assuming the
   *expanded* inline sub-menu; when the sidebar is condensed, that sub-menu
   instead renders as a floating flyout with no icon column, so the connector
   lands on top of the item text. Strip it in condensed mode, same as ubold
   already does for data-sidenav-size=compact. */
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav-item:hover .sub-menu::before,
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav-item:hover .sub-menu .side-nav-link::before,
html[data-sidenav-size="condensed"] .sidenav-menu .side-nav-item:hover .sub-menu .side-nav-link::after {
  display: none !important;
}

/* Reference's active-nav indicator is a short rounded capsule bar floating
   outside the pill's left edge — a ::before overlay so it doesn't affect
   icon/text layout. Scoped to top-level items only: the sidebar's own dashed
   tree-connector already uses ::before on sub-menu links, and an unscoped
   version of this rule collided with it (blended half-tick/half-bar look on
   the active submenu item). */
.side-nav > .side-nav-item > .side-nav-link.active::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 20%;
  bottom: 20%;
  width: 4px;
  border-radius: 4px;
  background: var(--ins-primary, #2563eb);
}

/* .btn-primary/.btn-outline-primary carry hardcoded --ins-btn-* hex values in
   ubold's compiled CSS rather than deriving from --ins-primary. */
.btn-primary {
  --ins-btn-bg: #2563eb;
  --ins-btn-border-color: #2563eb;
  --ins-btn-hover-bg: #1d4ed8;
  --ins-btn-hover-border-color: #1d4ed8;
  --ins-btn-focus-shadow-rgb: 37, 99, 235;
  --ins-btn-active-bg: #1e40af;
  --ins-btn-active-border-color: #1e40af;
  --ins-btn-disabled-bg: #2563eb;
  --ins-btn-disabled-border-color: #2563eb;
}

.btn-outline-primary {
  --ins-btn-color: #2563eb;
  --ins-btn-border-color: #2563eb;
  --ins-btn-hover-bg: #2563eb;
  --ins-btn-hover-border-color: #2563eb;
  --ins-btn-focus-shadow-rgb: 37, 99, 235;
  --ins-btn-active-bg: #2563eb;
  --ins-btn-active-border-color: #2563eb;
  --ins-btn-disabled-color: #2563eb;
  --ins-btn-disabled-border-color: #2563eb;
}

.app-topbar {
  background: #ffffff !important;
  z-index: 1020;
}

.side-nav-link.active,
.side-nav-item .side-nav-link.active {
  color: #2563eb;
  background-color: var(--ins-sidenav-item-active-bg, #eff6ff);
  border-radius: 0.4rem;
  font-weight: 700;
}

/* ubold only changes text color on :hover (no background), so hover looked
   inconsistent next to the active item's full pill highlight. Match it, one
   shade lighter. */
.side-nav .side-nav-item:not(.active) > .side-nav-link {
  border-radius: 0.4rem;
  transition:
    background-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}
.side-nav .side-nav-item:not(.active) > .side-nav-link:hover {
  background-color: #eff6ff;
}

/* Bootstrap's .d-flex ships with !important, beating ubold's own rule that
   hides .logo-lg when the sidebar is condensed — so the logo text overflowed
   the collapsed rail instead of disappearing. */
html[data-sidenav-size="condensed"] .sidenav-menu .logo span.logo-lg {
  display: none !important;
}

/* With logo-lg hidden, only the avatar remains in the logo's flex row, but the
   row keeps its normal flex-start justify/padding — center it under the
   condensed icon rail like the nav icons below it. */
html[data-sidenav-size="condensed"] .sidenav-menu .logo > span {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* The two-line logo sizes to its own content (~35px) rather than ubold's
   line-height trick (which only centers plain inline text), leaving it about
   half the topbar's height — visible as a border mismatch, most obvious when
   condensed. Stretch it to fill the topbar height instead. */
.sidenav-menu .logo {
  height: var(--ins-topbar-height);
}
.sidenav-menu .logo > span {
  height: 100%;
}

/* bootstrap-datepicker's plugin JS sets a low inline z-index that sits below
   .app-topbar's z-index:1020, hiding the popup near the top of the page. Also
   re-skinned (enlarged ~30%, restyled) to match the app's card/shadow language. */
.datepicker.datepicker-dropdown {
  z-index: 1060 !important;
  padding: 14px;
  border: 1px solid #e7e9eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.datepicker table {
  width: 100%;
}
.datepicker table tr td,
.datepicker table tr th {
  width: 42px;
  height: 42px;
  font-size: 15px;
  border-radius: 8px;
}
.datepicker .datepicker-switch {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  height: 42px;
  border-radius: 8px;
}
.datepicker .prev,
.datepicker .next {
  font-size: 18px;
  color: #64748b;
  border-radius: 8px;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
  background: #eff6ff !important;
  color: #2563eb;
}
.datepicker table tr th.dow {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  cursor: default;
}
.datepicker table tr th.dow:hover {
  background: transparent;
}
.datepicker table tr td.day:hover {
  background: #eff6ff !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background: #fffbeb !important;
  background-image: none !important;
  color: #92400e;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #cbd5e1;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background: #2563eb !important;
  background-image: none !important;
  border-color: #1d4ed8;
}

/* Dashboard "Enrollment by State" filler — placeholder for a future real,
   interactive India map. Keeps the reference's proportions/colors (legend bar,
   tooltip callout, zoom controls) so swapping in a real map is a drop-in
   replacement, not a redesign. */
.ek-india-map-wrap {
  min-height: 260px;
}
.ek-map-legend-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 0;
  flex-shrink: 0;
}
.ek-map-legend-gradient {
  width: 6px;
  flex: 1;
  border-radius: 3px;
  background: linear-gradient(to bottom, #2563eb, #dbeafe);
}
.ek-india-map-placeholder {
  position: relative;
  min-height: 260px;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ek-india-map-placeholder > i {
  font-size: 64px;
  color: #93c5fd;
}
.ek-map-tooltip-static {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #1e293b;
  color: #fff;
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}
.ek-map-zoom-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ek-map-zoom-controls span {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #64748b;
}
.ek-top-states-panel {
  width: 190px;
}

/* Auth pages v2 — contained card floating on a plain page (login.html,
   auth-signup.html, auth-reset-password.html), brand panel left / form right. */
.ek-auth-page {
  min-height: 100vh;
  background: #f5f8f9;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.ek-auth-block {
  position: absolute;
  top: 0;
  right: 0;
  width: 26%;
  height: 100%;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  opacity: 0.05;
  z-index: 0;
}
.ek-auth-dots {
  position: absolute;
  z-index: 0;
  width: 130px;
  height: 130px;
  background-image: radial-gradient(#2563eb 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.18;
}
.ek-auth-dots-tl {
  left: 6%;
  top: 8%;
}
.ek-auth-dots-br {
  right: 8%;
  bottom: 10%;
}

.ek-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(29, 78, 216, 0.12);
  overflow: hidden;
}

.ek-auth-brand {
  background: linear-gradient(160deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 560px;
}
.ek-auth-brand::before,
.ek-auth-brand::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.ek-auth-brand::before {
  width: 280px;
  height: 280px;
  top: -90px;
  right: -80px;
}
.ek-auth-brand::after {
  width: 220px;
  height: 220px;
  bottom: -100px;
  left: -70px;
  background: rgba(255, 255, 255, 0.05);
}
.ek-auth-brand > * {
  position: relative;
  z-index: 1;
}

.ek-auth-mark {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Theme's compiled spacer scale skips from p-4 (2.25rem) to p-5 (4.5rem) — neither
   lands near the ~40px this card needs, and larger utility classes the original
   ubold demo used (p-6/p-8) don't exist in the compiled CSS at all. */
.ek-auth-panel {
  padding: 2rem;
}
@media (min-width: 992px) {
  .ek-auth-panel {
    padding: 2.5rem;
  }
}

/* Secondary KPI card's label/icon/value pieces (card wrapper itself is
   .ek-kpi-card-lite, below) — solid-color circular icon matching the
   dashboard's .ek-stat-icon language, instead of a soft tinted square. */
/* Overrides the fs-11/text-uppercase/text-muted utility classes every page's
   markup pairs with .ek-kpi-label (Bootstrap utilities in this build are
   !important, so matching that is the only way to win) — same medium-weight
   slate label as the dashboard's .ek-stat-title, instead of tiny muted caps. */
.ek-kpi-label {
  display: block;
  min-width: 0;
  line-height: 1.25;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
@media (max-width: 575.98px) {
  .ek-kpi-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .ek-kpi-value {
    font-size: 17px;
  }
}
.ek-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--kpi-color, var(--ins-primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--kpi-color, var(--ins-primary)) 55%, transparent);
}
.ek-kpi-value {
  font-family: var(--ins-font-family-secondary);
  font-size: 19px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.1;
  margin: 6px 0 0;
}

/* Dashboard KPI stat card — reusable component. Stacked layout: [icon + title]
   row, large value line, then a bottom row with growth/trend text left and a
   wide sparkline right. Per-instance theming via two custom properties on the
   .ek-stat-card element: --kpi-color (icon fill, sparkline stroke/dots) and
   --kpi-shadow (rgba of the same accent, ~.35 alpha, for icon + line glow). To
   reuse: copy one .ek-stat-card block and swap the icon glyph, title, value,
   growth number, --kpi-color/--kpi-shadow, and the sparkline path data (see
   dashboard.html for 4 live examples). Value/title use clamp() to scale down
   in this app's ~280-320px real card width instead of overflowing/wrapping. */
.ek-stat-card {
  margin-bottom: 0 !important;
  background: var(--kpi-bg, #fff);
  border: 1px solid var(--kpi-border, #eef2f7);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.ek-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1);
}
.ek-stat-card > .card-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ek-stat-top-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ek-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--kpi-color, var(--ins-primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 16px -4px var(--kpi-shadow, rgba(0, 0, 0, 0.35));
  transition: transform 0.25s ease;
}
.ek-stat-card:hover .ek-stat-icon {
  transform: scale(1.05);
}
.ek-stat-title {
  font-size: clamp(11.5px, 1.1vw, 13px);
  font-weight: 600;
  color: #475569;
  line-height: 1.25;
}
.ek-stat-value {
  font-family: var(--ins-font-family-secondary);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
  margin-top: 4px;
  white-space: nowrap;
}
.ek-stat-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: -15px;
  padding-top: 0px;
}
.ek-stat-growth {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.ek-stat-helper {
  font-weight: 400;
  color: #64748b;
  font-size: 11px;
}
.ek-stat-spark-col {
  flex: 1 1 auto;
  max-width: 48%;
}
.ek-stat-spark {
  width: 100%;
  height: 48px;
  overflow: visible;
  display: block;
}
.ek-stat-spark-line {
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 3px 4px var(--kpi-shadow, rgba(0, 0, 0, 0.3)));
  transition: stroke-width 0.2s ease;
}
.ek-stat-card:hover .ek-stat-spark-line {
  stroke-width: 4.5;
}
.ek-stat-spark-dot {
  transition: r 0.2s ease;
}
.ek-stat-card:hover .ek-stat-spark-dot {
  r: 5.5;
}

/* Loading-skeleton variant — add class="ek-stat-card is-loading" (no JS wired
   up yet; for a future async-data version of this page). */
.ek-stat-card.is-loading .ek-stat-icon,
.ek-stat-card.is-loading .ek-stat-title,
.ek-stat-card.is-loading .ek-stat-value,
.ek-stat-card.is-loading .ek-stat-growth,
.ek-stat-card.is-loading .ek-stat-spark-col {
  color: transparent !important;
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: ek-stat-shimmer 1.4s ease infinite;
  box-shadow: none;
}
.ek-stat-card.is-loading .ek-stat-title {
  height: 14px;
  width: 70%;
  border-radius: 4px;
}
.ek-stat-card.is-loading .ek-stat-value {
  height: 26px;
  width: 50%;
  border-radius: 4px;
  margin-top: 6px;
}
.ek-stat-card.is-loading .ek-stat-growth {
  height: 12px;
  width: 60%;
  border-radius: 4px;
}
@keyframes ek-stat-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* Dark-mode support scoped to this component only — the rest of the app is
   light-only today (data-menu-color is hardcoded in <html>). */
@media (prefers-color-scheme: dark) {
  .ek-stat-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  .ek-stat-title {
    color: #94a3b8;
  }
  .ek-stat-value {
    color: #f1f5f9;
  }
  .ek-stat-helper {
    color: #94a3b8;
  }
}

/* Enrollment-by-Source donut — CSS conic-gradient ring with the centered total
   punched out via ::before, sized to sit next to its legend list. */
.ek-donut-wrap {
  position: relative;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background: conic-gradient(#2563eb 0% 45%, #16a34a 45% 75%, #f59e0b 75% 90%, #7c3aed 90% 100%);
}
.ek-source-legend > div {
  flex-wrap: nowrap;
}
.ek-source-legend span {
  white-space: nowrap;
}
/* Fixed label-column width instead of justify-content:space-between — with
   space-between, longer labels ("Mobile App") get almost no gap before the
   value while shorter ones ("Referral") get an oversized gap, since the value
   is pinned to the row's far edge either way. */
.ek-source-legend > div > span:first-child {
  width: 92px;
  flex-shrink: 0;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ek-donut-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: var(--ins-card-bg, #fff);
}
.ek-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}
.ek-donut-total {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}
.ek-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

/* Detail-page hero banner — district/block/facility/competency/course/learning-journey
   drilldown pages. Blue->purple gradient (matches login's brand panel) instead
   of a flat Bootstrap primary fill. */
.ek-detail-banner {
  background: linear-gradient(135deg, var(--ins-primary) 0%, var(--ins-purple) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  border: none;
}
.ek-detail-banner::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -8%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.ek-detail-banner .card-body {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.75rem;
}
.ek-detail-banner-icon {
  width: 64px;
  height: 64px;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  font-size: 24px;
  flex-shrink: 0;
}
.ek-detail-banner-title {
  letter-spacing: 0.2px;
}
.ek-detail-banner-sub {
  color: rgba(255, 255, 255, 0.8);
}
.ek-detail-banner-stats {
  display: flex;
  flex-wrap: wrap;
}
.ek-detail-banner-stats > div {
  padding: 0 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.ek-detail-banner-stats > div:first-child {
  padding-left: 0;
  border-left: none;
}
.ek-detail-banner-stats .h4 {
  font-weight: 700;
  letter-spacing: 0.2px;
}
.ek-detail-banner-stats .fs-11 {
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.5px;
}
@media (max-width: 575.98px) {
  .ek-detail-banner-stats > div {
    padding: 0 0.875rem;
  }
}

/* Secondary KPI card style — icon+value/label stat cards on every non-dashboard
   page (geography, courses, users, reports-*, etc). Same tinted-bg/tinted-border/
   solid-icon language as the dashboard's .ek-stat-card, minus the sparkline —
   these cards show a single static number, not a trend. */
.ek-kpi-card-lite {
  position: relative;
  overflow: hidden;
  background: var(--kpi-bg, #fff);
  border: 1px solid var(--ins-border-color);
  border: 1px solid color-mix(in srgb, var(--kpi-color, var(--ins-border-color)) 35%, white);
  border-radius: 12px;
  margin-bottom: 20px !important;
  /* ubold's .card height:var(--ins-card-height) is undefined (falls back to
     auto), so cards only look equal-height by coincidence. The row is already
     a flex container with align-items:stretch, so filling that gives robust
     equal heights regardless of content length. */
  height: calc(100% - 20px);
  transition:
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.ek-kpi-card-lite {
  --kpi-color: var(--ins-primary);
}
.ek-kpi-card-lite:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

/* Data table headers, site-wide — tracked-uppercase, tinted-bg header instead
   of Bootstrap's flat default. */
.table > thead > tr > th,
.table thead th {
  background-color: #f8fafc !important;
  color: #64748b !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  white-space: nowrap;
}

/* Nav-tabs, site-wide mode switchers — filled rounded-pill treatment (solid
   primary fill + white text when active) instead of ubold's boxy folder-tab
   default, deliberately bolder than the sidebar's quieter tinted-pill active state. */
.nav-tabs {
  border-bottom: 0;
  gap: 6px;
}
.nav-tabs .nav-link {
  border: 1px solid var(--ins-border-color);
  border-radius: 10px;
  padding: 8px 16px;
  margin: 0;
  color: var(--ins-body-color-secondary, #64748b);
  font-weight: 500;
  font-size: 14px;
  background: #fff;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--ins-primary);
  background: var(--ins-primary-bg-subtle);
  border-color: var(--ins-primary-border-subtle);
  isolation: auto;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #fff;
  font-weight: 700;
  background: var(--ins-primary);
  border-color: var(--ins-primary);
}
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
  color: #fff;
  background: var(--ins-primary);
}

/* Pill-style mode-switcher chips (e.g. Learning Journey's compliance-status
   filters) — same treatment, contained pill instead of underline, for groups
   that aren't full Bootstrap .nav-tabs. */
.ek-tab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ek-tab-pills .btn {
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 14px;
  border-color: var(--ins-border-color);
}
.ek-tab-pills .btn.btn-primary {
  font-weight: 600;
}
.ek-tab-pills .btn-outline-secondary {
  color: var(--ins-secondary-text-emphasis);
  background: #fff;
}
.ek-tab-pills .btn-outline-secondary:hover,
.ek-tab-pills .btn-outline-secondary:focus {
  background: var(--ins-primary-bg-subtle);
  color: var(--ins-primary);
  border-color: var(--ins-primary-border-subtle);
}

/* Small, repeated one-off inline styles pulled into named utilities so future
   edits happen in one place instead of hunting every page. */
.ek-notif-menu {
  min-width: 280px;
}
.ek-notif-list {
  max-height: 230px;
  overflow-y: auto;
}
.ek-col-action {
  width: 70px;
}
.ek-search-sm {
  max-width: 260px;
}
.ek-scroll-280 {
  max-height: 280px;
}
.ek-minw-0 {
  min-width: 0;
}
/* A value with no spaces (an email address) has no wrap point, so a flex
   child's default min-width:auto refuses to shrink it, overlapping the label. */
.ek-kv-value {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* ubold's 120px timeline-time column has no flex-shrink and is too narrow for
   a "Yesterday, 04:15 PM"-style label at this font size; 145px is the
   shortest width that keeps such labels on one line. */
.timeline-time {
  width: 145px;
  flex-shrink: 0;
}
.ek-auth-footer {
  position: relative;
  z-index: 1;
}
.ek-auth-panel-narrow {
  max-width: 400px;
}

/* 2026 common application UI refresh */
:root {
  --ek-surface: #ffffff;
  --ek-surface-soft: #f6f8fc;
  --ek-navy: #0b1f45;
  --ek-blue: #2563eb;
  --ek-cyan: #06b6d4;
  --ek-radius: 14px;
  --ek-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
}
body {
  background: #f4f7fb;
}
/* Hide an already-open page surface while a full-page menu navigation is
   waiting for the next document. This prevents the old Create/Edit modal from
   flashing; in-page action buttons do not add this class. */
body.ek-navigation-leaving .modal,
body.ek-navigation-leaving .offcanvas,
body.ek-navigation-leaving .ek-profile-modal,
body.ek-navigation-leaving .modal-backdrop,
body.ek-navigation-leaving .offcanvas-backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.content-page {
  min-height: calc(100vh - 70px);
}
.page-title-head {
  padding-block: 22px 16px;
}
.card {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--ek-radius);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.045);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.card:hover {
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: var(--ek-shadow);
}
.card-header {
  border-radius: var(--ek-radius) var(--ek-radius) 0 0 !important;
}
.btn {
  border-radius: 9px;
  font-weight: 600;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.btn:not(:disabled):active {
  transform: translateY(1px);
}
.btn-primary:not(:disabled):hover {
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
  transform: translateY(-1px);
}
.form-control,
.form-select {
  border-radius: 9px;
  min-height: 42px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.sidenav-menu {
  transition:
    width 0.25s ease,
    transform 0.25s ease;
  box-shadow: 6px 0 24px rgba(15, 23, 42, 0.035);
}
.side-nav-link {
  border-radius: 9px;
  margin: 2px 10px;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}
.side-nav-link:hover {
  transform: translateX(2px);
}
.side-nav-link.active {
  box-shadow: inset 3px 0 0 var(--ins-primary);
}
.side-nav-link .menu-icon i {
  font-size: 19px;
}
.ek-ai-nav .menu-icon {
  color: #7c3aed;
}
.ek-ai-nav.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.13), rgba(37, 99, 235, 0.09)) !important;
  box-shadow: inset 3px 0 0 #7c3aed;
}
.app-topbar {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: blur(12px);
}
.ek-app-footer {
  background: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  backdrop-filter: blur(10px);
}

.table-responsive {
  border-radius: 10px;
}
.table {
  --bs-table-hover-bg: rgba(37, 99, 235, 0.035);
}
.table > tbody > tr {
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}
.table > tbody > tr:hover {
  background: rgba(37, 99, 235, 0.035);
}
.table > tbody > tr > td {
  padding: 12px 16px;
  vertical-align: middle;
  border-color: #edf1f7;
}
.table .btn-icon,
.table .btn-sm {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination .page-link {
  border-radius: 7px !important;
  margin-inline: 2px;
}
.dataTables_wrapper .dataTables_filter input {
  border-radius: 9px;
  border: 1px solid var(--ins-border-color);
  padding: 7px 10px;
}
@media (min-width: 992px) {
  .table-responsive {
    max-height: min(70vh, 720px);
    overflow: auto;
  }
  .table-responsive .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* Shared authentication experience */
.ek-auth-modern {
  margin: 0;
  min-height: 100vh;
  background: #eef4fb;
  color: #172033;
}
.ek-auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
}
.ek-auth-visual {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #0b2c67 url("../images/ekshamata-health-analytics-bg.webp") center/cover no-repeat;
}
.ek-auth-visual::after {
  content: "";
  position: absolute;
  inset: auto -15% -35% auto;
  width: 520px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: ek-float-ring 12s ease-in-out infinite;
}
.ek-auth-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(5, 24, 57, 0.92) 0%,
    rgba(10, 51, 118, 0.78) 55%,
    rgba(37, 99, 235, 0.48) 100%
  );
}
.ek-auth-visual-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  padding: clamp(28px, 5vw, 68px);
  display: flex;
  flex-direction: column;
}
.ek-auth-logo,
.ek-auth-mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.ek-auth-logo strong,
.ek-auth-mobile-brand strong {
  display: block;
  font:
    700 20px Lexend,
    sans-serif;
  letter-spacing: -0.4px;
}
.ek-auth-logo small,
.ek-auth-mobile-brand small {
  display: block;
  opacity: 0.72;
  font-size: 11px;
}
.ek-auth-logo-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: #fff;
  font:
    700 20px Lexend,
    sans-serif;
  box-shadow: 0 10px 28px rgba(6, 182, 212, 0.25);
}
.ek-auth-intro {
  margin-block: auto 26px;
  max-width: 680px;
  animation: ek-rise 0.65s ease both;
}
.ek-auth-kicker {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.ek-auth-intro h1 {
  color: #fff;
  font:
    700 clamp(32px, 4vw, 54px) / 1.08 Lexend,
    sans-serif;
  letter-spacing: -1.5px;
  max-width: 700px;
  margin: 18px 0 14px;
}
.ek-auth-intro p {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.75;
  margin: 0;
}
.ek-auth-carousel {
  max-width: 650px;
  padding-bottom: 35px;
  animation: ek-rise 0.7s 0.12s ease both;
}
.ek-auth-carousel .carousel-indicators {
  margin: 0;
  justify-content: flex-start;
  gap: 6px;
  bottom: 0;
}
.ek-auth-carousel .carousel-indicators button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  transition:
    width 0.2s ease,
    opacity 0.2s ease;
}
.ek-auth-carousel .carousel-indicators button.active {
  width: 28px;
}
.ek-auth-carousel .carousel-control-prev,
.ek-auth-carousel .carousel-control-next {
  width: 38px;
  height: 38px;
  top: auto;
  bottom: -10px;
  left: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.ek-auth-carousel .carousel-control-prev {
  right: 48px;
}
.ek-auth-carousel .carousel-control-next {
  right: 0;
}
.ek-feature-slide {
  min-height: 158px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}
.ek-feature-slide.is-static {
  margin-top: auto;
  max-width: 650px;
}
.ek-feature-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 21px;
}
.ek-feature-slide h2 {
  color: #fff;
  font-size: 19px;
  margin: 12px 0 8px;
}
.ek-feature-slide p {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.6;
}
.ek-auth-trust {
  margin-top: 28px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
}
.ek-auth-form-side {
  min-height: 100vh;
  padding: 30px clamp(26px, 5vw, 72px);
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.ek-auth-form-side::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, black, transparent 45%);
}
.ek-auth-form-card {
  width: 100%;
  max-width: 470px;
  margin: auto;
  position: relative;
  animation: ek-auth-card-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ek-auth-mobile-brand {
  display: none;
  color: var(--ek-navy);
  position: relative;
}
.ek-auth-form-heading {
  margin-bottom: 28px;
}
.ek-auth-form-heading h2 {
  font:
    700 30px Lexend,
    sans-serif;
  color: var(--ek-navy);
  margin: 14px 0 6px;
  letter-spacing: -0.6px;
}
.ek-auth-form-heading p {
  color: #64748b;
  margin: 0;
}
.ek-auth-form-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #dbeafe, #cffafe);
  color: var(--ek-blue);
  font-size: 23px;
}
.ek-auth-form-card .form-label {
  font-weight: 600;
  color: #334155;
}
.ek-input-icon {
  position: relative;
}
.ek-input-icon > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  pointer-events: none;
}
.ek-input-icon .form-control {
  min-height: 48px;
  padding-left: 43px;
  border-color: #dbe3ef;
  background: #fbfdff;
}
.ek-password-field .form-control {
  padding-right: 48px;
}
.ek-password-toggle {
  position: absolute;
  z-index: 2;
  right: 5px;
  top: 5px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #64748b;
  border-radius: 8px;
}
.ek-password-toggle:hover {
  background: #eff6ff;
  color: var(--ek-blue);
}
.ek-captcha-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid #dbe3ef;
  border-radius: 11px;
  background: #f8fbff;
}
.ek-captcha-box img {
  width: min(220px, calc(100% - 52px));
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
}
.ek-auth-submit {
  min-height: 48px;
  font-size: 14px;
}
.ek-auth-status {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
}
.ek-auth-status.is-error {
  background: #fff1f2;
  color: #be123c;
}
.ek-auth-status.is-success {
  background: #ecfdf5;
  color: #047857;
}
.ek-auth-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 11px;
  margin: 22px 0 0;
}
.ek-auth-modern-footer {
  position: relative;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  padding-top: 20px;
}

/* Password page */
.ek-password-card {
  overflow: hidden;
}
.ek-password-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
}
.ek-password-hero {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 26px;
}
.ek-password-input {
  position: relative;
}
.ek-password-input .form-control {
  padding-right: 50px;
  min-height: 46px;
}
.ek-password-input button {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
}
.ek-strength {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ek-strength-track {
  height: 5px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
}
.ek-strength-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.25s ease;
}
.ek-password-rules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  list-style: none;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  color: #64748b;
  font-size: 12px;
}
.ek-password-rules li::before {
  content: "\ea5e";
  font-family: tabler-icons;
  margin-right: 6px;
}
.ek-password-rules li.is-valid {
  color: #15803d;
}

/* AI assistant */
.ek-ai-title-icon,
.ek-ai-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
}
.ek-ai-title-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 20px;
}
.ek-ai-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 20px;
}
.ek-online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 4px;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}
.ek-ai-chat-card {
  height: min(720px, calc(100vh - 150px));
  min-height: 570px;
  overflow: hidden;
}
.ek-ai-conversation {
  overflow-y: auto;
  background: linear-gradient(180deg, #fbfdff, #f6f8fc);
  scroll-behavior: smooth;
}
.ek-ai-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 18px;
  animation: ek-message-in 0.28s ease both;
}
.ek-ai-message.is-user {
  flex-direction: row-reverse;
}
.ek-ai-message-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #6d28d9;
}
.ek-ai-message.is-user .ek-ai-message-avatar {
  background: #dbeafe;
  color: #1d4ed8;
}
.ek-ai-bubble {
  max-width: min(76%, 680px);
  padding: 13px 15px;
  border: 1px solid #e5eaf2;
  background: #fff;
  border-radius: 5px 15px 15px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.ek-ai-message.is-user .ek-ai-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: 0;
  border-radius: 15px 5px 15px 15px;
}
.ek-ai-message-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: #64748b;
  margin-bottom: 5px;
}
.ek-ai-message.is-user .ek-ai-message-label {
  color: rgba(255, 255, 255, 0.72);
}
.ek-ai-response-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.ek-ai-response-grid span {
  padding: 8px 9px;
  border-radius: 8px;
  background: #f5f3ff;
  color: #5b21b6;
  font-size: 11px;
  font-weight: 600;
}
.ek-ai-response-grid i {
  margin-right: 4px;
}
.ek-ai-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.ek-ai-metric {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.ek-ai-metric span,
.ek-ai-metric small {
  display: block;
  color: #64748b;
  font-size: 10px;
}
.ek-ai-metric strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.25;
}
.ek-ai-report-table {
  margin-top: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.ek-ai-table-title {
  padding: 8px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}
.ek-ai-report-table th,
.ek-ai-report-table td {
  padding: 7px 9px;
  white-space: nowrap;
  font-size: 10px;
}
.ek-typing {
  display: flex;
  gap: 4px;
  padding: 4px;
}
.ek-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c3aed;
  animation: ek-typing 1s infinite ease-in-out;
}
.ek-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.ek-typing span:nth-child(3) {
  animation-delay: 0.3s;
}
.ek-ai-empty {
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ek-ai-empty-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #eef2ff;
  color: #6d28d9;
  font-size: 30px;
  margin-bottom: 14px;
}
.ek-ai-composer {
  position: relative;
  padding: 14px;
  background: #fff;
}
.ek-ai-composer textarea {
  padding-right: 115px;
  resize: none;
}
.ek-ai-send {
  position: absolute;
  right: 22px;
  top: 22px;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ek-ai-composer-note {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 5px;
}
.ek-ai-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 12px 13px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}
.ek-ai-suggestion:hover {
  color: #2563eb;
  border-color: #bfdbfe;
  background: #eff6ff;
  transform: translateX(3px);
}
.ek-ai-insights-card {
  background: linear-gradient(135deg, #fff, #f5f3ff);
}

@media (max-width: 767.98px) {
  .ek-ai-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-ai-report-table { max-width: 100%; }
}

@keyframes ek-auth-card-in {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ek-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ek-float-ring {
  50% {
    transform: translate(-25px, -18px) scale(1.04);
  }
}
@keyframes ek-message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ek-typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  .ek-auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
  }
  .ek-auth-visual-content {
    padding: 38px;
  }
  .ek-auth-intro h1 {
    font-size: 38px;
  }
}
@media (max-width: 991.98px) {
  .ek-auth-shell {
    display: block;
    background: linear-gradient(145deg, #eef6ff, #f8fafc);
  }
  .ek-auth-visual {
    display: none;
  }
  .ek-auth-form-side {
    min-height: 100vh;
    padding: 28px 22px;
    justify-content: flex-start;
  }
  .ek-auth-mobile-brand {
    display: inline-flex;
    margin: 0 auto 42px;
  }
  .ek-auth-form-card {
    margin-block: auto;
    padding: 26px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--ek-shadow);
  }
  .ek-ai-chat-card {
    height: 650px;
  }
}
@media (max-width: 575.98px) {
  .ek-auth-form-side {
    padding: 20px 14px;
  }
  .ek-auth-form-card {
    padding: 22px 18px;
  }
  .ek-auth-mobile-brand {
    margin-bottom: 25px;
  }
  .ek-auth-form-heading h2 {
    font-size: 25px;
  }
  .ek-captcha-box img {
    height: 52px;
  }
  .ek-password-rules {
    grid-template-columns: 1fr;
  }
  .ek-ai-chat-card {
    height: calc(100vh - 130px);
    min-height: 560px;
  }
  .ek-ai-bubble {
    max-width: 88%;
  }
  .ek-ai-response-grid {
    grid-template-columns: 1fr;
  }
  .ek-ai-send span {
    display: none;
  }
  .ek-ai-send {
    width: 44px;
    justify-content: center;
  }
  .ek-ai-composer textarea {
    padding-right: 65px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.ek-global-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(480px, 90vw);
  max-height: 70vh;
  overflow: auto;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  z-index: 1080;
}
.ek-search-group-title {
  padding: 0.55rem 1rem;
  background: var(--ins-light);
  color: var(--ins-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ek-search-result {
  display: block;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--ins-border-color);
  color: inherit;
}
.ek-search-result:hover {
  background: var(--ins-primary-bg-subtle);
}
.ek-search-view-all {
  display: block;
  padding: 0.5rem 1rem;
  text-align: right;
  font-size: 0.8rem;
}
.ek-notification-menu {
  width: min(390px, 92vw);
  max-height: 70vh;
  overflow: auto;
}
.ek-notification-item {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--ins-border-color);
}
.ek-session-countdown {
  font-size: 3.25rem;
  font-weight: 800;
  color: var(--ins-warning);
}
.ek-ai-launch > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.2);
}
.ek-ai-menu-icon > i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #fff;
  font-size: 16px;
}
.ek-app-footer small {
  font-size: 0.72rem;
}
.ek-filter-card .form-label {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
@media (max-width: 767.98px) {
  .ek-notification-menu {
    position: fixed !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    top: 4.25rem !important;
    width: auto !important;
    transform: none !important;
  }
  .ek-app-footer strong {
    display: block;
  }
}

/* Field-testing analytics dashboard */
.ek-field-dashboard .container-fluid {
  max-width: 1880px;
}
.ek-dashboard-mark {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  font-size: 19px;
}
.ek-ai-reserved {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 6px 10px;
  border: 1px dashed #a5b4fc;
  border-radius: 999px;
  color: #4f46e5;
  background: #eef2ff;
  font-size: 11px;
  font-weight: 700;
}
.ek-dashboard-filter {
  display: none;
  margin-bottom: 8px;
}
.ek-dashboard-filter.is-open {
  display: block;
}
.ek-dashboard-filter .form-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  color: #64748b;
}
.ek-dashboard-filter .form-control,
.ek-dashboard-filter .form-select {
  min-height: 32px;
}
.ek-kpi-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(130px, 1fr));
  gap: 7px;
  margin-bottom: 7px;
}
.ek-analytics-kpi {
  min-height: 96px;
  padding: 11px;
  border: 1px solid #e5eaf2;
  border-top: 3px solid var(--kpi, #2563eb);
  border-radius: 10px;
  background: #fff;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.035);
}
.ek-kpi-symbol {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 9px;
  top: 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--kpi, #2563eb) 12%, white);
  color: var(--kpi, #2563eb);
  font-size: 15px;
}
.ek-analytics-kpi > div {
  min-width: 0;
}
.ek-kpi-label {
  display: block;
  min-height: 24px;
  padding-right: 28px;
  color: #64748b;
  font-size: 9.5px;
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: 700;
}
.ek-analytics-kpi strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    700 22px/1.05 Lexend,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  margin: 3px 0;
}
.ek-analytics-kpi strong.is-long {
  font-size: 18px;
}
.ek-analytics-kpi strong.is-very-long {
  font-size: 15px;
  letter-spacing: -0.03em;
}
.ek-analytics-kpi small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  color: #64748b;
}
.tone-registered {
  --kpi: #334155;
}
.tone-enrolled {
  --kpi: #2563eb;
}
.tone-started {
  --kpi: #0891b2;
}
.tone-progress {
  --kpi: #7c3aed;
}
.tone-completed {
  --kpi: #16a34a;
}
.tone-pending {
  --kpi: #d97706;
}
.tone-attention {
  --kpi: #dc2626;
}
.ek-analytics-kpi.is-loading {
  display: block;
}
.ek-reconciliation {
  margin: 0 0 7px;
  padding: 6px 10px;
  border-radius: 7px;
  background: #ecfdf5;
  color: #047857;
  font-size: 10.5px;
}
.ek-dashboard-grid .card {
  margin-bottom: 0;
}
.ek-analytic-panel > header {
  min-height: 49px;
  padding: 9px 12px;
  border-bottom: 1px solid #edf1f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ek-panel-title {
  min-width: 160px;
}
.ek-analytic-panel h5 {
  font-size: 13px;
  margin: 0;
}
.ek-analytic-panel header span {
  display: block;
  font-size: 9.5px;
  color: #64748b;
}
.ek-geography-select {
  width: 118px;
  min-width: 118px;
}
.ek-analytic-panel .card-body {
  min-height: 210px;
}
.ek-chart-box {
  height: 230px;
  position: relative;
}
.ek-location-panel .ek-chart-box {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
  padding-top: 8px;
}
.ek-location-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #64748b;
  font-size: 9.5px;
}
.ek-location-tools label {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 150px;
  padding: 3px 7px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #fff;
}
.ek-location-tools input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}
.ek-location-range-sort {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.ek-location-range-sort > label {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 9px;
}
.ek-location-range-sort > label span {
  color: #64748b;
  font-size: 9px;
}
.ek-location-range-sort select {
  padding: 2px 18px 2px 5px;
  border: 1px solid #dbe3ee;
  border-radius: 5px;
  background: #fff;
  color: #334155;
  font-size: 9px;
}
.ek-location-metric-sort {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ek-location-metric-sort button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.ek-location-metric-sort button i {
  color: #3157c8;
  font-size: 10px;
}
.ek-location-metric-sort button:focus-visible {
  outline: 2px solid rgba(49, 87, 200, 0.35);
  outline-offset: 2px;
}
.ek-location-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 4px;
  color: #64748b;
  font-size: 9px;
}
.ek-location-sort-row .ek-location-metric-sort {
  margin-left: auto;
}
.ek-location-sort-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 9px;
}
.ek-location-district-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.ek-location-district-sort i {
  color: #3157c8;
  font-size: 10px;
}
.ek-location-district-sort:focus-visible {
  outline: 2px solid rgba(49, 87, 200, 0.35);
  outline-offset: 2px;
}
.ek-location-sort-row select {
  padding: 2px 18px 2px 5px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 9px;
}
.ek-location-canvas {
  position: relative;
  min-height: 0;
}
.ek-chart-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #64748b;
  font-size: 9.5px;
}
.ek-chart-pagination button {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid #dbe3ee;
  border-radius: 5px;
  background: #fff;
  color: #334155;
}
.ek-chart-pagination button:disabled {
  opacity: 0.4;
}
.ek-empty-chart {
  position: absolute;
  inset: 45px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
}
.ek-panel-loading {
  height: 100%;
  min-height: 120px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: ek-loading 1.2s infinite;
}
.ek-section-error {
  padding: 6px 9px;
  color: #b91c1c;
  background: #fef2f2;
  border-radius: 6px;
  font-size: 10.5px;
}
.ek-section-error button {
  border: 0;
  background: transparent;
  color: #1d4ed8;
  text-decoration: underline;
}
.ek-funnel {
  display: grid;
  gap: 7px;
}
.ek-funnel-stage > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ek-funnel-stage strong {
  font:
    700 16px Lexend,
    sans-serif;
}
.ek-funnel-stage span {
  font-size: 10.5px;
}
.ek-funnel-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.ek-funnel-track span {
  display: block;
  width: max(4%, var(--funnel-width));
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #16a34a);
  border-radius: inherit;
}
.ek-funnel-stage small {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 9px;
}
.ek-funnel-stage em {
  color: #b45309;
  font-style: normal;
}
.ek-pending-table {
  max-height: 246px;
}
.ek-pending-table th,
.ek-pending-table td {
  padding: 7px 10px;
  font-size: 10px;
}
.ek-pending-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}
.ek-pending-table tfoot th {
  position: sticky;
  bottom: 0;
  background: #e0f2fe;
}
.ek-user-report-avatar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
}
.ek-user-card-mobile {
  display: none;
}
@keyframes ek-loading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@media (min-width: 1200px) {
  .ek-dashboard-grid > .col-xl-5,
  .ek-dashboard-grid > .col-xl-7,
  .ek-dashboard-grid > .col-xl-6 {
    height: 278px;
  }
  .ek-field-dashboard .page-title-head {
    padding-block: 12px 8px;
  }
}
@media (max-width: 1399.98px) {
  .ek-kpi-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767.98px) {
  .ek-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .ek-dashboard-filter {
    display: block;
  }
  .ek-chart-box {
    height: 270px;
  }
  .ek-field-dashboard .page-title-head {
    align-items: flex-start !important;
  }
  .ek-ai-reserved {
    display: none;
  }
}

/* Dashboard analytics system */
:root {
  --ek-analytics-primary: #3157c8;
  --ek-analytics-secondary: #0891b2;
  --ek-analytics-success: #16a36a;
  --ek-analytics-pending: #e89b18;
  --ek-analytics-dropoff: #df5b4b;
  --ek-analytics-info: #38a7db;
  --ek-analytics-surface: #f4f7fb;
  --ek-analytics-text: #172033;
  --ek-footer-safe-area: 64px;
}
.ek-field-dashboard {
  padding-bottom: calc(var(--ek-footer-safe-area) + 20px) !important;
}
.ek-app-footer {
  z-index: 5;
  width: auto;
  margin-right: 0;
  margin-left: var(--ins-sidenav-width);
  transition: margin-left 0.25s ease-in-out;
}
html[data-sidenav-size="condensed"] .ek-app-footer,
html[data-sidenav-size="on-hover"] .ek-app-footer {
  margin-left: var(--ins-sidenav-width-sm);
}
html[data-sidenav-size="compact"] .ek-app-footer {
  margin-left: var(--ins-sidenav-width-md);
}
html[data-sidenav-size="offcanvas"] .ek-app-footer {
  margin-left: 0;
}
.ek-app-footer .container-fluid,
.ek-app-footer .d-flex {
  min-width: 0;
}
.ek-app-footer .d-flex {
  width: 100%;
}
.ek-app-footer span {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 767.98px) {
  .ek-app-footer {
    margin-left: 0;
  }
}
.ek-filter-actions .btn {
  flex: 1 1 120px;
  width: auto;
  min-width: 110px;
  white-space: nowrap;
}
.ek-import-filter-card {
  border: 1px solid #dbe5f2;
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.06);
}
.ek-import-filter-card .card-body {
  padding: 18px 20px 20px;
}
.ek-import-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ek-import-filter-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.ek-import-filter-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #3157c8;
  background: #eaf0ff;
  font-size: 20px;
}
.ek-import-filter-title h5 {
  margin: 0;
  color: #1e293b;
  font-size: 15px;
  font-weight: 700;
}
.ek-import-filter-title p {
  margin: 2px 0 0;
  color: #71809a;
  font-size: 12px;
  line-height: 1.3;
}
.ek-import-clear-filter {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: #3157c8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.ek-import-filter-grid {
  display: grid;
  grid-template-columns:
    minmax(145px, 0.85fr)
    minmax(145px, 0.85fr)
    minmax(155px, 0.9fr)
    minmax(145px, 0.85fr)
    minmax(185px, 1.15fr)
    auto;
  align-items: end;
  gap: 14px;
}
.ek-import-filter-field {
  min-width: 0;
}
.ek-import-filter-field .form-label {
  margin-bottom: 6px;
  color: #44516a;
  font-size: 12px;
  font-weight: 700;
}
.ek-import-filter-field .form-control,
.ek-import-filter-field .form-select {
  min-height: 42px;
  border-color: #d7e1ef;
  border-radius: 10px;
  background-color: #fff;
  font-size: 13px;
}
.ek-import-filter-field .form-control:focus,
.ek-import-filter-field .form-select:focus {
  border-color: #7896e6;
  box-shadow: 0 0 0 3px rgba(49, 87, 200, 0.1);
}
.ek-import-search-control {
  position: relative;
}
.ek-import-search-control > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 13px;
  color: #8997ae;
  font-size: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}
.ek-import-search-control .form-control {
  padding-left: 38px;
}
.ek-import-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.ek-import-filter-actions .btn {
  min-height: 42px;
  min-width: 92px;
  border-radius: 10px;
  padding-inline: 16px;
  white-space: nowrap;
}
.ek-import-filter-actions .btn-primary {
  min-width: 132px;
  box-shadow: 0 6px 14px rgba(49, 87, 200, 0.18);
}
@media (max-width: 1399.98px) {
  .ek-import-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ek-import-filter-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 767.98px) {
  .ek-import-filter-card .card-body {
    padding: 16px;
  }
  .ek-import-filter-header {
    align-items: flex-start;
  }
  .ek-import-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ek-import-search-field,
  .ek-import-filter-actions {
    grid-column: 1 / -1;
  }
  .ek-import-filter-actions .btn {
    flex: 1 1 0;
  }
}
@media (max-width: 479.98px) {
  .ek-import-filter-grid {
    grid-template-columns: 1fr;
  }
  .ek-import-search-field,
  .ek-import-filter-actions {
    grid-column: auto;
  }
}
.ek-profile-detail-grid a {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.ek-filter-trigger {
  min-width: 92px;
}
.ek-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(2px);
  animation: ek-fade-in 0.18s ease both;
}
.ek-filter-drawer {
  position: fixed;
  z-index: 1060;
  top: 0;
  right: 0;
  width: min(430px, 94vw);
  height: 100dvh;
  visibility: hidden;
  transform: translateX(102%);
  background: #fff;
  box-shadow: -20px 0 55px rgba(15, 23, 42, 0.2);
  transition:
    transform 0.25s ease,
    visibility 0.25s;
}
.ek-filter-drawer.is-open {
  visibility: visible;
  transform: translateX(0);
}
.ek-filter-drawer form {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.ek-filter-drawer header,
.ek-filter-drawer footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e7edf5;
}
.ek-filter-drawer header h5 {
  margin: 0;
  color: var(--ek-analytics-text);
  font-size: 16px;
}
.ek-filter-drawer header span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 10px;
}
.ek-filter-drawer footer {
  border-top: 1px solid #e7edf5;
  border-bottom: 0;
  background: #fff;
}
.ek-filter-drawer-body {
  overflow-y: auto;
  padding: 18px 20px;
}
.ek-filter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 10px;
  margin-top: 18px;
}
.ek-filter-fields > div {
  min-width: 0;
}
.ek-filter-drawer .form-label {
  margin-bottom: 4px;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ek-date-range {
  padding: 13px;
  border: 1px solid #dbe5f1;
  border-radius: 12px;
  background: #f8fafc;
}
.ek-date-range small {
  display: block;
  color: #64748b;
  font-size: 9px;
}
.ek-date-range p {
  display: flex;
  gap: 5px;
  margin: 9px 0 0;
  color: #64748b;
  font-size: 9px;
  line-height: 1.4;
}
.ek-date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 11px 0;
}
.ek-date-presets button {
  padding: 4px 7px;
  border: 1px solid #dbe5f1;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  font-size: 9px;
}
.ek-date-presets button.active {
  border-color: var(--ek-analytics-primary);
  background: #eef2ff;
  color: var(--ek-analytics-primary);
  font-weight: 700;
}
.ek-filter-drawer .select2-container .select2-selection--single {
  height: 34px;
  border-color: #dbe3ee;
  border-radius: 8px;
}
.ek-filter-drawer .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px;
  font-size: 11px;
}
.ek-filter-drawer .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px;
}
.select2-container--open {
  z-index: 1070;
}
.ek-filter-chips .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  font-size: 15px;
}
.ek-filter-chips button {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
}
.ek-dropoff {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid rgba(223, 91, 75, 0.2);
  border-radius: 7px;
  background: rgba(223, 91, 75, 0.08);
  color: #b83f34;
  font-size: 9px;
  animation: ek-dropoff-enter 0.45s ease both;
}
.ek-dropoff i {
  font-size: 12px;
}
.ek-dropoff strong {
  font-size: 10px;
}
.ek-dropoff em {
  padding: 2px 5px;
  border-radius: 999px;
  background: #fff;
  font-style: normal;
  font-weight: 700;
}
.ek-dropoff.is-warning {
  grid-template-columns: auto 1fr;
  color: #9a6700;
  background: #fff8db;
  border-color: #f4d675;
}
.ek-empty-state {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #dbe3ee;
  border-radius: 9px;
  color: #8290a3;
  font-size: 10px;
  text-align: center;
}
.ek-empty-state i {
  font-size: 24px;
  color: #a8b4c5;
}
.ek-total-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff4d6;
  color: #a66400 !important;
  font-size: 9px !important;
  font-weight: 700;
}
.ek-pending-panel .card-body {
  display: flex;
  min-height: 260px;
  max-height: min(48vh, 450px);
  padding: 0;
  overflow: hidden;
}
.ek-pending-matrix {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 0;
}
.ek-pending-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  overscroll-behavior: contain;
}
.ek-pending-list-head {
  position: sticky;
  top: -4px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(120px, 1.25fr) minmax(260px, 3fr) 68px;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
  border-bottom: 1px solid #dbe3ee;
  background: #fff;
  color: #64748b;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ek-pending-level-head {
  display: grid;
  grid-template-columns: repeat(5, minmax(42px, 1fr));
  gap: 4px;
  text-align: center;
}
.ek-pending-list-head > span:last-child {
  text-align: center;
}
.ek-pending-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.25fr) minmax(260px, 3fr) 68px;
  align-items: center;
  gap: 9px;
  padding: 8px 4px;
  border-bottom: 1px solid #edf1f6;
}
.ek-pending-location {
  min-width: 0;
}
.ek-pending-location strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #25324a;
  font-size: 10px;
}
.ek-pending-location span {
  display: block;
  margin-top: 2px;
  color: #7b8798;
  font-size: 8.5px;
}
.ek-level-cells {
  display: grid;
  grid-template-columns: repeat(var(--pending-levels, 5), minmax(42px, 1fr));
  gap: 4px;
}
.ek-level-cell {
  min-width: 0;
  padding: 5px 3px;
  border: 1px solid rgba(49, 87, 200, 0.12);
  border-radius: 6px;
  background: rgba(49, 87, 200, var(--heat-alpha));
  color: #172554;
  text-align: center;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.ek-level-cell:not(:disabled):hover,
.ek-level-cell:not(:disabled):focus-visible {
  z-index: 1;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(49, 87, 200, 0.16);
  outline: 2px solid rgba(49, 87, 200, 0.35);
}
.ek-level-cell:disabled {
  cursor: default;
}
.ek-level-cell span,
.ek-level-cell strong {
  display: block;
}
.ek-level-cell span {
  font-size: 8px;
}
.ek-level-cell strong {
  font-size: 10px;
}
.ek-pending-row-total {
  text-align: right;
}
.ek-pending-row-total strong,
.ek-pending-row-total span {
  display: block;
}
.ek-pending-row-total strong {
  color: #a66400;
  font:
    700 12px Lexend,
    sans-serif;
}
.ek-pending-row-total span {
  color: #7b8798;
  font-size: 8px;
}
.ek-pending-summary {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: 1px;
  padding: 7px 10px;
  border-top: 1px solid #bce3f4;
  background: #eaf8ff;
  box-shadow: 0 -5px 16px rgba(15, 23, 42, 0.06);
}
.ek-pending-summary > div {
  flex: 1;
  min-width: 48px;
  padding: 4px 6px;
  border-radius: 5px;
  text-align: center;
}
.ek-pending-summary > div:first-child {
  background: var(--ek-analytics-primary);
  color: #fff;
}
.ek-pending-summary span,
.ek-pending-summary strong {
  display: block;
}
.ek-pending-summary span {
  font-size: 8px;
}
.ek-pending-summary strong {
  font:
    700 11px Lexend,
    sans-serif;
}
.ek-analytic-panel .card-body {
  position: relative;
}
.tone-completed {
  --kpi: var(--ek-analytics-success);
}
.tone-pending {
  --kpi: var(--ek-analytics-pending);
}
.tone-attention {
  --kpi: var(--ek-analytics-dropoff);
}
.tone-enrolled {
  --kpi: var(--ek-analytics-primary);
}
.tone-started {
  --kpi: var(--ek-analytics-secondary);
}
@keyframes ek-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ek-dropoff-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1199.98px) {
  .ek-pending-panel .card-body {
    max-height: 420px;
  }
  .ek-field-dashboard {
    padding-bottom: calc(var(--ek-footer-safe-area) + 28px) !important;
  }
}
@media (max-width: 767.98px) {
  .ek-filter-drawer {
    top: auto;
    bottom: 0;
    width: 100%;
    height: min(92dvh, 760px);
    transform: translateY(102%);
    border-radius: 18px 18px 0 0;
  }
  .ek-filter-drawer.is-open {
    transform: translateY(0);
  }
  .ek-filter-fields {
    grid-template-columns: 1fr;
  }
  .ek-pending-panel .card-body {
    max-height: 70vh;
  }
  .ek-pending-row {
    grid-template-columns: 100px minmax(250px, 1fr) 58px;
    width: max-content;
    min-width: 100%;
  }
  .ek-pending-list-head {
    grid-template-columns: 100px minmax(250px, 1fr) 58px;
    width: max-content;
    min-width: 100%;
  }
  .ek-pending-scroll {
    overflow: auto;
  }
  .ek-pending-summary {
    overflow-x: auto;
    justify-content: flex-start;
  }
  .ek-pending-summary > div {
    flex: 0 0 55px;
  }
  .ek-field-dashboard {
    padding-bottom: calc(var(--ek-footer-safe-area) + 36px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ek-filter-backdrop,
  .ek-dropoff {
    animation: none !important;
  }
  .ek-filter-drawer,
  .ek-level-cell {
    transition: none !important;
  }
}

/* User registration and administration */
.ek-form-section {
  margin-bottom: 10px;
}
.ek-form-section .card-header {
  padding: 10px 14px;
  background: #f8fafc;
}
.ek-form-section .card-header h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
}
.ek-form-section .card-header i {
  color: #2563eb;
  font-size: 17px;
}
.ek-form-section .card-body {
  padding: 13px 14px;
}
.ek-form-section .form-label {
  font-size: 11px;
  margin-bottom: 4px;
  font-weight: 600;
}
.ek-form-section .form-label span {
  color: #dc2626;
}
.ek-form-section .form-control,
.ek-form-section .form-select {
  min-height: 38px;
}
.ek-sort {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: inherit;
}
.ek-user-details-panel {
  width: min(520px, 94vw);
  z-index: 1060;
}
.ek-user-details-panel .offcanvas-body {
  overflow: auto;
}
.ek-detail-heading {
  padding: 6px 8px;
  border-left: 3px solid #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ek-user-details-panel dt,
.ek-user-details-panel dd {
  font-size: 11px;
  padding-block: 3px;
}
.ek-user-card-mobile {
  display: block;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #fff;
}
.ek-user-report .table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ek-user-report .table td {
  font-size: 11px;
}
.ek-user-report .table-responsive {
  max-height: none;
}
@media print {
  .sidenav-menu,
  .app-topbar,
  .ek-no-print,
  .footer,
  .modal,
  .offcanvas,
  .offcanvas-backdrop {
    display: none !important;
  }
  .content-page {
    margin: 0 !important;
    padding: 0 !important;
  }
  .ek-user-report .card {
    box-shadow: none;
    border: 0;
  }
  .ek-user-report .table-responsive {
    display: block !important;
    overflow: visible;
  }
  .ek-user-report .table {
    font-size: 9pt;
  }
  .ek-user-report .page-title-head {
    padding-top: 0;
  }
}

/* Authenticated user profile */
.ek-profile-page {
  background: #f3f7fc;
  color: #17243c;
  min-height: 100vh;
}
.ek-profile-page > .container-fluid {
  max-width: 1540px;
  padding-bottom: 32px;
}
.ek-profile-supporting,
.ek-profile-card header p,
.ek-profile-summary small,
.ek-profile-detail-grid span,
.ek-permission-list small,
.ek-activity-list small {
  color: #61708a;
  font-weight: 500;
}
.ek-eyebrow {
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ek-profile-primary-action {
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.2);
}
.ek-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 25px 28px;
  border-radius: 18px;
  background: linear-gradient(120deg, #173b8f 0%, #176f9c 58%, #128c87 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(23, 59, 143, 0.16);
  position: relative;
  overflow: hidden;
}
.ek-profile-hero:after {
  content: "";
  position: absolute;
  right: -70px;
  top: -110px;
  width: 310px;
  height: 310px;
  border: 52px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}
.ek-profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
}
.ek-profile-identity,
.ek-profile-user-id {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.ek-profile-identity h1 {
  font-size: 26px;
  color: #fff;
  margin: 0;
  font-weight: 750;
}
.ek-profile-status {
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.16);
}
.ek-profile-status.is-success {
  background: #dcfce7;
  color: #087d42;
}
.ek-profile-status.is-warning {
  background: #fff4d6;
  color: #a65b00;
}
.ek-profile-status.is-danger {
  background: #fee2e2;
  color: #b42318;
}
.ek-profile-role {
  font-size: 14px;
  font-weight: 650;
  color: #e5f4ff;
  margin-top: 3px;
}
.ek-profile-role span {
  opacity: 0.55;
  margin: 0 5px;
}
.ek-profile-contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
}
.ek-profile-contact-line a,
.ek-profile-contact-line span {
  color: #f4fbff;
  font-size: 12px;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ek-profile-user-id {
  min-width: 235px;
  padding: 15px 18px;
  border-radius: 12px;
  background: rgba(8, 28, 72, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
}
.ek-profile-user-id span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #cae6f8;
}
.ek-profile-user-id strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.ek-profile-user-id small {
  color: #d6eef8;
  margin-top: 4px;
}
.ek-profile-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.ek-profile-summary article {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid #dae4f1;
  border-radius: 13px;
  padding: 13px 14px;
  min-width: 0;
}
.ek-profile-summary article > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eaf1ff;
  color: #2563eb;
  font-size: 19px;
  flex: none;
}
.ek-profile-summary div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ek-profile-summary span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #596982;
  font-weight: 750;
}
.ek-profile-summary strong {
  font-size: 13px;
  color: #17243c;
  overflow-wrap: anywhere;
}
.ek-profile-summary small {
  font-size: 10px;
}
.ek-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.ek-profile-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ek-profile-card {
  background: #fff;
  border: 1px solid #d9e3ef;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(42, 67, 101, 0.045);
}
.ek-profile-card > header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8eef5;
  margin-bottom: 14px;
}
.ek-profile-card header h2 {
  font-size: 15px;
  margin: 1px 0 2px;
  font-weight: 750;
  color: #17243c;
}
.ek-profile-card header p {
  font-size: 11px;
  margin: 0;
  line-height: 1.45;
}
.ek-profile-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf1ff;
  color: #2563eb;
  font-size: 19px;
  flex: none;
}
.ek-profile-card-icon.is-cyan {
  background: #e5f8fc;
  color: #0786a0;
}
.ek-profile-card-icon.is-purple {
  background: #f2eaff;
  color: #7c3aed;
}
.ek-profile-card-icon.is-teal {
  background: #e3f8f3;
  color: #07866f;
}
.ek-profile-card-icon.is-green {
  background: #e7f9ed;
  color: #079653;
}
.ek-profile-card-icon.is-amber {
  background: #fff2df;
  color: #c56800;
}
.ek-profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #e4eaf2;
  border-radius: 12px;
  overflow: hidden;
}
.ek-profile-detail-grid > div {
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-bottom: 1px solid #e8edf4;
}
.ek-profile-detail-grid > div:nth-child(odd) {
  border-right: 1px solid #e8edf4;
}
.ek-profile-detail-grid > div:nth-last-child(-n + 2) {
  /*border-bottom: 0;*/
}
.ek-profile-detail-grid > div.is-wide {
  grid-column: 1/-1;
  border-right: 0;
}
.ek-profile-detail-grid > div.is-wide:not(:last-child) {
  border-bottom: 1px solid #e8edf4;
}
.ek-profile-detail-grid span,
.ek-role-banner span {
  font-size: 9px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-weight: 750;
}
.ek-profile-detail-grid strong {
  font-size: 12px;
  color: #1c2940;
  overflow-wrap: anywhere;
}
.ek-profile-detail-grid a {
  color: #1c4fa3;
}
.ek-role-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 11px;
  border-radius: 11px;
  background: #f5f1ff;
  border: 1px solid #e7dcff;
  margin-bottom: 10px;
}
.ek-role-banner div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ek-role-banner span {
  color: #705f8d;
}
.ek-role-banner strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.ek-responsibility-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid #edf1f6;
}
.ek-responsibility-list article:last-child {
  border: 0;
}
.ek-responsibility-list article > i:first-child {
  font-size: 17px;
  color: #5c36c9;
}
.ek-responsibility-list article div {
  display: flex;
  flex-direction: column;
}
.ek-responsibility-list span {
  font-size: 9px;
  text-transform: uppercase;
  color: #6b5b86;
  font-weight: 750;
}
.ek-responsibility-list strong {
  font-size: 12px;
}
.ek-responsibility-list p {
  font-size: 10px;
  color: #61708a;
  font-weight: 500;
  margin: 1px 0 0;
}
.ek-allowed {
  color: #0b9a57;
}
.ek-global-access,
.ek-profile-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 11px;
  background: #effaf8;
  border: 1px solid #ccefe7;
}
.ek-global-access > i,
.ek-profile-empty > i {
  font-size: 25px;
  color: #07866f;
}
.ek-global-access div,
.ek-profile-empty {
  display: flex;
  flex-direction: column;
}
.ek-global-access strong,
.ek-profile-empty strong {
  font-size: 13px;
}
.ek-global-access span,
.ek-profile-empty span {
  font-size: 11px;
  color: #5d6b7e;
  font-weight: 500;
}
.ek-profile-empty {
  text-align: center;
  justify-content: center;
}
.ek-security-list > div,
.ek-activity-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #edf1f6;
  padding: 10px 2px;
}
.ek-security-list > div:last-child,
.ek-activity-list > div:last-child {
  border: 0;
}
.ek-security-list span {
  color: #53627a;
  font-size: 11px;
  font-weight: 600;
}
.ek-security-list strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-align: right;
}
.ek-security-list .is-ok,
.ek-activity-list .is-ok {
  color: #078a4b;
}
.ek-security-list .is-attention {
  color: #b35f00;
}
.ek-permission-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 9px;
  margin-bottom: 6px;
  background: #f7f9fc;
  border: 1px solid #e8edf4;
}
.ek-permission-list > div > i {
  color: #2563eb;
  font-size: 17px;
}
.ek-permission-list span {
  display: flex;
  flex-direction: column;
}
.ek-permission-list strong {
  font-size: 11px;
}
.ek-permission-list small {
  font-size: 9px;
}
.ek-permission-list em {
  font-style: normal;
  font-size: 9px;
  font-weight: 750;
  border-radius: 20px;
  padding: 4px 7px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ek-permission-list .is-allowed em {
  background: #dcfce7;
  color: #087d42;
}
.ek-permission-list .is-restricted {
  opacity: 0.72;
}
.ek-permission-list .is-restricted em {
  background: #eef1f5;
  color: #687386;
}
.ek-activity-list > div {
  justify-content: flex-start;
}
.ek-activity-list > div > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef4ff;
  color: #2563eb;
}
.ek-activity-list span {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ek-activity-list strong {
  font-size: 11px;
}
.ek-activity-list em {
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  color: #a33;
}
.ek-modal-open {
  overflow: hidden;
}
.ek-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  padding: 18px;
}
.ek-profile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.64);
  backdrop-filter: blur(3px);
}
.ek-profile-password-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.35);
}
.ek-profile-password-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 20px;
  border-bottom: 1px solid #e5eaf1;
}
.ek-profile-password-dialog > header > div {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ek-profile-password-dialog h2 {
  font-size: 17px;
  margin: 0;
}
.ek-profile-password-dialog header p {
  font-size: 11px;
  color: #5d6b7e;
  font-weight: 500;
  margin: 2px 0 0;
}
.ek-profile-password-dialog header button {
  border: 0;
  background: #f1f5f9;
  border-radius: 9px;
  width: 34px;
  height: 34px;
  font-size: 19px;
}
.ek-profile-password-dialog form {
  padding: 20px;
}
.ek-password-field {
  margin-bottom: 14px;
}
.ek-password-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #344159;
  margin-bottom: 5px;
}
.ek-profile-password-dialog .ek-password-input {
  display: flex;
  border: 1px solid #cad5e3;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.ek-profile-password-dialog .ek-password-input:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11);
}
.ek-profile-password-dialog .ek-password-input input {
  border: 0;
  outline: 0;
  min-width: 0;
  flex: 1;
  padding: 11px 12px;
  font-size: 13px;
}
.ek-profile-password-dialog .ek-password-input button {
  width: 42px;
  border: 0;
  background: #f5f7fa;
  color: #46566e;
}
.ek-profile-password-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 5px;
}
.ek-profile-password-dialog footer .btn {
  font-weight: 700;
}
.ek-strength {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0;
}
.ek-strength-track {
  height: 5px;
  flex: 1;
  background: #e6ebf2;
  border-radius: 10px;
  overflow: hidden;
}
.ek-strength-track span {
  display: block;
  height: 100%;
  transition: width 0.18s ease;
}
.ek-strength > strong {
  font-size: 10px;
  min-width: 48px;
  text-align: right;
}
.ek-password-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
  list-style: none;
  background: #f7f9fc;
  border-radius: 9px;
}
.ek-password-rules li {
  font-size: 9px;
  color: #66758b;
  font-weight: 600;
}
.ek-password-rules li:before {
  content: "○";
  margin-right: 5px;
}
.ek-password-rules li.is-valid {
  color: #087d42;
}
.ek-password-rules li.is-valid:before {
  content: "✓";
}
@media (max-width: 1199.98px) {
  .ek-profile-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ek-profile-user-id {
    min-width: 200px;
  }
}
@media (max-width: 991.98px) {
  .ek-profile-grid {
    grid-template-columns: 1fr;
  }
  .ek-profile-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ek-profile-user-id {
    grid-column: 1/-1;
  }
  .ek-profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .ek-profile-page > .container-fluid {
    padding-inline: 12px;
  }
  .ek-profile-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .ek-profile-avatar {
    width: 62px;
    height: 62px;
  }
  .ek-profile-identity h1 {
    font-size: 21px;
  }
  .ek-profile-user-id {
    min-width: 0;
  }
  .ek-profile-contact-line {
    flex-direction: column;
  }
  .ek-profile-summary {
    grid-template-columns: 1fr;
  }
  .ek-profile-detail-grid,
  .ek-role-banner {
    grid-template-columns: 1fr;
  }
  .ek-profile-detail-grid > div,
  .ek-profile-detail-grid > div:nth-child(odd) {
    border-right: 0;
    border-bottom: 1px solid #e8edf4;
  }
  .ek-profile-detail-grid > div:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e8edf4;
  }
  .ek-profile-detail-grid > div:last-child {
    border-bottom: 0;
  }
  .ek-profile-card {
    padding: 14px;
  }
  .ek-password-rules {
    grid-template-columns: 1fr;
  }
  .ek-profile-modal {
    padding: 0;
    align-items: end;
  }
  .ek-profile-password-dialog {
    width: 100%;
    max-height: 95vh;
    border-radius: 18px 18px 0 0;
  }
  .ek-profile-password-dialog footer {
    position: sticky;
    bottom: -20px;
    background: #fff;
    padding: 12px 0 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ek-strength-track span {
    transition: none;
  }
}
.ek-level-cells {
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
}

/* Dashboard presentation fixes: full funnel, reliable canvases, compact totals. */
.ek-chart-box canvas {
  display: block !important;
  max-width: 100%;
  max-height: 100%;
}
.ek-pending-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 6px;
  padding: 9px 11px;
  border-top: 1px solid #dbe5f1;
  background: #f8fafc;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04);
}
.ek-pending-summary > div {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  text-align: center;
}
.ek-pending-summary > div:first-child {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
}
.ek-pending-summary span {
  color: #64748b;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ek-pending-summary > div:first-child span {
  color: #4f46e5;
}
.ek-pending-summary strong {
  margin-top: 1px;
  font:
    700 12px Lexend,
    sans-serif;
}
@media (min-width: 1200px) {
  .ek-dashboard-grid > .col-xl-5:first-child,
  .ek-dashboard-grid > .col-xl-7:nth-child(2) {
    width: 50%;
    height: 360px;
  }
  .ek-dashboard-grid > .col-xl-5:first-child .card-body {
    min-height: 309px;
    overflow: visible;
  }
  .ek-dashboard-grid > .col-xl-5:first-child .ek-funnel {
    gap: 9px;
  }
  .ek-dashboard-grid > .col-xl-7:nth-child(2) .ek-chart-box {
    height: auto;
    min-height: 309px;
  }
  .ek-dashboard-grid > .col-xl-7:nth-child(2) .ek-location-canvas {
    min-height: 235px;
  }
}
@media (max-width: 767.98px) {
  .ek-pending-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(62px, 1fr));
    overflow: visible;
  }
  .ek-pending-summary > div {
    min-width: 0;
  }
}
.ek-pending-panel .card-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}
.ek-pending-tools {
  padding: 8px 10px 0;
  background: #fff;
}
.ek-pending-tools label {
  display: flex;
  align-items: center;
  gap: 5px;
  width: min(190px, 100%);
  padding: 5px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  color: #64748b;
  background: #fff;
}
.ek-pending-tools input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}
.ek-pending-search-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  color: #94a3b8;
  font-size: 10px;
}
@media (min-width: 1200px) {
  .ek-dashboard-grid > .col-xl-5:first-child,
  .ek-dashboard-grid > .col-xl-7:nth-child(2) {
    height: 382px;
  }
  .ek-dashboard-grid > .col-xl-5:first-child .card-body {
    min-height: 331px;
    padding-bottom: 22px;
  }
  .ek-dashboard-grid > .col-xl-7:nth-child(2) .ek-chart-box {
    min-height: 331px;
  }
}
.ek-pending-panel .card-body {
  display: flex;
}
.ek-pending-panel > header > div:first-child {
  flex: 1 1 auto;
  min-width: 220px;
}
.ek-pending-header-search {
  display: flex;
  flex: 0 1 270px;
  align-items: center;
  gap: 5px;
  width: 270px;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  color: #64748b;
  background: #fff;
}
.ek-pending-header-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}
.ek-completion-panel .ek-chart-box {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  padding-top: 8px;
  overflow: hidden;
}
.ek-completion-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #64748b;
  font-size: 9.5px;
}
.ek-completion-tools label {
  display: flex;
  align-items: center;
  gap: 5px;
  width: min(190px, 60%);
  padding: 4px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 7px;
  background: #fff;
}
.ek-completion-tools input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}
.ek-completion-sort {
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  white-space: nowrap;
  order: 1;
}
.ek-completion-tools > label:first-child {
  order: 1;
  margin-left: 0;
}
.ek-completion-tools > span {
  order: 2;
}
.ek-completion-list-head > button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.ek-completion-list-head > button:first-child {
  justify-content: flex-start;
  text-align: left;
}
.ek-completion-list-head > button i {
  color: #3157c8;
  font-size: 10px;
}
.ek-completion-list-head > button:focus-visible {
  outline: 2px solid rgba(49, 87, 200, 0.35);
  outline-offset: 2px;
}
.ek-completion-sort span {
  color: #64748b;
  font-size: 9px;
}
.ek-completion-sort select {
  max-width: 120px;
  padding: 3px 20px 3px 6px;
  border: 1px solid #dbe3ee;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 9px;
}
.ek-completion-canvas {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.ek-completion-chart-surface {
  position: relative;
  min-height: 240px;
  width: 100%;
}
@media (min-width: 1200px) {
  .ek-dashboard-grid > .col-xl-6:nth-child(3),
  .ek-dashboard-grid > .col-xl-6:nth-child(4) {
    height: 340px;
  }
  .ek-completion-panel .ek-chart-box {
    height: auto;
    min-height: 289px;
  }
}
@media (max-width: 767.98px) {
  .ek-pending-header-search {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }
  .ek-pending-panel > header {
    flex-wrap: wrap;
  }
}

/* Readable completion analysis for large district/block master lists. */
.ek-completion-panel .card-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  min-height: 0;
  padding: 8px 10px 10px;
  overflow: hidden;
}
.ek-completion-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: #fff;
  scrollbar-gutter: stable;
}
.ek-completion-list-head,
.ek-completion-row {
  display: grid;
  grid-template-columns: minmax(150px, 2.4fr) repeat(4, minmax(56px, 0.72fr));
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
}
.ek-completion-list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #e4eaf2;
  background: #f8fafc;
  color: #64748b;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ek-completion-row {
  min-height: 42px;
  border-bottom: 1px solid #edf1f6;
  color: #334155;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}
.ek-completion-row:last-child {
  border-bottom: 0;
}
.ek-completion-row > span,
.ek-completion-row > strong {
  text-align: right;
}
.ek-completion-row .is-completed {
  color: #0f9f62;
}
.ek-completion-row .is-pending {
  color: #d88708;
}
.ek-completion-area {
  min-width: 0;
}
.ek-completion-area strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #25324a;
  font-size: 10px;
}
.ek-completion-meter {
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff0d4;
}
.ek-completion-meter span {
  display: block;
  width: var(--completion-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a36a, #34c98a);
}

/* Funnel stages use compact cards and badges instead of long progress lines. */
.ek-dashboard-grid > .col-xl-5:first-child .ek-funnel {
  gap: 6px;
}
.ek-funnel-stage {
  position: relative;
  padding: 8px 10px;
  border: 1px solid #e1e8f1;
  border-left: 4px solid #3157c8;
  border-radius: 9px;
  background: linear-gradient(100deg, #f8fbff, #fff);
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.025);
}
.ek-funnel-stage:nth-child(2) {
  border-left-color: #2563eb;
}
.ek-funnel-stage:nth-child(3) {
  border-left-color: #0891b2;
}
.ek-funnel-stage:nth-child(4) {
  border-left-color: #16a36a;
}
.ek-funnel-stage > div:first-child {
  padding-right: 105px;
}
.ek-funnel-stage > div:first-child span {
  color: #334155;
  font-weight: 600;
}
.ek-funnel-stage strong {
  color: #172033;
}
.ek-funnel-track {
  display: none;
}
.ek-funnel-stage > small {
  position: absolute;
  right: 10px;
  top: 8px;
  display: inline-flex !important;
  width: auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3157c8 !important;
  font-size: 8.5px !important;
  font-weight: 700;
}
.ek-funnel-stage .ek-dropoff {
  margin-top: 6px;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: #fff4f1;
  box-shadow: none;
}
@media (max-width: 767.98px) {
  .ek-completion-list {
    overflow-x: auto;
  }
  .ek-completion-list-head,
  .ek-completion-row {
    min-width: 560px;
  }
  .ek-funnel-stage > div:first-child {
    padding-right: 0;
  }
  .ek-funnel-stage > small {
    position: static;
    margin-top: 5px;
  }
}

/* Alignment and density refinements for analytical grids. */
.ek-completion-list-head > span:not(:first-child) {
  text-align: right;
}
.ek-completion-list-head,
.ek-completion-row {
  grid-template-columns: minmax(190px, 2.6fr) repeat(4, minmax(64px, 0.72fr));
  column-gap: 12px;
}
.ek-completion-meter {
  height: 7px;
  margin-top: 6px;
  box-shadow: inset 0 0 0 1px rgba(232, 155, 24, 0.08);
}
.ek-pending-scroll {
  padding: 4px 8px;
}
.ek-pending-row {
  gap: 6px;
  padding: 4px 3px;
}
.ek-pending-location span {
  margin-top: 0;
}
.ek-level-cells {
  gap: 3px;
}
.ek-level-cell {
  padding: 3px 2px;
  border-radius: 5px;
}
.ek-level-cell span {
  font-size: 7.5px;
}
.ek-level-cell strong {
  font-size: 9.5px;
}
.ek-pending-row-total strong {
  font-size: 11px;
}
#dashboardAchievementChart {
  padding: 4px 8px 12px;
  filter: drop-shadow(0 8px 8px rgba(15, 23, 42, 0.1));
}
@media (max-width: 767.98px) {
  .ek-completion-list-head,
  .ek-completion-row {
    grid-template-columns: minmax(190px, 2.6fr) repeat(4, minmax(64px, 0.72fr));
  }
}
.ek-method-total,
.ek-chart-total {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490 !important;
  font-size: 9px !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1200px) {
  .ek-dashboard-grid > .col-xl-7:nth-child(5),
  .ek-dashboard-grid > .col-xl-5:nth-child(6) {
    height: 360px;
  }
  .ek-dashboard-grid > .col-xl-5:nth-child(6) .ek-chart-box {
    height: auto;
    min-height: 309px;
  }
}
.ek-analytics-kpi-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.ek-analytics-kpi-link:hover,
.ek-analytics-kpi-link:focus-visible {
  color: inherit;
  transform: translateY(-2px);
  border-color: var(--kpi, #2563eb);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  outline: none;
}
.ek-analytics-kpi-link:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--kpi, #2563eb) 22%, transparent),
    0 8px 20px rgba(15, 23, 42, 0.1);
}
.ek-kpi-view-detail {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  margin-top: 3px;
  color: var(--kpi, #2563eb) !important;
  font-size: 7px !important;
  font-weight: 700;
}
.ek-kpi-view-detail i {
  font-size: 8px;
}
.ek-kpi-detail-value {
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3157c8, #0891b2);
  color: #fff;
  font:
    700 24px Lexend,
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.ek-kpi-detail-stat {
  height: 100%;
  padding: 14px;
  border: 1px solid #e1e8f1;
  border-radius: 10px;
  background: #f8fafc;
}
.ek-kpi-detail-stat span {
  display: block;
  color: #64748b;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ek-kpi-detail-stat strong {
  display: block;
  margin-top: 5px;
  color: #172033;
  font:
    700 18px Lexend,
    sans-serif;
}
.ek-completion-meter {
  position: relative;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fffbea 0%, #fef9c3 48%, #fde68a 100%);
  box-shadow: inset 0 0 0 1px rgba(202, 138, 4, 0.16);
}
.ek-completion-meter span {
  position: relative;
  z-index: 1;
  border-radius: 3px;
  background: linear-gradient(90deg, #16a36a 0%, #16a36a 82%, #86d7b5 100%);
  box-shadow: 3px 0 5px rgba(255, 255, 255, 0.22);
}
.ek-completion-meter::before,
.ek-completion-meter::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  color: #172033;
  font:
    700 8px Lexend,
    sans-serif;
  line-height: 1;
  text-shadow: none;
  pointer-events: none;
}
.ek-completion-meter::before {
  left: 7px;
  content: var(--completed-label);
}
.ek-completion-meter::after {
  right: 7px;
  content: var(--pending-label);
}

/* Keep the completion percentages beside the area name and use the panel width efficiently. */
.ek-dashboard-grid .ek-completion-list-head,
.ek-dashboard-grid .ek-completion-row {
  grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(44px, 0.45fr));
  column-gap: 5px;
}
.ek-dashboard-grid .ek-completion-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ek-dashboard-grid .ek-completion-area strong {
  flex: 1 1 auto;
  min-width: 0;
}
.ek-dashboard-grid .ek-completion-meter {
  flex: 0 0 250px;
  width: 250px;
  margin-top: 0;
}
.ek-dashboard-grid .ek-completion-row > span,
.ek-dashboard-grid .ek-completion-row > strong {
  text-align: center;
}
.ek-dashboard-grid .ek-completion-list-head > span:not(:first-child) {
  text-align: center;
}
.ek-dashboard-grid .ek-completion-list-head {
  z-index: 10;
}

/* Rich pending-cell context without relying on the browser's native title tooltip. */
.ek-pending-tooltip {
  position: fixed;
  z-index: 1090;
  width: 238px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.97);
  color: #f8fafc;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
  pointer-events: none;
  animation: ek-pending-tooltip-in 0.14s ease both;
}
.ek-pending-tooltip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #93c5fd;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ek-pending-tooltip-head strong {
  display: grid;
  min-width: 26px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.22);
  color: #fff;
  font-size: 10px;
}
.ek-pending-tooltip h6 {
  margin: 8px 0 9px;
  color: #fff;
  font:
    700 12px Lexend,
    sans-serif;
}
.ek-pending-tooltip-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.ek-pending-tooltip-metrics > div {
  padding: 7px 4px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}
.ek-pending-tooltip-metrics span,
.ek-pending-tooltip-metrics strong {
  display: block;
}
.ek-pending-tooltip-metrics span {
  color: #94a3b8;
  font-size: 7px;
}
.ek-pending-tooltip-metrics strong {
  margin-top: 2px;
  color: #fff;
  font:
    700 10px Lexend,
    sans-serif;
}
.ek-pending-tooltip p {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  font-size: 8px;
  line-height: 1.4;
}
.ek-pending-tooltip p i {
  color: #38bdf8;
  font-size: 11px;
}
@keyframes ek-pending-tooltip-in {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Pending learner details use scannable profile cards instead of a plain data table. */
.ek-pending-users-modal .modal-dialog {
  max-width: 880px;
}
.ek-pending-users-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
}
.ek-pending-users-modal .modal-header {
  padding: 16px 18px;
  border-bottom: 1px solid #e5edf5;
  background: linear-gradient(110deg, #f0f9ff 0%, #fff 62%);
}
.ek-pending-modal-title {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ek-pending-modal-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #0891b2, #38a7db);
  color: #fff;
  box-shadow: 0 7px 18px rgba(8, 145, 178, 0.22);
}
.ek-pending-modal-icon i {
  font-size: 20px;
}
.ek-pending-modal-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #0891b2;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ek-pending-modal-title h5 {
  color: #172033;
  font-size: 15px;
}
.ek-pending-modal-title small {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
}
.ek-pending-users-modal .modal-body {
  position: relative;
  max-height: min(62vh, 560px);
  min-height: 170px;
  padding: 14px;
  overflow-y: auto;
  background: #f6f9fc;
}
.ek-pending-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ek-pending-user-card {
  position: relative;
  padding: 12px;
  border: 1px solid #dfe8f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.ek-pending-user-card:hover {
  transform: translateY(-1px);
  border-color: rgba(8, 145, 178, 0.35);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.ek-pending-user-card-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.ek-pending-user-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #0891b2, #38a7db);
  color: #fff;
  font:
    700 14px Lexend,
    sans-serif;
}
.ek-pending-user-card-head > div {
  min-width: 0;
}
.ek-pending-user-card-head strong,
.ek-pending-user-card-head span {
  display: block;
}
.ek-pending-user-card-head > div > strong {
  overflow: hidden;
  color: #25324a;
  font:
    700 11px Lexend,
    sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-pending-user-card-head > div > span {
  margin-top: 2px;
  color: #8190a5;
  font-size: 8.5px;
}
.ek-pending-level-badge {
  min-width: 31px;
  padding: 5px 7px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: #ecfeff;
  color: #0e7490 !important;
  font:
    700 10px Lexend,
    sans-serif;
  text-align: center;
}
.ek-pending-user-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 11px;
}
.ek-pending-user-details > div {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border-radius: 8px;
  background: #f8fafc;
}
.ek-pending-user-details i {
  color: #0891b2;
  font-size: 14px;
}
.ek-pending-user-details span,
.ek-pending-user-details small,
.ek-pending-user-details strong {
  display: block;
  min-width: 0;
}
.ek-pending-user-details small {
  color: #94a3b8;
  font-size: 7px;
}
.ek-pending-user-details strong {
  overflow: hidden;
  margin-top: 1px;
  color: #475569;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-pending-user-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #dce5ef;
  color: #64748b;
  font-size: 8px;
}
.ek-pending-user-status i {
  color: #e89b18;
  font-size: 11px;
}
.ek-pending-users-modal .modal-footer {
  padding: 11px 15px;
  border-top: 1px solid #e5edf5;
  background: #fff;
}
.ek-pending-modal-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: #64748b;
  font-size: 9px;
}
.ek-pending-modal-count i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  background: #ecfeff;
  color: #0891b2;
  font-size: 14px;
}
.ek-pending-modal-count strong {
  color: #172033;
  font:
    700 12px Lexend,
    sans-serif;
}
.ek-pending-users-modal .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 0;
  background: #0891b2;
  font-size: 10px;
}
.ek-pending-modal-empty {
  position: relative;
  inset: auto;
  min-height: 140px;
}
.ek-pending-users-modal + .modal-backdrop {
  backdrop-filter: blur(2px);
}
@media (max-width: 767.98px) {
  .ek-pending-users-modal .modal-dialog {
    margin: 10px;
  }
  .ek-pending-user-grid {
    grid-template-columns: 1fr;
  }
  .ek-pending-user-details {
    grid-template-columns: 1fr 1fr;
  }
}

/* Learning Progress Details: analytical tabs, rich grid, and filter continuity. */
.ek-kpi-details-page {
  padding-bottom: calc(var(--ek-footer-safe-area) + 18px);
}
.ek-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 10px;
  color: #8492a6;
  font-size: 9px;
}
.ek-detail-breadcrumb a {
  color: #2563eb;
  font-weight: 600;
}
.ek-detail-title-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 9px;
}
.ek-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.ek-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ek-competency-quick-filter {
  width: min(260px, 22vw);
  min-width: 190px;
}

.ek-competency-quick-filter .form-select {
  height: 34px;
  border-color: #dbe3ee;
  border-radius: 9px;
  background-color: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
}

.ek-competency-quick-filter .form-select:focus {
  border-color: #8ab4ff;
  box-shadow: 0 0 0 2px rgba(49, 87, 200, 0.12);
}
.ek-ai-summary-button {
  background: linear-gradient(135deg, #2563eb, #0891b2);
  border: 0;
}
.ek-detail-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.ek-detail-filter-chips span {
  padding: 4px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 8.5px;
  font-weight: 600;
}
.ek-kpi-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(110px, 1fr));
  gap: 6px;
  margin-bottom: 9px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.ek-kpi-tabs button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  text-align: left;
  transition: 0.15s ease;
}
.ek-kpi-tabs button:hover,
.ek-kpi-tabs button:focus-visible {
  border-color: #93c5fd;
  transform: translateY(-1px);
  outline: 0;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
}
.ek-kpi-tabs button.active {
  border-color: #2563eb;
  background: linear-gradient(135deg, #eff6ff, #fff);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.ek-kpi-tab-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
}
.ek-kpi-tabs button.active .ek-kpi-tab-icon {
  background: #2563eb;
  color: #fff;
}
.ek-kpi-tabs small,
.ek-kpi-tabs strong {
  display: block;
}
.ek-kpi-tabs small {
  overflow: hidden;
  max-width: 94px;
  color: #64748b;
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-kpi-tabs strong {
  margin-top: 2px;
  color: #172033;
  font:
    700 13px Lexend,
    sans-serif;
}
.ek-detail-summary-card {
  margin-bottom: 9px;
  border: 0;
  background: linear-gradient(115deg, #f8fbff, #fff);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.ek-detail-summary-card .card-body {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(100px, 0.25fr));
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
}
.ek-detail-summary-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.ek-detail-summary-main > div > span,
.ek-detail-summary-stat span {
  display: block;
  color: #8492a6;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ek-detail-summary-main h5 {
  margin: 1px 0;
  color: #172033;
  font-size: 13px;
}
.ek-detail-summary-main p {
  overflow: hidden;
  margin: 0;
  color: #64748b;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-detail-summary-stat {
  padding-left: 10px;
  border-left: 1px solid #e2e8f0;
}
.ek-detail-summary-stat strong {
  display: block;
  margin-top: 3px;
  color: #172033;
  font:
    700 14px Lexend,
    sans-serif;
}
.ek-detail-summary-stat strong.is-date {
  font-size: 8.5px;
}
.ek-detail-grid-card {
  overflow: hidden;
  border: 0;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}
.ek-detail-grid-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid #e5ebf3;
  background: #fff;
}
.ek-detail-grid-card > header h5 {
  margin: 0;
  color: #172033;
  font-size: 12px;
}
.ek-detail-grid-card > header span {
  color: #7b8798;
  font-size: 8.5px;
}
.ek-detail-search {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(390px, 48%);
  padding: 6px 9px;
  border: 1px solid #d7e1ed;
  border-radius: 8px;
  color: #64748b;
}
.ek-detail-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 9.5px;
}
.ek-detail-search button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
}
.ek-detail-grid-wrap {
  overflow: auto;
}
.ek-detail-grid {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
}
.ek-detail-grid th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid #dce5ef;
  background: #f8fafc;
  color: #64748b;
  font-size: 7.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ek-detail-grid th button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
}
.ek-detail-grid td {
  padding: 9px 10px;
  border-bottom: 1px solid #edf2f7;
  color: #475569;
  font-size: 9px;
  vertical-align: middle;
}
.ek-detail-grid tbody tr {
  transition: background 0.12s ease;
}
.ek-detail-grid tbody tr:hover {
  background: #f8fbff;
}
@media (min-width: 1400px) {
  .ek-detail-grid .ek-sticky-learner-column {
    position: sticky;
    left: 0;
    background: #fff;
    box-shadow: 8px 0 12px -12px rgba(15, 23, 42, 0.55);
  }
  .ek-detail-grid th.ek-sticky-learner-column {
    z-index: 4;
    background: #f8fafc;
  }
  .ek-detail-grid td.ek-sticky-learner-column {
    z-index: 3;
  }
  .ek-detail-grid tbody tr:hover td.ek-sticky-learner-column {
    background: #f8fbff;
  }
}
.ek-grid-user {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.ek-grid-user > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #2563eb, #38a7db);
  color: #fff;
  font:
    700 12px Lexend,
    sans-serif;
}
.ek-grid-user strong,
.ek-grid-user small,
.ek-grid-user em,
.ek-grid-stack strong,
.ek-grid-stack span,
.ek-grid-stack small {
  display: block;
}
.ek-grid-user strong {
  color: #25324a;
  font-size: 9.5px;
}
.ek-grid-user small {
  color: #8492a6;
  font-size: 7.5px;
}
.ek-grid-user em {
  margin-top: 2px;
  color: #64748b;
  font-size: 7.5px;
  font-style: normal;
}
.ek-grid-stack {
  max-width: 220px;
}
.ek-grid-stack strong {
  overflow: hidden;
  color: #334155;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-stack span {
  margin-top: 2px;
  color: #64748b;
  font-size: 8px;
}
.ek-grid-stack small {
  overflow: hidden;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-learning-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #475569;
}
.ek-learning-status strong {
  padding-left: 5px;
  border-left: 1px solid currentColor;
  font-size: 8px;
}
.ek-learning-status.is-completed {
  background: #dcfce7;
  color: #15803d;
}
.ek-learning-status.is-in-progress {
  background: #e0f2fe;
  color: #0369a1;
}
.ek-learning-status.is-not-started,
.ek-learning-status.is-not-enrolled {
  background: #fff7ed;
  color: #c2410c;
}
.ek-completion-method,
.ek-enrollment-status {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 7.5px;
}
.ek-completion-method i {
  margin-right: 3px;
  color: #0891b2;
}
.ek-date-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ek-date-stack > span {
  padding: 4px 6px;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 8px;
}
.ek-date-stack small {
  display: block;
  color: #94a3b8;
  font-size: 6.5px;
  text-transform: uppercase;
}
.ek-grid-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 8px;
  font-weight: 600;
}
.ek-detail-grid-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: #f8fafc;
}
.ek-detail-grid-card > footer > div,
.ek-detail-grid-card > footer nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 8.5px;
}
.ek-detail-grid-card > footer select {
  margin-left: 4px;
  padding: 3px 5px;
  border: 1px solid #d5dfeb;
  border-radius: 5px;
  background: #fff;
}
.ek-detail-grid-card > footer nav button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #dbe4ef;
  border-radius: 6px;
  background: #fff;
  color: #475569;
}
.ek-detail-grid-card > footer nav button:disabled {
  opacity: 0.42;
}
.ek-detail-empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #7b8798;
  text-align: center;
}
.ek-detail-empty > i {
  font-size: 30px;
  color: #a8b5c6;
}
.ek-detail-empty h6,
.ek-detail-empty p {
  margin: 0;
}
.ek-detail-grid-loading {
  padding: 8px 12px;
}
.ek-detail-grid-loading > div {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
}
.ek-detail-grid-loading span {
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
  background-size: 200% 100%;
  animation: ek-grid-shimmer 1.2s infinite;
}
.ek-ai-filter-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #dce7f2;
  border-radius: 9px;
  background: #f8fafc;
}
.ek-ai-filter-preview strong {
  width: 100%;
  font-size: 9px;
}
.ek-ai-filter-preview span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 8px;
}
@keyframes ek-grid-shimmer {
  to {
    background-position: -200% 0;
  }
}
.ek-feature-toast {
  position: fixed;
  z-index: 1095;
  top: 84px;
  right: 22px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 10px;
  width: min(390px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.2);
  animation: ek-toast-in 0.2s ease-out;
}
.ek-feature-toast-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #fff;
}
.ek-feature-toast strong {
  display: block;
  color: #172033;
  font-size: 12px;
}
.ek-feature-toast p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 10px;
  line-height: 1.45;
}
.ek-feature-toast button {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
}
.ek-feature-toast button:hover {
  background: #e2e8f0;
  color: #172033;
}
@keyframes ek-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1199.98px) {
  .ek-kpi-tabs {
    grid-template-columns: repeat(8, 130px);
  }
  .ek-detail-summary-card .card-body {
    grid-template-columns: 1fr repeat(2, minmax(100px, 0.3fr));
  }
  .ek-detail-summary-stat:last-child {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .ek-field-dashboard .page-title-head {
    flex-wrap: wrap;
  }
  .ek-competency-quick-filter {
    order: 10;
    width: 100%;
    min-width: 0;
  }
  .ek-detail-title-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ek-detail-actions {
    justify-content: flex-start;
  }
  .ek-detail-summary-card .card-body {
    grid-template-columns: 1fr 1fr;
  }
  .ek-detail-summary-main {
    grid-column: 1/-1;
  }
  .ek-detail-search {
    width: 100%;
  }
  .ek-detail-grid-card > header,
  .ek-detail-grid-card > footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .ek-detail-grid-card > footer {
    align-items: stretch;
  }
  .ek-detail-grid-card > footer nav {
    justify-content: space-between;
  }
}
.ek-grid-user {
  align-items: start;
}
.ek-grid-user > div {
  min-width: 0;
}
.ek-grid-user small {
  font-size: 8px;
  font-weight: 600;
}
.ek-grid-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 3px;
  color: #64748b;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.25;
}
.ek-grid-contact span {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ek-grid-contact i {
  flex: 0 0 auto;
  color: #2563eb;
}
.ek-grid-stack span {
  font-size: 8.5px;
  font-weight: 500;
}
.ek-grid-stack small,
.ek-completion-method,
.ek-enrollment-status {
  font-size: 8.25px;
  font-weight: 500;
}
.ek-grid-action {
  cursor: pointer;
  white-space: nowrap;
}
.ek-grid-action:hover {
  border-color: #60a5fa;
  background: #dbeafe;
  color: #1d4ed8;
}
.ek-history-modal {
  z-index: 1061;
}
.ek-history-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
}
.ek-history-header {
  padding: 15px 18px;
  border-bottom: 1px solid #e5ebf3;
  background: linear-gradient(115deg, #eff6ff, #f0fdfa);
}
.ek-history-person {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ek-history-person > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #fff;
  font:
    700 17px Lexend,
    sans-serif;
}
.ek-history-person small {
  color: #2563eb;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ek-history-person h5 {
  margin: 1px 0;
  color: #172033;
  font-size: 16px;
}
.ek-history-person p {
  margin: 0;
  color: #64748b;
  font-size: 9px;
}
.ek-history-body {
  padding: 17px;
  background: #f8fafc;
}
.ek-history-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.ek-history-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
}
.ek-history-timeline article:not(:last-child):after {
  position: absolute;
  z-index: 2;
  right: -11px;
  width: 11px;
  height: 2px;
  background: #cbd5e1;
  content: "";
}
.ek-history-timeline article > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 9px;
  background: #f1f5f9;
  color: #94a3b8;
}
.ek-history-timeline small,
.ek-history-timeline strong,
.ek-history-timeline time {
  display: block;
}
.ek-history-timeline small {
  color: #64748b;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}
.ek-history-timeline strong {
  overflow: hidden;
  margin: 1px 0;
  color: #334155;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-history-timeline time {
  color: #94a3b8;
  font-size: 7.5px;
  font-style: normal;
}
.ek-history-timeline .is-done {
  border-color: #bbf7d0;
  background: linear-gradient(145deg, #f0fdf4, #fff);
}
.ek-history-timeline .is-done > span {
  background: #dcfce7;
  color: #16a36a;
}
.ek-history-timeline .is-done:not(:last-child):after {
  background: #22c55e;
}
.ek-history-timeline .is-pending {
  border-style: dashed;
}
.ek-history-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ek-history-card {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.ek-history-card > header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #edf2f7;
}
.ek-history-card > header > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
}
.ek-history-card h6 {
  margin: 0;
  color: #25324a;
  font-size: 10.5px;
}
.ek-history-card p {
  margin: 1px 0 0;
  color: #94a3b8;
  font-size: 7.5px;
}
.ek-history-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ek-history-detail-grid > div {
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}
.ek-history-detail-grid > div:nth-child(2n) {
  border-right: 0;
}
.ek-history-detail-grid > div.is-wide {
  grid-column: 1/-1;
  border-right: 0;
}
.ek-history-detail-grid small,
.ek-history-detail-grid strong {
  display: block;
}
.ek-history-detail-grid small {
  margin-bottom: 2px;
  color: #94a3b8;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ek-history-detail-grid strong {
  overflow: hidden;
  color: #334155;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-history-course {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: linear-gradient(120deg, #eff6ff, #fff);
}
.ek-history-course > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
}
.ek-history-course small,
.ek-history-course strong,
.ek-history-course p {
  display: block;
}
.ek-history-course small {
  color: #64748b;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}
.ek-history-course strong {
  color: #172033;
  font-size: 10px;
}
.ek-history-course p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 8px;
}
.ek-history-course em {
  margin-left: 8px;
  color: #0891b2;
  font-style: normal;
}
.ek-history-level {
  text-align: right;
}
.ek-history-level strong {
  font:
    700 18px Lexend,
    sans-serif;
  color: #2563eb;
}
.ek-history-level span {
  display: block;
  color: #16a36a;
  font-size: 8px;
  font-weight: 700;
}
.ek-history-modal .modal-footer {
  justify-content: space-between;
}
.ek-history-updated {
  color: #64748b;
  font-size: 9px;
}
.ek-history-updated i {
  margin-right: 4px;
  color: #0891b2;
}
@media (max-width: 767.98px) {
  .ek-history-timeline {
    grid-template-columns: 1fr 1fr;
  }
  .ek-history-timeline article:after {
    display: none;
  }
  .ek-history-layout {
    grid-template-columns: 1fr;
  }
  .ek-history-detail-grid {
    grid-template-columns: 1fr;
  }
  .ek-history-detail-grid > div {
    border-right: 0;
  }
  .ek-history-course {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .ek-history-level {
    grid-column: 2;
    text-align: left;
  }
}
.ek-detail-grid {
  table-layout: auto;
}
.ek-detail-grid th:nth-child(6),
.ek-detail-grid td:nth-child(6) {
  width: 1%;
  padding-inline: 7px;
  text-align: center;
  white-space: nowrap;
}
.ek-detail-grid th:nth-child(5),
.ek-detail-grid td:nth-child(5) {
  width: 250px;
  min-width: 250px;
  white-space: nowrap;
}
.ek-date-stack {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 5px;
  flex-wrap: nowrap;
}
.ek-date-stack > span {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e3a5f;
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
}
.ek-date-stack small {
  margin-bottom: 2px;
  color: #2563eb;
  font-size: 7px;
  font-weight: 800;
}
.ek-grid-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.ek-grid-action.is-pdf {
  border-color: #fecaca;
  background: #fff1f2;
  color: #dc2626;
}
.ek-grid-action.is-pdf:hover {
  border-color: #f87171;
  background: #fee2e2;
  color: #b91c1c;
}
.ek-grid-action:disabled {
  cursor: wait;
  opacity: 0.6;
}
.ek-history-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ek-history-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 9px;
}
.ek-history-modal .modal-footer {
  padding-block: 9px;
}
.ek-kpi-tabs button {
  border-color: color-mix(in srgb, var(--detail-kpi, #64748b) 20%, white);
  background: var(--detail-kpi-bg, #f8fafc);
}
.ek-kpi-tabs button:hover,
.ek-kpi-tabs button:focus-visible {
  border-color: var(--detail-kpi, #2563eb);
}
.ek-kpi-tabs button.active {
  border-color: var(--detail-kpi, #2563eb);
  background: var(--detail-kpi-bg, #eff6ff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--detail-kpi, #2563eb) 18%, transparent);
}
.ek-kpi-tabs .ek-kpi-tab-icon {
  background: color-mix(in srgb, var(--detail-kpi, #64748b) 12%, white);
  color: var(--detail-kpi, #64748b);
}
.ek-kpi-tabs button.active .ek-kpi-tab-icon {
  background: var(--detail-kpi, #2563eb);
  color: #fff;
}
.ek-kpi-tabs small {
  color: #334155;
  font-size: 8px;
  font-weight: 700;
}
.ek-kpi-tabs .tone-registered {
  --detail-kpi: #334155;
  --detail-kpi-bg: #f8fafc;
}
.ek-kpi-tabs .tone-enrolled {
  --detail-kpi: #2563eb;
  --detail-kpi-bg: #eff6ff;
}
.ek-kpi-tabs .tone-started {
  --detail-kpi: #0891b2;
  --detail-kpi-bg: #ecfeff;
}
.ek-kpi-tabs .tone-completed {
  --detail-kpi: #16a36a;
  --detail-kpi-bg: #ecfdf5;
}
.ek-kpi-tabs .tone-not-enrolled {
  --detail-kpi: #dc2626;
  --detail-kpi-bg: #fef2f2;
}
.ek-kpi-tabs .tone-not-started {
  --detail-kpi: #d97706;
  --detail-kpi-bg: #fff7ed;
}
.ek-kpi-tabs .tone-in-progress {
  --detail-kpi: #7c3aed;
  --detail-kpi-bg: #f5f3ff;
}
.ek-kpi-tabs .tone-overall-completion {
  --detail-kpi: #0f766e;
  --detail-kpi-bg: #f0fdfa;
}
.ek-history-pdf-button {
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #dc2626;
}
.ek-history-pdf-button:hover,
.ek-history-pdf-button:focus-visible {
  border-color: #f87171;
  background: #fee2e2;
  color: #b91c1c;
}
@media print {
  .sidenav-menu,
  .app-topbar,
  .footer,
  .ek-detail-actions,
  .ek-kpi-tabs,
  .ek-detail-search,
  .ek-detail-grid-card > footer,
  .ek-filter-drawer,
  .ek-filter-backdrop,
  .ek-ai-report-modal,
  .ek-history-modal,
  .modal-backdrop {
    display: none !important;
  }
  .content-page {
    margin: 0 !important;
    padding: 0 !important;
  }
  .ek-detail-grid-card {
    box-shadow: none;
  }
  .ek-detail-grid-wrap {
    overflow: visible;
  }
  .ek-detail-grid {
    min-width: 0;
    font-size: 7pt;
  }
  .ek-detail-grid th {
    position: static;
  }
  .ek-detail-grid td,
  .ek-detail-grid th {
    padding: 4px;
  }
  .ek-grid-action {
    display: none;
  }
  body.ek-print-history {
    background: #fff !important;
  }
  body.ek-print-history > .wrapper > *:not(.ek-history-modal),
  body.ek-print-history > form,
  body.ek-print-history > #sessionExpiryModal {
    display: none !important;
  }
  body.ek-print-history > .wrapper {
    display: block !important;
  }
  body.ek-print-history .ek-history-modal {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body.ek-print-history .ek-history-modal .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }
  body.ek-print-history .ek-history-modal .modal-content {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.ek-print-history .ek-history-modal .modal-body {
    overflow: visible !important;
  }
  body.ek-print-history .ek-history-modal .btn-close,
  body.ek-print-history .ek-history-modal .modal-footer {
    display: none !important;
  }
  @page {
    size: A4 landscape;
    margin: 8mm;
  }
}

/* Learning Progress Details readability and analytical grid redesign. */
.ek-kpi-details-page {
  color: #334155;
}
.ek-detail-breadcrumb {
  font-size: 12px;
  line-height: 1.4;
}
.ek-detail-page-subtitle {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.ek-detail-filter-chips span {
  font-size: 11px;
  line-height: 1.35;
}
.ek-kpi-tabs small {
  max-width: 112px;
  font-size: 10px;
  line-height: 1.3;
}
.ek-kpi-tabs strong {
  font-size: 15px;
}
.ek-detail-summary-main > div > span,
.ek-detail-summary-stat span {
  font-size: 10px;
}
.ek-detail-summary-main h5 {
  font-size: 15px;
}
.ek-detail-summary-main p {
  overflow: visible;
  color: #475569;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}
.ek-detail-summary-stat strong {
  font-size: 16px;
}
.ek-detail-summary-stat strong.is-date {
  font-size: 12px;
  line-height: 1.35;
}
.ek-detail-grid-card > header {
  padding: 14px 16px;
}
.ek-detail-grid-card > header h5 {
  font-size: 15px;
}
.ek-detail-grid-card > header span {
  font-size: 12px;
}
.ek-matching-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 9px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8 !important;
  font-weight: 700;
  line-height: 1.2;
}
.ek-matching-badge i {
  font-size: 14px;
}
.ek-detail-search {
  padding: 9px 11px;
}
.ek-detail-search input {
  font-size: 12px;
  line-height: 1.4;
}
.ek-detail-grid {
  min-width: 1320px;
}
.ek-detail-grid th {
  padding: 11px 12px;
  font-size: 10px;
}
.ek-detail-grid td {
  padding: 13px 12px;
  color: #475569;
  font-size: 12px;
  line-height: 1.4;
}
.ek-detail-grid tbody tr:hover {
  background: #f5f9ff;
  box-shadow: inset 3px 0 #93c5fd;
}
.ek-detail-grid th:nth-child(1) {
  width: 20%;
}
.ek-detail-grid th:nth-child(2) {
  width: 17%;
}
.ek-detail-grid th:nth-child(3) {
  width: 20%;
}
.ek-detail-grid th:nth-child(4) {
  width: 21%;
}
.ek-detail-grid th:nth-child(5),
.ek-detail-grid td:nth-child(5) {
  width: 1%;
  min-width: 390px;
}
.ek-detail-grid th:nth-child(6),
.ek-detail-grid td:nth-child(6) {
  width: 1%;
  min-width: 112px;
}
.ek-grid-user {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
}
.ek-grid-user > span {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 15px;
}
.ek-grid-user strong {
  display: block;
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-contact {
  gap: 5px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.ek-grid-contact a,
.ek-grid-contact > span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #475569;
  text-decoration: none;
}
.ek-grid-contact a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.ek-grid-contact a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-contact i {
  font-size: 13px;
}
.ek-contact-restricted {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
}
.ek-grid-hierarchy {
  display: grid;
  gap: 7px;
}
.ek-grid-hierarchy > span {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 6px;
  min-width: 0;
}
.ek-grid-hierarchy i {
  grid-row: 1/3;
  color: #2563eb;
  font-size: 14px;
}
.ek-grid-hierarchy small {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}
.ek-grid-hierarchy strong {
  overflow: hidden;
  color: #25324a;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-hierarchy em {
  grid-column: 2;
  overflow: hidden;
  color: #64748b;
  font-size: 11.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-course {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.ek-grid-course strong {
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-course > span {
  display: -webkit-box;
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ek-grid-course small {
  justify-self: start;
  overflow: hidden;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-course small i {
  margin-right: 4px;
}
.ek-progress-card {
  position: relative;
  min-width: 235px;
  padding: 10px;
  border: 1px solid #dbe6f1;
  border-radius: 10px;
  background: #fbfdff;
  outline: 0;
}
.ek-progress-card:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.ek-progress-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ek-progress-status > strong {
  color: #334155;
  font-size: 12px;
  white-space: nowrap;
}
.ek-learning-status {
  gap: 5px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
}
.ek-learning-status i {
  font-size: 14px;
}
.ek-progress-track {
  height: 8px;
  margin: 9px 0 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #e2e8f0;
}
.ek-progress-track span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #2563eb, #38a7db);
}
.ek-progress-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
}
.ek-progress-meta strong,
.ek-progress-meta span {
  font-size: 11.5px;
  line-height: 1.35;
}
.ek-progress-meta strong {
  color: #1d4ed8;
}
.ek-progress-meta span {
  overflow: hidden;
  color: #475569;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-progress-meta span:nth-last-child(-n + 2) {
  color: #64748b;
  font-size: 11px;
}
.ek-progress-tooltip {
  position: absolute;
  z-index: 8;
  left: 8px;
  top: calc(100% + 7px);
  display: none;
  width: 285px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 11px;
  background: #172033;
  color: #e2e8f0;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.24);
}
.ek-progress-card:hover .ek-progress-tooltip,
.ek-progress-card:focus .ek-progress-tooltip,
.ek-progress-card:focus-within .ek-progress-tooltip {
  display: grid;
  gap: 6px;
}
.ek-progress-tooltip > strong {
  color: #fff;
  font-size: 13px;
}
.ek-progress-tooltip > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #cbd5e1;
  font-size: 11.5px;
}
.ek-progress-tooltip b {
  color: #fff;
  font-weight: 600;
  text-align: right;
}
.ek-date-stack {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.ek-date-stack > span {
  padding: 7px 8px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #172033;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.ek-date-stack small {
  margin-bottom: 3px;
  color: #1d4ed8;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}
.ek-grid-action {
  padding: 7px 9px;
  font-size: 11px;
}
.ek-detail-grid-card > footer > div,
.ek-detail-grid-card > footer nav {
  font-size: 11.5px;
}

@media (max-width: 1399.98px) {
  .ek-detail-grid {
    min-width: 0;
  }
  .ek-detail-grid thead {
    display: none;
  }
  .ek-detail-grid,
  .ek-detail-grid tbody {
    display: block;
  }
  .ek-detail-grid tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    background: #f3f6fa;
  }
  .ek-detail-grid tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    overflow: visible;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  }
  .ek-detail-grid tbody tr:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }
  .ek-detail-grid td,
  .ek-detail-grid td:nth-child(5),
  .ek-detail-grid td:nth-child(6) {
    display: block;
    width: auto;
    min-width: 0;
    padding: 12px;
    border-bottom: 1px solid #edf2f7;
    white-space: normal;
  }
  .ek-detail-grid td::before {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    content: attr(data-label);
  }
  .ek-detail-grid td:nth-child(1),
  .ek-detail-grid td:nth-child(3),
  .ek-detail-grid td:nth-child(4),
  .ek-detail-grid td:nth-child(5) {
    grid-column: 1/-1;
  }
  .ek-detail-grid td:nth-child(6) {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .ek-date-stack {
    flex-wrap: wrap;
  }
  .ek-grid-actions {
    justify-content: flex-end;
  }
}
@media (max-width: 767.98px) {
  .ek-detail-summary-card .card-body {
    grid-template-columns: 1fr;
  }
  .ek-detail-summary-main {
    grid-column: auto;
  }
  .ek-detail-summary-stat {
    padding: 8px 0 0;
    border-top: 1px solid #e2e8f0;
    border-left: 0;
  }
  .ek-kpi-tabs small {
    font-size: 11px;
  }
  .ek-detail-grid tbody {
    grid-template-columns: 1fr;
    padding: 8px;
  }
  .ek-detail-grid tbody tr {
    grid-template-columns: 1fr;
  }
  .ek-detail-grid td,
  .ek-detail-grid td:nth-child(1),
  .ek-detail-grid td:nth-child(2),
  .ek-detail-grid td:nth-child(3),
  .ek-detail-grid td:nth-child(4),
  .ek-detail-grid td:nth-child(5),
  .ek-detail-grid td:nth-child(6) {
    grid-column: 1;
    min-width: 0;
  }
  .ek-progress-meta {
    grid-template-columns: 1fr;
  }
  .ek-progress-tooltip {
    position: static;
    width: auto;
    margin-top: 8px;
  }
  .ek-date-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ek-date-stack > span {
    white-space: normal;
  }
  .ek-grid-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .ek-detail-grid-card > footer nav {
    flex-wrap: wrap;
  }
}

/* Login page — learning analytics journey and secure sign-in card. */
.ek-login-page {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 43% 45%, rgba(56, 167, 219, 0.18), transparent 31%),
    linear-gradient(120deg, #f5fbff 0%, #eaf7ff 49%, #f7fbff 100%);
}

.ek-login-page .ek-auth-shell {
  grid-template-columns: minmax(620px, 1.6fr) minmax(430px, 0.8fr);
  min-height: 100vh;
}

.ek-login-page .ek-auth-visual {
  color: #0d1b5e;
  background: transparent;
}

.ek-login-page .ek-auth-visual::before,
.ek-login-page .ek-auth-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(56, 167, 219, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.ek-login-page .ek-auth-visual::before {
  top: 17%;
  left: 28%;
  width: 510px;
  height: 510px;
  background: rgba(255, 255, 255, 0.26);
}

.ek-login-page .ek-auth-visual::after {
  right: -110px;
  bottom: -190px;
  width: 480px;
  height: 480px;
  animation: ek-float-ring 12s ease-in-out infinite;
}

.ek-login-page .ek-auth-visual-overlay {
  background:
    radial-gradient(circle at 59% 39%, rgba(14, 165, 233, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(224, 245, 255, 0.32));
}

.ek-login-page .ek-auth-visual-content {
  isolation: isolate;
  width: min(100%, 920px);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 62px) clamp(38px, 6vw, 82px) 34px;
}

.ek-login-data-backdrop {
  position: absolute;
  z-index: -1;
  inset: 105px 22px 35px;
  overflow: hidden;
  pointer-events: none;
}

.ek-login-data-backdrop::before {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(49, 87, 200, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 87, 200, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 55% 48%, #000, transparent 72%);
  content: "";
}

.ek-login-data-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(56, 167, 219, 0.22);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 16px 40px rgba(49, 87, 200, 0.06);
  opacity: 0.22;
  transform: rotate(var(--data-rotate, 0deg));
  animation: ek-login-data-drift 12s ease-in-out infinite alternate;
}

.ek-login-data-card svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ek-login-data-card.is-line-chart {
  --data-rotate: -4deg;
  top: 6%;
  right: -7%;
  width: 285px;
  height: 132px;
}

.ek-login-data-card.is-bar-chart {
  --data-rotate: 4deg;
  right: 2%;
  bottom: 7%;
  width: 230px;
  height: 135px;
  animation-delay: -4s;
}

.ek-login-data-card.is-donut-chart {
  --data-rotate: -7deg;
  bottom: 1%;
  left: -5%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  animation-delay: -8s;
}

.ek-login-data-card .grid-lines path {
  fill: none;
  stroke: #3157c8;
  stroke-width: 1;
  opacity: 0.28;
}

.ek-login-data-card .area {
  fill: rgba(56, 167, 219, 0.32);
}

.ek-login-data-card .line,
.ek-login-data-card .trend,
.ek-login-data-card .trend-arrow {
  fill: none;
  stroke: #3157c8;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ek-login-data-card .points,
.ek-login-data-card .bars {
  fill: #38a7db;
}

.ek-login-data-card .axis {
  fill: none;
  stroke: #3157c8;
  stroke-width: 2;
  opacity: 0.65;
}

.ek-login-data-card .donut-track,
.ek-login-data-card .donut-value {
  fill: none;
  stroke-width: 16;
}

.ek-login-data-card .donut-track {
  stroke: rgba(49, 87, 200, 0.16);
}

.ek-login-data-card .donut-value {
  stroke: #38a7db;
  stroke-dasharray: 208 290;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 75px 75px;
}

.ek-login-page .ek-auth-logo {
  color: #0d1b5e !important;
}

.ek-login-page .ek-auth-logo strong {
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -0.7px;
}

.ek-login-page .ek-auth-logo small {
  color: #65739c;
  opacity: 1;
}

.ek-login-page .ek-auth-logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(145deg, #3157c8, #06b6d4);
  font-size: 24px;
  box-shadow: 0 12px 26px rgba(6, 182, 212, 0.22);
}

.ek-login-page .ek-auth-trust {
  display: none;
}

.ek-login-hero {
  position: relative;
  z-index: 1;
  margin-top: clamp(28px, 6vh, 66px);
  animation: ek-rise 0.6s ease both;
}

.ek-login-page .ek-auth-kicker {
  border: 1px solid #76b9ff;
  background: rgba(255, 255, 255, 0.5);
  color: #173994;
  font-size: 11px;
}

.ek-login-hero h1 {
  max-width: 720px;
  margin: 20px 0 10px;
  color: #081451;
  font: 800 clamp(38px, 4.4vw, 59px) / 1.03 Lexend, sans-serif;
  letter-spacing: -2.6px;
}

.ek-login-hero h1 span {
  display: block;
  color: #1478f2;
  background: linear-gradient(90deg, #1478f2, #09b8dc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ek-login-hero p {
  max-width: 680px;
  margin: 0;
  color: #637096;
  font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 500;
  line-height: 1.55;
}

.ek-login-progress {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 74px 1fr 74px 1fr 74px 1fr 74px 1fr 74px;
  align-items: start;
  gap: 8px;
  width: min(100%, 710px);
  margin-top: clamp(30px, 5vh, 48px);
  animation: ek-rise 0.65s 0.08s ease both;
}

.ek-login-progress article {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #0d1b5e;
  text-align: center;
  animation: ek-login-node-in 0.52s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.ek-login-progress article:nth-of-type(2) {
  animation-delay: 0.08s;
}

.ek-login-progress article:nth-of-type(3) {
  animation-delay: 0.16s;
}

.ek-login-progress article:nth-of-type(4) {
  animation-delay: 0.24s;
}

.ek-login-progress article:nth-of-type(5) {
  animation-delay: 0.32s;
}

.ek-login-progress article > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 4px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  box-shadow:
    0 0 0 2px currentColor,
    0 10px 20px rgba(15, 23, 42, 0.13);
  animation: ek-login-node-pulse 3.4s ease-in-out infinite;
}

.ek-login-progress article > strong {
  font-size: 11px;
  white-space: nowrap;
}

.ek-login-progress .is-registered > span {
  background: #1478f2;
  color: #1478f2;
}

.ek-login-progress .is-registered > span i,
.ek-login-progress .is-enrolled > span i,
.ek-login-progress .is-started > span i,
.ek-login-progress .is-progressing > span i,
.ek-login-progress .is-completed > span i {
  color: #fff;
}

.ek-login-progress .is-enrolled > span {
  background: #6d4df5;
  color: #6d4df5;
}

.ek-login-progress .is-started > span {
  background: #18b8c7;
  color: #18b8c7;
}

.ek-login-progress .is-progressing > span {
  background: #ee9c12;
  color: #ee9c12;
}

.ek-login-progress .is-completed > span {
  background: #13b86c;
  color: #13b86c;
}

.ek-progress-arrow {
  position: relative;
  align-self: start;
  width: 100%;
  height: 58px;
  margin: 0;
  overflow: visible;
  color: #157cf2;
  font-size: 0;
}

.ek-progress-arrow::before {
  position: absolute;
  top: 28px;
  right: 7px;
  left: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px);
  background-size: 22px 2px;
  content: "";
  animation: ek-login-connector-flow 1.1s linear infinite;
}

.ek-progress-arrow::after {
  position: absolute;
  top: 23px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.ek-progress-arrow.is-success {
  color: #16b86c;
}

.ek-login-dropoff {
  position: absolute;
  top: 76px;
  left: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ff5d55;
}

.ek-login-dropoff > i {
  font-size: 24px;
}

.ek-login-dropoff > span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 50%;
  background: #ff5d55;
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 93, 85, 0.25);
}

.ek-login-dropoff strong {
  position: absolute;
  top: 34px;
  left: 35px;
  font-size: 10px;
  white-space: nowrap;
}

.ek-login-capabilities {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 710px);
  margin-top: clamp(70px, 10vh, 98px);
  animation: ek-rise 0.68s 0.14s ease both;
}

.ek-login-capabilities > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid #b9dcff;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.58);
  color: #0d1b5e;
  font-size: 11px;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  animation: ek-login-capability-in 0.55s ease both;
}

.ek-login-capabilities > div:nth-child(2) {
  animation-delay: 0.08s;
}

.ek-login-capabilities > div:nth-child(3) {
  animation-delay: 0.16s;
}

.ek-login-capabilities > div:hover {
  border-color: #65b5ff;
  box-shadow: 0 10px 24px rgba(49, 87, 200, 0.1);
  transform: translateY(-3px);
}

.ek-login-capabilities i {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #4da9ff;
  border-radius: 50%;
  color: #1478f2;
  font-size: 20px;
}

.ek-login-page .ek-auth-form-side {
  min-height: 100vh;
  padding: 28px clamp(28px, 4vw, 58px) 24px;
  background: transparent;
}

.ek-login-page .ek-auth-form-side::before {
  display: none;
}

.ek-login-page .ek-auth-form-card {
  max-width: 500px;
  padding: 21px 36px 15px;
  border: 1px solid rgba(148, 194, 231, 0.26);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(49, 87, 200, 0.1);
  backdrop-filter: blur(12px);
  animation: ek-login-card-in 0.65s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.ek-login-page .ek-auth-form-heading {
  margin-bottom: 13px;
}

.ek-login-page .ek-auth-form-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 21px;
}

.ek-login-page .ek-auth-form-heading h2 {
  margin: 8px 0 1px;
  color: #081451;
  font-size: 28px;
}

.ek-login-page .ek-auth-form-heading p {
  font-size: 13px;
}

.ek-login-page .ek-auth-form-card .form-label {
  margin-bottom: 5px;
  color: #0d1b5e;
  font-size: 11px;
}

.ek-login-page .ek-auth-form-card .form-control {
  min-height: 38px;
  border-color: #d2deec;
  border-radius: 7px;
  background: #fff;
  font-size: 11px;
}

.ek-login-page .ek-input-icon > i {
  font-size: 17px;
}

.ek-login-page .ek-captcha-box {
  min-height: 50px;
  padding: 4px 7px;
  border-radius: 7px;
  background: #fff;
}

.ek-login-page .ek-captcha-box img {
  height: 42px;
  border-radius: 5px;
}

.ek-login-page .form-check-label,
.ek-login-page .ek-auth-form-card a {
  font-size: 11px !important;
}

.ek-login-page #ekLoginForm > .mb-3 {
  margin-bottom: 11px !important;
}

.ek-login-page .ek-auth-form-card .alert {
  margin-bottom: 12px;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.45;
}

.ek-login-page .ek-auth-submit {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(90deg, #1457f0, #08b9df);
  box-shadow: 0 8px 18px rgba(20, 87, 240, 0.18);
  font-size: 12px;
  font-weight: 600;
}

.ek-login-page .ek-auth-security-note {
  margin-top: 11px;
  font-size: 9px;
}

.ek-login-page .ek-auth-modern-footer {
  margin-top: 9px;
  color: #7f8ca8;
  font-size: 9px;
}

@keyframes ek-login-node-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ek-login-node-pulse {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-3px);
    filter: brightness(1.08);
  }
}

@keyframes ek-login-connector-flow {
  to {
    background-position: 22px 0;
  }
}

@keyframes ek-login-capability-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ek-login-card-in {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ek-login-data-drift {
  from {
    transform: translate3d(0, 0, 0) rotate(var(--data-rotate, 0deg));
  }
  to {
    transform: translate3d(0, -10px, 0) rotate(var(--data-rotate, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ek-login-page *,
  .ek-login-page *::before,
  .ek-login-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .ek-login-page .ek-auth-shell {
    grid-template-columns: minmax(540px, 1.35fr) minmax(410px, 0.85fr);
  }
  .ek-login-page .ek-auth-visual-content {
    padding-inline: 42px;
  }
  .ek-login-progress {
    grid-template-columns: 62px 1fr 62px 1fr 62px 1fr 62px 1fr 62px;
  }
  .ek-login-progress article > span {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
  .ek-login-page .ek-auth-form-side {
    padding-inline: 24px;
  }
}

@media (max-width: 991.98px) {
  .ek-login-page .ek-auth-shell {
    display: block;
    background:
      radial-gradient(circle at 50% 5%, rgba(56, 167, 219, 0.22), transparent 34%),
      #eef7ff;
  }
  .ek-login-page .ek-auth-form-side {
    padding: 22px;
  }
  .ek-login-page .ek-auth-mobile-brand {
    margin-bottom: 24px;
  }
  .ek-login-page .ek-auth-form-card {
    padding: 25px 28px 22px;
  }
}

@media (max-width: 575.98px) {
  .ek-login-page .ek-auth-form-side {
    padding: 15px 12px;
  }
  .ek-login-page .ek-auth-mobile-brand {
    margin-bottom: 16px;
  }
  .ek-login-page .ek-auth-form-card {
    padding: 22px 18px 18px;
    border-radius: 14px;
  }
}

/* Notification badge and bulk-read action. */
#notificationButton {
  position: relative;
  overflow: visible;
}
#notificationCount.topbar-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 23px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}
#notificationCount.topbar-badge.d-none {
  display: none !important;
}
.ek-notification-item.is-read {
  background: #f8fafc;
  opacity: 0.72;
}
.ek-notification-item.is-read:hover {
  opacity: 1;
}
.ek-notification-footer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 -5px 14px rgba(15, 23, 42, 0.05);
}
.ek-notification-footer button {
  padding: 10px 12px;
  border: 0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ek-notification-footer button + button {
  border-left: 1px solid #e2e8f0;
}
.ek-notification-read-all {
  color: #16a36a;
}
.ek-notification-history-toggle {
  color: #2563eb;
}
.ek-notification-footer button:hover {
  background: #f8fafc;
}
.ek-notification-footer button:disabled {
  cursor: wait;
  color: #64748b;
}

/* Compact KPI-detail progress column with click-open analysis. */
.ek-detail-summary-main p {
  font-size: 10px;
  line-height: 1.35;
}
.ek-detail-grid th:nth-child(4) {
  width: 15%;
}
.ek-detail-grid th:nth-child(5),
.ek-detail-grid td:nth-child(5) {
  min-width: 320px;
}
.ek-progress-cell {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.ek-progress-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  text-align: left;
  cursor: pointer;
}
.ek-progress-trigger:hover,
.ek-progress-trigger:focus-visible,
.ek-progress-trigger[aria-expanded="true"] {
  background: #f1f5f9;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.ek-progress-trigger > strong {
  padding: 0 3px;
  color: #334155;
  font-size: 11px;
  white-space: nowrap;
}
.ek-progress-trigger > i:last-child {
  color: #2563eb;
  font-size: 14px;
}
.ek-progress-cell .ek-learning-status {
  padding: 4px 7px;
  font-size: 11px;
  white-space: nowrap;
}
.ek-progress-tooltip.is-clickable {
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: 310px;
  gap: 6px;
  padding: 12px;
  cursor: default;
}
.ek-progress-tooltip.is-clickable:before {
  position: absolute;
  top: -6px;
  left: 18px;
  width: 11px;
  height: 11px;
  border-top: 1px solid #dbeafe;
  border-left: 1px solid #dbeafe;
  background: #172033;
  content: "";
  transform: rotate(45deg);
}
.ek-progress-tooltip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.ek-progress-tooltip-head > strong {
  color: #fff;
  font-size: 13px;
}
.ek-progress-tooltip-head button {
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: #334155;
  color: #e2e8f0;
}
.ek-progress-tooltip-head button:hover,
.ek-progress-tooltip-head button:focus-visible {
  background: #475569;
  color: #fff;
  outline: 0;
}
@media (max-width: 767.98px) {
  .ek-progress-tooltip.is-clickable {
    position: static;
    width: min(310px, 100%);
    margin-top: 7px;
  }
  .ek-progress-tooltip.is-clickable:before {
    display: none;
  }
}

/* Two-line geography summary and content-sized progress column. */
.ek-grid-hierarchy-compact {
  gap: 5px;
}
.ek-grid-hierarchy-compact > span {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  column-gap: 5px;
  min-width: 0;
}
.ek-grid-hierarchy-compact small {
  display: none;
}
.ek-grid-hierarchy-compact i {
  grid-row: auto;
  font-size: 13px;
}
.ek-grid-hierarchy-compact strong {
  grid-column: 2;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-grid-hierarchy-compact strong em {
  display: inline;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}
.ek-detail-grid th:nth-child(2) {
  width: 15%;
}
.ek-detail-grid th:nth-child(4),
.ek-detail-grid td:nth-child(4) {
  width: 1%;
  min-width: 190px;
  max-width: 205px;
  white-space: nowrap;
}
.ek-progress-trigger {
  gap: 5px;
  padding: 2px;
}
.ek-progress-trigger > strong {
  font-size: 10.5px;
}
.ek-progress-cell .ek-learning-status {
  font-size: 10.5px;
}
@media (max-width: 1399.98px) {
  .ek-detail-grid td:nth-child(4) {
    width: auto;
    max-width: none;
    white-space: normal;
  }
}

/* Compact typography for the learner details grid. */
.ek-detail-grid th {
  padding: 9px 10px;
  font-size: 9px;
}
.ek-detail-grid td {
  padding: 10px;
  color: #475569;
  font-size: 10.5px;
  line-height: 1.32;
}
.ek-grid-user {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
}
.ek-grid-user > span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 13px;
}
.ek-grid-user strong {
  font-size: 11.5px;
}
.ek-grid-contact {
  gap: 3px;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.3;
}
.ek-grid-contact i {
  font-size: 11px;
}
.ek-grid-hierarchy-compact strong {
  font-size: 10.5px;
  line-height: 1.3;
}
.ek-grid-hierarchy-compact strong em {
  font-size: 10px;
}
.ek-grid-course {
  gap: 3px;
}
.ek-grid-course strong {
  font-size: 11px;
  line-height: 1.3;
}
.ek-grid-course > span {
  font-size: 10.5px;
  line-height: 1.3;
}
.ek-progress-trigger > strong {
  font-size: 9.5px;
}
.ek-progress-cell .ek-learning-status {
  padding: 3px 6px;
  font-size: 9.5px;
}
.ek-progress-trigger > i:last-child {
  font-size: 12px;
}
.ek-date-stack {
  gap: 5px;
}
.ek-date-stack > span {
  padding: 5px 6px;
  font-size: 9.5px;
  line-height: 1.25;
}
.ek-date-stack small {
  margin-bottom: 2px;
  font-size: 7.5px;
}
.ek-detail-grid th:nth-child(5),
.ek-detail-grid td:nth-child(5) {
  min-width: 292px;
}
.ek-grid-action {
  padding: 5px 7px;
  font-size: 9.5px;
}

/* Keep KPI labels inside their cards and stack progress level below status. */
.ek-kpi-tabs button {
  overflow: hidden;
  align-items: center;
}
.ek-kpi-tabs button > span:last-child {
  min-width: 0;
  overflow: hidden;
  flex: 1;
}
.ek-kpi-tabs small {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  max-width: none;
  min-height: 26px;
  font-size: 9px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ek-progress-trigger {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.ek-progress-level {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 4px;
  color: #475569;
  white-space: nowrap;
}
.ek-progress-level strong {
  font-size: 9.5px;
  font-weight: 700;
}
.ek-progress-level i {
  color: #2563eb;
  font-size: 12px;
}
.ek-detail-grid th:nth-child(4),
.ek-detail-grid td:nth-child(4) {
  min-width: 145px;
  max-width: 165px;
}

/* Fit important dates and keep row actions visible without horizontal scrolling. */
@media (min-width: 1400px) {
  .ek-detail-grid {
    table-layout: fixed;
  }
  .ek-detail-grid th:nth-child(1) {
    width: 19%;
  }
  .ek-detail-grid th:nth-child(2) {
    width: 15%;
  }
  .ek-detail-grid th:nth-child(3) {
    width: 21%;
  }
  .ek-detail-grid th:nth-child(4),
  .ek-detail-grid td:nth-child(4) {
    width: 12%;
    min-width: 0;
    max-width: none;
  }
  .ek-detail-grid th:nth-child(5),
  .ek-detail-grid td:nth-child(5) {
    width: 25%;
    min-width: 0;
  }
  .ek-detail-grid th:nth-child(6),
  .ek-detail-grid td:nth-child(6) {
    position: static;
    right: auto;
    width: auto;
    min-width: 0;
    background: inherit;
    box-shadow: none;
  }
  .ek-detail-grid th:nth-child(6) {
    z-index: auto;
    background: #f8fafc;
  }
  .ek-detail-grid tbody tr:hover td:nth-child(6) {
    background: inherit;
  }
}
.ek-date-stack {
  gap: 3px;
}
.ek-date-stack > span {
  min-width: 0;
  padding: 4px;
  font-size: 8.5px;
  line-height: 1.2;
}
.ek-date-stack small {
  margin-bottom: 1px;
  font-size: 6.5px;
  letter-spacing: 0;
}
.ek-grid-actions {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.ek-grid-action,
.ek-grid-action.is-pdf {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  overflow: hidden;
}
.ek-grid-action:hover,
.ek-grid-action:focus-visible,
.ek-grid-action.is-pdf:hover,
.ek-grid-action.is-pdf:focus-visible {
  border-color: #60a5fa;
  background: #dbeafe;
  color: #1d4ed8;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.ek-grid-action i {
  flex: 0 0 auto;
  font-size: 13px;
}
.ek-grid-action span {
  display: none !important;
}
.ek-grid-action.is-pdf {
  border-color: #fecaca;
  background: #fff1f2;
  color: #dc2626;
}
.ek-grid-action.is-pdf:hover,
.ek-grid-action.is-pdf:focus-visible {
  border-color: #f87171;
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* Readable learner-history report typography. */
.ek-history-person small {
  color: #1d4ed8;
  font-size: 9px;
  font-weight: 800;
}
.ek-history-person h5 {
  color: #0f172a;
  font-size: 17px;
  font-weight: 700;
}
.ek-history-person p {
  color: #475569;
  font-size: 10px;
  font-weight: 600;
}
.ek-history-timeline small {
  color: #475569;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.025em;
}
.ek-history-timeline strong {
  color: #1e293b;
  font-size: 10px;
  font-weight: 700;
}
.ek-history-timeline time {
  color: #526174;
  font-size: 9px;
  font-weight: 600;
}
.ek-history-card h6 {
  color: #1e293b;
  font-size: 12px;
  font-weight: 700;
}
.ek-history-card p {
  color: #526174;
  font-size: 9px;
  font-weight: 500;
}
.ek-history-detail-grid small {
  color: #526174;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.035em;
}
.ek-history-detail-grid strong {
  color: #1e293b;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.4;
}
.ek-history-course small,
.ek-history-level small {
  color: #526174;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.025em;
}
.ek-history-course strong {
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 700;
}
.ek-history-course p {
  color: #475569;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.4;
}
.ek-history-course em {
  font-weight: 600;
}
.ek-history-level span {
  font-size: 9px;
  font-weight: 800;
}
.ek-history-updated {
  color: #475569;
  font-size: 10px;
  font-weight: 600;
}

/* Milestone duration chart in the learner-history report. */
.ek-history-duration {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #fff;
}
.ek-history-duration > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ek-history-duration h6 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #1e293b;
  font-size: 11px;
  font-weight: 750;
}
.ek-history-duration h6 i {
  color: #2563eb;
  font-size: 15px;
}
.ek-history-duration header p {
  margin: 2px 0 0;
  color: #475569;
  font-size: 8.5px;
  font-weight: 650;
}
.ek-history-duration header > strong,
.ek-history-duration header > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 8.5px;
  font-weight: 800;
  white-space: nowrap;
}
.ek-history-duration header > span {
  background: #fff7ed;
  color: #b45309;
}
.ek-history-duration-chart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ek-history-duration-chart article {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #f8fafc;
}
.ek-duration-label {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.ek-duration-label > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: #dbeafe;
  color: #2563eb;
}
.ek-duration-label strong,
.ek-duration-label small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-duration-label strong {
  color: #1e293b;
  font-size: 9px;
  font-weight: 750;
}
.ek-duration-label small {
  margin-top: 1px;
  color: #64748b;
  font-size: 7.5px;
  font-weight: 550;
}
.ek-duration-label b {
  color: #1d4ed8;
  font-size: 10px;
  white-space: nowrap;
}
.ek-duration-track {
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #e2e8f0;
}
.ek-duration-track span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #2563eb, #38a7db);
}
.ek-history-duration-chart article.is-pending {
  border-style: dashed;
  background: #fff;
}
.ek-history-duration-chart article.is-pending .ek-duration-label > span {
  background: #f1f5f9;
  color: #94a3b8;
}
.ek-history-duration-chart article.is-pending .ek-duration-label b {
  color: #b45309;
}
.ek-level-duration-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #e2e8f0;
}
.ek-level-duration-heading strong {
  color: #1e293b;
  font-size: 9px;
  font-weight: 800;
}
.ek-level-duration-heading span {
  color: #475569;
  font-size: 8px;
  font-weight: 650;
}
.ek-level-duration-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 8px;
  padding: 9px 7px 8px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fbff, #f0fdfa);
}
.ek-level-duration-chart article {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
  padding: 0 7px;
}
.ek-level-duration-chart article:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: -9px;
  width: 20px;
  height: 8px;
  background: #cbd5e1;
  clip-path: polygon(0 32%, 68% 32%, 68% 0, 100% 50%, 68% 100%, 68% 68%, 0 68%);
  content: "";
}
.ek-level-duration-chart article.is-forward-complete:not(:last-child)::after {
  background: linear-gradient(90deg, #2563eb, #0ea5e9, #2563eb);
  background-size: 200% 100%;
  animation: ek-level-flow 1.8s linear infinite;
}
.ek-level-node {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 3px solid #dbeafe;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 0 0 3px #eff6ff;
}
.ek-level-node span {
  display: grid;
  place-items: center;
}
.ek-level-node i {
  font-size: 11px;
  font-weight: 800;
}
.ek-level-duration-content {
  min-width: 0;
}
.ek-level-duration-content > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.ek-level-duration-content strong {
  color: #172033;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.ek-level-duration-content b {
  padding: 2px 5px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
.ek-level-duration-content small {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  overflow: hidden;
  color: #475569;
  font-size: 6.8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-level-duration-content small i {
  flex: 0 0 auto;
  color: #0ea5e9;
  font-size: 8px;
}
.ek-level-duration-chart article.is-pending .ek-level-node {
  border-color: #e2e8f0;
  background: #fff;
  color: #94a3b8;
  box-shadow: 0 0 0 3px #f8fafc;
}
.ek-level-duration-chart article.is-pending .ek-level-duration-content b {
  background: #fff7ed;
  color: #b45309;
}
@keyframes ek-level-flow {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ek-level-duration-chart article.is-forward-complete::after {
    animation: none;
  }
}
@media (max-width: 767.98px) {
  .ek-history-duration-chart {
    grid-template-columns: 1fr;
  }
  .ek-level-duration-chart {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }
  .ek-level-duration-chart article::after {
    display: none;
  }
  .ek-history-duration > header {
    flex-direction: column;
  }
  .ek-level-duration-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Pending-user card identity and learner-history action. */
.ek-pending-user-card-head > .ek-pending-user-avatar {
  display: grid;
  align-items: center;
  justify-items: center;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.ek-pending-user-geography {
  display: flex !important;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  margin-top: 3px !important;
  color: #64748b !important;
  font-size: 8px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-pending-user-geography i {
  flex: 0 0 auto;
  color: #0891b2;
}
.ek-pending-user-geography b {
  font-weight: 750;
  text-transform: capitalize;
}

/* Consolidated master-data management */
.ek-master-page {
  padding-top: 18px;
}
.ek-master-page [ng-cloak] {
  display: none !important;
}
.ek-master-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.ek-master-hero-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  font-size: 25px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}
.ek-master-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 10px;
  color: #7b8ba5;
}
.ek-master-breadcrumb a {
  color: #2563eb;
  font-weight: 700;
}
.ek-master-hero h3 {
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 750;
}
.ek-master-hero p {
  margin: 2px 0 0;
  color: #71809b;
  font-size: 12px;
}
.ek-master-add {
  white-space: nowrap;
}
.ek-master-shell {
  overflow: hidden;
  border: 1px solid #e3eaf4;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}
.ek-master-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #f7f9fc;
}
.ek-master-summary button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dfe7f2;
  border-radius: 13px;
  background: #fff;
  text-align: left;
  transition: 0.18s ease;
}
.ek-master-summary button:before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 13px 0 0 13px;
  background: var(--tab-accent);
  content: "";
}
.ek-master-summary button:hover,
.ek-master-summary button.active {
  border-color: var(--tab-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.ek-master-summary button > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--tab-accent);
  background: color-mix(in srgb, var(--tab-accent) 10%, #fff);
  font-size: 18px;
}
.ek-master-summary small,
.ek-master-summary strong {
  display: block;
}
.ek-master-summary small {
  overflow: hidden;
  color: #60708a;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-master-summary strong {
  color: #14213a;
  font-size: 18px;
}
.ek-master-tabs {
  display: flex;
  overflow-x: auto;
  padding: 0 14px;
  border-bottom: 1px solid #e4ebf4;
  scrollbar-width: thin;
}
.ek-master-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #66758e;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.ek-master-tabs button.active {
  border-color: #2563eb;
  color: #1d4ed8;
}
.ek-master-tabs button span {
  padding: 1px 6px;
  border-radius: 20px;
  background: #eef3fb;
  font-size: 9px;
}
.ek-master-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 13px 14px;
  border-bottom: 1px solid #e4ebf4;
  background: #fbfcfe;
}
.ek-master-filter-field {
  min-width: 145px;
  flex: 0 1 180px;
}
.ek-master-filter-field .form-select {
  width: 100%;
  font-size: 11px;
}
.ek-master-filter-field .select2-container {
  width: 100% !important;
}
/* Select2 copies the source select's `form-select` class to its container.
   Prevent Bootstrap's native arrow from competing with Select2's controls. */
.ek-master-page .select2-container.form-select {
  padding: 0;
  border: 0;
  background: transparent none !important;
}
.ek-master-page .select2-container--default .select2-selection--single {
  min-height: 38px;
  border-color: #d0d7e2;
  border-radius: 6px;
}
.ek-master-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  padding-right: 58px;
}
.ek-master-page .select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute;
  top: 50%;
  right: 27px;
  z-index: 2;
  float: none;
  width: 18px;
  height: 22px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  line-height: 20px;
  text-align: center;
}
.ek-master-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: 1px;
  width: 22px;
  height: 36px;
}
.ek-master-filter-status {
  flex-basis: 145px;
}
.ek-master-search {
  position: relative;
  min-width: 240px;
  flex: 1 1 260px;
}
.ek-master-search i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: #8492a8;
}
.ek-master-search input {
  padding-left: 32px;
  font-size: 11px;
}
.ek-master-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid #e4ebf4;
}
.ek-master-grid-head h5 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  font-weight: 750;
}
.ek-master-grid-head span {
  color: #71809b;
  font-size: 10px;
}
.ek-master-grid-head label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #71809b;
  font-size: 10px;
}
.ek-master-grid-head select {
  width: 68px;
}
.ek-master-table {
  min-width: 900px;
  font-size: 11px;
}
.ek-master-table thead th {
  padding: 10px 12px;
  color: #52627b;
  background: #f7f9fc;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}
.ek-master-table tbody td {
  padding: 11px 12px;
  border-color: #edf1f6;
  color: #2d3b52;
  vertical-align: middle;
}
.ek-master-table td small {
  display: block;
  margin-top: 2px;
  color: #7b8aa1;
  font-size: 9px;
}
.ek-master-table td strong {
  color: #172033;
  font-weight: 700;
}
.ek-master-wrap {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-master-code {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid #d9e5f5;
  border-radius: 6px;
  color: #31547e;
  background: #f5f9ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 650;
}
.ek-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}
.ek-status-badge.is-active {
  color: #087a4b;
  background: #dcfce7;
}
.ek-status-badge.is-inactive {
  color: #a23b20;
  background: #fff0e9;
}
.ek-master-empty {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #8694a9;
  text-align: center;
}
.ek-master-empty i {
  font-size: 28px;
}
.ek-master-empty strong {
  color: #52627a;
}
.ek-master-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-top: 1px solid #e4ebf4;
  color: #71809b;
  font-size: 10px;
}
.ek-master-skeleton {
  padding: 10px 14px;
}
.ek-master-skeleton span {
  display: block;
  height: 43px;
  margin: 7px 0;
  border-radius: 9px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e7edf5 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: ek-master-shimmer 1.35s ease infinite;
}
@keyframes ek-master-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.ek-master-modal .modal-header small,
.ek-master-details .offcanvas-header small {
  color: #2563eb;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
}
.ek-master-modal .modal-header h5,
.ek-master-details .offcanvas-header h5 {
  margin: 2px 0 0;
  color: #172033;
  font-weight: 750;
}
.ek-master-modal .form-label {
  color: #44536b;
  font-size: 10px;
  font-weight: 700;
}
.ek-master-modal .form-label span {
  color: #dc2626;
}
.ek-master-details {
  width: min(430px, 100vw);
  z-index: 1060;
  background: #fff;
}
.ek-master-detail-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  color: #2563eb;
  background: #eaf2ff;
  font-size: 25px;
}
.ek-master-details dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  border: 1px solid #e3eaf4;
  border-radius: 12px;
  overflow: hidden;
}
.ek-master-details dl div {
  min-width: 0;
  padding: 11px;
  border-right: 1px solid #e9eef5;
  border-bottom: 1px solid #e9eef5;
}
.ek-master-details dt {
  color: #71809b;
  font-size: 8px;
  text-transform: uppercase;
}
.ek-master-details dd {
  margin: 2px 0 0;
  color: #24324a;
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.ek-master-mobile {
  padding: 10px;
}
.ek-master-mobile article {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #e3eaf4;
  border-radius: 12px;
}
.ek-master-mobile article > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ek-master-mobile article > div:first-child {
  justify-content: space-between;
}
.ek-master-mobile article strong {
  color: #172033;
}
.ek-master-mobile article p {
  margin: 7px 0;
  color: #67768e;
  font-size: 10px;
}
@media (max-width: 991.98px) {
  .ek-master-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ek-master-filter-field {
    flex: 1 1 145px;
  }
  .ek-master-hero {
    align-items: flex-start;
  }
  .ek-master-hero p {
    max-width: 560px;
  }
}
@media (max-width: 575.98px) {
  .ek-master-page {
    padding-top: 10px;
  }
  .ek-master-hero {
    flex-wrap: wrap;
  }
  .ek-master-hero-icon {
    width: 42px;
    height: 42px;
  }
  .ek-master-hero h3 {
    font-size: 18px;
  }
  .ek-master-add {
    width: 100%;
  }
  .ek-master-summary {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 9px;
  }
  .ek-master-summary button {
    padding: 9px;
  }
  .ek-master-summary button > span {
    width: 31px;
    height: 31px;
  }
  .ek-master-tabs {
    padding: 0 5px;
  }
  .ek-master-tabs button {
    padding: 11px;
  }
  .ek-master-filters {
    align-items: stretch;
  }
  .ek-master-search {
    min-width: 100%;
    flex-basis: 100%;
  }
  .ek-master-filter-field,
  .ek-master-filters > .btn {
    flex: 1 1 calc(50% - 5px);
  }
  .ek-master-grid-head {
    align-items: flex-end;
  }
  .ek-master-pagination {
    gap: 8px;
  }
  .ek-master-pagination .btn {
    font-size: 9px;
  }
}

/* Master-data filter workspace */
.ek-master-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.ek-master-filter-toggle > span {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: #2563eb;
  font-size: 10px;
}
.ek-master-filter-chips {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 9px 14px;
  border-bottom: 1px solid #e4ebf4;
  background: #f8fbff;
}
.ek-master-filter-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  color: #1e40af;
  background: #eff6ff;
  font-size: 10px;
  font-weight: 650;
}
.ek-master-filter-chips button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #1d4ed8;
  background: #dbeafe;
}
.ek-master-filters {
  display: block;
  max-height: 0;
  padding: 0 14px;
  overflow: hidden;
  opacity: 0;
  border-bottom-width: 0;
  transform: translateY(-5px);
  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    transform 0.18s ease,
    padding 0.22s ease;
}
.ek-master-filters.is-open {
  max-height: 330px;
  padding: 13px 14px;
  opacity: 1;
  border-bottom-width: 1px;
  transform: none;
}
.ek-master-filters > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}
.ek-master-filters > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1d4ed8;
}
.ek-master-filters > header > div > i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #eaf2ff;
  font-size: 17px;
}
.ek-master-filters > header span,
.ek-master-filters > header strong,
.ek-master-filters > header small {
  display: block;
}
.ek-master-filters > header strong {
  color: #172033;
  font-size: 12px;
}
.ek-master-filters > header small {
  color: #71809b;
  font-size: 9px;
  font-weight: 500;
}
.ek-master-filter-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #64748b;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}
.ek-master-filter-close:hover {
  color: #dc2626;
  background: #fef2f2;
}
.ek-master-filter-close:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.ek-master-filter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ek-master-filters > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #e4ebf4;
}
.ek-master-table .text-warning {
  font-weight: 700;
}
.ek-master-table td[title] {
  cursor: help;
}
.ek-master-table tbody tr:hover {
  background: #fbfdff;
}
.ek-master-table .btn:focus-visible,
.ek-master-tabs button:focus-visible,
.ek-master-summary button:focus-visible,
.ek-master-filter-chips button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Keep every Master Data KPI visible in one polished row. */
.ek-master-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow-x: auto;
  scrollbar-width: thin;
}
.ek-master-summary button {
  overflow: hidden;
  background: linear-gradient(145deg, #fff 35%, color-mix(in srgb, var(--tab-accent) 6%, #fff));
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.055);
  animation: ek-master-card-enter 0.35s both ease-out;
}
.ek-master-summary button:nth-child(2) {
  animation-delay: 0.04s;
}
.ek-master-summary button:nth-child(3) {
  animation-delay: 0.08s;
}
.ek-master-summary button:nth-child(4) {
  animation-delay: 0.12s;
}
.ek-master-summary button:nth-child(5) {
  animation-delay: 0.16s;
}
.ek-master-summary button::after {
  position: absolute;
  inset: -70% -25%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.75) 50%, transparent 58%);
  transform: translateX(-75%) rotate(8deg);
  transition: transform 0.5s ease;
  content: "";
  pointer-events: none;
}
.ek-master-summary button:hover::after {
  transform: translateX(75%) rotate(8deg);
}
.ek-master-summary button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px color-mix(in srgb, var(--tab-accent) 14%, transparent);
}
.ek-master-summary button.active {
  background: linear-gradient(145deg, color-mix(in srgb, var(--tab-accent) 10%, #fff), #fff);
}
@keyframes ek-master-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1199.98px) {
  .ek-master-summary {
    display: flex;
  }
  .ek-master-summary button {
    min-width: 210px;
    flex: 1 0 210px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ek-master-summary button {
    animation: none;
  }
  .ek-master-summary button::after {
    display: none;
  }
  .ek-master-summary button:hover {
    transform: none;
  }
}
.ek-master-pagination nav {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ek-master-page-number {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid #dbe4ef;
  border-radius: 7px;
  background: #fff;
  color: #475569;
  font-size: 10px;
  font-weight: 750;
}
.ek-master-page-number:hover,
.ek-master-page-number:focus-visible {
  border-color: #93c5fd;
  color: #1d4ed8;
  outline: 0;
}
.ek-master-page-number.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
@media (max-width: 575.98px) {
  .ek-master-pagination nav .btn span {
    display: none;
  }
  .ek-master-pagination nav {
    gap: 3px;
  }
  .ek-master-page-number {
    min-width: 27px;
    height: 27px;
  }
}
.ek-master-tab-stats {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid #e4ebf4;
  background: #fbfcfe;
}
.ek-master-tab-stats > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 88px;
  padding: 6px 9px;
  border: 1px solid #dfe7f2;
  border-radius: 9px;
  background: #fff;
}
.ek-master-tab-stats small {
  color: #71809b;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}
.ek-master-tab-stats strong {
  margin-left: auto;
  color: #172033;
  font-size: 12px;
}
.ek-master-tab-stats .is-active {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.ek-master-tab-stats .is-active strong {
  color: #087a4b;
}
.ek-master-tab-stats .is-inactive {
  border-color: #fed7cc;
  background: #fff7f4;
}
.ek-master-tab-stats .is-inactive strong {
  color: #b7462b;
}
.ek-master-tab-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0;
  padding: 9px 11px;
  font-size: 10px;
}
@media (max-width: 575.98px) {
  .ek-master-hero > div:last-child {
    width: 100%;
  }
  .ek-master-hero > div:last-child .btn {
    flex: 1;
  }
  .ek-master-filters.is-open {
    max-height: 560px;
  }
  .ek-master-filter-controls {
    align-items: stretch;
  }
  .ek-master-filter-controls .ek-master-filter-field {
    flex: 1 1 100%;
  }
  .ek-master-filters > footer .btn {
    flex: 1;
  }
  .ek-master-grid-head > div:last-child {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.ek-pending-user-status > span {
  flex: 1;
  min-width: 0;
}
.ek-pending-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ek-pending-history-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #bae6fd;
  border-radius: 7px;
  background: #ecfeff;
  color: #0e7490;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}
.ek-pending-history-button i {
  color: inherit;
}
.ek-pending-history-button:hover,
.ek-pending-history-button:focus-visible {
  border-color: #38bdf8;
  background: #e0f2fe;
  color: #0369a1;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}
.ek-pending-history-button.is-pdf {
  border-color: #fecaca;
  background: #fff1f2;
  color: #dc2626;
}
.ek-pending-history-button.is-pdf:hover,
.ek-pending-history-button.is-pdf:focus-visible {
  border-color: #f87171;
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}
.ek-pending-history-button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.ek-history-backdrop {
  z-index: 1060;
}

/* Group-wise geographical master report */
.ek-master-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ek-master-summary button:nth-child(6) {
  animation-delay: 0.2s;
}
.ek-master-summary button.is-group-wise small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.15;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ek-master-summary button.is-group-wise > div {
  min-width: 0;
}
.ek-master-grid-head .btn {
  font-weight: 750;
}
.ek-master-grid-head .btn i {
  font-weight: 800;
}
.ek-geo-report {
  padding: 13px;
  background: #f7f9fc;
}
.ek-geo-kpis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 12px;
}
.ek-geo-kpis article {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #dfe8f2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.035);
}
.ek-geo-kpis article > i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 8px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 14px;
}
.ek-geo-kpis article > span,
.ek-geo-kpis small,
.ek-geo-kpis strong {
  display: block;
}
.ek-geo-kpis article > span {
  min-width: 0;
  color: #52627a;
  font-size: 9px;
  font-weight: 750;
}
.ek-geo-kpis strong {
  margin-top: 2px;
  color: #172033;
  font:
    800 15px Lexend,
    sans-serif;
}
.ek-geo-kpis .is-active > i {
  background: #dcfce7;
  color: #087a4b;
}
.ek-geo-kpis .is-inactive > i {
  background: #fff0e9;
  color: #a23b20;
}
.ek-geo-kpis .is-warning > i {
  background: #fff7ed;
  color: #c2410c;
}
.ek-geo-tree {
  display: grid;
  gap: 9px;
}
.ek-geo-district {
  overflow: hidden;
  border: 1px solid #dbe5f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  animation: ek-master-card-enter 0.24s ease-out both;
}
.ek-geo-district-head,
.ek-geo-block-head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 0;
  background: linear-gradient(100deg, #eef6ff, #fff);
  color: #2563eb;
  text-align: left;
}
.ek-geo-district-head:hover,
.ek-geo-district-head:focus-visible,
.ek-geo-block-head:hover,
.ek-geo-block-head:focus-visible {
  background: #eaf3ff;
  outline: 2px solid #93c5fd;
  outline-offset: -2px;
}
.ek-geo-district-head > .ti-map-pin,
.ek-geo-block-head > .ti-map-2 {
  font-size: 19px;
}
.ek-geo-toggle {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.ek-geo-title {
  display: grid;
  grid-template-columns: auto auto;
  min-width: 0;
  align-items: baseline;
  gap: 0 7px;
}
.ek-geo-title small {
  grid-column: 1/-1;
  color: #65758d;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ek-geo-title strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-geo-title em {
  color: #53647d;
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
}
.ek-geo-metrics {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.ek-geo-metrics b {
  min-width: 76px;
  padding: 6px 8px;
  border: 1px solid #d9e6f5;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.ek-geo-metrics small {
  color: #475569;
  font-size: 8px;
  font-weight: 800;
}
.ek-geo-block-list {
  position: relative;
  padding: 10px 10px 10px 32px;
  background: #fbfdff;
}
.ek-geo-block-list::before {
  position: absolute;
  top: 0;
  bottom: 14px;
  left: 20px;
  width: 2px;
  background: #bfdbfe;
  content: "";
}
.ek-geo-block {
  position: relative;
  margin-bottom: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.ek-geo-block::before {
  position: absolute;
  top: 23px;
  left: -13px;
  width: 13px;
  height: 2px;
  background: #bfdbfe;
  content: "";
}
.ek-geo-block-head {
  padding: 8px 10px;
  background: linear-gradient(100deg, #f0fdfa, #fff);
  color: #0891b2;
}
.ek-geo-block-head .ek-geo-toggle {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}
.ek-geo-block-head .ek-geo-title strong {
  font-size: 10.5px;
}
.ek-geo-block-head .ek-geo-metrics b {
  min-width: 70px;
  color: #0e7490;
}
.ek-geo-block-list,
.ek-geo-facilities {
  animation: ek-geo-reveal 0.2s ease-out both;
}
.ek-geo-facilities {
  padding: 7px 8px 8px;
  border-top: 1px solid #edf2f7;
}
.ek-geo-facility {
  display: grid;
  grid-template-columns: 30px minmax(145px, 1.1fr) minmax(125px, 0.8fr) minmax(180px, 1.35fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #edf2f7;
  color: #475569;
}
.ek-geo-facility:last-child {
  border-bottom: 0;
}
.ek-geo-facility:hover {
  border-radius: 8px;
  background: #f8fbff;
}
.ek-geo-facility-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #dcfce7;
  color: #087a4b;
}
.ek-geo-facility-name,
.ek-geo-type,
.ek-geo-address {
  display: block;
  min-width: 0;
}
.ek-geo-facility small,
.ek-geo-facility strong,
.ek-geo-facility em,
.ek-geo-facility b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-geo-facility small {
  color: #65758d;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ek-geo-facility strong,
.ek-geo-facility b {
  color: #25324a;
  font-size: 9px;
}
.ek-geo-type b {
  display: inline-block;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490;
}
.ek-geo-facility em {
  margin-top: 1px;
  color: #53647d;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 650;
}
.ek-geo-warning {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 7px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 7.5px;
  font-weight: 750;
}
.ek-geo-loading,
.ek-geo-empty-block {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #71809b;
  font-size: 9px;
}
.ek-geo-empty-block i {
  font-size: 16px;
}
@keyframes ek-geo-reveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ek-geo-export .modal-header p {
  margin: 3px 0 0;
  color: #52627a;
  font-size: 9px;
  font-weight: 650;
}
.ek-geo-export fieldset + fieldset {
  margin-top: 17px;
}
.ek-geo-export legend {
  margin-bottom: 8px;
  color: #334155;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ek-geo-format {
  display: grid;
  grid-template-columns: 18px 35px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  padding: 10px;
  border: 1px solid #dfe7f2;
  border-radius: 10px;
  cursor: pointer;
}
.ek-geo-format.active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
.ek-geo-format > i {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 9px;
  background: #dcfce7;
  color: #087a4b;
  font-size: 18px;
}
.ek-geo-format.is-pdf > i {
  background: #fff1f2;
  color: #dc2626;
}
.ek-geo-format strong,
.ek-geo-format small {
  display: block;
}
.ek-geo-format strong {
  color: #172033;
  font-size: 10px;
}
.ek-geo-format small {
  margin-top: 2px;
  color: #52627a;
  font-size: 8px;
  font-weight: 650;
}
.ek-geo-export-total {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #bae6fd;
  border-radius: 9px;
  background: #ecfeff;
  color: #0e7490;
}
.ek-geo-export-total > i {
  font-size: 20px;
}
.ek-geo-export-total span,
.ek-geo-export-total strong {
  display: block;
}
.ek-geo-export-total span {
  font-size: 8px;
  font-weight: 700;
}
.ek-geo-export-total strong {
  margin-top: 2px;
  color: #164e63;
  font-size: 9px;
}
@media (max-width: 1199.98px) {
  .ek-geo-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ek-geo-facility {
    grid-template-columns: 30px 1fr 1fr auto;
  }
  .ek-geo-address {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .ek-geo-report {
    padding: 8px;
  }
  .ek-geo-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ek-geo-district-head,
  .ek-geo-block-head {
    align-items: flex-start;
  }
  .ek-geo-metrics {
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
  }
  .ek-geo-metrics b {
    min-width: 58px;
    padding: 3px 5px;
  }
  .ek-geo-block-list {
    padding-left: 22px;
  }
  .ek-geo-block-list::before {
    left: 12px;
  }
  .ek-geo-block::before {
    left: -11px;
    width: 11px;
  }
  .ek-geo-facility {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px;
  }
  .ek-geo-type {
    grid-column: 2;
  }
  .ek-geo-facility > .ek-status-badge {
    grid-column: 3;
    grid-row: 1;
  }
  .ek-geo-warning {
    grid-column: 3;
    grid-row: 2;
  }
  .ek-master-grid-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .ek-master-grid-head > div:last-child {
    justify-content: flex-start !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ek-geo-district,
  .ek-geo-block-list,
  .ek-geo-facilities {
    animation: none;
  }
}
.ek-geo-metrics b.is-active {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #087a4b;
}
.ek-geo-metrics b.is-inactive {
  border-color: #fed7cc;
  background: #fff7f4;
  color: #b7462b;
}
.ek-geo-district-head.is-search-match,
.ek-geo-block-head.is-search-match,
.ek-geo-facility.is-search-match {
  box-shadow: inset 4px 0 #f59e0b;
  background: #fffbeb;
}
/* Application Users */
.ek-users-heading {
  margin-bottom: 1rem;
}
.ek-users-heading-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #fff;
  font-size: 25px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
}
.ek-user-filter-panel {
  border: 1px solid #dbe5f2;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.ek-user-filter-panel .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fbff;
}
.ek-user-filter-panel .form-label {
  color: #334155;
  font-weight: 650;
}
.ek-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0 0.8rem;
}
.ek-filter-chip {
  padding: 0.32rem 0.65rem;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 650;
}
.ek-user-subtext {
  color: #53647c !important;
  font-size: 0.76rem;
  font-weight: 550;
}
.ek-user-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
}
.ek-user-actions > .btn,
.ek-user-actions > .dropdown > .btn {
  min-width: 36px;
  height: 36px;
  border-radius: 9px;
}
.ek-user-actions .dropdown-menu {
  min-width: 190px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.14);
}
.ek-user-create-modal .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}
.ek-user-create-modal .modal-header {
  background: linear-gradient(90deg, #eff6ff, #f0fdfa);
}
.ek-form-section {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #fff;
}
.ek-form-section h6 {
  padding-bottom: 0.65rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid #e8eef6;
  color: #1e3a5f;
  font-weight: 700;
}
.ek-sticky-modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.05);
}
@media (max-width: 767.98px) {
  .ek-users-heading .btn {
    flex: 1;
  }
  .ek-user-filter-panel .card-body {
    padding: 0.85rem;
  }
  .ek-user-create-modal {
    margin: 0.5rem;
  }
  .ek-sticky-modal-footer {
    flex-wrap: wrap;
  }
  .ek-sticky-modal-footer .btn {
    flex: 1;
  }
}

.ek-comparison-toolbar { border: 1px solid #dbe5f2; border-radius: 16px; box-shadow: 0 8px 24px rgba(30, 58, 95, .05); }
.ek-comparison-toolbar .form-label { font-size: .76rem; font-weight: 700; color: #53647c; }
.ek-comparison-empty { padding: 4rem 1rem; text-align: center; border: 1px dashed #cbd8e8; border-radius: 16px; background: linear-gradient(135deg, #f8fbff, #f4fbfa); }
.ek-comparison-empty i { display: block; margin-bottom: .75rem; color: var(--ek-analytics-primary, #3157c8); font-size: 2.5rem; }
.ek-comparison-empty h5 { color: #1e3a5f; }
.ek-comparison-district-card { overflow: hidden; border: 1px solid #dbe5f2; border-radius: 16px; box-shadow: 0 10px 28px rgba(30, 58, 95, .07); }
.ek-comparison-card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; background: linear-gradient(110deg, #eff6ff, #f0fdfa); border-bottom: 1px solid #dbe5f2; }
.ek-comparison-card-header h5 { margin: .15rem 0 0; color: #1e3a5f; font-weight: 700; }
.ek-comparison-label { color: #3157c8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ek-comparison-number { color: #3157c8; font-size: 1.4rem; font-weight: 800; opacity: .25; }
.ek-comparison-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ek-comparison-kpi-strip .ek-analytics-kpi { min-height: 94px; }
.ek-comparison-card-error { padding: 2rem 1rem; color: #b42318; text-align: center; background: #fff7f5; border-radius: 10px; }
.ek-comparison-card-error i { margin-right: .4rem; }
.ek-comparison-sections { display: grid; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e8eef6; }
.ek-comparison-sections .ek-analytic-panel { min-width: 0; }
.ek-comparison-sections .ek-analytic-panel header { min-height: 62px; }
.ek-comparison-sections .ek-chart-box { min-height: 250px; }
.ek-comparison-sections .ek-chart-box canvas { min-height: 220px; }
.ek-filter-drawer .select2-selection__choice__remove,
.ek-filter-drawer .select2-selection__clear { display: none !important; }
.ek-filter-drawer .select2-container--default .select2-selection--multiple {
  min-height: 34px;
  padding: 2px 4px !important;
}
.ek-filter-drawer .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 4px);
  align-items: center;
  margin: 1px 4px 1px 0;
  padding: 2px 5px !important;
  line-height: 1.25;
  box-sizing: border-box;
  min-width: 0;
}
.ek-filter-drawer .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-filter-drawer .select2-container,
.ek-filter-drawer .select2-container--default .select2-selection--multiple {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.ek-filter-drawer .select2-container--default .select2-selection--multiple {
  overflow: hidden;
}
.ek-filter-drawer .select2-container--default .select2-selection--multiple {
  height: auto;
  min-height: 34px;
  overflow: visible;
}
.ek-filter-drawer .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}
.ek-filter-drawer .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ek-filter-drawer .select2-container--default .select2-selection--multiple .select2-search--inline {
  min-width: 32px;
  max-width: 100%;
}
@media (max-width: 575.98px) { .ek-comparison-kpi-strip { grid-template-columns: 1fr; } }