/* ============================================================================ 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 { /* Flat Claude-app dark chrome (identical in light & dark themes). */ background-color: var(--cc-nav-bg) !important; background-image: none !important; border-right: 1px solid var(--cc-edge) !important; box-shadow: none !important; color: var(--cc-text) !important; --bs-main-nav-item-color: var(--cc-text) !important; --bs-main-nav-item-hover-bg: var(--cc-hover-bg) !important; --bs-main-nav-item-hover-color: var(--cc-text-hover) !important; --bs-main-nav-bg: var(--cc-nav-bg) !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; } /* ══════════════════════════════════════════════════════════════════════ * DARK PRESET SIDEBAR — refined "Linear / Notion" typography (24-Jul-2026) * ---------------------------------------------------------------------- * The block ABOVE force-paints every sidebar item pure white (500) with a * GREEN active pill — heavy and bright. The client wants the quiet, muted * reference look (grey item text @400, dim icons, subtle NEUTRAL active * pill, tracking-wide labels). This override implements it, scoped to the * DARK preset only (data-tw-theme="dark") so the light / slate / indigo / * forest / royal / ocean / fluent presets keep their own palettes. * 3 attribute selectors -> beats the 2-attribute white rules above; also * placed later in source order. Triple `.nav-link.nav-link.nav-link` to * match the white block's class-count. * ══════════════════════════════════════════════════════════════════════ */ /* Top-level items — muted grey, weight 400, tracking-wide (reference feel). */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav a.nav-link { color: #a2a2aa !important; font-weight: 400 !important; letter-spacing: 0.02em !important; opacity: 1 !important; } /* Icons — dimmer than text (muted/70), single flat tone. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link iconify-icon, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link iconify-icon, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link i { color: #7d7d86 !important; opacity: 1 !important; } /* Hover — subtle white wash, text brightens (not pure white). */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link:hover, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover { color: #e4e4e8 !important; background-color: rgba(255,255,255,0.05) !important; border-radius: 8px !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link:hover iconify-icon, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover iconify-icon { color: #b8b8c0 !important; } /* Active — subtle NEUTRAL pill (no green), near-white text, weight 500. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.active, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.show { color: #f4f4f6 !important; background-color: rgba(255,255,255,0.10) !important; font-weight: 500 !important; border-radius: 8px !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.active iconify-icon, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active iconify-icon { color: #f4f4f6 !important; } /* Sub-menu items — quieter grey; neutral active (no green). */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.sub-nav-link { color: #9a9aa2 !important; font-weight: 400 !important; opacity: 1 !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link:hover { color: #e4e4e8 !important; background-color: rgba(255,255,255,0.05) !important; border-radius: 6px !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.active, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.show { color: #f4f4f6 !important; background-color: rgba(255,255,255,0.10) !important; font-weight: 500 !important; box-shadow: none !important; } /* Sub-menu SECTION headings (e.g. "DASHBOARD Y RECUPERACIÓN") — no rule sets their colour, so they fall to Bootstrap .text-muted = steel-blue rgb(93,113,134). Force the same quiet grey as the top-level section labels. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title.text-muted, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title.sub-nav-item { color: #6c6c74 !important; } /* Top-level section labels — unify to the same quiet grey (the light block tints them slate #94a3b8). */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .menu-title { color: #6c6c74 !important; } /* Expandable-group chevron — neutral grey, never green. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .menu-arrow::after { color: #6c6c74 !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .menu-arrow[aria-expanded="true"]::after { color: #9b9ba3 !important; } /* Active / hover TOP-LEVEL item — remove the GREEN 3px left rail (larkon L296) and its compensating padding so the pill is a clean neutral fill with no coloured left strip; keep text aligned with the non-active rows (10px). */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link:hover, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.active, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.show { border-left: 0 !important; padding-left: 10px !important; } /* Neutral sidebar edges — kill every coloured edge accent the light "Clean Jade" block + Larkon base leak onto the dark shell: green top/right gradient lines (::before/::after), the green box-shadow glow, AND the rosy/rust inset shadow (app.css rgba(134,110,110,.25)) that flickers in during cache transitions. Keep the shell edge perfectly neutral. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav::before, html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav::after { content: none !important; background: none !important; background-image: none !important; box-shadow: none !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav.main-nav.main-nav { box-shadow: 1px 0 0 rgba(255,255,255,0.05), 4px 0 24px rgba(0,0,0,0.22) !important; } /* Green inset glow that bled from the sidebar's right edge into the content. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .page-content { box-shadow: none !important; } /* ── Sub-menu INDENTATION ── The Larkon base STACKS three left paddings (.sub-navbar-nav 12px + .sub-nav-item 25px + .sub-nav-link 40px), so child rows start ~85px in — nearly half-way across the rail. Collapse the stack to the reference's single modest step: child pill aligns with the parent pill (8px margin), content indented ~14px past the parent, and the guide line sits under the parent icon (18px). */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav { padding-left: 0 !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-item { padding-left: 0 !important; margin-left: 0 !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link { padding-left: 24px !important; } /* Guide line REMOVED per client — submenu children read by indent alone, no left connector line. content:none kills the base ::before at every level. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav::before { content: none !important; background: none !important; border-left: 0 !important; } /* Deeper (2nd-level) submenu — one further modest step, own guide line. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-navbar-nav .sub-nav-link { padding-left: 36px !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-navbar-nav::before { content: none !important; background: none !important; border-left: 0 !important; } /* Parent HEADER (.menu-arrow) must NOT show the "selected" pill when one of its CHILDREN is the active page — Larkon marks the parent .active too, so it lit up like the page. Only the actual leaf page / active sub-nav-link stays highlighted; the expandable header reads as a normal muted row (the chevron shows it's open). Hover still gives feedback (:not(:hover)). Headers are pure toggles here, not navigable pages, so suppressing their pill is always right. */ html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.menu-arrow.active:not(:hover) { background-color: transparent !important; color: #a2a2aa !important; font-weight: 400 !important; } html[data-tw-theme="dark"][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.menu-arrow.active:not(:hover) .nav-icon iconify-icon { color: #7d7d86 !important; } /* ══════════════════════════════════════════════════════════════════════ * SUB-MENU ACCORDION ANIMATION — smooth 300ms ease-in-out height slide * (matches the reference component: grid-rows 0fr->1fr, duration-300, * ease-in-out). * ---------------------------------------------------------------------- * The base skin forced overflow:visible on .collapsing, which DEFEATS * Bootstrap's height clip — so the submenu POPPED open/closed instead of * sliding (the "kharab" animation). Restore the clip DURING the animation * only; the fully-open .collapse.show keeps overflow visible so nested * items are never cut off. Global (applies to every preset). Tailwind's * ease-in-out is cubic-bezier(0.4, 0, 0.2, 1). * ══════════════════════════════════════════════════════════════════════ */ html body.tw-shell .wrapper .main-nav .navbar-nav .collapsing, html body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .collapsing { overflow: hidden !important; transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } html body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .collapse.show { overflow: visible !important; } /* Chevron turns smoothly on expand / collapse instead of snapping. */ html body.tw-shell .wrapper .main-nav .nav-item .menu-arrow, html body.tw-shell .wrapper .main-nav .nav-item .menu-arrow::after { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ── Structural sidebar refinements — EVERY theme (dark, dark-preset, pure-light). These are not colour choices, so they must not be theme-scoped: no left guide line, collapsed submenu indent, and section headings never steel-blue. ── */ html body.tw-shell .wrapper .main-nav .sub-navbar-nav::before, html body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-navbar-nav::before { content: none !important; background: none !important; border-left: 0 !important; } html body.tw-shell .wrapper .main-nav .sub-navbar-nav { padding-left: 0 !important; } /* The submenu GROUP TITLES ("Dashboard y Recuperación", "Análisis financiero", "Plan de Pagos") also carry .sub-nav-item, so this padding-left reset used to flatten them against the rail edge (their Bootstrap `px-3 pt-2 pb-1` was wiped out) — they sat at x=0 while their items sat at x=32. Exclude them here and give them their own indent below. (25-Jul-2026) */ html body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-item:not(.fe-nav-group-title) { padding-left: 0 !important; margin-left: 0 !important; } html body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link { padding-left: 24px !important; } html body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-navbar-nav .sub-nav-link { padding-left: 36px !important; } html body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title, html body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title.text-muted { color: #8a8a93 !important; /* quiet grey — legible on both dark and light rails */ } /* Group-title position: text lines up with the submenu item labels (32px = the .sub-nav-link's 8px margin + 24px padding), with breathing room above. */ html body.tw-shell .wrapper .main-nav .navbar-nav .sub-navbar-nav .sub-nav-item.fe-nav-group-title { padding: 10px 12px 4px 32px !important; margin: 0 !important; font-size: 10px !important; letter-spacing: .07em !important; line-height: 1.4 !important; white-space: nowrap !important; } /* ══════════════════════════════════════════════════════════════════════ * SHELL CHROME = LOGIN BACKGROUND — identical in LIGHT & DARK (25-Jul-2026) * ---------------------------------------------------------------------- * Client: the sidebar + topbar must carry the LOGIN PAGE's near-black * fluted-glass background, and look the SAME in light mode as in dark mode * (a persistent dark chrome — only the page CONTENT flips light/dark). * Because the rail is always dark now, ALL its text/icons use the dark * muted treatment in every theme. Scoped `[data-bs-theme][data-menu-color]` * (2 always-present attrs) so it ties the 2-attr light "white" block on * specificity and wins by source order, and beats the 1-attr light rules. * ══════════════════════════════════════════════════════════════════════ */ /* Claude-app chrome tokens: FLAT warm-dark surfaces, no gradient, no fluting. */ :root { /* (25-Jul-2026) Client: sidebar takes the topbar's tone — one flat surface. */ --cc-nav-bg: #262624; /* sidebar rail */ --cc-topbar-bg: #262624; /* top bar */ --cc-edge: rgba(255,255,255,0.07); --cc-text: #c8c6c0; /* item label */ --cc-text-strong: #faf9f5; /* active label */ --cc-text-hover: #eceae4; --cc-icon: #a09e98; --cc-heading: #8a8a85; /* PINNED / RECENTS style section labels */ --cc-hover-bg: rgba(255,255,255,0.05); --cc-active-bg: #333331; } /* ── Sidebar rail surface — flat Claude dark ── */ html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav.main-nav.main-nav { background-color: var(--cc-nav-bg) !important; background-image: none !important; --bs-main-nav-bg: var(--cc-nav-bg) !important; border-right: 1px solid var(--cc-edge) !important; box-shadow: none !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav::before, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav::after { content: none !important; background: none !important; box-shadow: none !important; } /* Internals transparent so the rail gradient shows through in every theme. */ html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .scrollbar, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-wrapper, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-mask, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-offset, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .simplebar-content, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .logo-box { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ── Topbar surface — flat Claude dark (a touch lighter than the rail) ── */ html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar { background-color: var(--cc-topbar-bg) !important; background-image: none !important; border-bottom: 1px solid var(--cc-edge) !important; box-shadow: none !important; } html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar::after { background: none !important; } /* ── Sidebar text / icons = Claude-app treatment in EVERY theme ── */ html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link { color:var(--cc-text) !important; text-shadow:none !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link .nav-icon iconify-icon, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link iconify-icon { color:var(--cc-icon) !important; filter:none !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link:hover { color:var(--cc-text-hover) !important; background-color:var(--cc-hover-bg) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link:hover .nav-icon iconify-icon { color:var(--cc-text-hover) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.active { color:var(--cc-text-strong) !important; background-color:var(--cc-active-bg) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.active .nav-icon iconify-icon { color:var(--cc-text-strong) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .nav-link.nav-link.nav-link.menu-arrow.active:not(:hover) { background-color:transparent !important; color:var(--cc-text) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .menu-title { color:var(--cc-heading) !important; text-shadow:none !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link { color:var(--cc-text) !important; text-shadow:none !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link:hover { color:var(--cc-text-hover) !important; background-color:var(--cc-hover-bg) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.active { color:var(--cc-text-strong) !important; background-color:var(--cc-active-bg) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title.text-muted { color:var(--cc-heading) !important; text-shadow:none !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .menu-arrow::after { color:var(--cc-heading) !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .tw-ws-name { color:var(--cc-text-strong) !important; text-shadow:none !important; } html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav .tw-ws-sub { color:var(--cc-heading) !important; } /* ── Topbar text / icons light on the flat dark surface, every theme ── */ html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar a, html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar span, html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar button { color:var(--cc-text) !important; } html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar iconify-icon { color:var(--cc-icon) !important; } html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar .tw-topbar-search { background:rgba(255,255,255,.05) !important; border-color:var(--cc-edge) !important; color:var(--cc-heading) !important; } html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar .tw-topbar-search-input { color:var(--cc-text-strong) !important; } html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar input { background:rgba(255,255,255,.05) !important; color:var(--cc-text-strong) !important; border-color:var(--cc-edge) !important; } html[data-bs-theme][data-menu-color] body.tw-shell #tw-topbar input::placeholder { color:var(--cc-heading) !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 `
` 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: var(--cc-topbar-bg) !important; background-image: none !important; border-bottom: 1px solid var(--cc-edge) !important; box-shadow: none !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 { /* Flat Claude-app dark chrome — same as light mode. */ background-color: var(--cc-nav-bg) !important; background-image: none !important; border-right: 1px solid var(--cc-edge) !important; box-shadow: none !important; --bs-main-nav-bg: var(--cc-nav-bg) !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 `