/* Layout */
/* App Container */
    #app {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* Header (deprecated, use footer instead) */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--footer-height);
      background-color: var(--color-bg-secondary);
      border-bottom: 1px solid var(--color-border-light);
      display: flex;
      align-items: center;
      padding: 0 var(--spacing-md) var(--spacing-md) 0;
      z-index: 150;
    }

    .header-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      flex: 1;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    /* Footer */
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: var(--footer-height);
      background-color: var(--color-bg-secondary);
      border-top: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      padding: 6 var(--spacing-md) var(--spacing-md) 0;
      z-index: 150;
    }

    .footer-navigation {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-semibold);
      margin-left: auto;
      position: relative;
      padding: 12px 18px 12px 20px;
      transform:  translateX(2px) translateY(-8px);
      color: var(--color-text-secondary);
    }

    .footer-navigation svg {
      cursor: pointer;
    }

    /* 凸起的背景和边框 */
    .footer-navigation::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      /* 关键：向下延伸到 footer 的 border-top 位置 */
      /* 计算方式：footer高度的一半 - 上移距离 + 自身高度的一半（约等于 padding + 行高的一半）*/
      /* 这里假设 footer 高度 60px，可根据实际情况调整这个值 */
      bottom: calc(-1 * (var(--footer-height) / 2 - 61.5px));
      background-color: var(--color-bg-secondary);
      border: 1px solid var(--color-border);
      border-bottom: none;
      border-radius: var(--radius-md) 0 0 0;
      z-index: -1;
    }
    .footer-actions {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    
    /* Sidebar */
    .sidebar {
      position: fixed;
      right: 0;
      bottom: 0;
      width: var(--nav-width);
      max-height: 100vh;
      background-color: var(--color-bg-secondary);
      border-left: 1px solid var(--color-border-light);
      border-top: 1px solid var(--color-border-light);
      border-radius: var(--radius-md) 0 0 0;
      transform: translate(100%, 100%);
      transition: transform var(--transition-base);
      z-index: var(--z-modal);
      display: flex;
      flex-direction: column;
    }

    .sidebar.open {
      transform: translate(0, 0);
    }

    .sidebar-nav {
      flex: 1;
      padding: var(--spacing-md);
      overflow-y: auto;
    }
    
    .nav-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-sm) var(--spacing-md);
      color: var(--color-text-secondary);
      border-radius: var(--radius-md);
      margin-bottom: var(--spacing-xs);
      transition: all var(--transition-fast);
    }

    @media (hover: hover) and (pointer: fine) {
      .nav-item:hover {
        background-color: var(--color-bg-tertiary);
        color: var(--color-text);
      }
    }

    .nav-item.active {
      background-color: var(--color-primary-light);
      color: var(--color-primary);
    }
    
    .nav-item svg {
      width: 20px;
      height: 20px;
    }

    .nav-item .nav-icon {
      width: 20px;
      height: 20px;
      filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
    }

    /* Active state - colored icon */
    .nav-item.active .nav-icon {
      filter: brightness(0) saturate(100%) invert(38%) sepia(88%) saturate(4396%) hue-rotate(212deg) brightness(96%) contrast(96%);
    }

    /* Dark mode for navigation icon */
    html[data-theme="dark"] .nav-item .nav-icon {
      filter: brightness(0) saturate(100%) invert(73%) sepia(11%) saturate(447%) hue-rotate(187deg) brightness(96%) contrast(87%) !important;
    }

    html[data-theme="dark"] .nav-item.active .nav-icon {
      filter: brightness(0) saturate(100%) invert(65%) sepia(63%) saturate(4242%) hue-rotate(217deg) brightness(104%) contrast(101%);
    }

    /* Theme toggle icon styling */
    #theme-icon-auto {
      filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
    }

    html[data-theme="dark"] #theme-icon-auto {
      filter: brightness(0) saturate(100%) invert(73%) sepia(11%) saturate(447%) hue-rotate(187deg) brightness(96%) contrast(87%) !important;
    }

    /* Sidebar footer icon styling */
    .sidebar-footer-row .nav-icon,
    .sidebar-footer-row #theme-toggle svg,
    .sidebar-footer-row #theme-toggle img {
      filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
    }

    html[data-theme="dark"] .sidebar-footer-row .nav-icon,
    html[data-theme="dark"] .sidebar-footer-row #theme-toggle svg,
    html[data-theme="dark"] .sidebar-footer-row #theme-toggle img {
      filter: brightness(0) saturate(100%) invert(73%) sepia(11%) saturate(447%) hue-rotate(187deg) brightness(96%) contrast(87%) !important;
    }

    .sidebar-divider {
      height: 0.6px;
      background-color: var(--color-text-secondary);
      margin: var(--spacing-sm) var(--spacing-md);
    }

    .sidebar-settings {
      padding: var(--spacing-md);
      border-bottom: 1px solid var(--color-border-light);
    }

    .sidebar-footer {
      padding: var(--spacing-md);
      border-top: 1px solid var(--color-border-light);
    }

    .sidebar-logo {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-primary);
    }

    .sidebar-footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-sm);
      margin-bottom: var(--spacing-xs);
      cursor: pointer;
      border-radius: var(--radius-md);
      transition: background-color var(--transition-fast);
    }

    @media (hover: hover) and (pointer: fine) {
      .sidebar-footer-row:hover {
        background-color: var(--color-bg-tertiary);
      }
    }

    .sidebar-footer-row:last-child {
      margin-bottom: 0;
    }
    
    .sidebar-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: calc(var(--z-modal) - 1);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition-base), visibility var(--transition-base);
    }
    
    .sidebar-overlay.visible {
      opacity: 1;
      visibility: visible;
    }
    
    /* Main Content */
    .main-content {
      flex: 1;
      padding-top: 10px;
      padding-bottom: calc(var(--spacing-2xl) + 60px + var(--footer-height));
    }
    
    .page {
      padding: var(--spacing-md);
      max-width: var(--max-content-width);
      margin: 0 auto;
    }
    
    .page-title {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--spacing-lg);
    }
    
    .page-subtitle {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--spacing-md);
      margin-top: var(--spacing-lg);
    }


/* Responsive */
@media (max-width: 480px) {
      .category-tags {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
      }

      .category-tag {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
        min-width: fit-content;
        width: auto;
        max-width: 100%;
      }
    }

    @media (min-width: 768px) {
      .quick-actions {
        grid-template-columns: repeat(3, 1fr);
      }

      .filter-row {
        grid-template-columns: repeat(3, 1fr);
      }

      .pending-record-info {
        grid-template-columns: repeat(4, 1fr);
      }

      .toast-container {
        left: auto;
        max-width: 400px;
      }
    }
    
    @media (min-width: 1024px) {
      .sidebar {
        transform: translateX(0);
      }

      .main-content {
        margin-right: var(--nav-width);
      }

      .header {
        right: var(--nav-width);
      }

      .footer {
        right: var(--nav-width);
      }

      .menu-toggle {
        display: none;
      }

      #sidebar-close {
        display: none;
      }
    }