/* Theme CSS Variables  */
:root {
  /* Light theme defaults */
  --color-bg: #ffffff;
  --color-bgSecondary: #f9f9f9;
  --color-text: #333333;
  --color-textSecondary: #666666;
  --color-border: #e0e0e0;
  --color-input: #ffffff;
  --color-inputBorder: #ddd;
  --color-hover: #f5f5f5;
}

/* Dark theme */
body.dark-theme {
  --color-bg: #1a1a1a;
  --color-bgSecondary: #242424;
  --color-text: #e0e0e0;
  --color-textSecondary: #a0a0a0;
  --color-border: #404040;
  --color-input: #2a2a2a;
  --color-inputBorder: #404040;
  --color-hover: #303030;
}

/* Apply theme colors globally */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Default styling for common elements */
body.light-theme input[type="text"],
body.light-theme input[type="number"],
body.light-theme select,
body.light-theme textarea {
  background-color: var(--color-input);
  color: var(--color-text);
  border-color: var(--color-inputBorder);
}

body.dark-theme input[type="text"],
body.dark-theme input[type="number"],
body.dark-theme select,
body.dark-theme textarea {
  background-color: var(--color-input);
  color: var(--color-text);
  border-color: var(--color-inputBorder);
}

/* Table styling */
body.dark-theme table {
  background-color: var(--color-bgSecondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

body.dark-theme table th,
body.dark-theme table td {
  border-color: var(--color-border);
}

/* Modal styling */
body.dark-theme .modal-content,
body.dark-theme [role="dialog"] {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Container styling */
body.dark-theme .table-container,
body.dark-theme .card {
  background-color: var(--color-bgSecondary);
  border-color: var(--color-border);
}