/* styles.css 文件内容 */

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw3aXpsog.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.special-character {
  font-family: 'Georgia', 'Times New Roman', 'Symbola', 'Segoe UI Symbol', 'Arial Unicode MS', 'Apple Symbols', 'Helvetica Neue', monospace; 
}

@media (max-width: 600px) {
  body {
      font-size: 14px;
      max-width: max-w-xl;
  }

  #luminaTitle{
    font-size:x-large;
  }

  #searchContainer {
      flex-direction: column;
      padding: 10px;
  }

  #searchInput {
      width: 100%;
      margin: 5px 0;
  }

  #lumina {
      padding: 10px;
  }
}

body {
  font-family: "Montserrat", "Arial", "Helvetica Neue", sans-serif;
  color: #333; /* 默认文本颜色 */
  flex-direction: column;
  min-height: 100vh; /* 视口高度 */
  margin: 0; /* 移除默认边距 */
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fffce5;
  /* background-image: url("../images/background.jpg"); */
  /* opacity: 0.06; */
  background-size: cover;
  background-position: center;

  filter: blur(1px);
  z-index: -1;
}

.main-content {
  flex: 1; /* 弹性填充所有剩余空间 */
}

.lumina-logo {
  font-weight: bold;
  background: linear-gradient(var(--angle, 0deg), #FFB627,#FFB627,#FFD166 ,#fcfa71 );
  background-size: 24% 150%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: reflect 3s ease-in-out infinite;
}

/* Tag badge base */
.tag-badge {
  display: inline-block;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background-color: #f9fafb;
}

/* Color-specific variants, based on Zotero's "Tag Color" palette */
.tag-color-bittersweet {
  color: #ff6666;
}
.tag-color-carrot-orange {
  color: #ff8c19;
}
.tag-color-grey {
  color: #999999;
}
.tag-color-leefy-green {
  color: #5fb236;
}
.tag-color-teal {
  color: #009980;
}
.tag-color-butterfly-blue {
  color: #2ea8e5;
}
.tag-color-dark-periwinkle{
  color: #576dd9;
}
.tag-color-lavender{
  color: #a28ae5;
}
.tag-color-french-beige{
  color: #a6507b;
}


/* Shelf tag styling */
.shelf-tag {
  color: #008281;
}

/* Invalid shelf tag */
.shelf-tag-invalid {
  color: red;
}

/* Result item styling */
.result-item {
  border-bottom: 1px solid #e5e7eb; /* Tailwind's border-gray-200 */
  padding-bottom: 1rem;            /* Tailwind's pb-4 */
}

.result-title {
  font-size: 1.125rem;             /* Tailwind's text-lg */
  font-weight: 500;                /* Tailwind's font-medium */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-meta {
  font-size: 0.875rem;             /* Tailwind's text-sm */
  color: #4b5563;                  /* Tailwind's text-gray-600 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-tags {
  font-size: 0.875rem;             /* Tailwind's text-sm */
  margin-top: 0.25rem;             /* Tailwind's mt-1 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分页按钮样式 */
.pagination-btn {
  padding: 6px 12px;
  margin: 2px;
  background-color: #f0f0f0;
  color: #008281;
}

.pagination-btn:hover {
  background-color: #d0d0d0;
}

.pagination-btn:disabled {
  color:#999999;
  background-color: #f8f8f8;
}

/*.pagination-btn:active {
  background-color: #007071; 
  color:#f0f0f0;
}*/

.pagination-btn.highlighted {
  background-color: #007071; /* 深色背景 */
  color: #ffffff; /* 白色文字，增加对比 */
  font-weight: bold; /* 加粗文字 */
}

/*.pagination-ellipsis {
  padding: 6px 12px;
  color: white;
}*/

.pagination-jump-container {
  display: inline-block;
  margin-left: 1rem;
}

.pagination-jump-input {
  width: 4rem;
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  text-align: center;
}

/* 自定义 <mark> 标签的样式 */
mark {
  background-color: #ff0; /* 背景颜色，黄色 */
  color: black; /* 文本颜色 */
  padding: 0.2em; /* 内边距 */
  margin: 0; /* 外边距 */
  border-radius: 3px; /* 边角圆滑 */
}

/* 更柔和的颜色示例 */
mark.soft-highlight {
  background-color: #ffd679; /* lightbulb emoji color? */
  color: black;
  padding: 0.2em;
  border-radius: 3px;
}

/* 更深色的背景示例 */
mark.deep-highlight {
  background-color: #d3d3aa; /* 深黄色 */
  color: black;
  padding: 0.2em;
  border-radius: 3px;
}

.ellipsis {
  white-space: nowrap; /* 确保内容不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出内容显示省略号 */
  cursor: pointer; /* 鼠标悬停时显示手型光标，表明可以交互 */
}

/* 页面条目数量下拉框的样式 */
#pageSize {
  display: true; /* 默认隐藏，搜索后显示 */
}

/* 搜索动画样式（选择旋转） */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mark {
  background: #fffacd;
}

/* 搜索容器背景色 */
#searchContainer {
  background-color: #f0f0f0; /* 浅灰色背景 */
}

#clearCacheBtn {
  padding: 6px 12px;
  background-color: #b30004; /* 设定新的背景颜色 */
  color: white;
  border-radius: 4px;
  transition: background-color 1s ease; /* 平滑背景颜色变化 */
  border: none;
  cursor: pointer;
  opacity: 1;
}

#clearCacheBtn:hover {
  background-color: #800003; /* 悬停时的背景颜色稍暗一些 */
}

#searchBtn {
  padding: 6px 12px;
  background-color: #008281; /* 设定新的背景颜色 */
  color: white;
  border-radius: 4px;
  transition: background-color 0.3s ease; /* 平滑背景颜色变化 */
  border: none;
  cursor: pointer;
  opacity: 1;
}

#searchBtn:hover {
  background-color: #007071; /* 悬停时的背景颜色稍暗一些 */
}

#searchBtn:disabled {
  opacity: 0.5;
  cursor: default;
}

.pulser {
  display: inline-block;
  padding-top: 10px; /* 留出顶部空间 */
  color: #008281;
  animation: pulse 1s infinite ease-in-out;
}

.pulser::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #008281;
}

.pulser-error {
  display: inline-block;
  padding-top: 10px; /* 留出顶部空间 */
  color: #b30004; /* 文本颜色 */
  animation: pulse 0.75s infinite ease-in-out;
}

.pulser-error::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #b30004;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.5);
  }
}

@keyframes reflect {
  0%, 100% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
}

#loading {
  min-height: 20px; /* 根据实际内容调整这个高度 */
}

.skeleton-box {
  height: 20px;
  background-color: #ddd;
  margin-top: 10px;
  animation: skeleton-loading 1.5s infinite linear;
}

@keyframes skeleton-loading {
  0% {
    background-color: #ddd;
  }
  50% {
    background-color: #ccc;
  }
  100% {
    background-color: #ddd;
  }
}

#resultsContainer {
  position: relative;
  min-width: 320px; /* Adjust the width as necessary */
}

/* Fix the position of the dropdown */
#pageSize {
  position: relative;
  right: 0; /* Adjust alignment as needed */
  top: 0; /* Adjust to align with other elements */
}