/**
 * DG Calculators — Base CSS
 *
 * Canonical class definitions shared across every calculator HTML file under
 * /public/calculators/. Loaded with <link rel="stylesheet" href="/calculator-base.css">.
 *
 * Companion files:
 *   /public/scratchpad.css   — scratchpad side-panel styles (parent + iframe)
 *   /public/showworking.css  — collapsible "Show working" panel
 *
 * Design tokens:
 *   --dg-dark-green  #517F7A   primary accent
 *   --dg-pale-green  #EDF2F1   panel background
 *   --dg-dark-blue   #2E2244   text accent / headings
 *
 * Adopted patterns from the newest calculators (vibration / split-multiplier).
 */

:root {
    --dg-dark-green: #517F7A;
    --dg-pale-green: #EDF2F1;
    --dg-dark-blue: #2E2244;
}

* { font-family: Georgia, 'Times New Roman', Times, serif; }
body { margin: 0; background: #fff; color: #333; }

/* Content wrapper used by every calculator. */
.dg-content {
    padding: 1.5rem 2rem 2rem 2rem;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Page header pattern.
 *
 *   <h2 class="dg-page-title">Calculator Title</h2>
 *   <p class="dg-page-subtitle">One-line description.</p>
 *
 * The "How to use this calculator" collapsible details block always sits
 * above the title.
 * ─────────────────────────────────────────────────────────────────────── */

.dg-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dg-dark-blue);
    margin: 0 0 0.5rem 0;
}

.dg-page-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0 0 1.5rem 0;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Yellow-bordered inputs — DG's signature input visual.
 *
 *   <input class="dg-input" ...>
 *   <select class="dg-select">...</select>
 *
 * Use `.dg-input.compact` inside dense tables (row-builder calculators).
 * ─────────────────────────────────────────────────────────────────────── */

.dg-input, .dg-select {
    background-color: #fffbeb;
    border: 2px solid #facc15;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.15s;
    font-size: 1rem;
    color: #2D3748;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.dg-input::placeholder { color: #a8923a; }
.dg-input:focus, .dg-select:focus { border-color: #ca8a04; }
.dg-input.compact, .dg-select.compact {
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
}

/* Hide spinners on number inputs (most users find them noisy). */
.dg-input[type="number"]::-webkit-outer-spin-button,
.dg-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-input[type="number"] { -moz-appearance: textfield; }

/* ───────────────────────────────────────────────────────────────────────────
 * Tab bar (calculators with multiple tabs).
 *
 *   <div class="dg-tab-bar" role="tablist">
 *     <button class="dg-tab-btn active" data-tab="tab-x" role="tab">…</button>
 *   </div>
 *   <div class="dg-tab-panel active" id="tab-x" role="tabpanel">…</div>
 * ─────────────────────────────────────────────────────────────────────── */

.dg-tab-bar {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.dg-tab-btn {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
    font-family: Georgia, 'Times New Roman', Times, serif;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -2px;
}
.dg-tab-btn:hover { color: #374151; }
.dg-tab-btn.active {
    color: var(--dg-dark-green);
    border-bottom-color: var(--dg-dark-green);
}
.dg-tab-panel { display: none; }
.dg-tab-panel.active { display: block; }

/* ───────────────────────────────────────────────────────────────────────────
 * Result tiles — the headline-number cards shown above results.
 *
 *   <div class="dg-result-tile">
 *     <div class="label">Cumulative dose</div>
 *     <div class="value">12.34</div>
 *     <div class="sub">f/ml·years</div>
 *   </div>
 * ─────────────────────────────────────────────────────────────────────── */

.dg-result-tile {
    background: var(--dg-pale-green);
    border: 1px solid var(--dg-dark-green);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}
.dg-result-tile .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    margin-bottom: 0.25rem;
}
.dg-result-tile .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dg-dark-blue);
    font-variant-numeric: tabular-nums;
}
.dg-result-tile .sub {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.25rem;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Verdict tiles — semantic status tiles (Below / Warn / Danger).
 * Used where the result is a categorical assessment, e.g. vibration A(8)
 * relative to EAV/ELV. Distinct from .dg-result-tile so the colour is
 * obviously intentional rather than ad-hoc.
 *
 *   <div class="dg-verdict-tile below">…</div>
 *   <div class="dg-verdict-tile warn">…</div>
 *   <div class="dg-verdict-tile danger">…</div>
 * ─────────────────────────────────────────────────────────────────────── */

.dg-verdict-tile {
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    border: 2px solid;
}
.dg-verdict-tile .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    opacity: 0.85;
}
.dg-verdict-tile .value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: Georgia, serif;
}
.dg-verdict-tile .sub {
    font-size: 0.85rem;
    margin-top: 0.4rem;
    line-height: 1.4;
}
.dg-verdict-tile.below   { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.dg-verdict-tile.warn    { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.dg-verdict-tile.danger  { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* ───────────────────────────────────────────────────────────────────────────
 * Calculate button — every calculator's primary action.
 *
 *   <button type="button" class="dg-calculate-btn">Calculate</button>
 *
 * Placed below the inputs and before the results panel.
 * ─────────────────────────────────────────────────────────────────────── */

.dg-calculate-btn {
    background: var(--dg-dark-green);
    color: #fff;
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', Times, serif;
    transition: background-color 0.12s;
}
.dg-calculate-btn:hover { background: #6B9E99; }
.dg-calculate-btn:disabled { background: #ccc; cursor: not-allowed; }

/* ───────────────────────────────────────────────────────────────────────────
 * Copy / Send-to-pad buttons.
 *
 *   <div class="dg-copy-row">
 *     <button class="dg-copy-btn" id="copyClipboardBtn">Copy to clipboard</button>
 *     <button class="dg-copy-btn" id="copyScratchpadBtn">Send to scratchpad</button>
 *     <span class="dg-copy-feedback" id="copyFeedback"></span>
 *   </div>
 *
 * Placed below the results panel (and after Show working).
 * ─────────────────────────────────────────────────────────────────────── */

.dg-copy-row {
    margin: 1rem 0 1.5rem 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.dg-copy-btn {
    background: var(--dg-dark-green);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.dg-copy-btn:hover { background: #6B9E99; }
.dg-copy-feedback {
    font-size: 0.85rem;
    color: var(--dg-dark-green);
    font-style: italic;
}
/* Lucide icon injected into copy / scratchpad buttons by scratchpad.js
   (iframe mode). Sized to the button text and inheriting its colour. */
.dg-btn-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.4em;
    flex-shrink: 0;
    display: inline-block;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Validation banners.
 *
 *   <div class="dg-error">Validation message</div>
 *   <div class="dg-warning">Soft warning</div>
 *   <div class="dg-ok">Confirmation</div>
 * ─────────────────────────────────────────────────────────────────────── */

.dg-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: 0.375rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}
.dg-warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    border-radius: 0.375rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}
.dg-ok {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #047857;
    border-radius: 0.375rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}

/* ───────────────────────────────────────────────────────────────────────────
 * Tables — used by row-builder calculators.
 *
 *   <table class="dg-table">
 *     <thead><tr><th>...</th></tr></thead>
 *     <tbody>...</tbody>
 *   </table>
 * ─────────────────────────────────────────────────────────────────────── */

.dg-table { width: 100%; border-collapse: collapse; }
.dg-table th {
    background: var(--dg-pale-green);
    text-align: left;
    padding: 0.45rem 0.6rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid #ddd;
    color: var(--dg-dark-blue);
}
.dg-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.92rem;
    vertical-align: middle;
}
.dg-table td.num, .dg-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Add row / Remove row buttons in row-builder tables. */
.dg-add-row-btn {
    background: var(--dg-dark-green);
    color: #fff;
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.dg-add-row-btn:hover { background: #6B9E99; }

.dg-row-remove-btn {
    background: transparent;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 0.25rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.dg-row-remove-btn:hover { background: #fef2f2; }