/* ==========================================================================
   Komater Tools - 主样式表
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS 变量（自定义属性）
   -------------------------------------------------------------------------- */
   :root {
    --bs-primary: #3897B3;      /* 主品牌色 - 蓝色 */
    --bs-primary-light: #4EC1C4; /* 主色调的浅色变体 */
    --bs-background: #F2F7F7;    /* 主背景色 */
    --bs-highlight: #F1C40F;     /* 强调色 - 黄色 */
    --bs-text-dark: #2C3E50;     /* 深色文字 */
  }
  
  /* --------------------------------------------------------------------------
     2. 基础样式
     -------------------------------------------------------------------------- */
  body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bs-background);
    color: var(--bs-text-dark);
    margin: 0;
    min-width: 320px; /* 防止在小屏幕上出现横向滚动条 */
  }
  
  /* 全宽区域通用类 */
  /* 已迁移到utilities.css，无需保留 */
  
  /* --------------------------------------------------------------------------
     3. 排版样式
     -------------------------------------------------------------------------- */
  h1, h2 {
    font-weight: 600;
    color: var(--bs-text-dark);
  }
  
  .highlight {
    color: var(--bs-highlight);
  }

/* Product Categories Sidebar Styles */
.product-categories-sidebar {
  background-color: #f8f9fa; /* Light grey background, similar to dropdown */
  padding: 1.5rem;
  border-radius: 0.25rem;
  height: 100%; /* Optional: if you want it to extend full height of its column */
}

.product-categories-sidebar .category-group {
  /* Optional: add margin or padding if needed between groups */
}

.product-categories-sidebar .category-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bs-text-dark);
  margin-bottom: 0.75rem;
  /* text-transform: uppercase; */ /* Optional: if you want uppercase titles */
}

.product-categories-sidebar .sub-category-list {
  /* Styles for the <ul> itself */
}

.product-categories-sidebar .sub-category-list li {
  margin-bottom: 0.3rem;
}

.product-categories-sidebar .sub-category-link {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--bs-text-dark); /* Default link color */
  text-decoration: none;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-categories-sidebar .sub-category-link:hover {
  background-color: #e9ecef; /* Lighter hover */
  color: var(--bs-primary);
}

.product-categories-sidebar .sub-category-link.active {
  background-color: var(--bs-primary-light); /* Active background like dropdown */
  color: var(--bs-primary); /* Ensuring text is a bit darker or different on active */
  font-weight: 500;
}

/* Right Content Area Specific Styles */
.current-category-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--bs-text-dark);
  /* Optional: add border-bottom or other visual cues */
}

/* Ensure product cards in list view have bottom margin if not last in row (handled by mb-4 on col) */
/* .product-card { margin-bottom: 1.5rem; } */ /* This is already handled by col-xx-N mb-4 */

/* Breadcrumb Styles Override */
.breadcrumb-item a {
  color: var(--bs-primary);
  text-decoration: none; /* Optional: remove underline if Bootstrap adds it by default */
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  color: var(--bs-primary-light); /* Using the lighter primary for hover */
  text-decoration: underline;
}

/* Style for the active breadcrumb item if needed (Bootstrap usually handles this well) */
/* .breadcrumb-item.active {
  color: var(--bs-text-dark); 
} */