.bella-cards-app {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px;
    font-family: Arial, sans-serif;
    color: #171717;
}
.bella-cards-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.bella-cards-header h1 {
    margin: 0 0 6px;
    font-size: 28px;
}
.bella-cards-header p {
    margin: 0;
    color: #555;
}
.bella-cards-login {
    max-width: 520px;
    margin: 60px auto;
    padding: 28px;
    border: 1px solid #ddd;
    border-radius: 16px;
    text-align: center;
}
.bella-primary,
.bella-secondary,
.bella-small,
.bella-danger,
.bella-upload-label {
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
    line-height: 1.2;
    font-weight: 700;
    font-size: 14px;
}
.bella-primary {
    background: #111;
    color: #fff !important;
}
.bella-secondary,
.bella-upload-label {
    background: #f1f1f1;
    color: #111 !important;
    border: 1px solid #ddd;
}
.bella-small {
    background: #111;
    color: #fff;
    padding: 7px 10px;
    font-size: 12px;
}
.bella-danger {
    background: #fff4f4;
    color: #8a1f1f !important;
    border: 1px solid #e3b7b7;
}
.bella-danger:hover {
    background: #ffecec;
}
.bella-link {
    background: transparent;
    border: 0;
    padding: 0;
    color: #111;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.bella-notice {
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid #ddd;
}
.bella-notice.is-success {
    background: #f3fff4;
    border-color: #b7e3bd;
}
.bella-notice.is-error {
    background: #fff4f4;
    border-color: #e3b7b7;
}
.bella-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    margin-bottom: 12px;
}
.bella-filters label,
.bella-card-panel label,
.bella-modal label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}
.bella-filters input,
.bella-card-panel input,
.bella-card-panel textarea,
.bella-modal input,
.bella-modal textarea {
    border: 1px solid #cfcfcf;
    border-radius: 9px;
    padding: 10px 11px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    background: #fff;
}
.bella-card-panel textarea,
.bella-modal textarea {
    min-height: 78px;
    resize: vertical;
}
.bella-filter-buttons,
.bella-toolbar,
.bella-card-actions,
.bella-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.bella-toolbar {
    margin-bottom: 12px;
}
.bella-upload-label input {
    display: none;
}
.bella-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.9fr);
    gap: 14px;
    align-items: start;
}
.bella-layout.is-list-only {
    grid-template-columns: minmax(0, 1fr);
}
.bella-layout.is-list-only .bella-card-panel {
    display: none;
}
.bella-results-panel,
.bella-card-panel {
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}
.bella-results-summary {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    font-weight: 700;
    background: #fbfbfb;
}
.bella-table-wrap {
    overflow: auto;
    max-height: 720px;
}
.bella-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.bella-table th,
.bella-table td {
    border-bottom: 1px solid #eee;
    padding: 10px 9px;
    text-align: left;
    vertical-align: top;
}
.bella-table th {
    position: sticky;
    top: 0;
    background: #f7f7f7;
    z-index: 1;
}
.bella-table tr:hover td {
    background: #fcfcfc;
}
.bella-empty-row,
.bella-empty-card {
    padding: 24px;
    color: #666;
    text-align: center;
}
.bella-card-panel {
    padding: 16px;
    position: sticky;
    top: 18px;
    max-height: 84vh;
    overflow: auto;
}
.bella-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.bella-card-head h2 {
    margin: 0;
    font-size: 22px;
}
.bella-card-fields,
.bella-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.bella-treatment {
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    padding: 12px;
    margin: 12px 0;
    background: #fbfbfb;
}
.bella-treatment-title {
    margin-bottom: 4px;
}
.bella-treatment-meta,
.bella-treatment-details {
    color: #555;
    font-size: 12px;
    margin-bottom: 8px;
    white-space: pre-wrap;
}
.bella-treatment label {
    margin-top: 8px;
}
.bella-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.bella-modal[hidden] {
    display: none;
}
.bella-modal-box {
    background: #fff;
    width: min(760px, 96vw);
    max-height: 90vh;
    overflow: auto;
    border-radius: 18px;
    padding: 18px;
    position: relative;
}
.bella-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
}
@media (max-width: 1050px) {
    .bella-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bella-layout {
        grid-template-columns: 1fr;
    }
    .bella-card-panel {
        position: static;
        max-height: none;
    }
}
@media (max-width: 620px) {
    .bella-cards-app {
        padding: 10px;
    }
    .bella-cards-header {
        flex-direction: column;
    }
    .bella-filters,
    .bella-card-fields,
    .bella-form-grid {
        grid-template-columns: 1fr;
    }
    .bella-table {
        min-width: 760px;
    }
}


.bella-sync-status {
    margin: 10px 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7d6;
    border: 1px solid #efd878;
    font-weight: 600;
}


.bella-sort {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: #111;
    cursor: pointer;
    text-align: left;
}

.bella-sort:hover,
.bella-sort.is-active {
    text-decoration: underline;
}

.bella-table th {
    white-space: nowrap;
}

.bella-table td {
    vertical-align: top;
}

.bella-table td:nth-child(1),
.bella-table td:nth-child(2),
.bella-table td:nth-child(5),
.bella-table td:nth-child(7),
.bella-table td:nth-child(8) {
    white-space: nowrap;
}


/* v9: kontrola nad svim rezultatima kroz paginaciju */
.bella-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    background: #fff;
    font-size: 13px;
}
.bella-pagination-bottom {
    border-top: 1px solid #eee;
    border-bottom: 0;
}
.bella-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.bella-page-info {
    font-weight: 700;
    padding: 0 4px;
}
.bella-page-jump,
.bella-per-page {
    display: inline-flex;
    align-items: center;
    flex-direction: row !important;
    gap: 6px !important;
    font-weight: 700;
}
.bella-page-jump input {
    width: 70px;
    border: 1px solid #cfcfcf;
    border-radius: 9px;
    padding: 8px;
}
.bella-per-page select {
    border: 1px solid #cfcfcf;
    border-radius: 9px;
    padding: 8px;
    background: #fff;
}
.bella-table {
    min-width: 900px;
}
.bella-table th:nth-child(1), .bella-table td:nth-child(1) { min-width: 88px; }
.bella-table th:nth-child(2), .bella-table td:nth-child(2) { min-width: 64px; }
.bella-table th:nth-child(3), .bella-table td:nth-child(3) { min-width: 150px; }
.bella-table th:nth-child(4), .bella-table td:nth-child(4) { min-width: 230px; }
.bella-table th:nth-child(5), .bella-table td:nth-child(5) { min-width: 90px; }
.bella-table th:nth-child(6), .bella-table td:nth-child(6) { min-width: 150px; }
.bella-table th:nth-child(7), .bella-table td:nth-child(7) { min-width: 110px; }
.bella-table th:nth-child(8), .bella-table td:nth-child(8) { min-width: 120px; }
.bella-table th:nth-child(9), .bella-table td:nth-child(9) { min-width: 210px; }
.bella-table td:nth-child(4),
.bella-table td:nth-child(6) { white-space: normal; }

/* v12: potvrda za klijenta */
.bella-treatment-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.bella-confirmation-box {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
}
.bella-confirmation-url {
    width: 100%;
    box-sizing: border-box;
    margin: 7px 0;
    font-size: 13px;
}
.bella-confirmation-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* v16: preglednija kartica klijenta - tabovi i accordion istorija */
.bella-client-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    color: #555;
    font-size: 12px;
}
.bella-client-summary span {
    background: #f3f3f3;
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    padding: 4px 8px;
}
.bella-client-tabs {
    display: flex;
    gap: 8px;
    background: #f0f4ff;
    border: 1px solid #c9d7f5;
    border-radius: 12px;
    margin: 10px 0 14px;
    padding: 8px;
    overflow-x: auto;
}
.bella-tab {
    border: 1px solid #9fb6e8;
    background: #ffffff;
    color: #1f3f78;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.bella-tab:hover {
    background: #e8f0ff;
    border-color: #6d8fd6;
}
.bella-tab.is-active {
    background: #1f3f78;
    color: #fff;
    border-color: #1f3f78;
}
.bella-tab-panel {
    display: none;
}
.bella-tab-panel.is-active {
    display: block;
}
.bella-latest-box {
    padding: 11px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #fbfbfb;
    margin: 8px 0 4px;
    line-height: 1.4;
}
.bella-history-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin: 4px 0 12px;
}
.bella-history-help {
    color: #666;
    font-size: 12px;
    margin-top: 3px;
    font-weight: 400;
}
.bella-history-buttons {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bella-treatment-accordion {
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    margin: 9px 0;
    background: #fff;
    overflow: hidden;
}
.bella-treatment-toggle {
    width: 100%;
    border: 0;
    background: #f8f8f8;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    color: #111;
}
.bella-treatment-toggle:hover {
    background: #f2f2f2;
}
.bella-treatment-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.bella-treatment-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}
.bella-treatment-side {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    color: #555;
    font-size: 12px;
}
.bella-note-dot {
    background: #fff4c2;
    border: 1px solid #eadb84;
    border-radius: 999px;
    padding: 2px 6px;
    color: #6a5600;
    font-weight: 700;
}
.bella-chevron {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.15s ease;
}
.bella-treatment-accordion.is-open .bella-chevron {
    transform: rotate(180deg);
}
.bella-treatment-body {
    display: none;
    padding: 12px;
    background: #fbfbfb;
    border-top: 1px solid #e8e8e8;
}
.bella-treatment-accordion.is-open .bella-treatment-body {
    display: block;
}
.bella-treatment-body label {
    margin-top: 8px;
}
@media (max-width: 620px) {
    .bella-history-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .bella-treatment-toggle {
        align-items: flex-start;
    }
    .bella-treatment-main span {
        max-width: 240px;
    }
}

/* v19: digitalne saglasnosti i zdravstveni upitnici */
.bella-consent-dot {
    background: #eef2ff;
    border: 1px solid #b8c6f2;
    border-radius: 999px;
    padding: 2px 6px;
    color: #1f3f78;
    font-weight: 700;
}
.bella-consent-dot.is-submitted {
    background: #e9f9ed;
    border-color: #a8d9b4;
    color: #17672d;
}
.bella-consent-box {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #c9d7f5;
    border-radius: 12px;
    background: #f7faff;
}
.bella-consent-url {
    width: 100%;
    box-sizing: border-box;
    margin: 7px 0;
    font-size: 13px;
}
.bella-consent-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, 0.6fr) minmax(150px, 0.6fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    background: #fbfbfb;
    margin: 9px 0;
}
.bella-consent-row-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bella-consent-row .bella-consent-output {
    grid-column: 1 / -1;
}
.bella-consent-status {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 8px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid #ddd;
    background: #fff;
}
.bella-consent-status.is-submitted {
    background: #e9f9ed;
    border-color: #a8d9b4;
    color: #17672d;
}
.bella-consent-status.is-draft {
    background: #fff7d6;
    border-color: #efd878;
    color: #755d00;
}
.bella-consent-status.is-missing {
    background: #fff4f4;
    border-color: #e3b7b7;
    color: #8a1f1f;
}
@media (max-width: 620px) {
    .bella-consent-row {
        grid-template-columns: 1fr;
    }
    .bella-consent-row-actions {
        justify-content: flex-start;
    }
}

/* v1.22 - dnevni prikaz i klijent režim saglasnosti */
.bella-quick-range {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin: 0 0 12px;
    background: #eef4ff;
    border: 1px solid #b8cdf8;
    border-radius: 14px;
}
.bella-range-btn {
    border: 1px solid #244981;
    background: #fff;
    color: #244981;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}
.bella-range-btn.is-active,
.bella-range-btn:hover {
    background: #244981;
    color: #fff;
}
.bella-range-help {
    color: #3c4b63;
    font-size: 13px;
    margin-left: 4px;
}
.bella-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 210px;
}
.bella-row-actions .bella-secondary {
    padding: 7px 10px;
    font-size: 12px;
}
.bella-qr-box {
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed #b8cdf8;
    border-radius: 12px;
    background: #f7faff;
    text-align: center;
}
.bella-qr-box img {
    max-width: 220px;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 8px;
    border: 1px solid #e4e9f5;
    border-radius: 10px;
}
@media (max-width: 900px) {
    .bella-row-actions {
        min-width: 0;
    }
    .bella-quick-range {
        align-items: stretch;
    }
    .bella-range-btn {
        flex: 1 1 42%;
    }
}

/* v1.23 - fotografije tretmana */
.bella-photos-section {
    margin: 14px 0 18px;
    padding: 14px;
    border: 1px solid #cfe0ff;
    border-radius: 14px;
    background: #f7faff;
}
.bella-photos-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.bella-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.bella-photo-actions .bella-secondary {
    font-size: 13px;
    padding: 8px 10px;
}
.bella-photo-uploading {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff8df;
    border: 1px solid #ead17b;
    font-weight: 700;
}
.bella-photo-empty {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    color: #60708a;
    border: 1px dashed #cbd7eb;
}
.bella-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.bella-photo-card {
    background: #fff;
    border: 1px solid #d9e4f8;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(20, 47, 86, 0.08);
}
.bella-photo-thumb {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #eef3fb;
    aspect-ratio: 1 / 1;
}
.bella-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bella-photo-meta {
    margin-top: 8px;
    font-size: 12px;
    color: #31415c;
    line-height: 1.35;
}
.bella-photo-card .bella-danger {
    width: 100%;
    margin-top: 8px;
    padding: 7px 8px;
    font-size: 12px;
}
@media (max-width: 620px) {
    .bella-photo-actions .bella-secondary {
        flex: 1 1 100%;
        text-align: center;
    }
    .bella-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v1.24 - galerija fotografija */
.bella-gallery-app .bella-cards-header {
    align-items: center;
}
.bella-gallery-filters {
    grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
}
.bella-gallery-summary {
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid #e3e9f5;
    border-radius: 12px;
    background: #f7faff;
    font-weight: 700;
}
.bella-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 14px 0;
}
.bella-gallery-card {
    background: #fff;
    border: 1px solid #dbe6f8;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(20, 47, 86, 0.08);
}
.bella-gallery-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    background: #edf3fb;
    overflow: hidden;
}
.bella-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bella-gallery-info {
    padding: 10px 12px 8px;
    font-size: 13px;
    line-height: 1.4;
}
.bella-portfolio-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #263242;
    font-size: 12px;
    font-weight: 700;
}
.bella-portfolio-badge.approved {
    background: #e9fff0;
    color: #0f6b31;
}
.bella-portfolio-badge.no_public {
    background: #fff0f0;
    color: #842323;
}
.bella-gallery-actions,
.bella-gallery-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 12px 12px;
}
.bella-gallery-actions .bella-secondary,
.bella-gallery-flags .bella-secondary,
.bella-gallery-flags .bella-small {
    font-size: 12px;
    padding: 7px 9px;
}
.bella-gallery-pagination {
    margin-top: 12px;
}
@media (max-width: 900px) {
    .bella-gallery-filters {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 620px) {
    .bella-gallery-filters {
        grid-template-columns: 1fr;
    }
    .bella-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .bella-gallery-info {
        font-size: 12px;
    }
    .bella-gallery-actions,
    .bella-gallery-flags {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* v1.26 - vođeno fotografisanje sa automatskim ramom */
.bella-camera-box {
    width: min(820px, 96vw);
}
.bella-camera-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin: 4px 0 12px;
    color: #40526b;
}
.bella-camera-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}
.bella-camera-auto-hint {
    padding: 10px 12px;
    border: 1px solid #d9e4f8;
    border-radius: 12px;
    background: #f7faff;
    color: #2a456e;
    font-size: 13px;
    line-height: 1.4;
}
.bella-camera-video-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 3 / 4;
}
#bella-camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bella-camera-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.bella-frame-shape,
.bella-frame-midline,
.bella-frame-hline,
.bella-frame-caption {
    position: absolute;
}
.bella-frame-shape {
    border: 3px solid rgba(255,255,255,0.95);
    box-shadow: 0 0 0 200vmax rgba(0,0,0,0.14);
}
.bella-frame-midline {
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(255,255,255,0.58);
    transform: translateX(-50%);
}
.bella-frame-hline {
    left: 18%;
    right: 18%;
    top: 40%;
    height: 1px;
    background: rgba(255,255,255,0.58);
}
.bella-frame-caption {
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17,17,17,0.65);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.bella-camera-guide.frame-none .bella-frame-shape,
.bella-camera-guide.frame-none .bella-frame-midline,
.bella-camera-guide.frame-none .bella-frame-hline {
    display: none;
}
.bella-camera-guide.frame-face .bella-frame-shape {
    width: 62%;
    height: 82%;
    left: 19%;
    top: 9%;
    border-radius: 42% / 36%;
}
.bella-camera-guide.frame-brows .bella-frame-shape {
    width: 74%;
    height: 22%;
    left: 13%;
    top: 18%;
    border-radius: 18px;
}
.bella-camera-guide.frame-brows .bella-frame-hline {
    top: 29%;
}
.bella-camera-guide.frame-brows .bella-frame-midline {
    top: 14%;
    bottom: 56%;
}
.bella-camera-guide.frame-lips .bella-frame-shape {
    width: 56%;
    height: 18%;
    left: 22%;
    top: 57%;
    border-radius: 18px;
}
.bella-camera-guide.frame-lips .bella-frame-hline {
    top: 66%;
}
.bella-camera-guide.frame-lips .bella-frame-midline {
    top: 52%;
    bottom: 18%;
}
.bella-camera-guide.frame-eyes .bella-frame-shape {
    width: 72%;
    height: 24%;
    left: 14%;
    top: 26%;
    border-radius: 18px;
}
.bella-camera-guide.frame-eyes .bella-frame-hline {
    top: 38%;
}
.bella-camera-guide.frame-eyes .bella-frame-midline {
    top: 20%;
    bottom: 44%;
}
.bella-camera-guide.frame-body .bella-frame-shape {
    width: 76%;
    height: 86%;
    left: 12%;
    top: 7%;
    border-radius: 20px;
}
.bella-camera-status {
    margin-top: 12px;
    min-height: 20px;
    font-size: 13px;
    color: #39475e;
}
.bella-camera-status.is-error { color: #8a1f1f; font-weight: 700; }
.bella-camera-status.is-success { color: #17672d; font-weight: 700; }
.bella-camera-status.is-warning { color: #755d00; font-weight: 700; }
@media (max-width: 720px) {
    .bella-camera-toolbar {
        grid-template-columns: 1fr;
    }
    .bella-camera-box {
        width: min(96vw, 96vw);
        padding: 16px;
    }
}


/* v1.27 - slanje potvrde preko SMS/WhatsApp/Viber */
.bella-confirmation-actions .bella-send-sms,
.bella-confirmation-actions .bella-send-whatsapp,
.bella-confirmation-actions .bella-send-viber {
    border-color: #c9d7f5;
    background: #f7faff;
}
@media (max-width: 620px) {
    .bella-confirmation-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .bella-confirmation-actions .bella-secondary,
    .bella-confirmation-actions .bella-small {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

.bella-sms-confirmation{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef;font-size:12px;line-height:1.4;white-space:nowrap}
.bella-sms-confirmation.is-confirmed{background:#d1e7dd;color:#0f5132}
.bella-sms-confirmation.is-declined,.bella-sms-confirmation.is-failed{background:#f8d7da;color:#842029}
.bella-sms-confirmation.is-sent,.bella-sms-confirmation.is-pending,.bella-sms-confirmation.is-no_reply,.bella-sms-confirmation.is-unclear_reply{background:#fff3cd;color:#664d03}
.bella-sms-confirmation.is-empty{background:#f6f7f7;color:#666}
.bella-sms-meta .bella-sms-confirmation{vertical-align:middle}


/* v1.30 - cena u tabeli i suma za filter */
.bella-total-price {
    display: inline-block;
    margin-left: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef9f1;
    border: 1px solid #bde5c8;
    color: #17672d;
    font-weight: 800;
}
.bella-price-cell {
    font-weight: 800;
    white-space: nowrap;
}
.bella-price-dot {
    background: #eef9f1;
    border: 1px solid #bde5c8;
    border-radius: 999px;
    padding: 2px 6px;
    color: #17672d;
    font-weight: 800;
    white-space: nowrap;
}
@media (max-width: 620px) {
    .bella-total-price {
        display: block;
        margin: 7px 0 0;
        width: fit-content;
    }
}
.bella-table { min-width: 900px; }
.bella-table th:nth-child(5), .bella-table td:nth-child(5) { min-width: 90px; }
.bella-table th:nth-child(6), .bella-table td:nth-child(6) { min-width: 150px; }
.bella-table th:nth-child(7), .bella-table td:nth-child(7) { min-width: 110px; }
.bella-table th:nth-child(8), .bella-table td:nth-child(8) { min-width: 120px; }
.bella-table th:nth-child(9), .bella-table td:nth-child(9) { min-width: 210px; }

/* v1.31 - finansijski rezime za filter */
.bella-results-summary {
    display: block;
}
.bella-summary-line {
    font-weight: 800;
    margin-bottom: 10px;
}
.bella-summary-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.bella-summary-card {
    border: 1px solid #e0e6f2;
    border-radius: 12px;
    background: #fff;
    padding: 10px 11px;
    line-height: 1.25;
    min-height: 74px;
}
.bella-summary-card span,
.bella-summary-card small {
    display: block;
    color: #5c6b82;
    font-size: 12px;
    font-weight: 700;
}
.bella-summary-card strong {
    display: block;
    margin: 5px 0 3px;
    font-size: 17px;
    color: #111;
}
.bella-summary-card.is-active {
    background: #f4fff6;
    border-color: #b9e5c0;
}
.bella-summary-card.is-done {
    background: #f7faff;
    border-color: #b8cdf8;
}
.bella-summary-card.is-review {
    background: #fffaf0;
    border-color: #e3c99a;
}
.bella-summary-card.is-remaining {
    background: #fff9e8;
    border-color: #efd878;
}
.bella-summary-card.is-excluded {
    background: #fff4f4;
    border-color: #e3b7b7;
}
.bella-summary-help,
.bella-report-bucket {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}
.bella-summary-help {
    margin-top: 9px;
}
@media (max-width: 1100px) {
    .bella-summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .bella-summary-cards {
        grid-template-columns: 1fr;
    }
}


/* v1.32 - pregled od prvog ka poslednjem terminu i blago zasenčeni prošli termini */
.bella-table tr.bella-result-row.is-past-realtime td {
    background: #f1f3f6;
    color: #697386;
}
.bella-table tr.bella-result-row.is-past-realtime:hover td {
    background: #e9edf3;
}
.bella-table tr.bella-result-row.is-past-realtime .bella-link {
    color: #49566a;
}
.bella-table tr.bella-result-row.is-past-realtime .bella-price-cell,
.bella-table tr.bella-result-row.is-past-realtime .bella-report-bucket {
    opacity: 0.85;
}

/* v1.33 - višestruki izbor filtera */
.bella-multi-filter {
    position: relative;
    width: 100%;
}
.bella-multi-toggle {
    width: 100%;
    text-align: left;
    border: 1px solid #cfcfcf;
    border-radius: 9px;
    padding: 10px 34px 10px 11px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    background: #fff;
    cursor: pointer;
    min-height: 41px;
    color: #222;
    position: relative;
}
.bella-multi-toggle:after {
    content: '▾';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
}
.bella-multi-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 7px);
    min-width: 230px;
    max-height: 300px;
    overflow: auto;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    padding: 8px;
    z-index: 9999;
}
.bella-multi-menu[hidden] {
    display: none;
}
.bella-multi-menu label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    white-space: nowrap;
}
.bella-multi-menu label:hover {
    background: #f4f7ff;
}
.bella-multi-menu input[type="checkbox"] {
    width: auto;
    margin: 0;
}
.bella-multi-empty {
    padding: 10px;
    color: #666;
    font-size: 13px;
}
@media (max-width: 620px) {
    .bella-multi-menu {
        position: static;
        margin-top: 7px;
        max-height: 240px;
        box-shadow: none;
    }
}


/* v1.36 - preglednija tabela i klikabilni kontakt podaci */
.bella-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
}
.bella-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c9d7f5;
    border-radius: 999px;
    padding: 7px 10px;
    background: #f7faff;
    color: #1f3f78 !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
}
.bella-contact-link:hover {
    background: #eaf1ff;
    border-color: #9fb6e8;
}


/* v1.37 - uže kolone Klijent i Tretman za pregledniju tabelu */
.bella-table {
    min-width: 780px;
}
.bella-table th:nth-child(3),
.bella-table td:nth-child(3) {
    width: 120px;
    min-width: 110px;
    max-width: 130px;
    white-space: normal;
}
.bella-table th:nth-child(4),
.bella-table td:nth-child(4) {
    width: 155px;
    min-width: 135px;
    max-width: 165px;
    white-space: normal;
}
.bella-table-client-button {
    max-width: 100%;
    text-align: left;
    line-height: 1.25;
}
.bella-table-client-name,
.bella-table-treatment-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: anywhere;
}
.bella-table-treatment-name {
    max-width: 165px;
}
.bella-table-client-name {
    max-width: 130px;
}

/* v1.38: paketi tretmana */
.bella-package-empty {
    padding: 18px;
    border: 1px dashed #cfcfcf;
    border-radius: 12px;
    color: #666;
    text-align: center;
    background: #fafafa;
}
.bella-new-package-wrap,
.bella-package-edit-wrap {
    margin: 12px 0;
}
.bella-package-form {
    border: 1px solid #d8e1f4;
    border-radius: 14px;
    background: #f8faff;
    padding: 12px;
}
.bella-package-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.bella-package-form select,
.bella-package-actions select,
.bella-package-session select {
    border: 1px solid #cfcfcf;
    border-radius: 9px;
    padding: 9px 10px;
    font-size: 13px;
    background: #fff;
    color: #171717;
}
.bella-package-card {
    border: 1px solid #d9d9d9;
    border-radius: 15px;
    padding: 13px;
    margin: 12px 0;
    background: #fff;
}
.bella-package-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.bella-package-head h3 {
    margin: 0;
    font-size: 17px;
}
.bella-package-sub {
    margin-top: 4px;
    color: #666;
    font-size: 12px;
}
.bella-package-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bella-package-badges span,
.bella-package-dot {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 7px;
    background: #eef3ff;
    border: 1px solid #cbd8f3;
    color: #294978;
    font-size: 10px;
    font-weight: 700;
}
.bella-package-badges .is-completed {
    background: #eef9ef;
    border-color: #bedfc2;
    color: #24662e;
}
.bella-package-badges .is-closed {
    background: #f2f2f2;
    border-color: #d6d6d6;
    color: #666;
}
.bella-package-stats-title {
    margin: 12px 0 -5px;
    color: #666;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bella-package-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 12px 0 8px;
}
.bella-package-stats div {
    text-align: center;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fafafa;
    padding: 8px 5px;
}
.bella-package-stats strong {
    display: block;
    font-size: 20px;
    line-height: 1;
}
.bella-package-stats span {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 10px;
    text-transform: uppercase;
}
.bella-package-progress {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: #ececec;
}
.bella-package-progress span {
    display: block;
    height: 100%;
    background: #1f3f78;
}
.bella-package-balance-line {
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 9px;
    background: #f6f8fb;
    border: 1px solid #e1e6ef;
    color: #4e5968;
    font-size: 12px;
    line-height: 1.4;
}
.bella-package-meta,
.bella-package-note {
    margin-top: 8px;
    color: #555;
    font-size: 12px;
    line-height: 1.4;
}
.bella-package-note {
    padding: 8px 9px;
    border-radius: 9px;
    background: #fff8e8;
    border: 1px solid #eadbb7;
}
.bella-package-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
    margin: 11px 0;
}
.bella-package-actions select {
    min-width: 200px;
    flex: 1 1 220px;
}
.bella-package-actions input[type="date"] {
    width: auto;
    min-width: 135px;
    padding: 9px 10px;
}
.bella-package-sessions {
    border-top: 1px solid #ededed;
    margin-top: 10px;
    padding-top: 7px;
}
.bella-package-session {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
}
.bella-package-session:last-child {
    border-bottom: 0;
}
.bella-package-session-number {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f4ff;
    color: #1f3f78;
    font-size: 11px;
    font-weight: 800;
}
.bella-package-session strong,
.bella-package-session small {
    display: block;
}
.bella-package-session strong {
    font-size: 12px;
}
.bella-package-session small {
    margin-top: 2px;
    color: #666;
    font-size: 11px;
}
.bella-package-session-label {
    font-size: 11px;
    font-weight: 700;
}
@media (max-width: 620px) {
    .bella-package-form-grid {
        grid-template-columns: 1fr;
    }
    .bella-package-head {
        flex-direction: column;
    }
    .bella-package-badges {
        justify-content: flex-start;
    }
    .bella-package-session {
        grid-template-columns: 24px minmax(0, 1fr);
    }
    .bella-package-session select,
    .bella-package-session .bella-danger {
        grid-column: 2;
        width: 100%;
    }
    .bella-package-actions > * {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (max-width: 560px) {
  .bella-package-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
\n\n/* v1.38.3 - mobilni raspored istorije bez vertikalnog lomljenja datuma */
@media (max-width: 620px) {
    .bella-treatment-toggle {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
        padding: 11px 42px 11px 12px;
    }
    .bella-treatment-main {
        width: 100%;
        min-width: 0;
    }
    .bella-treatment-main strong {
        display: block;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        line-height: 1.3;
    }
    .bella-treatment-main span {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }
    .bella-treatment-side {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        flex-shrink: 1;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
        font-size: 11px;
    }
    .bella-treatment-side > span:not(.bella-chevron) {
        max-width: 100%;
    }
    .bella-treatment-side .bella-package-dot {
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }
    .bella-treatment-side .bella-chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
    }
    .bella-treatment-accordion.is-open .bella-treatment-side .bella-chevron {
        transform: translateY(-50%) rotate(180deg);
    }
}


/* v1.38.4 - stabilan raspored istorije u uskom panelu i na desktopu */
.bella-card-panel .bella-treatment-toggle {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    padding: 11px 42px 11px 12px;
}
.bella-card-panel .bella-treatment-main {
    width: 100%;
    min-width: 0;
}
.bella-card-panel .bella-treatment-main strong {
    display: block;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.3;
}
.bella-card-panel .bella-treatment-main span {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.bella-card-panel .bella-treatment-side {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    font-size: 11px;
}
.bella-card-panel .bella-treatment-side > span:not(.bella-chevron) {
    max-width: 100%;
}
.bella-card-panel .bella-treatment-side .bella-package-dot {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
.bella-card-panel .bella-treatment-side .bella-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.bella-card-panel .bella-treatment-accordion.is-open .bella-treatment-side .bella-chevron {
    transform: translateY(-50%) rotate(180deg);
}


/* v1.38.6 - iPad navigacija i stabilan foto režim */
.bella-app-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid #d9e4f8;
    border-radius: 13px;
    background: #f7faff;
    flex: 0 0 auto;
}
.bella-app-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 9px;
    color: #20345d !important;
    text-decoration: none !important;
    font-weight: 800;
    white-space: nowrap;
}
.bella-app-nav-link.is-active {
    background: #263f78;
    color: #fff !important;
}
html.bella-camera-open,
body.bella-camera-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}
.bella-camera-modal {
    -webkit-overflow-scrolling: touch;
}
.bella-camera-video-wrap {
    isolation: isolate;
    touch-action: none;
}
#bella-camera-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.bella-camera-guide {
    z-index: 3;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.bella-camera-photo-mode {
    position: absolute;
    z-index: 4;
    top: 10px;
    left: 10px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(15, 20, 30, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    pointer-events: none;
}
.bella-camera-shutter {
    min-width: 170px;
    min-height: 46px;
    font-size: 15px;
}
@media (max-width: 900px) {
    .bella-cards-header {
        align-items: stretch;
    }
    .bella-app-nav {
        align-self: flex-start;
    }
    .bella-camera-modal {
        align-items: flex-start;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }
    .bella-camera-box {
        width: 100%;
        max-width: 760px;
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }
    .bella-camera-video-wrap {
        max-height: 64dvh;
    }
}
@media (max-width: 782px) and (orientation: portrait) {
    .bella-cards-header {
        flex-direction: column;
        gap: 10px;
    }
    .bella-app-nav {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .bella-app-nav-link {
        width: 100%;
        box-sizing: border-box;
    }
}
@media (orientation: landscape) and (max-height: 820px) {
    .bella-camera-box {
        max-width: 960px;
    }
    .bella-camera-video-wrap {
        aspect-ratio: 4 / 3;
        max-height: 58dvh;
    }
    .bella-camera-toolbar {
        margin-bottom: 8px;
    }
}


/* v1.38.8 - direktno slanje potvrde kroz Bella SMS Gateway */
.bella-sms-queue-result {
    margin-top: 8px;
    min-height: 18px;
    font-size: 13px;
    font-weight: 600;
}
.bella-sms-queue-result.is-success { color: #17672d; }
.bella-sms-queue-result.is-error { color: #8a1f1f; }


/* v1.40: komunikacione i promotivne SMS saglasnosti */
.bella-communication-box{border:1px solid #dcdcde;border-radius:12px;background:#fff;padding:16px;margin:0 0 18px}
.bella-communication-fields select{display:block;width:100%;margin-top:6px;min-height:40px}
.bella-communication-box textarea{display:block;width:100%;min-height:72px;margin-top:6px}
@media(max-width:720px){.bella-communication-fields{grid-template-columns:1fr!important}}

.bella-loyalty-badge{background:#f1e8ff;border:1px solid #c7a9ef;color:#583b7a;font-weight:700}.bella-loyalty-box{border-left:4px solid #7f54b3;background:#faf7ff}


/* v1.41.8 - pretvaranje pojedinačnog termina u paket */
.bella-convert-package-wrap {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #d9e4f8;
    border-radius: 12px;
    background: #f8fbff;
}
.bella-convert-package-wrap[hidden] { display: none !important; }
.bella-convert-package-grid {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(220px, 1fr);
    gap: 12px;
    align-items: end;
}
.bella-convert-package-paid {
    display: flex !important;
    align-items: center;
    gap: 9px;
    min-height: 42px;
}
.bella-convert-package-paid input {
    width: auto !important;
    margin: 0 !important;
}
.bella-convert-package-wrap p {
    margin: 10px 0;
    color: #40526b;
    line-height: 1.45;
}
@media (max-width: 680px) {
    .bella-convert-package-grid { grid-template-columns: 1fr; }
}
.bella-convert-package-quote{display:grid;gap:4px;margin:10px 0;padding:10px 12px;border:1px solid #d9c6ce;border-radius:9px;background:#fff8fb;color:#4d3e44;font-size:13px}
.bella-convert-package-quote strong{font-size:15px;color:#7d4e62}
.bella-convert-package-quote span{display:block}

/* 1.42.0 – centralna promotivna saglasnost i kontakt podaci */
.bella-warning-text,.bella-technical-email{display:block;margin-top:6px;color:#9a5a00;font-size:12px;line-height:1.4}
.bella-consent-radios{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0}
.bella-consent-radios label{display:flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid #d9d9d9;border-radius:10px;background:#fff}
.bella-consent-radios input{margin:0}
.bella-stop-status{width:100%;padding:11px 13px;border:1px solid #dfb0a9;border-radius:10px;background:#fff4f2;color:#8b2c21}
.bella-reconsent{display:flex!important;align-items:flex-start;gap:8px}
.bella-reconsent input{width:auto!important;margin-top:4px}
.bella-consent-history{margin-top:16px;border-top:1px solid #e5e5e5;padding-top:12px}
.bella-consent-history summary{cursor:pointer;font-weight:700}
.bella-consent-history table{width:100%;border-collapse:collapse;margin-top:10px}
.bella-consent-history th,.bella-consent-history td{text-align:left;vertical-align:top;border-bottom:1px solid #eee;padding:8px;font-size:12px}
@media(max-width:760px){.bella-consent-history{overflow:auto}.bella-consent-history table{min-width:650px}}


/* v1.43: saldo paketa po jedinicama + bezbedan presek stare evidencije */
.bella-package-primary-actions {
    padding-bottom: 8px;
    border-bottom: 1px solid #edf0f5;
}
.bella-package-secondary-actions {
    margin-top: 8px;
}
.bella-package-reconcile-wrap {
    margin: 8px 0 12px;
    padding: 11px;
    border: 1px solid #d8e1f4;
    border-radius: 12px;
    background: #f8faff;
}
.bella-package-reconcile-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
    margin-top: 9px;
}
.bella-package-reconcile-row label {
    flex: 1 1 180px;
    font-size: 12px;
    font-weight: 700;
}
.bella-package-reconcile-row input[type="number"] {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 9px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 9px;
    background: #fff;
}
.bella-package-session.is-legacy {
    opacity: 0.72;
    background: #fafafa;
}
.bella-package-session.is-legacy .bella-package-session-number {
    background: #eee;
    color: #666;
}
@media (max-width: 620px) {
    .bella-package-reconcile-row > * {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* 1.44.9 – package finance / partial payments / resize */
.bella-package-debt {
    color: #a33;
}
.bella-package-credit {
    color: #176b3a;
}
.bella-package-payments,
.bella-package-payment-wrap,
.bella-package-resize-wrap {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fafafa;
}
.bella-package-payments > strong {
    display: block;
    margin-bottom: 8px;
}
.bella-package-payment-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid #ececec;
    font-size: 13px;
}
.bella-package-payment-item:first-of-type {
    border-top: 0;
}
.bella-package-finance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-top: 10px;
}
.bella-package-finance-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 145px;
    margin: 0;
}
.bella-package-finance-row input,
.bella-package-finance-row select {
    min-height: 38px;
}
.bella-package-payment-note-label {
    flex: 1 1 220px;
}
.bella-package-resize-result {
    margin-top: 10px;
}
.bella-package-resize-summary {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e5e5;
}
.bella-inline-error {
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff0f0;
    color: #8a1f1f;
    border: 1px solid #efc3c3;
}
@media (max-width: 720px) {
    .bella-package-finance-row > *,
    .bella-package-finance-row label {
        width: 100%;
        min-width: 0;
    }
    .bella-package-payment-item {
        flex-direction: column;
        gap: 4px;
    }
}
.bella-client-debt {
    font-weight: 700;
    color: #a33;
}

/* 1.44.10 – pojedinačne uplate + centralni pregled dugovanja */
.bella-treatment-finance {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fafafa;
}
.bella-treatment-finance-head,
.bella-treatment-finance-summary,
.bella-treatment-finance-actions,
.bella-debt-client-head,
.bella-debts-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.bella-treatment-finance-head {
    justify-content: space-between;
    margin-bottom: 8px;
}
.bella-treatment-finance-summary {
    margin: 8px 0;
}
.bella-treatment-finance-summary > span {
    padding: 5px 8px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e7e7e7;
}
.bella-treatment-debt,
.bella-payment-status.is-partial,
.bella-payment-status.is-unpaid {
    color: #a33;
    font-weight: 700;
}
.bella-treatment-paid,
.bella-payment-status.is-paid {
    color: #176b3a;
    font-weight: 700;
}
.bella-treatment-finance-actions {
    margin-top: 10px;
}
.bella-treatment-payment-wrap,
.bella-treatment-payments {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 9px;
    background: #fff;
}
.bella-treatment-payment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.bella-treatment-payment-note-label {
    grid-column: span 2;
}
.bella-treatment-payment-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid #ececec;
    font-size: 13px;
}
.bella-treatment-payment-item:first-of-type {
    border-top: 0;
}
.bella-debts-box {
    width: min(1100px, calc(100vw - 32px));
    max-width: 1100px;
}
.bella-debts-summary {
    margin: 14px 0;
}
.bella-debts-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fafafa;
}
.bella-debts-summary strong {
    font-size: 20px;
}
.bella-debt-client {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e5e5;
}
.bella-debt-client-head {
    justify-content: space-between;
    margin-bottom: 8px;
}
.bella-debt-client-head > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.bella-debt-table td:last-child,
.bella-debt-table th:last-child {
    font-weight: 700;
}
@media (max-width: 760px) {
    .bella-treatment-payment-grid {
        grid-template-columns: 1fr;
    }
    .bella-treatment-payment-note-label {
        grid-column: auto;
    }
    .bella-treatment-payment-item {
        flex-direction: column;
        gap: 4px;
    }
    .bella-debts-box {
        width: calc(100vw - 16px);
    }
}

/* 1.44.14 - pojednostavljen staff login i modal/fullscreen kartica klijenta. */
.bella-staff-login-shell {
    min-height: min(78vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 14px;
    font-family: Arial, sans-serif;
    color: #171717;
}
.bella-staff-login-card {
    width: min(440px, 100%);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.10);
}
.bella-staff-login-brand {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f3f3;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: 12px;
}
.bella-staff-login-card h1 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.15;
}
.bella-staff-login-lead,
.bella-staff-login-help {
    color: #5b5b5b;
    line-height: 1.5;
}
.bella-staff-login-lead {
    margin: 0 0 18px;
}
.bella-staff-login-help {
    margin: 16px 0 0;
    font-size: 13px;
}
.bella-staff-login-error {
    margin: 0 0 14px;
    padding: 11px 12px;
    border: 1px solid #e3b7b7;
    background: #fff4f4;
    color: #8a1f1f;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}
.bella-staff-login-form {
    display: grid;
    gap: 13px;
}
.bella-staff-login-form label:not(.bella-staff-remember) {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}
.bella-staff-login-form input[type="text"],
.bella-staff-login-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfcfcf;
    border-radius: 11px;
    padding: 13px 12px;
    background: #fff;
    font-size: 16px;
}
.bella-staff-remember {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
.bella-staff-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
}
.bella-staff-login-submit {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 13px 16px;
    font-size: 16px;
}

/* Kartica više nije deo tabele/kolone: otvara se preko liste. */
body.bella-client-card-open {
    overflow: hidden !important;
}
.bella-layout:not(.is-list-only) {
    display: block;
}
.bella-card-panel {
    position: fixed !important;
    top: 3vh !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%);
    width: min(1180px, 94vw);
    height: 94vh;
    max-height: 94vh !important;
    box-sizing: border-box;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    z-index: 100000;
    padding: 0 18px 24px !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,0.42), 0 20px 60px rgba(0,0,0,0.22);
}
.bella-card-panel:focus {
    outline: none;
}
.bella-card-overlay-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -18px 16px;
    padding: 11px 18px;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid #e9e9e9;
    backdrop-filter: blur(8px);
}
.bella-card-overlay-bar strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}
.bella-card-back {
    flex: 0 0 auto;
}

/* Telefon/iPad: kartica je prava fullscreen stranica preko tabele. */
@media (max-width: 1366px), (pointer: coarse) {
    .bella-card-panel {
        inset: 0 !important;
        transform: none !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 12px 24px !important;
    }
    .bella-card-overlay-bar {
        margin: 0 -12px 14px;
        padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    }
}

@media (max-width: 620px) {
    .bella-staff-login-shell {
        min-height: 70vh;
        padding: 14px 8px;
    }
    .bella-staff-login-card {
        padding: 20px 16px;
        border-radius: 16px;
    }
    .bella-staff-login-card h1 {
        font-size: 24px;
    }
    .bella-card-overlay-bar strong {
        font-size: 13px;
    }
    .bella-card-back {
        padding: 9px 11px;
        font-size: 13px;
    }
}

/* Modali iz same kartice (npr. vođena kamera) moraju ostati iznad fullscreen kartice. */
.bella-modal {
    z-index: 100100;
}


/* 1.44.15 - /kartice/ je samostalni staff radni ekran bez teme/sidebar-a. */
html:has(body.bella-cards-portal-shell),
body.bella-cards-portal-shell {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #f4f5f7;
}
body.bella-cards-portal-shell {
    overflow-x: hidden;
}
.bella-cards-portal-main {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.bella-cards-portal-main .bella-cards-app {
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
/* Zaštita od eventualnih globalnih CSS pravila teme koja bi preživela kroz wp_head. */
body.bella-cards-portal-shell .bella-cards-portal-main,
body.bella-cards-portal-shell .bella-cards-app {
    float: none !important;
    clear: both !important;
}
@media (min-width: 901px) {
    body.bella-cards-portal-shell .bella-cards-app {
        padding-left: 20px;
        padding-right: 20px;
    }
}