/* Force rebuild: 2025-06-13 */

:root {
  /* hsl (fallback color) */
  --bg-dark: hsl(91 6% 89%);
  --bg: hsl(91 12% 94%);
  --bg-light: hsl(91 100% 100%);
  --text: hsl(91 22% 4%);
  --text-muted: hsl(90 4% 27%);
  --highlight: hsl(91 100% 99%);
  --border: hsl(91 2% 50%);
  --border-muted: hsl(91 3% 61%);
  --primary: hsl(82 80% 18%);
  --secondary: hsl(274 35% 33%);
  --danger: hsl(9 21% 41%);
  --warning: hsl(52 23% 34%);
  --success: hsl(147 19% 36%);
  --info: hsl(217 22% 41%);
  /* oklch */
  --bg-dark: oklch(0.92 0.005 129);
  --bg: oklch(0.96 0.005 129);
  --bg-light: oklch(1 0.005 129);
  --text: oklch(0.15 0.01 129);
  --text-muted: oklch(0.4 0.01 129);
  --highlight: oklch(1 0.01 129);
  --border: oklch(0.6 0.01 129);
  --border-muted: oklch(0.7 0.01 129);
  --primary: oklch(0.4 0.1 129);
  --secondary: oklch(0.4 0.1 309);
  --danger: oklch(0.5 0.05 30);
  --warning: oklch(0.5 0.05 100);
  --success: oklch(0.5 0.05 160);
  --info: oklch(0.5 0.05 260);
  --shadow: 0px 2px 2px hsla(0 0 0 / 0.2), 0px 4px 4px hsla(0 0 0 / 0.1);
}
body.dark {
/* hsl (fallback color) */
  --bg-dark: hsl(91 16% 1%);
  --bg: hsl(90 11% 4%);
  --bg-light: hsl(90 6% 8%);
  --text: hsl(91 23% 94%);
  --text-muted: hsl(91 4% 69%);
  --highlight: hsl(90 3% 38%);
  --border: hsl(90 4% 27%);
  --border-muted: hsl(90 6% 17%);
  --primary: hsl(88 35% 61%);
  --secondary: hsl(273 53% 76%);
  --danger: hsl(9 26% 64%);
  --warning: hsl(52 19% 57%);
  --success: hsl(146 17% 59%);
  --info: hsl(217 28% 65%);
  /* oklch */
  --bg-dark: oklch(0.1 0.005 129);
  --bg: oklch(0.15 0.005 129);
  --bg-light: oklch(0.2 0.005 129);
  --text: oklch(0.96 0.01 129);
  --text-muted: oklch(0.76 0.01 129);
  --highlight: oklch(0.5 0.01 129);
  --border: oklch(0.4 0.01 129);
  --border-muted: oklch(0.3 0.01 129);
  --primary: oklch(0.76 0.1 129);
  --secondary: oklch(0.76 0.1 309);
  --danger: oklch(0.7 0.05 30);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.7 0.05 160);
  --info: oklch(0.7 0.05 260);
}


/* frfr */
body {
  /* Light Theme Variables */
  --primary-color: #6A5DF9; /*#3498db;*/
  --primary-hover-color: #6fb5ee; /* much lighter blue for highlight */
  --primary-active-color: #004085; /* Darker blue for active state */
  --container-color: #ffffff;
  --accent-color: #afc2d4;
  --vibrant-accent-color: #3498db; /* as of 7/24/25 just used for instructor side my classes */
  --secondary-color: #db7734;
  --background-color: #fbfbfb;
  --surface-color: #f8f8f8;
  --text-color: #222222;
  --border-color: #dddddd;
  --error-color: #e74c3c;
  --error-hover-color: #c82333;
  --overdue-color: red; /* Red for overdue */
  --warning-color: #f39c12;
  --success-color: #27ae60;
  --success-hover-color: #218838;
  --hover-color: #f0f0f0;
  --active-color: #c0c0c0;
  --muted-color: #999999;
  --terminal-color: #546156; /* old: dbdbdb*/
  --gray-background-color: #dbdbdb;
  --border-color: rgba(0, 0, 0, 0.15);
  --border-radius: 8px;
  --container-border: 1px solid var(--border-color);
  --container-shadow: 0px 4px 8px rgba(17, 24, 39, 0.15);
  --subtext-color: #666;
  --confirmation-color: #155724; /* Dark green for confirmation messages */
  --btn-disabled-color: #6c757d; /* Disabled button color */
  --header-color: #979797;
  --purple-color: #4b0082; /* Indigo for light mode */
  --purple-hover-color: #3f007d; /* Darker indigo for hover in light mode */
  --focus-shadow: 0 0 0 4px rgba(27, 110, 194, 0.5);
  --border-light-color: #e0e6ef; /* Lighter than border-color for nodes/lines */
  --roadmap-border-color: #222222; /* Black/dark for light mode, matches original */
  --shadow-color: rgba(44,34,10,0.10); /* Default shadow color for light theme */
  --primary-contrast: #fff;
  --top-left-background-color: #29282E; /* Default for light theme */

  /* Notification Border Colors */
  --notification-border-low: #ff4d4d;
  --notification-border-mid: #e60000;
  --notification-border-high: #990000;
  --notification-border-default: #1b6ec2;

  /* Sidebar and Header Colors */
  --sidebar-background-color: #837779; /* Light theme */
  --sidebar-text-color: #333333; /* Light theme */
  --sidebar-border-color: #cccccc; /* Light theme */
  --header-background-color: #333333; /* Light theme */
  --header-text-color: #000000; /* Light theme */
  --header-border-color: #333333; /* Light theme */
  --welcome-text-color: #ffffff; /* White for Light Theme */

  /* Node Styling Variables */
  --node-border-color: var(--text-color); /* Border color for nodes */
  --node-line-color: var(--text-color); /* Line color connecting nodes */
  --node-number-color: var(--text-color); /* Number color inside nodes */
  --node-background-color: var(--surface-color); /* Background color for nodes */
}

body.dark-theme {
  /* Dark Theme Overrides */
  --primary-color: #2980b9;
  --primary-hover-color: #3a4a5a; /* much lighter for dark mode */
  --primary-active-color: #004085; /* Darker blue for active state */
  --accent-color: #afc2d4;
  --secondary-color: #27ae60;
  --background-color: #181a1b;
  --surface-color: #23272a;
  --text-color: #f5f5f5;
  --border-color: #444c56;
  --error-color: #e57373;
  --error-hover-color: #c82333;
  --overdue-color: red; /* Red for overdue */
  --warning-color: #ffb74d;
  --success-color: #81c784;
  --hover-color: #23272a;
  --active-color: #444c56;
  --muted-color: #888888;
  --terminal-color: #23272a;
  --gray-background-color: #23272a;
  --header-color: #979797;
  --border-color: #f5f5f5;
  --subtext-color: #666;
  --confirmation-color: #55b36b; /* Light green for confirmation messages */
  --alert-info-color: #0c5460;
  --alert-color: #856404;
  --btn-disabled-color: #6c757d; /* Disabled button color */
  --purple-color: #b388ff; /* Lighter purple for dark mode */
  --purple-hover-color: #7c4dff; /* Lighter purple hover for dark mode */
  --focus-shadow: 0 0 0 4px rgba(52, 152, 219, 0.5);
  --border-light-color: #5a6473; /* Lighter for dark mode, but still visible */
  --roadmap-border-color: #f5f5f5; 
  --shadow-color: rgba(0,0,0,0.35); /* Deeper shadow for dark theme */
  --primary-contrast: #fff;
  --top-left-background-color: #23272a; /* Default for dark theme */

  /* Notification Border Colors */
  --notification-border-low: #ff8fa3;
  --notification-border-mid: #ff4d6d;
  --notification-border-high: #b388ff;
  --notification-border-default: #82b1ff;

  /* Sidebar and Header Colors */
  --sidebar-background-color: #121212; /* Dark theme */
  --sidebar-text-color: #e0e0e0; /* Dark theme */
  --sidebar-border-color: #333333; /* Dark theme */
  --header-background-color: #1f1f1f; /* Dark theme */
  --header-text-color: #ffffff; /* Dark theme */
  --header-border-color: #333333; /* Dark theme */
  --welcome-text-color: #ffffff; /* White for Dark Theme */
}

body.synthwave-theme {
  /* Synthwave Theme Variables */
  --primary-color: #ff00c8;
  --primary-hover-color: #4d1a66; /* closer to synthwave surface color for highlight */
  --primary-active-color: #c800a1;
  --accent-color: #afc2d4;
  --secondary-color: #00fff7;
  --background-color: #2d004d;
  --surface-color: #3d0066;
  --text-color: #fffbe7;
  --border-color: #ff00c8;
  --error-color: #ff4d4d;
  --error-hover-color: #ff1a1a;
  --overdue-color: #fffb00;
  --warning-color: #fffb00;
  --success-color: #00ffae;
  --success-hover-color: #00c88a;
  --hover-color: #4d0066;
  --active-color: #ff00c8;
  --muted-color: #b266ff;
  --terminal-color: #1a0033;
  --gray-background-color: #3d0066;
  --header-color: #ff00c8;
  --border-light-color: #ff5cf7;
  --roadmap-border-color: #00fff7;
  --subtext-color: #fffb00;
  --confirmation-color: #00ffae;
  --btn-disabled-color: #b266ff;
  --purple-color: #ff00c8;
  --purple-hover-color: #ff5cf7;
  --focus-shadow: 0 0 0 4px rgba(255, 0, 200, 0.5);
  --shadow-color: rgba(255,0,200,0.18); /* Neon pinkish shadow for synthwave */
  --primary-contrast: #fffbe7;
  --top-left-background-color: #1A0129; /* Default for synthwave theme */
  --container-color: #4d0066; /* Deep purple for Synthwave Theme */

  /* Notification Border Colors */
  --notification-border-low: #fffb00;
  --notification-border-mid: #ff00c8;
  --notification-border-high: #00fff7;
  --notification-border-default: #ff5cf7;

  /* Sidebar and Header Colors */
  --sidebar-background-color: #2d004d; /* Synthwave theme */
  --sidebar-text-color: #fffbe7; /* Synthwave theme */
  --sidebar-border-color: #ff00c8; /* Synthwave theme */
  --header-background-color: #220135; /* Synthwave theme */
  --header-text-color: #fffbe7; /* Synthwave theme */
  --header-border-color: #ff00c8; /* Synthwave theme */
  --welcome-text-color: #ffffff; /* White for Synthwave Theme */
}

body.medieval-theme {
  /* Medieval Theme Variables */
  --primary-color: #7b3f00; /* Deep brown, wood */
  --primary-hover-color: #f7ecd3; /* much lighter gold for highlight */
  --primary-active-color: #4e260e; /* Darker brown */
  --accent-color: #afc2d4;
  --secondary-color: #bfa76f; /* Aged gold */
  --background-color: #ede5c7; /* Parchment */
  --surface-color: #f6f1e7; /* Lighter parchment */
  --text-color: #2d1b00; /* Deep brown/black */
  --border-color: #a97428; /* Golden brown */
  --error-color: #a83232; /* Deep red */
  --error-hover-color: #7c2323; /* Darker red */
  --overdue-color: #a83232; /* Deep red */
  --warning-color: #e1b866; /* Warm gold */
  --success-color: #4e7c2e; /* Forest green */
  --success-hover-color: #35541d; /* Darker green */
  --hover-color: #e1b866; /* Warm gold */
  --active-color: #bfa76f; /* Aged gold */
  --muted-color: #a89c8c; /* Muted brown/gray */
  --terminal-color: #f6f1e7; /* Use the lighter parchment for a cleaner terminal background */
  --gray-background-color: #e1b866; /* Warm gold */
  --header-color: #5e3a1c; /* Dark brown */
  --border-light-color: #e1b866; /* Warm gold */
  --roadmap-border-color: #7b3f00; /* Deep brown */
  --subtext-color: #5c4326; /* Muted brown */
  --confirmation-color: #4e7c2e; /* Forest green */
  --btn-disabled-color: #a89c8c; /* Muted brown/gray */
  --purple-color: #6b4f8a; /* Royal purple */
  --purple-hover-color: #a992d4; /* Lighter royal purple */
  --focus-shadow: 0 0 0 4px rgba(123, 63, 0, 0.18);
  --shadow-color: rgba(123, 63, 0, 0.13); /* Warm brown shadow for medieval */
  --primary-contrast: #2d1b00;
  --top-left-background-color: #5c4326; /* Default for medieval theme */
  --container-color: #ede5c7; /* Parchment-like color for Medieval Theme */

  /* Notification Border Colors */
  --notification-border-low: #e1b866;
  --notification-border-mid: #a83232;
  --notification-border-high: #6b4f8a;
  --notification-border-default: #7b3f00;

  /* Sidebar and Header Colors */
  --sidebar-background-color: #ede5c7; /* Medieval theme */
  --sidebar-text-color: #2d1b00; /* Medieval theme */
  --sidebar-border-color: #a97428; /* Medieval theme */
  --header-background-color: #ede5c7; /* Light grayish green with a bit more green */
  --header-text-color: #2d1b00; /* Medieval theme */
  --header-border-color: #a97428; /* Medieval theme */
  --welcome-text-color: #5c4326; /* Brown for Medieval Theme */
}

body.forest-theme {
  /* Forest Theme Variables */
  --primary-color: #228B22; /* Forest green */
  --primary-hover-color: #a8e6a3; /* Light green highlight */
  --primary-active-color: #145214; /* Darker green */
  --accent-color: #afc2d4;
  --secondary-color: #8FBC8F; /* Sage green */
  --background-color: #e6f2e6; /* Misty light green */
  --surface-color: #FEFBEA; /* Very light green */
  --text-color: #1b3a1b; /* Deep forest */
  --border-color: #4e944f; /* Mossy green */
  --error-color: #b22222; /* Firebrick */
  --error-hover-color: #7c2323;
  --overdue-color: #b22222;
  --warning-color: #e1b866;
  --success-color: #228B22;
  --success-hover-color: #145214;
  --hover-color: #a8e6a3;
  --active-color: #4e944f;
  --muted-color: #7d927d;
  --terminal-color: #e6f2e6;
  --gray-background-color: #cdeac0;
  --header-color: #145214;
  --border-light-color: #a8e6a3;
  --roadmap-border-color: #228B22;
  --subtext-color: #4e944f;
  --confirmation-color: #228B22;
  --btn-disabled-color: #7d927d;
  --purple-color: #6b8e23; /* Olive drab */
  --purple-hover-color: #b5c99a;
  --focus-shadow: 0 0 0 4px rgba(34, 139, 34, 0.18);
  --shadow-color: rgba(34, 139, 34, 0.13);
  --primary-contrast: #fff;
  --top-left-background-color: #1b3a1b; /* Default for forest theme */
  --container-color: #e6f2e6; /* Misty green for Forest Theme */

  /* Notification Border Colors */
  --notification-border-low: #a8e6a3;
  --notification-border-mid: #b22222;
  --notification-border-high: #6b8e23;
  --notification-border-default: #228B22;

  /* Sidebar and Header Colors */
  --sidebar-background-color: #C2DAB8; /* Forest theme */
  --sidebar-text-color: #1b3a1b; /* Forest theme */
  --sidebar-border-color: #4e944f; /* Forest theme */
  --header-background-color: #C2DAB8; /* Forest theme */
  --header-text-color: #1b3a1b; /* Forest theme */
  --header-border-color: #4e944f; /* Forest theme */
  --welcome-text-color: #000000; /* Black for Forest Theme */
}

body.volcano-theme {
  /* Volcano Theme Variables */
  --primary-color: #e57355; /* Muted lava orange */
  --primary-hover-color: #ffe0b2; /* Soft peach highlight */
  --primary-active-color: #b75d3a; /* Earthy brownish red */
  --accent-color: #afc2d4;
  --secondary-color: #ffb385; /* Soft orange */
  --background-color: #f7ede2; /* Light warm beige */
  --surface-color: #fbeee6; /* Lighter beige */
  --text-color: #4e342e; /* Deep brown */
  --border-color: #e57355; /* Muted orange */
  --error-color: #e57355; /* Muted lava */
  --error-hover-color: #b75d3a;
  --overdue-color: #e57355;
  --warning-color: #ffb385;
  --success-color: #e57355;
  --success-hover-color: #b75d3a;
  --hover-color: #ffe0b2;
  --active-color: #e57355;
  --muted-color: #bfa6a6;
  --terminal-color: #fbeee6;
  --gray-background-color: #f7ede2;
  --header-color: #b75d3a;
  --border-light-color: #ffe0b2;
  --roadmap-border-color: #e57355;
  --subtext-color: #b75d3a;
  --confirmation-color: #e57355;
  --btn-disabled-color: #bfa6a6;
  --purple-color: #a1887f; /* Muted mauve */
  --purple-hover-color: #ffe0b2;
  --focus-shadow: 0 0 0 4px rgba(229, 115, 85, 0.18);
  --shadow-color: rgba(229, 115, 85, 0.13);
  --primary-contrast: #4e342e;
  --top-left-background-color: #e57355; /* Default for volcano theme */
  --container-color: #fbeee6; /* Warm beige for Volcano Theme */

  /* Notification Border Colors */
  --notification-border-low: #ffe0b2;
  --notification-border-mid: #e57355;
  --notification-border-high: #a1887f;
  --notification-border-default: #e57355;

  /* Sidebar and Header Colors */
  --sidebar-background-color: #f7d1b0; /* Muted lava orange */
  --sidebar-text-color: #4e342e; /* Volcano theme */
  --sidebar-border-color: #e57355; /* Volcano theme */
  --header-background-color: #fbe4d5; /* Light warm beige */
  --header-text-color: #4e342e; /* Volcano theme */
  --header-border-color: #e57355; /* Volcano theme */
  --welcome-text-color: #5c4326; /* Brown for Volcano Theme */

}

body.sky-theme {
  /* Sky Theme Variables */
  --primary-color: #00aaff; /* Sky blue */
  --primary-hover-color: #e0f7fa; /* Light blue highlight */
  --primary-active-color: #0077b6; /* Deeper blue */
  --success-color: #27ae60; /* Original green for success */
  --success-hover-color: #218838; /* Original darker green for hover */
  --hover-color: #dff4ff; /* Light sky blue for hover */
  --background-color: #e0f7fa; /* Light sky */
  --surface-color: #ffffff; /* Cloud white */
  --text-color: #00334e; /* Deep blue */
  --border-color: #00aaff; /* Sky blue */
  --error-color: #ff1744; /* Vivid red */
  --error-hover-color: #c82333;
  --overdue-color: #ff1744;
  --warning-color: #ffd166;
  --success-color: #00aaff;
  --success-hover-color: #0077b6;
  --hover-color: #e0f7fa;
  --active-color: #00aaff;
  --muted-color: #b3e0f2;
  --terminal-color: #e0f7fa;
  --gray-background-color: #b3e0f2;
  --header-color: #0077b6;
  --border-light-color: #e0f7fa;
  --roadmap-border-color: #00aaff;
  --subtext-color: #0077b6;
  --confirmation-color: #00aaff;
  --btn-disabled-color: #b3e0f2;
  --purple-color: #6c63ff; /* Sky purple */
  --purple-hover-color: #b3e0f2;
  --focus-shadow: 0 0 0 4px rgba(0, 170, 255, 0.18);
  --shadow-color: rgba(0, 170, 255, 0.13);
  --primary-contrast: #00334e;
  --top-left-background-color: #00aaff; /* Slightly deeper sky blue */
  --container-color: #dff4ff; /* Light sky blue for Sky Theme */

  /* Notification Border Colors */
  --notification-border-low: #e0f7fa;
  --notification-border-mid: #ff1744;
  --notification-border-high: #6c63ff;
  --notification-border-default: #00aaff;

  --sidebar-background-color: #e0f7fa; /* Original light blue */
  --sidebar-text-color: #00334e; /* Deep blue */
  --sidebar-border-color: #00aaff; /* Original sky blue */
  --header-background-color: #b3e0f2; /* Original white */
  --header-text-color: #00334e; /* Deep blue */
  --header-border-color: #00aaff; /* Original sky blue */
  --welcome-text-color: #FFFFFF; /* White for Sky Theme */
}

/*
  All UI elements (questions, theme switch, ticket, class grid, login/register, etc.) should use these variables for color, background, and border for full theme support.
  Example: color: var(--text-color); background: var(--surface-color); border-color: var(--border-color);
*/

/* Example usage:
body {
  background: var(--background-color);
  color: var(--text-color);
}
.button {
  background: var(--primary-color);
  color: var(--surface-color);
}
*/

.button-wrapper:hover {
  --surface-color: var(--text-color);
}

.button-wrapper:active {
  --surface-color: var(--text-color);
}