@charset "utf-8";
/* CSS Document */
@media (max-width: 1123px) {
	.toggleMenu{display:block;}
	main{padding-left:0;}
	.formData{width:80%;}
}
@media (max-width: 767px) {
}
@media (max-width: 649px) {
}

@media (max-width: 767px) {
	.protokolToolsCell{min-width:150px;}
	.protokolViberModal{width:calc(100% - 20px); max-width:none; max-height:calc(100vh - 20px);}
	.protokolViberModalHeader{padding:16px;}
	.protokolViberModalHeader h2{font-size:18px; line-height:24px;}
	.protokolViberModalBody{padding:16px;}
	.protokolViberModalFooter{padding:14px 16px; flex-direction:column-reverse;}
	.protokolViberModalFooter button{width:100%;}
	.protokolViberPoruka{min-height:190px;}
}

/* ======================================================================
   ZOOHIGIJENA ADMIN UI/UX — stabilizovano responsive ponašanje
   ====================================================================== */
@media (max-width:1123px){
	#whole_page_container{overflow:hidden;}
	#navigation{
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		margin-left:0 !important;
		transform:translateX(0);
		z-index:130;
	}
	#navigation.hide{transform:translateX(-102%);}
	#mainContent{width:100%; min-width:0;}
	#mainContent .topBar{height:64px;}
	.navigationOpen{top:12px; left:14px;}
	.topBarTitle,.topBar .pageTitle,.topBar .moduleTitle{left:66px; top:17px; font-size:16px;}
	.logOut{top:15px; right:14px;}
	#mainContent>.container{padding:22px 20px 36px;}
	#mainContent .formData{width:100%;}
	#mainContent .dashboardHolder{flex-wrap:wrap;}
	#mainContent .dashboardHolder>div{width:calc(50% - 12px);}
}

@media (max-width:767px){
	#mainContent>.container{padding:18px 14px 30px;}
	#mainContent h1{font-size:24px; line-height:31px; margin-bottom:20px;}
	.topBarTitle,.topBar .pageTitle,.topBar .moduleTitle{display:none;}
	.logOut{padding:8px 10px; font-size:0;}
	.logOut i{margin:0; font-size:14px;}
	#mainContent .protokolH1{display:block;}
	#mainContent .dodajProtokol{float:none; display:block; width:100%; margin:0 0 10px;}
	#mainContent .printProtokol{float:none; display:inline-flex; align-items:center; justify-content:center; margin:0 6px 10px 0;}
	#mainContent .iconHolder{display:block; margin:8px 0 0;}
	#mainContent .protokolSearch{margin-left:0;}
	#mainContent .searchCloseLink{margin-left:14px;}
	#mainContent .searchBox{padding:15px; margin-top:14px;}
	#mainContent .formGroup>label,
	#mainContent .formGroup.small>label{
		float:none;
		width:100%;
		height:auto;
		min-height:36px;
		padding:10px 12px;
	}
	#mainContent .formInput,
	#mainContent .formSelect,
	#mainContent .formArea,
	#mainContent .formGroup.small>.formInput,
	#mainContent .formGroup.small>.formSelect,
	#mainContent .formGroup.small>.formArea{
		float:none;
		width:100%;
		border-left:0;
		border-top:1px solid var(--zh-border);
	}
	#mainContent .formData button{float:none; width:100%; margin:18px 0 0;}
	#mainContent .formData button:first-of-type{margin-left:0;}
	#mainContent .dashboardHolder{display:block; margin-top:24px;}
	#mainContent .dashboardHolder>div{width:100%; min-height:0; margin-bottom:16px;}
	#mainContent .card{width:100%;}
	#mainContent .labelFileButtonProductImg{width:100%; height:auto; aspect-ratio:1/1;}
	.modalHolder,.wf-modal-holder{
		top:15px;
		left:10px !important;
		right:10px;
		width:auto !important;
		max-width:none;
		max-height:calc(100vh - 30px);
		overflow:auto;
	}
	.modalContent,.wf-modal-content{padding:22px 18px;}
}

@media (max-width:480px){
	#navigation{width:min(286px,86vw); min-width:min(286px,86vw);}
	.user{margin-left:10px; margin-right:10px;}
	.navigationLinks{padding-left:8px; padding-right:8px;}
}

/* Protokoli: kartični raspored tek kada tabela više nema dovoljno prostora */
@media (max-width:1399px){
	#mainContent .protokolTableHeader{flex-wrap:wrap;}
	#mainContent .protokolOverviewTable,
	#mainContent .protokolOverviewTable>tbody{
		display:block;
		width:100%;
		max-width:100%;
	}
	#mainContent .protokolOverviewTable>thead{display:none;}
	#mainContent .protokolOverviewTable>tbody>tr{
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
		width:100%;
		max-width:100%;
		margin:12px 0 0;
		border:1px solid #dfe5ed;
		border-left:4px solid transparent;
		border-radius:10px;
		background:#fff;
		overflow:visible;
		box-sizing:border-box;
	}
	#mainContent .protokolOverviewTable>tbody>tr.is-urgent{border-left-color:#ef5d55;}
	#mainContent .protokolOverviewTable>tbody>tr:hover{transform:none;}
	#mainContent .protokolOverviewTable>tbody>tr>td,
	#mainContent .protokolOverviewTable>tbody>tr>td:first-child,
	#mainContent .protokolOverviewTable>tbody>tr>td:last-child{
		display:block;
		width:auto;
		min-width:0;
		padding:14px 16px;
		border:0;
		border-right:1px solid #edf0f4;
		border-bottom:1px solid #edf0f4;
		border-radius:0;
		background:#fff;
		box-sizing:border-box;
	}
	#mainContent .protokolOverviewTable>tbody>tr>td:nth-child(odd){border-right:0;}
	#mainContent .protokolOverviewTable>tbody>tr>td::before{
		content:attr(data-label);
		display:block;
		margin:0 0 9px;
		color:#7e899a;
		font-size:9px;
		line-height:12px;
		font-weight:800;
		letter-spacing:.5px;
		text-transform:uppercase;
	}
	#mainContent .protokolOverviewTable>tbody>tr>.protokolMetaCell{
		grid-column:1/-1;
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:20px;
		border-right:0;
		background:linear-gradient(180deg,#f8fafc 0%,#f4f7fa 100%);
	}
	#mainContent .protokolOverviewTable>tbody>tr>.protokolMetaCell::before{display:none;}
	#mainContent .protokolMetaTop{justify-content:flex-start; margin:0;}
	#mainContent .protokolDateGroup{flex-direction:row; align-items:center; gap:16px;}
	#mainContent .protokolOverviewTable>tbody>tr>.protokolToolsCell{
		grid-column:1/-1;
		border-right:0;
		border-bottom:0;
		background:#fafbfc;
	}
	#mainContent .protokolOverviewTable .protokolToolsCell::before{text-align:center;}
	#mainContent .protokolToolsGrid{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
	#mainContent .protokolOverviewTable .protokolActionButton{width:36px; height:36px;}
	#mainContent .protokolOverviewTable .protokolUNalozimaBoxStyling.open{
		position:static;
		width:auto;
		max-width:100%;
		margin-top:9px;
		box-shadow:0 6px 18px rgba(36,52,77,.1);
	}
}

@media (max-width:900px){
	#mainContent .protokolTableHeader{align-items:flex-start;}
	#mainContent .protokolTableSummary{flex-wrap:wrap;}
	#mainContent .protokolTableLegend{width:100%; padding-top:2px;}
}

@media (max-width:767px){
	#mainContent .protokolTablePanel{
		margin-top:8px;
		border-radius:10px;
	}
	#mainContent .protokolTableHeader{
		display:block;
		min-height:0;
		padding:15px;
	}
	#mainContent .protokolTableSummary{display:grid; grid-template-columns:auto 1fr; gap:7px 10px;}
	#mainContent .protokolTableEyebrow{grid-column:1/-1; padding:0 0 9px; border-right:0; border-bottom:1px solid #e2e8ef;}
	#mainContent .protokolTableCount{align-self:center;}
	#mainContent .protokolTableRange{align-self:center; text-align:right;}
	#mainContent .protokolActiveFilter{grid-column:1/-1; justify-self:start;}
	#mainContent .protokolTableLegend{margin-top:12px;}
	#mainContent .protokolTableViewport{padding:0 9px 9px;}
	#mainContent .protokolOverviewTable>tbody>tr{grid-template-columns:1fr; margin-top:9px;}
	#mainContent .protokolOverviewTable>tbody>tr>td,
	#mainContent .protokolOverviewTable>tbody>tr>td:nth-child(odd){border-right:0;}
	#mainContent .protokolOverviewTable>tbody>tr>.protokolMetaCell{
		display:grid;
		grid-template-columns:1fr;
		gap:9px;
		align-items:start;
	}
	#mainContent .protokolMetaTop{justify-content:space-between;}
	#mainContent .protokolDateGroup{justify-content:space-between; gap:8px;}
	#mainContent .protokolOverviewTable>tbody>tr>.protokolToolsCell{grid-column:auto;}
	#mainContent .protokolToolsGrid{gap:10px;}
	#mainContent .protokolOverviewTable .protokolActionButton{width:40px; height:40px; font-size:14px;}
	#mainContent .protokolOverviewTable .protokolOrderLink{grid-template-columns:1fr;}
	#mainContent .protokolOverviewTable .protokolOrderLink strong{grid-column:auto;}
}

/* Protokoli — veći font ostaje čitljiv i u kartičnom/mobile prikazu */
@media (max-width:1399px){
    #mainContent.protokolPage .protokolOverviewTable>tbody>tr>td::before{
        font-size:11px;
        line-height:14px;
    }
}

@media (max-width:767px){
    #mainContent.protokolPage h1{font-size:28px; line-height:35px;}
    #mainContent.protokolPage .formGroup>label,
    #mainContent.protokolPage .formGroup.small>label{font-size:15px; line-height:19px;}
    #mainContent.protokolPage .formInput,
    #mainContent.protokolPage .formSelect,
    #mainContent.protokolPage .formArea{font-size:18px; line-height:22px;}
    #mainContent.protokolPage .protokolOverviewTable>tbody>tr>td{font-size:15px; line-height:21px;}
    #mainContent.protokolPage .protokolOverviewTable>tbody>tr>td::before{font-size:11px; line-height:14px;}
    #mainContent.protokolPage .protokolPrimaryValue{font-size:16px; line-height:21px;}
    #mainContent.protokolPage .protokolCommentText{font-size:15px; line-height:21px;}
    #mainContent.protokolPage .protokolOverviewTable .protokolActionButton{font-size:16px;}
    .protokolViberModalHeader h2{font-size:21px; line-height:27px;}
}