* { box-sizing: border-box; }
:root{
  --bg:#fafafa; --card:#fff; --line:#e8e8e8; --line2:#eee;
  --text:#111; --muted:#666; --btn:#f5f5f5;
  --danger-bg:#ffecec; --danger-border:#f2b2b2;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
}
.bar h1{ margin:0; font-size:18px; line-height:1.1; }
.bar-actions{ display:flex; gap:10px; align-items:center; }

.wrap{ max-width:1100px; margin:14px auto; padding:0 14px 40px; }

button{
  border:1px solid #ddd;
  background:var(--btn);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
button:hover{ filter:brightness(0.98); }
button:active{ transform:translateY(1px); }
button.danger{ border-color:var(--danger-border); background:var(--danger-bg); }

.tbl{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;

  /* IMPORTANT: allow overlays */
  overflow: visible;
}

.tbl th, .tbl td{
  padding:12px 10px;
  border-bottom:1px solid var(--line2);
  vertical-align:middle;
}
.tbl thead th{
  font-size:13px;
  color:#444;
  background:#fbfbfb;
  text-align:left;
}
.num{ text-align:right; font-variant-numeric:tabular-nums; }

.hint{ margin-top:10px; color:var(--muted); font-size:12px; }

/* Medium screens: allow horizontal scroll if needed */
@media (max-width:900px){
  .tbl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Mobile: cards */
@media (max-width:600px){
  .wrap{ padding:0 12px 40px; }
  .bar{ padding:12px; }
  .bar h1{ font-size:17px; }
  .bar-actions{ gap:8px; }

  button{ padding:10px 12px; font-size:13px; border-radius:12px; }

  .tbl thead{ display:none; }

  .tbl, .tbl tbody, .tbl tr, .tbl td{ display:block; width:100%; }
  .tbl{ border:none; background:transparent; overflow:visible; }

  .tbl tr{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 10px 12px;
    margin-bottom:12px;

    /* IMPORTANT: do NOT clip dropdowns */
    overflow: visible;
    position: relative;
  }

  .tbl td{
    border:none;
    padding:8px 6px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
  }

  .tbl td::before{
    content: attr(data-label);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    flex:0 0 auto;
  }

  .tbl td:first-child{
    padding-top:6px;
    padding-bottom:10px;
    font-weight:800;
    font-size:14px;
  }
  .tbl td:first-child::before{ content:"Product"; font-weight:800; }

  .tbl td[data-label="Actions"]{
    display:flex;
    justify-content:flex-end;
    padding-top:10px;
  }
  .tbl td[data-label="Actions"]::before{ display:none; }
}

/* Actions button */
.more-btn{
  min-width:44px;
  padding:10px 12px;
  font-size:18px;
  line-height:1;
  border-radius:12px;
}

/* GLOBAL fixed dropdown (cannot be clipped) */
#actionsMenu{
  position: fixed;
  z-index: 99999;
  width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  padding: 6px;
  display: none; /* toggled by JS */
}

#actionsMenu .menu-item{
  width:100%;
  text-align:left;
  background:#f6f6f6;
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:10px 10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  margin:4px 0;
}

#actionsMenu .menu-item:hover{ filter:brightness(0.98); }
#actionsMenu .menu-item.danger{
  background:var(--danger-bg);
  border-color:var(--danger-border);
}