/* Ενιαίος date picker — κοινό styling για BeDateInput / BeDateRange / SmartDateInput.
   Global (όχι scoped .razor.css) ώστε και τα τρία components να μοιράζονται το ίδιο popup.
   Το ΠΕΔΙΟ κρατά τις κλάσεις form-control του Bootstrap/Metronic (άρα κληρονομεί αυτόματα
   skin + dark mode)· εδώ ορίζουμε μόνο το εικονίδιο μέσα στο πλαίσιο και το ημερολόγιο. */

/* Drop-in αντικαταστάτης του παλιού .input-group (flex, πλήρες πλάτος) ώστε τα layouts
   των σελίδων που το περιέχουν να μη μετακινηθούν. */
.be-dp {
    position: relative;
    display: flex;
    width: 100%;
}

/* Όσο το ημερολόγιο είναι ανοιχτό, το control ανεβαίνει ΠΑΝΩ από το backdrop — αλλιώς
   δεν θα μπορούσες να πληκτρολογήσεις με ανοιχτό popup. */
.be-dp.is-open {
    z-index: 1091;
}

.be-dp-input {
    padding-right: 2.1rem;
    font-variant-numeric: tabular-nums;
}

/* Σταθερά πλάτη για φίλτρα σε toolbars — αλλιώς το flex control τραβά όλο το πλάτος. */
.be-dp-w-date {
    width: 11rem;
}

.be-dp-w-range {
    width: 21rem;
}

.be-dp-input.has-clear {
    padding-right: 3.6rem;
}

/* Εικονίδια ΜΕΣΑ στο πλαίσιο (όχι ξεχωριστά κουμπιά input-group). */
.be-dp-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: .25rem;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #99a1b7;
    border-radius: .35rem;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    transition: background-color .12s, color .12s;
}

.be-dp-btn:hover {
    background: #eef6ff;
    color: #1b84ff;
}

.be-dp.is-open .be-dp-cal {
    background: #1b84ff;
    color: #fff;
}

.be-dp-clear {
    right: 1.85rem;
    font-size: 1rem;
}

.be-dp-clear:hover {
    background: #fff0f3;
    color: #f8285a;
}

.be-dp-btn:disabled {
    pointer-events: none;
    opacity: .45;
}

/* ── range: δύο πεδία σε ΕΝΑ πλαίσιο ── */
.be-dp-range {
    align-items: center;
    border: 1px solid #dbdfe9;
    border-radius: .475rem;
    background: #fff;
    padding-right: 1.9rem;
}

.be-dp-range:focus-within {
    border-color: #1b84ff;
}

.be-dp-range .be-dp-input {
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    padding-right: .35rem;
    border-radius: .35rem;
    min-width: 0;
}

.be-dp-range .be-dp-input:focus {
    box-shadow: none;
}

/* Ποιο άκρο (Από/Έως) πληκτρολογείς ή διαλέγεις αυτή τη στιγμή. */
.be-dp-range .be-dp-input.active {
    background: #eef6ff;
    color: #056ee9;
    font-weight: 600;
}

.be-dp-sep {
    flex: 0 0 auto;
    color: #99a1b7;
    font-size: .8rem;
    padding: 0 .1rem;
}

/* ── popup ── */
.be-dp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1089;
}

.be-dp-pop {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 1090;
    background: #fff;
    border: 1px solid #dbdfe9;
    border-radius: .75rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .13);
    padding: .7rem;
    user-select: none;
}

.be-dp-pop.end {
    left: auto;
    right: 0;
}

.be-dp-cals {
    display: flex;
    gap: .9rem;
}

.be-dp-cal-body {
    width: 246px;
}

.be-dp-head {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .45rem;
}

.be-dp-nav {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbdfe9;
    background: #fff;
    border-radius: .4rem;
    color: #78829d;
    cursor: pointer;
    font-size: .7rem;
    padding: 0;
}

.be-dp-nav:hover {
    background: #eef6ff;
    border-color: #1b84ff;
    color: #1b84ff;
}

.be-dp-msel,
.be-dp-ysel {
    height: 1.75rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: #071437;
    cursor: pointer;
    padding: 0 .2rem;
}

.be-dp-msel {
    flex: 1 1 auto;
}

.be-dp-ysel {
    flex: 0 0 4.6rem;
}

.be-dp-msel:hover,
.be-dp-ysel:hover {
    background: #f1f1f4;
}

.be-dp-title {
    flex: 1 1 auto;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    color: #071437;
}

.be-dp-dow,
.be-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.be-dp-dow span {
    text-align: center;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #99a1b7;
    padding: .25rem 0 .3rem;
}

.be-dp-day {
    height: 2rem;
    border: 0;
    background: transparent;
    border-radius: .4rem;
    font-size: .8rem;
    color: #181c32;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    padding: 0;
}

.be-dp-day:hover {
    background: #eef6ff;
}

.be-dp-day.out {
    color: #c8ccd6;
}

.be-dp-day.we {
    color: #b0526a;
}

.be-dp-day.we.out {
    color: #e0bcc5;
}

.be-dp-day.today {
    font-weight: 700;
    color: #056ee9;
    box-shadow: inset 0 0 0 1px #1b84ff;
}

.be-dp-day.sel {
    background: #1b84ff;
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

.be-dp-day.inrange {
    background: #dbeafe;
    border-radius: 0;
}

.be-dp-day.edge-from {
    border-radius: .4rem 0 0 .4rem;
}

.be-dp-day.edge-to {
    border-radius: 0 .4rem .4rem 0;
}

.be-dp-foot {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #f1f1f4;
}

.be-dp-link {
    border: 0;
    background: transparent;
    color: #1b84ff;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: .35rem;
}

.be-dp-link:hover {
    background: #eef6ff;
}

.be-dp-link.muted {
    color: #78829d;
    margin-left: auto;
}

.be-dp-link.muted:hover {
    background: #fff0f3;
    color: #f8285a;
}

.be-dp-range-text {
    font-size: .78rem;
    color: #78829d;
    margin-left: .3rem;
}

/* Επικεφαλίδα ομάδας μέσα στη στήλη έτοιμων επιλογών (SmartDateInput) */
.be-dp-group-title {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #99a1b7;
    margin: .45rem 0 .2rem .45rem;
    padding-top: .4rem;
    border-top: 1px solid #f1f1f4;
}

/* Πεδίο με ενεργό symbolic token (π.χ. «Τρέχων Μήνας») → μπλε, για να ξεχωρίζει από
   πραγματική ημερομηνία (επαναϋπολογίζεται κάθε μέρα). */
.be-dp-input.is-token {
    color: #056ee9;
    font-weight: 600;
    border-color: #1b84ff;
    background: #eef6ff;
}

/* ── στήλες έτοιμων περιόδων (range) / σχετικών ημερομηνιών (smart) ── */
.be-dp-presets {
    flex: 0 0 136px;
    border-right: 1px solid #f1f1f4;
    padding-right: .6rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.be-dp-preset {
    border: 0;
    background: transparent;
    text-align: left;
    font-size: .78rem;
    color: #181c32;
    padding: .3rem .45rem;
    border-radius: .35rem;
    cursor: pointer;
    white-space: nowrap;
}

.be-dp-preset:hover {
    background: #eef6ff;
    color: #056ee9;
}

.be-dp-preset.on {
    background: #1b84ff;
    color: #fff;
    font-weight: 600;
}

/* ── dark mode ── */
[data-bs-theme=dark] .be-dp-pop {
    background: #1e1e2d;
    border-color: #2b2b40;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

[data-bs-theme=dark] .be-dp-range {
    background: #1b1b29;
    border-color: #2b2b40;
}

[data-bs-theme=dark] .be-dp-nav,
[data-bs-theme=dark] .be-dp-msel,
[data-bs-theme=dark] .be-dp-ysel {
    background: #1b1b29;
    border-color: #2b2b40;
    color: #e7ecf5;
}

[data-bs-theme=dark] .be-dp-title,
[data-bs-theme=dark] .be-dp-day {
    color: #e7ecf5;
}

[data-bs-theme=dark] .be-dp-preset {
    color: #e7ecf5;
}

[data-bs-theme=dark] .be-dp-day.out {
    color: #565674;
}

[data-bs-theme=dark] .be-dp-day.we {
    color: #e8879f;
}

[data-bs-theme=dark] .be-dp-day.we.out {
    color: #6e4552;
}

[data-bs-theme=dark] .be-dp-day:hover,
[data-bs-theme=dark] .be-dp-nav:hover,
[data-bs-theme=dark] .be-dp-btn:hover,
[data-bs-theme=dark] .be-dp-preset:hover,
[data-bs-theme=dark] .be-dp-link:hover {
    background: #2b2b40;
}

[data-bs-theme=dark] .be-dp-day.inrange {
    background: #1d3a5c;
}

[data-bs-theme=dark] .be-dp-day.sel,
[data-bs-theme=dark] .be-dp-preset.on {
    background: #1b84ff;
    color: #fff;
}

[data-bs-theme=dark] .be-dp-foot,
[data-bs-theme=dark] .be-dp-group-title,
[data-bs-theme=dark] .be-dp-presets {
    border-color: #2b2b40;
}

[data-bs-theme=dark] .be-dp-input.is-token,
[data-bs-theme=dark] .be-dp-range .be-dp-input.active {
    background: #1d3a5c;
    color: #9ecbff;
}