/*
 * Dark mode for the remaining PHP pages (admin lists, category admin, bulk upload and their
 * lightboxes). The new frontend keeps the visitor's choice in localStorage ("shredlynx-theme",
 * dark unless "light"); parents/default.tpl reads it before the first paint and sets
 * data-theme on <html>. Colours follow the dark tokens of frontend/src/index.css.
 */
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] body {
  background: #0c0d10;
  background: linear-gradient(to bottom, #2b2d33, #0c0d10);
  color: #eceef2;
}
html[data-theme="dark"] body:before { opacity: 0.12; }

/* Page card, header and footer */
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .header,
html[data-theme="dark"] .footer { background: #1c1e24; }
html[data-theme="dark"] .mainTitle,
html[data-theme="dark"] .mainTitle h1,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] label,
html[data-theme="dark"] .labelText { color: #eceef2; }
html[data-theme="dark"] a:not(.btn) { color: #ff8a1f; }
html[data-theme="dark"] a:not(.btn):hover, html[data-theme="dark"] a:not(.btn):focus { color: #ffa552; }
html[data-theme="dark"] .footerService a { color: #fff; }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .help-block { color: #a1a7b3; }

/* Round nav buttons and menus */
html[data-theme="dark"] .navBtn { border-color: #3a3d46; }
html[data-theme="dark"] .navBtn span.icon, html[data-theme="dark"] .navBtn i,
html[data-theme="dark"] .footer .navBtn .subNavCont ul li span.icon { color: #a1a7b3; }
html[data-theme="dark"] .navigationMain, html[data-theme="dark"] .navigationHome,
html[data-theme="dark"] .footer .navBtn .subNavCont ul,
html[data-theme="dark"] [class*="navBtn category"].active { background: rgba(28, 30, 36, 0.97); }
html[data-theme="dark"] .menuItem, html[data-theme="dark"] .menuItem a,
html[data-theme="dark"] .searchItem { color: #eceef2; }
/* Header menus: opaque (the generic .box rule below is see-through), arrow, entries and hover */
html[data-theme="dark"] .box.navigationMain,
html[data-theme="dark"] .box.navigationHome { background: #1c1e24; border: 1px solid #2c2f37; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .navigationMainContainer .arrow-up,
html[data-theme="dark"] .navigationHomeContainer .arrow-up { border-bottom-color: #2c2f37; }
html[data-theme="dark"] .navigationMain ul li, html[data-theme="dark"] .navigationMain ul li a,
html[data-theme="dark"] .navigationHome ul li, html[data-theme="dark"] .navigationHome ul li a { color: #eceef2; }
html[data-theme="dark"] .navigationMain ul li .navIcon,
html[data-theme="dark"] .navigationHome ul li .navIcon { color: #a1a7b3; }
html[data-theme="dark"] .navigationMain ul li:hover,
html[data-theme="dark"] .navigationHome ul li:hover { background: #2c2f37; }
html[data-theme="dark"] .navigationMain ul li.gap,
html[data-theme="dark"] .navigationHome ul li.gap { border-top-color: #3a3d46; }

/* Boxes and lightboxes */
html[data-theme="dark"] .box { background: rgba(20, 21, 26, 0.6); }
html[data-theme="dark"] .lightboxContainer .box { background: #1c1e24; color: #eceef2; }
html[data-theme="dark"] .lightboxContainer .close { color: #eceef2; opacity: 0.8; text-shadow: none; }
html[data-theme="dark"] .boxContentBlock .image { background-color: #14151a; border-color: #2c2f37; }
html[data-theme="dark"] .modal-content { background: #1c1e24; color: #eceef2; border-color: #2c2f37; }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: #2c2f37; }
html[data-theme="dark"] .well, html[data-theme="dark"] .panel { background: #14151a; border-color: #2c2f37; color: #eceef2; }

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #14151a;
  border-color: #3a3d46;
  color: #eceef2;
}
html[data-theme="dark"] .form-control:focus { border-color: #ff8a1f; box-shadow: 0 0 0 2px rgba(255, 138, 31, 0.25); }
html[data-theme="dark"] .form-control[disabled], html[data-theme="dark"] .form-control[readonly] { background-color: #23252c; }
html[data-theme="dark"] .input-group-addon { background: #23252c; border-color: #3a3d46; color: #a1a7b3; }
html[data-theme="dark"] .btn-default, html[data-theme="dark"] .btn:not([class*="btn-"]) { background: #2c2f37; border-color: #3a3d46; color: #eceef2; }
html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn:not([class*="btn-"]):hover { background: #3a3d46; color: #fff; }

/* Alerts */
html[data-theme="dark"] .alert-danger { background: #3a1517; border-color: #6b2226; color: #ffb4b4; }
html[data-theme="dark"] .alert-success { background: #12301f; border-color: #1f5a37; color: #a6e3bd; }

/* Tables (DataTables lists); Bootstrap colours the cells, so the cells are reset as well */
html[data-theme="dark"] table, html[data-theme="dark"] .table { color: #eceef2; background: transparent; }
html[data-theme="dark"] table th, html[data-theme="dark"] table td { color: #eceef2; background-color: transparent; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td { background-color: #23252c; }
html[data-theme="dark"] table td .fa, html[data-theme="dark"] table td .glyphicon,
html[data-theme="dark"] table td i { color: #a1a7b3; }
html[data-theme="dark"] table td a:hover .fa, html[data-theme="dark"] table td a:hover i { color: #ff8a1f; }
html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable.no-footer { border-color: #2c2f37; }
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: #1c1e24; }
html[data-theme="dark"] table.dataTable tbody tr.even,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #202229; }
html[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
html[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1 { background-color: #23252c; }
html[data-theme="dark"] table.dataTable tbody tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #2c2f37; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: #a1a7b3 !important; }
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #2c2f37; border-color: #3a3d46; color: #eceef2 !important; }

/* Select2 and datepicker */
html[data-theme="dark"] .select2-container .select2-choice,
html[data-theme="dark"] .select2-container-multi .select2-choices,
html[data-theme="dark"] .select2-drop { background: #14151a; border-color: #3a3d46; color: #eceef2; background-image: none; }
html[data-theme="dark"] .select2-search input { background-color: #14151a; color: #eceef2; }
html[data-theme="dark"] .select2-results .select2-highlighted { background: #ff8a1f; color: #000; }
html[data-theme="dark"] .select2-container-multi .select2-choices .select2-search-choice { background: #2c2f37; border-color: #3a3d46; color: #eceef2; background-image: none; }
html[data-theme="dark"] .datepicker { background: #1c1e24; color: #eceef2; }
html[data-theme="dark"] .datepicker table tr td.day:hover, html[data-theme="dark"] .datepicker table tr td span:hover { background: #2c2f37; }

/* Both themes: the header menus are opaque (main.css has 90 % white, the page showed through),
   and the light/dark label takes the colour of its entry (main.css colours every element via *) */
.box.navigationMain, .box.navigationHome { background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
html[data-theme="dark"] .box.navigationMain, html[data-theme="dark"] .box.navigationHome { background: #1c1e24; }
.navigationHome .themeToggleLabel { color: inherit; }