/* Serveotik — topbar calculator, Modernist theme.
 * Mirrors the claude.ai/design "Calculator construction kit" default palette:
 * warm cream bg, white number buttons, near-black operators, orange equals.
 * This file loads AFTER vendor.css so it overrides the legacy rules inside it
 * (e.g. `#calculator button { height:35px; width:35px; border:none !important }`).
 */

#calculator.ccalc {
  --ccalc-bg:         #f2efe9;
  --ccalc-surface:    #ffffff;
  --ccalc-num:        #ffffff;
  --ccalc-num-ink:    #1a1918;
  --ccalc-op:         #1a1918;
  --ccalc-op-ink:     #ffffff;
  --ccalc-util:       #e7e3db;
  --ccalc-util-ink:   #1a1918;
  --ccalc-accent:     #ff5b2e;
  --ccalc-accent-ink: #ffffff;
  --ccalc-screen-bg:  #ffffff;
  --ccalc-screen-ink: #1a1918;

  --ccalc-r-outer: 20px;
  --ccalc-r-btn:   12px;
  --ccalc-gap:     7px;
  --ccalc-pad:     14px;
  --ccalc-btn-h:   40px;

  background: var(--ccalc-bg) !important;
  padding: var(--ccalc-pad) !important;
  border-radius: var(--ccalc-r-outer) !important;
  box-shadow:
    0 18px 36px -18px rgba(26,25,24,0.25),
    0 6px 14px -6px rgba(26,25,24,0.15) !important;
  width: 260px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  color: var(--ccalc-op);
  direction: ltr;
  user-select: none;
}

#calculator.ccalc *,
#calculator.ccalc *::before,
#calculator.ccalc *::after {
  box-sizing: inherit;
}

/* ---- Screen ---- */
#calculator.ccalc .ccalc__form {
  margin: 0 0 var(--ccalc-gap) 0 !important;
  display: block;
}
#calculator.ccalc .ccalc__screen {
  background: var(--ccalc-screen-bg);
  color: var(--ccalc-screen-ink);
  border-radius: calc(var(--ccalc-r-btn) + 2px);
  padding: 14px 16px;
  min-height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
}
#calculator.ccalc .ccalc__value {
  width: 100% !important;
  height: 30px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ccalc-screen-ink) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#calculator.ccalc .ccalc__value::placeholder { color: rgba(26,25,24,0.3); }

/* ---- Keypad (CSS grid, 4 cols) ---- */
#calculator.ccalc .ccalc__keypad {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--ccalc-gap) !important;
  width: 100% !important;
}

/* ---- Buttons — override every vendor.css `#calculator button` rule.
   Note: we deliberately use a single-class selector (1,2,0) instead of
   `button.ccalc__btn` (1,2,1) so the `--op`, `--util`, `--accent` variant
   rules at the same specificity can win via source order. */
#calculator.ccalc .ccalc__btn {
  height: var(--ccalc-btn-h) !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--ccalc-r-btn) !important;
  background: var(--ccalc-num) !important;
  color: var(--ccalc-num-ink) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease;
  font-variant-numeric: tabular-nums;
  user-select: none;
  text-align: center !important;
  text-transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  grid-column: auto;
}
#calculator.ccalc .ccalc__btn:hover { background: #f8f6f1 !important; }
#calculator.ccalc .ccalc__btn:active { transform: scale(0.96); }

#calculator.ccalc .ccalc__btn--util {
  background: var(--ccalc-util) !important;
  color: var(--ccalc-util-ink) !important;
}
#calculator.ccalc .ccalc__btn--util:hover { background: #dcd6ca !important; }

#calculator.ccalc .ccalc__btn--op {
  background: var(--ccalc-op) !important;
  color: var(--ccalc-op-ink) !important;
  font-size: 18px !important;
}
#calculator.ccalc .ccalc__btn--op:hover { background: #2a2826 !important; }

#calculator.ccalc .ccalc__btn--accent {
  background: var(--ccalc-accent) !important;
  color: var(--ccalc-accent-ink) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
#calculator.ccalc .ccalc__btn--accent:hover { background: #ff4715 !important; }

#calculator.ccalc .ccalc__btn--wide { grid-column: span 2 !important; }

/* Focus ring (subtle accent-tinted) */
#calculator.ccalc .ccalc__btn:focus-visible {
  outline: 2px solid rgba(255,91,46,0.35) !important;
  outline-offset: 1px !important;
}

/* ---- Popover host adjustments — target the popover wrapper that CONTAINS
 * our calculator, without using :has (not in all Safari versions yet).
 * We do the styling via the inner .ccalc box and hide the Bootstrap chrome
 * around it: title, arrow, default padding. */
.popover:has(#calculator.ccalc),
body > .popover:has(#calculator.ccalc) {
  border-radius: 24px !important;
  border: 1px solid rgba(26,25,24,0.08) !important;
  box-shadow: 0 24px 48px -20px rgba(26,25,24,0.35) !important;
  background: #f2efe9 !important;
  padding: 0 !important;
  max-width: none !important;
}
.popover:has(#calculator.ccalc) .popover-title { display: none !important; }
.popover:has(#calculator.ccalc) .popover-content { padding: 0 !important; }
.popover:has(#calculator.ccalc) > .arrow { display: none !important; }

/* Fallback for browsers lacking :has — keep the legacy .popover-content
 * and .arrow scope so the topbar + POS popovers still look OK even without
 * the outer shell restyle. */
.navbar-custom-menu .popover-content,
.pos-header .popover-content {
  padding: 6px;
}
.navbar-custom-menu .popover > .arrow,
.pos-header .popover > .arrow { display: none; }

/* Explicitly pin light-mode colors — Serveotik ERP UI is light throughout,
 * and the design we're matching is distinctly light-mode (warm cream bg,
 * white num buttons, near-black ops, orange equals). Don't auto-flip on
 * OS dark mode. Users who want dark should use the app's own dark toggle.
 */
#calculator.ccalc { color-scheme: light; }