:root{
  --text:#111;
  --muted:#444;
  --line:#e6e9ef;
  --line-soft:#f0f2f6;
  --bg:#fff;
  --bg-head:#f7f9fc;
  --focus:#3b82f6;
}

.pn-wrap{
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  margin:1.5rem 0;
}

.pn-wrap h2{
  margin:0 0 .25rem;
  font-size:clamp(1.25rem, 2vw + .5rem, 1.75rem);
}

.pn-wrap .meta{ margin:0 0 1rem; color:var(--muted); }

.pn-wrap .search{
  display:flex; gap:.5rem; align-items:center;
  margin:.5rem 0 1rem;
}

.pn-wrap .search span{ color:var(--muted); font-size:.95rem; }

.pn-wrap input[type="search"]{
  flex:1;
  padding:.6rem .75rem;
  border:1px solid #d0d6dd;
  border-radius:.6rem;
  outline:none;
  background:var(--bg);
}

.pn-wrap input[type="search"]::placeholder{ color:#8b93a6; }

.pn-wrap input[type="search"]:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:.8rem;
  background:var(--bg);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
  background:var(--bg);
}

caption.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

thead th{
  position:sticky; top:0; z-index:1;
  background:var(--bg-head);
  text-align:left;
  font-weight:600;
  padding:.75rem .9rem;
  border-bottom:1px solid var(--line);
  user-select:none;
}

thead th[data-key]{ cursor:pointer; }
thead th:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:-2px;
}

thead th.num{ text-align:right; }

tbody td{
  padding:.7rem .9rem;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}

tbody td:nth-child(1){
  white-space:nowrap;           /* Για να μην τυλίγεται το BARCODE */
  overflow-wrap:normal;
  word-break:normal;
}

tbody td:nth-child(3){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

tbody tr:hover{ background:#fafcff; }

.note{
  margin:.75rem 0 0;
  color:#6b7280;
  font-size:.95rem;
}

.sort-ind{ margin-left:.35rem; opacity:.75; }

/* Responsive */
@media (max-width: 560px){
  .pn-wrap .search{
    flex-direction:column;
    align-items:stretch;
  }
  .pn-wrap .search span{ font-weight:600; }
}

/* Προαιρετικό dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --text:#e7e9ee;
    --muted:#b4b9c3;
    --line:#2a2f38;
    --line-soft:#1f2430;
    --bg:#0f1420;
    --bg-head:#151922;
    --focus:#60a5fa;
  }
  tbody tr:hover{ background:#12192a; }
}