@import '_content/EGKitsComponents/EGKitsComponents.0hx0sd8vz3.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
/* EGKits Showcase Layout - Scoped Styles */
/* Note: Primary layout/appbar/brand/footer styles are in the inline <style> block */

/* Layout Variant Overrides (::deep for MudBlazor internals) */
.showcase-layout-wrapper.compact-mode[b-18g97f7vvg]  .mud-button {
    min-height: 32px !important;
    padding: 0.25rem 0.5rem !important;
}

.showcase-layout-wrapper.high-contrast[b-18g97f7vvg] {
    filter: contrast(1.5);
}

.showcase-layout-wrapper.high-contrast[b-18g97f7vvg]  .mud-button {
    border: 2px solid currentcolor !important;
    font-weight: 600 !important;
}

.showcase-layout-wrapper.reduced-motion[b-18g97f7vvg]  .showcase-logo-button:hover {
    transform: none !important;
}

/* Accessibility Focus States */
[b-18g97f7vvg] .showcase-logo-button:focus {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Print Styles */
@media print {
    [b-18g97f7vvg] .showcase-appbar,
    .action-item[b-18g97f7vvg] {
        display: none !important;
    }
}
/* /Shared/Header.razor.rz.scp.css */
/* EGKitsPublic Header component styles (scoped via Blazor CSS isolation) */

.header-nav[b-svmg8mh7jz] { display: flex; align-items: center; gap: 12px;
 width: 100%; min-width: 0; }

.header-nav__desktop[b-svmg8mh7jz] { display: flex; align-items: center; gap: 4px;
 flex: 1 1 auto; min-width: 0; }

.header-nav__button[b-svmg8mh7jz] { margin: 0 4px; padding: 8px 16px;
 border-radius: 8px;
 color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease; text-transform: none; font-weight: 500; white-space: nowrap; }
.header-nav__button:hover[b-svmg8mh7jz] { color: white; background-color: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.header-nav__button--active[b-svmg8mh7jz] { color: white !important; background-color: rgba(255, 255, 255, 0.15); font-weight: 600; position: relative; }
.header-nav__button--active[b-svmg8mh7jz]::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: white; border-radius: 1px; }
.header-nav__button--active:hover[b-svmg8mh7jz] { background-color: rgba(255, 255, 255, 0.22); }
.header-nav__button--signup[b-svmg8mh7jz] { border: 1px solid rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.15); }
.header-nav__button--signup:hover[b-svmg8mh7jz] { background-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); }

.header-nav__actions[b-svmg8mh7jz], .header-nav__compact[b-svmg8mh7jz] { flex-shrink: 0; gap: 8px; }

.header-nav__menu-button[b-svmg8mh7jz], .header-nav__compact-cta[b-svmg8mh7jz] { color: rgba(255, 255, 255, 0.95); }

/* NOTE: .header-nav__dropdown, .header-nav__item, and .header-nav__popover .mud-popover-paper
   styles are in the global <style> block in Header.razor because MudMenu popovers
   render outside this component's DOM (Blazor CSS isolation won't reach them). */

/* Action Buttons */
.header-nav__action-btn[b-svmg8mh7jz] { padding: 8px 16px;
 transition: all 0.3s ease; font-weight: 600; text-transform: none; white-space: nowrap; }
.header-nav__action-btn:hover[b-svmg8mh7jz] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); transform: translateY(-2px); }

.header-nav__action-btn--secondary[b-svmg8mh7jz] { color: rgba(255, 255, 255, 0.95); }

/* Mobile Drawer Enhancements */
.header-nav__backdrop[b-svmg8mh7jz] { position: fixed; inset: 0;
 background: rgba(15, 23, 42, 0.12);
 backdrop-filter: blur(3px);
 z-index: 1995; }

.header-nav__panel[b-svmg8mh7jz] { position: fixed; top: 0; right: 0; bottom: 0;
 width: min(92vw, 390px); max-width: 100vw;
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97));
 border-left: 1px solid rgba(255, 255, 255, 0.35);
 box-shadow: -16px 0 40px rgba(15, 23, 42, 0.16);
 z-index: 2000;
 height: 100dvh;
 overflow: hidden;
 animation: header-nav-panel-in-b-svmg8mh7jz 0.2s ease-out;
 display: flex;
 flex-direction: column;
 overscroll-behavior: contain; }

.header-nav__drawer-content[b-svmg8mh7jz] { flex: 1 1 auto;
 background: transparent; overflow-y: auto;
 padding-top: max(16px, env(safe-area-inset-top));
 padding-bottom: max(16px, env(safe-area-inset-bottom)); }

.header-nav__summary[b-svmg8mh7jz] { border-radius: 16px;
 background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.1), rgba(var(--mud-palette-secondary-rgb), 0.08));
 border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.12); }

.mobile-menu-header[b-svmg8mh7jz] { position: sticky; top: 0; z-index: 1;
 background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(248, 250, 252, 0.88));
 backdrop-filter: blur(8px); }

.header-nav__settings[b-svmg8mh7jz] { border-radius: 12px;
 background: rgba(255, 255, 255, 0.72);
 border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.08); }

.header-nav__nav-item[b-svmg8mh7jz] { margin: 4px 0;
 border-radius: 8px;
 transition: all 0.2s ease; }
.header-nav__nav-item:hover[b-svmg8mh7jz] { background-color: var(--mud-palette-action-hover); transform: translateX(4px); }

.mobile-actions[b-svmg8mh7jz] { padding: 16px; border-radius: 16px;
 background: rgba(var(--mud-palette-primary-rgb), 0.04);
 border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.08); }

/* Responsive Design */
@media (width <= 1536px) { .header-nav__button[b-svmg8mh7jz] { padding: 8px 12px; } }
@media (width <= 1280px) { .header-nav__action-btn[b-svmg8mh7jz] { padding: 8px 14px; } }
@media (width <= 1200px) { .header-nav__desktop[b-svmg8mh7jz] { display: none; } }
@media (width <= 900px) { .header-nav__compact-cta[b-svmg8mh7jz] { display: none !important; } }
@media (width <= 768px) { .header-nav__button[b-svmg8mh7jz] { margin: 0 2px; padding: 6px 12px; } .header-nav[b-svmg8mh7jz] { gap: 8px; } .header-nav__panel[b-svmg8mh7jz] { width: min(100vw, 360px); } .header-nav__drawer-content[b-svmg8mh7jz] { padding-left: 16px !important; padding-right: 16px !important; } }

/* Dark Mode Support (dropdown/item dark overrides are in the global <style> block in Header.razor) */
.mud-theme-dark .header-nav__settings[b-svmg8mh7jz] { background: var(--mud-palette-dark-surface); }
.mud-theme-dark .header-nav__backdrop[b-svmg8mh7jz] { background: rgba(2, 6, 23, 0.18); }
.mud-theme-dark .header-nav__panel[b-svmg8mh7jz] { background: linear-gradient(180deg, rgba(21, 28, 41, 0.98), rgba(17, 24, 39, 0.96));
 border-left-color: rgba(255, 255, 255, 0.08);
 box-shadow: -16px 0 40px rgba(0, 0, 0, 0.32); }
.mud-theme-dark .header-nav__summary[b-svmg8mh7jz] { background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.16), rgba(255, 255, 255, 0.04));
 border-color: rgba(255, 255, 255, 0.08); }
.mud-theme-dark .mobile-menu-header[b-svmg8mh7jz] { background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(17, 24, 39, 0.88)); }
.mud-theme-dark .mobile-actions[b-svmg8mh7jz] { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }

/* RTL Support (popover item RTL override is in the global <style> block in Header.razor) */
[dir="rtl"] .header-nav__nav-item:hover[b-svmg8mh7jz] { transform: translateX(-4px); }
[dir="rtl"] .header-nav__button--active[b-svmg8mh7jz]::after { left: auto; right: 50%; transform: translateX(50%); }
[dir="rtl"] .header-nav__panel[b-svmg8mh7jz] { left: 0; right: auto; border-left: none; border-right: 1px solid rgba(255, 255, 255, 0.35);
 box-shadow: 16px 0 40px rgba(15, 23, 42, 0.16); }
[dir="rtl"] .mud-theme-dark .header-nav__panel[b-svmg8mh7jz] { border-right-color: rgba(255, 255, 255, 0.08); box-shadow: 16px 0 40px rgba(0, 0, 0, 0.32); }

/* Accessibility: ensure visible focus ring */
.header-nav__button:focus-visible[b-svmg8mh7jz],
.header-nav__button--active:focus-visible[b-svmg8mh7jz],
.header-nav__item:focus-visible[b-svmg8mh7jz],
.header-nav__nav-item:focus-visible[b-svmg8mh7jz],
.header-nav__action-btn:focus-visible[b-svmg8mh7jz],
.header-nav__menu-button:focus-visible[b-svmg8mh7jz] {
  outline: 2px solid var(--mud-palette-secondary);
  outline-offset: 2px;
}

/* Animation Enhancements */
.header-nav__item[b-svmg8mh7jz], .header-nav__nav-item[b-svmg8mh7jz] { position: relative;
 overflow: hidden; }

.header-nav__item[b-svmg8mh7jz]::before, .header-nav__nav-item[b-svmg8mh7jz]::before { content: ''; position: absolute; top: 0; left: -100%;
 width: 100%; height: 100%;
 background: linear-gradient(90deg, transparent, rgba(var(--mud-palette-primary-rgb), 0.1), transparent);
 transition: left 0.5s; }
.header-nav__item:hover[b-svmg8mh7jz]::before, .header-nav__nav-item:hover[b-svmg8mh7jz]::before { left: 100%; }

@keyframes header-nav-panel-in-b-svmg8mh7jz {
 from { opacity: 0; transform: translateX(16px); }
 to { opacity: 1; transform: translateX(0); }
}

/* RTL: slide panel in from the opposite direction */
[dir="rtl"] .header-nav__panel[b-svmg8mh7jz] { animation-name: header-nav-panel-in-rtl-b-svmg8mh7jz; }
@keyframes header-nav-panel-in-rtl-b-svmg8mh7jz {
 from { opacity: 0; transform: translateX(-16px); }
 to { opacity: 1; transform: translateX(0); }
}