/* ============================================================
   lookup.css — stilovi za generičke lookup komponente
   ============================================================ */

/* ── Grid ───────────────────────────────────────────────────── */
.lookup-grid {
    border: none !important;
}

/* All DxGrid instances fill container width */
.dxbl-grid {
    width: 100%;
}

/* Name/Naziv columns should be wider — set via CSS since DxGridDataColumn has no MinWidth */
.dxbl-grid td,
.dxbl-grid th {
    min-width: 0;
}
.dxbl-grid .dxbl-grid-table {
    table-layout: auto;
}

.grid-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

/* DxGrid command column — consistent button spacing */
/* min-height prevents flex container collapsing in filter row when ClearFilterButton is hidden */
.dxbl-grid .dxbl-grid-command-cell {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
    flex-wrap: nowrap;
    min-height: 36px;
}

/* Grid row buttons — uniform outline style (matches grid-link-btn) */
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn {
    min-width: 64px;
    justify-content: center;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 2px var(--sp-2);
    box-shadow: none !important;
    transition: background var(--transition);
}
.dxbl-grid .dxbl-grid-command-cell .dxbl-btn:hover {
    background: var(--content-bg) !important;
}

/* Grid actions wrapper (LookupGrid etc.) — same treatment */
.grid-actions .dxbl-btn {
    min-width: 64px;
    justify-content: center;
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 2px var(--sp-2);
    box-shadow: none !important;
    transition: background var(--transition);
}
.grid-actions .dxbl-btn:hover {
    background: var(--content-bg) !important;
}

/* ── Loading / Error states ─────────────────────────────────── */
.loading-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: var(--sp-3);
    color: var(--text-secondary);
}

.error-text {
    color: var(--danger);
    font-size: var(--fs-md);
}

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    flex-shrink: 0;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border: 3px solid var(--surface-border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.form-error {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px var(--sp-5);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: var(--fs-md);
    border-top: 1px solid var(--danger-border);
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--surface-border);
}

/* ── Badge aktivno/neaktivno u gridu ────────────────────────── */
.badge-aktivno   { background: var(--success-bg); color: var(--success); }
.badge-neaktivno { background: var(--neutral-bg); color: var(--text-secondary); }

/* ── Lookup Table ───────────────────────────────────────────── */
.lookup-table-wrapper {
    overflow-x: auto;
}

.lookup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

.lookup-table th {
    background: var(--content-bg);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--surface-border);
    white-space: nowrap;
}

.lookup-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-primary);
    vertical-align: middle;
}

.lookup-table tbody tr:hover {
    background: var(--hover-row);
}

.lookup-table tbody tr:last-child td {
    border-bottom: none;
}

.col-actions {
    width: 130px;
    text-align: right;
}

.empty-row {
    text-align: center;
    color: var(--text-muted);
    padding: 48px 14px !important;
}

/* ── Detail Row (expand panel inside DxGrid) ─────────────── */

/* Highlight expanded data rows via CustomizeElement — grid-row-expanded class added dynamically */
.grid-row-expanded > td {
    background-color: #e8eaed !important;
    border-bottom-color: var(--border-light) !important;
    font-weight: 600;
}

.detail-row {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-md);
}

/* Tab header bar inside detail rows */
.detail-row .dxbl-tabs-tablist {
    background-color: #e8eaed;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* ── Detail grid (key-value pairs) ── */
.detail-grid {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: var(--sp-2) 0;
    font-size: var(--fs-base);
}

.detail-grid .dg-label,
.detail-grid .dg-value {
    padding: 5px var(--sp-3);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
}

.detail-grid .dg-label {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.detail-grid .dg-value {
    color: var(--text-primary);
}

.detail-grid .dg-label:last-of-type,
.detail-grid .dg-value:last-of-type {
    border-bottom: none;
}

/* ── Detail Section Cards (enterprise pattern, ui-standardi §0.8) ── */
.detail-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4, 16px);
    margin: var(--sp-2) 0;
}
.detail-section-grid .detail-card-full {
    grid-column: 1 / -1;
}
@media (max-width: 900px) {
    .detail-section-grid {
        grid-template-columns: 1fr;
    }
}

.detail-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.detail-card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.detail-card-header i {
    color: var(--brand-primary);
    font-size: var(--fs-md);
}

.detail-card-body {
    padding: var(--sp-2) var(--sp-3);
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    column-gap: var(--sp-3);
    row-gap: 6px;
    font-size: var(--fs-base);
}

.detail-card-body .dc-label {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.detail-card-body .dc-value {
    color: var(--text-primary);
    word-break: break-word;
}

.detail-card-body .dc-value-muted {
    color: var(--text-muted, #6c757d);
    font-style: italic;
}

.detail-card-body .dc-full {
    grid-column: 1 / -1;
}

.detail-card-body .dc-chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1, 4px);
    margin-top: var(--sp-1, 4px);
}

.detail-card-body .dc-prose {
    grid-column: 1 / -1;
    color: var(--text-primary);
    line-height: 1.55;
    white-space: pre-wrap;
}

.detail-link, .sub-table .detail-link {
    color: var(--info);
    text-decoration: underline;
    cursor: pointer;
}
.detail-link:hover { color: var(--brand-primary); }

/* Legacy support */
.detail-row .detail-table {
    border: none;
    border-collapse: collapse;
}

.detail-row .detail-label {
    padding: 2px var(--sp-4) 2px 0;
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: top;
}

.detail-row .detail-value {
    padding: 2px 0;
}

.detail-row .detail-muted {
    color: var(--text-muted);
}

/* ── Sub-table (list data in cards) ── */
.detail-row .sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: var(--sp-2) 0;
}

.detail-row .sub-table th {
    padding: var(--sp-1) var(--sp-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-row .sub-table td {
    padding: var(--sp-1) var(--sp-3);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
}

/* ── Panel components (napomene, prilozi, status history) ──── */
.panel-section {
    margin-top: var(--sp-3);
}

.panel-title {
    font-weight: 600;
    margin-bottom: var(--sp-2);
}

.panel-input-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.panel-input-row input {
    flex: 1;
    font-size: var(--fs-md);
}

.timeline-input,
.napomene-input {
    flex: 1;
}

.timeline-tip-combo {
    min-width: 110px;
    max-width: 140px;
    flex: 0 0 auto;
}

.panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-height: 250px;
    overflow-y: auto;
}

.panel-empty {
    color: var(--text-muted);
    font-size: var(--fs-md);
}

/* Napomena item */
.napomena-item {
    padding: 6px 10px;
    background: var(--hover-row);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
}

.napomena-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.napomena-author {
    font-weight: 500;
    color: var(--text-primary);
}

.napomena-date {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.napomena-text {
    color: var(--text-primary);
}

/* Prilog item */
.prilog-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 5px 8px;
    background: var(--hover-row);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
}

.prilog-icon {
    font-size: var(--fs-xl);
    flex-shrink: 0;
}

.prilog-thumbnail {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.prilog-thumbnail:hover {
    opacity: 0.8;
}

.prilog-thumbnail--sm {
    width: 32px;
    height: 32px;
}

.prilog-info {
    flex: 1;
    min-width: 0;
}

.prilog-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prilog-meta {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.prilog-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.prilog-actions .dxbl-btn {
    min-width: 64px;
    justify-content: center;
}

/* S267 — klijent-side pager za PriloziPanel kad lista preraste 15 redaka. */
.prilozi-pager {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    justify-content: center;
    margin-top: var(--sp-3);
    padding: var(--sp-2) 0;
}
.prilozi-pager-info {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    min-width: 200px;
    text-align: center;
}

.prilog-expand-row {
    width: 100%;
    padding: 6px 0 0 28px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.prilog-download {
    color: var(--info);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

/* Lightbox */
.lightbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 80vh;
    overflow: auto;
}

.lightbox-image {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Status history item */
.history-item {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    padding: 3px 0;
    border-bottom: 1px solid var(--border-light);
}

.history-date {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 110px;
}

.history-arrow {
    color: var(--text-muted);
    margin: 0 2px;
    font-size: var(--fs-sm);
}

.history-user {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* Event item (RadniNalog dogadjaji) */
.event-item {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    padding: 3px 0;
    border-bottom: 1px solid var(--border-light);
}

.event-date {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 110px;
}

.event-title {
    font-weight: 500;
}

.event-user {
    color: var(--text-secondary);
}

/* ── DxGrid Detail Row Expand Button ──────────────────────── */
.dxbl-grid .dxbl-grid-expand-button {
    color: var(--text-muted) !important;
    opacity: 0.7;
}
.dxbl-grid .dxbl-grid-expand-button:hover {
    color: var(--text-secondary) !important;
    opacity: 1;
}
/* Expand column header in detail-row grids — visually signals expand-all on click */
.grid-with-details thead tr th:first-child {
    cursor: pointer;
    user-select: none;
}
.grid-with-details thead tr th:first-child::after {
    content: "\F282"; /* bi-chevron-expand */
    font-family: "bootstrap-icons";
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    text-align: center;
    line-height: 1;
    margin-top: 2px;
    opacity: 0.6;
}

/* ── Dashboard Period Filter ───────────────────────────────── */
.period-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
/* Period gumbi koriste default veličinu (kao Osvježi i ostali action gumbi izvan grida).
   Min-width drži ujednačen layout kad se labele razlikuju (Danas / Tjedan / 3 mj. itd.). */
.period-btn.dxbl-btn  { min-width: 88px; }
.period-date-input    { width: 140px;    }

/* Aktivni period: bold tekst + zeleni indikator donji (kontrast na Primary zelenu). */
.period-btn-active.dxbl-btn {
    font-weight: 700;
    position: relative;
}
.period-btn-active.dxbl-btn::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -5px;
    height: 3px;
    background: var(--brand-primary);
    border-radius: 2px;
    pointer-events: none;
}

/* ── Usluga forma editor ─────────────────────────────────── */
.usluga-forma .multi-select-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* ============================================================
   Responsive — Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Loading/error states smaller padding */
    .loading-state,
    .error-state {
        padding: var(--sp-6);
    }

    /* DxGrid horizontal scroll on mobile */
    .dxbl-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* DxPopup full-width on mobile */
    .dxbl-popup .dxbl-popup-content {
        max-width: 95vw !important;
        width: 95vw !important;
    }
}

/* =====================================================================
   K3 — Komunikacije UI (sticky link u zahtjev/RN detail header-u +
   Interne bilješke panel + Aktivnost chronicle).
   Vidi docs/kb/_operativno/komunikacije-priprema.md §1.2 + §1.5.
   ===================================================================== */

/* ── Detail action link (enterprise CTA stil — koristi se u footer strip-u
       Tab 0 inline forme zahtjev/RN/zapisnik detail row-ova; Komunikacija s
       klijentom + Kalendar + Zapisnici + Dokumenti + Planiranje itd.).
       Razlika u odnosu na .detail-link (plavi underline) — .detail-link je za
       table-cell linkove unutar grida (BrojZahtjeva, BrojNaloga); ovo je za
       CTA akcije iz inline forme. ── */
.detail-action-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-3);
    background: linear-gradient(to right, rgba(27, 67, 50, 0.06), transparent);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    text-decoration: none;
    font-size: var(--fs-base);
    font-weight: 500;
    transition: background 0.15s ease, transform 0.15s ease;
}
.detail-action-link:hover {
    background: linear-gradient(to right, rgba(27, 67, 50, 0.12), rgba(27, 67, 50, 0.02));
    color: var(--brand-primary);
    text-decoration: none;
    transform: translateX(2px);
}
.detail-action-link i {
    font-size: var(--fs-md);
}
.detail-action-link-count {
    color: var(--text-secondary);
    font-weight: 600;
    margin-left: 4px;
}
.detail-action-link-arrow {
    margin-left: auto;
    opacity: 0.7;
}

/* Flex wrap container za vise detail-action-link-ova na dnu Tab 0 (i drugih tabova). */
.detail-actions-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-light, #f0f0f0);
}

/* ── Interne bilješke panel (Tab "Interne bilješke" — diskretan sivi stil) ── */
.interna-bilj-panel {
    margin-top: var(--sp-2);
}

.interna-bilj-form {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--text-secondary, #6c757d);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.interna-bilj-form-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: var(--sp-2);
}
.interna-bilj-form-header i {
    font-size: var(--fs-md);
}
.interna-bilj-textarea {
    width: 100%;
    margin-bottom: var(--sp-2);
}
.interna-bilj-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.interna-bilj-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.interna-bilj-item {
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #f0f0f0);
    border-left: 3px solid var(--text-secondary, #6c757d);
    border-radius: var(--radius-sm);
}
.interna-bilj-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: 4px;
}
.interna-bilj-autor {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-base);
}
.interna-bilj-date {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-family: var(--font-mono, ui-monospace, monospace);
}
.interna-bilj-text {
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.interna-bilj-load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-3);
}

/* ── Aktivnost chronicle (Tab "Aktivnost" — read-only audit trace, monospace timestamp) ── */
.aktivnost-panel {
    margin-top: var(--sp-2);
}

.aktivnost-chronicle {
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.aktivnost-row {
    display: grid;
    grid-template-columns: 140px 100px 160px 1fr;
    gap: var(--sp-2);
    align-items: baseline;
    padding: 6px var(--sp-3);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    font-size: var(--fs-base);
}
.aktivnost-row:last-child { border-bottom: none; }
.aktivnost-row:nth-child(even) { background: var(--bg-secondary, #fafbfc); }

.aktivnost-time {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.aktivnost-tip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: var(--fs-sm);
}
.aktivnost-tip i {
    font-size: var(--fs-md);
    color: var(--brand-primary);
}
.aktivnost-row-status .aktivnost-tip i { color: var(--info, #0d6efd); }
.aktivnost-row-system .aktivnost-tip i { color: var(--text-muted); }

.aktivnost-autor {
    color: var(--text-primary);
    font-weight: 500;
}
.aktivnost-tekst {
    color: var(--text-primary);
    word-break: break-word;
}
.aktivnost-status-old {
    color: var(--text-muted);
}
.aktivnost-status-arrow {
    color: var(--text-muted);
    margin: 0 4px;
    font-size: var(--fs-sm);
}
.aktivnost-status-new {
    color: var(--brand-primary);
    font-weight: 600;
}
.aktivnost-tekst-nota {
    color: var(--text-muted);
    font-style: italic;
    margin-left: var(--sp-2);
}
.aktivnost-load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-3);
}

@media (max-width: 768px) {
    .aktivnost-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: var(--sp-2) var(--sp-3);
    }
    .interna-bilj-item-header {
        flex-direction: column;
        gap: 2px;
    }
}

/* =====================================================================
   K2 — /komunikacije top-level modul (PRIMARY entry za razgovor s klijentom).
   Layout: 30/70 split + thread list + messaging-style razgovor + reply bar.
   Vidi docs/kb/_operativno/komunikacije-priprema.md §1.3 + §K2.
   ===================================================================== */

/* ── Layout: thread list lijevo (30%), razgovor desno (70%) ── */
.komunikacije-layout {
    display: grid;
    grid-template-columns: minmax(280px, 30%) 1fr;
    gap: var(--sp-3);
    height: calc(100vh - 180px);   /* page header + sidebar context */
    min-height: 500px;
    margin-top: var(--sp-2);
}

/* ── Thread list (lijevi panel) ── */
.komunikacije-thread-list {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.komunikacije-filter-strip {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    background: var(--bg-secondary, #fafbfc);
}
.komunikacije-filter-strip .kf-klijent { flex: 2; min-width: 0; }
.komunikacije-filter-strip .kf-search  { flex: 3; min-width: 0; }

.komunikacije-thread-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: var(--fs-sm);
}
.komunikacije-thread-count {
    font-size: var(--fs-base);
    color: var(--brand-primary);
}

.komunikacije-thread-list-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.thread-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    border-left: 3px solid transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-left-color 0.15s ease;
    font-family: inherit;
}
.thread-list-item:hover {
    background: var(--bg-secondary, #fafbfc);
}
.thread-list-item-active {
    background: rgba(27, 67, 50, 0.06);
    border-left-color: var(--brand-primary);
}
.thread-list-item-active:hover {
    background: rgba(27, 67, 50, 0.10);
}

.thread-list-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
}
.thread-klijent {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.thread-datum {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-family: var(--font-mono, ui-monospace, monospace);
    flex-shrink: 0;
}

.thread-list-item-mid {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    overflow: hidden;
}
.thread-broj {
    color: var(--brand-primary);
    font-size: var(--fs-sm);
    flex-shrink: 0;
}
.thread-naslov {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-list-item-bot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
}
.thread-snippet {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.thread-count {
    background: var(--bg-secondary, #fafbfc);
    color: var(--text-secondary);
    border: 1px solid var(--border-light, #f0f0f0);
    border-radius: 10px;
    padding: 0 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    flex-shrink: 0;
}

/* ── Razgovor (desni panel) ── */
.komunikacije-razgovor {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.komunikacije-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    text-align: center;
    padding: var(--sp-4);
}
.komunikacije-empty-icon {
    font-size: 64px;
    color: var(--text-muted);
    opacity: 0.3;
}
.komunikacije-empty-state h3 {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 600;
}
.komunikacije-empty-state p {
    margin: 0;
    color: var(--text-muted);
}

/* ── RazgovorPanel: 3-row grid (header / thread scrollable / sticky reply) ── */
.razgovor-panel {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 0;
}

.razgovor-header {
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-secondary, #fafbfc);
    border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.razgovor-header-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.razgovor-klijent-naziv {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--fs-md);
}
.razgovor-zahtjev-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1, 4px);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
}
.razgovor-zahtjev-link:hover {
    color: var(--brand-primary);
    text-decoration: none;
}
.razgovor-zahtjev-link code {
    color: var(--brand-primary);
    background: transparent;
    padding: 0;
}
.razgovor-zahtjev-naslov {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
}

.razgovor-thread {
    padding: var(--sp-3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    background: var(--bg-secondary, #fafbfc);
}

.msg-load-more {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-2);
}

/* ── Messaging bubble layout ── */
.msg-row {
    display: flex;
    width: 100%;
}
.msg-row-tim    { justify-content: flex-start; }
.msg-row-klijent { justify-content: flex-end; }

.msg-bubble {
    max-width: 72%;
    border-radius: 10px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-light, #f0f0f0);
    background: var(--bg-card, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.msg-bubble-tim {
    background: rgba(27, 67, 50, 0.06);
    border-color: rgba(27, 67, 50, 0.15);
    border-bottom-left-radius: 2px;
}
.msg-bubble-klijent {
    background: var(--bg-card, #fff);
    border-color: var(--border-color);
    border-bottom-right-radius: 2px;
}

.msg-bubble-header {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}
.msg-author {
    font-weight: 600;
    color: var(--text-primary);
}
.msg-channel {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.msg-channel-email {
    background: rgba(13, 110, 253, 0.10);
    color: #0d6efd;
}
.msg-channel-sms {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}
.msg-timestamp {
    margin-left: auto;
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--fs-sm);
}
.msg-email-subject {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    padding-bottom: 2px;
    border-bottom: 1px dashed var(--border-light, #f0f0f0);
}
.msg-text {
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.msg-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    padding: 2px 6px;
    background: var(--bg-secondary, #fafbfc);
    border-radius: 4px;
    align-self: flex-start;
}
.msg-email-status {
    font-size: var(--fs-sm);
    margin-top: 2px;
}
.msg-email-status.status-ok      { color: #198754; }
.msg-email-status.status-error   { color: #dc3545; }
.msg-email-status.status-pending { color: #fd7e14; }
.msg-email-status.status-draft   { color: #6c757d; }
.msg-email-status.status-info    { color: var(--text-secondary); }

/* ── K5 (S301) read receipts — diskretan indikator ispod poruke ── */
.msg-read-receipt {
    margin-top: var(--sp-1);
    font-size: 0.72rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    line-height: 1.2;
}
.msg-read-receipt i {
    font-size: 0.85rem;
}
.msg-read-receipt-seen {
    color: #0d6efd;       /* plava ✓✓ — sigurno pročitano */
}
.msg-read-receipt-pending {
    color: #6c757d;       /* siva ✓ — poslano ali još ne otvoreno */
    opacity: 0.7;
}

/* ── Sidebar Komunikacije badge (unread count) ── */
.sidebar-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: auto;
    background: #dc3545;
    color: #fff;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Reply bar (sticky bottom, žuti accent "Piši klijentu") ── */
.msg-reply-bar {
    padding: var(--sp-3);
    border-top: 2px solid #ffc107;
    background: rgba(255, 193, 7, 0.05);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.msg-reply-warning {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: #856404;
    font-size: var(--fs-sm);
    font-weight: 500;
}
.msg-reply-warning i {
    color: #ffc107;
}
.msg-reply-textarea {
    width: 100%;
}
.msg-reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.msg-reply-checkbox {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}
.msg-reply-send.dxbl-btn {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
    font-weight: 600;
}
.msg-reply-send.dxbl-btn:hover {
    background: #ffca2c !important;
    border-color: #ffca2c !important;
}

/* ── Mobile fallback: single-column stack ── */
@media (max-width: 900px) {
    .komunikacije-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .komunikacije-thread-list {
        max-height: 50vh;
    }
    .razgovor-thread {
        max-height: 50vh;
    }
    .msg-bubble {
        max-width: 90%;
    }
}