/* ============================================================
   AQ DOCK
   Reusable "dockable modal" framework (wwwroot/js/aq-dock.js).
   A non-modal floating panel (no backdrop - the rest of the page stays
   interactive) that can be minimized into a tray icon next to the
   notification bell and restored later in the same position/state.
   Panel chrome/transitions deliberately mirror the existing notification
   panel (notification-centre.css's .aq-notif-panel/.aq-notif-panel-open)
   rather than a Bootstrap modal, since a modal's blocking backdrop is
   exactly what this needs to not have.
   ============================================================ */

/* ─── Tray (lives next to #aq-notif-btn-wrap in the header) ────────────
   One generic icon (not one per docked item) - a small counter badge and a
   dropdown list take over once more than one panel is docked. Styled the
   same as every other header icon (.aq-header-icon-btn, aquilastrap.css),
   just with its own badge/list on top. */
.aq-dock-tray-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.aq-dock-tray-btn {
    position: relative;
}

.aq-dock-tray-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    display: none;
    background-color: var(--aq-error-colour, #ff0000);
    border: 1.5px solid var(--aq-secondary-colour-dark-25, #213b5b);
    color: #fff;
    font-size: 0.575rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.175rem 0.325rem;
    border-radius: 999px;
    min-width: 1rem;
    text-align: center;
}

.aq-dock-tray-badge.aq-dock-tray-badge-visible {
    display: inline-block;
}

/* ─── Dropdown list (only shown/used when 2+ panels are docked) ──────── */
/* Anchored top-right, directly under the tray button - transform-origin
   matches that corner so the open/close motion reads as "unfurling from the
   icon" rather than a generic fade, and the exit (closed state, below) runs
   faster than the entrance (.aq-dock-tray-list-open) per this app's own
   motion timing (routine state change: entrance ~200ms, exit quicker). */
.aq-dock-tray-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    /* Fixed, and positioned by JS from the tray button's own rect, because the list is moved out of the
       header into #aq-dock-host before it opens. .app-header is position:relative with z-index:10, which
       makes it a stacking context - anything inside it is sealed below that, so the list could never
       paint above the dock panels (8500+) from in there no matter what z-index it carried. Out at
       body level its own z-index finally competes with theirs. */
    position: fixed;
    min-width: 16rem;
    max-width: 20rem;
    background: var(--aq-white);
    border-radius: var(--aq-radius, 0.6rem);
    box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 9000;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform-origin: top right;
    transform: translateY(-8px) scale(0.97);
    transition: opacity 0.14s cubic-bezier(0.16, 1, 0.3, 1), transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.14s;
}

[data-theme="dark"] .aq-dock-tray-list {
    background: var(--aq-surface-dark-card, #31353e);
}

.aq-dock-tray-list.aq-dock-tray-list-open {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

/* Each docked item is its own contained row now (radius + gap from the list's
   own padding above), not a full-bleed divider row - reads as a set of
   distinct, liftable targets rather than a flat menu. */
.aq-dock-tray-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--aq-radius-btn, 0.5rem);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Staggers in on open (list-appears-as-a-list) - capped via the index this
   app already caps BlazorAuditTrail's own timeline stagger at, same reasoning:
   a handful of items feel considered, a long list shouldn't make the last one
   wait through a slow cascade. Only runs while the list is actually open, so
   closing doesn't replay it in reverse. */
.aq-dock-tray-list-open .aq-dock-tray-item {
    animation: aq-dock-tray-item-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--aq-stagger, 0) * 30ms);
}

@keyframes aq-dock-tray-item-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aq-dock-tray-list {
        transform: none;
    }

    .aq-dock-tray-list.aq-dock-tray-list-open {
        transform: none;
    }

    .aq-dock-tray-item {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* Violet wash, same recipe as .aq-btn-outline.aq-accent's hover elsewhere in
   the app - a tray item sits on the same plain white/dark card surface an
   outline button does, so it reuses that exact value rather than the
   generic neutral-gray hover this used to have. Ties "you can interact with
   this" back into the one accent this app already reserves for it. The soft
   lift (shadow) reinforces each row now reading as its own container, not
   just a colour change on a flat strip. */
.aq-dock-tray-item:hover {
    background-color: rgba(124, 77, 255, 0.08);
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .aq-dock-tray-item:hover {
    background-color: rgba(124, 77, 255, 0.15);
}

.aq-dock-tray-item-icon {
    color: var(--aq-secondary-colour, #2c4f7a);
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.aq-dock-tray-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--aq-text-colour);
}

.aq-dock-tray-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--aq-radius, 0.6rem);
    color: var(--aq-neutral-colour-light-50, #a1a3a9);
    cursor: pointer;
}

.aq-dock-tray-item-remove:hover {
    background-color: var(--aq-neutral-colour-light-90, #ededee);
    color: var(--aq-error-colour, #ff0000);
}

/* ─── Panel shell ──────────────────────────────────────────────────── */
.aq-dock-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    background: var(--aq-white);
    border-radius: var(--aq-radius, 0.6rem);
    box-shadow: 0 0.6rem 1.75rem rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.07);
    z-index: 8500;
    overflow: hidden;
    min-width: 20rem;
    min-height: 12rem;
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transform-origin: center center;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

[data-theme="dark"] .aq-dock-panel {
    background: var(--aq-surface-dark-card, #31353e);
}

/* The one panel currently in play (see AqDock.bringToFront) gets the deeper,
   hero-band-strength shadow - the rest of the stack stays calm underneath
   it, same as .aq-home-welcome is the one deliberately lifted surface on
   the home page rather than every card competing for the same depth. */
.aq-dock-panel.aq-dock-panel-focused {
    box-shadow: 0 1.25rem 3rem -0.5rem rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Applied while minimizing/restoring (and on first open) so the panel visibly
   flies toward/from the tray icon's actual screen position - not a generic
   corner - rather than just popping in and out or scaling in place. The two
   custom properties are set by aq-dock.js (trayFlyDelta/applyTrayFlyDelta)
   right before this class toggles, computed fresh each time since the tray
   button's position can change (window resize, other docks opening/closing).
   Removed once the panel is actually hidden (see aq-dock.js) so a hidden
   panel doesn't sit mid-transition if inspected/resized while minimized. */
.aq-dock-panel.aq-dock-panel-collapsing {
    opacity: 0;
    transform: translate(var(--aq-dock-fly-x, 0px), var(--aq-dock-fly-y, 0px)) scale(0.08);
}

@media (prefers-reduced-motion: reduce) {
    .aq-dock-panel {
        transition: opacity 0.12s linear !important;
    }

    .aq-dock-panel.aq-dock-panel-collapsing {
        transform: none;
    }
}

/* Muted navy by default - the calm state for any panel sitting behind the
   focused one. .aq-dock-panel-focused (below) is the loud version, applied
   to whichever panel AqDock.bringToFront most recently targeted; with only
   one panel open that's always the current one, so this is the state a
   single docked panel almost never actually shows. */
.aq-dock-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem 0.6rem 0.9rem;
    background: linear-gradient(135deg, var(--aq-secondary-colour-dark-25, #213B5B) 0%, var(--aq-secondary-colour, #2C4F7A) 100%);
    color: var(--aq-white, #fafbfc);
    cursor: move;
    user-select: none;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

/* The focused panel's header - same diagonal gradient as at rest, lifted by the top-right glow that
   .aq-home-welcome (the app's one other "boldest surface" treatment) uses. Focus is signalled by that
   glow and by the panel's own shadow rather than by a different hue, so a stack of docks reads as one
   family with one of them lit rather than as two different colours of panel. */
.aq-dock-panel.aq-dock-panel-focused .aq-dock-panel-header {
    background:
        radial-gradient(140% 160% at 100% -20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, var(--aq-secondary-colour-dark-25, #213B5B) 0%, var(--aq-secondary-colour, #2C4F7A) 100%);
}

.aq-dock-panel-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
}

.aq-dock-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.aq-dock-panel-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: none;
    border: none;
    border-radius: var(--aq-radius, 0.6rem);
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s ease;
}

/* Same violet glow as every other icon button sitting on this app's navy
   chrome (.aq-header-icon-btn in the nav header) - unifies the dock's own
   header controls into that existing "interactive on dark chrome" language
   instead of a plain generic white overlay. */
.aq-dock-panel-action-btn:hover {
    background-color: color-mix(in srgb, var(--aq-accent-colour-light-50, #bea6ff) 30%, transparent);
}

.aq-dock-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.aq-dock-panel-body iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* While dragging the header or resizing, the cursor crosses over the iframe -
   without this, mousemove events fire inside the iframe's own document
   instead of bubbling to the parent page, and the drag/resize appears to
   "stick". Toggled on for the gesture's duration by aq-dock.js. */
.aq-dock-panel-dragging .aq-dock-panel-body iframe,
.aq-dock-panel-resizing .aq-dock-panel-body iframe {
    pointer-events: none;
}

/* ─── Resize handle (bottom-right corner only, v1) ────────────────────── */
.aq-dock-panel-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    cursor: nwse-resize;
    z-index: 1;
}

.aq-dock-panel-resize-handle::after {
    content: '';
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--aq-neutral-colour-light-50, #a1a3a9);
    border-bottom: 2px solid var(--aq-neutral-colour-light-50, #a1a3a9);
    opacity: 0.7;
}

/*------------------------------------*\
    DOCKED PAGE CONTENT

    These rules apply INSIDE the panel's iframe, not to the panel itself - the .aq-docked marker is put on
    <html> by _Layout.cshtml's own head script when a page detects it is being rendered in a frame.

    The dock panel is already the container: its header carries the title, and its border, radius and
    shadow bound the content. A page that also wraps itself in a bordered, shadowed card therefore draws a
    second box a few pixels inside the first one, which is the thin outline you see around docked content.
    Nothing rendered in a dock needs its own container, so the card keeps its background and spacing and
    gives up its edge. (.shadow is `!important` in Bootstrap, hence matching it here.)
\*------------------------------------*/

.aq-docked .card {
    border: none !important;
    box-shadow: none !important;
}

/*
    The panel's own surface is the only background inside a dock.

    An iframe's document canvas defaults to opaque #ffffff, which is not the same white as the panel
    (--aq-white, #fafbfc) - so docked content sat on a slightly different ground from the chrome around it,
    and any wrapper carrying its own fill added a third. Making the document transparent lets the panel
    background show through everywhere, in both themes, with nothing to keep in sync.
*/
.aq-docked,
.aq-docked body,
.aq-docked #MainBodyDiv,
/* The app's own page-level wrapper fill. On a full page it gives the panels something to sit on; in a
   dock it is just a band behind the content, so it goes the same way as the rest. */
.aq-docked .grey-background-colour {
    background: transparent !important;
}

/*
    Separation between sections, for a docked page that has more than one.

    Space and a heading rule, never a box or a fill. Each page brings its own mb-3/mb-4 depending on when
    it was written, which on a full page is absorbed by the cards' own borders and here just produced
    uneven gaps between sections that no longer have edges - so the margin is normalised to one value
    (theirs are spacing utilities, hence !important to reach them).
*/
.aq-docked .card {
    margin-bottom: 0 !important;
}

.aq-docked .card + .card {
    margin-top: 1.35rem;
}

/*
    Section headings inside a dock.

    A .card-header is normally a filled band (--aq-white-2, 60px min-height, hairline underneath) and that
    works because the card's own border closes it off at both ends. With the border gone it had nothing
    containing it and read as a stray dark stripe across the panel.

    So the band goes and the heading does the work instead: no fill, a definite rule underneath in the
    heading's own teal, and the space tightened up now that there is no box to fill out. Sections stay
    clearly separate - they are just separated by a line and by air rather than by two nested boxes.
*/

.aq-docked .card > .card-header {
    background-color: transparent;
    border-bottom: 2px solid color-mix(in srgb, var(--aq-main-colour) 40%, transparent);
    /* 60px is sized to give a filled bar presence; without the fill it is just a gap above the rule.
       Horizontal padding is left at the card's own, so the rule runs the full width of the panel and the
       heading still lines up with whatever the section puts below it - a .card-body's padding, or a
       table that brings its own. */
    min-height: 0;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.aq-docked .card > .card-footer {
    background-color: transparent;
    border-top: 1px solid color-mix(in srgb, var(--aq-grey-light) 55%, transparent);
}

[data-theme="dark"] .aq-docked .card > .card-header,
[data-theme="dark"] .aq-docked .card > .card-footer {
    background-color: transparent;
}