/* daterange.css — компонент выбора периода (пресеты + ДВА календаря рядом).
   Применяется на: /finance, /warehouses (позже — везде где есть фильтр по датам).
   Дизайн: как в MPStats — кнопка с диапазоном, при клике выпадает панель
   (пресеты слева + 2 календаря справа), длинные периоды выбираются за пару кликов. */

.dr-root { position:relative; display:inline-block; font-family:inherit; }

.dr-button {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.5rem .85rem; border:1px solid #d4d8e8; border-radius:8px;
    background:#fff; cursor:pointer; font-family:inherit; font-size:.9rem;
    color:#1a1a2e; min-width:230px;
}
.dr-button:hover { border-color:#9d6ee0; }
.dr-button.open { border-color:#9d6ee0; box-shadow:0 0 0 3px rgba(157,110,224,.12); }
.dr-button svg { flex-shrink:0; }
.dr-button-text { font-weight:500; }

.dr-popover {
    position:absolute; top:calc(100% + 4px); left:0; z-index:1000;
    background:#fff; border:1px solid #e0e3ee; border-radius:8px;
    box-shadow:0 6px 18px rgba(50,60,120,.12);
    display:none;
}
.dr-popover.open { display:flex; flex-direction:column; }

.dr-popover-body { display:flex; }

/* Пресеты — компактнее: меньше отступы, меньший шрифт */
.dr-presets {
    display:flex; flex-direction:column; gap:1px;
    padding:.45rem .35rem; border-right:1px solid #f0f1f6;
    min-width:120px; background:#fafbff;
    border-radius:8px 0 0 0;
}
.dr-preset {
    text-align:left; padding:.3rem .55rem; border:none; background:transparent;
    border-radius:5px; cursor:pointer; font-family:inherit; font-size:.79rem;
    color:#3a3a55; line-height:1.25;
}
.dr-preset:hover { background:#eef2ff; color:#5a6fd8; }
.dr-preset.active { background:#9d6ee0; color:#fff; font-weight:600; }

/* Календари — плотнее, как в Озоне */
.dr-cals { display:flex; padding:.5rem .65rem .35rem; }
.dr-calendar { min-width:200px; }
.dr-calendar + .dr-calendar { margin-left:.6rem; padding-left:.6rem; border-left:1px solid #f0f1f6; }

.dr-cal-nav {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:.35rem; gap:.25rem;
}
.dr-cal-nav button {
    width:22px; height:22px; border:none; background:#f3f5fb; border-radius:4px;
    cursor:pointer; font-size:.9rem; color:#5a6fd8; padding:0; line-height:1;
}
.dr-cal-nav button:hover { background:#e6ebff; }
.dr-cal-nav button.dr-spacer { background:transparent; cursor:default; visibility:hidden; }
.dr-cal-title {
    flex:1; text-align:center; font-weight:600; color:#1a1a2e; font-size:.82rem;
    display:flex; gap:.15rem; align-items:center; justify-content:center;
}
.dr-cal-title select {
    border:1px solid transparent; background:transparent; font-family:inherit;
    font-weight:600; font-size:.82rem; cursor:pointer; color:#1a1a2e;
    padding:.1rem .2rem; border-radius:3px;
}
.dr-cal-title select:hover { border-color:#d4d8e8; }

.dr-cal-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:0;
    font-size:.74rem;
}
.dr-cal-wd {
    text-align:center; padding:.15rem 0 .25rem; color:#bbb; font-weight:500;
    text-transform:uppercase; font-size:.62rem; letter-spacing:.04em;
}
.dr-cal-day {
    text-align:center; padding:.22rem 0; cursor:pointer; border-radius:4px;
    color:#1a1a2e; border:1px solid transparent;
    transition:background .08s; line-height:1.2;
}
.dr-cal-day:hover { background:#eef2ff; }
.dr-cal-day.outside { color:#ccc; }
.dr-cal-day.today { font-weight:700; color:#9d6ee0; }
.dr-cal-day.selected { background:#9d6ee0; color:#fff; font-weight:600; }
.dr-cal-day.in-range { background:#f0e8ff; color:#5a3aa0; }
.dr-cal-day.range-end { background:#9d6ee0; color:#fff; font-weight:600; }
.dr-cal-day.disabled { color:#ddd; cursor:default; }
.dr-cal-day.disabled:hover { background:transparent; }

.dr-foot {
    display:flex; align-items:center; justify-content:space-between;
    gap:.5rem; padding:.4rem .65rem; border-top:1px solid #f0f1f6;
}
.dr-foot-info { font-size:.75rem; color:#666; }
.dr-foot-btn {
    background:linear-gradient(135deg,#667eea,#9d6ee0); color:#fff;
    border:none; border-radius:5px; padding:.32rem .7rem; cursor:pointer;
    font-family:inherit; font-weight:600; font-size:.78rem;
}
.dr-foot-btn:hover { opacity:.92; }
.dr-foot-btn:disabled { opacity:.4; cursor:default; }
.dr-foot-btn.ghost {
    background:transparent; color:#5a6fd8;
    border:1px solid #d4d8e8;
}
.dr-foot-btn.ghost:hover { background:#f3f5fb; }