/*
 * Straightline overrides on top of the Metronic bundle.
 *
 * Keep this file for corrections to vendor CSS. Editing style.bundle.css
 * directly means losing the change the next time that bundle is replaced.
 */

/* ---------------------------------------------------------------------------
 * Legibility of the tinted colour variants
 *
 * Metronic paints text in a solid brand colour, usually over that same
 * colour's pale tint. Measured against the light theme:
 *
 *     tone       on its own tint   on the page
 *     primary          5.44             6.33
 *     info             5.59             6.02
 *     danger           3.45             3.86
 *     success          3.23             3.63
 *     warning          1.58             1.69      <- unreadable
 *
 * WCAG asks 4.5:1 for normal text and 3:1 for large text. Warning fails both,
 * by a wide margin and at every size — #F6C000 on #FFF8DD is yellow on yellow.
 *
 * Bootstrap already ships a token meant for exactly this job, defined per
 * theme, so the dark palette stays correct without a second set of rules.
 * Aliased here so the intent reads at each use: this is the tone *as ink*.
 * ------------------------------------------------------------------------- */

/* Declared on every selector Bootstrap declares the emphasis colours on, not
 * on :root alone. A custom property is substituted where it is *defined*, so
 * an alias written only at the root would freeze the light value and hand it
 * to a dark subtree — measured at 1.93:1, worse than the bug being fixed. The
 * page-level toggle sets data-bs-theme on <html> today; this keeps a nested
 * dark card correct if one is ever added. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --sl-primary-ink: var(--bs-primary-text-emphasis);
    --sl-success-ink: var(--bs-success-text-emphasis);
    --sl-warning-ink: var(--bs-warning-text-emphasis);
    --sl-danger-ink:  var(--bs-danger-text-emphasis);
    --sl-info-ink:    var(--bs-info-text-emphasis);
}

/* --- Alerts ---------------------------------------------------------------
 *
 * Only text colour moves; backgrounds and borders are left alone.
 *
 * Two passes are needed. The first fixes the alert's own colour. The second
 * fixes children carrying a text or link colour utility, because those set it
 * with !important and would otherwise keep their bright shade — which is what
 * a titled alert's heading and its call-to-action link both do.
 *
 * An alert's icon is deliberately left bright: it is large, decorative, and is
 * what gives the alert its colour identity at a glance.
 * ------------------------------------------------------------------------- */

.alert-warning { color: var(--sl-warning-ink); }
.alert-danger  { color: var(--sl-danger-ink); }
.alert-success { color: var(--sl-success-ink); }
.alert-info    { color: var(--sl-info-ink); }
.alert-primary { color: var(--sl-primary-ink); }
.alert-light   { color: var(--bs-body-color); }

.alert-warning :is(.text-warning, .link-warning):not(i):not(svg),
.alert-warning :is(.text-warning, .link-warning):not(i):not(svg):hover,
.alert-warning .alert-link {
    color: var(--sl-warning-ink) !important;
    text-decoration-color: var(--sl-warning-ink) !important;
}
.alert-danger :is(.text-danger, .link-danger):not(i):not(svg),
.alert-danger :is(.text-danger, .link-danger):not(i):not(svg):hover,
.alert-danger .alert-link {
    color: var(--sl-danger-ink) !important;
    text-decoration-color: var(--sl-danger-ink) !important;
}
.alert-success :is(.text-success, .link-success):not(i):not(svg),
.alert-success :is(.text-success, .link-success):not(i):not(svg):hover,
.alert-success .alert-link {
    color: var(--sl-success-ink) !important;
    text-decoration-color: var(--sl-success-ink) !important;
}
.alert-info :is(.text-info, .link-info):not(i):not(svg),
.alert-info :is(.text-info, .link-info):not(i):not(svg):hover,
.alert-info .alert-link {
    color: var(--sl-info-ink) !important;
    text-decoration-color: var(--sl-info-ink) !important;
}
.alert-primary :is(.text-primary, .link-primary):not(i):not(svg),
.alert-primary :is(.text-primary, .link-primary):not(i):not(svg):hover,
.alert-primary .alert-link {
    color: var(--sl-primary-ink) !important;
    text-decoration-color: var(--sl-primary-ink) !important;
}

/* Headings and strong text with no colour class of their own follow the
 * alert, so a titled alert reads as one block. */
.alert :where(h1, h2, h3, h4, h5, h6, strong, b) { color: inherit; }

/* A link that now matches the surrounding text still has to look like a link. */
.alert :where(a):not(.btn) { text-decoration: underline; }

/* --- Badges ---------------------------------------------------------------
 *
 * A badge is always small text on a tint, so its icon has no separate job and
 * follows the label. .badge-light-* is the tinted variant; .badge-outline is
 * the same idea over the page background.
 * ------------------------------------------------------------------------- */

.badge-light-warning, .badge-warning.badge-outline { color: var(--sl-warning-ink); }
.badge-light-danger,  .badge-danger.badge-outline  { color: var(--sl-danger-ink); }
.badge-light-success, .badge-success.badge-outline { color: var(--sl-success-ink); }
.badge-light-info,    .badge-info.badge-outline    { color: var(--sl-info-ink); }
.badge-light-primary, .badge-primary.badge-outline { color: var(--sl-primary-ink); }

/* --- Buttons --------------------------------------------------------------
 *
 * Same argument as badges, plus the icon and the dropdown caret: at button
 * size they are labels, not decoration, so they follow the text. The hover and
 * active states already flip to a solid fill with inverse text and are left
 * alone.
 * ------------------------------------------------------------------------- */

.btn.btn-light-warning,
.btn.btn-light-warning i, .btn.btn-light-warning .svg-icon,
.btn.btn-light-warning.dropdown-toggle:after,
.btn.btn-outline.btn-outline-warning,
.btn.btn-outline.btn-outline-warning i,
.btn.btn-outline.btn-outline-warning .svg-icon { color: var(--sl-warning-ink); }

.btn.btn-light-danger,
.btn.btn-light-danger i, .btn.btn-light-danger .svg-icon,
.btn.btn-light-danger.dropdown-toggle:after,
.btn.btn-outline.btn-outline-danger,
.btn.btn-outline.btn-outline-danger i,
.btn.btn-outline.btn-outline-danger .svg-icon { color: var(--sl-danger-ink); }

.btn.btn-light-success,
.btn.btn-light-success i, .btn.btn-light-success .svg-icon,
.btn.btn-light-success.dropdown-toggle:after,
.btn.btn-outline.btn-outline-success,
.btn.btn-outline.btn-outline-success i,
.btn.btn-outline.btn-outline-success .svg-icon { color: var(--sl-success-ink); }

.btn.btn-light-info,
.btn.btn-light-info i, .btn.btn-light-info .svg-icon,
.btn.btn-light-info.dropdown-toggle:after,
.btn.btn-outline.btn-outline-info,
.btn.btn-outline.btn-outline-info i,
.btn.btn-outline.btn-outline-info .svg-icon { color: var(--sl-info-ink); }

.btn.btn-light-primary,
.btn.btn-light-primary i, .btn.btn-light-primary .svg-icon,
.btn.btn-light-primary.dropdown-toggle:after,
.btn.btn-outline.btn-outline-primary,
.btn.btn-outline.btn-outline-primary i,
.btn.btn-outline.btn-outline-primary .svg-icon { color: var(--sl-primary-ink); }

/* Inline code samples: small text on a tint, with a border in the solid tone. */
code:not([class*=language-]).code-warning { color: var(--sl-warning-ink); }
code:not([class*=language-]).code-danger  { color: var(--sl-danger-ink); }
code:not([class*=language-]).code-success { color: var(--sl-success-ink); }
code:not([class*=language-]).code-info    { color: var(--sl-info-ink); }
code:not([class*=language-]).code-primary { color: var(--sl-primary-ink); }

/* --- The warning text utility --------------------------------------------
 *
 * .text-warning is applied directly to headings, table cells, symbol labels
 * and statistics all over the app, and at 1.69:1 it is unreadable at every
 * size — so unlike the tones above it cannot be left to context.
 *
 * Only warning is treated this way. The other tones clear 3:1 and are used at
 * display sizes for signal (a red figure should read as red), so recolouring
 * them would cost meaning to fix a problem they do not have.
 *
 * Icons keep the bright tone: a warning triangle is meant to catch the eye,
 * and it carries no words. .text-warning sets colour with !important, so the
 * override has to as well, and needs the extra specificity to win.
 * ------------------------------------------------------------------------- */

.text-warning:not(i):not(svg):not(.svg-icon),
.link-warning:not(i):not(svg):not(.svg-icon),
.link-warning:not(i):not(svg):not(.svg-icon):hover {
    color: var(--sl-warning-ink) !important;
    text-decoration-color: var(--sl-warning-ink) !important;
}

/* Menu variants, for completeness — same substitution, same reason. */
.menu-warning .menu-item .menu-link,
.menu-warning .menu-item .menu-link .menu-title,
.menu-warning .menu-item .menu-link .menu-icon,
.menu-warning .menu-item .menu-link .menu-icon i,
.menu-warning .menu-item .menu-link .menu-icon .svg-icon { color: var(--sl-warning-ink); }

/* Bootstrap's .collapse, rescued from Tailwind's .collapse.
   Two different frameworks lay claim to this class name. Bootstrap means "a
   collapsible region", hidden with display:none until .show arrives. Tailwind
   means the CSS value `visibility: collapse`, and it wins on source order
   because the play CDN injects its utilities at the end of <head> — so every
   expanded accordion and collapse in the app rendered with the right height,
   the right children and nothing visible inside it.
   Nothing in static/ ever matched a search for this: the rule is generated at
   runtime, in an inline <style>, and only for class names Tailwind finds in
   the DOM — which is why it appears exactly where Bootstrap is being used.
   Specificity, not order, settles it: .collapse.show is 0,2,0 against 0,1,0.
   Bootstrap already hides a shut collapse with display:none, so visibility has
   no second job to do here. */
.collapse.show {
    visibility: visible;
}

/* ── Plan usage, at the foot of a page ────────────────────────────────────
   Was a bordered card with a full-width progress bar above the table on
   every page that has a limit — the first thing anybody saw on pages they
   open twenty times a day to do something else. A number that is almost
   always "12% used" does not deserve the top of the screen.

   Quiet by default and louder only when it earns it: the count and the bar
   take a colour at 70%, and the row gets a tinted ground once the limit is
   actually spent, which is the one moment it is the most important thing
   on the page.

   Inline-flex so a page carrying three limits — email, SMS, WhatsApp —
   reads as one footer line rather than three stacked banners. */
.sl-plan-usage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 14px 0 0;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    color: #a1a5b7;
    line-height: 1.4;
    vertical-align: top;
}
.sl-plan-usage[data-spent="true"] {
    background: var(--bs-danger-light, #fff5f8);
    color: #7e8299;
}
.sl-plan-usage i { color: #c4c8d4; }
.sl-plan-usage-name { font-weight: 600; color: #7e8299; }
.sl-plan-usage-count { font-variant-numeric: tabular-nums; }
.sl-plan-usage-bar {
    display: inline-block;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: #eff2f5;
    overflow: hidden;
}
.sl-plan-usage-bar > span {
    display: block;
    height: 100%;
    background: #c4c8d4;
    border-radius: 2px;
}
.sl-plan-usage-upgrade {
    color: var(--bs-primary, #3b82f6);
    font-weight: 600;
    text-decoration: none;
}
.sl-plan-usage-upgrade:hover { text-decoration: underline; }

/* ── Resizable DataTable columns ──────────────────────────────────────────
   The bundle carries ColReorder, which moves columns, and nothing that
   resizes them. Every table here is scrollX, so one long cell — a subject
   line, a goal, a stopped reason — squeezes the rest into a strip, and which
   column somebody needs wide is theirs to decide rather than ours to guess.

   The grip is a hit area rather than a visible line: a divider drawn on every
   heading of every table would be a lot of furniture for something used
   occasionally. It shows on hover, which is when somebody is looking for it. */
.dt-col-grip {
    position: absolute;
    top: 0;
    right: -3px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 2;
}
.dt-col-grip::after {
    content: "";
    position: absolute;
    top: 25%;
    left: 3px;
    width: 2px;
    height: 50%;
    border-radius: 1px;
    background: transparent;
    transition: background .12s;
}
.dt-col-grip:hover::after,
.dt-col-resizing .dt-col-grip::after { background: var(--bs-primary, #3b82f6); }

/* While dragging, nothing else on the page should be selecting text or
   showing a text cursor — both make the drag feel broken. */
.dt-col-resizing,
.dt-col-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ═════════════════════════════════════════════════════════════════════════
 * The sidebar
 *
 * Three things were wrong with it, and the first is the one that made the
 * other two hard to see.
 *
 * The weight hierarchy ran backwards. Measured in the browser, a section
 * heading was 13px at weight 400 and the items beneath it were 14.3px at
 * weight 600 — so every child shouted louder than its parent, and a column
 * of nine sub-items read as nine headings. Unbolding the children is the fix
 * asked for; giving the parents the weight back is what makes the fix
 * legible, because otherwise nothing in the column is the anchor.
 *
 * Nothing here is a colour invention. Every value is either a Bootstrap
 * token or a mix of one, so the dark theme follows without a second palette
 * to keep in step, and a change to the brand colour reaches the nav.
 *
 * Sizes are in px, not rem: the bundle sets the root font size to 13px,
 * so every rem in this file resolves against 13 rather than 16.
 *
 * Scoped to .app-sidebar throughout. The same .menu classes render the
 * settings sub-nav, the topbar dropdowns and the minimised flyouts, and
 * those are Metronic's to style.
 * ═════════════════════════════════════════════════════════════════════════ */

/* Declared per theme rather than on :root alone, for the reason given on the
 * ink tokens above: a custom property is substituted where it is defined, so
 * a light value written at the root is handed to a dark subtree unchanged. */
:root,
[data-bs-theme=light] {
    --sl-nav-ink:        #2d3548;
    --sl-nav-ink-soft:   #656d80;
    --sl-nav-tile:       #f1f4f9;
    --sl-nav-tile-ink:   #9aa3b8;
    --sl-nav-hover:      #f5f7fb;
    --sl-nav-rail:       #e4e9f1;
    --sl-nav-edge:       #eef1f6;
    --sl-nav-shadow:     rgba(24, 39, 75, .10);
}
/* Metronic's dark palette still carries its own brand green as the pressed
 * state of primary. Light was rebranded and dark was not, so the two themes
 * disagree: a primary button hovers blue in one and green in the other, and
 * the nav's current page was a green pill under blue chrome.
 *
 * Replaced rather than worked around in the nav, because the token is used by
 * every active and pressed primary surface and fixing one of them would leave
 * the rest green. Deeper than --bs-primary rather than lighter: white on
 * #5a8ab8 measures 3.6:1, under the 4.5 WCAG asks of body text, and this
 * token's whole job is to sit behind white. #3d6f9c measures 5.3:1. */
[data-bs-theme=dark] {
    --bs-primary-active: #3d6f9c;

    --sl-nav-ink:        #d3d8e4;
    --sl-nav-ink-soft:   #858da1;
    --sl-nav-tile:       rgba(255, 255, 255, .05);
    --sl-nav-tile-ink:   #7b8497;
    --sl-nav-hover:      rgba(255, 255, 255, .04);
    --sl-nav-rail:       rgba(255, 255, 255, .09);
    --sl-nav-edge:       rgba(255, 255, 255, .07);
    --sl-nav-shadow:     rgba(0, 0, 0, .35);
}

/* --- The header ---------------------------------------------------------
 * A hairline under the logo, so the nav below reads as a list rather than as
 * things floating under a picture. */
.app-sidebar .app-sidebar-header {
    border-bottom: 1px solid var(--sl-nav-edge);
    margin: 0 16px;
    padding-bottom: 14px !important;
}
.app-sidebar .app-sidebar-toggle {
    border-radius: 9px;
    transition: background-color .15s ease, color .15s ease;
}

/* --- Section headings ---------------------------------------------------
 * The anchors of the column: darkest, heaviest, and the only thing carrying
 * an icon. */
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link {
    padding: 7px 12px;
    border-radius: 10px;
    transition: background-color .15s ease;
}
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-title {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.003em;
    color: var(--sl-nav-ink);
}
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link:hover {
    background-color: var(--sl-nav-hover);
}

/* The icon sits in a tile rather than loose in the margin. A row of bare
 * glyphs at mixed optical weights never lines up; a row of identical tiles
 * always does, and it is what gives the column its left edge. */
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    border-radius: 9px;
    background-color: var(--sl-nav-tile);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-icon i {
    font-size: 15px;
    color: var(--sl-nav-tile-ink);
    transition: color .15s ease;
}

/* The open section tints its tile. Tint rather than a solid fill: exactly one
 * section is open at a time, so this is saying "you are here", not "this is
 * the most important thing on the screen". */
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item.here > .menu-link .menu-icon,
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link:hover .menu-icon {
    background-color: color-mix(in srgb, var(--bs-primary) 13%, transparent);
}
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item.here > .menu-link .menu-icon i,
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link:hover .menu-icon i {
    color: var(--bs-primary);
}
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item.here > .menu-link .menu-title {
    color: var(--bs-primary);
}

.app-sidebar .app-sidebar-menu-primary.menu > .menu-item {
    margin-bottom: 1px;
}
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item .menu-arrow {
    opacity: .45;
}

/* --- Items inside a section ---------------------------------------------
 * The weight fix. This is the rule the bundle sets to 1.1rem/600, matched
 * selector for selector with one class added so it wins on specificity
 * rather than on the two files' load order alone. */
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item .menu-item > .menu-link .menu-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--sl-nav-ink-soft);
}

.app-sidebar .menu-sub-accordion .menu-item > .menu-link {
    padding: 6px 12px;
    border-radius: 9px;
    transition: background-color .13s ease;
}
.app-sidebar .menu-sub-accordion .menu-item > .menu-link:hover {
    background-color: var(--sl-nav-hover);
}
.app-sidebar .menu-sub-accordion .menu-item > .menu-link:hover .menu-title {
    color: var(--sl-nav-ink);
}

/* The rail. A single hairline descending from under the section's icon tile,
 * with each item marked on it — the same shape as a file tree, and it does
 * the job the indent alone was failing to do: showing where the group starts
 * and ends without needing a heading repeated at the bottom.
 *
 * Accordion only. Minimised, these same items render in a floating dropdown
 * where a rail hanging off nothing would be furniture. */
.app-sidebar .menu-sub-accordion {
    position: relative;
}
/* Pulled left so the marker centres on the rail, and the gap widened so the
 * labels land on the same left edge as the section headings above them —
 * measured, not guessed: the icon tile is 28px from x=37, so its centre and
 * the rail are both at 51, and every label in the column starts at 75. */
.app-sidebar .menu-sub-accordion .menu-bullet {
    flex: 0 0 16px;
    width: 16px;
    margin-left: -8px;
    margin-right: 17px;
    justify-content: center;
}
.app-sidebar .menu-sub-accordion .menu-bullet .bullet-dot {
    width: 5px;
    height: 5px;
    background-color: var(--sl-nav-rail);
    transition: background-color .13s ease, transform .13s ease;
}
.app-sidebar .menu-sub-accordion .menu-link:hover .menu-bullet .bullet-dot {
    background-color: var(--sl-nav-ink-soft);
    transform: scale(1.2);
}

/* --- Where you are ------------------------------------------------------
 * One solid pill in the whole column. It is the only thing allowed to be
 * loud, which is what makes it findable without reading. */
/* The colour is Metronic's to set and it already does, from
 * --bs-primary-active. One class deeper than its rule so the shadow lands —
 * matched on specificity rather than on load order, since the two files
 * select the same element by different paths. */
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item .menu-item .menu-link.active {
    box-shadow: 0 4px 10px -3px var(--sl-nav-shadow);
}
.app-sidebar .app-sidebar-menu-primary.menu > .menu-item .menu-item > .menu-link.active .menu-title {
    color: #fff;
    font-weight: 600;
}
.app-sidebar .menu-sub-accordion .menu-item > .menu-link.active .menu-bullet .bullet-dot {
    background-color: #fff;
    transform: none;
}

/* --- The scroll area ----------------------------------------------------
 * Visible while scrolling and not otherwise. A permanent track on a nav this
 * short is a line down the page that means nothing most of the time. */
.app-sidebar .app-sidebar-wrapper { scrollbar-width: thin; }
.app-sidebar .app-sidebar-wrapper::-webkit-scrollbar { width: 5px; }
.app-sidebar .app-sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
}
.app-sidebar .app-sidebar-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: var(--sl-nav-rail);
}

/* --- Minimised ----------------------------------------------------------
 * The tile becomes the whole control, so it centres and loses its margin.
 * Without this the icons sit off-centre in the narrow rail, which reads as a
 * rendering bug rather than as a compact mode. */
[data-kt-app-sidebar-minimize=on] .app-sidebar .app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-icon {
    margin-right: 0;
}

/* --- Menu search --------------------------------------------------------
 * Matches the nav's own furniture rather than the form controls on the
 * pages: it is part of the chrome, so it sits flat on a tinted ground with
 * no border until it is focused. */
.sl-nav-search {
    position: relative;
    margin: 16px 16px 0;
}
.sl-nav-search input {
    width: 100%;
    height: 34px;
    padding: 0 32px 0 32px;
    border: 1px solid transparent;
    border-radius: 9px;
    background-color: var(--sl-nav-tile);
    color: var(--sl-nav-ink);
    font-size: 12.5px;
    line-height: 32px;
    outline: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.sl-nav-search input::placeholder { color: var(--sl-nav-tile-ink); }
.sl-nav-search input:focus {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent);
}
/* Chrome draws its own clear button on type=search, at a size and colour that
 * belongs to no design system. The key hint occupies that corner instead. */
.sl-nav-search input::-webkit-search-cancel-button { display: none; }

.sl-nav-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--sl-nav-tile-ink);
    pointer-events: none;
}
.sl-nav-search-key {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 17px;
    padding: 1px 5px;
    border: 1px solid var(--sl-nav-rail);
    border-radius: 5px;
    background-color: transparent;
    color: var(--sl-nav-tile-ink);
    font-size: 10.5px;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
    transition: opacity .12s ease;
}
.sl-nav-search input:focus ~ .sl-nav-search-key { opacity: 0; }

.sl-nav-search-empty {
    margin: 10px 16px 0;
    padding: 10px 12px;
    border-radius: 9px;
    background-color: var(--sl-nav-tile);
    color: var(--sl-nav-tile-ink);
    font-size: 12px;
}

/* While filtering, every section is open and non-matching rows are gone. The
 * accordion classes are untouched, so clearing the box restores whatever was
 * open before without the nav having to remember it. */
.app-sidebar .sl-nav-searching .menu-sub-accordion { display: flex !important; }
.app-sidebar .sl-nav-searching [data-sl-hidden] { display: none !important; }
.app-sidebar .sl-nav-searching .menu-arrow { display: none; }

/* Nothing to search when there is no room to show a result. */
[data-kt-app-sidebar-minimize=on] .sl-nav-search,
[data-kt-app-sidebar-minimize=on] .sl-nav-search-empty { display: none !important; }

/* ═════════════════════════════════════════════════════════════════════════
 * The page interiors
 *
 * Three measured problems, in the order they matter.
 *
 * **A focused field looked exactly like an unfocused one.** Measured: border,
 * background and box-shadow are byte-identical before and after focus, and
 * the outline is suppressed. That is not a polish complaint — it is WCAG
 * 2.4.7, and it means somebody tabbing through a form has no way to know
 * where they are. Everything else here is decoration next to this.
 *
 * **The muted grey failed contrast.** #99A1B7 on white measures 2.58:1
 * against the 4.5 asked of body text, and it is not decoration: it is form
 * help text, table headings, and most of the explanatory copy in the
 * product. The token is retargeted rather than the hundred call sites.
 *
 * **Nothing shared a radius.** Cards 7.5px, inputs 5.1px, buttons 5.7px,
 * the nav 9px. Four values, no scale, all of them arbitrary. One scale here,
 * used everywhere, which is most of what "it looks designed" means.
 * ═════════════════════════════════════════════════════════════════════════ */

:root,
[data-bs-theme=light] {
    --sl-radius-lg: 12px;
    --sl-radius:     9px;
    --sl-radius-sm:  6px;

    --sl-ground:   #f2f4f8;
    --sl-line:     #eaedf3;
    --sl-line-soft:#f1f3f7;
    --sl-shadow-card: 0 1px 2px rgba(20, 31, 58, .04), 0 6px 16px -8px rgba(20, 31, 58, .10);
    --sl-shadow-lift: 0 2px 4px rgba(20, 31, 58, .06), 0 10px 22px -10px rgba(20, 31, 58, .16);
}
[data-bs-theme=dark] {
    --sl-radius-lg: 12px;
    --sl-radius:     9px;
    --sl-radius-sm:  6px;

    --sl-ground:   #0d0f14;
    --sl-line:     rgba(255, 255, 255, .08);
    --sl-line-soft:rgba(255, 255, 255, .05);
    --sl-shadow-card: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 16px -8px rgba(0, 0, 0, .45);
    --sl-shadow-lift: 0 2px 4px rgba(0, 0, 0, .36), 0 10px 22px -10px rgba(0, 0, 0, .55);
}

/* --- The text scale -----------------------------------------------------
 * Three steps, and they have to stay in this order. Darkening the muted grey
 * on its own inverted them: .text-muted came out darker than .text-gray-600,
 * so the tertiary step was louder than the secondary one and a caption read
 * as more important than the sentence above it.
 *
 * Measured on white, and on the card in dark:
 *
 *     step                light   dark
 *     gray-700 primary     7.27    6.61
 *     gray-600 secondary   5.88    6.36
 *     muted    tertiary    4.64    5.83
 *
 * The dark column is a narrow band because the bundle's dark grey ramp is
 * compressed at the top, so the secondary step is tuned to sit inside it
 * rather than to a round number. An earlier value cleared gray-700 and
 * inverted the pair the other way.
 *
 * Every one of them clears the 4.5 WCAG asks of body text. Before this, the
 * bottom two measured 2.58 and 3.83.
 * ------------------------------------------------------------------------ */
:root,
[data-bs-theme=light] { --sl-ink-2: #5A6480; }
[data-bs-theme=dark]  { --sl-ink-2: #9199AC; }

/* Table cells. Not a caption colour — this is the data the page exists to
 * show, and it was the palest text on the screen at 3.83:1. Set on the cell
 * so a span carrying its own .text-gray-800 still wins for names and links. */
/* Both need the flag, for the reason .text-warning above needs it: Bootstrap
 * writes its text utilities with !important, so an override without one is
 * not an override. The cell rule carries it too because the colour reaching
 * a cell is inherited rather than set, and there is no selector that outranks
 * an inherited value without it. */
.table tbody > tr > td {
    color: var(--sl-ink-2) !important;
}
.text-gray-600:not(i):not(svg) {
    color: var(--sl-ink-2) !important;
}

/* --- Legibility of the muted grey ---------------------------------------
 * Retargeted at the token, because .text-muted is the class most of this
 * product's explanatory writing is set in and there is no version of this
 * fix that edits every use of it. Chosen to keep the blue cast of the rest
 * of the palette rather than dropping to a neutral grey: #6B7490 measures
 * 4.71:1 on white, where the value it replaces measured 2.58:1. */
:root,
[data-bs-theme=light] { --bs-text-muted: #6B7490; }
[data-bs-theme=dark]  { --bs-text-muted: #8B93A7; }

/* Utilities and roles that named the failing grey directly rather than
 * going through the token. Same colour, same reason. */
.text-gray-500:not(i):not(svg),
.form-text,
.table thead th,
.dt-container .dt-column-title {
    color: var(--bs-text-muted);
}

/* --- The page ground ----------------------------------------------------
 * The page and the cards on it measured 1.03:1 apart — the same colour, in
 * effect, separated by a 3% shadow. A card that does not read as a surface
 * is just a region of the page with writing in it.
 *
 * Set on the token, not on `body`. The bundle paints the ground from
 * `.app-default`, which is a class and beats a bare element selector
 * however late it loads — and the token is named for exactly this job,
 * so it is the honest place for the change. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] { --bs-app-bg-color: var(--sl-ground); }

/* The title of the page was 15px against 13px body text, so the largest
 * thing on most screens was a table heading. */
.page-heading {
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: -.015em;
}
.app-toolbar .breadcrumb { opacity: .9; }

/* --- Cards --------------------------------------------------------------- */
.card {
    border-radius: var(--sl-radius-lg);
    border: 1px solid var(--sl-line);
    box-shadow: var(--sl-shadow-card);
}
.card > .card-header {
    border-bottom: 1px solid var(--sl-line-soft);
}
.card .card-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* --- Form controls -------------------------------------------------------
 * The solid variants are painted the same colour as their own border, which
 * is why a form reads as a stack of blocks rather than as fields: there is
 * no edge anywhere. A one-shade border is enough to draw one. */
.form-control,
.form-select {
    border-radius: var(--sl-radius);
    transition: border-color .13s ease, box-shadow .13s ease, background-color .13s ease;
}
/* Two classes deep, because the bundle writes this pair as
 * `.form-control.form-control-solid` and a single class loses to it. */
.form-control.form-control-solid,
.form-select.form-select-solid {
    border-color: var(--sl-line);
}

/* The fix that matters. A focused control takes the brand colour on its
 * border and a soft ring around it, and drops its fill so the field it is in
 * is unmistakable. Applied to :focus rather than :focus-visible because a
 * text field earns an indicator when clicked as well as when tabbed to. */
/* Why the solid variants need naming separately, and why it was broken:
 * `.form-control:focus` and `.form-control.form-control-solid` are both
 * specificity 0,2,0, and the solid rule comes later in the bundle — so the
 * unfocused solid appearance beat the focused base appearance, and only the
 * solid controls lost their focus state. Which is every control in this
 * product, because solid is what the forms use. */
.form-control:focus,
.form-select:focus,
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
    background-color: var(--bs-body-bg);
    border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent);
}
.form-check-input:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 15%, transparent);
}

/* Anything else somebody can reach with a keyboard. Buttons and links get
 * :focus-visible rather than :focus, so a ring appears for the keyboard and
 * not around every button somebody clicks. */
.btn:focus-visible,
.page-link:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 32%, transparent);
    border-radius: var(--sl-radius-sm);
}

.form-label {
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: -.005em;
    margin-bottom: 6px;
}
.form-text { font-size: 11.5px; line-height: 1.5; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    border-radius: var(--sl-radius);
    transition: background-color .13s ease, box-shadow .13s ease, color .13s ease;
}
.btn.btn-sm { border-radius: var(--sl-radius-sm); }
.btn.btn-icon { border-radius: var(--sl-radius-sm); }
.btn-primary { box-shadow: 0 1px 2px rgba(20, 31, 58, .12); }
.btn-primary:hover { box-shadow: var(--sl-shadow-lift); }


/* --- Tables --------------------------------------------------------------
 * A row people are reading across is worth marking. Twelve columns of small
 * text with no hover is where "which row was I on" comes from. */
.table thead th {
    font-size: 11px;
    letter-spacing: .04em;
}
.table tbody tr {
    transition: background-color .1s ease;
}
.table:not(.table-borderless) tbody tr:hover > td {
    background-color: var(--sl-line-soft);
}
.dt-container .dt-paging .page-link { border-radius: var(--sl-radius-sm); }

/* --- Tabs ---------------------------------------------------------------- */
.nav-line-tabs .nav-link {
    font-size: 13.5px;
    transition: color .13s ease, border-color .13s ease;
}

/* --- Badges and alerts --------------------------------------------------- */
.badge { border-radius: var(--sl-radius-sm); font-weight: 600; }
.alert { border-radius: var(--sl-radius); }

/* --- The settings sub-nav ------------------------------------------------
 * Same list, same inversion, same fix as the main sidebar: the items were
 * set in .fw-bold, so seventeen of them shouted at once and the group
 * headings above them did not. */
.menu .settings-group {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--bs-text-muted);
}
.menu .settings-group ~ .menu-item .menu-link {
    border-radius: var(--sl-radius);
}
.menu .settings-group ~ .menu-item .menu-link .menu-title {
    font-size: 13px;
    font-weight: 500;
}
.menu .settings-group ~ .menu-item .menu-link.active .menu-title {
    font-weight: 600;
}


/* --- No rule under the header ------------------------------------------- */
.app-header,
.app-header::before,
.app-header::after,
.app-toolbar,
#kt_app_header_container {
    border-bottom: 0 !important;
    box-shadow: none !important;
}