/* Taschenrechner – Widget (Embed-Variante)
 * Laedt NACH pages/calculator.css (+ game-toolbar/highscore-panel bei Spielen).
 * Kompakte Raender fuer iframe-Einbindung, Badge-Abstand unten rechts.
 */

body.boza-widget.page-calculator {
    padding: 12px;
}

body.boza-widget.page-calculator .container {
    max-width: 580px;
    padding: 0;
}

/* Platz fuer die Badge unten rechts */
body.boza-widget.page-calculator .main-card {
    margin-bottom: 40px;
}

/* Compact-Modus (?compact=true): Header reduzieren */
body.boza-widget.page-calculator.compact .card-header h1 {
    font-size: 1.35em;
}

body.boza-widget.page-calculator.compact .card-header p {
    display: none;
}

/* Akzentfarbe (?accent=hex) – gilt fuer aktive Tabs */
body.boza-widget.page-calculator .tab.active,
body.dark-theme.page-calculator .tab.active {
    background: var(--c-accent, #667eea);
    color: var(--c-accent-text, #fff);
}

/* Button-Textfarbe (?accentText=hex) – Buttons mit farbigem Hintergrund */
body.boza-widget.page-calculator .tab-content .operator,
body.boza-widget.page-calculator .tab-content .equals,
body.boza-widget.page-calculator .tab-content .clear,
body.dark-theme.page-calculator .tab-content .operator,
body.dark-theme.page-calculator .tab-content .equals,
body.dark-theme.page-calculator .tab-content .clear {
    color: var(--c-accent-text, #fff);
}

/* ==== Voll-Anpassung (Tools): Ziffern-Buttons, Display, Borders, Akzentflächen ====
 * Greift nur bei gesetzten Params (Fallback = Original). Variablen vom Early-Script.
 */

/* Ziffern-Buttons (hell + dunkel) */
body.boza-widget .tab-content button,
body.boza-widget.dark-theme .tab-content button {
    background: var(--c-surface-2, #f0f0f0);
    color: var(--c-text, #333);
}
body.dark-theme.boza-widget .tab-content button {
    background: var(--c-surface-2, #2a2a3e);
    color: var(--c-text, #e0e0e0);
}
body.boza-widget .tab-content button:hover,
body.boza-widget.dark-theme .tab-content button:hover {
    background: var(--c-surface-2-hover, #e0e0e0);
}
body.dark-theme.boza-widget .tab-content button:hover {
    background: var(--c-surface-2-hover, #3a3a4e);
}

/* Tabs inaktiv */
body.boza-widget .tab,
body.boza-widget.dark-theme .tab {
    background: var(--c-surface-2, #f0f0f0);
    color: var(--c-text, #666);
}
body.dark-theme.boza-widget .tab {
    background: var(--c-surface-2, #2a2a3e);
    color: var(--c-text, #b0b0b0);
}
body.boza-widget .tab:hover,
body.boza-widget.dark-theme .tab:hover {
    background: var(--c-surface-2-hover, #e0e0e0);
}
body.dark-theme.boza-widget .tab:hover {
    background: var(--c-surface-2-hover, #3a3a4e);
}

/* Display + Expression + Result */
body.boza-widget .display {
    background: var(--c-surface, #f8f9fa);
    border-color: var(--c-border, #e0e0e0);
}
body.dark-theme.boza-widget .display {
    background: var(--c-surface, #1a1f33);
    border-color: var(--c-border, #2a3045);
}
body.boza-widget .expression {
    color: var(--c-muted, #666);
}
body.dark-theme.boza-widget .expression {
    color: var(--c-muted, #b0b0b0);
}
body.boza-widget .result {
    color: var(--c-success, #10b981);
}

/* Akzentflächen: Operator, Equals, Clear, Copy (folgen accent/accent-text) */
body.boza-widget .tab-content .operator,
body.boza-widget.dark-theme .tab-content .operator,
body.boza-widget .copy-btn,
body.boza-widget.dark-theme .copy-btn {
    background: var(--c-accent, #667eea);
    color: var(--c-accent-text, #fff);
}
body.boza-widget .tab-content .operator:hover,
body.boza-widget.dark-theme .tab-content .operator:hover,
body.boza-widget .copy-btn:hover,
body.boza-widget.dark-theme .copy-btn:hover {
    background: var(--c-accent-hover, #5568d3);
}
body.boza-widget .tab-content .equals,
body.boza-widget.dark-theme .tab-content .equals {
    background: var(--c-success, #10b981);
    color: var(--c-accent-text, #fff);
}
body.boza-widget .tab-content .equals:hover,
body.boza-widget.dark-theme .tab-content .equals:hover {
    background: var(--c-success-hover, #059669);
}
body.boza-widget .tab-content .clear,
body.boza-widget.dark-theme .tab-content .clear {
    background: var(--c-danger, #ef4444);
    color: var(--c-accent-text, #fff);
}
body.boza-widget .tab-content .clear:hover,
body.boza-widget.dark-theme .tab-content .clear:hover {
    background: var(--c-danger-hover, #dc2626);
}
body.boza-widget .copy-btn.copied,
body.boza-widget.dark-theme .copy-btn.copied {
    background: var(--c-success, #10b981);
}

/* Aktive Tabs (bereits vorhanden, auf accent umgestellt) */
body.boza-widget .tab.active,
body.dark-theme.boza-widget .tab.active {
    background: var(--c-accent, #667eea);
    color: var(--c-accent-text, #fff);
}

/* Quick-Convert-Buttons -> accent / accentText (Vorrang vor .tab-content button) */
body.boza-widget .tab-content .quick-btn,
body.dark-theme.boza-widget .tab-content .quick-btn {
    background: var(--c-accent, #667eea);
    color: var(--c-accent-text, #fff);
}

body.boza-widget .tab-content .quick-btn:hover,
body.dark-theme.boza-widget .tab-content .quick-btn:hover {
    background: var(--c-accent-hover, #5568d3);
}

/* Eingaben (?btn): Spezial-Inputs und Währungs-Selects */
body.boza-widget .special-input,
body.dark-theme.boza-widget .special-input,
body.boza-widget .currency-select,
body.dark-theme.boza-widget .currency-select {
    background-color: var(--c-surface-2, #f0f0f0);
    color: var(--c-text, #333);
    border-color: var(--c-border, #e0e0e0);
}