/* Admin/Master Liquid Glass — overrides Metronic CHROME only (header + aside + menu). Scoped to body.lg-admin. Depends on liquid-glass-kit.css tokens (--lg-*). Targets BOTH Metronic conventions: • primary #kt_header.header + #kt_aside.aside (sidebar-layout, most pages) • secondary .app-header + .app-sidebar (admin_sidebar-layout, _admin pages) Content / cards / tables keep their existing solid surfaces — glass is chrome only. */ /* ── Soft Apple background: a gentle iOS-style gradient wash + the SAME maritime hero as the login, but heavily blurred so the vessel dissolves into soft waves + tone (never a clear photo behind the app). The gradient below is the calm ground; the ::before below adds the softened vessel/waves. Content cards / tables / map keep their own solid surface on top (glass is chrome, not content). */ body.lg-admin{ background: radial-gradient(70% 60% at 88% -8%, rgba(10,132,255,.10), transparent 60%), radial-gradient(60% 55% at 4% 108%, rgba(90,200,255,.10), transparent 60%), radial-gradient(90% 90% at 50% 50%, rgba(230,238,250,.6), transparent 70%), #eef2f8 !important; } [data-bs-theme="dark"] body.lg-admin{ background: radial-gradient(70% 60% at 88% -8%, rgba(70,74,86,.12), transparent 60%), radial-gradient(60% 55% at 4% 108%, rgba(52,56,66,.10), transparent 60%), linear-gradient(160deg,#0a0a0c 0%,#070708 55%,#050506 100%) !important; } /* Softened maritime hero — same webp as login, blurred well past recognition so only the wave motion + colour survive; sits ABOVE the gradient ground, BELOW all content. Light = airy sea; dark = near-black water. Opacity keeps the gradient reading through. */ body.lg-admin::before{content:'';position:fixed;inset:-40px;z-index:-1;pointer-events:none; background:url('../img/auth-hero-light.webp') center/cover no-repeat; filter:blur(52px) saturate(1.14) brightness(1.03);opacity:.45;transform:scale(1.1);} [data-bs-theme="dark"] body.lg-admin::before{ background:url('../img/auth-hero-dark.webp') center/cover no-repeat; filter:blur(58px) saturate(1.06) brightness(.95);opacity:.55;} @media(prefers-reduced-transparency:reduce){ body.lg-admin::before{display:none!important;} } /* ── PLATFORM (authenticated app only) background: crisp, full-bleed, NO blur. Scoped to .lg-platform (added on the admin shells) so the front office + auth keep their own soft backdrop above. Content cards / tables stay solid on top. */ body.lg-platform{ background:#eef2f8!important; } [data-bs-theme="dark"] body.lg-platform{ background:#050506!important; } /* The ::before is the full-viewport background LAYER (sizing + positioning only). The actual image is chosen per by the generated rules in partials/_lg-backgrounds.blade.php (single source = config/backgrounds.php). */ body.lg-platform::before{ inset:0!important; opacity:1!important; transform:none!important; filter:none!important; background-position:center!important; background-size:cover!important; background-repeat:no-repeat!important; } /* ── ONE unified admin glass for ALL chrome so the header capsule, the sidebar menu, AND every dropdown share the exact same color + material. Two tiers: --ag-glass = translucent (header + sidebar) --ag-glass-solid = the SAME hue, more opaque (dropdowns sit over busy content — the map, tables — and need legibility) Theme + Clear/Tinted aware, so all three surfaces move together. ──────────── */ .lg-admin{ --ag-glass:rgba(255,255,255,.60); --ag-glass-solid:rgba(255,255,255,.95); --ag-glass-bd:rgba(255,255,255,.60); } [data-glass="clear"] .lg-admin{ --ag-glass:rgba(255,255,255,.14); --ag-glass-solid:rgba(255,255,255,.84); --ag-glass-bd:rgba(255,255,255,.82); } [data-glass="tinted"] .lg-admin{ --ag-glass:rgba(255,255,255,.74); --ag-glass-solid:rgba(255,255,255,.96); --ag-glass-bd:rgba(255,255,255,.6); } /* DARK = Apple near-black neutral glass (not saturated navy) — darker + premium. */ [data-bs-theme="dark"] .lg-admin{ --ag-glass:rgba(22,23,27,.66); --ag-glass-solid:rgba(17,18,21,.96); --ag-glass-bd:rgba(255,255,255,.12); } [data-bs-theme="dark"][data-glass="clear"] .lg-admin{ --ag-glass:rgba(22,23,27,.24); --ag-glass-solid:rgba(17,18,21,.88); --ag-glass-bd:rgba(255,255,255,.17); } [data-bs-theme="dark"][data-glass="tinted"] .lg-admin{ --ag-glass:rgba(22,23,27,.8); --ag-glass-solid:rgba(17,18,21,.97); --ag-glass-bd:rgba(255,255,255,.12); } /* ── Header → the SAME floating rounded glass CAPSULE as the login/auth header (_auth.blade.php → header.hdr-glass): fully pill-shaped (999px), thick frosted body, bright glossy top rim, soft floating shadow, bottom blue glow, and Clear/Tinted × light/dark translucency — values copied verbatim from login. */ .lg-admin #kt_header.header, .lg-admin #kt_app_header.app-header{ margin:1rem 1.6rem!important; border-radius:999px!important; border:1px solid var(--ag-glass-bd)!important; background:var(--ag-glass)!important; -webkit-backdrop-filter:blur(32px) saturate(195%)!important; backdrop-filter:blur(32px) saturate(195%)!important; box-shadow: 0 24px 50px -16px rgba(30,45,95,.34), 0 2px 6px rgba(30,45,95,.10), inset 0 2px 1px rgba(255,255,255,.92), inset 0 18px 26px -18px rgba(255,255,255,.55), inset 0 -14px 26px -14px rgba(120,135,190,.22)!important; z-index:200; transition:background .3s ease; } /* room so the logo / user chip don't touch the pill's rounded ends */ .lg-admin #kt_header.header > .container-fluid, .lg-admin #kt_app_header.app-header > .container-fluid{ padding-left:1.6rem!important; padding-right:1.6rem!important; } [data-bs-theme="dark"] .lg-admin #kt_header.header, [data-bs-theme="dark"] .lg-admin #kt_app_header.app-header{ box-shadow: 0 26px 54px -16px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3), inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 18px 26px -18px rgba(210,214,224,.16), inset 0 -14px 26px -14px rgba(0,0,0,.30)!important; } /* signature blue glow bleeding from the bottom-centre (login) */ .lg-admin #kt_header.header::after, .lg-admin #kt_app_header.app-header::after{content:'';position:absolute;left:50%;bottom:-3px;transform:translateX(-50%); width:42%;height:4px;pointer-events:none;border-radius:999px; background:radial-gradient(60% 100% at 50% 0%,rgba(20,120,255,.75),transparent 72%);filter:blur(3px);} /* Clear/Tinted translucency comes from --ag-glass (shared with the sidebar + dropdowns); Clear just gets extra blur so the background refracts through. */ [data-glass="clear"] .lg-admin #kt_header.header, [data-glass="clear"] .lg-admin #kt_app_header.app-header{ -webkit-backdrop-filter:blur(40px) saturate(200%)!important;backdrop-filter:blur(40px) saturate(200%)!important; } /* LIGHT mode: Metronic header content is built for a DARK bar (white text/icons/logo), which washes out on light glass. Force it to dark so light mode is clean & clear — Apple light glass = dark content on frosted white. (Dark mode keeps Metronic's white.) */ [data-bs-theme="light"] .lg-admin #kt_header, [data-bs-theme="light"] .lg-admin #kt_header .text-white, [data-bs-theme="light"] .lg-admin #kt_header .text-inverse-primary, [data-bs-theme="light"] .lg-admin #kt_header .btn, [data-bs-theme="light"] .lg-admin #kt_header .btn-color-white, [data-bs-theme="light"] .lg-admin #kt_header .menu-title, [data-bs-theme="light"] .lg-admin #kt_header .fw-bold, [data-bs-theme="light"] .lg-admin #kt_header i{ color:var(--lg-text)!important; } [data-bs-theme="light"] .lg-admin #kt_header .text-muted{ color:var(--lg-muted)!important; } /* header brand logo is a white PNG (no dark variant) → darken it for light glass */ [data-bs-theme="light"] .lg-admin #kt_header .app-sidebar-logo-default{ filter:brightness(0) opacity(.82); } /* dark-mode: keep header text/icons white (Metronic default) but ensure legibility */ [data-bs-theme="dark"] .lg-admin #kt_header .btn, [data-bs-theme="dark"] .lg-admin #kt_header .menu-title, [data-bs-theme="dark"] .lg-admin #kt_header .text-white{ color:#fff; } /* ── Header CONTROLS → real Liquid Glass (Fleet dropdown, notification bell, user chip). They were Metronic pills/icons; now they're capsule/circular glass that refract the Apple background and respond to Clear/Tinted (via --lg-input). ── */ /* Fleet dropdown → glass capsule */ .lg-admin #kt_header .btn-flex.bg-white.bg-opacity-10{ background:var(--lg-input)!important; border:1px solid var(--lg-border)!important; border-radius:999px!important; -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transition:background .2s, box-shadow .2s;} .lg-admin #kt_header .btn-flex.bg-white.bg-opacity-10:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -8px var(--lg-glow);} /* Notification bell → circular Liquid Glass icon button (Apple) */ .lg-admin #kt_header #kt_menu_item_wow{ width:40px!important; height:40px!important; border-radius:50%!important; overflow:visible!important; background:var(--lg-input)!important; border:1px solid var(--lg-border)!important; -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transition:background .2s, box-shadow .2s, transform .15s;} .lg-admin #kt_header #kt_menu_item_wow:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -8px var(--lg-glow); transform:translateY(-1px);} .lg-admin #kt_header #kt_menu_item_wow:active{ transform:scale(.95); } .lg-admin #kt_header #kt_menu_item_wow i{ color:var(--lg-text)!important; font-size:1.05rem!important; } [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_item_wow i{ color:#fff!important; } /* Clean Apple count badge pinned to the top-right corner. Metronic placed it translate-middle at top-CENTRE, so it overlapped/overflowed the bell icon. */ .lg-admin #kt_header #kt_menu_item_wow > span{ top:-3px!important; right:-3px!important; left:auto!important; bottom:auto!important; transform:none!important;} .lg-admin #kt_header #kt_menu_item_wow .badge-notification{ position:static!important; display:inline-flex!important; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:999px; font-size:9px; font-weight:700; line-height:1; color:#fff!important; background:#FF3B30!important; border:1.5px solid rgba(255,255,255,.9); box-shadow:0 1px 3px rgba(0,0,0,.35); z-index:3;} [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_item_wow .badge-notification{ background:#FF453A!important; border-color:rgba(22,34,64,.95);} /* User chip → borderless (no capsule ring around "SOFONNn"): just the name + avatar, like the clean login header. Only the avatar keeps its own circle. */ .lg-admin #kt_header .btn-flex.bg-hover-white{ background:transparent!important; border:0!important; box-shadow:none!important; -webkit-backdrop-filter:none; backdrop-filter:none; transition:opacity .2s;} .lg-admin #kt_header .btn-flex.bg-hover-white:hover{ background:transparent!important; box-shadow:none!important; opacity:.85;} /* ── Breathing room between the right-cluster controls (Apple spacing). The bell, Clear/Tinted, switch and user chip were cramped against each other. ── */ .lg-admin #kt_header .app-navbar-item{ margin-left:.7rem!important; } .lg-admin #kt_header #kt_header_user_menu_toggle{ margin-left:.7rem!important; } /* a touch more air inside the toggles cluster (seg ↔ switch) */ .lg-admin #kt_header #lgGlassSeg + .lg-switch, .lg-admin #kt_header .lg-switch{ margin-left:.15rem; } /* ── Header DROPDOWN panels (Fleet divisions, notifications, user menu) → the SAME frosted glass popover as the login header's .dropdown-menu. Lifted above the map's floating stats bar so the panel never reads as "behind" the content. ── */ .lg-admin #kt_header .menu-sub-dropdown, .lg-admin #kt_header .dropdown-menu{ z-index:1050!important; border-radius:18px!important; padding:8px!important; border:1px solid var(--ag-glass-bd)!important; background:var(--ag-glass-solid)!important; /* SAME hue as the header + sidebar, more opaque */ -webkit-backdrop-filter:blur(30px) saturate(195%); backdrop-filter:blur(30px) saturate(195%); box-shadow:0 18px 44px -12px rgba(20,40,90,.28), inset 0 1px 0 rgba(255,255,255,.6)!important;} [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown, [data-bs-theme="dark"] .lg-admin #kt_header .dropdown-menu{ box-shadow:0 22px 54px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12)!important;} /* clean, roomy list rows (the division list was cramped fs-8 text) */ .lg-admin #kt_header .menu-sub-dropdown .menu-link{ border-radius:12px!important; padding:.55rem .8rem!important; font-size:.8rem!important; color:var(--lg-text)!important; transition:background .16s, color .16s;} .lg-admin #kt_header .menu-sub-dropdown .menu-link .menu-title{ font-size:.82rem!important; } .lg-admin #kt_header .menu-sub-dropdown .menu-link:hover{ background:color-mix(in srgb, var(--lg-accent) 12%, transparent)!important; color:var(--lg-accent)!important;} .lg-admin #kt_header .menu-sub-dropdown .menu-link.active, .lg-admin #kt_header .menu-sub-dropdown .menu-link:active{ background:color-mix(in srgb, var(--lg-accent) 16%, transparent)!important; color:var(--lg-accent)!important;} [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .menu-link{ color:#e7ecf5!important; } .lg-admin #kt_header .menu-sub-dropdown .separator{ border-color:rgba(10,30,70,.1)!important; opacity:.7; } [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .separator{ border-color:rgba(255,255,255,.1)!important; } /* dropdown badges / counts stay legible on glass */ .lg-admin #kt_header .menu-sub-dropdown .badge.badge-light{ background:rgba(10,30,70,.06)!important; color:var(--lg-muted)!important; } [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .badge.badge-light{ background:rgba(255,255,255,.1)!important; color:#c7d0e0!important; } /* search input inside the Fleet dropdown → glass field */ .lg-admin #kt_header .menu-sub-dropdown .form-control{ border-radius:12px!important; border:1px solid var(--lg-border)!important; background:var(--lg-input)!important; color:var(--lg-text)!important;} /* Fleet division list: kill the cramped/oversized gaps, make each row a clean space-between line with the count badge pinned right (was drifting mid-panel). */ .lg-admin #kt_header .menu-sub-dropdown .menu-item{ margin:.1rem 0!important; } .lg-admin #kt_header .menu-sub-dropdown .menu-item .menu-link{ display:flex!important; align-items:center!important; justify-content:space-between!important; margin:0!important; gap:.5rem;} .lg-admin #kt_header .menu-sub-dropdown .menu-link .text-end{ margin-left:auto!important; } .lg-admin #kt_header .menu-sub-dropdown .separator{ margin:.45rem .2rem!important; } /* The display:flex!important above once swallowed the Fleet search's inline display:none (filtered rows stayed visible). Anything a script hides with the [hidden] attribute must win over every menu rule in this block. */ .lg-admin #kt_header .menu-sub-dropdown [hidden], .lg-admin #kt_header .dropdown-menu [hidden]{ display:none!important; } /* ── Apple polish across EVERY header dropdown so they share one glass language: no loud photo/gradient headers, glass badges, one iOS-blue accent. ── */ /* Notifications: drop the loud photo banner → a clean glass header on the material. (overflow:hidden ONLY here — the user menu has fly-out submenus that must not clip.) */ .lg-admin #kt_header #kt_menu_notifications{ overflow:hidden!important; } .lg-admin #kt_header #kt_menu_notifications .rounded-top{ background-image:none!important; background:transparent!important; border-bottom:1px solid rgba(10,30,70,.1)!important; margin:-8px -8px 4px!important;} [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_notifications .rounded-top{ border-bottom-color:rgba(255,255,255,.1)!important; } .lg-admin #kt_header #kt_menu_notifications .rounded-top h3{ color:var(--lg-text)!important; font-size:1rem!important; font-weight:600; } .lg-admin #kt_header #kt_menu_notifications .rounded-top i{ color:var(--lg-muted)!important; transition:color .15s; } .lg-admin #kt_header #kt_menu_notifications .rounded-top i:hover{ color:var(--lg-accent)!important; } [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_notifications .rounded-top h3{ color:#fff!important; } .lg-admin #kt_header #kt_menu_notifications .rounded-top .badge-danger{ background:#FF3B30!important; border-radius:999px; } .lg-admin #kt_header #kt_menu_notifications .flex-stack{ border-radius:12px; padding-left:.4rem!important; padding-right:.4rem!important; transition:background .15s; } .lg-admin #kt_header #kt_menu_notifications .flex-stack:hover{ background:color-mix(in srgb,var(--lg-accent) 8%, transparent); } /* Quick Actions (crew) + any dropdown toggle → iOS-blue when on. */ .lg-admin #kt_header .menu-sub-dropdown .form-check-input:checked{ background-color:var(--lg-accent)!important; border-color:var(--lg-accent)!important; } /* User menu: soften the loud success/role badge + the "Language English" chip to glass. */ .lg-admin #kt_header .menu-sub-dropdown .badge-light-success{ background:color-mix(in srgb,#34c759 18%, transparent)!important; color:#2a9d54!important; border-radius:999px; } [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .badge-light-success{ color:#5fe08a!important; } .lg-admin #kt_header .menu-sub-dropdown .menu-title .bg-light{ background:rgba(10,30,70,.06)!important; } [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .menu-title .bg-light{ background:rgba(255,255,255,.08)!important; color:#e7ecf5!important; } /* Fleet division list: tighten the tall gaps from nested menu-items. */ .lg-admin #kt_header #divisionView .menu-item, .lg-admin #kt_header #assetsView .menu-item{ margin:0!important; } /* ══ DARK-MODE Apple Liquid Glass depth pass ═══════════════════════════════ Dark glass was a flat muddy slab: controls blended into the bar, panels had no depth, badges drifted. Give real material depth, separation + rim light. */ /* Header CONTROLS float as lighter glass on the dark bar (Apple: in dark, chrome sits lighter than its container) → Fleet/bell/user-chip separate from the navy. */ [data-bs-theme="dark"] .lg-admin #kt_header .btn-flex.bg-white.bg-opacity-10, [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_item_wow{ background:rgba(255,255,255,.08)!important; border-color:rgba(255,255,255,.16)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;} [data-bs-theme="dark"] .lg-admin #kt_header .btn-flex.bg-white.bg-opacity-10:hover, [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_item_wow:hover{ background:rgba(255,255,255,.14)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -8px rgba(10,132,255,.55)!important;} /* Dropdown PANELS keep the SHARED --ag-glass-solid color (same hue as header + sidebar); dark just adds a faint cool inner glow + deeper shadow for depth. (standalone #kt_menu_notifications too, in case Metronic reparents it.) */ [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown, [data-bs-theme="dark"] .lg-admin #kt_header .dropdown-menu, [data-bs-theme="dark"] .lg-admin #kt_menu_notifications{ background:var(--ag-glass-solid)!important; border:1px solid var(--ag-glass-bd)!important; -webkit-backdrop-filter:blur(32px) saturate(200%)!important; backdrop-filter:blur(32px) saturate(200%)!important; box-shadow:0 22px 54px -14px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 44px rgba(150,152,162,.05)!important;} /* rows: crisper text + iOS-blue hover fill (was low-contrast on the flat slab) */ [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .menu-link, [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .menu-title{ color:#eef2fa!important; } [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .menu-link:hover{ background:rgba(10,132,255,.20)!important; color:#fff!important;} [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .menu-link:hover .menu-title{ color:#fff!important; } /* count badges: solid glass chip pinned to the row (they were drifting/washed out) */ [data-bs-theme="dark"] .lg-admin #kt_header .menu-sub-dropdown .badge{ background:rgba(255,255,255,.12)!important; color:#dfe6f2!important; border:1px solid rgba(255,255,255,.08);} /* notification rows: readable body + muted secondary on the deeper material */ [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_notifications .text-gray-800, [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_notifications .text-gray-700, [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_notifications .fw-bold{ color:#eef2fa!important; } [data-bs-theme="dark"] .lg-admin #kt_header #kt_menu_notifications .text-muted{ color:#9aa6bd!important; } /* Fleet count badge alignment (fix the drift): pin to the row's right edge. */ .lg-admin #kt_header .menu-sub-dropdown .menu-link .badge{ margin-left:.5rem!important; flex:0 0 auto; } .lg-admin #kt_header #divisionView .menu-link, .lg-admin #kt_header #assetsView .menu-link{ min-height:34px; } /* ── Aside / sidebar → frosted glass panel ─────────────────────────────── */ /* Align the sidebar's LEFT edge with the header capsule's left edge (same 1.6rem line). The aside sits inside a padded page wrapper, so a negative left margin pulls it out to the header's line. Tune this single value if it lands short/past the header edge. */ .lg-admin #kt_aside.aside, .lg-admin #kt_app_sidebar.app-sidebar{ margin-left:-2.2rem!important; background:var(--ag-glass)!important; border:0!important; border-right:1px solid var(--ag-glass-bd)!important; -webkit-backdrop-filter:blur(32px) saturate(195%); backdrop-filter:blur(32px) saturate(195%) url(#lg-refract); /* Float the panel off the content like the header capsule: a right-edge drop shadow for separation + bright inner rims, so the menu reads as a distinct glass panel even in Clear (where it used to vanish into the light page). */ box-shadow: 14px 0 46px -20px rgba(30,45,95,.24), inset -1px 0 0 rgba(255,255,255,.5), inset 1px 0 0 rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.55)!important; } [data-bs-theme="dark"] .lg-admin #kt_aside.aside, [data-bs-theme="dark"] .lg-admin #kt_app_sidebar.app-sidebar{ box-shadow: 16px 0 50px -20px rgba(0,0,0,.55), inset -1px 0 0 rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.08)!important; } /* ── Fix: the aside is pulled left 2.2rem, but Metronic's content wrapper still reserves the un-pulled sidebar width (padding-left) → a dead gap between the menu and the content. Pull the content offset back in sync so the main content sits a clean, consistent gutter from the sidebar. Desktop only (below lg the aside is an off-canvas drawer, so the wrapper has no left padding to fix). ── */ @media (min-width:992px){ .lg-admin #kt_app_wrapper.wrapper{ padding-left:286px!important; } } /* UNIFIED content gutter for the whole app. Pages carry an inconsistent oversized side padding (50px on #kt_app_content_container on most pages, on an extra .d-flex wrapper on a few) → content floats far from the menu, differently per page. Give the content container ONE consistent gutter and neutralize the extra per-page wrappers so nothing double-pads. One style, every page. */ .lg-admin #kt_app_content_container{ padding-left:26px!important; padding-right:26px!important; } .lg-admin #kt_app_main > .d-flex.flex-column, .lg-admin #kt_app_content_container > #kt_app_content{ padding-left:0!important; padding-right:0!important; } /* Pages that use Metronic's .app-container (var-driven 50px padding) instead of #kt_app_content_container — e.g. Sync, Backups, toolbars — get the SAME gutter via the container padding variables + the class, so the whole app is one consistent value. */ .lg-admin{ --bs-app-container-padding-x:26px; --bs-app-toolbar-container-padding-x:26px; --bs-app-content-container-padding-x:26px; } .lg-admin .app-container, .lg-admin #kt_app_toolbar_container, .lg-admin #kt_app_content > .container-fluid, .lg-admin #kt_app_content > .container-xxl{ padding-left:26px!important; padding-right:26px!important; } /* ── In-tab count badges (daily-report topbar etc.) — de-yellow to match the glass segmented control: a small accent-glass pill on inactive tabs, a white translucent pill on the raised active tab. Overrides Metronic's bg-light-warning text-warning + inline color:black via higher specificity. ── */ .lg-admin .nav-line-tabs .badge, .lg-admin .nav-tabs .badge, .lg-admin .nav-pills .badge{ background:color-mix(in srgb, var(--lg-accent) 14%, transparent)!important; color:var(--lg-accent)!important; font-weight:700!important; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lg-accent) 22%, transparent); } .lg-admin .nav-line-tabs .nav-link.active .badge, .lg-admin .nav-tabs .nav-link.active .badge, .lg-admin .nav-pills .nav-link.active .badge{ background:rgba(255,255,255,.55)!important; color:var(--lg-accent)!important; box-shadow:none; } [data-bs-theme="dark"] .lg-admin .nav-line-tabs .nav-link.active .badge, [data-bs-theme="dark"] .lg-admin .nav-tabs .nav-link.active .badge, [data-bs-theme="dark"] .lg-admin .nav-pills .nav-link.active .badge{ background:rgba(255,255,255,.22)!important; color:#fff!important; } /* ── Sidebar-only premium accent: a slightly deeper, richer blue used ONLY inside the menu (the rest of the app keeps --lg-accent #007aff). Drives the refined & calm selection styling below. sb-ink is theme-aware so active titles stay legible in both light and dark. ── */ .lg-admin #kt_aside.aside, .lg-admin #kt_app_sidebar.app-sidebar{ --sb-accent:#0b5fe0; --sb-glow:rgba(11,95,224,.22); --sb-ink:#0a4fc0; } [data-bs-theme="dark"] .lg-admin #kt_aside.aside, [data-bs-theme="dark"] .lg-admin #kt_app_sidebar.app-sidebar{ --sb-accent:#3d86ff; --sb-glow:rgba(61,134,255,.32); --sb-ink:#eaf1ff; } /* ── Sidebar menu — refined glass hover + calm iOS accent selection ──────── */ .lg-admin .aside .menu-item .menu-link, .lg-admin .app-sidebar .menu-item .menu-link{ border-radius:12px; padding:.55rem .7rem; margin:.06rem 0; transition:background .18s, color .18s, box-shadow .18s; } .lg-admin .aside .menu-title, .lg-admin .app-sidebar .menu-title{ color:var(--lg-text)!important; font-weight:500; letter-spacing:-.005em; } .lg-admin .aside .menu-link:hover, .lg-admin .app-sidebar .menu-link:hover{ background:color-mix(in srgb, var(--sb-accent) 8%, transparent)!important; } /* active (Metronic marks the current item .here / the link .active) */ .lg-admin .aside .menu-item.here > .menu-link, .lg-admin .aside .menu-item.show > .menu-link, .lg-admin .aside .menu-link.active, .lg-admin .app-sidebar .menu-item.here > .menu-link, .lg-admin .app-sidebar .menu-link.active{ background:color-mix(in srgb, var(--sb-accent) 13%, transparent)!important; border:1px solid color-mix(in srgb, var(--sb-accent) 30%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 5px 14px -9px var(--sb-glow); } .lg-admin .aside .menu-item.here > .menu-link .menu-title, .lg-admin .aside .menu-item.show > .menu-link .menu-title, .lg-admin .aside .menu-link.active .menu-title, .lg-admin .app-sidebar .menu-item.here > .menu-link .menu-title, .lg-admin .app-sidebar .menu-item.show > .menu-link .menu-title, .lg-admin .app-sidebar .menu-link.active .menu-title{ color:var(--sb-ink)!important; font-weight:600; } .lg-admin .aside .menu-arrow, .lg-admin .app-sidebar .menu-arrow{ opacity:.55; } .lg-admin .aside .menu-item.show > .menu-link .menu-arrow, .lg-admin .app-sidebar .menu-item.show > .menu-link .menu-arrow{ opacity:.9; } .lg-admin .aside .separator, .lg-admin .app-sidebar .separator{ border-color:var(--lg-panel-bd)!important; opacity:.55; } /* ── Menu ICONS as iOS Liquid-Glass tiles (Control-Center style) ───────────── Each icon sits in a circular glass chip so the glyph reads crisply in BOTH light and dark. Chip tint follows Clear/Tinted via --ag-glass; the glyph is monochrome + theme-adaptive (dark on light, white on dark). Active = accent blue chip + white glyph. */ .lg-admin .aside .menu-icon, .lg-admin .app-sidebar .menu-icon{ width:30px; height:30px; flex:0 0 30px; margin-right:.7rem; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:color-mix(in srgb, var(--sb-accent) 7%, var(--ag-glass))!important; border:1px solid var(--ag-glass-bd); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px -6px rgba(10,25,60,.3); transition:background .18s, box-shadow .18s, transform .18s; } .lg-admin .aside .menu-link:hover .menu-icon, .lg-admin .app-sidebar .menu-link:hover .menu-icon{ transform:translateY(-1px); } /* Crisp single-colour glyph, fit to the chip */ .lg-admin .aside .menu-icon .ki-duotone, .lg-admin .app-sidebar .menu-icon .ki-duotone, .lg-admin .aside .menu-icon i, .lg-admin .app-sidebar .menu-icon i{ color:var(--lg-text)!important; font-size:1rem!important; line-height:1; } .lg-admin .aside .menu-icon .ki-duotone .path1:before, .lg-admin .app-sidebar .menu-icon .ki-duotone .path1:before{ opacity:.5!important; } .lg-admin .aside .menu-icon .ki-duotone .path2:before, .lg-admin .app-sidebar .menu-icon .ki-duotone .path2:before{ opacity:1!important; } [data-bs-theme="dark"] .lg-admin .aside .menu-icon .ki-duotone, [data-bs-theme="dark"] .lg-admin .app-sidebar .menu-icon .ki-duotone, [data-bs-theme="dark"] .lg-admin .aside .menu-icon i, [data-bs-theme="dark"] .lg-admin .app-sidebar .menu-icon i{ color:#eaf1ff!important; } /* Some top-level items wrap the glyph in an extra .menu-bullet inside .menu-icon (e.g. Crewing's phosphor ph-users-three) — make that wrapper fill + centre so the glyph sits dead-centre like the ki-duotone items, and normalise phosphor. */ .lg-admin .aside .menu-icon > .menu-bullet, .lg-admin .app-sidebar .menu-icon > .menu-bullet{ display:inline-flex!important; align-items:center; justify-content:center; width:100%; height:100%; margin:0!important; padding:0!important; line-height:1; } .lg-admin .aside .menu-icon [class*="ph-"], .lg-admin .app-sidebar .menu-icon [class*="ph-"]{ display:inline-flex; align-items:center; justify-content:center; line-height:1; color:var(--lg-text)!important; font-size:1.02rem!important; } [data-bs-theme="dark"] .lg-admin .aside .menu-icon [class*="ph-"], [data-bs-theme="dark"] .lg-admin .app-sidebar .menu-icon [class*="ph-"]{ color:#eaf1ff!important; } /* Active item → lit accent-blue glass chip + white glyph */ .lg-admin .aside .menu-item.here > .menu-link .menu-icon, .lg-admin .aside .menu-link.active .menu-icon, .lg-admin .app-sidebar .menu-item.here > .menu-link .menu-icon, .lg-admin .app-sidebar .menu-link.active .menu-icon{ background:linear-gradient(180deg, color-mix(in srgb, var(--sb-accent) 92%, transparent), color-mix(in srgb, var(--sb-accent) 70%, transparent))!important; border-color:color-mix(in srgb, var(--sb-accent) 55%, rgba(255,255,255,.5)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px -6px var(--sb-glow); } .lg-admin .aside .menu-item.here > .menu-link .menu-icon .ki-duotone, .lg-admin .aside .menu-link.active .menu-icon .ki-duotone, .lg-admin .aside .menu-item.here > .menu-link .menu-icon i, .lg-admin .aside .menu-link.active .menu-icon i, .lg-admin .app-sidebar .menu-item.here > .menu-link .menu-icon .ki-duotone, .lg-admin .app-sidebar .menu-link.active .menu-icon .ki-duotone, .lg-admin .app-sidebar .menu-link.active .menu-icon i{ color:#fff!important; } .lg-admin .aside .menu-link.active .menu-icon .ki-duotone .path1:before, .lg-admin .app-sidebar .menu-link.active .menu-icon .ki-duotone .path1:before{ opacity:.6!important; } /* ── SUB-MENU alignment: a clean indent rail so every child sits on ONE axis, overriding Metronic's mx-5 that shoved sub-items too far right. This is the "especially the sub menu" fix. ── */ .lg-admin .aside .menu-sub, .lg-admin .app-sidebar .menu-sub{ position:relative; margin-left:1.05rem!important; margin-right:.2rem!important; padding-left:.85rem; } .lg-admin .aside .menu-sub::before, .lg-admin .app-sidebar .menu-sub::before{ content:''; position:absolute; left:0; top:.15rem; bottom:.15rem; width:1.5px; border-radius:2px; background:linear-gradient(180deg, color-mix(in srgb, var(--sb-accent) 26%, transparent), color-mix(in srgb, var(--sb-accent) 6%, transparent)); } .lg-admin .aside .menu-sub .menu-item, .lg-admin .app-sidebar .menu-sub .menu-item{ margin:.05rem 0!important; } .lg-admin .aside .menu-sub .menu-link, .lg-admin .app-sidebar .menu-sub .menu-link{ padding:.45rem .55rem; border-radius:10px; align-items:center; } .lg-admin .aside .menu-sub .menu-title, .lg-admin .app-sidebar .menu-sub .menu-title{ font-weight:500; } /* ── SUB-MENU icons: sub-items use .menu-bullet (not .menu-icon). Give the ones that hold an icon the same smaller squircle glass chip + crisp theme-adaptive glyph. */ .lg-admin .aside .menu-sub .menu-bullet:has(i), .lg-admin .app-sidebar .menu-sub .menu-bullet:has(i){ width:24px; height:24px; flex:0 0 24px; margin-right:.6rem; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:color-mix(in srgb, var(--sb-accent) 7%, var(--ag-glass))!important; border:1px solid var(--ag-glass-bd); -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px -6px rgba(10,25,60,.28); transition:background .18s, box-shadow .18s, transform .18s; } .lg-admin .aside .menu-sub .menu-bullet i, .lg-admin .app-sidebar .menu-sub .menu-bullet i, .lg-admin .aside .menu-sub .menu-bullet .ki-duotone, .lg-admin .app-sidebar .menu-sub .menu-bullet .ki-duotone{ color:var(--lg-text)!important; font-size:.85rem!important; line-height:1; } [data-bs-theme="dark"] .lg-admin .aside .menu-sub .menu-bullet i, [data-bs-theme="dark"] .lg-admin .app-sidebar .menu-sub .menu-bullet i, [data-bs-theme="dark"] .lg-admin .aside .menu-sub .menu-bullet .ki-duotone, [data-bs-theme="dark"] .lg-admin .app-sidebar .menu-sub .menu-bullet .ki-duotone{ color:#eaf1ff!important; } .lg-admin .aside .menu-sub .menu-bullet .ki-duotone [class*="path"]:before, .lg-admin .app-sidebar .menu-sub .menu-bullet .ki-duotone [class*="path"]:before{ opacity:.9!important; } .lg-admin .aside .menu-sub .menu-link:hover .menu-bullet, .lg-admin .app-sidebar .menu-sub .menu-link:hover .menu-bullet{ transform:translateY(-1px); } .lg-admin .aside .menu-sub .menu-link.active .menu-bullet, .lg-admin .app-sidebar .menu-sub .menu-link.active .menu-bullet{ background:linear-gradient(180deg, color-mix(in srgb, var(--sb-accent) 92%, transparent), color-mix(in srgb, var(--sb-accent) 70%, transparent))!important; border-color:color-mix(in srgb, var(--sb-accent) 55%, rgba(255,255,255,.5)); } .lg-admin .aside .menu-sub .menu-link.active .menu-bullet i, .lg-admin .aside .menu-sub .menu-link.active .menu-bullet .ki-duotone, .lg-admin .app-sidebar .menu-sub .menu-link.active .menu-bullet i, .lg-admin .app-sidebar .menu-sub .menu-link.active .menu-bullet .ki-duotone{ color:#fff!important; } /* Sub-item ACTIVE surface — a LIGHT accent wash, NOT the heavy top-level pill. Higher specificity than the top-level .menu-link.active rule, so it wins. */ .lg-admin .aside .menu-sub .menu-link.active, .lg-admin .app-sidebar .menu-sub .menu-link.active{ background:color-mix(in srgb, var(--sb-accent) 10%, transparent)!important; border:1px solid color-mix(in srgb, var(--sb-accent) 20%, transparent)!important; box-shadow:none!important; } .lg-admin .aside .menu-sub .menu-link.active .menu-title, .lg-admin .app-sidebar .menu-sub .menu-link.active .menu-title{ color:var(--sb-ink)!important; font-weight:600; } /* Sidebar alert markers → crisp danger cue, tidy size (was a big raw red icon). */ .lg-admin .aside .menu-link .alert-count i, .lg-admin .app-sidebar .menu-link .alert-count i{ font-size:1rem!important; color:#ff453a!important; filter:drop-shadow(0 1px 4px rgba(255,69,58,.35)); } /* ── Settings shortcut toolbar (.app-engage) → Apple Liquid Glass tiles ────── Shared by every settings variant (components/setting-menu-item, setting-sidebar, super-admin/front-setting-sidebar, mini-settings-*) — admin, master/employee and super-admin all render the same .app-engage-btn, so this unifies them in one place. Follows Clear/Tinted (via --ag-glass) + light/dark; active = lit accent-blue glass. */ .lg-admin .app-engage{ width:110px!important; flex:0 0 110px!important; overflow-x:visible!important; padding:.1rem 2px!important; } .lg-admin .app-engage > .content{ display:flex!important; flex-direction:column; gap:.6rem; width:100%; } .lg-admin .app-engage-btn{ display:inline-flex!important; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; width:100%; min-height:72px; padding:.62rem .35rem!important; margin:0!important; border-radius:16px!important; text-decoration:none!important; cursor:pointer; position:relative; overflow:hidden; background:var(--ag-glass)!important; border:1px solid var(--ag-glass-bd)!important; -webkit-backdrop-filter:blur(24px) saturate(190%); backdrop-filter:blur(24px) saturate(190%) url(#lg-refract); box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 6px 16px -12px rgba(8,20,55,.3)!important; color:var(--lg-text)!important; transition:transform .18s cubic-bezier(.3,0,.2,1), box-shadow .2s, background .2s!important; } [data-bs-theme="dark"] .lg-admin .app-engage-btn{ color:#eaf1ff!important; } .lg-admin .app-engage-btn:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px -14px rgba(8,20,55,.4)!important; } /* icon circle */ .lg-admin .app-engage-btn .btn-light{ width:34px!important; height:34px!important; border-radius:10px!important; display:flex!important; align-items:center; justify-content:center; margin:0!important; padding:0!important; background:linear-gradient(180deg, color-mix(in srgb, var(--lg-accent) 15%, var(--ag-glass)), color-mix(in srgb, var(--lg-accent) 7%, var(--ag-glass)))!important; border:1px solid color-mix(in srgb, var(--lg-accent) 22%, var(--ag-glass-bd))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important; animation:none!important; } .lg-admin .app-engage-btn .btn-light i{ color:var(--lg-accent)!important; font-size:1rem!important; padding:0!important; margin:0!important; line-height:1; } .lg-admin .app-engage-btn > span{ margin:0!important; font-size:.68rem!important; font-weight:600; letter-spacing:.003em; line-height:1.2; color:inherit!important; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* kill Metronic's pulse ring + dark-pill active look */ .lg-admin .app-engage-btn .pulse-ring, .lg-admin .app-engage-btn.pulse::before{ display:none!important; animation:none!important; } /* Active = lit accent-blue glass tile + white glyph */ .lg-admin .app-engage-btn.active, .lg-admin .app-engage-btn.btn-dark{ background:linear-gradient(180deg, color-mix(in srgb, var(--lg-accent) 30%, transparent), color-mix(in srgb, var(--lg-accent) 16%, transparent))!important; border-color:color-mix(in srgb, var(--lg-accent) 45%, transparent)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 30px -14px var(--lg-glow)!important; color:var(--lg-accent)!important; } .lg-admin .app-engage-btn.active .btn-light{ background:linear-gradient(180deg, color-mix(in srgb, var(--lg-accent) 96%, #fff), var(--lg-accent))!important; border-color:color-mix(in srgb, var(--lg-accent) 55%, rgba(255,255,255,.4))!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -4px color-mix(in srgb, var(--lg-accent) 55%, transparent)!important; } .lg-admin .app-engage-btn.active .btn-light i{ color:#fff!important; } /* ── Notifications dropdown = CONTENT (a list), so keep it OPAQUE + legible in every theme/appearance (Clear must not let the page bleed through) with high-contrast text. */ .lg-admin #kt_menu_notifications{ background:var(--ag-glass-solid)!important; -webkit-backdrop-filter:blur(30px) saturate(180%)!important; backdrop-filter:blur(30px) saturate(180%)!important; border:1px solid var(--ag-glass-bd)!important; border-radius:18px!important; overflow:hidden; box-shadow:0 30px 70px -24px rgba(4,16,48,.5)!important; } /* message text — readable (dark on light / light on dark), roomier */ .lg-admin #kt_menu_notifications .mark-as-read-and-redirect, .lg-admin #kt_menu_notifications .mark-as-read-and-redirect .d-flex{ color:var(--lg-text)!important; } .lg-admin #kt_menu_notifications .mark-as-read-and-redirect{ font-size:.82rem!important; line-height:1.5!important; font-weight:500; } /* rows: top-aligned, separated, tighter right-side so the message gets width */ .lg-admin #kt_menu_notifications #pusher-notifications-container .flex-stack{ align-items:flex-start!important; gap:.4rem; padding:.75rem .1rem!important; border-bottom:1px solid var(--lg-border); } .lg-admin #kt_menu_notifications #pusher-notifications-container .flex-stack:last-child{ border-bottom:0!important; } .lg-admin #kt_menu_notifications .symbol.symbol-circle{ margin-right:.6rem!important; } .lg-admin #kt_menu_notifications .symbol-label{ width:38px; height:38px; background:linear-gradient(180deg, color-mix(in srgb,var(--lg-accent) 96%,#fff), var(--lg-accent))!important; } .lg-admin #kt_menu_notifications .symbol-label i{ color:#fff!important; } /* time pill + mark-as-read check: compact, muted, no-wrap */ .lg-admin #kt_menu_notifications .badge.badge-light{ background:color-mix(in srgb,var(--lg-accent) 10%, var(--ag-glass))!important; color:var(--lg-muted)!important; white-space:nowrap; font-weight:600; } .lg-admin #kt_menu_notifications .mark-as-read{ color:var(--lg-muted)!important; margin:0 .1rem 0 .4rem!important; } .lg-admin #kt_menu_notifications .mark-as-read:hover{ color:var(--lg-accent)!important; } /* ── EVERY Metronic floating menu, wherever it renders (header OR moved to by the menu engine — Fleet selector, Quick Actions, the SOFONNn user menu, notifications, sidebar fly-outs). The #kt_header-scoped rules above miss the body-rendered ones, so they fell back to a plain opaque box (dark in light mode, no glass). Give them ALL the opaque glass surface + legible text so nothing bleeds through in Clear and text always reads. (#id rules like #kt_menu_notifications stay more specific and still win.) ── */ .lg-admin .menu-sub-dropdown{ background:var(--ag-glass-solid)!important; border:1px solid var(--ag-glass-bd)!important; border-radius:16px!important; -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%); box-shadow:0 24px 56px -18px rgba(4,16,48,.5)!important; } .lg-admin .menu-sub-dropdown .menu-link, .lg-admin .menu-sub-dropdown .menu-title, .lg-admin .menu-sub-dropdown .menu-content span:not(.badge):not([class*="text-"]){ color:var(--lg-text)!important; } [data-bs-theme="dark"] .lg-admin .menu-sub-dropdown .menu-link, [data-bs-theme="dark"] .lg-admin .menu-sub-dropdown .menu-title, [data-bs-theme="dark"] .lg-admin .menu-sub-dropdown .menu-content span:not(.badge):not([class*="text-"]){ color:#e7ecf5!important; } .lg-admin .menu-sub-dropdown .menu-link:hover{ background:color-mix(in srgb,var(--lg-accent) 12%, transparent)!important; color:var(--lg-accent)!important; border-radius:10px; } .lg-admin .menu-sub-dropdown .separator{ border-color:var(--lg-border)!important; } /* ── Clear appearance for the SIDEBAR: keep it glassy/refractive like Apple Liquid Glass, but heavily blur the backdrop and frost the panel just enough that text + icons stay clearly readable (Clear was too see-through → the bright platform arcs bled through and washed out the menu). Stronger blur = the background dissolves into soft colour (the Apple look) instead of sharp shapes fighting the text. ── */ [data-glass="clear"] .lg-admin #kt_aside.aside, [data-glass="clear"] .lg-admin #kt_app_sidebar.app-sidebar{ /* real see-through glass: minimal tint so the background shows, moderate blur so it stays recognizable (not flattened), edge lensing + bright specular rim/gloss. */ background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03))!important; -webkit-backdrop-filter:blur(20px) saturate(205%) brightness(1.06)!important; backdrop-filter:blur(20px) saturate(205%) brightness(1.06) url(#lg-refract)!important; box-shadow:14px 0 48px -20px rgba(30,45,95,.28), inset -1.5px 0 0 rgba(255,255,255,.72), inset 1.5px 0 0 rgba(255,255,255,.5), inset 0 1.5px 0 rgba(255,255,255,.78), inset 0 -22px 44px -34px rgba(255,255,255,.45)!important; } [data-bs-theme="dark"][data-glass="clear"] .lg-admin #kt_aside.aside, [data-bs-theme="dark"][data-glass="clear"] .lg-admin #kt_app_sidebar.app-sidebar{ background:linear-gradient(180deg, rgba(26,32,52,.14), rgba(14,20,36,.06))!important; box-shadow:16px 0 52px -20px rgba(0,0,0,.6), inset -1.5px 0 0 rgba(255,255,255,.24), inset 1.5px 0 0 rgba(255,255,255,.12), inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -22px 44px -34px rgba(150,190,255,.18)!important; } /* labels stay readable on the see-through glass via a stronger vibrancy halo (no opaque fill) */ [data-glass="clear"] .lg-admin .aside .menu-title, [data-glass="clear"] .lg-admin .app-sidebar .menu-title{ text-shadow:0 1px 7px rgba(255,255,255,.8), 0 0 2px rgba(255,255,255,.55); } [data-bs-theme="dark"][data-glass="clear"] .lg-admin .aside .menu-title, [data-bs-theme="dark"][data-glass="clear"] .lg-admin .app-sidebar .menu-title{ text-shadow:0 1px 7px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.7); } /* icon chips must stay clearly visible in Clear (don't fade with the translucent --ag-glass) */ [data-glass="clear"] .lg-admin .aside .menu-icon, [data-glass="clear"] .lg-admin .app-sidebar .menu-icon, [data-glass="clear"] .lg-admin .aside .menu-sub .menu-bullet, [data-glass="clear"] .lg-admin .app-sidebar .menu-sub .menu-bullet{ background:color-mix(in srgb, var(--lg-accent) 15%, rgba(255,255,255,.5))!important; border-color:rgba(255,255,255,.65)!important; } [data-bs-theme="dark"][data-glass="clear"] .lg-admin .aside .menu-icon, [data-bs-theme="dark"][data-glass="clear"] .lg-admin .app-sidebar .menu-icon, [data-bs-theme="dark"][data-glass="clear"] .lg-admin .aside .menu-sub .menu-bullet, [data-bs-theme="dark"][data-glass="clear"] .lg-admin .app-sidebar .menu-sub .menu-bullet{ background:color-mix(in srgb, var(--lg-accent) 22%, rgba(255,255,255,.14))!important; border-color:rgba(255,255,255,.24)!important; } /* ── Quick Actions dropdown used loud YELLOW (Metronic "warning") hovers/text/badges. Remap to the on-brand accent so it matches the glass system — no more yellow flash on hover. Scoped to dropdowns so genuine warnings elsewhere keep their colour. ── */ .lg-admin .menu-sub-dropdown .bg-hover-light-warning:hover{ background:color-mix(in srgb,var(--lg-accent) 12%, transparent)!important; } .lg-admin .menu-sub-dropdown .bg-hover-warning:hover{ background:var(--lg-accent)!important; } .lg-admin .menu-sub-dropdown .menu-link:hover .text-hover-warning, .lg-admin .menu-sub-dropdown .text-hover-warning:hover{ color:var(--lg-accent)!important; } .lg-admin .menu-sub-dropdown .text-warning{ color:var(--lg-accent)!important; } .lg-admin .menu-sub-dropdown .bg-light-warning{ background:color-mix(in srgb,var(--lg-accent) 14%, transparent)!important; color:var(--lg-accent)!important; } .lg-admin .menu-sub-dropdown .text-hover-white:hover{ color:#fff!important; } /* Clean, consistent rows for Fleet + Quick Actions (roomy, rounded, full-row accent hover). */ .lg-admin .menu-sub-dropdown .menu-item{ margin:.1rem .35rem!important; } .lg-admin .menu-sub-dropdown .menu-item .menu-link{ border-radius:10px!important; padding:.55rem .75rem!important; } .lg-admin .menu-sub-dropdown .menu-item.bg-hover-light-warning, .lg-admin .menu-sub-dropdown .menu-item.bg-hover-light-primary{ border-radius:10px!important; transition:background .15s; } .lg-admin .menu-sub-dropdown .menu-item.bg-hover-light-warning:hover, .lg-admin .menu-sub-dropdown .menu-item.bg-hover-light-primary:hover{ background:color-mix(in srgb,var(--lg-accent) 10%, transparent)!important; } .lg-admin .menu-sub-dropdown .menu-title{ color:var(--lg-text)!important; } [data-bs-theme="dark"] .lg-admin .menu-sub-dropdown .menu-title{ color:#e7ecf5!important; } .lg-admin .menu-sub-dropdown .badge.badge-circle{ border-radius:999px!important; } .lg-admin .menu-sub-dropdown .form-check-input:checked{ background-color:var(--lg-accent)!important; border-color:var(--lg-accent)!important; } .lg-admin .menu-sub-dropdown .separator{ margin:.4rem .3rem!important; } /* ── Guardrails (legibility over dense menus/tables) ───────────────────── */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lg-admin #kt_header.header, .lg-admin #kt_app_header.app-header, .lg-admin #kt_aside.aside, .lg-admin #kt_app_sidebar.app-sidebar{ background:rgba(16,22,40,.92)!important; } } @media (prefers-reduced-transparency:reduce){ .lg-admin #kt_header.header, .lg-admin #kt_app_header.app-header, .lg-admin #kt_aside.aside, .lg-admin #kt_app_sidebar.app-sidebar{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:rgba(16,22,40,.94)!important; } } @media (prefers-reduced-motion:reduce){ .lg-admin #kt_header.header, .lg-admin #kt_app_header.app-header{ transition:none!important; } } /* Small screens: aside becomes Metronic's off-canvas drawer — full-height, no float. The header capsule keeps a tighter margin (mirrors login's ≤1024 rule). */ @media (max-width:991.98px){ .lg-admin #kt_aside.aside, .lg-admin #kt_app_sidebar.app-sidebar{ border-radius:0!important; } .lg-admin #kt_header.header, .lg-admin #kt_app_header.app-header{ margin:.7rem .9rem!important; } } /* ══ Action-button hover legibility (dark theme) ══════════════════════════════ Metronic table "Actions" buttons use active-state classes like `btn-active-dark` / `btn-active-light-dark` (+ `btn-active-color-light`). Under data-bs-theme=dark, the "dark"/"light" tokens invert, so on hover the BACKGROUND goes ≈white AND the TEXT goes ≈white → illegible white-on-white. Force a readable pair in dark theme (a subtle light fill over the dark surface, white text). Light theme reads fine, so it is left untouched. Applies app-wide (this file loads on every admin page). */ [data-bs-theme="dark"] .btn.btn-active-dark:hover, [data-bs-theme="dark"] .btn.btn-active-dark:focus, [data-bs-theme="dark"] .btn.btn-active-dark.show, [data-bs-theme="dark"] .btn.btn-active-dark:active, [data-bs-theme="dark"] .btn.btn-active-dark.active, [data-bs-theme="dark"] .btn.btn-active-light-dark:hover, [data-bs-theme="dark"] .btn.btn-active-light-dark:focus, [data-bs-theme="dark"] .btn.btn-active-light-dark.show, [data-bs-theme="dark"] .btn.btn-active-light-dark:active, [data-bs-theme="dark"] .btn.btn-active-light-dark.active{ background-color: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.20) !important; color: #fff !important; } /* ══ Toolbar Filter / Export-⋯ trigger buttons — neutral-glass legibility ══════ The toolbar "Filter" link (#kt_horizontal_search_advanced_link, classes `btn-dark btn-light`), the "Filter" menu button and the export "⋯" button (`btn-bg-light btn-active-dark btn-color-dark btn-active-color-light`) all use inverting Metronic tokens: on hover / focus / active / open the background goes ≈white AND the text goes ≈white → invisible in dark; and in light their shape barely reads. Give them the SAME neutral-glass button language as the modal / "new" buttons, pinned across every interaction state in BOTH themes. Scoped to these toolbar triggers only — `[data-kt-menu-trigger]` distinguishes the Filter / export menu buttons from table row-action dropdowns (which use `data-bs-toggle="dropdown"`), so row actions and the blue primary buttons are untouched. App-wide (this file loads on every admin page). */ #kt_horizontal_search_advanced_link, .btn[data-kt-menu-trigger].btn-light, .btn[data-kt-menu-trigger].btn-bg-light, .btn[data-kt-menu-trigger].btn-active-dark, .btn[data-kt-menu-trigger].btn-dark{ background: rgba(120,130,150,.12) !important; border: 1px solid rgba(130,140,160,.30) !important; color: #1c1c1e !important; transition: background-color .12s ease, border-color .12s ease, color .12s ease !important; } #kt_horizontal_search_advanced_link:hover, #kt_horizontal_search_advanced_link:focus, #kt_horizontal_search_advanced_link.show, #kt_horizontal_search_advanced_link:active, #kt_horizontal_search_advanced_link.active, #kt_horizontal_search_advanced_link.collapsed:hover, .btn[data-kt-menu-trigger].btn-light:hover, .btn[data-kt-menu-trigger].btn-light:focus, .btn[data-kt-menu-trigger].btn-light.show, .btn[data-kt-menu-trigger].btn-light:active, .btn[data-kt-menu-trigger].btn-bg-light:hover, .btn[data-kt-menu-trigger].btn-bg-light:focus, .btn[data-kt-menu-trigger].btn-bg-light.show, .btn[data-kt-menu-trigger].btn-bg-light:active, .btn[data-kt-menu-trigger].btn-active-dark:hover, .btn[data-kt-menu-trigger].btn-active-dark:focus, .btn[data-kt-menu-trigger].btn-active-dark.show, .btn[data-kt-menu-trigger].btn-active-dark:active, .btn[data-kt-menu-trigger].btn-dark:hover, .btn[data-kt-menu-trigger].btn-dark:focus, .btn[data-kt-menu-trigger].btn-dark.show, .btn[data-kt-menu-trigger].btn-dark:active{ background: rgba(120,130,150,.22) !important; border-color: rgba(130,140,160,.45) !important; color: #1c1c1e !important; } /* Icon glyphs (ki-filter / ki-dots-horizontal, incl. their duotone paths) follow the text colour. */ #kt_horizontal_search_advanced_link i, #kt_horizontal_search_advanced_link i .path1, #kt_horizontal_search_advanced_link i .path2, .btn[data-kt-menu-trigger].btn-light i, .btn[data-kt-menu-trigger].btn-bg-light i, .btn[data-kt-menu-trigger].btn-active-dark i, .btn[data-kt-menu-trigger].btn-dark i{ color: inherit !important; } [data-bs-theme="dark"] #kt_horizontal_search_advanced_link, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-light, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-bg-light, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-active-dark, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-dark{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; color: #f2f2f7 !important; } [data-bs-theme="dark"] #kt_horizontal_search_advanced_link:hover, [data-bs-theme="dark"] #kt_horizontal_search_advanced_link:focus, [data-bs-theme="dark"] #kt_horizontal_search_advanced_link.show, [data-bs-theme="dark"] #kt_horizontal_search_advanced_link:active, [data-bs-theme="dark"] #kt_horizontal_search_advanced_link.active, [data-bs-theme="dark"] #kt_horizontal_search_advanced_link.collapsed:hover, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-light:hover, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-light:focus, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-light.show, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-light:active, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-bg-light:hover, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-bg-light:focus, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-bg-light.show, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-bg-light:active, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-active-dark:hover, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-active-dark:focus, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-active-dark.show, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-active-dark:active, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-dark:hover, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-dark:focus, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-dark.show, [data-bs-theme="dark"] .btn[data-kt-menu-trigger].btn-dark:active{ background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.28) !important; color: #f2f2f7 !important; } /* ══ Table action-menu (KTMenu) dropdown positioning ══════════════════════════ KTMenu positions its dropdown with Popper using `position: fixed` (verified in scripts.bundle.js: strategy defaults to "fixed"). A fixed element anchors to the viewport — UNLESS an ancestor establishes a containing block via `transform`, `filter`, or `backdrop-filter` (the app has such ancestors), in which case Popper's coordinates land the menu at the wrong place (it was dropping to the BOTTOM of the table instead of under its button). Fix: anchor the menu to its own table cell (`position: absolute` relative to the cell), which is immune to any ancestor. KTMenu still toggles open/close (display); we only override the geometry it miscomputes. App-wide → covers every table action menu. `:has()` is supported in all current browsers; if absent, the menu simply falls back to KTMenu's own (imperfect) positioning — no worse than before. */ td:has(> [data-kt-menu-trigger]), th:has(> [data-kt-menu-trigger]){ position: relative; } td > .menu-sub-dropdown[data-kt-menu="true"], th > .menu-sub-dropdown[data-kt-menu="true"]{ position: absolute !important; inset: calc(100% + 4px) 0 auto auto !important; /* just below the button, right-aligned to the cell */ transform: none !important; z-index: 107; } /* …and the menu is INSIDE the DataTables scrollY body, whose overflow would clip an absolutely-anchored menu. Drop that internal fixed-height scroll so the anchored menu can show (the body grows to its content; the sticky header stays in .dataTables_scrollHead; long tables lengthen the page instead of scrolling). */ .dataTables_scrollBody{ overflow: visible !important; max-height: none !important; height: auto !important; } /* ══════════════════════════════════════════════════════════════════════════ App-wide modal / dialog action buttons — consistent, legible cancel / reject / accept in BOTH themes. Covers Bootstrap modals (.modal) and SweetAlert2 dialogs (.swal2-popup). Root cause fixed here: Metronic's `.btn-light-dark:hover { background:var(--bs-dark)!important }` resolves to white in dark mode → white-on-white. We pin a legible neutral background and give the three semantic actions one shared shape/colour language. ══════════════════════════════════════════════════════════════════════════ */ /* One uniform shape + size for the modal/dialog action buttons so cancel / reject / accept read as a single consistent set (same radius, height, min-width, centred icon+label). */ .modal .btn.btn-secondary, .modal .btn.btn-light, .modal .btn.btn-light-dark, .modal .btn.btn-active-light, .modal .btn.btn-active-dark, .modal .btn.btn-danger, .modal .btn.btn-primary, .modal .btn.btn-dark, .modal .btn.btn-success, .modal .btn.reject-btn, .swal2-popup .swal2-actions .btn{ border-radius: .8rem !important; font-weight: 600 !important; padding: .55rem 1.2rem !important; min-width: 108px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .4rem !important; line-height: 1.1 !important; margin: .25rem !important; } /* — Neutral / Cancel (secondary, light, light-dark, active-light/dark) — */ .modal .btn.btn-secondary, .modal .btn.btn-light, .modal .btn.btn-light-dark, .modal .btn.btn-active-light, .modal .btn.btn-active-dark, .swal2-popup .btn.btn-secondary, .swal2-popup .btn.btn-light, .swal2-popup .btn.btn-light-dark{ background: rgba(120,130,150,.12) !important; border: 1px solid rgba(130,140,160,.30) !important; color: #1c1c1e !important; } .modal .btn.btn-secondary:hover:not(.btn-active), .modal .btn.btn-light:hover:not(.btn-active), .modal .btn.btn-light-dark:hover:not(.btn-active), .modal .btn.btn-active-light:hover:not(.btn-active), .modal .btn.btn-active-dark:hover:not(.btn-active), .swal2-popup .btn.btn-secondary:hover, .swal2-popup .btn.btn-light:hover, .swal2-popup .btn.btn-light-dark:hover{ background: rgba(120,130,150,.22) !important; border-color: rgba(130,140,160,.45) !important; color: #1c1c1e !important; } .modal .btn.btn-secondary i, .modal .btn.btn-light i, .modal .btn.btn-light-dark i{ color: inherit !important; } [data-bs-theme="dark"] .modal .btn.btn-secondary, [data-bs-theme="dark"] .modal .btn.btn-light, [data-bs-theme="dark"] .modal .btn.btn-light-dark, [data-bs-theme="dark"] .modal .btn.btn-active-light, [data-bs-theme="dark"] .modal .btn.btn-active-dark, [data-bs-theme="dark"] .swal2-popup .btn.btn-secondary, [data-bs-theme="dark"] .swal2-popup .btn.btn-light, [data-bs-theme="dark"] .swal2-popup .btn.btn-light-dark{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; color: #f2f2f7 !important; } [data-bs-theme="dark"] .modal .btn.btn-secondary:hover:not(.btn-active), [data-bs-theme="dark"] .modal .btn.btn-light:hover:not(.btn-active), [data-bs-theme="dark"] .modal .btn.btn-light-dark:hover:not(.btn-active), [data-bs-theme="dark"] .modal .btn.btn-active-light:hover:not(.btn-active), [data-bs-theme="dark"] .modal .btn.btn-active-dark:hover:not(.btn-active), [data-bs-theme="dark"] .swal2-popup .btn.btn-secondary:hover, [data-bs-theme="dark"] .swal2-popup .btn.btn-light:hover, [data-bs-theme="dark"] .swal2-popup .btn.btn-light-dark:hover{ background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.28) !important; color: #f2f2f7 !important; } /* — Reject / Delete (danger) — same red everywhere, solid on hover — */ .modal .btn.btn-danger, .swal2-popup .btn.btn-danger{ background: rgba(255,59,48,.14) !important; border: 1px solid rgba(255,59,48,.42) !important; color: #ff453a !important; } .modal .btn.btn-danger:hover:not(.btn-active), .swal2-popup .btn.btn-danger:hover{ background: #ff3b30 !important; border-color: #ff3b30 !important; color: #fff !important; } /* — Accept / Save / Confirm (primary / dark / success) — solid accent, white text — */ .modal .btn.btn-primary, .modal .btn.btn-dark, .modal .btn.btn-success, .swal2-popup .btn.btn-primary, .swal2-popup .btn.btn-dark, .swal2-popup .btn.btn-success{ background: #0b5fe0 !important; border: 1px solid #0b5fe0 !important; color: #fff !important; } .modal .btn.btn-primary:hover:not(.btn-active), .modal .btn.btn-dark:hover:not(.btn-active), .modal .btn.btn-success:hover:not(.btn-active), .swal2-popup .btn.btn-primary:hover, .swal2-popup .btn.btn-dark:hover, .swal2-popup .btn.btn-success:hover{ background: #0a52c4 !important; border-color: #0a52c4 !important; color: #fff !important; } .modal .btn.btn-primary i, .modal .btn.btn-dark i, .modal .btn.btn-success i{ color: #fff !important; } /* — Legibility safety net for the ALERT / CONFIRM (SweetAlert) primary button — Some delete confirms use `btn-bg-light` / `btn-active-dark`, which the rules above don't cover, so in certain themes the confirm button rendered white-on- white (invisible "Yes, delete it!"). Force the primary confirm button to the solid accent with white text in every theme; genuine danger/success confirms keep their own colour. */ .swal2-popup .btn.btn-bg-light, .swal2-popup .btn.btn-active-dark, .swal2-popup .swal2-confirm:not(.btn-danger):not(.btn-success):not(.reject-btn){ background: #0b5fe0 !important; border: 1px solid #0b5fe0 !important; color: #fff !important; } .swal2-popup .btn.btn-bg-light:hover, .swal2-popup .btn.btn-active-dark:hover, .swal2-popup .swal2-confirm:not(.btn-danger):not(.btn-success):not(.reject-btn):hover{ background: #0a52c4 !important; border-color: #0a52c4 !important; color: #fff !important; } .swal2-popup .swal2-confirm:not(.btn-danger):not(.btn-success):not(.reject-btn) *{ color: #fff !important; } /* Reject buttons are semantically destructive → red, even when the underlying component renders btn-dark/btn-primary. `.reject-btn` hook + #confirmReject win over the primary/dark block above (declared later / id specificity). */ .modal .btn.reject-btn, .modal #confirmReject, .swal2-popup .btn.reject-btn{ background: rgba(255,59,48,.14) !important; border: 1px solid rgba(255,59,48,.45) !important; color: #ff453a !important; } .modal .btn.reject-btn:hover:not(.btn-active), .modal #confirmReject:hover:not(:disabled), .swal2-popup .btn.reject-btn:hover{ background: #ff3b30 !important; border-color: #ff3b30 !important; color: #fff !important; } .modal .btn.reject-btn i, .modal #confirmReject i{ color: inherit !important; } /* ═══════════════════════════════════════════════════════════════════════════ PROJECT-WIDE GLASS SELECT — native .form-select / select.form-control + select2. Base rule, applied app-wide via .lg-admin (the admin body class). Theme-aware (light/dark) and Clear/Tinted through the shared --lg-* tokens (with solid fallbacks). Page scopes (.dr-scope/.ps-scope/.emp-glass/.chartering-glass) may still refine on top. Added 2026-09-15. ═══════════════════════════════════════════════════════════════════════════ */ /* — Native is kept in the DOM (functional) but visually hidden; it stays "displayed" (not display:none) so the wrapping