/* HooWoo Odoo-like layout: shell (home grid, navbar with app menus, control panel, search options). Loaded after app.css. */
:root[data-layout="odoo"] {
  --o-bg: #ffffff; --o-panel: #ffffff; --o-line: #d8dadd; --o-text: #374151; --o-muted: #6b7280;
  --o-primary: #714b67; --o-primary-hover: #875a7b; --o-link: #017e84;
  --o-success: #28a745; --o-danger: #d23f3a; --o-warning: #f0ad4e; --o-info: #3c91e6;
  --o-pop: #ffffff; --o-pop-line: #d8dadd;
}
:root[data-layout="odoo"][data-theme="dark"] {
  --bg: #1b1d26; --surface: #262a36; --surface-2: #262a36; --line: #3c3e4b;
  --o-bg: #262a36; --o-panel: #1b1d26; --o-line: #3c3e4b; --o-text: #e4e4e4; --o-muted: #9ca3af;
  --o-primary: #6b3e66; --o-primary-hover: #875a7b; --o-link: #02c7b5;
  --o-success: #28a745; --o-danger: #e46f78; --o-warning: #f0ad4e; --o-info: #3c91e6;
  --o-pop: #3c3e4b; --o-pop-line: #5a5e6b;
}
@media (prefers-color-scheme: dark) {
  :root[data-layout="odoo"]:not([data-theme="light"]) {
    --bg: #1b1d26; --surface: #262a36; --surface-2: #262a36; --line: #3c3e4b;
    --o-bg: #262a36; --o-panel: #1b1d26; --o-line: #3c3e4b; --o-text: #e4e4e4; --o-muted: #9ca3af;
    --o-primary: #6b3e66; --o-primary-hover: #875a7b; --o-link: #02c7b5;
    --o-success: #28a745; --o-danger: #e46f78; --o-warning: #f0ad4e; --o-info: #3c91e6;
    --o-pop: #3c3e4b; --o-pop-line: #5a5e6b;
  }
}
:root[data-layout="odoo"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, sans-serif; font-size: 14px; }
:root[data-layout="odoo"] {
  /* navbar: apps grid, the open app and its menus, the systray */
  & .onav { position: sticky; top: 0; z-index: 40; height: 46px; gap: 2px; padding: 0 10px 0 4px; background: var(--o-bg); border: 0; color: var(--o-text); font-size: 14px; }
  & .onav-apps, & .onav-right > .icon-btn, & .onav-right > .pop-wrap > .icon-btn { width: 34px; height: 34px; border: 0; background: none; color: var(--o-text); }
  & .onav-apps:hover, & .onav-apps[aria-expanded="true"], & .onav-link:hover, & .onav-drop[aria-expanded="true"],
  & .onav-right > .icon-btn:hover, & .onav-right > .pop-wrap > .icon-btn:hover, & .sys-find-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--o-text) 12%, transparent); }
  & .onav-app { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px 0 6px; font-size: 16.8px; font-weight: 500; color: var(--o-text); text-decoration: none; white-space: nowrap; }
  & .onav-app-name { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
  & .onav-menu { display: flex; align-items: stretch; height: 100%; min-width: 0; overflow: visible; }
  & .onav-link, & .onav-drop { display: inline-flex; align-items: center; gap: 4px; height: 46px; padding: 0 9px; margin: 0; border: 0; border-radius: 0; background: none; font: inherit; font-size: 14px; color: var(--o-text); text-decoration: none; white-space: nowrap; cursor: pointer; }
  & .onav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--o-link); }
  & .onav-link.off { color: var(--o-muted); opacity: 0.38; cursor: default; }
  & .onav-wrap { display: flex; }
  & .onav .bell-count, & .onav .badge-count { background: var(--o-danger); color: #fff; }
  & .sys-find { display: none; position: absolute; top: 100%; right: 8px; z-index: 50; width: min(380px, 92vw); height: 34px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 4px; background: var(--o-panel); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
  & .sys-find.open { display: flex; }
  & .sys-find input { color: var(--o-text); }

  /* popups in this layout */
  & .pop { background: var(--o-panel); border-color: var(--o-line); color: var(--o-text); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
  & .onav-pop { top: 100%; left: 0; right: auto; min-width: 210px; padding: 6px 0; border-radius: 4px; transform-origin: top left; }
  & .cp-pop { top: calc(100% + 6px); left: 0; right: auto; min-width: 200px; }
  & .flt-pop { top: calc(100% + 6px); left: auto; right: 0; }
  & .onav-pop .pop-item, & .cp-pop .pop-item { padding: 6px 14px; font-size: 14px; border-radius: 0; color: var(--o-text); }
  & .onav-pop .pop-item:hover, & .onav-pop .pop-item:focus-visible, & .cp-pop .pop-item:hover, & .cp-pop .pop-item:focus-visible { background: color-mix(in srgb, var(--o-link) 16%, transparent); }
  & .pop-item.off { color: var(--o-muted); opacity: 0.38; cursor: default; }
  & .pop-item[aria-current="page"] { color: var(--o-link); font-weight: 500; }
  & .cp-opts { top: calc(100% + 6px); left: auto; right: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(660px, 92vw); padding: 16px 0; background: var(--o-pop); border: 1px solid var(--o-pop-line); border-radius: 4px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
  & .opt-col { min-width: 0; }
  & .opt-col + .opt-col { border-left: 1px solid var(--o-pop-line); }
  & .opt-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 3px 20px; font-size: 14px; font-weight: 500; color: var(--o-text); }
  & .opt-head.f { color: #d56bb0; }
  & .opt-head.g { color: #02c7b5; }
  & .opt-head.s { color: #e6b422; }
  & .opt-col > .seg, & .opt-col > .seg-slot, & .opt-col > .date-slot, & .opt-col > .pop-wrap, & .opt-col > .btn { margin: 2px 20px; }
  & .opt-item { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; height: 27px; padding: 3px 20px; border: 0; background: none; color: var(--o-text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
  & .opt-item:hover, & .opt-item:focus-visible { background: color-mix(in srgb, var(--o-link) 18%, transparent); }
  & .opt-item .ic { color: var(--o-muted); }

  /* control panel: New, title with its cog, the search bar with facets, the pager and the views */
  & .top.cp { top: 46px; z-index: 30; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 50px; padding: 8px 16px; background: var(--o-bg); border-bottom: 1px solid var(--o-line); }
  & .top.cp::after { display: none; }
  & .cp-new-slot { display: flex; flex: none; }
  & .cp-new-slot .btn.primary { height: 33px; min-height: 33px; padding: 5px 12px; border-radius: 4px; background: var(--o-primary); border-color: var(--o-primary); color: #fff; font-size: 14px; font-weight: 500; }
  & .cp-new-slot .btn.primary:hover { background: var(--o-primary-hover); border-color: var(--o-primary-hover); }
  & .cp-new-slot .ic { display: none; }
  & .cp-new-slot:empty, & .cp-bar:empty, & .cp-pager:empty, & .cp-views:empty { display: none; }
  & .top-head { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  & .crumbs { display: flex; margin: 0; font-size: 13px; font-weight: 500; }
  & .crumb { color: var(--o-link); font-size: 13px; font-weight: 500; }
  & .crumb::after { content: "/"; margin: 0 6px; color: var(--o-muted); }
  & .crumb:last-child::after { content: none; }
  & .top-title { font-size: 16.8px; font-weight: 500; line-height: 1.25; color: var(--o-text); }
  & .top-sub { display: none; }
  & .cp-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
  & .cp-gear { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--o-muted); cursor: pointer; }
  & .cp-gear:hover, & .cp-gear[aria-expanded="true"] { color: var(--o-text); background: color-mix(in srgb, var(--o-text) 12%, transparent); }
  & .cp-bar { flex: 1 1 320px; min-width: 200px; max-width: 640px; display: flex; }
  & .cp-bar > .toolbar { flex: 1 1 auto; min-width: 0; gap: 0; }
  & .cp-srch { position: relative; display: flex; align-items: center; flex: 1 1 auto; gap: 6px; min-width: 0; min-height: 33px; padding: 0 2px 0 10px; border: 1px solid color-mix(in srgb, var(--o-link) 50%, transparent); border-radius: 4px; background: var(--bg); }
  & .cp-srch:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--o-link) 25%, transparent); }
  & .cp-srch > .search { display: contents; }
  & .cp-srch > .search > .ic { order: 0; color: var(--o-muted); }
  & .cp-srch .search-input { order: 2; flex: 1 1 auto; min-width: 60px; height: 31px; color: var(--o-text); }
  & .cp-srch > .flt { order: 3; }
  & .facets { display: flex; flex: none; gap: 4px; order: 1; min-width: 0; overflow: hidden; }
  & .facet { display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 2px 0 6px; border-radius: 4px; background: var(--o-bg); color: var(--o-text); font-size: 13px; white-space: nowrap; }
  & .facet > .ic { color: #b972a6; }
  & .facet-x { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--o-muted); cursor: pointer; }
  & .facet-x:hover { color: var(--o-text); }
  & .flt-btn { width: 28px; min-height: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--o-muted); justify-content: center; }
  & .flt-btn > .ic:first-child, & .flt-btn > span { display: none; }
  & .cp-end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
  & .cp-pg { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--o-text); }
  & .cp-pg .icon-btn { width: 26px; height: 26px; border: 0; background: none; color: var(--o-text); }
  & .cp-pg .icon-btn:disabled { opacity: 0.35; }
  & .cp-count { padding: 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  & .cp-views-grp { display: inline-flex; border: 1px solid var(--o-line); border-radius: 4px; overflow: hidden; }
  & .cp-view { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-right: 1px solid var(--o-line); background: var(--o-bg); color: var(--o-muted); cursor: pointer; text-decoration: none; }
  & .cp-view:last-child { border-right: 0; }
  & .cp-view:hover { color: var(--o-text); }
  & .cp-view.on { color: var(--o-text); background: color-mix(in srgb, var(--o-link) 22%, var(--o-bg)); box-shadow: inset 0 0 0 1px var(--o-link); }
  & .cp-view.off { opacity: 0.38; cursor: default; }

  /* the shortcut bar shows only when this page has shortcuts; totals and state counts fold under the list */
  & .shortcut-bar { padding: 6px 16px; background: var(--o-bg); border-bottom: 1px solid var(--o-line); }
  & .shortcut-bar:not(:has(.sc-list .sc)) { display: none; }
  & .cp-under { margin-top: 12px; border: 1px solid var(--o-line); border-radius: 4px; background: var(--o-bg); }
  & .cp-under > .fold-head { padding: 8px 12px; font-size: 14px; font-weight: 500; cursor: pointer; }
  & .cp-under > .fold-body { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }

  /* employees: the department panel beside the cards */
  & .people-split { display: flex; align-items: stretch; }
  & .people-split > .feed { flex: 1 1 auto; min-width: 0; }
  & .dept-panel { flex: 0 0 220px; box-sizing: border-box; padding: 0 4px 48px 16px; background: var(--o-bg); }
  & .dept-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 24px 0 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--o-muted); }
  & .dept-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 4px; background: none; color: var(--o-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
  & .dept-item:hover { background: color-mix(in srgb, var(--o-text) 8%, transparent); }
  & .dept-item[aria-pressed="true"] { background: var(--o-pop); font-weight: 500; }
  & .dept-item .num { color: var(--o-muted); }

  @media (max-width: 900px) { & .top.cp { padding: 6px 12px; } }
  @media (max-width: 700px) {
    & .onav-app-name { max-width: 90px; }
    & .cp-bar { order: 5; flex: 1 1 100%; max-width: none; }
    & .cp-views { display: none; }
    & .cp-opts { grid-template-columns: 1fr; width: calc(100vw - 24px); right: -8px; }
    & .people-split { flex-direction: column; }
    & .dept-panel { flex: none; width: 100%; padding: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    & .dept-head { width: 100%; padding-top: 8px; }
    & .dept-item { width: auto; }
  }
}

/* home grid: the overlay from the navbar and the /apps page; the overlay is always dark */
.home-overlay { position: fixed; inset: 0; z-index: 90; overflow-y: auto; color: #e6edf3; background: radial-gradient(ellipse at 50% 30%, #1b2a33 0%, #11161d 75%); animation: fade-in 0.18s var(--ease) both; }
.home-inner { box-sizing: border-box; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 24px 48px; }
.home-overlay .apps-wrap { width: min(720px, 100%); }
.home-sys { position: absolute; top: 0; right: 0; height: 46px; padding: 0 12px; gap: 2px; background: transparent; }
.home-sys .user { margin: 0; }
.home-sys .user-text, .home-sys .user-chev { display: none; }
.home-sys .user .pop { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; }
.home-sys .icon-btn { width: 34px; height: 34px; border: 0; background: none; color: #e6edf3; }
.home-sys .icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
.apps-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; }
.apps-find { width: min(320px, 100%); height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.home-overlay .apps-find { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #e6edf3; }
.apps-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 26px 20px; justify-items: center; width: 100%; max-width: 720px; }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 104px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: center; text-decoration: none; cursor: pointer; }
.app-tile[hidden] { display: none; }
.app-tile:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.app-tile.off { opacity: 0.38; filter: grayscale(1); cursor: default; }
.app-glyph { display: grid; place-items: center; width: 88px; height: 88px; max-width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.app-tile:hover .app-glyph { border-color: var(--line-strong); }
.app-name { line-height: 1.2; overflow-wrap: anywhere; }
.home-overlay .app-tile { gap: 10px; max-width: 120px; font-size: 14px; color: #fff; }
.home-overlay .app-glyph { width: 70px; height: 70px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.home-overlay .app-tile:hover .app-glyph, .home-overlay .app-tile:focus-visible .app-glyph { background: rgba(255, 255, 255, 0.1); }
.home-overlay .app-name { font-size: 14px; color: #fff; }
.home-overlay .app-tile:focus-visible { outline-color: #02c7b5; }
:root[data-layout="odoo"] .apps-home .app-tile.off { opacity: 0.38; filter: grayscale(1); }
.page-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 700px) {
  .home-inner { align-items: flex-start; padding: 36px 16px 32px; }
  .apps-home { gap: 22px 10px; }
  .app-glyph { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) { .home-overlay { animation: none; } }

/* the top menu that holds the open page */
:root[data-layout="odoo"] .onav .onav-drop.on { box-shadow: inset 0 -2px 0 var(--o-link, #02c7b5); }
.cp-group { display: inline-flex; gap: 6px; align-items: center; }