/*
    Warstwa brandingu MyFitStudio — rollout stopniowy (na razie: /admin/settings).
    Tokeny --branding-* + klasy utility z dopiskiem -branding (klas Velzon NIE podmieniamy).
    Komponenty mv-* = zmodernizowany hub ustawień przeniesiony z movementor
    (wzorzec: Praca/docs/movementor-admin-settings-uklad-i-wyglad.md — klasy kontraktowe
    HTML<->JS bez zmian nazw). Docelowa tabela podmian kolorów: CLAUDE.md -> sekcja Branding.
*/

:root {
    --branding-primary: #11662D;
    --branding-primary-hover: #0D4F22;
    --branding-primary-soft: #E9F5EE;
    --branding-on-primary: #ffffff;
    --branding-cta: #6EE7A0;
    --branding-cta-hover: #57DE90;
    --branding-navy: #122738;
    --branding-body-bg: #FAFAF7;
    --branding-focus-shadow: 0 0 0 3px rgba(17, 102, 45, 0.15);
}

[data-bs-theme="dark"] {
    --branding-primary: #6EE7A0;
    --branding-primary-hover: #8FEDB4;
    --branding-primary-soft: rgba(110, 231, 160, 0.14);
    --branding-on-primary: #122738;
    --branding-body-bg: #1a1d21;
    --branding-focus-shadow: 0 0 0 3px rgba(110, 231, 160, 0.25);
}

/* ---------------------------------------------------------------------------
   Klasy utility brandingu — odpowiedniki klas Velzon z dopiskiem -branding.
   Używać przy stopniowej podmianie kolorów w kolejnych modułach.
--------------------------------------------------------------------------- */

.text-primary-branding { color: var(--branding-primary) !important; }
.bg-primary-branding { background-color: var(--branding-primary) !important; }
.bg-primary-soft-branding { background-color: var(--branding-primary-soft) !important; }
.border-primary-branding { border-color: var(--branding-primary) !important; }

.text-navy-branding { color: var(--branding-navy) !important; }
.bg-navy-branding { background-color: var(--branding-navy) !important; color: #ffffff; }

/* CTA — odpowiednik btn-primary (mint) */
.btn-primary-branding {
    --vz-btn-bg: var(--branding-cta);
    --vz-btn-border-color: var(--branding-cta);
    --vz-btn-color: #122738;
    --vz-btn-hover-bg: var(--branding-cta-hover);
    --vz-btn-hover-border-color: var(--branding-cta-hover);
    --vz-btn-hover-color: #122738;
    --vz-btn-active-bg: var(--branding-cta-hover);
    --vz-btn-active-border-color: var(--branding-cta-hover);
    --vz-btn-active-color: #122738;
    --vz-btn-focus-shadow-rgb: 110, 231, 160;
}

/* Odpowiednik btn-soft-success (soft zieleń brandingowa, hover pełna zieleń) */
.btn-soft-success-branding {
    --vz-btn-bg: var(--branding-primary-soft);
    --vz-btn-border-color: transparent;
    --vz-btn-color: var(--branding-primary);
    --vz-btn-hover-bg: #11662D;
    --vz-btn-hover-border-color: #11662D;
    --vz-btn-hover-color: #ffffff;
    --vz-btn-active-bg: #0D4F22;
    --vz-btn-active-border-color: #0D4F22;
    --vz-btn-active-color: #ffffff;
    --vz-btn-focus-shadow-rgb: 17, 102, 45;
}

/* Odpowiednik btn-success (zieleń brandingowa) */
.btn-success-branding {
    --vz-btn-bg: #11662D;
    --vz-btn-border-color: #11662D;
    --vz-btn-color: #ffffff;
    --vz-btn-hover-bg: #0D4F22;
    --vz-btn-hover-border-color: #0D4F22;
    --vz-btn-hover-color: #ffffff;
    --vz-btn-active-bg: #0D4F22;
    --vz-btn-active-border-color: #0D4F22;
    --vz-btn-active-color: #ffffff;
    --vz-btn-focus-shadow-rgb: 17, 102, 45;
}

/* Badge "klient" (mint) i badge "Projekt" / kafel sumy (granat) */
.badge-client-branding { background-color: var(--branding-cta); color: #122738; }
.badge-navy-branding { background-color: var(--branding-navy); color: #ffffff; }

/* Odpowiednik btn-outline-* — używany też jako toggle (btn-check + btn-group),
   bo stan :checked Bootstrapa korzysta z tych samych zmiennych --vz-btn-active-* */
.btn-outline-branding {
    --vz-btn-color: var(--branding-primary);
    --vz-btn-border-color: var(--branding-primary);
    --vz-btn-bg: transparent;
    --vz-btn-hover-bg: var(--branding-primary-soft);
    --vz-btn-hover-border-color: var(--branding-primary);
    --vz-btn-hover-color: var(--branding-primary-hover);
    --vz-btn-active-bg: var(--branding-primary);
    --vz-btn-active-border-color: var(--branding-primary);
    --vz-btn-active-color: var(--branding-on-primary);
    --vz-btn-focus-shadow-rgb: 17, 102, 45;
}

/* Przełączniki / checkboxy — stan zaznaczony w zieleni brandingowej */
.form-check-branding .form-check-input:checked {
    background-color: var(--branding-primary);
    border-color: var(--branding-primary);
}

.form-check-branding .form-check-input:focus {
    border-color: var(--branding-primary);
    box-shadow: var(--branding-focus-shadow);
}

/* Link w tabeli danych — zieleń + podkreślenie always-on */
.link-branding { color: var(--branding-primary); text-decoration: underline; }
.link-branding:hover { color: var(--branding-primary-hover); text-decoration: underline; }

/* Obramówka karty (x-cards.card) — odpowiednik Velzonowego card-border-primary */
.card-border-primary-branding { border-color: var(--branding-primary) !important; }
.card-border-primary-branding .card-header,
.card-border-primary-branding .card-footer { border-color: var(--branding-primary); }

/* Ikonki górnego paska karty (x-cards.card: odśwież, zwiń, zamknij, wskazówka) */
.card-toolbar-branding a { color: var(--branding-primary); }
.card-toolbar-branding a:hover { color: var(--branding-primary-hover); }

/* Link stylowany na przycisk w toolbarze karty (<a class="btn">) musi wyglądać
   jak sąsiedni <button class="btn">. Dwie reguły Velzona/brandingu celują w samo
   `a` i wygrywają specyficznością z .btn: `font-size: 17px` (dla ikonek toolbara)
   oraz kolor brandingowy — stąd akcje w nagłówku wychodziły w różnych rozmiarach
   i z zieloną etykietą na przycisku CTA/usuwania. Ikonki (a bez .btn) bez zmian. */
.card-toolbar-menu a.btn { font-size: var(--vz-btn-font-size, 0.8125rem); }
.card-toolbar-branding a.btn { color: var(--vz-btn-color); }
.card-toolbar-branding a.btn:hover { color: var(--vz-btn-hover-color); }

.card-toolbar-branding .btn-close {
    --vz-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2311662D'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
    --vz-btn-close-opacity: 0.8;
    --vz-btn-close-hover-opacity: 1;
}

[data-bs-theme="dark"] .card-toolbar-branding .btn-close {
    --vz-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236EE7A0'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

/* Dynamiczna nawigacja (#navbar-nav, topnav w układzie horizontal) — hover/active
   linków idzie w Velzon przez tę jedną zmienną (indigo #4b38b3), stąd nadpisanie
   tokenem zamiast łapania wszystkich selektorów stanów */
.navbar-nav.navbar-nav-branding {
    --vz-topnav-item-active-color: var(--branding-primary);
}

/* ---------------------------------------------------------------------------
   Tokeny mv-* — design layer huba ustawień.
   Kolor wiodący = branding; warianty ikon kafelków = paleta Velzon (nasze kolory).
--------------------------------------------------------------------------- */

:root {
    --mv-brand: var(--branding-primary);
    --mv-brand-hover: var(--branding-primary-hover);
    --mv-brand-soft: var(--branding-primary-soft);

    --mv-success: #0ab39c;
    --mv-success-strong: #099885;
    --mv-success-soft: rgba(10, 179, 156, 0.12);
    --mv-warning: #d29b3a;
    --mv-warning-soft: rgba(247, 184, 75, 0.18);
    --mv-info: #299cdb;
    --mv-info-soft: rgba(41, 156, 219, 0.12);
    --mv-danger: #f06548;
    --mv-danger-soft: rgba(240, 101, 72, 0.12);

    --mv-text: #212529;
    --mv-heading: #495057;
    --mv-muted: #878a99;
    --mv-placeholder: #adb5bd;
    --mv-border: #e9ebec;
    --mv-border-strong: #ced4da;
    --mv-bg-subtle: #f3f6f9;
    --mv-surface: #ffffff;

    --mv-radius-sm: 6px;
    --mv-radius-md: 8px;
    --mv-radius-lg: 12px;
    --mv-radius-xl: 16px;
    --mv-radius-pill: 999px;

    --mv-shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04);
    --mv-shadow-md: 0 4px 12px rgba(15, 15, 15, 0.06);
    --mv-shadow-lg: 0 12px 32px rgba(15, 15, 15, 0.08);
    --mv-shadow-focus: var(--branding-focus-shadow);

    --mv-font-size-meta: 12px;
    --mv-font-size-small: 13px;
    --mv-font-size-base: 14px;
    --mv-font-size-h3: 16px;
    --mv-font-size-h2: 20px;
    --mv-font-size-h1: 24px;
}

[data-bs-theme="dark"] {
    --mv-warning: #f7b84b;

    --mv-text: #ced4da;
    --mv-heading: #e9ecef;
    --mv-muted: #878a99;
    --mv-placeholder: #6c757d;
    --mv-border: #32383e;
    --mv-border-strong: #495057;
    --mv-bg-subtle: #2a2f34;
    --mv-surface: #212529;

    --mv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --mv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --mv-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* Tło strony tylko tam, gdzie renderuje się hub ustawień */
body:has(#settings-main) {
    background-color: var(--branding-body-bg);
}

/* ---------------------------------------------------------------------------
   Toolbar (.mv-clubs-toolbar)
--------------------------------------------------------------------------- */

.mv-clubs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.mv-clubs-toolbar__intro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mv-clubs-toolbar__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mv-radius-md);
    background: var(--mv-brand-soft);
    color: var(--mv-brand);
    font-size: 1.25rem;
}

.mv-clubs-toolbar__title {
    margin: 0;
    font-size: var(--mv-font-size-h2);
    font-weight: 700;
    color: var(--mv-heading);
}

.mv-clubs-toolbar__subtitle {
    margin: 0;
    font-size: var(--mv-font-size-small);
    color: var(--mv-muted);
}

.mv-clubs-toolbar__count {
    font-weight: 700;
    color: var(--mv-heading);
}

.mv-clubs-toolbar__search {
    position: relative;
    flex: 1 1 280px;
    max-width: 380px;
    min-width: 220px;
}

.mv-clubs-toolbar__search-icon {
    position: absolute;
    inset-inline-start: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mv-placeholder);
    pointer-events: none;
}

.mv-clubs-toolbar__search .form-control {
    border-radius: var(--mv-radius-pill);
    background: var(--mv-bg-subtle);
    border: 1px solid transparent;
    padding-inline-start: 2.5rem;
    color: var(--mv-text);
}

.mv-clubs-toolbar__search .form-control::placeholder {
    color: var(--mv-placeholder);
}

.mv-clubs-toolbar__search .form-control:focus {
    background: var(--mv-surface);
    border-color: var(--mv-brand);
    box-shadow: var(--mv-shadow-focus);
}

/* ---------------------------------------------------------------------------
   Layout + rail
--------------------------------------------------------------------------- */

.mv-settings-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}

@media (max-width: 991.98px) {
    .mv-settings-layout {
        grid-template-columns: 1fr;
    }
}

.mv-settings-rail {
    position: sticky;
    top: 5rem;
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-sm);
    padding: 0.5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

/* Układ horizontal: nagłówek = topbar 70px + pasek menu (.app-menu) ~46px */
[data-layout="horizontal"] .mv-settings-rail {
    top: 8.5rem;
    max-height: calc(100vh - 9.5rem);
}

@media (max-width: 991.98px) {
    .mv-settings-rail {
        position: static;
        max-height: none;
    }
}

.mv-settings-rail__title {
    margin: 0;
    padding: 0.625rem 0.875rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mv-muted);
}

.mv-settings-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mv-settings-rail__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--mv-radius-md);
    color: var(--mv-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.mv-settings-rail__link > i {
    font-size: 1rem;
    flex-shrink: 0;
}

.mv-settings-rail__link:hover {
    background: var(--mv-bg-subtle);
    color: var(--mv-heading);
}

.mv-settings-rail__link.active {
    background: var(--mv-brand-soft);
    color: var(--mv-brand);
    font-weight: 600;
}

.mv-settings-rail__count {
    margin-inline-start: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--mv-bg-subtle);
    color: var(--mv-muted);
    padding: 0.125rem 0.5rem;
    border-radius: var(--mv-radius-pill);
}

.mv-settings-rail__link.active .mv-settings-rail__count {
    background: var(--mv-brand);
    color: var(--branding-on-primary);
}

/* ---------------------------------------------------------------------------
   Sekcje + karta (.mv-card)
--------------------------------------------------------------------------- */

.mv-settings-section {
    scroll-margin-top: 110px;
}

[data-layout="horizontal"] .mv-settings-section {
    scroll-margin-top: 145px;
}

.mv-settings-section + .mv-settings-section {
    margin-top: 1.5rem;
}

.mv-settings-section--hidden {
    display: none;
}

.mv-card {
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-sm);
    overflow: hidden;
    color: var(--mv-text);
}

.mv-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--mv-border);
}

.mv-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--mv-font-size-h3);
    font-weight: 600;
    color: var(--mv-heading);
    margin: 0;
}

.mv-card__title i {
    color: var(--mv-text);
}

.mv-card__count {
    background: var(--mv-brand-soft);
    color: var(--mv-brand);
    font-size: var(--mv-font-size-meta);
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--mv-radius-pill);
}

.mv-card__body {
    padding: 1.25rem;
}

.mv-card__body--flush {
    padding: 0;
}

/* ---------------------------------------------------------------------------
   Kafelek (.mv-settings-tile)
--------------------------------------------------------------------------- */

.mv-settings-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--mv-surface);
    border: 1px solid var(--mv-border);
    border-radius: var(--mv-radius-lg);
    box-shadow: var(--mv-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

.mv-settings-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--mv-shadow-md);
    border-color: var(--mv-brand);
    color: inherit;
}

.mv-settings-tile:hover .mv-settings-tile__arrow {
    transform: translateX(2px);
    color: var(--mv-brand);
}

.mv-settings-tile:hover .mv-settings-tile__title {
    color: var(--mv-brand);
}

.mv-settings-tile:focus-visible {
    outline: none;
    box-shadow: var(--mv-shadow-focus);
    border-color: var(--mv-brand);
}

.mv-settings-tile__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mv-radius-md);
    font-size: 1.25rem;
}

.mv-settings-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}

.mv-settings-tile__category {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mv-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.mv-settings-tile__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mv-heading);
    line-height: 1.25;
    transition: color 0.15s ease;
}

.mv-settings-tile__arrow {
    color: var(--mv-placeholder);
    font-size: 1.125rem;
    transition: transform 0.15s ease, color 0.15s ease;
}

.mv-settings-tile--info .mv-settings-tile__icon { background: var(--mv-info-soft); color: var(--mv-info); }
.mv-settings-tile--success .mv-settings-tile__icon { background: var(--mv-success-soft); color: var(--mv-success-strong); }
.mv-settings-tile--warning .mv-settings-tile__icon { background: var(--mv-warning-soft); color: var(--mv-warning); }
.mv-settings-tile--danger .mv-settings-tile__icon { background: var(--mv-danger-soft); color: var(--mv-danger); }
.mv-settings-tile--brand .mv-settings-tile__icon { background: var(--mv-brand-soft); color: var(--mv-brand); }
.mv-settings-tile--neutral .mv-settings-tile__icon { background: var(--mv-bg-subtle); color: var(--mv-muted); }

.mv-settings-tile--hidden {
    display: none;
}

/* ---------------------------------------------------------------------------
   Empty state (.mv-empty)
--------------------------------------------------------------------------- */

.mv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--mv-muted);
}

.mv-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--mv-radius-pill);
    background: var(--mv-bg-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--mv-placeholder);
    margin-bottom: 1rem;
}

.mv-empty__title {
    font-size: var(--mv-font-size-h3);
    font-weight: 600;
    color: var(--mv-heading);
    margin: 0 0 0.25rem;
}

/* ---------------------------------------------------------------------------
   Formularze kreatorów — panel grupy wyboru (.detail-panel) i chipy (.chip-check).
   Wzorzec: /su/service-creator; używane też przez formularze dodawania
   usługi/produktu. Chip = <input class="btn-check"> + <label class="chip-check">,
   dzięki czemu name/value zwykłego checkboxa lecą w formularzu bez zmian.
--------------------------------------------------------------------------- */

.detail-panel {
    background: var(--mv-surface, #fff);
    border: 1px solid var(--mv-border, #e9ebec);
    border-radius: 8px;
    padding: 0.75rem 0.875rem;
    height: 100%;
}

.detail-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mv-muted, #878a99);
}

.detail-panel__title i { font-size: 0.9375rem; color: var(--branding-primary); }

.detail-panel__count {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--mv-bg-subtle, #f3f6f9);
    color: var(--mv-muted, #878a99);
}

.detail-panel__count.filled { background: var(--branding-primary-soft); color: var(--branding-primary); }

.detail-panel__group + .detail-panel__group {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--mv-border, #e9ebec);
}

.detail-panel__group-label { font-size: 0.75rem; font-weight: 600; color: var(--mv-muted, #878a99); }

.check-group { max-height: 220px; overflow-y: auto; }

.check-all-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--branding-primary);
    text-decoration: underline;
    white-space: nowrap;
}

.check-all-link:hover { color: var(--branding-primary-hover); }

.chip-check {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mv-border, #e9ebec);
    border-radius: 999px;
    font-size: 0.8125rem;
    background: var(--mv-surface, #fff);
    color: var(--mv-text, #212529);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip-check:hover { border-color: var(--branding-primary); color: var(--branding-primary); }

.btn-check:checked + .chip-check {
    background: var(--branding-primary);
    border-color: var(--branding-primary);
    color: var(--branding-on-primary, #fff);
}

/* Wiersz promocji w katalogu produktów/usług wygląda jak każdy inny — wyróżnia go
   badge „Promocja" przy nazwie, bez tła (kolorowe pasy w tabeli rozbijały listę) */
.promotion-row-empty > td { color: var(--mv-muted, #878a99); }

/* zakładka „Promocje" — zostają same wiersze promocji, a stopka DataTables mówiłaby
   o liczbie produktów, więc na czas tej zakładki znika */
.catalog-only-promotions tbody tr:not(.promotion-row) { display: none; }
.catalog-only-promotions .dataTables_info,
.catalog-only-promotions .dataTables_paginate,
.catalog-only-promotions .dataTables_length { display: none; }

/* ---------------------------------------------------------------------------
   Kreatory SU (usługi, produkty) — wskaźniki wypełnienia wiersza i przycisk
   rozwijania szczegółów. Wspólne dla obu kreatorów, więc nie w CSS strony.
--------------------------------------------------------------------------- */

.fill-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: var(--mv-bg-subtle, #f3f6f9);
    color: var(--mv-muted, #878a99);
    cursor: default;
}

.fill-flag.filled { background: var(--branding-primary); color: var(--branding-on-primary, #fff); }
.fill-flag.na { opacity: 0.35; }

.btn-toggle-row i { transition: transform 0.2s; }
.btn-toggle-row.open i { transform: rotate(180deg); }
.btn.btn-toggle-row.open { background: var(--branding-primary-soft); color: var(--branding-primary); }

/* ---------------------------------------------------------------------------
   Pływający pasek zapisu formularza (dodawanie/edycja produktu i usługi).
   Przycisk celowo nie siedzi w żadnej karcie — pasek lata przy dolnej krawędzi
   ekranu, żeby zapis był pod ręką bez scrollowania długiego formularza.
   `position: sticky` zamiast `fixed`: pasek zostaje elementem kontenera strony,
   więc trzyma marginesy boczne kart, nie wchodzi pod sidebar w układzie
   vertical i sam rezerwuje sobie miejsce na końcu treści (po zjechaniu na dół
   siada nad stopką i niczego nie zasłania — żaden spacer nie jest potrzebny).
   Renderować jako OSTATNI element `@section('content')`.
--------------------------------------------------------------------------- */

.form-save-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 1030;
    display: flex;
    margin-top: 1rem;
    /* wcięcie względem kart formularza — równe krawędzie czytałyby się jak kolejna
       sekcja strony, a pasek ma wyglądać na oderwany od układu */
    padding: 0 2rem;
}

@media (max-width: 575.98px) {
    .form-save-bar { padding: 0 0.75rem; }
}

.form-save-bar__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--vz-border-radius, 0.5rem);
    background: var(--mv-surface, #fff);
    border: 1px solid var(--branding-primary);
    box-shadow: 0 0.5rem 1.5rem rgba(18, 39, 56, 0.18);
}

.form-save-bar__inner .btn { white-space: nowrap; }

[data-bs-theme="dark"] .form-save-bar__inner {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}