/* Work Queue dashboard visuals only. This file does not define dashboard data, actions, or navigation. */

@media screen {
  .work-queue-workspace {
    align-content: start;
  }

  .work-queue-company {
    margin-bottom: var(--erp-space-2);
  }

  .work-queue-context {
    margin: 0 0 var(--erp-section-gap);
    color: var(--erp-text-muted);
    font-size: var(--erp-font-size-sm);
  }

  .work-queue-context strong { color: var(--erp-text-secondary); }

  .work-queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--erp-space-4);
  }

  .work-queue-card {
    --work-queue-accent: var(--erp-dashboard-receiving);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--erp-space-3);
    min-height: 152px;
    padding: var(--erp-space-5);
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-left: 3px solid var(--work-queue-accent);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-xs);
    color: var(--erp-text);
    transition: background-color var(--erp-duration-fast) var(--erp-ease-standard),
      border-color var(--erp-duration-fast) var(--erp-ease-standard),
      box-shadow var(--erp-duration-fast) var(--erp-ease-standard),
      transform var(--erp-duration-fast) var(--erp-ease-standard);
  }

  .work-queue-card--shipping { --work-queue-accent: var(--erp-dashboard-shipping); }
  .work-queue-card--reconciliation { --work-queue-accent: var(--erp-dashboard-reconciliation); }
  .work-queue-card--payment-reminder { --work-queue-accent: var(--erp-warning); }
  .work-queue-card--claim { --work-queue-accent: var(--erp-dashboard-reconciliation); }
  .work-queue-card--payment { --work-queue-accent: var(--erp-dashboard-disabled); }

  button.work-queue-card:hover {
    border-color: var(--erp-border-strong);
    border-left-color: var(--work-queue-accent);
    background: var(--erp-surface-hover);
    box-shadow: var(--erp-shadow-sm);
    transform: translateY(-1px);
  }

  button.work-queue-card:active { transform: translateY(1px); }

  button.work-queue-card:focus-visible {
    outline: none;
    box-shadow: var(--erp-shadow-focus);
  }

  .work-queue-card.is-disabled {
    border-left-color: var(--work-queue-accent);
    background: var(--erp-surface-muted);
    box-shadow: none;
    color: var(--erp-text-muted);
  }

  .work-queue-icon {
    width: var(--erp-control-height-md);
    height: var(--erp-control-height-md);
    border-radius: var(--erp-radius-md);
    background: color-mix(in srgb, var(--work-queue-accent) 12%, var(--erp-surface));
    color: var(--work-queue-accent);
  }

  .work-queue-card.is-disabled .work-queue-icon {
    background: var(--erp-surface-subtle);
    color: var(--work-queue-accent);
  }

  .work-queue-copy { gap: var(--erp-space-1); }

  .work-queue-copy strong {
    color: var(--erp-text);
    font-size: var(--erp-font-size-md);
    font-weight: var(--erp-font-weight-semibold);
    line-height: var(--erp-line-height-tight);
  }

  .work-queue-copy b {
    color: var(--erp-text);
    font-family: var(--erp-font-english);
    font-size: var(--erp-font-size-2xl);
    font-variant-numeric: tabular-nums;
    font-weight: var(--erp-font-weight-semibold);
    line-height: 1.1;
  }

  .work-queue-card.is-disabled .work-queue-copy b { font-size: var(--erp-font-size-lg); }

  .work-queue-copy small {
    color: var(--erp-text-muted);
    line-height: var(--erp-line-height-normal);
  }

  .work-queue-next {
    align-self: center;
    color: var(--work-queue-accent);
  }

  .work-queue-loading,
  .work-queue-error {
    gap: var(--erp-space-3);
    margin-bottom: var(--erp-section-gap);
  }

  .payment-reminder-detail-panel {
    display: grid;
    gap: var(--erp-space-4);
    margin-top: var(--erp-section-gap);
    padding: var(--erp-space-5);
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-xs);
  }

  .payment-reminder-detail-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--erp-space-3);
  }

  .payment-reminder-detail-panel > header h2,
  .payment-reminder-detail-panel > header p,
  .payment-reminder-bank h3 { margin: 0; }

  .payment-reminder-detail-panel > header h2 {
    font-size: var(--erp-font-size-lg);
    line-height: var(--erp-line-height-tight);
  }

  .payment-reminder-detail-panel > header p {
    margin-bottom: var(--erp-space-1);
    color: var(--erp-text-muted);
    font-size: var(--erp-font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  .payment-reminder-detail-banks {
    display: grid;
    gap: var(--erp-space-3);
  }

  .payment-reminder-bank {
    overflow: hidden;
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-md);
  }

  .payment-reminder-bank h3 {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    padding: var(--erp-space-3) var(--erp-space-4);
    border-bottom: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    background: var(--erp-surface-subtle);
    font-size: var(--erp-font-size-md);
  }

  .payment-reminder-bank h3 small {
    margin-left: auto;
    color: var(--erp-text-secondary);
    font-size: var(--erp-font-size-sm);
    font-variant-numeric: tabular-nums;
    font-weight: var(--erp-font-weight-normal);
  }

  .payment-reminder-type + .payment-reminder-type {
    border-top: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
  }

  .payment-reminder-type-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--erp-space-2);
    width: 100%;
    min-height: var(--erp-control-height-lg);
    padding: var(--erp-space-3) var(--erp-space-4);
    border: 0;
    background: var(--erp-surface);
    color: var(--erp-text);
    text-align: left;
  }

  .payment-reminder-type-toggle:hover { background: var(--erp-surface-hover); }
  .payment-reminder-type-toggle:focus-visible { outline: none; box-shadow: inset var(--erp-shadow-focus); }
  .payment-reminder-type-toggle > span:last-child { color: var(--erp-text-secondary); font-variant-numeric: tabular-nums; }
  .payment-reminder-chevron { display: inline-flex; color: var(--work-queue-accent); }

  .payment-reminder-detail {
    display: grid;
    gap: var(--erp-space-3);
    padding: 0 var(--erp-space-4) var(--erp-space-4) calc(var(--erp-space-4) + 24px);
  }

  .payment-reminder-company {
    display: grid;
    gap: var(--erp-space-2);
  }

  .payment-reminder-company-summary {
    display: flex;
    justify-content: space-between;
    gap: var(--erp-space-3);
    color: var(--erp-text-secondary);
    font-size: var(--erp-font-size-sm);
  }

  .payment-reminder-company-summary span { font-variant-numeric: tabular-nums; }

  .payment-reminder-items {
    display: grid;
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-sm);
    overflow: hidden;
  }

  .payment-reminder-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--erp-space-3);
    min-height: var(--erp-control-height-md);
    padding: var(--erp-space-2) var(--erp-space-3);
    border: 0;
    background: var(--erp-surface);
    color: var(--erp-text);
    text-align: left;
  }

  .payment-reminder-item + .payment-reminder-item { border-top: var(--erp-border-width) var(--erp-border-style) var(--erp-border); }
  .payment-reminder-item:hover { background: var(--erp-surface-hover); }
  .payment-reminder-item:focus-visible { outline: none; box-shadow: inset var(--erp-shadow-focus); }
  .payment-reminder-item strong { font-variant-numeric: tabular-nums; }

  .claim-reminder-detail-panel .payment-reminder-item > span {
    display: grid;
    gap: var(--erp-space-1);
  }

  .claim-reminder-detail-panel .payment-reminder-item small {
    color: var(--erp-text-muted);
    font-size: var(--erp-font-size-sm);
  }

}

@media screen and (max-width: 1100px) {
  .work-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 760px) {
  .work-queue-grid { grid-template-columns: 1fr; }

  .work-queue-card {
    min-height: 136px;
    padding: var(--erp-space-4);
  }

  .payment-reminder-detail-panel { padding: var(--erp-space-4); }
  .payment-reminder-bank h3 { align-items: flex-start; flex-wrap: wrap; }
  .payment-reminder-bank h3 small { width: 100%; margin-left: calc(16px + var(--erp-space-2)); }
  .payment-reminder-type-toggle { grid-template-columns: auto minmax(0, 1fr); }
  .payment-reminder-type-toggle > span:last-child { grid-column: 2; }
  .payment-reminder-detail { padding-left: var(--erp-space-4); }
  .payment-reminder-company-summary { align-items: flex-start; flex-direction: column; gap: var(--erp-space-1); }
  .payment-reminder-item { grid-template-columns: minmax(0, 1fr) auto; }
  .payment-reminder-item svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .work-queue-card { transition: none; }
  button.work-queue-card:hover,
  button.work-queue-card:active { transform: none; }
}