/* static/css/base.css */
:root {
  --bg-blue: #2d6cdf;
  --bg-blue-hover: #1f4fad;
  --bg-gray: #8a9199;
  --bg-gray-hover: #5c6166;
  --bg-green: #6cbf43;
  --bg-green-hover: #51972e;
  --bg-red: #ee5050;
  --bg-red-hover: #bb2e30;
  --bg-yellow: #f2ae49;
  --bg-yellow-hover: #c99241;
  --bg-slight-gray: #e5e7eb;
  --bg-normal: rgba(255, 255, 255, 0.85);
  --bg-darker: #f0f3f9;
  --fg-light: #374151;
  --fg-dark: white;
  --drop-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
}

/* General reset and base styles - applies to all elements*/
* {
  color: var(--fg-light);
  box-sizing: border-box;
  font-family: Inter, sans-serif;
}

body {
  background-color: #f5f7fa; /* fallback color if image doesn't load */
  background-image: url("../img/dashboard_background.jpg"); /* path to your image */
  background-size: cover; /* makes the image fill the screen */
  background-position: center; /* centers the image */
  background-repeat: no-repeat; /* prevents repeating tiles */
  background-attachment: fixed; /* keeps background fixed during scroll */
  color: #333;
  padding: 0;
  margin: 0;
  background-color: var(--bg-normal);

  display: flex;
  flex-direction: column;
}

.centered-body {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  padding: 1em; /* optional padding around content */

  display: flex;
  justify-content: center; /* center the dashboard box */
  align-items: flex-start;
}

.centered-main {
  width: 100%;
  max-width: 1000px; /* fit comfortably on most screens */

  display: flex;
  flex-direction: column; /* stack main + sidebar vertically */
  gap: 2em; /* space between sections */
  padding: 2em;

  border-radius: 8px;

  background-color: var(--bg-normal);
  box-shadow: var(--drop-shadow);
}

h1,
h2,
h3 {
  margin-bottom: 0;
  margin-top: 0;
}

section.v-flex {
  gap: 0.8em;
  display: flex;
  flex-direction: column;
}

/* Header and Navigation */
header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background-image: url("../img/pink_banner.jpg"); /* path to your banner image */
  background-size: cover; /* image covers entire div */
  background-position: right; /* center image */
  background-repeat: no-repeat;

  & * {
    color: var(--fg-dark);
  }
}

.top-banner {
  width: 100%;

  display: flex;
  flex-direction: column;

  align-items: left;
  justify-content: left;

  background: linear-gradient(
    249deg,
    rgba(88, 142, 243, 0) 40%,
    color-mix(in srgb, var(--bg-blue) 30%, transparent) 80%
  );

  padding: 1.6rem;

  & h1 {
    font-weight: 400;
  }
}

span#quote-line {
  font-style: italic;
}

@media(max-height: 500px) {
    header {
        position: static;
        max-height: 50px;
    }
    .top-banner {
        display: none;
    }
}


nav {
  display: flex;

  flex-wrap: wrap;
  gap: 0.8em;

  justify-content: left;
  align-items: center;

  background-color: color-mix(in srgb, var(--bg-blue) 80%, transparent);
  color: white;

  padding: 0.8rem 1.6rem 0.8rem 1.6rem;

  & a {
    color: white;
    text-decoration: none;
    margin-right: 1rem;
    font-weight: bold;
    transition: color 0.3s ease;

    /* Disable hover for devices that don't support it */
    @media(hover: hover) {
      &:hover {
        color: #ffdd57;
      }
    }
  }
}

#nav-user-section {
  display: flex;

  flex-grow: 1;
  flex-direction: row;
  gap: 0.4em;

  align-items: center;
  justify-content: right;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.8em;

  & p {
    margin: 0.4em 0;
  }
}

label,
legend {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 0.2rem;
}

span.info-title {
  display: inline;
  margin-right: 0.6em;

  & .subtitle {
    margin-left: 0.4em;
    font-size: x-large;
    font-family: monospace;
    font-weight: bold;
    color: gray;
  }
}

input:not([type="radio"], [type="checkbox"]),
textarea,
select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;

  form & {
    width: 100%;

    &:focus {
      outline: 1px solid var(--bg-blue);
    }
  }
}

button,
.pretend-btn {
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  text-decoration: none;
  text-align: center;
  line-height: normal;
}

fieldset {
  gap: 0.8em;
  width: 100%;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
}

.btn-bg-secondary {
  background-color: var(--bg-gray);
  /* Disable hover for devices that don't support it */
  @media(hover: hover) {
    &:hover {
      background-color: var(--bg-gray-hover);
    }
  }
}

.btn-bg-primary {
  background-color: var(--bg-blue);
  /* Disable hover for devices that don't support it */
  @media(hover: hover) {
    &:hover {
      background-color: var(--bg-blue-hover);
    }
  }
}

.btn-bg-important {
  background-color: var(--bg-yellow);
  box-shadow: 0px 0px 8px white;
  /* Disable hover for devices that don't support it */
  @media(hover: hover) {
    &:hover {
      background-color: var(--bg-yellow-hover);
    }
  }
}

.btn-bg-negative {
  background-color: var(--bg-red);
  /* Disable hover for devices that don't support it */
  @media(hover: hover) {
    &:hover {
      background-color: var(--bg-red-hover);
    }
  }
}

.btn-bg-positive {
  background-color: var(--bg-green);
  /* Disable hover for devices that don't support it */
  @media(hover: hover) {
    &:hover {
      background-color: var(--bg-green-hover);
    }
  }
}

.btn-bg-cancel {
  color: var(--fg-light);
  background-color: white;
  border: 1px solid var(--bg-gray);
  /* Disable hover for devices that don't support it */
  @media(hover: hover) {
    &:hover {
      background-color: var(--bg-slight-gray);
    }
  }
}

#logout_submit {
  font-weight: bold;
}

/* Expense/Income lists */
.section-title {
  margin-top: 2rem;
  font-size: 1.3rem;
  color: #2d6cdf;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.3rem;
}

.expense-list,
.income-list {
  margin-top: 1rem;
  list-style-type: none;
  padding: 0;

  /* Layla added this to help with centering */
  width: auto;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;

  & li {
    background: #f9fafc;
    border: 1px solid #e2e6ea;
    padding: 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
  }
}

table.normal {
  border-collapse: collapse;
  & th,
  & td {
    padding: 0.75rem;
    border: 1px solid var(--bg-slight-gray);
    text-align: left;
  }

  & th {
    background-color: var(--bg-blue);
    color: var(--fg-dark);
  }

  & tr {
    line-height: 0.75rem;
    background-color: white;

    &:nth-child(even) {
      background-color: var(--bg-darker);
    }

    &.editing-active {
      background-color: color-mix(in srgb, var(--bg-blue) 30%, transparent 90%);
      font-weight: bold;
    }
  }

  & td {
    &.edit-tag {
      color: #8a9199;
    }

    &.currency {
      font-family: monospace;
      font-size: larger;
      text-align: right;
    }
  }
}

.form-buttons,
.popup-form-btns {
  display: flex;
  flex: auto;
  gap: 0.8rem;
}

.form-buttons > * {
  flex: auto;
}

.popup-form-btns {
  justify-content: right;
  align-items: right;
}

.h-flex {
  display: flex;
  flex-direction: row;
}

.h-flex > * {
  flex: auto;
}

div#notification-panel {
  position: fixed;
  bottom: 0;

  margin-right: 1em;
  margin-bottom: 1em;

  padding: 0.8em;
  padding-right: 1em;
  border-radius: 8px;
  box-shadow: var(--drop-shadow);
  border: none;
  flex-direction: column;
  gap: 0.4em;

  min-width: 29em;
  max-width: 40em;
  max-height: 60%;

  animation: notif-open 0.25s cubic-bezier(0.22, 1, 0.36, 1);

  & * {
    color: var(--fg-light);
  }

  & button {
    color: var(--fg-dark);
  }

  &:popover-open {
    display: flex;
  }
}

ul#notification-list {
  display: flex;
  flex-direction: column;
  gap: 0.8em;

  list-style: none;
  margin: 0;
  padding: 0;
}

li.notification-card {
  padding-left: 0.4em;
  background-color: white;
  border-left: 4px solid;
  opacity: 70%;
  transition: opacity 0.2s ease;

  /* Disable hover for devices that don't support it */
  @media(hover: hover) {
    &:hover {
      opacity: 100%;
    }
  }

  & div.h-flex {
    gap: 0.4em;
  }

  & button {
    font-size: small;
    padding: 0.4em;
  }

  & ul {
    margin-bottom: 1em;
  }
}

div.notif-footer {
  display: flex;
  flex-direction: row;
  gap: 0.4em;
  width: 100%;

  & > * {
    flex: auto;
  }
}

li.notification-unread {
  border-color: #fa8d3e;
}

li.notification-read {
  border-color: #2d6cdf55;
}

@keyframes notif-open {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 100;
  }
}

/* Layout the dialogs */
dialog[open] {
  display: flex;

  flex-direction: column;

  justify-content: left;
  text-align: left;

  margin: auto;
  padding: 0;

  border: none;
  border-radius: 10px;

  max-width: 360px;
  width: 100%;

  box-shadow: var(--drop-shadow);
}

/* Space out the elements in the dialogs */
dialog > * {
  margin: 20px;
}

/* Fade the background when the dialog is open */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.25);
}

@media (max-width: 30em) {
  div.top-banner {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    align-items: center;
    background: linear-gradient(
      249deg,
      rgba(88, 142, 243, 0) 0%,
      color-mix(in srgb, var(--bg-blue) 60%, transparent) 80%
    );

    & h1 {
      font-size: x-large;
    }
  }

  #quote-line {
    display: none;
  }

  .centered-body {
    padding: 0;
  }

  .centered-main {
    max-width: unset;
  }

  nav {
    flex-direction: column;
  }

  div#notification-panel {
    min-width: 0;
    max-width: none;
    width: 100%;
    margin-right: 0;
  }

  div.notif-footer {
    flex-direction: column;
  }
}