/* ============================================================================ * Tailwind-shell skin for the existing Bootstrap sidebar * ---------------------------------------------------------------------------- * Scoped under `body.tw-shell` so it ONLY activates when the modern layout * renders. Re-paints the existing `.wrapper .main-nav` (which still owns every * menu item + permission gate) in a slate-950 / Tailwind aesthetic. * * Pairs with: _MainNav.cshtml (menu items) and _TailwindTopbar.cshtml (glass). * ============================================================================ */ /* ── Topbar brand logo (per docx 13-May-2026) — show white on dark topbar, * color isotipo on light topbar. Default both hidden, then re-enable * based on bs-theme. Color schemes (Indigo/Forest/Royal/Ocean) have a * DARK topbar so they keep the white logo. */ body.tw-shell .tw-topbar-brand-logo { display: none !important; } body.tw-shell .tw-topbar-brand-logo--dark { display: inline-block !important; } html[data-bs-theme="light"] body.tw-shell .tw-topbar-brand-logo--dark { display: none !important; } html[data-bs-theme="light"] body.tw-shell .tw-topbar-brand-logo--light { display: inline-block !important; } /* Slate Light is the only scheme whose topbar is light; the 4 color schemes * (indigo/forest/royal/ocean) have a DARK topbar shell — keep the white logo. */ html[data-tw-theme="indigo"] body.tw-shell .tw-topbar-brand-logo--dark, html[data-tw-theme="forest"] body.tw-shell .tw-topbar-brand-logo--dark, html[data-tw-theme="royal"] body.tw-shell .tw-topbar-brand-logo--dark, html[data-tw-theme="ocean"] body.tw-shell .tw-topbar-brand-logo--dark { display: inline-block !important; } html[data-tw-theme="indigo"] body.tw-shell .tw-topbar-brand-logo--light, html[data-tw-theme="forest"] body.tw-shell .tw-topbar-brand-logo--light, html[data-tw-theme="royal"] body.tw-shell .tw-topbar-brand-logo--light, html[data-tw-theme="ocean"] body.tw-shell .tw-topbar-brand-logo--light { display: none !important; } body.tw-shell { /* Linear.app palette (DARK default). Light overrides at bottom of file. */ --tw-bg: #08090a; /* page (very near black) */ --tw-surface: #0e0e10; /* sidebar / topbar base */ --tw-elev: #18181b; /* raised cards / hover */ --tw-border: #1f1f23; /* hairline */ --tw-text: #e6e6e6; /* primary */ --tw-text-dim: #b4b4b4; /* secondary */ --tw-text-faint: #6e6e76; /* tertiary */ --tw-accent: #16a34a; /* Frutana green */ --tw-accent-bg: rgba(22, 163, 74, 0.12); --tw-accent-ring: rgba(22, 163, 74, 0.30); /* Slim sidebar (~16% of viewport, with safe bounds). Overrides the legacy Bootstrap variable so width, min-width, and the content's padding-left all shift in lockstep. */ --bs-main-nav-width: clamp(200px, 16vw, 250px) !important; /* Override every legacy `--bs-main-nav-*` var so the dark/blue gradient from app.css can't bleed through. Sidebar reads as the elevated card surface — same #1a1a1f tone as topbar and dashboard cards. */ --bs-main-nav-bg: #0d1f12 !important; --bs-main-nav-item-color: #b4b4b4 !important; --bs-main-nav-item-hover-bg: rgba(22, 163, 74, 0.12) !important; --bs-main-nav-item-hover-color: #e6e6e6 !important; --bs-main-nav-border-color: transparent !important; } /* ── Force the modern shell font everywhere except inside the menu ── */ body.tw-shell { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } /* -------------------------------------------------------------------------- */ /* Sidebar — `.wrapper .main-nav` */ /* Matches the topbar / dashboard card surface (#1a1a1f) so the entire */ /* elevated-surface layer reads as one continuous panel. */ /* Uses maximum-specificity selector chain + !important to override every */ /* legacy app.css `--bs-main-nav-bg` gradient rule across all theme combos. */ /* -------------------------------------------------------------------------- */ html body.tw-shell .wrapper .main-nav, html[data-bs-theme] body.tw-shell .wrapper .main-nav, html[data-menu-color] body.tw-shell .wrapper .main-nav, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav { /* Floating-card sidebar — same Y as the first content card, with rounded corners on all 4 sides. Tighter offsets to remove empty horizontal space. Topbar height bumped from 48 → 56 px (14-May-2026), so top offset += 8. */ top: 80px !important; left: 8px !important; bottom: 8px !important; border-radius: 12px !important; /* Use overflow:hidden only horizontally; vertical scroll is provided by SimpleBar inside `.scrollbar`. Hiding both clips expanding submenus. */ overflow-x: hidden !important; overflow-y: hidden !important; background: #0d1f12 !important; background-color: #0d1f12 !important; background-image: linear-gradient(180deg, rgba(22,163,74,0.04) 0%, transparent 80px) !important; border-right: none !important; box-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6) !important; color: var(--tw-text) !important; /* Make sure the inner flex column fills the sidebar so SimpleBar can measure its parent correctly when submenus expand. */ display: flex !important; flex-direction: column !important; } /* The .scrollbar child must FILL the sidebar height (legacy app.css subtracts var(--bs-topbar-height) which we no longer have at the sidebar's top). */ html body.tw-shell .wrapper .main-nav .scrollbar, html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .scrollbar { height: auto !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } /* SimpleBar inner wrapper must allow vertical scroll so expanding submenus stay accessible even when total menu height exceeds sidebar height. */ html body.tw-shell .wrapper .main-nav .simplebar-wrapper, html body.tw-shell .wrapper .main-nav .simplebar-mask, html body.tw-shell .wrapper .main-nav .simplebar-offset { height: 100% !important; } html body.tw-shell .wrapper .main-nav .simplebar-content-wrapper { overflow-y: auto !important; overflow-x: hidden !important; max-height: 100% !important; } /* Bootstrap collapse animations should NOT be clipped by the menu container. */ html body.tw-shell .wrapper .main-nav .navbar-nav .collapse, html body.tw-shell .wrapper .main-nav .navbar-nav .collapsing { overflow: visible !important; } /* Make sure sub-navbars render fully (no hidden by app.css overrides). */ html body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .collapse.show, html body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .collapsing { display: block !important; } html body.tw-shell .wrapper .main-nav .sub-navbar-nav { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Belt-and-suspenders: also kill the legacy CSS variable on every layer. */ html[data-bs-theme="dark"] body.tw-shell, html[data-menu-color="dark"] body.tw-shell, html[data-bs-theme="dark"][data-menu-color="dark"] body.tw-shell, html[data-bs-theme="dark"][data-menu-color="light"] body.tw-shell, html[data-menu-color="brand"] body.tw-shell, body.tw-shell { --bs-main-nav-bg: #0d1f12 !important; } /* -------------------------------------------------------------------------- */ /* CRITICAL: The legacy `.scrollbar` child INSIDE `.main-nav` paints its own */ /* background in sm-hover mode (app.css line 14503). That child sits on top */ /* of `.main-nav` and visually masks our sidebar background. Force it dark. */ /* Also paint the SimpleBar internals so nothing peeks through. */ /* -------------------------------------------------------------------------- */ html body.tw-shell .wrapper .main-nav .scrollbar, html body.tw-shell .wrapper .main-nav .simplebar-wrapper, html body.tw-shell .wrapper .main-nav .simplebar-mask, html body.tw-shell .wrapper .main-nav .simplebar-offset, html body.tw-shell .wrapper .main-nav .simplebar-content-wrapper, html body.tw-shell .wrapper .main-nav .simplebar-content, html body.tw-shell .wrapper .main-nav .logo-box, html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .scrollbar, html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .logo-box { background: #0d1f12 !important; background-color: #0d1f12 !important; background-image: none !important; } /* Logo strip — emptied (brand strip lives inside the menu now). Sidebar starts below the full-width topbar, so no top spacer is needed here. */ body.tw-shell .wrapper .main-nav .logo-box { background: transparent !important; border-bottom: 0 !important; min-height: 0 !important; height: 0 !important; padding: 0 !important; line-height: 1 !important; padding: 0 12px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } body.tw-shell .wrapper .main-nav .logo-box img, body.tw-shell .wrapper .main-nav .logo-box .logo-lg, body.tw-shell .wrapper .main-nav .logo-box .logo-sm, body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-logo { max-height: 26px !important; height: 26px !important; width: auto !important; } /* Nudge the logo lockup slightly downward inside the strip. */ body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-lockup, body.tw-shell .wrapper .main-nav .logo-box .sidebar-home-link { transform: translateY(3px); } body.tw-shell .wrapper .main-nav .logo-box .sidebar-tenant-info { display: none !important; } /* In condensed / sm-hover collapsed state, hide the wide logo & show the small one. */ body.tw-shell .wrapper .main-nav .logo-box .logo-lg, body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-horizontal { display: none !important; } body.tw-shell .wrapper .main-nav .logo-box .logo-sm { display: inline-block !important; } /* Sidebar is always slate-950 in tw-shell → always show the white-logo anchor, hide colored. Using `.sidebar-home-link.logo-X` (specificity 0,6,0) so it WINS over the more general `.sidebar-home-link { display: inline-flex }` rule below. */ body.tw-shell .wrapper .main-nav .logo-box .sidebar-home-link.logo-dark { display: none !important; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-home-link.logo-light { display: inline-flex !important; align-items: center; gap: 8px; } /* ── Text wordmark next to the small isotipo (per client 12-May-2026) ── "Global" in bold + "ERP" in light, both white, sits to the right of the icon. */ body.tw-shell .wrapper .main-nav .logo-box .sidebar-home-link { display: inline-flex !important; align-items: center !important; gap: 8px; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-wordmark { display: inline-flex; align-items: baseline; gap: 3px; line-height: 1; color: #ffffff; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; letter-spacing: -0.005em; white-space: nowrap; user-select: none; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-wordmark .gt-bold { font-size: 14px; font-weight: 700; color: #ffffff; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-wordmark .gt-light { font-size: 12.5px; font-weight: 400; color: #ffffff; opacity: 0.85; margin-left: 1px; } /* When sm-hover sidebar is collapsed (not hovered), hide the wordmark so the rail stays icon-only. Visible when hovered or pinned. */ html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .sidebar-gt-wordmark { display: none !important; } /* ── Sidebar pin / collapse toggle (per client 12-May-2026) ── Sits next to the Global ERP wordmark, white icon. Shows the "minimize" icon when the sidebar is pinned-expanded, and the outline icon when slim (sm-hover). */ body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--tw-border); background: var(--tw-elev); border-radius: 6px; color: #e6e6e6; cursor: pointer; transition: border-color .12s, background-color .12s, color .12s; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-toggle:hover { border-color: var(--tw-border-hover, #2a2a2e); background: var(--tw-bg); color: #ffffff; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-toggle iconify-icon { display: inline-block; line-height: 0; } /* Show the bold "minimize" icon by default (means: click to collapse) */ body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-toggle .tw-icon-expand { display: inline-block !important; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-toggle .tw-icon-collapse { display: none !important; } /* When sidebar is in slim sm-hover mode, swap icons (click to pin/expand). */ html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-toggle .tw-icon-expand { display: none !important; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-toggle .tw-icon-collapse { display: inline-block !important; } /* When sm-hover collapsed (not hovered), hide toggle (rail is too narrow). */ html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .sidebar-gt-toggle { display: none !important; } /* Ensure the lockup gives space to both the wordmark anchor AND the toggle. */ body.tw-shell .wrapper .main-nav .logo-box .sidebar-gt-lockup { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px; width: 100%; } body.tw-shell .wrapper .main-nav .logo-box .sidebar-home-link.logo-light { flex: 1 1 auto; min-width: 0; } /* ── Group labels — minimal, quiet, compact ── */ body.tw-shell .wrapper .main-nav .menu-title { font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; /* (16-May-2026: brighter group labels so the menu hierarchy is readable on dark bg.) */ color: #94a3b8 !important; opacity: 1 !important; padding: 14px 16px 4px !important; } /* ── Nav items ── */ body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link { font-family: 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; /* (16-May-2026: white text on dark bg — was muted greenish #7da898 which was unreadable.) */ color: #e6e6e6 !important; letter-spacing: -0.005em; padding: 6px 10px 6px 12px !important; margin: 1px 6px !important; border-radius: 7px !important; /* (16-May-2026 audit fix.) Wider rail (4px instead of 2px) so the active accent is visible at a glance instead of fading into background. */ border-left: 4px solid transparent !important; transition: color .1s ease, background-color .1s ease, border-color .1s ease; gap: 9px; min-height: 34px; } /* Icon color matches text by default — full visibility on dark bg. */ body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon, body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon iconify-icon { color: #cbd5e1 !important; } /* Icon sizing */ body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon iconify-icon, body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon i { font-size: 16px !important; width: 16px !important; flex-shrink: 0; } /* Hover */ body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover, body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:focus { background-color: rgba(255,255,255,.08) !important; color: #ffffff !important; font-weight: 400 !important; border-left-color: transparent !important; box-shadow: none !important; } /* Expanded (submenu open) */ body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.show { background-color: rgba(22,163,74,.10) !important; color: #86efac !important; font-weight: 500 !important; border-left-color: #16a34a !important; box-shadow: none !important; } /* Active — (16-May-2026 audit fix.) Stronger contrast: bigger left-border accent, denser background fill, bolder text + brighter icon so users instantly see where they are. */ body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active { background-color: rgba(22,163,74,.22) !important; color: #d1fae5 !important; font-weight: 600 !important; border-left-color: #22c55e !important; box-shadow: inset 0 0 0 1px rgba(34,197,94,.18) !important; } body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active .nav-icon, body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active .nav-icon iconify-icon { color: #4ade80 !important; } /* ── Sub-menu items ── */ body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link { font-family: 'Inter', system-ui, sans-serif !important; font-size: 12.5px !important; font-weight: 400 !important; /* (16-May-2026: brighter sub-nav text on dark — was unreadable #5a8474.) */ color: #cbd5e1 !important; padding: 5px 10px 5px 28px !important; margin: 0px 6px !important; border-radius: 6px !important; border-left: 0 !important; transition: color .1s ease, background-color .1s ease; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: flex !important; align-items: center !important; gap: 6px !important; line-height: 1.35 !important; min-height: 29px !important; } body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link iconify-icon, body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link i { flex-shrink: 0; font-size: 13px !important; } body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link > span, body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link { overflow: hidden !important; text-overflow: ellipsis !important; } body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link:hover { background-color: rgba(255,255,255,.07) !important; color: #ffffff !important; font-weight: 400 !important; } body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.active { background-color: rgba(22,163,74,.18) !important; color: #d1fae5 !important; font-weight: 600 !important; /* Mirror the parent's left rail so deep-link locations still feel anchored. */ box-shadow: inset 3px 0 0 #22c55e !important; } /* Section labels inside the submenu (e.g. "DASHBOARD Y RECUPERACIÓN") */ body.tw-shell .wrapper .main-nav .sub-navbar-nav .fe-nav-group-title { padding: 10px 12px 4px !important; font-size: 9.5px !important; line-height: 1.3 !important; white-space: nowrap !important; } /* Deeper nested submenus (ps-3 indent) should not be MORE indented in our slim sidebar. */ body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-navbar-nav.ps-3 { padding-left: 0 !important; } body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-navbar-nav .sub-nav-link { padding-left: 38px !important; } /* Arrows (chevrons on expandable groups) */ body.tw-shell .wrapper .main-nav .menu-arrow::after { color: var(--tw-text-faint) !important; opacity: .7; } body.tw-shell .wrapper .main-nav .menu-arrow[aria-expanded=true]::after { color: var(--tw-accent) !important; opacity: 1; } /* Badges in the sidebar */ body.tw-shell .wrapper .main-nav .badge.bg-warning { background: var(--tw-accent) !important; color: #ffffff !important; font-weight: 600; font-size: 9px !important; border-radius: 9999px; padding: 2px 6px; } /* Sidebar scrollbar — Fluent thin */ body.tw-shell .wrapper .main-nav .scrollbar::-webkit-scrollbar { width: 8px; } body.tw-shell .wrapper .main-nav .scrollbar::-webkit-scrollbar-track { background: transparent; } body.tw-shell .wrapper .main-nav .scrollbar::-webkit-scrollbar-thumb { background-color: rgba(148, 163, 184, .2); border-radius: 4px; border: 2px solid var(--tw-bg); } body.tw-shell .wrapper .main-nav .scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(148, 163, 184, .4); } /* Sub-navbar background — same slate as parent (no light highlight) */ body.tw-shell .wrapper .main-nav .sub-navbar-nav { background-color: transparent !important; } /* -------------------------------------------------------------------------- */ /* Page-content offset + background */ /* -------------------------------------------------------------------------- */ /* Topbar is 48 px, not Bootstrap's default 70 px. Paint the entire content area so individual pages don't need negative margins to escape Bootstrap's container-fluid padding. */ /* ── Paint the dark canvas at EVERY level so there are no white slivers ── */ html:has(body.tw-shell), body.tw-shell, body.tw-shell .wrapper, body.tw-shell .wrapper > *, body.tw-shell .page-content, body.tw-shell .page-content > .container-fluid, body.tw-shell #tw-main { background-color: var(--tw-bg) !important; /* #08090a — Linear bg */ } /* Also catch the simplebar / scrollbar gutter inside the sidebar that occasionally reveals its own light bg between sidebar and content area. */ body.tw-shell .wrapper .main-nav, body.tw-shell .wrapper .main-nav .scrollbar, body.tw-shell .wrapper .main-nav .simplebar-content, body.tw-shell .wrapper .main-nav .simplebar-wrapper { background-color: var(--tw-bg) !important; } body.tw-shell { /* Make sure body fills the full viewport height for tall, sparse pages. */ min-height: 100vh; } body.tw-shell .page-content, body.tw-shell .wrapper .page-content { /* 56 px topbar + 24 px breathing room before the page content starts. (Topbar height bumped from 48 → 56 px on 14-May-2026.) */ padding-top: 80px !important; /* Content starts right after the floating sidebar's right edge (8 px sidebar offset + nav-width + 8 px gap). */ padding-left: calc(var(--bs-main-nav-width) + 16px) !important; padding-right: 8px !important; /* CRITICAL — app.css line 14257 adds margin-left: var(--bs-main-nav-width) which doubles the left offset. Kill it. */ margin-left: 0 !important; /* Footer is removed in modern shell — drop reserved 60 px space at the bottom. */ padding-bottom: 0 !important; background-color: var(--tw-bg); /* Always fill at least the viewport so empty pages don't reveal white below. */ min-height: 100vh !important; } /* Zero out container-fluid padding so pages can paint full-bleed inside it without negative-margin gymnastics. Each page owns its own gutters. */ body.tw-shell .page-content > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } /* -------------------------------------------------------------------------- */ /* When sidebar is in sm-hover collapsed state, hide labels gracefully so */ /* the rail looks like a clean icon-only Tailwind slim sidebar. */ /* -------------------------------------------------------------------------- */ html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .menu-title { display: none !important; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .nav-text { display: none !important; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .menu-arrow::after { display: none !important; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .badge { display: none !important; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .nav-link { justify-content: center !important; padding: 8px !important; margin: 1px 8px !important; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .sub-navbar-nav { display: none !important; } /* -------------------------------------------------------------------------- */ /* The legacy `.topbar` is NOT rendered in modern shell — but in case stray */ /* styles leak through, hide it. The new `#tw-topbar` (Tailwind) is used. */ /* -------------------------------------------------------------------------- */ body.tw-shell .wrapper > .topbar:not(#tw-topbar) { display: none !important; } /* Topbar — same elevated surface as sidebar/cards, NO hairline divider. */ body.tw-shell #tw-topbar { border-bottom: 0 !important; box-shadow: none !important; background-color: #0d1f12 !important; background-image: linear-gradient(180deg, rgba(22,163,74,0.04) 0%, transparent 60%) !important; position: fixed !important; /* keep viewport-pinned; never let any rule override to relative/static */ } /* Topbar — green gradient accent line at the very bottom edge */ body.tw-shell #tw-topbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(22,163,74,.14) 20%, rgba(74,222,128,.22) 48%, rgba(22,163,74,.14) 80%, transparent 100% ); pointer-events: none; } /* The legacy `_PageHeader.cshtml` partial is now styled below (tw-page-skin.css) to match the Linear welcome banner — no longer hidden. (12-May-2026, restored) */ /* -------------------------------------------------------------------------- */ /* Sidebar — brand strip moved INSIDE the menu (above Module launcher). */ /* Top of the sidebar is now empty. (12-May-2026) */ /* -------------------------------------------------------------------------- */ body.tw-shell .wrapper .main-nav .navbar-nav { padding-top: 4px !important; } body.tw-shell .wrapper .main-nav .tw-launcher-item { margin-top: 4px; } body.tw-shell .wrapper .main-nav .tw-sb-brand { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 14px 10px; margin: 0 0 4px; border-bottom: 0; } /* Toggle-only variant (13-May-2026) — used after the logo+wordmark moved to topbar. Smaller padding + right-align so the collapse button doesn't waste vertical space. */ body.tw-shell .wrapper .main-nav .tw-sb-brand--toggle-only { justify-content: flex-end; padding: 4px 10px 6px !important; margin: 0 !important; } body.tw-shell .wrapper .main-nav .tw-sb-brand-link { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; color: #ffffff; min-width: 0; } body.tw-shell .wrapper .main-nav .tw-sb-brand-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; } /* Show the WHITE isotipo in dark theme; hide the COLOR variant. */ body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--light { display: none; } body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--dark { display: inline-block; } /* Flip in light theme: show COLOR, hide WHITE. */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--dark { display: none !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--light { display: inline-block !important; } body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: #ffffff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.tw-shell .wrapper .main-nav .tw-sb-brand-bold { font-weight: 700; } body.tw-shell .wrapper .main-nav .tw-sb-brand-light { font-weight: 400; opacity: 0.95; margin-left: 2px; } body.tw-shell .wrapper .main-nav .tw-sb-brand-toggle { flex-shrink: 0; width: 28px; height: 28px; padding: 0; border-radius: 6px; background: transparent; border: 1px solid #26262b; color: #b4b4b4; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; } body.tw-shell .wrapper .main-nav .tw-sb-brand-toggle:hover { background: rgba(255,255,255,0.04); color: #ffffff; border-color: #36363c; } /* When the sidebar is collapsed (sm-hover, not hovered), collapse the brand too. */ html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .tw-sb-brand { padding: 6px 8px 10px; justify-content: center; gap: 4px; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .tw-sb-brand .tw-sb-brand-wordmark { display: none; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .tw-sb-brand .tw-sb-brand-toggle { display: none; } /* -------------------------------------------------------------------------- */ /* Sidebar search trigger — Linear/Raycast pill that opens Cmd+K. */ /* Moved here from the topbar (12-May-2026). Hidden in slim rail mode. */ /* -------------------------------------------------------------------------- */ body.tw-shell .wrapper .main-nav .tw-sb-search-wrap { list-style: none; margin: 8px 8px 4px; padding: 0; } body.tw-shell .wrapper .main-nav .tw-sb-search { width: 100%; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px; background: #23232a !important; /* slightly elevated above sidebar */ border: 1px solid #2a2a2e; border-radius: 6px; color: var(--tw-text-dim); font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .12s, color .12s, background-color .12s; appearance: none; -webkit-appearance: none; text-align: left; line-height: 1; } body.tw-shell .wrapper .main-nav .tw-sb-search:hover { border-color: #36363c; color: var(--tw-text); background-color: #2a2a2e !important; } body.tw-shell .wrapper .main-nav .tw-sb-search:focus-visible { outline: none; border-color: var(--tw-accent); box-shadow: 0 0 0 2px var(--tw-accent-bg); } body.tw-shell .wrapper .main-nav .tw-sb-search .tw-sb-search-icon { font-size: 13px; flex-shrink: 0; } body.tw-shell .wrapper .main-nav .tw-sb-search .tw-sb-search-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.tw-shell .wrapper .main-nav .tw-sb-search .tw-sb-search-kbd { display: inline-flex; align-items: center; gap: 1px; padding: 0 5px; height: 17px; border-radius: 4px; background: #08090a; border: 1px solid #2a2a2e; color: var(--tw-text-faint); font-size: 10px; font-weight: 600; font-family: inherit; flex-shrink: 0; } /* In slim sm-hover state — collapse the search to an icon-only square. */ html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .tw-sb-search { justify-content: center; padding: 0; width: 32px; height: 32px; margin: 0 auto; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .tw-sb-search .tw-sb-search-label, html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav:not(:hover) .tw-sb-search .tw-sb-search-kbd { display: none !important; } /* ════════════════════════════════════════════════════════════════════════════ * LIGHT THEME — "Clean Jade" (May 2026) * Concept: pure white sidebar, clean typography, ONE signature detail: * active items have a glowing 4px left accent bar. Nothing overdone. * Professional, refined, different from every standard ERP. * ════════════════════════════════════════════════════════════════════════════ */ /* ── Page canvas ── */ 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 .page-content > .container-fluid { background-color: #f8fafc !important; color: #1e293b !important; } /* Green glow on the LEFT edge of page-content — mirrors topbar's bottom glow, appears to bleed from the sidebar's right edge into the content area */ html[data-bs-theme="light"] body.tw-shell .page-content { box-shadow: inset 8px 0 16px -6px rgba(22,163,74,.28) !important; } /* ══════════════════════════════════════════════════════════════════════ * Bootstrap sidebar — light mode (matches topbar light-green palette, * 17-May-2026 — per client: sidebar should feel branded the same as the * topbar, not a plain white slab. Uniform very-light green so the * whole rail reads "branded" instead of fading mid-way.) * ══════════════════════════════════════════════════════════════════════ */ 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 { background: #edfbf2 !important; background-color: #edfbf2 !important; background-image: none !important; border-right: none !important; box-shadow: 1px 0 0 rgba(22,163,74,.15), 2px 0 12px rgba(0,0,0,.04) !important; color: #1e293b !important; --bs-main-nav-bg: #edfbf2 !important; --bs-main-nav-item-color: #475569 !important; --bs-main-nav-item-hover-bg: rgba(22,163,74,.10) !important; --bs-main-nav-item-hover-color: #15803d !important; position: fixed !important; } /* Green accent line at the TOP edge */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient( 90deg, #16a34a 0%, rgba(22,163,74,.55) 35%, rgba(74,222,128,.25) 70%, transparent 100% ) !important; border-radius: 12px 12px 0 0 !important; pointer-events: none !important; z-index: 10 !important; } /* Green accent line on the RIGHT edge */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav::after { content: '' !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 3px !important; background: linear-gradient( 180deg, #16a34a 0%, rgba(22,163,74,.55) 35%, rgba(74,222,128,.25) 70%, transparent 100% ) !important; border-radius: 0 12px 12px 0 !important; pointer-events: none !important; z-index: 10 !important; } 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 { /* (17-May-2026) Transparent so the parent .main-nav's green gradient shows through. Was hardcoded #ffffff which masked the new gradient. */ background: transparent !important; background-color: transparent !important; background-image: none !important; } /* Section labels */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-title { color: #94a3b8 !important; font-weight: 700 !important; font-size: 9.5px !important; letter-spacing: 0.09em !important; opacity: 1 !important; } /* Nav link base */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link { color: #475569 !important; font-weight: 500 !important; border-radius: 8px !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link iconify-icon, html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link i { color: #94a3b8 !important; opacity: 1 !important; } /* Hover */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover, html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:focus { background-color: #e2e8f0 !important; color: #334155 !important; box-shadow: none !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover iconify-icon { color: #475569 !important; } /* Active — soft mint pill, no left accent bar. (16-May-2026: removed the inset 4px green left rail per client — keeps the bg fill + soft inner glow so the active row still stands out without the visual "tab" feel.) */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active, html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.show { background-color: #dcfce7 !important; background-image: none !important; color: #15803d !important; font-weight: 600 !important; border-radius: 8px !important; border-left-color: transparent !important; box-shadow: inset 0 0 0 1px rgba(22,163,74,.18) !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active iconify-icon, html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.show iconify-icon { color: #16a34a !important; } /* Sub-menu links */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link { color: #64748b !important; font-weight: 400 !important; border-radius: 6px !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link:hover { background-color: #f8fafc !important; color: #334155 !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.active { background-color: #dcfce7 !important; color: #15803d !important; font-weight: 600 !important; /* (16-May-2026: removed the inset left rail per client — keeps only soft outline. */ box-shadow: inset 0 0 0 1px rgba(22,163,74,.16) !important; border-radius: 6px !important; } /* Arrows */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-arrow::after { color: #cbd5e1 !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .menu-arrow[aria-expanded=true]::after { color: #16a34a !important; } /* Sidebar brand-strip */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark, html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-brand-link { color: #1e293b !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-brand-toggle { background: transparent !important; border-color: #e2e8f0 !important; color: #94a3b8 !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-brand-toggle:hover { background: #f8fafc !important; color: #475569 !important; border-color: #cbd5e1 !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .logo-box .sidebar-home-link.logo-dark { display: inline-flex !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .logo-box .sidebar-home-link.logo-light { display: none !important; } /* Sidebar search */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-search { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #94a3b8 !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-search:hover { background: #e9eef4 !important; color: #334155 !important; border-color: #cbd5e1 !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-search .tw-sb-search-kbd { background: #e9eef4 !important; border-color: #e2e8f0 !important; color: #94a3b8 !important; } /* ══════════════════════════════════════════════════════════════════════ * Topbar — "Frutana Mint" premium split-tone (light mode) * Left brand zone: soft mint wash → pure white by mid-bar. * A solid-green bottom rule anchors the brand colour on the left edge. * ══════════════════════════════════════════════════════════════════════ */ html[data-bs-theme="light"] body.tw-shell #tw-topbar { background: linear-gradient( 90deg, #e6f4ea 0%, #edfbf2 12%, #f5fffd 28%, #ffffff 52% ) !important; background-image: linear-gradient( 90deg, #e6f4ea 0%, #edfbf2 12%, #f5fffd 28%, #ffffff 52% ) !important; border-bottom: 1px solid transparent !important; color: #1e293b !important; box-shadow: 0 1px 0 rgba(22,163,74,.18), 0 2px 12px rgba(0,0,0,.07) !important; } /* Brand accent rule: crisp #16a34a on far-left → fades out by 68% */ html[data-bs-theme="light"] body.tw-shell #tw-topbar::after { background: linear-gradient( 90deg, #16a34a 0%, rgba(22,163,74,.42) 18%, rgba(74,222,128,.16) 42%, transparent 68% ) !important; height: 2px !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: #334155 !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: #1e293b !important; } 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: #64748b !important; } 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: #94a3b8 !important; } html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="background:#18181b"] { background-color: rgba(0,0,0,.04) !important; } /* ════════════════════════════════════════════════════════════════════════ * FRUTANA PREMIUM TOPBAR — May 2026 * DM Sans · dark-green shell · refined search, icons, user chip * ════════════════════════════════════════════════════════════════════════ */ /* DM Sans for entire topbar */ body.tw-shell #tw-topbar, body.tw-shell #tw-topbar * { font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif !important; } /* Frutana wordmark */ body.tw-shell .tw-topbar-wordmark { font-size: 14.5px; font-weight: 700; color: #ffffff; letter-spacing: -.025em; white-space: nowrap; } html[data-bs-theme="light"] body.tw-shell .tw-topbar-wordmark { color: #0d1f12; } /* — Search field — (16-May-2026: was a click-button, now a real .) */ body.tw-shell .tw-topbar-search { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.50); width: 240px; max-width: 28%; flex-shrink: 0; border-radius: 10px; font-size: 12.5px; font-weight: 500; transition: background .14s, border-color .14s, color .14s, box-shadow .14s; } body.tw-shell .tw-topbar-search:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.78); } body.tw-shell .tw-topbar-search:focus-within { background: rgba(255,255,255,.10); border-color: rgba(22,163,74,.55); color: #ffffff; box-shadow: 0 0 0 3px rgba(22,163,74,.18); } body.tw-shell .tw-topbar-search iconify-icon { color: inherit; } /* The actual inside the search shell — transparent, inherits container styling. */ body.tw-shell .tw-topbar-search-input { flex: 1 1 0%; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0; color: inherit; font-size: inherit; font-weight: 400; font-family: inherit; } body.tw-shell .tw-topbar-search-input::placeholder { color: rgba(255,255,255,.45); font-weight: 400; } body.tw-shell .tw-topbar-search-input:focus { color: #ffffff; } body.tw-shell .tw-topbar-search-input:focus::placeholder { color: rgba(255,255,255,.55); } /* ⌘K keyboard shortcut hint inside the search field */ body.tw-shell .tw-topbar-kbd { display: inline-flex; align-items: center; padding: 1px 5px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.35); font-size: 10.5px; font-weight: 600; font-family: 'DM Sans', system-ui, sans-serif; letter-spacing: 0; flex-shrink: 0; line-height: 1; pointer-events: none; } html[data-bs-theme="light"] body.tw-shell .tw-topbar-kbd { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); color: #a1a1aa; } /* — Icon buttons — */ body.tw-shell .tw-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: transparent !important; border: 0; transition: background .14s ease; cursor: pointer; position: relative; } body.tw-shell .tw-icon-btn iconify-icon { font-size: 18px; line-height: 1; transition: transform .14s ease, filter .14s ease; } body.tw-shell .tw-icon-btn:hover { background: rgba(255,255,255,.075) !important; } body.tw-shell .tw-icon-btn:hover iconify-icon { transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(74,222,128,.28)); } body.tw-shell .tw-icon-btn:focus-visible { outline: 2px solid rgba(22,163,74,.45); outline-offset: 1px; } /* (16-May-2026: pure white icons in dark mode so they read at-a-glance.) */ html body.tw-shell .tw-icon-btn iconify-icon { color: #ffffff !important; } /* — Hamburger toggle — styled to match the sidebar brand-toggle (bordered square) — */ body.tw-shell #tw-topbar #tw-mobile-menu-toggle { width: 30px !important; height: 30px !important; border-radius: 6px !important; border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.04) !important; transition: background .12s ease, border-color .12s ease !important; } body.tw-shell #tw-topbar #tw-mobile-menu-toggle:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.30) !important; } body.tw-shell #tw-topbar #tw-mobile-menu-toggle iconify-icon { font-size: 16px !important; } /* Light mode overrides for hamburger */ html[data-bs-theme="light"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle { border: 1px solid #d2d0ce !important; background: rgba(0,0,0,.02) !important; } html[data-bs-theme="light"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle:hover { background: rgba(22,163,74,.07) !important; border-color: rgba(22,163,74,.30) !important; } /* Fluent theme hamburger */ html[data-tw-theme="fluent"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle { border: 1px solid #d2d0ce !important; background: transparent !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle:hover { background: rgba(0,120,212,.07) !important; border-color: rgba(0,120,212,.35) !important; } /* — Notification badge (compact, sits at top-right corner of bell icon). (16-May-2026: bumped font + forced white text — "99+" was rendering dim/dark against red.) */ body.tw-shell .tw-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: #dc2626 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 18px !important; text-align: center; box-shadow: 0 0 0 2px #0d1f12; letter-spacing: -0.02em; transform: translate(25%, -25%); pointer-events: none; z-index: 2; text-shadow: 0 1px 0 rgba(0,0,0,.18); } /* Bell icon stays above any rendering quirks of the badge. */ body.tw-shell #page-header-notifications-dropdown iconify-icon { position: relative; z-index: 1; } /* — Vertical separator — */ body.tw-shell .tw-topbar-sep { display: inline-block; width: 1px; height: 18px; background: rgba(255,255,255,.09); margin: 0 4px; flex-shrink: 0; } /* — User chip — */ body.tw-shell .tw-user-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 3px 10px 3px 4px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: rgba(255,255,255,.82); transition: background .14s ease, border-color .14s ease; cursor: pointer; } body.tw-shell .tw-user-chip:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); } body.tw-shell .tw-user-chip:hover .tw-user-avatar { box-shadow: 0 0 0 2px rgba(74,222,128,.28), 0 1px 8px rgba(22,163,74,.40); } body.tw-shell .tw-user-avatar { position: relative; display: inline-flex; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #16a34a, #4ade80); box-shadow: 0 1px 6px rgba(22,163,74,.30); } body.tw-shell .tw-user-avatar img { width: 100%; height: 100%; object-fit: cover; } body.tw-shell .tw-user-avatar-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 11px; font-weight: 700; color: #ffffff; letter-spacing: -.01em; } body.tw-shell .tw-user-meta { display: none !important; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; } @media (min-width: 768px) { body.tw-shell .tw-user-meta { display: flex !important; } } body.tw-shell .tw-user-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.88); white-space: nowrap; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; } body.tw-shell .tw-user-company { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.40); white-space: nowrap; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; } body.tw-shell .tw-user-chevron { font-size: 13px; color: rgba(255,255,255,.35); flex-shrink: 0; transition: transform .15s ease; } body.tw-shell .tw-user-chip[aria-expanded="true"] .tw-user-chevron { transform: rotate(180deg); } /* — Light theme overrides — */ /* ── Search field ── */ html[data-bs-theme="light"] body.tw-shell .tw-topbar-search { background: rgba(255,255,255,.75); border-color: rgba(22,163,74,.18); color: #64748b; backdrop-filter: blur(4px); } html[data-bs-theme="light"] body.tw-shell .tw-topbar-search-input { color: #0f172a; } html[data-bs-theme="light"] body.tw-shell .tw-topbar-search-input::placeholder { color: #94a3b8; } html[data-bs-theme="light"] body.tw-shell .tw-topbar-search:focus-within { background: #ffffff; border-color: rgba(22,163,74,.55); color: #0f172a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); } html[data-bs-theme="light"] body.tw-shell .tw-topbar-search:hover { background: #ffffff; border-color: rgba(22,163,74,.32); color: #334155; box-shadow: 0 0 0 2px rgba(22,163,74,.08); } /* ── Icon buttons ── */ html[data-bs-theme="light"] body.tw-shell .tw-icon-btn:hover { background: rgba(22,163,74,.08) !important; } html[data-bs-theme="light"] body.tw-shell .tw-icon-btn iconify-icon { color: #52776a !important; filter: none; } html[data-bs-theme="light"] body.tw-shell .tw-icon-btn:hover iconify-icon { color: #15803d !important; filter: none; } /* ── Notification badge ── */ html[data-bs-theme="light"] body.tw-shell .tw-notif-badge { box-shadow: 0 0 0 2px #ffffff; color: #ffffff !important; } /* ── Separator ── */ html[data-bs-theme="light"] body.tw-shell .tw-topbar-sep { background: rgba(22,163,74,.15); } /* ── User chip ── */ html[data-bs-theme="light"] body.tw-shell .tw-user-chip { color: #1e293b; background: rgba(255,255,255,.8); border-color: rgba(22,163,74,.18); } html[data-bs-theme="light"] body.tw-shell .tw-user-chip:hover { background: #ffffff; border-color: rgba(22,163,74,.32); color: #15803d; box-shadow: 0 0 0 2px rgba(22,163,74,.08); } html[data-bs-theme="light"] body.tw-shell .tw-user-chip:hover .tw-user-avatar { box-shadow: 0 0 0 2px rgba(22,163,74,.25), 0 2px 8px rgba(22,163,74,.15); } html[data-bs-theme="light"] body.tw-shell .tw-user-name { color: #1e293b; } html[data-bs-theme="light"] body.tw-shell .tw-user-company { color: #64748b; } html[data-bs-theme="light"] body.tw-shell .tw-user-chevron { color: #94a3b8; } /* ── Topbar date pill (plain text — no box, 14-May-2026) ────────────── * Just text, no background, no border, no padding. */ body.tw-shell .tw-date-pill, html body.tw-shell .tw-date-pill, html[data-bs-theme] body.tw-shell .tw-date-pill { padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; height: auto !important; font-family: 'Inter', system-ui, sans-serif !important; } body.tw-shell .tw-date-pill-text { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: -0.005em; color: rgba(255,255,255,.75); white-space: nowrap; text-transform: capitalize; background: transparent !important; border: 0 !important; padding: 0 !important; } /* Dark topbar — breadcrumb & separator inline colours → crisp white */ body.tw-shell #tw-topbar [style*="color:#e6e6e6"], body.tw-shell #tw-topbar [style*="color: #e6e6e6"] { color: #ffffff !important; } body.tw-shell #tw-topbar [style*="color:#b4b4b4"], body.tw-shell #tw-topbar [style*="color: #b4b4b4"] { color: rgba(255,255,255,.78) !important; } body.tw-shell #tw-topbar [style*="color:#4f4f56"], body.tw-shell #tw-topbar [style*="color: #4f4f56"] { color: rgba(255,255,255,.35) !important; } html[data-bs-theme="light"] body.tw-shell .tw-date-pill-text { color: #52525b; } /* Notification badge halo (#memo-notification-badge) — its `box-shadow:0 0 0 2px #1a1a1f` was painting a dark ring around the badge on light theme, making the bell icon look clipped. In light theme the halo must match the white topbar surface. */ html[data-bs-theme="light"] body.tw-shell #tw-topbar #memo-notification-badge { box-shadow: 0 0 0 2px #ffffff !important; } /* Light-theme catch-all for topbar iconify icons — but EXCLUDE the colorful .tw-icon-btn icons so each one keeps its per-button accent color. */ html[data-bs-theme="light"] body.tw-shell #tw-topbar :not(.tw-icon-btn) > iconify-icon { color: #52525b; } html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="background:#23232a"], html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="background: #23232a"] { background-color: #f4f4f5 !important; border-color: #e4e4e7 !important; } /* Search trigger hover state — inline onmouseover sets dark bg which looks ugly on the light topbar. Force light hover colors that match the rest of the light theme. */ html[data-bs-theme="light"] body.tw-shell #tw-search-trigger { background-color: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #52525b !important; } html[data-bs-theme="light"] body.tw-shell #tw-search-trigger:hover { background-color: #e4e4e7 !important; border-color: #d4d4d8 !important; color: #18181b !important; } html[data-bs-theme="light"] body.tw-shell #tw-search-trigger:hover iconify-icon, html[data-bs-theme="light"] body.tw-shell #tw-search-trigger:hover span { color: #18181b !important; } html[data-bs-theme="light"] body.tw-shell #tw-search-trigger .tw-topbar-kbd, html[data-bs-theme="light"] body.tw-shell #tw-search-trigger kbd { background-color: #ffffff !important; border-color: #d4d4d8 !important; color: #71717a !important; } html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="border:1px solid #2a2a2e"] { border-color: #e4e4e7 !important; } html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="background:#08090a"] { background: #f4f4f5 !important; } /* Notification bell red dot — keep red */ html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="background:#e54d2e"] { background: #dc2626 !important; box-shadow: 0 0 0 2px #ffffff !important; } /* Topbar dropdown menus on light */ html[data-bs-theme="light"] body.tw-shell .dropdown-menu { background: #ffffff !important; border-color: rgba(22,163,74,.14) !important; box-shadow: 0 12px 36px -8px rgba(22,163,74,.14), 0 2px 8px rgba(0,0,0,0.06) !important; } html[data-bs-theme="light"] body.tw-shell .dropdown-item { color: #334155 !important; font-weight: 500 !important; } html[data-bs-theme="light"] body.tw-shell .dropdown-item:hover, html[data-bs-theme="light"] body.tw-shell .dropdown-item:focus { background: linear-gradient(90deg, rgba(22,163,74,.12) 0%, rgba(22,163,74,.05) 100%) !important; color: #15803d !important; } /* Topbar date pill in light */ html[data-bs-theme="light"] body.tw-shell #tw-topbar [style*="background:rgba(255,255,255,0.025)"] { background: #f4f4f5 !important; } /* Command palette (Cmd+K) — light variant */ html[data-bs-theme="light"] #tw-cmdk { background: rgba(244, 244, 245, 0.72) !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-panel { background: linear-gradient(180deg, rgba(0,0,0,0.012) 0%, transparent 60%), #ffffff !important; border: 1px solid #e4e4e7 !important; box-shadow: 0 1px 0 0 rgba(0,0,0,0.04) inset, 0 24px 64px -16px rgba(0,0,0,0.20), 0 0 0 1px rgba(59, 130, 246, 0.04) !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-search { border-bottom: 1px solid #e4e4e7 !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-search iconify-icon { color: #a1a1aa !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-input { color: #18181b !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-input::placeholder { color: #a1a1aa !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-kbd, html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-foot-kbd { background: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #71717a !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-group { color: #a1a1aa !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmd-item { color: #3f3f46 !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmd-item:hover, html[data-bs-theme="light"] #tw-cmdk .tw-cmd-item.is-active { background: rgba(59, 130, 246, 0.10) !important; color: #18181b !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmd-icon { background: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #71717a !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmd-label { color: #18181b !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmd-hint { color: #a1a1aa !important; } html[data-bs-theme="light"] #tw-cmdk .tw-cmdk-foot { background: rgba(244, 244, 245, 0.45) !important; border-top: 1px solid #e4e4e7 !important; color: #71717a !important; } /* Sidebar search button in light */ html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-search { background: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #71717a !important; } html[data-bs-theme="light"] body.tw-shell .wrapper .main-nav .tw-sb-search:hover { background: #e4e4e7 !important; color: #18181b !important; border-color: #d4d4d8 !important; } /* ── Sidebar toggle transitions (hamburger desktop toggle) ── */ body.tw-shell .wrapper .main-nav { transition: transform .25s cubic-bezier(.16,1,.3,1), margin-left .25s cubic-bezier(.16,1,.3,1); } body.tw-shell .page-content, body.tw-shell .wrapper .page-content { transition: padding-left .25s cubic-bezier(.16,1,.3,1), margin-left .25s cubic-bezier(.16,1,.3,1); } /* ── Hidden sidebar — slide out + collapse page-content left padding ── Uses data-tw-sidebar (not data-menu-size) so Bootstrap / layout.js never resets it. */ html[data-tw-sidebar="hidden"] body.tw-shell .wrapper .main-nav { transform: translateX(-110%) !important; pointer-events: none !important; } html[data-tw-sidebar="hidden"] body.tw-shell .page-content, html[data-tw-sidebar="hidden"] body.tw-shell .wrapper .page-content { padding-left: 16px !important; } /* Page canvas */ html[data-bs-theme="light"] body.tw-shell .page-content, html[data-bs-theme="light"] body.tw-shell .page-content > .container-fluid { background-color: #f8fafc !important; color: #1e293b !important; } /* ════════════════════════════════════════════════════════════════════════════ * COLOR-SCHEME SHELL OVERRIDES — sidebar + topbar per scheme * Selected via `html[data-tw-theme="indigo|forest|royal|ocean"]`. * Each scheme has a DARK shell (high-contrast) on a LIGHT canvas. * ════════════════════════════════════════════════════════════════════════════ */ /* ── INDIGO scheme — slate-900 shell ─────────────────────────────────── */ html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav, html[data-tw-theme="indigo"][data-menu-color] body.tw-shell .wrapper .main-nav { background: #0f172a !important; background-color: #0f172a !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, transparent 80px) !important; color: #e2e8f0 !important; box-shadow: 0 12px 32px -16px rgba(15,23,42,0.45) !important; --bs-main-nav-bg: #0f172a !important; --bs-main-nav-item-color: #cbd5e1 !important; --bs-main-nav-item-hover-bg: rgba(59, 130, 246, 0.18) !important; --bs-main-nav-item-hover-color: #ffffff !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .scrollbar, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .simplebar-wrapper, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .simplebar-mask, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .simplebar-offset, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .simplebar-content, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .logo-box { background: #0f172a !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link { color: #cbd5e1 !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active { background: rgba(59,130,246,0.18) !important; color: #ffffff !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .menu-title { color: #64748b !important; } html[data-tw-theme="indigo"] body.tw-shell #tw-topbar { background-color: #0f172a !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 60%) !important; border-bottom: 1px solid rgba(59,130,246,0.12) !important; color: #e2e8f0 !important; } html[data-tw-theme="indigo"] body.tw-shell #tw-topbar [style*="color:#b4b4b4"], html[data-tw-theme="indigo"] body.tw-shell #tw-topbar [style*="color: #b4b4b4"] { color: #94a3b8 !important; } html[data-tw-theme="indigo"] body.tw-shell #tw-topbar [style*="color:#e6e6e6"] { color: #e2e8f0 !important; } html[data-tw-theme="indigo"] body.tw-shell #tw-topbar [style*="background:#23232a"] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.10) !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .tw-sb-brand-link, html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark { color: #ffffff !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .tw-sb-search { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; color: #94a3b8 !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--dark { display: inline-block !important; } html[data-tw-theme="indigo"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--light { display: none !important; } /* ── FOREST scheme — deep teal shell ─────────────────────────────────── */ html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav, html[data-tw-theme="forest"][data-menu-color] body.tw-shell .wrapper .main-nav { background: #0c1f1a !important; background-color: #0c1f1a !important; background-image: linear-gradient(180deg, rgba(16,185,129,0.04) 0%, transparent 80px) !important; color: #d1fae5 !important; box-shadow: 0 12px 32px -16px rgba(6,78,59,0.50) !important; --bs-main-nav-bg: #0c1f1a !important; --bs-main-nav-item-color: #a7f3d0 !important; --bs-main-nav-item-hover-bg: rgba(16, 185, 129, 0.18) !important; --bs-main-nav-item-hover-color: #ffffff !important; } html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .scrollbar, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .simplebar-wrapper, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .simplebar-mask, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .simplebar-offset, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .simplebar-content, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .logo-box { background: #0c1f1a !important; } html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link { color: #a7f3d0 !important; } html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active { background: rgba(16,185,129,0.18) !important; color: #ffffff !important; } html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .menu-title { color: #4d7c70 !important; } html[data-tw-theme="forest"] body.tw-shell #tw-topbar { background-color: #0c1f1a !important; border-bottom: 1px solid rgba(16,185,129,0.12) !important; color: #d1fae5 !important; } html[data-tw-theme="forest"] body.tw-shell #tw-topbar [style*="color:#b4b4b4"] { color: #84a098 !important; } html[data-tw-theme="forest"] body.tw-shell #tw-topbar [style*="color:#e6e6e6"] { color: #d1fae5 !important; } html[data-tw-theme="forest"] body.tw-shell #tw-topbar [style*="background:#23232a"] { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; } html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .tw-sb-brand-link, html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark { color: #ffffff !important; } html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--dark { display: inline-block !important; } html[data-tw-theme="forest"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--light { display: none !important; } /* ── ROYAL scheme — deep indigo shell ────────────────────────────────── */ html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav, html[data-tw-theme="royal"][data-menu-color] body.tw-shell .wrapper .main-nav { background: #1e1b4b !important; background-color: #1e1b4b !important; background-image: linear-gradient(180deg, rgba(168,85,247,0.06) 0%, transparent 80px) !important; color: #e0e7ff !important; box-shadow: 0 12px 32px -16px rgba(76,29,149,0.50) !important; --bs-main-nav-bg: #1e1b4b !important; --bs-main-nav-item-color: #c7d2fe !important; --bs-main-nav-item-hover-bg: rgba(168, 85, 247, 0.20) !important; --bs-main-nav-item-hover-color: #ffffff !important; } html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .scrollbar, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .simplebar-wrapper, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .simplebar-mask, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .simplebar-offset, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .simplebar-content, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .logo-box { background: #1e1b4b !important; } html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link { color: #c7d2fe !important; } html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active { background: rgba(168,85,247,0.20) !important; color: #ffffff !important; } html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .menu-title { color: #8b88b6 !important; } html[data-tw-theme="royal"] body.tw-shell #tw-topbar { background-color: #1e1b4b !important; border-bottom: 1px solid rgba(168,85,247,0.18) !important; color: #e0e7ff !important; } html[data-tw-theme="royal"] body.tw-shell #tw-topbar [style*="color:#b4b4b4"] { color: #a5a3c9 !important; } html[data-tw-theme="royal"] body.tw-shell #tw-topbar [style*="color:#e6e6e6"] { color: #e0e7ff !important; } html[data-tw-theme="royal"] body.tw-shell #tw-topbar [style*="background:#23232a"] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; } html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .tw-sb-brand-link, html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark { color: #ffffff !important; } html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--dark { display: inline-block !important; } html[data-tw-theme="royal"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--light { display: none !important; } /* ── OCEAN scheme — cyan-900 shell ───────────────────────────────────── */ html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav, html[data-tw-theme="ocean"][data-menu-color] body.tw-shell .wrapper .main-nav { background: #083344 !important; background-color: #083344 !important; background-image: linear-gradient(180deg, rgba(6,182,212,0.06) 0%, transparent 80px) !important; color: #cffafe !important; box-shadow: 0 12px 32px -16px rgba(8,51,68,0.50) !important; --bs-main-nav-bg: #083344 !important; --bs-main-nav-item-color: #a5f3fc !important; --bs-main-nav-item-hover-bg: rgba(6, 182, 212, 0.20) !important; --bs-main-nav-item-hover-color: #ffffff !important; } html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .scrollbar, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .simplebar-wrapper, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .simplebar-mask, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .simplebar-offset, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .simplebar-content, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .logo-box { background: #083344 !important; } html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link { color: #a5f3fc !important; } html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active { background: rgba(6,182,212,0.20) !important; color: #ffffff !important; } html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .menu-title { color: #67e8f9 !important; } html[data-tw-theme="ocean"] body.tw-shell #tw-topbar { background-color: #083344 !important; border-bottom: 1px solid rgba(6,182,212,0.18) !important; color: #cffafe !important; } html[data-tw-theme="ocean"] body.tw-shell #tw-topbar [style*="color:#b4b4b4"] { color: #67e8f9 !important; } html[data-tw-theme="ocean"] body.tw-shell #tw-topbar [style*="color:#e6e6e6"] { color: #cffafe !important; } html[data-tw-theme="ocean"] body.tw-shell #tw-topbar [style*="background:#23232a"] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; } html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .tw-sb-brand-link, html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark { color: #ffffff !important; } html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--dark { display: inline-block !important; } html[data-tw-theme="ocean"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--light { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════ * COLOR SCHEME TOPBAR FIX — Indigo/Forest/Royal/Ocean have data-bs-theme= * "light" (for the content canvas) but a DARK topbar. The generic light-mode * rules at the top of the file (lines 905-907, 931, 1099, 1159, etc.) turn * all text/icons dark. These rules undo that for the dark topbar elements. * ══════════════════════════════════════════════════════════════════════════ */ /* — Icon buttons: restore white icons on dark topbar — */ html[data-tw-theme="indigo"] body.tw-shell .tw-icon-btn iconify-icon, html[data-tw-theme="forest"] body.tw-shell .tw-icon-btn iconify-icon, html[data-tw-theme="royal"] body.tw-shell .tw-icon-btn iconify-icon, html[data-tw-theme="ocean"] body.tw-shell .tw-icon-btn iconify-icon { color: rgba(255,255,255,.92) !important; filter: none; } html[data-tw-theme="indigo"] body.tw-shell .tw-icon-btn:hover iconify-icon, html[data-tw-theme="forest"] body.tw-shell .tw-icon-btn:hover iconify-icon, html[data-tw-theme="royal"] body.tw-shell .tw-icon-btn:hover iconify-icon, html[data-tw-theme="ocean"] body.tw-shell .tw-icon-btn:hover iconify-icon { color: #ffffff !important; filter: drop-shadow(0 0 5px rgba(255,255,255,.18)); } html[data-tw-theme="indigo"] body.tw-shell .tw-icon-btn:hover, html[data-tw-theme="forest"] body.tw-shell .tw-icon-btn:hover, html[data-tw-theme="royal"] body.tw-shell .tw-icon-btn:hover, html[data-tw-theme="ocean"] body.tw-shell .tw-icon-btn:hover { background: rgba(255,255,255,.09) !important; } /* — Topbar a / span / button: restore light text — */ html[data-tw-theme="indigo"] body.tw-shell #tw-topbar a, html[data-tw-theme="indigo"] body.tw-shell #tw-topbar span, html[data-tw-theme="indigo"] body.tw-shell #tw-topbar button, html[data-tw-theme="forest"] body.tw-shell #tw-topbar a, html[data-tw-theme="forest"] body.tw-shell #tw-topbar span, html[data-tw-theme="forest"] body.tw-shell #tw-topbar button, html[data-tw-theme="royal"] body.tw-shell #tw-topbar a, html[data-tw-theme="royal"] body.tw-shell #tw-topbar span, html[data-tw-theme="royal"] body.tw-shell #tw-topbar button, html[data-tw-theme="ocean"] body.tw-shell #tw-topbar a, html[data-tw-theme="ocean"] body.tw-shell #tw-topbar span, html[data-tw-theme="ocean"] body.tw-shell #tw-topbar button { color: rgba(255,255,255,.85) !important; } /* — Wordmark — */ html[data-tw-theme="indigo"] body.tw-shell .tw-topbar-wordmark, html[data-tw-theme="forest"] body.tw-shell .tw-topbar-wordmark, html[data-tw-theme="royal"] body.tw-shell .tw-topbar-wordmark, html[data-tw-theme="ocean"] body.tw-shell .tw-topbar-wordmark { color: #ffffff !important; } /* — Date pill — */ html[data-tw-theme="indigo"] body.tw-shell .tw-date-pill-text, html[data-tw-theme="forest"] body.tw-shell .tw-date-pill-text, html[data-tw-theme="royal"] body.tw-shell .tw-date-pill-text, html[data-tw-theme="ocean"] body.tw-shell .tw-date-pill-text { color: rgba(255,255,255,.75) !important; } /* — User chip — */ html[data-tw-theme="indigo"] body.tw-shell .tw-user-chip, html[data-tw-theme="forest"] body.tw-shell .tw-user-chip, html[data-tw-theme="royal"] body.tw-shell .tw-user-chip, html[data-tw-theme="ocean"] body.tw-shell .tw-user-chip { color: rgba(255,255,255,.82) !important; background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.09) !important; } html[data-tw-theme="indigo"] body.tw-shell .tw-user-chip:hover, html[data-tw-theme="forest"] body.tw-shell .tw-user-chip:hover, html[data-tw-theme="royal"] body.tw-shell .tw-user-chip:hover, html[data-tw-theme="ocean"] body.tw-shell .tw-user-chip:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.15) !important; color: #ffffff !important; } html[data-tw-theme="indigo"] body.tw-shell .tw-user-name, html[data-tw-theme="forest"] body.tw-shell .tw-user-name, html[data-tw-theme="royal"] body.tw-shell .tw-user-name, html[data-tw-theme="ocean"] body.tw-shell .tw-user-name { color: rgba(255,255,255,.88) !important; } html[data-tw-theme="indigo"] body.tw-shell .tw-user-company, html[data-tw-theme="forest"] body.tw-shell .tw-user-company, html[data-tw-theme="royal"] body.tw-shell .tw-user-company, html[data-tw-theme="ocean"] body.tw-shell .tw-user-company { color: rgba(255,255,255,.40) !important; } html[data-tw-theme="indigo"] body.tw-shell .tw-user-chevron, html[data-tw-theme="forest"] body.tw-shell .tw-user-chevron, html[data-tw-theme="royal"] body.tw-shell .tw-user-chevron, html[data-tw-theme="ocean"] body.tw-shell .tw-user-chevron { color: rgba(255,255,255,.35) !important; } /* — Separator — */ html[data-tw-theme="indigo"] body.tw-shell .tw-topbar-sep, html[data-tw-theme="forest"] body.tw-shell .tw-topbar-sep, html[data-tw-theme="royal"] body.tw-shell .tw-topbar-sep, html[data-tw-theme="ocean"] body.tw-shell .tw-topbar-sep { background: rgba(255,255,255,.09) !important; } /* — Search trigger — */ html[data-tw-theme="indigo"] body.tw-shell #tw-search-trigger, html[data-tw-theme="forest"] body.tw-shell #tw-search-trigger, html[data-tw-theme="royal"] body.tw-shell #tw-search-trigger, html[data-tw-theme="ocean"] body.tw-shell #tw-search-trigger { background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.09) !important; color: rgba(255,255,255,.50) !important; } html[data-tw-theme="indigo"] body.tw-shell #tw-search-trigger:hover, html[data-tw-theme="forest"] body.tw-shell #tw-search-trigger:hover, html[data-tw-theme="royal"] body.tw-shell #tw-search-trigger:hover, html[data-tw-theme="ocean"] body.tw-shell #tw-search-trigger:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.78) !important; } html[data-tw-theme="indigo"] body.tw-shell #tw-search-trigger iconify-icon, html[data-tw-theme="forest"] body.tw-shell #tw-search-trigger iconify-icon, html[data-tw-theme="royal"] body.tw-shell #tw-search-trigger iconify-icon, html[data-tw-theme="ocean"] body.tw-shell #tw-search-trigger iconify-icon { color: inherit !important; } /* — ⌘K kbd hint — */ html[data-tw-theme="indigo"] body.tw-shell .tw-topbar-kbd, html[data-tw-theme="forest"] body.tw-shell .tw-topbar-kbd, html[data-tw-theme="royal"] body.tw-shell .tw-topbar-kbd, html[data-tw-theme="ocean"] body.tw-shell .tw-topbar-kbd { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.11) !important; color: rgba(255,255,255,.35) !important; } /* — Notification badge halo — */ html[data-tw-theme="indigo"] body.tw-shell #tw-topbar #memo-notification-badge { box-shadow: 0 0 0 2px #0f172a !important; } html[data-tw-theme="forest"] body.tw-shell #tw-topbar #memo-notification-badge { box-shadow: 0 0 0 2px #0c1f1a !important; } html[data-tw-theme="royal"] body.tw-shell #tw-topbar #memo-notification-badge { box-shadow: 0 0 0 2px #1e1b4b !important; } html[data-tw-theme="ocean"] body.tw-shell #tw-topbar #memo-notification-badge { box-shadow: 0 0 0 2px #083344 !important; } /* ════════════════════════════════════════════════════════════════════════════ * MOBILE RESPONSIVE RULES (≤ 992 px → tablet, ≤ 640 px → phone) * Sidebar slides over the page on small screens; topbar tightens up; the * page-content reclaims its full width with no left padding. * ════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1023.98px) { body.tw-shell #tw-topbar { padding: 0 8px !important; } body.tw-shell #tw-topbar .flex.h-full { gap: 8px !important; } /* Hide breadcrumb on tablet — it's already in the page header */ body.tw-shell #tw-topbar nav[aria-label="Breadcrumb"] { display: none !important; } /* Sidebar overlays the page on tablet. NOTE: selector specificity must be ≥ desktop rule's `html body.tw-shell .wrapper .main-nav` (0,3,2). Prefixing with `html` matches. */ html body.tw-shell .wrapper .main-nav, html[data-bs-theme] body.tw-shell .wrapper .main-nav, html[data-menu-color] body.tw-shell .wrapper .main-nav, html[data-bs-theme][data-menu-color] body.tw-shell .wrapper .main-nav { top: 56px !important; bottom: 0 !important; left: 0 !important; border-radius: 0 !important; z-index: 1040 !important; /* Force FULL sidebar width on mobile — override the slim `data-menu-size="sm-hover"` */ width: min(78vw, 300px) !important; min-width: min(78vw, 300px) !important; max-width: 300px !important; transform: translateX(-105%); transition: transform 0.22s cubic-bezier(.22,1,.36,1); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55) !important; } /* Open state: slide in. Wins because of source order + matching specificity. */ html[data-menu-state="open"] body.tw-shell .wrapper .main-nav, html body.tw-shell .wrapper .main-nav.show, html[data-bs-theme] body.tw-shell .wrapper .main-nav.show { transform: translateX(0) !important; } /* On mobile, override the slim-hover layout so menu items show with text, not icon-only */ html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav, html body.tw-shell .wrapper .main-nav { /* Defeat `data-menu-size="sm-hover"` collapsed width */ --bs-main-nav-width: 300px !important; } html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link span, html[data-menu-size="sm-hover"] body.tw-shell .wrapper .main-nav .menu-title { opacity: 1 !important; visibility: visible !important; width: auto !important; display: inline-block !important; } body.tw-shell .page-content, body.tw-shell .wrapper .page-content { margin-left: 0 !important; padding-left: 8px !important; padding-right: 8px !important; padding-top: 56px !important; } } @media (max-width: 640px) { body.tw-shell #tw-topbar { height: 48px !important; padding: 0 !important; } body.tw-shell #tw-topbar > .flex.h-full { padding-left: 6px !important; padding-right: 6px !important; gap: 4px !important; } body.tw-shell .wrapper .main-nav { top: 48px !important; } /* Shrink search trigger to icon-only — give the content card room to breathe */ body.tw-shell #tw-search-trigger { flex: 0 0 auto !important; max-width: 36px !important; width: 36px !important; height: 32px !important; padding: 0 !important; margin: 0 !important; justify-content: center !important; } body.tw-shell #tw-search-trigger > span, body.tw-shell #tw-search-trigger > kbd, body.tw-shell #tw-search-trigger > .tw-topbar-kbd { display: none !important; } /* Tighter icon buttons */ body.tw-shell #tw-topbar .h-8 { height: 32px !important; } body.tw-shell #tw-topbar .h-9 { height: 32px !important; } body.tw-shell #tw-topbar .w-8 { width: 32px !important; } body.tw-shell #tw-topbar .w-9 { width: 32px !important; } body.tw-shell #tw-topbar .text-\[13px\] { font-size: 12px !important; } body.tw-shell #tw-topbar .gap-1 { gap: 2px !important; } /* Right cluster: smaller gap */ body.tw-shell #tw-topbar .ml-auto { gap: 2px !important; } /* Hide non-essential topbar elements on phone */ body.tw-shell #tw-topbar [data-tw-date-pill], body.tw-shell #tw-topbar [data-tw-lang-toggle] { display: none !important; } body.tw-shell .page-content, body.tw-shell .wrapper .page-content { padding-top: 56px !important; padding-left: 6px !important; padding-right: 6px !important; } body.tw-shell .page-content > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } /* Module Launcher: kill its built-in 24/28 px padding on phone */ body.tw-shell .lin-root { padding: 14px 8px 28px !important; } body.tw-shell .lin-hero-block { max-width: 100% !important; } body.tw-shell .lin-hero-h1 { font-size: clamp(26px, 7vw, 36px) !important; line-height: 1.1 !important; } body.tw-shell .lin-hero-sub { font-size: 14px !important; max-width: 100% !important; } /* Module Launcher meta row: stack vertically on phone, was justify-between */ body.tw-shell .lin-meta-row { flex-wrap: wrap !important; gap: 8px !important; } body.tw-shell .lin-meta-end { flex-wrap: wrap !important; } /* Stack KPI cards on phone */ body.tw-shell .page-content .row.g-3 > [class*="col-md-"], body.tw-shell .page-content .row.g-2 > [class*="col-md-"] { flex: 0 0 100% !important; max-width: 100% !important; } /* Tighter buttons on phone */ html body.tw-shell .page-content .btn { font-size: 12px !important; padding: 7px 10px !important; } /* Theme picker offcanvas: full-width on phone */ .tw-theme-pane { width: 100% !important; max-width: 100vw !important; } .tw-theme-grid { grid-template-columns: 1fr !important; } } /* ════════════════════════════════════════════════════════════════════════════ * SLATE LIGHT — topbar visibility fix (high-specificity, end-of-file wins) * data-tw-theme="light" + data-bs-theme="light" = Frutana mint topbar. * Dual-attribute + #tw-topbar ID = specificity (1,4,3) beats every rule above. * ════════════════════════════════════════════════════════════════════════════ */ /* Icon buttons — the critical fix: make all icons dark & visible on white */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar .tw-icon-btn iconify-icon { color: #1e3932 !important; filter: none !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar .tw-icon-btn:hover iconify-icon { color: #15803d !important; filter: drop-shadow(0 0 4px rgba(22,163,74,.22)) !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar .tw-icon-btn:hover { background: rgba(22,163,74,.08) !important; } /* Hamburger in particular — always make sure it's dark */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar #tw-mobile-menu-toggle iconify-icon { color: #1e3932 !important; } /* All a/span/button text inside topbar */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar a, html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar span, html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar button { color: #334155 !important; } /* Wordmark */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-topbar-wordmark { color: #0d1f12 !important; } /* Date pill */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-date-pill-text { color: #475569 !important; } /* Separator */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-topbar-sep { background: rgba(22,163,74,.18) !important; } /* Breadcrumb inline-style overrides — inline color styles for dark/light text */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#e6e6e6"], html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #e6e6e6"] { color: #1e293b !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#b4b4b4"], html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #b4b4b4"] { color: #64748b !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#4f4f56"], html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #4f4f56"] { color: #cbd5e1 !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color:#6e6e76"], html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar [style*="color: #6e6e76"] { color: #94a3b8 !important; } /* Search trigger */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-search-trigger { background-color: #f1f5f9 !important; border-color: rgba(22,163,74,.22) !important; color: #64748b !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-search-trigger:hover { background-color: #e2e8f0 !important; border-color: rgba(22,163,74,.40) !important; color: #1e293b !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-search-trigger iconify-icon { color: #64748b !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-search-trigger:hover iconify-icon { color: #15803d !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-topbar-kbd { background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.10) !important; color: #94a3b8 !important; } /* User chip */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-user-chip { color: #1e293b !important; background: rgba(255,255,255,.85) !important; border-color: rgba(22,163,74,.20) !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-user-name { color: #1e293b !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-user-company { color: #64748b !important; } html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell .tw-user-chevron { color: #94a3b8 !important; } /* Notification badge halo matches white topbar */ html[data-tw-theme="light"][data-bs-theme="light"] body.tw-shell #tw-topbar #memo-notification-badge { box-shadow: 0 0 0 2px #ffffff !important; } /* ════════════════════════════════════════════════════════════════════════════ * FLUENT THEME — Microsoft Office 365 / Windows 11 Fluent UI * Shell: white sidebar + white topbar · Canvas: #f3f2f1 grey * Primary: #0078d4 (Microsoft Blue) · Brand accent: #a4262c (Wine Red) * Font: 'Segoe UI', system-ui, -apple-system, sans-serif * ════════════════════════════════════════════════════════════════════════════ */ /* ── Font & smoothing ── */ html[data-tw-theme="fluent"] body.tw-shell, html[data-tw-theme="fluent"] body.tw-shell #tw-topbar, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-size: 14px; line-height: 1.4; } html[data-tw-theme="fluent"] body.tw-shell table td, html[data-tw-theme="fluent"] body.tw-shell table th { font-variant-numeric: tabular-nums; } /* ── Page canvas ── */ html[data-tw-theme="fluent"] body.tw-shell { background-color: #f3f2f1 !important; } html[data-tw-theme="fluent"] body.tw-shell .page-content, html[data-tw-theme="fluent"] body.tw-shell .page-content > .container-fluid { background-color: #f3f2f1 !important; color: #201f1e !important; } /* ── Topbar ── */ html[data-tw-theme="fluent"] body.tw-shell #tw-topbar { background: #ffffff !important; background-image: none !important; border-bottom: 1px solid #edebe9 !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; color: #201f1e !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-topbar::after { display: none !important; } /* Topbar a/span/button base text */ html[data-tw-theme="fluent"] body.tw-shell #tw-topbar a, html[data-tw-theme="fluent"] body.tw-shell #tw-topbar span, html[data-tw-theme="fluent"] body.tw-shell #tw-topbar button { color: #201f1e !important; } /* Wordmark — wine red brand */ html[data-tw-theme="fluent"] body.tw-shell .tw-topbar-wordmark { color: #a4262c !important; } /* Icon buttons */ html[data-tw-theme="fluent"] body.tw-shell #tw-topbar .tw-icon-btn iconify-icon { color: #605e5c !important; filter: none !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-topbar .tw-icon-btn:hover { background: rgba(0,120,212,.08) !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-topbar .tw-icon-btn:hover iconify-icon { color: #0078d4 !important; filter: drop-shadow(0 0 4px rgba(0,120,212,.18)) !important; } /* Search trigger */ html[data-tw-theme="fluent"] body.tw-shell #tw-search-trigger { background-color: #f3f2f1 !important; border-color: #edebe9 !important; color: #605e5c !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-search-trigger:hover { background-color: #eff6fc !important; border-color: #0078d4 !important; color: #0078d4 !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-search-trigger iconify-icon { color: #a19f9d !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-search-trigger:hover iconify-icon { color: #0078d4 !important; } html[data-tw-theme="fluent"] body.tw-shell .tw-topbar-kbd { background: #f3f2f1 !important; border-color: #d2d0ce !important; color: #a19f9d !important; } /* Date pill */ html[data-tw-theme="fluent"] body.tw-shell .tw-date-pill-text { color: #605e5c !important; } /* Separator */ html[data-tw-theme="fluent"] body.tw-shell .tw-topbar-sep { background: #edebe9 !important; } /* Breadcrumb inline-color overrides */ html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color:#e6e6e6"], html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color: #e6e6e6"] { color: #201f1e !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color:#b4b4b4"], html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color: #b4b4b4"] { color: #605e5c !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color:#4f4f56"], html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color: #4f4f56"] { color: #d2d0ce !important; } html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color:#6e6e76"], html[data-tw-theme="fluent"] body.tw-shell #tw-topbar [style*="color: #6e6e76"] { color: #a19f9d !important; } /* User chip */ html[data-tw-theme="fluent"] body.tw-shell .tw-user-chip { color: #201f1e !important; background: #f3f2f1 !important; border-color: #edebe9 !important; } html[data-tw-theme="fluent"] body.tw-shell .tw-user-chip:hover { background: #eff6fc !important; border-color: #0078d4 !important; color: #0078d4 !important; } html[data-tw-theme="fluent"] body.tw-shell .tw-user-name { color: #201f1e !important; } html[data-tw-theme="fluent"] body.tw-shell .tw-user-company { color: #605e5c !important; } html[data-tw-theme="fluent"] body.tw-shell .tw-user-chevron { color: #a19f9d !important; } /* Notification badge halo */ html[data-tw-theme="fluent"] body.tw-shell #tw-topbar #memo-notification-badge { box-shadow: 0 0 0 2px #ffffff !important; } /* ── Sidebar ── */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav, html[data-tw-theme="fluent"][data-menu-color] body.tw-shell .wrapper .main-nav { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border-right: 1px solid #edebe9 !important; box-shadow: none !important; color: #201f1e !important; --bs-main-nav-bg: #ffffff !important; --bs-main-nav-item-color: #201f1e !important; --bs-main-nav-item-hover-bg: #eff6fc !important; --bs-main-nav-item-hover-color: #0078d4 !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .scrollbar, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .simplebar-wrapper, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .simplebar-mask, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .simplebar-offset, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .simplebar-content-wrapper, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .simplebar-content, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .logo-box { background: #ffffff !important; } /* Section labels */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .menu-title { color: #a19f9d !important; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } /* Nav items */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link { color: #201f1e !important; border-left-color: transparent !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:focus { background-color: #eff6fc !important; color: #0078d4 !important; border-left-color: transparent !important; box-shadow: none !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.show { background-color: #eff6fc !important; color: #0078d4 !important; border-left-color: #0078d4 !important; box-shadow: none !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active { background-color: #eff6fc !important; color: #0078d4 !important; border-left-color: #0078d4 !important; box-shadow: none !important; font-weight: 600 !important; } /* Nav icons */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon iconify-icon, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link .nav-icon i { color: #605e5c !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link:hover .nav-icon iconify-icon, html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .navbar-nav .nav-item .nav-link.active .nav-icon iconify-icon { color: #0078d4 !important; } /* Sub-items */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link { color: #605e5c !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link:hover { background-color: #f3f2f1 !important; color: #201f1e !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .sub-navbar-nav .sub-nav-link.active { background-color: #eff6fc !important; color: #0078d4 !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 #0078d4, inset 6px 0 12px rgba(0,120,212,.08) !important; } /* Arrows */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .menu-arrow::after { color: #d2d0ce !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .menu-arrow[aria-expanded=true]::after { color: #0078d4 !important; } /* Brand strip */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-brand-wordmark { color: #a4262c !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-brand-link { color: #201f1e !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-brand-toggle { background: transparent !important; border-color: #edebe9 !important; color: #a19f9d !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-brand-toggle:hover { background: #f3f2f1 !important; color: #605e5c !important; border-color: #d2d0ce !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--dark { display: none !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-brand-logo--light { display: inline-block !important; } /* Sidebar search */ html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-search { background: #f3f2f1 !important; border-color: #edebe9 !important; color: #a19f9d !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-search:hover { background: #eff6fc !important; color: #0078d4 !important; border-color: #0078d4 !important; } html[data-tw-theme="fluent"] body.tw-shell .wrapper .main-nav .tw-sb-search .tw-sb-search-kbd { background: #edebe9 !important; border-color: #d2d0ce !important; color: #a19f9d !important; } /* ── Dropdowns ── */ html[data-tw-theme="fluent"] body.tw-shell .dropdown-menu { background: #ffffff !important; border-color: #edebe9 !important; box-shadow: 0 8px 32px -8px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06) !important; } html[data-tw-theme="fluent"] body.tw-shell .dropdown-item { color: #201f1e !important; } html[data-tw-theme="fluent"] body.tw-shell .dropdown-item:hover, html[data-tw-theme="fluent"] body.tw-shell .dropdown-item:focus { background: #eff6fc !important; color: #0078d4 !important; } /* ============================================================================ * MERGED CONTENT — Phase 1 consolidation (15-May-2026) * Previously separate files now folded into this single stylesheet: * - _tw-utilities.css (Tailwind utility replacements) * - tw-page-skin.css (Bootstrap component overrides) * - logo-custom.css (Logo / sidebar branding) * Source files have been removed from _HeadCSS.cshtml. * ============================================================================ */ /* ============================================================================ * Tailwind utility replacements (15-May-2026 — Phase 1: dropped Tailwind CDN) * Only the utility classes actually used in _TailwindTopbar / _MainNav and * a handful of other shell partials. Saves ~400 KB per page load + the CDN * script's per-page re-evaluation cost. * * NOTE: This file is concatenated into tw-shell-skin.css at build/merge time. * Keep utilities here, not component skin rules. * ============================================================================ */ /* Display */ .flex { display: flex; } .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } /* Position */ .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .top-0 { top: 0; } .right-0 { right: 0; } .left-0 { left: 0; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } /* Sizing */ .h-full { height: 100%; } .h-9 { height: 2.25rem; } .h-14 { height: 3.5rem; } .w-full { width: 100%; } .min-w-0 { min-width: 0; } .max-w-\[24\%\]{ max-width: 24%; } /* Flex */ .flex-shrink-0 { flex-shrink: 0; } .flex-1 { flex: 1 1 0%; } .flex-column { flex-direction: column; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } /* Spacing */ .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } .mr-2 { margin-right: 0.5rem; } /* Text */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-\[12\.5px\] { font-size: 12.5px; } .text-\[13px\] { font-size: 13px; } .text-\[14px\] { font-size: 14px; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-sans { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } /* Truncate */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Transitions */ .transition-all { transition: all .15s ease; } .transition-colors { transition: color .15s ease, background-color .15s ease, border-color .15s ease; } /* Hover */ .hover\:text-white:hover { color: #ffffff; } /* Responsive (Tailwind defaults: md=768, lg=1024, xl=1280) */ @media (min-width: 768px) { .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:block { display: block; } } @media (min-width: 1024px) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:block { display: block; } } @media (min-width: 1280px) { .xl\:flex { display: flex; } .xl\:hidden { display: none; } .xl\:block { display: block; } } /* ============================================================================ * Tailwind-shell Page skin — Bootstrap component-level overrides * ---------------------------------------------------------------------------- * Scoped to `body.tw-shell` so it ONLY applies under the modern Linear shell. * Re-paints every common Bootstrap building block (card, table, form-control, * badge, dropdown, alert, button) with the Linear dark palette so legacy list * / detail / form pages inherit the new theme without per-page changes. * * Companions: tw-shell-skin.css (shell), tw-dashboard-skin.css (Dashboard), * tw-page-skin.css (this file — generic pages). * 12-May-2026. * ============================================================================ */ body.tw-shell { /* DARK theme tokens (default). Light tokens at the bottom of this block. */ --pg-bg: #08090a; --pg-surface: #1a1a1f; --pg-surface-2: #23232a; --pg-elev: #2a2a2e; --pg-border: #26262b; --pg-border-2: #36363c; --pg-text: #e6e6e6; --pg-text-2: #b4b4b4; --pg-text-3: #8a8a93; --pg-text-4: #6e6e76; --pg-accent: #3b82f6; --pg-accent-2: #60a5fa; --pg-success: #4ecb7e; --pg-warning: #f5a524; --pg-danger: #e54d2e; --pg-info: #38bdf8; --pg-row-hover: rgba(255, 255, 255, 0.025); --pg-row-divider: rgba(255, 255, 255, 0.04); --pg-card-sheen: rgba(255, 255, 255, 0.018); } /* ── LIGHT THEME ─────────────────────────────────────────────────────── Toggles via the topbar moon button which sets html[data-bs-theme="light"]. All `--pg-*` variables flip to light-theme equivalents; everything that reads from them (cards, tables, forms, badges, etc.) auto-updates. */ html[data-bs-theme="light"] body.tw-shell, html:not(.dark)[data-bs-theme="light"] body.tw-shell { --pg-bg: #f4f4f5; /* page canvas */ --pg-surface: #ffffff; /* card surface */ --pg-surface-2: #fafafa; /* lifted input/hover surface */ --pg-elev: #f4f4f5; /* chip / track */ --pg-border: #e4e4e7; /* hairline */ --pg-border-2: #d4d4d8; /* hover hairline */ --pg-text: #18181b; /* primary text */ --pg-text-2: #3f3f46; /* secondary text */ --pg-text-3: #71717a; /* tertiary text */ --pg-text-4: #a1a1aa; /* placeholder / label */ --pg-accent: #3b82f6; --pg-accent-2: #1d4ed8; --pg-success: #16a34a; --pg-warning: #d97706; --pg-danger: #dc2626; --pg-info: #0284c7; --pg-row-hover: rgba(0, 0, 0, 0.025); --pg-row-divider: rgba(0, 0, 0, 0.06); --pg-card-sheen: rgba(0, 0, 0, 0.0); color-scheme: light; } /* Light-theme global background. */ html[data-bs-theme="light"] body.tw-shell { background-color: #f4f4f5 !important; color: #18181b !important; } html[data-bs-theme="light"] body.tw-shell .page-content, html[data-bs-theme="light"] body.tw-shell .page-content > .container-fluid, html[data-bs-theme="light"] body.tw-shell .wrapper, html[data-bs-theme="light"] body.tw-shell #tw-main { background-color: #f4f4f5 !important; } /* Default `.html` was forced #08090a for first-paint flash prevention. Override it when light theme is active. */ html[data-bs-theme="light"] { background-color: #f4f4f5 !important; } /* Light-theme override for the dark page-canvas paint in `tw-shell-skin.css`. */ html[data-bs-theme="light"] body.tw-shell { --tw-bg: #f4f4f5; --tw-surface: #ffffff; --tw-elev: #f4f4f5; --tw-border: #e4e4e7; --tw-text: #18181b; --tw-text-dim: #3f3f46; --tw-text-faint: #a1a1aa; } /* ── Cards (generic Bootstrap .card) — compact Linear refinement. ─────── */ body.tw-shell .page-content .card { background: var(--pg-surface) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 60px) !important; border: 1px solid var(--pg-border) !important; border-radius: 10px !important; color: var(--pg-text) !important; box-shadow: 0 1px 0 0 rgba(255,255,255,0.02) inset, 0 1px 2px 0 rgba(0,0,0,0.25) !important; transition: border-color .15s ease, transform .15s ease; } html body.tw-shell .page-content .card-header { background: transparent !important; border-bottom: 1px solid var(--pg-border) !important; padding: 10px 14px !important; color: var(--pg-text) !important; min-height: 0 !important; } html body.tw-shell .page-content .card-header h1, html body.tw-shell .page-content .card-header h2, html body.tw-shell .page-content .card-header h3, html body.tw-shell .page-content .card-header h4, html body.tw-shell .page-content .card-header h5, html body.tw-shell .page-content .card-header h6, html body.tw-shell .page-content .card-header .card-title { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--pg-text) !important; letter-spacing: -0.005em !important; margin: 0 !important; line-height: 1.3 !important; } html body.tw-shell .page-content .card-header iconify-icon { font-size: 14px !important; } body.tw-shell .page-content .card-body { color: var(--pg-text) !important; padding: 10px 12px !important; } /* Tighten the gap between filter row and the table beneath it. */ body.tw-shell .page-content .card-body .row.g-3.mb-3 { margin-bottom: 10px !important; } body.tw-shell .page-content .card-footer { background: transparent !important; border-top: 1px solid var(--pg-border) !important; color: var(--pg-text-3) !important; padding: 10px 14px !important; } body.tw-shell .page-content .card-title { color: var(--pg-text) !important; font-weight: 600 !important; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; font-size: 14px !important; letter-spacing: -0.005em; } /* ── Summary tiles (KPI-style cards at top of list pages) ─────────────── */ /* Pattern: `
[avatar-md + h4 + p.fs-22]
` */ body.tw-shell .page-content a.text-reset .card, body.tw-shell .page-content a.text-decoration-none .card { cursor: pointer; } body.tw-shell .page-content a.text-reset .card:hover, body.tw-shell .page-content a.text-decoration-none .card:hover { border-color: var(--pg-border-2) !important; transform: translateY(-1px); } body.tw-shell .page-content .card .avatar-md { width: 28px !important; height: 28px !important; border-radius: 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.tw-shell .page-content .card .avatar-md .avatar-title, body.tw-shell .page-content .card .avatar-md iconify-icon { font-size: 14px !important; } /* Summary-tile title (h4 inside avatar+title block) — Space Grotesk, compact. */ body.tw-shell .page-content .card .card-body h4, body.tw-shell .page-content .card .card-body h4.mb-0 { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--pg-text) !important; margin: 0 !important; letter-spacing: -0.005em; line-height: 1.2; } body.tw-shell .page-content .card .card-body h4 + p { font-size: 10px !important; color: var(--pg-text-4) !important; margin: 1px 0 0 !important; line-height: 1.2; } /* Summary count (the big number) — small but still readable. */ body.tw-shell .page-content .card .card-body p.fs-22 { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: var(--pg-text) !important; letter-spacing: -0.02em; line-height: 1; margin: 0 !important; font-variant-numeric: tabular-nums; } /* ── List-page summary tiles using `.dashboard-hstat` pattern ───────────── (PurchaseOrders, SalesOrders, Items, Bookings, etc.) — re-align with the BusinessPartners summary cards (compact, monochrome icon chip). */ body.tw-shell .page-content:not(:has(.dashboard-home > .dashboard-hero-row)) .dashboard-hstat, body.tw-shell .page-content .dashboard-home:not(.is-actual-dashboard) .dashboard-hstat { background: var(--pg-surface) !important; border: 1px solid var(--pg-border) !important; border-radius: 10px !important; box-shadow: none !important; transition: border-color .15s, transform .15s; } body.tw-shell .page-content .dashboard-hstat .card-body { display: flex; align-items: center; gap: 10px; padding: 12px 14px !important; } body.tw-shell .page-content .dashboard-hstat-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: var(--pg-elev) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text-2) !important; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.tw-shell .page-content .dashboard-hstat-icon iconify-icon, body.tw-shell .page-content .dashboard-hstat-icon .iconify { font-size: 16px !important; } body.tw-shell .page-content .dashboard-hstat-icon--success, body.tw-shell .page-content .dashboard-hstat-icon.dashboard-hstat-icon--success { color: var(--pg-success) !important; } body.tw-shell .page-content .dashboard-hstat-icon--danger { color: var(--pg-danger) !important; } body.tw-shell .page-content .dashboard-hstat-icon--warning { color: var(--pg-warning) !important; } body.tw-shell .page-content .dashboard-hstat-icon--info { color: var(--pg-info) !important; } body.tw-shell .page-content .dashboard-hstat-icon--primary { color: var(--pg-accent) !important; } body.tw-shell .page-content .dashboard-hstat-label { font-size: 10px !important; font-weight: 600 !important; color: var(--pg-text-4) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 !important; } body.tw-shell .page-content .dashboard-hstat-value { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: var(--pg-text) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin: 0 !important; font-variant-numeric: tabular-nums; } body.tw-shell .page-content .dashboard-hstat-badge { font-size: 10px !important; font-weight: 600 !important; padding: 2px 7px !important; border-radius: 999px !important; background: var(--pg-elev) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text-2) !important; white-space: nowrap; } body.tw-shell .page-content .dashboard-hstat-badge--success { background: rgba(78,203,126,.14) !important; color: #6fe3a0 !important; border-color: transparent !important; } body.tw-shell .page-content .dashboard-hstat-badge--danger { background: rgba(229,77,46,.14) !important; color: #f37a5d !important; border-color: transparent !important; } body.tw-shell .page-content .dashboard-hstat-badge--warning { background: rgba(245,165,36,.14) !important; color: #f7c163 !important; border-color: transparent !important; } body.tw-shell .page-content .dashboard-hstat-badge--info { background: rgba(56,189,248,.14) !important; color: #7cd2f7 !important; border-color: transparent !important; } /* ── Dashboard-welcome banner used by list pages — compact restyle ─────── */ body.tw-shell .page-content .dashboard-welcome { margin: 4px 4px 14px !important; padding: 0 !important; background: transparent !important; } body.tw-shell .page-content .dashboard-welcome-title { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; font-size: clamp(20px, 1.8vw, 24px) !important; font-weight: 700 !important; color: var(--pg-text) !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; margin: 0 0 4px !important; background: none !important; -webkit-text-fill-color: initial !important; } body.tw-shell .page-content .dashboard-welcome-meta { font-size: 12.5px !important; color: var(--pg-text-3) !important; margin: 0 !important; line-height: 1.4 !important; } /* ── Panel cards used for filters/wrappers (dashboard-panel-card) ──────── */ body.tw-shell .page-content .dashboard-panel-card { background: var(--pg-surface) !important; border: 1px solid var(--pg-border) !important; border-radius: 10px !important; box-shadow: none !important; } body.tw-shell .page-content .dashboard-panel-card .card-header { border-bottom: 1px solid var(--pg-border) !important; padding: 10px 14px !important; background: transparent !important; } body.tw-shell .page-content .dashboard-panel-card .card-header h5, body.tw-shell .page-content .dashboard-panel-card .card-title { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--pg-text) !important; margin: 0 !important; } body.tw-shell .page-content .dashboard-chart-hero-icon { width: 28px !important; height: 28px !important; background: var(--pg-elev) !important; border: 1px solid var(--pg-border) !important; border-radius: 7px !important; display: inline-flex; align-items: center; justify-content: center; } body.tw-shell .page-content .dashboard-chart-hero-icon iconify-icon { font-size: 14px !important; color: var(--pg-accent) !important; } /* ── Table cards (dashboard-table-card) ────────────────────────────────── */ body.tw-shell .page-content .dashboard-table-card { background: var(--pg-surface) !important; border: 1px solid var(--pg-border) !important; border-radius: 10px !important; box-shadow: none !important; } body.tw-shell .page-content .dashboard-table-card .card-header { border-bottom: 1px solid var(--pg-border) !important; padding: 10px 14px !important; background: transparent !important; } body.tw-shell .page-content .dashboard-table-card .card-title { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: var(--pg-text) !important; margin: 0 !important; } body.tw-shell .page-content .dashboard-table-card-icon { width: 28px !important; height: 28px !important; background: var(--pg-elev) !important; border: 1px solid var(--pg-border) !important; border-radius: 7px !important; display: inline-flex; align-items: center; justify-content: center; } body.tw-shell .page-content .dashboard-table-card-icon iconify-icon { font-size: 14px !important; color: var(--pg-accent) !important; } /* Tighten the gap between the icon-title block and the count. */ body.tw-shell .page-content .card .card-body .mb-3 { margin-bottom: 8px !important; } /* Override fs-32 → smaller for icon in avatar-md */ body.tw-shell .page-content .card .card-body iconify-icon.fs-32, body.tw-shell .page-content .card .card-body .fs-32 { font-size: 14px !important; } /* Removes ".border-primary"/"border-success" etc. on summary cards — replaced below by a Linear-style segmented accent on active state. */ body.tw-shell .page-content .card.border-primary, body.tw-shell .page-content .card.border-success, body.tw-shell .page-content .card.border-warning, body.tw-shell .page-content .card.border-info, body.tw-shell .page-content .card.border-danger { border-color: var(--pg-border) !important; } body.tw-shell .page-content .card.border-2 { border-color: var(--pg-accent) !important; box-shadow: 0 0 0 1px var(--pg-accent) inset, 0 8px 24px -10px rgba(59, 130, 246,.35) !important; } /* ── Tables ───────────────────────────────────────────────────────────── */ /* The .table-responsive wrapper MUST allow horizontal scroll so wide tables (11+ columns) don't get clipped at narrower viewports. */ body.tw-shell .page-content .table-responsive { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; max-width: 100%; } body.tw-shell .page-content .table-responsive::-webkit-scrollbar { height: 8px; } body.tw-shell .page-content .table-responsive::-webkit-scrollbar-track { background: transparent; } body.tw-shell .page-content .table-responsive::-webkit-scrollbar-thumb { background: var(--pg-elev); border-radius: 4px; } body.tw-shell .page-content .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--pg-border-2); } body.tw-shell .page-content .table, body.tw-shell .page-content .table > :not(caption) > * > * { --bs-table-bg: transparent !important; --bs-table-color: inherit !important; --bs-table-striped-bg: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-accent-bg: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--pg-text) !important; } body.tw-shell .page-content .table { border-collapse: separate; border-spacing: 0; margin: 0 !important; font-size: 11px; } body.tw-shell .page-content .table thead, body.tw-shell .page-content .table thead tr { background: transparent !important; } body.tw-shell .page-content .table thead th { background: transparent !important; color: var(--pg-text-4) !important; font-weight: 500 !important; font-size: 11px !important; /* matches body row size */ text-transform: uppercase; letter-spacing: 0.04em; /* tighter — no wrap on short headers */ border: 0 !important; border-bottom: 1px solid var(--pg-border) !important; padding: 8px 10px !important; white-space: nowrap !important; /* forced — keep on one line */ text-align: left; vertical-align: middle; } body.tw-shell .page-content .table tbody td { background: transparent !important; color: var(--pg-text-2) !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; padding: 8px 10px !important; vertical-align: middle; font-size: 11px; /* matches column header size */ line-height: 1.4; } body.tw-shell .page-content .table tbody tr { transition: background-color .12s ease; } body.tw-shell .page-content .table tbody tr:hover td { background-color: rgba(255, 255, 255, 0.025) !important; color: var(--pg-text) !important; } body.tw-shell .page-content .table tbody tr:last-child td { border-bottom: 0 !important; } body.tw-shell .page-content .table a.text-body, body.tw-shell .page-content .table .text-body { color: var(--pg-text) !important; } body.tw-shell .page-content .table a { color: var(--pg-accent-2) !important; text-decoration: none; } body.tw-shell .page-content .table a.text-body:hover, body.tw-shell .page-content .table a:hover { color: var(--pg-accent-2) !important; } body.tw-shell .page-content .table h6, body.tw-shell .page-content .table strong { color: var(--pg-text) !important; } /* ── Form controls — input / select / textarea ───────────────────────── */ body.tw-shell .page-content .form-control, body.tw-shell .page-content .form-select, body.tw-shell .page-content textarea.form-control, body.tw-shell .page-content .input-group .form-control { background: var(--pg-surface-2) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text) !important; font-size: 13px; border-radius: 6px; } body.tw-shell .page-content .form-control::placeholder { color: var(--pg-text-4) !important; } body.tw-shell .page-content .form-control:focus, body.tw-shell .page-content .form-select:focus { background: var(--pg-surface-2) !important; border-color: var(--pg-accent) !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important; color: var(--pg-text) !important; } body.tw-shell .page-content .form-select { background-image: linear-gradient(45deg, transparent 50%, var(--pg-text-3) 50%), linear-gradient(135deg, var(--pg-text-3) 50%, transparent 50%) !important; background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; padding-right: 32px; } body.tw-shell .page-content .form-label { color: var(--pg-text-2) !important; font-size: 12px; font-weight: 500; } /* Search box — input with an absolutely-positioned magnifier glyph on the left. */ body.tw-shell .page-content .search-box { position: relative !important; display: block; } body.tw-shell .page-content .search-box .form-control { padding-left: 32px !important; height: 32px; font-size: 11px; } body.tw-shell .page-content .search-box .search-icon { position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--pg-text-3) !important; font-size: 13px !important; pointer-events: none; z-index: 2; margin: 0 !important; } /* Filter row controls — equal 32 px height across inputs, selects and buttons. */ body.tw-shell .page-content .form-control, body.tw-shell .page-content .form-select { height: 32px; padding: 0 10px; line-height: 1.4; font-size: 11px; } body.tw-shell .page-content textarea.form-control { height: auto; padding: 7px 10px; font-size: 11px; } body.tw-shell .page-content .row.g-3.mb-3 .btn, body.tw-shell .page-content .row.g-3 > [class*="col-"] > .btn { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; } body.tw-shell .page-content .form-check-input { background-color: var(--pg-surface-2) !important; border-color: var(--pg-border-2) !important; } body.tw-shell .page-content .form-check-input:checked { background-color: var(--pg-accent) !important; border-color: var(--pg-accent) !important; } /* ── Buttons — compact 11 px, consistent with table & filter sizing. ───── */ html body.tw-shell .page-content .btn, html body.tw-shell .page-content a.btn, html body.tw-shell .page-content button.btn { font-size: 11px !important; font-weight: 600 !important; border-radius: 6px !important; padding: 6px 12px !important; line-height: 1.4 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; height: auto !important; } html body.tw-shell .page-content .btn-sm { font-size: 11px !important; padding: 5px 10px !important; } html body.tw-shell .page-content .btn iconify-icon, html body.tw-shell .page-content .btn i.bx, html body.tw-shell .page-content .btn i { font-size: 13px !important; } /* Card-header action buttons (PDF / Print / Más opciones / Import / Add) */ html body.tw-shell .page-content .card-header .btn, html body.tw-shell .page-content .card-header a.btn, html body.tw-shell .page-content .card-header button.btn, html body.tw-shell .page-content .card-header .dropdown-toggle { height: 30px !important; padding: 0 12px !important; font-size: 11px !important; border-radius: 6px !important; } html body.tw-shell .page-content .card-header .btn iconify-icon, html body.tw-shell .page-content .card-header .btn i { font-size: 13px !important; } body.tw-shell .page-content .btn-primary { background: var(--pg-accent) !important; border-color: var(--pg-accent) !important; color: #fff !important; box-shadow: none !important; } body.tw-shell .page-content .btn-primary:hover { background: var(--pg-accent-2) !important; border-color: var(--pg-accent-2) !important; } body.tw-shell .page-content .btn-secondary { background: var(--pg-surface-2) !important; border-color: var(--pg-border-2) !important; color: var(--pg-text) !important; } body.tw-shell .page-content .btn-secondary:hover { background: var(--pg-elev) !important; border-color: #4a4a52 !important; color: #fff !important; } body.tw-shell .page-content .btn-light, body.tw-shell .page-content .btn-soft-secondary { background: var(--pg-surface-2) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text-2) !important; } body.tw-shell .page-content .btn-light:hover, body.tw-shell .page-content .btn-soft-secondary:hover { background: var(--pg-elev) !important; color: var(--pg-text) !important; } body.tw-shell .page-content .btn-soft-primary { background: rgba(59, 130, 246, 0.12) !important; color: var(--pg-accent-2) !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; } body.tw-shell .page-content .btn-soft-primary:hover { background: rgba(59, 130, 246, 0.22) !important; color: #fff !important; } body.tw-shell .page-content .btn-soft-success { background: rgba(78, 203, 126, 0.12) !important; color: #6fe3a0 !important; border: 1px solid rgba(78, 203, 126, 0.25) !important; } body.tw-shell .page-content .btn-soft-warning { background: rgba(245, 165, 36, 0.12) !important; color: #f7c163 !important; border: 1px solid rgba(245, 165, 36, 0.25) !important; } body.tw-shell .page-content .btn-soft-info { background: rgba(56, 189, 248, 0.12) !important; color: #7cd2f7 !important; border: 1px solid rgba(56, 189, 248, 0.25) !important; } body.tw-shell .page-content .btn-soft-danger { background: rgba(229, 77, 46, 0.12) !important; color: #f37a5d !important; border: 1px solid rgba(229, 77, 46, 0.25) !important; } body.tw-shell .page-content .btn-outline-primary { color: var(--pg-text) !important; border-color: var(--pg-border-2) !important; background: transparent !important; } body.tw-shell .page-content .btn-outline-primary:hover { background: var(--pg-elev) !important; color: #fff !important; } body.tw-shell .page-content .btn-outline-secondary { color: var(--pg-text-2) !important; border-color: var(--pg-border) !important; background: transparent !important; } body.tw-shell .page-content .btn-outline-secondary:hover { background: var(--pg-elev) !important; color: var(--pg-text) !important; border-color: var(--pg-border-2) !important; } /* ── Badges (flat soft pills, no border) ─────────────────────────────── */ body.tw-shell .page-content .badge { font-size: 10.5px !important; font-weight: 600 !important; padding: 3px 8px !important; border-radius: 999px !important; border: 0 !important; text-transform: none; letter-spacing: 0; line-height: 1.4; } body.tw-shell .page-content .bg-success-subtle, body.tw-shell .page-content .badge.bg-success-subtle { background: rgba(78,203,126,.14) !important; color: #6fe3a0 !important; } body.tw-shell .page-content .bg-warning-subtle, body.tw-shell .page-content .badge.bg-warning-subtle { background: rgba(245,165,36,.14) !important; color: #f7c163 !important; } body.tw-shell .page-content .bg-info-subtle, body.tw-shell .page-content .badge.bg-info-subtle { background: rgba(56,189,248,.14) !important; color: #7cd2f7 !important; } body.tw-shell .page-content .bg-danger-subtle, body.tw-shell .page-content .badge.bg-danger-subtle { background: rgba(229,77,46,.14) !important; color: #f37a5d !important; } body.tw-shell .page-content .bg-primary-subtle, body.tw-shell .page-content .badge.bg-primary-subtle { background: rgba(59, 130, 246,.14) !important; color: #b3b8f1 !important; } body.tw-shell .page-content .bg-secondary-subtle, body.tw-shell .page-content .badge.bg-secondary-subtle { background: rgba(255,255,255,.06) !important; color: var(--pg-text-2) !important; } body.tw-shell .page-content .bg-light-subtle, body.tw-shell .page-content .badge.bg-light-subtle { background: rgba(255,255,255,.06) !important; color: var(--pg-text-2) !important; } body.tw-shell .page-content .text-success { color: #6fe3a0 !important; } body.tw-shell .page-content .text-warning { color: #f7c163 !important; } body.tw-shell .page-content .text-info { color: #7cd2f7 !important; } body.tw-shell .page-content .text-danger { color: #f37a5d !important; } body.tw-shell .page-content .text-primary { color: var(--pg-accent-2) !important; } body.tw-shell .page-content .text-muted, body.tw-shell .page-content .text-body-secondary { color: var(--pg-text-3) !important; } body.tw-shell .page-content .text-dark, body.tw-shell .page-content .text-body { color: var(--pg-text) !important; } /* Soft icon backgrounds (avatar-md helpers used widely on lists) */ body.tw-shell .page-content .bg-primary.bg-opacity-10 { background: rgba(59, 130, 246,.14) !important; } body.tw-shell .page-content .bg-success.bg-opacity-10 { background: rgba(78,203,126,.14) !important; } body.tw-shell .page-content .bg-warning.bg-opacity-10 { background: rgba(245,165,36,.14) !important; } body.tw-shell .page-content .bg-info.bg-opacity-10 { background: rgba(56,189,248,.14) !important; } body.tw-shell .page-content .bg-danger.bg-opacity-10 { background: rgba(229,77,46,.14) !important; } body.tw-shell .page-content .avatar-md, body.tw-shell .page-content .avatar-sm { border-radius: 10px !important; } /* Tighter avatar inside table rows so rows aren't forced tall. */ body.tw-shell .page-content .table .avatar-sm, body.tw-shell .page-content .table img.avatar-sm, body.tw-shell .page-content .table img.rounded-circle { width: 26px !important; height: 26px !important; } /* Table inner block titles (e.g. h6 inside cells) — match row text. */ html body.tw-shell .page-content .table h6, html body.tw-shell .page-content .table h5, html body.tw-shell .page-content .table h4 { font-size: 11px !important; font-weight: 600 !important; margin: 0 !important; line-height: 1.3 !important; color: var(--pg-text) !important; } html body.tw-shell .page-content .table h6 + p, html body.tw-shell .page-content .table p.fs-13, html body.tw-shell .page-content .table .fs-13, html body.tw-shell .page-content .table small { font-size: 10px !important; margin: 1px 0 0 !important; line-height: 1.3 !important; color: var(--pg-text-3) !important; } /* Force long single-token values (phones, codes) NOT to wrap. */ html body.tw-shell .page-content .table tbody td span, html body.tw-shell .page-content .table tbody td a.text-body { white-space: nowrap; } /* Allow customer name / email block to wrap but stay tight. */ html body.tw-shell .page-content .table tbody td .d-flex { white-space: normal; } /* Payment terms column — force exactly 2 lines with ellipsis. */ html body.tw-shell .page-content .table tbody td .d-flex.flex-wrap .badge { white-space: normal !important; width: 160px !important; max-width: 160px !important; text-align: left; line-height: 1.3 !important; padding: 4px 8px !important; font-size: 10px !important; /* Hard cap at 2 lines with ellipsis. */ display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } html body.tw-shell .page-content .table tbody td .d-flex.flex-wrap { width: 170px; max-width: 170px; } /* Row action buttons (.btn-sm in tables) — keep tight. */ body.tw-shell .page-content .table .btn, body.tw-shell .page-content .table .btn-sm { height: 24px; width: 24px; padding: 0 !important; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; } body.tw-shell .page-content .table .btn iconify-icon, body.tw-shell .page-content .table .btn i { font-size: 13px !important; } /* ── Dropdowns ───────────────────────────────────────────────────────── */ body.tw-shell .page-content .dropdown-menu, body.tw-shell .dropdown-menu { background: var(--pg-surface-2) !important; border: 1px solid var(--pg-border-2) !important; border-radius: 8px !important; box-shadow: 0 12px 32px -10px rgba(0,0,0,0.6) !important; padding: 4px !important; } body.tw-shell .dropdown-item { color: var(--pg-text-2) !important; font-size: 12.5px; padding: 7px 10px !important; border-radius: 6px; } body.tw-shell .dropdown-item:hover, body.tw-shell .dropdown-item:focus { background: rgba(59, 130, 246, 0.12) !important; color: #fff !important; } body.tw-shell .dropdown-item.active { background: var(--pg-accent) !important; color: #fff !important; } body.tw-shell .dropdown-divider { border-color: var(--pg-border) !important; } /* ── Alerts ──────────────────────────────────────────────────────────── */ body.tw-shell .page-content .alert { background: var(--pg-surface-2) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text) !important; border-radius: 10px !important; } body.tw-shell .page-content .alert-success { border-color: rgba(78,203,126,.35) !important; background: rgba(78,203,126,.06) !important; color: #6fe3a0 !important; } body.tw-shell .page-content .alert-warning { border-color: rgba(245,165,36,.35) !important; background: rgba(245,165,36,.06) !important; color: #f7c163 !important; } body.tw-shell .page-content .alert-danger { border-color: rgba(229,77,46,.35) !important; background: rgba(229,77,46,.06) !important; color: #f37a5d !important; } body.tw-shell .page-content .alert-info { border-color: rgba(56,189,248,.35) !important; background: rgba(56,189,248,.06) !important; color: #7cd2f7 !important; } body.tw-shell .page-content .btn-close { filter: invert(.9); } /* ── Page-content canvas — paint dark like the dashboard. ─────────────── */ body.tw-shell .page-content { color: var(--pg-text); } /* ── Modals ──────────────────────────────────────────────────────────── */ body.tw-shell .modal-content { background: var(--pg-surface) !important; border: 1px solid var(--pg-border) !important; border-radius: 12px !important; color: var(--pg-text) !important; } body.tw-shell .modal-header, body.tw-shell .modal-footer { border-color: var(--pg-border) !important; } body.tw-shell .modal-title { color: var(--pg-text) !important; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; } /* ── Pagination ──────────────────────────────────────────────────────── */ body.tw-shell .pagination .page-link { background: var(--pg-surface) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text-2) !important; font-size: 12.5px; } body.tw-shell .pagination .page-link:hover { background: var(--pg-surface-2) !important; color: var(--pg-text) !important; } body.tw-shell .pagination .page-item.active .page-link { background: var(--pg-accent) !important; border-color: var(--pg-accent) !important; color: #fff !important; } /* ── Tabs / nav-pills ─────────────────────────────────────────────────── */ body.tw-shell .nav-tabs { border-bottom: 1px solid var(--pg-border) !important; margin-bottom: 16px; gap: 4px; flex-wrap: wrap; } body.tw-shell .nav-tabs .nav-link, body.tw-shell .nav-tabs .nav-item .nav-link { color: var(--pg-text-3) !important; border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; border-radius: 0 !important; font-weight: 500 !important; font-size: 12.5px !important; padding: 8px 12px !important; display: inline-flex; align-items: center; gap: 6px; transition: color .12s, border-color .12s, background-color .12s; } body.tw-shell .nav-tabs .nav-link iconify-icon, body.tw-shell .nav-tabs .nav-link i { font-size: 14px !important; } body.tw-shell .nav-tabs .nav-link:hover { color: var(--pg-text) !important; background: rgba(255, 255, 255, 0.025) !important; } body.tw-shell .nav-tabs .nav-link.active, body.tw-shell .nav-tabs .nav-item .nav-link.active { color: var(--pg-text) !important; background: transparent !important; border-bottom-color: var(--pg-accent) !important; font-weight: 600 !important; } body.tw-shell .nav-pills .nav-link { color: var(--pg-text-2) !important; background: transparent !important; border-radius: 6px !important; font-weight: 500 !important; font-size: 12.5px !important; padding: 6px 12px !important; } body.tw-shell .nav-pills .nav-link:hover { background: rgba(255,255,255,0.04) !important; color: var(--pg-text) !important; } body.tw-shell .nav-pills .nav-link.active { background: var(--pg-accent) !important; color: #fff !important; } body.tw-shell .tab-content { color: var(--pg-text); } /* ── File inputs (Choose file picker) ─────────────────────────────────── */ body.tw-shell .page-content input[type="file"], body.tw-shell input[type="file"].form-control { color: var(--pg-text) !important; cursor: pointer; } body.tw-shell .page-content input[type="file"]::file-selector-button, body.tw-shell input[type="file"]::file-selector-button { background: var(--pg-elev) !important; color: var(--pg-text) !important; border: 0 !important; border-right: 1px solid var(--pg-border) !important; padding: 0 14px !important; height: 100%; margin-right: 10px; cursor: pointer; font-size: 11.5px; font-weight: 600; transition: background-color .12s; } body.tw-shell .page-content input[type="file"]::file-selector-button:hover, body.tw-shell input[type="file"]::file-selector-button:hover { background: rgba(59, 130, 246, 0.18) !important; color: #b3b8f1 !important; } body.tw-shell input[type="file"]::-webkit-file-upload-button { background: var(--pg-elev) !important; color: var(--pg-text) !important; border: 0 !important; border-right: 1px solid var(--pg-border) !important; padding: 0 14px !important; margin-right: 10px; cursor: pointer; font-size: 11.5px; font-weight: 600; } /* ── Date / time / number / color inputs (native pickers) ────────────── */ body.tw-shell .page-content input[type="date"], body.tw-shell .page-content input[type="time"], body.tw-shell .page-content input[type="datetime-local"], body.tw-shell .page-content input[type="month"], body.tw-shell .page-content input[type="week"], body.tw-shell .page-content input[type="number"] { color-scheme: dark; } body.tw-shell .page-content input[type="date"]::-webkit-calendar-picker-indicator, body.tw-shell .page-content input[type="time"]::-webkit-calendar-picker-indicator, body.tw-shell .page-content input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; opacity: 0.6; transition: opacity .12s; } body.tw-shell .page-content input[type="date"]:hover::-webkit-calendar-picker-indicator, body.tw-shell .page-content input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } /* ── DataTables length / search controls ──────────────────────────────── */ body.tw-shell .page-content .dataTables_wrapper { color: var(--pg-text); font-size: 12px; } body.tw-shell .page-content .dataTables_length, body.tw-shell .page-content .dataTables_filter, body.tw-shell .page-content .dataTables_info, body.tw-shell .page-content .dataTables_paginate { color: var(--pg-text-3) !important; font-size: 12px; margin: 8px 0; } body.tw-shell .page-content .dataTables_length select, body.tw-shell .page-content .dataTables_filter input { background: var(--pg-surface-2) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text) !important; border-radius: 6px; padding: 4px 8px !important; height: 28px; font-size: 12px; } body.tw-shell .page-content .dataTables_filter input:focus, body.tw-shell .page-content .dataTables_length select:focus { border-color: var(--pg-accent) !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important; outline: none !important; } body.tw-shell .page-content .dataTables_paginate .paginate_button { color: var(--pg-text-2) !important; background: transparent !important; border: 1px solid var(--pg-border) !important; border-radius: 6px !important; margin: 0 2px !important; padding: 4px 10px !important; font-size: 11.5px; } body.tw-shell .page-content .dataTables_paginate .paginate_button:hover { background: var(--pg-surface-2) !important; border-color: var(--pg-border-2) !important; color: var(--pg-text) !important; } body.tw-shell .page-content .dataTables_paginate .paginate_button.current, body.tw-shell .page-content .dataTables_paginate .paginate_button.current:hover { background: var(--pg-accent) !important; border-color: var(--pg-accent) !important; color: #ffffff !important; } body.tw-shell .page-content .dataTables_paginate .paginate_button.disabled, body.tw-shell .page-content .dataTables_paginate .paginate_button.disabled:hover { color: var(--pg-text-4) !important; background: transparent !important; border-color: var(--pg-border) !important; cursor: not-allowed; } /* ── Sortable table headers (DataTables sort icons) ──────────────────── */ body.tw-shell .page-content table.dataTable thead .sorting, body.tw-shell .page-content table.dataTable thead .sorting_asc, body.tw-shell .page-content table.dataTable thead .sorting_desc { cursor: pointer; background-image: none !important; } body.tw-shell .page-content table.dataTable thead .sorting::after, body.tw-shell .page-content table.dataTable thead .sorting_asc::after, body.tw-shell .page-content table.dataTable thead .sorting_desc::after { color: var(--pg-text-4); font-size: 9px; margin-left: 4px; } /* ── Offcanvas (right-side drawer used for Theme settings + Activity) ─ */ body.tw-shell .offcanvas { background: var(--pg-surface) !important; color: var(--pg-text) !important; border-color: var(--pg-border) !important; } body.tw-shell .offcanvas-header { background: var(--pg-surface-2) !important; border-bottom: 1px solid var(--pg-border) !important; padding: 14px 18px !important; } body.tw-shell .offcanvas-header .offcanvas-title { color: var(--pg-text) !important; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; font-size: 14px !important; font-weight: 600 !important; } body.tw-shell .offcanvas-body { background: var(--pg-surface) !important; color: var(--pg-text) !important; padding: 16px 18px !important; } body.tw-shell .offcanvas .btn-close { filter: invert(0.9); opacity: 0.7; } body.tw-shell .offcanvas .btn-close:hover { opacity: 1; } /* ── Toasts ──────────────────────────────────────────────────────────── */ body.tw-shell .toast { background: var(--pg-surface) !important; color: var(--pg-text) !important; border: 1px solid var(--pg-border-2) !important; border-radius: 10px !important; box-shadow: 0 12px 32px -10px rgba(0,0,0,0.6) !important; } body.tw-shell .toast-header { background: var(--pg-surface-2) !important; border-bottom: 1px solid var(--pg-border) !important; color: var(--pg-text) !important; } /* ── Misc small fixes for legacy markup ────────────────────────────── */ body.tw-shell .page-content .border, body.tw-shell .page-content .border-top, body.tw-shell .page-content .border-bottom, body.tw-shell .page-content .border-start, body.tw-shell .page-content .border-end { border-color: var(--pg-border) !important; } body.tw-shell .page-content code, body.tw-shell .page-content kbd { background: var(--pg-elev) !important; border: 1px solid var(--pg-border) !important; color: var(--pg-text) !important; border-radius: 4px; padding: 1px 6px; font-size: 11px; } body.tw-shell .page-content pre { background: #08090a !important; color: var(--pg-text-2) !important; border: 1px solid var(--pg-border) !important; border-radius: 8px; padding: 10px 12px !important; font-size: 12px; } body.tw-shell .page-content blockquote { border-left: 3px solid var(--pg-accent) !important; background: var(--pg-surface-2) !important; color: var(--pg-text-2) !important; padding: 8px 14px !important; border-radius: 0 6px 6px 0; } body.tw-shell .page-content hr { border-color: var(--pg-border) !important; opacity: 1; } body.tw-shell .page-content .list-group { background: transparent !important; border-radius: 8px !important; border: 1px solid var(--pg-border) !important; overflow: hidden; } body.tw-shell .page-content .list-group-item { background: var(--pg-surface) !important; color: var(--pg-text) !important; border-color: var(--pg-border) !important; font-size: 12.5px; } body.tw-shell .page-content .list-group-item.active { background: rgba(59, 130, 246, 0.14) !important; border-color: rgba(59, 130, 246, 0.30) !important; color: #fff !important; } body.tw-shell .page-content .list-group-item-action:hover { background: var(--pg-surface-2) !important; } /* ── Avatar fallback badges ──────────────────────────────────────────── */ body.tw-shell .page-content .avatar-title { background: var(--pg-elev) !important; color: var(--pg-text-2) !important; } body.tw-shell .page-content .bg-primary-subtle .avatar-title, body.tw-shell .page-content .avatar-sm .text-primary { color: var(--pg-accent-2) !important; } /* ── Switch (form-switch) ────────────────────────────────────────────── */ body.tw-shell .page-content .form-switch .form-check-input { width: 32px; height: 18px; background-color: var(--pg-elev) !important; border-color: var(--pg-border-2) !important; } body.tw-shell .page-content .form-switch .form-check-input:checked { background-color: var(--pg-accent) !important; border-color: var(--pg-accent) !important; } /* ── Spinner / loading ───────────────────────────────────────────────── */ body.tw-shell .spinner-border { color: var(--pg-accent); } body.tw-shell .spinner-grow { color: var(--pg-accent); } /* ============================================================================ */ /* FINANZAS · CEO PANELS (PanelEjecutivo, Alertas, Recuperación, etc.) */ /* These pages define their own inline