/**
 * Mobile Sites List Styles
 * iOS Settings App Style - Professional & Clean
 * Uses CSS Variables from mobile-core.css
 *
 * Note: Bottom sheet base styles are in mobile-core.css
 */

/* ============================================
   MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {

  /* ============================================
     WHITE BACKGROUND
     ============================================ */

  html body,
  html.light body {
    background-color: var(--color-bg-primary);
  }

  html.dark body {
    background-color: var(--color-bg-primary);
  }

  /* Mobile sites list */
  html body div.mobile-sites-list {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  /* ============================================
     PAGE HEADER - iOS Large Title Style
     ============================================ */

  /* Hide entire page header on mobile (title is in header, button replaced by + icon) */
  html body div.mobile-page-header,
  html body div.mobile-page-header.mobile-only {
    display: none;
  }

  /* ============================================
     DESKTOP CONTENT ISOLATION
     ============================================ */
  /* Desktop content is now hidden via .desktop-content wrapper in mobile-core.css */

  /* ============================================
     SECTION LABEL (optional)
     ============================================ */

  .mobile-section-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
  }

  /* ============================================
     MOBILE SITES LIST - iOS Grouped Card
     ============================================ */

  div.mobile-sites-list {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-card);
    margin: 20px var(--spacing-md) var(--spacing-xl) var(--spacing-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* ============================================
     SITE ITEM
     ============================================ */

  div.mobile-site-item {
    position: relative;
    background-color: transparent;
  }

  /* Hide swipe actions */
  div.mobile-site-item div.swipe-actions {
    display: none;
  }

  /* Site Content Link */
  div.mobile-site-item a.site-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px var(--spacing-md);
    gap: 12px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    min-height: 60px;
  }

  div.mobile-site-item a.site-content:hover {
    text-decoration: none;
    color: inherit;
  }

  div.mobile-site-item a.site-content:active {
    background-color: var(--color-hover);
  }

  /* Full-width separator */
  div.mobile-site-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5px;
    background-color: var(--color-separator);
  }

  /* ============================================
     STATUS INDICATOR - Vertical Bar
     ============================================ */

  div.mobile-site-item div.status-indicator {
    width: 4px;
    height: 44px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  div.mobile-site-item div.status-indicator.status-green {
    background-color: var(--color-success);
  }

  div.mobile-site-item div.status-indicator.status-orange {
    background-color: var(--color-warning);
  }

  div.mobile-site-item div.status-indicator.status-red {
    background-color: var(--color-danger);
  }

  /* ============================================
     SITE INFO
     ============================================ */

  div.mobile-site-item div.site-info-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }

  div.mobile-site-item div.site-domain {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.25;
  }

  div.mobile-site-item div.site-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.25;
  }

  div.mobile-site-item div.site-meta span.separator {
    margin: 0 5px;
    color: var(--color-chevron);
  }

  div.mobile-site-item div.site-meta span.site-type,
  div.mobile-site-item div.site-meta span.site-info {
    color: var(--color-text-secondary);
  }

  /* ============================================
     CHEVRON - iOS Style
     ============================================ */

  div.mobile-site-item i.chevron {
    color: var(--color-chevron);
    font-size: 14px;
    flex-shrink: 0;
  }

  /* ============================================
     BOTTOM SHEET - ADD SITE OPTIONS
     Base styles are in mobile-core.css
     ============================================ */

  /* Site Type Options */
  div.bottom-sheet-content a.site-type-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 20px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    background-color: transparent;
    min-height: 64px;
    position: relative;
  }

  div.bottom-sheet-content a.site-type-option:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5px;
    background-color: var(--color-separator-alpha);
  }

  div.bottom-sheet-content a.site-type-option:active {
    background-color: var(--color-hover);
  }

  /* Site Type Icon - Clean, no background */
  div.site-type-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  div.site-type-icon svg {
    width: 48px;
    height: 48px;
  }

  div.site-type-info {
    flex: 1;
    min-width: 0;
  }

  div.site-type-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  div.site-type-desc {
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-tight);
    margin-top: 2px;
    line-height: 1.3;
  }

  /* Chevron - subtle */
  i.site-type-arrow {
    font-size: 16px;
    color: var(--color-chevron);
    font-weight: 300;
  }

  /* ============================================
     SAFE AREA
     ============================================ */

  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    div.bottom-sheet-content {
      padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    div.mobile-sites-list {
      margin-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
    }
  }
}