/* assets/styles/calendar.css */
.calendar {
	width: 100%;
	min-width: 208px;      /* minimálna šírka pre čitateľnosť */
	max-width: 100%;       /* maximálne na šírku rodiča */
	border-collapse: separate;
	border-spacing: 1px;
	background: white;
	font-size: 12px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	padding: 4px;
	table-layout: fixed;   /* pre lepšiu kontrolu nad šírkami stĺpcov */
}

/* Nastavenie relatívnych šírok stĺpcov */
.calendar td,
.calendar th {
	padding: 4px 2px;     /* menší padding horizontálne */
	text-align: center;
	border: none;
	border-radius: 2px;
	width: 12.5%;         /* 100% / 8 stĺpcov */
	min-width: 32px;      /* minimálna šírka pre čísla */
}

/* Stĺpec s číslami týždňov */
.calendar td:first-child,
.calendar th:first-child {
	width: 10%;           /* užší stĺpec pre čísla týždňov */
	min-width: 28px;
}

/* Zmenšenie písma na malých obrazovkách */
@media (max-width: 400px) {
	.calendar {
		font-size: 11px;
		padding: 2px;
	}

	.calendar td,
	.calendar th {
		padding: 3px 1px;
	}
}

/* Ostatné štýly zostávajú rovnaké */
.calendar th {
	font-weight: normal;
	color: #666;
}

.calendar .weekdays td {
	color: #666;
	background: #f8f9fa;
}

.calendar .active,
.calendar td.active a,
.calendar th.active a {
	background: #1a73e8;
	color: white;
	font-weight: 500;
}

.calendar .quarter-month {
	background: #e8f0fe;
	color: #1a73e8;
}

.calendar .other-month {
	color: #bbb;
}

.calendar .week {
	color: #1a73e8;
	background: #f8f9fa;
}

.calendar a {
	color: inherit;
	text-decoration: none;
	display: block;
	padding: 4px 2px;
	border-radius: 2px;
	transition: background-color 0.2s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calendar .nav-arrow {
	color: #666;
	font-size: 15px;
}

.calendar .nav-arrow.yearly {
	color: #bbb;
}

.calendar .nav-arrow a {
	padding: 2px;
}

.calendar .today:not(.active) a {
	border: 1px solid #1a73e8;
	padding: 3px 1px;
}

.calendar .current-nav {
	margin-top: 4px;
}

.calendar .current-nav td {
	padding: 4px 2px;
}

/* Pre prípad, že kalendár je vo flex alebo grid containeri */
.calendar-wrapper {
	width: 100%;
	min-width: 280px;
	max-width: 100%;
	overflow-x: auto;    /* pre prípad že sa kalendár nezmestí */
}