/* =====================================================================
   Optegrity Resolve — Advanced Search "slide-in Drawer"
   ---------------------------------------------------------------------
   A modern, space-saving replacement for the old expand-in-place
   Advanced Search panel.  The search form now lives in a Microsoft
   Teams style flyout that slides in from the right and floats over the
   page, so the board / table below never gets pushed down.

   Reusable across every page that renders an Advanced Search form:
   just wrap the <form> in the drawer markup (see head.html helpers) and
   give the toggle button the .as-filter-btn class.  Styling keys off
   the existing Bootstrap .card-body / .card-footer that the forms
   already emit, so the field markup itself does not have to change.

   Font + colours intentionally mirror planner.css (Segoe UI + Teams
   purple #6264a7) so the drawer reads as part of the same family.
   ===================================================================== */

:root {
    --as-accent: #6264a7;          /* Teams purple (matches planner.css) */
    --as-accent-dark: #575aa0;
    --as-surface: #ffffff;
    --as-border: #e4e2e6;
    --as-ink: #242424;
    --as-muted: #605e5c;
    --as-footer-bg: #faf9fb;
    --as-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Dimmer behind the drawer ------------------------------------- */
.as-scrim {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 28, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    /* Above the app chrome (top navbar / sidebar use z-index up to ~9002)
       so the drawer reads as a true modal flyout and nothing from the
       header bleeds over it. */
    z-index: 9998;
}
.as-scrim.show { opacity: 1; visibility: visible; }

/* ---- The drawer itself -------------------------------------------- *
 * NOTE: we animate `right` (not `transform`).  A transform on the
 * drawer would establish a containing block for position:fixed
 * descendants, which would trap the Send-Email modal inside the drawer.
 * Animating `right` keeps fixed-position modals full-screen.           */
.as-drawer {
    position: fixed;
    top: 0;
    right: -480px;                 /* parked off-canvas */
    height: 100%;
    width: 440px;
    max-width: 92vw;
    background: var(--as-surface);
    border-left: 1px solid var(--as-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, .14);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right .28s cubic-bezier(.4, 0, .2, 1);
    font-family: var(--as-font);
    color: var(--as-ink);
}
.as-drawer.open { right: 0; }

/* ---- Drawer header (title + close) -------------------------------- */
.as-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--as-surface);
    border-bottom: 1px solid var(--as-border);
}
.as-drawer-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--as-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.as-drawer-head h3 .as-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #ecebf5;
    color: var(--as-accent);
    font-size: 14px;
}
.as-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--as-muted);
    font-size: 20px;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s ease, color .12s ease;
    flex: 0 0 auto;
}
.as-close:hover { background: #f0eff7; color: var(--as-ink); }
.as-close:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; }

/* ---- The form fills the rest and lays itself out ------------------ *
 * The C# code emits:  <form> <div.card-body>…fields…</div>
 *                            <div.card-footer>…Search/Export…</div> </form>
 * so we make the form a flex column: body scrolls, footer is pinned.   */
.as-drawer > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}

/* Hand-written pages put a .card (not a <form>) directly in the drawer;
   lay it out the same way so its card-body scrolls and footer pins. */
.as-drawer > .card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.as-drawer .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: #c8c6c4 transparent;
}
.as-drawer .card-body::-webkit-scrollbar { width: 8px; }
.as-drawer .card-body::-webkit-scrollbar-thumb { background: #c8c6c4; border-radius: 8px; }
.as-drawer .card-body::-webkit-scrollbar-thumb:hover { background: #a19f9d; }
.as-drawer .card-footer {
    flex: 0 0 auto;
    background: var(--as-footer-bg);
    border-top: 1px solid var(--as-border);
    padding: 13px 20px;
    text-align: right;
}

/* ---- Stack fields one-per-row inside the narrow drawer ------------ *
 * The forms use Bootstrap col-md-* widths tuned for a full-width page.
 * Inside a 440px drawer those become far too cramped, so force every
 * field group to a single column.  (Date From/To pairs still read well
 * stacked, and everything lines up cleanly.)                           */
.as-drawer .form-row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.as-drawer .form-group { margin-bottom: 14px; }
.as-drawer .form-group > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--as-muted);
    margin-bottom: 5px;
}
/* the old "invisible label" spacer used to align date pickers side by
   side is meaningless once stacked — collapse it */
.as-drawer .form-group > label[style*="white"] { display: none; }

/* Section separators inside the drawer body */
.as-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--as-accent);
    margin: 6px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--as-border);
}
.as-group-label:first-child { margin-top: 0; }

/* Full-width primary actions in the footer read cleaner than centered */
.as-drawer .card-footer .btn { margin-left: 8px; margin-bottom: 6px; }

/* ---- The toggle button in the command bar ------------------------- */
.btn.as-filter-btn {
    background: var(--as-accent);
    border-color: var(--as-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.btn.as-filter-btn:hover,
.btn.as-filter-btn:focus,
.btn.as-filter-btn:active {
    background: var(--as-accent-dark);
    border-color: var(--as-accent-dark);
    color: #fff;
    box-shadow: none;
}
.btn.as-filter-btn i { font-size: 13px; }

/* Active-filter count pill.  Flex-centered so the digit sits dead
   centre (the old version rendered the number too high). */
.btn.as-filter-btn .as-badge {
    display: none;                 /* shown by JS only when filters are active */
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: #ffffff;
    color: var(--as-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.btn.as-filter-btn .as-badge.show { display: inline-flex; }

/* ---- Saved "Quick Filters" shown in the command bar --------------- */
.qf-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--as-muted);
    margin: 0 4px 0 6px;
    vertical-align: middle;
}
.qf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    margin: 0 2px;
    border-radius: 999px;
    border: 1px solid var(--as-border);
    background: #fff;
    color: var(--as-ink);
    cursor: pointer;
    vertical-align: middle;
    transition: background .12s ease, border-color .12s ease;
}
.qf-chip:hover { background: #ecebf5; border-color: #c9c7e8; color: var(--as-accent); }
.qf-chip.active { background: #ecebf5; border-color: #c9c7e8; color: var(--as-accent); }
.qf-chip-del {
    color: #c0392b;
    cursor: pointer;
    font-size: 12px;
    margin-left: 2px;
    vertical-align: middle;
}
.qf-chip-del:hover { color: #a52d22; }

/* ---- Dropdowns opened from inside the drawer ---------------------- *
 * The multi-selects use data-container='body', so bootstrap-select
 * renders their menus in a body-level .bs-container. Now that the
 * drawer sits at z-index 9999, those menus must be lifted above it or
 * they open *behind* the drawer. */
.bs-container { z-index: 10050 !important; }
.bs-container .dropdown-menu { z-index: 10050 !important; }
/* select2 menus (used on some filters) get the same treatment */
.select2-container.select2-container--open { z-index: 10050 !important; }

/* ---- Empty state (report pages before a report is generated) ------ */
.as-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 56px 24px;
    margin-top: 4px;
    background: var(--as-surface);
    border: 1px solid var(--as-border);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 1.6px 3.6px rgba(0,0,0,.08));
    font-family: var(--as-font);
    color: var(--as-ink);
}
.as-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ecebf5;
    color: var(--as-accent);
    font-size: 26px;
    margin-bottom: 18px;
}
.as-empty-state h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--as-ink);
}
.as-empty-state p {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--as-muted);
    max-width: 42ch;
}
.as-empty-state .btn.as-filter-btn { padding: 9px 18px; }

/* Prevent the page behind from scrolling while the drawer is open */
body.as-drawer-open { overflow: hidden; }

@media (max-width: 575.98px) {
    .as-drawer { width: 100%; right: -100%; }
}