/* ========================================
   Theme Variable Aliases
   The app used to inject raw CSS variables per theme, which made colors
   inconsistent. Themes are now proper MudBlazor themes, so the MudThemeProvider
   defines the --mud-palette-* variables. These aliases keep the handful of
   component-level references (var(--primary), etc.) working by mapping them
   to the active MudBlazor palette.
   ======================================== */

:root {
    --primary: var(--mud-palette-primary);
    --secondary: var(--mud-palette-secondary);
    --surface: var(--mud-palette-surface);
    --background: var(--mud-palette-background);
    --appbar-background: var(--mud-palette-appbar-background);
    --drawer-background: var(--mud-palette-drawer-background);
    --text-primary: var(--mud-palette-text-primary);
    --text-secondary: var(--mud-palette-text-secondary);
    --text-muted: var(--mud-palette-text-secondary);
    --text-disabled: var(--mud-palette-text-disabled);
    --success: var(--mud-palette-success);
    --warning: var(--mud-palette-warning);
    --error: var(--mud-palette-error);
    --info: var(--mud-palette-info);
    --success-bg: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
    --warning-bg: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
    --error-bg: color-mix(in srgb, var(--mud-palette-error) 15%, transparent);
    --info-bg: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
    --hover: var(--mud-palette-action-hover);
    --active: var(--mud-palette-action-hover);
    --border: var(--mud-palette-lines-default);
    --action-default: var(--mud-palette-action-default);
    --action-disabled: var(--mud-palette-action-disabled);
}

/* Apply background to html/body */
html, body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--mud-palette-background);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

html {
    background-color: var(--mud-palette-background);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    right: 0;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Loading screen - shows until Blazor is ready */
#app-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background, #0a0a0f);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease-out;
}

#app-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

#app-loading.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.blazor-loading-content {
    text-align: center;
    color: var(--text-primary, #e6edf3);
}

.blazor-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary, #5b4fc9);
    border-radius: 50%;
    animation: blazor-spin 1s linear infinite;
}

.blazor-loading-text {
    margin-top: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: var(--text-secondary, #8b949e);
}

@keyframes blazor-spin {
    to { transform: rotate(360deg); }
}

/* Tab-specific loading indicator - small and focused */
.tab-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--text-secondary, #8b949e);
    background: transparent;
}

/* AppBar content - prevent layout shift when content loads */
.appbar-skeleton {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--mud-palette-surface, #27272a);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* Prevent layout shift for conditional content in AppBar */
.appbar-icon-placeholder {
    display: inline-block;
    width: 40px;
    height: 40px;
    visibility: hidden;
}

.align-right {
    text-align: right;
}

.align-right .mud-stack-item {
    justify-content: flex-end;
}

.cursor-pointer {
    cursor: pointer !important;
}

.catalog-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.catalog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ========================================
   MOBILE / RESPONSIVE STYLES
   Activated at Breakpoint.Sm (≤600px) and below.
   ======================================== */

/* ── Safe area insets for notched phones (iOS + Android) ── */
.mud-appbar {
    padding-top: env(safe-area-inset-top) !important;
}

.mud-main-content {
    padding-bottom: env(safe-area-inset-bottom) !important;
}

/* ── Mobile bottom navigation bar ── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--mud-palette-surface, #12121a);
    border-top: 1px solid var(--mud-palette-divider, rgba(255,255,255,0.12));
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 56px;
    color: var(--mud-palette-text-secondary, #8b949e);
    text-decoration: none;
    font-size: 11px;
    gap: 2px;
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-item:active,
.mobile-bottom-nav-item.active {
    color: var(--mud-palette-primary, #5b4fc9);
}

.mobile-bottom-nav-item .mud-icon-root {
    font-size: 24px;
}

/* ── Show bottom nav only on mobile ── */
@media (max-width: 600px) {
    .mobile-bottom-nav {
        display: flex;
    }

    /* Add bottom padding so content isn't hidden behind bottom nav */
    .mud-main-content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    /* Reduce container padding on mobile */
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* ── Larger tap targets on mobile (min 44px) ── */
    .mud-nav-link {
        min-height: 44px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .mud-button {
        min-height: 40px;
    }

    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* ── AppBar: hide app title text on very small screens to save space ── */
    .mud-appbar .mud-typography-h5 {
        font-size: 1.1rem !important;
    }

    /* ── Notification popover: full-width on mobile ── */
    .mud-popover .mud-paper {
        max-width: calc(100vw - 16px) !important;
    }

    /* ── Tables: allow horizontal scroll with clean scrollbar ── */
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mud-table-container::-webkit-scrollbar {
        height: 4px;
    }

    .mud-table-container::-webkit-scrollbar-thumb {
        background: var(--mud-palette-divider, rgba(255,255,255,0.2));
        border-radius: 2px;
    }

    /* ── Dialogs: near full-screen on mobile ── */
    .mud-dialog {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        margin: 8px !important;
    }

    .mud-dialog-content {
        max-height: calc(100vh - 160px) !important;
    }

    /* ── Stack horizontal MudStack rows on mobile ── */
    .mud-stack.mud-stack-row {
        flex-wrap: wrap;
    }

    /* ── MudGrid: force full width on mobile ── */
    .mud-grid-item {
        padding: 4px !important;
    }

    /* ── Typography: slightly smaller headings on mobile ── */
    .mud-typography-h3 {
        font-size: 1.75rem !important;
    }
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }
    .mud-typography-h5 {
        font-size: 1.2rem !important;
    }

    /* ── Chat: full viewport height on mobile ── */
    .chat-container-mobile {
        height: calc(100vh - 140px - env(safe-area-inset-top)) !important;
    }

    /* ── Ticket detail: stack panels ── */
    .ticket-detail-grid > .mud-grid-item {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* ── Kanban: horizontal scroll on mobile ── */
    .kanban-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .kanban-column {
        min-width: 280px;
        flex-shrink: 0;
    }

    /* ── Hide non-essential elements on mobile ── */
    .hide-on-mobile {
        display: none !important;
    }

    /* ── KB three-panel: stack vertically ── */
    .kb-three-panel {
        flex-direction: column !important;
    }

    .kb-sidebar,
    .kb-article-list,
    .kb-reading-pane {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
    }

    /* ── Breadcrumbs: hide on mobile (wastes space) ── */
    .mud-breadcrumbs {
        display: none !important;
    }

    /* ── Sticky message input at bottom on mobile ── */
    .sticky-message-input {
        position: sticky;
        bottom: 0;
        background: var(--mud-palette-surface, #12121a);
        padding: 8px;
        z-index: 10;
        border-top: 1px solid var(--mud-palette-divider, rgba(255,255,255,0.12));
    }
}

/* ── Tablet (601px - 960px): moderate adjustments ── */
@media (min-width: 601px) and (max-width: 960px) {
    .mobile-bottom-nav {
        display: none;
    }

    .hide-on-tablet {
        display: none !important;
    }
}

/* ── Desktop (>960px): hide mobile-only elements ── */
@media (min-width: 961px) {
    .mobile-bottom-nav {
        display: none !important;
    }

    .hide-on-desktop {
        display: none !important;
    }
}

/* ── Touch device optimizations ── */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .catalog-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    /* Larger tap targets for touch */
    .mud-list-item {
        min-height: 48px;
    }

    .mud-menu .mud-menu-item {
        min-height: 48px;
    }
}

/* ── Prevent text selection on buttons/tap targets (mobile UX) ── */
@media (max-width: 600px) {
    .mud-button,
    .mud-nav-link,
    .mud-icon-button,
    .mobile-bottom-nav-item {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}

/* ── PWA display mode optimizations ── */
@media (display-mode: standalone) {
    /* When running as installed PWA, use safe area for status bar */
    body {
        padding-top: env(safe-area-inset-top);
    }

    /* Slightly smaller appbar in standalone mode */
    .mud-appbar {
        min-height: 56px;
    }
}


/* ============================================================
   Per-theme style effects — the document root is tagged with
   data-theme="theme-..." by ThemeService/MainLayout.
   ============================================================ */

/* Glassmorphism */
html[data-theme="theme-glass"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 32%, #2a5298 70%, #1c1c3a 100%) fixed;
}
html[data-theme="theme-glass"] .mud-appbar,
html[data-theme="theme-glass"] .mud-drawer,
html[data-theme="theme-glass"] .mud-paper {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
html[data-theme="theme-glass"] .mud-main-content {
    background: transparent;
}

/* Neumorphism — soft dual shadows on raised surfaces */
html[data-theme="theme-neu"] .mud-paper {
    box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.55), -8px -8px 16px rgba(255, 255, 255, 0.75);
    border-radius: 20px;
}
html[data-theme="theme-neu"] .mud-appbar,
html[data-theme="theme-neu"] .mud-drawer {
    box-shadow: none;
}
html[data-theme="theme-neu"] .mud-button {
    box-shadow: 4px 4px 8px rgba(163, 177, 198, 0.5), -4px -4px 8px rgba(255, 255, 255, 0.7);
}

/* Futuristic — neon glow */
html[data-theme="theme-futuristic"] .mud-button-filled,
html[data-theme="theme-futuristic"] .mud-chip-filled {
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}
html[data-theme="theme-futuristic"] .mud-button-filled.mud-button-color-primary:hover {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.6);
}
html[data-theme="theme-futuristic"] .mud-list-item-icon {
    color: var(--mud-palette-primary);
}