/* =============================================================================
   Alliance Business Suite — Plan Calculator (Azure-Pricing-Calculator style, v2).
   Two-pane tool: catalog (left, grouped by category) + a live estimate panel that
   stays pinned on the right as you add & configure. Owned-theme tokens, brand-aware.
   ============================================================================= */

.pc {
    --pc-brand: var(--fa-brand, #464eb8);
    --pc-ink: var(--fa-ink, #141a24);
    --pc-muted: var(--fa-muted, #6b7482);
    --pc-border: var(--fa-border, #e6e9ef);
    --pc-surface: var(--fa-surface, #f6f8fb);
    --pc-radius: 14px;
    --pc-radius-sm: 10px;
    --pc-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --pc-panel-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 18px 40px -24px rgba(16, 24, 40, 0.3);
    --pc-header-offset: 108px; /* clears the fixed site header (global + brand rows) for the sticky panel */
    font-family: var(--fa-font, 'Roboto', system-ui, sans-serif);
    color: var(--pc-ink);
    background: var(--pc-surface);
}

/* ---------------------------------------------------------------------- hero --- */
.pc-hero {
    background: #fff;
    border-bottom: 1px solid var(--pc-border);
    padding: 48px 0 34px;
    text-align: center;
}
.pc-hero__title {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.pc-hero__sub {
    max-width: 700px;
    margin: 0 auto;
    color: var(--pc-muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------- layout --- */
.pc-app {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px 0 60px;
    align-items: start;
}
@media (min-width: 992px) {
    .pc-app {
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 32px;
    }
}

.pc-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 3px;
}
.pc-eyebrow__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pc-brand);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex: none;
}
.pc-eyebrow__hint {
    color: var(--pc-muted);
    margin: 0 0 16px 33px;
    font-size: 0.92rem;
}

/* ------------------------------------------------------------------- toolbar --- */
.pc-toolbar {
    margin-bottom: 16px;
}
.pc-search {
    position: relative;
    margin-bottom: 12px;
}
.pc-search input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius-sm);
    padding: 0 14px 0 42px;
    font: inherit;
    color: var(--pc-ink);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pc-search input:focus {
    outline: none;
    border-color: var(--pc-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-brand) 18%, transparent);
}
.pc-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pc-muted);
    pointer-events: none;
}
.pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.pc-chip {
    border: 1px solid var(--pc-border);
    background: #fff;
    color: var(--pc-ink);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.pc-chip:hover {
    border-color: color-mix(in srgb, var(--pc-brand) 45%, var(--pc-border));
    color: var(--pc-brand);
}
.pc-chip.is-active {
    background: var(--pc-brand);
    border-color: var(--pc-brand);
    color: #fff;
}

/* ------------------------------------------------------------ catalog groups --- */
.pc-group + .pc-group {
    margin-top: 22px;
}
.pc-group__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pc-muted);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pc-border);
}
.pc-catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 12px;
}

.pc-product {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: #fff;
    padding: 16px;
    box-shadow: var(--pc-card-shadow);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.pc-product:hover {
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08), 0 14px 30px -14px rgba(16, 24, 40, 0.26);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--pc-brand) 30%, var(--pc-border));
}
.pc-product.is-added {
    border-color: var(--pc-brand);
    background: color-mix(in srgb, var(--pc-brand) 4%, #fff);
}
.pc-product__name {
    font-size: 0.96rem;
    font-weight: 700;
    margin: 0 0 5px;
    line-height: 1.3;
}
.pc-product__desc {
    font-size: 0.82rem;
    color: var(--pc-muted);
    line-height: 1.5;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pc-product__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pc-product__price {
    font-size: 0.78rem;
    color: var(--pc-muted);
    line-height: 1.2;
}
.pc-product__price b {
    display: block;
    color: var(--pc-ink);
    font-size: 0.98rem;
    font-weight: 700;
}
.pc-add {
    border: 1px solid var(--pc-brand);
    background: var(--pc-brand);
    color: #fff;
    border-radius: 9px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.pc-add:hover {
    background: color-mix(in srgb, var(--pc-brand), #000 10%);
}
.pc-product.is-added .pc-add {
    background: #fff;
    color: var(--pc-brand);
}

/* ------------------------------------------------------ estimate (right pane) --- */
.pc-estimate {
    position: relative;
}
@media (min-width: 992px) {
    .pc-estimate {
        position: sticky;
        top: var(--pc-header-offset);
    }
}
.pc-panel {
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: #fff;
    box-shadow: var(--pc-panel-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--pc-header-offset) - 24px);
}
.pc-panel__head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--pc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pc-panel__head h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0;
}
.pc-panel__count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--pc-brand);
    background: color-mix(in srgb, var(--pc-brand) 12%, #fff);
    border-radius: 999px;
    padding: 2px 9px;
}
.pc-clear {
    border: 0;
    background: none;
    color: var(--pc-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.pc-clear:hover {
    color: #c11a17;
}

.pc-lines {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}
.pc-line {
    border-radius: var(--pc-radius-sm);
    padding: 12px;
    transition: background-color 0.15s ease;
}
.pc-line + .pc-line {
    border-top: 1px solid var(--pc-border);
}
.pc-line__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pc-line__title {
    flex: 1;
    min-width: 0;
}
.pc-line__cat {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pc-brand);
}
.pc-line__name {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 1px 0 0;
    line-height: 1.3;
}
.pc-line__cost {
    text-align: right;
    flex: none;
    white-space: nowrap;
}
.pc-line__cost b {
    font-size: 1rem;
    font-weight: 800;
    display: block;
}
.pc-line__cost span {
    font-size: 0.72rem;
    color: var(--pc-muted);
}
.pc-remove {
    border: 0;
    background: none;
    color: var(--pc-muted);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.pc-remove:hover {
    color: #c11a17;
    background: color-mix(in srgb, #c11a17 8%, #fff);
}

.pc-line__config {
    margin-top: 10px;
}
.pc-field__label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.pc-field__label span {
    color: var(--pc-muted);
    font-weight: 500;
}
.pc-num {
    width: 100%;
    max-width: 160px;
    height: 38px;
    border: 1px solid var(--pc-border);
    border-radius: 9px;
    padding: 0 10px;
    font: inherit;
    color: var(--pc-ink);
}
.pc-num:focus {
    outline: none;
    border-color: var(--pc-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-brand) 18%, transparent);
}
.pc-opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pc-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--pc-border);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.pc-opt:hover {
    border-color: color-mix(in srgb, var(--pc-brand) 40%, var(--pc-border));
}
.pc-opt input {
    accent-color: var(--pc-brand);
    width: 16px;
    height: 16px;
    flex: none;
}
.pc-opt__label {
    flex: 1;
    font-size: 0.84rem;
}
.pc-opt__price {
    font-size: 0.8rem;
    color: var(--pc-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* slider (Radzen) — align to the panel */
.pc-line__config .rz-slider {
    margin: 8px 2px 4px;
}

/* estimate empty state */
.pc-empty {
    text-align: center;
    padding: 44px 22px;
    color: var(--pc-muted);
}
.pc-empty h3 {
    color: var(--pc-ink);
    font-weight: 700;
    font-size: 1rem;
    margin: 12px 0 4px;
}
.pc-empty p {
    font-size: 0.88rem;
    margin: 0;
}

/* ------------------------------------------------------------------- summary --- */
.pc-summary {
    border-top: 1px solid var(--pc-border);
    background: var(--pc-surface);
    padding: 16px 18px;
}
.pc-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}
.pc-summary__row .lbl {
    color: var(--pc-muted);
    font-size: 0.86rem;
    font-weight: 600;
}
.pc-summary__row.is-total .lbl {
    color: var(--pc-ink);
    font-weight: 700;
}
.pc-summary__row .val {
    font-weight: 700;
    color: var(--pc-ink);
}
.pc-summary__row.is-total .val {
    font-size: 1.5rem;
    font-weight: 800;
}
.pc-summary__actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.pc-summary__actions .btn {
    width: 100%;
}

/* mobile: estimate flows under the catalog; panel un-caps its height */
@media (max-width: 991.98px) {
    .pc-panel {
        max-height: none;
    }
    .pc-lines {
        overflow: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-product,
    .pc-add,
    .pc-chip {
        transition: none;
    }
}

/* =============================================================================
   v3 polish — kill the currency info-icon noise, brand the Radzen slider,
   collapsible categories, richer cards, refined estimate.
   ============================================================================= */

/* 1. The SDK renders a <sup> info-icon + tooltip next to EVERY converted amount.
   Across 39 catalog prices that reads as glitchy dots — hide the icon, keep the
   number. Conversion transparency is restated once, in the summary note. */
.pc .money-container {
    gap: 0 !important;
}
.pc .money-container sup {
    display: none !important;
}

/* 2. Brand the Radzen slider so it matches the panel (was default grey). */
.pc .rz-slider {
    background: var(--pc-border);
    height: 6px;
    border: 0;
    border-radius: 999px;
}
.pc .rz-slider .rz-slider-range {
    background: var(--pc-brand);
    border-radius: 999px;
}
.pc .rz-slider .rz-slider-handle {
    background: #fff;
    border: 2px solid var(--pc-brand);
    width: 18px;
    height: 18px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.pc .rz-slider .rz-slider-handle:hover,
.pc .rz-slider .rz-slider-handle:focus {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc-brand) 20%, transparent);
}
.pc .rz-slider .rz-slider-handle:active {
    transform: scale(1.08);
}

/* 3. Collapsible category groups — a clean, browsable accordion header. */
.pc-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    border-bottom: 0;
    padding: 8px 2px;
    margin: 0 0 4px;
    transition: color 0.15s ease;
}
.pc-group__title:hover {
    color: var(--pc-brand);
}
.pc-group__chevron {
    transition: transform 0.2s ease;
    flex: none;
    opacity: 0.6;
}
.pc-group.is-collapsed .pc-group__chevron {
    transform: rotate(-90deg);
}
.pc-group__count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pc-muted);
    background: color-mix(in srgb, var(--pc-muted) 10%, #fff);
    border-radius: 999px;
    padding: 1px 8px;
    letter-spacing: 0;
}
.pc-group__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.22s ease;
}
.pc-group.is-collapsed .pc-group__body {
    grid-template-rows: 0fr;
}
.pc-group__body > div {
    overflow: hidden;
    min-height: 0;
    padding-bottom: 4px;
}

/* 4. Richer product cards — a brand-tinted category dot + crisper "added" state. */
.pc-product__name {
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.pc-product__name::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pc-brand);
    flex: none;
    transform: translateY(-1px);
    opacity: 0.55;
}
.pc-product.is-added {
    box-shadow: 0 0 0 1.5px var(--pc-brand) inset, 0 8px 18px -12px color-mix(in srgb, var(--pc-brand) 60%, transparent);
}
.pc-product.is-added .pc-product__name::before {
    opacity: 1;
}
.pc-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pc-product.is-added .pc-add {
    border-color: color-mix(in srgb, var(--pc-brand) 35%, var(--pc-border));
}

/* 5. Estimate line-items — per-line hover + tidy config block. */
.pc-line:hover {
    background: color-mix(in srgb, var(--pc-brand) 4%, #fff);
}
.pc-line__config {
    padding-top: 8px;
}

/* 6. Search: room for a clear button. */
.pc-search input {
    padding-right: 40px;
}
.pc-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--pc-muted);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pc-search__clear:hover {
    color: var(--pc-ink);
    background: var(--pc-surface);
}

/* 7. Summary note (replaces the 39 conversion tooltips with one honest line). */
.pc-summary__note {
    font-size: 0.72rem;
    color: var(--pc-muted);
    margin: 10px 0 0;
    line-height: 1.4;
}
.pc-summary__row.is-total {
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--pc-border);
}

/* --- estimate line description + toggle (mirrors the gallery card "…" clamp) --- */
.pc-line__desc {
    font-size: 0.8rem;
    color: var(--pc-muted);
    line-height: 1.45;
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pc-line__desc.is-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.pc-line__more {
    border: 0;
    background: none;
    padding: 2px 0 0;
    margin: 0;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--pc-brand);
    cursor: pointer;
}
.pc-line__more:hover {
    text-decoration: underline;
}

/* =============================================================================
   v3 — saved estimates, export/save toolbar, print (Save as PDF)
   ============================================================================= */

/* panel head tools cluster (saved toggle + clear all) */
.pc-panel__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.pc-tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--pc-border);
    background: #fff;
    color: var(--pc-ink);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pc-tool:hover {
    border-color: color-mix(in srgb, var(--pc-brand) 45%, var(--pc-border));
    color: var(--pc-brand);
}
.pc-tool.is-active {
    background: color-mix(in srgb, var(--pc-brand) 10%, #fff);
    border-color: color-mix(in srgb, var(--pc-brand) 40%, var(--pc-border));
    color: var(--pc-brand);
}

/* saved estimates list */
.pc-saved {
    border-bottom: 1px solid var(--pc-border);
    background: var(--pc-surface);
    padding: 10px 14px 12px;
}
.pc-saved__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pc-muted);
    margin-bottom: 8px;
}
.pc-saved__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--pc-border);
}
.pc-saved__item:first-of-type {
    border-top: 0;
}
.pc-saved__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.pc-saved__name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--pc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-saved__sub {
    font-size: 0.72rem;
    color: var(--pc-muted);
}
.pc-saved__acts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}
.pc-saved__load {
    border: 1px solid var(--pc-brand);
    background: #fff;
    color: var(--pc-brand);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pc-saved__load:hover {
    background: var(--pc-brand);
    color: #fff;
}
.pc-saved__del {
    border: 0;
    background: none;
    color: var(--pc-muted);
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.pc-saved__del:hover {
    color: #e5484d;
    background: color-mix(in srgb, #e5484d 10%, #fff);
}

/* summary utility row: Save / CSV / PDF */
.pc-summary__util {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.pc-util {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--pc-border);
    background: #fff;
    color: var(--pc-ink);
    border-radius: var(--pc-radius-sm);
    padding: 8px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pc-util:hover {
    border-color: color-mix(in srgb, var(--pc-brand) 45%, var(--pc-border));
    color: var(--pc-brand);
    background: color-mix(in srgb, var(--pc-brand) 4%, #fff);
}
.pc-util svg {
    opacity: 0.75;
}

/* inline save-name input */
.pc-save {
    display: flex;
    gap: 6px;
    width: 100%;
}
.pc-save__input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--pc-brand);
    border-radius: var(--pc-radius-sm);
    padding: 0 12px;
    font: inherit;
    font-size: 0.86rem;
    color: var(--pc-ink);
    background: #fff;
}
.pc-save__input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-brand) 18%, transparent);
}
.pc-save__ok {
    border: 1px solid var(--pc-brand);
    background: var(--pc-brand);
    color: #fff;
    border-radius: var(--pc-radius-sm);
    padding: 0 16px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.pc-save__ok:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pc-brand), #000 10%);
}
.pc-save__ok:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pc-save__x {
    border: 1px solid var(--pc-border);
    background: #fff;
    color: var(--pc-muted);
    border-radius: var(--pc-radius-sm);
    width: 38px;
    flex: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pc-save__x:hover {
    color: var(--pc-ink);
    border-color: var(--pc-muted);
}

/* --------------------------------------------------------------- print / PDF --- */
@media print {
    /* isolate the estimate panel: hide everything, re-show just the estimate */
    body * { visibility: hidden !important; }
    .pc-estimate, .pc-estimate * { visibility: visible !important; }

    .pc-hero, .pc-catalog { display: none !important; }

    .pc-estimate {
        position: absolute !important;
        left: 0; top: 0;
        width: 100% !important;
    }
    .pc-panel {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .pc-lines {
        overflow: visible !important;
        max-height: none !important;
    }
    /* drop interactive chrome from the printout */
    .pc-remove, .pc-clear, .pc-panel__tools, .pc-summary__util,
    .pc-summary__actions, .pc-saved, .pc-line__more, .pc-add {
        display: none !important;
    }
    .pc-line { break-inside: avoid; }
}