@keyframes ecr-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.ecr-loader-spin {
    animation: ecr-spin 1.5s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* Osnovni stilovi za red i kartice (ostaju slični, ali dodajemo precizniji flex) */
.stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

.stat-card {
    flex: 1; /* Na desktopu se šire jednako */
    min-width: 120px;
    padding: 10px;
    border-radius: 6px;
    position: relative;
    box-sizing: border-box; /* Osigurava da padding ne širi karticu van 100% */
}

/* --- TVOJE NOVE TAČKE PRELAMANJA --- */

/* 1. Na 630px prelazimo u "2 gore, 1 dole" */
@media (max-width: 780px) {
    .stat-card {
        /* Forsiramo širinu od skoro 50% za svaku karticu */
        flex: 0 0 calc(50% - 5px); 
    }
    
    /* Poslednja (treća) kartica se širi na 100% da popuni donji red */
    .stat-card:last-child {
        flex: 0 0 100%;
        margin-top: 5px;
    }
}

/* 2. Na 450px prelazimo u "sve jedna ispod druge" */
@media (max-width: 450px) {
    .stat-card {
        /* Svaka kartica zauzima punu širinu */
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Pravilo važi SAMO u rasponu od 450px do 550px */
@media (min-width: 450px) and (max-width: 550px) {
    .info-tips-icon .tooltiptext {
        width: 175px !important;
        /* Opciono: centriranje ako toolitip "beži" van ekrana */
        left: auto;
        right: 0; 
    }
}

/* Varijacije pozadina za kartice */
.stat-card.bg-main { background: var(--bg-color, #f8f9fa); }
.stat-card.bg-light { background: #f8f9fa; }
.stat-card.bg-alt { background: #eef2ff; }

/* Vrednosti (brojevi) */
.stat-card b {
    font-size: 18px;
    display: inline-block;
}

/* Trend strelice */
.val-trend {
    font-size: 13px;
    margin-left: 5px;
}

/* Datumi ispod vrednosti */
.val-date {
    font-size: 12px;
    color: #888;
}

/* Stil za Info ikonicu (spojena verzija) */
.info-tips-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    font-size: 10px;
    font-weight: bold;
    background-color: #fff;
    border-radius: 50%;
    z-index: 10;
    transition: all 0.2s ease;
    
    /* Koristimo varijablu za boju */
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
}

/* Hover efekat koji menja pozadinu u boju teme */
.info-tips-icon:hover {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Jedinice (l/s, mnm, m) */
.unit-text {
    font-size: 13px;
    font-weight: normal;
}





/* Tooltip tekst usklađen sa Chart.js stilom */
.info-tips-icon .tooltiptext {
    visibility: hidden;
    width: 200px;
    /* Chart.js koristi tamnu polu-transparentnu pozadinu */
    background-color: rgba(0, 0, 0, 0.75); 
    color: #fff;
    text-align: center;
    border-radius: 6px; /* Chart.js ima oštrije ivice nego 6px */
    padding: 6px 10px; /* Kompaktniji padding */
    position: absolute;
    z-index: 99;
    top: auto;            /* Poništavamo top */
    bottom: 25px;         /* Postavljamo ga 25px iznad donje ivice ikonice */
    right: 0;
    width: 220px;      /* Standardna širina */
    text-align: left;  /* Lepše je za duži tekst */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    
    /* Font podešavanja */
    font-size: 12px; 
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: normal;
    line-height: 1.4;
    
    /* Chart.js tooltip obično nema jaku senku */
    box-shadow: none; 
    pointer-events: none; /* Da ne ometa klikove, baš kao grafik */
}

.info-tips-icon:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Vraća se na nulu kad se pojavi */
}

/* Strelica ispod tooltipa usklađena sa novom bojom */
.info-tips-icon .tooltiptext::after {
    content: "";
    position: absolute;
    left: auto;
    right: 10px;           /* Poravnata sa desnom ivicom ikonice */
    top: 100%;            /* Postavlja strelicu tačno na donju ivicu tooltipa */
    
    /* Crtanje strelice na dole */
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Prikaz na hover */
.info-tips-icon:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}	



/* Stil kada je element u Fullscreen režimu */
#<?php echo $uid; ?>:fullscreen {
    background-color: white !important;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Pseudo-klasa za Safari */
#<?php echo $uid; ?>:-webkit-full-screen {
    background-color: white !important;
}

/* Dodatak za iOS/Safari (CSS)
/* Osigurava da u Fullscreen-u kontejner zauzme ceo ekran i dozvoli skrolovanje */
    :fullscreen, :-webkit-full-screen {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow-y: auto !important;
        background-color: white !important;
    }


/* ------------------------------------------- */

/* --- DESKTOP STIL (Tvoj original sa popravkom poravnanja) --- */
.selectors-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    background: #fdfdfd;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    align-items: flex-end; /* Ovo osigurava da su selektori i dugme u istoj liniji na dnu */
}

.selector-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.label-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.line-label,
.izvoriste-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sel-godina,
.sel_izvoriste {
    padding: 6px 10px;
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    font-size: 14px;
    min-width: 120px;
    background: #fff;
    cursor: pointer;
    height: 38px; /* Definisana visina radi lakšeg poravnanja */
	text-align: center;
}

/* Dodajemo .btn-update-nivoi u selektore */
.btn-update-uporedni, 
.btn-update-nivoi {
    /* UKLONI !important odavde da bi JS mogao da menja boju */
    background-color: var(--main-color, #070bf0); 
    border: 1px solid var(--main-color, #070bf0);
    color: #fff;
    padding: 0 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    transition: all 0.3s;
}

.btn-update-uporedni:hover,
.btn-update-nivoi:hover {
    filter: brightness(90%);
}

/* --- LOGIKA ZA UČITAVANJE (Obuhvata oba dugmeta) --- */
.btn-update-uporedni .loader-wrap,
.btn-update-nivoi .loader-wrap {
    display: none !important;
}

.btn-update-uporedni.is-loading .btn-text,
.btn-update-nivoi.is-loading .btn-text {
    display: none !important;
}

.btn-update-uporedni.is-loading .loader-wrap,
.btn-update-nivoi.is-loading .loader-wrap {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

/* Kontrola teksta - podrazumevano (Desktop) */
.btn-text-short, .loader-text-short {
    display: none;
}

.button-wrapper {
    margin-bottom: 0; /* Resetovan margin da ne podiže dugme */
}

/* --- GLAVNI KONTEJNER I NASLOV --- */
.chart-wrapper-main {
    margin-bottom: 40px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.chart-main-title {
    color: #070bf0;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

/* --- KONTEJNER ZA CANVAS I FULLSCREEN DUGME --- */
.chart-canvas-container {
    position: relative;
    height: 500px;
    width: 100%;
    margin-top: 10px;
}





/* --- MOBILNI STIL (Ispod 768px) --- */
@media (max-width: 768px) {
    .selectors-container {
        display: grid !important;
        /* "1fr 1fr" primorava browser na dve identične kolone bez obzira na sadržaj */
        grid-template-columns: 1fr 1fr !important; 
        gap: 12px;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Izvorište ide celom širinom */
    .selector-item.full-width-mobile {
        grid-column: 1 / span 2 !important;
    }

    /* Osiguraj da svi selektori i dugme zauzimaju 100% širine svoje kolone */
    .selector-item, 
    .button-wrapper,
    .sel-godina,
    .sel_izvoriste,
    .btn-update-nivoi {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Centriranje teksta unutar dugmeta da ne beži ako je kolona široka */
    .btn-update-nivoi {
        min-width: 0 !important; /* Poništava desktop min-width */
        padding: 0 5px !important;
    }

    .selector-item {
        gap: 4px;
    }

    .line-label {
        font-size: 10px;
    }

    .sel-godina {
        min-width: auto;
        width: 100%;
        font-size: 13px;
        padding: 5px;
        height: 40px; /* Malo veće za mobilni (UX) */
    }

    /* Pozicioniranje dugmeta u 2. red, 2. kolona */
    .button-wrapper {
        grid-column: auto; 
        grid-row: auto;
        align-self: flex-end !important;
    }

    .btn-update-uporedni {
        width: 100% !important;
        min-width: auto !important;
        height: 40px !important;
        padding: 0 5px !important;
        font-size: 12px;
        white-space: nowrap; /* Sprečava da tekst ode u dva reda */
    }

    /* Zamena tekstova na mobilnom (Striktno) */
    .btn-text-long, 
    .loader-text-long {
        display: none !important;
    }
    
    .btn-text-short {
        display: inline !important;
    }
    
    /* Kada se loader upali, loader-text-short mora biti inline */
    .loader-wrap .loader-text-short {
        display: inline !important;
    }
    
    .chart-wrapper-main h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
	

}



/* Univerzalni kontejner za naslov */
.title-with-info {
    text-align: center;
    margin: 15px 0 20px 0;
}

/* Stil za h3 unutar kontejnera */
.title-with-info h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    /* Koristimo varijablu za boju, fallback je tvoja plava */
    color: var(--title-color, #070bf0);
}



/* Samo okreće strelicu kada JS doda klasu */
.tooltiptext.tip-down::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent !important;
    right: 8px !important;
    left: auto !important;
}





.chart-toolbar {
	display: flex; 
	justify-content: flex-end; 
	align-items: center; 
	margin-bottom: 5px; 
	padding: 0 10px;
}

/* Zajednički stil za sva expand dugmad */
.btn-expand-chart {
    position: absolute;
    top: 10px;
    right: 22px;
	z-index: 10;
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: all 0.3s; 
    background-color: #fff;
    
    /* Koristimo varijablu, a ako je nema, fallback je plava */
    border: 1px solid var(--main-color, #070bf0);
    color: var(--main-color, #070bf0);
}

/* Hover efekat koristi istu varijablu */
.btn-expand-chart:hover {
    background-color: var(--main-color, #070bf0);
    color: #fff;
}


/* Stil za SVG unutar dugmeta */
.expand-icon-svg {
    width: 18px;
    height: 18px;
}

/* --- PRILAGOĐAVANJE ZA MOBILNI --- */
@media (max-width: 768px) {
    .btn-expand-chart {
        width: 26px; /* Manja na telefonu */
        height: 26px;
    }
    
    .expand-icon-svg {
        width: 14px; /* Manji simbol na telefonu */
        height: 14px;
    }
}








.filter-container {
    display: none;
    position: relative;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.close-filter {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 25px;
    color: #95a5a6;
    font-weight: bold;
}

.ajax-form-potrosnja,
.ajax-form {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-field-group {
    flex: 1;
    min-width: 140px;
}

.filter-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7f8c8d;
    margin-bottom: 8px;
}

.filter-input {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    font-size: 14px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-submit-ajax,
.btn-submit-ajax-potrosnja {
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    min-width: 160px;
    margin-bottom: 3px;
}

.btn-reset-ajax,
.btn-reset-ajax-potrosnja {
    font-size: 13px;
    color: #e74c3c;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 3px;
}