@media (max-width: 767px) {
    .main-header .navbar-custom-menu {
        float: none !important;
        display: block !important;
    }
    .main-header .navbar-custom-menu .dropdown-menu {
        left: auto !important;
    }
    .skin-blue-light .main-header .navbar .dropdown-menu li a {
        color: #777;
    }
    .main-header .navbar {
      height: auto;
    }
}
.bg-danger {
    background-color: #f2dede !important;
}
.btn-big {
    padding: 10px 30px;
    font-size: 18px;
    line-height: 1.3333333;
}

.of-visible {
    overflow: visible !important;
}

#online_indicator {
  font-size: 8px;
  vertical-align: middle;
}

.pt-0 {
  padding-top: 0px;
}
.f-right {
  float: right;
}
.mb-10 {
  margin-bottom: 10px;
}
.discount-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  padding: 7px;
}

.discount-badge-small {
  position: absolute;
  top: -2px;
  left: 10px;
  font-size: 12px;
  padding: 6px;
}
.product-info-table td, .product-info-table th {
  font-size: 12px;
}
.catalogue {
  max-height: 127px;
  margin: auto;
  margin-bottom: 18px;
}
.catalogue-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
  margin-bottom: 10px;
}
.bg-light-gray {
  background-color: #f8f8f8 !important;
}
.p-5-5 {
  padding: 5px 5px !important;
}
.m-4 {
  margin: 4px;
}
.skin-black .main-header, .skin-black-light .main-header {
  color: #525f7f !important;
}
.skin-black .main-header .navbar .nav .open>a {
  color: #999 !important;
}
.skin-black .main-header .navbar .nav>li>a:hover{
  color: #999 !important;
}
.skin-black .main-header .navbar > .sidebar-toggle:hover {
  color: #999 !important;
}
.mt-0{
  margin-top: 0 !important;
}
.table-pdf thead tr{
  background-color: #357ca5 !important;
  color: #fff;
}
.table-pdf thead tr th {
  color: #fff !important;
}
.blue-heading {
  background-color: #357ca5;
  color: #fff;
}

.table-pdf .odd {
    background-color: #DCE6F1;
}
.p-4{
  padding: 4px;
}
.p-10{
  padding: 10px !important;
}
.jquery-top-scrollbar{
    height: 6px !important;
}
.jquery-top-scrollbar div {
    height: 6px !important;
}
.scroll-top-bottom {
  width: 100%; 
  overflow: scroll;
}
.scroll-top-bottom::-webkit-scrollbar {
    height: 6px;
}

.scrolltop {
  display:none;
  width:100%;
  margin:0 auto;
  position:fixed;
  bottom:20px;
  right:10px; 
}
.scroll {
  position:absolute;
  right:20px;
  bottom:20px;
  background:#b2b2b2;
  background:rgba(178,178,178,0.7);
  padding:7px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s; 
  border-radius: 6px;   
}
.scroll:hover {
  background:rgba(178,178,178,1.0);
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;    
}
.scroll:hover .fas {
  padding-top:-10px;
}
.scroll .fas {
  font-size:25px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;  
}

.f-left {
  float: left;
}
.align-left {
 text-align: left;
}
.align-right {
 text-align: right;
}

.table-pdf {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 8px 10px;
}
.td-border td, .td-border th{
  border-bottom: 1px solid lightgrey;
  padding: 8px 5px;
}

.ws-nowrap {
  white-space:nowrap;
}

.btn-app>.fas, .btn-app>.fab{
    font-size: 20px;
    display: block;
}
.dropdown-menu>li>a>.fas{
    margin-right: 6px;
}
.mt-5 {
  margin-top: 5px !important;
}
.pos-form-actions{
  height: auto;
  padding-top: 12px;
  padding-bottom: 20px;
  position: fixed;
  bottom: 0px;
  background-color: #D1D5DC;
  width: 100%;
  z-index: 1000;
}
.mb-12 {
  margin-bottom: 12px !important;
}
.pb-0{
  padding-bottom: 0px !important;
}
.pr-12{
  padding-right: 12px !important;
}
.main-header .sidebar-toggle:before {
    content: "" !important;
}
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
} 
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.text-white {
  color: #fff;
}
.wizard > .steps > ul > li {
  width: 33.33% !important;
}
.wizard > .content {
  background: #445867 !important;
}
legend {
  color: #fff;
  margin-bottom: 6px;
  border-bottom: none;
}
.left-col {
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.32)),url(../img/home-bg.jpg); 
  text-align: center;
  background-size: cover;
  background-position: center;
}
.left-col-content {
  color: #1A7BF9;
  width: 100%;
}
.login-header {
  font-size: 27px;
  font-weight: 600;
}
.login-header a {
  color: #fff;
}
.form-header {
  font-size: 18px;
  margin: 16px 0;
}
.btn-login {
  padding: 6px 52px !important;
}
.right-col {
  background-color: #243949;
  height: 100%;
  min-height: 100vh;
}

.right-col label {
  color: #fff;
}

.right-col a, .text-white a {
  color: #fff;
  font-weight: 600;
  font-size: 15px
}
.right-col a:hover, .text-white a:hover {
  color: #ccc;
}
.right-col-content {
  padding: 10% 16%;
  padding-bottom: 3%;
}
.right-col-content-register {
  padding: 2% 8%;
}

.input_inline {
  width: 100%;
  display: inline-flex;
}
.input_inline input, .input_inline span {
  width: 50%;
}
.bg-manufacturing {
  background-color: #ff851b;
}
.img-thumbnail {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  transition: border .2s ease-in-out;
  padding: 4px;
  margin: 3px;
  text-align: center;
}
.img-thumbnail>.badge{
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 9px;
  font-weight: 400;
  cursor: pointer;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
  max-height: 350px;
}
.bg-aqua-lite {
  background-color: #7FFFD4;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
  white-space: normal;
}
.spacer {
  margin-top: 20px;
}
#product_list_body {
    max-height: 485px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9; 
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.d-inline-table {
  display: inline-table;
}

.label-round{
  font-size: 8px;
  border-radius: 44%;
}
.table>tbody+tbody{
  border-top: 0;
}
.table-pl-12 td, .table-pl-12 th{
  padding-left: 12px !important;
}
table tbody td.pl-20-td{
  padding-left: 20px !important;
}
table.table-border-center > tbody > tr > td:first-child, 
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child
{
  border-right: 1px solid darkgray;
}
table.table-border-center-col > tbody > tr > td:nth-child(2), 
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > td:nth-child(2)
{
  border-right: 1px solid darkgray;
  border-left: 1px solid darkgray;
}
.bg-transparent{
  background-color: transparent !important;
}
.mb-0{
  margin-bottom: 0;
}

.nav-tabs>li>a{
  font-size: 18px;
  font-weight: 600;
}
.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}
.td-full-width {
  white-space:nowrap;
}
.font-17{
    font-size: 17px !important;
}
table.dataTable tbody>tr.selected{
    background-color: #B0BED9;
}
tr.footer-total > td {
    vertical-align: middle !important;
}
.error{
	color: red !important;
}
/*  pos tab */
div.pos-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
    margin-bottom: 28px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}
div.pos-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.pos-tab-menu div.list-group{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a .glyphicon,
div.pos-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.pos-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.pos-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa{
  background-color: #3c8dbc;
  color: #ffffff;
    border-color: #3c8dbc;
}
div.pos-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #3c8dbc;
}

div.pos-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 20px;
}

div.pos-tab div.pos-tab-content:not(.active){
  display: none;
}

.add-product-price-table th{
	background-color: #5cb85c;
    color: white;
}
.blue-header th {
	background-color: #3c8dbc;
    color: white;
}
.table-th-green th{
	background-color: #5cb85c;
    color: white;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.active-cell {
    border: 2px dotted #3c8dbc !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
.pos_product_div{
    min-height: 47vh;
    max-height: 57vh;
    overflow-y: auto;
    margin-bottom: 20px;
}
.bg-lightgray{
    background-color: #F0EDED !important;
}
.balance_due_box >li{
    padding: 11px 5px 0px 5px;
}
.option-div {
    padding: 15px;
    background-color: #d2d6de;
    color: #333;
    border:1px solid #d2d6de;
    cursor: pointer;
}
.option-div input[type="radio"]{
    display: none;
}
.option-div-group .icon {
    color: #d33724;
    display: none;
}
.option-div-group .option-div:hover{
    border:1px solid gray;
}
.option-div-group .active .icon{
    display: block;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-bottom-12{
    margin-bottom: 12px;
}
.bg-info{
    background-color: #00c0ef !important;
}
.bg-info > a{
    color: #FFFFFF !important;
}
.bg-info>a:hover{
    background-color: #337ab7 !important;
}
ul.dt-button-collection{
    background-color: #00c0ef;
}
td.details-control {
    background: url('/img/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('/img/details_close.png') no-repeat center center;
}
.icheckbox_square-blue, .iradio_square-blue{
    margin-right: 10px;
}
.header-right-div{
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}
.header-left-div{
    margin-top: 15px;
    display: inline-flex;
}
.m-8 {
    margin: 8px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.m-5 {
    margin: 5px;
}
.icon-link{
  text-align:center;
  display:block;
  margin-bottom: 18px;
}
.icon-link > a {
    display:grid;
}
.icon-link > .badge{
    position: absolute;
    top: 20px;
    right: 67px;
}
.link-des {
    display: inline-block;
    text-align: left;
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}
.bg-light-green{
    background-color: #98D973 !important;
    color: #fff !important
}
.hover-q {
    font-size: 16px;
    margin-left: 3px;
    cursor: help;
}
.input-group-addon .hover-q{
    margin-left: 0px;
}
.text-bold{
    font-weight: bold;
}
.tour .popover-content{
    padding: 18px 14px;
}
.table-slim>tbody>tr>td, .table-slim>tbody>tr>th, .table-slim>tfoot>tr>td, .table-slim>tfoot>tr>th, .table-slim>thead>tr>td, .table-slim>thead>tr>th{
    padding: 1px;
}

/* Custom scroll bar start*/

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/* Custom scroll bar end*/

.product_cell{
    height: 100px;
    padding: 1%;
}
.product_cell_div{
    height: 100% !important;
    width: 100% !important;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    cursor: pointer;
    overflow: hidden;
}

/*CSS to print receipts*/
.print_section{
    display: none;
}
@media print{
    .print_section{
        display: inline !important;
    }
    .modal-xl{
        width: 100% !important;
    }
    ::-webkit-scrollbar{
        display: none !important;
    }
    #toast-container {
      display: none;
    }
}

.input-number .btn-default{
    background-color: white;
    padding: 6px 9px;
}

.width-50{
    width: 50% !important;
}
.width-40{
    width: 40% !important;
}
.width-60{
    width: 60% !important;
}
.width-100{
    width: 100% !important;
}

.font-30{
    font-size: 30px !important;
}

.font-23{
    font-size: 23px !important;
}
.padding-5{
    padding: 5px !important;
}
.padding-10{
    padding: 10px !important;
}
.padding-side-15{
    /*padding-left: 15px !important;
    padding-right: 15px !important;*/
}
.text-muted-imp{
    color: #A3A3A3 !important;
}

.table-no-top-cell-border td{
    border-top: 0px !important;
    border-bottom: 0px !important;
}
.table-no-top-cell-border th{
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.table-no-side-cell-border td{
    border-left: 0px !important;
    border-right: 0px !important;
}
.table-no-side-cell-border th{
    border-left: 0px !important;
    border-right: 0px !important;
}

.color-555 {
    color: #555555 !important;
}
.color-555 *{
    color: #555555 !important;
}
.color-white {
    color: white !important;
}
.col-no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
.col-2px-padding{
    padding: 2px;
}

.pos-express-btn{
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}
.word-wrap{
    word-wrap: break-word !important;
}

.modal-xl{
    width: 90%; /* respsonsive width */
    margin-left: auto !important;
    margin-right: auto !important;
}
table.ajax_view tbody tr{
    cursor: pointer;
}
.bg-white{
    background-color: #fff;
}

.product-thumbnail-small{
    height: 50px;
    width: 50px;
}

.pos-line-product {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pos-line-product-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #e3e9f0;
  border-radius: 3px;
  background: #f5f7fa;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-line-product-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.pos-line-product-meta {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.35;
}

body.pos-modern .pos-line-product-thumb {
  border-color: var(--pos-border);
  background: var(--pos-surface-muted);
  border-radius: var(--pos-radius-sm);
}

table.table-text-center td, table.table-text-center th{
    vertical-align: middle !important;
}
.product_list{
    padding-left: 8px;
    padding-right: 8px;
}
.product_box{
  width: 100%;
  /*padding-top: 5px;
  padding-bottom: 2px;*/
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  /*border: 1px solid darkgray;*/
  font-weight: 600;
  background-color: #fff;
  border-radius: 2px;
  padding-top: 3px;
}
.product_box .image-container{
  height: 55px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product_box .image-container img{
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}
.eq-height-row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    flex-wrap: wrap;
}
.eq-height-col{
    display: flex;
}

.product_box .text_div{
    margin-top: 3px;
}
.product_box .text{
    width: 100%;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1; /* number of lines to show */
   line-height: 14px;        /* fallback */
   max-height: 14px;       /* fallback */
}
.small-box.bg-gray:hover{
    color: #000;
    text-decoration: none;
}

#calendar table tbody td {
    cursor: pointer;
}

.min-height-90hv{
    min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.text-link{
    cursor: pointer;
}

.text-link:hover{
    text-decoration: underline;
}

.v-center{
    vertical-align: middle !important;
}

.bg-woocommerce{
  background-color: #9E458B !important;
}

/*.box, .info-box, .nav-tabs-custom, .external-event{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
}*/

.user_avatar {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 1px;
}

.fs-10 {
  font-size: 10px;
}

.timeline-lode-more-btn {
  margin-left: 50px;
  margin-top: 25px;
  padding-right: 12px;
  padding-left: 12px;
}

.pa-0 {
  padding: 0px !important;
}

.mt-56{
  margin-top: 56px !important;
}

.m-2{
  margin: 2px !important;
}

.treeview-menu i{
  display: none !important;
}
.treeview-menu a{
  padding-left: 25px !important;
  font-size: 95% !important;
}
.treeview-menu a::before{
  content: "\2192 ";
}

/* Premium sidebar: child icons stay available for polished markers */
.premium-sidebar .treeview-menu > li > a > i {
  display: inline-block !important;
}
.premium-sidebar .treeview-menu a::before {
  content: none !important;
}

@media only screen and (max-width: 600px) {
  .pos-form-actions{
    position: absolute;
  }
}
.mr-8 {
  margin-right: 8px !important;
}

@media (max-width: 1024px) {
   .pos_form_totals{
        margin-bottom: 40px;
    }
}

.swal-modal .swal-text {
    text-align: center;
}

.pos-total {
    display: inline-block;
    padding: 8px 10px;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px;
}
.pos-total span.number{
    font-size: 26px;
    vertical-align: middle;
    font-weight: bolder;
}

.pos-total span.text{
    font-weight: bolder;
    display: inline-block;
    width: 60px;
    vertical-align: middle;
}
.mb-40 {
    margin-bottom: 40px !important;
}

@media print {
    a:after { content:''; }
    a[href]:after { content: none !important; }
}

.fa-times{
    font-size: 30px
}
.mb-5{
  margin-bottom: 5px !important;
}
.tree-actions {
  margin-left: 20px;
  display: none;
}
.jstree-hovered .tree-actions {
  display: inherit;
}

/* ---------------------------------------------------------------
 * Premium POS additions (screens that do not exist in UltimatePOS)
 * --------------------------------------------------------------- */

.sidebar-menu > li > a {
  white-space: normal;
}

.main-sidebar .sidebar-form {
  margin: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.main-sidebar .sidebar-form .form-control,
.main-sidebar .sidebar-form .btn {
  border: 0;
  background: rgba(0, 0, 0, 0.15);
  height: 34px;
}

.main-sidebar .sidebar-form .form-control {
  color: #f4f4f4;
}

.main-sidebar .sidebar-form .btn {
  color: #999;
}

.pos-header {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 4px;
}

.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: #777;
}

/* Open cash register (POS entry point) */
.open-register-box {
  margin-top: 6%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.open-register-box .box-body {
  padding: 28px 30px 24px;
}

.open-register-intro {
  margin-bottom: 22px;
}

.open-register-intro h3 {
  margin: 12px 0 6px;
  font-size: 20px;
  font-weight: 600;
}

.open-register-intro p {
  margin: 0 auto;
  max-width: 340px;
}

.open-register-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  background: #f0f7fc;
  color: #3c8dbc;
  font-size: 26px;
}

.open-register-box .input-group-addon {
  min-width: 44px;
  font-weight: 600;
}

.open-register-actions {
  margin-top: 24px;
}

/* ---------------------------------------------------------------
 * Modern POS screen
 *
 * Scoped to `body.pos-modern`, which the app layout only sets on the
 * full screen POS pages (create / edit / payment). Every rule here is
 * presentational: markup hooks, ids and JS behaviour stay untouched.
 * Colours stay inside the AdminLTE skin palette used by the rest of
 * the app so the POS still reads as the same product.
 * --------------------------------------------------------------- */

body.pos-modern {
  --pos-bg: #eef2f7;
  --pos-surface: #ffffff;
  --pos-surface-muted: #f7f9fc;
  --pos-border: #e3e9f0;
  --pos-border-strong: #cdd7e2;
  --pos-text: #1f2d3d;
  --pos-muted: #7a8a9a;
  --pos-primary: #3c8dbc;
  --pos-primary-dark: #337ca8;
  --pos-primary-soft: #eaf3f9;
  --pos-success: #00a65a;
  --pos-success-dark: #008d4c;
  --pos-danger: #dd4b39;
  --pos-radius: 4px;
  --pos-radius-sm: 3px;
  --pos-shadow-sm: 0 1px 2px rgba(16, 36, 54, 0.05);
  --pos-shadow: 0 1px 2px rgba(16, 36, 54, 0.05), 0 4px 12px rgba(16, 36, 54, 0.06);
  --pos-workspace-offset: 178px;
  background: var(--pos-bg);
  color: var(--pos-text);
}

body.pos-modern .content {
  padding: 12px 14px 78px !important;
  background: transparent;
}

body.pos-modern footer.no-print {
  display: none;
}

/* --- Top toolbar ------------------------------------------------ */

body.pos-modern .pos-header {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 0;
  margin-bottom: 14px;
  background-color: #2b80ec;
  background-image: linear-gradient(to right, #2b80ec, #1d1f33);
  border-bottom: 1px solid #1d1f33;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

body.pos-modern .pos-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 9px 14px;
  min-height: 52px;
}

body.pos-modern .pos-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.92);
}

body.pos-modern .pos-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pos-radius-sm);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

body.pos-modern .pos-header-brand .fas {
  font-size: 13px;
  color: #fff;
}

body.pos-modern .pos-header-location {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
}

body.pos-modern .pos-header-location strong {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.pos-modern .pos-header-location-name {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

body.pos-modern .pos-header-location-select {
  min-width: 160px;
  max-width: 240px;
}

body.pos-modern .pos-header .curr_datetime {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: var(--pos-radius-sm);
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

body.pos-modern .pos-header-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--pos-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: help;
}

body.pos-modern .pos-header-kbd:hover {
  background: rgba(255, 255, 255, 0.22);
}

body.pos-modern .pos-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

body.pos-modern .pos-header .btn {
  height: 34px;
  min-width: 34px;
  padding: 0 11px;
  margin: 0 !important;
  border: 0;
  border-radius: var(--pos-radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 34px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  color: #fff !important;
  transition: filter 0.12s ease, transform 0.12s ease;
}

body.pos-modern .pos-header .btn .fa-lg,
body.pos-modern .pos-header .btn .fas,
body.pos-modern .pos-header .btn .fa {
  font-size: 14px;
  vertical-align: middle;
}

body.pos-modern .pos-header .btn:hover,
body.pos-modern .pos-header .btn:focus {
  filter: brightness(1.08);
  color: #fff !important;
}

body.pos-modern .pos-header .btn:active {
  transform: translateY(1px);
}

body.pos-modern .pos-header .btn-primary,
body.pos-modern .pos-header .btn-info {
  background-color: #367fa9 !important;
}

body.pos-modern .pos-header .btn-success {
  background-color: #00a65a !important;
}

body.pos-modern .pos-header .btn-danger {
  background-color: #dd4b39 !important;
}

body.pos-modern .pos-header .bg-yellow {
  background-color: #f39c12 !important;
  color: #fff !important;
}

body.pos-modern .pos-header .bg-purple {
  background-color: #605ca8 !important;
}

body.pos-modern .pos-header #close_register {
  background-color: #dd4b39 !important;
}

body.pos-modern .pos-header .btn-info {
  background-color: #00c0ef !important;
}

body.pos-modern .pos-header #select_location_id {
  height: 30px;
  border-radius: var(--pos-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.95);
  color: var(--pos-text);
  font-weight: 600;
}

@media (max-width: 767px) {
  body.pos-modern .pos-header .btn .btn-text {
    display: none;
  }

  body.pos-modern .pos-header-inner {
    padding: 8px 10px;
  }
}

/* --- Panels ----------------------------------------------------- */

body.pos-modern .box {
  border: 1px solid var(--pos-border);
  border-top: 1px solid var(--pos-border);
  border-radius: var(--pos-radius);
  box-shadow: var(--pos-shadow);
}

body.pos-modern .box-header.with-border {
  border-bottom: 1px solid var(--pos-border);
}

body.pos-modern .box-header .box-title {
  font-size: 15px;
  font-weight: 600;
}

body.pos-modern .pos-products-panel {
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius);
  box-shadow: var(--pos-shadow);
  padding: 12px;
}

body.pos-modern .pos-products-panel .pos-products-filters {
  margin-bottom: 10px;
}

/* Equal-height cart + products panels on desktop */
@media (min-width: 768px) {
  body.pos-modern .pos-workspace {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  body.pos-modern .pos-workspace > [class*="col-"] {
    display: flex;
    flex-direction: column;
    float: none;
  }

  body.pos-modern .pos-workspace > [class*="col-"] > .box,
  body.pos-modern .pos-workspace > [class*="col-"] > .pos-products-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: calc(100vh - var(--pos-workspace-offset));
    margin-bottom: 0 !important;
  }

  body.pos-modern .pos-workspace .box-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    padding-bottom: 12px !important;
  }

  body.pos-modern .pos-workspace .box-body > .row {
    flex-shrink: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.pos-modern .pos-workspace .box-body > .row:has(.pos_product_div) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  body.pos-modern .pos-workspace .box-body > .row:has(.pos_product_div) > .pos_product_div {
    float: none;
    width: 100%;
    flex: 1 1 auto;
    min-height: 220px;
    max-height: none;
    height: auto;
    margin-bottom: 12px;
  }

  body.pos-modern .pos-workspace .box-body > .pos_form_totals {
    flex-shrink: 0;
    margin-top: auto;
  }

  body.pos-modern .pos-products-panel {
    overflow: hidden;
  }

  body.pos-modern .pos-products-panel > .row {
    flex-shrink: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.pos-modern .pos-products-panel > .row:last-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  body.pos-modern .pos-products-panel > .row:last-child > .col-md-12 {
    float: none;
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.pos-modern .pos-products-panel > .row:last-child > #suggestion_page_loader {
    flex-shrink: 0;
  }
}

/* --- Inputs ----------------------------------------------------- */

body.pos-modern .form-control,
body.pos-modern .select2-container--default .select2-selection--single {
  height: 40px;
  border-radius: var(--pos-radius-sm);
  border-color: var(--pos-border-strong);
  box-shadow: none;
  color: var(--pos-text);
}

body.pos-modern .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
}

body.pos-modern .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
}

body.pos-modern .form-control:focus,
body.pos-modern .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--pos-primary);
  box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.16);
}

body.pos-modern .form-control.input-sm,
body.pos-modern select.form-control.input-sm {
  height: 32px;
  border-radius: var(--pos-radius-sm);
}

body.pos-modern .input-group-addon {
  min-width: 42px;
  background: var(--pos-surface-muted);
  border-color: var(--pos-border-strong);
  border-radius: var(--pos-radius-sm);
  color: var(--pos-muted);
}

body.pos-modern .input-group-btn > .btn {
  height: 40px;
  border-radius: var(--pos-radius-sm);
  border-color: var(--pos-border-strong);
}

body.pos-modern #search_product {
  height: 46px;
  font-size: 15px;
}

body.pos-modern #search_product + .input-group-btn > .btn,
body.pos-modern .form-group .input-group > .input-group-btn:first-child > .btn {
  height: 46px;
}

body.pos-modern #customer_id + .input-group-btn > .btn,
body.pos-modern .select2-container + .input-group-btn > .btn {
  height: 40px;
}

/* --- Cart ------------------------------------------------------- */

body.pos-modern .pos_product_div {
  min-height: 42vh;
  max-height: 52vh;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius);
  background: var(--pos-surface-muted);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body.pos-modern #pos_table {
  margin-bottom: 0;
  table-layout: fixed;
  width: 100%;
}

body.pos-modern #pos_table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pos-surface-muted);
  border: 0 !important;
  border-bottom: 1px solid var(--pos-border) !important;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pos-muted);
}

body.pos-modern #pos_table > tbody > tr > td {
  border: 0 !important;
  border-bottom: 1px solid var(--pos-border) !important;
  padding: 10px 12px;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.pos-modern #pos_table .pos_unit_price,
body.pos-modern #pos_table .pos_unit_price_inc_tax,
body.pos-modern #pos_table .pos_line_total,
body.pos-modern #pos_table .pos_quantity {
  min-width: 0;
  max-width: 100%;
}

body.pos-modern #pos_table .pos_line_total_text,
body.pos-modern #pos_table .display_currency {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

body.pos-modern #pos_table.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--pos-surface);
}

body.pos-modern #pos_table > tbody > tr:hover {
  background-color: #f6fafd;
}

body.pos-modern #pos_table > tbody > tr > td:first-child {
  font-weight: 600;
}

body.pos-modern .input-number .btn-default {
  height: 36px;
  padding: 0 11px;
  border-color: var(--pos-border-strong);
  background: var(--pos-surface-muted);
}

body.pos-modern .input-number .form-control {
  height: 36px;
  text-align: center;
  font-weight: 600;
}

body.pos-modern #pos_table > thead > tr > th.pos-remove-col,
body.pos-modern #pos_table > tbody > tr > td.pos-remove-col {
  width: 36px;
  max-width: 40px;
  padding-left: 2px !important;
  padding-right: 2px !important;
  text-align: center;
  white-space: nowrap;
}

body.pos-modern #pos_table > thead > tr > th.pos-qty-col,
body.pos-modern #pos_table > tbody > tr > td.pos-qty-col {
  width: 130px;
  max-width: 150px;
}

body.pos-modern #pos_table > thead > tr > th.pos-unit-col,
body.pos-modern #pos_table > tbody > tr > td.pos-unit-col {
  width: 100px;
  max-width: 120px;
  vertical-align: middle;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

body.pos-modern #pos_table td.pos-unit-col .sub_unit {
  width: 100%;
  max-width: 110px;
  margin: 0 auto;
}

body.pos-modern #pos_table td.pos-unit-col .pos-unit-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pos-muted);
}

body.pos-modern td .pos_remove_row.fa-times {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  line-height: 1;
  border-radius: 50%;
  background: #fdecea;
  color: #dd4b39 !important;
  font-size: 13px;
  transition: background-color 0.12s ease;
}

body.pos-modern td .pos_remove_row.fa-times:hover {
  background: #f8d7d3;
  color: #c23321 !important;
}

/* --- Totals strip ----------------------------------------------- */

body.pos-modern .pos_form_totals > .col-md-12 {
  padding: 4px 10px;
  background: var(--pos-surface-muted);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius);
}

body.pos-modern .pos_form_totals table {
  margin-bottom: 0;
}

body.pos-modern .pos_form_totals table > tbody > tr > td {
  border-top: 0 !important;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--pos-muted);
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

body.pos-modern .pos_form_totals table > tbody > tr > td + td {
  border-left: 1px solid var(--pos-border) !important;
}

body.pos-modern .pos_form_totals table b {
  font-weight: 600;
  color: var(--pos-muted);
}

body.pos-modern .pos_form_totals table span {
  font-weight: 700;
  color: var(--pos-text);
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.pos-modern .pos_form_totals .fa-edit {
  color: var(--pos-primary);
}

/* --- Product grid ----------------------------------------------- */

body.pos-modern #product_list_body {
  max-height: calc(100vh - var(--pos-workspace-offset) - 72px);
  min-height: 280px;
  margin: 0 -6px;
  padding-right: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body.pos-modern .pos-workspace #product_list_body {
    flex: 1 1 auto;
    min-height: 220px;
    max-height: none;
    height: 100%;
  }

  body.pos-modern .pos-workspace .pos_product_div {
    min-height: 220px;
    max-height: none;
    height: auto;
  }
}

body.pos-modern #product_list_body > .product_list {
  display: flex;
  padding: 0 6px;
  margin-bottom: 12px;
}

body.pos-modern .product_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 8px 8px;
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius);
  box-shadow: var(--pos-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

body.pos-modern .product_box:hover {
  transform: translateY(-2px);
  border-color: var(--pos-primary);
  box-shadow: 0 8px 18px rgba(60, 141, 188, 0.18);
}

body.pos-modern .product_box:active {
  transform: translateY(0) scale(0.985);
}

body.pos-modern .product_box .image-container {
  height: 76px;
  border-radius: var(--pos-radius-sm);
  background-color: var(--pos-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.pos-modern .product_box .image-container img {
  max-height: 68px;
  max-width: 92%;
  object-fit: contain;
}

body.pos-modern .product_box .text_div {
  margin-top: 8px;
}

body.pos-modern .product_box .text {
  -webkit-line-clamp: 2;
  line-height: 16px;
  max-height: 32px;
  font-size: 12.5px;
  color: var(--pos-text);
}

body.pos-modern .product_box .product_sku {
  display: block;
  font-size: 11px;
  color: var(--pos-muted);
}

body.pos-modern .product_box .product_price {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pos-primary-dark);
}

/* --- Tabs (recent transactions) --------------------------------- */

body.pos-modern .nav-tabs-custom {
  box-shadow: none;
  border-radius: var(--pos-radius);
}

body.pos-modern .nav-tabs-custom > .nav-tabs > li > a {
  font-size: 14px;
  border-radius: var(--pos-radius-sm) var(--pos-radius-sm) 0 0;
}

/* --- Action bar -------------------------------------------------- */

body.pos-modern .pos-form-actions {
  left: 0;
  right: 0;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--pos-border);
  box-shadow: 0 -4px 18px rgba(16, 36, 54, 0.09);
}

body.pos-modern .pos-form-actions .btn {
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--pos-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 40px;
  box-shadow: var(--pos-shadow-sm);
  transition: filter 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

body.pos-modern .pos-form-actions .btn i {
  margin-right: 5px;
}

body.pos-modern .pos-form-actions .btn:hover {
  filter: brightness(0.96);
}

/* Quiet, low priority actions */
body.pos-modern .pos-form-actions #pos-draft.bg-info {
  background-color: #e8f6fb !important;
  color: #1b7fa0 !important;
}

body.pos-modern .pos-form-actions #pos-quotation.bg-yellow {
  background-color: #fdf3e3 !important;
  color: #b9761a !important;
}

body.pos-modern .pos-form-actions .pos-express-finalize[data-pay_method='suspend'].bg-red {
  background-color: #fdecea !important;
  color: #c0392b !important;
}

body.pos-modern .pos-form-actions .pos-express-finalize[data-pay_method='credit_sale'].bg-purple {
  background-color: #eeedf8 !important;
  color: #514c96 !important;
}

body.pos-modern .pos-form-actions #recent-transactions.btn-primary {
  float: none !important;
  background-color: var(--pos-primary-soft) !important;
  color: var(--pos-primary-dark) !important;
}

body.pos-modern .pos-form-actions #pos-cancel,
body.pos-modern .pos-form-actions #pos-delete {
  height: 40px;
  background-color: transparent !important;
  border: 1px solid #f0c6bf !important;
  color: #c0392b !important;
  box-shadow: none;
}

body.pos-modern .pos-form-actions #pos-cancel:hover,
body.pos-modern .pos-form-actions #pos-delete:hover {
  background-color: #fdecea !important;
}

/* Total payable readout */
body.pos-modern .pos-form-actions .pos-total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 14px;
  height: 44px;
  max-width: 280px;
  border-radius: var(--pos-radius);
  background-color: #1f2d3d !important;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
}

body.pos-modern .pos-form-actions .pos-total span.text {
  width: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

body.pos-modern .pos-form-actions .pos-total span.number {
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* Checkout group carries the visual weight */
body.pos-modern .pos-form-actions .pos-express-finalize[data-pay_method='card'] {
  height: 44px;
  line-height: 44px;
  padding: 0 14px;
  background-color: #c2185b !important;
  color: #fff !important;
}

body.pos-modern .pos-form-actions #pos-finalize {
  height: 44px;
  min-width: 0;
  line-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  background-color: var(--pos-primary) !important;
  color: #fff !important;
}

body.pos-modern .pos-form-actions .pos-express-finalize[data-pay_method='cash'] {
  height: 44px;
  min-width: 0;
  line-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  background-color: var(--pos-success) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 166, 90, 0.28);
}

body.pos-modern .pos-form-actions .pos-express-finalize[data-pay_method='cash']:hover {
  background-color: var(--pos-success-dark) !important;
}

/* --- Modals ------------------------------------------------------ */

body.pos-modern .modal-content {
  border: 0;
  border-radius: var(--pos-radius);
  box-shadow: 0 18px 48px rgba(16, 36, 54, 0.24);
}

body.pos-modern .modal-header {
  border-bottom: 1px solid var(--pos-border);
}

body.pos-modern .modal-footer {
  border-top: 1px solid var(--pos-border);
}

body.pos-modern .modal-footer .btn {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--pos-radius-sm);
  line-height: 40px;
  font-weight: 600;
}

body.pos-modern #modal_payment .box.bg-orange {
  border: 0;
  border-radius: var(--pos-radius);
  background-color: #1f2d3d !important;
}

body.pos-modern #modal_payment .box.bg-orange hr {
  border-color: rgba(255, 255, 255, 0.14);
}

body.pos-modern #modal_payment .box.bg-orange .lead {
  font-size: 20px;
}

/* --- Empty state ------------------------------------------------- */

body.pos-modern .pos-empty-products {
  padding: 42px 16px;
  text-align: center;
  color: var(--pos-muted);
}

body.pos-modern .pos-empty-products i {
  display: block;
  margin-bottom: 10px;
  font-size: 30px;
  color: var(--pos-border-strong);
}

/* --- Action bar layout -------------------------------------------
 * Desktop: secondary actions on the left, checkout cluster on the
 * right. Groups stay intact so Cash never orphans onto its own row.
 * Mobile keeps the existing col-xs-6 float grid.
 * ------------------------------------------------------------------ */

@media (min-width: 768px) {
  body.pos-modern .pos-form-actions > .col-md-12 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    width: 100%;
  }

  body.pos-modern .pos-form-actions .pos-actions-secondary,
  body.pos-modern .pos-form-actions .pos-actions-checkout {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  body.pos-modern .pos-form-actions .pos-actions-secondary {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  body.pos-modern .pos-form-actions .pos-actions-checkout {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* --- Customer / search toolbar ----------------------------------
 * Two fixed columns via CSS grid. Customer never expands into product
 * search, regardless of Select2 selected-label length.
 * ------------------------------------------------------------------ */

body.pos-modern .pos-top-fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  align-items: start;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.pos-modern .pos-top-fields::before,
body.pos-modern .pos-top-fields::after {
  display: none !important;
  content: none !important;
}

body.pos-modern .pos-top-customer,
body.pos-modern .pos-top-search {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}

body.pos-modern .pos-top-fields .form-group {
  margin-bottom: 10px;
  width: 100%;
  max-width: 100%;
}

body.pos-modern .pos-top-fields .input-group {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100% !important;
  max-width: 100% !important;
}

body.pos-modern .pos-top-fields .input-group > .form-control,
body.pos-modern .pos-top-fields .input-group > #search_product {
  flex: 1 1 0;
  min-width: 0 !important;
  width: auto !important;
  float: none !important;
}

body.pos-modern .pos-top-fields .input-group > .select2-container {
  display: block !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  max-width: 100% !important;
  float: none !important;
}

body.pos-modern .pos-top-fields .input-group > select#customer_id {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.pos-modern .pos-top-fields .input-group-addon,
body.pos-modern .pos-top-fields .input-group-btn {
  display: flex !important;
  flex: 0 0 42px;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  align-items: stretch;
  float: none !important;
  padding: 0 !important;
}

body.pos-modern .pos-top-fields .input-group-btn > .btn,
body.pos-modern .pos-top-fields .input-group-addon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 42px !important;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

body.pos-modern .pos-top-fields #search_product {
  height: 46px;
}

body.pos-modern .pos-top-fields #search_product + .input-group-btn > .btn,
body.pos-modern .pos-top-fields .input-group-btn:first-child,
body.pos-modern .pos-top-fields .input-group-btn:first-child > .btn {
  height: 46px;
}

body.pos-modern .pos-top-fields .select2-container--default .select2-selection--single {
  display: block;
  width: 100% !important;
  height: 40px;
  border-radius: 0;
  overflow: hidden;
}

body.pos-modern .pos-top-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  line-height: 38px;
  padding-right: 28px;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.pos-modern .pos-top-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 4px;
}

body.pos-modern .pos-top-fields .input-group > .input-group-addon:first-child {
  border-top-left-radius: var(--pos-radius-sm);
  border-bottom-left-radius: var(--pos-radius-sm);
}

body.pos-modern .pos-top-fields .input-group > .input-group-btn:last-child > .btn {
  border-top-right-radius: var(--pos-radius-sm);
  border-bottom-right-radius: var(--pos-radius-sm);
}

@media (max-width: 767px) {
  body.pos-modern .pos-top-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 1200px) {
  body.pos-modern .pos-form-actions .btn {
    padding: 0 10px;
    font-size: 12px;
  }

  body.pos-modern .pos-form-actions .pos-total {
    max-width: 220px;
    padding: 0 10px;
  }

  body.pos-modern .pos-form-actions .pos-total span.number {
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  body.pos-modern .pos-form-actions > .col-md-12 {
    flex-wrap: wrap;
  }

  body.pos-modern .pos-form-actions .pos-actions-secondary,
  body.pos-modern .pos-form-actions .pos-actions-checkout {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  body.pos-modern .pos-form-actions .pos-actions-checkout {
    margin-left: 0;
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  body.pos-modern .content {
    padding: 10px 10px 130px !important;
  }

  body.pos-modern .pos-header {
    margin-bottom: 10px;
  }

  body.pos-modern .pos-form-actions .btn {
    margin-bottom: 6px;
  }

  body.pos-modern .pos-form-actions .pos-actions-secondary,
  body.pos-modern .pos-form-actions .pos-actions-checkout {
    display: contents;
  }

  body.pos-modern .pos-form-actions .pos-total {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  body.pos-modern .pos_product_div {
    max-height: none;
  }

  body.pos-modern #product_list_body {
    max-height: 46vh;
  }

  body.pos-modern .pos-workspace > [class*="col-"] > .box,
  body.pos-modern .pos-workspace > [class*="col-"] > .pos-products-panel {
    min-height: 0;
  }
}

@media print {
  body.pos-modern {
    background: #fff;
  }
}
/* ---------------------------------------------------------------
 * Modern forms design system
 *
 * Scoped to body:not(.pos-modern). Restrained corners (2–4px on fields
 * only), aligned label→control stacks, no pill chips / soft blobs.
 * Tokens keep admin CRUD, filters and modals reading as one product.
 * --------------------------------------------------------------- */

/* --- Page breadcrumbs (above content-header title) -------------- */

body:not(.pos-modern) .app-breadcrumb-nav {
  padding: 12px 15px 0;
  margin: 0;
}

body:not(.pos-modern) .app-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  font-size: 12px;
  line-height: 1.4;
}

body:not(.pos-modern) .app-breadcrumb > li {
  display: inline-flex;
  align-items: center;
  color: var(--ui-muted);
  font-weight: 500;
}

body:not(.pos-modern) .app-breadcrumb > li + li::before {
  content: "/";
  padding: 0 8px;
  color: #b0bac5;
  font-weight: 400;
}

body:not(.pos-modern) .app-breadcrumb > li > a {
  color: var(--ui-primary);
  text-decoration: none;
}

body:not(.pos-modern) .app-breadcrumb > li > a:hover {
  color: var(--ui-primary-dark);
  text-decoration: underline;
}

body:not(.pos-modern) .app-breadcrumb > li.active {
  color: var(--ui-label, #445566);
  font-weight: 600;
}

body:not(.pos-modern) .app-breadcrumb .fa-home,
body:not(.pos-modern) .app-breadcrumb .fas.fa-home {
  margin-right: 4px;
  font-size: 11px;
}

/* Keep AdminLTE floated breadcrumbs from colliding if a page still has one */
body:not(.pos-modern) .content-header > .breadcrumb {
  display: none;
}

body:not(.pos-modern) {
  --ui-surface: #ffffff;
  --ui-surface-muted: #f5f7fa;
  --ui-border: #e5e9ef;
  --ui-border-strong: #cfd6de;
  --ui-text: #1f2d3d;
  --ui-muted: #6b7c8f;
  --ui-label: #445566;
  --ui-primary: #3c8dbc;
  --ui-primary-dark: #337ca8;
  --ui-primary-soft: #eaf3f9;
  --ui-danger: #dd4b39;
  --ui-danger-soft: #fdecea;
  --ui-success: #00a65a;
  /* Tight corners — fields only; chrome stays nearly square */
  --ui-radius: 4px;
  --ui-radius-sm: 3px;
  --ui-radius-xs: 2px;
  --ui-shadow-sm: 0 1px 1px rgba(16, 36, 54, 0.04);
  --ui-shadow: 0 1px 2px rgba(16, 36, 54, 0.05);
  --ui-field-height: 38px;
  --ui-label-gap: 5px;
}

/* --- Page chrome ------------------------------------------------ */

body:not(.pos-modern) .content-header {
  position: relative;
  padding: 8px 15px 8px;
}

body:not(.pos-modern) .content-header > h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--ui-text);
  letter-spacing: -0.01em;
}

body:not(.pos-modern) .content-header > h1 > small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ui-muted);
}

body:not(.pos-modern) .content {
  padding-top: 10px;
}

/* --- Cards / panels --------------------------------------------- */

body:not(.pos-modern) .box {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
  background: var(--ui-surface);
}

body:not(.pos-modern) .box.box-primary,
body:not(.pos-modern) .box.box-success,
body:not(.pos-modern) .box.box-warning,
body:not(.pos-modern) .box.box-danger,
body:not(.pos-modern) .box.box-info {
  border-top-width: 1px;
  border-top-color: var(--ui-border);
}

body:not(.pos-modern) .box-header.with-border {
  border-bottom: 1px solid var(--ui-border);
  border-top-left-radius: var(--ui-radius);
  border-top-right-radius: var(--ui-radius);
  padding: 14px 16px;
  background: var(--ui-surface);
}

body:not(.pos-modern) .box-header .box-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ui-text);
}

body:not(.pos-modern) .box-body {
  padding: 18px 18px 8px;
}

body:not(.pos-modern) .box-footer {
  border-top: 1px solid var(--ui-border);
  border-bottom-left-radius: var(--ui-radius);
  border-bottom-right-radius: var(--ui-radius);
  padding: 14px 18px;
  background: var(--ui-surface-muted);
}

/* --- Labels ----------------------------------------------------- */

body:not(.pos-modern) .form-group > label,
body:not(.pos-modern) .form-group > .control-label,
body:not(.pos-modern) label.control-label {
  display: inline-block;
  width: auto;
  max-width: calc(100% - 1.5em);
  margin: 0 0 var(--ui-label-gap);
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--ui-label);
  vertical-align: middle;
}

/* Keep @show_tooltip / info icons on the same line as the label */
body:not(.pos-modern) .form-group > label + .hover-q,
body:not(.pos-modern) .form-group > label + .fa-info-circle,
body:not(.pos-modern) .form-group > .control-label + .hover-q,
body:not(.pos-modern) .form-group > .control-label + .fa-info-circle,
body:not(.pos-modern) .form-group > label + .btn-link,
body:not(.pos-modern) .form-group > label + button.btn-link,
body:not(.pos-modern) .form-group > .btn-link + .hover-q,
body:not(.pos-modern) .form-group > button.btn-link + .hover-q,
body:not(.pos-modern) .form-group > .btn-link + .fa-info-circle,
body:not(.pos-modern) .form-group > button.btn-link + .fa-info-circle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex: 0 0 auto;
  margin: 0 0 var(--ui-label-gap) 0;
  line-height: 1.3;
  vertical-align: middle;
}

body:not(.pos-modern) .form-horizontal .control-label {
  padding-top: 9px;
  margin-bottom: 0;
  text-align: right;
}

/* --- Vertical rhythm -------------------------------------------- */

/*
 * Row + wrap: label and sibling info icons share the first line;
 * fields below take a full row via flex-basis 100%.
 */
body:not(.pos-modern) .form-group {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* Bootstrap horizontal forms still need float columns */
body:not(.pos-modern) .form-horizontal .form-group {
  display: block;
}

body:not(.pos-modern) .form-group.checkbox,
body:not(.pos-modern) .form-group.radio {
  display: block;
}

body:not(.pos-modern) .form-group > .form-control,
body:not(.pos-modern) .form-group > .input-group,
body:not(.pos-modern) .form-group > .select2-container,
body:not(.pos-modern) .form-group > select,
body:not(.pos-modern) .form-group > textarea,
body:not(.pos-modern) .form-group > .help-block,
body:not(.pos-modern) .form-group > p,
body:not(.pos-modern) .form-group > small,
body:not(.pos-modern) .form-group > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body:not(.pos-modern) .form-group > .checkbox,
body:not(.pos-modern) .form-group > .radio,
body:not(.pos-modern) .form-group > .table-responsive,
body:not(.pos-modern) .form-group > table,
body:not(.pos-modern) .form-group > .row,
body:not(.pos-modern) .form-group > div:not(.input-group):not(.select2-container):not(.checkbox):not(.radio) {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

body:not(.pos-modern) .form-group > .form-control,
body:not(.pos-modern) .form-group > .input-group,
body:not(.pos-modern) .form-group > .select2-container,
body:not(.pos-modern) .form-group > select,
body:not(.pos-modern) .form-group > textarea {
  width: 100%;
  max-width: 100%;
}

/* Multi-column rows: reserve one label line so field tops align */
body:not(.pos-modern) form > .row > [class*="col-"] > .form-group > label,
body:not(.pos-modern) .box-body > form > .row > [class*="col-"] > .form-group > label,
body:not(.pos-modern) .modal-body > form > .row > [class*="col-"] > .form-group > label,
body:not(.pos-modern) form .box-body > .row > [class*="col-"] > .form-group > label {
  min-height: 1.3em;
}

/* --- Inputs ----------------------------------------------------- */

body:not(.pos-modern) .form-control {
  height: var(--ui-field-height);
  padding: 7px 11px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ui-text);
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

body:not(.pos-modern) textarea.form-control {
  height: auto;
  min-height: 84px;
  padding-top: 9px;
  padding-bottom: 9px;
  resize: vertical;
}

body:not(.pos-modern) select.form-control {
  padding-right: 28px;
}

body:not(.pos-modern) .form-control::-webkit-input-placeholder {
  color: var(--ui-muted);
  opacity: 1;
}

body:not(.pos-modern) .form-control::-moz-placeholder {
  color: var(--ui-muted);
  opacity: 1;
}

body:not(.pos-modern) .form-control:-ms-input-placeholder {
  color: var(--ui-muted);
}

body:not(.pos-modern) .form-control::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}

body:not(.pos-modern) .form-control:focus {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.16);
}

body:not(.pos-modern) .form-control[disabled],
body:not(.pos-modern) .form-control[readonly],
fieldset[disabled] body:not(.pos-modern) .form-control {
  background-color: var(--ui-surface-muted);
  opacity: 1;
}

body:not(.pos-modern) .form-control.input-sm,
body:not(.pos-modern) select.form-control.input-sm,
body:not(.pos-modern) .input-group-sm > .form-control,
body:not(.pos-modern) .input-group-sm > .input-group-addon,
body:not(.pos-modern) .input-group-sm > .input-group-btn > .btn {
  height: 32px;
  padding: 4px 9px;
  font-size: 12.5px;
  border-radius: var(--ui-radius-xs);
  line-height: 1.45;
}

body:not(.pos-modern) .form-control.input-lg,
body:not(.pos-modern) select.form-control.input-lg {
  height: 44px;
  padding: 9px 14px;
  font-size: 15px;
  border-radius: var(--ui-radius-sm);
}

/* Keep compact fields inside data tables / line-item rows */
body:not(.pos-modern) .table .form-control,
body:not(.pos-modern) .table select.form-control {
  height: 30px;
  padding: 3px 7px;
  font-size: 13px;
  border-radius: var(--ui-radius-xs);
}

body:not(.pos-modern) .table textarea.form-control {
  height: auto;
  min-height: 0;
}

/* --- Select2 ---------------------------------------------------- */

body:not(.pos-modern) .select2-container--default .select2-selection--single {
  height: var(--ui-field-height);
  padding: 0;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

body:not(.pos-modern) .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--ui-field-height) - 2px);
  padding-left: 11px;
  padding-right: 28px;
  color: var(--ui-text);
}

body:not(.pos-modern) .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--ui-field-height) - 2px);
  right: 4px;
}

body:not(.pos-modern) .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ui-muted);
}

body:not(.pos-modern) .select2-container--default .select2-selection--multiple {
  min-height: var(--ui-field-height);
  padding: 3px 5px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

body:not(.pos-modern) .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 3px;
  margin-right: 4px;
  padding: 1px 7px;
  border: 0;
  border-radius: var(--ui-radius-xs);
  background-color: var(--ui-primary-soft);
  color: var(--ui-primary-dark);
  font-size: 12px;
  font-weight: 600;
}

body:not(.pos-modern) .select2-container--default.select2-container--focus .select2-selection--single,
body:not(.pos-modern) .select2-container--default.select2-container--open .select2-selection--single,
body:not(.pos-modern) .select2-container--default.select2-container--focus .select2-selection--multiple,
body:not(.pos-modern) .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--ui-primary);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.16);
}

body:not(.pos-modern) .select2-dropdown {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
}

body:not(.pos-modern) .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ui-primary);
}

body:not(.pos-modern) .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-xs);
  outline: 0;
}

body:not(.pos-modern) .table .select2-container--default .select2-selection--single {
  height: 32px;
}

body:not(.pos-modern) .table .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 30px;
}

body:not(.pos-modern) .table .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 30px;
}

/* --- Input groups ----------------------------------------------- */

body:not(.pos-modern) .input-group .form-control {
  border-radius: var(--ui-radius-sm);
}

body:not(.pos-modern) .input-group .input-group-addon {
  min-width: 44px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-muted);
  background-color: var(--ui-surface-muted);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
}

body:not(.pos-modern) .input-group .form-control:first-child,
body:not(.pos-modern) .input-group-addon:first-child,
body:not(.pos-modern) .input-group-btn:first-child > .btn,
body:not(.pos-modern) .input-group-btn:first-child > .btn-group > .btn,
body:not(.pos-modern) .input-group-btn:first-child > .dropdown-toggle,
body:not(.pos-modern) .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
body:not(.pos-modern) .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body:not(.pos-modern) .input-group .form-control:last-child,
body:not(.pos-modern) .input-group-addon:last-child,
body:not(.pos-modern) .input-group-btn:last-child > .btn,
body:not(.pos-modern) .input-group-btn:last-child > .btn-group > .btn,
body:not(.pos-modern) .input-group-btn:last-child > .dropdown-toggle,
body:not(.pos-modern) .input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
body:not(.pos-modern) .input-group-btn:first-child > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

body:not(.pos-modern) .input-group .form-control:not(:first-child):not(:last-child),
body:not(.pos-modern) .input-group-addon:not(:first-child):not(:last-child) {
  border-radius: 0;
}

body:not(.pos-modern) .input-group .form-control:focus {
  z-index: 3;
}

/* --- Column alignment (Bootstrap 3 float fix) -------------------
 * Direct form rows become flex so a two-line label in one column no
 * longer pushes the next float column down. List/report/table rows
 * stay on Bootstrap floats because they are not form > .row.
 * ---------------------------------------------------------------- */

body:not(.pos-modern) form > .row,
body:not(.pos-modern) .box-body > form > .row,
body:not(.pos-modern) .modal-body > form > .row,
body:not(.pos-modern) form .box-body > .row,
body:not(.pos-modern) .box-body > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

body:not(.pos-modern) form > .row > [class*="col-"],
body:not(.pos-modern) .box-body > form > .row > [class*="col-"],
body:not(.pos-modern) .modal-body > form > .row > [class*="col-"],
body:not(.pos-modern) form .box-body > .row > [class*="col-"],
body:not(.pos-modern) .box-body > .row > [class*="col-"] {
  float: none;
}

/* --- Buttons ---------------------------------------------------- */

body:not(.pos-modern) .btn {
  height: var(--ui-field-height);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: calc(var(--ui-field-height) - 2px);
  border-radius: var(--ui-radius-sm);
  border-width: 1px;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

body:not(.pos-modern) .btn.btn-sm,
body:not(.pos-modern) .btn-group-sm > .btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 30px;
  border-radius: var(--ui-radius-xs);
}

body:not(.pos-modern) .btn.btn-xs {
  height: 24px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 22px;
  border-radius: var(--ui-radius-xs);
}

body:not(.pos-modern) .btn.btn-lg,
body:not(.pos-modern) .btn-group-lg > .btn {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
  line-height: 42px;
  border-radius: var(--ui-radius-sm);
}

body:not(.pos-modern) .btn:active,
body:not(.pos-modern) .btn.active {
  box-shadow: none;
}

body:not(.pos-modern) .btn-default {
  background-color: var(--ui-surface);
  border-color: var(--ui-border-strong);
  color: var(--ui-text);
}

body:not(.pos-modern) .btn-default:hover,
body:not(.pos-modern) .btn-default:focus {
  background-color: var(--ui-surface-muted);
  border-color: var(--ui-border-strong);
  color: var(--ui-text);
}

body:not(.pos-modern) .btn-primary {
  background-color: var(--ui-primary);
  border-color: var(--ui-primary-dark);
  color: #fff;
}

body:not(.pos-modern) .btn-primary:hover,
body:not(.pos-modern) .btn-primary:focus {
  background-color: var(--ui-primary-dark);
  border-color: #2d6f96;
  color: #fff;
}

body:not(.pos-modern) .btn-success {
  background-color: var(--ui-success);
  border-color: #008d4c;
  color: #fff;
}

body:not(.pos-modern) .btn-success:hover,
body:not(.pos-modern) .btn-success:focus {
  background-color: #008d4c;
  border-color: #00733e;
  color: #fff;
}

body:not(.pos-modern) .btn-danger {
  background-color: var(--ui-danger);
  border-color: #c23321;
  color: #fff;
}

body:not(.pos-modern) .btn-danger:hover,
body:not(.pos-modern) .btn-danger:focus {
  background-color: #c23321;
  border-color: #a52b1c;
  color: #fff;
}

body:not(.pos-modern) .btn-block {
  padding-left: 16px;
  padding-right: 16px;
}

/* Icon-only / toolbar buttons that already size themselves */
body:not(.pos-modern) .btn.btn-flat {
  box-shadow: none !important;
}

body:not(.pos-modern) .box-tools .btn {
  height: 30px;
  line-height: 28px;
  padding: 0 10px;
}

/* --- Validation ------------------------------------------------- */

body:not(.pos-modern) .has-error .form-control,
body:not(.pos-modern) .has-error .select2-container--default .select2-selection--single,
body:not(.pos-modern) .has-error .select2-container--default .select2-selection--multiple {
  border-color: var(--ui-danger);
}

body:not(.pos-modern) .has-error .form-control:focus,
body:not(.pos-modern) .has-error .select2-container--default.select2-container--focus .select2-selection--single,
body:not(.pos-modern) .has-error .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--ui-danger);
  box-shadow: 0 0 0 2px rgba(221, 75, 57, 0.16);
}

body:not(.pos-modern) .has-error .help-block,
body:not(.pos-modern) .has-error .control-label,
body:not(.pos-modern) .has-error .radio,
body:not(.pos-modern) .has-error .checkbox,
body:not(.pos-modern) .has-error .radio-inline,
body:not(.pos-modern) .has-error .checkbox-inline,
body:not(.pos-modern) .has-error.radio label,
body:not(.pos-modern) .has-error.checkbox label,
body:not(.pos-modern) .has-error.radio-inline label,
body:not(.pos-modern) .has-error.checkbox-inline label {
  color: var(--ui-danger);
}

body:not(.pos-modern) .help-block {
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-muted);
}

body:not(.pos-modern) .alert {
  border-radius: var(--ui-radius-xs);
  border-width: 0 0 0 3px;
  border-style: solid;
  box-shadow: none;
  padding: 11px 14px;
}

body:not(.pos-modern) .alert-danger {
  background-color: var(--ui-danger-soft);
  border-left-color: var(--ui-danger);
  color: #9b2c1f;
}

body:not(.pos-modern) .alert-success {
  background-color: #e8f6ee;
  border-left-color: var(--ui-success);
  color: #0f8a54;
}

body:not(.pos-modern) .alert-warning {
  background-color: #fdf3e3;
  border-left-color: #f39c12;
  color: #9a6700;
}

body:not(.pos-modern) .alert-info {
  background-color: var(--ui-primary-soft);
  border-left-color: var(--ui-primary);
  color: var(--ui-primary-dark);
}

body:not(.pos-modern) .alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

body:not(.pos-modern) .alert ul li {
  margin-bottom: 2px;
}

/* --- Checkboxes / radios ---------------------------------------- */

body:not(.pos-modern) .checkbox,
body:not(.pos-modern) .radio {
  margin-top: 6px;
  margin-bottom: 6px;
}

body:not(.pos-modern) .checkbox label,
body:not(.pos-modern) .radio label,
body:not(.pos-modern) .checkbox-inline,
body:not(.pos-modern) .radio-inline {
  font-weight: 500;
  color: var(--ui-text);
  padding-left: 22px;
  min-height: 22px;
}

body:not(.pos-modern) .checkbox-inline + .checkbox-inline,
body:not(.pos-modern) .radio-inline + .radio-inline {
  margin-left: 14px;
}

body:not(.pos-modern) .icheckbox_square-blue,
body:not(.pos-modern) .iradio_square-blue {
  margin-right: 4px;
}

/* --- Modals ----------------------------------------------------- */

body:not(.pos-modern) .modal-content {
  border: 0;
  border-radius: var(--ui-radius);
  box-shadow: 0 8px 28px rgba(16, 36, 54, 0.16);
  overflow: hidden;
}

body:not(.pos-modern) .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

body:not(.pos-modern) .modal-header .modal-title,
body:not(.pos-modern) .modal-header .modal-title h4,
body:not(.pos-modern) .modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ui-text);
}

body:not(.pos-modern) .modal-header .close {
  margin-top: 2px;
  opacity: 0.55;
}

body:not(.pos-modern) .modal-body {
  padding: 18px 20px 8px;
  background: var(--ui-surface);
}

body:not(.pos-modern) .modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface-muted);
}

body:not(.pos-modern) .modal-footer .btn + .btn {
  margin-left: 8px;
}

/* --- Filters (components.filters) ------------------------------- */

body:not(.pos-modern) .box-solid .box-header {
  background: var(--ui-surface-muted);
}

body:not(.pos-modern) .box .box-body .form-group {
  margin-bottom: 14px;
}

/* --- Tables inside forms ---------------------------------------- */

body:not(.pos-modern) .table > thead > tr > th {
  border-bottom-width: 1px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  color: var(--ui-muted);
  background: var(--ui-surface-muted);
}

body:not(.pos-modern) .table-bordered {
  border-color: var(--ui-border);
}

body:not(.pos-modern) .table-bordered > thead > tr > th,
body:not(.pos-modern) .table-bordered > tbody > tr > th,
body:not(.pos-modern) .table-bordered > tfoot > tr > th,
body:not(.pos-modern) .table-bordered > thead > tr > td,
body:not(.pos-modern) .table-bordered > tbody > tr > td,
body:not(.pos-modern) .table-bordered > tfoot > tr > td {
  border-color: var(--ui-border);
}

/* --- Auth screens (login / register use layouts.auth*) ---------- */

body.login-page:not(.pos-modern) .login-box-body,
body.register-page:not(.pos-modern) .register-box-body {
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  border: 1px solid var(--ui-border);
}

/* --- Responsive ------------------------------------------------- */

@media (max-width: 767px) {
  body:not(.pos-modern) .form-control,
  body:not(.pos-modern) .select2-container--default .select2-selection--single {
    min-height: var(--ui-field-height);
  }

  body:not(.pos-modern) .btn:not(.btn-xs):not(.btn-sm) {
    min-height: var(--ui-field-height);
  }

  body:not(.pos-modern) .box-body {
    padding: 14px 14px 4px;
  }

  body:not(.pos-modern) .modal-body {
    padding: 14px 14px 4px;
  }

  body:not(.pos-modern) .modal-footer .btn {
    margin-bottom: 6px;
  }
}

/* ===============================================================
 * Auth login — Premium POS SaaS card
 * The stage background (bg / wash / mesh) is preserved as-is.
 * Only the login box was redesigned as a modern SaaS-style card.
 * =============================================================== */

body.auth-login {
  --auth-ink: #0f2e2a;
  --auth-ink-mid: #1a4540;
  --auth-accent: #1f8a74;
  --auth-accent-deep: #16735f;
  --auth-paper: #ffffff;
  --auth-field: #f5f8f7;
  --auth-text: #16241f;
  --auth-muted: #5f726c;
  --auth-line: #e2e9e6;
  --auth-danger: #b42318;
  --auth-radius: 8px;
  --auth-font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --auth-display: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
  margin: 0;
  min-height: 100vh;
  font-family: var(--auth-font);
  color: var(--auth-text);
  background: var(--auth-ink);
  -webkit-font-smoothing: antialiased;
}

body.auth-login .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.auth-login .auth-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

body.auth-login .auth-stage-bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(1.05);
  transform: scale(1.06);
  animation: auth-bg-drift 22s ease-in-out infinite alternate;
}

body.auth-login .auth-stage-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 32, 29, 0.72) 0%, rgba(15, 46, 42, 0.88) 42%, rgba(8, 24, 22, 0.94) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(31, 138, 116, 0.28), transparent 55%);
}

body.auth-login .auth-stage-mesh {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  pointer-events: none;
}

body.auth-login .auth-chrome {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 1.15rem clamp(1rem, 3vw, 2rem);
}

body.auth-login .auth-lang-select {
  appearance: none;
  min-width: 9rem;
  height: 40px;
  padding: 0 2rem 0 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.8) 50%) calc(100% - 14px) calc(50% - 2px) / 5px 5px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.8) 50%, transparent 50%) calc(100% - 9px) calc(50% - 2px) / 5px 5px no-repeat,
    rgba(255, 255, 255, 0.08);
  color: #f3faf7;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

body.auth-login .auth-lang-select option {
  color: #14231f;
  background: #fff;
}

body.auth-login .auth-lang-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(31, 138, 116, 0.35);
}

body.auth-login .auth-center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100% - 2rem, 33rem);
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
}

body.auth-login .auth-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: var(--auth-paper);
  box-shadow:
    0 34px 80px -18px rgba(0, 0, 0, 0.5),
    0 10px 28px rgba(0, 0, 0, 0.16);
  animation: auth-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.auth-login .auth-card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--auth-accent) 0%, #3dbb9d 55%, var(--auth-accent-deep) 100%);
}

body.auth-login .auth-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.3rem 1.75rem 0.5rem;
}

body.auth-login .auth-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #27a68c 0%, var(--auth-accent-deep) 100%);
  color: #fff;
  font-family: var(--auth-display);
  font-size: 1.8rem;
  font-weight: 800;
  box-shadow: 0 10px 22px -6px rgba(22, 115, 95, 0.55);
}

body.auth-login .auth-brand {
  margin: 0 0 0.4rem;
  font-family: var(--auth-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--auth-ink);
  text-wrap: balance;
}

body.auth-login .auth-lede {
  margin: 0;
  color: var(--auth-muted);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

body.auth-login .auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.7rem 1.75rem 2.2rem;
}

body.auth-login .auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

body.auth-login .auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

body.auth-login .auth-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--auth-text);
}

body.auth-login .auth-text-link {
  color: var(--auth-accent-deep);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

body.auth-login .auth-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.auth-login .auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

body.auth-login .auth-input-icon {
  position: absolute;
  left: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8ba09a;
  pointer-events: none;
  transition: color 150ms ease;
}

body.auth-login .auth-input {
  width: 100%;
  height: 58px;
  padding: 0 1rem 0 2.85rem;
  border: 1.5px solid var(--auth-line);
  border-radius: 6px;
  background: var(--auth-field);
  color: var(--auth-text);
  font: inherit;
  font-size: 1.12rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

body.auth-login .auth-input-wrap .auth-input {
  padding-right: 2.85rem;
}

body.auth-login .auth-input::placeholder {
  color: #9aaca6;
}

body.auth-login .auth-input:hover {
  border-color: #c5d4ce;
}

body.auth-login .auth-input:focus {
  outline: none;
  border-color: var(--auth-accent);
  background: #fff;
}

body.auth-login .auth-field:focus-within .auth-input-icon {
  color: var(--auth-accent-deep);
}

body.auth-login .auth-field.is-invalid .auth-input {
  border-color: var(--auth-danger);
}

body.auth-login .auth-field.is-invalid .auth-input-icon {
  color: var(--auth-danger);
}

body.auth-login .auth-reveal {
  position: absolute;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--auth-muted);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

body.auth-login .auth-reveal:hover,
body.auth-login .auth-reveal:focus-visible {
  color: var(--auth-ink);
  background: rgba(15, 46, 42, 0.06);
  outline: none;
}

body.auth-login .auth-error {
  margin: 0;
  color: var(--auth-danger);
  font-size: 0.875rem;
  font-weight: 650;
}

body.auth-login .auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.1rem 0;
  color: var(--auth-muted);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

body.auth-login .auth-remember input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--auth-accent);
  cursor: pointer;
}

body.auth-login .auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 58px;
  margin-top: 0.1rem;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #27a68c 0%, var(--auth-accent-deep) 100%);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(22, 115, 95, 0.55);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

body.auth-login .auth-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -10px rgba(22, 115, 95, 0.6);
}

body.auth-login .auth-submit:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

body.auth-login .auth-submit:focus-visible {
  outline: none;
}

body.auth-login .auth-submit-arrow {
  transition: transform 160ms ease;
}

body.auth-login .auth-submit:hover .auth-submit-arrow {
  transform: translateX(3px);
}

body.auth-login .auth-demo {
  padding: 1.2rem 1.75rem 1.8rem;
  border-top: 1px solid var(--auth-line);
  background: #fbfcfb;
  animation: auth-rise 800ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

body.auth-login .auth-demo-note {
  margin: 0 0 0.65rem;
  color: var(--auth-muted);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.auth-login .auth-demo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

body.auth-login .auth-demo-chip {
  display: inline-flex;
  padding: 0.46rem 0.8rem;
  border: 1px solid var(--auth-line);
  border-radius: 8px;
  background: #fff;
  color: var(--auth-accent-deep);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

body.auth-login .auth-demo-chip:hover {
  border-color: var(--auth-accent);
  background: #eff9f5;
}

body.auth-login .auth-foot {
  position: relative;
  z-index: 2;
  padding: 0 1rem 1.15rem;
  color: rgba(214, 230, 225, 0.55);
  font-size: 0.875rem;
  text-align: center;
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auth-bg-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.2%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-login .auth-stage-bg,
  body.auth-login .auth-card,
  body.auth-login .auth-demo {
    animation: none !important;
  }
}

@media (max-width: 560px) {
  body.auth-login .auth-chrome {
    padding: 0.9rem 0.9rem 0;
  }

  body.auth-login .auth-center {
    width: min(100% - 1rem, 100%);
    padding: 0.75rem 0.75rem 1.5rem;
    justify-content: flex-start;
    padding-top: 1.25rem;
  }

  body.auth-login .auth-card-head {
    padding: 1.8rem 1.25rem 0.4rem;
  }

  body.auth-login .auth-monogram {
    width: 54px;
    height: 54px;
    margin-bottom: 0.85rem;
    font-size: 1.5rem;
  }

  body.auth-login .auth-brand {
    font-size: 1.6rem;
  }

  body.auth-login .auth-lede {
    font-size: 0.98rem;
  }

  body.auth-login .auth-form {
    gap: 1.1rem;
    padding: 1.3rem 1.25rem 1.6rem;
  }

  body.auth-login .auth-input,
  body.auth-login .auth-submit {
    height: 54px;
    font-size: 1.05rem;
  }

  body.auth-login .auth-label-row {
    flex-wrap: wrap;
  }

  body.auth-login .auth-demo {
    padding: 1.1rem 1.25rem 1.4rem;
  }

  body.auth-login .auth-foot {
    padding-bottom: 1rem;
  }
}

@media (max-height: 720px) and (min-width: 561px) {
  body.auth-login .auth-center {
    justify-content: flex-start;
    padding-top: 0.5rem;
  }

  body.auth-login .auth-card-head {
    padding-top: 1.5rem;
  }

  body.auth-login .auth-monogram {
    width: 50px;
    height: 50px;
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
  }

  body.auth-login .auth-brand {
    font-size: 1.55rem;
  }
}

/* ---------------------------------------------------------------
 * Modern professional admin sidebar
 *
 * Keeps AdminLTE structure + tree widget / collapse / offcanvas JS.
 * Scoped to `.premium-sidebar` so POS lockscreen and other shells
 * stay untouched. Aligns with AdminLTE blue (#3c8dbc) used elsewhere.
 * --------------------------------------------------------------- */

body:not(.pos-modern) {
  --sb-width: 240px;
  --sb-accent: #3c8dbc;
  --sb-accent-deep: #2f7aa3;
  --sb-text: #334155;
  --sb-muted: #64748b;
  --sb-hover: #eef4f9;
  --sb-active-bg: #e8f3fa;
  --sb-border: #e2e8f0;
  --sb-surface: #f8fafc;
  --sb-brand-bg: #ffffff;
}

body:not(.pos-modern) .main-sidebar.premium-sidebar {
  width: var(--sb-width);
  background: var(--sb-surface) !important;
  border-right: 1px solid var(--sb-border);
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
}

body:not(.pos-modern).sidebar-mini.sidebar-collapse .main-sidebar.premium-sidebar {
  width: 50px !important;
}

@media (min-width: 768px) {
  body:not(.pos-modern) .content-wrapper,
  body:not(.pos-modern) .main-footer {
    margin-left: var(--sb-width);
  }

  body:not(.pos-modern).sidebar-mini.sidebar-collapse .content-wrapper,
  body:not(.pos-modern).sidebar-mini.sidebar-collapse .main-footer {
    margin-left: 50px !important;
  }

  body:not(.pos-modern) .main-header .navbar {
    margin-left: var(--sb-width);
  }

  body:not(.pos-modern).sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 50px;
  }

  body:not(.pos-modern) .main-header .logo {
    width: var(--sb-width);
  }

  body:not(.pos-modern).sidebar-mini.sidebar-collapse .main-header .logo {
    width: 50px;
  }
}

body:not(.pos-modern) .premium-sidebar .sidebar {
  padding-bottom: 24px;
  overflow: visible !important;
}

/* Brand */
body:not(.pos-modern) .premium-sidebar .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 14px 14px;
  background: var(--sb-brand-bg);
  border-bottom: 1px solid var(--sb-border);
  color: var(--sb-text);
  text-decoration: none !important;
}

body:not(.pos-modern) .premium-sidebar .sidebar-brand:hover,
body:not(.pos-modern) .premium-sidebar .sidebar-brand:focus {
  background: var(--sb-brand-bg);
  color: var(--sb-text);
  transform: none;
}

body:not(.pos-modern) .premium-sidebar .sidebar-brand-mark,
body:not(.pos-modern) .premium-sidebar .sidebar-brand-logo {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body:not(.pos-modern) .premium-sidebar .sidebar-brand-mark {
  background: linear-gradient(145deg, var(--sb-accent) 0%, var(--sb-accent-deep) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(47, 122, 163, 0.35);
}

body:not(.pos-modern) .premium-sidebar .sidebar-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

body:not(.pos-modern) .premium-sidebar .sidebar-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

body:not(.pos-modern) .premium-sidebar .sidebar-brand-text {
  display: block;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 168px;
}

body:not(.pos-modern) .premium-sidebar .sidebar-brand-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--sb-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 168px;
}

/* Search */
body:not(.pos-modern) .premium-sidebar .sidebar-form {
  margin: 12px 12px 8px;
  border: 1px solid var(--sb-border) !important;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

body:not(.pos-modern) .premium-sidebar .sidebar-form .form-control,
body:not(.pos-modern) .premium-sidebar .sidebar-form .btn {
  background: transparent !important;
  color: var(--sb-text) !important;
  height: 36px;
  box-shadow: none !important;
}

body:not(.pos-modern) .premium-sidebar .sidebar-form .form-control {
  font-size: 13px;
  padding-left: 12px;
}

body:not(.pos-modern) .premium-sidebar .sidebar-form .form-control::placeholder {
  color: #94a3b8;
}

body:not(.pos-modern) .premium-sidebar .sidebar-form .btn {
  color: var(--sb-muted) !important;
  width: 36px;
}

body:not(.pos-modern) .premium-sidebar .sidebar-form:focus-within {
  border-color: rgba(60, 141, 188, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.12);
}

/* Menu */
body:not(.pos-modern) .premium-sidebar .sidebar-menu {
  margin: 4px 0 0;
  padding: 0 8px 8px;
  /* AdminLTE toggles overflow hidden→visible on hover, which jumps the layout. */
  overflow: visible !important;
  white-space: normal;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu:hover {
  overflow: visible !important;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.header {
  margin: 12px 8px 6px;
  padding: 0 6px;
  color: #94a3b8 !important;
  background: transparent !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: visible !important;
  white-space: normal;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li {
  margin: 2px 0;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--sb-text) !important;
  border-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
  transform: none;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .fa,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .fas,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .far,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .fab,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .glyphicon {
  width: 1.25em;
  text-align: center;
  font-size: 15px;
  color: var(--sb-muted);
  transition: color 0.14s ease;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > span:not(.pull-right-container) {
  flex: 1 1 auto;
  min-width: 0;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .pull-right-container {
  margin-left: auto;
  float: none !important;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .pull-right-container > .sb-caret,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a > .pull-right-container > .fa-angle-left {
  float: none !important;
  width: auto;
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  transition: transform 0.18s ease, color 0.14s ease;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li:focus > a {
  background: var(--sb-hover) !important;
  color: #0f172a !important;
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a > .fa,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a > .fas,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a > .far,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a > .fab,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a > .glyphicon {
  color: var(--sb-accent);
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a {
  background: var(--sb-active-bg) !important;
  color: var(--sb-accent-deep) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sb-accent);
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a > .fa,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a > .fas,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a > .fa,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a > .fas {
  color: var(--sb-accent);
}

body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a > .pull-right-container > .sb-caret,
body:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a > .pull-right-container > .fa-angle-left {
  transform: rotate(-90deg);
  color: var(--sb-accent);
}

/* Submenu */
body:not(.pos-modern) .premium-sidebar .treeview-menu {
  margin: 2px 0 6px;
  padding: 4px 0 4px 8px;
  background: transparent !important;
}

/* Same overflow leap: AdminLTE flips treeview-menu hidden↔visible on open. */
body:not(.pos-modern) .premium-sidebar .treeview > ul.treeview-menu,
body:not(.pos-modern) .premium-sidebar .treeview.menu-open > ul.treeview-menu {
  overflow: visible !important;
}

body:not(.pos-modern) .premium-sidebar .treeview-menu > li > a {
  margin: 1px 0;
  padding: 8px 12px 8px 14px !important;
  border-radius: 6px;
  color: var(--sb-muted) !important;
  font-size: 15px !important;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 0 !important;
  transition: background 0.12s ease, color 0.12s ease;
  transform: none;
}

body:not(.pos-modern) .premium-sidebar .treeview-menu > li > a::before {
  content: "" !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
  flex: 0 0 5px;
}

body:not(.pos-modern) .premium-sidebar .treeview-menu > li > a > i {
  display: none !important;
}

body:not(.pos-modern) .premium-sidebar .treeview-menu > li:hover > a,
body:not(.pos-modern) .premium-sidebar .treeview-menu > li.active > a {
  background: var(--sb-hover) !important;
  color: var(--sb-accent-deep) !important;
}

body:not(.pos-modern) .premium-sidebar .treeview-menu > li.active > a::before,
body:not(.pos-modern) .premium-sidebar .treeview-menu > li:hover > a::before {
  background: var(--sb-accent);
}

/* Collapsed mini sidebar */
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-brand {
  justify-content: center;
  padding: 14px 8px;
}

body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-brand-copy,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-form,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a > span,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a > .pull-right-container,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li.header {
  display: none !important;
}

/*
 * Kill AdminLTE's collapsed "leap" flyout: hovering a mini-sidebar item
 * otherwise pops the label/submenu out absolutely to the right.
 */
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li:hover > a > span,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li:hover > a > span:not(.pull-right),
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li:hover > .treeview-menu,
body:not(.pos-modern).sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .premium-sidebar .sidebar-menu > li:hover > a > span:not(.pull-right),
body:not(.pos-modern).sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .premium-sidebar .sidebar-menu > li:hover > .treeview-menu {
  display: none !important;
  position: static !important;
  width: auto !important;
  left: auto !important;
  top: auto !important;
  margin-left: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar,
body:not(.pos-modern).sidebar-expanded-on-hover .premium-sidebar {
  transform: none !important;
}

body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu {
  padding: 8px 6px;
}

body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}

body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a > .fa,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a > .fas,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a > .far,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a > .fab,
body:not(.pos-modern).sidebar-mini.sidebar-collapse .premium-sidebar .sidebar-menu > li > a > .glyphicon {
  width: auto;
  font-size: 16px;
  margin: 0;
}

/* Dark AdminLTE skins keep a refined dark sidebar */
body.skin-blue:not(.pos-modern),
body.skin-black:not(.pos-modern),
body.skin-purple:not(.pos-modern),
body.skin-green:not(.pos-modern),
body.skin-red:not(.pos-modern),
body.skin-yellow:not(.pos-modern) {
  --sb-surface: #1e293b;
  --sb-brand-bg: #0f172a;
  --sb-border: rgba(148, 163, 184, 0.16);
  --sb-text: #e2e8f0;
  --sb-muted: #94a3b8;
  --sb-hover: rgba(148, 163, 184, 0.12);
  --sb-active-bg: rgba(60, 141, 188, 0.22);
}

body.skin-blue:not(.pos-modern) .premium-sidebar .sidebar-brand-text,
body.skin-black:not(.pos-modern) .premium-sidebar .sidebar-brand-text,
body.skin-purple:not(.pos-modern) .premium-sidebar .sidebar-brand-text,
body.skin-green:not(.pos-modern) .premium-sidebar .sidebar-brand-text,
body.skin-red:not(.pos-modern) .premium-sidebar .sidebar-brand-text,
body.skin-yellow:not(.pos-modern) .premium-sidebar .sidebar-brand-text {
  color: #f8fafc;
}

body.skin-blue:not(.pos-modern) .premium-sidebar .sidebar-form,
body.skin-black:not(.pos-modern) .premium-sidebar .sidebar-form,
body.skin-purple:not(.pos-modern) .premium-sidebar .sidebar-form,
body.skin-green:not(.pos-modern) .premium-sidebar .sidebar-form,
body.skin-red:not(.pos-modern) .premium-sidebar .sidebar-form,
body.skin-yellow:not(.pos-modern) .premium-sidebar .sidebar-form {
  background: rgba(15, 23, 42, 0.55);
}

body.skin-blue:not(.pos-modern) .premium-sidebar .sidebar-form .form-control,
body.skin-black:not(.pos-modern) .premium-sidebar .sidebar-form .form-control,
body.skin-purple:not(.pos-modern) .premium-sidebar .sidebar-form .form-control,
body.skin-green:not(.pos-modern) .premium-sidebar .sidebar-form .form-control,
body.skin-red:not(.pos-modern) .premium-sidebar .sidebar-form .form-control,
body.skin-yellow:not(.pos-modern) .premium-sidebar .sidebar-form .form-control {
  color: #e2e8f0 !important;
}

body.skin-blue:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a,
body.skin-black:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a,
body.skin-purple:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a,
body.skin-green:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a,
body.skin-red:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a,
body.skin-yellow:not(.pos-modern) .premium-sidebar .sidebar-menu > li > a {
  color: #e2e8f0 !important;
}

body.skin-blue:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a,
body.skin-black:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a,
body.skin-purple:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a,
body.skin-green:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a,
body.skin-red:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a,
body.skin-yellow:not(.pos-modern) .premium-sidebar .sidebar-menu > li:hover > a {
  color: #fff !important;
}

body.skin-blue:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a,
body.skin-blue:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a,
body.skin-black:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a,
body.skin-black:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a,
body.skin-purple:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a,
body.skin-purple:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a,
body.skin-green:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a,
body.skin-green:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a,
body.skin-red:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a,
body.skin-red:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a,
body.skin-yellow:not(.pos-modern) .premium-sidebar .sidebar-menu > li.active > a,
body.skin-yellow:not(.pos-modern) .premium-sidebar .sidebar-menu > li.menu-open > a {
  color: #fff !important;
}


/* --- Direct sell / quotation create form ------------------------ */

body:not(.pos-modern) #add_sell_form .pos_product_div.direct-sell-products,
body:not(.pos-modern) #edit_sell_form .pos_product_div.direct-sell-products {
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin-bottom: 8px;
}

body:not(.pos-modern) #add_sell_form #pos_table,
body:not(.pos-modern) #edit_sell_form #pos_table {
  margin-bottom: 0;
  background: var(--ui-surface);
}

body:not(.pos-modern) #add_sell_form #pos_table > thead > tr > th,
body:not(.pos-modern) #edit_sell_form #pos_table > thead > tr > th {
  vertical-align: middle;
  white-space: nowrap;
  padding: 10px 8px;
}

body:not(.pos-modern) #add_sell_form #pos_table > tbody > tr > td,
body:not(.pos-modern) #edit_sell_form #pos_table > tbody > tr > td {
  vertical-align: middle;
  padding: 8px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-line-totals,
body:not(.pos-modern) #edit_sell_form .direct-sell-line-totals {
  margin-top: 4px;
  margin-bottom: 0;
}

body:not(.pos-modern) #add_sell_form .direct-sell-line-totals th,
body:not(.pos-modern) #add_sell_form .direct-sell-line-totals td,
body:not(.pos-modern) #edit_sell_form .direct-sell-line-totals th,
body:not(.pos-modern) #edit_sell_form .direct-sell-line-totals td {
  padding: 6px 8px;
  border: 0;
  background: transparent;
  font-size: 13px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-pay-term,
body:not(.pos-modern) #edit_sell_form .direct-sell-pay-term {
  display: flex;
  gap: 0;
  width: 100%;
}

body:not(.pos-modern) #add_sell_form .direct-sell-pay-term .form-control,
body:not(.pos-modern) #edit_sell_form .direct-sell-pay-term .form-control {
  float: none;
}

body:not(.pos-modern) #add_sell_form .direct-sell-pay-term .width-40,
body:not(.pos-modern) #edit_sell_form .direct-sell-pay-term .width-40 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body:not(.pos-modern) #add_sell_form .direct-sell-pay-term .width-60,
body:not(.pos-modern) #edit_sell_form .direct-sell-pay-term .width-60 {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-payable,
body:not(.pos-modern) #edit_sell_form .direct-sell-payable {
  font-size: 16px;
  padding: 10px 0 4px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-payable #total_payable,
body:not(.pos-modern) #edit_sell_form .direct-sell-payable #total_payable {
  font-weight: 700;
  color: var(--ui-primary-dark, #2d6f96);
}

body:not(.pos-modern) #add_sell_form .box-body > .row + .row,
body:not(.pos-modern) #edit_sell_form .box-body > .row + .row {
  margin-top: 4px;
}

/* --- Direct sell sticky actions + empty state ------------------ */

body:not(.pos-modern) .direct-sell-page {
  padding-bottom: 88px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-sticky-actions {
  position: fixed;
  left: 230px;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--ui-border);
  box-shadow: 0 -4px 18px rgba(16, 36, 54, 0.08);
}

body:not(.pos-modern).sidebar-collapse #add_sell_form .direct-sell-sticky-actions {
  left: 50px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-sticky-total {
  font-size: 16px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-sticky-total #total_payable {
  font-weight: 700;
  color: var(--ui-primary-dark, #2d6f96);
  margin-left: 6px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-sticky-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body:not(.pos-modern) #add_sell_form .direct-sell-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  margin: 0 0 8px;
  padding: 16px;
  border: 1px dashed var(--ui-border-strong, #d2d6de);
  border-radius: var(--ui-radius-sm, 3px);
  background: var(--ui-surface-muted, #f7f8fa);
  color: var(--ui-muted, #6c757d);
  text-align: center;
}

body:not(.pos-modern) #add_sell_form .direct-sell-empty-state p {
  margin: 0;
  font-size: 13px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-products:has(#pos_table_body tr.product_row) .direct-sell-empty-state {
  display: none;
}

body:not(.pos-modern) #add_sell_form .direct-sell-pos-table > thead > tr > th {
  background: var(--ui-surface-muted, #f7f8fa);
  color: var(--ui-muted, #6c757d);
}

body:not(.pos-modern) #add_sell_form .direct-sell-address-block {
  display: block;
  margin-bottom: 8px;
  color: var(--ui-muted, #6c757d);
  line-height: 1.5;
}

body:not(.pos-modern) #add_sell_form .direct-sell-aligned-check {
  margin-bottom: 14px;
}

body:not(.pos-modern) #add_sell_form .direct-sell-inline-total {
  min-height: var(--ui-field-height, 36px);
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 767px) {
  body:not(.pos-modern) #add_sell_form .direct-sell-sticky-actions,
  body:not(.pos-modern).sidebar-collapse #add_sell_form .direct-sell-sticky-actions {
    left: 0;
    flex-direction: column;
    align-items: stretch;
  }

  body:not(.pos-modern) #add_sell_form .direct-sell-sticky-buttons .btn {
    flex: 1 1 auto;
  }
}