/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------- 6.0/00 - 15-01-2023
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/dragontheory/pen/qBKVLwj */
/* info     -> layout2grid */
/* ------------------------------------------------------------------------------ */
/* ROOT and VARIABLES */

@font-face {
  font-family: 'Oxanium';
  src: url('fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Anodina-Light';
  src: url('fonts/Anodina-Light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
	--hover-bgr:hsla(210,100%,56%,1);
    
    /* cards */
    --card-front-col: rgba(0,0,0,.6); /* black, gray OR client-color */
    --card-front-bgr: #fff;
    --card-back-col: #fff;
    --card-back-bgr: #EE741D;
    --card-ibox-hgt: 14rem;         /* min-height of the card - depends of the text card-back - def 14rem */
    --card-body-bdr: 1px solid rgba(0,0,0,.05);     /* border - def 1px */
    /* grid-area */
    --grid-area-gap: 1rem;          /* gap between flipboxes - def 1rem | min .3rem - check used shadow */
    --grid-area-pad: 1rem;          /* padding - check card-border-radius - def 1rem | min .3rem */
    --grid-area-bgr: none;          /* background - def none */
    --grid-area-bdr: 0px solid rgba(0,0,0,.25);     /* border - def 0px  */
    --grid-area-rad: 0rem;          /* border-radius - def 0rem */
    /* counter - card-front */ 
    --count-color: rgb(255,255,255,.6);  /* color of the counter - must be the same as card-back-background AND no transparent */
    --count-size: 3.6rem;                 /* counter size - def 4rem */
    /*--count-pos-top:1.4rem;             /* counter position top - def 1rem */
    /*--count-pos-right:1rem;             /* counter position right - def 1.2rem */
    --count-pos-left: 2rem;       /* counter position left - NOT IN USE */
    --count-pos-bottom: .8rem;     /* counter position bottom - NOT IN USE */ 
    --count-width: 1px;             /* counter stroke - def 1px | max 3px */
    /* animation */
    --time-flip: 0.8s;              /* def 0.8s */
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 15-01-23 */
/* RESET COUNTER -> SEE design.css */
/* LAYOUT2GRID */

/* @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;300&display=swap'); */
/* @import url('https://fonts.cdnfonts.com/css/agencyfb-2'); */

/* RESET ---------------------------------- */
*:before, *:after, *, ::after, ::before {box-sizing: border-box;}
body {padding: 0; margin: 0;}

:root:has(#toggleLayout:checked) app-container > *  {
	height:auto!important; 
	width:auto!important;
  max-width: 100%;
}

/* THEMES ---------------------------------- */

/* Default */
:root {
  --bg: 19,20,23,1.0;
  --bg-02: 39,49,54,1.0;
  --bg-grd: linear-gradient(180deg, 
						rgba(50,70,80,0.9) 0, 
						#0d101b 100%);
  --bg-active: 48,190,255,0.2;
  --bg-panel: 255,255,255,0.03;
  --txt: 255,255,255,0.7;
  --txt-active: 255,255,255,1.0;
  --txt-muted: 255,255,255,0.5;
  --txt-shadow: -1px 1px rgba(0,0,0,1.0);
  --accent: 48,190,255,1.0;
}

/* Light */
:root:has(#toggleTheme:checked) {
  --bg: 0,0,0,0.8;
  --bg-02: 0,0,0,0.5;
  --bg-grd: linear-gradient(180deg, 
						rgba(255,255,255,0.8) 0, 
						rgba(255,255,255,0.5) 100%);
  --bg-active: 48,190,255,0.2;
  --bg-panel: 255,255,255,0.1;
  --txt: 0,0,0,0.8;
  --txt-active: 0,0,0,1.0;
  --txt-muted: 0,0,0,0.5;
  --txt-shadow: -1px 1px 0 rgba(255,255,255,0.5);
}

/* LAYOUT ---------------------------------- */

/* Default / Horizontal */
:root {
  --display: grid;
	--margin: 0 0 0 -1rem;
  --grid-template-columns: 14rem auto 1fr ;
	--grid-template-rows: auto auto 1fr;
  --grid-gap: 1rem;
  --resize-h: horizontal;
	--resize-v: vertical;
  /* app-main */
	--min-width: 10rem;
  --max-width: calc(100vw - 40rem);
	/* app-aside */
	--min-height: 15rem;
	--max-height: calc(100vh - 25rem); 
	--grid-row: span 2;
}

/* Vertical */
:root:has(#toggleLayout:checked) {
  --display: none;
	--margin: -1rem 0 0 0;
  --grid-template-columns: 1fr;
  --grid-template-rows: min-content min-content minmax(100px,1fr) auto auto auto;
  --grid-auto-flow: column;
  --grid-gap: 1rem;
  --resize-h: none;
	--resize-v: none;
  --min-width: fit-content;
  --max-width: fit-content;
	--min-height: 100%;
	--max-height: 100%;
  --grid-auto-flow_tab: row;
	--grid-row: auto;
}


/* SCAFFOLDING ---------------------------------- */

/* PANEL WRAPPER */
app-container {
  display: grid;
  grid-template-rows: var(--grid-template-rows);
  grid-template-columns: var(--grid-template-columns);
  gap: var(--grid-gap);
  padding: 1rem;
  height: 100vh; /* push HEADER/FOOTER to the top/bottom of viewport */
  overflow: hidden;
}

app-main {
	resize: var(--resize-h);
	min-width: var(--min-width);
  /* set a max value to keep a minimum width for meta column */
  max-width: var(--max-width);
}

app-aside {
	max-height: var(--max-height);
	min-height: var(--min-height);
}

/* ALL PANELS */
app-container > * {
  display: grid;
  background-color: rgba(var(--bg-panel));
  border-radius: .3rem;
  overflow: hidden;
  align-content: start;
}

/* HEADER/FOOTER PANELS */
app-header,
app-footer {
  grid-template-columns: 1fr auto auto;
  grid-column: 1 / -1;
}


app-nav,
app-main {grid-row: var(--grid-row);}

app-aside {
	resize: var(--resize-v);
  min-height: var(--min-height);
  max-height: var(--max-height);
}

app-nav panel-header,
app-aside panel-header,
app-meta panel-header{display: var(--display);}

/* SCROLLABLE */
panel-list {
  display: grid;
  grid-auto-flow: var(--grid-auto-flow);
  overflow: auto;
}

panel-tab panel-list {grid-auto-flow: var(--grid-auto-flow_tab)}

/* If there is 1 column */
label,  
list-item,
panel-header {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}

/* If there are 2 COLUMNS */
label:has(> :last-child:nth-child(2)),  
list-item:has(> :last-child:nth-child(2)),
panel-header:has(> :last-child:nth-child(2)) {
  grid-template-columns: auto 1fr;
}
/* If there are 3 COLUMNS */
label:has(> :last-child:nth-child(3)),  
list-item:has(> :last-child:nth-child(3)),
panel-header:has(> :last-child:nth-child(3)) {
  grid-template-columns: 1fr auto auto;
}
/* If there are 4 COLUMNS */
label:has(> :last-child:nth-child(4)),  
list-item:has(> :last-child:nth-child(4)),
panel-header:has(> :last-child:nth-child(4)) {
  grid-template-columns: auto 1fr auto auto;
}

label:hover,
label:has(> input:checked) {
  background-color: rgba(var(--bg-active));
  color: rgba(var(--txt-active));
}

list-cell {padding: .5rem;}

input {
  display: none;
  /* accent-color: rgba(var(--accent)); */
}

panel-header {padding: 1.0rem;}

p {padding: 0 1rem;}

meta-data {
  font-size: 0.8rem;
  opacity: 0.5;
  font-stretch: 100;
  font-style: italic;
  letter-spacing: 0.04rem;
}

app-nav label[for="radio02"]:has(input:checked) + app-panel:has(panel-list label[for="list02Item01"]){
	display: grid;
}

powered-by,
app-logo {padding: 1rem;}

/* TABS ---------------------------------- */

panel-tab {overflow: hidden;}

app-main panel-tab {display: none;}

app-nav:has(#radio01:checked) ~ app-main #tab01,
app-nav:has(#radio02:checked) ~ app-main #tab02,
app-nav:has(#radio03:checked) ~ app-main #tab03,
app-nav:has(#radio04:checked) ~ app-main #tab04,
app-nav:has(#radio05:checked) ~ app-main #tab05{display: grid;}



/* LOOK/FEEL ---------------------------------- */

body {
  background-color: rgba(var(--bg));
  color: rgba(var(--txt));
  font-family: 'Oxanium', sans-serif;
  font-size: 1rem;
  text-shadow: var(--txt-shadow);
}
html:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: -5;
  background: var(--bg-grd);
}
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-attachment: initial;
  background-color: transparent;
  background-image: url('https://d7460n-app-with-resizer.pages.dev/assets/images/pattern.png');
  background-size: 4.6875rem;
  background-repeat: repeat;
  z-index: -5;
}
html:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -10;
  height: 100vh;
  background-color: rgba(var(--bg-02));
  /*background-image: url('https://d7460n-app-with-resizer.pages.dev/assets/images/logo.svg');*/
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: inherit;
  /* background-size: cover; */
  background-size: 75% 75%;
}



/* SCROLLBARS ---------------------------------- */

  *::-webkit-scrollbar {display: block; width: 1rem;}
  *::-webkit-scrollbar-button {display: none;}
  *::-webkit-scrollbar-track {background-color: rgba(48,190,255,0.0);}
  *::-webkit-scrollbar-track-piece {background-color: rgba(48,190,255,0.0);}
  * {--scrollbar-color: rgba(48,190,255,0.0);}
  *:hover, *:focus, *:focus-within {--scrollbar-color: rgba(var(--bg-active)) !important;}
  *::-webkit-scrollbar-thumb {
    background-color: rgba(48,190,255,0.0);
    border: 5px solid transparent;
    border-radius: 1.5rem;
    box-shadow: 0.25rem 0 0 0.25rem var(--scrollbar-color) inset;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-color);
    border: 0 solid transparent;
    box-shadow: none;
  }

  /* FIREFOX */
  /* Target elements, not :root{} */
  /* https://codeconvey.com/custom-scrollbar-css-for-all-browsers/ */
  panel-list,
  app-panel-scroll {
    scrollbar-color: rgba(48,190,255,0.0) rgba(48,190,255,0.0); /* Thumb and track color */
    scrollbar-width: thin; /* Track width */
  }
  panel-list:hover {scrollbar-color: rgba(48,190,255,0.3) rgba(48,190,255,0.0);}
  app-panel-scroll:hover {scrollbar-color: rgba(48,190,255,0.3) rgba(48,190,255,0.0);}


/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 21-08-22 */
/* css-counter postion background */
/* https://stackoverflow.com/questions/43514987/css-increasing-number-as-background-images-for-css */	
.no-class::before { 
	position:absolute;
  display:flex;
	/*top:var(--count-pos-top);*/
  /*right:var(--count-pos-right);*/
  bottom:var(--count-pos-bottom);
  left:var(--count-pos-left);
	justify-content:center;
  align-items:center;
  counter-increment:Element 1;
	content:counter(Element) '';
	font-size:var(--count-size); 
	font: 800 Arial;
	  -webkit-text-fill-color:transparent; /* works FF, Chrome and Edge */
	  -webkit-text-stroke:var(--count-width,1px);
	  -webkit-font-smoothing:antialiased;
	color:var(--count-color); /* must be the same color als card-back background */
    opacity:1;
	/*z-index:999;*/
	}
/* shadow */
/*
.shadow, .flex-item {
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}
*/	
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */