/* ShopKichele — responsive.css (extracted from index.html) */
/* ==========================================================================
   SHOPKICHELE UI & PRINT FIXES
   1. Unmerge buttons & fix mobile button padding
   2. Remove document borders (all templates)
   3. Always fix bank details and footer at the bottom of the A4 page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REMOVE DOCUMENT BORDERS
   -------------------------------------------------------------------------- */
.docpaper,
.docpaper.tpl-modern,
.docpaper.tpl-classic,
.docpaper.tpl-professional,
.docpaper.tpl-minimal,
#printArea.doc-print .docpaper,
#printArea.doc-print .docpaper.tpl-modern,
#printArea.doc-print .docpaper.tpl-classic,
#printArea.doc-print .docpaper.tpl-professional,
#printArea.doc-print .docpaper.tpl-minimal {
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. FIX MOBILE BUTTON PADDING & UNMERGE BUTTONS
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Prevent merged buttons in groups or flex containers */
  .btn-group,
  .button-group,
  .btn-toolbar,
  .d-flex:has(> .sk-btn),
  .d-flex:has(> .btn),
  .modal-footer,
  .sk-actions,
  .card-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Separate joined button borders and corners */
  .btn-group > .sk-btn,
  .btn-group > .btn,
  .btn-group > button,
  .btn-group > * {
    border-radius: 12px !important;
    margin: 0 !important;
    flex: 1 1 auto;
    width: auto;
  }

  /* Clear adjacent button collapse */
  .sk-btn + .sk-btn,
  .btn + .btn,
  button + button {
    margin-left: 0 !important;
  }

  /* Adequate touch padding and sizing */
  .sk-btn,
  .btn {
    min-height: 46px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .sk-btn.sm,
  .btn-sm {
    min-height: 38px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Document tab buttons */
  .doctabs {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .doctabs button {
    padding: 8px 16px !important;
    min-height: 38px !important;
    border-radius: 99px !important;
  }
}

/* --------------------------------------------------------------------------
   3. BANK DETAILS & FOOTER FIXED AT BOTTOM OF A4 PAGE
   -------------------------------------------------------------------------- */
/* Screen view: make .docpaper flex full A4 sheet */
.docpaper {
  display: flex !important;
  flex-direction: column !important;
  min-height: 297mm !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Push bank details & footer down */
.docpaper .dp-foot,
.docpaper .dp-bank,
.docpaper .dp-footer,
.docpaper .dp-payment-details,
.docpaper .dp-notes-foot-wrap {
  margin-top: auto !important;
  width: 100% !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* A4 Print layout */
@page docA4 {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  #printArea.doc-print,
  #printArea.doc-print .docpaper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 277mm !important;
    height: 277mm !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Let main content flex and anchor footer */
  #printArea.doc-print .dp-head,
  #printArea.doc-print .dp-parties,
  #printArea.doc-print .dp-items,
  #printArea.doc-print .dp-totals {
    flex: 0 0 auto !important;
  }

  /* Fixed to the bottom of the A4 page */
  #printArea.doc-print .dp-foot,
  #printArea.doc-print .dp-bank,
  #printArea.doc-print .dp-footer,
  #printArea.doc-print .dp-payment-details,
  #printArea.doc-print .dp-notes-foot-wrap {
    margin-top: auto !important;
    width: 100% !important;
    position: relative !important;
    bottom: 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid #e5e7eb !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}
/* Canonical mobile presentation layer. Desktop remains governed by the base layout. */
.mobile-search-btn,.mobile-context,.network-banner,.mobile-doc-summary,.a4-preview-label{display:none}

@media (max-width:899.98px){
  :root{--nav-h:68px;--visual-height:100dvh}
  #app,.appmain,main#view,.stack,.sk-card,.dcard,.kpi-d,.field,.input-group{min-width:0}
  img,svg,canvas,video{max-width:100%}
  input,select,textarea{max-width:100%}
  body.shell-on .sidebar,body.shell-on .sidebar-scrim{display:none!important}
  body.shell-on .appmain{margin:0;width:100%;min-width:0}

  /* Compact app bar: fixed-size actions cannot be displaced by long titles. */
  body.shell-on .topbar{position:sticky;top:0;z-index:50;display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px 44px 44px!important;align-items:center;gap:2px;min-height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 8px 0;background:var(--app-surface);border-bottom:1px solid var(--app-border);box-shadow:none}
  body.shell-on .topbar .menubtn,.mobile-search-btn,.bellwrap,.userchip{display:grid!important;width:44px!important;height:44px!important;min-width:44px;min-height:44px;place-items:center;padding:0!important;background:transparent;color:var(--app-text);border:0;border-radius:10px;flex:none}
  body.shell-on .topbar h1{min-width:0;font-size:18px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:4px}
  body.shell-on .topbar .searchbox,body.shell-on .topbar .spacer,body.shell-on .topbar .userchip>span:last-child{display:none!important}
  .mobile-search-btn .lucide,.bellwrap .lucide,.userchip .lucide{width:21px;height:21px}
  .userchip .av{display:grid!important;width:34px!important;height:34px!important;place-items:center;font-size:12px}
  .topbar .status-dot{width:44px;height:44px;padding:0!important;font-size:0!important;background:transparent!important;display:grid!important;place-items:center}
  .topbar .status-dot .lucide{width:18px;height:18px;color:var(--app-success)}
  .topbar .status-dot[data-offline="false"]{display:none!important}
  .topbar .status-dot[data-offline="true"] .lucide{color:var(--app-warning)}

  .mobile-context{padding:10px 14px 9px;background:var(--app-surface);border-bottom:1px solid var(--app-border)}
  .mobile-context.show{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
  .mobile-context strong,.mobile-context span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-context strong{font-size:13px;text-transform:uppercase}.mobile-context span{font-size:12px;color:var(--app-text-muted)}
  .mobile-context button{width:44px;min-width:44px;min-height:44px;padding:0}
  .network-banner{margin:8px 12px 0;padding:0;border-radius:12px;background:linear-gradient(90deg,var(--app-warning-soft),var(--app-surface));color:var(--app-text);font-size:13px;font-weight:600;overflow:hidden;border:1px solid var(--app-border);display:none;box-shadow:0 1px 2px rgba(15,27,43,.04)}
  .network-banner.show{display:block}
  .network-banner .marquee-wrap{overflow:hidden;white-space:nowrap;position:relative}
  .network-banner .marquee-track{display:inline-flex;align-items:center;gap:32px;padding:10px 12px;white-space:nowrap;min-width:max-content;animation:network-marquee 18s linear infinite}
  .network-banner .marquee-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--app-text)}
  .network-banner .marquee-item strong{font-weight:800}
  @keyframes network-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.network-banner .marquee-track{animation:none;transform:none}}

  /* Bottom navigation owns the safe area; page content clears it. */
  body.shell-on main#view{width:100%;padding:14px 12px calc(var(--nav-h) + 24px + var(--safe-b))!important}
  body.shell-on .bottomnav{z-index:40;height:calc(var(--nav-h) + var(--safe-b));grid-template-columns:repeat(5,minmax(0,1fr));padding:0 4px var(--safe-b);background:var(--app-surface);border-top:1px solid var(--app-border)}
  body.shell-on .bottomnav button{height:var(--nav-h);min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px!important;font-size:11px;font-weight:600;color:var(--app-text-muted);border-radius:10px!important}
  body.shell-on .bottomnav button .nav-icon{height:25px;display:grid;place-items:center;flex:none}
  body.shell-on .bottomnav button .nav-label{display:block!important;max-width:100%;font-size:11px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.shell-on .bottomnav button[aria-current="page"]{color:var(--app-brand);background:var(--app-brand-soft)}
  body.shell-on .bottomnav button[aria-current="page"]::after{display:none!important}

  /* Mobile touch and form targets. */
  .sk-btn,.btn{min-height:48px!important}
  .sk-btn.sm,.btn-sm,.sk-btn-icon,.icon-btn,.doc-more>.sk-btn,.dropdown-toggle{min-width:44px;min-height:44px!important}
  input.form-control,select.form-select,textarea.form-control,input,select,textarea{font-size:16px!important;min-height:46px!important}
  textarea.form-control,textarea{min-height:96px}
  .form-check-input{min-width:22px;min-height:22px}
  label:has(>.form-check-input){min-height:44px;display:flex;align-items:center;gap:8px}
  .qtybtn{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;line-height:1}
  .docrow button[data-del]{width:44px!important;min-width:44px;min-height:44px!important;top:4px!important}
  .chip,.doctabs button{min-height:44px}
  .morerow,.dropdown-item{min-height:48px}
  :focus-visible{outline:3px solid var(--app-ring);outline-offset:2px}
  button:disabled,.sk-btn:disabled{opacity:.55;cursor:not-allowed}

  /* Keyboard-aware sheets. */
  .sheet-backdrop{z-index:60}
  .sheet{z-index:70;width:100%;max-width:100%;max-height:min(calc(var(--visual-height) - 8px),820px);overflow-y:auto;overscroll-behavior:contain;border-radius:20px 20px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .sheet #sheetBody{min-width:0}
  .sheet .sheet-sticky-action{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));margin:14px -16px calc(-20px - env(safe-area-inset-bottom,0px));padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--app-surface);border-top:1px solid var(--app-border);z-index:2}
  .sheet input:focus,.sheet select:focus,.sheet textarea:focus{scroll-margin-block:88px}

  .morerow{border-radius:12px;margin-bottom:6px}.morehub .grouplabel{margin-top:22px;font-size:11px}
  .table-responsive{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .spread,.card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
  .spread>*,.card-head>*{min-width:0}

  /* POS: cart stays between content and navigation. */
  .cartbar{z-index:45;bottom:calc(var(--nav-h) + var(--safe-b));min-height:64px;padding:8px 12px;border-radius:14px 14px 0 0;box-shadow:0 -5px 18px color-mix(in oklab,var(--app-text) 12%,transparent)}
  .cartbar>div,.cartbar #cartBarInfo{min-width:0}
  .cartbar #cartBarInfo{overflow:hidden;text-overflow:ellipsis}
  .cartbar .go{flex:none;min-height:46px;padding:0 14px}
  body:has(.cartbar) main#view{padding-bottom:calc(var(--nav-h) + 100px + var(--safe-b))!important}
  .pos-layout>.col-12>.stack>.input-group{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:20;padding:6px 0;background:var(--app-bg)}
  .pos-grid,.pos-layout .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .pcard{min-width:0;min-height:178px;border-radius:12px}.pcard .nm{overflow-wrap:anywhere}.product-pos-thumb{height:102px}
  .chips{flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}

  /* Dashboard and inventory hierarchy. */
  .dash-bs{display:flex!important;flex-direction:column;gap:14px}
  .dash-bs>.col-12{gap:14px!important}
  .dash-bs .greetrow{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;width:100%;min-width:0;margin-bottom:0}
  .dash-bs .greetrow > div{width:100%;min-width:0}
  .dash-bs .greetrow h1{margin:0;font-size:20px;line-height:1.25;overflow-wrap:anywhere}
  .dash-bs .greetrow p{display:none;margin:4px 0 0;color:var(--d-muted);font-size:13px;line-height:1.45}
  .dash-bs .greetrow .datebox{display:flex;align-items:center;gap:6px;width:100%;color:var(--d-muted);font-size:12px;line-height:1.4;white-space:normal}
  .dash-bs .kpi-d{min-height:118px;padding:14px}.dash-bs .kpi-d .value{font-size:18px;overflow-wrap:anywhere}
  .dash-bs .table-responsive{overflow:visible}.dash-bs table.simple{min-width:0!important}.dash-bs table.simple thead{display:none}.dash-bs table.simple,.dash-bs table.simple tbody,.dash-bs table.simple tr,.dash-bs table.simple td{display:block;width:100%}.dash-bs table.simple tr{position:relative;padding:12px 82px 12px 0;border-bottom:1px solid var(--app-border)}.dash-bs table.simple td{padding:1px 0!important;border:0}.dash-bs table.simple td:last-child{position:absolute;right:0;top:12px;width:auto}
  .product-stock-card .grid2{display:none}.product-stock-card .product-thumb{width:68px;height:68px;min-width:68px}.product-stock-card .d-flex.flex-wrap.align-items-center{display:grid!important;grid-template-columns:minmax(0,1fr) 44px}.product-stock-card .d-flex.flex-wrap.align-items-center>.sk-btn.secondary{justify-self:start}.product-stock-card .dropdown{justify-self:end}

  /* Mobile documents retain an isolated, explicitly labeled A4 scroller. */
  .doctabs{flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}.doctabs button{flex:0 0 auto;white-space:nowrap}
  .doc-view .doc-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.doc-view .doc-actions>.doctabs{display:none}.doc-view .doc-more{flex:none}.doc-view .doc-more>.sk-btn{width:44px;padding:0;display:grid;place-items:center}
  .mobile-doc-summary{display:block}.mobile-doc-summary .doc-identity{padding:18px 0;border-bottom:1px solid var(--app-border)}.mobile-doc-summary .doc-type{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--app-brand);text-transform:uppercase}.mobile-doc-summary .doc-number{font-size:22px;font-weight:800;margin-top:2px;overflow-wrap:anywhere}.mobile-doc-summary .doc-total{font-size:26px;font-weight:800;margin-top:12px}.mobile-doc-summary .doc-section{padding:18px 0;border-bottom:1px solid var(--app-border)}.mobile-doc-summary .doc-section-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--app-text-muted);margin-bottom:10px}.mobile-doc-summary .doc-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:9px 0}.mobile-doc-summary .doc-item>span{min-width:0;overflow-wrap:anywhere}.mobile-doc-summary .doc-totals>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}.mobile-doc-summary .doc-totals .grand{font-size:18px;padding-top:10px;border-top:1px solid var(--app-border);margin-top:6px}.mobile-doc-primary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:14px}
  .doc-preview-scroll{display:none;width:calc(100% + 24px);margin-inline:-12px;padding:2px 12px 12px;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .doc-view.a4-mode .mobile-doc-summary{display:none}.doc-view.a4-mode .doc-preview-scroll{display:block}.doc-view.a4-mode .a4-preview-label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:10px}
  .doc-view.a4-mode .doc-preview-scroll .docpaper{width:210mm!important;min-width:720px!important;max-width:none!important;min-height:297mm!important;padding:20mm 18mm!important}
  .doc-view.a4-mode .doc-preview-scroll .dp-head,.doc-view.a4-mode .doc-preview-scroll .dp-parties,.doc-view.a4-mode .doc-preview-scroll .dp-foot{flex-direction:row!important}.doc-view.a4-mode .doc-preview-scroll .dp-meta{text-align:right!important}.doc-view.a4-mode .doc-preview-scroll .dp-totals{width:64mm!important;margin-left:auto!important}.doc-view.a4-mode .doc-preview-scroll .dp-items{display:table!important;width:100%!important}.doc-view.a4-mode .doc-preview-scroll .dp-items thead{display:table-header-group!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important}.doc-view.a4-mode .doc-preview-scroll .dp-items tbody{display:table-row-group!important}.doc-view.a4-mode .doc-preview-scroll .dp-items tr{display:table-row!important}.doc-view.a4-mode .doc-preview-scroll .dp-items th,.doc-view.a4-mode .doc-preview-scroll .dp-items td{display:table-cell!important;padding:9px 10px!important;white-space:normal!important}.doc-view.a4-mode .doc-preview-scroll .dp-items td:nth-child(1){display:table-cell!important}.doc-view.a4-mode .doc-preview-scroll .dp-items td::before{display:none!important;content:none!important}
  .doc-editor-section{scroll-margin-top:70px}.docrow{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-top:52px}.docrow>div:first-child{grid-column:1/-1}

  /* Receipt previews use the same primary-actions plus overflow-menu pattern. */
  .receipt-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:12px}.receipt-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}.receipt-actions.single .receipt-primary{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:575.98px){
  .grid2,.doc-type-page .grid2{grid-template-columns:minmax(0,1fr)}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-bs .row.g-2>.col-6{width:50%}
  .morehub>.sk-card:first-child{padding:12px}
}
@media (min-width:900px){.mobile-search-btn,.mobile-context,.network-banner,.mobile-doc-summary{display:none!important}}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
/* Surgical login visual: scoped only to screenLogin(). */
.sk-login-page{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);background:#f7f9fc}
.sk-login-visual{position:relative;min-height:100dvh;overflow:hidden;display:flex;align-items:flex-end;background-image:url("../assets/logos/shopkichele login.png");background-size:cover;background-position:center;isolation:isolate}
.sk-login-visual-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,29,68,.34),rgba(6,29,68,.56) 62%,rgba(6,29,68,.82)),linear-gradient(0deg,rgba(5,25,58,.72),transparent 55%)}
.sk-login-visual-content{max-width:650px;padding:clamp(32px,6vw,82px);color:#fff}
.sk-login-badge{display:inline-flex;align-items:center;min-height:30px;padding:6px 11px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);font-size:11px;font-weight:800;letter-spacing:.14em}
.sk-login-visual-content h2{margin:16px 0 10px;max-width:590px;color:#fff;font-size:clamp(2rem,4vw,4.1rem);line-height:1.02;letter-spacing:-.035em}
.sk-login-visual-content p{max-width:560px;margin:0;color:rgba(255,255,255,.86);font-size:clamp(15px,1.35vw,19px);line-height:1.6}
.sk-login-feature-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.sk-login-feature-row span{padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:700}
.sk-login-panel{min-width:0;min-height:100dvh;display:grid;place-items:center;padding:clamp(20px,4vw,54px);background:#fff}.sk-login-panel-inner{width:100%;max-width:430px}.sk-login-panel .sk-card{box-shadow:0 18px 55px rgba(8,31,72,.08)}
@media (max-width:900px){.sk-login-page{grid-template-columns:1fr}.sk-login-visual{min-height:270px;max-height:34dvh}.sk-login-visual-content{padding:28px 24px}.sk-login-visual-content h2{font-size:clamp(1.7rem,7vw,2.5rem);max-width:520px}.sk-login-visual-content p{font-size:14px;max-width:520px}.sk-login-feature-row{display:none}.sk-login-panel{min-height:auto;padding:28px 18px 38px}}
@media (max-width:560px){.sk-login-visual{min-height:185px;max-height:24dvh}.sk-login-visual-content{padding:20px}.sk-login-badge{font-size:9px;min-height:26px;padding:5px 9px}.sk-login-visual-content h2{margin-top:9px;font-size:1.55rem}.sk-login-visual-content p{display:none}.sk-login-panel{padding:22px 12px 30px}.sk-login-panel .sk-card{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.sk-login-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}