/*
  #993 - filter popup of the invoice and quote overview (pixel-parity target:
  D:\Desing-Documents\design_handoff_factuur_filters\mocks\Factuur Filter Popup.dc.html).

  Global, not CSS-isolated: MudDialog renders through a portal outside the page component's scoped-CSS
  boundary, so a `.razor.css` file cannot reach `.mud-dialog` (same precedent as article-dialog.css #773 and
  invoice-line-dialog.css #796/#899). Class prefix `ofd-`.

  Token mapping (mock literal -> app value):
    rgb(37,99,235)        -> var(--primary-color) / rgba(var(--primary-rgb), a)
    #8c9097 (muted text)  -> var(--text-muted)
    #fff (dialog surface) -> var(--custom-white)
    all other greys       -> the mock's own literals (drawer-parity precedent #731-#736)

  Traps cancelled here (MudBlazor 9.4 / Ynex):
    - dialog is opened with DialogPosition.Center (#993 round 4, PD15); the container padding reset is kept so no MudBlazor position padding can return
    - styles.css `.mud-dialog-container .mud-dialog { flex-grow:1 }` -> flex-grow:0 (#899)
    - Ynex 1px `.mud-dialog` border and MudBlazor open animation -> border:none, animation:none, transform:none (#773)
    - scrim: one dark layer on `.ofd-scrim .mud-overlay-scrim`, root transparent (precedent invoice-line-dialog.css)
    - global button hover rules -> neutralised, the mock has hover only on the close X
  Below 992px the app's mobile.css iOS focus-zoom guard forces inputs to 16px; deliberately kept (PD3, Ali D15).
  Pre-approved deviations from the mock: PD3 (16px date inputs below 992px), PD4 (max-height calc(100vh - 80px)),
  PD6 (keyboard focus ring), PD7 (tablet uses the desktop layout), PD11 (backdrop covers the viewport),
  PD14 (From/To stack below 600px), PD15 (dialog vertically centred at every width).
*/

/* Cancel any MudBlazor container padding so the centred dialog is exactly centred. */
.mud-dialog-container:has(> .mud-dialog.overview-filter-dialog) {
    padding: 0 !important;
}

.mud-dialog.overview-filter-dialog {
    flex-grow: 0;
    width: 520px;
    max-width: 520px !important;
    margin: 0;
    max-height: calc(100vh - 80px);
    border: none;
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(20, 24, 40, .28);
    background: var(--custom-white);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2b2f36;
    line-height: normal;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    animation: none;
    transform: none;
}

.overview-filter-dialog *,
.overview-filter-dialog *::before,
.overview-filter-dialog *::after {
    box-sizing: border-box;
    transition: none;
}

/* ---- backdrop: one layer of rgba(20,24,40,.35) ---- */
.ofd-scrim {
    background-color: transparent !important;
}

.ofd-scrim .mud-overlay-scrim {
    background-color: rgba(20, 24, 40, .35) !important;
}

/* ---- focus: no ring after mouse clicks, accessible ring for the keyboard (PD6) ---- */
.overview-filter-dialog button:focus:not(:focus-visible),
.overview-filter-dialog input:focus:not(:focus-visible) {
    outline: none;
}

.overview-filter-dialog button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25);
}

.overview-filter-dialog .ofd-seg button.is-on:focus-visible {
    box-shadow: 0 1px 3px rgba(40, 50, 80, .12), 0 0 0 3px rgba(var(--primary-rgb), .25);
}

.overview-filter-dialog .ofd-apply:focus-visible {
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), .28), 0 0 0 3px rgba(var(--primary-rgb), .25);
}

/* ---- head ---- */
.overview-filter-dialog .mud-dialog-title {
    padding: 18px 22px;
    margin: 0;
    border-bottom: 1px solid #eef0f3;
    border-radius: 0;
    flex: none;
    line-height: normal;
    font: inherit;
    color: inherit;
}

.ofd-head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ofd-di {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 21px;
    background: rgba(var(--primary-rgb), .1);
    color: var(--primary-color);
}

.ofd-tt {
    min-width: 0;
}

.ofd-dt {
    font-size: 16px;
    font-weight: 700;
    color: #232427;
}

.ofd-ds {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
}

.ofd-x {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    border: none;
    background: #f4f5f8;
    color: #5b6472;
    font-size: 18px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

/* the ONLY hover rule in the dialog, as in the mock */
.ofd-x:hover {
    background: #e9ebf0;
    color: var(--primary-color);
}

/* ---- body ---- */
.overview-filter-dialog .mud-dialog-content {
    padding: 20px 22px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    min-height: 0;
    border-radius: 0;
    color: inherit;
}

.ofd-f {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ofd-l {
    font-size: 12px;
    font-weight: 600;
    color: #4d5663;
}

/* ---- segmented control ---- */
.ofd-seg {
    display: inline-flex;
    background: #f1f3f7;
    border-radius: 9px;
    padding: 3px;
    gap: 3px;
    align-self: flex-start;
    max-width: 100%;
    overflow-x: auto;
}

.ofd-seg button {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.ofd-seg button.is-on {
    background: #fff;
    box-shadow: 0 1px 3px rgba(40, 50, 80, .12);
    color: var(--primary-color);
}

/* neutralise any global button hover; the mock has none */
.ofd-seg button:hover {
    background: transparent;
    color: #6b7280;
}

.ofd-seg button.is-on:hover {
    background: #fff;
    color: var(--primary-color);
}

/* ---- option chips ---- */
.ofd-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.ofd-chip {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #eef0f3;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #5b6472;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.ofd-chip.is-on {
    background: rgba(var(--primary-rgb), .1);
    border-color: transparent;
    color: var(--primary-color);
}

.ofd-chip:hover {
    border: 1px solid #eef0f3;
    background: #fff;
    color: #5b6472;
}

.ofd-chip.is-on:hover {
    background: rgba(var(--primary-rgb), .1);
    border-color: transparent;
    color: var(--primary-color);
}

/* ---- custom period dates ---- */
.ofd-dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.ofd-date {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ofd-date span {
    font-size: 11.5px;
    color: var(--text-muted);
}

.ofd-date input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 1px solid #e3e7ef;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #232427;
    padding: 0 13px;
    outline: none;
    margin: 0;
}

.ofd-date input:focus {
    outline: none;
    border-color: #e3e7ef;
    box-shadow: none;
}

/* ---- footer ---- */
.overview-filter-dialog .mud-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 22px;
    margin: 0;
    border-top: 1px solid #eef0f3;
    border-radius: 0;
    flex: none;
    background: var(--custom-white);
    color: inherit;
}

.ofd-reset {
    height: 44px;
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin: 0 auto 0 0;
    white-space: nowrap;
}

.ofd-cancel {
    height: 44px;
    padding: 0 18px;
    border: 1px solid #e6e9ef;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #4d5663;
    cursor: pointer;
    margin: 0;
}

.ofd-apply {
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 9px;
    background: var(--primary-color);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), .28);
    white-space: nowrap;
    margin: 0;
}

.ofd-apply i {
    font-size: 16px;
}

.ofd-reset:hover {
    background: none;
    color: var(--primary-color);
}

.ofd-cancel:hover {
    border: 1px solid #e6e9ef;
    background: #fff;
    color: #4d5663;
}

.ofd-apply:hover {
    border: none;
    background: var(--primary-color);
    color: #fff;
}

/* ---- mobile (mock section 3b): 12px margin, Cancel is dropped because the X closes the popup ---- */
@media (max-width: 599.98px) {
    .mud-dialog.overview-filter-dialog {
        width: calc(100% - 24px);
        max-width: none !important;
        margin: 0 12px;
        max-height: calc(100dvh - 24px);
    }

    .overview-filter-dialog .mud-dialog-title {
        padding: 14px 16px;
    }

    .ofd-di {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .overview-filter-dialog .mud-dialog-content {
        padding: 16px;
    }

    /* #993 round 4 (PD14): From/To stack on mobile, two 153px columns overlap the native 16px date control */
    .ofd-dates {
        grid-template-columns: minmax(0, 1fr);
    }

    .overview-filter-dialog .mud-dialog-actions {
        padding: 12px 16px;
    }

    .ofd-cancel {
        display: none;
    }
}