@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: 10px 16px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: #D1D5DC;
  width: 100%;
  z-index: 1000;
}
/* The bar is a bare <div> in a .row, so as a flex item with no col class it
   shrinks to its content instead of spanning the row. */
.row > .pos-form-actions{
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}
/* The buttons inside used to lay out as floated/inline-block elements: the
   whitespace between tags became a stray 4px here and 0 there, `float-right`
   pulled one button out of the flow onto its own line, and the AdminLTE
   `.btn` margins stacked unevenly wherever a button was `.hide`n by a POS
   setting. One flex row with a single gap keeps every control on the same
   baseline whatever combination of buttons the settings leave visible.
   `.hide` in this build is display:none without !important, so hidden
   buttons drop out of the row rather than leaving a gap. */
.pos-form-actions > .col-md-12{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.pos-form-actions > .col-md-12 > .col-md-12{
  flex: 1 1 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.pos-form-actions .btn{
  float: none !important;
  margin: 0 !important;
}
/* The total pill carries `.btn` too, so it needs its auto margin back after
   that reset - it is what closes the row out on the right-hand end instead of
   leaving the pill wherever the previous button happened to stop. */
.pos-form-actions .pos-total{
  margin-left: auto !important;
}
/* `col-6` is added to every button on a mobile user agent. Outside the phone
   breakpoint that hard 50% basis fought the row's gap - two buttons plus the
   gap overflow 100%, so each one wrapped onto a line of its own and left the
   other half of the bar empty. Let them size to their label here; the phone
   breakpoint puts them back on a 2-up grid. */
.pos-form-actions .btn.col-6{
  flex: 0 1 auto;
  width: auto;
  max-width: none;
}
.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 ";
}

/* The bar used to switch to `position: absolute` under 600px. Nothing between
   it and the viewport is positioned, so it resolved against the initial
   containing block: the bar scrolled away with the page and came to rest on
   top of the sale lines. It stays fixed at every width now - the POS screens
   pad their own bottom (and layouts/partials/footer_pos stacks it above the
   copyright rail) so nothing is trapped behind it. */
.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-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    vertical-align: middle;
    /* Right-hand alignment lives on `.pos-form-actions .pos-total` above, which
       is specific enough to survive the `.btn` margin reset. */
    margin: 0;
}
.pos-total span.number{
    font-size: 26px;
    vertical-align: middle;
    font-weight: bolder;
}

.pos-total span.text{
    font-weight: bolder;
    display: inline-block;
    /* Was a hard 60px. "Total Payable" does not fit in 60px in English, let
       alone in the longer translations, so the label wrapped to two lines and
       made the pill taller than every button beside it. */
    width: auto;
    white-space: nowrap;
    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;
}

/* The native bar below the table is the other half of the same control, so it is given the
   exact same metrics as .top-scrollbar above. Left alone it inherits the global
   ::-webkit-scrollbar rules (square #888 thumb on a #f1f1f1 track, default ~17px tall),
   which reads as a second, heavier scrollbar rather than the twin of the one on top.
   Unscoped for the same reason .top-scrollbar is: tables using scrollX scroll inside
   .dataTables_scrollBody, the rest inside .table-responsive - and on those pages
   .table-responsive is the PARENT of .dataTables_wrapper (DataTables builds its wrapper
   around the table, inside it), so scoping the selector to the wrapper matches nothing. */
.dataTables_scrollBody,
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .35) transparent;
}

.dataTables_scrollBody::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 10px;
}

.dataTables_scrollBody::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

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

.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.top-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, .55);
}

/* Firefox has no ::-webkit hooks, so the top bar needs the same two properties to match. */
.top-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .35) transparent;
}

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

/* The heading line: the heading on the left and, in a paid plan's last week,
   the countdown pill on the right - see home/partials/quota_warning. Wraps
   rather than squeezes, so on a narrow screen the pill simply drops under the
   heading. */
.quota-callout__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 2px 0 3px;
}

.quota-callout__headline .quota-callout__heading { margin: 0; }

/* Takes the callout's own tint and ink, so it is amber in the last week and
   red once the callout turns red, without a colour of its own.
   The end margin keeps it clear of .scroll-bottom-arrow, which is position:
   fixed at the top-right of the viewport and would otherwise sit on top of
   the pill's right end whenever the page is scrolled to the top. */
.quota-callout__expiry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-end: 36px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--quota-tint);
  color: var(--quota-ink);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.quota-callout__expiry strong { font-weight: 700; }
.quota-callout__expiry .las { font-size: 14px; }

.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 pill has wrapped under the heading here, so the corner button is no
     longer beside it. */
  .quota-callout__expiry { margin-inline-end: 0; }
}

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

/* ---------------------------------------------------------------------------
   Admin page canvas

   assets/css/all.css ends up painting `body { background: #fff }` (it declares
   body three times; the last one, ~line 14430, wins), so every admin screen was
   white card on white page - the cards, the header, the side menu and the
   footer all dissolved into one flat sheet and nothing read as a surface.

   A light grey canvas puts the white chrome back on top of something. It is
   scoped to `body.sidebar-mini`, the class layouts/app.blade.php puts on the
   admin shell, because css/app.css is also loaded by the guest/auth layouts
   (bare <body>) and must not repaint those. POS keeps its own canvas: its body
   is `.lockscreen`, not `.sidebar-mini`, and css/pos_standard.css already
   paints `.pos-standard` with --pos-canvas.

   `:not(.darkmode)` because all.css's `body.darkmode { background: #191919 }`
   is (0,1,1) against this rule's (0,3,1) - without the exclusion dark mode
   would come out light grey. Printing is already handled: the @media print
   block further up this file forces `body, html { background: #fff !important }`.
   --------------------------------------------------------------------------- */
body.sidebar-mini:not(.darkmode) {
    --admin-canvas: #f4f6f9;

    /* One card surface for the whole admin. Before this the app drew cards five
       different ways - .widget at 6px radius with a three-layer shadow,
       .box.box-solid at 5px, .card and .panel at 4px, .info-box at 2px, each
       with its own shadow - so no two screens agreed on what a card looked
       like. These four values are the whole definition; every card rule below
       just points at them.

       The shadow is two layers on purpose: the 1px layer is the contact edge
       and the wide one is the cast shadow. A single blurred shadow heavy enough
       to see reads as a grey smear rather than lift - the same reasoning as the
       side menu's elevation. Both are far lighter than the three-layer shadow
       .widget used to carry. */
    --card-surface: #ffffff;
    /* Chosen against the CANVAS, not against the card. #e8ebf1 was picked by
       eye on a white background and looked right there - but a card border's
       whole job is at the edge where the card meets the page, and against
       #f4f6f9 it was only ~11 levels away in every channel, so the cards had
       no outline at all and the "depth separation" was doing nothing. This is
       ~20 levels off the canvas: still a hairline, but one you can see. */
    --card-border: #dde2ea;
    --card-radius: 12px;

    /* Height of the copyright rail. The side menu is sized off this so the two
       meet exactly, so it has to be a known number rather than whatever the
       rail's contents happen to add up to. */
    --app-footer-h: 38px;
    --card-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 4px 12px -4px rgba(16, 24, 40, .07);

    background: var(--admin-canvas);
}

/* Phones: the same radius on a card that is nearly the full width of a small
   screen reads as heavier than it does on a desktop grid. */
@media (max-width: 575px) {
    body.sidebar-mini:not(.darkmode) {
        --card-radius: 10px;
    }
}

/* The breadcrumb bar is page chrome, not a card. all.css gives it
   `background: #fff`, which was invisible on a white page but would now read as
   a stray white band inset 20px from both edges (.sub-header-container pads it,
   so it would not even line up with the header above) - so it goes back to
   sitting directly on the canvas, exactly as it looks today.

   Its separator moves with it: at #f5f5f5 the rule under the breadcrumb was a
   hairline against white, and against the canvas it would disappear entirely.
   This keeps it reading at the same weight it does now. */
body.sidebar-mini:not(.darkmode) .sub-header-container .navbar {
    background: transparent;
    border-bottom-color: var(--card-border);
}

/* `.box` is AdminLTE's card. Nothing in any loaded stylesheet gives it a
   surface - it has only ever been white because the page behind it was. Most
   admin screens reach it through components/widget.blade.php, whose
   `.widget-header` / `.widget-content-area` children are painted white and
   cover it; the ~50 places that write `class="box box-solid"` (or box-primary,
   or a bare box) by hand have no such children and would have turned grey.
   Naming the surface here fixes those without touching the widget ones, which
   were already white. */
body.sidebar-mini:not(.darkmode) .box {
    background-color: var(--card-surface);
}

/* ---------------------------------------------------------------------------
   Card surfaces

   Every card class the admin actually uses, given the one definition above.
   Scoped to body.sidebar-mini for the same reasons the canvas is: css/app.css
   is also loaded by the guest/auth layouts, and POS (body.lockscreen) has its
   own card language in css/pos_standard.css which this must not reach into.

   The scope also does the specificity work - `body.sidebar-mini:not(.darkmode)
   .panel` is (0,3,1) against vendor.css's `.panel` at (0,1,0), so these win
   without !important and without depending on stylesheet order.
   --------------------------------------------------------------------------- */
body.sidebar-mini:not(.darkmode) .widget,
body.sidebar-mini:not(.darkmode) .box.box-solid,
body.sidebar-mini:not(.darkmode) .card,
body.sidebar-mini:not(.darkmode) .panel,
body.sidebar-mini:not(.darkmode) .info-box {
    background-color: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

/* assets/css/all.css marks this one !important, so it has to be answered in
   kind. The scope still out-specifies it, so the value below is the one that
   applies rather than whichever loaded last. */
body.sidebar-mini:not(.darkmode) .box.box-solid {
    box-shadow: var(--card-shadow) !important;
}

/* ...which would otherwise out-rank `.box-shadow-none`, the opt-out utility
   assets/css/all.css ships for turning a card's lift off. Nothing uses it
   today, but an !important rule that quietly beats an !important utility is a
   trap to walk into later. */
body.sidebar-mini:not(.darkmode) .box.box-solid.box-shadow-none,
body.sidebar-mini:not(.darkmode) .widget.box-shadow-none {
    box-shadow: none !important;
}

/* .widget carries no background of its own - its three children are each
   painted white and each round their own two corners at 6px. Rounding the
   parent to 12px would leave those 6px corners poking through it. Giving the
   surface to .widget itself and letting the children be transparent means the
   card has exactly one set of corners, with no overflow:hidden (which would
   clip the action dropdowns and select2 menus that open inside these cards). */
body.sidebar-mini:not(.darkmode) .widget .widget-header,
body.sidebar-mini:not(.darkmode) .widget .widget-content-area,
body.sidebar-mini:not(.darkmode) .widget .widget-footer {
    background-color: transparent;
    border-radius: 0;
}

/* Six views tack `br-6` onto the content area to round the card's bottom by
   hand. assets/css/all.css declares that utility !important, so it survives the
   reset above and would cut a 6px notch into each bottom corner of the 12px
   card. The parent owns the corners now. (`br-6` is used nowhere else in the
   app, so zeroing it here costs nothing elsewhere.) */
body.sidebar-mini:not(.darkmode) .widget .widget-content-area.br-6 {
    border-radius: 0 !important;
}

/* The footer keeps its divider; only the colour moves onto the shared token. */
body.sidebar-mini:not(.darkmode) .widget .widget-footer {
    border-top-color: var(--card-border);
}

/* Bootstrap's and BS3's header/footer strips have a background of their own and
   round to the OLD radius, so they need to follow the card out to 12px or they
   square off the corners they sit in. Less the 1px border, exactly as Bootstrap
   computes its own. */
body.sidebar-mini:not(.darkmode) .card > .card-header:first-child,
body.sidebar-mini:not(.darkmode) .card > .list-group:first-child,
body.sidebar-mini:not(.darkmode) .panel > .panel-heading:first-child {
    border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0;
}

body.sidebar-mini:not(.darkmode) .card > .card-footer:last-child,
body.sidebar-mini:not(.darkmode) .card > .list-group:last-child,
body.sidebar-mini:not(.darkmode) .panel > .panel-footer:last-child {
    border-radius: 0 0 calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px);
}

/* A card inside a card is a section, not a second floating surface - it keeps
   the border and the radius and drops the lift. */
body.sidebar-mini:not(.darkmode) .widget .card,
body.sidebar-mini:not(.darkmode) .widget .panel,
body.sidebar-mini:not(.darkmode) .widget .info-box,
body.sidebar-mini:not(.darkmode) .box.box-solid .card,
body.sidebar-mini:not(.darkmode) .box.box-solid .panel {
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Trailing space under the last card

   .layout-spacing puts 40px of padding UNDER every card so the next one
   clears it. The last card on a page has no next one - only the copyright
   bar - so that 40px shows as a strip of bare canvas between the two.

   The chain is what makes this safe. A plain `.layout-spacing:last-child`
   would also strip the gap from any card that merely ends its own row, and
   pages like account/show stack two card rows - the first card would lose
   its spacing mid-page. Requiring :last-child at every level up to the page
   wrapper means only the card that genuinely ends the page matches: a card
   in a row that is followed by another row fails the chain at that level.
   Eight levels covers the deepest nesting in the app (contact/index, 6).

   The root needs the same care. Most report pages (and the CRM forms) put the
   filters in a section.content of their own, with the table in a sibling
   <section> after it. That filter card ends its section, so the chain matched
   it and the filters sat flush against the table. A section.content followed
   by another section does not end the page, so it is not a root.
   --------------------------------------------------------------------------- */
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > .layout-spacing:last-child,
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > *:last-child > .layout-spacing:last-child,
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > *:last-child > *:last-child > .layout-spacing:last-child,
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > *:last-child > *:last-child > *:last-child > .layout-spacing:last-child,
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > *:last-child > *:last-child > *:last-child > *:last-child > .layout-spacing:last-child,
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > .layout-spacing:last-child,
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > .layout-spacing:last-child,
body.sidebar-mini:not(.darkmode) :where(section.content:not(:has(~ section)), .layout-px-spacing) > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > .layout-spacing:last-child {
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Copyright rail

   The one surface on an admin page that the canvas/card work never reached. It
   stayed a flat white full-bleed band with a #e5e7eb top border - another
   colour that vanishes against the canvas - and its own 24px padding, which
   matches nothing: .layout-px-spacing insets the page 18px on the left and 20px
   on the right, so the copyright line and the Live Chat button each sat a few
   pixels inside the edges of every card above them.

   It stays full-bleed and square. It is pinned chrome, like the header and the
   side menu, not a card - so it gets the shared border token and a hairline
   upward shadow to sit it on the page, rather than rounded corners it should
   not have.

   Scoped here rather than edited in include/footer.blade.php because that
   partial is shared with the POS layout and the signed-out screens, which have
   no canvas behind them. This beats the partial's own <style> on specificity
   (0,5,1) against (0,2,0), so document order does not matter.
   --------------------------------------------------------------------------- */
body.sidebar-mini:not(.darkmode) .footer-wrapper.erp-footer {
    /* The BAND runs the full width of the window; the TEXT starts after the
       side menu. Those are two different things and each earlier attempt got
       one of them at the cost of the other:

         sticky inside #content - text lined up with the cards, but the band
             began at the menu's right edge, so the bottom-left corner of the
             window was menu instead of rail and the rail's top border started
             part-way across.
         fixed and full-bleed  - the corner was filled, but the copyright line
             slid left into the menu's own column, which is not where it
             belongs.

       Fixed gives the band; the padding below gives the text its column back. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Over the menu's 1028, so the band covers the menu's last 38px rather than
       being cut off by it. css/sidebar.css shortens the scrolling list by the
       same amount so no menu item ends up underneath. */
    z-index: 1041;
    box-sizing: border-box;
    min-height: var(--app-footer-h);
    padding-left: 18px;
    padding-right: 20px;
    border-top: 1px solid var(--card-border);
    box-shadow: 0 -1px 2px rgba(16, 24, 40, .04);
}

/* The text's column. 235px is the menu's width (all.css `.sidebar-wrapper`)
   and 18px the page's own gutter (.layout-px-spacing), so the copyright line
   lands on the same vertical as the cards above it. Only while the menu is
   actually there: `.sidebar-closed` is the collapsed state (the class the
   hamburger puts on #container), and below 992px the menu is off-canvas, so in
   both cases the text goes back to the plain 18px above. */
@media (min-width: 992px) {
    body.sidebar-mini:not(.darkmode) .main-container:not(.sidebar-closed) .footer-wrapper.erp-footer {
        padding-left: calc(235px + 18px);
    }
}

/* Fixed means the rail no longer occupies space in the column, so the page has
   to reserve it or the last row of every screen sits behind it. */
body.sidebar-mini:not(.darkmode) #content.main-content {
    padding-bottom: var(--app-footer-h);
}

/* The page gutter narrows to 16px here (all.css .layout-px-spacing), and the
   partial already stacks the rail into a column at the same 16px. Repeat it, or
   the longhands above - which out-specify that shorthand - would drag the rail
   back out of line with the cards on exactly the width where it matters most. */
@media (max-width: 575px) {
    body.sidebar-mini:not(.darkmode) .footer-wrapper.erp-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Dialogs are not cards, but a modal at BS3's 6px radius next to a 12px card is
   exactly the kind of mismatch this is meant to remove. Radius and border come
   from the same tokens; the shadow stays its own, deeper value because a modal
   floats over a backdrop rather than resting on the page (BS3's is
   `0 3px 9px rgba(0,0,0,.5)`, which is a hard black smear). */
body.sidebar-mini:not(.darkmode) .modal-content {
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: 0 20px 48px -12px rgba(16, 24, 40, .28);
}

/* ---------------------------------------------------------------------------
   Modal backdrop - blur the page behind an open modal

   Applied to .modal-backdrop rather than to the page, because blurring the page
   itself is a trap: `filter` on an ancestor makes that ancestor the containing
   block for any `position: fixed` descendant, which would re-anchor the modal,
   the side menu and the copyright rail. Filtering the backdrop leaves the DOM
   and every position alone, and it needs no JavaScript at all - Bootstrap
   already inserts the backdrop on open and removes it on close, so the effect
   arrives and leaves with the modal on its own.

   Deliberately NOT scoped to a particular action. The backdrop is a single
   generic element shared by every modal in the app, so there is nothing on it
   that says "this one came from View"; keying off the trigger would mean
   tagging every call site and would leave the app half blurred. Every modal
   behaves the same way, which is what "consistent across the entire
   application" asks for.

   Why the opacity moves to the colour: vendor.css dims with `background: #000`
   plus `opacity: .5` on the element. Group opacity composites the FILTERED
   backdrop with the unfiltered page underneath, so at .5 the result is half
   blurred and half sharp - a smear rather than a blur. The element goes to full
   opacity and the dimming moves into the colour's alpha, which keeps the same
   weight (.45 against the old .5) and lets the blur read.

   backdrop-filter degrades to no blur on a browser that lacks it; the dim still
   works, so nothing breaks. css/pos_classic.css already relies on it.
   --------------------------------------------------------------------------- */
body.modal-open .modal-backdrop {
    background-color: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* Starting point for the fade, matching .modal-backdrop.fade. */
    opacity: 0;
    transition: opacity .15s linear;
}

/* `.in` is what Bootstrap 3 adds (this build's modal JS); `.show` is the
   Bootstrap 4 name, listed so the rule keeps working if the modal JS is ever
   upgraded with the rest of the BS3 -> BS4 migration. */
body.modal-open .modal-backdrop.in,
body.modal-open .modal-backdrop.show {
    opacity: 1;
}

/* Fixed chrome that outranks the backdrop's z-index of 1040 would otherwise
   stay perfectly sharp on top of the blur, which reads as a rendering fault.
   Dropped behind the backdrop for as long as a modal is open, so it blurs and
   dims with everything else; `.modal-open` is removed on close, so the normal
   stacking comes straight back. */
body.sidebar-mini.modal-open:not(.darkmode) .footer-wrapper.erp-footer,
body.lockscreen.modal-open .footer-wrapper.erp-footer {
    z-index: 1030;
}

body.modal-open .scroll-top-arrow,
body.modal-open .scroll-bottom-arrow {
    z-index: 1030;
}

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

/* ==========================================================================
   Header calculator (layouts/partials/calculator.blade.php)
   --------------------------------------------------------------------------
   The old look came from resources/plugins/calculator/calculator.css, compiled
   into vendor.css: 35x35 square buttons with inset "glow" shadows, laid out with
   Bootstrap grid rows. vendor.css is a build artefact and is not rebuilt here, so
   the new styling lives in app.css, which the layout loads after it. Everything is
   scoped to #calculator, and a few rules carry !important only to beat that
   stylesheet (it sets `border: none !important` on every button).

   The markup is injected as popover content, so these rules also have to hold
   inside .popover-content / .popover-body.
   ========================================================================== */
#calculator.calc-shell {
    --calc-accent: var(--main-color, #3c8dbc);
    width: min(268px, 84vw);
    margin: 0 auto;
    font-family: inherit;
}

#calculator .calc-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    /* The elevated card: a soft ambient shadow plus a light inner top edge. */
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

#calculator .calc-display {
    margin: 0;
}

#calculator .calc-screen,
#calculator input.calc-screen {
    display: block;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #0f172a !important;
    border-radius: 10px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #f8fafc;
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    text-align: right;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
    overflow-x: auto;
}

#calculator .calc-screen::placeholder {
    color: rgba(248, 250, 252, .45);
}

#calculator .calc-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Width/height/padding are reset here because vendor.css pins every #calculator
   button to a 35x35 box, which a grid cell must control instead. */
#calculator .calc-key {
    height: 46px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    /* Raised key: drop shadow below, highlight along the top edge. */
    box-shadow: 0 2px 3px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .95);
    transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}

#calculator .calc-key:hover {
    filter: brightness(1.03);
    box-shadow: 0 4px 8px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* Pressed: the key sinks into the card. */
#calculator .calc-key:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, .22);
}

#calculator .calc-key:focus-visible {
    outline: 2px solid var(--calc-accent) !important;
    outline-offset: 2px;
}

#calculator .calc-key-op {
    background: linear-gradient(180deg, #eef2f7 0%, #dde5ee 100%);
    color: #0f172a;
    font-size: 17px;
}

/* The three coloured keys. Flat fills replace the old inset glow, and the shadow
   is tinted with the key colour so it still reads as raised. */
#calculator .calc-key-danger {
    border-color: #b91c1c !important;
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 2px 4px rgba(185, 28, 28, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

#calculator .calc-key-warning {
    border-color: #b45309 !important;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    box-shadow: 0 2px 4px rgba(180, 83, 9, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* The accent key follows the business theme colour, so the calculator matches the
   header it opens from. */
#calculator .calc-key-equals {
    border-color: transparent !important;
    background: var(--calc-accent);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

#calculator .calc-key-danger:active,
#calculator .calc-key-warning:active,
#calculator .calc-key-equals:active {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
}

/* Zero takes the space the old spacer key used to fill. */
#calculator .calc-key-wide {
    grid-column: span 2;
}

/* #blank only ever existed to pad the old grid row; display:none keeps it out of
   this one entirely (vendor.css merely hides it, which would leave an empty row). */
#calculator #blank {
    display: none !important;
}

/* The popover is only a frame around the card. */
.popover-content:has(#calculator),
.popover-body:has(#calculator) {
    padding: 0;
    background: transparent;
}

@media (max-width: 480px) {
    #calculator .calc-key {
        height: 42px;
        font-size: 15px;
    }

    #calculator .calc-screen,
    #calculator input.calc-screen {
        height: 46px;
        font-size: 21px;
    }
}

/* ---- POS payment modal (sale_pos/partials/payment_modal) ------------------ *
 * Shared by every POS layout (standard, classic, duplicate), so it lives here
 * rather than in pos_standard.css, and is scoped to #modal_payment. */

/* Totals as one strip across the top, in the business theme colour. */
#modal_payment .pos-payment-summary {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--main-color, #3c8dbc);
    color: #fff;
}

#modal_payment .pos-payment-summary__item {
    flex: 1 1 140px;
    min-width: 0;
    padding: 2px 12px;
    border-left: 1px solid rgba(255, 255, 255, .3);
}

#modal_payment .pos-payment-summary__item:first-child {
    border-left: 0;
}

#modal_payment .pos-payment-summary__item strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
}

#modal_payment .pos-payment-summary__item .lead {
    display: block;
    margin: 2px 0 0;
    font-size: 20px;
    line-height: 1.3;
    color: #fff;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    #modal_payment .pos-payment-summary__item {
        flex-basis: 45%;
        padding: 6px 12px;
        border-left: 0;
    }
}