/* Reserve the vertical scrollbar's space always, so switching to a tall tab (e.g. Administration)
   doesn't add a scrollbar that narrows the viewport and shifts the centered body left. */
html { font-family: sans-serif; background: #eee; padding: 1rem; scrollbar-gutter: stable; }
body { max-width: 1400px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
/*a { color: #377ba8; }*/
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
/*.content form { margin: 1em 0; display: flex; flex-direction: column; }*/
/*.content label { font-weight: bold; margin-bottom: 0.3em; }*/
/*.content input, .content textarea { margin-bottom: 1em; }*/
/*.content textarea { min-height: 12em; resize: vertical; }*/
.content table { border-collapse: collapse; }
.content td { border: 1px solid #ddd; padding: 8px; }
.content tr:nth-child(even){ background-color: #f2f2f2; }
.td-with-table td { border: none; margin: 0px; padding: 0px; }
.table-amount { border: none; display:inline-table; }
.table-amount td { border: none; margin: 0px; padding: 0px; }
.table-amount tr:nth-child(even) { background-color: transparent;}
.table-in-td tr:nth-child(even) { background-color: transparent;}
.table-in-td table, td { border: none; }
.td-amount-outer { margin: 0px; padding: 0px; text-align: right; }
/*.td-amount-inner { text-align: right; }*/

.table-invoice-rows { border: none; display:inline-table; }
.table-invoice-rows td { border: none; margin: 0px; padding: 0px; }
.table-invoice-rows tr:nth-child(even) { background-color: transparent;}
.td-invoice-rows-outer { margin: 0px; padding: 0px; }

.customer-invoice-row label { font-weight: bold; margin-bottom: 0.5em; }
.customer-invoice-row input { width: 90%; margin-bottom: 1em; }
.customer-invoice-row select { width: 90%; margin-bottom: 1em; }
.header-row, .customer-invoice-row { width: 100% }
.header-row::after, .customer-invoice-row::after { content: "\a"; white-space: pre; }
.article-name { display: inline-block; width: 20% }
.article-text { display: inline-block; width: 40% }
.quantity { display: inline-block; width: 10% }
.amount { display: inline-block; width: 20% }

input.currency, input.quantity { text-align: right; }
.select2-results__options{
    font-size:1rem !important;
}
.select2-selection__rendered {
/*    font-family: Arial, Helvetica, sans-serif;*/
    font-size: 1rem;
}

.add-row-button { width: 50px; }
input.danger { color: #cc2f2e; }
/*input[type=submit] { align-self: start; min-width: 10em; }*/

#div-recognize-main { display:flex; flex-flow: column nowrap; row-gap: 2rem;}
#div-recognize-draft { display:flex; flex-flow: row nowrap; column-gap: 2rem;}
#div-recognize-column { flex: 0 0 520px; display:flex; flex-flow: column nowrap; row-gap: 2rem;}
#div-recognize-main-form { display: flex; flex-flow: column nowrap; margin: 1rem; row-gap: 1rem;}
#div-recognize-common-part { display:flex; flex-flow: column nowrap; row-gap: 1rem;}
select { font-size: 1rem; }
label { font-size: 1rem; font-weight: bold; }
input { font-size: 1rem; }
input.date { width: 7rem; }
input.currency { width: 7rem; }
input.quantity { width: 7rem; }
input.message { width: 30rem; }
button { font-size: 1rem; }
#select-supplier, #select-reimbursee { width: 20rem; }
#type-selector { font-size: 1rem; font-weight: bold; }
div.label-and-input { display: flex; flex-flow: column nowrap; }
#div-receipt, #div-common-for-invoice { display: flex; flex-flow: column nowrap; row-gap: 1rem; }
#div-new-supplier { display: flex; flex-flow: column nowrap; row-gap: 2rem; z-index: 10; background-color:#ffffff; padding: 2rem; }
#div-checkbox-and-label { display: flex; flex-flow: row nowrap; align-items: center;}
#div-invoice { display: flex; flex-flow: column nowrap; row-gap: 1rem;}
#div-supplier { display: flex; flex-flow: column nowrap; row-gap: 1rem;}
/*#img-attachment { width: 800px; z-index: 10; }*/
#div-attachment {display: flex; flex-flow: column nowrap; margin: 1rem; row-gap: 1rem;}

#overlay {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    z-index:998;
    background-color: Black;
    opacity: .5;
}

#popup {
    position: absolute;
    width:50%;
    background-color:#ffffff;
    z-index: 999;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 2rem;
    padding: 2rem;
}
#div-popup-inputs {
    display: flex; flex-flow: row nowrap; column-gap: 2rem; justify-content: left;
}
.button-submit, .button-cancel { width: 8rem; }
.buttons { display: flex; flex-flow: row nowrap; column-gap: 2rem; justify-content: left;}
.long-text { width: 30rem; }
#textarea-final {
    width: 50%;
    height: 5rem;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;  
}
.vertical-container {
    display: flex;
    flex-flow: column nowrap;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

/*.tabulator-col {
    font-size: 0.8rem;
    white-space: normal !important;
}*/

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    font-size: 0.8rem;
	white-space: normal;
/*	text-overflow: clip;*/
}


.magnify{
    border-radius: 50%;
    border: 2px solid black;
    position: absolute;
    z-index: 20;
    background-repeat: no-repeat;
    background-color: white;
    box-shadow: inset 0 0 20px rgba(0,0,0,.5);
    display: none;
    cursor: none;
}

.dialog-no-close .ui-dialog-titlebar {
    display: none;
}

#div-recognize-overlay {
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    z-index:5;
    background-color: Black;
    opacity: .5;
}


.slide img {
    width: 100%;
    z-index: 10;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.slider {
    width: 800px;
    min-width: 400px;
    margin: auto;
    overflow: hidden;  
    display: flex;
    align-items: top;
}
  
.slide {
    flex: 0 0 100%;
    transition: transform 0.5s ease;
}


.arrow {
	--arrow-size: 3em;
	--arrow-color: rgb(0,0,0);
	--arrow-color-hover: rgba(0,0,0,0.5);
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	width: var(--arrow-size);
	height: var(--arrow-size);
	overflow: hidden;
	
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		box-sizing: border-box;
		display: inline-block;
		width: calc( var(--arrow-size) * .7071);
		height: calc( var(--arrow-size) * .7071);
		border-top: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
		transition: all 150ms ease-in-out;
	}
	
	&.left {
		&::after {
			left: calc( var(--arrow-size) / 5 );
			border-left: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
			transform-origin: top left;
			rotate: -45deg;
		}

		&:hover::after {
			box-shadow: calc( var(--arrow-size) / -8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
		}
	}

	&.right {
		&::after {
			right: calc( var(--arrow-size) / 5 );
			border-right: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
			transform-origin: top right;
			rotate: 45deg;
		}

		&:hover::after {
			box-shadow: calc( var(--arrow-size) / 8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
		}
	}
}

a {
	&:hover .arrow {
		&.left,
		&.right {
			&::after {
				border-color: var(--arrow-color-hover);
			}
		}

		&.left {
			&::after {
				box-shadow: calc( var(--arrow-size) / -8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
			}
		}

		&.right {
			&::after {
				box-shadow: calc( var(--arrow-size) / 8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
			}
		}
	}
}

/* Mobile: make the attest view usable on a phone. Only affects the attest tab's ids/classes,
   and only below 768px, so the desktop layout is untouched. Pairs with the viewport meta tag in
   index.html (without which phones render at desktop width and shrink). */
@media (max-width: 768px) {
    html { padding: 0.5rem; }

    /* Stack the receipt image above the form instead of side-by-side, and let the form column
       (fixed 520px on desktop) take the full width. */
    #div-recognize-draft { flex-flow: column nowrap; column-gap: 0; row-gap: 1.5rem; }
    #div-recognize-column { flex: 1 1 auto; min-width: 0; }
    #div-recognize-main-form, #div-attachment { margin: 0.5rem 0; }

    /* The image slider is a fixed 800px / min-width 400px on desktop — both overflow a phone.
       The inner `.slide img { width: 100% }` then scales the image to this width. */
    .slider { width: 100%; max-width: 100%; min-width: 0; }

    /* The wide message field (30rem) and supplier/reimbursee selects (20rem) overflow; fill the
       column instead. border-box so the padding doesn't push them past 100%. */
    input.message { width: 100%; max-width: 100%; box-sizing: border-box; }
    #select-supplier, #select-reimbursee { width: 100%; max-width: 100%; }

    /* Comfortable tap targets for the prev/next navigation. */
    #button-previous, #button-next { min-height: 2.75rem; }
}