:root { --crm-primary: #173b63; --crm-accent: #2c7be5; }
body { min-height: 100vh; }
.crm-navbar { background: linear-gradient(120deg, var(--crm-primary), #245e96); }
.crm-module-tabs-wrap { background:#eef1f4; border-bottom:1px solid #d7dde3; }
.crm-module-tabs { border-bottom:0; padding-top:.4rem; gap:.15rem; overflow:hidden; }
.crm-module-tabs .nav-link { white-space:nowrap; color:#78838e; border:0; font-size:.88rem; padding:.55rem 1rem; }
.crm-module-tabs .nav-link:hover { color:#394b5d; background:#f7f8fa; }
.crm-module-tabs .nav-link.active { color:#173b63; background:#fff; font-size:1rem; font-weight:600; box-shadow:0 -2px 8px rgba(23,59,99,.13); }
.login-page { background: linear-gradient(135deg, #eaf2fb, #f8f9fa); min-height: 100vh; }
.login-card { border: 0; border-radius: 1rem; }
.module-card { border: 0; border-radius: 1rem; transition: transform .18s ease, box-shadow .18s ease; color: inherit; }
.module-card:hover { transform: translateY(-4px); box-shadow: 0 .8rem 2rem rgba(23,59,99,.14) !important; color: inherit; }
.module-icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: .85rem; background: #eaf2fb; color: var(--crm-accent); font-size: 1.5rem; }

/* ACCOUNTS TABLICA — ovdje se nalaze sve brze prilagodbe izgleda tablice. */
:root {
    --accounts-table-font-size: .8rem; /* Veličina fonta u cijeloj tablici. */
    --accounts-table-cell-padding-y: .38rem; /* Gornji i donji razmak ćelije. */
    --accounts-table-cell-padding-x: .45rem; /* Lijevi i desni razmak ćelije. */
    --accounts-table-zebra-color: #f7f9fc; /* Pozadina parnih (zebra) redova. */
    --accounts-table-hover-color: #dfff70; /* LIME pozadina retka pri prelasku mišem. */
    --accounts-inactive-text-color: #6c757d; /* Boja teksta neaktivnog retka. */
    --accounts-inactive-text-decoration: line-through; /* Prekriženi tekst; postavi na none za uklanjanje. */
    --accounts-inactive-opacity: .75; /* Prozirnost neaktivnog retka. */
    --accounts-global-search-font-size: 1.05rem; /* Veličina fonta glavne tražilice. */
    --accounts-modal-title-font-size: 1.45rem; /* Veličina naslova edit modala. */
    --accounts-modal-title-shadow: 0 1px 2px rgba(0,0,0,.16); /* Sjena naslova edit modala. */
    --accounts-map-pulse-color: #ff2828; /* Boja pulsara na karti. */
    --accounts-map-pulse-radius: 14px; /* Početni radijus pulsara na karti. */
}
.accounts-table { font-size: var(--accounts-table-font-size); }
.accounts-table > :not(caption) > * > * { padding: var(--accounts-table-cell-padding-y) var(--accounts-table-cell-padding-x); white-space: nowrap; }
.accounts-table.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--accounts-table-zebra-color); }
.accounts-table tbody tr:hover > * { background-color: var(--accounts-table-hover-color) !important; cursor: pointer; }
.accounts-table tbody tr.account-inactive > * {
    color: var(--accounts-inactive-text-color);
    text-decoration: var(--accounts-inactive-text-decoration);
    opacity: var(--accounts-inactive-opacity);
}
.accounts-table .accounts-column-filters input { min-width: 78px; width: 100%; font-size: .75rem; }
.accounts-global-search input { font-size: var(--accounts-global-search-font-size) !important; }
#accountModalTitle { font-size: var(--accounts-modal-title-font-size); text-shadow: var(--accounts-modal-title-shadow); }
.account-coordinates-row { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: stretch; }
.account-coordinate { flex: 0 0 calc(16.6667% - 1rem); min-width: 0; }
.account-map-button { flex: 0 0 calc(5.5556% - .35rem); min-width: 62px; }
.account-crm { flex: 0 0 calc(25% - 1rem); min-width: 0; }
.account-helpdesk { flex: 0 0 calc(12.5% - .5rem); min-width: 0; }
.account-billing { flex: 0 0 calc(8.3333% - .35rem); min-width: 0; }
.account-helpdesk .input-group { flex-wrap: nowrap; }
.account-helpdesk .input-group > .form-control { min-width: 0; }
@media (max-width: 991.98px) {
    .account-coordinates-row { flex-wrap: wrap; }
    .account-coordinate, .account-map-button, .account-crm, .account-helpdesk, .account-billing { flex: 1 1 12rem; }
}
#accountMap { height: 270px; border-radius: .75rem; }
.account-map-pulse { width: calc(var(--accounts-map-pulse-radius) * 2); height: calc(var(--accounts-map-pulse-radius) * 2); border-radius: 50%; background: var(--accounts-map-pulse-color); opacity: .55; animation: account-map-pulse 1.1s ease-out 20; }
@keyframes account-map-pulse { from { transform: scale(.25); opacity: .7; } to { transform: scale(6); opacity: 0; } }

/* eSJEDNICE — sve osnovne prilagodbe tablice i lijevog dijela modala. */
:root {
    --es-table-font-size: .8rem; /* Veličina fonta tablice. */
    --es-table-cell-padding-y: .38rem; /* Vertikalni razmak ćelije. */
    --es-table-cell-padding-x: .45rem; /* Horizontalni razmak ćelije. */
    --es-table-zebra-color: #f7f9fc; /* Zebra boja. */
    --es-table-hover-color: #dfff70; /* LIME hover boja. */
    --es-account-font-size: .79rem; /* Font noneditable account dijela modala. */
    --es-account-text-color: #5d6873; /* Boja noneditable account dijela. */
    --es-note-max-height: 31vh; /* Maksimalna visina opaske u modalu. */
    --es-location-button-bg: #198754; /* Pozadinska boja gumba Lokacija u eSjednice modalu. */
    --es-crm-button-bg: #2c7be5; /* Pozadinska boja gumba CRM u eSjednice modalu. */
    --es-hd-button-bg: #fd7e14; /* Pozadinska boja gumba HD u eSjednice modalu. */
}
.es-table{font-size:var(--es-table-font-size)}
.es-table>:not(caption)>*>*{padding:var(--es-table-cell-padding-y) var(--es-table-cell-padding-x);white-space:nowrap}
.es-table.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:var(--es-table-zebra-color)}
.es-table tbody tr:hover>*{background-color:var(--es-table-hover-color)!important;cursor:pointer}
.es-table .es-select-column{width:34px;min-width:34px;max-width:34px;padding-left:.25rem;padding-right:.25rem;text-align:center}
.es-table .es-select-column .form-check-input{float:none;margin:0;cursor:pointer}
.es-table #toggleVisibleEs{padding:.1rem .25rem;font-size:.65rem;line-height:1.2;text-transform:lowercase}
.es-table #esSelectionFilter{padding:.1rem .25rem;font-size:.7rem;line-height:1.2}
.es-table tbody tr.es-selected-row>*{color:#123f6b;font-weight:600;text-shadow:0 1px 1px rgba(23,59,99,.12)}
.es-filter{display:flex;min-width:105px}.es-filter input{min-width:70px;font-size:.75rem}.es-values{padding:.15rem .35rem}.es-values.active{color:#fff;background:var(--crm-accent)}
.es-check-list{max-height:310px;overflow:auto;text-align:left}.es-check-list label{display:block;padding:.3rem;border-bottom:1px solid #eee}.es-check-list input{margin-right:.45rem}
.es-account-panel{font-size:var(--es-account-font-size);color:var(--es-account-text-color);border-right:1px solid #dee2e6}
.es-details{display:grid;grid-template-columns:max-content 1fr;gap:.28rem .75rem;margin:0}.es-details dt{text-align:right;font-weight:600}.es-details dt::after{content:':'}.es-details dd{margin:0;min-width:0;overflow-wrap:anywhere}
#esMiniMap{height:260px;border-radius:.65rem}.es-note{height:18vh;max-height:var(--es-note-max-height);resize:vertical}
#locationButton,#modalCrm,#modalHd{color:#fff;border-color:transparent}#locationButton:hover,#modalCrm:hover,#modalHd:hover{color:#fff;filter:brightness(.9)}
#locationButton{background-color:var(--es-location-button-bg)}#modalCrm{background-color:var(--es-crm-button-bg)}#modalHd{background-color:var(--es-hd-button-bg)}
.es-account-panel>.d-flex:has(#locationButton){justify-content:flex-start!important;gap:.4rem!important}
.es-map-shell{position:fixed;inset:0;display:flex;background:#fff}.es-map-shell #esFullMap{flex:1;min-width:0}.es-map-sidebar{order:2;width:min(380px,36vw);padding:1rem;overflow:auto;box-shadow:-3px 0 12px rgba(0,0,0,.14);z-index:500}
.es-map-sidebar.is-hidden{display:none}.es-sidebar-toggle{position:absolute;z-index:600;right:1rem;top:1rem;box-shadow:0 2px 8px rgba(0,0,0,.25)}.es-sidebar-hide{margin-left:.35rem}
.es-legend-row{display:flex;align-items:center;gap:.6rem;padding:.48rem 0;border-bottom:1px solid #e9ecef}.es-legend-marker{border:0;background:transparent;color:var(--marker-color);font-size:1.65rem;line-height:1}
.es-map-icon{background:transparent;border:0}.es-map-icon span{display:block;color:var(--marker-color);font-size:2rem;filter:drop-shadow(0 1px 1px #fff)}
.es-marker-choices{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;max-height:19rem;overflow-y:auto;padding:.15rem}.es-marker-choice{cursor:pointer}.es-marker-choice input{position:absolute;opacity:0;pointer-events:none}.es-marker-choice span{display:grid;place-items:center;height:3rem;border:2px solid #dee2e6;border-radius:.5rem;color:var(--marker-preview-color);font-size:1.65rem}.es-marker-choice input:checked+span{border-color:var(--crm-accent);background:#eaf2fb;box-shadow:0 0 0 .15rem rgba(44,123,229,.18)}
@media(max-width:767.98px){.es-account-panel{border-right:0;border-bottom:1px solid #dee2e6;padding-bottom:1rem}.es-map-sidebar{width:45vw;padding:.7rem}}

/* PRODAJA — boje fonta redaka prema statusu mijenjaju se ovim CSS varijablama. */
:root {
    --sales-table-font-size: .88rem; /* Kompaktnost Prodaja tablice: povećaj ili smanji ovu vrijednost za veličinu fonta. */
    --sales-table-control-font-size: .75rem; /* Veličina fonta inputa i dropdowna u tablici. */
    --sales-table-filter-font-size: .62rem; /* Veličina fonta filtera po stupcima. */
    --sales-table-cell-padding-y: .12rem; /* Vertikalni razmak unutar ćelija; povećaj za više prostora između redova. */
    --sales-table-cell-padding-x: .18rem; /* Horizontalni razmak unutar ćelija. */
    --sales-pending-color: #b05d00; /* Boja retka sa statusom Pending. */
    --sales-give-up-color: #bebebe; /* Boja retka sa statusom Give up. */
    --sales-open-color: #c62828; /* Boja retka sa statusom Open. */
    --sales-on-hold-color: #6a1b9a; /* Boja retka sa statusom On hold. */
    --sales-compleated-color: #2e7d32; /* Boja retka sa statusom Compleated. */
    --sales-closed-color: #144617; /* Boja retka sa statusom Closed. */
    --sales-table-hover-color: #dfff70; /* Pozadina retka na hover. */
}
.sales-table{font-size:var(--sales-table-font-size)}.sales-table>:not(caption)>*>*{padding:var(--sales-table-cell-padding-y) var(--sales-table-cell-padding-x);white-space:nowrap;vertical-align:middle}.sales-table tbody tr:hover>*{background-color:var(--sales-table-hover-color)!important}.sales-table tbody tr[data-status="Pending"]>*{--bs-table-color:var(--sales-pending-color);color:var(--sales-pending-color)!important}.sales-table tbody tr[data-status="Give up"]>*{--bs-table-color:var(--sales-give-up-color);color:var(--sales-give-up-color)!important}.sales-table tbody tr[data-status="Open"]>*{--bs-table-color:var(--sales-open-color);color:var(--sales-open-color)!important}.sales-table tbody tr[data-status="On hold"]>*{--bs-table-color:var(--sales-on-hold-color);color:var(--sales-on-hold-color)!important}.sales-table tbody tr[data-status="Compleated"]>*{--bs-table-color:var(--sales-compleated-color);color:var(--sales-compleated-color)!important}.sales-table tbody tr[data-status="Closed"]>*{--bs-table-color:var(--sales-closed-color);color:var(--sales-closed-color)!important}.sales-table tbody tr[data-status] .sales-edit,.sales-table tbody tr[data-status] a:not(.btn){color:inherit!important}
.sales-table-responsive{overflow:visible}.sales-table thead{position:sticky;top:0;z-index:20}.sales-table thead th{background:#fff}.sales-table .form-control,.sales-table .form-select{font-size:var(--sales-table-control-font-size);min-width:0;padding:.1rem .18rem;line-height:1.15}.sales-table th:nth-child(2),.sales-table td:nth-child(2){width:48px;max-width:56px}.sales-table th:nth-child(3),.sales-table td:nth-child(3),.sales-table th:nth-child(4),.sales-table td:nth-child(4){width:28px;max-width:34px}.sales-table th:nth-child(5),.sales-table td:nth-child(5){min-width:170px}.sales-table th:nth-child(6),.sales-table td:nth-child(6){min-width:200px}.sales-table th:nth-child(10),.sales-table td:nth-child(10){min-width:82px}.sales-table .sales-service{min-width:195px}.sales-table .sales-date{width:76px}.sales-table .sales-amount{width:60px}.sales-table .sales-request{width:62px}.sales-table .input-group:has(.sales-request){flex-wrap:nowrap;align-items:center}.sales-request-link{display:inline-block;width:0;height:0;margin-left:3px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #0d6efd}.sales-request-link:hover{border-left-color:#084298}.sales-table .sales-note{min-width:115px;width:135px}.sales-table .sales-actions{width:1%;padding-inline:.1rem}.sales-table .sales-delete{padding:.04rem .2rem;font-size:.62rem}.sales-filter{display:flex;min-width:70px}.sales-filter input{min-width:45px;font-size:var(--sales-table-filter-font-size);padding:.08rem .16rem}.sales-values{padding:.04rem .18rem}.sales-values.active{color:#fff;background:var(--crm-accent)}.sales-account-search{max-width:520px;margin-inline:auto}.sales-account-row{cursor:pointer}.sales-note-tooltip{max-width:420px;white-space:pre-wrap;text-align:left}
