@import 'custom/vaadin-menu-bar-button.css';

html, :host{
  --lumo-font-family: 'Noto Sans', Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
  
  --lumo-font-size-xxs: 0.625rem;
  --lumo-font-size-xs: 0.6875rem;
  --lumo-font-size-s: 0.75rem;
  --lumo-font-size-m: 0.8125rem;
  --lumo-font-size-l: 0.875rem;
  --lumo-font-size-xl: 1rem;
  --lumo-font-size-xxl: 1.125rem;
  --lumo-font-size-xxxl: 1.5rem;
  
  --lumo-icon-size-m: 1.375rem;
  
  --vaadin-button-font-size: var(--lumo-font-size-s);
}

/*html, :host {
  --lumo-icon-size-s: 1em;
  --lumo-space-xl: 1.75rem;
  --lumo-space-l: 1.125rem;
  --lumo-space-m: 0.5rem;
  --lumo-space-s: 0.25rem;
  --lumo-space-xs: 0.125rem;
  --lumo-size-xl: 2.5rem;
  --lumo-size-l: 2rem;
  --lumo-size-m: 1.75rem;
  --lumo-size-s: 1.5rem;
  --lumo-size-xs: 1.25rem;
  --lumo-font-size: 1rem;
  --lumo-font-size-xxxl: 1.375rem;
  --lumo-font-size-xxl: 1.125rem;
  --lumo-font-size-xl: 1rem;
  --lumo-font-size-l: 0.875rem;
  --lumo-font-size-m: 0.75rem;
  --lumo-font-size-s: 0.6875rem;
  --lumo-font-size-xs: 0.625rem;
  --lumo-font-size-xxs: 0.625rem;
  --lumo-primary-text-color: #333;
  --lumo-primary-color-50pct: rgba(14, 204, 118, 0.5);
  --lumo-primary-color-10pct: rgba(14, 204, 118, 0.1);
  --lumo-primary-color: rgb(14, 204, 118);
  --lumo-clickable-cursor: pointer;
}

[theme~="dark"] {
  --lumo-base-color: hsl(131, 7%, 13%);
  --lumo-primary-text-color: #333;
  --lumo-primary-color-50pct: rgba(14, 204, 118, 0.5);
  --lumo-primary-color-10pct: rgba(14, 204, 118, 0.1);
  --lumo-primary-color: rgb(14, 204, 118);
  --lumo-shade-5pct: rgba(42, 44, 43, 0.05);
  --lumo-shade-10pct: rgba(42, 44, 43, 0.1);
  --lumo-shade-20pct: rgba(42, 44, 43, 0.2);
  --lumo-shade-30pct: rgba(42, 44, 43, 0.3);
  --lumo-shade-40pct: rgba(42, 44, 43, 0.4);
  --lumo-shade-50pct: rgba(42, 44, 43, 0.5);
  --lumo-shade-60pct: rgba(42, 44, 43, 0.6);
  --lumo-shade-70pct: rgba(42, 44, 43, 0.7);
  --lumo-shade-80pct: rgba(42, 44, 43, 0.8);
  --lumo-shade-90pct: rgba(42, 44, 43, 0.9);
  --lumo-shade: rgb(42, 44, 43);
}*/

.v-loading-indicator {
    background: rgba(255,255,255,0.4);
}

html{
	
}

body{
	overflow:hidden;
	touch-action: pan-x pan-y; /* Disable zoom on iOS */
}

iframe{
	border:0;
	display:block;
}

/**
 * Menu styles
 */

html{
	--flow-ui-menu-width: 240px;
	--flow-ui-menu-width-collapsed: 56px;
	--flow-ui-menu-color: #FFFFFF;
	--flow-ui-menu-color-active: #FFFFFF;
	--flow-ui-menu-bg: #1E40AF;
	--flow-ui-submenu-bg: #2547B5;
	--flow-ui-menu-icon-bg: none;
	--flow-ui-menu-icon-bg-active: #3D5ABB;
	--flow-ui-menu-item-bg: none;
	--flow-ui-menu-item-bg-active: #3D5ABB;
	--flow-ui-main-bg: #FFFFFF;
}

.flow-ui-menu,
.flow-ui-top-bar,
.flow-ui-header-bar{
	background-color: var(--flow-ui-menu-bg);
}

.flow-ui-action-bar{
	border-top-left-radius: 1em;
}

.flow-ui-action-bar, 
.flow-ui-filter-bar{
	min-height: 4em;
	background-color: var(--flow-ui-main-bg);
	margin-bottom: calc(0px - var(--lumo-space-m));
}

.flow-ui-filter-bar{
	padding-top: 0;	
}

/* the last item board is already collapsed in flow-app-container */
.flow-ui-action-bar:last-child, 
.flow-ui-filter-bar:last-child{
	margin-bottom: 0;
}

.flow-ui-top-bar{
	min-height: 3rem;
	padding-right: var(--lumo-space-m);
}

.flow-ui-top-bar,
.flow-ui-menu{
	--lumo-primary-text-color: var(--flow-ui-menu-color);
	color: var(--flow-ui-menu-color);
}

.flow-ui-menu-scroller{
	overflow-x: hidden;
	overflow-y: auto;
	flex: 1 1 0;
}

.flow-ui-menu-footer{
	border-top: 1px solid var(--lumo-shade-20pct);		
}

.flow-ui-menu a,
.flow-ui-menu .flow-ui-menu-button{
    width: 100%;
    box-sizing: border-box;
	padding: 0.5rem;
	transition: all .3s;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 0;
    background: none;
    color: var(--flow-ui-menu-color);
    display: block;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    cursor: pointer;
    user-select: none;
}

.flow-ui-menu a.flow-ui-menu-button-align-right,
.flow-ui-menu .flow-ui-menu-button.flow-ui-menu-button-align-right{
	width:auto;
	margin-left:auto;
}

.flow-ui-menu a:hover{
    text-decoration: none !important;
}

.flow-ui-menu a > div,
.flow-ui-menu .flow-ui-menu-button > div{
	width: 100%;
	box-sizing: border-box;
	gap: 0.5rem;
	border-radius: var(--lumo-border-radius-l);
	background: var(--flow-ui-menu-item-bg);
	display: flex;
	align-items: center;
	align-self: stretch;
}

.flow-ui-menu:hover a:focus > div,
.flow-ui-menu a[highlight] > div,
.flow-ui-menu:hover .flow-ui-menu-button:focus > div,
.flow-ui-menu .flow-ui-menu-button[highlight] > div{
	background: var(--flow-ui-menu-item-bg-active);
	color: var(--flow-ui-menu-color-active);
}
.flow-ui-menu a > div > .flow-ui-menu-button-icon,
.flow-ui-menu .flow-ui-menu-button > div > .flow-ui-menu-button-icon{
    padding: 0.75rem;
    background: var(--flow-ui-menu-icon-bg);
    color: var(--flow-ui-menu-color);
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--lumo-border-radius-l);
    background-origin: content-box !important;
    box-sizing: border-box;
}
.flow-ui-menu:hover a:focus > div > .flow-ui-menu-button-icon,
.flow-ui-menu a[highlight] > div > .flow-ui-menu-button-icon,
.flow-ui-menu:hover .flow-ui-menu-button:focus > div > .flow-ui-menu-button-icon,
.flow-ui-menu .flow-ui-menu-button[highlight] > div > .flow-ui-menu-button-icon{
	background: var(--flow-ui-menu-icon-bg-active);
	color: var(--flow-ui-menu-color-active);
}

.flow-ui-menu a > div > span,
.flow-ui-menu .flow-ui-menu-button > div > span{
	line-height: 2.5rem;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.flow-ui-submenu{
    position: absolute;
    top: 0;
    left: var(--flow-ui-menu-width);
    width: var(--flow-ui-menu-width);
    bottom: 0;
    background: var(--flow-ui-submenu-bg);
    display:none;
    z-index: 1;
    overflow-x:hidden;
    transition: all 0.3s;
}

.flow-ui-menu:hover a:focus .flow-ui-submenu,
.flow-ui-menu:hover a:has(:active) .flow-ui-submenu,
.flow-ui-menu:hover a:has(:focus) .flow-ui-submenu,
.flow-ui-menu:hover .flow-ui-menu-button:focus .flow-ui-submenu,
.flow-ui-menu:hover .flow-ui-menu-button:has(:active) .flow-ui-submenu,
.flow-ui-menu:hover .flow-ui-menu-button:has(:focus) .flow-ui-submenu{
	display:block;
}


@media (min-width: 768px) and (hover: hover){
	.flow-ui-show-mobile{
		display: none !important;
	}
	.menu-collapsed .flow-ui-show-menu-expanded{
		display:none !important;
	}
	.menu-collapsed .flow-ui-menu:hover .flow-ui-show-menu-expanded{
		display:initial !important;
	}
}

@media (max-width: 767.98px), (hover: none) {
	.flow-ui-show-desktop{
		display: none !important;
	}
	.flow-ui-submenu{
		left: calc(0px - var(--flow-ui-menu-width));
		display:block;
	}
	.flow-ui-menu a:focus .flow-ui-submenu,
	.flow-ui-menu a:has(:active) .flow-ui-submenu,
	.flow-ui-menu a:has(:focus) .flow-ui-submenu,
	.flow-ui-menu .flow-ui-menu-button:focus .flow-ui-submenu,
	.flow-ui-menu .flow-ui-menu-button:has(:active) .flow-ui-submenu,
	.flow-ui-menu .flow-ui-menu-button:has(:focus) .flow-ui-submenu{
		left:0;
	}
}