/* Odoo redesign: dialogs. Owner: work package 3b (docs/ODOO_REDESIGN_PLAN.md). Uses the tokens from odoo-tokens.css.
   Numbers come from docs/odoo-reference (ODOO_DESIGN_SYSTEM.md section 8, catalog/COMPONENTS.md D1/D2/B1/B2/B4/F11/F12):
   backdrop rgba(0,0,0,.25), dialog radius 8, border .667px rgba(0,0,0,.176), shadow 0 8px 16px rgba(0,0,0,.15),
   header padding 16 + 1px #DEE2E6 line, title 18.2px/500, close x 30px, body padding 16, footer padding 15.5 gap 8 + 1px line,
   buttons 32.3px high, 6px radius, primary FIRST, flat inputs with a thin bottom line, alerts radius 6 on the *-subtle colours.
   Markup contract (index.html, dialog region): overlay = .o-modal, backdrop = .o-backdrop, panel = .o-dlg .o-dlg-wNNN,
   header = first child of the panel, footer = last child of the panel that has border-t, footer extras .o-foot-end / .o-foot-plain.
   Specificity: every rule starts with .o-modal (or .o-notif) so it beats the old Tailwind utilities and css/app.css without !important. */

/* ---------- shell: backdrop, centring, panel ---------- */
.o-modal > .o-backdrop { background: var(--odoo-backdrop); }
.o-modal > .grid { padding: 28px 10px; }
@media (max-width: 575.98px) { .o-modal > .grid { padding: 10px; } }

.o-modal .o-dlg {
  background: #fff; color: var(--odoo-body-color); width: 100%;
  border: .667px solid rgba(0, 0, 0, .176); border-radius: var(--odoo-radius-lg);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
  font-size: var(--odoo-fs-base); line-height: 1.5;
  max-height: calc(100vh - 56px);
}
.o-modal .o-dlg-w435 { max-width: 435px; }
.o-modal .o-dlg-w500 { max-width: 500px; }
.o-modal .o-dlg-w620 { max-width: 620px; }
.o-modal .o-dlg-w800 { max-width: 800px; }
.o-modal .o-dlg-w1140 { max-width: 1140px; }
@media (max-width: 575.98px) { #auditLog.o-modal .o-dlg { border-radius: 0; max-height: none; } }

/* ---------- body ---------- */
.o-modal .o-dlg > :is(.p-4, .p-5) { padding: 16px; }
.o-modal .o-dlg > :is(.px-4, .px-5) { padding-left: 16px; padding-right: 16px; }
/* Odoo text scale inside dialogs: 14 px body, 13 px small (the old 10.5 to 12.5 px helper text becomes 13 px) */
.o-modal .o-dlg :is([class*="text-[10"], [class*="text-[11"], [class*="text-[12"]):not(.chip):not(.o-hd):not(.o-cap) { font-size: var(--odoo-fs-small); line-height: 1.5; }
.o-modal .o-dlg :is([class*="text-[13"], [class*="text-[14"], [class*="text-[15"]):not(.chip) { font-size: var(--odoo-fs-base); line-height: 1.5; }
.o-modal .o-dlg :is(.text-zinc-500, .text-zinc-400) { color: var(--odoo-secondary-color); }
.o-modal .o-dlg .o-lbl { font-size: var(--odoo-fs-base); font-weight: 500; color: #000; margin-bottom: 8px; line-height: 1.5; }
.o-modal .o-dlg .o-hd, .o-modal .o-dlg .o-cap { font-size: var(--odoo-fs-small); font-weight: 700; color: #000; letter-spacing: .02em; }
.o-modal .o-dlg .border-zinc-200, .o-modal .o-dlg .border-zinc-100, .o-modal .o-dlg .border-zinc-300 { border-color: var(--odoo-border-color); }
.o-modal .o-dlg :is(.rounded-lg, .rounded-xl, .rounded-2xl) { border-radius: var(--odoo-radius-lg); }
.o-modal .o-dlg :is(h3, b, .font-bold, .font-semibold) { font-weight: 500; }
.o-modal .o-dlg b { font-weight: 700; }
.o-modal .o-dlg .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--odoo-border-color); }

/* ---------- header: title 18.2 px / 500, close x ---------- */
.o-modal .o-dlg > :first-child {
  display: flex; align-items: center; gap: 8px; padding: 16px; background: #fff;
  border: 0; border-bottom: 1px solid var(--odoo-border-color); border-radius: 0;
}
.o-modal .o-dlg > :first-child > :is(svg, i):first-child,
.o-modal .o-dlg > :first-child > .w-11 { display: none; }
.o-modal .o-dlg > :first-child :is(h3, .font-bold, .truncate.font-bold),
.o-modal .o-dlg > .font-bold:first-child {
  font-size: var(--odoo-fs-h3); line-height: 1.5; font-weight: 500; color: var(--odoo-heading-color); margin: 0; letter-spacing: 0;
}
.o-modal .o-dlg > :first-child :is(h3, .font-bold) :is(span, b) { font-weight: inherit; font-size: inherit; }
.o-modal .o-dlg > :first-child button[aria-label="Close"] {
  width: 30px; height: 30px; flex: 0 0 30px; margin-left: auto; padding: 0; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--odoo-radius); color: #000; opacity: .5;
}
.o-modal .o-dlg > :first-child button[aria-label="Close"]:hover:not(:disabled) { opacity: .75; background: rgba(0, 0, 0, .05); }
.o-modal .o-dlg > :first-child button[aria-label="Close"] svg { width: 16px; height: 16px; }

/* ---------- footer: padding 15.5, gap 8, primary FIRST ---------- */
.o-modal .o-dlg > [class~="border-t"]:last-child {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 15.5px; background: #fff; border: 0; border-top: 1px solid var(--odoo-border-color); border-radius: 0;
}


.o-modal .o-dlg > [class~="border-t"]:last-child:not(.o-foot-plain) > .flex-1:empty { order: 3; }

.o-modal .o-dlg > [class~="border-t"]:last-child:not(.o-foot-plain) > .o-foot-end { order: 5; }


/* ---------- buttons: 32.3 px, radius 6, weight 500 ---------- */










.o-modal .o-dlg button:disabled { opacity: .65; }
.o-modal .o-dlg :is(.text-indigo-600, .text-indigo-700) { color: var(--odoo-link); }
.o-modal .o-dlg :is(.text-indigo-600, .text-indigo-700):hover { color: var(--odoo-link-hover); }

/* ---------- flat form controls: thin bottom line, teal when focused ---------- */






.o-modal .o-dlg input[type="color"] { border-radius: var(--odoo-radius); border-color: var(--odoo-gray-400); }
/* checkbox 14 px radius 3.5, teal when checked; radio 14 px */








/* ---------- selected cards, pills, segmented controls: teal tint + teal border ---------- */
.o-modal .o-dlg :is(.bg-indigo-50, .bg-indigo-50\/50, .bg-indigo-50\/40) { background-color: var(--odoo-teal-tint); }
.o-modal .o-dlg :is(.border-indigo-300, .border-indigo-400) { border-color: var(--odoo-link); }
.o-modal .o-dlg button.bg-indigo-600.text-white { background: var(--odoo-teal-tint); color: #000; box-shadow: inset 0 0 0 1px var(--odoo-link); }
.o-modal .o-dlg .inline-flex.rounded-lg.border { border-radius: var(--odoo-radius); border-color: var(--odoo-gray-400); }
.o-modal .o-dlg .inline-flex.rounded-lg.border > button, .o-modal .o-dlg .inline-flex.rounded-lg.border > template + button { border-radius: 4px; font-size: var(--odoo-fs-small); font-weight: 500; }
/* notebook-style tabs (Import) */
.o-modal .o-dlg button.border-b-2 { padding: 8px 16px; font-size: var(--odoo-fs-base); font-weight: 500; }
.o-modal .o-dlg button.border-b-2.border-indigo-600 { border-color: var(--odoo-primary); color: var(--odoo-primary); }
.o-modal .o-dlg .border-dashed { border-radius: var(--odoo-radius-lg); }

/* ---------- alerts: *-subtle background, dark text, radius 6, padding 16 (8 16 for one-liners) ---------- */
.o-modal .o-dlg :is(.bg-rose-50:not(thead), .bg-amber-50:not(thead), .bg-emerald-50:not(label):not(thead), .o-alert-info) {
  border: 0; border-radius: var(--odoo-radius); padding: 16px;
}
.o-modal .o-dlg :is(.bg-rose-50, .bg-amber-50, .bg-emerald-50, .o-alert-info)[role="alert"],
.o-modal .o-dlg :is(.bg-rose-50, .bg-amber-50, .bg-emerald-50, .o-alert-info)[role="status"] { padding: 8px 16px; }
.o-modal .o-dlg .bg-rose-50:not(thead) { background: var(--odoo-danger-bg-subtle); color: var(--odoo-danger-alert-text); }
.o-modal .o-dlg .bg-amber-50:not(thead) { background: var(--odoo-warning-bg-subtle); color: var(--odoo-warning-alert-text); }
.o-modal .o-dlg .bg-emerald-50:not(label):not(thead) { background: var(--odoo-success-bg-subtle); color: var(--odoo-success-alert-text); }
.o-modal .o-dlg .o-alert-info { background: var(--odoo-info-bg-subtle); color: var(--odoo-info-text); }
.o-modal .o-dlg :is(.bg-rose-50:not(thead), .bg-amber-50:not(thead), .bg-emerald-50:not(label):not(thead), .o-alert-info) :is([class*="text-rose-"], [class*="text-amber-"], [class*="text-emerald-"], [class*="text-violet-"], [class*="text-zinc-"]) { color: inherit; }
.o-modal .o-dlg :is(.bg-rose-50, .bg-amber-50, .bg-emerald-50, .o-alert-info) .text-indigo-700 { color: var(--odoo-link); font-weight: 500; }
.o-modal .o-dlg :is(.bg-rose-50, .bg-amber-50) ul { margin-top: 4px; }
.o-modal .o-dlg label.bg-emerald-50 { background: var(--odoo-success-bg-subtle); }

/* soft badges (B4): 12/500, padding 3px 9.84px, pill, 15 % tint + dark text */
:is(.o-modal, .o-notif) .chip { height: auto; padding: 3px 9.84px; border-radius: var(--odoo-radius-pill); font-size: 12px; font-weight: 500; line-height: 1.5; }
:is(.o-modal, .o-notif) .chip.bg-emerald-100 { background: var(--odoo-badge-success-bg); color: var(--odoo-badge-success-text); }
:is(.o-modal, .o-notif) .chip.bg-sky-100 { background: var(--odoo-badge-info-bg); color: var(--odoo-badge-info-text); }
:is(.o-modal, .o-notif) .chip.bg-rose-100 { background: var(--odoo-badge-danger-bg); color: var(--odoo-danger-text); }
:is(.o-modal, .o-notif) .chip.bg-amber-100 { background: var(--odoo-badge-warning-bg); color: var(--odoo-badge-warning-text); }
:is(.o-modal, .o-notif) .chip.bg-zinc-100 { background: var(--odoo-badge-secondary-bg); color: var(--odoo-secondary); }
:is(.o-modal, .o-notif) .chip:is(.bg-indigo-50, .bg-indigo-100) { background: var(--odoo-badge-primary-bg); color: var(--odoo-primary); }

/* ---------- tables inside dialogs: Odoo list look (header #495057 on white, 0.67 px row lines) ---------- */
.o-modal .o-dlg table { border-collapse: collapse; font-size: var(--odoo-fs-base); }
.o-modal .o-dlg table :is(th, td) { padding: 8px 4.8px; }
.o-modal .o-dlg table thead, .o-modal .o-dlg table thead tr { background: #fff; color: var(--odoo-gray-700); }
.o-modal .o-dlg table th { font-weight: 500; color: var(--odoo-gray-700); font-size: var(--odoo-fs-base); border-bottom: 1px solid var(--odoo-border-color); }
.o-modal .o-dlg table tbody tr { border-top: .667px solid var(--odoo-border-color); }
.o-modal .o-dlg table tbody tr:first-child { border-top: 0; }
.o-modal .o-dlg table tbody tr:hover { background: var(--odoo-gray-100); }
.o-modal .o-dlg .overflow-auto.rounded-lg { border-color: var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }
.o-modal .o-dlg :is(.text-rose-800, .text-rose-700, .text-sky-700, .text-emerald-700) th { color: var(--odoo-gray-700); }
/* activity log (admin): list header and rows like Odoo lists */
#auditLog.o-modal .sticky.top-0 { background: #fff; color: var(--odoo-gray-700); font-size: var(--odoo-fs-base); font-weight: 500; text-transform: none; letter-spacing: 0; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--odoo-border-color); }
#auditLog.o-modal .al-row { font-size: var(--odoo-fs-base); border-color: var(--odoo-border-color); padding-top: 8px; padding-bottom: 8px; }
#auditLog.o-modal .al-row:hover { background: var(--odoo-gray-100); }

/* filter wizard: the WHERE / AND label column */
.o-modal .o-dlg span.w-9.shrink-0 { width: 56px; font-size: var(--odoo-fs-small); }

/* ---------- progress bar (photo import) ---------- */
.o-modal .o-dlg .h-1\.5.rounded-full { height: 8px; background: var(--odoo-gray-200); }

/* ---------- search panel backdrop: Odoo does not dim the page behind the search dropdown ---------- */
.o-search-backdrop { background: transparent; }

/* ---------- notification centre: Odoo systray dropdown ---------- */
.o-notif { border-radius: var(--odoo-radius-xl); border: 1px solid var(--odoo-border-color); box-shadow: var(--odoo-popover-shadow); background: #fff; }
.o-notif > :first-child { padding: 8px 16px; gap: 8px; border-bottom: 1px solid var(--odoo-border-color); }
.o-notif > :first-child > :is(svg, i):first-child { display: none; }
.o-notif > :first-child > span:first-of-type:not(.chip) { font-size: var(--odoo-fs-h5); font-weight: 500; color: #000; }
.o-notif button.w-full { padding: 8px 16px; border-bottom: .667px solid var(--odoo-border-color); }
.o-notif button.w-full:hover { background: var(--odoo-gray-100); }
.o-notif .bg-indigo-50\/40 { background: rgba(1, 126, 132, .07); }
.o-notif button.w-full .text-\[13px\] { font-size: var(--odoo-fs-base); font-weight: 500; color: #000; }
.o-notif .text-zinc-500, .o-notif .text-zinc-400 { color: var(--odoo-secondary-color); }