/* ============================================
   iTGid Education Platform - Dark Theme
   ============================================ */

[data-theme="dark"] {
  /* Gray Colors */
  --color-gray: #5b5b5b;
  --color-gray-10: rgb(250.08, 250.08, 250.08);
  --color-gray-25: rgb(246.8, 246.8, 246.8);
  --color-gray-50: rgb(238.6, 238.6, 238.6);
  --color-gray-100: rgb(222.2, 222.2, 222.2);
  --color-gray-200: rgb(189.4, 189.4, 189.4);
  --color-gray-300: rgb(156.6, 156.6, 156.6);
  --color-gray-400: rgb(123.8, 123.8, 123.8);
  --color-gray-500: #5b5b5b;
  --color-gray-600: rgb(72.8, 72.8, 72.8);
  --color-gray-700: rgb(54.6, 54.6, 54.6);
  --color-gray-800: rgb(36.4, 36.4, 36.4);
  --color-gray-900: rgb(18.2, 18.2, 18.2);

  /* Slate Colors */
  --color-slate: #6b7280;
  --color-slate-10: rgb(250.56, 250.77, 251.19);
  --color-slate-25: rgb(247.6, 247.95, 248.65);
  --color-slate-50: rgb(240.2, 240.9, 242.3);
  --color-slate-100: rgb(225.4, 226.8, 229.6);
  --color-slate-200: rgb(195.8, 198.6, 204.2);
  --color-slate-300: rgb(166.2, 170.4, 178.8);
  --color-slate-400: rgb(136.6, 142.2, 153.4);
  --color-slate-500: #6b7280;
  --color-slate-600: rgb(85.6, 91.2, 102.4);
  --color-slate-700: rgb(64.2, 68.4, 76.8);
  --color-slate-800: rgb(42.8, 45.6, 51.2);
  --color-slate-900: rgb(21.4, 22.8, 25.6);

  /* Primary Colors */
  --color-primary: #ffa200;
  --color-primary-10: rgb(255, 252.21, 247.35);
  --color-primary-25: rgb(255, 250.35, 242.25);
  --color-primary-50: rgb(255, 245.7, 229.5);
  --color-primary-100: rgb(255, 236.4, 204);
  --color-primary-200: rgb(255, 217.8, 153);
  --color-primary-300: rgb(255, 199.2, 102);
  --color-primary-400: rgb(255, 180.6, 51);
  --color-primary-500: #ffa200;
  --color-primary-600: rgb(204, 129.6, 0);
  --color-primary-700: rgb(153, 97.2, 0);
  --color-primary-800: rgb(102, 64.8, 0);
  --color-primary-900: rgb(51, 32.4, 0);

  /* Secondary Colors */
  --color-secondary: #FF014D;
  --color-secondary-10: rgb(255, 247.38, 249.66);
  --color-secondary-25: rgb(255, 242.3, 246.1);
  --color-secondary-50: rgb(255, 229.6, 237.2);
  --color-secondary-100: rgb(255, 204.2, 219.4);
  --color-secondary-200: rgb(255, 153.4, 183.8);
  --color-secondary-300: rgb(255, 102.6, 148.2);
  --color-secondary-400: rgb(255, 51.8, 112.6);
  --color-secondary-500: #FF014D;
  --color-secondary-600: rgb(204, 0.8, 61.6);
  --color-secondary-700: rgb(153, 0.6, 46.2);
  --color-secondary-800: rgb(102, 0.4, 30.8);
  --color-secondary-900: rgb(51, 0.2, 15.4);

  /* Info Colors */
  --color-info: #0099cc;
  --color-info-10: rgb(247.35, 251.94, 253.47);
  --color-info-25: rgb(242.25, 249.9, 252.45);
  --color-info-50: rgb(229.5, 244.8, 249.9);
  --color-info-100: rgb(204, 234.6, 244.8);
  --color-info-200: rgb(153, 214.2, 234.6);
  --color-info-300: rgb(102, 193.8, 224.4);
  --color-info-400: rgb(51, 173.4, 214.2);
  --color-info-500: #0099cc;
  --color-info-600: rgb(0, 122.4, 163.2);
  --color-info-700: rgb(0, 91.8, 122.4);
  --color-info-800: rgb(0, 61.2, 81.6);
  --color-info-900: rgb(0, 30.6, 40.8);

  /* Success Colors */
  --color-success: #4CAF50;
  --color-success-10: rgb(249.63, 252.6, 249.75);
  --color-success-25: rgb(246.05, 251, 246.25);
  --color-success-50: rgb(237.1, 247, 237.5);
  --color-success-100: rgb(219.2, 239, 220);
  --color-success-200: rgb(183.4, 223, 185);
  --color-success-300: rgb(147.6, 207, 150);
  --color-success-400: rgb(111.8, 191, 115);
  --color-success-500: #4CAF50;
  --color-success-600: rgb(60.8, 140, 64);
  --color-success-700: rgb(45.6, 105, 48);
  --color-success-800: rgb(30.4, 70, 32);
  --color-success-900: rgb(15.2, 35, 16);

  /* Warning Colors */
  --color-warning: #ffb307;
  --color-warning-10: rgb(255, 252.72, 247.56);
  --color-warning-25: rgb(255, 251.2, 242.6);
  --color-warning-50: rgb(255, 247.4, 230.2);
  --color-warning-100: rgb(255, 239.8, 205.4);
  --color-warning-200: rgb(255, 224.6, 155.8);
  --color-warning-300: rgb(255, 209.4, 106.2);
  --color-warning-400: rgb(255, 194.2, 56.6);
  --color-warning-500: #ffb307;
  --color-warning-600: rgb(204, 143.2, 5.6);
  --color-warning-700: rgb(153, 107.4, 4.2);
  --color-warning-800: rgb(102, 71.6, 2.8);
  --color-warning-900: rgb(51, 35.8, 1.4);

  /* Danger Colors */
  --color-danger: #e44b4b;
  --color-danger-10: rgb(254.19, 249.6, 249.6);
  --color-danger-25: rgb(253.65, 246, 246);
  --color-danger-50: rgb(252.3, 237, 237);
  --color-danger-100: rgb(249.6, 219, 219);
  --color-danger-200: rgb(244.2, 183, 183);
  --color-danger-300: rgb(238.8, 147, 147);
  --color-danger-400: rgb(233.4, 111, 111);
  --color-danger-500: #e44b4b;
  --color-danger-600: rgb(182.4, 60, 60);
  --color-danger-700: rgb(136.8, 45, 45);
  --color-danger-800: rgb(91.2, 30, 30);
  --color-danger-900: rgb(45.6, 15, 15);

  /* Blue Colors */
  --color-blue: #078af3;
  --color-blue-10: rgb(247.56, 251.49, 254.64);
  --color-blue-25: rgb(242.6, 249.15, 254.4);
  --color-blue-50: rgb(230.2, 243.3, 253.8);
  --color-blue-100: rgb(205.4, 231.6, 252.6);
  --color-blue-200: rgb(155.8, 208.2, 250.2);
  --color-blue-300: rgb(106.2, 184.8, 247.8);
  --color-blue-400: rgb(56.6, 161.4, 245.4);
  --color-blue-500: #078af3;
  --color-blue-600: rgb(5.6, 110.4, 194.4);
  --color-blue-700: rgb(4.2, 82.8, 145.8);
  --color-blue-800: rgb(2.8, 55.2, 97.2);
  --color-blue-900: rgb(1.4, 27.6, 48.6);

  /* Indigo Colors */
  --color-indigo: #553cdf;
  --color-indigo-10: rgb(249.9, 249.15, 254.04);
  --color-indigo-25: rgb(246.5, 245.25, 253.4);
  --color-indigo-50: rgb(238, 235.5, 251.8);
  --color-indigo-100: rgb(221, 216, 248.6);
  --color-indigo-200: rgb(187, 177, 242.2);
  --color-indigo-300: rgb(153, 138, 235.8);
  --color-indigo-400: rgb(119, 99, 229.4);
  --color-indigo-500: #553cdf;
  --color-indigo-600: rgb(68, 48, 178.4);
  --color-indigo-700: rgb(51, 36, 133.8);
  --color-indigo-800: rgb(34, 24, 89.2);
  --color-indigo-900: rgb(17, 12, 44.6);

  /* Purple Colors */
  --color-purple: #8921e4;
  --color-purple-10: rgb(251.46, 248.34, 254.19);
  --color-purple-25: rgb(249.1, 243.9, 253.65);
  --color-purple-50: rgb(243.2, 232.8, 252.3);
  --color-purple-100: rgb(231.4, 210.6, 249.6);
  --color-purple-200: rgb(207.8, 166.2, 244.2);
  --color-purple-300: rgb(184.2, 121.8, 238.8);
  --color-purple-400: rgb(160.6, 77.4, 233.4);
  --color-purple-500: #8921e4;
  --color-purple-600: rgb(109.6, 26.4, 182.4);
  --color-purple-700: rgb(82.2, 19.8, 136.8);
  --color-purple-800: rgb(54.8, 13.2, 91.2);
  --color-purple-900: rgb(27.4, 6.6, 45.6);

  /* Teal Colors */
  --color-teal: #06f6c6;
  --color-teal-10: rgb(247.53, 254.73, 253.29);
  --color-teal-25: rgb(242.55, 254.55, 252.15);
  --color-teal-50: rgb(230.1, 254.1, 249.3);
  --color-teal-100: rgb(205.2, 253.2, 243.6);
  --color-teal-200: rgb(155.4, 251.4, 232.2);
  --color-teal-300: rgb(105.6, 249.6, 220.8);
  --color-teal-400: rgb(55.8, 247.8, 209.4);
  --color-teal-500: #06f6c6;
  --color-teal-600: rgb(4.8, 196.8, 158.4);
  --color-teal-700: rgb(3.6, 147.6, 118.8);
  --color-teal-800: rgb(2.4, 98.4, 79.2);
  --color-teal-900: rgb(1.2, 49.2, 39.6);

  /* Cyan Colors */
  --color-cyan: #38e1ff;
  --color-cyan-10: rgb(249.03, 254.1, 255);
  --color-cyan-25: rgb(245.05, 253.5, 255);
  --color-cyan-50: rgb(235.1, 252, 255);
  --color-cyan-100: rgb(215.2, 249, 255);
  --color-cyan-200: rgb(175.4, 243, 255);
  --color-cyan-300: rgb(135.6, 237, 255);
  --color-cyan-400: rgb(95.8, 231, 255);
  --color-cyan-500: #38e1ff;
  --color-cyan-600: rgb(44.8, 180, 204);
  --color-cyan-700: rgb(33.6, 135, 153);
  --color-cyan-800: rgb(22.4, 90, 102);
  --color-cyan-900: rgb(11.2, 45, 51);

  /* Theme mappings */
  --primary-color: var(--color-primary);
  --primary-hover: var(--color-primary-400);
  --primary-light: var(--color-primary-900);
  --primary-dark: var(--color-primary-600);

  --secondary-color: var(--color-secondary);
  --secondary-hover: var(--color-secondary-400);
  --secondary-light: var(--color-secondary-900);

  --accent-success: var(--color-success);
  --accent-success-light: var(--color-success-900);
  --accent-warning: var(--color-warning);
  --accent-warning-light: var(--color-warning-900);
  --accent-danger: var(--color-danger);
  --accent-danger-light: var(--color-danger-900);
  --accent-info: var(--color-info);
  --accent-info-light: var(--color-info-900);

  /* Text Colors - for dark theme use light grays */
  --text-primary: var(--color-gray-100);
  --text-secondary: var(--color-gray-200);
  --text-muted: var(--color-gray-400);
  --text-light: var(--color-gray-50);

  /* Background Colors - for dark theme use dark grays */
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-tertiary: var(--color-gray-700);
  --bg-dark: #000000;
  --bg-dark-secondary: var(--color-gray-900);

  /* Border Colors */
  --border-color: var(--color-gray-600);
  --border-light: var(--color-gray-500);
  --border-focus: var(--color-primary);

  /* Shadows - darker for dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* Bootstrap overrides */
  --bs-link-color: var(--color-primary) !important;
  --bs-link-hover-color: var(--color-primary-400) !important;
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--bg-secondary);
}

/* ============================================
   Dark Theme Specific Overrides
   ============================================ */

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

[data-theme="dark"] main {
  background-color: var(--bg-secondary);
}

/* Navbar */
[data-theme="dark"] .navbar-dark {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%) !important;
}

/* Cards */
[data-theme="dark"] .card {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .card-header {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .card-footer {
  background-color: var(--bg-tertiary);
  border-top-color: var(--border-color);
}

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

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

[data-theme="dark"] .list-group-item.bg-light {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-secondary);
}

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

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

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

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

[data-theme="dark"] .table> :not(caption)>*>* {
  background-color: var(--bg-primary);
  border-bottom-color: var(--border-color);
}

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

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

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

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

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

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

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

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

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

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

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

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

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

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Alerts */
[data-theme="dark"] .alert {
  border-color: var(--border-color);
}

/* Badges */
[data-theme="dark"] .badge.bg-light {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb {
  background-color: var(--bg-primary);
}

[data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before {
  color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--text-muted);
}

/* Hero Section */
[data-theme="dark"] .hero-section {
  background: var(--bg-primary);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: all var(--transition-slow);
  border: 1px solid var(--border-color);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Page Content */
[data-theme="dark"] .page-content {
  color: var(--text-secondary);
}

[data-theme="dark"] .page-content h1,
[data-theme="dark"] .page-content h2,
[data-theme="dark"] .page-content h3,
[data-theme="dark"] .page-content h4,
[data-theme="dark"] .page-content h5,
[data-theme="dark"] .page-content h6 {
  color: var(--text-primary);
}

/* Code blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: var(--bg-dark);
  color: var(--text-secondary);
}

/* Links */
[data-theme="dark"] a {
  color: var(--primary-color);
}

[data-theme="dark"] a:hover {
  color: var(--primary-hover);
}

[data-theme="dark"] a.btn-outline-primary:hover {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

/* Footer */
[data-theme="dark"] footer {
  background-color: var(--bg-dark) !important;
}

/* Text utilities */
[data-theme="dark"] .text-dark {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-body {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-light {
  background-color: var(--bg-secondary) !important;
}

/* Border utilities */
[data-theme="dark"] .border {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-bottom {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top {
  border-top-color: var(--border-color) !important;
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

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

.theme-toggle .bi {
  font-size: 1.25rem;
}

[data-theme="dark"] .theme-toggle .bi-moon-fill {
  display: none;
}

[data-theme="light"] .theme-toggle .bi-sun-fill,
html:not([data-theme="dark"]) .theme-toggle .bi-sun-fill {
  display: none;
}

[data-theme="dark"] .theme-toggle .bi-sun-fill {
  display: inline-block;
}

[data-theme="dark"] .btn.btn-primary {
  color: var(--color-slate-900)
}

[data-theme="dark"] .btn.btn-success.btn-lg {
  color: var(--color-gray-10)
}

[data-theme="dark"] .hero-section h1 {
  color: var(--primary-color);
  background-color: transparent;
}

[data-theme="dark"] .feature-card:hover > p.text-muted{
    color: var(--color-gray-10);
}

[data-theme="dark"] .feature-card p.text-muted:hover{
    color: var(--color-gray-10);
}

[data-theme="dark"] .card .card-text {
    color: var(--color-gray-400);
}

[data-theme="dark"] .card:hover .card-text {
    color: var(--color-gray-100);
}

[data-theme="dark"] .faq-item {
    border: 1px solid var(--color-slate-500);
    border-radius: 4px;
    margin-bottom: 10px;
    background: none;
}

[data-theme="dark"] .faq-item summary {
    color: var(--color-primary)
}

[data-theme="dark"] .faq-content {
    color: var(--text-secondary);
}

[data-theme="dark"] .languages-klisl .language {
  margin-right:.5rem;
}

[data-theme="dark"] .languages-klisl .language.active {
    background-color: var(--bg-primary);
    text-decoration: none;
    color: var(--text-primary);
} 

[data-theme="dark"] .footer-main {
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-secondary) 100%) !important;
}