/* ============================================
   SCMS CONTRACT EDITOR - CENTRALIZED STYLES
   Design System for Contract Management UI
   ============================================ */

/* ----------------------------------------
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ---------------------------------------- */

:root {
    /* Accent Colors */
    --ce-accent-gold: #f59e0b;
    --ce-accent-emerald: #10b981;
    --ce-accent-blue: #3b82f6;
    --ce-accent-rose: #f43f5e;
    --ce-accent-violet: #8b5cf6;
    --ce-accent-cyan: #06b6d4;
    --ce-accent-orange: #f97316;

    /* Border Radius */
    --ce-radius-sm: 6px;
    --ce-radius-md: 10px;
    --ce-radius-lg: 14px;
    --ce-radius-xl: 20px;

    /* Data Source Colors */
    --ce-db-color: var(--ce-accent-cyan);
    --ce-ai-color: #0ea5e9; /* Sky blue for professional AI look */

    /* Font Family - Use global typography variables */
    --ce-font-sans: var(--font-sans, 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    --ce-font-mono: var(--font-mono, 'JetBrains Mono', 'SF Mono', 'Consolas', monospace);
}

/* Dark Theme (Default) */
:root,
[data-theme="dark"] {
    --ce-bg-page: #0d0f12;
    --ce-bg-card: #1a1e27;
    --ce-bg-elevated: #222834;
    --ce-bg-hover: #2a3140;
    --ce-bg-input: #1a1e27;
    --ce-bg-secondary: #151921;

    --ce-border-subtle: rgba(255, 255, 255, 0.06);
    --ce-border-default: rgba(255, 255, 255, 0.1);
    --ce-border-strong: rgba(255, 255, 255, 0.15);
    --ce-border: #334155;

    --ce-text-primary: #f1f5f9;
    --ce-text-secondary: #cbd5e1;
    --ce-text-muted: #64748b;
    --ce-text-inverse: #0f172a;

    /* Accent Dim Colors (Dark Mode) */
    --ce-accent-gold-dim: rgba(245, 158, 11, 0.18);
    --ce-accent-emerald-dim: rgba(16, 185, 129, 0.18);
    --ce-accent-blue-dim: rgba(59, 130, 246, 0.18);
    --ce-accent-rose-dim: rgba(244, 63, 94, 0.18);
    --ce-accent-violet-dim: rgba(139, 92, 246, 0.18);
    --ce-accent-cyan-dim: rgba(6, 182, 212, 0.18);
    --ce-accent-orange-dim: rgba(249, 115, 22, 0.18);
    --ce-accent-sky-dim: rgba(14, 165, 233, 0.18);

    --ce-db-dim: var(--ce-accent-cyan-dim);
    --ce-ai-dim: var(--ce-accent-sky-dim);

    /* Shadows (Dark) */
    --ce-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --ce-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --ce-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* Status Colors (Dark) */
    --ce-success-bg: rgba(16, 185, 129, 0.15);
    --ce-success-text: #34d399;
    --ce-warning-bg: rgba(245, 158, 11, 0.15);
    --ce-warning-text: #fbbf24;
    --ce-danger-bg: rgba(239, 68, 68, 0.15);
    --ce-danger-text: #f87171;
    --ce-info-bg: rgba(59, 130, 246, 0.15);
    --ce-info-text: #60a5fa;

    /* Legacy mappings */
    --ce-primary: #3b82f6;
    --ce-primary-light: rgba(59, 130, 246, 0.15);
    --ce-primary-border: #3b82f6;
    --ce-text-main: var(--ce-text-primary);

    /* Border radius */
    --ce-radius-full: 9999px;
}

/* Light Theme - Enhanced with better contrast and professional look */
.light,
[data-theme="light"] {
    /* Slightly darker backgrounds for better contrast and 3D effect */
    --ce-bg-page: #eef1f5;
    --ce-bg-card: #ffffff;
    --ce-bg-elevated: #f5f7fa;
    --ce-bg-hover: #e8ecf2;
    --ce-bg-input: #ffffff;
    --ce-bg-secondary: #f0f3f7;

    /* Stronger borders for better definition */
    --ce-border-subtle: rgba(0, 0, 0, 0.08);
    --ce-border-default: rgba(0, 0, 0, 0.12);
    --ce-border-strong: rgba(0, 0, 0, 0.18);
    --ce-border: #d1d9e6;

    /* Text with good contrast */
    --ce-text-primary: #1a202c;
    --ce-text-secondary: #4a5568;
    --ce-text-muted: #718096;
    --ce-text-inverse: #ffffff;

    /* Cleaner, more professional accent backgrounds - less pastel */
    --ce-accent-gold-dim: rgba(245, 158, 11, 0.08);
    --ce-accent-emerald-dim: rgba(16, 185, 129, 0.08);
    --ce-accent-blue-dim: rgba(59, 130, 246, 0.08);
    --ce-accent-rose-dim: rgba(244, 63, 94, 0.08);
    --ce-accent-violet-dim: rgba(139, 92, 246, 0.08);
    --ce-accent-cyan-dim: rgba(6, 182, 212, 0.08);
    --ce-accent-orange-dim: rgba(249, 115, 22, 0.08);
    --ce-accent-sky-dim: rgba(14, 165, 233, 0.08);

    --ce-db-dim: var(--ce-accent-cyan-dim);
    --ce-ai-dim: var(--ce-accent-sky-dim);

    /* Enhanced shadows for better depth and 3D effect */
    --ce-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --ce-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --ce-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    --ce-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Status Colors (Light) - slightly richer */
    --ce-success-bg: #e6f7ed;
    --ce-success-text: #047857;
    --ce-warning-bg: #fef3dc;
    --ce-warning-text: #b45309;
    --ce-danger-bg: #fde8e8;
    --ce-danger-text: #b91c1c;
    --ce-info-bg: #e8f2ff;
    --ce-info-text: #1d4ed8;

    /* Legacy mappings */
    --ce-primary: #1e3a8a;
    --ce-primary-light: #e8f2ff;
    --ce-primary-border: #1d4ed8;
    --ce-text-main: var(--ce-text-primary);
}


/* ----------------------------------------
   2. PAGE LAYOUT & CONTAINERS
   ---------------------------------------- */

.ce-page {
    background-color: var(--ce-bg-page);
    min-height: 100vh;
    font-family: var(--ce-font-sans);
    color: var(--ce-text-primary);
    font-size: var(--text-base, 13px);
    line-height: var(--leading-normal, 1.5);
}

/* Layout Width Options */
.ce-page.layout-boxed .ce-content-area {
    max-width: 1400px;
    margin: 0 auto;
}

.ce-page.layout-full .ce-content-area {
    max-width: calc(100% - 2rem);
    margin: 0 auto;
}

/* Layout Toggle Button */
.ce-layout-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--ce-bg-elevated);
    border-radius: var(--ce-radius-sm);
    border: 1px solid var(--ce-border);
}

.ce-layout-toggle button {
    padding: 0.35rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--ce-text-muted);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
}

.ce-layout-toggle button:hover {
    color: var(--ce-text-primary);
    background: var(--ce-bg-hover);
}

.ce-layout-toggle button.active {
    background: var(--ce-bg-card);
    color: var(--ce-primary);
    box-shadow: var(--ce-shadow-sm);
}

/* Loading & Error States */
.ce-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 9999;
}

.ce-error-card {
    background: var(--ce-bg-card);
    border-radius: var(--ce-radius-lg);
    padding: 3rem;
    text-align: center;
    max-width: 400px;
    margin: 2rem auto;
    box-shadow: var(--ce-shadow-md);
}


/* ----------------------------------------
   3. HEADER BAR
   ---------------------------------------- */

.ce-header-bar {
    background: var(--ce-bg-card);
    border-bottom: 1px solid var(--ce-border);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 40; /* Keep below global header/user menu */
    box-shadow: var(--ce-shadow-sm);
}

/* Light mode header enhancements */
[data-theme="light"] .ce-header-bar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    border-bottom-color: #d1d9e6;
}

.ce-header-title-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ce-header-icon-box {
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    color: white;
    padding: 0.5rem;
    border-radius: var(--ce-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ce-header-main-text {
    font-size: var(--text-xl, 1.125rem);
    font-weight: var(--font-bold, 700);
    color: var(--ce-text-primary);
}

.ce-header-sub-text {
    font-size: var(--text-base, 13px);
    color: var(--ce-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ce-header-dot {
    width: 4px;
    height: 4px;
    background: var(--ce-text-muted);
    border-radius: 50%;
}

.ce-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}


/* ----------------------------------------
   4. BADGES & STATUS INDICATORS
   ---------------------------------------- */

.ce-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--text-sm, 11px);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.ce-badge-success { background: var(--ce-success-bg); color: var(--ce-success-text); }
.ce-badge-warning { background: var(--ce-warning-bg); color: var(--ce-warning-text); }
.ce-badge-danger { background: var(--ce-danger-bg); color: var(--ce-danger-text); }
.ce-badge-info { background: var(--ce-info-bg); color: var(--ce-info-text); }
.ce-badge-ai { background: var(--ce-ai-dim); color: var(--ce-ai-color); }
.ce-badge-db { background: var(--ce-db-dim); color: var(--ce-db-color); }

/* Match Type Badges */
.match-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--text-xs, 10px);
    font-weight: var(--font-bold, 700);
    text-transform: uppercase;
}

.match-badge.match { background: var(--ce-accent-emerald-dim); color: var(--ce-accent-emerald); }
.match-badge.differ { background: var(--ce-accent-orange-dim); color: var(--ce-accent-orange); }
.match-badge.new { background: var(--ce-accent-violet-dim); color: var(--ce-accent-violet); }
.match-badge.db-only { background: var(--ce-accent-rose-dim); color: var(--ce-accent-rose); }


/* ----------------------------------------
   5. SEASON TIMELINE STRIP
   ---------------------------------------- */

.ce-timeline-strip {
    padding: 1rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
    background: linear-gradient(180deg, var(--ce-bg-card) 0%, var(--ce-bg-page) 100%);
    border-bottom: 1px solid var(--ce-border);
}

.sticky-strip {
    position: sticky;
    top: 64px;
    z-index: 8;
}

.ce-timeline-strip::-webkit-scrollbar { display: none; }

.ce-season-card {
    min-width: 130px;
    background: var(--ce-bg-card);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    padding: 0.75rem 1rem;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: var(--ce-shadow-sm);
}

.ce-season-card.compact {
    min-width: 110px;
    padding: 0.65rem 0.75rem;
}

.ce-season-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ce-shadow-md);
    border-color: var(--ce-border-strong);
}

.ce-season-card.active {
    border-color: var(--ce-primary-border);
    background: var(--ce-primary-light);
    box-shadow: 0 0 0 2px var(--ce-primary-border), var(--ce-shadow-md);
}

/* Season Status Indicators */
.ce-season-card.status-db { border-left: 3px solid var(--ce-accent-emerald); }
.ce-season-card.status-ai { border-left: 3px solid var(--ce-accent-blue); }
.ce-season-card.status-review { border-left: 3px solid var(--ce-accent-orange); }

/* New AI Season */
.ce-season-card.new-ai {
    border: 2px dashed var(--ce-accent-violet);
    background: var(--ce-accent-violet-dim);
}

/* Saved Season Indicator */
.ce-season-card.saved {
    border-color: var(--ce-accent-emerald);
}

.ce-saved-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--ce-accent-emerald);
    font-size: 0.9rem;
    animation: savedPulse 0.6s ease;
}

@keyframes savedPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Save Button on Season Card - positioned at top-right as icon button */
.ce-season-save-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: var(--ce-primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.2s ease;
    z-index: 10;
}

.ce-season-card:hover .ce-season-save-btn,
.ce-season-card.active .ce-season-save-btn {
    opacity: 1;
    transform: scale(1);
}

.ce-season-save-btn:hover {
    background: var(--ce-accent-emerald);
    transform: scale(1.05);
}

.ce-season-save-btn .rzi {
    font-size: 0.875rem;
}

/* Light mode season card enhancements */
[data-theme="light"] .ce-season-card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ce-season-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ce-season-card.active {
    box-shadow: 0 0 0 2px var(--ce-primary-border), 0 4px 12px rgba(29, 78, 216, 0.15);
}

.ce-season-name {
    font-size: var(--text-base, 13px);
    font-weight: var(--font-semibold, 600);
    color: var(--ce-text-primary);
    margin: 0.15rem 0;
    line-height: 1.2;
}

.ce-season-amount {
    font-family: var(--ce-font-mono);
    font-size: var(--text-base, 13px);
    color: var(--ce-text-muted);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px dashed var(--ce-border);
}

/* ----------------------------------------
   6. CONTENT AREA & LAYOUT
   ---------------------------------------- */

.ce-content-area {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 4rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}

/* Honor global layout toggle */
.modern-layout.layout-boxed .ce-content-area,
.modern-layout.layout-boxed .ce-header-bar,
.modern-layout.layout-boxed .ce-timeline-strip {
    max-width: var(--content-max-width, 1400px);
    margin-left: auto;
    margin-right: auto;
}

.modern-layout.layout-full-width .ce-content-area,
.modern-layout.layout-full-width .ce-header-bar,
.modern-layout.layout-full-width .ce-timeline-strip {
    max-width: none;
    width: 100%;
}

/* Full-width mode: reduce page padding for more content space */
.modern-layout.layout-full-width .ce-page {
    padding-left: 0;
    padding-right: 0;
}

.ce-main-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0; /* Prevent grid blowout */
}

/* Sidebar Panel */
.ce-side-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ce-summary-sidebar {
    position: sticky;
    top: 88px;
    align-self: flex-start;
}


/* ----------------------------------------
   7. ACCORDION STYLES
   ---------------------------------------- */

.ce-accordion .rz-accordion-item {
    border: 1px solid var(--ce-border) !important;
    border-radius: var(--ce-radius-md) !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
    background: var(--ce-bg-card) !important;
    box-shadow: var(--ce-shadow-sm) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ce-accordion .rz-accordion-item:hover {
    box-shadow: var(--ce-shadow-md) !important;
}

.ce-accordion .rz-accordion-header {
    background: var(--ce-bg-elevated) !important;
    border-bottom: 1px solid var(--ce-border) !important;
    padding: 0.85rem 1rem !important;
}

.ce-accordion .rz-accordion-header a {
    color: var(--ce-text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.ce-accordion .rz-accordion-content {
    padding: 1.25rem !important;
}

/* Light mode accordion enhancements */
[data-theme="light"] .ce-accordion .rz-accordion-item {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .ce-accordion .rz-accordion-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    border-color: var(--ce-border-strong) !important;
}

/* Dark mode accordion - fix white background issue */
[data-theme="dark"] .ce-accordion .rz-accordion-item,
body[data-theme="dark"] .rz-accordion-item {
    background: var(--ce-bg-card, #1a1e27) !important;
    border-color: var(--ce-border, #334155) !important;
}

[data-theme="dark"] .ce-accordion .rz-accordion-header,
body[data-theme="dark"] .rz-accordion-header {
    background: var(--ce-bg-elevated, #222834) !important;
    border-bottom-color: var(--ce-border, #334155) !important;
}

[data-theme="dark"] .ce-accordion .rz-accordion-header a,
body[data-theme="dark"] .rz-accordion-header a {
    color: var(--ce-text-primary, #f1f5f9) !important;
}

[data-theme="dark"] .ce-accordion .rz-accordion-content,
body[data-theme="dark"] .rz-accordion-content {
    background: var(--ce-bg-card, #1a1e27) !important;
}

/* Also fix non-ce-accordion accordions in dark mode */
body[data-theme="dark"] .rz-accordion .rz-accordion-item {
    background: var(--ce-bg-card, #1a1e27) !important;
}

body[data-theme="dark"] .rz-accordion .rz-accordion-header {
    background: var(--ce-bg-elevated, #222834) !important;
}


/* ----------------------------------------
   8. FORM GRID & CONTROLS
   ---------------------------------------- */

.ce-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.ce-form-grid.four-col {
    grid-template-columns: repeat(4, 1fr);
}

.ce-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--ce-border);
}

.ce-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-base, 13px);
    color: var(--ce-text-muted);
    cursor: pointer;
}

/* Form Inputs */
.ce-form-input,
.ce-form-select {
    padding: 10px 14px;
    background: var(--ce-bg-input);
    border: 1px solid var(--ce-border-default);
    border-radius: var(--ce-radius-md);
    font-size: var(--text-base, 13px);
    color: var(--ce-text-primary);
    font-family: inherit;
    transition: all 0.2s;
    width: 100%;
}

.ce-form-input:focus,
.ce-form-select:focus {
    outline: none;
    border-color: var(--ce-accent-gold);
    box-shadow: 0 0 0 3px var(--ce-accent-gold-dim);
}

.ce-form-input.money {
    font-family: var(--ce-font-mono);
}


/* ----------------------------------------
   9. TABS CARD
   ---------------------------------------- */

.ce-tabs-card {
    background: var(--ce-bg-card);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    overflow: hidden;
    box-shadow: var(--ce-shadow-sm);
    transition: box-shadow 0.2s ease;
}

.ce-tabs .rz-tabview-nav {
    background: var(--ce-bg-elevated) !important;
    border-bottom: 1px solid var(--ce-border) !important;
    padding: 0 !important;
}

.ce-tabs .rz-tabview-nav-link {
    padding: 0.75rem 1.25rem !important;
    font-size:  0.8125rem !important;
    font-weight: 500 !important;
    color: var(--ce-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    transition: all 0.15s ease;
}

.ce-tabs .rz-tabview-nav-link:hover {
    color: var(--ce-text-secondary) !important;
    background: var(--ce-bg-hover) !important;
}

.ce-tabs .rz-tabview-nav-link.rz-state-active {
    color: var(--ce-primary) !important;
    border-bottom-color: var(--ce-primary) !important;
    background: var(--ce-bg-card) !important;
}

/* Light mode tabs enhancements */
[data-theme="light"] .ce-tabs-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ce-tabs .rz-tabview-nav {
    background: #f8f9fb !important;
}

.ce-tabs .rz-tabview-panel {
    padding: 0 !important;
}

.ce-tab-content {
    padding: 1rem;
}

/* Tab Count Badge */
.ce-tab-count {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--text-sm, 11px);
    font-weight: var(--font-semibold, 600);
    background: var(--ce-bg-elevated);
}

.ce-tab-count.has-changes {
    background: var(--ce-accent-orange-dim);
    color: var(--ce-accent-orange);
}


/* ----------------------------------------
   10. MODE BANNERS
   ---------------------------------------- */

.ce-mode-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: var(--text-base, 13px);
    border-bottom: 1px solid var(--ce-border);
}

.ce-mode-banner.mode-db { background: var(--ce-success-bg); color: var(--ce-success-text); }
.ce-mode-banner.mode-ai { background: var(--ce-info-bg); color: var(--ce-info-text); }
.ce-mode-banner.mode-review { background: var(--ce-warning-bg); color: var(--ce-warning-text); }


/* ----------------------------------------
   11. ACTION BAR
   ---------------------------------------- */

.ce-action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--ce-bg-elevated);
    border-bottom: 1px solid var(--ce-border);
}


/* ----------------------------------------
   12. INFO BANNER
   ---------------------------------------- */

.ce-info-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--ce-info-bg);
    color: var(--ce-info-text);
    font-size: var(--text-base, 13px);
    border-radius: var(--ce-radius-sm);
    margin-bottom: 1rem;
}


/* ----------------------------------------
   13. EMPTY STATE
   ---------------------------------------- */

.ce-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--ce-text-muted);
}

.ce-empty-state .rz-icon { font-size: 2.5rem; opacity: 0.4; margin-bottom: 0.75rem; }
.ce-empty-state span { font-size: 0.9rem; }
.ce-empty-state small { font-size: 0.75rem; opacity: 0.7; margin-top: 0.25rem; }

/* Legacy empty state class */
.editor-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.5rem;
}


/* ----------------------------------------
   13B. COMPACT COMPENSATION TABLE
   ---------------------------------------- */

.ce-comp-table-wrapper {
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-sm);
    overflow: hidden;
    margin: 0.5rem 0;
}

.ce-comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base, 13px);
}

.ce-comp-table thead {
    background: var(--ce-bg-elevated);
    border-bottom: 1px solid var(--ce-border);
}

.ce-comp-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: var(--text-xs, 11px);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ce-text-muted);
}

.ce-comp-th-select { width: 36px; }
.ce-comp-th-category { width: 160px; }
.ce-comp-th-desc { width: auto; }
.ce-comp-th-amount { width: 110px; text-align: right !important; }
.ce-comp-th-actions { width: 72px; }

/* Group Header Row */
.ce-comp-group-header {
    background: var(--ce-bg-secondary);
    border-top: 1px solid var(--ce-border);
}

.ce-comp-group-header:first-child {
    border-top: none;
}

.ce-comp-group-header td {
    padding: 0.5rem 0.75rem;
}

.ce-comp-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm, 12px);
    font-weight: var(--font-semibold, 600);
    color: var(--ce-text-secondary);
}

.ce-comp-group-title .material-symbols-outlined {
    font-size: 16px;
    color: var(--ce-text-muted);
}

.ce-comp-group-name {
    flex: 1;
}

.ce-comp-group-meta {
    font-size: var(--text-xs, 11px);
    font-weight: var(--font-normal, 400);
    color: var(--ce-text-muted);
    padding: 2px 8px;
    background: var(--ce-bg-elevated);
    border-radius: 10px;
}

.ce-comp-group-total {
    font-size: var(--text-sm, 12px);
    font-weight: var(--font-semibold, 600);
    color: var(--ce-primary);
    min-width: 100px;
    text-align: right;
}

/* Data Rows */
.ce-comp-row {
    border-top: 1px solid var(--ce-border-subtle);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ce-comp-row:hover {
    background: var(--ce-bg-hover);
}

.ce-comp-row--selected {
    background: var(--ce-primary-light) !important;
}

.ce-comp-row td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

/* Selection Radio */
.ce-comp-td-select {
    width: 36px;
    text-align: center;
}

.ce-comp-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ce-text-muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ce-comp-radio:hover {
    border-color: var(--ce-primary);
}

.ce-comp-radio--active {
    border-color: var(--ce-primary);
    background: var(--ce-primary);
}

.ce-comp-radio-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/* Category Cell */
.ce-comp-category {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ce-comp-cat-name {
    font-weight: var(--font-medium, 500);
    color: var(--ce-text-primary);
    font-size: var(--text-base, 13px);
}

.ce-comp-cat-type {
    font-size: var(--text-xs, 11px);
    color: var(--ce-text-muted);
}

/* Description Cell */
.ce-comp-desc {
    color: var(--ce-text-secondary);
    font-size: var(--text-base, 13px);
    cursor: help;
}

/* Amount Cell */
.ce-comp-td-amount {
    text-align: right;
}

.ce-comp-amount {
    font-weight: var(--font-semibold, 600);
    color: var(--ce-text-primary);
    font-size: var(--text-base, 13px);
    font-variant-numeric: tabular-nums;
}

/* Actions Cell */
.ce-comp-td-actions {
    text-align: center;
}

.ce-comp-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ce-comp-row:hover .ce-comp-actions {
    opacity: 1;
}

.ce-comp-action {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--ce-bg-elevated);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    color: var(--ce-text-muted);
}

.ce-comp-action:hover {
    background: var(--ce-primary);
    color: white;
}

.ce-comp-action--danger:hover {
    background: var(--ce-danger-text);
    color: white;
}

.ce-comp-action .material-symbols-outlined {
    font-size: 16px;
}

/* Bonus Group Visual Grouping */
.ce-bonus-group-item {
    background: rgba(var(--ce-primary-rgb, 59, 130, 246), 0.04);
    border-left: 3px solid var(--ce-primary, #3b82f6);
}

.ce-bonus-group-first {
    border-top: 1px dashed var(--ce-primary, #3b82f6);
}

.ce-bonus-group-last {
    border-bottom: 1px dashed var(--ce-primary, #3b82f6);
}

.ce-bonus-group-item td:first-child {
    padding-left: 0.5rem; /* Adjust for left border */
}

/* Hover state for grouped items */
.ce-bonus-group-item:hover {
    background: rgba(var(--ce-primary-rgb, 59, 130, 246), 0.08);
}

/* Selected state for grouped items */
.ce-bonus-group-item.ce-comp-row--selected {
    background: var(--ce-primary-light) !important;
    border-left-color: var(--ce-primary-dark, #2563eb);
}


/* ----------------------------------------
   14. SUMMARY SIDEBAR
   ---------------------------------------- */

.ce-summary-sidebar {
    background: var(--ce-bg-card);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    height: fit-content;
    position: sticky;
    top: 80px;
    box-shadow: var(--ce-shadow-sm);
}

.ce-summary-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--ce-bg-elevated);
    border-bottom: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md) var(--ce-radius-md) 0 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-text-muted);
}

.ce-summary-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

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

.ce-summary-label {
    font-size: 0.8rem;
    color: var(--ce-text-muted);
}

.ce-summary-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-summary-value.ce-warning { color: var(--ce-warning-text); }
.ce-summary-value.ce-success { color: var(--ce-success-text); }

.ce-summary-total .ce-summary-label { font-weight: 600; color: var(--ce-text-primary); }
.ce-summary-total .ce-summary-value { font-size: 1rem; color: var(--ce-primary); }

.ce-summary-divider {
    height: 1px;
    background: var(--ce-border);
    margin: 0.5rem 0;
}

.ce-summary-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-text-muted);
    margin-top: 0.25rem;
}

/* Quick Actions in Sidebar */
.ce-quick-actions {
    border-top: 1px solid var(--ce-border);
}

.ce-quick-actions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--ce-bg-elevated);
    border-bottom: 1px solid var(--ce-border);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-text-muted);
}

.ce-quick-actions-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ce-quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.8rem;
    color: var(--ce-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--ce-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.ce-quick-action-btn:hover {
    background: var(--ce-bg-elevated);
    color: var(--ce-text-primary);
}

.ce-quick-action-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--ce-text-muted);
}

.ce-quick-action-btn:hover .ce-quick-action-icon {
    color: var(--ce-primary);
}

/* Season Summary in Sidebar */
.ce-season-summary {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ce-border);
}

.ce-season-summary-total {
    font-family: var(--ce-font-mono);
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ce-accent-gold) 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ----------------------------------------
   15. FAB (FLOATING ACTION BUTTON)
   ---------------------------------------- */

.ce-fab-chat {
    position: fixed !important;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    border-radius: 50% !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.35) !important;
}


/* ----------------------------------------
   16. DATA GRID STYLING
   ---------------------------------------- */

.compare-data-grid .rz-datatable-thead th,
.simple-edit-grid .rz-datatable-thead th {
    background: var(--ce-bg-elevated) !important;
    color: var(--ce-text-muted) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--ce-border) !important;
    padding: 0.6rem 0.75rem !important;
}

.compare-data-grid .rz-datatable-data td,
.simple-edit-grid .rz-datatable-data td {
    padding: 0.75rem !important;
    border-bottom: 1px solid var(--ce-border-subtle) !important;
    font-size: 0.85rem !important;
    vertical-align: top !important;
}

/* Row Status Colors */
.compare-row-new-ai { background: var(--ce-accent-blue-dim) !important; }
.compare-row-db-only { background: var(--ce-accent-gold-dim) !important; }
.compare-row-fuzzy { background: rgba(254, 252, 232, 0.5) !important; }
.compare-row-diff { background: var(--ce-accent-orange-dim) !important; }
.compare-row-match { background: var(--ce-bg-card) !important; }

/* Table row states */
.data-table tr.has-diff { background: var(--ce-accent-orange-dim); }
.data-table tr.is-new { background: var(--ce-accent-violet-dim); }
.data-table tr.db-only { background: var(--ce-accent-rose-dim); }

/* Light mode grid styling - cleaner, less pastel */
[data-theme="light"] .compare-row-new-ai { background: rgba(59, 130, 246, 0.06) !important; border-left: 3px solid #3b82f6; }
[data-theme="light"] .compare-row-db-only { background: rgba(245, 158, 11, 0.06) !important; border-left: 3px solid #f59e0b; }
[data-theme="light"] .compare-row-diff { background: rgba(249, 115, 22, 0.06) !important; border-left: 3px solid #f97316; }
[data-theme="light"] .compare-row-fuzzy { background: rgba(250, 240, 200, 0.4) !important; }
[data-theme="light"] .compare-row-match { background: #ffffff !important; }

[data-theme="light"] .data-table tr.has-diff { background: rgba(249, 115, 22, 0.06); }
[data-theme="light"] .data-table tr.is-new { background: rgba(139, 92, 246, 0.06); }
[data-theme="light"] .data-table tr.db-only { background: rgba(244, 63, 94, 0.06); }

/* Light mode - cleaner alternating rows */
[data-theme="light"] .compare-data-grid .rz-datatable-data tr:nth-child(even) td {
    background: #fafbfc !important;
}

[data-theme="light"] .compare-data-grid .rz-datatable-data tr:hover td {
    background: #f0f4f8 !important;
}

/* Selection column styling */
.selection-column {
    padding: 0 !important;
    width: 40px !important;
}

.selection-column .rzi {
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}

.selection-column .rzi:hover {
    transform: scale(1.1);
}

/* Row hover and selection feedback */
.compare-data-grid .rz-datatable-data tr,
.simple-edit-grid .rz-datatable-data tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.compare-data-grid .rz-datatable-data tr:hover td,
.simple-edit-grid .rz-datatable-data tr:hover td {
    background-color: var(--ce-bg-hover) !important;
}

/* Selected row highlight */
.compare-data-grid .rz-datatable-data tr.rz-state-highlight td,
.simple-edit-grid .rz-datatable-data tr.rz-state-highlight td {
    background-color: var(--ce-primary-light) !important;
    border-color: var(--ce-primary-border) !important;
}


/* ----------------------------------------
   17. COMPARISON CELL STYLING
   ---------------------------------------- */

.compare-description-cell { display: flex; flex-direction: column; gap: 0.3rem; }

.compare-source {
    padding: 0.3rem 0.5rem;
    border-radius: var(--ce-radius-sm);
    font-size: var(--text-xs, 11px);
    transition: all 0.2s ease;
}

.db-source {
    background: var(--ce-db-dim);
    border-left: 2px solid var(--ce-db-color);
}

.ai-source {
    background: var(--ce-ai-dim);
    border-left: 2px solid var(--ce-ai-color);
}

.current-source {
    background: rgba(148, 163, 184, 0.15);
    border-left: 2px solid rgba(148, 163, 184, 0.55);
}

/* Selected/Deselected states for sources */
.compare-source--selected {
    opacity: 1;
    border-left-width: 3px;
}

.compare-source--deselected {
    opacity: 0.35;
    filter: grayscale(0.5);
}

.compare-source-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ce-text-muted);
    margin-bottom: 0.15rem;
}

.compare-source-label .material-symbols-outlined {
    font-size: 0.65rem;
}

.compare-source-text {
    color: var(--ce-text-primary);
    line-height: 1.35;
    font-size: var(--text-xs, 11px);
}
.compare-source-missing { color: var(--ce-text-muted); font-style: italic; }

.compare-amount-cell { display: flex; flex-direction: column; gap: 0.25rem; }

.compare-amount {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.compare-amount--selected {
    opacity: 1;
}

.compare-amount--deselected {
    opacity: 0.35;
    text-decoration: line-through;
}

.amount-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ce-text-muted);
    min-width: 22px;
}

.amount-value { font-weight: 600; font-size: var(--text-sm, 12px); }
.amount-value.strikethrough { text-decoration: line-through; opacity: 0.5; }

.amount-diff {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.amount-diff.positive { background: var(--ce-success-bg); color: var(--ce-success-text); }
.amount-diff.negative { background: var(--ce-danger-bg); color: var(--ce-danger-text); }


/* ----------------------------------------
   18. COMPARISON CELL (TABLE)
   ---------------------------------------- */

.comparison-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.comp-label {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

.comp-label.db { background: var(--ce-db-dim); color: var(--ce-db-color); }
.comp-label.ai { background: var(--ce-ai-dim); color: var(--ce-ai-color); }

.comp-value.match { color: var(--ce-accent-emerald); }
.comp-value.differ { color: var(--ce-accent-orange); }

.cell-primary { font-weight: 600; }
.cell-money { font-family: var(--ce-font-mono); font-weight: 600; }


/* ----------------------------------------
   19. CELL BADGES
   ---------------------------------------- */

.cell-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.cell-badge.base { background: var(--ce-accent-emerald-dim); color: var(--ce-accent-emerald); }
.cell-badge.bonus { background: var(--ce-accent-gold-dim); color: var(--ce-accent-gold); }
.cell-badge.other { background: var(--ce-accent-blue-dim); color: var(--ce-accent-blue); }


/* ----------------------------------------
   20. ACTION BUTTONS
   ---------------------------------------- */

.cell-actions {
    display: flex;
    gap: 4px;
}

.cell-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--ce-text-muted);
    cursor: pointer;
    border-radius: var(--ce-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.cell-action-btn:hover { background: var(--ce-bg-hover); color: var(--ce-text-primary); }
.cell-action-btn.approve { background: var(--ce-accent-emerald-dim); color: var(--ce-accent-emerald); }
.cell-action-btn.approve:hover { background: var(--ce-accent-emerald); color: white; }
.cell-action-btn--danger:hover { background: var(--ce-danger-text); color: white; }

/* Comparison Action Buttons */
.comp-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.comp-action-btn.use-db { background: var(--ce-db-dim); color: var(--ce-db-color); }
.comp-action-btn.use-ai { background: var(--ce-ai-dim); color: var(--ce-ai-color); }
.comp-action-btn:hover { transform: scale(1.1); }

/* Source Action Buttons (DB+/AI+ icons) */
.action-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ce-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.1rem;
}

.action-btn .rzi {
    font-size: 1.2rem;
}

.action-btn-ai {
    background: var(--ce-ai-dim);
    color: var(--ce-ai-color);
    border: 1px solid transparent;
}

.action-btn-ai:hover {
    background: var(--ce-ai-color);
    color: white;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.action-btn-db {
    background: var(--ce-db-dim);
    color: var(--ce-db-color);
    border: 1px solid transparent;
}

.action-btn-db:hover {
    background: var(--ce-db-color);
    color: white;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
}

.action-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: var(--ce-accent-emerald);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Light mode action buttons */
[data-theme="light"] .action-btn-ai {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .action-btn-db {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.2);
}

/* Refined Source Action Buttons */
.ce-source-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ce-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--ce-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
}

.ce-source-btn .material-symbols-outlined {
    font-size: 14px;
}

.ce-source-btn--ai {
    color: var(--ce-ai-color);
    border-color: rgba(14, 165, 233, 0.3);
    background: rgba(14, 165, 233, 0.1);
}

.ce-source-btn--ai:hover {
    background: var(--ce-ai-color);
    color: white;
    border-color: var(--ce-ai-color);
}

.ce-source-btn--db {
    color: var(--ce-db-color);
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.1);
}

.ce-source-btn--db:hover {
    background: var(--ce-db-color);
    color: white;
    border-color: var(--ce-db-color);
}

/* Selected state for source buttons */
.ce-source-btn--ai.selected {
    background: var(--ce-ai-color);
    color: white;
    border-color: var(--ce-ai-color);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
}

.ce-source-btn--db.selected {
    background: var(--ce-db-color);
    color: white;
    border-color: var(--ce-db-color);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.3);
}

/* Deselected state - fade out the non-selected button */
.ce-source-btn.deselected {
    opacity: 0.4;
    filter: grayscale(0.5);
}

.ce-source-actions {
    display: flex;
    gap: 6px;
}

.ce-status-ok {
    color: var(--ce-accent-emerald);
    font-size: 18px;
}

/* ----------------------------------------
   21. BUTTONS (SHARED)
   ---------------------------------------- */

.ce-btn {
    padding: 10px 16px;
    border-radius: var(--ce-radius-md);
    font-size: var(--text-base, 13px);
    font-weight: var(--font-semibold, 600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.ce-btn-sm { padding: 6px 12px; font-size: var(--text-base, 13px); }

.ce-btn-primary {
    background: linear-gradient(135deg, var(--ce-accent-gold) 0%, #d97706 100%);
    color: var(--ce-text-inverse);
}

.ce-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--ce-shadow-md); }

.ce-btn-secondary {
    background: var(--ce-bg-card);
    color: var(--ce-text-primary);
    border: 1px solid var(--ce-border-default);
}

.ce-btn-secondary:hover { background: var(--ce-bg-hover); }

.ce-btn-success { background: var(--ce-accent-emerald); color: white; }
.ce-btn-success:hover { background: #059669; }

.ce-btn-danger { background: var(--ce-accent-rose); color: white; }
.ce-btn-danger:hover { background: #e11d48; }

.ce-btn-ai {
    background: linear-gradient(135deg, var(--ce-accent-violet) 0%, #7c3aed 100%);
    color: white;
}

.ce-btn-ghost { background: transparent; color: var(--ce-text-secondary); }
.ce-btn-ghost:hover { background: var(--ce-bg-hover); color: var(--ce-text-primary); }


/* ----------------------------------------
   22. REVIEW PROGRESS (SIDEBAR)
   ---------------------------------------- */

.ce-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ce-progress-label { font-size: var(--text-base, 13px); color: var(--ce-text-secondary); }
.ce-progress-value { font-size: var(--text-base, 13px); font-weight: var(--font-semibold, 600); color: var(--ce-accent-gold); }

.ce-progress-bar {
    height: 8px;
    background: var(--ce-bg-elevated);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.ce-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ce-accent-gold) 0%, #fbbf24 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.ce-review-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ce-review-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--ce-bg-elevated);
    border-radius: var(--ce-radius-md);
}

.ce-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ce-stat-dot.match { background: var(--ce-accent-emerald); }
.ce-stat-dot.differ { background: var(--ce-accent-orange); }
.ce-stat-dot.new { background: var(--ce-accent-violet); }
.ce-stat-dot.missing { background: var(--ce-accent-rose); }


/* ----------------------------------------
   23. MODAL OVERLAY & CARDS
   ---------------------------------------- */

.ce-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 33, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.ce-modal-card {
    background: var(--ce-bg-card);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-xl);
    box-shadow: var(--ce-shadow-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.ce-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ce-border);
    background: var(--ce-bg-elevated);
    border-radius: var(--ce-radius-xl) var(--ce-radius-xl) 0 0;
}

.ce-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ce-text-primary);
}

.ce-modal-body {
    padding: 1.25rem;
}

.ce-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ce-border);
    background: var(--ce-bg-elevated);
    border-radius: 0 0 var(--ce-radius-xl) var(--ce-radius-xl);
}

/* Large Modal */
.ce-modal-card.ce-modal-lg {
    max-width: 800px;
}


/* ----------------------------------------
   24. FIELD COMPARISON (MODAL)
   ---------------------------------------- */

.ce-field-compare {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ce-compare-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.ce-compare-option:hover {
    border-color: var(--ce-border-strong);
    background: var(--ce-bg-elevated);
}

.ce-compare-option.selected {
    border-color: var(--ce-accent-gold);
    background: var(--ce-accent-gold-dim);
}

.ce-compare-option.db-option:hover,
.ce-compare-option.db-option.selected {
    border-color: var(--ce-db-color);
    background: var(--ce-db-dim);
}

.ce-compare-option.ai-option:hover,
.ce-compare-option.ai-option.selected {
    border-color: var(--ce-ai-color);
    background: var(--ce-ai-dim);
}

.ce-compare-radio {
    flex-shrink: 0;
    margin-top: 2px;
}

.ce-compare-content {
    flex: 1;
}

.ce-compare-source-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.ce-compare-source-tag.db { background: var(--ce-db-dim); color: var(--ce-db-color); }
.ce-compare-source-tag.ai { background: var(--ce-ai-dim); color: var(--ce-ai-color); }

.ce-compare-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-compare-value.money {
    font-family: var(--ce-font-mono);
}


/* ----------------------------------------
   25. POPOVERS
   ---------------------------------------- */

.ce-field-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--ce-bg-card);
    border: 1px solid var(--ce-border-default);
    border-radius: var(--ce-radius-lg);
    box-shadow: var(--ce-shadow-lg);
    z-index: 50;
    display: none;
}

.ce-comparison-field:focus-within .ce-field-popover,
.ce-comparison-field:hover .ce-field-popover {
    display: block;
}

.ce-popover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ce-border-subtle);
}

.ce-popover-row:last-child { border-bottom: none; }

.ce-popover-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.ce-popover-badge.db { background: var(--ce-db-dim); color: var(--ce-db-color); }
.ce-popover-badge.ai { background: var(--ce-ai-dim); color: var(--ce-ai-color); }


/* ----------------------------------------
   26. RESPONSIVE DESIGN
   ---------------------------------------- */

/* Tablet and smaller desktop */
@media (max-width: 1200px) {
    .ce-content-area {
        grid-template-columns: 1fr 280px;
        gap: 1rem;
    }
}

@media (max-width: 1024px) {
    .ce-content-area {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    .ce-summary-sidebar {
        position: relative;
        top: 0;
    }
    .ce-side-panel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .ce-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .ce-page {
        font-size: 13px;
    }
    .ce-header-bar {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .ce-header-actions {
        width: 100%;
        justify-content: space-between;
    }
    .ce-timeline-strip {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }
    .ce-season-card {
        min-width: 110px;
        padding: 0.6rem 0.75rem;
    }
    .ce-content-area {
        padding: 0.75rem 1rem 4rem 1rem;
    }
    .ce-form-grid {
        grid-template-columns: 1fr;
    }
    .ce-form-grid.four-col {
        grid-template-columns: repeat(2, 1fr);
    }
    .ce-side-panel {
        grid-template-columns: 1fr;
    }
    .ce-accordion .rz-accordion-header {
        padding: 0.65rem 0.75rem !important;
    }
    .ce-accordion .rz-accordion-header a {
        font-size: 0.85rem !important;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ce-header-bar {
        padding: 0.5rem 0.75rem;
    }
    .ce-header-main-text {
        font-size: 1rem;
    }
    .ce-header-sub-text {
        font-size: 0.7rem;
    }
    .ce-timeline-strip {
        padding: 0.5rem 0.75rem;
    }
    .ce-season-card {
        min-width: 100px;
        padding: 0.5rem 0.6rem;
    }
    .ce-season-name {
        font-size: 0.75rem;
    }
    .ce-season-amount {
        font-size: 0.7rem;
    }
    .ce-content-area {
        padding: 0.5rem 0.75rem 3rem 0.75rem;
    }
    .ce-form-grid.four-col {
        grid-template-columns: 1fr;
    }
    .ce-checkbox-row {
        gap: 1rem;
    }
    .ce-header-actions .rz-button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
    }
    /* Hide less important buttons on mobile */
    .ce-header-actions .rz-button.rz-variant-outlined {
        display: none;
    }
    .ce-header-actions .rz-button.rz-variant-outlined:last-of-type,
    .ce-header-actions .rz-button:not(.rz-variant-outlined) {
        display: inline-flex;
    }
}


/* ----------------------------------------
   27. UTILITY CLASSES
   ---------------------------------------- */

.ce-hidden { display: none !important; }
.ce-text-center { text-align: center; }
.ce-text-right { text-align: right; }
.ce-font-mono { font-family: var(--ce-font-mono); }
.ce-font-bold { font-weight: 700; }
.ce-mt-1 { margin-top: 0.5rem; }
.ce-mt-2 { margin-top: 1rem; }
.ce-mb-1 { margin-bottom: 0.5rem; }
.ce-mb-2 { margin-bottom: 1rem; }


/* ----------------------------------------
   28. SCROLLBAR STYLING
   ---------------------------------------- */

.ce-page ::-webkit-scrollbar { width: 8px; height: 8px; }
.ce-page ::-webkit-scrollbar-track { background: transparent; }
.ce-page ::-webkit-scrollbar-thumb { background: var(--ce-bg-hover); border-radius: 4px; }


/* ----------------------------------------
   29. SIDEBAR CARD (SHARED)
   ---------------------------------------- */

.ce-sidebar-card {
    background: var(--ce-bg-card);
    border-radius: var(--ce-radius-lg);
    padding: 1.25rem;
    border: 1px solid var(--ce-border);
    margin-bottom: 1rem;
    box-shadow: var(--ce-shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ce-sidebar-card:hover {
    box-shadow: var(--ce-shadow-md);
}

.ce-sidebar-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--ce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Light mode sidebar card enhancements */
[data-theme="light"] .ce-sidebar-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ce-sidebar-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    border-color: var(--ce-border-strong);
}


/* ----------------------------------------
   30. LEGACY COMPATIBILITY STYLES
   ---------------------------------------- */

/* These maintain compatibility with existing component markup */
.comp-editor-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 1rem;
}

.comp-editor-card {
    width: min(600px, 100%);
}

/* Draggable/resizable floating dialogs used throughout the contract editor */
.scms-floating-dialog {
    max-width: 95vw;
    max-height: 95vh;
    resize: both;
    overflow: auto;
    min-width: 360px;
    min-height: 240px;
}

.scms-floating-dialog-handle {
    cursor: move;
    user-select: none;
    touch-action: none;
}

/* Text color utilities for legacy code */
.text-primary { color: var(--ce-text-primary) !important; }
.text-secondary { color: var(--ce-text-secondary) !important; }
.text-muted { color: var(--ce-text-muted) !important; }

/* Warning banner for empty BonusGroups or other alerts */
.ce-warning-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--ce-warning-bg);
    border: 1px solid var(--ce-warning-text);
    border-color: color-mix(in srgb, var(--ce-warning-text) 35%, transparent);
    border-radius: 8px;
    color: var(--ce-warning-text);
    font-size:  0.8125rem;
    margin: 0 1rem;
}

.ce-warning-banner .rzi {
    color: var(--ce-warning-text);
    flex-shrink: 0;
}

.ce-warning-banner strong {
    color: var(--ce-text-primary);
}

/* ----------------------------------------
   BUYOUT COMPARISON AND PAYOUT SCHEDULES
   ---------------------------------------- */

/* Buyout Comparison Row */
.buyout-comparison-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--ce-bg-elevated), var(--ce-bg-secondary));
    border: 1px solid var(--ce-border-subtle);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.buyout-comparison-row .comparison-values {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.buyout-comparison-row .db-value {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 6px;
    color: #22d3ee;
    font-size: 0.8125rem;
    font-weight: 500;
}

.buyout-comparison-row .db-value .rzi {
    font-size: 0.875rem;
    color: #22d3ee;
}

.buyout-comparison-row .ai-value {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 6px;
    color: #38bdf8;
    font-size: 0.8125rem;
    font-weight: 500;
}

.buyout-comparison-row .ai-value .rzi {
    font-size: 0.875rem;
    color: #38bdf8;
}

.buyout-comparison-row .ai-notes {
    font-size: 0.75rem;
    color: var(--ce-text-tertiary);
    font-style: italic;
}

.buyout-comparison-row .comparison-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Form field with diff indicator */
.field-has-diff {
    border-color: rgba(251, 191, 36, 0.4) !important;
}

.field-has-diff::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #f59e0b, #fbbf24);
    border-radius: 4px 0 0 4px;
}

/* Payout Schedule Grids */
.payout-schedule-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    color: var(--ce-text-secondary);
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.payout-schedule-info .rzi {
    color: #60a5fa;
    font-size: 1rem;
}

.payout-schedule-grid {
    background: var(--ce-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
}

.payout-schedule-grid .rz-data-row td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--ce-border-subtle);
}

.payout-schedule-grid .payout-amount {
    font-weight: 600;
    color: var(--ce-accent-emerald);
    font-family: var(--ce-font-mono);
}

.payout-schedule-grid .current-season {
    font-weight: 600;
    color: var(--ce-accent-gold);
    position: relative;
    padding-left: 0.75rem;
}

.payout-schedule-grid .current-season::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--ce-accent-gold);
    border-radius: 50%;
}

/* Light theme adjustments */
[data-theme="light"] .buyout-comparison-row {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .buyout-comparison-row .db-value {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.25);
    color: #0891b2;
}

[data-theme="light"] .buyout-comparison-row .db-value .rzi {
    color: #0891b2;
}

[data-theme="light"] .buyout-comparison-row .ai-value {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.25);
    color: #0284c7;
}

[data-theme="light"] .buyout-comparison-row .ai-value .rzi {
    color: #0284c7;
}

[data-theme="light"] .payout-schedule-info {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .payout-schedule-grid .payout-amount {
    color: #059669;
}

[data-theme="light"] .payout-schedule-grid .current-season {
    color: #d97706;
}

[data-theme="light"] .payout-schedule-grid .current-season::before {
    background: #d97706;
}

/* ============================================
   Notes/Documents Preview Styles
   ============================================ */

/* AI Analysis Summary Note Preview */
.ai-note-preview {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.ai-note-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-note-header .material-symbols-outlined {
    color: var(--ce-accent-sky);
    font-size: 1.25rem;
}

.ai-note-header h5 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ce-accent-sky);
}

.ai-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-accent-sky);
    margin-left: auto;
}

.ai-note-content {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ce-text-primary);
    white-space: pre-wrap;
    font-family: inherit;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.ai-note-content::-webkit-scrollbar {
    width: 4px;
}

.ai-note-content::-webkit-scrollbar-track {
    background: transparent;
}

.ai-note-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Notes Preview Grid */
.notes-preview-grid,
.documents-preview-grid {
    margin-top: 1rem;
}

.notes-preview-grid h5,
.documents-preview-grid h5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ce-text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.notes-preview-grid h5 .material-symbols-outlined,
.documents-preview-grid h5 .material-symbols-outlined {
    font-size: 1rem;
    color: var(--ce-accent-blue);
}

.notes-preview-grid .rz-data-grid,
.documents-preview-grid .rz-data-grid {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.375rem;
    overflow: hidden;
}

.notes-preview-grid .rz-data-grid .rz-datatable-thead > tr > th,
.documents-preview-grid .rz-data-grid .rz-datatable-thead > tr > th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ce-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notes-preview-grid .rz-data-grid .rz-datatable-tbody > tr > td,
.documents-preview-grid .rz-data-grid .rz-datatable-tbody > tr > td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.notes-preview-grid .rz-data-grid .rz-datatable-tbody > tr:hover,
.documents-preview-grid .rz-data-grid .rz-datatable-tbody > tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Note text truncation */
.note-summary-cell {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AI badge in grid */
.ai-badge-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.3);
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ce-accent-sky);
}

/* Document type badge */
.doc-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ce-accent-purple);
}

/* Active status indicator */
.active-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.active-status.active {
    color: var(--ce-accent-emerald);
}

.active-status.inactive {
    color: var(--ce-text-muted);
}

/* Empty state for preview grids */
.preview-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--ce-text-muted);
}

.preview-empty-state .material-symbols-outlined {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.preview-empty-state p {
    font-size: 0.8rem;
    margin: 0;
}

/* Light theme adjustments for preview */
[data-theme="light"] .ai-note-preview {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(59, 130, 246, 0.05));
    border-color: rgba(14, 165, 233, 0.25);
}

[data-theme="light"] .ai-note-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ai-note-header h5,
[data-theme="light"] .ai-note-header .material-symbols-outlined {
    color: #0284c7;
}

[data-theme="light"] .ai-note-badge {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.3);
    color: #0284c7;
}

[data-theme="light"] .ai-note-content {
    color: #334155;
}

[data-theme="light"] .ai-note-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .notes-preview-grid .rz-data-grid,
[data-theme="light"] .documents-preview-grid .rz-data-grid {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .notes-preview-grid .rz-data-grid .rz-datatable-thead > tr > th,
[data-theme="light"] .documents-preview-grid .rz-data-grid .rz-datatable-thead > tr > th {
    background: rgba(0, 0, 0, 0.03);
    color: #64748b;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .notes-preview-grid .rz-data-grid .rz-datatable-tbody > tr > td,
[data-theme="light"] .documents-preview-grid .rz-data-grid .rz-datatable-tbody > tr > td {
    border-bottom-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .notes-preview-grid .rz-data-grid .rz-datatable-tbody > tr:hover,
[data-theme="light"] .documents-preview-grid .rz-data-grid .rz-datatable-tbody > tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ai-badge-cell {
    background: rgba(14, 165, 233, 0.1);
    border-color: rgba(14, 165, 233, 0.25);
    color: #0284c7;
}

[data-theme="light"] .doc-type-badge {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.25);
    color: #7c3aed;
}

[data-theme="light"] .active-status.active {
    color: #059669;
}

[data-theme="light"] .active-status.inactive {
    color: #94a3b8;
}

[data-theme="light"] .preview-empty-state {
    color: #94a3b8;
}

/* ============================================
   Private School Badge Styles
   ============================================ */

.private-school-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ef4444;
}

.private-school-badge .material-symbols-outlined {
    font-size: 0.75rem;
}

[data-theme="light"] .private-school-badge {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #dc2626;
}


/* ============================================
   ENHANCED COMPENSATION COMPARISON UI
   Card-based selection, grouped sections,
   action items tracker, and smart filtering
   ============================================ */

/* ----------------------------------------
   Sticky Action Items Header
   ---------------------------------------- */

.ce-comp-action-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--ce-bg-elevated);
    border-bottom: 1px solid var(--ce-border);
    gap: 1rem;
}

.ce-action-items-tracker {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ce-action-item-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ce-text-secondary);
}

.ce-action-item-stat .material-symbols-outlined {
    font-size: 1rem;
}

.ce-action-item-stat--pending {
    color: var(--ce-warning-text);
}

.ce-action-item-stat--new-items {
    color: var(--ce-info-text, #0dcaf0);
}

.ce-action-item-stat--conflicts {
    color: var(--ce-danger-text);
}

.ce-action-item-stat--resolved {
    color: var(--ce-success-text);
}

.ce-action-item-count {
    font-weight: 700;
    font-size: 0.875rem;
}

/* Smart Filter Toggles */
.ce-filter-toggles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ce-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-full);
    background: transparent;
    color: var(--ce-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ce-filter-btn:hover {
    background: var(--ce-bg-hover);
    color: var(--ce-text-primary);
    border-color: var(--ce-border-strong);
}

.ce-filter-btn.active {
    background: var(--ce-primary);
    color: white;
    border-color: var(--ce-primary);
}

.ce-filter-btn .material-symbols-outlined {
    font-size: 0.875rem;
}

/* ----------------------------------------
   Grouped Compensation Sections
   ---------------------------------------- */

.ce-comp-section {
    margin-bottom: 1.5rem;
}

.ce-comp-section:last-child {
    margin-bottom: 0;
}

.ce-comp-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, var(--ce-bg-elevated) 0%, var(--ce-bg-secondary) 100%);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md) var(--ce-radius-md) 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ce-comp-section-header:hover {
    background: var(--ce-bg-hover);
}

.ce-comp-section-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ce-radius-sm);
    font-size: 1.125rem;
}

.ce-comp-section-icon--guaranteed {
    background: var(--ce-accent-emerald-dim);
    color: var(--ce-accent-emerald);
}

.ce-comp-section-icon--performance {
    background: var(--ce-accent-gold-dim);
    color: var(--ce-accent-gold);
}

.ce-comp-section-title {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-comp-section-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ce-comp-section-count {
    font-size: 0.75rem;
    color: var(--ce-text-muted);
    padding: 0.25rem 0.625rem;
    background: var(--ce-bg-card);
    border-radius: var(--ce-radius-full);
}

.ce-comp-section-total {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ce-primary);
    font-variant-numeric: tabular-nums;
}

.ce-comp-section-chevron {
    color: var(--ce-text-muted);
    transition: transform 0.2s ease;
}

.ce-comp-section.collapsed .ce-comp-section-chevron {
    transform: rotate(-90deg);
}

.ce-comp-section-body {
    border: 1px solid var(--ce-border);
    border-top: none;
    border-radius: 0 0 var(--ce-radius-md) var(--ce-radius-md);
    overflow: hidden;
}

.ce-comp-section.collapsed .ce-comp-section-body {
    display: none;
}

/* ----------------------------------------
   Card-Based Source Selection UI
   ---------------------------------------- */

.ce-source-card-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--ce-bg-secondary);
    border-top: 1px solid var(--ce-border-subtle);
}

.ce-source-card {
    position: relative;
    padding: 1rem;
    border: 2px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    background: var(--ce-bg-card);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ce-source-card:hover {
    border-color: var(--ce-border-strong);
    box-shadow: var(--ce-shadow-md);
    transform: translateY(-2px);
}

.ce-source-card--db {
    border-color: rgba(6, 182, 212, 0.3);
}

.ce-source-card--db:hover,
.ce-source-card--db.selected {
    border-color: var(--ce-db-color);
    background: var(--ce-db-dim);
}

.ce-source-card--ai {
    border-color: rgba(14, 165, 233, 0.3);
}

.ce-source-card--ai:hover,
.ce-source-card--ai.selected {
    border-color: var(--ce-ai-color);
    background: var(--ce-ai-dim);
}

.ce-source-card.selected {
    box-shadow: 0 0 0 3px rgba(var(--card-accent-rgb), 0.2);
}

.ce-source-card--db.selected {
    --card-accent-rgb: 6, 182, 212;
}

.ce-source-card--ai.selected {
    --card-accent-rgb: 14, 165, 233;
}

.ce-source-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.ce-source-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--ce-radius-sm);
}

.ce-source-card--db .ce-source-card-badge {
    background: rgba(6, 182, 212, 0.2);
    color: var(--ce-db-color);
}

.ce-source-card--ai .ce-source-card-badge {
    background: rgba(14, 165, 233, 0.2);
    color: var(--ce-ai-color);
}

.ce-source-card-badge .material-symbols-outlined {
    font-size: 0.875rem;
}

.ce-source-card-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ce-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ce-source-card.selected .ce-source-card-check {
    background: var(--ce-accent-emerald);
    border-color: var(--ce-accent-emerald);
    color: white;
}

.ce-source-card.selected .ce-source-card-check .material-symbols-outlined {
    font-size: 0.875rem;
}

.ce-source-card-amount {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ce-text-primary);
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.ce-source-card-category {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ce-text-secondary);
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.ce-source-card-category-sep {
    color: var(--ce-text-muted);
    font-weight: 400;
}

.ce-source-card-desc {
    font-size: 0.8125rem;
    color: var(--ce-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------
   Bonus Group Aggregation Display
   ---------------------------------------- */

.ce-bonus-group-card {
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    background: var(--ce-bg-card);
    margin: 0.5rem;
    overflow: hidden;
}

.ce-bonus-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%);
    border-bottom: 1px solid var(--ce-border-subtle);
    cursor: pointer;
}

.ce-bonus-group-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ce-accent-violet-dim);
    color: var(--ce-accent-violet);
    border-radius: var(--ce-radius-sm);
    font-size: 0.9375rem;
}

.ce-bonus-group-title {
    flex: 1;
}

.ce-bonus-group-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-bonus-group-structure {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.ce-bonus-group-structure--mutually-exclusive {
    background: var(--ce-accent-orange-dim);
    color: var(--ce-accent-orange);
}

.ce-bonus-group-structure--simple {
    background: var(--ce-accent-emerald-dim);
    color: var(--ce-accent-emerald);
}

.ce-bonus-group-max {
    text-align: right;
}

.ce-bonus-group-max-label {
    font-size: 0.6875rem;
    color: var(--ce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ce-bonus-group-max-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ce-accent-violet);
    font-variant-numeric: tabular-nums;
}

.ce-bonus-group-items {
    padding: 0.5rem;
}

.ce-bonus-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--ce-radius-sm);
    transition: background-color 0.15s ease;
}

.ce-bonus-group-item:hover {
    background: var(--ce-bg-hover);
}

.ce-bonus-group-item-bullet {
    width: 6px;
    height: 6px;
    background: var(--ce-accent-violet);
    border-radius: 50%;
    flex-shrink: 0;
}

.ce-bonus-group-item-desc {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--ce-text-secondary);
}

.ce-bonus-group-item-amount {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ce-text-primary);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------
   Conflict Detection Badges
   ---------------------------------------- */

.ce-conflict-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--ce-radius-sm);
}

.ce-conflict-badge--match {
    background: var(--ce-accent-emerald-dim);
    color: var(--ce-accent-emerald);
}

.ce-conflict-badge--differs {
    background: var(--ce-accent-orange-dim);
    color: var(--ce-accent-orange);
}

.ce-conflict-badge--ai-new {
    background: var(--ce-ai-dim);
    color: var(--ce-ai-color);
}

.ce-conflict-badge--db-only {
    background: var(--ce-db-dim);
    color: var(--ce-db-color);
}

.ce-conflict-badge--structure-mismatch {
    background: var(--ce-accent-rose-dim);
    color: var(--ce-accent-rose);
}

.ce-conflict-badge--text-mismatch {
    background: var(--ce-accent-gold-dim);
    color: var(--ce-accent-gold);
}

.ce-conflict-badge .material-symbols-outlined {
    font-size: 0.75rem;
}

/* ----------------------------------------
   Description Diff Drawer
   ---------------------------------------- */

.ce-desc-diff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ce-text-muted);
    background: transparent;
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ce-desc-diff-toggle:hover {
    background: var(--ce-bg-hover);
    color: var(--ce-text-primary);
    border-color: var(--ce-border-strong);
}

.ce-desc-diff-toggle .material-symbols-outlined {
    font-size: 0.875rem;
}

.ce-desc-diff-drawer {
    padding: 1rem;
    background: var(--ce-bg-secondary);
    border-top: 1px solid var(--ce-border-subtle);
}

.ce-desc-diff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ce-desc-diff-panel {
    padding: 0.875rem;
    border-radius: var(--ce-radius-sm);
    background: var(--ce-bg-card);
    border: 1px solid var(--ce-border-subtle);
}

.ce-desc-diff-panel--db {
    border-left: 3px solid var(--ce-db-color);
}

.ce-desc-diff-panel--ai {
    border-left: 3px solid var(--ce-ai-color);
}

.ce-desc-diff-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ce-text-muted);
    margin-bottom: 0.5rem;
}

.ce-desc-diff-panel--db .ce-desc-diff-label {
    color: var(--ce-db-color);
}

.ce-desc-diff-panel--ai .ce-desc-diff-label {
    color: var(--ce-ai-color);
}

.ce-desc-diff-text {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ce-text-primary);
    white-space: pre-wrap;
}

/* Highlighted text differences */
.ce-diff-add {
    background: rgba(16, 185, 129, 0.2);
    color: var(--ce-accent-emerald);
    padding: 0 2px;
    border-radius: 2px;
}

.ce-diff-remove {
    background: rgba(244, 63, 94, 0.2);
    color: var(--ce-accent-rose);
    padding: 0 2px;
    border-radius: 2px;
    text-decoration: line-through;
}

/* ----------------------------------------
   Compensation Item Row (Enhanced)
   ---------------------------------------- */

.ce-comp-item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--ce-border-subtle);
    transition: background-color 0.15s ease;
}

.ce-comp-item:last-child {
    border-bottom: none;
}

.ce-comp-item:hover {
    background: var(--ce-bg-hover);
}

.ce-comp-item.ce-comp-item--selected {
    background: var(--ce-primary-light);
}

.ce-comp-item-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    min-width: 0;
}

.ce-comp-item-select {
    width: 20px;
    height: 20px;
    border: 2px solid var(--ce-text-muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ce-comp-item-select:hover {
    border-color: var(--ce-primary);
}

.ce-comp-item.ce-comp-item--selected .ce-comp-item-select {
    border-color: var(--ce-primary);
    background: var(--ce-primary);
}

.ce-comp-item.ce-comp-item--selected .ce-comp-item-select::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.ce-comp-item-info {
    flex: 1;
    min-width: 0;
}

.ce-comp-item-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.ce-comp-item-category-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ce-text-primary);
}

.ce-comp-item-category-type {
    font-size: 0.75rem;
    color: var(--ce-text-muted);
}

.ce-comp-item-desc {
    font-size: 0.8125rem;
    color: var(--ce-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-comp-item-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ce-text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ce-comp-item-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    border-left: 1px solid var(--ce-border-subtle);
}

/* ----------------------------------------
   Bonus Group Item Styles
   ---------------------------------------- */

.ce-comp-item--bonus-group {
    border-left: 3px solid var(--ce-accent-gold);
}

.ce-comp-item--bonus-group .ce-comp-item-main {
    flex-wrap: wrap;
}

.ce-bonus-structure-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ce-radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ce-bonus-structure-badge--exclusive {
    background: var(--ce-accent-orange-dim);
    color: var(--ce-accent-orange);
}

.ce-bonus-structure-badge--stackable {
    background: var(--ce-accent-emerald-dim);
    color: var(--ce-accent-emerald);
}

.ce-comp-item-tiers {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--ce-bg-secondary);
    border-radius: var(--ce-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ce-tier-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.ce-tier-amount {
    font-weight: 600;
    color: var(--ce-text-primary);
    min-width: 5rem;
    font-variant-numeric: tabular-nums;
}

.ce-tier-desc {
    color: var(--ce-text-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce-amount-label {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ce-text-muted);
    margin-bottom: 0.125rem;
}

/* ----------------------------------------
   Light Mode Adjustments
   ---------------------------------------- */

[data-theme="light"] .ce-comp-action-header {
    background: #f8f9fb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ce-comp-section-header {
    background: linear-gradient(135deg, #f8f9fb 0%, #f0f3f7 100%);
}

[data-theme="light"] .ce-source-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ce-source-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ce-bonus-group-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0.02) 100%);
}

[data-theme="light"] .ce-desc-diff-drawer {
    background: #f8f9fb;
}