/*!
 * PhilHealth YAKAP interface theme
 *
 * Layered on top of Bootstrap 5.3. Only overrides and additions live here so
 * the upstream library stays easy to reason about.
 *
 * Design notes
 * ------------
 * The application is used for long stretches at a time, often on older
 * desktop monitors in brightly lit rooms. The palette therefore favours calm
 * contrast over decoration: a deep teal-navy rail, a near-white canvas, and
 * one accent colour reserved for the thing to do next.
 *
 * Two conventions are load-bearing:
 *
 *   1. Colour is expressed as custom properties defined once in :root and
 *      again in the dark block. A component that hard-codes a hex value is a
 *      component that breaks when the theme changes, so components read
 *      variables.
 *
 *   2. `.ek-form-control` and `.ek-form-select` are complete controls, not
 *      decorations on top of Bootstrap's `.form-control`. Most of the legacy
 *      screens use them on their own; before this layer styled them in full
 *      they rendered with the browser's default 2px bevel.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
    /* Brand: a clinical teal. Dark enough for white text on a button,
       saturated enough to read as "active" against the neutral chrome. */
    --ek-primary: #0f766e;
    --ek-primary-rgb: 15, 118, 110;
    --ek-primary-dark: #115e59;
    --ek-primary-dark-rgb: 17, 94, 89;
    --ek-primary-soft: #e7f4f2;
    --ek-accent: #14b8a6;
    --ek-accent-rgb: 20, 184, 166;

    /* Neutrals */
    --ek-ink: #0f172a;
    --ek-ink-2: #334155;
    --ek-muted: #64748b;
    --ek-line: #e2e8f0;
    --ek-line-strong: #cbd5e1;
    --ek-surface: #ffffff;
    --ek-surface-2: #f8fafc;
    --ek-surface-3: #f1f5f9;
    --ek-canvas: #f4f7f9;

    /* Status */
    --ek-success: #15803d;
    --ek-success-soft: #f0fdf4;
    --ek-success-line: #bbf7d0;
    --ek-warning: #b45309;
    --ek-warning-soft: #fffbeb;
    --ek-warning-line: #fde68a;
    --ek-danger: #b91c1c;
    --ek-danger-soft: #fef2f2;
    --ek-danger-line: #fecaca;
    --ek-info: #0369a1;
    --ek-info-soft: #eff6ff;
    --ek-info-line: #bfdbfe;

    /* Geometry */
    --ek-sidebar-width: 16.5rem;
    --ek-topbar-height: 4rem;
    --ek-radius: 0.75rem;
    --ek-radius-sm: 0.5rem;
    --ek-radius-xs: 0.375rem;

    /* Elevation */
    --ek-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ek-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --ek-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 20px -8px rgba(15, 23, 42, 0.12);
    --ek-shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.28);

    /* Bootstrap bridge. Re-pointing these keeps components we do not
       restyle (dropdowns, modals, plain .form-control) on the same palette. */
    --bs-primary: var(--ek-primary);
    --bs-primary-rgb: var(--ek-primary-rgb);
    --bs-body-color: var(--ek-ink);
    --bs-body-bg: var(--ek-surface);
    --bs-secondary-color: var(--ek-muted);
    --bs-tertiary-bg: var(--ek-surface-2);
    --bs-border-color: var(--ek-line);
    --bs-link-color: var(--ek-primary);
    --bs-link-hover-color: var(--ek-primary-dark);
    --bs-emphasis-color: var(--ek-ink);
    --bs-border-radius: var(--ek-radius-sm);
    --bs-border-radius-sm: var(--ek-radius-xs);
    --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --ek-primary: #2dd4bf;
    --ek-primary-rgb: 45, 212, 191;
    --ek-primary-dark: #5eead4;
    --ek-primary-dark-rgb: 94, 234, 212;
    --ek-primary-soft: rgba(45, 212, 191, 0.13);
    --ek-accent: #2dd4bf;
    --ek-accent-rgb: 45, 212, 191;

    --ek-ink: #e8eef7;
    --ek-ink-2: #cbd5e1;
    --ek-muted: #94a3b8;
    --ek-line: #223044;
    --ek-line-strong: #334155;
    --ek-surface: #111a27;
    --ek-surface-2: #16202f;
    --ek-surface-3: #1b2738;
    --ek-canvas: #0b1220;

    --ek-success: #4ade80;
    --ek-success-soft: rgba(34, 197, 94, 0.12);
    --ek-success-line: rgba(74, 222, 128, 0.3);
    --ek-warning: #fbbf24;
    --ek-warning-soft: rgba(251, 191, 36, 0.12);
    --ek-warning-line: rgba(251, 191, 36, 0.3);
    --ek-danger: #f87171;
    --ek-danger-soft: rgba(248, 113, 113, 0.12);
    --ek-danger-line: rgba(248, 113, 113, 0.32);
    --ek-info: #60a5fa;
    --ek-info-soft: rgba(96, 165, 250, 0.12);
    --ek-info-line: rgba(96, 165, 250, 0.32);

    --ek-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --ek-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --ek-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
    --ek-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.75);

    --bs-body-color: var(--ek-ink);
    --bs-body-bg: var(--ek-surface);
    --bs-secondary-color: var(--ek-muted);
    --bs-tertiary-bg: var(--ek-surface-2);
    --bs-border-color: var(--ek-line);
    --bs-emphasis-color: #f8fafc;
    --bs-link-color: var(--ek-primary);
    --bs-link-hover-color: var(--ek-primary-dark);
}

/* A dark button needs dark text: white on #2dd4bf is 1.8:1. */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #042f2e;
    --bs-btn-hover-color: #042f2e;
    --bs-btn-active-color: #042f2e;
    --bs-btn-disabled-color: #042f2e;
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--bs-body-font-family);
    background-color: var(--ek-canvas);
    color: var(--ek-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.9375rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.011em;
}

p {
    margin-bottom: 0.75rem;
}

hr {
    border-color: var(--ek-line);
    opacity: 1;
}

::selection {
    background: rgba(var(--ek-primary-rgb), 0.18);
}

/* The legacy app loaded four different jQuery builds at once and hid every
   error with error_reporting(0). Visible focus rings matter more here. */
a,
button,
.form-control,
.form-select,
.form-check-input,
.nav-link {
    outline-offset: 2px;
}

:focus-visible {
    outline: 3px solid rgba(var(--ek-accent-rgb), 0.55);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.ek-skip-link {
    position: absolute;
    left: 0.75rem;
    top: -3rem;
    z-index: 2000;
    padding: 0.5rem 0.9rem;
    background: var(--ek-primary);
    color: #fff;
    border-radius: var(--ek-radius-xs);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

.ek-skip-link:focus {
    top: 0.75rem;
    color: #fff;
}

/* ------------------------------------------------------------------ *
 * 3. Shell and sidebar
 * ------------------------------------------------------------------ */

.ek-shell {
    min-height: 100vh;
}

.ek-sidebar {
    width: var(--ek-sidebar-width);
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(45, 212, 191, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, #0c2129 0%, #0a1a21 100%);
    color: #cfe0e5;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ek-sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.ek-sidebar__brand {
    height: var(--ek-topbar-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ek-sidebar__brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: linear-gradient(140deg, var(--ek-accent) 0%, #0d9488 100%);
    color: #042f2e;
    display: grid;
    place-items: center;
    font-size: 1.0625rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(20, 184, 166, 0.55);
}

.ek-sidebar__brand-text {
    line-height: 1.15;
    min-width: 0;
}

.ek-sidebar__brand-title {
    color: #fff;
    font-weight: 650;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}

.ek-sidebar__brand-sub {
    color: #7fa3ae;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.ek-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.875rem 0.75rem 1.5rem;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.ek-sidebar__nav::-webkit-scrollbar {
    width: 6px;
}

.ek-sidebar__nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

.ek-sidebar__section {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6e93a0;
    padding: 0.75rem 0.75rem 0.4375rem;
    font-weight: 700;
}

.ek-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5625rem 0.75rem;
    border-radius: var(--ek-radius-sm);
    color: #c3d8de;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 0.125rem;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ek-sidebar__link i {
    font-size: 1.0625rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.8;
}

.ek-sidebar__link:hover,
.ek-sidebar__link:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.ek-sidebar__link.is-active {
    background: rgba(20, 184, 166, 0.16);
    color: #ffffff;
    font-weight: 550;
}

.ek-sidebar__link.is-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.4375rem;
    bottom: 0.4375rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ek-accent);
}

.ek-sidebar__link.is-active i {
    opacity: 1;
    color: #5eead4;
}

/* Nested report links: a quiet rail makes the hierarchy legible without
   indenting them into invisibility. */
.ek-sidebar__sub {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.ek-sidebar__sub .ek-sidebar__link {
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
    font-size: 0.8125rem;
    color: #a8c4cc;
}

.ek-sidebar__sub .ek-sidebar__link.is-active {
    color: #fff;
}

/* Modules that exist in the menu but have not been migrated yet. Kept
   visible so the full scope is apparent, but clearly not clickable. */
.ek-sidebar__link.is-disabled,
.ek-sidebar__link.is-disabled:hover {
    color: #647f89;
    cursor: not-allowed;
    background: transparent;
}

.ek-sidebar__link.is-disabled i {
    opacity: 0.4;
}

.ek-sidebar__badge {
    margin-left: auto;
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.08);
    color: #8fadb6;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
}

.ek-sidebar__footer {
    padding: 0.875rem 1.125rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    color: #7f9ea8;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ek-sidebar__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ek-sidebar__status::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
}

.ek-main {
    margin-left: var(--ek-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ek-canvas);
}

/* ------------------------------------------------------------------ *
 * 4. Top bar
 * ------------------------------------------------------------------ */

.ek-topbar {
    height: var(--ek-topbar-height);
    background: var(--ek-surface);
    background: color-mix(in srgb, var(--ek-surface) 86%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--ek-line);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0 1.375rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.ek-topbar__crumb {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    color: var(--ek-muted);
    min-width: 0;
}

.ek-topbar__crumb a {
    color: var(--ek-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ek-topbar__crumb a:hover {
    color: var(--ek-primary);
}

.ek-topbar__crumb .bi {
    font-size: 0.6875rem;
    opacity: 0.55;
}

.ek-topbar__crumb-current {
    color: var(--ek-ink);
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ek-topbar__spacer {
    flex: 1 1 auto;
}

.ek-topbar__facility {
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 0.875rem;
    border-right: 1px solid var(--ek-line);
}

.ek-icon-btn {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 2.375rem;
    height: 2.375rem;
    display: inline-grid;
    place-items: center;
    border-radius: var(--ek-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ek-muted);
    font-size: 1.0625rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ek-icon-btn:hover {
    background: var(--ek-surface-3);
    border-color: var(--ek-line);
    color: var(--ek-ink);
}

/* The correct icon is selected in CSS, so it is right on the first paint
   rather than after the deferred script runs. */
.ek-theme-icon-dark {
    display: none;
}

[data-bs-theme="dark"] .ek-theme-icon-light {
    display: none;
}

[data-bs-theme="dark"] .ek-theme-icon-dark {
    display: inline-block;
}

.ek-user-menu {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.3125rem 0.375rem 0.3125rem 0.375rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    color: var(--ek-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ek-user-menu:hover,
.ek-user-menu[aria-expanded="true"] {
    background: var(--ek-surface-2);
    border-color: var(--ek-line);
}

.ek-user-menu__avatar {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--ek-primary) 0%, #14b8a6 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.ek-user-menu__name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ek-user-menu__role {
    font-size: 0.6875rem;
    color: var(--ek-muted);
    line-height: 1.3;
}

/* ------------------------------------------------------------------ *
 * 5. Page content and header
 * ------------------------------------------------------------------ */

.ek-content {
    padding: 1.5rem 1.5rem 2rem;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    .ek-content {
        padding: 1rem 1rem 1.5rem;
    }
}

.ek-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.375rem;
}

.ek-page-head__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ek-primary);
    margin-bottom: 0.3125rem;
}

.ek-page-title {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.022em;
    line-height: 1.2;
    margin: 0;
}

.ek-page-subtitle {
    color: var(--ek-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
    max-width: 62rem;
}

.ek-page-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.125rem;
}

.ek-footer {
    padding: 0.875rem 1.5rem;
    color: var(--ek-muted);
    border-top: 1px solid var(--ek-line);
    font-size: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    background: var(--ek-surface);
}

/* ------------------------------------------------------------------ *
 * 6. Cards
 * ------------------------------------------------------------------ */

.ek-card {
    background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius);
    box-shadow: var(--ek-shadow-xs);
    overflow: clip;
}

.ek-card--raised {
    box-shadow: var(--ek-shadow-sm);
}

.ek-card__header {
    padding: 0.9375rem 1.25rem;
    border-bottom: 1px solid var(--ek-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    background: var(--ek-surface);
}

.ek-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 650;
    margin: 0;
    letter-spacing: -0.008em;
}

.ek-card__title .bi {
    font-size: 1rem;
    color: var(--ek-primary);
    opacity: 0.9;
}

.ek-card__subtitle {
    font-size: 0.75rem;
    color: var(--ek-muted);
    margin: 0.125rem 0 0;
}

.ek-card__body {
    padding: 1.25rem;
}

.ek-card__body + .ek-card__body {
    border-top: 1px solid var(--ek-line);
}

.ek-card__footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--ek-line);
    background: var(--ek-surface-2);
}

/* Bootstrap .card, used by the older report screens. Give it the same
   silhouette so the application does not look like two applications. */
.card {
    --bs-card-border-color: var(--ek-line);
    --bs-card-border-radius: var(--ek-radius);
    --bs-card-bg: var(--ek-surface);
    --bs-card-cap-bg: var(--ek-surface);
    box-shadow: var(--ek-shadow-xs);
}

.card > .card-header {
    border-bottom-color: var(--ek-line);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.9375rem 1.25rem;
}

.card > .card-header .bi {
    color: var(--ek-primary);
}

.card > .card-body {
    padding: 1.25rem;
}

/* ------------------------------------------------------------------ *
 * 7. Stat tiles
 * ------------------------------------------------------------------ */

.ek-stat {
    --ek-stat-tone: var(--ek-primary);
    --ek-stat-tone-soft: var(--ek-primary-soft);
    background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius);
    padding: 1.125rem 1.25rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    box-shadow: var(--ek-shadow-xs);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    color: inherit;
    text-decoration: none;
}

a.ek-stat:hover,
a.ek-stat:focus-visible {
    box-shadow: var(--ek-shadow);
    border-color: var(--ek-line-strong);
    border-color: color-mix(in srgb, var(--ek-stat-tone) 30%, var(--ek-line));
    transform: translateY(-1px);
    color: inherit;
}

.ek-stat__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6875rem;
    display: grid;
    place-items: center;
    font-size: 1.1875rem;
    flex-shrink: 0;
    background: var(--ek-stat-tone-soft);
    color: var(--ek-stat-tone);
}

.ek-stat__value {
    font-size: 1.75rem;
    font-weight: 650;
    line-height: 1.08;
    margin: 0;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

/* Identifiers in a stat tile. A 29-character case number at the display size
   overflowed the tile and was clipped; wrap it and keep it monospaced. */
.ek-stat__value--code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 0.9375rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.ek-stat__label {
    font-size: 0.8125rem;
    color: var(--ek-muted);
    margin: 0.1875rem 0 0;
    line-height: 1.3;
}

.ek-stat__meta {
    font-size: 0.6875rem;
    color: var(--ek-muted);
    margin-top: 0.125rem;
}

.ek-stat--success {
    --ek-stat-tone: var(--ek-success);
    --ek-stat-tone-soft: var(--ek-success-soft);
}

.ek-stat--warning {
    --ek-stat-tone: var(--ek-warning);
    --ek-stat-tone-soft: var(--ek-warning-soft);
}

.ek-stat--info {
    --ek-stat-tone: var(--ek-info);
    --ek-stat-tone-soft: var(--ek-info-soft);
}

.ek-stat--danger {
    --ek-stat-tone: var(--ek-danger);
    --ek-stat-tone-soft: var(--ek-danger-soft);
}

/* ------------------------------------------------------------------ *
 * 8. Tables
 * ------------------------------------------------------------------ */

.ek-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ek-ink);
    --bs-table-border-color: var(--ek-line);
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--ek-ink);
    vertical-align: middle;
}

.ek-table > thead th {
    background: var(--ek-surface-2);
    border-bottom: 1px solid var(--ek-line);
    color: var(--ek-muted);
    font-size: 0.6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.625rem 1rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ek-table > tbody td {
    padding: 0.6875rem 1rem;
    border-color: var(--ek-line);
    vertical-align: middle;
}

.ek-table > tbody tr {
    transition: background-color 0.12s ease;
}

.ek-table > tbody tr:hover {
    --bs-table-accent-bg: transparent;
    background: var(--ek-surface-2);
    background: color-mix(in srgb, var(--ek-primary) 4%, transparent);
}

.ek-table > tbody tr:last-child td {
    border-bottom: 0;
}

.ek-table--compact > tbody td,
.ek-table--compact > thead th {
    padding: 0.5rem 0.75rem;
}

.ek-cell-person {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    min-width: 0;
}

.ek-cell-person__text {
    min-width: 0;
}

.ek-cell-person__name {
    font-weight: 550;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ek-cell-person__meta {
    font-size: 0.75rem;
    color: var(--ek-muted);
    line-height: 1.3;
}

.ek-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--ek-primary-soft);
    color: var(--ek-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ek-avatar--lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 0.875rem;
}

.ek-avatar--square {
    border-radius: 0.625rem;
}

.ek-table .btn {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * 9. Forms
 *
 * `.ek-form-label` / `.ek-form-control` / `.ek-form-select` are a complete
 * set. Screens are free to use them without also carrying Bootstrap's
 * `.form-label` / `.form-control` classes.
 * ------------------------------------------------------------------ */

.ek-form-label,
.ek-content .form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ek-ink-2);
    margin-bottom: 0.3125rem;
}

.ek-form-label .ek-req,
.ek-form-label .required {
    color: var(--ek-danger);
    margin-left: 0.125rem;
}

.ek-form-control,
.ek-form-select,
.ek-content .form-control,
.ek-content .form-select {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ek-radius-sm);
    border: 1px solid var(--ek-line-strong);
    background-color: var(--ek-surface);
    color: var(--ek-ink);
    font-size: 0.9375rem;
    line-height: 1.45;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ek-form-control::placeholder {
    color: var(--ek-muted);
    color: color-mix(in srgb, var(--ek-muted) 70%, transparent);
    opacity: 1;
}

.ek-form-control:hover,
.ek-form-select:hover {
    border-color: var(--ek-muted);
    border-color: color-mix(in srgb, var(--ek-line-strong) 55%, var(--ek-muted));
}

.ek-form-control:focus,
.ek-form-select:focus,
.ek-content .form-control:focus,
.ek-content .form-select:focus {
    border-color: var(--ek-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--ek-accent-rgb), 0.16);
    background-color: var(--ek-surface);
    color: var(--ek-ink);
    outline: 0;
}

.ek-form-control[readonly] {
    background-color: var(--ek-surface-2);
    color: var(--ek-ink-2);
    border-color: var(--ek-line);
}

.ek-form-control:disabled,
.ek-form-select:disabled {
    background-color: var(--ek-surface-3);
    color: var(--ek-muted);
    cursor: not-allowed;
}

.ek-form-control.is-invalid,
.ek-form-select.is-invalid {
    border-color: var(--ek-danger);
}

.ek-form-control.is-invalid:focus,
.ek-form-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.15);
}

.ek-form-control.is-valid {
    border-color: var(--ek-success);
}

/* Standalone controls need their own dropdown affordance. */
.ek-form-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 10px;
}

.ek-form-select-sm,
.ek-form-control-sm,
.ek-content .form-select-sm,
.ek-content .form-control-sm {
    min-height: 2.125rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
    border-radius: var(--ek-radius-xs);
}

.ek-form-select-sm {
    padding-right: 2rem;
    background-position: right 0.625rem center;
}

/* Date inputs have a large native picker glyph in Chromium. */
input[type="date"].ek-form-control,
input[type="date"].form-control {
    min-height: 2.5rem;
}

.ek-content .form-text,
.form-text {
    font-size: 0.75rem;
    color: var(--ek-muted);
    line-height: 1.45;
}

.ek-content .invalid-feedback {
    font-size: 0.75rem;
}

/* A compact label + field pair used in filter bars. */
.ek-field-inline {
    display: flex;
    flex-direction: column;
}

.ek-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--ek-radius-sm);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.ek-check:hover {
    background: var(--ek-surface-2);
    border-color: var(--ek-line);
}

.ek-check .form-check-input {
    flex-shrink: 0;
    margin-top: 0.3125rem;
    border-color: var(--ek-line-strong);
}

.ek-check .form-check-input:checked {
    background-color: var(--ek-primary);
    border-color: var(--ek-primary);
}

.ek-check .form-check-input:focus {
    border-color: var(--ek-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--ek-accent-rgb), 0.18);
}

.ek-check .form-check-label {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ek-ink);
}

/* A value the clinician cannot change: client identity, transaction
   numbers. Read-only <input disabled> greys the text and is skipped by
   screen readers inconsistently, so these are presentational pairs. */
.ek-field-readonly {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    height: 100%;
    padding: 0.4375rem 0.75rem;
    background: var(--ek-surface-2);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-sm);
}

.ek-field-readonly__label {
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ek-muted);
}

.ek-field-readonly__value {
    font-size: 0.9375rem;
    color: var(--ek-ink);
    font-weight: 500;
}

/* A read-only summary. Label above value, as many columns as fit, instead
   of a full-width definition list that leaves most of every row empty. */
.ek-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.ek-facts dt {
    margin-bottom: 0.1875rem;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ek-muted);
}

.ek-facts dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ek-ink);
    overflow-wrap: anywhere;
}

/* Submit bar, pinned below the form so a long consultation does not
   require scrolling back to the top to save. */
.ek-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--ek-surface);
    background: color-mix(in srgb, var(--ek-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius);
    box-shadow: var(--ek-shadow);
}

.ek-form-actions__note {
    font-size: 0.75rem;
    color: var(--ek-muted);
    margin-left: auto;
}

/* ------------------------------------------------------------------ *
 * 10. Buttons
 * ------------------------------------------------------------------ */

.btn {
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 550;
    --bs-btn-border-radius: var(--ek-radius-sm);
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-padding-x: 0.875rem;
    letter-spacing: -0.005em;
    transition: color 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--ek-accent-rgb), 0.25);
}

.btn-sm {
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-border-radius: var(--ek-radius-xs);
}

.btn-lg {
    --bs-btn-font-size: 1rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-padding-x: 1.125rem;
    min-height: 2.875rem;
}

.btn-primary {
    --bs-btn-bg: var(--ek-primary);
    --bs-btn-border-color: var(--ek-primary);
    --bs-btn-hover-bg: var(--ek-primary-dark);
    --bs-btn-hover-border-color: var(--ek-primary-dark);
    --bs-btn-active-bg: var(--ek-primary-dark);
    --bs-btn-active-border-color: var(--ek-primary-dark);
    --bs-btn-disabled-bg: #94b8b8;
    --bs-btn-disabled-bg: color-mix(in srgb, var(--ek-primary) 45%, #94a3b8);
    --bs-btn-disabled-border-color: transparent;
    box-shadow: 0 1px 2px rgba(var(--ek-primary-rgb), 0.28);
}

.btn-outline-primary {
    --bs-btn-color: var(--ek-primary);
    --bs-btn-border-color: #9dc4c0;
    --bs-btn-border-color: color-mix(in srgb, var(--ek-primary) 38%, var(--ek-line));
    --bs-btn-hover-bg: var(--ek-primary);
    --bs-btn-hover-border-color: var(--ek-primary);
    --bs-btn-active-bg: var(--ek-primary-dark);
    --bs-btn-active-border-color: var(--ek-primary-dark);
    --bs-btn-disabled-color: var(--ek-muted);
    --bs-btn-disabled-border-color: var(--ek-line);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ek-ink-2);
    --bs-btn-border-color: var(--ek-line-strong);
    --bs-btn-hover-bg: var(--ek-surface-3);
    --bs-btn-hover-border-color: var(--ek-line-strong);
    --bs-btn-hover-color: var(--ek-ink);
    --bs-btn-active-bg: var(--ek-surface-3);
    --bs-btn-active-color: var(--ek-ink);
    --bs-btn-active-border-color: var(--ek-line-strong);
}

.btn-outline-danger {
    --bs-btn-color: var(--ek-danger);
    --bs-btn-border-color: var(--ek-danger-line);
    --bs-btn-hover-bg: var(--ek-danger);
    --bs-btn-hover-border-color: var(--ek-danger);
}

.btn-light {
    --bs-btn-bg: var(--ek-surface);
    --bs-btn-border-color: var(--ek-line);
    --bs-btn-hover-bg: var(--ek-surface-2);
    --bs-btn-hover-border-color: var(--ek-line-strong);
    --bs-btn-color: var(--ek-ink);
}

.btn-link {
    --bs-btn-color: var(--ek-primary);
    --bs-btn-hover-color: var(--ek-primary-dark);
}

/* A button that is working. The spinner occupies the icon slot so the
   label does not jump when the click is acknowledged. */
.btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.btn.is-loading > .bi:first-child {
    display: none;
}

.btn.is-loading::before {
    content: "";
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    margin-right: 0.4em;
    vertical-align: -0.125em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ek-spin 0.6s linear infinite;
}

@keyframes ek-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Bootstrap's compiled colour utilities do not follow --bs-primary. These
   are the ones the application actually uses. */
.text-primary {
    color: var(--ek-primary) !important;
}

.bg-primary {
    background-color: var(--ek-primary) !important;
}

.border-primary {
    border-color: var(--ek-primary) !important;
}

.link-primary {
    color: var(--ek-primary) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ek-primary);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-link-color: var(--ek-ink-2);
    --bs-nav-link-hover-color: var(--ek-primary);
    gap: 0.25rem;
}

.nav-pills .nav-link {
    border-radius: var(--ek-radius-sm);
    font-weight: 550;
    padding: 0.5rem 0.875rem;
}

.nav-pills .nav-link:not(.active):hover {
    background: var(--ek-surface-3);
}

.nav-pills .nav-link.active {
    box-shadow: 0 1px 2px rgba(var(--ek-primary-rgb), 0.3);
}

.form-check-input:checked {
    background-color: var(--ek-primary);
    border-color: var(--ek-primary);
}

.form-check-input:focus {
    border-color: var(--ek-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--ek-accent-rgb), 0.18);
}

.page-link {
    --bs-pagination-color: var(--ek-primary);
    --bs-pagination-hover-color: var(--ek-primary-dark);
    --bs-pagination-active-bg: var(--ek-primary);
    --bs-pagination-active-border-color: var(--ek-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--ek-accent-rgb), 0.18);
}

.dropdown-item:active {
    background-color: var(--ek-primary);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--ek-line);
    --bs-dropdown-link-active-bg: var(--ek-primary);
    border-radius: var(--ek-radius-sm);
    box-shadow: var(--ek-shadow-lg);
    padding: 0.3125rem;
}

.dropdown-item {
    border-radius: var(--ek-radius-xs);
    font-size: 0.875rem;
    padding: 0.4375rem 0.625rem;
}

/* ------------------------------------------------------------------ *
 * 11. Chips, badges and avatars
 * ------------------------------------------------------------------ */

.ek-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.6875rem;
    font-weight: 550;
    letter-spacing: 0.005em;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    background: var(--ek-surface-3);
    color: var(--ek-ink-2);
    border: 1px solid var(--ek-line);
    white-space: nowrap;
    vertical-align: middle;
}

.ek-chip .bi {
    font-size: 0.6875rem;
}

.ek-chip--success {
    background: var(--ek-success-soft);
    color: var(--ek-success);
    border-color: var(--ek-success-line);
}

.ek-chip--info {
    background: var(--ek-info-soft);
    color: var(--ek-info);
    border-color: var(--ek-info-line);
}

.ek-chip--warning {
    background: var(--ek-warning-soft);
    color: var(--ek-warning);
    border-color: var(--ek-warning-line);
}

.ek-chip--danger {
    background: var(--ek-danger-soft);
    color: var(--ek-danger);
    border-color: var(--ek-danger-line);
}

.ek-chip--primary {
    background: var(--ek-primary-soft);
    color: var(--ek-primary);
    border-color: #c4e2de;
    border-color: color-mix(in srgb, var(--ek-primary) 22%, transparent);
}

.badge.text-bg-light {
    background: var(--ek-surface-3) !important;
    color: var(--ek-ink-2) !important;
    border-color: var(--ek-line) !important;
    font-weight: 600;
}

.ek-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 0.8125em;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Bootstrap paints <code> in pink. A transmittal number is not an error. */
code {
    color: var(--ek-ink-2);
    background: var(--ek-surface-3);
    padding: 0.125rem 0.3125rem;
    border-radius: 0.25rem;
    font-size: 0.8125em;
}

.ek-code {
    background: var(--ek-surface-2);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-sm);
    padding: 0.875rem 1rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.55;
    overflow: auto;
    color: var(--ek-ink-2);
    max-height: 24rem;
}

/* ------------------------------------------------------------------ *
 * 12. Alerts, toasts and empty states
 * ------------------------------------------------------------------ */

/* Block, not flex. Several alerts are written as one sentence with <strong>
   fragments inside; as flex items every fragment became its own narrow column.
   The leading icon is positioned instead, so the sentence flows normally. */
.ek-alert {
    position: relative;
    border: 1px solid transparent;
    border-radius: var(--ek-radius-sm);
    font-size: 0.875rem;
    display: block;
    padding: 0.8125rem 1rem 0.8125rem 2.5rem;
    line-height: 1.5;
}

.ek-alert > .bi:first-child {
    position: absolute;
    left: 0.9375rem;
    top: 0.875rem;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.ek-alert--danger {
    background: var(--ek-danger-soft);
    border-color: var(--ek-danger-line);
    color: var(--ek-danger);
}

.ek-alert--warning {
    background: var(--ek-warning-soft);
    border-color: var(--ek-warning-line);
    color: var(--ek-warning);
}

.ek-alert--info {
    background: var(--ek-info-soft);
    border-color: var(--ek-info-line);
    color: var(--ek-info);
}

.ek-alert--success {
    background: var(--ek-success-soft);
    border-color: var(--ek-success-line);
    color: var(--ek-success);
}

/* Bootstrap alerts used by older screens inherit the same radii and a
   quieter border, so a page can mix both without a visible seam. */
.alert {
    --bs-alert-border-radius: var(--ek-radius-sm);
    --bs-alert-padding-y: 0.8125rem;
    --bs-alert-padding-x: 1rem;
    font-size: 0.875rem;
    border-width: 1px;
}

/* Toasts: fixed, top-right, above the page. Session feedback is transient
   and should not push the layout down when it arrives or leaves. */
.ek-toast-stack {
    position: fixed;
    top: calc(var(--ek-topbar-height) + 0.75rem);
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.ek-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.8125rem 0.875rem;
    background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    border-left: 3px solid var(--ek-info);
    border-radius: var(--ek-radius-sm);
    box-shadow: var(--ek-shadow-lg);
    font-size: 0.875rem;
    color: var(--ek-ink);
    pointer-events: auto;
    overflow: hidden;
    animation: ek-toast-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.ek-toast--success {
    border-left-color: var(--ek-success);
}

.ek-toast--danger {
    border-left-color: var(--ek-danger);
}

.ek-toast--warning {
    border-left-color: var(--ek-warning);
}

.ek-toast__icon {
    color: var(--ek-info);
    font-size: 1.0625rem;
    line-height: 1.35;
    flex-shrink: 0;
}

.ek-toast--success .ek-toast__icon {
    color: var(--ek-success);
}

.ek-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ek-toast__close {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--ek-radius-xs);
    background: transparent;
    color: var(--ek-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.ek-toast__close:hover {
    background: var(--ek-surface-3);
    color: var(--ek-ink);
}

.ek-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--ek-primary);
    transform-origin: left center;
    animation: ek-toast-progress var(--ek-toast-duration, 6000ms) linear forwards;
}

.ek-toast.is-leaving {
    animation: ek-toast-out 0.22s ease forwards;
}

@keyframes ek-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ek-toast-out {
    to {
        opacity: 0;
        transform: translateX(12px);
    }
}

@keyframes ek-toast-progress {
    to {
        transform: scaleX(0);
    }
}

.ek-empty {
    text-align: center;
    padding: 3rem 1.25rem;
    color: var(--ek-muted);
}

.ek-empty__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 0.875rem;
    background: var(--ek-surface-3);
    color: var(--ek-muted);
    font-size: 1.375rem;
}

.ek-empty i {
    font-size: 2rem;
    color: var(--ek-line-strong);
    display: block;
    margin-bottom: 0.625rem;
}

.ek-empty__icon i {
    font-size: 1.375rem;
    color: inherit;
    margin: 0;
}

.ek-empty p {
    margin-bottom: 0.25rem;
}

.ek-empty__title {
    font-weight: 600;
    color: var(--ek-ink-2);
}

/* ------------------------------------------------------------------ *
 * 13. Login
 * ------------------------------------------------------------------ */

.ek-auth {
    min-height: 100vh;
    display: flex;
    background: var(--ek-canvas);
}

.ek-auth__aside {
    flex: 1 1 52%;
    background:
        radial-gradient(90% 70% at 15% 10%, rgba(45, 212, 191, 0.22) 0%, transparent 60%),
        radial-gradient(70% 60% at 100% 100%, rgba(13, 148, 136, 0.35) 0%, transparent 55%),
        linear-gradient(150deg, #0b2029 0%, #0c3038 55%, #0f4b4b 100%);
    color: #fff;
    padding: 3rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* A faint clinical grid, not a decorative blob: it reads as graph paper. */
.ek-auth__aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(80% 70% at 30% 40%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(80% 70% at 30% 40%, #000 0%, transparent 100%);
}

.ek-auth__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.ek-auth__brand-mark {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(140deg, var(--ek-accent) 0%, #0d9488 100%);
    color: #042f2e;
    display: grid;
    place-items: center;
    font-size: 1.375rem;
    box-shadow: 0 8px 24px -8px rgba(20, 184, 166, 0.7);
}

.ek-auth__headline {
    font-size: 2.25rem;
    font-weight: 650;
    line-height: 1.16;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
    position: relative;
    z-index: 1;
    max-width: 30rem;
}

.ek-auth__lead {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
    max-width: 27rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

.ek-auth__points {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    position: relative;
    z-index: 1;
}

.ek-auth__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.ek-auth__points i {
    color: #5eead4;
    font-size: 1rem;
    margin-top: 0.0625rem;
}

.ek-auth__main {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    position: relative;
}

.ek-auth__theme-toggle {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
}

.ek-auth__card {
    width: 100%;
    max-width: 25.5rem;
}

.ek-auth__title {
    font-size: 1.625rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    margin: 0 0 0.25rem;
}

.ek-auth__subtitle {
    color: var(--ek-muted);
    font-size: 0.9375rem;
    margin: 0 0 1.625rem;
}

.ek-auth__field {
    position: relative;
}

.ek-auth__field > .bi {
    position: absolute;
    left: 0.8125rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ek-muted);
    pointer-events: none;
    font-size: 0.9375rem;
}

.ek-auth__field .ek-form-control {
    padding-left: 2.5rem;
    min-height: 2.75rem;
    background: var(--ek-surface);
}

/* Leave room for the show/hide button inside the field. */
.ek-auth__field:has([data-ek-toggle-password]) .ek-form-control {
    padding-right: 2.875rem;
}

.ek-auth__field .btn-link {
    color: var(--ek-muted);
}

.ek-auth__field .btn-link:hover {
    color: var(--ek-ink);
}

.ek-auth__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--ek-muted);
    margin-top: 1.25rem;
}

.ek-auth__meta .ek-sidebar__status::before {
    background: #22c55e;
}

@media (min-width: 992px) {
    .ek-auth__aside {
        display: flex;
    }
}

/* ------------------------------------------------------------------ *
 * 14. Module components
 * ------------------------------------------------------------------ */

/* Dismissible chip carrying a hidden input. Used by the ICD-10 picker:
   each selected diagnosis is a chip holding a hidden `icd_codes[]` input,
   so the chosen set posts as an ordered array without JS serialisation. */
.ek-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-height: 2rem;
}

.ek-chip__text {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ek-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-right: -0.1875rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
}

.ek-chip__remove:hover,
.ek-chip__remove:focus-visible {
    opacity: 1;
    background: rgb(0 0 0 / 8%);
}

/* Laboratory panel summary tile. Panels that have never held a row are
   dimmed rather than hidden: the legacy form still offered screens for
   them, so their emptiness is the useful fact. */
.ek-panel-tile {
    height: 100%;
    padding: 0.6875rem 0.8125rem;
    background: var(--ek-surface-2);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-sm);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ek-panel-tile:hover {
    border-color: var(--ek-line-strong);
}

.ek-panel-tile.is-empty {
    background: transparent;
    border-style: dashed;
    opacity: 0.65;
}

.ek-panel-tile__id {
    display: inline-block;
    min-width: 1.5rem;
    margin-right: 0.375rem;
    padding: 0.0625rem 0.3125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    color: var(--ek-muted);
    background: var(--ek-surface-3);
    border-radius: 0.25rem;
}

.ek-panel-tile__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ek-ink);
}

.ek-panel-tile__counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
}

.ek-panel-tile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

/* Medicine type-ahead. The legacy loaded all 2,373 drugs into a <select>
   and relied on a jQuery chosen-select plugin to filter it. This is a
   fetched list instead, so the page does not carry the whole drug master. */
.ek-typeahead {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-sm);
    box-shadow: var(--ek-shadow-lg);
}

.ek-typeahead__item {
    display: block;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    font-size: 0.875rem;
    text-align: left;
    background: none;
    border: 0;
    color: var(--ek-ink);
    cursor: pointer;
}

.ek-typeahead__item:hover,
.ek-typeahead__item.is-active {
    background: var(--ek-primary-soft);
    color: var(--ek-primary);
}

/* Quick action rows on the dashboard rail. A row reads faster than a grid of
   equally weighted buttons. */
.ek-quick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5625rem 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--ek-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ek-quick:hover,
.ek-quick:focus-visible {
    background: var(--ek-surface-2);
    border-color: var(--ek-line);
    color: inherit;
}

.ek-quick__icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 0.5625rem;
    background: var(--ek-primary-soft);
    color: var(--ek-primary);
    font-size: 1rem;
}

.ek-quick__text {
    min-width: 0;
    line-height: 1.3;
}

.ek-quick__text strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.ek-quick__text small {
    display: block;
    color: var(--ek-muted);
    font-size: 0.75rem;
}

.ek-quick > .bi-chevron-right {
    margin-left: auto;
    color: var(--ek-muted);
    font-size: 0.6875rem;
}

/* Shared patient search panel. */
.ek-search {
    background: var(--ek-surface-2);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-radius-sm);
    padding: 0.875rem 1rem;
}

.ek-search__field {
    position: relative;
}

.ek-search__field > .bi {
    position: absolute;
    left: 0.6875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ek-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.ek-search__field .ek-form-control {
    padding-left: 1.9375rem;
}

.ek-search__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ek-muted);
    margin: 0.625rem 0 0;
}

.ek-search__hint .bi {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

/* Section jump bar generated by yakap.js for long forms. */
.ek-jumpnav {
    position: sticky;
    top: calc(var(--ek-topbar-height) + 0.5rem);
    z-index: 1015;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0.375rem;
    margin-bottom: 0.875rem;
    background: var(--ek-surface);
    background: color-mix(in srgb, var(--ek-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ek-line);
    border-radius: 999px;
    box-shadow: var(--ek-shadow-xs);
    scrollbar-width: none;
}

.ek-jumpnav::-webkit-scrollbar {
    display: none;
}

.ek-jumpnav a {
    flex-shrink: 0;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--ek-muted);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ek-jumpnav a:hover {
    background: var(--ek-surface-3);
    color: var(--ek-ink);
}

.ek-jumpnav a.is-active {
    background: var(--ek-primary);
    color: #fff;
}

/* Nine sections across a laptop width overflow by a few chips. Wrapping costs
   one row of vertical space and removes a horizontal scroll nobody discovers. */
@media (min-width: 992px) {
    .ek-jumpnav {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.ek-card[id^="ek-section-"] {
    scroll-margin-top: calc(var(--ek-topbar-height) + 6rem);
}

/* Back-to-top control for the long entry forms. */
.ek-back-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1035;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--ek-line);
    border-radius: 50%;
    background: var(--ek-surface);
    color: var(--ek-muted);
    box-shadow: var(--ek-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease,
        color 0.15s ease;
}

.ek-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ek-back-top:hover {
    color: var(--ek-primary);
    border-color: var(--ek-primary);
}

/* ------------------------------------------------------------------ *
 * 15. Utilities
 * ------------------------------------------------------------------ */

.ek-text-muted {
    color: var(--ek-muted) !important;
}

/* Lets a flex child shrink below its intrinsic width so ellipsis works. */
.min-w-0 {
    min-width: 0;
}

.ek-divider {
    height: 1px;
    background: var(--ek-line);
    border: 0;
    margin: 1rem 0;
    opacity: 1;
}

.ek-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ek-toolbar__end {
    margin-left: auto;
}

.ek-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ *
 * 16. Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .ek-sidebar {
        transform: translateX(-100%);
    }

    .ek-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--ek-shadow-lg);
    }

    .ek-main {
        margin-left: 0;
    }
}

.ek-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 15, 26, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ek-sidebar-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 575.98px) {
    :root {
        --ek-topbar-height: 3.5rem;
    }

    .ek-page-title {
        font-size: 1.25rem;
    }

    .ek-stat {
        padding: 0.875rem;
        gap: 0.6875rem;
    }

    .ek-stat__value {
        font-size: 1.375rem;
    }

    .ek-stat__icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .ek-card__body {
        padding: 1rem;
    }

    .ek-toast-stack {
        top: auto;
        bottom: 1rem;
        right: 0.75rem;
    }
}

/* ------------------------------------------------------------------ *
 * 17. Motion preferences
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------------ *
 * 18. Print
 * ------------------------------------------------------------------ */

@media print {
    .ek-form-actions {
        position: static;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .ek-sidebar,
    .ek-topbar,
    .ek-no-print,
    .ek-toast-stack,
    .ek-back-top,
    .ek-jumpnav {
        display: none !important;
    }

    .ek-main {
        margin-left: 0;
    }

    .ek-content {
        padding: 0;
        max-width: none;
    }

    .ek-card,
    .card {
        box-shadow: none;
        border-color: #cbd5e1;
    }
}

/*
|--------------------------------------------------------------------------
| Slips - the printed documents
|--------------------------------------------------------------------------
|
| The eKAS and ePresS slips are the only pages in this application whose
| output is paper rather than a screen, so they are laid out against @page
| instead of against the viewport.
|
| Two properties matter and both are easy to get wrong:
|
|   1. The page size. These are PhilHealth forms filled in by hand on A4. A
|      slip that prints on Letter is a slip that is 20 mm too narrow for the
|      signature box, and nobody notices until the paper comes out.
|
|   2. The page break between copies. `break-after: page` on the copy is what
|      keeps the facility copy and the client copy on separate sheets. The
|      legacy did this with TCPDF's AddPage(); a page break in CSS is the
|      same instruction.
|
| `.ek-slip__copy` also carries `break-inside: avoid`, because a services table
| split across two sheets on a form that has a signature block at the bottom is
| a form nobody can sign.
*/

.ek-slip-body {
    background: #eef1f6;
}

.ek-slip-toolbar {
    background: #fff;
    border-bottom: 1px solid var(--ek-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.ek-slip {
    padding: 1.5rem 1rem 3rem;
}

.ek-slip__sheet {
    background: #fff;
    border: 1px solid var(--ek-line);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgb(16 24 40 / 8%);
    margin: 0 auto 1.5rem;
    max-width: 210mm;
    padding: 12mm 12mm 10mm;
    color: #101828;
}

.ek-slip__copy + .ek-slip__copy {
    break-after: page;
    page-break-after: always;
}

.ek-slip__title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.ek-slip__field-label {
    color: #475467;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ek-slip__field-value {
    border-bottom: 1px solid #98a2b3;
    display: block;
    font-size: 0.85rem;
    min-height: 1.35rem;
    padding: 0 0.15rem 1px;
}

.ek-slip__field-value--blank {
    color: #98a2b3;
    font-style: italic;
}

/* A ruled line the facility completes by hand. Never pre-filled: the data
   model records a membership *type*, not a category, and inventing one would
   put a claim on a PhilHealth form that nothing supports. */
.ek-slip__rule {
    border-bottom: 1px solid #98a2b3;
    display: inline-block;
    min-width: 9rem;
}

.ek-slip__table {
    font-size: 0.75rem;
    margin-bottom: 0;
}

.ek-slip__table th {
    background: #e4e1e0;
    color: #344054;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    vertical-align: bottom;
}

.ek-slip__table td {
    vertical-align: top;
}

.ek-slip__service {
    min-height: 2.1rem;
    width: 42%;
}

.ek-slip__sign {
    border-bottom: 1px dotted #98a2b3;
    display: block;
    height: 1.7rem;
}

.ek-slip__legend {
    color: #475467;
    font-size: 0.68rem;
}

.ek-slip__mark {
    font-weight: 600;
}

.ek-slip__mark--done {
    color: #067647;
}

.ek-slip__mark--none {
    color: #b42318;
}

.ek-slip__mark--waived,
.ek-slip__mark--deferred,
.ek-slip__mark--refused {
    color: #b54708;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ek-slip__footer {
    color: #475467;
    font-size: 0.7rem;
    font-style: italic;
    text-align: right;
}

.ek-slip__attest {
    font-size: 0.78rem;
    line-height: 1.5;
}

.ek-slip__comment-line {
    border-bottom: 1px solid #98a2b3;
    display: block;
    height: 1.6rem;
}

.ek-slip__notes {
    background: #fffaeb;
    border: 1px solid #fedf89;
    border-radius: 4px;
    color: #93370d;
    font-size: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.8rem;
}

.ek-slip__notes ul {
    margin: 0;
    padding-left: 1.1rem;
}

.ek-slip__copy-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-top: 0.75rem;
    text-align: right;
    text-transform: uppercase;
}

/* Page geometry, declared at the top level rather than inside @media print.
   `@page` is only honoured for paged output, so this costs nothing on screen,
   and being outside the media block means it applies to every print path -
   including the browser's own "Print" with the app's stylesheet disabled. */
@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    .ek-slip-body {
        background: #fff;
    }

    .ek-slip {
        padding: 0;
    }

    .no-print,
    .ek-slip-toolbar {
        display: none !important;
    }

    .ek-slip__sheet {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: none;
        padding: 0;
    }

    /* Bootstrap sets `color-adjust: exact` nowhere and lets backgrounds print
       only if the browser is asked to print backgrounds. The service table's
       grey header and the status colours are the whole point of the form, so
       they are forced on rather than left to the user's print settings. */
    .ek-slip__table th {
        background: #e4e1e0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ek-slip__notes {
        background: #fffaeb !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a[href]::after {
        content: none !important;
    }
}
/* Upload drop zone for the Registration Masterlist uploader. */
.ek-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 10.5rem;
    padding: 1.5rem 1rem;
    border: 1.5px dashed var(--ek-line-strong);
    border-radius: var(--ek-radius-sm);
    background: var(--ek-surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ek-upload:hover,
.ek-upload:focus-within {
    border-color: var(--ek-primary);
    background: var(--ek-primary-soft);
    box-shadow: 0 0 0 0.2rem rgba(var(--ek-primary-rgb), 0.12);
}

.ek-upload.is-invalid {
    border-color: var(--ek-danger);
    background: var(--ek-danger-soft);
}

.ek-upload .bi {
    font-size: 1.75rem;
    color: var(--ek-primary);
    opacity: 0.85;
}

.ek-upload__title {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--ek-ink);
}

.ek-upload__hint {
    font-size: 0.75rem;
    color: var(--ek-muted);
    word-break: break-all;
}

.ek-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}