/* Theme System - CSS Variables */
:root {
  /* Default base colors that will be overridden by theme.js */
  --primary-color: #3498db;
  --secondary-color: #2980b9;
  --accent-color: #2ecc71;
  --background-color: #060707;
  --card-background: #ffffff;
  --text-color: #34495e;
  --banner-text-color: #ffffff;
  --form-control-text-color: #34495e;
  --grid-text-color: #252525;
  --muted-text-color: rgba(255, 255, 255, 0.838);
  
  /* Additional variables for DynamicGrid and DynamicDialog */
  --input-background: var(--card-background);
  --header-background: var(--secondary-color);
  --hover-background: var(--gray-200);
  --hover-color: rgba(0, 0, 0, 0.05);
  --accent-color-light: color-mix(in srgb, var(--accent-color) 50%, var(--card-background));
  
  /* Dialog-specific variables */
  --dialog-bg: var(--background-color);
  --dialog-text: var(--text-color);
  --dialog-border: var(--border-color);
  --dialog-input-bg: var(--card-background);
  --dialog-accent: var(--accent-color);
  
  /* Banner dimensions */
  --banner-height: 60px;
  
  /* RGB values for background colors (for transparency) */
  --card-background-rgb: 255, 255, 255;
  --background-color-rgb: 245, 248, 250;
  
  /* Common colors across themes */
  --border-color: #5e5e60;
  --bs-border-color: #7a7a7f;
  --bs-modal-border-color: #7a7a7f;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.8);
  --hover-color: rgba(0, 0, 0, 0.05);
  --hover-color-rgb: 0, 0, 0;
  --error-color: #e74c3c;
  --success-color: #2ecc71;
  --warning-color: #f39c12;
  --info-color: #3498db;
  --black: #000000;
  --white: #ffffff;
  --moon: #f8f7f7;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  
  /* RGB values for color manipulation */
  --error-color-rgb: 231, 76, 60;
  --success-color-rgb: 46, 204, 113;
  --warning-color-rgb: 243, 156, 18;
  --info-color-rgb: 52, 152, 219;

  /* Bootstrap Overrides - Map Bootstrap variables to our theme variables */
  --bs-modal-bg: var(--card-background);
  --bs-modal-color: var(--text-color);
  --bs-modal-border-color: var(--border-color);
  --bs-body-bg: var(--background-color);
  --bs-body-color: var(--text-color);
  --bs-border-color: var(--border-color);
  --bs-primary: var(--accent-color);
  --bs-secondary: var(--secondary-color);
  --bs-success: var(--success-color);
  --bs-info: var(--info-color);
  --bs-warning: var(--warning-color);
  --bs-danger: var(--error-color);
  --bs-light: var(--card-background);
  --bs-dark: var(--text-color);
  --bs-white: #ffffff;
  --bs-black: #000000;
  --bs-pagination-color: var(--text-color);
  --bs-pagination-bg: var(--card-background);
  --bs-pagination-border-color: var(--border-color);
  --bs-pagination-hover-color: var(--text-color);
  --bs-pagination-hover-bg: var(--card-background);
  --bs-pagination-hover-border-color: var(--border-color);
}

/* Custom close button styling */
.btn-close {
  filter: invert(1) brightness(0.6);
  opacity: 1;
}

.btn-close:hover {
  opacity: 0.75;
}

/* Dynamic Grid Base Styles */
.dynamic-grid-container {
  padding: 20px;
  background-color: var(--card-background);
  color: var(--text-color);
}

.dynamic-grid-filters {
  background: var(--card-background);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.dynamic-grid-filters .btn {
  background-color: var(--card-background);
  border-color: var(--border-color);
  color: var(--text-color);
  transition: all 0.2s ease;
  height: 32px;
  font-size: 0.875rem;
}

.dynamic-grid-filters .btn:hover {
  background-color: var(--hover-background);
  border-color: var(--accent-color);
}

.dynamic-grid-filters .btn[aria-expanded="true"] {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--banner-text-color);
}

.dynamic-grid-filters .btn i {
  font-size: 0.875rem;
}

.dynamic-grid-filters .filter-group {
  margin-bottom: 15px;
}

.dynamic-grid-filters .filter-group:last-child {
  margin-bottom: 0;
}

.dynamic-grid-filters .filter-group label {
  color: var(--text-color);
}

.dynamic-grid-filters .filter-group input,
.dynamic-grid-filters .filter-group select {
  background-color: var(--input-background);
  color: var(--text-color);
  border-color: var(--border-color);
}

.dynamic-grid-filters .filter-group input:focus,
.dynamic-grid-filters .filter-group select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-color-rgb), 0.25);
}

.dynamic-grid-filters .dropdown-menu {
  background-color: var(--card-background);
  border-color: var(--border-color);
}

.dynamic-grid-filters .dropdown-item {
  color: var(--text-color);
}

.dynamic-grid-filters .dropdown-item:hover {
  background-color: var(--hover-background);
  color: var(--text-color);
}

/* Dynamic Dialog Base Styles */
.dynamic-dialog {
  background-color: var(--dialog-bg);
}

.dynamic-dialog .modal-content {
  background-color: var(--dialog-bg);
  border-color: var(--dialog-border);
}

.dynamic-dialog .modal-header,
.dynamic-dialog .modal-body,
.dynamic-dialog .modal-footer {
  background-color: var(--dialog-bg);
  border-color: var(--dialog-border);
  color: var(--dialog-text);
}

.dynamic-dialog .form-control,
.dynamic-dialog .form-select {
  background-color: var(--dialog-input-bg) !important;
  border-color: var(--dialog-border) !important;
  color: var(--dialog-text) !important;
}

.dynamic-dialog .form-control:focus,
.dynamic-dialog .form-select:focus {
  border-color: var(--dialog-accent) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--accent-color-rgb), 0.25) !important;
}

/* Grid Template Styles */
.template-Grid .table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.template-Grid .table>:not(caption)>*>* {
  background-color: var(--card-background) !important;
  transition: all 0.2s ease-in-out;
}

.template-Grid .table th {
  background: var(--header-background) !important;
  padding: 12px;
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid var(--border-color);
  color: var(--text-color);
}

.template-Grid .table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

.template-Grid .table>tbody>tr:hover>td,
.template-Grid .table>tbody>tr:hover>th,
.template-Grid .table>tbody>tr:hover {
  background-color: var(--hover-color) !important;
  cursor: pointer;
}

/* Collapsible sections for child forms */
.collapsible-section {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  transition: box-shadow 0.3s ease;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
  background-color: var(--primary-color);
  color: var(--banner-text-color);
}

.collapsible-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--banner-text-color);
  display: flex;
  align-items: center;
}

.collapsible-header h3 i {
  margin-right: 0.5rem;
  opacity: 0.7;
}

.collapsible-header .toggle-button {
  background: transparent;
  border: none;
  color: var(--banner-text-color);
  font-size: 1.2rem;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  outline: none;
}

.collapsible-header .toggle-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.collapsible-header:hover {
  background-color: var(--secondary-color);
}

.collapsible-content {
  padding: 0;
  transition: max-height 0.5s ease;
  max-height: 0;
  overflow: hidden;
}

.collapsible-content.expanded {
  max-height: 2000px;
  padding: 1rem;
}

/* Child grid container */
.child-grid-container {
  position: relative;
  min-height: 200px;
}

/* The themes in this CSS are just for reference.
   The actual theme application is done via JavaScript in theme.js
   which sets these variables directly on the :root element */

/*
Theme reference:

modern_blue: {
  '--primary-color': '#3498db',
  '--secondary-color': '#2980b9',
  '--accent-color': '#2ecc71',
  '--background-color': '#f5f8fa',
  '--card-background': '#ffffff',
  '--text-color': '#34495e',
  '--banner-text-color': '#ffffff'
}

corporate_blue: {
  '--primary-color': '#1a5276',
  '--secondary-color': '#2874a6',
  '--accent-color': '#3498db',
  '--background-color': '#eef2f5',
  '--card-background': '#ffffff',
  '--text-color': '#2c3e50',
  '--banner-text-color': '#ffffff'
}

midnight: {
  '--primary-color': '#2c3e50',
  '--secondary-color': '#34495e',
  '--accent-color': '#3498db',
  '--background-color': '#1a1a2e',
  '--card-background': '#212f3d',
  '--text-color': '#ecf0f1',
  '--banner-text-color': '#ffffff'
}

forest: {
  '--primary-color': '#27ae60',
  '--secondary-color': '#2ecc71',
  '--accent-color': '#f1c40f',
  '--background-color': '#1e272e',
  '--card-background': '#2c3a47',
  '--text-color': '#f5f6fa',
  '--banner-text-color': '#ffffff'
}

sunset: {
  '--primary-color': '#e74c3c',
  '--secondary-color': '#c0392b',
  '--accent-color': '#f39c12',
  '--background-color': '#2c3e50',
  '--card-background': '#34495e',
  '--text-color': '#ecf0f1',
  '--banner-text-color': '#ffffff'
}

light_modern: {
  '--primary-color': '#3498db',
  '--secondary-color': '#2980b9',
  '--accent-color': '#16a085',
  '--background-color': '#ecf0f1',
  '--card-background': '#ffffff',
  '--text-color': '#2c3e50',
  '--banner-text-color': '#1a1a1a'
}

dark_gold: {
  '--primary-color': '#1e1e1e',
  '--secondary-color': '#2a2a2a',
  '--accent-color': '#d4af37',
  '--background-color': '#0a0a0a',
  '--card-background': '#141414',
  '--text-color': '#d4af37',
  '--banner-text-color': '#d4af37'
}

dark_blue: {
  '--primary-color': '#121212',
  '--secondary-color': '#232323',
  '--accent-color': '#0d6efd',
  '--background-color': '#050505',
  '--card-background': '#111111',
  '--text-color': '#0d6efd',
  '--banner-text-color': '#0d6efd'
}

dark_red: {
  '--primary-color': '#151515',
  '--secondary-color': '#262626',
  '--accent-color': '#dc3545',
  '--background-color': '#080808',
  '--card-background': '#121212',
  '--text-color': '#dc3545',
  '--banner-text-color': '#dc3545'
}

dark_white: {
  '--primary-color': '#181818',
  '--secondary-color': '#292929',
  '--accent-color': '#ffffff',
  '--background-color': '#0d0d0d',
  '--card-background': '#191919',
  '--text-color': '#ffffff',
  '--banner-text-color': '#ffffff'
}
*/

/* Star Rating Component Styles */
.star-rating-container {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 8px 0 !important;
  user-select: none !important;
}

.star-rating-star {
  font-size: 24px !important;
  cursor: pointer !important;
  transition: color 0.2s ease, transform 0.1s ease !important;
  padding: 2px !important;
  color: #ddd;
}

.star-rating-star:hover {
  transform: scale(1.1) !important;
}

.star-rating-star.selected {
  color: #ffd700 !important; /* Gold for selected stars */
}

.star-rating-star.hover {
  color: #ffa500 !important; /* Orange for hover effect */
}

.star-rating-star[readonly] {
  cursor: default !important;
  opacity: 0.7 !important;
}

.star-rating-text {
  margin-left: 12px !important;
  font-size: 14px !important;
  color: var(--text-color) !important;
  font-weight: 500 !important;
}

/* Dark theme adjustments for star rating */
[data-theme="dark_mode"] .star-rating-star:not(.selected):not(.hover),
[data-theme="dark_blue"] .star-rating-star:not(.selected):not(.hover),
[data-theme="dark_green"] .star-rating-star:not(.selected):not(.hover),
[data-theme="dark_red"] .star-rating-star:not(.selected):not(.hover),
[data-theme="dark_white"] .star-rating-star:not(.selected):not(.hover) {
  color: #555 !important; /* Darker gray for unselected stars in dark themes */
}

/* Ensure proper spacing and alignment in form groups */
.form-group .star-rating-container {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* Grid Star Rating Styles */
.grid-star-rating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
}

.grid-star-rating .fas.fa-star {
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}

.grid-star-rating .fas.fa-star[style*="#ffd700"] {
  color: #ffd700 !important; /* Gold for selected stars */
}

.grid-star-rating .fas.fa-star[style*="#ddd"] {
  color: #ddd !important; /* Gray for unselected stars */
}

/* Dark theme adjustments for grid star rating */
[data-theme="dark_mode"] .grid-star-rating .fas.fa-star[style*="#ddd"],
[data-theme="dark_blue"] .grid-star-rating .fas.fa-star[style*="#ddd"],
[data-theme="dark_green"] .grid-star-rating .fas.fa-star[style*="#ddd"],
[data-theme="dark_red"] .grid-star-rating .fas.fa-star[style*="#ddd"],
[data-theme="dark_white"] .grid-star-rating .fas.fa-star[style*="#ddd"] {
  color: #555 !important; /* Darker gray for unselected stars in dark themes */
}