/* =============================================================
   Roughdraft Theme System
   CSS custom properties for light (:root) and dark ([data-theme="dark"])
   ============================================================= */

/* Light theme (default) */
:root {
  --rd-bg-primary: #ffffff;
  --rd-bg-secondary: #f7f7f7;
  --rd-bg-tertiary: #e0e0e0;
  --rd-text-primary: #212529;
  --rd-text-secondary: #616161;
  --rd-text-link: #000000;
  --rd-border-color: #dee2e6;
  --rd-card-bg: #ffffff;
  --rd-navbar-bg: #263238;
  --rd-input-bg: #ffffff;
  --rd-input-text: #212529;
  --rd-hover-dropdown-bg: #ffffff;
  --rd-hover-dropdown-border: #e0e0e0;
  --rd-panel-bg: #f7f7f7;
  --rd-shadow: 0 1px 2px 1px #ddd;
  --rd-modal-bg: #ffffff;
  --rd-toast-bg: whitesmoke;
  --rd-icon-color: #616161;
  --rd-copy-icon-color: #0c4128;
  --rd-google-btn-color: #545454;
  --rd-google-btn-bg: #ffffff;
}

/* Dark theme */
[data-theme="dark"] {
  --rd-bg-primary: #1a1a2e;
  --rd-bg-secondary: #16213e;
  --rd-bg-tertiary: #0f3460;
  --rd-text-primary: #e0e0e0;
  --rd-text-secondary: #b0b0b0;
  --rd-text-link: #e0e0e0;
  --rd-border-color: #2a2a4a;
  --rd-card-bg: #16213e;
  --rd-navbar-bg: #0f0f23;
  --rd-input-bg: #1a1a2e;
  --rd-input-text: #e0e0e0;
  --rd-hover-dropdown-bg: #16213e;
  --rd-hover-dropdown-border: #2a2a4a;
  --rd-panel-bg: #16213e;
  --rd-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  --rd-modal-bg: #1a1a2e;
  --rd-toast-bg: #16213e;
  --rd-icon-color: #b0b0b0;
  --rd-copy-icon-color: #4caf50;
  --rd-google-btn-color: #e0e0e0;
  --rd-google-btn-bg: #16213e;
}

/* =============================================================
   Base element overrides
   ============================================================= */

body {
  background-color: var(--rd-bg-primary);
  color: var(--rd-text-primary);
}

/* Dark mode body needs higher specificity to override Bootstrap's body rule */
[data-theme="dark"] body {
  background-color: var(--rd-bg-primary) !important;
  color: var(--rd-text-primary);
}

/* =============================================================
   Bootstrap component overrides for dark mode
   ============================================================= */

[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
  background-color: var(--rd-card-bg);
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .modal-content {
  background-color: var(--rd-modal-bg);
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--rd-card-bg);
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .dropdown-item {
  color: var(--rd-text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--rd-bg-tertiary);
  color: var(--rd-text-primary);
}

[data-theme="dark"] .dropdown-item.active {
  background-color: var(--rd-bg-tertiary);
  color: var(--rd-text-primary);
}

[data-theme="dark"] .dropdown-divider {
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--rd-input-bg);
  color: var(--rd-input-text);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--rd-input-bg);
  color: var(--rd-input-text);
  border-color: #4a4a7a;
  box-shadow: 0 0 0 0.25rem rgba(74, 74, 122, 0.25);
}

[data-theme="dark"] .table {
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--rd-text-primary);
  background-color: var(--rd-bg-secondary);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  color: var(--rd-text-primary);
  background-color: var(--rd-bg-tertiary);
}

[data-theme="dark"] .btn-light {
  background-color: var(--rd-bg-tertiary);
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .btn-light:hover {
  background-color: var(--rd-bg-secondary);
  color: var(--rd-text-primary);
}

[data-theme="dark"] .btn-outline-secondary {
  color: var(--rd-text-secondary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] hr {
  border-color: var(--rd-border-color);
  opacity: 0.5;
}

[data-theme="dark"] .accordion-item {
  background-color: var(--rd-card-bg);
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .accordion-button {
  background-color: var(--rd-bg-secondary);
  color: var(--rd-text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--rd-bg-tertiary);
  color: var(--rd-text-primary);
}

[data-theme="dark"] .list-group-item {
  background-color: var(--rd-card-bg);
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--rd-text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--rd-card-bg);
  color: var(--rd-text-primary);
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .nav-tabs {
  border-color: var(--rd-border-color);
}

[data-theme="dark"] .tab-content {
  background-color: var(--rd-card-bg);
  color: var(--rd-text-primary);
}

[data-theme="dark"] small,
[data-theme="dark"] .text-muted {
  color: var(--rd-text-secondary) !important;
}

/* Toast overrides */
[data-theme="dark"] .toast {
  background-color: var(--rd-toast-bg);
  color: var(--rd-text-primary);
}

[data-theme="dark"] .toast-header {
  background-color: var(--rd-bg-secondary);
  color: var(--rd-text-primary);
}

/* =============================================================
   Theme toggle button
   ============================================================= */

#themeToggleBtn {
  padding: 2px 6px;
}

#themeToggleBtn .material-icons-outlined {
  /* Allow the navbar-dark context to handle color */
  color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .hover-dropdown-menu {
  background-color: var(--rd-hover-dropdown-bg);
  border-color: var(--rd-hover-dropdown-border);
}

[data-theme="dark"] .hover-dropdown-menu a {
  color: var(--rd-text-link);
}

[data-theme="dark"] .hover-dropdown-menu a:hover {
  background-color: var(--rd-bg-tertiary);
}

[data-theme="dark"] .hover-dropdown-menu button:hover {
  background-color: var(--rd-bg-tertiary) !important;
}