// Shared Settings Component Styles
// This file provides consistent styling for all settings pages
// Benchmark: file-naming-pattern and metadata-persistence-settings components

// ============================================================================
// TYPOGRAPHY VARIABLES
// ============================================================================
$settings-page-title-size: 1.375rem;
$settings-page-title-weight: 700;
$settings-page-description-size: 0.875rem;

$settings-section-title-size: 1.25rem;
$settings-section-title-weight: 600;
$settings-section-title-icon-size: 1.125rem;
$settings-section-description-size: 0.875rem;

$settings-label-size: 0.9375rem;
$settings-label-weight: 500;
$settings-description-size: 0.875rem;

// ============================================================================
// SPACING VARIABLES
// ============================================================================
$settings-card-padding: 1.5rem;
$settings-card-padding-mobile: 1rem;
$settings-card-gap: 1.25rem;
$settings-card-gap-mobile: 1rem;
$settings-card-border-radius: 8px;

$settings-section-body-padding-left: 1rem;
$settings-section-body-padding-left-mobile: 0.5rem;
$settings-section-body-gap: 1rem;

$settings-item-padding: 0.875rem 1rem;
$settings-item-padding-mobile: 0.75rem;
$settings-item-border-radius: 6px;
$settings-item-border-left-width: 3px;

// ============================================================================
// PAGE CONTAINER MIXIN
// For standalone pages with their own scrolling area
// ============================================================================
@mixin settings-page-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  height: calc(100dvh - 10.5rem);
  overflow-y: auto;
  padding: 0.5rem;

  @media (min-width: 768px) {
    height: calc(100dvh - 11.65rem);
    padding: 0.5rem;
  }
}

// ============================================================================
// PAGE HEADER
// Include this mixin at root level to get the .settings-header class
// ============================================================================
@mixin settings-page-header {
  .settings-header {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--p-content-border-color);
  }
}

@mixin settings-page-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: $settings-page-title-size;
  font-weight: $settings-page-title-weight;
  color: var(--text-color);
  margin: 0 0 0.5rem 0;

  .pi {
    color: var(--primary-color);
    font-size: 1.25rem;
  }
}

@mixin settings-page-description {
  font-size: $settings-page-description-size;
  line-height: 1.5;
  color: var(--p-text-muted-color);
  margin-bottom: 0.5rem;
}

// ============================================================================
// SETTINGS CARD MIXIN
// The main card container for a group of related settings
// ============================================================================
@mixin settings-card {
  display: flex;
  flex-direction: column;
  gap: $settings-card-gap;
  background: var(--card-background);
  border: 1px solid var(--p-content-border-color);
  border-radius: $settings-card-border-radius;
  padding: $settings-card-padding;

  @media (max-width: 768px) {
    padding: $settings-card-padding-mobile;
    gap: $settings-card-gap-mobile;
  }
}

// ============================================================================
// SECTION HEADER MIXIN
// For section headers inside cards (with icon and description)
// ============================================================================
@mixin settings-section-header {
  margin-bottom: 0.25rem;
}

@mixin settings-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: $settings-section-title-size;
  font-weight: $settings-section-title-weight;
  color: var(--text-color);
  margin: 0 0 0.5rem 0;

  .pi {
    color: var(--primary-color);
    font-size: $settings-section-title-icon-size;
  }
}

@mixin settings-section-description {
  font-size: $settings-section-description-size;
  line-height: 1.5;
  color: var(--p-text-muted-color);
  margin: 0;
}

// ============================================================================
// SECTION BODY MIXIN
// Container for setting items within a card
// ============================================================================
@mixin settings-section-body {
  display: flex;
  flex-direction: column;
  gap: $settings-section-body-gap;
  padding-left: $settings-section-body-padding-left;

  @media (max-width: 768px) {
    padding-left: $settings-section-body-padding-left-mobile;
  }
}

// ============================================================================
// SETTING ITEM MIXIN
// Individual setting row with left border accent
// ============================================================================
@mixin settings-item {
  padding: $settings-item-padding;
  border-radius: $settings-item-border-radius;
  border-left: $settings-item-border-left-width solid var(--primary-color);
  background: color-mix(in srgb, var(--ground-background) 50%, var(--p-surface-800) 50%);
  transition: border-color 0.2s ease, background 0.2s ease;

  &:hover {
    background: color-mix(in srgb, var(--ground-background) 40%, var(--p-surface-800) 60%);
  }

  @media (max-width: 768px) {
    padding: $settings-item-padding-mobile;
  }
}

// ============================================================================
// SETTING HEADER MIXIN
// Header row for a setting (toggle + label)
// ============================================================================
@mixin settings-item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;

  .pi {
    color: var(--primary-color);
    font-size: 1rem;
  }
}

@mixin settings-item-header-standalone {
  margin-bottom: 0.25rem;
}

// ============================================================================
// SETTING LABEL MIXIN
// ============================================================================
@mixin settings-label {
  font-weight: $settings-label-weight;
  color: var(--text-color);
  font-size: $settings-label-size;
}

// ============================================================================
// SETTING DESCRIPTION MIXIN
// ============================================================================
@mixin settings-item-description {
  color: var(--p-text-muted-color);
  font-size: $settings-description-size;
  line-height: 1.4;
  margin: 0;
}

// ============================================================================
// SETTING NOTE MIXIN
// ============================================================================
@mixin settings-note {
  display: block;
  margin-top: 0.25rem;
  font-style: italic;
  opacity: 0.85;
}

// ============================================================================
// SETTING OPTIONS MIXIN
// Expandable options section below a setting
// ============================================================================
@mixin settings-options {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--p-content-border-color);
}

// ============================================================================
// NOTICE MIXINS
// Warning and info notices
// ============================================================================
@mixin settings-notice-base {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: $settings-section-description-size;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  color: var(--text-color);

  strong {
    font-weight: 600;
  }

  @media (max-width: 768px) {
    padding: 0.625rem 0.75rem;
    font-size: $settings-description-size;
  }
}

@mixin settings-warning-notice {
  @include settings-notice-base;
  background: color-mix(in srgb, var(--ground-background) 85%, var(--p-red-600) 15%);
  border-left: 3px solid var(--p-red-500);

  .pi-exclamation-triangle {
    color: var(--p-red-400);
    margin-top: 0.125rem;
    flex-shrink: 0;
  }

  strong {
    color: var(--p-red-300);
  }
}

@mixin settings-info-notice {
  @include settings-notice-base;
  background: color-mix(in srgb, var(--ground-background) 90%, var(--p-blue-600) 10%);
  border-left: 3px solid var(--p-blue-400);

  .pi-info-circle {
    color: var(--p-blue-400);
    margin-top: 0.125rem;
    flex-shrink: 0;
  }

  strong {
    color: var(--p-blue-300);
  }
}

// ============================================================================
// SECTION DIVIDER
// Include this mixin at root level to get the .section-divider class
// ============================================================================
@mixin settings-section-divider {
  .section-divider {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;

    hr {
      border: none;
      border-top: 1px solid var(--p-content-border-color);
      margin: 0;
    }
  }
}

// ============================================================================
// ACTIONS ROW MIXIN
// For save/cancel buttons at the bottom of a section
// ============================================================================
@mixin settings-actions-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;

  @media (max-width: 768px) {
    p-button {
      width: 100%;
    }
  }
}

// ============================================================================
// INPUT GROUP MIXINS
// Common input patterns
// ============================================================================
@mixin settings-filesize-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  label {
    font-size: $settings-description-size;
    color: var(--p-text-muted-color);
    white-space: nowrap;
  }

  .filesize-field {
    width: 70px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--p-content-border-color);
    border-radius: 4px;
    background: var(--ground-background);
    color: var(--text-color);
    font-size: $settings-section-description-size;
    text-align: center;
    transition: border-color 0.2s ease;

    &:hover {
      border-color: var(--primary-color);
    }

    &:focus {
      outline: none;
      border-color: var(--primary-color);
    }
  }

  .filesize-unit {
    font-size: $settings-description-size;
    color: var(--p-text-muted-color);
  }

  .pi-info-circle {
    color: var(--p-text-muted-color);
    font-size: $settings-section-description-size;
    cursor: help;
    opacity: 0.7;
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 1;
    }
  }
}

@mixin settings-select-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;

  p-select {
    min-width: 140px;
  }

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;

    p-select {
      min-width: 100%;
    }
  }
}

// ============================================================================
// TABLE STYLES MIXIN
// For tables within settings cards
// ============================================================================
@mixin settings-table {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;

  ::ng-deep {
    .p-datatable {
      border: 1px solid var(--p-content-border-color);
      border-radius: 6px;
      overflow: hidden;

      .p-datatable-thead > tr > th {
        font-weight: 600;
        padding: 0.75rem;
        background: color-mix(in srgb, var(--text-color) 3%, transparent);
        border-bottom: 1px solid var(--p-content-border-color);
        font-size: $settings-description-size;
      }

      .p-datatable-tbody > tr {
        &:hover {
          background: color-mix(in srgb, var(--text-color) 3%, transparent);
        }

        > td {
          padding: 0.625rem;
          border-bottom: 1px solid color-mix(in srgb, var(--p-content-border-color) 50%, transparent);
        }

        &:last-child > td {
          border-bottom: none;
        }
      }
    }
  }
}

// ============================================================================
// ERROR TEXT MIXIN
// ============================================================================
@mixin settings-error-text {
  color: var(--p-red-400);
  font-size: $settings-section-description-size;
}

// ============================================================================
// ACCESS DENIED CARD MIXIN
// For restricted access sections
// ============================================================================
@mixin settings-access-denied-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: $settings-card-border-radius;
  background: color-mix(in srgb, var(--ground-background) 85%, var(--p-red-600) 15%);
  border: 1px solid var(--p-content-border-color);
  border-left: 3px solid var(--p-red-500);
  max-width: 500px;

  .pi {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: var(--p-red-400);
  }
}

@mixin settings-access-denied-content {
  h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: $settings-section-title-weight;
    color: var(--p-red-300);
  }

  p {
    margin: 0;
    font-size: $settings-section-description-size;
    line-height: 1.5;
    color: var(--p-text-muted-color);
  }
}

// ============================================================================
// BUTTON GROUP MIXIN
// For toggle button selections
// ============================================================================
@mixin settings-button-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;

  .option-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1.5px solid color-mix(in srgb, var(--text-color) 20%, transparent);
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: $settings-description-size;
    font-weight: $settings-label-weight;
    min-width: 4.5rem;

    i {
      font-size: $settings-section-description-size;
    }

    .option-text {
      white-space: nowrap;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    }

    &.selected {
      border-color: var(--primary-color);
      background: color-mix(in srgb, var(--primary-color) 10%, transparent);
      color: var(--primary-color);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 15%, transparent);

      &:hover {
        transform: translateY(-2px);
      }
    }
  }
}
