<!--
  REQUIRED DB MIGRATION (Phase 1 - Multi-Machine):
  ALTER TABLE daysheet_patients ADD COLUMN IF NOT EXISTS machine TEXT;

  REQUIRED DB MIGRATION (Task 1.5 - Audit Log):
  Run audit_log_schema.sql in your Supabase SQL editor.
  Creates: public.daysheet_audit_log table, indexes, and RLS policies.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>NWN Daily Patient Log v1.20.19</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Track 3 Phase 2: PWA install meta + manifest. Apple/iOS reads its own meta tags;
     the manifest covers Android + desktop Chromium. viewport-fit=cover above lets
     the mobile shell consume the iOS notch safe-area. -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#1a5faa">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Cross-browser standard (Chrome/Android). The apple-prefixed variant above
     stays for Safari/iOS which doesn't read this one. v1.20.0 pre-push fix
     for the Chrome console deprecation warning. -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="NWN DaySheet">
<script>var APP_VERSION='v1.20.19';</script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.100.1/dist/umd/supabase.min.js" integrity="sha384-RJpiDscpUIa2tmNUABXIB4EgEoaAMRcl5+yJJxYC+kXKvCFctiqLTn9j1AwOc9n1" crossorigin="anonymous"></script>
  <script type="module" crossorigin src="/assets/index-DA9N-X76.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-BwcquPmw.css">
</head>
<body>
<div id="offline-banner" style="display:none;position:fixed;top:0;left:0;width:100%;background:#e8a020;color:#fff;font-family:monospace;font-size:11px;font-weight:600;text-align:center;padding:7px 16px;z-index:99999;letter-spacing:.3px;">You are offline. Changes are saved locally and will sync when connectivity is restored.</div>
<div id="login-screen">
  <div class="login-card">
    <div class="login-logo"><img id="login-logo-img" src="/login-logo.png" alt="Next Wave Neurodiagnostics"></div>
    <div class="login-title">Patient Log</div>
    <div class="login-sub">Next Wave Neurodiagnostics</div>

    <div id="fields-tech">
      <div class="lf"><label for="login-username">Username</label>
        <input type="text" id="login-username" placeholder="Enter your username" autocomplete="username" aria-required="true" onkeydown="if(event.key==='Enter')document.getElementById('login-pin').focus()">
      </div>
      <div class="lf"><label for="login-pin">Password</label>
        <div class="nwn-pin-input-wrap">
          <input type="password" class="nwn-pin-input" id="login-pin" placeholder="Enter your password" autocomplete="current-password" aria-required="true" aria-describedby="login-err" onkeydown="if(event.key==='Enter')doLogin()">
          <button type="button" class="nwn-pin-eye" data-pin-eye-for="login-pin" data-visible="0" aria-label="Show password">
            <svg class="nwn-pin-eye__show" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
            <svg class="nwn-pin-eye__hide" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"/><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"/><path d="M3 3l18 18"/></svg>
          </button>
        </div>
      </div>
      <button class="login-btn btn-tech" onclick="doLogin()">Sign In</button>
      <div style="text-align:center;margin-top:8px;">
        <button onclick="showForgotPin()" style="background:none;border:none;color:#1a5faa;font-size:11px;cursor:pointer;font-family:monospace;text-decoration:underline;">Forgot Password?</button>
      </div>

    </div>

    <div class="login-err" id="login-err" role="alert" aria-live="assertive"></div>
    <div style="text-align:center;margin-top:18px;"><span id="login-version" style="font-family:monospace;font-size:10px;color:#c8d8ee;letter-spacing:1px;"></span></div>
  </div>

  <div class="login-card" id="setup-card" style="display:none;margin-top:16px;">
    <div style="font-size:13px;font-weight:700;color:#1a2d4a;margin-bottom:4px;">First-Time Setup</div>
    <div style="font-size:11px;color:#5a7090;margin-bottom:16px;">Enter your Supabase credentials to connect the app.</div>
    <label style="font-size:11px;color:#5a7090;display:block;margin-bottom:4px;">Supabase URL</label>
    <input type="text" id="setup-sb-url" placeholder="https://xxxx.supabase.co" autocomplete="off" data-lpignore="true" style="width:100%;margin-bottom:10px;padding:8px 10px;border:1px solid #c8d8ee;border-radius:6px;font-family:monospace;font-size:12px;">
    <label style="font-size:11px;color:#5a7090;display:block;margin-bottom:4px;">Anon Key</label>
    <input type="password" id="setup-sb-key" placeholder="eyJ..." autocomplete="off" data-lpignore="true" style="width:100%;margin-bottom:14px;padding:8px 10px;border:1px solid #c8d8ee;border-radius:6px;font-family:monospace;font-size:12px;">
    <button onclick="saveSetupCfg()" class="login-btn btn-tech" style="width:100%;">Save &amp; Connect</button>
    <div id="setup-status" style="font-size:11px;color:#c0392b;margin-top:8px;min-height:16px;"></div>
  </div>
</div>
<div id="app" aria-label="NWN Daily Patient Log">
  <header role="banner">
    <img id="header-logo-img" src="/header-logo.png" alt="Next Wave Neurodiagnostics" style="height:46px">
    <div class="hdr-right">
      <div class="as-lbl" id="as-lbl-wrap">
        <span class="as-dot" id="as-dot"></span><span id="as-lbl">Auto-save on</span>
      </div>
      <!-- v1.20.3 — "Back to mobile" control. Hidden by default; shown only
           when sessionStorage 'nwn_force_desktop'==='1' (the per-tab view
           preference set by AdminMobileLanding's "View Desktop App"). Visibility
           is driven by syncBackToMobileControl() in src/modules/user-profile.js,
           called from updateHeaderAvatar() — the shared header-refresh chokepoint
           every show*App() path hits. A genuine desktop never has the flag (the
           setter only exists at <=768px), so this stays hidden there. -->
      <button class="logout-btn" id="back-to-mobile-btn" type="button" data-action="back-to-mobile" onclick="backToMobile()" style="display:none;" aria-label="Back to mobile view">&#8592; &nbsp;Back to mobile</button>
      <div class="user-menu-wrap" id="user-menu-wrap">
        <div class="avatar-circle" id="header-avatar" onclick="toggleUserMenu()" title="Account" role="button" tabindex="0" aria-label="Account menu" aria-haspopup="true" aria-expanded="false" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleUserMenu();}"><span id="header-avatar-initials"></span></div>
        <span class="tech-badge badge-tech" id="tech-badge" style="display:none;"></span>
        <div class="user-menu" id="user-menu" role="menu">
          <div class="user-menu-identity">
            <div class="user-menu-name" id="um-name"></div>
            <div class="user-menu-role" id="um-role"></div>
          </div>
          <div class="user-menu-divider"></div>
          <button class="user-menu-item" role="menuitem" onclick="goToProfile()">&#9881; &nbsp;My Profile</button>
          <button class="user-menu-item" id="um-admin-link" role="menuitem" onclick="goToAdminPanel()" style="display:none;">&#9632; &nbsp;Admin Panel</button>
          <button class="user-menu-item" role="menuitem" onclick="closeUserMenu();openContextHelp();" aria-label="Help">&#10067; &nbsp;Help</button>
          <button class="user-menu-item danger" role="menuitem" onclick="doLogout()">&#8594; &nbsp;Sign Out</button>
        </div>
      </div>
    </div>
  </header>
  <div class="tabs" id="tabs-bar" role="tablist" aria-label="Main navigation"></div>

  <!-- TECH: Patient Log -->
  <div class="panel" id="panel-log" role="tabpanel" aria-labelledby="tab-log">
    <!-- Camelo mapping warning banner (tech only) -->
    <div class="camelo-no-map-banner" id="camelo-no-map-banner">
      <span class="cnmb-icon">&#9888;</span>
      <span>Your account is not linked to a Camelo schedule. Day sheet submissions are disabled until an admin links your account. Contact your administrator.</span>
    </div>
    <div class="camelo-no-map-banner" id="visit-status-banner" style="background:#fffbeb;border-color:#e8a020;color:#7a5000;">
      <span class="cnmb-icon" style="color:#1a6aaa;">&#9432;</span>
      <span>Visit status tracking is enabled for this client. Please set the visit status for each patient row before submitting.</span>
      <button style="margin-left:auto;background:none;border:none;cursor:pointer;color:#1a4a7a;font-size:16px;padding:0 4px;" onclick="dismissVisitStatusBanner()" aria-label="Dismiss">&times;</button>
    </div>
    <div class="sbar2">
      <div class="hf"><label for="h-office">Office / Location</label><select id="h-office" aria-required="true" onchange="filterMdsByOffice();render();checkVisitStatusBanner();checkContractorOfficeDuplicate()"><option value="">-- Select Office --</option></select>
        <span class="camelo-date-err" id="contractor-office-dupe-warn" role="alert" aria-live="assertive"></span>
      </div>
      <div class="hf"><label for="h-md">M.D.</label><select id="h-md" aria-required="true"><option value="">-- Select MD --</option></select></div>
      <div class="hf" id="h-machine-wrap"><label for="h-machine">Machine</label><div class="mm-machine-inline"><select id="h-machine" aria-label="Machine"><option value="">-- Select --</option></select><button type="button" class="mm-toggle-btn" id="mm-toggle-btn" data-tip="Use multiple machines" onclick="toggleMultiMachine()" aria-label="Toggle multi-machine mode">&#8862;</button></div></div>
      <div id="mm-pill-wrap" style="display:none;align-self:center;"><span class="mm-pill" id="mm-pill">Multi-machine mode <button class="mm-pill-x" onclick="toggleMultiMachine()" title="Exit multi-machine mode">&times;</button></span></div>
      <div class="hf"><label for="h-tech">Technician</label><input type="text" id="h-tech" readonly aria-readonly="true" style="cursor:not-allowed;color:#1a5faa;font-weight:700;"></div>
      <div class="hf">
        <label for="h-date">Date</label>
        <input type="date" id="h-date" aria-required="true">
        <span class="camelo-date-checking" id="camelo-date-checking">Checking shift...</span>
        <span class="camelo-date-err" id="camelo-date-err" role="alert" aria-live="assertive">No scheduled shift found for this date. Contact your supervisor if this is an error.</span>
      </div>
      <div class="hf"><label for="h-in">Time In</label><input type="time" id="h-in" aria-required="true"></div>
      <div class="hf"><label for="h-out">Time Out</label><input type="time" id="h-out" aria-required="true"></div>
      <div class="hf np-icon-wrap"><label aria-hidden="true">&nbsp;</label><button type="button" class="np-toggle-btn np-icon-btn" id="np-toggle-btn" onclick="toggleNoPatients()" data-tip="Mark as no-patient day — use this if no patients showed up" aria-label="Mark as no-patient day" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M20 21v-2a4 4 0 0 0-3-3.87"/><path d="M4 21v-2a4 4 0 0 1 4-4h6"/><circle cx="12" cy="7" r="4"/><line x1="3" y1="3" x2="21" y2="21"/></svg></button></div>
    </div>
    <!-- No Patients Toggle -->
    <div class="np-toggle-bar" id="np-toggle-bar">
      <span class="np-toggle-lbl" id="np-toggle-lbl">Toggle if you visited the site but had zero patients</span>
      <div class="np-reason-area" id="np-reason-area">
        <div class="hf">
          <label for="np-reason">Reason</label>
          <select id="np-reason">
            <option value="">-- Select Reason --</option>
          </select>
        </div>
        <div class="hf" style="flex:1;min-width:200px;">
          <label for="np-notes">Notes (optional)</label>
          <textarea id="np-notes" rows="1" placeholder="Additional context..."></textarea>
        </div>
      </div>
    </div>

    <div class="sec-lbl" id="patient-log-label">Patient Log</div>
    <div class="twrap" id="patient-table-wrap">
      <table>
        <thead><tr>
          <th scope="col" style="width:28px;" aria-label="Drag handle"></th><th scope="col" class="c" aria-label="Row number">#</th><th scope="col">Patient Name</th><th scope="col" class="c">Study Type</th>
          <th scope="col" class="c mm-machine-th mm-col-hidden" id="mm-th">Machine</th>
          <th scope="col" class="c">Extremity</th><th scope="col" id="th-report-status" style="display:none;">Report</th><th scope="col" id="th-ref-md" style="display:none;">Ref. MD</th><th scope="col" id="th-visit-status" style="display:none;">Visit Status</th><th scope="col">Comment</th><th scope="col" class="c" aria-label="Remove row">X</th>
        </tr></thead>
        <tbody id="tbody"></tbody>
      </table>
    </div>
    <div class="sbar" role="region" aria-label="Study statistics">
      <div class="st"><div class="slbl">Total Studies</div><div class="sval" id="s-tot">0</div></div>
      <div class="st"><div class="slbl">By Type</div><div class="bdgs" id="s-bdg"></div></div>
      <div class="st"><div class="slbl">Upper</div><div class="sval" id="s-u">0</div></div>
      <div class="st"><div class="slbl">Lower</div><div class="sval a" id="s-l">0</div></div>
      <div class="st"><div class="slbl">Both</div><div class="sval g" id="s-b">0</div></div>
    </div>
    <div class="acts">
      <button class="btn btn-p" onclick="openModal()">Review &amp; Print</button>
      <button class="btn btn-g" id="submit-btn" onclick="submitDaySheet()">&#10003; Submit Day Sheet</button>
      <button class="btn btn-o" onclick="exportCSV()">Export CSV</button>
      <button class="btn btn-d" onclick="clearAll()">New Day / Clear</button>
    </div>
    <div class="req-err-box" id="req-err-box" role="alert" aria-live="assertive"></div>
    <div class="submit-err" id="dupe-warn-box" role="alert" aria-live="assertive"></div>
    <div class="submit-success" id="submit-success" role="status" aria-live="polite"></div>
  </div>

  <!-- TECH: History -->
  <div class="panel" id="panel-history" role="tabpanel" aria-labelledby="tab-history">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;">
      <div class="sec-lbl" style="margin-bottom:0">My Previous Day Sheets</div>
    </div>
    <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
        <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
        <div style="display:flex;gap:6px;flex-wrap:wrap;">
          <button class="cd-period-btn" onclick="setPeriod('7d',this,'hist-from','hist-to','hist-custom-range',loadHistory)">Last 7 Days</button>
          <button class="cd-period-btn" onclick="setPeriod('30d',this,'hist-from','hist-to','hist-custom-range',loadHistory)">Last 30 Days</button>
          <button class="cd-period-btn active" onclick="setPeriod('thismonth',this,'hist-from','hist-to','hist-custom-range',loadHistory)">This Month</button>
          <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'hist-from','hist-to','hist-custom-range',loadHistory)">Last Month</button>
          <button class="cd-period-btn" onclick="setPeriod('thisyear',this,'hist-from','hist-to','hist-custom-range',loadHistory)">This Year</button>
          <button class="cd-period-btn" onclick="setPeriod('custom',this,'hist-from','hist-to','hist-custom-range',loadHistory)">Custom</button>
        </div>
        <div id="hist-custom-range" style="display:none;gap:6px;align-items:center;">
          <input type="date" id="hist-from" class="adm-date-inp" onchange="loadHistory()">
          <span style="font-size:11px;color:#8a9bb0;">to</span>
          <input type="date" id="hist-to" class="adm-date-inp" onchange="loadHistory()">
        </div>
      </div>
    </div>
    <div id="hist-status" style="font-family:monospace;font-size:11px;color:#8a9bb0;margin-bottom:10px;"></div>
    <div id="hist-skeleton" style="display:none;margin-bottom:10px;">
      <div style="display:flex;gap:8px;margin-bottom:8px;">
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 100px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
      </div>
      <div style="display:flex;gap:8px;margin-bottom:8px;">
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 120px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
      </div>
      <div style="display:flex;gap:8px;margin-bottom:8px;">
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 90px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
      </div>
      <div style="display:flex;gap:8px;margin-bottom:8px;">
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 110px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
      </div>
      <div style="display:flex;gap:8px;margin-bottom:8px;">
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 95px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
      </div>
      <div style="display:flex;gap:8px;margin-bottom:8px;">
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 105px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
        <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 40px;"></div>
      </div>
    </div>
    <div style="position:relative;margin-bottom:10px;">
      <input type="text" id="hist-search" placeholder="Search date, office, M.D...." oninput="filterHistList(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterHistList('');}" style="width:100%;background:#f4f8fd;border:1px solid #c8d8ee;border-radius:6px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:13px;padding:9px 34px 9px 12px;outline:none;box-sizing:border-box;transition:border-color .2s;" onfocus="this.style.borderColor='#1a5faa';this.style.background='#fff'" onblur="this.style.borderColor='#c8d8ee';this.style.background='#f4f8fd'">
      <button onclick="document.getElementById('hist-search').value='';filterHistList('');" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a9bb0;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px;" title="Clear search">&times;</button>
    </div>
    <div id="hist-list"></div>
    <div id="hist-detail" style="display:none;margin-top:16px;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;">
        <div style="display:flex;align-items:center;gap:10px;">
          <button class="btn btn-o btn-sm" onclick="closeHistDetail()">&#8592; Back</button>
          <span id="hist-detail-title" style="font-weight:700;color:#1a5faa;font-size:14px;"></span>
        </div>
        <div style="display:flex;gap:8px;align-items:center;">
          <button class="btn btn-o btn-sm" id="hist-edit-btn" onclick="toggleHistEdit()">&#9998; Edit</button>
          <!-- v1.20.0: hist-approve-btn removed (human review workflow retired). -->
          <!-- v1.20.0: admin/supervisor soft-delete entry. Visibility toggled in openSubmissionDetail. -->
          <button class="btn btn-sm" id="hist-delete-btn" style="display:none;background:#c0392b;border-color:#c0392b;color:#fff;" onclick="openDesktopDeleteModal()">&#128465; Delete</button>
          <button class="btn btn-p btn-sm" onclick="printHistDetail()">&#128424; Print / PDF</button>
        </div>
      </div>

      <!-- Edit mode header fields -->
      <div id="hist-edit-fields" style="display:none;background:#f8fbff;border:1px solid #c8d8ee;border-radius:8px;padding:12px 14px;margin-bottom:12px;">
        <div style="font-size:9px;letter-spacing:2px;color:#1a5faa;text-transform:uppercase;font-family:monospace;margin-bottom:10px;">Editing Session Info</div>
        <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;">
          <div class="hf"><label>Office</label><input type="text" id="edit-office" style="width:148px;background:#fff;border:1px solid #c8d8ee;border-radius:5px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:12px;padding:5px 8px;outline:none;"></div>
          <div class="hf"><label>M.D.</label><input type="text" id="edit-md" style="width:148px;background:#fff;border:1px solid #c8d8ee;border-radius:5px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:12px;padding:5px 8px;outline:none;"></div>
          <div class="hf"><label>Machine</label><input type="text" id="edit-machine" style="width:120px;background:#fff;border:1px solid #c8d8ee;border-radius:5px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:12px;padding:5px 8px;outline:none;"></div>
          <div class="hf"><label>Time In</label><input type="time" id="edit-tin" style="width:110px;background:#fff;border:1px solid #c8d8ee;border-radius:5px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:12px;padding:5px 8px;outline:none;"></div>
          <div class="hf"><label>Time Out</label><input type="time" id="edit-tout" style="width:110px;background:#fff;border:1px solid #c8d8ee;border-radius:5px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:12px;padding:5px 8px;outline:none;"></div>
          <div class="hf"><label>Tech</label><select id="edit-tech" style="width:170px;background:#fff;border:1px solid #c8d8ee;border-radius:5px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:12px;padding:5px 8px;outline:none;"><option value="">-- Select --</option></select></div>
          <div class="hf"><label>On Time</label><select id="edit-ontime" style="width:80px;background:#fff;border:1px solid #c8d8ee;border-radius:5px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:12px;padding:5px 8px;outline:none;"><option value="true">Yes</option><option value="false">No</option></select></div>
        </div>
      </div>

      <!-- v1.20.0: hist-review-status removed (human review workflow retired). -->
      <div id="hist-detail-meta" style="font-family:monospace;font-size:11px;color:#6b84a0;margin-bottom:12px;border:1px solid #e0eaf5;border-radius:6px;padding:8px 12px;background:#f8fbff;line-height:1.8;"></div>
      <div class="twrap">
        <table id="hist-detail-table"><thead><tr>
          <th class="c" id="hist-th-drag" style="display:none;width:24px;" aria-label="Drag handle"></th>
          <th class="c">#</th><th>Patient Name</th><th class="c">Study</th>
          <th class="c mm-machine-th mm-col-hidden" id="hist-mm-th">Machine</th>
          <th class="c">Extremity</th><th id="hist-th-report-status" style="display:none;">Report</th><th id="hist-th-ref-md" style="display:none;">Ref. MD</th><th id="hist-th-visit-status" style="display:none;">Visit Status</th><th>Comment</th>
          <th class="c" id="hist-th-delete" style="display:none;width:32px;" aria-label="Remove row"></th>
        </tr></thead><tbody id="hist-detail-body"></tbody></table>
      </div>
      <div id="hist-save-row" style="display:none;margin-top:12px;">
        <button class="btn btn-g" onclick="saveHistEdits()">Save Changes</button>
        <button class="btn btn-d btn-sm" style="margin-left:8px;" onclick="cancelHistEdit()">Cancel</button>
        <span id="hist-save-status" style="font-family:monospace;font-size:11px;color:#8a9bb0;margin-left:12px;"></span>
      </div>
    </div>
  </div>

  <!-- ADMIN PANEL -->
  <div class="panel" id="panel-admin" role="tabpanel" aria-label="Admin panel">
    <div class="admin-layout">
      <nav class="admin-nav" aria-label="Admin navigation">
        <!-- CR.17 Phase 4.7 — header strip removed; the collapse toggle is now
             rendered inside the UserButton footer row by _renderSidebarFooter()
             in src/main.js. -->
        <!-- CR.17 Phase 2: sidebar items are rendered by renderAdminSidebar() in src/main.js
             from the ADMIN_SECTIONS registry. Do not add hardcoded <button> entries here. -->
        <div id="anav-list" class="anav-list"></div>
        <div class="anav-spacer"></div>
      </nav>
      <div class="admin-content" role="main">

        <!-- ── PERSISTENT ALERT BAR (task 5.14) ── -->
        <!-- CR.17 Phase 4.5 — the always-visible ribbon (#pab-bar) is hidden
             via .pab-bar { display:none !important; } in main.css. The sidebar
             Notifications entry (admin-sections.js, isPabProxy:true) is the
             sole entry point that calls togglePab() to expand the drawer.
             #pab-bar still exists in the DOM so renderPersistentAlertBar()'s
             badge/label writes and _mirrorPabBadgeToNav() continue to work
             without further refactoring. The onclick was removed so the
             hidden bar is not a click target. -->
        <div class="pab-wrap" id="pab-wrap">
          <div class="pab-bar" id="pab-bar" style="display:none;" aria-hidden="true" aria-controls="pab-drawer">
            <span class="pab-badge pab-red" id="pab-badge" style="display:none;">0</span>
            <span class="pab-label" id="pab-label">Compliance Alerts <span class="pab-types" id="pab-types"></span></span>
            <span class="pab-chev" id="pab-chev">&#9660;</span>
          </div>
          <div class="pab-drawer" id="pab-drawer" role="region" aria-label="Alert details">
            <div class="pab-items" id="pab-items"></div>
            <!-- v1.17.4 — drawer footer holds Dismiss-all + Restore actions.
                 Buttons are shown/hidden by renderPersistentAlertBar() based on
                 visible / dismissed counts so the controls always reflect the
                 actionable state. Old single "Clear all dismissed" button was
                 a confusing no-op when nothing had been dismissed (v1.17.3
                 hotfix). -->
            <div class="pab-drawer-actions" id="pab-drawer-actions">
              <button class="pab-clear-btn pab-dismiss-all-btn" id="pab-dismiss-all-btn" onclick="pabDismissAll()" style="display:none;">Dismiss all</button>
              <button class="pab-clear-btn pab-restore-btn" id="pab-restore-btn" onclick="pabRestoreDismissed()" style="display:none;">Restore dismissed</button>
            </div>
          </div>
        </div>

        <div class="admin-section active" id="asec-dashboard">
          <div class="asec-hdr">
            <div><div class="asec-title">Dashboard</div><div class="asec-sub">Activity overview for all techs</div></div>
          </div>
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;">
                <button class="cd-period-btn" onclick="setPeriod('7d',this,'adm-from','adm-to','adm-custom-range',loadAdminData)">Last 7 Days</button>
                <button class="cd-period-btn active" onclick="setPeriod('30d',this,'adm-from','adm-to','adm-custom-range',loadAdminData)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('thismonth',this,'adm-from','adm-to','adm-custom-range',loadAdminData)">This Month</button>
                <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'adm-from','adm-to','adm-custom-range',loadAdminData)">Last Month</button>
                <button class="cd-period-btn" onclick="setPeriod('thisyear',this,'adm-from','adm-to','adm-custom-range',loadAdminData)">This Year</button>
                <button class="cd-period-btn" onclick="setPeriod('custom',this,'adm-from','adm-to','adm-custom-range',loadAdminData)">Custom</button>
              </div>
              <div id="adm-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" id="adm-from" class="adm-date-inp" onchange="loadAdminData()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" id="adm-to" class="adm-date-inp" onchange="loadAdminData()">
              </div>
            </div>
          </div>
          <div id="adm-status" style="font-family:monospace;font-size:11px;color:#8a9bb0;margin-bottom:12px;"></div>
          <div id="adm-subs-skeleton" style="display:none;margin-bottom:12px;">
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 120px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 50px;"></div>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 100px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 50px;"></div>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 110px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 50px;"></div>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 90px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 50px;"></div>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 80px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 130px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 55px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 50px;"></div>
            </div>
          </div>
          <div id="adm-content" style="display:none;">
            <div class="metric-grid">
              <div class="metric-card"><div class="metric-lbl">Total Studies</div><div class="metric-val" id="adm-total" style="color:#1a5faa">0</div></div>
              <div class="metric-card"><div class="metric-lbl">Submissions</div><div class="metric-val" id="adm-subs" style="color:#1a5faa">0</div></div>
              <div class="metric-card"><div class="metric-lbl">On-Time Rate</div><div class="metric-val" id="adm-ontime" style="color:#22b573">--</div></div>
              <div class="metric-card"><div class="metric-lbl">Avg Studies/Day</div><div class="metric-val" id="adm-avg" style="color:#3a7bd5">0</div></div>
            </div>
            <div class="chart-grid">
              <div class="chart-card"><div class="chart-hdr" style="background:#1a5faa">Studies by Tech</div><div class="chart-body" id="adm-by-tech"></div></div>
              <div class="chart-card"><div class="chart-hdr" style="background:#1a5faa">Studies by Office</div><div class="chart-body" id="adm-by-office"></div></div>
              <div class="chart-card"><div class="chart-hdr" style="background:#22b573">Study Type Breakdown</div><div class="chart-body" id="adm-by-type"></div></div>
              <div class="chart-card"><div class="chart-hdr" style="background:#0d3d7a">On-Time Rate by Tech</div><div class="chart-body" id="adm-ontime-tech"></div></div>
            </div>
            <!-- Arrival Analysis mini-widget -->
            <div class="arr-widget">
              <div class="arr-widget-hdr">&#9654; Arrival Punctuality &mdash; Camelo Shift vs. Clock-In</div>
              <div class="arr-widget-body" id="adm-arrival-widget">
                <div style="font-family:monospace;font-size:11px;color:#8a9bb0;padding:8px 0;">Loading arrival data&hellip;</div>
              </div>
            </div>
            <!-- On-Site Duration mini-widget (Task 3.11/5.7) -->
            <div class="arr-widget">
              <div class="arr-widget-hdr">&#9201; On-Site Duration &mdash; Clock-In to Clock-Out</div>
              <div class="arr-widget-body" id="adm-duration-widget">
                <div style="font-family:monospace;font-size:11px;color:#8a9bb0;padding:8px 0;">Loading on-site data&hellip;</div>
              </div>
            </div>
          </div>
        </div>

        <div class="admin-section" id="asec-submissions">
          <div class="asec-hdr">
            <div><div class="asec-title">All Submissions</div><div class="asec-sub">Every day sheet submitted</div></div>
            <div style="display:flex;gap:8px;">
              <button class="btn btn-o btn-sm" onclick="exportAdminCSV()">&#8595; Export CSV</button>
              <button class="btn btn-p btn-sm" onclick="printAdminReport()">&#128424; Print</button>
            </div>
          </div>
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;">
                <button class="cd-period-btn" onclick="setPeriod('7d',this,'adm-from','adm-to','adm-subs-custom-range',loadAdminData)">Last 7 Days</button>
                <button class="cd-period-btn active" onclick="setPeriod('30d',this,'adm-from','adm-to','adm-subs-custom-range',loadAdminData)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('thismonth',this,'adm-from','adm-to','adm-subs-custom-range',loadAdminData)">This Month</button>
                <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'adm-from','adm-to','adm-subs-custom-range',loadAdminData)">Last Month</button>
                <button class="cd-period-btn" onclick="setPeriod('thisyear',this,'adm-from','adm-to','adm-subs-custom-range',loadAdminData)">This Year</button>
                <button class="cd-period-btn" onclick="setPeriod('custom',this,'adm-from','adm-to','adm-subs-custom-range',loadAdminData)">Custom</button>
              </div>
              <div id="adm-subs-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" class="adm-date-inp" onchange="document.getElementById('adm-from').value=this.value;loadAdminData()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" class="adm-date-inp" onchange="document.getElementById('adm-to').value=this.value;loadAdminData()">
              </div>
            </div>
          </div>
          <div style="position:relative;margin-bottom:10px;">
            <input type="text" id="adm-search" placeholder="Search submissions..." oninput="filterAdminTable(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterAdminTable('');}" style="width:100%;background:#f4f8fd;border:1px solid #c8d8ee;border-radius:6px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:13px;padding:9px 34px 9px 12px;outline:none;box-sizing:border-box;transition:border-color .2s;" onfocus="this.style.borderColor='#1a5faa';this.style.background='#fff'" onblur="this.style.borderColor='#c8d8ee';this.style.background='#f4f8fd'">
            <button onclick="document.getElementById('adm-search').value='';filterAdminTable('');" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a9bb0;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px;" title="Clear search">&times;</button>
          </div>
          <div id="adm-table" style="overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #c8d8ee;"></div>
        </div>

        <div class="admin-section" id="asec-techs">
          <div class="asec-hdr">
            <div><div class="asec-title">Technician Management</div><div class="asec-sub">Add, remove and manage tech logins</div></div>
          </div>
          <!-- Migration warning -->
          <div id="tech-migrate-warn" style="display:none;background:#fff8e8;border:1px solid #e8c84a;border-radius:8px;padding:12px 16px;margin-bottom:12px;">
            <div style="font-size:11px;font-weight:700;color:#a07010;margin-bottom:4px;">&#9888; Some techs need profile update</div>
            <div style="font-size:11px;color:#5a7090;font-family:monospace;">Techs with old name format need first and last name. Use the Active Users panel below to update them.</div>
          </div>
          <div class="acard" style="margin-top:14px;background:#f8fbff;border-color:#c8d8ee;">
            <div class="acard-title" style="margin-bottom:6px;">Add New User</div>
            <div style="font-family:monospace;font-size:12px;color:#5a7090;margin-bottom:10px;">User creation has moved to the Settings panel for a unified experience alongside Camelo mapping and other configuration.</div>
            <button class="btn btn-p btn-sm" onclick="adminNav('config');toggleSettingsSection('settings-add-user-body','settings-add-user-chev');renderSettingsLists();">Go to Settings &rarr; Add New User</button>
          </div>
          <!-- v1.11.0: the former "Fix & Debug" panel is the new home of
               "Active Users". The compact <ul id="tp-list"> panel that used to
               sit above this section was removed — it duplicated the same
               roster shown in the rich table below. -->
          <div class="acard" style="margin-top:14px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px;">
              <div class="acard-title" style="margin-bottom:0;display:flex;align-items:baseline;gap:10px;">
                <span>Active Users</span>
                <span id="tech-count" style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;">0 saved</span>
              </div>
              <div style="display:flex;gap:8px;">
                <button class="btn btn-o btn-sm" onclick="deduplicateTechs()">Remove Duplicates</button>
                <button class="btn btn-o btn-sm" onclick="exportTechList()">Export</button>
              </div>
            </div>
            <p style="font-family:monospace;font-size:11px;color:#5a7090;margin-bottom:10px;line-height:1.6;">All users stored in your Supabase database. Duplicates are highlighted.</p>
            <div id="raw-tech-table" style="overflow-x:auto;"></div>
          </div>
        </div>

        <div class="admin-section" id="asec-clients">
          <div class="asec-hdr">
            <div><div class="asec-title">Clients</div><div class="asec-sub">Manage clients, job sites and physicians</div></div>
          </div>
          <!-- v1.16.0 Sub-B — admin Clients search. Reuses wordStartMatch from
               submission-search.js so the matching semantics are identical to the
               seven other v1.15.1 filter surfaces. -->
          <div class="nwn-client-search-wrap">
            <input type="text" id="client-search" class="nwn-client-search" placeholder="Search clients, job sites, physicians..." oninput="filterClientList(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterClientList('');}">
            <button type="button" class="nwn-client-search__clear" onclick="document.getElementById('client-search').value='';filterClientList('');" title="Clear search">&times;</button>
          </div>
          <div id="client-list-wrap"></div>
          <div id="client-focus-view-wrap" hidden></div>
          <div class="acard" style="margin-top:14px;">
            <div class="acard-title">Add New Client</div>
            <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;">
              <div class="hf"><label>Client / Practice Name</label>
                <input class="sc-inp" id="new-client-name" placeholder="e.g. Essen Medical Group" style="width:280px;">
              </div>
              <button class="btn btn-p btn-sm" onclick="addClient()">Add Client</button>
            </div>
          </div>
        </div>

        <div class="admin-section" id="asec-reports">
          <div class="asec-hdr">
            <div><div class="asec-title">Reports &amp; Export</div><div class="asec-sub">Download and print your data</div></div>
          </div>
          <div class="report-card-grid">
            <div class="report-card" onclick="exportAdminCSV()"><div class="report-card-icon">&#128196;</div><div class="report-card-title">Export All Submissions</div><div class="report-card-sub">Download as CSV for Excel</div></div>
            <div class="report-card" onclick="printAdminReport()"><div class="report-card-icon">&#128424;</div><div class="report-card-title">Print Summary Report</div><div class="report-card-sub">Metrics and full table</div></div>
            <div class="report-card" onclick="exportTechList()"><div class="report-card-icon">&#128101;</div><div class="report-card-title">Export Tech List</div><div class="report-card-sub">Tech names as CSV</div></div>
            <div class="report-card" id="msr-card" onclick="toggleMissingSubmissionsPanel()"><div class="report-card-icon">&#128270;</div><div class="report-card-title">Missing Submissions Report</div><div class="report-card-sub">Find unfiled, partial, and late shifts</div></div>
          </div>

          <!-- Missing Submissions Report — inline configurator (CR.63 / v1.6.0) -->
          <div class="msr-panel" id="msr-panel" style="display:none;margin-top:18px;background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:18px;">
            <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;">
              <div>
                <div style="font-size:14px;font-weight:700;color:#1a2d4a;">Missing Submissions Report</div>
                <div style="font-size:11px;font-family:monospace;color:#8a9bb0;margin-top:2px;">Pick a date range and which statuses to include. Choose CSV or PDF to download.</div>
              </div>
              <button class="btn btn-sm" type="button" onclick="toggleMissingSubmissionsPanel()" style="border:1px solid #c8d8ee;background:#fff;color:#5a7090;">Close</button>
            </div>

            <div style="display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin-bottom:14px;">
              <div class="hf">
                <label for="msr-from" style="display:block;font-size:10px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;">From</label>
                <input type="date" id="msr-from" class="adm-date-inp" onchange="msrPreviewRowCount()" />
              </div>
              <div class="hf">
                <label for="msr-to" style="display:block;font-size:10px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;">To</label>
                <input type="date" id="msr-to" class="adm-date-inp" onchange="msrPreviewRowCount()" />
              </div>
              <div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap;">
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;">
                  <input type="checkbox" id="msr-flag-missing" checked onchange="msrPreviewRowCount()"> Missing
                </label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;">
                  <input type="checkbox" id="msr-flag-partial" checked onchange="msrPreviewRowCount()"> Partial
                </label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;">
                  <input type="checkbox" id="msr-flag-late" onchange="msrPreviewRowCount()"> Late
                </label>
              </div>
            </div>

            <details style="margin-bottom:14px;border:1px solid #e3ecf6;border-radius:6px;padding:10px 12px;background:#f8fbff;">
              <summary style="cursor:pointer;font-size:11px;font-family:monospace;color:#1a5faa;letter-spacing:1px;text-transform:uppercase;font-weight:600;">More columns</summary>
              <div id="msr-col-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 14px;margin-top:10px;">
                <!-- Default columns first; extras after a divider so they read like primary vs secondary -->
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-tech" checked onchange="msrPreviewRowCount()"> Tech <span style="color:#8a9bb0;font-size:10px;">(default)</span></label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-date" checked onchange="msrPreviewRowCount()"> Date <span style="color:#8a9bb0;font-size:10px;">(default)</span></label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-office" checked onchange="msrPreviewRowCount()"> Office <span style="color:#8a9bb0;font-size:10px;">(default)</span></label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-shift_time" checked onchange="msrPreviewRowCount()"> Shift Time <span style="color:#8a9bb0;font-size:10px;">(default)</span></label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-schedule" checked onchange="msrPreviewRowCount()"> Schedule <span style="color:#8a9bb0;font-size:10px;">(default)</span></label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-status" checked onchange="msrPreviewRowCount()"> Status <span style="color:#8a9bb0;font-size:10px;">(default)</span></label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-days_overdue" checked onchange="msrPreviewRowCount()"> Days Overdue <span style="color:#8a9bb0;font-size:10px;">(default)</span></label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-contractor" onchange="msrPreviewRowCount()"> Contractor (yes/no)</label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-covered_by" onchange="msrPreviewRowCount()"> Sub-tech who covered</label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-expected_site" onchange="msrPreviewRowCount()"> Expected job_site (Camelo)</label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-mapped_site" onchange="msrPreviewRowCount()"> Mapped client_sites name</label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-camelo_shift_id" onchange="msrPreviewRowCount()"> camelo_shift_id</label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-tech_email" onchange="msrPreviewRowCount()"> Tech email</label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-submitted_at" onchange="msrPreviewRowCount()"> Submitted at</label>
                <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#1a2d4a;cursor:pointer;font-family:Arial,sans-serif;"><input type="checkbox" id="msr-col-submitted_by" onchange="msrPreviewRowCount()"> Submitted by user_id</label>
              </div>
            </details>

            <div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #e3ecf6;padding-top:12px;">
              <div>
                <div id="msr-rowcount" style="font-size:13px;color:#1a2d4a;font-weight:600;font-family:monospace;"></div>
                <div id="msr-status" style="font-size:11px;color:#d94f4f;font-family:monospace;margin-top:4px;min-height:1em;"></div>
              </div>
              <div style="display:flex;gap:8px;flex-wrap:wrap;">
                <button id="msr-dl-csv" class="btn btn-p btn-sm" type="button" onclick="downloadMissingSubmissionsCSV()">Download CSV</button>
                <button id="msr-dl-pdf" class="btn btn-p btn-sm" type="button" onclick="downloadMissingSubmissionsPDF()">Download PDF</button>
              </div>
            </div>
          </div>
        </div>

        <div class="admin-section" id="asec-config">
          <div class="asec-hdr">
            <div><div class="asec-title">Settings</div><div class="asec-sub">Database, password and submission requirements</div></div>
          </div>
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="db-body" onclick="toggleSettingsSection('db-body','db-chev')">
              <div style="display:flex;align-items:center;gap:10px;">
                <div class="acard-title" style="margin-bottom:0;">Database Connection (Supabase)</div>
                <div class="db-status" style="margin:0;"><span class="db-dot" id="db-dot"></span><span id="db-lbl" style="font-size:10px;">Not configured</span></div>
              </div>
              <span id="db-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="db-body" style="display:none;margin-top:12px;">
              <div class="frow"><label for="cfg-sb-url">Project URL</label><input type="text" id="cfg-sb-url" placeholder="https://xxxx.supabase.co" autocomplete="off" data-lpignore="true"></div>
              <div class="frow"><label for="cfg-sb-key">Anon / Publishable Key</label><input type="text" id="cfg-sb-key" placeholder="sb_publishable_..." autocomplete="off" data-lpignore="true"></div>
              <button class="btn btn-p btn-sm" onclick="saveDbCfg()">Save &amp; Test Connection</button>
            </div>
          </div>
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="npr-body" onclick="toggleSettingsSection('npr-body','npr-chev')">
              <div class="acard-title" style="margin-bottom:0;">No Patients Reasons
                <span id="npr-count" style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">0</span>
              </div>
              <span id="npr-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="npr-body" style="display:none;margin-top:12px;">
              <ul class="sc-list" id="npr-list" style="max-height:200px;margin-bottom:10px;"></ul>
              <div class="sc-row">
                <input class="sc-inp" id="npr-inp" placeholder="Reason text" onkeydown="if(event.key==='Enter')addNpReason()">
                <button class="btn btn-p btn-sm" onclick="addNpReason()">Add</button>
              </div>
            </div>
          </div>

          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="studies-body" onclick="toggleSettingsSection('studies-body','studies-chev')">
              <div class="acard-title" style="margin-bottom:0;">
                Study Types
                <span id="study-count" style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">0 saved</span>
              </div>
              <span id="studies-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="studies-body" style="display:none;margin-top:12px;">
              <div id="study-list-wrap" style="margin-bottom:12px;"></div>
              <div style="background:#f8fbff;border:1px solid #c8d8ee;border-radius:6px;padding:12px 14px;">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:monospace;color:#1a5faa;margin-bottom:10px;">Add New Study Type</div>
                <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;">
                  <div class="hf"><label>Code</label><input class="sc-inp" id="st-code" placeholder="e.g. EMG" style="width:90px;text-transform:uppercase;" oninput="this.value=this.value.toUpperCase()"></div>
                  <div class="hf"><label>Description</label><input class="sc-inp" id="st-desc" placeholder="e.g. Electromyography" style="width:220px;"></div>
                  <button class="btn btn-p btn-sm" onclick="addStudyType()">Add</button>
                </div>
                <div style="display:flex;gap:20px;margin-top:8px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;font-family:Arial,sans-serif;color:#1a2d4a;"><input type="checkbox" id="st-no-ext"> Skip extremity selection</label>
                  <label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;font-family:Arial,sans-serif;color:#1a2d4a;"><input type="checkbox" id="st-count-one"> Count as 1 study (ignore bilateral multiplier)</label>
                </div>
              </div>
              <div style="margin-top:8px;font-family:monospace;font-size:10px;color:#8a9bb0;line-height:1.6;">Code is what appears in the dropdown. Description appears in the print legend.</div>
            </div>
          </div>

          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="study-rates-body" onclick="toggleSettingsSection('study-rates-body','study-rates-chev');if(document.getElementById('study-rates-body').style.display!=='none')loadAndRenderStudyTypeRates();">
              <div class="acard-title" style="margin-bottom:0;">
                Study Type Rates
              </div>
              <span id="study-rates-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="study-rates-body" style="display:none;margin-top:12px;">
              <div class="ibox" style="margin-bottom:12px;">Global CMS RVU and Medicare fee schedule baseline reimbursement values. Used by revenue estimation features. Source: CMS Medicare Physician Fee Schedule.</div>
              <div id="str-list-wrap" style="margin-bottom:12px;"></div>
            </div>
          </div>

          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="rpt-status-body" onclick="toggleSettingsSection('rpt-status-body','rpt-status-chev');if(document.getElementById('rpt-status-body').style.display!=='none')loadReportStatuses();">
              <div class="acard-title" style="margin-bottom:0;">
                Report Status Options
                <span id="rpt-status-count" style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">0 saved</span>
              </div>
              <span id="rpt-status-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="rpt-status-body" style="display:none;margin-top:12px;">
              <div id="rpt-status-list-wrap" style="margin-bottom:12px;"></div>
              <div style="background:#f8fbff;border:1px solid #c8d8ee;border-radius:6px;padding:12px 14px;">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:monospace;color:#1a5faa;margin-bottom:10px;">Add New Status Option</div>
                <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;">
                  <div class="hf"><label>Label</label><input class="sc-inp" id="rpt-status-inp" placeholder="e.g. Report uploaded" style="width:240px;" onkeydown="if(event.key==='Enter')addReportStatus()"></div>
                  <button class="btn btn-p btn-sm" onclick="addReportStatus()">Save</button>
                </div>
              </div>
            </div>
          </div>

          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="req-body" onclick="toggleSettingsSection('req-body','req-chev')">
              <div class="acard-title" style="margin-bottom:0;">Required Fields for Submission</div>
              <span id="req-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="req-body" style="display:none;margin-top:12px;">
              <div id="req-sync-status" style="font-family:monospace;font-size:10px;color:#8a9bb0;margin-bottom:8px;"></div>
              <div class="ibox" style="margin-bottom:12px;">These fields must be filled in before a tech can submit.</div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:14px;">
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-office"> Office / Location</label>
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-md"> Physician (M.D.)</label>
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-machine"> Machine</label>
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-date"> Date</label>
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-timein"> Time In</label>
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-timeout"> Time Out</label>
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-patients"> At least 1 patient</label>
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"><input type="checkbox" id="req-study"> Study type per patient</label>
              </div>
              <button class="btn btn-p btn-sm" onclick="saveRequiredFields()">Save Requirements</button>
            </div>
          </div>

          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="app-images-body" onclick="toggleSettingsSection('app-images-body','app-images-chev');if(document.getElementById('app-images-body').style.display!=='none')renderAppImagesSection();">
              <div class="acard-title" style="margin-bottom:0;">App Images &amp; Branding</div>
              <span id="app-images-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="app-images-body" style="display:none;margin-top:12px;">
              <div class="ibox" style="margin-bottom:12px;">Upload custom images for the login page, app header, print layout, and summary modal. PNG or JPG recommended. Max 5 MB per image.</div>
              <!-- Cards injected by renderAppImagesSection() -->
            </div>
          </div>

          <!-- ── 14.2: Camelo User Mapping ── -->
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="settings-camelo-map-body" onclick="toggleSettingsSection('settings-camelo-map-body','settings-camelo-map-chev');if(document.getElementById('settings-camelo-map-body').style.display!=='none')loadSettingsCameloMap();">
              <div class="acard-title" style="margin-bottom:0;">Camelo User Mapping <span style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">Link Camelo employees to NWN users</span></div>
              <span id="settings-camelo-map-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="settings-camelo-map-body" style="display:none;margin-top:12px;">
              <div class="ibox" style="margin-bottom:12px;">Map each Camelo employee to their NWN user account. This enables punch verification and compliance tracking. Camelo data must be synced first via the Time Verification panel.</div>
              <div id="settings-camelo-map-list" style="margin-bottom:12px;border:1px solid #c8d8ee;border-radius:8px;overflow:hidden;min-height:40px;"></div>
              <div style="display:flex;gap:10px;align-items:center;">
                <button class="btn btn-p btn-sm" onclick="tvSaveMappings(true);loadSettingsCameloMap();">Save Mappings</button>
                <span id="settings-camelo-map-status" style="font-family:monospace;font-size:11px;color:#22b573;"></span>
              </div>
            </div>
          </div>

          <!-- ── 14.3 + 14.4: Add New User from Settings ── -->
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="settings-add-user-body" onclick="toggleSettingsSection('settings-add-user-body','settings-add-user-chev');if(document.getElementById('settings-add-user-body').style.display!=='none')renderSettingsLists();">
              <div class="acard-title" style="margin-bottom:0;">Add New User</div>
              <span id="settings-add-user-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="settings-add-user-body" style="display:none;margin-top:12px;">
              <div class="ibox" style="margin-bottom:14px;">Create a new user account. The system will generate a 6-digit temporary PIN, email it to the user, and show it once to you in a confirmation dialog. The user will be required to set their own password on first login.</div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;">
                <div class="hf"><label>Username</label><input class="sc-inp" id="tp-username" placeholder="e.g. ojohnson" autocomplete="off"><div class="nwn-contacts-list__field-error" id="tp-username-err" role="alert"></div></div>
                <div class="hf"><label>First Name</label><input class="sc-inp" id="tp-first" placeholder="First name"></div>
                <div class="hf"><label>Last Name</label><input class="sc-inp" id="tp-last" placeholder="Last name"></div>
                <div class="hf"><label>Email <span style="color:#c33;">*</span></label><input class="sc-inp" id="tp-email" type="email" placeholder="email@example.com" required></div>
                <div class="hf"><label>Phone</label><input class="sc-inp" id="tp-phone" placeholder="(xxx) xxx-xxxx" maxlength="14"></div>
                <div class="hf"><label>Employee ID</label><input class="sc-inp" id="tp-empid" placeholder="e.g. NWN001"></div>
                <div class="hf"><label>Title</label><input class="sc-inp" id="tp-title" placeholder="e.g. Lead Technologist"></div>
                <div class="hf"><label>Role</label>
                  <select class="sc-inp" id="tp-role">
                    <option value="tech">Tech</option>
                    <option value="supervisor">Supervisor</option>
                    <option value="admin">Admin</option>
                    <option value="client">Client</option>
                    <option value="contractor">Contractor</option>
                  </select>
                </div>
                <div class="hf"><label>Assigned Machine</label>
                  <select class="sc-inp" id="tp-machine"></select>
                </div>
                <div class="hf"><label>Reports To <span style="font-size:10px;color:#8a9bb0;font-weight:400;">(supervisor or contractor)</span></label>
                  <select class="sc-inp" id="tp-reports-to">
                    <option value="">-- None --</option>
                  </select>
                  <div class="nwn-contacts-list__field-error" id="tp-reports-to-err" role="alert"></div>
                </div>
                <div class="hf"><label>Assigned Clients <span style="font-size:10px;color:#8a9bb0;font-weight:400;">(client role only)</span></label>
                  <select class="sc-inp" id="tp-clients" multiple style="height:72px;"></select>
                </div>
              </div>
              <button class="btn btn-p btn-sm" onclick="addTech()">Add User</button>
              <p style="font-family:monospace;font-size:10px;color:#8a9bb0;margin-top:8px;line-height:1.6;">Hold Ctrl/Cmd to select multiple clients. Clients field only applies to Client role. Reports To links this user to a supervisor or contractor record.</p>
            </div>
          </div>

          <!-- ── 14.5: Contractor Logsheet Deadline Reminders ── -->
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="settings-deadline-body" onclick="toggleSettingsSection('settings-deadline-body','settings-deadline-chev');if(document.getElementById('settings-deadline-body').style.display!=='none')renderDeadlineReminderSettings();">
              <div class="acard-title" style="margin-bottom:0;">Deadline Reminders <span style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">Automated emails to contractors</span></div>
              <span id="settings-deadline-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="settings-deadline-body" style="display:none;margin-top:12px;">
              <div id="email-deadline-settings"></div>
            </div>
          </div>

          <!-- ── 14.6: End-of-Day Admin Summary Email ── -->
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="settings-daily-body" onclick="toggleSettingsSection('settings-daily-body','settings-daily-chev');if(document.getElementById('settings-daily-body').style.display!=='none')renderDailySummarySettings();">
              <div class="acard-title" style="margin-bottom:0;">Daily Summary Email <span style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">Nightly report to admins &amp; supervisors</span></div>
              <span id="settings-daily-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="settings-daily-body" style="display:none;margin-top:12px;">
              <div id="email-daily-settings"></div>
            </div>
          </div>

          <!-- ── 14.8: App Config (Google Places API key) ── -->
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="settings-app-config-body" onclick="toggleSettingsSection('settings-app-config-body','settings-app-config-chev');">
              <div class="acard-title" style="margin-bottom:0;">App Config <span style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">API keys and integrations</span></div>
              <span id="settings-app-config-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="settings-app-config-body" style="display:none;margin-top:12px;">
              <div class="ibox" style="margin-bottom:14px;">Configure third-party API keys used by the app. Changes take effect after saving.</div>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <div class="hf">
                  <label>Google Places API Key <span style="font-size:10px;color:#8a9bb0;font-weight:400;">(enables address autocomplete when adding client sites)</span></label>
                  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                    <input class="sc-inp" id="cfg-places-key" type="text" placeholder="AIza..." style="width:340px;font-family:monospace;font-size:12px;" autocomplete="off">
                    <button class="btn btn-p btn-sm" onclick="savePlacesApiKey(document.getElementById('cfg-places-key').value.trim())">Save</button>
                  </div>
                  <p style="font-family:monospace;font-size:10px;color:#8a9bb0;margin-top:6px;line-height:1.6;">If no key is set, the office field works as a plain text input. Get a key from <a href="https://console.cloud.google.com/" target="_blank" style="color:#1a5faa;">Google Cloud Console</a> with <strong>Places API (New)</strong> enabled (not the legacy Places API).</p>
                </div>
              </div>
            </div>
          </div>

          <!-- ── 14.9: Quick Links Customization ── -->
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="settings-ql-body" onclick="toggleSettingsSection('settings-ql-body','settings-ql-chev');if(document.getElementById('settings-ql-body').style.display!=='none')renderQuickLinksSettings();">
              <div class="acard-title" style="margin-bottom:0;">Quick Links <span style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">Customize your top navigation bar</span></div>
              <span id="settings-ql-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="settings-ql-body" style="display:none;margin-top:12px;">
              <div id="ql-settings-wrap"></div>
            </div>
          </div>

          <!-- ── 14.10: Google Calendar Sync ── -->
          <div class="acard" style="margin-bottom:14px;">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="settings-gcal-body" onclick="toggleSettingsSection('settings-gcal-body','settings-gcal-chev');if(document.getElementById('settings-gcal-body').style.display!=='none')renderGCalSettings();">
              <div class="acard-title" style="margin-bottom:0;">Google Calendar Sync <span style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">Detect calendar invitations not yet scheduled in Camelo</span></div>
              <span id="settings-gcal-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="settings-gcal-body" style="display:none;margin-top:12px;">
              <div id="gcal-sync-settings"></div>
            </div>
          </div>

          <!-- Supervisor Section Access -->
          <div class="acard" style="margin-bottom:14px;" id="settings-section-access-card">
            <button class="collapsible-hdr" type="button" aria-expanded="false" aria-controls="section-access-body" onclick="toggleSettingsSection('section-access-body','section-access-chev');if(document.getElementById('section-access-body').style.display!=='none')renderSectionAccessConfig();">
              <div class="acard-title" style="margin-bottom:0;">Supervisor Section Access <span style="font-size:10px;color:#8a9bb0;font-weight:400;letter-spacing:0;margin-left:8px;">Control which admin sections each supervisor can view</span></div>
              <span id="section-access-chev" class="collapsible-chev">&#9654;</span>
            </button>
            <div id="section-access-body" style="display:none;margin-top:12px;">
              <div class="ibox" style="margin-bottom:12px;">Select which admin panel sections each supervisor can access. Supervisors with at least one section enabled will see an Admin Panel tab when they log in. Sections marked as admin-only (Technicians, Clients, Settings) are never available to supervisors.</div>
              <div id="section-access-inner" style="font-family:monospace;font-size:12px;">Loading...</div>
            </div>
          </div>
        </div>

        <!-- ══════════ MACHINE SETTINGS SECTION (CR.17 Phase 2.5) ══════════ -->
        <!-- Lifted out of Settings panel and promoted to its own panel under
             Inventory. Internal IDs (machines-body, fleet-overview-wrap,
             mach-list, mi-show-*, mach-inp) preserved so existing render
             functions (renderMachineInventoryList / renderFleetOverview) work
             unchanged. machines-body is now always-visible (display:block) —
             the old collapsible chevron was a Settings-card affordance and is
             not needed at panel level. -->
        <div class="admin-section" id="asec-machines">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Machine Settings</div>
              <div class="asec-sub">Fleet overview and per-machine settings</div>
            </div>
          </div>
          <div class="acard" style="margin-bottom:14px;">
            <div id="machines-body" style="margin-top:0;">
              <div id="fleet-overview-wrap" style="margin-bottom:14px;"></div>
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px;flex-wrap:wrap;">
                <div style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Per-machine settings</div>
                <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:6px;font-size:11px;font-family:monospace;color:#8a9bb0;cursor:pointer;">
                    <input type="checkbox" id="mi-show-facility" onchange="renderMachineInventoryList()"> Show facility equipment
                  </label>
                  <label style="display:flex;align-items:center;gap:6px;font-size:11px;font-family:monospace;color:#8a9bb0;cursor:pointer;">
                    <input type="checkbox" id="mi-show-retired" onchange="renderMachineInventoryList()"> Show retired
                  </label>
                </div>
              </div>
              <ul class="mi-list" id="mach-list"></ul>
              <div class="sc-row" style="margin-top:4px;">
                <input class="sc-inp" id="mach-inp" placeholder="Unit ID or name" aria-label="New machine name" onkeydown="if(event.key===&apos;Enter&apos;)addListItem(&apos;machs&apos;,&apos;mach-inp&apos;)">
                <button class="btn btn-p btn-sm" onclick="addListItem('machs','mach-inp')">Add Machine</button>
              </div>
            </div>
          </div>
        </div>
        <!-- ══════════ END MACHINE SETTINGS ══════════ -->

        <!-- ══════════ COMPLIANCE SECTION (v11) ══════════ -->
        <div class="admin-section" id="asec-compliance">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Tech Compliance</div>
              <div class="asec-sub">Day sheet submission accountability</div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
              <button class="btn btn-o btn-sm" onclick="exportComplianceCSV()">&#8595; Export CSV</button>
              <button class="btn btn-p btn-sm" onclick="loadComplianceData()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Period Selector -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;" id="comp-period-btns">
                <button class="cd-period-btn" onclick="setCompPeriod('7d',this)">Last 7 Days</button>
                <button class="cd-period-btn active" onclick="setCompPeriod('30d',this)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setCompPeriod('thismonth',this)">This Month</button>
                <button class="cd-period-btn" onclick="setCompPeriod('lastmonth',this)">Last Month</button>
                <button class="cd-period-btn" onclick="setCompPeriod('thisquarter',this)">This Quarter</button>
                <button class="cd-period-btn" onclick="setCompPeriod('thisyear',this)">This Year</button>
                <button class="cd-period-btn" onclick="setCompPeriod('custom',this)">Custom</button>
              </div>
              <div id="comp-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" id="comp-from" class="adm-date-inp" onchange="loadComplianceData()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" id="comp-to" class="adm-date-inp" onchange="loadComplianceData()">
              </div>
            </div>
          </div>

          <!-- Critical Alerts Bar (Section 6) -->
          <div id="comp-alerts-bar" class="comp-alerts-bar"></div>

          <!-- Loading skeleton -->
          <div id="comp-loading" style="display:none;">
            <div class="comp-snapshot">
              <div class="comp-snap-card"><div class="comp-skeleton comp-sk-card"></div></div>
              <div class="comp-snap-card"><div class="comp-skeleton comp-sk-card"></div></div>
              <div class="comp-snap-card"><div class="comp-skeleton comp-sk-card"></div></div>
              <div class="comp-snap-card"><div class="comp-skeleton comp-sk-card"></div></div>
            </div>
            <div class="comp-skeleton comp-sk-table" style="margin-bottom:16px;"></div>
            <div class="comp-skeleton comp-sk-table"></div>
          </div>

          <div id="comp-content" style="display:none;">

            <!-- Section 1A: Today's Compliance Snapshot -->
            <div class="comp-snapshot" id="comp-snap-cards"></div>

            <div class="comp-section open" id="comp-sec-today">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="comp-sec-today-body" onclick="toggleCompSection('comp-sec-today')">
                <h3>Today's Submissions <span id="comp-today-count" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="comp-sec-today-body">
                <div id="comp-today-table" style="overflow-x:auto;"></div>
              </div>
            </div>

            <!-- Section 1B: Rolling Compliance Report -->
            <div class="comp-section open" id="comp-sec-30day">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="comp-sec-30day-body" onclick="toggleCompSection('comp-sec-30day')">
                <h3><span id="comp-period-label">30-Day</span> Compliance Report</h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="comp-sec-30day-body">
                <div id="comp-30day-chart" style="margin-bottom:16px;"></div>
                <div id="comp-30day-table" style="overflow-x:auto;"></div>
              </div>
            </div>

            <!-- Section 1C: Compliance Alerts Detail -->
            <div class="comp-section" id="comp-sec-alerts">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="comp-sec-alerts-body" onclick="toggleCompSection('comp-sec-alerts')">
                <h3>Compliance Alerts <span id="comp-alert-count" class="anav-badge red" style="display:none;">0</span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="comp-sec-alerts-body">
                <div id="comp-alerts-detail"></div>
              </div>
            </div>

          </div>
        </div>
        <!-- ══════════ END COMPLIANCE ══════════ -->

        <!-- ══════════ EQUIPMENT SECTION (v12) ══════════ -->
        <div class="admin-section" id="asec-equipment">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Equipment Utilization</div>
              <div class="asec-sub">Machine usage, site assignments, and idle tracking</div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
              <button class="btn btn-o btn-sm" onclick="exportEquipmentCSV()">&#8595; Export CSV</button>
              <button class="btn btn-p btn-sm" onclick="loadEquipmentData()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Period Selector -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;" id="equip-period-btns">
                <button class="cd-period-btn" onclick="setEquipPeriod('30d',this)">Last 30 Days</button>
                <button class="cd-period-btn active" onclick="setEquipPeriod('90d',this)">Last 90 Days</button>
                <button class="cd-period-btn" onclick="setEquipPeriod('thisyear',this)">This Year</button>
                <button class="cd-period-btn" onclick="setEquipPeriod('all',this)">All Time</button>
              </div>
            </div>
          </div>

          <!-- Loading skeleton -->
          <div id="equip-loading" style="display:none;">
            <div class="equip-skeleton equip-sk-table"></div>
            <div class="equip-skeleton equip-sk-table"></div>
          </div>

          <div id="equip-content" style="display:none;">
            <!-- 3A: Machine Usage Table -->
            <div class="comp-section open" id="equip-sec-usage">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="equip-sec-usage-body" onclick="toggleCompSection('equip-sec-usage')">
                <h3>Machine Usage <span id="equip-machine-count" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="equip-sec-usage-body">
                <div id="equip-usage-table" style="overflow-x:auto;"></div>
              </div>
            </div>

            <!-- 3B: Machine-Site Matrix -->
            <div class="comp-section open" id="equip-sec-matrix">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="equip-sec-matrix-body" onclick="toggleCompSection('equip-sec-matrix')">
                <h3>Machine-Site Matrix</h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="equip-sec-matrix-body">
                <div style="font-size:11px;color:#8a9bb0;font-family:monospace;margin-bottom:10px;">Rows = machines, columns = sites. Cell values = number of day sheets. Darker = more frequent.</div>
                <div id="equip-matrix" class="matrix-wrap"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- ══════════ END EQUIPMENT ══════════ -->

        <!-- ══════════ SUPPLIES SECTION ══════════ -->
        <div class="admin-section" id="asec-supplies">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Supplies Inventory</div>
              <div class="asec-sub">Consumable supply tracking, stock levels, and distribution</div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
              <button class="btn btn-p btn-sm" onclick="openAddSupplyItemModal()">+ Add Item</button>
              <button class="btn btn-o btn-sm" onclick="renderSuppliesSection()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Search + Category Filter -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <input class="sc-inp" id="supply-search" placeholder="Search items..." oninput="searchSupplyItems()" style="width:200px;font-size:12px;">
              <div style="display:flex;gap:6px;flex-wrap:wrap;" id="supply-cat-filters">
                <button class="cd-period-btn active" onclick="filterSupplyCategory('All',this)">All</button>
                <button class="cd-period-btn" onclick="filterSupplyCategory('Electrodes',this)">Electrodes</button>
                <button class="cd-period-btn" onclick="filterSupplyCategory('Gel',this)">Gel</button>
                <button class="cd-period-btn" onclick="filterSupplyCategory('Tape',this)">Tape</button>
                <button class="cd-period-btn" onclick="filterSupplyCategory('Needles',this)">Needles</button>
                <button class="cd-period-btn" onclick="filterSupplyCategory('PPE',this)">PPE</button>
                <button class="cd-period-btn" onclick="filterSupplyCategory('Other',this)">Other</button>
              </div>
            </div>
          </div>

          <!-- ── Reorder Alerts ── -->
          <div class="comp-section open" id="supply-sec-reorder">
            <button class="comp-section-hdr" type="button" aria-expanded="true" aria-controls="supply-sec-reorder-body" onclick="toggleCompSection('supply-sec-reorder')">
              <h3>Reorder Alerts <span id="supply-reorder-badge" style="display:inline-block;background:#c0392b;color:#fff;font-size:10px;font-family:monospace;padding:1px 7px;border-radius:10px;margin-left:6px;vertical-align:middle;"></span></h3>
              <span class="chev">&#9660;</span>
            </button>
            <div class="comp-section-body" id="supply-sec-reorder-body">
              <div id="supply-reorder-list"></div>
            </div>
          </div>

          <!-- ── Usage Reports ── -->
          <div class="comp-section" id="supply-sec-reports">
            <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="supply-sec-reports-body" onclick="toggleCompSection('supply-sec-reports')">
              <h3>Usage Reports</h3>
              <span class="chev">&#9660;</span>
            </button>
            <div class="comp-section-body" id="supply-sec-reports-body">
              <!-- Report type toggle -->
              <div style="display:flex;gap:6px;margin-bottom:12px;" id="supply-report-tabs">
                <button class="cd-period-btn active" id="supply-rpt-tab-tech" onclick="switchSupplyReportTab('tech',this)">By Tech</button>
                <button class="cd-period-btn" id="supply-rpt-tab-item" onclick="switchSupplyReportTab('item',this)">By Item (Cost)</button>
              </div>
              <!-- Shared date range controls -->
              <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;">
                <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">From:</span>
                <input type="date" id="supply-rpt-from" class="adm-date-inp">
                <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">To:</span>
                <input type="date" id="supply-rpt-to" class="adm-date-inp">
                <button class="btn btn-p btn-sm" onclick="generateSupplyReport()">Generate</button>
              </div>
              <!-- Report output -->
              <div id="supply-report-output">
                <p style="font-family:monospace;font-size:12px;color:#8a9bb0;font-style:italic;padding:8px 0;">Select a date range and click Generate.</p>
              </div>
            </div>
          </div>

          <!-- Items Table -->
          <div class="acard" style="margin-bottom:14px;">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
              <div style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Items <span id="supply-item-count" style="font-weight:400;"></span></div>
            </div>
            <div id="supply-items-list"></div>
          </div>

          <!-- Locations -->
          <div class="comp-section" id="supply-sec-locations">
            <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="supply-sec-locations-body" onclick="toggleCompSection('supply-sec-locations')">
              <h3>Locations <span id="supply-loc-count" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
              <span class="chev">&#9660;</span>
            </button>
            <div class="comp-section-body" id="supply-sec-locations-body">
              <div style="display:flex;justify-content:flex-end;margin-bottom:8px;">
                <button class="btn btn-o btn-sm" onclick="openAddLocationModal()">+ Add Location</button>
              </div>
              <div id="supply-locations-list"></div>
            </div>
          </div>

          <!-- Vendors -->
          <div class="comp-section" id="supply-sec-vendors">
            <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="supply-sec-vendors-body" onclick="toggleCompSection('supply-sec-vendors')">
              <h3>Vendors <span id="supply-vendor-count" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
              <span class="chev">&#9660;</span>
            </button>
            <div class="comp-section-body" id="supply-sec-vendors-body">
              <div style="display:flex;justify-content:flex-end;margin-bottom:8px;">
                <button class="btn btn-o btn-sm" onclick="openAddVendorModal()">+ Add Vendor</button>
              </div>
              <div id="supply-vendors-list"></div>
            </div>
          </div>

          <!-- Recent Activity -->
          <div class="comp-section" id="supply-sec-txns">
            <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="supply-sec-txns-body" onclick="toggleCompSection('supply-sec-txns')">
              <h3>Recent Activity</h3>
              <span class="chev">&#9660;</span>
            </button>
            <div class="comp-section-body" id="supply-sec-txns-body">
              <div id="supply-txn-list"></div>
            </div>
          </div>
        </div>
        <!-- ══════════ END SUPPLIES ══════════ -->

        <!-- ══════════ TEAM OVERVIEW SECTION (v12) ══════════ -->
        <div class="admin-section" id="asec-team">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Team Overview</div>
              <div class="asec-sub">Workforce management, weekly digest, and historical trends</div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
              <button class="btn btn-p btn-sm" onclick="loadTeamData()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Loading skeleton -->
          <div id="team-loading" style="display:none;">
            <div class="team-skeleton team-sk-table"></div>
            <div class="team-skeleton team-sk-card" style="margin-bottom:16px;"></div>
            <div class="team-skeleton team-sk-table"></div>
          </div>

          <div id="team-content" style="display:none;">

            <!-- 5B: Weekly Digest (first — the "one screen" view) -->
            <div class="comp-section open" id="team-sec-digest">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="team-sec-digest-body" onclick="toggleCompSection('team-sec-digest')">
                <h3>&#128200; Weekly Digest <span style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;">(Last 7 days)</span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="team-sec-digest-body">
                <div id="team-digest"></div>
              </div>
            </div>

            <!-- 5A: Team Compliance Leaderboard -->
            <div class="comp-section open" id="team-sec-leaderboard">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="team-sec-leaderboard-body" onclick="toggleCompSection('team-sec-leaderboard')">
                <h3>&#127942; Compliance Leaderboard <span id="team-lb-period" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="team-sec-leaderboard-body">
                <div id="team-leaderboard" style="overflow-x:auto;"></div>
              </div>
            </div>

            <!-- 5C: Historical Compliance Trend -->
            <div class="comp-section open" id="team-sec-trend">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="team-sec-trend-body" onclick="toggleCompSection('team-sec-trend')">
                <h3>&#128200; Historical Compliance Trend <span style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;">(26 weeks)</span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="team-sec-trend-body">
                <div id="team-trend-chart"></div>
              </div>
            </div>

          </div>
        </div>
        <!-- ══════════ END TEAM OVERVIEW ══════════ -->

        <!-- ══════════ TIME VERIFICATION (Camelo) ══════════ -->
        <div class="admin-section" id="asec-timeverify">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Time Verification</div>
              <div class="asec-sub">Compare Camelo clock punches against day sheet self-reported times</div>
            </div>
            <div class="tv-sync-bar">
              <button class="btn btn-p btn-sm" id="tv-sync-btn" onclick="tvSyncNow()">&#8635; Sync Now</button>
              <span class="tv-sync-status" id="tv-sync-status"></span>
            </div>
          </div>

          <!-- Status Legend -->
          <div class="tv-legend-bar">
            <span style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8a9bb0;font-weight:600;">Legend:</span>
            <span class="tv-legend-item"><span class="tv-legend-dot green"></span><span class="tv-legend-label">&#10003; Match</span><span class="tv-legend-desc">&le; 5 min</span></span>
            <span class="tv-legend-item"><span class="tv-legend-dot yellow"></span><span class="tv-legend-label">&#9888; Minor</span><span class="tv-legend-desc">5&ndash;15 min or geo warning</span></span>
            <span class="tv-legend-item"><span class="tv-legend-dot red"></span><span class="tv-legend-label">&#10007; Mismatch</span><span class="tv-legend-desc">&gt; 15 min</span></span>
            <span class="tv-legend-item"><span class="tv-legend-dot red"></span><span class="tv-legend-label">&#10007; No Punch</span><span class="tv-legend-desc">no Camelo clock found</span></span>
            <span class="tv-legend-item"><span class="tv-legend-dot gray"></span><span class="tv-legend-label">&mdash; Not Mapped</span><span class="tv-legend-desc">tech not linked</span></span>
          </div>

          <!-- Period selector -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;">
                <button class="cd-period-btn active" onclick="setPeriod('7d',this,'tv-from','tv-to','tv-custom-range',loadTimeVerification)">Last 7 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('30d',this,'tv-from','tv-to','tv-custom-range',loadTimeVerification)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('thismonth',this,'tv-from','tv-to','tv-custom-range',loadTimeVerification)">This Month</button>
                <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'tv-from','tv-to','tv-custom-range',loadTimeVerification)">Last Month</button>
                <button class="cd-period-btn" onclick="setPeriod('custom',this,'tv-from','tv-to','tv-custom-range',loadTimeVerification)">Custom</button>
              </div>
              <div id="tv-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" id="tv-from" class="adm-date-inp" onchange="loadTimeVerification()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" id="tv-to" class="adm-date-inp" onchange="loadTimeVerification()">
              </div>
            </div>
          </div>

          <!-- Loading -->
          <div id="tv-loading" style="display:none;">
            <div class="comp-skeleton comp-sk-card" style="margin-bottom:16px;"></div>
            <div class="comp-skeleton comp-sk-table"></div>
          </div>

          <div id="tv-content" style="display:none;">

            <!-- Summary metrics -->
            <div class="tv-summary-grid" id="tv-summary"></div>

            <!-- Alerts bar for discrepancies -->
            <div id="tv-alerts-bar" class="comp-alerts-bar" style="display:none;"></div>

            <!-- User Mapping Section -->
            <div class="comp-section" id="tv-sec-mapping">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="tv-sec-mapping-body" onclick="toggleCompSection('tv-sec-mapping')">
                <h3>&#128279; User Mapping <span style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;">Link Camelo employees to NWN techs</span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="tv-sec-mapping-body">
                <div id="tv-mapping-list" style="margin-bottom:12px;"></div>
                <div style="display:flex;gap:8px;align-items:center;">
                  <button class="btn btn-p btn-sm" onclick="tvSaveMappings()">Save Mappings</button>
                  <span id="tv-map-status" style="font-family:monospace;font-size:11px;color:#22b573;"></span>
                </div>
              </div>
            </div>

            <!-- Verification Table -->
            <div class="comp-section open" id="tv-sec-table">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="tv-sec-table-body" onclick="toggleCompSection('tv-sec-table')">
                <h3>&#128337; Verification Details <span id="tv-count-label" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="tv-sec-table-body">
                <div style="position:relative;margin-bottom:10px;">
                  <input type="text" id="tv-search" placeholder="Search tech, date, status..." oninput="filterTvTable(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterTvTable('');}" style="width:100%;background:#f4f8fd;border:1px solid #c8d8ee;border-radius:6px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:13px;padding:9px 34px 9px 12px;outline:none;box-sizing:border-box;transition:border-color .2s;" onfocus="this.style.borderColor='#1a5faa';this.style.background='#fff'" onblur="this.style.borderColor='#c8d8ee';this.style.background='#f4f8fd'">
                  <button onclick="document.getElementById('tv-search').value='';filterTvTable('');" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a9bb0;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px;" title="Clear search">&times;</button>
                </div>
                <div style="overflow-x:auto;" id="tv-table-wrap"></div>
              </div>
            </div>

          </div>
        </div>
        <!-- ══════════ END TIME VERIFICATION ══════════ -->

        <!-- ══════════ ARRIVAL TIME ANALYSIS (Task 5.8) ══════════ -->
        <div class="admin-section" id="asec-arrival">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Arrival Time Analysis</div>
              <div class="asec-sub">Camelo scheduled shift start vs. actual clock-in punch</div>
            </div>
            <div>
              <button class="btn btn-p btn-sm" id="arr-refresh-btn" onclick="loadArrivalAnalysis()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Legend -->
          <div class="arr-legend-bar">
            <span style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8a9bb0;font-weight:600;">Legend:</span>
            <span class="arr-legend-item"><span class="arr-dot early"></span><strong>Early</strong> &lt; &minus;5 min</span>
            <span class="arr-legend-item"><span class="arr-dot ontime"></span><strong>On Time</strong> &minus;5 to +5 min</span>
            <span class="arr-legend-item"><span class="arr-dot late"></span><strong>Late</strong> 5&ndash;15 min</span>
            <span class="arr-legend-item"><span class="arr-dot very-late"></span><strong>Significantly Late</strong> &gt;15 min</span>
            <span class="arr-legend-item"><span class="arr-dot gray"></span><strong>No Data</strong> no punch or no shift</span>
          </div>

          <!-- Period selector -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;">
                <button class="cd-period-btn active" onclick="setPeriod('7d',this,'arr-from','arr-to','arr-custom-range',loadArrivalAnalysis)">Last 7 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('30d',this,'arr-from','arr-to','arr-custom-range',loadArrivalAnalysis)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('thismonth',this,'arr-from','arr-to','arr-custom-range',loadArrivalAnalysis)">This Month</button>
                <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'arr-from','arr-to','arr-custom-range',loadArrivalAnalysis)">Last Month</button>
                <button class="cd-period-btn" onclick="setPeriod('custom',this,'arr-from','arr-to','arr-custom-range',loadArrivalAnalysis)">Custom</button>
              </div>
              <div id="arr-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" id="arr-from" class="adm-date-inp" onchange="loadArrivalAnalysis()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" id="arr-to" class="adm-date-inp" onchange="loadArrivalAnalysis()">
              </div>
            </div>
          </div>

          <!-- Loading state -->
          <div id="arr-loading" style="display:none;">
            <div class="comp-skeleton comp-sk-card" style="margin-bottom:16px;"></div>
            <div class="comp-skeleton comp-sk-table"></div>
          </div>

          <!-- Content -->
          <div id="arr-content" style="display:none;">
            <!-- Summary cards -->
            <div class="arr-summary-grid" id="arr-summary-grid"></div>
            <!-- Per-tech breakdown -->
            <div class="comp-section open" id="arr-sec-tech">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="arr-sec-tech-body" onclick="toggleCompSection('arr-sec-tech')">
                <h3>&#128101; Per-Tech Breakdown <span id="arr-tech-label" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="arr-sec-tech-body">
                <div style="overflow-x:auto;" id="arr-tech-table"></div>
              </div>
            </div>
            <!-- Shift-level detail -->
            <div class="comp-section" id="arr-sec-detail">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="arr-sec-detail-body" onclick="toggleCompSection('arr-sec-detail')">
                <h3>&#128203; Shift-Level Detail <span id="arr-detail-label" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="arr-sec-detail-body">
                <div style="position:relative;margin-bottom:10px;">
                  <input type="text" id="arr-detail-search" placeholder="Search tech, date, schedule..." oninput="filterArrDetailTable(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterArrDetailTable('');}" style="width:100%;background:#f4f8fd;border:1px solid #c8d8ee;border-radius:6px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:13px;padding:9px 34px 9px 12px;outline:none;box-sizing:border-box;transition:border-color .2s;" onfocus="this.style.borderColor='#1a5faa';this.style.background='#fff'" onblur="this.style.borderColor='#c8d8ee';this.style.background='#f4f8fd'">
                  <button onclick="document.getElementById('arr-detail-search').value='';filterArrDetailTable('');" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a9bb0;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px;" title="Clear search">&times;</button>
                </div>
                <div style="overflow-x:auto;" id="arr-detail-table"></div>
              </div>
            </div>
          </div>

          <!-- Empty state -->
          <div id="arr-empty" style="display:none;padding:40px;text-align:center;">
            <div style="font-size:32px;margin-bottom:10px;">&#9654;</div>
            <div id="arr-empty-msg" style="font-family:monospace;font-size:13px;color:#8a9bb0;"></div>
          </div>
        </div>
        <!-- ══════════ END ARRIVAL TIME ANALYSIS ══════════ -->

        <!-- ══════════ ON-SITE DURATION ANALYSIS (Task 3.11/5.7) ══════════ -->
        <div class="admin-section" id="asec-duration">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">On-Site Duration Analysis</div>
              <div class="asec-sub">Total time on-site per shift: first clock-in to last clock-out</div>
            </div>
            <div>
              <button class="btn btn-p btn-sm" id="dur-refresh-btn" onclick="loadOnSiteDuration()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Legend -->
          <div class="arr-legend-bar">
            <span style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8a9bb0;font-weight:600;">Legend:</span>
            <span class="arr-legend-item"><span class="arr-dot" style="background:#22b573;"></span><strong>Normal</strong> 4&ndash;9h</span>
            <span class="arr-legend-item"><span class="arr-dot" style="background:#e8a020;"></span><strong>Short</strong> &lt;4h</span>
            <span class="arr-legend-item"><span class="arr-dot" style="background:#3a7bd5;"></span><strong>Long</strong> &gt;9h</span>
            <span class="arr-legend-item"><span class="arr-dot" style="background:#8a9bb0;"></span><strong>Incomplete</strong> IN only or OUT only</span>
            <span class="arr-legend-item"><span class="arr-dot" style="background:#d94f4f;"></span><strong>No Punch</strong> no punch data</span>
          </div>

          <!-- Period selector -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;">
                <button class="cd-period-btn active" onclick="setPeriod('7d',this,'dur-from','dur-to','dur-custom-range',loadOnSiteDuration)">Last 7 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('30d',this,'dur-from','dur-to','dur-custom-range',loadOnSiteDuration)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('thismonth',this,'dur-from','dur-to','dur-custom-range',loadOnSiteDuration)">This Month</button>
                <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'dur-from','dur-to','dur-custom-range',loadOnSiteDuration)">Last Month</button>
                <button class="cd-period-btn" onclick="setPeriod('custom',this,'dur-from','dur-to','dur-custom-range',loadOnSiteDuration)">Custom</button>
              </div>
              <div id="dur-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" id="dur-from" class="adm-date-inp" onchange="loadOnSiteDuration()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" id="dur-to" class="adm-date-inp" onchange="loadOnSiteDuration()">
              </div>
            </div>
          </div>

          <!-- Loading state -->
          <div id="dur-loading" style="display:none;">
            <div class="comp-skeleton comp-sk-card" style="margin-bottom:16px;"></div>
            <div class="comp-skeleton comp-sk-table"></div>
          </div>

          <!-- Content -->
          <div id="dur-content" style="display:none;">
            <!-- Summary cards -->
            <div class="arr-summary-grid" id="dur-summary-grid"></div>
            <!-- Per-tech breakdown -->
            <div class="comp-section open" id="dur-sec-tech">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="dur-sec-tech-body" onclick="toggleCompSection('dur-sec-tech')">
                <h3>&#128101; Per-Tech Breakdown <span id="dur-tech-label" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="dur-sec-tech-body">
                <div style="overflow-x:auto;" id="dur-tech-table"></div>
              </div>
            </div>
            <!-- Shift-level detail -->
            <div class="comp-section" id="dur-sec-detail">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="dur-sec-detail-body" onclick="toggleCompSection('dur-sec-detail')">
                <h3>&#128203; Shift-Level Detail <span id="dur-detail-label" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="dur-sec-detail-body">
                <div style="position:relative;margin-bottom:10px;">
                  <input type="text" id="dur-detail-search" placeholder="Search tech, date, site..." oninput="filterDurDetailTable(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterDurDetailTable('');}" style="width:100%;background:#f4f8fd;border:1px solid #c8d8ee;border-radius:6px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:13px;padding:9px 34px 9px 12px;outline:none;box-sizing:border-box;transition:border-color .2s;" onfocus="this.style.borderColor='#1a5faa';this.style.background='#fff'" onblur="this.style.borderColor='#c8d8ee';this.style.background='#f4f8fd'">
                  <button onclick="document.getElementById('dur-detail-search').value='';filterDurDetailTable('');" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a9bb0;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px;" title="Clear search">&times;</button>
                </div>
                <div style="overflow-x:auto;" id="dur-detail-table"></div>
              </div>
            </div>
          </div>

          <!-- Empty state -->
          <div id="dur-empty" style="display:none;padding:40px;text-align:center;">
            <div style="font-size:32px;margin-bottom:10px;">&#9201;</div>
            <div id="dur-empty-msg" style="font-family:monospace;font-size:13px;color:#8a9bb0;"></div>
          </div>
        </div>
        <!-- ══════════ END ON-SITE DURATION ANALYSIS ══════════ -->

        <!-- ══════════ AUDIT LOG (Task 1.5) ══════════ -->
        <div class="admin-section" id="asec-auditlog">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Audit Log</div>
              <div class="asec-sub">HIPAA-compliant record of all daysheet edits and submissions</div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
              <button class="btn btn-o btn-sm" onclick="exportAuditLogCSV()">&#8595; Export CSV</button>
              <button class="btn btn-p btn-sm" id="audit-refresh-btn" onclick="loadAuditLog()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- HIPAA notice -->
          <div class="audit-hipaa-notice">
            <span class="notice-icon">&#9876;</span>
            <span><strong>This log is immutable.</strong> Records cannot be modified or deleted. All daysheet create, edit, and approval events are captured here to satisfy HIPAA audit trail requirements (45 CFR &sect;164.312(b)). Admin-only view.</span>
          </div>

          <!-- Period + filter toolbar -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;">
                <button class="cd-period-btn active" onclick="setPeriod('7d',this,'audit-from','audit-to','audit-custom-range',loadAuditLog)">Last 7 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('30d',this,'audit-from','audit-to','audit-custom-range',loadAuditLog)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setPeriod('thismonth',this,'audit-from','audit-to','audit-custom-range',loadAuditLog)">This Month</button>
                <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'audit-from','audit-to','audit-custom-range',loadAuditLog)">Last Month</button>
                <button class="cd-period-btn" onclick="setPeriod('custom',this,'audit-from','audit-to','audit-custom-range',loadAuditLog)">Custom</button>
              </div>
              <div id="audit-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" id="audit-from" class="adm-date-inp" onchange="loadAuditLog()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" id="audit-to" class="adm-date-inp" onchange="loadAuditLog()">
              </div>
            </div>
          </div>

          <!-- Search + filter toolbar -->
          <div class="audit-toolbar">
            <div class="audit-search-wrap">
              <input type="text" class="audit-search" id="audit-search-inp" placeholder="Search by user, action, or record..." oninput="filterAuditLog()">
            </div>
            <select class="audit-filter-sel" id="audit-action-filter" onchange="filterAuditLog()">
              <option value="">All Actions</option>
              <option value="created">Created</option>
              <option value="updated">Updated</option>
              <option value="patient_rows_saved">Patient Rows Saved</option>
              <option value="approved">Approved</option>
              <option value="deleted">Deleted</option>
            </select>
            <select class="audit-filter-sel" id="audit-user-filter" onchange="filterAuditLog()">
              <option value="">All Users</option>
            </select>
            <span id="audit-count-lbl" style="font-family:monospace;font-size:11px;color:#8a9bb0;margin-left:auto;"></span>
          </div>

          <!-- Summary bar -->
          <div class="audit-summary-bar" id="audit-summary" style="display:none;">
            <div class="audit-summary-item"><div class="audit-summary-lbl">Total Events</div><div class="audit-summary-val" id="audit-sum-total">0</div></div>
            <div class="audit-summary-item"><div class="audit-summary-lbl">Created</div><div class="audit-summary-val" id="audit-sum-created" style="color:#107850;">0</div></div>
            <div class="audit-summary-item"><div class="audit-summary-lbl">Updated</div><div class="audit-summary-val" id="audit-sum-updated" style="color:#1a5faa;">0</div></div>
            <div class="audit-summary-item"><div class="audit-summary-lbl">Approved</div><div class="audit-summary-val" id="audit-sum-approved" style="color:#92690d;">0</div></div>
            <div class="audit-summary-item"><div class="audit-summary-lbl">Unique Users</div><div class="audit-summary-val" id="audit-sum-users" style="color:#7b2fc4;">0</div></div>
          </div>

          <!-- Loading state -->
          <div id="audit-loading" style="display:none;padding:8px 0;">
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 130px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 90px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 110px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 130px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 75px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 95px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 130px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 100px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 120px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:8px;">
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 130px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 85px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:0 0 105px;"></div>
              <div class="comp-skeleton" style="height:18px;border-radius:4px;flex:1;"></div>
            </div>
          </div>

          <!-- Audit table -->
          <div class="audit-table-wrap" id="audit-table-wrap" style="display:none;">
            <table class="audit-table">
              <thead>
                <tr>
                  <th>Timestamp</th>
                  <th>User</th>
                  <th>Action</th>
                  <th>Record</th>
                  <th>Changes</th>
                </tr>
              </thead>
              <tbody id="audit-tbody"></tbody>
            </table>
            <div class="tbl-pg-bar" id="audit-pg-bar"></div>
          </div>

          <!-- Empty / error state -->
          <div id="audit-empty" style="display:none;" class="audit-empty">
            <div class="audit-empty-icon">&#128275;</div>
            <div id="audit-empty-msg">No audit records found for this period.</div>
          </div>

        </div>
        <!-- ══════════ END AUDIT LOG ══════════ -->

        <!-- ══════════ EDGE FUNCTION AUDIT (CR.12) ══════════ -->
        <!-- Body rendered by src/modules/edge-function-audit.js on first activation -->
        <div class="admin-section" id="asec-edgeaudit"></div>
        <!-- ══════════ END EDGE FUNCTION AUDIT ══════════ -->

        <!-- ══════════ CALENDAR GAPS (Feature 14.10) ══════════ -->
        <div class="admin-section" id="asec-calgaps">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Calendar Gaps</div>
              <div class="asec-sub">Google Calendar events not yet scheduled in Camelo</div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
              <span id="gcal-admin-sync-status" style="font-family:monospace;font-size:11px;color:#22b573;"></span>
              <button class="btn btn-o btn-sm" id="gcal-admin-sync-btn" onclick="triggerGCalSync()">&#8635; Sync Now</button>
              <button class="btn btn-p btn-sm" onclick="loadCalendarGaps()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Filter bar -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:10px 14px;margin-bottom:14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;">
            <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;margin-right:6px;">Status:</span>
            <button class="cd-period-btn calgap-filter-btn active" data-status="pending" onclick="setCalGapFilter('pending')">Pending</button>
            <button class="cd-period-btn calgap-filter-btn" data-status="matched" onclick="setCalGapFilter('matched')">Matched</button>
            <button class="cd-period-btn calgap-filter-btn" data-status="resolved" onclick="setCalGapFilter('resolved')">Resolved</button>
            <button class="cd-period-btn calgap-filter-btn" data-status="dismissed" onclick="setCalGapFilter('dismissed')">Dismissed</button>
            <button class="cd-period-btn calgap-filter-btn" data-status="all" onclick="setCalGapFilter('all')">All</button>
          </div>

          <!-- Table container -->
          <div id="calgaps-table-wrap" style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px;overflow-x:auto;"></div>
        </div>
        <!-- ══════════ END CALENDAR GAPS ══════════ -->

        <!-- ══════════ AVG STUDIES PER TECH (Task 10.4) ══════════ -->
        <div class="admin-section" id="asec-avgstudies">
          <div class="asec-hdr">
            <div>
              <div class="asec-title">Avg Studies per Tech</div>
              <div class="asec-sub">Average studies per visit, broken down by technician and office/site</div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
              <button class="btn btn-o btn-sm" onclick="exportAvgStudiesCSV()">&#8595; Export CSV</button>
              <button class="btn btn-p btn-sm" onclick="loadAvgStudiesData()">&#8635; Refresh</button>
            </div>
          </div>

          <!-- Period Selector -->
          <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
            <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
              <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
              <div style="display:flex;gap:6px;flex-wrap:wrap;" id="avgst-period-btns">
                <button class="cd-period-btn" onclick="setAvgStudiesPeriod('7d',this)">Last 7 Days</button>
                <button class="cd-period-btn active" onclick="setAvgStudiesPeriod('30d',this)">Last 30 Days</button>
                <button class="cd-period-btn" onclick="setAvgStudiesPeriod('thismonth',this)">This Month</button>
                <button class="cd-period-btn" onclick="setAvgStudiesPeriod('lastmonth',this)">Last Month</button>
                <button class="cd-period-btn" onclick="setAvgStudiesPeriod('custom',this)">Custom</button>
              </div>
              <div id="avgst-custom-range" style="display:none;gap:6px;align-items:center;">
                <input type="date" id="avgst-from" class="adm-date-inp" onchange="loadAvgStudiesData()">
                <span style="font-size:11px;color:#8a9bb0;">to</span>
                <input type="date" id="avgst-to" class="adm-date-inp" onchange="loadAvgStudiesData()">
              </div>
            </div>
          </div>

          <!-- Loading skeleton -->
          <div id="avgst-loading" style="display:none;">
            <div class="equip-skeleton equip-sk-table" style="margin-bottom:16px;"></div>
            <div class="equip-skeleton equip-sk-table"></div>
          </div>

          <!-- Content -->
          <div id="avgst-content" style="display:none;">

            <!-- Summary metrics -->
            <div id="avgst-metrics" class="metric-grid" style="margin-bottom:18px;"></div>

            <!-- Heatmap matrix -->
            <div class="comp-section open" id="avgst-sec-matrix">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="avgst-sec-matrix-body" onclick="toggleCompSection('avgst-sec-matrix')">
                <h3>&#128200; Avg Studies per Visit — Tech × Office Matrix</h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="avgst-sec-matrix-body">
                <div style="font-size:11px;color:#8a9bb0;font-family:monospace;margin-bottom:10px;">Rows = techs, columns = offices/sites. Cell value = average studies per day sheet visit. Darker = higher average. <strong>Bold bottom row</strong> = office average. <strong>Bold right column</strong> = tech overall average.</div>
                <div id="avgst-matrix" class="matrix-wrap" style="overflow-x:auto;"></div>
              </div>
            </div>

            <!-- Tech detail table -->
            <div class="comp-section open" id="avgst-sec-detail">
              <button class="comp-section-hdr" type="button" aria-expanded="false" aria-controls="avgst-sec-detail-body" onclick="toggleCompSection('avgst-sec-detail')">
                <h3>&#128101; Per-Tech Summary <span id="avgst-period-label" style="font-size:11px;font-family:monospace;color:#8a9bb0;font-weight:400;"></span></h3>
                <span class="chev">&#9660;</span>
              </button>
              <div class="comp-section-body" id="avgst-sec-detail-body">
                <div style="position:relative;margin-bottom:10px;">
                  <input type="text" id="avgst-detail-search" placeholder="Search tech name..." oninput="filterAvgStudiesDetail(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterAvgStudiesDetail('');}" style="width:100%;background:#f4f8fd;border:1px solid #c8d8ee;border-radius:6px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:13px;padding:9px 34px 9px 12px;outline:none;box-sizing:border-box;transition:border-color .2s;" onfocus="this.style.borderColor='#1a5faa';this.style.background='#fff'" onblur="this.style.borderColor='#c8d8ee';this.style.background='#f4f8fd'">
                  <button onclick="document.getElementById('avgst-detail-search').value='';filterAvgStudiesDetail('');" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a9bb0;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px;" title="Clear search">&times;</button>
                </div>
                <div id="avgst-detail-table" style="overflow-x:auto;"></div>
              </div>
            </div>

          </div>

          <!-- Empty state -->
          <div id="avgst-empty" style="display:none;padding:40px;text-align:center;">
            <div style="font-size:32px;margin-bottom:10px;">&#128200;</div>
            <div style="font-family:monospace;font-size:13px;color:#8a9bb0;">No day sheet data found for the selected period.</div>
          </div>
        </div>
        <!-- ══════════ END AVG STUDIES PER TECH ══════════ -->

      </div>
    </div>
  </div>

  <!-- TECH: Settings & Profile -->
  <div class="panel" id="panel-settings" role="tabpanel" aria-label="Settings panel">
    <div style="display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:20px;">
      <!-- Avatar section -->
      <div style="display:flex;flex-direction:column;align-items:center;gap:10px;min-width:120px;">
        <div id="profile-avatar-wrap" style="width:100px;height:100px;border-radius:50%;overflow:hidden;background:#e8f0f8;border:3px solid #c8d8ee;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;" onclick="document.getElementById('profile-photo-inp').click()">
          <img id="profile-avatar-img" src="" alt="" style="width:100%;height:100%;object-fit:cover;display:none;">
          <div id="profile-avatar-initials" style="font-size:28px;font-weight:800;color:#1a5faa;font-family:Arial,sans-serif;"></div>
          <div style="position:absolute;bottom:0;left:0;right:0;background:rgba(26,95,170,.7);color:#fff;font-size:9px;text-align:center;padding:3px;font-family:monospace;letter-spacing:1px;">CHANGE</div>
        </div>
        <input type="file" id="profile-photo-inp" accept="image/*" style="display:none;" onchange="handleProfilePhoto(this)">
        <button class="btn btn-d btn-sm" style="font-size:10px;" onclick="removeProfilePhoto()">Remove Photo</button>
        <!-- v1.5.0 compliance badge mount (populateProfilePage fills this) -->
        <div id="profile-compliance-badge" style="min-height:22px;display:flex;justify-content:center;"></div>
      </div>
      <!-- Profile info -->
      <div style="flex:1;min-width:200px;">
        <div class="sec-lbl" style="margin-bottom:12px;">My Profile</div>
        <div id="profile-readonly" style="margin-bottom:14px;background:#f8fbff;border:1px solid #c8d8ee;border-radius:8px;padding:12px 14px;">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;">
            <div><div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:monospace;color:#8a9bb0;">Username</div><div style="font-size:13px;font-weight:700;color:#1a2d4a;" id="pv-username">--</div></div>
            <div><div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:monospace;color:#8a9bb0;">Role</div><div style="font-size:13px;font-weight:700;color:#1a2d4a;" id="pv-role">--</div></div>
            <div><div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:monospace;color:#8a9bb0;">Employee ID</div><div style="font-size:13px;color:#1a2d4a;" id="pv-empid">--</div></div>
            <div><div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;font-family:monospace;color:#8a9bb0;">Title</div><div style="font-size:13px;color:#1a2d4a;" id="pv-title">--</div></div>
          </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
          <div class="hf"><label>First Name</label><input class="sc-inp" id="pf-first" placeholder="First name" style="width:100%;"></div>
          <div class="hf"><label>Last Name</label><input class="sc-inp" id="pf-last" placeholder="Last name" style="width:100%;"></div>
          <div class="hf" style="grid-column:1/-1;"><label>Phone</label><input class="sc-inp" id="pf-phone" placeholder="(xxx) xxx-xxxx" maxlength="14" style="width:100%;"></div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;">
          <button class="btn btn-p btn-sm" onclick="saveProfileEdits()">Save Changes</button>
          <span id="profile-save-status" style="font-family:monospace;font-size:11px;color:#22b573;"></span>
        </div>
      </div>
    </div>

    <!-- My Machines card -->
    <div id="profile-machines-card" style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:18px;margin-bottom:14px;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;">
        <div class="sec-lbl" style="margin-bottom:0;">My Machines</div>
        <button class="btn btn-p btn-sm" onclick="openBorrowMachineModal()">+ Borrow a Machine</button>
      </div>
      <div id="profile-machines-body" style="font-family:monospace;font-size:12px;color:#8a9bb0;">Loading...</div>
    </div>

    <!-- My Supplies card -->
    <div id="profile-supplies-card" style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:18px;margin-bottom:14px;">
      <div class="sec-lbl" style="margin-bottom:14px;">My Supplies</div>
      <div id="profile-supplies-body" style="font-family:monospace;font-size:12px;color:#8a9bb0;">Loading...</div>
    </div>

  <!-- Change Password section in settings -->
  <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:18px;margin-bottom:14px;">
    <div class="sec-lbl" style="margin-bottom:14px;">Change Password</div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px;">
      <div class="hf"><label>Current Password</label><input class="sc-inp" id="self-curr-pw" type="password" placeholder="Current password" style="width:100%;"></div>
      <div class="hf"><label>New Password</label><input class="sc-inp" id="self-new-pw" type="password" placeholder="New password (min 8)" style="width:100%;"></div>
      <div class="hf"><label>Confirm Password</label><input class="sc-inp" id="self-confirm-pw" type="password" placeholder="Confirm new password" style="width:100%;"></div>
    </div>
    <div style="display:flex;align-items:center;gap:10px;">
      <button class="btn btn-p btn-sm" onclick="selfChangePassword()">Update Password</button>
      <span id="self-pw-status" style="font-family:monospace;font-size:11px;"></span>
    </div>
  </div>
  </div>

    <!-- SUPERVISOR: All Submissions (view only) -->
  <div class="panel" id="panel-svsubs" role="tabpanel" aria-labelledby="tab-svsubs">
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;">
      <button class="btn btn-p btn-sm" id="svsub-tab-subs" onclick="showSvSubTab('subs')">Submissions</button>
      <button class="btn btn-o btn-sm" id="svsub-tab-machines" onclick="showSvSubTab('machines')">Machines</button>
    </div>
    <div id="svsub-subs-wrap">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;">
      <div class="sec-lbl" style="margin-bottom:0;">All Submissions</div>
    </div>
    <div style="background:#fff;border:1px solid #c8d8ee;border-radius:8px;padding:14px 16px;margin-bottom:14px;">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
        <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
        <div style="display:flex;gap:6px;flex-wrap:wrap;">
          <button class="cd-period-btn" onclick="setPeriod('7d',this,'sv-from','sv-to','sv-custom-range',loadSvSubmissions)">Last 7 Days</button>
          <button class="cd-period-btn" onclick="setPeriod('30d',this,'sv-from','sv-to','sv-custom-range',loadSvSubmissions)">Last 30 Days</button>
          <button class="cd-period-btn active" onclick="setPeriod('thismonth',this,'sv-from','sv-to','sv-custom-range',loadSvSubmissions)">This Month</button>
          <button class="cd-period-btn" onclick="setPeriod('lastmonth',this,'sv-from','sv-to','sv-custom-range',loadSvSubmissions)">Last Month</button>
          <button class="cd-period-btn" onclick="setPeriod('thisyear',this,'sv-from','sv-to','sv-custom-range',loadSvSubmissions)">This Year</button>
          <button class="cd-period-btn" onclick="setPeriod('custom',this,'sv-from','sv-to','sv-custom-range',loadSvSubmissions)">Custom</button>
        </div>
        <div id="sv-custom-range" style="display:none;gap:6px;align-items:center;">
          <input type="date" id="sv-from" class="adm-date-inp" onchange="loadSvSubmissions()">
          <span style="font-size:11px;color:#8a9bb0;">to</span>
          <input type="date" id="sv-to" class="adm-date-inp" onchange="loadSvSubmissions()">
        </div>
      </div>
    </div>
    <div id="sv-status" style="font-family:monospace;font-size:11px;color:#8a9bb0;margin-bottom:10px;"></div>
    <div style="position:relative;margin-bottom:10px;">
      <input type="text" id="sv-search" placeholder="Search submissions..." oninput="filterSvTable(this.value)" onkeydown="if(event.key==='Escape'){this.value='';filterSvTable('');}" style="width:100%;background:#f4f8fd;border:1px solid #c8d8ee;border-radius:6px;color:#1a2d4a;font-family:Arial,sans-serif;font-size:13px;padding:9px 34px 9px 12px;outline:none;box-sizing:border-box;transition:border-color .2s;" onfocus="this.style.borderColor='#1a5faa';this.style.background='#fff'" onblur="this.style.borderColor='#c8d8ee';this.style.background='#f4f8fd'">
      <button onclick="document.getElementById('sv-search').value='';filterSvTable('');" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a9bb0;font-size:16px;cursor:pointer;line-height:1;padding:2px 4px;" title="Clear search">&times;</button>
    </div>
    <div id="sv-table" style="overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #c8d8ee;"></div>
    </div><!-- /svsub-subs-wrap -->
    <div id="svsub-machines-wrap" style="display:none;">
      <div style="display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;">
        <label style="display:flex;align-items:center;gap:6px;font-size:11px;font-family:monospace;color:#8a9bb0;cursor:pointer;">
          <input type="checkbox" id="sv-mi-show-facility" onchange="renderSvFleetOverview()"> Show facility equipment
        </label>
      </div>
      <div id="sv-fleet-mount"></div>
    </div>
  </div>

  <!-- CONTRACTOR: Team Submissions -->
  <div class="panel" id="panel-contractorsubs" role="tabpanel" aria-labelledby="tab-contractorsubs" style="display:none">
    <div class="adm-inner">
      <div class="adm-header-row">
        <div>
          <div class="adm-title">Team Submissions</div>
          <div class="adm-sub">Daysheets from your assigned technicians</div>
        </div>
      </div>
      <div class="cd-period-row" id="contractor-period-btns" style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;">
        <button class="cd-period-btn" onclick="setContractorPeriod('last7',this)">Last 7 Days</button>
        <button class="cd-period-btn active" onclick="setContractorPeriod('last30',this)">Last 30 Days</button>
        <button class="cd-period-btn" onclick="setContractorPeriod('thismonth',this)">This Month</button>
        <button class="cd-period-btn" onclick="setContractorPeriod('lastmonth',this)">Last Month</button>
        <button class="cd-period-btn" onclick="setContractorPeriod('custom',this)">Custom</button>
      </div>
      <div id="contractor-custom-range" style="display:none;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;">
        <input type="date" id="contractor-from" class="sc-inp" style="width:140px;">
        <span>to</span>
        <input type="date" id="contractor-to" class="sc-inp" style="width:140px;">
        <button class="btn btn-p btn-sm" onclick="loadContractorSubmissions()">Apply</button>
      </div>
      <div style="margin-bottom:12px;">
        <input type="text" id="contractor-search" class="sc-inp" placeholder="Search tech, office, date..." oninput="filterContractorTable(this.value)" style="width:100%;max-width:340px;">
      </div>
      <div id="contractor-table" style="overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #c8d8ee;"></div>
    </div>
  </div>

  <!-- CLIENT: Dashboard -->
  <div class="panel" id="panel-clientdash" role="tabpanel" aria-labelledby="tab-clientdash">

    <!-- Client Dashboard v10 - Redesigned -->
    <div class="cdv10-toolbar">
      <div class="cdv10-toolbar-left">
        <div>
          <div class="sec-lbl" style="margin-bottom:2px;">Activity Dashboard</div>
          <div id="cd-client-name" style="font-size:12px;color:#8a9bb0;font-family:monospace;"></div>
        </div>
      </div>
      <div class="cdv10-toolbar-right">
        <div id="client-dash-status" style="font-family:monospace;font-size:11px;color:#8a9bb0;"></div>
        <button class="cdv10-export-btn" onclick="cdExportCSV()" title="Export CSV"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> CSV</button>
        <button class="cdv10-export-btn" onclick="cdExportPDF()" title="Export Summary PDF"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> PDF</button>
      </div>
    </div>

    <!-- Date Range Controls -->
    <div style="background:#fff;border:1px solid #e0eaf5;border-radius:10px;padding:14px 16px;margin-bottom:22px;">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
        <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Period:</span>
        <div style="display:flex;gap:6px;flex-wrap:wrap;" id="cd-period-btns">
          <button class="cd-period-btn active" onclick="setCdPeriod('7d',this)">Last 7 Days</button>
          <button class="cd-period-btn" onclick="setCdPeriod('30d',this)">Last 30 Days</button>
          <button class="cd-period-btn" onclick="setCdPeriod('thismonth',this)">This Month</button>
          <button class="cd-period-btn" onclick="setCdPeriod('lastmonth',this)">Last Month</button>
          <button class="cd-period-btn" onclick="setCdPeriod('thisquarter',this)">This Quarter</button>
          <button class="cd-period-btn" onclick="setCdPeriod('lastquarter',this)">Last Quarter</button>
          <button class="cd-period-btn" onclick="setCdPeriod('thisyear',this)">This Year</button>
          <button class="cd-period-btn" onclick="setCdPeriod('custom',this)">Custom</button>
        </div>
        <div id="cd-custom-range" style="display:none;gap:6px;align-items:center;">
          <input type="date" id="cd-from" class="adm-date-inp" onchange="loadClientDashboard()">
          <span style="font-size:11px;color:#8a9bb0;">to</span>
          <input type="date" id="cd-to" class="adm-date-inp" onchange="loadClientDashboard()">
        </div>
      </div>
    </div>

    <!-- Site Filter Dropdown (for clients with multiple sites) -->
    <div id="cd-site-filter-wrap" style="display:none;background:#fff;border:1px solid #e0eaf5;border-radius:10px;padding:10px 16px;margin-bottom:16px;">
      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
        <span style="font-size:11px;font-family:monospace;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">Site:</span>
        <select id="cd-site-filter" class="adm-date-inp" style="min-width:200px;font-size:13px;" onchange="cdApplySiteFilter()">
          <option value="all">All Sites</option>
        </select>
      </div>
    </div>

    <!-- Skeleton Screens -->
    <div id="cd-skeleton" style="display:none;">
      <div class="cdv10-scoreboard" style="margin-bottom:24px;">
        <div class="cdv10-score-card"><div class="cdv10-skeleton cdv10-skeleton-val"></div><div class="cdv10-skeleton cdv10-skeleton-sub"></div></div>
        <div class="cdv10-score-card"><div class="cdv10-skeleton cdv10-skeleton-val"></div><div class="cdv10-skeleton cdv10-skeleton-sub"></div></div>
        <div class="cdv10-score-card"><div class="cdv10-skeleton cdv10-skeleton-val"></div><div class="cdv10-skeleton cdv10-skeleton-sub"></div></div>
        <div class="cdv10-score-card"><div class="cdv10-skeleton cdv10-skeleton-val"></div><div class="cdv10-skeleton cdv10-skeleton-sub"></div></div>
      </div>
      <div class="cdv10-skeleton cdv10-skeleton-chart" style="margin-bottom:24px;"></div>
      <div class="cdv10-scoreboard">
        <div class="cdv10-skeleton" style="height:100px;border-radius:12px;"></div>
        <div class="cdv10-skeleton" style="height:100px;border-radius:12px;"></div>
        <div class="cdv10-skeleton" style="height:100px;border-radius:12px;"></div>
      </div>
    </div>

    <div id="client-dash-content" style="display:none;">

      <!-- Section A: Headline Scoreboard -->
      <div class="cdv10-scoreboard" id="cd-scoreboard">
        <div class="cdv10-score-card" id="cd-card-patients" onclick="cdCardClick('trend')">
          <div class="cdv10-score-lbl">Patients This Period</div>
          <div class="cdv10-score-val" id="cd-patients">0</div>
          <div class="cdv10-score-delta" id="cd-patients-delta"></div>
          <div class="cdv10-score-sub" id="cd-patients-sub"></div>
        </div>
        <div class="cdv10-score-card" id="cd-card-studies" onclick="cdCardClick('study')">
          <div class="cdv10-score-lbl">Total Studies</div>
          <div class="cdv10-score-val" id="cd-total">0</div>
          <div class="cdv10-score-delta" id="cd-total-delta"></div>
          <div class="cdv10-score-sub" id="cd-total-sub"></div>
        </div>
        <div class="cdv10-score-card" id="cd-card-spp" onclick="cdCardClick('study')">
          <div class="cdv10-score-lbl" id="cd-spp-lbl" style="display:flex;align-items:center;gap:4px;"><span id="cd-spp-lbl-text">Studies per Patient</span> <span class="cdv10-info-tip" tabindex="0" id="cd-spp-tip">i<span class="cdv10-tip-text" id="cd-spp-tip-text">Ratio of total studies to patients seen. Green: 2.0+, Yellow: 1.5-1.9, Red: below 1.5.</span></span><span id="cd-spp-disclaimer-tip" class="cdv10-info-tip" tabindex="0" style="display:none;">i<span class="cdv10-tip-text">Estimated revenue based on configured reimbursement rates. For planning purposes only.</span></span><span id="cd-spp-gear" style="display:none;margin-left:auto;font-size:14px;cursor:pointer;color:#8a9bb0;" onclick="event.stopPropagation();openRateEditor()" title="Configure reimbursement rates">&#9881;</span></div>
          <div class="cdv10-score-val" id="cd-spp">--</div>
          <div class="cdv10-score-delta" id="cd-spp-delta"></div>
          <div class="cdv10-score-sub" id="cd-spp-sub"></div>
          <div id="cd-spp-cta" style="display:none;margin-top:6px;font-size:10px;font-family:monospace;color:#1a5faa;cursor:pointer;text-decoration:underline;" onclick="event.stopPropagation();openRateEditor()">Configure Rates &rarr;</div>
        </div>
        <div class="cdv10-score-card" id="cd-card-ppv" onclick="cdCardClick('location')">
          <div class="cdv10-score-lbl">Avg Patients / Visit</div>
          <div class="cdv10-score-val" id="cd-ppv">--</div>
          <div class="cdv10-score-delta" id="cd-ppv-delta"></div>
          <div class="cdv10-score-sub" id="cd-ppv-sub"></div>
        </div>
      </div>

      <!-- Section G: Inline Alerts / Anomalies -->
      <div id="cd-alerts-section">
        <div class="cdv10-alerts-hdr">
          <span class="cdv10-alerts-lbl">&#9888; Alerts &amp; Anomalies</span>
          <button class="cdv10-alerts-dismiss-all" onclick="cdDismissAllAlerts()">Dismiss all</button>
        </div>
        <div class="cdv10-alerts-wrap" id="cd-alerts-list"></div>
      </div>

      <!-- Section B: Volume Trend Chart -->
      <div class="cdv10-chart-wrap" id="cd-trend-section">
        <div class="cdv10-chart-header">
          <div class="cdv10-chart-title">Volume Trend</div>
          <div class="cdv10-chart-toggles">
            <button class="cdv10-chart-toggle active" onclick="cdToggleChartLayer('bars',this)"><span class="dot" style="background:#1a5faa;"></span> Patients</button>
            <button class="cdv10-chart-toggle active" onclick="cdToggleChartLayer('line',this)"><span class="dot" style="background:#22b573;"></span> Studies</button>
            <button class="cdv10-chart-toggle" onclick="cdToggleChartLayer('avg',this)"><span class="dot swatch dashed" style="border-color:#e8a020;"></span> 4-wk avg</button>
          </div>
        </div>
        <div class="cdv10-chart-area" id="cd-chart-area"></div>
        <div class="cdv10-chart-legend">
          <div class="cdv10-chart-legend-item"><span class="swatch" style="background:#1a5faa;"></span> Patients (bars)</div>
          <div class="cdv10-chart-legend-item"><span class="swatch" style="background:#22b573;"></span> Studies (line)</div>
          <div class="cdv10-chart-legend-item"><span class="swatch dashed" style="border-color:#e8a020;"></span> 4-wk rolling avg</div>
        </div>
      </div>

      <!-- Section C: Physician Comparison -->
      <div class="cdv10-section open" id="cd-phys-section">
        <button class="cdv10-section-hdr" type="button" aria-expanded="false" aria-controls="cd-phys-section-body" onclick="cdToggleSection('cd-phys-section')">
          <h3><span style="font-size:15px;">&#128100;</span> Physicians</h3>
          <span class="chev">&#9660;</span>
        </button>
        <div class="cdv10-section-body" id="cd-phys-section-body">
          <div id="cd-phys-summary"></div>
          <div id="cd-phys-detail" style="display:none;"></div>
        </div>
      </div>

      <!-- Section D: Site Performance Cards -->
      <div class="cdv10-section default-open open" id="cd-sites-section">
        <button class="cdv10-section-hdr" type="button" aria-expanded="false" aria-controls="cd-sites-section-body" onclick="cdToggleSection('cd-sites-section')">
          <h3><span style="font-size:15px;">&#127970;</span> Locations</h3>
          <span class="chev">&#9660;</span>
        </button>
        <div class="cdv10-section-body" id="cd-sites-section-body">
          <div class="cdv10-site-grid" id="cd-site-cards"></div>
        </div>
      </div>

      <!-- Section E: Study Mix -->
      <div class="cdv10-section" id="cd-study-section">
        <button class="cdv10-section-hdr" type="button" aria-expanded="false" aria-controls="cd-study-section-body" onclick="cdToggleSection('cd-study-section')">
          <h3><span style="font-size:15px;">&#128200;</span> Study Mix</h3>
          <span class="chev">&#9660;</span>
        </button>
        <div class="cdv10-section-body" id="cd-study-section-body">
          <div id="cd-study-content"></div>
        </div>
      </div>

    </div>

    <!-- Tooltip element (shared) -->
    <div class="cdv10-chart-tooltip" id="cd-tooltip"></div>

  </div>

  <!-- ══════════ WIKI HELP SECTION ══════════ -->
  <div class="panel" id="panel-help" role="tabpanel" aria-label="Help panel">
    <div class="help-layout">
      <div class="help-sidebar" id="help-sidebar">
        <button class="help-back-btn" id="help-mobile-back" onclick="helpMobileBack()">&#8592; Back to articles</button>
        <div class="help-sidebar-hdr">
          <div class="help-sidebar-title"><span style="font-size:18px;">&#128218;</span> Help Center</div>
          <div class="help-sidebar-sub">NWN Daily Patient Log</div>
        </div>
        <div class="help-search-wrap">
          <input type="text" class="help-search" id="help-search" placeholder="Search articles..." oninput="helpSearchFilter(this.value)" aria-label="Search help articles">
        </div>
        <nav class="help-nav-group" id="help-nav" aria-label="Help topics">

          <!-- Getting Started -->
          <button class="help-nav-role expanded" type="button" aria-expanded="true" onclick="toggleHelpRole(this)" data-role="start">
            <span class="help-chev">&#9654;</span>
            <span class="help-nav-role-icon">&#127968;</span> Getting Started
          </button>
          <div class="help-nav-items" data-role-items="start">
            <div class="help-nav-item" onclick="showHelpArticle('overview')" data-article="overview"><span class="help-nav-dot"></span> App Overview</div>
            <div class="help-nav-item" onclick="showHelpArticle('login')" data-article="login"><span class="help-nav-dot"></span> Logging In</div>
            <div class="help-nav-item" onclick="showHelpArticle('navigation')" data-article="navigation"><span class="help-nav-dot"></span> Navigation</div>
            <div class="help-nav-item" onclick="showHelpArticle('profile')" data-article="profile"><span class="help-nav-dot"></span> Your Profile</div>
          </div>

          <!-- Tech Dashboard -->
          <button class="help-nav-role" type="button" aria-expanded="false" onclick="toggleHelpRole(this)" data-role="tech">
            <span class="help-chev">&#9654;</span>
            <span class="help-nav-role-icon">&#128203;</span> Tech Dashboard
          </button>
          <div class="help-nav-items" data-role-items="tech">
            <div class="help-nav-item" onclick="showHelpArticle('tech-daysheet')" data-article="tech-daysheet"><span class="help-nav-dot"></span> Day Sheet Entry</div>
            <div class="help-nav-item" onclick="showHelpArticle('tech-patients')" data-article="tech-patients"><span class="help-nav-dot"></span> Patient Logging</div>
            <div class="help-nav-item" onclick="showHelpArticle('tech-studies')" data-article="tech-studies"><span class="help-nav-dot"></span> Study Types</div>
            <div class="help-nav-item" onclick="showHelpArticle('tech-multimachine')" data-article="tech-multimachine"><span class="help-nav-dot"></span> Multi-Machine Mode</div>
            <div class="help-nav-item" onclick="showHelpArticle('tech-nopatients')" data-article="tech-nopatients"><span class="help-nav-dot"></span> No-Patients Workflow</div>
            <div class="help-nav-item" onclick="showHelpArticle('tech-submit')" data-article="tech-submit"><span class="help-nav-dot"></span> Submitting &amp; Printing</div>
            <div class="help-nav-item" onclick="showHelpArticle('tech-history')" data-article="tech-history"><span class="help-nav-dot"></span> My History</div>
          </div>

          <!-- Supervisor Dashboard -->
          <button class="help-nav-role" type="button" aria-expanded="false" onclick="toggleHelpRole(this)" data-role="supervisor">
            <span class="help-chev">&#9654;</span>
            <span class="help-nav-role-icon">&#128101;</span> Supervisor Dashboard
          </button>
          <div class="help-nav-items" data-role-items="supervisor">
            <div class="help-nav-item" onclick="showHelpArticle('sv-overview')" data-article="sv-overview"><span class="help-nav-dot"></span> Supervisor Overview</div>
            <div class="help-nav-item" onclick="showHelpArticle('sv-submissions')" data-article="sv-submissions"><span class="help-nav-dot"></span> All Submissions</div>
            <div class="help-nav-item" onclick="showHelpArticle('sv-compliance')" data-article="sv-compliance"><span class="help-nav-dot"></span> Compliance Monitoring</div>
          </div>

          <!-- Admin Dashboard -->
          <button class="help-nav-role" type="button" aria-expanded="false" onclick="toggleHelpRole(this)" data-role="admin">
            <span class="help-chev">&#9654;</span>
            <span class="help-nav-role-icon">&#9632;</span> Admin Dashboard
          </button>
          <div class="help-nav-items" data-role-items="admin">
            <div class="help-nav-item" onclick="showHelpArticle('adm-overview')" data-article="adm-overview"><span class="help-nav-dot"></span> Admin Overview</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-dashboard')" data-article="adm-dashboard"><span class="help-nav-dot"></span> Dashboard &amp; Metrics</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-submissions')" data-article="adm-submissions"><span class="help-nav-dot"></span> Submissions</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-techs')" data-article="adm-techs"><span class="help-nav-dot"></span> Technician Management</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-clients')" data-article="adm-clients"><span class="help-nav-dot"></span> Client &amp; Site Management</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-compliance')" data-article="adm-compliance"><span class="help-nav-dot"></span> Compliance &amp; Scorecards</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-equipment')" data-article="adm-equipment"><span class="help-nav-dot"></span> Equipment Utilization</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-team')" data-article="adm-team"><span class="help-nav-dot"></span> Team Leaderboard</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-timeverify')" data-article="adm-timeverify"><span class="help-nav-dot"></span> Time Verification</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-reports')" data-article="adm-reports"><span class="help-nav-dot"></span> Reports &amp; Export</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-settings')" data-article="adm-settings"><span class="help-nav-dot"></span> Settings</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-arrival')" data-article="adm-arrival"><span class="help-nav-dot"></span> Arrival Analysis</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-duration')" data-article="adm-duration"><span class="help-nav-dot"></span> On-Site Time</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-auditlog')" data-article="adm-auditlog"><span class="help-nav-dot"></span> Audit Log</div>
            <div class="help-nav-item" onclick="showHelpArticle('adm-avgstudies')" data-article="adm-avgstudies"><span class="help-nav-dot"></span> Avg Studies / Tech</div>
          </div>

          <!-- Client Dashboard -->
          <button class="help-nav-role" type="button" aria-expanded="false" onclick="toggleHelpRole(this)" data-role="client">
            <span class="help-chev">&#9654;</span>
            <span class="help-nav-role-icon">&#128200;</span> Client Dashboard
          </button>
          <div class="help-nav-items" data-role-items="client">
            <div class="help-nav-item" onclick="showHelpArticle('cl-overview')" data-article="cl-overview"><span class="help-nav-dot"></span> Client Overview</div>
            <div class="help-nav-item" onclick="showHelpArticle('cl-scoreboard')" data-article="cl-scoreboard"><span class="help-nav-dot"></span> Headline Scoreboard</div>
            <div class="help-nav-item" onclick="showHelpArticle('cl-trends')" data-article="cl-trends"><span class="help-nav-dot"></span> Volume Trends</div>
            <div class="help-nav-item" onclick="showHelpArticle('cl-physicians')" data-article="cl-physicians"><span class="help-nav-dot"></span> Physician Comparisons</div>
            <div class="help-nav-item" onclick="showHelpArticle('cl-sites')" data-article="cl-sites"><span class="help-nav-dot"></span> Site Performance</div>
            <div class="help-nav-item" onclick="showHelpArticle('cl-studymix')" data-article="cl-studymix"><span class="help-nav-dot"></span> Study Mix</div>
            <div class="help-nav-item" onclick="showHelpArticle('cl-export')" data-article="cl-export"><span class="help-nav-dot"></span> CSV &amp; PDF Export</div>
          </div>

        </nav>
      </div>

      <div class="help-content" id="help-content">
        <div class="help-content-inner" id="help-content-inner">
          <!-- Default welcome page -->
          <div class="help-welcome" id="help-welcome">
            <div class="help-welcome-icon">&#128218;</div>
            <h1>NWN Help Center</h1>
            <p>Find guides, step-by-step instructions, and tips for every feature in the NWN Daily Patient Log. Choose your role below or browse the sidebar.</p>
            <div class="help-role-cards">
              <div class="help-role-card" onclick="helpExpandRole('tech');showHelpArticle('tech-daysheet')">
                <div class="rc-icon">&#128203;</div>
                <div class="rc-title">Technician</div>
                <div class="rc-sub">Day sheets &amp; logging</div>
              </div>
              <div class="help-role-card" onclick="helpExpandRole('supervisor');showHelpArticle('sv-overview')">
                <div class="rc-icon">&#128101;</div>
                <div class="rc-title">Supervisor</div>
                <div class="rc-sub">Compliance &amp; tracking</div>
              </div>
              <div class="help-role-card" onclick="helpExpandRole('admin');showHelpArticle('adm-overview')">
                <div class="rc-icon">&#9632;</div>
                <div class="rc-title">Admin</div>
                <div class="rc-sub">Full system control</div>
              </div>
              <div class="help-role-card" onclick="helpExpandRole('client');showHelpArticle('cl-overview')">
                <div class="rc-icon">&#128200;</div>
                <div class="rc-title">Client</div>
                <div class="rc-sub">Analytics &amp; insights</div>
              </div>
            </div>
          </div>
          <!-- Article content injected here -->
          <div id="help-article-wrap" style="display:none;"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- ══════════ END WIKI HELP ══════════ -->

  <div id="parea">
    <div class="ph">
      <img id="print-logo" src="/print-logo.png" alt="Next Wave Neurodiagnostics">
      <div class="pcontact">Tel. 646-709-3031 &nbsp; Fax: 646-349-2738<br>www.nwaven.com</div>
    </div>
    <div class="ptitle">Patient Log</div>
    <div class="pfields" id="p-fields"></div>
    <table><thead id="p-thead"><tr>
      <th class="c" style="width:26px">#</th><th>Patient Name</th>
      <th class="c">Study Type</th><th class="c mm-col-hidden" id="p-mm-th">Machine</th><th class="c">Extremity</th><th>Comment</th>
    </tr></thead><tbody id="p-tbody"></tbody></table>
    <div class="plegend" id="print-legend">Legend: EMG=Electromyography &middot; NCV=Nerve Conduction &middot; EMG/NCV=Combined &middot; EEG=Electroencephalogram &middot; SSEP=Somatosensory Evoked Potentials &middot; SSR=Sympathetic Skin Response &middot; ABI=Ankle-Brachial Index &middot; RNS=Repetitive Nerve Stimulation</div>
    <div class="pfooter"><span id="p-techline"></span><span>Next Wave Neurodiagnostics, Inc. &middot; 646-709-3031</span></div>
  </div>

  <!-- Modal -->
  <div id="modal" role="dialog" aria-modal="true" aria-label="Day Sheet Summary">
    <div class="mcard">
      <img id="modal-logo" src="/modal-logo.png" alt="NWN" style="height:36px;margin-bottom:10px">
      <div class="mtitle">Day Sheet Summary</div>
      <div class="mmeta" id="mmeta"></div>
      <table class="mtable" id="m-table"><thead id="m-thead"><tr><th>#</th><th>Patient Name</th><th>Study Type</th><th class="mm-col-hidden" id="m-mm-th">Machine</th><th>Extremity</th><th>Comment</th></tr></thead>
      <tbody id="m-tbody"></tbody></table>
      <div class="mfooter">
        <button class="btn btn-o" onclick="closeModal()" aria-label="Close modal">Back</button>
        <button class="btn btn-o" onclick="exportCSV()">Export CSV</button>
        <button class="btn btn-g" onclick="submitDaySheet()">&#10003; Submit</button>
        <button class="btn btn-p" onclick="doPrint()">Print / PDF</button>
      </div>
    </div>
  </div>
  <div id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
  <div id="toast-assertive" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);"></div>
</div>

<!-- REASSIGN MACHINE MODAL (admin/supervisor fleet overview Reassign action) -->
<!-- Must live at top-level (outside any .panel) because .panel defaults to -->
<!-- display:none, which would hide this modal whenever the tech Settings -->
<!-- tab is not active — i.e. whenever an admin actually uses it. -->
<div id="modal-reassign-machine" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:520px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Reassign Machine <span id="rm-machine-id" style="font-family:monospace;margin-left:6px;color:#9ecbff;"></span></div>
      <button onclick="closeFleetReassignModal()" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:12px;">
      <div id="rm-current-owner" style="font-family:monospace;font-size:11px;color:#8a9bb0;"></div>
      <label style="display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:11px;color:#8a9bb0;letter-spacing:1px;text-transform:uppercase;">
        New primary owner
        <select class="sc-inp" id="rm-user-sel" style="width:100%;font-family:Arial,sans-serif;font-size:13px;padding:8px 10px;"></select>
      </label>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeFleetReassignModal()">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="confirmFleetReassign()">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- BORROW MACHINE MODAL (relocated from panel-settings for tab-independence) -->
<div id="modal-borrow-machine" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:640px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Borrow a Machine</div>
      <button onclick="closeBorrowMachineModal()" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;border-bottom:1px solid #eef3fa;display:flex;flex-direction:column;gap:10px;">
      <div style="display:flex;gap:6px;flex-wrap:wrap;" id="bm-filter-chips">
        <button class="cd-period-btn active" data-filter="all" onclick="setBorrowFilter('all',this)">All</button>
        <button class="cd-period-btn" data-filter="spares" onclick="setBorrowFilter('spares',this)">Spares only</button>
        <button class="cd-period-btn" data-filter="available" onclick="setBorrowFilter('available',this)">Available</button>
      </div>
      <input class="sc-inp" id="bm-search" placeholder="Search by machine ID or serial..." oninput="filterBorrowPicker(this.value)" style="width:100%;">
    </div>
    <div id="bm-list" style="padding:10px 18px;overflow-y:auto;flex:1;min-height:120px;">
      <div style="font-family:monospace;font-size:11px;color:#8a9bb0;padding:8px 0;">Loading...</div>
    </div>
  </div>
</div>

<!-- USER EDIT MODAL -->
<!-- v1.11.0 Track 2 Phase 1 — user-edit modal restyled to match the redesigned
     Tech table. Avatar + name + role badge at the top, hairline border, low-alpha
     shadow, design tokens. Escape + click-away close are wired in openUserEdit
     (src/main.js). Phase 3 will convert this into a proper Drawer with focus
     trap; for now we keep the same form fields and bolt on the new chrome. -->
<div id="modal-user-edit" class="nwn-user-edit__backdrop" role="dialog" aria-modal="true" aria-labelledby="edit-user-name">
  <div id="modal-user-edit-panel" class="nwn-user-edit__panel">
    <div class="nwn-user-edit__header">
      <div id="edit-user-avatar-mount" data-testid="edit-user-avatar"></div>
      <div class="nwn-user-edit__identity">
        <div id="edit-user-name" class="nwn-user-edit__name">Edit User</div>
        <div id="edit-user-role-mount" class="nwn-user-edit__role" data-testid="edit-user-role"></div>
      </div>
      <button type="button" class="nwn-user-edit__close" onclick="closeUserEdit()" aria-label="Close edit user dialog">&#10005;</button>
    </div>
    <div class="nwn-user-edit__body">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;">
        <div class="hf"><label>Username</label><input class="sc-inp" id="edit-username" placeholder="e.g. ojohnson" style="width:100%;"></div>
        <div class="hf"><label>Role</label>
          <select class="sc-inp" id="edit-role" style="width:100%;" onchange="toggleContractorAssignSection(this.value)">
            <option value="tech">Tech</option>
            <option value="supervisor">Supervisor</option>
            <option value="admin">Admin</option>
            <option value="client">Client</option>
            <option value="contractor">Contractor</option>
          </select>
        </div>
        <div class="hf"><label>First Name</label><input class="sc-inp" id="edit-first" placeholder="First name" style="width:100%;"></div>
        <div class="hf"><label>Last Name</label><input class="sc-inp" id="edit-last" placeholder="Last name" style="width:100%;"></div>
        <div class="hf"><label>Email</label><input class="sc-inp" id="edit-email" type="email" placeholder="email@example.com" style="width:100%;"></div>
        <div class="hf"><label>Phone</label><input class="sc-inp" id="edit-phone" placeholder="(xxx) xxx-xxxx" maxlength="14" style="width:100%;"></div>
        <div class="hf"><label>Employee ID</label><input class="sc-inp" id="edit-empid" placeholder="e.g. NWN001" style="width:100%;"></div>
        <div class="hf"><label>Title</label><input class="sc-inp" id="edit-title" placeholder="e.g. Lead Technologist" style="width:100%;"></div>
        <div class="hf"><label>Assigned Machine</label>
          <select class="sc-inp" id="edit-user-machine" style="width:100%;"></select>
        </div>
        <div class="hf"><label>Status</label>
          <select class="sc-inp" id="edit-active" style="width:100%;">
            <option value="true">Active</option>
            <option value="false">Inactive</option>
          </select>
        </div>
        <div class="hf" style="grid-column:1/-1;"><label>Reports To (Supervisor / Contractor)</label>
          <select class="sc-inp" id="edit-reports-to" style="width:100%;"></select>
          <div style="font-size:10px;font-family:monospace;color:#8a9bb0;margin-top:4px;">Tech will inherit client access from their boss. Leave blank to block all access.</div>
        </div>
      </div>
      <div id="edit-exclude-wrap" class="hf" style="margin-bottom:16px;">
        <label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;">
          <input type="checkbox" id="edit-exclude-scoring"> Exclude from scoring
        </label>
        <div style="font-size:10px;font-family:monospace;color:#8a9bb0;margin-top:4px;">Hides this user's compliance badge and excludes them from the badge game.</div>
      </div>
      <div class="hf" style="margin-bottom:16px;"><label>Assigned Clients (Client role only &mdash; hold Ctrl/Cmd for multiple)</label>
        <select class="sc-inp" id="edit-clients" multiple style="width:100%;height:80px;"></select>
      </div>
      <div id="contractor-client-section" style="display:none;margin-bottom:16px;">
        <div class="hf"><label>Client access (Contractor role only)</label>
          <div id="contractor-client-checklist" style="max-height:160px;overflow-y:auto;border:1px solid #c8d8ee;border-radius:6px;padding:8px;background:#f8fbff;font-size:12px;font-family:monospace;"></div>
          <div style="font-size:10px;font-family:monospace;color:#8a9bb0;margin-top:4px;">Check the clients this contractor (and any tech reporting to them) can see.</div>
        </div>
      </div>
      <div id="contractor-assign-section" style="display:none;margin-bottom:16px;">
        <div class="hf"><label>Assigned Technicians (Contractor role only)</label>
          <div id="contractor-tech-checklist" style="max-height:160px;overflow-y:auto;border:1px solid #c8d8ee;border-radius:6px;padding:8px;background:#f8fbff;font-size:12px;font-family:monospace;"></div>
        </div>
      </div>
      <div id="edit-user-status" style="font-family:monospace;font-size:11px;color:#d94f4f;margin-bottom:10px;min-height:16px;"></div>
    </div>
    <div class="nwn-user-edit__footer">
      <button class="btn btn-o btn-sm" onclick="openChangePinModal()">&#128274; Change Password</button>
      <div class="nwn-user-edit__footer-actions">
        <button class="btn btn-o btn-sm" onclick="closeUserEdit()">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveUserEdit()">Save Changes</button>
      </div>
    </div>
  </div>
</div>

<!-- CHANGE PIN MODAL -->
<div id="modal-pin-change" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:90%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d3d7a;color:#fff;padding:14px 18px;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:13px;font-weight:700;">Change Password</div>
      <button onclick="closeChangePinModal()" style="background:none;border:none;color:#fff;font-size:16px;cursor:pointer;">&#10005;</button>
    </div>
    <div style="padding:18px;">
      <div id="pin-change-username" style="font-family:monospace;font-size:11px;color:#8a9bb0;margin-bottom:12px;"></div>
      <div class="hf" style="margin-bottom:10px;"><label>Current Password</label>
        <input class="sc-inp" id="current-pin-input" type="password" placeholder="Enter current password" autocomplete="current-password" style="width:100%;" onkeydown="if(event.key==='Enter')saveNewPin()">
      </div>
      <div class="hf" style="margin-bottom:10px;"><label>New Password (min 8 characters)</label>
        <div class="nwn-pin-input-wrap">
          <input class="sc-inp nwn-pin-input" id="new-pin-input" type="password" placeholder="Enter new password" autocomplete="new-password" onkeydown="if(event.key==='Enter')saveNewPin()">
          <button type="button" class="nwn-pin-eye" data-pin-eye-for="new-pin-input" data-visible="0" aria-label="Show password">
            <svg class="nwn-pin-eye__show" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
            <svg class="nwn-pin-eye__hide" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"/><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"/><path d="M3 3l18 18"/></svg>
          </button>
        </div>
        <div class="nwn-pin-strength" id="pin-strength-meter" aria-hidden="true">
          <span class="nwn-pin-strength__seg" data-pin-strength-seg data-fill=""></span>
          <span class="nwn-pin-strength__seg" data-pin-strength-seg data-fill=""></span>
          <span class="nwn-pin-strength__seg" data-pin-strength-seg data-fill=""></span>
          <span class="nwn-pin-strength__seg" data-pin-strength-seg data-fill=""></span>
          <span class="nwn-pin-strength__seg" data-pin-strength-seg data-fill=""></span>
        </div>
        <div class="nwn-pin-strength__label" id="pin-strength-label" data-cls="" aria-live="polite"></div>
      </div>
      <div class="hf" style="margin-bottom:14px;"><label>Confirm Password</label>
        <div class="nwn-pin-input-wrap">
          <input class="sc-inp nwn-pin-input" id="confirm-pin-input" type="password" placeholder="Confirm new password" autocomplete="new-password" onkeydown="if(event.key==='Enter')saveNewPin()">
          <button type="button" class="nwn-pin-eye" data-pin-eye-for="confirm-pin-input" data-visible="0" aria-label="Show password">
            <svg class="nwn-pin-eye__show" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
            <svg class="nwn-pin-eye__hide" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"/><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"/><path d="M3 3l18 18"/></svg>
          </button>
        </div>
      </div>
      <div id="pin-change-status" style="font-family:monospace;font-size:11px;color:#d94f4f;margin-bottom:10px;min-height:16px;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;">
        <button class="btn btn-o btn-sm" onclick="closeChangePinModal()">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveNewPin()">Save Password</button>
      </div>
    </div>
  </div>
</div>

<!-- FORGOT PIN MODAL -->
<div id="modal-forgot-pin" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:90%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#1a5faa;color:#fff;padding:14px 18px;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:13px;font-weight:700;">Reset Password</div>
      <button onclick="closeForgotPin()" style="background:none;border:none;color:#fff;font-size:16px;cursor:pointer;">&#10005;</button>
    </div>
    <div style="padding:18px;">
      <p style="font-family:monospace;font-size:11px;color:#5a7090;margin-bottom:14px;line-height:1.6;">Enter your username. A temporary password will be sent to your registered email address.</p>
      <div class="hf" style="margin-bottom:10px;"><label>Username</label>
        <input class="sc-inp" id="forgot-username" placeholder="Enter your username" autocomplete="username" style="width:100%;" onkeydown="if(event.key==='Enter')sendTempPin()">
      </div>
      <div id="forgot-pin-status" style="font-family:monospace;font-size:11px;margin-bottom:10px;min-height:16px;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;">
        <button class="btn btn-o btn-sm" onclick="closeForgotPin()">Cancel</button>
        <button class="btn btn-p btn-sm" id="send-temp-pin-btn" onclick="sendTempPin()">Send Temp Password</button>
      </div>
      <div style="margin-top:12px;padding-top:12px;border-top:1px solid #eef3fa;">
        <p style="font-family:monospace;font-size:10px;color:#8a9bb0;line-height:1.6;">Received your temp password? Enter it on the login screen. You will be prompted to set a new password immediately after.</p>
      </div>
    </div>
  </div>
</div>

<script>
// Service worker registration
// Skip SW in dev (localhost / 127.0.0.1) — Vite already provides HMR and
// no-cache headers, and an active SW just creates "why isn't my fresh build
// showing" hazards when the dev server hiccups. Production registers as
// before.
if ('serviceWorker' in navigator
    && location.hostname !== 'localhost'
    && location.hostname !== '127.0.0.1'
    && location.hostname !== '::1') {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(reg) {
        console.log('[SW] Registered. Scope:', reg.scope);
      })
      .catch(function(err) {
        console.error('[SW] Registration failed:', err);
      });
  });
}

// Offline / online banner + toast
(function() {
  function updateOnlineStatus() {
    var banner = document.getElementById('offline-banner');
    if (!banner) return;
    if (!navigator.onLine) {
      banner.style.display = 'block';
      if (typeof toast === 'function') {
        toast('You are offline. Changes are saved locally.', 'warn');
      }
    } else {
      banner.style.display = 'none';
      if (typeof toast === 'function') {
        toast('Connection restored.', 'ok');
      }
    }
  }

  window.addEventListener('offline', updateOnlineStatus);
  window.addEventListener('online', updateOnlineStatus);
})();
</script>

<!-- ═══ SUPPLY MODALS (top-level, outside any .panel — S8 bug prevention) ═══ -->

<!-- Add/Edit Supply Item -->
<div id="modal-supply-item" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;" id="si-modal-title">Add Supply Item</div>
      <button onclick="closeSupplyModal('modal-supply-item')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="si-id">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Name</label><input class="sc-inp" id="si-name" placeholder="e.g. Disposable Electrode" style="width:100%;"></div>
        <div class="hf"><label>SKU</label><input class="sc-inp" id="si-sku" placeholder="e.g. EL-100" style="width:100%;"></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Category</label>
          <select class="sc-inp" id="si-category" style="width:100%;">
            <option value="Electrodes">Electrodes</option>
            <option value="Gel">Gel</option>
            <option value="Tape">Tape</option>
            <option value="Needles">Needles</option>
            <option value="PPE">PPE</option>
            <option value="Other">Other</option>
          </select>
        </div>
        <div class="hf"><label>Unit of Measure</label>
          <select class="sc-inp" id="si-uom" style="width:100%;">
            <option value="each">Each</option>
            <option value="box">Box</option>
            <option value="pack">Pack</option>
            <option value="roll">Roll</option>
            <option value="bottle">Bottle</option>
            <option value="pair">Pair</option>
          </select>
        </div>
      </div>
      <div class="hf"><label>Description</label><input class="sc-inp" id="si-description" placeholder="Optional description" style="width:100%;"></div>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
        <div class="hf"><label>Units/Pack</label><input class="sc-inp" id="si-units-per-pack" type="number" min="1" value="1" style="width:100%;"></div>
        <div class="hf"><label>Unit Cost ($)</label><input class="sc-inp" id="si-unit-cost" type="number" step="0.01" min="0" placeholder="0.00" style="width:100%;"></div>
        <div class="hf"><label>Reorder Point</label><input class="sc-inp" id="si-reorder-point" type="number" min="0" value="0" style="width:100%;"></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Reorder Qty</label><input class="sc-inp" id="si-reorder-qty" type="number" min="0" value="0" style="width:100%;"></div>
        <div class="hf"><label>Notes</label><input class="sc-inp" id="si-notes" placeholder="Optional notes" style="width:100%;"></div>
      </div>
      <div class="hf"><label>Vendor</label>
        <select class="sc-inp" id="si-vendor" style="width:100%;">
          <option value="">— No Vendor —</option>
        </select>
      </div>
      <!-- Image upload -->
      <div class="hf">
        <label>Product Image</label>
        <div id="si-image-preview" style="margin-bottom:6px;"></div>
        <input type="file" id="si-image-file" accept="image/png,image/jpeg,image/webp"
          style="font-family:monospace;font-size:11px;" aria-label="Upload product image">
        <div id="si-image-status" style="font-family:monospace;font-size:10px;color:#8a9bb0;margin-top:2px;"></div>
      </div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-supply-item')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveSupplyItemFromModal()">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Receive Stock -->
<div id="modal-supply-receive" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Receive Stock &mdash; <span id="sr-item-name" style="font-family:monospace;color:#9ecbff;"></span></div>
      <button onclick="closeSupplyModal('modal-supply-receive')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="sr-item-id">
      <div class="hf"><label>Location</label>
        <select class="sc-inp" id="sr-location" style="width:100%;"></select>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Quantity</label><input class="sc-inp" id="sr-qty" type="number" min="1" value="1" style="width:100%;"></div>
        <div class="hf"><label>Unit Cost ($)</label><input class="sc-inp" id="sr-unit-cost" type="number" step="0.01" min="0" placeholder="0.00" style="width:100%;"></div>
      </div>
      <div class="hf"><label>Reference Note</label><input class="sc-inp" id="sr-note" placeholder="e.g. PO #12345" style="width:100%;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-supply-receive')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="confirmReceiveStock()">Receive</button>
      </div>
    </div>
  </div>
</div>

<!-- Issue Stock to Tech -->
<div id="modal-supply-issue" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Issue Stock &mdash; <span id="sis-item-name" style="font-family:monospace;color:#9ecbff;"></span></div>
      <button onclick="closeSupplyModal('modal-supply-issue')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="sis-item-id">
      <div id="sis-avail-info" style="font-family:monospace;font-size:11px;color:#8a9bb0;"></div>
      <div class="hf"><label>Technician</label>
        <select class="sc-inp" id="sis-tech" style="width:100%;"></select>
      </div>
      <div class="hf"><label>Source Location</label>
        <select class="sc-inp" id="sis-location" style="width:100%;"></select>
      </div>
      <div class="hf"><label>Quantity</label><input class="sc-inp" id="sis-qty" type="number" min="1" value="1" style="width:100%;"></div>
      <div class="hf"><label>Reference Note</label><input class="sc-inp" id="sis-note" placeholder="Optional" style="width:100%;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-supply-issue')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="confirmIssueStock()">Issue</button>
      </div>
    </div>
  </div>
</div>

<!-- Stock Detail (by location) -->
<div id="modal-supply-stock-detail" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Stock Detail &mdash; <span id="ssd-item-name" style="font-family:monospace;color:#9ecbff;"></span></div>
      <button onclick="closeSupplyModal('modal-supply-stock-detail')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;">
      <div id="ssd-table"></div>
    </div>
  </div>
</div>

<!-- Location Detail (items at this location) -->
<div id="modal-location-detail" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div id="sld-title" style="font-size:14px;font-weight:700;font-family:monospace;">Location Detail</div>
      <button onclick="closeSupplyModal('modal-location-detail')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div id="sld-subheader" style="padding:10px 18px;background:#f4f8fd;border-bottom:1px solid #e8ecf2;font-family:monospace;font-size:11px;color:#5a7090;"></div>
    <div style="padding:14px 18px;">
      <div id="sld-table"></div>
    </div>
    <div id="sld-footer" style="padding:10px 18px;border-top:1px solid #e8ecf2;font-family:monospace;font-size:11px;color:#8a9bb0;text-align:right;"></div>
  </div>
</div>

<!-- Add/Edit Supply Location -->
<div id="modal-supply-location" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;" id="sl-modal-title">Add Location</div>
      <button onclick="closeSupplyModal('modal-supply-location')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="sl-id">
      <div class="hf"><label>Name</label><input class="sc-inp" id="sl-name" placeholder="e.g. Main Office" style="width:100%;"></div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Type</label>
          <select class="sc-inp" id="sl-type" style="width:100%;">
            <option value="office">Office</option>
            <option value="vehicle">Vehicle</option>
            <option value="field_kit">Field Kit</option>
          </select>
        </div>
        <div class="hf"><label>Linked User (optional)</label>
          <select class="sc-inp" id="sl-user" style="width:100%;">
            <option value="">— None —</option>
          </select>
        </div>
      </div>
      <div class="hf"><label>Address</label><input class="sc-inp" id="sl-address" placeholder="Optional address" data-places="true" style="width:100%;"></div>
      <div class="hf"><label>Notes</label><input class="sc-inp" id="sl-notes" placeholder="Optional notes" style="width:100%;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-supply-location')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveLocationFromModal()">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Add/Edit Vendor -->
<div id="modal-vendor" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;" id="sv-modal-title">Add Vendor</div>
      <button onclick="closeSupplyModal('modal-vendor')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="sv-id">
      <div class="hf"><label>Company Name *</label><input class="sc-inp" id="sv-company-name" placeholder="e.g. Natus Medical" style="width:100%;"></div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Contact Name</label><input class="sc-inp" id="sv-contact-name" placeholder="e.g. John Smith" style="width:100%;"></div>
        <div class="hf"><label>Phone</label><input class="sc-inp" id="sv-phone" placeholder="(xxx) xxx-xxxx" maxlength="14" style="width:100%;"></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Email</label><input class="sc-inp" id="sv-email" type="email" placeholder="vendor@example.com" style="width:100%;"></div>
        <div class="hf"><label>Website</label><input class="sc-inp" id="sv-website" placeholder="https://..." style="width:100%;"></div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
        <div class="hf"><label>Account Number</label><input class="sc-inp" id="sv-account-number" placeholder="Optional" style="width:100%;"></div>
        <div class="hf"><label>Payment Terms</label><input class="sc-inp" id="sv-payment-terms" placeholder="e.g. Net 30" style="width:100%;"></div>
      </div>
      <div class="hf"><label>Address</label><input class="sc-inp" id="sv-address" placeholder="Optional address" data-places="true" style="width:100%;"></div>
      <div class="hf"><label>Notes</label><textarea class="sc-inp" id="sv-notes" placeholder="Optional notes" rows="2" style="width:100%;resize:vertical;"></textarea></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-vendor')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveVendorFromModal()">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Transfer Stock -->
<div id="modal-transfer-stock" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Transfer Stock &mdash; <span id="st-item-name" style="font-family:monospace;color:#9ecbff;"></span></div>
      <button onclick="closeSupplyModal('modal-transfer-stock')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="st-item-id">
      <div class="hf"><label>Item</label>
        <select class="sc-inp" id="st-item-select" style="width:100%;" onchange="onTransferItemChange()"></select>
      </div>
      <div class="hf"><label>From Location</label>
        <select class="sc-inp" id="st-from-location" style="width:100%;" onchange="onTransferFromChange()"></select>
      </div>
      <div class="hf"><label>To Location</label>
        <select class="sc-inp" id="st-to-location" style="width:100%;"></select>
      </div>
      <div class="hf"><label>Quantity</label>
        <input class="sc-inp" id="st-qty" type="number" min="1" value="1" style="width:100%;">
        <div id="st-avail-hint" style="font-family:monospace;font-size:10px;color:#8a9bb0;margin-top:2px;"></div>
      </div>
      <div class="hf"><label>Note (optional)</label><input class="sc-inp" id="st-note" placeholder="e.g. Restocking vehicle" style="width:100%;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-transfer-stock')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveTransferStock()">Transfer</button>
      </div>
    </div>
  </div>
</div>

<!-- Return Stock from Tech -->
<div id="modal-return-stock" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Return from Tech &mdash; <span id="srt-item-name" style="font-family:monospace;color:#9ecbff;"></span></div>
      <button onclick="closeSupplyModal('modal-return-stock')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="srt-item-id">
      <div class="hf"><label>Item</label>
        <select class="sc-inp" id="srt-item-select" style="width:100%;" onchange="onReturnItemChange()"></select>
      </div>
      <div class="hf"><label>Technician</label>
        <select class="sc-inp" id="srt-tech" style="width:100%;" onchange="onReturnTechChange()"></select>
      </div>
      <div id="srt-tech-hint" style="font-family:monospace;font-size:10px;color:#8a9bb0;"></div>
      <div class="hf"><label>Return To</label>
        <select class="sc-inp" id="srt-to-location" style="width:100%;"></select>
      </div>
      <div class="hf"><label>Quantity</label><input class="sc-inp" id="srt-qty" type="number" min="1" value="1" style="width:100%;"></div>
      <div class="hf"><label>Note (optional)</label><input class="sc-inp" id="srt-note" placeholder="Optional" style="width:100%;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-return-stock')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveReturnStock()">Return</button>
      </div>
    </div>
  </div>
</div>

<!-- Write-off Stock -->
<div id="modal-writeoff-stock" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Write Off Stock &mdash; <span id="swo-item-name" style="font-family:monospace;color:#9ecbff;"></span></div>
      <button onclick="closeSupplyModal('modal-writeoff-stock')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="swo-item-id">
      <div class="hf"><label>Item</label>
        <select class="sc-inp" id="swo-item-select" style="width:100%;" onchange="onWriteoffItemChange()"></select>
      </div>
      <div class="hf"><label>Location</label>
        <select class="sc-inp" id="swo-location" style="width:100%;" onchange="onWriteoffLocationChange()"></select>
      </div>
      <div class="hf"><label>Quantity</label>
        <input class="sc-inp" id="swo-qty" type="number" min="1" value="1" style="width:100%;">
        <div id="swo-avail-hint" style="font-family:monospace;font-size:10px;color:#8a9bb0;margin-top:2px;"></div>
      </div>
      <div class="hf"><label>Reason *</label><input class="sc-inp" id="swo-reason" placeholder="e.g. Expired, Damaged" style="width:100%;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-writeoff-stock')">Cancel</button>
        <button class="btn btn-p btn-sm" style="background:#c0392b;border-color:#c0392b;" onclick="saveWriteoffStock()">Write Off</button>
      </div>
    </div>
  </div>
</div>

<!-- Adjust Stock -->
<div id="modal-adjust-stock" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;width:94%;max-width:460px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);">
    <div style="background:#0d1f3c;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:700;">Adjust Stock &mdash; <span id="sadj-item-name" style="font-family:monospace;color:#9ecbff;"></span></div>
      <button onclick="closeSupplyModal('modal-adjust-stock')" style="background:none;border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;">&#10005;</button>
    </div>
    <div style="padding:14px 18px;display:flex;flex-direction:column;gap:10px;">
      <input type="hidden" id="sadj-item-id">
      <div class="hf"><label>Item</label>
        <select class="sc-inp" id="sadj-item-select" style="width:100%;" onchange="onAdjustItemChange()"></select>
      </div>
      <div class="hf"><label>Location</label>
        <select class="sc-inp" id="sadj-location" style="width:100%;" onchange="onAdjustLocationChange()"></select>
      </div>
      <div id="sadj-current-qty" style="font-family:monospace;font-size:12px;color:#1a2d4a;padding:6px 0;font-weight:700;"></div>
      <div class="hf"><label>Actual Count</label><input class="sc-inp" id="sadj-qty" type="number" min="0" value="0" style="width:100%;"></div>
      <div class="hf"><label>Note (optional)</label><input class="sc-inp" id="sadj-note" placeholder="e.g. Physical count 2026-04-12" style="width:100%;"></div>
      <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px;">
        <button class="btn btn-o btn-sm" onclick="closeSupplyModal('modal-adjust-stock')">Cancel</button>
        <button class="btn btn-p btn-sm" onclick="saveAdjustStock()">Adjust</button>
      </div>
    </div>
  </div>
</div>

<!-- Rate editor modal mount point (Preact) — at body level so it works from any panel -->
<div id="cd-rate-editor-mount"></div>
<!-- v1.14.2 — PIN reveal modal mount point (Preact) — shown once after Sub-D / Sub-E creates a portal user. -->
<div id="pin-reveal-mount"></div>
</body>
</html>