/* 
 * COMPLETE Converted Theme System from Performers Network
 * Theme Name: CSS_Theme_2025-09-02_1009
 * Theme ID: 55
 * Generated: 2025-09-02T17:13:17.873Z
 * Source: Platform Theme Manager
 * Export Type: Ready-to-paste CSS
 * 
 * COPY-PASTE INSTRUCTIONS:
 * 1. Copy this ENTIRE file content
 * 2. Paste it into the <style> section of each HTML page
 * 3. Your existing toggle system will work unchanged
 * 4. No modifications needed to your JavaScript toggle logic
 * 
 * HOW IT WORKS:
 * - Your toggleMode() function adds/removes .light-mode or .dark-mode class
 * - All variables automatically switch based on the active class
 * - :root provides fallback values
 */

/* ===== BASE/ROOT VARIABLES (FALLBACKS) ===== */
:root {
    /* Typography Foundation */
    --font-base-size: 1rem;
    --font-scale-ratio: 1.25;
    --font-base-line-height: 1.6;
    
    /* Typography Calculated Sizes */
    --h1-size: calc(var(--font-base-size) * var(--font-scale-ratio) * var(--font-scale-ratio) * var(--font-scale-ratio));
    --h2-size: calc(var(--font-base-size) * var(--font-scale-ratio) * var(--font-scale-ratio));
    --h3-size: calc(var(--font-base-size) * var(--font-scale-ratio));
    --h4-size: var(--font-base-size);
    --h5-size: calc(var(--font-base-size) / var(--font-scale-ratio));
    --h6-size: calc(var(--font-base-size) / var(--font-scale-ratio) / var(--font-scale-ratio));
    --text-lg: calc(var(--font-base-size) * 1.125);
    --text-base: var(--font-base-size);
    --text-sm: calc(var(--font-base-size) * 0.875);
    --text-xs: calc(var(--font-base-size) * 0.75);
    --p1-size: calc(var(--font-base-size) * 1.0);
    --p2-size: calc(var(--font-base-size) * 1.25);
    --p3-size: calc(var(--font-base-size) * 1.6);
    --p4-size: calc(var(--font-base-size) * 2.0);
    --p5-size: calc(var(--font-base-size) * 0.875);
    --p6-size: calc(var(--font-base-size) * 0.75);
    --p7-size: calc(var(--font-base-size) * 0.625);
    --p8-size: calc(var(--font-base-size) * 0.5);
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Font Families */
    --font-primary: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: Georgia, "Times New Roman", serif;
    --font-mono: JetBrains Mono, Consolas, monospace;
    
    /* Platform ID Typography */
    --id-font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
    --id-weight: bold;
    --id-letter-spacing: 1px;
    --role-id-size-small: 1.0rem;
    --role-id-size-medium: 1.2rem;
    --role-id-size-large: 1.5rem;
    --event-id-size-small: 1.0rem;
    --event-id-size-medium: 1.2rem;
    --event-id-size-large: 1.5rem;
    
    /* Spacing System */
    --gap-none: 0px;
    --gap-xs: 2px;
    --gap-sm: 4px;
    --gap-md: 8px;
    --gap-lg: 10px;
    --gap-xl: 14px;
    --gap-2xl: 20px;
    --gap-3xl: 24px;
    --margin-none: 0px;
    --margin-xs: 1px;
    --margin-sm: 2px;
    --margin-md: 4px;
    --margin-lg: 8px;
    --margin-xl: 10px;
    --margin-2xl: 16px;
    --margin-3xl: 20px;
    --margin-4xl: 32px;
    --padding-none: 0px;
    --padding-xs: 1px;
    --padding-sm: 2px;
    --padding-md: 4px;
    --padding-lg: 6px;
    --padding-xl: 8px;
    --padding-2xl: 10px;
    --padding-3xl: 16px;
    --padding-4xl: 24px;
    --padding-5xl: 32px;
    --padding-6xl: 40px;
    --container-padding-none: 0px;
    --container-padding-sm: 4px;
    --container-padding-md: 10px;
    --container-padding-lg: 20px;
    --panel-padding-none: 0rem;
    --panel-padding-sm: 1rem;
    --panel-padding-md: 1.25rem;
    --panel-padding-lg: 1.5rem;
    
    /* Border Radius */
    --radius-none: 0px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-full: 50%;
    
    /* Shadows */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-xl: 0 8px 25px rgba(0,0,0,0.15);
    --shadow-2xl: 0 20px 40px rgba(0,0,0,0.2);
    
    /* Transitions */
    --transition-none: none;
    --transition-fast: all 0.15s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* Additional Layout Variables */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --header-height: 100px;
    --footer-height: 22px;
    --left-panel-width: 390px;
    
    /* Scrollbar Control Variables */
    --scrollbar-width: 12px;
    --scrollbar-height: 12px;
    --scrollbar-radius: 6px;
    --scrollbar-track-radius: 6px;
    --scrollbar-thumb-radius: 6px;
    --scrollbar-transition-speed: 0.2s;
    --scrollbar-thumb-min-size: 20px;
    --scrollbar-track-margin: 0px;
    --scrollbar-button-width: 0px;
    --scrollbar-button-height: 0px;
    --scrollbar-arrow-size: 8px;
    --scrollbar-opacity: 1;
    --scrollbar-opacity-hover: 1;
    --scrollbar-fade-duration: 0.3s;

    /* Form Colors */
    --bg-form: #ffffff;
    --text-form-label: #495057;
    --border-form: #dee2e6;
    --text-form-control: #495057;
    --form-placeholder: #6c757d;

    /* List Colors */
    --bg-list-item: #ffffff;
    --hover-list: #f5f5f5;
    --bg-list-header: #f3f3f3;
    --bg-list-selected: #e6ffed;

    /* ID List Interaction Colors - NEW VARIABLES TO ADD TO THEME GENERATOR */
    --role-id-hover-bg: #bbdefb;      /* Medium blue hover for role lists (darker than selected) */
    --role-id-selected-bg: #e3f2fd;  /* Light blue selection for role lists */
    --event-id-hover-bg: #9ffda2;    /* Medium green hover for event/venue lists (darker than selected) */
    --event-id-selected-bg: #7fee7f; /* Light green selection for event/venue lists */

    /* Text Colors */
    --text-primary: #212529;
    --text-monospace: #212529;
    --text-secondary: #6c757d;
    --text-overlay-dark: #ffffff;
    --text-overlay-light: #333333;

    /* Alert Colors */
    --alert-info: #d1ecf1;
    --alert-error: #f8d7da;
    --alert-success: #d4edda;
    --alert-warning: #fff3cd;

    /* Input Colors */
    --bg-input: #ffffff;
    --focus-input: #007bff;
    --border-input: #dee2e6;

    /* Modal Colors */
    --modal-bg: #ffffff;
    --bg-modal-header: #f8f9fa;
    --bg-modal-overlay: rgba(0,0,0,0.5);

    /* Platform IDs */
    --role-id-color: #4285f4;
    --event-id-color: #34a853;

    /* Table Colors */
    --bg-table: #ffffff;
    --hover-table: #d1d3d4;
    --border-table: #dee2e6;
    --table-header: #e9ecef;
    --table-striped: #f8f9fa;

    /* Border Colors */
    --border-light: #eee;
    --border-primary: #dee2e6;
    --border-selected: #00aa00;

    /* Button Colors */
    --button-gray: #9e9e9e;
    --button-danger: #dc3545;
    --button-primary: #007bff;
    --button-success: #28a745;
    --button-warning: #ffc107;
    --hover-primary: #0056b3;
    --hover-success: #218838;

    /* Rating Colors */
    --rating-novice: #4caf50;
    --rating-default: #dddddd;
    --rating-mastery: #a48f33;
    --rating-excellent: #ffc107;
    --rating-proficient: #2862a4;
    --text-rating-light: #333333;
    --rating-developing: #2e7d32;

    /* Shadow Colors */
    --shadow-heavy: rgba(0,0,0,0.25);
    --shadow-light: rgba(0,0,0,0.1);
    --shadow-medium: rgba(0,0,0,0.15);

    /* Status Colors */
    --status-info: #17a2b8;
    --status-error: #ff0000;
    --status-success: #4caf50;
    --status-warning: #ffc107;

    /* Highlight Colors */
    --bg-highlight: #fff3cd;
    --text-highlight: #856404;
    --highlight-border: #ffeaa7;

    /* Specialized Text */
    --text-subtle: #555555;
    --text-privacy-label: #cccccc;
    --text-section-title: #444444;
    --text-member-response: #ffffff;

    /* Background Colors */
    --bg-card: #f8f9fa;
    --bg-primary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-secondary: #f5f5f5;
    --bg-module1: #ffffff;
    --bg-transparent: transparent;
    --bg-module2: #ffffff;

    /* Navigation Colors */
    --nav-link: #007bff;
    --nav-hover: #0069d9;
    --nav-active: #0056b3;
    --nav-disabled: #6c757d;

    /* Button State Colors */
    --inactive-button: #6c757d;
    --hover-info: #138496;
    --hover-save: #4caf50;
    --hover-clear: #dc3545;
    --active-save: #45a049;
    --button-clear-active: #c82333;
    --button-danger-hover: #c82333;
    --button-enabled-save: #28a745;
    --button-save-default: #6c757d;
    --button-clear-default: #6c757d;
    --button-enabled-clear: #dc3545;
    --button-warning-hover: #e0a800;
    --button-inactive-hover: #5a6268;

    /* Specialized Borders */
    --border-accent: #008cba;
    --border-section: #f0f0f0;
    --border-dark-input: #555555;

    /* Specialized Backgrounds */
    --bg-role-id: #f8f8f8;
    --bg-comments: #f9f9f9;
    --bg-role-info: #e8f4f8;
    --bg-input-dark: #2a2a2a;
    --bg-member-response: #1a1a1a;

    /* Scrollbar Colors */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #b7b7b7;
    --scrollbar-thumb-hover: #a4a4a4;
    --scrollbar-thumb-active: #999999;
    --scrollbar-button: transparent;
    --scrollbar-button-hover: transparent;
    --scrollbar-button-active: transparent;
    --scrollbar-track-border: transparent;
    --scrollbar-thumb-border: transparent;
    --scrollbar-button-border: transparent;
    --scrollbar-track-shadow: none;
    --scrollbar-thumb-shadow: none;
    --scrollbar-corner: #f1f1f1;

/* Master Page: Theme Colors - Comprehensive Controls */
    --primary-bg: #f3f3f3;;
    --secondary-bg: #ffffff;
    --tertiary-bg: #ffffff;
    --module-bg: transparent;
    --header-bg: #f3f3f3;
    --footer-bg: ##fafafa;
    --left-cell-bg: #fafafa;
    /* Unique iframe border colors - back to gray for light mode */
    --role-editor-frame-border: #dee2e6;
    --assets-frame-border: #dee2e6;
    --songs-frame-border: #dee2e6;
    --tickets-frame-border: #dee2e6;
    --panel-shadow: var(--shadow-sm);
    --module-shadow: var(--shadow-md);
    --button-shadow: var(--shadow-sm);
    --footer-button-bg: var(--bg-secondary);
    --footer-button-hover-bg: var(--hover-list);
    --footer-button-text: var(--text-primary);
    --footer-count-bg: rgba(51, 51, 51, 0.75);
    --footer-count-text: #ffffff;
    --footer-new-count-bg: var(--status-error);
    --footer-new-count-text: #ffffff;
    --text-color: var(--text-primary);
    --module-toggle-bg: transparent;
    --module-toggle-border: var(--border-primary);
    --module-toggle-hover-bg: var(--secondary-bg);
    --module-toggle-hover-border: var(--border-primary);
    --module-toggle-checked-bg: #495057;
    --module-toggle-checked-border: #495057;
    --module-toggle-checked-text: #ffffff;
    --module-toggle-checked-hover-bg: #343a40;
    --module-toggle-checked-hover-border: #343a40;
    --module-toggle-text: var(--text-primary);


}

/* ===== LIGHT MODE THEME ===== */
.light-mode {
    /* Form Colors */
    --bg-form: #ffffff;
    --text-form-label: #495057;
    --border-form: #dee2e6;
    --text-form-control: #495057;
    --form-placeholder: #6c757d;
    /* List Colors */
    --bg-list-item: #ffffff;
    --hover-list: #f5f5f5;
    --bg-list-header: #f3f3f3;
    --bg-list-selected: #e6ffed;
    /* ID List Interaction Colors - NEW VARIABLES TO ADD TO THEME GENERATOR */
    --role-id-hover-bg: #bbdefb;
    --role-id-selected-bg: #e3f2fd;
    --event-id-hover-bg: #a8f6ab;    /* Medium green hover for event/venue lists (darker than selected) */
    --event-id-selected-bg: #d0ffd0; /* Light green selection for event/venue lists */
    /* Text Colors */
    --text-primary: #212529;
    --text-monospace: #212529;
    --text-secondary: #6c757d;
    --text-overlay-dark: #ffffff;
    --text-overlay-light: #333333;
    /* Alert Colors */
    --alert-info: #d1ecf1;
    --alert-error: #f8d7da;
    --alert-success: #d4edda;
    --alert-warning: #fff3cd;
    /* Input Colors */
    --bg-input: #ffffff;
    --focus-input: #007bff;
    --border-input: #dee2e6;
    /* Modal Colors */
    --modal-bg: #ffffff;
    --bg-modal-header: #f8f9fa;
    --bg-modal-overlay: rgba(0,0,0,0.5);
    /* Platform IDs */
    --role-id-color: #4285f4;
    --event-id-color: #34a853;
    /* Table Colors */
    --bg-table: #ffffff;
    --hover-table: #d1d3d4;
    --border-table: #dee2e6;
    --table-header: #e9ecef;
    --table-striped: #f8f9fa;
    /* Border Colors */
    --border-light: #eee;
    --border-primary: #dee2e6;
    --border-selected: #00aa00;
    /* Button Colors */
    --button-gray: #9e9e9e;
    --button-danger: #dc3545;
    --button-primary: #007bff;
    --button-success: #28a745;
    --button-warning: #ffc107;
    --hover-primary: #0056b3;
    --hover-success: #218838;
    /* Rating Colors */
    --rating-novice: #4caf50;
    --rating-default: #dddddd;
    --rating-mastery: #a48f33;
    --rating-excellent: #ffc107;
    --rating-proficient: #2862a4;
    --text-rating-light: #333333;
    --rating-developing: #2e7d32;
    /* Shadow Colors */
    --shadow-heavy: rgba(0,0,0,0.25);
    --shadow-light: rgba(0,0,0,0.1);
    --shadow-medium: rgba(0,0,0,0.15);
    /* Status Colors */
    --status-info: #17a2b8;
    --status-error: #ff0000;
    --status-success: #4caf50;
    --status-warning: #ffc107;
    /* Highlight Colors */
    --bg-highlight: #fff3cd;
    --text-highlight: #856404;
    --highlight-border: #ffeaa7;
    /* Specialized Text */
    --text-subtle: #555555;
    --text-privacy-label: #cccccc;
    --text-section-title: #444444;
    --text-member-response: #ffffff;
    /* Background Colors */
    --bg-card: #f8f9fa;
    --bg-primary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-secondary: #f5f5f5;
    --bg-module1: #ffffff;
    --bg-transparent: transparent;
    --bg-module2: #ffffff;
    /* Navigation Colors */
    --nav-link: #007bff;
    --nav-hover: #0069d9;
    --nav-active: #0056b3;
    --nav-disabled: #6c757d;
    /* Button State Colors */
    --inactive-button: #6c757d;
    --hover-info: #138496;
    --hover-save: #4caf50;
    --hover-clear: #dc3545;
    --active-save: #45a049;
    --button-clear-active: #c82333;
    --button-danger-hover: #c82333;
    --button-enabled-save: #28a745;
    --button-save-default: #6c757d;
    --button-clear-default: #6c757d;
    --button-enabled-clear: #dc3545;
    --button-warning-hover: #e0a800;
    --button-inactive-hover: #5a6268;
    /* Specialized Borders */
    --border-accent: #008cba;
    --border-section: #f0f0f0;
    --border-dark-input: #555555;
    /* Specialized Backgrounds */
    --bg-role-id: #f8f8f8;
    --bg-comments: #ffffff;
    --bg-role-info: #e8f4f8;
    --bg-input-dark: #2a2a2a;
    --bg-member-response: #1a1a1a;
    /* Scrollbar Colors */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #b7b7b7;
    --scrollbar-thumb-hover: #a4a4a4;
    --scrollbar-thumb-active: #999999;
    --scrollbar-button: transparent;
    --scrollbar-button-hover: transparent;
    --scrollbar-button-active: transparent;
    --scrollbar-track-border: transparent;
    --scrollbar-thumb-border: transparent;
    --scrollbar-button-border: transparent;
    --scrollbar-track-shadow: none;
    --scrollbar-thumb-shadow: none;
    --scrollbar-corner: #f1f1f1;

/* Master Page: Theme Colors - Comprehensive Controls */
    --primary-bg: #f3f3f3;;
    --secondary-bg: #ebebeb;
    --tertiary-bg: #ffffff;
    --module-bg: #ffffff;
    --header-bg: #ffffff;
    --footer-bg: ##fafafa;
    --left-cell-bg: #fafafa;
    /* Unique iframe border colors - back to gray for light mode */
    --role-editor-frame-border: #dee2e6;
    --assets-frame-border: #dee2e6;
    --songs-frame-border: #dee2e6;
    --tickets-frame-border: #dee2e6;
    --panel-shadow: var(--shadow-sm);
    --module-shadow: var(--shadow-md);
    --button-shadow: var(--shadow-sm);
    --footer-button-bg: var(--bg-secondary);
    --footer-button-hover-bg: var(--hover-list);
    --footer-button-text: var(--text-primary);
    --footer-count-bg: rgba(51, 51, 51, 0.75);
    --footer-count-text: #ffffff;
    --footer-new-count-bg: var(--status-error);
    --footer-new-count-text: #ffffff;
    --text-color: var(--text-primary);
    --module-toggle-bg: transparent;
    --module-toggle-border: var(--border-primary);
    --module-toggle-hover-bg: var(--secondary-bg);
    --module-toggle-hover-border: var(--border-primary);
    --module-toggle-checked-bg: #495057;
    --module-toggle-checked-border: #495057;
    --module-toggle-checked-text: #ffffff;
    --module-toggle-checked-hover-bg: #343a40;
    --module-toggle-checked-hover-border: #343a40;
    --module-toggle-text: var(--text-primary);
}

/* ===== DARK MODE THEME ===== */
.dark-mode {
    /* Form Colors */
    --bg-form: #333333;
    --text-form-label: #ffffff;
    --border-form: #555555;
    --text-form-control: #ffffff;
    --form-placeholder: #cccccc;
    /* List Colors */
    --bg-list-item: #2d2d2d;
    --hover-list: #333333;
    --bg-list-header: #1a1a1a;
    --bg-list-selected: #1a2e1a;
    /* ID List Interaction Colors - NEW VARIABLES TO ADD TO THEME GENERATOR */
    --role-id-hover-bg: #04061a;
    --role-id-selected-bg: #02052d;
    --event-id-hover-bg: #061207;
    --event-id-selected-bg: #0c1e0d;
    /* Text Colors */
    --text-primary: #ffffff;
    --text-monospace: #ffffff;
    --text-secondary: #cccccc;
    --text-overlay-dark: #ffffff;
    --text-overlay-light: #333333;
    /* Alert Colors */
    --alert-info: #0c5460;
    --alert-error: #721c24;
    --alert-success: #0f5132;
    --alert-warning: #664d03;
    /* Input Colors */
    --bg-input: #333333;
    --focus-input: #0d6efd;
    --border-input: #555555;
    /* Modal Colors */
    --modal-bg: #1a1a1a;
    --bg-modal-header: #1a1a1a;
    --bg-modal-overlay: rgba(0,0,0,0.8);
    /* Platform IDs */
    --role-id-color: #4285f4;
    --event-id-color: #34a853;
    /* Table Colors */
    --bg-table: #2d2d2d;
    --hover-table: #333333;
    --border-table: #555555;
    --table-header: #1a1a1a;
    --table-striped: #262626;
    /* Border Colors */
    --border-light: #444444;
    --border-primary: transparent;
    --border-selected: #00aa00;
    /* Button Colors */
    --button-gray: #666666;
    --button-danger: #dc3545;
    --button-primary: #0d6efd;
    --button-success: #28a745;
    --button-warning: #ffc107;
    --hover-primary: #0b5ed7;
    --hover-success: #34ce57;
    /* Rating Colors */
    --rating-novice: #4caf50;
    --rating-default: #666666;
    --rating-mastery: #a48f33;
    --rating-excellent: #ffc107;
    --rating-proficient: #2862a4;
    --text-rating-light: #333333;
    --rating-developing: #2e7d32;
    /* Shadow Colors */
    --shadow-heavy: rgba(0,0,0,0.5);
    --shadow-light: transparent;
    --shadow-medium: rgba(0,0,0,0.3);
    /* Status Colors */
    --status-info: #20c997;
    --status-error: #ff6b6b;
    --status-success: #4caf50;
    --status-warning: #ffc107;
    /* Highlight Colors */
    --bg-highlight: #664d03;
    --text-highlight: #ffecb5;
    --highlight-border: #b58900;
    /* Specialized Text */
    --text-subtle: #cccccc;
    --text-privacy-label: #cccccc;
    --text-section-title: #ffffff;
    --text-member-response: #ffffff;
    /* Background Colors */
    --bg-card: #2d2d2d;
    --bg-primary: #000000;
    --bg-tertiary: #1a1a1a;
    --bg-secondary: #333333;
    --bg-module1: #1a1a1a;
    --bg-transparent: transparent;
    --bg-module2: #1a1a1a;
    /* Navigation Colors */
    --nav-link: #0d6efd;
    --nav-hover: #0a58ca;
    --nav-active: #0b5ed7;
    --nav-disabled: #6c757d;
    /* Button State Colors */
    --inactive-button: #6c757d;
    --hover-info: #20c997;
    --hover-save: #4caf50;
    --hover-clear: #dc3545;
    --active-save: #45a049;
    --button-clear-active: #c82333;
    --button-danger-hover: #e55353;
    --button-enabled-save: #28a745;
    --button-save-default: #6c757d;
    --button-clear-default: #6c757d;
    --button-enabled-clear: #dc3545;
    --button-warning-hover: #ffcd39;
    --button-inactive-hover: #545b62;
    /* Specialized Borders */
    --border-accent: #4dd0e1;
    --border-section: #444444;
    --border-dark-input: #555555;
    /* Specialized Backgrounds */
    --bg-role-id: #3a3a3a;
    --bg-comments: #3a3a3a;
    --bg-role-info: #1a4480;
    --bg-input-dark: #2a2a2a;
    --bg-member-response: #1a1a1a;
    /* Scrollbar Colors */
    --scrollbar-track: #2c2c2c;
    --scrollbar-thumb: #363535;
    --scrollbar-thumb-hover: #4e4e4e;
    --scrollbar-thumb-active: #5a5a5a;
    --scrollbar-button: transparent;
    --scrollbar-button-hover: transparent;
    --scrollbar-button-active: transparent;
    --scrollbar-track-border: transparent;
    --scrollbar-thumb-border: transparent;
    --scrollbar-button-border: transparent;
    --scrollbar-track-shadow: none;
    --scrollbar-thumb-shadow: none;
    --scrollbar-corner: #2c2c2c;


/* Master Page: Theme Colors - Comprehensive Controls */      
    --primary-bg: #000000;
    --secondary-bg: #111111;
    --tertiary-bg: transparent;
    --module-bg: transparent;
     --header-bg: #000000;
    --footer-bg: ##0a0a0a;
    --left-cell-bg: #0a0a0a;
    /* Unique iframe border colors - back to gray for dark mode */
    --role-editor-frame-border: #333333;
    --assets-frame-border: #333333;
    --songs-frame-border: #333333;
    --tickets-frame-border: #333333;
    --panel-shadow: var(--shadow-md);
    --module-shadow: var(--shadow-lg);
    --button-shadow: var(--shadow-sm);
    --footer-button-bg: var(--bg-secondary);
    --footer-button-hover-bg: var(--hover-list);
    --footer-button-text: var(--text-primary);
    --footer-count-bg: rgba(51, 51, 51, 0.75);
    --footer-count-text: #ffffff;
    --footer-new-count-bg: var(--status-error);
    --footer-new-count-text: #ffffff;
    --text-color: var(--text-primary);
    --module-toggle-bg: transparent;
    --module-toggle-border: #555555;
    --module-toggle-hover-bg: var(--tertiary-bg);
    --module-toggle-hover-border: #666666;
    --module-toggle-checked-bg: #495057;
    --module-toggle-checked-border: #495057;
    --module-toggle-checked-text: #ffffff;
    --module-toggle-checked-hover-bg: #343a40;
    --module-toggle-checked-hover-border: #343a40;
    --module-toggle-text: var(--text-primary);


}

/* ===== SCROLLBAR STYLING IMPLEMENTATION ===== */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--scrollbar-track-radius);
    border: 1px solid var(--scrollbar-track-border, transparent);
    box-shadow: var(--scrollbar-track-shadow, none);
    margin: var(--scrollbar-track-margin);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-thumb-radius);
    border: 1px solid var(--scrollbar-thumb-border, transparent);
    box-shadow: var(--scrollbar-thumb-shadow, none);
    min-height: var(--scrollbar-thumb-min-size);
    transition: background var(--scrollbar-transition-speed) ease;
}

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

::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
}

::-webkit-scrollbar-button {
    width: var(--scrollbar-button-width);
    height: var(--scrollbar-button-height);
    background: var(--scrollbar-button);
    border: 1px solid var(--scrollbar-button-border, transparent);
    transition: background var(--scrollbar-transition-speed) ease;
}

::-webkit-scrollbar-button:hover {
    background: var(--scrollbar-button-hover);
}

::-webkit-scrollbar-button:active {
    background: var(--scrollbar-button-active);
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar-corner);
}

::-webkit-resizer {
    background: var(--scrollbar-resizer, var(--scrollbar-corner));
}

/* ===== MODAL COMPONENT STYLES ===== */
/* Using existing CSS variables: --modal-bg, --bg-modal-header, --bg-modal-overlay */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-modal-overlay);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--modal-bg);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--border-light);
}

.modal-header {
    background: var(--bg-modal-header);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--h3-size);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    color: var(--text-primary);
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-lg);
    background: var(--bg-modal-header);
    border-radius: 0 0 8px 8px;
}

.modal-footer button {
    padding: var(--padding-lg) var(--padding-2xl);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: bold;
    transition: var(--transition-fast);
}

/* ===== END CONVERTED THEME SYSTEM ===== */