/* ============================================================================
   MailCraft - reskin panelu Acelle (Cobalt Editorial)
   Zadanie #25 Etap A + #31 (2026-06-06). Cel: panel app.mailcraft.eu wizualnie
   spojny z www.mailcraft.eu (motyw `mailcraft`, design Cobalt Editorial).

   Mechanizm: ten plik laduje sie jako OSTATNI arkusz w
   resources/views/layouts/core/_includes.blade.php (po core/css/app.css ORAZ
   po core/css/dark.css), wiec wygrywa kaskada. ZERO modyfikacji kodu Acelle.
   Rollback = pusty plik / kopia .bak.

   Cel deploy: /home/mailcraft/app.mailcraft.eu/public/custom.css
   Fonty:      /home/mailcraft/app.mailcraft.eu/public/fonts/*.woff2
   Stack panelu: Bootstrap 5.2.3 + Acelle core/css/app.css (akcent teal #007c89)
                 + core/css/dark.css (tryb ciemny, prefiks .layout-dark / .mode-dark).
   Zasada: bez em-dash w tekstach (uzywamy "-").

   --- #31 (2026-06-06): KLUCZOWE ZASADY KASKADY ---
   * Akcenty (kobalt: btn, linki, focus, badge, taby, paginacja) + fonty = GLOBALNE
     (dzialaja i w trybie jasnym i ciemnym).
   * Kolory tekstu/tla "jasne" (ink na cream, biale karty) = TYLKO body.mode-light.
     Wczesniej byly globalne i LAMALY tryb ciemny (admin mode-dark mial ink naglowki
     na ciemnym tle -> niewidoczne). Teraz tryb ciemny zostawiamy dark.css (biały tekst),
     dokladajac tylko kobaltowy akcent.
   * Strony .layout-dark (selectPlan/checkout/buildery, BEZ klasy theme-cobalt i bez
     theme/cobalt.css) - dark.css rzadzi; nadpisujemy przyciski na kobalt tym samym
     poziomem specyficznosci (custom.css laduje sie po dark.css).
   ========================================================================== */

/* --- 1. Self-hosted fonty (Cobalt Editorial, latin + latin-ext = PL znaki) --- */
/* Zrodlo: projekt graficzny Claude design / Mailcraft 2.0.zip / font-export.
   Sciezki absolutne (/fonts/...) - dzialaja niezaleznie od lokalizacji custom.css. */

@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* --- 2. Tokeny Cobalt + nadpisanie zmiennych Bootstrap (akcent globalny) --- */
:root {
  --mc-cream:        #F6F4EE;
  --mc-ink:          #0A2540;
  --mc-cobalt:       #3D5AFE;
  --mc-cobalt-deep:  #2E3FAF;
  --mc-cobalt-100:   #ECEEFF;
  --mc-line:         #E5E1D6;
  --mc-line-soft:    #EFEDE5;
  --mc-card:         #FFFFFF;
  --mc-muted:        #5A6478;
  --mc-green:        #2E8B6F;
  --mc-red:          #C0392B;
  --mc-amber:        #B5882F;
  --mc-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mc-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --mc-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --mc-shadow-sm:    0 1px 2px rgba(10,37,64,.04);
  --mc-shadow:       0 6px 20px -12px rgba(10,37,64,.22);

  /* przemapowanie AKCENTU Bootstrapa na kobalt (dziala w obu trybach) */
  --bs-primary:        #3D5AFE;
  --bs-primary-rgb:    61,90,254;
  --bs-link-color:     #3D5AFE;
  --bs-link-color-rgb: 61,90,254;
  --bs-link-hover-color: #2E3FAF;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-border-radius:    .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .625rem;
}

/* --- 3. Typografia (fonty GLOBALNE - nie ruszamy koloru tekstu w dark) --- */
body { font-family: var(--mc-font-body); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.page-title, .box-title, .navbar-brand {
  font-family: var(--mc-font-display);
  letter-spacing: -.3px;
}
code, pre, kbd, .text-monospace { font-family: var(--mc-font-mono); }

/* --- 4. Akcent: utility i kolory primary (override teal #007c89) - GLOBALNE --- */
a:not(.btn) { color: var(--mc-cobalt); }
a:not(.btn):hover { color: var(--mc-cobalt-deep); }
.text-primary, a.text-primary { color: var(--mc-cobalt) !important; }
.bg-primary { background-color: var(--mc-cobalt) !important; }
.border-primary { border-color: var(--mc-cobalt) !important; }
.text-success { color: var(--mc-green) !important; }
.text-danger  { color: var(--mc-red) !important; }
.text-warning { color: var(--mc-amber) !important; }

/* --- 5. Przyciski - GLOBALNE (radius + kolory) --- */
/* WAZNE: Acelle app.css ustawia background-color WPROST
   (.btn-primary{#00838F}, .btn-secondary{#716b67}), a dark.css dokłada
   `body.mode-dark .btn-primary{filter:grayscale(.3)}`. Dlatego override musi
   uzywac bezposredniego background-color + !important (zmienne --bs-btn-bg nie
   wystarczaja - przegrywaja z direct background-color o tej samej specyficznosci). */
.btn { border-radius: 10px; font-weight: 600; }

/* #31: primary CTA = kobalt. W Acelle GLOWNY przycisk akcji ("+ Create...",
   "New...", "Buy", "Upload") to .btn-primary LUB .btn-secondary (oprocz
   .dropdown-toggle, ktore sa filtrami). Oba -> kobalt wypelniony. */
.btn-primary,
.btn-secondary:not(.dropdown-toggle) {
  background-color: var(--mc-cobalt) !important;
  border-color: var(--mc-cobalt) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px -12px rgba(61,90,254,.55);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-secondary:not(.dropdown-toggle):hover,
.btn-secondary:not(.dropdown-toggle):focus,
.btn-secondary:not(.dropdown-toggle):active {
  background-color: var(--mc-cobalt-deep) !important;
  border-color: var(--mc-cobalt-deep) !important;
  color: #fff !important;
}
/* tryb ciemny: zdejmij grayscale z primary i wymus kobalt na secondary */
body.mode-dark .btn-primary,
body.mode-dark .btn-secondary:not(.dropdown-toggle) { filter: none !important; }

.btn-outline-primary {
  --bs-btn-color: var(--mc-cobalt);
  --bs-btn-border-color: var(--mc-cobalt);
  --bs-btn-hover-bg: var(--mc-cobalt);
  --bs-btn-hover-border-color: var(--mc-cobalt);
  --bs-btn-active-bg: var(--mc-cobalt);
  --bs-btn-active-border-color: var(--mc-cobalt);
}
.btn-link { color: var(--mc-cobalt); }

/* filtry / dropdowny akcji ("Created at", "All statuses", "Actions") =
   drugorzedne outline (jak w mockupie). Tylko tryb jasny - w ciemnym Acelle
   sam je stylizuje czytelnie (jasne tlo, ciemny tekst). */
body.mode-light .btn-secondary.dropdown-toggle {
  background-color: transparent !important;
  color: var(--mc-ink) !important;
  border-color: var(--mc-line) !important;
  box-shadow: none;
}
body.mode-light .btn-secondary.dropdown-toggle:hover {
  background-color: var(--mc-cobalt-100) !important;
  border-color: var(--mc-cobalt) !important;
  color: var(--mc-ink) !important;
}

/* --- 6. Sidebar / topnav (navbar-main) - ciemny ink jak hero www (oba tryby) --- */
.navbar-main.frontend,
.navbar-main {
  background: var(--mc-ink) !important;
  border: none;
}
.navbar-main .nav-link { color: rgba(255,255,255,.78) !important; }
.navbar-main .nav-link:hover { color: #fff !important; }
.navbar-main .nav-item.active > .nav-link,
.navbar-main .nav-link.active {
  color: #fff !important;
  background: rgba(61,90,254,.18);
  border-radius: 8px;
}
.navbar-main .nav-item.active > .nav-link .navbar-icon,
.navbar-main .nav-link:hover .navbar-icon { color: var(--mc-cobalt) !important; }
.navbar-brand .logo { filter: none; }

/* dropdown menu sidebara */
.navbar-main .dropdown-menu { border-color: var(--mc-line); border-radius: 10px; box-shadow: var(--mc-shadow); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--mc-cobalt); }

/* --- 7. Formularze (focus = kobalt) - GLOBALNE --- */
.form-control:focus, .form-select:focus, .custom-select:focus {
  border-color: var(--mc-cobalt);
  box-shadow: 0 0 0 .2rem rgba(61,90,254,.18);
}
.form-control, .form-select { border-radius: 8px; }
.form-check-input:checked { background-color: var(--mc-cobalt); border-color: var(--mc-cobalt); }
input[type=checkbox], input[type=radio] { accent-color: var(--mc-cobalt); }

/* select2 (Acelle uzywa go masowo) */
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--mc-cobalt) !important; }

/* --- 8. Badge / pill - GLOBALNE --- */
.badge.bg-primary, .color-badge { background-color: var(--mc-cobalt) !important; }
.badge { border-radius: 999px; font-weight: 600; }

/* --- 9. Akcenty tabel/paginacji/progress/zakladek - GLOBALNE --- */
.page-item.active .page-link { background-color: var(--mc-cobalt); border-color: var(--mc-cobalt); }
.page-link { color: var(--mc-cobalt); }
.progress-bar { background-color: var(--mc-cobalt); }
.nav-tabs .nav-link.active { color: var(--mc-cobalt); border-bottom-color: var(--mc-cobalt); }
.nav-pills .nav-link.active { background-color: var(--mc-cobalt); }
::selection { background: var(--mc-cobalt-100); color: var(--mc-ink); }

/* ===========================================================================
   10. TRYB JASNY (body.mode-light) - kolory ink na cream, biale karty.
   Te reguly NIE moga byc globalne, bo psuja tryb ciemny (#31).
   =========================================================================== */
body.mode-light {
  color: var(--mc-ink);
  background-color: var(--mc-cream);
  --bs-body-color: var(--mc-ink);
  --bs-body-bg: var(--mc-cream);
}
body.mode-light h1, body.mode-light h2, body.mode-light h3,
body.mode-light h4, body.mode-light h5,
body.mode-light .h1, body.mode-light .h2, body.mode-light .h3,
body.mode-light .h4, body.mode-light .h5,
body.mode-light .page-title, body.mode-light .box-title { color: var(--mc-ink); }

body.mode-light .box, body.mode-light .card {
  border: 1px solid var(--mc-line);
  border-radius: 10px;
  background: var(--mc-card);
  box-shadow: var(--mc-shadow-sm);
}
body.mode-light .form-control, body.mode-light .form-select { border-color: var(--mc-line); }
body.mode-light .select2-container--default .select2-selection { border-color: var(--mc-line) !important; border-radius: 8px !important; }
body.mode-light .table > thead th { color: var(--mc-muted); border-bottom-color: var(--mc-line); }
body.mode-light .table td, body.mode-light .table th { border-color: var(--mc-line-soft); }
body.mode-light .topfix-container { background: var(--mc-card); border-bottom-color: var(--mc-line) !important; }
body.mode-light .page-container { color: var(--mc-ink); }
body.mode-light hr { border-color: var(--mc-line); }
.topfix-search-input.form-control { border-radius: 999px; }

/* ===========================================================================
   11. STRONY .layout-dark (selectPlan / checkout / buildery kampanii/automacji)
   - BEZ klasy theme-cobalt i bez theme/cobalt.css; dark.css rzadzi akcentem.
   custom.css laduje sie PO dark.css -> ta sama specyficznosc nadpisuje przyciski.
   =========================================================================== */
/* przyciski na layout-dark pokrywa juz globalna regula .btn-primary/.btn-secondary
   (background-color !important) z sekcji 5. Tu tylko korekta linkow. */
.layout-dark a:not(.btn) { color: #8aa0ff; }
.layout-dark a:not(.btn):hover { color: #aab8ff; }

/* #31: karty wyboru planu - opis ma inline style="height:130px"; nasze opisy sa
   dluzsze i wylewaly sie na box "sending credits" (nachodzacy tekst).
   Pozwalamy kontenerowi rosnac (override inline height, CSS-only, update-safe). */
.select-plan-item div[style*="height: 130px"],
.select-plan-item div[style*="height:130px"] {
  height: auto !important;
  min-height: 130px;
}

/* #32/B: Acelle wyszarza niewybrane karty planow (app.css `.new-price-item{filter:
   grayscale(.9)}` + `.select-plan-box{opacity:.8;filter:grayscale(.5)}`) - wygladaja
   jak wylaczone. Odszarzamy je (pelny kolor + kobaltowy "Buy" od razu), zostawiajac
   wyszarzenie TYLKO dla realnie niedostepnych `.disabled`. */
.select-plan-box { filter: none !important; opacity: 1 !important; }
.new-price-item:not(.disabled) { filter: none !important; }