/*
*/
body.admin-lightmode-color.main-body {
  background-color: #F0F3F6;
  color: #505050;
}
.admin-lightmode-color a.invisibleHyperlink,
.admin-lightmode-color a.invisibleHyperlink:visited,
.admin-lightmode-color .fc-toolbar-title,
.admin-lightmode-color .fc-icsButton-button.fc-button-primary,
.admin-lightmode-color .fc-col-header-cell-cushion,
.admin-lightmode-color .fc-daygrid-day-number,
.admin-lightmode-color .common-text-color,
.admin-lightmode-color .custom-background .menu-selected,
.admin-lightmode-color .custom-background .customHoverBg.has-submenu.expanded {
  color: #505050;
}
.admin-lightmode-color .faPrimaryDefault {
  --fa-primary-color: #505050;
}
/* Default block with white background and shadow */
.admin-lightmode-color .default-white-block,
.admin-lightmode-color .infoBox,
.admin-lightmode-color .support-table,
.admin-lightmode-color .userCourseTilesDiv {
  box-shadow: 0 1px 4px #eaeaea;
}
.admin-lightmode-color div.infoBox:hover,
.admin-lightmode-color .hyperlinkBox:hover,
.admin-lightmode-color .default-list-table > tbody > tr:hover,
.admin-lightmode-color .filter-table table.filter-table-items td:hover,
.admin-lightmode-color .tableList li > div:hover {
  background-color: #FAFAFA;
}
.admin-lightmode-color .codeBlock {
  background-color: #EEE;
  border: 1px solid #DDD;
}
/* Default background color for inputs. */
.admin-lightmode-color .default-white-background,
.admin-lightmode-color .default-white-block,
.admin-lightmode-color .infoBox,
.admin-lightmode-color #submenu-panel,
.admin-lightmode-color .tooltip-content,
.admin-lightmode-color .errorTooltip,
.admin-lightmode-color .pcr-app,
.admin-lightmode-color .tab-active,
.admin-lightmode-color .ui-datepicker,
.admin-lightmode-color .table-menu li,
.admin-lightmode-color .button-right-help,
.admin-lightmode-color .support-table,
.admin-lightmode-color input:not(:checked) + .toggleSlider,
.admin-lightmode-color .reverseSlider input:checked + .toggleSlider,
.admin-lightmode-color input:checked + .toggleSlider:before,
.admin-lightmode-color .reverseSlider input:not(:checked) + .toggleSlider:before,
.admin-lightmode-color .userCourseTilesDiv,
.admin-lightmode-color .userCourseTableList td,
.admin-lightmode-color .userSurveyTableList td,
.admin-lightmode-color .userKPITableList td,
.admin-lightmode-color .userTrainingEventsTableList td,
.admin-lightmode-color .userTrainingEventsTableList div,
.admin-lightmode-color .tileOverlay .playButton,
.admin-lightmode-color .fc-icsButton-button.fc-button-primary,
.admin-lightmode-color .fc-icsButton-button.fc-button-primary:hover,
.admin-lightmode-color .checkbox-container input[type="radio"] ~ .checkbox-image:after,
.admin-lightmode-color .custom-background .menu-selected,
.admin-lightmode-color .custom-background .customHoverBg.has-submenu.expanded {
  background-color: #FFF;
}
.admin-lightmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i::after,
.admin-lightmode-color .sumoSelectOptWrapper .select-all.selected > span i::after {
  color: #FFF;
}
.admin-lightmode-color .checkbox-container input[type="checkbox"]:checked ~ .checkbox-image:after {
  border-color: #FFF;
}
.admin-lightmode-color .white-checkbox input[type="checkbox"]:checked ~ .checkbox-image:after,
.admin-lightmode-color .filter-overlay input[type="checkbox"]:checked ~ .checkbox-image:after {
  border-color: #000;
}
.admin-lightmode-color .custom-color-reverse-button {
  background-color: rgba(255,255,255,0.9) !important;
}
/* Box shadow for submenu */
.admin-lightmode-color #submenu-panel {
  box-shadow: 0 0px 4px #cfcfcf;
}
/* Border color for inputs and some items. */
.admin-lightmode-color .table-menu li,
.admin-lightmode-color .button-right-help,
.admin-lightmode-color .filter-table table.filter-table-items td,
.admin-lightmode-color .checkbox-container input ~ .checkbox-image,
.admin-lightmode-color .sumoSelectOptWrapper .select-all > span i,
.admin-lightmode-color .sumoSelectOptWrapper.multiple > .options li.opt span i,
.admin-lightmode-color .light-gray-border,
.admin-lightmode-color .dashboard-course-block .dashboard-course-ico {
  border: 1px solid #ddd;
}
.admin-lightmode-color .table-menu li.empty {
  border: none !important;
  background: none !important;
}
/* Bottom border color for items in drop. */
.admin-lightmode-color .sumoSelectOptWrapper > .options li.opt,
.admin-lightmode-color .sumoSelectOptWrapper > .options li.group > label,
.admin-lightmode-color .organizational-structure-pick-user-list-table tr,
.admin-lightmode-color #study-reports-tasks-table table.task {
  border-bottom: 1px solid #f5f5f5;
}
/* color of watermarks */
.admin-lightmode-color #confirm-modal:before,
.admin-lightmode-color #study-reports-modal-body:before,
.admin-lightmode-color .watermark:before {
  color: rgba(0, 0, 0, 0.02);
}
/* custom background color */
.admin-lightmode-color .custom-background,
.admin-lightmode-color input[type="submit"],
.admin-lightmode-color input[type="button"],
.admin-lightmode-color .custom-background-selected,
.admin-lightmode-color .custom-background-hover:hover,
.admin-lightmode-color .custom-background-focus:focus,
.admin-lightmode-color .default-list-table > tbody > tr > th,
.admin-lightmode-color .filter-table table.filter-table-items td.selected,
.admin-lightmode-color .icoButton,
.admin-lightmode-color .ui-datepicker-calendar .ui-state-active,
.admin-lightmode-color .fc-button-primary {
  background-color: #0754a6;
}
.admin-lightmode-color input:checked + .toggleSlider,
.admin-lightmode-color .reverseSlider input:not(:checked) + .toggleSlider,
.admin-lightmode-color input:not(:checked) + .toggleSlider:before,
.admin-lightmode-color .reverseSlider input:checked + .toggleSlider:before,
.admin-lightmode-color .sumoSelectOptWrapper.multiple > .options li.opt.selected span i,
.admin-lightmode-color .sumoSelectOptWrapper .select-all.selected > span i,
.admin-lightmode-color .checkbox-container input:checked ~ .checkbox-image {
  background-color: #0754a6;
}
.admin-lightmode-color .checkbox-container input:checked ~ .checkbox-image {
  border: 1px solid #0754a6;
}
.admin-lightmode-color .user-color-border-bottom {
  border-bottom: 1px solid #0754a6;
}
/* custom 1px border color */
.admin-lightmode-color input[type="submit"],
.admin-lightmode-color input[type="button"],
.admin-lightmode-color input[type="text"]:hover .admin-lightmode-color input[type="number"]:hover,
.admin-lightmode-color input[type="password"]:hover,
.admin-lightmode-color input[type="file"]:hover,
.admin-lightmode-color textarea:hover,
.admin-lightmode-color input[type="text"]:focus,
.admin-lightmode-color input[type="number"]:focus,
.admin-lightmode-color input[type="password"]:focus,
.admin-lightmode-color input[type="file"]:focus,
.admin-lightmode-color .checkbox-container:hover .checkbox-image,
.admin-lightmode-color .checkbox-container:focus .checkbox-image,
.admin-lightmode-color textarea:focus,
.admin-lightmode-color .default-selectbox:hover,
.admin-lightmode-color .custom-border,
.admin-lightmode-color .tooltip-content,
.admin-lightmode-color .filter-table table.filter-table-items td.selected,
.admin-lightmode-color .icoButton,
.admin-lightmode-color .ui-state-highlight,
.admin-lightmode-color .ui-widget-content .ui-state-highlight,
.admin-lightmode-color .ui-widget-header .ui-state-highlight,
.admin-lightmode-color .ui-datepicker-calendar .ui-state-active,
.admin-lightmode-color .toggleSlider,
.admin-lightmode-color .my-courses-list-type:hover,
.admin-lightmode-color .my-courses-list-type:focus,
.admin-lightmode-color .catalog-list-type:hover,
.admin-lightmode-color .catalog-list-type:focus,
.admin-lightmode-color .sumoSelectOptWrapper .options,
.admin-lightmode-color .sumoSelectOptWrapper .select-all,
.admin-lightmode-color .sumoSelectOptWrapper .no-match {
  border: 1px solid #0754a6;
}
/* readonly inputs */
.admin-lightmode-color input[type="text"]:read-only,
.admin-lightmode-color input[type="number"]:read-only,
.admin-lightmode-color input[type="file"]:disabled,
.admin-lightmode-color input[type="password"]:read-only,
.admin-lightmode-color textarea:read-only,
.admin-lightmode-color .addButton.disabled {
  background-color: #eee !important;
  color: #555 !important;
  border: 1px #ddd solid !important;
}
/** readonly checkbox and radio */
.admin-lightmode-color input:disabled ~ .custom-border {
  background-color: #e4e4e4 !important;
  border: 1px #e4e4e4 solid !important;
}
.admin-lightmode-color .cbHelpButton {
  border-color: #C0C0C0 !important;
}
.admin-lightmode-color .checkbox-container.readonly:hover .custom-border,
.admin-lightmode-color .checkbox-container.readonly:focus .custom-border {
  box-shadow: none !important;
}
/* custom box shadow custom color */
.admin-lightmode-color input[type="submit"],
.admin-lightmode-color input[type="button"],
.admin-lightmode-color input[type="text"]:hover,
.admin-lightmode-color input[type="number"]:hover,
.admin-lightmode-color input[type="search"]:hover,
.admin-lightmode-color input[type="password"]:hover,
.admin-lightmode-color input[type="file"]:hover,
.admin-lightmode-color textarea:hover,
.admin-lightmode-color input[type="text"]:focus,
.admin-lightmode-color input[type="number"]:focus,
.admin-lightmode-color input[type="search"]:focus,
.admin-lightmode-color input[type="password"]:focus,
.admin-lightmode-color input[type="file"]:focus,
.admin-lightmode-color .checkbox-container:hover .checkbox-image,
.admin-lightmode-color .checkbox-container:focus .checkbox-image,
.admin-lightmode-color textarea:focus,
.admin-lightmode-color .default-selectbox:hover,
.admin-lightmode-color .checkbox-container:hover .custom-border,
.admin-lightmode-color .checkbox-container:focus .custom-border,
.admin-lightmode-color .tooltip-content,
.admin-lightmode-color .errorTooltip,
.admin-lightmode-color .my-courses-list-type:hover,
.admin-lightmode-color .my-courses-list-type:focus,
.admin-lightmode-color .catalog-list-type:hover,
.admin-lightmode-color .catalog-list-type:focus,
.admin-lightmode-color .sumoSelectOptWrapper .options,
.admin-lightmode-color .sumoSelectOptWrapper .select-all,
.admin-lightmode-color .sumoSelectOptWrapper .no-match {
  box-shadow: 0 0 2px #0754a6;
}
.admin-lightmode-color .redShadowBox,
.admin-lightmode-color .redShadowBoxParent .SumoSelect {
  background-color: #FFF2F2 !important;
  border: 1px solid #DAA !important;
}
.admin-lightmode-color .checkbox-container input[type=checkbox]:checked ~ .checkbox-image.redShadowBox:after,
.admin-lightmode-color .checkbox-container input[type=radio]:checked ~ .checkbox-image.redShadowBox:after {
  border-color: #9F3A38 !important;
  background-color: #9F3A38 !important;
}
.admin-lightmode-color .redBackground {
  background-color: #FFF2F2 !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. */
.admin-lightmode-color .errorTooltip,
.admin-lightmode-color .errorTooltip::after {
  color: #9F3A38;
}
/* 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-lightmode-color .errorTooltip {
  border: 1px solid #DAA;
}
.admin-lightmode-color .errorTooltip:before {
  border-color: transparent transparent #DAA transparent;
}
/* custom color on hyperlinks */
.admin-lightmode-color .SumoSelect > .CaptionCont > label > i:before,
.admin-lightmode-color .ui-datepicker .ui-datepicker-prev:before,
.admin-lightmode-color .ui-datepicker .ui-datepicker-next:before,
.admin-lightmode-color .ui-state-highlight,
.admin-lightmode-color .ui-widget-content .ui-state-highlight,
.admin-lightmode-color .ui-widget-header .ui-state-highlight,
.admin-lightmode-color .support-table th {
  color: #0754a6;
}
.admin-lightmode-color .custom-color-reverse-button {
  color: #0754a6 !important;
}
.admin-lightmode-color .custom-color-font,
.admin-lightmode-color #mainmenu-panel.menu-open #mainmenu-left .mainmenu-submenu-item.submenu-active,
.admin-lightmode-color a,
.admin-lightmode-color a:visited,
.admin-lightmode-color .hyperlink,
.admin-lightmode-color .hyperlink:visited,
.admin-lightmode-color .tab-active,
.admin-lightmode-color .tooltip-content {
  color: #0754a6;
}
/* font color on custom color background */
.admin-lightmode-color .custom-background,
.admin-lightmode-color .custom-background a,
.admin-lightmode-color .custom-background a:visited,
.admin-lightmode-color .SumoSelect.sumo_mainmenuLang > .CaptionCont > label > i:before,
.admin-lightmode-color input[type="submit"],
.admin-lightmode-color input[type="button"],
.admin-lightmode-color .custom-background-selected,
.admin-lightmode-color .custom-background-hover:hover,
.admin-lightmode-color .custom-background-focus:focus,
.admin-lightmode-color .default-list-table > tbody > tr > th,
.admin-lightmode-color .filter-table table.filter-table-items td.selected,
.admin-lightmode-color .icoButton,
.admin-lightmode-color .ui-datepicker-calendar .ui-state-active,
.admin-lightmode-color .fc-button-primary {
  color: rgba(255,255,255,0.9);
}
/* Border color for checkbox on custom color background */
.admin-lightmode-color .white-checkbox span,
.admin-lightmode-color .filter-overlay .checkbox-image {
  border-color: rgba(255,255,255,0.9) !important;
}
/* overlay background image for hovered/selected item on custom color */
.admin-lightmode-color .custom-background .customHoverBg:hover,
.admin-lightmode-color .custom-background .customSelectedBg,
.admin-lightmode-color .sumoSelectOptWrapper li.opt:hover,
.admin-lightmode-color .sumoSelectOptWrapper .select-all:hover,
.admin-lightmode-color input[type="submit"]:hover,
.admin-lightmode-color input[type="button"]:hover,
.admin-lightmode-color input[type="submit"]:focus,
.admin-lightmode-color input[type="button"]:focus,
.admin-lightmode-color .red-button:hover,
.admin-lightmode-color .red-button:focus,
.admin-lightmode-color .addButton:hover,
.admin-lightmode-color .addButton:focus,
.admin-lightmode-color .icoButton:hover,
.admin-lightmode-color .icoButton:focus,
.admin-lightmode-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-lightmode-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-lightmode-color #mainmenu-toggle,
.admin-lightmode-color #player-close-btn,
.admin-lightmode-color #player-overlay-toggle {
  background-color: #064c95;
}
.admin-lightmode-color #mainmenu-toggle:hover,
.admin-lightmode-color #player-close-btn:hover,
.admin-lightmode-color #player-overlay-toggle:hover {
  background-color: #053e7b;
}
/* */
.admin-lightmode-color .modal-header,
.admin-lightmode-color .dark-color-background,
.admin-lightmode-color div#right-panel-info,
.admin-lightmode-color div#right-panel-help,
.admin-lightmode-color div#right-panel-helpdesk,
.admin-lightmode-color .ui-state-highlight,
.admin-lightmode-color .ui-widget-content .ui-state-highlight,
.admin-lightmode-color .ui-widget-header .ui-state-highlight,
.admin-lightmode-color .userCourseInfoButton,
.admin-lightmode-color .userCourseInfoButtonLines {
  background-color: rgba(7,84,166, 0.05);
}
.admin-lightmode-color .userCourseInfoButton:hover,
.admin-lightmode-color .userCourseInfoButtonLines:hover {
  background-color: rgba(7,84,166, 0.13);
}
/* Inputs */
.admin-lightmode-color input[type="file"],
.admin-lightmode-color input[type="text"],
.admin-lightmode-color input[type="number"],
.admin-lightmode-color input[type="search"],
.admin-lightmode-color input[type="password"],
.admin-lightmode-color textarea,
.admin-lightmode-color .default-selectbox,
.admin-lightmode-color .organizational-structure-pick-user-list,
.admin-lightmode-color #toggle-filter-list,
.admin-lightmode-color .toggle-filter-list,
.admin-lightmode-color .my-courses-list-type,
.admin-lightmode-color .catalog-list-type {
  border: 1px #ddd solid;
  background: #FFF;
  color: #444;
}
.admin-lightmode-color .sumoSelectOptWrapper .no-match,
.admin-lightmode-color .sumoSelectOptWrapper .select-all,
.admin-lightmode-color .sumoSelectOptWrapper .options {
  background: #FFF;
  color: #444;
}
/* Disable inputs. */
.admin-lightmode-color input[type="text"]:disabled,
.admin-lightmode-color input[type="number"]:disabled,
.admin-lightmode-color input[type="file"]:disabled,
.admin-lightmode-color input[type="password"]:disabled,
.admin-lightmode-color textarea:disabled,
.admin-lightmode-color .SumoSelect.disabled {
  background-color: #EEE;
  color: #888;
}
.admin-lightmode-color .lightBackgound,
.admin-lightmode-color .note-editing-area {
  background-color: #EEE;
}
.admin-lightmode-color input[type="text"]:disabled:hover,
.admin-lightmode-color input[type="number"]:disabled:hover,
.admin-lightmode-color input[type="password"]:disabled:hover,
.admin-lightmode-color input[type="file"]:disabled:hover,
.admin-lightmode-color input[type="textarea"]:disabled:hover,
.admin-lightmode-color .SumoSelect.disabled:hover {
  box-shadow: none;
  border: 1px #ddd solid;
}
/* Ico in login form on left side */
.admin-lightmode-color div.input i {
  border-right: 1px solid #DDD;
  color: #777;
}
/* borders for tooltip arrows */
.admin-lightmode-color .tooltip-top .tooltip-content::after {
  border-color: #0754a6 transparent transparent transparent;
}
.admin-lightmode-color .tooltip-bottom .tooltip-content::after {
  border-color: transparent transparent #0754a6 transparent;
}
.admin-lightmode-color .tooltip-right .tooltip-content::after {
  border-color: transparent #0754a6 transparent transparent;
}
.admin-lightmode-color .tooltip-left .tooltip-content::after {
  border-color: transparent transparent transparent #0754a6;
}
.admin-lightmode-color table.default-list-table > tbody > tr > td,
.admin-lightmode-color .tableList li > div {
  border-bottom: 1px solid #F2F2F2;
  border-top: 1px solid #EEE;
}
.admin-lightmode-color .dashboard-grid-item .grid-stack-item-content,
.admin-lightmode-color .gray-background {
  background-color: #ddd;
}
.admin-lightmode-color .light-gray-background {
  background-color: #F8F8F8;
}
/* New line in table */
.admin-lightmode-color .newLineTR td,
.admin-lightmode-color .newLineTR {
  background-color: #DFD !important;
}
/* Select all line int sumo select */
.admin-lightmode-color .sumoSelectOptWrapper .select-all {
  border-bottom: 1px solid #ddd;
}
.admin-lightmode-color .borderRight1,
.admin-lightmode-color .organizational-structure-table-selected > tbody > tr > td {
  border-right: 1px solid #DDD;
}
/* rule between the stacked selection columns below the tablet breakpoint */
@media (max-width: 768px) {
  .admin-lightmode-color .organizational-structure-table-selected > tbody > tr > td {
    border-bottom-color: #DDD;
  }
}
/* Color for rating stars. */
.admin-lightmode-color .course-score-stars {
  color: #ffcc66;
}
/** gray color */
.admin-lightmode-color .ui-datepicker-title {
  color: #444 !important;
}
/** Blue background, used in userForm - eCourses - Certificate column */
.admin-lightmode-color .blueBackground {
  background-color: #f1f6ff !important;
}
.admin-lightmode-color .support-table:before {
  color: #eee;
}
.admin-lightmode-color .modal-wrapper {
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}
.admin-lightmode-color .modal-wrapper .modal {
  background-color: #fefefe;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.admin-lightmode-color #main-loader-wrapper .full-loader-block {
  background-color: #fefefe;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.admin-lightmode-color .fc-theme-standard td,
.admin-lightmode-color .fc-theme-standard th,
.admin-lightmode-color .fc-theme-standard .fc-scrollgrid,
.admin-lightmode-color .fc-theme-standard .fc-list,
.admin-lightmode-color .fc-theme-standard .fc-popover,
.admin-lightmode-color .ui-state-default,
.ui-widget-content .ui-state-default {
  border-color: #ddd !important;
}
.admin-lightmode-color .fc-daygrid-day-top {
  color: #505050 !important;
}
.admin-lightmode-color .sumoSelectOptWrapper .sumo-bottom-delimiter {
  background-color: #f5f5f5;
  border-bottom: 2px solid #fff;
  border-top: 1px solid #fff;
}
.admin-lightmode-color .searchHighlight {
  background-color: #fcf585;
}
/* Mobile card list (etapa 6) — light theme. Below 768px the list table becomes white cards that read as 3
   distinct blocks via their border + shadow on the white .default-white-block wrapper (matches the dark
   theme, where the body shows through). Desktop is untouched. */
@media (max-width: 768px) {
  /* The card list's container panel must not paint behind the cards: making the wrapper transparent lets
     the grey page body show through the gaps and below the last card, so only the white cards are white
     (matches the dark theme, where the #121212 body shows). The earlier #ECEEF1 table fill is dropped —
     the page body now provides the grey field. `.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-lightmode-color .default-white-block:has(> .list-table-scroll-wrap > table.mobile-cards),
  .admin-lightmode-color .default-white-background:has(> .list-table-scroll-wrap > table.mobile-cards) {
    background-color: transparent;
    box-shadow: none;
  }
  /* !important beats the legacy alternating-row (zebra) background so every card is uniformly white. */
  .admin-lightmode-color table.mobile-cards > tbody > tr {
    background-color: #FFFFFF !important;
  }
  /* Card title in a strong near-black so it reads as a heading (overrides muted invisibleHyperlink grey). */
  .admin-lightmode-color table.mobile-cards .mobile-title,
  .admin-lightmode-color table.mobile-cards .mobile-title a {
    color: #2A2F36 !important;
  }
  /* Drop the grey avatar tile behind the leading icon so the icon sits directly on the card. */
  .admin-lightmode-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-lightmode-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-lightmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep i {
    color: #0754a6;
  }
  .admin-lightmode-color table.mobile-cards.mobile-header-controls tr:has(> th) > th.mobile-keep {
    background-color: #FFFFFF;
    color: #2A2F36;
  }
}
/* Admin docked sidebar (desktop) — scheme colours for the detached cards. Layout/rounding lives in
   global.php.less; here only the surfaces: the LOGO card keeps the brand colour, the MENU card and TOP-BAR
   card are light surfaces with the page text colour, the selected row gets a brand-tinted highlight. */
@media (min-width: 769px) {
  /* Logo card — brand colour + on-brand font (the wordmark / "E" mark sits here). */
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-right li:has(img.edunio-logo) {
    background-color: #0754a6;
    color: rgba(255,255,255,0.9);
  }
  /* Menu card — a light blue-grey surface (distinct from the white content cards, so the menu reads as a
     separate sidebar), dark text (overrides the .custom-background purple). Matches the mockup (#E9ECF5). */
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-panel {
    background-color: #E9ECF5;
    color: #505050;
  }
  /* Top-bar card — light surface, dark icons. */
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-right {
    background-color: #FFF;
    color: #505050;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }
  /* 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-lightmode-color.admin-sidebar-mode #mainmenu-wrapper {
    background-color: #F0F3F6;
  }
  /* 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-lightmode-color.admin-sidebar-mode #sidebar-collapse-toggle {
    color: #8CB4E3;
  }
  .admin-lightmode-color.admin-sidebar-mode.admin-sidebar-collapsed #sidebar-collapse-toggle {
    background-color: #0754a6;
    color: #8CB4E3;
    border: 3px solid #F0F3F6;
  }
  /* 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-lightmode-color.admin-sidebar-mode #mainmenu-left .menu-selected,
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-left .has-submenu.expanded {
    background-color: #F9FAFC;
  }
  /* 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-lightmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.menu-selected {
    background-color: transparent;
  }
  .admin-lightmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.menu-selected::before {
    background-color: #F9FAFC;
  }
  /* Only the section header (icon/text/chevron) turns brand-coloured; sub-items keep the neutral text colour. */
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-left .menu-selected > .menu-ico,
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-left .menu-selected > .menu-text,
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-left .menu-selected > .submenu-arrow {
    color: #0754a6;
  }
  /* Chevron badge: a near-white rounded chip on the menu card, with a darker chevron glyph. */
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-left .has-submenu > .submenu-arrow {
    background-color: #F9FAFD;
    color: #616162;
  }
  /* Active nested item — brand-coloured text. */
  .admin-lightmode-color.admin-sidebar-mode #mainmenu-left .mainmenu-submenu-item.submenu-active {
    color: #0754a6;
  }
  /* Collapsed active-section dots — grey by default; only the active sub-page's dot carries the brand fill. */
  .admin-lightmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.has-submenu.menu-selected > .submenu-dots .submenu-dot {
    background-color: #C4C8D0;
  }
  .admin-lightmode-color.admin-sidebar-mode.admin-sidebar-collapsed #mainmenu-left > li.has-submenu.menu-selected > .submenu-dots .submenu-dot.submenu-dot-active {
    background-color: #0754a6;
  }
}