/* ================================================================
   WaSender Pro — Dark Theme
   File: css/wa-theme.css
   Drop this next to sb-admin-2.min.css and link AFTER it
   ================================================================ */

:root {
  --wa-bg:       #0d1117;
  --wa-surface:  #161b22;
  --wa-card:     #1c2330;
  --wa-border:   #2a3441;
  --wa-green:    #25d366;
  --wa-green2:   #128c7e;
  --wa-teal:     #00b5a4;
  --wa-text:     #e6edf3;
  --wa-muted:    #7d8fa1;
  --wa-danger:   #f85149;
  --wa-warning:  #d29922;
  --wa-info:     #58a6ff;
}

/* ── Base ── */
body { background: var(--wa-bg) !important; color: var(--wa-text) !important; }

/* ── Sidebar ── */
.sidebar {
  background: var(--wa-surface) !important;
  border-right: 1px solid var(--wa-border) !important;
  min-height: 100vh;
}
.sidebar .sidebar-brand {
  background: var(--wa-surface) !important;
  border-bottom: 1px solid var(--wa-border) !important;
  padding: 1.2rem 1rem !important;
}
.sidebar .sidebar-brand-text { color: var(--wa-green) !important; font-weight: 800 !important; letter-spacing: -0.5px; }
.sidebar .sidebar-brand-icon i { color: var(--wa-green) !important; }
.sidebar .nav-item .nav-link { color: var(--wa-muted) !important; border-radius: 8px; margin: 2px 8px; padding: 10px 12px !important; transition: all .18s; }
.sidebar .nav-item .nav-link:hover, .sidebar .nav-item.active .nav-link { background: rgba(37,211,102,.1) !important; color: var(--wa-green) !important; }
.sidebar .nav-item .nav-link span { font-size: 13.5px; font-weight: 500; }
.sidebar hr.sidebar-divider { border-color: var(--wa-border) !important; margin: 8px 0 !important; }
.sidebar-divider + .sidebar-heading { color: var(--wa-muted) !important; font-size: 10px !important; }

/* ── Topbar ── */
.topbar { background: var(--wa-surface) !important; border-bottom: 1px solid var(--wa-border) !important; box-shadow: none !important; }
.topbar .nav-link, .topbar .text-gray-600 { color: var(--wa-text) !important; }
.topbar .navbar-nav .nav-item .nav-link { color: var(--wa-muted) !important; }
.topbar-divider { border-right: 1px solid var(--wa-border) !important; }
.dropdown-menu { background: var(--wa-card) !important; border: 1px solid var(--wa-border) !important; }
.dropdown-item { color: var(--wa-text) !important; }
.dropdown-item:hover { background: rgba(37,211,102,.08) !important; color: var(--wa-green) !important; }
.dropdown-divider { border-color: var(--wa-border) !important; }

/* ── Content wrapper ── */
#content-wrapper { background: var(--wa-bg) !important; }

/* ── Cards ── */
.card {
  background: var(--wa-card) !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--wa-border) !important; color: var(--wa-text) !important; font-weight: 700; }
.card .text-gray-800 { color: var(--wa-text) !important; }
.card .text-gray-600 { color: var(--wa-muted) !important; }
.card .text-gray-300 { color: var(--wa-border) !important; }

/* Stat cards border accent */
.border-left-primary { border-left: 4px solid var(--wa-info) !important; }
.border-left-success { border-left: 4px solid var(--wa-green) !important; }
.border-left-info    { border-left: 4px solid var(--wa-teal) !important; }
.border-left-warning { border-left: 4px solid var(--wa-warning) !important; }
.border-left-danger  { border-left: 4px solid var(--wa-danger) !important; }

.text-primary { color: var(--wa-info) !important; }
.text-success { color: var(--wa-green) !important; }
.text-info    { color: var(--wa-teal) !important; }
.text-warning { color: var(--wa-warning) !important; }
.text-danger  { color: var(--wa-danger) !important; }

/* ── Tables ── */
.table { color: var(--wa-text) !important; }
.table thead th { background: transparent !important; border-bottom: 1px solid var(--wa-border) !important; color: var(--wa-muted) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.table td, .table th { border-color: rgba(42,52,65,.5) !important; vertical-align: middle !important; }
.table-bordered { border-color: var(--wa-border) !important; }
.table-hover tbody tr:hover td { background: rgba(255,255,255,.02) !important; }

/* ── Forms ── */
.form-control {
  background: var(--wa-surface) !important;
  border: 1px solid var(--wa-border) !important;
  color: var(--wa-text) !important;
  border-radius: 8px !important;
}
.form-control:focus { border-color: var(--wa-green) !important; box-shadow: 0 0 0 3px rgba(37,211,102,.15) !important; }
.form-control::placeholder { color: var(--wa-muted) !important; }
.input-group-text { background: var(--wa-card) !important; border-color: var(--wa-border) !important; color: var(--wa-muted) !important; }

/* ── Buttons ── */
.btn-primary { background: var(--wa-green) !important; border-color: var(--wa-green) !important; color: #000 !important; font-weight: 600; border-radius: 8px !important; }
.btn-primary:hover { background: #20c45e !important; border-color: #20c45e !important; }
.btn-success { background: var(--wa-green2) !important; border-color: var(--wa-green2) !important; color: #fff !important; border-radius: 8px !important; }
.btn-danger  { background: var(--wa-danger) !important; border-color: var(--wa-danger) !important; border-radius: 8px !important; }
.btn-secondary { background: var(--wa-card) !important; border-color: var(--wa-border) !important; color: var(--wa-text) !important; border-radius: 8px !important; }
.btn-info    { background: var(--wa-teal) !important; border-color: var(--wa-teal) !important; color: #fff !important; border-radius: 8px !important; }
.btn-warning { background: var(--wa-warning) !important; border-color: var(--wa-warning) !important; color: #000 !important; border-radius: 8px !important; }

/* ── Modals ── */
.modal-content { background: var(--wa-card) !important; border: 1px solid var(--wa-border) !important; border-radius: 14px !important; }
.modal-header { border-bottom: 1px solid var(--wa-border) !important; }
.modal-footer { border-top: 1px solid var(--wa-border) !important; }
.modal-title { color: var(--wa-text) !important; font-weight: 700; }
.close { color: var(--wa-muted) !important; text-shadow: none !important; opacity: 1 !important; }
.close:hover { color: var(--wa-text) !important; }

/* ── Footer ── */
.sticky-footer { background: var(--wa-surface) !important; border-top: 1px solid var(--wa-border) !important; }
.sticky-footer .copyright { color: var(--wa-muted) !important; font-size: 12px; }
.sticky-footer a { color: var(--wa-green) !important; }

/* ── Progress bar ── */
.progress { background: var(--wa-border) !important; border-radius: 4px !important; }
.progress-bar.bg-info { background: var(--wa-teal) !important; }

/* ── Scroll to top btn ── */
.scroll-to-top { background: var(--wa-green) !important; color: #000 !important; }

/* ── Toastr override ── */
.toast-success { background: var(--wa-green2) !important; }
.toast-error   { background: var(--wa-danger) !important; }

/* ── Select2 ── */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
  background: var(--wa-surface) !important;
  border-color: var(--wa-border) !important;
  color: var(--wa-text) !important;
  border-radius: 8px !important;
}
.select2-dropdown { background: var(--wa-card) !important; border-color: var(--wa-border) !important; }
.select2-container--default .select2-results__option { color: var(--wa-text) !important; }
.select2-container--default .select2-results__option--highlighted { background: rgba(37,211,102,.12) !important; color: var(--wa-green) !important; }
.select2-container--default .select2-selection__rendered { color: var(--wa-text) !important; }
.select2-search__field { background: var(--wa-surface) !important; color: var(--wa-text) !important; border-color: var(--wa-border) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: rgba(37,211,102,.12) !important; border-color: var(--wa-green) !important; color: var(--wa-green) !important; }

/* ── DataTables ── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--wa-surface) !important;
  border-color: var(--wa-border) !important;
  color: var(--wa-text) !important;
  border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--wa-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--wa-green) !important; border-color: var(--wa-green) !important; color: #000 !important; border-radius: 6px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(37,211,102,.12) !important; color: var(--wa-green) !important; border-color: transparent !important; border-radius: 6px; }

/* ── Sidebar Toggle Collapsed ── */
#accordionSidebar.toggled { width: 6.5rem !important; }
#accordionSidebar.toggled .sidebar-brand-text { display: none !important; }

/* ── h tags ── */
h1,h2,h3,h4,h5,h6 { color: var(--wa-text) !important; }
.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--wa-text) !important; }
small, .small { color: var(--wa-muted) !important; }
hr { border-color: var(--wa-border) !important; }

/* ── WA Status badge ── */
.wa-badge-online {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25);
  color: var(--wa-green); font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
}
.wa-badge-online .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--wa-green);
  animation: wapulse 2s infinite;
}
@keyframes wapulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(1.4); }
}
.wa-badge-offline { background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.25); color: var(--wa-danger); }
.wa-badge-offline .dot { background: var(--wa-danger); animation: none; }

/* ── Login page ── */
body.wa-login {
  background: var(--wa-bg) !important;
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.wa-login-card {
  background: var(--wa-card) !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
  max-width: 420px; width: 100%;
  padding: 40px 36px;
}
.wa-login-card .form-control-user {
  border-radius: 10px !important; padding: .75rem 1rem !important;
  height: auto !important;
}
.btn-user { border-radius: 10px !important; padding: .75rem !important; font-size: 15px !important; font-weight: 700 !important; }

/* ── Misc ── */
.shadow { box-shadow: 0 4px 20px rgba(0,0,0,.3) !important; }
.text-xs { font-size: 10px !important; letter-spacing: .6px; }
.font-weight-bold { font-weight: 700 !important; }