/*
 * ZeroBot Dashboard Theme
 * Clean, modern SaaS look — dark navy sidebar, rose accent, neutral content.
 * Sidebar: #2a2a3d  |  Accent: #b5264a  |  Content BG: #f1f1f6
 * Font: Poppins  |  Cards: white, minimal shadow
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── Root Variables ──────────────────────────────────────────── */
:root {
  --bs-font-sans-serif: 'Poppins', sans-serif;
  --bs-body-font-family: 'Poppins', sans-serif;

  --bs-primary: #b5264a;
  --bs-primary-rgb: 181, 38, 74;

  --bs-success: #b5264a;
  --bs-success-rgb: 181, 38, 74;
  --bs-danger: #e74c3c;
  --bs-danger-rgb: 231, 76, 60;
  --bs-warning: #f5a623;
  --bs-warning-rgb: 245, 166, 35;
  --bs-info: #5b9bd5;
  --bs-info-rgb: 91, 155, 213;

  --bs-link-color: #b5264a;
  --bs-link-hover-color: #9a1f3d;
}

/* ── Body ────────────────────────────────────────────────────── */
body {
  font-family: 'Poppins', sans-serif !important;
  background: #f1f1f6 !important;
  color: #333346 !important;
}

/* ── Sidebar — handled by sidebar-themes.css ── */

/* ── Topbar ──────────────────────────────────────────────────── */
#page-topbar {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.header-item {
  color: #555 !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  background-color: #b5264a !important;
  border-color: #b5264a !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #9a1f3d !important;
  border-color: #9a1f3d !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(181, 38, 74, 0.25) !important;
}

.btn-success {
  background-color: #b5264a !important;
  border-color: #b5264a !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #9a1f3d !important;
  border-color: #9a1f3d !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(181, 38, 74, 0.25) !important;
}

.btn-danger {
  background-color: #e74c3c !important;
  border-color: #e74c3c !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #c0392b !important;
  border-color: #c0392b !important;
}

.btn-warning {
  background-color: #f5a623 !important;
  border-color: #f5a623 !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: #b5264a !important;
  border-color: #b5264a !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: #b5264a !important;
  border-color: #b5264a !important;
  color: #fff !important;
}

/* ── Background Utilities ────────────────────────────────────── */
.bg-primary {
  background-color: #b5264a !important;
}

.bg-success {
  background-color: #b5264a !important;
}

.bg-danger {
  background-color: #e74c3c !important;
}

.bg-warning {
  background-color: #f5a623 !important;
}

.bg-info {
  background-color: #5b9bd5 !important;
}

/* ── Soft Backgrounds ────────────────────────────────────────── */
.bg-soft-primary {
  background: rgba(181, 38, 74, 0.08) !important;
  color: #b5264a !important;
}

.bg-soft-success {
  background: rgba(46, 204, 113, 0.08) !important;
  color: #27ae60 !important;
}

.bg-soft-danger {
  background: rgba(231, 76, 60, 0.08) !important;
  color: #e74c3c !important;
}

.bg-soft-warning {
  background: rgba(245, 166, 35, 0.08) !important;
  color: #e09400 !important;
}

.bg-soft-info {
  background: rgba(91, 155, 213, 0.08) !important;
  color: #5b9bd5 !important;
}

/* ── Text Utilities ──────────────────────────────────────────── */
.text-primary {
  color: #b5264a !important;
}

.text-success {
  color: #b5264a !important;
}

.text-danger {
  color: #e74c3c !important;
}

.text-warning {
  color: #e09400 !important;
}

.text-info {
  color: #5b9bd5 !important;
}

/* ── Badge Soft Variants ─────────────────────────────────────── */
.badge-soft-primary,
.badge.bg-primary.bg-opacity-10 {
  background-color: rgba(181, 38, 74, 0.08) !important;
  color: #b5264a !important;
}

.badge-soft-success {
  background-color: rgba(181, 38, 74, 0.08) !important;
  color: #b5264a !important;
}

.badge-soft-danger {
  background-color: rgba(231, 76, 60, 0.10) !important;
  color: #e74c3c !important;
}

.badge-soft-warning {
  background-color: rgba(245, 166, 35, 0.10) !important;
  color: #e09400 !important;
}

.badge-soft-info {
  background-color: rgba(91, 155, 213, 0.08) !important;
  color: #5b9bd5 !important;
}

/* ── Cards — white, minimal, clean ───────────────────────────── */
.card {
  border-radius: 12px !important;
  border: 1px solid #e8e8ef !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ── Tables — light neutral header ───────────────────────────── */
.table thead th {
  background: #f7f7fa !important;
  color: #6c6c80 !important;
  border: none !important;
  border-bottom: 1px solid #e8e8ef !important;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table-light th {
  background: #f7f7fa !important;
  color: #6c6c80 !important;
}

.table tbody td,
.table tbody th {
  background: #ffffff;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background: #fafafe !important;
}

.table-responsive {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e8e8ef;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: #fbfbfd !important;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: #d4899c !important;
  box-shadow: 0 0 0 3px rgba(181, 38, 74, 0.08) !important;
}

.form-check-input:checked {
  background-color: #b5264a !important;
  border-color: #b5264a !important;
}

/* Override cus.css hiding of native Bootstrap 5 form-switch inputs */
.form-check.form-switch .form-check-input {
  display: block !important;
  width: 2em !important;
  height: 1em !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
  background-position: left center !important;
  background-size: contain !important;
  border-radius: 2em !important;
  transition: background-position .15s ease-in-out !important;
}

.form-check.form-switch .form-check-input:checked {
  background-position: right center !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* ── Dashboard: Gradient Title ───────────────────────────────── */
.gradient-title {
  background: linear-gradient(90deg, #2a2a3d, #3a3a5c) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Dashboard: News Items ───────────────────────────────────── */
.news-item {
  border-left: 4px solid #b5264a !important;
}

/* ── Dashboard: Stat Boxes ───────────────────────────────────── */
.stat-box {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #e8e8ef !important;
}

.stat-box:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07) !important;
}

/* ── DataTables Pagination ───────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate {
  margin-top: 20px !important;
  padding-bottom: 10px !important;
}

.dataTables_wrapper .dataTables_info {
  margin-top: 20px !important;
  padding-bottom: 10px !important;
}

/* Extra spacing when table is inside a card with tight padding */
.card-body .dataTables_wrapper .dataTables_paginate,
.card-body .dataTables_wrapper .dataTables_info {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #b5264a !important;
  border-color: #b5264a !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(181, 38, 74, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  margin: 0 2px !important;
  font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(181, 38, 74, 0.1) !important;
  border-color: rgba(181, 38, 74, 0.15) !important;
  color: #b5264a !important;
}

/* ── Page Pagination ─────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: #b5264a !important;
  border-color: #b5264a !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(181, 38, 74, 0.3) !important;
  z-index: 3 !important;
}

.page-link {
  color: #b5264a !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
}

.page-link:hover {
  color: #9a1f3d !important;
  background-color: rgba(181, 38, 74, 0.08) !important;
}

/* ── Alertify ────────────────────────────────────────────────── */
.alertify .ajs-ok {
  background-color: #b5264a !important;
  color: #fff !important;
}

/* ── Pace Loader ─────────────────────────────────────────────── */
.pace .pace-progress {
  background: #b5264a !important;
}

/* ── Nav Tabs & Pills ────────────────────────────────────────── */
.nav-tabs .nav-link.active {
  color: #b5264a !important;
  border-bottom-color: #b5264a !important;
}

.nav-pills .nav-link.active {
  background-color: #b5264a !important;
}

/* ── Dropdown Active ─────────────────────────────────────────── */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #fdf0f3 !important;
  color: #b5264a !important;
}

/* ── Border Primary ──────────────────────────────────────────── */
.border-primary {
  border-color: #b5264a !important;
}

/* ── Success → Primary Overrides ────────────────────────────── */
.border-success {
  border-color: #b5264a !important;
}

.alert-success {
  background-color: rgba(181, 38, 74, 0.08) !important;
  border-color: rgba(181, 38, 74, 0.2) !important;
  color: #b5264a !important;
}

.bg-success-subtle,
.bg-success.bg-opacity-10 {
  background-color: rgba(181, 38, 74, 0.1) !important;
}

.btn-outline-success {
  color: #b5264a !important;
  border-color: #b5264a !important;
}

.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success.active {
  background-color: #b5264a !important;
  border-color: #b5264a !important;
  color: #fff !important;
}

/* ── Collapsed Sidebar + Mobile — handled by sidebar-themes.css ── */

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  font-family: 'Poppins', sans-serif !important;
  background: #f1f1f6 !important;
}

/* ── Page Content Background ─────────────────────────────────── */
.main-content {
  background: #f1f1f6 !important;
}

/* ── ApexCharts Tooltip Fix ──────────────────────────────────── */
.apexcharts-tooltip {
  background: #fff !important;
  border: 1px solid #e8e8ef !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
  border-radius: 8px !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e8e8ef !important;
  color: #333 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.apexcharts-tooltip .apexcharts-tooltip-series-group {
  color: #333 !important;
}
.apexcharts-tooltip .apexcharts-tooltip-text-y-label,
.apexcharts-tooltip .apexcharts-tooltip-text-y-value {
  color: #333 !important;
}