
/*** APPLICATION ***/
egw-app {
  --application-header-text-color: var(--sl-color-neutral-200);
  div[id$='index']{
	overflow: auto;
  }


  /* Lock size of left menu section for small screens */

  @media (max-width: 800px) {
	--left-max: 50%;
  }
  @media (max-width: 600px) {
	--left-max: 100%;
	--left-min: 100%;
  }

  &::part(name) {
	display: flex;
	align-items: center;
	text-wrap: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	--image-filter: brightness(0) invert(1);
  }

  &::part(header)
  {
	display: flex;
	background-color: transparent;
	overflow: hidden;
  }

  /* Nice formatting for templates slotted into header (no need to wrap contents in et2-hbox) */

  et2-template[slot="main-header"] {
	&::part(base) {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
  }
  /* Nice formatting for custom templates slotted into filter */

  [slot="filter"], [slot="filter"] > et2-template, [slot="filter"] {
	&::part(base), &::part(content) {
	  display: flex;
	  flex-direction: column;
	  gap: var(--gap-width);
	}
  }
  et2-details::part(content) {
	display: flex;
	flex-direction: column;
	gap: var(--gap-width);
  }

  &::part(row-count) {

  }
  &::part(content) {
	position: relative;
	flex-direction: column;
	overflow-y:hidden;
  }

  &::part(filter) {
	--size: 40em;
	--label-width: max(15em, 30%);
	@media (max-width: 800px) {
	  --size: 100%;
	}
  }

  &::part(filter__panel) {
	z-index: var(--sl-z-index-drawer);
  }

  /* Application template gets full height */
  & > div[id] > div, & > div[id] > et2-template {
	height: 100%;
  }

  et2-favorites-menu::part(menu) {
	border: none;
	border-radius: initial;
  }
  /*sidebox styling
  * same styling should apply to sl-details.favorites inside the EgwFrameworkApp.styles.ts
  */
  &::part(details-header) {
	background-color: var(--application-color, var(--sl-color-primary-800, lightblue));
	padding-block: var(--sl-spacing-3x-small);
	margin: var(--sl-spacing-medium);
	margin-bottom: 0;
	color: var(--application-header-text-color);
  }
  &::part(details-base) {
	border:none;
	border-radius: 0;
  }
  &::part(content) {
	padding: 0;
  }

  /** Clean nextmatch headers **/
  /* Hide nextmatch header, it's in the framework now */

  .et2_nextmatch.et2-filterbox--loaded:not(.et2-filterbox--none):not(.et2-filterbox--has-header) {
	.nextmatch_header {
	  height: 0px;
	  overflow: hidden;
	}
  }

  /** filter drawer styling**/

  *[slot="filter"] et2-details {
	&:has(> .et2_customfield_list:only-child > tbody:empty) {
	  display: none;
	}
	&:has(> .et2_customfield_list:only-child:empty) {
	  display: none;
	}
  }
}

/* Individual application colors, should go in each app's CSS */
body, :root {
  // Color code for applications - not used by framework
  --addressbook-color: #003366;
  --admin-color: #333333;
  --bookmarks-color: #CC6633;
  --calendar-color: #CC0033;
  --filemanager-color: #ff9933;
  --infolog-color: #660033;
  --mail-color: #006699;
  --projectmanager-color: #669999;
  --resources-color: #003333;
  --timesheet-color: #330066;
  --tracker-color: #009966;
  --wiki-color: #797979;
  --ranking-color: #404040;
  --default-color: #797979;
  --kanban-color: #4663c8;
  --smallpart-color: #303333;

  egw-app[name="addressbook"] {
	--application-color: var(--addressbook-color);
  }

  egw-app[name="admin"] {
	--application-color: var(--admin-color);
  }

  egw-app[name="bookmarks"] {
	--application-color: var(--bookmarks-color);
  }

  egw-app[name="calendar"] {
	--application-color: var(--calendar-color);
  }

  egw-app[name="filemanager"] {
	--application-color: var(--filemanager-color);
  }

  egw-app[name="infolog"] {
	--application-color: var(--infolog-color);
  }

  egw-app[name="mail"] {
	--application-color: var(--mail-color);
  }

  egw-app[name="projectmanager"] {
	--application-color: var(--projectmanager-color);
  }

  egw-app[name="resources"] {
	--application-color: var(--resources-color);
  }

  egw-app[name="timesheet"] {
	--application-color: var(--timesheet-color);
  }

  egw-app[name="tracker"] {
	--application-color: var(--tracker-color);
  }

  egw-app[name="wiki"] {
	--application-color: var(--wiki-color);
  }

  egw-app[name="ranking"] {
	--application-color: var(--ranking-color);
  }

  egw-app[name="smallpart"] {
	--application-color: var(--smallpart-color);
  }
}

/*** END APPLICATION ***/
