/* A4AIR Transaction Manager — Main Stylesheet */

:root {
  --a4air-blue: #0d6efd;
  --a4air-dark: #1a1a2e;
}

body {
  background-color: #f8f9fa;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ─── Login Page ─────────────────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-logo {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
}

/* ─── Summary Cards ──────────────────────────────────────────────────────── */
.stat-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
}

.stat-card .stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6c757d;
}

/* ─── Transaction Cards (mobile) ─────────────────────────────────────────── */
.tx-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  margin-bottom: 12px;
}

.tx-badge-visa { background-color: #e3f2fd; color: #1565c0; }
.tx-badge-ticket { background-color: #e8f5e9; color: #2e7d32; }

/* ─── Service Type Selector ─────────────────────────────────────────────── */
.service-selector .card {
  cursor: pointer;
  border: 2px solid #dee2e6;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.service-selector .card:hover {
  border-color: var(--a4air-blue);
  background-color: #f0f6ff;
}

.service-selector input[type="radio"]:checked + .card {
  border-color: var(--a4air-blue);
  background-color: #e7f0ff;
}

.service-selector .card .bi {
  font-size: 2.5rem;
}

/* ─── Searchable Select ─────────────────────────────────────────────────── */
.searchable-select-wrapper {
  position: relative;
}

/* ─── Financial Preview ─────────────────────────────────────────────────── */
.financial-preview {
  background: linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%);
  border-radius: 10px;
  border: 1px solid #b8deff;
}

.financial-preview .amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0d6efd;
}

/* ─── Table ─────────────────────────────────────────────────────────────── */
.table-responsive {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.table thead th {
  background-color: #343a40;
  color: white;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  white-space: nowrap;
}

.table tbody tr:hover {
  background-color: #f0f6ff;
}

/* ─── Verification Badge ─────────────────────────────────────────────────── */
.badge-verification {
  font-size: 0.65rem;
  background-color: #fff3cd;
  color: #664d03;
  border: 1px solid #ffc107;
}

/* ─── Delete Confirmation ────────────────────────────────────────────────── */
.delete-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.delete-confirm-overlay.show {
  display: flex;
}

/* ─── Save Button State ──────────────────────────────────────────────────── */
.btn-save[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ─── Navigation Active ──────────────────────────────────────────────────── */
.navbar-nav .nav-link.active {
  font-weight: 600;
  background-color: rgba(255,255,255,0.15);
  border-radius: 6px;
}

/* ─── Charts ─────────────────────────────────────────────────────────────── */
.chart-container {
  position: relative;
  height: 260px;
}

/* ─── Mobile responsive tweaks ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .stat-card .stat-value { font-size: 1.2rem; }
  .table-desktop { display: none !important; }
  .cards-mobile { display: block !important; }
  main.container-fluid { padding-left: 12px; padding-right: 12px; }
}

@media (min-width: 769px) {
  .table-desktop { display: table !important; }
  .cards-mobile { display: none !important; }
}

/* ─── Alert toast ────────────────────────────────────────────────────────── */
.alert-floating {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1050;
  min-width: 300px;
  max-width: 480px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-radius: 10px;
}