:root{ --bg:#fafaff; --text:#484848; --muted:#6b7280; --card:#fff; --border:#e5e7eb; --primarna:#5c3fb4; --primarna2:#22175e;}
*{ box-sizing:border-box; font-family: var(--app-font), sans-serif;}
body{ margin:0;
font-family: var(--app-font), sans-serif; font-weight:400;font-size:1rem;
background:var(--bg); color:var(--text); }
img{width:auto;height:auto;max-width:100%;max-height:100%}
h1, h2, h3{color:var(--primarna)}

.wrap{ max-width:1900px; margin:0 auto; padding:20px; }
*{transition:all ease 0.6s;-webkit-appearance: none;}
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.card.narrow{ max-width:420px; margin:60px auto; }
.form label{ display:block; font-size:calc((14 / 16)*1rem); margin:0 6px; }
.form .prilozi label{ padding:4px 10px;font-size:110%;cursor:pointer;transition:all ease 0.6s}
.form .prilozi label input{margin-right:10px}
input[readonly],select[readonly]{background:#eee}
.form .prilozi label:hover{ background:#eee}

form label:has(input[type=checkbox]),form label:has(input[type=radio]){padding:5px;border-radius:5px}
form label:has(input:checked){font-weight:bold;background:#eee}

form input[type=checkbox], form input[type=radio]{padding:5px}
form input[type=checkbox]:checked, form input[type=radio]:checked{background:#333}

.form .ponovi-raspored label.m10 {margin:10px}
.ponovi-raspored label {border-bottom:1px solid #ccc}
.ponovi-raspored label input {position:relative;top:2px;margin-right:10px}

a[data-obrazac]{padding:3px 10px 3px 30px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23000" d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 306.7L246.6 265.3C234.1 252.8 213.8 252.8 201.3 265.3C188.8 277.8 188.8 298.1 201.3 310.6L297.3 406.6C309.8 419.1 330.1 419.1 342.6 406.6L438.6 310.6C451.1 298.1 451.1 277.8 438.6 265.3C426.1 252.8 405.8 252.8 393.3 265.3L352 306.7L352 96zM160 384C124.7 384 96 412.7 96 448L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 448C544 412.7 515.3 384 480 384L433.1 384L376.5 440.6C345.3 471.8 294.6 471.8 263.4 440.6L206.9 384L160 384zM464 440C477.3 440 488 450.7 488 464C488 477.3 477.3 488 464 488C450.7 488 440 477.3 440 464C440 450.7 450.7 440 464 440z"/></svg>') center left no-repeat;background-size:16px}

label.oznaka{padding: 10px 15px;
    border: 1px solid #bbb;
    border-radius: 10px;
    margin: 5px;}
label.oznaka:hover{background:#eee}
label.oznaka input{margin:0 10px}

.form input, .form textarea, .form select, .ms-choice, .select{ width:100%; padding:10px 12px; margin:0; font-size:calc((14 / 16)*1rem); font-family:var(--app-font);border:1px solid var(--border); border-radius:10px; box-sizing:border-box}
.ms-choice{min-width:150px}
.ms-choice{height:40px}
.ms-choice>span{padding:7px}
	
.form input[type=checkbox],.form input[type=radio]{width:auto;display:inline-block}
.form input[type=checkbox]:checked,.form input[type=radio]:checked{background:limegreen;}
tr.form input[type=checkbox], tr.form input[type=radio]{border-radius:4px;padding:6px;display:block;margin:0 auto;}
tr.form label:has(input){display:block;padding:10px 0}
tr.form td{vertical-align:middle}
.btn, a.btn{ display:inline-block;padding:10px 14px !important; border-radius:10px; border:1px solid var(--border); background:#eef2ff; cursor:pointer;
    font-size: calc((14 / 16)*1rem);
    font-weight: 500;
	font-family:var(--app-font);
    color: var(--primarna)
	}
.pagi{text-align:center}
.pagi a.btn{padding:8px 10px !important;font-size:calc((12 / 16)*1rem)}

.p10{padding:10px}
.m10{margin:10px}


td.note{font-size:calc((14 / 16)*1rem)}
td .btn, td a.btn{padding:5px 10px !important;font-size:calc((12 / 16)*1rem)}
.btn:hover, a.btn:hover{background:var(--primarna);color:#fff}

.flash{ padding:10px 12px; border-radius:10px; margin-bottom:12px; border:1px solid var(--border); }
.flash.success{ background:#ecfdf5; border-color:#a7f3d0; }
.flash.error{ background:#fef2f2; border-color:#fecaca; }

.layout{ display:grid; grid-template-columns:260px 1fr; gap:16px; min-height:70vh; }
.layout:has(.bocni.minimiz){grid-template-columns:60px 1fr}
.grid3-prikaz{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
.grid2-prikaz{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.grid2-pregledi{display:grid; grid-template-columns:1fr 2fr; gap:0;border:1px solid #ddd;border-radius: 20px}
.grid2-pregledi div{padding:10px}

.grid2-pregledi > div:nth-child(4n + 3),
.grid2-pregledi > div:nth-child(4n + 4) {
  background:#eee;
}

.info-pregledi{max-height:50vh;overflow:auto}
.sidebar{ position:relative; color:#fff}
.sidebar .bocni{background:var(--primarna);position:fixed; padding:36px 20px; border-radius:14px;width:260px;height:calc(100% - 40px);transition:all ease 0.5s}
.sidebar .bocni.minimiz{width:65px;padding:36px 10px}
.bocni.minimiz .menu span, .sakrij{display:none}
.bocni .dolje{cursor:pointer;position:Absolute;left:10px;right:10px;text-align:center;bottom:20px;display: flex;flex-direction: row;align-items: center;justify-content:center}
.sidebar a{color:#fff}
.sidebar a.active,.sidebar a:hover{background:transparent;color:#fff}
.brand{ font-weight:700; font-size:calc((20 / 16)*1rem); margin-bottom:12px; }
.menu{ display:flex; flex-direction:column; gap:6px; }
.menu-item{ text-decoration:none; color:var(--text); padding:10px 12px; border-radius:10px; border:1px solid transparent; }
.menu-item.active, .menu-item:hover{ background:#eef2ff; border-color:#c7d2fe; }
.content{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.content.pregled_zaposlenika{background:#f1f1f1}
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:16px; }
.quick{ display:block; text-decoration:none; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; text-align:center; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border:none; padding:8px 6px; text-align:left; vertical-align:middle;}
.muted{ color:var(--muted); }
.bold{font-weight:bold}
table thead th{background:#eef2ff}


.form-inline{display:grid;align-items: end;gap:1rem;grid-template-columns:200px 1fr 100px}
.form-inline.grid-2{grid-template-columns:1fr 200px}
.form-inline.grid-4{grid-template-columns:repeat(4, 1fr)}
.form-inline.grid-5{grid-template-columns:repeat(5, 1fr)}
.form-inline a{display:block;text-align:center;max-height:40px;padding:7px 0}
.form-inline label{margin-bottom:0}
.form-inline button{max-height:40px}
.m0{margin:0}
td .btn{margin:0}
a.btn{text-decoration:none}

.submain{padding:0 20px}
.submain h2{margin-bottom:0}
.submain h2 + p{margin:0}

.redcic{display:flex;gap:16px;align-items:center}
.redcic.do-ruba{justify-content:space-between}

.f13{flex:1 1 33.333%}
.f34{flex:1 1 75%}
.f14{flex:1 1 25%}
.f12{flex:1 1 50%}
.f1{flex:1 1 100%}

.popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);display:none;align-items:center;z-index:199}
.popup-container{background:#fafafa;padding:24px;max-width:800px;margin:auto;border-radius:16px;box-shadow: 0 4px 6px rgba(0, 0, 0, .1);overflow:auto;}
.popup-container.veci{max-width:1080px}
.popup-container:has(iframe){width:100%;height:90%;max-width:1200px}

.u-frameu ~ .popup .popup-container{margin-right:10px;margin-left:10px}

.popup2, .popup3{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);display:none;align-items:center;z-index:201}
.popup3{z-index:202}
.popup-container-veci{background:#fafafa;padding:24px;max-width:1080px;margin:auto;border-radius:16px;box-shadow: 0 4px 6px rgba(0, 0, 0, .1)}
.popup-container-veci:has(iframe){width:100%;height:90%;max-width:1200px}
.u-frameu ~ .popup2 .popup-container-veci{margin-right:10px;margin-left:10px}
.u-frameu ~ .popup3 .popup-container-veci{margin-right:10px;margin-left:10px}

.brisi-obrazac{font-size:calc((10 / 16)*1rem);padding:4px 10px;cursor:pointer}
.brisi{color:#f00;font-weight:600}

iframe{width:100%;height:100%}
iframe{border:none;box-shadow:none}

.flex.dash-flex-main{align-items:start;justify-content:space-between;gap:16px}
.flex.dash-flex-main > .panel{flex:0 0 50%}
.dash-flex-main iframe{width:100%;height:100%;min-height:80vh}
.flex.tabs{justify-content:start;gap:20px}
.flex.tabs a{opacity:0.4}
.flex.tabs a:hover{opacity:0.9}

.cent, td[c], th[c]{text-align:center}

.klijent-view .kv{display:flex;flex-direction:column;border-bottom:1px solid #aaa}
.klijent-view .kv .k{font-size:80%}

.uredi-klijent{position:relative;padding-bottom:5px;cursor:pointer}	

td .uredi-klijent{display:block;width:100%;font-weight:600;color:var(--primarna)}
.uredi-klijent:not(.btn):after{display:none;position:absolute;bottom:0;left:0;width:100%;height:1px;content:'';background:linear-gradient(90deg, var(--primarna), var(--primarna2))}



/* grid prikaz rasporeda po danima */
.week-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.grid-table{width:100%;border-collapse:separate;border-spacing:0;}
.grid-table th,.grid-table td{border:1px solid var(--border);padding:8px;vertical-align:top}
.grid-table th{background:#fafafa;position:sticky;top:0}
.cell-list{display:flex;flex-direction:column;gap:4px}
.range{display:flex;justify-content:space-between;align-items:center;gap:6px}
.range.sakrij{display:none}
.range.sakrij:visible{display:flex}
.range .time{font-weight:600}
td .range{justify-content:center}
.range form{display:inline}
.cell-add{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.cell-add input{padding:6px 8px;border:1px solid var(--border);border-radius:8px}
.cell-add button{white-space:nowrap}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.row-emp{width:220px}
/* grid prikaz rasporeda po danima */

table tbody tr:nth-child(even){background:#fafafa}
table tbody tr:hover{background:#f1f1f1;border-bottom:1px solid #ccc;box-sizing:border-box}

.tablica-manja{font-size:90%}


.flex{display: flex;align-items: center;justify-content: space-between;margin-bottom:32px}
.flex > h1{margin:0}
.flex > .day-nav{margin-bottom:0}

.search-select + .select2, .search-select + .nema-search-select, .search-select-usluga + .select2{min-width:100%}

.select2-search--dropdown .select2-search__field{font-size:calc((16 / 16)*1rem)}

.edit_termin_grid{margin-top:4px; display:flex; gap:6px; align-items:center; justify-content:right;position:relative;top:-20px; right:-5px}
.edit_termin_grid{position:absolute;top:0;right:4px}
.edit_termin_grid .btn{padding:5px !important}

.rezz{padding: 20px;position: absolute;top: 100%;width: 100%;left: 0;height: auto;border: 1px solid #eee;border-radius: 20px;background: #fff;z-index: 100;display:none;}
ul.rezz-list{list-style: none;margin: 0;padding: 0}
.rezz-list li span{display:inline-block;padding:6px 12px;border: 1px solid #ddd;
    border-radius: 8px;}
.rezz-list li{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;padding:5px;}
.rezz-list li:hover{background:#f5f5f5}
.rezz-list li span:hover{font-weight:bold;background:#f5f5f5}

.dodaj-grid{grid-template-columns:200px 200px 100px 100px 150px auto 100px}

.dolje2{display:none}
.ar{text-align:right}

.klijenti-zaglavlje{display:flex;gap:10px;align-items:center;justify-content:space-between}
.klijenti-zaglavlje .client-search{min-width:360px}
.klijenti-zaglavlje .form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bok{font-size:0.9rem;border-bottom:1px solid;margin-bottom:10px;}

.copyvrijeme{gap:32px}
@media screen and (min-width:1280px){
    .bocni .bok{font-size:1.2rem;font-weight:bold;}
    .bocni.minimiz .bok{font-size:0.9rem;font-weight:400;}
}
@media screen and (max-width:1280px){
	.flex.dash-flex-main {flex-wrap:wrap}
	.flex.dash-flex-main > .panel{flex:0 0 100%}
	
	.dodaj-grid{grid-template-columns:2fr 2fr 1fr 1fr 1fr 3fr 1fr}
	
	.emp-cols{overflow-x:auto !important; overflow-y:auto !important;box-sizing:content-box;}
	
}
@media screen and (max-width:900px){
    .dodaj-grid{grid-template-columns:1fr 1fr 1fr}
    .dodaj-grid textarea{grid-column:1/4}
    .copyvrijeme{flex-direction:column;gap:0;text-align:left;align-items:start;}
    .copyvrijeme .flex{flex-wrap:wrap}
    .copyvrijeme .flex p{flex:0 0 100%}
}

@media (max-width:799px){
    .hide_smart{display:none}
    .wrap{padding:8px}
    .sidebar{position:fixed;z-index:999;bottom:4px;left:4px;display:none;bottom: 4px;left: 4px;display: none;width: 65px;height:60px;background:var(--primarna);border-radius:8px;}
    .sidebar .bocni{height:calc(100vh - 16px);height:auto}
    .layout:has(.bocni.minimiz){display:block;}
    .wrap.layout{display:block}
    .sidebar .dolje2{display:block;position:fixed;width:100%;padding:10px 0;text-align:center;cursor:pointer;z-index:99;bottom:4px;left:4px;width:65px;padding:20px}
    .sidebar .dolje{display:none}
    .sidebar .menu, .sidebar .brand{display:none}
    .sidebar .bocni.minimiz{padding:10px;height:100%;}
    .flex.dash-flex-main, .flex.tabs{display:block}
    
    .sidebar:has(.bocni.minimiz){bottom:4px;height:100%;}
    .sidebar:has(.bocni.minimiz) nav.menu, .sidebar:has(.bocni.minimiz) .brand{display:block}
    .sidebar:has(.bocni.minimiz) nav.menu a{display:block}
    .sidebar .bocni{display:block;position:Relative;width:auto;padding:10px 20px;}
    
    .kv{display:block}
    
    body{font-size:calc((16 / 16)*1rem)}
    h2{font-size:calc((20 / 16)*1rem)}
    .rezultati_pretrage{overflow:auto}
    .content{border:none;padding:5px}
    .flex.dash-flex-main > .panel{width:100%}
    .calen_search > a{display:none}
    .popup-container .redcic{display:block}
    .popup-container{max-height:96vh;overflow:auto}
    .popup-container .redcic:has(button.btn){
        display:grid;
        grid-template-columns:1fr 1fr;
        text-align:center;
    }
    .popup-container, .popup-container-veci{padding-bottom:80px;padding-top:20px;}
    .popup-container-veci.form .redcic{display:block;}
    .popup-container .form-inline.grid-2{grid-template-columns:1fr}
    .popup-container .form-inline.grid-2 .desni.ar{text-align:center}
    .popup-container-veci:has(iframe){max-width:100%;max-height:96vh;overflow:auto}
    
    .klijenti-zaglavlje{display:grid}
    .klijenti-zaglavlje .client-search{min-width:100%}
    .klijenti-zaglavlje form.form{display: grid;grid-template-columns: 1fr 1fr;}
    .klijenti-zaglavlje form.form label:first-child{grid-column:1/3}
    .flex.wrap-mob{flex-wrap:wrap}
    
    .popup .form label, .popup2 .form label, .popup3 .form label{font-size:calc((16 / 16)*1rem)}
    .toolbar form,.infici{flex-wrap:wrap}
}


/*sretan rođendan animacija*/
#countdown {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  transition: 1s;
  font-size: 0vw;
  opacity: 50%;
  color: #fff; 
}


.popup-rodjendan{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);display:none;align-items:center;z-index:199;align-items:center;justify-content:center;flex-direction:column;}
.popup-rodjendan p{padding-top:16px;color:transparent;}

p.faid{color:#fff;transition:color ease 1s}
.birthday-gift {
  position: relative;
}

.birthday-gift:before {
  content:"";
  position: absolute;
  width: 170px;
  height:20px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.4);
  top:90px;
  left:-10px;
}

input#click {
  display: none;
}

.gift {
  position: relative;
  width: 150px;
  height: 100px;
  background-color: #e9c46a;
}

.gift:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 100px;
  background-color: #e76f51;
  left:62px;
}

.gift:after {
  content:"";
  position: absolute;
  box-shadow: inset 0 10px rgba(0,0,0,0.3);
  width: 150px;
  height: 100px;
}

.click {
  position: absolute;
  background-color: #e9c46a;
  width: 170px;
  height: 40px;
  top:-40px;
  left:-10px;
  transform-origin: bottom left;
  transition: .3s;
  cursor: pointer;
}

.click:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 40px;
  background-color: #e76f51;
  left:69px;
}

.click:after {
  content:"";
  position: absolute;
  width: 5px;
  height: 0;
  border-bottom: 30px solid #e76f51;
  border-top: 30px solid #e76f51;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  transform: rotate(-90deg);
  left:65px;
  top:-47px;
}

#click:checked + .click {
  transform: rotate(-110deg) scaleX(0.85);
}

.wishes {
  position: absolute;
  transition: .5s;
  color: #fff;
  font-size: 10px;
  font-weight:600;
  text-align: center;
  z-index:-1;
  left:5px;
  top:-20px;
}
#click:checked + .click + .wishes{
  font-size:50px;
  top:-80px;
}

#click:checked ~ .wishes {
  transform: translateY(-100px);
}

#click:checked ~ .sparkles {
  display: block;
}



.sparkles {
  position: absolute;
  display: none;
  top:-15px;
  z-index:-2;
  left:40px;
}

.spark1, .spark2, .spark3, .spark4, .spark5, .spark6 {
  position: absolute;
  background-color: #fee440;
  border-radius:50%;
  top:-9px;
  z-index:-1;
}

.spark1 {
  width: 8px;
  height:8px;
  left:30px;
  top:-9px;
  animation: fire 0.9s ease-in-out infinite, color 0.4s linear infinite;
}

.spark1:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:8px;
  left:11px;
  background-color: #fee440;
  border-radius:50%;
}

.spark2 {
  width: 9px;
  height:9px;
  left:33px;
  top:-5px;
  animation: fire2 0.28s ease-in-out infinite, color 0.4s linear infinite;
}

.spark2:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:12px;
  left:3px;
  background-color: #fee440;
  border-radius:50%;
}

.spark3 {
  width: 8.5px;
  height:8.5px;
  left:33px;
  top:-5px;
  animation: fire3 0.36s ease-in-out infinite, color2 0.4s linear infinite;
}

.spark3:before {
  content:"";
  position: absolute;
  width:5px;
  height:5px;
  top:12px;
  left:-1px;
  background-color: #fee440;
  border-radius:50%;
}

.spark4 {
  width: 7px;
  height:7px;
  left:27px;
  top:-5px;
  animation: fire2 0.24s ease-in-out infinite, color2 0.2s linear infinite;
}

.spark5 {
  width: 7px;
  height:7px;
  left:29px;
  top:-5px;
  animation: fire3 0.45s ease-in-out infinite, color 0.2s linear infinite;
}

.spark6 {
  width: 6px;
  height:6px;
  left:29px;
  top:-5px;
  animation: fire 0.35s ease-in-out infinite, color2 0.2s linear infinite;
}
  
@keyframes fire3 {
  100% { transform:translateX(20px) translateY(-93px); 
         opacity: 0.3; }
}

@keyframes fire2 {
  100% { transform:translateX(-5px) translateY(-90px); 
         opacity: 0.3; }
}

@keyframes fire {
  100% { transform:translateX(-25px) translateY(-95px); 
         opacity: 0.3; }
}

@keyframes color {
  from {background-color: #d00000;}
  to {background-color: #0081a7;}
}

@keyframes color2 {
  from {background-color: #8cff00;}
  to {background-color: #1d2d44;}
}

/*sretan rođendan kraj*/



/*/ispravak za select2 skok na vrh koji se dogodi ako je forma odscrollana dolje/*/
.select2-container, .select2-dropdown, .select2-search, .select2-results {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}