/* ── Liberty Global Administration – Design System ── */

/* ── Global page loader ───────────────────────
   Thin animated periwinkle bar pinned to the very top of the viewport.
   JS toggles `#app-loader.is-active` whenever a Livewire request is in
   flight or the user is between SPA-navigated pages. */
#app-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

#app-loader.is-active {
    opacity: 1 !important;
}

#app-loader .app-loader__bar {
    height: 100% !important;
    width: 100% !important;
    background-image: linear-gradient(90deg,
        transparent 0%,
        #536cdd 40%,
        #3852c2 50%,
        #536cdd 60%,
        transparent 100%) !important;
    background-size: 40% 100% !important;
    background-repeat: no-repeat !important;
    animation: app-loader-slide 1.1s linear infinite !important;
}

@keyframes app-loader-slide {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    #app-loader .app-loader__bar {
        animation: none !important;
        background-image: linear-gradient(90deg, #536cdd 0%, #3852c2 100%) !important;
        background-size: 100% 100% !important;
    }
}

:root {
    /* ── Lumina (SereneAI) palette ── */
    --primary: #3852c2;
    --primary-container: #536cdd;
    --on-primary: #ffffff;
    --on-primary-container: #fffdff;
    --inverse-primary: #b9c3ff;
    --secondary: #5b5e68;
    --on-secondary: #ffffff;
    --secondary-container: #e0e2ee;
    --on-secondary-container: #61646e;
    --tertiary: #515a87;
    --tertiary-container: #6a73a2;
    --on-tertiary: #ffffff;

    /* Surfaces — light lavender system */
    --surface: #faf8ff;
    --surface-bright: #faf8ff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3ff;
    --surface-container: #ebedff;
    --surface-container-high: #e3e7ff;
    --surface-container-highest: #dbe1ff;
    --surface-variant: #dbe1ff;
    --surface-tint: #3a54c4;
    --inverse-surface: #252f50;
    --inverse-on-surface: #eff0ff;

    /* Text */
    --on-surface: #0f1a3a;
    --on-surface-variant: #444653;
    --on-background: #0f1a3a;
    --background: #faf8ff;

    /* Outlines */
    --outline: #757685;
    --outline-variant: #c5c5d5;

    /* Status */
    --success: #1d9e75;
    --warning: #d85a30;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* LGL brand-red is preserved as an ACCENT only (used by the wordmark) */
    --brand-red: #e31e24;
    --brand-red-dark: #bb0014;

    /* Legacy aliases (kept so existing rules referencing these still work) */
    --brand-navy: var(--on-surface);
    --brand-navy-light: var(--inverse-surface);
    --brand-blue: var(--primary-container);
    --bg-main: var(--surface);
    --bg-sidebar: var(--surface-container-low);
    --border-color: var(--outline-variant);
    --text-primary: var(--on-surface);
    --text-secondary: var(--on-secondary-container);

    /* Layout Constants */
    --sidebar-width: 260px;
    --topbar-height: 64px;

    /* Elevation */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-glass: 0 10px 30px rgba(83, 108, 221, 0.10);
    --shadow-modal: 0 10px 30px rgba(83, 108, 221, 0.15);
}

/* ── Responsive Overrides ────────────────────── */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 0px;
    }

    /* Slide sidebar off-screen by default on mobile.
       Using `aside.fi-sidebar` (specificity 0,1,1) so we beat the later-declared
       base `.fi-sidebar { width: var(--sidebar-width) }` rule (specificity 0,1,0)
       regardless of CSS source-order. Without this the sidebar collapses to width 0
       on mobile and looks invisible. */
    aside.fi-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        width: 260px !important;
        z-index: 60 !important; /* above Filament's close-overlay (z-50) */
    }

    /* Filament v5 puts `fi-sidebar-open` on the <aside> itself, NOT on a parent. */
    aside.fi-sidebar.fi-sidebar-open {
        transform: translateX(0) !important;
    }

    /* Filament's own backdrop overlay — style it so the user sees the dim and
       can tap to close. */
    .fi-sidebar-close-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 26, 58, 0.45) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        z-index: 55 !important; /* below the open sidebar (z-60), above page (z-40) */
    }

    .fi-main {
        padding: 1rem !important;
    }

    /* Sidebar hides on mobile — show LGL logo image in the topbar so brand stays visible. */
    .fi-topbar .fi-brand-logo-img {
        display: block !important;
        height: 2rem !important;
        width: auto !important;
        margin-right: 0.5rem !important;
    }

    /* Make sure Filament's hamburger toggle is tap-friendly */
    .fi-layout-sidebar-toggle-btn-ctn,
    .fi-topbar-open-sidebar-btn-ctn,
    .fi-topbar-close-sidebar-btn-ctn {
        display: flex !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Topbar reclaims the full width when sidebar is hidden */
    .fi-topbar {
        left: 0 !important;
    }

    .mvdn-metrics {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .mvdn-metrics {
        grid-template-columns: 1fr !important;
    }
    
    .fi-simple-main {
        padding: 2rem 1.5rem !important;
    }
    
    .mvdn-table-wrap {
        overflow-x: auto !important;
    }
    
    .mvdn-table {
        min-width: 800px !important;
        table-layout: auto !important;
    }

    .skote-welcome-card__body {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .skote-welcome-card__left {
        margin-top: -36px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .skote-welcome-card__name-block {
        text-align: center !important;
    }

    .skote-welcome-card__stats {
        justify-content: center !important;
        gap: 20px !important;
    }

    .skote-welcome-card__cta-wrap {
        justify-content: center !important;
    }

    .skote-welcome-card__illustration {
        display: none !important;
    }

    .fi-topbar-config-menu {
        right: -50px !important;
        min-width: 200px !important;
    }

    /* On phones the full wordmark doesn't fit — swap it for the compact
       "LSA" monogram so the app is still identifiable next to the logo. */
    .fi-topbar .fi-brand-logo-text {
        display: none !important;
    }

    .fi-topbar .fi-brand-initials {
        display: inline-flex !important;
        align-items: center !important;
        height: 64px !important;
        line-height: 1 !important;
        font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
        font-weight: 800 !important;
        font-size: 1.7rem !important;
        letter-spacing: 0.06em !important;
        /* Solid brand-blue — NO background-clip/text-fill transparency trick
           (it renders invisible in some mobile webviews / the PWA). */
        color: #3852c2 !important;
        -webkit-text-fill-color: #3852c2 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    /* Brand-red "S" in the middle. */
    .fi-topbar .fi-brand-initials .text-brand-red {
        color: #FF4D00 !important;
        -webkit-text-fill-color: #FF4D00 !important;
    }

    /* Hide Filament's global search bar on phones — icons take precedence */
    .fi-topbar .fi-global-search,
    .fi-topbar .fi-global-search-field {
        display: none !important;
    }

    /* Page heading + breadcrumb shrink */
    .fi-header-heading {
        font-size: 1.35rem !important;
    }

    .fi-breadcrumbs {
        font-size: 0.75rem !important;
    }

    /* ViewRecord section padding tightened on phones */
    .fi-resource-view-record-page .fi-section {
        padding: 1rem !important;
        border-radius: 1rem !important;
    }

    /* Resource list-page header buttons full-width on phone */
    .fi-resource-list-records-page .fi-header-action {
        width: 100% !important;
    }

    /* Filter bar on MIL VDN list — full-width controls, stacked */
    .mvdn-filters {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mvdn-filter-search,
    .mvdn-filter-select {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Dashboard widgets — force full screen width on phones regardless of
       what columnSpan was declared. Filament's gridColumn macro silently
       defaults a bare string like 'full' to the lg breakpoint only, leaving
       --col-span-default unset so the widget collapses to shrink-fit. This
       guard ensures every widget's outer grid cell + the widget div itself
       span the full available width. */
    .fi-wi-widget,
    .fi-wi-widget > [wire\:id] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Make sure our vessel-map card fills the cell even if some ancestor
       container is still being weird about widths. */
    .lgl-vmap-card {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Very-small phones — tighten everything one notch more */
@media (max-width: 420px) {
    .fi-topbar {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .fi-topbar .fi-brand-logo-text {
        font-size: 0.85rem !important;
    }

    .fi-topbar .fi-icon-btn {
        padding: 0.4rem !important;
    }

    .fi-main {
        padding: 0.75rem !important;
    }

    .mvdn-dash__title {
        font-size: 1.1rem !important;
    }

    .mvdn-metric {
        padding: 12px 14px !important;
    }

    .mvdn-metric__value {
        font-size: 1.25rem !important;
    }
}

/* ── Skote Monthly Card ──────────────────────── */
.skote-monthly-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 24px !important;
    height: 100% !important;
}

.skote-monthly-card__grid {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
}

@media (max-width: 640px) {
    .skote-monthly-card__grid {
        flex-direction: column !important;
        text-align: center !important;
    }
}

.skote-monthly-card__left {
    flex: 1 !important;
}

.skote-monthly-card__amount {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 8px 0 !important;
}

.skote-monthly-card__delta-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.skote-monthly-card__delta-pill--up {
    background-color: #e1f5ee !important;
    color: #0f6e56 !important;
}

.skote-monthly-card__delta-pill--down {
    background-color: #faece7 !important;
    color: #993c1d !important;
}

/* ── Skote Stat Cards ────────────────────────── */
.skote-stat-card {
    transition: transform 0.2s ease !important;
}

.skote-stat-card:hover {
    transform: translateY(-4px) !important;
}

@media (max-width: 640px) {
    .fi-wi-stats-overview-stat {
        padding: 1rem !important;
    }
}

/* ── Permission Matrix Responsive ────────────── */
.fi-permission-matrix-container {
    width: 100% !important;
}

@media (max-width: 640px) {
    .fi-permission-matrix-table {
        font-size: 11px !important;
    }
    
    .fi-permission-matrix-table th,
    .fi-permission-matrix-table td {
        padding: 8px 10px !important;
    }

    .col-module {
        width: 120px !important;
        min-width: 120px !important;
    }

    .col-action {
        width: 60px !important;
        min-width: 60px !important;
    }

    .col-all {
        width: 50px !important;
        min-width: 50px !important;
    }
}

/* ── Global Typography ────────────────────────── */
body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background: linear-gradient(135deg, #f3f3ff 0%, #e3e7ff 100%) !important;
    background-attachment: fixed !important;
    color: var(--on-background) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em !important;
}

h1, h2, h3, h4, .fi-header-heading, .fi-ta-header-heading {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--on-surface) !important;
}

/* ── Layout ──────────────────────────────────── */
.fi-layout {
    background: transparent !important;
}

.fi-main {
    margin-left: var(--sidebar-width) !important;
    margin-top: var(--topbar-height) !important;
    /* Tighter top/bottom so the page heading sits close to the topbar
       and content doesn't leave a big empty band. */
    padding: 0.75rem 2rem 1.5rem !important;
    min-height: calc(100vh - var(--topbar-height)) !important;
    display: block !important;
    overflow-y: auto !important;
    transition: margin-left 0.25s ease !important;
}

/* Desktop sidebar collapse → ICON-ONLY mode.
   When the sidebar is "closed" via the toggle on desktop, override
   Filament's default off-screen slide and instead narrow the sidebar
   to a 4rem strip showing only icons. Labels, group headers and the
   brand text are hidden. Main content and topbar shift by 4rem (the
   icon-strip width) rather than 0 so they don't overlap. */
@media (min-width: 1024px) {
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar {
        width: 4rem !important;
        translate: 0 0 !important;
        --tw-translate-x: 0 !important;
        overflow: hidden !important;
    }

    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-item-label,
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-group-label,
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-group-collapse-btn,
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-group-btn,
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-brand-logo-text {
        display: none !important;
    }

    /* Force every group's item list to render even if the group is in
       a collapsed state — in icon-only mode there's no header to click,
       so we always want to see the icons. */
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-group-items {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Tighten the item-button padding so the icon centers cleanly in
       the 4rem strip without the label's leftover space. */
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-item-button {
        justify-content: center !important;
        padding: 0.5rem !important;
    }

    /* Filament puts `x-show="$store.sidebar.isOpen"` on the logo
       container so it gets `display: none` inline when collapsed.
       Override with `display: flex !important` (wins over Alpine's
       inline style) so the LGL image stays visible in the strip. */
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-header-logo-ctn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Keep the LGL brand image visible inside the 4rem icon strip —
       shrink everything down so it fits cleanly without being clipped
       by the sidebar's overflow:hidden, the .fi-logo's inline margin,
       or the sidebar-header padding. */
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-header {
        padding-inline: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar-header .fi-logo {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar .fi-brand-logo-wrap {
        gap: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-sidebar .fi-brand-logo-img {
        display: block !important;
        height: 1.6rem !important;
        max-width: 2.75rem !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-main {
        /* Center the content area in the viewport when the sidebar is
           narrow. `max(...)` ensures we never push closer than 4rem to
           the icon strip; on wider viewports the extra space splits
           evenly left/right so the page stays visually balanced. */
        max-width: 1280px !important;
        margin-left: max(4rem, calc((100vw - 1280px) / 2)) !important;
        margin-right: max(2rem, calc((100vw - 1280px) / 2)) !important;
    }
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-topbar {
        left: 4rem !important;
    }
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .kb-grid {
        left: 4rem !important;
    }
    body.fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-sidebar.fi-sidebar-open)) .fi-topbar-open-sidebar-btn {
        display: inline-flex !important;
    }
}

/* Make the page heading stick to the top while scrolling so the module
   name is always visible. Extends to the full content width via negative
   margins to overlap the .fi-main padding. */
.fi-page > .fi-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background-color: rgba(243, 243, 255, 0.92) !important;
    margin: -0.75rem -2rem 0.5rem -2rem !important;
    padding: 0.6rem 2rem 0.5rem 2rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Ensure widgets are visible */
.fi-wi-ctn {
    display: grid !important;
    gap: 2rem !important;
}

/* ── Topbar ──────────────────────────────────── */
.fi-topbar {
    /* No backdrop-filter: it creates a containing block + stacking context
       that traps Filament's fixed-positioned user-menu / profile dropdown,
       making it flip UPWARD. Use a near-opaque background for the same look
       without the side effect. */
    background-color: #faf8ff !important;
    border-bottom: 1px solid rgba(120, 118, 133, 0.18) !important;
    box-shadow: var(--shadow-soft) !important;
    /* Must stay visible so the topbar config dropdown can render BELOW the
       64 px bar — `overflow: hidden` here was clipping it. Brand-text
       descender clipping is handled on .fi-brand-logo-wrap instead. */
    overflow: visible !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: var(--sidebar-width) !important;
    height: var(--topbar-height) !important;
    z-index: 40 !important;
    transition: left 0.25s ease !important;
}

.fi-topbar nav {
    background-color: transparent !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Topbar Branding: SHOW TEXT ONLY (centered) */
.fi-topbar .fi-brand-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    flex: 1 1 auto !important;
    text-align: center !important;
    /* Clip the LIBERTY SUPER APP text if it would render past the 64 px bar
       height (descenders, big fonts). Scoped to the brand area so it no
       longer clips the topbar config dropdown. */
    overflow: hidden !important;
}

.fi-topbar .fi-brand-logo-img {
    display: none !important; /* Hide logo image in topbar */
}

.fi-topbar .fi-brand-logo-text {
    color: var(--primary) !important;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    /* Explicit 64 px so the text box exactly matches the .fi-logo wrapper
       height and centers via line-height baseline — no descender bleed
       past the topbar bottom border. */
    height: 64px !important;
    line-height: 64px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.text-brand-red {
    color: #FF4D00 !important;
}

/* Compact "LSA" monogram — hidden on desktop (full wordmark shows there),
   revealed on mobile via the media query below. */
.fi-brand-initials {
    display: none;
}

/* Topbar Icons */
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-icon-btn svg,
.fi-topbar .fi-dropdown-trigger svg,
.fi-topbar .fi-user-menu-trigger svg,
.fi-topbar button svg,
.fi-topbar a svg {
    color: var(--on-surface-variant) !important;
}

.fi-topbar .fi-icon-btn:hover {
    background-color: rgba(83, 108, 221, 0.08) !important;
    border-radius: 9999px !important;
}

/* ── Sidebar (light surface, black labels) ───── */
.fi-sidebar {
    background-color: var(--surface-container-low) !important;
    width: var(--sidebar-width) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 50 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Sidebar Header: SHOW LOGO ONLY */
.fi-sidebar-header {
    height: var(--topbar-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1rem !important;
    background-color: transparent !important;
    visibility: visible !important;
    border-bottom: 1px solid var(--outline-variant) !important;
}

.fi-sidebar .fi-brand-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
}

.fi-sidebar .fi-brand-logo-img {
    display: block !important;
    height: 2.5rem !important;
    width: auto !important;
    flex-shrink: 0 !important;
    /* Logo sits on a light surface now — no inversion needed */
    filter: none !important;
}

.fi-sidebar .fi-brand-logo-text {
    display: none !important;
}

/* Sidebar Nav */
.fi-sidebar-nav {
    padding: 1rem 0.75rem !important;
    background-color: transparent !important;
}

/* Filament v5 markup: <li class="fi-sidebar-item fi-active"> >
   <a class="fi-sidebar-item-btn"> > <span class="fi-sidebar-item-label">.
   Older builds used -button / -active, so we target BOTH to be safe. */
.fi-sidebar-item-btn,
.fi-sidebar-item-button {
    border-radius: 0.75rem !important;
    margin-bottom: 0.25rem !important;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

/* Module NAME (label span) → black */
.fi-sidebar-item-label {
    color: #0b1120 !important;
    font-weight: 600 !important;
}

/* Module icons → black to match the labels */
.fi-sidebar-item-icon {
    color: #0b1120 !important;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-button:hover {
    background-color: rgba(56, 82, 194, 0.08) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #000000 !important;
}

/* ── Active state — solid brand-blue pill + white text/icon ───────────── */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-btn,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #3852c2 !important;
    box-shadow: 0 4px 14px rgba(56, 82, 194, 0.45) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.fi-sidebar-group-label {
    color: #1f2937 !important;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}

/* ── Login page (Lumina light glassmorphism) ─── */
.fi-simple-layout {
    background: linear-gradient(135deg, #f3f3ff 0%, #e3e7ff 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
}

.fi-simple-main {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 1.5rem !important;
    padding: 3rem 2.5rem !important;
    box-shadow: var(--shadow-modal) !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: auto !important;
}

.fi-simple-header {
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.fi-simple-header .fi-brand-logo-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.fi-simple-header .fi-brand-logo-img {
    display: block !important;
    height: 3.5rem !important;
    width: auto !important;
}

.fi-simple-header .fi-brand-logo-text {
    color: var(--primary) !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
}

/* Sign in heading on the light glass card */
.fi-simple-layout h1,
.fi-simple-main h1 {
    color: var(--on-surface) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    display: block !important;
    position: relative !important;
    clear: both !important;
    letter-spacing: -0.02em !important;
}

/* Login Form Labels & Inputs */
.fi-simple-main label {
    color: var(--on-surface-variant) !important;
    font-weight: 500 !important;
}

.fi-simple-main .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid var(--outline-variant) !important;
    color: var(--on-surface) !important;
    margin-bottom: 1rem !important;
    border-radius: 0.75rem !important;
}

.fi-simple-main .fi-input-wrp:focus-within {
    border-color: var(--primary-container) !important;
    box-shadow: 0 0 0 3px rgba(83, 108, 221, 0.15) !important;
}

.fi-simple-main .fi-input-wrp input {
    color: var(--on-surface) !important;
}

.fi-simple-main .fi-btn-color-primary {
    background-color: var(--primary-container) !important;
    color: var(--on-primary) !important;
    width: 100% !important;
    padding: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 0.75rem !important;
    margin-top: 1rem !important;
    box-shadow: 0 4px 12px rgba(83, 108, 221, 0.25) !important;
    transition: all 0.2s ease !important;
}

.fi-simple-main .fi-btn-color-primary:hover {
    background-color: var(--primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(83, 108, 221, 0.35) !important;
}

/* ── Cards & Tables (Lumina glass) ───────────
   NOTE: `backdrop-filter` creates both a containing block for
   `position: fixed` and a new stacking context. That traps modals inside
   the element (breaking their scrolling) AND clips dropdowns/popovers at
   the section boundary. We use a slightly-translucent white plus borders
   and shadows to keep the glass *feel* without the blur side-effects. */
.fi-section, .fi-fo-section, .fi-ta-ctn {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 1.5rem !important;
    box-shadow: var(--shadow-soft) !important;
}

/* Section / form section headings */
.fi-section-header-heading,
.fi-fo-section-header-heading {
    color: var(--on-surface) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Inputs across forms */
.fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.6) !important;
    border-color: var(--outline-variant) !important;
    border-radius: 0.75rem !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--primary-container) !important;
    box-shadow: 0 0 0 3px rgba(83, 108, 221, 0.15) !important;
}

/* Primary buttons across the app — periwinkle.
   Filament v5 paints filled colored buttons via the --bg / --text / --hover-bg
   custom properties on `.fi-btn.fi-color-primary`. Overriding those forces
   every primary-coloured button (Add, Save, Submit, etc.) to match the
   Ask button in the KB regardless of the auto-generated palette shade. */
.fi-btn.fi-color-primary:not(.fi-link) {
    --bg: #536cdd !important;
    --text: #ffffff !important;
    --hover-bg: #3852c2 !important;
    --hover-text: #ffffff !important;
    --dark-bg: #536cdd !important;
    --dark-text: #ffffff !important;
    --dark-hover-bg: #3852c2 !important;
    --dark-hover-text: #ffffff !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(83, 108, 221, 0.18) !important;
    transition: all 0.2s ease !important;
}

.fi-btn.fi-color-primary:not(.fi-link):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(83, 108, 221, 0.28) !important;
}

/* Tables — softer borders */
.fi-ta-cell, .fi-ta-header-cell {
    border-bottom-color: var(--outline-variant) !important;
}

.fi-ta-header-ctn {
    background-color: rgba(243, 243, 255, 0.5) !important;
    border-bottom: 1px solid var(--outline-variant) !important;
}

/* ── Blue/white column headers across EVERY table ────────────────────────
   Differentiates the header row from the data rows — brand blue (#3852c2)
   background with white labels, matching the MIL VDN pill styling. Targets
   the table <thead> so it never bleeds into body cells. */
.fi-ta-table thead th,
.fi-ta-table thead .fi-ta-header-cell,
.fi-ta-table thead .fi-ta-cell {
    background-color: #3852c2 !important;
    border-bottom-color: #2f47a8 !important;
}

/* All header text + sort labels + tooltips → white */
.fi-ta-table thead th,
.fi-ta-table thead th a,
.fi-ta-table thead th span,
.fi-ta-table thead th .fi-ta-header-cell-label,
.fi-ta-table thead th .fi-ta-header-cell-sort-btn,
.fi-ta-table thead th .fi-ta-header-cell-tooltip {
    color: #ffffff !important;
}

/* Sort arrows / any header icons → white */
.fi-ta-table thead th svg,
.fi-ta-table thead th .fi-icon {
    color: #ffffff !important;
    opacity: 0.95 !important;
}

/* Keep the sortable header button readable on hover (no dark wash) */
.fi-ta-table thead th .fi-ta-header-cell-sort-btn:hover {
    color: #e6ebff !important;
}

/* Round the outer corners of the header row so it reads as a banner */
.fi-ta-table thead tr th:first-child {
    border-top-left-radius: 0.5rem !important;
}
.fi-ta-table thead tr th:last-child {
    border-top-right-radius: 0.5rem !important;
}

/* The bulk-select checkbox sits in the header on a blue background. A
   translucent fill reads as faint, so give the UNCHECKED box a solid white
   fill + white frame for clear contrast; the checked state keeps its primary
   fill so the white tick stays visible. */
.fi-ta-table thead th .fi-checkbox-input {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}
.fi-ta-table thead th .fi-checkbox-input:not(:checked) {
    background-color: #ffffff !important;
}

/* Hide theme toggle */
.fi-theme-switcher {
    display: none !important;
}

/* ── Topbar gear-icon config dropdown ────────────── */
.fi-topbar-config-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.fi-topbar-config-trigger {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    color: var(--on-surface-variant) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.fi-topbar-config-trigger:hover {
    background-color: rgba(83, 108, 221, 0.08) !important;
}

.fi-topbar-config-trigger svg {
    width: 22px !important;
    height: 22px !important;
    color: var(--on-surface-variant) !important;
}

.fi-topbar-config-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    min-width: 240px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 1rem !important;
    box-shadow: var(--shadow-modal) !important;
    padding: 8px !important;
    z-index: 200 !important;
}

.fi-topbar-config-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 0.75rem !important;
    color: var(--on-surface) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
}

.fi-topbar-config-item:hover {
    background-color: rgba(83, 108, 221, 0.08) !important;
    color: var(--primary) !important;
}

.fi-topbar-config-item svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--primary-container) !important;
    flex-shrink: 0 !important;
}

.fi-topbar-config-enter {
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.fi-topbar-config-enter-start {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
}

.fi-topbar-config-enter-end {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ── Skote-style Welcome Banner widget ─────────── */
.skote-welcome-card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-soft) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.skote-welcome-card__top {
    display: flex !important;
    align-items: stretch !important;
    background: linear-gradient(135deg, #dde1ff 0%, #b9c3ff 100%) !important;
    padding: 22px 24px !important;
    gap: 12px !important;
}

.skote-welcome-card__top-text {
    flex: 1 !important;
}

.skote-welcome-card__greeting {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #536cdd !important;
    margin: 0 0 4px 0 !important;
}

.skote-welcome-card__subtitle {
    font-size: 0.875rem !important;
    color: #536cdd !important;
    margin: 0 !important;
}

.skote-welcome-card__illustration {
    width: 130px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
}

.skote-welcome-card__illustration svg {
    width: 100% !important;
    height: auto !important;
}

.skote-welcome-card__body {
    padding: 0 24px 24px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 32px !important;
}

.skote-welcome-card__left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: -36px !important;
    width: 140px !important;
}

.skote-welcome-card__avatar-circle {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #536cdd, #3d85c6) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 12px !important;
}

.skote-welcome-card__name-block {
    text-align: left !important;
}

.skote-welcome-card__name {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 !important;
}

.skote-welcome-card__role {
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    margin: 4px 0 0 0 !important;
}

.skote-welcome-card__right {
    flex: 1 !important;
    padding-top: 16px !important;
}

.skote-welcome-card__stats {
    display: flex !important;
    gap: 40px !important;
    margin-bottom: 20px !important;
}

.skote-welcome-card__stat-value {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 !important;
}

.skote-welcome-card__stat-label {
    font-size: 0.78rem !important;
    color: #6b7280 !important;
    margin: 4px 0 0 0 !important;
}

.skote-welcome-card__cta-wrap {
    display: flex !important;
    justify-content: flex-start !important;
}

.skote-welcome-card__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #536cdd !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
}

.skote-welcome-card__cta:hover {
    background-color: #3852c2 !important;
    color: #ffffff !important;
}

/* ── MIL VDN Dashboard Widget ────────────────── */
.mvdn-dash {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.mvdn-dash__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0.5rem !important;
}

.mvdn-dash__title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 !important;
}

.mvdn-dash__subtitle {
    font-size: 0.82rem !important;
    color: #6b7280 !important;
    margin: 0 0 0.6rem 0 !important;
}

.mvdn-metrics {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 0.85rem !important;
}

.mvdn-metric {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 9999px !important;
    padding: 5px 14px !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.mvdn-metric__label {
    font-size: 0.7rem !important;
    color: #6b7280 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.mvdn-metric__value {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.mvdn-metric__value--active { color: #1d9e75 !important; }
.mvdn-metric__value--blocked { color: #d85a30 !important; }

.mvdn-metric__timestamp {
    margin-left: auto !important;
    align-self: center !important;
    font-size: 0.72rem !important;
    color: #6b7280 !important;
}

/* ── Compact stat cards (new visual) ───────────────
   Icon + value/label layout. Each modifier sets its own accent color
   for the icon background and the value text. */
.mvdn-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 1rem !important;
}

.mvdn-stat {
    --stat-accent: #536cdd;
    --stat-accent-soft: rgba(83, 108, 221, 0.12);
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 1rem !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.mvdn-stat:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06) !important;
}

.mvdn-stat__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 0.75rem !important;
    background: var(--stat-accent-soft) !important;
    color: var(--stat-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mvdn-stat__body {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
}

.mvdn-stat__value {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}

.mvdn-stat__label {
    font-size: 0.72rem !important;
    color: #6b7280 !important;
    margin: 2px 0 0 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.mvdn-stat--vessels {
    --stat-accent: #536cdd;
    --stat-accent-soft: rgba(83, 108, 221, 0.12);
}

.mvdn-stat--active {
    --stat-accent: #1d9e75;
    --stat-accent-soft: rgba(29, 158, 117, 0.14);
}

.mvdn-stat--active .mvdn-stat__value {
    color: #1d9e75 !important;
}

.mvdn-stat--blocked {
    --stat-accent: #d85a30;
    --stat-accent-soft: rgba(216, 90, 48, 0.14);
}

.mvdn-stat--blocked .mvdn-stat__value {
    color: #d85a30 !important;
}

.mvdn-stat--port-calls {
    --stat-accent: #8b5cf6;
    --stat-accent-soft: rgba(139, 92, 246, 0.14);
}

@media (max-width: 1024px) {
    .mvdn-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .mvdn-stats {
        grid-template-columns: 1fr !important;
    }
}

/* ── Bulk-actions bar (Filament-style) ────────── */
.mvdn-bulkbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 0.85rem !important;
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 0.9rem !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.mvdn-bulkbar__right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 0.82rem !important;
    flex-wrap: wrap !important;
}

.mvdn-bulkbar__count {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.mvdn-bulkbar__count--muted {
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.mvdn-bulkbar__link {
    background: none !important;
    border: none !important;
    color: #536cdd !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    padding: 0 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.mvdn-bulkbar__link:hover {
    text-decoration: underline !important;
}

.mvdn-bulkbar__link--danger {
    color: #dc2626 !important;
}

/* Dropdown trigger */
.mvdn-bulk-dd {
    position: relative !important;
}

.mvdn-bulk-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    border-radius: 0.5rem !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.mvdn-bulk-trigger:hover {
    border-color: #c7d2fe !important;
    box-shadow: 0 2px 6px rgba(83, 108, 221, 0.10) !important;
}

.mvdn-bulk-trigger--active {
    border-color: #536cdd !important;
    color: #3852c2 !important;
}

/* Menu */
.mvdn-bulk-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    min-width: 200px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.6rem !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12) !important;
    padding: 4px !important;
    z-index: 30 !important;
}

.mvdn-bulk-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 0.4rem !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.mvdn-bulk-item:hover {
    background: rgba(83, 108, 221, 0.08) !important;
    color: #3852c2 !important;
}

.mvdn-bulk-item__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 0.4rem !important;
}

.mvdn-bulk-item__icon--excel {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
}

.mvdn-bulk-item__icon--pdf {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}

/* Select column on the MVDN table — the actual checkbox styling comes
   from Filament's native `.fi-checkbox-input` class (added inline on the
   input) so it matches every other table in the app. */
/* `.mvdn-table td.mvdn-col-select` (specificity 0,2,1) is required to beat
   `.mvdn-table td { vertical-align: middle !important }` (0,1,1) — a plain
   `.mvdn-col-select` (0,1,0) loses even with !important. Top-align + matching
   padding-top so the checkbox sits next to the vessel name in the rowspanned
   group, not centred in it. */
.mvdn-table td.mvdn-col-select {
    width: 42px !important;
    text-align: center !important;
    vertical-align: top !important;
    padding: 14px 4px 6px 4px !important;
}

.mvdn-table th.mvdn-col-select {
    width: 42px !important;
    text-align: center !important;
}

.mvdn-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 1.5rem !important;
    /* Allow the wide 7-column table to scroll horizontally on narrow
       viewports instead of being clipped. The wrap auto-sizes to its
       content vertically, so no vertical scrollbar appears in practice. */
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: var(--shadow-soft) !important;
}

.mvdn-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.82rem !important;
    table-layout: fixed !important;
}

.mvdn-table thead tr {
    background-color: #3852c2 !important;
}

.mvdn-table th {
    text-align: left !important;
    padding: 10px 14px !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid #2f47a8 !important;
    white-space: nowrap !important;
}

/* Header checkbox stays visible on the blue header. */
.mvdn-table thead th.mvdn-col-select input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.mvdn-table thead tr th:first-child {
    border-top-left-radius: 0.5rem !important;
}
.mvdn-table thead tr th:last-child {
    border-top-right-radius: 0.5rem !important;
}

.mvdn-table td {
    padding: 10px 14px !important;
    color: #1f2937 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.mvdn-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Highlight the divider row where a new vessel/VDN starts. The two-pixel
   slate border plus the breathing room above the cell makes the boundary
   between one vessel's VDN block and the next obvious at a glance. */
.mvdn-row--vessel-start td {
    border-top: 2px solid #94a3b8 !important;
    padding-top: 14px !important;
}

.mvdn-table tbody tr:first-child.mvdn-row--vessel-start td {
    border-top: none !important;
    padding-top: 8px !important;
}

.mvdn-cell-vessel {
    font-weight: 600 !important;
    background-color: #f8fafc !important;
}

/* Rowspanned vessel + voyage cells — align to TOP of their group, not centred.
   Higher-specificity selector beats `.mvdn-table td { vertical-align: middle }`. */
.mvdn-table td.mvdn-cell-vessel,
.mvdn-table td.mvdn-col-vessel,
.mvdn-table td.mvdn-col-voyage[rowspan] {
    vertical-align: top !important;
    padding-top: 14px !important;
}

/* ── ViewRecord pages — make disabled/readonly field values dark (not placeholder-gray) ── */
.fi-resource-view-record-page .fi-input,
.fi-resource-view-record-page input[disabled],
.fi-resource-view-record-page input[readonly],
.fi-resource-view-record-page textarea[disabled],
.fi-resource-view-record-page textarea[readonly],
.fi-resource-view-record-page select[disabled],
.fi-resource-view-record-page .fi-input-wrp input,
.fi-resource-view-record-page .fi-fo-text-input input,
.fi-resource-view-record-page .fi-fo-textarea textarea,
.fi-resource-view-record-page .fi-fo-date-time-picker input {
    color: #1f2937 !important;           /* Tailwind gray-800 — clearly darker than placeholders */
    -webkit-text-fill-color: #1f2937 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* Labels above each field should stay a touch lighter than values to keep the hierarchy clear */
.fi-resource-view-record-page .fi-fo-field-wrp-label,
.fi-resource-view-record-page label {
    color: #4b5563 !important;           /* gray-600 */
    font-weight: 600 !important;
}

.mvdn-col-vessel { width: 16% !important; }
.mvdn-col-voyage { width: 7% !important; text-align: center !important; }
.mvdn-col-vdn { width: 11% !important; text-align: center !important; }
.mvdn-col-status { width: 11% !important; text-align: center !important; }
.mvdn-col-poepod { width: 9% !important; text-align: center !important; }
.mvdn-col-port-code { width: 9% !important; }
.mvdn-col-port { width: 22% !important; }
.mvdn-col-eta { width: 15% !important; }

/* Header cells default to left-align (.mvdn-table th rule above with
   !important) — for centered columns, override on the header explicitly
   so the column header lines up with its body content. */
.mvdn-table th.mvdn-col-voyage,
.mvdn-table th.mvdn-col-vdn,
.mvdn-table th.mvdn-col-status,
.mvdn-table th.mvdn-col-poepod {
    text-align: center !important;
}

.mvdn-port-code {
    font-family: ui-monospace, 'SF Mono', monospace !important;
    font-size: 0.78rem !important;
    color: #6b7280 !important;
}

.mvdn-port-name {
    color: #1f2937 !important;
}

.mvdn-muted { color: #9ca3af !important; }

.mvdn-voyage-pill {
    display: inline-block !important;
    background-color: #faeeda !important;
    color: #633806 !important;
    padding: 2px 9px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

.mvdn-vdn-pill {
    display: inline-block !important;
    background-color: #faeeda !important;
    color: #633806 !important;
    padding: 2px 9px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    font-family: ui-monospace, 'SF Mono', monospace !important;
}

.mvdn-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
}

.mvdn-badge::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    background-color: currentColor !important;
}

.mvdn-badge--active {
    background-color: #e1f5ee !important;
    color: #0f6e56 !important;
}

.mvdn-badge--full {
    background-color: #ede9fe !important;
    color: #6d28d9 !important;
}

.mvdn-badge--blocked {
    background-color: #faece7 !important;
    color: #993c1d !important;
}

.mvdn-badge--msc {
    background-color: #e6f1fb !important;
    color: #185fa5 !important;
}

.mvdn-badge--omitted {
    background-color: #f1efe8 !important;
    color: #5f5e5a !important;
}

.mvdn-badge--inactive {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.mvdn-empty {
    text-align: center !important;
    padding: 32px 14px !important;
    color: #6b7280 !important;
    font-size: 0.85rem !important;
}

.mvdn-filters {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
    flex-wrap: wrap !important;
}

.mvdn-filter-search {
    position: relative !important;
    flex: 1 !important;
    min-width: 220px !important;
}

.mvdn-filter-search__icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #6b7280 !important;
    pointer-events: none !important;
}

.mvdn-filter-search__input {
    width: 100% !important;
    padding: 8px 14px 8px 38px !important;
    font-size: 0.85rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.mvdn-filter-search__input:focus {
    outline: none !important;
    border-color: #536cdd !important;
    box-shadow: 0 0 0 3px rgba(85, 110, 230, 0.15) !important;
}

.mvdn-filter-select {
    padding: 8px 30px 8px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
}

.mvdn-filter-select:focus {
    outline: none !important;
    border-color: #536cdd !important;
    box-shadow: 0 0 0 3px rgba(85, 110, 230, 0.15) !important;
}

/* Vessel pill chips — clickable filter row replacing the vessel dropdown */
.mvdn-vessel-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 1rem !important;
}

.mvdn-vessel-pill {
    background: color-mix(in srgb, #536cdd 10%, transparent) !important;
    color: var(--primary) !important;
    border: 1px solid color-mix(in srgb, #536cdd 25%, transparent) !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.mvdn-vessel-pill:hover {
    background: color-mix(in srgb, #536cdd 22%, transparent) !important;
    transform: translateY(-1px) !important;
}

.mvdn-vessel-pill--active {
    background: #536cdd !important;
    color: #ffffff !important;
    border-color: #536cdd !important;
    box-shadow: 0 2px 8px rgba(83, 108, 221, 0.25) !important;
}

.mvdn-vessel-pill--active:hover {
    background: #3852c2 !important;
}

/* ── VNR list: pillify Filament's native tab bar ──
   Scoped to the Vessel Noon Reports list page so other tabs in the app
   (relation managers, etc.) keep their default styling. */
.fi-resource-vessel-position-reports .fi-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.fi-resource-vessel-position-reports .fi-tabs-item {
    background: color-mix(in srgb, #536cdd 10%, transparent) !important;
    color: var(--primary) !important;
    border: 1px solid color-mix(in srgb, #536cdd 25%, transparent) !important;
    border-radius: 9999px !important;
    padding: 6px 16px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    transition: all 0.15s ease !important;
}

.fi-resource-vessel-position-reports .fi-tabs-item:hover {
    background: color-mix(in srgb, #536cdd 22%, transparent) !important;
    transform: translateY(-1px) !important;
}

.fi-resource-vessel-position-reports .fi-tabs-item.fi-active {
    background: #536cdd !important;
    color: #ffffff !important;
    border-color: #536cdd !important;
    box-shadow: 0 2px 8px rgba(83, 108, 221, 0.25) !important;
}

.fi-resource-vessel-position-reports .fi-tabs-item.fi-active:hover {
    background: #3852c2 !important;
}

.fi-resource-vessel-position-reports .fi-tabs-item-label {
    color: inherit !important;
}

.mvdn-link {
    color: #536cdd !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

.mvdn-link:hover {
    text-decoration: underline !important;
}

.mvdn-cell-vessel .mvdn-link {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.mvdn-cell-vessel .mvdn-link:hover {
    color: #536cdd !important;
    text-decoration: none !important;
}

/* Two-line vessel display: NAME on top, M/V smaller and gray below */
.mvdn-vessel-link {
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-decoration: none !important;
    color: inherit !important;
}

.mvdn-vessel-link:hover .mvdn-vessel-name {
    color: #536cdd !important;
}

.mvdn-vessel-name {
    font-weight: 600 !important;
    color: #1f2937 !important;
    font-size: 0.85rem !important;
    line-height: 1.1 !important;
    transition: color 0.15s ease !important;
}

.mvdn-vessel-prefix {
    font-size: 0.7rem !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

/* When a new VDN starts within the same vessel block, draw the same clear
   top border used between vessels so every section break is unmistakable.
   (Previously this was a lighter 1px line, but it washed out against the
   rowspanned vessel/voyage cell backgrounds.) */
.mvdn-row--vdn-start td {
    border-top: 2px solid #94a3b8 !important;
    padding-top: 14px !important;
}

/* ── Knowledge Base chat page ──────────────────── */
.kb-shell {
    /* Fallback accent that matches Lumina primary. Per-module modifiers
       (.kb-shell--lavender / --peach / --mint / --rose / --sky) override
       this so the Ask button, chips, pulse, and user bubble all pick up
       the module's KB color. */
    --kb-accent: #536cdd;
    --kb-accent-strong: #3852c2;
    --kb-accent-on: #ffffff;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    /* Stretch to fill the page height between the title and the footer
       so the chat uses the whole vertical canvas instead of leaving a
       big gap above the thread and below the result cards. */
    min-height: calc(100vh - 160px) !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.kb-shell--lavender {
    --kb-accent: #536cdd;
    --kb-accent-strong: #3852c2;
    --kb-accent-on: #ffffff;
}

.kb-shell--peach {
    --kb-accent: #d97a3f;
    --kb-accent-strong: #b96a3a;
    --kb-accent-on: #ffffff;
}

.kb-shell--mint {
    --kb-accent: #2b8a6a;
    --kb-accent-strong: #1f6b51;
    --kb-accent-on: #ffffff;
}

.kb-shell--rose {
    --kb-accent: #b13d6e;
    --kb-accent-strong: #8a2a53;
    --kb-accent-on: #ffffff;
}

.kb-shell--sky {
    --kb-accent: #1e72b5;
    --kb-accent-strong: #155c93;
    --kb-accent-on: #ffffff;
}

/* Interactive grid pattern that sits behind the chat. Cells highlight
   on hover using the module's accent color — vanilla CSS port of the
   Magic UI "interactive grid pattern" effect. */
.kb-shell {
    position: relative !important;
    isolation: isolate !important;
}

.kb-grid {
    /* Anchored to the viewport, NOT the chat shell, so it covers the
       entire content area (including the side margins) and stays fixed
       behind the conversation while you scroll. */
    position: fixed !important;
    top: var(--topbar-height) !important;
    left: var(--sidebar-width) !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 0 !important;
    transition: left 0.25s ease !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
    grid-auto-rows: 40px !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    /* Soft fade at the top and bottom edges */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%) !important;
            mask-image: linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%) !important;
}

@media (max-width: 1024px) {
    .kb-grid {
        left: 0 !important;
    }
}

.kb-grid__cell {
    border-right: 1px solid color-mix(in srgb, var(--kb-accent) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--kb-accent) 12%, transparent);
    transition: background-color 0.6s ease;
}

.kb-grid__cell:hover {
    background-color: color-mix(in srgb, var(--kb-accent) 30%, transparent);
    transition: background-color 0s;
}

/* Lift the actual chat content above the grid so it stays interactive. */
.kb-greeting,
.kb-thread,
.kb-suggestions,
.kb-composer {
    position: relative !important;
    z-index: 1 !important;
}

.kb-greeting {
    /* Lighter default that blends with the lavender dashboard background.
       Per-module modifiers (.kb-greeting--lavender / --peach / etc.)
       override the gradient + accent color. */
    --kb-accent: #3852c2;
    --kb-on-accent: #1c2353;
    background: linear-gradient(160deg, #f3f3ff 0%, #e3e7ff 100%) !important;
    color: var(--kb-on-accent) !important;
    border-radius: 1.5rem !important;
    padding: 2.25rem 1.75rem 2rem !important;
    text-align: center !important;
    box-shadow: var(--shadow-soft) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Commercial Ports — lavender / periwinkle (distinct from the page background) */
.kb-greeting--lavender {
    --kb-accent: #3852c2;
    --kb-on-accent: #1c2353;
    background: linear-gradient(160deg, #c8d0ff 0%, #9eaaff 100%) !important;
    border-color: rgba(83, 108, 221, 0.25) !important;
}

/* Maritime Terms — warm peach / amber */
.kb-greeting--peach {
    --kb-accent: #b96a3a;
    --kb-on-accent: #5a2e15;
    background: linear-gradient(160deg, #ffd9b8 0%, #ffb787 100%) !important;
    border-color: rgba(185, 106, 58, 0.25) !important;
}

/* Future modules — pre-baked palettes ready to use: */
.kb-greeting--mint {
    --kb-accent: #2b8a6a;
    --kb-on-accent: #134231;
    background: linear-gradient(160deg, #b8efd2 0%, #82dbb1 100%) !important;
    border-color: rgba(43, 138, 106, 0.25) !important;
}

.kb-greeting--rose {
    --kb-accent: #b13d6e;
    --kb-on-accent: #5a1a36;
    background: linear-gradient(160deg, #ffd5e3 0%, #ffb4cc 100%) !important;
    border-color: rgba(177, 61, 110, 0.25) !important;
}

.kb-greeting--sky {
    --kb-accent: #1e72b5;
    --kb-on-accent: #0d3a64;
    background: linear-gradient(160deg, #c2dffd 0%, #8bc5fb 100%) !important;
    border-color: rgba(30, 114, 181, 0.25) !important;
}

.kb-greeting__bot {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 1rem !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border-radius: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.kb-greeting__bot svg {
    width: 44px !important;
    height: 44px !important;
}

.kb-greeting__title {
    color: var(--kb-on-accent) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 0.5rem 0 !important;
}

.kb-greeting__subtitle {
    color: var(--kb-on-accent) !important;
    opacity: 0.78 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.kb-suggestions {
    text-align: center !important;
}

.kb-suggestions__label {
    color: var(--on-secondary-container) !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
    margin: 0 0 0.75rem 0 !important;
}

.kb-suggestions__chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
}

.kb-chip {
    background: color-mix(in srgb, var(--kb-accent) 12%, transparent) !important;
    color: var(--kb-accent-strong) !important;
    border: 1px solid color-mix(in srgb, var(--kb-accent) 30%, transparent) !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.kb-chip:hover {
    background: var(--kb-accent) !important;
    color: var(--kb-accent-on) !important;
    border-color: var(--kb-accent) !important;
    transform: translateY(-1px) !important;
}

.kb-thread {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    overflow-y: auto !important;
    padding: 0.25rem !important;
}

.kb-bubble {
    max-width: 88% !important;
    padding: 12px 16px !important;
    border-radius: 1rem !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
}

.kb-bubble__text {
    margin: 0 !important;
    font-size: 0.9rem !important;
}

/* Blinking cursor while the bot bubble is typing — sells the AI feel */
.kb-bubble--typing [data-bot-text]::after {
    content: '▍' !important;
    display: inline-block !important;
    margin-left: 2px !important;
    color: var(--kb-accent-strong, var(--primary)) !important;
    animation: kb-blink 0.9s steps(2, start) infinite !important;
    transform: translateY(1px) !important;
}

@keyframes kb-blink {
    to { visibility: hidden; }
}

/* New bot bubble slides in from above so the user perceives it appearing
   at the top of the conversation. */
.kb-bubble--bot {
    animation: kb-fade-in 0.25s ease-out !important;
}

@keyframes kb-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kb-bubble--user {
    background: var(--kb-accent) !important;
    color: var(--kb-accent-on) !important;
    align-self: flex-end !important;
    border-bottom-right-radius: 0.25rem !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--kb-accent) 28%, transparent) !important;
}

.kb-bubble--bot {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: var(--on-surface) !important;
    align-self: flex-start !important;
    border-bottom-left-radius: 0.25rem !important;
    box-shadow: var(--shadow-soft) !important;
    width: 100% !important;
    max-width: 100% !important;
}

.kb-results {
    margin-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.kb-result-card {
    display: block !important;
    background: rgba(243, 243, 255, 0.75) !important;
    border: 1px solid var(--outline-variant) !important;
    border-radius: 0.75rem !important;
    padding: 12px 14px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.kb-result-card:hover {
    background: color-mix(in srgb, var(--kb-accent) 10%, rgba(255, 255, 255, 0.85)) !important;
    border-color: color-mix(in srgb, var(--kb-accent) 50%, transparent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--kb-accent) 15%, transparent) !important;
}

.kb-result-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.kb-result-card__name {
    font-weight: 700 !important;
    color: var(--on-surface) !important;
    font-size: 0.92rem !important;
}

.kb-result-card__country {
    background: var(--kb-accent) !important;
    color: var(--kb-accent-on) !important;
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

.kb-result-card__codes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
}

.kb-result-card__chip {
    font-family: ui-monospace, 'SF Mono', monospace !important;
    font-size: 0.7rem !important;
    background: color-mix(in srgb, var(--kb-accent) 12%, transparent) !important;
    color: var(--kb-accent-strong) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.kb-result-card__chip--muted {
    background: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important;
}

.kb-result-card__desc {
    font-size: 0.8rem !important;
    color: var(--on-surface-variant) !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.4 !important;
}

.kb-composer {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 1rem !important;
    padding: 8px !important;
    box-shadow: var(--shadow-soft) !important;
    position: sticky !important;
    bottom: 1rem !important;
}

.kb-composer__field {
    flex: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.kb-composer__icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--on-secondary-container) !important;
    pointer-events: none !important;
}

.kb-composer__input {
    width: 100% !important;
    padding: 12px 44px 12px 40px !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.92rem !important;
    color: var(--on-surface) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    outline: none !important;
}

.kb-composer__input::placeholder {
    color: var(--on-secondary-container) !important;
}

/* "New chat" — same shape/size as the Ask button but a SECONDARY style
   (tinted accent, not solid) so it reads as a sibling action, not the
   primary one. */
.kb-composer__newchat {
    background: color-mix(in srgb, var(--kb-accent) 12%, transparent) !important;
    color: var(--kb-accent-strong) !important;
    border: 1px solid color-mix(in srgb, var(--kb-accent) 28%, transparent) !important;
    border-radius: 0.75rem !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}

.kb-composer__newchat:hover {
    background: color-mix(in srgb, var(--kb-accent) 22%, transparent) !important;
    color: var(--kb-accent-strong) !important;
}

/* No trailing pencil inside the field any more — reclaim the right padding. */
.kb-composer__input {
    padding-right: 14px !important;
}

/* Mobile: stack the input full-width, then the two buttons share a row. */
@media (max-width: 640px) {
    .kb-composer {
        flex-wrap: wrap !important;
    }

    .kb-composer__field {
        flex: 1 1 100% !important;
    }

    .kb-composer__newchat,
    .kb-composer__submit {
        flex: 1 1 0 !important;
    }
}

.kb-composer__submit {
    background: var(--kb-accent) !important;
    color: var(--kb-accent-on) !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--kb-accent) 30%, transparent) !important;
    /* Position context for the pulsing rings */
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
}

/* Subtle pulsating ring — single box-shadow that emanates outward like a ripple.
   No filled background scale-up; the button itself stays untouched and a thin
   outline pulses around it once per cycle. */
.kb-composer__submit::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: -1 !important;
    animation: kb-pulse 2s ease-out infinite !important;
}

/* Pause the pulse on hover so the user feels the hover state clearly */
.kb-composer__submit:hover::before {
    animation-play-state: paused !important;
}

@keyframes kb-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--kb-accent) 45%, transparent);
    }
    100% {
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--kb-accent) 0%, transparent);
    }
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
    .kb-composer__submit::before,
    .kb-composer__submit::after {
        animation: none !important;
        display: none !important;
    }
}

.kb-composer__submit:hover {
    background: var(--kb-accent-strong) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--kb-accent) 40%, transparent) !important;
}

@media (max-width: 640px) {
    .kb-greeting {
        padding: 1.5rem 1.25rem !important;
    }

    .kb-greeting__title {
        font-size: 1.25rem !important;
    }

    .kb-bubble {
        max-width: 95% !important;
    }

    .kb-composer__submit span {
        display: none !important;
    }
}