/* Bungee font */
@font-face {
  font-family: 'Bungee';
  src: url('/assets/font/Bungee/Bungee-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;
  --accent-color: #207a57; /* provided bright green */
  --accent-color-2: var(--red-400);
  --background-color: white;
  --text-color: #0b0f19;
  --text-color-bright: #0b0f19;
  --text-color-dark: #e6eef7;
  --title-color: var(--accent-color);
  --tag-inactive-background: beige;
  --tag-inactive-text: #ADCEAA; /* var(--green-w3); */
  --tag-active-backgound: var(--accent-color);
  --toast_background: #DDD8C7; /* --paper-w2 */

  --control-selected-background: var(--green-k2);
  --control-selected_text: var(--text-color);
  --control-border: var(--green-k1);

  /* icons with explicit color white beeing same as --text-color alias ~ %230b0f19 */
  --bi-caret-down-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230b0f19' class='bi bi-caret-down-fill' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
  --icon-pocket: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><!-- source: https://icon-icons.com/download/121113/SVG/512/ --><title>pocket</title><path d='M5 5v7a7 7 0 0 0 14 0V4a1 1 0 0 1 2 0v8a9 9 0 0 1-18 0V4a1 1 0 0 1 1-1h12a1 1 0 0 1 0 2H5zm10.293 4.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L12 12.586l3.293-3.293z' fill='%23000' fill-rule='nonzero'/></svg>");
}
@media (prefers-color-scheme: dark) {
  :root { 
  	--accent-color: #2BA274;
    --background-color: #0b0f19; 
    --text-color: var(--text-color-dark); 

	--control-selected-background: var(--green-k2);
	--control-selected_text: var(--text-color);
	--control-border: var(--green-k1);

	/* icons with explicit color white beeing same as --text-color alias ~ %23e6eef7 */
  	--bi-caret-down-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e6eef7' class='bi bi-caret-down-fill' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");

  }
}
html.hide-fonts-until-loaded * {
	/* add font names and sizes to wait for in index init_body() */
	color: transparent !important; 
	visibility: hidden;
}
body {
  margin: 0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Bungee', sans-serif;
  background: var(--background-color); 
  color: var(--text-color);
}

/*@media (min-width: 576px) { .container, .container-sm { max-width: calc(100vw - 2em); } }*/
@media (min-width: 768px) { .container, .container-md, .container-sm { max-width: calc(100vw - 8em); } }
.hidden { display: none !important; }
.nav-link {
	color: var(--accent-color);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    /*background-color: var(--red-w1);
    border-color: var(--red-w2);*/
	background-color: var(--control-selected-background);
    border-color: var(--control-border);
    color: var(--control-selected_text);
}
.nav-tabs { border-color: var(--control-border); }

header { background-color: var(--accent-color); color: var(--text-color-dark); }
header h1 {
	white-space: nowrap;
}
main {
	h1, h2, h3, h4, h5, h6 { 
		margin-top: 1.25em; 
		color: var(--title-color); 
	}
}
h1 {
	font-family: 'Bungee', system-ui, sans-serif; 
	font-size: 1.5rem; 
	margin: 0; 
}
aside.toast-container {
	/*background-color: orange;*/
	/*position: fixed;
	display: block;
	top: 0;
	right: 0;
	width: 20em;
	min-height: 2em;*/

	.toast {
		max-width: 70vw;
		color: var(--text-color-bright);
		background-color: var(--toast_background);
		font-size: 1.1em;
		transform: translateX( calc( 100% + 4em ));
		transition: opacity 3s ease-in, transform 5s ease-out, height 1s 3s, margin-top 1s 8s
		opacity: 1;

		&.show {
			transform: translateX(0%);
			/*transition: opacity 0.3s ease-in, transform 0.3s ease-out, zoom 0.5s 0.2s ease;
			transition: opacity 3s ease-in, transform 5s ease-out, zoom 5s 3s ease, height 1s 3s, margin-top: 1s 3s ;*/
		}
		&.hide {
			display: block !important;
			transform: translateX(115%);
			opacity: 0;
			height: 0px !important;
			margin-top: -1em;
			/*zoom: 0;*/
			/*transition: opacity 0.3s ease-in, transform 0.3s ease-out, zoom 0.5s 0.2s ease;
			transition: opacity 3s ease-in, transform 5s ease-out, zoom 5s 3s ease, height 1s 3s, margin-top: 1s 3s ;*/
		}
	}
}
/* 
Artikel haben mehrere Erscheinungsformen. Diese hier ist die Liste, das CSS sol im TBODY angebängt werden. 
Es gibt auch das Etiketten-Layout, welches als popover erscheinen kann. 
In der Artikelliste auf dem Homescreen ist Gewicht und der Preis weniger wichtig (ausblenden im Hochformat), 
zeigen sollte man hier Kategorisierungen und das Zufügen zur Liste.
*/ 
#products {
	#product_filters.container {
		/* most layout definitions set by .container */ 
		background-color: var(--background-color);
        margin: 0.25em 0em 0.75em;
        padding: 0;
        /*left: 0;
        width: 100%;*/

		ul.nav { 
			flex-wrap: nowrap;
			justify-content: flex-end !important; 
			background-color: var(--background-color);
		    border-color: var(--control-border);

		    button { white-space: nowrap; }
		    li:not(.tipps) i { display: none; }
		    li.tipps span[lang] { display: none; }
		}
		#tags_filter {
			padding-top: 0.25em;
		}
	}
	.tag {
        display: inline-block;
	    line-height: 2em;
	    vertical-align: middle;
	    white-space: nowrap;
	    cursor: pointer;
	    margin: 0.25em 1em 0.5em 0;
	    border-top-left-radius: 1em;
        border-bottom-left-radius: 1em;
	    background-color: var(--tag-inactive-background);
	    padding: 0 0.75em 0 0.6em;
	    color: var(--tag-inactive-text);

	    &:before {
			--col: 0;
			--row: 0;
			--icon-size-original: 16px; /* = 1em */
			--icon-size-layout: 1.25em;
			--size: var(--icon-size-layout);

	    	content: "🏷️";
            color: transparent;
            display: inline-block;
            vertical-align: middle;
            width: var(--icon-size-layout);
            height: var(--icon-size-layout);
            margin-top: -0.2em;
            margin-right: 0.2em;
            background-position: calc( -1 * var(--row) * var(--size) ) calc( -1 * var(--col) * var(--size) ) ;
	    	background-image: var(--tag-icons);
	    	background-repeat: no-repeat;
	    	background-size: calc(1.25em * 16);
	    }
	}
	.tag.tag-dv:before      { --col:2; --row: 0; }
	.tag.tag-bio:before     { --col:0; --row: 0; }
	.tag.tag-demeter:before { --col:0; --row: 1; }
	.tag.tag-regional:before   { --col:1; --row: 0; }
	.tag.tag-vegan:before   { --col:0; --row: 6; }


	#tags_filter.filtered.tag-dv .tag-dv,
	#tags_filter.filtered.tag-bio .tag-bio,
	#tags_filter.filtered.tag-demeter .tag-demeter,
	#tags_filter.filtered.tag-regional .tag-regional,
	#tags_filter.filtered.tag-vegan .tag-vegan { 
		background-color: var(--title-color);
		color: var(--tag-active-text); 
	}
	} 
	table {
		--hgap: 0.2em;
	}
	table:has(tbody.products) {
		--col-width-einheit: 6em;
		--col-width-lieferant: 0em;
		--col-width-tags: 4em;
		--col-width-price: 4em;
		--col_width_swipes: 1px;
		--col-width-name: calc(100vw - (2 * var(--bs-gutter-x, .75rem)) - var(--col-width-tags) - var(--col-width-lieferant) - var(--col-width-einheit) + 2 * var(--col_width_swipes));
		margin-top: 0.5em;
	}

	form.search {
		position: absolute;
		right: calc(var(--bs-gutter-x, .75rem)  + 0.5rem);
	}
	form.search:after {
	  white-space: nowrap;
	  content: "\F52A";
	  font-family: 'bootstrap-icons';
	  font-size: 1.05rem;
	  position: absolute;
	  display: inline-block;
	  width: calc(1.9em + 4px);
      height: calc(1.4em + 4px);
      margin-top: -2px;
	  margin-left: -1.5em;
	  padding-top: 0.22em;
	  padding-left: 0.25em;
      border: 2px solid transparent;
	  /* color: transparent; */
	  /* background-color: red; */
	  overflow: hidden;
	  background-image: var(--bi-caret-down-fill); /* url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-caret-down-fill' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>"); */
	  background-repeat: no-repeat;
	  background-position: right center;
	  background-size: 0.6em;
	  opacity: 0.4;
	  /* text-shadow: 0px 0px 1px; */
	}
	form.search:focus-within:after {
		border-color: var(--accent-color);
		background-color: var(--accent-color);
		opacity: 1;
	}
	input {  
	  max-width: calc(100vw - 14em); 
	  display: inline;
	  padding-right: 1.8em;
      padding-bottom: 3px;
	  background-color: transparent;
	  border: 0px solid transparent;
	  border-bottom: 2px solid;
	  text-align: right;
	  /*visibility: hidden;*/
	  opacity: 0;
	}
	input:focus {
	  visibility: visible;
	  opacity: 1;
      outline-color: transparent;
      border-bottom-color: var(--accent-color);
	}
	table.products  {
		/* set global settings for product list: line height and hide swipe */ 
		transform: translateX( calc( -1 * var(--col_width_swipes) ) );

		th, td { padding-bottom: 0.25em; }
		
		td { height: 1.8em; vertical-align: middle;}

		td.fav, td.shoppinglist, td.swipes { position: absolute; }

		/* use as much width for name as possible: full width minus outer padding and width of columns einheit and price */ 
		[data-col="srpc_category"], 
		[data-col="srpc_number"], 
		[data-col="sku"], 
		[data-col="id"], 
		[data-col="_gebinde"],
		[data-col="proce"] { display: none; }
		[data-col="name"] { max-width: var(--col-width-name); }
		[data-col="_lieferant"] { display: none; max-width: var(--col-width-lieferant); }
		[data-col="tags"] { max-width: var(--col-width-tags); }
		[data-col="_einheit"] {
		  max-width: var(--col-width-einheit);          
		  span:first-of-type { 
		    width: 3em;
		    display: inline-block;
		    text-align: right;
		    padding-right: 0.2em;
		  }
		}
		th[data-col="_einheit"] { padding-left: 1em; }
		th.right, 
		td.right, 
		[data-col="price"],
		[data-col="tags"] { 
		  text-align: right; 
		  padding-left: 0em; 
		  padding-right: var(--hgap); 
		}
		/*[data-col="price"] { max-width: var(--col-width-price); }*/
		[data-col="tags"] { 
			span { 
				display: inline-block; 
				width: 1.25em;
				margin-left: 0.2em; 
				overflow: hidden; 
				color: transparent; }
		}

		tr.category-separator td span.srpc_number { display: none; }
		tr.category-separator.level-1 {
			/*td[data-col="srpc_category"] { display: table-cell; }*/

		}
		tr.category-separator:not(.level-1) {
			background-color: var(--title-color);
			color: transparent;
			font-size: 0em;
			border-top: 4px solid var(--background-color);

			&:not(.level-1) { opacity: 0.5 }
			td[data-col="srpc_category"] { display: table-cell; }

			&+ tr {  border-top: 3px solid var(--background-color); } /* add addtitional space between the line and the first row */


		}
		&:not(.show-categories) tr.category-separator:not(.hidden) + tr.category-separator { display: none }
		&.show-categories tr.category-separator, 
		tr.category-separator.level-1 {
			background-color: var(--title-color);
			color: var(--text-color-dark);
            border-bottom: 3px solid var(--background-color);

			&[data-size="0"] { display: none; }

			td[data-col="srpc_category"] { 
				display: table-cell; 
				/*padding-top: 0.20em; */
			}

			&[data-collapsed] td[data-col="srpc_category"]:before {
				content: ">";
				color: transparent;
				display: inline-block;
                width: 1.35em;
				/*padding-left: 0.25em;*/
				/* caret icon has a bright color by default. in darkmode, the dark default color must be inverted */
				background-image: var(--bi-caret-down-fill); /* url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-caret-down-fill' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>"); */
				background-repeat: no-repeat;
				background-position: 0.15em 0.15em;
				filter: invert(1);
				transform: rotate(-90deg);
				/*background-size: 0.6em;
				opacity: 0.4;*/

			}
			&[data-collapsed="false"] td[data-col="srpc_category"]:before {
				/*content: "v";*/
				transform: rotate(-0deg);
			}
		}

		/* all definitions about filtered products */
		tbody.filtered {
			tr[data-tags] { display: none; }

			&.tag-dv tr[data-tags*="#dv"],
			&.tag-bio tr[data-tags*="#bio"],
			&.tag-demeter tr[data-tags*="#demeter"],
			&.tag-local tr[data-tags*="#regional"],
			&.tag-vegan tr[data-tags*="#vegan"] { display: table-row; }

			tr.category-separator:not(.level-1):not(.forced-visibility) { display: none; }
		}
	}
}
@media (min-width: 576px) { 
	/* on landscape phones, show lieferant and full width einheit
	/* add column lieferant in landscape */
	table.products {
	  --col-width-lieferant: 11em;
	  --col-width-einheit: 7em;
	  --col-width-tags: 2em;
	}
	tbody.products [data-col="_lieferant"] { 
	  /* show column _lieferant in landscape  */ 
	  display: table-cell; 
	  padding-left: 1em;
	} 
	/*tbody.products [data-col="tags"] {

	}*/
}
@media (prefers-color-scheme: dark) { 
	#products table.products tbody.products tr.category-separator[data-collapsed] td[data-col="srpc_category"]:before { filter: invert(0); }
}
section {
	> i.update { 
		position: absolute; 
		right: calc(var(--bs-gutter-x, .75rem) + 1.75em);
		margin-top: -0.1em; 
		font-size: 1.4em; 
		opacity: 0.4; 
		transition: opacity 0.7s;
		&:hover { 
			opacity: 1; 
			cursor: pointer; 
			transition: opacity 0.1s; 
		}
	}
	&.update > i.update { opacity: 1; animation: rotation 3s infinite linear; }
}
td {
	vertical-align: top;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
td:not(:last-child) {
	padding-right: 0.15em;
}
.rotate { animation: rotation 3s infinite linear; }
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }