/* BEMO DX mockups — component library drawn after Odoo 18 with the BEMO theme (custom_theme_bemo + bemo_sidebar).
   Rule R24: anything here must look like what the standard view really renders. Hand-drawn parts carry a .lv tag. */
:root {
  --navy: #0c3255; --navy-2: #0b2b4a; --navy-3: #164673; --navy-hi: #1d5590;
  --link: #1a5fd0; --ink: #1f2a37; --ink-2: #5b6876; --ink-3: #8a96a3;
  --line: #d8dde4; --line-2: #e9edf2; --bg: #eef2f6; --card: #fff;
  --ok: #1f9d55; --ok-bg: #dcf3e5; --warn: #b26b00; --warn-bg: #fdecc8; --bad: #c93737; --bad-bg: #fde2e2;
  --info-bg: #e3eefb; --info: #164a7a; --muted-bg: #e7eaee;
  --note: #e5007e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font: 14px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); }
b, strong { font-weight: 600; }
a { color: var(--link); text-decoration: none; }
.nw { white-space: nowrap; }
.right { text-align: right; }
.muted { color: var(--ink-2); }
.small { font-size: 12.5px; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============ shell (built by shell.js) ============ */
.shell { display: grid; grid-template-columns: 236px 1fr; grid-template-rows: 46px 1fr; height: 100vh; }
.shell.norail { grid-template-columns: 1fr; }
.nav { grid-column: 1 / -1; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 0; }
.nav .brand { width: 236px; height: 46px; display: flex; align-items: center; gap: 8px; padding-left: 16px; background: var(--navy-2); font-weight: 700; font-size: 17px; }
.shell.norail .nav .brand { width: auto; background: none; }
.nav .brand i { width: 24px; height: 15px; border: 2.5px solid #fff; border-radius: 10px 10px 5px 5px; }
.nav .brand small { display: block; font-size: 10.5px; font-weight: 500; opacity: .75; line-height: 1.1; }
.nav .crumb-app { font-size: 15px; opacity: .95; }
.nav .tray { display: flex; align-items: center; gap: 16px; font-size: 13.5px; }
.nav .tray .ti { position: relative; display: flex; opacity: .95; }
.nav .tray .ti .ico { width: 19px; height: 19px; }
.nav .tray .ti em { position: absolute; top: -7px; right: -9px; font: 700 10.5px/16px sans-serif; font-style: normal; background: #1e6fe0; border-radius: 8px; padding: 0 5px; }
.nav .tray .ti.rv em { background: #d9822b; }
.nav .co { white-space: nowrap; }
.nav .co.short { font-weight: 700; }
.nav .me .av { width: 28px; height: 28px; font-size: 13px; }
.rail { background: var(--navy-2); color: #c9d8e8; padding: 10px 10px 60px; position: relative; overflow: hidden; }
.rail h6 { font-size: 10.5px; letter-spacing: .9px; color: #7f9cbc; margin: 14px 8px 6px; font-weight: 700; }
.rail a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: #d7e3f0; margin-bottom: 2px; }
.rail a .ico { width: 17px; height: 17px; opacity: .85; }
.rail a.on { background: var(--navy-hi); color: #fff; font-weight: 600; }
.rail a em { margin-left: auto; font-style: normal; background: rgba(255,255,255,.16); border-radius: 9px; padding: 0 7px; font-size: 11.5px; }
.rail .sub a { padding: 6px 10px 6px 24px; font-size: 12.5px; }
.rail .sub a .ico { width: 15px; height: 15px; }
.rail a.ext::after { content: "↗"; margin-left: auto; opacity: .6; }
.rail .foot { position: absolute; left: 10px; right: 10px; bottom: 10px; border-top: 1px solid #23476d; padding-top: 8px; }
.content { overflow: hidden; position: relative; display: flex; flex-direction: column; min-width: 0; }
/* embedded in the prototype: no header, the page scrolls; G-03 drops its own copy of the menu */
.embed .shell { grid-template-rows: 1fr; }
.embed .content { overflow: auto; }
.embed .full { grid-template-columns: 1fr; }
.embed .full > .rail { display: none; }

/* ============ control panel ============ */
.cp { background: #fff; border-bottom: 1px solid var(--line); padding: 8px 16px; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.cp .crumbs { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cp .crumbs a { font-size: 12.5px; }
.cp .crumbs .t { font-size: 17px; font-weight: 600; white-space: nowrap; }
.cp .crumbs .t .gear { font-size: 13px; color: var(--ink-2); margin-left: 4px; }
.sbox { flex: 1; max-width: 560px; min-width: 380px; display: flex; align-items: center; gap: 6px; border: 1px solid #9aa6b5; border-radius: 4px; background: #fff; padding: 4px 6px; font-size: 13px; margin: 0 auto; }
.sbox .ico { color: var(--ink-2); }
.facet { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 3px; overflow: hidden; font-size: 12.5px; background: #edf1f6; }
.facet b { background: var(--navy); color: #fff; padding: 1px 6px; font-weight: 600; font-size: 11px; }
.facet span { padding: 1px 6px; }
.facet i { font-style: normal; color: var(--ink-3); padding-right: 6px; }
.sbox .ph { color: #9aa6b5; flex: 1; white-space: nowrap; overflow: hidden; }
.sbox .dd { border-left: 1px solid var(--line); padding-left: 8px; color: var(--ink-2); }
.pager { font-size: 13px; color: var(--ink-2); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.pager span.b { background: var(--muted-bg); border-radius: 3px; padding: 2px 8px; color: var(--ink); }
.views { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.views span { padding: 4px 9px; font-size: 12px; background: #fff; border-right: 1px solid var(--line); color: var(--ink-2); }
.views span:last-child { border-right: 0; }
.views span.on { background: #dde8f6; color: var(--navy); font-weight: 600; }
.ddmenu { position: absolute; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(16,40,70,.16); border-radius: 4px; font-size: 13px; padding: 8px 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 190px); }
.ddmenu > div { padding: 0 14px; border-right: 1px solid var(--line-2); }
.ddmenu > div:last-child { border-right: 0; }
.ddmenu h5 { font-size: 12px; color: var(--ink-2); margin: 2px 0 6px; }
.ddmenu p { padding: 3px 0; }
.ddmenu p.on::before { content: "✓ "; color: var(--navy); font-weight: 700; }

/* ============ buttons, badges, avatars ============ */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: var(--muted-bg); color: var(--ink); border-radius: 4px; padding: 5px 11px; font: 500 13px/1.4 inherit; white-space: nowrap; }
.btn.p { background: var(--navy); color: #fff; }
.btn.s { background: #fff; border-color: var(--line); }
.btn.lk { background: none; color: var(--link); padding: 2px 4px; }
.btn.lg { padding: 10px 16px; font-size: 15px; }
.badge { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--muted-bg); color: var(--ink-2); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }
.av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; color: #fff; font-weight: 700; font-size: 11.5px; vertical-align: middle; flex: none; }
.av.md { width: 28px; height: 28px; font-size: 13px; }
.av.lg { width: 64px; height: 64px; font-size: 26px; border-radius: 6px; }
.who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tag { display: inline-block; border-radius: 10px; padding: 0 8px; font-size: 11.5px; border: 1px solid var(--line); color: var(--ink-2); }

/* ============ list view ============ */
.lv-wrap { display: flex; flex: 1; min-height: 0; }
.lst { flex: 1; overflow: hidden; background: #fff; }
table.l { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
table.l th { background: var(--navy); color: #fff; text-align: left; font-weight: 600; padding: 8px 10px; white-space: nowrap; }
table.l th.r, table.l td.r { text-align: right; }
table.l th.s::after { content: " ⇅"; opacity: .45; font-size: 11px; }
table.l th.s.on::after { content: " ▼"; opacity: 1; }
table.l td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.l td.wrap { white-space: normal; }
table.l td.cb, table.l th.cb { width: 34px; text-align: center; }
table.l tr.grp td { background: #f4f6f9; font-weight: 600; }
table.l tr.sel td { background: #e8f0fb; }
table.l tr.danger td { color: var(--bad); }
table.l tr.warning td { color: var(--warn); }
table.l tr.muted td { color: var(--ink-3); }
table.l tr.sum td { font-weight: 600; background: #fafbfc; }
.cbx { display: inline-block; width: 14px; height: 14px; border: 1px solid #9aa6b5; border-radius: 3px; vertical-align: middle; background: #fff; }
.cbx.on { background: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 3px var(--navy); position: relative; }
.cbx.on::after { content: "✓"; color: #fff; font-size: 11px; position: absolute; left: 1px; top: -3px; }
.selbar { display: flex; align-items: center; gap: 8px; }
.selbar .cnt { background: #dde8f6; color: var(--navy); border-radius: 4px; padding: 4px 10px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.spanel { width: 220px; flex: none; padding: 10px; border-right: 1px solid var(--line); background: #fff; font-size: 13px; overflow: hidden; }
.spanel h4 { font-size: 11px; color: var(--ink-2); letter-spacing: .6px; margin: 10px 4px 4px; text-transform: uppercase; }
.spanel h4:first-child { margin-top: 2px; }
.spanel div { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 3px; }
.spanel div.on { background: #dde8f6; font-weight: 600; }
.spanel div em { margin-left: auto; font-style: normal; color: var(--ink-2); font-size: 12px; }
.spanel div.sub { padding-left: 22px; }

/* ============ form view ============ */
.fv { display: grid; grid-template-columns: 1fr 360px; flex: 1; min-height: 0; }
.fv.nochat { grid-template-columns: 1fr; }
.fv .left { overflow: hidden; padding: 0 0 16px; }
.fbar { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.sbar { display: flex; margin-left: auto; }
.sbar span { padding: 5px 14px 5px 18px; font-size: 12.5px; background: var(--muted-bg); color: var(--ink-2); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); margin-left: -3px; white-space: nowrap; }
.sbar span:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.sbar span.on { background: #d4e3f5; color: var(--navy); font-weight: 700; }
.sheet { background: #fff; border: 1px solid var(--line); margin: 12px 16px 0; padding: 14px 22px 18px; position: relative; }
.stats { display: flex; justify-content: flex-end; margin: -14px -22px 12px; border-bottom: 1px solid var(--line-2); }
.stat { display: inline-flex; gap: 8px; align-items: center; border-left: 1px solid var(--line-2); background: #fff; padding: 6px 14px; font-size: 12.5px; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.stat .ico { width: 18px; height: 18px; color: var(--ink-2); }
.stat b { display: block; }
.stat.lk b { color: var(--link); }
.sheet h1 { font-size: 24px; font-weight: 600; margin: 2px 0 10px; }
.sheet .ttl { display: flex; align-items: center; gap: 14px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.fld { display: grid; grid-template-columns: 150px 1fr; padding: 4px 0; font-size: 13px; align-items: baseline; min-height: 28px; }
.fld > span:first-child { color: var(--ink-2); font-weight: 500; }
.fld .in { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.alert { border-radius: 4px; padding: 8px 12px; font-size: 13px; margin: 12px 16px 0; border: 1px solid; }
.alert.info { background: var(--info-bg); border-color: #b9d3ef; color: var(--info); }
.alert.warn { background: #fff4dc; border-color: #f1d08f; color: #7a4d00; }
.alert.bad { background: #fdeaea; border-color: #f2b8b8; color: #8f2020; }
.ntabs { display: flex; border-bottom: 1px solid var(--line); margin: 14px 0 0; font-size: 13px; }
.ntabs span { padding: 7px 14px; color: var(--link); }
.ntabs span.on { color: var(--ink); border: 1px solid var(--line); border-bottom-color: #fff; margin-bottom: -1px; border-radius: 4px 4px 0 0; background: #fff; }
.chatter { background: #fff; border-left: 1px solid var(--line); padding: 12px 14px; font-size: 12.5px; overflow: hidden; }
.chatter .btns { display: flex; gap: 6px; margin-bottom: 10px; }
.chatter .day { text-align: center; color: var(--ink-3); font-size: 11.5px; margin: 8px 0; }
.msg { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 7px 0; }
.msg .av { width: 28px; height: 28px; font-size: 12px; }
.msg .h { display: flex; gap: 6px; align-items: baseline; }
.msg .h small { color: var(--ink-3); }
.msg .trk { color: var(--ink-2); }
.act { background: #f6f8fb; border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; }

/* ============ kanban, calendar, pivot ============ */
.kb { display: flex; gap: 12px; padding: 12px 16px; overflow: hidden; flex: 1; }
.kcol { width: 260px; flex: none; }
.kcol h4 { font-size: 14px; display: flex; justify-content: space-between; margin-bottom: 4px; }
.kcol .prog { height: 4px; background: var(--muted-bg); border-radius: 2px; margin-bottom: 8px; overflow: hidden; display: flex; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; margin-bottom: 8px; font-size: 13px; }
.kcard .f { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.stars { color: #e3a008; letter-spacing: 1px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); font-size: 12px; }
.cal > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 92px; padding: 4px 5px; }
.cal > div.hd { min-height: 0; text-align: center; background: #f6f8fb; font-weight: 600; color: var(--ink-2); }
.cal > div.off { background: #f8f9fb; color: var(--ink-3); }
.cal .d { font-weight: 600; margin-bottom: 3px; }
.ev { border-radius: 3px; padding: 1px 5px; margin-bottom: 2px; font-size: 11.5px; white-space: nowrap; overflow: hidden; color: #fff; }
table.pv { border-collapse: collapse; font-size: 12.5px; background: #fff; }
table.pv th, table.pv td { border: 1px solid var(--line); padding: 5px 8px; white-space: nowrap; }
table.pv th { background: #f4f6f9; font-weight: 600; text-align: left; }
table.pv td { text-align: right; }
table.pv tr.tot td, table.pv td.tot { font-weight: 700; background: #fafbfc; }

/* ============ workspace (hand-drawn, custom level 2) ============ */
.ws { padding: 14px 16px; overflow: hidden; flex: 1; }
.ws-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ws-h h1 { font-size: 20px; font-weight: 600; }
.flow { display: flex; }
.flow .st { flex: 1; background: #fff; border: 1px solid var(--line); padding: 10px 14px 10px 26px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); margin-right: -9px; min-width: 0; }
.flow .st:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 16px; }
.flow .st .k { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.flow .st .v { font-size: 22px; font-weight: 700; line-height: 1.2; }
.flow .st .x { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.flow .st .x.bad { color: var(--bad); font-weight: 600; }
.flow .st.on { background: #e3edf9; }
.tiles { display: grid; gap: 12px; margin: 12px 0; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; }
.tile h3 { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.tile .big { font-size: 24px; font-weight: 700; }
.tile.bad { border-left: 4px solid var(--bad); }
.tile.bad .big { color: var(--bad); }
.tile.warn { border-left: 4px solid #e0a200; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
.panel h3 { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.links a { display: block; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.links h4 { font-size: 11px; color: var(--ink-2); letter-spacing: .6px; margin: 10px 0 2px; text-transform: uppercase; }
.bar { height: 7px; background: var(--muted-bg); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--navy-hi); }

/* ============ mobile (Odoo web client at 390px) ============ */
.phone { width: 390px; min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.phone .mnav { height: 46px; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 14px; font-size: 15px; }
.phone .mbody { flex: 1; padding: 12px; overflow: hidden; }
.phone .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--line); height: 58px; font-size: 11px; text-align: center; color: var(--ink-2); }
.phone .tabbar div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.phone .tabbar div.on { color: var(--navy); font-weight: 700; }
.mcard { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.mcard h3 { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

/* ============ annotations ============ */
.m { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--note); color: #fff; font: 700 12px/1 sans-serif; padding: 0 5px; vertical-align: middle; flex: none; }
.std, .lv { display: inline-block; font: 700 10px/1.6 sans-serif; letter-spacing: .3px; border-radius: 3px; padding: 0 5px; white-space: nowrap; vertical-align: middle; }
.std { color: #4d5b6b; background: #eef1f5; border: 1px solid var(--line); }
.lv { color: #fff; }
.lv0 { background: #3f8f5b; } .lv1 { background: #2f6db5; } .lv2 { background: #b26b00; } .lv3 { background: #b83232; }
.notes { position: absolute; left: 0; right: 0; bottom: 0; background: #fffdf5; border-top: 2px solid var(--note); padding: 8px 16px; font-size: 12.5px; display: grid; gap: 4px; z-index: 30; }
.notes div { display: flex; gap: 8px; align-items: baseline; }
.illus { font-size: 11px; color: var(--ink-3); font-style: italic; }
/* wireframe zones (G-01 only) */
.zone { background: repeating-linear-gradient(45deg, #e8ecf2, #e8ecf2 10px, #eef1f5 10px, #eef1f5 20px); border: 1.5px dashed #9aa6b5; border-radius: 8px; display: grid; place-items: center; text-align: center; color: var(--ink-2); font-size: 13px; padding: 10px; }
.zone b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
/* In the prototype the screen looks like the product: design tags (.std standard view, .lv custom level, .illus proposal)
   and how-to text (.guide) stay in renders for reviewers only. */
.embed .std, .embed .lv, .embed .illus, .embed .guide { display: none !important; }
/* Rendered mockups show the screen only: the notes panel and its number markers stay in the source for designers
   and are written up in the result doc instead. */
.notes, .m { display: none !important; }