/* Theme CSS Variables for Light/Dark Mode Support
 * This file defines CSS custom properties that enable theme switching
 * Default: Dark Mode (backwards compatible)
 */

/* ===================================================================
   DEFAULT THEME: DARK MODE (Current)
   =================================================================== */
:root {
  /* Background Colors */
  --bg-primary: rgb(0, 0, 0);           /* Main background (body) */
  --bg-secondary: #1a1a1a;              /* Secondary backgrounds */
  --bg-tertiary: #2a2a2a;               /* Tertiary backgrounds */
  --bg-popup: #ffffff;                  /* Popup/modal backgrounds */
  --bg-choice: #ffffff;                 /* Quiz choice backgrounds */
  --bg-table-header: #333333;           /* Table header backgrounds */
  --bg-table-row-even: #444444;         /* Table even row backgrounds */
  --bg-card: #1a1a1a;                   /* Card backgrounds */
  --bg-input: #2a2a2a;                  /* Input field backgrounds (dark in dark mode) */
  --text-input: #e0e0e0;                /* Input text color */
  --text-placeholder: #888888;          /* Placeholder text color */
  --bg-answer-user: #1a3a5a;            /* User selected answer background (blue tint) */
  --bg-answer-correct: #1a3a2a;         /* Correct answer background (green tint) */
  --bg-answer-incorrect: #3a1a1a;       /* Incorrect answer background (red tint) */
  --bg-hover: rgba(255, 255, 255, 0.15); /* Table/list row hover */
  --hover-bg: #4a4a4a;                  /* Dropdown/menu item hover - noticeably lighter */

  /* Text Colors */
  --text-primary: #ececec;              /* Primary text color */
  --text-secondary: #f9f8fc;            /* Secondary text (headings) */
  --text-inverse: #000000;              /* Inverse text (on white bg) */
  --text-label: #fd9814;                /* Label/accent text */
  --text-muted: #aaaaaa;                /* Muted/disabled text */
  --text-link: #fd9814;                 /* Link text - matches brand/accent color */
  --choice-text: #000000;               /* Quiz choice text - always black */

  /* Border Colors */
  --border-primary: #333333;            /* Primary borders */
  --border-secondary: #555555;          /* Secondary borders */
  --border-tertiary: #cccccc;           /* Tertiary borders */
  --border-input: #ffffff;              /* Input borders */
  --border-dark: #000000;               /* Dark borders */

  /* Chart Colors (same in both modes) */
  --chart-red: #ff0000;
  --chart-orange: #ffa500;
  --chart-green: #00ff00;
  --chart-grey: #808080;
  --chart-text: #ffffff;                /* Chart text color (dynamic) */
  --chart-legend: #ffffff;              /* Chart legend color (dynamic) */

  /* Button Colors */
  --btn-primary: #fd9814;               /* Primary button background */
  --btn-primary-hover: #e68a00;         /* Primary button hover */
  --btn-text: #000000;                  /* Button text */
  --btn-hover: #ffffff;                 /* Button hover background - white for dark mode */
  --btn-border: #000000;                /* Button border (dark mode = black) */
  --btn-secondary: #555555;             /* Secondary button background */
  --btn-secondary-hover: #777777;       /* Secondary button hover */
  --btn-danger-bg: #dc3545;             /* Danger button background */
  --btn-danger-text: #ffffff;           /* Danger button text */
  --btn-danger-hover: #c82333;          /* Danger button hover */
  --btn-danger-border: #dc3545;         /* Danger button border */
  --btn-cancel-bg: #6c757d;             /* Cancel button background */
  --btn-cancel-hover: #5a6268;          /* Cancel button hover */
  --btn-cancel-text: #ffffff;           /* Cancel button text */
  --btn-cancel-border: #6c757d;         /* Cancel button border */

  /* Status Colors (same in both modes) */
  --status-correct: green;
  --status-incorrect: red;
  --status-skipped: grey;
  --status-current: orange;
  --status-answered: #0362C1;
  --status-not-asked: #000000;

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.274);
  --shadow-medium: rgba(0, 0, 0, 0.5);
  --shadow-dark: rgba(0, 0, 0, 0.8);
}

/* ===================================================================
   LIGHT MODE OVERRIDES
   =================================================================== */
body.light-mode {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e0e0e0;
  --bg-popup: #ffffff;
  --bg-choice: #f9f9f9;
  --bg-table-header: #e0e0e0;
  --bg-table-row-even: #f5f5f5;
  --bg-card: #f9f9f9;
  --bg-input: #ffffff;                  /* Input field backgrounds (white in light mode) */
  --text-input: #333333;                /* Input text color */
  --text-placeholder: #999999;          /* Placeholder text color */
  --bg-answer-user: #cce5ff;            /* User selected answer background (light blue) */
  --bg-answer-correct: #d4edda;         /* Correct answer background (light green) */
  --bg-answer-incorrect: #f8d7da;       /* Incorrect answer background (light red) */
  --bg-hover: rgba(0, 0, 0, 0.1);       /* Table/list row hover */
  --hover-bg: #c0c0c0;                  /* Dropdown/menu item hover - noticeably darker */

  /* Text Colors */
  --text-primary: #000000;
  --text-secondary: #1a1a1a;
  --text-inverse: #ffffff;
  --text-label: #000000;
  --text-muted: #666666;
  --text-link: #c77700;                 /* Link text - darker orange for readability on white */
  --choice-text: #000000;               /* Quiz choice text - always black */

  /* Border Colors */
  --border-primary: #cccccc;
  --border-secondary: #666666;
  --border-tertiary: #999999;
  --border-input: #cccccc;
  --border-dark: #000000;

  /* Chart Colors (text changes for light mode) */
  --chart-text: #000000;
  --chart-legend: #000000;

  /* Button hover (light gray for light mode) */
  --btn-hover: #d3d3d3;

  /* Cancel button colors (same in light mode, can be customized) */
  --btn-cancel-bg: #6c757d;
  --btn-cancel-hover: #5a6268;
  --btn-cancel-text: #ffffff;
  --btn-cancel-border: #6c757d;
  --btn-danger-border: #dc3545;

  /* Shadows (lighter for light mode) */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.2);
  --shadow-dark: rgba(0, 0, 0, 0.3);
}

/* ===================================================================
   APPLY THEME COLORS TO ELEMENTS
   =================================================================== */

/* Root and Body */
:root {
  background-color: var(--bg-primary);
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-secondary);
}

/* Links */
a {
  color: var(--text-link);
}

/* Grid Items */
.grid-item {
  border-color: var(--border-primary);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.grid-item.not-asked {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
}

/* Popups */
.popup {
  background-color: var(--bg-popup);
  border-color: var(--border-secondary);
}

.popup h2,
.popup p,
.popup .text {
  color: #000000 !important;
}

.popup strong,
.popup .label {
  color: var(--text-link) !important;
}

/* Tables */
table th {
  background-color: var(--bg-table-header);
  color: var(--text-primary);
}

table tr:nth-child(even) {
  background-color: var(--bg-table-row-even);
}

.report-table th {
  background-color: var(--bg-table-header);
  color: var(--text-primary);
}

.report-table tr:nth-child(even) {
  background-color: var(--bg-table-row-even);
}

/* Info Sections */
.info-section {
  background-color: var(--bg-secondary);
  border-color: var(--border-tertiary);
}

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

/* Choice Containers */
.choice-container {
  background-color: var(--bg-choice);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

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

/* Matching Questions */
.upper-pane,
.lower-pane {
  background-color: var(--bg-choice);
  border-color: var(--border-secondary);
}

.prompt-slot {
  background-color: var(--bg-choice);
}

.prompt-text {
  color: var(--text-primary);
}

/* Smooth Transitions */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.grid-item,
.popup,
.choice-container,
.info-section,
.info-item {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===================================================================
   GLOBAL BUTTON MINIMUM FONT SIZE
   Ensures all buttons remain readable across all pages
   =================================================================== */
button,
input[type="button"],
input[type="submit"],
.btn,
[class*="btn-"] {
  font-size: max(16px, 1em) !important;
}

/* ===================================================================
   CANCEL BUTTON STYLES
   Neutral button for cancel/dismiss actions
   =================================================================== */
.btn-cancel {
  background-color: var(--btn-cancel-bg) !important;
  color: var(--btn-cancel-text) !important;
  border: 2px solid var(--btn-cancel-border) !important;
}

.btn-cancel:hover {
  background-color: var(--btn-cancel-hover) !important;
  color: var(--btn-cancel-text) !important;
}

/* ===================================================================
   PRIMARY BUTTON STYLES
   Main action button (green) for submit/confirm/save actions
   =================================================================== */
.btn-primary {
  background-color: var(--btn-primary) !important;
  color: var(--btn-text) !important;
  border: 2px solid var(--btn-border) !important;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
  color: var(--btn-text) !important;
}

/* ===================================================================
   DANGER BUTTON STYLES
   Destructive actions (red) for delete/remove/cancel actions
   =================================================================== */
.btn-danger {
  background-color: var(--btn-danger-bg) !important;
  color: var(--btn-danger-text) !important;
  border: 2px solid var(--btn-danger-border) !important;
}

.btn-danger:hover {
  background-color: var(--btn-danger-hover) !important;
  color: var(--btn-danger-text) !important;
}

/* Package/SCORM styling is handled by course-generator.js CSS - no overrides needed here */

/* ===================================================================
   GLOBAL INPUT/SELECT STYLES
   Form input styling with proper theme support
   =================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: var(--bg-input) !important;
  color: var(--text-input) !important;
  border: 2px solid var(--border-primary) !important;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 1rem;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--btn-primary) !important;
  box-shadow: 0 0 0 2px rgba(253, 152, 20, 0.25);
}

/* Placeholder text styling */
input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder) !important;
  opacity: 1;
}

/* Flatpickr alt input styling */
input.flatpickr-input,
input.flatpickr-input + input {
  background-color: var(--bg-input) !important;
  color: var(--text-input) !important;
  border: 2px solid var(--border-primary) !important;
}

/* ===================================================================
   GLOBAL FOOTER STYLES
   Footer that appears at the bottom of all pages when enabled
   =================================================================== */
.global-footer {
  width: 100%;
  padding: 0;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-top: 1px solid var(--text-label);
  margin-top: 20px; /* Space above footer */
}

.global-footer a {
  color: var(--text-label);
  text-decoration: none;
}

.global-footer a:hover {
  text-decoration: underline;
}

.global-footer p {
  margin: 0;
}

.global-footer img {
  max-width: 100%;
  height: auto;
  /* Prevent % width images from shrinking too small on mobile */
  /* Images with % width will have a minimum based on their type */
}

/* Responsive footer sizing */
@media (max-width: 768px) {
  .global-footer {
    /* Scale down text on mobile */
    font-size: 14px;
  }
  .global-footer img {
    /* Set minimum width for small app store buttons */
    min-width: 80px;
  }
  /* Social icons should stay at their px size */
  .global-footer img[style*="24px"] {
    min-width: 24px;
    width: 24px !important;
  }
}

@media (max-width: 480px) {
  .global-footer {
    /* Even smaller text on very small screens */
    font-size: 12px;
  }
  .global-footer img {
    min-width: 60px;
  }
}

.global-footer .ql-align-center {
  text-align: center;
}

.global-footer .ql-align-right {
  text-align: right;
}

.global-footer .ql-align-left {
  text-align: left;
}

/* Footer positioning - DO NOT set body flex-direction here as it breaks sidebar layouts */
/* Pages with sidebars (course-quiz, dropbox-submit, etc.) use flex-direction: row */
/* The footer will naturally appear after all content */

/* Print styles - optionally hide footer when printing */
@media print {
  .global-footer {
    border-top: 1px solid #ccc;
    background-color: #fff;
    color: #000;
  }
  .global-footer a {
    color: #000;
  }
}

/* ============================================================
   QUILL CONTENT STYLES (Global - for rendered pages outside editor)
   These classes are applied by Quill but need to work without .ql-editor parent
   ============================================================ */

/* Alignment - works on paragraphs and other block elements */
.ql-align-center { text-align: center !important; }
.ql-align-right { text-align: right !important; }
.ql-align-justify { text-align: justify !important; }
.ql-align-left { text-align: left !important; }

/* Media alignment - center/right aligned images, videos, iframes */
img.ql-align-center,
video.ql-align-center,
iframe.ql-align-center {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

img.ql-align-right,
video.ql-align-right,
iframe.ql-align-right {
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

img.ql-align-left,
video.ql-align-left,
iframe.ql-align-left {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* =========================================================================
   CUSTOM LIST MARKER SYSTEM FOR RENDERED PAGES

   Uses ::before pseudo-element with MARGIN-LEFT for indentation (not padding).
   This keeps the marker properly positioned relative to text at all indent levels.
   Custom counter system (render-list-N).
   ========================================================================= */

/* Base list styles - NO padding, use margin for indentation */
ol, ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 0.5em 1.8em !important;
    counter-reset: render-list-0 render-list-1 render-list-2 render-list-3 render-list-4 render-list-5 render-list-6 render-list-7 render-list-8 !important;
}

/* Reset counters after headings/paragraphs */
p, h1, h2, h3, h4, h5, h6 {
    counter-reset: render-list-0 render-list-1 render-list-2 render-list-3 render-list-4 render-list-5 render-list-6 render-list-7 render-list-8 !important;
}

/* All list items - use margin-left for indentation, NOT padding */
li {
    position: relative !important;
    list-style-type: none !important;
    line-height: 1.6 !important;
    padding-left: 0 !important;
}

/* Hide ALL existing markers - .ql-ui spans AND any ::before from Quill */
li > .ql-ui,
li > span.ql-ui,
[data-list] > .ql-ui,
[data-list] > span.ql-ui {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Don't hide our ::before - only hide if it's from Quill's default system */
/* We use ::before for our markers now */

/* INDENTATION via margin-left (marker follows the text!) */
li.ql-indent-1 { margin-left: 1.5em !important; }
li.ql-indent-2 { margin-left: 3em !important; }
li.ql-indent-3 { margin-left: 4.5em !important; }
li.ql-indent-4 { margin-left: 6em !important; }
li.ql-indent-5 { margin-left: 7.5em !important; }
li.ql-indent-6 { margin-left: 9em !important; }
li.ql-indent-7 { margin-left: 10.5em !important; }
li.ql-indent-8 { margin-left: 12em !important; }

/* Indent classes for non-list elements - these use padding */
.ql-indent-1:not(li) { padding-left: 3em !important; }
.ql-indent-2:not(li) { padding-left: 6em !important; }
.ql-indent-3:not(li) { padding-left: 9em !important; }
.ql-indent-4:not(li) { padding-left: 12em !important; }
.ql-indent-5:not(li) { padding-left: 15em !important; }
.ql-indent-6:not(li) { padding-left: 18em !important; }
.ql-indent-7:not(li) { padding-left: 21em !important; }
.ql-indent-8:not(li) { padding-left: 24em !important; }

/* CUSTOM MARKERS via ::before - properly positioned relative to text */
li[data-list]::before {
    position: absolute !important;
    left: -1.5em !important;
    top: 0 !important;
    width: 1.3em !important;
    text-align: right !important;
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* BULLET LISTS - different symbols per indent level */
li[data-list="bullet"]::before { content: "\2022" !important; }
li[data-list="bullet"].ql-indent-1::before { content: "\25E6" !important; }
li[data-list="bullet"].ql-indent-2::before { content: "\25AA" !important; }
li[data-list="bullet"].ql-indent-3::before { content: "\2022" !important; }
li[data-list="bullet"].ql-indent-4::before { content: "\25E6" !important; }
li[data-list="bullet"].ql-indent-5::before { content: "\25AA" !important; }
li[data-list="bullet"].ql-indent-6::before { content: "\2022" !important; }
li[data-list="bullet"].ql-indent-7::before { content: "\25E6" !important; }
li[data-list="bullet"].ql-indent-8::before { content: "\25AA" !important; }

/* ORDERED LISTS - counter increment and marker display */
li[data-list="ordered"] {
    counter-increment: render-list-0 !important;
    counter-reset: render-list-1 render-list-2 render-list-3 render-list-4 render-list-5 render-list-6 render-list-7 render-list-8 !important;
}
li[data-list="ordered"]::before { content: counter(render-list-0) "." !important; }

li[data-list="ordered"].ql-indent-1 {
    counter-increment: render-list-1 !important;
    counter-reset: render-list-2 render-list-3 render-list-4 render-list-5 render-list-6 render-list-7 render-list-8 !important;
}
li[data-list="ordered"].ql-indent-1::before { content: counter(render-list-1, lower-alpha) "." !important; }

li[data-list="ordered"].ql-indent-2 {
    counter-increment: render-list-2 !important;
    counter-reset: render-list-3 render-list-4 render-list-5 render-list-6 render-list-7 render-list-8 !important;
}
li[data-list="ordered"].ql-indent-2::before { content: counter(render-list-2, lower-roman) "." !important; }

li[data-list="ordered"].ql-indent-3 {
    counter-increment: render-list-3 !important;
    counter-reset: render-list-4 render-list-5 render-list-6 render-list-7 render-list-8 !important;
}
li[data-list="ordered"].ql-indent-3::before { content: counter(render-list-3) ")" !important; }

li[data-list="ordered"].ql-indent-4 {
    counter-increment: render-list-4 !important;
    counter-reset: render-list-5 render-list-6 render-list-7 render-list-8 !important;
}
li[data-list="ordered"].ql-indent-4::before { content: counter(render-list-4, lower-alpha) ")" !important; }

li[data-list="ordered"].ql-indent-5 {
    counter-increment: render-list-5 !important;
    counter-reset: render-list-6 render-list-7 render-list-8 !important;
}
li[data-list="ordered"].ql-indent-5::before { content: counter(render-list-5, lower-roman) ")" !important; }

li[data-list="ordered"].ql-indent-6 {
    counter-increment: render-list-6 !important;
    counter-reset: render-list-7 render-list-8 !important;
}
li[data-list="ordered"].ql-indent-6::before { content: counter(render-list-6) "." !important; }

li[data-list="ordered"].ql-indent-7 {
    counter-increment: render-list-7 !important;
    counter-reset: render-list-8 !important;
}
li[data-list="ordered"].ql-indent-7::before { content: counter(render-list-7, lower-alpha) "." !important; }

li[data-list="ordered"].ql-indent-8 {
    counter-increment: render-list-8 !important;
}
li[data-list="ordered"].ql-indent-8::before { content: counter(render-list-8, lower-roman) "." !important; }

/* CHECKLIST */
li[data-list="checked"]::before { content: "\2611" !important; color: var(--btn-primary, #28a745) !important; }
li[data-list="unchecked"]::before { content: "\2610" !important; }

/* Font families from Quill */
.ql-font-arial { font-family: Arial, sans-serif !important; }
.ql-font-helvetica { font-family: Helvetica, sans-serif !important; }
.ql-font-verdana { font-family: Verdana, sans-serif !important; }
.ql-font-tahoma { font-family: Tahoma, sans-serif !important; }
.ql-font-trebuchet-ms { font-family: 'Trebuchet MS', sans-serif !important; }
.ql-font-roboto { font-family: Roboto, sans-serif !important; }
.ql-font-georgia { font-family: Georgia, serif !important; }
.ql-font-times-new-roman { font-family: 'Times New Roman', serif !important; }
.ql-font-palatino { font-family: 'Palatino Linotype', serif !important; }
.ql-font-garamond { font-family: Garamond, serif !important; }
.ql-font-courier-new { font-family: 'Courier New', monospace !important; }
.ql-font-consolas { font-family: Consolas, monospace !important; }
.ql-font-comic-sans { font-family: 'Comic Sans MS', cursive !important; }
.ql-font-impact { font-family: Impact, sans-serif !important; }

/* Font sizes from Quill */
.ql-size-10px { font-size: 10px !important; }
.ql-size-12px { font-size: 12px !important; }
.ql-size-14px { font-size: 14px !important; }
.ql-size-16px { font-size: 16px !important; }
.ql-size-18px { font-size: 18px !important; }
.ql-size-20px { font-size: 20px !important; }
.ql-size-24px { font-size: 24px !important; }
.ql-size-28px { font-size: 28px !important; }
.ql-size-32px { font-size: 32px !important; }
.ql-size-36px { font-size: 36px !important; }
.ql-size-42px { font-size: 42px !important; }
.ql-size-48px { font-size: 48px !important; }
.ql-size-56px { font-size: 56px !important; }
.ql-size-64px { font-size: 64px !important; }
.ql-size-72px { font-size: 72px !important; }