/* ===============================
   index.css - Mobile First
================================= */

/* ===== Layout Header ===== */
.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 ===== */
.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;}

/* Horizontal scroll controls (small screens) */
#controlsRow{
  display:flex;
  align-items:flex-end;
  gap:4px;
  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;
}

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

/* ===== Badges & Quantity ===== */
.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}}

/* ===== Buttons ===== */
.btn-status.active-on{
  background:#198754;
  border-color:#198754;
  color:#fff;
}

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

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

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

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

/* ===== Table ===== */
.table-responsive{-webkit-overflow-scrolling:touch;}

#productsTable_wrapper > .row:first-of-type{
  display:none;
}

/* Hide less important columns on small screens */
@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;
  }
}

/* ===== 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:28px;
  opacity:.9;
}

.stat-value{
  font-size:clamp(16px,4vw,22px);
  font-weight:700;
}

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

.emoji{font-size:1.2rem;}

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

.sttat .stat-card{
  height:100%;
  min-height:88px;
  display:flex;
}

.sttat .stat-card .card-body{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ===============================
   Tablet (≥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;
  }

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

  .actions-bar{gap:6px;}

  .stat-icon{font-size:32px;}
}

/* ===============================
   Desktop (≥992px)
================================= */
@media (min-width:992px){

  .container-fluid.px-5{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  .sttat .stat-value{
    font-size:clamp(18px,2.2vw,28px);
  }

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