@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

:root {
  --background-color: #54816a80;
  --content-color: #57836f80;
  --text-color: #ffffff;
  --active-color: #e49550;
  --background-filter: blur(30px);
  --widget-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --container-height: 100vh;
  font-size: 0.8rem;
  overflow-y: hidden;
  scrollbar-width: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: monospace;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-image: url(https://raw.githubusercontent.com/5hubham5ingh/foxpanel/refs/heads/assets/fox.webp);
}

/*======================== Main ==========================*/
#main {
  position: absolute;
  left: 20%;
  top: 5%;
  width: 60%;
  height: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;

  svg {
    fill: var(--active-color);
    width: 30%;
  }

  section {
    width: 100%;
    display: flex;
    align-items: center;
    backdrop-filter: var(--background-filter);
    background-color: var(--background-color);
    border-radius: 2rem;
    padding: 0.5rem;

    #search {
      width: 90%;
      color: var(--text-color);
      text-align: left;
      padding-left: 2%;
      height: 3.5rem;
      background-color: var(--content-color);
      margin-left: 1rem;
    }

    #search:focus {
      outline: none;
      border: none;
    }

    #openPanels {
      background-color: transparent;
      svg {
        fill: var(--active-color);
      }
    }

    * {
      border-radius: inherit;
      border: none;
    }
  }
}

.panel {
  visibility: collapse;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out !important;
  scrollbar-width: none;
}

/* -------------------- common widget style ------------------------ */
.widget {
  position: relative; /* Needed for pseudo-element positioning */
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
  border-radius: 2rem;
  background-color: var(--background-color);
  backdrop-filter: var(--background-filter);
  box-shadow: var(--widget-shadow);
}

.widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit; /* Inherit the background color */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease;
  z-index: -1; /* Place behind the main element */
  border-radius: inherit;
}

.widget:hover {
  opacity: 1; /* Make the main element fully opaque */
  backdrop-filter: blur(50px);
}

.widget:hover::before {
  opacity: 1; /* Show the fully opaque background */
}

/*================================ Dock ================================*/
#dock {
  opacity: 1;
  position: fixed;
  bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  left: 50rem;
  right: 50rem;
  padding: 0.5rem;

  button {
    width: 5rem;
    border-radius: inherit;
    background-color: var(--content-color);
    box-shadow: var(--widget-shadow);
    border: none;
    margin: 0.3rem 0;
    padding: 0.5rem 1rem;
    transition: scale 0.2s;
  }

  button:hover {
    scale: 1.2;
    background-color: var(--active-color);
    svg {
      fill: var(--content-color);
    }
  }

  button.clicked {
    border: 0.3rem solid var(--active-color);
  }
}

.dockAppFrame {
  width: 80%;
  height: 80%;
  position: fixed;
  left: 10%;
  bottom: 10%;
  backdrop-filter: blur(50px);
  border: 1rem solid var(--active-color);
  border-radius: 2rem;
  box-shadow: var(--widget-shadow);
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);

  iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
  }

  button {
    position: fixed;
    opacity: 0;
    background-color: var(--active-color);
    border: 0;
    border-radius: inherit;
    font-size: 1rem;
    padding: 1rem;
    top: -2rem;
    right: 0;
  }

  button:nth-child(2) {
    right: 3rem;
  }

  button:nth-child(3) {
    right: 6rem;
  }

  button:hover {
    opacity: 1;
  }
}

/*============================== Left panel ============================*/
#leftPanel {
  top: 0;
  left: 0;
  position: fixed;
  padding: 1rem;
  height: var(--container-height);
  overflow: auto;
  width: 30rem;
}

/*----------------------- Page zoom lever ----------------------------*/

.slider {
  --slider-height: 1rem;
  --slider-border-radius: 1rem;
  --level-transition-duration: 0.1s;
}

.slider .level {
  appearance: none;
  width: 100%;
  height: var(--slider-height);
  background: var(--content-color);
  overflow: hidden;
  border-radius: var(--slider-border-radius);
  transition: height var(--level-transition-duration);
  cursor: inherit;
}

.slider .level::-moz-range-thumb {
  width: var(--slider-height);
  height: var(--slider-height);
  border-radius: 50%;
  background: var(--active-color);
  border: none; /* Remove default border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.slider:hover .level {
  height: calc(var(--slider-height) * 1.5);
}

.slider .level:focus::-moz-range-thumb {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.slider .level::-moz-range-thumb:active {
  transform: scale(2);
}

/*----------------------------- Pomodoro -----------------------*/

.timer-container {
  text-align: center;
  width: 280%;
}

.countdown-svg {
  width: 95%;
}

#startButton {
  font-family: monospace;
  background-color: var(--content-color);
  border: none;
  color: var(--text-color);
  padding: clamp(0px, 7vw, 10px) clamp(0px, 7vw, 20px);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: clamp(0px, 7vw, 20px);
  margin: 10px 2px;
  cursor: pointer;
  border-radius: clamp(0px, 4vw, 8px);
  position: relative;
  transform: translate(0, -13rem);
  box-shadow: var(--widget-shadow);
}

#modeButtonContainer {
  margin-top: -8rem;
  padding-bottom: 1rem;
}

circle {
  fill: none;
  stroke: var(--active-color);
  stroke-width: 4;
  stroke-dasharray: 283;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear;
}

.countdown-text {
  position: relative;
  transform: translate(0, -14rem);
  font-size: 4rem;
  font-weight: bold;
  color: var(--text-color);
}

/*-------------------------------- Power buttons -----------------------------*/
#powerButtons {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;

  button {
    width: 75%;
    height: 19%;
    border-radius: inherit;
    background-color: var(--content-color);
    box-shadow: var(--widget-shadow);
    border: none;

    svg {
      transition: fill 0.3s ease;
    }
  }

  button:nth-child(1) svg:hover {
    fill: red;
  }

  button:nth-child(2) svg:hover {
    fill: blue;
  }

  button:nth-child(3) svg:hover {
    fill: green;
  }

  button:nth-child(4) svg:hover {
    fill: orange;
  }
}

#shortcuts {
  height: 12rem;

  div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    width: 50%;
    margin-top: 1rem;
    padding: 1rem;

    a {
      border-radius: inherit;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--content-color);
      box-shadow: var(--widget-shadow);

      svg {
        width: 40%;
        height: 80%;
      }
    }
  }
}

#sysUtils {
  display: inline-flex;
  justify-content: space-between;
  padding: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;

  button {
    border-radius: inherit;
    background-color: var(--content-color);
    box-shadow: var(--widget-shadow);
    border: none;
    width: 17%;
    padding: 1rem;

    svg {
      width: 100%;
    }
  }

  #menuContainer {
    border-radius: inherit;
    background-color: var(--background-color);
    box-shadow: var(--widget-shadow);
    width: 100%;
    height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
  }

  #menuContainer.open {
    height: fit-content;
    max-height: 15rem;
    padding: 1rem;
    margin-top: 1rem;
    overflow-y: auto;

    #initialStateHeader {
      color: var(--active-color);
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 1rem;

      button {
        border-radius: 100%;
        box-shadow: var(--widget-shadow);
        margin: 0;
        margin-left: auto;
        width: fit-content;
      }
    }

    button {
      border-radius: inherit;
      background-color: var(--content-color);
      box-shadow: var(--widget-shadow);
      width: 100%;
      color: var(--text-color);
      margin-top: 1rem;
    }

    div {
      margin: 0.5rem 0;
      border-radius: inherit;
      input {
        border-radius: inherit;
        background-color: #fff3;
        box-shadow: var(--widget-shadow);
        color: var(--text-color);
        width: 70%;
        padding: 0.5rem;
        border: none;
        margin-left: 6.5%;
      }

      button {
        width: 12%;
        border-radius: inherit;
        background-color: #fff3;
        box-shadow: var(--widget-shadow);
        margin: 0 2%;
        padding: 2%;
      }
    }
  }
}

/*-------------------------------- Todo -----------------------------*/
.todo-container {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  margin-top: 1rem;
  grid-template-columns: 1fr;
  justify-items: center;
  max-height: 17rem;
  overflow-y: auto;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--active-color) transparent;
}

#todoAdd {
  height: 2rem;
  border-radius: 166px;
  padding: 1px 13px 0 13px;
  border: none;
  font-size: 1.5rem;
  background-color: var(--active-color);
  color: var(--background-color);
  transition: all 0.3s;
  position: relative;
  right: 0.5rem;
  top: 0.5rem;
}

#todoAdd:hover {
  background-color: var(--background-color);
  color: var(--active-color);
  cursor: pointer;
}

#todoAdd:active {
  transform: scale(0.9);
}

#todoInput {
  width: 100%;
  margin-left: 16px;
  outline: none;
  border: none;
  background-color: transparent;
  padding: 0 2px;
  font-size: 1.2rem;
  color: var(--text-color);
}

#todoInput::placeholder {
  color: var(--active-color);
}

.todo-container .searchbar-content {
  border-radius: inherit;
  width: 100%;
  display: inline-flex;
  position: sticky;
  background: var(--background-color);
  box-shadow: var(--widget-shadow);
  top: 0;
  z-index: 3;
  height: 3rem;
}

.todolist {
  width: 100%;
  padding-left: 0;
  margin: 0;
  max-height: 13rem;
  overflow-y: auto;
}

.todolistitem {
  display: flex;
  background-color: var(--content-color);
  box-shadow: var(--widget-shadow);
  border-radius: 3rem;
  color: var(--text-color);
  padding: 12px 32px; /* Combined padding */
  list-style: none; /* Simplified list style */
  font-size: 1rem;
  cursor: pointer;
  position: relative;
  word-break: break-word;
  margin-bottom: 0.2rem;
}

.todolistitem::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  border-radius: inherit;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><circle cx="12" cy="12" r="10" fill="none" stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle></svg>');
  background-size: cover;
  background-position: center;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.todolistitem.checked::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 40 40"><path d="M20,0C8.974,0,0,8.973,0,20c0,11.027,8.974,20,20,20c11.029,0,20-8.973,20-20C40,8.973,31.029,0,20,0z M28.818,17.875 l-8.562,8.564c-0.596,0.595-1.377,0.893-2.158,0.893c-0.779,0-1.561-0.298-2.156-0.893l-4.758-4.758 c-1.191-1.191-1.191-3.124,0-4.313c1.191-1.192,3.121-1.192,4.314,0l2.6,2.6l6.408-6.407c1.188-1.189,3.123-1.189,4.312,0 C30.01,14.752,30.01,16.684,28.818,17.875z"></path></svg>');
}

.todolistitem.checked {
  color: #ccc;
  text-decoration: line-through;
}

.todolistitem span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--bg-color-blue);
  text-align: center;
  border-radius: inherit;
  transition: all 0.3s ease;
}

.todolistitem span:hover {
  color: #fff;
}

/*---------------------------------- Quote ---------------------------------*/
#quote-container {
  height: fit-content;
  padding: 1rem;
  margin-top: 1rem;

  h2 {
    padding: 1rem;
    padding-bottom: 0;
    margin: 0;
  }

  p {
    background-color: var(--content-color);
    box-shadow: var(--widget-shadow);
    border-radius: inherit;
    padding: 1rem;
    min-height: 4rem;
    font-style: italic;
    font-size: x-large;
  }
}

/*--------------------------------- Controls ---------------------------------*/
#controls {
  margin-top: 1rem;

  section {
    display: inline-flex;
    align-items: center;
    padding: 1rem;
    width: 90%;

    svg {
      width: 3rem;
      margin-right: 0.5rem;
    }

    input {
      width: 100%;
    }
  }
}

/*================================== Right panel ==============================*/
#rightPanel {
  top: 0;
  right: 0;
  position: fixed;
  padding: 1rem 0;
  height: var(--container-height);
  overflow: auto;
  width: 40rem;
}

/*----------------------------------- Digital Clock ------------------------------------*/

#clock {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 1em 2em 5em;
  font-size: 0.42em;
  margin: 0 1rem;
}
.digit {
  width: 12em;
  position: relative;
  height: 20em;
}
.hours,
.minutes,
.seconds {
  position: relative;
  display: flex;
}
.segment {
  width: 8em;
  height: 2em;
  background-color: var(--active-color);
  opacity: 0.08;
  position: absolute;

  border-radius: 10em;
  transition: opacity 400ms;
}
.colons {
  display: flex;
  justify-content: space-around;
  height: 12em;
  flex-direction: column;
  transform: translateX(-2em);
}
.colon {
  width: 3em;
  height: 3em;
  background-color: var(--active-color);
  border-radius: 50%;
}
.segment-2 {
  transform-origin: top left;
  transform: rotate(90deg) translate(1.5em, -0.05em);
}
.segment-3 {
  transform-origin: top right;
  transform: rotate(-90deg) translate(-1.5em, -0.5em);
}
.segment-4 {
  transform: translateY(9em);
}
.segment-5 {
  transform-origin: top left;
  transform: rotate(90deg) translate(10.5em, -0.5em);
}
.segment-6 {
  transform-origin: top right;
  transform: rotate(-90deg) translate(-10.5em, -0.5em);
}
.segment-7 {
  transform: translateY(18em);
}
.active {
  opacity: 1;
}

/*--------------------------------- Weather -----------------------------------*/

#weather {
  height: fit-content;
  padding: 1.25rem;
  color: var(--text-color);
  margin: 1rem;
}

.search-form {
  position: relative;
  margin: auto;
  width: 100%;
  background-color: transparent;
  margin-bottom: 0.75rem;
}

.search-button {
  position: absolute;
  left: 0.3rem;
  top: 0.5rem;
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
}

.search-input {
  width: 87%;
  color: var(--text-color);
  border-radius: 9999px;
  border: 2px solid transparent;
  padding: 0.75rem 1.25rem 0.75rem 2rem;
  background-color: var(--content-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.search-input::placeholder {
  color: var(--text-color);
}

.search-input:focus {
  border-color: #3b82f6;
  outline: none;
}

.weather-description {
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}

.temperature {
  font-size: 6rem;
  text-align: center;
  margin: 0;
  margin-left: 3rem;
}

.weather-info {
  margin-top: 1rem;
  font-size: 0.875rem;
}

.weather-info p {
  margin: 0.5rem 0;
}

.weather-stats {
  margin: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 1.5rem;
  background-color: var(--content-color);
  padding: 1.5rem 0.75rem;
  color: var(--active-color);
  font-size: 0.875rem;
  box-shadow: var(--widget-shadow);
}

.widget svg {
  fill: var(--active-color);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stat-value {
  font-weight: 600;
  margin: 0;
}

.stat-label {
  font-size: 0.75rem;
  margin: 0;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/*-------------------------- Calender ---------------------------*/
#calendar {
  padding: 0 1rem;
  margin: 0 1rem;
}
header {
  margin: 1rem 0 -1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-display {
  display: flex;
  align-items: center;
}
.header-display p {
  color: var(--active-color);
  margin: 5px;
  font-size: 1.2rem;
  word-spacing: 0.5rem;
}
.arrow {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  color: var(--active-color);
  cursor: pointer;
  transition: all 0.4s linear;
}
.arrow:hover {
  background: var(--active-color);
  transition: all 0.4s linear;
}
#days,
.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: auto;
  padding: 0 0 1rem 1.5rem;
  justify-content: space-between;
}
.week div,
#days div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 3rem;
  border-radius: 100%;
}
#days div:hover {
  background: var(--active-color);
  color: var(--active-color);
  cursor: pointer;
}
.week div {
  color: var(--active-color);
}
.current-date {
  background-color: var(--content-color);
  color: var(--text-color);
}
.display-selected {
  margin-bottom: 10px;
  padding: 20px 20px;
  text-align: center;
}
.inactive {
  opacity: 0.5;
}

/*----------------------------- git repos ------------------------------*/

#repos {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin: 1rem;

  article {
    margin-bottom: 1rem;
    background-color: var(--content-color);
    border-radius: inherit;
    box-shadow: var(--widget-shadow);

    * {
      color: var(--text-color);
    }

    h3 {
      color: var(--active-color);
    }
  }
}