/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Break-Even Calculator — style.css  |  RT-FIN-014
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Input group ─────────────────────────────────────────────────────────── */
.be-input-group {
    margin-bottom: 20px;
}

.be-input-label-row {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             8px;
    margin-bottom:   6px;
}

.be-input-label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       #0D1B2A;
}

/* Tooltip ── */
.be-tooltip-wrap {
    position: relative;
    display:  inline-flex;
    align-items: center;
}

.be-tooltip-icon {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    #E2E4E8;
    color:         #64748B;
    font-size:     0.6875rem;
    font-weight:   700;
    cursor:        help;
    user-select:   none;
    flex-shrink:   0;
    transition:    background 0.15s ease;
}

.be-tooltip-icon:hover { background: #d8d6d0; }

.be-tooltip-text {
    display:       none;
    position:      absolute;
    right:         0;
    top:           calc(100% + 6px);
    width:         240px;
    background:    #0D1B2A;
    color:         #FFFFFF;
    font-size:     0.8125rem;
    font-weight:   400;
    line-height:   1.5;
    padding:       10px 14px;
    border-radius: 8px;
    z-index:       10;
    box-shadow:    0 4px 16px rgba(0,0,0,0.18);
    pointer-events: none;
}

.be-tooltip-wrap:hover .be-tooltip-text,
.be-tooltip-wrap:focus-within .be-tooltip-text {
    display: block;
}

/* Input wrap ── */
.be-input-wrap {
    position:    relative;
    display:     flex;
    align-items: center;
}

.be-currency-prefix {
    position:       absolute;
    left:           16px;
    font-family:    'IBM Plex Serif', serif;
    font-size:      1.375rem;
    color:          #64748B;
    pointer-events: none;
    user-select:    none;
}

.be-input {
    width:          100%;
    padding:        14px 14px 14px 42px;
    font-family:    'IBM Plex Serif', serif;
    font-size:      1.5rem;
    font-weight:    400;
    color:          #0D1B2A;
    background:     #ffffff;
    border:         2px solid #E2E4E8;
    border-radius:  12px;
    outline:        none;
    transition:     border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance:     none;
}

.be-input:focus {
    border-color: #E8472F;
    box-shadow:   0 0 0 4px rgba(232, 98, 42, 0.12);
}

.be-input::placeholder { color: #c5c2bc; }

.be-input::-webkit-outer-spin-button,
.be-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Result cards ────────────────────────────────────────────────────────── */
.be-result-cards {
    display:   grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:       12px;
    margin:    24px 0 8px;
}

.be-result-card {
    background:    #FFFFFF;
    border-radius: 12px;
    padding:       18px 20px;
    display:       flex;
    flex-direction: column;
    gap:           4px;
}

.be-result-card.be-card-primary {
    background: #fff5f0;
    border:     1.5px solid #f5c4aa;
}

.be-result-card-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       #64748B;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.be-result-card-value {
    font-family: 'IBM Plex Serif', serif;
    font-size:   1.875rem;
    font-weight: 400;
    color:       #E8472F;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.be-result-card:not(.be-card-primary) .be-result-card-value {
    font-size: 1.375rem;
    color:     #0D1B2A;
}

.be-result-card-sub {
    font-size:   0.8125rem;
    font-weight: 500;
    color:       #64748B;
    font-variant-numeric: tabular-nums;
}

/* ── CM warning ──────────────────────────────────────────────────────────── */
.be-cm-warning {
    background:    #fdecea;
    border:        1.5px solid #f5a8a8;
    border-radius: 8px;
    padding:       10px 16px;
    font-size:     0.875rem;
    font-weight:   600;
    color:         #c62828;
    margin-top:    8px;
}

/* ── What-If scenario ─────────────────────────────────────────────────────── */
.be-whatif-section {
    background:    #FFFFFF;
    border-radius: 12px;
    padding:       20px 24px;
    margin:        24px 0 8px;
}

.be-whatif-title {
    font-size:     0.9375rem;
    font-weight:   700;
    color:         #0D1B2A;
    margin-bottom: 14px;
}

.be-whatif-row {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}

.be-whatif-label {
    font-size:   0.9375rem;
    font-weight: 500;
    color:       #64748B;
    white-space: nowrap;
}

.be-whatif-input {
    width:          120px;
    padding:        10px 14px;
    font-family:    'IBM Plex Sans', sans-serif;
    font-size:      1rem;
    font-weight:    600;
    color:          #0D1B2A;
    background:     #ffffff;
    border:         2px solid #E2E4E8;
    border-radius:  8px;
    outline:        none;
    transition:     border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance:     none;
    text-align:     center;
}

.be-whatif-input:focus {
    border-color: #E8472F;
    box-shadow:   0 0 0 3px rgba(232, 98, 42, 0.12);
}

.be-whatif-input::placeholder { color: #c5c2bc; }

.be-whatif-input::-webkit-outer-spin-button,
.be-whatif-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.be-whatif-suffix {
    font-size:   0.9375rem;
    font-weight: 500;
    color:       #64748B;
    white-space: nowrap;
}

.be-whatif-result {
    margin-top:  14px;
    font-family: 'IBM Plex Serif', serif;
    font-size:   1.625rem;
    font-weight: 400;
    color:       #0D1B2A;
    font-variant-numeric: tabular-nums;
}

.be-whatif-result.be-profit { color: #2e7d32; }
.be-whatif-result.be-loss   { color: #d32f2f; }

/* ── CSS-only bar chart ──────────────────────────────────────────────────── */
.be-chart-wrap {
    margin-top: 24px;
}

#be-chart {
    background:    #FFFFFF;
    border-radius: 12px;
    padding:       20px 24px;
}

.be-chart-title {
    font-size:     0.9375rem;
    font-weight:   700;
    color:         #0D1B2A;
    margin-bottom: 16px;
}

.be-bar-row {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-bottom: 12px;
}

.be-bar-row:last-of-type { margin-bottom: 0; }

.be-bar-label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       #64748B;
    width:       110px;
    flex-shrink: 0;
    text-align:  right;
}

.be-bar-track {
    flex:          1;
    height:        28px;
    background:    #E2E4E8;
    border-radius: 6px;
    overflow:      hidden;
}

.be-bar-fill {
    height:        100%;
    border-radius: 6px;
    transition:    width 0.4s ease;
    min-width:     4px;
}

.bar-fixed    { background: #E8472F; }
.bar-variable { background: #f5a96b; }
.bar-revenue  { background: #2e7d32; }

.be-bar-value {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       #0D1B2A;
    width:       90px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.be-chart-note {
    margin-top:  14px;
    font-size:   0.8125rem;
    font-weight: 500;
    color:       #64748B;
    border-top:  1px solid #E2E4E8;
    padding-top: 10px;
}

/* ── GST note ────────────────────────────────────────────────────────────── */
.be-gst-note {
    font-size:   0.8125rem;
    font-weight: 500;
    color:       #64748B;
    background:  #f0efec;
    border-left: 3px solid #E8472F;
    border-radius: 0 6px 6px 0;
    padding:     10px 14px;
    margin-top:  20px;
    line-height: 1.55;
}

/* ── Pull quote ──────────────────────────────────────────────────────────── */
.pull-quote {
    border-left:   4px solid #E8472F;
    margin:        28px 0;
    padding:       16px 24px;
    background:    #fff5f0;
    border-radius: 0 10px 10px 0;
}

.pull-quote p {
    font-family: 'IBM Plex Serif', serif;
    font-size:   1.1875rem;
    font-style:  italic;
    color:       #0D1B2A;
    margin:      0;
    line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .be-input {
        font-size: 1.25rem;
    }

    .be-result-card-value {
        font-size: 1.5rem;
    }

    .be-result-cards {
        grid-template-columns: 1fr 1fr;
    }

    .be-bar-label {
        width: 80px;
        font-size: 0.75rem;
    }

    .be-bar-value {
        width: 70px;
        font-size: 0.75rem;
    }

    .be-whatif-row {
        gap: 8px;
    }

    .be-whatif-input {
        width: 100px;
    }

    #be-chart {
        padding: 16px 14px;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */