/* ═══════════════════════════════════════════════════════════════════
   BASE: reset, typography, focus, scrollbars, app frame, utilities, print
   Odoo 20 numbers: root 16px, body 14/21, h1 33.6/40.32 (500), h4 16.8, h5 15.4.
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  height: 100%; font-family: var(--ft); font-size: .875rem; font-weight: 400; line-height: 1.5;
  color: var(--o-text); background: var(--o-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}
a { color: var(--o-link); text-decoration: none; }
a:hover { color: var(--odoo-link-hover); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ft); font-weight: 500; color: var(--o-heading); margin: 0; line-height: 1.2; }
h1 { font-size: var(--odoo-fs-h1); line-height: 1.2; } h2 { font-size: var(--odoo-fs-h2); } h3 { font-size: var(--odoo-fs-h3); }
h4 { font-size: var(--odoo-fs-h4); } h5 { font-size: var(--odoo-fs-h5); } h6 { font-size: var(--odoo-fs-h6); }
b, strong { font-weight: 700; }
small { font-size: var(--odoo-fs-small); }
::selection { background: color-mix(in srgb, var(--o-action) 24%, transparent); }
hr { border: 0; border-top: 1px solid var(--o-border); margin: 16px 0; }
[hidden] { display: none !important; }

/* focus: Odoo teal; always visible for keyboard users */
:focus-visible { outline: 2px solid var(--o-action); outline-offset: 1px; }
:focus:not(:focus-visible) { outline: none; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--o-text3) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--o-text3) 40%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--o-text3) 65%, transparent); }

/* ═════════════ APP FRAME ═════════════ */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
       padding-left: var(--safe-l); padding-right: var(--safe-r); }
.lay { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.ct-outer { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-width: 0; }
/* the content scrolls on both axes: wide tables scroll sideways instead of being clipped (phones) */
.ct { flex: 1; overflow: auto; background: var(--o-bg); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.fin { padding: 16px 16px 32px; min-height: 100%; }
.fin .fin { padding: 0; min-height: 0; }
.fin > [style*="max-width"]:not(table) { margin-left: auto; margin-right: auto; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; background: var(--o-btn); color: #fff; padding: 8px 16px;
             border-radius: var(--r); font-size: 14px; font-weight: 500;
             transform: translateY(-200%); transition: transform .15s; }
.skip-link:focus { transform: none; color: #fff; }
/* not reachable behind the login screen */
body.o-login-open .skip-link { visibility: hidden; }

/* ═════════════ UTILITIES (names used by the app templates) ═════════════ */
.flex { display: flex; } .col, .flex-col { flex-direction: column; } .flex-col { display: flex; } .row { flex-direction: row; }
.ic { align-items: center; } .jb, .between { justify-content: space-between; } .jc { justify-content: center; } .je { justify-content: flex-end; }
.center { align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .shrink, .shrink-0 { flex-shrink: 0; } .block { display: block; }
.f1 { flex: 1; min-width: 0; }
.gr2, .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gr3, .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gr4, .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.g1, .gap-1 { gap: 4px; } .g2, .gap-2 { gap: 8px; } .g3, .gap-3 { gap: 12px; } .g4, .gap-4 { gap: 16px; }
.mb0 { margin-bottom: 0 !important; } .mb1 { margin-bottom: 4px; } .mb2 { margin-bottom: 8px; } .mb3 { margin-bottom: 12px; } .mb4 { margin-bottom: 16px; }
.mt1 { margin-top: 4px; } .mt2 { margin-top: 8px; } .mt3 { margin-top: 12px; } .mt4 { margin-top: 16px; }
.ml1 { margin-left: 4px; } .ml2 { margin-left: 8px; } .mr1 { margin-right: 4px; } .mr2 { margin-right: 8px; } .mh-auto { margin-left: auto; }
.p1 { padding: 4px; } .p2 { padding: 8px; } .p3 { padding: 12px; } .p4 { padding: 16px; }
.px1 { padding-left: 4px; padding-right: 4px; } .px2 { padding-left: 8px; padding-right: 8px; }
.tx-xs { font-size: 12px; } .tx-sm { font-size: var(--odoo-fs-small); } .tx-md { font-size: 14px; } .tx-lg { font-size: 15.4px; }
.tx-xl { font-size: 18.2px; } .tx-xxl { font-size: 21px; }
.tx-m { color: var(--o-text3); } .tx-r { text-align: right; }
.fw5, .fw6, .fw7, .fw { font-weight: 500; } .fw8 { font-weight: 700; }
.tA, .tx-A { color: var(--A); } .tT, .tx-T { color: var(--ok-text); } .tB { color: var(--info-text); } .tR { color: var(--err-text); }
.tP { color: var(--A); } .or { color: var(--warn-text); } .up { color: var(--ok-text); }
.lg { font-size: 21px; font-weight: 500; }
/* "mono" was a monospace font for numbers; Odoo uses the UI font with tabular figures */
.mono, .td-num.mono, .data-mono, .kpi-v.mono { font-family: var(--ft); font-variant-numeric: tabular-nums; }
.truncate, .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; } .mw-full { max-width: 100%; } .no-overflow { overflow: hidden; } .no-wrap { white-space: nowrap; } .op60 { opacity: .6; }
.cursor { cursor: pointer; } .hl { background: var(--Alt) !important; }
.act-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.data-value { font-size: 14px; color: var(--o-text); } .data-muted { font-size: var(--odoo-fs-small); color: var(--o-text3); }
.data-price { font-weight: 500; color: var(--o-text); font-variant-numeric: tabular-nums; } .data-price.tA { color: var(--A); } .data-price.tT { color: var(--ok-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stagger-in { animation: staggerIn .2s var(--ease-out) both; } .fade-in, .step-content { animation: fadeIn .18s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes staggerIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes ddIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

#autosave-dot { position: fixed; bottom: calc(8px + var(--safe-b)); left: calc(8px + var(--safe-l)); z-index: 500; width: 7px; height: 7px; border-radius: 50%;
                background: var(--o-border); transition: background .3s; pointer-events: none; }
#autosave-dot.saving, #autosave-dot.dirty { background: var(--warn); } #autosave-dot.saved { background: var(--ok); }

/* ═════════════ RESPONSIVE (Bootstrap breakpoints used by Odoo: 576 / 768 / 992 / 1200 / 1400) ═════════════ */
@media (max-width: 991.98px) {
  .gr4, .grid-4, .gr3, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .bld-grid-2col > *, .s3-grid > *, .profile-grid > * { min-width: 0; }
}
@media (max-width: 767.98px) {
  .fin { padding: 12px 12px 28px; }
  .gr2, .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .gr3, .grid-3, .gr4, .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ═════════════ PRINT ═════════════ */
@media print {
  .o-nav, .tbar, #side, #o-home, #qnotes-pan, #toast-container, .no-print, .mo-ov, #autosave-dot, .skip-link { display: none !important; }
  #app, .lay, .ct-outer, .ct { height: auto; overflow: visible; display: block; }
  .ct, body { background: #fff; }
  .card, .wiz, .sum { box-shadow: none; }
}

/* ═════════════ REDUCED MOTION ═════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}