/* ── Shared slide-over drawer (<x-ui::drawer>) ───────────────────────────────
 * The unified shell behind the projects board quick-edit panel and the
 * datasets/Currents advanced panel. Merges the "best bits" of the two originals:
 * the transform slide + backdrop + dialog a11y from the board's quick-edit drawer,
 * and the teleport-to-body escape-hatch from the datasets ds-panel.
 *
 * Structure: the teleported ROOT (.ui-drawer) is a fixed full-screen flex layer
 * that carries the x-show binding and doubles as the dimmed backdrop container;
 * the panel is a flex child pinned to one side that slides in via CSS animation.
 *
 * Theming: every colour/shadow/gutter is a custom property with the current value
 * as its fallback, so a consumer (or dark-mode.css) can override without touching
 * this file. Per-instance geometry is set inline by the component:
 *   --ui-drawer-w  panel width      --ui-drawer-z  stacking level of the layer
 *
 * Stacking is assigned by assets/js/drawer.js, not chosen per consumer — the
 * fallback below only covers the frame before Alpine boots. That module also
 * publishes --ui-drawer-top-z on :root, so content that must sit ABOVE the top
 * drawer can use calc(var(--ui-drawer-top-z) + 5) instead of a magic number. */

/* x-cloak guard — hide the drawer until Alpine initialises, on every page that
   uses the component (not every layout defines this rule globally). Owned here so
   the drawer never flashes; consumers should NOT re-declare it. */
[x-cloak] { display: none !important; }

.ui-drawer {
    /* themable tokens (override on .ui-drawer or a parent) */
    --ui-drawer-scrim: rgba(17, 24, 39, 0.35);
    --ui-drawer-bg: #fff;
    --ui-drawer-border: #e5e7eb;
    --ui-drawer-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    --ui-drawer-pad: 11px 16px;   /* shared header/footer gutter */

    position: fixed;
    inset: 0;
    /* Above the AI assistant FAB + chat panel (10000/10001). The stack manager
       overwrites this inline the moment the drawer opens. */
    z-index: var(--ui-drawer-z, 10050);
    display: flex;
}
.ui-drawer[data-side="right"] { justify-content: flex-end; }
.ui-drawer[data-side="left"]  { justify-content: flex-start; }

.ui-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: var(--ui-drawer-scrim);
}

.ui-drawer__panel {
    position: relative;   /* sit above the absolutely-positioned backdrop */
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    width: var(--ui-drawer-w, min(440px, 94vw));
    max-width: 96vw;
    background: var(--ui-drawer-bg);
    box-shadow: var(--ui-drawer-shadow);
    display: flex;
    flex-direction: column;
    animation: ui-drawer-in 0.2s ease;
}
/* Each side sets its own slide origin explicitly (no reliance on an unset var). */
.ui-drawer[data-side="right"] .ui-drawer__panel {
    border-left: 1px solid var(--ui-drawer-border);
    --ui-drawer-from: 100%;
}
.ui-drawer[data-side="left"] .ui-drawer__panel {
    border-right: 1px solid var(--ui-drawer-border);
    --ui-drawer-from: -100%;
}

@keyframes ui-drawer-in {
    from { transform: translateX(var(--ui-drawer-from, 100%)); }
    to   { transform: translateX(0); }
}

.ui-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
}

/* Default header chrome — also the standard wrapper a #header slot should reuse
   (both consumers do) so the strip padding/border lives in one place. */
.ui-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: var(--ui-drawer-pad);
    border-bottom: 1px solid var(--ui-drawer-border);
    flex-shrink: 0;
}
.ui-drawer__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}
.ui-drawer__x {
    flex: none;
    border: 0;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: inline-flex;
}
.ui-drawer__x:hover { color: #374151; }

.ui-drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* positioning + scroll context for overlay children a caller drops in
       (e.g. the datasets view-switcher dropdown anchors to this box). */
    position: relative;
}

/* Standard sticky-footer wrapper the raw footer slot should be wrapped in. */
.ui-drawer__foot {
    flex-shrink: 0;
    border-top: 1px solid var(--ui-drawer-border);
    padding: var(--ui-drawer-pad);
    background: var(--ui-drawer-bg);
}

/* ── Dark mode ───────────────────────────────────────────────────────────────
 * The panel surface, border and shadow are custom properties rather than
 * Tailwind utilities, so dark-mode.css cannot remap them — remap the tokens
 * here instead. Text, inputs and gray-* borders INSIDE the drawer are utilities
 * and adapt on their own. */
html.dark .ui-drawer {
    --ui-drawer-scrim: rgba(0, 0, 0, 0.5);
    --ui-drawer-bg: #1e293b;
    --ui-drawer-border: #334155;
    --ui-drawer-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
}
html.dark .ui-drawer__title { color: #e2e8f0; }
html.dark .ui-drawer__x:hover { color: #e2e8f0; }

/* ── Compact form chrome ─────────────────────────────────────────────────────
 * A quick-edit drawer is denser than a full page form: tighter grid gutters and
 * regular-weight labels. Scoped to the drawer so the shared form components are
 * untouched everywhere else. */
.ui-drawer .field { padding-top: 0; }
.ui-drawer .field label { font-weight: 400; }
.ui-drawer form .grid {
    row-gap: .6rem;
    column-gap: 1rem;
    padding: .25rem 0 0;
}