/* Global theme variables */
:root{
  --bg-info: #e3f2fd;
  --border-info: #90caf9;
  --bg-success: #e8f5e9;
  --border-success: #a5d6a7;
  --bg-warning: #fff8e1;
  --border-warning: #ffe082;
  --text-success: #2e7d32;
  --text-danger: #c62828;
  /* Align admin custom panels with the homepage theme (info tone) */
  --bg-panel: var(--bg-info);
  --border-panel: var(--border-info);
  /* Input colors follow homepage theme */
  --input-bg: var(--bg);
  --input-border: var(--border);
  --input-text: var(--text);
  /* Admin form contrast */
  --field-bg: var(--bg);
  --field-border: #374151; /* darker border for light theme */
  --field-text: var(--text);
}

[data-theme="dark"]{
  --bg-info: #0f2942;
  --border-info: #1e3a8a;
  --bg-success: #0f2e1d;
  --border-success: #1b5e20;
  --bg-warning: #2b2410;
  --border-warning: #d97706;
  --bg-panel: var(--bg-info);
  --border-panel: var(--border-info);
  --input-bg: var(--bg);
  --input-border: var(--border);
  --input-text: var(--text);
  --field-bg: #0f172a;
  --field-border: #cbd5e1;
  --field-text: var(--text);
}

/* Banner styles */
.banner{ padding:10px; margin-bottom:12px; }
.banner-info{ background: var(--bg-info); border:1px solid var(--border-info); }
.banner-success{ background: var(--bg-success); border:1px solid var(--border-success); }
.banner-warning{ background: var(--bg-warning); border:1px solid var(--border-warning); }
.banner-flex{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Text helpers */
.text-success{ color: var(--text-success); }
.text-danger{ color: var(--text-danger); }
.small{ font-size:12px; }

/* Form alignment */
#q-layout .form-row{ width:100%; }
#q-layout .form-row.field-text textarea,
#q-layout .form-row.field-answer_text textarea,
#q-layout .form-row.field-explanation textarea{ width:auto; }

/* Unify text control colors across pages (including admin custom layout) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select{
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
}
select option{
  background: var(--input-bg);
  color: var(--input-text);
}

/* Force admin Exam form selects (subject/subcategory) to follow theme colors */
body.app-exams.model-exam.change-form select,
body.app-exams.model-exam.change-form select option{
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}
body.app-exams.model-exam.change-form #content-main select,
body.app-exams.model-exam.change-form #content-main select option,
body.app-exams.model-exam.change-form .related-widget-wrapper select,
body.app-exams.model-exam.change-form .related-widget-wrapper select option{
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
  border-color: var(--field-border) !important;
}
body.app-exams.model-exam.change-form #content-main .form-row select,
body.app-exams.model-exam.change-form #content-main .form-row select option{
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
  border-color: var(--field-border) !important;
}
body.app-exams.model-exam.change-form #content-main .form-row select:focus{
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent) !important;
}

/* Admin question form: stronger contrast for fields and labels */
#q-layout .form-row label{
  color: var(--field-text);
}
#q-layout input[type="text"],
#q-layout input[type="password"],
#q-layout input[type="email"],
#q-layout input[type="number"],
#q-layout textarea,
#q-layout select{
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
}
#q-layout select option{
  background: var(--field-bg);
  color: var(--field-text);
}
#q-layout input:focus,
#q-layout select:focus,
#q-layout textarea:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

/* Panel container for custom layouts */
.panel{ padding:12px; margin:12px 0; background: var(--bg-panel); border:1px solid var(--border-panel); }