/* AbdiSystem - Mandera North Campaign PWA Fluid Styles */
:root {
  --primary-color: #0b5ed7;
  --secondary-color: #198754;
  --accent-gold: #ffc107;
  --dark-navy: #0d1b2a;
}

html, body {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f8f9fa;
}

#appWrapper, main {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* GPU Accelerated Transitions (Rule compliance) */
.card, .btn, .badge, .modal.fade .modal-dialog {
  will-change: transform, opacity;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
}

.spin {
  display: inline-block;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* DataTables Styling */
.dataTables_wrapper .dt-buttons {
  margin-bottom: 0.75rem;
}

.dataTables_wrapper .dt-buttons .btn {
  margin-right: 0.35rem;
}

.status-badge-firm { background-color: #198754; color: #fff; }
.status-badge-leaning { background-color: #20c997; color: #fff; }
.status-badge-undecided { background-color: #ffc107; color: #212529; }
.status-badge-opposed { background-color: #dc3545; color: #fff; }

.status-badge-approved { background-color: #198754; color: #fff; }
.status-badge-pending { background-color: #ffc107; color: #212529; }
.status-badge-flagged { background-color: #dc3545; color: #fff; }

/* Masked phone display */
.phone-masked {
  font-family: monospace;
  letter-spacing: 0.05em;
  color: #495057;
}

/* PVT Live Counter */
.pvt-hero {
  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #415a77 100%);
  color: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.pvt-stat-num {
  font-size: 2.25rem;
  font-weight: 800;
}