/*
 * Kalendar za datume (jedan datum ili raspon dolazak → odlazak), isti na svim domenama.
 * Skripta: public/js/date-picker.js; markup: resources/views/partials/date-picker.blade.php.
 * Boja naglaska: --dp-accent (zadano --color-more / #0E5A86); domena je može promijeniti.
 */
.dp-control { position: relative; }
.dp-control input[data-dp-input] { padding-left: 2.5rem; cursor: pointer; text-overflow: ellipsis; }
.dp-icon { position: absolute; left: .8rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -.575rem; color: var(--dp-accent, var(--color-more, #0E5A86)); pointer-events: none; }
.dp-control input[aria-invalid="true"] { border-color: #dc2626 !important; background-color: #fef2f2 !important; }

.dp-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 27, 45, .45); animation: dp-fade .18s ease-out; }
.dp { --dp-a: var(--dp-accent, var(--color-more, #0E5A86)); position: fixed; z-index: 91; box-sizing: border-box; max-height: calc(100vh - 1.5rem); overflow: auto; background: #fff; color: #1F2A30; border-radius: 1.25rem; box-shadow: 0 24px 60px -12px rgba(15, 27, 45, .45), 0 0 0 1px rgba(15, 27, 45, .06); padding: 1.1rem 1.25rem 1rem; animation: dp-pop .18s ease-out; font-family: inherit; line-height: 1.3; text-align: left; }
.dp *, .dp *::before, .dp *::after { box-sizing: border-box; }
.dp__months { display: flex; gap: 2rem; }
.dp__month { width: 17.5rem; }
.dp__head { display: grid; grid-template-columns: 2.25rem 1fr 2.25rem; align-items: center; margin-bottom: .5rem; }
.dp__title { text-align: center; font-weight: 600; font-size: .95rem; text-transform: capitalize; }
.dp__nav { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: #1F2A30; cursor: pointer; display: grid; place-items: center; transition: background-color .15s; padding: 0; }
.dp__nav:hover:not(:disabled) { background: #EEF2EF; }
.dp__nav:disabled { opacity: .25; cursor: default; }
.dp__nav svg { width: 1.1rem; height: 1.1rem; }
.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.dp__dow { text-align: center; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #7a878d; padding: .35rem 0; }

.dp-day { position: relative; height: 2.4rem; border: 0; background: transparent; padding: 0; font: inherit; font-size: .9rem; color: inherit; cursor: pointer; }
.dp-day::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.dp-day span { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: 0 auto; border-radius: 999px; transition: background-color .12s, color .12s; }
.dp-day:hover:not(:disabled):not(.is-edge) span { background: #EEF2EF; }
.dp-day:focus-visible { outline: none; }
.dp-day:focus-visible span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dp-a); }
.dp-day:disabled { color: #c4cbce; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .12); }
.dp-day.is-today span { font-weight: 700; box-shadow: inset 0 0 0 1px #c9d3d6; }
.dp-day.is-range::before { background: color-mix(in srgb, var(--dp-a) 14%, #fff); }
.dp-day.is-edge span { background: var(--dp-a); color: #fff; font-weight: 600; box-shadow: none; }
.dp-day.is-start.has-range::before { background: linear-gradient(to right, transparent 50%, color-mix(in srgb, var(--dp-a) 14%, #fff) 50%); }
.dp-day.is-end::before { background: linear-gradient(to left, transparent 50%, color-mix(in srgb, var(--dp-a) 14%, #fff) 50%); }
.dp-day.is-start.is-end::before { background: transparent; }
.dp-day.is-dow-first.is-range::before { border-radius: 999px 0 0 999px; }
.dp-day.is-dow-last.is-range::before { border-radius: 0 999px 999px 0; }

.dp__foot { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e6ebe8; font-size: .85rem; }
.dp__summary { flex: 1; color: #55646b; min-width: 0; }
.dp__summary strong { color: #1F2A30; }
.dp__link { border: 0; background: transparent; padding: .4rem .6rem; border-radius: .5rem; font: inherit; font-weight: 600; color: var(--dp-a); cursor: pointer; }
.dp__link:hover { background: #EEF2EF; }
.dp__close { display: none; }

@keyframes dp-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dp-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Mobitel: kalendar kao ploča s dna zaslona */
@media (max-width: 639px) {
    .dp { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 88vh; border-radius: 1.25rem 1.25rem 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); animation: dp-sheet .22s ease-out; }
    .dp__month { width: 100%; }
    .dp__months { gap: 0; }
    .dp-day { height: 2.75rem; }
    .dp-day span { width: 2.6rem; height: 2.6rem; }
    .dp__close { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .dp, .dp-backdrop { animation: none; } }