@use '../../vars.scss' as *;
@use 'sass:color' as color;

// ═══════════════════════════════════════════════════════════════════════════
// MD Cards Grid Custom Theme
// Bordered card style with shadows and rounded corners
// ═══════════════════════════════════════════════════════════════════════════
//
// USAGE:
// Add the theme class to the md-grid element:
// <md-grid class="md-grid-bordered" ...>
//
// Or wrap it in a container:
// <div class="md-grid-bordered">
//   <md-grid ...>
// </div>
//
// ═══════════════════════════════════════════════════════════════════════════
// AVAILABLE CSS CLASSES (for reference):
// ═══════════════════════════════════════════════════════════════════════════
//
// HOST / CONTAINER:
//   .md-grid                    - Main component host
//   .md-grid-shrink-mode        - Applied when overflowMode="shrink"
//
// SCROLL:
//   .md-grid-scroll-container   - Horizontal scroll wrapper
//
// HEADER:
//   .md-grid-header             - Header container
//   .md-grid-header-inner       - Header flex container
//   .md-grid-header-cell        - Individual header cell
//   .md-grid-header-cell-label  - Header cell text label
//   .md-grid-header-cell.sortable     - Sortable header cell
//   .md-grid-header-cell.sort-active  - Currently sorted column
//   .md-grid-header-cell.sort-asc     - Ascending sort
//   .md-grid-header-cell.sort-desc    - Descending sort
//   .md-grid-header-cell.resizeable   - Resizeable column header
//
// SORT ICONS:
//   .md-grid-sort-icon          - Sort icon container
//   .md-grid-sort-asc           - Ascending sort icon
//   .md-grid-sort-desc          - Descending sort icon
//
// RESIZE:
//   .md-grid-resize-handle      - Column resize drag handle
//   body.md-grid-resizing       - Applied to body during resize
//
// BODY:
//   .md-grid-body               - Body container (cards wrapper)
//
// GROUPS:
//   .md-grid-group              - Group container
//   .md-grid-group-header       - Group header
//   .md-grid-group-title        - Group title text
//   .md-grid-group-rows         - Group rows container
//
// CARD (ROW):
//   .md-grid-card               - Individual card/row
//   .md-grid-card-editing       - Card in edit mode
//   .md-grid-card-fixed-height  - Card with fixed height (clips content)
//
// CELL:
//   .md-grid-cell               - Individual cell
//   .md-grid-cell-value         - Cell value wrapper
//
// ACTIONS:
//   .md-grid-actions-cell       - Actions cell container
//   .md-grid-action-btn         - Action button base
//   .md-grid-action-edit        - Edit button
//   .md-grid-action-save        - Save button
//   .md-grid-action-cancel      - Cancel button
//
// ACTION ICONS:
//   .md-grid-icon-edit          - Edit icon (pencil)
//   .md-grid-icon-save          - Save icon (checkmark)
//   .md-grid-icon-cancel        - Cancel icon (X)
//
// FOOTER / PAGINATION:
//   .md-grid-footer             - Footer container
//   .md-grid-pager              - Pager container
//   .md-grid-pager-btn          - Pager button
//   .md-grid-pager-info         - Page info text (e.g., "1 / 5")
//
// PAGER ICONS:
//   .md-grid-icon-first         - First page icon
//   .md-grid-icon-prev          - Previous page icon
//   .md-grid-icon-next          - Next page icon
//   .md-grid-icon-last          - Last page icon
//
// ═══════════════════════════════════════════════════════════════════════════

.md-grid-bordered {
  // ═════════════════════════════════════════════════════════════════════════
  // HOST STYLES
  // ═════════════════════════════════════════════════════════════════════════

  &.md-grid,
  .md-grid {
    font-family: $base-font-family;
    font-size: 13px;
    background: $White;
    border: 1px solid $Light-Gray-2;
    border-radius: $default-border-size;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  // ═════════════════════════════════════════════════════════════════════════
  // SCROLL CONTAINER
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-scroll-container {
    &::-webkit-scrollbar {
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: $Light-Gray-3;
    }

    &::-webkit-scrollbar-thumb {
      background: $Light-Gray-1;
      border-radius: 4px;

      &:hover {
        background: $Dark-Gray-2;
      }
    }
  }

  // ═════════════════════════════════════════════════════════════════════════
  // HEADER
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-header {
    border-bottom: 1px solid $Light-Gray-2;
  }

  .md-grid-header-cell {
    padding: 12px 16px;
    background: $White;
    font-size: 12px;
    font-weight: 600;
    color: $Dark-Gray-2;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    // No separator between cells in bordered mode
    &:not(:first-child) {
      border-left: none;
    }

    &.sortable {
      &:hover {
        background: $Light-Gray-3;
      }

      &:focus {
        outline: 2px solid $Link;
        outline-offset: -2px;
      }
    }

    &.sort-active {
      color: $Link;
    }
  }

  // ═════════════════════════════════════════════════════════════════════════
  // SORT ICONS
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-sort-icon {
    margin-left: 4px;
    color: $Light-Gray-1;

    &.md-grid-sort-asc,
    &.md-grid-sort-desc {
      color: $Link;
    }
  }

  // ═════════════════════════════════════════════════════════════════════════
  // RESIZE HANDLE
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-resize-handle {
    right: 0;
    width: 8px;

    &::after {
      width: 2px;
    }

    &:hover::after {
      background: $Link;
    }
  }

  // ═════════════════════════════════════════════════════════════════════════
  // BODY
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-body {
    padding: 8px;
    background: $Light-Gray-3;
  }

  .md-grid-empty {
    background: $White;
    border: 1px solid $Light-Gray-2;
    border-radius: $default-border-size;
  }

  .md-grid-empty-text {
    color: $Dark-Gray-2;
  }

  // ═════════════════════════════════════════════════════════════════════════
  // GROUPS
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-group {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .md-grid-group-header {
    padding: 8px 12px;
    margin-bottom: 8px;
    background: $Light-Gray-2;
    border-radius: $default-border-size;
    font-size: 13px;
    font-weight: 600;
    color: $Dark-Gray-1;
  }

  .md-grid-group-rows {
    gap: 8px;
  }

  // ═════════════════════════════════════════════════════════════════════════
  // CARD (ROW)
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-card {
    background: $White;
    border: 1px solid $Light-Gray-2;
    border-radius: $default-border-size;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;

    &:hover {
      background: $Light-Gray-3;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      transform: none;
    }

    &.md-grid-card-editing {
      background: #fffef5;
      border-color: $Yellow;
      box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
    }
  }

  // ═════════════════════════════════════════════════════════════════════════
  // CELL
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-cell {
    padding: 12px 16px;
    font-size: 14px;
    color: $Black-Color;
    border-right: 1px solid $Light-Gray-2;

    &:last-child {
      border-right: none;
    }
  }

  .md-grid-cell-value {
    line-height: 1.4;
  }

  // ═════════════════════════════════════════════════════════════════════════
  // ACTIONS CELL
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-actions-cell {
    padding: 8px 12px;
    gap: 4px;
    min-width: 80px;
    border-left: 1px solid $Light-Gray-2;
  }

  // ═════════════════════════════════════════════════════════════════════════
  // ACTION BUTTONS
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:hover {
      transform: none;
    }
  }

  .md-grid-action-edit {
    color: $Link;

    &:hover {
      background: rgba($Link, 0.1);
    }
  }

  .md-grid-action-save {
    color: $Green;

    &:hover {
      background: rgba($Green, 0.1);
    }
  }

  .md-grid-action-cancel {
    color: $Red;

    &:hover {
      background: rgba($Red, 0.1);
    }
  }

  // ═════════════════════════════════════════════════════════════════════════
  // ACTION ICONS
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-icon-edit,
  .md-grid-icon-save,
  .md-grid-icon-cancel {
    width: 16px;
    height: 16px;
  }

  // ═════════════════════════════════════════════════════════════════════════
  // FOOTER / PAGINATION
  // ═════════════════════════════════════════════════════════════════════════

  .md-grid-footer {
    padding: 8px 16px;
    background: $White;
    border-top: 1px solid $Light-Gray-2;
    font-size: 12px;
    color: $Dark-Gray-2;
  }

  .md-grid-pager {
    gap: 4px;
  }

  .md-grid-pager-btn {
    width: 28px;
    height: 28px;
    border: 1px solid $Light-Gray-2;
    border-radius: 4px;
    background: $White;
    color: $Dark-Gray-2;

    &:hover:not(:disabled) {
      background: $Light-Gray-3;
      border-color: $Light-Gray-1;
    }

    &:disabled {
      opacity: 0.4;
    }
  }

  .md-grid-pager-info {
    padding: 0 12px;
    font-weight: 500;
  }

  // ═════════════════════════════════════════════════════════════════════════
  // PAGINATOR PAGE SIZE
  // ═════════════════════════════════════════════════════════════════════════

  .md-paginator-page-size-select {
    border-color: $Light-Gray-2;
    background: $White;

    &:hover {
      border-color: $Light-Gray-1;
    }

    &:focus {
      border-color: $Link;
    }
  }

  // ═════════════════════════════════════════════════════════════════════════
  // RESPONSIVE
  // ═════════════════════════════════════════════════════════════════════════

  @media (max-width: 768px) {
    &.md-grid,
    .md-grid {
      font-size: 12px;
    }

    .md-grid-header {
      display: none;
    }

    .md-grid-body {
      padding: 8px;
    }

    .md-grid-card {
      flex-direction: column;
    }

    .md-grid-cell {
      padding: 10px 12px;
      border-right: none;
      border-bottom: 1px solid $Light-Gray-2;

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

    .md-grid-actions-cell {
      border-left: none;
      border-top: 1px solid $Light-Gray-2;
      justify-content: center;
    }

    .md-grid-footer {
      flex-direction: column;
      gap: 8px;
      padding: 8px 12px;
    }
  }
}

// ═══════════════════════════════════════════════════════════════════════════
// MODIFIER: Zebra striping (alternating row colors)
// ═══════════════════════════════════════════════════════════════════════════

.md-grid-bordered.zebra {
  .md-grid-body {
    background: $White;
  }

  .md-grid-card {
    border: none;
    border-radius: 0;
    box-shadow: none;

    &:nth-child(odd) {
      background: $White;
    }

    &:nth-child(even) {
      background: $Light-Gray-3;
    }

    &:hover {
      background: color.mix($Light-Gray-1, $White, 25%) !important;
    }
  }
}

// ═══════════════════════════════════════════════════════════════════════════
// MODIFIER: Compact (smaller padding)
// ═══════════════════════════════════════════════════════════════════════════

.md-grid-bordered.compact {
  .md-grid-header-cell {
    padding: 8px 10px;
    font-size: 11px;
  }

  .md-grid-body {
    padding: 6px;
  }

  .md-grid-group-rows {
    gap: 4px;
  }

  .md-grid-card {
    border-radius: 4px;
  }

  .md-grid-cell {
    padding: 8px 10px;
    font-size: 12px;
  }

  .md-grid-actions-cell {
    padding: 6px 8px;
    min-width: 60px;
  }

  .md-grid-action-btn {
    width: 24px;
    height: 24px;
  }

  .md-grid-footer {
    padding: 6px 12px;
  }

  .md-grid-pager-btn {
    width: 24px;
    height: 24px;
  }
}

// ═══════════════════════════════════════════════════════════════════════════
// DARK THEME
// ═══════════════════════════════════════════════════════════════════════════

.bg-dark .md-grid-bordered,
.dark-mode .md-grid-bordered,
.md-grid-bordered.dark-theme {
  &.md-grid,
  .md-grid {
    background: color.mix($Dark-Gray-1, $Black-Color, 90%);
    border-color: color.mix($Dark-Gray-2, $Black-Color, 70%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }

  .md-grid-scroll-container {
    &::-webkit-scrollbar-track {
      background: color.mix($Dark-Gray-1, $Black-Color, 80%);
    }

    &::-webkit-scrollbar-thumb {
      background: $Dark-Gray-2;

      &:hover {
        background: $Light-Gray-1;
      }
    }
  }

  .md-grid-header {
    background: color.mix($Dark-Gray-2, $Black-Color, 85%);
    border-bottom-color: color.mix($Dark-Gray-1, $Black-Color, 60%);
  }

  .md-grid-header-cell {
    background: color.mix($Dark-Gray-2, $Black-Color, 85%);
    color: $Light-Gray-2;

    &.sortable:hover {
      background: color.mix($Dark-Gray-1, $Black-Color, 70%);
    }

    &.sort-active {
      color: $Link-on-dark;
    }
  }

  .md-grid-sort-icon {
    color: $Dark-Gray-2;

    &.md-grid-sort-asc,
    &.md-grid-sort-desc {
      color: $Link-on-dark;
    }
  }

  .md-grid-resize-handle {
    &:hover::after {
      background: $Link-on-dark;
    }
  }

  .md-grid-body {
    background: color.mix($Dark-Gray-1, $Black-Color, 85%);
  }

  .md-grid-group-header {
    background: color.mix($Dark-Gray-2, $Black-Color, 75%);
    color: $Light-Gray-2;
  }

  .md-grid-card {
    background: color.mix($Dark-Gray-1, $Black-Color, 95%);
    border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

    &:hover {
      background: color.mix($Dark-Gray-2, $Black-Color, 80%);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    &.md-grid-card-editing {
      background: color.mix($Yellow, $Black-Color, 15%);
      border-color: $Yellow;
      box-shadow: 0 0 0 3px rgba($Yellow, 0.3);
    }
  }

  .md-grid-cell {
    color: $Light-Gray-2;
    border-right-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
  }

  .md-grid-actions-cell {
    border-left-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
  }

  .md-grid-action-edit {
    color: $Link-on-dark;

    &:hover {
      background: color.mix($Link-on-dark, $Black-Color, 25%);
    }
  }

  .md-grid-action-save {
    color: $Green;

    &:hover {
      background: color.mix($Green, $Black-Color, 25%);
    }
  }

  .md-grid-action-cancel {
    color: $Red;

    &:hover {
      background: color.mix($Red, $Black-Color, 25%);
    }
  }

  .md-grid-footer {
    background: color.mix($Dark-Gray-2, $Black-Color, 85%);
    border-top-color: color.mix($Dark-Gray-1, $Black-Color, 60%);
    color: $Light-Gray-2;
  }

  .md-grid-pager-btn {
    background: color.mix($Dark-Gray-1, $Black-Color, 95%);
    border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
    color: $Light-Gray-2;

    &:hover:not(:disabled) {
      background: color.mix($Dark-Gray-2, $Black-Color, 80%);
      border-color: $Light-Gray-1;
      color: $White;
    }
  }

  .md-grid-pager-info {
    color: $Light-Gray-2;
  }

  .md-grid-empty {
    background: color.mix($Dark-Gray-1, $Black-Color, 95%);
    border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
  }

  .md-grid-empty-text {
    color: $Light-Gray-2;
  }

  .md-paginator-page-size-label {
    color: $Light-Gray-2;
  }

  .md-paginator-page-size-select {
    background: color.mix($Dark-Gray-1, $Black-Color, 95%);
    border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
    color: $Light-Gray-2;

    &:hover {
      border-color: $Light-Gray-1;
    }
  }

  // Zebra in dark mode
  &.zebra {
    .md-grid-body {
      background: color.mix($Dark-Gray-1, $Black-Color, 90%);
    }

    .md-grid-card {
      &:nth-child(odd) {
        background: color.mix($Dark-Gray-1, $Black-Color, 95%);
      }

      &:nth-child(even) {
        background: color.mix($Dark-Gray-1, $Black-Color, 85%);
      }

      &:hover {
        background: color.mix($Dark-Gray-2, $Black-Color, 75%) !important;
      }
    }
  }
}