/* upsert.css */

/* Base (mobile-first) */
.page-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:12px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  width:100%;
}

.controls-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.control{
  min-width:140px;
}

.len-select{
  width:80px;
}

.search-input{
  min-width:140px;
}

.p-thumb{
  width:36px;
  height:36px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.08);
  background:#f8f9fa;
}

.badge-click{cursor:pointer;}

.qty-ok{color:#198754;font-weight:600;}
.qty-min{color:#ff00b9 !important;font-weight:800;}
.qty-danger{color:#dc3545 !important;font-weight:800;animation:blink 1s step-start 0s infinite;}

@keyframes blink{50%{opacity:.25}}

.btn-status.active-on{background:#198754;border-color:#198754;color:#fff;}
.btn-status.active-off{background:#6c757d;border-color:#6c757d;color:#fff;}

.select-all-cell{text-align:center;}

.actions-bar{
  display:flex;
  align-items:center;
  gap:4px;
}

.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:28px;
}

.table-responsive{-webkit-overflow-scrolling:touch;}

/* DataTables wrapper: hide duplicate header row */
#productsTable_wrapper > .row:first-of-type{display:none;}

/* Controls row (horizontal scroll on small screens) */
#controlsRow{
  display:flex;
  align-items:flex-end;
  gap:3px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

#controlsRow .control{
  flex:0 0 auto;
  display:inline-flex;
  flex-direction:column;
  margin:0;
}

/* Stat cards */
.stat-card{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:14px;
  transition:all .25s ease;
  background:linear-gradient(135deg,#f8f9fa,#ffffff);
  cursor:pointer;
}

.stat-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.stat-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(143,175,60,.15),transparent 60%);
  opacity:0;
  transition:.25s;
}

.stat-card:hover::after{opacity:1;}

.stat-card .text-muted{font-weight:600;}

.stat-icon{
  font-size:34px;
  opacity:.9;
}

.stat-value{
  font-size:28px;
  font-weight:700;
}

.stat-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

.emoji{font-size:1.2rem;}

/* Responsive table columns (mobile-first hides) */
@media (max-width:576px){
  #productsTable thead th:nth-child(3),
  #productsTable tbody td:nth-child(3),
  #productsTable thead th:nth-child(4),
  #productsTable tbody td:nth-child(4){
    display:none;
  }

  #productsTable thead th:nth-child(8),
  #productsTable tbody td:nth-child(8){
    display:none !important;
  }
}

/* >= 768px */
@media (min-width:768px){
  .page-header{
    flex-direction:row;
    align-items:center;
    gap:1rem;
  }

  .header-actions{
    width:auto;
  }

  .controls-row{
    gap:12px;
  }

  .control{
    min-width:180px;
  }

  .search-input{
    min-width:220px;
  }

  .len-select{
    width:90px;
  }

  .p-thumb{
    width:42px;
    height:42px;
  }

  .actions-bar{
    gap:6px;
  }

  .btn-icon{
    width:34px;
    height:30px;
  }
}

/* <= 992px equivalent spacing fix (mobile-first form) */
@media (max-width:992px){
  .container-fluid.px-5{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
}

/* sttat overrides */
.sttat .stat-value{
  font-size:clamp(16px,2.2vw,28px);
  line-height:1.1;
  font-weight:700;
}

.sttat .stat-card{
  height:100%;
  min-height:92px;
}

.sttat .stat-card .card-body{
  height:100%;
}