/* =============================================
   LIGHT MODE AMB ASPECTE DARK
   ============================================= */

/* Light mode: app bar i table.document amb aspecte dark */
html[data-theme="light"] table.document {
  background-color: #000 !important;
}

html[data-theme="light"] table.document table#head-app,
html[data-theme="light"] #head-app {
  background-color: #000 !important;
}

html[data-theme="light"] #head-app td,
html[data-theme="light"] #head-app .logo,
html[data-theme="light"] #head-app .logo a,
html[data-theme="light"] #head-app h1,
html[data-theme="light"] #head-app h2,
html[data-theme="light"] #head-app a,
html[data-theme="light"] #head-app font,
html[data-theme="light"] #head-app .topoptions font,
html[data-theme="light"] #head-app .topoptions a,
html[data-theme="light"] #head-app td:not(.logo):not(.topoptions) {
  color: #e0e0e0 !important;
}

html[data-theme="light"] #head-app .topoptions a:hover,
html[data-theme="light"] #head-app a:hover {
  color: #3dbdd9 !important;
}

html[data-theme="light"] #head-app .user-panel {
  background-color: rgba(58, 58, 58, 0.5) !important;
}

html[data-theme="light"] #head-app ul.quick_menu li {
  color: #e0e0e0 !important;
}

/* Light mode: logo blanc (com dark mode) al app bar */
html[data-theme="light"] #head-app .logo-light,
html[data-theme="light"] .intergrid-logo-column .logo-light {
  display: none !important;
}

html[data-theme="light"] #head-app .logo-dark,
html[data-theme="light"] .intergrid-logo-column .logo-dark {
  display: inline !important;
}

html[data-theme="light"] #head-app .logo-dark,
html[data-theme="light"] .intergrid-logo-column .logo-dark {
  margin-left: 7px;
}

/* Light mode: barra d'aplicacions (#apps) amb aspecte dark */
html[data-theme="light"] div#apps {
  background-color: #000 !important;
  border-right: 1px solid #000 !important;
}

html[data-theme="light"] div#apps a,
html[data-theme="light"] div#apps .app,
html[data-theme="light"] div#apps i,
html[data-theme="light"] div#apps svg {
  color: #e0e0e0 !important;
  fill: #e0e0e0;
}

/* Light mode: leftmenu amb aspecte dark */
html[data-theme="light"] .leftmenu-content-wrapper {
  background: #30343b !important;
  border-right: 1px solid #181a1f !important;
}

/* Items del menú en dark */
html[data-theme="light"] #leftmenu ul ul li {
  border-bottom: 1px solid rgba(64, 64, 64, 0.3) !important;
  width: 100% !important;
}

html[data-theme="light"] #leftmenu li div#butmenu div.menu_name,
html[data-theme="light"] #leftmenu ul ul li a {
  color: #b0b0b0 !important;
}

html[data-theme="light"] #leftmenu li:hover div#butmenu div.menu_name {
  color: #fff !important;
}

/* Item seleccionat - fons blanc amb text i icona negres */
html[data-theme="light"] #leftmenu li.selected div#butmenu,
html[data-theme="light"] #leftmenu li.sub_selected div#butmenu {
  background: #fff !important;
}

html[data-theme="light"] #leftmenu li.selected div#butmenu div.menu_name,
html[data-theme="light"] #leftmenu li.sub_selected div#butmenu div.menu_name {
  color: #000 !important;
}

/* Icones del menú (img): visibles sobre fons fosc en light mode */
html[data-theme="light"] div#butmenu div.menu_icon img {
  filter: invert(1) brightness(0.85) !important;
}

/* Icones (img) sobre fons blanc quan seleccionat: sense invert */
html[data-theme="light"] #leftmenu li.selected div#butmenu div.menu_icon img,
html[data-theme="light"] #leftmenu li.sub_selected div#butmenu div.menu_icon img {
  filter: brightness(0.1) !important;
}

html[data-theme="light"] #leftmenu li:hover div#butmenu div.menu_icon img {
  filter: invert(1) brightness(1.2) !important;
}

/* Icones FontAwesome (i.fa): blanques sobre fons fosc */
html[data-theme="light"] #leftmenu div#butmenu div.menu_icon i,
html[data-theme="light"] #leftmenu a i.fa {
  color: #e0e0e0 !important;
}

html[data-theme="light"] #leftmenu li:hover div#butmenu div.menu_icon i,
html[data-theme="light"] #leftmenu li:hover a i.fa {
  color: #fff !important;
}

/* Icones FontAwesome quan seleccionat: negres sobre fons blanc */
html[data-theme="light"] #leftmenu li.selected div#butmenu div.menu_icon i,
html[data-theme="light"] #leftmenu li.sub_selected div#butmenu div.menu_icon i {
  color: #000 !important;
}

/* Panel header del leftmenu en dark */
html[data-theme="light"] #leftmenu-panel-header .mod-header-icon {
  color: #fff !important;
}

html[data-theme="light"] #leftmenu-panel-header .mod-header-title h2 {
  color: #ffffff8a !important;
}

/* Light mode: selector de tema sempre amb aspecte dark */
html[data-theme="light"] .slider {
  background-color: #3a4a5c !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4) !important;
}

html[data-theme="light"] .switch input:checked + .slider {
  background-color: #8b949e !important;
}