/* Only boot screen, error bar and a few layout helpers. Everything else comes from MudBlazor + BbiTheme. */
html, body { margin: 0; font-family: Inter, Roboto, Arial, sans-serif; }

.boot img { height: 84px; width: auto; }
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #0E1B29; }
.boot-bar { width: 160px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #007040 0%, #00A050 40%, #E4F1EE 40%); animation: boot 1.2s infinite linear; background-size: 200% 100%; }
@keyframes boot { from { background-position: 100% 0; } to { background-position: -100% 0; } }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: #fff4e5; color: #663c00; box-shadow: 0 -1px 4px rgba(0,0,0,.15); z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* WASM island on an SSR page (and the /login, /admin shell): the boot placeholder shows until the island
   renders its first element. Here, not in site.css, because /admin does not load site.css. */
.island > .boot:not(:only-child) { display: none; }
.island > .boot.inline { min-height: 50vh; }

/* Option cards: the whole card is the radio's label so it is one large touch target (>= 44px). */
.option-card { transition: border-color .15s, box-shadow .15s; height: 100%; }
.option-card.selected { border-color: var(--mud-palette-secondary) !important; box-shadow: 0 0 0 1px var(--mud-palette-secondary); background: #F4FAF7; }
.option-card .mud-radio { align-items: flex-start; width: 100%; margin: 0; padding: 12px 8px; }
/* MudRadio renders its label content in a span.mud-typography that shrinks to fit; stretch it so every
   illustration box in a row has the same width. */
.option-card .mud-radio > .mud-typography { flex: 1 1 auto; min-width: 0; }
.option-card .mud-input-control, .option-card .mud-input-control-input-container { width: 100%; }

/* Mobile price bar sits in the page flow at the bottom of the viewport but never covers form content:
   the page reserves space for it via .has-price-bar (mobile only, see the quote tool media queries below). */
.price-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; border-radius: 0 !important; }
.sticky-panel { position: sticky; top: 88px; }
.pane .sticky-panel { position: static; border: none; padding: 0 !important; }

/* Same focus ring as the SSR site (site.css): logo green, 3.4:1 on white and 4.6:1 on navy (WCAG 1.4.11). The old amber
   (#f2a900, 2.0:1 on white) was off-palette and too faint on the white admin and login screens. */
:focus-visible { outline: 2px solid #00A050; outline-offset: 2px; }
/* MudBlazor removes the outline from links and buttons (`a:focus-visible`, `button:focus`, 0,1,1), which left the sign-in
   button, MudLinks and admin buttons with no visible keyboard focus at all (WCAG 2.4.7). Same specificity, loaded later. */
a:focus-visible, button:focus-visible { outline: 2px solid #00A050; outline-offset: 2px; }

/* ---------- Quote tool: three fixed-height panes (desktop) ---------- */
.quote-page { padding: 16px; }
/* MudAlert text has no typography of its own and inherits the SSR body size (site.css, 17px), so alerts read larger than
   the body2 text around them, most visibly on a phone. Same size as MudText body2 in every quote funnel. */
.quote-page .mud-alert-message { font-size: var(--mud-typography-body2-size); line-height: var(--mud-typography-body2-lineheight);
    letter-spacing: var(--mud-typography-body2-letterspacing); }
.quote-shell { min-height: 0; }
.quote-shell .pane { display: flex; flex-direction: column; min-width: 0; }
.quote-shell .pane-left, .quote-shell .pane-right { padding: 20px; }
.quote-shell .pane-center { flex: 1 1 auto; }
.quote-shell .pane-head { padding: 20px 24px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.quote-shell .pane-scroll { padding: 20px 24px; outline: none; }
.quote-shell .pane-foot { padding: 12px 24px; border-top: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }

@media (min-width: 960px) {
    /* The window itself never scrolls in the quote tool: only the panes do. */
    /* clip (not hidden): hidden boxes can still be scrolled by focus/scrollIntoView, which shifts the panes */
    /* Chiều cao thật do site.css (.app-shell, flex theo header + intro SSR) quyết định; calc dưới đây chỉ là dự phòng
       khi đảo nằm ngoài khung đó. */
    .quote-page { height: calc(100vh - var(--chrome-h, 64px)); overflow: clip; box-sizing: border-box; }
    .quote-shell { height: calc(100vh - var(--chrome-h, 64px) - 32px); }
    .quote-shell .pane { height: 100%; overflow: clip; }
    .quote-shell .pane-left { flex: 0 0 250px; overflow-y: auto; }
    .quote-shell .pane-right { flex: 0 0 330px; overflow-y: auto; }
    .quote-shell .pane-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
    .quote-shell .pane-foot { flex: 0 0 auto; }
    .quote-shell .pane-head { flex: 0 0 auto; }
}
@media (max-width: 959.98px) {
    /* Room for the fixed price bar (desktop shows the price in the right pane instead). */
    .quote-page.has-price-bar { padding-bottom: 112px; }
    .quote-shell { flex-direction: column !important; }
    .quote-shell .pane-left, .quote-shell .pane-right { display: none; }
    .quote-shell .pane-scroll { padding: 16px; }
    .quote-shell .pane-head { padding: 16px 16px 8px; }
    .quote-shell .pane-foot { padding: 12px 16px; }
}

/* Picture option cards */
.option-art { width: 100%; display: flex; align-items: center; justify-content: center; height: 84px; border-radius: 8px; background: #F6F9FC; margin-bottom: 4px; }
.option-card.selected .option-art { background: #E4F1EE; }
.option-card.compact .mud-radio { padding: 10px 8px; }

/* Step list */
.step-item { border-radius: 8px; }
.step-item.current { background: #E4F1EE; }

/* Admin audit log: before/after JSON */
.audit-json { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; max-height: 360px; overflow: auto; }

/* Admin user permissions table: group headings left-aligned in the mobile card layout too */
.perm-table th.mud-table-cell, .perm-table td.perm-name { text-align: start !important; justify-content: flex-start !important; }

/* ---------- Widgets on marketing pages (GrantChecker, SavingsCalculator) ---------- */
/* Islands are prerendered: the thin bar shows until WebAssembly is interactive, then fades out without
   changing the panel's height (no layout jump). */
.widget-panel { position: relative; overflow: hidden; }
.widget-boot.mud-progress-linear { position: absolute; top: 0; left: 0; right: 0; transition: opacity .3s; }
.widget-boot.done { opacity: 0; }
.widget-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.widget-fields:disabled .option-card { cursor: progress; }
.widget-subpanel { background: var(--mud-palette-background); }

.calc-results { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.calc-result { padding: 14px 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; background: var(--mud-palette-surface); }
.calc-result b { display: block; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 800; line-height: 1.15; color: var(--mud-palette-primary); overflow-wrap: anywhere; }
.calc-result span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--mud-palette-text-secondary); }
.calc-result--mint { background: #E4F1EE; border-color: #CBE4DF; }
.calc-result--sand { background: #FBF1E0; border-color: #F0D6A8; }
.calc-navy { background: var(--mud-palette-primary) !important; color: #E7EFF7 !important; }
.calc-navy h3 { color: #fff; }
.calc-sand { background: #FBF1E0 !important; border-color: #F0D6A8 !important; }
.calc-sand__eyebrow { color: #7A5512; font-weight: 800; }
.widget-postcode { width: 220px; max-width: 100%; }
/* ---------- Phase 5: enquiries, bookings ---------- */
.lead-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; text-transform: none; }
.lead-note { white-space: pre-wrap; overflow-wrap: anywhere; padding: 4px 8px; border-left: 3px solid #E4F1EE; }
.lead-facts td { vertical-align: top; overflow-wrap: anywhere; }

/* Admin diary: 7 cột cố định, ô ngày là MudButton (bấm được bằng bàn phím). */
.diary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.diary-head { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-secondary); padding: 4px 6px; }
.diary .diary-day { min-height: 96px; height: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 6px; text-transform: none; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: var(--mud-palette-surface); min-width: 0; }
.diary .diary-day .mud-button-label { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; width: 100%; min-width: 0; }
.diary .diary-day.outside { opacity: .5; }
.diary .diary-day.today { border-color: var(--mud-palette-primary); }
.diary .diary-day.picked { box-shadow: inset 0 0 0 2px var(--mud-palette-secondary); background: #F4FAF7; }
.diary .diary-day.off { background: repeating-linear-gradient(135deg, #F6F9FC, #F6F9FC 6px, #EEF2F6 6px, #EEF2F6 12px); }
.diary-date { font-weight: 700; font-size: 14px; text-align: left; color: var(--mud-palette-text-primary); }
.diary-note { font-size: 11px; color: var(--mud-palette-text-secondary); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diary-pill { font-size: 11px; line-height: 1.3; padding: 1px 6px; border-radius: 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: #FFF4DE; color: #6B4A00; border: 1px solid #F2D58F; }
.diary-pill.confirmed { background: #E4F1EE; color: #00552F; border-color: #A8D5BF; }
.diary-pill.completed { background: #EEF2F6; color: #3D4C5C; border-color: #D5DDE5; }
.diary-pill.cancelled { background: #F6F6F6; color: #6B7280; border-color: #E5E7EB; text-decoration: line-through; }
@media (max-width: 599.98px) {
    .diary { gap: 2px; }
    .diary .diary-day { min-height: 56px; padding: 3px; }
    .diary-head { padding: 2px; font-size: 11px; text-align: center; }
    .diary-pill { font-size: 0; padding: 0; height: 6px; border-radius: 3px; }
    .diary-note { display: none; }
}

/* SSR content around an island (site.css is loaded): MudBlazor's `a { color; text-decoration: none }` (specificity 0,0,1) beats
   site.css's zero-specificity `:where(a)`, so plain text links on island pages lost their green underline. Same specificity as
   Mud and loaded after it; any class-based rule in site.css still wins. */
a:not(:where(.island *, [class])) { color: var(--green-700, #007040); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* MudLink underlines only on hover by default, and its navy is almost the body text colour, so a link inside a sentence
   ("privacy policy", the phone number in an error) looked like plain text (WCAG 1.4.1). Underline it at rest, like every
   text link on the SSR site; Underline.None still opts out. */
.mud-link.mud-link-underline-hover { text-decoration: underline; text-underline-offset: 2px; }

/* /book-online island */
.booking { outline: none; scroll-margin-top: 96px; }
.booking-panel { overflow: hidden; }
.booking-slots { scroll-margin-bottom: 96px; }
.booking-head { padding: 20px 24px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.booking-body { padding: 20px 24px; }
.booking-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--mud-palette-lines-default); background: #F6F9FC; }
@media (max-width: 599.98px) {
    .booking-head, .booking-body, .booking-foot { padding-left: 16px; padding-right: 16px; }
    .booking-why { width: 100%; order: 3; margin: 0 !important; }
}
/* ---------- Admin CMS (Phase 4) ---------- */
.adm__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.media-picker__thumb { width: 96px; height: 72px; flex: 0 0 auto; overflow: hidden; background: #F6F9FC; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding: 2px; }
.media-grid__item { cursor: pointer; overflow: hidden; display: flex; flex-direction: column; }
.media-grid__item:hover, .media-grid__item:focus-visible { border-color: var(--mud-palette-primary) !important; }
.media-grid__img { width: 100%; height: 110px; object-fit: cover; display: block; background: #F6F9FC; }
.media-grid__label { padding: 4px 8px 0; overflow-wrap: anywhere; }
.media-card .mud-card-media { background-color: #F6F9FC; }
/* Khung xem trước nội dung: chữ giống trang thật (Inter, đo dòng ~70 ký tự). */
.adm__preview { max-width: 46rem; line-height: 1.65; color: #0E1B29; overflow-wrap: anywhere; }
.adm__preview h2 { font-size: 1.35rem; margin: 1.4em 0 .4em; }
.adm__preview h3 { font-size: 1.12rem; margin: 1.2em 0 .3em; }
.adm__preview p, .adm__preview ul, .adm__preview ol { margin: 0 0 .8em; }
.adm__preview figure { margin: 1em 0; }
.adm__preview img { max-width: 100%; height: auto; border-radius: 8px; }
.adm__preview figcaption, .adm__preview cite { font-size: .85rem; color: #3D4C5C; }
.adm__preview blockquote { border-left: 4px solid var(--mud-palette-secondary); margin: 1em 0; padding: .2em 1em; }
.adm__preview .callout { background: #E4F1EE; border-radius: 8px; padding: .8em 1em; }
.adm__preview .cta { display: inline-block; background: var(--mud-palette-primary); color: #fff; padding: .5em 1em; border-radius: 6px; text-decoration: none; }
.adm__preview a:not(.cta) { color: var(--mud-palette-primary); }
/* Rich text (Quill 2, theme snow nạp lười từ /lib/quill, đặt đầu <head> nên các luật dưới thắng khi cùng độ ưu tiên).
   Chỉ chỉnh nhẹ cho khớp ô Outlined của MudBlazor: viền lines-inputs, bo góc theo theme, Inter, màu BbiTheme. */
.adm__rt { width: 100%; position: relative; }
.adm__rt .ql-toolbar.ql-snow { font-family: Inter, Roboto, Arial, sans-serif; background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    padding: 6px 8px; display: flex; flex-wrap: wrap; row-gap: 4px; }
.adm__rt .ql-toolbar.ql-snow .ql-formats { margin-right: 12px; display: inline-flex; align-items: center; }
.adm__rt .ql-toolbar.ql-snow button { width: 32px; height: 32px; padding: 5px 7px; border-radius: 6px; }
.adm__rt .ql-toolbar.ql-snow button:hover { background: var(--mud-palette-action-default-hover); }
.adm__rt .ql-toolbar.ql-snow .ql-picker { height: 32px; font-size: 14px; color: var(--mud-palette-text-primary); }
.adm__rt .ql-toolbar.ql-snow .ql-picker.ql-header { width: 128px; }
.adm__rt .ql-toolbar.ql-snow .ql-picker-label { display: flex; align-items: center; border-radius: 6px; }
.adm__rt .ql-toolbar.ql-snow .ql-picker-options { border-radius: 8px; padding: 4px 0; }
.adm__rt .ql-snow .ql-picker.ql-expanded .ql-picker-label { color: var(--mud-palette-text-secondary); }
.adm__rt .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: var(--mud-palette-text-secondary); }
.adm__rt .ql-toolbar.ql-snow .ql-picker-item { padding: 6px 10px; }
/* Biểu tượng: navy khi rảnh, xanh lá đậm (#007040, 6.2:1) khi đang bật; thay xanh dương #06c của snow. */
.adm__rt .ql-snow .ql-stroke { stroke: var(--mud-palette-text-secondary); }
.adm__rt .ql-snow .ql-fill { fill: var(--mud-palette-text-secondary); }
.adm__rt .ql-snow.ql-toolbar button:hover .ql-stroke, .adm__rt .ql-snow.ql-toolbar button:focus .ql-stroke,
.adm__rt .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke { stroke: var(--mud-palette-primary); }
.adm__rt .ql-snow.ql-toolbar button:hover .ql-fill, .adm__rt .ql-snow.ql-toolbar button:focus .ql-fill { fill: var(--mud-palette-primary); }
.adm__rt .ql-snow.ql-toolbar button:hover, .adm__rt .ql-snow.ql-toolbar button:focus,
.adm__rt .ql-snow.ql-toolbar .ql-picker-label:hover, .adm__rt .ql-snow.ql-toolbar .ql-picker-item:hover { color: var(--mud-palette-primary); }
.adm__rt .ql-snow.ql-toolbar button.ql-active { background: var(--mud-palette-secondary-hover, #E4F1EE); }
.adm__rt .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--mud-palette-secondary); }
.adm__rt .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--mud-palette-secondary); }
.adm__rt .ql-snow.ql-toolbar .ql-picker-label.ql-active, .adm__rt .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--mud-palette-secondary); }
/* Vòng tiêu điểm: cùng vòng xanh 2px như phần còn lại của app (luật :focus-visible ở trên); picker là span role=button. */
.adm__rt .ql-toolbar .ql-picker-label:focus-visible, .adm__rt .ql-toolbar .ql-picker-item:focus-visible,
.adm__rt .ql-tooltip a:focus-visible, .adm__rt .ql-tooltip input:focus-visible { outline: 2px solid #00A050; outline-offset: 1px; }
.adm__rt .ql-container.ql-snow { font-family: Inter, Roboto, Arial, sans-serif; font-size: 15px; color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs); border-top: 0; border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius); }
.adm__rt .ql-editor { min-height: 260px; line-height: 1.65; padding: 12px 16px; border-radius: inherit; }
.adm__rt .ql-editor:focus-visible { outline: 2px solid #00A050; outline-offset: -2px; }
.adm__rt .ql-editor h2 { font-size: 1.35rem; margin: .8em 0 .3em; }
.adm__rt .ql-editor h3 { font-size: 1.12rem; margin: .7em 0 .2em; }
.adm__rt .ql-editor blockquote { border-left: 4px solid var(--mud-palette-secondary); padding-left: 1em; margin: .5em 0; }
.adm__rt .ql-editor a { color: var(--mud-palette-primary); }
.adm__rt .ql-snow .ql-tooltip { font-family: Inter, Roboto, Arial, sans-serif; font-size: 14px; color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; box-shadow: 0 2px 8px rgba(10, 37, 64, .15); z-index: 2; }
.adm__rt .ql-snow .ql-tooltip input[type=text] { font: inherit; height: 30px; width: 220px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 6px; }
.adm__rt .ql-snow .ql-tooltip a.ql-action, .adm__rt .ql-snow .ql-tooltip a.ql-remove { color: var(--mud-palette-secondary); font-weight: 600; }
.adm__rt .ql-snow .ql-tooltip a.ql-preview { color: var(--mud-palette-primary); }
/* Tên trong picker kiểu chữ theo đúng tên của khối Tiêu đề (Paragraph / Heading / Sub-heading), không phải "Normal / Heading 2". */
.adm__rt .ql-snow .ql-picker.ql-header .ql-picker-label::before, .adm__rt .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Paragraph'; }
.adm__rt .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .adm__rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'Heading'; }
.adm__rt .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .adm__rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'Sub-heading'; }
.adm__rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { font-size: 1.15em; font-weight: 700; }
.adm__rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { font-size: 1.05em; font-weight: 700; }
/* Thanh công cụ của bảng admin (bộ lọc chip + ô tìm) xuống dòng trên điện thoại thay vì đè lên hàng đầu. */
.adm__table .mud-toolbar { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }