/* Custom colour scheme overriding Bootstrap defaults */

/* Import shadow system */
@import url("shadows.2216235621bb.css");

/* CSS Custom Properties (Variables) for consistent color usage */
:root {
  /* Primary Colors */
  --color-primary: #357eeb;
  --color-primary-hover: #119bce;
  --bs-primary-rgb: 53, 126, 235;   /* Override Bootstrap primary to match --color-primary */
  --color-primary-light: #e7f1ff;
  
  /* Status Colors */
  --color-success: #198754;
  --color-success-hover: #157347;
  --color-success-light: #d1e7dd;     /* Light green background */
  --color-success-dark: #0f5132;      /* Dark green text */
  --color-warning: #ffc107;
  --color-warning-hover: #e0a800;
  --color-warning-light: #fff3cd;     /* Light yellow background */
  --color-warning-dark: #664d03;      /* Dark yellow/brown text */
  --color-danger: #df5f46;
  --color-danger-hover: #a34836;
  --bs-danger-rgb: 223, 95, 70;      /* Override Bootstrap danger to match --color-danger */
  --color-info: #0dcaf0;              /* Info/cyan color */
  --color-purple: #6f42c1;            /* Purple accent color */
  
  /* Neutral Colors */
  --color-secondary: #6c757d;
  --color-secondary-hover: #5a6268;
  --color-light: #f8f9fa;
  --color-light-hover: #e9ecef;
  
  /* Text Colors */
  --color-text: #212529;              /* Primary dark text */
  --color-text-secondary: #495057;    /* Secondary text */
  --color-text-dark: #333;            /* Dark text alternative */
  --color-text-medium: #555;          /* Medium dark text */
  --color-text-gray: #666;            /* Medium gray text */
  --color-text-light: #adb5bd;        /* Light gray text */
  --color-text-white: #fff;           /* White text */
  --color-muted: #6c757d;             /* Muted text (alias for secondary) */
  
  /* Special Text Colors */
  --color-text-primary: #212529;      /* Primary text (alias for --color-text) */
  --color-text-error: #df5f46;        /* Red error text — matches --color-danger */
  --color-text-info: #2980b9;         /* Blue info text */
  --color-text-on-primary: #fff;      /* Text on primary color backgrounds */
  
  /* JSON Syntax Colors */
  --color-json-string: #008800;       /* Green for JSON strings */
  --color-json-number: #aa0000;       /* Red for JSON numbers */
  --color-json-boolean: #aa00aa;      /* Purple for JSON booleans */
  --color-json-null: #808080;         /* Gray for JSON null */
  --color-json-key: #0066cc;          /* Blue for JSON keys */
  
  /* Background Colors */
  --bg-white: #fff;
  --bg-light: #f8f9fa;  /* Standard light background */
  --bg-lighter: #f5f5f5; /* Slightly darker light background */
  --bg-gray-100: #f8f9fa; /* Alias for bg-light */
  --bg-gray-200: #e9ecef; /* Medium light background */
  --bg-gray-300: #dee2e6; /* Medium background */
  
  /* Special Background Colors */
  --bg-canvas: #f8f8f8; /* Canvas/diagram backgrounds */
  --bg-code: #f1f1f1;   /* Code blocks and technical content */
  --bg-info-light: #f0f7fb; /* Light blue informational background */
  --bg-success-light: #e3f8e3; /* Light green success background */
  --bg-warning-light: #fffbf5; /* Light yellow warning background */
  --bg-danger-light: #f8d7da;  /* Light red danger background */
  
  /* Border Colors */
  --color-border: #dee2e6;        /* Standard border color */
  --color-border-light: #e9ecef;  /* Light border color */
  --color-border-lighter: #eee;   /* Very light border color */
  --color-border-medium: #ddd;    /* Medium light border color */
  --color-border-dark: #ccc;      /* Darker border color */
  --color-input-border: #ced4da;  /* Input field borders */
  --color-focus-border: #80bdff;  /* Focus/active state borders */
  
  /* Status Border Colors */
  --color-info-border: #3498db;              /* Info blue border */
  --color-danger-border-hover: #a34836;      /* Danger hover border — matches --color-danger-hover */
  --color-warning-border-hover: #d39e00;     /* Warning hover border */
  
  /* SVG/Stroke Colors */
  --color-stroke-default: #666;              /* Default SVG stroke color */
  --color-stroke-positive: #198754;          /* Positive arrow stroke (use success) */
  --color-stroke-negative: #df5f46;          /* Negative arrow stroke (use danger) */
  
  /* Gradient Colors */
  --color-teal-light: #20c997;               /* Teal for gradients */
  --color-primary-dark: #0056b3;             /* Dark primary for gradients */
  
  /* Surface Colors */
  --color-white: #fff;                         /* White surface — cards, modals, tab backgrounds */

  /* Legacy aliases for backward compatibility */
  --color-bg-light: #f8f9fa; /* Alias for content_questions compatibility */
}

/* ===================================================
   DARK MODE VARIABLE OVERRIDES
   ===================================================
   Bootstrap 5.3 data-bs-theme attribute drives dark mode.
   All variables from :root are overridden here for dark backgrounds.
*/
[data-bs-theme="dark"] {
  /* Primary Colors */
  --color-primary: #5a9cf5;
  --color-primary-hover: #3db8e8;
  --bs-primary-rgb: 90, 156, 245;  /* Override Bootstrap primary to match --color-primary */
  --color-primary-light: #1a2d44;

  /* Status Colors */
  --color-success: #2da860;
  --color-success-hover: #258f52;
  --color-success-light: #1a3a2a;
  --color-success-dark: #5ec48a;
  --color-warning: #f1c40f;
  --color-warning-hover: #d4ac0d;
  --color-warning-light: #3a3520;
  --color-warning-dark: #f5d657;
  --color-danger: #e8705a;
  --color-danger-hover: #c0513e;
  --bs-danger-rgb: 232, 112, 90;    /* Override Bootstrap danger to match --color-danger */
  --color-info: #3dd8f5;
  --color-purple: #9b7ad8;

  /* Neutral Colors */
  --color-secondary: #8b949e;
  --color-secondary-hover: #9ca5af;
  --color-light: #21262d;
  --color-light-hover: #30363d;

  /* Text Colors */
  --color-text: #e6edf3;
  --color-text-secondary: #9ca5af;
  --color-text-dark: #cdd6e0;
  --color-text-medium: #b0b8c1;
  --color-text-gray: #8b949e;
  --color-text-light: #6e7681;
  --color-text-white: #fff;
  --color-muted: #8b949e;

  /* Special Text Colors */
  --color-text-primary: #e6edf3;
  --color-text-error: #e8705a;      /* Matches --color-danger in dark mode */
  --color-text-info: #58a6ff;
  --color-text-on-primary: #fff;

  /* JSON Syntax Colors */
  --color-json-string: #56d364;
  --color-json-number: #f47067;
  --color-json-boolean: #d2a8ff;
  --color-json-null: #8b949e;
  --color-json-key: #79c0ff;

  /* Background Colors */
  --bg-white: #0d1117;
  --bg-light: #161b22;
  --bg-lighter: #1c2128;
  --bg-gray-100: #161b22;
  --bg-gray-200: #21262d;
  --bg-gray-300: #30363d;

  /* Special Background Colors */
  --bg-canvas: #1c2128;
  --bg-code: #161b22;
  --bg-info-light: #12233a;
  --bg-success-light: #122d1f;
  --bg-warning-light: #2d2a14;
  --bg-danger-light: #3d1a1f;

  /* Border Colors */
  --color-border: #30363d;
  --color-border-light: #21262d;
  --color-border-lighter: #1c2128;
  --color-border-medium: #3d4349;
  --color-border-dark: #484f58;
  --color-input-border: #3d4349;
  --color-focus-border: #388bfd;

  /* Status Border Colors */
  --color-info-border: #58a6ff;
  --color-danger-border-hover: #c0513e;  /* Matches --color-danger-hover in dark */
  --color-warning-border-hover: #d29922;

  /* SVG/Stroke Colors */
  --color-stroke-default: #8b949e;
  --color-stroke-positive: #2da860;
  --color-stroke-negative: #e8705a;

  /* Gradient Colors */
  --color-teal-light: #3fb68b;
  --color-primary-dark: #388bfd;

  /* Surface Colors */
  --color-white: #161b22;

  /* Legacy aliases */
  --color-bg-light: #161b22;
}

/* Dark mode overrides for Bootstrap components that use hardcoded colors */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  color: var(--color-text);
  background-color: var(--bg-gray-200);
  border-color: var(--color-input-border);
}

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

/* Dark mode body and page background */
[data-bs-theme="dark"] body {
  background-color: var(--bg-white);
  color: var(--color-text);
}

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

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

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

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

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

[data-bs-theme="dark"] .btn-outline-danger:hover {
  color: var(--color-text-white);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Dark mode btn-light override */
[data-bs-theme="dark"] .btn-light {
  color: var(--color-text);
  background-color: var(--bg-gray-300);
  border-color: var(--color-border-dark);
}

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

/* Dark mode table overrides */
[data-bs-theme="dark"] .table {
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--bg-gray-200);
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-border);
}

/* Dark mode alert overrides */
[data-bs-theme="dark"] .alert-info {
  background-color: var(--bg-info-light);
  color: var(--color-text-info);
  border-color: var(--color-info-border);
}

[data-bs-theme="dark"] .alert-danger {
  background-color: var(--bg-danger-light);
  color: var(--color-text-error);
  border-color: var(--color-danger);
}

/* Dark mode sidebar border */
[data-bs-theme="dark"] .sidebar {
  border-right: 1px solid var(--color-border);
}

/* Dark mode Bootstrap utility overrides */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--bg-light) !important;
}

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

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

/* Dark mode CKEditor 5 overrides */
[data-bs-theme="dark"] .ck.ck-editor__main>.ck-editor__editable {
  background-color: var(--bg-gray-200);
  color: var(--color-text);
}

[data-bs-theme="dark"] .ck.ck-toolbar {
  background-color: var(--bg-gray-300);
  border-color: var(--color-border);
}

[data-bs-theme="dark"] .ck.ck-editor__top .ck-sticky-panel__content {
  border-color: var(--color-border);
}

[data-bs-theme="dark"] .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
  border-color: var(--color-focus-border);
}

[data-bs-theme="dark"] .ck.ck-button:not(.ck-disabled):hover,
[data-bs-theme="dark"] .ck.ck-button.ck-on {
  background-color: var(--color-border-dark);
}

[data-bs-theme="dark"] .ck.ck-icon,
[data-bs-theme="dark"] .ck.ck-button {
  color: var(--color-text);
}

[data-bs-theme="dark"] .ck.ck-editor__editable.ck-blurred {
  border-color: var(--color-border);
}

[data-bs-theme="dark"] .ck.ck-dropdown__panel {
  background-color: var(--bg-gray-200);
  border-color: var(--color-border);
}

/* Button colors */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover, 
.btn-secondary:focus, 
.btn-secondary:active {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger:hover, 
.btn-danger:focus, 
.btn-danger:active {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--color-text-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-info {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* Background utility classes */
.bg-canvas {
  background-color: var(--bg-canvas);
}

.bg-code {
  background-color: var(--bg-code);
}

.bg-info-light {
  background-color: var(--bg-info-light);
}

.bg-success-light {
  background-color: var(--bg-success-light);
}

.bg-warning-light {
  background-color: var(--bg-warning-light);
}

.bg-danger-light {
  background-color: var(--bg-danger-light);
}

/* Warning backgrounds always need dark text for legibility */
.bg-warning,
[data-bs-theme="dark"] .bg-warning {
  color: #212529 !important;
}

/* Border utility classes */
.border-status-primary {
  border-color: var(--color-primary);
}

/* Text utility classes */
.text-muted {
  color: var(--color-muted);
}

.text-dark {
  color: var(--color-text-dark);
}

.text-white {
  color: var(--color-text-white);
}

.text-error {
  color: var(--color-text-error);
}