/* 
 * F4MAG Cabrillo Visualizer – styles de base
 * Ce CSS est volontairement simple et lisible.
 */

.f4mag-cabrillo-wrapper {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: 6px;
}

.f4mag-cabrillo-wrapper h3 {
    margin-top: 0;
    font-size: 1.2em;
}

.f4mag-cabrillo-form textarea {
    width: 100%;
    font-family: monospace;
    font-size: 13px;
    padding: 8px;
    box-sizing: border-box;
}

.f4mag-cabrillo-form button {
    padding: 8px 14px;
    border: none;
    border-radius: 4px;
    background: #2271b1; /* bleu WP */
    color: #fff;
    cursor: pointer;
}

.f4mag-cabrillo-form button:hover {
    background: #135e96;
}

.f4mag-cabrillo-svg {
    margin-top: 20px;
    overflow-x: auto;
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px;
}

/* SVG responsive */
.f4mag-cabrillo-svg svg {
    max-width: 100%;
    height: auto;
}

/* Texte des bandes */
.f4mag-cabrillo-svg text {
    font-family: Arial, sans-serif;
    fill: #333;
}

/* Lignes de bandes */
.f4mag-cabrillo-svg line {
    stroke: #ccc;
    stroke-width: 1;
}

/* Points QSO */
.f4mag-cabrillo-svg circle {
    fill: #d63638; /* rouge WP admin */
    opacity: 0.85;
}
.f4mag-header {
    margin:20px 0;
    padding:15px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fafafa;
}

.f4mag-header table {
    width:100%;
    font-size:14px;
}

.f4mag-header td {
    padding:4px 8px;
}

.f4mag-separator {
    margin:40px 0;
    border:none;
    border-top:1px solid #ddd;
}
.f4mag-wrapper {
    overflow: visible !important;
}
.f4mag-graph {
    overflow: visible !important;
}
.f4mag-tooltip {
    position: fixed;
    background: #222;
    color: #fff;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2147483647;
    font-family: Arial, sans-serif;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.f4mag-graph * {
    pointer-events: all;
}
/* ================= MODE EXPERT ================= */

.f4mag-expert-section {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9fbff;
}

.f4mag-expert-panel {
    margin-top: 20px;
    padding: 15px;
    border-left: 4px solid #2271b1;
    background: #ffffff;
}

.f4mag-expert-section button {
    padding: 8px 14px;
    background: #444;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.f4mag-expert-section button:hover {
    background: #000;
}
h4 {
    text-align: center;
}