/**
 * macOS Demo — Refactored with Modern CSS (2024)
 * 
 * Features: @layer, backdrop-filter, CSS nesting, color-mix(), 
 * @container, content-visibility, subgrid
 */

@layer mac-reset, mac-tokens, mac-components, mac-utilities;

@layer mac-tokens {
  .macos-demo {
    /* macOS colors */
    --mac-blue: oklch(0.55 0.2 250);
    --mac-surface: color-mix(in oklch, white, transparent 20%);
    --mac-sidebar: color-mix(in oklch, oklch(0.95 0 0), transparent 15%);
    
    /* Blur effect */
    --mac-blur: blur(20px);
    
    /* Shadows */
    --mac-shadow: 0 8px 32px rgba(0,0,0,0.12);
    
    /* Rounded corners */
    --mac-radius: 10px;
    --mac-radius-lg: 14px;
    
    /* Animation */
    --mac-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@layer mac-reset {
  .macos-demo {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color-scheme: light;
    
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      background: linear-gradient(135deg, oklch(0.8 0.15 280), oklch(0.6 0.2 320));
      min-height: 100vh;
      overflow: hidden;
    }
  }
}

@layer mac-components {
  /* ──────────────────────────────────────────────────────────────────────────
   * Menu Bar
   * ──────────────────────────────────────────────────────────────────────── */
  .mac-menubar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    background: color-mix(in oklch, var(--mac-surface), transparent 30%);
    backdrop-filter: var(--mac-blur);
    -webkit-backdrop-filter: var(--mac-blur);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad-md);
    font-size: var(--text-sm);
    z-index: 1000;
    content-visibility: auto;
    contain: layout style;
    
    & .menubar-left {
      display: flex;
      align-items: center;
      gap: var(--gutter-md);
      font-weight: var(--font-medium);
      
      & .apple-logo {
        font-size: var(--text-base);
      }
      
      & .menu-item {
        padding: 2px var(--pad-sm);
        border-radius: 4px;
        cursor: pointer;
        transition: background var(--mac-transition);
        
        &:hover {
          background: color-mix(in oklch, var(--mac-blue), transparent 80%);
        }
      }
    }
    
    & .menubar-right {
      display: flex;
      align-items: center;
      gap: var(--gutter-md);
      
      & .control-center {
        display: flex;
        gap: var(--gutter-sm);
        
        & .control-icon {
          padding: 2px 6px;
          border-radius: 4px;
          cursor: pointer;
          font-size: var(--text-base);
          
          &:hover {
            background: color-mix(in oklch, var(--mac-blue), transparent 80%);
          }
        }
      }
      
      & .clock {
        font-size: var(--text-xs);
        padding-left: var(--gutter-md);
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Finder Window
   * ──────────────────────────────────────────────────────────────────────── */
  .mac-window {
    position: absolute;
    background: var(--mac-surface);
    backdrop-filter: var(--mac-blur);
    -webkit-backdrop-filter: var(--mac-blur);
    border-radius: var(--mac-radius-lg);
    box-shadow: var(--mac-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 400px;
    min-height: 280px;
    content-visibility: auto;
    contain: layout style paint;
    
    /* Traffic light buttons */
    & .window-header {
      height: 52px;
      display: flex;
      align-items: center;
      padding: 0 var(--pad-md);
      border-bottom: 1px solid color-mix(in oklch, #000, transparent 90%);
      -webkit-app-region: drag;
      
      & .window-controls {
        display: flex;
        gap: 8px;
        
        & .control-btn {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: none;
          cursor: pointer;
          transition: filter var(--mac-transition);
          
          &:hover {
            filter: brightness(0.8);
          }
        }
        
        & .btn-close { background: #ff5f57; }
        & .btn-minimize { background: #febc2e; }
        & .btn-maximize { background: #28c840; }
      }
      
      & .window-title {
        flex: 1;
        text-align: center;
        font-weight: var(--font-medium);
        color: var(--text-primary);
        padding-right: 52px; /* Balance controls */
      }
    }
    
    & .window-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    
    /* Sidebar */
    & .sidebar {
      width: 200px;
      background: color-mix(in oklch, var(--mac-sidebar), transparent 10%);
      padding: var(--pad-md);
      overflow-y: auto;
      
      & .sidebar-section {
        margin-bottom: var(--marg-md);
        
        & .sidebar-title {
          font-size: var(--text-xs);
          font-weight: var(--font-semibold);
          color: var(--text-secondary);
          text-transform: uppercase;
          margin-bottom: var(--marg-xs);
        }
        
        & .sidebar-item {
          display: flex;
          align-items: center;
          gap: var(--gutter-sm);
          padding: var(--pad-xs) var(--pad-sm);
          border-radius: var(--mac-radius);
          cursor: pointer;
          font-size: var(--text-sm);
          transition: background var(--mac-transition);
          
          &:hover {
            background: color-mix(in oklch, var(--mac-blue), transparent 85%);
          }
          
          &:has(.selected) {
            background: color-mix(in oklch, var(--mac-blue), transparent 70%);
          }
          
          & .item-icon {
            font-size: var(--text-base);
          }
        }
      }
    }
    
    /* Content area */
    & .content {
      flex: 1;
      padding: var(--pad-md);
      overflow-y: auto;
      background: var(--mac-surface);
      
      /* Toolbar */
      & .toolbar {
        display: flex;
        align-items: center;
        gap: var(--gutter-md);
        margin-bottom: var(--marg-md);
        padding-bottom: var(--pad-sm);
        border-bottom: 1px solid color-mix(in oklch, #000, transparent 90%);
        
        & .nav-buttons {
          display: flex;
          gap: var(--gutter-xs);
          
          & button {
            background: none;
            border: none;
            font-size: var(--text-lg);
            cursor: pointer;
            opacity: 0.5;
            
            &:hover {
              opacity: 1;
            }
          }
        }
        
        & .search-field {
          flex: 1;
          position: relative;
          
          & input {
            width: 100%;
            padding: var(--pad-xs) var(--pad-md);
            padding-left: 32px;
            border: 1px solid color-mix(in oklch, #000, transparent 80%);
            border-radius: var(--mac-radius);
            font-size: var(--text-sm);
            background: color-mix(in oklch, white, transparent 30%);
            
            &:focus {
              outline: none;
              border-color: var(--mac-blue);
            }
          }
          
          & .search-icon {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0.5;
          }
        }
      }
      
      /* File grid with subgrid */
      & .file-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: var(--gutter-md);
        
        /* Subgrid for consistent item structure */
        & .file-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--gutter-xs);
          padding: var(--pad-sm);
          border-radius: var(--mac-radius);
          cursor: pointer;
          transition: background var(--mac-transition);
          container-type: inline-size;
          
          &:hover {
            background: color-mix(in oklch, var(--mac-blue), transparent 85%);
          }
          
          & .file-icon {
            font-size: 2.5rem;
          }
          
          & .file-name {
            font-size: var(--text-xs);
            text-align: center;
            word-break: break-word;
            
            @container (max-width: 70px) {
              font-size: 10px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Dock
   * ──────────────────────────────────────────────────────────────────────── */
  .mac-dock {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: color-mix(in oklch, var(--mac-surface), transparent 25%);
    backdrop-filter: var(--mac-blur);
    -webkit-backdrop-filter: var(--mac-blur);
    border: 1px solid color-mix(in oklch, white, transparent 60%);
    border-radius: var(--mac-radius-lg);
    padding: var(--pad-sm);
    display: flex;
    align-items: flex-end;
    gap: var(--gutter-xs);
    box-shadow: var(--mac-shadow);
    z-index: 1000;
    content-visibility: auto;
    
    & .dock-item {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      border-radius: var(--mac-radius);
      cursor: pointer;
      transition: all var(--mac-transition);
      position: relative;
      
      &:hover {
        transform: scale(1.2) translateY(-10px);
      }
      
      &.running::after {
        content: '';
        position: absolute;
        bottom: -4px;
        width: 4px;
        height: 4px;
        background: var(--text-primary);
        border-radius: 50%;
      }
    }
    
    & .dock-separator {
      width: 1px;
      height: 40px;
      background: color-mix(in oklch, #000, transparent 70%);
      margin: 0 var(--gutter-xs);
    }
  }
}

@layer mac-utilities {
  .macos-demo {
    & .text-primary { color: oklch(0.15 0 0); }
    & .text-secondary { color: oklch(0.45 0 0); }
  }
}