/*
 * Module mod_filtercalendar For Joomla 
 * Version		: 1.0.0
 * Created by	: Jesus Vargas
 * License : GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */

div.filtercalendar {
	max-width: 250px;
	overflow: visible;
}
table.nc-header, table.nc-body {
	border: none;
	width: 100%;
}
table.nc-header tr, table.nc-body tr, table.nc-header td, table.nc-body td  { border: none; }	
table.nc-header {
	margin: 5px 0;
}
table.nc-header a {
	background: url(../assets/arrows-blue.png) no-repeat 0 100%;
	height: 16px;
	display: block;
	width: 16px;
}
table.nc-header a.back-mth { background-position: 0 -32px; }
table.nc-header a.fwd-mth { background-position: 0 -16px; }
table.nc-header a.fwd-yr { background-position: 0 0; }
table.nc-header .monthname, table.nc-header .yearname, table.nc-body .dayname {
	font-weight: bold;
}
.filtercalendar span.weekday1 {}
.filtercalendar span.weekday2 {}
.filtercalendar span.weekday3 {}
.filtercalendar span.weekday4 {}
.filtercalendar span.weekday5 {}
.filtercalendar span.weekday6 {
	color: #FF3D3D;
}
.filtercalendar span.weekday7 {
	color: #FF3D3D;
}
.filtercalendar span.outofmonth {
	color: #CCCCCC;
}
.filtercalendar span.today {
	font-weight: bold;
}
.filtercalendar span.today ul li {
	font-weight: normal;
}
.filtercalendar span.nc-day { 
	position: relative;
	display: block;
	padding: 3px 2px;
	text-align: center;
}
.filtercalendar ul.nc-items {
	background: url(../assets/opacity.png) repeat;
	position: absolute;
	left: auto!important;
	right: auto!important;
	top: auto!important;
	bottom: 15px!important;
	font-size: 0.8em;
	line-height: 1.1em;
	margin: 0!important;
	padding: 5px 10px;
	width: 180px;
	list-style: none;
	border: 1px solid #000;
	text-align: left;
	z-index: 100;
	box-shadow: 0 0 8px #333;
	border-radius: 5px;
	display: none;
}
.filtercalendar .week1 ul.nc-items, .filtercalendar .week2 ul.nc-items {
	top: 15px!important;
	bottom: auto!important;
}
.filtercalendar span.relday1 ul.nc-items { left: 0!important; }
.filtercalendar span.relday2 ul.nc-items { left: -100%!important; }
.filtercalendar span.relday3 ul.nc-items { left: -200%!important; }
.filtercalendar span.relday4 ul.nc-items { left: -250%!important; }
.filtercalendar span.relday5 ul.nc-items { right: -200%!important; }
.filtercalendar span.relday6 ul.nc-items { right: -100%!important; }
.filtercalendar span.relday7 ul.nc-items { right: 0!important; }

span.nc-day ul.nc-items li  { 
	padding: 3px 5px;
}
span.nc-day ul.nc-items li a  { 
	background: none;
	display: block;
	color: #FFF;
}
span.nc-day ul.nc-items li a:hover  { 
	color: yellow;
}
span.nc-day:hover ul.nc-items { 
	display: block;
}
.filtercalendar span.hasitems {
	cursor: pointer;
	background: url(../assets/dot.png) no-repeat 50% 100%;
}
.bgimgcall {
	display: none;
}

/* --- Стилі для підсвічених дат у Flatpickr (у вигляді кола) --- */
.flatpickr-day.has-articles {
    background-color: #e6f2ff; /* Світло-синя заливка кола */
    border: 1px solid #007bff; /* Синя рамка кола (можна прибрати, якщо хочете лише заливку) */
    border-radius: 50%;        /* Саме ця властивість робить форму круглою */
    font-weight: bold;
    color: #007bff;            /* Колір тексту */
}

/* Ефект при наведенні миші на таку дату */
.flatpickr-day.has-articles:hover {
    background-color: #007bff; /* Коло стає повністю синім */
    color: #ffffff;            /* Текст стає білим */
    border-color: #007bff;
}

/* Щоб не ламати стиль обраної дати (якщо на неї клікнули) */
.flatpickr-day.has-articles.selected {
    background-color: #569ff7;
    color: #ffffff;
    border-color: #569ff7;
}

/* --- Стилі для повідомлення "Результати відсутні" --- */
.calendar-no-results-msg {
    /*background-color: #f8f9fa;  Світло-сірий фон */
    /*border: 1px solid #dee2e6;  Легка рамка */
    border-radius: 8px;        /* Заокруглені кути */
    padding: 20px 20px;
    /*margin-top: 20px;*/
    text-align: center;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
}

.calendar-no-results-msg h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333333;
    font-size: 1.5rem;
}

.calendar-no-results-msg p {
    margin: 0;
    color: #666666;
    font-size: 1.1rem;
}

/* === ВИПРАВЛЕННЯ ВІДОБРАЖЕННЯ МІСЯЦЯ ТА РОКУ У FLATPICKR === */

/* Змушуємо контейнер вирівнювати місяць і рік в один рядок по центру */
.flatpickr-calendar .flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important; /* Відступ між місяцем і роком */
    /*width: 100% !important;*/
}

/* Забороняємо назві місяця розтягуватися і виштовхувати рік */
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

/* Налаштовуємо обгортку поля введення року */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    display: inline-flex !important;
    width: 60px !important; /* Фіксована ширина для 4 цифр року */
    align-items: center !important;
}

/* Скидаємо агресивні стилі шаблону для самого інпуту року */
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    display: inline-block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: inherit !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}