/**
 * Admin Dashboard Global Styles
 * Polite Platform :: Control Plane
 * ----------------------------------
 * Path: /control-plane/public/assets/reference/css/admin.css
 * Description: Shared styles for all admin editor pages with theme support
 * Context: UI
 * Author: Polite Platform Team
 * Date: 2026-09-06T20:52:44Z
 * Generated by: GPT-5 Codex (exact port of the Admin Dashboard reference)
 *
 * ICONS: Uses the self-hosted Phosphor subset in phosphor.css.
 *
 * THEMES: dark (default), light, slate, midnight
 * Usage: Add data-theme="light" to <html> or use AdminTheme.set('light')
 */

/* ═══════════════════════════════════════════════════════════════
   CSS VARIABLES - Dark Theme (Default)
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Backgrounds */
    --bg: #0f0f10;
    --bg-elevated: #1a1a1c;
    --surface: #1a1a1c;
    --surface-hover: #222224;
    /* Third static elevation tier, added 2026-07-20 (TD-42). Matches
       relay/operator/src/index.css's dark --bg-elevated (#2a2a2c) exactly —
       admin.css's own --bg-elevated/--surface names were already taken by
       the reference dashboard's --bg-surface value, so this is a new token,
       not a rename. Use for content that should read as more raised than
       --surface without borrowing --border's color for a background role. */
    --surface-raised: #2a2a2c;
    --border: #2a2a2c;
    --border-subtle: #1f1f21;
    
    /* Text */
    --text: #e5e5e5;
    --text-dim: #a1a1a1;
    --text-muted: #6b6b6b;
    --text-label: #9ca3af;
    
    /* Brand Colors */
    --accent: #60a5fa;
    --purple: #a78bfa;
    --purple-dim: rgba(167, 139, 250, 0.15);
    
    /* Status Colors */
    --green: #4ade80;
    --orange: #fbbf24;
    --red: #f87171;
    --cyan: #22d3ee;
    --yellow: #fbbf24;
    --blue: #60a5fa;

    /* Semantic aliases — several editor pages reference these names.
       Defined as aliases so they track per-theme overrides automatically. */
    --success: var(--green);
    --danger: var(--red);
    --input-bg: var(--bg);
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* System UI grays - not pure white */
    --bg: #e8e8ed;
    --bg-elevated: #ffffff;
    --surface: #f2f2f7;
    --surface-hover: #e5e5ea;
    /* Matches relay/operator's light --bg-elevated exactly (already #ffffff
       here too) — see dark theme's --surface-raised comment for why this
       token exists as a name, not just a rename. */
    --surface-raised: #ffffff;
    --border: #c7c7cc;
    --border-subtle: #d1d1d6;
    
    /* Dark text for readability */
    --text: #1c1c1e;
    --text-dim: #3a3a3c;
    --text-muted: #636366;
    --text-label: #48484a;
    
    /* Adjusted accents for light backgrounds */
    --accent: #007aff;
    --purple: #af52de;
    --purple-dim: rgba(175, 82, 222, 0.15);
    
    /* Status Colors - darker for contrast */
    --green: #34c759;
    --orange: #ff9500;
    --red: #ff3b30;
    --cyan: #5ac8fa;
    --yellow: #ff9500;
    --blue: #007aff;
}

/* Light theme specific adjustments */
[data-theme="light"] .card,
[data-theme="light"] .section {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #af52de, #9333ea);
}

[data-theme="light"] .module-card:hover {
    border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   SLATE THEME (Blue-gray tones)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="slate"] {
    --bg: #0f172a;
    --bg-elevated: #1e293b;
    --surface: #1e293b;
    --surface-hover: #334155;
    /* Matches relay/operator's slate --bg-elevated exactly (same value as
       --surface-hover here — see dark theme's --surface-raised comment). */
    --surface-raised: #334155;
    --border: #334155;
    --border-subtle: #1e293b;
    
    --text: #f1f5f9;
    --text-dim: #94a3b8;
    --text-muted: #64748b;
    --text-label: #94a3b8;
    
    --accent: #38bdf8;
    --purple: #a78bfa;
    --purple-dim: rgba(167, 139, 250, 0.15);
    
    --green: #4ade80;
    --orange: #fb923c;
    --red: #f87171;
    --cyan: #22d3ee;
    --yellow: #fbbf24;
    --blue: #38bdf8;
}

/* ═══════════════════════════════════════════════════════════════
   MIDNIGHT THEME (Ultra dark, monotone + amber accent)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="midnight"] {
    /* Near-black backgrounds with minimal contrast */
    --bg: #09090b;
    --bg-elevated: #0c0c0e;
    --surface: #0c0c0e;
    --surface-hover: #131316;
    /* Matches relay/operator's midnight --bg-elevated exactly (same value as
       --surface-hover here — see dark theme's --surface-raised comment). */
    --surface-raised: #131316;
    --border: #1c1c1f;
    --border-subtle: #141417;
    
    /* Dimmed text - easier on eyes in dark environments */
    --text: #9a9a9a;
    --text-dim: #707070;
    --text-muted: #4a4a4a;
    --text-label: #5a5a5a;
    
    /* Amber is THE accent - everything else muted */
    --accent: #f59e0b;
    --purple: #a3a3a3;
    --purple-dim: rgba(163, 163, 163, 0.1);
    
    /* Monotone except amber and red for errors */
    --green: #f59e0b;    /* Amber instead of green */
    --orange: #fbbf24;   /* Lighter amber */
    --red: #dc2626;      /* Keep red for errors */
    --cyan: #a3a3a3;     /* Muted */
    --yellow: #f59e0b;
    --blue: #a3a3a3;     /* Muted gray */
}

/* Midnight: Remove colored backgrounds - go monotone */
[data-theme="midnight"] .info-box,
[data-theme="midnight"] .status-badge.enabled,
[data-theme="midnight"] .status-badge.success {
    background: var(--surface-hover);
    border-color: var(--border);
}

/* Midnight: Amber accent for primary actions */
[data-theme="midnight"] .btn-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* Midnight: Module card hover uses amber */
[data-theme="midnight"] .module-card:hover {
    border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME ENHANCEMENTS (Gradients & Depth)
   ═══════════════════════════════════════════════════════════════ */

/* Dark: Subtle gradient on cards for depth */
html:not([data-theme]) .card,
html:not([data-theme]) .section,
[data-theme="dark"] .card,
[data-theme="dark"] .section {
    background: linear-gradient(180deg, #1f1f21 0%, #1a1a1c 100%);
}

/* Dark: Subtle inner highlight on cards */
html:not([data-theme]) .card,
html:not([data-theme]) .section,
[data-theme="dark"] .card,
[data-theme="dark"] .section {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
}

/* Dark: Gradient status badges */
html:not([data-theme]) .status-badge.success,
html:not([data-theme]) .status-badge.enabled,
[data-theme="dark"] .status-badge.success,
[data-theme="dark"] .status-badge.enabled {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.08) 100%);
}

html:not([data-theme]) .status-badge.warning,
[data-theme="dark"] .status-badge.warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.08) 100%);
}

html:not([data-theme]) .status-badge.error,
[data-theme="dark"] .status-badge.error {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.08) 100%);
}

/* Dark: Gradient info boxes */
html:not([data-theme]) .info-box,
[data-theme="dark"] .info-box {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(167, 139, 250, 0.04) 100%);
}

html:not([data-theme]) .info-box.success,
[data-theme="dark"] .info-box.success {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12) 0%, rgba(74, 222, 128, 0.04) 100%);
}

html:not([data-theme]) .info-box.warning,
[data-theme="dark"] .info-box.warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0.04) 100%);
}

/* Dark: Module cards with subtle gradient */
html:not([data-theme]) .module-card,
[data-theme="dark"] .module-card {
    background: linear-gradient(180deg, #141416 0%, #0f0f10 100%);
}

/* Dark: Template cards - match module card style */
html:not([data-theme]) .template-card,
[data-theme="dark"] .template-card {
    background: linear-gradient(180deg, #141416 0%, #0f0f10 100%);
}

/* Dark: Button primary gradient */
html:not([data-theme]) .btn-primary,
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
}

/* ═══════════════════════════════════════════════════════════════
   SLATE THEME ENHANCEMENTS (Blue-tinted gradients)
   ═══════════════════════════════════════════════════════════════ */

[data-theme="slate"] .card,
[data-theme="slate"] .section {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}

[data-theme="slate"] .module-card {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="slate"] .btn-primary {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.header-right,
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.back-btn {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 20px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.back-btn:hover {
    background: var(--surface-hover);
    color: var(--purple);
    text-decoration: none;
}

.header h1 {
    font-size: 18px;
    font-weight: 600;
}

/* ── Save status pill (admin-header.js) ───────────────────────────
   Shared editor save-state indicator: Saved / Unsaved changes /
   Saving… / error. Promoted from storyboard.css's original
   .save-status rule so any AdminHeader.init()-driven editor gets the
   same pill without hand-copying it. storyboard.html has since
   migrated onto AdminHeader.init() too (TD-42), but it deliberately
   doesn't load admin.css — its Bento chrome is dense enough to
   warrant its own stylesheet — so storyboard.css keeps its own
   .save-status rule to style the same admin-header.js-generated
   markup. As of TD-42's close, storyboard.css's tokens use these same
   names (--bg/--surface/--text/etc.) with matching dark-theme values,
   so the two copies stay visually identical without needing to be
   the same rule. */
.save-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--surface-hover);
    color: var(--text-dim);
    border: 1px solid transparent;
}

.save-status.dirty {
    background: rgba(251, 191, 36, 0.12);
    color: var(--orange);
    border-color: rgba(251, 191, 36, 0.25);
}

.save-status.saving {
    background: rgba(96, 165, 250, 0.14);
    color: var(--accent);
    border-color: rgba(96, 165, 250, 0.28);
}

.save-status.error {
    background: rgba(248, 113, 113, 0.14);
    color: var(--red);
    border-color: rgba(248, 113, 113, 0.30);
}

.save-status i {
    font-size: 12px;
}

.save-status .spinner {
    width: 10px;
    height: 10px;
    border-width: 2px;
}

.header h1 span {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 14px;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--purple), #7c3aed);
    color: white;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.btn-secondary,
.btn-gray {
    background: var(--surface-hover);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover,
.btn-gray:hover {
    background: var(--border);
    border-color: var(--text-muted);
}

.btn-danger {
    background: var(--red);
    color: white;
}

.btn-success {
    background: var(--green);
    color: white;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS & CARDS
   ═══════════════════════════════════════════════════════════════ */

.section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: 20px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: var(--spacing-md);
}

.section-divider {
    border-top: 1px solid var(--border);
    margin: 20px 0;
    padding-top: 20px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.card:hover {
    border-color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.form-group select {
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--transition-fast);
    min-width: 150px;
    max-width: 100%;
}

/* Opt-in full width for any input/select */
.form-group .full-width,
.form-group input.full-width,
.form-group select.full-width {
    width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--purple);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox Group (fallback for radios, multi-select) */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--spacing-sm);
}

.checkbox-group input[type="checkbox"],
.checkbox-group input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--purple);
    cursor: pointer;
}

.checkbox-group label {
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOGGLE SWITCH (iOS-style)
   ═══════════════════════════════════════════════════════════════ */

.toggle-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-sm);
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border);
    border-radius: 26px;
    transition: background 0.2s ease;
}

.toggle-switch .slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .slider {
    background: var(--purple);
}

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

.toggle-switch input:focus + .slider {
    box-shadow: 0 0 0 2px var(--purple-dim);
}

.toggle-switch input:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-group label {
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

/* Help Text */
.help-text {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: var(--spacing-xs);
}

/* Color Picker */
.color-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-input-group input[type="color"] {
    width: 50px;
    height: 36px;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: 0;
}

/* Range Slider */
.range-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.range-group input[type="range"] {
    flex: 1;
    accent-color: var(--purple);
}

.range-group span {
    width: 50px;
    text-align: right;
    font-size: 13px;
    color: var(--text-dim);
}

/* Slider Track - Custom styled range inputs */
.slider-track {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.slider-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
}

.slider-track input[type="range"] {
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.slider-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.slider-track input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.slider-track input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: grab;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.slider-track input[type="range"]::-moz-range-track {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE UPLOAD / PREVIEW
   ═══════════════════════════════════════════════════════════════ */

.image-preview {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 10px;
    background: var(--bg);
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-preview .clear-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background var(--transition-fast);
}

.image-preview .clear-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.status-badge.enabled,
.status-badge.success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--green);
}

.status-badge.disabled,
.status-badge.inactive {
    background: rgba(136, 136, 136, 0.2);
    color: var(--text-dim);
}

.status-badge.warning {
    background: rgba(249, 115, 22, 0.2);
    color: var(--orange);
}

.status-badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════
   INFO BOXES & ALERTS
   ═══════════════════════════════════════════════════════════════ */

.info-box {
    padding: 12px 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-md);
    font-size: 13px;
}

.info-box.muted {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--border);
}

.info-box.success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.info-box.warning {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
}

.info-box.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    z-index: 1000;
    animation: toastSlideIn 0.3s ease;
}

.toast.success {
    background: var(--green);
    color: white;
}

.toast.error {
    background: var(--red);
    color: white;
}

.toast.info {
    background: var(--accent);
    color: white;
}

.toast.warning {
    background: var(--orange);
    color: white;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════════════════════════════ */

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: var(--text-dim);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.main {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.main-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.main-full {
    padding: var(--spacing-lg);
}

/* Two-panel editor layout (AI preset, FX preset, layout editor) */
.main-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: calc(100vh - 65px);
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Grid Layouts */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .two-col,
    .three-col {
        grid-template-columns: 1fr;
    }
}

/* Flex Utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

tr:hover td {
    background: var(--surface-hover);
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--spacing-lg);
}

.tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.tab:hover {
    color: var(--text);
}

.tab.active {
    color: var(--purple);
    border-bottom-color: var(--purple);
}

/* ═══════════════════════════════════════════════════════════════
   CODE / MONOSPACE
   ═══════════════════════════════════════════════════════════════ */

code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 13px;
    background: var(--bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

pre {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 13px;
    background: var(--bg);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════
   QUICK FILL OPTIONS (Share Station specific but reusable)
   ═══════════════════════════════════════════════════════════════ */

.quick-fill-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--spacing-sm);
}

.quick-fill-options label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.breadcrumb {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 8px;
}

/* ═══════════════════════════════════════════════════════════════
   CONTAINER LAYOUTS
   ═══════════════════════════════════════════════════════════════ */

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 20px;
}

.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.container-lg {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ═══════════════════════════════════════════════════════════════
   MODULE GRID (Pipeline configuration)
   ═══════════════════════════════════════════════════════════════ */

.module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

@media (max-width: 900px) {
    .module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .module-grid {
        grid-template-columns: 1fr;
    }
}

.module-card {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
}

.module-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Configured cards - full prominence */
.module-card.configured {
    opacity: 1;
    border-color: var(--border);
}

.module-card.configured:hover {
    border-color: var(--accent);
}

.module-card.incomplete {
    border-color: var(--orange);
}

.module-card.optional {
    opacity: 0.55;
    border-color: var(--border-subtle);
}

.module-card.optional:hover {
    opacity: 0.85;
    border-color: var(--border);
}

.module-card.disabled {
    border-color: var(--border);
    opacity: 0.5;
    cursor: not-allowed;
}

.module-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.module-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.module-status {
    font-size: 12px;
    color: var(--text-dim);
}

.module-status.status-complete {
    color: var(--green);
}

.module-status.status-optional {
    color: var(--text-dim);
}

.module-status.status-incomplete {
    color: var(--orange);
}

/* ═══════════════════════════════════════════════════════════════
   TEMPLATE GRID (Photo/Video templates)
   ═══════════════════════════════════════════════════════════════ */

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
}

.template-card {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: all var(--transition-normal);
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.template-card:hover {
    border-color: var(--text-dim);
}

.template-thumb {
    flex-shrink: 0;
    width: 70px;
    height: 80px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.template-thumb .thumb-placeholder {
    font-size: 24px;
    color: var(--text-muted);
    opacity: 0.5;
}

.template-content {
    flex: 1;
    min-width: 0;
}

.template-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    margin-bottom: 4px;
}

.template-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.approval-select {
    width: 100%;
    height: 36px;
    min-height: 36px;
    margin-top: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    color-scheme: dark;
}

.approval-select:hover {
    border-color: var(--text-dim);
    background-color: var(--surface-hover);
}

.approval-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}

.approval-select.status-needs-review,
.approval-select.needs-review {
    border-color: var(--yellow);
    color: var(--yellow);
    background-color: color-mix(in srgb, var(--yellow) 8%, var(--surface));
}

.approval-select.status-needs-review:hover,
.approval-select.status-needs-review:focus-visible,
.approval-select.needs-review:hover,
.approval-select.needs-review:focus-visible {
    border-color: var(--yellow);
    color: var(--yellow);
}

.approval-select.status-authored {
    border-color: var(--purple);
    color: var(--purple);
    background-color: color-mix(in srgb, var(--purple) 8%, var(--surface));
}

.approval-select.status-authored:hover,
.approval-select.status-authored:focus-visible {
    border-color: var(--purple);
    color: var(--purple);
}

.approval-select.status-internal-approved {
    border-color: var(--blue);
    color: var(--blue);
    background-color: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.approval-select.status-internal-approved:hover,
.approval-select.status-internal-approved:focus-visible {
    border-color: var(--blue);
    color: var(--blue);
}

.approval-select.status-client-approved {
    border-color: var(--green);
    color: var(--green);
    background-color: color-mix(in srgb, var(--green) 10%, var(--surface));
}

.approval-select.status-client-approved:hover,
.approval-select.status-client-approved:focus-visible {
    border-color: var(--green);
    color: var(--green);
}

.approval-select.status-not-required {
    color: var(--text-dim);
    background-color: color-mix(in srgb, var(--text-muted) 8%, var(--surface));
}

.approval-select.compact {
    width: auto;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 4px 7px;
    border-color: transparent;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1;
}

.approval-select.compact:hover {
    border-color: transparent;
}

.approval-select.compact:focus-visible {
    border-color: transparent;
    outline-width: 1px;
    outline-offset: 1px;
}

.approval-select.compact.status-needs-review,
.approval-select.compact.needs-review {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--yellow) 16%, var(--surface));
}

.approval-select.compact.status-authored {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--purple) 14%, var(--surface));
}

.approval-select.compact.status-internal-approved {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--blue) 14%, var(--surface));
}

.approval-select.compact.status-client-approved {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--green) 14%, var(--surface));
}

.approval-select.compact.status-not-required {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--text-muted) 12%, var(--surface));
}

[data-theme="light"] .approval-select {
    color-scheme: light;
}

.default-badge {
    position: absolute;
    top: 8px;
    right: 36px;
    background: var(--accent);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.backup-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--orange);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   CARD CONTEXT MENU
   ═══════════════════════════════════════════════════════════════ */

.card-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    opacity: 0.5;
    transition: all var(--transition-normal);
}

.template-card:hover .card-menu-btn,
.card:hover .card-menu-btn {
    opacity: 1;
}

.card-menu-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.card-menu {
    display: none;
    position: absolute;
    top: 32px;
    right: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    min-width: 140px;
    overflow: hidden;
}

.card-menu.show {
    display: block;
}

.card-menu button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.card-menu button:hover {
    background: var(--surface-hover);
}

.card-menu button.danger {
    color: var(--red);
}

.card-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   BADGE VARIANTS (for template features)
   ═══════════════════════════════════════════════════════════════ */

.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    background: rgba(136, 136, 136, 0.2);
    color: var(--text-dim);
}

.badge.enabled {
    background: rgba(34, 197, 94, 0.2);
    color: var(--green);
}

.badge.disabled {
    background: rgba(136, 136, 136, 0.15);
    color: var(--text-muted);
}

.badge.clickable {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.badge.clickable:hover {
    opacity: 0.8;
}

.fx-badge.enabled {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.ai-badge.enabled {
    background: rgba(168, 85, 247, 0.2);
    color: var(--purple);
}

/* Digital badge - blue. The :not() chain must also exclude print-badge:
   :not() counts toward specificity, so without it this rule out-ranks
   .print-badge.enabled below and print renders blue. */
.badge.enabled:not(.fx-badge):not(.ai-badge):not(.print-badge) {
    background: rgba(96, 165, 250, 0.2);
    color: var(--accent);
}

/* Override for explicit digital/print classes if needed */
.digital-badge.enabled {
    background: rgba(96, 165, 250, 0.2);
    color: var(--accent);
}

.print-badge.enabled {
    background: rgba(74, 222, 128, 0.2);
    color: var(--green);
}

/* Badge hover effect for clickable badges */
.badge.clickable:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* ═══════════════════════════════════════════════════════════════
   SMALL BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.btn-small:hover {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */

.empty-templates,
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
}

.empty-templates p,
.empty-state p {
    margin-bottom: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   RENAME MODAL (simple inline modal)
   ═══════════════════════════════════════════════════════════════ */

.rename-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.rename-modal.show {
    display: flex;
}

.rename-modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-width: 320px;
    max-width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.rename-modal h3 {
    margin: 0 0 16px 0;
    color: var(--text);
    font-size: 16px;
}

.rename-modal input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 14px;
    margin-bottom: 16px;
}

.rename-modal input:focus {
    outline: none;
    border-color: var(--accent);
}

.rename-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.rename-modal-buttons button {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.rename-modal-buttons .cancel-btn {
    background: var(--surface-hover);
    color: var(--text-dim);
}

.rename-modal-buttons .cancel-btn:hover {
    background: var(--border);
}

.rename-modal-buttons .save-btn {
    background: var(--accent);
    color: white;
}

.rename-modal-buttons .save-btn:hover {
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT CARDS (index, project list)
   ═══════════════════════════════════════════════════════════════ */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.project-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: transform var(--transition-normal);
}

.project-card:hover {
    transform: translateY(-2px);
}

.project-card h3 {
    margin-bottom: 12px;
}

.project-card p {
    color: var(--text-dim);
    font-size: 14px;
    margin: 6px 0;
}

/* ═══════════════════════════════════════════════════════════════
   RADIO CARD (wizard, intake)
   ═══════════════════════════════════════════════════════════════ */

.radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.radio-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: center;
}

.radio-card:hover {
    border-color: var(--text-dim);
}

.radio-card.selected {
    border-color: var(--purple);
    background: var(--purple-dim);
}

.radio-card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.radio-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.radio-desc {
    font-size: 13px;
    color: var(--text-dim);
}

/* Checkbox cards (multi-select variant) */
.checkbox-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.checkbox-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: center;
}

.checkbox-card:hover {
    border-color: var(--text-dim);
}

.checkbox-card.selected {
    border-color: var(--purple);
    background: var(--purple-dim);
}

.checkbox-title {
    font-size: 13px;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
}

.empty-state h2 {
    margin-bottom: 8px;
    color: var(--text);
}

.empty-state p {
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS (alternate style)
   ═══════════════════════════════════════════════════════════════ */

.section-header {
    font-size: 14px;
    font-weight: 600;
    margin: 30px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TITLE (large heading with subtitle)
   ═══════════════════════════════════════════════════════════════ */

.page-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.page-subtitle {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 30px;
}

/* ═══════════════════════════════════════════════════════════════
   PHOSPHOR ICONS - Utility Classes
   Include CDN: <script src="https://unpkg.com/@phosphor-icons/web"></script>
   ═══════════════════════════════════════════════════════════════ */

/* Base icon styling */
.ph, [class^="ph-"], [class*=" ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Icon sizes */
.icon-xs { font-size: 12px; }
.icon-sm { font-size: 14px; }
.icon-md { font-size: 16px; }
.icon-lg { font-size: 20px; }
.icon-xl { font-size: 24px; }
.icon-2xl { font-size: 32px; }
.icon-3xl { font-size: 48px; }

/* Icon with text - inline alignment */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.icon-text i {
    flex-shrink: 0;
}

/* Button icons */
.btn i, button i {
    margin-right: 6px;
    font-size: 1.1em;
}

.btn i:only-child, button i:only-child {
    margin-right: 0;
}

/* Status colors for icons */
.icon-success { color: var(--green); }
.icon-warning { color: var(--orange); }
.icon-error { color: var(--red); }
.icon-info { color: var(--accent); }
.icon-muted { color: var(--text-dim); }

/* Icon placeholder (for empty states) */
.icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
}

/* Section title icons */
.section-title i {
    margin-right: 8px;
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════
   THEME PICKER COMPONENT
   Usage: AdminTheme.createPicker(document.getElementById('theme-container'))
   ═══════════════════════════════════════════════════════════════ */

.theme-picker {
    position: relative;
    display: inline-block;
}

.theme-picker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.theme-picker-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--text-muted);
}

.theme-picker-btn i {
    font-size: 16px;
}

.theme-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 200;
    overflow: hidden;
}

.theme-picker-dropdown.show {
    display: block;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.theme-option:hover {
    background: var(--surface-hover);
}

.theme-option.active {
    background: var(--purple-dim);
    color: var(--purple);
}

.theme-preview {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.theme-label {
    flex: 1;
}

/* Quick theme toggle button (for headers) */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.theme-toggle-btn i {
    font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════════
   TENANT NAV COMPONENT (admin-nav.js) — moved to css/admin-nav.css
   Its rules used to live here, reading these shared tokens directly.
   That broke on pages with a different token system (storyboard.css,
   layout-editor.css, piper-settings' inline styles) or none at all —
   the nav rendered unstyled, or its `--accent` collided with theirs.
   admin-nav.css shadows the tokens it needs locally with hardcoded
   fallbacks instead, so it's safe to load on every page that mounts the
   nav, not just ones sharing this file. Load it alongside this one.
   ═══════════════════════════════════════════════════════════════ */