/*
 * QUE-UP BUTTON SYSTEM — CSS ONLY
 * --------------------------------------------------------------------------
 * Button appearance is applied during the first render. JavaScript is not
 * used for styling, so refreshing a page cannot cause a second style change.
 */
:root {
  /* Change these values to resize buttons everywhere. */
  --q-button-height-icon:28px;
  --q-button-height-small:32px;
  --q-button-height-medium:40px;
  --q-button-height-large:50px;
  --q-button-height-banner:30px;
  --q-button-radius:9px;
  --q-button-font-small:10px;
  --q-button-font-medium:12px;
  --q-button-font-large:14px;

  /* Change these values to recolor every matching action. */
  --q-button-primary-bg:#f5c84c;
  --q-button-primary-text:#24172d;
  --q-button-success-bg:#22c978;
  --q-button-success-text:#072a1a;
  --q-button-danger-bg:#d84b4b;
  --q-button-danger-text:#ffffff;
  --q-button-neutral-bg:#526072;
  --q-button-neutral-text:#ffffff;
  --q-button-secondary-bg:#ffffff;
  --q-button-secondary-text:#27364a;
  --q-button-secondary-border:#cbd5e1;
  --q-button-focus:rgba(245,200,76,.34);
}

/* Conventional buttons and button-shaped links. */
:is(
  .queup-banner__actions a,
  .queup-banner__actions button,
  .login-submit,
  .panel-header-action,
  .card-actions > a,
  .card-actions > button,
  .row-button,
  dialog button,
  .accept-order,
  .accept-button,
  .mark-ready,
  .ready-button,
  .mark-ready-button,
  .pos-method,
  #posLoadOrder,
  #posReleaseOrder,
  #posExact,
  #posClear,
  #posComplete,
  #posPrintReceipt,
  #posCloseReceipt,
  .product .add-button,
  #submitButton,
  .tracking-actions button,
  #mobileCartBar,
  .secondary-button,
  .queue-filter,
  .queue-action,
  .admin-submit,
  .admin-archive,
  .admin-expo-action,
  .wac-actions button,
  .queup-business-management button,
  .queup-expo-management button,
  .queup-business-dialog-actions button,
  .choice-select,
  .card form > button,
  .expo-button,
  .business-links a
) {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  min-width:0 !important;
  min-height:var(--q-button-height-small) !important;
  margin:0 !important;
  padding:7px 11px !important;
  border:1px solid var(--q-button-secondary-border) !important;
  border-radius:var(--q-button-radius) !important;
  background:var(--q-button-secondary-bg) !important;
  color:var(--q-button-secondary-text) !important;
  box-shadow:none !important;
  cursor:pointer !important;
  font-family:inherit !important;
  font-size:var(--q-button-font-small) !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:normal !important;
  transition:filter .16s ease,transform .16s ease,box-shadow .16s ease !important;
}

:is(
  .queup-banner__actions a,
  .queup-banner__actions button,
  .login-submit,
  .panel-header-action,
  .card-actions > a,
  .card-actions > button,
  .row-button,
  dialog button,
  .accept-order,
  .accept-button,
  .mark-ready,
  .ready-button,
  .mark-ready-button,
  .pos-method,
  #posLoadOrder,
  #posReleaseOrder,
  #posExact,
  #posClear,
  #posComplete,
  #posPrintReceipt,
  #posCloseReceipt,
  .product .add-button,
  #submitButton,
  .tracking-actions button,
  #mobileCartBar,
  .secondary-button,
  .queue-filter,
  .queue-action,
  .admin-submit,
  .admin-archive,
  .admin-expo-action,
  .choice-select,
  .card form > button,
  .expo-button,
  .business-links a
):hover:not(:disabled) {
  filter:brightness(1.06) !important;
  transform:translateY(-1px) !important;
}

button:focus-visible,
a:focus-visible {
  outline:0;
}

:is(
  .queup-banner__actions a,
  .queup-banner__actions button,
  .login-submit,
  .panel-header-action,
  .card-actions > a,
  .card-actions > button,
  .row-button,
  dialog button,
  .accept-order,
  .mark-ready,
  .pos-method,
  #posLoadOrder,
  #posReleaseOrder,
  #posExact,
  #posClear,
  #posComplete,
  .product .add-button,
  #submitButton,
  .tracking-actions button,
  #mobileCartBar,
  .secondary-button,
  .queue-filter,
  .queue-action,
  .admin-submit,
  .admin-archive,
  .admin-expo-action,
  .choice-select,
  .card form > button,
  .expo-button,
  .business-links a
):focus-visible {
  box-shadow:0 0 0 3px var(--q-button-focus) !important;
}

button:disabled {
  cursor:not-allowed !important;
  opacity:.5 !important;
  transform:none !important;
}

/* Shared banner buttons: same size on every page immediately. */
.queup-banner__actions :is(a,button) {
  width:100% !important;
  min-height:var(--q-button-height-banner) !important;
  padding:5px 9px !important;
  border-color:rgba(255,227,110,.82) !important;
  background:var(--q-button-primary-bg) !important;
  color:#35152f !important;
  font-size:9px !important;
}

/* Full-width main actions. */
:is(
  .login-submit,
  .card-actions > a,
  .card-actions > button,
  #posClear,
  #posComplete,
  .product .add-button,
  #submitButton,
  .tracking-actions button,
  #mobileCartBar,
  .secondary-button,
  .admin-submit,
  .choice-select,
  .card form > button
) {
  width:100% !important;
}

/* Large primary actions. */
:is(.login-submit,#posComplete,#submitButton,#mobileCartBar) {
  min-height:var(--q-button-height-large) !important;
  padding:12px 18px !important;
  font-size:var(--q-button-font-large) !important;
}

/* Primary/yellow actions. */
:is(
  .login-submit,
  .card-actions > a,
  .card-actions > button,
  #posComplete,
  #submitButton,
  #mobileCartBar,
  .admin-submit,
  .wac-save,
  .queup-save-business,
  .choice-select,
  .card form > button
) {
  border-color:var(--q-button-primary-bg) !important;
  background:var(--q-button-primary-bg) !important;
  color:var(--q-button-primary-text) !important;
}

/* Green actions. */
:is(
  .confirm-button,
  .owner-ready-button,
  .visibility-button.show-product,
  .accept-order,
  .accept-button,
  .mark-ready,
  .ready-button,
  .mark-ready-button,
  .product .add-button,
  .queue-action.confirmed,
  .queue-action.ready,
  .queue-action.completed
) {
  border-color:var(--q-button-success-bg) !important;
  background:var(--q-button-success-bg) !important;
  color:var(--q-button-success-text) !important;
}

/* Red/destructive actions. */
:is(
  .cancel-button,
  .visibility-button:not(.show-product),
  #deleteProductButton,
  .product-delete-button,
  #posClear,
  .queue-action.cancelled,
  .admin-archive,
  #queupDeleteExpo,
  .queup-confirm-delete,
  dialog .delete-button
) {
  border-color:var(--q-button-danger-bg) !important;
  background:var(--q-button-danger-bg) !important;
  color:var(--q-button-danger-text) !important;
}

/* Grey actions. */
:is(.collect-button,#posCloseReceipt,.secondary-button) {
  border-color:var(--q-button-neutral-bg) !important;
  background:var(--q-button-neutral-bg) !important;
  color:var(--q-button-neutral-text) !important;
}

/* Choice buttons and their selected state. */
:is(.pos-method,.queue-filter).active,
:is(.pos-method,.queue-filter)[aria-pressed="true"] {
  border-color:var(--q-button-primary-bg) !important;
  background:rgba(245,200,76,.18) !important;
  color:#a56f00 !important;
}

/* Small square controls retain their special purpose. */
:is(
  .login-password-toggle,
  .pos-qty button,
  .pos-quantity button,
  .controls button,
  .queue-collapse,
  .collapse-button,
  #closeWhatsAppConfig,
  #queupCloseBusinessEdit,
  #queupCloseExpoEdit,
  #queupClosePermanentDelete,
  #queupCloseResetPassword
) {
  display:inline-grid !important;
  place-items:center !important;
  box-sizing:border-box !important;
  width:var(--q-button-height-icon) !important;
  min-width:var(--q-button-height-icon) !important;
  height:var(--q-button-height-icon) !important;
  min-height:var(--q-button-height-icon) !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--q-button-secondary-border) !important;
  border-radius:8px !important;
  background:var(--q-button-secondary-bg) !important;
  color:var(--q-button-secondary-text) !important;
  cursor:pointer !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1 !important;
}

/* Dark-page secondary color. */
html.queup-dark-theme,
html.queup-preparation-dark,
body:not(.customer-menu-page):not(.owner-light-theme):not(.staff-light):not(.pos-light):not(.admin-light):not(.queue-light):not(.login-light) {
  --q-button-secondary-bg:#172235;
  --q-button-secondary-text:#edf4ff;
  --q-button-secondary-border:#46566d;
  --q-button-neutral-bg:#475569;
}

/*
 * INDIVIDUAL BUTTON OVERRIDES
 * Add a selector here when only one button needs a different value.
 */
.collect-button {
  --q-button-neutral-bg:#526072;
}

.visibility-button:not(.show-product) {
  --q-button-danger-bg:#a63b1f;
}

@media (max-width:520px) {
  :root {
    --q-button-height-medium:38px;
    --q-button-height-large:46px;
  }
}