/* ============================================================
   NEW_LEADYA — nowy design LeadYa (jasny, fioletowy, flat).
   Bazuje na leadya.css; pełny opis: design/Leadya-New-Design.md
   Zasada: ciemny granat (ink) tylko w nagłówku i akcentach,
   treść na jasnym tle, karty z hairline 1px i promieniem 12px.
   ============================================================ */
:root {
  /* --- legacy zmienne motywu (kontrakt jak w leadya.css) --- */
  --cash-btn-color: #14122b;
  --color-black: #ffffff; /* rola: jasne tło kart (jak w leadya) */
  --color-grey: #14122b;
  --color-white: #ffffff;
  --main-color: #6c4cf1;
  --brighter-main-color: #ffc24b;
  --background-color: #14122b;
  --packet-top-color: #e6e8f0;
  --packet-top-checked-color: #6c4cf1;
  /* /start: karta pakietów leży na ciemnym .bg-dark (ink) — nagłówek pakietu
     jest jasny, więc tekst w nim musi być ciemny; dyskretne linki jaśniejsze */
  --packet-top-text-color: #14122b;
  --packet-highlight-text-color: #5c3d00;
  --subtle-link-color: #aeb3cc;
  --subtle-link-hover-color: #ffffff;
  /* Setup Meeting additional colors */
  --support-table-header-bg: #f6f7fb;
  --support-table-border: #e6e8f0;
  --support-table-hover-bg: #fafafe;
  --support-table-row-border: #f0f1f5;
  --support-table-text-color: #1a1d2e;
  --support-filter-text-color: #1a1d2e;
  /* Modal opacity overrides for better readability */
  --modal-text-opacity: 1;
  --modal-border-opacity: 1;
  /* setupMeeting payment modal */
  --support-payment-info-bg: #fff6e0;
  --support-payment-info-border: #6c4cf1;
  --support-payment-info-text: #14122b;
  --support-payment-cash-bg: #ffc24b;
  --support-payment-cash-text: #14122b;
  --support-payment-cash-hover-bg: #6c4cf1;
  --support-payment-cash-hover-text: #ffffff;
  --support-payment-cash-shadow: 0 0.4rem 0.9rem rgba(108, 76, 241, 0.2);
  --support-payment-credits-bg: #6c4cf1;
  --support-payment-credits-text: #ffffff;
  --support-payment-credits-hover-bg: #14122b;
  --support-payment-credits-hover-text: #ffffff;
  --support-payment-credits-shadow: 0 0.4rem 0.9rem rgba(108, 76, 241, 0.2);
  --support-payment-add-border: #6c4cf1;
  --support-payment-add-text: #6c4cf1;
  --support-payment-add-hover-bg: #6c4cf1;
  --support-payment-add-hover-text: #ffffff;
  /* Conversation background - lighter than main background */
  --conversation-bg: #f6f7fb;

  /* --- LD tokeny (nadpisują domyślne z additional.css) --- */
  --ld-brand: #6c4cf1;
  --ld-brand-hover: #5a3bd8;
  --ld-brand-soft: #f1edfe;
  --ld-ink: #14122b;
  --ld-accent: #ffc24b;
  --ld-accent-ink: #5c3d00;
  --ld-bg: #f6f7fb;
  --ld-surface: #ffffff;
  --ld-border: #e6e8f0;
  --ld-border-soft: #f0f1f5;
  --ld-text: #1a1d2e;
  --ld-text-muted: #667085;
  --ld-focus-ring: 0 0 0 0.2rem rgba(108, 76, 241, 0.2);
}

/* Logo w wariancie na jasne tło — cały topbar (z panelem logo)
   pracuje na jasnej powierzchni; ciemny ink zostaje w railu */
.app-header__logo .logo-src {
  background: url("assets/images/logo_leadya.png") no-repeat;
}

/* ---------- Rama aplikacji: ciemny rail, jednolicie jasny topbar ----------
   Topbar (surface + hairline + chipy) i tło panelu logo pochodzą
   ze wspólnej warstwy w additional.css i pracują na tokenach --ld-*. */

.app-header .app-header__content {
  background: transparent;
}

.app-main .app-main__inner,
.app-main .navigation-fixed {
  background-color: var(--ld-bg);
}

.app-theme-white .app-page-title,
.app-theme-white .app-footer .app-footer__inner {
  background-color: var(--ld-surface);
}

/* ---------- Sidebar: biały panel, fioletowy pill aktywnej pozycji ---------- */

.app-sidebar .scrollbar-sidebar {
  background-color: var(--ld-surface);
  border-right: 1px solid var(--ld-border);
}

.vertical-nav-menu li a {
  border-radius: 10px;
  color: #3a3f52;
}

/* additional.css maluje KAŻDĄ pozycję (.mm-active) jako ciemną pigułkę
   (--color-grey + --color-white); w nowym designie pozycje są jasne,
   a wyróżnienie dostaje tylko .selected-element */
.vertical-nav-menu li a.mm-active {
  background: transparent;
  color: #3a3f52;
}

.vertical-nav-menu li a:hover,
.vertical-nav-menu li a.mm-active:hover {
  background: var(--ld-bg);
  color: var(--ld-ink);
  text-decoration: none;
}

.app-sidebar__heading {
  color: #98a2b3 !important;
}

.selected-element {
  background-color: var(--ld-brand-soft) !important;
  color: #4a34c4 !important;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
}

/* ---------- Dwupoziomowy sidebar: globalny rail + panel kontekstowy ---------- */

.leadya-sidebar.app-sidebar {
  width: 280px;
  min-width: 280px;
  flex: 0 0 280px;
  top: 0 !important;
  height: 100vh;
  background: var(--ld-surface);
  border-right: 1px solid var(--ld-border);
  box-shadow: none;
  z-index: 1000;
}

.leadya-main-sidebar.app-sidebar {
  width: 280px;
  min-width: 280px;
  flex-basis: 280px;
}

.leadya-sidebar .app-header__logo,
.leadya-sidebar .app-header__mobile-menu,
.leadya-sidebar .app-header__menu {
  display: none;
}

.leadya-sidebar .scrollbar-sidebar {
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  background: transparent;
  border-right: 0;
}

.leadya-sidebar .app-sidebar__inner {
  height: 100%;
  padding: 0;
}

.leadya-sidebar-layout {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--ld-surface);
}

.leadya-sidebar-rail {
  width: 56px;
  flex: 0 0 56px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-height: 100vh;
  overflow-y: auto;
  padding: 10px 0 12px;
  background: var(--ld-ink);
}

.leadya-sidebar-rail-logo,
.leadya-sidebar-rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  text-decoration: none;
}

.leadya-sidebar-rail-logo {
  margin-bottom: 10px;
  background: var(--ld-accent);
  color: var(--ld-ink);
  font-weight: 800;
}

.leadya-sidebar-rail-logo:hover,
.leadya-sidebar-rail-item:hover {
  text-decoration: none;
}

.leadya-sidebar-rail-item {
  color: #8b87b8;
  font-size: 18px;
}

.leadya-sidebar-rail-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #d7d3f2;
}

/* Ikony portali w kolorach brandowych (jaśniejsze odcienie — czytelne na ciemnym railu) */
.leadya-sidebar-rail-item--facebook i {
  color: #1877f2;
}

.leadya-sidebar-rail-item--instagram i {
  color: #e1306c;
}

.leadya-sidebar-rail-item.is-active {
  background: var(--ld-brand);
  color: #fff;
}

.leadya-sidebar-rail-item.is-active i {
  color: #fff;
}

/* Aktywny portal dostaje kafelek w kolorze swojej marki — biała ikona na brandowym tle */
.leadya-sidebar-rail-item--facebook.is-active {
  background: #1877f2;
}

.leadya-sidebar-rail-item--instagram.is-active {
  /* gradient IG bez żółtego stopu — biała ikona/tekst muszą mieć kontrast na całym kafelku */
  background: linear-gradient(135deg, #405de6 0%, #833ab4 35%, #c13584 60%, #e1306c 82%, #fd1d1d 100%);
}

.leadya-sidebar-rail-spacer {
  flex: 1 1 auto;
}

/* Rozszerzony rail (menu jednopoziomowe, np. /user): ikony + etykiety + opisy */
.leadya-sidebar-rail.is-expanded {
  width: 100%;
  flex: 1 1 auto;
  align-items: stretch;
  max-height: 100vh;
  overflow-y: auto;
  padding: 10px 10px 12px;
}

.leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-logo {
  align-self: flex-start;
  margin-left: 2px;
}

.leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-item {
  width: auto;
  height: auto;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
}

.leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-item i {
  flex: 0 0 20px;
  text-align: center;
}

.leadya-sidebar-rail-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.leadya-sidebar-rail-text strong {
  color: #e4e1f7;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.leadya-sidebar-rail-text small {
  color: #8b87b8;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}

.leadya-sidebar-rail-item.is-active .leadya-sidebar-rail-text strong {
  color: #fff;
}

.leadya-sidebar-rail-item.is-active .leadya-sidebar-rail-text small {
  color: rgba(255, 255, 255, 0.75);
}

.leadya-sidebar-panel {
  width: 224px;
  min-width: 0;
  flex: 0 0 224px;
  overflow-y: auto;
  padding: 10px 0 12px;
  background: var(--ld-surface);
  border-right: 1px solid var(--ld-border);
}

.leadya-sidebar-panel-header {
  display: grid;
  gap: 2px;
  padding: 0 14px 9px;
  border-bottom: 1px solid var(--ld-border-soft);
}

.leadya-sidebar-panel-eyebrow {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.leadya-sidebar-panel-header strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ld-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.leadya-sidebar-panel-header small {
  color: #98a2b3;
  font-size: 12px;
}

.leadya-sidebar .vertical-nav-menu {
  margin: 0;
  padding: 8px 8px 0;
}

.leadya-sidebar .vertical-nav-menu li {
  list-style: none;
}

.leadya-sidebar-group {
  margin: 8px 8px 3px;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.leadya-sidebar .vertical-nav-menu li a,
.leadya-sidebar .vertical-nav-menu li a.mm-active {
  display: flex;
  align-items: center;
  min-height: 28px;
  height: auto;
  margin: 1px 0;
  padding: 5px 8px;
  border: 1px solid transparent !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ld-text, #1a1d2e) !important;
  line-height: 1.25;
  white-space: normal;
}

.leadya-portal-sidebar .vertical-nav-menu i.metismenu-icon {
  display: none;
}

.leadya-sidebar .vertical-nav-menu li a:hover,
.leadya-sidebar .vertical-nav-menu li a.mm-active:hover {
  background: var(--ld-bg, #f6f7fb) !important;
  border-color: var(--ld-border, #e6e8f0) !important;
  color: var(--ld-ink, #14122b) !important;
}

.leadya-sidebar .vertical-nav-menu i.metismenu-icon {
  left: 10px;
  width: 18px;
  margin-left: 0;
  color: #6b7280;
  line-height: 1;
  text-align: center;
}

.leadya-sidebar .vertical-nav-menu li a .short {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  visibility: visible !important;
}

.leadya-sidebar .vertical-nav-menu li a .long {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.leadya-sidebar .vertical-nav-menu li a.selected-element,
.leadya-sidebar .vertical-nav-menu li a.selected-element:hover {
  background: var(--ld-brand-soft) !important;
  border-color: var(--ld-brand, #6c4cf1) !important;
  color: var(--ld-ink, #14122b) !important;
  font-weight: 800;
}

.leadya-sidebar .vertical-nav-menu li a.selected-element i.metismenu-icon {
  color: #4a34c4;
}

.closed-sidebar.fixed-sidebar .app-sidebar.leadya-sidebar {
  width: 56px !important;
  min-width: 56px !important;
  flex-basis: 56px !important;
}

.closed-sidebar .leadya-sidebar .leadya-sidebar-panel {
  display: none;
}

.closed-sidebar .leadya-sidebar .leadya-sidebar-rail-text {
  display: none;
}

.closed-sidebar .leadya-sidebar .leadya-sidebar-rail.is-expanded {
  width: 56px;
  flex: 0 0 56px;
  align-items: center;
  padding: 10px 0 12px;
}

.closed-sidebar .leadya-sidebar .leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-item {
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
}

@media (max-width: 991.98px) {
  .app-sidebar.leadya-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    flex-basis: 280px !important;
  }

  .app-sidebar.leadya-main-sidebar {
    width: 56px !important;
    min-width: 56px !important;
    flex-basis: 56px !important;
  }

  .app-sidebar.leadya-main-sidebar .leadya-sidebar-rail-text {
    display: none;
  }

  .app-sidebar.leadya-main-sidebar .leadya-sidebar-rail.is-expanded {
    width: 56px;
    flex: 0 0 56px;
    align-items: center;
    padding: 10px 0 12px;
  }

  .app-sidebar.leadya-main-sidebar .leadya-sidebar-rail.is-expanded .leadya-sidebar-rail-item {
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
  }

  .sidebar-mobile-open .app-sidebar.leadya-sidebar .app-sidebar__inner ul li a,
  .app-sidebar.leadya-sidebar .vertical-nav-menu li a {
    padding: 5px 8px;
    text-indent: 0;
  }

  .sidebar-mobile-open .app-sidebar.leadya-sidebar .app-sidebar__inner .metismenu-icon,
  .app-sidebar.leadya-sidebar .vertical-nav-menu i.metismenu-icon {
    left: 10px;
    margin-left: 0;
    text-indent: 0;
  }
}

.leadya-main-sidebar + .app-main__outer {
  padding-left: 280px;
}

.leadya-portal-sidebar + .app-main__outer {
  padding-left: 280px;
}

/* ---------- Tekst na jasnym tle (odpowiednik bloku z leadya.css) ---------- */

/* (bez .text-white — w tym motywie .bg-dark pozostaje ciemny,
   więc .text-white musi zostać białe jak w Bootstrapie) */
.nav-item .nav-link,
.white-link,
.campaign-name,
.other-campaign-button,
.text-center,
.div.form-group,
.card-title,
.table .table,
.col-1 i.metismenu-icon,
.table {
  color: var(--ld-ink) !important;
}

.white-link span {
  color: var(--color-white);
}

/* Linki listowe .link z additional.css (#ebad49) mają na białych
   powierzchniach kontrast <2:1 — w tym motywie przechodzą na brand */
.link {
  color: var(--ld-brand);
}

.link:hover {
  color: var(--ld-brand-hover);
}

/* ---------- Karty i formularze: hairline, radius 12, bez cienia ---------- */

.card,
#formCreateCampaignUsingAI {
  background-color: var(--ld-surface);
  color: var(--ld-text);
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  box-shadow: none;
}

.card-header {
  border-bottom: 1px solid var(--ld-border-soft);
}

form,
.form-control-full-height {
  background-color: var(--ld-surface);
  color: var(--ld-text);
  border-radius: 12px;
  box-shadow: none;
}

/* Ciemna powierzchnia narzędziowa: toolbary kampanii, nagłówki modali.
   Inaczej niż w starym leadya .bg-dark ZOSTAJE ciemny — panele
   .task-auto__* i przyciski .task-nav-bar__btn zakładają ciemne tło
   (półprzezroczysta biel + biały tekst). */
.bg-dark,
.btn-dark {
  background-color: var(--ld-ink) !important;
  color: #fff;
  border: 0;
  border-radius: 12px;
}

.bg-dark .card-title,
.bg-dark label,
.bg-dark .text-center {
  color: #fff !important;
}

.bg-dark .form-control,
.bg-dark .custom-select {
  background-color: rgba(255, 255, 255, 0.96);
  color: var(--ld-text);
  border: 0;
}

/* Formularze i linki wewnątrz ciemnych toolbarów — bez białych bloków */
.bg-dark form {
  background-color: transparent;
  color: #fff;
  box-shadow: none;
}

.bg-dark .white-link,
.bg-dark .nav-item .nav-link,
.bg-dark .campaign-name {
  color: #fff !important;
}

/* Wiersze kampanii w karcie zarządzania (fragment campaignEdit) to jasne
   powierzchnie .form-control-full-height wewnątrz ciemnej karty .bg-dark —
   nazwa kampanii musi tu być atramentowa, nie biała. Wiersze specjalne
   (niezbudowana/wyłączona kampania, inline ciemne tło) nie mają
   .firstCampaignDiv i zachowują biały tekst. */
.bg-dark .firstCampaignDiv .campaign-name {
  color: var(--ld-ink) !important;
}

.form-control,
.custom-select {
  border: 1px solid var(--ld-border);
  border-radius: 8px;
  color: var(--ld-text);
}

.modal-content {
  border: 0;
  border-radius: 14px;
}

.dropdown-menu {
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 18, 43, 0.1);
}

/* ---------- Przyciski ---------- */

.btn {
  border-radius: 8px;
}

.btn-light,
.btn-simple,
.btn-medium {
  background-color: var(--ld-brand);
  border-color: var(--ld-brand);
  color: #ffffff;
}

.btn-light:hover,
.btn-turn-campaign,
.btn-simple:hover,
.btn-medium:hover {
  background-color: var(--ld-brand-hover);
  border-color: var(--ld-brand-hover);
  color: #ffffff;
}

.btn-turn-campaign:hover {
  background-color: var(--ld-surface);
  color: var(--ld-ink);
}

.btn-warning {
  background: var(--ld-accent);
  border-color: var(--ld-accent);
  color: var(--ld-ink);
}

.btn-warning:hover {
  background: #f5b32f;
  border-color: #f5b32f;
  color: var(--ld-ink);
  font-weight: 600;
}

.btn-low {
  border-color: var(--ld-border);
  background-color: var(--ld-ink);
  color: #ffffff;
}

.btn-low:hover,
.theme {
  border-color: var(--ld-brand);
}

/* Macierz przycisków — spójne warianty semantyczne */

.btn-primary {
  background-color: var(--ld-brand);
  border-color: var(--ld-brand);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ld-brand-hover);
  border-color: var(--ld-brand-hover);
  color: #fff;
}

.btn-secondary {
  background-color: var(--ld-surface);
  border: 1px solid var(--ld-border);
  color: var(--ld-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--ld-bg);
  border-color: var(--ld-brand);
  color: var(--ld-ink);
}

.btn-info {
  background-color: var(--ld-info, #2e90fa);
  border-color: var(--ld-info, #2e90fa);
  color: #fff;
}

.btn-success {
  background-color: var(--ld-success, #12b76a);
  border-color: var(--ld-success, #12b76a);
  color: #fff;
}

.btn-success:hover,
.btn-success:focus,
#openExtendWalletModal:hover {
  background-color: #0ea25c;
  border-color: #0ea25c;
  color: #fff;
}

.btn-danger {
  background-color: var(--ld-danger, #f04438);
  border-color: var(--ld-danger, #f04438);
  color: #fff;
}

/* ---------- Alerty: semantyczne tinty zamiast domyślnych Bootstrapa ---------- */

.alert {
  border-radius: 10px;
}

.alert-warning {
  background-color: var(--ld-warning-bg, #fdf3e2);
  border-color: #f3d9a4;
  color: var(--ld-warning-ink, #935e06);
}

.alert-danger {
  background-color: var(--ld-danger-bg, #fcebeb);
  border-color: #f5b5b0;
  color: var(--ld-danger-ink, #a32d2d);
}

.alert-info {
  background-color: var(--ld-info-bg, #e8f2fe);
  border-color: #b6d7f8;
  color: var(--ld-info-ink, #1560ac);
}

.alert-success {
  background-color: var(--ld-success-bg, #e7f8f0);
  border-color: #abe8cd;
  color: var(--ld-success-ink, #0e7a4f);
}

/* ---------- Tabele: hairline, wyrównanie, hover wiersza ---------- */

.table td,
.table th {
  border-color: var(--ld-border-soft);
  vertical-align: middle;
}

.table thead th {
  border-color: var(--ld-border);
}

.table tbody tr:hover {
  background-color: #fafafe;
}

/* ---------- Sidebar: jednolite ikony (brandowe FB/IG zostają inline) ---------- */

.vertical-nav-menu i.metismenu-icon {
  color: #6b7280;
}

.vertical-nav-menu .selected-element i.metismenu-icon,
.selected-element i.metismenu-icon {
  color: #4a34c4;
}

/* ---------- Kontakty: stylistyka messengera ----------
   Układ messengerowy z additional.css zostaje w całości (lista rozmów,
   avatary i dymki wychodzące na --main-color, nagłówek panelu na
   --background-color). Tu tylko szlif: bardziej zaokrąglone dymki. */

.contacts-message-bubble {
  border-radius: 18px;
}

.contacts-message-bubble-incoming {
  background: #f0f1f5;
  border-color: var(--ld-border);
  border-bottom-left-radius: 5px;
}

.contacts-message-bubble-outgoing {
  border-bottom-right-radius: 5px;
}

.contacts-conversation-item {
  border-radius: 12px;
}

/* ---------- Drobiazgi spójności ---------- */

div.carousel-caption h4 span,
div.carousel-caption h5 span {
  color: var(--ld-brand);
}

/* Fix czytelności w tabeli kontaktów (jak w leadya.css) */
.table .text-muted {
  color: #6c757d !important;
}

.table .badge-info {
  background-color: var(--ld-info, #2e90fa) !important;
  color: #fff !important;
}

.badge {
  border-radius: 999px;
  font-weight: 600;
}

/* Offer picker: placeholder NEW_LEADYA — miękki fiolet z żółtą poświatą i kropkami. */
.offer-tile__art--placeholder {
  background:
    radial-gradient(circle at 78% 20%, var(--ld-accent, #ffc24b) 0, transparent 34%),
    radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.6px),
    linear-gradient(150deg, var(--ld-brand, #6c4cf1) 0%, var(--ld-ink, #14122b) 100%);
  background-size: auto, 14px 14px, auto;
}