/* =================================
   General Utilities
   ================================= */
.iconeto {
  margin: 0 5px;
}

div.extralog {
  margin: auto 5px;
  font-size: 12px;
  opacity: 0.8;
}

/* =================================
   Grid Layout
   ================================= */
.grid-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 768px) {
  .grid-row {
    grid-template-columns: 1fr;
  }
}

/* =================================
   Progress Bars
   ================================= */
.progressbar {
  height: 2rem;
  width: 100%;
  display: flex;
  margin-bottom: 0.75rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

.progressbar > * {
  height: 100%;
  transition: width 0.3s ease;
}

.progressbar__legend {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin-top: 1rem;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.progressbar__legend > * {
  display: flex;
  align-items: center;
}

.progressbar__blocky {
  display: inline-block;
  margin-right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}

/* Progress Bar States Colors */
.bar_active {
  background-color: #48c774;
}

.bar_disabled {
  background-color: #7a7a7a;
}

/* Time Bin Progress Bar Colors - Pastel Greens */
.bar_bin_0_1 {
  background-color: #c2e8c2; /* Lightest pastel green */
}

.bar_bin_1_3 {
  background-color: #a0d6a0; /* Light pastel green */
}

.bar_bin_3_8 {
  background-color: #7cc27c; /* Medium pastel green */
}

.bar_bin_8_plus {
  background-color: #57a357; /* Darker pastel green */
}

/* Price Progress Bar Colors - Pastel Category Colors */
.bar_1 {
  background-color: #B5EAD7; /* Mint */
}

.bar_2 {
  background-color: #FFD6BA; /* Peach */
}

.bar_3 {
  background-color: #C7CEEA; /* Periwinkle */
}

.bar_4 {
  background-color: #FF9AA2; /* Salmon */
}

.bar_5 {
  background-color: #F9EBC8; /* Cream */
}

.bar_6 {
  background-color: #CFBAF0; /* Lavender */
}

.bar_7 {
  background-color: #A1CCA5; /* Sage */
}

/* =================================
   Tags Styling
   ================================= */
.tags-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tag-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  background-color: #f5f5f5;
  overflow: hidden;
  --tag-color: #000000;
  --tag-width: 0%;
}

.tag-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--tag-color);
  width: var(--tag-width);
  opacity: 0.15;
  z-index: 0;
}

.tag-name {
  position: relative;
  z-index: 1;
}

.tag-name a {
  color: #363636;
  text-decoration: none;
}

.tag-name a:hover {
  text-decoration: underline;
}

.tag-count {
  position: relative;
  z-index: 1;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-size: 0.85rem;
}

/* =================================
   Card Enhancements
   ================================= */
.card {
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.1);
  transition: box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: 0 4px 20px rgba(10, 10, 10, 0.15);
}

.card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-content .content {
  flex-grow: 1;
}

.card-header-buttons {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 0.75rem;
}

.card-header-buttons .button {
  margin: 0 0.25rem;
}

.card-header-buttons .sort-actions {
  display: flex;
  align-items: center;
}

/* Card with table content */
.card-table {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-table .table {
  margin-bottom: 0;
}

.card-table .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* =================================
   Box Enhancements
   ================================= */
.box {
  height: 100%;
}

/* =================================
   Product Information
   ================================= */
.their_id {
  color: hsl(206deg 45% 75%);
  float: right;
  font-size: 0.9rem;
}

.is_in_price_range {
  border-right: 3px solid #48c774;
}

.has-background-gradient-success {
  background: linear-gradient(178deg, hsl(141deg 53% 53%), hsl(127deg 59% 48%));
}

/* =================================
   Responsive Adjustments
   ================================= */
@media screen and (max-width: 768px) {
  .progressbar__legend {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}

/* =================================
   Sortable Table Styles
   ================================= */
.drag-handle {
  cursor: move;
  color: #b5b5b5;
}

.drag-handle:hover {
  color: #7a7a7a;
}

.is-dragging {
  background-color: #f5f5f5;
  opacity: 0.8;
}

.sort-actions.is-hidden {
  display: none;
}

/* =================================
   Custom Text Colors
   ================================= */
.has-text-violet {
  color: #7952b3 !important;
}

.has-text-info-00-invert {
  color: #1d72aa !important;
}