/*
*/
body.admin-darkmode-color.main-body {
  background-color: #121212;
  color: #BBB;
}
.admin-darkmode-color a.invisibleHyperlink,
.admin-darkmode-color a.invisibleHyperlink:visited,
.admin-darkmode-color .fc-toolbar-title,
.admin-darkmode-color .fc-icsButton-button.fc-button-primary,
.admin-darkmode-color .fc-col-header-cell-cushion,
.admin-darkmode-color .fc-daygrid-day-number,
.admin-darkmode-color .common-text-color,
.admin-darkmode-color .custom-background .menu-selected,
.admin-darkmode-color .custom-background .customHoverBg.has-submenu.expanded {
  color: #BBB;
}
.admin-darkmode-color .faPrimaryDefault {
  --fa-primary-color: #BBB;
}
/* Default block with white background and shadow */
.admin-darkmode-color .default-white-block,
.admin-darkmode-color .infoBox,
.admin-darkmode-color .support-table,
.admin-darkmode-color .userCourseTilesDiv {
  box-shadow: 0 1px 4px #000;
}
.admin-darkmode-color div.infoBox:hover,
.admin-darkmode-color .hyperlinkBox:hover,
.admin-darkmode-color .default-list-table > tbody > tr:hover,
.admin-darkmode-color .filter-table table.filter-table-items td:hover,
.admin-darkmode-color .tableList li > div:hover {
  background-color: #2A2A2A;
}
.admin-darkmode-color .codeBlock {
  background-color: #222;
  border: 1px solid #333;
}
/* Default background color for inputs. */
.admin-darkmode-color .default-white-background,
.admin-darkmode-color .default-white-block,
.admin-darkmode-color .infoBox,
.admin-darkmode-color #submenu-panel,
.admin-darkmode-color .tooltip-content,
.admin-darkmode-color .errorTooltip,
.admin-darkmode-color .pcr-app,
.admin-darkmode-color .tab-active,
.admin-darkmode-color .ui-datepicker,
.admin-darkmode-color .table-menu li,
.admin-darkmode-color .button-right-help,
.admin-darkmode-color .support-table,
.admin-darkmode-color input:not(:checked) + .toggleSlider,
.admin-darkmode-color .reverseSlider input:checked + .toggleSlider,
.admin-darkmode-color input:checked + .toggleSlider:before,
.admin-darkmode-color .reverseSlider input:not(:checked) + .toggleSlider:before,
.admin-darkmode-color .userCourseTilesDiv,
.admin-darkmode-color .userCourseTableList td,
.admin-darkmode-color .userSurveyTableList td,
.admin-darkmode-color .userKPITableList td,
.admin-darkmode-color .userTrainingEventsTableList td,
.admin-darkmode-color .userTrainingEventsTableList div,
.admin-darkmode-color .tileOverlay .playButton,
.admin-darkmode-color .fc-icsButton-button.fc-button-primary,
.admin-darkmode-color .fc-icsButton-button.fc-button-primary:hover,
.admin-darkmode-color .checkbox-container input[type="radio"] ~ .checkbox-image:after,
.admin-darkmode-color .custom-background .menu-selected,
.admin-darkmode-color .custom-background .customHoverBg.has-submenu.expanded {
  background-color: #1f1e1c;
}
.admin-darkmode-color .checkbox-container input[type="checkbox"]:checked ~ .checkbox-image:after {
  border-color: #1f1e1c;
}
.admin-darkmode-color .custom-color-reverse-button {
  background-color: rgba(255,255,255,0.9) !important;
}
/* Box shadow for submenu */
.admin-darkmode-color #submenu-panel {
  box-shadow: 0 0px 4px #1f1e1c;
}
/* Border color for inputs and some items. */
.admin-darkmode-color .table-menu li,
.admin-darkmode-color .button-right-help,
.admin-darkmode-color .filter-table table.filter-table-items td,
.admin-darkmode-color .sumoSelectOptWrapper .select-all > span i,
.admin-darkmode-color .sumoSelectOptWrapper.multiple > .options li.opt span i,
.admin-darkmode-color .checkbox-container input ~ .checkbox-image,
.admin-darkmode-color .light-gray-border,
.admin-darkmode-color .dashboard-course-block .dashboard-course-ico {
  border: 1px solid #333;
}
.admin-darkmode-color .table-menu li.empty {
  border: none !important;
  background: none !important;
}
/* Bottom border color for items in drop. */
.admin-darkmode-color .sumoSelectOptWrapper > .options li.opt,
.admin-darkmode-color .sumoSelectOptWrapper > .options li.group > label,
.admin-darkmode-color .organizational-structure-pick-user-list-table tr,
.admin-darkmode-color #study-reports-tasks-table table.task {
  border-bottom: 1px solid #333;
}
/* color of watermarks */
.admin-darkmode-color #confirm-modal:before,
.admin-darkmode-color #study-reports-modal-body:before,
.admin-darkmode-color .watermark:before {
  color: rgba(255, 255, 255, 0.02);
}
/* custom background color */
.admin-darkmode-color .custom-background,
.admin-darkmode-color input[type="submit"],
.admin-darkmode-color input[type="button"],
.admin-darkmode-color .custom-background-selected,
.admin-darkmode-color .custom-background-hover:hover,
.admin-darkmode-color .custom-background-focus:focus,
.admin-darkmode-color .default-list-table > tbody > tr > th,
.admin-darkmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i,
.admin-darkmode-color .sumoSelectOptWrapper .select-all.selected > span i,
.admin-darkmode-color .filter-table table.filter-table-items td.selected,
.admin-darkmode-color .icoButton,
.admin-darkmode-color .ui-datepicker-calendar .ui-state-active,
.admin-darkmode-color input:checked + .toggleSlider,
.admin-darkmode-color .reverseSlider input:not(:checked) + .toggleSlider,
.admin-darkmode-color input:not(:checked) + .toggleSlider:before,
.admin-darkmode-color .reverseSlider input:checked + .toggleSlider:before,
.admin-darkmode-color .fc-button-primary,
.admin-darkmode-color .checkbox-container input:checked ~ .checkbox-image {
  background-color: #0754a6;
}
.admin-darkmode-color .checkbox-container input:checked ~ .checkbox-image {
  border: 1px solid #0754a6;
}
.admin-darkmode-color .user-color-border-bottom {
  border-bottom: 1px solid #0754a6;
}
/* custom 1px border color */
.admin-darkmode-color input[type="submit"],
.admin-darkmode-color input[type="button"],
.admin-darkmode-color input[type="text"]:hover,
.admin-darkmode-color input[type="number"]:hover,
.admin-darkmode-color input[type="password"]:hover,
.admin-darkmode-color input[type="file"]:hover,
.admin-darkmode-color textarea:hover,
.admin-darkmode-color input[type="text"]:focus,
.admin-darkmode-color input[type="number"]:focus,
.admin-darkmode-color input[type="password"]:focus,
.admin-darkmode-color input[type="file"]:focus,
.admin-darkmode-color .checkbox-container:hover .checkbox-image,
.admin-darkmode-color .checkbox-container:focus .checkbox-image,
.admin-darkmode-color textarea:focus,
.admin-darkmode-color .default-selectbox:hover,
.admin-darkmode-color .custom-border,
.admin-darkmode-color .tooltip-content,
.admin-darkmode-color .filter-table table.filter-table-items td.selected,
.admin-darkmode-color .icoButton,
.admin-darkmode-color .ui-state-highlight,
.admin-darkmode-color .ui-widget-content .ui-state-highlight,
.admin-darkmode-color .ui-widget-header .ui-state-highlight,
.admin-darkmode-color .ui-datepicker-calendar .ui-state-active,
.admin-darkmode-color .toggleSlider,
.admin-darkmode-color .my-courses-list-type:hover,
.admin-darkmode-color .my-courses-list-type:focus,
.admin-darkmode-color .catalog-list-type:hover,
.admin-darkmode-color .catalog-list-type:focus,
.admin-darkmode-color .sumoSelectOptWrapper .options,
.admin-darkmode-color .sumoSelectOptWrapper .select-all,
.admin-darkmode-color .sumoSelectOptWrapper .no-match {
  border: 1px solid #3986d8;
}
/* readonly inputs */
.admin-darkmode-color input[type="text"]:read-only,
.admin-darkmode-color input[type="number"]:read-only,
.admin-darkmode-color input[type="file"]:disabled,
.admin-darkmode-color input[type="password"]:read-only,
.admin-darkmode-color textarea:read-only,
.admin-darkmode-color .addButton.disabled {
  background-color: #1E1E1E !important;
  color: #999 !important;
  border: 1px #333 solid !important;
}
/** readonly checkbox and radio */
.admin-darkmode-color input:disabled ~ .custom-border {
  background-color: #333 !important;
  border: 1px #333 solid !important;
}
.admin-darkmode-color .readonly.checkbox-container input[type=checkbox]:checked ~ .checkbox-image:after,
.admin-darkmode-color .cbHelpButton {
  border-color: #666 !important;
}
.admin-darkmode-color .checkbox-container.readonly:hover .custom-border,
.admin-darkmode-color .checkbox-container.readonly:focus .custom-border {
  box-shadow: none !important;
}
/* custom box shadow custom color */
.admin-darkmode-color input[type="submit"],
.admin-darkmode-color input[type="button"],
.admin-darkmode-color input[type="text"]:hover,
.admin-darkmode-color input[type="number"]:hover,
.admin-darkmode-color input[type="search"]:hover,
.admin-darkmode-color input[type="password"]:hover,
.admin-darkmode-color input[type="file"]:hover,
.admin-darkmode-color textarea:hover,
.admin-darkmode-color input[type="text"]:focus .admin-darkmode-color input[type="number"]:focus,
.admin-darkmode-color input[type="search"]:focus,
.admin-darkmode-color input[type="password"]:focus,
.admin-darkmode-color input[type="file"]:focus,
.admin-darkmode-color textarea:focus,
.admin-darkmode-color .default-selectbox:hover,
.admin-darkmode-color .checkbox-container:hover .checkbox-image,
.admin-darkmode-color .checkbox-container:focus .checkbox-image,
.admin-darkmode-color .tooltip-content,
.admin-darkmode-color .errorTooltip,
.admin-darkmode-color .my-courses-list-type:hover,
.admin-darkmode-color .my-courses-list-type:focus,
.admin-darkmode-color .catalog-list-type:hover,
.admin-darkmode-color .catalog-list-type:focus,
.admin-darkmode-color .sumoSelectOptWrapper .options,
.admin-darkmode-color .sumoSelectOptWrapper .select-all,
.admin-darkmode-color .sumoSelectOptWrapper .no-match {
  box-shadow: 0 0 2px #0754a6;
}
.admin-darkmode-color .redShadowBox,
.admin-darkmode-color .redShadowBoxParent .SumoSelect {
  background-color: #200000 !important;
  border: 1px solid #622 !important;
}
.admin-darkmode-color .checkbox-container input[type=checkbox]:checked ~ .checkbox-image.redShadowBox:after,
.admin-darkmode-color .checkbox-container input[type=radio]:checked ~ .checkbox-image.redShadowBox:after {
  border-color: #9F3A38 !important;
  background-color: #9F3A38 !important;
}
.admin-darkmode-color .redBackground {
  background-color: #200000 !important;
}
/* Inline form-validation tooltip (uniInput.hbs). Only its shape comes from tooltips.css.less —
   every colour has to be supplied per theme, or the arrow falls back to currentColor.
   The light themes use #9F3A38 text; on the dark #1f1e1c background that drops to ~2.3:1
   contrast, so the dark themes lighten the text and keep the arrow on the dark red palette. */
.admin-darkmode-color .errorTooltip,
.admin-darkmode-color .errorTooltip::after {
  color: #E88;
}
/* Shares the border colour of the .redShadowBox input it annotates — the ::before arrow below is
   the tip of this border, so the two must stay in sync. */
.admin-darkmode-color .errorTooltip {
  border: 1px solid #622;
}
.admin-darkmode-color .errorTooltip:before {
  border-color: transparent transparent #622 transparent;
}
/* custom color on hyperlinks */
.admin-darkmode-color .SumoSelect > .CaptionCont > label > i:before,
.admin-darkmode-color .ui-datepicker .ui-datepicker-prev:before,
.admin-darkmode-color .ui-datepicker .ui-datepicker-next:before,
.admin-darkmode-color .ui-state-highlight,
.admin-darkmode-color .ui-widget-content .ui-state-highlight,
.admin-darkmode-color .ui-widget-header .ui-state-highlight,
.admin-darkmode-color .support-table th {
  color: #0754a6;
}
.admin-darkmode-color .custom-color-reverse-button {
  color: #0754a6 !important;
}
.admin-darkmode-color .custom-color-font,
.admin-darkmode-color #mainmenu-panel.menu-open #mainmenu-left .mainmenu-submenu-item.submenu-active,
.admin-darkmode-color a,
.admin-darkmode-color a:visited,
.admin-darkmode-color .hyperlink,
.admin-darkmode-color .hyperlink:visited,
.admin-darkmode-color .tab-active,
.admin-darkmode-color .tooltip-content {
  color: #3986d8;
}
/* font color on custom color background */
.admin-darkmode-color .custom-background,
.admin-darkmode-color .custom-background a,
.admin-darkmode-color .custom-background a:visited,
.admin-darkmode-color .SumoSelect.sumo_mainmenuLang > .CaptionCont > label > i:before,
.admin-darkmode-color input[type="submit"],
.admin-darkmode-color input[type="button"],
.admin-darkmode-color .custom-background-selected,
.admin-darkmode-color .custom-background-hover:hover,
.admin-darkmode-color .custom-background-focus:focus,
.admin-darkmode-color .default-list-table > tbody > tr > th,
.admin-darkmode-color .filter-table table.filter-table-items td.selected,
.admin-darkmode-color .icoButton,
.admin-darkmode-color .ui-datepicker-calendar .ui-state-active,
.admin-darkmode-color .fc-button-primary {
  color: rgba(255,255,255,0.9);
}
/* Border color for checkbox on custom color background */
.admin-darkmode-color .white-checkbox span,
.admin-darkmode-color .filter-overlay .checkbox-image,
.admin-darkmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i::after,
.admin-darkmode-color .sumoSelectOptWrapper .select-all.selected > span i::after {
  border-color: rgba(255,255,255,0.9) !important;
}
/* overlay background image for hovered/selected item on custom color */
.admin-darkmode-color .custom-background .customHoverBg:hover,
.admin-darkmode-color .custom-background .customSelectedBg,
.admin-darkmode-color .sumoSelectOptWrapper li.opt:hover,
.admin-darkmode-color .sumoSelectOptWrapper .select-all:hover,
.admin-darkmode-color input[type="submit"]:hover,
.admin-darkmode-color input[type="button"]:hover,
.admin-darkmode-color input[type="submit"]:focus,
.admin-darkmode-color input[type="button"]:focus,
.admin-darkmode-color .red-button:hover,
.admin-darkmode-color .red-button:focus,
.admin-darkmode-color .addButton:hover,
.admin-darkmode-color .addButton:focus,
.admin-darkmode-color .icoButton:hover,
.admin-darkmode-color .icoButton:focus,
.admin-darkmode-color .fc-button-primary:hover {
  background-image: url('./../img/menu-overlay.png');
}
/* FullCalendar v6 injects `.fc .fc-button-primary:hover` (its own dark navy) into <head> at
   runtime. That selector out-specifies the themed `.fc-button-primary` rules above, so the
   calendar's prev/next buttons dropped the custom colour on hover and went dark instead of just
   taking the overlay image like a main-menu item. Restate both colours on hover at a higher
   specificity. The ICS button styles itself inverted, so it is excluded here. */
.admin-darkmode-color .fc .fc-button-primary:not(.fc-icsButton-button):hover {
  background-color: #0754a6;
  color: rgba(255,255,255,0.9);
}
/* Responsive main-menu bar icon tiles (hamburger + player close/3-dots): a solid shade of the bar
   colour at rest, a stronger shade of the SAME direction on hover. Own style (not .customHoverBg) so
   both states shift the same way and stay visible on any bar, incl. the admin blue. */
.admin-darkmode-color #mainmenu-toggle,
.admin-darkmode-color #player-close-btn,
.admin-darkmode-color #player-overlay-toggle {
  background-color: #064c95;
}
.admin-darkmode-color #mainmenu-toggle:hover,
.admin-darkmode-color #player-close-btn:hover,
.admin-darkmode-color #player-overlay-toggle:hover {
  background-color: #053e7b;
}
/* */
.admin-darkmode-color .modal-header,
.admin-darkmode-color .dark-color-background,
.admin-darkmode-color div#right-panel-info,
.admin-darkmode-color div#right-panel-help,
.admin-darkmode-color div#right-panel-helpdesk,
.admin-darkmode-color .ui-state-highlight,
.admin-darkmode-color .ui-widget-content .ui-state-highlight,
.admin-darkmode-color .ui-widget-header .ui-state-highlight,
.admin-darkmode-color .userCourseInfoButton,
.admin-darkmode-color .userCourseInfoButtonLines {
  background-color: rgba(7,84,166, 0.08);
}
.admin-darkmode-color .userCourseInfoButton:hover,
.admin-darkmode-color .userCourseInfoButtonLines:hover {
  background-color: rgba(7,84,166, 0.15);
}
/* Inputs */
.admin-darkmode-color input[type="file"],
.admin-darkmode-color input[type="text"],
.admin-darkmode-color input[type="number"],
.admin-darkmode-color input[type="search"],
.admin-darkmode-color input[type="password"],
.admin-darkmode-color textarea,
.admin-darkmode-color .default-selectbox,
.admin-darkmode-color .organizational-structure-pick-user-list,
.admin-darkmode-color #toggle-filter-list,
.admin-darkmode-color .toggle-filter-list,
.admin-darkmode-color .my-courses-list-type,
.admin-darkmode-color .catalog-list-type,
.admin-darkmode-color input:-webkit-autofill,
.admin-darkmode-color input:-webkit-autofill:hover,
.admin-darkmode-color input:-webkit-autofill:focus {
  border: 1px #000 solid;
  background: #121212;
  color: #BBB;
}
.admin-darkmode-color .sumoSelectOptWrapper .no-match,
.admin-darkmode-color .sumoSelectOptWrapper .select-all,
.admin-darkmode-color .sumoSelectOptWrapper .options {
  background: #121212;
  color: #BBB;
}
/* Disable inputs. */
.admin-darkmode-color input[type="text"]:disabled,
.admin-darkmode-color input[type="number"]:disabled,
.admin-darkmode-color input[type="file"]:disabled,
.admin-darkmode-color input[type="password"]:disabled,
.admin-darkmode-color textarea:disabled,
.admin-darkmode-color .SumoSelect.disabled {
  background-color: #1E1E1E;
  color: #999;
}
.admin-darkmode-color .lightBackgound {
  background-color: #222;
}
.admin-darkmode-color input[type="text"]:disabled:hover,
.admin-darkmode-color input[type="number"]:disabled:hover,
.admin-darkmode-color input[type="password"]:disabled:hover,
.admin-darkmode-color input[type="file"]:disabled:hover,
.admin-darkmode-color input[type="textarea"]:disabled:hover,
.admin-darkmode-color .SumoSelect.disabled:hover {
  box-shadow: none;
  border: 1px #333 solid;
}
/* Ico in login form on left side */
.admin-darkmode-color div.input i {
  border-right: 1px solid #222;
  color: #777;
}
/* borders for tooltip arrows */
.admin-darkmode-color .tooltip-top .tooltip-content::after {
  border-color: #0754a6 transparent transparent transparent;
}
.admin-darkmode-color .tooltip-bottom .tooltip-content::after {
  border-color: transparent transparent #0754a6 transparent;
}
.admin-darkmode-color .tooltip-right .tooltip-content::after {
  border-color: transparent #0754a6 transparent transparent;
}
.admin-darkmode-color .tooltip-left .tooltip-content::after {
  border-color: transparent transparent transparent #0754a6;
}
.admin-darkmode-color table.default-list-table > tbody > tr > td,
.admin-darkmode-color .tableList li > div {
  border-bottom: 1px solid #333;
  border-top: 1px solid #222;
}
.admin-darkmode-color .dashboard-grid-item .grid-stack-item-content,
.admin-darkmode-color .gray-background {
  background-color: #333;
}
.admin-darkmode-color .light-gray-background {
  background-color: #060606;
}
/* New line in table */
.admin-darkmode-color .newLineTR td,
.admin-darkmode-color .newLineTR {
  background-color: #020 !important;
}
/* Select all line int sumo select */
.admin-darkmode-color .sumoSelectOptWrapper .select-all {
  border-bottom: 1px solid #333;
}
.admin-darkmode-color .borderRight1,
.admin-darkmode-color .organizational-structure-table-selected > tbody > tr > td {
  border-right: 1px solid #333;
}
/* rule between the stacked selection columns below the tablet breakpoint */
@media (max-width: 768px) {
  .admin-darkmode-color .organizational-structure-table-selected > tbody > tr > td {
    border-bottom-color: #333;
  }
}
/* Color for rating stars. */
.admin-darkmode-color .course-score-stars {
  color: #ffcc66;
}
/** gray color */
.admin-darkmode-color .ui-datepicker-title {
  color: #999 !important;
}
/** Blue background, used in userForm - eCourses - Certificate column */
.admin-darkmode-color .blueBackground {
  background-color: #111133 !important;
}
.admin-darkmode-color .support-table:before {
  color: #eee;
}
.admin-darkmode-color .modal-wrapper {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.6);
  /* Black w/ opacity */
}
.admin-darkmode-color .modal-wrapper .modal {
  background-color: #1f1e1c;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.38);
}
.admin-darkmode-color #main-loader-wrapper .full-loader-block {
  background-color: #2A2A2A;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.38);
}
.admin-darkmode-color .fc-theme-standard td,
.admin-darkmode-color .fc-theme-standard th,
.admin-darkmode-color .fc-theme-standard .fc-scrollgrid,
.admin-darkmode-color .fc-theme-standard .fc-list,
.admin-darkmode-color .fc-theme-standard .fc-popover,
.admin-darkmode-color .ui-state-default,
.ui-widget-content .ui-state-default {
  border-color: #444 !important;
}
.admin-darkmode-color .fc-daygrid-day-top {
  color: #BBB !important;
}
.admin-darkmode-color .sumoSelectOptWrapper .sumo-bottom-delimiter {
  background-color: #555;
  border-bottom: 2px solid #121212;
  border-top: 1px solid #121212;
}
.admin-darkmode-color .searchHighlight {
  background-color: #45410d;
}
/* Mobile card list (etapa 6) — dark theme. Cards sit one step lighter than the #121212 body so they read
   as elevated; the body colour shows through the gaps. Desktop is untouched. */
@media (max-width: 768px) {
  .admin-darkmode-color table.mobile-cards > tbody > tr {
    background-color: #1E1E1E !important;
  }
  .admin-darkmode-color table.mobile-cards .mobile-title,
  .admin-darkmode-color table.mobile-cards .mobile-title a {
    color: #EDEDED !important;
  }
  /* The card list's container panel must not paint behind the cards: the wrapper is #1f1e1c, almost the same
     grey as the #1E1E1E cards, so the cards stop reading as elevated and the panel shows as a grey field
     below/around them. Making it transparent lets the #121212 body show through the gaps and below the last
     card, restoring the intended elevated-card look. `.default-white-background` covers tabbed pages
     (baseTabs.hbs puts it on every .tab-child, e.g. the UserForm list tabs), where the
     `.default-white-block` variant never matches. */
  .admin-darkmode-color .default-white-block:has(> .list-table-scroll-wrap > table.mobile-cards),
  .admin-darkmode-color .default-white-background:has(> .list-table-scroll-wrap > table.mobile-cards) {
    background-color: transparent;
    box-shadow: none;
  }
  /* Drop the grey avatar tile behind the leading icon so the icon sits directly on the card. */
  .admin-darkmode-color table.mobile-cards .mobile-lead {
    background: transparent;
  }
  /* Etapa-8 header-controls strip: the strip row must paint nothing (the generic card rule above
     also matches the implicit-tbody header row), and a KEPT header cell reads as a compact card —
     card surface + page text, never the desktop brand-colored header band. */
  .admin-darkmode-color table.mobile-cards.mobile-header-controls tr:has(> th) {
    background-color: transparent !important;
  }
  /* The strip's back/go-up arrow uses the existing brand font color (same as the Library
     breadcrumb home icon) — desktop is untouched, where the icon inherits the header-band font. */
  .admin-darkmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep i {
    color: #3986d8;
  }
  .admin-darkmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep {
    background-color: #1E1E1E;
    color: #EDEDED;
  }
}
/* Admin docked sidebar (desktop) — dark-mode scheme colours for the detached cards (see light-mode file). */
@media (min-width: 769px) {
  /* Logo card — brand colour + on-brand font. */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-right li:has(img.edunio-logo) {
    background-color: #0754a6;
    color: rgba(255,255,255,0.9);
  }
  /* Menu card — dark surface, light text. */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-panel {
    background-color: #1E1E1E;
    color: #BBB;
  }
  /* Top-bar card — dark surface, light icons. */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-right {
    background-color: #1C1C1C;
    color: #BBB;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  /* Header masking band (#mainmenu-wrapper, layout in global.php.less) — painted in the page-background colour so
     the floating cards keep reading as detached cards, while page content scrolling up behind them is hidden. */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-wrapper {
    background-color: #121212;
  }
  /* Collapse toggle — expanded: a bare light-blue icon on the brand logo card (no circle). Collapsed: a
     brand-blue circle (like the "E" card) with an on-brand white icon, ringed by the page-background colour. */
  .admin-darkmode-color.admin-sidebar-mode #sidebar-collapse-toggle {
    color: #8CB4E3;
  }
  .admin-darkmode-color.admin-sidebar-mode.admin-sidebar-collapsed #sidebar-collapse-toggle {
    background-color: #0754a6;
    color: #8CB4E3;
    border: 3px solid #121212;
  }
  /* Open-section card surface — the selected section AND any expanded section share it (the two open
     states must look identical; only the active accents differ). */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-left .menu-selected,
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-left .has-submenu.expanded {
    background-color: #2A2A2A;
  }
  /* Collapsed rail: the highlight moves off the full-width row onto the centered ~45px chip (::before,
     structure in global.php.less) so it wraps just the icon + dots, not the whole rail. */
  .admin-darkmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.menu-selected {
    background-color: transparent;
  }
  .admin-darkmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.menu-selected::before {
    background-color: #2A2A2A;
  }
  /* Only the section header turns brand-coloured; sub-items keep the neutral text colour. */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-left .menu-selected > .menu-ico,
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-left .menu-selected > .menu-text,
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-left .menu-selected > .submenu-arrow {
    color: #3986d8;
  }
  /* Chevron badge: a subtle rounded chip on the menu card. */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-left .has-submenu > .submenu-arrow {
    background-color: #2A2A2A;
    color: #BBB;
  }
  /* Active nested item — brand-tinted text. */
  .admin-darkmode-color.admin-sidebar-mode #mainmenu-left .mainmenu-submenu-item.submenu-active {
    color: #3986d8;
  }
  /* Collapsed active-section dots — grey by default; only the active sub-page's dot carries the brand fill. */
  .admin-darkmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.has-submenu.menu-selected > .submenu-dots .submenu-dot {
    background-color: #55585C;
  }
  .admin-darkmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.has-submenu.menu-selected > .submenu-dots .submenu-dot.submenu-dot-active {
    background-color: #3986d8;
  }
}