/*
 * OPLEX — always-rendered billing table styles.
 * Companion to frontend/shared/js/billingTable.js.
 */

/* ---------- Period row (bare, no .billing-period-card wrapper) ---------- */

.billing-period-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 4px;
}

.billing-period-row__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

/* Trigger width matched to the picker popup (280px) so the input
   field doesn't span the whole card while the dropdown is a narrow
   box — pre-fix it looked visually disconnected. The wrapper added
   by oplexMonthPicker.js (.oplex-month-wrap) inherits from this. */
.billing-period-row .oplex-month-wrap {
  width: 280px;
  max-width: 100%;
  flex: 0 0 auto;
}

/* Native input fallback (no JS / before enhancement) — keep the same
   width as the enhanced trigger so the layout doesn't pop on load. */
.billing-period-input--bare {
  width: 280px;
  max-width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
  transition: border-color 120ms, background 120ms;
}

.billing-period-input--bare:hover {
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
}

.billing-period-input--bare:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20);
}

.bt-loading,
.bt-empty,
.bt-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: #9ca3af;
  font-size: 13px;
  margin-top: 16px;
}

.bt-loading {
  flex-direction: row;
  padding: 20px;
}

.bt-loading svg {
  stroke: #60a5fa;
  fill: none;
}

.bt-spin { animation: bt-spin-anim 0.8s linear infinite; }
@keyframes bt-spin-anim { to { transform: rotate(360deg); } }

.bt-empty svg {
  stroke: #4b5563;
  fill: none;
  margin-bottom: 4px;
}

.bt-empty__title {
  font-size: 14px;
  font-weight: 600;
  color: #d1d5db;
}

.bt-empty__hint {
  font-size: 12px;
  color: #6b7280;
  max-width: 380px;
  text-align: center;
  line-height: 1.5;
}

.bt-error {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.05);
  color: #fca5a5;
}

/* ---------- Totals strip ---------- */

.bt-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 12px;
}

.bt-totals--four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .bt-totals,
  .bt-totals--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bt-totals__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.bt-totals__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.bt-totals__value {
  font-size: 17px;
  font-weight: 700;
  color: #f3f4f6;
  font-variant-numeric: tabular-nums;
}

.bt-totals__value--accent {
  color: #93c5fd;
}

.bt-totals__item--warn {
  border-color: rgba(239, 68, 68, 0.30);
  background: rgba(239, 68, 68, 0.06);
}

.bt-totals__value--warn {
  color: #fca5a5;
}

.bt-totals__sub {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Table ---------- */

.bt-table-wrap {
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.bt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.bt-table thead th {
  position: sticky;
  top: 0;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ca3af;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bt-table tbody tr {
  transition: background 100ms ease;
}

.bt-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.06);
}

.bt-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
  vertical-align: top;
}

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

.bt-cell-type {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bt-cell-type-name {
  font-weight: 500;
  color: #f3f4f6;
}

.bt-cell-type-id {
  font-size: 11px;
  color: #6b7280;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.bt-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bt-cell-strong {
  font-weight: 700;
  color: #f3f4f6;
}

.bt-cell-type-aux {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #d1d5db;
  vertical-align: top;
}

/* ---------- Additional fees sub-table header ---------- */

.bt-section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  margin-bottom: 8px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.bt-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fca5a5;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bt-section-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.bt-section-hint {
  font-size: 11px;
  color: #6b7280;
}

.bt-table-wrap--accent {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.03);
}

/* Row excluded from "Σ Opłaty dodatkowe" subtotal (e.g. AD_COD/Pobranie).
   Visible in the table for volume awareness but visually muted so the
   operator doesn't mistake it for a cost driver. */
.bt-row-passthrough td {
  opacity: 0.62;
}

.bt-row-passthrough .bt-cell-strong {
  font-weight: 500;
  color: #d1d5db;
}

.bt-passthrough-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 999px;
  vertical-align: middle;
  cursor: help;
}