Lab Tools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Lab Tools Professional</title>

body.dark-mode {
    --bg: #000;
    --text: #fff;
    --box-bg: #1c1c1e;
    --input-bg: #2c2c2e;
    --inner-bg: #111;
    --label-color: #8e8e93;
    --secondary-text: #aeaeb2;
    --sun-color: #FFD700;
    --log-border: #333; 
    --title-color: #fff;
    --log-text-color: #fff;
}

/* BACKGROUND */
#starCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: none; background: #000; }
body.dark-mode #starCanvas { display: block; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-main);
    min-height: 100vh; transition: background 0.3s ease; overflow-x: hidden;
    display: flex; flex-direction: column; align-items: center;
}

#themeToggle {
    position: fixed; top: 30px; right: 40px; font-size: 2rem;
    color: var(--sun-color); cursor: pointer; z-index: 1000; transition: transform 0.2s;
}
#themeToggle:hover { transform: scale(1.1); }

/* SCREEN CONTAINER */
.screen { 
    display: none; width: 100%; max-width: 1400px; 
    padding: 60px 40px; flex-direction: column; align-items: center; 
}
.screen.active { display: flex; animation: fadeIn 0.4s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* HOME SCREEN GRID */
#screenHome h1 { font-size: 3.5rem; margin-bottom: 50px; font-weight: 800; letter-spacing: -1px; }
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.tool-box {
    background: var(--box-bg);
    padding: 60px 30px;
    border-radius: 24px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

body.dark-mode .tool-box {
    background: rgba(44, 44, 46, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
}

.tool-box:hover {
    transform: translateY(-10px) scale(1.02);
    background: var(--accent);
    color: white !important;
    box-shadow: 0 20px 40px rgba(0,122,255,0.3);
}

/* ─── SMOOTH LAYOUT TRANSITION ─────────────────────────────── */
.calc-container {
    display: flex;
    gap: 40px;
    width: 100%;
    align-items: flex-start;
    margin-top: 20px;
    /* Center inputs when no log is visible */
    padding-left: calc(50% - 250px);
    transition: padding-left 0.20s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: padding-left;
}
.calc-container.has-log {
    padding-left: 0;
}

.calc-inputs { flex: 0 0 500px; }

/* Log panel: grows in from max-width 0 → smooth reveal */
.calc-logs {
    flex: 1.5;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.20s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.15s ease 0.05s;
    will-change: max-width, opacity;
}
.calc-container.has-log .calc-logs {
    max-width: 900px;
    opacity: 1;
}
/* ─────────────────────────────────────────────────────────── */

h1 { font-size: 2.5rem; margin: 0 0 30px 0; display: flex; align-items: center; gap: 20px; }
.home-icon { font-size: 2.5rem; cursor: pointer; }

/* INPUT STYLING */
.input-group { 
    width: 100%; margin-bottom: 20px; position: relative; 
    background: var(--input-bg); border-radius: 16px; height: 70px;
}
input { 
    width: 100%; font-size: 1.4rem; padding: 28px 20px 8px 20px; 
    border: none; outline: none; background: transparent; color: var(--text); 
}
.input-group label {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    font-size: 1.2rem; color: var(--label-color); pointer-events: none; transition: all 0.2s;
}
input:focus + label, input:not(:placeholder-shown) + label {
    top: 5px; font-size: 0.9rem; transform: translateY(0);
}

/* RESULTS BOX */
.locked-merged-box { 
    background: var(--accent); color: white; padding: 25px; 
    border-radius: 20px; margin-bottom: 25px; box-shadow: 0 10px 25px rgba(0,122,255,0.2);
}
.locked-merged-box .result-label { color: rgba(255,255,255,0.8); font-size: 1rem; }
.locked-merged-box .display-val-large { font-size: 2.5rem; font-weight: 700; margin: 5px 0; }

/* Dark mode: result box uses same gray as input fields */
body.dark-mode .locked-merged-box {
    background: var(--input-bg);
    color: var(--text);
    box-shadow: none;
}
body.dark-mode .locked-merged-box .result-label { color: var(--label-color); }
body.dark-mode .locked-merged-box .display-val-large { color: var(--text); }
body.dark-mode #dupSuggestContainer { border-top: 1px solid rgba(255,255,255,0.1); }

/* BUTTONS */
.row { display: flex; gap: 15px; margin-bottom: 20px; }
.btn { 
    flex: 1; padding: 20px; border-radius: 16px; font-size: 1.2rem; font-weight: 600;
    text-align: center; cursor: pointer; background: var(--box-bg); color: var(--text);
    border: 1px solid var(--log-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

/* Light mode: rise-up + blue background + white text (matching main menu) */
.btn:hover {
    background: var(--accent);
    color: white;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 122, 255, 0.3);
}

/* Dark mode: rise-up with blue shadow matching main menu */
body.dark-mode .btn:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 122, 255, 0.3);
    background: var(--input-bg);
}

.save-btn { padding: 0 25px; background: var(--accent); color: white; border-radius: 16px; display: flex; align-items: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.save-btn:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 122, 255, 0.3); }

/* LOG TABLES */
.log-list { background: var(--box-bg); padding: 25px; border-radius: 24px; width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 1.1rem; }
th { text-align: left; padding: 15px; color: var(--label-color); border-bottom: 2px solid var(--log-border); }
td { padding: 15px; border-bottom: 1px solid var(--log-border); vertical-align: middle; }

/* ─── WATER QUALITY OFFICIAL REPORT STYLING ─────────────────── */
.wq-table-container {
    background: var(--box-bg);
    padding: 36px 44px;
    border-radius: 24px;
    width: 100%;
    max-width: 900px;
}

/* Compact input within WQ table */
.wq-table-container .input-group {
    height: 52px;
    margin-bottom: 0;
    width: 140px;
    min-width: 120px;
}
.wq-table-container input {
    padding: 22px 12px 5px 12px;
    font-size: 1.1rem;
}
.wq-table-container .input-group label {
    left: 12px;
    font-size: 0.9rem;
}

/* Table layout */
.wq-table-container table {
    table-layout: fixed;
    width: 100%;
}

/* Column widths — tight, balanced */
.wq-table-container colgroup col:nth-child(1) { width: 42%; }
.wq-table-container colgroup col:nth-child(2) { width: 26%; }
.wq-table-container colgroup col:nth-child(3) { width: 10%; }
.wq-table-container colgroup col:nth-child(4) { width: 22%; }

/* Header row */
.wq-table-container thead th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--label-color);
    padding: 0 15px 14px 15px;
    border-bottom: 2px solid var(--log-border);
}
.wq-table-container thead th:nth-child(3) { text-align: left; }

/* Body cells */
.wq-table-container tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--log-border);
    vertical-align: middle;
    text-align: left;
}

/* Parameter names — left-aligned, no wrap */
.wq-param-name {
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    text-align: left;
    color: var(--text);
}

/* Status cell */
.wq-table-container .status-cell {
    text-align: left;
}
.status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 0.95rem; font-weight: 700; color: transparent;
    background: transparent;
}
.status-icon.pass { background: #34c759; color: #fff; }
.status-icon.fail { background: #ff3b30; color: #fff; }

/* Specification cell */
.wq-spec-cell {
    font-size: 0.95rem;
    color: var(--secondary-text);
    font-variant-numeric: tabular-nums;
    text-align: left;
    white-space: nowrap;
}

/* Section sub-headers (Anions / Cations) */
.wq-section-header td {
    background: transparent !important;
    padding: 14px 15px 4px 15px !important;
    border-bottom: none !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--accent) !important;
    border-left: 3px solid var(--accent) !important;
}

/* Print value — hidden on screen, shown in print */
.print-text { display: none; }

/* ─────────────────────────────────────────────────────────── */

.back-btn { 
    margin-top: 40px; padding: 20px 40px; background: #333; color: white; 
    border-radius: 50px; cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
body.dark-mode .back-btn:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 122, 255, 0.3);
    background: #444;
}
body:not(.dark-mode) .back-btn:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 122, 255, 0.3);
    background: var(--accent);
    color: white;
}

/* ─── RESPONSIVE DESKTOP BREAKPOINTS ───────────────────────── */
@media (max-width: 1100px) {
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
    #screenHome h1 { font-size: 2.8rem; }
    .calc-container { padding-left: calc(50% - 220px); }
    .calc-inputs { flex: 0 0 440px; }
}
@media (max-width: 800px) {
    .screen { padding: 40px 20px; }
    .tool-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .tool-box { padding: 40px 20px; font-size: 1.4rem; }
    #screenHome h1 { font-size: 2.2rem; margin-bottom: 30px; }
    h1 { font-size: 2rem; }
    .calc-container { flex-direction: column; padding-left: 0; align-items: center; }
    .calc-inputs { flex: 0 0 auto; width: 100%; max-width: 500px; }
    .calc-logs { max-width: 500px !important; width: 100%; }
    .calc-container.has-log { padding-left: 0; }
    .wq-table-container { padding: 20px; }
    #themeToggle { top: 16px; right: 20px; font-size: 1.6rem; }
}

/* ─── REPORTS GENERATOR ─────────────────────────────────────── */
.rg-title-group { width: 100%; margin-bottom: 30px; }
.rg-test-row {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr 1fr 1fr 44px 44px 44px;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}
.rg-subtest-row {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr 1fr 1fr 44px 44px 44px;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}
.rg-test-row .input-group, .rg-subtest-row .input-group { margin-bottom: 0; }
.rg-status-cell { display: flex; align-items: center; justify-content: center; }
.rg-add-btn {
    width: 44px; height: 44px; border-radius: 12px; background: var(--accent);
    color: #fff; font-size: 1.6rem; font-weight: 300; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: none; outline: none; flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    line-height: 1;
}
.rg-add-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 20px rgba(0,122,255,0.35); }
.rg-subtest-btn {
    width: 44px; height: 44px; border-radius: 12px; background: #34c759;
    color: #fff; font-size: 1.3rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: none; outline: none; flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    line-height: 1;
}
.rg-subtest-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 20px rgba(52,199,89,0.35); }
.rg-remove-btn {
    width: 44px; height: 44px; border-radius: 12px; background: #ff3b30;
    color: #fff; font-size: 1.4rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: none; outline: none; flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    line-height: 1;
}
.rg-remove-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 20px rgba(255,59,48,0.35); }
.rg-sample-greyed input { color: var(--label-color) !important; font-style: italic; }

/* Report preview (shown when generating) */
.rg-report-section { display: none; width: 100%; max-width: 900px; background: var(--box-bg); border-radius: 24px; padding: 40px 50px; margin-top: 20px; }
.rg-report-title { font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 30px; color: var(--text); }
.rg-report-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rg-report-table th { text-align: left; padding: 12px 15px; color: var(--label-color); border-bottom: 2px solid var(--log-border); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rg-report-table td { padding: 12px 15px; border-bottom: 1px solid var(--log-border); vertical-align: middle; color: var(--text); }
.rg-report-table .spec-cell { color: var(--secondary-text); font-size: 0.95rem; }
.rg-report-table tr.rg-group-end td { border-bottom: 2px solid var(--log-border); }

/* ─────────────────────────────────────────────────────────── */
.ios-toggle { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; }
.ios-toggle input { opacity: 0; width: 0; height: 0; }
.ios-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #e5e5ea; border-radius: 31px;
    transition: background 0.2s;
}
.ios-slider:before {
    content: ""; position: absolute;
    width: 27px; height: 27px; left: 2px; top: 2px;
    background: white; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
.ios-toggle input:checked + .ios-slider { background: #34c759; }
.ios-toggle input:checked + .ios-slider:before { transform: translateX(20px); }
/* ─────────────────────────────────────────────────────────── */

@media print {
    body * { visibility: hidden; }
    #themeToggle, .back-btn, .btn, .home-icon, #starCanvas, #screenHome { display: none !important; }

/* ── Water Quality print ── */
    body.printing-wq #screenWQ, body.printing-wq #screenWQ * { visibility: visible; }
    body.printing-wq #screenWQ {
        display: block !important; position: absolute; left: 0; top: 0;
        width: 100%; padding: 0 !important; margin: 0 !important; text-align: left;
    }
    body.printing-wq #screenWQ .ios-toggle, body.printing-wq #screenWQ [style*="justify-content:flex-end"] { display: none !important; }
    body.printing-wq #screenWQ h1 { width: 100%; text-align: center; justify-content: center; margin-top: 10px; margin-bottom: 10px; font-size: 1.6rem; }
    body.printing-wq .wq-table-container .input-group { display: none !important; }
    body.printing-wq .print-text { display: block !important; font-size: 0.88rem !important; color: black !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; }
    body.printing-wq .wq-table-container { padding: 10px 20px !important; }
    body.printing-wq .wq-table-container tbody td { padding: 5px 10px !important; vertical-align: middle !important; height: auto !important; line-height: 1.2 !important; }
    body.printing-wq .wq-table-container thead th { padding: 0 10px 8px 10px !important; font-size: 0.72rem !important; }
    body.printing-wq .wq-param-name { font-size: 0.88rem !important; line-height: 1.2 !important; }
    body.printing-wq .wq-spec-cell { font-size: 0.85rem !important; line-height: 1.2 !important; }
    body.printing-wq .wq-section-header td { padding: 6px 10px 2px 10px !important; font-size: 0.68rem !important; }
    body.printing-wq table { margin: 0 auto; width: 95% !important; }
    body.printing-wq .wq-param-name { white-space: nowrap; }
    body.printing-wq .wq-section-header td { color: #007aff !important; border-left: 3px solid #007aff !important; }

/* ── Reports Generator print ── */
    body.printing-rg #rgReportSection, body.printing-rg #rgReportSection * { visibility: visible; }
    body.printing-rg #rgReportSection {
        display: block !important; position: absolute; left: 0; top: 0;
        width: 100%; padding: 30px 50px !important; margin: 0 !important;
        background: white !important; border-radius: 0 !important;
    }
    body.printing-rg #rgReportSection .row { display: none !important; }
    body.printing-rg .rg-report-title { font-size: 1.5rem !important; color: #000 !important; text-align: center !important; margin-bottom: 24px !important; }
    body.printing-rg .rg-report-table { width: 100% !important; border-collapse: collapse !important; }
    body.printing-rg .rg-report-table th { color: #555 !important; border-bottom: 2px solid #ccc !important; padding: 8px 12px !important; font-size: 0.78rem !important; }
    body.printing-rg .rg-report-table td { color: #000 !important; border-bottom: 1px solid #ddd !important; padding: 10px 12px !important; }
    body.printing-rg .rg-report-table tr.rg-group-end td { border-bottom: 2px solid #999 !important; }

/* Shared print rules */
    body { background: white !important; color: black !important; }
    input { color: black !important; background: transparent !important; border: none !important; -webkit-print-color-adjust: exact; }
    th, td { color: black !important; }
    .status-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .row { display: none !important; }
    .back-btn { display: none !important; }
}
</style>
</head>
<body class="light-mode">

<div id="screenHome" class="screen active">
    <h1>Lab Tools Professional</h1>
    <div class="tool-grid">
        <div class="tool-box" onclick="goTo('screenTDS')">TDS Calculator</div>
        <div class="tool-box" onclick="goTo('screenTSS')">TSS Calculator</div>
        <div class="tool-box" onclick="goTo('screenTol')">Tolerance Check</div>
        <div class="tool-box" onclick="goTo('screenDup')">Duplicate Check</div>
        <div class="tool-box" onclick="goTo('screenWC')">Water Cut %</div>
        <div class="tool-box" onclick="goTo('screenWQ')">Water Quality</div>
        <div class="tool-box" onclick="goTo('screenRG')">Reports Generator</div>
    </div>
</div>

<div id="screenTDS" class="screen">
    <h1><span class="home-icon" onclick="goHome()">⌂</span> TDS Calculator</h1>
    <div class="calc-container" id="containerTDS">
        <div class="calc-inputs">
            <div class="input-group"><input id="condInput" type="text" placeholder=" " oninput="calcTDS()"><label>Conductivity (µS/cm)</label></div>
            <div class="locked-merged-box" id="tdsFullResBox" style="display:none;">
                <span class="result-label">TDS (ppm)</span>
                <div class="display-val-large" id="tdsValDisp">—</div>
                <div id="tdsMetaDisp" style="font-size:0.9rem; opacity:0.8;">—</div>
            </div>
            <div class="row"><div class="btn" onclick="saveTDS()">Save Entry</div><div class="btn" onclick="resetTool('TDS')">Clear All</div></div>
        </div>
        <div class="calc-logs" id="logWrapperTDS">
            <div class="log-list"><table><thead><tr><th>S/N</th><th>Cond</th><th>TDS</th><th>Time</th></tr></thead><tbody id="tdsBody"></tbody></table></div>
        </div>
    </div>
    <div class="back-btn" onclick="goHome()">← Return to Dashboard</div>
</div>

<div id="screenTSS" class="screen">
    <h1><span class="home-icon" onclick="goHome()">⌂</span> TSS Calculator</h1>
    <div class="calc-container" id="containerTSS">
        <div class="calc-inputs">
            <div class="row"><div class="input-group"><input id="tssW1" type="text" placeholder=" " oninput="updateTSS()"><label>Initial Weight (g)</label></div></div>
            <div class="row"><div class="input-group"><input id="tssVol" type="text" placeholder=" " oninput="updateTSS()"><label>Volume (mL)</label></div></div>
            <div class="input-group"><input id="tssW2" type="text" placeholder=" " oninput="updateTSS()"><label>Final Weight (g)</label></div>
            <div class="locked-merged-box" id="tssFullResBox" style="display:none;"><span class="result-label">TSS (mg/L)</span><div class="display-val-large" id="tssValDisp">—</div></div>
            <div class="row"><div class="btn" onclick="saveTSS()">Save Result</div><div class="btn" onclick="resetTool('TSS')">Clear All</div></div>
        </div>
        <div class="calc-logs" id="logWrapperTSS">
            <div class="log-list"><table><thead><tr><th>S/N</th><th>Result</th><th>Time</th></tr></thead><tbody id="tssBody"></tbody></table></div>
        </div>
    </div>
    <div class="back-btn" onclick="goHome()">← Return to Dashboard</div>
</div>

<div id="screenTol" class="screen">
    <h1><span class="home-icon" onclick="goHome()">⌂</span> Tolerance</h1>
    <div class="calc-container" id="containerTol">
        <div class="calc-inputs">
            <div class="input-group"><input id="tolMean" type="text" placeholder=" " oninput="updateTol()"><label>Mean Value</label></div>
            <div class="input-group"><input id="tolErr" type="text" placeholder=" " oninput="updateTol()"><label>Error %</label></div>
            <div class="input-group"><input id="tolResult" type="text" placeholder=" " oninput="checkTolResult()"><label>Result (optional)</label></div>
            <div class="locked-merged-box" id="tolFullResBox" style="display:none;">
                <span class="result-label">Range</span>
                <div class="display-val-large" id="tolValDisp">—</div>
                <div id="tolStatusRow" style="display:none; margin-top:14px; padding-top:14px; border-top:1px solid rgba(128,128,128,0.2);">
                    <span class="result-label">Status</span>
                    <div style="margin-top:6px;"><div class="status-icon" id="tolResultIcon"></div></div>
                </div>
            </div>
            <div class="row"><div class="btn" onclick="saveTol()">Save</div><div class="btn" onclick="resetTool('Tol')">Clear All</div></div>
        </div>
        <div class="calc-logs" id="logWrapperTol">
            <div class="log-list"><table><thead><tr><th>S/N</th><th>±%</th><th>Range</th><th id="tolLogResultHeader" style="display:none;">Result</th><th id="tolLogStatusHeader" style="display:none;">Status</th><th id="tolLogAccuracyHeader" style="display:none;">Accuracy</th></tr></thead><tbody id="tolBody"></tbody></table></div>
        </div>
    </div>
    <div class="back-btn" onclick="goHome()">← Return to Dashboard</div>
</div>

<div id="screenDup" class="screen">
    <h1><span class="home-icon" onclick="goHome()">⌂</span> Duplicate Check</h1>
    <div class="calc-container" id="containerDup">
        <div class="calc-inputs">
            <div class="input-group"><input id="dupR1" type="text" placeholder=" " oninput="updateDup()"><label>Result 1</label></div>
            <div class="input-group"><input id="dupR2" type="text" placeholder=" " oninput="updateDup()"><label>Result 2</label></div>
            <div class="locked-merged-box" id="dupFullResBox" style="display:none;">
                <span class="result-label">Difference (%)</span><div class="display-val-large" id="dupDiffDisp">—</div>
                <div id="dupStatusIcon" class="status-icon" style="margin-top:10px;"></div>
                <div id="dupSuggestContainer" style="display:none; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.2);">
                    <span class="result-label">Suggested Value</span>
                    <div class="display-val-large" id="dupSuggestDisp">—</div>
                </div>
            </div>
            <div class="row"><div class="btn" onclick="saveDup()">Save Result</div><div class="btn" onclick="resetTool('Dup')">Clear All</div></div>
        </div>
        <div class="calc-logs" id="logWrapperDup">
            <div class="log-list"><table><thead><tr><th>S/N</th><th>R1</th><th>R2</th><th>Diff</th><th>Status</th></tr></thead><tbody id="dupBody"></tbody></table></div>
        </div>
    </div>
    <div class="back-btn" onclick="goHome()">← Return to Dashboard</div>
</div>

<div id="screenWC" class="screen">
    <h1><span class="home-icon" onclick="goHome()">⌂</span> Water Cut</h1>
    <div class="calc-container" id="containerWC">
        <div class="calc-inputs">
            <div class="input-group"><input id="wcTotal" type="text" placeholder=" " oninput="updateWC()"><label>Total Volume</label></div>
            <div class="input-group"><input id="wcWater" type="text" placeholder=" " oninput="updateWC()"><label>Water Volume</label></div>
            <div class="locked-merged-box" id="wcFullResBox" style="display:none;"><span class="result-label">Water Cut (%)</span><div class="display-val-large" id="wcValDisp">—</div></div>
            <div class="row"><div class="btn" onclick="saveWC()">Save</div><div class="btn" onclick="resetTool('WC')">Clear All</div></div>
        </div>
        <div class="calc-logs" id="logWrapperWC">
            <div class="log-list"><table><thead><tr><th>S/N</th><th>Total</th><th>Water</th><th>%</th></tr></thead><tbody id="wcBody"></tbody></table></div>
        </div>
    </div>
    <div class="back-btn" onclick="goHome()">← Return to Dashboard</div>
</div>

<div id="screenWQ" class="screen">
    <h1><span class="home-icon" onclick="goHome()">⌂</span> Drinking Water Quality</h1>
    <div class="wq-table-container">
        
        <div style="display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:20px;">
            <span style="font-size:0.95rem; font-weight:600; color:var(--label-color);">Advanced</span>
            <label class="ios-toggle">
                <input type="checkbox" id="advToggle" onchange="switchWQMode()">
                <span class="ios-slider"></span>
            </label>
        </div>
        <table id="wqTable">
            <colgroup><col><col><col><col></colgroup>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Result</th>
                    <th>Status</th>
                    <th>Specification</th>
                </tr>
            </thead>
            <tbody id="wqBody"></tbody>
        </table>
        <div class="row" style="margin-top:30px; justify-content:center;">
            <div class="btn" style="max-width:200px" onclick="document.body.classList.add('printing-wq'); window.print(); setTimeout(()=>document.body.classList.remove('printing-wq'),500)">Print PDF</div>
            <div class="btn" style="max-width:200px" onclick="resetTool('WQ')">Clear All</div>
        </div>
    </div>
    <div class="back-btn" onclick="goHome()">← Return to Dashboard</div>
</div>

<div id="screenRG" class="screen">
    <h1><span class="home-icon" onclick="goHome()">⌂</span> Reports Generator</h1>

<div class="rg-inputs-section" style="width:100%; max-width:900px;">
        <div class="rg-title-group">
            <div class="input-group"><input id="rgTitle" type="text" placeholder=" "><label>Report Title</label></div>
        </div>
        <div id="rgTestRows"></div>
        <div class="row" style="margin-top:10px;justify-content:center;gap:20px;">
            <div class="btn" style="max-width:220px;" onclick="generateRGReport()">Generate Report</div>
            <div class="btn" style="max-width:220px;" onclick="clearRG()">Clear All</div>
        </div>
    </div>

<div class="rg-report-section" id="rgReportSection">
        <div class="rg-report-title" id="rgReportTitle"></div>
        <table class="rg-report-table">
            <thead><tr><th style="width:20%;">Sample Name</th><th style="width:25%;">Test</th><th style="width:15%;">Result</th><th style="width:25%;">Specification</th><th style="width:10%;">Status</th></tr></thead>
            <tbody id="rgReportBody"></tbody>
        </table>
        <div class="row" style="margin-top:30px;justify-content:center;gap:20px;">
            <div class="btn" style="max-width:220px;" onclick="document.body.classList.add('printing-rg'); window.print(); setTimeout(()=>document.body.classList.remove('printing-rg'),500)">Print PDF</div>
            <div class="btn" style="max-width:220px;" onclick="hideRGReport()">← Edit</div>
        </div>
    </div>

<div class="back-btn" onclick="goHome()">← Return to Dashboard</div>
</div>

/* THEME: STARS */
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
let stars = [];
function initStars() {
    canvas.width = window.innerWidth; canvas.height = window.innerHeight;
    stars = []; for(let i=0; i<150; i++) stars.push({x:Math.random()*canvas.width, y:Math.random()*canvas.height, size:Math.random()*1.5, opacity:Math.random(), speed:0.01, dir:1});
}
function animateStars() {
    if(!document.body.classList.contains('dark-mode')) { requestAnimationFrame(animateStars); return; }
    ctx.clearRect(0,0,canvas.width,canvas.height); ctx.fillStyle="white";
    stars.forEach(s => { s.opacity += s.speed * s.dir; if(s.opacity<=0 || s.opacity>=1) s.dir*=-1; ctx.globalAlpha=s.opacity; ctx.beginPath(); ctx.arc(s.x,s.y,s.size,0,Math.PI*2); ctx.fill(); });
    requestAnimationFrame(animateStars);
}
initStars(); animateStars();

/* HELPERS */
function getTime() { return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }

/* Restrict all inputs to numbers, dot, comma only — except text fields in Reports Generator */
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('input[type="text"]').forEach(function(inp) {
        inp.addEventListener('input', function() {
            if(this.readOnly) return;
            // Allow free text in RG title and test name fields
            if(this.id === 'rgTitle' || this.id.startsWith('rgTest_') || this.id.startsWith('rgSample_')) return;
            // condInput allows commas (used as thousands separator)
            const allowComma = this.id === 'condInput';
            const pattern = allowComma ? /[^0-9.,]/g : /[^0-9.]/g;
            const pos = this.selectionStart;
            const cleaned = this.value.replace(pattern, '');
            if(cleaned !== this.value) {
                const diff = this.value.length - cleaned.length;
                this.value = cleaned;
                this.setSelectionRange(pos - diff, pos - diff);
            }
        });
    });
});

/* Smooth layout: only toggle class — CSS transitions handle the motion */
function updateLayout(key) {
    const body = document.getElementById(key.toLowerCase() + 'Body');
    const container = document.getElementById('container' + key);
    if (body && body.children.length > 0) {
        container.classList.add('has-log');
    } else {
        if (container) container.classList.remove('has-log');
    }
}

/* TDS */
const tdsRanges = [ {m:0, x:25, f:0.495}, {m:25, x:100, f:0.549}, {m:100, x:1000, f:0.604}, {m:1000, x:25000, f:0.638} ];

function formatWithCommas(num) {
    return num.toLocaleString('en-US');
}

function parseCondInput(raw) {
    // Treat comma as thousands separator: remove all commas, then parse
    return parseFloat(raw.replace(/,/g, ''));
}

function calcTDS() {
    const raw = document.getElementById('condInput').value;
    let v = parseCondInput(raw);
    if(isNaN(v)) { document.getElementById('tdsFullResBox').style.display='none'; return; }

// Format the input display with commas if >= 10000
    const inputEl = document.getElementById('condInput');
    const cursorPos = inputEl.selectionStart;
    const rawDigits = raw.replace(/,/g, '');
    const numericVal = parseFloat(rawDigits);
    if (!isNaN(numericVal) && numericVal >= 10000) {
        const formatted = formatWithCommas(numericVal);
        if (formatted !== raw) {
            inputEl.value = formatted;
            // Restore cursor accounting for added commas
            const added = formatted.length - raw.length;
            inputEl.setSelectionRange(cursorPos + added, cursorPos + added);
        }
    }

/* TSS */
function updateTSS() {
    let w1 = parseFloat(document.getElementById('tssW1').value), w2 = parseFloat(document.getElementById('tssW2').value), v = parseFloat(document.getElementById('tssVol').value);
    if(!isNaN(w1) && !isNaN(w2) && !isNaN(v) && v!==0) {
        document.getElementById('tssValDisp').textContent = (((w2-w1)*1000000)/v).toFixed(2);
        document.getElementById('tssFullResBox').style.display='block';
    }
}
function saveTSS() {
    const val = document.getElementById('tssValDisp').textContent;
    if(document.getElementById('tssFullResBox').style.display==='none') return;
    const body = document.getElementById('tssBody');
    body.innerHTML += `<tr><td>${body.children.length+1}</td><td>${val}</td><td>${getTime()}</td></tr>`;
    updateLayout('TSS');
}

/* TOLERANCE */
function updateTol() {
    let m = parseFloat(document.getElementById('tolMean').value), e = parseFloat(document.getElementById('tolErr').value);
    if(!isNaN(m) && !isNaN(e)) {
        let d = m*(e/100);
        document.getElementById('tolValDisp').textContent = (m-d).toFixed(2) + " - " + (m+d).toFixed(2);
        document.getElementById('tolFullResBox').style.display='block';
    } else {
        document.getElementById('tolFullResBox').style.display='none';
    }
    checkTolResult();
}
function checkTolResult() {
    const icon = document.getElementById('tolResultIcon');
    const statusRow = document.getElementById('tolStatusRow');
    const resEl = document.getElementById('tolResult');
    const resVal = parseFloat(resEl.value);
    const rangeVisible = document.getElementById('tolFullResBox').style.display !== 'none';
    if (!rangeVisible || resEl.value === '' || isNaN(resVal)) {
        icon.className = 'status-icon'; icon.textContent = '';
        statusRow.style.display = 'none'; return;
    }
    const parts = document.getElementById('tolValDisp').textContent.split(' - ');
    const min = parseFloat(parts[0]), max = parseFloat(parts[1]);
    const isPass = resVal >= min && resVal <= max;
    icon.className = isPass ? 'status-icon pass' : 'status-icon fail';
    icon.textContent = isPass ? '✓' : '✖';
    statusRow.style.display = 'block';
}
function saveTol() {
    const val = document.getElementById('tolValDisp').textContent;
    const err = document.getElementById('tolErr').value;
    if(!err || document.getElementById('tolFullResBox').style.display === 'none') return;
    const body = document.getElementById('tolBody');
    const resEl = document.getElementById('tolResult');
    const meanVal = parseFloat(document.getElementById('tolMean').value);
    const resVal = parseFloat(resEl.value);
    const hasResult = resEl.value !== '' && !isNaN(resVal);
    const iconEl = document.getElementById('tolResultIcon');
    const isFail = iconEl.classList.contains('fail');
    if(hasResult) {
        document.getElementById('tolLogResultHeader').style.display = '';
        document.getElementById('tolLogStatusHeader').style.display = '';
        document.getElementById('tolLogAccuracyHeader').style.display = '';
    }
    const resultCell = hasResult ? `<td>${resEl.value}</td>` : '<td>—</td>';
    const statusCell = hasResult
        ? `<td><span class="status-icon ${isFail ? 'fail' : 'pass'}" style="display:inline-flex;">${isFail ? '✖' : '✓'}</span></td>`
        : '<td>—</td>';
    const accuracy = hasResult && meanVal !== 0
        ? (100 - (Math.abs(resVal - meanVal) / meanVal * 100)).toFixed(2) + '%'
        : '—';
    const accuracyCell = hasResult ? `<td>${accuracy}</td>` : '<td>—</td>';
    body.innerHTML += `<tr><td>${body.children.length+1}</td><td>±${err}%</td><td>${val}</td>${resultCell}${statusCell}${accuracyCell}</tr>`;
    updateLayout('Tol');
}

/* DUPLICATE */
function updateDup() {
    let r1 = parseFloat(document.getElementById('dupR1').value), r2 = parseFloat(document.getElementById('dupR2').value);
    if(!isNaN(r1) && !isNaN(r2)) {
        let diff = Math.abs(((r2-r1)/r1)*100);
        document.getElementById('dupDiffDisp').textContent = diff.toFixed(2) + "%";
        const isFail = diff > 10;
        const statusIcon = document.getElementById('dupStatusIcon');
        statusIcon.className = isFail ? 'status-icon fail' : 'status-icon pass';
        statusIcon.textContent = isFail ? '✖' : '✓';
        const suggestContainer = document.getElementById('dupSuggestContainer');
        if(isFail) {
            document.getElementById('dupSuggestDisp').textContent = (r1 * 1.05).toFixed(2);
            suggestContainer.style.display = 'block';
        } else {
            suggestContainer.style.display = 'none';
        }
        document.getElementById('dupFullResBox').style.display='block';
    } else {
        document.getElementById('dupFullResBox').style.display='none';
    }
}
function saveDup() {
    if(document.getElementById('dupFullResBox').style.display==='none') return;
    const body = document.getElementById('dupBody');
    const iconEl = document.getElementById('dupStatusIcon');
    const isFail = iconEl.classList.contains('fail');
    const circleHtml = `<span class="status-icon ${isFail ? 'fail' : 'pass'}" style="display:inline-flex;">${isFail ? '✖' : '✓'}</span>`;
    body.innerHTML += `<tr><td>${body.children.length+1}</td><td>${document.getElementById('dupR1').value}</td><td>${document.getElementById('dupR2').value}</td><td>${document.getElementById('dupDiffDisp').textContent}</td><td>${circleHtml}</td></tr>`;
    updateLayout('Dup');
}

/* WATER CUT */
function updateWC() {
    let t = parseFloat(document.getElementById('wcTotal').value), w = parseFloat(document.getElementById('wcWater').value);
    if(!isNaN(t) && !isNaN(w)) {
        document.getElementById('wcValDisp').textContent = ((w/t)*100).toFixed(2) + "%";
        document.getElementById('wcFullResBox').style.display='block';
    }
}
function saveWC() {
    if(document.getElementById('wcFullResBox').style.display==='none') return;
    const body = document.getElementById('wcBody');
    body.innerHTML += `<tr><td>${body.children.length+1}</td><td>${document.getElementById('wcTotal').value}</td><td>${document.getElementById('wcWater').value}</td><td>${document.getElementById('wcValDisp').textContent}</td></tr>`;
    updateLayout('WC');
}

/* WATER QUALITY — dynamic parameter sets */
const WQ_PARAMS = {
    normal: [
        { name: 'pH', min: 7.0, max: 8.0, spec: '7.0 – 8.0', id: 'wqPH' },
        { name: 'Conductivity (µS/cm)', min: 0, max: 1500, spec: '0 – 1500', id: 'wqCond', special: 'cond' },
        { name: 'TDS (mg/L)', min: 100, max: 200, spec: '100 – 200 mg/L', id: 'wqTDS', readonly: true, label: 'Auto' },
        { section: 'Anions' },
        { name: 'Bicarbonate (HCO₃⁻)', min: 5, max: 50, spec: '5 – 50 mg/L' },
        { name: 'Chloride (Cl⁻)', min: 15, max: 40, spec: '15 – 40 mg/L' },
        { section: 'Cations' },
        { name: 'Calcium (Ca²⁺)', min: 5, max: 20, spec: '5 – 20 mg/L', id: 'wqCa', special: 'hardness' },
        { name: 'Magnesium (Mg²⁺)', min: 1, max: 10, spec: '1 – 10 mg/L', id: 'wqMg', special: 'hardness' },
        { name: 'Total Hardness', min: 30, max: 100, spec: '30 – 100 mg/L', id: 'wqHard', readonly: true, label: 'Auto' }
    ],
    advanced: [
        { name: 'pH', min: 6.8, max: 7.5, spec: '6.8 – 7.5', id: 'wqPH' },
        { name: 'Conductivity (µS/cm)', min: 180, max: 300, spec: '180 – 300', id: 'wqCond', special: 'cond' },
        { name: 'TDS (ppm)', min: 120, max: 150, spec: '120 – 150 ppm', id: 'wqTDS', readonly: true, label: 'Auto' },
        { section: 'Cations' },
        { name: 'Calcium (Ca²⁺)', min: 20, max: 35, spec: '20 – 35 ppm', id: 'wqCa', special: 'hardness' },
        { name: 'Magnesium (Mg²⁺)', min: 5, max: 10, spec: '5 – 10 ppm', id: 'wqMg', special: 'hardness' },
        { name: 'Sodium (Na⁺)', min: 10, max: 20, spec: '10 – 20 ppm' },
        { name: 'Potassium (K⁺)', min: 1, max: 3, spec: '1 – 3 ppm' },
        { section: 'Anions' },
        { name: 'Chloride (Cl⁻)', min: 15, max: 30, spec: '15 – 30 ppm' },
        { name: 'Bicarbonate (HCO₃⁻)', min: 70, max: 110, spec: '70 – 110 ppm' },
        { name: 'Sulphate (SO₄²⁻)', min: 10, max: 25, spec: '10 – 25 ppm' },
        { name: 'Fluoride (F⁻)', min: 0.5, max: 1.0, spec: '0.5 – 1.0 ppm' },
        { section: 'Hardness' },
        { name: 'Total Hardness', min: 70, max: 120, spec: '70 – 120 ppm', id: 'wqHard', readonly: true, label: 'Auto' }
    ]
};

let wqMode = 'normal';

function switchWQMode() {
    wqMode = document.getElementById('advToggle').checked ? 'advanced' : 'normal';
    buildWQTable(wqMode);
}

// initialise on load
buildWQTable('normal');

/* ─── REPORTS GENERATOR ─────────────────────────────────── */
let rgRowCount = 0;

function checkRGStatus(id) {
    const icon = document.getElementById('rgIcon_' + id);
    const result = parseFloat(document.getElementById('rgResult_' + id).value);
    const min = parseFloat(document.getElementById('rgMin_' + id).value);
    const max = parseFloat(document.getElementById('rgMax_' + id).value);
    if(isNaN(result) || isNaN(min) || isNaN(max)) { icon.className = 'status-icon'; icon.textContent = ''; return; }
    const isPass = result >= min && result <= max;
    icon.className = isPass ? 'status-icon pass' : 'status-icon fail';
    icon.textContent = isPass ? '✓' : '✖';
}

function generateRGReport() {
    const title = document.getElementById('rgTitle').value.trim();
    const allRows = document.querySelectorAll('#rgTestRows .rg-test-row, #rgTestRows .rg-subtest-row');
    if(!title && allRows.length === 0) return;
    document.getElementById('rgReportTitle').textContent = title || 'Report';
    const tbody = document.getElementById('rgReportBody');
    tbody.innerHTML = '';

// Collect valid rows first
    const validRows = [];
    allRows.forEach((row) => {
        const rid = row.id.replace('rgRow_', '');
        const isSubtest = row.classList.contains('rg-subtest-row');
        const groupId = row.dataset.group;
        const testEl = document.getElementById('rgTest_' + rid);
        const resultEl = document.getElementById('rgResult_' + rid);
        const minEl = document.getElementById('rgMin_' + rid);
        const maxEl = document.getElementById('rgMax_' + rid);
        if(!testEl || !resultEl) return;
        const test = testEl.value.trim();
        const result = resultEl.value.trim();
        const min = minEl ? minEl.value.trim() : '';
        const max = maxEl ? maxEl.value.trim() : '';
        if(!test && !result && !min && !max) return;
        const sampleEl = !isSubtest ? document.getElementById('rgSample_' + rid) : null;
        validRows.push({ rid, isSubtest, groupId, test, result, min, max, sampleEl });
    });

validRows.forEach((r, i) => {
        const isNewGroup = !r.isSubtest;
        const isLastInGroup = (i === validRows.length - 1) || !validRows[i+1].isSubtest;
        const sampleName = (isNewGroup && r.sampleEl) ? (r.sampleEl.value.trim() || '—') : '';
        const rNum = parseFloat(r.result), minNum = parseFloat(r.min), maxNum = parseFloat(r.max);
        const hasRange = !isNaN(minNum) && !isNaN(maxNum);
        const spec = hasRange ? `${r.min} – ${r.max}` : '—';
        let statusHtml = '—';
        if(!isNaN(rNum) && hasRange) {
            const isPass = rNum >= minNum && rNum <= maxNum;
            statusHtml = `<span class="status-icon ${isPass?'pass':'fail'}" style="display:inline-flex;">${isPass?'✓':'✖'}</span>`;
        }
        // Add thick separator border on last row of each group (except the very last row)
        const trClass = (isLastInGroup && i < validRows.length - 1) ? ' class="rg-group-end"' : '';
        tbody.innerHTML += `<tr${trClass}><td>${sampleName}</td><td>${r.test||'—'}</td><td>${r.result||'—'}</td><td class="spec-cell">${spec}</td><td>${statusHtml}</td></tr>`;
    });

document.querySelector('.rg-inputs-section').style.display = 'none';
    document.querySelector('.back-btn').style.display = 'none';
    document.getElementById('rgReportSection').style.display = 'block';
}

function hideRGReport() {
    document.getElementById('rgReportSection').style.display = 'none';
    document.querySelector('#screenRG .rg-inputs-section').style.display = 'block';
    document.querySelector('#screenRG .back-btn').style.display = '';
}

function clearRG() {
    document.getElementById('rgTitle').value = '';
    document.getElementById('rgTestRows').innerHTML = '';
    rgRowCount = 0;
    document.getElementById('rgReportSection').style.display = 'none';
    document.querySelector('#screenRG .rg-inputs-section').style.display = 'block';
    document.querySelector('#screenRG .back-btn').style.display = '';
    addRGRow();
}

// Init first row on load
addRGRow();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title>Lab Tools Unified</title>

body.dark-mode {
    --bg: #000;
    --text: #fff;
    --box-bg: #333;
    --input-bg: #222;
    --inner-bg: #111;
    --label-color: #777;
    --secondary-text: #ccc;
    --sun-color: #FFD700;
    --log-border: #333; 
    --title-color: #fff;
    --log-text-color: #fff;
}

/* LIVE WALLPAPER CANVAS */
#starCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    display: none; 
    background: #000;
}

body.dark-mode #starCanvas {
    display: block;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-main);
    display: flex; flex-direction: column; align-items: center; min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease; position: relative;
}

#themeToggle {
    position: absolute; top: 55px; right: 20px; font-size: 1.5rem;
    color: var(--sun-color); cursor: pointer; z-index: 1000; user-select: none; line-height: 1;
}

.screen { display: none; width: 100%; flex-direction: column; align-items: center; padding: 0 16px 104px; }
.screen.active { display: flex; }

h1 { font-size: 1.8rem; display: flex; align-items: center; gap: 10px; color: var(--title-color); }
#screenHome h1 { margin: 72px 0 8px; text-align: center; }
#screenTDS h1, #screenTSS h1, #screenTol h1, #screenDup h1, #screenWC h1, #screenRG h1 { margin: 63px 0 14px; }
#screenWQ h1 { margin: 63px 0 20px; }

.home-icon { font-size: 2.35rem; color: var(--text); cursor: pointer; user-select: none; display: inline-block; line-height: 1; }

/* MAIN PAGE TOOL BOXES - Updated to 20% transparency (0.8 opacity) in Dark Mode */
.tool-box {
    width: 100%; max-width: 360px; 
    background: rgba(51, 51, 51, 0.8); /* 20% Transparency for a more solid look while stars show */
    color: #fff; padding: 18px 16px;
    margin-top: 16px; border-radius: 14px; text-align: center; font-size: 1.3rem; 
    cursor: pointer; user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
}
body.light-mode .tool-box { 
    background: var(--box-bg); 
    color: var(--text); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
    border: 1px solid rgba(0,0,0,0.05);
}

/* SUB-PAGE ELEMENTS - Kept as Solid per Instructions */
.input-group, .locked-merged-box { width: 100%; max-width: 360px; margin-bottom: 12px; position: relative; background: var(--input-bg); border-radius: 12px; }
.locked-merged-box { display: none; background: var(--inner-bg); border: 1px solid var(--input-bg); padding: 8px 12px; }

.input-group label {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 1.15rem; color: var(--label-color); pointer-events: none; transition: all 0.2s ease;
}

.result-label { font-size: 0.75rem; color: var(--secondary-text); display: block; margin-bottom: 0px; }
.display-val-large { font-size: 1.15rem; color: var(--text); margin-bottom: 2px; }
.display-val-small { font-size: 0.85rem; color: var(--text); }

.input-group input:focus + label, .input-group input:not(:placeholder-shown) + label {
    top: 8px; font-size: 0.75rem; color: var(--secondary-text); transform: translateY(0);
}

input { width: 100%; font-size: 1.15rem; padding: 22px 12px 6px 12px; border-radius: 12px; border: none; outline: none; background: transparent; color: var(--text); }

#screenWQ .input-group input:focus + label, #screenWQ .input-group input:not(:placeholder-shown) + label { opacity: 0; visibility: hidden; }

.print-text { display: none; text-align: left; width: 100%; }

.status-icon { 
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; 
    justify-content: center; font-weight: 700; font-size: 14px; color: transparent;
    flex-shrink: 0; background: transparent;
}
.status-icon.pass { background-color: var(--pass-green); color: #fff; }
.status-icon.fail { background-color: var(--fail-red); color: #fff; }

/* WQ label "Result" / "Auto" — 50% smaller */
#screenWQ .input-group label { font-size: 0.58rem; }

.row { display: flex; gap: 10px; align-items: center; width: 100%; max-width: 360px; }
.btn, .save-btn, .back-btn { padding: 10px 14px; background: #333; color: #fff; border-radius: 10px; font-size: 1rem; text-align: center; cursor: pointer; user-select: none; }
body.light-mode .btn, body.light-mode .save-btn, body.light-mode .back-btn { background: var(--box-bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn { flex: 1; }
.save-btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; align-self: stretch; }
.back-btn { width: 100%; max-width: 360px; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.flash { animation: flashAnim 600ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes flashAnim { 0% { background-color: #888; color: #000; } 100% { background-color: inherit; color: inherit; } }
.flash-icon { animation: flashIconAnim 600ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes flashIconAnim { 0% { color: #000; background-color: #888; border-radius: 8px; } 100% { color: inherit; background-color: transparent; } }

.log-list { display: none; margin-top: 16px; width: 100%; max-width: 360px; background: var(--inner-bg); padding: 8px; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-weight: bold; }
th { text-align: left; color: var(--log-text-color); border-bottom: 1.5px solid var(--log-border); padding: 6px; }
td { padding: 6px; color: var(--log-text-color); }
.box-separator { border-top: 1px solid var(--log-border); margin: 4px 0; }
.log-pass { color: var(--pass-green); font-weight: bold; }
.log-fail { color: var(--fail-red); font-weight: bold; }

.wq-table { width: 100%; max-width: 360px; border-collapse: collapse; margin-top: 10px; }
.wq-table td { padding: 4px 4px; border-bottom: 1px solid var(--log-border); vertical-align: middle; }
.wq-header-cell { font-size: 0.9rem; font-weight: bold; color: var(--label-color); padding-bottom: 12px !important; }
.wq-spec { font-size: 0.75rem; color: var(--label-color); white-space: nowrap; }
.wq-name { font-weight: 500; font-size: 0.85rem; padding-right: 5px; }
.wq-param-name { font-weight: 500; font-size: 0.78rem; color: var(--text); line-height: 1.2; }
.wq-spec-cell { font-size: 0.72rem; color: var(--label-color); white-space: nowrap; }

/* Uniform row height for WQ data rows */
#screenWQ .wq-table tbody tr { height: 48px; }
#screenWQ .wq-table tbody td { height: 48px; vertical-align: middle; padding: 0 4px; }
#screenWQ .input-group { height: 40px; margin-bottom: 0; display: flex; align-items: center; }
#screenWQ .input-group input { padding: 0 10px; height: 100%; font-size: 0.95rem; }
.wq-section-header td { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #007aff; padding-top: 12px; padding-bottom: 2px; border-left: 3px solid #007aff; padding-left: 6px; border-bottom: none !important; }
.wq-thead-th { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-color); padding: 0 4px 10px 4px; border-bottom: 2px solid var(--log-border); text-align: left; }
.print-text { display: none; }

/* iOS toggle */
.ios-toggle { position: relative; display: inline-block; width: 47px; height: 28px; flex-shrink: 0; }
.ios-toggle input { opacity: 0; width: 0; height: 0; }
.ios-slider { position: absolute; cursor: pointer; inset: 0; background: #e5e5ea; border-radius: 28px; transition: background 0.2s; }
.ios-slider:before { content: ""; position: absolute; width: 24px; height: 24px; left: 2px; top: 2px; background: white; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.25); transition: transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94); }
.ios-toggle input:checked + .ios-slider { background: #34c759; }
.ios-toggle input:checked + .ios-slider:before { transform: translateX(19px); }

/* ─── REPORTS GENERATOR MOBILE ───────────────────────── */
.rg-test-card {
    width: 100%; max-width: 360px;
    background: var(--input-bg); border-radius: 14px;
    padding: 14px; margin-bottom: 8px;
}
.rg-subtest-card {
    width: 100%; max-width: 360px;
    background: var(--input-bg); border-radius: 14px;
    padding: 14px; margin-bottom: 8px;
    border-left: 3px solid var(--accent);
    box-sizing: border-box;
}
.rg-test-card .input-group, .rg-subtest-card .input-group { margin-bottom: 10px; }
.rg-test-card .input-group:last-of-type, .rg-subtest-card .input-group:last-of-type { margin-bottom: 0; }
.rg-card-bottom { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rg-card-bottom .input-group { flex: 1; margin-bottom: 0; }
.rg-add-btn-m {
    width: 40px; height: 40px; border-radius: 10px; background: var(--accent);
    color: #fff; font-size: 1.5rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: none; outline: none; flex-shrink: 0; line-height: 1;

}
.rg-remove-btn-m {
    width: 40px; height: 40px; border-radius: 10px; background: #ff3b30;
    color: #fff; font-size: 1.4rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: none; outline: none; flex-shrink: 0; line-height: 1;
}
.rg-subtest-btn-m {
    width: 40px; height: 40px; border-radius: 10px; background: #34c759;
    color: #fff; font-size: 1.4rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: none; outline: none; flex-shrink: 0; line-height: 1;
}
.rg-report-preview {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    background: var(--box-bg);
    border-radius: 16px;
    padding: 24px 20px;
    box-sizing: border-box;
}
.rg-report-preview-title {
    font-size: 1.3rem; font-weight: 700; text-align: center;
    margin-bottom: 20px; color: var(--text);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--log-border);
}
.rg-report-tbl {
    width: 100%; border-collapse: collapse; font-size: 0.88rem;
    table-layout: fixed;
}
.rg-report-tbl colgroup col:nth-child(1) { width: 22%; }
.rg-report-tbl colgroup col:nth-child(2) { width: 28%; }
.rg-report-tbl colgroup col:nth-child(3) { width: 14%; }
.rg-report-tbl colgroup col:nth-child(4) { width: 24%; }
.rg-report-tbl colgroup col:nth-child(5) { width: 12%; }
.rg-report-tbl th {
    text-align: left; padding: 8px 6px;
    color: var(--label-color); border-bottom: 2px solid var(--log-border);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.rg-report-tbl td {
    padding: 10px 6px; border-bottom: 1px solid var(--log-border);
    vertical-align: middle; color: var(--text);
    word-break: break-word; line-height: 1.3;
}
.rg-report-tbl tr.rg-group-end td { border-bottom: 2px solid var(--log-border); }

@media print {
    /* Fallback for desktop-style printing if triggered directly */
    body { background: #fff !important; }
    .status-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .status-icon.pass { background-color: #34c759 !important; color: #fff !important; }
    .status-icon.fail { background-color: #ff3b30 !important; color: #fff !important; }
}

</style>
</head>
<body class="light-mode">

<div id="screenHome" class="screen active">
    <h1>Lab Tools</h1>
    <div style="display:flex; flex-direction:column; align-items:center; width:100%; padding-bottom:60px;">
    <div class="tool-box" onclick="goTo('screenTDS', this)">TDS</div>
    <div class="tool-box" onclick="goTo('screenTSS', this)">TSS</div>
    <div class="tool-box" onclick="goTo('screenTol', this)">Tolerance</div>
    <div class="tool-box" onclick="goTo('screenDup', this)">Duplicate Check</div>
    <div class="tool-box" onclick="goTo('screenWC', this)">Water Cut</div>
    <div class="tool-box" onclick="goTo('screenWQ', this)">Drinking Water Quality</div>
    <div class="tool-box" onclick="goTo('screenRG', this)" style="margin-bottom:0;">Reports Generator</div>
    </div>
</div>

<div id="screenTDS" class="screen">
    <h1><span class="home-icon" onclick="goHome(this)">⌂</span> TDS Calculator</h1>
    <div class="input-group"><input id="condInput" type="text" inputmode="decimal" placeholder=" " ><label>Conductivity (µS/cm)</label></div>
    <div class="locked-merged-box" id="tdsFullResBox">
        <span class="result-label">TDS (ppm)</span><div class="display-val-large" id="tdsValDisp">—</div>
        <div class="box-separator" id="tdsSep"></div>
        <span class="result-label" id="tdsMetaLabel">Details</span>
        <div id="tdsMetaDisp" class="display-val-small">—</div>
    </div>
    <div class="row"><div class="btn" id="saveTDS">Save</div><div class="btn" id="clearTDS">Clear All</div></div>
    <div id="tdsLog" class="log-list"><table><thead><tr><th>S/N</th><th>Cond</th><th>TDS</th><th>Time</th></tr></thead><tbody id="tdsBody"></tbody></table></div>
    <div class="back-btn" onclick="goHome(this)">← Back to Menu</div>
</div>

<div id="screenTSS" class="screen">
    <h1><span class="home-icon" onclick="goHome(this)">⌂</span> TSS Calculator</h1>
    <div class="row" style="margin-bottom:12px;"><div class="input-group" style="margin:0;"><input id="tssW1" type="text" inputmode="decimal" placeholder=" "><label>Initial Weight (g)</label></div><div class="save-btn" id="btnSaveW1">Save</div></div>
    <div class="row" style="margin-bottom:12px;"><div class="input-group" style="margin:0;"><input id="tssVol" type="text" inputmode="decimal" placeholder=" "><label>Sample Volume (mL)</label></div><div class="save-btn" id="btnSaveVol">Save</div></div>
    <div class="input-group"><input id="tssW2" type="text" inputmode="decimal" placeholder=" "><label>Final Weight (g)</label></div>
    <div class="locked-merged-box" id="tssFullResBox"><span class="result-label">TSS (mg/L)</span><div class="display-val-large" id="tssValDisp">—</div></div>
    <div class="row"><div class="btn" id="saveAllTSS">Save Result</div><div class="btn" id="clearTSS">Clear All</div></div>
    <div id="tssLog" class="log-list"><table><thead><tr><th>S/N</th><th>Details</th><th>Value</th><th>Time</th></tr></thead><tbody id="tssBody"></tbody></table></div>
    <div class="back-btn" onclick="goHome(this)">← Back to Menu</div>
</div>

<div id="screenWC" class="screen">
    <h1><span class="home-icon" onclick="goHome(this)">⌂</span> Water Cut</h1>
    <div class="input-group"><input id="wcTotal" type="text" inputmode="decimal" placeholder=" " ><label>Total Volume</label></div>
    <div class="input-group"><input id="wcWater" type="text" inputmode="decimal" placeholder=" " ><label>Water Volume</label></div>
    <div class="locked-merged-box" id="wcFullResBox"><span class="result-label">Water Cut (%)</span><div class="display-val-large" id="wcValDisp">—</div></div>
    <div class="row"><div class="btn" id="saveWC">Save Result</div><div class="btn" id="clearWC">Clear All</div></div>
    <div id="wcLog" class="log-list"><table><thead><tr><th>S/N</th><th>Result</th><th>Total Vol</th><th>Water Vol</th></tr></thead><tbody id="wcBody"></tbody></table></div>
    <div class="back-btn" onclick="goHome(this)">← Back to Menu</div>
</div>

<div id="screenTol" class="screen">
    <h1><span class="home-icon" onclick="goHome(this)">⌂</span> Tolerance</h1>
    <div class="input-group"><input id="tolMean" type="text" inputmode="decimal" placeholder=" " ><label>Mean Value</label></div>
    <div class="input-group"><input id="tolErr" type="text" inputmode="decimal" placeholder=" " ><label>Error Percentage (%)</label></div>
    <div class="input-group"><input id="tolResult" type="text" inputmode="decimal" placeholder=" " ><label>Result (optional)</label></div>
    <div class="locked-merged-box" id="tolFullResBox">
        <span class="result-label" id="tolLabel">Tolerance Range (±)</span>
        <div class="display-val-large" id="tolValDisp">—</div>
        <div id="tolStatusRow" style="display:none;">
            <div class="box-separator"></div>
            <span class="result-label">Status</span>
            <div style="display:flex; align-items:center; justify-content:flex-start; margin-top:5px;"><div class="status-icon" id="tolResultIcon"></div></div>
        </div>
    </div>
    <div class="row"><div class="btn" id="saveTol">Save</div><div class="btn" id="clearTol">Clear All</div></div>
    <div id="tolLog" class="log-list"><table><thead><tr><th>S/N</th><th>Tolerance</th><th>Acceptable Range</th><th id="tolLogResultHeader" style="display:none;">Result</th><th id="tolLogStatusHeader" style="display:none;">Status</th><th id="tolLogAccuracyHeader" style="display:none;">Accuracy</th></tr></thead><tbody id="tolBody"></tbody></table></div>
    <div class="back-btn" onclick="goHome(this)">← Back to Menu</div>
</div>

<div id="screenDup" class="screen">
    <h1><span class="home-icon" onclick="goHome(this)">⌂</span> Duplicate Check</h1>
    <div class="row" style="margin-bottom:12px;"><div class="input-group" style="margin:0;"><input id="dupR1" type="text" inputmode="decimal" placeholder=" "><label>Result 1</label></div><div class="save-btn" id="btnSaveR1">Save</div></div>
    <div class="row" style="margin-bottom:12px;"><div class="input-group" style="margin:0;"><input id="dupR2" type="text" inputmode="decimal" placeholder=" "><label>Result 2</label></div><div class="save-btn" id="btnSaveR2">Save</div></div>
    <div class="locked-merged-box" id="dupFullResBox">
        <span class="result-label">Difference (%)</span><div class="display-val-large" id="dupDiffDisp" style="text-align: left;">—</div>
        <div class="box-separator"></div><span class="result-label">Status</span><div style="display:flex; align-items:center; justify-content:flex-start; margin-top:5px;"><div class="status-icon" id="dupStatusIcon"></div></div>
        <div id="dupSuggestContainer" style="display:none;"><div class="box-separator"></div><span class="result-label">Suggested Value</span><div class="display-val-large" id="dupSuggestDisp" style="text-align: left;">—</div></div>
    </div>
    <div class="row"><div class="btn" id="saveDup">Save Result</div><div class="btn" id="clearDup">Clear All</div></div>
    <div id="dupLog" class="log-list"><table><thead><tr><th>S/N</th><th>R1</th><th>R2</th><th>Diff</th><th>Stats</th></tr></thead><tbody id="dupBody"></tbody></table></div>
    <div class="back-btn" onclick="goHome(this)">← Back to Menu</div>
</div>

<div id="screenWQ" class="screen">
    <h1><span class="home-icon" onclick="goHome(this)">⌂</span> Drinking Water Quality</h1>
    
    <div style="display:flex; align-items:center; gap:10px; margin-bottom:14px; width:100%; max-width:360px; justify-content:flex-end;">
        <span style="font-size:0.9rem; font-weight:600; color:var(--label-color);">Advanced</span>
        <label class="ios-toggle">
            <input type="checkbox" id="advToggle" onchange="switchWQMode()">
            <span class="ios-slider"></span>
        </label>
    </div>
    <table class="wq-table" id="wqTable">
        <colgroup><col><col><col><col></colgroup>
        <thead>
            <tr>
                <th class="wq-thead-th">Parameter</th>
                <th class="wq-thead-th">Result</th>
                <th class="wq-thead-th">Status</th>
                <th class="wq-thead-th">Specification</th>
            </tr>
        </thead>
        <tbody id="wqTableBody"></tbody>
    </table>
    <div class="row" style="margin-top:20px;"><div class="btn" onclick="printWQReport()">Generate PDF</div><div class="btn" onclick="clearWQMobile()">Clear All</div></div>
    <div class="back-btn" onclick="goHome(this)">← Back to Menu</div>
</div>

<div id="screenRG" class="screen">
    <h1><span class="home-icon" onclick="goHome(this)">⌂</span> Reports Generator</h1>

<div class="rg-inputs-section" style="width:100%; display:flex; flex-direction:column; align-items:center;">
        <div class="input-group" style="max-width:360px;"><input id="rgTitle" type="text" placeholder=" " ><label>Report Title</label></div>
        <div id="rgTestRows" style="width:100%; display:flex; flex-direction:column; align-items:center;"></div>
        <div class="row rg-mobile-btns" style="max-width:360px; margin-top:4px;">
            <div class="btn" onclick="generateRGReport()">Generate Report</div>
            <div class="btn" onclick="clearRG()">Clear All</div>
        </div>
    </div>

<div class="rg-report-preview" id="rgReportSection" style="display:none;">
        <div class="rg-report-preview-title" id="rgReportTitle"></div>
        <table class="rg-report-tbl">
            <colgroup><col><col><col><col><col></colgroup>
            <thead><tr><th>Sample</th><th>Test</th><th>Result</th><th>Specification</th><th>Status</th></tr></thead>
            <tbody id="rgReportBody"></tbody>
        </table>
        <div class="row rg-mobile-btns" style="margin-top:20px; max-width:100%;">
            <div class="btn" onclick="printRGReport()">Print PDF</div>
            <div class="btn" onclick="hideRGReport()">← Edit</div>
        </div>
    </div>

window.addEventListener('resize', initStars);
initStars();
animateStars();

/* CORE NAVIGATION & THEME */
const themeToggle = document.getElementById('themeToggle');
themeToggle.onclick = () => { 
    document.body.classList.toggle('dark-mode'); 
    document.body.classList.toggle('light-mode'); 
    themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀' : '🌙'; 
    flash(themeToggle, true); 
};
function flash(el, isIcon = false) { const cls = isIcon ? "flash-icon" : "flash"; el.classList.remove(cls); void el.offsetWidth; el.classList.add(cls); }
function showScreen(id) { document.querySelectorAll('.screen').forEach(s => s.classList.remove('active')); document.getElementById(id).classList.add('active'); themeToggle.style.display = (id === 'screenHome') ? "block" : "none"; }
function goTo(id, btn) { flash(btn); setTimeout(() => showScreen(id), 250); }
function goHome(btn) { flash(btn, true); setTimeout(() => showScreen('screenHome'), 250); }
function getTime() { return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); }
function translateArabicChars(str) { const map = {'٠':'0','١':'1','٢':'2','٣':'3','٤':'4','٥':'5','٦':'6','٧':'7','٨':'8','٩':'9','٫':'.'}; return str.replace(/[٠-٩٫]/g, d => map[d]); }
function conditionalFormat(val) { const num = parseFloat(val.toString().replace(/,/g, "")); if (isNaN(num)) return val; if (num < 10000) return num.toString(); const parts = num.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join("."); }
function cleanRoundedDecimal(num) { return Number(num.toFixed(2)); }

/* CALCULATORS - NO CHANGES */
const tdsRanges = [ {min:0, max:25, f:0.495}, {min:25.01, max:100, f:0.549}, {min:100.01, max:1000, f:0.604}, {min:1000.01, max:25000, f:0.638}, {min:25000.01, max:100000, f:0.744}, {min:100000.01, max:150000, f:0.813} ];
let tdsCount = 1;
document.getElementById('condInput').oninput = function() {
    let inputStr = translateArabicChars(this.value).replace(/,/g, ""); 
    let val = parseFloat(inputStr);
    if (!isNaN(val)) this.value = conditionalFormat(inputStr);
    const resBox = document.getElementById('tdsFullResBox'), sep = document.getElementById('tdsSep'), mLabel = document.getElementById('tdsMetaLabel'), mDisp = document.getElementById('tdsMetaDisp');
    if (isNaN(val)) { resBox.style.display="none"; return; }
    if (val > 150000) { document.getElementById('tdsValDisp').textContent = "OUT OF RANGE"; sep.style.display = "none"; mLabel.style.display = "none"; mDisp.style.display = "none"; resBox.style.display = "block"; return; }
    let match = tdsRanges.find(r => val >= r.min && val <= r.max);
    if (match) { document.getElementById('tdsValDisp').textContent = conditionalFormat(Math.round(val * match.f)); mDisp.textContent = `Range: ${match.min}-${match.max} | Factor: ${match.f}`; sep.style.display = "block"; mLabel.style.display = "block"; mDisp.style.display = "block"; resBox.style.display="block"; }
};
document.getElementById('saveTDS').onmousedown = function(e) { e.preventDefault(); flash(this); const inp = document.getElementById('condInput'); if(inp.value) { document.getElementById('tdsLog').style.display="block"; document.getElementById('tdsBody').innerHTML += `<tr><td>${tdsCount++}</td><td>${inp.value}</td><td>${document.getElementById('tdsValDisp').textContent}</td><td>${getTime()}</td></tr>`; inp.value=""; document.getElementById('tdsFullResBox').style.display="none"; inp.focus(); } };
document.getElementById('clearTDS').onclick = function() { flash(this); document.getElementById('condInput').value=""; document.getElementById('tdsFullResBox').style.display="none"; document.getElementById('tdsBody').innerHTML=""; document.getElementById('tdsLog').style.display="none"; tdsCount=1; };

/* WATER QUALITY — dynamic */
const WQ_PARAMS = {
    normal: [
        { name: 'pH', min: 7.0, max: 8.0, spec: '7.0 – 8.0' },
        { name: 'Conductivity (µS/cm)', min: 0, max: 1500, spec: '0 – 1500', id: 'wqCond', special: 'cond' },
        { name: 'TDS (mg/L)', min: 100, max: 200, spec: '100 – 200', id: 'wqTDS', readonly: true },
        { section: 'Anions' },
        { name: 'Bicarbonate (HCO₃⁻)', min: 5, max: 50, spec: '5 – 50 mg/L' },
        { name: 'Chloride (Cl⁻)', min: 15, max: 40, spec: '15 – 40 mg/L' },
        { section: 'Cations' },
        { name: 'Calcium (Ca²⁺)', min: 5, max: 20, spec: '5 – 20 mg/L', id: 'wqCa', special: 'hardness' },
        { name: 'Magnesium (Mg²⁺)', min: 1, max: 10, spec: '1 – 10 mg/L', id: 'wqMg', special: 'hardness' },
        { name: 'Total Hardness', min: 30, max: 100, spec: '30 – 100 mg/L', id: 'wqHard', readonly: true }
    ],
    advanced: [
        { name: 'pH', min: 6.8, max: 7.5, spec: '6.8 – 7.5' },
        { name: 'Conductivity (µS/cm)', min: 180, max: 300, spec: '180 – 300', id: 'wqCond', special: 'cond' },
        { name: 'TDS (ppm)', min: 120, max: 150, spec: '120 – 150 ppm', id: 'wqTDS', readonly: true },
        { section: 'Cations' },
        { name: 'Calcium (Ca²⁺)', min: 20, max: 35, spec: '20 – 35 ppm', id: 'wqCa', special: 'hardness' },
        { name: 'Magnesium (Mg²⁺)', min: 5, max: 10, spec: '5 – 10 ppm', id: 'wqMg', special: 'hardness' },
        { name: 'Sodium (Na⁺)', min: 10, max: 20, spec: '10 – 20 ppm' },
        { name: 'Potassium (K⁺)', min: 1, max: 3, spec: '1 – 3 ppm' },
        { section: 'Anions' },
        { name: 'Chloride (Cl⁻)', min: 15, max: 30, spec: '15 – 30 ppm' },
        { name: 'Bicarbonate (HCO₃⁻)', min: 70, max: 110, spec: '70 – 110 ppm' },
        { name: 'Sulphate (SO₄²⁻)', min: 10, max: 25, spec: '10 – 25 ppm' },
        { name: 'Fluoride (F⁻)', min: 0.5, max: 1.0, spec: '0.5 – 1.0 ppm' },
        { section: 'Hardness' },
        { name: 'Total Hardness', min: 70, max: 120, spec: '70 – 120 ppm', id: 'wqHard', readonly: true }
    ]
};
let wqMode = 'normal';

function switchWQMode() {
    wqMode = document.getElementById('advToggle').checked ? 'advanced' : 'normal';
    buildWQTable(wqMode);
}

function valWQ(input, min, max) {
    input.value = translateArabicChars(input.value);
    const val = parseFloat(input.value);
    const cell = input.closest('td');
    const printText = cell.querySelector('.print-text');
    const icon = cell.nextElementSibling.querySelector('.status-icon');
    if (input.value === "" || isNaN(val)) { icon.className = "status-icon"; icon.innerHTML = ""; if(printText) printText.textContent = "—"; return; }
    const isPass = (val >= min && val <= max);
    icon.className = isPass ? "status-icon pass" : "status-icon fail";
    icon.innerHTML = isPass ? "✓" : "✖";
    if(printText) printText.textContent = input.value;
}

function clearWQMobile() {
    buildWQTable(wqMode);
}

buildWQTable('normal');

/* ─── PRINT FUNCTIONS ────────────────────────────────────── */
const PRINT_STYLES = `
    @page { size: A4 portrait; margin: 12mm 14mm; }
    * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { margin: 0; padding: 0; background: #fff; color: #000; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
    h1 { font-size: 1.2rem; text-align: center; margin: 0 0 14px 0; font-weight: 700; color: #000; }
    table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    th { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #555; padding: 6px 6px 8px 6px; border-bottom: 2px solid #ccc; text-align: left; }
    td { font-size: 0.8rem; padding: 6px 6px; border-bottom: 1px solid #eee; vertical-align: middle; word-break: break-word; color: #000; line-height: 1.3; }
    .section-header td { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #007aff; border-left: 3px solid #007aff; border-bottom: none; padding: 8px 6px 3px 6px; }
    .status-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.72rem; font-weight: 700; }
    .status-icon.pass { background: #34c759; color: #fff; }
    .status-icon.fail { background: #ff3b30; color: #fff; }
    .report-title { font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #ccc; }
`;

function printWQReport() {
    const title = document.querySelector('#screenWQ h1') ? 'Drinking Water Quality Report' : 'Water Quality Report';
    const tbody = document.getElementById('wqTableBody');
    if (!tbody) return;

// Build rows HTML from current table
    let rowsHtml = '';
    tbody.querySelectorAll('tr').forEach(tr => {
        if (tr.classList.contains('wq-section-header')) {
            rowsHtml += '<tr class="section-header"><td colspan="4">' + (tr.querySelector('td') ? tr.querySelector('td').textContent : '') + '</td></tr>';
        } else {
            const cells = tr.querySelectorAll('td');
            if (cells.length >= 4) {
                const paramName = cells[0].textContent.trim();
                const printText = cells[1].querySelector('.print-text');
                const resultVal = printText ? printText.textContent.trim() : '—';
                const iconEl = cells[2].querySelector('.status-icon');
                let iconHtml = '—';
                if (iconEl && iconEl.classList.contains('pass')) iconHtml = '<span class="status-icon pass">✓</span>';
                else if (iconEl && iconEl.classList.contains('fail')) iconHtml = '<span class="status-icon fail">✖</span>';
                const spec = cells[3].textContent.trim();
                rowsHtml += '<tr><td>' + paramName + '</td><td>' + resultVal + '</td><td>' + iconHtml + '</td><td>' + spec + '</td></tr>';
            }
        }
    });

const html = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Water Quality Report</title><style>' + PRINT_STYLES + '</style></head><body>'
        + '<h1>' + title + '</h1>'
        + '<table><colgroup><col style="width:40%"><col style="width:20%"><col style="width:12%"><col style="width:28%"></colgroup>'
        + '<thead><tr><th>Parameter</th><th>Result</th><th>Status</th><th>Specification</th></tr></thead>'
        + '<tbody>' + rowsHtml + '</tbody></table>'
        + '</body></html>';

const pw = window.open('', '_blank');
    if (!pw) { alert('Please allow popups to print the report.'); return; }
    pw.document.write(html);
    pw.document.close();
    pw.focus();
    setTimeout(function() { pw.print(); }, 600);
}

function printRGReport() {
    const titleEl = document.getElementById('rgReportTitle');
    const tbody = document.getElementById('rgReportBody');
    if (!titleEl || !tbody) return;

const html = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>' + title + '</title><style>' + PRINT_STYLES + '</style></head><body>'
        + '<div class="report-title">' + title + '</div>'
        + '<table><colgroup><col style="width:22%"><col style="width:26%"><col style="width:14%"><col style="width:26%"><col style="width:12%"></colgroup>'
        + '<thead><tr><th>Sample</th><th>Test</th><th>Result</th><th>Specification</th><th>Status</th></tr></thead>'
        + '<tbody>' + rowsHtml + '</tbody></table>'
        + '</body></html>';

/* ─── REPORTS GENERATOR MOBILE ────────────────────────── */
let rgRowCount = 0;

function checkRGStatus(id) {
    const icon = document.getElementById('rgIcon_' + id);
    if(!icon) return;
    const result = parseFloat(translateArabicChars(document.getElementById('rgResult_' + id).value));
    const min = parseFloat(translateArabicChars(document.getElementById('rgMin_' + id).value));
    const max = parseFloat(translateArabicChars(document.getElementById('rgMax_' + id).value));
    if(isNaN(result) || isNaN(min) || isNaN(max)) { icon.className = 'status-icon'; icon.textContent = ''; return; }
    const isPass = result >= min && result <= max;
    icon.className = isPass ? 'status-icon pass' : 'status-icon fail';
    icon.textContent = isPass ? '✓' : '✖';
}

function hideRGReport() {
    const reportSec = document.getElementById('rgReportSection');
    const inputsSec = document.querySelector('#screenRG .rg-inputs-section');
    if(reportSec) reportSec.style.cssText = 'display:none;';
    if(inputsSec) inputsSec.style.display = 'flex';
    window.scrollTo(0, 0);
}

function clearRG() {
    document.getElementById('rgTitle').value = '';
    document.getElementById('rgTestRows').innerHTML = '';
    rgRowCount = 0;
    const reportSec = document.getElementById('rgReportSection');
    const inputsSec = document.querySelector('#screenRG .rg-inputs-section');
    if(reportSec) reportSec.style.cssText = 'display:none;';
    if(inputsSec) inputsSec.style.display = 'flex';
    addRGRow();
    window.scrollTo(0, 0);
}

addRGRow();
</script>
</body>
</html>