/**
 * Lab Reports Simple - Optimized CSS
 * Version: 1.0.0
 */

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */
:root {
  /* Colors */
  --lrm-primary-color: #4caf50;
  --lrm-primary-hover: #45a049;
  --lrm-secondary-color: #2196f3;
  --lrm-secondary-hover: #0b7dda;
  --lrm-border-color: #ddd;
  --lrm-bg-light: #ffffff;
  --lrm-bg-white: #ffffff;
  --lrm-text-primary: #333;
  --lrm-text-secondary: #555;
  --lrm-text-muted: #666;
  --lrm-text-light: #999;

  /* Spacing */
  --lrm-spacing-xs: 5px;
  --lrm-spacing-sm: 10px;
  --lrm-spacing-md: 15px;
  --lrm-spacing-lg: 20px;
  --lrm-spacing-xl: 30px;
  --lrm-spacing-xxl: 40px;

  /* Border Radius */
  --lrm-radius-sm: 5px;
  --lrm-radius-md: 8px;

  /* Transitions */
  --lrm-transition-fast: 0.2s ease;
  --lrm-transition-normal: 0.3s ease;

  /* Shadows */
  --lrm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --lrm-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Flexbox Utilities */
  --lrm-flex-center: flex;
  --lrm-flex-between: space-between;
  --lrm-flex-start: flex-start;
  --lrm-flex-end: flex-end;
  --lrm-align-center: center;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.lrm-flex {
  display: flex;
}

.lrm-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lrm-flex-column {
  display: flex;
  flex-direction: column;
}

/* ========================================
   MAIN WRAPPER
   ======================================== */
.lab-reports-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* ========================================
   SEARCH BOX
   ======================================== */
.lab-search-box {
  margin-bottom: 16px;
  position: relative;
  border: 1px solid var(--lrm-text-primary);
  border-radius: var(--lrm-radius-md);
  background-color: var(--lrm-bg-white);
}

/* Changes 03-11-2025 */
.search-input-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

/* Changes 03-11-2025 */
.search-icon {
  pointer-events: none; /* Allows clicks to go through to the input */
  width: 16px;
  height: 15px;
}

/* Changes 03-11-2025 */
.lab-search-input {
  font-family: "montserrat";
  width: 100%;
  font-size: 16px;
  line-height: 32px;
  border: none !important;
  outline: none;
  color: var(--lrm-text-primary);
  padding: 4px 0px !important;
  font-weight: 600;
}

.lab-search-input:focus {
  border-color: var(--lrm-primary-color);
}
.lab-search-input::placeholder {
  color: var(--lrm-text-primary);
}

/* Search Results Counter - Below search box */
/* Changes 03-11-2025 */
.search-results-counter {
  margin-top: var(--lrm-spacing-sm);
  font-size: 14px;
  color: var(--lrm-primary-color);
  text-transform: capitalize;
  font-weight: 600;
  font-family: "montserrat";
  display: none;
  margin-bottom: 5px;
}

/* Search Highlight */
.search-highlight {
  background-color: #ffeb3b;
  color: #000;
  padding: 2px 0px;
  font-weight: 600;
  border-radius: 2px;
}

/* ========================================
   ACCORDION CONTAINER
   ======================================== */
.lab-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========================================
   ACCORDION ITEM
   ======================================== */
.lab-accordion-item {
  border: 1px solid var(--lrm-border-color);
  border-radius: var(--lrm-radius-md);
  overflow: hidden;
  background: #fff;
}

/* ========================================
   ACCORDION HEADER
   ======================================== */
/* Changes 03-11-2025 */
.lab-accordion-header {
  font-family: "montserrat";
  padding: 12px 16px !important;
  cursor: pointer;
  display: flex;
  justify-content: var(--lrm-flex-between);
  align-items: var(--lrm-align-center);
  font-weight: 700;
  transition: background-color var(--lrm-transition-normal);
  user-select: none;
  /* text-transform: capitalize; */
}

/* ========================================
   ACCORDION ICON
   ======================================== */
/* Changes 03-11-2025 */
/* .accordion-icon img {
  transition: transform var(--lrm-transition-normal);
  width: 15px;
  height: 15px;
} */

/* Category Header */
/* Changes 03-11-2025 */
.category-header {
  background-color: var(--lrm-bg-light);
  font-size: 20px;
  line-height: 30px !important;
  color: var(--lrm-text-primary);
}

/* Accordion Icon */
.accordion-icon {
  transition: transform var(--lrm-transition-normal);
  font-size: 12px;
  display: inline-block;
}

.lab-accordion-item.active > .lab-accordion-header > .accordion-icon {
  transform: rotate(180deg);
}

/* ========================================
   ACCORDION CONTENT
   ======================================== */
.lab-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--lrm-transition-normal);
}

.lab-accordion-item.active > .lab-accordion-content {
  grid-template-rows: 1fr;
}

.lab-accordion-inner {
  overflow: hidden;
}

.category-content {
  background-color: var(--lrm-bg-lighter);
}

/* ========================================
   PRODUCT ROW (SIMPLE)
   ======================================== */
/* Changes 03-11-2025 */
.product-item-simple {
  font-family: "montserrat", sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: #fff;
  gap: 16px;
}
.product-item-simple:hover,
.product-item-simple:hover .batch-btn img {
  background: #599fad1f;
}
/* Changes 03-11-2025 */
.product-item-simple .product-name {
  font-size: 16px;
  color: var(--nd-theme-dark);
  font-weight: 700;
  letter-spacing: 0.08px;
}

/* ========================================
   BATCH ACTIONS
   ======================================== */
/* changes 03-11-2025 */
.batch-actions {
  display: flex;
  gap: var(--lrm-spacing-xs);
}

/* ========================================
   BATCH BUTTONS
   ======================================== */
.batch-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0; /* Ensures the button size is defined by the image */
}

/* changes 03-11-2025 */
.batch-btn img {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: block;
  transition: transform 0.2s ease;
}

.preview-btn,
.download-btn {
  background-color: var(--lrm-bg-white);
  color: white;
}

.batch-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* changes 3-11-2025 */
/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
/*@media (max-width: 768px) {*/
/*  .product-item-simple {*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*    gap: var(--lrm-spacing-md);*/
/*    margin-left: var(--lrm-spacing-lg);*/
/*  }*/

/*  .product-item-simple .batch-actions {*/
/*    width: 100%;*/
/*  }*/

/*  .batch-btn {*/
/*    flex: 1;*/
/*    justify-content: center;*/
/*  }*/
/*}*/
/* Default: capitalize text */