/* Odoo redesign: screens. Owner: work package "screens" (docs/ODOO_REDESIGN_PLAN.md). Uses the tokens from odoo-tokens.css.
   Covers: sign-in, Catalog & Document Designer (both engines), Sales Distribution portal, document preview, boot look.
   Numbers: docs/odoo-reference/ODOO_DESIGN_SYSTEM.md, catalog/COMPONENTS.md (forms F4-F12, settings S1-S4, wizards D1), prototype-odoo/designer.html + sales.html.
   The documents themselves (.doc, print output) are the customer's branding and are never restyled here: every utility override
   below is scoped to .odoo-scr and guarded with :not(.doc *). */

/* =====================================================================================================
   0. DOCUMENTS ARE THE CUSTOMER'S BRANDING: the Odoo base type (14 px, Segoe UI first) must not leak into what prints.
   Everything inside .doc (live previews, the print surface, the viewer) keeps the type it had before the redesign:
   Roboto first, 13 px / 1.5, colour #212529. Page counts and positions of existing templates depend on it (tests/hf.test.js).
   ===================================================================================================== */
.doc, #printArea {
  font-family: 'Roboto', 'Noto Sans Gujarati', 'Noto Sans Devanagari', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--odoo-body-color);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* =====================================================================================================
   1. SIGN IN  (Odoo login page: centred card on the page background, labels above inputs, purple primary,
   teal link actions, show/hide password)
   ===================================================================================================== */

/* =====================================================================================================
   2. DESIGNER / PORTAL / DOCUMENT PREVIEW: Odoo side-panel editors and settings pages
   ===================================================================================================== */
.odoo-scr { font-size: 14px; line-height: 1.5; color: var(--odoo-body-color); }

/* ---- type scale: Odoo's 14 px body, 13 px small, 12 px badges (not inside the designed documents) ---- */
.odoo-scr :is(.text-\[10px\], .text-\[10\.5px\], .text-\[11px\], .text-\[11\.5px\]):not(.doc *) { font-size: 12px; line-height: 18px; }
.odoo-scr :is(.text-\[12px\], .text-\[12\.5px\]):not(.doc *) { font-size: 13px; line-height: 19.5px; }
.odoo-scr :is(.text-\[13px\], .text-\[13\.5px\]):not(.doc *) { font-size: 14px; line-height: 21px; }
.odoo-scr :is(.font-bold, .font-extrabold):not(.doc *):not(.num) { font-weight: 500; }
.odoo-scr .font-semibold:not(.doc *) { font-weight: 500; }
.odoo-scr .tracking-tight { letter-spacing: 0; }

/* ---- colours: grey and brand utilities onto Odoo's palette ---- */
.odoo-scr .text-zinc-400:not(.doc *), .odoo-scr .text-zinc-500:not(.doc *) { color: var(--odoo-secondary-color); }
.odoo-scr .text-zinc-600:not(.doc *), .odoo-scr .text-zinc-700:not(.doc *) { color: var(--odoo-gray-700); }
.odoo-scr .border-zinc-100:not(.doc *) { border-color: var(--odoo-gray-200); }
.odoo-scr .border-zinc-200:not(.doc *), .odoo-scr .border-zinc-300:not(.doc *) { border-color: var(--odoo-border-color); }
.odoo-scr .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--odoo-gray-200); }
.odoo-scr .bg-zinc-50:not(.doc *), .odoo-scr .bg-zinc-100:not(.doc *) { background-color: var(--odoo-gray-100); }
.odoo-scr .text-indigo-600:not(.doc *), .odoo-scr .text-indigo-700:not(.doc *), .odoo-scr .text-emerald-700:not(.doc *) { color: var(--odoo-link); }
.odoo-scr .hover\:underline:hover { text-decoration: none; color: var(--odoo-link-hover); }
.odoo-scr .bg-indigo-50:not(.doc *) { background-color: var(--odoo-teal-tint); }
.odoo-scr .text-amber-700:not(.doc *), .odoo-scr .text-amber-800:not(.doc *) { color: var(--odoo-warning-alert-text); }
.odoo-scr .bg-amber-50:not(.doc *) { background-color: var(--odoo-warning-bg-subtle); }
.odoo-scr .border-amber-200:not(.doc *) { border-color: var(--odoo-warning-bg-subtle); }
.odoo-scr .bg-emerald-50:not(.doc *) { background-color: var(--odoo-success-bg-subtle); }
.odoo-scr .border-emerald-200:not(.doc *) { border-color: var(--odoo-success-bg-subtle); }
.odoo-scr .bg-rose-50:not(.doc *) { background-color: var(--odoo-danger-bg-subtle); }
.odoo-scr .border-rose-200:not(.doc *) { border-color: var(--odoo-danger-bg-subtle); }
.odoo-scr .text-rose-600:not(.doc *), .odoo-scr .text-rose-700:not(.doc *) { color: var(--odoo-danger-text); }

/* ---- radii: 6 px controls, 8 px cards and sheets ---- */
.odoo-scr .rounded:not(.doc *) { border-radius: 4px; }
.odoo-scr :is(.rounded-md, .rounded-lg):not(.doc *) { border-radius: var(--odoo-radius); }
.odoo-scr :is(.rounded-xl, .rounded-2xl):not(.doc *) { border-radius: var(--odoo-radius-lg); }
.odoo-scr .shadow-2xl:not(.doc *), .odoo-scr .shadow-lg:not(.doc *), .odoo-scr .shadow-md:not(.doc *) { box-shadow: var(--odoo-popover-shadow); }

/* ---- buttons: height 32.3, padding 5 10, radius 6, weight 500 ---- */



















/* ---- inputs: 14 px, 6 px radius, thin Odoo input border, teal focus ---- */









.odoo-scr input[type="color"] { padding: 2px; border: 1px solid var(--odoo-input-border-color); border-radius: var(--odoo-radius); background: #fff; }
.odoo-scr input[type="color"].h-8, .odoo-scr input[type="color"].w-8 { height: 32.3px; }

/* ---- labels and block titles ---- */
.odoo-scr .o-lbl { display: block; margin: 0 0 4px; font-size: 14px; line-height: 21px; font-weight: 500; color: #000; letter-spacing: 0; }
.odoo-scr .o-lbl.flex-1, .odoo-scr .o-lbl.shrink-0 { margin-bottom: 0; }
.odoo-scr .o-hd { margin: 0 0 8px; font-size: 15.4px; line-height: 18.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #000; }
.odoo-scr .o-hd.mb-1\.5, .odoo-scr .o-hd.mb-2, .odoo-scr .o-hd.mb-1 { margin-bottom: 8px; }
.odoo-scr .o-hd.flex-1 { margin-bottom: 0; }
.odoo-scr .o-hd.px-2 { padding-left: 8px; padding-right: 8px; margin-bottom: 0; }

/* ---- checkboxes (14 x 14, radius 3.5, border #ADB5BD, teal when checked) and radios ---- */






.odoo-scr label.cursor-pointer { gap: 8px; }

/* ---- toggle switch (prototype .knob: 30 x 18, thumb 14, on = primary) ---- */
.odoo-scr .tgl { width: 30px; height: 18px; flex: 0 0 30px; border-radius: var(--odoo-radius-pill); background: var(--odoo-gray-400); }
.odoo-scr .tgl::before { width: 14px; height: 14px; top: 2px; left: 2px; }
.odoo-scr .tgl:checked { background: var(--odoo-primary); }
.odoo-scr .tgl:checked::before { transform: translateX(12px); }
.odoo-scr .tgl:focus-visible { box-shadow: var(--odoo-focus-ring); }

/* ---- range sliders ---- */
.odoo-scr input[type="range"] { accent-color: var(--odoo-primary); }

/* ---- selection tiles (template presets, layouts, fonts, stamping, density, pages): outline tile, selected = teal tint ---- */
.odoo-scr button.border, .odoo-scr [role="button"].border { border-width: .67px; }
.odoo-scr .border-indigo-400.bg-indigo-50:not(.doc *) { border-color: var(--odoo-link); background-color: var(--odoo-teal-tint); color: #000; }
.odoo-scr .border-indigo-300.bg-indigo-50:not(.doc *) { border-color: var(--odoo-link); background-color: var(--odoo-teal-tint); color: #000; }
.odoo-scr :is(button, [role="button"]).hover\:bg-zinc-50:hover { background-color: var(--odoo-gray-100); }
.odoo-scr .border-dashed { border-color: var(--odoo-gray-400); border-width: 1px; }
.odoo-scr label.border-dashed:hover { background: var(--odoo-gray-100); }

/* ---- segmented controls (Odoo: white pill, teal-tint active) ---- */
.odoo-scr .inline-flex.rounded-lg.border:not(.doc *) { padding: 0; overflow: hidden; border: .67px solid var(--odoo-gray-400); border-radius: var(--odoo-radius); background: #fff; }
.odoo-scr .inline-flex.rounded-lg.border > button { border-radius: 0; height: 30px; font-size: 13px; font-weight: 400; color: var(--odoo-body-color); border-right: .67px solid var(--odoo-gray-400); }
.odoo-scr .inline-flex.rounded-lg.border > button:last-child { border-right: 0; }
.odoo-scr .inline-flex.rounded-lg.border > button:hover { background: var(--odoo-gray-100); }
.odoo-scr .inline-flex.rounded-lg.border > button.bg-indigo-600 { background: var(--odoo-teal-tint); color: #000; font-weight: 500; }
.odoo-scr .inline-flex.rounded-lg.border > span { color: var(--odoo-body-color); font-size: 13px; padding: 0 8px; }
.odoo-scr .inline-flex.rounded-lg.border > button.w-7 { width: 30px; }

/* ---- pills / chips ---- */
.odoo-scr button.rounded-full.border { border: .67px solid var(--odoo-gray-400); background: #fff; color: var(--odoo-body-color); }
.odoo-scr button.rounded-full.border.border-indigo-400 { background: var(--odoo-teal-tint); border-color: var(--odoo-link); color: #000; }
.odoo-scr .chip { height: 20px; padding: 0 8px; font-size: 12px; font-weight: 500; }
.odoo-scr .chip.bg-emerald-100 { background: var(--odoo-success-bg-subtle); color: var(--odoo-success-alert-text); }
.odoo-scr .chip.bg-violet-100 { background: var(--odoo-primary-bg-subtle); color: var(--odoo-primary-text); }

/* ---- colour swatches: round, 28 px, ring; selected = dark ring ---- */
.odoo-scr button[aria-label^="Theme "], .odoo-scr button[aria-label="Choose this colour"], .odoo-scr button[aria-label="No colour"] { width: 28px; height: 28px; border-radius: 50%; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.odoo-scr button[aria-label^="Theme "].border-zinc-900, .odoo-scr button[aria-label="Choose this colour"].border-zinc-900, .odoo-scr button[aria-label="No colour"].border-zinc-900 { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--odoo-gray-900); }
.odoo-scr input[type="color"].w-8.h-8, .odoo-scr input[type="color"][aria-label="Custom theme colour"] { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); overflow: hidden; }
.odoo-scr input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.odoo-scr input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.odoo-scr input[type="color"].w-8.h-8::-webkit-color-swatch, .odoo-scr input[type="color"][aria-label="Custom theme colour"]::-webkit-color-swatch { border-radius: 50%; }

/* ---- info / warning banners inside panels: Odoo alert (radius 6, padding 8 12 here) ---- */
.odoo-scr .rounded-lg.bg-indigo-50.border-indigo-200 { border: 0; background: var(--odoo-info-bg-subtle); color: var(--odoo-info-text); padding: 12px 16px; }
.odoo-scr .rounded-lg.bg-indigo-50.border-indigo-200 b { color: inherit; }
.odoo-scr .rounded-lg.bg-amber-50.border { border: 0; background: var(--odoo-warning-bg-subtle); }

/* ---- scrollbars of the panels ---- */
.odoo-scr .thin::-webkit-scrollbar-thumb { background: var(--odoo-gray-400); background-clip: content-box; }

/* =====================================================================================================
   3. PAGE HEADER ROW ("rail" = control panel row): title, source menu, counters, actions
   ===================================================================================================== */
.odoo-scr .rail { gap: 8px; row-gap: 8px; min-height: 36.5px; }
.odoo-scr .rail > .text-\[14px\] { font-size: 14px; font-weight: 500; color: #000; }
.odoo-scr .rail .ibsep { height: 20px; background: var(--odoo-border-color); }
.odoo-scr .ibgrp { gap: 4px; padding: 4px; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-switcher); background: #fff; }




.odoo-scr .ibgrp > button.bg-indigo-600 { background: var(--odoo-gray-200); color: #000; }
.odoo-scr .ibgrp > button:not(.bg-indigo-600):hover { background: var(--odoo-gray-100); }
/* the Record templates | Catalogues switch is Odoo's view switcher */
.odoo-scr .o-switch { display: inline-flex; padding: 4px; margin-bottom: 12px; gap: 4px; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-switcher); background: #fff; }
.odoo-scr .o-switch > button { height: 26.3px; padding: 0 10px; border-radius: var(--odoo-radius); font-size: 14px; font-weight: 400; color: var(--odoo-body-color); }
.odoo-scr .o-switch > button.bg-indigo-600 { background: var(--odoo-gray-200); color: #000; font-weight: 500; }
.odoo-scr .o-switch > button:not(.bg-indigo-600):hover { background: var(--odoo-gray-100); }
.odoo-scr .o-switch > span { margin-left: 8px; align-self: center; }
/* dropdown menus opened from the rail */
.odoo-scr .absolute.bg-white.rounded-xl { border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-xl); box-shadow: var(--odoo-popover-shadow); padding: 4px; }
.odoo-scr .absolute.bg-white.rounded-xl button { border-radius: var(--odoo-radius-lg); padding-top: 3px; padding-bottom: 3px; min-height: 27px; }
.odoo-scr .absolute.bg-white.rounded-xl button.bg-indigo-50 { background: var(--odoo-teal-tint); color: #000; font-weight: 500; }
.odoo-scr .absolute.bg-white.rounded-xl button:hover { background: var(--odoo-gray-100); }
.odoo-scr .absolute.bg-white.rounded-xl .o-hd { font-size: 13px; line-height: 19.5px; color: var(--odoo-secondary-color); padding: 3px 8px; }

/* =====================================================================================================
   4. STEPS (wizard navigation as Odoo notebook tabs) and settings blocks (Odoo settings page)
   ===================================================================================================== */
.o-steps { padding: 0; border: 0; border-bottom: .67px solid var(--odoo-border-color); border-radius: 0; background: transparent; }
.o-steps > .flex { gap: 0; }
.o-steps button { height: auto; padding: 8px 10px; margin: 0 0 -1px; border: .67px solid transparent; border-radius: var(--odoo-radius) var(--odoo-radius) 0 0; background: transparent; color: var(--odoo-gray-700); font-size: 14px; font-weight: 400; gap: 0; }
.o-steps button:hover { color: var(--odoo-body-color); background: transparent; }
.o-steps button > i, .o-steps button > svg, .o-steps button > .num { display: none; }
.o-steps button.bg-indigo-600 { color: var(--odoo-primary); background: #fff; border-color: var(--odoo-border-color) var(--odoo-border-color) #fff; border-top: 1px solid var(--odoo-primary); font-weight: 500; }

/* the configuration column is a stack of Odoo panels (prototype .step): each group of a step is a white card, radius 8, padding 16, 12 px apart */
.o-cfg { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.o-cfg > .o-phead { min-height: 32px; padding: 0 0 8px; border: 0; background: transparent; gap: 8px; }
.o-cfg > .o-phead > i, .o-cfg > .o-phead > svg { display: none; }
.o-cfg > .o-phead > span { font-size: 15.4px; line-height: 18.5px; font-weight: 500; color: #000; }

.o-cfg-body { display: flex; flex-direction: column; gap: 12px; padding: 0 !important; }
.o-cfg-body > * { margin: 0 !important; padding: 16px; border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); background: #fff; }
.o-cfg-body > .o-plain { padding: 0 4px; border: 0; background: transparent; }
.o-cfg-body > .space-y-3 > * + *, .o-cfg-body > .space-y-5 > * + *, .o-cfg-body > .space-y-2 > * + * { margin-top: 12px; }
/* collapsible groups (click a group title): the chevron turns, the group's body hides */
.o-cfg-body .o-hd { position: relative; cursor: pointer; user-select: none; }
.o-cfg-body .o-hd:not(.flex-1)::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border: solid var(--odoo-gray-600); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; }
.o-cfg-body .o-collapsed > .o-hd::after { transform: rotate(-45deg) translateX(-2px); }
.o-cfg-body .o-collapsed > :not(.o-hd):not(:has(.o-hd)) { display: none; }
.o-cfg-body .o-collapsed > .o-hd { margin-bottom: 0; }
.o-cfg > [data-dnd-list="mid"] { margin-bottom: 12px; padding: 16px; border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); background: #fff; }

/* two-pane layout from 992 px (Odoo's desktop breakpoint): preview left, 420 px side panel right (prototype .split) */
@media (min-width: 992px) {
  .odoo-scr .grid.grid-cols-12 { grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
  .odoo-scr .grid.grid-cols-12 > * { grid-column: auto; min-width: 0; }
  .odoo-designer .grid.grid-cols-12 > .xl\:order-1, .odoo-portal .grid.grid-cols-12 > .lg\:order-1 { order: 1; }
  .odoo-designer .grid.grid-cols-12 > .xl\:order-2, .odoo-portal .grid.grid-cols-12 > .lg\:order-2 { order: 2; }
  .odoo-designer .grid.grid-cols-12 > .xl\:order-2 { position: sticky; top: 64px; }
}

/* =====================================================================================================
   5. PREVIEW SHEET (white, radius 8, 0.67 px border) on the Odoo canvas background #F8F9FA
   ===================================================================================================== */
.o-sheet { border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); background: #fff; overflow: hidden; }
.o-sheet > .o-phead { min-height: 52px; padding: 12px 16px; border-bottom: .67px solid var(--odoo-border-color); gap: 8px; }
.o-sheet > .o-phead > i:first-child, .o-sheet > .o-phead > svg:first-child { display: none; }
.o-sheet > .o-phead > span:first-of-type, .o-sheet > .o-phead > i + span, .o-sheet > .o-phead > svg + span { font-size: 14px; line-height: 21px; font-weight: 500; color: #000; }
.o-sheet > .o-phead .num, .o-sheet > .o-phead .truncate { font-weight: 400; }
.o-sheet > .o-phead .rounded-full { padding: 0 8px; background: var(--odoo-gray-200); color: var(--odoo-gray-700); font-size: 12px; font-weight: 500; line-height: 20px; }
.o-sheet > .o-phead .rounded-full.bg-indigo-50 { background: var(--odoo-primary-bg-subtle); color: var(--odoo-primary-text); }
.o-canvas { padding: 16px; background: var(--odoo-body-bg); }
@media screen {
  .o-canvas .doc .page, .o-canvas .doc > div > .page { box-shadow: 0 0 0 .67px var(--odoo-border-color), var(--odoo-shadow); }
}

/* =====================================================================================================
   6. SALES PORTAL: step panels (prototype .step: white, 0.67 px border, radius 8, padding 16)
   ===================================================================================================== */
.o-step { padding: 16px; border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); background: #fff; }
.odoo-portal .o-step .o-hd { margin-bottom: 12px; }
.odoo-portal .o-step .o-hd:not(.mb-2) { margin-bottom: 0; }
.odoo-portal .o-step > .flex:first-child { margin-bottom: 12px; align-items: center; }
.odoo-portal .o-step > .flex:first-child .o-hd { margin-bottom: 0; }
.odoo-portal .o-step button.rounded-xl, .odoo-portal .o-step button.rounded-lg.border { border-width: .67px; }
.odoo-portal .o-step button.bg-rose-600, .odoo-portal .o-step button.bg-emerald-600, .odoo-portal .o-step button.bg-sky-700, .odoo-portal .o-step button.bg-zinc-800 { height: 40px; border-radius: var(--odoo-radius); font-size: 14px; font-weight: 500; color: #fff; }
.odoo-portal .o-step button.bg-rose-600 { background: var(--odoo-danger); }
.odoo-portal .o-step button.bg-emerald-600 { background: var(--odoo-success); }
.odoo-portal .o-step button.bg-sky-700 { background: var(--odoo-chart-4); }
.odoo-portal .o-step button.bg-zinc-800 { background: var(--odoo-gray-900); }
.odoo-portal .o-step button.bg-rose-600:hover, .odoo-portal .o-step button.bg-emerald-600:hover, .odoo-portal .o-step button.bg-sky-700:hover, .odoo-portal .o-step button.bg-zinc-800:hover { filter: brightness(.92); }
.odoo-portal .o-step button.bg-rose-600:disabled, .odoo-portal .o-step button.bg-emerald-600:disabled, .odoo-portal .o-step button.bg-sky-700:disabled, .odoo-portal .o-step button.bg-zinc-800:disabled { opacity: .4; }
.odoo-portal .o-step .rounded-xl.bg-zinc-50 { background: var(--odoo-gray-100); border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius); }
/* issued documents: the Odoo list look */
.odoo-portal .o-sheet table { font-size: 14px; }
.odoo-portal .o-sheet thead { background: #fff; color: var(--odoo-gray-700); }
.odoo-portal .o-sheet thead tr { box-shadow: inset 0 -1px 0 0 var(--odoo-border-color); }
.odoo-portal .o-sheet thead th { padding: 8px 4.8px; font-weight: 500; height: 39.7px; }
.odoo-portal .o-sheet tbody td { padding: 8px 4.8px; border-bottom: .67px solid var(--odoo-border-color); }
.odoo-portal .o-sheet tbody tr:hover { background: var(--odoo-gray-100); }
.odoo-portal .o-sheet thead th:first-child, .odoo-portal .o-sheet tbody td:first-child { padding-left: 16px; }
.odoo-portal .o-sheet tbody td.text-indigo-700 { color: var(--odoo-link); }

/* =====================================================================================================
   7. DOCUMENT PREVIEW (record tab)
   ===================================================================================================== */
.odoo-docprev .o-sheet { margin: 0; }

/* =====================================================================================================
   7b. DOC VIEWER (modal that shows a document): Odoo dialog look. No hook class in the markup (dialogs are another work
   package), so the dialog is found by what it holds: a header bar and a canvas with a .doc inside.
   ===================================================================================================== */
div.max-w-3xl:has(> .bg-zinc-100 > .doc) { border: .67px solid rgba(0, 0, 0, .176); border-radius: var(--odoo-radius-lg); box-shadow: var(--odoo-popover-shadow); }
div.max-w-3xl:has(> .bg-zinc-100 > .doc) > .border-b { padding: 16px; border-color: var(--odoo-border-color); gap: 8px; }
div.max-w-3xl:has(> .bg-zinc-100 > .doc) > .border-b h3 { font-size: 18.2px; line-height: 27.3px; font-weight: 500; color: #000; }

div.max-w-3xl:has(> .bg-zinc-100 > .doc) > .bg-zinc-100 { padding: 16px; background: var(--odoo-body-bg); }
@media screen {
  div.max-w-3xl:has(> .bg-zinc-100 > .doc) .doc .page { box-shadow: 0 0 0 .67px var(--odoo-border-color), var(--odoo-shadow); }
}

/* =====================================================================================================
   8. SMALL SCREENS (Odoo switches to its compact layout below 992 px)
   ===================================================================================================== */
@media (max-width: 991.98px) {
  .o-steps { overflow-x: auto; }
  .o-steps > .flex { flex-wrap: nowrap; }
  .o-steps button { flex: none; }
  .o-cfg-body { max-height: none !important; }
}

/* ============================================================ SALES PORTAL: PDF-STYLE PREVIEW, FULL HEIGHT ============================================================
   On a desktop screen the Generate tab fills the window under the header: the preview (left) and the controls (right) each take the full height and scroll
   on their own, so there is no second page scroll bar and no empty strip. The preview page is scaled to the width of its panel (zoom set in the markup).
   "Full screen" (button in the preview header, Esc to leave) lets the preview cover the whole window. */
@media (min-width: 992px) {
  .odoo-portal .o-pgrid { height: calc(100vh - var(--oc-top, 46px) - 121px); min-height: 480px; }
  .odoo-portal .o-pgrid > .o-pcol { min-height: 0; height: 100%; overflow-y: auto; padding-bottom: 2px; }
  .odoo-portal .o-pgrid > .o-pcol:first-child { overflow: hidden; }
  .odoo-portal .o-pv { height: 100%; display: flex; flex-direction: column; }
  .odoo-portal .o-pv .o-canvas { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.odoo-portal .o-pv .o-canvas { background: var(--odoo-gray-200); }
.odoo-portal .o-pv.o-pfull { position: fixed; inset: 0; z-index: 90; height: 100vh !important; max-height: none; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.odoo-portal .o-pv.o-pfull .o-canvas { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 991.98px) {
  .odoo-portal .o-pv .o-canvas { max-height: 78vh; }
}

/* Sales portal preview: the page window bar (pager, jump to category, pages shown, and the note that the download has every page) */
.odoo-portal .o-pvbar { background: #fff; }