/* =============================================================================
 * odoopro_theme — visual polish layer (Claude design language)
 *
 * Loaded last in __init__.py:_register_assets so it composites on top of the
 * upstream compiled style.css and our own custom-fonts/custom-rtl/custom-
 * offline-fonts files. Everything here is additive — selectors target the
 * existing markup emitted by the upstream theme (`.o_main_header`,
 * `.o_subheader`, `.o_get_help`, …) and the buttons inside our overlay
 * templates (templates/layout_templates/{header,footer}.html).
 *
 * Design language — Claude / Anthropic
 * ------------------------------------
 *   * Warm paper palette: cream background (#FAF9F5), near-black ink, the
 *     signature Claude coral (#D97757) as the single accent.
 *   * Editorial restraint: flat colors, NO gradients on UI surfaces, NO
 *     decorative orbs, very subtle shadows.
 *   * Subtle rounded corners (6–8px), NOT pills. Pills feel app-y; Claude
 *     reads like a publication.
 *   * Transitions short and crisp (160 ms), hover states small and quiet —
 *     a color shift, not a translation lift.
 *   * Light footer matching the page surface — a continuation of the page,
 *     not a contrasting band.
 *   * RTL-aware: uses logical properties (`margin-inline-*`) where it
 *     matters, with a targeted override block at the bottom for the few
 *     places that still rely on directional values.
 * ============================================================================= */

/* ---- Design tokens (override these to re-skin without forking) ----------- */
:root {
    /* Brand */
    --odoopro-primary:        #872368;   /* Claude coral */
    --odoopro-primary-hover:  #95798c;
    --odoopro-primary-active: #99457e;
    --odoopro-accent:         #1a6ef2;   /* deeper coral for emphasis */
    --odoopro-accent-soft:    rgba(217, 119, 87, 0.10);

    --o-link-color: #2756a1;
    /* Ink — warm near-black, never pure #000 */
    --odoopro-ink:            #1F1E1D;
    --odoopro-ink-soft:       #5C5B57;
    --odoopro-muted:          rgba(31, 30, 29, 0.55);
    --odoopro-divider:        #E8E6DC;
    --odoopro-divider-strong: #D9D6C9;

    /* Surfaces — warm paper, not white */
    --odoopro-bg:             #FAF9F5;
    --odoopro-bg-soft:        #F5F4ED;
    --odoopro-bg-card:        #FFFFFF;
    --odoopro-bg-code:        #F0EFE6;

    /* Footer matches the page (light, not dark) */
    --odoopro-footer-bg:      #F5F4ED;
    --odoopro-footer-ink:     #1F1E1D;
    --odoopro-footer-ink-soft:#5C5B57;
    --odoopro-footer-divider: #E0DDD0;

    /* Shadows — extremely subtle, mostly tonal not dropped */
    --odoopro-shadow-xs:      0 1px 2px rgba(31, 30, 29, 0.04);
    --odoopro-shadow-sm:      0 1px 3px rgba(31, 30, 29, 0.06);
    --odoopro-shadow-md:      0 4px 12px rgba(31, 30, 29, 0.06);
    --odoopro-shadow-lg:      0 8px 24px rgba(31, 30, 29, 0.08);

    /* Radii — restrained, NOT pill-shaped */
    --odoopro-radius-sm:      6px;
    --odoopro-radius:         8px;
    --odoopro-radius-lg:      12px;
    --odoopro-radius-pill:    8px;   /* aliased — Claude doesn't do pills */

    --odoopro-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
    --odoopro-tx:             160ms var(--odoopro-ease);
}

/* Page surface — Claude-cream. Targets html so iframe/blank fills match. */
html, body {
    background-color: var(--odoopro-bg);
}
body {
    color: var(--odoopro-ink);
}

/* =============================================================================
 * 1. Header
 * ============================================================================= */
.o_main_header {
    background: var(--odoopro-bg);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow var(--odoopro-tx),
                border-color var(--odoopro-tx);
    border-bottom: 1px solid var(--odoopro-divider) !important;
}
.o_main_header:hover {
    box-shadow: var(--odoopro-shadow-xs);
}

.o_main_header .o_logo_wrapper {
    padding-inline: 24px;
    border-inline-end: 1px solid var(--odoopro-divider);
}

.o_main_header .o_logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity var(--odoopro-tx);
}
.o_main_header .o_logo:hover {
    opacity: 0.85;
}
.o_main_header .o_logo img {
    transition: filter var(--odoopro-tx);
}
.o_main_header .o_logo span {
    font-weight: 600;
    color: var(--odoopro-ink);
    letter-spacing: -0.01em;
    font-size: 0.78rem;
    padding: 3px 10px;
    margin-bottom: -18px;
    margin-right: -10px;
    border-radius: var(--odoopro-radius-sm);
    background: var(--odoopro-bg-soft);
    border: 1px solid var(--odoopro-divider);
    text-transform: none;
    line-height: 1.4;
}

/* CTA button — flat coral, crisp corners, quiet hover.
   No gradient, no pill, no translate-lift. */
.o_main_header .btn.btn-primary {
    background: var(--odoopro-primary);
    color: #ffffff;
    border: 1px solid var(--odoopro-primary);
    border-radius: var(--odoopro-radius);
    padding: 8px 18px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: none;
    transition: background-color var(--odoopro-tx),
                border-color var(--odoopro-tx),
                color var(--odoopro-tx);
}
.o_main_header .btn.btn-primary:hover {
    background: var(--odoopro-primary-hover);
    border-color: var(--odoopro-primary-hover);
    color: #ffffff;
}
.o_main_header .btn.btn-primary:active {
    background: var(--odoopro-primary-active);
    border-color: var(--odoopro-primary-active);
}
.o_main_header .btn.btn-primary:focus-visible {
    outline: 2px solid var(--odoopro-primary);
    outline-offset: 2px;
}

/* Mobile sidebar toggler */
.o_subheader .o_side_nav_toggler_wrapper button {
    color: var(--odoopro-ink);
    transition: background-color var(--odoopro-tx);
    border-radius: var(--odoopro-radius-sm);
}
.o_subheader .o_side_nav_toggler_wrapper button:hover {
    background-color: var(--odoopro-bg-soft);
}

/* =============================================================================
 * 2. Sub-header (language / version switchers)
 * ============================================================================= */
.o_subheader {
    background: var(--odoopro-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: inset 0 -1px 0 var(--odoopro-divider);
}
.o_subheader .dropdown-toggle,
.o_subheader .o_switcher_btn {
    border-radius: var(--odoopro-radius-sm);
    padding: 4px 12px;
    margin-inline: 4px;
    color: var(--odoopro-ink-soft);
    border: 1px solid transparent;
    background: transparent;
    transition: background-color var(--odoopro-tx),
                color var(--odoopro-tx),
                border-color var(--odoopro-tx);
    font-weight: 500;
}
.o_subheader .dropdown-toggle:hover,
.o_subheader .o_switcher_btn:hover {
    background: var(--odoopro-bg-soft);
    color: var(--odoopro-ink);
    border-color: var(--odoopro-divider);
}

/* =============================================================================
 * 2b. Side-nav anchoring
 *
 * The upstream `.o_side_nav-inner` is `position: fixed` but sets NO `top`:
 * it leans on its static position (pushed down by `#wrap`'s `margin-top:
 * $o-headers-height`) to land just below the fixed `<header>`. That implicit
 * anchor is brittle — the nav can resolve its top toward 0 and slide up
 * behind the header. Pin `top`/`height` explicitly to the known header
 * heights so it always starts at the header's bottom edge.
 *
 *   desktop (≥992px / lg): $o-header-height 80 + $o-subheader-height 32 = 112
 *   mobile  (<992px):      $o-header-mobile-height 50 + 32              =  82
 *
 * Also raise the fixed `<header>` above the side-nav: both default to
 * z-index 10, and the nav comes later in the DOM, so without this it can
 * paint over (or be overlapped by) the header.
 * ============================================================================= */
header {
    z-index: 1030;       /* above .o_side_nav-inner (z:10); below .o_scroll_progress (z:1031) */
}
@media (min-width: 992px) {
    .o_side_nav .o_side_nav-inner {
        top: 112px;
        height: calc(100vh - 112px);
        background: var(--odoopro-bg);
        border-inline-end: 1px solid var(--odoopro-divider);
    }
}
@media (max-width: 991.98px) {
    .o_side_nav .o_side_nav-inner {
        top: 82px;
        height: calc(100% - 82px);
        background: var(--odoopro-bg);
    }
}

/* =============================================================================
 * 3. Search box
 * ============================================================================= */
.o_main_header input[type="search"],
.o_main_header input[type="text"][name="q"],
.o_search_form input,
.o_searchbar input {
    border-radius: var(--odoopro-radius) !important;
    border: 1px solid var(--odoopro-divider-strong);
    background: var(--odoopro-bg-card);
    box-shadow: none;
    padding: 8px 16px;
    color: var(--odoopro-ink);
    transition: border-color var(--odoopro-tx),
                box-shadow var(--odoopro-tx),
                background-color var(--odoopro-tx);
}
.o_main_header input[type="search"]::placeholder,
.o_main_header input[type="text"][name="q"]::placeholder,
.o_search_form input::placeholder,
.o_searchbar input::placeholder {
    color: var(--odoopro-muted);
}
.o_main_header input[type="search"]:focus,
.o_main_header input[type="text"][name="q"]:focus,
.o_search_form input:focus,
.o_searchbar input:focus {
    border-color: var(--odoopro-primary);
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
    outline: none;
    background: var(--odoopro-bg-card);
}

/* =============================================================================
 * 4. Footer — Claude-style light, warm, editorial
 *
 * Layout model: a single `.o_footer` container owns the surface color,
 * the outer horizontal padding, and the top margin away from the article
 * content. Inner sections (`.o_get_help`, `.o_footer_columns`,
 * `.o_footer_bottom`) are transparent and inherit those outer dimensions,
 * so the footer matches a single-band footer's bounding box exactly —
 * critical because the side-nav can overlap the footer area on tall
 * pages and any width drift would misalign it.
 *
 * Visual: warm cream surface (one shade darker than the page) separated
 * by a hairline rule from the article. No gradient, no orbs, no
 * decorative shapes — text and rules carry the weight.
 * ============================================================================= */
.o_footer {
    position: relative;
    background: var(--odoopro-footer-bg);
    color: var(--odoopro-footer-ink);
    padding-right: calc(350px + 3rem);
    padding-top: 3rem;
    margin-top: 80px;
    border-top: 1px solid var(--odoopro-divider);
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
}
/* Decorative orbs removed — Claude's footer is intentionally quiet. */
.o_footer::before,
.o_footer::after {
    content: none;
}

/* Inner sections: transparent and use only block-direction padding.
   Horizontal padding is owned by `.o_footer` so all sections align. */
.o_footer .o_get_help {
    background: transparent;
    color: inherit;
    padding: 0 0 48px !important;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    isolation: auto;
}
.o_footer .o_get_help::before,
.o_footer .o_get_help::after {
    content: none;
}
/* Strip Bootstrap's default 12px gutter on the inner containers so
   the column grid and bottom strip align with the `.o_get_help` band
   (which has its own padding override). All horizontal inset comes
   from `.o_footer`'s outer padding. */
.o_footer .o_footer_columns > .container-fluid,
.o_footer .o_footer_bottom > .container-fluid {
    padding-inline: 0;
}

.o_get_help h4 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--odoopro-footer-ink);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.015em;
}
.o_get_help h4 .i-o-help,
.o_get_help h4 [class^="i-"],
.o_get_help h4 [class*=" i-"] {
    width: 36px;
    height: 36px;
    border-radius: var(--odoopro-radius);
    background: var(--odoopro-bg);
    color: var(--odoopro-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 1px solid var(--odoopro-footer-divider);
    box-shadow: none;
}

/* Help-section buttons — flat outline, quiet hover. */
.o_get_help .btn-outline-secondary {
    --bs-btn-color: var(--odoopro-ink);
    --bs-btn-border-color: var(--odoopro-divider-strong);
    --bs-btn-hover-color: var(--odoopro-ink);
    --bs-btn-hover-bg: var(--odoopro-bg);
    --bs-btn-hover-border-color: var(--odoopro-ink-soft);
    --bs-btn-active-bg: var(--odoopro-bg-soft);
    --bs-btn-active-border-color: var(--odoopro-ink);

    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider-strong);
    color: var(--odoopro-ink);
    border-radius: var(--odoopro-radius);
    padding: 8px 18px;
    margin-inline-end: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: none;
    transition: background-color var(--odoopro-tx),
                border-color var(--odoopro-tx),
                color var(--odoopro-tx);
}
.o_get_help .btn-outline-secondary:hover {
    background: var(--odoopro-bg);
    border-color: var(--odoopro-ink-soft);
    color: var(--odoopro-ink);
    box-shadow: none;
    transform: none;
}
.o_get_help .btn-outline-secondary:focus-visible {
    outline: 2px solid var(--odoopro-primary);
    outline-offset: 2px;
}

/* Footer logo block */
.o_get_help .o_logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: var(--odoopro-bg-card);
    border-radius: var(--odoopro-radius);
    border: 1px solid var(--odoopro-divider);
    transition: background-color var(--odoopro-tx),
                border-color var(--odoopro-tx);
}
.o_get_help .o_logo:hover {
    background: var(--odoopro-bg);
    border-color: var(--odoopro-divider-strong);
}
.o_get_help .o_logo img {
    opacity: 1;
    transition: opacity var(--odoopro-tx);
}

/* =============================================================================
 * 5. Side / page navigation polish (in-body, optional)
 * ============================================================================= */
.o_page_toc a,
.o_menu a,
nav.o_menu a {
    color: var(--odoopro-ink-soft);
    transition: color var(--odoopro-tx),
                background-color var(--odoopro-tx);
    border-radius: var(--odoopro-radius-sm);
}
.o_page_toc a:hover,
.o_menu a:hover,
nav.o_menu a:hover {
    color: var(--odoopro-primary);
    background-color: var(--odoopro-accent-soft);
    text-decoration: none;
}
.o_page_toc .current > a,
.o_menu .current > a {
    color: var(--odoopro-primary);
    font-weight: 600;
}

/* =============================================================================
 * 6. Article / content micro-polish (subtle, opt-in)
 * ============================================================================= */
.rst-content a:not(.btn):not(.o_logo) {
    color: var(--odoopro-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--odoopro-tx);
}
.rst-content a:not(.btn):not(.o_logo):hover {
    color: var(--odoopro-accent);
}

/* Inline code — warm beige chip, Claude-style. */
.rst-content code.literal,
.rst-content tt.literal,
.rst-content code:not(.literal-block code) {
    background: var(--odoopro-bg-code);
    border: 1px solid var(--odoopro-divider);
    border-radius: var(--odoopro-radius-sm);
    padding: 1px 6px;
    color: var(--odoopro-ink);
    font-size: 0.875em;
}

/* Code blocks — cream surface with quiet border, no heavy shadow. */
.rst-content pre,
.rst-content div.highlight pre,
.highlight pre {
    background: var(--odoopro-bg-code);
    border: 1px solid var(--odoopro-divider);
    border-radius: var(--odoopro-radius);
    box-shadow: none;
    color: var(--odoopro-ink);
}

/* Blockquote — subtle left rule in coral. */
.rst-content blockquote {
    border-inline-start: 3px solid var(--odoopro-primary);
    background: var(--odoopro-bg-soft);
    color: var(--odoopro-ink-soft);
    padding: 12px 18px;
    border-radius: var(--odoopro-radius-sm) 0 0 var(--odoopro-radius-sm);
    margin-block: 16px;
}

/* Cards — minimal border, hover just shifts background a touch. */
.sd-card,
.cards .card,
.card-grid .card {
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider) !important;
    border-radius: var(--odoopro-radius) !important;
    box-shadow: none;
    transition: border-color var(--odoopro-tx),
                box-shadow var(--odoopro-tx),
                background-color var(--odoopro-tx);
    overflow: hidden;
}
.sd-card:hover,
.cards .card:hover,
.card-grid .card:hover {
    transform: none;
    border-color: var(--odoopro-divider-strong);
    box-shadow: var(--odoopro-shadow-sm);
    background: var(--odoopro-bg-card);
}

/* Tables — warm header, hairline borders, no zebra by default. */
.rst-content table.docutils,
.rst-content table.docutils.field-list,
.wy-table-responsive table {
    border: 1px solid var(--odoopro-divider);
    border-radius: var(--odoopro-radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.rst-content table.docutils thead th,
.wy-table-responsive table thead th {
    background: var(--odoopro-bg-soft);
    color: var(--odoopro-ink);
    font-weight: 600;
    border-bottom: 1px solid var(--odoopro-divider) !important;
}
.rst-content table.docutils td,
.rst-content table.docutils th,
.wy-table-responsive table td,
.wy-table-responsive table th {
    border-color: var(--odoopro-divider) !important;
}

/* Headings — tighten letter-spacing slightly, Claude-editorial feel. */
.rst-content h1,
.rst-content h2,
.rst-content h3,
.rst-content h4 {
    color: var(--odoopro-ink);
    letter-spacing: -0.02em;
}

/* Buttons in article body — match header CTA tone. */
.rst-content .btn-primary,
a.btn-primary {
    background: var(--odoopro-primary);
    border-color: var(--odoopro-primary);
    color: #ffffff;
    border-radius: var(--odoopro-radius);
    box-shadow: none;
    transition: background-color var(--odoopro-tx),
                border-color var(--odoopro-tx);
}
.rst-content .btn-primary:hover,
a.btn-primary:hover {
    background: var(--odoopro-primary-hover);
    border-color: var(--odoopro-primary-hover);
    color: #ffffff;
}
.rst-content .btn-secondary,
a.btn-secondary {
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider-strong);
    color: var(--odoopro-ink);
    border-radius: var(--odoopro-radius);
    box-shadow: none;
}
.rst-content .btn-secondary:hover,
a.btn-secondary:hover {
    background: var(--odoopro-bg);
    border-color: var(--odoopro-ink-soft);
    color: var(--odoopro-ink);
}

/* =============================================================================
 * 7. Responsive tweaks
 * ============================================================================= */
@media (max-width: 991.98px) {
    .o_main_header .o_logo_wrapper { padding-inline: 16px; }
    .o_get_help                    { padding: 36px 20px !important; margin-top: 48px; }
    .o_get_help h4                 { font-size: 1.15rem; }

    /* Let the header shrink instead of forcing horizontal overflow, and keep
       the logo + search on one row that can wrap if it must. */
    .o_main_header                 { flex-wrap: wrap; }

    /* Keep the logo block content-sized. Without this it grows to the full
       header width once the search box wraps to its own flex line: the
       wrapper is a block <div> whose width follows its content, and the logo
       image below would otherwise scale up to fill the row. */
    .o_main_header .o_logo_wrapper { flex: 0 0 auto; width: auto; }

    /* Pin the logo to its small fixed height (matches odoopro_theme_logo_height)
       with width following. Using `height: auto` + `max-width: 100%` instead
       lets the image scale UP to the row width — that was the full-width bug. */
    .o_main_header .o_logo img     { height: 20px; width: auto; max-width: 100%; }

    /* The "Documentation" wordmark next to the logo is redundant on small
       screens (the brand image carries it) and eats horizontal space — hide
       it once the layout collapses to the hamburger/mobile view. */
    .o_main_header .o_logo span    { display: none; }
}

/* Guard against any descendant forcing the page wider than the viewport,
   which makes mobile browsers zoom out (content appears "smaller than the
   screen"). Header and footer are full-bleed and must never overflow. */
@media (max-width: 991.98px) {
    html, body                     { max-width: 100%; overflow-x: hidden; }
    .o_main_header, .o_subheader,
    .o_footer                      { max-width: 100vw; }
}

/* =============================================================================
 * 8. RTL adjustments
 *
 * Anything above that uses logical properties (margin-inline-*, inset-inline-*)
 * works in RTL out of the box. The few rules below cover the remaining
 * directional cases where logical properties don't yet have wide UA support
 * or where the design intent depends on text direction.
 * ============================================================================= */
html[lang|="fa"] .o_main_header .o_logo span,
html[lang|="ar"] .o_main_header .o_logo span,
html[lang|="he"] .o_main_header .o_logo span,
html[lang|="ur"] .o_main_header .o_logo span {
    font-family: inherit;            /* Abar takes over via custom-fonts.css */
    letter-spacing: 0;
    text-transform: none;
}
html[lang|="fa"] .o_get_help h4,
html[lang|="ar"] .o_get_help h4,
html[lang|="he"] .o_get_help h4,
html[lang|="ur"] .o_get_help h4 {
    letter-spacing: 0;
}

/* =============================================================================
 * 9. Footer column grid
 *
 * Sits below the "Get Help" band inside `.o_footer`. The container is
 * transparent and uses only block-direction padding so the columns
 * align with the band above.
 * ============================================================================= */
.o_footer_columns {
    padding: 28px 0 32px;
    border-top: 1px solid var(--odoopro-footer-divider);
}

.o_footer_column .o_footer_col_title {
    font-size: 0.75rem;              /* 12px */
    font-weight: 700;
    color: var(--odoopro-footer-ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px;
    padding-inline-start: 0;
    border-inline-start: 0;
    line-height: 1.4;
}

.o_footer_links li {
    line-height: 1.2;
}
.o_footer_links a {
    display: inline-block;
    padding-block: 5px;
    color: var(--odoopro-footer-ink-soft);
    font-size: 0.875rem;             /* 14px */
    text-decoration: none;
    transition: color var(--odoopro-tx);
}
.o_footer_links a:hover,
.o_footer_links a:focus-visible {
    color: var(--odoopro-primary);
    transform: none;
    text-decoration: none;
}
.o_footer_links a:focus-visible {
    outline: 2px solid var(--odoopro-primary);
    outline-offset: 3px;
    border-radius: var(--odoopro-radius-sm);
}

/* Brand block (4th column).
 *
 * Free-floating logo (no card chrome) — the warm cream surface itself
 * is the anchor. We size the logo larger than the header copy (the
 * `height` HTML attribute is overridden in CSS), and let it sit at
 * full opacity since the surface is light. */
.o_footer_brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.o_footer_brand_logo {
    display: inline-flex;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: opacity var(--odoopro-tx);
}
.o_footer_brand_logo:hover {
    opacity: 0.85;
    transform: none;
}
.o_footer_brand_logo img {
    /* Override the inline `height` attr coming from header logo config. */
    height: 32px;
    width: auto;
    opacity: 1;
    transition: opacity var(--odoopro-tx);
}
.o_footer_tagline {
    margin: 0;
    font-size: 0.875rem;
    color: var(--odoopro-footer-ink-soft);
    font-style: normal;
    max-width: 280px;
    line-height: 1.55;
}
.o_footer_socials {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.o_footer_social {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--odoopro-radius);
    color: var(--odoopro-footer-ink-soft);
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-footer-divider);
    transition: color var(--odoopro-tx),
                background-color var(--odoopro-tx),
                border-color var(--odoopro-tx);
}
.o_footer_social:hover,
.o_footer_social:focus-visible {
    color: var(--odoopro-primary);
    background: var(--odoopro-bg);
    border-color: var(--odoopro-primary);
    transform: none;
}
.o_footer_social:focus-visible {
    outline: 2px solid var(--odoopro-primary);
    outline-offset: 2px;
}
.o_footer_social svg {
    display: block;
}

/* =============================================================================
 * 10. Footer bottom strip — legal links + copyright
 * ============================================================================= */
.o_footer_bottom {
    padding: 18px 0;
    border-top: 1px solid var(--odoopro-footer-divider);
    font-size: 0.8125rem;
    color: var(--odoopro-footer-ink-soft);
    gap: 10px;
}
.o_footer_bottom .o_footer_legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
}
.o_footer_bottom .o_footer_legal a {
    color: var(--odoopro-footer-ink-soft);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: var(--odoopro-radius-sm);
    transition: color var(--odoopro-tx),
                background-color var(--odoopro-tx);
}
.o_footer_bottom .o_footer_legal a:hover,
.o_footer_bottom .o_footer_legal a:focus-visible {
    color: var(--odoopro-primary);
    background: transparent;
    text-decoration: none;
}
.o_footer_bottom .o_footer_dot {
    color: var(--odoopro-footer-divider);
    padding-inline: 2px;
    user-select: none;
}
.o_footer_bottom .o_footer_copyright {
    color: var(--odoopro-footer-ink-soft);
    white-space: nowrap;
}
footer .o_get_help h4, footer .o_get_help .h4 {
    color: var(--odoopro-footer-ink);
}

/* =============================================================================
 * 11. Header polish — scroll-progress bar, kbd chip, version pulse dot
 * ============================================================================= */

/* Scroll-progress bar. Single solid coral — flat, no gradient.
   Width driven by --scroll-pct (written by static/js/custom-theme.js on
   scroll/resize). */
.o_scroll_progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 2px;
    width: var(--scroll-pct, 0%);
    background: var(--odoopro-primary);
    z-index: 1031;       /* above sticky .o_main_header (1030) */
    pointer-events: none;
    transition: width 80ms linear;
    will-change: width;
}

/* Scroll-state header lift — tighter border tone once the user has
   scrolled past the first few pixels. Hairline shadow, no glow. */
.o_main_header.o_scrolled {
    box-shadow: var(--odoopro-shadow-xs);
    border-bottom-color: var(--odoopro-divider-strong) !important;
}

/* Search-box keyboard-shortcut chip (`⌘ K`).
 *
 * Rendered inside `.o_search` by our overridden `searchbox.html`. The
 * upstream form is `position: relative` (odoo_theme/static/style.scss:122)
 * and its submit `.btn` sits at `right: 0.5rem` (≈ 8px from the
 * trailing edge, ≈ 32px wide). We park the chip past the button at
 * `inset-inline-end: 48px`, and pad the input's trailing side to
 * 96px so the placeholder text never runs under either element.
 *
 * Logical properties drive direction:
 *   • In LTR: chip + button live on the right edge.
 *   • In RTL: rtlcss flips upstream `right` → `left`; our
 *     `inset-inline-end` and `padding-inline-end` flip to the left
 *     side natively. Both end up on the same side as the button.
 */
.o_main_header .o_search {
    position: relative;     /* defensive — upstream already sets this */
}
.o_search_kbd {
    position: absolute;
    top: 50%;
    inset-inline-end: 48px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: var(--odoopro-bg-soft);
    border: 1px solid var(--odoopro-divider);
    border-radius: var(--odoopro-radius-sm);
    color: var(--odoopro-ink-soft);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    pointer-events: none;
    user-select: none;
    box-shadow: inset 0 -1px 0 var(--odoopro-divider);
    transition: opacity 150ms var(--odoopro-ease);
    z-index: 2;
}
/* Pad the search input's trailing side so the placeholder clears
   BOTH the upstream submit button AND the kbd chip. */
.o_main_header .o_search .form-control,
.o_main_header .o_search input[type="text"][name="q"] {
    padding-inline-end: 96px;
}
/* Hide chip on focus — input is in active use, chip would be redundant. */
.o_main_header .o_search:focus-within .o_search_kbd {
    opacity: 0;
}

/* Version-switcher pulse dot. Always shown when the wrapper has
   `.has-pulse`; toggle via odoopro_theme_version_pulse_visible. */
.o_version_switcher_wrapper {
    position: relative;
}
.o_version_switcher_wrapper.has-pulse::after {
    content: "";
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--odoopro-primary);
    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.50);
    animation: o_pulse 2s var(--odoopro-ease) infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes o_pulse {
    0%   { box-shadow: 0 0 0 0   rgba(217, 119, 87, 0.50); transform: scale(1);   }
    70%  { box-shadow: 0 0 0 9px rgba(217, 119, 87, 0.00); transform: scale(1.12);}
    100% { box-shadow: 0 0 0 0   rgba(217, 119, 87, 0.00); transform: scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
    .o_version_switcher_wrapper.has-pulse::after { animation: none; }
    .o_scroll_progress { transition: none; }
}

/* =============================================================================
 * 12. Footer responsive tweaks
 * ============================================================================= */
@media (max-width: 991.98px) {
    /* Critical: on desktop `.o_footer` reserves `padding-right: calc(350px +
       3rem)` to clear the fixed side-nav. On mobile the nav is an off-canvas
       drawer, so that reservation just pushes the footer wider than the
       viewport (horizontal scroll / zoomed-out page). Reset to a symmetric
       gutter so the footer fits the screen. */
    .o_footer                  { padding: 36px 20px 0; margin-top: 48px; }
    .o_footer .o_get_help      { padding: 0 0 28px !important; }
    .o_footer_columns          { padding: 20px 0 24px; }
    .o_footer_bottom           { padding: 14px 0; }
    .o_footer_bottom .container-fluid {
        justify-content: center;
        text-align: center;
    }
    .o_footer_brand            { align-items: flex-start; }
}

/* =============================================================================
 * 13. RTL adjustments for the new layers
 * ============================================================================= */
html[lang|="fa"] .o_footer_col_title,
html[lang|="ar"] .o_footer_col_title,
html[lang|="he"] .o_footer_col_title,
html[lang|="ur"] .o_footer_col_title {
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.875rem;             /* Persian text reads better a touch larger */
}
html[lang|="fa"] .o_footer_tagline,
html[lang|="ar"] .o_footer_tagline,
html[lang|="he"] .o_footer_tagline,
html[lang|="ur"] .o_footer_tagline {
    font-style: normal;              /* italic is LTR-only */
}
html[lang|="fa"] .o_search_kbd,
html[lang|="ar"] .o_search_kbd,
html[lang|="he"] .o_search_kbd,
html[lang|="ur"] .o_search_kbd {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0;
}

/* =============================================================================
 * 14. Toctree cards (`.o_toctree_card`)
 *
 * Used heavily on landing/index pages (e.g. accounting.html, developer.html).
 * Markup: <a class="o_toctree_card col"><div class="card h-100">
 *           <div class="card-body"><h4 class="card-title text-primary">…</h4>
 *           <p class="card-text text-dark">…</p></div>
 *           <div class="card-footer border-0"></div></div></a>
 *
 * Upstream (odoo_theme/static/style.scss:1169) only tints the card on hover
 * with a teal wash. We override to Claude's editorial card: warm paper
 * surface, hairline border, title in ink (NOT coral), description in soft
 * ink, hover lifts the border to a stronger tone and adds a tonal shadow.
 * The `.text-primary` Bootstrap utility on the title is overridden with
 * `!important` because the title color is structural to this design.
 * ============================================================================= */
.o_toctree_card {
    text-decoration: none;
    color: inherit;
}
.o_toctree_card .card {
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider) !important;
    border-radius: var(--odoopro-radius) !important;
    box-shadow: none;
    transition: border-color var(--odoopro-tx),
                box-shadow var(--odoopro-tx),
                background-color var(--odoopro-tx);
}
.o_toctree_card:hover {
    text-decoration: none;
    cursor: pointer;
}
.o_toctree_card:hover .card {
    background: var(--odoopro-bg-card);
    border-color: var(--odoopro-primary) !important;
    box-shadow: var(--odoopro-shadow-sm);
}
.o_toctree_card:focus-visible {
    outline: none;
}
.o_toctree_card:focus-visible .card {
    border-color: var(--odoopro-primary) !important;
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18);
}

.o_toctree_card .card-body {
    padding: 18px 20px 14px;
}
.o_toctree_card .card-title,
.o_toctree_card .card-title.text-primary {
    color: var(--odoopro-ink) !important;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    margin-bottom: 6px;
    transition: color var(--odoopro-tx);
}
.o_toctree_card:hover .card-title,
.o_toctree_card:hover .card-title.text-primary {
    color: var(--odoopro-primary) !important;
}
.o_toctree_card .card-text,
.o_toctree_card .card-text.text-dark {
    color: var(--odoopro-ink-soft) !important;
    font-size: 0.9rem;
    font-weight: 400 !important;
    line-height: 1.55;
    margin-bottom: 0;
}
.o_toctree_card .card-footer {
    background: transparent;
    border: 0 !important;
    padding: 10px 20px 16px;
}

/* =============================================================================
 * 15. Index page banner (`.o_index .o_content_fw_banner`)
 *
 * Upstream (odoo_theme/static/style.scss:471) paints this with the Odoo
 * purple gradient (#714B67 → #62495B). Override to a flat warm cream
 * surface with a coral accent rule on the inline edge — the Claude
 * homepage banner pattern: quiet, paper-like, with a single colored
 * mark drawing the eye. Keep upstream margin/padding intact.
 * ============================================================================= */
.o_index .o_content_fw_banner {
    background: linear-gradient(-99deg, var(--odoopro-primary) 10%, var(--odoopro-primary-hover) 90%);
    border: 1px solid var(--odoopro-divider);
    border-inline-start: 4px solid var(--odoopro-primary);
    border-radius: var(--odoopro-radius);
    color: var(--odoopro-ink);
}
.o_index .o_content_fw_banner h1,
.o_index .o_content_fw_banner h2,
.o_index .o_content_fw_banner h3 {
    color: var(--odoopro-ink);
}
.o_index .o_content_fw_banner p,
.o_index .o_content_fw_banner li {
    color: var(--odoopro-ink-soft);
}
.o_index .o_content_fw_banner a:not(.btn) {
    color: var(--odoopro-primary);
}
.o_index .o_content_fw_banner .btn-primary {
    background: var(--odoopro-primary);
    border-color: var(--odoopro-primary);
    color: #ffffff;
}
.o_index .o_content_fw_banner .btn-primary:hover {
    background: var(--odoopro-primary-hover);
    border-color: var(--odoopro-primary-hover);
}

/* =============================================================================
 * 16. Alerts / admonitions (note, tip, warning, danger, seealso, exercise)
 *
 * Sphinx emits `.alert.alert-{type}` with an `.alert-title` heading. The
 * upstream theme uses Bootstrap's shifted background/border. We retone
 * them to Claude's quiet style: tinted warm surface, a single colored
 * inline-start rule (left in LTR, right in RTL — `border-inline-start`
 * handles both), no heavy fill. Each variant gets its own accent hue
 * but the surface stays consistent and paper-like.
 * ============================================================================= */
.rst-content .alert,
.alert {
    background: var(--odoopro-bg-soft);
    color: var(--odoopro-ink);
    border: 1px solid var(--odoopro-divider);
    border-inline-start: 4px solid var(--odoopro-ink-soft);
    border-radius: var(--odoopro-radius);
    padding: 14px 18px;
    box-shadow: none;
}
.rst-content .alert .alert-title,
.rst-content .alert > h3,
.alert .alert-title,
.alert > h3 {
    color: var(--odoopro-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.rst-content .alert a,
.alert a {
    color: var(--odoopro-primary);
}
.rst-content .alert code,
.rst-content .alert .o_code,
.alert code,
.alert .o_code {
    background: var(--odoopro-bg-card) !important;
    border-color: var(--odoopro-divider) !important;
    color: var(--odoopro-ink);
}

/* Variants — each picks up a distinct accent hue on the rule and title
   while keeping the surface uniform. */
.rst-content .alert-primary,
.alert-primary,
.rst-content .alert-tip,
.alert-tip {
    border-inline-start-color: var(--odoopro-primary);
    background: rgba(217, 119, 87, 0.06);
}
.rst-content .alert-primary .alert-title,
.alert-primary .alert-title,
.rst-content .alert-tip .alert-title,
.alert-tip .alert-title {
    color: var(--odoopro-primary);
}

.rst-content .alert-secondary,
.alert-secondary {
    border-inline-start-color: var(--odoopro-ink-soft);
    background: var(--odoopro-bg-soft);
}
.rst-content .alert-secondary .alert-title,
.alert-secondary .alert-title {
    color: var(--odoopro-ink);
}

.rst-content .alert-success,
.alert-success {
    border-inline-start-color: #4F7A4D;
    background: rgba(79, 122, 77, 0.06);
}
.rst-content .alert-success .alert-title,
.alert-success .alert-title {
    color: #3F6440;
}

.rst-content .alert-warning,
.alert-warning {
    border-inline-start-color: #C68B2A;
    background: rgba(198, 139, 42, 0.07);
}
.rst-content .alert-warning .alert-title,
.alert-warning .alert-title {
    color: #8D6017;
}

.rst-content .alert-danger,
.alert-danger {
    border-inline-start-color: #B5402E;
    background: rgba(181, 64, 46, 0.06);
}
.rst-content .alert-danger .alert-title,
.alert-danger .alert-title {
    color: #8E2F22;
}

.rst-content .alert-info,
.alert-info {
    border-inline-start-color: #3B6B8C;
    background: rgba(59, 107, 140, 0.06);
}
.rst-content .alert-info .alert-title,
.alert-info .alert-title {
    color: #2C536D;
}

.rst-content .alert-dark,
.alert-dark {
    border-inline-start-color: var(--odoopro-ink);
    background: var(--odoopro-bg-soft);
}
.rst-content .alert-dark .alert-title,
.alert-dark .alert-title {
    color: var(--odoopro-ink);
}

/* =============================================================================
 * 17. Sphinx tabs (`.sphinx-tabs`)
 *
 * Upstream paints the tab strip on `$o-gray-bg` with selected tab on
 * white. We retone to the warm palette: unselected tabs sit on cream
 * with soft ink, selected tab pops to the card surface with a coral
 * underline (instead of side-borders — cleaner editorial feel).
 * ============================================================================= */
.sphinx-tabs .sphinx-tabs-tab {
    background: var(--odoopro-bg-soft);
    color: var(--odoopro-ink-soft);
    border: 1px solid var(--odoopro-divider) !important;
    border-bottom: 1px solid var(--odoopro-divider) !important;
    border-radius: var(--odoopro-radius-sm) var(--odoopro-radius-sm) 0 0;
    font-weight: 500;
    padding: 8px 16px;
    transition: background-color var(--odoopro-tx),
                color var(--odoopro-tx),
                border-color var(--odoopro-tx);
}
.sphinx-tabs .sphinx-tabs-tab:hover:not([aria-selected="true"]) {
    background: var(--odoopro-bg);
    color: var(--odoopro-ink);
}
.sphinx-tabs .sphinx-tabs-tab[aria-selected="true"] {
    background: var(--odoopro-bg-card);
    color: var(--odoopro-ink);
    border-color: var(--odoopro-divider) !important;
    border-bottom-color: var(--odoopro-bg-card) !important;
    font-weight: 600;
    position: relative;
}
.sphinx-tabs .sphinx-tabs-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    height: 2px;
    background: var(--odoopro-primary);
    border-radius: 2px 2px 0 0;
}
.sphinx-tabs .sphinx-tabs-panel {
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider);
    border-radius: var(--odoopro-radius-sm) 0 var(--odoopro-radius-sm) var(--odoopro-radius-sm);
    color: var(--odoopro-ink);
}

/* =============================================================================
 * 18. Keyboard / GUI / menu inline tokens
 *
 * Sphinx emits:
 *   <kbd class="kbd o_code docutils literal notranslate">Enter</kbd>
 *   <span class="guilabel">Save</span>
 *   <span class="menuselection">File → Open</span>
 * ============================================================================= */
.rst-content kbd.kbd,
kbd.kbd,
.rst-content .kbd {
    display: inline-block;
    padding: 1px 7px;
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider-strong);
    border-bottom-width: 2px;
    border-radius: var(--odoopro-radius-sm);
    color: var(--odoopro-ink);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125em;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
    white-space: nowrap;
}

.rst-content .guilabel,
.guilabel {
    display: inline-block;
    padding: 1px 7px;
    background: rgba(217, 119, 87, 0.08);
    color: var(--odoopro-primary);
    border: 1px solid rgba(217, 119, 87, 0.25);
    border-radius: var(--odoopro-radius-sm);
    font-weight: 600;
    font-size: 0.92em;
}

/* Menu-path breadcrumb, e.g. Settings ‣ Users ‣ Activity Types (rendered
 * with a left-facing ↤ arrow on RTL builds — see _RTLMenuSelection in the
 * odoopro_theme extension). Boxed on a warm surface with a hairline border so
 * the navigation path reads as one discrete token inside running text. Uses
 * the body font (not monospace) so Persian/Arabic labels shape correctly. */
.rst-content .menuselection,
.menuselection {
    display: inline-block;
    padding: 2px 8px;
    background: var(--odoopro-bg-soft);
    border: 1px solid var(--odoopro-divider-strong);
    border-radius: var(--odoopro-radius-sm);
    color: var(--odoopro-ink);
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.5;
}

/* =============================================================================
 * 19. API / reference signatures (`.sig`, `dl.field-list`)
 *
 * The signature blocks generated by sphinx autodoc — function/class
 * definitions and their parameter tables. Quiet warm surface, hairline
 * border, monospace.
 * ============================================================================= */
.rst-content dl.py > dt,
.rst-content dl.js > dt,
.rst-content dl.o-definition-list > dt {
    background: var(--odoopro-bg-soft);
    border: 1px solid var(--odoopro-divider);
    border-inline-start: 3px solid var(--odoopro-primary);
    border-radius: var(--odoopro-radius-sm);
    padding: 8px 12px;
    color: var(--odoopro-ink);
}
.rst-content dl.py > dd,
.rst-content dl.js > dd,
.rst-content dl.o-definition-list > dd {
    border-inline-start-color: var(--odoopro-divider) !important;
}
.rst-content .sig {
    color: var(--odoopro-ink);
}
.rst-content .sig .sig-name {
    color: var(--odoopro-primary);
    font-weight: 600;
}
.rst-content .sig em.property {
    color: var(--odoopro-ink-soft);
    font-style: normal;
}

.rst-content dl.field-list {
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider) !important;
    border-radius: var(--odoopro-radius);
    padding: 12px 14px;
}
.rst-content dl.field-list > dt {
    color: var(--odoopro-ink);
    font-weight: 600;
}

/* =============================================================================
 * 20. Form controls — inputs, checkboxes, radios, selects, textareas
 *
 * Used in any embedded form (search, feedback widgets, contrib pages).
 * Claude-style: cream surface, hairline border, coral focus ring,
 * coral accent on checked checkboxes/radios (via `accent-color`).
 * ============================================================================= */
.rst-content input[type="text"],
.rst-content input[type="email"],
.rst-content input[type="search"],
.rst-content input[type="url"],
.rst-content input[type="tel"],
.rst-content input[type="number"],
.rst-content input[type="password"],
.rst-content textarea,
.rst-content select,
.form-control,
.form-select {
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider-strong);
    border-radius: var(--odoopro-radius);
    color: var(--odoopro-ink);
    padding: 8px 12px;
    box-shadow: none;
    transition: border-color var(--odoopro-tx),
                box-shadow var(--odoopro-tx);
}
.rst-content input[type="text"]::placeholder,
.rst-content input[type="email"]::placeholder,
.rst-content input[type="search"]::placeholder,
.rst-content textarea::placeholder,
.form-control::placeholder {
    color: var(--odoopro-muted);
}
.rst-content input:focus,
.rst-content textarea:focus,
.rst-content select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--odoopro-primary);
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
    outline: none;
    background: var(--odoopro-bg-card);
    color: var(--odoopro-ink);
}

/* -----------------------------------------------------------------------------
 * Checkboxes & radios — fully custom, no class required.
 *
 * Hits ANY `<input type="checkbox">` / `<input type="radio">` on the page,
 * including third-party widgets (react components, embedded forms) that
 * render bare `<input>`s with no Bootstrap class.
 *
 * Strategy:
 *   1. `appearance: none` strips the native control across all UAs.
 *   2. We paint our own surface, border, and check/dot using inline SVG
 *      background-images so no extra DOM (::before/::after) is needed —
 *      this is robust against React rerenders that nuke pseudo-elements
 *      in certain shadow-DOM-ish contexts.
 *   3. The unchecked state has NO background-image; the checked state
 *      swaps in a white check (square) or white dot (radius).
 *
 * Sizing: 16px square base, scaled up to 18px on standalone usage. The
 * input keeps `vertical-align: middle` so it lines up with adjacent text.
 *
 * RTL: pure geometry — no directional properties used, so RTL is free.
 * --------------------------------------------------------------------------- */
/* ---- Checkbox / radio design tokens ------------------------------------- */
:root {
    /* Unchecked — warm cream surface, soft tan border (palette-driven). */
    --odoopro-check-bg:           var(--odoopro-bg-soft);
    --odoopro-check-border:       var(--odoopro-divider-strong);
    --odoopro-check-hover-border: var(--odoopro-primary);
    --odoopro-check-hover-bg:     rgba(217, 119, 87, 0.06);

    /* Checked — solid coral. */
    --odoopro-check-on-bg:        var(--odoopro-primary);
    --odoopro-check-on-border:    var(--odoopro-primary);
    --odoopro-check-on-mark:      #ffffff;          /* check/dot color */
    --odoopro-check-on-hover-bg:  var(--odoopro-primary-hover);

    /* Geometry — checkbox uses the design-system small radius; radio is
       always a circle (50%). Override either to retune both controls at
       once. */
    --odoopro-check-size:         16px;
    --odoopro-checkbox-radius:    var(--odoopro-radius-sm);   /* 6px */
    --odoopro-radio-radius:       50%;
    --odoopro-check-border-w:     1.5px;

    /* Focus ring — coral, low-alpha. */
    --odoopro-check-focus-ring:   0 0 0 3px rgba(217, 119, 87, 0.22);
}

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--odoopro-check-size);
    height: var(--odoopro-check-size);
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--odoopro-check-bg);
    border: var(--odoopro-check-border-w) solid var(--odoopro-check-border);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70% 70%;
    color: var(--odoopro-ink);
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--odoopro-tx),
                border-color var(--odoopro-tx),
                box-shadow var(--odoopro-tx);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/* Shape — checkbox uses the design-system small radius token. */
input[type="checkbox"] {
    border-radius: var(--odoopro-checkbox-radius);
}
input[type="radio"] {
    border-radius: var(--odoopro-radio-radius);
}

/* Hover (unchecked) — preview the checked accent: coral border + faint
   coral wash on the surface. */
input[type="checkbox"]:hover:not(:disabled):not(:checked):not(:indeterminate),
input[type="radio"]:hover:not(:disabled):not(:checked) {
    border-color: var(--odoopro-check-hover-border);
    background-color: var(--odoopro-check-hover-bg);
}

/* Focus — coral ring, mirrors all other focused controls. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: none;
    border-color: var(--odoopro-primary);
    box-shadow: var(--odoopro-check-focus-ring);
}

/* Checked — coral fill + white mark.
   Inline SVGs are URL-encoded; coordinates target a 16x16 viewBox. */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--odoopro-check-on-bg);
    border-color: var(--odoopro-check-on-border);
}

/* Hover (checked) — darken the coral slightly. */
input[type="checkbox"]:checked:hover:not(:disabled),
input[type="radio"]:checked:hover:not(:disabled),
input[type="checkbox"]:indeterminate:hover:not(:disabled) {
    background-color: var(--odoopro-check-on-hover-bg);
    border-color: var(--odoopro-check-on-hover-bg);
}
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5,8.5 6.5,11.5 12.5,4.5'/%3E%3C/svg%3E");
}
input[type="radio"]:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Indeterminate checkbox (set via JS: `el.indeterminate = true`). */
input[type="checkbox"]:indeterminate {
    background-color: var(--odoopro-check-on-bg);
    border-color: var(--odoopro-check-on-border);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.5' y='7' width='9' height='2' rx='1' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Disabled — muted surface, no pointer. */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background-color: var(--odoopro-bg-soft);
    border-color: var(--odoopro-divider);
    opacity: 0.55;
    cursor: not-allowed;
}
input[type="checkbox"]:disabled:checked,
input[type="radio"]:disabled:checked,
input[type="checkbox"]:disabled:indeterminate {
    background-color: var(--odoopro-ink-soft);
    border-color: var(--odoopro-ink-soft);
}

/* Bootstrap's `.form-check-input` class — keep it consistent with the
   bare-input styling above so pages mixing both look identical. */
.form-check-input {
    /* inherits the type-selector rules; this block exists only as
       documentation that we intentionally don't re-style it separately. */
}
.form-check-label {
    color: var(--odoopro-ink);
}

/* =============================================================================
 * 21. Generic buttons (any `.btn` not already targeted above)
 *
 * Picks up `.btn` instances in toctree wrappers, feedback widgets, the
 * help section, etc. — anything without a more specific selector earlier.
 * ============================================================================= */
.rst-content .btn,
article .btn {
    border-radius: var(--odoopro-radius);
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: none;
    transition: background-color var(--odoopro-tx),
                border-color var(--odoopro-tx),
                color var(--odoopro-tx);
}
.rst-content .btn-outline-secondary,
article .btn-outline-secondary {
    --bs-btn-color: var(--odoopro-ink);
    --bs-btn-border-color: var(--odoopro-divider-strong);
    --bs-btn-hover-color: var(--odoopro-ink);
    --bs-btn-hover-bg: var(--odoopro-bg);
    --bs-btn-hover-border-color: var(--odoopro-ink-soft);
    background: var(--odoopro-bg-card);
    color: var(--odoopro-ink);
    border: 1px solid var(--odoopro-divider-strong);
}
.rst-content .btn-outline-secondary:hover,
article .btn-outline-secondary:hover {
    background: var(--odoopro-bg);
    border-color: var(--odoopro-ink-soft);
    color: var(--odoopro-ink);
}
.rst-content .btn:focus-visible,
article .btn:focus-visible {
    outline: 2px solid var(--odoopro-primary);
    outline-offset: 2px;
}

/* =============================================================================
 * 22. Dropdown menus (language / version switchers)
 *
 * `.dropdown-menu` is used by the sub-header switchers. Retone for the
 * cream palette so the open menu sits on the card surface, hairline
 * border, soft hover.
 * ============================================================================= */
.dropdown-menu {
    background: var(--odoopro-bg-card);
    border: 1px solid var(--odoopro-divider);
    border-radius: var(--odoopro-radius);
    box-shadow: var(--odoopro-shadow-md);
    padding: 6px;
}
.dropdown-menu .dropdown-item,
.dropdown-menu .o_switcher_item {
    border-radius: var(--odoopro-radius-sm);
    color: var(--odoopro-ink);
    padding: 6px 10px;
    transition: background-color var(--odoopro-tx),
                color var(--odoopro-tx);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .o_switcher_item:hover,
.dropdown-menu .o_switcher_item:focus {
    background: var(--odoopro-bg-soft);
    color: var(--odoopro-primary);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .o_switcher_item.active {
    background: var(--odoopro-accent-soft);
    color: var(--odoopro-primary);
    font-weight: 600;
}
/* =============================================================================
 * 23. Card-grid landing pages — let `.o_toctree_card` rules above govern
 *
 * On `.o_fullwidth_page` (developer.html-style index pages) the cards
 * appear inside a `<ul>` whose `<li>` get a 33% width and a right gutter
 * from the upstream theme. Nothing extra needed here — the card visual
 * is owned by §14 and the structural width comes from the upstream rules
 * (style.scss:514). Documenting the contract so future edits don't
 * accidentally fight the layout.
 * ============================================================================= */