/**
 * Magna AI — Frontend Dashboard CSS
 *
 * ★ PORTED from ConfidenceTalk `public/css/frontend.css` (2026-10-01).
 *
 * ★★ THIS IS A SCOPED PORT, NOT A 48 KB COPY. The CT sheet carries sections the
 *   AISG dashboard does not need (its mobile-hero switcher, its portrait living
 *   effect, its voice-pref segmented control — all of which AISG already styles
 *   in `pages.css` / `chat.css` / `voice-call.css`). Porting them again would
 *   duplicate rules and risk the cascade. What is ported here is the part the
 *   AISG dashboard actually depends on:
 *
 *     1. DASHBOARD CONTAINER — match the admin panel (the frontend dashboard
 *        renders INSIDE a page, so the wp-admin offset margins must be reset).
 *     2. THEME OVERRIDE FIXES — the theme's container backgrounds are forced
 *        transparent so the Gold Series shell shows through.
 *     3. DANGER BUTTON, TOAST, SPINNER, SHAKE — generic utilities the dashboard
 *        renders and that no other AISG sheet defines.
 *     4. FIELD VALIDATION — required / error / valid states.
 *
 * ★ SCOPED BY `body.aisg-dashboard-active` for the layout rules, exactly as CT
 *   did — so nothing here can leak onto a public marketing page.
 *
 * @package AISG
 */

/* ============================================
   DANGER BUTTON — For delete/remove actions
   ============================================ */
.aisg-btn-danger {
    background: rgba(231, 76, 60, 0.2) !important;
    border: 1px solid rgba(231, 76, 60, 0.5) !important;
    color: #e74c3c !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.aisg-btn-danger:hover {
    background: rgba(231, 76, 60, 0.35) !important;
    border-color: #e74c3c !important;
    color: #ff6b6b !important;
}

/* ============================================
   DASHBOARD CONTAINER — Match Admin Panel
   ============================================ */

body.aisg-dashboard-active .aisg-gold-series {
    max-width: 1400px;
    margin: 24px auto 40px;
    padding: 0;
}

/* Reset wp-admin offset margins on frontend */
body.aisg-dashboard-active .aisg-top-bar {
    margin-left: 0;
    width: 100%;
}

body.aisg-dashboard-active .aisg-main-layout {
    margin-left: 0;
    width: 100%;
}

/* Sidebar match admin panel width */
body.aisg-dashboard-active .aisg-sidebar {
    width: 240px;
    min-width: 240px;
}

/* Nav item match admin panel sizing */
body.aisg-dashboard-active .aisg-nav-item {
    padding: 10px 14px;
    font-size: 13px;
    gap: 10px;
}

/* Content area match admin panel */
body.aisg-dashboard-active .aisg-content {
    padding: 24px;
    min-height: 500px;
    /* ★ Same theme token as the admin pane (2026-10-09). Was `transparent`,
       which is the frontend half of the "no content area background" report. */
    background: var(--color-content-bg, rgba(255, 255, 255, 0.03));
}

/* ============================================
   THEME OVERRIDE FIXES
   ============================================ */

/* Force transparent backgrounds on theme containers only on dashboard pages */
body.aisg-dashboard-active .entry-content,
body.aisg-dashboard-active .site-content,
body.aisg-dashboard-active .content-area,
body.aisg-dashboard-active .site-main,
body.aisg-dashboard-active .page-content,
body.aisg-dashboard-active .post-content,
body.aisg-dashboard-active article,
body.aisg-dashboard-active .hentry {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

body.aisg-dashboard-active {
    background: transparent;
    background-color: transparent;
}

/* Dashboard: main content wrapper transparent */
body.aisg-dashboard-active .aisg-site-content {
    background: transparent;
}

/* ============================================
   CT-PARITY DASHBOARD SURFACE (BATCH 2, 2026-10-07)
   ============================================================
   ★ WHY THIS SECTION EXISTS. A measurement (2026-10-07) found the dashboard
     renders class names that NO sheet styled: `aisg-welcome-banner`,
     `aisg-profile-banner`, `aisg-agent-filter-tabs`, `aisg-agent-filter-btn`,
     `aisg-pagination-btn`, `aisg-trial-timer`, `aisg-quest-trial-banner`,
     `aisg-hostess-head`, `aisg-access-denied`. They only looked right because
     each carried a HARDCODED `rgba(205,133,63,…)` inline style — so they did
     NOT follow the active theme (a theme switch left them bronze).
   ★ WHAT IS *NOT* DONE HERE. The CT sheet's profile-form validation classes
     (`ct-field-required` / `-error` / `-valid`) and `ct-profile-progress-*`
     are DELIBERATELY NOT ported: a grep proved this dashboard emits NO such
     markup, so they would be dead rules — the exact anti-pattern tracked in
     the CLONE_LEDGER. Style what the markup uses, nothing more.
   ★ THEME-CONFORMANT. Every colour reads a theme token with a literal fallback,
     so both the default bronze and any switched theme repaint these surfaces.
   ============================================================ */

/* Welcome banner — dashboard greeting (was hardcoded bronze inline) */
body.aisg-dashboard-active .aisg-welcome-banner {
    background: color-mix(in srgb, var(--color-primary, #C2714A) 10%, transparent);
    border: 1px solid var(--color-primary, #C2714A);
    border-radius: var(--card-radius, 16px);
}

/* Profile-completion banner */
body.aisg-dashboard-active .aisg-profile-banner {
    background: color-mix(in srgb, var(--color-primary, #C2714A) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #C2714A) 30%, transparent);
    border-radius: var(--card-radius, 16px);
}

/* Hostess hand-off header card */
body.aisg-dashboard-active .aisg-hostess-head {
    background: color-mix(in srgb, var(--color-primary, #C2714A) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary, #C2714A) 35%, transparent);
    border-radius: var(--card-radius, 16px);
}

/* Trial timers + guest-trial banner — cool (secondary) accent */
body.aisg-dashboard-active .aisg-trial-timer {
    color: var(--color-secondary, #2C5F6E);
    font-weight: 600;
}
body.aisg-dashboard-active .aisg-quest-trial-banner {
    border-radius: var(--card-radius, 16px);
}

/* Agent category filter tabs — consistent row, themed active pill */
body.aisg-dashboard-active .aisg-agent-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 4px 0 12px;
}
body.aisg-dashboard-active .aisg-agent-filter-btn {
    border-radius: 8px;
    transition: transform 0.15s ease, filter 0.15s ease;
}
body.aisg-dashboard-active .aisg-agent-filter-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Pagination buttons — themed border + text, disabled state readable */
body.aisg-dashboard-active .aisg-pagination-btn {
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #C2714A) 45%, transparent);
    color: var(--color-primary, #C2714A);
    background: color-mix(in srgb, var(--color-primary, #C2714A) 8%, transparent);
}
body.aisg-dashboard-active .aisg-pagination-btn:hover:not([disabled]) {
    background: color-mix(in srgb, var(--color-primary, #C2714A) 18%, transparent);
}
body.aisg-dashboard-active .aisg-pagination-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* Access-denied card — uses the secondary (cool) token so it reads as a wall */
body.aisg-dashboard-active .aisg-access-denied {
    border: 1px solid var(--color-secondary, #2C5F6E);
    border-radius: var(--card-radius, 16px);
    background: color-mix(in srgb, var(--color-secondary, #2C5F6E) 8%, transparent);
}

/* ============================================
   FRONT-END THEME SWITCHER (BATCH 3, 2026-10-09)
   ============================================================
   ★ THE RULES MOVED TO THE AUTHORITY. They used to live here scoped to
   `body.aisg-dashboard-active .aisg-theme-switcher`, which is exactly why the
   SAME markup rendered unstyled on any other surface — the silent half of
   "only the dashboard has a switcher".

   The one definition is now `AISG_Color_Theme::get_switcher_css()`, emitted by
   the surface that renders `render_switcher()`: the panel injects it via
   `wp_add_inline_style`, this front end via `AISG_Color_Theme::get_switcher_css()`
   in its own enqueue. Markup and style therefore come from one place, and the
   control repaints itself from the active theme's tokens.
   ============================================================ */