/* ==========================================
   OpenMarket Admin - Material Design 3 Expressive Theme
   Based on M3 Design Tokens with Indigo Professional Palette
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ==========================================
   M3 Design Tokens - Color System
   ========================================== */

:root {
    /* === Primary Colors === */
    --m3-primary: #4F46E5;
    --m3-on-primary: #FFFFFF;
    --m3-primary-container: #E0E7FF;
    --m3-on-primary-container: #1E1B4B;
    
    /* === Secondary Colors === */
    --m3-secondary: #0891B2;
    --m3-on-secondary: #FFFFFF;
    --m3-secondary-container: #CFFAFE;
    --m3-on-secondary-container: #164E63;
    
    /* === Tertiary Colors === */
    --m3-tertiary: #059669;
    --m3-on-tertiary: #FFFFFF;
    --m3-tertiary-container: #D1FAE5;
    --m3-on-tertiary-container: #065F46;
    
    /* === Error Colors === */
    --m3-error: #DC2626;
    --m3-on-error: #FFFFFF;
    --m3-error-container: #FEE2E2;
    --m3-on-error-container: #7F1D1D;
    
    /* === Surface Colors === */
    --m3-surface: #FAFAFA;
    --m3-on-surface: #0F172A;
    --m3-surface-variant: #F1F5F9;
    --m3-on-surface-variant: #475569;
    --m3-surface-tint: #4F46E5;
    
    /* === Background Colors === */
    --m3-background: #F1F5F9;
    --m3-on-background: #0F172A;
    
    /* === Outline Colors === */
    --m3-outline: #CBD5E1;
    --m3-outline-variant: #E2E8F0;
    
    /* === State Layer Opacities === */
    --m3-state-hover-opacity: 0.08;
    --m3-state-focus-opacity: 0.12;
    --m3-state-pressed-opacity: 0.12;
    --m3-state-dragged-opacity: 0.16;
    
    /* === Elevation Shadows === */
    --m3-elevation-0: none;
    --m3-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --m3-elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --m3-elevation-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --m3-elevation-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --m3-elevation-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* === Shape Tokens === */
    --m3-shape-corner-extra-small: 4px;
    --m3-shape-corner-small: 8px;
    --m3-shape-corner-medium: 12px;
    --m3-shape-corner-large: 16px;
    --m3-shape-corner-extra-large: 28px;
    
    /* === Motion Tokens === */
    --m3-motion-duration-short-1: 50ms;
    --m3-motion-duration-short-2: 100ms;
    --m3-motion-duration-medium-1: 250ms;
    --m3-motion-duration-medium-2: 300ms;
    --m3-motion-duration-long-1: 400ms;
    --m3-motion-duration-long-2: 500ms;
    
    --m3-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --m3-motion-easing-emphasized: cubic-bezier(0.4, 0.0, 0.2, 1.0);
    --m3-motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0, 1.0);
    --m3-motion-easing-accelerate: cubic-bezier(0.3, 0.0, 1, 1.0);
}

/* Dark Theme Tokens */
.dark-theme,
[data-theme="dark"] {
    /* === Primary Colors === */
    --m3-primary: #818CF8;
    --m3-on-primary: #1E1B4B;
    --m3-primary-container: #3730A3;
    --m3-on-primary-container: #E0E7FF;
    
    /* === Secondary Colors === */
    --m3-secondary: #22D3EE;
    --m3-on-secondary: #164E63;
    --m3-secondary-container: #0E7490;
    --m3-on-secondary-container: #CFFAFE;
    
    /* === Tertiary Colors === */
    --m3-tertiary: #34D399;
    --m3-on-tertiary: #065F46;
    --m3-tertiary-container: #047857;
    --m3-on-tertiary-container: #D1FAE5;
    
    /* === Error Colors === */
    --m3-error: #F87171;
    --m3-on-error: #7F1D1D;
    --m3-error-container: #991B1B;
    --m3-on-error-container: #FEE2E2;
    
    /* === Surface Colors === */
    --m3-surface: #1E1E2E;
    --m3-on-surface: #F1F5F9;
    --m3-surface-variant: #2D2D3D;
    --m3-on-surface-variant: #CBD5E1;
    --m3-surface-tint: #818CF8;
    
    /* === Background Colors === */
    --m3-background: #0F0F17;
    --m3-on-background: #F1F5F9;
    
    /* === Outline Colors === */
    --m3-outline: #475569;
    --m3-outline-variant: #334155;
    
    /* === Elevation Shadows (stronger for dark) === */
    --m3-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --m3-elevation-2: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --m3-elevation-3: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --m3-elevation-4: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
    --m3-elevation-5: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
}

/* ==========================================
   Base Styles
   ========================================== */

html, body {
    font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--m3-on-background);
    background-color: var(--m3-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
}

/* ==========================================
   Custom Scrollbar (M3 Style)
   ========================================== */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--m3-shape-corner-small);
}

::-webkit-scrollbar-thumb {
    background: var(--m3-outline);
    border-radius: var(--m3-shape-corner-small);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--m3-on-surface-variant);
    background-clip: padding-box;
}

.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--m3-outline);
    background-clip: padding-box;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--m3-on-surface-variant);
    background-clip: padding-box;
}

/* ==========================================
   MudBlazor Component Overrides
   ========================================== */

/* === Cards === */
.mud-card {
    border-radius: var(--m3-shape-corner-medium) !important;
    transition: transform var(--m3-motion-duration-medium-1) var(--m3-motion-easing-standard),
                box-shadow var(--m3-motion-duration-medium-1) var(--m3-motion-easing-standard);
    background-color: var(--m3-surface);
}

.mud-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--m3-elevation-4) !important;
}

.mud-card-content {
    padding: 20px !important;
}

/* === Buttons === */
.mud-button-root {
    border-radius: var(--m3-shape-corner-large) !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0.0156rem !important;
    transition: all var(--m3-motion-duration-short-2) var(--m3-motion-easing-standard);
}

.mud-button-filled {
    box-shadow: var(--m3-elevation-2);
}

.mud-button-filled:hover {
    box-shadow: var(--m3-elevation-3);
}

.mud-button-outlined {
    border-width: 1px !important;
}

.mud-fab {
    border-radius: var(--m3-shape-corner-extra-large) !important;
    box-shadow: var(--m3-elevation-3);
}

.mud-fab:hover {
    box-shadow: var(--m3-elevation-4);
}

/* === Chips === */
.mud-chip {
    border-radius: var(--m3-shape-corner-small) !important;
    font-weight: 500 !important;
    transition: all var(--m3-motion-duration-short-2) var(--m3-motion-easing-standard);
}

/* === Text Fields === */
.mud-input-root {
    border-radius: var(--m3-shape-corner-small) !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--m3-outline) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--m3-on-surface) !important;
}

/* === Navigation === */
.mud-nav-link {
    border-radius: var(--m3-shape-corner-medium) !important;
    margin: 4px 8px !important;
    transition: background-color var(--m3-motion-duration-short-2) var(--m3-motion-easing-standard);
}

.mud-nav-link.active {
    background-color: var(--m3-primary-container) !important;
    color: var(--m3-on-primary-container) !important;
}

.mud-nav-link:hover:not(.active) {
    background-color: rgba(var(--m3-primary), var(--m3-state-hover-opacity));
}

/* === Tables === */
.mud-table {
    border-radius: var(--m3-shape-corner-medium);
    overflow: hidden;
}

.mud-table-cell {
    font-size: 0.875rem;
    border-color: var(--m3-outline-variant) !important;
}

.mud-table-row:hover {
    background-color: rgba(79, 70, 229, 0.04) !important;
}

.dark-theme .mud-table-row:hover {
    background-color: rgba(129, 140, 248, 0.08) !important;
}

.mud-table-head .mud-table-cell {
    font-weight: 600;
    color: var(--m3-on-surface-variant);
}

/* === Dialogs === */
.mud-dialog {
    border-radius: var(--m3-shape-corner-extra-large) !important;
}

.mud-dialog-content {
    padding: 24px !important;
}

/* === App Bar === */
.mud-appbar {
    box-shadow: var(--m3-elevation-2) !important;
}

/* === Drawer === */
.mud-drawer {
    box-shadow: var(--m3-elevation-1) !important;
    border-radius: 0 var(--m3-shape-corner-large) var(--m3-shape-corner-large) 0 !important;
}

/* === Snackbar === */
.mud-snackbar {
    border-radius: var(--m3-shape-corner-small) !important;
    box-shadow: var(--m3-elevation-3);
}

/* === Progress === */
.mud-progress-linear {
    border-radius: var(--m3-shape-corner-extra-small);
}

.mud-progress-circular svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* === Pagination === */
.mud-pagination-item {
    border-radius: var(--m3-shape-corner-small) !important;
}

/* === Tabs === */
.mud-tabs {
    border-radius: var(--m3-shape-corner-medium);
}

.mud-tab {
    text-transform: none !important;
    font-weight: 500 !important;
}

/* ==========================================
   Utility Classes
   ========================================== */

/* === Elevation Utilities === */
.elevation-0 { box-shadow: var(--m3-elevation-0); }
.elevation-1 { box-shadow: var(--m3-elevation-1); }
.elevation-2 { box-shadow: var(--m3-elevation-2); }
.elevation-3 { box-shadow: var(--m3-elevation-3); }
.elevation-4 { box-shadow: var(--m3-elevation-4); }
.elevation-5 { box-shadow: var(--m3-elevation-5); }

/* === Surface Variants === */
.surface-variant {
    background-color: var(--m3-surface-variant);
    color: var(--m3-on-surface-variant);
}

.primary-container {
    background-color: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.secondary-container {
    background-color: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
}

.tertiary-container {
    background-color: var(--m3-tertiary-container);
    color: var(--m3-on-tertiary-container);
}

/* === Stat Cards (Dashboard) === */
.stat-card {
    background: linear-gradient(135deg, var(--m3-primary) 0%, var(--m3-primary-container) 100%);
    color: white;
    border-radius: var(--m3-shape-corner-large);
    box-shadow: var(--m3-elevation-3);
}

/* === Animation Utilities === */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading-pulse {
    animation: pulse 2s var(--m3-motion-easing-standard) infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn var(--m3-motion-duration-medium-2) var(--m3-motion-easing-emphasized);
}

/* === State Layers === */
.state-layer-hover:hover {
    background-color: rgba(79, 70, 229, var(--m3-state-hover-opacity));
}

.state-layer-focus:focus {
    background-color: rgba(79, 70, 229, var(--m3-state-focus-opacity));
}

.state-layer-pressed:active {
    background-color: rgba(79, 70, 229, var(--m3-state-pressed-opacity));
}

/* ==========================================
   Responsive Adjustments
   ========================================== */

/* === Extra Small Devices (phones, 600px and down) === */
@media (max-width: 600px) {
    /* Mobile drawer - full overlay style */
    .mud-drawer {
        width: 280px !important;
        z-index: 1300 !important;
    }

    /* Ensure main content doesn't shift when drawer opens on mobile */
    .mud-drawer-open-responsive-md-left ~ .mud-main-content {
        margin-left: 0 !important;
    }

    /* Make overlay visible when drawer is open */
    .mud-overlay {
        z-index: 1250 !important;
    }

    .mud-table-cell {
        font-size: 0.75rem;
        padding: 8px !important;
    }

    .mud-card-content {
        padding: 12px !important;
    }

    /* Responsive page headers */
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .page-header-actions {
        width: 100%;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .page-header-actions .mud-button-root {
        flex: 1 1 auto;
        min-width: 120px;
    }

    /* Title with chips - stack on mobile */
    .page-title-group {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Make MudStack with Row=true wrap on mobile */
    .responsive-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .responsive-row > * {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Responsive buttons in headers */
    .responsive-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .responsive-buttons .mud-button-root {
        flex: 1 1 calc(50% - 4px);
        min-width: 100px;
    }

    /* Single column filter layout on mobile */
    .mud-grid.filter-grid > .mud-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Stack stat cards */
    .stat-card-grid .mud-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* Typography adjustments */
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.25rem !important;
    }

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

    /* Chip adjustments */
    .mud-chip {
        font-size: 0.7rem !important;
        height: auto !important;
        padding: 2px 8px !important;
    }

    /* App bar adjustments */
    .mud-appbar {
        padding: 0 8px !important;
    }

    .mud-appbar .mud-typography-h6 {
        font-size: 1rem !important;
    }

    /* Hide text on small buttons, show only icon */
    .icon-only-mobile .mud-button-label {
        display: none;
    }

    .icon-only-mobile .mud-icon-root {
        margin: 0 !important;
    }

    /* Pagination adjustments */
    .mud-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Timeline adjustments */
    .mud-timeline {
        padding-left: 0 !important;
    }

    /* Dialog adjustments */
    .mud-dialog {
        margin: 8px !important;
        width: calc(100% - 16px) !important;
        max-height: calc(100vh - 16px) !important;
    }

    /* Table responsive improvements */
    .mud-table-container {
        overflow-x: auto;
    }

    /* Avatar size on mobile */
    .mud-avatar.mud-avatar-large {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }

    /* Hide less important columns on mobile */
    .hide-on-mobile {
        display: none !important;
    }

    /* Quick actions cards - stack buttons */
    .quick-actions-grid {
        flex-direction: column !important;
    }

    .quick-actions-grid .mud-button-root {
        width: 100% !important;
    }
}

/* === Small Devices (portrait tablets and large phones, 600px to 960px) === */
@media (min-width: 601px) and (max-width: 960px) {
    .mud-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .mud-card-content {
        padding: 16px !important;
    }

    /* 2-column filter layout on tablets */
    .filter-grid > .mud-item {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    /* Page header - inline but wrapped */
    .page-header {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .page-header-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Typography adjustments */
    .mud-typography-h4 {
        font-size: 1.75rem !important;
    }

    /* Tablet navigation */
    .mud-drawer {
        width: 260px !important;
    }

    /* Show on tablet, hide on mobile */
    .show-on-tablet {
        display: block !important;
    }
}

/* === Medium Devices (landscape tablets, 961px to 1280px) === */
@media (min-width: 961px) and (max-width: 1280px) {
    .mud-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* 3-column filter layout */
    .filter-grid > .mud-item {
        flex-basis: 33.333% !important;
        max-width: 33.333% !important;
    }
}

/* === Large Devices (desktops, 1280px and up) === */
@media (min-width: 1281px) {
    .mud-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* ==========================================
   Responsive Utility Classes
   ========================================== */

/* Flex wrap utilities */
.flex-wrap-mobile {
    flex-wrap: nowrap;
}

@media (max-width: 600px) {
    .flex-wrap-mobile {
        flex-wrap: wrap !important;
    }
}

/* Gap utilities for responsive spacing */
.gap-responsive {
    gap: 16px;
}

@media (max-width: 600px) {
    .gap-responsive {
        gap: 8px !important;
    }
}

/* Text truncation for mobile */
.text-truncate-mobile {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Hide/show utilities */
@media (max-width: 600px) {
    .d-none-xs {
        display: none !important;
    }

    .d-block-xs {
        display: block !important;
    }

    .d-flex-xs {
        display: flex !important;
    }
}

@media (min-width: 601px) and (max-width: 960px) {
    .d-none-sm {
        display: none !important;
    }

    .d-block-sm {
        display: block !important;
    }
}

@media (min-width: 961px) {
    .d-none-md-up {
        display: none !important;
    }

    .d-block-md-up {
        display: block !important;
    }
}

/* Full width on mobile */
.w-100-mobile {
    width: auto;
}

@media (max-width: 600px) {
    .w-100-mobile {
        width: 100% !important;
    }
}

/* Stack on mobile utility */
.stack-on-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
}

@media (max-width: 600px) {
    .stack-on-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }

    .stack-on-mobile > * {
        width: 100%;
    }
}

/* Responsive padding */
.pa-responsive {
    padding: 24px;
}

@media (max-width: 960px) {
    .pa-responsive {
        padding: 16px !important;
    }
}

@media (max-width: 600px) {
    .pa-responsive {
        padding: 12px !important;
    }
}

/* Responsive margins */
.mb-responsive {
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .mb-responsive {
        margin-bottom: 16px !important;
    }
}

/* ==========================================
   Error/Loading States
   ========================================== */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 24px;
}

.error-page .mud-typography-h1 {
    color: var(--m3-primary);
    margin-bottom: 16px;
}

/* ==========================================
   Accessibility Enhancements
   ========================================== */

/* Focus visible styles */
*:focus-visible {
    outline: 2px solid var(--m3-primary);
    outline-offset: 2px;
    border-radius: var(--m3-shape-corner-extra-small);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --m3-outline: #000000;
        --m3-outline-variant: #333333;
    }
    
    .dark-theme {
        --m3-outline: #FFFFFF;
        --m3-outline-variant: #CCCCCC;
    }
    
    .mud-button-outlined {
        border-width: 2px !important;
    }
}

/* ==========================================
   Print Styles
   ========================================== */

@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-fab,
    .no-print {
        display: none !important;
    }
    
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mud-card {
        box-shadow: none !important;
        border: 1px solid var(--m3-outline);
    }
}