/* ============================================================================
   Responsive Table System
   ============================================================================
   Three-tier responsive layout for data tables:
     Full     (1200px+)   — all columns visible, no changes
     Condensed (900-1199px) — low-priority columns hidden, tighter padding
     Card     (<900px)     — each row becomes a stacked card

   Usage:
     1. Add class="rt-responsive" to <table>
     2. Add data-col-priority="1|2|3" to each <th> and <td>
        Priority 1 = always visible (title, status, score, actions)
        Priority 2 = hidden below 999px (response, source, due date, assigned)
        Priority 3 = hidden below 1199px (sync, dates, version)
     3. Add data-label="Column Name" to each <td> (for card-view labels)
     4. Add data-col-role="title" to the title cell, "actions" to actions cell
   ============================================================================ */

/* ---------- Condensed tier: 900-1199px ---------- */

@media (max-width: 1199px) {
  table.rt-responsive {
    table-layout: auto !important;
  }

  table.rt-responsive th[data-col-priority="3"],
  table.rt-responsive td[data-col-priority="3"] {
    display: none;
  }

  table.rt-responsive th,
  table.rt-responsive td {
    padding: 10px 6px;
    font-size: 13px;
  }
}

@media (max-width: 999px) {
  table.rt-responsive th[data-col-priority="2"],
  table.rt-responsive td[data-col-priority="2"] {
    display: none;
  }
}

/* ---------- Card tier: below 900px ---------- */

@media (max-width: 899px) {
  table.rt-responsive {
    table-layout: auto !important;
    display: table !important;
  }

  table.rt-responsive thead {
    display: none;
  }

  table.rt-responsive tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--color-border, #2a2b45);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg-secondary, #12131f);
  }

  table.rt-responsive tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Default cell: flex row with label on left, value on right */
  table.rt-responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  table.rt-responsive td:last-child {
    border-bottom: none;
  }

  /* Label from data-label attribute */
  table.rt-responsive td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: auto;
    white-space: nowrap;
  }

  /* Title cell: tinted header row spanning full card width */
  table.rt-responsive td[data-col-role="title"] {
    flex-direction: column;
    align-items: flex-start;
    background: rgba(124, 92, 255, 0.1);
    border-bottom: 1px solid rgba(124, 92, 255, 0.15);
    padding: 10px 12px;
  }

  table.rt-responsive td[data-col-role="title"]::before {
    margin-bottom: 4px;
    background: rgba(124, 92, 255, 0.2);
    color: rgba(200, 180, 255, 0.8);
  }

  /* Title text styling */
  table.rt-responsive td[data-col-role="title"] a,
  table.rt-responsive td[data-col-role="title"] span,
  table.rt-responsive td[data-col-role="title"] {
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Actions cell: no label, wrap buttons */
  table.rt-responsive td[data-col-role="actions"] {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
  }

  table.rt-responsive td[data-col-role="actions"]::before {
    display: none;
  }

  /* Prevent value text and badges from spilling off card edge */
  table.rt-responsive td > * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  table.rt-responsive td > a {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Hide label-only cells (empty value cells with just a dash or nothing) */
  table.rt-responsive td:empty {
    display: none;
  }

  /* Priority 2 & 3 stay hidden in card view */
  table.rt-responsive td[data-col-priority="2"],
  table.rt-responsive td[data-col-priority="3"] {
    display: none;
  }

  /* Empty-state rows with colspan: single centered block */
  table.rt-responsive td[colspan] {
    display: block;
    text-align: center;
    border-bottom: none;
  }

  table.rt-responsive td[colspan]::before {
    display: none;
  }

  /* Batch checkbox column: position top-right of card */
  table.rt-responsive td.batch-col {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
    border-bottom: none;
  }

  table.rt-responsive td.batch-col::before {
    display: none;
  }

  /* Make card rows position relative for absolute batch checkbox */
  table.rt-responsive tbody tr:has(> td.batch-col) {
    position: relative;
    padding-right: 40px;
  }
}

/* ---------- Print: always show full table ---------- */

@media print {
  table.rt-responsive thead {
    display: table-header-group !important;
  }

  table.rt-responsive tbody tr {
    display: table-row !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
  }

  table.rt-responsive td {
    display: table-cell !important;
    border-bottom: 1px solid #ccc !important;
    padding: 6px 8px !important;
  }

  table.rt-responsive td::before {
    display: none !important;
  }

  table.rt-responsive th[data-col-priority],
  table.rt-responsive td[data-col-priority] {
    display: table-cell !important;
  }
}