/* 全局设置 */
ion-content {
   --background: #f9f9f9; // 设置背景颜色
  }

  /* 工具栏样式 */
  ion-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 10px; // 给 toolbar 一些内边距
  }

  /* 自定义分段控件样式 */
  .custom-segment {
   margin: 0 auto; // 自动左右边距使 segment 居中
   background: white; // 设置背景为白色
   border-radius: 8px; // 圆角
   display: flex;
   justify-content: space-between;
   width: fit-content; // 只占用必要的宽度
   padding: 0 5px; // 减少一点内边距以适应更紧凑的设计
  }

  .segment-button {
   flex: 1;
   border: 1px solid #007aff; // 蓝色边框
   border-radius: 8px;
   margin: 0 -5px; // 让它们更靠近
   text-align: center;
   padding: 10px 0;
   transition: background-color 0.2s;

   &.segment-button-active {
    background-color: #007aff; // 当前选中的背景颜色
    color: white;
   }

   ion-label {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
   }
  }

  .search-button {
   margin-left: auto; // 强制将搜索按钮推到最右边
  }

  /* 书籍卡片样式 */
  .book-card {
   margin: 0; /* 移除边距，由 .book-cards-container 控制 */
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   background-color: #f5f5f5;
   text-align: center;
   width: 80%; /* 减小卡片的宽度 */

   &:hover {
    transform: scale(1.02); // 悬停时放大效果
   }

   ion-card-header {
    background: #e0e0e0; // 卡片头部背景
    border-radius: 8px 8px 0 0;
    padding: 10px;
   }

   ion-card-title {
    font-size: 16px; /* 减小卡片标题的字体大小 */
    margin-bottom: 10px;
   }

   p {
    font-size: 12px; /* 减小卡片内容的字体大小 */
    color: #666;
    margin: 0;
   }
  }

  /* 固定左侧分类列表 */
  .fixed-sidebar {
   position: fixed;
   top: 56px; /* 工具栏的高度 */
   bottom: 0;
   left: 0;
   overflow-y: auto;
   background-color: white;
   border-right: 1px solid #ddd;
   z-index: 1;
   width: 250px; /* 增加宽度以防止遮挡 */
  }

  /* 可滚动的右侧内容 */
  .scrollable-content {
   margin-left: 250px; /* 留出左侧分类列表的空间 */
   height: calc(100vh - 56px); /* 减去工具栏高度 */
   overflow-y: auto;
   padding-top: 10px;
  }

  /* 使用 Flexbox 确保项目占据整个容器的高度 */
  ion-col[size="2"] {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
  }

/* 书籍卡片容器 */
.book-cards-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* 每行显示三个卡片 */
   gap: 10px; // 设置卡片之间的间距
   padding: 10px;
   margin-left: 100px; /* 扩大第一列卡片与左侧导航栏之间的间距 */
  }

  /* 空白页面样式 */
  .blank-page {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   font-size: 1.2em;
   color: #888;
  }
