/*==stocks reconc==*/
html{background: #c9c9c9;}
.cont{display:block;clear:both;margin:0 0.5%;width:99%;}
.sqWrapper{margin-bottom:5px;}
#previewCont{margin:5px 0;}
#productSelect,#searchInput{width:99%;}

/*==sales==*/
.toggleWrap{width:100%;float:right;clear:left;
margin-bottom:5px;}
.toggleWrap:after{clear:both;content:'';display:table;}
.toggleTag,.togbtn{width:100%;float:left;clear:both;
text-align:right;}
.toggleTag{margin:0;padding:0;}
.toggleTag p{margin:0;text-align:right;max-width:100%;clear:both;
padding-bottom:3px;}
#cusDon{width:60px;background:#006456;float:right;clear:both;
border:none;}
#custWrapper{border:1px solid #000;border-radius:5px;padding:0.5px;}
#custWrapper:after{content:'';display:table;clear:both;}
.salesDashBoard,#login3s254,.catalogueform_cont,.salesDashBoard p{
    width:100%;clear:both;}
.salesDashBoardWrapper,#newRegFrm{display:none;width:100%;}
.salesDashBoard:after{display:table;clear:both;}
#latestsale,#newRegWrappper{text-align:right;float:right;}
#newReg{background-color:transparent;border:none;color:blue;}
.code_temp{
    white-space: normal;        /* allow wrapping */
    overflow-wrap: break-word;    /* wrap long text */
    word-wrap: break-word;/* legacy */
}
.pdCat select,#calender{
    max-width: 100%;
    overflow: auto;
    white-space: nowrap;
    display:table;
}

header,footer,
#productsdash{display:none;}
.autocomplete {
  position: relative;
  width: 98%;margin:0 1%;
}
.autocomplete div{width:100%;}
#searchBox {
  width: 98%;border:none;
  padding: 8px 0.25%;
}
#searchBox:focus,#searchBox:hover{outline:none;background:#fff;}
.results {
margin:5px 0;color:#fff;
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: #000;
  display: none;
  max-height: 350px;
  overflow-y: auto;
}

.results div {
  padding: 8px;
  cursor: pointer;
}

.results div:hover {
  background: #007bff;
  color: #fff;
}

/* Popup */
.popup {
  position: relative;
  /*inset: 0;*/
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
}

.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
}

.popup-content input {
  width: 99%;
  margin: 10px 0;
  padding: 6px;
}

/*==stocks==*/
.section {
  width:100%;margin-bottom:5px;
  padding: 0;
}
.section:after{display:table;clear:both;content:'';}

.secondary { background: #16a34a; }
.danger,#btnref { background: #dc2626;}
.print { background: #7c3aed; }

/* ===================== TABLE ===================== */
.table-wrapper { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  /*min-width: 750px;*/
}

th, td {
  border: 1px solid #000;
  padding: 8px;
  font-size: 14px;
}

th { background: #f1f5f9; text-align: left; }
.calWrap:after{display:table;clear:both; content:''}

td[contenteditable] { background: #f9fafb; }
td.locked { background: #f5f5f5; font-weight: 600; }
.not-found { color: #dc2626; font-size: 13px; }
.section div{float:left;width:100%;clear:both;}
#productSelect,#tableSearch{width:100%;}
#productSelect option{padding:0.5%;width:auto;}
#productSelect option:hover,#productSelect option:focus{
cursor:pointer;color:#006400;font-weight:bold;}
.inputWrapper:after{clear:both;content:'';display:table;}
.inputWrapper input,.expyWrapper select{display:table;}
.inputWrapper section,.expyWrapper section {float:left;max-width:auto;
margin-right:10px;padding:0;}
.inputWrapper{margin-top:5px;}
.inputWrapper section p,.expyWrapper section p{padding:0;margin:0;}
#daysWrapper,#calc,#btnDelAll,#tbWarpper{display:none;}
.inputWrapper section,.inputWrapper input{margin-bottom:5px;}
.inputWrapper section p,.expSelWrapper section p,.expSelWrapper section select{
    margin-right:10px;}
select {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom:5px;margin-top:5px;
}
/* allow horizontal scrolling on mobile */
select option {
    white-space: nowrap;
}
#productTable {
    border-collapse: collapse;
    width: 100%;
}

#productTable tr.highlight td {
    background-color: #ffe58a;
}

#productTable td:last-child {background:transparent;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}
#thefrm{background:grey;}
#productsTable{background:darkgreen;border-radius:5px;margin:3px 0;}
#tbCon{background:silver;}
#thefrm,#tbCon{max-width:99%;
border-radius:5px;border:0.3px solid #000;padding:0.4%;clear:both;
}
.btns span{display:inline;float:right;margin-left:5px;}
button,input[type='submit'],input[type='button']{padding:5px;}
button:hover,input[type='submit']:hover,input[type='button']:hover,
button:focus,input[type='submit']:focus,input[type='button']:focus{
cursor:pointer;}
#calcWrapper{width:250px;clear:both;float:right;margin:0;padding:0;}
#btnref,#btnCal{float:right;margin:0;}
.sqWrapper{margin-bottom:8px; width:99%;}
.sqWrapper:after{clear:both;display:table;content:'';}
.sqWrapper input{width:99.5%;}
#login3s254 input{float:left}
#login3s254:after{clear:both;content:'';display:table;}
#usernameTxt,#passwordTxt{clear:both;width:200px;border:none;border-radius:0;}
#hhinput{width:150px;border:none;border-radius:0;}
.accs{margin:0.5%;width:99%;}
.verification{width:200px;clear:both;}
.letmein{float:left;clear:both; width:200px;}
#newRegWrappper{text-align:right;}
#login3s254{width:50%;margin:5px 24%;background:#808080;
padding:5px;border:0.8px solid #808080;}
.newReg{float:left;text-align:left;}
#cnBtn{float:right;}
/* ===================== PRINT ===================== */
@media print {
#tbCon{border:none;border-radius:0;}
.trim,.sqWrapper,#thefrm,.tbSq,
.startOut,input, select, button, .not-found {display: none !important; }
  .highlight { background: none !important; }
  td.locked { background: none !important; }
  body { background: transparent; color:#000000;}
  .section { box-shadow: none; }
  #printHeader { display: block !important; }
}

#printHeader {
  display: none;
  text-align: center;
  margin-bottom: 10px;
}

/*Calendar*/
#calender:after,#login3s254:after{content:''; display:table;clear:both}
#calender select { padding: 6px; font-size: 14px;}
#daysGrid th,
#daysGrid td {border:none;}
/* === MOBILE ENHANCEMENTS === */
@media screen and (max-width: 450px){
  h3 { font-size: 16px; }
  th, td { font-size: 13px; }
  input, select, button { font-size: 15px; padding: 10px; }
  #calcWrapper *{width:99%;float:left;margin:0;padding:0;}
  #usernameTxt,#passwordTxt,.letmein,.verification{width:97%;}
  #login3s254{margin:5px 0;width:97%;}
}