/* Mallow Network theme for linkding */

:root {
  color-scheme: dark;

  --primary-color: #d9c68f;
  --primary-color-highlight: #eadba9;
  --primary-color-shade: rgb(231 214 165 / 18%);
  --primary-text-color: #f0dda5;
  --alternative-color: #a9c5ad;
  --alternative-color-dark: #d0e1d1;

  --text-color: #fffdf7;
  --secondary-text-color: rgb(255 253 247 / 68%);
  --tertiary-text-color: rgb(255 253 247 / 48%);
  --contrast-text-color: #18231e;
  --link-color: #f0dda5;
  --secondary-link-color: rgb(240 221 165 / 76%);
  --icon-color: rgb(255 253 247 / 78%);

  --border-color: rgb(255 255 255 / 20%);
  --secondary-border-color: rgb(255 255 255 / 12%);
  --body-color: #15221d;
  --body-color-contrast: rgb(255 255 255 / 7%);

  --input-bg-color: rgb(8 17 14 / 55%);
  --input-disabled-bg-color: rgb(255 255 255 / 10%);
  --input-text-color: #fffdf7;
  --input-hint-color: rgb(255 253 247 / 63%);
  --input-border-color: rgb(255 255 255 / 22%);
  --input-placeholder-color: rgb(255 253 247 / 42%);

  --checkbox-bg-color: rgb(8 17 14 / 55%);
  --checkbox-checked-bg-color: #d9c68f;
  --checkbox-border-color: rgb(255 255 255 / 24%);
  --checkbox-icon-color: #18231e;

  --switch-bg-color: rgb(8 17 14 / 55%);
  --switch-border-color: rgb(255 255 255 / 22%);
  --switch-toggle-color: #fffdf7;

  --btn-bg-color: rgb(255 255 255 / 7%);
  --btn-hover-bg-color: rgb(255 255 255 / 14%);
  --btn-border-color: rgb(255 255 255 / 20%);
  --btn-text-color: #fffdf7;
  --btn-icon-color: rgb(255 253 247 / 78%);
  --btn-primary-bg-color: #d9c68f;
  --btn-primary-hover-bg-color: #eadba9;
  --btn-primary-text-color: #18231e;

  --modal-overlay-bg-color: rgb(5 12 9 / 72%);
  --modal-container-bg-color: #1a2923;
  --modal-container-border-color: rgb(255 255 255 / 18%);
  --menu-bg-color: #1a2923;
  --menu-border-color: rgb(255 255 255 / 18%);
  --menu-item-hover-bg-color: rgb(255 255 255 / 10%);

  --bookmark-title-color: #f0dda5;
  --bookmark-description-color: rgb(255 253 247 / 78%);
  --bookmark-actions-color: rgb(255 253 247 / 54%);
  --bookmark-actions-hover-color: #fffdf7;
  --bulk-actions-bg-color: rgb(12 24 19 / 88%);

  --border-radius: 0.5rem;
  --border-radius-lg: 0.8rem;
  --focus-outline: 2px solid #e7d6a5;
  --box-shadow-xs: 0 1px 2px rgb(0 0 0 / 16%);
  --box-shadow: 0 12px 34px rgb(0 0 0 / 18%);
  --box-shadow-lg: 0 22px 60px rgb(0 0 0 / 28%);
}

html {
  min-height: 100%;
  background: #15221d;
}

body {
  min-height: calc(100vh - 40px);
  background:
    linear-gradient(rgb(7 15 12 / 70%), rgb(7 15 12 / 90%)),
    url("https://mallownetwork.com/assets/appalachian-hero.png") center / cover fixed;
}

header {
  padding: 0.75rem 1rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 0.9rem;
  background: rgb(18 31 26 / 68%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 16%);
  backdrop-filter: blur(18px);
}

header .app-name {
  color: #fffdf7;
  font-weight: 650;
  letter-spacing: 0.05em;
}

.section-header {
  border-bottom-color: rgb(231 214 165 / 22%);
}

.section-header h1,
.section-header h2,
.section-header h3 {
  color: #fffdf7;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

ul.bookmark-list > li {
  margin-bottom: 0.55rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 0.8rem;
  background: rgb(18 31 26 / 58%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
  backdrop-filter: blur(14px);
}

ul.bookmark-list > li:hover {
  border-color: rgb(231 214 165 / 34%);
  background: rgb(23 39 32 / 72%);
}

ul.bookmark-list > li .preview-image {
  border-color: rgb(255 255 255 / 15%);
  border-radius: 0.55rem;
}

.side-panel,
.auth-page,
.settings-page main,
.crud-page main {
  padding: 1rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.9rem;
  background: rgb(18 31 26 / 62%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 16%);
  backdrop-filter: blur(18px);
}

.btn.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  font-weight: 650;
}

input,
select,
textarea,
.form-input {
  backdrop-filter: blur(10px);
}

@media (max-width: 600px) {
  body {
    background-attachment: scroll;
  }

  header {
    padding: 0.6rem 0.7rem;
  }

  ul.bookmark-list > li {
    padding: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}