/* ==========================================================================
   ZayanPay - Modern Neo-SaaS Design System
   Brand Color Palette: Sky Blue, Cyan, Slate, Soft Tech Gradients
   Inspired by: https://zayanpay.com/
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --zp-font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tblr-font-sans-serif: var(--zp-font-sans);

  /* Primary Brand Colors */
  --zp-sky-50: #F0F9FF;
  --zp-sky-100: #E0F2FE;
  --zp-sky-200: #BAE6FD;
  --zp-sky-400: #38BDF8;
  --zp-sky-500: #0EA5E9;
  --zp-sky-600: #0284C7;
  --zp-sky-700: #0369A1;

  --zp-cyan-400: #22D3EE;
  --zp-cyan-500: #06B6D4;
  --zp-cyan-600: #0891B2;

  --zp-gradient: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 100%);
  --zp-gradient-hover: linear-gradient(135deg, #0284C7 0%, #0891B2 100%);
  --zp-gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%);

  /* Neutral Slate */
  --zp-dark-900: #0F172A;
  --zp-dark-800: #1E293B;
  --zp-dark-700: #334155;
  --zp-gray-500: #64748B;
  --zp-gray-400: #94A3B8;
  --zp-gray-200: #E2E8F0;
  --zp-gray-100: #F1F5F9;
  --zp-gray-50: #F8FAFC;

  /* Overriding Tabler Core Variables */
  --tblr-primary: #0EA5E9;
  --tblr-primary-rgb: 14, 165, 233;
  --tblr-primary-fg: #FFFFFF;
  --tblr-body-color: #334155;
  --tblr-body-bg: #F8FAFC;
  --tblr-border-color: #E2E8F0;
  --tblr-border-radius: 12px;
  --tblr-border-radius-sm: 8px;
  --tblr-border-radius-lg: 16px;
  --tblr-border-radius-xl: 24px;
}

body {
  font-family: var(--zp-font-sans) !important;
  background-color: var(--zp-gray-50) !important;
  color: var(--zp-dark-700) !important;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Card & Container Styling
   ========================================================================== */
.card, .card-md {
  border: 1px solid var(--zp-gray-200) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.02) !important;
  background: #FFFFFF !important;
  transition: all 0.25s ease-in-out;
}

.card:hover {
  box-shadow: 0 20px 30px -10px rgba(14, 165, 233, 0.08) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--zp-gray-100) !important;
  padding: 1.25rem 1.5rem !important;
}

.card-title {
  color: var(--zp-dark-900) !important;
  font-weight: 700 !important;
  font-size: 1.15rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary, button[type="submit"].btn-primary {
  background: var(--zp-gradient) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 0.65rem 1.25rem !important;
  box-shadow: 0 4px 14px 0 rgba(14, 165, 233, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover, button[type="submit"].btn-primary:hover {
  background: var(--zp-gradient-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px 0 rgba(14, 165, 233, 0.45) !important;
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

/* ==========================================================================
   Form Inputs & Controls
   ========================================================================== */
.form-control, .form-select {
  border: 1.5px solid var(--zp-gray-200) !important;
  border-radius: 10px !important;
  padding: 0.65rem 0.95rem !important;
  font-size: 0.925rem !important;
  color: var(--zp-dark-800) !important;
  background-color: #FFFFFF !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--zp-sky-500) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15) !important;
  outline: none !important;
}

.form-label {
  font-weight: 600 !important;
  color: var(--zp-dark-800) !important;
  font-size: 0.88rem !important;
  margin-bottom: 0.4rem !important;
}

.form-check-input:checked {
  background-color: var(--zp-sky-500) !important;
  border-color: var(--zp-sky-500) !important;
}

/* ==========================================================================
   Navbar & Sidebar Styling
   ========================================================================== */
.navbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--zp-gray-200) !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
}

.sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--zp-gray-200) !important;
  padding: 1rem !important;
}

.sidebar .nav-link {
  color: var(--zp-gray-500) !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  padding: 0.65rem 1rem !important;
  margin-bottom: 0.25rem !important;
  transition: all 0.2s ease;
}

.sidebar .nav-link:hover {
  background: var(--zp-sky-50) !important;
  color: var(--zp-sky-600) !important;
}

.sidebar .nav-link.active, .sidebar .nav-item.active > .nav-link {
  background: linear-gradient(90deg, #E0F2FE 0%, #F0F9FF 100%) !important;
  color: var(--zp-sky-700) !important;
  font-weight: 600 !important;
  border-left: 3.5px solid var(--zp-sky-500) !important;
}

.sidebar .nav-link .icon {
  color: inherit !important;
}

/* ==========================================================================
   Filter Pills & Gateway Navigation
   ========================================================================== */
.nav-pills-zayanpay {
  display: inline-flex;
  background: #F1F5F9;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.nav-pills-zayanpay .nav-link {
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--zp-gray-500);
  transition: all 0.2s ease;
}

.nav-pills-zayanpay .nav-link.active {
  background: #FFFFFF;
  color: var(--zp-sky-600);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Table Styling
   ========================================================================== */
.table {
  color: var(--zp-dark-800) !important;
  vertical-align: middle !important;
}

.table th {
  background: var(--zp-gray-50) !important;
  color: var(--zp-gray-500) !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--zp-gray-200) !important;
  padding: 0.85rem 1rem !important;
}

.table td {
  padding: 0.85rem 1rem !important;
  border-bottom: 1px solid var(--zp-gray-100) !important;
}

.table tbody tr:hover {
  background-color: #F8FAFC !important;
}

/* Status Indicator Dot */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.875rem;
}

.status-dot-active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* ==========================================================================
   Progress Stepper (Installer)
   ========================================================================== */
.zp-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 2.5rem;
}

.zp-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  cursor: default;
}

.zp-step-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--zp-gray-200);
  color: var(--zp-gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.zp-step-item.active .zp-step-circle {
  background: var(--zp-gradient);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.zp-step-item.completed .zp-step-circle {
  background: #10B981;
  border-color: transparent;
  color: #FFFFFF;
}

.zp-step-title {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--zp-gray-500);
  transition: color 0.3s ease;
}

.zp-step-item.active .zp-step-title {
  color: var(--zp-sky-600);
  font-weight: 700;
}