/* Календарь в полях дат: значок в поле и оформление выпадающего окна.
   Виджет общий с конструктором, поэтому правила ограничены классом
   kalk-kalendar — он ставится только на время показа из калькулятора. */

.dgr-kalk input.kalk-pole-data {
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237CAB3D' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

/* Все правила ниже идут от #ui-datepicker-div: у темы jQuery UI селекторы
   вида .ui-widget-content .ui-state-default, и без идентификатора её рамки и
   фон перебивают наши. */

#ui-datepicker-div.kalk-kalendar {
    z-index: 1200 !important;
    width: 276px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
}

#ui-datepicker-div.kalk-kalendar .ui-datepicker-header {
    position: relative;
    background: none;
    border: 0;
    padding: 0 0 8px;
}

#ui-datepicker-div.kalk-kalendar .ui-datepicker-title {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 0 32px;
    line-height: 30px;
}

#ui-datepicker-div.kalk-kalendar .ui-datepicker-title select {
    height: 30px;
    max-width: 92px;
    padding: 0 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
}

/* Стрелки перелистывания. Русская локализация кладёт в них слова «<Пред» и
   «След>»; тема прячет их картинкой-спрайтом, которого у нас нет, поэтому
   слова вылезали поверх кнопки обрезанными. Текст убираем нулевым кеглем,
   значок рисуем в ::before со своим размером. */
#ui-datepicker-div.kalk-kalendar .ui-datepicker-prev,
#ui-datepicker-div.kalk-kalendar .ui-datepicker-next {
    top: 0;
    width: 28px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 0;
}

#ui-datepicker-div.kalk-kalendar .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.kalk-kalendar .ui-datepicker-next { right: 0; }

#ui-datepicker-div.kalk-kalendar .ui-datepicker-prev:hover,
#ui-datepicker-div.kalk-kalendar .ui-datepicker-next:hover {
    top: 0;
    left: auto;
    right: auto;
    border: 1px solid var(--green);
    background: var(--cream);
}
#ui-datepicker-div.kalk-kalendar .ui-datepicker-prev:hover { left: 0; }
#ui-datepicker-div.kalk-kalendar .ui-datepicker-next:hover { right: 0; }

#ui-datepicker-div.kalk-kalendar .ui-datepicker-prev span,
#ui-datepicker-div.kalk-kalendar .ui-datepicker-next span {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 26px;
    height: 28px;
    background-image: none;
    text-indent: 0;
    font-size: 0;
    color: transparent;
}

#ui-datepicker-div.kalk-kalendar .ui-datepicker-prev span::before,
#ui-datepicker-div.kalk-kalendar .ui-datepicker-next span::before {
    display: block;
    width: 26px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 19px;
    color: var(--muted);
}

#ui-datepicker-div.kalk-kalendar .ui-datepicker-prev span::before { content: '\2039'; }
#ui-datepicker-div.kalk-kalendar .ui-datepicker-next span::before { content: '\203A'; }

#ui-datepicker-div.kalk-kalendar table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 13px;
}

#ui-datepicker-div.kalk-kalendar th {
    padding: 4px 0;
    border: 0;
    color: var(--muted);
    font-weight: normal;
}

#ui-datepicker-div.kalk-kalendar td { padding: 0; border: 0; }

#ui-datepicker-div.kalk-kalendar td a,
#ui-datepicker-div.kalk-kalendar td span,
#ui-datepicker-div.kalk-kalendar td a.ui-state-default,
#ui-datepicker-div.kalk-kalendar td span.ui-state-default {
    display: block;
    padding: 6px 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--beige);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    font-weight: normal;
}

#ui-datepicker-div.kalk-kalendar td a:hover,
#ui-datepicker-div.kalk-kalendar td a.ui-state-hover {
    background: var(--cream);
    border-color: var(--line);
    color: var(--ink);
}

#ui-datepicker-div.kalk-kalendar td a.ui-state-active,
#ui-datepicker-div.kalk-kalendar td .ui-state-active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

#ui-datepicker-div.kalk-kalendar td.ui-datepicker-today a {
    border-color: var(--green);
}

/* Дни соседних месяцев показываем, но приглушённо: иначе край недели
   выглядит дырой, а перепутать их с текущим месяцем легко. */
#ui-datepicker-div.kalk-kalendar td.ui-datepicker-other-month a,
#ui-datepicker-div.kalk-kalendar td.ui-datepicker-other-month span {
    background: #fff;
    color: var(--muted);
}

#ui-datepicker-div.kalk-kalendar td.ui-datepicker-unselectable span {
    background: #fff;
    color: var(--muted);
}

@media (max-width: 480px) {
    #ui-datepicker-div.kalk-kalendar { width: 258px; font-size: 13px; }
    #ui-datepicker-div.kalk-kalendar .ui-datepicker-title select { max-width: 82px; }
}