/*
  Intentionally specific to override page-local styles targeting .tab-btn/.tab-content.
*/

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.key-requests-card #keyTabs {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  white-space: nowrap;
  flex-wrap: nowrap !important;
}
.key-requests-card #keyTabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.key-requests-card #keyTabs .tab-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.65rem 1.1rem 0.7rem !important;
  cursor: pointer;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transform: none !important;
  margin-bottom: -1px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

.key-requests-card #keyTabs .tab-btn:hover {
  color: #475569 !important;
  background: none !important;
}

.key-requests-card #keyTabs .tab-btn.active {
  background: none !important;
  color: #4f46e5 !important;
  border-bottom-color: #4f46e5 !important;
  font-weight: 700 !important;
}

/* ── Tab content ──────────────────────────────────────────────────────────── */
.key-requests-card #keyTabContents .tab-content { display: none !important; }
.key-requests-card #keyTabContents .tab-content.active { display: block !important; }
.key-requests-card .card-body { padding-top: 0.85rem !important; }

/* ── Ledger impact colours ────────────────────────────────────────────────── */
.key-requests-card .ledger-impact     { font-weight: 700; }
.key-requests-card .ledger-impact-in  { color: #059669; }
.key-requests-card .ledger-impact-out { color: #dc2626; }

#sentMobileCards, #receivedMobileCards { display: none; }

/* ── Mobile overrides ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Shrink tab label padding so all 4 fit (or scroll if still tight) */
  .key-requests-card #keyTabs .tab-btn {
    padding: 0.6rem 0.7rem 0.65rem !important;
    font-size: 0.75rem !important;
    width: auto !important;
  }

  /* Tighter card body */
  .key-requests-card .card-body {
    padding: 0.6rem 0.5rem 0.75rem !important;
  }

  /* Tables: smaller text + compact cells */
  .key-requests-card table {
    font-size: 12px;
  }
  .key-requests-card table thead th,
  .key-requests-card table tbody td {
    padding: 0.45rem 0.5rem !important;
  }

  /* ── My Requests: hide table, show mobile cards ── */
  .key-requests-card #sentTab .key-requests-table { display: none; }
  #sentMobileCards { display: flex; flex-direction: column; gap: 5px; padding: 6px 0 4px; }

  /* ── Team Requests: same treatment ── */
  .key-requests-card #receivedTab .key-requests-table { display: none; }
  #receivedMobileCards { display: flex; flex-direction: column; gap: 5px; padding: 6px 0 4px; }

  /* ── Request mobile card ── */
  .req-card {
    border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; overflow: hidden;
  }
  .req-card.req-pending  { border-color: #e5e7eb; }
  .req-card.req-pay      { border-color: #c4b5fd; background: #faf5ff; }
  .req-card.req-approved { border-color: #bbf7d0; background: #f0fdf4; }
  .req-card-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 11px 3px; gap: 8px;
  }
  .req-card-name  { font-size: 12px; font-weight: 700; color: #0f172a; }
  .req-card-meta  { font-size: 10px; color: #94a3b8; margin-top: 1px; }
  .req-card-amt   { font-size: 13px; font-weight: 800; color: #0f172a; flex-shrink: 0; }
  .req-card-bot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 11px 7px; gap: 6px; flex-wrap: wrap;
  }
  .req-card-status { font-size: 10px; font-weight: 700; flex-shrink: 0; }
  .req-card-actions { display: flex; gap: 5px; flex-shrink: 0; }
  .req-card-actions button,
  .req-card-actions a {
    padding: 5px 11px; font-size: 11px; font-weight: 700;
    border-radius: 7px; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none; white-space: nowrap;
  }
  .req-act-pay     { background: #6366f1; color: #fff; }
  .req-act-pay-v   { background: #7c3aed; color: #fff; }
  .req-act-cancel  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca !important; }
  .req-act-history { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0 !important; }
  .req-act-receipt { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe !important; }
  .req-act-review  { background: #6366f1; color: #fff; }
  .req-act-resend  { background: #6366f1; color: #fff; }

  /* ── Key History: hide Before, Type, Approved By columns ── */
  .key-requests-card #transactionsTab table th:nth-child(3),
  .key-requests-card #transactionsTab table td:nth-child(3),
  .key-requests-card #transactionsTab table th:nth-child(6),
  .key-requests-card #transactionsTab table td:nth-child(6),
  .key-requests-card #transactionsTab table th:nth-child(8),
  .key-requests-card #transactionsTab table td:nth-child(8) { display: none; }

  /* ── Payments: hide Currency column ── */
  .key-requests-card #paymentsTab table th:nth-child(4),
  .key-requests-card #paymentsTab table td:nth-child(4) { display: none; }

  /* Flow indicator wraps naturally — give it room */
  .key-requests-card #sentTab td:first-child { min-width: 110px; }

  /* Action buttons smaller */
  .key-requests-card .btn-sm {
    font-size: 11px !important;
    padding: 3px 7px !important;
  }

  /* Value / amount column: compact */
  .key-requests-card #sentTab     table td:nth-child(3),
  .key-requests-card #receivedTab table td:nth-child(3) {
    font-size: 11px;
    white-space: nowrap;
  }

  /* Key History info box */
  .key-requests-card #transactionsTab > div:first-child {
    font-size: 11px;
    padding: 8px 10px;
  }
}