/* =========================================================
   Calculator Styles — Shared Classes + Per-Calculator Overrides
   ========================================================= */

/* === TIPPY === */
.tippy-box[data-theme~='dark-custom'] {
    background: #2c2c2c;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    padding: 2px 4px;
}
.tippy-box[data-theme~='dark-custom'] .tippy-arrow { color: #2c2c2c; }

/* === CSS VARIABLES — Standard === */
#bec-wrap, #cfc-wrap, #dcc-wrap, #rgc-wrap {
    --primary: #0F172A;
    --accent-green: #10B981;
    --accent-dark: #0F172A;
    --accent-blue: #3B82F6;
    --accent-orange: #F59E0B;
    --bg: #ffffff;
    --surface: #F0F4F8;
    --border: #E5E7EB;
    --text: #0F172A;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
}

/* === CSS VARIABLES — With red === */
#blc-wrap, #brc-wrap, #crc-wrap, #dio-wrap, #dso-wrap, #ebc-wrap,
#lcc-wrap, #mkc-wrap, #nic-wrap, #pmc-wrap, #qrc-wrap, #roic-wrap, #stc-wrap, #trc-wrap {
    --primary: #0F172A;
    --accent-green: #10B981;
    --accent-dark: #0F172A;
    --accent-blue: #3B82F6;
    --accent-red: #EF4444;
    --accent-orange: #F59E0B;
    --bg: #ffffff;
    --surface: #F0F4F8;
    --border: #E5E7EB;
    --text: #0F172A;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
}

/* === CSS VARIABLES — With purple === */
#sbvc-wrap, #scc-wrap {
    --primary: #0F172A;
    --accent-green: #10B981;
    --accent-dark: #0F172A;
    --accent-blue: #3B82F6;
    --accent-purple: #6366F1;
    --accent-orange: #F59E0B;
    --bg: #ffffff;
    --surface: #F0F4F8;
    --border: #E5E7EB;
    --text: #0F172A;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
}

/* === CSS VARIABLES — With red + purple === */
#roi-wrap {
    --primary: #0F172A;
    --accent-green: #10B981;
    --accent-dark: #0F172A;
    --accent-blue: #3B82F6;
    --accent-red: #EF4444;
    --accent-purple: #6366F1;
    --accent-orange: #F59E0B;
    --bg: #ffffff;
    --surface: #F0F4F8;
    --border: #E5E7EB;
    --text: #0F172A;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
}

/* =========================================================
   SHARED STYLES
   ========================================================= */

.calc-wrap {
    background: var(--surface);
    color: var(--text);
    padding: 24px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.5;
    font-size: 14px;
    border-radius: 12px;
}
.calc-wrap *, .calc-wrap *::before, .calc-wrap *::after { box-sizing: border-box; }

/* Chart */
.calc-chart-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    overflow: hidden;
}
.calc-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calc-chart-title { font-size: 22px; font-weight: 700; color: var(--text); }

/* Download button */
.calc-download-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 12px 25px !important;
    font-size: 16px !important;
    font-weight: 600;
    background: #3B6FF0;
    border: none !important;
    border-radius: 6px !important;
}
.calc-download-btn:hover { background: #2557CC; }

/* Chart heights */
#blc-chart, #brc-chart, #crc-chart, #dio-chart, #dso-chart, #ebc-chart, #lcc-chart,
#mkc-chart, #nic-chart, #qrc-chart, #rgc-chart, #roi-chart, #roic-chart, #sbvc-chart,
#scc-chart, #stc-chart, #trc-chart { min-height: 340px; }
#bec-chart, #cfc-chart, #pmc-chart { min-height: 320px; }

/* KPI */
.calc-kpi-section { padding-top: 25px; }
.calc-kpi-section-title {
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: var(--text);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.calc-kpi-row { padding: 16px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.calc-kpi { text-align: center; padding: 4px 0; }
.calc-kpi-value { font-size: 22px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.3px; }
.calc-kpi-value.green  { color: #10B981; }
.calc-kpi-value.dark   { color: #0F172A; }
.calc-kpi-value.blue   { color: #3B82F6; }
.calc-kpi-value.orange { color: #F59E0B; }
.calc-kpi-value.red    { color: #EF4444; }
.calc-kpi-value.purple { color: #6366F1; }
.calc-kpi-label { font-size: 13px; color: var(--text-muted); font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* Info icons */
.calc-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    color: #9CA3AF;
    line-height: 1;
}
.calc-kpi-label .calc-info { font-size: 12px; }
.calc-field label .calc-info { font-size: 13px; }
.calc-info:hover { color: #6B7280; }

/* Inputs section — base */
.calc-inputs-section { margin-top: 20px; padding: 0; display: grid; gap: 16px; }

/* Grid columns per calculator */
.bec-inputs-section, .brc-inputs-section, .cfc-inputs-section, .dio-inputs-section,
.dso-inputs-section, .ebc-inputs-section, .mkc-inputs-section, .rgc-inputs-section,
.sbvc-inputs-section, .stc-inputs-section { grid-template-columns: repeat(3, 1fr); }

.blc-inputs-section, .crc-inputs-section, .dcc-inputs-section, .lcc-inputs-section,
.nic-inputs-section, .pmc-inputs-section, .qrc-inputs-section, .roi-inputs-section,
.roic-inputs-section, .scc-inputs-section, .trc-inputs-section { grid-template-columns: repeat(2, 1fr); }

/* Breakpoints */
@media (max-width: 800px) {
    .bec-inputs-section, .blc-inputs-section, .cfc-inputs-section,
    .pmc-inputs-section, .scc-inputs-section { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 900px) {
    .brc-inputs-section, .crc-inputs-section, .dcc-inputs-section, .dio-inputs-section,
    .dso-inputs-section, .ebc-inputs-section, .lcc-inputs-section, .mkc-inputs-section,
    .nic-inputs-section, .qrc-inputs-section, .rgc-inputs-section, .roi-inputs-section,
    .roic-inputs-section, .sbvc-inputs-section, .stc-inputs-section, .trc-inputs-section { grid-template-columns: 1fr; gap: 12px; }
}

/* Input group */
.calc-input-group { min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.calc-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 0; border-bottom: none; }
.calc-group-icon { font-size: 16px; line-height: 1; color: var(--primary); }
.calc-group-title { font-size: 14px; font-weight: 700; color: var(--primary); }

/* Field */
.calc-field { margin-bottom: 12px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-wrap .calc-field label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Number input */
.calc-wrap .calc-field input[type="number"] {
    width: 100% !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 14px !important;
    outline: none !important;
    transition: border-color .2s, box-shadow .2s;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.calc-wrap .calc-field input[type="number"]::-webkit-inner-spin-button,
.calc-wrap .calc-field input[type="number"]::-webkit-outer-spin-button { opacity: 0 !important; display: block !important; }
.calc-wrap .calc-field input[type="number"]:hover::-webkit-inner-spin-button,
.calc-wrap .calc-field input[type="number"]:hover::-webkit-outer-spin-button,
.calc-wrap .calc-field input[type="number"]:focus::-webkit-inner-spin-button,
.calc-wrap .calc-field input[type="number"]:focus::-webkit-outer-spin-button { opacity: 1 !important; }
.calc-wrap .calc-field input[type="number"]:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12) !important;
}

/* Input wrap, prefix, suffix */
.calc-input-wrap { position: relative; display: flex; align-items: center; }
.calc-input-prefix { position: absolute; left: 14px; font-size: 14px; color: var(--text-secondary); pointer-events: none; font-weight: 400; }
.calc-input-suffix { position: absolute; right: 14px; font-size: 14px; color: var(--text-secondary); pointer-events: none; font-weight: 400; }
.calc-wrap .calc-has-prefix input[type="number"] { padding-left: 30px !important; }
.calc-wrap .calc-has-suffix input[type="number"] { padding-right: 36px !important; }

/* BLC, BRC use narrower suffix padding */
#blc-wrap .calc-has-suffix input[type="number"],
#brc-wrap .calc-has-suffix input[type="number"] { padding-right: 30px !important; }

/* Label colors — all black */
[class$="-label-green"], [class$="-label-blue"], [class$="-label-orange"],
[class$="-label-red"], [class$="-label-purple"], [class$="-label-dark"] { color: #1a1a2e !important; }

/* Mobile */
@media (max-width: 640px) {
    .calc-wrap { padding: 16px; }
    .calc-chart-section { padding: 14px; }
    .calc-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 0; }
    .calc-kpi-value { font-size: 17px; word-break: break-word; }
    .calc-kpi-label { font-size: 12px; }
    .calc-kpi-section-title { font-size: 14px; }
    .calc-chart-header { flex-wrap: wrap; gap: 8px; }
    .calc-download-btn { padding: 6px 12px; font-size: 12px; }
}

/* =========================================================
   PER-CALCULATOR OVERRIDES
   ========================================================= */

/* DCC — different download button */
#dcc-wrap .calc-download-btn {
    padding: 6px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-weight: 400;
    color: var(--text-secondary);
    transition: background .15s, border-color .15s;
}
#dcc-wrap .calc-download-btn:hover { background: #f0f2f4; border-color: #9CA3AF; }

/* DCC — chart section & title */
#dcc-wrap .calc-chart-section { padding: 12px 8px 4px; margin-bottom: 16px; }
#dcc-wrap .calc-chart-title { font-size: 22px; }
#dcc-wrap .calc-kpi-section-title { margin-bottom: 0; }

/* =========================================================
   SPECIAL FEATURES
   ========================================================= */

/* DCC — Result Table */
.dcc-result-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.dcc-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
}
.dcc-result-row:last-child { border-bottom: none; }
.dcc-result-row.dcc-result-highlight { background: #10B981; color: #ffffff; }
.dcc-result-row.dcc-result-highlight .dcc-result-label,
.dcc-result-row.dcc-result-highlight .dcc-result-value { color: #ffffff; }
.dcc-result-row.dcc-result-highlight .dcc-info { color: rgba(255,255,255,0.7); }
.dcc-result-label { font-weight: 500; display: flex; align-items: center; gap: 6px; color: var(--text); }
.dcc-result-value { font-weight: 700; font-size: 15px; color: var(--text); }

/* CFC — Accordion (hidden on desktop) */
.cfc-accordion-chevron, .cfc-accordion-nav, .cfc-see-chart-wrap { display: none; }

@media (max-width: 640px) {
    .cfc-accordion-chevron { display: inline-flex; margin-left: auto; color: var(--accent-green); font-size: 14px; transition: transform 0.3s; }
    .cfc-group-header { cursor: pointer; -webkit-user-select: none; user-select: none; margin-bottom: 0; }
    .cfc-group-body { overflow: hidden; padding-top: 12px; }
    .cfc-accordion-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
    .cfc-nav-back-only { justify-content: flex-start; }
    .cfc-accordion-nav .cfc-next-btn:first-child { margin-left: auto; }
    .cfc-next-btn, .cfc-back-btn { background: none; border: none; color: var(--accent-green); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
    .cfc-next-btn:hover, .cfc-back-btn:hover { color: var(--primary); }
    .cfc-see-chart-wrap { display: block; margin-top: 20px; }
    #cfc-see-chart-btn { width: 100%; padding: 14px 20px; background: var(--accent-green); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; }
    #cfc-see-chart-btn:hover { background: var(--primary); }
    .cfc-inputs-section { gap: 0 !important; }
    .cfc-input-group { border-radius: 0; border-left: none; border-right: none; border-bottom: none; }
    .cfc-input-group:last-child { border-bottom: 1px solid var(--border); }
}

/* SBVC — Select Dropdown */
#sbvc-wrap .sbvc-select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    padding: 10px 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer;
    appearance: auto;
    line-height: 1.4;
}
#sbvc-wrap .sbvc-select:focus { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }

/* STC — Toggle Switch */
.stc-toggle-wrap { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.stc-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.stc-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.stc-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 24px; transition: background 0.25s; }
.stc-toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.stc-toggle input:checked + .stc-toggle-slider { background: #3B6FF0; }
.stc-toggle input:checked + .stc-toggle-slider::before { transform: translateX(20px); }
.stc-toggle-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }