/* =========================
   NAVIGACE
   ========================= */

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*max-width: 1200px;*/
	width: 100%;
    margin: 0 auto 0px;
}

.nav a.prev {text-align:left;width: 30%;}
.nav a.next {text-align:right;width: 30%;}

.nav a {
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 6px;
    background-color: #f2f2f2;
    color: #333;
    transition: background-color 0.2s ease;
	 
}

.nav a:hover {
    background-color: #e0e0e0;
}

.nav .person-selector { text-align:center; width:40%;margin-left:10%;}
.nav .person-selector .active{
	background-color:silver;
}
.nav .person-selector a {margin-left:0.5%;display:block;float:left;width:10%;padding:0.5em}

/* =========================
   WRAPPER PRO KALENDÁŘE
   ========================= */

.calendar-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================
   TABULKA KALENDÁŘE
   ========================= */

.calendar {
    width: 49%;
	margin-left:1%;
	float: left;
    max-width: 560px;
    min-width: 320px;
    flex: 1 1 520px;
    border-collapse: collapse;
    background-color: #fff;
}

/* =========================
   HLAVIČKA MĚSÍCE
   ========================= */

.calendar caption {
    padding: 0.5em 0 0 0;
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: bold;
    text-align: center;
}

/* =========================
   HLAVIČKA DNŮ
   ========================= */

.calendar th {
    padding: 0.3em 0;
	width:14.2%;
	text-align:center;
    background-color: #f6f6f6;
    font-size: clamp(12px, 1.3vw, 14px);
    border: 1px solid #ccc;
}

/* =========================
   BUŇKY DNŮ
   ========================= */

.calendar td {
    position: relative;
    Gheight: 80px;
    padding: 0.1em;
    border: 1px solid #ccc;
    vertical-align: top;
	text-align:center;

    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.calendar td.selected_from {
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
}

.calendar td.selected_to {
  background: #0056b3;
  color: #fff;
  font-weight: bold;
}

.calendar td.in_range {
  background: #cfe2ff;
}

.calendar td.blocked{
	cursor: not-allowed;
    background-image: repeating-linear-gradient(
        45deg,
        #f0f0f0,
        #f0f0f0 6px,
        #e0e0e0 6px,
        #e0e0e0 12px
    );
}

.calendar td.old{
    background-color: silver;
	cursor: not-allowed;
}

.calendar td.open{
	   cursor: pointer;
}


/* =========================
   HOVER EFEKT
   ========================= */

.calendar .open:hover  {
    background-color: #e6f2ff;
    box-shadow: inset 0 0 0 2px #4a90e2;
}

/* =========================
   HOVER NA CENU
   ========================= */
/*
.calendar td:hover .price {
    background-color: #ffffff;
}
*/



/* =========================
   VÍKEND
   ========================= */
/*
.calendar td.weekend {
    background-color: #c8f7c5;
}

.calendar td.weekend:hover {
    background-color: #b6edb2;
}
*/

/* =========================
   ČÍSLO DNE
   ========================= */

.day {
    font-weight: bold;
	text-align:center;
    font-size: 0.9em;
    Gmargin-bottom: 6px;
}

/* =========================
   CENA (DIV MÍSTO INPUT)
   ========================= */

.price {
    Gmin-height: 24px;
    padding: 0.4%;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 0.6em;
    color: #333;
}
.price_block {
    
    padding: 0.5%;
    font-size: 0.7em;
    color: #333;
}

/* Pokud není cena */
.price:empty::after {
    content: '—';
    color: #aaa;
}




/* =========================
   MOBILNÍ ÚPRAVY
   ========================= */

@media (max-width: 600px) {

    .calendar td {
        Gheight: 60px;
        padding: 0.1em;
    }

    .price {
        font-size: 0.8em;
    }
}

/* =========================
   DOTYKOVÁ ZAŘÍZENÍ
   ========================= */

@media (hover: none) {

    .calendar td:hover {
        background-color: inherit;
        box-shadow: none;
    }
}