/* Prevent text selection across the entire application */
html, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Allow text selection for input fields and textareas */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

html:not([dir=rtl]) .menu-toggle::after {
  content: "" !important;
}



@font-face {
    font-family: 'Material Icons Sharp';
    src: url('../MaterialFonts/Material_Symbols_Sharp/MaterialSymbolsSharp-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.material-icons {
    font-family: 'Material Icons Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Default size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}
.order-btn .btn-primary:disabled {
    background-color: #03254c73 !important;
    cursor: no-drop !important;
    border-color: transparent !important;
}
@font-face {
    font-family: 'Avnir';
    src: url('../fonts/Sen/Sen-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

*:not(i){font-family:'Avnir' !important;}

/* Prevent bounce on body/html, but allow scrolling in containers */
html, body {
    overscroll-behavior: none; /* Prevents bounce */
}

/* Allow scrolling in scrollable containers */
[class*="scroll"], 
.overflow-auto, 
.overflow-y-auto, 
.main-container,
.qtyList,
.modifierDiv {
    overscroll-behavior: auto;
}

/* ========== ONE FONT SIZE FOR THE WHOLE APPLICATION ========== */
/* Single variable --app-font-size; set by media queries. Applied to html/body so everything inherits.
   Use var(--app-font-size) only when you must set font-size explicitly (e.g. overrides). */
:root {
    --app-font-size: 1rem;
}

@media (max-width: 1023px) {
    :root { --app-font-size: 0.875rem; }
    html, body { font-size: var(--app-font-size) !important; }
}
@media (min-width: 1024px) and (max-width: 1299px) {
    :root { --app-font-size: 0.9375rem; }
    html, body { font-size: var(--app-font-size) !important; }
}
@media (min-width: 1300px) {
    :root { --app-font-size: 1rem; }
    html, body { font-size: var(--app-font-size) !important; }
}

/* Optional: use when inheritance is broken (e.g. inside a component that sets its own size) */
.app-font { font-size: var(--app-font-size) !important; }

/* Left panel 40% / Right panel 60% on all main pages (POS, Closed, Pending, Held) */
.custom-main-col2 {
    flex: 0 0 40% !important;
    max-width: 40% !important;
}
.custom-main-col1 {
    flex: 0 0 60% !important;
    max-width: 60% !important;
}

/* Left panel: root font minus 0.0625rem (1px). Class for direct use; overrides below for all children that set font-size. */
.font-left-panel {
    font-size: calc(var(--app-font-size) - 0.0625rem) !important;
}

/* Left panel: override every font-size rule that applies to its children (use reduced size). */
.side-panel .itemsList td,
.side-panel .ModifierItemsList td,
.side-panel button.btn-print,
.side-panel button.btn-void,
.side-panel button.btn-refund,
.side-panel button.btn-discount,
.side-panel .modifier_title h5,
.side-panel .item_name,
.side-panel .item_pr,
.side-panel .nav-pills button,
.side-panel .btn-group button,
.side-panel .priceSummary strong,
.side-panel .priceSummary .btn-disable,
.side-panel .priceSummary .btn-active,
.side-panel .addonPrice h5,
.side-panel .addonPrice button {
    font-size: calc(var(--app-font-size) - 0.125rem) !important;
}


/* Price exception: smaller font (0.8rem) only on food product item cards */
.food-product-card .food-product-price,
.food-product-card .food-product-modifier-price {
    font-size: 0.8rem !important;
}

/* Food product name line-height: 1.3 for all screen sizes */
.food-product-card .item_name {
    line-height: 1.3 !important;
}

/* All dialogs and modals use app font size */
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-title,
.modal-body,
.modal-footer,
.mud-dialog,
.mud-dialog-container .mud-dialog,
.mud-dialog-title,
.mud-dialog-content,
.mud-dialog-actions,
[role="dialog"],
.mud-paper.mud-dialog {
    font-size: var(--app-font-size) !important;
}
.modal-body *,
.mud-dialog-content *,
.mud-dialog * {
    font-size: inherit;
}
.modal-body,
.mud-dialog-content {
    font-size: var(--app-font-size) !important;
}

/* Elements with built-in font-size/small/strong use app font size (keep weight for bold/strong) */
strong,
b,
small,
.small,
.fw-bold,
.fw-semibold,
.fw-normal,
.text-muted {
    font-size: var(--app-font-size) !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-size: var(--app-font-size) !important;
}

/* ========== END UNIFIED FONT SIZES ========== */


.btn-outline-primary{
  border-color:#ccc !important;
  color:#444 !important;
}
.bg-menu-theme .menu-link, .bg-menu-theme .menu-horizontal-prev, .bg-menu-theme .menu-horizontal-next
{
  color:#fff !important;
}
.bg-menu-theme .menu-text{color:#fff !important;}
.app-brand .layout-menu-toggle svg path{fill:#fff !important;} 
aside.bg-menu-theme{background-color:#002777 !important;}
.menu-vertical .menu-item .menu-link:hover {
  background-color: #fff !important;
  color:#000 !important;
}
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle)
{
background-color:#fff !important;
}
aside.bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle), .bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before {
color: #000 !important;
}
.btn-primary,button.btn-primary:hover,.modal-footer button.btn-success,.modal-footer button.btn-success:hover{background-color:#0A3458  !important;border-color: #011947 !important;}
.btn-label-primary,button.btn-label-primary:hover,#addFinalRecepie .modal-body > .table-responsive > button{background-color:teal !important;color:#fff !important;}
.modal-footer button.btn-secondary,.modal-footer button.btn-secondary:hover{background-color:teal !important;}
.page-item.active .page-link{background-color:#002777 !important;border-color:#002777 !important;}
.page-item .page-link:hover{background-color:#0A3458 !important;color:#fff !important;}
#template-customizer .template-customizer-open-btn{background:#0A3458 !important;}
select.form-control:focus, .form-select:focus {
border-color: #666cff !important;
}

.recepieViewDiv > h3{display:flex;margin:2% !important;}
.recepieViewDiv form{margin:2% !important;}
/* .recepieViewDiv form,.recepieViewDiv .table-header-row,.recepieViewDiv .table-header-footer{margin-left:3.5% !important;}
.recepieViewDiv table,.table-action{margin-left:4.5%;}*/
.saverecepie{margin-right:1rem !important;}
.recepieViewDiv div.dataTables_wrapper div.dataTables_length,.recepieViewDiv div.dataTables_wrapper div.dataTables_filter{margin-top: unset !important;}
.recipeModal form [class*="col-md-"],.recepieViewDiv form [class*="col-md-"] {padding-right:unset !important;}
a{color:#0A3458 !important;}
.active a{color:#fff !important;}
.recipeModal form .row{margin-right:1% !important;}
th{background-color: #0A3458 !important;color:#fff !important;font-weight:bold !important;}
nav{max-width: unset !important;}
.container-xxl{max-width:unset !important;}
.products-categories h5{margin-left:auto !important;width:92% !important;display:flex;}
/*.dropdown-shortcuts a{width:100% !important;border-radius:unset !important;}
.dropdown-shortcuts a:hover{background-color:unset !important;}*/
input,select:not(.dataTables_length .form-select){padding: 8px !important;}
.table > :not(caption) > * > * {padding:0.5rem 1.25rem !important}
.light-style table.dataTable thead th.sorting:before, .light-style table.dataTable thead th.sorting:after{color:#fff !important;}
tbody tr{cursor:pointer;}
/* #addFinalRecepie table input,#addFinalRecepie table select{width:50% !important;} */
#addFinalRecepie table th,#addFinalRecepie table td{width:16% !important;}
.nav-pills .nav-link.active{background-color: #0A3458 !important;}
/* Icons (e.g. remixicon): do not use root font size; inherit from container */
#final_recepies .icon_div i,#sub_recepies .icon_div i,#prep_recepies .icon_div i,#items .icon_div i,#modifiers .icon_div i{font-size: 1em !important;}
#final_recepies .card-title,#sub_recepies .card-title,#prep_recepies .card-title,#items,#modifiers .card-title{font-weight:bold;}
#final_recepies{background-color: #13256E !important;}
#sub_recepies{background-color: #2270B5 !important;}
#prep_recepies{background-color: #07796B !important;}
#items{background-color: #6D83B2 !important;}
#modifiers{height:100%;background-color: #008080 !important;}
#final_recepies a.text-white,#sub_recepies a.text-white,#prep_recepies a.text-white,#items a.text-white,#modifiers a.text-white{display:flex;font-weight: bold;}
#final_recepies h6.text-white,#sub_recepies h6.text-white,#prep_recepies h6.text-white,#items h6.text-white,#modifiers h6.text-white{margin:0; font-weight:bold;}
.icon_div{text-align:right;}
#modifiers .card-body{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.create-new.btn.btn-primary,.btn.btn-secondary.buttons-collection.dropdown-toggle.ExportBtn.btn-label-primary.me-4,.recepieViewDiv button.btn-secondary{border-radius:40px !important;}
.data_table_custom_search{padding: 0 2% 2% !important;}
.table th{text-transform: capitalize !important;}
.recepieViewDiv .btn-group.dt-buttons .btn-group > .btn:not([class*=btn-outline-]){border-color:unset !important;}
html:not([dir=rtl]) .recepieViewDiv .btn-group > .btn-group:first-child > .btn:not([class*=btn-outline-]):first-child{border-color:unset !important;}
.recepieViewDiv > form > .mt-4{margin-top:0 !important;}
.add_final_recepie td,.edit_recepie td{width:17% !important;}
.add_final_recepie .add_item_to_collection,.edit_recepie+.edit_item_to_collection{background-color:#008080 !important;}


/* FrontEnd Styles */

/* @media (min-width: 992px) {
  .MainContainer.container-xxl {
      padding-right: 1.5rem;
      padding-left: 0;
  }
} */

.nav-menu-items button{border-radius:25px !important;}
.MainSearch input,.MainSearch span{background-color:#fff !important;}
.MainSearch input{border-top-right-radius:16px !important;border-bottom-right-radius:16px !important;}
.MainSearch span{border-top-left-radius:16px !important;border-bottom-left-radius:16px !important;}
.item_price{background-color:#0A3458 !important;color:#fff;border-color: transparent !important;}
.item_calories{    background-color: #cce8ba;color: #008080;border: #cce8ba;border-radius: 50%;padding: 5%;
  width: 25%;text-align: center;font-size: var(--app-font-size);margin-top: 5%;}
.card-item .card-body{padding:2%;border-radius: 0.625rem 0.5rem 0 0 !important;display: flex;flex-direction: column;transition: background-color 0.3s ease-in-out 0.2s;justify-content:center;cursor:pointer;}
.main-container .card-item .card-body:hover {background-color: #ffffff;border-bottom-left-radius: 0.625rem; border-bottom-right-radius: 0.625rem;}
/* .tab-pane .row .col-md-3{margin-top: 3% !important;} */
.cat_menu{margin-top:1% !important;}
    .cat_menu + hr, .sub_cat + hr{
        margin-top: 0rem !important;
        margin-bottom: 0.5rem !important;
    }
#navs-justified-food ul+hr{margin-top:0 !important;}
.card-item-footer{justify-content: space-around;display: flex;flex-direction: column;align-items: center;width: 100%;}
.card-item-footer button{width:100%;border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;}
button.OrderDetails.btn.btn-light:hover {
  background-color: #0A3458 !important;
  color: #fff !important;
}
button.OrderDetails.btn.btn-light{background-color: #0A3458 !important;color:#fff !important;}
.customerName button{background-color:#fff !important;padding-top: 1% !important;padding-bottom: 1% !important;}
.customerName i{margin-right: 10px !important;cursor: pointer;}
button.btn.btn-light.active{background-color:#008080 !important;color:#fff !important;}
.itemsList th{background-color:#fff !important;color:unset !important;}
.itemsList{margin-top: 2% !important;}
.ModifierItemsList{margin-top: 2% !important;}
 .itemsList td, .itemsList th, .ModifierItemsList td {
        font-size: var(--app-font-size);
    }
/* .itemsList tr td:nth-child(1){width:55% !important;}
.itemsList tr td:nth-child(2){width:20% !important;}
.itemsList tr td:nth-child(3){width:20% !important;}
.itemsList tr td:nth-child(4){width:5% !important;} */
.itemsList tr td:nth-child(4){color:#B70F0A;padding:1% 1% !important;}
/*.ModifierItemsList tr td:nth-child(2){padding:1% 1% !important;}*/
.ModifierItemsList tr td:nth-child(4){color:#B70F0A;padding:1% 1% !important;}
.priceSummary{background-color:#f6f6f6;}
/* Send, Cancel, Hold buttons – same padding on all pages (POS, Closed, Pending, Held) */
    .priceSummary .d-flex.justify-content-between.mb-4 > button, .OrderType button {
        padding: 0.9rem 0.9rem !important;
    }
.OrderDetails button {
    padding: 0.5rem 0.5rem !important;
}
strong.text-success {
    color: #008080 !important;
}
.side-panel .card{border:1px solid #f6f6f6; }
.side-panel .card-body{padding:0 !important;position:relative;}
/*.OrderType,.customerName{padding: 0.5rem 0.5rem 0 0.5rem;}*/
button.btn-disable{background-color:#A8C6FA !important;color:#fff !important;}
button.btn-active{background-color:#0a3458  !important; color:#fff !important;}
button.btn-discount b{color:#0A3458 !important;}
 .btn-refund:disabled {
     color: #d6d6d6;
}

.btn-void:disabled {
     color: #d6d6d6;
}

.btn-print:disabled {
     color: #d6d6d6;
}

.btn-discount:disabled {
    color: #d6d6d6;
}n.btn-print {color:#0A3458;}
button.btn-print,button.btn-void,button.btn-refund,button.btn-discount{font-size: var(--app-font-size) !important;}
.qtyList{height:45.6vh;overflow:auto;}

.nav-pills .nav-item .nav-link:not(.active):hover{background-color: #dfdfe3 !important;color:#0A3458 !important;}
ul.nav-pills{
  white-space: nowrap;
  overflow-x: auto; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Hide vertical scroll if any */
  flex-wrap: nowrap !important; /* Prevent wrapping of tabs to the next line */
}
.OrderDetailsDiv ul{width:100% !important;}
.customerName div{width:100%;}
.customerName div ul{width:100%;}
.btn-pay{flex-basis:50%;}
.OrderType button.btn.btn-light.active{background-color:#0a3458  !important;color:#fff !important;}
.OrderType button.btn.btn-light{color:#0a3458  !important;font-weight: normal;}
.total_payment strong{color:#0a3458  !important;}
button.btn-success:hover{color: #fff !important;background-color: #0a3458  !important;border-color: #0a3458  !important;}
button.btn-success{border-color:#0a3458  !important;}
.side-panel .card {
  background-clip: padding-box !important;
  box-shadow: unset !important;
  background-color: transparent !important;
}
.side-panel .table thead tr th:not(#orderDiscountModal table tr th){background-color: transparent !important;}
.layout-horizontal .pos-nav-bar.bg-navbar-theme.layout-navbar{background-color:#0A3458 !important;}
.MainContainer a span{color:#fff !important;}
.MainContainer .nav-pills .nav-link.active{background-color: #fff !important;color:#0A3458 !important;}
.MainContainer .nav-item button{color:#fff !important;}
.customerName .btn-group{background-color: #fff !important;align-items:center;}
.customerName button{box-shadow:none !important;border:none !important;}
div#feedbackModal .modal-content .modal-header,div#orderDiscountModal .modal-content .modal-header{padding-bottom: 1.25rem !important;background-color: transparent !important;}

div#deliveryDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#cartItemDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#splitByItemsSelectionDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}


div#voidDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#paymentSelectionDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}
div#paymentConfirmationDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#modifiedPaymentDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#modifiedCommentDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

div#customDiscountDialog .modal-content .modal-header, div#orderDiscountModal .modal-content .modal-header {
    padding-bottom: 1.25rem !important;
    background-color: transparent !important;
}

/* Ensure Bootstrap discount modal stacks above MudBlazor dialogs (e.g., CartItemDetailDialog) */
#orderDiscountModal.modal {
    z-index: 1605;
}

/* Backdrop must be below modal but above MudBlazor overlays */
.modal-backdrop.show {
    z-index: 1600;
}

div#feedbackModal1 .modal-content .modal-header{padding-bottom: 1.25rem !important;background-color: transparent !important;}
.customerNameField{    align-items: center !important;
  border: 1px solid #cfd0d6;
  border-radius: 0.5rem;
}
.customerNameField .customerName{border:none !important; width:100% !important;padding:0.2rem 0.2rem 0.2rem 0.2rem !important;}
.customerNameField i{margin-right:10px;}
.customerNameField .customerName ul{width:100% !important;}
.customerNameField .customerName button{justify-content: left !important;}
.customerNameField .customerName span{margin-left:unset !important;color: #cfd0d6;}
.sub_menu+hr{margin-top:0 !important;}
.holdItem .card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:12px 0 !important;
}
.holdItem .card-footer {
  color: white;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:2% !important;
}
.holdItem  .btn-pay {
  background-color: #001f87;
  color: white;
}
.holdItem  .btn-pay:hover {
  background-color: #001570;
}
.holdItem  .icon-btn {
  border: 1px solid #ccc;
  border-radius: 20%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
}
.holdItem  .icon-btn:hover {
  background-color: #f5f5f5;
}

.holdItem.dinein .card-footer{background-color: #008080 !important;}
.holdItem.togo .card-footer{background-color: #FFE3AE !important;color:#000;}
.holdItem .card-footer span{display: flex;}
.holdItem .card-footer span i{font-size: 1em !important;}
.deliverHoldItem .card-footer{background-color: #FEFAC0 !important;color:#000;}
.pendingPage button.btn-void{color:unset !important;}
.side-panel > .card{padding-top:0 !important}
/*.OrderDetails{padding:0 0.5rem 0 0.5rem !important;}*/
.modifierDivSpace{background-color: #ccc;position: absolute;top: 0;z-index:9;}
.closeModifier{cursor: pointer;}
.modifier_title h5{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  font-size: var(--app-font-size) !important;
}
.modifier_title{
  display: flex;
    justify-content: space-between;
    padding: 2% 2% 0 2%;
}
.divider {
  border-left: 2px solid #ddd;
  height: 100%;
  margin: 0 10px;
}
.modifierDiv{overflow: auto !important;}
.dividerIcon{flex:0 !important;}
.item_name,.item_pr{font-size: var(--app-font-size) !important;margin-bottom:0;}
.addonPrice h5{margin-bottom:0;}
.addonPrice .row div:nth-child(2) h5{text-align:end;}
.modifier-row > .position-relative{background-color:#F7F6F6 !important;}
/* .ModifierItemsList{border-collapse: separate;border: 2px solid #606060;border-radius: 0.625rem;padding-bottom: 5%; background-color:#F7F6F6;} */
.cat_menu ul,.sub_menu{line-height: 1;}
.main-container div.py-2{margin-top:0px !important;}
.nav-pills button{font-size: var(--app-font-size) !important;}
.btn-group button,.priceSummary strong,.priceSummary .btn-disable,.priceSummary .btn-active{font-size: var(--app-font-size) !important;}
#orderDiscountModal select{width:20% !important;}
#orderDiscountModal .btn-close{color:#fff !important;}
/* .col-lg-2.col-md-3.col-sm-4.py-3.modifieraddon {
  flex: 0 0 15%;
  max-width: 20%;
} */
.addonPrice h5,.addonPrice button{font-size: var(--app-font-size) !important;}
#iconAction{font-size: 1em !important;}
.left-section {
  background-color: #083c6c; /* Dark blue background */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.right-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.login-form {
  width: 100%;
  max-width: 400px;
}

.logo-text {
  font-size: var(--app-font-size);
  font-weight: bold;
}

.system-text {
  font-size: var(--app-font-size);
}

.current-time {
  margin-top: 2rem;
  font-size: var(--app-font-size);
}
.loginPage{overflow: hidden !important;}

body.checkoutBody {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #e3f2fd, #ffffff);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.checkoutBody .container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkoutBody .row {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.checkoutBody .card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkoutBody .card h4 {
  font-weight: 700;
  margin-bottom: 15px;
}

.checkoutBody .amount-display {
    padding: 10px;
    border-radius: 12px;
    font-size: var(--app-font-size);
    font-weight: 600;
    text-align: center;
    border: 1px solid #ccc;
}

.checkoutBody .input-group-text {
  background: linear-gradient(135deg, #f9f9f9, #ffffff);
  border: none;
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}

.checkoutBody .keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-items: center;
}

.checkoutBody .keypad button {
  width: 100%;
  padding-block:15px;
  border-radius: 8px;
  font-size: var(--app-font-size);
  font-weight: 600;
  color: #333;
  transition: all 0.2s ease-in-out;
  border:1px solid #e6e6e6;
}

/*    .checkoutBody .keypad button:hover {
        background: #d0efff;
    }*/

.checkoutBody .btn-payment {
  display: inline-block;
  width: 48%;
  margin: 5px 1%;
  padding: 8px;
  border: none;
  border-radius: 8px;
  font-size: var(--app-font-size);
  font-weight: 600;
  color: white;
  text-align: center;
  transition: transform 0.2s ease-in-out;
}

.checkoutBody .btn-payment.cash {
  background: #0A3458;
}

.checkoutBody .btn-payment.knet {
  background: #0A3458;
}

.checkoutBody .btn-payment.visa {
  background: #0A3458;
}

.checkoutBody .btn-payment.master {
  background: #0A3458;
}

.checkoutBody .btn-payment:hover {
  transform: scale(1.03);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.checkoutBody .action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}


.checkoutBody label {
  font-weight: 600;
  font-size: var(--app-font-size);
}

@media (max-width: 768px) {
  .checkoutBody .row {
      flex-direction: column;
  }

  .checkoutBody .card {
      width: 100%;
  }

  .checkoutBody .btn-payment {
      width: 100%;
      margin: 5px 0;
  }
}
.block-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    flex-direction: column;
}
.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#002277 94%,#0000) top/9px 9px no-repeat, conic-gradient(#0000 30%,#002277);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
    animation: spinner-rotate 1s infinite linear;
}

@keyframes spinner-rotate {
    100% {
        transform: rotate(1turn);
    }
}
.block-ui-text {
    margin-top: 15px;
    font-size: var(--app-font-size);
    font-weight: bold;
    color: black;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
th.header-th {
    line-height: 0.5rem !important;
    font-weight: normal !important;
}
.darkbg {
    background-color: #0A3458 !important;
}
.no-gutter-custom {
    --bs-gutter-x: 0rem !important;
}

.standardTableHeader {
    font-weight: normal !important;
    color: #3b4056 !important;
    border-bottom: 1px solid #e5e6e8 !important;
    background:unset !important;
}
.keypad button {
    max-height: 75px;
    max-width: 75px;
}
.card-adjust-height {
    max-height: 86vh !important;
    overflow: auto !important;
}

label.mud-input-label-outlined {
    transform: translate(14px, 14px) scale(1);
}

.mud-input-control {
    margin-top: 0 !important;
}

input {
    padding: 15px !important;
}

@media (max-width: 1280px) and (min-width: 992px) {


    .responsive-dialog {
      max-width: 80vw; /* Wider on iPads */
  }
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active {
    background-color: #dfdfe3 !important; 
    box-shadow: none !important;
    border-color: #dfdfe3 !important;
    text-decoration: none !important;
}

/* SQLite Debug Panel Styles */
.sqlite-debug-toggle {
    text-align: center;
    padding: 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.sqlite-debug-toggle .btn {
    font-size: var(--app-font-size);
    padding: 6px 12px;
}

.sqlite-debug-container {
    background: #ffffff;
    border-bottom: 2px solid #17a2b8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sqlite-debug-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sqlite-debug-panel h4 {
    color: #495057;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.sqlite-debug-panel .form-label {
    font-weight: 600;
    color: #495057;
}

.sqlite-debug-panel pre {
    max-height: 400px;
    overflow-y: auto;
    font-size: var(--app-font-size);
    line-height: 1.4;
}

.sqlite-debug-panel .btn {
    font-size: var(--app-font-size);
    padding: 8px 16px;
}

.sqlite-debug-panel .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.sqlite-debug-panel .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.sqlite-debug-panel .btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.sqlite-debug-panel .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.sqlite-debug-panel .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.sqlite-debug-panel .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}


.control-menus.nav-pills {
    overflow-x: unset !important;
    overflow-y: unset !important;
}

    .control-menus.nav-pills .nav-item .nav-link:not(.active):hover {
        background-color: unset !important;
        color: #fff !important;
    }

.card-body .bg-label-primary {
    background-color: #F7F7F9 !important;
    color: #0A3458 !important;
    font-size: var(--app-font-size) !important;
}

/* Order Tooltip Styles */
.mud-tooltip-inline {
    position: absolute;
    top: 17px;
    right: 17px;
    cursor: pointer;
    display: inline-block;
}

/* Make MudMenu background transparent to show the half-moon border */
.order-tooltip-menu .mud-popover-paper,
.order-tooltip-menu .mud-menu-paper,
.order-tooltip-menu .mud-popover-content {
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

.order-tooltip-menu .mud-menu-content,
.order-tooltip-menu .mud-popover-content-wrapper {
    overflow: visible !important;
    max-height: none !important;
}

.mud-paper {
    border-top-left-radius: 0.625rem; 
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

}

/* Perforated edge effect for tooltip bottom border - receipt stub style */
.order-tooltip-content {
    position: relative;
    padding: 12px;
    padding-bottom: 24px;
    overflow: visible;
    min-width: 280px;
    background-color: var(--mud-palette-surface, #fff);
    border-radius: 4px;
}

/* Half-moon border using SVG pattern */
.mud-popover::after {
    content: ''; 
    display: block;
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 13px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='120px' height='20px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255,255,255)' d='M120,19.28 L120,0 L0,0 L0,19.28 C0,19.28 7.711,19.28 8.451,19.28 C9.19,-1.223 30.905,0.215 30.905,0.215 C50.463,0.215 52.636,19.28 52.636,19.28 L67.847,19.28 C69.16,-0.692 89.577,0.215 89.577,0.215 C111.308,0.215 111.308,19.28 111.308,19.28 L120,19.28 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 80px 13px;
    pointer-events: none;
    z-index: 1;
}

/* Order tooltip header */
.order-tooltip-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.order-tooltip-order-number {
    font-size: var(--app-font-size);
    font-weight: 600;
    color: #0A3458;
}

/* Order tooltip rows - 2 columns */
.order-tooltip-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

/* Order tooltip item - each info piece */
.order-tooltip-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.order-tooltip-item-full {
    flex: 1 1 100%;
}

/* Label - small muted text on top */
.order-tooltip-label {
    font-size: var(--app-font-size);
    color: #6c757d;
    margin-bottom: 4px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Value - larger text below label */
.order-tooltip-value {
    font-size: var(--app-font-size);
    font-weight: 500;
    color: #212529;
    word-break: break-word;
}

/* Separator */
.order-tooltip-separator {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 12px 0;
}

.order-tooltip-menu{
  position: absolute;
    top: 10%;
    right: 4%;
}

/* Custom Popover Styles */
.custom-popover-wrapper {
    position: relative;
    display: inline-block;
}

.custom-popover-activator {
    display: inline-block;
    cursor: pointer;
}

/* Position info icon for order tooltip */
.custom-popover-wrapper.order-tooltip-wrapper {
    position: absolute;
    top: 5%;
    right: 2%;
}

.custom-popover-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: transparent;
    pointer-events: none; /* Backdrop doesn't need to receive clicks, we use document-level listener */
}

.custom-popover {
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    display: block;
    visibility: visible;
}

.custom-popover-content {
    position: relative;
    padding: 12px;
    padding-bottom: 24px;
    overflow: visible;
    min-width: 280px;
    background-color: var(--mud-palette-surface, #fff);
    border-radius: 4px;
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.custom-popover-edge {
    content: ''; 
    display: block;
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 13px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='120px' height='20px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255,255,255)' d='M120,19.28 L120,0 L0,0 L0,19.28 C0,19.28 7.711,19.28 8.451,19.28 C9.19,-1.223 30.905,0.215 30.905,0.215 C50.463,0.215 52.636,19.28 52.636,19.28 L67.847,19.28 C69.16,-0.692 89.577,0.215 89.577,0.215 C111.308,0.215 111.308,19.28 111.308,19.28 L120,19.28 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 80px 13px;
    pointer-events: none;
    z-index: 1;
}

/* Position adjustments for order tooltip - position below the activator */
.order-tooltip-menu.custom-popover {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 8px !important;
}

/* Item discount tooltip - inline next to price, popover below icon */
.item-discount-tooltip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

.item-discount-tooltip-menu.custom-popover {
    position: absolute !important;
    top: 100% !important;
    transform: none !important;
    margin-top: 6px !important;
    max-width: 220px !important;
}

/* Item discount tooltip: fixed 14px font size inside content, and narrower width */
.item-discount-tooltip-menu .custom-popover-content {
    min-width: 180px;
    max-width: 220px;
    padding: 8px 10px;
    padding-bottom: 20px;
    font-size: 14px !important;
}

.item-discount-tooltip-menu .custom-popover-content,
.item-discount-tooltip-menu .custom-popover-content * {
    font-size: 14px !important;
}

.item-discount-tooltip-menu .order-tooltip-header {
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.item-discount-tooltip-menu .order-tooltip-row {
    gap: 8px;
}

.item-discount-tooltip-menu .order-tooltip-separator {
    margin: 8px 0;
}

.item-discount-tooltip-activator .material-icons {
    font-size: var(--app-font-size) !important;
}

/* Global Thin Scrollbar Styles */
/* For Webkit browsers (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

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

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Swipe-to-delete: contain transform */
/*.swipe-delete-row td { overflow: hidden; }*/

/* Hide delete icon td and its header on every page – swipe to delete only */
td.deleteRow { display: none !important; }
table:has(tbody td.deleteRow) thead tr th:last-child { display: none !important; }

/* Dynamic width for Item Refunds and Voided Items dialogs – fit content */
.mud-dialog.dialog-dynamic-width {
    width: fit-content !important;
    min-width: 300px;
    max-width: 95vw;
}
.OrderDetails.dropdown-toggle {
    box-shadow: none !important;
    box-shadow: 8px 0 12px -4px rgba(38, 43, 67, 0.14) !important;
    border-left-width: 0 !important;
}

.standardTableHeader:nth-child(1) {

    text-align:start;

}

.standardTableHeader:nth-child(3) {
    text-align: end;
}

.itemsList td:nth-child(1) {
    text-align: start;
}

.itemsList td:nth-child(3) {
    text-align: end !important;
}
.OrderType .dropdown-toggle.dropdown-toggle-split::after {

    margin-right:8% !important;
}

.OrderType .dropdown-toggle.OrderDetails {

    justify-content:flex-end !important;
}

/*.ModifierItemsList tr:not(:first-child) > td:nth-child(2) {
    text-align: end !important;
    padding-right: 3.5% !important;
}*/
/*.ModifierItemsList thead tr th:nth-child(2) {

    padding-left:0 !important;
    text-align:center !important;

}*/

.item-with-modifiers td:nth-child(2) {
    text-align: start !important;
}