/* =========================================================
   Appearance layer (ported from the ET project) — loaded LAST (templates/base.html).

   <html data-scheme="teal|blue|orange|graphite|classic"   (admin, APPLICATION.UISCHEME)
         data-font="plex|source|poppins"                   (admin, APPLICATION.UIFONT)
         data-density="compact|comfortable"                (per user, USERS.UIDENSITY)
         data-theme="light|dark">                          (per user, USERS.UITHEME)

   Schemes redefine the --o-* tokens (odoo.css) and --qc-* tokens
   (app-workbench-orange.css). "classic" defines nothing, so it keeps
   the original orange look exactly.
   Selector weight: html[data-scheme=x] beats :root, and
   html[data-scheme=x][data-theme="dark"] beats html[data-theme="dark"].
   ========================================================= */

/* ---------- Typeface ---------- */
html[data-font="plex"] { --o-font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
html[data-font="source"] { --o-font: "Source Sans 3", "Segoe UI", system-ui, sans-serif; }
html[data-font="poppins"] { --o-font: "Poppins", "Segoe UI", system-ui, sans-serif; }

/* ---------- Density ----------
   Sizes across the app are in rem, so scaling the root font scales fields,
   buttons, gaps and table rows together. Compact = original sizes. */
html[data-density="comfortable"] { font-size: 107.5%; }

/* ---------- Shared component hooks (all schemes except classic) ---------- */
html:not([data-scheme="classic"]) {
  --et-on-accent: #ffffff;
}
html:not([data-scheme="classic"]) .o_topbar {
  background: linear-gradient(90deg, var(--et-top) 0%, var(--et-top-2) 100%);
  color: var(--et-on-top);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.10);
}
html:not([data-scheme="classic"]) .btn-odoo-primary,
html:not([data-scheme="classic"]) .o_form_view .btn-odoo-primary,
html:not([data-scheme="classic"]) .o_action .btn-odoo-primary {
  background: var(--o-accent);
  border-color: var(--o-accent);
  color: var(--et-on-accent);
}
html:not([data-scheme="classic"]) .btn-odoo-primary:hover,
html:not([data-scheme="classic"]) .o_form_view .btn-odoo-primary:hover,
html:not([data-scheme="classic"]) .o_action .btn-odoo-primary:hover {
  background: var(--o-accent-dark);
  border-color: var(--o-accent-dark);
  color: var(--et-on-accent);
}

/* =========================================================
   Ledger Teal (default)
   ========================================================= */
html[data-scheme="teal"] {
  --o-tint-4: #f7faf9; --o-tint-5: #e6f1ef; --o-tint-6: #f7faf9; --o-th-text: #3f5f5a;
  --et-top: #0e3a38; --et-top-2: #0b302e; --et-on-top: #e6f2f0;
  --o-brand: #0e3a38; --o-brand-dark: #0a2e2c;
  --o-text: #14302d; --o-muted: #55706b;
  --o-accent: #0d7066; --o-accent-dark: #095a52; --o-accent-deep: #095a52; --o-accent-rgb: 13, 112, 102;
  --o-peach: #7fb3ac; --o-peach-rgb: 120, 160, 154;
  --o-beige: #e6f1ef; --o-beige-rgb: 225, 240, 237;
  --o-paper: #f7fbfa; --o-paper-rgb: 247, 251, 250;
  --o-tint: #eef5f3; --o-tint-2: #f3f7f6; --o-tint-3: #f2f5f4;
  --o-bg: #f2f5f4; --o-panel: #ffffff; --o-sidebar: #ffffff;
  --o-border: #d8e1df; --o-input-border: #c5d2cf; --o-hover: #eef5f3;
  --qc-accent: #0d7066; --qc-accent-dark: #095a52; --qc-accent-soft: rgba(13, 112, 102, 0.12);
  --qc-border: #d8e1df; --qc-border-strong: #c0cdca;
  --qc-page: #f2f5f4; --qc-toolbar: #fafcfb; --qc-panel: #ffffff;
  --qc-muted: #55706b; --qc-text: #14302d;
  --qc-head: #f0f5f4; --qc-zebra: #fafcfb; --qc-hover: #eef5f3;
  --qc-readonly-bg: #ecf1f0; --qc-readonly-text: #14302d;
}
html[data-scheme="teal"][data-theme="dark"] {
  --o-tint-4: #142523; --o-tint-5: #16302d; --o-tint-6: #142523; --o-th-text: #6fd3c7;
  --et-top: #082422; --et-top-2: #061c1a; --et-on-top: #d9ebe8; --et-on-accent: #03201c;
  --o-brand: #d9ebe8; --o-brand-dark: #a9c4bf;
  --o-text: #deedeb; --o-muted: #8ea9a5;
  --o-accent: #2fb5a7; --o-accent-dark: #4cc7ba; --o-accent-deep: #27998d; --o-accent-rgb: 47, 181, 167;
  --o-peach: #5fa59c; --o-peach-rgb: 70, 110, 105;
  --o-beige: #16302d; --o-beige-rgb: 22, 48, 45;
  --o-paper: #142523; --o-paper-rgb: 20, 37, 35;
  --o-tint: #172a28; --o-tint-2: #142523; --o-tint-3: #0f1c1b;
  --o-bg: #0b1615; --o-panel: #12201e; --o-sidebar: #0f1c1b;
  --o-border: #213432; --o-input-border: #304845; --o-hover: rgba(47, 181, 167, 0.10);
  --qc-accent: #2fb5a7; --qc-accent-dark: #4cc7ba; --qc-accent-soft: rgba(47, 181, 167, 0.16);
  --qc-border: #213432; --qc-border-strong: #304845;
  --qc-page: #0b1615; --qc-toolbar: #12201e; --qc-panel: #12201e;
  --qc-muted: #8ea9a5; --qc-text: #deedeb;
  --qc-head: #162624; --qc-zebra: #101d1c; --qc-hover: rgba(47, 181, 167, 0.10);
  --qc-input-bg: #0e1a19; --qc-surface-soft: #172725; --qc-line-soft: #213432; --qc-row-line: #1d2e2c;
  --qc-th-text: #6fd3c7; --qc-readonly-bg: #182927; --qc-readonly-text: #cfe2df;
  --qc-btn-secondary-bg: #12201e; --qc-btn-secondary-hover: #182927; --qc-btn-secondary-border: #304845;
  --qc-print-frame: #0b1615;
}

/* =========================================================
   Brand Blue (matches the XPL logo)
   ========================================================= */
html[data-scheme="blue"] {
  --o-tint-4: #f7f9fc; --o-tint-5: #e8f0fe; --o-tint-6: #f7f9fc; --o-th-text: #3d5274;
  --et-top: #0f1d3a; --et-top-2: #0c1830; --et-on-top: #e7edf8;
  --o-brand: #0f1d3a; --o-brand-dark: #0c1830;
  --o-text: #152039; --o-muted: #5a6781;
  --o-accent: #1f63d6; --o-accent-dark: #1851b3; --o-accent-deep: #1851b3; --o-accent-rgb: 31, 99, 214;
  --o-peach: #8fb0e8; --o-peach-rgb: 130, 150, 190;
  --o-beige: #e8f0fe; --o-beige-rgb: 232, 240, 254;
  --o-paper: #f7f9fd; --o-paper-rgb: 247, 249, 253;
  --o-tint: #f0f4fb; --o-tint-2: #f5f8fc; --o-tint-3: #f3f5f9;
  --o-bg: #f3f5f9; --o-panel: #ffffff; --o-sidebar: #ffffff;
  --o-border: #dde3ec; --o-input-border: #c9d2df; --o-hover: #f0f4fb;
  --qc-accent: #1f63d6; --qc-accent-dark: #1851b3; --qc-accent-soft: rgba(31, 99, 214, 0.12);
  --qc-border: #dde3ec; --qc-border-strong: #c5cedc;
  --qc-page: #f3f5f9; --qc-toolbar: #fafbfd; --qc-panel: #ffffff;
  --qc-muted: #5a6781; --qc-text: #152039;
  --qc-head: #f3f6fa; --qc-zebra: #fafbfd; --qc-hover: #f0f4fb;
  --qc-readonly-bg: #edf0f5; --qc-readonly-text: #152039;
}
html[data-scheme="blue"][data-theme="dark"] {
  --o-tint-4: #172236; --o-tint-5: #172a4d; --o-tint-6: #172236; --o-th-text: #8db4ff;
  --et-top: #0a1426; --et-top-2: #081020; --et-on-top: #dfe7f5; --et-on-accent: #071226;
  --o-brand: #dfe7f5; --o-brand-dark: #a9b8d3;
  --o-text: #e2e8f4; --o-muted: #94a1ba;
  --o-accent: #4d8dff; --o-accent-dark: #6ea2ff; --o-accent-deep: #3a78e8; --o-accent-rgb: 77, 141, 255;
  --o-peach: #6f93d6; --o-peach-rgb: 70, 90, 130;
  --o-beige: #172a4d; --o-beige-rgb: 23, 42, 77;
  --o-paper: #172236; --o-paper-rgb: 23, 34, 54;
  --o-tint: #1b2840; --o-tint-2: #172236; --o-tint-3: #0f1828;
  --o-bg: #0d1524; --o-panel: #141e31; --o-sidebar: #111a2b;
  --o-border: #233049; --o-input-border: #33415e; --o-hover: rgba(77, 141, 255, 0.10);
  --qc-accent: #4d8dff; --qc-accent-dark: #6ea2ff; --qc-accent-soft: rgba(77, 141, 255, 0.16);
  --qc-border: #233049; --qc-border-strong: #33415e;
  --qc-page: #0d1524; --qc-toolbar: #141e31; --qc-panel: #141e31;
  --qc-muted: #94a1ba; --qc-text: #e2e8f4;
  --qc-head: #172236; --qc-zebra: #111a2b; --qc-hover: rgba(77, 141, 255, 0.10);
  --qc-input-bg: #0f1828; --qc-surface-soft: #1a2539; --qc-line-soft: #233049; --qc-row-line: #1d2940;
  --qc-th-text: #8db4ff; --qc-readonly-bg: #1a2539; --qc-readonly-text: #d3dcec;
  --qc-btn-secondary-bg: #141e31; --qc-btn-secondary-hover: #1a2539; --qc-btn-secondary-border: #33415e;
  --qc-print-frame: #0d1524;
}

/* =========================================================
   Refined Orange (today's teal bar + orange, without beige)
   ========================================================= */
html[data-scheme="orange"] {
  --o-tint-4: #fafafa; --o-tint-5: #fff0e4; --o-tint-6: #fafafa; --o-th-text: #6b5446;
  --et-top: #25424c; --et-top-2: #1e353d; --et-on-top: #eef4f6;
  --o-brand: #25424c; --o-brand-dark: #1e353d;
  --o-text: #1f3239; --o-muted: #5a6c73;
  --o-accent: #c95a08; --o-accent-dark: #a94b06; --o-accent-deep: #a94b06; --o-accent-rgb: 201, 90, 8;
  --o-peach: #d9a27a; --o-peach-rgb: 160, 170, 175;
  --o-beige: #fff0e4; --o-beige-rgb: 246, 243, 239;
  --o-tint: #f6f3ef; --o-tint-2: #f8f7f5; --o-tint-3: #f4f5f6;
  --o-bg: #f4f5f6; --o-panel: #ffffff; --o-sidebar: #ffffff;
  --o-border: #dfe3e6; --o-input-border: #cbd2d6; --o-hover: #f6f3ef;
  --qc-accent: #c95a08; --qc-accent-dark: #a94b06; --qc-accent-soft: rgba(201, 90, 8, 0.12);
  --qc-border: #dfe3e6; --qc-border-strong: #c8cfd3;
  --qc-page: #f4f5f6; --qc-toolbar: #fafbfb; --qc-panel: #ffffff;
  --qc-muted: #5a6c73; --qc-text: #1f3239;
  --qc-head: #f4f6f7; --qc-zebra: #fafbfb; --qc-hover: #f6f3ef;
  --qc-readonly-bg: #eff1f2; --qc-readonly-text: #1f3239;
}
html[data-scheme="orange"][data-theme="dark"] {
  --o-tint-4: #1b262d; --o-tint-5: #3a2414; --o-tint-6: #1b262d; --o-th-text: #ffad73;
  --et-top: #15252b; --et-top-2: #101d22; --et-on-top: #e3edf0; --et-on-accent: #2a1203;
  --o-brand: #e3edf0; --o-brand-dark: #a8bcc3;
  --o-text: #e5edf0; --o-muted: #97a9b0;
  --o-accent: #ff8a3d; --o-accent-dark: #ffa060; --o-accent-deep: #e8772c; --o-accent-rgb: 255, 138, 61;
  --o-peach: #c98552; --o-peach-rgb: 80, 95, 105;
  --o-beige: #3a2414; --o-beige-rgb: 40, 50, 56;
  --o-paper: #1b262d; --o-paper-rgb: 27, 38, 45;
  --o-tint: #212d34; --o-tint-2: #1b262d; --o-tint-3: #121b21;
  --o-bg: #10171b; --o-panel: #18222a; --o-sidebar: #141d23;
  --o-border: #26343c; --o-input-border: #364650; --o-hover: rgba(255, 138, 61, 0.10);
  --qc-accent: #ff8a3d; --qc-accent-dark: #ffa060; --qc-accent-soft: rgba(255, 138, 61, 0.16);
  --qc-border: #26343c; --qc-border-strong: #364650;
  --qc-page: #10171b; --qc-toolbar: #18222a; --qc-panel: #18222a;
  --qc-muted: #97a9b0; --qc-text: #e5edf0;
  --qc-head: #1b262d; --qc-zebra: #141d23; --qc-hover: rgba(255, 138, 61, 0.10);
  --qc-input-bg: #121b21; --qc-surface-soft: #1e2a31; --qc-line-soft: #26343c; --qc-row-line: #212e35;
  --qc-th-text: #ffad73; --qc-readonly-bg: #1e2a31; --qc-readonly-text: #d5e1e5;
  --qc-btn-secondary-bg: #18222a; --qc-btn-secondary-hover: #1e2a31; --qc-btn-secondary-border: #364650;
  --qc-print-frame: #10171b;
}

/* =========================================================
   Graphite (almost no colour)
   ========================================================= */
html[data-scheme="graphite"] {
  --o-tint-4: #fafaf9; --o-tint-5: #f1f1ef; --o-tint-6: #fafaf9; --o-th-text: #55575c;
  --et-top: #1b1d21; --et-top-2: #141518; --et-on-top: #ececea;
  --o-brand: #1b1d21; --o-brand-dark: #000000;
  --o-text: #1b1d21; --o-muted: #686a70;
  --o-accent: #1b1d21; --o-accent-dark: #000000; --o-accent-deep: #000000; --o-accent-rgb: 27, 29, 33;
  --o-peach: #9a9ca1; --o-peach-rgb: 150, 150, 145;
  --o-beige: #f1f1ef; --o-beige-rgb: 241, 241, 239;
  --o-paper: #f9f9f8; --o-paper-rgb: 249, 249, 248;
  --o-tint: #f3f3f1; --o-tint-2: #f7f7f5; --o-tint-3: #f6f6f4;
  --o-bg: #f6f6f4; --o-panel: #ffffff; --o-sidebar: #ffffff;
  --o-border: #e3e3e0; --o-input-border: #d2d2ce; --o-hover: #f3f3f1;
  --qc-accent: #1b1d21; --qc-accent-dark: #000000; --qc-accent-soft: rgba(27, 29, 33, 0.08);
  --qc-border: #e3e3e0; --qc-border-strong: #cfcfcb;
  --qc-page: #f6f6f4; --qc-toolbar: #fafaf9; --qc-panel: #ffffff;
  --qc-muted: #686a70; --qc-text: #1b1d21;
  --qc-head: #f5f5f3; --qc-zebra: #fafaf9; --qc-hover: #f3f3f1;
  --qc-readonly-bg: #f1f1ef; --qc-readonly-text: #1b1d21;
}
html[data-scheme="graphite"][data-theme="dark"] {
  --o-tint-4: #1c1d20; --o-tint-5: #222327; --o-tint-6: #1c1d20; --o-th-text: #c9cbcf;
  --et-top: #141518; --et-top-2: #0f1012; --et-on-top: #ececea; --et-on-accent: #111214;
  --o-brand: #ececea; --o-brand-dark: #bdbfc3;
  --o-text: #ececea; --o-muted: #9b9da2;
  --o-accent: #f1f1ee; --o-accent-dark: #ffffff; --o-accent-deep: #d9d9d6; --o-accent-rgb: 241, 241, 238;
  --o-peach: #8a8c90; --o-peach-rgb: 90, 92, 96;
  --o-beige: #222327; --o-beige-rgb: 34, 35, 39;
  --o-paper: #1c1d20; --o-paper-rgb: 28, 29, 32;
  --o-tint: #222327; --o-tint-2: #1c1d20; --o-tint-3: #131416;
  --o-bg: #101113; --o-panel: #18191c; --o-sidebar: #141518;
  --o-border: #2a2c30; --o-input-border: #3a3c41; --o-hover: rgba(255, 255, 255, 0.06);
  --qc-accent: #f1f1ee; --qc-accent-dark: #ffffff; --qc-accent-soft: rgba(255, 255, 255, 0.10);
  --qc-border: #2a2c30; --qc-border-strong: #3a3c41;
  --qc-page: #101113; --qc-toolbar: #18191c; --qc-panel: #18191c;
  --qc-muted: #9b9da2; --qc-text: #ececea;
  --qc-head: #1c1d20; --qc-zebra: #141518; --qc-hover: rgba(255, 255, 255, 0.06);
  --qc-input-bg: #131416; --qc-surface-soft: #1f2023; --qc-line-soft: #2a2c30; --qc-row-line: #232427;
  --qc-th-text: #c9cbcf; --qc-readonly-bg: #1f2023; --qc-readonly-text: #d7d8db;
  --qc-btn-secondary-bg: #18191c; --qc-btn-secondary-hover: #1f2023; --qc-btn-secondary-border: #3a3c41;
  --qc-print-frame: #101113;
}

/* =========================================================
   Classic — intentionally empty: original odoo.css / workbench values.
   ========================================================= */

/* ---------- Config screen: Appearance section (admin only) ---------- */
.et-appear {
  margin: 1rem 0 0.5rem;
  padding: 1rem 1.1rem 0.9rem;
  border: 1px solid var(--qc-border, var(--o-border));
  border-radius: 10px;
  background: var(--qc-panel, var(--o-panel));
  display: grid;
  gap: 0.9rem;
}
.et-appear-head { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-start; justify-content: space-between; }
.et-appear-head h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--o-text); }
.et-appear-head p { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--o-muted); max-width: 62ch; }
.et-appear-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.et-appear-group legend { padding: 0; margin-bottom: 0.45rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--o-muted); }
.et-appear-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.6rem; }
.et-appear-card {
  position: relative; display: grid; gap: 0.45rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--qc-border, var(--o-border)); border-radius: 8px;
  background: var(--qc-panel, var(--o-panel)); cursor: pointer;
}
.et-appear-card:hover { border-color: var(--qc-border-strong, var(--o-input-border)); }
.et-appear-card input { position: absolute; opacity: 0; pointer-events: none; }
.et-appear-card:has(input:checked) { border-color: var(--o-accent); box-shadow: inset 0 0 0 1px var(--o-accent); }
.et-appear-card:has(input:focus-visible) { outline: 2px solid var(--o-accent); outline-offset: 2px; }
.et-appear-swatches { display: flex; height: 1.4rem; border-radius: 5px; overflow: hidden; border: 1px solid var(--qc-border, var(--o-border)); }
.et-appear-swatches i { flex: 1; }
.et-appear-swatches i:first-child { flex: 1.6; }
.et-appear-name { font-size: 0.84rem; font-weight: 600; color: var(--o-text); }
.et-appear-name em { font-style: normal; font-weight: 500; font-size: 0.7rem; color: var(--o-muted); margin-left: 0.25rem; }
.et-appear-sample { font-size: 0.95rem; color: var(--o-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-appear-status { margin: 0; min-height: 1.2em; font-size: 0.82rem; color: var(--o-muted); }
.et-appear-status.is-ok { color: #157347; }
.et-appear-status.is-error { color: #c42b2b; }
html[data-theme="dark"] .et-appear-status.is-ok { color: #4ccf8a; }
html[data-theme="dark"] .et-appear-status.is-error { color: #ff7b7b; }

/* ---------- User menu: admin colour scheme / typeface picker ---------- */
.et-menu-appear { display: grid; gap: 0.35rem; padding: 0.45rem 0.75rem 0.55rem; }
.et-menu-appear-label { font-size: 0.7rem; font-weight: 600; color: var(--o-muted); }
.et-menu-appear-label em { font-style: normal; font-weight: 500; opacity: 0.8; margin-left: 0.2rem; }
.et-menu-swatches { display: flex; gap: 0.4rem; flex-wrap: nowrap; margin-bottom: 0.2rem; }
.et-menu-swatch {
  flex: none; width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--sw-top) 0 52%, var(--sw-accent) 52% 100%);
}
.et-menu-swatch:hover { transform: scale(1.08); }
.et-menu-swatch[aria-checked="true"] { outline: 2px solid var(--o-accent); outline-offset: 2px; }
.et-menu-swatch:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 2px; }
.et-menu-fonts { display: flex; gap: 0.25rem; flex-wrap: nowrap; }
.et-menu-font {
  flex: none; padding: 0.15rem 0.4rem; border-radius: 6px; cursor: pointer; font-size: 0.74rem;
  border: 1px solid var(--o-border); background: transparent; color: var(--o-text);
}
.et-menu-font:hover { border-color: var(--o-accent); }
.et-menu-font[aria-checked="true"] { border-color: var(--o-accent); background: rgba(var(--o-accent-rgb), 0.1); font-weight: 600; }
.et-menu-appear-status { min-height: 1em; font-size: 0.7rem; color: var(--o-muted); }
.et-menu-appear-status.is-ok { color: #157347; }
.et-menu-appear-status.is-error { color: #c42b2b; }
html[data-theme="dark"] .et-menu-appear-status.is-ok { color: #4ccf8a; }
html[data-theme="dark"] .et-menu-appear-status.is-error { color: #ff7b7b; }
@media (prefers-reduced-motion: reduce) { .et-menu-swatch:hover { transform: none; } }