/* Layout */

/* Inverts all colors with a slight offset to use as a dark mode. Overrides are below */
html[data-theme="dark"] {
  background: rgb(12, 12, 12);
  filter: invert(1) hue-rotate(180deg);
}

/* Double-invert the following elements, restoring them to the original non-inverted colors */
html[data-theme="dark"] img,                              /* Images like .png, .jpg, etc */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .btn.btn-default,                 /* Buttons */
html[data-theme="dark"] .btn.btn-primary,                 /* Buttons */
html[data-theme="dark"] .btn.btn-success,                 /* Buttons */
html[data-theme="dark"] .btn.btn-info,                    /* Buttons */
html[data-theme="dark"] .btn.btn-warning,                 /* Buttons */
html[data-theme="dark"] .btn.btn-danger,                  /* Buttons */
/* html[data-theme="dark"] .btn.btn-link,                    do not double-invert these! */
html[data-theme="dark"] .label,                           /* Labels */
html[data-theme="dark"] .color-block,                     /* Colored choices, like statuses */
html[data-theme="dark"] .select2-selection__choice,       /* Colored choices, like statuses */
html[data-theme="dark"] #select2-id_color-results,        /* Colored choices, like statuses */
html[data-theme="dark"] #select2-id_color-container,      /* Colored choices, like statuses */
html[data-theme="dark"] .hljs {                           /* highlight.js maintains its own dark theme */
  filter: invert(1) hue-rotate(180deg);
}

/* Labels in API Swagger docs */
html[data-theme="dark"] .opblock-summary-method {
  color: black !important;
}
/* Version stamp in API Swagger docs */
html[data-theme="dark"] .version {
  color: black !important;
}

/* Darker background color, offset to not be fully black */
html[data-theme="dark"] body,
html[data-theme="dark"] .container-fluid.wrapper {
  background-color: rgb(217, 217, 217) !important;
}

/* Lighter than the background */
html[data-theme="dark"] .navbar,                          /* Top menu navbar */
html[data-theme="dark"] .navbar-nav > li > a,
html[data-theme="dark"] .navbar-nav > li > a:hover,
html[data-theme="dark"] .navbar-nav > li > a:focus,
html[data-theme="dark"] .footer,                          /* Bottom footer bar */
html[data-theme="dark"] .footer .row {                    /* Bottom footer bar */
  background-color: rgb(222, 222, 222) !important;
}

html[data-theme="dark"] .panel,                           /* Section panels, like on home page */
html[data-theme="dark"] .panel-default,                   /* Section panels, like on home page */
html[data-theme="dark"] .panel-body,                      /* Section panels content, like on home page */
html[data-theme="dark"] .list-group,                      /* Section panels content, like on home page */
html[data-theme="dark"] .list-group-item,                 /* Item in section panels content, like on home page */
html[data-theme="dark"] .CodeMirror,                      /* GraphiQL page */
html[data-theme="dark"] .search-box input,                /* GraphiQL docs tab search box */
html[data-theme="dark"] .table-headings tr,               /* Table rows */
html[data-theme="dark"] .modal-body {                     /* Modal background */
  background-color: rgb(222, 222, 222) !important;
  color: rgb(70, 70, 70) !important;                    /* Slightly darken text color */
}

/* Slightly lighter than background to standout */
html[data-theme="dark"] .breadcrumb,                      /* Background bar for breadcrumbs */
html[data-theme="dark"] ul li.active a,                   /* Active tab highlight, eg device details page */
html[data-theme="dark"] .dropdown-menu>li>a:hover,        /* Navbar menu item when hovering */
html[data-theme="dark"] .table-responsive>table>tbody>tr:hover, /* Display objects table when hovering over row */
html[data-theme="dark"] .nav-tabs>li>a:hover,             /* Tab selection when hovering */
html[data-theme="dark"] .nav-tabs>li>a:focus,             /* Tab selection when clicked */
html[data-theme="dark"] .nav-pills>li>a:hover,            /* Tab selection when hovering */
html[data-theme="dark"] .nav-pills>li>a:focus,            /* Tab selection when clicked */
html[data-theme="dark"] .panel-default .panel-heading,    /* Panel header bars */
html[data-theme="dark"] .panel-footer,                    /* Panel footer bars */
html[data-theme="dark"] .modal-header,                    /* Header bar in modals */
html[data-theme="dark"] .modal-footer,                    /* Footer bar in modals */
html[data-theme="dark"] .table-headings th {              /* Table header bar */
  background-color: rgb(196, 204, 210) !important;
}

html[data-theme="dark"] .select2-container--default,      /* Drop down menu selections, eg adding new item */
html[data-theme="dark"] .select2-container--classic,      /* Drop down menu selections, eg adding new item */
html[data-theme="dark"] .select2-container--bootstrap,    /* Drop down menu selections, eg adding new item */
html[data-theme="dark"] .select2-selection--single,       /* Drop down menu selections, eg adding new item */
html[data-theme="dark"] .select2-selection--multiple,     /* Drop down menu selections, eg adding new item */
html[data-theme="dark"] .select2-search--dropdown,        /* Drop down menu selections for filter form */
html[data-theme="dark"] .select2-search--inline,          /* Search field in filter form */
html[data-theme="dark"] .select2-search__field,           /* Search field in filter form */
html[data-theme="dark"] .select2-close-mask,              /* Close selection */
html[data-theme="dark"] .form-control {                   /* Text fields, text boxes, etc. */
  background-color: rgb(242, 242, 242) !important;
}

html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .fieldset[disabled] .form-control {
  background-color: rgb(210, 210, 210) !important;
}

html[data-theme="dark"] .scheme-container {                /* Swagger docs container header bar */
  background-color: rgb(217, 217, 217) !important;
}

/* GraphiQL */
html[data-theme="dark"] .doc-explorer,                     /* GraphiQL docs tab background */
html[data-theme="dark"] .doc-explorer-contents,            /* GraphiQL docs tab background */
html[data-theme="dark"] .CodeMirror-gutters {              /* GraphiQL primary background */
  background-color: rgb(217, 217, 217) !important;
}

/* Preserve border line across bottom of tabs row */
html[data-theme="dark"] .nav-tabs {
  border-bottom: 1px solid rgb(100, 100, 100);
}

/* Preserve border lines around active tab in tabs row */
html[data-theme="dark"] .nav-tabs>li.active>a,
html[data-theme="dark"] .nav-tabs>li.active>a:focus,
html[data-theme="dark"] .nav-tabs>li.active>a:hover {
  border: 1px solid rgb(100, 100, 100);                 /* Border left/top/right around active tab */
  border-bottom-color: transparent;                       /* Hides bottom border for active tab */
  border-radius: 6px 6px 0 0;                             /* Rounds top border corners of active tab */
  background-color: rgb(217, 217, 217) !important;      /* Blends active tab with background */
}

/* Preserve matching background for active navbar links */
html[data-theme="dark"] .navbar ul li.active a {
  background-color: transparent !important;
}

/* Preserve blue background for active navbar buttons */
html[data-theme="dark"] .navbar ul li.active a.btn {
  background-color: #0938e1 !important;
}

/* Change navbar link background color when hover */
html[data-theme="dark"] .nav-dropdown-menu>li>a:hover {
  background-color: rgb(196, 204, 210) !important;
}

/* Preserve matching background in iGraphQL text boxes */
/* Also fixes bug preventing selected text from being distinguised as selected */
html[data-theme="dark"] .CodeMirror pre {
  background: transparent !important;
}

/* Swagger API Docs */
/* html[data-theme="dark"] .swagger-ui select, */
/* html[data-theme="dark"] .swagger-ui select, */
html[data-theme="dark"] .swagger-ui select {
  background-color: rgb(222, 222, 222) !important;
}


html[data-theme="dark"] .swagger-ui input,                /* Swagger docs item input input box */
html[data-theme="dark"] .swagger-ui select,               /* Swagger docs item select input box */
html[data-theme="dark"] .swagger-ui textarea {            /* Swagger docs item text area input box */
  background: transparent !important;
  border: 1px solid #888 !important;
}

/* Swagger docs table item background */
html[data-theme="dark"] .swagger-ui table {
  background: transparent !important;
}

/* Section headers in swagger docs items */
html[data-theme="dark"] .swagger-ui .opblock .opblock-section-header {
  background: transparent !important;
  border: 1px solid #888 !important;
  background-color: rgb(217, 217, 217, 0.5) !important;
}

html[data-theme="dark"] .swagger-ui .tab li button.tablinks, /* Example tab links for each API item */
html[data-theme="dark"] .swagger-ui .btn {                /* Swagger button text */
  color: rgb(174, 190, 196) !important;
}

/* Form fields and backdrops, lighter than headers, navbars, etc */
html[data-theme="dark"] #per_page,                        /* Pagination page selection dropdown menu */
html[data-theme="dark"] .dropdown-menu,                   /* Dropdown menu from navbar */
html[data-theme="dark"] .swagger-ui .servers>label select /* Swagger docs server dropdown selection */
html[data-theme="dark"] .select2-dropdown {               /* Dropdown form fields */
  background-color: rgb(222, 222, 222) !important;
}

html[data-theme="dark"] .navbar-nav>li>a:hover {          /* Navbar top level menu dropdown links on hover */
  color: rgb(224, 120, 7) !important;
}

html[data-theme="dark"] .dropdown-menu button:hover,      /* Navbar button item when hovering */
html[data-theme="dark"] .dropdown-menu>li>button:hover {
  color: rgb(51, 51, 51) !important;
  background-color: rgb(196, 204, 210) !important;
}

html[data-theme="dark"] .dropdown-menu>li>a {             /* Navbar dropdown text links */
  color: rgb(51, 51, 51) !important;
}

/* This is already inverted as a button above, however we do not want it to be */
html[data-theme="dark"] .accordion-toggle {               /* Accordion dropdown header, like on Jobs page */
  filter: invert(0);                                      /* Do not invert */
  color: rgb(51, 51, 51);
}

html[data-theme="dark"] .docExplorerHide,                 /* X button to close GraphiQL docs tab */
html[data-theme="dark"] .close {                          /* X button to close modals in top right */
  color: rgb(243, 243, 243);
}

/* Code blocks */
html[data-theme="dark"] pre {
  background-color: rgb(211, 221, 222);
  color: rgb(29, 40, 42);
}

html[data-theme="dark"] pre code.hljs {
  /* We let the hljs handle the color so Syntax highlighting works, but we set the background to match the <pre> blocks.*/
  background-color: rgb(29, 40, 42)
}

/* Breadcrumbs */
html[data-theme="dark"] .breadcrumb>li+li:before {
  color: rgb(142, 142, 142);
}

/* Dynamic filter selection outside box */
html[data-theme="dark"] .filter-container .filter-selection {
  background-color: rgb(201, 201, 201);                 /* Background color of dynamic filters selected across most pages, outer box */
  border: 1px solid rgb(170, 170, 170);                 /* Border color of dynamic filters selected across most pages, outer box */
}

/* Dynamic filter box selection inside box selected filter */
html[data-theme="dark"] .filter-container .filter-selection .filter-selection-choice {
  background-color: rgb(185, 185, 185);                 /* Background color of dynamic filters selected across most pages, inner selection box */
  border: 1px solid rgb(170, 170, 170);                 /* Border color of dynamic filters selected across most pages, inner selection box */
}

/* List View Table and Tables in Detail Views */
html[data-theme="dark"] .table-responsive>table>tbody>tr,
html[data-theme="dark"] .table-headings>tbody>tr {
  background: rgb(218, 218, 218);
}

html[data-theme="dark"] .table-responsive>table>tbody>tr:hover,
html[data-theme="dark"] .table-headings>tbody>tr:hover {
  background: rgb(213, 213, 213) !important;
}

html[data-theme="dark"] .table-responsive>table>tbody>tr>td,
html[data-theme="dark"] .table-headings>tbody>tr {
  border-top: 1px solid rgb(195, 195, 195);
}

/* Make panel being dragged opaque */
html[data-theme="dark"] .dragging {
  opacity: 0.5;
}

/* Make Navbar dropdown menu items respond to dark mode correctly */
html[data-theme="dark"] .nav-dropdown-menu, html[data-theme="dark"] .swagger-ui .servers>label select html[data-theme="dark"] .select2-dropdown {
  background-color: rgb(222, 222, 222) !important;
}
html[data-theme="dark"] .nav-dropdown-menu>li>a {
  color: rgb(51, 51, 51) !important;
}

/*
 * Special diff block `<pre><code>...</code></pre>` backgrounds.
 * `:has` is kind of optional here but it prevents displaying light background
 * colors before `.hljs` class is added by syntax highlighting script.
 */
pre.diff-added:has(code.hljs) {
  background-color: #25171c !important;
}
pre.diff-removed:has(code.hljs) {
  background-color: #12261e !important;
}