/*
 * Refined .btn-default styling
 * - Uses CSS variables so palette can be adjusted in one place.
 * - Subtle depth + accessible focus outline.
 */
/* Neutral / professional palette (replaces prior vivid green) */
:root {
  --btn-default-color-start: #485566; /* base neutral */
  --btn-default-color-end:   #3b4653; /* deeper end */
  --btn-default-color-hover-start: #414d5b;
  --btn-default-color-hover-end:   #323c47;
  --btn-default-border: #313b46;
  --btn-default-border-hover: #2a333c;
  --btn-default-shadow: rgba(0,0,0,0.20);
  --btn-default-focus-ring: rgba(72,149,239,0.55); /* subtle blue accent focus */
  --btn-default-text: #f1f5f9;
}

/* Base */
/* Solid (less glossy) feel: remove strong gradient, keep subtle depth */
.btn-default {
  background: linear-gradient(165deg,var(--btn-default-color-start) 0%, var(--btn-default-color-end) 100%) !important;
  color: var(--btn-default-text) !important;
  border-color: var(--btn-default-border) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
  font-weight: 500;
  letter-spacing: .25px;
}

/* POS header buttons often include bg-white + btn-flat; force neutral theme */
.btn-default.bg-white,
.btn-default.btn-flat.bg-white,
.pos-header .btn-default.bg-white {
  background: linear-gradient(165deg,var(--btn-default-color-start) 0%, var(--btn-default-color-end) 100%) !important;
  color: var(--btn-default-text) !important;
  border-color: var(--btn-default-border) !important;
}

/* Icon-only sizing helper (if desired) */
.btn-default.btn-icon-only { padding:6px 8px; line-height:1; }

/* Hover / Active states */
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  background: linear-gradient(165deg,var(--btn-default-color-hover-start) 0%,var(--btn-default-color-hover-end) 100%) !important;
  border-color: var(--btn-default-border-hover) !important;
  color: var(--btn-default-text) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.28);
}

/* Active press feedback */
.btn-default:active { transform: translateY(1px); }

/* Focus outline for accessibility (keyboard navigation) */
.btn-default:focus-visible { outline: 2px solid var(--btn-default-focus-ring); outline-offset: 2px; }

/* High-contrast placement inside success backgrounds */
.bg-success .btn-default { color:#fff !important; }

/* Optional subtle disabled state improvement */
.btn-default[disabled], .btn-default.disabled {
  filter: grayscale(.25) brightness(.92);
  opacity: .70;
  cursor: not-allowed;
}

/* Optional alternate theme scope: apply .theme-neutral on body to enforce */
.theme-neutral .btn-default { background: linear-gradient(165deg,var(--btn-default-color-start),var(--btn-default-color-end)) !important; }
.theme-neutral .btn-default:hover { background: linear-gradient(165deg,var(--btn-default-color-hover-start),var(--btn-default-color-hover-end)) !important; }

/* Badge-like compact buttons in header/toolbars (if those buttons share .btn-default) */
.toolbar-compact .btn-default {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.15;
  border-radius: 4px;
}

/* POS: referencia bancaria requerida (modal_payment) */
.nc-note-required {
  border-style: dotted !important;
  border-width: 2px !important;
  border-color: #e7515a !important;
}

.nc-note-tooltip {
  margin-left: 6px;
  cursor: help;
}

/* =========================
   MODALS: global fix
   =========================
   Problem:
   - vendor*.css sets `.modal{background: rgba(0,0,0,.3)}` which adds an extra dark overlay.
   - theme-next intentionally uses translucent surfaces; combined with the above it makes the modal
     look like the backdrop is "over" the dialog.
   Fix:
   - Keep dimming strictly in `.modal-backdrop`.
   - Make theme-next modal surface fully opaque for readability.
*/

.modal {
  background: transparent !important;
}

body.nc-theme-next .modal-content {
  background: var(--nc-next-surface-strong) !important;
}

/* =========================
   Z-INDEX: layout vs modals
   =========================
   In some screens the header/sidebar may end up with a very high z-index.
   That makes the backdrop (black layer) stay behind the menu, and can even
   make the modal feel like it's "behind" the layout.

   We keep the layout under Bootstrap's modal stack, without forcing a fixed
   z-index on `.modal` / `.modal-backdrop` (so Bootstrap can still stack
   multiple open modals correctly).
*/

.main-header,
.main-header .navbar,
.main-sidebar,
.control-sidebar,
.control-sidebar-bg {
  z-index: 1000 !important;
}