@use '../globals' as *;

// =============================================================================
// Multilingual Press Zone - Table Component
// =============================================================================
// Table and grid table styles
// =============================================================================

$background-white: #ffffff !default;
$background-light: #f0f0f1 !default;
$border-color: #c3c4c7 !default;
$border-radius-md: 4px !default;
$text-primary: #1e1e1e !default;
$text-secondary: #757575 !default;

// Dark mode colors
$dark-surface: #2c2c2c !default;
$dark-text: #e4e4e4 !default;
$dark-border: #3c3c3c !default;

.multilingual-table {
  width: 100%;
  border-collapse: collapse;
  background: $background-white;

  th {
    text-align: left;
    padding: 12px;
    background: $background-light;
    border-bottom: 2px solid $border-color;
    font-weight: 600;
    font-size: 13px;
    color: $text-primary;
  }

  td {
    padding: 12px;
    border-bottom: 1px solid $border-color;
    font-size: 13px;
    color: $text-primary;
  }

  tr:hover {
    background: $background-light;
  }

  tr:last-child td {
    border-bottom: none;
  }
}

// Grid Table
.multilingual-grid-table {
  display: grid;
  gap: 1px;
  background: $border-color;
  border: 1px solid $border-color;
  border-radius: $border-radius-md;
  overflow: hidden;

  &__header {
    display: contents;

    > div {
      background: $background-light;
      padding: 12px;
      font-weight: 600;
      font-size: 13px;
      color: $text-primary;
    }
  }

  &__row {
    display: contents;

    > div {
      background: $background-white;
      padding: 12px;
      font-size: 13px;
      color: $text-primary;
    }

    &:hover > div {
      background: $background-light;
    }
  }
}

// Dark mode support
@media (prefers-color-scheme: dark) {
  .multilingual-table {
    background: $dark-surface;

    th {
      background: rgba($dark-text, 0.05);
      border-bottom-color: $dark-border;
      color: $dark-text;
    }

    td {
      border-bottom-color: $dark-border;
      color: $dark-text;
    }

    tr:hover {
      background: rgba($dark-text, 0.05);
    }
  }

  .multilingual-grid-table {
    background: $dark-border;
    border-color: $dark-border;

    &__header > div {
      background: rgba($dark-text, 0.05);
      color: $dark-text;
    }

    &__row {
      > div {
        background: $dark-surface;
        color: $dark-text;
      }

      &:hover > div {
        background: rgba($dark-text, 0.05);
      }
    }
  }
}

body.admin-color-midnight,
body.admin-color-ectoplasm {
  .multilingual-table {
    background: $dark-surface;

    th {
      background: rgba($dark-text, 0.05);
      border-bottom-color: $dark-border;
      color: $dark-text;
    }

    td {
      border-bottom-color: $dark-border;
      color: $dark-text;
    }

    tr:hover {
      background: rgba($dark-text, 0.05);
    }
  }

  .multilingual-grid-table {
    background: $dark-border;
    border-color: $dark-border;

    &__header > div {
      background: rgba($dark-text, 0.05);
      color: $dark-text;
    }

    &__row {
      > div {
        background: $dark-surface;
        color: $dark-text;
      }

      &:hover > div {
        background: rgba($dark-text, 0.05);
      }
    }
  }
}