Merge branch 'main' of https://github.com/gsinghpal/Odoo-Modules

fusion_claims/CLAUDE.md

@@ -3104,3 +3104,72 @@ After 9 rounds of deep diving, here's what CLAUDE.md covers vs the codebase:
 - Add new gotchas in the right format
 - Understand the soft-dep on `fusion_faxes` + `fusion_pdf_preview`
 - Know the deployment fact that fusion_portal is always co-installed
+
+## 47. Service Booking wizard — two CSS gotchas (client action, `static/src/scss/service_booking.scss` + `xml/service_booking.xml`)
+
+The OWL "Book a Service" wizard renders inside the Odoo **backend** (`web.assets_backend`),
+so the full Bootstrap 5 + Odoo stylesheet is live around it. Two non-obvious traps bit this
+wizard and were fixed in **v19.0.9.6.0** (a first, blind CSS pass in 19.0.9.5.0 did not fix
+the real cause — verify with a render, not by eye):
+
+1. **Never reuse Bootstrap layout class names inside a backend component — namespace them.**
+   The wizard originally used `row` / `card` / `grid` / `btn`. Scoping the rules under
+   `.o_service_booking` does **not** stop Bootstrap's *global* `.row{display:flex;
+   margin-left/right:calc(-.5*32px)}`, `.card{display:flex;flex-direction:column}`,
+   `.grid{grid-template-rows:…}`, `.btn{…}` from also applying (they win for any property
+   the scoped rule doesn't set). Measured live: every wizard `.row` computed
+   `display:flex; margin-left:-16px; margin-right:-16px` — the negative gutter pulled fields
+   to the card edges and flexed label+input pairs. **Fix:** all custom layout classes are
+   `sb-*` (`sb-row`/`sb-card`/`sb-grid`/`sb-btn`). Keep that prefix for any new wizard class
+   that could collide with Bootstrap (`col`, `container`, `form-*`, `badge`, …).
+
+2. **A nested `@media` block must come AFTER the base rule it overrides (equal specificity).**
+   SCSS preserves source order. The responsive `@media (max-width:560px){ .two,.three{
+   grid-template-columns:1fr } … }` was nested high in the file, *before* the base
+   `.two{grid-template-columns:1fr 1fr}` / `.three` / `.timepick` rules. Both selectors have
+   the same specificity, so the later base rule overrode the media query — it was **dead**,
+   and the inner field-grids never collapsed to one column on a phone (fields crammed 2–3
+   across). `matchMedia('(max-width:560px)')` returned true while the columns stayed 2-up —
+   the tell that it's a cascade-order bug, not a media-match bug. **Fix:** all responsive
+   `@media` overrides live at the **end** of the `.o_service_booking { … }` block.
+
+**How it was verified (do this, don't eyeball):** pull the live compiled bundle from prod
+(`env['ir.qweb']._get_asset_bundle('web.assets_backend').css()` returns `ir.attachment`
+record(s) in Odoo 19 — read `.raw`, not a string), render the wizard markup against it with
+the real web-client height/scroll chain (`html,body{height:100%}` → `.o_web_client` flex
+column → 46px navbar + `.o_action_manager{flex:1;min-height:0}` so the wizard's
+`height:100%;overflow:auto` scrolls) at 320/390/768/1280, and read computed
+`grid-template-columns` / `margin-left` / `display`. A standalone vanilla-Bootstrap repro is
+**not** faithful — it rendered fine and falsely cleared the bug.
+
+## 48. Service Booking wizard — dynamic fields (live client search + address autocomplete), v19.0.9.7.0
+
+The wizard is a **client action** (registered OWL component), not a form view, so two
+"type-ahead" features had to be built into the component itself:
+
+1. **Live client search** ("Existing customer" box). Endpoint
+   `/fusion_claims/service_booking/search_customers` (jsonrpc, auth=user) searches
+   `res.partner` and resolves a typed SO number to its partner; the JS debounces (250 ms),
+   shows a `.sb-cust-results` dropdown, and `pickCustomer()` sets `state.partnerId` + fills the
+   contact fields. The backend (`action_book_from_wizard`) already consumes `partner_id` for
+   `cust_mode='existing'`, so picking links the existing contact.
+   **GOTCHA (cost a near-miss): `res.partner` has NO `mobile` field in Odoo 19** — a domain
+   leaf `('mobile','ilike',q)` raises `ValueError: Invalid field res.partner.mobile`, and
+   because the controller's `except` swallows it the search silently returns nothing (looks
+   exactly like "search not working"). Build the OR domain only over fields present in
+   `Partner._fields` (`name`/`phone`/`email`); same for reading `p.mobile`. Verify any new
+   partner-field reference against `_fields` before shipping.
+
+2. **Address autocomplete.** `google_address_autocomplete.js` patches `FormController` only,
+   so it does **not** reach this client action. The component loads Google Places itself
+   (key from ICP `fusion_claims.google_maps_api_key`), attaches via `useRef('root')` +
+   `onMounted`/`onPatched` to every `input.sb-addr-input`, and writes
+   `street`/`city`/`lat`/`lng` straight into reactive `state` (no DOM hacks — we're inside the
+   component). Re-attach on patch is guarded by an `_sbAc` flag per input and an `_addrStarted`
+   /`_addrNoKey` gate so a missing key just degrades to manual entry and can never break render
+   (both lifecycle calls are `.catch(()=>{})`).
+
+**Verifying the search without a browser:** the endpoint logic is plain ORM — smoke it in an
+`odoo shell` against real data (`Partner.search(<built domain>, limit=8)`); a vanilla repro of
+the `.sb-cust-results` dropdown markup + compiled CSS confirms the UI. Address autocomplete
+needs the live key + Google Maps, so it can only be confirmed in a real browser session.

fusion_claims/__manifest__.py

@@ -5,7 +5,7 @@
 
 {
     'name': 'Fusion Claims',
-    'version': '19.0.9.5.0',
+    'version': '19.0.9.7.0',
     'category': 'Sales',
     'summary': 'Complete ADP Claims Management with Dashboard, Sales Integration, Billing Automation, and Two-Stage Verification.',
     'description': """

fusion_claims/controllers/service_booking.py

@@ -30,6 +30,44 @@ class ServiceBookingController(http.Controller):
                        'lift': labour('labour_lift')},
         }
 
+    @http.route('/fusion_claims/service_booking/search_customers', type='jsonrpc', auth='user')
+    def search_customers(self, query=None, **kw):
+        """Live customer lookup for the booking wizard's 'Existing customer' box.
+        Matches res.partner by name / phone / mobile / email, and also resolves a
+        typed sale-order reference to its customer. Returns up to 8 light dicts."""
+        q = (query or '').strip()
+        if len(q) < 2:
+            return {'results': []}
+        env = request.env
+        Partner = env['res.partner'].sudo()
+        # Build the OR domain only over fields that actually exist on this DB —
+        # res.partner.mobile is NOT present in Odoo 19, so referencing it raises
+        # ValueError and the whole lookup silently returns nothing.
+        has_mobile = 'mobile' in Partner._fields
+        search_fields = [f for f in ('name', 'phone', 'email', 'mobile')
+                         if f in Partner._fields]
+        leaves = [(f, 'ilike', q) for f in search_fields]
+        domain = leaves[:1]
+        for leaf in leaves[1:]:
+            domain = ['|'] + domain + [leaf]
+        partners = Partner.search(domain, limit=8, order='write_date desc')
+        # also resolve an SO number -> its partner (the hint promises "name or SO")
+        if len(q) >= 3 and len(partners) < 8 and 'sale.order' in env:
+            sos = env['sale.order'].sudo().search([('name', 'ilike', q)], limit=5)
+            partners = (partners | sos.mapped('partner_id'))[:8]
+        results = []
+        for p in partners:
+            phone = p.phone or (p.mobile if has_mobile else '') or ''
+            results.append({
+                'id': p.id,
+                'name': p.name or '',
+                'phone': phone,
+                'email': p.email or '',
+                'street': p.street or '',
+                'city': p.city or '',
+            })
+        return {'results': results}
+
     @http.route('/fusion_claims/service_booking/submit', type='jsonrpc', auth='user')
     def submit(self, payload=None, **kw):
         try:

fusion_claims/static/src/js/service_booking/service_booking.js

@@ -1,5 +1,5 @@
 /** @odoo-module **/
-import { Component, useState, onWillStart } from "@odoo/owl";
+import { Component, useState, onWillStart, onMounted, onPatched, useRef } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { rpc } from "@web/core/network/rpc";
 import { useService } from "@web/core/utils/hooks";
@@ -11,10 +11,12 @@ export class ServiceBookingWizard extends Component {
     setup() {
         this.action = useService("action");
         this.notification = useService("notification");
+        this.orm = useService("orm");
+        this.rootRef = useRef("root");
         this.state = useState({
             custMode: "existing",
-            customer: { name: "", phone: "", email: "", street: "", unit: "", buzz: "", city: "" },
-            partnerId: false, soSearch: "",
+            customer: { name: "", phone: "", email: "", street: "", unit: "", buzz: "", city: "", lat: 0, lng: 0 },
+            partnerId: false, soSearch: "", custResults: [], custSearching: false,
             device: "standard", category: "standard", timing: "normal", inShop: false, issue: "",
             date: "", hour: 9, minute: 0, ampm: "AM", durationHr: 1.0, technicianId: false,
             warranty: false, pod: false, emailConfirm: true, googleReview: true,
@@ -31,6 +33,104 @@ export class ServiceBookingWizard extends Component {
                 labour: r.labour || this.state.labour,
             });
         });
+        // Address autocomplete attaches after the DOM exists and re-attaches when
+        // OWL re-renders (e.g. switching to "New client" reveals a second address
+        // input). Fully guarded — a missing Maps key just means manual entry.
+        onMounted(() => { this._initAddrAutocomplete().catch(() => {}); });
+        onPatched(() => { this._initAddrAutocomplete().catch(() => {}); });
+    }
+
+    // ---- live customer search (Existing customer box) ----
+    onCustSearch(ev) {
+        const q = ev.target.value || "";
+        this.state.soSearch = q;
+        this.state.partnerId = false;           // typing again unlinks any picked contact
+        clearTimeout(this._custTimer);
+        const term = q.trim();
+        if (term.length < 2) { this.state.custResults = []; this.state.custSearching = false; return; }
+        this.state.custSearching = true;
+        this._custTimer = setTimeout(async () => {
+            try {
+                const r = await rpc("/fusion_claims/service_booking/search_customers", { query: term });
+                this.state.custResults = r.results || [];
+            } catch (e) {
+                this.state.custResults = [];
+            }
+            this.state.custSearching = false;
+        }, 250);
+    }
+    pickCustomer(c) {
+        this.state.partnerId = c.id;
+        this.state.customer.name = c.name || "";
+        this.state.customer.phone = c.phone || "";
+        this.state.customer.email = c.email || "";
+        this.state.customer.street = c.street || "";
+        this.state.customer.city = c.city || "";
+        this.state.custResults = [];
+        this.state.soSearch = c.name + (c.phone ? ` · ${c.phone}` : "");
+    }
+
+    // ---- Google Places address autocomplete (wizard-local; the FormController
+    //      patch in google_address_autocomplete.js does NOT reach a client action) ----
+    async _getMapsKey() {
+        try {
+            return await this.orm.call("ir.config_parameter", "get_param", ["fusion_claims.google_maps_api_key"]);
+        } catch (e) {
+            return null;
+        }
+    }
+    _loadMaps(key) {
+        if (window.google?.maps?.places) return Promise.resolve();
+        if (window._sbMapsLoading) return window._sbMapsLoading;
+        window._sbMapsLoading = new Promise((resolve, reject) => {
+            window._sbMapsReady = () => resolve();
+            const s = document.createElement("script");
+            s.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(key)}&libraries=places&callback=_sbMapsReady`;
+            s.async = true; s.defer = true; s.onerror = reject;
+            document.head.appendChild(s);
+        });
+        return window._sbMapsLoading;
+    }
+    async _initAddrAutocomplete() {
+        const root = this.rootRef.el;
+        if (!root) return;
+        if (!this._addrStarted) {
+            if (!root.querySelector("input.sb-addr-input")) return;   // nothing to bind yet
+            this._addrStarted = true;
+            const key = await this._getMapsKey();
+            if (!key) { this._addrNoKey = true; return; }
+            try { await this._loadMaps(key); } catch (e) { return; }
+        }
+        if (this._addrNoKey || !window.google?.maps?.places) return;
+        // re-query after the await: OWL may have swapped inputs during loading
+        root.querySelectorAll("input.sb-addr-input").forEach((inp) => {
+            if (inp._sbAc) return;
+            inp._sbAc = true;
+            try {
+                const ac = new google.maps.places.Autocomplete(inp, {
+                    componentRestrictions: { country: "ca" },
+                    types: ["address"],
+                    fields: ["address_components", "formatted_address", "geometry"],
+                });
+                ac.addListener("place_changed", () => {
+                    const place = ac.getPlace();
+                    if (!place || !place.address_components) return;
+                    let city = "";
+                    for (const c of place.address_components) {
+                        if (c.types.includes("locality")) city = c.long_name;
+                        else if (c.types.includes("sublocality_level_1") && !city) city = c.long_name;
+                    }
+                    this.state.customer.street = place.formatted_address || inp.value;
+                    if (city) this.state.customer.city = city;
+                    if (place.geometry && place.geometry.location) {
+                        this.state.customer.lat = place.geometry.location.lat();
+                        this.state.customer.lng = place.geometry.location.lng();
+                    }
+                });
+            } catch (e) {
+                inp._sbAc = false;   // allow a later retry if construction failed
+            }
+        });
     }
     get callout() {
         if (this.state.inShop) return null;

fusion_claims/static/src/scss/service_booking.scss

@@ -66,26 +66,17 @@
     .step.draft { margin-left: auto; color: var(--sb-money); background: var(--sb-money-soft); }
 
     .body { padding: 20px 24px 6px; }
-    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-    @media (max-width: 780px) { .grid { grid-template-columns: 1fr; } }
-    @media (max-width: 560px) {
-        .wrap { margin: 12px auto; padding: 0 10px; }
-        .body { padding: 14px 16px 4px; }
-        .topbar { padding: 14px 16px; }
-        .foot { padding: 14px 16px; flex-wrap: wrap; }
-        .two, .three { grid-template-columns: 1fr; }
-        .timepick { flex-wrap: wrap; }
-    }
+    .sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 
-    .card {
+    .sb-card {
         background: var(--sb-card);
         border: 1px solid var(--sb-border);
         border-radius: 13px;
         padding: 16px 17px;
         box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
     }
-    .card.span2 { grid-column: 1 / -1; }
-    .card h3 {
+    .sb-card.span2 { grid-column: 1 / -1; }
+    .sb-card h3 {
         margin: 0 0 13px;
         font-size: 11.5px;
         font-weight: 700;
@@ -96,8 +87,8 @@
         align-items: center;
         gap: 7px;
     }
-    .card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #5ba848, #2e7aad); }
-    .card h3 .tag {
+    .sb-card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #5ba848, #2e7aad); }
+    .sb-card h3 .tag {
         margin-left: auto;
         font-size: 10px;
         font-weight: 700;
@@ -109,8 +100,8 @@
     }
 
     label.fl { display: block; font-size: 12px; font-weight: 600; color: var(--sb-muted); margin: 0 0 5px; }
-    .row { margin-bottom: 12px; }
-    .row:last-child { margin-bottom: 0; }
+    .sb-row { margin-bottom: 12px; }
+    .sb-row:last-child { margin-bottom: 0; }
     .two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
     .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
 
@@ -139,6 +130,28 @@
     .with-icon { position: relative; }
     .with-icon .pin { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #5ba848; font-size: 16px; }
 
+    // live customer-search results dropdown
+    .sb-cust-search { position: relative; }
+    .sb-cust-results {
+        position: absolute;
+        left: 0; right: 0; top: 100%;
+        margin-top: 4px;
+        z-index: 30;
+        background: var(--sb-card);
+        border: 1px solid var(--sb-border);
+        border-radius: 9px;
+        box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
+        max-height: 260px;
+        overflow-y: auto;
+    }
+    .sb-cust-loading { padding: 10px 12px; font-size: 12.5px; color: var(--sb-faint); }
+    .sb-cust-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--sb-border); }
+    .sb-cust-item:last-child { border-bottom: none; }
+    .sb-cust-item:hover { background: var(--sb-chip); }
+    .sb-cust-name { font-size: 13.5px; font-weight: 600; color: var(--sb-text); }
+    .sb-cust-meta { font-size: 11.5px; color: var(--sb-faint); margin-top: 1px; }
+    .sb-cust-linked { color: var(--sb-ok); font-weight: 600; }
+
     .seg {
         display: inline-flex;
         background: var(--sb-chip);
@@ -276,7 +289,7 @@
     }
     .foot .spacer { margin-right: auto; font-size: 12px; color: var(--sb-faint); }
 
-    .btn {
+    .sb-btn {
         border: none;
         border-radius: 10px;
         padding: 11px 18px;
@@ -285,13 +298,32 @@
         cursor: pointer;
         font-family: inherit;
     }
-    .btn.ghost { background: transparent; color: var(--sb-muted); border: 1px solid var(--sb-border); }
-    .btn.primary {
+    .sb-btn.ghost { background: transparent; color: var(--sb-muted); border: 1px solid var(--sb-border); }
+    .sb-btn.primary {
         color: #fff;
         background: linear-gradient(135deg, #5ba848, #2e7aad);
         box-shadow: 0 3px 10px color-mix(in srgb, #2e7aad 40%, transparent);
     }
-    .btn[disabled] { opacity: .6; cursor: not-allowed; }
+    .sb-btn[disabled] { opacity: .6; cursor: not-allowed; }
 
     .hide { display: none !important; }
+
+    // Responsive overrides — MUST come AFTER the base layout rules above. These
+    // selectors (.two/.three/.timepick/.sb-grid/.foot/…) have the same specificity
+    // as their base rules, so the cascade only lets the media query win when it is
+    // emitted later in the source. Previously this block sat right after .sb-grid
+    // (BEFORE the base .two/.three/.timepick rules), so the later base rules
+    // overrode it and the inner field-grids never collapsed to one column on a
+    // phone — fields crammed side-by-side. Keep these last.
+    @media (max-width: 780px) {
+        .sb-grid { grid-template-columns: 1fr; }
+    }
+    @media (max-width: 560px) {
+        .wrap { margin: 12px auto; padding: 0 10px; }
+        .body { padding: 14px 16px 4px; }
+        .topbar { padding: 14px 16px; }
+        .foot { padding: 14px 16px; flex-wrap: wrap; }
+        .two, .three { grid-template-columns: 1fr; }
+        .timepick { flex-wrap: wrap; }
+    }
 }

fusion_claims/static/src/xml/service_booking.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="fusion_claims.ServiceBookingWizard" owl="1">
-        <div class="o_service_booking">
+        <div class="o_service_booking" t-ref="root">
             <div class="wrap">
                 <div class="dialog">
                     <div class="topbar">
@@ -20,11 +20,11 @@
                     </div>
 
                     <div class="body">
-                        <div class="grid">
+                        <div class="sb-grid">
                             <!-- CUSTOMER -->
-                            <div class="card">
+                            <div class="sb-card">
                                 <h3><span class="dot"></span>Customer</h3>
-                                <div class="row">
+                                <div class="sb-row">
                                     <div class="seg full">
                                         <button t-att-class="{ on: state.custMode === 'existing' }"
                                                 t-on-click="() => this.setCust('existing')">Existing customer</button>
@@ -33,22 +33,34 @@
                                     </div>
                                 </div>
                                 <div t-if="state.custMode === 'existing'">
-                                    <div class="row">
+                                    <div class="sb-row sb-cust-search">
                                         <label class="fl">Search by phone, name or SO</label>
-                                        <input class="f" t-model="state.soSearch" placeholder="e.g. (416) 555-0142 …"/>
-                                        <div class="hint">Inbound call? Type the phone number — we match the contact &amp; their history.</div>
+                                        <input class="f" t-att-value="state.soSearch" t-on-input="onCustSearch"
+                                               placeholder="e.g. (416) 555-0142 …" autocomplete="off"/>
+                                        <div class="hint" t-if="!state.partnerId">Inbound call? Type the phone number — we match the contact &amp; their history.</div>
+                                        <div class="hint sb-cust-linked" t-if="state.partnerId">✓ Linked to existing contact — booking will use it.</div>
+                                        <div class="sb-cust-results" t-if="state.custSearching or state.custResults.length">
+                                            <div class="sb-cust-loading" t-if="state.custSearching">Searching…</div>
+                                            <t t-else="">
+                                                <div class="sb-cust-item" t-foreach="state.custResults" t-as="c" t-key="c.id"
+                                                     t-on-click="() => this.pickCustomer(c)">
+                                                    <div class="sb-cust-name"><t t-esc="c.name"/></div>
+                                                    <div class="sb-cust-meta"><t t-esc="c.phone"/><t t-if="c.phone and c.city"> · </t><t t-esc="c.city"/></div>
+                                                </div>
+                                            </t>
+                                        </div>
                                     </div>
                                 </div>
                                 <div t-if="state.custMode === 'new'">
-                                    <div class="row two">
+                                    <div class="sb-row two">
                                         <div><label class="fl">Client name *</label><input class="f" t-model="state.customer.name" placeholder="Full name"/></div>
                                         <div><label class="fl">Phone *</label><input class="f" t-model="state.customer.phone" placeholder="(416) 555-…"/></div>
                                     </div>
-                                    <div class="row"><label class="fl">Email</label><input class="f" type="email" t-model="state.customer.email" placeholder="client@email.com"/></div>
-                                    <div class="row"><label class="fl">Address</label>
-                                        <div class="with-icon"><input class="f" t-model="state.customer.street" placeholder="Start typing an address…"/><span class="pin">📍</span></div>
+                                    <div class="sb-row"><label class="fl">Email</label><input class="f" type="email" t-model="state.customer.email" placeholder="client@email.com"/></div>
+                                    <div class="sb-row"><label class="fl">Address</label>
+                                        <div class="with-icon"><input class="f sb-addr-input" t-model="state.customer.street" placeholder="Start typing an address…"/><span class="pin">📍</span></div>
                                     </div>
-                                    <div class="row three">
+                                    <div class="sb-row three">
                                         <div><label class="fl">Unit</label><input class="f" t-model="state.customer.unit" placeholder="#"/></div>
                                         <div><label class="fl">Buzz</label><input class="f" t-model="state.customer.buzz" placeholder="—"/></div>
                                         <div><label class="fl">City</label><input class="f" t-model="state.customer.city" placeholder="City"/></div>
@@ -58,9 +70,9 @@
                             </div>
 
                             <!-- SERVICE & PRICING -->
-                            <div class="card">
+                            <div class="sb-card">
                                 <h3><span class="dot"></span>Service &amp; Pricing<span class="tag">$ REVENUE</span></h3>
-                                <div class="row two">
+                                <div class="sb-row two">
                                     <div>
                                         <label class="fl">Device being serviced</label>
                                         <select class="f" t-on-change="onDevice">
@@ -79,7 +91,7 @@
                                         <input class="f" t-model="state.issue" placeholder="e.g. won't power on"/>
                                     </div>
                                 </div>
-                                <div class="row" t-if="!state.inShop">
+                                <div class="sb-row" t-if="!state.inShop">
                                     <label class="fl">Service call type</label>
                                     <select class="f"
                                             t-on-change="onCallType">
@@ -100,9 +112,9 @@
                             </div>
 
                             <!-- SCHEDULE -->
-                            <div class="card">
+                            <div class="sb-card">
                                 <h3><span class="dot"></span>Schedule</h3>
-                                <div class="row two">
+                                <div class="sb-row two">
                                     <div><label class="fl">Date</label><input class="f" type="date" t-model="state.date"/></div>
                                     <div><label class="fl">Duration</label>
                                         <select class="f" t-model.number="state.durationHr">
@@ -114,7 +126,7 @@
                                         </select>
                                     </div>
                                 </div>
-                                <div class="row">
+                                <div class="sb-row">
                                     <label class="fl">Start time</label>
                                     <div class="timepick">
                                         <select class="f" t-model.number="state.hour">
@@ -140,7 +152,7 @@
                                     </div>
                                     <div class="endtime">Ends at <b><t t-esc="endLabel"/></b> · your local time</div>
                                 </div>
-                                <div class="row">
+                                <div class="sb-row">
                                     <label class="fl">Technician</label>
                                     <select class="f" t-model.number="state.technicianId">
                                         <option value="">— Choose —</option>
@@ -152,17 +164,17 @@
                             </div>
 
                             <!-- LOCATION -->
-                            <div class="card">
+                            <div class="sb-card">
                                 <h3><span class="dot"></span>Location</h3>
                                 <div class="opt" style="border:none; padding-top:0;">
                                     <div class="lab">In-shop job<small>At the store — no call-out, labour @ $<t t-esc="fmt(state.labour.inshop)"/>/hr</small></div>
                                     <div class="sw" t-att-class="{ on: state.inShop }" t-on-click="toggleInShop"></div>
                                 </div>
                                 <div t-if="!state.inShop">
-                                    <div class="row"><label class="fl">Job address</label>
-                                        <div class="with-icon"><input class="f" t-model="state.customer.street" placeholder="Auto-fills from customer…"/><span class="pin">📍</span></div>
+                                    <div class="sb-row"><label class="fl">Job address</label>
+                                        <div class="with-icon"><input class="f sb-addr-input" t-model="state.customer.street" placeholder="Auto-fills from customer…"/><span class="pin">📍</span></div>
                                     </div>
-                                    <div class="row two">
+                                    <div class="sb-row two">
                                         <div><label class="fl">Unit / Suite</label><input class="f" t-model="state.customer.unit" placeholder="#"/></div>
                                         <div><label class="fl">Buzz code</label><input class="f" t-model="state.customer.buzz" placeholder="—"/></div>
                                     </div>
@@ -170,11 +182,11 @@
                             </div>
 
                             <!-- JOB DETAILS -->
-                            <div class="card span2">
+                            <div class="sb-card span2">
                                 <h3><span class="dot"></span>Job details</h3>
                                 <div class="two">
-                                    <div class="row"><label class="fl">Work description</label><textarea class="f" t-model="state.description" placeholder="Symptom, what to check, history…"></textarea></div>
-                                    <div class="row"><label class="fl">Parts / materials to bring</label><textarea class="f" t-model="state.materials" placeholder="Batteries, controller, casters…"></textarea></div>
+                                    <div class="sb-row"><label class="fl">Work description</label><textarea class="f" t-model="state.description" placeholder="Symptom, what to check, history…"></textarea></div>
+                                    <div class="sb-row"><label class="fl">Parts / materials to bring</label><textarea class="f" t-model="state.materials" placeholder="Batteries, controller, casters…"></textarea></div>
                                 </div>
                                 <div class="opt"><div class="lab">Under manufacturer warranty<small>Parts not billed when covered</small></div><div class="sw" t-att-class="{ on: state.warranty }" t-on-click="() => state.warranty = !state.warranty"></div></div>
                                 <div class="opt"><div class="lab">POD required<small>Capture proof of delivery on completion</small></div><div class="sw" t-att-class="{ on: state.pod }" t-on-click="() => state.pod = !state.pod"></div></div>
@@ -197,8 +209,8 @@
 
                     <div class="foot">
                         <span class="spacer">Local time · America/Toronto · <t t-esc="state.distanceKm"/> km away</span>
-                        <button class="btn ghost" t-on-click="() => this.action.doAction({ type: 'ir.actions.act_window_close' })">Cancel</button>
-                        <button class="btn primary" t-on-click="submit" t-att-disabled="state.saving">Book &amp; Create SO</button>
+                        <button class="sb-btn ghost" t-on-click="() => this.action.doAction({ type: 'ir.actions.act_window_close' })">Cancel</button>
+                        <button class="sb-btn primary" t-on-click="submit" t-att-disabled="state.saving">Book &amp; Create SO</button>
                     </div>
                 </div>
             </div>