/* Karin v5.78 — UI Closure Layer
   Late-loaded all-theme component authority.
   Purpose: keep shared component geometry/interaction authoritative after legacy route-local inline CSS.
   Visual design remains owned by karin-ui.css; dark-only compatibility remains in karin-dark-closure.css. */


/* Shared component normalization — intentionally geometry/behavior only. */
body.karin-app-page :where(.karin-card,.karin-modal-shell){
  box-sizing:border-box!important;
}
body.karin-app-page .karin-modal :where(input,select,textarea,button,.karin-button,.button){
  font:inherit;
}
body.karin-app-page :where(a.btn,a.button,button.btn,button.button){
  text-decoration:none!important;
}

body.karin-app-page .karin-modal.karin-receipt-viewer{
  padding:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
body.karin-app-page .karin-receipt-viewer-shell{
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:0!important;
}
body.karin-app-page .karin-receipt-viewer-shell .karin-receipt-workspace{
  flex:1 1 auto!important;
  min-height:0!important;
}
body.karin-app-page .karin-receipt-viewer-shell .karin-receipt-stage{
  min-height:0!important;
}
body.karin-app-page .karin-modal__header{
  box-sizing:border-box!important;
}
body.karin-app-page .karin-modal__footer{
  box-sizing:border-box!important;
}

/* ========================================================================
   Karin v5.78 — Canonical Modal Shell
   Static markup now owns the canonical modal classes. Legacy family names
   remain only as route/size hooks; geometry belongs to this shared contract.
   ======================================================================== */
html.karin-modal-lock,
body.karin-modal-lock,
body.modal-open{
  overflow:hidden!important;
}
body.karin-app-page .karin-modal{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  z-index:var(--karin-z-modal,999999)!important;
  padding:24px!important;
  align-items:center!important;
  justify-content:center!important;
  direction:rtl!important;
  background:var(--karin-overlay,rgba(15,23,42,.20))!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}
body.karin-app-page .karin-modal.open{display:flex!important;}
body.karin-app-page :is(.karin-modal-backdrop,.role-backdrop){
  position:absolute!important;
  inset:0!important;
  background:transparent!important;
  pointer-events:auto!important;
}
body.karin-app-page .karin-modal-shell{
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  max-width:calc(100vw - 48px)!important;
  max-height:calc(100dvh - 48px)!important;
  margin-inline:auto!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  overscroll-behavior:contain!important;
  background:var(--karin-surface)!important;
  color:var(--karin-text)!important;
  border:1px solid var(--karin-border)!important;
  border-radius:var(--karin-radius-modal,18px)!important;
  box-shadow:var(--karin-shadow-modal)!important;
}
/* Shared size/viewport modifiers. Feature pages compose these classes instead
   of redefining modal geometry locally. */
body.karin-app-page .karin-modal-shell--lg{
  width:min(920px,calc(100vw - 48px))!important;
}
body.karin-app-page .karin-modal-shell--viewport{
  height:min(860px,calc(100dvh - 48px))!important;
  max-height:calc(100dvh - 48px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-columns:minmax(0,1fr)!important;
}
/* Long modal bodies are content stacks, not flex columns. Flex shrinking used to
   compress cards until their overflow was clipped, so no actual scroll range
   existed. Grid/max-content keeps every section at its natural height and the
   bounded middle row becomes the single vertical scroll owner. */
body.karin-app-page .karin-modal-shell > .karin-modal__body--stack{
  display:grid!important;
  grid-auto-rows:max-content!important;
  align-content:start!important;
  gap:var(--karin-space-4)!important;
  padding:var(--karin-space-5)!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
  touch-action:pan-y!important;
}
body.karin-app-page .karin-modal-shell > .karin-modal__body--stack > *{
  min-width:0!important;
  min-height:max-content!important;
}
body.karin-app-page .karin-modal-shell--viewport > .karin-modal__header{
  grid-row:1!important;
}
body.karin-app-page .karin-modal-shell--viewport > .karin-modal__body{
  grid-row:2!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
}
body.karin-app-page .karin-modal-shell--viewport > .karin-modal__footer{
  grid-row:3!important;
  position:relative!important;
  inset:auto!important;
  bottom:auto!important;
  margin:0!important;
}
body.karin-app-page .karin-modal__header{
  position:relative!important;
  flex:0 0 auto!important;
  z-index:20!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  background:var(--karin-surface)!important;
  border-bottom:1px solid var(--karin-border)!important;
}
body.karin-app-page .karin-modal__header :is(h1,h2,h3){
  min-width:0!important;
  margin:0!important;
  color:var(--karin-text)!important;
}
body.karin-app-page .karin-modal-shell > form,
body.karin-app-page .karin-modal-shell > .karin-modal__body,
body.karin-app-page .karin-modal-shell > #variant-list{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 120px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
body.karin-app-page .karin-modal-shell :is(.karin-modal__footer,form:not(.karin-modal-form--compact) > .karin-actions:last-child){
  position:sticky!important;
  bottom:0!important;
  z-index:35!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  background:var(--karin-surface)!important;
  border-top:1px solid var(--karin-border)!important;
}

/* Karin v5.119 — short desktop modal forms stay in normal document flow.
   Mobile reuses the sticky action contract below. */
@media(min-width:761px){
  body.karin-app-page .karin-modal-shell > form.karin-modal-form--compact{padding-bottom:18px!important;}
  body.karin-app-page .karin-modal-shell > form.karin-modal-form--compact > .karin-actions:last-child{position:static!important;margin:16px 0 0!important;}
}

/* ========================================================================
   Karin v5.71 — Consolidated Mobile Modal Viewport & Sticky Actions Contract
   Late shared compatibility layer (all themes): legacy route-local modal
   geometry must not push action rows below iOS Safari's dynamic viewport.
   ======================================================================== */
@media(max-width:760px){
  html.karin-modal-lock,
  body.karin-modal-lock,
  body.modal-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
    width:100%!important;
  }

  body.karin-app-page .karin-modal{
    box-sizing:border-box!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:
      max(6px,env(safe-area-inset-top))
      6px
      max(6px,env(safe-area-inset-bottom))!important;
    align-items:stretch!important;
    justify-content:center!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  /* Every long modal panel uses one bounded viewport.  Panels with a direct
     form keep header/footer outside the page scroll; form content owns scroll. */
  body.karin-app-page .karin-modal-shell{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    min-height:0!important;
    margin:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
  }

  body.karin-app-page .karin-modal-shell--lg,
  body.karin-app-page .karin-modal-shell--viewport{
    width:100%!important;
    max-width:100%!important;
  }
  body.karin-app-page .karin-modal-shell--viewport{
    height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  body.karin-app-page .karin-modal-shell > .karin-modal__body--stack{
    padding:var(--karin-space-3)!important;
    gap:var(--karin-space-3)!important;
    display:grid!important;
    grid-auto-rows:max-content!important;
    align-content:start!important;
  }

  body.karin-app-page .karin-modal-shell > .karin-modal__header{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
    z-index:20!important;
    margin:0!important;
  }

  /* Direct forms are the scroll owners. This specifically supersedes the old
     92/96vh route-local limits in users/employees and equivalent dialogs. */
  body.karin-app-page .karin-modal-shell > form{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:stable!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }

  /* Common non-form modal bodies/lists use the same internal-scroll contract. */
  body.karin-app-page .karin-modal-shell > :is(.karin-modal__body,#variant-list,.variant-list,.product-list,.inventory-detail-table,.delivery-items-wrap){
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Action rows stay reachable above Safari/home-indicator chrome.  Keeping
     them sticky also prevents the iOS rubber-band from making them disappear
     again after the user reaches the end of a long form. */
  body.karin-app-page .karin-modal-shell :is(.karin-modal__footer,.karin-actions){
    position:sticky!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:40!important;
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    margin:12px 0 0!important;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom))!important;
    background:var(--karin-surface)!important;
    border-top:1px solid var(--karin-border)!important;
    box-shadow:0 -8px 18px color-mix(in srgb,var(--karin-bg) 72%,transparent)!important;
  }

  body.karin-app-page .karin-modal-shell :is(.karin-modal__footer,.karin-actions) > :is(button,.karin-button,.button,a){
    max-width:100%!important;
    min-width:0!important;
    flex:1 1 132px!important;
    margin:0!important;
  }

  /* If a legacy modal has no dedicated scroll body/form, preserve usability by
     allowing the panel itself to scroll rather than clipping its contents. */
  body.karin-app-page .karin-modal-shell:not(:has(> form)):not(:has(> .karin-modal__body)):not(:has(> #variant-list)){
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

/* Native <dialog> members of the same modal system. */
@media(max-width:760px){
  body.karin-app-page :is(.inventory-activation-dialog,.stock-deactivate-dialog){
    box-sizing:border-box!important;
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    margin:auto!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  body.karin-app-page :is(.inventory-activation-dialog,.stock-deactivate-dialog) > .karin-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:40!important;
    box-sizing:border-box!important;
    width:100%!important;
    margin:12px 0 0!important;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom))!important;
    background:var(--karin-surface)!important;
    border-top:1px solid var(--karin-border)!important;
  }
}

/* ========================================================================
   Karin v5.71 — Mobile operational UI stabilization
   Late geometry only: reports selector, detail action grids, transfer actions,
   and the delivery modal scroll owner. Visual dark surfaces stay in the dark
   compatibility layer below this asset in the load order.
   ======================================================================== */
@media(max-width:760px){
  /* Reports: keep the section selector inside the report flow instead of a
     floating/fixed island detached from the page. */
  body.karin-page-reports{padding-top:0!important;}
  body.karin-page-reports .reports-mobile-nav{
    position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;
    margin:0 0 12px!important;padding:0!important;background:transparent!important;
    border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    overflow:visible!important;z-index:12!important;
  }
  body.karin-page-reports .reports-mobile-select-wrap{
    position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    width:100%!important;margin:0!important;padding:0!important;background:transparent!important;
    border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    z-index:auto!important;
  }
  body.karin-page-reports .reports-mobile-select{
    display:block!important;width:100%!important;height:46px!important;min-height:46px!important;
    margin:0!important;padding:0 14px!important;border-radius:14px!important;text-align:right!important;
    box-sizing:border-box!important;
  }

  /* Detail pages: primary actions become a deliberate 2-column toolbar rather
     than a narrow vertical stack. Delete/POST form gets a calm full-width row. */
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head{
    align-items:stretch!important;gap:12px!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;width:100%!important;max-width:none!important;align-items:stretch!important;
    margin:0!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions>:is(a,button,form){
    width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;box-sizing:border-box!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions>:is(a,button){
    display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;
    padding:8px 10px!important;border-radius:12px!important;white-space:normal!important;text-align:center!important;line-height:1.5!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions>form{
    grid-column:1/-1!important;display:block!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions>form>button{
    width:100%!important;min-height:44px!important;margin:0!important;border-radius:12px!important;
  }

  /* Shared stock-head action rows (transfers and pages using the same pattern)
     fill the mobile card cleanly in two columns. */
  body.karin-app-page .stock-head>.karin-actions{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;width:100%!important;max-width:none!important;align-items:stretch!important;
  }
  body.karin-app-page .stock-head>.karin-actions>:is(a,button,form){min-width:0!important;max-width:none!important;margin:0!important;}
  body.karin-app-page .stock-head>.karin-actions>:is(a,button){width:100%!important;justify-content:center!important;}
  body.karin-app-page .stock-head>.karin-actions>form>button{width:100%!important;margin:0!important;}

  /* Delivery modal is structurally different from ordinary form-only modals:
     summary + items + optional exchange + delivery form are siblings. Let the
     panel be the single vertical scroll owner so users can actually reach the
     lower sections on iOS Safari. */
  body.karin-page-order-delivery .delivery-modal-card-v322{
    display:block!important;overflow-y:auto!important;overflow-x:hidden!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  body.karin-page-order-delivery .delivery-modal-card-v322>.karin-modal__header{
    position:sticky!important;top:0!important;z-index:55!important;flex:none!important;
  }
  body.karin-page-order-delivery .delivery-modal-card-v322>.delivery-summary-strip,
  body.karin-page-order-delivery .delivery-modal-card-v322>.delivery-items-section-title,
  body.karin-page-order-delivery .delivery-modal-card-v322>.delivery-items-wrap,
  body.karin-page-order-delivery .delivery-modal-card-v322>.delivery-exchange-box,
  body.karin-page-order-delivery .delivery-modal-card-v322>form.delivery-modal-form{
    flex:none!important;min-height:0!important;max-height:none!important;
  }
  body.karin-page-order-delivery .delivery-modal-card-v322>.delivery-items-wrap{
    overflow-x:auto!important;overflow-y:visible!important;max-height:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.karin-page-order-delivery .delivery-modal-card-v322>form.delivery-modal-form{
    display:block!important;height:auto!important;overflow:visible!important;padding-bottom:0!important;
  }
  body.karin-page-order-delivery .delivery-modal-card-v322 .delivery-exchange-box,
  body.karin-page-order-delivery .delivery-modal-card-v322 .delivery-exchange-form{
    max-height:none!important;overflow:visible!important;
  }
}

@media(max-width:420px){
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions{
    grid-template-columns:1fr 1fr!important;
  }
}


/* ========================================================================
   Karin v5.73 — Mobile UX Optimization System
   A shared responsive layout contract for operational pages. This layer
   deliberately changes mobile geometry only; desktop visual identity and
   business behavior remain untouched.
   ======================================================================== */
@media(max-width:760px){
  body.karin-app-page{
    --karin-mobile-gap:10px;
    --karin-mobile-gap-sm:7px;
    --karin-mobile-control-h:42px;
    --karin-mobile-radius:13px;
  }

  /* v5.288: dashboard mobile composition is now owned by canonical composition primitives. */

  /* --------------------------------------------------------------------
     Shared page action bars. Operational actions use the available width in
     two columns instead of becoming a long full-width vertical list.
     -------------------------------------------------------------------- */
  body.karin-app-page :is(
    .sales-head-actions,
    .site-order-actions,
    .supplier-profile-actions,
    .cheque-view-actions,
    .karin-admin-hero-actions,
    .sold-report-actions,
    .ledger-actions,
    .health-actions,
    .deploy-actions,
    .audit-head-actions,
    .purchase-head .karin-actions,
    .karin-sites-hero-actions
  ){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:none!important;
    align-items:stretch!important;
  }
  body.karin-app-page :is(
    .sales-head-actions,
    .site-order-actions,
    .supplier-profile-actions,
    .cheque-view-actions,
    .karin-admin-hero-actions,
    .sold-report-actions,
    .ledger-actions,
    .health-actions,
    .deploy-actions,
    .audit-head-actions,
    .purchase-head .karin-actions,
    .karin-sites-hero-actions
  ) > :is(a,button,form){
    min-width:0!important;
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  body.karin-app-page :is(
    .sales-head-actions,
    .site-order-actions,
    .supplier-profile-actions,
    .cheque-view-actions,
    .karin-admin-hero-actions,
    .sold-report-actions,
    .ledger-actions,
    .health-actions,
    .deploy-actions,
    .audit-head-actions,
    .purchase-head .karin-actions,
    .karin-sites-hero-actions
  ) > :is(a,button),
  body.karin-app-page :is(
    .sales-head-actions,
    .site-order-actions,
    .supplier-profile-actions,
    .cheque-view-actions,
    .karin-admin-hero-actions,
    .sold-report-actions,
    .ledger-actions,
    .health-actions,
    .deploy-actions,
    .audit-head-actions,
    .purchase-head .karin-actions,
    .karin-sites-hero-actions
  ) > form > button{
    min-height:var(--karin-mobile-control-h)!important;
    width:100%!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    line-height:1.45!important;
  }

  /* Shared stock/page heads already use a two-column grid; normalize tap size
     and let a single action stay compact rather than pretending to need 50%. */
  body.karin-app-page .stock-head>.karin-actions{
    gap:8px!important;
  }
  body.karin-app-page .stock-head>.karin-actions>:is(a,button),
  body.karin-app-page .stock-head>.karin-actions>form>button{
    min-height:var(--karin-mobile-control-h)!important;
    padding:8px 10px!important;
    border-radius:11px!important;
    white-space:normal!important;
    line-height:1.45!important;
  }
  body.karin-app-page .stock-head>.karin-actions>:only-child{
    width:auto!important;
    min-width:132px!important;
    justify-self:start!important;
  }

  /* --------------------------------------------------------------------
     Detail actions: destructive action is intentionally separated but not
     promoted into the largest visual element on the screen.
     -------------------------------------------------------------------- */
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions{
    row-gap:8px!important;
    margin-bottom:12px!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions>form:has(>.karin-button-danger){
    grid-column:1/-1!important;
    width:100%!important;
    display:flex!important;
    justify-content:flex-start!important;
    margin:4px 0 4px!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions>form:has(>.karin-button-danger)>.karin-button-danger{
    width:auto!important;
    min-width:122px!important;
    max-width:170px!important;
    min-height:40px!important;
    padding:8px 18px!important;
    background:var(--karin-danger-surface)!important;
    border:1px solid var(--karin-danger-border)!important;
    color:var(--karin-danger-text)!important;
    box-shadow:none!important;
  }
  body:is(.karin-page-sale-view,.karin-page-site-sale-view) .sale-view-main-info .stock-head>.karin-actions>form:has(>.karin-button-danger)>.karin-button-danger:hover{
    filter:brightness(.97)!important;
  }

  /* --------------------------------------------------------------------
     Filters: buttons/actions stay compact and balanced. Form fields keep their
     existing page-specific layout; only action rows are standardized here.
     -------------------------------------------------------------------- */
  body.karin-app-page :is(
    .sales-filter-actions,
    .products-filter-actions,
    .stock-filter-actions,
    .transfer-filter-actions,
    .site-orders-filter-actions,
    .res-filter-actions,
    .ledger-filter-actions,
    .commission-filter-actions,
    .sold-report-actions,
    .finance-filter-action,
    .expense-filter-action
  ){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    align-items:stretch!important;
  }
  body.karin-app-page :is(
    .sales-filter-actions,
    .products-filter-actions,
    .stock-filter-actions,
    .transfer-filter-actions,
    .site-orders-filter-actions,
    .res-filter-actions,
    .ledger-filter-actions,
    .commission-filter-actions,
    .sold-report-actions,
    .finance-filter-action,
    .expense-filter-action
  ) > :is(a,button,input[type="submit"]){
    width:100%!important;
    min-width:0!important;
    min-height:var(--karin-mobile-control-h)!important;
    margin:0!important;
    padding:8px 10px!important;
    white-space:normal!important;
  }

  /* Horizontal mode/tabs are more useful as a scrollable compact rail than a
     vertical list that pushes operational data several screens downward. */
  body.karin-app-page :is(.karin-tabs,.perm-filter-buttons,.report-period-tabs){
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding-bottom:2px!important;
  }
  body.karin-app-page :is(.karin-tabs,.perm-filter-buttons,.report-period-tabs)::-webkit-scrollbar{display:none!important;}
  body.karin-app-page :is(.karin-tabs,.perm-filter-buttons,.report-period-tabs)>*{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
  }


  /* --------------------------------------------------------------------
     Repeated mobile cards / empty states: trim desktop-sized spacing and make
     the information density consistent without changing desktop geometry.
     -------------------------------------------------------------------- */
  body.karin-app-page :is(
    .res-mini-card,
    .reports-kpi,
    .ledger-stat,
    .commission-summary-card
  ){
    border-radius:15px!important;
  }
  body.karin-app-page :is(.empty,.dash-empty){
    min-height:0!important;
    padding:14px 12px!important;
    line-height:1.7!important;
  }

  /* Mobile forms should not create accidental horizontal overflow from long
     values, URLs or LTR identifiers. */
  body.karin-app-page :is(.karin-card,.karin-modal-shell) :is(input,select,textarea){
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.karin-app-page :is(.karin-card,.karin-modal-shell) :is(b,strong,p,small,span){
    overflow-wrap:anywhere;
  }

}



/* ========================================================================
   Karin v5.107 — Login layout composition only
   Login owns placement/spacing only. Shared buttons, controls, segmented
   controls, cards and choice rows are painted exclusively by karin-ui.css.
   ======================================================================== */
body.karin-page-login{overflow-x:hidden;}
body.karin-page-login .karin-content.karin-login-page{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-height:100vh;
  min-height:100svh;
  margin:0;
  padding:24px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
  gap:10px;
}
body.karin-page-login .karin-login-shell{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
}
body.karin-page-login .karin-login-card{
  width:min(460px,100%);
  min-width:0;
  margin:0;
  padding:24px;
}
body.karin-page-login .karin-login-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
}
body.karin-page-login .karin-login-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
body.karin-page-login .karin-login-brand img{
  display:block;
  flex:0 0 44px;
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:10px;
}
body.karin-page-login .karin-login-brand-copy{display:grid;gap:1px;min-width:0;text-align:right;}
body.karin-page-login .karin-login-brand-copy b{font-size:15px;line-height:1.35;color:var(--karin-text);}
body.karin-page-login .karin-login-brand-copy span{font-size:10px;line-height:1.5;color:var(--karin-text-muted);}
body.karin-page-login .login-theme-toggle{flex:0 0 auto;}
body.karin-page-login .login-theme-toggle .theme-label{display:none;}
body.karin-page-login .karin-login-heading{margin:0 0 14px;text-align:right;}
body.karin-page-login .karin-login-heading h1{margin:0;font-size:19px;line-height:1.45;color:var(--karin-text);}
body.karin-page-login .karin-login-heading p{margin:3px 0 0;font-size:11.5px;line-height:1.65;color:var(--karin-text-muted);}
body.karin-page-login .login-tabs{margin:0 0 14px;}
body.karin-page-login .login-panel{display:none;}
body.karin-page-login .login-panel.active{display:block;}
body.karin-page-login .login-form{gap:8px;}
body.karin-page-login .login-remember{margin:3px 0 2px;}
body.karin-page-login .login-submit{margin-top:4px;}
body.karin-page-login .login-resend{margin-top:8px;}
body.karin-page-login .karin-credit{width:min(460px,100%);margin:0;padding-top:0;text-align:center;}

@media(max-width:520px){
  body.karin-page-login .karin-content.karin-login-page{padding:14px 12px 10px;align-items:start;}
  body.karin-page-login .karin-login-shell{padding-top:8px;}
  body.karin-page-login .karin-login-card{width:100%;padding:18px 16px;}
  body.karin-page-login .karin-login-top{margin-bottom:13px;}
  body.karin-page-login .karin-login-brand img{flex-basis:40px;width:40px;height:40px;}
  body.karin-page-login .karin-login-heading{margin-bottom:11px;}
  body.karin-page-login .karin-login-heading h1{font-size:17px;}
  body.karin-page-login .karin-login-heading p{font-size:10.8px;}
}



/* Karin v5.120 — stock adjustment uses one internal scroll region and a normal-flow footer. */
body.karin-page-stock .inventory-detail-modal>.inventory-adjust-layout{display:flex;flex:1 1 auto;min-height:0;overflow:hidden;padding:0 18px 16px;}
body.karin-page-stock .inventory-adjust-layout>.inventory-adjust-form{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden;}
body.karin-page-stock .inventory-adjust-form>.inventory-adjust-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:14px;}
body.karin-page-stock .inventory-adjust-form>.inventory-adjust-scroll>table{min-width:760px;width:100%;}
body.karin-page-stock .inventory-adjust-form>.inventory-adjust-note{flex:0 0 auto;padding-top:10px;}
body.karin-page-stock .inventory-adjust-form>.inventory-adjust-note>textarea{min-height:58px;max-height:74px;resize:vertical;}
body.karin-page-stock .inventory-adjust-form>.inventory-adjust-footer{position:static!important;bottom:auto!important;z-index:auto!important;display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--karin-space-2);margin:var(--karin-space-3) 0 0;padding:var(--karin-space-4) 0 0;border-top:1px solid var(--karin-border);background:var(--karin-surface);}
body.karin-page-stock .inventory-detail-modal :is(.inventory-readonly-footer,.inventory-reserve-footer){position:static!important;bottom:auto!important;z-index:auto!important;justify-content:flex-start!important;gap:var(--karin-space-2)!important;margin:var(--karin-space-3) var(--karin-space-4) var(--karin-space-4)!important;padding:var(--karin-space-4) 0 0!important;border-top:1px solid var(--karin-border)!important;}
@media(max-width:760px){
  body.karin-page-stock .inventory-detail-modal>.inventory-adjust-layout{padding:0 12px 12px;}
  body.karin-page-stock .inventory-adjust-form>.inventory-adjust-footer>*{flex:1 1 132px;min-width:0;}
  body.karin-page-stock .inventory-adjust-form>.inventory-adjust-scroll>table{min-width:720px;}
}


/* Karin v5.130 — canonical structured modal form + full-row grid modifiers.
   Long forms can keep the header/footer fixed while only .karin-modal__body scrolls.
   This is a shared component contract, not a route-local purchase modal patch. */
body.karin-app-page .karin-form-grid--4 > .karin-grid-full,
body.karin-app-page .karin-grid-full{grid-column:1/-1!important;}

body.karin-app-page .karin-modal-shell:has(> form.karin-modal-form--structured){
  padding:0!important;
}
body.karin-app-page .karin-modal-shell > form.karin-modal-form--structured{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:0!important;
  scrollbar-gutter:auto!important;
}
body.karin-app-page .karin-modal-shell > form.karin-modal-form--structured > .karin-modal__body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
  padding:var(--karin-modal-body-padding-block,16px) var(--karin-modal-body-padding-inline,18px)!important;
}
body.karin-app-page .karin-modal-shell > form.karin-modal-form--structured > .karin-modal__footer{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  width:100%!important;
  margin:0!important;
  padding:var(--karin-modal-footer-padding-block,12px) var(--karin-modal-footer-padding-inline,18px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  background:var(--karin-surface)!important;
  border-top:1px solid var(--karin-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Karin v5.277 — structured form rhythm: body owns field spacing; footer owns actions. */
body.karin-app-page .karin-modal-shell > form.karin-modal-form--structured > .karin-modal__body{
  padding-bottom:calc(var(--karin-modal-body-padding-block,16px) + var(--karin-space-1,4px));
}
body.karin-app-page .karin-modal-shell > form.karin-modal-form--structured > .karin-modal__body > :last-child{
  margin-bottom:0;
}

@media(max-width:760px){
  body.karin-app-page .karin-modal-shell > form.karin-modal-form--structured > .karin-modal__body{padding:var(--karin-space-3,12px) var(--karin-space-3,12px) var(--karin-space-4,16px)!important;}
  body.karin-app-page .karin-modal-shell > form.karin-modal-form--structured > .karin-modal__footer{
    position:relative!important;
    inset:auto!important;
    margin:0!important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
  }
}

/* ========================================================================
   Karin v5.134 — receipt destination context + receipt viewer header controls + POS recovery action layout
   High-specificity closure rules intentionally live after legacy modal rules.
   ======================================================================== */
body.karin-app-page .karin-modal.karin-receipt-viewer{
  padding:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer > .karin-receipt-viewer-shell{
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer > .karin-receipt-viewer-shell > .karin-receipt-viewer-header{
  position:relative!important;
  flex:0 0 auto!important;
  display:grid!important;
  overflow:visible!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer > .karin-receipt-viewer-shell > .karin-receipt-workspace{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions{
  position:static!important;
  inset:auto!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions > .karin-button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
body.karin-app-page .pos-recovery-card > .pos-recovery-actions{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:8px!important;
  margin:0!important;
}
body.karin-app-page .pos-recovery-card > .pos-recovery-actions > .karin-button{
  flex:none!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}

/* v5.129–v5.134 mobile audit: keep recent sale/purchase additions inside the
   same responsive contracts in both standalone Quick POS and embedded sale UI. */
@media(max-width:700px){
  body.karin-page-sales .new-sale-inline-content .sale-setup-grid,
  body.karin-page-sales .new-sale-inline-content .quick-customer-row{
    grid-template-columns:1fr 1fr!important;
  }
  body.karin-page-sales .new-sale-inline-content .karin-grid-full,
  body.karin-page-quick-pos .karin-grid-full{
    grid-column:1/-1!important;
  }
  body.karin-page-sales .new-sale-inline-content .product-panel-search,
  body.karin-page-quick-pos .product-panel-search{
    width:100%!important;
    min-width:0!important;
  }
}
@media(max-width:640px){
  body.karin-app-page .pos-recovery-card > .pos-recovery-actions{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:560px){
  body.karin-app-page .karin-modal.karin-receipt-viewer > .karin-receipt-viewer-shell{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions[hidden]{display:none!important;}
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions > .karin-button{
    width:100%!important;
  }
}
@media(max-width:480px){
  body.karin-page-sales .new-sale-inline-content .sale-setup-grid,
  body.karin-page-sales .new-sale-inline-content .quick-customer-row{
    grid-template-columns:1fr!important;
  }
}

/* ========================================================================
   Karin v5.237 — Canonical bounded modal scroll ownership
   A viewport modal is a strict 3-row grid: header / one scroll owner / footer.
   The middle stack uses max-content rows. This is intentionally late in the
   closure layer so generic sticky-footer/flex rules cannot compress feature
   cards and accidentally remove the body's real scroll range.
   ======================================================================== */
body.karin-app-page .karin-modal-shell--viewport{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
}
body.karin-app-page .karin-modal-shell--viewport > .karin-modal__header{
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  min-width:0!important;
}
body.karin-app-page .karin-modal-shell--viewport > .karin-modal__body--stack{
  grid-row:2!important;
  display:grid!important;
  grid-auto-rows:max-content!important;
  align-content:start!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
  touch-action:pan-y!important;
}
body.karin-app-page .karin-modal-shell--viewport > .karin-modal__body--stack > *{
  min-width:0!important;
  flex:none!important;
}
body.karin-app-page .karin-modal-shell--viewport > .karin-modal__footer{
  grid-row:3!important;
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  margin:0!important;
  flex:0 0 auto!important;
}
@media(max-width:760px){
  body.karin-app-page .karin-modal-shell--viewport{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  body.karin-app-page .karin-modal-shell--viewport > .karin-modal__body--stack{
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    padding-bottom:var(--karin-space-3)!important;
  }
  body.karin-app-page .karin-modal-shell--viewport > .karin-modal__footer{
    position:relative!important;
    bottom:auto!important;
    padding-bottom:calc(var(--karin-space-2) + env(safe-area-inset-bottom))!important;
  }
}


/* ========================================================================
   Karin v5.273 — Premium Experience Foundation
   Shared interaction/depth only. No business-page layout lives here.
   Theme paint comes from karin-theme.css; geometry stays in canonical UI.
   ======================================================================== */
body.karin-app-page{
  background:var(--karin-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Canonical surfaces get one restrained elevation language. */
body.karin-app-page .karin-card{
  border-color:var(--karin-component-border);
  box-shadow:var(--karin-shadow-sm);
  transition:border-color var(--karin-motion-base) var(--karin-ease-standard),box-shadow var(--karin-motion-base) var(--karin-ease-standard),transform var(--karin-motion-base) var(--karin-ease-standard),background-color var(--karin-motion-base) var(--karin-ease-standard);
}
body.karin-app-page :is(.karin-sidebar,.karin-topbar){
  border-color:var(--karin-chrome-border);
}
body.karin-app-page .karin-sidebar{
  background:var(--karin-chrome-sidebar-bg);
  box-shadow:var(--karin-chrome-sidebar-shadow);
}
body.karin-app-page .karin-topbar{
  background:var(--karin-chrome-topbar-bg);
  box-shadow:var(--karin-chrome-topbar-shadow);
  -webkit-backdrop-filter:var(--karin-backdrop-filter);
  backdrop-filter:var(--karin-backdrop-filter);
}

/* Immediate, interruptible press feedback. Keep it subtle for high-frequency ops. */
body.karin-app-page .karin-button{
  transform:translateZ(0);
  transform-origin:center;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
body.karin-app-page :is(.karin-button-primary,.karin-button-success,.karin-button-danger):not(:disabled):not([aria-disabled="true"]){
  box-shadow:var(--karin-shadow-button);
}
body.karin-app-page .karin-button:not(:disabled):not([aria-disabled="true"]):active{
  transform:scale(var(--karin-press-scale));
  transition-duration:var(--karin-motion-feedback);
}
@media(hover:hover) and (pointer:fine){
  body.karin-app-page .karin-button:not(:disabled):not([aria-disabled="true"]):hover{
    transform:translateY(var(--karin-hover-lift));
  }
  body.karin-app-page .karin-button:not(:disabled):not([aria-disabled="true"]):active{
    transform:translateY(0) scale(var(--karin-press-scale));
  }
  body.karin-app-page .karin-card--interactive:hover,
  body.karin-app-page :is(a,button).karin-card:hover{
    border-color:var(--karin-interactive-border);
    box-shadow:var(--karin-shadow-hover);
    transform:translateY(-1px);
  }
}

/* Controls keep one premium focus language without changing field geometry. */
body.karin-app-page .karin-control:focus-visible,
body.karin-app-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),select,textarea):focus-visible{
  border-color:var(--karin-control-focus);
  box-shadow:var(--karin-focus-ring);
}
body.karin-app-page .karin-button:focus-visible,
body.karin-app-page :where(a,button,[role="button"]):focus-visible{
  outline:2px solid color-mix(in srgb,var(--karin-primary) 72%,white);
  outline-offset:2px;
}

/* Modal motion conveys layer/depth; the DOM/open contract remains unchanged. */
body.karin-app-page .karin-modal{
  background:var(--karin-overlay);
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.karin-app-page .karin-modal.open{
  animation:karinPremiumBackdropIn var(--karin-motion-slow) var(--karin-ease-standard) both;
}
body.karin-app-page .karin-modal.open > .karin-modal-shell{
  animation:karinPremiumModalIn var(--karin-motion-modal) var(--karin-ease-emphasized) both;
  box-shadow:var(--karin-shadow-modal);
}
@keyframes karinPremiumBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes karinPremiumModalIn{
  from{opacity:0;transform:translateY(8px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Shared semantic status primitives for new work. Existing badges remain valid. */









@keyframes karinPremiumSkeleton{to{transform:translateX(-100%)}}

/* Touch devices use sheet-like spatial motion, while existing modal sizing rules remain intact. */
@media(max-width:760px){
  body.karin-app-page .karin-modal.open > .karin-modal-shell{
    animation-name:karinPremiumSheetIn;
  }
  @keyframes karinPremiumSheetIn{
    from{opacity:.65;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
  }
}

@media(prefers-reduced-motion:reduce){
  body.karin-app-page *,body.karin-app-page *::before,body.karin-app-page *::after{
    scroll-behavior:auto;
  }
  body.karin-app-page .karin-button,
  body.karin-app-page .karin-card,
  body.karin-app-page .karin-modal.open,
  body.karin-app-page .karin-modal.open > .karin-modal-shell,
  .karin-skeleton::after{
    animation:none;
    transition-duration:1ms;
    transform:none;
  }
}

/* ========================================================================
   Karin v5.276 — Canonical Modal Size / Accessibility Bridge
   Focus and ARIA behavior is owned by app.js; this layer only supplies size
   modifiers that can be reused without route-local modal width patches.
   ======================================================================== */
body.karin-app-page .karin-modal-shell--sm{width:min(var(--karin-modal-width-sm),calc(100vw - 48px));}
body.karin-app-page .karin-modal-shell--md{width:min(var(--karin-modal-width-md),calc(100vw - 48px));}
body.karin-app-page .karin-modal-shell--lg{width:min(var(--karin-modal-width-lg),calc(100vw - 48px));}
body.karin-app-page .karin-modal-shell--xl{width:min(var(--karin-modal-width-xl),calc(100vw - 48px));}
body.karin-app-page .karin-modal[aria-hidden="true"]{pointer-events:none;}
@media(max-width:760px){
  body.karin-app-page :is(.karin-modal-shell--sm,.karin-modal-shell--md,.karin-modal-shell--lg,.karin-modal-shell--xl){width:100%;max-width:100%;}
}

/* ========================================================================
   Karin v5.361.140 — Canonical Modal Default Geometry + Decision Composition
   Every canonical modal gets a usable body/footer without route-local CSS.
   Structured forms may add stronger rules above; route-specific content may
   refine internals but must not own the basic modal spacing contract.
   ======================================================================== */
body.karin-app-page .karin-modal-shell > .karin-modal__body{
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:var(--karin-modal-body-padding-block,16px) var(--karin-modal-body-padding-inline,18px)!important;
  color:var(--karin-text)!important;
  line-height:1.8!important;
}
body.karin-app-page .karin-modal-shell > .karin-modal__body > :first-child{margin-top:0!important;}
body.karin-app-page .karin-modal-shell > .karin-modal__body > :last-child{margin-bottom:0!important;}
body.karin-app-page .karin-modal-shell > .karin-modal__footer{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  width:100%!important;
  margin:0!important;
  padding:var(--karin-modal-footer-padding-block,12px) var(--karin-modal-footer-padding-inline,18px)!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  background:var(--karin-surface)!important;
  border-top:1px solid var(--karin-border)!important;
  border-radius:0 0 var(--karin-radius-modal,18px) var(--karin-radius-modal,18px)!important;
  box-shadow:none!important;
}
body.karin-app-page .karin-modal__header > :is(.modal-close-btn,.modal-x-btn){
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 36px!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  margin-inline-start:auto!important;
  border-radius:10px!important;
  line-height:1!important;
}
body.karin-app-page .karin-modal-decision > .karin-modal__body{
  display:grid!important;
  gap:12px!important;
  font-size:13px!important;
}
body.karin-app-page .karin-modal-decision-copy{
  display:grid!important;
  gap:5px!important;
}
body.karin-app-page .karin-modal-decision-copy > b{
  color:var(--karin-text)!important;
  font-size:14px!important;
  line-height:1.65!important;
}
body.karin-app-page .karin-modal-decision-copy > p{
  margin:0!important;
  color:var(--karin-text-muted)!important;
  font-size:12.5px!important;
  line-height:1.85!important;
}
body.karin-app-page .karin-modal-decision-note{
  padding:10px 12px!important;
  border:1px solid var(--karin-warning-border)!important;
  border-radius:11px!important;
  background:var(--karin-warning-surface)!important;
  color:var(--karin-warning-text)!important;
  font-size:12px!important;
  line-height:1.75!important;
}
body.karin-app-page .karin-modal-decision > .karin-modal__footer > .karin-button{
  min-height:38px!important;
}
@media(max-width:760px){
  body.karin-app-page .karin-modal-shell > .karin-modal__body{
    padding:14px 12px 16px!important;
  }
  body.karin-app-page .karin-modal-shell > .karin-modal__footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom))!important;
  }
  body.karin-app-page .karin-modal-shell > .karin-modal__footer > .karin-button{
    width:100%!important;
    min-width:0!important;
  }
}

/* ========================================================================
   Karin v5.285 — Premium Visual Language / Phase 1
   Global canonical visual pass. Quiet depth, crisp hierarchy and restrained
   motion; no route-specific business layout or behavior belongs here.
   ======================================================================== */
body.karin-app-page{
  background:var(--karin-premium-canvas);
  background-attachment:fixed;
}

/* Surface language */
body.karin-app-page .karin-card{
  padding:var(--karin-premium-card-padding-block) var(--karin-premium-card-padding-inline);
  border-color:var(--karin-premium-card-border);
  border-radius:var(--karin-premium-card-radius);
  background:var(--karin-premium-surface);
  box-shadow:var(--karin-premium-card-shadow);
}
body.karin-app-page .karin-filter-card{background:var(--karin-premium-surface);}
body.karin-app-page .karin-section-head{margin-bottom:var(--karin-premium-section-gap);}
body.karin-app-page .karin-section-head h2{letter-spacing:-.12px;}
@media(hover:hover) and (pointer:fine){
  body.karin-app-page .karin-card--interactive:hover,
  body.karin-app-page :is(a,button).karin-card:hover{
    border-color:var(--karin-premium-card-border-hover);
    box-shadow:var(--karin-premium-card-shadow-hover);
  }
}

/* Buttons: premium geometry; semantic paint is owned by karin-theme.css and
   consumed by the canonical button rules in karin-ui.css. */
body.karin-app-page .karin-button{
  border-radius:var(--karin-premium-button-radius);
  letter-spacing:-.03px;
}

/* Controls / fields */
body.karin-app-page .karin-control,
body.karin-app-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),select,textarea){
  border-radius:var(--karin-premium-control-radius);
  background:var(--karin-premium-control-bg);
  border-color:var(--karin-premium-control-border);
}
@media(hover:hover) and (pointer:fine){
  body.karin-app-page .karin-control:hover,
  body.karin-app-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),select,textarea):hover{
    border-color:var(--karin-premium-control-hover);
  }
}

/* Tables: visual grouping without dense spreadsheet chrome. */
body.karin-app-page .karin-table-wrap{
  border-color:var(--karin-premium-card-border);
  border-radius:var(--karin-premium-table-radius);
  background:var(--karin-premium-surface);
  box-shadow:var(--karin-premium-subtle-shadow);
}
body.karin-app-page .karin-table th{background:var(--karin-premium-table-head);}
body.karin-app-page .karin-table td{border-color:var(--karin-premium-divider);}
body.karin-app-page .karin-table tbody tr:is(:hover,:focus-within)>td{background:var(--karin-premium-table-row-hover);}

/* Semantic chips retain state color while gaining consistent geometry. */
body.karin-app-page .karin-badge{
  padding:4px 8px;
  line-height:1.35;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 4%,transparent);
}

/* Empty states are intentional surfaces, not leftover dashed boxes. */
body.karin-app-page .karin-empty-state{
  border-style:solid;
  border-color:var(--karin-premium-card-border);
  border-radius:var(--karin-premium-card-radius);
  background:var(--karin-premium-surface-soft);
}

/* App chrome consumes only theme tokens, so a future skin can replace it globally. */
body.karin-app-page .karin-topbar{
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
}
body.karin-app-page .karin-sidebar-nav>a.active,
body.karin-app-page .karin-sidebar-nav .nav-sub a.active{
  box-shadow:inset -3px 0 0 color-mix(in srgb,var(--karin-primary) 72%,transparent);
}
body.karin-app-page .karin-sidebar-nav>a,
body.karin-app-page .karin-sidebar-nav .nav-sub a,
body.karin-app-page .karin-menu-toggle{
  transition:background-color var(--karin-motion-base) var(--karin-ease-standard),border-color var(--karin-motion-base) var(--karin-ease-standard),color var(--karin-motion-base) var(--karin-ease-standard),box-shadow var(--karin-motion-base) var(--karin-ease-standard),transform var(--karin-motion-fast) var(--karin-ease-standard);
}
@media(hover:hover) and (pointer:fine){
  body.karin-app-page .karin-menu-toggle:hover{transform:translateY(-1px);}
}

@media(max-width:700px){
  body.karin-app-page{background-attachment:scroll;}
  body.karin-app-page .karin-card{
    padding:14px;
    border-radius:16px;
  }
  body.karin-app-page .karin-table-wrap{border-radius:12px;}
}

@media(prefers-reduced-transparency:reduce){
  body.karin-app-page .karin-topbar{-webkit-backdrop-filter:none;backdrop-filter:none;}
}



/* Karin v5.361.72 — canonical fullscreen RTL back navigation */
body.karin-app-page .karin-back-button{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  padding:0!important;margin:0!important;border:1px solid var(--karin-border)!important;border-radius:11px!important;
  display:inline-grid!important;place-items:center!important;background:var(--karin-surface-soft)!important;color:var(--karin-text-muted)!important;
  box-shadow:none!important;cursor:pointer!important;flex:0 0 34px!important;
}
body.karin-app-page .karin-back-button:hover,
body.karin-app-page .karin-back-button:focus-visible{color:var(--karin-primary)!important;background:var(--karin-primary-soft)!important;border-color:var(--karin-interactive-border)!important;}
body.karin-app-page .karin-back-icon{width:17px!important;height:17px!important;display:block!important;pointer-events:none!important;}
@media(max-width:700px){
  body.karin-app-page .karin-back-button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;border-radius:10px!important;flex-basis:32px!important;}
  body.karin-app-page .karin-back-icon{width:16px!important;height:16px!important;}
}


/* Karin v5.361.74 — mobile back placement + payment follow-up rail */
body.karin-app-page .ops-followup-rail{display:flex;align-items:center;gap:8px;margin:0 0 10px;}
body.karin-app-page .ops-followup-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 10px;border:1px solid #f1c7cc;border-radius:11px;background:#fff8f8;color:#9f2634;text-decoration:none;font-size:11px;font-weight:800;}
body.karin-app-page .ops-followup-chip b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#fde7e9;color:#b42336;font-size:10px;}
body.karin-app-page .ops-followup-chip.is-active{border-color:#e49aa4;background:#fff0f2;}
body.karin-app-page .ops-rejection-reason{display:block;margin-top:5px;color:#b42336;font-size:10px;font-weight:750;line-height:1.75;max-width:240px;}
@media(max-width:700px){
  /* v5.361.76: Back belongs to the mobile navigation bar, never as a floating overlay. */
  body.karin-app-page .karin-top-title>.karin-back-button{
    position:static!important;inset:auto!important;z-index:auto!important;
    width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;flex:0 0 29px!important;
    border-radius:9px!important;background:var(--karin-surface-soft)!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body.karin-app-page .karin-top-title>.karin-back-button .karin-back-icon{width:14px!important;height:14px!important;}
  body.karin-app-page .karin-top-title{padding-right:0!important;gap:4px!important;overflow:hidden!important;}
  body.karin-app-page .karin-topbar h1{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  body.karin-app-page .ops-followup-rail{justify-content:space-between;gap:6px;}
  body.karin-app-page .ops-followup-chip{flex:1 1 auto;justify-content:space-between;}
}
html[data-theme="dark"] body.karin-app-page .ops-followup-chip{background:#2a171d;border-color:#5a2f3a;color:#ffb9c2;}
html[data-theme="dark"] body.karin-app-page .ops-followup-chip b{background:#46212a;color:#ffc8cf;}

body.karin-app-page .karin-impersonation-banner{max-width:var(--karin-content-max-width);margin:-6px auto 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #f2c57b;border-radius:12px;background:#fff8e8;color:#774b0d;font-size:11px;font-weight:750;}
body.karin-app-page .karin-impersonation-banner form{margin:0;}
body.karin-app-page .karin-impersonation-banner .karin-button{min-height:30px!important;padding:5px 9px!important;font-size:10px!important;}
@media(max-width:700px){body.karin-app-page .karin-impersonation-banner{margin-top:-3px;align-items:stretch;flex-direction:column;}.karin-impersonation-banner .karin-button{width:100%;}}
html[data-theme="dark"] body.karin-app-page .karin-impersonation-banner{background:#2c2415;border-color:#674e22;color:#f6d79f;}

/* ========================================================================
   Karin v5.361.109 — compact receipt amount summary + review correction UX
   ======================================================================== */
body.karin-app-page .karin-receipt-context>.karin-receipt-expected{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  align-items:start!important;
  gap:3px 10px!important;
}
body.karin-app-page .karin-receipt-context>.karin-receipt-expected>small{
  align-self:center!important;
}
body.karin-app-page .karin-receipt-context>.karin-receipt-expected>b{
  justify-self:end!important;
  max-width:100%!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
body.karin-app-page .karin-receipt-amount-breakdown,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:2px!important;
  width:100%!important;
  max-width:none!important;
  margin-top:3px!important;
  color:var(--karin-text-muted)!important;
}
body.karin-app-page .karin-receipt-amount-breakdown[hidden]{display:none!important;}
body.karin-app-page .karin-receipt-amount-breakdown>span,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown>span{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  min-width:0!important;
  font-size:10px!important;
  line-height:1.55!important;
}
body.karin-app-page .karin-receipt-amount-breakdown>span>small,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown>span>small{
  min-width:0!important;
  color:var(--karin-text-muted)!important;
  font-size:10px!important;
  font-weight:650!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-receipt-amount-breakdown>span>b,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown>span>b{
  min-width:0!important;
  overflow:visible!important;
  color:var(--karin-text)!important;
  font-size:10.2px!important;
  font-weight:800!important;
  text-align:left!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:4px!important;
  align-items:center!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-hint{
  display:block!important;
  max-width:210px!important;
  color:var(--karin-text-muted)!important;
  font-size:9.5px!important;
  font-weight:700!important;
  line-height:1.45!important;
  text-align:center!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-hint[hidden]{display:none!important;}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-buttons{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-buttons>.karin-button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-buttons>.karin-button[hidden]{display:none!important;}
body.karin-page-sales-operations .ops-preview-expected{
  align-content:start!important;
}
body.karin-page-sales-operations .ops-preview-expected>.ops-preview-discount{
  margin-top:4px!important;
}

@media(max-width:560px){
  body.karin-app-page .karin-receipt-context{
    grid-template-columns:108px minmax(0,1fr)!important;
    align-items:stretch!important;
  }
  body.karin-app-page .karin-receipt-context>div{
    min-height:58px!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-expected{
    grid-column:2!important;
    padding:7px 8px!important;
    gap:2px 7px!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-expected>small{
    font-size:8.5px!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-expected>b{
    font-size:11.5px!important;
  }
  body.karin-app-page .karin-receipt-amount-breakdown{
    grid-template-columns:1fr!important;
    gap:1px!important;
    margin-top:2px!important;
  }
  body.karin-app-page .karin-receipt-amount-breakdown>span{
    font-size:9.2px!important;
    line-height:1.45!important;
  }
  body.karin-app-page .karin-receipt-amount-breakdown>span>small,
  body.karin-app-page .karin-receipt-amount-breakdown>span>b{
    font-size:9.2px!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-destination{grid-column:1/-1!important;}
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions{
    grid-column:1/-1!important;
    width:100%!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-hint{
    max-width:none!important;
    text-align:right!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-buttons{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-actions.is-correction .karin-receipt-review-buttons{grid-template-columns:1fr!important;}
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-review-buttons>.karin-button{
    width:100%!important;
  }
  body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown{
    grid-template-columns:1fr!important;
  }
}

/* ========================================================================
   Karin v5.361.111 — receipt/preview compact independent-height summaries
   ======================================================================== */
body.karin-app-page .karin-receipt-context{
  align-items:start!important;
  grid-auto-rows:max-content!important;
}
body.karin-app-page .karin-receipt-context>div{
  align-self:start!important;
  min-height:0!important;
  height:auto!important;
}
body.karin-app-page .karin-receipt-context>.karin-receipt-invoice{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-height:42px!important;
}
body.karin-app-page .karin-receipt-context>.karin-receipt-invoice>b{
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  direction:ltr!important;
  text-align:left!important;
  font-variant-numeric:tabular-nums!important;
}
body.karin-app-page .karin-receipt-context>.karin-receipt-expected{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  align-content:start!important;
  gap:2px 8px!important;
  min-height:42px!important;
  padding-block:6px!important;
}
body.karin-app-page .karin-receipt-context>.karin-receipt-expected>b{
  justify-self:end!important;
  font-size:12px!important;
  line-height:1.45!important;
}
body.karin-app-page .karin-receipt-amount-breakdown,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:1px 10px!important;
  width:100%!important;
  margin-top:1px!important;
  line-height:1.35!important;
}
body.karin-app-page .karin-receipt-amount-breakdown>span,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown>span{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  line-height:1.35!important;
}
body.karin-app-page .karin-receipt-amount-breakdown>span>small,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown>span>small{
  font-size:9px!important;
  line-height:1.35!important;
}
body.karin-app-page .karin-receipt-amount-breakdown>span>b,
body.karin-page-sales-operations .ops-preview-expected .karin-amount-breakdown>span>b{
  font-size:9.3px!important;
  line-height:1.35!important;
}

body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta{
  align-items:start!important;
  grid-auto-rows:max-content!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  gap:7px!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta>div{
  align-self:start!important;
  min-height:52px!important;
  height:auto!important;
  border:1px solid var(--karin-border)!important;
  border-radius:10px!important;
  background:var(--karin-surface-soft)!important;
  padding:8px 10px!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta>div:first-child{
  border-inline-start:1px solid var(--karin-border)!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta .ops-preview-expected{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  align-content:start!important;
  gap:2px 7px!important;
  min-height:52px!important;
  background:color-mix(in srgb,var(--karin-primary) 5%,var(--karin-surface))!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta .ops-preview-expected>b{
  justify-self:end!important;
  white-space:nowrap!important;
  font-size:11.5px!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-status{
  align-content:center!important;
  justify-items:start!important;
  min-height:52px!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-status>.karin-badge{
  align-self:center!important;
  justify-self:start!important;
  margin:0!important;
}

@media(max-width:700px){
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta>div{
    border:1px solid var(--karin-border)!important;
    min-height:48px!important;
  }
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta>div:nth-child(n+3){border-top:1px solid var(--karin-border)!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-meta .ops-preview-expected{
    grid-column:1/-1!important;
    min-height:0!important;
  }
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-status{min-height:48px!important;}
}

@media(max-width:560px){
  body.karin-app-page .karin-receipt-context{
    grid-template-columns:1fr!important;
    gap:5px!important;
    align-items:start!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-invoice,
  body.karin-app-page .karin-receipt-context>.karin-receipt-expected,
  body.karin-app-page .karin-receipt-context>.karin-receipt-destination{
    grid-column:1!important;
    width:100%!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-invoice{
    min-height:38px!important;
    padding:6px 8px!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-invoice>b{
    font-size:10.8px!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-expected{
    min-height:0!important;
    padding:6px 8px!important;
    gap:2px 7px!important;
  }
  body.karin-app-page .karin-receipt-context>.karin-receipt-expected>b{font-size:11.3px!important;}
  body.karin-app-page .karin-receipt-amount-breakdown{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:1px 9px!important;
  }
  body.karin-app-page .karin-receipt-amount-breakdown>span{
    display:inline-flex!important;
    width:auto!important;
  }
}
body.karin-app-page .karin-receipt-context:has(>.karin-receipt-destination[hidden]){
  grid-template-columns:minmax(132px,.72fr) minmax(230px,1.28fr)!important;
}
@media(max-width:560px){
  body.karin-app-page .karin-receipt-context:has(>.karin-receipt-destination[hidden]){grid-template-columns:1fr!important;}
}

/* ========================================================================
   Karin v5.361.113 — unified premium receipt / quick-preview composition
   One visual summary surface, clear hierarchy, no sibling-height coupling.
   ======================================================================== */

/* Quick Preview header: identity on the right, status + close as one action rail. */
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header>.ops-preview-heading{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex:0 0 auto!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions .ops-preview-status{
  display:inline-flex!important;
  align-items:center!important;
  min-width:0!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions .karin-badge{
  margin:0!important;
  white-space:nowrap!important;
}

/* Quick Preview: a single summary surface instead of unrelated small cards. */
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-summary{
  display:grid!important;
  grid-template-columns:minmax(220px,.92fr) minmax(0,1.48fr)!important;
  align-items:stretch!important;
  gap:0!important;
  width:100%!important;
  overflow:hidden!important;
  border:1px solid var(--karin-border)!important;
  border-radius:12px!important;
  background:var(--karin-surface)!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial{
  display:grid!important;
  align-content:center!important;
  gap:4px!important;
  min-width:0!important;
  padding:13px 14px!important;
  border-inline-end:1px solid var(--karin-border)!important;
  background:color-mix(in srgb,var(--karin-primary) 5%,var(--karin-surface))!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial>small{
  color:var(--karin-text-muted)!important;
  font-size:9.5px!important;
  font-weight:650!important;
  line-height:1.4!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial>strong{
  color:var(--karin-primary)!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1.45!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial .karin-amount-breakdown{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:3px 12px!important;
  margin-top:1px!important;
  width:100%!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial .karin-amount-breakdown>span{
  display:inline-flex!important;
  align-items:baseline!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  line-height:1.4!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial .karin-amount-breakdown small{
  color:var(--karin-text-muted)!important;
  font-size:9px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial .karin-amount-breakdown b{
  color:var(--karin-text)!important;
  font-size:9.3px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  min-width:0!important;
  background:var(--karin-surface)!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts>div{
  display:grid!important;
  align-content:center!important;
  gap:3px!important;
  min-width:0!important;
  min-height:48px!important;
  padding:9px 12px!important;
  border-bottom:1px solid var(--karin-border)!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts>div:nth-child(odd){border-inline-end:1px solid var(--karin-border)!important;}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts>div:nth-last-child(-n+2){border-bottom:0!important;}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts small{
  color:var(--karin-text-muted)!important;
  font-size:9px!important;
  font-weight:600!important;
  line-height:1.4!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts b{
  min-width:0!important;
  color:var(--karin-text)!important;
  font-size:10.5px!important;
  font-weight:800!important;
  line-height:1.5!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-created b{
  font-variant-numeric:tabular-nums!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-address{
  gap:5px!important;
  padding:0 2px 2px!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-address p{
  padding:0!important;
  line-height:1.85!important;
}

/* Receipt Review: one context bar with explicit primary/secondary monetary hierarchy. */
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context,
body.karin-app-page .karin-receipt-context:has(>.karin-receipt-destination[hidden]){
  display:grid!important;
  grid-template-columns:minmax(122px,.62fr) minmax(270px,1.38fr) minmax(250px,1.25fr)!important;
  align-items:stretch!important;
  gap:0!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:0!important;
  border:1px solid var(--karin-border)!important;
  border-radius:11px!important;
  background:var(--karin-surface-soft)!important;
}
body.karin-app-page .karin-receipt-context:has(>.karin-receipt-destination[hidden]){
  grid-template-columns:minmax(122px,.62fr) minmax(300px,1.38fr)!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context>div{
  align-self:stretch!important;
  min-height:52px!important;
  height:auto!important;
  margin:0!important;
  padding:8px 11px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context>div+div{
  border-inline-start:1px solid var(--karin-border)!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-invoice{
  display:grid!important;
  align-content:center!important;
  justify-content:stretch!important;
  gap:3px!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context small{
  color:var(--karin-text-muted)!important;
  font-size:9px!important;
  font-weight:600!important;
  line-height:1.35!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-invoice>b{
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:var(--karin-text)!important;
  font-size:11.5px!important;
  font-weight:900!important;
  line-height:1.45!important;
  direction:ltr!important;
  text-align:right!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial{
  display:grid!important;
  align-content:center!important;
  gap:4px!important;
  min-width:0!important;
  background:color-mix(in srgb,var(--karin-primary) 4.5%,var(--karin-surface))!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-expected{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-width:0!important;
  padding:0!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-expected>b{
  flex:0 0 auto!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:var(--karin-primary)!important;
  font-size:13.5px!important;
  font-weight:900!important;
  line-height:1.45!important;
  text-align:left!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:2px 13px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  line-height:1.35!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown[hidden]{display:none!important;}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown>span{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:4px!important;
  width:auto!important;
  min-width:0!important;
  line-height:1.35!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown>span>small{
  color:var(--karin-text-muted)!important;
  font-size:8.8px!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown>span>b{
  color:var(--karin-text)!important;
  font-size:9.2px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-destination{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
}

@media(max-width:1180px){
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context,
  body.karin-app-page .karin-receipt-context:has(>.karin-receipt-destination[hidden]){
    grid-template-columns:minmax(115px,.55fr) minmax(260px,1.45fr)!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context>.karin-receipt-destination{
    grid-column:1/-1!important;
    border-inline-start:0!important;
    border-top:1px solid var(--karin-border)!important;
  }
}

@media(max-width:700px){
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header{gap:9px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions{gap:6px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions .karin-badge{font-size:9px!important;padding:4px 7px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-summary{
    grid-template-columns:1fr!important;
  }
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial{
    border-inline-end:0!important;
    border-bottom:1px solid var(--karin-border)!important;
    padding:10px 11px!important;
  }
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial>strong{font-size:14px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts>div{min-height:43px!important;padding:7px 9px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts b{font-size:10px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-created{
    grid-column:1/-1!important;
    border-inline-end:0!important;
    border-top:1px solid var(--karin-border)!important;
    border-bottom:0!important;
  }
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-facts>div:nth-child(3){border-bottom:0!important;}
}

@media(max-width:820px){
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context,
  body.karin-app-page .karin-receipt-context:has(>.karin-receipt-destination[hidden]){
    grid-column:1/-1!important;
    grid-row:2!important;
    grid-template-columns:minmax(112px,.58fr) minmax(0,1.42fr)!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context>.karin-receipt-destination{
    grid-column:1/-1!important;
  }
}

@media(max-width:560px){
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-modal-shell{width:calc(100vw - 12px)!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .karin-modal__header{padding:9px 10px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-heading h2{font-size:13.5px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-heading p{font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial .karin-amount-breakdown{gap:2px 9px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial .karin-amount-breakdown small{font-size:8.5px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-financial .karin-amount-breakdown b{font-size:8.8px!important;}
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-created b{white-space:nowrap!important;font-size:9.5px!important;}

  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context,
  body.karin-app-page .karin-receipt-context:has(>.karin-receipt-destination[hidden]){
    grid-template-columns:1fr!important;
    gap:0!important;
    border-radius:10px!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context>div{
    grid-column:1!important;
    width:100%!important;
    min-height:0!important;
    padding:6px 8px!important;
    border-inline-start:0!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context>div+div{
    border-top:1px solid var(--karin-border)!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-invoice{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-invoice>b{
    width:auto!important;
    font-size:10.5px!important;
    text-align:left!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial{
    gap:3px!important;
    padding-block:7px!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-expected>b{font-size:12.5px!important;}
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:3px 8px!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown>span{
    display:flex!important;
    justify-content:space-between!important;
    gap:5px!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown>span>small,
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-amount-breakdown>span>b{font-size:8.7px!important;}
}


/* ========================================================================
   Karin v5.361.114 — receipt destination source-of-truth + compact header rail
   ======================================================================== */

/* Keep the operational status on the same line, immediately to the right of ×. */
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions{
  direction:rtl!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions .ops-preview-status{
  min-height:0!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  align-content:normal!important;
  justify-items:normal!important;
  flex:0 0 auto!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions>.karin-button{
  flex:0 0 auto!important;
}

/* Receipt Review keeps destination inline beside the expected amount on wide screens. */
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context{
  grid-template-columns:minmax(180px,.62fr) minmax(360px,1.38fr)!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-invoice{
  align-content:center!important;
  gap:3px!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial-main{
  display:grid!important;
  grid-template-columns:minmax(155px,max-content) minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px 14px!important;
  min-width:0!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-expected{
  justify-content:flex-start!important;
  gap:10px!important;
  min-width:0!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial .karin-receipt-destination{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:3px 7px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--karin-text-muted)!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial .karin-receipt-destination[hidden]{display:none!important;}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial .karin-receipt-destination>small{
  flex:0 0 auto!important;
  font-size:8.5px!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-destination-value{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:2px 6px!important;
  min-width:0!important;
  color:var(--karin-text)!important;
  font-size:8.9px!important;
  line-height:1.45!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-destination-value>*{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  font:inherit!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-destination-value>*[hidden]{display:none!important;}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-destination-value>*:not([hidden])+*:not([hidden])::before{
  content:"·";
  margin-inline-end:6px;
  color:var(--karin-text-muted)!important;
}
body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-destination-value code{
  direction:ltr!important;
  unicode-bidi:isolate!important;
  font-variant-numeric:tabular-nums!important;
}

@media(max-width:820px){
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context{
    grid-template-columns:minmax(135px,.58fr) minmax(0,1.42fr)!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial-main{
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    gap:5px!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-financial .karin-receipt-destination{
    justify-content:flex-start!important;
  }
}
@media(max-width:560px){
  body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions{
    gap:5px!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-context{
    grid-template-columns:1fr!important;
  }
  body.karin-app-page .karin-modal.karin-receipt-viewer .karin-receipt-invoice>.karin-receipt-destination{
    margin-top:2px!important;
  }
}


/* ========================================================================
   Karin v5.361.116 — receipt review keeps destination inline beside expected amount
   The action wrapper is no longer a direct DIV child, so legacy generic
   modal-header > div grid ownership cannot turn status + close into rows.
   ======================================================================== */
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions{
  display:inline-flex!important;
  flex-direction:row!important;
  direction:rtl!important;
  align-items:center!important;
  justify-content:flex-start!important;
  align-self:center!important;
  gap:7px!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  white-space:nowrap!important;
}
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions>.ops-preview-status,
body.karin-app-page .karin-sale-quick-preview-modal .ops-preview-header-actions>.karin-button{
  flex:0 0 auto!important;
  margin:0!important;
}


/* Karin v5.361.120 — payment method channel / receipt upload / review matrix */
body.karin-page-settings .payment-channel-matrix{display:grid!important;gap:6px!important;}
body.karin-page-settings .payment-channel-line{display:grid!important;grid-template-columns:minmax(150px,1fr) minmax(120px,.72fr) minmax(120px,.72fr)!important;align-items:center!important;gap:8px 12px!important;min-height:38px!important;padding:6px 9px!important;border:1px solid var(--karin-border)!important;border-radius:9px!important;background:var(--karin-surface-soft)!important;transition:opacity .15s ease,border-color .15s ease!important;}
body.karin-page-settings .payment-channel-line.is-disabled{opacity:.58!important;}
body.karin-page-settings .payment-channel-name,body.karin-page-settings .payment-channel-policy-toggle{display:inline-flex!important;align-items:center!important;gap:6px!important;margin:0!important;min-width:0!important;}
body.karin-page-settings .payment-channel-policy-toggle{color:var(--karin-text-muted)!important;font-size:11px!important;}
body.karin-page-settings .payment-channel-review-toggle:not(.is-unavailable){color:var(--karin-text)!important;}
body.karin-page-settings .payment-channel-review-toggle.is-unavailable{opacity:.46!important;}
body.karin-page-settings .payment-channel-receipt-settings{margin-top:10px!important;}
@media(max-width:680px){body.karin-page-settings .payment-channel-line{grid-template-columns:1fr 1fr!important;}body.karin-page-settings .payment-channel-name{grid-column:1/-1!important;}}