/* The document owns scrolling on every viewport; Appsmith sizing stays upstream. */
html { height: auto; min-height: 100%; overflow-y: auto; }
body { height: auto; min-height: 100dvh; overflow: visible; }
#screen { height: auto; min-height: 0; overflow: visible; grid-template-rows: none; grid-auto-rows: auto; align-content: start; gap: 16px; padding-top: 16px; }
#screen .scroll-list { max-height: none; overflow: visible; }
#screen .products-editor, #screen .inventory-panel, #screen .shifts-panel, #screen .ocr-panel, #screen .admin-editor { position: static; height: auto; min-height: 0; max-height: none; overflow: visible; }
#screen pre { max-height: none; overflow: visible; }
#screen .products-catalog, #screen .inventory-catalog { overflow: visible; }
#screen .printing-sheet { aspect-ratio: auto; }
#screen .printing-paper { position: static; height: auto; }
.web-drawer { position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; width: min(360px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 20px; border: 0; border-inline-start: 1px solid var(--border); border-radius: 0; overflow-y: auto; background: var(--surface); color: var(--text); }
.web-drawer:not([open]) { display: none; }
.web-drawer::backdrop { background: rgb(0 0 0 / 40%); }
.web-nav { display: grid; gap: 4px; margin-top: 16px; }
.web-nav a, .web-nav button { display: flex; align-items: center; width: 100%; min-height: var(--touch); padding: 8px 12px; border-radius: var(--small-radius); text-align: start; }
.web-nav a { color: var(--primary); font-weight: 700; }
.web-nav [aria-current] { background: var(--primary-soft); }
/* The toggle has one physical position at every breakpoint and panel state. */
#screen #menu-toggle { position: fixed; top: 12px; left: 16px; right: auto; z-index: 4; width: 44px; height: 44px; min-height: 44px; background: var(--surface); border: 1px solid var(--border); }
#screen .web-page-header { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; align-self: start; margin: 0; }
.web-title-copy { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; align-items: start; min-width: 0; min-height: 48px; padding-inline-end: 60px; text-align: start; }
.web-title-copy > :not(.web-assistant-slot) { grid-column: 2; }
.web-assistant-slot { grid-column: 1; grid-row: 1 / span 3; display: flex; align-items: start; width: 76px; height: 48px; }
.web-title-copy h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.5; overflow-wrap: anywhere; }
.web-page-secondary { color: var(--muted); font-size: var(--type-label-size); line-height: var(--type-label-line); }
.web-page-secondary > :is(p, div) { display: inline; margin: 0; }
.web-secondary-dot:has(+ :empty), .web-page-secondary > :empty { display: none; }
.web-screen-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.web-screen-controls > :is(#menu, #options-menu), .web-screen-controls #rare-actions { display: contents; }
.web-screen-controls button { min-height: 44px; max-width: 100%; padding: 8px 14px; border-radius: var(--pill); white-space: normal; }
.web-screen-controls [data-web-primary] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }
/* The list alone scrolls; its border and pager remain in the page flow. */
#screen .web-item-box { min-width: 0; border: 1px solid var(--border); border-radius: var(--small-radius); background: var(--surface); margin-block: 12px; }
#screen .web-item-scroll { height: auto; min-height: 0; max-height: min(480px, 50dvh); overflow-y: auto; overscroll-behavior-y: contain; margin: 0; padding: 8px; }
#screen .web-item-box > :is(nav, .web-item-pager) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 8px; border-top: 1px solid var(--border); }
#screen .web-item-box button { min-height: 44px; }
.web-result-limit { flex-basis: 100%; }
#screen .web-product-select { display: block; width: 100%; border: 0; border-radius: 0; min-height: 180px; max-height: min(280px, 35dvh); }
.web-product-select option { min-height: 44px; padding: 10px 12px; }
#screen[data-view="invoice"] #new-sale-catalog > .web-item-box { display: none; }
.web-status { padding: 12px 16px; margin: 0; }
.web-status[hidden] { display: none; }
.web-login { width: min(100% - 32px, 440px); margin: 48px auto; padding: 24px; }
.web-login form { display: grid; gap: 20px; }
.web-login h1 { margin-block: 0 24px; }
.web-login input { direction: ltr; text-align: start; }
@media print {
  body.web-printing > :not(#screen), body.web-printing #screen > :not(.printing-preview), body.web-printing .printing-preview > :not(#preview-sheet) { display: none; }
  body.web-printing #screen, body.web-printing .printing-preview { display: block; width: auto; max-width: none; padding: 0; margin: 0; border: 0; box-shadow: none; }
  body.web-printing #preview-sheet { display: block; width: auto; max-width: none; margin: 0; border: 0; box-shadow: none; }
  body.web-printing #invoice-frame { display: block; position: static; width: 100%; height: auto; }
  body.web-printing [data-paper="thermal_80mm"] #invoice-frame { width: 80mm; }
  body.web-printing [data-paper="thermal_58mm"] #invoice-frame { width: 58mm; }
}

/* Remove iframe-sized parent scrollports; item boxes own bounded scrolling. */
#new-sale-catalog, #new-sale-invoice, #old-panel { height: auto; min-height: 0; max-height: none; overflow: visible; }
.pos-options { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.pos-options .form-field { display: grid; gap: 6px; margin-block: 12px; }

#screen #new-sale-invoice { overflow: visible; }

/* Dashboard scope button sits in the "أرقام اليوم" heading row. */
.web-section-actions{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;margin-inline-start:auto}
.web-section-actions .web-screen-controls{margin:0;padding:0}

#screen #web-upload { grid-column: 1 / -1; }
.web-upload-request { border-top: 1px solid var(--border); padding-block: 12px; overflow-wrap: anywhere; }
.web-upload-decisions { display: flex; flex-wrap: wrap; gap: 12px; }
.web-upload-decisions button { flex: 1 1 180px; min-height: 56px; font-size: 18px; }
#upload-file { max-width: 100%; min-height: 48px; }
#upload-progress { width: 100%; }

/* Upload summary warnings sit inside the card; the shared .notice is a floating toast. */
.upload-warnings { margin: 8px 0; padding: 8px 12px; border-radius: 12px; color: var(--info); background: var(--info-soft); }

/* The idle mascot uses the existing title row. Only a signal adds a flow row. */
.web-page-header .assistant-root { display: contents; }
.assistant-mascot-controls { display: flex; align-items: center; gap: 0; width: 76px; height: 48px; }
.web-page-header .assistant-launcher { position: static; inset: auto; z-index: auto; display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; padding: 0; background: transparent; color: var(--primary); border: 0; border-radius: 50%; box-shadow: none; }
.assistant-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.assistant-mascot { display: block; width: 44px; height: 44px; transform-origin: center bottom; }
.assistant-mascot > :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
.assistant-mascot[data-state="idle"] { animation: assistant-breathe 4s ease-in-out infinite; }
.assistant-mascot[data-state="idle"] .assistant-eye { transform-box: fill-box; transform-origin: center; animation: assistant-blink 5s infinite; }
.assistant-mascot[data-state="news"] { animation: assistant-bounce .7s ease-out 2; }
.assistant-mascot[data-state="alert"] { animation: assistant-knock .65s ease-in-out 2; }
.assistant-mascot[data-state="thinking"] { animation: assistant-think 2.4s ease-in-out infinite; }
/* Real art animates itself (SMIL); the placeholder CSS motion would double it. */
.assistant-mascot.assistant-mascot--self-animated[data-state] { animation: none; }
.assistant-icon-button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 32px; min-height: 32px; padding: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.assistant-icon-button:hover { background: var(--primary-soft); }
.assistant-mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assistant-signal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; justify-self: start; gap: 4px 8px; width: max-content; max-width: min(100%, 420px); min-width: 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.assistant-signal::before { content: ""; position: absolute; top: -7px; inset-inline-start: 18px; width: 12px; height: 12px; background: var(--surface); border-top: 1px solid var(--border); border-left: 1px solid var(--border); transform: rotate(45deg); }
.assistant-signal p { margin: 0; }
.assistant-signal[hidden] { display: none; }
.assistant-dismiss { grid-column: 2; grid-row: 1; align-self: start; font-size: 24px; line-height: 1; }
.assistant-signal-action { grid-column: 1; justify-self: start; min-height: 36px; padding: 4px 14px; font-size: var(--type-label-size); }
.assistant-signal.is-moment { box-sizing: border-box; width: min(100%, 420px); max-width: 100%; min-width: 0; }
.assistant-signal.is-moment > * { min-width: 0; max-width: 100%; }
.assistant-moment-label { color: var(--muted); font-size: var(--type-label-size); }
.assistant-signal .assistant-moment-body { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; min-width: 0; max-width: 100%; align-self: start; }
.assistant-signal .assistant-moment-body.is-expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.assistant-moment-expand { grid-column: 1 / -1; justify-self: start; min-height: 36px; padding: 4px 12px; font-size: var(--type-label-size); }
.assistant-moment-expand[hidden] { display: none; }
.assistant-section-highlight { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--small-radius); scroll-margin-block-start: 72px; }
@keyframes assistant-breathe { 50% { transform: scale(.97, 1.03); } }
@keyframes assistant-blink { 0%, 43%, 49%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.08); } }
@keyframes assistant-bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-7px); } }
@keyframes assistant-knock { 15%, 45% { transform: rotate(-5deg); } 30%, 60% { transform: rotate(5deg); } 75% { transform: translateY(3px) scaleY(.95); } 100% { transform: none; } }
@keyframes assistant-think { 50% { transform: rotate(-3deg) translateY(-1px); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .assistant-mascot[data-state], .assistant-mascot[data-state] .assistant-eye { animation: none; }
}
@media print { .assistant-root { display: none; } }