/* Agent Platform - Custom Styles */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.nav-link.active {
    font-weight: 600;
}

.card {
    transition: box-shadow 0.15s ease;
}

.card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1) !important;
}

pre {
    font-size: 0.85rem;
}

.badge {
    font-weight: 500;
}

.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ────────────────────────────────────────────────────────────────────
   Tier 15.1 — Dark mode refinements.

   Bootstrap 5.3.3's data-bs-theme="dark" handles most components, but
   the layout has custom utility classes (bg-light, etc.) that don't
   auto-flip. These overrides make the page feel cohesive in dark.
   ──────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] body {
    background-color: #1a1d20;
    color: #e9ecef;
}

/* The main content area in MainLayout uses bg-light hardcoded — flip it
   to a slightly lighter dark for contrast against the very dark sidebar. */
[data-bs-theme="dark"] .bg-light {
    background-color: #212529 !important;
    color: #e9ecef;
}

/* Cards on dark theme need explicit border + bg so they don't blend
   into the page. Bootstrap sets card bg via --bs-card-bg, but inline
   bg-white on .card-header overrides it. */
[data-bs-theme="dark"] .card {
    background-color: #2b3035;
    border-color: #495057;
}
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .bg-white {
    background-color: #2b3035 !important;
    color: #e9ecef;
    border-color: #495057;
}

/* Sidebar already uses bg-dark, so it's fine in both. But the muted
   tagline text needs to be a bit brighter in dark to stay legible. */
[data-bs-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

/* Form controls — Bootstrap mostly covers these but the placeholder
   color is too washed-out by default. */
[data-bs-theme="dark"] .form-control::placeholder {
    color: #6c757d;
}

/* Tables — use the striped row background that has more contrast. */
[data-bs-theme="dark"] .table {
    --bs-table-bg: #2b3035;
    --bs-table-color: #e9ecef;
    --bs-table-border-color: #495057;
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
    background-color: #343a40 !important;
    color: #e9ecef !important;
}

/* Code/pre blocks should still pop on dark */
[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] code {
    background-color: #1a1d20;
    color: #e9ecef;
}

/* Light backgrounds used as "hint" panels turn into subtle dark panels */
[data-bs-theme="dark"] .alert-light,
[data-bs-theme="dark"] .border.bg-light {
    background-color: #2b3035 !important;
    color: #e9ecef;
    border-color: #495057 !important;
}

/* Theme-toggle button micro-affordance */
.theme-toggle-btn {
    transition: transform 0.2s ease;
}
.theme-toggle-btn:hover {
    transform: rotate(15deg);
}

/* ────────────────────────────────────────────────────────────────────
   Tier 15.2 — Mobile responsive sidebar.

   Three breakpoints:
     ≥1024px  full sidebar (250px) — current desktop layout, untouched.
     768-1023 sidebar collapses to icons-only (~70px); labels appear on hover.
     <768px   sidebar hidden by default; hamburger header opens slide-out
              drawer with backdrop.
   ──────────────────────────────────────────────────────────────────── */

/* Mobile: sidebar starts off-screen, slides in when .ap-sidebar-open is set. */
@media (max-width: 767.98px) {
    .ap-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .ap-sidebar.ap-sidebar-open {
        transform: translateX(0);
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }
    .ap-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        animation: fadeIn 0.2s ease;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    /* The main content needs no left-margin since the sidebar is overlay-only */
    .ap-app-shell { display: block !important; }
}

/* Tablet: keep the sidebar pinned but compress labels to icons-only.
   Hovering reveals the label as an inline expansion. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .ap-sidebar {
        width: 70px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        transition: width 0.2s ease;
    }
    .ap-sidebar:hover {
        width: 250px !important;
    }
    /* Hide all text inside sidebar items when collapsed; keep icons. */
    .ap-sidebar:not(:hover) .nav-link span,
    .ap-sidebar:not(:hover) .nav-link .badge,
    .ap-sidebar:not(:hover) hr,
    .ap-sidebar:not(:hover) h5,
    .ap-sidebar:not(:hover) h6,
    .ap-sidebar:not(:hover) small {
        display: none !important;
    }
    /* Center the icon when collapsed. */
    .ap-sidebar:not(:hover) .nav-link {
        text-align: center;
    }
    .ap-sidebar:not(:hover) .nav-link i {
        margin-right: 0 !important;
    }
}

/* Mobile header bar that holds the hamburger + app name */
.ap-mobile-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* On mobile, the main content area needs slightly less padding to make
   the small viewport feel less cramped. */
@media (max-width: 767.98px) {
    .bg-light .p-4 {
        padding: 1rem !important;
    }
}

/* ────────────────────────────────────────────────────────────────────
   Tier 15.5 — Skeleton loaders.

   Shimmering gradient sweeps across each placeholder block. Less jarring
   than a center-page spinner because the content's shape is visible
   while it's loading.
   ──────────────────────────────────────────────────────────────────── */
.ap-skeleton {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: ap-shimmer 1.4s ease-in-out infinite;
}

[data-bs-theme="dark"] .ap-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
}

.ap-skeleton-line {
    display: block;
}

@keyframes ap-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Collapsible sidebar section headers (MainLayout nav). Force a readable muted color on the dark sidebar in
   BOTH themes — Bootstrap's .text-muted resolves near-invisible on bg-dark (light mode), which made the
   headers vanish until hovered. Explicit base color + brighter hover; the caret signals they're clickable. */
.ap-sidebar .nav-section-toggle { color: #94a3b8 !important; transition: color .12s ease; }
.ap-sidebar .nav-section-toggle:hover { color: #e2e8f0 !important; }
.ap-sidebar .nav-section-toggle .bi-caret-right-fill,
.ap-sidebar .nav-section-toggle .bi-caret-down-fill { font-size: .6rem; }

/* Sidebar menu filter — dynamic results dropdown over the nav items. */
.ap-sidebar .nav-search-results {
    list-style: none; margin: 4px 0 2px; padding: 4px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px; max-height: 340px; overflow-y: auto;
}
.ap-sidebar .nav-search-empty { padding: 6px 8px; font-size: .78rem; color: #94a3b8; }
.ap-sidebar .nav-search-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
    color: #cbd5e1; text-decoration: none; font-size: .84rem; line-height: 1.2;
}
.ap-sidebar .nav-search-item:hover,
.ap-sidebar .nav-search-item.active { background: rgba(255,255,255,.12); color: #fff; }
.ap-sidebar .nav-search-item i { width: 16px; text-align: center; opacity: .8; flex: 0 0 auto; }

/* ── Mobile content hardening (<768px) ─────────────────────────────────
   The SHELL (sidebar drawer) went mobile long ago, but page CONTENT was
   authored desktop-first: unwrapped flex rows, inline width:…px controls,
   and bare 7-column tables render wider than a phone and drag the whole
   document sideways. Rather than patching every page, this layer makes
   the common offenders behave app-wide:
   - every data table becomes its own horizontal scroller,
   - flex control rows wrap instead of overflowing,
   - inline fixed-width controls cap at the line,
   - the document itself never pans horizontally (last-resort clip).
   Scoped to .bg-light (MainLayout's content pane) so the sidebar and the
   anonymous auth pages keep their own layouts. */
@media (max-width: 767.98px) {
    .bg-light { overflow-x: hidden; }
    .bg-light .p-4 { min-width: 0; }

    /* display:block on <table> is the classic no-markup responsive fallback:
       the table keeps its full natural width but scrolls INSIDE its own box —
       swipe the table, not the page. Covers every unwrapped table app-wide.
       Tables opted into the stacked-card treatment (.esr-cards) are excluded —
       they re-render as cards below instead of scrolling. */
    .bg-light table.table:not(.esr-cards) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* ── Stacked cards: opt-in per table with .esr-cards ──────────────
       Each <tr> becomes a bordered card; labeled cells (data-label) render
       as "LABEL  value" lines; the checkbox floats top-right, the provider
       icon top-left, and the action buttons get their own bottom row.
       Same DOM as the desktop table, so all bindings keep working. */
    .bg-light table.esr-cards { display: block; }
    .esr-cards thead { display: none; }
    .esr-cards tbody { display: block; }
    .esr-cards tbody tr {
        display: block;
        border: 1px solid var(--bs-border-color);
        border-radius: 10px;
        padding: 0.55rem 0.75rem;
        margin-bottom: 0.75rem;
        background: var(--bs-body-bg);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        overflow: hidden;   /* contains the floated checkbox/icon */
    }
    .esr-cards td {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border: 0;
        padding: 0.28rem 0;
    }
    .esr-cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 64px;
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--bs-secondary-color);
    }
    .esr-cards td[data-label] > * { min-width: 0; flex: 1 1 auto; }
    .esr-cards td.esr-c-check { float: right; display: block; padding: 0.1rem 0 0 0.5rem; }
    .esr-cards td.esr-c-prov  { float: left;  display: block; padding: 0.18rem 0.45rem 0 0; }
    .esr-cards td.esr-c-mail  { display: block; }
    .esr-cards td.esr-c-actions {
        justify-content: flex-end;
        border-top: 1px dashed var(--bs-border-color);
        margin-top: 0.4rem;
        padding-top: 0.5rem;
    }
    /* Expander (reply panel) rows span the card width as their own block. */
    .esr-cards tr > td[colspan] { display: block; }

    /* Desktop-authored d-flex control rows: wrap by default. Pages that truly
       need a single line can opt out with Bootstrap's own .flex-nowrap. */
    .bg-light .d-flex:not(.flex-nowrap) { flex-wrap: wrap; }

    /* Inline style="width:90px" / "min-width:220px" etc. on form controls —
       keep the author's width as a preference, never let it overflow. */
    .bg-light input[style], .bg-light select[style], .bg-light textarea[style] {
        max-width: 100% !important;
    }

    .bg-light iframe, .bg-light img { max-width: 100%; }
    .bg-light h3 { font-size: 1.3rem; }
}

/* ── Partner embed widget (/embed/agents/{id}/chat) ──────────────────────────
   Framed by another site at ~340px wide, so everything is self-contained and sized in
   relative units. Colours come from tokens rather than Bootstrap vars: the host app is
   usually dark while the platform default is light, and an embedded white panel inside a
   dark dashboard looks broken. ?theme=dark|light pins it; unset follows the viewer's OS. */
.embed-root {
    --e-bg: #ffffff; --e-fg: #1c1e26; --e-dim: #6c757d; --e-line: #dee2e6;
    --e-bubble: #e9ecef; --e-bubble-fg: #1c1e26; --e-mine: #0d6efd; --e-mine-fg: #fff;
    --e-accent-bg: rgba(34,197,94,.08);
    display: flex; flex-direction: column; height: 100vh; overflow: hidden;
    font-size: .875rem; background: var(--e-bg); color: var(--e-fg);
}
.embed-root.embed-dark {
    --e-bg: #12141a; --e-fg: #e7e9ee; --e-dim: #98a2b3; --e-line: rgba(255,255,255,.10);
    --e-bubble: #1e2230; --e-bubble-fg: #e7e9ee; --e-mine: #3b82f6; --e-mine-fg: #fff;
    --e-accent-bg: rgba(34,197,94,.14);
}
@media (prefers-color-scheme: dark) {
    .embed-root:not(.embed-light) {
        --e-bg: #12141a; --e-fg: #e7e9ee; --e-dim: #98a2b3; --e-line: rgba(255,255,255,.10);
        --e-bubble: #1e2230; --e-bubble-fg: #e7e9ee; --e-mine: #3b82f6; --e-mine-fg: #fff;
        --e-accent-bg: rgba(34,197,94,.14);
    }
}
.embed-msg { padding: 18px; text-align: center; color: var(--e-dim); }
.embed-expired { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.embed-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-bottom: 1px solid var(--e-line); flex: none; }
.embed-avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff; flex: none;
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .78rem; }
.embed-id { min-width: 0; }
.embed-name { font-weight: 600; line-height: 1.2; }
.embed-crown { color: #f0b429; margin-left: 3px; }
.embed-sub { font-size: .72rem; color: var(--e-dim); display: flex; align-items: center;
    gap: 4px; flex-wrap: wrap; }
.embed-dot { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; flex: none; }
.embed-dot-working { background: #22c55e; }
.embed-dot-blocked { background: #f59e0b; }
.embed-dot-recovering { background: #ef4444; }
.embed-dot-idle { background: #60a5fa; }
.embed-dot-standby { background: #a78bfa; }
.embed-current { display: flex; align-items: center; gap: 6px; padding: 5px 12px; flex: none;
    font-size: .74rem; background: var(--e-accent-bg); border-bottom: 1px solid var(--e-line); }
.embed-pulse { width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
    animation: embed-pulse 1.8s ease-in-out infinite; }
@keyframes embed-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.embed-log { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; display: flex;
    flex-direction: column; gap: 8px; min-height: 0; }
.embed-bubble { padding: 7px 11px; border-radius: 12px; max-width: 85%; word-break: break-word;
    white-space: pre-wrap; line-height: 1.4; }
.embed-bubble.theirs { background: var(--e-bubble); color: var(--e-bubble-fg); align-self: flex-start; }
.embed-bubble.mine { background: var(--e-mine); color: var(--e-mine-fg); align-self: flex-end; }
.embed-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%;
    background: currentColor; opacity: .45; animation: embed-typing 1.2s infinite; }
.embed-typing span:nth-child(2) { animation-delay: .15s; }
.embed-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes embed-typing { 0%,60%,100% { transform: translateY(0); opacity: .45; }
                          30% { transform: translateY(-3px); opacity: .9; } }
.embed-input { display: flex; gap: 6px; padding: 8px 10px; flex: none;
    border-top: 1px solid var(--e-line); }
.embed-input .form-control { background: var(--e-bg); color: var(--e-fg); border-color: var(--e-line); }
.embed-input .form-control::placeholder { color: var(--e-dim); }
.embed-poweredby { display: flex; align-items: center; gap: 6px; padding: 5px 12px; flex: none;
    border-top: 1px solid var(--e-line); font-size: .66rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--e-dim); }
.embed-poweredby img { height: 13px; width: auto; opacity: .9; }

/* ── /help Ask AI panel ─────────────────────────────────────────────────────
   Lives in site.css (not scoped) to match the rest of the Help page, which ships
   its styles globally because <HeadContent> never renders in this host. */
.help-page .hp-ask { border: 1px solid var(--bs-border-color); border-radius: 14px;
    padding: 18px 20px; background: var(--bs-body-bg); }
.help-page .hp-ask-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.help-page .hp-ask-icon { width: 42px; height: 42px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: #ede9fe; color: #6d28d9; font-size: 1.2rem; }
.help-page .hp-ask-form { display: flex; gap: 8px; }
.help-page .hp-ask-form .form-control { flex: 1 1 auto; }
.help-page .hp-ask-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.help-page .hp-ask-chip { border: 1px solid var(--bs-border-color); background: transparent;
    color: var(--bs-secondary-color); border-radius: 999px; padding: 3px 11px;
    font-size: .78rem; cursor: pointer; }
.help-page .hp-ask-chip:hover:not(:disabled) { border-color: #6d28d9; color: #6d28d9; }
.help-page .hp-ask-chip:disabled { opacity: .5; cursor: default; }
.help-page .hp-ask-answer { border-left: 3px solid #6d28d9; padding: 10px 14px;
    background: var(--bs-tertiary-bg); border-radius: 0 10px 10px 0; }
.help-page .hp-ask-q { font-weight: 600; margin-bottom: 6px; }
.help-page .hp-ask-foot { font-size: .74rem; color: var(--bs-secondary-color);
    margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--bs-border-color); }