
/*** 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(app-header) {
	@media (max-width: 600px) {
	  et2-image {
		min-width: 1em;
		flex-shrink: 0;
	  }
	}
  }
  &::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;
  	@media (max-width: 600px) {
	  /* Don't need to show name if things are small */
	  min-width: initial;
	}
  }

  /* 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(--template-custom-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):not(.et2-filterbox--has-lettersearch) {
	.nextmatch_header {
	  height: 0px;
	  overflow: hidden;
	}
  }
  .et2_nextmatch.et2-filterbox--loaded.et2-filterbox--has-lettersearch:not(.et2-filterbox--has-header) {
	.nextmatch_header_row { display: none;}
  }
  .et2_nextmatch .nextmatch_header.nm_header_hide{
	display: none !important;
	+ div > table > thead{
	  display: none !important;
	}

  }

  /** 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;
	}
  }
}

/* non-default application colors, are set server-side by Api\Framework::app_colors() in a style-tag in the header */
body, :root {
  // Color code for application without an individual color
  egw-app {
	  --application-color: var(--default-color);
  }
}

/*** END APPLICATION ***/