/* ============================
   SEND2SALE BRAND THEME
   Colors: Navy #1B2B4B, Teal #14B8A6, Cyan #0EA5E9, Orange #F59E0B
   ============================ */

:root {
  --s2s-navy: #1B2B4B;
  --s2s-navy-dark: #0F1A2E;
  --s2s-navy-light: #2A3F65;
  --s2s-teal: #14B8A6;
  --s2s-teal-dark: #0D9488;
  --s2s-teal-light: #2DD4BF;
  --s2s-cyan: #0EA5E9;
  --s2s-orange: #F59E0B;
  --s2s-orange-dark: #D97706;
  --s2s-gradient: linear-gradient(135deg, #1B2B4B 0%, #14B8A6 100%);
  --s2s-gradient-accent: linear-gradient(135deg, #14B8A6, #0EA5E9);
  --s2s-gradient-warm: linear-gradient(135deg, #F59E0B, #14B8A6);
  --s2s-text: #1e293b;
  --s2s-text-muted: #64748b;
  --s2s-border: #e2e8f0;
  --s2s-bg: #f1f5f9;
}

/* --- NAVBAR / HEADER BAR --- */
.navbar-default,
.navbar-default .navbar-header {
  background: var(--s2s-navy-dark) !important;
  min-height: 56px !important;
}
.navbar-default .navbar-nav > li > a {
  font-size: 15px !important;
  padding: 18px 16px !important;
}

/* Brand in navbar */
.mautic-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 4px !important;
}
.mautic-brand .mautic-logo-figure,
.mautic-brand .mautic-logo-text {
  display: none !important;
}
.mautic-brand::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  background: url('/media/images/logo-icon-sm.png') center/contain no-repeat;
  flex-shrink: 0;
}
.mautic-brand::after {
  content: "Send2Sale";
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}

/* --- SIDEBAR --- */
.page-sidebar-left {
  background: var(--s2s-navy-dark) !important;
  width: 260px !important;
}
.nav-sidebar > li > a {
  color: rgba(255,255,255,0.7) !important;
  border-radius: 10px !important;
  margin: 2px 10px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}
.nav-sidebar > li > a:hover {
  color: #fff !important;
  background: rgba(20,184,166,0.15) !important;
}
.nav-sidebar > li.active > a {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(20,184,166,0.25), rgba(14,165,233,0.15)) !important;
  border-left: 4px solid var(--s2s-teal) !important;
}
.nav-sidebar > li > a .ri,
.nav-sidebar > li > a .fa {
  color: rgba(255,255,255,0.5) !important;
  font-size: 17px !important;
  width: 24px !important;
  transition: color 0.2s ease !important;
}
.nav-sidebar > li.active > a .ri,
.nav-sidebar > li.active > a .fa,
.nav-sidebar > li > a:hover .ri,
.nav-sidebar > li > a:hover .fa {
  color: var(--s2s-teal-light) !important;
}

/* --- BUTTONS --- */
.btn {
  font-size: 14px !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.btn-lg {
  font-size: 16px !important;
  padding: 14px 28px !important;
}
.btn-primary,
.btn-primary:focus {
  background: var(--s2s-navy) !important;
  border-color: var(--s2s-navy) !important;
}
.btn-primary:hover {
  background: var(--s2s-navy-light) !important;
  border-color: var(--s2s-navy-light) !important;
}
.btn-success,
.btn-success:focus {
  background: var(--s2s-teal) !important;
  border-color: var(--s2s-teal) !important;
}
.btn-success:hover {
  background: var(--s2s-teal-dark) !important;
  border-color: var(--s2s-teal-dark) !important;
}

/* Links */
a { color: var(--s2s-teal-dark); }
a:hover { color: var(--s2s-navy); }

/* --- PAGE HEADER --- */
.page-header h3 {
  color: var(--s2s-navy) !important;
  font-weight: 700 !important;
  font-size: 26px !important;
}
.page-header .page-header-icon {
  font-size: 22px !important;
}

/* --- FORM FIELDS (global) --- */
.form-control {
  font-size: 15px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--s2s-border) !important;
  height: auto !important;
}
.form-control:focus {
  border-color: var(--s2s-teal) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.1) !important;
}
.input-group-addon {
  font-size: 15px !important;
  padding: 10px 14px !important;
}
label, .control-label {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* --- BADGES / LABELS --- */
.badge, .label {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.badge-primary, .label-primary {
  background: var(--s2s-navy) !important;
}
.badge-success, .label-success {
  background: var(--s2s-teal) !important;
}
.badge-warning, .label-warning {
  background: var(--s2s-orange) !important;
}

/* --- TABS --- */
.nav-tabs > li > a {
  font-size: 15px !important;
  padding: 12px 20px !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  border-bottom: 3px solid var(--s2s-teal) !important;
  color: var(--s2s-navy) !important;
  font-weight: 600 !important;
}

/* --- PANELS --- */
.panel-primary > .panel-heading {
  background: var(--s2s-navy) !important;
  border-color: var(--s2s-navy) !important;
  font-size: 16px !important;
  padding: 14px 20px !important;
}

/* --- TABLE --- */
.table > thead > tr > th {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--s2s-navy) !important;
  padding: 14px 12px !important;
  border-bottom: 2px solid var(--s2s-border) !important;
}
.table > tbody > tr > td {
  font-size: 14px !important;
  padding: 12px !important;
  vertical-align: middle !important;
}

/* --- LOADING BAR --- */
.loading-bar {
  background: var(--s2s-gradient-accent) !important;
  font-size: 0 !important;
  color: transparent !important;
  height: 3px !important;
  overflow: hidden !important;
}

/* --- FIX: Prevent white bar above content --- */
#app-header .loading-bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* Hide keyboard shortcut tip bar */
#app-content > .alert-info,
.alert-info.col-xs-12 {
  display: none !important;
}

/* --- HIDE MAUTIC SVG LOGOS (replaced by CSS brand) --- */
.mautic-brand .mautic-logo-figure,
.mautic-brand .mautic-logo-text,
.mautic-brand svg {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* --- PROGRESS BAR --- */
.progress {
  border-radius: 8px !important;
  height: 10px !important;
}
.progress-bar {
  background: var(--s2s-gradient-accent) !important;
}
.progress-bar-success {
  background: var(--s2s-teal) !important;
}

/* --- TOGGLE / SWITCH --- */
.custom-toggle .custom-toggle-slider.active {
  background: var(--s2s-teal) !important;
}

/* --- HIDE MAUTIC REFERENCES --- */
.mautic-update,
.mautic-recommends,
[data-toggle="mautic-update"],
.page-sidebar-left .sidebar-version {
  display: none !important;
}

/* --- PAGE BACKGROUND --- */
body {
  background: var(--s2s-bg) !important;
  font-size: 15px !important;
}

/* --- DASHBOARD WIDGETS --- */
.panel-default > .panel-heading {
  border-radius: 14px 14px 0 0 !important;
  background: #fff !important;
  border-bottom: 2px solid rgba(20,184,166,0.1) !important;
  font-size: 16px !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
}
.panel-default {
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(27,43,75,0.06) !important;
  border: 1px solid var(--s2s-border) !important;
  overflow: hidden;
}

/* --- DROPDOWN MENUS --- */
.dropdown-menu {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
  border: 1px solid var(--s2s-border) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: rgba(20,184,166,0.08) !important;
  color: var(--s2s-navy) !important;
}

/* --- PAGINATION --- */
.pagination > li > a,
.pagination > li > span {
  font-size: 14px !important;
  padding: 10px 16px !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--s2s-navy) !important;
  border-color: var(--s2s-navy) !important;
}

/* --- CHARTS / STATS --- */
.stat-number {
  color: var(--s2s-navy) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
}

/* --- MODAL --- */
.modal-content {
  border-radius: 16px !important;
  overflow: hidden;
}
.modal-header {
  background: var(--s2s-navy) !important;
  color: #fff !important;
  padding: 18px 24px !important;
}
.modal-header .close {
  color: #fff !important;
  opacity: 0.7 !important;
}
.modal-header h4, .modal-title {
  font-size: 18px !important;
  font-weight: 600 !important;
}
.modal-body {
  padding: 24px !important;
  font-size: 15px !important;
}
.modal-footer {
  padding: 16px 24px !important;
}

/* --- ALERTS --- */
.alert {
  border-radius: 12px !important;
  font-size: 14px !important;
  padding: 14px 20px !important;
}

/* --- BREADCRUMB --- */
.breadcrumb {
  font-size: 14px !important;
}

/* --- SCROLLBAR (Webkit) --- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
  background: rgba(20,184,166,0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(20,184,166,0.5);
}