/* Baakee Update 5 — Nov 4: approved embedded Finance previews and Transactions polish.
 * Isolated QA presentation only. Existing preview click handlers, finance values,
 * itemized bill calculations, transaction and payment logic remain unchanged. */

/* Finance sections: one parent surface, one nested list. The list should read as
   content belonging to its heading, not as a stack of floating pink buttons. */
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app main.u4-finance-home .u4-finance-overview-list > :is(.u4-finance-overview-section,.fin12-section:not(.u4-finance-overview-section)) {
  padding:17px 18px 15px!important;
  margin:0 0 13px!important;
  background:var(--baakee-card-fill)!important;
  border:1px solid var(--baakee-glass-border)!important;
  border-radius:23px!important;
  box-shadow:0 7px 22px color-mix(in srgb,var(--baakee-ink) 4%,transparent)!important;
  overflow:hidden!important;
  -webkit-backdrop-filter:blur(13px);
  backdrop-filter:blur(13px);
}
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list > :is(.u4-finance-overview-section,.fin12-section) :is(.fin12-head,.finance-clean-head) {
  padding:0 0 11px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list > :is(.u4-finance-overview-section,.fin12-section) :is(.fin12-rows,.finance-min-rows,.finance-clean-content) {
  display:block!important;
  margin:0!important;
  padding:2px 13px!important;
  border:1px solid color-mix(in srgb,var(--baakee-glass-border) 65%,transparent)!important;
  border-radius:15px!important;
  background:color-mix(in srgb,var(--baakee-active-fill) 28%,var(--baakee-card-fill))!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 27%,transparent)!important;
}
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list > :is(.u4-finance-overview-section,.fin12-section) :is(.fin12-row,.finance-min-row) {
  box-sizing:border-box!important;
  width:100%!important;
  min-height:62px!important;
  padding:11px 1px!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--baakee-glass-border) 64%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  transform:none;
  color:var(--baakee-body-ink)!important;
}
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list > :is(.u4-finance-overview-section,.fin12-section) :is(.fin12-row,.finance-min-row):last-child {
  border-bottom:0!important;
}
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list :is(.fin12-row,.finance-min-row) :is(b,strong) { color:var(--baakee-body-ink)!important; }
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list :is(.fin12-row,.finance-min-row) :is(small,span) { color:var(--baakee-secondary)!important; }
@media (hover:hover) {
  html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list :is(.fin12-row.u4-preview-open,.finance-min-row[role="button"]):hover {
    background:color-mix(in srgb,var(--baakee-active-fill) 55%,transparent)!important;
  }
}
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list .fin12-row.u4-preview-open:active {
  background:var(--baakee-active-fill)!important;
}
/* Wallet retains the approved, full-color physical card carousel. */
html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list .fin12-section:has(.fin12-carousel) .fin12-carousel {
  margin-top:4px!important;
  background:transparent!important;
  border:0!important;
  padding-inline:0!important;
}
@media(max-width:520px){
  html[data-baakee-theme] body.rufiyaa-liquid-glass #app main.u4-finance-home .u4-finance-overview-list > :is(.u4-finance-overview-section,.fin12-section){padding:15px 14px!important}
  html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list :is(.fin12-rows,.finance-min-rows,.finance-clean-content){padding-inline:10px!important}
  html[data-baakee-theme] #app main.u4-finance-home .u4-finance-overview-list .fin12-row strong{font-size:12.5px!important;white-space:normal!important;text-align:right!important;max-width:48%!important}
}

/* Add Transaction: a single premium segmented strip, not four touching boxed controls.
   Keep the four distinct existing modes and their event handlers. */
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal .tx-type-seg-v128 {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
  padding:5px!important;
  margin:0 0 18px!important;
  border:1px solid var(--baakee-glass-border)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--baakee-active-fill) 35%,var(--baakee-panel-fill))!important;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--baakee-ink) 5%,transparent)!important;
}
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal .tx-type-seg-v128 > button {
  min-height:45px!important;
  min-width:0!important;
  margin:0!important;
  padding:8px 3px!important;
  font-size:clamp(12px,1.5vw,14px)!important;
  font-weight:660!important;
  letter-spacing:0!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:transparent!important;
  color:var(--baakee-body-ink)!important;
  -webkit-text-fill-color:var(--baakee-body-ink)!important;
  box-shadow:none!important;
}
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal .tx-type-seg-v128 > button.active,
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal .tx-type-seg-v128 > button[aria-selected="true"] {
  border-color:var(--baakee-glass-border)!important;
  background:var(--baakee-active-fill)!important;
  color:var(--baakee-ink)!important;
  -webkit-text-fill-color:var(--baakee-ink)!important;
  box-shadow:0 2px 7px color-mix(in srgb,var(--baakee-ink) 8%,transparent)!important;
}
html[data-baakee-theme] #modal-root .modal:has(.tx-type-seg-v128) :is(.payment-method-cards-v128 button.active,.v1323-atm-mode button.active,.u1-method.active,.u1-payment-kind.active) {
  background:var(--baakee-active-fill)!important;
  border-color:var(--baakee-glass-border)!important;
  color:var(--baakee-ink)!important;
}
html[data-baakee-theme] #modal-root .modal:has(.tx-type-seg-v128) :is(.tx-account-select,.add-tx-v128 select,.add-tx-v128 .select-display,.add-tx-v128 .field input){border-color:var(--baakee-glass-border)!important}

/* Make Bill: preserve all editable data, live totals, splitting, restore-draft
   and validation, but provide a properly scrolling, legible two-step sheet. */
html[data-baakee-theme] body #modal-root .modal-wrap:has(#u1-bill-form) > .modal {
  box-sizing:border-box!important;
  width:min(94vw,720px)!important;
  max-width:720px!important;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 36px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scroll-padding-bottom:118px!important;
}
html[data-baakee-theme] #modal-root .modal:has(#u1-bill-form) .u1-bill-progress {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  margin:6px 0 16px!important;
}
html[data-baakee-theme] #modal-root .modal:has(#u1-bill-form) .u1-bill-progress span {
  border:1px solid var(--baakee-glass-border)!important;
  background:transparent!important;
  color:var(--baakee-secondary)!important;
  border-radius:12px!important;
  padding:10px 6px!important;
  font-size:12px!important;
}
html[data-baakee-theme] #modal-root .modal:has(#u1-bill-form) .u1-bill-progress span.active{
  background:var(--baakee-active-fill)!important;
  color:var(--baakee-ink)!important;
  font-weight:750!important;
}
html[data-baakee-theme] #u1-bill-form :is(.u1-bill-item,.qa-live-bill-summary){
  background:var(--baakee-card-fill)!important;
  border:1px solid var(--baakee-glass-border)!important;
  border-radius:15px!important;
  overflow:hidden!important;
}
html[data-baakee-theme] #u1-bill-form .u1-bill-item>summary{min-height:49px!important;padding:11px 12px!important}
html[data-baakee-theme] #u1-bill-form .u1-bill-item-fields{padding:12px!important}
html[data-baakee-theme] #u1-bill-form .u1-bill-item .u1-item-actions{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:7px!important;
}
html[data-baakee-theme] #u1-bill-form .u1-bill-item .u1-item-actions button {
  flex:1 1 auto!important;min-width:84px!important;min-height:38px!important;margin:0!important;
}
/* A separate Add Item button already exists immediately below the list. */
html[data-baakee-theme] #u1-bill-form .u1-item-actions button[onclick^="addBillItemU1"]{display:none!important}
html[data-baakee-theme] #u1-bill-form .u1-bill-add{
  width:100%!important;min-height:44px!important;background:var(--baakee-active-fill)!important;
  color:var(--baakee-ink)!important;border:1px dashed var(--baakee-glass-border)!important;border-radius:13px!important;
}
html[data-baakee-theme] #u1-bill-form .qa-live-bill-summary{padding:12px!important}
html[data-baakee-theme] body #u1-bill-form .u1-bill-sticky {
  position:sticky!important;
  bottom:0!important;
  z-index:4!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  padding:13px 10px max(10px,env(safe-area-inset-bottom,0px))!important;
  margin:15px -4px 0!important;
  border-top:1px solid var(--baakee-glass-border)!important;
  border-radius:14px 14px 0 0!important;
  background:var(--baakee-panel-fill)!important;
  box-shadow:0 -10px 20px color-mix(in srgb,var(--baakee-ink) 6%,transparent)!important;
}
html[data-baakee-theme] #u1-bill-form .u1-bill-sticky > button {width:100%!important;min-height:48px!important}
html[data-baakee-theme] #u1-bill-form .u1-bill-sticky-total {width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
html[data-baakee-theme] #u1-bill-form .u1-bill-sticky-total strong{color:var(--baakee-ink)!important}
@media (max-width:530px){
  html[data-baakee-theme] #u1-bill-form .u1-bill-compact-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  html[data-baakee-theme] #u1-bill-form .u1-bill-compact-meta>.field:last-child{grid-column:span 2!important}
  html[data-baakee-theme] #u1-bill-form .u1-bill-compact-meta :is(input,select){font-size:14px!important;min-height:44px!important}
  html[data-baakee-theme] body #modal-root .modal-wrap:has(#u1-bill-form)>.modal{width:calc(100% - 20px)!important;padding-inline:14px!important}
}

/* Transaction semantics: distinguish inflow, outflow, own movement, refund,
   savings, card payment and people repayment with consistent compact glyphs. */
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind] .qa-tx-icon {
  display:grid!important;place-items:center!important;
  width:42px!important;height:42px!important;flex:0 0 42px!important;
  border-radius:13px!important;
  color:var(--baakee-ink,var(--accent))!important;
  background:var(--baakee-active-fill,rgba(120,120,120,.07))!important;
}
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind] .qa-tx-icon svg {
  display:block!important;width:21px!important;height:21px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind="income"] .qa-tx-icon,
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind="refund"] .qa-tx-icon,
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind="reimbursement"] .qa-tx-icon {color:var(--finance-positive,#158667)!important;background:color-mix(in srgb,var(--finance-positive,#158667) 9%,transparent)!important}
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind="expense"] .qa-tx-icon {color:var(--baakee-ink,var(--accent))!important}
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind="transfer"] .qa-tx-icon,
#app .tx-date-group .qa-minimal-row[data-baakee-tx-kind="savings"] .qa-tx-icon {color:var(--baakee-ink,var(--accent))!important;background:var(--baakee-active-fill)!important}
#app .tx-date-group .qa-minimal-row .qa-tx-main small{line-height:1.35!important;max-width:100%!important}
@media (prefers-reduced-motion:reduce){
  #app main.u4-finance-home .fin12-row.u4-preview-open,.tx-type-seg-v128>button{transition:none!important}
}
/* Final specificity bridge: legacy app-wide Finance rules style every button as
   an independent tinted card. Limit this override to the embedded previews. */
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app main.u4-finance-home .u4-finance-overview-list > .fin12-section .fin12-rows > .fin12-row.u4-preview-open,
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app main.u4-finance-home .u4-finance-overview-list > .fin12-section .fin12-rows > .fin12-row:not(.u4-preview-open){
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--baakee-glass-border) 64%,transparent)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:11px 2px!important;
}
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app main.u4-finance-home .u4-finance-overview-list > .fin12-section .fin12-rows > .fin12-row:last-child{
  border-bottom:0!important;
}
/* Alternate legacy Finance preview renderer uses .finance-min-row rather than
   .fin12-row. Give it the exact same embedded-list rhythm. */
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app main.u4-finance-home .u4-finance-overview-list > .u4-finance-overview-section .finance-min-rows > .finance-min-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--baakee-glass-border) 64%,transparent)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:11px 2px!important;
  min-height:60px!important;
}
html[data-baakee-theme] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app main.u4-finance-home .u4-finance-overview-list > .u4-finance-overview-section .finance-min-rows > .finance-min-row:last-child {border-bottom:0!important}