/* Muir PowerSync styles - extracted from index.html */
:root {
  --bg-dark: #0f172a;
  --card-dark: #1e293b;
  --primary: #38bdf8;
  --success: #4ade80;
  --warning: #f59e0b;
  --danger: #f87171;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border: #334155;
  --input-bg: #0f172a;
  --ir-accent: #2dd4bf;
  --chat-accent: #a855f7;
  --commission-accent: #eab308;
  --daily-accent: #818cf8;
  --notes-accent: #fb7185;
  --parts-accent: #fb923c;
  /* Typography scale - consolidates what had drifted into 16+
               near-identical one-off sizes (0.66rem, 0.68rem, 0.72rem...)
               picked ad hoc as features were added over time, with no
               functional difference between neighbors. Deliberately
               doesn't include h1 (1.4rem) or .stat-val (1.8rem) - both
               are intentional standalone "hero" sizes doing a distinct
               job, not part of this small-text scale. */
  --fs-2xs: 0.7rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.1rem;
  /* Border-radius scale - this one was already a mostly-coherent
               progressive system (small elements -> cards -> panels ->
               pills), just not tokenized. Only real fix: 6px and 8px had
               no functional distinction between them and are merged into
               one step. .battery-container's 2px is deliberately left
               alone - a tiny decorative indicator, not part of this
               content-radius scale. */
  --radius-2xs: 4px;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 20px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* Safe-area insets are added to the base padding rather than replacing
           it. The previous rule set padding-top to the inset outright, so on
           any device or WebView reporting no inset the top padding collapsed to
           zero and the heading sat against the status bar. The bottom inset is
           new and matters more once this is a native app: without it, content
           and the update banner sit underneath the iOS home indicator.
           These only report a real value when the viewport meta says
           viewport-fit=cover, which it now does. */
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  max-width: 600px;
  margin: 0 auto;
}

/* Battery Animation */
.battery-container {
  display: inline-block;
  width: 24px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
  position: relative;
  margin-right: 8px;
}
.battery-container::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 2px;
  width: 2px;
  height: 6px;
  background: currentColor;
  border-radius: 1px;
}
.battery-fill {
  height: 100%;
  width: 0%;
  background: currentColor;
  transition: width 0.3s ease;
}
@keyframes charging {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes sync-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
.sync-pulse {
  animation: sync-pulse 0.4s ease;
}
.charging .battery-fill {
  animation: charging 1.5s infinite;
}
.warning-highlight {
  border: 2px solid var(--warning) !important;
  box-shadow: 0 0 5px var(--warning);
}

/* Print-to-PDF Styles */
@media print {
  :root {
    --bg-dark: #ffffff;
    --card-dark: #f3f4f6;
    --primary: #0369a1;
    --success: #15803d;
    --warning: #b45309;
    --danger: #b91c1c;
    --text-main: #111827;
    --text-muted: #4b5563;
    --border: #d1d5db;
    --input-bg: #ffffff;
    --ir-accent: #0f766e;
  }
  body {
    background: #fff;
    color: #000;
  }
  .btn,
  .action-tray,
  .btn-folder-toggle,
  #syncBtn,
  .header,
  .search-box,
  .log-list,
  .form-panel {
    display: none !important;
  }
  #viewPanel {
    display: block !important;
    border: none;
  }
  .view-data-point {
    border: 1px solid #ccc;
    color: #000;
  }
  .section-title {
    color: #000;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
  }
  .status-pill {
    border: 1px solid currentColor;
  }
  #printLetterhead,
  #printFooter {
    display: block !important;
  }
  body.printing-stock #dashboardView,
  body.printing-stock #formView,
  body.printing-stock #viewPanel,
  body.printing-stock #stockCheckView,
  body.printing-stock body.printing-stock #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-stock #printStockList {
    display: block !important;
  }
  body.printing-equipment #dashboardView,
  body.printing-equipment #formView,
  body.printing-equipment #viewPanel,
  body.printing-equipment #stockCheckView,
  body.printing-equipment body.printing-equipment #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-equipment #printEquipmentList {
    display: block !important;
  }
  body.printing-service-summary #dashboardView,
  body.printing-service-summary #formView,
  body.printing-service-summary #viewPanel,
  body.printing-service-summary #stockCheckView,
  body.printing-service-summary #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-service-summary #printServiceSummary {
    display: block !important;
  }
  body.printing-stockcheck #dashboardView,
  body.printing-stockcheck #formView,
  body.printing-stockcheck #viewPanel,
  body.printing-stockcheck #stockCheckView,
  body.printing-stockcheck body.printing-stockcheck #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-stockcheck #printStockCheckReport {
    display: block !important;
  }
  body.printing-ppe #dashboardView,
  body.printing-ppe #formView,
  body.printing-ppe #viewPanel,
  body.printing-ppe #stockCheckView,
  body.printing-ppe #gatekeeperOverlay,
  body.printing-ppe .app-modal-overlay {
    display: none !important;
  }
  body.printing-ppe #printPpeSheet {
    display: block !important;
  }
  body.printing-commissioning-report #dashboardView,
  body.printing-commissioning-report #formView,
  body.printing-commissioning-report #viewPanel,
  body.printing-commissioning-report #stockCheckView,
  body.printing-commissioning-report #commissioningView,
  body.printing-commissioning-report #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-commissioning-report #commissioningViewPanel {
    display: block !important;
    border: none;
  }
  body.printing-commissioning-report #commissioningPrintLetterhead,
  body.printing-commissioning-report #commissioningPrintFooter {
    display: block !important;
  }
  body.printing-daily-update #dashboardView,
  body.printing-daily-update #formView,
  body.printing-daily-update #viewPanel,
  body.printing-daily-update #stockCheckView,
  body.printing-daily-update #commissioningView,
  body.printing-daily-update #commissioningViewPanel,
  body.printing-daily-update #dailyUpdateView,
  body.printing-daily-update #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-daily-update #dailyUpdateViewPanel {
    display: block !important;
    border: none;
  }
  body.printing-daily-update #dailyUpdatePrintLetterhead,
  body.printing-daily-update #dailyUpdatePrintFooter {
    display: block !important;
  }
  body.printing-fault-report #dashboardView,
  body.printing-fault-report #formView,
  body.printing-fault-report #viewPanel,
  body.printing-fault-report #stockCheckView,
  body.printing-fault-report #commissioningView,
  body.printing-fault-report #commissioningViewPanel,
  body.printing-fault-report #faultReportView,
  body.printing-fault-report #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-fault-report #faultReportViewPanel {
    display: block !important;
    border: none;
  }
  body.printing-fault-report #faultReportPrintLetterhead,
  body.printing-fault-report #faultReportPrintFooter {
    display: block !important;
  }
  body.printing-service-report #dashboardView,
  body.printing-service-report #formView,
  body.printing-service-report #viewPanel,
  body.printing-service-report #stockCheckView,
  body.printing-service-report #commissioningView,
  body.printing-service-report #commissioningViewPanel,
  body.printing-service-report #faultReportView,
  body.printing-service-report #faultReportViewPanel,
  body.printing-service-report #serviceReportView,
  body.printing-service-report #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-service-report #serviceReportViewPanel {
    display: block !important;
    border: none;
  }
  body.printing-service-report #serviceReportPrintLetterhead,
  body.printing-service-report #serviceReportPrintFooter {
    display: block !important;
  }
  body.printing-electrical-test #dashboardView,
  body.printing-electrical-test #formView,
  body.printing-electrical-test #viewPanel,
  body.printing-electrical-test #stockCheckView,
  body.printing-electrical-test #commissioningView,
  body.printing-electrical-test #commissioningViewPanel,
  body.printing-electrical-test #faultReportView,
  body.printing-electrical-test #faultReportViewPanel,
  body.printing-electrical-test #serviceReportView,
  body.printing-electrical-test #serviceReportViewPanel,
  body.printing-electrical-test #electricalTestView,
  body.printing-electrical-test #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-electrical-test #electricalTestViewPanel {
    display: block !important;
    border: none;
  }
  body.printing-electrical-test #electricalTestPrintLetterhead,
  body.printing-electrical-test #electricalTestPrintFooter {
    display: block !important;
  }
  body.printing-daily-activity-report #dashboardView,
  body.printing-daily-activity-report #formView,
  body.printing-daily-activity-report #viewPanel,
  body.printing-daily-activity-report #stockCheckView,
  body.printing-daily-activity-report #commissioningView,
  body.printing-daily-activity-report #commissioningViewPanel,
  body.printing-daily-activity-report #faultReportView,
  body.printing-daily-activity-report #faultReportViewPanel,
  body.printing-daily-activity-report #serviceReportView,
  body.printing-daily-activity-report #serviceReportViewPanel,
  body.printing-daily-activity-report #electricalTestView,
  body.printing-daily-activity-report #electricalTestViewPanel,
  body.printing-daily-activity-report #dailyUpdateView,
  body.printing-daily-activity-report #dailyUpdateViewPanel,
  body.printing-daily-activity-report #gatekeeperOverlay {
    display: none !important;
  }
  body.printing-daily-activity-report #darCompletedDayPanel {
    display: block !important;
    border: none;
  }
  body.printing-daily-activity-report #darCompletedDayPanel > *:not(#darPrintArea) {
    display: none !important;
  }
  body.printing-daily-activity-report #darPrintArea {
    display: block !important;
  }
  #darPrintTable th,
  #darPrintTable td {
    border: 1px solid #999;
    padding: 3px 4px;
    text-align: left;
    vertical-align: top;
  }
  #darPrintTable th {
    background: #e5e7eb;
    font-weight: 700;
  }
  /* Named page scoping - only this print area goes landscape,
               every other report's print stays portrait as before. */
  #darPrintArea {
    page: darLandscape;
  }
  @page darLandscape {
    size: landscape;
    margin: 10mm;
  }
  #printStockList table,
  #printEquipmentList table,
  #printStockCheckReport table,
  #printPpeSheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-xs);
  }
  #printStockList th,
  #printEquipmentList th,
  #printStockCheckReport th,
  #printPpeSheet th {
    text-align: left;
    padding: 6px 4px;
    border-bottom: 2px solid #000;
  }
  #printStockList td,
  #printEquipmentList td,
  #printStockCheckReport td,
  #printPpeSheet td {
    padding: 6px 4px;
    border-bottom: 1px solid #ccc;
  }
  @page {
    margin: 14mm;
  }
}

/* Existing UI Elements */
#gatekeeperOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0f172a;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.gatekeeper-card {
  background: var(--card-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  text-align: center;
}
.gatekeeper-input {
  margin-top: 16px;
  text-align: center;
  font-size: var(--fs-lg);
  letter-spacing: 1px;
}
/* In-app modal — replaces native alert/confirm/prompt so dialogs
           match the app's own look instead of the browser chrome. Driven
           entirely by appAlert()/appConfirm()/appPrompt() in the script
           below; this is just the shared shell. */
.app-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
/* The shared alert/confirm/prompt box must always sit above every
           other modal (including the photo lightbox at 20000) - it can be
           triggered from inside any of them, e.g. the duplicate-asset
           warning fired while the Add Asset modal is still open. */
#appModalOverlay {
  z-index: 21000;
}
.app-modal-box {
  background: var(--card-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.app-modal-message {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-main);
  white-space: pre-line;
  margin-bottom: 16px;
}
.app-modal-input-wrap input {
  margin-bottom: 16px;
}
.app-modal-actions {
  display: flex;
  gap: 10px;
}
.app-modal-actions .btn,
.app-modal-actions .btn-secondary {
  margin-bottom: 0;
  flex: 1;
  width: auto;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
h1 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--primary);
}
.status-badge {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
}
.status-badge.synced {
  background: rgba(74, 222, 128, 0.1);
  color: var(--success);
}
.status-badge.offline {
  background: rgba(248, 113, 113, 0.15);
  color: var(--danger);
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card-dark);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
}
/* Cards previously relied on a 1px border alone for definition
           against the near-identical dark page background - this soft
           shadow gives them a touch of lift without changing layout or
           risking any measurements. Applies to the main content card
           types; doesn't touch overlays/modals, which already have their
           own stronger shadow for a different reason (floating above
           everything, not just resting on the page). */
.stat-card,
.equipment-card,
.part-card,
.tower-card,
.log-item,
.form-panel {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.stat-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}
.stat-lbl {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
}
.btn {
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  transition:
    transform 0.1s ease,
    filter 0.1s ease;
}
.btn:active,
.btn-secondary:active,
.btn-action:active,
.btn-folder-toggle:active,
.btn-subfolder-toggle:active,
.btn-proc-tab:active,
.checklist-toggle:active {
  transform: scale(0.97);
  filter: brightness(0.92);
}
.btn,
.btn-secondary,
.btn-action,
.btn-folder-toggle,
.btn-subfolder-toggle,
.btn-proc-tab,
.checklist-toggle {
  transition:
    transform 0.1s ease,
    filter 0.1s ease;
}
.btn-primary {
  background-color: var(--primary);
  color: #000;
}
.btn-success {
  background-color: transparent;
  border: 2px solid var(--success);
  color: var(--success);
}
.btn-secondary {
  /* Same full-size footprint as .btn - CLOSE/CANCEL buttons used to
     render at tiny native-button size, easy to miss on a phone. Rows
     that genuinely need a small pill (STAMP, OPEN) override with
     inline padding/margin, which wins over this. */
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  background-color: var(--card-dark);
  border: 1px solid var(--border);
  color: var(--text-main);
}
.action-tray {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.btn-action {
  width: 100%;
  background: #1e293b;
  border: 1px dashed var(--border);
  color: var(--text-main);
  padding: 12px;
  font-size: var(--fs-sm);
  font-weight: bold;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-align: center;
}
.btn-action.active-panel {
  background: rgba(56, 189, 248, 0.1);
  border-color: var(--primary);
}
.btn-action.fault-active {
  background: rgba(248, 113, 113, 0.1);
  border-color: var(--danger);
  color: var(--danger);
}
.search-box {
  position: relative;
  margin-bottom: 14px;
}
.search-box input {
  padding-left: 40px;
  background: var(--card-dark);
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--fs-lg);
}
.chat-stream {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-right: 4px;
}
.chat-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: bold;
}
.chat-input-row {
  display: flex;
  gap: 8px;
}
.chat-input-row input {
  padding: 10px;
  font-size: var(--fs-sm);
}
.form-panel {
  display: none;
  background: var(--card-dark);
  padding: 20px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  margin-bottom: 30px;
}
/* Viewer role (clients, read-only access): hides every dashboard
           button except Field Overview, Switch User, and Switch Project.
           A UI-level courtesy restriction, not a security boundary. */
/* ── Viewer / Supervisor role ──────────────────────────────────────
           Full read + email/print access. Every write action is hidden.
           Sections that were previously blocked entirely are now visible
           so a supervisor can open reports and email them — the individual
           buttons inside that would create, edit, or delete are hidden below.
           CSS-only, matches the existing pattern. Not a security boundary —
           the backend enforces that independently. */

/* Dashboard: hide all logging/action buttons, keep Field Overview,
           Switch User, Switch Project, and Force Sync (read-only trigger) */
body.viewer-role [onclick='openForm()'],
body.viewer-role [onclick='openDailyUpdateView()'],
body.viewer-role [onclick='openProjectNotesView()'],
body.viewer-role [onclick='openFaultReportForm()'],
body.viewer-role [onclick='openServiceReportForm()'],
body.viewer-role [onclick='openCommissioningForm()'],
body.viewer-role [onclick='openElectricalTestForm()'],
body.viewer-role [onclick='clearAllLogs()'],
body.viewer-role #allJobsSection {
  display: none !important;
}

/* Parts & Equipment folders: keep visible but hide all write actions */
body.viewer-role [onclick='openAddPartModal()'],
body.viewer-role [onclick='openAddAssetModal()'],
body.viewer-role [onclick='saveInlineStockCheck()'],
body.viewer-role #partsTabCheckBtn,
body.viewer-role [onclick*='startEditAssetRow'],
body.viewer-role [onclick*='confirmDeleteAsset'] {
  display: none !important;
}

/* Log / DAR view panel: hide Edit, Clone, Delete */
body.viewer-role #btnEditEntry,
body.viewer-role #btnCloneEntry,
body.viewer-role #btnDeleteLogEntry {
  display: none !important;
}

/* Completed day panel: hide Edit/reopen and Delete, keep Email + PDF */
body.viewer-role [onclick='reopenCompletedDay()'],
body.viewer-role #btnDeleteCompletedDay {
  display: none !important;
}

/* Commissioning view panel: hide Edit, Clone, Delete */
body.viewer-role [onclick='editCommissioningReport()'],
body.viewer-role [onclick='cloneCommissioningReport()'] {
  display: none !important;
}

/* Fault report view panel: hide Edit, Delete */
body.viewer-role [onclick='editFaultReport()'],
body.viewer-role #btnDeleteFaultReport {
  display: none !important;
}

/* Service report view panel: hide Edit */
body.viewer-role [onclick='editServiceReport()'] {
  display: none !important;
}

/* Electrical test view panel: hide Edit */
body.viewer-role [onclick='editElectricalTest()'] {
  display: none !important;
}

/* Daily Status Log view panel: hide Edit, Delete */
body.viewer-role [onclick='editDailyUpdateSession()'],
body.viewer-role #btnDeleteDailyUpdate {
  display: none !important;
}

/* Daily Activity Report form: hide the entire add-block form and
           complete/send buttons — viewer should only see the history tab */
body.viewer-role #darAddBlockToggleBtn,
body.viewer-role #darAddBlockPanel,
body.viewer-role [onclick='completeDailyActivityReport()'],
body.viewer-role [onclick='sendDailyActivityReport()'] {
  display: none !important;
}

/* Project Notes: hide save button (can still read notes) */
body.viewer-role [onclick='saveProjectNote()'] {
  display: none !important;
}

/* Asset List: hide Add Asset button */
body.viewer-role [onclick='openAddAssetModal()'] {
  display: none !important;
}

/* Daily Status Log edit tab: hide Save, Add Location, Add Asset buttons.
           Viewer can still open the view tab to read the latest snapshot. */
body.viewer-role [onclick='saveTodaySession()'],
body.viewer-role [onclick='showAddLocationModal()'],
body.viewer-role [onclick='showAddAssetFromDailyUpdate()'] {
  display: none !important;
}

/* Field Overview refresh button stays visible for viewers */
body.viewer-role #fieldOverviewRefreshBtn {
  display: block !important;
}
.form-panel.active {
  display: block;
}
.part-used-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr) 72px 42px;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
  padding: 10px;
  background: #111827;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.part-used-row .form-group {
  margin-bottom: 0;
}
.part-used-row input {
  padding: 11px;
  font-size: var(--fs-sm);
}
.part-remove {
  height: 42px;
  border: 1px solid var(--danger);
  background: rgba(248, 113, 113, 0.08);
  color: var(--danger);
  border-radius: var(--radius-xs);
  font-weight: 800;
  cursor: pointer;
}
.ir-point-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 56px 42px;
  grid-template-areas: 'desc r1 r10 pi remove';
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
  padding: 10px;
  background: #111827;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ir-point-row .form-group {
  margin-bottom: 0;
}
.ir-point-row input {
  padding: 11px;
  font-size: var(--fs-sm);
}
.ir-point-row .ir-point-description {
  grid-area: desc;
}
.ir-point-row .ir-r1 {
  grid-area: r1;
}
.ir-point-row .ir-r10 {
  grid-area: r10;
}
.ir-point-row .ir-pi-group {
  grid-area: pi;
}
.ir-point-row .part-remove {
  grid-area: remove;
}
.ir-pi-display {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-xs);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: #0f172a;
  color: var(--text-muted);
  text-align: center;
}
.ir-pi-display.pi-ready {
  color: var(--ir-accent);
  border-color: var(--ir-accent);
}
@media (max-width: 600px) {
  .ir-point-row {
    grid-template-columns: 1fr 1fr 1fr 42px;
    grid-template-areas: 'desc desc desc desc' 'r1 r10 pi remove';
  }
}
.part-used-row .part-description {
  position: relative;
}
.part-suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card-dark);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xs);
  margin-top: 4px;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}
.part-suggest-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.part-suggest-item:last-child {
  border-bottom: none;
}
.part-suggest-item:active,
.part-suggest-item:hover {
  background: #334155;
}
.part-suggest-pn {
  font-weight: 800;
  color: var(--primary);
  font-size: var(--fs-xs);
}
.part-suggest-desc {
  font-size: var(--fs-xs);
  color: var(--text-main);
  margin-top: 1px;
}
.part-suggest-model {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.part-suggest-empty {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 600px) {
  .part-used-row {
    grid-template-columns: 1fr 1fr 62px 42px;
  }
  .part-used-row .part-description {
    grid-column: 1 / -1;
  }
}
.section-title {
  font-size: var(--fs-md);
  color: var(--primary);
  text-transform: uppercase;
  margin: 20px 0 12px 0;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.form-group {
  margin-bottom: 14px;
}
label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
input,
select,
textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 14px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-md);
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
}
textarea {
  min-height: 80px;
  resize: none;
}
.expand-panel {
  display: none;
  background: #111827;
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.expand-panel.fault-border {
  border-left: 4px solid var(--danger);
}
.expand-panel.service-border {
  border-left: 4px solid var(--success);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.status-pill.status-ok {
  background: rgba(74, 222, 128, 0.12);
  color: var(--success);
}
.status-pill.status-due {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}
.status-pill.status-overdue {
  background: rgba(248, 113, 113, 0.14);
  color: var(--danger);
}
.status-pill.status-unknown {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}
.service-due-banner {
  display: none;
  padding: 12px;
  border-radius: var(--radius-xs);
  margin-bottom: 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  align-items: center;
  gap: 8px;
}
.service-due-banner.status-ok {
  display: flex;
  background: rgba(74, 222, 128, 0.08);
  color: var(--success);
  border: 1px solid rgba(74, 222, 128, 0.3);
}
.service-due-banner.status-due {
  display: flex;
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.service-due-banner.status-overdue {
  display: flex;
  background: rgba(248, 113, 113, 0.1);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.4);
}
.checklist-group {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.checklist-group-header {
  background: #1e293b;
  padding: 10px 12px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.4px;
}
.checklist-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  gap: 10px;
  background: #0f172a;
}
.checklist-item-label {
  font-size: var(--fs-xs);
  color: var(--text-main);
}
.checklist-toggle {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: #111827;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  min-width: 78px;
  text-align: center;
}
.checklist-toggle.state-ok {
  border-color: var(--success);
  color: var(--success);
  background: rgba(74, 222, 128, 0.08);
}
.checklist-toggle.state-changed {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(56, 189, 248, 0.08);
}
.checklist-toggle.state-na {
  border-color: var(--text-muted);
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.06);
}
.checklist-toggle.state-fail {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(248, 113, 113, 0.1);
}
.checklist-toggle.state-repaired {
  border-color: var(--success);
  color: var(--success);
  background: rgba(74, 222, 128, 0.1);
}
.checklist-issue-block {
  padding: 8px 12px 12px;
  border-top: 1px dashed var(--border);
  background: rgba(248, 113, 113, 0.04);
}
.checklist-issue-block textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-main);
  font-size: var(--fs-xs);
  resize: vertical;
}
.checklist-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 8px 4px 4px;
}
.view-checklist-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.view-checklist-header {
  background: var(--input-bg);
  padding: 8px 10px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary);
}
.view-checklist-item {
  display: flex;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: var(--fs-xs);
  border-top: 1px solid var(--border);
}
.view-checklist-item span:last-child {
  font-weight: 700;
}
.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 280px;
}
.spec-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.spec-table tr:last-child td {
  border-bottom: none;
}
.spec-table td:first-child {
  color: var(--text-muted);
  font-weight: 600;
  width: 55%;
}
.spec-table td:last-child {
  color: var(--text-main);
  font-weight: 700;
  text-align: right;
}
.log-list {
  margin-top: 10px;
}
.log-item {
  background: var(--card-dark);
  padding: 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  border-left: 4px solid var(--primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.log-item.has-fault {
  border-left: 4px solid var(--danger);
}
.log-item.pending {
  border-left: 4px solid var(--warning);
}
.log-item:active {
  background: #334155;
}
.log-info h4 {
  font-size: var(--fs-sm);
  margin-bottom: 2px;
}
.log-info p {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.note-item {
  background: var(--card-dark);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  border-left: 4px solid var(--notes-accent);
}
.view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.view-data-point {
  background: var(--input-bg);
  padding: 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.view-lbl {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
}
.view-val {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-main);
}

.btn-folder-toggle {
  width: 100%;
  background: #111827;
  border: 1px dashed var(--success);
  color: var(--success);
  padding: 14px;
  font-size: var(--fs-sm);
  font-weight: 800;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.btn-folder-toggle.folder-open {
  background: rgba(74, 222, 128, 0.05);
  border-style: solid;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.folder-content {
  display: none;
  background: #111827;
  border: 1px solid var(--success);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  padding: 14px;
  margin-bottom: 20px;
}
.btn-manual-link {
  background: var(--card-dark);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 14px 10px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
}
.btn-manual-link:hover,
.btn-manual-link:active {
  border-color: var(--success);
  color: var(--success);
  background: rgba(74, 222, 128, 0.05);
}
.manual-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.btn-subfolder-toggle {
  width: 100%;
  background: #1e293b;
  border: 1px solid var(--border);
  color: var(--primary);
  padding: 12px;
  font-size: var(--fs-sm);
  font-weight: 800;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  text-transform: uppercase;
}
.btn-subfolder-toggle.subfolder-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.proc-tab-container {
  display: none;
  background: #111827;
  border: 1px solid var(--border);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 10px;
}
.btn-proc-tab {
  width: 100%;
  background: var(--card-dark);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.btn-proc-tab:first-child {
  margin-top: 0;
}
.btn-proc-tab.tab-open {
  border-color: var(--primary);
  color: var(--primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.proc-card {
  display: none;
  background: #0f172a;
  border: 1px solid var(--primary);
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 14px;
  margin-bottom: 8px;
}
.proc-sub-sect {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.proc-sub-sect span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: bold;
  text-transform: uppercase;
}
.proc-card ul {
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: var(--text-main);
}
.proc-card li {
  margin-bottom: 4px;
}

.part-card {
  background: var(--card-dark);
  padding: 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--warning);
  margin-bottom: 10px;
}
.part-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.part-info h4 {
  font-size: var(--fs-lg);
  color: var(--text-main);
  margin-bottom: 4px;
  font-weight: 800;
}
.part-info p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.part-model {
  font-size: var(--fs-2xs);
  background: rgba(56, 189, 248, 0.1);
  color: var(--primary);
  padding: 4px 8px;
  border-radius: var(--radius-2xs);
  text-transform: uppercase;
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
}
/* Unified parts row - one shared row shape/height used by both
           Stock List and Stock Check, so switching tabs (or scanning down
           a long list) never shows rows jumping between different sizes.
           .part-card becomes the flex row shell here; the two tabs only
           ever differ in what goes in .part-row-side. */
.part-card.part-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
}
.part-row-main {
  flex: 1;
  min-width: 0;
}
.part-row-title {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.part-row-sub {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.part-row-side {
  flex-shrink: 0;
  text-align: right;
}
.part-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.part-row-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-2xs);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.part-row-qty {
  width: 52px;
  text-align: center;
  padding: 6px 4px;
  font-weight: 700;
}
.part-row-check-btn {
  width: 90px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  cursor: pointer;
}
.part-row-check-btn.is-checked {
  border-color: var(--success);
  color: var(--success);
  background: rgba(74, 222, 128, 0.1);
}
.parts-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.parts-toolbar input[type='text'] {
  flex: 1;
}
.parts-toolbar-icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  border: 1px solid var(--warning);
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
}
.parts-subtoolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.parts-subtoolbar button {
  flex: 1;
  height: 38px;
  padding: 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--card-dark);
  color: var(--text-main);
  cursor: pointer;
}
.parts-subtoolbar button.active-panel {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(56, 189, 248, 0.08);
}
.equipment-card {
  background: var(--card-dark);
  padding: 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--success);
  margin-bottom: 10px;
}
.equipment-location-group {
  margin-bottom: 22px;
}
.equipment-location-heading {
  font-size: 1rem;
  font-weight: 800;
  padding: 6px 2px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.btn-part-action {
  font-size: 0.85rem !important;
  padding: 9px 14px !important;
  min-height: 38px;
}
.equipment-card h4 {
  font-size: var(--fs-md);
  color: var(--text-main);
  margin-bottom: 2px;
  font-weight: 800;
}
.equipment-card .eq-model {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.equipment-card .eq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: var(--fs-xs);
}
.equipment-card .eq-grid div span {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
}
.equip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.equip-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  color: var(--primary);
  text-transform: uppercase;
  font-size: var(--fs-2xs);
  position: sticky;
  top: 0;
  background: var(--bg-dark);
}
.equip-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}
.equip-table-group-header td {
  background: var(--card-dark);
  font-weight: 800;
  font-size: var(--fs-sm);
  padding: 10px;
  border-bottom: 2px solid var(--border);
  white-space: normal;
}
.table-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  white-space: normal;
}
.table-action-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 11px;
  min-height: 34px;
  border-radius: var(--radius-xs);
  border: 1px solid;
  background: #111827;
  cursor: pointer;
}
.tower-card {
  background: var(--card-dark);
  padding: 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--primary);
  margin-bottom: 10px;
}
.tower-card h4 {
  font-size: var(--fs-md);
  color: var(--text-main);
  margin-bottom: 8px;
  font-weight: 800;
}
.tower-card .tw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: var(--fs-xs);
  margin-bottom: 8px;
}
.tower-card .tw-grid div span {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
}
.btn-part-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.btn-part-action {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: #111827;
  color: var(--text-main);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.btn-part-action:active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
}

@media (max-width: 600px) {
  body {
    padding: 12px;
  }
  .grid-2,
  .grid-3,
  .view-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .form-group {
    margin-bottom: 10px;
  }
  input,
  select,
  textarea {
    padding: 12px;
    font-size: var(--fs-sm);
  }
  .btn {
    padding: 14px;
    font-size: var(--fs-md);
  }
  .manual-grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .btn-manual-link {
    font-size: 2.8vw !important;
    padding: 12px 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .action-tray {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }
}