/* CSS Variables for theming - WSB CI Colors */
@import './views.css';

/* ===== IFRAME CSS ISOLATION LAYER ===== */
/* Targeted fix: Only override specific inherited properties that parent pages commonly set */
/* This approach preserves layout while preventing style leakage */

/* Isolation for iframe mode only - does not affect standalone mode */
html.iframe-mode,
body.iframe-mode {
  /* Background isolation */
  background-color: var(--bg-primary) !important;
  background-image: none !important;
  background: var(--bg-primary) !important;
  
  /* Typography isolation */
  font-family: var(--typography-font-family, 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
  
  /* Reset common inherited properties */
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* Ensure the app container has correct background in iframe mode */
body.iframe-mode #app,
body.iframe-mode #iframe-root {
  background-color: var(--bg-primary) !important;
  background: var(--bg-primary) !important;
  font-family: var(--typography-font-family, 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif) !important;
  color: var(--text-primary) !important;
}

/* ===== END IFRAME CSS ISOLATION LAYER ===== */

:root {
  /* Light theme (default) - WSB CI Colors */
  --bg-primary: #F0F0F0;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #DBDBDB;
  --bg-card: #FFFFFF;
  --bg-button: #FF3304;
  --bg-button-hover: #ff5722;
  --bg-button-disabled: #474B54;
  --bg-success: #28AA23;
  --bg-success-hover: #1f8a1b;
  --bg-warning: #FE9001;
  --bg-warning-hover: #e58000;
  --bg-danger: #FF0000;
  --bg-danger-hover: #cc0000;
  --bg-dark: #1D2636;
  --bg-dark-secondary: #474B54;
  --bg-dark-tertiary: #4A5463;
  --bg-dark-card: #1D2636;
  --bg-hover: color-mix(in srgb, var(--primary) 12%, transparent);
  
  --text-primary: #000000;
  --text-secondary: #474B54;
  --text-light: #636366;
  --text-muted: #4A5463;
  --text-white: #ffffff;
  --text-accent: #FF3304;
  
  --accent-color: #FF3304;
  --accent-color-hover: #ff5722;
  --accent-color-text-heading: #FF3304;
  --accent-color-link-active: #FF3304;
  --border-color: #DBDBDB;
  --border-light: #F0F0F0;
  --border-dark: #474B54;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-light: rgba(0,0,0,0.05);
  --footer-bg: #1D2636;
  --tab-button-inactive: rgba(255, 255, 255, 0.1);
  --text-button: #ffffff;
  --bg-info: #3498db;
  --bg-muted: #DBDBDB;
  --text-on-page: #000000;
  --text-on-page-muted: #474B54;
  --text-on-card-face: #000000;
  --text-on-card-face-muted: #474B54;
  --text-on-card-contrast: #ffffff;
  --text-on-control: #000000;
  --text-on-control-muted: #474B54;
  --text-on-control-contrast: #ffffff;

  
  /* Gradient variables */
  --gradient-hero: linear-gradient(90deg, #1D2636 0%, #474B54 100%);
  
  /* Dropdown specific variables */
  --dropdown-bg: #1D2636;
  --dropdown-border: rgba(255, 255, 255, 0.2);
  --dropdown-border-hover: rgba(255, 255, 255, 0.3);
  --dropdown-item-bg: rgba(255, 255, 255, 0.1);
  --dropdown-item-bg-hover: rgba(255, 255, 255, 0.15);
  --dropdown-success-bg: rgba(40, 170, 35, 0.1);
  --dropdown-secondary-bg: #474B54;
  --dropdown-secondary-hover: #4A5463;
  
  /* Error state variables */
  --error-bg: #ffebee;
  --error-color: #FF0000;
  --error-border: #FF0000;
  --error: #FF0000;
  
  /* Button state variables */
  --btn-info: #3498db;
  --btn-warning: #FE9001;
  --btn-success-alt: #28AA23;
  --lottery-card-gradient: #1D2636;
  --bg-view-header: #FFFFFF;
  --bg-header-color: var(--lottery-card-gradient);
  --bg-nav-item: transparent;
  --bg-nav-item-hover: rgba(255, 255, 255, 0.14);
  --bg-nav-item-color: #ffffff;
  --nav-active-indicator: var(--primary);
  --bg-primary-button: var(--bg-button);
  --bg-primary-button-color: var(--text-button);
  --bg-primary-button-hover: var(--bg-button-hover);
  --bg-primary-button-border: var(--bg-button);
  --bg-secondary-button: var(--bg-secondary);
  --bg-secondary-button-color: var(--text-primary);
  --bg-secondary-border: var(--border-color);
  --bg-table-header: #E7E7E7;
  --bg-table-body: var(--bg-card);
  --bg-load-more-button: var(--bg-button);
  --bg-load-more-button-border: var(--accent-color);
  --bg-load-more-button-color: var(--text-button);
  --bg-desktop-circle: var(--bg-button);
  --bg-desktop-circle-color: var(--text-button);
  --bg-bet-check-box: var(--bg-secondary);
  --bg-bet-count: var(--bg-success);
  --bg-filter-select: #FFFFFF;
  --bg-filter-select-focus: var(--accent-color);
  --bg-search-container: var(--bg-secondary);
  --bg-search-button: var(--bg-button);
  /* Base lottery strip colors; account JSON sets these inline in dark mode, but
     light mode clears the dark surface palette so :root needs a complete fallback set. */
  --bg-left-section: #ffffff;
  --bg-right-section: #474B54;
  --nav-buttons-bg: rgba(29, 38, 54, 0.8);

  --primary: #FF3304;
  --primary-hover: #ff5722;
  --primary-color: var(--primary);
  --cart-icon-filter: brightness(0) saturate(100%);
  --filter-light: none;
  --icon-filter: var(--cart-icon-filter);
  --footer-icon-filter: none;

  /* Semantic aliases for refactored components */
  --surface-page: var(--bg-primary);
  --surface-panel: var(--bg-secondary);
  --surface-card-face: var(--bg-left-section);
  --surface-card-band: var(--bg-right-section);
  --surface-card-disc: var(--bg-dark-card);
  --surface-control: var(--bg-filter-select);
  --surface-control-subtle: var(--bg-search-container);
  --surface-control-strong: var(--bg-search-button);
  --surface-control-elevated: var(--bg-secondary);
  --text-card-title: var(--text-on-card-face);
  --text-card-meta: var(--text-on-card-face-muted);
  --text-control-placeholder: var(--text-on-control-muted);
  --text-control-strong: var(--text-on-control-contrast);
  --border-subtle: var(--border-color);
  --border-strong: var(--border-dark);
  --border-control: color-mix(in srgb, var(--border-strong) 78%, white 22%);
  --shadow-control: 0 10px 30px color-mix(in srgb, var(--shadow-color) 22%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
}



html.theme-dark[data-account-theme="virginbet"],
html.theme-dark[data-account-theme="virginbet"] body,
body.theme-dark[data-account-theme="virginbet"] {
  --bg-primary: #111111;
  --bg-dark: #111111;
  --background: #111111;
  background-color: #111111;
  background: #111111;
}

html.theme-dark[data-account-theme="virginbet"] #app,
body.theme-dark[data-account-theme="virginbet"] #app,
html.theme-dark[data-account-theme="virginbet"] .app,
html.theme-dark[data-account-theme="virginbet"] .detail-view,
html.theme-dark[data-account-theme="virginbet"] .app-content {
  background-color: #111111;
  background: #111111;
}

.theme-dark {
  /* Dark theme - WSB CI Colors */
  /* Step cards / view headers; account themes override via applyTheme (e.g. Betify #1A2842). */
  --bg-view-header: #1A2842;
  --bg-primary: #091628;
  --bg-secondary: #232325;
  --bg-tertiary: #2C2C2E;
  --bg-card: #232325;
  /* Buttons / primary accent / lottery-card panels: not forced here so account
     themes (e.g. betify custom.json via applyTheme) win in dark mode. */
  --bg-success: #28AA23;
  --bg-success-hover: #1f8a1b;
  --bg-warning: #FE9001;
  --bg-warning-hover: #e58000;
  --bg-danger: #FF0000;
  --bg-danger-hover: #cc0000;
  --bg-dark: #091628;
  --bg-dark-secondary: #2C2C2E;
  --bg-dark-tertiary: #3A3A3C;
  --bg-dark-card: #232325;
  --bg-hover: color-mix(in srgb, var(--primary) 15%, transparent);

  --text-primary: #ffffff;
  --text-secondary: #8e8e93;
  --text-light: #636366;
  --text-muted: #8e8e93;
  --text-white: #ffffff;
  --text-button: #ffffff;
  --text-on-page: #ffffff;
  --text-on-page-muted: #8e8e93;
  --text-on-card-face: #ffffff;
  --text-on-card-face-muted: #c5d0e0;
  --text-on-card-contrast: #ffffff;
  --text-on-control: #ffffff;
  --text-on-control-muted: #c5d0e0;
  --text-on-control-contrast: #ffffff;
  --border-color: #3a3a3c;
  --border-light: #48484a;
  --border-dark: #636366;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-light: rgba(0, 0, 0, 0.2);

  --cart-icon-filter: brightness(0) invert(1);
  --primary-color: var(--primary);
  --bg-header-color: var(--lottery-card-gradient);
  --bg-nav-item: transparent;
  --bg-nav-item-hover: rgba(255, 255, 255, 0.08);
  --bg-nav-item-color: #ffffff;
  --nav-active-indicator: var(--primary);
  --bg-primary-button: var(--bg-button);
  --bg-primary-button-color: var(--text-button);
  --bg-primary-button-hover: var(--bg-button-hover);
  --bg-primary-button-border: var(--bg-button);
  --bg-secondary-button: var(--bg-tertiary);
  --bg-secondary-button-color: var(--text-primary);
  --bg-secondary-border: var(--border-color);
  --bg-table-header: #1A2332;
  --bg-table-body: var(--bg-card);
  --bg-load-more-button: var(--bg-button);
  --bg-load-more-button-border: var(--accent-color);
  --bg-load-more-button-color: var(--text-button);
  --bg-desktop-circle: var(--bg-button);
  --bg-desktop-circle-color: var(--text-button);
  --bg-bet-check-box: var(--bg-card);
  --bg-bet-count: var(--bg-success);
  --bg-filter-select: var(--bg-dark-secondary);
  --bg-filter-select-focus: var(--accent-color);
  --bg-search-container: var(--bg-card);
  --bg-search-button: var(--bg-dark-secondary);
  --icon-filter: var(--cart-icon-filter);
  --footer-icon-filter: none;
  --surface-page: var(--bg-primary);
  --surface-panel: var(--bg-secondary);
  --surface-card-face: var(--bg-left-section);
  --surface-card-band: var(--bg-right-section);
  --surface-card-disc: var(--bg-dark-card);
  --surface-control: var(--bg-filter-select);
  --surface-control-subtle: var(--bg-search-container);
  --surface-control-strong: var(--bg-search-button);
  --surface-control-elevated: var(--bg-secondary);
  --text-card-title: var(--text-on-card-face);
  --text-card-meta: var(--text-on-card-face-muted);
  --text-control-placeholder: var(--text-on-control-muted);
  --text-control-strong: var(--text-on-control-contrast);
  --border-subtle: var(--border-color);
  --border-strong: var(--border-dark);
  --border-control: color-mix(in srgb, var(--border-color) 72%, white 8%);
  --shadow-control: 0 16px 36px color-mix(in srgb, var(--shadow-color) 45%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);

  /* Gradient variables */
  --gradient-hero: linear-gradient(90deg, #0f1114 0%, #2c2c2e 100%);

  /* Dropdown specific variables */
  --dropdown-bg: #232325;
  --dropdown-border: rgba(255, 255, 255, 0.2);
  --dropdown-border-hover: rgba(255, 255, 255, 0.3);
  --dropdown-item-bg: rgba(255, 255, 255, 0.1);
  --dropdown-item-bg-hover: rgba(255, 255, 255, 0.15);
  --dropdown-success-bg: rgba(40, 170, 35, 0.1);
  --dropdown-secondary-bg: #2c2c2e;
  --dropdown-secondary-hover: #3a3a3c;
  --dropdown-trigger-hover: rgba(255, 255, 255, 0.05);

  /* Error state variables */
  --error-bg: rgba(255, 0, 0, 0.2);
  --error-color: #ff0000;
  --error-border: #ff0000;
  --error: #ff0000;

  /* Button state variables */
  --btn-info: #3498db;
  --btn-warning: #fe9001;
  --btn-success-alt: #28aa23;
  --bg-info: #3498db;
  --bg-muted: #3A3A3C;
}