/**
 * Funkwelt ATU Drahtrechner - Frontend Styles
 * Nutzt !important und hardcoded Farben wegen Theme-Konflikten.
 */

.fw-drahtrechner {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #2C2C2A !important;
    padding: 0.75rem 0 !important;
    box-sizing: border-box !important;
}

.fw-drahtrechner *,
.fw-drahtrechner *:before,
.fw-drahtrechner *:after {
    box-sizing: border-box !important;
}

/* Controls */
.fw-drahtrechner .fw-dr-controls {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 1.25rem !important;
}

.fw-drahtrechner .fw-dr-control {
    display: block !important;
}

.fw-drahtrechner .fw-dr-label {
    display: block !important;
    font-size: 13px !important;
    color: #5F5E5A !important;
    margin-bottom: 4px !important;
    font-weight: 400 !important;
}

.fw-drahtrechner input[type="number"],
.fw-drahtrechner select {
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    color: #2C2C2A !important;
    background: #FFFFFF !important;
    border: 1px solid #B4B2A9 !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
    height: auto !important;
    box-shadow: none !important;
}

.fw-drahtrechner input[type="number"]:focus,
.fw-drahtrechner select:focus {
    outline: none !important;
    border-color: #378ADD !important;
    box-shadow: 0 0 0 2px rgba(55, 138, 221, 0.2) !important;
}

/* Status Box */
.fw-drahtrechner .fw-dr-status {
    margin-bottom: 1rem !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: #F1EFE8 !important;
    color: #2C2C2A !important;
}

/* Result Cards */
.fw-drahtrechner .fw-dr-results {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 1.25rem !important;
}

.fw-drahtrechner .fw-dr-result {
    background: #F1EFE8 !important;
    border-radius: 8px !important;
    padding: 0.9rem 1.1rem !important;
}

.fw-drahtrechner .fw-dr-result-below {
    border-left: 3px solid #1D9E75 !important;
}

.fw-drahtrechner .fw-dr-result-above {
    border-left: 3px solid #378ADD !important;
}

.fw-drahtrechner .fw-dr-result-value {
    font-size: 26px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: #2C2C2A !important;
    line-height: 1.2 !important;
}

.fw-drahtrechner .fw-dr-result-diff {
    font-size: 12px !important;
    color: #5F5E5A !important;
    margin: 3px 0 0 !important;
}

/* Canvas */
.fw-drahtrechner .fw-dr-canvas-label {
    margin-bottom: 5px !important;
}

.fw-drahtrechner .fw-dr-canvas {
    width: 100% !important;
    border-radius: 6px !important;
    display: block !important;
    background: #F1EFE8 !important;
}

.fw-drahtrechner .fw-dr-ruler {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    color: #5F5E5A !important;
    margin: 2px 0 0.5rem !important;
}

.fw-drahtrechner .fw-dr-formula {
    padding: 6px 12px !important;
    background: #F1EFE8 !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    color: #5F5E5A !important;
    margin-bottom: 1.5rem !important;
}

/* Sections */
.fw-drahtrechner .fw-dr-sep {
    border: none !important;
    border-top: 1px solid #D3D1C7 !important;
    margin: 1.5rem 0 !important;
    height: 0 !important;
}

.fw-drahtrechner .fw-dr-h {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #2C2C2A !important;
    margin: 0 0 0.6rem !important;
}

.fw-drahtrechner .fw-dr-sub {
    font-size: 13px !important;
    color: #5F5E5A !important;
    margin: 0 0 0.75rem !important;
}

.fw-drahtrechner .fw-dr-tip {
    font-size: 13px !important;
    color: #2C2C2A !important;
    line-height: 1.7 !important;
    margin: 0 0 0.6rem !important;
}

.fw-drahtrechner .fw-dr-section {
    background: #F1EFE8 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.75rem !important;
}

.fw-drahtrechner .fw-dr-section-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 0 4px !important;
    color: #2C2C2A !important;
}

.fw-drahtrechner .fw-dr-src {
    font-size: 11px !important;
    color: #5F5E5A !important;
    margin-top: 0.5rem !important;
}

/* Ranges */
.fw-drahtrechner .fw-dr-ranges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 0.5rem !important;
}

.fw-drahtrechner .fw-dr-range {
    border-radius: 8px !important;
    padding: 6px 10px !important;
    min-width: 90px !important;
    background: #F1EFE8 !important;
    border: 1px solid #D3D1C7 !important;
}

.fw-drahtrechner .fw-dr-range-active {
    background: #E1F5EE !important;
    border: 1.5px solid #1D9E75 !important;
}

.fw-drahtrechner .fw-dr-range-consensus {
    background: #EAF3DE !important;
    border: 1px solid #97C459 !important;
}

.fw-drahtrechner .fw-dr-range-active.fw-dr-range-consensus {
    background: #E1F5EE !important;
    border: 1.5px solid #1D9E75 !important;
}

.fw-drahtrechner .fw-dr-range-value {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2C2C2A !important;
}

.fw-drahtrechner .fw-dr-range-active .fw-dr-range-value {
    color: #085041 !important;
}

.fw-drahtrechner .fw-dr-range-consensus .fw-dr-range-value {
    color: #173404 !important;
}

.fw-drahtrechner .fw-dr-range-sub {
    font-size: 11px !important;
    color: #5F5E5A !important;
}

.fw-drahtrechner .fw-dr-range-active .fw-dr-range-sub {
    color: #0F6E56 !important;
}

.fw-drahtrechner .fw-dr-range-consensus .fw-dr-range-sub {
    color: #3B6D11 !important;
}

.fw-drahtrechner .fw-dr-starbadge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: #EAF3DE !important;
    color: #27500A !important;
    margin-top: 4px !important;
}

.fw-drahtrechner .fw-dr-range-note {
    font-size: 12px !important;
    color: #5F5E5A !important;
    margin-bottom: 0.5rem !important;
}

/* Resonance Table */
.fw-drahtrechner .fw-dr-table {
    font-size: 13px !important;
    margin-bottom: 0.5rem !important;
}

.fw-drahtrechner .fw-dr-table-grid {
    display: grid !important;
    grid-template-columns: 52px 75px 1fr 1fr 1fr !important;
    gap: 3px 10px !important;
}

.fw-drahtrechner .fw-dr-table-head {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #5F5E5A !important;
    border-bottom: 0.5px solid #D3D1C7 !important;
    padding-bottom: 5px !important;
}

.fw-drahtrechner .fw-dr-table-cell {
    color: #2C2C2A !important;
}

.fw-drahtrechner .fw-dr-table-cell-hit {
    color: #E24B4A !important;
    font-weight: 500 !important;
}

/* Tuner Comparison */
.fw-drahtrechner .fw-dr-tunergrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 1rem !important;
}

.fw-drahtrechner .fw-dr-tunercell {
    background: #F1EFE8 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

.fw-drahtrechner .fw-dr-tunername {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #2C2C2A !important;
    margin: 0 0 4px !important;
}

.fw-drahtrechner .fw-dr-tunerinfo {
    font-size: 12px !important;
    color: #5F5E5A !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Info Boxes */
.fw-drahtrechner .fw-dr-box {
    border-radius: 8px !important;
    padding: 0.65rem 1rem !important;
    font-size: 13px !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.6 !important;
}

.fw-drahtrechner .fw-dr-warn {
    background: #FAEEDA !important;
    border-left: 3px solid #BA7517 !important;
    color: #633806 !important;
}

.fw-drahtrechner .fw-dr-info {
    background: #E6F1FB !important;
    border-left: 3px solid #185FA5 !important;
    color: #0C447C !important;
}

.fw-drahtrechner .fw-dr-ok {
    background: #E1F5EE !important;
    border-left: 3px solid #0F6E56 !important;
    color: #085041 !important;
}

/* Numbered rows */
.fw-drahtrechner .fw-dr-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin-bottom: 0.5rem !important;
}

.fw-drahtrechner .fw-dr-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #F1EFE8 !important;
    border: 1px solid #B4B2A9 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #5F5E5A !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
}

/* Status variants */
.fw-drahtrechner .fw-dr-status-ok {
    background: #E1F5EE !important;
    color: #085041 !important;
}

.fw-drahtrechner .fw-dr-status-consensus {
    background: #EAF3DE !important;
    color: #173404 !important;
}

.fw-drahtrechner .fw-dr-status-bad {
    background: #FCEBEB !important;
    color: #A32D2D !important;
}

/* Status text - keep readable */
.fw-drahtrechner strong {
    font-weight: 500 !important;
}

/* Mobile */
@media (max-width: 600px) {
    .fw-drahtrechner .fw-dr-results {
        grid-template-columns: 1fr !important;
    }
    .fw-drahtrechner .fw-dr-table-grid {
        grid-template-columns: 50px 60px 1fr 1fr 1fr !important;
        font-size: 11px !important;
    }
    .fw-drahtrechner .fw-dr-result-value {
        font-size: 22px !important;
    }
}