/* Toucan ERP 1.8 · "Toucan Horizon" patterns (UX-SPEC deliverables 4–6): object page, list report, forms.
   Uses only the tokens of app.css and CSS logical properties (margin-inline, inset-inline, text-align:start) so every
   component mirrors by itself under dir="rtl". */

/* ================================================================== object page */
.op { display: grid; gap: 16px; align-content: start; min-width: 0; }
.op > * { min-width: 0; }
.op-header { padding: 14px 18px 12px; display: grid; gap: 12px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.op-header.op-tone-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
/* snapped header (fixed under the top bar while the real header is scrolled away) */
.op-snap { position: fixed; z-index: 38; inset-block-start: var(--topbar-h); inset-inline-start: var(--nav-offset); inset-inline-end: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding-block: 8px; padding-inline: 28px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); border-block-end: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.op-snap-title { display: flex; gap: 10px; align-items: center; min-width: 0; flex-wrap: wrap; }
.op-snap-title strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.op-snap-actions .op-actions { margin-inline-start: 0; }
.op-snap-actions .btn { height: 32px; }
/* anchors / scrolled-to tabs stay clear of the top bar, the snapped header and the footer toolbar */
html:has(.op) { scroll-padding-block: calc(var(--topbar-h) + 64px) 96px; }
.op-title-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.op-title { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.op-back { justify-self: start; border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.op-back:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
[dir="rtl"] .op-back-arrow { display: inline-block; transform: scaleX(-1); }
.op-heading { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.op-type { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.op-number { font-size: 21px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.op-subtitle { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.op-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-inline-start: auto; }
.op-actions .btn.op-primary { order: 9; }
.op-activity-toggle[aria-pressed="true"] { color: var(--brand-deep); background: var(--brand-soft); }

.op-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 20px; margin: 0;
  padding-block-start: 10px; border-block-start: 1px solid var(--border); }
.op-fact { min-width: 0; }
.op-fact dt { font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.op-fact dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* smart buttons (Odoo): count on top, label below */
.op-smart-row { display: flex; flex-wrap: wrap; gap: 8px; }
.op-smart { display: inline-grid; grid-template-columns: auto; justify-items: start; gap: 0; min-width: 104px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font: inherit; text-align: start; }
.op-smart:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.op-smart:focus-visible { outline: none; box-shadow: var(--focus); }
.op-smart-count { font-size: 17px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--brand-deep); }
.op-smart-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.op-smart-bad .op-smart-count { color: var(--bad); } .op-smart-warn .op-smart-count { color: var(--warn); }

/* stage bar = the 1.8 workflow guide in compact form (Dynamics 365 business-process bar) */
.op-stage { display: grid; gap: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--border); min-width: 0; }
.op-stage .stepper-scroll { margin: 0; }
.wf-guide.wf-compact { border: 0; padding: 0; background: none; gap: 8px; }
.wf-summary { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; font-size: 13px; }
.wf-summary .wf-sum-item { min-width: 0; overflow-wrap: anywhere; }
.wf-summary .wf-toggle { margin-inline-start: auto; }
.wf-stagebar { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; }
.wf-stage { flex: 1 0 auto; min-width: 0; }
.wf-stage button { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding-block: 0; padding-inline: 14px 10px;
  border: 1px solid var(--border); border-inline-start-width: 0; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12px;
  font-weight: 600; white-space: nowrap; cursor: pointer; }
.wf-stage:first-child button { border-inline-start-width: 1px; border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); }
.wf-stage:last-child button { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); }
.wf-stage button:hover { background: var(--surface-3); color: var(--text); }
.wf-stage.wf-st-done button { color: var(--ok); background: var(--ok-soft); }
.wf-stage.wf-st-current button, .wf-stage.wf-st-due button { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand-line); font-weight: 750; }
.wf-stage.wf-st-rejected button { color: var(--bad); background: var(--bad-soft); }
.wf-stage.wf-st-returned button { color: var(--warn); background: var(--warn-soft); }
.wf-stage.wf-st-assignment button { color: #7B4FC9; background: color-mix(in srgb, #7B4FC9 10%, var(--surface)); }
.wf-stage-name { overflow: hidden; text-overflow: ellipsis; }
.wf-compact-full { padding-block-start: 4px; }

/* activity column */
.op-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.op-main { display: grid; gap: 16px; min-width: 0; align-content: start; }
.op-main > * { min-width: 0; }
.op-activity { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.op-activity-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 14px; border-block-end: 1px solid var(--border); }
.op-activity-body { padding: 12px 14px; min-width: 0; overflow-x: auto; font-size: 13px; }
.op-activity-body table { font-size: 12.5px; }
.op-activity-body th, .op-activity-body td { padding: 7px 8px; }
.op-activity-loading { color: var(--muted); padding: 12px; }
.op-layout.op-activity-hidden .op-activity { display: none; }
@media (min-width: 1360px) {
  .op-layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px); }
  .op-layout.op-activity-hidden { grid-template-columns: minmax(0, 1fr); }
  .op-activity { position: sticky; inset-block-start: calc(var(--topbar-h) + 84px); max-height: calc(100vh - var(--topbar-h) - 100px); overflow: auto; }
}
.op-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.op-seg button { border: 0; background: none; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.op-seg button + button { border-inline-start: 1px solid var(--border); }
.op-seg button[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-deep); }

.op-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.op-h-item { position: relative; padding-block: 0 12px; padding-inline-start: 18px; border-inline-start: 2px solid var(--border); margin-inline-start: 5px; }
.op-h-item::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); }
.op-h-item.op-h-ok::before { border-color: var(--ok); background: var(--ok-soft); }
.op-h-item.op-h-bad::before { border-color: var(--bad); background: var(--bad-soft); }
.op-h-item.op-h-warn::before { border-color: var(--warn); background: var(--warn-soft); }
.op-h-item:last-child { border-inline-start-color: transparent; }
.op-h-comment { margin-block-start: 3px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }


/* footer toolbar (Fiori): the decision of the responsible person, always reachable */
.op-footer { position: sticky; inset-block-end: 0; z-index: 35; margin-block-start: 4px; }
.op-footer-inner { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  box-shadow: 0 -6px 24px -10px rgba(15, 30, 20, .25); backdrop-filter: blur(6px); }
.op-footer-text { min-width: 0; overflow-wrap: anywhere; }
.op-footer-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-inline-start: auto; }
.op-footer-buttons .btn { min-height: 34px; height: auto; max-width: 100%; white-space: normal; text-align: center; padding-block: 5px; }
.lv td > a { white-space: nowrap; }

/* dropdown menu ("More ▾", Views, Columns) */
.op-menu-wrap { position: relative; display: inline-flex; }
.op-caret { font-size: 10px; opacity: .7; margin-inline-start: 2px; }
.op-menu { position: absolute; inset-block-start: calc(100% + 6px); z-index: 60; min-width: 230px; max-width: min(92vw, 360px); max-height: min(70vh, 520px); overflow: auto;
  padding: 6px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.op-menu.op-menu-end { inset-inline-end: 0; }
.op-menu.op-menu-start { inset-inline-start: 0; }
.op-menu.op-menu-up { inset-block-start: auto; inset-block-end: calc(100% + 6px); }
.op-menu > .btn, .op-menu > a.btn, .op-menu > label.btn, .op-menu .op-menu-item.btn { display: flex; width: 100%; justify-content: flex-start; text-align: start; height: auto;
  min-height: 34px; padding-block: 6px; padding-inline: 10px; border: 0; border-radius: var(--radius-sm); background: none; box-shadow: none; color: var(--text);
  font-weight: 550; white-space: normal; }
.op-menu > .btn:hover, .op-menu .op-menu-item.btn:hover { background: var(--surface-3); }
.op-menu > .btn.danger { color: var(--bad); }
.op-menu > .btn.danger:hover { background: var(--bad-soft); }
.op-menu > .btn:disabled { opacity: .55; }
.op-menu > .badge { justify-self: start; margin: 4px 10px; }
.op-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.op-menu-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 10px 2px; }

/* ================================================================== list report */
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 16px 0; }
.lv-chips .hint { margin-inline-end: 4px; }
.lv-chip { height: 28px; padding-inline: 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lv-chip:hover { background: var(--surface-2); }
.lv-chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.lv-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.lv-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lv-tools .btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-deep); }
.lv-view-row { display: flex; gap: 2px; align-items: center; }
.lv-view-row .lv-view-apply { flex: 1; justify-content: flex-start; text-align: start; overflow: hidden; text-overflow: ellipsis; }
.lv-none { padding: 6px 10px; }
.op-menu .lv-col { padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.op-menu .lv-col:hover { background: var(--surface-3); }
.lv-bulkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; background: var(--brand-soft); border-block-end: 1px solid var(--border); }
.lv .lv-check, .lv .lv-check-all { width: 16px; height: 16px; accent-color: var(--brand); }
.lv th, .lv td { text-align: start; }
.lv th.num, .lv td.num { text-align: end; }
/* density */
.lv.lv-compact td { padding-block: 5px; font-size: 12.8px; }
.lv.lv-compact th { padding-block: 7px; }
.lv.lv-compact .badge { height: 20px; font-size: 11px; }
.lv.lv-compact .product-cell .sku-code { display: inline; margin-inline-start: 6px; }
/* skeleton rows */
.lv-skel { display: inline-block; height: 10px; width: var(--w, 60%); max-width: 220px; border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%;
  animation: lv-shimmer 1.3s ease-in-out infinite; vertical-align: middle; }
.lv-skel-row td { border-block-end-color: var(--border); }
@keyframes lv-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .lv-skel { animation: none; } }
/* empty state with a call to action */
.lv td.lv-empty { padding-block: 44px; }
.lv td.lv-empty > * + * { margin-block-start: 8px; }
.lv-empty-title { font-weight: 650; color: var(--text); }
.lv-empty-icon { width: 46px; height: 46px; margin-inline: auto; border-radius: 14px; background: var(--brand-soft);
  -webkit-mask: none; position: relative; }
.lv-empty-icon::after { content: ""; position: absolute; inset: 12px; border: 2px solid var(--brand-line); border-radius: 6px; border-block-start-width: 6px; }

/* ================================================================== forms (deliverable 6) */
/* two-column responsive grid inside dialogs (one column on phones); wide dialogs keep the auto-fill grid */
.modal:not(.wide):not(.narrow):not(.lg) .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal.narrow .form-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .modal .form-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.form-grid .form-section { text-align: start; }
/* read-only fields: visibly locked, with the source of the value */
label.field.locked > span:first-child::before { content: "🔒"; font-size: 11px; margin-inline-end: 4px; }
label.field.locked input, label.field.locked .ref-select input { background: var(--surface-3); border-style: dashed; color: var(--text); cursor: not-allowed; }
.field-source { font-size: 11.5px; color: var(--info); font-weight: 600; }
/* inline errors returned by the server (422 / pricing problems) */
.field-error { font-size: 12px; color: var(--bad); font-weight: 600; }
.field [aria-invalid="true"], input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--bad) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }

/* ================================================================== small screens */
@media (max-width: 960px) {
  .op-snap { inset-inline-start: 0; padding-inline: 12px; }
  .op-snap-title .op-type { display: none; }
  .op-number { font-size: 18px; }
}
@media (max-width: 640px) {
  .op-header { padding: 12px; gap: 10px; }
  .op-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .op-actions { width: 100%; justify-content: flex-start; margin-inline-start: 0; }
  .op-actions .btn.op-primary { flex: 1 1 auto; }
  .op-smart { min-width: 0; flex: 1 1 calc(33% - 8px); padding: 5px 8px; }
  .op-footer { margin-inline: -4px; }
  .op-footer-inner { padding: 8px 10px; border-radius: var(--radius); }
  .op-footer-text { flex: 1 1 100%; font-size: 12.5px; }
  .op-footer-buttons { width: 100%; justify-content: stretch; }
  .op-footer-buttons .btn { flex: 1 1 auto; }
  .op-menu { max-width: calc(100vw - 32px); }
  .lv-tools { width: 100%; }
  .lv .toolbar > .btn, .lv .toolbar > button { max-width: 100%; height: auto; min-height: 34px; white-space: normal; text-align: center; padding-block: 5px; }
  .lv-chips { padding-inline: 12px; }
}
@media print {
  .op-header { position: static; box-shadow: none; }
  .op-footer, .op-actions, .op-activity-toggle, .lv-tools, .lv-chips { display: none !important; }
}

/* history line: action and person side by side in both directions (no bidi run-together) */
.op-h-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.op-h-by::before { content: '·'; margin-inline-end: 6px; }