/* ============================================================================
   brand-core.css — JEDNO ŹRÓDŁO PRAWDY (SSOT) STYLÓW PANELU CORE
   CRMdlakazdego.pl Sp. z o.o. · Velzon 4.x / Bootstrap 5.3.2 · plik kanoniczny
   Lokalizacja kanoniczna: core/public/build/css/brand-core.css (repo Core)
   ============================================================================

   ⛔ DLA AGENTÓW AI I PROGRAMISTÓW — PRZECZYTAJ ZANIM DODASZ JAKIKOLWIEK CSS:

   1. TO JEST JEDYNE miejsce na styl/branding Core. Nowy custom CSS (kolor,
      komponent, utility, override Velzona) DODAJESZ TUTAJ — NIGDY inline w Blade,
      NIGDY w nowych plikach .css, NIGDY w app.min.css/bootstrap.min.css (vendor).
   2. Jeżeli użytkownik prosi o „customowy styl X" — miejsce docelowe = ten plik.
      Zadeklaruj token/komponent tu, użyj klasy w Blade.
   3. custom.min.css (build_crm/css) = USUNIĘTY (Faza 0.5, 2026-07-16). Cała jego
      zawartość zmigrowana tutaj (§14-17). NIE przywracaj go — to jest jedyne źródło
      stylów Core. Branding ładowany GLOBALNIE (head-css, bez opt-in cookie).
   4. Podgląd na żywo (PRZED/PO + galeria komponentów): /superadmin/brand-preview
      — to lustro TEGO pliku. Dodałeś komponent tu → dorzuć jego przykład tam.
   5. Docs: docs/UI_PATTERNS.md i docs/patterns/_README.md wskazują ten plik jako
      SSOT. Reguły użycia kolorów/typografii — patrz też BRAND_TOKENS.md.

   MODEL WARSTW (żeby dało się duplikować na inne systemy):
     • L1  crmdlakazdego-context/BRAND_TOKENS.css  — FIRMOWY SSOT tokenów (kolory,
           typografia) wspólny dla WSZYSTKICH produktów. Zmiana palety = NAJPIERW tam.
     • L2  TEN PLIK  — instancja L1 dla Core: mapowanie tokenów → zmienne Velzon/BS5
           (--vz-*) + komponenty Core. Duplikacja na produkt o tym samym stacku
           (Velzon: AD CRM, Basic, MFS) = kopiujesz ten plik jako wzorzec. Na inny
           stack (np. Expio/Tailwind) = te same tokeny L1, INNE mapowanie.

   FILOZOFIA: nie walczymy z Velzonem — przejmujemy jego CSS custom properties
   (--vz-*). Plik ładowany PO arkuszach Velzona (bootstrap.min.css, app.min.css,
   custom.min.css) wygrywa kaskadą przy tej samej specyficzności. Usunięcie <link>
   = pełny rollback.

   STRUKTURA: 1) tokeny marki · 2) mapowanie na Velzon · 3) tło · 4) typografia ·
   5) sidebar · 6) przyciski · 7) mail-item · 8) timeline · 9) utilities typów
   zdarzeń · 10) podgląd maila · 11) tag-pill · 12) utilities marki.

   INSTALACJA — w layouts/head-css.blade.php, PO istniejących linkach CSS:
   <!-- Fonty marki: Inter (body) + Anton (nagłówki, Core-only) — Bunny Fonts (GDPR) -->
   <link rel="preconnect" href="https://fonts.bunny.net">
   <link href="https://fonts.bunny.net/css?family=anton|inter:400,500,600,700|manrope:600,700,800&display=swap" rel="stylesheet">
   <!-- Branding Core (SSOT) — mapowanie tokenów marki na zmienne Velzona -->
   <link href="{{ URL::asset('build/css/brand-core.css') }}" rel="stylesheet" type="text/css" />

   UWAGA: plik zakłada jasny motyw (Core nie używa data-bs-theme="dark").
   Gdyby dark mode kiedyś wszedł — sekcje 1-5 wymagają przeglądu.
   ============================================================================ */


/* ============================================================================
   1. TOKENY MARKI (--brand-*)
   ----------------------------------------------------------------------------
   Kopia 1:1 z crmdlakazdego-context/BRAND_TOKENS.css — SSOT. Przy zmianie
   palety marki aktualizujemy NAJPIERW tamten plik, potem tę kopię.
   Zasada 60/30/10: 60% biel (tła) · 30% granat (struktura/tekst) · 10% zieleń.
   ============================================================================ */
:root {
    /* --- ZIELEŃ (akcent / CTA / linki — 10%) --- */
    --brand-green:        #11662D;   /* primary: CTA, linki, stany aktywne, success */
    --brand-green-hover:  #0D4F22;   /* hover / pressed CTA (kanon — NIE #0f5b28) */

    /* --- MINT — jasny akcent TYLKO na ciemnym (granatowym) tle --- */
    /* #11662D jest za ciemny, by był czytelny na granacie #122738 — stąd mint. */
    /* NIGDY na białym tle, NIGDY jako wypełnienie CTA. Tu: aktywna pozycja     */
    /* menu w granatowym sidebarze — jedyne dozwolone miejsce mintu w Core.     */
    --brand-mint:         #6EE7A0;
    --brand-mint-hover:   #8AECAF;

    /* --- GRANAT (struktura / tekst — 30%) --- */
    --brand-navy:         #122738;   /* sidebar, nagłówki, tekst główny */
    --brand-navy-soft:    #2A3A4C;   /* tekst drugorzędny / body rozjaśniony */

    /* --- SZAROŚCI / TEKST POMOCNICZY --- */
    --brand-muted:        #6B7785;   /* meta, caption, labels, placeholder */

    /* --- TŁA (biel — 60%) --- */
    --brand-white:        #FFFFFF;   /* karty, lista maili, timeline */
    --brand-bg-soft:      #FAFAF7;   /* tło strony (ciepły off-white zamiast szarego Velzona) */

    /* --- BORDERY / LINIE --- */
    --brand-border:        #E9ECEF;                 /* bordery, separatory (solid) */
    --brand-border-subtle: rgba(18, 39, 56, 0.08);  /* delikatne linie (granat @ 8%) */

    /* --- TEKST NA CIEMNYM (granatowym) TLE --- */
    --brand-on-dark:        rgba(255, 255, 255, 0.92);
    --brand-on-dark-soft:   rgba(255, 255, 255, 0.70);
    --brand-on-dark-muted:  rgba(255, 255, 255, 0.50);

    /* --- TYPOGRAFIA --- */
    --brand-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* DISPLAY = Anton (decyzja Artura 2026-07-15, TYLKO Core). ŚWIADOME odejście od standardu
       firmowego Manrope (BRAND_TOKENS.css) — Core już używa Antona w nagłówkach (custom.min.css:
       .card-title, .link-anton), kondensowany „bold" pasuje do panelu; zgodne z notką 03-BRANDING
       „condensed sans-serif typu Oswald/Anton". Reszta produktów zostaje na Manrope.
       NIE „poprawiać" z powrotem na Manrope bez zgody Artura. Anton ma jedną wagę (400). */
    --brand-font-display: 'Anton', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    /* --- PROMIENIE / CIENIE --- */
    --brand-radius-sm: 8px;
    --brand-radius:    12px;
    --brand-radius-lg: 20px;
    --brand-shadow:    0 8px 30px rgba(18, 39, 56, 0.10);

    /* --- POCHODNE (wyliczone z palety — używane w mapowaniu Velzona) --- */
    /* Pastele Bootstrapowe *-subtle liczone wg wzoru BS 5.3 (tint 80/60%,     */
    /* shade 60%) z #11662D — żeby bg-primary-subtle grało z resztą utilities. */
    --brand-green-bg-subtle:     #CFE0D5;   /* tint 80% zieleni */
    --brand-green-border-subtle: #A0C2AB;   /* tint 60% zieleni */
    --brand-green-text-emphasis: #072912;   /* shade 60% zieleni */
    --brand-navy-bg-subtle:      rgba(18, 39, 56, 0.08); /* granat 8% — pastel dla sesji AI */

    /* --- LAYOUT Velzona --- */
    --brand-sticky-top: 70px;   /* wysokość topbara Velzona — offset dla sticky nagłówków dni */
}


/* ============================================================================
   2. MAPOWANIE NA ZMIENNE VELZONA / BOOTSTRAPA 5.3
   ----------------------------------------------------------------------------
   To serce pliku. Velzon steruje kolorami przez --vz-* — podmiana tutaj
   przemalowuje automatycznie: btn-primary, nav-pills .active, linki, avatary
   (.avatar-title), progress bary, page-item paginacji itd. bez dotykania Blade.
   ============================================================================ */
:root {
    /* PRIMARY: indigo Velzona (#405189) → zieleń butelkowa marki.
       --vz-primary-rgb jest kluczowe: text-primary, btn-soft-primary, focus
       ringi i tła z opacity liczą się z tego rgb. */
    --vz-primary:      var(--brand-green);
    --vz-primary-rgb:  17, 102, 45;

    /* Pastele primary (bg-primary-subtle / border-primary-subtle /
       text-primary-emphasis) — używane m.in. przez ikony typów zdarzeń
       na timeline (mail = kolor marki, patrz 03_UX_UI § 2.3). */
    --vz-primary-bg-subtle:     var(--brand-green-bg-subtle);
    --vz-primary-border-subtle: var(--brand-green-border-subtle);
    --vz-primary-text-emphasis: var(--brand-green-text-emphasis);

    /* SUCCESS: teal Velzona (#0ab39c) → zieleń marki. Kanon BRAND_TOKENS mówi
       wprost: zieleń = "CTA, linki, stany aktywne, SUCCESS". Dzięki temu badge
       "klient" (bg-success-subtle text-success border-success — używany już
       w skrzynce Poczty) robi się pastelowo-zielony w palecie marki. */
    --vz-success:      var(--brand-green);
    --vz-success-rgb:  17, 102, 45;
    --vz-success-bg-subtle:     var(--brand-green-bg-subtle);
    --vz-success-border-subtle: var(--brand-green-border-subtle);
    --vz-success-text-emphasis: var(--brand-green-text-emphasis);

    /* LINKI: zieleń + hover ciemniejszy (kanon: #0D4F22, nie odcienie "prawie"). */
    --vz-link-color:           var(--brand-green);
    --vz-link-color-rgb:       17, 102, 45;
    --vz-link-hover-color:     var(--brand-green-hover);
    --vz-link-hover-color-rgb: 13, 79, 34;

    /* TEKST: granat zamiast szaro-czarnego Velzona.
       body = navy-soft (rozjaśniony — długie czytanie), nagłówki = pełny granat. */
    --vz-body-color:      var(--brand-navy-soft);
    --vz-body-color-rgb:  42, 58, 76;
    --vz-heading-color:   var(--brand-navy);
    --vz-secondary-color: var(--brand-muted);   /* text-muted / meta / caption */

    /* BORDERY: kanon marki (Velzon ma #e9ebec — różnica kosmetyczna,
       ale mapujemy dla spójności z landingiem i pozostałymi produktami). */
    --vz-border-color: var(--brand-border);
}

/* Pozostałe kolory funkcjonalne Velzona (info/warning/danger/secondary)
   zostają STOCKOWE — świadomie. Mapa typów zdarzeń (03_UX_UI § 2.3) używa ich
   jako kolorów INFORMACYJNYCH (telefon=info, spotkanie=warning, SMS=secondary),
   nie brandingowych — pastele subtle nie łamią 60/30/10. */


/* ============================================================================
   3. TŁO STRONY — ciepły off-white zamiast szarego Velzona (60% bieli)
   ----------------------------------------------------------------------------
   Karty (.card) mają własne --vz-card-bg (białe) ustawiane na komponencie,
   więc podmiana tła body ich nie dotyka — dokładnie o to chodzi:
   białe karty na #FAFAF7.
   ============================================================================ */
:root {
    --vz-body-bg: var(--brand-bg-soft);
}
/* Fallback, gdyby któraś część layoutu Velzona miała tło ustawione literalnie
   zamiast przez zmienną (np. .main-content w niektórych skórkach). */
body,
.main-content {
    background-color: var(--brand-bg-soft);
}


/* ============================================================================
   4. TYPOGRAFIA — Inter (body) + Anton (nagłówki, Core-only)
   ----------------------------------------------------------------------------
   Velzon używa Poppins przez --vz-font-sans-serif — podmieniamy zmienną,
   więc wszystkie komponenty dziedziczą Inter bez dodatkowych selektorów.
   Fonty ładuje <link> Bunny Fonts w head-css.blade.php (patrz nagłówek pliku).
   ============================================================================ */
:root {
    --vz-font-sans-serif: var(--brand-font-body);
}

/* Nagłówki = Anton (display; obejmujemy h1-h6 + klasy .h1-.h6 oraz .card-title,
   bo Velzon renderuje tytuły kart różnie — raz h4, raz div). WYJĄTEK: nagłówki
   dnia na timeline (małe litery/data) używają Manrope — patrz § 8. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title {
    font-family: var(--brand-font-display);
}


/* ============================================================================
   5. SIDEBAR — granat #122738, aktywna pozycja mint (jedyne miejsce mintu!)
   ----------------------------------------------------------------------------
   Core używa data-sidebar="dark". Velzon trzyma kolory ciemnego sidebara
   w zmiennych --vz-vertical-menu-* — nadpisujemy je (indigo → granat),
   a niżej dokładamy bezpośrednie reguły jako fallback dla elementów,
   które w kompilacie mają kolor wpisany literalnie.
   ============================================================================ */
[data-sidebar="dark"] {
    --vz-vertical-menu-bg:                    var(--brand-navy);
    --vz-vertical-menu-border:               var(--brand-navy);
    --vz-vertical-menu-item-color:            var(--brand-on-dark-soft);
    --vz-vertical-menu-item-hover-color:      var(--brand-on-dark);
    --vz-vertical-menu-item-active-color:     var(--brand-mint);
    --vz-vertical-menu-sub-item-color:        var(--brand-on-dark-muted);
    --vz-vertical-menu-sub-item-hover-color:  var(--brand-on-dark);
    --vz-vertical-menu-sub-item-active-color: var(--brand-mint);
    --vz-vertical-menu-title-color:           var(--brand-on-dark-muted);
    /* Topbara NIE ruszamy — data-sidebar steruje tylko sidebarem,
       topbar (--vz-header-bg) zostaje jasny jak dotychczas. */
}

/* Fallbacki bezpośrednie — gdyby kompilat Velzona nie czytał zmiennych
   w każdym miejscu (różnice między minorkami 4.x). */
[data-sidebar="dark"] .navbar-menu {
    background-color: var(--brand-navy);
}
[data-sidebar="dark"] .navbar-menu .navbar-nav .nav-link.active,
[data-sidebar="dark"] .navbar-menu .navbar-nav .nav-link.active i {
    color: var(--brand-mint);
}
/* Hover pozycji menu — pełna biel dla czytelności na granacie */
[data-sidebar="dark"] .navbar-menu .navbar-nav .nav-link:hover {
    color: var(--brand-on-dark);
}


/* ============================================================================
   6. PRZYCISKI — jawne nadpisanie wariantów primary/success
   ----------------------------------------------------------------------------
   DLACZEGO osobno: Bootstrap 5.3 kompiluje kolory przycisków jako LITERALNE
   wartości do zmiennych komponentu (.btn-primary { --vz-btn-bg: #405189 }),
   więc samo przemapowanie --vz-primary ich nie łapie. Nadpisujemy zmienne
   komponentu — to oficjalny mechanizm BS 5.3, bez !important.
   ============================================================================ */
/* PRIMARY jako CTA = jasna zieleń (mint) + GRANATOWY tekst — odróżnia przycisk primary
   ("Zapisz zmiany") od success ("Wyślij", zieleń butelkowa). Decyzja Artura 2026-07-15.
   WAŻNE: mint tylko jako WYPEŁNIENIE przycisku z ciemnym tekstem. Globalny --vz-primary
   (linki, nav-pills .active, paginacja, checkboxy, text-primary) ZOSTAJE zielony (§2) —
   mint jako tekst/link na białym tle jest nieczytelny (kontrast ~1.4:1) i łamie kanon
   BRAND_TOKENS ("mint NIGDY na białym, NIGDY jako tekst"). Stąd primary-button ≠ primary-token. */
.btn-primary {
    --vz-btn-bg:                    var(--brand-mint);
    --vz-btn-border-color:          var(--brand-mint);
    --vz-btn-color:                 var(--brand-navy);
    --vz-btn-hover-bg:              var(--brand-mint-hover);
    --vz-btn-hover-border-color:    var(--brand-mint-hover);
    --vz-btn-hover-color:           var(--brand-navy);
    --vz-btn-active-bg:             var(--brand-mint-hover);
    --vz-btn-active-border-color:   var(--brand-mint-hover);
    --vz-btn-active-color:          var(--brand-navy);
    --vz-btn-disabled-bg:           var(--brand-mint);
    --vz-btn-disabled-border-color: var(--brand-mint);
    --vz-btn-disabled-color:        var(--brand-navy);
    --vz-btn-focus-shadow-rgb:      110, 231, 160;
}

.btn-outline-primary {
    --vz-btn-color:                var(--brand-green);
    --vz-btn-border-color:         var(--brand-green);
    --vz-btn-hover-bg:             var(--brand-green);
    --vz-btn-hover-border-color:   var(--brand-green);
    --vz-btn-active-bg:            var(--brand-green-hover);
    --vz-btn-active-border-color:  var(--brand-green-hover);
    --vz-btn-focus-shadow-rgb:     17, 102, 45;
}

/* Success = zieleń marki (spójnie z mapowaniem --vz-success w sekcji 2) */
.btn-success {
    --vz-btn-bg:                   var(--brand-green);
    --vz-btn-border-color:         var(--brand-green);
    --vz-btn-hover-bg:             var(--brand-green-hover);
    --vz-btn-hover-border-color:   var(--brand-green-hover);
    --vz-btn-active-bg:            var(--brand-green-hover);
    --vz-btn-active-border-color:  var(--brand-green-hover);
    --vz-btn-disabled-bg:          var(--brand-green);
    --vz-btn-disabled-border-color: var(--brand-green);
    --vz-btn-focus-shadow-rgb:     17, 102, 45;
}

/* Warianty soft/ghost Velzona (btn-soft-primary, btn-ghost-primary) liczą się
   z rgba(var(--vz-primary-rgb), ...) — łapią zieleń automatycznie z sekcji 2,
   nie wymagają nadpisania. */

/* Nav-pills: aktywny pill = pełna zieleń (BS 5.3 też kompiluje literal).
   Dotyczy m.in. pill-i sekcji w skrzynce Poczty i przełącznika okresu profilu. */
.nav-pills {
    --vz-nav-pills-link-active-bg: var(--brand-green);
}

/* Checkboxy / radio / form-switch — panel filtrów profilu stoi na form-check;
   bez tego zaznaczenia zostałyby indigo. */
.form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

/* Paginacja — aktywna strona (kompilat trzyma literal w --vz-pagination-*) */
.pagination {
    --vz-pagination-active-bg:           var(--brand-green);
    --vz-pagination-active-border-color: var(--brand-green);
    --vz-pagination-color:               var(--brand-green);
    --vz-pagination-hover-color:         var(--brand-green-hover);
}


/* ============================================================================
   7. STANY .mail-item (lista maili w Poczcie)
   ----------------------------------------------------------------------------
   Docelowy wzorzec (03_UX_UI § 3.2): NIEPRZECZYTANY = lewa belka 3px zieleń
   + kropka + bold — NIE bg-light (tło myli się z hover i active).
   Klasy .mail-item.unread / .mail-unread-dot wchodzą do Blade w Kroku 1
   (dziś skrzynka używa bg-light) — style czekają tu gotowe.

   UWAGA dla Kroku 1: skrzynka.blade.php ma dziś WŁASNY inline <style>
   z .mail-item.active (!important) — przy Kroku 1 przenieść go tutaj
   i usunąć z widoku, żeby stany żyły w jednym miejscu.
   ============================================================================ */

/* Rezerwujemy miejsce na belkę na KAŻDYM wierszu (transparent) —
   inaczej pojawienie się belki przesuwałoby treść o 3px (layout shift). */
.mail-item {
    border-left: 3px solid transparent;
}

/* Hover — subtelny off-white; celowo INNY niż stan unread (belka) i active
   (tło + belka), żeby trzy stany były rozróżnialne przy skanowaniu listy. */
.mail-item:hover {
    background-color: var(--brand-bg-soft);
}

/* Nieprzeczytany: belka + pogrubienie. Wzorzec z Gmaila/Outlooka. */
.mail-item.unread {
    border-left-color: var(--brand-green);
}
.mail-item.unread .mail-from,
.mail-item.unread .mail-subject {
    font-weight: 600;
    color: var(--brand-navy);
}

/* Kropka nieprzeczytanego — element <span class="mail-unread-dot"></span>
   obok daty (dokłada Krok 1). */
.mail-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--brand-green);
    flex: 0 0 auto;
}

/* Aktywny (otwarty w podglądzie): delikatne tło + belka zielona.
   Do czasu Kroku 1 wygrywa inline style z widoku (ma !important) —
   po przeniesieniu tutaj ta reguła przejmuje stan. */
.mail-item.active {
    background-color: rgba(17, 102, 45, 0.06);
    border-left-color: var(--brand-green);
}


/* ============================================================================
   8. TIMELINE PROFILU — .timeline-day (nagłówki dni sticky + pigułka gęstości)
   ----------------------------------------------------------------------------
   Struktura (03_UX_UI § 2.2): grupy per dzień (accordion), nagłówek dnia
   przykleja się pod topbarem przy scrollu, pigułka pokazuje gęstość dnia
   (np. "31 zdarzeń: 18✉ 7☎ 4💬 2🤖") bez rozwijania grupy.
   ============================================================================ */
.timeline-day {
    margin-bottom: 1rem;
}

/* Nagłówek dnia — sticky pod topbarem Velzona (70px). Tło = tło strony,
   żeby przewijane wiersze "znikały" pod nagłówkiem bez prześwitów. */
.timeline-day-header {
    position: sticky;
    top: var(--brand-sticky-top);
    z-index: 5;                          /* nad wierszami, pod modalami/dropdownami Velzona (1000+) */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    background-color: var(--brand-bg-soft);
    border-bottom: 1px solid var(--brand-border-subtle);
    /* Manrope, NIE Anton: nagłówek dnia to tekst pisany małymi literami z datą ("poniedziałek,
       14 lipca") — Anton (kondensowany, właściwie tylko wersaliki) czyta się tu źle. Anton
       zostaje do KRÓTKICH tytułów (card-title). Decyzja Artura 2026-07-15. */
    font-family: 'Manrope', var(--brand-font-body);
    font-weight: 700;
    color: var(--brand-navy);
    /* Rogi zgodne z kartą — inaczej sticky header wygląda "kanciato" nad zaokrąglonym cardem. */
    border-top-left-radius: var(--vz-card-border-radius, .375rem);
    border-top-right-radius: var(--vz-card-border-radius, .375rem);
}

/* Pigułka gęstości dnia — neutralna (muted), bo to metadana, nie akcja.
   Zieleń zostaje zarezerwowana dla CTA i stanów aktywnych (10%). */
.timeline-day-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background-color: var(--brand-border-subtle);
    color: var(--brand-muted);
    font-family: var(--brand-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Karta "Raport dnia — sesje AI" przypięta pod nagłówkiem dnia:
   pełna szerokość, tło soft, lewa krawędź granatowa 3px (03_UX_UI § 2.4).
   Klasy border-3 + border-navy (utility niżej) + to tło. */
.timeline-ai-report {
    background-color: var(--brand-bg-soft);
    border-left: 3px solid var(--brand-navy);
}


/* ============================================================================
   9. KOLORY TYPÓW ZDARZEŃ — domknięcie brakujących utilities
   ----------------------------------------------------------------------------
   Mapa typów (03_UX_UI § 2.3) używa klas Velzon bg-*-subtle text-*:
     mail (in/out)  → bg-primary-subtle text-primary   (zieleń — zmapowana w § 2)
     telefon        → bg-info-subtle text-info          (stock Velzon)
     SMS            → bg-secondary-subtle text-secondary (stock Velzon)
     spotkanie      → bg-warning-subtle text-warning    (stock Velzon)
     sesja AI       → GRANAT — Velzon nie ma "navy", domykamy własnym utility
                      (zamiast inline style="background:#12273815" ze szkicu).
   !important — wyjątek uzasadniony: utilities kolorów Bootstrapa same używają
   !important (bg-*-subtle, text-*, border-*), więc nasze muszą grać w tej
   samej lidze, inaczej przegrają z każdym bg-light w markupie.
   ============================================================================ */
.bg-navy-subtle {
    background-color: var(--brand-navy-bg-subtle) !important; /* jak natywne bg-*-subtle BS */
}
.text-navy {
    color: var(--brand-navy) !important;                      /* jak natywne text-* BS */
}
.border-navy {
    border-color: var(--brand-navy) !important;               /* jak natywne border-* BS */
}


/* ============================================================================
   10. PODGLĄD MAILA — .brand-mail-preview (iframe sandbox z treścią HTML)
   ----------------------------------------------------------------------------
   Iframe renderuje obcy HTML maila (oraz preview brandowanej odpowiedzi
   z modala "Odpowiedz" — ten sam pattern). Styl zewnętrza iframe'a — środka
   nie stylujemy, treść maila ma własny inline CSS.
   ============================================================================ */
.brand-mail-preview {
    display: block;
    width: 100%;
    min-height: 320px;          /* krótki mail nie zapada podglądu do paska */
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
    background-color: var(--brand-white);   /* maile zakładają białe tło — nie dziedziczymy off-white */
}


/* ============================================================================
   11. TAG-PILL — bazowa klasa pilla tagu (Poczta lista+podgląd, timeline, CMS reguł)
   ----------------------------------------------------------------------------
   Kontrakt (03_UX_UI § 3.5): kolor per tag przychodzi Z BAZY (mail_tags.color),
   więc Blade dokłada inline style:
     <span class="tag-pill" style="background:{{ $color }}22; color:{{ $color }}; border-color:{{ $color }}">
   ("{color}22" = hex + kanał alpha ~13% — pastelowe tło z pełnego koloru tagu).
   Klasa bazowa trzyma KSZTAŁT i typografię + neutralny default (muted),
   gdyby tag nie miał koloru. Inline style nadpisuje kolory — zgodnie z kaskadą.
   ============================================================================ */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--brand-muted);
    background-color: rgba(107, 119, 133, 0.13);  /* muted @ ~13% — odpowiednik "22" w hex */
    color: var(--brand-muted);
    font-size: 0.6875rem;        /* 11px — pill to metadana, nie treść */
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}


/* ============================================================================
   12. UTILITIES MARKI
   ----------------------------------------------------------------------------
   Reużywalne helpery marki (nie tokeny, nie mapowanie Velzona). Tu ląduje custom,
   który dziś jest rozsypany po widokach/custom.min.css (migracja Faza 0.5).
   ============================================================================ */

/* .badge-mint — badge statusu na jasnej zieleni + granatowy tekst (echo przycisku
   CTA). Odróżnia badge "klient" (mint) od "lead", gdy stoją obok siebie.
   UWAGA (2026-07-16): "lead" = GRANAT (bg-navy-subtle text-navy), NIE zieleń —
   mint i zieleń-subtle były za blisko (oba jasnozielone, zlewały się). Granat
   = "w toku / metadana", spójnie z badge Projekt i kaflem sumy.
   Użycie: <span class="badge badge-mint">klient</span> zamiast bg-success-subtle. */
.badge.badge-mint {
    background-color: var(--brand-mint);
    color: var(--brand-navy);
}

/* .bg-soft-primary / .bg-soft-success — Velzon trzyma dla nich LITERALNY kolor
   (indigo/teal), którego NIE łapie przemapowanie --vz-primary (§2). Efekt: np.
   awatar `.avatar-title.bg-soft-primary text-primary` zostawał fioletowy z ciemnym
   tekstem → nieczytelne inicjały (zgłoszone 2026-07-16). Mapujemy tło na pastel
   marki; text-primary/-success (zieleń §2) daje na nim czytelny kontrast (~6:1). */
.bg-soft-primary { background-color: var(--brand-green-bg-subtle) !important; }
.bg-soft-success { background-color: var(--brand-green-bg-subtle) !important; }


/* ============================================================================
   13. LINKI TREŚCIOWE — afordancja klikalności (podkreślenie)
   ----------------------------------------------------------------------------
   Problem: po przejęciu --vz-link-color na zieleń marki linki w tabelach
   (kontrahent, nazwa licencji, projekt) wyglądają jak zwykły zielony tekst —
   brak sygnału "to jest klikalne" (przyzwyczajenie: link = niebieski/podkreślony).
   Decyzja Artura (2026-07-16): zieleń ZOSTAJE, dokładamy podkreślenie always-on
   (wzorzec Ahrefs/GitHub). Wariant 35% okazał się za słaby (podkreślenie zlewało
   się z zielonym tekstem — "średnio widoczne"), więc spoczynek = PEŁNA zieleń,
   hover = ciemniejsza + grubsza kreska (wyraźny feedback).

   ZAWĘŻENIE — czemu tylko `.table td a`, a nie globalnie `a`:
   Velzon opakowuje w <a> mnóstwo elementów nie-tekstowych (przyciski, ikony
   operacji, pozycje dropdownów, badge). Globalne podkreślenie linków zaśmieciłoby
   panel. Celujemy w linki w komórkach tabel danych (tam żyją linki treściowe),
   z wykluczeniem .btn/.badge/.dropdown-item oraz linków-ikon (:has ikona/svg).
   Poza tabelami użyj klasy .link-underline-brand na konkretnym <a>.
   ============================================================================ */
.table td a:not(.btn):not(.badge):not(.dropdown-item):not([class*="text-reset"]),
.link-underline-brand {
    text-decoration: underline;
    text-decoration-color: var(--brand-green); /* pełna zieleń — wyraźny sygnał "to link" */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.table td a:not(.btn):not(.badge):not(.dropdown-item):not([class*="text-reset"]):hover,
.link-underline-brand:hover {
    text-decoration-color: var(--brand-green-hover); /* hover = ciemniejsza zieleń... */
    text-decoration-thickness: 2px;                  /* ...+ grubsza kreska = feedback */
}

/* Linki-ikony (operacje w tabeli: edytuj/usuń/pobierz z wFirma itd.) to <a>
   z samą ikoną — podkreślenie zostawiłoby wiszącą kreskę. Zdejmujemy je.
   :has() — Core to panel admin na nowoczesnych przeglądarkach (Chrome 105+). */
.table td a:has(> i:only-child),
.table td a:has(> svg:only-child) {
    text-decoration: none;
}


/* ============================================================================
   14. TYPOGRAFIA / LAYOUT — zmigrowane z custom.min.css (Faza 0.5, 2026-07-16)
   ----------------------------------------------------------------------------
   Reguły globalne Velzona, które wcześniej żyły w build_crm/css/custom.min.css
   (ładowanym ZAWSZE). Po Fazie 0.5 branding jest globalny, custom.min.css znika.
   .card-title font-family = Anton już w §4 — tu tylko rozmiar/spacing.
   ============================================================================ */
/* Nagłówek karty — wersaliki, bez dolnej kreski (globalne, jak było w custom). */
.card-header {
    text-transform: uppercase;
    position: relative;
    border-bottom: 0;
    padding-bottom: 0;
}
.card-title {
    font-size: 20px;
    letter-spacing: 1px;
    /* font-family: Anton — dziedziczy z §4 (h1-6 + .card-title) */
}
.menu-link { letter-spacing: 1px; }
.progress-header { margin-top: 5px; margin-bottom: 10px; }

/* Nagłówek/link w stylu Anton (wersaliki + spacing) — używany m.in. w kartach. */
.link-anton {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--brand-font-display);
}

/* Responsywny wrapper mapy (iframe 100%) — reusable. */
.map-responsive { overflow: hidden; padding-bottom: 25%; position: relative; height: 0; }
.map-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; }


/* ============================================================================
   15. KOMPONENTY REUSABLE — zmigrowane z custom.min.css (Faza 0.5)
   ----------------------------------------------------------------------------
   Hardkody kolorów zamienione na tokeny marki (§1): #122738→navy, #11662D→green,
   #6B7785→muted, #2A3A4C→navy-soft, #0D4E22→green-hover. Kolory funkcjonalne
   Velzona (danger #f06548 / info #3577f1 / warning #f7b84b) zostają literalne
   — to stock, nie paleta marki.
   ============================================================================ */

/* Timeline changelog (akordeon) — widok project_version, przyszłe changelogi. */
.changelog-item { position: relative; padding-left: 32px; margin-bottom: 0; }
.changelog-item::before {
    content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px;
    background: var(--brand-navy); opacity: .18;
}
.changelog-item:last-child::before { display: none; }
.changelog-item .timeline-dot {
    position: absolute; left: 4px; top: 22px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--brand-navy); border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(18, 39, 56, .25); z-index: 1;
}
.changelog-item:first-child .timeline-dot {
    background: var(--brand-green); box-shadow: 0 0 0 2px rgba(17, 102, 45, .25);
}

/* Karta wersji + header akordeonu */
.version-card { border: 1px solid rgba(0, 0, 0, .06); border-radius: .5rem; transition: box-shadow .2s ease; margin-bottom: 1.25rem; }
.version-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.version-header { cursor: pointer; padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 1rem; user-select: none; }
.version-header .chevron-icon { transition: transform .25s ease; color: var(--brand-muted); flex-shrink: 0; margin-top: 3px; }
.version-header[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }

/* Badge wersji (gradient granat; pierwszy = zieleń) */
.version-badge { background: linear-gradient(135deg, var(--brand-navy), #1a3a52); color: #fff; font-weight: 600; padding: .25rem .65rem; border-radius: .35rem; font-size: .8rem; white-space: nowrap; }
.changelog-item:first-child .version-badge { background: linear-gradient(135deg, var(--brand-green), var(--brand-green-hover)); }

/* Date badge (granat 8%) */
.date-badge { background: var(--brand-border-subtle); color: var(--brand-navy); padding: .2rem .55rem; border-radius: .3rem; font-size: .75rem; font-weight: 500; white-space: nowrap; }

/* Body rozwijane */
.version-body { padding: 0 1.25rem 1.25rem 1.25rem; border-top: 1px solid rgba(0, 0, 0, .04); }
.version-body .description-content { font-size: .9rem; line-height: 1.7; color: var(--brand-navy-soft); }
.version-body .description-content b,
.version-body .description-content strong { color: var(--brand-navy); }

/* Author info */
.author-info { font-size: .78rem; color: var(--brand-muted); }
.author-info i { font-size: .85rem; }

/* Stats bar (pasek statystyk na górze karty) */
.stats-bar { display: flex; gap: 1.5rem; padding: .75rem 1.25rem; background: rgba(18, 39, 56, .03); border-radius: .5rem; border: 1px solid rgba(0, 0, 0, .04); }
.stats-bar .stat-item { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--brand-navy-soft); }
.stats-bar .stat-value { font-weight: 600; color: var(--brand-green); }

/* Przyciski akcji mini (edytuj/usuń/dodaj) do tabel i kart */
.btn-action-edit { background: rgba(17, 102, 45, .08); color: var(--brand-green); border: none; padding: .3rem .5rem; border-radius: .3rem; font-size: .82rem; transition: all .15s ease; }
.btn-action-edit:hover { background: var(--brand-green); color: #fff; }
.btn-action-delete { background: rgba(240, 101, 72, .08); color: #f06548; border: none; padding: .3rem .5rem; border-radius: .3rem; font-size: .82rem; transition: all .15s ease; }
.btn-action-delete:hover { background: #f06548; color: #fff; }
.btn-action-add { background: rgba(55, 119, 241, .08); color: #3577f1; border: none; padding: .3rem .5rem; border-radius: .3rem; font-size: .82rem; transition: all .15s ease; }
.btn-action-add:hover { background: #3577f1; color: #fff; }

/* Procedury — scalony wiersz akordeonu: tytuł + badge + akcje w jednej linii */
.procedure-header { display: flex; align-items: stretch; }
.procedure-header .accordion-button { background: transparent; box-shadow: none; }
.procedure-header .accordion-button:not(.collapsed) { background: transparent; color: var(--brand-navy); box-shadow: none; }
.procedure-header .accordion-button:focus { box-shadow: none; }
.procedure-header:hover { background: rgba(17, 102, 45, .03); }
.procedure-actions { display: flex; align-items: center; padding: 0 1rem 0 .25rem; }
.procedure-actions .btn-action-edit,
.procedure-actions .btn-action-delete { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: .95rem; padding: 0; }

/* Opis procedury — zachowaj łamania linii z bazy (\n), inaczej tekst się zlewa w jeden blok */
.procedure-description { line-height: 1.65; }

/* Card accent left (kolorowy pasek po lewej) — success=zieleń marki, reszta stock */
/* !important, bo bootstrapowa util .border nadaje border:1px !important na wszystkich
   krawędziach i inaczej zjada nasz lewy akcent 3px. */
.card-accent-left { border-left: 3px solid var(--brand-green) !important; }
.card-accent-left.accent-success { border-left-color: var(--brand-green) !important; }
.card-accent-left.accent-danger { border-left-color: #f06548 !important; }
.card-accent-left.accent-warning { border-left-color: #f7b84b !important; }
.card-accent-left.accent-info { border-left-color: #3577f1 !important; }

/* Kropka "aktywny/online" — zielony wskaźnik marki (np. przy godzinie ostatniej
   aktywności w nagłówku profilu, gdy user był aktywny dziś). */
.dot-online {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-green); box-shadow: 0 0 0 3px rgba(17, 102, 45, .15);
    vertical-align: middle;
}

/* ── Activity timeline (Przebieg dnia) — pionowa przerywana linia + węzeł per
   zdarzenie (wzorzec Velzon "Recent Activity"). Węzłem jest ikona zdarzenia;
   linia biegnie przez jej środek i znika przy ostatnim elemencie. ── */
.activity-timeline { position: relative; }
.activity-timeline .ati-item { position: relative; padding-left: 2.75rem; padding-bottom: 1.1rem; }
.activity-timeline .ati-item:last-child { padding-bottom: .15rem; }
.activity-timeline .ati-item::before {
    content: ''; position: absolute; left: 1.05rem; top: 2rem; bottom: -.15rem;
    border-left: 2px dashed var(--brand-border-subtle);
}
.activity-timeline .ati-item:last-child::before { display: none; }
.activity-timeline .ati-node { position: absolute; left: 0; top: .1rem; z-index: 1; }
.activity-timeline .ati-node > * { margin: 0; }

/* Badge-licznik w nagłówku panelu (prawy górny róg) — spójny across paneli. */
.panel-count {
    background: var(--brand-border-subtle); color: var(--brand-navy);
    font-weight: 600; font-size: .72rem; padding: .2rem .55rem; border-radius: 999px;
}

/* Chevron zwijania panelu — obraca się wg stanu collapse nagłówka (aria-expanded).
   Wspólny dla paneli Profilu aktywności (Historia sesji AI / Wydania / Przebieg dnia). */
.collapse-chevron { transition: transform .2s ease; color: var(--brand-muted); }
[aria-expanded="true"] .collapse-chevron { transform: rotate(180deg); }

/* Card breadcrumb (nawigacja wewnątrz karty) */
.card-breadcrumb { padding: .6rem 1.25rem; background: rgba(18, 39, 56, .03); border-bottom: 1px solid rgba(0, 0, 0, .05); }
.card-breadcrumb .breadcrumb-item { font-size: .78rem; }
.card-breadcrumb .breadcrumb-item a { color: var(--brand-green); text-decoration: none; }
.card-breadcrumb .breadcrumb-item a:hover { color: var(--brand-navy); text-decoration: underline; }
.card-breadcrumb .breadcrumb-item.active { color: var(--brand-muted); }

/* Card footer (stopka z metadanymi) — globalne (jak było w custom) */
.card-footer { background: rgba(18, 39, 56, .02); border-top: 1px solid rgba(0, 0, 0, .05); padding: .6rem 1.25rem; }

/* Tabela danych (kompaktowa, hover) — auto_invoice, periods, bills */
.table-data th { white-space: nowrap; font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: var(--brand-muted); border-bottom: 2px solid rgba(18, 39, 56, .1); padding: .55rem .65rem; }
.table-data td { font-size: .84rem; vertical-align: middle; padding: .5rem .65rem; color: var(--brand-navy-soft); }
.table-data tbody tr:hover { background: rgba(17, 102, 45, .03); }

/* Badge okresu w headerze (Rubik) */
.badge-period { font-size: .7rem; padding: .3rem .6rem; background: var(--brand-navy); color: #fff; border-radius: .3rem; letter-spacing: .5px; font-family: 'Rubik', var(--brand-font-body); font-weight: 500; vertical-align: middle; }

/* Sekcja filtrów */
.filters-row { background: rgba(18, 39, 56, .02); border-radius: .5rem; padding: .85rem 1rem; border: 1px solid rgba(0, 0, 0, .04); }


/* ============================================================================
   16. PALETA ALERTÓW .figma-* — zmigrowane z custom.min.css (Faza 0.5)
   ----------------------------------------------------------------------------
   Obca paleta (z Figmy), żywa przez app/Services/AlertService.php (mapuje
   success→figma-positive, danger→figma-negative, info→figma-info itd.) oraz
   index_pusher.js / profile_settings.js. Przeniesione 1:1 — to NIE paleta marki,
   więc kolorów nie tokenizujemy. ⚠️ Do rewizji: docelowo alerty powinny używać
   kolorów marki/Velzona zamiast osobnego systemu (backlog).
   ============================================================================ */
.figma-accent-primary     { background-color: #EBA70A; color: #ffffff; }
.figma-accent-muted       { background-color: #624504; color: #EBA70A; }
.figma-positive-primary   { background-color: #8BD224; color: #ffffff; }
.figma-warning-primary    { background-color: #DC9C09; color: #ffffff; }
.figma-negative-primary   { background-color: #E71F10; color: #ffffff; }
.figma-info-primary       { background-color: #3DA7EF; color: #ffffff; }
.figma-purple-primary     { background-color: #B52CC9; color: #ffffff; }
.figma-pink-primary       { background-color: #F8218F; color: #ffffff; }
.figma-dark-blue-primary  { background-color: #1A38CF; color: #ffffff; }
.figma-light-green-primary { background-color: #D2FF00; color: #000000; }
.figma-bg-secondary       { background-color: #1C1E22; color: #ffffff; }


/* ============================================================================
   17. ANIMACJE .blink_me* — zmigrowane z custom.min.css (Faza 0.5)
   ----------------------------------------------------------------------------
   Miganie dla alertów/powiadomień (topbar, licencje, faktury). Przeniesione 1:1.
   ⚠️ A11y: miganie jest anti-patternem (prefers-reduced-motion, epilepsja) —
   docelowo zastąpić subtelnym stanem (backlog). Na teraz zachowanie 1:1.
   ============================================================================ */
.blink_me       { animation: blinker 1s linear infinite; }
.blink_me_test  { animation: blinker_test 0.75s linear infinite; }
.blink_me_extra { animation: blinker_extra 4s linear infinite; }
@keyframes blinker       { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes blinker_test  { 0% { opacity: 1; background-color: red; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes blinker_extra { 30% { opacity: 1; } 10% { opacity: 0; } 100% { opacity: 1; } }


/* ============================================================================
   18. PROFIL AKTYWNOŚCI — timeline kroniki użytkownika (Faza 2 MVP)
   ----------------------------------------------------------------------------
   Widok superadmin/aktywnosc/index — helpery pozycjonujące timeline'u.
   Zmigrowane z inline <style> widoku (reguła SSOT: custom CSS TU, nie w Blade).
   ============================================================================ */
/* Nagłówek dnia lepki wewnątrz kolumny timeline (poniżej topbara Core ~70px) */
.timeline-day-header { position: sticky; top: 70px; z-index: 5; }
/* Karta "Raport dnia — sesje AI": lewa krawędź granatowa marki + ciepłe tło */
.ai-report-card { border-left: 3px solid #122738 !important; background: var(--brand-bg-soft, #FAFAF7); }
/* Dashboard dnia — kafle klikalne (drill-down) + panel wysuwany pod kaflami */
.stat-tile-drill { cursor: pointer; transition: border-color .12s ease; }
.stat-tile-drill:focus-visible { outline: 2px solid var(--brand-green, #11662D); outline-offset: 2px; }
#drill-panel { animation: drillIn .12s ease; }
@keyframes drillIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Panel boczny "Wydania i aktualności" (Faza 3.1): lepki + niezależny scroll wewnętrzny,
   żeby lewa kolumna (sesje AI + Przebieg) i panel scrollowały się osobno */
.profile-side-panel { position: sticky; top: 86px; }
.profile-side-panel-body { max-height: calc(100vh - 140px); overflow-y: auto; }

/* Panel Garmin (moduł Integrations\Garmin) — górna strefa profilu aktywności,
   prawa 1/4. Kafelki statystyk zdrowotnych: zwarte, wyśrodkowane, czytelne. */
.garmin-stat {
    text-align: center;
    padding: .5rem .25rem;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: .375rem;
    background: var(--vz-light, #f3f6f9);
    height: 100%;
}
.garmin-stat > i { font-size: 1.1rem; display: block; margin-bottom: .15rem; }
.garmin-stat-value { font-weight: 600; font-size: .95rem; line-height: 1.1; }
.garmin-stat-label { font-size: .7rem; color: var(--vz-text-muted, #878a99); text-transform: uppercase; letter-spacing: .02em; }


/* ============================================================================
   KONIEC. Rollback = usunięcie <link> z head-css.blade.php.
   Zmiany palety marki: NAJPIERW crmdlakazdego-context/BRAND_TOKENS.css (SSOT),
   potem sekcja 1 tego pliku. Nowy custom CSS Core = TUTAJ, nie gdzie indziej.
   ============================================================================ */