/*
 * SmartBulk Messenger — Premium SaaS Theme
 * Additive layer. Rollback: remove <link> in layouts/app.blade.php
 */

/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --p-font:         'Inter', system-ui, sans-serif;
  --p-accent:       #25D366;
  --p-accent-dark:  #128C7E;
  --p-accent-glow:  rgba(37,211,102,.18);
  --p-sidebar-bg:   #0f1623;
  --p-sidebar-w:    252px;
  --p-topbar-bg:    rgba(255,255,255,.85);
  --p-body-bg:      #f0f2f8;
  --p-card-bg:      #ffffff;
  --p-card-radius:  14px;
  --p-radius-sm:    8px;
  --p-radius-lg:    20px;
  --p-shadow:       0 1px 4px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.07);
  --p-shadow-md:    0 8px 32px rgba(0,0,0,.13);
  --p-shadow-lg:    0 16px 56px rgba(0,0,0,.18);
  --p-border:       1px solid rgba(0,0,0,.07);
  --p-text:         #111827;
  --p-text-muted:   #6b7280;
  --p-transition:   0.17s cubic-bezier(.4,0,.2,1);
  --p-nav-hover:    rgba(255,255,255,.07);
  --p-nav-active-bg:linear-gradient(90deg,rgba(37,211,102,.18) 0%,rgba(37,211,102,.04) 100%);
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, html {
  font-family: var(--p-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

body.lw-authenticated-page {
  background: var(--p-body-bg) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(37,211,102,.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(18,140,126,.04) 0%, transparent 60%) !important;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--p-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  color: var(--p-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — dark premium panel
═══════════════════════════════════════════════════════════════════════════ */
/* Sidebar — keep white, just improve active contrast */
.navbar.lw-sidebar-container {
  border-right: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.06) !important;
}

/* Nav links base */
.navbar.lw-sidebar-container .navbar-nav .nav-link {
  border-radius: 8px !important;
  margin: 1px 8px !important;
  transition: all var(--p-transition) !important;
}

/* Hover */
.navbar.lw-sidebar-container .navbar-nav .nav-link:hover {
  background: rgba(37,211,102,.08) !important;
  color: var(--p-accent-dark) !important;
}

/* Active state — clear green left bar, green tint bg, bold text */
.navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active,
.lw-minimized-menu .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active,
.navbar.lw-sidebar-container .navbar-nav .nav-link.active,
#sidenav-main .nav-link.active {
  color: var(--p-accent-dark) !important;
  background: rgba(37,211,102,.12) !important;
  border-left: 3px solid var(--p-accent) !important;
  border-radius: 0 8px 8px 0 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  padding-left: calc(1rem - 3px) !important;
}

/* Active icon color */
.navbar.lw-sidebar-container .navbar-nav .nav-link.active .fa,
.navbar.lw-sidebar-container .navbar-nav .nav-link.active .fas,
.navbar.lw-sidebar-container .navbar-nav .nav-link.active .fab,
.navbar.lw-sidebar-container .navbar-nav .nav-link.active .ni,
#sidenav-main .nav-link.active .fa,
#sidenav-main .nav-link.active .fas,
#sidenav-main .nav-link.active .ni {
  color: var(--p-accent) !important;
}

/* Sub-menu active */
.navbar.lw-sidebar-container .nav-sm .nav-link.active {
  color: var(--p-accent-dark) !important;
  background: transparent !important;
  font-weight: 600 !important;
  border-left: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP NAVBAR
═══════════════════════════════════════════════════════════════════════════ */
#navbar-main {
  background: var(--p-topbar-bg) !important;
  backdrop-filter: blur(16px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,.07) !important;
  color: var(--p-text) !important;
}
#navbar-main .nav-link { color: var(--p-text-muted) !important; }
#navbar-main .nav-link:hover { color: var(--p-text) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--p-card-bg) !important;
  border-radius: var(--p-card-radius) !important;
  border: var(--p-border) !important;
  box-shadow: var(--p-shadow) !important;
  transition: box-shadow var(--p-transition), transform var(--p-transition) !important;
  overflow: hidden !important;
}
.card:hover {
  box-shadow: var(--p-shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* Card header — clean with subtle separator */
.card-header {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  border-radius: var(--p-card-radius) var(--p-card-radius) 0 0 !important;
  padding: 1rem 1.375rem !important;
  font-weight: 700 !important;
  font-size: .9375rem !important;
  color: var(--p-text) !important;
  letter-spacing: -0.01em !important;
}

/* Card with accent top border */
.card-header:first-child {
  border-top: 3px solid var(--p-accent) !important;
}

.card-body { padding: 1.375rem !important; }
.card-footer {
  background: rgba(0,0,0,.025) !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 0 0 var(--p-card-radius) var(--p-card-radius) !important;
  padding: .875rem 1.375rem !important;
}

/* Stat cards — gradient variant */
.card.bg-gradient-primary,
.card.bg-gradient-success,
.card.bg-gradient-info,
.card.bg-gradient-warning,
.card.bg-gradient-danger {
  border: none !important;
  transform: none !important;
}
.card.bg-gradient-success {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
}
.card.bg-gradient-primary {
  background: linear-gradient(135deg, #4f8ef7 0%, #2563eb 100%) !important;
}
.card.bg-gradient-info {
  background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
}
.card.bg-gradient-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}
.card.bg-gradient-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--p-font) !important;
  border-radius: var(--p-radius-sm) !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  letter-spacing: -.005em !important;
  padding: .5rem 1.125rem !important;
  transition: all var(--p-transition) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--p-transition);
  pointer-events: none;
}
.btn:hover::after { background: rgba(255,255,255,.1); }
.btn:active { transform: translateY(1px) scale(.99) !important; }
.btn-sm { padding: .35rem .8rem !important; font-size: .8125rem !important; }
.btn-lg { padding: .65rem 1.5rem !important; font-size: .9375rem !important; }

/* Primary / Success = WhatsApp green gradient */
.btn.btn-primary, .btn.btn-success {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37,211,102,.30) !important;
}
.btn.btn-primary:hover, .btn.btn-success:hover {
  box-shadow: 0 6px 20px rgba(37,211,102,.40) !important;
  transform: translateY(-1px) !important;
}

/* Light / Neutral / Default / White — clear outline style */
.btn.btn-light, .btn.btn-neutral, .btn.btn-default, .btn.btn-white, .btn.btn-secondary {
  background: #f4f6f9 !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  box-shadow: none !important;
}
.btn.btn-light:hover, .btn.btn-neutral:hover, .btn.btn-default:hover, .btn.btn-white:hover, .btn.btn-secondary:hover {
  background: #e9ecf1 !important;
  color: #111827 !important;
  border-color: #9ca3af !important;
}

/* Outline success */
.btn.btn-outline-success {
  border: 2px solid var(--p-accent) !important;
  color: var(--p-accent) !important;
  background: transparent !important;
}
.btn.btn-outline-success:hover {
  background: var(--p-accent) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS
═══════════════════════════════════════════════════════════════════════════ */
.form-control, .custom-select {
  font-family: var(--p-font) !important;
  border-radius: var(--p-radius-sm) !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  color: var(--p-text) !important;
  font-size: .875rem !important;
  padding: .5rem .875rem !important;
  transition: border-color var(--p-transition), box-shadow var(--p-transition) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--p-accent) !important;
  box-shadow: 0 0 0 3px var(--p-accent-glow) !important;
  outline: none !important;
}
.input-group-text {
  font-family: var(--p-font) !important;
  border-radius: var(--p-radius-sm) !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
}
label {
  font-weight: 600 !important;
  font-size: .8125rem !important;
  color: #374151 !important;
  margin-bottom: .35rem !important;
  letter-spacing: .01em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════════════════════════════ */
.table {
  font-family: var(--p-font) !important;
  font-size: .875rem !important;
}
.table thead th {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--p-text-muted) !important;
  border-bottom: 2px solid #e8ecf4 !important;
  padding: .75rem 1rem !important;
  background: #f8fafc !important;
}
.table td {
  padding: .75rem 1rem !important;
  vertical-align: middle !important;
  border-color: #f1f4f9 !important;
  color: var(--p-text) !important;
}
.table-hover tbody tr { transition: background var(--p-transition) !important; }
.table-hover tbody tr:hover { background: rgba(37,211,102,.04) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════════════════ */
.badge {
  font-family: var(--p-font) !important;
  border-radius: 6px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  padding: .28em .65em !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELDSETS
═══════════════════════════════════════════════════════════════════════════ */
fieldset:not(.filepond--file-wrapper) {
  border-radius: var(--p-card-radius) !important;
  border: var(--p-border) !important;
  box-shadow: var(--p-shadow) !important;
  background: #fff !important;
  overflow: hidden !important;
}
.card-body fieldset:not(.filepond--file-wrapper) legend {
  border-radius: 0 !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
  color: var(--p-text-muted) !important;
  padding: .7rem 1.2rem !important;
}
/* Fieldset expand button */
.lw-fieldset-legend {
  cursor: pointer;
  user-select: none;
  transition: background var(--p-transition) !important;
}
.lw-fieldset-legend:hover { background: #f1f4f9 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════════════════════ */
.modal-content {
  border-radius: var(--p-radius-lg) !important;
  border: none !important;
  box-shadow: var(--p-shadow-lg) !important;
  overflow: hidden !important;
  font-family: var(--p-font) !important;
}
.modal-header {
  padding: 1.2rem 1.5rem !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}
.modal-body { padding: 1.5rem !important; }
.modal-footer {
  padding: .9rem 1.5rem !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
  background: #f8fafc !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--p-radius-sm) !important;
  border: none !important;
  border-left: 4px solid currentColor !important;
  font-size: .875rem !important;
  font-family: var(--p-font) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWNS
═══════════════════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border-radius: var(--p-card-radius) !important;
  border: var(--p-border) !important;
  box-shadow: var(--p-shadow-md) !important;
  padding: .5rem !important;
  font-family: var(--p-font) !important;
}
.dropdown-item {
  border-radius: var(--p-radius-sm) !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  padding: .5rem .875rem !important;
  color: var(--p-text) !important;
  transition: background var(--p-transition) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(37,211,102,.08) !important;
  color: var(--p-text) !important;
}
.dropdown-item:before { border-radius: var(--p-radius-sm) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAV TABS
═══════════════════════════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 2px solid #e8ecf4 !important;
  gap: 2px !important;
}
.nav-tabs .nav-link {
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  color: var(--p-text-muted) !important;
  padding: .55rem 1.1rem !important;
  transition: all var(--p-transition) !important;
  font-family: var(--p-font) !important;
}
.nav-tabs .nav-link.active {
  color: var(--p-text) !important;
  background: transparent !important;
  border-bottom: 3px solid var(--p-accent) !important;
  margin-bottom: -2px !important;
}
.nav-tabs .nav-link:hover:not(.active) { background: rgba(0,0,0,.04) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TITLES + BREADCRUMBS
═══════════════════════════════════════════════════════════════════════════ */
.lw-page-title {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--p-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════════════════════ */
.main-content {
  background: transparent !important;
}
.main-content > .container-fluid,
.main-content > .container {
  padding-top: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATATABLE WRAPPERS
═══════════════════════════════════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--p-radius-sm) !important;
  border: 1.5px solid #e2e8f0 !important;
  font-size: .875rem !important;
  padding: .4rem .75rem !important;
  font-family: var(--p-font) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--p-accent) !important;
  box-shadow: 0 0 0 3px var(--p-accent-glow) !important;
  outline: none !important;
}
.dataTables_info, .dataTables_paginate {
  font-size: .8125rem !important;
  font-family: var(--p-font) !important;
  color: var(--p-text-muted) !important;
}
.page-item.active .page-link {
  border-radius: 6px !important;
}
.page-link {
  border-radius: 6px !important;
  font-size: .8125rem !important;
  font-family: var(--p-font) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWAL2
═══════════════════════════════════════════════════════════════════════════ */
div:where(.swal2-container) div:where(.swal2-popup) {
  border-radius: var(--p-radius-lg) !important;
  box-shadow: var(--p-shadow-lg) !important;
  font-family: var(--p-font) !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  border-radius: var(--p-radius-sm) !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  font-family: var(--p-font) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(37,211,102,.30) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBARS
═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* Sidebar scrollbar */
.navbar.lw-sidebar-container ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* ═══════════════════════════════════════════════════════════════════════════
   MISC POLISH
═══════════════════════════════════════════════════════════════════════════ */
/* Smooth all links/transitions */
a { transition: color var(--p-transition) !important; }

/* Header section (page top) — reduce Argon's oversized default padding */
.header { padding-top: 5rem !important; padding-bottom: 0.75rem !important; }
.header .container-fluid { background: transparent !important; }

/* Toast/notifications */
.mdtoast {
  border-radius: var(--p-radius-sm) !important;
  font-family: var(--p-font) !important;
  font-size: .875rem !important;
  box-shadow: var(--p-shadow-md) !important;
}

/* List group */
.list-group-item {
  border-color: rgba(0,0,0,.06) !important;
  font-family: var(--p-font) !important;
  font-size: .875rem !important;
}
.list-group-item:first-child { border-top-left-radius: var(--p-radius-sm) !important; border-top-right-radius: var(--p-radius-sm) !important; }
.list-group-item:last-child { border-bottom-left-radius: var(--p-radius-sm) !important; border-bottom-right-radius: var(--p-radius-sm) !important; }

/* Progress bars */
.progress { border-radius: 99px !important; background: #e8ecf4 !important; }
.progress-bar { border-radius: 99px !important; }

/* Avatars */
.avatar { box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; }

/* Dark mode compat — don't break it */
body.lw-authenticated-page.dark-theme {
  --p-card-bg: #1a2133;
  --p-body-bg: #111827;
  --p-text: #f1f5f9;
  --p-text-muted: #94a3b8;
  --p-border: 1px solid rgba(255,255,255,.08);
}