/* ===== BabelContacts brand theme (subdued, unified) ===== */
:root {
    --brand-green: #89B836;
    --brand-teal: #27968F;
    --brand-rust: #933316;
    --brand-ink: #2b2b2b;
    --brand-surface: #f7f8f6;
}

/* Subtle, unified primary action colour across the app */
.btn-primary {
    --bs-btn-bg: var(--brand-teal);
    --bs-btn-border-color: var(--brand-teal);
    --bs-btn-hover-bg: #1f7a74;
    --bs-btn-hover-border-color: #1f7a74;
    --bs-btn-active-bg: #1a6a65;
    --bs-btn-active-border-color: #1a6a65;
    --bs-btn-disabled-bg: var(--brand-teal);
    --bs-btn-disabled-border-color: var(--brand-teal);
}

/* Login screen branding */
.brand-login-header {
    text-align: center;
    margin: 48px 0 24px;
}
.brand-login-header img {
    height: 120px;
    width: auto;
}
.brand-login-header .brand-title {
    margin-top: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--brand-ink);
}
/* Visible only when APP_INSTANCE=test (app-test container). */
.test-instance-label {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #dc3545;
    text-align: center;
}
body.is-test-instance .section-header-heading::after {
    content: " ! TEST !";
    color: #dc3545;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.brand-login-card {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border-top: 4px solid var(--brand-green);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    padding: 28px 28px 8px;
}

.wappler-temp {}
.style1 {
    display: flex
}
.style2 {
    min-width: 25px
}
.style3 {
    min-height: 30px
}
.style4 {
    width: 450px;
    background-color: #fff
}
.style5 {
    width: 100%
}
.style6 {
    width: 33%
}
/* Checkbox sötétszürke háttér és keret bepipált állapotban */
.form-check-input:checked {
    background-color: #495057; 
    border-color: #495057;
}

/* Ha fókuszba kerül (rákattintanak), ne legyen kék a ragyogása (árnyéka) */
.form-check-input:focus {
    border-color: #495057;
    box-shadow: 0 0 0 0.25rem rgba(73, 80, 87, 0.25);
}
.style7 {
    padding-top: 6px
}
.wappler-temp {}
.style8 {
    padding-top: 7px
}
.style9 {}
.style10 {
    position: relative}
.style11 {
}
.style12 {
    padding-bottom: 0px
}
.style13 {
    margin-bottom: -35px
}
.style14 {
    margin-bottom: 35px
}
.style15 {
    padding-top: 0px;
    position: relative
}
.style16 {
    position: relative
}
.style17 {
    position: absolute;
    background-size: 100% 100%;
    opacity: 0.85;
    z-index: 10
}
.wappler-temp {}
.wappler-temp {}
.style18 {
    position: relative
}
.style17:active {
    position: sticky;
    z-index: 10;
    float: right
}
.style19 {
    position: absolute
}
.wappler-temp {}
.style20 {}
.style21 {
    position: relative
}
.:focus {
    border-style: none
}
.wappler-temp {}
.style22 {
    background-color: #3476bb
}
@media (min-width: 1400px) {
.style22 {
        height: 80px
    }
.style6 {
        z-index: 100
    }
.style32 {
        background-color: #3476bb
    }
.style35 {
        width: 100%
    }
.style36 {
        width: 100%
    }
.style34 {
        position: absolute
    }
.style37 {
        font-weight: bold
    }
.style38 {
        font-weight: bold
    }
.style33 {
        position: relative
    }
.style31 {
        height: 35px
    }
.style39 {
        position: absolute;
        z-index: 1000
    }
}
.style23 {
    background-color: #fff
}
.wappler-temp {}
.style24 {
    background-color: #3476bb
}
.style25 {
    background-color: #fff
}
.style26 {
    max-width: 73%
}
.style27 {
    background-color: #af1080
}
.style28 {
    background-color: #9ab010;
    max-height: 10px;
    height: 10px
}
.style-28 {}
.style29 {
    background-color: #9ab010
}
.style30 {
    max-width: 60%
}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.style6 {}
.style6 {
    height: 100%;
    font-weight: bold;
    border-width: 3px;
    border-color: #000}
.bbb {
    background-color: #3476bb !important
}
.style33 {
    position: relative;
    max-height: 40px
}
.style34 {
    position: absolute
}
.style40 {
    position: relative;
    z-index: 10
}
.style41 {
    width: 100%;
    height: 100%
}
.style39 {
    position: absolute
}
.style42 {
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%
}
.style43 {
    position: static;
    z-index: 10
}
.style44 {
    position: relative
}
.style45 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000
}
.style46 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000
}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.style47 {
    font-weight: bold;
    height: 38px;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}
.wappler-temp {}
.style48 {
    background-color: #fff;
    width: 450px
}
.style38 {
    font-weight: bold;
    padding-top: 6px
}
.style37 {
    font-weight: bold;
    padding-top: 6px
}
.wappler-temp {}
.style49 {
    height: 60px
}
.style50 {
    font-size: 16px
}
.style51 {
    position: fixed
}
.style52 {}
.style53 {
    height: 15px
}
.style54 {
    background-color: #fff
}
.style55 {
    margin-right: 0px
}
.style56 {
    margin-bottom: -8px;
    height: 48px;
    border-color: #000
}
.style57 {
    max-height: 46px
}
.style58 {
    max-height: 43px
}
.style59 {
    max-height: 40px
}
.style60 {
    max-height: 40px
}
.style61 {
    max-height: 40px
}
.style62 {
    max-height: 46px
}
.style63 {
    max-height: 40px
}
.style64 {
    max-height: 40px
}
.style65 {
    max-height: 43px
}
.style66 {
    max-height: 40px
}
.style67 {
    max-height: 15px;
    min-height: 15px
}
.wappler-temp {}
.style68 {
    height: 100%
}
.wappler-temp {}
.wappler-temp {}
.style69 {
    font-weight: bold
}
.style70 {
    font-weight: bold
}
.style71 {
    border-color: #000 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
}
.style72 {
    border-width: 0px;
    border-top: 1px solid #000
}
.style73 {
    height: 20px
}
.style74 {
    border-bottom-width: 2px;
    border-bottom-color: #000
}
.style75 {
    height: 20px;
    background-color: #af1080
}
.wappler-temp {}
.wappler-temp {}
.style76 {
    height: 80px
}
.section-header-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 2rem;
    line-height: 1.2;
}
.section-header-logo {
    height: 1em;
    width: auto;
    flex: 0 0 auto;
    display: block;
}
.section-header-heading {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding-left: 0.35rem;
}
.section-header-brand--compact {
    font-size: 1.5rem;
    line-height: 1.2;
}
#header_dashboard .section-header-heading {
    font-size: 2rem;
}
.style77 {
    height: 20px
}
.style78 {
    position: absolute;
    right: 20px
}
#select_country {
    -: 
}
.pac-container {
    z-index: 10000 !important;
}
.style79 {
    width: 100%;
    height: 36px
}
.style80 {
    max-height: 15px
}
.style81 {
    margin-bottom: 0.75rem;
    min-height: 1.25rem;
}

/* Town modal: reserve space when country / saving-as rows are hidden */
.town-modal-slot {
    min-height: 4.5rem;
}
.town-modal-slot.town-modal-slot--saving {
    min-height: 1.25rem;
    margin-bottom: 0.75rem;
}
.town-modal-slot.is-hidden {
    visibility: hidden;
}
.town-modal-actions .btn {
    min-width: 9rem;
}
.org-norg-actions .btn {
    min-width: 9rem;
}
.band-nband-actions .btn {
    min-width: 9rem;
}
.person-nperson-actions .btn {
    min-width: 9rem;
}
#con_new_person {
    padding-bottom: 2.5rem;
}
#con_new_person .form-control.is-invalid ~ .invalid-feedback,
#con_new_person .form-select.is-invalid ~ .invalid-feedback,
#con_new_person .tagify.is-invalid ~ .invalid-feedback {
    display: block;
}
#con_new_person .invalid-feedback:empty {
    display: none !important;
}
#con_new_person .form-control.is-valid,
#con_new_person .form-select.is-valid,
#con_new_person .tagify.is-valid {
    border-color: var(--bs-border-color);
    background-image: none;
    box-shadow: none;
}

.persons-list-table {
    table-layout: fixed;
}
.persons-list-table td {
    vertical-align: middle;
}
.persons-list-col-name {
    width: 14%;
}
.persons-list-col-place {
    width: 14%;
}
.persons-list-col-tags {
    width: 22%;
}
.persons-list-cell-truncate {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    cursor: help;
}
.persons-list-cell-truncate:hover {
    text-decoration: underline dotted;
    text-decoration-color: rgba(0, 0, 0, 0.3);
}
.person-form-error-slot {
    min-height: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--bs-danger);
}
.person-form-error-slot.is-hidden {
    display: none;
}
.person-field-error {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-danger);
}
.form-control.is-invalid ~ .person-field-error,
.form-select.is-invalid ~ .person-field-error,
.person-tagify-wrap .tagify.is-invalid ~ .person-field-error {
    display: block;
}
#con_person_edit {
    --person-assigned-tag-bg: #f5c6dc;
    --person-assigned-tag-text: #6f2b4a;
    padding-bottom: 2.5rem;
}
#con_person_edit .person-assigned-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
#con_person_edit .person-assigned-hint.is-hidden {
    display: none !important;
}
#con_person_edit .person-assigned-swatch {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.1em;
    border-radius: 3px;
    background-color: var(--person-assigned-tag-bg);
    border: 1px solid rgba(111, 43, 74, 0.22);
}
#con_person_edit .tagify__tag[readonly] {
    --tag-bg: var(--person-assigned-tag-bg);
    --tag-hover: #efb8d2;
    --tag-text-color: var(--person-assigned-tag-text);
    --readonly-striped: 0;
}
#con_person_edit .tagify__tag[readonly] > div::before {
    animation: none;
    background: var(--tag-bg);
    filter: none;
    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset;
}
.org-contact-error-slot {
    min-height: 1.25rem;
    margin-bottom: 0.75rem;
    padding-left: calc(var(--bs-gutter-x) * 0.5 + 16.66666667%);
}
.org-contact-error-slot.is-hidden {
    visibility: hidden;
}
.org-field-error {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-danger);
}
.form-select.is-invalid ~ .org-field-error,
.form-control.is-invalid ~ .org-field-error {
    display: block;
}
#con_new_organisation .form-control.is-invalid ~ .invalid-feedback,
#con_new_organisation .form-select.is-invalid ~ .invalid-feedback {
    display: block;
}
#con_new_organisation .invalid-feedback:empty {
    display: none !important;
}
.band-form-error-slot {
    min-height: 1.25rem;
    margin-bottom: 0.75rem;
    padding-left: calc(var(--bs-gutter-x) * 0.5 + 16.66666667%);
}
.band-form-error-slot.is-hidden {
    visibility: hidden;
}
.band-tagify-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.band-tagify-row .band-tagify-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}
.band-tagify-add-town-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* "Not in list, add a new ..." overlay inside a binding unit's select column.
   Only shown while the select has focus. */
.binding-add-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    margin-right: 1.75rem;
    white-space: nowrap;
    z-index: 4;
}
.person-binding-list {
    width: 100%;
}
.person-binding-unit {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.person-binding-unit:last-child {
    border-bottom: 0;
}
.person-binding-labels .form-label {
    font-weight: 600;
    font-size: 0.9rem;
}
#row_musician_selection .tagify,
#row_edit_musician_selection .tagify {
    background-color: #fff;
}
.tagify__dropdown {
    background-color: #fff;
}
#np_pro_bindings_feedback.person-field-error,
#ep_pro_bindings_feedback.person-field-error {
    display: none;
}
#np_pro_bindings_feedback.person-field-error.is-visible,
#ep_pro_bindings_feedback.person-field-error.is-visible {
    display: block;
}
.band-field-error {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-danger);
}
#con_new_band .form-control.is-invalid ~ .invalid-feedback,
#con_new_band .form-select.is-invalid ~ .invalid-feedback,
#con_new_band .form-control.is-invalid ~ .band-field-error,
#con_new_band .form-select.is-invalid ~ .band-field-error {
    display: block;
}
#con_new_band .invalid-feedback:empty,
#con_new_band .band-field-error:empty {
    display: none !important;
}
#con_new_band .band-field-row-invalid > .col-form-label {
    color: var(--bs-danger);
    font-weight: 600;
}
#con_new_band .band-field-row-invalid .tagify {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
#con_new_band .band-field-row-invalid .band-field-error {
    display: block;
}
#con_band_edit .form-control.is-invalid ~ .invalid-feedback,
#con_band_edit .form-select.is-invalid ~ .invalid-feedback,
#con_band_edit .form-control.is-invalid ~ .band-field-error,
#con_band_edit .form-select.is-invalid ~ .band-field-error {
    display: block;
}
#con_band_edit .invalid-feedback:empty,
#con_band_edit .band-field-error:empty {
    display: none !important;
}
#con_band_edit .band-field-row-invalid > .col-form-label {
    color: var(--bs-danger);
    font-weight: 600;
}
#con_band_edit .band-field-row-invalid .tagify {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
#con_band_edit .band-field-row-invalid .band-field-error {
    display: block;
}
#con_band_edit_page {
    padding-bottom: 2.5rem;
}
#con_band_edit #edit_instruments {
    --band-assigned-tag-bg: #f5c6dc;
    --band-assigned-tag-text: #6f2b4a;
}
#con_band_edit #edit_instruments .band-instrument-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
#con_band_edit #edit_instruments .band-instrument-hint.is-hidden {
    display: none;
}
#con_band_edit #edit_instruments .band-assigned-swatch {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.1em;
    border-radius: 3px;
    background-color: var(--band-assigned-tag-bg);
    border: 1px solid rgba(111, 43, 74, 0.22);
}
#con_band_edit #edit_instruments .tagify__tag[readonly] {
    --tag-bg: var(--band-assigned-tag-bg);
    --tag-hover: #efb8d2;
    --tag-text-color: var(--band-assigned-tag-text);
    --readonly-striped: 0;
}
#con_band_edit #edit_instruments .tagify__tag[readonly] > div::before {
    animation: none;
    background: var(--tag-bg);
    filter: none;
    box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset;
}
#con_new_band_page {
    padding-bottom: 2.5rem;
}
.town-modal-footer-slot {
    min-height: 5.5rem;
}
.town-dup-notice-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}
.town-dup-notice-row p {
    margin-right: auto;
}
#btn_town_dup_ok {
    min-width: 9rem;
}
.manual-coord-warning-slot {
    min-height: 1.25rem;
    margin-bottom: 0.75rem;
}
.manual-coord-warning-slot.is-hidden {
    visibility: hidden;
}
.w-100 {}
.organisations-list-scroll {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
}
.organisations-list-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-light, #f8f9fa);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.organisations-list-table tbody tr {
    cursor: pointer;
}
.organisations-list-table tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.08);
}
.bands-list-table tbody tr {
    cursor: pointer;
}
.bands-list-table tbody tr:hover {
    background-color: rgba(255, 193, 7, 0.15);
}
.lookup-list-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
.towns-list-table tbody tr {
    cursor: pointer;
}
.towns-list-table tbody tr:hover {
    background-color: rgba(13, 202, 240, 0.12);
}
.town-map-postal-slot input {
    max-width: 10rem;
}
#modal_add_instrument .form-control.is-invalid ~ .invalid-feedback,
#modal_add_genre .form-control.is-invalid ~ .invalid-feedback {
    display: block;
}
.lookup-modal-action-slot {
    flex: 0 0 auto;
    width: 9.5rem;
}
.dashboard-actions-row .btn {
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}
.dashboard-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.dashboard-page-header {
    flex: 0 0 auto;
    background-color: #fff;
    z-index: 1030;
}
.dashboard-page-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 0.75rem;
}
.dashboard-section {
    margin-bottom: 1.75rem;
}
.dashboard-section-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.dashboard-section-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid #000;
}
.person-photo-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.person-photo-slot {
    width: 8.5rem;
    min-height: 8.5rem;
    border: 1px dashed var(--bs-secondary, #6c757d);
    border-radius: 0.375rem;
    background-color: var(--bs-light, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.person-photo-slot--filled {
    border-style: solid;
    padding: 0;
    flex-direction: column;
}
.person-photo-slot__preview {
    width: 100%;
    height: 6.5rem;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.person-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.person-photo-lightbox.is-hidden {
    display: none;
}
.person-photo-lightbox__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}
.person-photo-lightbox__panel {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1200px);
    max-height: 92vh;
    background: #111;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.45);
    padding: 0.5rem;
}
.person-photo-lightbox__image {
    display: block;
    max-width: min(94vw, 1160px);
    max-height: calc(92vh - 1rem);
    width: auto;
    height: auto;
    object-fit: contain;
}
.person-photo-lightbox__close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    filter: invert(1);
}
.person-photo-slot__remove {
    width: 100%;
    border-radius: 0;
}
.person-photo-slot__badge {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    background-color: rgba(25, 135, 84, 0.9);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}
.person-photo-slot__picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.75rem;
    cursor: pointer;
    text-align: center;
}
.person-photo-slot__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.person-photo-slot__label {
    font-size: 0.9rem;
    color: var(--bs-primary, #3476bb);
    font-weight: 600;
}
.person-photo-error-slot {
    min-height: 1.25rem;
    margin-top: 0.5rem;
}
.person-photo-error-slot.is-hidden {
    visibility: hidden;
}