/* START: CENTER LAYOUT CSS */
.vh-40 {
    height: 40vh!important;
}
.vh-50 {
    height: 50vh!important;
}
.vh-60 {
    height: 60vh!important;
}
.vh-65 {
    height: 65vh!important;
}
.vh-70 {
    height: 70vh!important;
}
.vh-75 {
    height: 75vh!important;
}
/* END: CENTER LAYOUT CSS */

/* START: OVERLAY FOR DIAGLOGSMALL ON DIALOG */
#overlay, .overlay {
    background-color: black;
    opacity: 0.5;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 1055;
    transition: opacity 0.15s linear;
}
/* END: OVERLAY FOR DIAGLOGSMALL ON DIALOG */

/* START: DATATABLE CUSTOM CLASS */

/* EA 21 Feb 2024 - Updated styling of filter, select and select2 datatable (start) */
/* Set left alignment for for default search in dataTable */
.dataTables_filter {
    float: left !important;
}
/* Set right alignment for for group of buttons in dataTable */
.dt-buttons.btn-group {
    float: right !important;
}
/* Set inline display for for select in dataTable */
.dataTables_filter select.form-select{
    display: inline-block;
    width: auto;
}
/* Set inline display for select2 in dataTable */
.dataTables_filter .select2-container{
    display: inline-block;
    width: auto !important;
}
/* Added right padding in selection for select2 in dataTable */
.dataTables_filter .select2-container .select2-selection--single .select2-selection__rendered{
    padding-right: 1em;
}
/* Set placeholder for selection for select2 in dataTable */ 
.dataTables_filter .select2-container .select2-selection--single .select2-selection__rendered .select2-selection__placeholder{
    color: #212529;
}
/* EA 21 Feb 2024 - Updated styling of filter, select and select2 datatable (end) */

/* JL 23 Jan 2024 - edited styling for datatable (start) */
/* Checkbox selected row for dataTable */
table.dataTable>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px lightyellow !important;
    /* box-shadow: inset 0 0 0 9999px #F8F9FA !important; */
    /* box-shadow: inset 0 0 0 9999px lightblue !important; */
    color: black !important;
}

/* style for checkbox and tick symbol */
table.dataTable>tbody>tr>td.select-checkbox:before, table.dataTable>tbody>tr>td.select-checkbox:after, table.dataTable>tbody>tr>th.select-checkbox:before, table.dataTable>tbody>tr>th.select-checkbox:after {
    color:black !important;
    font-size: 18px !important;
    font-weight: bold !important;
    width: 15px !important;
    height: 15px !important;
}

table.dataTable>tbody>tr>td.select-checkbox:before, table.dataTable>tbody>tr>th.select-checkbox:before {
    color: black !important;
    margin-top: -6px !important;
    margin-bottom: 6px !important;
    border: 1px solid black !important;
}
/* JL 23 Jan 2024 - edited styling for datatable (end) */

/* JL 27 Mar 2024 - edited dropdown arrows styling for datatable (start) */
table.dataTable td.dt-control::before {
    /* Unicode \2BC8 character for solid right arrow */
    content: "\2BC8";
    font-size: 18px;
}

table.dataTable tr.dt-hasChild td.dt-control::before {
    /* Unicode \2BC6 character for solid down arrow */
    content: "\2BC6";
}
/* JL 27 Mar 2024 - edited dropdown arrows styling for datatable (end) */

/* JL 3 May 2024 - custom class to shift child datatable up (to fill hidden header space) */
/* OutletInventory, FGInventoryItem & WipInventoryItem */
/* .hidden_header_filler {
    position: relative; 
    top: -40px;
} */

/* END: DATATABLE CUSTOM CLASS */

/* START: PAGE BUTTONS CSS */
.page-button {
    border: 0px;
    border-left: 1px solid #ccc;
    color: #6C757D;
    margin: 0;
    padding: 3px 30px;

}

.page-button.active {
    border: 0px;
    border-left: 1px solid #ccc;
    color: black;
}

.page-button:first-child {
    border-left: 0 !important; /* Remove left border on first button */
}

.page-button:hover {
    background-color: #6C757D;
    color: #fff;
    border-radius: 3px !important;
    border-left: 0; /* Remove left border on hover */
}

.page-button:hover ~ .page-button {
    border-left: 0; /* Remove left border on other buttons when one is hovered */
}

/* Add a rule to set the left border when no button is hovered */
:not(:hover) > .page-button {
    border-left: 1px solid #ccc;
}


/* END: PAGE BUTTONS CSS */

/* START: ERROR MESSAGES CSS */
.form-control:has(+ span.error-message:not(:empty)){
    border:2px solid #dc3545;
}
/* END: ERROR MESSAGES CSS */

/* JL 24 Jan 2024 - START: INVENTORY TABS */
.inventory-tab, .pointer-cursor {
    cursor: pointer;
}
/* END: INVENTORY TABS */

/* JL 24 Jan 2024 - START: INVENTORY FORM DROPDOWN LIST */
#id_usage_unit:disabled, #id_usage_unit_label:disabled {
    opacity: 0.5;
}
/* END: INVENTORY FORM DROPDOWN LIST */

/* JL 8 Feb 2024 - START: SUPPLIER RATING */  
.stars-outer {
    display: inline-block;
    position: relative;
    font-family: FontAwesome;
}

.stars-outer::before {
    /* Unicode \2606 character for an outline star */
    /* content: "\2606 \2606 \2606 \2606 \2606";  */
    content: "\2605 \2605 \2605 \2605 \2605";
    /* bs-border-color (same as pagination button) */
    color: #dee2e6;
}

.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
}

.stars-inner::before {
    /* Unicode \2605 character for a solid star */
    content: "\2605 \2605 \2605 \2605 \2605"; 
    /* bs-yellow or bs-warning */
    color: #ffc107;
} 
/* END: SUPPLIER RATING */

/* JL 19 Feb 2024 - START: SELECT2 STYLING */
.select2-container--bootstrap-5 .select2-selection--single, 
.select2-container--bootstrap-5 .select2-selection--multiple {
    border: #dee2e6 solid 1px; /* follow the border radius of form-select */
    border-radius: 0.375rem; /* follow the border radius of form-select */
}

/* JL 26 Feb 2024 - START: SUPPLIER & ONSITEINVENTORY TABLE STYLING */
.supplier-detail, .outlet-restock-detail, .purchase-order-detail, .goods-received-notes-detail {
    border: 0;
    width: 50%; /* 2 columns */
}

.purchase-order-detail {
    width: 25% !important; /* overwrite to 4 columns */
}

.goods-received-notes-detail {
    width: 33.3% !important; /* overwrite to 3 columns */
}
/* END: SUPPLIER TABLE STYLING */

/* EA 2 Apr 2024 - Updated checkbox class width within datatable filter (start) */
.dataTables_filter input.form-check-input{
    width:1em !important;
}
/* EA 2 Apr 2024 - Updated checkbox class width within datatable filter (end) */
/* EA 16 Apr 2024 - Updated styling of accordion (start) */
.readonly, .readonly:focus{
    background-color: #e9ecef;
}
.accordion-button:not(.collapsed) {
    background-color: #fff;
    color:#212529;
    border-bottom: solid 1px #6C757D;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}
/* EA 16 Apr 2024 - Updated styling of accordion (end) */

/* JL 19 Apr 2024 - START: BASEINVENTORY FORM STYLING */
select:disabled {
    opacity: revert; /* remove default styling of opacity: 1 */
}
/* END: BASEINVENTORY FORM STYLING */

/* JL 23 Apr 2024 - START: BOOTSTRAP BUTTON STYLING */
button.btn.btn-sm.btn-warning.me-1, button.btn.btn-sm.btn-outline-warning.me-1:hover {
    color: white !important; /* override warning button text colour (black) to white */
}
/* END: BOOTSTRAP BUTTON STYLING */

/* JL 7 May 2024 - START: ONSITEINVENTORY (OUTLET RESTOCK REQUEST) */
#back_button {
    padding: 0;
    color: black;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0;
    border-bottom: 1px solid black;
}

.mark, mark {
    padding: 0 /* override bootstrap mark tag padding */
}
/* END: ONSITEINVENTORY (OUTLET RESTOCK REQUEST) */

/*
#page_header {
    margin-top: 24px; It was a little too cramped on top so I added some space. If you think this is too much, feel free to reduce it in 8px decrements.
}
*/

/* EA 10 Jul 2024 - Added nav classes */
/* START: NAVIGATION CLASSES */
.circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    background-color: #444444;
    text-align: center;
    font-weight: bold;
    font-size: 75%;
    vertical-align: middle;
    line-height: 38px;
}

.breadcrumb {
    color: #333;
    margin-bottom:0.25rem;
    margin-top:0.5rem;
    font-size: 0.85rem;
}

/* END: NAVIGATION CLASSES */

.dotted-underline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.disabled-link {
    pointer-events: none; /* Prevent click events */
    opacity: 0.6; /* Reduce opacity */
    cursor: not-allowed; /* Change cursor to not-allowed */
  }
/* Make fields with 'readonly' attribute gray backgrounded */
input[readonly], select[readonly], textarea[readonly] {
    background-color: #e9ecef;
}

/* Ensure gray background when focused */
input[readonly]:focus, select[readonly]:focus, textarea[readonly]:focus {
    background-color: #e9ecef;
}

/* Tabs */
.nav-tabs .nav-item {
    cursor: pointer;
}

/* EA 2 Oct 2024 - Text */
.lowercase-input {
    text-transform: lowercase;
}
/* EA 2 Oct 2024 - Modal loadingspinner */
#loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1070; /* Higher than Bootstrap modal and backdrop */
    pointer-events: none; /* Never block clicks on underlying UI. */
}

/* EA 26 Nov 2024 - Added max height to modal to enable scrolling within modal before modal footer */
#modalContent .modal-body {
    max-height: 75vh;
    overflow-y: auto;
}
.border-divider {
    border-right: 1px #b5b6b7 solid;
}

/* EA 18 Mar 2025 - Added clear button for input fields */
.search-clear-btn {
    position: absolute;
    right: 32px;
    top: 19px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 0.75rem;
}
.search-menu {
    position: absolute;  /* Ensures overlay effect */
    top: 100%;           /* Places the dropdown below the input */
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for elevation */
    z-index: 1050;       /* Ensure it stays above other elements */
    max-height: 250px;   /* Prevents too long dropdowns */
    overflow-y: auto;    /* Allows scrolling if too many results */
}
.search-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.search-item:hover, .search-item:focus {
    background-color: #e9ecef; /* Bootstrap default */
    color: #212529;
}

/* EA 14 Jan 2026 - Added CSS for tiptool */
.tooltip-inner {
    min-width: 80%;
    width: 80%;
    max-width: none;
    text-align: left; /* Optional: for better formatting of lists */
    white-space: normal; /* Allow wrapping */
}

/* EA 19 Jan 2026 - Added CSS for child row to bootstrap5-htmx-group-rows */
tr.child-row > td {
    padding: 0;
    border-bottom: 0;
}

tr.child-row > td > .collapse:not(.show) {
    display: none;
}

tr.child-row > td > .collapse.show {
    display: block;
    max-height: 1000px; /* Large enough for your content */
    padding: .5rem .5rem;
    border-bottom: 1px solid #dee2e6;
}

tr.child-row > td > .collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 .5rem;
    border-bottom: 0;
}

/* ML 29 April 2025 - Added CSS for custom scrollbars, currently in use in POS ordering app */

*::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}
  
*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--bs-orange); 
    border-radius: 10px;
    border: none;
}

/* 
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-orange); 
}
*/

/* EA 14 Apr 2025 - Created btn-xs class for smaller buttons */
.btn-xs {
    font-size: 0.75rem; /* Smaller font size */
    padding: 0.25rem 0.5rem; /* Smaller padding */
    line-height: 1; /* Adjust line height */
}

/* ML 21/5/25 - created for pos base html to standardize height */
html, body {
  height: 100%;
}

/* 
    JX 08 JUL '25 - Hide bullet if there's only a single alert. Great for 
    wrapping form errors such as cripsy forms.
*/
.hide-alert-bullet-if-single .alert ul li:only-child {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.hide-alert-bullet-if-single .alert ul {
  padding-left: 0 !important;
}

/* 
    ML 18/9/25 - Bootstrap custom variable colours for pos live orders 
    waiting time colour displays 
*/
.bg-blue   {background-color: var(--bs-blue)}
.bg-indigo {background-color: var(--bs-indigo)}
.bg-purple {background-color: var(--bs-purple)}
.bg-pink   {background-color: var(--bs-pink)}
.bg-red    {background-color: var(--bs-red)}
.bg-green  {background-color: var(--bs-green)}
.bg-teal   {background-color: var(--bs-teal)}

.btn.bg-blue,
.btn.bg-indigo,
.btn.bg-purple,
.btn.bg-pink,
.btn.bg-red,
.btn.bg-green,
.btn.bg-teal {
  color: #fff;
}

.btn.bg-blue,
.btn.bg-blue:disabled,
.btn.bg-blue.disabled { background-color: var(--bs-blue); border-color: var(--bs-blue); }

.btn.bg-indigo,
.btn.bg-indigo:disabled,
.btn.bg-indigo.disabled { background-color: var(--bs-indigo); border-color: var(--bs-indigo); }

.btn.bg-purple,
.btn.bg-purple:disabled,
.btn.bg-purple.disabled { background-color: var(--bs-purple); border-color: var(--bs-purple); }

.btn.bg-pink,
.btn.bg-pink:disabled,
.btn.bg-pink.disabled { background-color: var(--bs-pink); border-color: var(--bs-pink); }

.btn.bg-red,
.btn.bg-red:disabled,
.btn.bg-red.disabled { background-color: var(--bs-red); border-color: var(--bs-red); }

.btn.bg-green,
.btn.bg-green:disabled,
.btn.bg-green.disabled { background-color: var(--bs-green); border-color: var(--bs-green); }

.btn.bg-teal,
.btn.bg-teal:disabled,
.btn.bg-teal.disabled { background-color: var(--bs-teal); border-color: var(--bs-teal); }

/* 
    ML + JX 07/10/25 - Container Queries for POS Live Orders Display
    Using CSS Container Queries to create responsive grid layouts that adapt to the size of their container.
*/

/* Enable container queries on any element with this class */
.cq {
  container-type: inline-size;
}

/* Base behavior: 1 column by default */
.cq-row {
  display: grid;
  grid-template-columns: repeat(var(--cq-cols, 1), 1fr);
  gap: var(--bs-gutter-x, 1rem);
}

/* Utility classes to manually set column counts */
.cq-row-cols-1 { --cq-cols: 1; }
.cq-row-cols-2 { --cq-cols: 2; }
.cq-row-cols-3 { --cq-cols: 3; }
.cq-row-cols-4 { --cq-cols: 4; }
.cq-row-cols-5 { --cq-cols: 5; }
.cq-row-cols-6 { --cq-cols: 6; }

/* Container breakpoints (matching Bootstrap's) */
@container (min-width: 576px) {
  .cq-row-cols-sm-1 { --cq-cols: 1; }
  .cq-row-cols-sm-2 { --cq-cols: 2; }
  .cq-row-cols-sm-3 { --cq-cols: 3; }
  .cq-row-cols-sm-4 { --cq-cols: 4; }
  .cq-row-cols-sm-5 { --cq-cols: 5; }
  .cq-row-cols-sm-6 { --cq-cols: 6; }
}

@container (min-width: 768px) {
  .cq-row-cols-md-1 { --cq-cols: 1; }
  .cq-row-cols-md-2 { --cq-cols: 2; }
  .cq-row-cols-md-3 { --cq-cols: 3; }
  .cq-row-cols-md-4 { --cq-cols: 4; }
  .cq-row-cols-md-5 { --cq-cols: 5; }
  .cq-row-cols-md-6 { --cq-cols: 6; }
}

@container (min-width: 992px) {
  .cq-row-cols-lg-1 { --cq-cols: 1; }
  .cq-row-cols-lg-2 { --cq-cols: 2; }
  .cq-row-cols-lg-3 { --cq-cols: 3; }
  .cq-row-cols-lg-4 { --cq-cols: 4; }
  .cq-row-cols-lg-5 { --cq-cols: 5; }
  .cq-row-cols-lg-6 { --cq-cols: 6; }
}

@container (min-width: 1200px) {
  .cq-row-cols-xl-1 { --cq-cols: 1; }
  .cq-row-cols-xl-2 { --cq-cols: 2; }
  .cq-row-cols-xl-3 { --cq-cols: 3; }
  .cq-row-cols-xl-4 { --cq-cols: 4; }
  .cq-row-cols-xl-5 { --cq-cols: 5; }
  .cq-row-cols-xl-6 { --cq-cols: 6; }
}


/* ***
    JX 21 OCT '25 - Darken btn-link text on hover 
*/
.btn-link.text-secondary:hover {
    color: #212529 !important; /* Bootstrap text-dark */
}


.checkbox-lg {
    width: 1.8em;
    height: 1.8em;
}