/* Catalog / Sales CRM Hub: rules for things that exist in this app only. Loaded after mysolar-ui.css. Tokens only: no raw hex.
   The !important rules left in app.css / odoo-*.css are print-sheet, x-cloak, mobile popover and generated-document rules: they must beat the inline styles of generated documents. */

/* ---- sign in: Hub-only parts (the prototype-account picker of the local demo, the sun mark when no logo is set) ---- */
.o_auth_loading { padding: 32px; text-align: center; color: var(--odoo-secondary-color); }
.o_auth_mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 8px; border-radius: var(--odoo-radius-lg); background: var(--odoo-primary); color: #fff; }
.o_auth_links .btn-link { padding: 0; }
.o_auth_demo { margin: 24px -32px -32px; padding: 16px 32px 12px; border-top: 1px solid var(--odoo-border-color); border-radius: 0 0 var(--odoo-radius-lg) var(--odoo-radius-lg); background: var(--odoo-gray-100); }
.o_auth_demo_title { margin: 0 0 8px; font-size: 13px; line-height: 19.5px; font-weight: 500; color: var(--odoo-secondary-color); }
.o_auth_demo_list { display: flex; flex-direction: column; gap: 2px; }
.o_auth_demo_row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 8px; border: 0; border-radius: var(--odoo-radius); background: transparent; text-align: left; cursor: pointer; }
.o_auth_demo_row:hover { background: #fff; }
.o_auth_demo_avatar { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--odoo-radius); color: #fff; font-size: 11px; font-weight: 500; }
.o_auth_demo_name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: #000; }
.o_auth_demo_role { font-size: 12px; color: var(--odoo-secondary-color); }
@media (max-width: 575.98px) { .o_auth_demo { margin: 24px -16px -24px; padding: 16px 16px 12px; } }
@media (pointer: coarse) { .o_auth_demo_row { min-height: 40px; } }

/* ---- installed to a home screen: keep content clear of the notch and the home indicator ---- */
@supports (padding: env(safe-area-inset-left)) {
  header.o_main_navbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  main { padding-left: max(env(safe-area-inset-left), 0px); padding-right: max(env(safe-area-inset-right), 0px); }
  footer { padding-bottom: calc(env(safe-area-inset-bottom) + 20px); }
  .bar, .fixed.bottom-0 { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---- (i) help icons added next to labels and headings by js/help.js: the package's .o_info_btn, placed here ---- */
.o_info_btn { cursor: help; flex: none; }
.o_info_btn:hover, .o_info_btn:focus-visible { background: var(--odoo-info); border-color: var(--odoo-info); color: #fff; outline: 0; }
.o-lbl.shrink-0 .o_info_btn { position: absolute; right: 2px; top: 10px; margin: 0; }
@media print { .o_info_btn { display: none; } }


/* ---- buttons: the package's .btn, .btn-secondary, .btn-primary, .btn-danger; only the Hub extras are here ---- */
.btn-secondary.on { background: var(--odoo-teal-tint); border-color: var(--odoo-link); color: var(--odoo-link); }
.ov-list-pager .btn { height: 28px; padding: 2px 10px; font-size: 13px; }
.zoom-strong .btn:hover { transform: translateY(-1px) scale(1.03); }
.zoom-subtle .btn:hover { transform: translateY(-1px); }
.btn.text-rose-600, .btn.text-rose-700 { color: var(--odoo-danger-text); }
.btn-secondary.text-rose-600:hover, .btn-secondary.text-rose-700:hover { background: var(--odoo-danger-bg-subtle); }
.o-modal .btn svg { width: 16px; height: 16px; }
/* dialog footers (Odoo order): primary or danger first, then the plain buttons, then everything else, the "end" item last */
.o-modal .o-dlg > [class~="border-t"]:last-child:not(.o-foot-plain) > :is(.btn-primary, .btn-danger) { order: 1; }
.o-modal .o-dlg > [class~="border-t"]:last-child:not(.o-foot-plain) > .btn-secondary { order: 2; }
.o-modal .o-dlg > [class~="border-t"]:last-child:not(.o-foot-plain) > :not(.btn):not(.flex-1) { order: 4; }
.o-modal .o-dlg > [class~="border-t"]:last-child:not(.o-foot-plain) > .o-foot-end:not(.btn) { color: var(--odoo-link); }

/* ---- fields: the package's .form-control / .form-select (boxed) and .o_input (flat, record forms and dialogs); Hub extras ---- */
textarea.o_input { height: auto; min-height: 52px; padding-right: 0; resize: vertical; }
select.o_input { padding-right: 20px; }

/* ---- icon-only buttons: the package .btn made square (these helpers are app-only) ---- */
.o_ib { flex: none; width: var(--odoo-btn-h); height: var(--odoo-btn-h); padding: 0; }
.o_ib_sm { width: 28px; height: 28px; }
.o_ib_lg { width: 36px; height: 36px; }
.o_ib:disabled { opacity: .4; }
.btn-secondary.text-indigo-600 { color: var(--odoo-primary); }
.btn-secondary.text-emerald-600 { color: var(--odoo-badge-success-text); }
.ibgrp .o_ib { width: 28px; height: 28px; border: 0; background: transparent; }
.ibgrp .o_ib:hover { background: var(--odoo-gray-100); }
.ibgrp .o_ib.btn-primary { background: var(--odoo-primary); }
/* the package gives the (i) a 40 px touch area (::after inset -12 px): next to a field that would swallow the clicks on the field's upper half, so it stays inside the icon plus 2 px */
.o_info_btn::after { inset: -2px; }

/* ===== data-entry fields are clear boxes =====
   The package draws .o_input as a flat bottom line (Odoo form look), which reads as plain text: people could not see WHERE to type.
   Every editable control in the record sheets and dialogs is a bordered box with the teal focus ring (text, number, date, e-mail via .o_input;
   selects use the package .form-select, boxed with its arrow inside). Read-only and calculated values stay plain text. Checkbox, radio, range,
   file and hidden inputs are not boxes. In list tables the box does not make rows taller. Tokens only. */
.o_input:not([readonly]) {
  height: var(--odoo-input-h); min-height: var(--odoo-input-h); padding: 6px 8px; box-sizing: border-box;
  border: 1px solid var(--odoo-gray-400); border-radius: var(--odoo-radius); background-color: var(--odoo-light);
}
textarea.o_input:not([readonly]) { height: auto; min-height: 52px; resize: vertical; }
.o_input:hover:not([readonly]):not(:disabled) { border-color: var(--odoo-gray-500); background-color: var(--odoo-light); }
.o_input:focus:not([readonly]) { border-color: var(--odoo-focus-border); box-shadow: var(--odoo-focus-ring); outline: 0; }
.o_input:disabled:not([readonly]) { border-color: var(--odoo-gray-300); background-color: var(--odoo-gray-100); opacity: .65; cursor: not-allowed; }
.o_input.is-invalid { border-color: var(--odoo-danger); }
.odf .form-select, .odlg .form-select, .o-modal .form-select { height: var(--odoo-input-h); padding: 6px 24px 6px 8px; background-position: right 8px center; }
.form-select:hover:not(:disabled) { border-color: var(--odoo-gray-500); }
.form-select:disabled { border-color: var(--odoo-gray-300); background-color: var(--odoo-gray-100); opacity: .65; cursor: not-allowed; }
table td .o_input:not([readonly]) { margin: calc((23.7px - var(--odoo-input-h)) / 2) 0; }
/* an amount field with a currency symbol drawn inside it: leave room for the symbol */
.relative > .absolute.left-3 ~ .o_input:not([readonly]) { padding-left: 24px; }

/* "fill here" cue: a faint teal band with a 3 px accent on the blocks where people type (record-sheet sections that hold an editable field, the pricing
   columns). Calculated blocks (totals, margins, what the customer pays) stay plain. */
.odf-grp-b:has(.o_input:not([readonly]):not(:disabled), .form-select:not(:disabled)) {
  background: color-mix(in srgb, var(--odoo-teal-tint) 35%, var(--odoo-light));
  border-left: 3px solid var(--odoo-focus-border); border-radius: var(--odoo-radius); padding: 8px 12px;
}
.odf-panes .e-zone.bg-white.rounded-2xl.border.p-5 { background: color-mix(in srgb, var(--odoo-teal-tint) 35%, var(--odoo-light)); border-left: 3px solid var(--odoo-focus-border); border-radius: var(--odoo-radius); padding: 8px 12px; }