/* ============================================================================
   Larkon light-mode palette (17-May-2026)
   Per client spec:
     - Primary / accent:        #7CB342 (green — buttons, active tabs, CTAs)
     - Page background:         #F5F5F5
     - Card / panel background: #E8E8E8
     - Border / divider:        #C8C8C8
     - Primary text:            #4A4A4A
     - Secondary text:          #8A8A8A
     - Button text on green:    #FFFFFF
   Buttons get a subtle gradient (lighter → darker green).
   Cards get a soft drop shadow for the glossy look.
   This file is loaded AFTER tw-shell-skin.css so its rules win on source order
   for any property where specificity ties.

   NOTE: this file scopes EVERY rule under html[data-bs-theme="light"] so dark
   mode is completely untouched.
   ============================================================================ */

/* Slightly wider sidebar — was clamp(200px, 16vw, 250px), bumped per client
   "thori si bari kro" (17-May-2026).
   Applied to BOTH light AND dark themes per client request — dark theme sidebar
   should match the same width as light. */
html body.tw-shell {
    --bs-main-nav-width: clamp(230px, 18vw, 290px) !important;
}

html[data-bs-theme="light"] {
    /* 17-May-2026 v2 — client-approved refined palette.
       Brighter accent green (#3BC800), warmer neutral panel (#EAEAEA),
       softer borders (#D5D5D5). */
    --larkon-accent:        #3BC800;
    --larkon-accent-hover:  #2EAA00;
    --larkon-accent-light:  #5DDC2F;
    --larkon-accent-dark:   #258B00;
    --larkon-accent-soft:   rgba(59, 200, 0, 0.10);
    --larkon-accent-ring:   rgba(59, 200, 0, 0.30);
    --larkon-bg:            #F5F5F5;
    --larkon-card:          #EAEAEA;
    --larkon-shell:         #4E4E4E;  /* sidebar + topbar dark gradient base */
    --larkon-shell-dark:    #3D3D3D;  /* gradient bottom */
    --larkon-on-shell:      #FFFFFF;  /* white text on dark shell */
    --larkon-on-shell-muted:rgba(255,255,255,0.65);  /* muted text on dark shell */
    --larkon-border:        #D5D5D5;
    --larkon-text:          #4A4A4A;
    --larkon-text-muted:    #8A8A8A;
    --larkon-on-accent:     #FFFFFF;

    /* Override the shell's own variables so existing rules using them inherit
       the new palette without needing per-rule overrides. */
    --pg-bg:        var(--larkon-bg);
    --pg-surface:   var(--larkon-card);
    --pg-surface-2: var(--larkon-card);
    --pg-elev:      var(--larkon-card);
    --pg-border:    var(--larkon-border);
    --pg-border-2:  var(--larkon-border);
    --pg-text:      var(--larkon-text);
    --pg-text-2:    var(--larkon-text);
    --pg-text-3:    var(--larkon-text-muted);
    --pg-text-4:    var(--larkon-text-muted);
    --pg-accent:    var(--larkon-accent);

    /* Bootstrap primary remap so any plain .btn-primary picks up the palette.
       Also kill the dark sidebar gradient by overriding --bs-main-nav-bg at the
       html level — app.css sets it to a dark navy gradient when
       data-menu-color="dark", but our html[data-bs-theme="light"] selector
       loads after, so source order wins. */
    --bs-primary:        var(--larkon-accent);
    --bs-primary-rgb:    59, 200, 0;
    --bs-primary-text-emphasis: #258B00;
    --bs-primary-bg-subtle: var(--larkon-accent-soft);
    --bs-primary-border-subtle: var(--larkon-accent-ring);

    --bs-main-nav-bg:               var(--larkon-shell);
    --bs-main-nav-item-color:       var(--larkon-on-shell);
    --bs-main-nav-item-hover-bg:    var(--larkon-accent-soft);
    --bs-main-nav-item-hover-color: var(--larkon-accent-hover);
    --bs-main-nav-border-color:     var(--larkon-border);

    --bs-topbar-bg:           var(--larkon-shell);
    --bs-topbar-item-color:   var(--larkon-on-shell);
    --bs-topbar-search-bg:    #FFFFFF;

    --tw-bg:                  var(--larkon-bg);
    --tw-text:                var(--larkon-text);
}
/* Same overrides at higher specificity for when data-menu-color is set,
   so app.css's `html[data-menu-color=dark]` (specificity 0,1,1) can't reinstate
   the dark navy gradient. */
html[data-bs-theme="light"][data-menu-color],
html[data-bs-theme="light"][data-menu-color="dark"],
html[data-bs-theme="light"][data-menu-color="light"],
html[data-bs-theme="light"][data-menu-color="brand"] {
    --bs-main-nav-bg:               var(--larkon-shell) !important;
    --bs-main-nav-item-color:       var(--larkon-on-shell) !important;
    --bs-main-nav-item-hover-bg:    var(--larkon-accent-soft) !important;
    --bs-main-nav-item-hover-color: var(--larkon-accent-hover) !important;
}

/* ── Page canvas ────────────────────────────────────────────────────────── */
html[data-bs-theme="light"] body,
html[data-bs-theme="light"] body.tw-shell,
html[data-bs-theme="light"] body.tw-shell .page-content,
html[data-bs-theme="light"] body.tw-shell .wrapper .page-content {
    background: var(--larkon-bg) !important;
    background-color: var(--larkon-bg) !important;
    background-image: none !important;
    color: var(--larkon-text) !important;
}

/* ── Topbar — dark gradient with shaded depth (vignette + edge shading) ── */
html[data-bs-theme="light"] body.tw-shell #tw-topbar {
    background-color: #4E4E4E !important;
    background-image:
        /* Side vignette — darker at left/right edges, lighter middle */
        radial-gradient(ellipse 80% 120% at 50% 60%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%),
        /* Top specular highlight — subtle white sheen on upper edge */
        linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%),
        /* Base gradient #4E4E4E → #3D3D3D */
        linear-gradient(180deg, #4E4E4E 0%, #3D3D3D 100%) !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),    /* top inner highlight */
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),         /* bottom inner shadow */
        0 2px 6px rgba(0, 0, 0, 0.18) !important;   /* outer drop shadow */
}
/* (17-May-2026) Removed the green accent line under the topbar AND on the sidebar
   edges per client — they were creating visible green stripes around the chrome. */
html[data-bs-theme="light"] body.tw-shell #tw-topbar::after {
    display: none !important;
    background: none !important;
    content: none !important;
}
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav::before,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav::after {
    display: none !important;
    background: none !important;
    content: none !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar a,
html[data-bs-theme="light"] body.tw-shell #tw-topbar span,
html[data-bs-theme="light"] body.tw-shell #tw-topbar button {
    color: #FFFFFF !important;
}
html[data-bs-theme="light"] body.tw-shell .tw-topbar-wordmark { color: #FFFFFF !important; }
/* Search bar — dark recessed look matching topbar */
html[data-bs-theme="light"] body.tw-shell .tw-topbar-search {
    background: rgba(0,0,0,0.18) !important;
    border: 1px solid rgba(0,0,0,0.35) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25) !important;
}
html[data-bs-theme="light"] body.tw-shell .tw-topbar-search iconify-icon {
    color: rgba(255,255,255,0.55) !important;
}
html[data-bs-theme="light"] body.tw-shell .tw-topbar-search-input {
    color: #FFFFFF !important;
    background: transparent !important;
}
html[data-bs-theme="light"] body.tw-shell .tw-topbar-search-input::placeholder { color: rgba(255,255,255,0.50) !important; }
html[data-bs-theme="light"] body.tw-shell .tw-topbar-search:focus-within {
    border-color: var(--larkon-accent) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 0 3px var(--larkon-accent-ring) !important;
    background: rgba(0,0,0,0.22) !important;
}

/* Topbar icon buttons — white icons on the dark gradient topbar */
html[data-bs-theme="light"] body.tw-shell #tw-topbar .tw-icon-btn iconify-icon {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar .tw-icon-btn:hover {
    background: rgba(255,255,255,0.12) !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar .tw-icon-btn:hover iconify-icon {
    color: #FFFFFF !important;
}

/* User chip (FRUTANA pill) — fully blend with topbar (no bg, no border) */
html[data-bs-theme="light"] body.tw-shell .tw-user-chip {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
html[data-bs-theme="light"] body.tw-shell .tw-user-chip:hover {
    background: rgba(255,255,255,0.08) !important;
    border: 0 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

/* Hamburger menu toggle (top-left) — remove the white border + tan bg */
html[data-bs-theme="light"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle,
html[data-bs-theme="light"] body.tw-shell #tw-mobile-menu-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle iconify-icon,
html[data-bs-theme="light"] body.tw-shell #tw-mobile-menu-toggle iconify-icon {
    color: #FFFFFF !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle:hover {
    background: rgba(255,255,255,0.10) !important;
}

/* Search input — ID selector to beat tw-shell-skin.css line 1299's
   `html[data-bs-theme="light"] body.tw-shell #tw-search-trigger` which sets
   white bg + dark text. We want dark recessed look that blends with topbar. */
html[data-bs-theme="light"] body.tw-shell #tw-search-trigger {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-search-trigger:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-search-trigger::placeholder {
    color: rgba(255,255,255,0.50) !important;
}
/* Also kill tw-shell-skin's "topbar :not(.tw-icon-btn) iconify-icon { color:#52525b }"
   override for the search magnifier icon — should be white-ish on dark topbar. */
html[data-bs-theme="light"] body.tw-shell #tw-topbar .tw-topbar-search iconify-icon.iconify-icon.iconify-icon {
    color: rgba(255,255,255,0.55) !important;
}
html[data-bs-theme="light"] body.tw-shell .tw-user-name    { color: #FFFFFF !important; }
html[data-bs-theme="light"] body.tw-shell .tw-user-company { color: rgba(255,255,255,0.65) !important; }
html[data-bs-theme="light"] body.tw-shell .tw-user-chevron { color: rgba(255,255,255,0.65) !important; }

/* Breadcrumb text in topbar — inline styles `color:#b4b4b4` (items) and
   `color:#e6e6e6` (current/last) are baked into _TailwindTopbar.cshtml.
   Override them so breadcrumbs read white on the dark gradient topbar. */
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#b4b4b4"],
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #b4b4b4"] {
    color: rgba(255,255,255,0.75) !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#e6e6e6"],
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #e6e6e6"] {
    color: #FFFFFF !important;
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#4f4f56"],
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #4f4f56"] {
    color: rgba(255,255,255,0.40) !important;  /* breadcrumb separator '/' */
}
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#6e6e76"],
html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #6e6e76"] {
    color: rgba(255,255,255,0.65) !important;  /* date-pill muted text */
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
/* High specificity to overpower the older `[data-bs-theme][data-menu-color]`
   default-dark rule in tw-shell-skin.css. */
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav,
html[data-bs-theme="light"][data-menu-color="light"] body.tw-shell .wrapper .main-nav,
html[data-bs-theme="light"][data-menu-color="dark"] body.tw-shell .wrapper .main-nav {
    background: var(--larkon-card) !important;
    background-color: var(--larkon-card) !important;
    background-image: none !important;
    border-right: none !important;
    box-shadow: 1px 0 0 var(--larkon-border), 2px 0 12px rgba(0, 0, 0, 0.04) !important;
    color: var(--larkon-text) !important;
    --bs-main-nav-bg:               var(--larkon-card);
    --bs-main-nav-item-color:       var(--larkon-text);
    --bs-main-nav-item-hover-bg:    var(--larkon-accent-soft);
    --bs-main-nav-item-hover-color: var(--larkon-accent-hover);
    --bs-main-nav-item-active-bg:   var(--larkon-accent-soft);
    --bs-main-nav-item-active-color: var(--larkon-accent-hover);
}
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .scrollbar,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .simplebar-wrapper,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .simplebar-mask,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .simplebar-offset,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .simplebar-content,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .logo-box {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav a {
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link:hover,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link.active {
    background: var(--larkon-accent-soft) !important;
    color: var(--larkon-accent-hover) !important;
    border-left: 3px solid var(--larkon-accent) !important;
    padding-left: calc(0.75rem - 3px) !important;
}
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link iconify-icon,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link .ti,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link i {
    color: var(--larkon-text-muted) !important;
}
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link:hover iconify-icon,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .nav-link.active iconify-icon {
    color: var(--larkon-accent) !important;
}
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-title {
    color: var(--larkon-text-muted) !important;
    font-weight: 700 !important;
}

/* ── Cards (Bootstrap + .fin-card family) — flat #EAEAEA per client spec ── */
html[data-bs-theme="light"] body.tw-shell .page-content .card,
html[data-bs-theme="light"] body.tw-shell .fin-card,
html[data-bs-theme="light"] body.tw-shell .fin-card-alerts,
html[data-bs-theme="light"] body.tw-shell .fin-card-header,
html[data-bs-theme="light"] body.tw-shell .fin-card-body,
html[data-bs-theme="light"] body.tw-shell .fin-strip-cell {
    background: var(--larkon-card) !important;
    background-color: var(--larkon-card) !important;
    background-image: none !important;
    border: 1px solid var(--larkon-border) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 6px -1px rgba(0, 0, 0, 0.08) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .page-content .card-header,
html[data-bs-theme="light"] body.tw-shell .fin-card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-strip-cell-num { color: var(--larkon-text) !important; }
html[data-bs-theme="light"] body.tw-shell .fin-strip-cell-lbl { color: var(--larkon-text-muted) !important; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* Primary green button — subtle gradient (lighter → darker) for the glossy look. */
html[data-bs-theme="light"] body.tw-shell .btn-primary,
html[data-bs-theme="light"] body.tw-shell button.btn-primary,
html[data-bs-theme="light"] body.tw-shell .btn-success,
html[data-bs-theme="light"] body.tw-shell button.btn-success,
html[data-bs-theme="light"] body.tw-shell .fin-btn-primary,
html[data-bs-theme="light"] body.tw-shell .larkon-confirm-btn.is-confirm.v-success {
    background: linear-gradient(180deg, var(--larkon-accent-light) 0%, var(--larkon-accent) 50%, var(--larkon-accent-hover) 100%) !important;
    border: 1px solid var(--larkon-accent-hover) !important;
    color: var(--larkon-on-accent) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
html[data-bs-theme="light"] body.tw-shell .btn-primary:hover,
html[data-bs-theme="light"] body.tw-shell button.btn-primary:hover,
html[data-bs-theme="light"] body.tw-shell .btn-success:hover,
html[data-bs-theme="light"] body.tw-shell button.btn-success:hover {
    background: linear-gradient(180deg, var(--larkon-accent) 0%, var(--larkon-accent-hover) 60%, #5C9230 100%) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    color: var(--larkon-on-accent) !important;
}
html[data-bs-theme="light"] body.tw-shell .btn-primary:active,
html[data-bs-theme="light"] body.tw-shell .btn-success:active {
    background: linear-gradient(180deg, var(--larkon-accent-hover) 0%, #5C9230 100%) !important;
}

/* Outline variant */
html[data-bs-theme="light"] body.tw-shell .btn-outline-primary,
html[data-bs-theme="light"] body.tw-shell .btn-outline-success {
    background: #FFFFFF !important;
    border: 1px solid var(--larkon-accent) !important;
    color: var(--larkon-accent-hover) !important;
}
html[data-bs-theme="light"] body.tw-shell .btn-outline-primary:hover,
html[data-bs-theme="light"] body.tw-shell .btn-outline-success:hover {
    background: var(--larkon-accent-soft) !important;
    color: var(--larkon-accent-hover) !important;
}

/* Secondary button — neutral. */
html[data-bs-theme="light"] body.tw-shell .btn-secondary,
html[data-bs-theme="light"] body.tw-shell .btn-outline-secondary {
    background: #FFFFFF !important;
    border: 1px solid var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .btn-secondary:hover,
html[data-bs-theme="light"] body.tw-shell .btn-outline-secondary:hover {
    background: var(--larkon-card) !important;
    border-color: var(--larkon-text-muted) !important;
}

/* ── Tabs + Nav ──────────────────────────────────────────────────────── */
html[data-bs-theme="light"] body.tw-shell .nav-tabs {
    border-bottom: 1px solid var(--larkon-border) !important;
}
html[data-bs-theme="light"] body.tw-shell .nav-tabs .nav-link {
    color: var(--larkon-text-muted) !important;
    border: 1px solid transparent !important;
}
html[data-bs-theme="light"] body.tw-shell .nav-tabs .nav-link:hover {
    color: var(--larkon-accent-hover) !important;
    border-bottom-color: var(--larkon-accent-soft) !important;
}
html[data-bs-theme="light"] body.tw-shell .nav-tabs .nav-link.active {
    color: var(--larkon-accent-hover) !important;
    border-color: var(--larkon-border) var(--larkon-border) var(--larkon-card) !important;
    background: var(--larkon-card) !important;
    border-bottom: 3px solid var(--larkon-accent) !important;
}

/* ── Forms ──────────────────────────────────────────────────────────── */
html[data-bs-theme="light"] body.tw-shell .form-control,
html[data-bs-theme="light"] body.tw-shell .form-select,
html[data-bs-theme="light"] body.tw-shell .fin-input,
html[data-bs-theme="light"] body.tw-shell select.fin-input,
html[data-bs-theme="light"] body.tw-shell textarea.fin-input {
    background: #FFFFFF !important;
    border: 1px solid var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .form-control::placeholder,
html[data-bs-theme="light"] body.tw-shell .fin-input::placeholder {
    color: var(--larkon-text-muted) !important;
}
html[data-bs-theme="light"] body.tw-shell .form-control:focus,
html[data-bs-theme="light"] body.tw-shell .form-select:focus,
html[data-bs-theme="light"] body.tw-shell .fin-input:focus {
    border-color: var(--larkon-accent) !important;
    box-shadow: 0 0 0 3px var(--larkon-accent-ring) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────── */
html[data-bs-theme="light"] body.tw-shell .table {
    color: var(--larkon-text) !important;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--larkon-border);
    --bs-table-hover-bg: var(--larkon-accent-soft);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
}
html[data-bs-theme="light"] body.tw-shell .table thead {
    background: var(--larkon-card) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .table th { color: var(--larkon-text-muted) !important; font-weight: 700; }
html[data-bs-theme="light"] body.tw-shell .table td { border-color: var(--larkon-border) !important; }

/* ── Dropdown menus ─────────────────────────────────────────────────── */
html[data-bs-theme="light"] body.tw-shell .dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid var(--larkon-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
html[data-bs-theme="light"] body.tw-shell .dropdown-item { color: var(--larkon-text) !important; }
html[data-bs-theme="light"] body.tw-shell .dropdown-item:hover,
html[data-bs-theme="light"] body.tw-shell .dropdown-item:focus,
html[data-bs-theme="light"] body.tw-shell .dropdown-item.active {
    background: var(--larkon-accent-soft) !important;
    color: var(--larkon-accent-hover) !important;
}

/* ── Modals ─────────────────────────────────────────────────────────── */
html[data-bs-theme="light"] body.tw-shell .modal-content {
    background: var(--larkon-card) !important;
    border: 1px solid var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .modal-header,
html[data-bs-theme="light"] body.tw-shell .modal-footer {
    border-color: var(--larkon-border) !important;
}

/* ── Misc accents ───────────────────────────────────────────────────── */
html[data-bs-theme="light"] body.tw-shell a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--larkon-accent-hover);
}
html[data-bs-theme="light"] body.tw-shell hr { border-color: var(--larkon-border) !important; }
html[data-bs-theme="light"] body.tw-shell .badge.bg-primary,
html[data-bs-theme="light"] body.tw-shell .badge.bg-success {
    background: var(--larkon-accent) !important;
    color: var(--larkon-on-accent) !important;
}

/* ── Toast confirm (Larkon toast system) — keep green CTA ─────────── */
html[data-bs-theme="light"] .larkon-confirm-btn.is-confirm.v-success {
    background: linear-gradient(180deg, var(--larkon-accent-light) 0%, var(--larkon-accent-hover) 100%) !important;
    border-color: var(--larkon-accent-hover) !important;
}

/* ════════════════════════════════════════════════════════════════════
   Module launcher (Dashboard/Index2 — "_ModernModuleLauncherLanding")
   Existing CSS in that view hardcodes:
     - .lin-card  bg #ffffff
     - .lin-cta-primary bg #18181b (BLACK!)
   Override here so light theme follows the spec instead.
   ═══════════════════════════════════════════════════════════════════ */
html[data-bs-theme="light"] .lin-root {
    color: var(--larkon-text);
    /* (17-May-2026 v2) Launcher root container had its own #f4f4f5 background which
       was masking the spec's #F5F5F5. Force transparent so the parent page-content
       shows through with the correct palette color. */
    background: transparent !important;
    background-color: transparent !important;
}
/* Triple-class .lin-card.lin-card.lin-card to beat any inline-style block
   in _ModernModuleLauncherLanding.cshtml that uses the simple .lin-card selector.
   Flat #EAEAEA per client spec — no gradient. Subtle shadow for depth. */
html[data-bs-theme="light"] .lin-root .lin-card.lin-card.lin-card {
    background: var(--larkon-card) !important;
    background-color: var(--larkon-card) !important;
    background-image: none !important;
    border: 1px solid var(--larkon-border) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 6px -1px rgba(0, 0, 0, 0.08) !important;
    color: var(--larkon-text) !important;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html[data-bs-theme="light"] .lin-root .lin-card.lin-card.lin-card:hover {
    background: var(--larkon-card) !important;
    border-color: var(--larkon-accent) !important;
    box-shadow:
        0 4px 12px -2px rgba(59, 200, 0, 0.20),
        0 2px 4px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px);
}
html[data-bs-theme="light"] .lin-root .lin-card-title {
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] .lin-root .lin-card-meta,
html[data-bs-theme="light"] .lin-root .lin-card .lin-card-meta {
    color: var(--larkon-text-muted) !important;
}
html[data-bs-theme="light"] .lin-root .lin-icon-chip {
    background: #ffffff !important;
    border-color: var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] .lin-root .lin-hero-pill {
    background: #ffffff !important;
    border-color: var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] .lin-root .lin-hero-sub {
    color: var(--larkon-text-muted) !important;
}
html[data-bs-theme="light"] .lin-root .lin-meta-end .co { color: var(--larkon-text) !important; }
html[data-bs-theme="light"] .lin-root .lin-meta-end .br { color: var(--larkon-text-muted) !important; }

/* The hero "Explorar departamentos" CTA — full glossy treatment matching the
   web-elements UI kit reference (vivid lime top, deep forest bottom, raised). */
html[data-bs-theme="light"] .lin-root .lin-cta-primary,
html[data-bs-theme="light"] .lin-cta-primary {
    background: linear-gradient(180deg,
        #6EE52F 0%,
        var(--larkon-accent-light) 25%,
        var(--larkon-accent) 60%,
        var(--larkon-accent-dark) 100%) !important;
    color: var(--larkon-on-accent) !important;
    border: 1px solid var(--larkon-accent-dark) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset,
        0 -1px 0 0 rgba(0, 0, 0, 0.10) inset,
        0 2px 4px -1px rgba(46, 170, 0, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.08) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    font-weight: 600 !important;
}
html[data-bs-theme="light"] .lin-root .lin-cta-primary:hover,
html[data-bs-theme="light"] .lin-cta-primary:hover {
    background: linear-gradient(180deg,
        var(--larkon-accent-light) 0%,
        var(--larkon-accent) 40%,
        var(--larkon-accent-hover) 80%,
        var(--larkon-accent-dark) 100%) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.60) inset,
        0 -1px 0 0 rgba(0, 0, 0, 0.14) inset,
        0 3px 6px -1px rgba(46, 170, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.10) !important;
    color: var(--larkon-on-accent) !important;
    transform: translateY(-1px);
}
html[data-bs-theme="light"] .lin-root .lin-cta-primary:active,
html[data-bs-theme="light"] .lin-cta-primary:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15) inset,
        0 1px 1px rgba(0, 0, 0, 0.06) !important;
}

/* Secondary CTA — neutral white with subtle border. */
html[data-bs-theme="light"] .lin-root .lin-cta-secondary,
html[data-bs-theme="light"] .lin-cta-secondary {
    background: #ffffff !important;
    border: 1px solid var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] .lin-root .lin-cta-secondary:hover {
    background: var(--larkon-card) !important;
    border-color: var(--larkon-accent) !important;
}
html[data-bs-theme="light"] .lin-root .lin-cta-secondary kbd {
    background: var(--larkon-card) !important;
    border: 1px solid var(--larkon-border) !important;
    color: var(--larkon-text-muted) !important;
}

/* Section labels in the launcher / sidebar (FINANZAS · EXPORTACIÓN etc.) */
html[data-bs-theme="light"] body.tw-shell .menu-title,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-title,
html[data-bs-theme="light"] .lin-root .lin-section-title {
    color: var(--larkon-text-muted) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* ════════════════════════════════════════════════════════════════════
   GLOSSY GREEN BUTTONS — Bootstrap .btn-primary + .btn-success.
   Match the reference UI kit: vivid lime-green specular highlight on top
   edge, darker forest-green on bottom, subtle drop shadow + inner-shadow
   contrast border for the "raised glass" 3D feel.
   ═══════════════════════════════════════════════════════════════════ */
html[data-bs-theme="light"] .btn-primary,
html[data-bs-theme="light"] .btn-success {
    --bs-btn-color:              #ffffff !important;
    --bs-btn-bg:                 var(--larkon-accent) !important;
    --bs-btn-border-color:       var(--larkon-accent-dark) !important;
    --bs-btn-hover-color:        #ffffff !important;
    --bs-btn-hover-bg:           var(--larkon-accent-hover) !important;
    --bs-btn-hover-border-color: var(--larkon-accent-dark) !important;
    --bs-btn-active-color:       #ffffff !important;
    --bs-btn-active-bg:          var(--larkon-accent-dark) !important;
    --bs-btn-active-border-color: var(--larkon-accent-dark) !important;
    --bs-btn-disabled-color:     #ffffff !important;
    --bs-btn-disabled-bg:        var(--larkon-accent) !important;
    --bs-btn-disabled-border-color: var(--larkon-accent) !important;
    /* Vivid 4-stop gradient for the glossy look (lime → green → dark green) */
    background: linear-gradient(180deg,
        #6EE52F 0%,
        var(--larkon-accent-light) 25%,
        var(--larkon-accent) 60%,
        var(--larkon-accent-dark) 100%) !important;
    color: var(--larkon-on-accent) !important;
    border: 1px solid var(--larkon-accent-dark) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.55) inset,       /* top specular */
        0 -1px 0 0 rgba(0, 0, 0, 0.10) inset,            /* bottom inner shadow */
        0 2px 4px -1px rgba(46, 170, 0, 0.45),            /* green-tinted drop */
        0 1px 2px rgba(0, 0, 0, 0.08) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    font-weight: 600 !important;
}
html[data-bs-theme="light"] .btn-primary:hover,
html[data-bs-theme="light"] .btn-success:hover {
    background: linear-gradient(180deg,
        var(--larkon-accent-light) 0%,
        var(--larkon-accent) 40%,
        var(--larkon-accent-hover) 80%,
        var(--larkon-accent-dark) 100%) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.60) inset,
        0 -1px 0 0 rgba(0, 0, 0, 0.14) inset,
        0 3px 6px -1px rgba(46, 170, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.10) !important;
    transform: translateY(-1px);
}
html[data-bs-theme="light"] .btn-primary:active,
html[data-bs-theme="light"] .btn-success:active {
    background: linear-gradient(180deg,
        var(--larkon-accent-hover) 0%,
        var(--larkon-accent-dark) 100%) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15) inset,
        0 1px 1px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   Sidebar — nuclear-specificity overrides to force light bg over
   tw-shell-skin.css's hardcoded #0d1f12 dark and app.css's gradient.
   The triple `.main-nav.main-nav.main-nav` class repetition cranks
   specificity to (0, 8, 2) — beats anything else in the codebase.
   ═══════════════════════════════════════════════════════════════════ */
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav.main-nav.main-nav,
html[data-bs-theme="light"][data-menu-color="dark"] body.tw-shell .wrapper .main-nav.main-nav.main-nav,
html[data-bs-theme="light"][data-menu-color="light"] body.tw-shell .wrapper .main-nav.main-nav.main-nav,
html[data-bs-theme="light"][data-menu-color="brand"] body.tw-shell .wrapper .main-nav.main-nav.main-nav,
html[data-bs-theme="light"][data-menu-color][data-menu-size] body.tw-shell .wrapper .main-nav.main-nav.main-nav,
html[data-bs-theme="light"][data-menu-color][data-topbar-color] body.tw-shell .wrapper .main-nav.main-nav.main-nav,
html[data-bs-theme="light"][data-menu-color][data-menu-size][data-topbar-color] body.tw-shell .wrapper .main-nav.main-nav.main-nav {
    background-color: var(--larkon-shell) !important;
    background-image:
        radial-gradient(ellipse 100% 70% at 50% 30%, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, var(--larkon-shell) 0%, var(--larkon-shell-dark) 100%) !important;
    border-right: 1px solid rgba(0,0,0,0.35) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        2px 0 6px rgba(0,0,0,0.18) !important;
    color: var(--larkon-on-shell) !important;
    --bs-main-nav-item-color:       var(--larkon-on-shell) !important;
    --bs-main-nav-item-hover-bg:    rgba(255,255,255,0.10) !important;
    --bs-main-nav-item-hover-color: #FFFFFF !important;
    --bs-main-nav-bg:               var(--larkon-shell) !important;
}

/* Direct color override on the nav-link itself — solid white text on dark shell */
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav a.nav-link {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link:hover,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.active {
    color: #FFFFFF !important;
    background: rgba(255,255,255,0.10) !important;
}
/* Section labels — muted white with reduced opacity */
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-title,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-title.menu-title {
    color: rgba(255,255,255,0.55) !important;
    opacity: 1 !important;
}
/* Icons in sidebar — solid white, full opacity. Green accent on hover/active.
   Triple-class `.nav-link.nav-link.nav-link` to beat tw-shell-skin.css's deep
   `.navbar-nav .nav-item .nav-link iconify-icon` selector that was forcing #94A3B8. */
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link iconify-icon,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link iconify-icon,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link i {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link:hover iconify-icon,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.active iconify-icon,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover iconify-icon,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active iconify-icon {
    color: var(--larkon-accent) !important;
}

/* ── Sub-menu items (e.g. "01 · Panel ejecutivo", "02 · Alertas" etc.) ──
   tw-shell-skin.css line 865-881 sets sub-nav-link to muted slate `#64748b`,
   which on the dark shell looks faded/illegible. Force a cleaner color.
   17-May-2026 — per client "sub menu text not cleaner". */
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.sub-nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link:hover {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    border-radius: 6px !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.active,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.show {
    color: #FFFFFF !important;
    background-color: rgba(59, 200, 0, 0.20) !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* Sidebar section labels (FINANZAS · EXPORTACIÓN, DASHBOARD Y RECUPERACIÓN, etc.)
   — was rgba(255,255,255,0.55) which on dark shell looked too dim. */
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-title,
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-title.menu-title {
    color: rgba(255, 255, 255, 0.50) !important;
    opacity: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* Cleaner hover on TOP-level items (already styled but make sure bg + radius is consistent) */
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.active {
    background-color: rgba(59, 200, 0, 0.20) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* Inner scroll/simplebar containers must NOT mask the parent bg. */
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .scrollbar,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-wrapper,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-mask,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-offset,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-content,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .logo-box {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Sidebar item colors. */
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav a {
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link:hover,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.active {
    background: var(--larkon-accent-soft) !important;
    color: var(--larkon-accent-hover) !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link iconify-icon {
    color: var(--larkon-text-muted) !important;
}
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link:hover iconify-icon,
html[data-bs-theme="light"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.active iconify-icon {
    color: var(--larkon-accent) !important;
}

/* Brand wordmark area at the top of the sidebar — keep "FRUTANA" green. */
html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark,
html[data-bs-theme="light"] body.tw-shell .tw-topbar-wordmark {
    color: var(--larkon-accent) !important;
}

/* (19-May-2026 — QT #28) Profile dropdown menu text was invisible on light
   theme — items inherited near-white text. Force dark text on light bg. */
html[data-bs-theme="light"] body.tw-shell .dropdown-menu,
html[data-bs-theme="light"] body.tw-shell .tw-user-menu,
html[data-bs-theme="light"] body.tw-shell [data-tw-user-menu] {
    background: #ffffff !important;
    border: 1px solid var(--larkon-border) !important;
    color: var(--larkon-text) !important;
}
/* QT #28 (re-applied 20-May-2026): #tw-topbar a/button rules above force white
   text in light mode, which cascades into the user-menu dropdown items rendered
   inside the topbar — making them invisible on white bg. Use #tw-topbar prefix
   to win the specificity battle against `#tw-topbar a/button { color: #fff }`. */
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu .dropdown-item,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu a,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu button,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu li,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu span,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu h1,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu h2,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu h3,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu h4,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu h5,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu h6,
html[data-bs-theme="light"] body.tw-shell #tw-topbar .dropdown-menu .dropdown-header,
html[data-bs-theme="light"] body.tw-shell .dropdown-menu .dropdown-item,
html[data-bs-theme="light"] body.tw-shell .dropdown-menu .dropdown-header,
html[data-bs-theme="light"] body.tw-shell .dropdown-menu a,
html[data-bs-theme="light"] body.tw-shell .dropdown-menu button,
html[data-bs-theme="light"] body.tw-shell .dropdown-menu h6,
html[data-bs-theme="light"] body.tw-shell .tw-user-menu a,
html[data-bs-theme="light"] body.tw-shell .tw-user-menu button {
    color: var(--larkon-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .dropdown-menu .dropdown-item:hover,
html[data-bs-theme="light"] body.tw-shell .dropdown-menu .dropdown-item:focus,
html[data-bs-theme="light"] body.tw-shell .tw-user-menu a:hover,
html[data-bs-theme="light"] body.tw-shell .tw-user-menu button:hover {
    background: var(--larkon-card) !important;
    color: var(--larkon-accent-hover) !important;
}
html[data-bs-theme="light"] body.tw-shell .dropdown-menu .dropdown-divider {
    border-color: var(--larkon-border) !important;
}

/* ════════════════════════════════════════════════════════════════════
   (17-May-2026) Cross-theme sidebar polish:
   1. Kill the green left rail (inset box-shadow + border-left) on ALL
      active/selected items — both top-level and sub-menu, both themes.
      tw-shell-skin.css line 408 sets `inset 3px 0 0 #22c55e` for dark.
   2. Indent sub-menu items further so they visually sit UNDER the parent
      menu text (was 28px, bump to ~40px) — client wants sub items not to
      "start agy", i.e. clearly children of the parent.
   ═══════════════════════════════════════════════════════════════════ */

/* (1) Remove the green left rail everywhere. */
body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.active,
body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.show,
body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active,
body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link[aria-expanded="true"],
body.tw-shell .wrapper .main-nav .nav-link.active,
body.tw-shell .wrapper .main-nav .nav-link[aria-expanded="true"] {
    box-shadow: none !important;
    border-left: 0 !important;
}

/* (2) Indent sub-menu items deeper so they sit clearly under the parent text.
       tw-shell-skin.css line 374 uses `padding: 5px 10px 5px 28px`. Bump the
       left padding to 40px so labels start under the parent text (parent icon
       is at ~12-14px and text starts ~36-40px). */
body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link {
    padding-left: 40px !important;
}
/* Deeper nested submenu (ps-3) gets an extra step. */
body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-navbar-nav .sub-nav-link {
    padding-left: 52px !important;
}

/* ════════════════════════════════════════════════════════════════════
   (17-May-2026) Inner-page horizontal alignment fix.
   tw-shell-skin.css zeros padding only on the DIRECT child container-fluid
   of .page-content. Pages like FinanzasExportacion/Alertas add their own
   NESTED `<div class="… container-fluid px-2 px-md-3">` inside that, which
   reintroduces ~16-28px of left padding — making the content sit further
   to the right than the main launcher page (which uses .lin-root and has
   its own self-contained padding).
   Force any nested container-fluid inside .page-content to also have zero
   horizontal padding so all pages start at the same column as the launcher.
   ═══════════════════════════════════════════════════════════════════ */
body.tw-shell .page-content .container-fluid .container-fluid,
body.tw-shell .page-content > .container-fluid > div.container-fluid,
body.tw-shell .page-content > .container-fluid > section.container-fluid,
body.tw-shell .page-content > .container-fluid > main.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME (17-May-2026) — make topbar + sidebar use the same surface
   color as the cards (#1a1a1f, the value of --pg-surface in dark).
   Previously the sidebar/topbar used --tw-surface #0e0e10 which was a
   different (darker) tone than the cards, creating a visible mismatch.
   ═══════════════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"] body.tw-shell #tw-topbar {
    background-color: #1a1a1f !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important;
}
html[data-bs-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav,
html[data-bs-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav.main-nav.main-nav,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav.main-nav.main-nav {
    background-color: #1a1a1f !important;
    background-image: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.35) !important;
    --bs-main-nav-bg: #1a1a1f !important;
}
/* Keep simplebar / scrollbar children transparent so they don't paint a
   different bg over the new color (same trick as light theme). */
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav .scrollbar,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav .simplebar-wrapper,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav .simplebar-mask,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav .simplebar-offset,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav .simplebar-content,
html[data-bs-theme="dark"] body.tw-shell .wrapper .main-nav .logo-box {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   .fin-strip-cell — DARK theme override (17-May-2026).
   _FinanzasSubNav.cshtml ships its own inline `<style>` with
   `.fin-strip-cell { background:#fff }`, which is the ONLY rule that
   loads on Finanzas pages (the dark-theme rule lives in tw-page-skin.css
   which is NOT linked from _HeadCSS.cshtml). So in dark mode the CRITICAL
   / HIGH / MEDIUM / LOW counter cards stayed pure white. Force them
   onto the dark surface palette here. The colored top-border accents
   (.fin-strip-cell-crit etc.) are preserved.
   ═══════════════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"] body.tw-shell .fin-strip-cell,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .fin-strip-cell {
    background: #1a1a1f !important;
    border-color: #2a2a2e !important;
    color: #e6e6e6 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}
html[data-bs-theme="dark"] body.tw-shell .fin-strip-cell-num,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .fin-strip-cell-num {
    color: #ffffff !important;
}
html[data-bs-theme="dark"] body.tw-shell .fin-strip-cell-lbl,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .fin-strip-cell-lbl {
    color: #b4b4b4 !important;
}

/* ════════════════════════════════════════════════════════════════════
   FinanzasExportacion/Alertas — DARK theme overrides (17-May-2026).
   The page defines its own light-only styles (background:#fff, dark
   text). Re-skin them for dark theme so KPI cards, alert cards, metrics
   boxes, filter tabs and inline action rows all use the dark surface
   palette with readable light text.
   ═══════════════════════════════════════════════════════════════════ */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-kpi {
    background: #1a1a1f !important;
    border-color: #2a2a2e !important;
    color: #e6e6e6 !important;
}
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-kpi .kpi-val { color: #ffffff !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-kpi .kpi-label { color: #b4b4b4 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-kpi .kpi-desc { color: #8a8a93 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-kpi .kpi-row { color: #cbd5e1 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-kpi .kpi-row strong { color: #ffffff !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .kpi-bar { background: #2a2a2e !important; }

html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-filter-tab {
    background: #1a1a1f !important;
    border-color: #2a2a2e !important;
    color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-filter-tab.active {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-card {
    background: #1a1a1f !important;
    border-color: #2a2a2e !important;
    color: #e6e6e6 !important;
}
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-card-title { color: #ffffff !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-card-desc { color: #cbd5e1 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-action-text { color: #e6e6e6 !important; }

/* Tag chips — keep the colored accents but darken their light fills so
   they don't look like white pills floating on dark surfaces. */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-critico,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-criticall { background: rgba(240,101,72,0.18) !important; color: #fca5a5 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-alto,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-high { background: rgba(247,184,75,0.18) !important; color: #fbbf24 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-medio,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-caution { background: rgba(56,189,248,0.18) !important; color: #7dd3fc !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-bajo,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-module,
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-date { background: rgba(255,255,255,0.06) !important; color: #cbd5e1 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-status-pending { background: rgba(247,184,75,0.18) !important; color: #fbbf24 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-status-under-review { background: rgba(56,189,248,0.18) !important; color: #7dd3fc !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-status-resolved { background: rgba(10,179,156,0.18) !important; color: #4ade80 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .atag-resp { background: rgba(96,165,250,0.18) !important; color: #93c5fd !important; }

/* Metrics box inside each alert card. */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .alert-metrics {
    background: #232328 !important;
}
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .metric-lbl { color: #8a8a93 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .metric-val { color: #ffffff !important; }

/* "Under review" outline button — was white bg + dark border. */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .btn-under-review {
    background: #1a1a1f !important;
    color: #cbd5e1 !important;
    border-color: #2a2a2e !important;
}

/* Risk summary table rows + dividers. */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .risk-row { border-bottom-color: #26262b !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .risk-module { color: #ffffff !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .risk-sub { color: #8a8a93 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .risk-amount { color: #ffffff !important; }

/* Actions recommendeds rows. */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .action-row { border-bottom-color: #26262b !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .action-title { color: #ffffff !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .action-desc { color: #8a8a93 !important; }

/* Overall risk-pressure rows. */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .pressure-row { border-bottom-color: #26262b !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .pressure-label { color: #cbd5e1 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .pressure-bar-wrap { background: #2a2a2e !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .pressure-pct { color: #ffffff !important; }

/* Expense cards (Gastos reducibles sub-section). */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page .expense-card {
    background: #1a1a1f !important;
    border-color: #2a2a2e !important;
    color: #e6e6e6 !important;
}

/* Inline-style dark-text fallbacks the page uses for nested boxes
   (`style="color:#495057;..."`, `style="color:#111827;..."` etc.) lose
   contrast on dark surfaces. Catch the most common ones. */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="color:#111827"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="color: #111827"] { color: #ffffff !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="color:#495057"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="color: #495057"] { color: #cbd5e1 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="color:#878a99"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="color: #878a99"] { color: #8a8a93 !important; }
/* Inline light backgrounds (f8f9fa, fff6e3, fdeeea, e8f4fb, e8f8f5, f3f6f9, eef2ff) inside dark page */
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#f8f9fa"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #f8f9fa"] { background: #23232a !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#fff6e3"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #fff6e3"] { background: rgba(247,184,75,0.12) !important; color: #fbbf24 !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#fdeeea"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #fdeeea"] { background: rgba(240,101,72,0.14) !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#e8f4fb"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #e8f4fb"] { background: rgba(56,189,248,0.14) !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#e8f8f5"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #e8f8f5"] { background: rgba(10,179,156,0.14) !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#f3f6f9"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #f3f6f9"] { background: #23232a !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#eef2ff"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #eef2ff"] { background: rgba(96,165,250,0.14) !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#fde8e4"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #fde8e4"] { background: #26262b !important; }
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background:#e9ebec"],
html[data-bs-theme="dark"] body.tw-shell .fe-al-page [style*="background: #e9ebec"] { background: #2a2a2e !important; }

/* ════════════════════════════════════════════════════════════════════
   GLOBAL DARK-THEME SAFETY NET for inline-styled light backgrounds and
   dark text across ALL Finanzas/ERP pages (17-May-2026).
   Many cshtml views ship inline `<style>` blocks and `style="..."` attrs
   with hardcoded light colors. tw-page-skin.css now handles the common
   class-based building blocks, but inline-style attribute selectors below
   catch the remaining sub-elements (callouts, info boxes, nested badges,
   metric strips, expense rows, etc.) without per-page edits.
   Scoped under .page-content so the topbar, sidebar, and modals stay
   untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Light backgrounds → dark surfaces ───────────────────────────────── */
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#fff"]:not([style*="background:#ffe"]):not([style*="background:#fff6"]):not([style*="background:#fffaf"]):not([style*="background:#fffbe"]),
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#ffffff"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#FFFFFF"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #fff;"]:not([style*="background: #ffe"]):not([style*="background: #fff6"]),
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #ffffff"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background-color:#fff;"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background-color:#ffffff"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background-color: #fff;"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background-color: #ffffff"] {
    background: #1a1a1f !important;
    background-color: #1a1a1f !important;
}
/* Common light-gray "muted" backgrounds (Bootstrap defaults + project palette). */
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#f8f9fa"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #f8f9fa"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#f3f6f9"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #f3f6f9"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#f1f5f9"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #f1f5f9"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#f4f4f5"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #f4f4f5"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#fbfcfd"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #fbfcfd"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#fafafa"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #fafafa"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#e9ebec"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #e9ebec"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background:#e2e8f0"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="background: #e2e8f0"] {
    background: #23232a !important;
    background-color: #23232a !important;
}

/* ── Dark text → light text ──────────────────────────────────────────── */
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#111827"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #111827"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#1f2937"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #1f2937"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#18181b"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #18181b"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#000"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #000"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#0f172a"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #0f172a"] {
    color: #ffffff !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#495057"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #495057"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#334155"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #334155"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#3f3f46"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #3f3f46"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#1e293b"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #1e293b"] {
    color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#878a99"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #878a99"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#6b7280"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #6b7280"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#64748b"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #64748b"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color:#71717a"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="color: #71717a"] {
    color: #8a8a93 !important;
}

/* ── Borders ──────────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="border:1px solid #e9ebec"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="border: 1px solid #e9ebec"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="border:1px solid #e2e8f0"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="border: 1px solid #e2e8f0"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="border:1px solid #e4e4e7"],
html[data-bs-theme="dark"] body.tw-shell .page-content [style*="border: 1px solid #e4e4e7"] {
    border-color: #2a2a2e !important;
}

/* ── Class-based fallbacks for common page-defined cards/boxes that share
       the same light pattern (alert-kpi, alert-card, expense-card, fin-card,
       etc. — used across Alertas, BankPolicies, CreditosBancarios, PlanPagos,
       DivisionDeudas, EscenariosFinancieros, PuntoEquilibrio, etc.) ──── */
html[data-bs-theme="dark"] body.tw-shell .page-content .alert-kpi,
html[data-bs-theme="dark"] body.tw-shell .page-content .alert-card,
html[data-bs-theme="dark"] body.tw-shell .page-content .expense-card,
html[data-bs-theme="dark"] body.tw-shell .page-content .alert-filter-tab,
html[data-bs-theme="dark"] body.tw-shell .page-content .btn-under-review,
html[data-bs-theme="dark"] body.tw-shell .page-content .kpi-card,
html[data-bs-theme="dark"] body.tw-shell .page-content .summary-card,
html[data-bs-theme="dark"] body.tw-shell .page-content .info-card,
html[data-bs-theme="dark"] body.tw-shell .page-content .detail-card {
    background: #1a1a1f !important;
    background-color: #1a1a1f !important;
    border-color: #2a2a2e !important;
    color: #e6e6e6 !important;
}

/* ════════════════════════════════════════════════════════════════════
   Table action-button column polish (17-May-2026).
   Lists (BusinessPartners/List, Items/List, Trips/List, etc.) render
   a 4-button action column: View · Export · Edit · Delete. In dark
   theme the buttons came out inconsistent — btn-light's bg blends with
   the row, btn-soft-info's dropdown-toggle caret notches the shape, and
   sizes varied. This block forces them all to a uniform 32x32 square
   icon pill with consistent fill/border/icon-color treatment.
   ═══════════════════════════════════════════════════════════════════ */

/* Uniform 32x32 square action-pill for every .btn-sm inside a table cell
   or a .d-flex.gap-2 action group. */
body.tw-shell .page-content td .d-flex .btn-sm,
body.tw-shell .page-content td > .btn-sm,
body.tw-shell .page-content td .dropdown > .btn-sm {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    line-height: 1 !important;
}
body.tw-shell .page-content td .d-flex .btn-sm iconify-icon,
body.tw-shell .page-content td > .btn-sm iconify-icon,
body.tw-shell .page-content td .dropdown > .btn-sm iconify-icon,
body.tw-shell .page-content td .d-flex .btn-sm i,
body.tw-shell .page-content td > .btn-sm i {
    font-size: 16px !important;
    line-height: 1 !important;
}
/* Kill the Bootstrap dropdown-toggle ▼ caret on icon-only action buttons.
   The caret notches the rounded shape and looks broken next to a centered
   icon — the icon itself is the affordance. */
body.tw-shell .page-content td .dropdown > .btn-sm.dropdown-toggle::after,
body.tw-shell .page-content td .btn-sm.dropdown-toggle::after {
    display: none !important;
}

/* DARK theme tints — make all four action buttons visually consistent:
   same dark base, soft tinted border + icon color per intent. */
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-light,
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-secondary {
    background: #1f1f24 !important;
    border: 1px solid #2e2e35 !important;
    color: #cbd5e1 !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-light:hover,
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-secondary:hover {
    background: #2a2a30 !important;
    border-color: #3a3a44 !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-primary {
    background: rgba(59, 130, 246, 0.10) !important;
    border: 1px solid rgba(59, 130, 246, 0.30) !important;
    color: #60a5fa !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-primary:hover {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-info {
    background: rgba(56, 189, 248, 0.10) !important;
    border: 1px solid rgba(56, 189, 248, 0.30) !important;
    color: #7dd3fc !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-info:hover {
    background: rgba(56, 189, 248, 0.22) !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-success {
    background: rgba(78, 203, 126, 0.10) !important;
    border: 1px solid rgba(78, 203, 126, 0.30) !important;
    color: #4ade80 !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-success:hover {
    background: rgba(78, 203, 126, 0.22) !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-warning {
    background: rgba(245, 165, 36, 0.10) !important;
    border: 1px solid rgba(245, 165, 36, 0.30) !important;
    color: #fbbf24 !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-warning:hover {
    background: rgba(245, 165, 36, 0.22) !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-danger {
    background: rgba(229, 77, 46, 0.10) !important;
    border: 1px solid rgba(229, 77, 46, 0.30) !important;
    color: #f87171 !important;
}
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-soft-danger:hover {
    background: rgba(229, 77, 46, 0.22) !important;
    color: #ffffff !important;
}

/* Make sure the icon picks up the button's text-color (not the muted
   default from tw-shell-skin.css's `--tw-text-faint`). */
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-sm iconify-icon,
html[data-bs-theme="dark"] body.tw-shell .page-content td .btn-sm i {
    color: inherit !important;
    opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE-FRIENDLY SAFETY NET (17-May-2026)
   Cross-page rules to make every screen render reasonably on phones
   without per-page edits. tw-shell-skin.css already handles the SHELL
   on small screens (sidebar overlay, topbar tighten, page-content
   padding). This block fixes the COMMON CONTENT patterns:
     • tables overflow horizontally instead of breaking layout
     • multi-column Bootstrap form rows stack on phones
     • inline-styled fixed widths shrink to fit
     • modal dialogs become full-width below 640px
     • table action-button columns wrap instead of pushing rows wide
     • headings + cards scale down
     • image/media fluid by default
   ═══════════════════════════════════════════════════════════════════ */

/* ── Always wrap tables in horizontal scroll on phones ─────────────── */
@media (max-width: 767.98px) {
    body.tw-shell .page-content table,
    body.tw-shell .page-content .table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    body.tw-shell .page-content .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.tw-shell .page-content .table th,
    body.tw-shell .page-content .table td {
        white-space: nowrap !important;
        font-size: 12px !important;
    }
    /* Action-button column: wrap to a second row instead of overflowing. */
    body.tw-shell .page-content td .d-flex {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    body.tw-shell .page-content td .d-flex .btn-sm,
    body.tw-shell .page-content td .dropdown > .btn-sm {
        width: 28px !important;
        height: 28px !important;
    }
    body.tw-shell .page-content td .d-flex .btn-sm iconify-icon,
    body.tw-shell .page-content td .d-flex .btn-sm i {
        font-size: 13px !important;
    }
}

/* ── Forms: stack multi-column rows on phones ──────────────────────── */
@media (max-width: 767.98px) {
    body.tw-shell .page-content .row.g-3 > [class*="col-"],
    body.tw-shell .page-content .row.g-2 > [class*="col-"],
    body.tw-shell .page-content .row > [class*="col-md-"],
    body.tw-shell .page-content .row > [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Tighter form-control + label sizing for thumb input. */
    body.tw-shell .page-content .form-control,
    body.tw-shell .page-content .form-select,
    body.tw-shell .page-content .fin-input,
    body.tw-shell .page-content .form-control-lg {
        font-size: 14px !important;
        padding: 8px 10px !important;
        min-height: 38px !important;
    }
    body.tw-shell .page-content .form-label,
    body.tw-shell .page-content label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    /* Button groups: wrap + min-tap-size (36px). */
    body.tw-shell .page-content .btn-group,
    body.tw-shell .page-content .btn-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    body.tw-shell .page-content .btn {
        min-height: 36px !important;
        white-space: nowrap !important;
    }
    body.tw-shell .page-content .btn.btn-sm,
    body.tw-shell .page-content .btn-sm {
        min-height: 32px !important;
    }
}

/* ── Modals: full-screen on phones (better than fixed 500/700px) ──── */
@media (max-width: 575.98px) {
    body.tw-shell .modal-dialog,
    body.tw-shell .modal-dialog.modal-lg,
    body.tw-shell .modal-dialog.modal-xl,
    body.tw-shell .modal-dialog.modal-md {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        min-height: 100vh !important;
    }
    body.tw-shell .modal-content {
        min-height: 100vh !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
    body.tw-shell .modal-body {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.tw-shell .modal-header { padding: 12px 14px !important; }
    body.tw-shell .modal-footer {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body.tw-shell .modal-footer .btn { flex: 1 1 auto !important; }
}

/* ── Heading + card scale-down on small screens ────────────────────── */
@media (max-width: 767.98px) {
    body.tw-shell .page-content h1,
    body.tw-shell .page-content .h1 { font-size: 22px !important; line-height: 1.2 !important; }
    body.tw-shell .page-content h2,
    body.tw-shell .page-content .h2 { font-size: 19px !important; line-height: 1.2 !important; }
    body.tw-shell .page-content h3,
    body.tw-shell .page-content .h3 { font-size: 17px !important; line-height: 1.2 !important; }
    body.tw-shell .page-content h4,
    body.tw-shell .page-content .h4 { font-size: 15px !important; line-height: 1.25 !important; }
    body.tw-shell .page-content h5,
    body.tw-shell .page-content .h5 { font-size: 14px !important; }
    body.tw-shell .page-content .fs-32,
    body.tw-shell .page-content .fs-30,
    body.tw-shell .page-content .fs-28,
    body.tw-shell .page-content .fs-24 { font-size: 20px !important; }
    body.tw-shell .page-content .display-1,
    body.tw-shell .page-content .display-2,
    body.tw-shell .page-content .display-3,
    body.tw-shell .page-content .display-4 { font-size: 26px !important; line-height: 1.1 !important; }

    body.tw-shell .page-content .card,
    body.tw-shell .page-content .fin-card,
    body.tw-shell .page-content .alert-kpi,
    body.tw-shell .page-content .alert-card,
    body.tw-shell .page-content .fin-strip-cell {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    body.tw-shell .page-content .card-body { padding: 12px !important; }
    body.tw-shell .page-content .card-header,
    body.tw-shell .page-content .card-footer { padding: 10px 12px !important; }

    /* Common page-header inline title + button rows: wrap and gap-shrink. */
    body.tw-shell .page-content .d-flex.justify-content-between,
    body.tw-shell .page-content .page-title-box,
    body.tw-shell .page-content .fe-fin-mod-header__row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    body.tw-shell .page-content .page-title-right { width: 100% !important; }
}

/* ── Override common inline-styled fixed widths/max-widths ─────────── */
@media (max-width: 767.98px) {
    body.tw-shell .page-content [style*="min-width:"]:not([style*="min-width:0"]):not([style*="min-width: 0"]),
    body.tw-shell .page-content [style*="min-width: "]:not([style*="min-width: 0"]) {
        min-width: 0 !important;
    }
    body.tw-shell .page-content [style*="width:"][style*="px"]:not([class*="modal"]):not([class*="avatar"]):not([class*="icon"]):not([class*="btn"]) {
        max-width: 100% !important;
    }
    /* Common 4-column grid widgets — force single-col. */
    body.tw-shell .page-content [style*="grid-template-columns:repeat(4"],
    body.tw-shell .page-content [style*="grid-template-columns: repeat(4"],
    body.tw-shell .page-content [style*="grid-template-columns:repeat(3"],
    body.tw-shell .page-content [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    body.tw-shell .page-content [style*="grid-template-columns:180px 1fr 70px"],
    body.tw-shell .page-content [style*="grid-template-columns: 180px"] {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}

/* ── Images/charts/iframes fluid by default ────────────────────────── */
@media (max-width: 767.98px) {
    body.tw-shell .page-content img,
    body.tw-shell .page-content iframe,
    body.tw-shell .page-content embed,
    body.tw-shell .page-content video,
    body.tw-shell .page-content canvas,
    body.tw-shell .page-content svg,
    body.tw-shell .page-content .apexcharts-canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ── Topbar wordmark: hide on very narrow phones (already has space-saver) */
@media (max-width: 480px) {
    body.tw-shell .tw-topbar-wordmark { display: none !important; }
    body.tw-shell .tw-user-meta,
    body.tw-shell .tw-user-name,
    body.tw-shell .tw-user-company { display: none !important; }
    /* Compact bottom-left page header on tiny screens. */
    body.tw-shell .page-content { padding-left: 4px !important; padding-right: 4px !important; }
    body.tw-shell .page-content .container-fluid { padding: 0 !important; }
}

/* ── FinanzasBanano launcher tiles: stack 1-col on phones ─────────── */
@media (max-width: 575.98px) {
    body.tw-shell .fe-banano-tile {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px !important;
        min-height: 0 !important;
    }
    body.tw-shell .fe-banano-tile .fe-tile-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }
    body.tw-shell .fe-banano-tile .fe-tile-title { font-size: 13px !important; }
    body.tw-shell .fe-banano-tile .fe-tile-meta { display: none !important; }
    body.tw-shell .fe-banano-title { font-size: 22px !important; }
}

/* ── PageHeader breadcrumbs: stack on narrow screens ───────────────── */
@media (max-width: 767.98px) {
    body.tw-shell .page-header-erp .page-title-box {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    body.tw-shell .page-header-erp .breadcrumb {
        flex-wrap: wrap !important;
        font-size: 11px !important;
    }
}


/* ── QT #58: Status-badge colors for DivisionDeudas (and other Finanzas pages) ──
   tw-shell-skin.css uses `body.tw-shell .fin-badge { color: ... }` which beats the
   plain `.fb-s/.fb-w/...` colors. Re-assert green/yellow/red here with matching
   specificity so Pagada/Vigente → green, Vencida/PorVencer → yellow, etc. */
body.tw-shell .fin-badge.fb-s {
    background: var(--fs-s, #e8f8f5) !important;
    color: var(--fs, #0ab39c) !important;
}
body.tw-shell .fin-badge.fb-w {
    background: var(--fw-s, #fff6e3) !important;
    color: #b77900 !important;
}
body.tw-shell .fin-badge.fb-d {
    background: var(--fd-s, #fdeeea) !important;
    color: var(--fd, #f06548) !important;
}
body.tw-shell .fin-badge.fb-i {
    background: var(--fi-s, #e8f4fb) !important;
    color: var(--fi, #299cdb) !important;
}
body.tw-shell .fin-badge.fb-p {
    background: var(--fp-s, #f0eaff) !important;
    color: var(--fp, #6c5ce7) !important;
}
body.tw-shell .fin-badge.fb-m {
    background: #f3f6f9 !important;
    color: #495057 !important;
}