:root {
    /* =====================================================
       LTX Theme Foundation

       Foundation-only theme tokens.

       These establish:
       - Color identity
       - RGB color identity for opacity expressions
       - Theme intensity scales
       - Shared visual constants

       No component behavior should be defined here.
       ===================================================== */
    /* -----------------------------------------------------
       Color Identity
       ----------------------------------------------------- */
    --ltx-color-neutral: #dee2e6; /* #f8f9fa */
    --ltx-color-neutral-relaxed: #babbbc; /* 75% */
    --ltx-color-neutral-subtle: #9a9b9c; /* ~62% */
    --ltx-color-neutral-faint: #7c7d7d; /* ~50% */
    --ltx-color-activate-light: #f89e5d;
    --ltx-color-activate-base: #f37920;
    --ltx-color-activate-dark: #ab5410;
    --ltx-color-prep-light: #72c6ef;
    --ltx-color-prep-base: #4bafe1;
    --ltx-color-prep-dark: #30789c;
    --ltx-color-engage-light: #7ac470;
    --ltx-color-engage-base: #39b54a;
    --ltx-color-engage-dark: #1a7b30;
    --ltx-color-warning-light: #fff27a;
    --ltx-color-warning-base: #ffdd00;
    --ltx-color-warning-dark: #b89f00;
    --ltx-color-danger-light: #ff7a7f;
    /*--ltx-color-danger-base: #d71920;*/
    --ltx-color-danger-base: #dc3545;
    --ltx-color-danger-dark: #991116;
    --ltx-color-inverse: #212529;
    --ltx-color-folder: #d08f3f;
    /* -----------------------------------------------------
       RGB Color Identity
       ----------------------------------------------------- */
    --ltx-color-neutral-rgb: 222, 226, 230;
    --ltx-color-activate-rgb: 243, 121, 32;
    --ltx-color-activate-light-rgb: 248,158,93;
    --ltx-color-activate-dark-rgb: 171,84,16;
    --ltx-color-prep-rgb: 75, 175, 225;
    --ltx-color-prep-light-rgb: 114,198,239;
    --ltx-color-prep-dark-rgb: 48,120,156;
    --ltx-color-engage-rgb: 57, 181, 74;
    --ltx-color-engage-light-rgb: 122,196,112;
    --ltx-color-engage-dark-rgb: 26,123,48;
    --ltx-color-warning-rgb: 255, 221, 0;
    --ltx-color-danger-rgb: 215, 25, 32;
    --ltx-color-danger-dark-rgb: 153, 17, 22;
    /* -----------------------------------------------------
       Surface Background Scale

       Background/container colors.
       Separate from neutral foreground colors.
       ----------------------------------------------------- */
    --ltx-surface-base: rgb(var(--bs-dark-rgb));
    --ltx-surface-raised: color-mix(in srgb, rgb(var(--bs-dark-rgb)) 96%, white 4%);
    --ltx-surface-raised-strong: color-mix(in srgb, rgb(var(--bs-dark-rgb)) 92%, white 8%);
    --ltx-surface-sunken: color-mix(in srgb, rgb(var(--bs-dark-rgb)) 96%, black 4%);
    --ltx-surface-sunken-strong: color-mix(in srgb, rgb(var(--bs-dark-rgb)) 92%, black 8%);
    /* -----------------------------------------------------
   Theme Intensity Scale

   Generic intensity modifiers.
   Use with borders, backgrounds, overlays, etc.
   ----------------------------------------------------- */
    --ltx-intensity-full: 1.0;
    --ltx-intensity-relaxed: 0.75;
    --ltx-intensity-subtle: 0.50;
    --ltx-intensity-faint: 0.25;
    --ltx-intensity-whisper: 0.1;
    /* -----------------------------------------------------
       Shared Visual Constants
       ----------------------------------------------------- */

    --ltx-radius-sm: 4px;
    --ltx-radius-md: 6px;
    --ltx-transition-fast: 120ms ease;
}



/* =========================================================
   LTX Color Helpers

   Explicit color utilities for targeted one-off usage.
   These bypass theme context intentionally and should be
   used sparingly when a specific color token is required.
   ========================================================= */

.ltx-color-neutral {
    color: var(--ltx-color-neutral);
}

.ltx-bg-color-neutral {
    background-color: var(--ltx-color-neutral);
}

.ltx-color-neutral-relaxed {
    color: var(--ltx-color-neutral-relaxed);
}

.ltx-bg-color-neutral-relaxed {
    background-color: var(--ltx-color-neutral-relaxed);
}

.ltx-color-neutral-subtle {
    color: var(--ltx-color-neutral-subtle);
}

.ltx-bg-color-neutral-subtle {
    background-color: var(--ltx-color-neutral-subtle);
}

.ltx-color-neutral-faint {
    color: var(--ltx-color-neutral-faint);
}

.ltx-bg-color-neutral-faint {
    background-color: var(--ltx-color-neutral-faint);
}

.ltx-color-activate {
    color: var(--ltx-color-activate-base);
}

.ltx-bg-color-activate {
    background-color: var(--ltx-color-activate-base);
}

.ltx-color-activate-light {
    color: var(--ltx-color-activate-light);
}

.ltx-bg-color-activate-light {
    background-color: var(--ltx-color-activate-light);
}

.ltx-color-activate-dark {
    color: var(--ltx-color-activate-dark);
}

.ltx-bg-color-activate-dark {
    background-color: var(--ltx-color-activate-dark);
}

.ltx-color-prep {
    color: var(--ltx-color-prep-base);
}

.ltx-bg-color-prep {
    background-color: var(--ltx-color-prep-base);
}

.ltx-color-prep-light {
    color: var(--ltx-color-prep-light);
}

.ltx-bg-color-prep-light {
    background-color: var(--ltx-color-prep-light);
}

.ltx-color-prep-dark {
    color: var(--ltx-color-prep-dark);
}

.ltx-bg-color-prep-dark {
    background-color: var(--ltx-color-prep-dark);
}

.ltx-color-engage {
    color: var(--ltx-color-engage-base);
}

.ltx-bg-color-engage {
    background-color: var(--ltx-color-engage-base);
}

.ltx-color-engage-light {
    color: var(--ltx-color-engage-light);
}

.ltx-bg-color-engage-light {
    background-color: var(--ltx-color-engage-light);
}

.ltx-color-engage-dark {
    color: var(--ltx-color-engage-dark);
}

.ltx-bg-color-engage-dark {
    background-color: var(--ltx-color-engage-dark);
}

.ltx-color-warning {
    color: var(--ltx-color-warning-base);
}

.ltx-bg-color-warning {
    background-color: var(--ltx-color-warning-base);
}

.ltx-color-warning-light {
    color: var(--ltx-color-warning-light);
}

.ltx-bg-color-warning-light {
    background-color: var(--ltx-color-warning-light);
}

.ltx-color-warning-dark {
    color: var(--ltx-color-warning-dark);
}

.ltx-bg-color-warning-dark {
    background-color: var(--ltx-color-warning-dark);
}

.ltx-color-danger {
    color: var(--ltx-color-danger-base);
}

.ltx-bg-color-danger {
    background-color: var(--ltx-color-danger-base);
}

.ltx-color-danger-light {
    color: var(--ltx-color-danger-light);
}

.ltx-bg-color-danger-light {
    background-color: var(--ltx-color-danger-light);
}

.ltx-color-danger-dark {
    color: var(--ltx-color-danger-dark);
}

.ltx-bg-color-danger-dark {
    background-color: var(--ltx-color-danger-dark);
}

.ltx-text {
    color: var(--ltx-color-neutral);
}

.ltx-text-inverse {
    color: var(--ltx-color-inverse);
}

.ltx-bg-secondary {
    background-color: rgba(var(--bs-secondary-rgb), 0.17);
}

.ltx-bg-theme {
    background-color: var(--ltx-theme-color-base);
}

.ltx-bg-theme-dark {
    background-color: var(--ltx-theme-color-dark);
}

.ltx-bg-theme-light {
    background-color: var(--ltx-theme-color-light);
}

.ltx-color-theme {
    color: var(--ltx-theme-color-base);
}

.ltx-color-theme-dark {
    color: var(--ltx-theme-color-dark);
}

.ltx-color-theme-light {
    color: var(--ltx-theme-color-light);
}

.ltx-link-theme:hover {
    color: var(--ltx-theme-color-dark);
}

/* =========================================================
   LTX Theme Contexts

   Theme classes define the current workflow color family
   for all theme-aware descendants.
   ========================================================= */

.ltx-theme-activate {
    color: var(--ltx-color-neutral);
    --ltx-theme-color-light: var(--ltx-color-activate-light);
    --ltx-theme-color-base: var(--ltx-color-activate-base);
    --ltx-theme-color-dark: var(--ltx-color-activate-dark);
    --ltx-theme-rgb: var(--ltx-color-activate-rgb);
    --ltx-theme-rgb-light: var(--ltx-color-activate-light-rgb);
    --ltx-theme-rgb-dark: var(--ltx-color-activate-dark-rgb);
}

.ltx-theme-prep {
    color: var(--ltx-color-neutral);
    --ltx-theme-color-light: var(--ltx-color-prep-light);
    --ltx-theme-color-base: var(--ltx-color-prep-base);
    --ltx-theme-color-dark: var(--ltx-color-prep-dark);
    --ltx-theme-rgb: var(--ltx-color-prep-rgb);
    --ltx-theme-rgb-light: var(--ltx-color-prep-light-rgb);
    --ltx-theme-rgb-dark: var(--ltx-color-prep-dark-rgb);
}

.ltx-theme-engage {
    color: var(--ltx-color-neutral);
    --ltx-theme-color-light: var(--ltx-color-engage-light);
    --ltx-theme-color-base: var(--ltx-color-engage-base);
    --ltx-theme-color-dark: var(--ltx-color-engage-dark);
    --ltx-theme-rgb: var(--ltx-color-engage-rgb);
    --ltx-theme-rgb-light: var(--ltx-color-engage-light-rgb);
    --ltx-theme-rgb-dark: var(--ltx-color-engage-dark-rgb);
}


/* =========================================================
   LTX State Contexts
   ========================================================= */

.ltx-context-danger {
    --ltx-theme-color-light: var(--ltx-color-danger-light);
    --ltx-theme-color-base: var(--ltx-color-danger-base);
    --ltx-theme-color-dark: var(--ltx-color-danger-dark);
    --ltx-theme-rgb: var(--ltx-color-danger-rgb);
}

.ltx-context-warning {
    --ltx-theme-color-light: var(--ltx-color-warning-light);
    --ltx-theme-color-base: var(--ltx-color-warning-base);
    --ltx-theme-color-dark: var(--ltx-color-warning-dark);
    --ltx-theme-rgb: var(--ltx-color-warning-rgb);
}

.ltx-context-depo {
    --ltx-theme-color-light: var(--ltx-color-engage-light);
    --ltx-theme-color-base: var(--ltx-color-engage-base);
    --ltx-theme-color-dark: var(--ltx-color-engage-dark);
    --ltx-theme-rgb: var(--ltx-color-engage-rgb);
}

.ltx-context-trial {
    --ltx-theme-color-light: var(--ltx-color-engage-light);
    --ltx-theme-color-base: var(--ltx-color-engage-base);
    --ltx-theme-color-dark: var(--ltx-color-engage-dark);
    --ltx-theme-rgb: var(--ltx-color-engage-rgb);
}



    /* ---------------------------------------------------------
   Theme Context Resets
   --------------------------------------------------------- */

    .ltx-theme-activate button,
    .ltx-theme-prep button,
    .ltx-theme-engage button {
        /*color: var(--ltx-color-neutral);*/
        /*font: inherit;*/
    }

/* =========================================================
   LTX Surfaces

   Background utilities.
   Surface colors are separate from neutral foreground colors.
   ========================================================= */

.ltx-bg-base {
    background-color: var(--ltx-surface-base);
}

.ltx-bg-raised {
    background-color: var(--ltx-surface-raised);
}

.ltx-bg-raised-strong {
    background-color: var(--ltx-surface-raised-strong);
}

.ltx-bg-sunken {
    background-color: var(--ltx-surface-sunken);
}

.ltx-bg-sunken-strong {
    background-color: var(--ltx-surface-sunken-strong);
}

.ltx-theme-bg-relaxed {
    background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
}

.ltx-theme-bg-subtle {
    background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-subtle));
}

.ltx-theme-bg-faint {
    background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-faint));
}

/* =========================================================
   LTX Borders

   Border utilities.
   Thickness defines presence; intensity defines visual
   strength. Default borders are neutral.
   ========================================================= */


/* ---------------------------------------------------------
   Border Thickness
   --------------------------------------------------------- */

.ltx-border-thin {
    border: 1px solid;
}

.ltx-border-medium {
    border: 2px solid;
}

.ltx-border-thick {
    border: 3px solid;
}

/* ---------------------------------------------------------
   Border Intensity

   Unspecified = full/default intensity.

   Intensity modifiers progressively reduce visual weight.
   --------------------------------------------------------- */

.ltx-border-theme {
    border-color: var(--ltx-theme-color-base);
}

.ltx-border-theme-dark {
    border-color: var(--ltx-theme-color-dark);
}

.ltx-border-theme-light {
    border-color: var(--ltx-theme-color-light);
}

.ltx-border-relaxed {
    border-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-relaxed));
}

.ltx-border-subtle {
    border-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-subtle));
}

.ltx-border-faint {
    border-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-faint));
}

.ltx-theme-border-relaxed {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
}

.ltx-theme-border-subtle {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-subtle));
}

.ltx-theme-border-faint {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-faint));
}

/* =========================================================
   LTX Shape

   Shared radius utilities for consistent surface and control
   geometry across theme-aware UI.
   ========================================================= */

.ltx-radius-sm {
    border-radius: var(--ltx-radius-sm);
}

.ltx-radius-md {
    border-radius: var(--ltx-radius-md);
}

/* =========================================================
   LTX Hover Behaviors

   Reusable hover behaviors that express theme or neutral
   color intent without defining component-specific layout.

   Theme contexts provide the transition baseline so hover
   classes only define the resulting visual state.
   ========================================================= */

.ltx-theme-activate,
.ltx-theme-activate *,
.ltx-theme-prep,
.ltx-theme-prep *,
.ltx-theme-engage,
.ltx-theme-engage * {
    transition: color var(--ltx-transition-fast), background-color var(--ltx-transition-fast), border-color var(--ltx-transition-fast);
}


/* ---------------------------------------------------------
   Hover Color
   --------------------------------------------------------- */

.ltx-hover-color-neutral:hover {
    color: var(--ltx-color-neutral);
}

.ltx-hover-color-neutral-relaxed:hover {
    color: var(--ltx-color-neutral-relaxed);
}

.ltx-hover-color-neutral-subtle:hover {
    color: var(--ltx-color-neutral-subtle);
}

.ltx-hover-color-neutral-faint:hover {
    color: var(--ltx-color-neutral-faint);
}

.ltx-hover-color-theme:hover {
    color: var(--ltx-theme-color-base);
}

.ltx-hover-color-theme-light:hover {
    color: var(--ltx-theme-color-light);
}

.ltx-hover-color-theme-dark:hover {
    color: var(--ltx-theme-color-dark);
}

.ltx-hover-danger:hover {
    color: var(--ltx-color-danger-dark);
}

/* ---------------------------------------------------------
   Hover Background
   --------------------------------------------------------- */

.ltx-hover-bg-neutral-relaxed:hover {
    background-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-relaxed));
}

.ltx-hover-bg-neutral-subtle:hover {
    background-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-subtle));
}

.ltx-hover-bg-neutral-faint:hover {
    background-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-faint));
}

.ltx-hover-bg-theme-relaxed:hover {
    background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
}

.ltx-hover-bg-theme-subtle:hover {
    background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-subtle));
}

.ltx-hover-bg-theme-faint:hover {
    background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-faint));
}

.ltx-hover-bg-theme-whisper:hover {
    background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-whisper));
}


/* ---------------------------------------------------------
   Hover Border
   --------------------------------------------------------- */

.ltx-hover-border-neutral-relaxed:hover {
    border-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-relaxed));
}

.ltx-hover-border-neutral-subtle:hover {
    border-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-subtle));
}

.ltx-hover-border-neutral-faint:hover {
    border-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-faint));
}

.ltx-hover-border-theme-relaxed:hover {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
}

.ltx-hover-border-theme-subtle:hover {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-subtle));
}

.ltx-hover-border-theme-faint:hover {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-faint));
}

/* =========================================================
   LTX Interaction States

   Semantic interaction and content-state primitives.

   Theme contexts define color identity.

   Interaction states determine:
   - When theme color is expressed
   - How selection is rendered
   - How content presence is indicated

   These primitives are intentionally generic and are
   expected to be reused across:
   - Tree items
   - List items
   - Navigation items
   - Sort headers
   - Tag controls
   - Future theme-aware controls

   Feature components own layout.

   ThemeX owns interaction meaning.
   ========================================================= */

/* ---------------------------------------------------------
   Selectable

   Default selectable behavior.

   Neutral by default.
   Theme color is introduced on hover.

   Intended for:
   - Tree rows
   - List rows
   - Navigation items
   - Sort headers
   --------------------------------------------------------- */

.ltx-selectable {
    color: var(--ltx-color-neutral);
    border-color: transparent;
    background-color: transparent;
    cursor: pointer;
}
    .ltx-selectable:focus,
    .ltx-selectable:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .ltx-selectable:hover {
        border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-faint));
    }

.ltx-selectable-inverse {
    color: var(--ltx-color-neutral);
    border-color: transparent;
    background-color: transparent;
    cursor: pointer;
}

    .ltx-selectable-inverse:focus,
    .ltx-selectable-inverse:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .ltx-selectable-inverse:hover {
        color: rgba(var(--ltx-theme-rgb-light), var(--ltx-intensity-full));
        /*color: var(--ltx-theme-color-dark);*/
        /*border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-faint));*/
    }

/* ---------------------------------------------------------
   Selected

   Default selected behavior.

   Selection remains visually calm:
   - Background unchanged
   - Theme border
   - Theme text

   Intended as the default selected treatment.
   --------------------------------------------------------- */

.ltx-selected {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
}

/* ---------------------------------------------------------
   Selected Inverse

   Alternative selected rendering.

   Intended for controls where selected state should be
   immediately obvious.

   Typical examples:
   - Directory tree current item
   - Active navigation item

   Visual treatment may evolve over time without requiring
   component changes.
   --------------------------------------------------------- */

.ltx-selected-inverse {
    color: var(--ltx-color-inverse);
    /*border-color: var(--ltx-theme-color-light);*/
    background-color: rgba(var(--ltx-theme-rgb-light), var(--ltx-intensity-relaxed));
    /*background-color: var(--ltx-theme-color-light);*/
}

.ltx-selected-tint {
    border: 1px solid rgba(var(--ltx-theme-rgb), var(--ltx-intensity-full));
    /*background-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-whisper));*/
}

/* ---------------------------------------------------------
   Hydrated

   Indicates the control contains meaningful content.

   Examples:
   - Principal object has assigned tags
   - Folder contains items
   - Entity has associated records

   Hydrated is independent of:
   - Hover state
   - Selection state

   These states may coexist.
   --------------------------------------------------------- */

.ltx-hydrated {
    color: var(--ltx-theme-color-base);
}



/* =========================================================
   LTX Buttons

   Theme-aware button behavior.
   Default state stays neutral.
   Hover state uses current theme context.
   ========================================================= */

.ltx-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .25rem .5rem;
    font-size: 1rem;
    border-radius: var(--ltx-radius-sm);
    background-color: transparent;
    color: var(--ltx-color-neutral);
    cursor: pointer;
    text-decoration: none;
}

.ltx-btn-nav {
    border-color: rgba(var(--ltx-color-activate-dark-rgb), var(--ltx-intensity-relaxed));
    color: var(--ltx-color-neutral-relaxed);
}
    .ltx-btn-nav:hover {
        color: var(--ltx-color-neutral-rgb);
        font-weight:400;
        border-color: rgba(var(--ltx-color-activate-light-rgb), var(--ltx-intensity-full));
        text-decoration: none;
    }

.ltx-btn-action {
    border-color: rgba(var(--ltx-theme-rgb-light), var(--ltx-intensity-subtle));
    background-color: transparent;
}
    .ltx-btn-action:hover{
        color: var(--ltx-theme-color-light);
        border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
        text-decoration: none;
    }

.ltx-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-subtle));
    background: transparent;
    color: var(--ltx-color-neutral);
    border-radius: var(--ltx-radius-sm);
    cursor: pointer;
    line-height: 1;
    transition: color var(--ltx-transition-fast), border-color var(--ltx-transition-fast), background-color var(--ltx-transition-fast);
}

    .ltx-action-button:hover {
        border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
    }

.ltx-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ltx-theme-color-base);
    cursor: pointer;
    line-height: 1;
    transition: color var(--ltx-transition-fast), border-color var(--ltx-transition-fast), background-color var(--ltx-transition-fast);
}

    .ltx-icon-button:hover {
        color: rgba(var(--ltx-theme-rgb-light), var(--ltx-intensity-full));
    }

.ltx-cmd-btn-task {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 1.85rem;
    padding: 0 0.65rem;
    border: 1px solid rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-subtle));
    border-radius: var(--ltx-radius-sm);
    background-color: transparent;
    color: var(--ltx-color-neutral);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}

    .ltx-cmd-btn-task:hover {
        border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-full));
        color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-full));
        text-decoration: none;
    }

    .ltx-cmd-btn-task > i {
        font-size: 1rem;
        font-weight: 500;
        color: var(--ltx-theme-color-base);
    }

    .ltx-cmd-btn-task:hover > i {
        color: var(--ltx-theme-color-light);
    }

.ltx-cmd-btn-task-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 1.85rem;
    padding: 0 0.65rem;
    border: 1px solid var(--ltx-theme-color-dark);
    border-radius: var(--ltx-radius-sm);
    background-color: transparent;
    color: var(--ltx-color-neutral);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    transition: color var(--ltx-transition-fast), border-color var(--ltx-transition-fast), background-color var(--ltx-transition-fast);
}

    .ltx-cmd-btn-task-accent:hover {
        border-color: var(--ltx-theme-color-light);
        color: var(--ltx-theme-color-light);
        text-decoration: none;
    }

    .ltx-cmd-btn-task-accent > i {
        font-size: 1rem;
        font-weight: 500;
        color: var(--ltx-theme-color-base);
    }

    .ltx-cmd-btn-task-accent:hover > i {
        color: var(--ltx-color-neutral-relaxed);
    }

.ltx-cmd-btn-task-inverse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 1.85rem;
    padding: 0 0.65rem;
    border: 1px solid rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-relaxed));
    border-radius: var(--ltx-radius-sm);
    background-color: rgba(var(--ltx-theme-rgb-dark), var(--ltx-intensity-subtle));
    color: var(--ltx-color-neutral);
    cursor: pointer;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--ltx-transition-fast), border-color var(--ltx-transition-fast), background-color var(--ltx-transition-fast);
}

    .ltx-cmd-btn-task-inverse:hover {
        border-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-full));
        background-color: var(--ltx-theme-color-base);
        color: var(--ltx-color-neutral);
        text-decoration: none;
    }

    .ltx-cmd-btn-task-inverse > i {
        font-size: 1rem;
        font-weight: 500;
        color: var(--ltx-color-neutral);
    }

    .ltx-cmd-btn-task-inverse:hover > i {
        color: var(--ltx-color-neutral);
    }


.ltx-cmd-btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 1.85rem;
    padding: 0 0.65rem;
    border: 0;
    /*border: 1px solid rgba(var(--ltx-color-danger-rgb), var(--ltx-intensity-subtle));*/
    border-radius: var(--ltx-radius-sm);
    /*background-color: transparent;*/
    background-color: rgba(var(--ltx-color-danger-rgb), var(--ltx-intensity-subtle));
    color: var(--ltx-color-neutral-full);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}

    .ltx-cmd-btn-delete:hover {
        border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-full));
        text-decoration: none;
        color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-full));
        background-color: rgba(var(--ltx-color-danger-rgb), var(--ltx-intensity-full));
    }

    .ltx-cmd-btn-delete > i {
        font-size: 1rem;
        font-weight: 500;
        color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-relaxed));
    }

    .ltx-cmd-btn-task:hover > i {
        color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-full));
    }


.ltx-action-link {
    cursor: pointer;
    text-decoration: none;
}

    .ltx-action-link:hover {
        color: var(--ltx-theme-color-light);
        text-decoration: none;
    }

    .ltx-action-link:focus,
    .ltx-action-link:focus-visible {
        outline: none;
        box-shadow: none;
    }

.ltx-nav-link {
    cursor: pointer;
    text-decoration: none;
}
    .ltx-nav-link:hover {
        color: var(--ltx-color-activate-light);
        text-decoration: none;
    }

    .ltx-nav-link:focus,
    .ltx-nav-link:focus-visible {
        outline: none;
        box-shadow: none;
    }

/* =========================================================
   LTX Inputs

   Utilities for <input> and <textarea> 
   ========================================================= */

.ltx-input {
    border: 1px solid var(--ltx-color-neutral-subtle);
    background-color: var(--ltx-color-inverse);
    color: var(--ltx-color-neutral-relaxed);
    padding-left: 0.25rem;
}
    .ltx-input:focus {
        border-radius: var(--ltx-radius-sm);
        border-color: var(--ltx-color-neutral);
        outline:none;
        box-shadow:none;
    }

/* =========================================================
   LTX Icons

   Semantic icon definitions.
   Icons inherit color from their parent context and
   automatically participate in theme-aware controls.
   ========================================================= */

.ltx-icon-sm {
    font-size: 0.75rem;
}

.ltx-icon-md {
    font-size: 1rem;
}

.ltx-icon-lg {
    font-size: 1.25rem;
}

.ltx-icon-xl {
    font-size: 1.50rem;
}

.ltx-icon-xxl {
    font-size: 2.50rem;
}

/* ---------------------------------------------------------
   Bootstrap-backed semantic icons
   --------------------------------------------------------- */

.ltx-icon-add,
.ltx-icon-collapsed,
.ltx-icon-expanded,
.ltx-icon-delete,
.ltx-icon-check,
.ltx-icon-edit,
.ltx-icon-folder,
.ltx-icon-export,
.ltx-icon-import,
.ltx-icon-upload,
.ltx-icon-bates,
.ltx-icon-refresh,
.ltx-icon-remove,
.ltx-icon-search,
.ltx-icon-hamburger,
.ltx-icon-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.ltx-icon-collapsed,
.ltx-icon-expanded {
    color: var(--ltx-color-activate-base);
    cursor: pointer;
}

.ltx-icon-folder {
    color: var(--ltx-color-neutral-subtle);
}

    .ltx-icon-add::before,
    .ltx-icon-collapsed::before,
    .ltx-icon-expanded::before,
    .ltx-icon-delete::before,
    .ltx-icon-check::before,
    .ltx-icon-edit::before,
    .ltx-icon-folder::before,
    .ltx-icon-export::before,
    .ltx-icon-upload::before,
    .ltx-icon-import::before,
    .ltx-icon-bates::before, 
    .ltx-icon-refresh::before,
    .ltx-icon-remove::before,
    .ltx-icon-search::before,
    .ltx-icon-hamburger::before,
    .ltx-icon-settings::before {
        font-family: bootstrap-icons;
    }

    .ltx-icon-add::before {
        content: "\f64d";
    }

    .ltx-icon-collapsed::before {
        content: "\f231"; /* caret-right-fill */
    }

    .ltx-icon-expanded::before {
        content: "\f229"; /* caret-down-fill */
    }

    .ltx-icon-delete::before {
        content: "\f5dd";
    }

    .ltx-icon-check::before {
        content: "\f633"; /* check-lg */
    }

    .ltx-icon-edit::before {
        content: "\f4ca"; /* pencil-square */
    }

    .ltx-icon-folder::before {
        content: "\f3d7"; /* folder */
    }

    .ltx-icon-export::before {
        content: "\f1c5";
    }

    .ltx-icon-upload::before {
        content: "\f1c0";
    }

    .ltx-icon-import::before {
        content: "\f1ba";
    }

    .ltx-icon-bates::before {
        content: "\f360";
    }

    .ltx-icon-refresh::before {
        content: "\f1a7";
    }

    .ltx-icon-remove::before {
        content: "\f659";
    }

    .ltx-icon-search::before {
        content: "\f52a";
    }

    .ltx-icon-hamburger::before {
        content: "\f479";
    }

    .ltx-icon-settings::before {
        content: "\f3e5";
    }


/* ---------------------------------------------------------
   SVG-backed semantic icons
   --------------------------------------------------------- */

.ltx-icon-tag,
.ltx-icon-document,
.ltx-icon-media-clip,
.ltx-icon-exhibit-pdf,
.ltx-icon-exhibit-clip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
}

.ltx-icon-tag {
    mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/tag.svg") center / contain no-repeat;
    -webkit-mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/tag.svg") center / contain no-repeat;
}

.ltx-icon-document {
    mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/File_wht.svg") center / contain no-repeat;
    -webkit-mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/File_wht.svg") center / contain no-repeat;
}

.ltx-icon-media-clip {
    mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/Film_wht.svg") center / contain no-repeat;
    -webkit-mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/Film_wht.svg") center / contain no-repeat;
}

.ltx-icon-exhibit-pdf {
    mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/File_EX_wht.svg") center / contain no-repeat;
    -webkit-mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/File_EX_wht.svg") center / contain no-repeat;
}

.ltx-icon-exhibit-clip {
    mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/Film_EX_wht.svg") center / contain no-repeat;
    -webkit-mask: url("/_content/Litigen.CaseManager.UI.Shared/icons/ltx/Film_EX_wht.svg") center / contain no-repeat;
}

/* ---------------------------------------------------------
   SVG-backed semantic banners
   --------------------------------------------------------- */
.ltx-presentation-splash {
    width: 60%;
    max-width: 620px;
    min-width: 320px;
    height: auto;
    user-select: none;
    pointer-events: none;
}

/* =========================================================
   LTX Checkbox
   ========================================================= */

.ltx-checkbox {
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    border: 1px solid rgba(var(--ltx-theme-rgb), var(--ltx-intensity-full));
    border-radius: var(--ltx-radius-sm);
    background-color: transparent;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: border-color 120ms ease, background-color 120ms ease;
}

    .ltx-checkbox:hover {
        background-color: rgba(var(--ltx-theme-rgb), 0.15);
    }

    .ltx-checkbox:checked {
        border-color: var(--ltx-theme-color-light);
        background-color: transparent;
    }

        .ltx-checkbox:checked::before {
            content: "✓";
            color: var(--ltx-theme-color-light);
            font-size: 0.75rem;
            font-weight: 900;
            line-height: 1;
            transform: translateY(-0.02rem);
        }

    .ltx-checkbox:focus,
    .ltx-checkbox:focus-visible {
        outline: none;
        box-shadow: none;
    }

/* ---------------------------------------------------------
   Misc Utilities
   --------------------------------------------------------- */

.ltx-tbl-sort-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ltx-color-neutral-subtle);
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
    border-right: 1px solid rgba(var(--bs-secondary-rgb), 0.35) !important;
    box-shadow: none !important;
}

    .ltx-tbl-sort-header:hover {
        color: var(--ltx-color-neutral);
        background-color: rgba(var(--bs-secondary-rgb), 0.12);
    }

.ltx-tbl-sort-header-active {
    color: var(--ltx-color-neutral);
    background-color: rgba(var(--bs-secondary-rgb), 0.12);
    border-bottom: 1px solid var(--ltx-theme-color-base) !important;
}

.ltx-border-panel {
    border-color: rgba(var(--bs-secondary-rgb), 0.22) !important;
}

.ltx-section-label {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ltx-color-neutral);
}

/* ---------------------------------------------------------
   Dark Scrollbar
   --------------------------------------------------------- */

.ltx-scroll-dark {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-whisper)) transparent;
}

    .ltx-scroll-dark::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .ltx-scroll-dark::-webkit-scrollbar-track {
        background: transparent;
    }

    .ltx-scroll-dark::-webkit-scrollbar-thumb {
        background-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-whisper));
        border-radius: 999px;
    }

        .ltx-scroll-dark::-webkit-scrollbar-thumb:hover,
        .ltx-scroll-dark::-webkit-scrollbar-thumb:active {
            background-color: rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-whisper));
        }

/* =========================================================
   LTX Toggle Group

   Single-select toggle control group.
   Theme-aware via parent/current ltx-theme-* context.
   ========================================================= */

.ltx-toggle-container {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}

.ltx-toggle-container-fill-parent {
    width: 100%;
}

.ltx-toggle-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ltx-color-neutral-subtle);
    line-height: 1;
}

.ltx-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: var(--ltx-toggle-gap, 0.35rem);
}

.ltx-toggle-group-inline {
    width: auto;
}

.ltx-toggle-group-block,
.ltx-toggle-group-fill-parent {
    display: flex;
    width: 100%;
}

.ltx-toggle-option {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0 0.65rem;
    border: 1px solid rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-subtle));
    border-radius: var(--ltx-radius-sm);
    background-color: transparent;
    color: var(--ltx-color-neutral);
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

    .ltx-toggle-option:hover {
        border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
        color: var(--ltx-theme-color-light);
    }

.ltx-toggle-option-active {
    border-color: var(--ltx-theme-color-base);
    background-color: var(--ltx-theme-color-base);
    color: var(--ltx-color-inverse);
}

    .ltx-toggle-option-active:hover {
        border-color: var(--ltx-theme-color-light);
        background-color: var(--ltx-theme-color-light);
        color: var(--ltx-color-inverse);
    }

.ltx-toggle-option:focus,
.ltx-toggle-option:focus-visible {
    outline: none;
    box-shadow: none;
}

.ltx-toggle-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ltx-toggle-sizing-dynamic .ltx-toggle-option {
    width: auto;
}

.ltx-toggle-sizing-uniform .ltx-toggle-option {
    flex: 0 0 auto;
}

.ltx-toggle-sizing-fill .ltx-toggle-option {
    flex: 1 1 0;
}

.ltx-toggle-select {
    appearance: none;
    width: auto;
    min-width: var(--ltx-toggle-select-min-width, 9rem);
    min-height: 1.85rem;
    padding: 0 1.75rem 0 0.55rem;
    border: 1px solid rgba(var(--ltx-color-neutral-rgb), var(--ltx-intensity-subtle));
    border-radius: var(--ltx-radius-sm);
    background-color: var(--ltx-surface-sunken);
    color: var(--ltx-color-neutral);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--ltx-theme-color-base) 50%), linear-gradient(135deg, var(--ltx-theme-color-base) 50%, transparent 50%);
    background-position: calc(100% - 0.85rem) 50%, calc(100% - 0.55rem) 50%;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    background-repeat: no-repeat;
}

.ltx-toggle-group-fill-parent .ltx-toggle-select {
    width: 100%;
}

.ltx-toggle-select:hover {
    border-color: rgba(var(--ltx-theme-rgb), var(--ltx-intensity-relaxed));
}

.ltx-toggle-select:focus,
.ltx-toggle-select:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--ltx-theme-color-base);
}

.ltx-toggle-select option {
    background-color: var(--ltx-surface-base);
    color: var(--ltx-color-neutral);
}
    .ltx-toggle-select option:checked {
        background-color: rgba(var(--ltx-theme-rgb), 0.28);
        color: var(--ltx-color-neutral);
    }

.ltx-toggle-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ltx-color-neutral-subtle);
    line-height: 1;
}

/* =========================================================
   LTX Binder Decks for Exhibits View
   ========================================================= */

.ltx-binder-deck {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.25rem;
    background: rgba(255, 255, 255, 0.035);
}

.ltx-binder-deck-header {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.25rem;
}
.ltx-binder-deck-header-active {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.25rem;
    /*background-color: rgba(var(--ltx-color-neutral-rgb), 0.03);*/
    border-bottom: 1px solid rgba(var(--ltx-theme-rgb), 0.4);
}

.ltx-binder-deck-title {
    flex: 1 1 auto;
    cursor: pointer;
    color: var(--ltx-text, #f8f9fa);
}

.ltx-binder-deck-active {
    background-color: rgba(var(--ltx-color-neutral-rgb), 0.1);
    border: 2px solid rgba(var(--ltx-theme-rgb), 0.75);
    border-radius: 0.35rem;
    overflow: hidden;
}


.ltx-binder-deck-body {
    display: flex;
    flex-direction: column;
}

.ltx-binder-deck-row {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.1rem 0.25rem;
    min-height: 1.35rem;
    background: rgba(0, 0, 0, 0.08);
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
    .ltx-binder-deck-row:hover {
        background-color: rgba(var(--ltx-theme-rgb), 0.06);
    }

    .ltx-binder-deck-row-selected {
        background-color: rgba(var(--ltx-theme-rgb), 0.10);
        box-shadow: inset 3px 0 0 var(--ltx-theme-color-light);
    }

    .ltx-binder-deck-row-selected:hover {
        background-color: rgba(var(--ltx-theme-rgb), 0.14);
    }
    .ltx-binder-deck-row + .ltx-binder-deck-row {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

.ltx-binder-deck-row-pending {
    justify-content: center;
    color: var(--ltx-color-muted);
}