/* ========================================
    🎨 GŁÓWNE STYLE KONTENERA
======================================== */
/* Panel konta (.ios-account-panel) wykluczony – wygląd/szerokość z motywu (Blocs). */
.ios-container:not(.ios-account-panel) {
  width: 100%;
  margin: 0 auto;
  padding: 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ios-container:not(.ios-account-panel) > *:not(:last-child) {
    margin-bottom: 16px;
}

.ios-form-spaced {
    margin-bottom: 24px;
}

.ios-register-link:not(.ios-register-link-theme-styled) {
    text-align: left;
    margin-top: 20px;
}
.ios-register-link:not(.ios-register-link-theme-styled) .ios-label {
    margin-bottom: 8px;
}
.ios-error-page:not(.ios-error-page-theme-styled) {
    text-align: center;
    padding: 40px;
}

@media (max-width: 480px) {
    .ios-container:not(.ios-account-panel) {
        padding: 12px;
    }
}

/* ========================================
    🧾 ETYKIETY I NAGŁÓWKI
    (gdy .ios-label-theme-styled – style z Blocs/motywu)
======================================== */
.ios-label:not(.ios-label-theme-styled) {
    display: block;
    margin: 16px 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* Zakładka Subskrypcja: wartości i lista jak zwykły tekst (bez strong), spójne z „Twoje dane” */
.ios-subscription-info .ios-subscription-value,
.ios-subscription-info .ios-subscription-list,
.ios-subscription-info .ios-subscription-list li {
    font-weight: normal;
}
.ios-subscription-info .ios-subscription-list {
    margin: 6px 0 0;
    padding-left: 1.2em;
}

/* Blok range 0–10: suwak, wartość i select w kolumnie, bez nakładania */
.ios-range-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ios-range-wrapper input[type="range"] {
    width: 100%;
    max-width: 320px;
}
.ios-range-wrapper .ios-range-value {
    margin: 0;
    font-weight: normal;
}
.ios-range-wrapper select {
    margin-top: 0;
    width: 100%;
    max-width: 320px;
}

/* Formularz [ka_add_post]: opis pod polem pliku */
.ios-add-post-form .description {
    margin-top: 6px;
    font-size: 0.9em;
    color: #666;
}

/* Panel wpisów [ka_posts_panel]: odstęp „Dodaj wpis” od zakładek (Twoje dane) */
.ios-posts-panel-add-link {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Panel wpisów: komórka Akcje – wyrównanie pionowe jak w pozostałych kolumnach (bez „obniżenia”) */
.ios-posts-panel .ios-posts-table td.ios-posts-panel-actions-cell {
    vertical-align: top;
}

/* Panel wpisów: przyciski Edytuj i Usuń zawsze w jednej linii – wymuszenie wiersza, bez zawijania */
.ios-posts-panel .ios-posts-table .ios-posts-panel-actions-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.5rem;
}
.ios-posts-panel .ios-posts-table .ios-posts-panel-action-item {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
}
.ios-posts-panel .ios-posts-table .ios-posts-panel-action-item .ios-posts-panel-delete-form,
.ios-posts-panel .ios-posts-table .ios-posts-panel-action-item .ios-posts-panel-status-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* ✅ Radio group: wyświetlanie obok siebie + odstępy */
.ios-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.ios-radio-group label {
    background: #f1f1f1;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.ios-radio-group input[type="radio"] {
    margin-right: 6px;
}


/* ========================================
    🧩 POLA FORMULARZA (inputy, textarea, selecty)
    (gdy .ios-input-theme-styled – style z Blocs/motywu)
======================================== */
.ios-input:not(.ios-input-theme-styled),
textarea.ios-input:not(.ios-input-theme-styled),
select.ios-input:not(.ios-input-theme-styled) {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease-in-out;
}

.ios-input:not(.ios-input-theme-styled):focus,
textarea.ios-input:not(.ios-input-theme-styled):focus,
select.ios-input:not(.ios-input-theme-styled):focus {
    border-color: #007aff;
}

select.ios-input:not(.ios-input-theme-styled) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23666' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* ========================================
    ✅ ALERTY I KOMUNIKATY
    (gdy .ios-alert-theme-styled – style z Blocs/motywu)
======================================== */
.ios-alert:not(.ios-alert-theme-styled) {
    margin-top: 14px;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.ios-alert.success:not(.ios-alert-theme-styled) { background-color: #e6fbe8; color: #218838; }
.ios-alert.error:not(.ios-alert-theme-styled)   { background-color: #fdecea; color: #cc0000; }
.ios-alert.warning:not(.ios-alert-theme-styled) { background-color: #fff4e5; color: #ed6c02; }
.ios-alert.info:not(.ios-alert-theme-styled)    { background-color: #e7f3ff; color: #0277bd; }

.combo-debug-alert:not(.ios-alert-theme-styled) {
    background: #f0f0f0;
    border: 2px solid #333;
    padding: 15px;
    margin: 20px 0;
    font-family: monospace;
}

/* ========================================
    📋 CHECKBOXY GRUPOWE
======================================== */
.ios-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}
.ios-checkbox-group label {
    background: #f1f1f1;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.ios-checkbox-group input[type="checkbox"] {
    margin-right: 6px;
}

/* ========================================
    🔘 PRZYCISKI
    (gdy użytkownik ustawił klasy Blocs – .ios-button-theme-styled wyłącza style wtyczki)
======================================== */
.ios-button:not(.ios-button-theme-styled),
.ios-button-primary:not(.ios-button-theme-styled),
.ios-button-danger:not(.ios-button-theme-styled),
.ios-button-secondary:not(.ios-button-theme-styled) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease-in-out;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

a.ios-button:not(.ios-button-theme-styled),
a.ios-button-primary:not(.ios-button-theme-styled),
a.ios-button-danger:not(.ios-button-theme-styled),
a.ios-button-secondary:not(.ios-button-theme-styled) {
    display: block;
}

.ios-button-primary:not(.ios-button-theme-styled) {
    background-color: #007aff;
    color: #fff !important;
    margin-top: 24px;
}
.ios-button-primary:not(.ios-button-theme-styled):hover {
    background-color: #005fce;
}

.ios-button-danger:not(.ios-button-theme-styled) {
    background-color: #ff3b30;
    color: white;
}
.ios-button-danger:not(.ios-button-theme-styled):hover {
    background-color: #d1271c;
}

.ios-button-secondary:not(.ios-button-theme-styled) {
    background-color: #f1f1f1;
    color: #333;
}
.ios-button-secondary:not(.ios-button-theme-styled):hover {
    background-color: #e1e1e1;
}

.ios-button-inline {
    width: auto !important;
    margin-top: 0 !important;
}

.ios-button-compact {
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

/* ✅ Odstęp między polem input a przyciskami (Zapisz zmiany, Zapisz firmę itd.) */
.ios-tab-content form button[type="submit"],
.combo-tab-content form button[type="submit"] {
    margin-top: 28px;
}
/* Wyjątek: przyciski w tabeli wpisów (Edytuj/Usuń) – bez margin-top, żeby były w jednej linii */
.ios-posts-panel form button[type="submit"] {
    margin-top: 0;
}
/* Kontener przycisków uploadu – odstęp, bez nadpisywania przycisków Blocs */
.ios-form-buttons {
    margin-top: 28px;
    display: flex;
    gap: 10px;
}
.ios-file-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.ios-button-group {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: space-between;
}

@media (max-width: 480px) {
    .ios-button:not(.ios-button-theme-styled),
    .ios-button-primary:not(.ios-button-theme-styled) {
        padding: 12px 10px;
        font-size: 14px;
        margin-top: 16px;
        margin-bottom: 10px;
    }

    .ios-button-group {
        flex-direction: column;
        gap: 10px;
    }

    .ios-button-compact {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }
}

/* ✅ POPRAWKA DLA INPUT + BUTTON (np. NIP + REGON) */
.ios-input:not(.ios-input-theme-styled),
.ios-button:not(.ios-button-theme-styled),
.ios-button-primary:not(.ios-button-theme-styled),
.ios-button-secondary:not(.ios-button-theme-styled) {
    box-sizing: border-box;
    line-height: 1.2;
}

.ios-button:not(.ios-button-theme-styled),
.ios-button-primary:not(.ios-button-theme-styled),
.ios-button-secondary:not(.ios-button-theme-styled) {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;
}

/* ========================================
    🔐 ZAKŁADKI LOGOWANIA / PANELU
    (gdy klasy Blocs – .ios-tabs-theme-styled / .ios-tab-theme-styled wyłączają style wtyczki)
======================================== */
/* Nieaktywna zakładka = styl z motywu (ok). Aktywna = odwrócone kolory (jasne tło, ciemny tekst).
   Bootstrap .btn.active nadaje inny styl – poniższe reguły wymuszają dla AKTYWNEJ zakładki kolory z motywu.
   W motywie w .foundation-button (lub .btn-d) dopisz:
   – Nieaktywna: --foundation-button-bg, --foundation-button-color (np. #37C0D8, #fff).
   – Aktywna (odwrócone): --foundation-button-active-bg, --foundation-button-active-color (np. #fff, #37C0D8 lub #000).
   – Hover aktywnej: --foundation-button-active-hover-bg, --foundation-button-active-hover-color (opcjonalnie). */
.ios-tabs .ios-tab.btn.active {
    background-color: var(--foundation-button-active-bg, var(--foundation-button-bg)) !important;
    color: var(--foundation-button-active-color, var(--foundation-button-color)) !important;
    border-color: var(--foundation-button-active-border-color, var(--foundation-button-active-color, currentColor)) !important;
}
.ios-tabs .ios-tab.btn.active:hover {
    background-color: var(--foundation-button-active-hover-bg, var(--foundation-button-active-bg, var(--foundation-button-bg))) !important;
    color: var(--foundation-button-active-hover-color, var(--foundation-button-active-color, var(--foundation-button-color))) !important;
    border-color: var(--foundation-button-active-hover-border-color, var(--foundation-button-active-border-color)) !important;
}

/* ========================================
    🚪 WYLOGOWANIE
======================================== */
.ios-logout-box {
    text-align: center;
    margin-top: 20px;
}

/* ========================================
    📦 BOXY DODAWANIA FIRM
======================================== */
.combo-firma-box {
    padding: 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
}

/* Pola w combo-tab-content – TYLKO gdy Blocs NIE styluje (.ios-input-theme-styled) */
.combo-tab-content input[type="text"]:not(.ios-input-theme-styled),
.combo-tab-content input[type="email"]:not(.ios-input-theme-styled),
.combo-tab-content input[type="password"]:not(.ios-input-theme-styled),
.combo-tab-content input[type="url"]:not(.ios-input-theme-styled),
.combo-tab-content input[type="date"]:not(.ios-input-theme-styled),
.combo-tab-content select:not(.ios-input-theme-styled),
.combo-tab-content textarea:not(.ios-input-theme-styled) {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ========================================
    📂 OBSŁUGA FORMULARZY - TOGGLE
======================================== */
#combo-new-firma-form {
    margin-
    top: 20px;
}

/* ✅ Usunięcie kropek z listy komunikatów */
.ios-alert ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  
  .ios-alert li::marker {
    content: '';
    display: none;
  }

/* ========================================
    📁 SEKCJA ZDJĘCIA PROFILOWEGO
======================================== */
/* Bez zagnieżdżonego kontenera – ta sama szerokość co formularz powyżej */
.ios-photo-upload {
    width: 100%;
    margin-top: 28px;
}

/* ========================================
    📁 PRZYCISK WYBIERZ PLIK (upload zdjęcia)
======================================== */
/* Label „Wybierz plik” – cursor, margin tylko gdy Blocs NIE styluje */
label.ios-file-select-label {
    cursor: pointer;
}
label.ios-file-select-label:not(.ios-button-theme-styled) {
    margin: 0;
}
/* ✅ Ukryj ikony dodawane przez motyw/Blocs – przyciski tylko z tekstem */
.ios-button-theme-styled::before,
.ios-button-theme-styled::after,
a.ios-button-theme-styled::before,
a.ios-button-theme-styled::after,
button.ios-button-theme-styled::before,
button.ios-button-theme-styled::after {
    display: none !important;
}
.ios-button-theme-styled img,
.ios-button-theme-styled svg {
    display: none !important;
}

/* Ukryty input pliku – label pełni rolę przycisku ze stylami Blocs */
.ios-file-input-hidden {
    position: absolute !important;
    opacity: 0 !important;
    width: 0.1px !important;
    height: 0.1px !important;
    overflow: hidden !important;
}

/* ================================================
   🏷️ WIDGET TAG-INPUT (multi-select z autocomplete)
   używany przez typy: multiselect_powiaty, multiselect_wojewodztwa
================================================ */
.combo-tag-input {
    position: relative;
    width: 100%;
}
.combo-tag-input__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    cursor: text;
    box-sizing: border-box;
}
.combo-tag-input__tags:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
}
.combo-tag-input__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
}
.combo-tag-input__remove {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    color: #0369a1;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
}
.combo-tag-input__remove:hover {
    opacity: 1;
    color: #dc2626;
}
.combo-tag-input__field {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 140px;
    flex: 1;
    font-size: 0.95em;
    background: transparent;
}
.combo-tag-input__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 999;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.combo-tag-input__dropdown li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
    color: #374151;
}
.combo-tag-input__dropdown li:hover,
.combo-tag-input__dropdown li.highlighted {
    background: #e0f2fe;
    color: #0369a1;
}