/**
 * Skylark Customer Portal
 */
:root {
  --primary: #0A2540 !important;
  --success: #059669 !important;
  --danger: #DC2626 !important;

  /* Design tokens used throughout this stylesheet. These were previously only
     defined in the admin stylesheet, so on the customer portal they resolved to
     nothing — which made the balance cards render white text on no background. */
  --sk-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sk-primary: #0A2540;
  --sk-accent: #2563EB;
  --sk-accent-soft: #EFF6FF;
  --sk-surface: #F1F5F9;
  --sk-surface-2: #E2E8F0;
  --sk-card: #FFFFFF;
  --sk-text: #0F172A;
  --sk-text-muted: #64748B;
  --sk-border: rgba(15, 23, 42, 0.08);
  --sk-success: #059669;
  --sk-danger: #DC2626;
  --sk-warning: #D97706;
  --sk-info: #0EA5E9;
  --sk-radius: 16px;
  --sk-radius-sm: 10px;
  --sk-shadow: 0 4px 24px rgba(10, 37, 64, 0.07);
  --sk-shadow-lg: 0 20px 50px rgba(10, 37, 64, 0.12);
  --sk-transition: 0.25s ease;
  --sk-gradient: linear-gradient(135deg, #0A2540 0%, #1E4A7A 45%, #2563EB 100%);
  --sk-gradient-soft: linear-gradient(135deg, #EFF6FF 0%, #F1F5F9 100%);
}

@keyframes skFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes skSpin { to { transform: rotate(360deg); } }

body.menu-position-side {
  font-family: var(--sk-font) !important;
  background: var(--sk-surface) !important;
}

.all-wrapper.solid-bg-all { background: var(--sk-surface) !important; }

.top-bar.color-scheme-bright {
  background: var(--sk-gradient) !important;
  box-shadow: 0 4px 30px rgba(10, 37, 64, 0.2);
  border: none !important;
}

.top-bar .logo-w img { max-height: 42px; filter: brightness(0) invert(1); }

.fancy-selector-w {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px);
  border-radius: var(--sk-radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.fancy-selector-current .fs-name, .fancy-selector-current .fs-sub { color: rgba(255,255,255,0.9) !important; }
.fancy-selector-current .fs-sub strong { color: #fff !important; font-weight: 700; }

.element-search input {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.menu-w.color-scheme-light {
  background: var(--sk-card) !important;
  border-right: 1px solid var(--sk-border) !important;
  box-shadow: 4px 0 24px rgba(10, 37, 64, 0.04);
}

.menu-w .main-menu > li > a {
  border-radius: var(--sk-radius-sm);
  margin: 2px 8px;
  transition: all var(--sk-transition);
  font-weight: 500;
}

.menu-w .main-menu > li > a:hover,
.menu-w .main-menu > li.selected > a {
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
}

.menu-w .main-menu > li > a .icon-w {
  background: var(--sk-surface) !important;
  border-radius: 10px;
  transition: background var(--sk-transition);
}

.menu-w .main-menu > li > a:hover .icon-w,
.menu-w .main-menu > li.selected > a .icon-w {
  background: var(--sk-accent) !important;
  color: #fff !important;
}

.menu-w .sub-header span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
}

.content-w { padding: 1.5rem 2rem 2rem !important; animation: skFadeUp 0.5s ease both; }

.content-box, .element-box {
  background: var(--sk-card) !important;
  border-radius: var(--sk-radius) !important;
  border: 1px solid var(--sk-border) !important;
  box-shadow: var(--sk-shadow) !important;
}

.element-header, h6.element-header {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--sk-primary) !important;
  letter-spacing: -0.02em;
}

.element-actions .btn { border-radius: var(--sk-radius-sm) !important; font-weight: 600 !important; }
.element-actions .btn-primary { background: var(--sk-gradient) !important; border: none !important; }
.element-actions .btn-success { background: var(--sk-success) !important; border: none !important; }

.element-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

.element-balances .balance {
  background: var(--sk-gradient) !important;
  border-radius: var(--sk-radius) !important;
  padding: 1.5rem !important;
  color: #fff !important;
  box-shadow: var(--sk-shadow-lg);
  transition: transform var(--sk-transition);
  border: none !important;
}

.element-balances .balance:hover { transform: translateY(-4px); }

.element-balances .balance-title,
.element-balances .balance .balance-title {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.element-balances .balance-value,
.element-balances .balance .balance-value,
.element-balances .balance-value span,
.element-balances .balance .balance-value span {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
}

body.auth-wrapper {
  font-family: var(--sk-font) !important;
  background: var(--sk-gradient-soft) !important;
  min-height: 100vh;
}

.auth-box-w {
  background: var(--sk-card) !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow-lg) !important;
  border: 1px solid var(--sk-border) !important;
  padding: 2.5rem !important;
  animation: skFadeUp 0.6s ease both;
}

.auth-box-w .auth-header {
  font-weight: 800 !important;
  color: var(--sk-primary) !important;
  font-size: 1.5rem !important;
}

.auth-box-w .btn-primary {
  width: 100%;
  padding: 0.75rem !important;
  background: var(--sk-gradient) !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: var(--sk-radius-sm) !important;
}

.form-header { font-weight: 800 !important; color: var(--sk-primary) !important; }

.form-buttons-w .btn-primary {
  background: var(--sk-gradient) !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: var(--sk-radius-sm) !important;
}

.sk-quick-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }

.sk-quick-action {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.25rem;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--sk-transition);
  box-shadow: var(--sk-shadow);
}

.sk-quick-action:hover {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
  transform: translateY(-2px);
  box-shadow: var(--sk-shadow-lg);
}

.sk-quick-action i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sk-accent-soft);
  color: var(--sk-accent);
  border-radius: 10px;
}

.breadcrumb { background: transparent !important; padding: 0 0 1rem !important; }
.breadcrumb a { color: var(--sk-accent) !important; text-decoration: none; }

@media (max-width: 768px) {
  .content-w { padding: 1rem !important; }
}

/* =====================================================================
   Dashboard / portal UI enhancement layer (visual only).
   Scoped to .content-w so customer-portal pages get a cleaner, smoother
   look without any change to markup, form fields, or logic.
   ===================================================================== */

body.menu-position-side, body.auth-wrapper {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Section headers with a subtle accent bar */
.content-w .element-header,
.content-w h6.element-header {
  position: relative;
  padding-left: 0.85rem;
  margin-bottom: 1.1rem;
}
.content-w .element-header::before,
.content-w h6.element-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 4px;
  height: 1em;
  background: var(--sk-gradient);
  border-radius: 4px;
}

/* Balance cards: refined depth + decorative accent */
.element-balances .balance { position: relative; overflow: hidden; }
.element-balances .balance::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.element-balances .balance-link a { color: rgba(255, 255, 255, 0.95) !important; font-weight: 600; }
.element-balances .balance-link a:hover { color: #fff !important; }

/* Generic cards (e.g. Account Details) align to the design system */
.content-w .card {
  background: var(--sk-card) !important;
  border: 1px solid var(--sk-border) !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow) !important;
  overflow: hidden;
}
.content-w .card .card-block { padding: 1.5rem !important; }
.content-w .card .card-title {
  font-weight: 800 !important;
  color: var(--sk-primary) !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.01em;
  margin-bottom: 1rem !important;
}

/* Tables: clean, readable, with row hover */
.content-w table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.content-w table.table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sk-text-muted) !important;
  border-bottom: 1px solid var(--sk-border) !important;
  border-top: none !important;
  padding: 0.75rem 0.85rem !important;
  background: transparent !important;
}
.content-w table.table tbody td {
  padding: 0.8rem 0.85rem !important;
  border-top: 1px solid var(--sk-border) !important;
  color: var(--sk-text) !important;
  vertical-align: middle !important;
}
.content-w table.table tbody tr { transition: background var(--sk-transition); }
.content-w table.table.table-striped tbody tr:nth-child(odd) { background: var(--sk-surface) !important; }
.content-w table.table tbody tr:hover { background: var(--sk-accent-soft) !important; }

/* Account Details: muted label column, emphasized value column */
.content-w .card-block table.table td:first-child { color: var(--sk-text-muted) !important; font-weight: 500; width: 45%; }
.content-w .card-block table.table td:last-child { font-weight: 700; color: var(--sk-primary) !important; }

/* Status badges -> soft pills */
.content-w .badge {
  display: inline-block;
  padding: 0.35em 0.7em !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em;
}
.content-w .badge-success { background: rgba(5, 150, 105, 0.12) !important; color: #047857 !important; }
.content-w .badge-warning { background: rgba(217, 119, 6, 0.14) !important; color: #b45309 !important; }
.content-w .badge-danger  { background: rgba(220, 38, 38, 0.12) !important; color: #b91c1c !important; }
.content-w .badge-secondary { background: rgba(100, 116, 139, 0.14) !important; color: #475569 !important; }

/* Dashboard alerts */
.content-w .alert {
  border: 1px solid var(--sk-border);
  border-left: 4px solid var(--sk-accent);
  border-radius: var(--sk-radius-sm);
  padding: 0.9rem 1.1rem;
  background: var(--sk-card);
  color: var(--sk-text);
  box-shadow: var(--sk-shadow);
  margin-bottom: 1rem;
  position: relative;
}
.content-w .alert.success { border-left-color: var(--sk-success); }
.content-w .alert .closebtn { float: right; cursor: pointer; font-weight: 700; opacity: 0.6; }
.content-w .alert .closebtn:hover { opacity: 1; }

/* Buttons: smoother interaction */
.content-w .btn { border-radius: var(--sk-radius-sm) !important; font-weight: 600 !important; transition: all var(--sk-transition) !important; }
.content-w .btn:hover { transform: translateY(-1px); }
.content-w .btn-primary { background: var(--sk-gradient) !important; border: none !important; }
.content-w .btn-success { background: var(--sk-success) !important; border: none !important; }
.content-w .btn-danger { background: var(--sk-danger) !important; border: none !important; }
.content-w .btn-sm { padding: 0.4rem 0.8rem !important; }

/* Virtual card: premium gradient + depth (3D flip preserved) */
.content-w .card__front.card__part {
  background: linear-gradient(135deg, #0a2540 0%, #1e4a8a 55%, #2563eb 100%) !important;
  box-shadow: 0 12px 30px rgba(10, 37, 64, 0.35) !important;
}
.content-w .card__back.card__part {
  background: linear-gradient(135deg, #0f1d33 0%, #1e3a5f 100%) !important;
  box-shadow: 0 12px 30px rgba(10, 37, 64, 0.35) !important;
}

/* Visa application modal */
#myModal .modal-content {
  border: none !important;
  border-radius: var(--sk-radius) !important;
  max-width: 520px;
  box-shadow: var(--sk-shadow-lg);
}
#myModal .form-header { font-weight: 800 !important; color: var(--sk-primary) !important; }

/* Tighten quick actions on the dashboard */
.content-w .sk-quick-actions { margin-top: 0.25rem; }