/* =====================================================================
   ZEPAR Admin Theme Override
   Loaded LAST — rebrands the Cuba template to ZEPAR brand standards.
   Palette (synced with zepar.com + the apps):
     ink        #0A0B0E      teal-dim   #0096a6 (primary accent)
     teal       #2aa7b6      teal-glow  #a6d8de
     fog        #F6F6F3      ink-soft   #15171C / #1D2026
   The template's indigo (#0096a6 / #007a88) is replaced everywhere.
   ===================================================================== */

:root {
  --zepar-ink: #0A0B0E;
  --zepar-ink-soft: #15171C;
  --zepar-ink-line: #1D2026;
  --zepar-teal: #2aa7b6;
  --zepar-teal-dim: #0096a6;
  --zepar-teal-deep: #007a88;
  --zepar-teal-glow: #a6d8de;
  --zepar-fog: #F6F6F3;
  --zepar-primary: #0096a6;
}

/* ---------- Global accent swaps ---------- */
.bg-primary,
.badge-primary,
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--zepar-primary) !important;
  border-color: var(--zepar-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--zepar-teal-deep) !important;
  border-color: var(--zepar-teal-deep) !important;
  box-shadow: 0 6px 18px -8px rgba(0, 150, 166, 0.6) !important;
}
.btn-outline-primary {
  color: var(--zepar-primary) !important;
  border-color: var(--zepar-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--zepar-primary) !important;
  color: #fff !important;
}
.text-primary,
.txt-primary,
a.text-primary { color: var(--zepar-primary) !important; }

a { color: var(--zepar-teal-dim); }
a:hover { color: var(--zepar-teal-deep); }

/* Soft-tinted primary chips/labels the template renders in light indigo */
.badge-light-primary,
.bg-light-primary {
  background-color: rgba(0, 150, 166, 0.12) !important;
  color: var(--zepar-teal-deep) !important;
}

/* ---------- Buttons: pill polish ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { letter-spacing: 0.2px; }

/* ---------- Body & cards ---------- */
body { background-color: var(--zepar-fog) !important; }
.card {
  border: 1px solid rgba(10, 11, 14, 0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 38px -22px rgba(10, 11, 14, 0.18) !important;
}

/* ---------- Sidebar: ink background, teal active ---------- */
.page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper,
.sidebar-wrapper {
  background-color: var(--zepar-ink) !important;
  border-right: 1px solid var(--zepar-ink-line) !important;
}
.sidebar-wrapper .logo-wrapper,
.sidebar-wrapper .logo-icon-wrapper {
  background-color: var(--zepar-ink) !important;
  border-bottom: 1px solid var(--zepar-ink-line);
}

/* ---------- Logo: elegant alignment (expanded) ----------
   The uploaded logo is a large rounded-square mark with its own dark bg +
   shadow. Constrain + centre it, give it breathing room, and clip any
   shadow bleed so it reads cleanly inside the ink sidebar. */
.sidebar-wrapper .logo-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 18px 16px 16px !important;
  position: relative;
  min-height: 84px;
}
.sidebar-wrapper .logo-wrapper a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sidebar-wrapper .logo-wrapper a img {
  width: auto !important;
  height: 52px !important;
  max-width: 168px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

/* The grid toggle chip sits neatly top-right of the logo row, vertically centred */
.sidebar-wrapper .logo-wrapper .toggle-sidebar {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}
.sidebar-wrapper .logo-wrapper .back-btn { display: none; }

/* ---------- Collapsed (icon-rail) state ----------
   The template stacks TWO logo containers (.logo-wrapper + .logo-icon-wrapper)
   and THREE grid-toggle chips when collapsed — a cluttered pile of boxes.
   Clean it to ONE thing: a single centred Z mark at the top. Re-expand is
   done from the always-present grid toggle in the page header. */

/* Collapsed: HIDE the logo entirely — show only ONE centred toggle chip.
   The logo reappears only when the sidebar is expanded. */
.sidebar-wrapper.close_icon .logo-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 0 !important;
  min-height: auto;
}
.sidebar-wrapper.close_icon .logo-wrapper a,
.sidebar-wrapper.close_icon .logo-wrapper a img,
.sidebar-wrapper.close_icon .logo-wrapper .back-btn,
.sidebar-wrapper.close_icon .logo-icon-wrapper { display: none !important; }
.sidebar-wrapper.close_icon .logo-wrapper .toggle-sidebar {
  position: static !important;
  transform: none !important;
  margin: 0 auto !important;
  width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Default sidebar links */
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link {
  color: rgba(255, 255, 255, 0.72) !important;
  border-radius: 12px;
  margin: 2px 12px;
  transition: background-color .18s ease, color .18s ease;
}
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link span {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link svg,
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link svg path {
  stroke: rgba(255, 255, 255, 0.78);
}

/* Hover */
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link:hover {
  background-color: rgba(0, 150, 166, 0.12) !important;
}
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link:hover span,
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link:hover svg,
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link:hover svg path {
  color: #fff !important;
  stroke: var(--zepar-teal-glow) !important;
}

/* Active item — teal fill + left accent bar */
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link.active {
  background: linear-gradient(90deg, rgba(0, 150, 166, 0.22), rgba(0, 150, 166, 0.08)) !important;
  position: relative;
}
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--zepar-teal-glow);
}
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link.active span {
  color: #fff !important;
  font-weight: 600;
}
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link.active svg,
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link.active svg path {
  stroke: var(--zepar-teal-glow) !important;
}

/* Submenu + active submenu link */
.sidebar-wrapper .sidebar-submenu > li a { color: rgba(255, 255, 255, 0.6) !important; }
.sidebar-wrapper .sidebar-submenu > li a:hover,
.sidebar-wrapper .sidebar-submenu > li a.active {
  color: var(--zepar-teal-glow) !important;
}
.sidebar-wrapper .sidebar-submenu > li a.active:after,
.sidebar-wrapper .sidebar-submenu > li a:hover:after {
  background-color: var(--zepar-teal-glow) !important;
}
.sidebar-wrapper .sidebar-title { color: rgba(255,255,255,0.4) !important; }
.sidebar-wrapper .logo-wrapper .f-w-700 { color: #fff !important; }

/* Sidebar scroll thumb */
.sidebar-wrapper #simple-bar .simplebar-scrollbar:before { background: rgba(168, 198, 199, 0.4); }

/* The square grid/menu toggle chip (template renders it indigo) → teal */
.icon-box-sidebar,
.toggle-sidebar .icon-box-sidebar,
.logo-icon-wrapper .icon-box-sidebar {
  background-color: var(--zepar-teal-dim) !important;
}
.icon-box-sidebar svg,
.icon-box-sidebar i { color: #fff !important; stroke: #fff !important; }

/* ---------- Header ---------- */
.page-header .header-wrapper { background-color: #fff; }
.page-header .header-wrapper .nav-right .notification-box svg,
.page-header .header-wrapper .nav-right ul li svg { stroke: var(--zepar-ink); }

/* ---------- Forms: teal focus ring ---------- */
.form-control:focus,
.form-select:focus,
.custom-select:focus {
  border-color: var(--zepar-teal) !important;
  box-shadow: 0 0 0 3px rgba(0, 150, 166, 0.18) !important;
}
.form-check-input:checked {
  background-color: var(--zepar-primary) !important;
  border-color: var(--zepar-primary) !important;
}

/* Select2 (used widely in forms) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selected {
  background-color: var(--zepar-primary) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--zepar-teal) !important;
}

/* ---------- Tables / DataTables ---------- */
table.dataTable thead th { color: var(--zepar-ink); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--zepar-primary) !important;
  border-color: var(--zepar-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--zepar-teal-glow) !important;
  border-color: var(--zepar-teal-glow) !important;
  color: var(--zepar-ink) !important;
}

/* ---------- Toggles / switches ---------- */
.switch input:checked + .switch-state { background-color: var(--zepar-primary) !important; }

/* ---------- Pagination (bootstrap) ---------- */
.page-item.active .page-link {
  background-color: var(--zepar-primary) !important;
  border-color: var(--zepar-primary) !important;
}
.page-link { color: var(--zepar-teal-dim); }

/* ---------- Misc accents the template tints indigo ---------- */
.bg-light-primary { background-color: rgba(0, 150, 166,0.10) !important; }
.b-l-primary { border-left-color: var(--zepar-primary) !important; }
.font-primary { color: var(--zepar-primary) !important; }
.alert-primary {
  background-color: rgba(0, 150, 166,0.12) !important;
  border-color: rgba(0, 150, 166,0.3) !important;
  color: var(--zepar-teal-deep) !important;
}

/* Loader dots → teal */
.loader-wrapper .dot { background: var(--zepar-teal-dim) !important; }

/* tap-to-top button */
.tap-top { background: var(--zepar-primary) !important; }

/* ---------- Dashboard stat cards (profit-card) ----------
   The template colours the 4 card variants indigo/blue/green/yellow via
   *-primary / *-secondary / *-success / *-warning. Re-tint the whole set
   into the ZEPAR teal family, with gentle tonal variation so cards stay
   distinguishable. */
.profit-card .header-text-primary,
.profit-card .header-text-secondary,
.profit-card .header-text-success,
.profit-card .header-text-warning { color: var(--zepar-teal-deep) !important; }

.profit-card .header-text-primary i.fa-circle,
.profit-card .header-text-secondary i.fa-circle,
.profit-card .header-text-success i.fa-circle,
.profit-card .header-text-warning i.fa-circle { color: var(--zepar-teal) !important; }

/* The solid round icon chip on the right of each card — template fills it
   indigo/blue/green/yellow via .icon-right-{primary|info|secondary|success|warning}.
   Re-tint the whole set to the ZEPAR teal family (white glyph stays white).
   Targeted WITHOUT a .profit-card prefix so it wins regardless of card wrapper. */
.right-side.icon-right-primary,
.right-side.icon-right-info,
.right-side.icon-right-secondary,
.right-side.icon-right-success,
.right-side.icon-right-warning,
.icon-right-primary,
.icon-right-info,
.icon-right-secondary,
.icon-right-success,
.icon-right-warning {
  background-color: var(--zepar-teal-dim) !important;
  color: #fff !important;
}
.right-side.icon-right-info,   .icon-right-info    { background-color: var(--zepar-teal) !important; }
.right-side.icon-right-success,.icon-right-success { background-color: var(--zepar-teal-deep) !important; }
.right-side.icon-right-warning,.icon-right-warning { background-color: #0096a6 !important; }
.right-side i, .right-side svg { color: #fff !important; }

/* The animated colour blob behind the icon — all variants → teal tints */
.animate-bg-primary,
.animate-bg-secondary,
.animate-bg-success,
.animate-bg-warning { background-color: rgba(0, 150, 166, 0.16) !important; }

.animate-bg-primary i,
.animate-bg-secondary i,
.animate-bg-success i,
.animate-bg-warning i { background-color: rgba(0, 150, 166, 0.22) !important; }

/* slight tonal variation per column so the row still reads as 4 distinct cards */
.profit-card.card .animate-bg-secondary { background-color: rgba(0, 150, 166, 0.16) !important; }
.profit-card.card .animate-bg-success { background-color: rgba(168, 198, 199, 0.30) !important; }
.profit-card.card .animate-bg-warning { background-color: rgba(61, 93, 95, 0.16) !important; }

/* generic bg utility variants used on icons elsewhere */
.bg-light-secondary { background-color: rgba(0, 150, 166,0.10) !important; color: var(--zepar-teal-deep) !important; }
.bg-light-success { background-color: rgba(168,198,199,0.20) !important; color: var(--zepar-teal-deep) !important; }