@use "sass:color";
$font-family: 'Helvetica Neue';
$bg-color: #ffffff;
$border-color: #e5e7eb;
$text-primary: #1f2937;
$text-secondary: #6b7280;
$text-muted: #9ca3af;
$primary-color: #7b1fa2;
$primary-light: #f3e5f5;

.queue-page {
  font-family: $font-family;
  background-color: $bg-color;
  min-height: 100vh;
  padding: 24px 40px;
}

/* ================================
   HEADER
   ================================ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-left {
  .page-title {
    font-size: 20px;
    font-weight: 600;
    color: $primary-color;
    margin: 0 0 4px 0;
  }

  .page-subtitle {
    font-size: 13px;
    color: $text-secondary;
    margin: 0;
  }
}

.header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: $primary-color;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  &:hover {
    background: color.adjust($primary-color, $lightness: -10%);
  }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f3f4f6;
  color: $text-primary;
  border: 1px solid $border-color;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  &:hover {
    background: #e5e7eb;
  }
}

/* ================================
   FILTERS
   ================================ */
.filters-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
  min-width: 200px;

  .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: $text-muted;
    font-size: 20px;
    width: 20px;
    height: 20px;
    pointer-events: none;
  }

  .search-input {
    width: 100%;
    padding: 8px 12px 8px 40px;
    border: 1px solid $border-color;
    border-radius: 6px;
    font-size: 13px;
    color: $text-primary;
    background: white;
    outline: none;

    &::placeholder {
      color: $text-muted;
    }

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

.status-filter {
  position: relative;

  .status-select {
    appearance: none;
    padding: 8px 36px 8px 12px;
    border: 1px solid $border-color;
    border-radius: 6px;
    font-size: 13px;
    color: $text-primary;
    background: white;
    cursor: pointer;
    outline: none;
    min-width: 160px;

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

  .select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: $text-muted;
    pointer-events: none;
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

.type-filter {
  position: relative;

  .type-select {
    appearance: none;
    padding: 8px 36px 8px 12px;
    border: 1px solid $border-color;
    border-radius: 6px;
    font-size: 13px;
    color: $text-primary;
    background: white;
    cursor: pointer;
    outline: none;
    min-width: 160px;

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

  .select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: $text-muted;
    pointer-events: none;
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

/* ================================
   CARD
   ================================ */
.orders-card {
  background: white;
  border: 1px solid $border-color;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid $border-color;
  background: #fafafa;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: $text-primary;
  margin: 0;
}

/* ================================
   LOADING & EMPTY STATES
   ================================ */
.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  color: $text-muted;

  .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid $border-color;
    border-top-color: $primary-color;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
  }

  p {
    font-size: 14px;
    margin: 0;
  }
}

.empty-state {
  .empty-icon mat-icon {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #d1d5db;
  }

  .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin: 0 0 4px 0;
  }

  .empty-subtitle {
    font-size: 14px;
    color: $text-muted;
    margin: 0;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================================
   TABLE CONTAINER
   ================================ */
.table-container {
  overflow-x: auto;
  width: 100%;
}

/* ================================
   TABLE
   ================================ */
.orders-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;

  th {
    font-size: 12px;
    font-weight: 500;
    color: $text-secondary;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid $border-color;
    background: #fafafa;
    white-space: nowrap;
  }

  td {
    font-size: 13px;
    color: $text-primary;
    padding: 14px 16px;
    border-bottom: 1px solid $border-color;
    vertical-align: middle;
  }

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

  tr:hover td {
    background: #fafafa;
  }
}

/* ================================
   ORDER ID CELL
   ================================ */
.order-id-cell {
  .order-id-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .order-type {
    font-size: 12px;
    color: $text-muted;
  }

  .order-number {
    font-weight: 600;
    color: $text-primary;
  }
}

/* ================================
   BUYER CELL
   ================================ */
.buyer-cell {
  .buyer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .buyer-name {
    font-weight: 500;
    color: $text-primary;
    text-transform: uppercase;
    font-size: 12px;
  }

  .buyer-email {
    font-size: 12px;
    color: #3b82f6;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* ================================
   FILETYPE CELL
   ================================ */
.filetype-cell {
  .filetype-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;

    &.filetype-po {
      background: #fdf4ff;
      color: #a21caf;
      border: 1px solid #f5d0fe;
    }

    &.filetype-so {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #dbeafe;
    }

    &.filetype-bank {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #dcfce7;
    }

    &.filetype-vo {
      background: #fffbeb;
      color: #b45309;
      border: 1px solid #fef3c7;
    }

    &.filetype-task {
      background: #f5f3ff;
      color: #6d28d9;
      border: 1px solid #ede9fe;
    }

    &.filetype-xml {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #ffedd5;
    }

    &.filetype-default {
      background: #f9fafb;
      color: #4b5563;
      border: 1px solid #e5e7eb;
    }
  }
}

/* ================================
   FILENAME CELL
   ================================ */
.filename-cell {
  color: $text-secondary;
  font-size: 13px;
}

/* ================================
   STATUS CELL
   ================================ */
.status-cell {
  .status-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;

    &.status-completed {
      color: #16a34a;
    }

    &.status-validated {
      color: #2563eb;
    }

    &.status-processing {
      color: #4f46e5;
    }

    &.status-queued {
      color: #d97706;
    }

    &.status-failed {
      color: #dc2626;
    }
  }

  .sap-ref {
    font-size: 11px;
    color: #16a34a;
  }
}

/* ================================
   AMOUNT CELL
   ================================ */
.amount-cell {
  .amount-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .currency {
    font-size: 11px;
    color: $text-muted;
  }

  .amount {
    font-weight: 600;
    color: $text-primary;
  }
}

/* ================================
   DATE CELL
   ================================ */
.date-cell {
  .date-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .date-icon {
    display: none;
  }

  .date-text {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: $text-secondary;
    line-height: 1.3;
  }

  .date-month {
    font-weight: 500;
  }
}

/* ================================
   ACTIONS CELL
   ================================ */
.actions-cell {
  .actions-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid $border-color;
  border-radius: 6px;
  background: white;
  color: $text-muted;
  cursor: pointer;
  transition: all 0.15s ease;

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  &:hover {
    background: #f3f4f6;
    color: $text-primary;
  }
}

.action-btn-view,
.action-btn-edit,
.action-btn-settings,
.action-btn-external {
  &:hover {
    border-color: $text-muted;
  }
}

.action-btn-delete {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;

  &:hover {
    background: #fee2e2;
    border-color: #dc2626;
  }
}

.action-btn-sap {
  color: #0d9488;
  border-color: #99f6e4;
  background: #f0fdfa;

  &:hover {
    background: #ccfbf1;
    border-color: #0d9488;
  }
}

.action-btn-convert {
  color: #ea580c;
  border-color: #fed7aa;
  background: #fff7ed;

  &:hover {
    background: #ffedd5;
    border-color: #ea580c;
  }
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 1024px) {
  .queue-page {
    padding: 16px 20px;
  }

  .page-header {
    flex-direction: column;
    gap: 12px;
  }

  .filters-row {
    flex-direction: column;
  }

  .search-box {
    max-width: 100%;
  }

  .status-filter .status-select {
    width: 100%;
  }
}

@media print {
  .page-header button,
  .filters-row,
  .actions-cell {
    display: none !important;
  }
}