/* ═══════════════════════════════════════════════════════════════════
   WAVE 1 CALCULATORS - shared styles for the wave-1 batch C tools
   (Meeting Cost Calculator, Subscription Cost Auditor).

   Namespacing: BEM-style with .wcalc- prefix to avoid collisions
   with .tt-*, .ut-*, .cg-*, etc.
═══════════════════════════════════════════════════════════════════ */

.wcalc-form {
    display: grid;
    gap: 1.25rem;
}

.wcalc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.wcalc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 720px) {
    .wcalc-grid-2,
    .wcalc-grid-3 {
        grid-template-columns: 1fr;
    }
}

.wcalc-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-text);
    margin-bottom: .375rem;
}

.wcalc-field-hint {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: .8125rem;
}

.wcalc-section-title {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin: 0 0 .5rem;
}

/* ─── Privacy / info banner ─── */
.wcalc-privacy-banner {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    background: var(--color-primary-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    color: var(--color-text);
    font-size: .875rem;
}

.wcalc-privacy-banner__icon {
    color: var(--color-primary);
    font-size: 1rem;
    line-height: 1.2;
}

.wcalc-privacy-banner__text {
    line-height: 1.4;
}

/* ─── Attendee / subscription row card ─── */
.wcalc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) auto;
    gap: .625rem;
    align-items: end;
    padding: .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.wcalc-row + .wcalc-row {
    margin-top: .625rem;
}

.wcalc-row__delete {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}

.wcalc-row__delete:hover {
    color: #B91C1C;
    border-color: #FCA5A5;
    background: #FEF2F2;
}

@media (max-width: 720px) {
    .wcalc-row {
        grid-template-columns: 1fr 1fr;
    }
    .wcalc-row__delete {
        grid-column: span 2;
        justify-self: end;
    }
}

.wcalc-row--sub {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, 1fr) auto;
}

@media (max-width: 980px) {
    .wcalc-row--sub {
        grid-template-columns: 1fr 1fr;
    }
    .wcalc-row--sub .wcalc-row__delete {
        grid-column: span 2;
        justify-self: end;
    }
}

.wcalc-row__label {
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-bottom: .25rem;
    font-weight: 500;
    display: block;
}

/* ─── Big result card ─── */
.wcalc-result {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #FFFFFF 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.wcalc-result__hero-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: .25rem;
}

.wcalc-result__hero-value {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.wcalc-result__hero-meta {
    margin-top: .375rem;
    font-size: .9375rem;
    color: var(--color-text-muted);
}

/* ─── Stat tiles ─── */
.wcalc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.wcalc-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
}

.wcalc-stat__label {
    font-size: .75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-bottom: .25rem;
}

.wcalc-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.wcalc-stat__sub {
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-top: .125rem;
}

/* ─── Breakdown table ─── */
.wcalc-table-wrap {
    margin-top: 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.wcalc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    background: var(--color-surface);
}

.wcalc-table th,
.wcalc-table td {
    padding: .625rem .875rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.wcalc-table th {
    background: #F8FAFC;
    font-weight: 600;
    font-size: .8125rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.wcalc-table tbody tr:last-child td {
    border-bottom: 0;
}

.wcalc-table td.wcalc-num,
.wcalc-table th.wcalc-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── Share zinger ─── */
.wcalc-share {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.wcalc-share__text {
    flex: 1;
    min-width: 240px;
    font-size: .9375rem;
    color: var(--color-text);
    background: #FFF7ED;
    border: 1px dashed #FDBA74;
    border-radius: var(--radius-md);
    padding: .625rem .875rem;
    font-style: italic;
}

/* ─── Pie chart (CSS conic-gradient) ─── */
.wcalc-pie-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.wcalc-pie {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(var(--color-border) 0 100%);
    box-shadow: inset 0 0 0 1px var(--color-border);
    position: relative;
}

.wcalc-pie--empty::after {
    content: 'No data';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: .8125rem;
    background: var(--color-surface);
    border-radius: 50%;
    margin: 28px;
}

.wcalc-pie-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 200px;
}

.wcalc-pie-legend__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    font-size: .875rem;
}

.wcalc-pie-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.wcalc-pie-legend__label {
    flex: 1;
    text-transform: capitalize;
    color: var(--color-text);
}

.wcalc-pie-legend__value {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ─── Lists used in auditor (top-3, unused, worst per-hour) ─── */
.wcalc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wcalc-list__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: .9375rem;
}

.wcalc-list__item + .wcalc-list__item {
    margin-top: .375rem;
}

.wcalc-list__name {
    font-weight: 600;
    color: var(--color-text);
}

.wcalc-list__meta {
    color: var(--color-text-muted);
    font-size: .8125rem;
    margin-left: .5rem;
}

.wcalc-list__amount {
    color: var(--color-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wcalc-list__amount--warn {
    color: #B45309;
}

.wcalc-list--empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: .9375rem;
}

/* ─── Action row (toolbar) ─── */
.wcalc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.wcalc-actions .btn {
    font-size: .875rem;
}

/* ─── Section panels in result ─── */
.wcalc-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.125rem;
}

.wcalc-panel + .wcalc-panel {
    margin-top: .75rem;
}

.wcalc-panel__title {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin: 0 0 .5rem;
}

/* ─── Slider rail value badge ─── */
.wcalc-slider-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.wcalc-slider-row .form-range {
    flex: 1;
}

.wcalc-slider-value {
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-primary);
}

/* ─── Empty-state fallback for result ─── */
.wcalc-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: .9375rem;
}