*{-webkit-tap-highlight-color:transparent}
  [x-cloak]{display:none !important}
  /* ---------- Odoo typography ----------
     Roboto, regular tracking, 13px base — the same face and scale the
     client's Odoo screens use. */
  body{font-family:'Roboto','Noto Sans Gujarati','Noto Sans Devanagari',-apple-system,system-ui,'Segoe UI','Helvetica Neue',Arial,sans-serif;
       background:var(--odoo-gray-100);color:var(--odoo-body-color);letter-spacing:0;-webkit-font-smoothing:antialiased;
       -moz-osx-font-smoothing:grayscale;font-size:13px;line-height:1.5}
  h1,h2,h3,h4{letter-spacing:0;font-weight:500}
  .tracking-tight{letter-spacing:0 !important}
  b,strong{font-weight:700}
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
  .thin::-webkit-scrollbar{width:8px;height:8px}
  .thin::-webkit-scrollbar-thumb{background:var(--odoo-gray-400);border-radius:99px;border:2px solid transparent;background-clip:content-box}
  .thin::-webkit-scrollbar-thumb:hover{background:var(--odoo-gray-600);background-clip:content-box}
  .thin::-webkit-scrollbar-track{background:transparent}
  /* Apple motion: a firm ease-out curve, short durations, small displacements */
  .press{transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .14s ease,background-color .14s ease}
  .press:active{transform:scale(.975)}
  .lift{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,border-color .18s ease}
  .lift:hover{transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(0,0,0,.20)}
  .hair{box-shadow:inset 0 -1px 0 0 var(--odoo-border-color)}
  :focus-visible{outline:2px solid var(--odoo-primary);outline-offset:2px;border-radius:4px}
  /* ---------- corner ribbon (HOT PRODUCT / NEW / OFFER …) ---------- */
  .rib{position:absolute;top:0;right:0;pointer-events:none;z-index:3;overflow:hidden}
  .rib-auto{width:min(38%,92px);aspect-ratio:1/1}

  ::selection{background:rgba(113,75,103,.18)}
  :focus-visible{outline:2px solid var(--odoo-primary);outline-offset:2px}
  @media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

  
  
  
  
  
  
  
  .o-lbl{font-size:11.5px;font-weight:500;color:var(--odoo-gray-600);display:block;margin-bottom:4px;letter-spacing:0}
  .o-hd{font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--odoo-gray-600)}
  .o-cap{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--odoo-gray-600)}
  
  
  
  
  
  

  /* ---------- compact icon-button system (high-density action bars) ---------- */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .ibwrap{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
  .ibwrap .cnt{position:absolute;top:-7px;right:-7px;min-width:15px;height:15px;padding:0 3px;box-sizing:content-box;border:2px solid #fff;border-radius:99px;
               background:var(--odoo-primary);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;
               line-height:1;pointer-events:none}
  /* Action rail: one compact row of icon-buttons.
     IMPORTANT — never put overflow on this element. It is the positioning
     context for the dropdowns inside it, and any overflow value other than
     visible clips them out of sight. It wraps instead of scrolling. */
  .rail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow:visible;min-width:0;row-gap:6px;max-width:100%}
  /* phone widths: nothing may push the document wider than the viewport */
  @media (max-width:640px){
    html,body{max-width:100vw;overflow-x:hidden}
    .rail > *{max-width:100%}
    table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  }
  .rail > *{flex-shrink:0}
  .rail .grow{flex:1 1 auto;min-width:8px}
  .ibsep{width:1px;height:20px;background:var(--odoo-border-color);flex:0 0 1px;margin:0 1px}
  .ibgrp{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--odoo-border-color);border-radius:4px;background:#fff}
  
  
  /* ---------- record view motion ----------
     The form used to pop in with a bare opacity fade. A short rise + scale
     reads as the record lifting out of the row it came from, and the tab
     panes cross-fade so switching tabs no longer snaps. */
  .recEnter{transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .24s cubic-bezier(.22,1,.36,1)}
  .recLeave{transition:opacity .14s ease,transform .14s ease}
  .recEnterFrom{opacity:0;transform:translateY(10px) scale(.985)}
  .recEnterTo{opacity:1;transform:none}
  .tabpane{animation:tabIn .22s cubic-bezier(.22,1,.36,1)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0,0,0,0);white-space:nowrap;border:0}
  :focus-visible{outline:2px solid var(--odoo-primary);outline-offset:2px;border-radius:6px}
  /* ---------- @ / # mention chips ---------- */
  .mchip{display:inline;border-radius:5px;padding:1px 4px;font-weight:700;cursor:pointer;font-size:.96em}
  .mchip-p{background:var(--odoo-primary-active-bg);color:var(--odoo-primary)}
  .mchip-c{background:var(--odoo-success-bg-subtle);color:var(--odoo-badge-success-text)}
  .mchip-r{background:var(--odoo-warning-bg-subtle);color:var(--odoo-warning-alert-text)}
  .mchip:hover{filter:brightness(.94);text-decoration:underline}
  .mpop{position:absolute;bottom:100%;left:0;margin-bottom:6px;z-index:70;min-width:230px;max-height:230px;
        overflow-y:auto;background:#fff;border:1px solid var(--odoo-border-color);border-radius:12px;
        box-shadow:0 12px 34px -10px rgba(24,24,27,.35);padding:4px}
  .mpop button{width:100%;text-align:left;padding:5px 8px;border-radius:8px;font-size:13px;display:flex;
               align-items:center;gap:7px}
  .mpop button.on{background:var(--odoo-primary-active-bg);color:var(--odoo-primary-hover);font-weight:700}
  /* form layout modes — each mode must be visibly different, not just re-flowed */
  .fm-list .o-sec{border:0;border-radius:0;background:transparent;box-shadow:none}
  .fm-list .o-sechd{background:transparent;border-bottom:1px solid var(--odoo-border-color);padding-left:0;padding-right:0}
  .fm-list .o-secbody{padding:0}
  .fm-list .o-row{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;
                  padding:5px 0;border-bottom:1px solid var(--odoo-gray-100)}
  .fm-list .o-row:last-child{border-bottom:0}
  .fm-list .o-row .o-lbl{margin:0;padding:0;width:auto}
  
  /* Single page reads as one continuous document: no cards, sections divided by
     a rule. Most modules have a single tab, so flattening tabs alone left it
     looking identical to Sections. */
  .fm-single .o-sec{border:0;border-radius:0;box-shadow:none;background:transparent;
                    border-top:1px solid var(--odoo-border-color);break-inside:avoid}
  .fm-single .o-sec:first-child{border-top:0}
  .fm-single .o-sechd{background:transparent;border-bottom:0;padding-left:0;padding-top:16px}
  .fm-single .o-secbody{padding:2px 0 10px 0;column-gap:28px}
  @media (min-width:1100px){ .fm-single .o-secbody{columns:2} }
  .fm-single .o-row{break-inside:avoid;padding:4px 0}
  /* ---- three column: tighter rows so three fit without truncating ---- */
  .fm-three .o-row{gap:8px}
  .fm-three .o-row .o-lbl{font-size:10.5px}
  
  /* ---- table: reads like the printed form ---- */
  .fm-table .o-sec{border:1px solid var(--odoo-border-color);border-radius:12px;overflow:hidden}
  .fm-table .o-sechd{background:var(--odoo-gray-100);border-bottom:1px solid var(--odoo-border-color)}
  .fm-table .o-secbody{padding:0}
  .fm-table .o-row{display:grid;grid-template-columns:240px 1fr;gap:0;align-items:stretch;
                   border-bottom:1px solid var(--odoo-border-color);padding:0}
  .fm-table .o-row:last-child{border-bottom:0}
  .fm-table .o-row .o-lbl{margin:0;padding:9px 12px;background:var(--odoo-gray-100);
                          border-right:1px solid var(--odoo-border-color);display:flex;align-items:center;
                          font-weight:700;color:var(--odoo-gray-800);width:auto}
  .fm-table .o-row > :not(.o-lbl){padding:5px 10px;display:flex;align-items:center}
  
  
  
  /* ---- focus: one section, generous spacing ---- */
  .fm-focus .o-sec{border:0;box-shadow:none;background:transparent}
  .fm-focus .o-sechd{display:none}
  .fm-focus .o-secbody{padding:0}
  .fm-focus .o-row{padding:7px 0}
  .fm-focus .o-row .o-lbl{font-size:12px;width:190px}
  
  @media (max-width:900px){
    .fm-table .o-row{grid-template-columns:1fr}
    .fm-table .o-row .o-lbl{border-right:0;border-bottom:1px solid var(--odoo-border-color)}
  }
  @media (max-width:640px){ .fm-list .o-row{grid-template-columns:1fr} }
  @keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  
  @media (prefers-reduced-motion:reduce){
    .recEnter,
.recLeave {transition:none}
    .tabpane{animation:none}
  }
  /* ---------- type scale ----------
     Tabular figures everywhere a number is compared down a column. */
  .num,
table td.num,
table th.num {font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv01" 1}
  
  
  
  .cellinput{background:transparent;outline:none;width:100%;border-radius:6px;padding:2px 5px;border:1px solid transparent;font:inherit}
  .cellinput:hover{border-color:var(--odoo-border-color);background:#fff}
  select.cellinput{padding-right:2px;cursor:pointer}
  .cellpop{position:fixed;z-index:60;width:240px;background:#fff;border:1px solid var(--odoo-border-color);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px;white-space:normal;text-align:left;font-weight:400}
  .cellpop-list{max-height:210px;overflow-y:auto}
  .cellpop-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:13px;cursor:pointer;color:var(--odoo-secondary)}
  .cellpop-row:hover{background:var(--odoo-gray-100)}
  .cellinput:focus{background:#fff;border-color:var(--odoo-primary);box-shadow:0 0 0 2px rgba(79,70,229,.14)}
  .trow:hover{background:var(--odoo-gray-100)}
  .drag{opacity:.35}
  .dropzone{outline:2px dashed var(--odoo-primary);outline-offset:-3px;background:var(--odoo-primary-active-bg)}
  .tgl{appearance:none;width:34px;height:20px;border-radius:99px;background:var(--odoo-border-color);position:relative;cursor:pointer;transition:background .15s;flex:0 0 34px}
  .tgl:checked{background:var(--odoo-primary)}
  .tgl::before{content:"";position:absolute;width:16px;height:16px;border-radius:99px;background:#fff;top:2px;left:2px;transition:transform .15s}
  .tgl:checked::before{transform:translateX(14px)}
  kbd{font-family:'Roboto Mono',ui-monospace,Menlo,monospace;font-size:9.5px;background:var(--odoo-gray-100);border:1px solid var(--odoo-border-color);border-radius:5px;padding:1px 4px;color:var(--odoo-secondary)}
  .kcol{background:var(--odoo-gray-100);border:1px solid var(--odoo-border-color);border-radius:12px}
  .rng{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:var(--odoo-border-color);outline:none}
  .rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:99px;background:#fff;border:1px solid var(--odoo-border-color);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer}
  .rng::-moz-range-thumb{width:18px;height:18px;border-radius:99px;background:#fff;border:1px solid var(--odoo-border-color);cursor:pointer}
  .tip{position:fixed;z-index:120;pointer-events:none;background:var(--odoo-body-color);color:#fff;border-radius:8px;padding:7px 9px;font-size:11.5px;line-height:1.45;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);max-width:240px}
  .chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;font-size:11px;font-weight:700}
  .zoom-off .lift:hover{transform:none}
  .zoom-off .press:active{transform:none}
  .zoom-subtle .lift:hover{transform:translateY(-2px) scale(1.01)}
  .zoom-subtle .trow:hover{transform:none}
  .zoom-strong .lift:hover{transform:translateY(-4px) scale(1.035);box-shadow:0 18px 38px -14px rgba(24,24,27,.42)}
  .zoom-strong .trow{transition:transform .14s ease}
  .zoom-strong .trow:hover{transform:scale(1.006)}
  
  

  .doc{--pad:8px 10px;--fs:11px;--lh:1.45;--imgh:78px;--gap:14px;--tscale:1;--rad:8px}
  .doc[data-density="compact"]{--pad:4px 7px;--fs:9.6px;--lh:1.25;--imgh:56px;--gap:9px}
  .doc[data-density="comfortable"]{--pad:8px 10px;--fs:11px;--lh:1.45;--imgh:78px;--gap:14px}
  .doc[data-density="spacious"]{--pad:14px 13px;--fs:12.4px;--lh:1.7;--imgh:104px;--gap:22px}
  .doc .page{background:#fff;position:relative;overflow:hidden}
  .doc .ptable{width:100%;border-collapse:collapse;font-size:calc(var(--fs) * var(--tscale));line-height:var(--lh)}
  .doc .ptable th{padding:var(--pad);text-align:left;font-weight:700;font-size:calc(var(--fs) * var(--tscale) - .4px);letter-spacing:.03em;text-transform:uppercase;color:#fff}
  .doc .ptable td{padding:var(--pad);border-bottom:1px solid var(--odoo-border-color);vertical-align:middle}
  .doc .ptable tbody tr:nth-child(even){background:var(--odoo-gray-100)}
  .doc .ptable[data-zebra="0"] tbody tr:nth-child(even){background:#fff}
  .doc .gridwrap{display:grid;gap:var(--gap)}
  .doc .rib{position:absolute;top:0;right:0;z-index:3;overflow:hidden}
  .doc .rib-auto{width:min(38%,92px);aspect-ratio:1/1}
  .doc .card{position:relative;border:1px solid var(--odoo-border-color);border-radius:4px;padding:calc(var(--gap) * .7);font-size:calc(var(--fs) * var(--tscale));line-height:var(--lh);break-inside:avoid}
  .doc .thumb{width:100%;height:var(--imgh);object-fit:cover;border-radius:var(--rad);background:var(--odoo-gray-100)}
  .doc[data-frame="square"] .thumb{border-radius:0}
  .doc[data-frame="circle"] .thumb{border-radius:999px}
  .doc[data-frame="ring"] .thumb{border:3px solid #fff;box-shadow:0 0 0 1px var(--odoo-border-color)}

  @page{size:A4;margin:11mm}
  /* the small full-width link button of the 9-per-page card and the kit tiles */
  .cv-btn-block{width:100%}
  .cv-btn-block .wa-wrap{margin:0 !important;width:100%;text-align:center !important}
  .cv-btn-block .wa-btn{display:block !important;box-sizing:border-box;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media print{
    html,body{background:#fff !important}
    body *{visibility:hidden !important}
    #printArea, #printArea *{visibility:visible !important}
    #printArea{position:absolute;left:0;top:0;width:100%;padding:0;margin:0}
    /* one document page = exactly one printed sheet: A4 (297 mm) minus the 11 mm margins is 1039 px, so 1035 px leaves a hair of slack.
       Body pages are cut to fit by measurement (see pageFits); covers, banners and back pages are laid out to fill the sheet. */
    #printArea .page{page-break-after:always;break-after:page;height:1035px !important;min-height:0 !important;overflow:hidden !important;box-shadow:none !important;border:0 !important;margin:0 !important;border-radius:0 !important}
    body:not(.print-sheet) #printArea .page{padding:0 !important}
    #printArea .page > div[style*="min-height:1050px"]{min-height:100% !important;height:100% !important}
    /* the 11 mm margin lives inside the page (see printBegin): 1122 px sheet - 2 x 41.6 px = 1039 px of content */
    body.print-sheet #printArea .page{box-sizing:border-box !important;height:1120px !important}
    /* text pages keep a 11 mm margin; covers, banners and the back page run to the edge of the sheet */
    body.print-sheet #printArea .page.pg-flow{padding:11mm !important}
    #printArea .page:last-child{page-break-after:auto;break-after:auto}
    #printArea .ptable tr{page-break-inside:avoid;break-inside:avoid}
    #printArea .ptable thead{display:table-header-group}
    #printArea .card{break-inside:avoid;page-break-inside:avoid}
    .noprint{display:none !important}
    body.printing-dash *{visibility:hidden !important}
    body.printing-dash [data-dash], body.printing-dash [data-dash] *{visibility:visible !important}
    body.printing-dash [data-dash]{position:absolute;left:0;top:0;width:100%}
  }


/* phones: pop-over menus opened from a toolbar button (records per page, quick-edit fields) were 256-288px wide and anchored to a button near the screen edge, so they ran off the screen; they now use the full width */
@media (max-width: 639px) {
  [data-pop] { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; width: auto !important; max-width: none !important; }
}

/* archived records stay in the list (see the Archived filter) but look faded */
tr[data-arch] td { opacity: .55; }
tr[data-arch] td:first-child { opacity: 1; }

/* (i) help icons, added by js/help.js next to labels and headings */
.o-lbl.shrink-0.has-i{position:relative;padding-right:20px}