@import url('./fonts/satoshi.css');
@import url('./vaadin.css');

html {
	
	--lumo-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif;
	font-variant-numeric: tabular-nums;
	
	--lumo-primary-text-color: rgb(16, 51, 96);
	--lumo-primary-color-50pct: rgba(16, 51, 96, 0.76);
	--lumo-primary-color-10pct: rgba(16, 51, 96, 0.13);
	--lumo-primary-color: hsl(214, 71%, 22%);
	--lumo-font-size: 1rem;
	--lumo-font-size-xxxl: 1.75rem;
	--lumo-font-size-xxl: 1.375rem;
	--lumo-font-size-xl: 1.125rem;
	--lumo-font-size-l: 1rem;
	--lumo-font-size-m: 0.875rem;
	--lumo-font-size-s: 0.8125rem;
	--lumo-font-size-xs: 0.75rem;
	--lumo-font-size-xxs: 0.6875rem;
	--lumo-line-height-m: 1.4;
	--lumo-line-height-s: 1.2;
	--lumo-line-height-xs: 1.1;
	--lumo-size-xl: 3rem;
	--lumo-size-l: 2.5rem;
	--lumo-size-m: 2rem;
	--lumo-size-s: 1.75rem;
	--lumo-size-xs: 1.5rem;
	--lumo-space-xl: 1.875rem;
	--lumo-space-l: 1.25rem;
	--lumo-space-m: 0.625rem;
	--lumo-space-s: 0.3125rem;
	--lumo-space-xs: 0.1875rem;
	--lumo-clickable-cursor: pointer;
	--lumo-required-field-indicator: '*';
	--lumo-required-field-indicator-color: var(--lumo-error-color);
	
	/* Custom properties*/
	
	--azdesk-user-me-color: rgb(229 242 249);
	--azdesk-user-group-color: rgb(249, 238, 229);
	--azdesk-user-other-color: rgb(239, 249, 229);
	--background-color-internal-activity: rgb(255, 253, 240);
	--badge-initial-state: #afe4eb;
	--badge-intermediate-state: #fdeea0;
	--badge-final-ok-state: #76d52b;
	--badge-final-ko-state: #ff6058;
	--vaadin-user-color-3: white;
}


html, ::part(overlay) {
	font-weight: 450;
}

a:where(:any-link) {
	color: #2067b0;
}

a:where(:any-link):hover {
	text-decoration: none;
	color: #2e8dee;
}

/* End grid custom style */

/* Begin Vaadin Components */
vaadin-app-layout::part(navbar) {
	background-color: var(--lumo-primary-color-50pct);
	color: var(--lumo-primary-contrast-color);
}

vaadin-app-layout::part(drawer) {
	background-color: var(--lumo-base-color);
}

vaadin-drawer-toggle {
	color: var(--lumo-primary-contrast-color);
/* 	display: none; */
}

vaadin-side-nav-item::part(content) {
	background-color: unset;
}

vaadin-side-nav-item::part(content):hover {
	background-color: var(--lumo-primary-color-10pct);
}

vaadin-side-nav-item[current] {
	background-color: var(--lumo-primary-color-10pct);
}

/* vaadin-side-nav-item::part(content):hover[theme~='dark']{ */
/* 	background-color: var(--lumo-primary-color-10pct); */
/* } */

/* vaadin-side-nav-item[current][theme~='dark'] { */
/* 	background-color: var(--lumo-primary-color-10pct); */
/* } */
vaadin-grid::part(first-header-row-cell) {
	color: white;
	--vaadin-grid-cell-background: #4f74a5;
}

vaadin-grid.kanban::part(drag-source-row-cell) {
	border: 2px dashed var(--lumo-primary-color-50pct);
	opacity: 0.5;
}
vaadin-grid.kanban::part(body-cell) {
	background: none;
}
vaadin-grid::part(dragstart-row-cell) {
	rotate: 5deg;
}
vaadin-grid[dragover] {
	background: var(--lumo-contrast-20pct);
}

vaadin-grid::part(cell-disabled) {
	background-color: lightgrey;
}

vaadin-button {
	cursor: pointer;
}

vaadin-button.color-inherit {
	color: inherit;
}

vaadin-button.color-white {
	color: #fff;
}

vaadin-multi-select-combo-box[theme~='transparent']::part(input-field) {
	background: none;
}

vaadin-multi-select-combo-box[theme~='transparent']::part(toggle-button) {
	display: none;
}

vaadin-upload.widthfull>vaadin-button {
	width: 100%;
}

vaadin-tooltip-overlay::part(overlay) {
	background: var(--lumo-contrast);
	color: var(--lumo-base-color);
	padding: 2px;
	border-radius: var(--lumo-border-radius-s);
}

vaadin-radio-group[theme~='label-only'] > vaadin-radio-button:not([checked]) {
	opacity: 0.3;
}

vaadin-radio-group[theme~='label-only'] > vaadin-radio-button:not([checked]):not([disabled]):hover {
	opacity: 0.7;
	transition: opacity .5s ease-out;
}

vaadin-radio-group[theme~='label-only'] > vaadin-radio-button:not([checked]) > label {
	cursor: var(--lumo-clickable-cursor);
}

vaadin-radio-group[theme~='label-only'] > vaadin-radio-button::part(radio) {
	display: none;
}

vaadin-dialog-overlay[theme='error']::part(header) {
	border-top: 5px solid rgb(201, 25, 11);
}

vaadin-dialog-overlay[theme~='right-bar'] {
	right: 0;
    left: unset;
    top: 0;
    bottom: unset;
    height: 100%;
    margin: 0;
    width: 90%;
    max-width: 100%;
}
vaadin-dialog-overlay[theme~='right-bar-small'] {
	width: 50%;
}
vaadin-dialog-overlay[theme~='right-bar']::part(header) {
	border-radius: 0;
	background-color: var(--lumo-primary-color-10pct);
}
vaadin-dialog-overlay[theme~='right-bar']::part(overlay) {
	width: 100%;
	height: 100%;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
vaadin-dialog-overlay[theme~="right-bar"][opening] {
	animation: slide-in 0.4s forwards;
}

vaadin-dialog-overlay[theme~="right-bar"][closing] {
	animation: slide-out 0.4s forwards;
}

@keyframes slide-in {
	0% { right: -40%; }
    100% { right: 0; }
}

@keyframes slide-out {
	0% { right: 0; }
    100% { right: -40%; }
}




/* End Vaadin Components */

/* Begin AZDesk Elements Classes */
.badge-initial-state {
	background-color: var(--badge-initial-state);
}

.badge-intermediate-state {
	background-color: var(--badge-intermediate-state);
}

.badge-final-ok-state {
	background-color: var(--badge-final-ok-state);
}

.badge-final-ko-state {
	background-color: var(--badge-final-ko-state);
}

.activity-card {
	border-radius: var(--lumo-border-radius-s);
	box-shadow: var(--lumo-box-shadow-xs);
	word-break: break-word;
}
.activity-card.text {
	min-width: 40%;
	max-width: 90%;
}
.imessage .activity-card.text {
	min-width: 100%;
	max-width: 100%;
}
.activity-card.system {
	font-size: var(--lumo-font-size-xs);
	padding: var(--lumo-space-xs) var(--lumo-space-m) var(--lumo-space-xs) var(--lumo-space-m);
	box-shadow: none;
}
.activity-card.system::before {
	content: '·';
}
.imessage .activity-card.system {
	border: 1px dashed var(--lumo-contrast-30pct);
}
.imessage .activity-card.system::before {
	content: none;
}
.activity-card.internal {
	background-color: var(--lumo-contrast-5pct);
}
.activity-card.user-me {
	background-color: var(--azdesk-user-me-color);
}
.activity-card.user-group {
	background-color: var(--azdesk-user-group-color);
}
.activity-card.user-other {
	background-color: var(--azdesk-user-other-color);
}
.activity-card.highlight {
	outline: 2px solid var(--lumo-success-color);
}

.container-ticket-list-simple {
	margin-top: var(--lumo-space-s);
	margin-bottom: var(--lumo-space-s);
	margin-left: auto;
	margin-right: auto;
	padding: var(--lumo-space-s);
	box-sizing: border-box;
	background-color: var(--lumo-shade-5pct);
	border-radius: var(--lumo-border-radius-s);
	max-width: 1000px;
}

.container-ticket-list-simple:hover {
	background-color: var(--lumo-shade-10pct);
	cursor: pointer;
}

.container-ticket-list-simple a {
	text-decoration: none;
	cursor: pointer;
}

.taggable-textarea-filter-list-selector-list-column ::slotted(vaadin-grid-cell-content){
	padding: 0;
}

.taggable-textarea-filter-listbox-selector-listbox vaadin-item::before {
	display:none;
}
.subject-online {
	outline: 2px solid var(--lumo-success-color);
	outline-offset: 2px;
}

.subject-mention {
	background: var(--lumo-warning-color-10pct);
	color: var(--lumo-warning-text-color);
}
.ticket-mention {
	background: var(--lumo-success-color-10pct);
	color: var(--lumo-success-text-color);
}
.activity-card blockquote {
	margin-left: 0;
	padding-left: var(--lumo-space-s);
}
.activity-card ul {
	margin: var(--lumo-space-s);
	padding-left: var(--lumo-space-l);
}
.multiple-field {
	line-height: 1;
}
.multiple-field::before {
	height: auto;
}




/* Talk bubble */

.imessage .activity-card {
  line-height: 1.25;
  position: relative;
}

.imessage .activity-card::before,
.imessage .activity-card::after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}

.no-tail::before {
  display: none;
}

.margin-b_none {
  margin-bottom: 0 !important;
}

.margin-b_one {
  margin-bottom: 1rem !important;
}

.margin-t_one {
  margin-top: 1rem !important;
}

/**/

/* End AZDesk Elements Classes */