// Fusion Claims — Service Booking wizard component styles.
//
// Ported from the mockup (technician-booking-wizard.html) scoped under
// .o_service_booking. The mockup's CSS custom properties (--page, --card, …)
// are renamed mechanically to the --sb-* tokens emitted by
// _service_booking_tokens.scss (which MUST load first in the bundle). The
// manual .theme-btn dark toggle is dropped — Odoo serves the dark bundle.
//
// Surfaces use the explicit-hex tokens (three-layer contrast: page -> card ->
// field), never var(--bs-*). color-mix() is used only in standalone
// background / box-shadow properties — never inside a border shorthand (the
// Odoo 19 SCSS compiler silently drops color-mix in border shorthands).

.o_service_booking {
    background: var(--sb-page);
    color: var(--sb-text);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 14px;
    min-height: 100%;
    overflow: auto;

    * { box-sizing: border-box; }

    .wrap { max-width: 1000px; margin: 24px auto; padding: 0 18px; }

    .dialog {
        background: var(--sb-panel);
        border: 1px solid var(--sb-border);
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(16, 24, 40, .16);
        overflow: hidden;
    }

    .topbar {
        background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);
        padding: 17px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;

        h1 { font-size: 19px; font-weight: 700; margin: 0; }
        .sub { font-size: 12.5px; opacity: .9; margin-top: 2px; }
    }

    .stepper {
        display: flex;
        gap: 6px;
        padding: 11px 24px;
        background: var(--sb-panel);
        border-bottom: 1px solid var(--sb-border);
        flex-wrap: wrap;
    }
    .step {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--sb-faint);
        padding: 5px 13px;
        border-radius: 20px;
        background: var(--sb-chip);
    }
    .step.active { color: #fff; background: linear-gradient(135deg, #3a8fb7, #2e7aad); }
    .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; } }

    .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 {
        margin: 0 0 13px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .7px;
        text-transform: uppercase;
        color: var(--sb-muted);
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #5ba848, #2e7aad); }
    .card h3 .tag {
        margin-left: auto;
        font-size: 10px;
        font-weight: 700;
        color: var(--sb-money);
        background: var(--sb-money-soft);
        padding: 2px 8px;
        border-radius: 10px;
        letter-spacing: .3px;
    }

    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; }
    .two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
    .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }

    input.f, select.f, textarea.f {
        width: 100%;
        background: var(--sb-field);
        color: var(--sb-text);
        border: 1px solid var(--sb-field-border);
        border-radius: 9px;
        padding: 9px 11px;
        font-size: 13.5px;
        font-family: inherit;
        outline: none;
        transition: border .15s, box-shadow .15s;
    }
    input.f:focus, select.f:focus, textarea.f:focus {
        border-color: var(--sb-field-focus);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-field-focus) 22%, transparent);
    }
    textarea.f { resize: vertical; min-height: 56px; }

    .hint { font-size: 11px; color: var(--sb-faint); margin-top: 5px; }
    .with-icon { position: relative; }
    .with-icon .pin { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #5ba848; font-size: 16px; }

    .seg {
        display: inline-flex;
        background: var(--sb-chip);
        border: 1px solid var(--sb-border);
        border-radius: 9px;
        padding: 3px;
        gap: 3px;
    }
    .seg button {
        border: none;
        background: transparent;
        color: var(--sb-muted);
        font-weight: 600;
        font-size: 12.5px;
        padding: 6px 14px;
        border-radius: 7px;
        cursor: pointer;
        font-family: inherit;
    }
    .seg button.on { background: var(--sb-card); color: var(--sb-accent); box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06); }
    .seg.full { display: flex; }
    .seg.full button { flex: 1; }

    .timepick { display: inline-flex; align-items: stretch; gap: 7px; }
    .timepick select.f { width: auto; padding-right: 24px; }
    .ampm { display: inline-flex; background: var(--sb-chip); border: 1px solid var(--sb-border); border-radius: 9px; padding: 3px; }
    .ampm button {
        border: none;
        background: transparent;
        color: var(--sb-muted);
        font-weight: 700;
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 7px;
        cursor: pointer;
        font-family: inherit;
    }
    .ampm button.on { background: var(--sb-accent); color: #fff; }
    .endtime { font-size: 13px; color: var(--sb-muted); margin-top: 7px; }
    .endtime b { color: var(--sb-text); }

    .avail {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--sb-ok);
        background: color-mix(in srgb, var(--sb-ok) 14%, transparent);
        padding: 3px 9px;
        border-radius: 20px;
        margin-top: 6px;
    }

    .opt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 0;
        border-bottom: 1px solid var(--sb-border);
    }
    .opt:last-child { border-bottom: none; }
    .opt .lab { font-size: 13.5px; font-weight: 500; }
    .opt .lab small { display: block; color: var(--sb-faint); font-weight: 400; font-size: 11.5px; }

    .sw {
        width: 42px;
        height: 24px;
        border-radius: 20px;
        background: var(--sb-field-border);
        position: relative;
        cursor: pointer;
        transition: background .15s;
        flex-shrink: 0;
    }
    .sw::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        top: 3px;
        left: 3px;
        transition: left .15s;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }
    .sw.on { background: var(--sb-ok); }
    .sw.on::after { left: 21px; }

    // fee readout inside Service & Pricing
    .feeline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--sb-money-soft);
        border: 1px solid var(--sb-border);
        border-radius: 10px;
        padding: 11px 14px;
        margin-top: 4px;
    }
    .feeline .lbl { font-size: 12.5px; font-weight: 600; color: var(--sb-text); }
    .feeline .lbl small { display: block; color: var(--sb-faint); font-weight: 400; font-size: 11px; }
    .feeline .amt { font-size: 20px; font-weight: 800; color: var(--sb-money); }

    // ESTIMATE strip
    .estimate {
        grid-column: 1 / -1;
        background: var(--sb-money-soft);
        border: 1px solid var(--sb-border);
        border-left: 5px solid var(--sb-money);
        border-radius: 13px;
        padding: 15px 18px;
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    .estimate .breakdown { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; }
    .estimate .bk .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--sb-faint); }
    .estimate .bk .v { font-size: 15px; font-weight: 700; margin-top: 1px; }
    .estimate .total { text-align: right; }
    .estimate .total .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--sb-money); font-weight: 700; }
    .estimate .total .v { font-size: 27px; font-weight: 800; color: var(--sb-money); line-height: 1; }
    .estimate .total .note { font-size: 11px; color: var(--sb-faint); margin-top: 3px; }

    .foot {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 11px;
        padding: 16px 24px;
        background: var(--sb-panel);
        border-top: 1px solid var(--sb-border);
    }
    .foot .spacer { margin-right: auto; font-size: 12px; color: var(--sb-faint); }

    .btn {
        border: none;
        border-radius: 10px;
        padding: 11px 18px;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
    }
    .btn.ghost { background: transparent; color: var(--sb-muted); border: 1px solid var(--sb-border); }
    .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; }

    .hide { display: none !important; }
}