/* 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.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;}
}