@import url('/statics/css/fonts.css');

:root {

  /* Page background */
  --background: rgb(240, 240, 240);

  /* Primary text color */
  --foreground: rgb(9 9 11);

  /* Card background */
  --card: rgb(255 255 255);

  /* Card text color */
  --card-foreground: rgb(9 9 11);

  /* Primary buttons and links */
  --primary: #04224e;

  /* Text color on primary buttons */
  --primary-foreground: rgb(252 252 252);

  /* Secondary button background */
  --secondary: #9c3700;

  /* Text colour on secondary buttons */
  --secondary-foreground: #ffffff;

  /* Muted (lighter) background */
  --muted: rgb(244 244 245);

  /* Muted (lighter) text colour */
  --muted-foreground: rgb(113 113 122);

  /* Subtler than muted background */
  --faint: rgb(250 250 250);

  /* Subtler than muted text color */
  --faint-foreground: rgb(161 161 170);

  /* Accent background */
  --accent: rgb(244 244 245);

  /* Accent text color */
  --accent-foreground: rgb(24 24 27);

  /* Error/danger color */
  --danger: rgb(223 81 76);

  /* Text color on danger background */
  --danger-foreground: rgb(250 250 250);

  /* Success color */
  --success: rgb(76 175 80);

  /* Text colour on success background */
  --success-foreground: rgb(250 250 250);

  /* Warning color */
  --warning: rgb(255 140 0);

  /* Text colour on warning background */
  --warning-foreground: rgb(9 9 11);

  /* Border color (boxes) */
  --border: rgb(212 212 216);

  /* Input borders */
  --input: rgb(212 212 216);

  /* Focus ring color */
  --ring: rgb(24 24 27);

  --white: rgb(248 248 248);
  --respe-blue: #304F62;
  --respe-orange: #EB5F20;
  --respe-green: #3BB182;
  --accessible-orange: #AE4211;
}

.card {
  border: none;
}

/****************************/
/* Classes d'accessibilité */
/**************************/
.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.fast-link:focus {
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  padding: 0.2em 0.4em;
  background-color: var(--white);
  z-index: 10;
}

.hidden {
  display: none;
}

th, td {
  padding: 10px 25px;
  border-left: 1px solid var(--border);

  &:first-of-type {
    border-left: none;
  }
}

input,
textarea,
select {
  background-color: var(--card);
}

button {
  font-family: inherit;
}

button.outline:not([data-variant=danger]):hover:not([disabled]) {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

dialog {
  width: min(100% - 2rem, 80vw);
  padding: 25px 20px;
  background-color: var(--background);
}

button.action,
a.action {
  padding: 5px;
  aspect-ratio: 1/1;
}

/* BODY LAYOUT */
body {
  --body-padding-block: 15px;
  --body-padding-inline: 10px;

  display: grid;
  min-height: 100vh;

  & > main {
    grid-area: main;
    width: 100%;
  }

  & > header {
    grid-area: header;
    display: flex;
    padding: var(--body-padding-block) var(--body-padding-inline);
  }

  & > footer {
    grid-area: footer;
    padding-bottom: 0.5em;
    text-align: center;
  }
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .card {
    width: clamp(300px, 50vw, 500px);
    background-color: var(--primary);
    color: var(--primary-foreground);

    & hgroup {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;

      & svg {
        position: relative;
        top: 0.3rem;
      }
    }

    & form button {
      display: flex;
      margin-inline: auto;
    }
  }

  & footer {
    position: absolute;
    bottom: 0;
  }
}

body.admin-tmpl {
  --aside-background-color: var(--primary);
  --aside-color: var(--primary-foreground);
  --header-background-color: var(--aside-background-color);
  --header-gradient-light-color: hsl(from var(--header-background-color) h calc(s - 40) calc(l + 20));

  grid-template:
    'header main' 1fr
    'footer main' min-content
    / max-content auto;
  height: 100vh;
  overflow: hidden;

  & > header {
    --header-text-color: var(--aside-color);
    --border-color: var(--color-main-light);

    flex-direction: column;
    /* background-color: var(--header-background-color); */
    background: linear-gradient(to bottom, var(--header-background-color) 68%,var(--header-gradient-light-color) 85%);
    color: var(--header-text-color);

    & hgroup {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;

      h1 {
        margin-block: 0;
        font-size: 1.5rem;
      }
    }

    & nav.admin-nav {
      ul {
        padding-inline-start: 0;
      }
      
      li {
        margin-bottom: 0.3rem;
        list-style: none;
        color: var(--primary-foreground);
        border-radius: 5px;
  
        &:hover {
          background-color: var(--accent);
          color: var(--primary);
        }
      }
      
      .is-active-page {
        background-color: var(--header-text-color) ;
        color: var(--header-background-color);
      }
      
      a {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 0.5rem;
        /* color: currentColor;
        text-decoration: none; */
      }
    }
  }
  
  & > main {
    padding: 0.6rem 1.6rem;
    overflow-y: auto;
  }

  & > footer {
    background-color: var(--header-gradient-light-color);
    color: var(--aside-color);
  }

  .home {
    & > section {
      margin-block: 25px;
  
      &:first-of-type {
        display: flex;
  
        div {
          width: 50%;
          text-align: center;
  
          &:not(:last-of-type) {
            border-right: 1px solid var(--primary);
          }
        
        }
      }
    }
  
    .quick-links {
      display: flex;
      justify-content: stretch;
      gap: 25px;
  
      section {
        flex-grow: 1;
        padding: 0;
        text-align: center;
        border: 2px solid var(--primary);
  
        a {
          display: inline-block;
          width: 100%;
          padding: 25px 10px;
        }
      }
  
      & section:has(a:hover) {
        background-color: var(--primary);
        
        a {
          color: var(--primary-foreground);
        }
      }
    }
  }

  .answer-list {
    table ul {
      margin-bottom: 0;
    }

    thead th:first-of-type {
      width: 50%;
    }

    th:nth-of-type(3) {
      width: min-content;
    }

    .question-number {
      font-weight: bold;
    }
  }

  .answer-view {
    .answer-heading {
      display: flex;
      gap: 15px;
    }

    .answer-actions {
      form {
        display: inline;
        margin-inline-start: 10px;
      }
    }

    form div {
      padding: 15px;
    }

    #question-list {
      margin-block-start: 25px;

      .question-generation {
        display: flex;
        align-items: center;
        gap: 10px;

        form {
          display: flex;
          align-items: center;
          gap: 15px;
          
          & *:not(select) {
            flex-shrink: 0;
          }
        }
        
        dialog {
          width: max-content;
          text-align: center;
        }
      }

      table {
        margin-block-start: 15px;
      }

      .new-question {
        background-color: hsl(from var(--primary) calc(h - 5) calc(s - 50) calc(l + 60));
      }
    }
  }
}

body.public-tmpl {
  --primary: var(--respe-blue);

  grid-template:
    'header' min-content
    'main' 1fr
    'footer' min-content
    / auto;
  min-height: 100vh;
  background-color: hsl(from var(--primary) h calc(s - 30) calc(l + 60));
  font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;

  /* boutons options résponses chatbot */
  .read {
    background-color: hsl(from var(--primary) h calc(s - 20) calc(l + 20));
    color: var(--white);

    &.active {
      background-color: var(--primary);
    }
  }

  header {
    padding-block-start: var(--body-padding-block);
    background-color: var(--white);
    border-block-end: 5px solid var(--respe-orange);
    color: var(--respe-blue);
  }

  .home {
    display: grid;
    grid-template:
      'thread' 1fr
      'loader' min-content
      'user-question' min-content
      / auto;
    max-width: 900px;
    height: 100%;
    padding-block-end: calc(var(--body-padding-block) * 1.5);

    .thread-container {
      grid-area: thread;
    }

    #message-thread {
      display: flex;
      flex-direction: column;
      margin-block-end: 25px;

      .call-to-question {
        width: max-content;
        margin-block-start: 20%;
        margin-inline: auto;
        padding: 10px 15px;
        border-radius: var(--radius-medium);
        background-color: var(--accessible-orange);
        font-size: 1rem;
        text-align: center;
        text-decoration: none;
        color: var(--white);
        box-shadow: var(--shadow-light);

        &:hover {
          background-color: hsl(from var(--accessible-orange) h s calc(l - 10));
        }
      }

      .card {
        max-width: min(550px, 100%);
        margin-block: 10px;
        box-shadow: var(--shadow-medium);
      }

      .card.client-question {
        align-self: flex-end;
        background-color: var(--primary);
        color: var(--primary-foreground);
      }

      .card.chatbot-response {
        align-self: flex-start;
        background-color: var(--white);
        color: var(--foreground);
      }
    }

    .loader {
      grid-area: loader;
    }

    #user-input {
      grid-area: user-question;

      label {
        font-size: 1rem;
        padding-inline-start: 0.8em;
      }

      textarea:focus {
        outline: 2px solid var(--respe-orange);
      }
    }
  }

  footer {
    margin-block-start: 15px;
    background-color: var(--white);
    font-style: italic;

    img {
      position: relative;
      top: 0.5em;
    }
  }
}

/* HTML: <div class="loader"></div> */
.loader {
  &#generate-question-loader {
    display: block;
    width: 50px;
    margin-inline: auto;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  
  &#response-loader {
    display: none;
    width: 60px;
    margin-block: 15px;
    margin-inline: auto;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side,var(--primary) 90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 100%;
    animation: l7 1s infinite linear;
  }
}

@keyframes l3 {to{transform: rotate(1turn)}}
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}