/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss?ngGlobalStyle (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  /* Mobile viewport height support */
  height: 100vh;
  height: -webkit-fill-available;
  /* Prevent overscroll behavior on mobile */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Fix for mobile browsers - ensure full viewport height */
html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: calc(var(--vh, 1vh) * 100);
  /* Prevent pull-to-refresh and rubber band scrolling */
  overscroll-behavior-y: contain;
  /* Prevent zoom on mobile */
  touch-action: manipulation;
}

/* App root should take at least full height */
app-root {
  display: block;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: calc(var(--vh, 1vh) * 100);
}

.container {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.material-icons {
  font-family: "Material Icons";
  font-size: 24px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

.app-logo {
  color: rgba(0, 0, 0, 0.87) !important;
}

.brand-text {
  color: rgba(0, 0, 0, 0.87) !important;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.no-data-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: rgba(0, 0, 0, 0.54);
}

.no-data-message mat-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--primary);
}

/* Position and base styles for snackbar */
.mdc-snackbar,
.mat-mdc-snack-bar-container {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  left: 32px !important;
  bottom: 50px !important;
  z-index: 1400 !important;
  --mdc-snackbar-container-color: transparent !important;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12) !important;
  border-radius: 4px !important;
  min-width: 344px !important;
  max-width: 33vw !important;
  pointer-events: auto !important;
}
.mdc-snackbar .mdc-snackbar__surface,
.mat-mdc-snack-bar-container .mdc-snackbar__surface {
  padding: 0 !important;
  background-color: transparent !important;
  min-height: 35px !important;
}
.mdc-snackbar .mat-mdc-snack-bar-label,
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-label {
  padding: 8px 12px !important;
  line-height: 1.2 !important;
  font-size: 15px !important;
  font-style: bold !important;
}
.mdc-snackbar .mat-mdc-snack-bar-actions,
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-actions {
  padding: 4px !important;
  margin-right: 4px !important;
  pointer-events: auto !important;
}
.mdc-snackbar .mat-mdc-snack-bar-action,
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-action {
  --mat-mdc-button-persistent-ripple-color: transparent !important;
  --mat-mdc-button-ripple-color: transparent !important;
  --mat-mdc-button-hover-state-layer-color: transparent !important;
  --mat-mdc-button-hover-state-layer-opacity: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  margin: 0 4px !important;
  min-width: auto !important;
  padding: 0 4px !important;
}
.mdc-snackbar .mat-mdc-snack-bar-action:hover,
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-action:hover {
  background: transparent !important;
  opacity: 0.8 !important;
}
.mdc-snackbar .mat-mdc-snack-bar-action .mdc-button__ripple,
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-action .mdc-button__ripple {
  display: none !important;
}

.success-snackbar .mdc-snackbar__surface {
  background-color: rgba(114, 203, 117, 0.9) !important;
}
.success-snackbar .mat-mdc-snack-bar-label {
  color: rgb(10, 68, 7) !important;
}

.error-snackbar .mdc-snackbar__surface {
  background-color: rgba(224, 152, 147, 0.9) !important;
}
.error-snackbar .mat-mdc-snack-bar-label {
  color: rgb(111, 7, 7) !important;
}

.info-snackbar .mdc-snackbar__surface {
  background-color: rgba(98, 157, 205, 0.9) !important;
}
.info-snackbar .mat-mdc-snack-bar-label {
  color: rgb(7, 4, 117) !important;
}

.warning-snackbar .mdc-snackbar__surface {
  background-color: rgba(223, 171, 93, 0.9) !important;
}
.warning-snackbar .mat-mdc-snack-bar-label {
  color: rgb(136, 77, 19) !important;
}

.non-blocking-snackbar {
  pointer-events: none !important;
}

/* Centralized styles for popups and confirmation dialogs */
.popup-container,
.confirmation-dialog,
.bill-summary-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30020;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 16px;
  max-width: 90%;
  width: 400px;
}

/* Backdrop for popups */
.popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface {
  background-color: #f1f8e9 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__title {
  color: #556B2F !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #6B8E23 !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__content {
  color: #39481f !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions {
  padding: 16px 24px !important;
  border-top: 1px solid #6B8E23 !important;
  background-color: rgba(85, 107, 47, 0.03) !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button:not([color=primary]):not([color=warn]) .mdc-button__label {
  color: #556B2F !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button:not([color=primary]):not([color=warn]):hover {
  background-color: rgba(85, 107, 47, 0.08) !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=primary],
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=primary] {
  background-color: #556B2F !important;
  color: white !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=primary]:hover,
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=primary]:hover {
  background-color: #39481f !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=primary].mdc-button--raised,
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=primary].mdc-button--raised {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=primary].mdc-button--raised:hover,
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=primary].mdc-button--raised:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=warn],
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=warn] {
  background-color: #f44336 !important;
  color: white !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=warn]:hover,
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=warn]:hover {
  background-color: #ea1c0d !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=warn].mdc-button--raised,
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=warn].mdc-button--raised {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=warn].mdc-button--raised:hover,
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-raised-button[color=warn].mdc-button--raised:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=warn]:not(.mdc-button--raised) {
  background-color: transparent !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=warn]:not(.mdc-button--raised) .mdc-button__label {
  color: #f44336 !important;
}
::ng-deep .mat-mdc-dialog-container .mdc-dialog__actions button.mat-mdc-button[color=warn]:not(.mdc-button--raised):hover {
  background-color: rgba(244, 67, 54, 0.08) !important;
}

/* Layout fixes for the sidemenu and content gap */
/* Remove the gap between sidemenu and content */
.content-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Remove left padding from all feature components */
app-jobtitles .container,
app-staff-account .container,
app-staffs .container,
app-tables .container,
app-rooms .container,
app-seats .container,
app-restaurant .container,
app-kitchen-order-detail .container,
app-static-menu-display .container,
app-static-menu-management .container {
  padding-left: 0 !important;
}

/* Ensure no gaps in the main layout */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Ensure main content takes full width minus sidenav */
.main-content.with-sidenav {
  width: calc(100% - 64px);
  margin-left: 0;
}

/* When sidemenu is expanded, adjust content width */
.desktop-sidenav:not(.icon-only) + .main-content.with-sidenav {
  width: calc(100% - 207px); /* Updated to match the increased desktop sidenav width */
  margin-left: 0;
}

/* Fix Material overlays z-index to appear above fixed panels/headers.
   Use higher-specificity selectors so component-level ::ng-deep overrides
   (e.g., setting z-index: 1000) can't win. */
html body .cdk-overlay-container,
html body .cdk-global-overlay-wrapper,
html body .cdk-overlay-pane {
  z-index: 30000 !important;
}

.mat-datepicker-popup,
.mat-select-panel,
.mat-menu-panel,
.cdk-overlay-pane {
  z-index: 30000 !important;
}

/* Ensure material dialogs and overlays sit above headers/cart panels */
.mat-dialog-container,
.mat-mdc-dialog-container,
.mat-mdc-dialog-surface {
  z-index: 30010 !important;
}

/* Ensure dialog buttons are clickable */
.mat-mdc-dialog-actions button,
.mat-dialog-actions button {
  pointer-events: auto !important;
  z-index: 30011 !important;
  position: relative;
}

/* Additional dialog button fixes */
.mat-mdc-dialog-container .mat-mdc-dialog-actions button,
.mat-dialog-container .mat-dialog-actions button {
  pointer-events: auto !important;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer !important;
}

/* Fix any overlay backdrop interference */
html body .cdk-overlay-backdrop {
  z-index: 30005 !important;
}

html body .cdk-overlay-pane {
  z-index: 30011 !important;
}

/* Tooltips should never intercept clicks or sit above the mini sidenav */
html body .mat-tooltip,
html body .mat-mdc-tooltip,
html body .mat-tooltip-panel,
html body .mat-mdc-tooltip-panel {
  pointer-events: none !important;
  z-index: 50 !important;
}

/* Hide CDK described-by message container completely without taking up space */
.cdk-describedby-message-container {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* Ensure cdk-overlay-container is not affected by parent positioning */
.cdk-overlay-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 1000 !important;
}

.cdk-overlay-container * {
  pointer-events: auto !important;
}

/* Order Approval Dialog - Centered positioning with strongest specificity */
.cdk-overlay-container .cdk-overlay-pane.approval-dialog-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 500px !important;
  max-width: 90vw !important;
  height: auto !important;
  margin: 0 !important;
}
.cdk-overlay-container .cdk-overlay-pane.approval-dialog-panel .mat-mdc-dialog-container {
  display: block !important;
  z-index: 2501 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
}
.cdk-overlay-container .cdk-overlay-pane.approval-dialog-panel .mat-mdc-dialog-surface {
  width: 100% !important;
  max-width: none !important;
}

/* Order Approval Dialog Backdrop */
.approval-dialog-backdrop {
  z-index: 2499 !important;
}

/* Client Setup Dialog - Centered positioning */
.client-setup-dialog-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 90vw !important;
}
.client-setup-dialog-panel .mat-mdc-dialog-container {
  display: block !important;
  z-index: 2501 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure dialog backdrop is visible */
.cdk-overlay-backdrop.cdk-overlay-backdrop-show {
  z-index: 2499 !important;
}

/* Button styling in dialog */
.client-setup-dialog-panel button {
  min-width: 100px !important;
}