/* Odoo redesign: form and dialogs. Owner: work package "form" (docs/ODOO_REDESIGN_PLAN.md). Uses the tokens from odoo-tokens.css.
   Numbers: docs/odoo-reference/ODOO_DESIGN_SYSTEM.md section 7 and catalog/COMPONENTS.md (F1-F28 forms, D1-D5 dialogs, B2 alerts).
   Scope: the record form (#recshell, class .odf) and every modal (class .odlg). Old rules this file makes dead are listed in docs/ODOO_REDESIGN_PLAN.md. */

/* =====================================================================================================
   1. RECORD FORM
   ===================================================================================================== */
.recshell.odf { background: var(--odoo-body-bg); font-size: 14px; line-height: 1.5; color: var(--odoo-body-color); }

/* ---- shared button look inside the form (Odoo btn: 32.3 high, padding 5/10, radius 6, 14/500) ---- */





/* small icon buttons used in rows (pencil, trash, plus) */







.odf .ibgrp { border-color: var(--odoo-border-color); border-radius: var(--odoo-radius-switcher); }

/* ---- control panel: breadcrumb (parent link above the record name), gear, dirty indicators, pager ---- */
.odf-cp { display: flex; align-items: center; gap: 16px; padding: 8px 16px; min-height: 61px; background: var(--odoo-body-bg); }
.odf-bc { display: flex; flex-direction: column; min-width: 0; }
.odf-bc-parent { align-self: flex-start; max-width: 100%; font-size: 13px; line-height: 19.5px; color: var(--odoo-link); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-bc-parent:hover { color: var(--odoo-link-hover); text-decoration: underline; }
.odf-bc-cur { display: flex; align-items: center; gap: 4px; min-width: 0; }
.odf-bc-name { font-size: 14px; line-height: 21px; color: var(--odoo-body-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 46vw; }
.odf-gear { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--odoo-radius); color: var(--odoo-secondary); }
.odf-gear:hover { background: var(--odoo-gray-200); color: var(--odoo-dark); }
.odf-dirty { display: flex; align-items: center; gap: 4px; }
.odf-ind { width: 27.3px; height: 30.3px; display: grid; place-items: center; border-radius: var(--odoo-radius); color: var(--odoo-secondary); background: var(--odoo-gray-100); }
.odf-ind:hover { background: var(--odoo-gray-200); color: var(--odoo-dark); }
.odf-ind.is-dirty { color: var(--odoo-primary); }
.odf-pager { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.odf-pager-v { font-size: 13px; line-height: 19.5px; font-weight: 500; color: var(--odoo-body-color); }
.odf-pager-b { display: inline-flex; }
.odf-pager-b button { width: 39px; height: 35.7px; display: grid; place-items: center; padding: 5px 10px; background: #fff; border: .67px solid var(--odoo-gray-400); color: var(--odoo-body-color); }
.odf-pager-b button:first-child { border-radius: 6px 0 0 6px; }
.odf-pager-b button:last-child { border-radius: 0 6px 6px 0; margin-left: -.67px; }
.odf-pager-b button:hover { background: var(--odoo-gray-200); }
/* record actions menu (cog) */
.odf-menu { position: absolute; left: 0; top: 100%; margin-top: 6px; z-index: 50; min-width: 232px; padding: 4px; background: #fff;
  border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-xl); box-shadow: var(--odoo-popover-shadow); }
.odf-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 27px; padding: 3px 20px; border-radius: var(--odoo-radius-lg); text-align: left; font-size: 14px; line-height: 21px; color: var(--odoo-body-color); }
.odf-menu button:hover { background: var(--odoo-gray-200); }
.odf-menu button svg { color: var(--odoo-secondary); flex: none; }
.odf-menu-sep { margin-top: 4px; padding-top: 4px; border-top: .67px solid var(--odoo-border-color); }
.odf-menu .odf-menu-del, .odf-menu .odf-menu-del svg { color: var(--odoo-danger-text); }
.odf-menu .odf-menu-del:hover { background: var(--odoo-danger-bg-subtle); }

/* ---- scroll area: the sheet, and the chatter below it (beside it from 1400 px) ---- */
.odf-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.odf-main { min-width: 0; }
.odf-chatter { padding: 0 16px 48px; background: var(--odoo-body-bg); }
@media (min-width: 1400px) {
  .odf-scroll { display: flex; overflow: hidden; }
  .odf-main { flex: 1 1 0; overflow-y: auto; }
  .odf-chatter { flex: 0 0 clamp(380px, 32%, 500px); overflow-y: auto; padding: 0 16px 48px 16px; border-left: .67px solid var(--odoo-border-color); }
}

/* ---- statusbar row ---- */
.odf-status { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 0 16px 8px; background: var(--odoo-body-bg); }
.odf-hbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.odf-statusbar { display: flex; align-items: stretch; flex: 0 1 auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; min-width: 0;
  box-sizing: border-box; height: 32.3px; padding: 2px; background: #fff; border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }
.odf-stagewrap { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; margin-left: auto; }
.odf .odf-stagecap { font-size: 13px; line-height: 19.5px; font-weight: 500; color: var(--odoo-secondary-color); flex: none; }
.odf-statusbar::-webkit-scrollbar { display: none; }
.odf-step { position: relative; flex: 0 0 auto; height: 27px; margin-left: -12.2px; padding: 3px 18px 3px 22px; font-size: 14px; line-height: 21px; font-weight: 500; white-space: nowrap;
  color: var(--odoo-secondary-color); background: transparent; border: 0; transition: background .15s ease, color .15s ease;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.odf-step:first-child { margin-left: 0; padding-left: 18px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.odf-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); }
.odf-step:first-child:last-child { clip-path: none; }
.odf-step:hover { background: var(--odoo-gray-200); color: var(--odoo-dark); }
.odf-step.on { background: var(--odoo-teal-tint); color: #000; }
.odf-step.done { color: var(--odoo-dark); }

/* ---- smart buttons (110 x 33, joined group, number in primary) ---- */
.odf-smartbox { display: flex; justify-content: flex-end; padding: 0 16px 8px; }
.odf-smartgrp { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.odf-smartgrp::-webkit-scrollbar { display: none; }
.odf-smart { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 110px; height: 33px; padding: 0 10px; margin-left: -1px; text-align: left;
  background: #fff; border: .67px solid var(--odoo-gray-400); color: var(--odoo-body-color); transition: background .15s ease; }
.odf-smart { border-radius: 0; }
.odf-smart.is-first { margin-left: 0; border-radius: 6px 0 0 6px; }
.odf-smart.is-last { border-radius: 0 6px 6px 0; }
.odf-smart.is-first.is-last { border-radius: 6px; }
.odf-smart:hover { background: var(--odoo-gray-200); }
.odf-smart > svg { width: 20px; height: 20px; flex: none; color: var(--odoo-primary); }
.odf-smart-t { display: flex; flex-direction: column; font-size: 12px; line-height: 14px; min-width: 0; }
.odf-smart-t b { font-size: 12px; font-weight: 500; color: var(--odoo-primary); white-space: nowrap; }
.odf-smart-t b.text-rose-600, .odf-smart-t b.text-rose-500 { color: var(--odoo-danger-text); }
.odf-smart-t b.text-emerald-600, .odf-smart-t b.text-emerald-700 { color: var(--odoo-badge-success-text); }
.odf-smart-t b.text-amber-600 { color: var(--odoo-badge-warning-text); }
.odf-smart-t span { font-weight: 400; white-space: nowrap; color: var(--odoo-body-color); }

/* ---- sheet ---- */
.odf-sheetbg { padding: 0 16px 16px; }
.odf-sheet { position: relative; background: #fff; border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); padding: var(--odoo-sheet-padding); }
@media (max-width: 991px) { .odf-sheet { padding: 16px; } }
.odf-rib { position: absolute; top: -1px; right: -1px; width: 100px; height: 100px; overflow: hidden; border-radius: 0 8px 0 0; pointer-events: none; z-index: 2; }
.odf-titlerow { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.odf-titlerow.has-rib { padding-right: 72px; }
.odf-titlecol { flex: 1 1 auto; min-width: 0; }
.odf-title { display: block; width: 100%; margin: 0 0 8px; padding: 2px 10px; font-size: 33.6px; line-height: 40.32px; font-weight: 500; color: #000; background-color: var(--odoo-light);
  border: 1px solid var(--odoo-gray-400); border-radius: var(--odoo-radius); outline: none; box-shadow: none; text-overflow: ellipsis; }
.odf-title::placeholder { color: rgba(33, 37, 41, .35); }
.odf-title:hover:not([readonly]) { border-color: var(--odoo-gray-500); }
.odf-title:focus:not([readonly]) { border-color: var(--odoo-focus-border); box-shadow: var(--odoo-focus-ring); }
.odf-title[readonly] { padding-left: 0; border-color: transparent; background-color: transparent; }
.odf-title:focus { border-bottom-color: var(--odoo-link); box-shadow: none; }
.odf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.odf-touch { margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--odoo-tertiary-color); }
.odf-avatar { position: relative; flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; font-size: 16px; font-weight: 700;
  border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }
.odf-badge { display: inline-flex; align-items: center; height: 20px; padding: 3px 9.84px; border-radius: var(--odoo-radius-pill); font-size: 12px; line-height: 14px; font-weight: 500;
  background: var(--odoo-badge-secondary-bg); color: var(--odoo-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-badge-p { background: var(--odoo-badge-primary-bg); color: var(--odoo-primary); }
.odf .chip { height: 20px; min-height: 0; padding: 3px 9.84px; font-size: 12px; line-height: 14px; font-weight: 500; }

/* ---- notebook ---- */
.odf-nb { margin-top: 10px; }
.odf-nav { display: flex; align-items: flex-end; margin: 0 -24px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; border-bottom: .67px solid var(--odoo-border-color); }
.odf-nav::-webkit-scrollbar { display: none; }
@media (max-width: 991px) { .odf-nav { margin: 0 -16px; padding: 0 16px; } }
.odf-tab { flex: 0 0 auto; height: 38.3px; padding: 8px 16px; margin-bottom: -.67px; font-size: 14px; line-height: 21px; color: var(--odoo-body-color);
  background: var(--odoo-gray-100); border: .67px solid var(--odoo-border-color); border-bottom-color: transparent; border-radius: 0; margin-left: -.67px; }
.odf-tab:first-child { margin-left: 0; }
.odf-tab:hover { color: #000; background: #fff; }
.odf-tab.on { color: var(--odoo-primary); background: #fff; border-top: 1px solid var(--odoo-primary); border-bottom-color: #fff; border-radius: 6px 6px 0 0; }
.odf-tab-note { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 38px; font-size: 12px; color: var(--odoo-tertiary-color); }
.odf-panes { padding: 16px 0 0; }
.odf-panes > .mx-auto { max-width: none; margin-left: 0; margin-right: 0; }

/* ---- groups: section title as an Odoo separator, two columns with a 32 px gutter ---- */
.odf .odf-grid { column-gap: var(--odoo-gutter); row-gap: 8px; }
.odf-grp { min-width: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.odf-grp-h { margin: 0 0 11px; padding: 0 0 4px; border-bottom: 1px solid var(--odoo-border-color); }
.odf-grp-h button { text-align: left; }
.odf-grp-h .font-bold, .odf-grp-h input { font-size: 13px; line-height: 19.5px; font-weight: 700; color: var(--odoo-secondary); text-transform: uppercase; letter-spacing: 0; }
.odf-grp-h svg { width: 14px; height: 14px; color: var(--odoo-gray-500); opacity: .7; }
.odf-grp-h .num { display: none; }
.odf-layout .odf-grp-h .num { display: inline; }
.odf-grp-b { display: flex; flex-direction: column; gap: 8px; padding: 0 0 8px; }
.odf .fm-sections .o-row, .odf .fm-stacked .o-row, .odf .fm-three .o-row, .odf .fm-single .o-row {
  display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); column-gap: 8px; align-items: start; padding: 0; border-radius: 0; position: relative; }
@media (min-width: 992px) {
  .odf .odf-grid.fm-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .odf .fm-sections .o-row, .odf .fm-three .o-row, .odf .fm-stacked .o-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .odf-panes .grid.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .odf-panes .grid.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.odf .odf-grp-b .o-row > .pt-2.cursor-grab { position: absolute; left: -20px; top: 0; padding: 0; }
.odf .fm-single .odf-grp-b { padding-bottom: 8px; }
.odf-lc { min-width: 0; padding: 1px 0; }
.odf .o-lbl { display: inline; margin: 0; padding: 0; font-size: 14px; line-height: 21px; font-weight: 500; color: #000; letter-spacing: 0; }
.odf .o-row.is-ro .o-lbl { color: var(--odoo-secondary-color); }
.odf .o-lbl.has-i, .odf .o-lbl.shrink-0.has-i { padding-right: 0; }
.odf-lc:has(.o-lbl > .o_info_btn) > .o_info_btn { display: none; }
.odf .o-row .relative > button.absolute { right: 0; top: 0; }
.odf .fm-table .odf-lc { display: flex; align-items: center; padding: 9px 12px; background: var(--odoo-gray-100); border-right: .67px solid var(--odoo-input-border-color); }
.odf .fm-table .o-row .o-lbl { display: inline; padding: 0; background: transparent; border: 0; font-weight: 500; color: #000; }
.odf .fm-focus .odf-lc { flex: 0 0 190px; }
.odf .fm-list .odf-lc { padding: 0; }

/* help "?" after a label: a small superscript with a tooltip (replaces the round (i)) */
.odf .o_info_btn, .odlg .o_info_btn, .odf-panes .o_info_btn {
  position: relative; display: inline-block; width: auto; height: auto; margin: 0 0 0 3px; padding: 0 1px; border: 0; border-radius: 0; background: transparent;
  font: 500 11px/1 var(--odoo-font); font-style: normal; color: var(--odoo-info-text); vertical-align: super; cursor: help; text-transform: none; }
.odf .o_info_btn::before, .odlg .o_info_btn::before, .odf-panes .o_info_btn::before { content: "?"; }
.odf .o_info_btn:hover, .odf .o_info_btn:focus-visible, .odlg .o_info_btn:hover, .odlg .o_info_btn:focus-visible { background: transparent; border: 0; color: var(--odoo-link-hover); outline: none; box-shadow: none; }
.odf .o-lbl.shrink-0 .o_info_btn, .odf .o-lbl .o_info_btn { position: relative; right: auto; top: auto; }

/* ---- flat fields: no box, a thin bottom line that shows on hover and turns teal on focus ---- */











.odf .relative > span.absolute.left-3 { left: 0; top: 2px; font-size: 14px; color: var(--odoo-tertiary-color); }
.odf .relative > span.absolute.right-3 { right: 0; top: 2px; font-size: 14px; color: var(--odoo-tertiary-color); }

.odf input[type="color"] { height: 26px; border-radius: var(--odoo-radius); border-color: var(--odoo-gray-400); }
.odf input[type="range"] { accent-color: var(--odoo-primary); }
/* checkbox and radio: 14 px, radius 3.5, grey border, teal when on */






/* toggle switch */
.odf .tgl, .odlg .tgl { width: 32px; height: 16px; flex: 0 0 32px; background: var(--odoo-gray-400); }
.odf .tgl::before, .odlg .tgl::before { width: 12px; height: 12px; top: 2px; left: 2px; }
.odf .tgl:checked, .odlg .tgl:checked { background: var(--odoo-success); }
.odf .tgl:checked::before, .odlg .tgl:checked::before { transform: translateX(16px); }
/* selection pills and multi-select tags */
.odf button.px-2\.5.h-8.rounded-lg.border { height: auto; min-height: 25px; padding: 2px 10px; border-radius: var(--odoo-radius-pill); font-size: 13px; line-height: 19px; font-weight: 500; color: var(--odoo-body-color); background: #fff; border-color: var(--odoo-gray-400); }
.odf button.px-2\.5.h-8.rounded-lg.border:hover { background: var(--odoo-gray-100); }
.odf button.px-2\.5.h-8.rounded-lg.border.border-indigo-400 { background: var(--odoo-teal-tint); border-color: var(--odoo-link); color: #000; }


/* generic restyle of the cards inside the notebook panes (pricing, kit items, media, kits and usage, identity) */
.odf .border-zinc-200 { border-color: var(--odoo-border-color); }
.odf .border-zinc-100 { border-color: var(--odoo-input-border-color); }
.odf-panes .bg-white.rounded-2xl.border { border: 0; border-radius: 0; padding: 0; background: transparent; overflow: visible; }
.odf-panes .bg-white.rounded-2xl.border.overflow-hidden { overflow: visible; }
.odf-panes .bg-white.rounded-2xl.border.p-5 { padding: 0; }
.odf-panes .grid.lg\:grid-cols-3, .odf-panes .grid.lg\:grid-cols-2 { column-gap: var(--odoo-gutter); row-gap: 24px; }
.odf-panes .text-\[17px\].font-bold, .odf-panes .text-\[15px\].font-bold, .odf .o-hd { font-size: 13px; line-height: 19.5px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--odoo-secondary); }
.odf-panes .text-\[17px\].font-bold { padding-bottom: 4px; margin-bottom: 12px; box-shadow: 0 1px 0 var(--odoo-border-color); }
.odf-panes .px-5.py-3\.5.border-b { padding-left: 0; padding-right: 0; }
.odf .o-cap { font-size: 14px; line-height: 21px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #000; }
.odf [style*="linear-gradient(135deg"] { background: var(--odoo-primary) !important; border-radius: var(--odoo-radius-lg); }
.odf-panes table { font-size: 14px; }
.odf-panes thead { background: #fff; color: var(--odoo-secondary); }
.odf-panes thead th { font-weight: 500; font-size: 14px; box-shadow: inset 0 -1px 0 var(--odoo-border-color); }
.odf-panes thead tr.hair { box-shadow: none; }
.odf-panes tbody tr { border-color: var(--odoo-border-color); }
.odf-panes .hover\:bg-zinc-50\/60:hover { background: var(--odoo-gray-100); }
.odf .rounded-xl, .odf .rounded-2xl { border-radius: var(--odoo-radius-lg); }
.odf .rounded-lg { border-radius: var(--odoo-radius); }
.odf .text-indigo-600, .odf .text-indigo-700 { color: var(--odoo-primary); }
.odf .bg-indigo-50 { background-color: var(--odoo-primary-bg-subtle); }
.odf .bg-violet-50 { background-color: var(--odoo-primary-bg-subtle); }
.odf .border-violet-200 { border-color: var(--odoo-primary-border-subtle); }
.odf .text-violet-900, .odf .text-violet-700, .odf .text-violet-600 { color: var(--odoo-primary); }
.odf .rail.rounded-xl { border-radius: var(--odoo-radius-lg); }
.odf-empty { padding: 16px 0; text-align: center; }
.odf-muted { font-size: 13px; line-height: 19.5px; color: var(--odoo-secondary-color); }
.odf-trailpane > .bg-white { background: #fff; }
.odf-trailpane > .rounded-2xl.border { border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }

/* ---- chatter ---- */
.odf-ct-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 4px 8px; min-height: 44.3px; }
.odf-seg { display: inline-flex; gap: 2px; }
.odf-seg button { height: 24px; padding: 0 8px; border-radius: var(--odoo-radius); font-size: 12px; line-height: 18px; color: var(--odoo-secondary); }
.odf-seg button:hover { background: var(--odoo-gray-200); }
.odf-seg button.on { background: var(--odoo-gray-200); color: #000; font-weight: 500; }
.odf-composer { margin: 0 0 8px; padding: 10px 8px 8px 12px; background: #fff; border: .67px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }
.odf-ta { display: block; width: 100%; min-height: 63px; padding: 2px 4px 2px 0; font-size: 14px; line-height: 21px; color: var(--odoo-secondary); background: transparent; border: 0; outline: none; resize: vertical; box-shadow: none; }
.odf-ta::placeholder { color: rgba(73, 80, 87, .6); }
.odf-ta:focus, .odf-ta:focus-visible { box-shadow: none; outline: none; }
.odf-composer-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.odf .odf-sel { width: auto; margin-left: auto; height: 28px; min-height: 0; padding: 0 22px 0 8px; font-size: 13px; border: .67px solid var(--odoo-gray-400); border-radius: var(--odoo-radius); background-color: #fff; background-position: right 7px center; }
.odf .odf-sel:hover { border-color: var(--odoo-gray-500); }
.odf .odf-sel:focus { border-color: var(--odoo-link); }
.odf-sec { margin-top: 4px; }
.odf-sec-t { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 4px 8px; font-size: 14px; line-height: 21px; font-weight: 500; color: #000; }
.odf-sec-t::before, .odf-sec-t::after { content: ""; flex: 1 1 0; border-top: .67px solid var(--odoo-border-color); }
.odf-cnt { min-width: 18px; padding: 0 5px; border-radius: var(--odoo-radius-pill); font-size: 11px; line-height: 18px; text-align: center; background: var(--odoo-primary-bg-subtle); color: var(--odoo-primary); }
.odf-sec-b { padding: 8px 0 0; }
.odf-act-g { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; line-height: 18px; font-weight: 700; }
.odf-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; }
.odf-act { display: flex; gap: 8px; padding: 4px 0; margin-bottom: 8px; }
.odf-av { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--odoo-radius-lg); background: var(--odoo-primary); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.odf-av-act { background: var(--odoo-gray-200); color: var(--odoo-secondary); }
.odf-act-b { min-width: 0; flex: 1 1 auto; }
.odf-act-t { display: block; max-width: 100%; text-align: left; font-size: 14px; line-height: 21px; color: var(--odoo-body-color); }
.odf-act-t b { font-weight: 700; }
.odf-act-t:hover span { text-decoration: underline; }
.odf-act-d { font-size: 12px; line-height: 18px; color: var(--odoo-secondary-color); }
.odf-act-l { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.odf-act-l button { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 21px; color: var(--odoo-link); }
.odf-act-l button:hover { color: var(--odoo-link-hover); }
.odf-done { margin-top: 4px; }
.odf-done-t { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 19.5px; color: var(--odoo-secondary); }
.odf-done-r { display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px 0; font-size: 13px; text-align: left; }
.odf-done-r:hover { background: var(--odoo-gray-200); }
.odf-datesep { display: flex; align-items: center; gap: 8px; height: 40.7px; padding: 8px 8px 0; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--odoo-secondary-color); }
.odf-datesep::before, .odf-datesep::after { content: ""; flex: 1 1 0; border-top: .67px solid var(--odoo-border-color); }
.odf-msg { display: flex; gap: 8px; margin-top: 8px; }
.odf-msg-b { min-width: 0; flex: 1 1 auto; }
.odf-msg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 12px; line-height: 18px; color: var(--odoo-secondary); }
.odf-msg-h b { font-weight: 700; color: var(--odoo-body-color); }
.odf-time { font-size: 10px; color: var(--odoo-secondary-color); }
.odf-msg-act { display: inline-flex; gap: 2px; margin-left: auto; transition: opacity .15s ease; }
.odf-msg-act button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--odoo-radius); color: var(--odoo-secondary); }
.odf-msg-act button:hover { background: var(--odoo-gray-200); }
.odf-track { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 21px; color: var(--odoo-body-color); }
.odf-note { font-size: 14px; line-height: 21px; color: var(--odoo-secondary); margin-top: 2px; }
.odf-bubble { padding: 8px 12px; background: var(--odoo-info-bg-subtle); border: 1px solid var(--odoo-info-bg-subtle); border-radius: 0 12.25px 12.25px 12.25px; }
.odf-thread { padding-bottom: 16px; }
.odf .mpop { border-radius: var(--odoo-radius-xl); border-color: var(--odoo-border-color); box-shadow: var(--odoo-popover-shadow); }

/* =====================================================================================================
   2. DIALOGS (Bootstrap-style modal as Odoo 20 draws it): radius 8, header 18.2/500 with a close x,
      16 px paddings, footer with the primary button first. Backdrop like Bootstrap's (black at 50 %).
   ===================================================================================================== */
.odlg-bd.absolute { background: rgba(0, 0, 0, .5); }
.odlg { max-width: 500px; background: #fff; border: .67px solid rgba(0, 0, 0, .176); border-radius: var(--odoo-radius-lg); box-shadow: var(--odoo-popover-shadow); color: var(--odoo-body-color); font-size: 14px; line-height: 1.5; }
/* sizes: sm / md = Odoo's default 500, xl = modal-md 620, 3xl / 4xl = modal-lg 800, 6xl = modal-xl 1140 */
.odlg.max-w-sm, .odlg.max-w-md, .odlg.max-w-lg { max-width: 500px; }
.odlg.max-w-xl, .odlg.max-w-2xl { max-width: 620px; }
.odlg.max-w-3xl, .odlg.max-w-4xl { max-width: 800px; }
.odlg.max-w-6xl { max-width: 1140px; }
.odlg-h { padding: 16px; border-bottom: .67px solid var(--odoo-border-color); background: #fff; min-height: 61.5px; }
.odlg-h > i:first-child, .odlg-h > svg.lucide:first-child { display: none; }
.odlg-h h3, .odlg-h .text-\[15px\].font-bold, .odlg-h .text-\[17px\].font-bold, .odlg-h.text-\[15px\] { font-size: 18.2px; line-height: 27.3px; font-weight: 500; color: #000; letter-spacing: 0; }
.odlg-h .text-\[12px\] { font-size: 13px; line-height: 19.5px; color: var(--odoo-secondary-color); }
.odlg-h button[aria-label="Close"], .odlg-h button[aria-label="Close"].w-9 { width: 30px; height: 30px; display: grid; place-items: center; opacity: .5; border-radius: var(--odoo-radius); flex: none; }
.odlg-h button[aria-label="Close"]:hover { opacity: .75; background: var(--odoo-gray-200); }
.odlg-h button[aria-label="Close"] svg { width: 16px; height: 16px; color: #000; }
.odlg > .p-5, .odlg > .p-4, .odlg > .px-4.py-3, .odlg > .px-5.py-3, .odlg > .overflow-y-auto { padding: 16px; }
.odlg > .px-4.pt-3, .odlg > .px-4.pt-2 { padding-left: 16px; padding-right: 16px; }
.odlg-f { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding: 15.5px; border-top: .67px solid var(--odoo-border-color); background: #fff; min-height: 64px; }
.odlg-f .flex-1 { flex: 1 1 0; }
.odlg-f > .num, .odlg-f > .text-\[11\.5px\], .odlg-f > .text-\[12px\] { font-size: 13px; color: var(--odoo-secondary-color); }

.odlg button.bg-rose-600 { height: var(--odoo-btn-h); padding: 5px 10px; border-radius: var(--odoo-radius); background: var(--odoo-danger); font-size: 14px; font-weight: 500; }


/* labels and boxed controls */
.odlg .o-lbl { display: block; margin: 0 0 4px; padding: 0; font-size: 14px; line-height: 21px; font-weight: 500; color: #000; letter-spacing: 0; }








.odlg .o-hd { font-size: 13px; line-height: 19.5px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--odoo-secondary); }
.odlg .o-cap { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #000; }
.odlg .border-zinc-200 { border-color: var(--odoo-border-color); }
.odlg .border-zinc-100 { border-color: var(--odoo-input-border-color); }
.odlg .rounded-xl, .odlg .rounded-2xl { border-radius: var(--odoo-radius-lg); }
.odlg .rounded-lg { border-radius: var(--odoo-radius); }
.odlg .chip { height: 20px; min-height: 0; padding: 3px 9.84px; font-size: 12px; line-height: 14px; font-weight: 500; }
.odlg thead { background: #fff; color: var(--odoo-secondary); }
.odlg thead th { font-weight: 500; }
.odlg button.text-indigo-600:not([class*="bg-"]), .odlg button.text-indigo-700:not([class*="bg-"]), .odlg a.text-indigo-600 { color: var(--odoo-link); }
.odlg button.border-b-2.text-indigo-700 { color: var(--odoo-primary); }
.odlg button.text-indigo-600:not([class*="bg-"]):hover { color: var(--odoo-link-hover); }
/* segmented groups (Match ALL / ANY, Format, Scope, scale): selected = teal tint like Odoo's toggles */
.odlg .inline-flex.rounded-lg.border { border-radius: var(--odoo-radius-switcher); padding: 2px; background: #fff; }
.odlg .bg-indigo-600.text-white { background: var(--odoo-teal-tint); color: #000; }
.odlg button.bg-indigo-600 { background: var(--odoo-teal-tint); }
.odlg .border-indigo-400.bg-indigo-50, .odlg .border-indigo-300.bg-indigo-50 { background: var(--odoo-teal-tint); border-color: var(--odoo-link); }
.odlg .h-1\.5 > .bg-indigo-600 { background: var(--odoo-primary); }

/* alert banners: radius 6, padding 8 16; info / success / warning / danger subtle colours */
.odlg [role="alert"], .odlg [role="status"], .odlg .bg-rose-50.border, .odlg .bg-amber-50.border, .odlg .bg-emerald-50.border, .odlg .bg-violet-50.border {
  padding: 8px 16px; border-radius: var(--odoo-radius); border-width: 1px; border-style: solid; font-size: 14px; line-height: 21px; }
.odlg .bg-rose-50.border-rose-200, .odlg .bg-rose-50.border-rose-100 { background: var(--odoo-danger-bg-subtle); border-color: var(--odoo-danger-bg-subtle); color: var(--odoo-danger-alert-text); }
.odlg .bg-amber-50.border-amber-200 { background: var(--odoo-warning-bg-subtle); border-color: var(--odoo-warning-bg-subtle); color: var(--odoo-warning-alert-text); }
.odlg .bg-emerald-50.border-emerald-200 { background: var(--odoo-success-bg-subtle); border-color: var(--odoo-success-bg-subtle); color: var(--odoo-success-alert-text); }
.odlg .bg-violet-50.border-violet-200 { background: var(--odoo-info-bg-subtle); border-color: var(--odoo-info-bg-subtle); color: var(--odoo-info-text); }
.odlg .bg-rose-50.border-rose-200 *, .odlg .bg-amber-50.border-amber-200 *, .odlg .bg-emerald-50.border-emerald-200 *, .odlg .bg-violet-50.border-violet-200 * { color: inherit; }
.odlg .bg-zinc-50.border.rounded-xl, .odlg .bg-zinc-50.border-zinc-200 { background: var(--odoo-gray-100); }
.odlg .mpop { border-radius: var(--odoo-radius-xl); }

/* header box: the record form's top bar is white with the same thin line as the list control panel */
.odf-cp { background: #fff; border-bottom: 1px solid var(--odoo-border-color); }

/* ---- polish wave: New button, time in stage, smart-button More, chatter icons ---- */
.odf-new { flex: none; display: inline-flex; align-items: center; height: var(--odoo-btn-h); padding: 5px 10px; border: .67px solid var(--odoo-primary); border-radius: var(--odoo-radius);
  background: #fff; color: var(--odoo-primary); font-size: 14px; line-height: 21px; font-weight: 500; white-space: nowrap; }
.odf-new:hover { background: var(--odoo-primary); color: #fff; }
.odf-step .odf-age { margin-left: 6px; font-size: 12px; line-height: 21px; font-weight: 500; color: var(--odoo-link); }
.odf-more { position: relative; flex: 0 0 auto; margin-left: -1px; }
.odf-more .odf-smart-more { margin-left: 0; min-width: 0; padding: 0 12px; gap: 4px; font-size: 14px; font-weight: 500; color: var(--odoo-body-color); }
.odf-more .odf-smart-more svg { width: 14px; height: 14px; color: var(--odoo-body-color); }
.odf-more-menu { left: auto; right: 0; min-width: 200px; max-height: 60vh; overflow-y: auto; }
.odf-more-menu button { padding: 6px 12px; }
.odf-more-menu button > svg { width: 20px; height: 20px; color: var(--odoo-primary); }
.odf-smartgrp { overflow: visible; }
.odf-ct-ic { display: inline-flex; align-items: center; gap: 2px; }
.odf-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 28px; height: 32px; padding: 0 6px; border-radius: var(--odoo-radius); color: var(--odoo-secondary); }
.odf-ic:hover, .odf-ic.on { background: var(--odoo-gray-200); color: var(--odoo-dark); }
.odf-ic-n { align-self: flex-start; margin-top: 3px; font-size: 10px; line-height: 12px; font-weight: 500; color: var(--odoo-link); }
.odf-fol { left: auto; right: 0; width: 272px; max-height: 50vh; overflow-y: auto; padding: 4px 0; }
.odf-fol-h { padding: 4px 16px; font-size: 13px; font-weight: 500; color: var(--odoo-secondary-color); }
.odf-fol-r { display: flex; align-items: center; gap: 10px; padding: 4px 16px; }
.odf-fol-r .odf-av { flex-basis: 28px; width: 28px; height: 28px; font-size: 11px; }
.odf-fol-b { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 17px; }
.odf-fol-b b { font-weight: 500; }
.odf-fol-b .odf-muted { font-size: 11.5px; }
.odf-ct-search { padding: 0 4px 8px; }

.odf-ct-seg { margin: 0 4px 8px; }