/*
 * App chrome — top bar, pinnable navigation drawer, user menu.
 *
 * The layout concept is konekallio-erp's, deliberately: a fixed top bar, a left
 * drawer that can be docked open, groups that reveal their items as hover
 * flyouts on desktop and an accordion on mobile, and one scroll region for the
 * page. That arrangement is proven in daily use there, so it is reproduced
 * here rather than reinvented.
 *
 * What differs is the surface. This is a control plane for autonomous agents,
 * not a bookkeeping ERP: the chrome reads as an instrument panel, and colour is
 * used as signal rather than decoration —
 *
 *   violet  the thing you are looking at (active navigation)
 *   sky     something is running right now
 *   amber   something is waiting for a person
 *
 * Amber is deliberately the only warm colour in the interface, because
 * "a run is parked waiting for your approval" is the one state that must never
 * be missed in a glance across the screen.
 */

:root {
    --ra-topbar-h: 56px;
    --ra-drawer-w: 17rem;

    /* Ground and surfaces — blue-black, never neutral grey, so the accents
       read as emitted light rather than ink. */
    --ra-void: #080b12;
    --ra-panel: #0f1522;
    --ra-panel-2: #151d2e;
    --ra-panel-3: #1b2437;
    --ra-line: #1f2a3d;
    --ra-line-soft: rgba(124, 92, 255, .16);

    --ra-text: #e6eaf2;
    --ra-text-dim: #97a1b7;
    --ra-text-faint: #6b7590;

    --ra-accent: #7c5cff;
    --ra-accent-bright: #9b83ff;
    --ra-accent-soft: rgba(124, 92, 255, .18);
    --ra-accent-tint: rgba(124, 92, 255, .12);

    --ra-live: #38bdf8;
    --ra-signal: #ffb020;
    --ra-good: #34d399;
    --ra-bad: #fb7185;

    --ra-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --ra-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ra-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
    background: var(--ra-void);
    color: var(--ra-text);
    font-family: var(--ra-font-body);
    overflow: hidden;
}

/* Vue mounts asynchronously — hide unrendered roots so nobody sees
   {{ moustache }} markup before mount. */
[v-cloak] { display: none !important; }

h1, h2, h3, h4, h5, h6, .ra-display { font-family: var(--ra-font-display); letter-spacing: -.01em; }

/* Identifiers are machine facts: run ids, commit hashes, agent slugs, tokens.
   They get the mono face everywhere so the eye learns to trust the shape. */
code, kbd, samp, pre, .ra-mono { font-family: var(--ra-font-mono); }

/* Bootstrap's default code colour is a pink tuned for a white page; on this
   ground an identifier should read as accent-lit text, not as an error. */
code {
    color: var(--ra-accent-bright);
    background: rgba(124, 92, 255, .1);
    padding: .05rem .3rem;
    border-radius: .25rem;
}

/* ------------------------------------------------------------------ top bar */
.ra-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ra-topbar-h);
    z-index: 1031;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .9rem;
    background: linear-gradient(180deg, #121a2a 0%, var(--ra-panel) 100%);
    border-bottom: 1px solid var(--ra-line);
}

/* The rail: a hairline of accent light under the bar. Quiet, always there,
   and the one place the chrome allows itself a gradient. */
.ra-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ra-accent) 18%,
        var(--ra-live) 52%,
        transparent 92%);
    opacity: .55;
}

.ra-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--ra-font-display);
    font-weight: 600;
    font-size: .98rem;
    letter-spacing: .01em;
    color: var(--ra-text);
    text-decoration: none;
    padding: .25rem .35rem;
    border-radius: .5rem;
}

.ra-brand:hover { color: #fff; }

.ra-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: .5rem;
    background: radial-gradient(circle at 30% 25%, var(--ra-accent-bright), var(--ra-accent) 60%, #4c31d6 100%);
    color: #fff;
    font-size: .85rem;
    box-shadow: 0 0 0 1px rgba(124, 92, 255, .35), 0 6px 18px rgba(124, 92, 255, .25);
}

.ra-brand-env {
    font-family: var(--ra-font-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ra-signal);
    border: 1px solid rgba(255, 176, 32, .35);
    border-radius: .3rem;
    padding: .05rem .3rem;
}

.ra-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--ra-text-dim);
    font-size: 1.35rem;
    line-height: 1;
    transition: background-color .12s ease, color .12s ease;
}

.ra-icon-btn:hover { background: var(--ra-panel-2); color: var(--ra-text); }
.ra-icon-btn:active { background: var(--ra-panel-3); }
.ra-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ra-accent-soft);
}

.ra-hamburger { margin-left: -.2rem; }

.ra-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ra-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 40px;
    padding: 0 .5rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--ra-text-dim);
}

.ra-user-btn:hover { background: var(--ra-panel-2); color: var(--ra-text); }
.ra-user-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ra-accent-soft);
}

.ra-user-avatar {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ra-panel-3);
    border: 1px solid var(--ra-line);
    color: var(--ra-accent-bright);
    font-size: .9rem;
}

.ra-user-caret { font-size: .7rem; color: var(--ra-text-faint); }

.ra-user-dropdown {
    background: var(--ra-panel);
    border: 1px solid var(--ra-line);
    border-radius: .7rem;
    padding: .35rem;
    min-width: 15rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.ra-user-name {
    padding: .45rem .6rem .3rem;
    font-size: .78rem;
    color: var(--ra-text-faint);
    font-family: var(--ra-font-mono);
}

.ra-user-dropdown .dropdown-item {
    color: var(--ra-text-dim);
    border-radius: .45rem;
    padding: .45rem .6rem;
    font-size: .875rem;
}

.ra-user-dropdown .dropdown-item:hover,
.ra-user-dropdown .dropdown-item:focus {
    background: var(--ra-panel-2);
    color: var(--ra-text);
}

/* -------------------------------------------------------------- the drawer */
#raDrawer.offcanvas {
    width: min(var(--ra-drawer-w), 84vw);
    background: var(--ra-panel);
    color: var(--ra-text-dim);
    border-right: 1px solid var(--ra-line);
    box-shadow: 0 0 60px rgba(0, 0, 0, .6);
}

#raDrawer .offcanvas-header {
    justify-content: flex-end;
    background: #0c1220;
    border-bottom: 1px solid var(--ra-line);
    padding: .55rem .75rem;
    min-height: 44px;
}

#raDrawer .offcanvas-body { padding: .65rem .55rem 1.5rem; }
#raDrawer .btn-close { filter: invert(1) grayscale(1) opacity(.6); }

.ra-group { margin-bottom: .1rem; }

.ra-nav .group-btn {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .58rem .65rem;
    border: 0;
    background: transparent;
    border-radius: .55rem;
    color: var(--ra-text-dim);
    font-family: var(--ra-font-display);
    font-size: .88rem;
    font-weight: 500;
    transition: color .12s ease, background-color .12s ease;
}

.ra-nav .group-btn:hover { color: var(--ra-text); background: var(--ra-panel-2); }

.ra-nav .group-btn .group-icon {
    font-size: 1.1rem;
    color: var(--ra-text-faint);
    transition: color .12s ease;
}

.ra-nav .group-btn:hover .group-icon { color: var(--ra-accent-bright); }
.ra-nav .group-btn .group-title { flex: 1; text-align: left; }

.ra-nav .group-caret {
    font-size: .7rem;
    color: var(--ra-text-faint);
    transition: transform .15s ease;
}

.ra-nav .sub {
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.ra-nav .sub a {
    position: relative;
    display: block;
    padding: .44rem .65rem;
    border-radius: .45rem;
    color: var(--ra-text-dim);
    text-decoration: none;
    font-size: .86rem;
    transition: color .12s ease, background-color .12s ease;
}

.ra-nav .sub a:hover { background: var(--ra-panel-2); color: var(--ra-text); }

.ra-nav .sub a.active {
    background: var(--ra-accent-tint);
    color: var(--ra-accent-bright);
    font-weight: 500;
}

.ra-nav .sub a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.1rem;
    border-radius: 2px;
    background: var(--ra-accent);
    box-shadow: 0 0 8px var(--ra-accent);
}

/* ---------------------------------------------- MOBILE: tap-to-open groups */
@media (max-width: 991.98px) {
    .ra-nav .sub {
        margin: .1rem 0 .5rem 1.15rem;
        padding-left: .85rem;
        border-left: 1px solid var(--ra-line);
    }
    .ra-group.collapsed .group-caret { transform: rotate(-90deg); }
    .ra-group.collapsed .sub { display: none; }
}

/* --------------------------------------------- DESKTOP: hover flyout panels */
@media (min-width: 992px) {
    #raDrawer .offcanvas-body { overflow: visible; }

    .ra-group { position: relative; }

    .ra-nav .group-caret { transform: rotate(-90deg); opacity: .55; }

    .ra-nav .ra-group > .sub {
        display: none;
        position: absolute;
        left: calc(100% - .35rem);
        top: -.35rem;
        min-width: 232px;
        max-height: calc(100vh - var(--ra-topbar-h) - 2rem);
        overflow-y: auto;
        padding: .45rem;
        background: var(--ra-panel-2);
        border: 1px solid var(--ra-line);
        border-radius: .65rem;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
        z-index: 1040;
    }

    /* Invisible bridge so the pointer can cross the gap without losing hover. */
    .ra-nav .ra-group > .sub::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -.6rem;
        width: .6rem;
    }

    .ra-nav .ra-group:hover > .group-btn,
    .ra-nav .ra-group:focus-within > .group-btn {
        background: var(--ra-panel-2);
        color: var(--ra-text);
    }

    .ra-nav .ra-group:hover > .group-btn .group-icon,
    .ra-nav .ra-group:focus-within > .group-btn .group-icon { color: var(--ra-accent-bright); }

    .ra-nav .ra-group:hover > .sub,
    .ra-nav .ra-group:focus-within > .sub { display: flex; }
}

/* ------------------------------------------------------------ docked drawer */
.ra-menu-pin { margin-right: auto; }
.ra-menu-pinned .ra-menu-pin i { color: var(--ra-accent-bright); }

@media (min-width: 992px) {
    .ra-menu-pinned #raDrawer.offcanvas {
        transform: none !important;
        visibility: visible !important;
        top: var(--ra-topbar-h);
        height: calc(100vh - var(--ra-topbar-h));
        box-shadow: none;
    }
    .ra-menu-pinned .offcanvas-backdrop { display: none !important; }
    .ra-menu-pinned #raDrawer .btn-close { display: none; }
    .ra-menu-pinned .ra-hamburger { display: none; }
    .ra-menu-pinned #app-scroll { margin-left: min(var(--ra-drawer-w), 84vw); }
}

/* ----------------------------------------------------------- scroll region */
#app-scroll {
    overflow-y: auto;
    scrollbar-gutter: stable;
    height: calc(100vh - var(--ra-topbar-h));
    margin-top: var(--ra-topbar-h);
}

@media (max-width: 991.98px) {
    #app-scroll { padding-bottom: 5rem; }
}

/* --------------------------------------------------------- run-state chips */
/*
 * The vocabulary of the platform. One execution of one agent is a run, and a
 * run is always in exactly one of these states — so they get one shape, in
 * mono, and the colour rule the whole interface is built on: amber means a
 * person has to do something.
 */
.ra-state {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .12rem .45rem;
    border-radius: .35rem;
    font-family: var(--ra-font-mono);
    font-size: .72rem;
    letter-spacing: .02em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ra-state::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
}

.ra-state-queued { color: var(--ra-text-dim); border-color: var(--ra-line); background: var(--ra-panel-2); }
.ra-state-running { color: var(--ra-live); border-color: rgba(56, 189, 248, .3); background: rgba(56, 189, 248, .1); }
.ra-state-awaiting_approval,
.ra-state-needs_clarification { color: var(--ra-signal); border-color: rgba(255, 176, 32, .35); background: rgba(255, 176, 32, .12); }
.ra-state-succeeded { color: var(--ra-good); border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .1); }
.ra-state-failed { color: var(--ra-bad); border-color: rgba(251, 113, 133, .3); background: rgba(251, 113, 133, .1); }
.ra-state-cancelled { color: var(--ra-text-faint); border-color: var(--ra-line); background: transparent; }

/* A run that is actually executing gets the one moving thing in the interface. */
.ra-state-running::before { animation: ra-pulse 1.6s ease-in-out infinite; }

@keyframes ra-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(56, 189, 248, .5); }
    50% { opacity: .55; box-shadow: 0 0 0 .25rem rgba(56, 189, 248, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ra-state-running::before { animation: none; }
    .ra-icon-btn, .ra-user-btn, .ra-nav .sub a, .ra-nav .group-btn { transition: none; }
}

/* ------------------------------------------- Bootstrap surfaces, retinted */
.card {
    background: var(--ra-panel);
    border: 1px solid var(--ra-line);
    border-radius: .7rem;
    color: var(--ra-text);
}

.card-header {
    background: #0c1220 !important;
    border-bottom: 1px solid var(--ra-line);
    color: var(--ra-text);
    font-family: var(--ra-font-display);
}

.table { --bs-table-color: var(--ra-text); --bs-table-bg: transparent; border-color: var(--ra-line); }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-color: var(--ra-line); }
.table thead th,
.table-light,
.table > thead {
    background: #0c1220 !important;
    color: var(--ra-text-dim) !important;
    font-family: var(--ra-font-mono);
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-color: var(--ra-line) !important;
}
.table-hover > tbody > tr:hover > * { background: var(--ra-panel-2); color: var(--ra-text); }

.form-control, .form-select {
    background: #0b1220;
    border-color: var(--ra-line);
    color: var(--ra-text);
}
.form-control:focus, .form-select:focus {
    background: #0b1220;
    border-color: var(--ra-accent);
    color: var(--ra-text);
    box-shadow: 0 0 0 .2rem var(--ra-accent-soft);
}
.form-control::placeholder { color: var(--ra-text-faint); }
.form-label { color: var(--ra-text-dim); }
.form-check-input { background-color: #0b1220; border-color: var(--ra-line); }
.form-check-input:checked { background-color: var(--ra-accent); border-color: var(--ra-accent); }

.btn-primary {
    --bs-btn-bg: var(--ra-accent);
    --bs-btn-border-color: var(--ra-accent);
    --bs-btn-hover-bg: var(--ra-accent-bright);
    --bs-btn-hover-border-color: var(--ra-accent-bright);
    --bs-btn-active-bg: #6a49f0;
    --bs-btn-disabled-bg: #3a2f6b;
    --bs-btn-disabled-border-color: #3a2f6b;
}

.btn-outline-primary {
    --bs-btn-color: var(--ra-accent-bright);
    --bs-btn-border-color: rgba(124, 92, 255, .45);
    --bs-btn-hover-bg: var(--ra-accent);
    --bs-btn-hover-border-color: var(--ra-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ra-accent);
    --bs-btn-active-border-color: var(--ra-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ra-text-dim);
    --bs-btn-border-color: var(--ra-line);
    --bs-btn-hover-bg: var(--ra-panel-2);
    --bs-btn-hover-border-color: var(--ra-accent);
    --bs-btn-hover-color: var(--ra-text);
}

.text-muted { color: var(--ra-text-faint) !important; }
.border-top, .border-bottom, .border-secondary { border-color: var(--ra-line) !important; }
.bg-white { background: var(--ra-panel) !important; }

.alert-danger { background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .3); color: #ffc9d1; }
.alert-success { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .3); color: #b8f5df; }
.alert-warning { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .35); color: #ffe0ac; }
.alert-info { background: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .3); color: #c3e9ff; }

.modal-content { background: var(--ra-panel); border: 1px solid var(--ra-line); color: var(--ra-text); }
.dropdown-menu { background: var(--ra-panel); border-color: var(--ra-line); }
.dropdown-item { color: var(--ra-text-dim); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ra-panel-2); color: var(--ra-text); }
.list-group-item { background: var(--ra-panel); border-color: var(--ra-line); color: var(--ra-text); }
.nav-tabs { border-color: var(--ra-line); }
.nav-tabs .nav-link { color: var(--ra-text-dim); }
.nav-tabs .nav-link.active {
    background: var(--ra-panel);
    border-color: var(--ra-line) var(--ra-line) var(--ra-panel);
    color: var(--ra-accent-bright);
}

.badge.bg-secondary { background: var(--ra-panel-3) !important; color: var(--ra-text-dim); }
.badge.bg-success { background: rgba(52, 211, 153, .16) !important; color: var(--ra-good); }
.badge.bg-warning { background: rgba(255, 176, 32, .16) !important; color: var(--ra-signal); }
.badge.bg-danger { background: rgba(251, 113, 133, .16) !important; color: var(--ra-bad); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ra-void); }
::-webkit-scrollbar-thumb { background: #1d273a; border-radius: 6px; border: 2px solid var(--ra-void); }
::-webkit-scrollbar-thumb:hover { background: #28344c; }