/**
 * APP & CSS by JB PELLIER @https://github.com/JeqnBat
 * MAIN STYLE.CSS
 */

/** 
 * ====================== INDEX ======================= 
 *
 *  1. VARIABLES
 *  2. HTML GLOBAL STYLING
 *  3. CLASSES
 *    3.a SHAPES
 *    3.b TRANSITIONS
 *    3.c LAYOUT
 *    3.d TOOLS
 *    3.e CUSTOM HTMX LAZY LOADING
 *  4. PAGE
 *  5. COMPONENTS
 *    [1] - ABSOLUTE BACKGROUND
 *    [2] - AUTH SECTION
 *    [3] - TOP RIGHT SWITCH BUTTON
 *    [4] - SEARCH FIELD
 *    [5] - MAIN ITEMS DISPLAY
 *    [6] - FOOTER
 *  6. MEDIA QUERIES
 */

/* 1. VARIABLES ___________________________________________ */
:root {
  --pad: 12px;
  --font-1: Verdana, Geneva, Tahoma, sans-serif;
  --font-2: monospace;
  --primary: white;
  --auth: #17202A;
  --auth-err: black;
  --kaf-1: #9400FF;
  --kaf-2: #27005D;
  --kaf-3: #4b00b3;
  --kaf-4: #7a1bff;
  --jb-1: dodgerblue;
  --jb-2: #010409;
  --jb-3: #161b22;
  --jb-4: #30363d;
}
/* 2. HTML GENERAL STYLING ________________________________ */
html, body {
  margin: 0;
  padding: 0;
  color: var(--primary);
  font-family: var(--font-1);
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}
input:focus, button {
  outline: none;
}
/* 3. CLASSES _____________________________________________ */
/* 3.a SHAPES */
.smooth {
  border-radius: 10px;
}
.round {
  border-radius: 20px;
}
.rounder {
  border-radius: 30px;
}
/* 3.b TRANSITIONS */
.minuscule {
  height: 0;
}
.behind {
  z-index: -1;
}
.invisible {
  opacity: 0;
}
.clicked {
  pointer-events: none;
  opacity: .4;
}
/* 3.c LAYOUT */
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.spacer {
  width: auto;
  height: 30px;
}
.spacinho {
  width: auto;
  height: 12px;
}
.d-none {
  display: none;
}
/* 3.d TOOLS */
.error {
  color: red;
  text-transform: uppercase;
  font-family: var(--font-2);
}
.spinner {
  display: block;
  margin: 15px;
  height: 30px;
  width: 30px;
  border-radius: 17px;
  border: 4px dotted;
  animation: 2s linear infinite spin;
}
/* 3.e CUSTOM HTMX LAZY LOADING */
.loading {
  display: none;
  width: 100%;
}
.htmx-request .loading {
  display: flex;
}
.htmx-request.loading {
  display: flex;
}
.checking {
  opacity: 0;
  width: 100%;
}
.htmx-request .checking {
  opacity: 1;
}
.htmx-request.checking {
  opacity: 1;
}
/* 4. PAGE ________________________________________________ */
#wrapper > section {
  transition: all .2s ease-in;
  position: absolute;
  inset: 0;
}
section#home > * {
  width: 100%;
}
main {
  text-align: center;
  flex-grow: 2;
}
footer {
  height: 50px;
  background-color: var(--jb-1);
}
/* 5. COMPONENTS __________________________________________ */
/* [1] ABSOLUTE BACKGROUND ________________________________ */
#bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: black;
}
#bg.auth {
  background-color: var(--auth);
}
#bg.error {
  background-color: var(--auth-err);
}
#bg.jb {
  background-color: var(--jb-2);
}
#bg.kaf {
  background-color: var(--kaf-2);
}
/* [2] AUTH SECTION _______________________________________ */
section#auth {
  color: var(--primary);
  font-family: var(--font-2);
}
section#auth > #logo {
  font-size: 2rem;
  height: 120px;
  width: 120px;
  border-radius: 60px;
  box-shadow: 0 0 8px var(--jb-1);
  background-color: var(--jb-1);
  transition: all .2s ease-in-out;
}
section#auth > #logo.idle {
  transform: translateY(14vh);
}
#auth > #mdp {
  transition: all .2s ease-in .3s;
  font-family: var(--font-1);
}
/* Password input */
#auth > #mdp > input[type="password"]#pwd::placeholder {
  font-size: .75rem;
  text-transform: uppercase;
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: darkgrey;
  transform: translate(12px, 18px);
  transition: all .2s ease-in-out;
}
#auth > #mdp > input[type="password"]#pwd:focus::placeholder {
  transform: translate(12px, 0);
  font-size: .6rem;
  color: var(--jb-1);
}
#auth > #mdp > input[type="password"]#pwd {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid darkgrey;
  color: var(--primary);
  font-size: 1.5rem;
  padding: 10px;
  width: 50vw;
}
#auth > #mdp > input[type="password"]#pwd.error {
  border-bottom: 1px solid red;
}
#auth > #mdp > input[type="password"]#pwd:focus {
  color: var(--primary);
  border-bottom: 1px solid dodgerblue;
  transition: all .2s ease-in;
}
/* ENVOYER BUTTON */
#auth > #mdp > button {
  padding: 20px 40px;
  border: 0;
  width: 100%;
}
/* [3] TOP RIGHT SWITCH BUTTON ____________________________ */
header div#user-switch {
  align-self: flex-end;
}
#user-switch {
  position: relative;
  border-radius: 18px;
  width: 60px;
  padding: 5px;
  margin: var(--pad);
  transition: all .2s ease-in-out;
}
#user-switch.dodgerblue {
  background-color: var(--jb-1);
}
#user-switch.violet {
  background-color: var(--kaf-1);
}
/* white round cursor */
#user-switch #cursor {
  width: 25px;
  height: 25px;
  border-radius: 13px;
  background-color: var(--primary);
  transform: translateX(18px);
  transition: all .2s ease-in-out;
}
#user-switch #cursor.slide-left {
  transform: translateX(-18px);
}
/* users names */
#user-switch .label {
  position: absolute;
  font-size: 0.7rem;
  font-family: var(--font-1);
  font-weight: bold;
  text-align: center;
}
/* users names position */
#user-switch .label#JB {
  left: 15px;
  transition: all .2s ease-in-out;
}
#user-switch .label#KAF {
  right: 12px;
  transition: all .2s ease-in-out;
}
/* [4] SEARCH FIELD _______________________________________ */
input[type=search]#search {
  border: 1px solid var(--jb-4);
  height: 60px;
  width: 80%;
  padding: 0 40px;
  transition: all .2s ease-in-out;
  font-family: var(--font-1);
  text-transform: uppercase;
  font-size: 1rem;
  background-color: var(--jb-2);
  color: var(--primary);
}
input[type=search]#search:focus {
  border: 1px solid var(--jb-1);
}
input[type=search]#search.kaf-search {
  background: var(--kaf-2);
  color: var(--primary);
  border: 1px solid var(--kaf-3);
}
input[type=search]#search.kaf-search:focus {
  border: 1px solid var(--kaf-1);
}
/* [5] MAIN ITEMS DISPLAY _________________________________ */
#pwds {
  margin: 0 var(--pad);
  height: 100%;
}
ul.carrousel {
  flex-grow: 2;
  margin: 0;
  padding: 0 20px;
  height: 60vh;
  width: 20rem;
  overflow: auto;
  scroll-snap-type: y mandatory;
}
ul.carrousel > li {
  opacity: .75;
  justify-content: flex-start;
  min-height: 80px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--jb-4);
  overflow: hidden;
  scroll-snap-align: start;
  justify-content: space-between;
  transition: all .3s ease-in-out;
}
.carrousel > li > div:first-of-type {
  font-family: monospace;
  text-transform: uppercase;
  font-size: 1.5rem;
  text-align: left;
  overflow: hidden;
  flex-grow:2;
}
.carrousel > li > div:not(:first-of-type) {
  border-radius: 20px;
  min-width: 48px;
  min-height: 48px;
}
.carrousel > li > div:nth-child(2) {
  margin-right: 4px;
  border: 1px solid var(--jb-4);
}
.carrousel > li > div:nth-child(3) {
  background: white;
  color: var(--jb-2);
}
/* [6] FOOTER _____________________________________________ */
footer.kaf-footer {
  background: var(--kaf-3);
}
/* 6. ANIMATIONS __________________________________________ */
@keyframes spin {
  from { transform: rotateZ(0deg); } 
  to { transform: rotateZ(360deg); }
}
@keyframes fade {
  0% { opacity: 0; }
  0.01% { opacity: 1; }
  100% { opacity: 1; }
}
/* 7. MEDIA QUERIES _______________________________________ */
@media screen and (min-width: 480px ) and (orientation: landscape) {
  html, body {
    position: relative;
  }
  #wrapper {
    position: relative;
    justify-content: center;
    min-height: 100vh;
  }
  #wrapper > section {
    position: relative;
    width: 480px;
  }
  section#auth > #mdp > input[type="password"]#pwd {
    width: 100%;
    padding: 10px 0;
  }
  section#home {
    min-height: 100vh;
    justify-content: space-between;
  }
  section#home > main > #pwds > ul.carrousel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    scroll-snap-type: none;
  }
  section#home > main > #pwds > ul.carrousel > li {
    width: 195px;
    margin: 10px 0;
  }
  #bg {
    min-height: 100vh;
  }
}