/* ============================================================
   NexKyn — Nordic Calm Design System
   Version 2.0 — CSS Custom Properties & Global Styles
   ============================================================ */

:root {
    /* Primary Colors */
    --nk-slate: #2C3E50;
    --nk-dusty-rose: #C27C7C;
    --nk-ice-blue: #9AB5C7;
    --nk-snow: #F5F1ED;

    /* Secondary Colors */
    --nk-birch: #DDD5CB;
    --nk-graphite: #333333;
    --nk-oak: #A68B5B;
    --nk-pale-blue: #DCE8EF;

    /* Semantic Colors */
    --nk-success: #3DAD6E;
    --nk-error: #C0392B;
    --nk-warning: #E09B4A;
    --nk-info: #4A90C4;

    /* Semantic "soft" tier — ~15% tints for pill/badge backgrounds. Pair with the
       primary tier for foreground text to keep 4.5:1 contrast. */
    --nk-success-soft: #D8EFE2;
    --nk-error-soft: #F2D4CF;
    --nk-warning-soft: #F9E6D1;
    --nk-info-soft: #D9E7F2;

    /* Spacing (4px base grid) */
    --nk-space-2xs: 4px;
    --nk-space-xs: 8px;
    --nk-space-sm: 12px;
    --nk-space-md: 16px;
    --nk-space-lg: 24px;
    --nk-space-xl: 32px;
    --nk-space-2xl: 48px;
    --nk-space-3xl: 64px;

    /* Border Radius */
    --nk-radius-sm: 8px;
    --nk-radius-md: 10px;
    --nk-radius-lg: 16px;
    --nk-radius-pill: 9999px;

    /* Shadows */
    --nk-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
    --nk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --nk-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* Motion */
    --nk-duration-instant: 100ms;
    --nk-duration-quick: 200ms;
    --nk-duration-moderate: 300ms;
    --nk-duration-slow: 500ms;
    --nk-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --nk-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
    --nk-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
    --nk-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Global Resets ---- */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Lora editorial class ---- */
.font-editorial {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

/* ---- Section Utilities ---- */
.nk-section {
    padding: var(--nk-space-2xl) var(--nk-space-md);
}

@media (max-width: 959px) {
    .nk-section {
        padding: var(--nk-space-sm) var(--nk-space-sm);
    }
}

.nk-section-snow {
    background-color: var(--nk-snow);
}

.nk-section-white {
    background-color: #FFFFFF;
}

.nk-section-slate {
    background-color: var(--nk-slate);
    color: #FFFFFF;
}

.nk-section-pale {
    background-color: var(--nk-pale-blue);
}

/* ---- Card Styles ---- */
.nk-card {
    background: #FFFFFF;
    border-radius: var(--nk-radius-lg);
    box-shadow: var(--nk-shadow-md);
    padding: var(--nk-space-lg);
    border: 1px solid #E5E7EB;
    transition: box-shadow var(--nk-duration-quick) var(--nk-ease-out),
                transform var(--nk-duration-quick) var(--nk-ease-out);
    color: var(--nk-graphite);
}

.nk-card:hover {
    box-shadow: var(--nk-shadow-lg);
    transform: translateY(-2px);
}

/* Card text contrast helper */
.nk-card .nk-text-secondary {
    color: #4B5563;
}

/* ---- Button Overrides ---- */
.nk-btn-primary {
    background-color: var(--nk-dusty-rose) !important;
    color: #FFFFFF !important;
    border-radius: var(--nk-radius-md) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    min-height: 48px;
    transition: background-color var(--nk-duration-instant) var(--nk-ease-out);
}

.nk-btn-primary:hover {
    background-color: #B56E6E !important;
}

.nk-btn-secondary {
    background-color: transparent !important;
    color: var(--nk-slate) !important;
    border: 1.5px solid var(--nk-slate) !important;
    border-radius: var(--nk-radius-md) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    min-height: 48px;
    transition: background-color var(--nk-duration-instant) var(--nk-ease-out);
}

.nk-btn-secondary:hover {
    background-color: rgba(44, 62, 80, 0.06) !important;
}

.nk-btn-ice {
    background-color: var(--nk-ice-blue) !important;
    color: var(--nk-slate) !important;
    border-radius: var(--nk-radius-md) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    min-height: 48px;
}

/* ---- Badge / Pill ---- */
.nk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--nk-radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.nk-badge-ice {
    background: var(--nk-pale-blue);
    color: var(--nk-slate);
}

.nk-badge-rose {
    background: #F3E0E0;
    color: #9B5555;
}

.nk-badge-oak {
    background: #F0E8DA;
    color: var(--nk-oak);
}

/* ---- Hero Section ---- */
.nk-hero {
    position: relative;
    overflow: hidden;
    padding: var(--nk-space-3xl) var(--nk-space-md);
    text-align: center;
}

.nk-hero-gradient {
    background: linear-gradient(160deg, var(--nk-snow) 0%, var(--nk-pale-blue) 50%, #E8D5D5 100%);
}

/* ---- Feature Grid ---- */
.nk-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--nk-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--nk-space-md);
    font-size: 24px;
}

.nk-feature-icon-rose {
    background: #F3E0E0;
    color: var(--nk-dusty-rose);
}

.nk-feature-icon-ice {
    background: var(--nk-pale-blue);
    color: #5A8BA8;
}

.nk-feature-icon-oak {
    background: #F0E8DA;
    color: var(--nk-oak);
}

.nk-feature-icon-slate {
    background: #D5DCE2;
    color: var(--nk-slate);
}

/* ---- Step Indicators ---- */
.nk-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--nk-dusty-rose);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

/* ---- Testimonial / Quote ---- */
.nk-quote {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--nk-slate);
    position: relative;
    padding-left: var(--nk-space-lg);
    border-left: 3px solid var(--nk-dusty-rose);
}

/* ---- Footer ---- */
.nk-footer {
    background: #1E2A38;
    color: #FFFFFF;
    padding: var(--nk-space-3xl) var(--nk-space-md) var(--nk-space-lg);
}

/* Hide footer on mobile — bottom nav handles navigation */
@media (max-width: 959px) {
    .nk-footer {
        display: none;
    }
}

.nk-footer a,
.nk-footer .mud-link {
    color: #B0B8C4 !important;
    text-decoration: none;
    transition: color var(--nk-duration-instant) var(--nk-ease-out);
    font-size: 13px;
}

.nk-footer a:hover,
.nk-footer .mud-link:hover {
    color: #FFFFFF !important;
}

.nk-footer-heading {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    text-transform: none;
}

.nk-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.nk-footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B0B8C4 !important;
    transition: background var(--nk-duration-instant) var(--nk-ease-out), color var(--nk-duration-instant) var(--nk-ease-out);
}

.nk-footer-social a:hover {
    background: rgba(255,255,255,0.16);
    color: #FFFFFF !important;
}

.nk-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
    margin-top: 32px;
}

/* ---- Bottom Nav Overrides ---- */
.nk-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

/* Hide bottom nav on desktop */
@media (min-width: 960px) {
    .nk-bottom-nav {
        display: none;
    }
}

.nk-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 2px var(--nk-space-sm);
    color: #6B7280;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--nk-duration-instant) var(--nk-ease-out);
    -webkit-tap-highlight-color: transparent;
    min-width: 56px;
}

.nk-bottom-nav-item.active {
    color: var(--nk-dusty-rose);
}

.nk-bottom-nav-item i {
    font-size: 24px;
}

/* ---- Divider with text ---- */
.nk-divider-text {
    display: flex;
    align-items: center;
    gap: var(--nk-space-md);
    color: #6B7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nk-divider-text::before,
.nk-divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

/* ---- Page content spacing for bottom nav ---- */
.nk-page-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 960px) {
    .nk-page-content {
        padding-bottom: 0;
    }
}

/* ---- Animations ---- */
@keyframes nk-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nk-animate-in {
    animation: nk-fade-in-up var(--nk-duration-moderate) var(--nk-ease-out) both;
}

.nk-animate-in-delay-1 { animation-delay: 100ms; }
.nk-animate-in-delay-2 { animation-delay: 200ms; }
.nk-animate-in-delay-3 { animation-delay: 300ms; }
.nk-animate-in-delay-4 { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .nk-animate-in,
    .nk-animate-in-delay-1,
    .nk-animate-in-delay-2,
    .nk-animate-in-delay-3,
    .nk-animate-in-delay-4 {
        animation: none !important;
    }
    .nk-card:hover {
        transform: none;
    }
}

/* ---- Dark Mode Overrides ---- */

/* -- MudDatePicker: minimalistic styling -- */
.mud-picker-calendar-header {
    padding: 8px 16px !important;
}

.mud-picker-calendar-header-switch {
    margin: 0 !important;
}

.mud-picker-toolbar {
    padding: 8px 16px !important;
    min-height: unset !important;
    height: auto !important;
}

.mud-picker-toolbar .mud-typography {
    font-size: 1rem !important;
}

.mud-picker-toolbar .mud-button-label {
    font-size: 0.85rem !important;
}

/* Compact year list */
.mud-picker-year-container {
    max-height: 240px !important;
}

.mud-picker-year {
    font-size: 14px !important;
    height: 36px !important;
}

/* -- Mobile drawer: fix content alignment and safe areas -- */
.mud-drawer-content {
    justify-content: flex-start !important;
}

@supports (-webkit-touch-callout: none) {
    .mud-drawer {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* -- MAUI BlazorWebView: iOS safe area handling -- */
/* The status-bar-safe-area div (in index.html) fills the notch/Dynamic Island.
   On non-iOS platforms it stays hidden (display:none). */
.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #FFFFFF;
        width: 100%;
        z-index: 1300;
    }

    .mud-theme-dark .status-bar-safe-area {
        background-color: #1E2530;
    }
}

/* Make MudAppBar sticky so it stays below the safe area div */
.mud-appbar.mud-appbar-fixed-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
}

/* -- Global dark mode body/layout -- */
.mud-theme-dark {
    background-color: #1C2028;
    color: #EDE9E4;
}
.mud-theme-dark .mud-main-content {
    background-color: #1C2028;
}
.mud-theme-dark .mud-appbar {
    background-color: #1E2530 !important;
    color: #EDE9E4 !important;
}
.mud-theme-dark .mud-typography {
    color: inherit;
}
.mud-theme-dark .mud-typography-h1,
.mud-theme-dark .mud-typography-h2,
.mud-theme-dark .mud-typography-h3,
.mud-theme-dark .mud-typography-h4,
.mud-theme-dark .mud-typography-h5,
.mud-theme-dark .mud-typography-h6 {
    color: #EDE9E4;
}
.mud-theme-dark .mud-typography-body1,
.mud-theme-dark .mud-typography-body2 {
    color: #D1D5DB;
}
.mud-theme-dark .mud-typography-caption {
    color: #9CA3AF;
}
.mud-theme-dark .mud-typography-overline {
    color: #8B95A3;
}
/* MudButton text inherit in dark mode */
.mud-theme-dark .mud-button-text {
    color: #EDE9E4 !important;
}

/* -- NexKyn custom components -- */
.mud-theme-dark .nk-card {
    background: #2E3440;
    border-color: #3B4252;
    color: #EDE9E4;
}
.mud-theme-dark .nk-card .nk-text-secondary,
.mud-theme-dark .nk-text-secondary {
    color: #B0B8C4;
}
.mud-theme-dark .nk-bottom-nav {
    background: #262C36;
    border-color: #3B4252;
}
.mud-theme-dark .nk-bottom-nav-item {
    color: #9CA3AF;
}
.mud-theme-dark .nk-bottom-nav-item.active {
    color: #CC8E8E;
}
.mud-theme-dark .nk-hero-gradient {
    background: linear-gradient(160deg, #1C2028 0%, #262C36 50%, #2E3440 100%);
}
.mud-theme-dark .nk-section-snow {
    background-color: #1C2028;
}
.mud-theme-dark .nk-section-white {
    background-color: #262C36;
}
.mud-theme-dark .nk-section-pale {
    background-color: #1E2530;
}
.mud-theme-dark .nk-footer {
    background: #141820;
}
.mud-theme-dark .nk-step-number {
    background: #CC8E8E;
}
.mud-theme-dark .nk-quote {
    color: #EDE9E4;
    border-left-color: #CC8E8E;
}
.mud-theme-dark .nk-badge-ice {
    background: rgba(154,181,199,0.15);
    color: #9AB5C7;
}
.mud-theme-dark .nk-badge-rose {
    background: rgba(194,124,124,0.15);
    color: #CC8E8E;
}
.mud-theme-dark .nk-badge-oak {
    background: rgba(166,139,91,0.15);
    color: #C4A872;
}
.mud-theme-dark .nk-btn-secondary {
    color: #EDE9E4 !important;
    border-color: #EDE9E4 !important;
}
.mud-theme-dark .nk-btn-secondary:hover {
    background-color: rgba(237,233,228,0.08) !important;
}
.mud-theme-dark .nk-divider-text {
    color: #9CA3AF;
}
.mud-theme-dark .nk-divider-text::before,
.mud-theme-dark .nk-divider-text::after {
    background: #3B4252;
}
.mud-theme-dark .nk-feature-icon-rose {
    background: rgba(194,124,124,0.15);
    color: #CC8E8E;
}
.mud-theme-dark .nk-feature-icon-ice {
    background: rgba(154,181,199,0.15);
    color: #9AB5C7;
}
.mud-theme-dark .nk-feature-icon-oak {
    background: rgba(166,139,91,0.15);
    color: #C4A872;
}
.mud-theme-dark .nk-feature-icon-slate {
    background: rgba(44,62,80,0.25);
    color: #9AB5C7;
}

/* -- Dark-mode-aware text color utility classes -- */
.nk-text-muted {
    color: #4B5563;
}
.nk-text-subtle {
    color: #6B7280;
}
.nk-text-body {
    color: #374151;
}

.mud-theme-dark .nk-text-muted {
    color: #B0B8C4;
}
.mud-theme-dark .nk-text-subtle {
    color: #8B95A3;
}
.mud-theme-dark .nk-text-body {
    color: #D1D5DB;
}

/* -- Dark-mode-aware background utility classes -- */
.nk-bg-light {
    background: #F5F1ED;
}
.nk-bg-gray {
    background: #F8F9FA;
}
.nk-bg-soft {
    background: #F9FAFB;
}

.mud-theme-dark .nk-bg-light {
    background: #2E3440;
}
.mud-theme-dark .nk-bg-gray {
    background: #2E3440;
}
.mud-theme-dark .nk-bg-soft {
    background: rgba(255,255,255,0.04);
}

/* -- Force override ALL inline light backgrounds in dark mode -- */
/* These use attribute selectors + !important to beat inline styles */
.mud-theme-dark [style*="background:#FFFFFF"],
.mud-theme-dark [style*="background: #FFFFFF"],
.mud-theme-dark [style*="background:#ffffff"],
.mud-theme-dark [style*="background:#FFF;"],
.mud-theme-dark [style*="background:#fff;"] {
    background: #2E3440 !important;
}
.mud-theme-dark [style*="background:#F5F1ED"],
.mud-theme-dark [style*="background: #F5F1ED"] {
    background: #262C36 !important;
}
.mud-theme-dark [style*="background:#F9FAFB"],
.mud-theme-dark [style*="background: #F9FAFB"] {
    background: rgba(255,255,255,0.06) !important;
}
.mud-theme-dark [style*="background:#F8F9FA"],
.mud-theme-dark [style*="background: #F8F9FA"] {
    background: rgba(255,255,255,0.06) !important;
}
.mud-theme-dark [style*="background:#F3F4F6"],
.mud-theme-dark [style*="background: #F3F4F6"] {
    background: rgba(255,255,255,0.08) !important;
}
.mud-theme-dark [style*="background:#F0F9FF"],
.mud-theme-dark [style*="background: #F0F9FF"] {
    background: rgba(154,181,199,0.1) !important;
}
.mud-theme-dark [style*="border:1px solid #E5E7EB"],
.mud-theme-dark [style*="border: 1px solid #E5E7EB"] {
    border-color: #3B4252 !important;
}
.mud-theme-dark [style*="border-color:#E5E7EB"],
.mud-theme-dark [style*="border-color: #E5E7EB"] {
    border-color: #3B4252 !important;
}
.mud-theme-dark [style*="color:#2563EB"],
.mud-theme-dark [style*="color: #2563EB"] {
    color: #6B9FED !important;
}

/* "Get started" button in dark mode */
.mud-theme-dark .nk-btn-secondary {
    color: #EDE9E4 !important;
    border-color: #6B7280 !important;
}

/* Chips in dark mode — override white/light backgrounds */
.mud-theme-dark .mud-chip.mud-chip-outlined {
    border-color: #4C566A !important;
    color: #D1D5DB !important;
}
.mud-theme-dark .mud-chip {
    color: #D1D5DB;
}

/* MudBlazor input backgrounds in dark mode */
.mud-theme-dark .mud-input-control .mud-input-outlined-border {
    border-color: #3B4252 !important;
}
.mud-theme-dark .mud-input-control:hover .mud-input-outlined-border {
    border-color: #4C566A !important;
}

/* Service cards within network detail (and other nested light-bg cards) */
.mud-theme-dark [style*="border-left:3px"],
.mud-theme-dark [style*="border-bottom:1px solid #F3F4F6"] {
    border-color: #3B4252 !important;
}
/* Override any remaining inline white/light backgrounds on nested divs */
.mud-theme-dark .nk-card [style*="background:#F9FAFB"],
.mud-theme-dark .nk-card [style*="background: #F9FAFB"],
.mud-theme-dark .nk-card [style*="background:#F8F9FA"],
.mud-theme-dark .nk-card [style*="background: #F8F9FA"] {
    background: rgba(255,255,255,0.06) !important;
    color: #D1D5DB !important;
}
/* Ensure service card items in network detail are readable */
.mud-theme-dark .nk-card .nk-card,
.mud-theme-dark .nk-card > div[style*="background"] {
    color: #D1D5DB;
}
/* MudTabPanel content in dark mode */
.mud-theme-dark .mud-tab-panel {
    color: #D1D5DB;
}

/* -- MudBlazor component overrides for dark mode -- */

/* Popover / Picker / Menu dropdowns */
.mud-theme-dark .mud-popover {
    background-color: #2E3440;
    color: #EDE9E4;
}
.mud-theme-dark .mud-picker {
    background-color: #2E3440;
    color: #EDE9E4;
}
.mud-theme-dark .mud-picker-container {
    background-color: #2E3440;
}
.mud-theme-dark .mud-picker-content {
    background-color: #2E3440;
    color: #EDE9E4;
}
.mud-theme-dark .mud-picker .mud-picker-calendar-header,
.mud-theme-dark .mud-picker .mud-picker-year-container,
.mud-theme-dark .mud-picker .mud-picker-month-container,
.mud-theme-dark .mud-picker .mud-picker-calendar-container {
    background-color: #2E3440;
    color: #EDE9E4;
}
.mud-theme-dark .mud-picker .mud-picker-calendar-header-switch button {
    color: #EDE9E4;
}
.mud-theme-dark .mud-picker .mud-picker-year {
    color: #EDE9E4;
}
.mud-theme-dark .mud-picker .mud-picker-year:hover {
    color: #CC8E8E;
}
.mud-theme-dark .mud-picker .mud-picker-calendar-day button {
    color: #EDE9E4;
}
.mud-theme-dark .mud-picker .mud-picker-nav-button-icon {
    color: #EDE9E4;
}

/* Inputs / Text fields */
.mud-theme-dark .mud-input-outlined .mud-input-outlined-border {
    border-color: #3B4252;
}
.mud-theme-dark .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #4C566A;
}
.mud-theme-dark .mud-input {
    color: #EDE9E4;
}
.mud-theme-dark .mud-input-label {
    color: #9CA3AF;
}
.mud-theme-dark .mud-input-slot {
    color: #EDE9E4;
}

/* Tables */
.mud-theme-dark .mud-table {
    background-color: #2E3440;
    color: #EDE9E4;
}
.mud-theme-dark .mud-table .mud-table-row:hover {
    background-color: rgba(255,255,255,0.04);
}
.mud-theme-dark .mud-table-cell {
    border-color: #3B4252;
}

/* Dialogs */
.mud-theme-dark .mud-dialog {
    background-color: #2E3440;
    color: #EDE9E4;
}

/* Chips */
.mud-theme-dark .mud-chip.mud-chip-outlined {
    border-color: #4C566A;
    color: #EDE9E4;
}

/* Tabs */
.mud-theme-dark .mud-tabs {
    background-color: transparent;
}
.mud-theme-dark .mud-tab {
    color: #9CA3AF;
}
.mud-theme-dark .mud-tab.mud-tab-active {
    color: #CC8E8E;
}

/* Skeleton */
.mud-theme-dark .mud-skeleton {
    background-color: #3B4252;
}

/* Select / Autocomplete menus */
.mud-theme-dark .mud-list {
    background-color: #2E3440;
    color: #EDE9E4;
}
.mud-theme-dark .mud-list-item:hover {
    background-color: rgba(255,255,255,0.06);
}

/* Alerts */
.mud-theme-dark .mud-alert {
    color: #EDE9E4;
}

/* Stepper */
.mud-theme-dark .mud-stepper {
    background-color: transparent;
    color: #EDE9E4;
}

/* Snackbar */
.mud-theme-dark .mud-snackbar {
    background-color: #3B4252;
    color: #EDE9E4;
}

/* Simple table */
.mud-theme-dark .mud-simple-table td {
    border-color: #3B4252;
    color: #EDE9E4;
}
.mud-theme-dark .mud-simple-table tr:hover td {
    background-color: rgba(255,255,255,0.04);
}

/* Rating */
.mud-theme-dark .mud-rating .mud-icon-root {
    color: #4C566A;
}

/* Menu */
.mud-theme-dark .mud-menu {
    background-color: #2E3440;
}
.mud-theme-dark .mud-list-item-text {
    color: #EDE9E4;
}

/* ---- Responsive ---- */
@media (min-width: 600px) {
    .nk-section {
        padding: var(--nk-space-3xl) var(--nk-space-lg);
    }
    .nk-hero {
        padding: 80px var(--nk-space-xl);
    }
}

@media (min-width: 1024px) {
    .nk-section {
        padding: var(--nk-space-3xl) var(--nk-space-xl);
    }
    .nk-hero {
        padding: 96px var(--nk-space-xl);
    }
}

/* ============================================================
   Forms — global compact sizing (mobile-first)
   ------------------------------------------------------------
   NexKyn sizes all form fields tighter than MudBlazor's default
   so inputs don't dwarf body text and forms fit more content on
   small screens. Rules apply globally to every MudTextField,
   MudSelect, MudAutocomplete in the app.

   Key numbers (change once, propagates everywhere):
     • Input text             → 14px (was 16px default)
     • Input line-height      → 1.3
     • Outlined vertical pad  → 8px  (was ~18px)
     • Outlined height        → 40px (was 56px)
     • Floating label normal  → 14px
     • Floating label shrunk  → 11px
     • Helper text            → 11px

   If a single field needs more room (e.g. a comment textarea),
   override on that specific field — don't change these globals.
   ============================================================ */

.mud-input-root input,
.mud-input-root textarea,
.mud-input-root .mud-input-slot,
.mud-select .mud-select-input,
.mud-input input[type="text"],
.mud-input input[type="tel"],
.mud-input input[type="email"],
.mud-input input[type="number"],
.mud-input input[type="url"],
.mud-input input[type="time"],
.mud-input input[type="date"] {
    font-size: 14px;
    line-height: 1.3;
}

.mud-input-root-outlined .mud-input-slot {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 40px;
}

.mud-input-root-outlined.mud-input-root-margin-dense .mud-input-slot {
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 36px;
}

/* Adornments (currency icons, trailing icons) sized down proportionally */
.mud-input-root-outlined .mud-input-adornment {
    font-size: 14px;
}
.mud-input-root-outlined .mud-input-adornment .mud-icon-root {
    font-size: 18px;
}

/* Floating labels read smaller so the label doesn't tower over tight inputs */
.mud-input-label-outlined {
    font-size: 14px;
    line-height: 1.3;
}
.mud-input-label-outlined.mud-input-label-shrink,
.mud-input-label-outlined.mud-input-label-shrink.mud-input-label-inputcontrol {
    font-size: 11px;
}

/* Helper / error text under inputs */
.mud-input-helper-text {
    font-size: 11px;
    line-height: 1.2;
    margin-top: 2px;
}

/* Dropdown menu items (MudSelect popup) — keep readable but tighter */
.mud-list-item,
.mud-list-item .mud-list-item-text {
    font-size: 14px;
    line-height: 1.3;
}
.mud-list-item {
    min-height: 36px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Radio and checkbox labels match body typography */
.mud-radio label,
.mud-checkbox label,
.mud-switch label,
.mud-switch-label {
    font-size: 14px;
}

/* Slightly tighter vertical rhythm between stacked fields when the page uses MudForm/MudStack.
   Only affects the default column gap inside MudStack, not arbitrary flex gaps elsewhere. */
.mud-stack.mud-stack-column {
    gap: 10px;
}