:root {
  --color-primary: #4F6F52;
  --color-danger: #A35C5C;
  --color-success: #7FA67A;
  --color-warning: #C2A878;

  --color-white: #FFFFFF;
  --color-info-dark: #3E4F41;
  --color-dark: #2E3A2F;
  --color-light: rgba(79, 111, 82, 0.15);
  --color-dark-variant: #556B57;

  --color-background: #F4F1EA;

  --card-border-radius: 2rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 1.2rem;

  --card-padding: 1.8rem;
  --padding-1: 1.2rem;

  --box-shadow: 0 2rem 3rem var(--color-light);
}

.dark-mode-variables {
  --color-background: #18201B;
  --color-white: #222C25;
  --color-dark: #E6E1D6;
  --color-dark-variant: #A8B3A5;
  --color-light: rgba(0, 0, 0, 0.45);

  --color-primary: #6F8F72;
  --color-danger: #B07171;
  --color-success: #8FBF8A;
  --color-warning: #D3BC86;

  --color-info-dark: #9FB29F;

  --box-shadow: 0 2rem 3rem var(--color-light);
}

* {
   margin: 0;
   padding: 0;
   outline: 0;
   appearance: none;
   border: 0;
   text-decoration: none;
   box-sizing: border-box;

   body {
      width: 100vw;
      height: 100vh;
      font-family: 'Capriola', sans-serif;
      font-size: 0.88rem;
      user-select: none;
      color: var(--color-dark);
      background-color: var(--color-background);
   }

   a {
      color: var(--color-dark);
   }

   img {
      display: block;
      width: 100%;
      object-fit: cover;
   }

   /* TODO REMOVE IF NOT USED */
   h1 {
      font-weight: 800;
      font-size: 1.8rem;
   }

   h2 {
      font-size: 1.4rem; /* slightly bigger */
   }

   h3 {
      font-weight: 500; /* thinner */
      font-size: 0.87rem; /* slightly smaller */
   }

   small {
      font-size: 0.76rem;
   }

   p {
      color: var(--color-dark-variant);
   }

   b {
      color: var(--color-dark);
   }

   .text-muted {
      color: var(--color-info-dark);
   }

   .primary {
      color: var(--color-primary);
   }

   .danger {
      color: var(--color-danger);
   }

   .success {
      color: var(--color-success);
   }

   .warning {
      color: var(--color-warning);
   }
}

html {
   font-size: 14px;
}

.container {
   display: grid;
   width: 96%;
   margin: 0 auto;
   gap: 1.8rem;
   grid-template-columns: 12rem auto 23rem;
}

aside {
   height: 100vh;
}

aside .toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 1.4rem;

   .logo {
      display: flex;
      gap: 0.5rem;

      img {
         width: 2rem;
         height: 2rem;
      }
   }

   .close {
      padding-right: 1rem;
      display: none;
   }
}

aside .sidebar {
   display: flex;
   flex-direction: column;
   background-color: var(--color-white);
   box-shadow: var(--box-shadow);
   border-radius: 15px;
   height: 88vh;
   position: relative;
   top: 1.5rem;
   transition: all 0.3s ease;

   &:hover {
      box-shadow: none;
   }

   a {
      display: flex;
      align-items: center;
      color: var(--color-info-dark);
      height: 3.7rem;
      gap: 1rem;
      position: relative;
      margin-left: 2rem;
      transition: all 0.3s ease;

      .material-icons-sharp {
         font-size: 1.6rem;
         transition: inherit;
      }

      &:last-child { /* logout */
         position: absolute;
         bottom: 1.8rem;
         width: 100%;
      }

      &.active {
         width: 100%;
         color: var(--color-primary);
         background-color: var(--color-light);
         margin-left: 0;

         &::before {
            content: '';
            width: 6px;
            height: 18px;
            background-color: var(--color-primary);
         }

         .material-icons-sharp {
            color: var(--color-primary);
            margin-left: calc(1rem - 6px);
         }
      }

      &:hover {
         color: var(--color-primary);

         .material-icons-sharp {
            margin-left: 0.6rem;
         }
      }
   }

   .message-count {
      background-color: var(--color-danger);
      padding: 2px 6px;
      color: var(--color-white);
      font-size: 11px;
      border-radius: var(--border-radius-1);
   }
}

main {
   margin-top: 1.4rem;
}

main .analysis {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.6rem;

   & > div {
      background-color: var(--color-white);
      padding: var(--card-padding);
      border-radius: var(--card-border-radius);
      margin-top: 1rem;
      box-shadow: var(--box-shadow);
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
         box-shadow: none;
      }

      .status {
         display: flex;
         align-items: center;
         justify-content: space-between;
      }
   }

   h3 {
      margin-left: 0.2rem;
      font-size: 0.9rem;
   }

   .progress {
      position: relative;
      width: 92px;
      height: 92px;
      border-radius: 50%;

      .percentage {
         position: absolute;
         top: -3px;
         left: -1px;
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         width: 100%;
      }
   }

   svg {
      width: 7rem;
      height: 7rem;

      circle {
         fill: none;
         stroke-width: 10;
         stroke-linecap: round;
         transform: translate(5px, 5px);
      }
   }

   .reads svg circle {
      stroke: var(--color-success);
      stroke-dashoffset: +71;
      stroke-dasharray: 200;
   }

   .visits svg circle {
      stroke: var(--color-danger);
      stroke-dashoffset: +10;
      stroke-dasharray: 100;
   }

   .tbr svg circle {
      stroke: var(--color-primary);
      stroke-dashoffset: -80;
      stroke-dasharray: 81;
   } 
}

main .fav-characters {
   margin-top: 1.3rem;

   .character-list {
      background-color: var(--color-white);
      padding: var(--card-padding);
      border-radius: var(--card-border-radius);
      margin-top: 1rem;
      box-shadow: var(--box-shadow);
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 1.4rem;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
         box-shadow: none;
      }

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

         img {
            width: 6rem;
            height: 6rem;
            margin-bottom: 0.4rem;
            border-radius: 50%;
         }
      }
   }
}

main .recent-reads {
   margin-top: 1.3rem;

   h2 {
      margin-bottom: 0.8rem;
   }

   table {
      background-color: var(--color-white);
      width: 100%;
      padding: var(--card-padding);
      text-align: center;
      box-shadow: var(--box-shadow);
      border-radius: var(--card-border-radius);
      transition: all 0.3s ease;

      &:hover {
         box-shadow: none;
      }

      tbody td {
         height: 2.8rem;
         border-bottom: 1px solid var(--color-light);
         color: var(--color-dark-variant);
      }

      tbody tr:last-child td {
         border: none;
      }
   }

   a {
      text-align: center;
      display: block;
      margin: 1rem auto;
      color: var(--color-primary);
   }
}

.right-section {
   margin-top: 1.4rem;
}

.right-section nav {
   display: flex;
   justify-content: end;
   gap: 2rem;

   button {
      display: none;
   }

   .dark-mode {
      background-color: var(--color-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.6rem;
      width: 4.2rem;
      cursor: pointer;
      border-radius: var(--border-radius-1);

      span {
         font-size: 1.2rem;
         width: 50%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;

         &.active {
            background-color: var(--color-primary);
            color: white;
            border-radius: var(--border-radius-1);
         }
      }
   }

   .profile {
      display: flex;
      gap: 2rem;
      text-align: right;

      .pfp {
         width: 2.9rem;
         height: 2.9rem;
         border-radius: 50%;
         overflow: hidden;
      }
   }
}

.right-section .user-profile {
   display: flex;
   justify-content: center;
   text-align: center;
   margin-top: 1rem;
   background-color: var(--color-white);
   padding: var(--card-padding);
   border-radius: var(--card-border-radius);
   box-shadow: var(--box-shadow);
   cursor: pointer;
   transition: all 0.3s ease;

   &:hover {
      box-shadow: none;
   }

   img {
      width: 11rem;
      height: auto;
      margin-bottom: 0.8rem;
      border-radius: 50%;
   }

   h2 {
      margin-bottom: 0.2rem;
   }
}

.right-section .reminders {
   margin-top: 2rem;

   .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.8rem;

      span {
         padding: 10px;
         box-shadow: var(--box-shadow);
         background-color: var(--color-white);
         border-radius: 50%;
      }
   }

   .notification {
      background-color: var(--color-white);
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.7rem;
      padding: 1.4rem var(--card-padding);
      border-radius: var(--border-radius-2);
      box-shadow: var(--box-shadow);
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
         box-shadow: none;
      }

      .content {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin: 0;
         width: 100%;
      }

      .icon {
         padding: 0.6rem;
         color: var(--color-white);
         background-color: var(--color-success);
         border-radius: 20%;
         display: flex;
      }

      &.deactive .icon {
         background-color: var(--color-danger);
      }
   }

   .add-reminder {
      background-color: var(--color-white);
      border: 2px dashed var(--color-primary);
      color: var(--color-primary);
      display: flex;
      align-items: center;
      cursor: pointer;

      .icon {
         background-color: var(--color-white);
         color: var(--color-primary);
         transition: all 0.3s ease;
      }

      &:hover, 
      &:hover .icon {
         background-color: var(--color-primary);
         color: var(--color-white);
      }

      div {
         display: flex;
         align-items: center;
         gap: 0.6rem;
      }
   }
}

@media screen and (max-width: 1200px) {
   .container {
      width: 95%;
      grid-template-columns: 7rem auto 23rem;
   }

   aside {
      .logo h2,
      .sidebar h3 {
         display: none;
      }

      .sidebar a {
         width: 5.6rem;

         &:last-child {
            position: relative;
            margin-top: 1.8rem;
         }
      }
   }

   main .analysis {
      grid-template-columns: 1fr;
      gap: 0;
   }

   main .fav-characters .character-list .character {
      flex-basis: 40%;
   }

   main .recent-reads {
      width: 94%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin: 2rem 0 0 0.8rem;

      table {
         width: 83vw;

         thead tr th:last-child,
         thead tr th:first-child,
         tbody tr td:last-child,
         tbody tr td:first-child {
            display: none;
         }
      }
   }
}

@media screen and (max-width: 768px) {
   .container {
      width: 100%;
      grid-template-columns: 1fr;
      padding: 0 var(--padding-1);
   }

   aside {
      position: fied;
      background-color: var(--color-white);
      width: 15rem;
      z-index: 3;
      box-shadow: 1rem 3rem 4rem var(--color-light);
      height: 100vh;
      left: -100%;
      display: none;
      animation: showMenu 0.4s ease forwards;

      .logo {
         margin-left: 1rem;
      }

      .logo h2,
      .sidebar h3 {
         display: inline;
      }

      .sidebar a {
         width: 100%;
         height: 3.4rem;

         &:last-child {
            position: absolute;
            bottom: 5rem;
         }
      }

      .toggle .close {
         display: inline-block;
         cursor: pointer;
      }
   }

   main {
      margin-top: 8rem;
      padding: 0 1rem;
   }
      
   main .new-characters .character-list .character {
      flex-basis: 35%;
   }

   main .recent-reads {
      position: relative;
      margin: 3rem 0 0 0;
      width: 100%;

      table {
         width: 100%;
         margin: 0;
      }
   }

   main .right-section {
      width: 94%;
      margin: 0 auto 4rem;

      nav {
         position: fixed;
         top: 0;
         left: 0;
         align-items: center;
         background-color: var(--color-white);
         padding: 0 var(--padding-1);
         height: 4.6rem;
         width: 100%;
         z-index: 2;
         box-shadow: 0 1rem 1rem var(--color-light);
         margin: 0;

         .dark-mode {
            width: 4.4rem;
            position: absolute;
            left: 66%;
         }

         button {
            display: inline-block;
            background-color: transparent;
            cursor: pointer;
            color: var(--color-dark);
            position: absolute;
            left: 1rem;

            span {
               font-size: 2rem;
            }
         }
      }

      .profile .info {
         display: none;
      }
   }
}

   @keyframes showMenu {
      to {
         left: 0;
      }
   }
}