@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-list-detail-layout {
  // Core structure
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
  
  // Visual design
  background: $semantic-color-surface-primary;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-lg;
  
  // Typography
  font-family: map-get($semantic-typography-body-medium, font-family);
  font-size: map-get($semantic-typography-body-medium, font-size);
  font-weight: map-get($semantic-typography-body-medium, font-weight);
  line-height: map-get($semantic-typography-body-medium, line-height);
  color: $semantic-color-text-primary;
  
  // Mobile-first orientation
  flex-direction: column;
  
  // Desktop orientation
  @media (min-width: $semantic-breakpoint-md) {
    flex-direction: row;
  }
  
  // List panel
  &__list {
    display: flex;
    flex-direction: column;
    position: relative;
    background: $semantic-color-surface-secondary;
    border-right: $semantic-border-width-1 solid $semantic-color-border-primary;
    overflow: hidden;
    
    // Mobile: full height, collapsed when detail shown
    flex: none;
    width: 100%;
    height: 100%;
    
    // Desktop: fixed width, full height
    @media (min-width: $semantic-breakpoint-md) {
      flex: none;
      width: 320px;
      height: auto;
    }
    
    // Resizable on desktop
    @media (min-width: $semantic-breakpoint-md) {
      resize: horizontal;
      min-width: 280px;
      max-width: 600px;
    }
    
    // Mobile: hide when detail is shown
    &--hidden-mobile {
      @media (max-width: calc($semantic-breakpoint-md - 1px)) {
        display: none;
      }
    }
  }
  
  // Detail panel
  &__detail {
    display: flex;
    flex-direction: column;
    position: relative;
    background: $semantic-color-surface-primary;
    overflow: hidden;
    
    // Mobile: full height, shown only when item selected
    flex: 1;
    width: 100%;
    height: 100%;
    
    // Desktop: flexible width
    @media (min-width: $semantic-breakpoint-md) {
      flex: 1;
      height: auto;
    }
    
    // Mobile: hide when no selection
    &--hidden-mobile {
      @media (max-width: calc($semantic-breakpoint-md - 1px)) {
        display: none;
      }
    }
    
    // Empty state
    &--empty {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: $semantic-spacing-layout-section-lg;
      color: $semantic-color-text-secondary;
      
      font-family: map-get($semantic-typography-body-large, font-family);
      font-size: map-get($semantic-typography-body-large, font-size);
      font-weight: map-get($semantic-typography-body-large, font-weight);
      line-height: map-get($semantic-typography-body-large, line-height);
    }
  }
  
  // Resize handle for desktop
  &__resize-handle {
    display: none;
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 1;
    
    @media (min-width: $semantic-breakpoint-md) {
      display: block;
    }
    
    &:hover,
    &:active {
      background: $semantic-color-primary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
  }
  
  // Mobile navigation controls
  &__mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $semantic-spacing-component-md;
    background: $semantic-color-surface-elevated;
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-primary;
    
    @media (min-width: $semantic-breakpoint-md) {
      display: none;
    }
  }
  
  &__mobile-nav-button {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-xs;
    padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
    background: $semantic-color-surface-primary;
    border: $semantic-border-width-1 solid $semantic-color-border-primary;
    border-radius: $semantic-border-button-radius;
    color: $semantic-color-text-primary;
    cursor: pointer;
    
    font-family: map-get($semantic-typography-button-medium, font-family);
    font-size: map-get($semantic-typography-button-medium, font-size);
    font-weight: map-get($semantic-typography-button-medium, font-weight);
    line-height: map-get($semantic-typography-button-medium, line-height);
    
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    &:hover {
      background: $semantic-color-surface-elevated;
      box-shadow: $semantic-shadow-button-hover;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
    
    &:active {
      box-shadow: $semantic-shadow-button-rest;
    }
    
    &[disabled] {
      opacity: $semantic-opacity-disabled;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
  
  // Size variants
  &--sm {
    .ui-list-detail-layout__list {
      @media (min-width: $semantic-breakpoint-md) {
        width: 280px;
        min-width: 240px;
        max-width: 400px;
      }
    }
  }
  
  &--lg {
    .ui-list-detail-layout__list {
      @media (min-width: $semantic-breakpoint-md) {
        width: 400px;
        min-width: 320px;
        max-width: 800px;
      }
    }
  }
  
  // Variant styles
  &--bordered {
    border: $semantic-border-width-2 solid $semantic-color-border-primary;
    box-shadow: $semantic-shadow-elevation-2;
  }
  
  &--elevated {
    border: none;
    box-shadow: $semantic-shadow-elevation-3;
  }
  
  // Selection states for items (to be applied via content projection)
  ::ng-deep .ui-list-item {
    &--selected {
      background: $semantic-color-surface-elevated;
      border-left: 3px solid $semantic-color-primary;
      color: $semantic-color-text-primary;
    }
    
    &--hover {
      background: $semantic-color-surface-container;
    }
  }
  
  // Loading state
  &--loading {
    pointer-events: none;
    opacity: $semantic-opacity-subtle;
  }
  
  // Responsive adjustments for small screens
  @media (max-width: calc($semantic-breakpoint-sm - 1px)) {
    border-radius: 0;
    height: 100vh;
    
    .ui-list-detail-layout__mobile-nav {
      padding: $semantic-spacing-component-sm;
    }
  }
}