/* mysolar-ui 0.1.7-draft | Odoo 20.0+e look for Sales, Catalog, Estimator | DO NOT EDIT IN AN APP: change mysolar-ui/src and rebuild */

/* ===== 00-odoo-tokens.css ===== */
/* Odoo 20.0+e (Enterprise) design tokens, read from the live demo (runbot, 2026-10-10) with getComputedStyle.
   Use these names in any software that must "look exactly like Odoo". Values are exact; do not round them.
   Source of every number: docs/odoo-reference/ODOO_DESIGN_SYSTEM.md */
:root {
  /* brand and semantic colours */
  --odoo-primary: #714B67;
  --odoo-primary-hover: #624159;
  --odoo-primary-active-bg: #F1EDF0;
  --odoo-secondary: #495057;
  --odoo-success: #00A945;
  --odoo-info: #17A2B8;
  --odoo-warning: #F59E0B;
  --odoo-danger: #EF4444;
  --odoo-light: #FFFFFF;
  --odoo-dark: #212529;
  --odoo-link: #017E84;
  --odoo-link-hover: #01585C;
  --odoo-action: #017E84;                 /* teal used for active/selected chips, statusbar current step text bg tint below */
  --odoo-teal-tint: #E6F2F3;              /* current statusbar step, active toggle background */
  /* subtle backgrounds (alerts, banners) */
  --odoo-primary-bg-subtle: #E3DBE1;  --odoo-primary-border-subtle: #C6B7C2;  --odoo-primary-text: #2D1E29;
  --odoo-secondary-bg-subtle: #DBDCDD;
  --odoo-success-bg-subtle: #CCEEDA;
  --odoo-info-bg-subtle: #D1ECF1;   --odoo-info-text: rgb(9, 65, 74);
  --odoo-warning-bg-subtle: #FDECCE;
  --odoo-danger-bg-subtle: #FCDADA;
  /* greys (note gray-200 is #E7EBED, not Bootstrap's #E9ECEF) */
  --odoo-gray-100: #F8F9FA;  --odoo-gray-200: #E7EBED;  --odoo-gray-300: #DEE2E6;  --odoo-gray-400: #CED4DA;  --odoo-gray-500: #ADB5BD;
  --odoo-gray-600: #6C757D;  --odoo-gray-700: #495057;  --odoo-gray-800: #343A40;  --odoo-gray-900: #212529;
  /* page */
  --odoo-body-color: #212529;
  --odoo-body-bg: #F8F9FA;
  --odoo-heading-color: #000;
  --odoo-secondary-color: rgba(33, 37, 41, .75);
  --odoo-tertiary-color: rgba(33, 37, 41, .5);
  --odoo-border-color: #DEE2E6;
  --odoo-input-border-color: #E7EBED;
  --odoo-border-width: 1px;
  /* typography */
  --odoo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, "Odoo Unicode Support Noto", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --odoo-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --odoo-fs-base: .875rem;   /* 14px, line-height 1.5 = 21px */
  --odoo-fs-small: .8125rem; /* 13px */
  --odoo-fs-h1: 2.1rem;      /* 33.6px (form title), weight 500 */
  --odoo-fs-h2: 1.3125rem;   /* 21px */
  --odoo-fs-h3: 1.1375rem;   /* 18.2px */
  --odoo-fs-h4: 1.05rem;     /* 16.8px (app name, kanban column title) */
  --odoo-fs-h5: .9625rem;    /* 15.4px (card title, dropdown titles) */
  --odoo-fs-h6: .875rem;
  /* radii */
  --odoo-radius: .375rem;     /* 6px: buttons, inputs, menu items, alerts */
  --odoo-radius-sm: .25rem;   /* 4px */
  --odoo-radius-lg: .5rem;    /* 8px: kanban cards, form sheet, statusbar, app icon, dropdown items */
  --odoo-radius-xl: .75rem;   /* 12px: popovers, search panel, app tiles */
  --odoo-radius-pill: 50rem;  /* tags, badges */
  --odoo-radius-switcher: 10px;
  /* shadows */
  --odoo-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
  --odoo-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --odoo-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);
  --odoo-popover-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
  --odoo-focus-ring: 0 0 0 .25rem rgba(1, 126, 132, .5);
  /* layout constants measured in the demo */
  --odoo-navbar-h: 46px;
  --odoo-cp-padding: 8px 16px 16px;
  --odoo-cp-gap: 16px;
  --odoo-btn-h: 32.3px;       /* 5px 10px padding, 14px/21px, weight 500 */
  --odoo-searchbox-h: 36.5px;
  --odoo-list-row-h: 40px;
  --odoo-list-head-h: 39.7px;
  --odoo-kanban-col-w: 332px;
  --odoo-kanban-card-w: 300px;
  --odoo-sheet-padding: 24px;
  --odoo-gutter: 32px;
  /* breakpoints (Bootstrap): sm 576, md 768, lg 992 (Odoo desktop layout starts here), xl 1200, xxl 1400 */
}

/* ===== 01-tokens-extra.css ===== */
/* MySolar UI: token extensions on top of the verbatim Odoo tokens (00-odoo-tokens.css).
   Every value comes from the /odoo reference (COLORS_AND_MEANINGS.md, catalog/COMPONENTS.md).
   Values marked "ours" are NOT captured by the reference; they are the nearest sensible choice and are listed in README.md. */
:root {
  /* soft badge = colour at 15% alpha + text (Odoo exact; AA-safe set below) */
  --odoo-badge-primary-bg: rgba(113, 75, 103, .15);   --odoo-badge-primary-text: rgb(113, 75, 103);
  --odoo-badge-secondary-bg: rgba(73, 80, 87, .15);   --odoo-badge-secondary-text: rgb(73, 80, 87);
  --odoo-badge-success-bg: rgba(0, 169, 69, .15);     --odoo-badge-success-text: #006B17;   /* Odoo exact rgb(0,136,24): <html data-contrast="odoo"> */
  --odoo-badge-info-bg: rgba(23, 162, 184, .15);      --odoo-badge-info-text: #016483;      /* Odoo exact rgb(1,128,165) */
  --odoo-badge-warning-bg: rgba(245, 158, 11, .15);   --odoo-badge-warning-text: #7A5401;   /* Odoo exact rgb(154,107,1) */
  --odoo-badge-danger-bg: rgba(239, 68, 68, .15);     --odoo-badge-danger-text: #A92F2B;    /* Odoo exact rgb(210,63,58) */
  --odoo-badge-grey-bg: #DEE2E6;                      --odoo-badge-grey-text: #000;
  /* alert text on the subtle backgrounds */
  --odoo-success-alert-text: #0A3622;   /* ours (Bootstrap 5.3 emphasis) */
  --odoo-warning-alert-text: rgb(98, 63, 4);
  --odoo-danger-alert-text: #601B1B;
  /* misc measured values */
  --odoo-danger-text: #D23F3A;
  --odoo-focus-border: #68A9AF;           /* search box and input focus border */
  --odoo-hover-bg: #E7EBED;               /* menu item / pill hover (gray-200) */
  --odoo-row-hover: #F8F9FA;              /* list row hover (ours: gray-100) */
  --odoo-row-selected: #E6F2F3;           /* selected row (ours: teal tint) */
  --odoo-star: #F3CC00;
  --odoo-backdrop: rgba(0, 0, 0, .25);
  --odoo-toast-shadow: 0 16px 48px rgba(0, 0, 0, .176);
  --odoo-kanban-progress-h: 12.8px;       /* 12.8 in To-do/Sales, 8 in the CRM master: one line to change */
  --odoo-btn-sm-h: 27px;
  --odoo-input-h: 32.3px;
  /* 12 tag colours: background / text / border (o_tag_color_0 to 11) */
  --odoo-tag-0-bg: #D7D7D7;  --odoo-tag-0-text: #3D3D3D;  --odoo-tag-0-border: #8F8F8F;
  --odoo-tag-1-bg: #FEDBD5;  --odoo-tag-1-text: #6B1F15;  --odoo-tag-1-border: #D76A58;
  --odoo-tag-2-bg: #FEDEC5;  --odoo-tag-2-text: #5C3003;  --odoo-tag-2-border: #CC7724;
  --odoo-tag-3-bg: #F4DC9D;  --odoo-tag-3-text: #4C3B04;  --odoo-tag-3-border: #C09910;
  --odoo-tag-4-bg: #C2ECFE;  --odoo-tag-4-text: #044457;  --odoo-tag-4-border: #179DC5;
  --odoo-tag-5-bg: #EBCAF6;  --odoo-tag-5-text: #542662;  --odoo-tag-5-border: #B271C6;
  --odoo-tag-6-bg: #F2E1D4;  --odoo-tag-6-text: #4D3827;  --odoo-tag-6-border: #AF8563;
  --odoo-tag-7-bg: #AEF4EE;  --odoo-tag-7-text: #034744;  --odoo-tag-7-border: #17A49D;
  --odoo-tag-8-bg: #C3D9FE;  --odoo-tag-8-text: #193A76;  --odoo-tag-8-border: #5D8EE4;
  --odoo-tag-9-bg: #FEC5D9;  --odoo-tag-9-text: #671D3F;  --odoo-tag-9-border: #D06792;
  --odoo-tag-10-bg: #BAE5BD; --odoo-tag-10-text: #044B18; --odoo-tag-10-border: #4CA65A;
  --odoo-tag-11-bg: #E4E1FE; --odoo-tag-11-text: #3E2F72; --odoo-tag-11-border: #8F7EDE;
  /* kanban card stripe colours (o_kanban_color_1 to 11) */
  --odoo-kc-1: #EE2D2D;  --odoo-kc-2: #DC8534;  --odoo-kc-3: #E8BB1D;  --odoo-kc-4: #5794DD;
  --odoo-kc-5: #9F628F;  --odoo-kc-6: #DB8865;  --odoo-kc-7: #41A9A2;  --odoo-kc-8: #304BE0;
  --odoo-kc-9: #EE2F8A;  --odoo-kc-10: #61C36E; --odoo-kc-11: #9872E6;
  /* chart palette (light): four shades per hue; series take them in this order */
  --odoo-chart-1: #4EA7F2;  --odoo-chart-2: #3188E6;  --odoo-chart-3: #056BD9;  --odoo-chart-4: #155193;
  --odoo-chart-5: #A76DBC;  --odoo-chart-6: #7F4295;  --odoo-chart-7: #6D2387;  --odoo-chart-8: #4F1565;
  --odoo-chart-9: #EA6175;  --odoo-chart-10: #CE4257; --odoo-chart-11: #982738; --odoo-chart-12: #791B29;
  --odoo-chart-13: #43C5B1; --odoo-chart-14: #00A78D;
  --odoo-chart-other: #D3D3D3;   --odoo-chart-sum: #343A40;   --odoo-chart-bar-border: rgba(249, 250, 251, .2);
  /* spreadsheet-dashboard scorecards (reference 09-dashboards, section 4): 210 x 97, radius 6, the one measured card shadow */
  --odoo-dash-title: #01666B;  --odoo-dash-muted: #666666;  --odoo-dash-pos: #00A04A;  --odoo-dash-neg: #D44C59;  --odoo-dash-grid: #CCCCCC;
  --odoo-dash-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
  /* spacing scale (multiples of 4 px) */
  --odoo-space-1: 4px;  --odoo-space-2: 8px;  --odoo-space-3: 12px; --odoo-space-4: 16px;
  --odoo-space-5: 20px; --odoo-space-6: 24px; --odoo-space-8: 32px; --odoo-space-12: 48px;
  /* stacking (Bootstrap order; toast manager 1055 and search dropdown 1070 are measured) */
  --odoo-z-dropdown: 1000; --odoo-z-sticky: 1020; --odoo-z-backdrop: 1050; --odoo-z-modal: 1055;
  --odoo-z-notification: 1055; --odoo-z-popover: 1070; --odoo-z-tooltip: 1080;
  /* motion (ours: Bootstrap's .15 s) */
  --odoo-ease: .15s ease-in-out;
  --odoo-icon: 16px;
}
/* Default text colours for badges/status are AA-safe on the 15% fill over white, #F8F9FA, the teal tint and #E7EBED (4.8 or better; computed with WCAG 2.x; the skill's older set #007A16/#017394/#8E6201/#B93733 was only 3.9-4.5 on tinted rows).
   Pixel-clone mode: <html data-contrast="odoo"> restores the exact Odoo text colours. */
:root[data-contrast="odoo"] {
  --odoo-badge-success-text: rgb(0, 136, 24);
  --odoo-badge-info-text: rgb(1, 128, 165);
  --odoo-badge-warning-text: rgb(154, 107, 1);
  --odoo-badge-danger-text: rgb(210, 63, 58);
}

/* ===== 10-base.css ===== */
/* Base: reset, body, typography, links, focus, utilities. Reference: ODOO_DESIGN_SYSTEM.md section 2. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--odoo-body-bg); color: var(--odoo-body-color);
  font: 400 var(--odoo-fs-base) / 1.5 var(--odoo-font); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; color: var(--odoo-heading-color); font-weight: 500; line-height: 1.2; }
h1 { font-size: var(--odoo-fs-h1); line-height: 40.32px; }
h2 { font-size: var(--odoo-fs-h2); line-height: 25.2px; }
h3 { font-size: var(--odoo-fs-h3); line-height: 27.3px; }
h4 { font-size: var(--odoo-fs-h4); line-height: 25.2px; }
h5 { font-size: var(--odoo-fs-h5); line-height: 23.1px; }
h6 { font-size: var(--odoo-fs-h6); line-height: 21px; }
p { margin: 0 0 1rem; }
small, .small { font-size: var(--odoo-fs-small); line-height: 19.5px; }
a { color: var(--odoo-link); text-decoration: none; }
a:hover { color: var(--odoo-link-hover); text-decoration: underline; }
b, strong { font-weight: 700; }
hr { margin: var(--odoo-space-4) 0; border: 0; border-top: 1px solid var(--odoo-border-color); }
img, svg { max-width: 100%; vertical-align: middle; }
code, kbd, pre, samp { font-family: var(--odoo-font-mono); }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
:focus-visible { outline: 0; box-shadow: var(--odoo-focus-ring); }
::placeholder { color: rgba(73, 80, 87, .76); opacity: 1; }
[hidden] { display: none !important; }

/* icons: apps supply inline SVG; this only sizes and colours them */
.o_ico { width: var(--odoo-icon); height: var(--odoo-icon); flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* utilities (small set on purpose) */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-end { text-align: right; } .text-center { text-align: center; } .text-start { text-align: left; }
.fw-normal { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-bold { font-weight: 700; }
.text-muted { color: rgba(73, 80, 87, .76); }
.text-secondary-color { color: var(--odoo-secondary-color); }
.text-primary { color: var(--odoo-primary); } .text-action { color: var(--odoo-link); }
.text-success { color: var(--odoo-badge-success-text); } .text-info { color: var(--odoo-badge-info-text); }
.text-warning { color: var(--odoo-badge-warning-text); } .text-danger { color: var(--odoo-badge-danger-text); }
.o_nowrap { white-space: nowrap; }
.o_money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.noprint { }

/* ===== 20-chrome.css ===== */
/* Chrome: navbar, systray, dropdowns, control panel, breadcrumb, search, switcher, pager, search panel, home menu.
   Reference: ODOO_DESIGN_SYSTEM.md section 4; COMPONENTS.md N1 to N16. */

/* ---- navbar: 46 px, transparent on the page background ---- */
.o_main_navbar {
  display: flex; align-items: center; height: var(--odoo-navbar-h); padding: 10px 0;
  background: transparent; color: var(--odoo-body-color); position: relative; z-index: var(--odoo-z-sticky);
}
.o_menu_toggle, .o_nav_entry, .o_navbar_btn {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; border: 0; border-radius: var(--odoo-radius);
  background: transparent; color: var(--odoo-body-color); font-size: 14px; line-height: 21px; white-space: nowrap;
  transition: background-color var(--odoo-ease);
}
.o_menu_toggle { margin: 0 1px 0 16px; padding: 0 8px; font-size: var(--odoo-fs-h4); font-weight: 500; color: var(--odoo-heading-color); }
.o_nav_entry, .o_navbar_btn { margin: 0 1px; padding: 0 8px; }
.o_menu_toggle:hover, .o_nav_entry:hover, .o_navbar_btn:hover { background: var(--odoo-hover-bg); color: var(--odoo-body-color); text-decoration: none; }
.o_nav_entry.active, .o_nav_entry.show, .o_nav_entry[aria-current="page"], .o_nav_entry[aria-selected="true"], .o_menu_toggle.show { background: var(--odoo-hover-bg); }
.o_menu_sections { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.o_menu_systray { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-right: 12px; }
.o_menu_systray > * { position: relative; }
.o_user_menu_btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px; margin: -5px 0; border: 0; border-radius: var(--odoo-radius); background: transparent; font-size: 14px; }
.o_user_menu_btn:hover { background: var(--odoo-hover-bg); }
.o_counter {
  position: absolute; top: -4px; right: -2px; min-width: 16px; padding: 2px 4px; border-radius: var(--odoo-radius-pill);
  background: var(--odoo-danger); color: #fff; font-size: 9.8px; line-height: 12px; font-weight: 500; text-align: center;
}

/* ---- dropdown / popover menus ---- */
.dropdown, .o_dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: var(--odoo-z-popover); display: none; min-width: 160px; margin: 4px 0; padding: 4px;
  background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-xl); box-shadow: var(--odoo-popover-shadow);
  font-size: 14px; list-style: none; text-align: left;
}
.dropdown-menu.show, .dropdown.show > .dropdown-menu { display: block; }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 27px; padding: 3px 20px; border: 0; border-radius: var(--odoo-radius-lg);
  background: transparent; color: var(--odoo-body-color); font-size: 14px; line-height: 21px; text-align: left; white-space: nowrap; cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--odoo-hover-bg); color: var(--odoo-body-color); text-decoration: none; box-shadow: none; }
.dropdown-item.active, .dropdown-item[aria-checked="true"] { font-weight: 500; }
.dropdown-item.text-danger { color: var(--odoo-badge-danger-text); }
.dropdown-header { padding: 3px 20px; color: rgba(73, 80, 87, .76); font-size: 13px; line-height: 19.5px; }
.dropdown-divider { height: 0; margin: 8px 0; border: 0; border-top: 1px solid var(--odoo-border-color); opacity: .7; }
.dropdown-hint { margin-left: auto; padding-left: 16px; color: rgba(73, 80, 87, .76); font-size: 13px; }

/* company switcher (N6): 320 wide popover, current row on primary-subtle */
.o_switch_company_menu { width: 320px; max-width: calc(100vw - 16px); padding: 4px; overflow: hidden; }
.o_switch_company_item > * { min-width: 0; }
.o_switch_company_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .o_switch_company_menu { position: fixed; top: 52px; left: 8px; right: 8px; width: auto; max-width: none; } }
.o_switch_company_search { display: flex; align-items: center; gap: 8px; padding: 0 0 4px; }
.o_switch_company_items { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.o_switch_company_item { display: flex; align-items: center; gap: 8px; min-height: 33px; padding: 4px 8px; border-radius: var(--odoo-radius-lg); cursor: pointer; }
.o_switch_company_item:hover { background: var(--odoo-hover-bg); }
.o_switch_company_item.is-current { background: var(--odoo-primary-bg-subtle); font-weight: 500; }

/* ---- control panel ---- */
.o_control_panel { display: flex; flex-direction: column; gap: var(--odoo-cp-gap); padding: var(--odoo-cp-padding); background: var(--odoo-body-bg); }
.o_cp_top, .o_cp_bottom { display: flex; align-items: center; gap: var(--odoo-cp-gap); min-width: 0; }
.o_cp_top_left, .o_cp_bottom_left { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.o_cp_top_right, .o_cp_bottom_right { display: flex; align-items: center; gap: var(--odoo-cp-gap); flex: 0 0 auto; }
.o_cp_bottom { justify-content: space-between; }

.o_breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 21px; }
.o_breadcrumb a, .o_breadcrumb .breadcrumb-item > a { font-size: 13px; color: var(--odoo-link); }
.o_breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding-right: 4px; color: rgba(73, 80, 87, .76); }
.o_breadcrumb .o_last_breadcrumb_item { color: var(--odoo-body-color); font-size: 14px; }
.o_btn_circle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.o_btn_circle:hover { background: var(--odoo-hover-bg); }

/* search box: pill, 396 x 36.5, facets inside, toggler on the right */
.o_searchview {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; width: 396px; max-width: 100%; min-height: 36.5px;
  padding: 4px 0 4px 16px; background: #fff; border: 1px solid var(--odoo-gray-400); border-radius: 800px;
}
.o_searchview:focus-within { border-color: var(--odoo-focus-border); }
.o_searchview_icon { flex: none; color: rgba(73, 80, 87, .76); }
.o_searchview_facet {
  display: inline-flex; align-items: stretch; height: 22.3px; overflow: hidden; border: 1px solid transparent; border-radius: var(--odoo-radius);
  background: var(--odoo-gray-100); font-size: 13px; line-height: 20px;
}
.o_searchview_facet_label { display: inline-flex; align-items: center; padding: 0 6px; background: var(--odoo-primary-bg-subtle); color: var(--odoo-primary); }
.o_searchview_facet.is-groupby .o_searchview_facet_label { background: var(--odoo-teal-tint); color: var(--odoo-link); }
.o_searchview_facet_value { display: inline-flex; align-items: center; padding: 0 4px 0 8px; }
.o_searchview_facet_remove { display: inline-flex; align-items: center; padding: 0 6px; border: 0; background: transparent; color: rgba(73, 80, 87, .76); }
.o_searchview_input { flex: 1 1 60px; min-width: 60px; height: 23px; border: 0; outline: 0; background: transparent; font-size: 14px; }
.o_searchview_dropdown_toggler { align-self: stretch; display: inline-flex; align-items: center; padding: 0 16px 0 8px; border: 0; border-radius: 0 800px 800px 0; background: transparent; color: rgba(73, 80, 87, .76); }
.o_searchview_dropdown_toggler:hover { color: var(--odoo-body-color); }

/* filters / group by / favourites popover (N11) */
.o_search_bar_menu { display: flex; width: 611px; max-width: calc(100vw - 32px); margin: 8px 0 4px; padding: 0; overflow: hidden; }
.o_search_bar_menu > section { flex: 1 1 200px; width: 200px; padding: 16px; border-right: 1px solid var(--odoo-border-color); }
.o_search_bar_menu > section:last-child { border-right: 0; }
.o_search_bar_menu h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--odoo-fs-h5); line-height: 18.48px; font-weight: 500; }
.o_search_bar_menu .o_menu_item { display: flex; align-items: center; gap: 8px; min-height: 27px; padding: 3px 20px; border-radius: var(--odoo-radius-lg); cursor: pointer; }
.o_search_bar_menu .o_menu_item:hover { background: var(--odoo-hover-bg); }
.o_search_bar_menu .o_menu_item.selected { font-weight: 500; }

/* view switcher and pager (N14) */
.o_cp_switch_buttons { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-switcher); }
.o_switch_view { display: inline-flex; align-items: center; justify-content: center; width: 31.3px; height: 26.3px; padding: 2px 6px; border: 0; border-radius: var(--odoo-radius); background: transparent; color: var(--odoo-body-color); font-weight: 500; }
.o_switch_view:hover { background: var(--odoo-hover-bg); }
.o_switch_view.active { background: var(--odoo-gray-300); }
.o_pager { display: inline-flex; align-items: center; gap: 8px; }
.o_pager_value { font-size: 13px; font-weight: 500; white-space: nowrap; }
.o_pager_btns { display: inline-flex; }
.o_pager_btn { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 35.7px; padding: 5px 10px; border: 1px solid var(--odoo-gray-400); background: #fff; color: var(--odoo-body-color); }
.o_pager_btn:first-child { border-radius: var(--odoo-radius) 0 0 var(--odoo-radius); }
.o_pager_btn:last-child { margin-left: -1px; border-radius: 0 var(--odoo-radius) var(--odoo-radius) 0; }
.o_pager_btn:hover { background: var(--odoo-hover-bg); }
.o_pager_btn:disabled { opacity: .5; cursor: default; }

/* left search panel (N12) */
.o_search_panel { flex: 0 0 220px; width: 220px; padding: 0 0 48px 16px; overflow-y: auto; }
.o_search_panel_section_header { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 4px; font-size: 14px; font-weight: 500; text-transform: uppercase; }
.o_search_panel_value { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--odoo-gray-800); cursor: pointer; }
.o_search_panel_value:hover { background: var(--odoo-hover-bg); }
.o_search_panel_value.active { background: var(--odoo-teal-tint); font-weight: 500; }
.o_search_panel_counter { margin-left: auto; color: rgba(73, 80, 87, .76); font-size: 13px; font-weight: 700; }

/* ---- home menu / app launcher (N2) ---- */
.o_home_menu { padding: 0 16px; }
.o_apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 850px; max-width: 100%; margin: 24px auto 0; }
.o_app { display: flex; flex-direction: column; align-items: center; min-height: 115px; margin-bottom: 16px; padding: 8px; border: 0; border-radius: var(--odoo-radius-xl); background: transparent; color: var(--odoo-body-color); text-align: center; }
.o_app:hover { text-decoration: none; background: rgba(0, 0, 0, .03); color: var(--odoo-body-color); }
.o_app_icon {
  display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; padding: 10px; border-radius: var(--odoo-radius-lg); background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .075), 0 1px 1px -.5px rgba(42, 51, 70, .03), 0 2px 2px -1px rgba(42, 51, 70, .04), 0 3px 3px -1.5px rgba(42, 51, 70, .04),
    0 5px 5px -2.5px rgba(42, 51, 70, .03), 0 10px 10px -5px rgba(42, 51, 70, .03), 0 24px 24px -8px rgba(42, 51, 70, .03);
}
.o_app_icon img, .o_app_icon svg { width: 100%; height: 100%; }
.o_caption { width: 100%; margin-top: 8px; font-size: 14px; line-height: 21px; font-weight: 500; }
.o_home_banner { margin: 24px auto 16px; }
@media (min-width: 768px) { .o_apps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ===== 30-components.css ===== */
/* Components: buttons, inputs, checks, badges, tags, status, alerts, toast, tooltip, dialog, empty/loading, progress, avatar, stars, ribbon, kbd, info button.
   Reference: ODOO_DESIGN_SYSTEM.md section 4; COMPONENTS.md F2, F8, F10, F12, D1, B1 to B10. */

/* ---- buttons: 14/21 weight 500, padding 5 10, radius 6 (height 32.3 on a 1.5 dpr screen) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border: 1px solid transparent; border-radius: var(--odoo-radius);
  background: transparent; color: var(--odoo-body-color); font-size: 14px; line-height: 21px; font-weight: 500; text-align: center; white-space: nowrap; vertical-align: middle;
  cursor: pointer; user-select: none; transition: background-color var(--odoo-ease), border-color var(--odoo-ease), color var(--odoo-ease);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .65; pointer-events: none; }
.btn-primary { background: var(--odoo-primary); border-color: var(--odoo-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--odoo-primary-hover); border-color: var(--odoo-primary-hover); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--odoo-gray-400); color: var(--odoo-body-color); }
.btn-secondary:hover { background: var(--odoo-hover-bg); border-color: var(--odoo-gray-400); color: var(--odoo-body-color); }
.btn-outline-primary { background: transparent; border-color: var(--odoo-primary); color: var(--odoo-primary); }
.btn-outline-primary:hover { background: var(--odoo-primary); color: #fff; }
.btn-light { background: var(--odoo-gray-100); border-color: var(--odoo-gray-100); color: var(--odoo-body-color); }
.btn-light:hover { background: var(--odoo-hover-bg); border-color: var(--odoo-hover-bg); }
.btn-danger { background: var(--odoo-danger); border-color: var(--odoo-danger); color: #fff; }
.btn-danger:hover { background: #DC2626; border-color: #DC2626; color: #fff; }
.btn-success { background: var(--odoo-success); border-color: var(--odoo-success); color: #fff; }
.btn-outline-success { background: transparent; border-color: var(--odoo-success); color: var(--odoo-success); }
.btn-link { padding-left: 0; padding-right: 0; border-color: transparent; background: transparent; color: var(--odoo-link); }
.btn-link:hover { color: var(--odoo-link-hover); text-decoration: underline; }
.btn-sm { padding: 3px 8px; border-radius: 4px; font-size: 13px; line-height: 19.5px; }
.btn-group { display: inline-flex; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-close { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--odoo-radius); background: transparent; opacity: .5; font-size: 20px; line-height: 1; }
.btn-close:hover { opacity: .85; background: var(--odoo-hover-bg); }
.btn-close::before { content: "\00d7"; }

/* ---- form controls ---- */
.form-label, .o_form_label { display: block; margin: 0 0 8px; color: var(--odoo-heading-color); font-size: 14px; line-height: 21px; font-weight: 500; }
.form-control, .form-select {
  display: block; width: 100%; padding: 5px 10px; background: #fff; border: 1px solid var(--odoo-gray-400); border-radius: var(--odoo-radius);
  color: var(--odoo-body-color); font-size: 14px; line-height: 21px; transition: border-color var(--odoo-ease), box-shadow var(--odoo-ease);
}
.form-control:focus, .form-select:focus { border-color: var(--odoo-focus-border); box-shadow: var(--odoo-focus-ring); outline: 0; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--odoo-gray-100); }
.form-select { padding-right: 30px; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px; }
textarea.form-control { min-height: 52px; resize: vertical; }
.form-text, .form-help { margin-top: 4px; color: rgba(73, 80, 87, .76); font-size: 13px; line-height: 19.5px; }
/* flat form-view input: no box, thin line that shows on hover and focus */
.o_input { display: block; width: 100%; height: 23.7px; padding: 1px 16px 1px 0; border: 1px solid var(--odoo-input-border-color); border-width: 0 0 1px; border-radius: 0; background: transparent; font-size: 14px; line-height: 21px; }
.o_input[readonly], .o_input:disabled { border-bottom-color: transparent; }   /* editable fields show their line (users could not find the fields otherwise); read-only ones do not */
.o_input:hover:not([readonly]):not(:disabled) { border-bottom-color: var(--odoo-gray-400); }
.o_input:focus { outline: 0; box-shadow: none; border-bottom-color: var(--odoo-link); }
/* invalid state (our rule, UX_PATTERNS.md: the reference has no invalid capture) */
.is-invalid, .o_field_invalid .o_input, .o_field_invalid .form-control { border-color: var(--odoo-danger); }
.invalid-feedback, .o_field_error { display: block; margin-top: 4px; color: var(--odoo-danger-text); font-size: 13px; line-height: 19.5px; }
.o_required::after, .o_required_mark { content: " *"; color: var(--odoo-danger-text); }

.form-check-input {
  flex: none; width: 14px; height: 14px; margin: 0; appearance: none; background: #fff center / 100% no-repeat; border: 1px solid var(--odoo-gray-500); border-radius: 3.5px; vertical-align: middle; cursor: pointer;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--odoo-link); border-color: var(--odoo-link); }
.form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.form-check-input:disabled { opacity: .5; cursor: default; }
.form-check { display: flex; align-items: center; gap: 8px; min-height: 21px; }
.form-switch .form-check-input { width: 28px; height: 14px; border-radius: 14px; background-color: var(--odoo-gray-400); border-color: var(--odoo-gray-400); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-position: left center; background-size: auto 100%; transition: background-position var(--odoo-ease); }
.form-switch .form-check-input:checked { background-color: var(--odoo-success); border-color: var(--odoo-success); background-position: right center; }

/* ---- badges (soft pill: colour at 15% + dark text) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9.84px; border-radius: var(--odoo-radius-pill); background: var(--odoo-badge-secondary-bg); color: var(--odoo-badge-secondary-text);
  font-size: 12px; line-height: 14px; font-weight: 500; white-space: nowrap; vertical-align: middle;
}
.badge-primary, .text-bg-primary { background: var(--odoo-badge-primary-bg); color: var(--odoo-badge-primary-text); }
.badge-secondary, .text-bg-secondary { background: var(--odoo-badge-secondary-bg); color: var(--odoo-badge-secondary-text); }
.badge-success, .text-bg-success { background: var(--odoo-badge-success-bg); color: var(--odoo-badge-success-text); }
.badge-info, .text-bg-info { background: var(--odoo-badge-info-bg); color: var(--odoo-badge-info-text); }
.badge-warning, .text-bg-warning { background: var(--odoo-badge-warning-bg); color: var(--odoo-badge-warning-text); }
.badge-danger, .text-bg-danger { background: var(--odoo-badge-danger-bg); color: var(--odoo-badge-danger-text); }
.badge-grey, .text-bg-300 { background: var(--odoo-badge-grey-bg); color: var(--odoo-badge-grey-text); }
.badge-sm { padding: 2.5px 8.2px; font-size: 10px; line-height: 11.66px; font-weight: 600; }
.badge-solid-primary { background: var(--odoo-primary); color: #fff; } .badge-solid-success { background: var(--odoo-success); color: #fff; }
.badge-solid-danger { background: var(--odoo-danger); color: #fff; } .badge-solid-info { background: var(--odoo-info); color: #fff; }
.badge-solid-warning { background: var(--odoo-warning); color: #000; }

/* ---- tags (12-colour palette): light tint, dark text, mid border ---- */
.o_tag {
  display: inline-flex; align-items: center; gap: 4px; min-height: 23.3px; padding: 3px 9.84px; border: 1px solid var(--odoo-tag-0-border); border-radius: 800px;
  background: var(--odoo-tag-0-bg); color: var(--odoo-tag-0-text); font-size: 12px; line-height: 14px; font-weight: 500; white-space: nowrap;
}
.o_tag_sm { min-height: 18px; padding: 2.5px 8.2px; font-size: 10px; line-height: 11.66px; font-weight: 600; }
.o_tag .o_delete { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; opacity: .75; color: inherit; }
.o_tag_color_0 { --_bg: var(--odoo-tag-0-bg); --_tx: var(--odoo-tag-0-text); --_bd: var(--odoo-tag-0-border); }
.o_tag_color_1 { --_bg: var(--odoo-tag-1-bg); --_tx: var(--odoo-tag-1-text); --_bd: var(--odoo-tag-1-border); }
.o_tag_color_2 { --_bg: var(--odoo-tag-2-bg); --_tx: var(--odoo-tag-2-text); --_bd: var(--odoo-tag-2-border); }
.o_tag_color_3 { --_bg: var(--odoo-tag-3-bg); --_tx: var(--odoo-tag-3-text); --_bd: var(--odoo-tag-3-border); }
.o_tag_color_4 { --_bg: var(--odoo-tag-4-bg); --_tx: var(--odoo-tag-4-text); --_bd: var(--odoo-tag-4-border); }
.o_tag_color_5 { --_bg: var(--odoo-tag-5-bg); --_tx: var(--odoo-tag-5-text); --_bd: var(--odoo-tag-5-border); }
.o_tag_color_6 { --_bg: var(--odoo-tag-6-bg); --_tx: var(--odoo-tag-6-text); --_bd: var(--odoo-tag-6-border); }
.o_tag_color_7 { --_bg: var(--odoo-tag-7-bg); --_tx: var(--odoo-tag-7-text); --_bd: var(--odoo-tag-7-border); }
.o_tag_color_8 { --_bg: var(--odoo-tag-8-bg); --_tx: var(--odoo-tag-8-text); --_bd: var(--odoo-tag-8-border); }
.o_tag_color_9 { --_bg: var(--odoo-tag-9-bg); --_tx: var(--odoo-tag-9-text); --_bd: var(--odoo-tag-9-border); }
.o_tag_color_10 { --_bg: var(--odoo-tag-10-bg); --_tx: var(--odoo-tag-10-text); --_bd: var(--odoo-tag-10-border); }
.o_tag_color_11 { --_bg: var(--odoo-tag-11-bg); --_tx: var(--odoo-tag-11-text); --_bd: var(--odoo-tag-11-border); }
.o_tag[class*="o_tag_color_"] { background: var(--_bg); color: var(--_tx); border-color: var(--_bd); }

/* ---- status dots ---- */
.o_status { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--odoo-gray-200); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset; vertical-align: middle; }
.o_status_green { background: var(--odoo-success); } .o_status_orange { background: var(--odoo-warning); } .o_status_red { background: var(--odoo-danger); }

/* ---- alerts and banners ---- */
.alert { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 16px; border: 0; border-radius: var(--odoo-radius); font-size: 14px; line-height: 21px; }
.alert-info { background: var(--odoo-info-bg-subtle); color: var(--odoo-info-text); }
.alert-success { background: var(--odoo-success-bg-subtle); color: var(--odoo-success-alert-text); }
.alert-warning { background: var(--odoo-warning-bg-subtle); color: var(--odoo-warning-alert-text); }
.alert-danger { background: var(--odoo-danger-bg-subtle); color: var(--odoo-danger-alert-text); }
.alert-primary { background: var(--odoo-primary-bg-subtle); color: var(--odoo-primary-text); }
.alert-banner { justify-content: center; padding: 16px; text-align: center; }
.alert .btn-link { margin-left: auto; padding: 0; }

/* ---- notifications / toasts (B1): 288 wide, top right under the navbar ---- */
.o_notification_manager { position: fixed; top: 52.9px; right: 16px; z-index: var(--odoo-z-notification); min-width: 288px; width: max-content; max-width: min(600px, calc(100vw - 32px)); }
.o_notification { position: relative; display: flex; margin-bottom: 8px; overflow: hidden; border-radius: var(--odoo-radius); background: #fff; box-shadow: var(--odoo-toast-shadow); }
.o_notification_bar { flex: none; width: 7.9px; background: var(--odoo-info); border-radius: 6px 0 0 6px; }
.o_notification_bar.is-success { background: var(--odoo-success); } .o_notification_bar.is-warning { background: var(--odoo-warning); } .o_notification_bar.is-danger { background: var(--odoo-danger); }
.o_notification_body { display: flex; flex: 1 1 auto; align-items: flex-start; min-width: 0; padding: 8px 0 8px 8px; border: 1px solid var(--odoo-border-color); border-left: 0; border-radius: 0 6px 6px 0; }
.o_notification_content { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 21px; }
.o_notification_close { margin: 0 4px; width: 21px; height: 21px; font-size: 16px; }
.o_notification_progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--odoo-info); opacity: .75; transform-origin: left; animation: o_toast_timer var(--o-toast-ms, 5s) linear forwards; }
.o_notification:hover .o_notification_progress { animation-play-state: paused; }
@keyframes o_toast_timer { to { transform: scaleX(0); } }

/* ---- tooltip and (i) info button ---- */
.o_tooltip { position: absolute; z-index: var(--odoo-z-tooltip); max-width: 280px; padding: 4px 8px; border-radius: var(--odoo-radius); background: #000; color: #fff; font-size: 13px; line-height: 19.5px; opacity: .9; pointer-events: none; }
.o_info_btn { position: relative; contain: layout; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 1px solid var(--odoo-badge-info-text); border-radius: 50%; background: transparent; color: var(--odoo-badge-info-text); font: italic 700 12px / 1 var(--odoo-font-mono); vertical-align: middle; }
.o_info_btn::before { content: "i"; }
.o_info_btn::after { content: ""; position: absolute; inset: -10px; }   /* 40 px hit area */
.o_info_btn:hover { background: var(--odoo-info-bg-subtle); }
.o_info_btn:focus-visible { outline: 0; box-shadow: var(--odoo-focus-ring); }
@media (max-width: 767.98px) { .o_info_btn { width: 24px; height: 24px; } }
.o_info_pop { position: absolute; z-index: var(--odoo-z-popover); max-width: 320px; padding: 8px 12px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); box-shadow: var(--odoo-popover-shadow); font-size: 13px; line-height: 19.5px; }

/* ---- dialogs (D1) ---- */
.modal { position: fixed; inset: 0; z-index: var(--odoo-z-modal); display: none; overflow-y: auto; padding: 16px; }
.modal.show { display: block; }
.modal-backdrop { position: fixed; inset: 0; z-index: var(--odoo-z-backdrop); background: var(--odoo-backdrop); }
.modal-dialog { display: flex; align-items: center; width: 100%; max-width: 500px; min-height: calc(100% - 32px); margin: 16px auto; }
.modal-sm { max-width: 320px; } .modal-md { max-width: 620px; } .modal-lg { max-width: 980px; } .modal-xl { max-width: 980px; }
.modal-content { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 32px); background: #fff; border: 1px solid rgba(0, 0, 0, .176); border-radius: var(--odoo-radius-lg); box-shadow: var(--odoo-popover-shadow); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; border-bottom: 1px solid var(--odoo-border-color); }
.modal-title { margin: 0; font-size: var(--odoo-fs-h3); line-height: 27.3px; font-weight: 500; color: #000; }
.modal-body { flex: 1 1 auto; padding: 16px; overflow-y: auto; }
.modal-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 15.5px; border-top: 1px solid var(--odoo-border-color); }
.modal-footer .btn-primary { order: -1; }   /* primary first */
.o_error_dialog .modal-body { padding: 12px 24px; }

/* ---- empty and loading states (B9, B10) ---- */
.o_view_nocontent { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 800px; margin: 64px auto; padding: 15px; text-align: center; }
.o_view_nocontent.is-boxed { max-width: 480px; padding: 32px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }
.o_view_nocontent_title { margin: 0 0 16px; color: #000; font-size: 20.125px; line-height: 30.19px; font-weight: 700; }
.o_nocontent_help { margin: 0; font-size: 16.1px; line-height: 24.15px; }
.o_loading { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: 800px; box-shadow: var(--odoo-popover-shadow); }
.o_spinner { width: 16px; height: 16px; border: 2px solid var(--odoo-gray-300); border-top-color: var(--odoo-primary); border-radius: 50%; animation: o_spin .7s linear infinite; }
@keyframes o_spin { to { transform: rotate(360deg); } }
.o_skeleton { height: 40px; border-bottom: 1px solid var(--odoo-border-color); background: linear-gradient(90deg, var(--odoo-gray-100), #fff 50%, var(--odoo-gray-100)); background-size: 200% 100%; animation: o_shimmer 1.2s linear infinite; }
@keyframes o_shimmer { to { background-position: -200% 0; } }

/* ---- progress ---- */
.progress { display: flex; height: 12.8px; overflow: hidden; border-radius: 4px; background: var(--odoo-gray-300); }
.progress-bar { background: var(--odoo-primary); transition: width var(--odoo-ease); }
.progress-bar.bg-success { background: var(--odoo-success); } .progress-bar.bg-warning { background: var(--odoo-warning); }
.progress-bar.bg-danger { background: var(--odoo-danger); } .progress-bar.bg-300 { background: var(--odoo-gray-400); }
.o_column_progress { height: var(--odoo-kanban-progress-h); width: 75%; }

/* ---- avatar, stars, ribbon, kbd ---- */
.o_avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: var(--odoo-radius); background: var(--odoo-primary); color: #fff; font-size: 12px; font-weight: 500; vertical-align: middle; }
.o_avatar img { width: 100%; height: 100%; object-fit: cover; }
.o_avatar_21 { width: 21px; height: 21px; } .o_avatar_22 { width: 22px; height: 22px; } .o_avatar_28 { width: 28px; height: 28px; } .o_avatar_32 { width: 32px; height: 32px; border-radius: var(--odoo-radius-lg); }
.o_avatar_36 { width: 36px; height: 36px; } .o_avatar_42 { width: 42px; height: 42px; border-radius: var(--odoo-radius-lg); } .o_avatar_48 { width: 48px; height: 48px; }
.o_avatar_round { border-radius: 50%; }
.o_priority_star { display: inline-flex; width: 17.5px; height: 17.5px; color: rgba(73, 80, 87, .76); opacity: .25; cursor: pointer; }
.o_priority_star.filled { color: var(--odoo-star); opacity: 1; }
.o_ribbon { position: absolute; top: 0; right: 0; width: 104px; height: 84px; overflow: hidden; pointer-events: none; }
.o_ribbon span { position: absolute; top: -32.5px; right: -55.07px; width: 147.07px; background: var(--odoo-success) linear-gradient(145deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)); color: #fff; font-size: 13px; line-height: 26px; font-weight: 700; text-align: center; text-transform: uppercase; transform: rotate(45deg); }
kbd, .o_kbd { display: inline-block; padding: 4px 16px; border: 1px solid var(--odoo-input-border-color); border-radius: 4px; background: var(--odoo-gray-100); color: var(--odoo-gray-700); font: 13px / 19.5px var(--odoo-font); box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 -1px 1px 1px rgba(231, 235, 237, .8), inset 0 2px 0 rgba(255, 255, 255, .8); }
.o_icon_btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--odoo-radius); background: transparent; color: var(--odoo-link); }
.o_icon_btn:hover { background: var(--odoo-hover-bg); }
.o_icon_btn.text-danger { color: var(--odoo-badge-danger-text); }
.o_kbd_sm { padding: 1px 6px; font-size: 12px; line-height: 16px; }
.o_kebab { display: inline-flex; align-items: center; justify-content: center; width: 31.3px; height: 32.3px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--odoo-gray-100); }
.o_kebab:hover { background: var(--odoo-hover-bg); }

/* ===== 40-views.css ===== */
/* Views: list, kanban, form (sheet, statusbar, smart buttons, notebook, groups, chatter), cards, KPI strips.
   Reference: ODOO_DESIGN_SYSTEM.md sections 5 to 7; VIEWS_AND_CHARTS.md 3.1 to 3.4; COMPONENTS.md F1 to F26. */

/* ================= list view ================= */
.o_list_renderer { background: #fff; width: 100%; overflow-x: auto; }
.o_list_table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 21px; }
.o_list_table thead th {
  height: 39.7px; padding: 8px 4.8px; background: #fff; color: var(--odoo-gray-700); font-weight: 400; text-align: left; white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--odoo-border-color); position: sticky; top: 0; z-index: 1;
}
.o_list_table thead th:first-child, .o_list_table tbody td:first-child { padding-left: 16px; }
.o_list_table thead th.o_list_number_th, .o_list_number { text-align: right; }
.o_list_table thead th.o_column_sortable { cursor: pointer; user-select: none; }
.o_list_table thead th.o_column_sortable:hover { color: var(--odoo-body-color); }
.o_list_table thead th .o_sort { margin-left: 4px; opacity: .6; }
.o_list_table tbody tr { height: 40px; }
.o_list_table tbody td { padding: 8px 4.8px; border-bottom: 1px solid var(--odoo-border-color); vertical-align: middle; }
.o_list_table tbody tr:hover { background: var(--odoo-row-hover); }
.o_list_table tbody tr.o_selected_row, .o_list_table tbody tr.o_data_row.is-selected { background: var(--odoo-row-selected); }
.o_list_table tbody tr.text-info td { color: var(--odoo-badge-info-text); }
.o_list_table .o_list_record_selector { width: 40.7px; padding: 8px 4px 8px 16px; }
.o_list_table .o_data_cell.fw-bold, .o_list_table .o_data_cell_ref { font-weight: 500; }
.o_list_table tfoot td { height: 37.3px; padding: 8px 4.8px; font-weight: 500; color: #000; }
.o_group_header td { height: 40px; padding: 5px 4.8px 5px 16px; font-weight: 500; color: #000; background: #fff; cursor: pointer; }
.o_group_header .o_group_count { margin-left: 4px; font-weight: 400; color: rgba(73, 80, 87, .76); }
.o_list_actions_header { width: 32px; position: sticky; right: 0; }
.o_list_row_actions { display: inline-flex; gap: 12px; }
.o_list_row_actions a, .o_list_row_actions button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--odoo-link); font-weight: 500; }

/* ================= kanban ================= */
.o_kanban_renderer { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 16px 16px; }
.o_kanban_renderer.o_kanban_grouped { flex-wrap: nowrap; gap: 0; padding: 0; overflow-x: auto; align-items: flex-start; }
.o_kanban_group { flex: 0 0 var(--odoo-kanban-col-w); width: var(--odoo-kanban-col-w); padding: 0 16px 16px; }
.o_kanban_header { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin: 0 -16px; padding: 8px 16px; background: var(--odoo-body-bg); }
.o_kanban_header_title { display: flex; align-items: center; gap: 8px; font-size: var(--odoo-fs-h4); line-height: 25.2px; font-weight: 500; }
.o_kanban_counter { margin-left: auto; font-size: 14px; font-weight: 500; }
.o_kanban_record {
  position: relative; display: block; width: 100%; padding: 10px 14px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg);
  font-size: 13px; line-height: 19.5px; color: var(--odoo-body-color); box-shadow: none;
}
.o_kanban_ungrouped .o_kanban_record { flex: 1 1 300px; width: auto; max-width: 100%; }
.o_kanban_group .o_kanban_record { border-radius: 0; margin: 1px 0 -1px; }
.o_kanban_group .o_kanban_record:first-of-type { border-radius: 8px 8px 0 0; }
.o_kanban_group .o_kanban_record:last-of-type { border-radius: 0 0 8px 8px; }
.o_kanban_group .o_kanban_record:only-of-type { border-radius: 8px; }
.o_kanban_record_title { margin: 0; font-size: var(--odoo-fs-h5); line-height: 23.1px; font-weight: 500; color: #000; }
.o_kanban_record_amount { margin-left: auto; font-weight: 700; }
.o_kanban_record_bottom { display: flex; align-items: center; gap: 8px; min-height: 28px; padding-top: 4px; }
.o_kanban_record_bottom .o_kanban_right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.o_kanban_tags { display: flex; flex-wrap: wrap; gap: 4px; }
.o_kanban_record .o_kebab { position: absolute; top: 0; right: 0; display: none; }
.o_kanban_record:hover .o_kebab { display: inline-flex; }
.o_kanban_record[class*="o_kanban_color_"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--_kc); }
.o_kanban_color_1 { --_kc: var(--odoo-kc-1); } .o_kanban_color_2 { --_kc: var(--odoo-kc-2); } .o_kanban_color_3 { --_kc: var(--odoo-kc-3); }
.o_kanban_color_4 { --_kc: var(--odoo-kc-4); } .o_kanban_color_5 { --_kc: var(--odoo-kc-5); } .o_kanban_color_6 { --_kc: var(--odoo-kc-6); }
.o_kanban_color_7 { --_kc: var(--odoo-kc-7); } .o_kanban_color_8 { --_kc: var(--odoo-kc-8); } .o_kanban_color_9 { --_kc: var(--odoo-kc-9); }
.o_kanban_color_10 { --_kc: var(--odoo-kc-10); } .o_kanban_color_11 { --_kc: var(--odoo-kc-11); }
.o_kanban_add_column { flex: 0 0 47px; padding: 8px; }

/* ================= form view ================= */
.o_form_view { display: flex; flex-direction: column; min-width: 0; }
.o_form_statusbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 8px; background: var(--odoo-body-bg); }
.o_statusbar_buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.o_statusbar_status { display: inline-flex; align-items: center; height: 32.3px; padding: 2px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }
.o_arrow_button {
  position: relative; display: inline-flex; align-items: center; height: 27px; margin-left: -12.2px; padding: 3px 18.05px; border: 0; background: transparent;
  color: rgba(73, 80, 87, .76); font-size: 14px; line-height: 21px; font-weight: 500; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.o_arrow_button:first-child { margin-left: 0; padding-left: 12px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
.o_arrow_button:hover { color: var(--odoo-body-color); background: var(--odoo-gray-100); }
.o_arrow_button_current, .o_arrow_button.current { background: var(--odoo-teal-tint); color: #000; }
.o_arrow_button:last-child { padding-right: 14px; }
.o_form_button_box { display: flex; justify-content: flex-end; padding: 0 16px 8px; }
.oe_stat_button { display: inline-flex; align-items: center; gap: 8px; height: 33px; min-width: 105px; margin-left: -1px; padding: 0 10px; background: #fff; border: 1px solid var(--odoo-gray-400); border-radius: 0; color: var(--odoo-body-color); text-align: left; }
.oe_stat_button:first-child { margin-left: 0; border-radius: var(--odoo-radius) 0 0 var(--odoo-radius); }
.oe_stat_button:last-child { border-radius: 0 var(--odoo-radius) var(--odoo-radius) 0; }
.oe_stat_button:only-child { border-radius: var(--odoo-radius); }
.oe_stat_button:hover { background: var(--odoo-hover-bg); }
.oe_stat_button .o_stat_value { display: block; color: var(--odoo-primary); font-size: 12px; line-height: 14px; font-weight: 500; }
.oe_stat_button .o_stat_text { display: block; font-size: 12px; line-height: 14px; font-weight: 400; }
.o_form_sheet_bg { padding: 0 16px 16px; }
.o_form_sheet { background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); padding: var(--odoo-sheet-padding); box-shadow: none; }
.o_form_title { margin: 0 0 16px; font-size: var(--odoo-fs-h1); line-height: 40.32px; font-weight: 500; color: #000; }
.o_form_title input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; }
.o_group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--odoo-gutter); row-gap: 0; margin: 0 0 8px; }
.o_inner_group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 16px; margin: 0 0 8px; align-content: start; }
.o_field_row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.o_field_value a { color: var(--odoo-link); }
.o_horizontal_separator { margin: 24px 0 16px; padding: 0; color: var(--odoo-gray-700); font-size: 13px; line-height: 19.5px; font-weight: 700; text-transform: uppercase; box-shadow: 0 1px 0 #E6E6E6; }

.o_notebook { margin-top: 10px; }
.nav-tabs { display: flex; flex-wrap: wrap; margin: 0 -24px; padding: 0 24px; list-style: none; border-bottom: 1px solid var(--odoo-border-color); }
.nav-link { display: block; white-space: nowrap; padding: 8px 16px; margin-bottom: -1px; border: 1px solid var(--odoo-border-color); border-radius: 6px 6px 0 0; background: var(--odoo-gray-100); color: var(--odoo-body-color); font-size: 14px; line-height: 21px; }   /* inactive tab = grey with hairline (reference F18: POS, Purchase, Payroll) */
.nav-link:hover { color: var(--odoo-body-color); text-decoration: none; background: var(--odoo-hover-bg); }
.nav-link.active { color: var(--odoo-primary); background: #fff; border-color: var(--odoo-primary) var(--odoo-primary) #fff; }
.tab-content > .tab-pane { display: none; padding: 16px 0; }
.tab-content > .tab-pane.active { display: block; }

.oe_subtotal_footer { width: 237px; margin: 16px 0 0 auto; }
.oe_subtotal_footer .row { display: flex; justify-content: space-between; padding: 2px 0; }
.oe_subtotal_footer .o_total { padding-top: 8px; border-top: 1px solid var(--odoo-border-color); font-weight: 700; color: #000; }
.o_add_line a { color: var(--odoo-link); margin-right: 16px; }

/* ---- chatter ---- */
.o_chatter { background: var(--odoo-body-bg); padding: 16px; }
.o_chatter_topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 16px; }
.o_chatter_date { position: relative; margin: 16px 0 8px; text-align: center; color: rgba(73, 80, 87, .76); font-size: 12px; }
.o_message { display: flex; gap: 8px; margin-bottom: 16px; }
.o_message_author { font-weight: 700; }
.o_message_time { color: rgba(73, 80, 87, .76); font-size: 11px; }

/* ---- generic card, KPI strip ---- */
.o_card { background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); padding: 16px; box-shadow: none; }
.o_card_title { margin: 0 0 8px; font-size: var(--odoo-fs-h5); line-height: 23.1px; font-weight: 500; color: #000; }
.o_kpi_strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; padding: 0 16px 16px; }
.o_kpi { padding: 16px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); }
.o_kpi_label { color: var(--odoo-gray-700); font-size: 13px; line-height: 19.5px; }
.o_kpi_value { font-size: var(--odoo-fs-h2); line-height: 25.2px; font-weight: 500; color: #000; }
.o_kpi_delta.up { color: var(--odoo-badge-success-text); } .o_kpi_delta.down { color: var(--odoo-badge-danger-text); }

/* dashboard scorecards and chart titles (Odoo spreadsheet dashboards): title 12/700 teal, value 30 centred, baseline 11 grey */
.o_scorecard_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.o_scorecard { display: flex; flex-direction: column; justify-content: space-between; min-height: 97px; padding: 12px 16px; background: #fff; border-radius: var(--odoo-radius); box-shadow: var(--odoo-dash-shadow); }
.o_scorecard_label { margin: 0; color: var(--odoo-dash-title); font-size: 12px; line-height: 18px; font-weight: 700; text-align: left; }
.o_scorecard_value { color: #000; font-size: 30px; line-height: 36px; font-weight: 400; text-align: center; font-variant-numeric: tabular-nums; }
.o_scorecard_value.is-pos { color: var(--odoo-dash-pos); } .o_scorecard_value.is-neg { color: var(--odoo-dash-neg); }
.o_scorecard_sub, .o_chart_note { color: var(--odoo-dash-muted); font-size: 11px; line-height: 16px; text-align: center; }
.o_chart_note { text-align: left; }
.o_dash_title { margin: 0 0 8px; padding-bottom: 8px; color: var(--odoo-dash-title); font-size: 20px; line-height: 30px; font-weight: 700; border-bottom: 1px solid var(--odoo-dash-grid); }

/* settings rows */
.o_setting_box { display: flex; gap: 16px; padding: 8px 16px; }
.o_setting_box .o_setting_left { flex: none; }
.o_setting_box .o_setting_right { flex: 1 1 auto; }

/* page body helper: control panel above, content below */
.o_action_manager { display: flex; flex-direction: column; min-height: calc(100vh - var(--odoo-navbar-h)); }
.o_content { flex: 1 1 auto; min-width: 0; }
.o_content_card { margin: 0 16px 16px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); overflow: hidden; }

/* ===== 50-auth.css ===== */
/* Auth screens: sign in, change password, reset. The reference has no login capture; this is our single rule for all three apps:
   page = body grey, card 400 wide, 8 px radius, 1 px border, no shadow, one purple button. */
.o_auth { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; background: var(--odoo-body-bg); color: var(--odoo-body-color); }
.o_auth_card { width: 100%; max-width: 400px; padding: 32px; background: #fff; border: 1px solid var(--odoo-border-color); border-radius: var(--odoo-radius-lg); box-shadow: none; }
.o_auth_brand { margin: 0 0 24px; text-align: center; }
.o_auth_logo { display: block; max-width: 240px; max-height: 56px; margin: 0 auto 8px; }
.o_auth_app { margin: 0; color: #000; font-size: var(--odoo-fs-h2); line-height: 25.2px; font-weight: 500; }
.o_auth_sub { margin: 4px 0 0; color: rgba(73, 80, 87, .76); font-size: 13px; line-height: 19.5px; }
.o_auth_title { margin: 0 0 16px; color: #000; font-size: var(--odoo-fs-h3); line-height: 27.3px; font-weight: 500; text-align: center; }
.o_auth_field { margin: 0 0 16px; }
.o_auth_pass { position: relative; }
.o_auth_pass .form-control { padding-right: 40px; }
.o_auth_eye { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 100%; border: 0; background: transparent; color: rgba(73, 80, 87, .76); }
.o_auth .btn-primary { width: 100%; }
.o_auth_links { margin: 16px 0 0; text-align: center; font-size: 13px; line-height: 19.5px; }
.o_auth_foot { margin: 24px 0 0; text-align: center; color: rgba(73, 80, 87, .76); font-size: 13px; line-height: 19.5px; }
.o_auth_foot b { color: var(--odoo-primary); font-weight: 500; }
.o_auth .alert { margin-bottom: 16px; }

/* ===== 60-print.css ===== */
/* Print: A4 portrait, exact colours, chrome hidden, header = company, period, printed time, user. */
.o_print_header { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .o_main_navbar, .o_control_panel, .o_notification_manager, .modal-backdrop, .o_info_btn, .o_kebab, .o_chatter_topbar, .noprint { display: none; }
  .o_print_header { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--odoo-border-color); font-size: 12px; }
  .o_form_sheet, .o_content_card, .o_card, .o_kpi { border-color: var(--odoo-border-color); box-shadow: none; }
  .o_form_sheet { border: 0; padding: 0; }
  .o_list_table thead { display: table-header-group; }
  .o_list_table thead th { position: static; }
  .o_list_table tr, .o_card, .o_kanban_record { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ===== 70-responsive.css ===== */
/* Responsive: Odoo switches to its small UI below 992 px. Breakpoints used everywhere: 576 / 768 / 992 / 1200 / 1400. */
@media (max-width: 991.98px) {
  .o_menu_sections { flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }   /* only the section links scroll; the navbar itself stays visible so dropdowns are never clipped */
  .o_menu_sections::-webkit-scrollbar { display: none; }
  .o_cp_top { flex-wrap: wrap; }
  .o_cp_top_right { flex: 1 1 100%; flex-wrap: wrap; }
  .o_searchview { flex: 1 1 100%; width: auto; }
  .o_cp_bottom { flex-wrap: wrap; }
  .o_form_sheet { padding: 16px; }
  .o_group { grid-template-columns: minmax(0, 1fr); }
  .nav-tabs { margin: 0 -16px; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; }
  .o_form_statusbar { flex-wrap: wrap; }
  .o_form_button_box { justify-content: flex-start; flex-wrap: wrap; }
  .o_search_panel { display: none; }
  .o_kanban_group { flex-basis: 85vw; width: 85vw; }
  .o_kanban_renderer.o_kanban_grouped { scroll-snap-type: x proximity; }
  .o_kanban_group { scroll-snap-align: start; }
  .modal-dialog { margin: 8px auto; }
  .oe_subtotal_footer { width: 100%; }
}
@media (max-width: 767.98px) {
  .o_search_bar_menu { flex-direction: column; width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; }
  .o_search_bar_menu > section { width: auto; border-right: 0; border-bottom: 1px solid var(--odoo-border-color); }
  .o_kpi_strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .o_auth_card { padding: 24px 16px; }
  .o_notification_manager { left: 16px; width: auto; }
  .o_kpi_strip { grid-template-columns: minmax(0, 1fr); }
}
/* touch targets: 40 px on coarse pointers (owner rule) */
@media (pointer: coarse) {
  .btn, .form-control, .form-select, .nav-link, .dropdown-item, .o_nav_entry, .o_switch_view, .o_pager_btn { min-height: 40px; }
  .o_info_btn { width: 24px; height: 24px; }
  .form-check-input { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }