/* ============================================================
   RCM Date Filter - reusable Timesheets-style date selector
   ============================================================
   Visual: [Date text] [caret] [<] [>] [gear]
   Single anchor + mode (Day / Week / Month / Year / Payroll
   Period / All Dates). Mode dropdown sits flush against the
   button row; calendar dropdown shows the navigator + grid.

   Page integration:
     1. <link href="/Content/css/rcm-date-filter.css" rel="stylesheet" />
     2. <script src="/Scripts/rcm-date-filter.js"></script>
     3. HTML: <div class="rcm-date-filter"> ... 5 buttons ... </div>
     4. JS:   RcmDateFilter.init({ container, onChange })

   See Documentation/Conventions/Page-Layout-Standards.md for
   the full integration walkthrough.
============================================================ */

/* 34px, the toolbar height every other control draws (Page-Layout-Standards.md, "Toolbars"). */
.rcm-date-filter {
    display: inline-flex;
    align-items: stretch;
    height: 34px;
}

.rcm-date-filter > button {
    height: 34px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    padding: 0 10px;
    /* 14px, the same as the selects and inputs it sits beside (0.9em rendered 12.6px, visibly smaller). */
    font-size: 14px;
    cursor: pointer;
}

.rcm-date-filter > button + button {
    border-left: none;
}

.rcm-date-filter > button:first-child {
    border-radius: 4px 0 0 4px;
}

.rcm-date-filter > button:last-child {
    border-radius: 0 4px 4px 0;
}

.rcm-date-filter > button:hover:not(:disabled) {
    background: #f5f5f5;
}

.rcm-date-filter > button:disabled {
    color: #aaa;
    cursor: not-allowed;
    background: #fafafa;
}

.rcm-date-filter .rcm-df-display {
    min-width: 160px;
    text-align: left;
    font-weight: 500;
}

.rcm-date-filter .rcm-df-caret {
    width: 28px;
}

.rcm-date-filter .rcm-df-nav {
    width: 36px;
    text-align: center;
}

/* The popovers (the calendar, the range menu, the custom range; 2026-10-30, DevExtreme dxPopover before), drawn as the
   DevExtreme ones measured on /audit: under the button, centered, with a 20 x 10 arrow; 1px border, square corners, the
   kit's open-list shadow. Colors from rcm-colors.css (loaded with the kit, which the filter loads before opening one). */
.rcm-df-pop {
    position: fixed;
    z-index: 1700;
    background: var(--rcm-surface, #fff);
    border: 1px solid var(--rcm-border, #ddd);
    box-shadow: var(--rcm-shadow, rgba(0, 0, 0, .176)) 0 6px 12px;
    color: var(--rcm-text, #333);
    font-size: 14px;
    line-height: normal;
}
.rcm-df-pop-arrow {
    position: absolute;
    top: -10px;
    width: 20px;
    height: 10px;
    overflow: hidden;
}
.rcm-df-pop-arrow::after {          /* a square turned 45 degrees, half of it showing, with the popover's border */
    content: '';
    position: absolute;
    left: 3px;
    top: 4px;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    background: var(--rcm-surface, #fff);
    border: 1px solid var(--rcm-border, #ddd);
}

/* The calendar: the kit's (maidbase-kit.css draws flatpickr), inline, without a border of its own inside the popover. */
.rcm-df-date-pop .flatpickr-calendar.inline {
    border: 0;
    box-shadow: none;
    margin: 0;
    top: 0;
}

/* The range menu: 180px, 27px rows, the chosen range shaded (the DevExtreme list's look). */
.rcm-df-mode-pop {
    width: 180px;
}
.rcm-df-mode-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rcm-df-mode-item {
    height: 27px;
    padding: 2px 8px;
    line-height: 23px;
    cursor: pointer;
    white-space: nowrap;
}
.rcm-df-mode-item:hover {
    background: var(--rcm-surface-hover, #f5f5f5);
}
.rcm-df-mode-item.rcm-df-mode-chosen {
    background: var(--rcm-surface-active, #e6e6e6);
}

/* The custom range: two 140px date boxes with "to" between, as before. */
.rcm-df-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
}
.rcm-df-custom-row .rcm-date {
    width: 140px;
}
.rcm-df-custom-to {
    color: var(--rcm-text-2, #555);
}