/* BAAKEE U5 Nov 9 V11 — screenshot-driven appearance polish.
   The existing calculator engine, conversion formulas, ledger and history remain intact.
   The compact native currency picker deliberately opts out of the large shared
   account/category selection sheet, so amounts keep a useful width on iPhone. */

/* Add button: replace legacy hardcoded emerald glyphs in quick-action pills.
   Keep semantic action shapes and all original click handlers. */
html[data-baakee-theme] body #app .u2-quick-panel .u2-float-pill svg,
html[data-baakee-theme] body #app .u2-quick-panel .u2-tool.u2-float-pill svg {
  color:var(--baakee-ink)!important;
  stroke:currentColor!important;
}
html[data-baakee-theme] body #app .u2-quick-panel .u2-float-pill:focus-visible {
  outline:2px solid var(--baakee-ink)!important;
  outline-offset:3px!important;
}

/* Calculator appearance is app-scoped and uses Baakee colorway variables,
   so the legacy emerald-only Update 2 modal rules cannot override the palette. */
html[data-baakee-theme] body #modal-root .modal .u1-calc {
  --accent:var(--baakee-ink);
  --u1-calc-ink:var(--baakee-body-ink);
  --u1-calc-muted:var(--baakee-secondary);
  --u1-calc-tint:var(--baakee-active-fill);
  --u1-calc-stroke:var(--baakee-glass-border);
  color:var(--u1-calc-ink)!important;
  min-width:0!important;
  gap:12px;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-calc-tabs button.active {
  color:var(--baakee-ink)!important;
  border-color:color-mix(in srgb,var(--baakee-ink) 34%,transparent)!important;
  background:var(--baakee-active-fill)!important;
  box-shadow:none!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc :is(.u1-keypad-active, #u1-calc-expression:focus-visible, .u1-fin-tools input:focus-visible) {
  outline:2px solid var(--baakee-ink)!important;
  outline-offset:2px!important;
  border-color:var(--baakee-ink)!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-calc-grid button.primary,
html[data-baakee-theme] body #modal-root .modal .u1-calc #u1-calc-equals {
  color:var(--baakee-action-text)!important;
  background:var(--baakee-action-fill)!important;
  border-color:var(--baakee-ink)!important;
  box-shadow:none!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc :is(.u1-fin-result>div,.u1-calc-grid button:not(.primary)) {
  border-color:var(--u1-calc-stroke)!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-fin-result>div {
  background:color-mix(in srgb,var(--baakee-soft) 36%,var(--baakee-surface))!important;
}

/* Currency converter: two compact, accessible select + amount pairs. The global
   U2 universal selector used to insert a 100%-wide button AFTER each select,
   forcing the numeric amount offscreen. That enhancement is disabled in the JS. */
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-dual {
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid var(--u1-calc-stroke)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--baakee-surface) 85%,var(--baakee-soft))!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-line {
  display:grid!important;
  grid-template-columns:minmax(0,108px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 12px!important;
  min-height:64px!important;
  box-sizing:border-box!important;
  min-width:0!important;
  border-inline-start:3px solid transparent!important;
  background:transparent!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-line.active {
  border-inline-start-color:var(--baakee-ink)!important;
  background:var(--baakee-active-fill)!important;
  color:var(--u1-calc-ink)!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-line select:not(.u2-choice-native) {
  all:revert;
  display:block!important;
  box-sizing:border-box!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:42px!important;
  height:42px!important;
  padding:8px 22px 8px 12px!important;
  margin:0!important;
  line-height:1.2!important;
  font-family:inherit!important;
  font-size:15px!important;
  border-radius:12px!important;
  border:1px solid var(--u1-calc-stroke)!important;
  color:var(--u1-calc-ink)!important;
  background-color:var(--baakee-surface)!important;
  background-image:none!important;
  box-shadow:none!important;
  text-align:left!important;
  cursor:pointer!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-line select:focus-visible {
  outline:2px solid var(--baakee-ink)!important;
  outline-offset:2px!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-line .u1-currency-amount {
  box-sizing:border-box!important;
  display:block!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:44px!important;
  padding:5px 2px!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-align:right!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--u1-calc-ink)!important;
  font-size:clamp(20px,5vw,29px)!important;
  font-weight:700!important;
  line-height:1.2!important;
  font-variant-numeric:tabular-nums;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-under > span,
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-rate-settings summary {
  color:var(--u1-calc-muted)!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-rate-settings {
  border-color:var(--u1-calc-stroke)!important;
}

/* Calculator history: a subtle glass disclosure and compact reusable rows,
   rather than bright-blue text on a heavy grey rectangle. */
html[data-baakee-theme] body #modal-root .modal .u1-calc-history {
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--u1-calc-stroke)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:color-mix(in srgb,var(--baakee-surface) 91%,var(--baakee-soft))!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history > summary {
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:12px 15px!important;
  margin:0!important;
  list-style:none!important;
  cursor:pointer!important;
  font-size:14px!important;
  font-weight:700!important;
  color:var(--u1-calc-ink)!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history > summary::-webkit-details-marker { display:none!important; }
html[data-baakee-theme] body #modal-root .modal .u1-calc-history > summary::after {
  content:'⌄';
  margin-left:0;
  font-size:20px;
  color:var(--baakee-ink)!important;
  line-height:1;
  transform:translateY(-2px);
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history[open] > summary::after { transform:rotate(180deg); }
html[data-baakee-theme] body #modal-root .modal .u1-calc-history > summary small {
  margin-left:auto;
  color:var(--u1-calc-muted)!important;
  font-size:12px!important;
  font-weight:500!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history .u1-history {
  max-height:215px!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  padding:3px 9px 9px!important;
  border-top:1px solid var(--u1-calc-stroke)!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history .u1-history .row-btn {
  display:flex!important;
  gap:12px!important;
  align-items:center!important;
  min-height:43px!important;
  padding:10px 11px!important;
  margin:4px 0 0!important;
  border:0!important;
  border-radius:11px!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--u1-calc-ink)!important;
  font-size:13px!important;
  font-weight:500!important;
  text-align:left!important;
  width:100%!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history .u1-history .row-btn:hover,
html[data-baakee-theme] body #modal-root .modal .u1-calc-history .u1-history .row-btn:focus-visible {
  background:var(--baakee-active-fill)!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history .u1-history .row-btn span {
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc-history .u1-history .row-btn b {
  flex:0 0 auto!important;
  margin-left:auto!important;
  color:var(--baakee-ink)!important;
  font-size:13px!important;
  font-variant-numeric:tabular-nums;
}
html[data-baakee-theme] body #modal-root .modal .u1-history-empty {
  color:var(--u1-calc-muted)!important;
  font-size:13px!important;
  padding:10px;
  margin:0;
}
/* Maximize on desktop/tablet only. A phone modal is already full width. */
@media(max-width:699px){
  html[data-baakee-theme] body #modal-root .modal .u1-calc-actions .u1-calc-expand-toggle {display:none!important;}
  html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-line {
    grid-template-columns:minmax(0,98px) minmax(0,1fr)!important;
    gap:8px!important;
    padding-inline:9px!important;
  }
}

/* A small, visually apparent chevron for the native compact currency control. */
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-pick {
  position:relative!important;
  display:block!important;
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-pick::after {
  content:'⌄';
  position:absolute;
  pointer-events:none;
  right:9px;
  top:50%;
  transform:translateY(-60%);
  color:var(--baakee-ink);
  font-size:19px;
  font-weight:600;
  line-height:1;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u1-currency-pick > select:not(.u2-choice-native) {
  font-weight:700!important;
  padding-right:27px!important;
}
/* The Financial tab has six complex choices, so its larger shared picker is
   intentionally retained but recolored to the chosen appearance. */
html[data-baakee-theme] body #modal-root .modal .u1-calc .u2-choice-trigger {
  border-color:var(--baakee-glass-border)!important;
  color:var(--baakee-body-ink)!important;
  background:var(--baakee-surface)!important;
  box-shadow:none!important;
}
html[data-baakee-theme] body #modal-root .modal .u1-calc .u2-choice-trigger :is(.u2-choice-selected-icon,.u2-choice-chevron),
html[data-baakee-theme] body #modal-root .modal .u1-calc .u2-choice-trigger .u2-choice-icon {
  color:var(--baakee-ink)!important;
}
html[data-baakee-theme] body .u2-choice-overlay.u1-calc-choice-overlay .u2-choice-sheet {
  background:var(--baakee-surface)!important;
  border-color:var(--baakee-glass-border)!important;
  color:var(--baakee-body-ink)!important;
}
html[data-baakee-theme] body .u2-choice-overlay.u1-calc-choice-overlay :is(.u2-choice-head h2,.u2-choice-option,.u2-choice-option-label) {
  color:var(--baakee-body-ink)!important;
}
html[data-baakee-theme] body .u2-choice-overlay.u1-calc-choice-overlay :is(.u2-choice-eyebrow,.u2-choice-group,.u2-choice-option-check) {
  color:var(--baakee-ink)!important;
}
html[data-baakee-theme] body .u2-choice-overlay.u1-calc-choice-overlay .u2-choice-option.is-selected {
  background:var(--baakee-active-fill)!important;
  border-color:var(--baakee-glass-border)!important;
}
html[data-baakee-theme] body .u2-choice-overlay.u1-calc-choice-overlay :is(.u2-choice-option-icon,.u2-choice-close) {
  background:var(--baakee-soft)!important;
  color:var(--baakee-ink)!important;
}
html[data-baakee-theme] body .u2-choice-overlay.u1-calc-choice-overlay .u2-choice-option:focus-visible {
  outline:2px solid var(--baakee-ink)!important;
}