/* solarized colorscheme */
:root {
    --base03:    #002b36;
    --base02:    #073642;
    --base01:    #586e75;
    --base00:    #657b83;
    --base0:     #839496;
    --base1:     #93a1a1;
    --base2:     #eee8d5;
    --base3:     #fdf6e3;
    --yellow:    #b58900;
    --orange:    #cb4b16;
    --red:       #dc322f;
    --magenta:   #d33682;
    --violet:    #6c71c4;
    --blue:      #268bd2;
    --cyan:      #2aa198;
    --green:     #20AA00;
    /* --green:     #859900; */
}

/** general */

html {
    background: var(--base3);
}

h1 { font-size: 1em; }

.pointer { cursor: pointer; }

#app {
    padding-bottom: 5em;
    position: relative;
    margin: 0 auto;
    width: 95%;
}

#stats {
    padding-top: 5em;
    position: relative;
    margin: 0 auto;
    width: 75%;

    .pure-table {
        border: none;

        td {
            margin-bottom: 3em;
        }

        h2 {
            margin: 0.2em 0;
        }
    }

    emph {
        
    }
}

#table-wrapper {
    min-width: 800px;
    position: relative;
}

.filters {
    position: sticky;
    background: var(--base3);
    width: 100%;
    z-index: 8;
    top: 0;
    height: 8vh;
    align-content: center;

    & span {
	margin: 0 1em 0 2em;
    }

    & .edit-toggle {
	float: right;
	margin-top: .2em;
    }

    & button { /* changelog and export buttons */
	float: right;
	margin-left: 2em;
    }
	
}

.pure-table {
    width: 100%;
    border-collapse: separate;

    & tr {
	height: 2.5em;
	background: var(--base3);
	color: var(--base01);

	&.collapsed { height: 0; }

    }

    & td {
	height: 100%;
	transition: line-height 0.15s, padding 0.15s, color 0.1s;
	padding: .3em;
    }

    & input, & span > input {
	color: inherit;
	background: transparent;
	border: none;
	border-bottom: 1px solid transparent;

	&:hover {
	    border-bottom: 1px dotted var(--base02);
	}

	&:focus {
	    outline: none;
	    border: none;
	    border-bottom: 1px dotted var(--base02);
	}
    }

    & thead > tr > th {
	background-color: var(--cyan);
	color: var(--base3);
	box-shadow: 0px 1px 0 var(--base1); /* fake bottom border */
	padding: .5em .3em;
	text-align: center;
	top: 8vh;
	position: sticky;
	z-index: 9;

	&:first-child {
	    cursor: pointer;
	    width: 1.8em;
	}

	&.sortable {
	    cursor: pointer;
	}

	&:nth-child(5) { min-width: 11em; } /* unit and batch number */

	&:nth-child(6) { min-width: 8em; } /* stock */

	&:nth-child(7) { width: 10.5em; }

	&.expanded:first-child {
	    color: var(--base02);
	}

	&.ascending::after,
	&.descending::after {
	    content: "▵";
	    display: inline-block;
	    float: right;
	}

	&.descending::after { transform: rotate(180deg); }

    } 

    & tbody {

	tr {

	    & td {
		&:nth-child(2) { text-align: center; }


		&.expander {
		    font-size: 2em;
		    padding: 0;
		    text-align: center;
		}

		&.add, &.delete {
		    text-align: center;
		    font-size: 1.25em;
		    cursor: pointer;
		    padding: 0.3em 0.7em;
		}

		&.add {
		    color: var(--green);

		    &:hover {
			color: var(--base3);
			background-color: var(--green);
		    }
		}

		&.delete {
		    color: var(--red);
		    background-color: var(--base3);
		    &:hover {
			color: var(--base3);
			background-color: var(--red);
		    }
		}


	    }

	    &.article {

		td {

		    &:hover {
			background: var(--base2);
		    }

		    &.stock {
			&.below-minimum {
			    color: var(--base2);
			    background-color: var(--red);
			}

			&.at-minimum {
			    color: var(--base2);
			    background-color: var(--yellow);
			}
		    }

		    &.expiry {
			min-width: 9em;
			color: var(--base1); /* less prominent by default, as per request */

			&.soon-expiring-below-minimum {
			    color: var(--base2);
			    background-color: var(--red);
			}

			&.expired {
			    color: var(--base2);
			    background-color: var(--orange);
			}
			
			&.soon-expiring {
			    color: var(--base2);
			    background-color: var(--yellow);
			}
		    }

		    &.ordered > input { color: var(--base1); }
		    &.ordered > input:focus { color: var(--base01); }

		    &.ordered.good > input { color: var(--base2); }
		    &.ordered.good > input:focus { color: var(--base2); }

		    &.ordered.good {
			background-color: var(--green);
		    }

		    &.ordered.future {
			background-color: var(--yellow);

			& > input {
			    color: var(--base2);
			}
		    }

		    &.ordered.passed {
			background-color: var(--red);

			& > input {
			    color: var(--base2);
			}
		    }
		
		    &.expander:hover {
			cursor: pointer;
			color: var(--base01);
		    }

		    &.expander > div {
			transform: rotate(-90deg);
		    }

		    &.expander.expanded > div {
			transform: rotate(90deg);
		    }

		}
	    }

	    &.item {
		background: var(--base0);
		color: var(--base2);

		& td {
		    &.delete {
			color: var(--red);
			padding: 0.3em 0.5em 0em;
		    }

		    /* todo: remove ('warn') is no longer in use */
		    &.warn, &.warn > input {
			background-color: var(--orange);
			color: var(--base2);
		    }

		    &.inactive {
			background-color: var(--base2);
		    }
		}

		&.collapsed td  {
		    padding: 0;
		    padding-left: inherit;
		    line-height: 0;
		    color: transparent; 
		    overflow: hidden;
		    border:none;

		    & button, & input, & i {
			display: none;
		    }
		}

		&.soon-expiring {
		    color: var(--base2);
		    background-color: var(--yellow);
		}

		&.soon-expiring-below-min {
		    color: var(--base2);
		    background-color: var(--red);
		}

		&.expired {
		    color: var(--base2);
		    background-color: var(--orange);
		}
	    }

	    &.Kjemi > td:nth-child(2)  {
		background: var(--magenta);
		color: var(--base2);
	    }

	    &.Mikro > td:nth-child(2) {
		background: var(--violet);
		color: var(--base2);
	    }

	    &.Organisk > td:nth-child(2) {
		background: #317331;
		color: var(--base2);
	    }
	    &:hover > td:first-child {
		background: var(--base02);
		color: var(--base2);
	    }
	}
    }
}



/** Minimum */
span.num-input::before { content: '('; }
span.num-input::after { content: ')'; }

span.num-input {
    padding-left: .3em;
}


/** tfoot */
.item-input input[type='submit'] {
    display: none;
}




#spacer {
    text-align: center;
    height: 15pt;
    color: var(--base2);
    background-color: var(--cyan);
    padding: 2em;
    line-height: 1.5em;
}

#article-input {
    background-color: var(--base3);
}

/* inputs */

#article-input > td > input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--base02);
}

#article-input > td > input:focus {
    outline: none;
}

td > button {
    display: inline;
    margin-left: 1em;
}

#article-input > td > input[type='submit'] {
    color: var(--green);
    underline: none;
    padding: 0;
    border-bottom: none;
}

#article-input > td:hover > input[type='submit'] {
    color: var(--base2);
    underline: none;
    cursor: pointer;
}

#article-add {
    padding: 0;
    text-align: center;
    font-size: 1.25em;
    cursor: pointer;
}

/* login */

#login {
    width: 220pt;
    margin: 100pt auto;
    text-align: center;
    color: var(--base01);
}

#login > h1::selection,
#login > div::selection,
#login > div > input::selection {
    color: var(--base2);
    background: var(--cyan);
}

#login > h1 {
    font-size: 1.5em;
    margin-bottom: 1em;
    font-variant: small-caps;
}

#login > h1 > span {
    font-size: 0.4em;
    vertical-align: super;
}

#login > div {
    margin-top: 1.5em;
}

#login > div > input {
    border: none;
    border-bottom: 1px dashed var(--base02);
    background: inherit;
    color: inherit;
    padding: 0.3em;
}

#login > div > input:focus {
    outline: 2px solid var(--cyan);
}


#login > div > input[type='submit'] {
    width: 100%;
    padding: 0.5em 0.3em;
    background: var(--cyan);
    color: var(--base3);
    border: 2px solid var(--cyan);
}

#login > div > input[type='submit'].loading {
    display: none;
}

#login > div > input[type='submit']:hover {
    border: 2px solid var(--cyan);
    background: var(--base3);
    color: var(--cyan);
    cursor: pointer;
}

#feedback {
    margin-top: 2em;
    color: var(--red);
}

.loader {
    color: var(--cyan);
    width: 40px; /* control the size */
    aspect-ratio: 1;
    display: grid;
    display: none;
    -webkit-mask: conic-gradient(from 15deg, #0003,#000);
    mask: conic-gradient(from 15deg, #0003,#000);
    animation: load 1s steps(12) infinite;
    margin: 0 auto;
}

.loader.loading { display: grid; }

.loader,
.loader:before,
.loader:after{
  background:
    radial-gradient(circle closest-side ,currentColor 90%,#0000 98%) 
    50% -150%/20% 80% repeat-y,
    radial-gradient(circle closest-side ,currentColor 90%,#0000 98%) 
    -150% 50%/80% 20% repeat-x;
}
.loader:before,
.loader:after{
  content: "";
  grid-area: 1/1;
  transform: rotate(30deg);
}
.loader:after{
  transform: rotate(60deg);
}
@keyframes load {
  from {transform: rotate(0turn)}
  to   {transform: rotate(1turn)}
}