/* responsive.css - 响应式设计样式 */

/* 大屏幕设备 (1200px以上) */
@media (min-width: 1201px) {
    .post-list.card-view {
      grid-template-columns: repeat(3, 1fr);
    }
    
    /* 电脑端侧边栏保留滚动条 */
    .sidebar-inner {
      overflow-y: auto; /* 改为auto而不是visible，允许滚动 */
      max-height: calc(100vh - 70px); /* 保持与顶部导航栏高度相协调 */
      padding-right: 5px; /* 给滚动条留出空间 */
      scrollbar-width: thin;
      scrollbar-color: var(--primary-color) rgba(20, 11, 46, 0.7);
    }
    
    .sidebar-inner::-webkit-scrollbar {
      width: 6px;
      display: block;
    }
    
    .sidebar-inner::-webkit-scrollbar-track {
      background: rgba(30, 21, 72, 0.5);
      border-radius: 3px;
    }
    
    .sidebar-inner::-webkit-scrollbar-thumb {
      background-color: var(--primary-color);
      border-radius: 3px;
    }
    
    .sidebar-inner::-webkit-scrollbar-thumb:hover {
      background-color: var(--primary-light);
    }
}
  
/* 中等屏幕设备 (992px - 1200px) */
@media (max-width: 1200px) {
    .sidebar {
      width: 230px;
    }
    
    .post-list.card-view {
      grid-template-columns: repeat(2, 1fr);
    }
}
  
/* 平板设备 (768px - 991px) */
@media (max-width: 991px) {
    .top-nav {
      display: none;
    }
    
    .sidebar-toggle {
      display: flex;
    }
    
    .search-bar input {
      width: 150px;
    }
  
    .search-bar input:focus {
      width: 200px;
    }
    
    .user-info {
      display: none;
    }
    
    .post-list.card-view {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}
  
/* 移动设备 (576px - 767px) */
@media (max-width: 767px) {
    .main-header {
      padding: 0 15px;
    }
    
    /* 移动端侧边栏 - 增加背景不透明度 */
    .sidebar {
      position: fixed;
      top: 0;
      left: -280px;
      height: 100%;
      width: 280px;
      background: rgba(20, 11, 46, 0.95); /* 更改为0.95的不透明度 */
      box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5); /* 增强阴影 */
      transition: all 0.3s ease;
      z-index: 95;
      border-right: 2px solid var(--primary-color); /* 添加明显的边框 */
    }
    
    .sidebar.active {
      left: 0;
    }
    
    /* 移动端侧边栏内容滚动 */
    .sidebar-inner {
      position: static;
      padding-top: 15px;
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; /* 增强移动端滚动体验 */
      /* 显示滚动条 */
      scrollbar-width: thin;
      scrollbar-color: var(--primary-color) rgba(20, 11, 46, 0.7);
    }
    
    .sidebar-inner::-webkit-scrollbar {
      width: 6px;
      display: block;
    }
    
    .sidebar-inner::-webkit-scrollbar-track {
      background: rgba(30, 21, 72, 0.5);
    }
    
    .sidebar-inner::-webkit-scrollbar-thumb {
      background-color: var(--primary-color);
      border-radius: 3px;
    }
    
    /* 提高关闭按钮的可见性 */
    .close-sidebar-btn {
      font-size: 1.8rem;
      color: var(--primary-color);
      background: rgba(20, 11, 46, 0.8);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--primary-color);
      transition: all 0.3s ease;
      cursor: pointer;
      z-index: 100; /* 确保按钮在最上层 */
    }
    
    .close-sidebar-btn:hover {
      background: var(--primary-color);
      color: var(--bg-dark);
      transform: scale(1.1);
    }
    
    .mobile-sidebar-header {
      display: flex;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid var(--primary-color);
    }
    
    .main-content {
      padding: 15px;
    }
    
    .action-buttons {
      flex-direction: column;
      gap: 15px;
      align-items: stretch;
    }
    
    .filter-controls {
      width: 100%;
      justify-content: space-between;
    }
    
    .pinned-post {
      flex-direction: column;
    }
    
    .pin-indicator {
      align-self: flex-start;
      margin-bottom: 10px;
    }
    
    .post-list.card-view {
      grid-template-columns: 1fr;
    }
    
    .notification-panel {
      width: 100%;
    }
    
    .modal-content {
      width: 95%;
      max-width: none;
    }
}
  
/* 小屏幕移动设备 (576px以下) */
@media (max-width: 480px) {
    .logo-text {
      font-size: 1.5rem;
    }
    
    .subtitle {
      font-size: 0.7rem;
    }
    
    .post-footer {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .post-footer .post-meta {
      margin-top: 10px;
      text-align: left;
    }
    
    .post-footer .post-stats {
      justify-content: flex-start;
      margin-top: 5px;
    }
    
    .search-bar {
      display: none;
    }
    
    .editor-toolbar {
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .toolbar-btn {
      margin: 2px;
    }
    
    .form-actions {
      flex-direction: column;
      gap: 10px;
    }
    
    .secondary-btn {
      order: 2;
    }
    
    .primary-btn {
      order: 1;
    }
}
  
/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .main-header {
      height: 50px;
    }
    
    .sidebar-inner {
      top: 50px;
      max-height: calc(100vh - 50px);
    }
    
    .logo-text {
      font-size: 1.5rem;
    }
    
    .subtitle {
      display: none;
    }
    
    .notification-panel {
      top: 50px;
      height: calc(100% - 50px);
    }
}