/* ============================================================
   Odoo-style application shell (design.md §7)
   Home screen with one tile per app; inside an app the navbar
   carries the apps button and the app's name.
   Replaces the former sidebar, top bar and bottom nav.
   ============================================================ */

html:root {
  /* Layering from design.md: menus open above the page, dialogs above menus. */
  --odoo-z-navbar: 1000;
  --odoo-z-dropdown: 1100;
}

#inboxView { height: calc(100dvh - var(--odoo-navbar-height) - var(--trial-banner-height, 0px)); }

html body .main-content,
html body .admin-main {
  margin-left: 0;
  padding-bottom: 0;
}

.app-navbar {
  position: sticky;
  top: 0;
  z-index: var(--odoo-z-navbar);
  display: flex;
  align-items: center;
  gap: var(--odoo-space-2);
  flex-shrink: 0;
  height: var(--odoo-navbar-height);
  padding: 0 var(--odoo-space-3);
  background: var(--odoo-primary);
  border-bottom: 1px solid var(--odoo-primary-active);
  color: #fff;
}

.app-navbar-spacer { flex: 1; min-width: 0; }

.app-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--odoo-space-2);
  color: #fff;
  font-size: var(--odoo-font-size-md);
  font-weight: 700;
  text-decoration: none;
}

.app-navbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--odoo-space-2);
  height: var(--odoo-control-height-lg);
  min-width: var(--odoo-control-height-lg);
  padding: 0 var(--odoo-space-2);
  border: 0;
  border-radius: var(--odoo-radius-md);
  background: transparent;
  color: #fff;
  font-size: var(--odoo-font-size-base);
  text-decoration: none;
  cursor: pointer;
}
.app-navbar-btn:hover { background: rgb(255 255 255 / 14%); }
.app-navbar-btn:focus-visible,
.app-navbar-brand:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.app-navbar-appname {
  padding: 0 var(--odoo-space-2);
  color: #fff;
  font-size: var(--odoo-font-size-md);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Business switcher keeps its white field on the purple bar */
.app-navbar-business { flex: 0 1 auto; min-width: 0; }
html body .app-navbar .business-switcher-trigger {
  background: var(--odoo-surface);
  color: var(--odoo-text);
  border: 1px solid var(--odoo-border-strong);
  min-height: var(--odoo-control-height);
  padding: 0 var(--odoo-space-3);
}
html body .app-navbar .business-switcher-trigger:hover { background: var(--odoo-surface-muted); }
html body .app-navbar .business-switcher-trigger .business-switcher-name { color: var(--odoo-text); }
html body .app-navbar .business-switcher-trigger svg { color: var(--odoo-text-muted); }

/* User menu */
.app-user-menu { position: relative; }
.app-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(255 255 255 / 22%);
}
.app-user-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: var(--odoo-z-dropdown);
  min-width: 220px;
  padding: var(--odoo-space-1) 0;
  background: var(--odoo-surface);
  border: 1px solid var(--odoo-border);
  border-radius: var(--odoo-radius-md);
  box-shadow: var(--odoo-shadow-menu);
  color: var(--odoo-text);
}
.app-dropdown-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--odoo-space-2) var(--odoo-space-3);
  border-bottom: 1px solid var(--odoo-border);
  font-size: var(--odoo-font-size-sm);
  word-break: break-all;
}
.app-dropdown-header span { color: var(--odoo-text-muted); text-transform: capitalize; }
.app-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--odoo-space-2);
  width: 100%;
  padding: var(--odoo-space-2) var(--odoo-space-3);
  border: 0;
  background: transparent;
  color: var(--odoo-text);
  text-align: left;
  cursor: pointer;
}
.app-dropdown-item:hover { background: var(--odoo-surface-muted); }

/* Home screen: a greeting, then app tiles as cards in the brand's calm palette */
html body .home-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--odoo-space-6) var(--odoo-space-4);
}
html body .home-menu-head {
  width: 100%;
  max-width: 880px;
  margin-top: 4vh;
  margin-bottom: var(--odoo-space-5);
}
html body .home-menu-head h1 {
  margin: 0;
  font-size: var(--odoo-font-size-title);
  font-weight: 700;
  color: var(--odoo-text);
}
html body .home-menu-head p {
  margin: 4px 0 0;
  font-size: var(--odoo-font-size-md);
  color: var(--odoo-text-muted);
}
html body .home-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--odoo-space-4);
  width: 100%;
  max-width: 880px;
}
html body .home-app {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--odoo-space-4);
  border: 1px solid var(--odoo-border);
  border-radius: var(--odoo-radius-lg);
  background: var(--odoo-surface);
  color: var(--odoo-text);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
html body .home-app:hover {
  transform: translateY(-2px);
  border-color: var(--app-color, var(--odoo-primary));
  box-shadow: 0 8px 22px rgb(0 0 0 / 18%);
}
html body .home-app:focus-visible { outline: none; box-shadow: var(--odoo-focus-ring); }
html body .home-app-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--app-color, #714b67) 88%, #fff), var(--app-color, #714b67));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--app-color, #714b67) 35%, transparent), inset 0 1px 0 rgb(255 255 255 / 25%);
}
html body .home-app-label {
  font-size: var(--odoo-font-size-md);
  font-weight: 600;
}
html body .home-app-hint {
  font-size: var(--odoo-font-size-sm);
  color: var(--odoo-text-muted);
  line-height: 1.35;
}
html body .home-app-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--odoo-danger);
  color: #fff;
  font-size: var(--odoo-font-size-xs);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

@media (max-width: 768px) {
  .app-navbar { padding: 0 var(--odoo-space-2); }
  .app-user-name,
  .app-user-trigger > svg:last-child { display: none; }
  .app-navbar-business { max-width: 150px; }
  html body .home-menu { padding: var(--odoo-space-4) var(--odoo-space-3); }
  html body .home-menu-head { margin-top: 0; margin-bottom: var(--odoo-space-4); }
  html body .home-menu-grid { grid-template-columns: repeat(2, 1fr); gap: var(--odoo-space-3); }
  html body .home-app { padding: var(--odoo-space-3); }
  html body .home-app-icon { width: 44px; height: 44px; border-radius: 12px; }
}

@media (prefers-color-scheme: dark) {
  html body .app-navbar { background: #4a3243; border-bottom-color: #3b2736; }
  html body .app-navbar .business-switcher-trigger { background: var(--odoo-surface); }
}

html body .app-navbar .app-user-name { color: #fff; opacity: 1; font-size: var(--odoo-font-size-base); }

/* Page toolbars (search, filters, primary action): compact and on one line
   at any width - the search grows, the action stays beside it. */
html body .view > .view-header,
html body .view > div > .view-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--odoo-space-2);
  margin-bottom: var(--odoo-space-3);
}
html body .view-header .search-box { flex: 1 1 160px; width: auto; }

/* Filter chips wrap onto another line rather than scroll sideways. */
html body .inbox-channel-filter { flex-wrap: wrap; overflow: visible; }
html body .posts-status-filter { margin-bottom: var(--odoo-space-3); }
/* Orders: status tabs with their counts, the channel dropdown at the right;
   on phones both are dropdowns (see Phones). */
html body .orders-filters {
  display: flex;
  align-items: flex-end;
  gap: var(--odoo-space-3);
  margin-bottom: var(--odoo-space-3);
  border-bottom: 1px solid var(--odoo-border);
}
html body .status-tabs { display: flex; flex: 1; flex-wrap: wrap; min-width: 0; }
html body .status-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-bottom: -1px;
  padding: 0 var(--odoo-space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--odoo-text-muted);
  font: inherit;
  cursor: pointer;
}
html body .status-tab:hover { color: var(--odoo-text); }
html body .status-tab:focus-visible { outline: none; box-shadow: var(--odoo-focus-ring); }
html body .status-tab.active { border-bottom-color: var(--odoo-primary); color: var(--odoo-primary); font-weight: 700; }
html body .status-tab-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--odoo-surface-muted);
  color: var(--odoo-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
html body .status-tab.active .status-tab-count { background: var(--odoo-primary); color: #fff; }
html body .orders-channel-select { flex-shrink: 0; margin-bottom: 6px; }
html body .order-channel.manual { color: var(--odoo-text-muted); }

/* Overview: four tiles - orders today, pending, unread, AI replies - each
   opening the page that acts on it. Icons in the theme's tint throughout. */
html body .overview-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body .stat-icon { background: var(--odoo-primary-subtle); color: var(--odoo-primary); }
html body .overview-tile {
  align-items: flex-start;
  width: 100%;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body .overview-tile:hover { border-color: var(--odoo-primary); }
html body .overview-tile:focus-visible { outline: none; box-shadow: var(--odoo-focus-ring); }
html body .overview-tile .stat-info { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 2px; }
html body .overview-tile-value { color: var(--odoo-text); font-size: 24px; font-weight: 700; line-height: 1.2; }
html body .overview-tile-label { color: var(--odoo-text); font-size: 13px; font-weight: 600; }
html body .overview-tile-note { color: var(--odoo-text-muted); font-size: 12px; }
html body .overview-tile-bar { display: block; height: 6px; margin: 4px 0 2px; border-radius: 999px; background: var(--odoo-surface-muted); overflow: hidden; }
html body .overview-tile-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--odoo-primary); }
html body .audience-switch .view-switch-item { gap: 6px; }
html body .audience-switch .channel-chip-icon { display: inline-flex; }
html body .overview-tile.danger .stat-icon { background: var(--color-danger-light); color: var(--odoo-danger); }
html body .overview-tile.danger .overview-tile-bar > span { background: var(--odoo-danger); }
@media (max-width: 1024px) {
  html body .overview-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Plans: the line under the price ("Free forever", "a year costs ten months"). */
html body .pricing-price-note { display: block; margin-top: 2px; color: var(--odoo-text-muted); font-size: 13px; font-weight: 400; }

/* Overview: Recent Orders as compact rows - number and who/what on the
   left, total and status on the right; each opens Orders. */
html body .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--odoo-space-2); }
html body .link-button { padding: 0; border: 0; background: none; color: var(--odoo-primary); font: inherit; cursor: pointer; }
html body .link-button:hover { text-decoration: underline; }
html body .recent-orders { margin: 0; padding: 0; list-style: none; }
html body .recent-orders li + li { border-top: 1px solid var(--odoo-border); }
html body .recent-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odoo-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--odoo-space-2) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body .recent-order:hover .recent-order-main strong { color: var(--odoo-primary); }
html body .recent-order-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
html body .recent-order-main span { overflow: hidden; color: var(--odoo-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
html body .recent-order-side { display: flex; flex-direction: column; flex-shrink: 0; align-items: flex-end; gap: 4px; }

/* Status pills: capitalised; "pending" in the theme's purple, not yellow. */
html body .status-badge { text-transform: capitalize; }
html body .status-pending { background: var(--odoo-primary-subtle); color: var(--odoo-primary); }
@media (prefers-color-scheme: dark) {
  html body .status-pending { color: var(--odoo-primary-active); }
}

/* An order on a phone: number, time and total first, then customer,
   product and where it came from, then status and actions. */
html body .orders-select-all {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--odoo-space-2);
  min-height: 48px;
  margin: 0 0 var(--odoo-space-2);
  padding: 4px var(--odoo-space-2) 4px var(--odoo-space-3);
  border: 1px solid var(--odoo-border);
  border-radius: var(--odoo-radius-lg);
  background: var(--odoo-surface);
}
html body .orders-select-all.selecting { border-color: var(--odoo-primary); background: var(--odoo-primary-subtle); }
html body .orders-select-all label { display: flex; flex: 1; align-items: center; gap: var(--odoo-space-3); min-width: 0; min-height: 40px; margin: 0; font-weight: 600; cursor: pointer; }
html body .orders-select-all input { accent-color: var(--odoo-primary); }
html body .orders-select-all-hint { padding-right: var(--odoo-space-1); color: var(--odoo-text-muted); font-size: 13px; }
html body .orders-select-actions { display: flex; gap: var(--odoo-space-2); }
html body .orders-select-actions .btn-small { min-height: 36px; }
html body .order-card { display: flex; flex-direction: column; gap: 4px; padding: var(--odoo-space-3); }
html body .order-card-top { display: flex; align-items: center; gap: var(--odoo-space-2); margin-bottom: 2px; }
html body .order-card-id { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
html body .order-card-id strong { font-size: 14px; overflow-wrap: anywhere; }
html body .order-card-id span { color: var(--odoo-text-muted); font-size: 12px; }
html body .order-card-total { font-size: 16px; white-space: nowrap; }
html body .order-card-line { color: var(--odoo-text); font-size: 14px; overflow-wrap: anywhere; }
html body .order-card-line a { color: var(--odoo-primary); text-decoration: none; }
html body .order-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--odoo-text-muted); font-size: 13px; }
html body .order-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odoo-space-2);
  margin-top: var(--odoo-space-2);
  padding-top: var(--odoo-space-2);
  border-top: 1px solid var(--odoo-border);
}
html body .order-card-actions { display: flex; gap: var(--odoo-space-2); }
html body .order-card-actions .btn-small { min-height: 36px; }

/* Orders on phones: Filter button (a dot when filters are on), the active
   filters as removable chips, and the filter panel. Hidden on wide screens. */
html body .orders-filter-btn,
html body .orders-active-filters { display: none; }
html body .orders-filter-btn { position: relative; align-items: center; gap: 6px; flex-shrink: 0; }
html body .orders-filter-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--odoo-primary);
}
html body .orders-active-filters { flex-wrap: wrap; gap: var(--odoo-space-2); margin-bottom: var(--odoo-space-3); }
html body .orders-active-filters .channel-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
html body .filter-sheet-label { margin: 0 0 var(--odoo-space-2); color: var(--odoo-text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
html body .filter-sheet-label + * { margin-bottom: var(--odoo-space-4); }
html body .filter-sheet-options { display: flex; flex-direction: column; }
html body .filter-sheet-option {
  display: flex;
  align-items: center;
  gap: var(--odoo-space-3);
  min-height: 48px;
  margin: 0;
  padding: 0 var(--odoo-space-2);
  border-bottom: 1px solid var(--odoo-border);
  border-radius: 0;
  cursor: pointer;
}
html body .filter-sheet-option:last-child { border-bottom: 0; }
html body .filter-sheet-option.selected { color: var(--odoo-primary); font-weight: 700; }
html body .filter-sheet-count { margin-left: auto; color: var(--odoo-text-muted); font-weight: 400; }
html body .orders-filter-footer { position: sticky; bottom: 0; margin: 0; padding: var(--odoo-space-3) var(--odoo-space-5); }

/* Products on wide screens: the catalogue as a table. */
html body .products-table { margin-bottom: var(--odoo-space-3); }
html body .product-row {
  display: flex;
  align-items: center;
  gap: var(--odoo-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body .product-row-thumb { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--odoo-radius-md); object-fit: cover; }
html body .product-row-thumb-empty { display: block; background: var(--odoo-surface-muted); }
html body .product-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
html body .product-row-text span { color: var(--odoo-text-muted); font-size: 12px; }
html body .product-row-price { white-space: nowrap; }
@media (min-width: 769px) {
  html body .products-grid-phone-only { display: none; }
}

/* Stock: low in the theme's purple, out of stock in its red (no yellow). */
html body .product-stock.low { background: var(--odoo-primary-subtle); color: var(--odoo-primary); }
html body .product-stock.out { background: var(--color-danger-light); color: var(--odoo-danger); }
@media (prefers-color-scheme: dark) {
  html body .product-stock.low { color: var(--odoo-primary-active); }
}

/* New post: uploaded photos and videos as tiles - a progress bar while
   uploading, the length on videos, a remove button - and the add button. */
html body .post-media-caption { display: block; margin-bottom: var(--odoo-space-1); }
html body .post-uploads { margin-top: var(--odoo-space-2); }
html body .post-upload {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid var(--odoo-primary);
  border-radius: var(--odoo-radius-md);
  background: var(--odoo-surface-muted);
  overflow: hidden;
}
html body .post-upload.failed { border-color: var(--odoo-danger); }
html body .post-upload img,
html body .post-upload video { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .post-upload-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgb(0 0 0 / 65%);
  color: #fff;
  font-size: 11px;
}
html body .post-upload-progress { position: absolute; right: 6px; bottom: 6px; left: 6px; height: 4px; border-radius: 999px; background: rgb(0 0 0 / 45%); overflow: hidden; }
html body .post-upload-progress > span { display: block; height: 100%; background: var(--odoo-primary); transition: width 0.2s; }
html body .post-upload-error { position: absolute; inset: auto 0 0; padding: 2px 4px; background: var(--odoo-danger); color: #fff; font-size: 10px; line-height: 1.3; }
html body .post-upload-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 65%);
  color: #fff;
  cursor: pointer;
}
/* A channel that cannot take the post as it is: said in the warning colour. */
html body .choice-card small.field-warning { display: block; color: var(--odoo-danger); font-weight: 600; }
html body .post-add-media { display: inline-flex; align-items: center; margin: var(--odoo-space-2) 0 var(--odoo-space-1); }

/* Posts list: a play mark on video posts, a text mark on text-only ones. */
html body .post-row-media { position: relative; flex-shrink: 0; display: inline-flex; }
html body .post-row-play { position: absolute; right: 2px; bottom: 2px; padding: 2px; border-radius: 50%; background: rgb(0 0 0 / 65%); color: #fff; }
html body .post-row-text-only { display: inline-flex; align-items: center; justify-content: center; color: var(--odoo-text-muted); }

/* New order: quantity stepper, zone choice, the total beside the buttons. */
html body .qty-stepper {
  display: inline-flex;
  border: 1px solid var(--odoo-border-strong);
  border-radius: var(--odoo-radius-md);
  overflow: hidden;
}
html body .qty-stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: var(--odoo-surface-muted);
  color: var(--odoo-text);
  cursor: pointer;
}
html body .qty-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
html body .qty-stepper input {
  width: 64px;
  max-width: none;
  min-height: 44px;
  border: 0;
  border-right: 1px solid var(--odoo-border);
  border-left: 1px solid var(--odoo-border);
  border-radius: 0;
  background: var(--odoo-surface);
  color: var(--odoo-text);
  text-align: center;
  -moz-appearance: textfield;
}
html body .qty-stepper input::-webkit-outer-spin-button,
html body .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html body .form-group .form-label {
  display: block;
  margin-bottom: var(--odoo-space-1);
  color: var(--odoo-text);
  font-size: var(--odoo-font-size-base);
  font-weight: 500;
}
html body .zone-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--odoo-space-2); }
html body .zone-option {
  display: flex;
  align-items: center;
  gap: var(--odoo-space-2);
  min-height: 48px;
  margin: 0;
  padding: 0 var(--odoo-space-3);
  border: 1px solid var(--odoo-border-strong);
  border-radius: var(--odoo-radius-md);
  cursor: pointer;
}
html body .zone-option strong { margin-left: auto; }
/* Radios inside option rows keep their own size (the form-field rule stretches inputs). */
html body .zone-option input[type='radio'],
html body .filter-sheet-option input[type='radio'] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--odoo-primary);
}
html body .zone-option.selected { border-color: var(--odoo-primary); background: var(--odoo-primary-subtle); }
html body .new-order-footer {
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: var(--odoo-space-3) var(--odoo-space-5);
}
html body .new-order-total { display: flex; flex-direction: column; margin-right: auto; line-height: 1.3; }
html body .new-order-total span { color: var(--odoo-text-muted); font-size: 12px; }
html body .new-order-total strong { font-size: 18px; }
html body .filter-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0 32px 0 14px;
  /* The arrow, so it reads as a dropdown in light and dark alike. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--odoo-border-strong);
  border-radius: 999px;
  background-color: var(--odoo-surface);
  color: var(--odoo-text);
  font-family: inherit;
}
html body .filter-select:focus-visible { outline: none; border-color: var(--odoo-primary); box-shadow: var(--odoo-focus-ring); }

/* Two views of one app (Posts | Comments): joined buttons at the top of the page */
.view-switch {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--odoo-border-strong);
  border-radius: var(--odoo-radius-md);
  overflow: hidden;
}
.view-switch-item {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  min-height: var(--odoo-control-height);
  padding: 0 var(--odoo-space-3);
  color: var(--odoo-text);
  font-size: var(--odoo-font-size-base);
  text-decoration: none;
  white-space: nowrap;
}
.view-switch-item + .view-switch-item { border-left: 1px solid var(--odoo-border-strong); }
.view-switch-item:hover { background: var(--odoo-surface-muted); }
.view-switch-item.active { background: var(--odoo-primary); color: #fff; font-weight: 700; }
.view-switch-item:focus-visible { outline: none; box-shadow: var(--odoo-focus-ring); }
html body .view-header .header-actions { margin-left: auto; display: flex; gap: var(--odoo-space-2); }
html body .view-header select,
html body .view-header .search-box input { min-height: var(--odoo-control-height); }
html body .view { padding: var(--odoo-space-4); }

/* Toasts (sonner): the app's own surface, text, border and font - in light
   and dark - instead of the library's plain white card. */
html body [data-sonner-toaster][data-theme] {
  --normal-bg: var(--odoo-surface);
  --normal-bg-hover: var(--odoo-surface-muted);
  --normal-border: var(--odoo-border-strong);
  --normal-border-hover: var(--odoo-border-strong);
  --normal-text: var(--odoo-text);
  --border-radius: var(--odoo-radius-lg);
  font-family: var(--odoo-font-family);
}
html body [data-sonner-toaster] [data-sonner-toast] { box-shadow: var(--odoo-shadow-menu); }

/* Selected text: a clear purple highlight, and the text keeps its colour.
   (A faint highlight plus a forced near-white text colour in dark mode made
   selected text look as if it just turned white.) */
html ::selection { background: rgb(113 75 103 / 30%); }
@media (prefers-color-scheme: dark) {
  html ::selection { background: rgb(154 108 144 / 50%); }
}

/* A small spinner inside a busy button, in the button's own text colour. */
.btn-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 1.6s; } }

/* Browser autofill keeps the field's own colours (Chrome paints it pale blue
   otherwise, which clashes in dark mode). The long transition stops the
   browser's background from showing through. */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body textarea:-webkit-autofill,
html body select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--odoo-surface) inset;
  -webkit-text-fill-color: var(--odoo-text);
  caret-color: var(--odoo-text);
  transition: background-color 600000s 0s, color 600000s 0s;
}
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--odoo-surface) inset, var(--odoo-focus-ring);
}

/* ============================================================
   Phones (up to 768px): the phone layout of every page, in one place.
   ============================================================ */
@media (max-width: 768px) {
  /* Plan / trial banner: one slim row - the message, then a small button. */
  html body .trial-banner {
    flex-direction: row;
    gap: var(--odoo-space-2);
    padding: 6px var(--odoo-space-3);
    text-align: left;
  }
  html body .trial-banner .trial-info { justify-content: flex-start; gap: 6px; min-width: 0; font-size: 13px; line-height: 1.35; }
  html body .trial-banner .trial-icon { flex-shrink: 0; width: 16px; height: 16px; }
  html body .trial-banner .trial-upgrade-btn { flex-shrink: 0; width: auto; min-height: 32px; padding: 0 10px; font-size: 13px; }

  /* Fields at 16px, so phones do not zoom in when one is tapped. */
  html body input:not([type='checkbox']):not([type='radio']):not([type='range']),
  html body select,
  html body textarea { font-size: 16px; }

  /* Tap targets: checkboxes and radios a finger can hit; the dialog's close button too. */
  html body input[type='checkbox'],
  html body input[type='radio'] { width: 20px; height: 20px; flex-shrink: 0; }
  html body .modal-close { min-width: 44px; min-height: 44px; font-size: 26px; }

  /* Posts | Comments: the whole width on its own line, halves equal. */
  html body .view-header .view-switch { flex: 1 1 100%; }
  html body .view-switch-item { flex: 1; justify-content: center; min-height: 40px; }

  /* Tables marked stack-on-phone: each row becomes a card, no column
     headers and no sideways scrolling. */
  html body .stack-on-phone { overflow: visible; border: 0; background: transparent; }
  html body .stack-on-phone table,
  html body .stack-on-phone tbody,
  html body .stack-on-phone tr,
  html body .stack-on-phone td { display: block; width: 100%; }
  html body .stack-on-phone thead { display: none; }
  html body .stack-on-phone tbody tr {
    margin-bottom: var(--odoo-space-2);
    padding: var(--odoo-space-3);
    border: 1px solid var(--odoo-border);
    border-radius: var(--odoo-radius-lg);
    background: var(--odoo-surface);
  }
  html body .stack-on-phone tbody tr:hover { background: var(--odoo-surface); }
  html body .stack-on-phone tbody td { padding: 0; border: 0; }
  html body .stack-on-phone tbody td + td { margin-top: var(--odoo-space-2); }
  html body .stack-on-phone tbody td:empty { display: none; }

  /* Comments: Reply / Hide / Delete as finger-sized buttons, not small links. */
  html body .post-comment-links { gap: var(--odoo-space-2); margin-top: var(--odoo-space-1); }
  html body .post-comment-links button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--odoo-border-strong);
    border-radius: 999px;
    color: var(--odoo-text);
    font-size: 13px;
  }
  html body .post-comment-links button.danger { color: var(--odoo-danger); }
  html body .post-comment-links button:hover:not(:disabled) { text-decoration: none; }

  /* Ads: account and ad cards - the actions row along the bottom. */
  html body .stack-on-phone .campaign-actions { display: flex; flex-wrap: wrap; gap: var(--odoo-space-2); padding-top: var(--odoo-space-2); border-top: 1px solid var(--odoo-border); }
  html body .stack-on-phone .campaign-actions .btn-small { min-height: 36px; }

  /* Posts as cards: the time small and muted, the buttons a full-width row. */
  html body .post-row-when { color: var(--odoo-text-muted); font-size: 13px; }
  html body .stack-on-phone .post-actions { display: flex; gap: var(--odoo-space-2); padding-top: var(--odoo-space-2); border-top: 1px solid var(--odoo-border); }
  html body .stack-on-phone .post-actions .btn-small { flex: 1; justify-content: center; min-height: 40px; }

  /* Products on phones: compact cards, not the table. */
  html body .products-table { display: none; }

  /* Products as compact rows: photo on the left, name, code, price and
     stock beside it, the buttons across the bottom. Category, sizes and
     colours are under View. */
  html body .products-grid { gap: var(--odoo-space-2); }
  html body .product-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: start;
    column-gap: var(--odoo-space-3);
    padding: var(--odoo-space-3);
  }
  html body .product-card .product-image-container {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 88px;
    height: 88px;
    border-radius: var(--odoo-radius-md);
  }
  html body .product-card .card-carousel-nav,
  html body .product-card .card-carousel-dots { display: none; }
  html body .product-card .product-card-body { display: contents; }
  html body .product-card .product-card-body > * { grid-column: 2; margin: 0; }
  html body .product-card .product-card-body > span { justify-self: start; margin-top: 4px; }
  html body .product-card .product-details { display: none; }
  html body .product-card .product-actions { grid-column: 1 / -1; margin-top: var(--odoo-space-3); }
  html body .product-card .product-actions .btn-small { flex: 1; justify-content: center; min-height: 40px; }

  /* Orders: search, Filter and + on one line; tabs and dropdown go behind Filter. */
  /* The selection bar above the cards does this job on phones. */
  html body .bulk-action-bar { display: none; }
  html body .orders-filters { display: none; }
  html body .orders-filter-btn { display: inline-flex; min-height: 44px; }
  html body .orders-active-filters { display: flex; }
  html body .orders-new-btn { width: 44px; min-width: 44px; padding: 0; }
  html body .orders-new-btn .btn-label { display: none; }
  html body .orders-new-btn .btn-icon { margin: 0; }
  html body .orders-filter-footer { padding: var(--odoo-space-3) var(--odoo-space-4); }
  html body .orders-filter-footer .btn-primary,
  html body .orders-filter-footer .btn-secondary { flex: 1; }

  /* New order on a phone: the total on its own line, the buttons below it. */
  html body .zone-choice { grid-template-columns: 1fr; }
  html body .new-order-footer { flex-wrap: wrap; padding: var(--odoo-space-3) var(--odoo-space-4); }
  html body .new-order-total { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; }
  html body .new-order-footer .btn-primary,
  html body .new-order-footer .btn-secondary { flex: 1; }

  /* Overview: numbers two to a row, compact. */
  html body .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--odoo-space-2); }
  html body .stats-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Two to a row is narrow: icon on top, then the number and label at full width. */
  html body .stats-grid .stat-card { flex-direction: column; align-items: flex-start; gap: var(--odoo-space-2); }
  html body .overview-tile-value { font-size: 20px; }
  /* Audience: the Facebook | Instagram switch on its own line under the heading. */
  html body .audience-header .audience-switch { flex: 1 1 100%; }
  html body .audience-header { margin-bottom: var(--odoo-space-3); }
  html body .stat-card { gap: var(--odoo-space-2); padding: var(--odoo-space-3); }
  html body .stat-icon { width: 32px; height: 32px; }
  html body .stat-icon svg { width: 18px; height: 18px; }
  html body .stat-info h3 { font-size: 20px; line-height: 1.2; }
  html body .stat-info p { font-size: 12px; line-height: 1.3; }
}

/* A second block inside a settings section (e.g. browser alerts) */
html body .settings-subsection { margin-top: var(--odoo-space-6); padding-top: var(--odoo-space-5); border-top: 1px solid var(--odoo-border); }
html body .settings-subsection h3 { margin: 0 0 var(--odoo-space-2); font-size: var(--odoo-font-size-md); font-weight: 600; }

/* ============================================================
   Plans and AI replies (PRICING_PLAN.md section 10)
   One look for a locked action, the AI balance in the navbar,
   the AI replies picker and the purchase tick box.
   Green = active, amber = warning, red = stopped.
   ============================================================ */

/* AI balance: always in the navbar, amber at 20% left, red when stopped. */
html body .ai-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  font-size: var(--odoo-font-size-sm, 13px);
  text-decoration: none;
  white-space: nowrap;
}
html body .ai-balance-chip:hover { background: rgb(255 255 255 / 26%); }
html body .ai-balance-chip:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
html body .ai-balance-chip.low { background: #fff3cd; color: #664d03; }
html body .ai-balance-chip.out { background: #f8d7da; color: #842029; }
@media (max-width: 768px) {
  html body .ai-balance-chip .ai-balance-label { display: none; }
}

/* A locked action: lock, one reason, one "See plans". */
html body .plan-lock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--odoo-radius-md, 8px);
  background: var(--color-danger-light, #fbeaec);
  box-shadow: inset 3px 0 0 var(--color-danger, #d44c59);
  color: var(--odoo-text, #374151);
  font-size: var(--odoo-font-size-sm, 13px);
}
html body .plan-lock-icon { flex-shrink: 0; color: var(--color-danger, #d44c59); }
html body .plan-lock-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
html body .plan-lock-text span { color: var(--odoo-text-muted, #6b7280); }
html body .plan-lock .btn-small { flex-shrink: 0; }
html body .plan-lock.composer-lock { margin: 0 0 8px; }
@media (max-width: 640px) {
  html body .plan-lock { flex-wrap: wrap; }
  html body .plan-lock .btn-small { width: 100%; justify-content: center; }
}

/* The summary of a purchase and its one tick box. */
html body .purchase-agreement {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--odoo-border, #e5e7eb);
  border-radius: var(--odoo-radius-md, 8px);
  background: var(--odoo-surface-muted, #f9fafb);
}
html body .purchase-agreement-summary {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: var(--odoo-font-size-sm, 13px);
  line-height: 1.55;
  color: var(--odoo-text, #374151);
}
html body .purchase-agreement-summary li + li { margin-top: 4px; }
html body .purchase-agreement-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
  font-size: var(--odoo-font-size-sm, 13px);
  cursor: pointer;
}
html body .purchase-agreement-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--odoo-primary, #714b67);
}

/* AI replies: what is left, and the picker. */
html body .topup-balance {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}
html body .topup-balance > div {
  min-width: 140px;
  padding: 8px 12px;
  border: 1px solid var(--odoo-border, #e5e7eb);
  border-radius: var(--odoo-radius-md, 8px);
}
html body .topup-balance dt {
  font-size: var(--odoo-font-size-xs, 12px);
  color: var(--odoo-text-muted, #6b7280);
}
html body .topup-balance dd {
  margin: 2px 0 0;
  font-weight: 700;
}
html body .topup-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
html body .topup-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body .topup-quick .btn-small.active {
  border-color: var(--odoo-primary, #714b67);
  box-shadow: 0 0 0 1px var(--odoo-primary, #714b67);
  font-weight: 700;
}
html body .topup-slider {
  width: 100%;
  accent-color: var(--odoo-primary, #714b67);
}
html body .topup-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
html body .topup-number input[type="number"] {
  width: 110px;
  height: 36px;
  padding: 0 8px;
  text-align: right;
  font-weight: 600;
}
html body .topup-limits {
  color: var(--odoo-text-muted, #6b7280);
  font-size: var(--odoo-font-size-xs, 12px);
}
html body .topup-limits.invalid { color: var(--color-danger, #d44c59); }

/* AI reply history (Plans) and Account & data (Settings). */
html body .ai-log-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
html body .ai-log-toolbar select { min-width: 180px; height: 34px; }
html body .ai-log-total { flex: 1; color: var(--odoo-text-muted, #6b7280); font-size: var(--odoo-font-size-sm, 13px); }
html body .ai-log-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: var(--odoo-font-size-sm, 13px);
}
html body .payment-history-side .btn-small { margin-top: 4px; }
html body .account-delete-form { max-width: 420px; }