/**
 * Infitwin Design System - Master Import
 * 
 * This file imports all design system components and should be included
 * BEFORE any component-specific CSS files.
 * 
 * Import order is important - colors and spacing are used by typography.
 */

/* Core Design System Files */
@import './design-system/colors.css';
@import './design-system/spacing.css';
@import './design-system/typography.css';

/* Component Styles - Import unified components */
@import './components/modal.css';
@import './components/button.css';
@import './components/form.css';
@import './components/avatar.css';
@import './components/search.css';

/**
 * Global Reset and Base Styles
 * Establishes consistent foundation across all browsers
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* Base font size for rem calculations */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  
  /* Prevent horizontal scroll */
  overflow-x: hidden;
}

/* Ensure images and media are responsive by default */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Remove default button styles */
button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* Remove default list styles */
ul,
ol {
  list-style: none;
}

/* Remove default link styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Improve focus indicators for accessibility */
*:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Hide focus indicators for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/**
 * Utility Classes for Common Design Patterns
 * These prevent the need to create component-specific CSS for common needs
 */

/* Display Utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Width and Height Utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Border Radius */
.rounded-sm { border-radius: 4px; }
.rounded { border-radius: 6px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 50%; }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 1px 2px var(--color-shadow-light); }
.shadow { box-shadow: 0 1px 3px var(--color-shadow-medium); }
.shadow-lg { box-shadow: 0 4px 6px var(--color-shadow-medium); }
.shadow-xl { box-shadow: 0 10px 15px var(--color-shadow-dark); }

/* ==========================================================================
   MOBILE NOTICE - Desktop Recommended Modal
   Only renders on mobile viewports (<768px)
   ========================================================================== */

/* DEFAULT: Hide mobile-only elements on desktop */
.mobile-notice,
.mobile-bottom-nav {
    display: none !important;
}

@media (max-width: 768px) {
    /* Override: Show mobile elements on mobile viewports */
    .mobile-notice {
        display: grid !important; /* Override desktop hide */
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        place-items: center;
        z-index: 10000;
        padding: 1rem;
    }

    .mobile-notice-card {
        background: #fff;
        border-radius: 1rem;
        padding: 1.5rem;
        max-width: 20rem;
        text-align: center;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    }

    .mobile-notice h3 {
        margin: 0 0 0.75rem;
        font-size: 1.25rem;
        color: var(--color-text-primary, #1F2937);
    }

    .mobile-notice p {
        margin: 0 0 1.5rem;
        color: var(--color-text-secondary, #6B7280);
        line-height: 1.5;
    }

    .mobile-notice-actions {
        display: grid;
        gap: 0.75rem;
    }

    .mobile-notice-actions > * {
        padding: 0.875rem;
        border-radius: 0.5rem;
        font-weight: 500;
        font-size: 1rem;
        text-decoration: none;
        text-align: center;
        min-height: 3rem; /* 48px touch target */
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-notice-actions a {
        background: var(--color-background-secondary, #f3f4f6);
        color: var(--color-text-primary, #374151);
    }

    .mobile-notice-actions button {
        background: var(--color-primary, #6B46C1);
        color: #fff;
    }

    /* ==========================================================================
       MOBILE NAVIGATION FIXES
       Fix hamburger menu blocked by early-access-banner
       ========================================================================== */

    /* Ensure banner doesn't block nav interactions */
    .early-access-banner {
        position: relative !important; /* Override position: fixed from styles.css */
        z-index: 999 !important; /* Override z-index: 1001 from styles.css */
    }

    /* Ensure hamburger is always clickable */
    .mobile-menu-toggle {
        z-index: 1002 !important;
        position: relative;
    }

    /* Ensure nav container has proper stacking */
    .nav-container {
        position: relative;
        z-index: 1001;
    }

    /* ==========================================================================
       MOBILE SIDEBAR - Hide on small screens
       Content takes full width when sidebar is hidden
       ========================================================================== */

    /* Hide left navigation sidebar on mobile */
    .sidebar-nav {
        display: none !important;
    }

    /* Adjust main content to take full width */
    .main-wrapper {
        left: 0 !important; /* Remove sidebar offset */
    }

    /* Dashboard specific - full width content */
    .dashboard-layout {
        padding-left: 0 !important;
    }

    /* ==========================================================================
       MOBILE BOTTOM NAVIGATION
       Replaces hidden sidebar with touch-friendly bottom nav
       ========================================================================== */

    .mobile-bottom-nav {
        display: flex !important; /* Override desktop hide */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        justify-content: space-around;
        align-items: center;
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch */
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-width: 64px;
        min-height: 48px; /* 48px touch target */
        padding: 0.5rem;
        color: #6B7280;
        text-decoration: none;
        border-radius: 0.5rem;
        transition: color 0.15s;
    }

    .mobile-nav-item.active,
    .mobile-nav-item:hover {
        color: var(--color-primary, #6B46C1);
    }

    .mobile-nav-icon {
        font-size: 1.25rem;
    }

    .mobile-nav-label {
        font-size: 0.625rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    /* Add bottom padding to pages so content isn't hidden by nav */
    body {
        padding-bottom: 80px;
    }
}

/**
 * USAGE INSTRUCTIONS:
 * 
 * 1. Include this file in your HTML before any component CSS:
 *    <link rel="stylesheet" href="css/design-system.css">
 * 
 * 2. Use design system tokens in your components:
 *    .my-component {
 *      background-color: var(--color-background-card);
 *      padding: var(--spacing-card-padding);
 *      font-size: var(--font-size-base);
 *    }
 * 
 * 3. Use utility classes for common patterns:
 *    <div class="flex items-center gap-md p-lg rounded shadow">
 * 
 * 4. NEVER use hardcoded values that exist as design tokens
 */