@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;
}

.dataTables_wrapper .dataTables_paginate .previous .page-link, .dataTables_wrapper .dataTables_paginate .next .page-link {
  /* padding-top: 6% !important; */
  justify-content: center;
  display: flex;
  align-items: center;
}

.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: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 9px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  opacity: .9;
  cursor: pointer;
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}
.img-thumbnail>.badge:hover{
  opacity: 1;
  transform: scale(1.15);
}
/*
 * The icon needs an explicit size: the global `.fa-times` rule below sets 30px
 * on the <i> itself, which the badge's inherited font-size cannot override.
 */
.img-thumbnail>.badge>.fa-times{
  font-size: 10px;
  line-height: inherit;
  vertical-align: top;
}
/* Keep non-square uploads from being stretched into the fixed-size tile */
.img-thumbnail img{
  object-fit: cover;
  border-radius: 2px;
}
/*
 * Uploaded documents that have no image preview (pdf, doc, ...) are shown as a
 * file icon + extension inside the same tile as image thumbnails.
 */
.uploaded-media{
  margin-bottom: 10px;
}
.img-thumbnail .media-file-icon{
  display: block;
  margin-top: 10px;
  font-size: 26px;
  color: #8a8a8a;
}
.img-thumbnail .media-file-ext{
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #8a8a8a;
}
.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: #D9BB54;
  color: #ffffff;
    border-color: #D9BB54;
}
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 #D9BB54;
}

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;
}

/* --- pos tab: phones / small tablets -------------------------------------
 * The tab shell (settings screens) is `.col-2` menu + `.col-10` body. Those
 * are Bootstrap 4 classes with no breakpoint prefix, so they kept their
 * 16.6% / 83.3% max-width all the way down to a 412px phone: the menu became
 * a ~60px strip in which every tab label broke to one word per line, and the
 * form sat in the remaining sliver. Below the md breakpoint the two stack to
 * full width and the vertical menu becomes a horizontally scrollable tab
 * strip, which is what fits 17 tabs on a phone.
 */
@media (max-width: 767px) {
  div.pos-tab-container > div.pos-tab-menu,
  div.pos-tab-container > div.pos-tab {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    float: none;
  }

  div.pos-tab-menu {
    border-bottom: 1px solid #ddd;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Lay the list-group out as one non-wrapping row that is as wide as its
     items, so the parent scrolls horizontally instead of squashing them. */
  div.pos-tab-menu div.list-group {
    display: flex;
    /* Bootstrap 4's own .list-group is a column flex box, so the direction has
       to be reset explicitly or the items keep stacking. */
    flex-direction: row;
    flex-wrap: nowrap;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }

  div.pos-tab-menu div.list-group > a {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 0;
    /* BS3 list items overlap vertically via margin-bottom:-1px; in a row the
       equivalent is collapsing the horizontal seam instead. */
    margin-bottom: 0;
    margin-right: -1px;
    padding: 10px 14px;
  }

  /* The caret is a pointer from the vertical menu into the panel on its
     right; there is no panel to the right once the menu is a top strip. */
  div.pos-tab-menu div.list-group > a.active:after {
    display: none;
  }

  div.pos-tab-content {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;
  }

  /* Settings fields are a mix of `.col-sm-4` (already stacks here) and plain
     `.col-3`/`.col-4`, which have no breakpoint and would otherwise hold a
     3- or 4-across grid on a phone. Stack every field for consistency. */
  div.pos-tab-content .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    float: none;
  }

  /* The settings page header holds the title and the (100%-wide on mobile)
     settings search in one flex row; let the search drop to its own line
     instead of being crushed against the breadcrumb. */
  .settings-page-header {
    flex-wrap: wrap;
  }

  .settings-page-header .settings-search {
    margin-left: 0;
    margin-top: 8px;
  }

  .sub-header-container .navbar-nav,
  .settings-page-header .navbar-nav {
    margin-left: 0;
    margin-right: 0;
  }

  /* Full-width primary action reads better than a floated button that ends
     up alone on a line. */
  .settings-submit-wrapper .btn {
    float: none !important;
    display: block;
    width: 100%;
    margin: 0 !important;
  }
}

.settings-submit-wrapper .btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.settings-submit-wrapper .btn-primary:not(:disabled):not(.disabled):hover,
.settings-submit-wrapper .btn-primary:not(:disabled):not(.disabled):focus,
.settings-submit-wrapper .btn-primary:not(:disabled):not(.disabled):active {
  background-color: color-mix(in srgb, var(--main-color) 85%, #000);
  border-color: color-mix(in srgb, var(--main-color) 85%, #000);
  color: #fff;
}

.settings-submit-wrapper .btn-primary:not(:disabled):not(.disabled):focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-color) 45%, transparent);
}

/* --- Page breadcrumb bar on phones ------------------------------------------
   Two theme behaviours combined to mangle the `.sub-header-container` breadcrumb
   below 576px, on every page that has one (215 blade files, all using this same
   wrapper):

   1. all.css hides `.breadcrumb-item:not(.active)` and the `/` separator at this
      width, collapsing the trail to the current page alone — so "Barcodes /
      Manage your barcode settings" lost its parent, and pages whose only item
      is *not* marked `.active` lost their title entirely.
   2. The sub-header's duplicate hamburger — padded `0 13px 0 16px` by all.css at
      this width, and hidden everywhere by app.css (see
      `.sub-header-container .sidebarCollapse` below) — was what kept Bootstrap
      3's `.navbar-nav { margin: 7.5px -15px }` (vendor.css) off the text. With
      the button gone that negative margin eats the header's own 18px padding
      and the first character is clipped at the screen edge.

   So: show the whole trail with its separators, cancel the negative margin so
   the trail starts inside the header's padding, and let it wrap instead of
   overflowing — a three-level trail takes two lines on a phone rather than
   running off-screen. Applied to `.sub-header-container` itself, so this holds
   for every page's breadcrumb without a per-page hook class. The selectors
   outrank the all.css rules on specificity, and app.css loads after it. */
@media (max-width: 575px) {
  .sub-header-container .breadcrumb-one .breadcrumb-item,
  .sub-header-container .breadcrumb-one .breadcrumb-item:not(.active) {
    display: inline-block;
  }

  .sub-header-container
    .breadcrumb-one
    .breadcrumb-item
    + .breadcrumb-item::before {
    display: block;
  }

  .sub-header-container .navbar-nav {
    margin-left: 0;
    margin-right: 0;
  }

  /* all.css bumps the active item's span to 15px here — it was the only item on
     screen. Match the parent links to it so a restored trail reads as one line
     of text rather than two sizes. */
  .sub-header-container .breadcrumb-one .breadcrumb-item a {
    font-size: 15px;
  }

  /* The trail is a flex row; without a wrap it would push past the viewport
     once every item is shown again. */
  .sub-header-container .breadcrumb-one .breadcrumb {
    flex-wrap: wrap;
  }
}

.add-product-price-table th{
	background-color: #5cb85c;
    color: white;
}
.blue-header th {
	background-color: #D9BB54;
    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 #D9BB54 !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
/* The sale line pane grows with the rows it holds. It carries no min-height:
   a viewport-relative floor is what produced the blank band under the table
   whenever the browser was zoomed out. Only the POS screen clamps the pane,
   via .pos_product_div_fixed below. */
.pos_product_div{
    min-height: 0;
    margin-bottom: 15px;
}

/* POS screen only: the line list scrolls so the totals and payment actions stay
   reachable next to the product grid. max-height without min-height means the
   pane still shrinks to its content when there are only a few rows. */
.pos_product_div_fixed{
    max-height: 57vh;
    overflow-y: auto;
}
.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: #D9BB54 !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{
    body * {
        visibility: hidden !important;
    }

    .print_section,
    .print_section *,
    #receipt_section,
    #receipt_section *,
    #invoice_content,
    #invoice_content *,
    .invoice,
    .invoice * {
        visibility: visible !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow: visible !important;
    }

    .print_section,
    #receipt_section,
    #invoice_content {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    .header-container,
    .header,
    .navbar,
    .sidebar-wrapper,
    .main-sidebar,
    .left-side,
    .main-header,
    .content-header,
    .main-content,
    .no-print,
    .modal,
    .modal-backdrop,
    .popover,
    .tooltip,
    .ui-autocomplete,
    #ui-datepicker-div,
    .daterangepicker,
    .bootstrap-datetimepicker-widget,
    .select2-container--open,
    .swal-overlay,
    .sweet-alert,
    .overlay,
    .search-overlay,
    .rightbar-overlay,
    #toast-container,
    .toast,
    .main-container > :not(.print_section):not(#receipt_section) {
        display: none !important;
    }

    body,
    html {
        background: #fff !important;
        overflow: visible !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Same reset one level down, for the .wrapper that layouts/restaurant puts
       around the page (Orders and Kitchen are the only two screens on it).

       vendor.css gives .wrapper `position: relative` plus `height: 100%` and
       `overflow-x: hidden; overflow-y: auto`. Being positioned makes it the
       containing block for #receipt_section, which the rule above takes out of
       flow with position:absolute - so the wrapper collapses to zero height and
       its own overflow then clips the receipt away entirely. The Orders print
       button produced a blank sheet for exactly this reason, and only on this
       layout, because no other layout has a .wrapper. */
    .wrapper {
        overflow: visible !important;
        height: auto !important;
    }

    a,
    a:link,
    a:visited,
    a[href],
    a[href]:after,
    a[href]:before,
    a[href^="http"]:after,
    a[href^="https"]:after,
    a[href^="http"]:before,
    a[href^="https"]:before {
        content: "" !important;
        text-decoration: none !important;
    }

    ::-webkit-scrollbar{
        display: none !important;
    }

    @page {
      margin: 8mm 8mm 20mm 8mm;
      size: auto;
    }

    * {
        text-decoration: none !important;
    }

    a,
    a * {
        text-decoration: none !important;
        color: inherit !important;
    }
}

@media print {
    body > .highcharts-container,
    body > .highcharts-container *,
    body > .highcharts-fixed,
    body > .highcharts-fixed *,
    body > .highcharts-scrolling,
    body > .highcharts-scrolling * {
        visibility: visible !important;
    }
}

/* Printed service-order ticket (Orders screen, restaurant module).

   Scoped to .line-order-ticket rather than to #receipt_section, which is shared
   with the POS invoice on layouts/app and must keep its own look. Without this
   the ticket printed as a shrink-to-fit table jammed against the left margin in
   5pt type, because nothing had ever styled it for paper.

   Sized in mm and centred: on A4 that lands a tidy ticket in the middle of the
   sheet, and on 80mm roll paper the max-width never binds so it simply fills the
   width. */
@media print {
    .line-order-ticket,
    .line-order-ticket * {
        color: #000 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .line-order-ticket {
        width: 100%;
        max-width: 120mm;
        margin: 0 auto;
    }

    .line-order-ticket .lot-head {
        text-align: center;
        padding-bottom: 6px;
        margin-bottom: 10px;
        border-bottom: 2px solid #000;
    }

    .line-order-ticket .lot-no {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.15;
    }

    .line-order-ticket .lot-table {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse;
        /* fixed, so a long product name wraps inside its cell instead of
           stretching the label column out of shape */
        table-layout: fixed;
        font-size: 12px;
    }

    .line-order-ticket .lot-table th,
    .line-order-ticket .lot-table td {
        border: 1px solid #8a8a8a !important;
        padding: 6px 8px !important;
        text-align: left;
        vertical-align: top;
        line-height: 1.35;
        word-wrap: break-word;
    }

    .line-order-ticket .lot-table th {
        width: 38%;
        font-weight: 700;
    }

    /* Product and quantity are what the kitchen acts on. */
    .line-order-ticket .lot-key th,
    .line-order-ticket .lot-key td {
        font-size: 15px;
        font-weight: 700;
    }

    .line-order-ticket .lot-empty {
        color: #666 !important;
    }
}

/* Printed stock-transfer note (Stock Transfers -> Print).
   Markup: resources/views/stock_transfer/print.blade.php

   Scoped to .st-transfer-doc rather than to #receipt_section, which is shared
   with the POS invoice and must keep its own look - the same reason
   .line-order-ticket above is scoped that way.

   The document was previously laid out with the Bootstrap grid plus a handful of
   AdminLTE classes (.page-header, .invoice-col, .well, .center-block) that the
   current CSS build no longer ships. On paper the columns collapsed, the date
   printed flush against the title, and the totals sat against the left margin.
   Everything here is table-based and framework-free for that reason.

   BACKGROUNDS ARE NOT USED TO CARRY MEANING. Browsers drop background colours from
   printed output unless the user opts in, so the old green header band printed as
   white-on-white and the column headings vanished. Weight and rules do that job
   instead, and they cost nothing on any printer. */
@media print {
    .st-transfer-doc {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 1.45;
        color: #000 !important;
    }

    .st-transfer-doc * {
        color: #000 !important;
    }

    /* Title left, date right, on one baseline. A two-cell table because the
       float this replaced had nothing to clear against inside an absolutely
       positioned receipt section, so the date wrapped onto the title. */
    .st-transfer-doc .stp-titlebar {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 14px;
        border-bottom: 2px solid #000;
    }

    .st-transfer-doc .stp-titlebar td {
        padding: 0 0 8px;
        vertical-align: baseline;
    }

    .st-transfer-doc .stp-title {
        font-size: 17px;
        font-weight: 700;
    }

    .st-transfer-doc .stp-title-ref {
        font-size: 13px;
        font-weight: 400;
        white-space: nowrap;
    }

    .st-transfer-doc .stp-title-date {
        text-align: right;
        font-size: 12px;
        white-space: nowrap;
    }

    /* From / To / reference, three fixed columns. */
    .st-transfer-doc .stp-parties {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        margin-bottom: 16px;
    }

    .st-transfer-doc .stp-parties td {
        width: 33.33%;
        vertical-align: top;
        padding: 0 12px 0 0;
        /* An address must not be split across sheets. */
        page-break-inside: avoid;
    }

    .st-transfer-doc .stp-parties td:last-child {
        padding-right: 0;
    }

    .st-transfer-doc .stp-party-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #444 !important;
        margin-bottom: 3px;
    }

    .st-transfer-doc .stp-party-name {
        font-weight: 700;
        font-size: 13px;
    }

    .st-transfer-doc .stp-meta {
        text-align: right;
    }

    .st-transfer-doc .stp-meta-label {
        font-weight: 700;
    }

    /* Line items. */
    .st-transfer-doc .stp-items {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        margin-bottom: 14px;
    }

    .st-transfer-doc .stp-items th,
    .st-transfer-doc .stp-items td {
        border: 1px solid #8a8a8a;
        padding: 6px 8px;
        text-align: left;
        vertical-align: top;
    }

    .st-transfer-doc .stp-items thead th {
        font-weight: 700;
        border-bottom-width: 2px;
        white-space: nowrap;
    }

    /* Repeat the headings when the item list runs past one sheet, and keep a
       row whole. The global print rule puts `page-break-inside: avoid` on
       `.invoice *`, which would otherwise try to hold the whole table on one
       page and clip the overflow. */
    .st-transfer-doc .stp-items thead {
        display: table-header-group;
    }

    .st-transfer-doc .stp-items,
    .st-transfer-doc .stp-items tbody {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .st-transfer-doc .stp-items tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Qualified with th/td on purpose: the `.stp-items th, .stp-items td` rule
       above carries an element in its selector and would otherwise out-specify a
       bare class here, leaving the money and quantity columns ranged left. */
    .st-transfer-doc .stp-items th.stp-col-sr,
    .st-transfer-doc .stp-items td.stp-col-sr {
        width: 34px;
        text-align: center;
    }

    .st-transfer-doc .stp-items th.stp-col-qty,
    .st-transfer-doc .stp-items td.stp-col-qty {
        width: 110px;
        text-align: right;
        white-space: nowrap;
    }

    .st-transfer-doc .stp-items th.stp-col-amount,
    .st-transfer-doc .stp-items td.stp-col-amount {
        width: 120px;
        text-align: right;
        white-space: nowrap;
    }

    .st-transfer-doc .stp-totals td.stp-col-amount {
        text-align: right;
        white-space: nowrap;
        min-width: 110px;
    }

    .st-transfer-doc .stp-lot {
        font-size: 11px;
        color: #333 !important;
        margin-top: 2px;
    }

    /* Totals, right-aligned under the money column they total. */
    .st-transfer-doc .stp-totals {
        border-collapse: collapse;
        margin: 0 0 16px auto;
        page-break-inside: avoid;
    }

    .st-transfer-doc .stp-totals th,
    .st-transfer-doc .stp-totals td {
        padding: 5px 8px;
        border: none;
        border-bottom: 1px solid #d0d0d0;
    }

    .st-transfer-doc .stp-totals th {
        text-align: left;
        font-weight: 600;
        white-space: nowrap;
    }

    .st-transfer-doc .stp-totals .stp-sign {
        text-align: center;
        width: 34px;
    }

    .st-transfer-doc .stp-totals .stp-grand th,
    .st-transfer-doc .stp-totals .stp-grand td {
        font-weight: 700;
        font-size: 13px;
        border-top: 2px solid #000;
        border-bottom: none;
    }

    .st-transfer-doc .stp-notes {
        margin-bottom: 18px;
        page-break-inside: avoid;
    }

    .st-transfer-doc .stp-notes-label {
        font-weight: 700;
        margin-bottom: 4px;
    }

    .st-transfer-doc .stp-notes-body {
        border: 1px solid #c8c8c8;
        padding: 8px 10px;
        min-height: 34px;
        white-space: pre-line;
    }

    .st-transfer-doc .stp-barcode {
        text-align: center;
        page-break-inside: avoid;
    }

    .st-transfer-doc .stp-barcode img {
        max-width: 100%;
    }
}

@media print {
    body.dt-print-view,
    body.dt-print-view * {
        visibility: visible !important;
    }

    body.dt-print-view {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 11px;
    }

    body.dt-print-view h1 {
        margin: 0 0 8px;
        font-size: 16px;
        text-align: center;
    }

    body.dt-print-view > div:empty {
        display: none !important;
    }

    body.dt-print-view table {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }

    /* Repeat the column headers at the top of every printed sheet. */
    body.dt-print-view thead {
        display: table-header-group !important;
    }

    body.dt-print-view tbody {
        display: table-row-group !important;
    }

    body.dt-print-view tfoot {
        display: table-footer-group !important;
    }

    body.dt-print-view tr {
        display: table-row !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    body.dt-print-view th,
    body.dt-print-view td {
        display: table-cell !important;
        border: 1px solid #333 !important;
        padding: 4px 6px !important;
        text-align: left;
        vertical-align: top;
        white-space: normal !important;
        word-break: break-word;
        overflow: visible !important;
        max-width: none !important;
    }

    body.dt-print-view th {
        font-weight: 700;
        background: #eee !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.dt-print-view table thead th {
        position: static !important;
        padding: 4px 6px !important;
    }
}

.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;
}

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{
  /*width: 95%;*/
  height: 55px;
  margin: auto;
  /*padding-top: 5px;*/

}
.product_box .image-container img{
    height: 45px;
    /*width: 45px*/
}
.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 ";
}

@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
}
/*
 * The icon needs an explicit size: the rule above sets 30px on the <i> itself, which the
 * button's font-size cannot override, so the cross rendered far larger than the label and
 * the sibling download icon. Inherited rather than a fixed size, so it tracks whatever
 * button size the markup uses.
 */
.existing-document .fa-times{
  font-size: inherit;
  line-height: 1;
}
.mb-5{
  margin-bottom: 5px !important;
}
.tree-actions {
  margin-left: 20px;
  display: none;
}
.jstree-hovered .tree-actions {
  display: inherit;
}

/* Capitalize form labels across admin forms (display only) */
.form-group > label,
.form-group > .control-label,
.form-group .checkbox > label,
.form-group .radio > label,
.form-group .checkbox label,
.form-group .radio label {
    text-transform: capitalize;
}

label {
    text-transform: capitalize !important;
}
/*
 * Read-only date / time / date-range picker inputs must not show a "blocked"
 * (not-allowed) cursor on hover — they are read-only, not disabled, and are
 * meant to be clicked to open the picker. Applies project-wide.
 * (!important is required to override third-party picker/framework CSS.)
 */
input.form-control[readonly]:not([disabled]),
textarea.form-control[readonly]:not([disabled]),
.input-group.date .form-control[readonly],
.datepicker[readonly],
.datetimepicker[readonly],
.date_picker[readonly],
.datetime_picker[readonly],
.date_range_picker[readonly],
.daterange[readonly] {
  cursor: pointer !important;
}

/*
 * Uploaded file preview (e.g. product brochure on the product edit form).
 * Reuses .img-thumbnail so the shared .delete-media handler can remove the box,
 * but that class is a fixed 70x70 image tile — reset the size so a filename and
 * its action buttons fit, and drop it onto its own line below the label.
 */
.img-thumbnail.file-preview {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 5px 0;
  padding: 8px;
  text-align: left;
}

.img-thumbnail.file-preview .file-preview-name {
  display: block;
  margin-bottom: 5px;
  word-break: break-all;
}

/* Hierarchical category tables (product & HRM categories, expense categories, CLAIMS categories):
   a parent row expands to reveal its sub categories. */
td.category-tree-control {
  width: 32px;
  text-align: center;
  cursor: pointer;
  color: #888;
}

td.category-tree-control i {
  display: inline-block;
  transition: transform 0.15s ease-in-out;
}

tr.expanded td.category-tree-control i {
  transform: rotate(90deg);
}

.category-tree-count {
  font-weight: normal;
}

/* Sub category rows are real rows of the same table, so they line up with its columns
   and share the parent rows' look (striping, borders); only the level-down icon of the
   name cell marks them as sub categories. */

/* ---- select2 inside a bootstrap .input-group ---------------------------- *
 * select2's default width mode ("resolve") freezes the widget at the pixel
 * width measured when it was initialised. Changing the browser zoom re-flows
 * the column but not that frozen width, so the widget (and the addon/button
 * next to it) spills out of its column and paints over the neighbouring field.
 * Force the widget to stay fluid and to behave like the table cell the
 * input-group expects. */
.input-group > .select2-container,
.input-group .select2-container--default {
  position: relative;
  z-index: 2;
  display: table;
  table-layout: fixed;
  float: left;
  width: 100% !important;
  max-width: 100%;
  margin-bottom: 0;
}

.input-group > .select2-container .select2-selection {
  width: 100%;
}

/* The addon / "+" button must keep its own cell instead of being pushed out. */
.input-group > .select2-container + .input-group-btn,
.input-group > .select2-container + .input-group-addon {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- select2 as the ONLY control in an .input-group --------------------- *
 * A Bootstrap 3 .input-group is `display: table` with no width of its own — it
 * only spans its column because the `.form-control` cell inside it is
 * `width: 100%`. select2 hides the real <select> (it shrinks to 1px), so a
 * group whose sole control is a select2 has no such cell left and the table
 * falls back to shrink-to-fit: it sizes itself to the widest option label.
 * On POS > Multiple Pay the "Payment Account" widget sized itself to
 * "ICICI Bank (Balance: 89,545.00)", spilling out of its column, over the
 * neighbouring field and past the popup — and the open dropdown, which select2
 * matches to the widget's width, got cut off with it.
 * Pinning the group to its column restores the `.form-control` behaviour, and
 * the widget ellipsises long labels instead of growing. */
.input-group:has(> .select2-container) {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
}

/* The addon keeps its natural width; the table-cell sizing above no longer
   applies once the group is a flex container. */
.input-group:has(> .select2-container) > .input-group-addon,
.input-group:has(> .select2-container) > .input-group-btn {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
}

/* The widget absorbs whatever is left. `min-width: 0` is what actually fixes
   the overflow: a flex item refuses to shrink below its content's min-content
   width by default, which for this widget is the full "ICICI Bank (Balance:
   89,545.00)" label. Zeroing it lets the box shrink to the column and the label
   ellipsise. `width` needs !important because select2 copies the <select>'s
   inline `width:100%` onto the container as an inline style. */
.input-group:has(> .select2-container) > .select2-container {
  display: block;
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: 100%;
}

/* Single-select only — on a multi-select `__rendered` is the <ul> of tag chips,
   which must stay free to wrap onto more lines. */
.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Split fields (pay term number + type) must never total more than the row. */
.multi-input .width-40,
.multi-input .width-60 {
  max-width: 100%;
}

/* ---- Bootstrap 4 validation for select2 --------------------------------- *
 * select2 keeps the real <select> at 1x1px and draws its own widget, so the
 * `.is-invalid` Bootstrap puts on a control paints nothing. common.js mirrors the
 * class onto the widget (span.select2-container); these rules give it the same
 * red border and focus ring Bootstrap gives a native invalid .form-control.
 * The theme sets the default border with `border: 1px solid #aaa`, so match its
 * specificity rather than reaching for !important. */
.select2-container.is-invalid .select2-selection,
.select2-container--default.is-invalid .select2-selection--single,
.select2-container--default.is-invalid .select2-selection--multiple {
  border-color: #dc3545 !important;
}

.select2-container.is-invalid.select2-container--focus .select2-selection,
.select2-container.is-invalid.select2-container--open .select2-selection {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-control.is-invalid,
.custom-select.is-invalid,
select.form-control.is-invalid {
  border-color: #dc3545 !important;
}

.form-control.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Valid state (used by the live mobile check in user/form.blade.php). */
.form-control.is-valid {
  border-color: #28a745 !important;
}

.form-control.is-valid:focus {
  border-color: #28a745 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* jQuery Validation writes the message as a sibling of the field it belongs to.
   For a select2 / input-group it lands after the wrapper instead, where Bootstrap's
   `.is-invalid ~ .invalid-feedback` rule cannot reach it — hence the `d-block` that
   common.js adds to errorClass. Keep the spacing consistent with a native field. */
.invalid-feedback.d-block {
  margin-top: 0.25rem;
}

/* Horizontal scrollbar mirrored above a datatable, synced with the native one below.
   The inner div only exists to give the container something wide enough to scroll.
   Unscoped on purpose: for tables that scroll via .table-responsive the bar is inserted
   above that wrapper, which sits outside .dataTables_wrapper. */
.top-scrollbar {
  overflow-x: auto;
  overflow-y: hidden;
  /* It is inserted directly before the table wrapper, so without this the bar sits flush
     against the "Show entries" / export-buttons row below it and reads as part of that row.
     Only applies when the bar is shown - common.js toggles it off for narrow tables. */
  margin-bottom: 10px;
}

.top-scrollbar > div {
  height: 1px;
}

/* Browsers with overlay scrollbars hide the bar until scrolled, which defeats the purpose */
.top-scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 10px;
}

.top-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .35);
  border-radius: 5px;
}

.bulk-action-btn {
  min-width: 170px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px !important;
  white-space: nowrap;
  line-height: 1;
}

.btn-soft-danger,
.attendance-btn-danger,
.bulk-action-btn-danger {
  background-color: #fef3f2 !important;
  border: 1px solid #fda29b !important;
  color: #b42318 !important;
}

.btn-soft-danger:hover,
.btn-soft-danger:focus,
.attendance-btn-danger:hover,
.attendance-btn-danger:focus,
.bulk-action-btn-danger:hover,
.bulk-action-btn-danger:focus {
  background-color: #fee4e2 !important;
  border-color: #f97066 !important;
  color: #912018 !important;
}

/* Primary actions follow the business theme rather than a fixed colour. */
.btn-theme-primary,
.attendance-btn-primary {
  background-color: var(--main-color, #3c8dbc) !important;
  border-color: var(--main-color, #3c8dbc) !important;
  color: #fff !important;
}

.btn-theme-primary:hover,
.btn-theme-primary:focus,
.attendance-btn-primary:hover,
.attendance-btn-primary:focus {
  filter: brightness(.92);
  color: #fff !important;
}

/* Secondary: theme-coloured outline, filled on hover. */
.btn-theme-outline {
  background-color: #fff;
  border: 1px solid var(--main-color, #3c8dbc);
  color: var(--main-color, #3c8dbc);
}

.btn-theme-outline:hover,
.btn-theme-outline:focus {
  background-color: var(--main-color, #3c8dbc);
  color: #fff;
}

/* =========================================================================
   PLAN-LIMIT CALLOUT
   =========================================================================
   ONE component, TWO surfaces, and it lives here rather than in either of them
   because that is the only way the two can be guaranteed to agree:

     - home/partials/quota_warning.blade.php, the dashboard banner shown from
       80% of any quota
     - platform/limit_modal.blade.php, the dialog a create screen returns once
       a quota is full

   They used to be styled separately and drifted immediately: the banner became
   a white card while the dialog was still a solid red .alert, so a tenant who
   read "you have reached a plan limit" on their dashboard met a different-
   looking notice saying the same thing when they clicked Add. A shared block
   cannot drift.

   NOT A .alert. In this theme .alert-danger is a solid fill, and app.css sets a
   colour on p/li/h4 DIRECTLY - so a fill forces every child to restate its
   colour to win back contrast, which is a fight a notice should not be having.
   The card language below is the dashboard's own, taken from the stat cards in
   home/index.blade.php: white ground, 12px radius, #e8edf3 hairline, the same
   two-layer shadow, #1a2b4a ink, #6b7c93 supporting text.

   The red ramp is the one .btn-soft-danger above already uses. The amber is its
   counterpart from the same ramp; when a .btn-soft-warning is added it should
   take these values so the two keep matching. */
.quota-callout {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e8edf3;
  /* The accent is the only place this is allowed to shout. border-inline-start
     rather than border-left so rtl.css flips it with everything else. */
  border-inline-start: 4px solid var(--quota-accent);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 34, 58, .06), 0 4px 12px rgba(15, 34, 58, .04);
}

.quota-callout--danger { --quota-accent: #d92d20; --quota-tint: #fef3f2; --quota-ink: #b42318; }
.quota-callout--warn   { --quota-accent: #dc6803; --quota-tint: #fffaeb; --quota-ink: #b54708; }

/* Inside a dialog the modal IS the card, so the callout drops its own frame
   rather than nesting one card in another. The tinted icon tile stays: it is
   what makes the dialog recognisably the same notice as the banner. */
.quota-callout--flush {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.quota-callout__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--quota-tint);
  color: var(--quota-ink);
  font-size: 22px;
  line-height: 1;
}

.quota-callout__main { flex: 1; min-width: 0; }

.quota-callout__heading {
  margin: 2px 0 3px;
  color: #1a2b4a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.quota-callout__body {
  margin: 0;
  color: #6b7c93;
  font-size: 13px;
  line-height: 1.5;
}

/* Takes the callout's own accent, so the link reads as part of the notice
   rather than as the theme's blue dropped into it - and so it stays legible
   on both the warn and the danger tint without a rule per tone. */
.quota-callout__link { color: var(--quota-ink); font-weight: 600; text-decoration: underline; }
.quota-callout__link:hover,
.quota-callout__link:focus { color: var(--quota-ink); opacity: .85; }

/* auto-fit rather than a fixed column count: one quota takes the full width,
   four wrap to two rows, and no breakpoint is needed for either. */
.quota-callout__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* Per row, not per callout. The old banner coloured everything from its worst
   row, so a tenant full on locations and at 82% of products saw both painted
   the same. */
.quota-callout__item { --quota-bar: #dc6803; min-width: 0; }
.quota-callout__item--full { --quota-bar: #d92d20; }

/* The two states only the plan page produces. The banner never passes a row
   below 80% or a row with no cap, so neither class can reach it - see
   platform/partials/quota_meter. Amber stays the default precisely so that
   remains true. */
.quota-callout__item--ok   { --quota-bar: #12b76a; }
.quota-callout__item--none { --quota-bar: #667085; }

/* An unlimited limit has no end to fill towards. A full bar would read as
   "all used" and an empty one as "none used", and both are wrong, so the
   track becomes a dotted rule that suggests neither. It keeps the row's
   height so a mixed list does not stagger. */
.quota-callout__track--none {
  background: none;
  border-bottom: 2px dotted #d3dbe6;
  border-radius: 0;
}

.quota-callout__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.quota-callout__label {
  color: #6b7c93;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* Long nouns - "invoices this billing period" - wrap rather than push the
     count off the end of a narrow column. */
  overflow-wrap: anywhere;
}

.quota-callout__count {
  flex-shrink: 0;
  color: var(--quota-bar);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quota-callout__count small {
  color: #8fa0b5;
  font-size: 13px;
  font-weight: 500;
}

.quota-callout__track {
  height: 6px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}

.quota-callout__fill {
  display: block;
  height: 100%;
  background: var(--quota-bar);
  border-radius: inherit;
}

@media (max-width: 575px) {
  .quota-callout { padding: 16px; gap: 12px; }
  .quota-callout--flush { padding: 0; }
  .quota-callout__icon { width: 36px; height: 36px; font-size: 19px; border-radius: 10px; }
  .quota-callout__list { gap: 12px; }
}

/* ---------------------------------------------------------------------------
   The tenant's own plan page (platform/subscription).

   Everything below is scoped under .plan- and used on one screen. It borrows
   the quota callout's palette on purpose - the limits section of this page IS
   that component - so the two never read as different designs of the same idea.

   It is CSS rather than utilities on the markup because .claude/CLAUDE.md
   forbids inline styles, and it lives in app.css rather than a @push block
   because the limit modal cannot @push and shares the ramp.
   --------------------------------------------------------------------------- */

.plan-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 34, 58, .06), 0 4px 12px rgba(15, 34, 58, .04);
}

.plan-card + .plan-card { margin-top: 20px; }

/* The lockout callout sits above the first card and is the one .quota-callout
   on this page that is not inside one. */
.plan-notice { margin-bottom: 20px; }

/* A second heading inside a card - "Included in your plan" under the facts. */
.plan-card__title--sub { margin-top: 22px; }

.plan-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 4px;
}

.plan-card__name {
  margin: 0;
  color: #1a2b4a;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.plan-card__price {
  color: #1a2b4a;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-card__price small { color: #6b7c93; font-size: 13px; font-weight: 500; }

.plan-card__title {
  margin: 0 0 3px;
  color: #1a2b4a;
  font-size: 15px;
  font-weight: 600;
}

.plan-card__body { margin: 0; color: #6b7c93; font-size: 13px; line-height: 1.5; }

/* auto-fit, like the quota list: two facts sit side by side, six wrap to
   three rows, and no breakpoint is needed for either. */
.plan-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 24px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.plan-facts__label {
  display: block;
  margin-bottom: 3px;
  color: #6b7c93;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.plan-facts__value {
  display: block;
  color: #1a2b4a;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.plan-facts__value--muted { color: #8fa0b5; font-weight: 500; }

/* Status pill. One class per word TenantPlanHistory can produce, so a status
   the class list does not know still renders - as the neutral pill. */
.plan-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-pill--active   { background: #ecfdf3; color: #027a48; }
.plan-pill--trialing { background: #eff8ff; color: #175cd3; }
.plan-pill--upcoming { background: #f4f3ff; color: #5925dc; }
.plan-pill--ended    { background: #f2f4f7; color: #475467; }
.plan-pill--awaiting_payment { background: #fffaeb; color: #b54708; }
.plan-pill--declined { background: #fef3f2; color: #b42318; }

.plan-chips { margin: 16px 0 0; padding: 0; list-style: none; }

.plan-chips li {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 11px;
  border: 1px solid #e4e9f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
}

/* The history table scrolls inside its own box rather than widening the page:
   five columns with dates in two of them overflow a phone, and a horizontal
   scrollbar on <body> would take the sidebar with it. */
.plan-history { overflow-x: auto; margin-top: 18px; }
.plan-history table { margin-bottom: 0; }
.plan-history th {
  color: #6b7c93;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-history td { color: #475467; font-size: 13px; vertical-align: middle; }
.plan-history__name { color: #1a2b4a; font-weight: 600; }
.plan-history__meta { display: block; margin-top: 2px; color: #8fa0b5; font-size: 11.5px; }
.plan-history__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-history tr.plan-history__row--current { background: #f7fbff; }

.plan-empty { padding: 28px 8px; color: #8fa0b5; text-align: center; }
.plan-empty__title { margin: 0 0 4px; color: #475467; font-size: 15px; font-weight: 600; }
.plan-empty p { margin: 0; font-size: 13px; }

/* The marks under the Pay/Renew button in partials/payment.blade.php - the
   same reassurance the lockout wall gives (platform/subscription_expired.blade.php),
   in this page's own palette rather than in signup.css's tokens: that file is
   scoped under .signup, which this ERP-shell page never wraps its content in. */
.plan-paymarks {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  font-size: 26px;
  line-height: 1;
  color: #b0bbca;
}

.plan-paysecure {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #8fa0b5;
  font-size: 12px;
}

.plan-paysecure .la-lock { font-size: 13px; flex-shrink: 0; }

@media (max-width: 575px) {
  .plan-card { padding: 18px 16px; }
  .plan-card__name { font-size: 19px; }
  .plan-facts { gap: 14px; }
}

/* Jump-to-bottom button. Mirrors the theme's .scroll-top-arrow, anchored top-right instead
   so the two never overlap. Offset clears the fixed header. */
.scroll-bottom-arrow {
  cursor: pointer;
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 1050;
  background: var(--main-color);
  height: 35px;
  width: 35px;
  /* Hidden until there is something below to scroll to; common.js adds .visible */
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
}

.scroll-bottom-arrow.visible {
  display: flex;
}

.scroll-top-arrow {
  z-index: 1050;
}

/* ==========================================================================
   Sticky footer
   --------------------------------------------------------------------------
   The copyright footer sits inside #content, after @yield('content'). On a
   short page it used to stop wherever the content stopped, floating in the
   middle of the screen with blank space beneath it.

   .main-container is already `display:flex; min-height:100vh`, so #content is
   a flex item that already stretches to full height. Making #content a column
   flex container therefore costs no layout change, and `margin-top:auto` on
   the footer pushes it to the bottom of that full-height box. On a long page
   the auto margin collapses to nothing and the footer flows normally after
   the content, as before.

   This applies to layouts/app.blade.php and layouts/sign.blade.php, which
   share the same #content > include.footer structure — i.e. every admin
   module screen.
   ========================================================================== */
#content.main-content {
    display: flex;
    flex-direction: column;
}

/* Children must not be squashed when the column has spare room: without this,
   flex would shrink tall content to fit rather than letting the page scroll. */
#content.main-content > * {
    flex-shrink: 0;
}

#content.main-content > .footer-wrapper {
    margin-top: auto;
}

/* The POS footer lives in the same slot and needs the same treatment. */
#content.main-content > .main-footer {
    margin-top: auto;
}

/* A pinned footer must not force a second page when printing. */
@media print {
    #content.main-content {
        display: block;
    }

    #content.main-content > .footer-wrapper,
    #content.main-content > .main-footer {
        margin-top: 0;
    }
}

/* --- Side-menu toggle (hamburger) -------------------------------------------
   assets/css/all.css ships `.sidebarCollapse { display: none }` with a single
   `@media (max-width: 575px)` block flipping it back to `display: block`. Two
   elements carry that class on every admin page: the one in the top header
   (include/header.blade.php) and a second copy inside each page's own
   `.sub-header-container` breadcrumb bar (~96 blade files). The result was that
   the toggle was hidden at every normal viewport and BOTH copies appeared below
   576px — which is what browser zoom lands you in, since zoom shrinks the CSS
   viewport (e.g. a 1440px window is ~960px at 150% and ~576px at 250%).

   The header toggle is the canonical one, so show it at all widths; the
   sub-header duplicate is suppressed everywhere. Both rules need !important to
   beat the max-width:575px block in all.css. */
.header .navbar-item.theme-brand .sidebarCollapse {
    display: inline-flex !important;
    align-items: center;
}

.sub-header-container .sidebarCollapse {
    display: none !important;
}

/* --- Side-menu scrim: invisible click-blocker on desktop --------------------
   all.js toggles `show` on `.overlay` on every `.sidebarCollapse` click, at
   every viewport width. all.css only *styles* that state below 992px
   (`@media (max-width: 991px) { .overlay.show { display: block; opacity: .7 } }`);
   its base rule is `display: none`, so above 991px the class was meant to be
   inert. It is not: css/vendor.css (Bootstrap 3) ships the helper class
   `.show { display: block !important }`, which the overlay picks up at any
   width. So on desktop the first hamburger click laid a
   `position: fixed; inset: 0; z-index: 1035` layer at `opacity: 0` over the
   whole page — invisible, but above the header (`.fixed-top`, z-index 1030).
   The next click on the hamburger therefore hit the scrim instead of the
   toggle, and all.js's own overlay handler simply re-closed the sidebar, so
   the button read as dead and the rest of the page was unclickable too.

   Above 991px the sidebar pushes #content aside and needs no scrim at all, so
   keep it hidden. The two-class selector plus !important outranks Bootstrap's
   single-class `.show` regardless of stylesheet order. Below 992px nothing
   changes — the off-canvas sidebar keeps its tap-to-dismiss scrim. */
@media (min-width: 992px) {
    .overlay,
    .overlay.show {
        display: none !important;
    }
}

/* --- Brand row: logo + toggle alignment -------------------------------------
   all.css lays the brand <ul> out with `justify-content: space-between` and a
   fixed `li.theme-text { margin-right: 47px }`, both tuned for the old logo.
   space-between is the actual positioning bug: the gap between logo and toggle
   is whatever is left over, so it grows and shrinks with the viewport and the
   toggle drifts away from the logo instead of sitting beside it. Pack the row
   from the left with a fixed gap instead, and centre both items on the logo's
   full height. Scoped to `.header` so the sidebar's own brand row is untouched. */
.header .navbar-item.theme-brand {
    justify-content: flex-start !important;
    align-items: center;
    gap: 10px;
    padding: 0.9px 0 0.9px 20px !important;
}

/* Pin the toggle to a fixed x-position instead of letting it ride the end of
   the logo/business-name box — otherwise a small logo or a short business name
   drags it left and it no longer lines up with the sidebar edge. The brand
   block is held to the sidebar's own width (235px, all.css `.sidebar-wrapper`)
   and the toggle is pushed to that block's right edge, so it sits just inside
   the sidebar's right edge whatever the branding is. `min-width` rather than a
   fixed width so an unusually long business name still pushes out instead of
   being clipped. Desktop only — below 992px the sidebar is off-canvas and
   all.css hides the business name entirely, so the reservation is pointless. */
@media (min-width: 992px) {
    .header .navbar-item.theme-brand {
        min-width: 235px;
        box-sizing: border-box;
        padding-right: 12px !important;
    }

    /* The auto margin belongs on the <li> — that is the flex child of the row,
       not the <a> inside it. */
    .header .navbar-item.theme-brand > li.sidebar-toggle-item {
        margin-left: auto;
    }
}

.header .navbar-item.theme-brand li.theme-logo,
.header .navbar-item.theme-brand li.theme-text {
    align-self: center;
    margin-right: 0;
    /* beats all.css `li.theme-text { margin-right: 47px }` */
}

/* Preserve the new logo's aspect ratio — all.css pins `width: 100%` alongside a
   fixed height, which stretches it to whatever the flex row hands the <li>. */
.header .navbar-item.theme-brand li.theme-logo img.navbar-logo {
    width: auto;
    height: 34px;
    display: block;
}

/* --- Side-menu toggle: appearance -------------------------------------------
   One control in two states: hamburger when the menu is open, X when closed.
   The hover/active tints resolve from --main-color, the accent token set by
   layouts/partials/theme_color.blade.php from the Business Settings theme, so
   the toggle re-tints with the rest of the UI. No hardcoded accent fallback is
   used here — the variable is always defined by that partial. The resting
   stroke is a neutral slate (the template's own body-text colour) so the icon
   reads as chrome rather than as a stray coloured element on the white header. */
.header .navbar-item.theme-brand .sidebarCollapse {
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
    background: transparent;
    color: #3b3f5c;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.header .navbar-item.theme-brand .sidebarCollapse:hover,
.header .navbar-item.theme-brand .sidebarCollapse:focus-visible,
.header .navbar-item.theme-brand .sidebarCollapse.is-open {
    color: var(--main-color);
}

/* No background on any state — the bars alone carry the hover/open feedback
   through the colour shift above. */
.header .navbar-item.theme-brand .sidebarCollapse:hover,
.header .navbar-item.theme-brand .sidebarCollapse:focus-visible {
    transform: scale(1.06);
}

.header .navbar-item.theme-brand .sidebarCollapse:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-color) 45%, transparent);
}

.header .navbar-item.theme-brand .sidebarCollapse:active {
    transform: scale(0.96);
}


/* Three horizontal bars — same shape in both states. */
.header .navbar-item.theme-brand .sidebarCollapse-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: background-color 180ms ease;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span:nth-child(1) {
    top: 0;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span:nth-child(2) {
    top: 6px;
}

.header .navbar-item.theme-brand .sidebarCollapse-icon span:nth-child(3) {
    top: 12px;
}

/* The bars stay three horizontal bars in both states — no fold-into-X. The open
   state is signalled by the background tint and colour shift above only. */

/* Dark mode: light neutral at rest (all.css does the same for the sub-header
   copy), lifted theme colour on hover/open so the tint still reads. */
.darkmode .header .navbar-item.theme-brand .sidebarCollapse {
    color: #e0e6ed;
}

.darkmode .header .navbar-item.theme-brand .sidebarCollapse:hover,
.darkmode .header .navbar-item.theme-brand .sidebarCollapse:focus-visible,
.darkmode .header .navbar-item.theme-brand .sidebarCollapse.is-open {
    color: color-mix(in srgb, var(--main-color) 65%, #fff);
}

/* Side menu itself — all.css ships a 0.6s catch-all transition, which reads as a
   slow drift rather than a snap-free open. Match the toggle's timing. */
.main-container .sidebar-wrapper {
    transition: left 180ms ease, width 180ms ease;
}

.main-container > #content {
    transition: margin-left 180ms ease;
}

/* Narrow viewports (and high zoom, which shrinks the CSS viewport the same way)
   — tighten the brand inset to match all.css's own <=991px value. Below 767px
   all.css hides `li.theme-text`, so flex-start keeps the toggle beside the logo
   instead of leaving it stranded where space-between used to put it. */
@media (max-width: 991px) {
    .header .navbar-item.theme-brand {
        gap: 8px;
        padding: 0.9px 0 0.9px 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .header .navbar-item.theme-brand .sidebarCollapse,
    .header .navbar-item.theme-brand .sidebarCollapse-icon span,
    .main-container .sidebar-wrapper,
    .main-container > #content {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Sale line table (POS, Add sale, Edit sale, Duplicate sale)

   The table carries three extra columns (issued quantity/date/status) on top of
   the original ones. The goal here is that every column stays on screen: the
   controls are condensed so the full set fits the pane at normal desktop widths,
   and the wrapper only falls back to scrolling when the viewport is genuinely
   too narrow. Note that Bootstrap's own .table-responsive rule is not part of
   this build's desktop stylesheet, so the overflow is declared explicitly -
   without it the table simply spilled out of .pos_product_div and the trailing
   columns were clipped out of view.
   --------------------------------------------------------------------------- */
.pos_product_div .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 0;
    margin-bottom: 0;
}

#pos_table {
    width: 100%;
    table-layout: auto;
}

#pos_table > thead > tr > th,
#pos_table > tbody > tr > td {
    vertical-align: middle;
    white-space: normal;
    padding: 5px 4px;
}

/* Condensed controls: this is what buys the room for all the columns. */
#pos_table .form-control {
    height: 30px;
    padding: 4px 6px;
    font-size: 13px;
}

#pos_table textarea.form-control {
    height: auto;
}

#pos_table .input-group-addon,
#pos_table .input-number .btn {
    padding: 4px 7px;
    font-size: 13px;
}

/* Quantity: the spinner buttons take only what they need so the input, and the
   number inside it, stay fully readable. */
#pos_table > tbody > tr > td.pos_quantity_td {
    width: 125px;
    min-width: 125px;
}

#pos_table .input-number.pos_quantity_group {
    display: table;
    width: 100%;
    margin: 0;
}

#pos_table .input-number.pos_quantity_group > .input-group-btn {
    width: 1%;
    white-space: nowrap;
}

#pos_table .input-number.pos_quantity_group > input.pos_quantity {
    width: 100%;
    min-width: 50px;
    text-align: center;
}

#pos_table > tbody > tr > td.pos_issued_quantity_td {
    width: 85px;
    min-width: 85px;
}

#pos_table > tbody > tr > td.pos_issued_quantity_td input {
    text-align: center;
}

#pos_table > tbody > tr > td.pos_issued_date_td {
    width: 150px;
    min-width: 150px;
}

#pos_table > tbody > tr > td.pos_issued_date_td .input-group {
    width: 100%;
    margin: 0;
}

#pos_table > tbody > tr > td.pos_issued_status_td {
    width: 110px;
    min-width: 110px;
}

/* Tax and price-inc-tax: with `table-layout: auto` these two carry the least
   content of any column, so the browser squeezed them down to a sliver where the
   tax dropdown was unreadable. They keep a floor wide enough to read; when inline
   tax is off the `hide` class still removes them entirely. */
#pos_table > thead > tr > th.pos_tax_td,
#pos_table > tbody > tr > td.pos_tax_td {
    width: 130px;
    min-width: 130px;
}

#pos_table > thead > tr > th.pos_price_inc_tax_td,
#pos_table > tbody > tr > td.pos_price_inc_tax_td {
    width: 110px;
    min-width: 110px;
}

/* Discount: the cell stacks the amount input over a "Fixed / Percentage" select. It
   carried no width of its own while the columns on either side of it do, so the browser
   settled the leftover width on it and cut "Percentage" off mid-word. The floor is what
   the longer of the two labels needs at this font size, plus the dropdown arrow. */
#pos_table > thead > tr > th.pos_discount_td,
#pos_table > tbody > tr > td.pos_discount_td {
    width: 120px;
    min-width: 120px;
}

/* Bootstrap 3 gives `select.input-sm` a 30px line-height (an old IE height workaround).
   Against the condensed 30px control height above that leaves a 20px content box holding
   a 30px line box, so the label was drawn taller than the space it had and came out
   clipped - "Lot & Expiry" lost its lower edge. Let the line box match its container. */
#pos_table select.form-control {
    line-height: normal;
}

/* Lot & Expiry sits in the product cell, which has no width of its own either - it takes
   whatever the other columns leave. `.form-control` stretches the select to 100% of that,
   so it shrank with the cell and clipped its own label. */
#pos_table select.lot_number {
    min-width: 150px;
}

/* select2 inside a table cell collapses to 0px until it is told otherwise. */
#pos_table .select2-container {
    width: 100% !important;
    min-width: 90px;
}

#pos_table .select2-container .select2-selection--single {
    height: 30px;
}

#pos_table .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    font-size: 13px;
}

#pos_table .select2-container .select2-selection--single .select2-selection__arrow {
    height: 28px;
}

/* Validation messages wrap in place instead of widening their column. */
#pos_table label.error {
    display: block;
    white-space: normal;
    font-size: 12px;
}

/* Below tablet width the columns cannot all fit, so scroll rather than clip. */
@media (max-width: 991px) {
    .pos_product_div {
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------------------------
   Return line table (Sell return > Add sale return)

   The screen was rebuilt on the same widget/grid markup as Edit sale, so the
   line table is given the same treatment as #pos_table above: condensed
   controls, vertically centred cells and a wrapper that scrolls instead of
   clipping. The columns are declared here rather than in the row partial
   because purchase_return/partials/product_table_row is shared with the
   purchase return screen and must keep rendering unchanged there.
   --------------------------------------------------------------------------- */
.sell_return_product_div .table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 0;
    margin-bottom: 0;
}

#sell_return_product_table {
    width: 100%;
    table-layout: auto;
}

#sell_return_product_table > thead > tr > th,
#sell_return_product_table > tbody > tr > td {
    vertical-align: middle;
    white-space: normal;
    padding: 5px 4px;
}

#sell_return_product_table .form-control {
    height: 30px;
    padding: 4px 6px;
    font-size: 13px;
    display: inline-block;
    width: 100%;
}

/* The row partial prints the unit short name ("Pc(s)", "Kg", ...) straight
   after the quantity input. A full-width block .form-control pushed that label
   onto a line of its own, so the input is sized to leave room for it. */
#sell_return_product_table > thead > tr > th:nth-last-child(4),
#sell_return_product_table > tbody > tr > td:nth-last-child(4) {
    width: 140px;
    min-width: 140px;
}

#sell_return_product_table > tbody > tr > td input.product_quantity {
    width: 75px;
    margin-right: 4px;
    text-align: center;
}

/* The two amount columns carry the least content, so with `table-layout: auto`
   the browser squeezed them under the product name. They keep a floor wide
   enough to read a formatted amount. */
#sell_return_product_table > thead > tr > th:nth-last-child(2),
#sell_return_product_table > tbody > tr > td:nth-last-child(2),
#sell_return_product_table > thead > tr > th:nth-last-child(3),
#sell_return_product_table > tbody > tr > td:nth-last-child(3) {
    width: 130px;
    min-width: 130px;
}

#sell_return_product_table > tbody > tr > td input.product_unit_price,
#sell_return_product_table > tbody > tr > td input.product_line_total {
    text-align: right;
}

/* The delete column only holds an icon; without a width of its own it took a
   share of the leftover space and left the icon floating in an empty cell. */
#sell_return_product_table > thead > tr > th:last-child,
#sell_return_product_table > tbody > tr > td:last-child {
    width: 40px;
    min-width: 40px;
    text-align: center;
}

/* Validation messages wrap in place instead of widening their column. */
#sell_return_product_table label.error {
    display: block;
    white-space: normal;
    font-size: 12px;
}

@media (max-width: 991px) {
    .sell_return_product_div {
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------------------------
   Sale line table in the "View sale / View sales order" modal
   (sale_pos/show + sale_pos/res_show -> partials/sale_line_details).

   The row carries up to thirteen columns. Bootstrap's own .table-responsive rule
   is not part of this build's desktop stylesheet, so the wrapper never scrolled:
   the table was forced down to the modal width and the browser resolved that by
   breaking header text mid-word, which is what made "Product" collapse to a
   letter-per-line stack running into the cell beside it. Restoring the overflow
   on the wrapper, and keeping the headers on one line, lets the table take the
   width it actually needs. Nothing is hidden - the wrapper scrolls instead.
   --------------------------------------------------------------------------- */
.sale-line-details-wrapper {
    width: 100%;
    overflow-x: auto;
}

.sale-line-details-table {
    width: 100%;
    table-layout: auto;
}

.sale-line-details-table > tbody > tr > th,
.sale-line-details-table > tbody > tr > td {
    vertical-align: top;
    padding: 6px 8px;
    /* Long words (SKUs, unbroken product names) wrap inside their own cell
       rather than spilling over the neighbouring column. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Headers stay on a single line: they are what the column width is measured
   against, so this is what stops them being crushed in the first place. */
.sale-line-details-table > tbody > tr > th {
    white-space: nowrap;
    vertical-align: middle;
}

/* Value columns need a readable floor - amounts must not wrap onto two lines. */
.sale-line-details-table > tbody > tr > td {
    min-width: 80px;
}

/* Product carries by far the most text (name, variation, SKU, brand, note,
   descriptions, warranty, kitchen status), so it gets the room to show it. */
.sale-line-details-table > tbody > tr > th.sale-line-product-col,
.sale-line-details-table > tbody > tr > td.sale-line-product-col {
    min-width: 240px;
    white-space: normal;
}

/* The serial-number column only ever holds a couple of digits. */
.sale-line-details-table > tbody > tr > td:first-child {
    min-width: 32px;
}

/* Printing has no scrollbar to fall back on, so let everything wrap there. */
@media print {
    .sale-line-details-wrapper {
        overflow-x: visible;
    }

    .sale-line-details-table > tbody > tr > th,
    .sale-line-details-table > tbody > tr > td {
        min-width: 0;
        white-space: normal;
    }
}

.form-grid-field {
    margin-bottom: 24px;
}

.form-grid-field > .form-group,
.form-grid-field > .form-grid-panel {
    margin-bottom: 0;
}

/* Labels: identical height and bottom spacing in every column. */
.form-grid > [class*="col-"] > .form-group > label,
.form-grid .form-grid-label {
    display: inline-block;
    margin-bottom: 8px;
    min-height: 22px;
    line-height: 22px;
    font-weight: 600;
    font-size: 13px;
}

/* Info icons rendered by the show_tooltip directive sit right after the label
   text; give them one consistent gap across the whole form. */
.form-grid .hover-q {
    margin-left: 6px;
    vertical-align: middle;
}

/* One height for every single-value control so input groups, plain inputs and
   select2 line up across columns. */
.form-grid .form-control:not(textarea):not([multiple]),
.form-grid .select2-container .select2-selection--single {
    height: 38px;
}

.form-grid .select2-container .select2-selection--multiple {
    height: auto;
    min-height: 38px;
}

.form-grid .select2-container {
    width: 100% !important;
}

.form-grid textarea.form-control {
    min-height: 38px;
}

/* Inline add-on / button cells vertically centred against the control. */
.form-grid .input-group-addon,
.form-grid .input-group-btn {
    vertical-align: middle;
}

.form-grid .input-group-addon {
    height: 38px;
    line-height: 1;
    text-align: center;
}

.form-grid .input-group-btn > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Two controls sharing one field (e.g. pay term = number + unit), previously
   two floated `.form-control`s separated by a <br>. */
.form-grid-split {
    display: flex;
    align-items: center;
}

.form-grid-split > .width-40 {
    flex: 0 0 40%;
    max-width: 40%;
    margin-right: 8px;
}

.form-grid-split > .width-60 {
    flex: 1 1 auto;
}

/* Checkbox / radio groups that must line up with the inputs beside them. */
.form-grid-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 38px;
    margin: 0;
}

.form-grid-inline > label {
    margin-bottom: 0;
    margin-right: 16px;
    font-weight: 400;
}

.form-grid-inline > label:last-child {
    margin-right: 0;
}

/* Labelled section card, for grouping related fields inside a form. */
.form-grid-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background-color: #fbfcfe;
}

.form-grid-panel-title {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e6ed;
    font-size: 14px;
    font-weight: 600;
}

.form-grid-panel .form-group:last-child {
    margin-bottom: 0;
}

.form-grid .form-text {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12px;
}

/* Read-only address summary (billing / shipping on the Add Sale screen). */
.address-summary {
    padding: 16px;
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background-color: #fbfcfe;
    font-size: 13px;
    line-height: 1.6;
}

.address-summary-item + .address-summary-item {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e0e6ed;
}

/* Full-width variant: the two addresses sit side by side and share a vertical
   rule, so the card stays one input-row tall instead of towering over the
   fields beside it. */
.address-summary-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
}

.address-summary-inline > .address-summary-item {
    flex: 1 1 240px;
    min-width: 0;
}

.address-summary-inline > .address-summary-item + .address-summary-item {
    margin-top: 0;
    padding-top: 0;
    padding-left: 32px;
    border-top: 0;
    border-left: 1px dashed #e0e6ed;
}

/* Stacked again once the two columns would be too narrow to read. */
@media (max-width: 575.98px) {
    .address-summary-inline > .address-summary-item + .address-summary-item {
        margin-top: 14px;
        padding-top: 14px;
        padding-left: 0;
        border-top: 1px dashed #e0e6ed;
        border-left: 0;
    }
}

.address-summary-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888ea8;
}

.address-summary-value {
    color: #515365;
    word-break: break-word;
}

.address-summary-value:empty::before {
    content: "\2014";
    color: #b0b6c4;
}

/* Collapse to a single column without losing the rhythm or alignment. */
@media (max-width: 767.98px) {
    .form-grid-field {
        margin-bottom: 20px;
    }

    .form-grid-split {
        flex-wrap: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   POS TOP TOOLBAR (layouts/partials/header-pos.blade.php)
   Lives here rather than in the POS create page's <style> block because the same
   partial renders on pos/create, pos/{id}/edit, pos/payment and pos/duplicate-sale.
   Only the create page carried the styles, so on the other three the quick-action
   buttons fell back to `float-right` + mixed m-5/m-6/mt-10 margins and overlapped
   the location line. Every selector here is POS-only markup, so it cannot leak.
   --------------------------------------------------------------------------- */
.pos-header {
    padding: 10px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e8eaf0;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .04);
}

.pos-header > .row {
    align-items: center;
}

.pos-header p,
.pos-header .pos-header-location {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.pos-header .m-6 {
    margin: 0 !important;
    align-items: center;
}

/* The location select is wrapped in a `style="width:45%"` div in the markup;
   inside the flex line that percentage resolves against the whole line and
   crowded the date beside it. A width floor keeps it readable and lets the
   date and keyboard hint sit after it. */
.pos-header .pos-header-location-select {
    width: auto !important;
    min-width: 190px;
    margin-bottom: 0 !important;
}

.pos-header #select_location_id {
    min-width: 180px;
}

.pos-header .curr_datetime {
    color: #475467;
    font-weight: 500;
    background: #f2f4f7;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 16px;
    white-space: nowrap;
}

.pos-header .fa-keyboard {
    font-size: 22px;
    margin-left: 5px;
    cursor: help;
}

/* Right-hand quick actions: one flex row, uniform buttons, no floats. */
.pos-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.pos-header-actions .btn {
    float: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px;
    height: 40px;
    min-width: 40px;
    padding: 0 13px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.pos-header-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(16, 24, 40, .22);
    filter: brightness(1.05);
    color: #fff;
}

.pos-header-actions .btn:active {
    transform: translateY(0);
    filter: brightness(.97);
}

.pos-header-actions .btn strong {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pos-header-actions .btn i {
    font-size: 15px !important;
    margin: 0;
    line-height: 1;
}

/* The ripple effect needs `overflow: hidden` on these buttons, which means a
   label that wraps is silently cut in half. Keeping labels on one line lets the
   button grow to fit instead - "Add Expense" and "Checkout Multi Pay" were both
   being cropped. */
.pos-header-actions .btn,
.pos-form-actions .btn {
    white-space: nowrap;
}

.pos-header-actions .btn strong,
.pos-form-actions .btn strong {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .pos-header-actions {
        justify-content: flex-start;
        margin-top: 8px;
    }
}

@media (max-width: 767px) {
    .pos-header .m-6 {
        flex-wrap: wrap;
    }

    .pos-header-actions {
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
   Phone-width horizontal overflow.

   At 375px the admin header forced the whole document to ~434px wide, so every
   page carried a horizontal scrollbar and content sat partly off-screen. The
   cause was .navbar-item.flex-row: it is flex/nowrap and its items measure more
   than the viewport, so it could not shrink and instead stretched the page.
   DataTables' .pagination (≈368px of page links) did the same on list screens.

   Confining both to the viewport - the nav scrolls within itself, the pager
   wraps onto a second line - keeps the page itself at device width. Scoped to
   phones so tablet/desktop layout is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .header .navbar-item.flex-row {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header,
    .header-container {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .dataTables_wrapper .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* DataTables' pager is display:inline-flex/nowrap from the vendor bundle, which beat
   the wrap rule above, so on a phone its ~368px of page links still stretched the
   document to 434px. !important is deliberate: this is the narrow phone-only override
   of a vendor declaration we do not otherwise control. */
@media (max-width: 575.98px) {

    .dataTables_wrapper .pagination,
    ul.pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        max-width: 100%;
    }
}

/* The DataTables search box is a fixed-width input inside a col-md-3. From ~768px up
   the column is narrower than the input, so the input hung ~50px past it and pushed a
   scrollbar onto the page. Capping it at the column width costs nothing on wide
   screens, where the column is already the larger of the two. */
.dataTables_filter input.form-control,
.dataTables_filter input[type="search"] {
    max-width: 100%;
}

/* .box-body pads 10px but a Bootstrap .row pulls -15px, so a row placed directly in a
   box escapes 5px each side - enough to put a horizontal scrollbar on the POS
   open-register screen at every width. Matching the row's gutters to the padding that
   is actually there keeps it inside. Scoped to this form rather than all .box-body
   rows so no other screen shifts. */
#add_cash_register_form .box-body > .row {
    margin-left: -10px;
    margin-right: -10px;
}

/* A flex item of the page header's .navbar, which lays its children out from
   flex-start; the auto margin eats the free space between the title and here,
   parking the widget on the trailing edge (the left one under dir="rtl", which
   is the mirrored equivalent). The navbar centres its items, so no top margin
   is needed to line it up with the heading. */
.settings-search {
    width: 360px;
    max-width: 100%;
    margin-left: auto;
}

.settings-search .input-group {
    width: 100%;
}

/* The select2 widget is taller than a bare input; match the addon to it so the
   icon cell does not sit short against the box. */
.settings-search .select2-container .select2-selection--single {
    height: 38px;
}

.settings-search .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.settings-search .select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

@media (max-width: 767px) {
    .settings-search {
        width: 100%;
    }
}

.sidebar-wrapper {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

#sidebar .sidebar-menu-search {
    box-sizing: border-box;
    height: 46px;
    padding: 8px 12px 6px;
}

#sidebar.has-menu-search ul.menu-categories {
    height: calc(100vh - 127px - 46px) !important;
}

#sidebar.has-menu-search ul.menu-categories.ps {
    height: calc(100vh - 63px - 46px) !important;
}

/* Below 992px all.css re-pins the list to calc(100vh - 10px); same correction. */
@media (max-width: 991px) {
    #sidebar.has-menu-search ul.menu-categories.ps {
        height: calc(100vh - 10px - 46px) !important;
    }
}

#sidebar.has-menu-search ul.menu-categories li.menu:first-child > .dropdown-toggle {
    margin-top: 2px;
}


#sidebar .sidebar-menu-search-box {
    position: relative;
    display: block;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

#sidebar .sidebar-menu-search-box:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#sidebar .sidebar-menu-search-box:focus-within {
    background-color: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.65);
}

#sidebar .sidebar-menu-search-box .sidebar-menu-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
}

#sidebar .sidebar-menu-search input {
    width: 100%;
    height: 30px;
    padding: 0 26px 0 28px;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    letter-spacing: 1px;
}

#sidebar .sidebar-menu-search input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

#sidebar .sidebar-menu-search-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

#sidebar .sidebar-menu-search-clear:hover {
    color: #fff;
}

#sidebar .sidebar-menu-search-empty {
    padding: 2px 14px 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

/* A dropdown that only survived the filter because of its children is force
   expanded while searching; the arrow would otherwise still point right. */
#sidebar ul.menu-categories li.menu-search-expanded > .dropdown-toggle .sidemenu-right-icon {
    transform: rotate(90deg);
    transition: all ease 0.4s;
}

/* Mirror the icon/clear button for the RTL locales (<html dir="rtl">). */
[dir="rtl"] #sidebar .sidebar-menu-search-box .sidebar-menu-search-icon {
    left: auto;
    right: 8px;
}

[dir="rtl"] #sidebar .sidebar-menu-search input {
    padding: 0 28px 0 26px;
}

[dir="rtl"] #sidebar .sidebar-menu-search-clear {
    right: auto;
    left: 2px;
}

[dir="rtl"] #sidebar ul.menu-categories li.menu-search-expanded > .dropdown-toggle .sidemenu-right-icon {
    transform: rotate(-90deg);
}

/* all.css forces every sidebar element onto one clipped line
   (#sidebar * { overflow: hidden; white-space: nowrap; }), so long submenu
   labels like "Import Sales Commission Agents" were silently cut at the
   sidebar edge. Let submenu link text wrap onto further lines instead; the
   bullet (a:before, absolutely positioned) stays on the first line. */
#sidebar ul.menu-categories ul.submenu > li a {
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}


@media (max-width: 400px) {
    .sub-header-container {
        padding: 0 12px !important;
    }

    .sub-header-container .navbar {
        flex-wrap: wrap;
    }

    .sub-header-container .navbar > .navbar-nav {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sub-header-container .navbar > .navbar-nav > li {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .sub-header-container .page-header,
    .sub-header-container .breadcrumb-one .breadcrumb {
        min-width: 0;
        max-width: 100%;
    }

    .sub-header-container .breadcrumb-one {
        display: block;
        min-width: 0;
        max-width: 100%;
    }

    .sub-header-container .breadcrumb-one .breadcrumb {
        flex-wrap: wrap;
    }

    .sub-header-container .breadcrumb-one .breadcrumb-item {
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .sub-header-container .breadcrumb-one .breadcrumb-item .h4,
    .sub-header-container .breadcrumb-one .breadcrumb-item a,
    .sub-header-container .breadcrumb-one .breadcrumb-item span {
        font-size: 1.05rem;
        line-height: 1.35;
    }
}

@media (max-width: 767px) {
    .header-container.fixed-top {
        position: sticky;
    }

    #content {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
 * Pay Due modal - due breakdown
 *
 * The modal used to show a partial "due" (purchase only) beside an amount box
 * prefilled with purchase due + opening balance due, with nothing labelled as
 * the total. These rows are a single reconciled column that ends in the one
 * figure matching both the amount box and the ledger's balance due.
 * ------------------------------------------------------------------ */
.due-summary {
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden;
}

.due-summary__party {
    padding: 12px 16px;
    background: #fbfcfe;
    border-bottom: 1px solid #e0e6ed;
}

.due-summary__party-role {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.due-summary__party-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.35;
    word-break: break-word;
}

.due-summary__party-sub {
    font-size: 13px;
    color: #888;
    word-break: break-word;
}

.due-summary__lines {
    padding: 4px 16px 14px;
}

.due-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
}

.due-summary__label {
    color: #555;
}

/* Tabular figures so the column of amounts lines up digit for digit. */
.due-summary__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    text-align: right;
    white-space: nowrap;
    color: #333;
}

.due-summary__op {
    color: #999;
    margin-right: 3px;
}


.due-summary__row--subtotal {
    border-top: 1px solid #e0e6ed;
    margin-top: 3px;
    padding-top: 10px;
    font-weight: 600;
}

.due-summary__row--subtotal .due-summary__label {
    color: #333;
}

.due-summary__row--total {
    align-items: center;
    border-top: 2px solid #D9BB54;
    margin-top: 5px;
    padding-top: 11px;
}

.due-summary__row--total .due-summary__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #333;
}

/* Dark on white rather than the gold itself - the accent carries in the rule
   above, which does not have to pass a contrast ratio. */
.due-summary__row--total .due-summary__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
}

.due-amount-hint {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.45;
}

.due-amount-hint__text {
    display: block;
}

/* The reset sits inside muted help text, so it needs its own colour to read as
   something you can click rather than more of the sentence above it. */
.due-amount-hint a.pay_full_due {
    display: inline-block;
    margin-top: 3px;
    color: #357ca5;
    font-weight: 600;
    white-space: nowrap;
}

.due-amount-hint a.pay_full_due:hover,
.due-amount-hint a.pay_full_due:focus {
    color: #2a6488;
    text-decoration: underline;
}

.due-amount-hint a.pay_full_due .fa-sync {
    font-size: 10px;
    margin-right: 2px;
}

[dir="rtl"] .due-amount-hint a.pay_full_due .fa-sync {
    margin-right: 0;
    margin-left: 2px;
}

/* The modal is narrow; let the total wrap under its label instead of
   squeezing the amount on small screens. */
@media (max-width: 480px) {
    .due-summary__row--total {
        display: block;
    }

    .due-summary__row--total .due-summary__value {
        display: block;
        text-align: left;
        margin-top: 2px;
    }
}

[dir="rtl"] .due-summary__op {
    margin-right: 0;
    margin-left: 3px;
}

[dir="rtl"] .due-summary__value {
    text-align: left;
}

[dir="rtl"] .due-summary__row--total .due-summary__value {
    text-align: left;
}

@media (max-width: 480px) {
    [dir="rtl"] .due-summary__row--total .due-summary__value {
        text-align: right;
    }
}

#sidebar ul.menu-categories ul.submenu li > [data-active="true"]:before {
    background-color: #fff !important;
}

#sidebar ul.menu-categories ul.submenu > li.active > a,
#sidebar ul.menu-categories ul.submenu > li > a[data-active="true"],
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active > a,
#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li > a[data-active="true"] {
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0)
    );
    color: #fff;
    font-weight: 600;
    border-radius: 0;
}

/* ---- Roles & permissions: module cards ----

   The permission tree used to be one long stack, which is why it read as clutter. A
   provider's modules are laid out as equal-width cards instead: an auto-fit grid, so
   every card in a row is the same width and every row is full rather than ragged. A
   narrow viewport gets fewer columns of the same width, never a squashed one, and the
   strip scrolls sideways before a card shrinks below what its labels need. */

/* Heading and Select All on their own full-width bar. Sharing a Bootstrap row with the
   permissions column is what pushed the cards over to the right of the form. */
/* .row is display:flex in this theme (assets/css/all.css), so this bar and the card
   strip below it are flex ITEMS. Without an explicit 100% basis a flex item shrinks to
   its content and sits beside its sibling - which is how the title and Select All ended
   up squeezed to the right of the permissions instead of on a line of their own.
   order:-1 keeps the bar first whatever the source order does. */
.role-perm-module-provider > .role-perm-provider-head {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    order: -1;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f4;
}

/* The title and Select All are positioned by Bootstrap's own pull-left / pull-right in
   the markup, because this stylesheet loads BEFORE vendor.css and anything it declares
   here is overridden. Only spacing is set from this side. */
.role-perm-module-provider > .role-perm-provider-head h4 {
    margin: 0;
    line-height: 28px;
}

.role-perm-module-provider > .role-perm-provider-head .checkbox {
    margin: 0;
}

.role-perm-module-provider > .role-perm-modules {
    display: grid;
    float: none;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    align-items: start;
    /* Below one card's minimum the strip scrolls rather than crushing the cards. */
    overflow-x: auto;
}

/* An unnamed group is a provider returning a flat permission list (Manufacturing, CRM,
   Project). It has no cards to lay out, so it spans the strip and renders as before. */
.role-perm-module-provider > .role-perm-modules > .role-perm-module:not(.role-perm-module--named) {
    grid-column: 1 / -1;
}

.role-perm-module--named {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e4e7ea;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.role-perm-module-head {
    padding: 9px 12px;
    background: #f4f6f8;
    border-bottom: 1px solid #e4e7ea;
}

.role-perm-module-title,
.role-perm-submodule-title {
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

.role-perm-module-title {
    font-weight: 600;
    font-size: 13px;
}

.role-perm-module--named > .role-perm-submodule {
    padding: 8px 12px 10px;
}

.role-perm-submodule-head {
    margin: 4px 0 4px;
}

.role-perm-submodule-title {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6c757d;
}

/* iCheck replaces the input with a styled span, so the gap between box and label has to
   come off the widget rather than the raw input. */
.role-perm-module-title .icheckbox_square-blue,
.role-perm-submodule-title .icheckbox_square-blue {
    flex: 0 0 auto;
    margin: 0;
}

/* A sub module's permissions sit indented under its heading, so the nesting is visible
   at a glance rather than inferred from the wording. */
.role-perm-submodule-head ~ .role-perm-section {
    padding-left: 16px;
    border-left: 2px solid #eef1f4;
}

.role-perm-section {
    margin-bottom: 8px;
}

.role-perm-section:last-child {
    margin-bottom: 0;
}

.role-perm-section-head {
    font-size: 10px;
    color: #adb5bd;
    margin-bottom: 2px;
}

.role-perm-section-title {
    font-weight: 600;
}

.role-perm-section-sep {
    margin: 0 4px;
}

/* The permission rows are col-md-12 inside a card, so the grid gutters have to go or
   every label sits inset by a column's padding. */
.role-perm-module--named .role-perm-options > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

.role-perm-module--named .role-perm-options .checkbox {
    margin: 2px 0;
}

.role-perm-module--named .role-perm-text {
    font-size: 12px;
}