/* Matrix — kalendar zauzetosti. Boje se zadaju iz predloška varijablama --kal-* */
.kal { margin: 0 0 2.5rem; }
.kal-naslov { margin-top: 0; }
.kal-traka { display: flex; justify-content: flex-end; gap: .5rem; margin: -.25rem 0 .5rem; }
.kal-traka button {
	width: 2.4rem; height: 2.4rem; border: 1px solid var(--kal-linija, #e4ddd0); border-radius: 50%;
	background: var(--kal-papir, #fffdf9); color: var(--kal-glavna, #3f4a2a); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.kal-traka button:disabled { opacity: .35; cursor: default; }
.kal-traka button:not(:disabled):hover { background: var(--kal-glavna, #3f4a2a); color: #fff; }
.kal-mjeseci { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem 2rem; }
.kal-mjesec__naslov { font-size: 1.2rem; margin: 0 0 .6rem; text-align: center; }
.kal-mreza { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kal-dan-tj { text-align: center; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--kal-siva, #6b675e); padding-bottom: .2rem; }
.kal-d {
	position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	font: 500 .92rem/1 var(--kal-sans, system-ui, sans-serif); color: var(--kal-tinta, #2b2a26);
	background: var(--kal-slobodno, #fffdf9); border: 1px solid var(--kal-linija, #e4ddd0); border-radius: 3px; padding: 0; overflow: hidden;
}
.kal-d > span { position: relative; z-index: 1; }
button.kal-d { cursor: pointer; }
button.kal-d:hover, button.kal-d:focus-visible { outline: 2px solid var(--kal-odabrano, #6b7a3a); outline-offset: -2px; }
.kal-zauzeto { background: var(--kal-zauzeto, #b5583a); border-color: var(--kal-zauzeto, #b5583a); color: #fff; }
.kal-dolazak { background: linear-gradient(to bottom right, var(--kal-slobodno, #fffdf9) 50%, var(--kal-zauzeto, #b5583a) 50%); }
.kal-odlazak { background: linear-gradient(to bottom right, var(--kal-zauzeto, #b5583a) 50%, var(--kal-slobodno, #fffdf9) 50%); }
.kal-proslo { opacity: .38; }
.kal-danas { box-shadow: inset 0 0 0 2px var(--kal-glavna, #3f4a2a); }
.kal-d.kal-odabrano { background: var(--kal-odabrano, #6b7a3a); border-color: var(--kal-odabrano, #6b7a3a); color: #fff; }
.kal-d.kal-raspon { background: var(--kal-raspon, #dfe5cf); border-color: var(--kal-raspon-rub, #c9d2b0); }
.kal-legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; padding: 0; margin: 1.2rem 0 .4rem; font-size: .9rem; color: var(--kal-siva, #6b675e); }
.kal-legenda li { display: flex; align-items: center; gap: .45rem; }
.kal-uzorak { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1px solid var(--kal-linija, #e4ddd0); border-radius: 2px; }
.kal-uzorak.kal-zauzeto { border-color: var(--kal-zauzeto, #b5583a); }
.kal-uputa, .kal-status { font-size: .9rem; color: var(--kal-siva, #6b675e); margin: .2rem 0 0; }
.kal-status:empty { display: none; }
.kal-js .kal-mjesec[hidden] { display: none; }
.kal-dolazak > span, .kal-odlazak > span { text-shadow: 0 0 3px var(--kal-slobodno, #fffdf9), 0 0 3px var(--kal-slobodno, #fffdf9), 0 0 2px var(--kal-slobodno, #fffdf9); }