/* ============================================================
   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.
============================================================ */

.rcm-date-filter {
    display: inline-flex;
    align-items: stretch;
    height: 36px;
}

.rcm-date-filter > button {
    height: 36px;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    padding: 0 10px;
    font-size: 0.9em;
    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;
}

/* Popovers: kill the global 15px popup padding from
   Site.Master.css:407 (`.dx-popup-wrapper:not(.dx-dropdowneditor-overlay)
   .dx-popup-content`, specificity 0,3,0). We chain three classes on
   the wrapper to land at 0,4,0 and win the cascade. */

.dx-popup-wrapper.dx-popover-wrapper.rcm-df-date-popover .dx-popup-content,
.dx-popup-wrapper.dx-popover-wrapper.rcm-df-mode-popover .dx-popup-content {
    padding: 0 !important;
    line-height: normal !important;
}

.dx-popover-wrapper.rcm-df-date-popover .dx-calendar {
    margin: 0;
    /* Small inner padding so the navigator row doesn't sit flush
       against the popover top edge. */
    padding: 8px 6px;
    box-shadow: none;
    border: none;
}

/* DevExtreme's calendar nav left-aligns the chevron icons inside
   their 24px buttons (6px off-center). Force flex-center so the
   chevrons sit symmetrically at the calendar edges. */
.dx-popover-wrapper.rcm-df-date-popover .dx-calendar-navigator .dx-button-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.dx-popover-wrapper.rcm-df-mode-popover .dx-list-item {
    padding: 6px 12px;
}