/* FR Aqua Data - frontend styles (auto-loaded by WBCE on pages using the module) */

.fraquadata-app {
    --aqd-ok: #1f9d55;
    --aqd-high: #d64545;
    --aqd-low: #d9822b;
    --aqd-none: #8a94a6;
    --aqd-line: #2a7de1;
    --aqd-band: rgba(31, 157, 85, 0.12);
    --aqd-border: #d8dee9;
    --aqd-muted: #6b7280;
    font-size: 1rem;
    line-height: 1.4;
}

.fraquadata-title { margin: 0 0 .5rem; }
.fraquadata-subtitle { margin: 1.4rem 0 .6rem; font-size: 1.1rem; }
.fraquadata-notice { padding: 1rem; background: #f3f5f8; border-radius: 8px; color: var(--aqd-muted); }

/* Dashboard chips */
.fraquadata-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
}
.fraquadata-chip {
    border: 1px solid var(--aqd-border);
    border-left: 4px solid var(--aqd-none);
    border-radius: 8px;
    padding: .5rem .7rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.fraquadata-chip.is-ok   { border-left-color: var(--aqd-ok); }
.fraquadata-chip.is-high { border-left-color: var(--aqd-high); }
.fraquadata-chip.is-low  { border-left-color: var(--aqd-low); }
.fraquadata-chip-param { font-weight: 700; }
.fraquadata-chip-value { font-size: 1.3rem; font-weight: 700; }
.fraquadata-chip-range, .fraquadata-chip-age { font-size: .8rem; color: var(--aqd-muted); }
.fraquadata-chip-status { font-size: .8rem; font-weight: 600; }
.fraquadata-chip.is-ok   .fraquadata-chip-status { color: var(--aqd-ok); }
.fraquadata-chip.is-high .fraquadata-chip-status { color: var(--aqd-high); }
.fraquadata-chip.is-low  .fraquadata-chip-status { color: var(--aqd-low); }
.fraquadata-chip.is-none .fraquadata-chip-status { color: var(--aqd-none); }

/* Charts */
.fraquadata-charts-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.fraquadata-range { display: flex; gap: .25rem; }
.fraquadata-range-btn {
    font-size: .8rem; padding: .2rem .5rem; border: 1px solid var(--aqd-border);
    border-radius: 6px; text-decoration: none; color: var(--aqd-muted);
}
.fraquadata-range-btn.is-active { background: var(--aqd-line); color: #fff; border-color: var(--aqd-line); }
.fraquadata-charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.fraquadata-chart { margin: 0; border: 1px solid var(--aqd-border); border-radius: 8px; padding: .5rem .6rem; background: #fff; }
.fraquadata-chart figcaption { font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.fraquadata-chart-svg { width: 100%; height: auto; display: block; }
.fraquadata-chart-band { fill: var(--aqd-band); }
.fraquadata-chart-line { stroke: var(--aqd-line); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.fraquadata-chart-dot { stroke: #fff; stroke-width: 1; fill: var(--aqd-none); }
.fraquadata-chart-dot.is-ok   { fill: var(--aqd-ok); }
.fraquadata-chart-dot.is-high { fill: var(--aqd-high); }
.fraquadata-chart-dot.is-low  { fill: var(--aqd-low); }
.fraquadata-chart-axis { fill: var(--aqd-muted); font-size: 9px; }
.fraquadata-chart-empty { fill: var(--aqd-none); font-size: 14px; }

.fraquadata-export { margin: .8rem 0; }

/* Entry + calculator forms */
.fraquadata-entry-grid, .fraquadata-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
}
.fraquadata-entry-field { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.fraquadata-entry-field span { color: var(--aqd-muted); }
.fraquadata-entry-field input {
    padding: .35rem .5rem; border: 1px solid var(--aqd-border); border-radius: 6px; font: inherit; width: 100%;
    box-sizing: border-box;
}
.fraquadata-entry-note { grid-column: 1 / -1; }
.fraquadata-entry-help { font-size: .85rem; color: var(--aqd-muted); margin: .5rem 0; }
.fraquadata-btn {
    margin-top: .6rem; padding: .5rem 1rem; border: 0; border-radius: 6px;
    background: var(--aqd-line); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.fraquadata-btn:hover { filter: brightness(1.05); }

/* Calculator verdict output */
.fraquadata-calc output { font-size: .8rem; font-weight: 600; min-height: 1em; }
.fraquadata-calc output.is-ok   { color: var(--aqd-ok); }
.fraquadata-calc output.is-high { color: var(--aqd-high); }
.fraquadata-calc output.is-low  { color: var(--aqd-low); }
.fraquadata-calc-grid input.is-high { border-color: var(--aqd-high); }
.fraquadata-calc-grid input.is-low  { border-color: var(--aqd-low); }
.fraquadata-calc-grid input.is-ok   { border-color: var(--aqd-ok); }

/* History table */
.fraquadata-history-wrap { overflow-x: auto; }
.fraquadata-history { border-collapse: collapse; width: 100%; font-size: .85rem; }
.fraquadata-history th, .fraquadata-history td { border: 1px solid var(--aqd-border); padding: .25rem .4rem; text-align: right; white-space: nowrap; }
.fraquadata-history th:first-child, .fraquadata-history td:first-child { text-align: left; }
.fraquadata-history td.is-high { color: var(--aqd-high); font-weight: 700; }
.fraquadata-history td.is-low  { color: var(--aqd-low); font-weight: 700; }
.fraquadata-btn-del { border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--aqd-high); }

@media (prefers-color-scheme: dark) {
    .fraquadata-app { --aqd-border: #3a4151; --aqd-muted: #9aa4b2; }
    .fraquadata-chip, .fraquadata-chart { background: #1d2230; color: #e6e9ef; }
    .fraquadata-notice { background: #1d2230; }
    .fraquadata-range-btn { color: #9aa4b2; }
}