/* ==========================================
   1. SEARCH INPUT & WRAPPER STYLING
   ================================---------- */
#searchInput {
  width: 100% !important;
  padding: 14px 22px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #2d3748 !important;

  /* Dual background: crisp white inner box with brand gradient border */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #6bdc00, #2ec4b6, #1e90ff) border-box !important;

  border: 2px solid transparent !important;
  border-radius: 50px !important;
  outline: none !important;

  /* Enhanced deeper shadows */
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.08),
    0 10px 25px rgba(46, 196, 182, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.04) !important;

  margin-bottom: 35px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#searchInput::placeholder {
  color: #718096 !important;
  opacity: 1 !important;
}

#searchInput::-webkit-input-placeholder {
  color: #718096 !important;
}
#searchInput::-moz-placeholder {
  color: #718096 !important;
  opacity: 1 !important;
}
#searchInput:-ms-input-placeholder {
  color: #718096 !important;
}

#searchInput:focus {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #52b800, #00f2fe, #0072ff) border-box !important;
  box-shadow:
    0 25px 55px rgba(46, 196, 182, 0.25),
    0 12px 30px rgba(30, 144, 255, 0.18) !important;
  outline: none !important;
}

/* ==========================================
   2. GRADIENT TABLE & UNIFIED HEADER STYLING
   ================================---------- */
#searchResultTable,
.nighochem-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  margin-bottom: 20px !important;
}

/* Unified 135deg Gradient across the entire Header Row */
#searchResultTable thead tr,
.nighochem-table thead tr {
  background: linear-gradient(
    135deg,
    rgb(29, 78, 216),
    rgb(6, 182, 212),
    rgb(34, 197, 94)
  ) !important;
  box-shadow: 0 10px 25px rgba(6, 182, 212, 0.35) !important;
  border-radius: 14px !important;
}

/* Large Header Font (18px) */
#searchResultTable thead th,
.nighochem-table thead th {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.9px !important;
  padding: 20px 24px !important;
  border: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Rounded outer corners for the unified header bar */
#searchResultTable thead th:first-child,
.nighochem-table thead th:first-child {
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}

#searchResultTable thead th:last-child,
.nighochem-table thead th:last-child {
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* Floating Gradient Row Styling with Deeper Base Shadow */
#searchResultTable tbody tr,
.nighochem-table tbody tr {
  background: #ffffff !important;
  box-shadow:
    0 4px 16px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(203, 213, 225, 0.9) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease-in-out !important;
  height: 68px !important;
}

/* Larger Row Data Font (17px) */
#searchResultTable tbody td,
.nighochem-table tbody td {
  padding: 18px 24px !important;
  color: #1e293b !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  border: none !important;
}

#searchResultTable tbody td:first-child,
.nighochem-table tbody td:first-child {
  border-left: none !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

#searchResultTable tbody td:last-child,
.nighochem-table tbody td:last-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* Deeper, bolder hover shadow and crisp hairline frame */
#searchResultTable tbody tr:hover,
.nighochem-table tbody tr:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 16px 35px rgba(15, 23, 42, 0.12),
    0 6px 15px rgba(6, 182, 212, 0.15),
    inset 0 0 0 1px rgb(6, 182, 212) !important;
}

/* ==========================================
   3. STATUS BADGES / PILLS
   ================================---------- */
.nighochem-badge {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 50px;
}

.nighochem-badge.available {
  background: linear-gradient(90deg, #6bdc00, #2ec4b6, #1e90ff);
  box-shadow: 0 8px 20px rgba(46, 196, 182, 0.25);
}

.nighochem-badge.on-request {
  background: linear-gradient(90deg, #ff9900, #ff5e62);
  box-shadow: 0 8px 20px rgba(255, 149, 0, 0.25);
}

/* ==========================================
   4. PAGINATION CONTAINER & STABILITY
   ================================---------- */
.nighochem-table-wrapper,
#tableContainer {
  min-height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.nighochem-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 15px 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: fit-content !important;
}

/* Non-active pagination pills with richer, darker depth shadows */
.nighochem-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important; /* Richer shadow */
}

.nighochem-page-btn:not(.active):hover {
  background: #f8fafc !important;
  border-color: rgb(6, 182, 212) !important;
  box-shadow:
    0 10px 24px rgba(6, 182, 212, 0.25),
    0 4px 10px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px) !important;
}

.nighochem-page-btn.active {
  background: linear-gradient(
    135deg,
    rgb(29, 78, 216),
    rgb(6, 182, 212),
    rgb(34, 197, 94)
  ) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow:
    0 10px 25px rgba(6, 182, 212, 0.4),
    0 4px 10px rgba(29, 78, 216, 0.2) !important;
  transform: translateY(0) !important;
}

/* ==========================================
   RESTRICT LOGO TO FIT PERFECTLY IN ROW
   ================================---------- */

.status-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
}

.ready-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Strict bounding box so the logo never overflows the row height */
.ready-brand-logo {
  max-height: 65px !important; /* Keeps it well within the 68px row height */
  max-width: 70px !important; /* Prevents wide logos from stretching horizontally */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.2 !important;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08)) !important;
  transition: all 0.25s ease-in-out !important;
}

/* Hover effect */
.ready-logo-link:hover .ready-brand-logo,
#searchResultTable tbody tr:hover .ready-brand-logo {
  opacity: 1 !important;
  transform: scale(1.06) !important;
  filter: drop-shadow(0 4px 10px rgba(6, 182, 212, 0.3)) !important;
}

/* ==========================================
   STRICT ROW HEIGHT & LOGO FIX
   ================================---------- */

/* Force table cells to stay compact and prevent vertical stretching */
#searchResultTable tbody tr,
.nighochem-table tbody tr {
  height: 52px !important;
  max-height: 52px !important;
}

#searchResultTable tbody td,
.nighochem-table tbody td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

/* Ensure container fits inside the cell without inflating it */
.status-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
  height: 100% !important;
}

/* Strict bounding box for the logo to prevent row expansion */
.ready-brand-logo {
  max-height: 16px !important; /* Reduced slightly to guarantee it fits tight row heights */
  max-width: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.2 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.04)) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Row hover state: smooth reveal to 0.85 opacity */
#searchResultTable tbody tr:hover .ready-brand-logo,
.nighochem-table tbody tr:hover .ready-brand-logo {
  opacity: 0.85 !important;
  transform: scale(1.04) !important;
  filter: drop-shadow(0 4px 10px rgba(6, 182, 212, 0.25)) !important;
}

/* ==========================================
   RESTORE ORIGINAL SPACIOUS ROW HEIGHT
   ================================---------- */

/* Restore comfortable executive row padding and height */
#searchResultTable tbody tr,
.nighochem-table tbody tr {
  height: 68px !important; /* Back to original generous height */
  max-height: 68px !important;
}

#searchResultTable tbody td,
.nighochem-table tbody td {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
}

/* Container alignment inside the roomier cell */
.status-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
  height: 100% !important;
}

/* Logo size optimized for the 68px original height (default 0.2 opacity, hover 0.85) */
.ready-brand-logo {
  max-height: 50px !important; /* Original balanced height */
  max-width: 70px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.2 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.04)) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Row hover state: smooth reveal to 0.85 opacity */
#searchResultTable tbody tr:hover .ready-brand-logo,
.nighochem-table tbody tr:hover .ready-brand-logo {
  opacity: 0.85 !important;
  transform: scale(1.06) !important;
  filter: drop-shadow(0 4px 10px rgba(6, 182, 212, 0.25)) !important;
}

/* ==========================================
   SMOOTH FADE-IN LOGO ON ROW HOVER
   ================================---------- */

.status-logo-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
  height: 100% !important;
}

/* Default state: subtle watermark at 0.2 opacity */
.ready-brand-logo {
  max-height: 60px !important;
  max-width: 70px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.2 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.04)) !important;
  /* Smooth transition for opacity, transform, and shadow */
  transition:
    opacity 0.4s ease-in-out,
    transform 0.4s ease-in-out,
    filter 0.4s ease-in-out !important;
}

/* Row hover state: smooth fade-in to 0.85 opacity */
#searchResultTable tbody tr:hover .ready-brand-logo,
.nighochem-table tbody tr:hover .ready-brand-logo {
  opacity: 0.85 !important;
  transform: scale(1.06) !important;
  filter: drop-shadow(0 4px 10px rgba(6, 182, 212, 0.25)) !important;
}

/* ==========================================
   LARGER OUTLINED GRADIENT HEPTAGON
   ================================---------- */

.product-name-container {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.gradient-heptagon-svg {
  width: 24px !important; /* Scaled larger and prominent */
  height: 24px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;

  /* Soft drop shadow to lift the outlined stroke off the row */
  filter: drop-shadow(0 2px 4px rgba(6, 182, 212, 0.2)) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Dynamic hover effect mirroring the rest of the row */
#searchResultTable tbody tr:hover .gradient-heptagon-svg,
.nighochem-table tbody tr:hover .gradient-heptagon-svg {
  transform: scale(1.15) rotate(15deg) !important;
  filter: drop-shadow(0 4px 8px rgba(6, 182, 212, 0.35)) !important;
}

/* ==========================================
   FIRST COLUMN TEXT WRAPPING & DYNAMIC ROWS
   ================================---------- */

/* Allow rows to expand naturally for long chemical names while keeping a 68px baseline */
#searchResultTable tbody tr,
.nighochem-table tbody tr {
  height: auto !important;
  min-height: 68px !important;
}

/* Enable clean word-wrapping for the first column */
#searchResultTable tbody td:first-child,
.nighochem-table tbody td:first-child {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 500px !important; /* Prevents the column from stretching infinitely */
}

/* Align the SVG icon to the top when a name spans multiple lines */
.product-name-container {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}

.gradient-heptagon-svg {
  margin-top: 2px !important; /* Aligns the icon optically with the first line of text */
  flex-shrink: 0 !important;
}