/* ==========================================================================
   TABLE COMPONENTS
   ========================================================================== */

.table-container {
  background: var(--surface);
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  padding: var(--space-3);
  font-weight: 600;
  background: var(--gray-50);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

/* Right/center alignment inside a .table — must beat `.table th { text-align:left }`
   (0,1,1). Without this, `text-right`/`dash-text-right` (0,1,0) lose on headers, so
   right-aligned content ended up under a left-aligned header. Covers both the
   table utility (`text-right`) and the dashboard helper class (`dash-text-right`),
   on th AND td, so header alignment always follows the content. */
.table th.text-right,  .table td.text-right,
.table th.dash-text-right, .table td.dash-text-right { text-align: right; }
.table th.text-center, .table td.text-center,
.table th.dash-text-center, .table td.dash-text-center { text-align: center; }

table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ── Truncating cell content — wrap a long free-text value (descriptions,
   references, …) in `<span class="cell-truncate">` so it ellipsises instead
   of pushing a `white-space: nowrap` table past its container. Sibling
   content in the same cell (badges, counts) stays visible after it. Pair
   with a `title` attribute for a full-text tooltip. ── */
.cell-truncate {
  display: inline-block;
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
@media (max-width: 1100px) { .cell-truncate { max-width: 300px; } }
@media (max-width: 768px)  { .cell-truncate { max-width: 160px; } }

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

.table tbody tr:hover {
  background: var(--gray-50);
}

.table tbody tr {
  position: relative;
}

.table-totals td {
  border-top: 2px solid var(--border);
  background: var(--gray-50);
  font-weight: 600;
}

.table-preview {
  font-size: 0.75rem;
}

.table-preview th,
.table-preview td {
  padding: var(--space-2);
}

.table td .text-muted {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Line Items Table */
.line-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.line-items-table th {
  background: var(--gray-50);
  padding: var(--space-3);
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.line-items-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.line-items-table tbody tr:hover {
  background: var(--gray-50);
}

.line-items-table .line-item-input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--surface);
}

.line-items-table .line-item-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.line-items-table .line-item-input:invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.line-items-table .line-item-description {
  min-width: 200px;
}

.line-items-table .line-item-quantity,
.line-items-table .line-item-price,
.line-items-table .line-item-vat,
.line-items-table .line-item-total {
  width: 100px;
}

.line-items-table .line-item-actions {
  width: 60px;
  text-align: center;
}

.line-item-total-display {
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  padding: var(--space-2) var(--space-3);
}

/* Table Images */
.table-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

.table-image-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  color: #9ca3af;
}

/* Sticky actions column — only when last th is empty and last td contains entity-actions */
.table th:last-child:empty,
.table td:last-child:has(.entity-actions) {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  text-align: center;
  background: white;
}
.table th:last-child:empty {
  background: var(--gray-50);
  z-index: 2;
}
.table tr:hover td:last-child:has(.entity-actions) {
  background: var(--gray-50);
}
.table td:last-child:has(.entity-dropdown.show) {
  z-index: 1002;
}

/* Smart table positioning for last columns */
.table td:nth-last-child(1) .entity-dropdown,
.table td:nth-last-child(2) .entity-dropdown {
  right: 0;
  left: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .table-container { 
    margin: 0 calc(-1 * var(--space-4)); 
  }
  
  /* Line Items Table Mobile */
  .line-items-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .line-items-table thead,
  .line-items-table tbody,
  .line-items-table th,
  .line-items-table td,
  .line-items-table tr {
    display: block;
  }
  
  .line-items-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .line-items-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
  }
  
  .line-items-table td {
    border: none;
    position: relative;
    padding-left: 50% !important;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  
  .line-items-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: var(--space-3);
    width: 45%;
    padding-right: var(--space-2);
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
  }
  
  /* Line item input mobile sizing */
  .line-items-table .line-item-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Cross-entity navigation links in table cells (e.g. "Affaire" on
   quotes/invoices pointing to a job, "Devis" on build projects pointing
   to airfact). One source of truth for all cross-app / cross-module jump
   links — simple primary-coloured link, underline on hover. */
.job-link,
.dash-airfact-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.job-link:hover,
.dash-airfact-link:hover { text-decoration: underline; }

/* Cross-app jump pill — small uppercase chip with the destination app name
   and an external-link glyph. Used wherever a row in one app has a
   companion row in a sibling app and the jump should be discoverable
   without dominating the column.
   Used on both sides (Airfact rows pointing to Build, Build rows pointing
   to Airfact) so the pattern is recognisable across the platform. */
.cross-app-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: rgba(30, 64, 175, 0.08);
  border: 1px solid rgba(30, 64, 175, 0.2);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
}
.cross-app-pill:hover {
  background: rgba(30, 64, 175, 0.14);
  text-decoration: none;
}