/**
 * Confidence Talk - Gold Series CSS
 * Complete Gold Series Design System
 * Based on Magna AI Copilot reference implementation
 * Prefix: aisg- (Confidence Talk)
 */

/* Bronze Gradient — Top bar, tab active states, primary buttons */
/* Metallic Dark Gradient — Card backgrounds, sidebar panels */

/* ============================================
   CSS VARIABLES — 3-Color Semantic Model
   ============================================
   These defaults are overridden by the active
   theme via inline style (AISG_Color_Theme).
   Old names are kept as aliases for backward
   compatibility with existing CSS references.
   ============================================ */
:root {
    /* ========= SEMANTIC COLOR SYSTEM (3-Color Model) ========= */

    /* WARM (Primary) — Tabs, top bar, buttons, header, active states */
    --color-primary: #C2714A;
    --color-primary-hover: #A05C38;
    --color-primary-gradient: linear-gradient(135deg, #C2714A 0%, #D4845C 50%, #E09A72 100%);
    --color-primary-light: #f5ebe5;
    --color-primary-text: #1a202c;

    /* COOL (Secondary) — Cards, panels, sidebar backgrounds */
    --color-secondary: #2C5F6E;
    --color-secondary-hover: #234B58;
    --color-secondary-gradient: linear-gradient(135deg, #2C5F6E 0%, #3A7A8C 50%, #4A8FA0 100%);
    --color-secondary-light: #e8f0f2;
    --color-secondary-text: #ffffff;

    /* PAGE BG (DARK) — the shell is a DARK-GLASS surface.
       ★★ DEFAULT CORRECTED TO DARK (2026-10-07) ★★
       These were LIGHT (`#faf7f4` / `#ffffff`), but EVERY component in this
       sheet is built for a dark page: `.aisg-card` is `rgba(255,255,255,0.03)`
       (a translucent white that is INVISIBLE on white) and its text is
       `var(--color-text-on-dark)`. On a light default the whole panel rendered
       washed-out (white cards, near-white text) whenever the inline theme CSS
       did not load. The dark values below mirror the `metallic-bronze` theme, so
       the panel is correct EVEN BEFORE the theme is injected — defense in depth
       against the "theme CSS never reached the panel" class of fault. */
    --color-page-bg: #1a202c;
    --color-page-bg-gradient: radial-gradient(ellipse at 50% 0%, #243044 0%, #1a202c 100%);
    --card-bg: #2c3e50;

    /* CONTENT PANE SURFACE — the pane's own background.
       ★ ADDED 2026-10-09. Defined HERE so it resolves even before the inline
       theme CSS loads (the same defense-in-depth the dark page-bg default
       above provides). The value mirrors what `AISG_Color_Theme::get_theme_css()`
       derives for metallic-bronze: a low-alpha wash of that theme's secondary
       (#34495e). It is NOT meant to be edited per-theme — the active theme
       re-emits `--color-content-bg` inline and overrides this. */
    --color-content-bg: rgba(52, 73, 94, 0.18);

    /* TEXT COLORS — light-on-dark (the shell is dark) */
    --color-text-body: #ffffff;
    --color-text-heading: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-text-link: #C2714A;
    --color-text-on-page-bg: #ffffff;
    --color-text-on-page-muted: rgba(255, 255, 255, 0.7);
    --color-text-placeholder: rgba(255, 255, 255, 0.4);
    --color-text-on-dark: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);

    /* BORDERS & SHADOWS
       ★ ALIGNED TO THE REFERENCE SHEET (2026-10-09). These were
       `rgba(205, 133, 63, 0.2)` / `0.14)` — a gold that had drifted from the
       reference standard, which uses the PRIMARY hue at a much lower alpha.
       Two plugins meant to read as one product were drawing different card
       borders, and the drift was invisible because both values are "a faint
       warm line". The reference values, verbatim: */
    --color-border: rgba(194, 113, 74, 0.12);
    --color-border-light: rgba(194, 113, 74, 0.06);
    --color-shadow: 0 15px 22px -8px rgba(194, 113, 74, 0.18);
    --color-shadow-lg: 0 20px 30px -10px rgba(194, 113, 74, 0.22);

    /* ========= BACKWARD COMPATIBILITY ALIASES ========= */
    /* These variables are LEGACY fallbacks referenced by older Gold Series CSS.
       The active theme (aisg-color-theme-css) overrides all color values inline,
       but these defaults ensure the cascade works before the theme script loads. */
    --bronze-metallic-gradient: var(--color-primary-gradient);
    --metallic-steel-gradient: var(--color-secondary-gradient);
    --dark-gradient: var(--color-secondary-gradient);
    --color-background: var(--color-page-bg);
    --color-surface: var(--color-page-bg);
    /* ★ `--color-text-on-dark` is defined DIRECTLY above (#ffffff) — do NOT
       re-alias it here to `--color-primary-text`, which is DARK text and would
       repaint every shell card's text near-black on the dark page (the exact
       washed-out fault this file now guards against). Removed 2026-10-07. */
    --bronze-gradient: var(--color-primary-gradient);
    --steel-gradient: var(--color-secondary-gradient);
    --bronze-hover: brightness(1.08);
    --steel-hover: brightness(1.05);

    /* CARD SHADOW ALIASES */
    --card-shadow: var(--color-shadow);
    --card-hover-shadow: var(--color-shadow-lg);

    /* SPACING SYSTEM (LOCKED) */
    --card-spacing: 5px;
    --grid-gap: 5px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* CARD DIMENSIONS (LOCKED) */
    --card-radius: 16px;
    --card-padding: 20px;

    /* UNIFIED TAB TRANSITIONS - No Jumping */
    --tab-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* ========= RESPONSIVE FOUNDATION (next-gen) =========
       BREAKPOINTS — single source of truth. CSS media queries
       cannot read custom properties, so these are the canonical
       values to use in every @media query:
         bp-sm: 480px   (phones)
         bp-md: 768px   (large phones / small tablets)
         bp-lg: 1024px  (tablets)
         bp-xl: 1280px  (desktop)
       FLUID TYPE SCALE — clamp() so headings scale smoothly
       between bp-sm and bp-lg without per-breakpoint overrides.
       (Duplicated in public/css/pages.css :root for marketing
       pages where gold-series.css is not loaded.) */
    --aisg-fs-h1: clamp(26px, 2.4vw + 14px, 42px);
    --aisg-fs-h2: clamp(20px, 1.6vw + 12px, 30px);
    --aisg-fs-h3: clamp(15px, 0.8vw + 12px, 17px);
    --aisg-fs-h4: clamp(15px, 0.7vw + 12px, 17px);
    --aisg-fs-body: clamp(14px, 0.5vw + 12px, 16px);
    --aisg-fs-small: clamp(12px, 0.3vw + 11px, 13px);
}

/* Moved to .magna-sub-tab definition below */

/* ============================================
   GLOBAL STYLES
   ============================================ */
.aisg-gold-series * {
    box-sizing: border-box;
}

.aisg-gold-series {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--color-text-on-dark);
    margin: 16px;
    padding: 20px;
    position: relative;
    background: transparent;
    z-index: 0;
}

/* .aisg-gold-series: CT's live CSS carries NO border / inset — transparent shell. */
.aisg-gold-series {
    border-radius: 0;
    border: 0;
}

/* Force transparent backgrounds on WordPress admin containers.
   ★ CT-ADOPT PORT NOTE: the reference sheet targets CT's own body classes
   (`toplevel_page_confidence-talk` / `[class*="confidence-talk"]`), which can
   never match here. Retargeted to EEH's real screen id — see
   includes/class-unified-admin.php::add_admin_menu(), which registers the page
   as `express-entry-hub-dashboard`, producing `toplevel_page_express-entry-hub-dashboard`.
   Without this retarget the reset is dead CSS and the panel background is
   decided by gold-series.css instead of by the panel's own layer. */
body.toplevel_page_express-entry-hub-dashboard #wpcontent,
body.toplevel_page_express-entry-hub-dashboard #wpbody-content,
body.toplevel_page_express-entry-hub-dashboard .wrap,
body.toplevel_page_express-entry-hub-dashboard #wpbody,
body[class*="express-entry-hub-dashboard"] #wpcontent,
body[class*="express-entry-hub-dashboard"] #wpbody-content,
body[class*="express-entry-hub-dashboard"] .wrap,
body[class*="express-entry-hub-dashboard"] #wpbody {
    background: transparent !important;
    background-color: transparent !important;
}


/* Override WordPress default notice backgrounds inside our panel */
.aisg-gold-series .notice,
.aisg-gold-series .notice-success,
.aisg-gold-series .notice-error,
.aisg-gold-series .notice-warning,
.aisg-gold-series .notice-info,
.aisg-gold-series .updated,
.aisg-gold-series .error {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(218, 165, 32, 0.35) !important;
    border-left: 4px solid #daa520 !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.aisg-gold-series .notice p,
.aisg-gold-series .notice-success p,
.aisg-gold-series .updated p,
.aisg-gold-series .notice-error p,
.aisg-gold-series .notice-warning p,
.aisg-gold-series .notice-info p,
.aisg-gold-series .error p {
    color: #ffffff !important;
}

/* #wpcontent padding is intentionally NOT modified here.
   Gold Series top bar width calc(100% - 24px) is designed to work WITH
   WordPress default padding. Confidence Talk does NOT reset this padding. */

/* ============================================
   TOP BAR
   ============================================ */
.aisg-top-bar {
    height: 44px;
    margin: 0;
    margin-left: 8px;
    width: calc(100% - 24px);
    box-sizing: border-box;
    background: var(--bronze-metallic-gradient);
    color: var(--color-text-on-dark);
    padding: 0 var(--spacing-lg);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 15px 25px -8px rgba(139, 69, 19, 0.4);
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aisg-top-bar-left {
    display: flex;
    align-items: center;
    gap: 2px;
}

.aisg-top-bar-left .aisg-company-name {
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 1;
    text-shadow: none;
    margin-left: 2px;
}

.aisg-top-bar-center {
    display: flex;
    align-items: center;
}

.aisg-top-bar-center .aisg-premium-badge {
    background: var(--gold-gradient);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(184, 134, 11, 0.4);
}

.aisg-top-bar-right {
    display: flex;
    align-items: center;
}

.aisg-top-bar-right .aisg-tagline {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: var(--bronze-metallic-gradient);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 22px -8px rgba(139, 69, 19, 0.4);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */
.aisg-main-layout {
    display: flex;
    margin-left: 8px;
    width: calc(100% - 24px);
    gap: 0;
    background: transparent;
    border-radius: 0 0 16px 16px;
}

/* ============================================
   SIDEBAR
   ============================================ */
.aisg-sidebar {
    width: 260px;
    min-width: 260px;
    background: transparent;
    border-radius: 0;
    padding: var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
}

.aisg-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--spacing-sm);
}

.aisg-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    margin: 2px 2px;
    border-radius: 8px;
    background: var(--bronze-metallic-gradient);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    box-shadow: none;
    height: 38px;
    line-height: 1;
    outline: none;
}

.aisg-nav-item:focus {
    outline: none;
    box-shadow: none;
}

.aisg-nav-item:hover {
    background: var(--bronze-metallic-gradient);
    color: #ffffff;
}

.aisg-nav-item.active {
    background: var(--metallic-steel-gradient);
    box-shadow: none;
}

.aisg-nav-item .aisg-nav-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.aisg-sidebar-spacer {
    flex: 1;
}

.aisg-user-section {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
    background: transparent;
}

.aisg-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.aisg-user-avatar img {
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.aisg-user-details {
    display: flex;
    flex-direction: column;
}

.aisg-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.aisg-user-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.aisg-user-section .aisg-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.aisg-user-section .aisg-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8) !important;
}

.aisg-user-section .aisg-contact-item a {
    color: #CD853F !important;
    text-decoration: none;
}

.aisg-user-section .aisg-contact-item a:hover {
    color: #daa520 !important;
    text-decoration: underline;
}

/* ============================================
   CONTENT AREA
   ============================================ */
.aisg-content {
    flex: 1;
    /* ★ THE PANE'S OWN SURFACE (2026-10-09). This said `background: transparent`,
       so the largest region on screen had no surface of its own and the operator
       read it as an unfinished panel. It now paints from the same theme token as
       every other region. See `--color-content-bg` in class-color-theme.php. */
    background: var(--color-content-bg, rgba(255, 255, 255, 0.03));
    border-radius: 0;
    padding: var(--spacing-lg);
    max-width: 1600px;
    box-shadow: none;
    min-height: 600px;
    margin-top: -6px;
    overflow-x: auto;
    word-break: break-word;
}

/* Remove all hover effects and blue link colors inside content area */
.aisg-content a,
.aisg-content a:hover,
.aisg-content a:focus,
.aisg-content a:active,
.aisg-content button,
.aisg-content button:hover,
.aisg-content button:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================
   CARDS GRID SYSTEM
   ============================================ */
.aisg-cards-grid {
    display: grid;
    gap: var(--grid-gap);
}

.aisg-cards-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.aisg-cards-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.aisg-cards-grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.aisg-cards-grid-1 {
    grid-template-columns: 1fr;
}

.aisg-cards-grid-1-2 {
    grid-template-columns: 1fr 2fr;
}

.aisg-cards-grid-2-1 {
    grid-template-columns: 2fr 1fr;
}

/*
 * ★ LEGACY ALIAS — `.aisg-grid-3` (added 2026-10-09).
 *
 * `AISG_Unified_Admin::render_dashboard()` emits `aisg-cards-grid aisg-grid-3`
 * (class-unified-admin.php:650), but `.aisg-grid-3` was defined ONLY in
 * `admin/css/aisg-admin.css:172` — NOT in this shell sheet. On any surface that
 * loads the shell without the screen sheet (every FRONT-END dashboard), the
 * grid had no `grid-template-columns` at all and the cards stacked into one
 * column.
 *
 * The markup is left alone and the alias is added here instead: `.aisg-grid-3`
 * is the CT-compatible name for the same 3-column track, so both spellings must
 * resolve in the sheet that owns the grid system. `admin/css/aisg-admin.css`
 * keeps a responsive override of the same selector — see the note there.
 */
.aisg-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.aisg-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.aisg-grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* ============================================
   CARDS
   ============================================ */
.aisg-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    color: var(--color-text-on-dark);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.aisg-card-full {
    grid-column: 1 / -1;
}

.aisg-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.aisg-card-header h3,
.aisg-card-header h2,
.aisg-card-header h4 {
    font-size: var(--aisg-fs-h3);
    font-weight: 600;
    margin: 0;
    color: var(--color-text-on-dark);
}

/*
 * ★ HEADING LEVEL IS NOT CONSISTENT IN THE MARKUP, AND THAT IS NOW HARMLESS
 * (2026-10-09). `AISG_Unified_Admin::render_dashboard()` emits `<h2>` inside
 * `.aisg-card-header` (class-unified-admin.php:652,670,687) while
 * `AISG_Admin::render_dashboard_tab()` emits `<h3>` (class-admin.php:1084+).
 * The shell sheet styled ONLY `h3`, and the screen sheet styled ONLY `h2`
 * (admin/css/aisg-admin.css:153) — so each dashboard's card titles were styled
 * by a DIFFERENT sheet, and on the front end (where only the shell loads) the
 * unified dashboard's `<h2>` titles fell back to the browser's default
 * oversized heading. Covering h2/h3/h4 here fixes both surfaces at once and
 * means a future heading-level change cannot silently lose its styling.
 */

.aisg-card-header .aisg-card-icon {
    font-size: 24px;
    opacity: 0.9;
}

/*
 * ★ `.aisg-card-icon` ALSO AT TOP LEVEL (2026-10-09).
 *
 * The rule above is scoped to `.aisg-card-header .aisg-card-icon` — which is
 * where CT's dashboard uses it. But `admin/css/aisg-admin.css:161` owned a
 * bare `.aisg-card-icon` rule, so any icon rendered OUTSIDE a card header had
 * no colour or size on the front end. Declaring the base here (in the sheet
 * that always loads) removes that dependency.
 */
.aisg-card-icon {
    color: var(--color-primary);
    font-size: 15px;
    line-height: 1;
}

/* ============================================
   METRIC CARDS
   ============================================ */

/*
 * ★★ THE METRIC-CARD SYSTEM IS UNDEFINED ON THE FRONT END (fixed 2026-10-09) ★★
 *
 * `AISG_Admin::render_dashboard_tab()` (the BACK-END dashboard) is built almost
 * entirely out of `.aisg-metric-card` / `.aisg-metric-value`
 * (class-admin.php:1084-1160). Those classes were defined ONLY in
 * `admin/css/aisg-admin.css` (`.aisg-metric-value`, line 174) and in THIS sheet.
 *
 * `public/class-public.php:684-692` enqueues this sheet but NOT the screen
 * sheet — so any front-end surface that reached the dashboard markup rendered
 * every metric as an unstyled `<div>`: no 30px weight, no colour, no card.
 * That is the single largest visible defect in the front-end dashboard.
 *
 * ★ THE FIX IS TO OWN THE SET HERE, using CT's exact values (CT
 * `admin/css/gold-series.css:504-560`), so NO consumer depends on the screen
 * sheet to draw a metric. `admin/css/aisg-admin.css` retains only the
 * modifiers it genuinely adds (ok/error/undecided).
 */
.aisg-metric-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    color: var(--color-text-on-dark);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aisg-metric-card .aisg-metric-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.aisg-metric-card .aisg-metric-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.aisg-metric-card .aisg-metric-subtitle {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
}

.aisg-metric-card .aisg-metric-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text-on-dark);
}

.aisg-metric-card .aisg-metric-change {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.aisg-metric-change.up {
    color: #4ade80;
}

.aisg-metric-change.down {
    color: #f87171;
}

/*
 * ★ BARE `.aisg-metric-value` — for the metric tile rendered OUTSIDE a
 * `.aisg-metric-card` (the "Schema: OK" tile in
 * `AISG_Unified_Admin::render_dashboard()` and the stat tiles in the Voice
 * tab). These were the elements that had NO rule on the front end.
 */
.aisg-metric-value {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.5px;
}

.aisg-card-body {
    flex: 1;
    /*
     * min-width: 0 is load-bearing, not cosmetic.
     *
     * .aisg-card is a column flex container and .aisg-card-body is its flex item.
     * A flex item's default min-width is `auto`, which refuses to shrink below
     * its content's min-content width. That min-content width is computed from
     * the widest unbreakable run of text anywhere in the subtree — and it does
     * NOT respect `word-break: break-word` set on an ANCESTOR (.aisg-content),
     * because min-content sizing looks at the item's own descendant chain.
     *
     * So one long sentence inside a nested flex layout (e.g. the Destinations
     * control labels: "include on the homepage strip and in the roadmap
     * generator") sets a hard floor on the body's width. That floor propagates
     * up through the card, the grid, the pane and into .aisg-content — which
     * cannot shrink either (its own `flex: 1` + default `min-width: auto`).
     * .aisg-content also declares `overflow-x: auto`, so the oversized column
     * scrolls SIDEWAYS instead of overflowing the page, and the stale
     * scrollLeft then persists when you switch sub-tabs because scroll position
     * belongs to .aisg-content, not to the panes.
     *
     * min-width: 0 removes the automatic floor, letting the body shrink to the
     * space actually available. Every card in the admin benefits, which is why
     * the fix goes here rather than on the Destinations selectors alone.
     */
    min-width: 0;
}

.aisg-card-body p {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ============================================
   METRIC CARDS
   ============================================ */
.aisg-metric-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    color: var(--color-text-on-dark);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aisg-metric-card .aisg-metric-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.aisg-metric-card .aisg-metric-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.aisg-metric-card .aisg-metric-subtitle {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: var(--spacing-sm);
}

.aisg-metric-card .aisg-metric-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text-on-dark);
}

.aisg-metric-card .aisg-metric-change {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.aisg-metric-change.up {
    color: #4ade80;
}

.aisg-metric-change.down {
    color: #f87171;
}

/* ============================================
   TABLES
   ============================================ */
.aisg-table-wrapper {
    overflow-x: auto;
}

.aisg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.aisg-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.aisg-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-on-dark);
}

.aisg-table tr:last-child td {
    border-bottom: none;
}

.aisg-table tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   STATUS BADGES
   ============================================ */
.aisg-status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(205, 133, 63, 0.5);
}

.aisg-status-badge.active {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

.aisg-status-badge.inactive {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}

.aisg-status-badge.pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

/* ============================================
   VOICE DELIVERY SETUP GUIDE (Feature #7)
   ============================================
   The one place in this panel that explains something OUTSIDE the plugin
   (the site-root `edge-tts.php` companion + the VPS that answers /health).
   It is a guide, so it reads as a reference table rather than a form. */
.aisg-setup-guide .aisg-card-body {
    display: block;
}

.aisg-setup-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
    font-size: 13px;
}

.aisg-setup-table tr + tr td {
    border-top: 1px solid var(--color-border);
}

.aisg-setup-table td {
    padding: 10px 8px;
    vertical-align: top;
    color: var(--color-text-on-dark);
}

.aisg-setup-table .aisg-setup-label {
    width: 150px;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

/* Paths and commands break rather than overflow the card on a narrow screen. */
.aisg-setup-table code {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--color-border);
    color: #e0c9a6;
    font-size: 12px;
    word-break: break-all;
}

.aisg-setup-table .aisg-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
}

.aisg-setup-probe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.aisg-setup-result {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 600px) {
    .aisg-setup-table .aisg-setup-label {
        width: auto;
    }
    .aisg-setup-table td {
        display: block;
        padding: 6px 0;
    }
    .aisg-setup-table tr + tr td {
        border-top: 0;
    }
    .aisg-setup-table tr {
        display: block;
        padding: 10px 0;
        border-top: 1px solid var(--color-border);
    }
}

/* ============================================
   INTELLIGENCE — rules editor, simulator, gaps (Features #2, #3, #4)
   ============================================ */

/* The rules table is a form, so its inputs size to the grid rather than
   inheriting the full-width form-control rule. */
.aisg-rules-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    padding: 6px 8px;
}
.aisg-rules-table .aisg-input {
    width: 100%;
}
.aisg-rules-table .aisg-rule-blank .aisg-input {
    /* A blank row is an invitation, not content — dimmed so it does not read
       as existing data. */
    opacity: 0.6;
}
.aisg-rules-table .aisg-rule-blank .aisg-input:focus {
    opacity: 1;
}

.aisg-sim-out {
    margin-top: var(--spacing-md);
}
.aisg-sim-out:empty {
    display: none;
}
.aisg-sim-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--spacing-md) 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
}
.aisg-sim-out .aisg-setup-table {
    margin-top: 0;
}
.aisg-sim-out code,
.aisg-sim-heading + table code {
    word-break: break-all;
}
.aisg-help-error {
    color: #f87171;
}

/* Change detection (Feature #5) — the age line and the schedule form. */
.aisg-change-age {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 var(--spacing-md);
}
.aisg-schedule-form {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* The voice quality check row (Feature #6) — a probe beside the endpoint probe. */
.aisg-voice-check {
    margin-top: var(--spacing-md);
}
.aisg-voice-check .aisg-setup-result {
    flex: 1 1 auto;
}

/* ============================================
   BUTTONS
   ============================================ */
.aisg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.aisg-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.aisg-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.aisg-btn-primary {
    background: var(--bronze-metallic-gradient);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(139, 69, 19, 0.3);
}

.aisg-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(139, 69, 19, 0.4);
    opacity: 1;
}

.aisg-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.25);
}

.aisg-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.aisg-btn-secondary:hover {
    background: rgba(205, 133, 63, 0.2);
    border-color: rgba(205, 133, 63, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

.aisg-btn-danger {
    background: rgba(248, 113, 113, 0.3);
    border-color: rgba(248, 113, 113, 0.4);
}

.aisg-btn-danger:hover {
    background: rgba(248, 113, 113, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(248, 113, 113, 0.3);
}

.aisg-btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

.aisg-btn-block {
    width: 100%;
}

.aisg-btn-lg {
    padding: 10px 22px;
    font-size: 13px;
    border-radius: 34px;
}

/* ============================================
   INPUT WITH BUTTON (API Key + Test)
   ============================================ */
.input-with-button {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-button input[type="text"],
.input-with-button input[type="password"] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
}

.input-with-button input:focus {
    outline: none;
    border-color: rgba(205, 133, 63, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

.input-with-button .aisg-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   FORMS
   ============================================ */
.aisg-form-group {
    margin-bottom: var(--spacing-md);
}

/*
 * ★ `.aisg-form-row` — a horizontal row of `.aisg-form-group`s.
 *
 * It was used in the markup (class-admin.php, and the Consent bulk form) but had
 * no rule, so each group stacked full-width and the row did nothing. The
 * identity gate caught it as an unstyled `aisg-*` class, which is exactly the
 * "class emitted, nothing styles it" defect the gate exists for.
 *
 * It wraps, so a narrow panel drops to one column instead of squashing.
 */
.aisg-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
}
.aisg-form-row .aisg-form-group {
    margin-bottom: 0;
}

.aisg-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-on-dark);
    margin-bottom: 6px;
}

.aisg-form-group input[type="text"],
.aisg-form-group input[type="email"],
.aisg-form-group input[type="number"],
.aisg-form-group input[type="password"],
.aisg-form-group select,
.aisg-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
}

.aisg-form-group input:focus,
.aisg-form-group select:focus,
.aisg-form-group textarea:focus {
    outline: none;
    border-color: rgba(205, 133, 63, 0.5);
    background: rgba(255, 255, 255, 0.15);
}

/* Catch-all: All <select> option elements inside Gold Series admin panels
   must have dark background + white text. Windows browsers use OS-native
   dropdowns that don't inherit parent styling — these must be explicit. */
.aisg-gold-series select option,
.aisg-content select option,
.aisg-form-group select option,
.aisg-browser-settings-row select option {
    background: #2c3e50;
    color: #ffffff;
}

/* Dropdown optgroup and option styling — compact, selected highlight */
.aisg-gold-series select optgroup,
.aisg-content select optgroup,
.aisg-form-group select optgroup,
.aisg-browser-settings-row select optgroup {
    background: #0f1923;
    color: #CD853F;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border: none;
    font-style: normal;
}

.aisg-gold-series select option:checked,
.aisg-content select option:checked,
.aisg-form-group select option:checked,
.aisg-browser-settings-row select option:checked {
    background: #CD853F !important;
    color: #fff !important;
}

.aisg-gold-series select option:hover,
.aisg-content select option:hover,
.aisg-form-group select option:hover {
    background: rgba(205, 133, 63, 0.3);
    color: #fff;
}

.aisg-gold-series select optgroup option,
.aisg-content select optgroup option,
.aisg-form-group select optgroup option {
    padding-left: 12px;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
/* Agent search input in card header */
.aisg-agent-search {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: #fff !important;
    font-size: 12px;
    width: 220px;
    outline: none;
    transition: border-color 0.2s ease;
}
.aisg-agent-search::placeholder {
    color: rgba(255,255,255,0.4) !important;
}
.aisg-agent-search:focus {
    border-color: #CD853F;
    background: rgba(255,255,255,0.15);
    color: #fff !important;
}

.aisg-progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.aisg-progress-bar .aisg-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffffff, #f8f9fa);
    border-radius: 30px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    transition: none;
}

/* ============================================
   ACTIVITY FEED
   ============================================ */
.aisg-activity-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aisg-activity-feed .aisg-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.aisg-activity-feed .aisg-activity-item:last-child {
    border-bottom: none;
}

.aisg-activity-feed .aisg-activity-user {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-on-dark);
}

.aisg-activity-feed .aisg-activity-desc {
    font-size: 12px;
    opacity: 0.90;
    flex: 1;
    padding: 0 8px;
}

.aisg-activity-feed .aisg-activity-time {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ============================================
   NOTICES
   ============================================ */
.aisg-notice {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: var(--spacing-md);
}

.aisg-notice-success {
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
}

.aisg-notice-error {
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
}

.aisg-notice-info {
    background: rgba(96, 165, 250, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #60a5fa;
}

/* ============================================
   SEARCH & FILTERS
   ============================================ */
.aisg-search-box {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    align-items: center;
}

.aisg-search-box input[type="text"] {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 13px;
    flex: 1;
    max-width: 300px;
}

.aisg-search-box input::placeholder {
    color: rgba(255, 255, 255, 0.60);
}

.aisg-search-box select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 13px;
}

.aisg-search-box select option {
    background: #2c3e50;
    color: #ffffff;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */
.aisg-quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ============================================
   SETTINGS SECTIONS
   ============================================ */
.aisg-settings-section {
    margin-bottom: var(--spacing-lg);
}

.aisg-settings-section h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-text-on-dark);
}

.aisg-settings-section .aisg-form-group {
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   TOGGLE SWITCH
   ============================================ */
.aisg-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.aisg-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.aisg-toggle .aisg-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    transition: none;
}

.aisg-toggle .aisg-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: none;
}

.aisg-toggle input:checked + .aisg-toggle-slider {
    background: var(--gold-gradient);
}

.aisg-toggle input:checked + .aisg-toggle-slider:before {
    transform: translateX(20px);
}

/* ============================================
   CHECKLIST (Quick Start)
   ============================================ */
.aisg-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aisg-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}

.aisg-checklist-item:last-child {
    border-bottom: none;
}

.aisg-checklist-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.aisg-checklist-text strong {
    display: block;
    font-size: 13px;
    color: var(--color-text-on-dark);
    margin-bottom: 2px;
}

.aisg-checklist-desc {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* ============================================
   HORIZONTAL SUB-TABS - No Jumping on Hover
   ============================================ */

.magna-sub-tabs {
    margin: 0 0 16px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

.magna-sub-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    height: 38px;
    text-align: center;
    /* Inactive: uses theme color (e.g. Midnight Ruby) */
    background: var(--bronze-metallic-gradient, linear-gradient(135deg, #8B4513, #A0522D, #CD853F));
    color: #ffffff;
    border: none;
    letter-spacing: 0.3px;
    transform: translateY(0);
}

.magna-sub-tab:hover {
    /* Keep same as inactive on hover — flat, no animation */
    background: var(--bronze-metallic-gradient, linear-gradient(135deg, #8B4513, #A0522D, #CD853F));
    color: #ffffff;
    transform: translateY(0);
    box-shadow: none;
    filter: none;
    opacity: 1;
}

.magna-sub-tab.active {
    /* Active: metallic steel gradient */
    background: var(--metallic-steel-gradient, linear-gradient(145deg, #2c3e50, #34495e, #7f8c8d)) !important;
    border: none;
    cursor: default;
    color: #ffffff !important;
    box-shadow: none;
    filter: none;
}

.magna-sub-tab.active:hover {
    background: var(--metallic-steel-gradient, linear-gradient(145deg, #2c3e50, #34495e, #7f8c8d)) !important;
    color: #ffffff !important;
    box-shadow: none;
    filter: none;
    opacity: 1;
}

/* Sub-tab content panels */
.magna-sub-tab-content {
    display: none;
    padding: 20px 0;
}

.magna-sub-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ensure text is white in all sub-tab content */
.magna-sub-tab-content,
.magna-sub-tab-content p,
.magna-sub-tab-content label,
.magna-sub-tab-content h2,
.magna-sub-tab-content h3,
.magna-sub-tab-content .description {
    color: #ffffff !important;
}

/* Form elements in sub-tabs - keep readable */
.magna-sub-tab-content input[type="text"],
.magna-sub-tab-content input[type="email"],
.magna-sub-tab-content input[type="password"],
.magna-sub-tab-content select,
.magna-sub-tab-content textarea {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.magna-sub-tab-content input:focus,
.magna-sub-tab-content select:focus,
.magna-sub-tab-content textarea:focus {
    border-color: rgba(205, 133, 63, 0.5) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.magna-sub-tab-content select option {
    background: #2c3e50 !important;
    color: #ffffff !important;
}

/* ============================================
   USER CARDS (User Management Tab)
   ============================================ */
.users-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.user-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    color: var(--color-text-on-dark);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.user-card-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.user-card-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.user-card-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.70);
}

.user-card-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-card-role-badge.admin {
    background: rgba(184, 134, 11, 0.3);
    color: #daa520;
    border: 1px solid rgba(184, 134, 11, 0.4);
}

.user-card-role-badge.magna {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.user-card-role-badge.subscriber {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.user-card-stats {
    display: flex;
    gap: 16px;
    margin: 4px 0;
}

.user-card-stat {
    text-align: center;
}

.user-card-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.user-card-stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.user-card-last-active {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.user-card-actions {
    margin-top: 4px;
}

.assign-magna-btn,
.remove-magna-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: none;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.assign-magna-btn {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.3);
}

.assign-magna-btn:hover {
    background: rgba(74, 222, 128, 0.35);
}

.remove-magna-btn {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.3);
}

.remove-magna-btn:hover {
    background: rgba(248, 113, 113, 0.35);
}

.user-card-admin-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
}

.user-filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: none;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.filter-btn.active {
    background: var(--gold-gradient);
    border-color: transparent;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.filter-btn.active:hover {
    opacity: 0.9;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media screen and (max-width: 768px) {
    .aisg-top-bar {
        height: auto;
        min-height: 44px;
        padding: 8px 16px;
        margin-left: 0;
        width: 100%;
        border-radius: 0;
        margin-right: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .aisg-main-layout {
        flex-direction: column;
        margin-left: 0;
        width: 100%;
    }

    .aisg-sidebar {
        width: 100%;
        min-width: 100%;
        border-radius: 0;
    }

    .aisg-content {
        width: 100%;
        border-radius: 0;
        padding: var(--spacing-md);
    }

    .aisg-cards-grid-2,
    .aisg-cards-grid-3,
    .aisg-cards-grid-4,
    .aisg-cards-grid-1-2,
    .aisg-cards-grid-2-1 {
        grid-template-columns: 1fr;
    }

    .aisg-top-bar-center {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .aisg-top-bar-right {
        display: none;
    }

    .magna-sub-tabs {
        flex-wrap: wrap;
    }

    .magna-sub-tab {
        flex: 1;
        min-width: 120px;
        text-align: center;
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .aisg-cards-grid-3,
    .aisg-cards-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   LEGACY SUPPORT (old class names mapped to new)
   ============================================ */
.top-bar,
.main-layout,
.sidebar,
.content,
.nav-menu,
.nav-item,
.nav-icon,
.nav-label,
.spacer,
.user-section,
.user-card,
.user-avatar,
.user-info,
.user-name,
.user-role,
.contact-info,
.contact-item,
.cards-grid,
.health-card,
.metric-card,
.settings-card,
.activity-card,
.card-header,
.card-icon,
.metric-header,
.metric-icon,
.metric-value,
.metric-change,
.change-badge,
.activity-list,
.activity-item,
.activity-left,
.activity-avatar,
.activity-name,
.activity-action,
.activity-time,
.form-group,
.form-control,
.form-actions,
.btn,
.btn-primary,
.btn-secondary,
.quick-actions,
.action-btn,
.error-card,
.magna-form-table,
.magna-notice,
.magna-progress-bar,
.magna-progress-fill,
.magna-spinner,
.company-name,
.gold-badge,
.premium-badge,
.tagline,
.logo-placeholder,
.logo {
    /* Legacy classes kept for backward compatibility */
}

/* ============================================
   VOICE AGENT CARDS (JS-rendered) — 2 per row (original layout)
   ============================================ */
.aisg-voice-agent-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.aisg-voice-agent-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: box-shadow 0.2s ease;
    width: 100%;
}
.aisg-voice-agent-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.aisg-voice-agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    background: var(--bronze-metallic-gradient);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.aisg-voice-agent-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.aisg-voice-agent-emoji {
    display: none;
}
.aisg-voice-agent-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.aisg-voice-agent-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}
.aisg-voice-agent-tier {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.aisg-voice-saved-badge {
    color: #22c55e;
    font-size: 12px;
    font-weight: 600;
    display: none;
    white-space: nowrap;
    background: rgba(0,0,0,0.55);
    padding: 3px 10px;
    border-radius: 12px;
    line-height: 1.3;
}

/* Voice Description */
.aisg-voice-desc-text {
    padding: 4px 16px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    font-style: italic;
    line-height: 1.4;
}
.aisg-voice-desc-toggle {
    color: #CD853F;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    margin-left: 2px;
}
.aisg-voice-desc-toggle:hover {
    color: #daa520;
    text-decoration: underline;
}

/* ============================================
   PER-BROWSER SETTINGS SECTIONS
   ============================================ */
.aisg-voice-browser-section {
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.aisg-voice-browser-section:last-of-type {
    border-bottom: none;
}

.aisg-voice-browser-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aisg-browser-icon {
    font-size: 16px;
}
.aisg-voice-count {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,0.60);
    text-transform: none;
    letter-spacing: 0;
}

/* Per-browser settings row — all inline */
.aisg-browser-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}
.aisg-browser-settings-row:last-child {
    margin-bottom: 0;
}

.aisg-browser-setting-label {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 50px;
}

.aisg-browser-settings-row select {
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
    color: #fff;
    font-size: 12px;
    min-height: 24px;
    cursor: pointer;
}
.aisg-browser-settings-row select:focus {
    outline: none;
    border-color: #CD853F;
}

.aisg-browser-settings-row input[type="range"] {
    width: 80px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}
.aisg-browser-settings-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #CD853F;
    cursor: pointer;
    border: none;
}
.aisg-browser-settings-row input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #CD853F;
    cursor: pointer;
    border: none;
}

.aisg-browser-setting-val {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
}

/* Play button in settings row */
.aisg-browser-play-btn {
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    background: linear-gradient(180deg, #2ecc71, #27ae60);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}
.aisg-browser-play-btn:hover {
    opacity: 0.9;
}

/* Per-browser Save/Reset action row */
.aisg-browser-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 16px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Action buttons */
.aisg-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 4px;
}
.aisg-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: none;
    line-height: 1;
}
.aisg-page-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.aisg-page-btn.active {
    background: var(--gold-gradient);
    border-color: transparent;
    color: #fff;
    cursor: default;
}
.aisg-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.aisg-page-ellipsis {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    padding: 0 2px;
}
.aisg-page-info {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    margin-left: 8px;
    white-space: nowrap;
}
.aisg-voice-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    flex-wrap: wrap;
}
.aisg-voice-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}
.aisg-voice-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.aisg-voice-btn:active {
    transform: translateY(0);
}
.aisg-voice-btn-primary {
    background: linear-gradient(180deg, #CD853F, #A0522D);
    border-color: #CD853F;
    color: #fff;
}
.aisg-voice-btn-auto {
    background: linear-gradient(180deg, #2ecc71, #27ae60);
    border-color: #2ecc71;
    color: #fff;
}
.aisg-voice-btn-reset {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.6);
}

/* Match Voice progress bar */
.aisg-match-progress {
    padding: 8px 0;
    margin: 6px 0;
}

.aisg-match-bar {
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.aisg-match-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #CD853F, #daa520, #ffd700);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.aisg-match-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.80);
}

.aisg-match-step {
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    transition: all 0.3s ease;
}

.aisg-match-step.active {
    color: #ffd700;
    background: rgba(255,215,0,0.1);
}

.aisg-match-step.done {
    color: #2ecc71;
    background: rgba(46,204,113,0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .aisg-browser-settings-row {
        flex-wrap: wrap;
    }
    .aisg-browser-setting-label {
        min-width: 30px;
    }
    .aisg-voice-actions {
        justify-content: center;
    }
    .aisg-voice-agent-card {
        min-height: 200px;
        background-position: center 10%;
    }
}

/* ============================================
   USER MANAGEMENT v2 — User Cards, Stats Bar, Pagination, Modal
   ============================================ */

/* Stats Summary Bar (Feature 7) */
#aisg-user-stats-bar.aisg-cards-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

#aisg-user-stats-bar .aisg-metric-card {
    padding: 12px;
    text-align: center;
}

#aisg-user-stats-bar .aisg-metric-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

#aisg-user-stats-bar .aisg-metric-title {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 2px;
}

#aisg-user-stats-bar .aisg-metric-value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

/* User cards grid (Feature 1-4) */
.users-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.user-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.user-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

.user-card-avatar img,
.user-card-avatar div {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.user-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.user-card-name:hover {
    color: #CD853F;
}

.user-card-email {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    word-break: break-all;
}

.user-card-role-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.user-card-role-badge.admin {
    background: rgba(205,133,63,0.2);
    color: #CD853F;
}
.user-card-role-badge.magna {
    background: rgba(46,204,113,0.15);
    color: #2ecc71;
}
.user-card-role-badge.subscriber {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}

.user-card-stats {
    display: flex;
    gap: 16px;
    margin-top: 2px;
}

.user-card-stat {
    text-align: center;
}
.user-card-stat-value {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}
.user-card-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.user-card-last-active {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

.user-card-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.user-card-actions button {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.user-card-actions button:hover {
    background: rgba(255,255,255,0.18);
}
.user-card-actions button.assign-magna-btn {
    background: rgba(46,204,113,0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}
.user-card-actions button.remove-magna-btn {
    background: rgba(239,68,68,0.2);
    border-color: #ef4444;
    color: #ef4444;
}

/* Search & sort inputs */
#aisg-user-search::placeholder {
    color: rgba(255,255,255,0.65);
}

/* User pagination bar */
#aisg-user-pagination-bar {
    display: none;
    margin-top: 12px;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#aisg-user-pagination-bar .aisg-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
#aisg-user-pagination-bar .aisg-page-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
#aisg-user-pagination-bar .aisg-page-btn.active {
    background: var(--gold-gradient);
    border-color: transparent;
    color: #fff;
    cursor: default;
}
#aisg-user-pagination-bar .aisg-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
#aisg-user-pagination-bar .aisg-page-ellipsis {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    padding: 0 2px;
}

/* User Detail Modal (Feature 5) */
#aisg-user-detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}
#aisg-user-detail-modal .aisg-btn {
    font-size: 12px;
    padding: 4px 10px;
}

/* User checkbox for bulk actions (Feature 6) */
.user-card-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    top: 8px;
    left: 8px;
    accent-color: #CD853F;
}

/* Responsive: User cards grid */
@media screen and (max-width: 1280px) {
    .users-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .users-cards-grid {
        grid-template-columns: 1fr;
    }
    #aisg-user-stats-bar.aisg-cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    #aisg-user-stats-bar .aisg-metric-value {
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    #aisg-user-stats-bar.aisg-cards-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   AGENT VOICE MATCHING — Browser Tab Buttons
   ============================================ */
.aisg-browser-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.aisg-browser-tab {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.aisg-browser-tab:hover {
    background: rgba(205, 133, 63, 0.3);
    border-color: rgba(205, 133, 63, 0.5);
    color: #fff;
}

.aisg-browser-tab.active {
    background: #CD853F;
    border-color: #CD853F;
    color: #fff;
}

/* ============================================================
   ADVANCED ANALYTICS DASHBOARD (Phase 2)
   ============================================================ */
.aisg-analytics-sub-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.aisg-analytics-sub-tab {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.aisg-analytics-sub-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.aisg-analytics-sub-tab.active {
    background: var(--color-primary-gradient, linear-gradient(135deg, #8B4513, #CD853F));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.aisg-analytics-pane {
    display: none;
}

.aisg-analytics-pane.active {
    display: block;
}

.aisg-analytics-range {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.aisg-analytics-range:hover {
    background: rgba(255, 255, 255, 0.08);
}

.aisg-analytics-range.active {
    background: var(--color-primary-gradient, linear-gradient(135deg, #8B4513, #CD853F));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.aisg-chart-container {
    position: relative;
    width: 100%;
}

.aisg-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.aisg-analytics-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.aisg-cards-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 1024px) {
    .aisg-cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .aisg-cards-grid-4 {
        grid-template-columns: 1fr;
    }
}

.aisg-analytics-sub-tabs .aisg-analytics-sub-tab:focus-visible,
.aisg-analytics-range:focus-visible,
#aisg-analytics-export:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================================
   BATCH 5 — SHARED INLINE-UTILITY GRAMMAR
   ----------------------------------------------------------------------------
   ★ WHY THESE EXIST. `render_voice_tab()` and `render_monetization_tab()` had
   398 hand-rolled `style=` attributes between them, repeating the SAME eight
   declarations dozens of times each (the top one 16×, the next 10×, then 9×,
   9×, 6×, 6× …). A repeated literal is a derived value that was copied, and
   every copy is a place the theme can be overridden by hand.

   ★ EVERY COLOUR HERE IS A THEME TOKEN, NEVER A HEX. The previous inline
   values hardcoded `#fff`, `rgba(255,255,255,0.7)` and both bronze hexes, so
   the two largest tabs stayed dark-only no matter which theme was selected —
   the exact defect Batch 2 fixed for `.aisg-content`. Naming the same intent
   as a token makes the theme switch reach these surfaces for free.
   ============================================================================ */

/* A horizontal row of controls/labels that wraps on narrow panels. */
.aisg-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Same row, but top-aligned (for blocks of differing height). */
.aisg-inline-row-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

/* A vertical stack of controls. */
.aisg-inline-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Muted micro-copy — 11px at 50% opacity. Was `font-size:11px;color:rgba(255,255,255,0.5)`. */
.aisg-note-micro {
    font-size: 11px;
    color: var(--color-text-muted);
    opacity: 0.72;
}

/* Secondary label — 12px at 70% opacity. */
.aisg-note-meta {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* A slightly larger muted paragraph (card descriptions). */
.aisg-note-body {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 0 12px 0;
}

/* Emphasised inline value. */
.aisg-note-strong {
    font-weight: 600;
    color: var(--color-text-heading);
}

/* Small inline form control (the repeated select/number/text inputs). */
.aisg-field-sm {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 12px;
}

/* Pill-shaped toggle button (the repeated 4px-14px radius-20px control). */
.aisg-pill-btn {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
}

/* A bordered sub-panel inside a card (the bronze-tinted group box). */
.aisg-dim-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

/* A small read-only stat chip. */
.aisg-stat-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 11px;
}

/* Status text colours as tokens (were `color:#2ecc71` / `#e74c3c` / `#fbbf24`). */
.aisg-text-ok { color: var(--aisg-ok, #22c55e); }
.aisg-text-error { color: var(--aisg-error, #e74c3c); }
.aisg-text-warn { color: var(--aisg-warn, #fbbf24); }
.aisg-text-info { color: #4fc3f7; }

/* Axis separator used between header actions. */
.aisg-vsep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    display: inline-block;
}

/* Tiny spacing utilities — survive the theme switch without a stylesheet edit. */
.aisg-mb-6 { margin-bottom: 6px; }
.aisg-mb-12 { margin-bottom: 12px; }
.aisg-mt-12 { margin-top: 12px; }
.aisg-pad-12-16 { padding: 12px 16px; }

/* A card-section heading value (was `color:#fff;font-weight:600;font-size:13px`). */
.aisg-note-title {
    color: var(--color-text-heading);
    font-weight: 600;
    font-size: 13px;
}

/* The extra-small badge modifier used by diagnostic chips. */
.aisg-badge-xs {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
}

/* Push an element to the trailing edge of a flex header row. */
.aisg-ml-auto { margin-left: auto; }

/* Auto-filling grid for the 26 language chips. */
.aisg-voice-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
}

.aisg-stat-chip-name {
    color: var(--color-text-body);
    font-weight: 600;
}

/* A tinted button used for the probe / secondary in-card actions. */
.aisg-btn-probe {
    font-size: 11px;
    padding: 4px 12px;
    background: rgba(194, 113, 74, 0.25);
    border: 1px solid rgba(194, 113, 74, 0.5);
    color: var(--color-text-on-dark);
    border-radius: 6px;
    cursor: pointer;
}

/* ============================================================================
   BATCH 5 — LAYOUT / SPACING / TEXT UTILITIES
   ----------------------------------------------------------------------------
   These name one declaration each, so a hand-written `style="width:100%;"`
   becomes a class that can be themed and reused. Deliberately single-purpose:
   `.aisg-u-flex1` is `flex:1` and nothing else, so it composes predictably.
   ============================================================================ */

.aisg-u-flex1 { flex: 1; }
.aisg-u-flex1-min140 { flex: 1; min-width: 140px; }
.aisg-u-w100 { width: 100%; }
.aisg-u-fs10 { font-size: 10px; }
.aisg-u-fs11 { font-size: 11px; }
.aisg-u-fs12 { font-size: 12px; }
.aisg-u-fs13 { font-size: 13px; }
.aisg-u-fs14 { font-size: 14px; }
.aisg-u-mt4 { margin-top: 4px; }
.aisg-u-mt5 { margin-top: 5px; }
.aisg-u-mt8 { margin-top: 8px; }
.aisg-u-mt12 { margin-top: 12px; }
.aisg-u-mt16 { margin-top: 16px; }
.aisg-u-mb4 { margin-bottom: 4px; }
.aisg-u-mb12 { margin-bottom: 12px; }
.aisg-u-mb16 { margin-bottom: 16px; }
.aisg-u-m0-8 { margin: 0 0 8px 0; }
.aisg-u-m0-4 { margin: 0 0 4px 0; }
.aisg-u-m12-0-8 { margin: 12px 0 8px 0; }
.aisg-u-row { display: flex; gap: 8px; }
.aisg-u-center { text-align: center; }
.aisg-u-dblock { display: block; }
.aisg-u-muted { color: var(--color-text-muted); }
.aisg-u-body { color: var(--color-text-body); }
.aisg-u-heading { color: var(--color-text-heading); }
.aisg-u-bold { font-weight: 600; }

/* Section separator — top rule inside a card. */
.aisg-u-sect {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.aisg-u-sect-12 {
    margin: 12px 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* Small block label above a control. */
.aisg-u-label {
    font-size: 11px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 2px;
}

/* A checkbox/radio row label. */
.aisg-u-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Empty-state message centred inside a card. */
.aisg-u-empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: 20px;
}

.aisg-u-empty-sm {
    color: var(--color-text-muted);
    font-size: 11px;
    text-align: center;
    padding: 10px;
}

/* Table cell alignment helpers. */
.aisg-u-cell-l { padding: 8px 4px; text-align: left; }
.aisg-u-cell-c { padding: 8px 4px; text-align: center; }

/* Small full-width inline form control (4px radius family). */
.aisg-field-xs {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 11px;
}

/* Fixed-width centred numeric input used by the plan editor. */
.aisg-field-num {
    width: 80px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 13px;
}

.aisg-field-num-sm {
    width: 70px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 13px;
}

/* ============================================================================
   BATCH 5 — PASS 2 (the voice-tab / monetization long tail)
   ============================================================================ */

.aisg-check-row-12 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-heading);
    font-size: 12px;
    cursor: pointer;
}

.aisg-check-row-13 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-heading);
    font-size: 13px;
    cursor: pointer;
}

.aisg-note-micro-2 { font-size: 11px; color: var(--color-text-muted); }
.aisg-note-tiny { font-size: 10px; color: var(--color-text-muted); opacity: 0.7; }
.aisg-u-micro-dim { font-size: 10px; color: var(--color-text-muted); opacity: 0.55; margin-top: 2px; }
.aisg-u-micro-dim-inline { font-size: 11px; color: var(--color-text-muted); opacity: 0.55; }

.aisg-field-md {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 13px;
}

.aisg-chip-box { padding: 6px 10px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; }

.aisg-textarea-sm {
    min-height: 110px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 12px;
}

.aisg-btn-bronze {
    font-size: 12px;
    padding: 6px 16px;
    background: var(--color-primary-gradient);
    color: var(--color-text-on-dark);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.aisg-btn-xs {
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    cursor: pointer;
}

.aisg-u-col-6 { display: flex; flex-direction: column; gap: 6px; }
.aisg-u-col-2 { display: flex; flex-direction: column; gap: 2px; }
.aisg-accent-primary { accent-color: var(--color-primary); }
.aisg-u-min80 { min-width: 80px; }
.aisg-u-flex1-min120 { flex: 1; min-width: 120px; }
.aisg-u-uppercase { text-transform: uppercase; }
.aisg-u-rel-mlauto { position: relative; display: inline-block; margin-left: auto; }

.aisg-u-mt8-hidden-row { margin-top: 8px; display: none; gap: 4px; }

.aisg-dim-box-sm {
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    margin-top: 4px;
}

/* ============================================================================
   BATCH 5 — PASS 3 (tools / settings / user-management / dashboard)
   ----------------------------------------------------------------------------
   ★ WHY THE SAME SWAP EXTENDS HERE. The batch target (`style=` < 300) is
   FILE-WIDE, and after the two named tabs were conformed these four renderers
   held the largest remaining count. They repeat the identical table-cell and
   form-control literals, so they are the same defect — a copied derived value.
   ============================================================================ */

.aisg-u-cell-r { padding: 8px 4px; text-align: right; }
.aisg-u-cell-l-sm { padding: 4px 6px; text-align: left; }
.aisg-u-pad4 { padding: 4px; }
.aisg-u-pad4-center { padding: 4px; text-align: center; }
.aisg-u-pad3-0 { padding: 3px 0; }
.aisg-u-pad6-4 { padding: 6px 4px; }
.aisg-u-cell-num-bold { padding: 6px 4px; text-align: center; color: var(--color-text-heading); font-weight: 600; }
.aisg-u-cell-muted { padding: 8px 4px; color: var(--color-text-muted); }
.aisg-u-th-thin { padding: 6px 8px; border-bottom: 1px solid var(--color-border); }

.aisg-u-sect-thin {
    margin-top: 4px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 10px;
}

.aisg-u-sect-lg {
    margin-top: 20px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    position: relative;
}

.aisg-u-text-r { text-align: right; }
.aisg-u-text-r.aisg-u-bold { text-align: right; font-weight: 600; }

.aisg-u-empty-lg {
    color: var(--color-text-muted);
    text-align: center;
    padding: 20px;
}

.aisg-u-subhead { color: var(--color-text-muted); font-size: 12px; margin-bottom: 12px; }
.aisg-u-hint { color: var(--color-text-muted); font-size: 11px; margin: 4px 0 0; }
.aisg-u-th { border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }

.aisg-u-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.aisg-u-table-soft { width: 100%; font-size: 12px; color: var(--color-text-body); border-collapse: collapse; }

.aisg-field-xs-l {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 12px;
}

.aisg-field-xs-dark {
    width: 100%;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 12px;
    color-scheme: dark;
}

.aisg-field-md-l {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 13px;
}

.aisg-field-md-pad {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 13px;
}

.aisg-u-row-mb8 { display: flex; gap: 8px; margin-bottom: 8px; }
.aisg-u-label-12 { color: var(--color-text-heading); font-size: 12px; display: block; margin-bottom: 4px; }
.aisg-u-label-11 { color: var(--color-text-heading); font-size: 11px; display: block; margin-bottom: 4px; }
.aisg-u-note-10 { color: var(--color-text-muted); font-size: 10px; margin-bottom: 8px; }
.aisg-u-nowrap { font-size: 11px; white-space: nowrap; }
.aisg-u-check-sm { width: 14px; height: 14px; cursor: pointer; }
.aisg-u-h220 { height: 220px; }
.aisg-u-scrollx { overflow-x: auto; }
.aisg-u-stat-big { font-size: 18px; font-weight: 800; color: var(--color-text-heading); }

.aisg-stat-tile {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

/* ============================================================================
   BATCH 5 — PASS 4 (full-file residuals)
   ============================================================================ */

.aisg-u-hint-4 { margin: 4px 0 0; color: var(--color-text-muted); font-size: 11px; }
.aisg-u-m0-6 { margin: 0 0 6px; }
.aisg-u-label-13 { font-size: 13px; color: var(--color-text-body); display: block; margin-bottom: 4px; }
.aisg-u-muted-2 { color: var(--color-text-muted); }
.aisg-u-note-10-mt { color: var(--color-text-muted); font-size: 10px; margin-top: 4px; }
.aisg-bg-transparent { background: transparent; }

.aisg-btn-del {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: #e74c3c;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
}

.aisg-field-md-w {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 13px;
}

.aisg-swatch-btn {
    width: 44px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.aisg-u-18 { width: 18px; height: 18px; }

.aisg-field-sm-alt {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 12px;
}

.aisg-panel-box {
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.aisg-u-sect-20 { margin: 20px 0; border-top: 1px solid var(--color-border); }
.aisg-u-pad6-14 { padding: 6px 14px; }
.aisg-u-ml8 { margin-left: 8px; }
.aisg-u-ml4 { margin-left: 4px; }
.aisg-u-fs13-muted-flex1 { font-size: 13px; color: var(--color-text-body); flex: 1; }
.aisg-u-hidden { display: none; }
.aisg-u-row-end { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.aisg-u-row-center-mb12 { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.aisg-u-col-8 { display: flex; flex-direction: column; gap: 8px; }
.aisg-u-inline { display: inline; }
.aisg-u-body-17 { color: var(--color-text-muted); font-size: 12px; line-height: 1.7; margin: 0 0 12px 0; }
.aisg-u-dim-30 { color: var(--color-text-muted); font-size: 11px; opacity: 0.6; }

/* ============================================================================
   BATCH 5 — PASS 5 (final residuals)
   ============================================================================ */

.aisg-u-cell-l-w15 { padding: 8px 4px; text-align: left; width: 15%; }
.aisg-u-cell-l-w18 { padding: 6px 4px; text-align: left; width: 18%; }
.aisg-text-gold { color: #daa520; }
.aisg-u-weight400 { font-weight: 400; }
.aisg-u-mono { font-family: monospace; }
.aisg-u-round { border-radius: 50%; }

.aisg-btn-mini {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 3px 8px;
}

.aisg-field-num-w100 {
    width: 100px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 13px;
}

.aisg-field-num-90 {
    width: 90px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 12px;
}

.aisg-field-num-70 {
    width: 70px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-body);
    font-size: 12px;
}

.aisg-u-codearea {
    width: 100%;
    min-height: 60px;
    font-family: monospace;
    font-size: 10px;
}

.aisg-u-textarea-min40 { width: 100%; min-height: 40px; }

.aisg-swatch-btn-50 {
    width: 50px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.aisg-u-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}