body {
  margin: 0;
  font-family: Arial;
  background-color: #f3f4f6;
  color: #1f2937;
  font-size:14px;
}
.twocolumns {display: flex;width:100%;margin:0 auto;max-width:1500px;gap:20px;
  align-content: flex-start;justify-content: space-between;}

/*.twocolumns .scan {max-width:}*/


.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  /* background-color: green; */
}
.card {
  background: white;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}
input, select, button,a.button {
  text-decoration: none;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
  font-size: 1rem;
    font-size:14px;
  box-sizing: border-box;
}
button,a.button {
  font-size:12px;text-transform: uppercase;
}
button {
  background: black;
  color: white;
  cursor: pointer;
}
button:hover {
  background: #333;
}
.hidden {
  display: none;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}
th, td {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
th {
  background: #e5e7eb;
}
.btn-green {
  background: #16a34a;
  color: white;
}
.btn-green:hover {
  background: #15803d;
}
.btn-red {
  background: #dc2626;
  color: white;
}
.btn-red:hover {
  background: #b91c1c;
}
.flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.product-preview {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.5rem;
}

a {color:green;}
a:hover {color:darkgreen;}

@media (max-width: 1000px) {
  .twocolumns {flex-wrap: wrap}
  .twocolumns > * {width:100%;}
}

@media (max-width: 600px) {
  .container {
    padding: 1rem;
  }
  .flex {
    flex-direction: column;
  }
  .product-preview {
    flex-direction: column;
    align-items: flex-start;
  }
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    display: none;
  }
  td {
    position: relative;
    padding-left: 50%;
    text-align: right;
  }
  td::before {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 45%;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
  }
  td:nth-of-type(1)::before { content: "Κατάστημα"; }
  td:nth-of-type(2)::before { content: "Έναρξη"; }
  td:nth-of-type(3)::before { content: "Λήξη"; }
  td:nth-of-type(4)::before { content: "Κατάσταση"; }
  td:nth-of-type(5)::before { content: "Ενέργεια"; }
}


div.inventorieshead {display: flex;justify-content: space-between;gap:10px}

h1 span {display: block;font-weight: normal;font-size:92%}
h1 span em {color:#b91c1c;font-weight: inherit;font-style: inherit;}
a.finish {text-decoration: none;font-size: 14px;display: inline-block;
  background-color:#b91c1c;color:#fff;border-radius: 4px;margin:0 0 0 10px;
  line-height: 30px;padding:0 8px;}



div.newinventory {flex-wrap:wrap;}
div.newinventory div.preview {width:100%;flex-grow: 1;padding:10px;background: #fff;border-radius:5px;}
div.newinventory div.preview div.product {display: flex;gap:10px;}
div.newinventory div.preview div.product div.image {width:80px}
div.newinventory div.preview div.product div.image>img {max-width:100%}
div.newinventory div.preview div.product div.details {display: flex;width:20%;
  grid-template-columns: 1fr 1fr;column-gap: 10px;flex-wrap: wrap;
align-self: flex-start;row-gap: 5px;}
div.newinventory div.preview div.product label {color:#999;display: block;margin-top:4px;
  font-weight: 400;font-size:90%;width:100%;}
div.newinventory div.preview div.product div.quantities {padding:10px 10px;border-radius:5px;}
div.newinventory div.preview div.product div.quantities>div {display:flex;align-items: center;
  gap:5px;}
div.newinventory div.preview div.product div.quantities div label {width:150px;color:#000}
div.newinventory div.preview div.product div.quantities div span {font-size:40px;
    text-align: right;display:block;}
div.newinventory div.preview div.product.isok div.quantities div.store span {color:green;}
div.newinventory div.preview div.product.pending div.quantities div.store span {color:red;}
div.newinventory div.preview div.product.isok div.quantities {background-color:rgba(1,200,1,.1);}
div.newinventory div.preview div.product.pending div.quantities {
  background-color:rgba(200,1,1,.1);
}
div.newinventory div.preview div.product div.quantities>div.quantities_{
  display:block;
  font-size:12px;
}

div.newinventory div.preview div.product div.quantities div.quantities_ div.q{
  display:block;margin-bottom: 5px;
}
div.newinventory div.preview div.product div.quantities div.quantities_ span{
  display:block;padding:0 0 0 30px;color:#999;font-size:12px;
  text-align: left;
}

div.newinventory div.preview div.product div.add div.buttons {display: flex;align-items: stretch;
  gap:5px;justify-content: space-between;}
div.newinventory div.preview div.product div.add div.buttons a {flex-grow: 1;
    padding:0 8px;box-sizing: border-box;
    text-align: center;
    display: block;
    height: 37px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    align-content: center;}
div.newinventory div.preview div.product div.add div.buttons a.add {background-color:green;}
div.newinventory div.preview div.product div.add div.buttons a.minus {background-color:red;}

.inventorylist {margin:20px 0 0 0;}
.inventorylist a.load {background-color:#fff;color:#000;}

div.inventorylist div.list {max-height:600px;overflow-y:scroll;margin:20px 0 0 0;background: #fff;}
div.inventorylist div.list div.product {font-size:12px;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  border:1px solid rgba(0,0,0,0);border-radius:3px;padding:2px;}
div.inventorylist div.list div.product:hover {border:1px solid rgba(0,0,0,.4);}
div.inventorylist div.list div.product.ok {color:green}
div.inventorylist div.list div.product.notok {color:red}

table.display {font-size:12px;}
table.display tr.ok {color:green}
table.display tr.surplus {color:red}
table.display tr.deficit {color:darkred;}

.ok {  color: green}
.surplus {  color: red}
.deficit {  color: darkred;}


div.filters {display: flex;font-size:12px;gap:5px;justify-content: flex-start;
flex-wrap:wrap;}
div.filters > * {width:32.5%;min-width: 200px;}
div.filters .button {font-size:1rem;text-align: center;background: green;color:#fff;}


div.stats {font-size:14px;margin:10px 0;display: flex;justify-content: flex-start;
  gap:10px}