/* ============================================================================
   Shared module theme — pill tab nav + smart hero header.

   A single, theme-aware look (mirrors the AI Agent module) reused by every
   business module via the shared <EgkModuleNav> and <EgkSmartHeader> components.
   Everything is driven by MudBlazor palette variables + color-mix(), so it
   adapts to light/dark mode and the tenant brand colour automatically.

   The pill nav also opts into the shared single-line scroll strip defined in
   tenant-module.css (the .egk-modnav* classes + tenant-module-nav.js arrows).
   ============================================================================ */

/* ===== Pill tab navigation =============================================== */
.egk-pill-nav {
    position: sticky;
    top: 0;
    z-index: 3;
    isolation: isolate;
    padding: 9px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-divider));
    border-radius: 18px;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--mud-palette-primary) 12%, transparent), transparent 32%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-primary)),
            color-mix(in srgb, var(--mud-palette-surface) 98%, var(--mud-palette-primary)));
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

.egk-pill-nav__inner {
    position: relative;
    padding: 1px;
}

.egk-pill-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 68%, var(--mud-palette-primary));
    font-size: .875rem;
    font-weight: 650;
    line-height: 1;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--mud-palette-surface) 76%, transparent);
    white-space: nowrap;
    transition:
        transform 140ms ease,
        background-color 140ms ease,
        color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
}

.egk-pill-nav__icon {
    opacity: .78;
    transition: opacity 140ms ease, transform 140ms ease;
}

.egk-pill-nav__link:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.egk-pill-nav__link:hover .egk-pill-nav__icon,
.egk-pill-nav__link--active .egk-pill-nav__icon {
    opacity: 1;
    transform: scale(1.04);
}

.egk-pill-nav__link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    outline-offset: 2px;
}

.egk-pill-nav__link--active {
    background: linear-gradient(135deg,
        var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-primary) 76%, var(--mud-palette-success)));
    color: var(--mud-palette-primary-text, #fff);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 84%, var(--mud-palette-primary-text, #fff));
    box-shadow:
        0 9px 20px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.egk-pill-nav__link--active .egk-pill-nav__icon {
    color: var(--mud-palette-primary-text, #fff);
}

/* ----- Dropdown (grouped) tabs ----- */
.egk-pill-nav__menu {
    flex: 0 0 auto;
    display: inline-flex;
}

.egk-pill-nav__menu .egk-pill-nav__link {
    cursor: pointer;
}

.egk-pill-nav__caret {
    opacity: .55;
    margin-left: 1px;
    margin-right: -3px;
    font-size: 1.05rem !important;
    transition: transform 160ms ease, opacity 140ms ease;
}

.egk-pill-nav__link:hover .egk-pill-nav__caret,
.egk-pill-nav__link--active .egk-pill-nav__caret {
    opacity: .9;
}

.egk-pill-nav__caret--open {
    transform: rotate(180deg);
    opacity: .9;
}

.egk-pill-nav__link--active .egk-pill-nav__caret {
    color: var(--mud-palette-primary-text, #fff);
}

.egk-pill-nav__popover {
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-divider));
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16) !important;
    max-height: min(70vh, 540px);
    overflow-y: auto;
}

.egk-pill-nav__popover .mud-list {
    padding: 6px;
    min-width: 232px;
}

/* ----- Grouped sections inside a dropdown ----- */
.egk-pill-nav__section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px 5px;
    margin-top: 4px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mud-palette-text-secondary) 64%, var(--mud-palette-primary));
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-divider));
}

/* The first section in a popover shouldn't carry a top divider. */
.egk-pill-nav__popover .mud-list > .egk-pill-nav__section-label:first-child {
    margin-top: 0;
    border-top: none;
}

.egk-pill-nav__section-icon {
    font-size: 1rem !important;
    opacity: .7;
}

.egk-pill-nav__menu-item {
    border-radius: 9px;
    margin: 1px 0;
    font-size: .85rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 78%, var(--mud-palette-primary));
}

.egk-pill-nav__menu-item:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)) !important;
    color: var(--mud-palette-text-primary);
}

.egk-pill-nav__menu-item .mud-icon-root {
    opacity: .8;
}

.egk-pill-nav__menu-item--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface)) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 700;
}

.egk-pill-nav__menu-item--active .mud-icon-root {
    color: var(--mud-palette-primary);
    opacity: 1;
}

@media (max-width: 960px) {
    .egk-pill-nav {
        border-radius: 14px;
        padding: 7px;
    }

    .egk-pill-nav__link {
        min-height: 34px;
        padding: 8px 12px;
        font-size: .8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .egk-pill-nav__link,
    .egk-pill-nav__icon,
    .egk-pill-nav__caret {
        transition: none;
    }

    .egk-pill-nav__link:hover {
        transform: none;
    }

    .egk-pill-nav__link:hover .egk-pill-nav__icon,
    .egk-pill-nav__link--active .egk-pill-nav__icon {
        transform: none;
    }
}

/* ===== Smart hero header ================================================= */
.egk-smart-header {
    position: relative;
    overflow: hidden;
    border-radius: 20px !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-divider));
    background:
        radial-gradient(130% 130% at 0% 0%,
            color-mix(in srgb, var(--mud-palette-primary) 18%, transparent),
            transparent 48%),
        radial-gradient(120% 120% at 100% 0%,
            color-mix(in srgb, var(--mud-palette-secondary, var(--mud-palette-info)) 12%, transparent),
            transparent 42%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)) 0%,
            var(--mud-palette-surface) 78%);
}

.egk-smart-header__avatar {
    position: relative;
    background: linear-gradient(135deg,
        var(--mud-palette-primary),
        color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-secondary, var(--mud-palette-info))));
    color: var(--mud-palette-primary-text);
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--mud-palette-primary) 36%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .26);
    animation: egk-header-aura 3.6s ease-in-out infinite;
}

@keyframes egk-header-aura {
    0%, 100% {
        box-shadow:
            0 8px 22px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent),
            0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 30%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .26);
    }
    50% {
        box-shadow:
            0 10px 26px color-mix(in srgb, var(--mud-palette-primary) 42%, transparent),
            0 0 0 7px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .26);
    }
}

@media (prefers-reduced-motion: reduce) {
    .egk-smart-header__avatar { animation: none; }
}

.egk-smart-header__kicker {
    color: var(--mud-palette-primary);
    letter-spacing: 0.08em;
    font-weight: 700;
}

.egk-smart-header__title {
    font-weight: 760;
    letter-spacing: -.015em;
}

.egk-smart-header__subtitle {
    max-width: 760px;
}

.egk-smart-header__panel {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

/* Chips / secondary actions read against the tinted hero on light + dark. */
.egk-smart-header__chip {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface)) !important;
    color: var(--mud-palette-primary) !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.egk-smart-header__chip--outline {
    color: var(--mud-palette-primary) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 32%, transparent) !important;
}

.egk-smart-header__secondary-action {
    color: var(--mud-palette-primary) !important;
    border-color: color-mix(in srgb, var(--mud-palette-primary) 32%, transparent) !important;
}

.egk-min-width-0 {
    min-width: 0;
}