/*
 * Dark theme for Fire.
 *
 * Bootstrap 2 and the Less in assets/app/styles hardcode their colours, so the
 * dark theme is a set of overrides rather than a second compiled stylesheet.
 * Every rule is scoped under [data-theme="dark"], which fire/static/js/theme.js
 * sets on <html>; the extra attribute selector is what lets these rules beat
 * the identical Bootstrap selectors in styles.css. Rules that override an
 * !important in styles.css need !important too. Bare element rules use
 * :where() so they don't gain that extra weight and beat classed rules such
 * as `.btn-primary` or `.alert h4`.
 *
 * This file is not built by brunch: edit it directly.
 */

html[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: var(--dark-border-strong) var(--dark-surface);

  --dark-bg: #1d1f21;
  --dark-surface: #25272a;      /* wells, header, striped rows */
  --dark-raised: #2d3034;       /* inputs, buttons, menus, modals */
  --dark-hover: #363a3f;
  --dark-border: #3b3e43;
  --dark-border-strong: #4b4f55;
  --dark-text: #d5d7da;
  --dark-heading: #eceef0;
  --dark-muted: #8b9096;
  --dark-link: #5aaee6;
  --dark-link-hover: #8cc8f0;

  --dark-info: #6cbde8;
  --dark-info-bg: #1b2f3d;
  --dark-info-border: #26465b;
  --dark-success: #7ccf8b;
  --dark-success-bg: #1d3323;
  --dark-success-border: #2b4d33;
  --dark-warning: #e0b15e;
  --dark-warning-bg: #372f1c;
  --dark-warning-border: #57472a;
  --dark-error: #f08783;
  --dark-error-bg: #3c2123;
  --dark-error-border: #5d3134;
}

/* Base typography */

:where([data-theme="dark"]) body {
  color: var(--dark-text);
  background-color: var(--dark-bg);
}
:where([data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6, legend) {
  color: var(--dark-heading);
}
:where([data-theme="dark"]) a {
  color: var(--dark-link);
}
:where([data-theme="dark"]) a:hover,
:where([data-theme="dark"]) a:focus {
  color: var(--dark-link-hover);
}
:where([data-theme="dark"]) hr {
  border-top-color: var(--dark-border);
  border-bottom-color: transparent;
}
:where([data-theme="dark"]) legend,
[data-theme="dark"] .page-header {
  border-bottom-color: var(--dark-border);
}
:where([data-theme="dark"]) blockquote {
  border-left-color: var(--dark-border-strong);
}
[data-theme="dark"] .muted,
[data-theme="dark"] footer,
[data-theme="dark"] tr.default-row td {
  color: var(--dark-muted);
}
[data-theme="dark"] .text-info { color: var(--dark-info); }
[data-theme="dark"] .text-success { color: var(--dark-success); }
[data-theme="dark"] .text-warning { color: var(--dark-warning); }
[data-theme="dark"] .text-error { color: var(--dark-error); }

:where([data-theme="dark"]) :is(pre, code) {
  color: var(--dark-text);
  background-color: var(--dark-surface);
  border-color: var(--dark-border);
}
:where([data-theme="dark"]) code {
  background-color: var(--dark-raised);
}

/* Forms */

[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .uneditable-input,
[data-theme="dark"] input:is([type="text"], [type="password"], [type="datetime"],
  [type="datetime-local"], [type="date"], [type="month"], [type="time"],
  [type="week"], [type="number"], [type="email"], [type="url"], [type="search"],
  [type="tel"], [type="color"]) {
  color: var(--dark-text);
  background-color: var(--dark-raised);
  border-color: var(--dark-border-strong);
}
[data-theme="dark"] :is(input, select, textarea):is([disabled], [readonly]) {
  background-color: var(--dark-surface);
}
[data-theme="dark"] .input-append .add-on,
[data-theme="dark"] .input-prepend .add-on {
  color: var(--dark-text);
  text-shadow: none;
  background-color: var(--dark-hover);
  border-color: var(--dark-border-strong);
}
[data-theme="dark"] .form-actions {
  background-color: var(--dark-surface);
  border-top-color: var(--dark-border);
}
[data-theme="dark"] .help-block,
[data-theme="dark"] .help-inline {
  color: var(--dark-muted);
}
[data-theme="dark"] .control-group.error :is(.control-label, .help-block, .help-inline, .checkbox, .radio, input, select, textarea) {
  color: var(--dark-error);
}
[data-theme="dark"] .control-group.error :is(input, select, textarea, .add-on) {
  border-color: var(--dark-error);
}
[data-theme="dark"] .control-group.error .add-on {
  color: var(--dark-error);
  background-color: var(--dark-error-bg);
}
[data-theme="dark"] .control-group.warning :is(.control-label, .help-block, .help-inline, .checkbox, .radio, input, select, textarea) {
  color: var(--dark-warning);
}
[data-theme="dark"] .control-group.warning :is(input, select, textarea, .add-on) {
  border-color: var(--dark-warning);
}
[data-theme="dark"] .control-group.warning .add-on {
  color: var(--dark-warning);
  background-color: var(--dark-warning-bg);
}
[data-theme="dark"] .control-group.success :is(.control-label, .help-block, .help-inline, .checkbox, .radio, input, select, textarea) {
  color: var(--dark-success);
}
[data-theme="dark"] .control-group.success :is(input, select, textarea, .add-on) {
  border-color: var(--dark-success);
}
[data-theme="dark"] .control-group.success .add-on {
  color: var(--dark-success);
  background-color: var(--dark-success-bg);
}
[data-theme="dark"] .control-group.info :is(.control-label, .help-block, .help-inline, .checkbox, .radio, input, select, textarea) {
  color: var(--dark-info);
}
[data-theme="dark"] .control-group.info :is(input, select, textarea, .add-on) {
  border-color: var(--dark-info);
}
[data-theme="dark"] .control-group.info .add-on {
  color: var(--dark-info);
  background-color: var(--dark-info-bg);
}

/* Buttons. Only the default button is restyled; the coloured variants read
   fine on a dark background. */

[data-theme="dark"] .btn:not(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-inverse, .btn-link),
[data-theme="dark"] .panel strong {
  color: var(--dark-text);
  text-shadow: none;
  background-color: var(--dark-raised);
  background-image: none;
  border-color: var(--dark-border-strong);
  box-shadow: none;
}
[data-theme="dark"] .btn:not(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-inverse, .btn-link):is(:hover, :focus, .active, :active),
[data-theme="dark"] .panel strong:is(:hover, :focus, :active) {
  color: var(--dark-heading);
  background-color: var(--dark-hover);
}
[data-theme="dark"] .btn:not(.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-inverse, .btn-link):is(.disabled, [disabled]) {
  color: var(--dark-muted);
  background-color: var(--dark-raised);
}
[data-theme="dark"] .btn-link {
  color: var(--dark-link);
}
[data-theme="dark"] .close {
  color: #fff;
  text-shadow: none;
}

/* Tables */

[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table tbody tr:first-child td,
[data-theme="dark"] .table tbody + tbody,
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered :is(th, td),
[data-theme="dark"] .content .table-container,
[data-theme="dark"] table.filelisting-5col tbody tr:first-child td {
  border-color: var(--dark-border);
}
[data-theme="dark"] .table-striped tbody > tr:nth-child(odd) > :is(td, th) {
  background-color: var(--dark-surface);
}
[data-theme="dark"] .table .odd-row {
  background-color: var(--dark-surface) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover > :is(td, th),
[data-theme="dark"] table.sortable thead th:hover {
  background-color: var(--dark-hover);
}
[data-theme="dark"] table.table-row-links tbody tr:not(.default-row):hover td {
  background-color: var(--dark-hover) !important;
}
[data-theme="dark"] .table tbody tr.success > td { background-color: var(--dark-success-bg); }
[data-theme="dark"] .table tbody tr.error > td { background-color: var(--dark-error-bg); }
[data-theme="dark"] .table tbody tr.warning > td { background-color: var(--dark-warning-bg); }
[data-theme="dark"] .table tbody tr.info > td { background-color: var(--dark-info-bg); }

/* Alerts */

[data-theme="dark"] .alert {
  color: var(--dark-warning);
  text-shadow: none;
  background-color: var(--dark-warning-bg);
  border-color: var(--dark-warning-border);
}
[data-theme="dark"] .alert-success {
  color: var(--dark-success);
  background-color: var(--dark-success-bg);
  border-color: var(--dark-success-border);
}
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
  color: var(--dark-error);
  background-color: var(--dark-error-bg);
  border-color: var(--dark-error-border);
}
[data-theme="dark"] .alert-info {
  color: var(--dark-info);
  background-color: var(--dark-info-bg);
  border-color: var(--dark-info-border);
}

/* Navigation */

[data-theme="dark"] .nav > li > a:hover,
[data-theme="dark"] .nav > li > a:focus {
  background-color: var(--dark-hover);
}
[data-theme="dark"] .navbar .nav > li > a:hover,
[data-theme="dark"] .navbar .nav > li > a:focus {
  background-color: transparent;
}
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--dark-border);
}
[data-theme="dark"] .nav-tabs > li > a:hover,
[data-theme="dark"] .nav-tabs > li > a:focus {
  border-color: var(--dark-border) var(--dark-border) var(--dark-border-strong);
}
[data-theme="dark"] .nav-tabs > .active > a,
[data-theme="dark"] .nav-tabs > .active > a:hover,
[data-theme="dark"] .nav-tabs > .active > a:focus {
  color: var(--dark-text);
  background-color: var(--dark-bg);
  border-color: var(--dark-border);
  border-bottom-color: transparent;
}
[data-theme="dark"] header,
[data-theme="dark"] .horizontal-scrollable-tabs .horizontal-tabs {
  background-color: var(--dark-surface);
  border-bottom-color: var(--dark-border);
}
[data-theme="dark"] .horizontal-scrollable-tabs .scroller {
  color: var(--dark-link);
  background-color: var(--dark-hover);
}
[data-theme="dark"] .horizontal-scrollable-tabs .scroller.disabled {
  color: var(--dark-border-strong);
  background: none;
}
[data-theme="dark"] .horizontal-scrollable-tabs li a .badge {
  background-color: #1f78b4;
}
[data-theme="dark"] .horizontal-scrollable-tabs li.active .badge {
  background-color: var(--dark-border-strong);
}
[data-theme="dark"] .nav-tabs li.disabled span {
  color: var(--dark-muted);
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--dark-raised);
  border-color: var(--dark-border-strong);
}
[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--dark-text);
}
[data-theme="dark"] .dropdown-menu .divider {
  background-color: var(--dark-border);
  border-bottom-color: transparent;
}
[data-theme="dark"] .navbar .nav > li > .dropdown-menu:after {
  border-bottom-color: var(--dark-raised);
}

/* Components */

[data-theme="dark"] .well {
  background-color: var(--dark-surface);
  border-color: var(--dark-border);
}
[data-theme="dark"] .well :is(pre, code) {
  color: var(--dark-text);
  background-color: var(--dark-raised);
}
[data-theme="dark"] .well blockquote p {
  color: var(--dark-muted);
}

[data-theme="dark"] .modal {
  background-color: var(--dark-raised);
  border-color: var(--dark-border-strong);
}
[data-theme="dark"] .modal-header {
  border-bottom-color: var(--dark-border);
}
[data-theme="dark"] .modal-footer {
  background-color: var(--dark-surface);
  border-top-color: var(--dark-border);
  box-shadow: none;
}

[data-theme="dark"] .thumbnail {
  border-color: var(--dark-border);
}
[data-theme="dark"] .thumbnail h3 {
  background: var(--dark-surface);
}
[data-theme="dark"] .thumbnail h3 span {
  color: var(--dark-muted);
}
[data-theme="dark"] .thumbnail :is(h4, p) {
  color: var(--dark-text);
}

[data-theme="dark"] .progress {
  background-color: var(--dark-raised);
  background-image: none;
}
[data-theme="dark"] .label,
[data-theme="dark"] .badge {
  text-shadow: none;
}
[data-theme="dark"] .label:not([class*="label-"]),
[data-theme="dark"] .badge:not([class*="badge-"]) {
  background-color: #6b7077;
}

[data-theme="dark"] .bootstrap-datetimepicker-widget:after {
  border-bottom-color: var(--dark-raised);
}
[data-theme="dark"] .bootstrap-datetimepicker-widget :is(td.day, td.hour, td.minute, td.second, td span, thead tr:first-child th):hover {
  background: var(--dark-hover);
}

/* Fire's own components (assets/app/styles/_global.less) */

[data-theme="dark"] .lab-infos,
[data-theme="dark"] .lab-info a,
[data-theme="dark"] #no-labs,
[data-theme="dark"] .panel,
[data-theme="dark"] .panel strong,
[data-theme="dark"] .student-info,
[data-theme="dark"] #submissions > .submission,
[data-theme="dark"] #submissions > .submission :is(.review, .automatic-checks-results) {
  border-color: var(--dark-border);
}
[data-theme="dark"] .lab-info a {
  color: var(--dark-text);
}
[data-theme="dark"] .lab-info h2 {
  color: var(--dark-link);
}
[data-theme="dark"] .lab-info a h2 span:hover {
  color: var(--dark-link-hover);
}
[data-theme="dark"] .lab-info a:hover,
[data-theme="dark"] #submissions > .submission-minimized:hover {
  background-color: var(--dark-hover);
}
[data-theme="dark"] #submissions > .submission-minimized:hover {
  border-color: var(--dark-border-strong);
}
[data-theme="dark"] .lab-infos .lab-info-suspended {
  background-color: var(--dark-warning-bg);
}
[data-theme="dark"] #create-new-lab-box,
[data-theme="dark"] #no-labs {
  color: var(--dark-muted);
  background-color: var(--dark-surface);
}
[data-theme="dark"] #submissions > .submission .minimizer {
  color: var(--dark-link);
}
[data-theme="dark"] #submissions > .submission .minimizer:hover {
  color: var(--dark-link-hover);
}

/* :where() so `.substatus-* .icon-custom-substatus { color: inherit }` still wins */
:where([data-theme="dark"]) .icon-custom-substatus { color: var(--dark-border-strong); }
[data-theme="dark"] .substatus-none,
[data-theme="dark"] .nav-tabs .substatus-none:hover,
[data-theme="dark"] .grader-submissions-table a.substatus-none:hover { color: var(--dark-text); }
[data-theme="dark"] .substatus-withdrawn,
[data-theme="dark"] .nav-tabs .substatus-withdrawn:hover,
[data-theme="dark"] .grader-submissions-table a.substatus-withdrawn:hover { color: var(--dark-muted); }
[data-theme="dark"] .substatus-pending,
[data-theme="dark"] .nav-tabs .substatus-pending:hover,
[data-theme="dark"] .grader-submissions-table a.substatus-pending:hover { color: var(--dark-info); }
[data-theme="dark"] .substatus-accepted,
[data-theme="dark"] .nav-tabs .substatus-accepted:hover,
[data-theme="dark"] .grader-submissions-table a.substatus-accepted:hover { color: var(--dark-success); }
[data-theme="dark"] .substatus-rejected,
[data-theme="dark"] .nav-tabs .substatus-rejected:hover,
[data-theme="dark"] .grader-submissions-table a.substatus-rejected:hover { color: var(--dark-error); }
[data-theme="dark"] .substatus-passed,
[data-theme="dark"] .nav-tabs .substatus-passed:hover,
[data-theme="dark"] .grader-submissions-table a.substatus-passed:hover { color: var(--dark-warning); }
[data-theme="dark"] .nav-tabs .active .icon-custom-substatus { color: var(--dark-muted); }

[data-theme="dark"] #confirm-leavegroup i,
[data-theme="dark"] .row-submission-content .remove-submitter:hover,
[data-theme="dark"] .row-submission-content .remove-submitter:hover .icon {
  color: var(--dark-error);
}
[data-theme="dark"] .row-submission-content .remove-submitter .icon {
  color: var(--dark-link);
}
[data-theme="dark"] .row-submission-content .add-submitter {
  color: var(--dark-success);
}
[data-theme="dark"] .submission .submission-status {
  color: var(--dark-muted);
}

[data-theme="dark"] #grader-workload .understaffed,
[data-theme="dark"] #groupsizes .wrong-size {
  background-color: var(--dark-error-bg);
  border-color: var(--dark-bg);
}
[data-theme="dark"] #grader-workload .understaffed *,
[data-theme="dark"] #groupsizes .wrong-size * {
  color: var(--dark-error) !important;
}
[data-theme="dark"] #groupsizes .empty .wrong-size {
  background-color: transparent !important;
  border-color: var(--dark-border) !important;
}
[data-theme="dark"] #groupsizes .empty .wrong-size * {
  color: var(--dark-muted) !important;
}

/* The theme toggle in the navbar */

#theme-toggle .icon-adjust {
  display: inline-block;
}
[data-theme="dark"] #theme-toggle .icon-adjust {
  transform: rotate(180deg);
}