/* ============================================================
   Dale custom UI
   - Blazor reconnect overlay (frosted backdrop + bus–DALE–HASTUS animation)
   - Login screen animated frosted-glass background
   Loaded globally from App.razor. Everything here is pure CSS so the
   reconnect overlay keeps working while the Blazor circuit is down.
   ============================================================ */

/* ============================================================
   1. Blazor reconnect overlay
   Blazor toggles state classes on #components-reconnect-modal:
     .components-reconnect-show     – connection lost, retrying
     .components-reconnect-failed   – retries exhausted (offer manual retry)
     .components-reconnect-rejected – circuit gone (must reload)
   ============================================================ */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

/* The backdrop + centred layer take their frosted look from the SAME Tailwind
   utilities the app Modal uses (see App.razor: bg-gray-900/40 backdrop-blur-md).
   Here we only lift them above everything (app modals are z-[60]/z-[70]) and
   fade them in. */
.dale-rc-overlay {
    z-index: 12000;
    animation: dale-fade-in 0.25s ease both;
}

.dale-rc-card {
    position: relative;
    width: min(92vw, 430px);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.25rem;
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45);
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
    color: #0f172a;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.dale-rc-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.85rem 0 0.35rem;
}

.dale-rc-sub {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

.dale-rc-sub .dale-rc-attempt {
    font-weight: 600;
    color: #16a34a;
}

/* Per-state messages: only show the one matching the current state. */
.dale-rc-trying,
.dale-rc-failed,
.dale-rc-rejected {
    display: none;
}
#components-reconnect-modal.components-reconnect-show .dale-rc-trying {
    display: block;
}
#components-reconnect-modal.components-reconnect-failed .dale-rc-failed {
    display: block;
}
#components-reconnect-modal.components-reconnect-rejected .dale-rc-rejected {
    display: block;
}

.dale-rc-btn {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 0.6rem;
    border: none;
    /* Hardcoded to the tailwind theme's --primary / --primary-soft tokens: this stylesheet has to
       keep working when the Blazor circuit and tailwind bundle are both down, so it can't reach
       out for CSS variables from another file. Keep these two hexes in sync with tailwind.css. */
    background: #2c6b8f;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.dale-rc-btn:hover {
    background: #4a89ac;
}

/* ---- bus – DALE – HASTUS network animation ---- */
.dale-net {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* DALE infinity gently pulses + glows while reconnecting. */
.dale-net .dale-infinity {
    transform-box: fill-box;
    transform-origin: center;
    animation: dale-net-pulse 2.4s ease-in-out infinite;
}

/* Connection lines flow, then periodically break (red) and repair (green). */
.dale-net .dale-link {
    fill: none;
    stroke: #4ade80;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 5 6;
    animation: dale-net-flow 1s linear infinite, dale-net-break 3s ease-in-out infinite;
}
.dale-net .dale-link-2 {
    animation-delay: 0s, 0.4s;
}

/* The little spark that appears at the break point. */
.dale-net .dale-spark {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: dale-net-spark 3s ease-in-out infinite;
}
.dale-net .dale-spark-2 {
    animation-delay: 0.4s;
}

@keyframes dale-net-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(74, 222, 128, 0)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.7)); }
}
@keyframes dale-net-flow {
    to { stroke-dashoffset: -11; }
}
@keyframes dale-net-break {
    0%, 35%  { stroke: #4ade80; opacity: 1; }
    45%, 55% { stroke: #f87171; opacity: 0.45; }
    65%, 100% { stroke: #4ade80; opacity: 1; }
}
@keyframes dale-net-spark {
    0%, 38%   { opacity: 0; transform: scale(0.5); }
    45%, 55%  { opacity: 1; transform: scale(1.15); }
    62%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes dale-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Nav labels / branding fade in (with a tiny slide) when the collapsed sidebar
   expands. Applied by NavMenu to the elements it reveals after the width
   animation, so the text eases in instead of popping. */
@keyframes dale-nav-reveal {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}
.dale-nav-reveal {
    animation: dale-nav-reveal 0.2s ease-out both;
}

/* ============================================================
   Secondary fly-out rail (DALE-124).
   A grouped link collection (e.g. Integration Logs) opens a second rail to the
   right of the main one. Rendered inside the sidebar <aside> (so it inherits the
   aside's `hidden lg:flex` — desktop only) and positioned fixed, so it slides over
   the page without resizing it. Width + left offset mirror the main rail's
   collapsed/expanded state. Gray (vs the black main rail) for a clear setoff.
   Styled here (not via Tailwind utilities) so the offsets/animation exist even
   when the pre-built Tailwind output isn't regenerated.
   ============================================================ */
.dale-flyout {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 40;                 /* within the aside's z-40 stacking context */
    display: flex;
    flex-direction: column;
    background-color: #374151;   /* gray-700 — clear setoff from the black main rail */
    border-left: 1px solid #4b5563; /* gray-600 */
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35);
    transition: left 0.2s ease, width 0.2s ease;  /* track the main rail's collapse animation */
    animation: dale-flyout-in 0.18s ease-out both;
}
.dale-flyout--full      { left: 14rem; width: 14rem; }  /* main rail lg:w-56 */
.dale-flyout--collapsed { left: 4rem;  width: 4rem;  }  /* main rail lg:w-16 */

/* Transparent click-catcher over the page area to the right of the main rail.
   Starts at the rail's right edge so the main rail stays clickable; the panel
   (z 40) sits above it (z 30). Clicking it closes the fly-out. */
.dale-flyout-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
}
.dale-flyout-backdrop--full      { left: 14rem; }
.dale-flyout-backdrop--collapsed { left: 4rem; }

@keyframes dale-flyout-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dale-flyout { animation: none; }
}

/* Fast sidebar-rail tooltip (DALE-124). Body-level + fixed (set by window.daleRailTip) so it
   overlays on top of the page and isn't clipped by the rail's overflow scroll container. */
.dale-rail-tip {
    position: fixed;
    display: none;
    z-index: 80;                 /* above the sidebar (z-40) and its fly-out */
    max-width: 16rem;
    padding: 4px 9px;
    border-radius: 6px;
    background-color: #1f2937;   /* gray-800 */
    color: #f9fafb;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
    pointer-events: none;        /* never steals hover */
}

/* ============================================================
   2. Login screen animated frosted-glass background
   ============================================================ */
.dale-login {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    /* Black base with a faint dark-green glow at the centre. */
    background: radial-gradient(circle at 50% 28%, #08160e 0%, #000000 68%);
}

/* Layer of large, soft, slowly drifting colour blobs that glow. */
.dale-login-blobs {
    position: absolute;
    inset: -25%;
    z-index: 0;
    filter: blur(75px);
    pointer-events: none;
}
.dale-login-blobs .blob {
    position: absolute;
    width: 46vw;
    height: 46vw;
    min-width: 360px;
    min-height: 360px;
    border-radius: 9999px;
    opacity: 0.5;
    mix-blend-mode: screen;
    will-change: transform;
}
/* Shades of green, light -> dark, glowing (screen blend) on the black base. */
.blob-1 { background: #86efac; top: 2%;  left: 6%;  animation: dale-drift-1 19s ease-in-out infinite; } /* light  */
.blob-2 { background: #4ade80; top: 30%; left: 48%; animation: dale-drift-2 24s ease-in-out infinite; } /* green  */
.blob-3 { background: #facc15; top: 48%; left: 10%; animation: dale-drift-3 27s ease-in-out infinite; } /* yellow accent */
.blob-4 { background: #15803d; top: 8%;  left: 55%; animation: dale-drift-4 22s ease-in-out infinite; } /* dark   */

/* Frosted-glass sheen over the moving colours. */
.dale-login-frost {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(42px) saturate(135%);
    backdrop-filter: blur(42px) saturate(135%);
}

.dale-login-content {
    position: relative;
    z-index: 2;
}

/* Frosted login card. Defined here (not via Tailwind utilities) because the
   project's Tailwind output is pre-built and not regenerated on dotnet build,
   so newly-introduced utility classes wouldn't exist. Unlayered, so it wins
   over the layered .card component background. */
.dale-login-card {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45);
}
/* Dark-theme frosted card: the light-mode glass tint above stayed bright white regardless of
   theme (no override existed), which also made the card's own token-based labels/inputs -
   already dark-aware via --dale-text/--dale-surface - unreadable (light-grey label text on a
   near-opaque white panel). Frost the dark surface token instead of white. */
[data-theme="dark"] .dale-login-card {
    background: rgba(21, 27, 24, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

@keyframes dale-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(12vw, 9vh) scale(1.18); }
}
@keyframes dale-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1.1); }
    50%      { transform: translate(-13vw, 7vh) scale(0.92); }
}
@keyframes dale-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(0.95); }
    50%      { transform: translate(9vw, -10vh) scale(1.2); }
}
@keyframes dale-drift-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-10vw, -8vh) scale(1.12); }
}

/* Respect reduced-motion preferences: keep the look, drop the motion. */
@media (prefers-reduced-motion: reduce) {
    .dale-net .dale-infinity,
    .dale-net .dale-link,
    .dale-net .dale-spark,
    .dale-login-blobs .blob {
        animation: none !important;
    }
}

/* ============================================================
   Navbar scroll area — slim, auto-hiding scrollbar.
   The NavMenu's <nav> overflows on short viewports; the OS default
   scrollbar looks heavy on the dark rail. Render a thin, rounded thumb
   that's invisible until the rail is hovered/focused (and that only
   exists when the content actually overflows — so it also hints the
   rail is scrollable). Nothing is permanently in view.
   ============================================================ */

/* Firefox */
.dale-nav-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}
.dale-nav-scroll:hover,
.dale-nav-scroll:focus-within {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

/* WebKit (Chrome/Edge/Safari) */
.dale-nav-scroll::-webkit-scrollbar {
    width: 8px;
}
.dale-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.dale-nav-scroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 9999px;
    border: 2px solid transparent;   /* inset → thumb reads as ~4px slim */
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}
.dale-nav-scroll:hover::-webkit-scrollbar-thumb,
.dale-nav-scroll:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
}
.dale-nav-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   Software-error modal — replaces Blazor's default #blazor-error-ui
   yellow bar with a frosted card matching the reconnect overlay.
   Hidden until Blazor sets display:block on an unhandled error.
   ============================================================ */
#blazor-error-ui { display: none; }
#blazor-error-ui .dale-rc-overlay { z-index: 12001; } /* sit above the reconnect overlay */

.dale-err-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #fef2f2;
    color: #dc2626;
}
.dale-err-icon svg { width: 1.6rem; height: 1.6rem; }

.dale-err-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.25rem;
}
.dale-err-actions .dale-rc-btn { margin-top: 0; }

.dale-rc-btn.secondary { background: #e2e8f0; color: #0f172a; }
.dale-rc-btn.secondary:hover { background: #cbd5e1; }

/* Hidden until "More details" is clicked. */
.dale-err-details {
    display: none;
    margin: 0.9rem 0 0;
    max-height: 32vh;
    overflow: auto;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    line-height: 1.45;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.6rem;
    padding: 0.6rem 0.75rem;
}

/* Dark-mode overrides for the reconnect overlay + error modal above — both frosted
   cards float over the whole app (including on top of the dark canvas), so they need
   their own dark palette rather than inheriting Tailwind's per-page dark: classes. */
[data-theme="dark"] .dale-rc-card {
    background: rgba(21, 27, 24, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--dale-text-heading);
}
[data-theme="dark"] .dale-rc-sub {
    color: var(--dale-text-muted);
}
[data-theme="dark"] .dale-rc-btn.secondary {
    background: var(--dale-surface-2);
    color: var(--dale-text);
}
[data-theme="dark"] .dale-rc-btn.secondary:hover {
    background: var(--dale-surface-hover);
}
[data-theme="dark"] .dale-err-icon {
    background: rgba(220, 38, 38, 0.15);
    color: #fca5a5;
}
[data-theme="dark"] .dale-err-details {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

/* ============================================================
   MudBlazor table pager — wrap instead of overflowing a narrow column.
   In a narrow card/column (e.g. the workflow designer's Version-history
   panel) the pager toolbar's fixed single-line layout forced the table
   wider than the card, producing a double horizontal scrollbar. Letting
   the toolbar wrap collapses the table back to the card width. Unlayered,
   so it wins over MudBlazor's layered nowrap rule without !important.
   ============================================================ */
.mud-table-pagination-toolbar {
    flex-wrap: wrap;
    height: auto;
    row-gap: 4px;
    justify-content: flex-end;
}
.mud-table-pagination-toolbar .mud-table-pagination-spacer {
    flex-grow: 0;
    flex-basis: 0;
    min-width: 0;
}

/* DALE-84 — floating help tooltip. Rendered on <body> by window.daleHelp and positioned
   fixed, so it overlays on top of the mapper panels/modals and never affects their scroll. */
.dale-help-floating {
    position: fixed;
    display: none;
    z-index: 100000; /* above the mapping modals (which sit around z-index 10060) */
    max-width: 340px;
    padding: 8px 10px;
    border-radius: 8px;
    background-color: #1f2937; /* gray-800 */
    color: #f9fafb;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .25), 0 4px 6px -4px rgba(0, 0, 0, .25);
    pointer-events: none; /* never steals hover or blocks clicks */
}
.dale-help-floating code {
    background-color: rgba(255, 255, 255, .14);
    padding: 1px 4px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}
.dale-help-floating em {
    font-style: italic;
    color: #e5e7eb;
}