/* ============================================================
   ClinicFlow Pro — css/tables.css
   BUG 1 FIX: Removed ALL rotateX transforms.
   Dashboard table no longer appears upside down.
   
   Scrollbar strategy:
   - .table-container        = base styles (NO transform)
   - .table-container.scrollbar-top = applied ONLY to
     #patients-table-container, #appointments-table-container,
     #debtors-table-container, #doctors-table-container
   - Dashboard "recent" table uses .table-container ONLY
   ============================================================ */

/* ── Base table container (NO rotateX) ── */
.table-container {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-light) var(--bg-main);
}

.table-container::-webkit-scrollbar { height: 6px; }
.table-container::-webkit-scrollbar-track { background: var(--bg-main); border-radius: 3px; }
.table-container::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 3px; }
.table-container::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── Table scroll wrapper — normal (no flip) ── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ──────────────────────────────────────────────────────
   .scrollbar-top  ← add this class ONLY to the 4 big
   data tables that benefit from a visible top scrollbar.
   Applied in app.html via:
     id="patients-table-container"       → add scrollbar-top
     id="appointments-table-container"   → add scrollbar-top
     id="debtors-table-container"        → add scrollbar-top
     id="doctors-table-container"        → add scrollbar-top
   Dashboard recent table → NO scrollbar-top
   ────────────────────────────────────────────────────── */
.table-container.scrollbar-top {
  /* Use padding-top to create visual space for scrollbar */
  /* The scrollbar renders natively at the bottom of the
     overflow element; we cannot move it without transforms.
     Instead we use a thin top border as visual indicator. */
  border-top: 3px solid var(--primary-light);
}

/* ── TABLE BASE ── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  min-width: 600px;
}

/* ── Table Head ── */
.table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.table thead tr { background: var(--primary); }

.table th {
  padding: 13px 16px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  border-bottom: 2px solid rgba(255,255,255,0.10);
}

.table th.sortable { cursor: pointer; }
.table th.sortable:hover { background: rgba(255,255,255,0.10); }

/* ── Table Body ── */
.table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:nth-child(even) { background: var(--table-stripe); }
.table tbody tr:hover { background: var(--table-hover); }

.table tbody tr.row-success { background: rgba(22,163,74,0.07) !important; }
.table tbody tr.row-warning { background: rgba(217,119,6,0.07) !important; }
.table tbody tr.row-danger  { background: rgba(220,38,38,0.07) !important; }

.table td {
  padding: 12px 16px;
  color: var(--text-primary);
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.table td:last-child { border-bottom: none; }

/* ── Cell Types ── */
.table .cell-name    { font-weight: 700; color: var(--text-primary); }
.table .cell-phone   { font-size: var(--font-size-sm); color: var(--text-secondary); direction: ltr; text-align: left; }
.table .cell-number  { font-weight: 700; text-align: center; }
.table .cell-money   { font-weight: 700; color: var(--success); direction: ltr; text-align: left; }
.table .cell-money.debt { color: var(--danger); }
.table .cell-date    { font-size: var(--font-size-sm); color: var(--text-secondary); white-space: nowrap; }
.table .cell-time    { font-size: var(--font-size-sm); color: var(--text-secondary); direction: ltr; text-align: center; }
.table .cell-muted   { color: var(--text-secondary); font-size: var(--font-size-sm); }

/* ── Action Buttons ── */
.table-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.table-actions .btn-icon { width: 30px; height: 30px; font-size: 15px; border-radius: var(--border-radius-sm); }
.table-actions .btn-icon:hover { background: var(--stat-icon-bg); }
.table-actions .btn-icon.danger:hover { background: rgba(220,38,38,.10); color: var(--danger); }

.table .col-actions { width: 1%; white-space: nowrap; text-align: center; }
.table .col-num { width: 48px; text-align: center; color: var(--text-secondary); font-size: 12px; }
.table .col-check { width: 44px; text-align: center; }
.table .col-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary-light); }

/* ── Table Footer ── */
.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--bg-main); flex-wrap: wrap; gap: 10px;
}
.table-count { font-size: var(--font-size-sm); color: var(--text-secondary); }
.table-count strong { color: var(--primary-light); }

/* ── Pagination ── */
.pagination { display: flex; align-items: center; gap: 4px; }
.pagination button {
  width: 32px; height: 32px; border-radius: var(--border-radius-sm);
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-primary); font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.pagination button:hover { background: var(--stat-icon-bg); border-color: var(--primary-light); color: var(--primary-light); }
.pagination button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ── Filter Panel ── */
.filter-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--border-radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 16px;
  animation: slideInDown 0.2s ease forwards;
}
.filter-panel.hidden { display: none; }
.filter-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filter-panel-header h4 { font-size: var(--font-size-md); font-weight: 700; }
.filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.filter-quick-dates { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.filter-quick-dates button {
  padding: 4px 10px; font-size: 12px; border: 1px solid var(--border);
  border-radius: 99px; background: var(--bg-main); color: var(--text-secondary);
  cursor: pointer; font-family: inherit; font-weight: 500; transition: all var(--transition);
}
.filter-quick-dates button:hover,
.filter-quick-dates button.active { border-color: var(--primary-light); color: var(--primary-light); background: var(--stat-icon-bg); }
.filter-panel-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Recent table (dashboard) ── */
.recent-table { min-width: unset; }
.recent-table th, .recent-table td { padding: 10px 14px; }
.recent-table th { font-size: 11px; }

/* ── Debt amount ── */
.debt-amount { font-weight: 800; color: var(--danger); }

/* ── Print ── */
@media print {
  .table-actions { display: none !important; }
  .table { font-size: 11px; min-width: unset; }
  .table thead tr { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table tbody tr { page-break-inside: avoid; }
  /* No transforms to undo on print */
}