/* Wellora theme overrides.
 *
 * Metronic 9 is built on Tailwind 4 and exposes theme values as CSS custom
 * properties, so the palette is applied by overriding variables rather than
 * editing styles.css. An override file survives a theme upgrade; edits to the
 * compiled CSS do not.
 *
 * Palette: wellora_claude/brand/README.md
 */

/* Self-hosted Inter. Metronic's demo1 loads this from Google Fonts, which
 * fails SILENTLY on a clinic LAN with a slow or dropped link — layouts shift
 * and printed documents change metrics, and it gets blamed on "the system
 * being slow". Never fetch a font at runtime. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Navy */
    --wellora-navy-900: #0B2545;
    --wellora-navy-800: #123A6B;
    --wellora-navy-700: #1D4E89;

    /* Clinical status — functional, never decorative. Always paired with a
     * label or icon: colour-blind staff are common and printed clinical
     * documents are usually monochrome. */
    --wellora-ok:       #16A34A;
    --wellora-waiting:  #F59E0B;
    --wellora-alert:    #DC2626;
    --wellora-critical: #991B1B;

    /* Metronic primary -> Wellora navy */
    --color-primary:        #1D4E89;
    --color-primary-active: #123A6B;
    --color-primary-light:  #EEF4FB;
    --color-primary-clarity: rgba(29, 78, 137, 0.12);
}

/* The layout's own dimensions.
 *
 * layout.templ sizes the sidebar with w-[--kt-sidebar-width], offsets the
 * wrapper and header with ms-[--kt-sidebar-width], and sets the header with
 * h-[--kt-header-height] — and none of those variables was ever defined.
 * Metronic's demo1 declares --sidebar-width and --header-height WITHOUT the kt-
 * prefix, so all three utilities were invalid and silently produced nothing.
 *
 * The layout looked right anyway: the sidebar is fixed and took its width from
 * its content, and the wrapper's missing margin was hidden because the sidebar
 * overlaps it. The footer is where it finally showed — a fixed bar that could
 * not be told where the sidebar ends, so it ran underneath it and its left-hand
 * content disappeared behind the navigation.
 *
 * Defined here, once, and pointed at demo1's values so there is one number.
 *
 * That was half the fix, and the half that did not show. Tailwind 4 stopped
 * reading `h-[--kt-header-height]` as `var(--kt-header-height)`: it emits
 * `height:--kt-header-height`, the bare property NAME as a value, which the
 * browser drops. So all four utilities still produced nothing after the
 * variables existed, and the layout carried on running on fallbacks — the
 * sidebar taking its width from its content, the sidebar header collapsing to
 * whatever was inside it. The templates now use `[var(--…)]`, which is
 * unambiguous in both 3 and 4. If a layout dimension ever looks like it is
 * being ignored, grep the COMPILED css for the class before believing the
 * variable is at fault. */
:root {
    --kt-sidebar-width:          var(--sidebar-width, 280px);
    --kt-sidebar-width-collapse: var(--sidebar-width-collapse, 80px);
    --kt-header-height:          var(--header-height, 70px);

    /* The fixed footer's height, reserved below the content by
     * `.kt-wrapper > main`. See that rule for why it is main and not the
     * wrapper. */
    --wellora-footer-height:     2.75rem;
}
@media (max-width: 1023px) {
    :root { --kt-header-height: var(--header-height, 60px); }
}

/* Sidebar in brand navy, with the contrast the theme's light sidebar assumes
 * inverted for legibility. */
.kt-sidebar {
    background-color: var(--wellora-navy-900) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.kt-sidebar .kt-menu-title { color: #CBD5E1; }
.kt-sidebar .kt-menu-heading { color: #64748B; }
.kt-sidebar .kt-menu-link:hover { background-color: rgba(255, 255, 255, 0.06); }
.kt-sidebar .kt-menu-link:hover .kt-menu-title,
.kt-sidebar .kt-menu-link:hover .kt-menu-icon { color: #FFFFFF; }
.kt-sidebar .kt-menu-item.active > .kt-menu-link { background-color: var(--wellora-navy-700); }
.kt-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-title,
.kt-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon { color: #FFFFFF; }
.kt-sidebar .kt-menu-icon { color: #94A3B8; }

/* Status pills. Each carries text as well as colour. */
.wellora-status { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    padding: .125rem .5rem; border-radius: .375rem;
    font-size: .75rem; font-weight: 600; line-height: 1.25rem; }
.wellora-status-ok       { background: #DCFCE7; color: #15803D; }
.wellora-status-waiting  { background: #FEF3C7; color: #B45309; }
.wellora-status-alert    { background: #FEE2E2; color: #B91C1C; }
.wellora-status-neutral  { background: #E2E8F0; color: #334155; }

/* Clinic screens are used standing up, in a hurry. Density beats whitespace. */
.wellora-dense td, .wellora-dense th { padding-top: .5rem; padding-bottom: .5rem; }

/* Print. Chrome is the shell, not the document. */
@media print {
    .kt-sidebar, .kt-header, .no-print { display: none !important; }
    .kt-wrapper { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; font-size: 11pt; }
    .print-only { display: block !important; }
    table { page-break-inside: auto; }
    tr    { page-break-inside: avoid; }
    thead { display: table-header-group; }
}
.print-only { display: none; }

/* ---------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------ */

/* The sidebar keeps the navy identity in both themes: it is the brand, and a
   sidebar that changes colour with the theme reads as a different product. */
.wellora-sidebar {
  background: #0B2545;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}
.wellora-sidebar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wellora-menu-heading {
  color: rgba(148, 163, 184, 0.75);
}
.wellora-menu-link {
  color: #cbd5e1;
  transition: background-color 120ms ease, color 120ms ease;
}
.wellora-menu-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.kt-menu-item.active > .wellora-menu-link {
  background: #1D4E89;
  color: #fff;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Theme toggle — one icon at a time, whichever theme you are about to get.
   ------------------------------------------------------------------------ */

.wellora-theme-dark-icon { display: inline-block; }
.wellora-theme-light-icon { display: none; }
.dark .wellora-theme-dark-icon { display: none; }
.dark .wellora-theme-light-icon { display: inline-block; }

/* ---------------------------------------------------------------------------
   HTMX indicators
   ------------------------------------------------------------------------ */

.htmx-indicator { opacity: 0; transition: opacity 120ms ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ---- Sidebar menu groups -------------------------------------------------
 *
 * The sidebar outgrew the window at twenty-seven links: Administration sat
 * below the fold with nothing to scroll, so those screens existed and could
 * not be reached. Groups shorten the list; the scroller behind them is the
 * belt to that pair of braces, because a group can always be expanded to
 * overflow again.
 */

.wellora-sidebar-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.wellora-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.wellora-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.wellora-sidebar-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

.wellora-sidebar-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Hide the native disclosure triangle; the caret below replaces it. */
.wellora-menu-group > summary {
    list-style: none;
}

.wellora-menu-group > summary::-webkit-details-marker,
.wellora-menu-group > summary::marker {
    display: none;
    content: "";
}

.wellora-menu-caret {
    transition: transform 0.15s ease;
    opacity: 0.55;
}

.wellora-menu-group[open] > summary .wellora-menu-caret {
    transform: rotate(180deg);
}

/* A group holding the current screen reads as the place you are, without
 * competing with the active link itself. */
.wellora-menu-group[open] > summary {
    color: rgba(255, 255, 255, 0.92);
}

/* Children are indented by a rule rather than whitespace alone, so the
 * relationship survives at a glance on a long list. */
.wellora-menu-group > div {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.1);
    margin-inline-start: 1.4rem;
    padding-inline-start: 0.35rem;
}

.wellora-menu-summary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: -2px;
}

.wellora-date-icon {
    pointer-events: none;
}

/* ---- Drawers -------------------------------------------------------------
 *
 * Tailwind's `hidden` and `flex` both set display, so which one wins depends on
 * their order in the compiled stylesheet rather than on intent. Toggling
 * between them is a race we lose silently: the drawer opens, the classes look
 * right, and nothing appears.
 *
 * KTUI adds `.open` when a drawer opens. That is the only signal worth binding
 * to, so the display rule is written here once and owns itself.
 */

.wellora-drawer {
    display: none;
}

.wellora-drawer.open {
    display: flex;
}

/* ==========================================================================
   Raised surfaces
   ==========================================================================

   Metronic's stock token config sets --card and --popover to the SAME value as
   --background: white on white in light mode, zinc-950 on zinc-950 in dark. Its
   own demos get away with it because every panel carries a shadow; ours did not
   resolve, so every raised surface in Wellora was exactly the colour of the page
   behind it.

   The global search was the clearest symptom. It worked — the request fired, the
   results rendered — and the modal opened invisibly on top of the page, so from
   the desk it looked like typing did nothing. Dropdowns, cards and the search box
   inside a searchable select had the same problem.

   A raised surface has to be a different colour from the thing it is raised
   above. That is the whole fix. */

:root {
    /* The page steps back so panels can sit on it. */
    --background: #F6F8FA;
    --card:       #FFFFFF;
    --popover:    #FFFFFF;
}

.dark {
    --background: #09090B;  /* zinc-950 */
    --card:       #18181B;  /* zinc-900 — a step up from the page */
    --popover:    #18181B;
}

/* A modal needs something behind it, or the page reads straight through.
 *
 * KTUI already appends a .kt-modal-backdrop to <body> — it was there all along
 * at 30% black. Adding a second one to .kt-modal put two veils on the page and,
 * worse, made the real problem harder to see: the dialog was UNDER the
 * backdrop, not over it. Style the one that exists rather than adding another. */
.kt-modal-backdrop {
    background-color: rgba(9, 9, 11, 0.5) !important;
    backdrop-filter: blur(2px);
}

/* Shadows that actually render. Metronic's shadow utilities depend on
   --tw-shadow-color, which was never set, so every box-shadow resolved to
   transparent. Declared here rather than relying on the utility. */
.kt-modal-content,
.kt-select-dropdown,
.kt-dropdown-content,
.kt-datepicker-dropdown {
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.12),
        0 4px 6px -4px rgba(0, 0, 0, 0.10);
}
.dark .kt-modal-content,
.dark .kt-select-dropdown,
.dark .kt-dropdown-content,
.dark .kt-datepicker-dropdown {
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.55),
        0 4px 6px -4px rgba(0, 0, 0, 0.45);
}

/* The search box inside a searchable dropdown.
 *
 * KTUI renders one whenever data-kt-select-enable-search is set, and it did —
 * 65px wide, no border, and the same background as everything else, so nobody
 * could see there was anything to type in. "The searchable dropdown isn't
 * searchable" was a search box nobody could find. */
.kt-select-search,
.kt-select-dropdown input[type="text"],
.kt-select-dropdown input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    background-color: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
    outline: none;
}
.kt-select-search:focus,
.kt-select-dropdown input[type="text"]:focus,
.kt-select-dropdown input[type="search"]:focus {
    border-color: var(--wellora-navy-700);
    box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.18);
}
/* The wrapper KTUI puts the search input in, so the field has room to breathe. */
.kt-select-dropdown > div:first-child:has(input) {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   Date picker
   ==========================================================================

   KTUI's datepicker ships in the JS bundle and has NO stylesheet: the component
   is absent from @keenthemes/ktui/src/components, so Tailwind never scanned it
   and not one rule for it reached the build (`kt-datepicker` matched 0 bytes of
   declarations). The calendar it renders carries no classes at all — every hook
   is a data- attribute — so it opened as bare unstyled text floating over the
   page, with a transparent background and no border.

   Everything below is written against the markup the component actually
   produces, read out of a live DOM rather than guessed:
   [data-kt-datepicker-dropdown] > [data-kt-datepicker-header] + table.

   The segmented input is the same story: three contenteditable spans and two
   separators, with nothing to say they are a field. */

/* --- The field -----------------------------------------------------------

   One box, not two.

   KTUI nests a segmented input inside an input wrapper, and this file styled
   both — in three separate places, each added without removing the last. That
   drew a field inside a field: two borders, two paddings, a date control 52px
   tall standing beside a 34px text input. It is what "a datepicker inside a
   textbox" describes, and measuring the inner element said 34px and missed it.

   The wrapper is the field, because it is the element that holds both the
   segments and the calendar button. Everything inside it draws nothing. */

[data-kt-datepicker] { display: block; }

[data-kt-datepicker] [data-kt-datepicker-input-wrapper] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    height: 2.125rem;              /* 34px — exactly .kt-input */
    padding-inline: .75rem;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    background-color: var(--background);   /* what .kt-input uses */
    color: var(--foreground);
    font-size: .875rem;
    cursor: text;
}
[data-kt-datepicker] [data-kt-datepicker-input-wrapper]:focus-within {
    border-color: var(--wellora-navy-700);
    box-shadow: 0 0 0 3px rgba(29, 78, 137, .18);
    outline: none;
}

[data-kt-datepicker] [data-kt-datepicker-segmented-input] {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
}

/* The calendar button sits at the end of the row. It does not need to be
   positioned over the field: it is already the last child of it. */
[data-kt-datepicker] [data-kt-datepicker-input-wrapper] > button {
    flex: none;
    display: inline-flex;
    align-items: center;
    color: var(--muted-foreground);
    cursor: pointer;
}
[data-kt-datepicker] [data-kt-datepicker-input-wrapper] > button:hover {
    color: var(--foreground);
}

[data-kt-datepicker] [data-segment] {
    padding: 0 1px;
    border-radius: 3px;
    outline: none;
}
[data-kt-datepicker] [data-segment]:focus {
    background-color: var(--wellora-navy-700);
    color: #FFFFFF;
}
[data-kt-datepicker] [data-segment-separator] { opacity: .5; }

/* A field nobody has filled in should not look filled in.

   KTUI scaffolds today's date into the segments whether or not a date has been
   chosen. The form posts empty until a real choice is made — so nothing is
   saved wrong — but on Date of birth the screen said a date was there when it
   was not. wellora.js marks the wrapper data-wellora-unset until a choice is
   made; this is what that mark is for. */
[data-kt-datepicker][data-wellora-unset] [data-segment],
[data-kt-datepicker][data-wellora-unset] [data-segment-separator] {
    opacity: .38;
}
[data-kt-datepicker][data-wellora-unset] [data-segment]:focus {
    opacity: 1;
    color: #FFFFFF;
}


/* --- The calendar ------------------------------------------------------- */

[data-kt-datepicker-dropdown] {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--popover);
    color: var(--popover-foreground);
    z-index: 100;
}
[data-kt-datepicker-dropdown][class=""],
[data-kt-datepicker-dropdown]:not(.open) { display: none; }
[data-kt-datepicker-dropdown].open { display: block; }

[data-kt-datepicker-header] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
[data-kt-datepicker-month-year] {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}
[data-kt-datepicker-prev],
[data-kt-datepicker-next] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground);
    cursor: pointer;
}
[data-kt-datepicker-prev]:hover,
[data-kt-datepicker-next]:hover {
    background-color: var(--accent);
    color: var(--foreground);
}

[data-kt-datepicker-calendar-table] { border-collapse: collapse; }
[data-kt-datepicker-calendar-table] th {
    padding: 0.25rem 0;
    width: 2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted-foreground);
}
[data-kt-datepicker-day] { padding: 1px; }
[data-kt-datepicker-day] > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
    cursor: pointer;
}
[data-kt-datepicker-day] > button:hover { background-color: var(--accent); }
/* A day from the neighbouring month is context, not a choice. */
[data-kt-datepicker-day][data-outside="true"] > button { opacity: .35; }
/* Today is marked, but marking is not selection — an outlined ring rather than
   a fill, so it cannot be mistaken for the date somebody chose. */
[data-kt-datepicker-day][data-today="true"] > button {
    box-shadow: inset 0 0 0 1px var(--wellora-navy-700);
    font-weight: 600;
}
[data-kt-datepicker-day][data-selected="true"] > button,
[data-kt-datepicker-day][aria-selected="true"] > button {
    background-color: var(--wellora-navy-700);
    color: #FFFFFF;
    font-weight: 600;
}
[data-kt-datepicker-day] > button:focus-visible {
    outline: 2px solid var(--wellora-navy-700);
    outline-offset: 1px;
}

/* ==========================================================================
   Width, and a footer that stays put
   ==========================================================================

   Metronic's demo1 centres every page in .kt-container-fixed at
   max-width: var(--breakpoint-xl) — 1280px. On a 2000px screen that is 700px of
   dead space beside a Configuration table wrapping "Blood Slide for Malaria
   Parasites" over three lines and truncating its last two columns.

   A clinic administrator's screen is a working surface, not a landing page.
   Fluid, with padding that keeps text off the bezel. */

.kt-container-fixed {
    max-width: none;
    padding-inline: 1.5rem;
}
@media (min-width: 1536px) {
    .kt-container-fixed { padding-inline: 2.5rem; }
}

/* The footer is chrome, like the header: it carries the build id and the link
   to this screen's guide, and both are worth reaching without scrolling to the
   bottom of a long table. */
/* The footer's height has to be reserved by whichever element ENDS the
 * scrollable flow, and that is not .kt-wrapper. `body` is `display:flex h-full`,
 * so the wrapper is a flex item stretched to exactly the viewport height and
 * its content overflows it — on a full patient list `main` measures 1630px
 * inside a 900px wrapper. The wrapper's padding-bottom therefore sits at the
 * bottom of a 900px box, 800px above where the content actually ends, so NO
 * value of it would ever have cleared the footer. Measured: the last table row
 * sat 11.5px underneath the footer with 68px of wrapper padding applied.
 *
 * `main` is the element that grows with the content, so the reservation lives
 * there and reserves the footer's height exactly. The visible gap is then the
 * page container's own bottom padding (py-5 / lg:py-7.5), which every screen
 * already has — breathing room from the layout's own rhythm rather than a
 * second number to keep in step with the footer. */
.kt-wrapper > main { padding-bottom: var(--wellora-footer-height); }

.wellora-footer {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 8;
    height: var(--wellora-footer-height);
    display: flex;
    align-items: center;
    border-top: 1px solid var(--border);
    background-color: var(--card);
}
@media (min-width: 1024px) {
    .wellora-footer { inset-inline-start: var(--kt-sidebar-width); }
}
@media print {
    .wellora-footer { display: none !important; }
    .kt-wrapper > main { padding-bottom: 0 !important; }
}

/* ==========================================================================
   Dark theme — grey, not black
   ==========================================================================

   Metronic's dark palette is zinc-950 on zinc-950: almost black, and every
   surface the same. Paul's note was that it is hard to see what you are working
   with, which is the honest description of a form whose inputs, table rows and
   page background differ by nothing but a hairline.

   This is a slate-grey scale with four distinct steps — page, raised surface,
   control, hover — so a card reads as a card, a table row reads as a row, and
   an input reads as somewhere to type. Foreground and muted-foreground are
   lifted well clear of the AA floor: clinic screens get read at a glance, in a
   room with the lights on. */

.dark {
    --background:            #14161B;  /* the page */
    --card:                  #1C1F27;  /* panels, tables, modals */
    --popover:               #1C1F27;
    --secondary:             #262A34;
    --muted:                 #232730;  /* table stripes, hover */
    --accent:                #2A2F3A;  /* hover on a control */
    --border:                #333947;
    --input:                 #3A4152;  /* a control's edge, brighter than a divider */
    --ring:                  #4B7FBF;

    --foreground:            #E9ECF2;
    --card-foreground:       #E9ECF2;
    --popover-foreground:    #E9ECF2;
    --secondary-foreground:  #E9ECF2;
    --accent-foreground:     #FFFFFF;
    --muted-foreground:      #A3ACBD;  /* 7.1:1 on --card */

    /* Darkened from #3D7DCA, which put white button text at 4.21:1 — under
       the 4.5:1 that AA asks for at this size. It is the only contrast
       failure the dark theme had left, and it was on every primary button in
       the application. 4.78:1 now, at a shift nobody will notice. */
    --primary:               #3874BC;
    --primary-foreground:    #FFFFFF;
    --destructive:           #E5484D;
}

/* Controls have to look like controls. In dark mode Metronic gives an input the
   page's own background, so a form is a set of hairline rectangles. */
.dark .kt-input,
.dark .kt-select,
.dark .kt-textarea,
.dark [data-kt-datepicker] [data-kt-datepicker-input-wrapper],
.dark .kt-select-wrapper > button,
.dark .kt-select-wrapper > div[role="combobox"] {
    background-color: #171A21;
    border-color: var(--input);
    color: var(--foreground);
}
.dark .kt-input::placeholder,
.dark .kt-textarea::placeholder { color: #6D768A; }

.dark .kt-input:focus,
.dark .kt-select:focus,
.dark .kt-textarea:focus,
.dark [data-kt-datepicker] [data-kt-datepicker-input-wrapper]:focus-within {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(75, 127, 191, 0.25);
}

.dark .kt-checkbox,
.dark .kt-radio {
    background-color: #171A21;
    border-color: var(--input);
}
.dark .kt-checkbox:checked,
.dark .kt-radio:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Tables: a header that separates, rows that stripe, a hover you can see. */
.dark thead th {
    background-color: #191C23;
    color: #B6BECD;
    border-color: var(--border);
}
.dark tbody tr { border-color: var(--border); }
.dark tbody tr:hover { background-color: var(--muted); }
.dark tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.018); }

/* The status pills, which were built for a light background and disappeared on
   a dark one. */
.dark .wellora-status-ok       { background: #12351F; color: #6EE7A0; }
.dark .wellora-status-waiting  { background: #3A2C0E; color: #F5C451; }
.dark .wellora-status-alert    { background: #3B1618; color: #FF8A8F; }
.dark .wellora-status-neutral  { background: #262A34; color: #B6BECD; }

/* ==========================================================================
   Dropdowns that fit what is in them
   ==========================================================================

   KTUI sizes a select's dropdown to the trigger. On the Claims screen the
   Scheme trigger is about 90px, so the panel showed "AAR H…", "MTN …" and a
   search box wide enough for "Type t" — which is what "the searchable dropdown
   isn't searchable" looks like from the desk. A dropdown is an overlay; it can
   be wider than the control that opened it. */

.kt-select-dropdown {
    min-width: 16rem;
    max-width: min(28rem, calc(100vw - 2rem));
    width: max-content;
    /* No z-index here. KTUI sets one inline (105) from its own dropdownZindex,
       and declaring 60 in a stylesheet only fought it — which is how a select
       panel ended up beneath a dialog. */
}
.kt-select-option {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The calendar has to clear everything it can be opened from — including a
 * dialog. A price is added in a modal, and at z-70 the calendar rendered BEHIND
 * it: you could see the month grid bleeding through the page behind the dialog
 * while the field you had clicked showed nothing.
 *
 * KTUI's own modal sits at 90 and its select panels at 105, so the calendar
 * goes above both. It is the last thing opened, so it is the top thing drawn. */
[data-kt-datepicker-dropdown] { z-index: 120 !important; }

/* ==========================================================================
   Stat tiles
   ==========================================================================

   The KPI row was five identical white boxes with a grey label and a black
   number. Nothing on it said which figure mattered, so a screen whose whole job
   is "tell me at a glance" told you nothing at a glance.

   A tile now carries an accent: an icon in its own tinted disc, and a rule down
   its leading edge. The colour is chosen by what the number MEANS — money in,
   money out, something waiting, something wrong — never decoration, so the same
   hue means the same thing on every screen. */

.wellora-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    overflow: hidden;
}
.wellora-tile::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--wellora-tile-accent, var(--border));
}
.wellora-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: .625rem;
    font-size: 1.125rem;
    color: var(--wellora-tile-accent, var(--muted-foreground));
    background: var(--wellora-tile-wash, var(--muted));
}
.wellora-tile-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-foreground);
}
.wellora-tile-value {
    margin-top: .125rem;
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--foreground);
}
.wellora-tile-hint {
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--muted-foreground);
}

/* The tones. Each one means something:
     money    — earned or collected
     spend    — paid out
     wait     — queued, pending a person
     alert    — owed, overdue, expired
     info     — a count, no judgement
     good     — settled, complete                                            */
.wellora-tile-money { --wellora-tile-accent:#0E9F6E; --wellora-tile-wash:rgba(14,159,110,.12); }
.wellora-tile-good  { --wellora-tile-accent:#0E9F6E; --wellora-tile-wash:rgba(14,159,110,.12); }
.wellora-tile-spend { --wellora-tile-accent:#7C5CD6; --wellora-tile-wash:rgba(124,92,214,.14); }
.wellora-tile-wait  { --wellora-tile-accent:#D98A0B; --wellora-tile-wash:rgba(217,138,11,.14); }
.wellora-tile-alert { --wellora-tile-accent:#E04B4F; --wellora-tile-wash:rgba(224,75,79,.14); }
.wellora-tile-info  { --wellora-tile-accent:#2A6CB0; --wellora-tile-wash:rgba(42,108,176,.14); }

.dark .wellora-tile-money { --wellora-tile-accent:#34D399; --wellora-tile-wash:rgba(52,211,153,.13); }
.dark .wellora-tile-good  { --wellora-tile-accent:#34D399; --wellora-tile-wash:rgba(52,211,153,.13); }
.dark .wellora-tile-spend { --wellora-tile-accent:#A78BFA; --wellora-tile-wash:rgba(167,139,250,.15); }
.dark .wellora-tile-wait  { --wellora-tile-accent:#F5C451; --wellora-tile-wash:rgba(245,196,81,.14); }
.dark .wellora-tile-alert { --wellora-tile-accent:#FF8A8F; --wellora-tile-wash:rgba(255,138,143,.14); }
.dark .wellora-tile-info  { --wellora-tile-accent:#6EA8E8; --wellora-tile-wash:rgba(110,168,232,.15); }

/* A tile that links somewhere says so on hover. */
a.wellora-tile { transition: border-color .12s, transform .12s; }
a.wellora-tile:hover {
    border-color: var(--wellora-tile-accent, var(--ring));
    transform: translateY(-1px);
}

/* ==========================================================================
   The search dialog
   ==========================================================================

   It worked the whole time — the request fired, results rendered, the links
   were right — and it read as greyed out, which is indistinguishable from
   broken. The panel sat at --popover, a step above the page, and behind a
   dimming backdrop that step vanished: a dark rectangle on a dark rectangle.

   A dialog is the most raised thing on the screen while it is open, so it gets
   the strongest treatment in the application: a surface lifted clear of the
   page, a real border, and a shadow deep enough to read as floating. */

#wellora_search_modal .kt-modal-content {
    background-color: #FFFFFF;
    border: 1px solid var(--border);
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(0, 0, 0, .04);
}
.dark #wellora_search_modal .kt-modal-content {
    /* Two steps above the page rather than one — this is the only element on
       screen while it is open, and it has to look like it. */
    background-color: #262B36;
    border-color: #3D4657;
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, .7),
        0 0 0 1px rgba(255, 255, 255, .06);
}

/* The field you are meant to type in should look like one. */
#wellora_search_input {
    font-size: 1rem;
    padding-block: .75rem;
}
#wellora_search_input::placeholder { color: var(--muted-foreground); opacity: 1; }

#wellora_search_modal .kt-modal-header {
    border-bottom-color: var(--border);
}
.dark #wellora_search_modal .kt-modal-header { border-bottom-color: #3D4657; }

/* Results: each hit is a target, so it has to answer to the pointer. */
#wellora_search_results a:hover { background-color: var(--accent); }
.dark #wellora_search_results a:hover { background-color: #313846; }

/* ==========================================================================
   Wide tables scroll; they do not squeeze
   ==========================================================================

   Lab & imaging tests has seventeen columns. Forced to width:100% every one of
   them is compressed until the content wraps — "Blood Slide for Malaria
   Parasites" over three lines, "NORMAL RANGE, LOW" over two, and the last two
   columns clipped off the edge regardless.

   A column should be as wide as what is in it. When the total is wider than the
   card, the card scrolls sideways — which is what .kt-scrollable-x-auto around
   it is for. Only the table scrolls; the page does not, because .kt-wrapper has
   min-w-0. */

[data-wellora-table] table.kt-table {
    width: auto;
    min-width: 100%;
}
[data-wellora-table] table.kt-table th,
[data-wellora-table] table.kt-table td {
    white-space: nowrap;
}
/* Except the name, which is the one column worth letting breathe rather than
   pushing every other column off the screen. */
[data-wellora-table] table.kt-table td:nth-child(2) {
    white-space: normal;
    min-width: 14rem;
}

/* The scroller needs to be the thing that scrolls, not the card. */
.kt-card-table.kt-scrollable-x-auto {
    overflow-x: auto;
    max-width: 100%;
}

/* ==========================================================================
   Tables: denser, quieter, and readable in both themes
   ==========================================================================

   Three things Paul asked for, and one he did not have to.

   The type was the body size, so a fifteen-column table pushed columns off the
   edge that would have fitted at 13px. Headers were full uppercase at the same
   weight as the data, which shouts the least important row on the screen.
   And light mode had no row banding at all, so a wide row was hard to track
   across — the thing zebra striping exists for. */

[data-wellora-table] table.kt-table,
.kt-card-table table.kt-table {
    font-size: 0.8125rem;          /* 13px */
    line-height: 1.35;
}
[data-wellora-table] table.kt-table thead th,
.kt-card-table table.kt-table thead th {
    font-size: 0.6875rem;          /* 11px */
    font-weight: 600;
    letter-spacing: .03em;
    /* Small caps rather than shouting: the header is a label, not the content.
       Capitalize keeps proper nouns and codes readable where uppercase did not. */
    text-transform: none;
    color: var(--muted-foreground);
}
[data-wellora-table] table.kt-table tbody td,
.kt-card-table table.kt-table tbody td {
    padding-block: 0.5rem;
}

/* Row banding, in both themes. Light had none at all. */
.kt-table tbody tr:nth-child(even) { background-color: rgba(15, 23, 42, 0.025); }
.dark .kt-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); }
.kt-table tbody tr:hover { background-color: rgba(29, 78, 137, 0.06); }
.dark .kt-table tbody tr:hover { background-color: rgba(110, 168, 232, 0.10); }

/* ==========================================================================
   Dark theme: text that can actually be read
   ========================================================================== */

.dark {
    /* Was #A3ACBD. Secondary text — hints under fields, table headers, the
       count line — sat at the edge of legible on a panel. */
    --muted-foreground: #B4BCCC;
}
/* Tailwind's slate/zinc/gray text utilities are baked into a lot of screens and
   were chosen against a white page. On a dark panel the 400–600 steps go muddy. */
.dark .text-slate-500, .dark .text-slate-600, .dark .text-slate-700,
.dark .text-zinc-500,  .dark .text-zinc-600,  .dark .text-zinc-700,
.dark .text-gray-500,  .dark .text-gray-600,  .dark .text-gray-700 {
    color: #B4BCCC !important;
}
.dark .text-slate-800, .dark .text-slate-900,
.dark .text-zinc-800,  .dark .text-zinc-900,
.dark .text-gray-800,  .dark .text-gray-900 {
    color: #E9ECF2 !important;
}
/* Status words written as coloured text rather than as a badge. */
.dark .text-red-600,   .dark .text-red-700   { color: #FF9AA0 !important; }
.dark .text-amber-600, .dark .text-amber-700 { color: #F5C451 !important; }
.dark .text-green-600, .dark .text-green-700 { color: #6EE7A0 !important; }
.dark .text-blue-600,  .dark .text-blue-700  { color: #7FB3EE !important; }
/* The brand navy is unreadable on a dark panel; links lift to the tint. */
.dark .text-\[\#1D4E89\] { color: #6EA8E8 !important; }

/* ==========================================================================
   The bed board
   ==========================================================================

   Every bed was a dashed box washed in the colour of its state, which made
   "free" — the commonest and least interesting thing on the screen — the
   loudest. And the card had no padding at all, because the class list was
   built with + and `p-3` fused to the tone's first class.

   A bed is a card like every other card. Its state is a stripe down the
   leading edge and a badge, so the eye goes to the bed somebody has to do
   something about rather than to the twelve that are fine. */

.wellora-bed {
    display: block;
    position: relative;
    padding: .75rem .875rem .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    overflow: hidden;
}

/* The stripe. A pseudo-element so the border radius stays intact. */
.wellora-bed::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background-color: var(--border);
}

.wellora-bed-free::before     { background-color: #17B26A; }
.wellora-bed-cleaning::before { background-color: #F79009; }
.wellora-bed-out::before      { background-color: var(--muted-foreground); }
.wellora-bed-occupied::before { background-color: var(--wellora-navy-700, #1D4E89); }

/* Occupied beds are the ones you click. */
a.wellora-bed {
    text-decoration: none;
    transition: border-color .12s ease, background-color .12s ease;
}
a.wellora-bed:hover {
    border-color: var(--wellora-navy-700, #1D4E89);
    background-color: var(--background);
}

/* The bed's own number, which a nurse reads as an identifier, not as prose. */
.wellora-bed-code {
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6875rem;
    color: var(--muted-foreground);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: .25rem;
    padding: .0625rem .3125rem;
}

.dark .wellora-bed        { background-color: var(--card); }
.dark a.wellora-bed:hover { background-color: #1B1F27; }
.dark .wellora-bed-code   { background-color: #171A21; }

/* ==========================================================================
   An unanswered question does not look answered
   ==========================================================================

   Metronic styles :checked and :indeterminate together:

       .kt-radio:checked, .kt-radio:indeterminate { background: var(--primary) }

   For a checkbox that is right — :indeterminate is the third, half-ticked
   state. For a RADIO it is not. Per the selectors spec, every radio in a group
   where NOTHING is checked matches :indeterminate. So an unanswered question
   painted all of its options as chosen, and the person answering "is the
   patient pregnant?" saw No, Yes, Unsure and Not applicable all filled in.

   On a safety screening before an X-ray that is not a cosmetic problem: the
   screen said an answer had been given when none had, and the panel's own
   warning — "an unanswered question is not the same as no" — was contradicted
   by the control underneath it.

   Checkboxes keep the Metronic behaviour: there, :indeterminate is deliberate
   and set only from script. */

.kt-radio:indeterminate:not(:checked) {
    border-color: var(--input);
    background-color: var(--background);
    background-image: none;
}
.dark .kt-radio:indeterminate:not(:checked) {
    border-color: var(--input);
    background-color: #171A21;
}

/* ==========================================================================
   Error pages
   ==========================================================================

   A 403 used to be http.Error's plain text on the browser's default
   background: black, monospace, no way back except the browser's own button.
   For a receptionist who clicked something they were not allowed to click,
   that reads as the system having broken.

   The page says what happened, what to do, and offers the way back. The status
   code is kept, small, because it is the one thing worth quoting to support. */

.wellora-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    background-color: var(--background);
}

.wellora-error-panel {
    width: 100%;
    max-width: 30rem;
    padding: 2.5rem 2rem;
    text-align: center;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 2);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

.wellora-error-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 1.5rem;
}
.wellora-error-mark-warn { background-color: #FEF0C7; color: #B54708; }
.wellora-error-mark-bad  { background-color: #FEE4E2; color: #B42318; }
.wellora-error-mark-info { background-color: #E0F2FE; color: #026AA2; }

.wellora-error-status {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.wellora-error-heading {
    margin-top: .25rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--foreground);
}

.wellora-error-body {
    margin-top: .625rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.wellora-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .625rem;
    margin-top: 1.5rem;
}

.wellora-error-detail {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6875rem;
    color: var(--muted-foreground);
    word-break: break-word;
}

.wellora-error-foot {
    font-size: .75rem;
    color: var(--muted-foreground);
}

.dark .wellora-error-panel {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
.dark .wellora-error-mark-warn { background-color: rgba(247, 144, 9, .16);  color: #FDB022; }
.dark .wellora-error-mark-bad  { background-color: rgba(229, 72, 77, .16);  color: #FF8A8A; }
.dark .wellora-error-mark-info { background-color: rgba(75, 127, 191, .16); color: #7CC4FA; }

/* ==========================================================================
   Tinted panels in dark mode
   ==========================================================================

   A panel that means something — a warning, a refusal, a confirmation — is
   built from Tailwind's light steps: bg-amber-50 with text-amber-900, and so
   on. Those steps are fixed colours. They do not flip with the theme.

   The text beside them usually does: text-foreground is a token, and in dark
   mode it resolves to near-white. So a tinted panel in dark mode rendered
   near-white text on a near-white background.

   Where that showed was the imaging safety screening — bg-amber-50, holding
   "Is the patient pregnant?" and its four answers, invisible. A radiographer
   in a dark-themed session could not read the question they are required to
   ask before putting somebody in front of an X-ray.

   Fixing it at each of the thirty-five sites would mean writing a dark:
   variant beside every tint and remembering to do it again next time. The
   tints are redefined once, here, for the whole application. A few screens
   already carry their own dark: variant; this file loads last and agrees with
   them, so the result is the same either way.

   Backgrounds become a wash of the same hue over the dark surface rather than
   a block of colour: at 12% the panel still reads as amber without becoming a
   second surface competing with the card it sits on. */

.dark .bg-amber-50,  .dark .bg-amber-100,  .dark .bg-amber-200,
.dark .bg-yellow-50, .dark .bg-yellow-100,
.dark .bg-orange-50, .dark .bg-orange-100 { background-color: rgba(247, 144, 9, .12) !important; }

.dark .bg-rose-50, .dark .bg-rose-100, .dark .bg-rose-200,
.dark .bg-red-50,  .dark .bg-red-100 { background-color: rgba(229, 72, 77, .12) !important; }

/* Tailwind's opacity modifier makes a SEPARATE class: bg-red-50/40 compiles to
   `.bg-red-50\/40`, which the rule above does not match. The urgent rows on the
   laboratory worklist use exactly that, and slipped through the first version
   of this block still painting near-white pink under near-white text.
   The trailing slash is what keeps this off bg-red-500. */
.dark [class*="bg-amber-50/"],  .dark [class*="bg-amber-100/"],
.dark [class*="bg-yellow-50/"], .dark [class*="bg-orange-50/"] {
    background-color: rgba(247, 144, 9, .12) !important;
}
.dark [class*="bg-rose-50/"], .dark [class*="bg-rose-100/"],
.dark [class*="bg-red-50/"],  .dark [class*="bg-red-100/"] {
    background-color: rgba(229, 72, 77, .12) !important;
}
.dark [class*="bg-emerald-50/"], .dark [class*="bg-green-50/"] {
    background-color: rgba(23, 178, 106, .12) !important;
}
.dark [class*="bg-sky-50/"], .dark [class*="bg-blue-50/"] {
    background-color: rgba(75, 127, 191, .14) !important;
}

.dark .bg-emerald-50, .dark .bg-emerald-100,
.dark .bg-green-50,   .dark .bg-green-100 { background-color: rgba(23, 178, 106, .12) !important; }

.dark .bg-sky-50, .dark .bg-sky-100,
.dark .bg-blue-50, .dark .bg-blue-100 { background-color: rgba(75, 127, 191, .14) !important; }

/* Borders follow the same hue, a little stronger so the edge is still an edge. */
.dark .border-amber-200,  .dark .border-amber-300,
.dark .border-yellow-200, .dark .border-yellow-300,
.dark .border-orange-200, .dark .border-orange-300 { border-color: rgba(247, 144, 9, .32) !important; }

.dark .border-rose-200, .dark .border-rose-300,
.dark .border-red-200,  .dark .border-red-300 { border-color: rgba(229, 72, 77, .32) !important; }

.dark .border-emerald-200, .dark .border-emerald-300,
.dark .border-green-200,   .dark .border-green-300 { border-color: rgba(23, 178, 106, .32) !important; }

.dark .border-sky-200, .dark .border-sky-300,
.dark .border-blue-200, .dark .border-blue-300 { border-color: rgba(75, 127, 191, .34) !important; }

/* And the text that sits on them. The 800 and 900 steps are chosen to be read
   against a near-white panel; on a dark one they are close to invisible. */
.dark .text-amber-700,  .dark .text-amber-800,  .dark .text-amber-900,
.dark .text-yellow-700, .dark .text-yellow-800, .dark .text-yellow-900,
.dark .text-orange-700, .dark .text-orange-800, .dark .text-orange-900 { color: #FDB022 !important; }

.dark .text-rose-700, .dark .text-rose-800, .dark .text-rose-900,
.dark .text-red-700,  .dark .text-red-800,  .dark .text-red-900 { color: #FF8A8A !important; }

.dark .text-emerald-700, .dark .text-emerald-800, .dark .text-emerald-900,
.dark .text-green-700,   .dark .text-green-800,   .dark .text-green-900 { color: #6EE7A0 !important; }

.dark .text-sky-700, .dark .text-sky-800, .dark .text-sky-900,
.dark .text-blue-700, .dark .text-blue-800, .dark .text-blue-900 { color: #7CC4FA !important; }

/* ==========================================================================
   Badges in dark mode
   ==========================================================================

   Metronic's badge palette is chosen against a white page: a destructive badge
   is dark red text, a solid warning is dark text on bright amber. On the dark
   theme seven of the twelve variants fell under WCAG AA, and the worst was the
   one that matters most — URGENT on the laboratory worklist, at 3.31:1.

   A status badge nobody can read at a glance is worse than no badge: the
   worklist is sorted urgent-first precisely so the eye can go straight to
   them, and the marker doing that job was the hardest thing on the row to see.

   In dark mode every badge becomes soft — a wash of its hue with light text of
   the same hue — rather than trying to keep two different treatments legible.
   Outline and solid converge, which is fine: the colour still carries the
   meaning and the label still says it in words. */

.dark .kt-badge-destructive {
    background-color: rgba(229, 72, 77, .16);
    border-color: rgba(229, 72, 77, .35);
    color: #FF8A8A;
}
.dark .kt-badge-warning {
    background-color: rgba(247, 144, 9, .16);
    border-color: rgba(247, 144, 9, .35);
    color: #FDB022;
}
.dark .kt-badge-success {
    background-color: rgba(23, 178, 106, .16);
    border-color: rgba(23, 178, 106, .35);
    color: #6EE7A0;
}
.dark .kt-badge-info {
    background-color: rgba(75, 127, 191, .18);
    border-color: rgba(75, 127, 191, .38);
    color: #7CC4FA;
}
.dark .kt-badge-primary {
    background-color: rgba(56, 116, 188, .18);
    border-color: rgba(56, 116, 188, .40);
    color: #93BCEC;
}
.dark .kt-badge-secondary,
.dark .kt-badge-outline:not([class*="kt-badge-destructive"]):not([class*="kt-badge-warning"]):not([class*="kt-badge-success"]):not([class*="kt-badge-info"]):not([class*="kt-badge-primary"]) {
    background-color: rgba(255, 255, 255, .06);
    border-color: var(--input);
    color: #C3CAD8;
}