@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

package/src/billing/dashboard/v3/claim-visits/claim-diagnosis-details/claim-diagnosis-details.component.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { type VisitDiagnosis} from "../../types"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+
+interface claimDiagnosisDetailsProps {
+    claimDiagnosiss: VisitDiagnosis[]
+}
+const ClaimDiagnosisDetails: React.FC<claimDiagnosisDetailsProps> = ({claimDiagnosiss})=>{
+   if(!claimDiagnosiss || claimDiagnosiss.length === 0){
+      return <>No Diagnosis data</>
+   }
+   return <>
+   <Table size="sm">
+          <TableHead>
+            <TableRow>
+              <TableHeader>No</TableHeader>
+              <TableHeader>Recorded On</TableHeader>
+              <TableHeader>Diagnosis Name</TableHeader>
+              <TableHeader>Diagnosis Code</TableHeader>
+              <TableHeader>Intervention Code</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {claimDiagnosiss &&
+              claimDiagnosiss.map((cd, index) => {
+                return (
+                  <>
+                    <TableRow key={cd.claim}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{formatDate(parseDate(cd.recorded_on))}</TableCell>
+                      <TableCell>{cd.diagnosis_name}</TableCell>
+                      <TableCell>{cd.diagnosis_code}</TableCell>
+                      <TableCell>{cd.intervention_code}</TableCell>
+                    </TableRow>
+                  </>
+                );
+              })}
+          </TableBody>
+        </Table>
+   </>
+};
+
+export default ClaimDiagnosisDetails;

package/src/billing/dashboard/v3/claim-visits/claim-doctors/claim-doctors.scss

@@ -0,0 +1,5 @@
+.claimDoctorsLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}

package/src/billing/dashboard/v3/claim-visits/claim-doctors/claim-doctors.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { type ClaimDoctor } from "../../types"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
+import styles from './claim-doctors.scss';
+
+interface claimDoctorsProps {
+    claimDoctors: ClaimDoctor[]
+}
+const ClaimDoctors: React.FC<claimDoctorsProps> = ({claimDoctors})=>{
+   if(!claimDoctors || claimDoctors.length === 0){
+      return <>No Claim Doctors</>
+   }
+   return <>
+   <div className={styles.claimDoctorsLayout}>
+   <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader>No</TableHeader>
+              <TableHeader>Claim</TableHeader>
+              <TableHeader>Doctor Name</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {claimDoctors &&
+              claimDoctors.map((cd, index) => {
+                return (
+                  <>
+                    <TableRow key={cd.id}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{cd.claim}</TableCell>
+                      <TableCell>{cd.doctor_name}</TableCell>
+                    </TableRow>
+                  </>
+                );
+              })}
+          </TableBody>
+        </Table>
+        </div>
+   </>
+};
+
+export default ClaimDoctors;

package/src/billing/dashboard/v3/claim-visits/claim-documents/claim-documents.scss

@@ -0,0 +1,10 @@
+.claimDocummentLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+
+    a {
+        overflow-wrap: anywhere;
+    }
+}

package/src/billing/dashboard/v3/claim-visits/claim-documents/claim-documents.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { type ClaimAttachment, type ApplicableDocumentType } from "../../types";
+import styles from './claim-documents.scss';
+interface claimDocumentsProps {
+    claimAttachments?: ClaimAttachment[];
+}
+const ClaimDocuments: React.FC<claimDocumentsProps> = ({claimAttachments})=>{
+   if(!claimAttachments || claimAttachments.length === 0){
+       return <>No Attachments</>
+   }
+  return <>
+   <div className={styles.claimDocummentLayout}>
+        {
+           claimAttachments.map((at)=>{
+                return <>
+                <div>
+                   <span><a href={at.data}>{at.title} ({at.attachment_type} - {at.intervention_code})</a></span>
+                </div>
+                </>
+           })
+        }
+   </div>
+  </>
+}
+export default ClaimDocuments;

package/src/billing/dashboard/v3/claim-visits/claim-intervention-details/claim-intervention-details.component.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import { type PatientFacilityBillDetails, type VisitIntervention } from '../../types';
+import {
+  MenuButton,
+  MenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import { launchWorkspace, showSnackbar, useSession } from '@openmrs/esm-framework';
+
+import { invalidatePreauthPreview, parseDocTypes, readSpecialtyFlags } from '../../../v2/preauth/preauth.resource';
+import {
+  interventionHasBlockingPreauth,
+  interventionHasFailedPreauth,
+  usePreauthPreview,
+} from '../../../../../claims/claims.resource';
+
+interface claimInterventionDetailsProps {
+  claimInterventions: VisitIntervention[];
+  patientBillDetails: PatientFacilityBillDetails;
+  consentToken: string;
+  visitUuid: string;
+  canSwitchIntervention?: boolean;
+  onSwitchSuccess?: () => void;
+}
+
+const isActiveIntervention = (iv: VisitIntervention) => (iv.workflow_state ?? '').toUpperCase() === 'ACTIVE';
+
+const ClaimInterventionDetails: React.FC<claimInterventionDetailsProps> = ({
+  claimInterventions,
+  patientBillDetails,
+  consentToken,
+  visitUuid,
+  canSwitchIntervention = false,
+  onSwitchSuccess,
+}) => {
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid;
+  const { preview: preauthPreview } = usePreauthPreview(consentToken, locationUuid);
+
+  if (!claimInterventions || claimInterventions.length === 0) {
+    return <>No Intervention data</>;
+  }
+
+  const handleAddAttachment = (ci: any) => {
+    launchWorkspace('upload-intervention-attachments-workspace', {
+      consentToken: consentToken,
+      claimInterventions: ci,
+      bill: patientBillDetails,
+    });
+  };
+
+  const handleGenerateAttachment = (ci: any) => {
+    launchWorkspace('generate-intervention-attachments-workspace', {
+      consentToken: consentToken,
+      claimInterventions: ci,
+      bill: patientBillDetails,
+      patientUuid: patientBillDetails?.patient_uuid,
+    });
+  };
+
+  const canActOnIntervention = (intervention: VisitIntervention) =>
+    canSwitchIntervention && isActiveIntervention(intervention);
+
+  const hasBlockingPreauth = (intervention: VisitIntervention) =>
+    interventionHasBlockingPreauth(preauthPreview, intervention.intervention_code);
+
+  /** Switch stays locked while a non-resubmittable preauth is in flight / finalised. */
+  const canSwitchFor = (intervention: VisitIntervention) =>
+    canActOnIntervention(intervention) && !hasBlockingPreauth(intervention);
+
+  const canRaisePreauthFor = (intervention: VisitIntervention) => {
+    return canActOnIntervention(intervention) && Boolean(intervention.needs_preauth) && !hasBlockingPreauth(intervention);
+  };
+
+  const isResubmitPreauth = (intervention: VisitIntervention) =>
+    interventionHasFailedPreauth(preauthPreview, intervention.intervention_code);
+
+  const raisePreauthLabel = (intervention: VisitIntervention) =>
+    isResubmitPreauth(intervention) ? 'Resubmit preauth' : 'Raise preauth';
+
+  const handleSwitchIntervention = (intervention: VisitIntervention) => {
+    if (!canSwitchFor(intervention)) {
+      return;
+    }
+    launchWorkspace('switch-intervention-workspace', {
+      consentToken: consentToken,
+      currentInterventions: [intervention],
+      patientId: patientBillDetails?.cr_no,
+      patientUuid: patientBillDetails?.patient_uuid,
+      visitUuid: visitUuid,
+      billDate: patientBillDetails?.bill_date,
+      onSwitchSuccess: () => {
+        onSwitchSuccess?.();
+      },
+    });
+  };
+  const handleRaisePreauth = (intervention: VisitIntervention) => {
+    if (!canSwitchIntervention) {
+      return;
+    }
+    if (!consentToken) {
+      showSnackbar({
+        kind: 'error',
+        title: 'No claim token',
+        subtitle: 'This claim visit has no consent token.',
+      });
+      return;
+    }
+    if (!canRaisePreauthFor(intervention)) {
+      return;
+    }
+
+    const requiredDocs = parseDocTypes(
+      Array.isArray(intervention.required_preauth_document_types)
+        ? (intervention.required_preauth_document_types as string[]).join(',')
+        : (intervention.required_preauth_document_types as string | null | undefined),
+    );
+    const applicableDocs = Array.isArray(intervention.applicable_document_types)
+      ? intervention.applicable_document_types.map(String)
+      : parseDocTypes(intervention.applicable_document_types as string | null | undefined);
+
+    // Fresh raise and failure-state resubmit both reopen the same preauth form.
+    launchWorkspace('preauth-form-workspace', {
+      consentToken,
+      patientUuid: patientBillDetails?.patient_uuid,
+      locationUuid,
+      billItem: {
+        intervention_code: intervention.intervention_code,
+        patient_uuid: patientBillDetails?.patient_uuid,
+        patient_name: patientBillDetails?.patient_name,
+        cr_no: patientBillDetails?.patient_name,
+        billable_service: intervention.intervention_name,
+        item_price: Number(intervention.keph_level_tarrif) || patientBillDetails?.item_price || 0,
+        item_quantity: patientBillDetails?.item_quantity ?? 1,
+        consent_token: consentToken,
+      },
+      intervention: {
+        code: intervention.intervention_code,
+        name: intervention.intervention_name,
+        ...readSpecialtyFlags(intervention),
+        requiredPreauthDocumentTypes: requiredDocs,
+        applicableDocumentTypes: applicableDocs,
+      },
+      onSuccess: async () => {
+        await invalidatePreauthPreview(consentToken, locationUuid!);
+        onSwitchSuccess?.();
+      },
+    });
+  };
+
+  return (
+    <>
+      <Table size="sm">
+        <TableHead>
+          <TableRow>
+            <TableHeader>Code</TableHeader>
+            <TableHeader>Payment Mechanism</TableHeader>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Accrued Per Diem</TableHeader>
+            <TableHeader>Accrued Per Diem Days</TableHeader>
+            <TableHeader>State</TableHeader>
+            <TableHeader>Sub Benefit Code</TableHeader>
+            <TableHeader>Fund</TableHeader>
+            <TableHeader>Attachments</TableHeader>
+            <TableHeader>Actions</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {claimInterventions &&
+            claimInterventions.map((ci) => {
+              const canSwitch = canSwitchFor(ci);
+              const canRaise = canRaisePreauthFor(ci);
+              const hasAttachments = (ci.applicable_document_types ?? []).length > 0;
+              return (
+                <TableRow key={ci.id}>
+                  <TableCell>{ci.intervention_code}</TableCell>
+                  <TableCell>{ci.intervention_payment_mechanism}</TableCell>
+                  <TableCell>{ci.intervention_name}</TableCell>
+                  <TableCell>{ci.accrued_per_diem_amount}</TableCell>
+                  <TableCell>{ci.accrued_per_diem_days}</TableCell>
+                  <TableCell>{ci.workflow_state}</TableCell>
+                  <TableCell>{ci.sub_benefit_code}</TableCell>
+                  <TableCell>{ci.intervention_fund}</TableCell>
+                  <TableCell>
+                    {hasAttachments ? (
+                      <MenuButton label="Attachments" kind="ghost" size="sm">
+                        <MenuItem label="Generate" onClick={() => handleGenerateAttachment(ci)} />
+                        <MenuItem label="Upload" onClick={() => handleAddAttachment(ci)} />
+                      </MenuButton>
+                    ) : (
+                      <Tag type="gray">Not Required</Tag>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <MenuButton label="Actions" kind="ghost" size="sm">
+                      <MenuItem
+                        label={raisePreauthLabel(ci)}
+                        onClick={() => handleRaisePreauth(ci)}
+                        disabled={!canRaise}
+                      />
+                      <MenuItem
+                        label="Switch intervention"
+                        onClick={() => handleSwitchIntervention(ci)}
+                        disabled={!canSwitch}
+                      />
+                    </MenuButton>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default ClaimInterventionDetails;

package/src/billing/dashboard/v3/claim-visits/claim-invoice-details/claim-invoice-details.component.scss

@@ -0,0 +1,6 @@
+.linkBtn{
+    color: blue;
+}
+.linkBtn:hover{
+    cursor: pointer;
+}

package/src/billing/dashboard/v3/claim-visits/claim-invoice-details/claim-invoice-details.component.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import styles from './claim-invoice-details.component.scss';
+import { type ClaimInvoiceLine, type ClaimVisitInvoince } from '../../types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import ClaimInvoiceLinesModal from '../modal/claim-invoice-lines/claim-invoice-lines.modal';
+
+interface claimInvoiceDetailsProps {
+  claimInvoices: ClaimVisitInvoince[];
+  consentToken: string;
+}
+const ClaimInvoiceDetails: React.FC<claimInvoiceDetailsProps> = ({ claimInvoices, consentToken }) => {
+  const [showClaimInvoiceLinesModal, setShowClaimInvoiceLinesModal] = useState<boolean>();
+  const [selectedClaimInvoiceLines, setSelectedClaimInvoiceLines] = useState<ClaimInvoiceLine[]>([]);
+  if (!claimInvoices || claimInvoices.length === 0) {
+    return <>No Invoice data</>;
+  }
+  function handleClose() {
+    setShowClaimInvoiceLinesModal(false);
+  }
+  function showClaimLinesModal(claimInvoiceLines: ClaimInvoiceLine[]) {
+    setSelectedClaimInvoiceLines(claimInvoiceLines);
+    setShowClaimInvoiceLinesModal(true);
+  }
+  return (
+    <>
+      <Table size="sm">
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>Invoice No</TableHeader>
+            <TableHeader>Date</TableHeader>
+            <TableHeader>Dispatch Status</TableHeader>
+            <TableHeader>State</TableHeader>
+            <TableHeader>Lines</TableHeader>
+            <TableHeader>Scheme</TableHeader>
+            <TableHeader>Service Type</TableHeader>
+            <TableHeader>Amount</TableHeader>
+            <TableHeader>Net</TableHeader>
+            <TableHeader>Co-Pay</TableHeader>
+            <TableHeader>Discount</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {claimInvoices &&
+            claimInvoices.map((ci, index) => {
+              return (
+                <>
+                  <TableRow key={ci.id}>
+                    <TableCell>{index + 1}</TableCell>
+                    <TableCell>{ci.invoice_number}</TableCell>
+                    <TableCell>{formatDate(parseDate(ci.invoice_date))}</TableCell>
+                    <TableCell>{ci.dispatch_status}</TableCell>
+                    <TableCell>{ci.workflow_state}</TableCell>
+                    <TableCell>
+                      <div className={styles.linkBtn} onClick={() => showClaimLinesModal(ci.lines)}>
+                        {ci.lines.length}
+                      </div>
+                    </TableCell>
+                    <TableCell>{ci.scheme_code}</TableCell>
+                    <TableCell>{ci.service_type}</TableCell>
+                    <TableCell>{ci.total_inv_amount}</TableCell>
+                    <TableCell>{ci.total_inv_net_amount}</TableCell>
+                    <TableCell>{ci.total_inv_copay}</TableCell>
+                    <TableCell>{ci.total_inv_discount}</TableCell>
+                  </TableRow>
+                </>
+              );
+            })}
+        </TableBody>
+      </Table>
+
+      {showClaimInvoiceLinesModal && (
+        <ClaimInvoiceLinesModal
+          claimInvoiceLines={selectedClaimInvoiceLines}
+          consentToken={consentToken}
+          open={showClaimInvoiceLinesModal}
+          handleClose={handleClose}
+        />
+      )}
+    </>
+  );
+};
+
+export default ClaimInvoiceDetails;

package/src/billing/dashboard/v3/claim-visits/claim-invoice-line-details/claim-invoice-line-details.component.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { type ClaimInvoiceLine } from "../../types"
+import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@carbon/react";
+import { formatDate, parseDate, showSnackbar, useSession } from "@openmrs/esm-framework";
+import { CloseLarge } from "@carbon/react/icons";
+import { removeClaimItem, useInvalidateProviderClaimPreview } from "../../../../billing-claims.resource";
+
+interface claimLineDetailsProps {
+  claimInvoiceLines: ClaimInvoiceLine[];
+  consentToken: string;
+}
+const ClaimInvoiceLineDetails: React.FC<claimLineDetailsProps> = ({ claimInvoiceLines, consentToken }) => {
+  const sessionLocation = useSession();
+  const invalidateProviderClaimPreview = useInvalidateProviderClaimPreview();
+
+  const handleRemoveClaimLine = async (claimInvoiceLine: ClaimInvoiceLine) => {
+    try {
+      const payload = {
+        consentToken,
+        lineGuid: claimInvoiceLine.id,
+        locationUuid: sessionLocation?.sessionLocation?.uuid
+      }
+      await removeClaimItem(payload);
+      invalidateProviderClaimPreview();
+      showSnackbar({
+        title: 'Success removing claim line',
+        subtitle: 'Claim line removed successfully',
+        kind: 'success',
+      });
+    } catch (error) {
+      showSnackbar({
+        title: 'Error removing claim line',
+        subtitle: error,
+        kind: 'error',
+      });
+    }
+  }
+
+  return <>
+    <Table size="sm">
+      <TableHead>
+        <TableRow>
+          <TableHeader>No</TableHeader>
+          <TableHeader>Item Code</TableHeader>
+          <TableHeader>Item Name</TableHeader>
+          <TableHeader>Intervention Code</TableHeader>
+          <TableHeader>Line Total Amount</TableHeader>
+          <TableHeader>Line Net Amount</TableHeader>
+          <TableHeader>Quantity</TableHeader>
+          <TableHeader>Unit</TableHeader>
+          <TableHeader>Unit Price</TableHeader>
+          <TableHeader>Is Active</TableHeader>
+          <TableHeader>Is Cancellation</TableHeader>
+          <TableHeader>Is Return</TableHeader>
+          <TableHeader>UHC Exceeded</TableHeader>
+          <TableHeader>Charge Date</TableHeader>
+          <TableHeader>Is Return</TableHeader>
+          <TableHeader>Line Number</TableHeader>
+          <TableHeader>Scheme Code</TableHeader>
+          <TableHeader>Scheme Name</TableHeader>
+          <TableHeader>Discount</TableHeader>
+          <TableHeader>Action</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {claimInvoiceLines &&
+          claimInvoiceLines.map((ci, index) => {
+            return (
+              <>
+                <TableRow key={ci.id}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>{ci.item_code}</TableCell>
+                  <TableCell>{ci.item_name}</TableCell>
+                  <TableCell>{ci.intervention_code}</TableCell>
+                  <TableCell>{ci.line_total_amount}</TableCell>
+                  <TableCell>{ci.line_net_amount}</TableCell>
+                  <TableCell>{ci.quantity}</TableCell>
+                  <TableCell>{ci.unit}</TableCell>
+                  <TableCell>{ci.unit_price}</TableCell>
+                  <TableCell>{ci.is_active}</TableCell>
+                  <TableCell>{ci.is_cancellation}</TableCell>
+                  <TableCell>{ci.is_return}</TableCell>
+                  <TableCell>{ci.uhc_exceeded}</TableCell>
+                  <TableCell>{formatDate(parseDate(ci.charge_date))}</TableCell>
+                  <TableCell>{ci.is_return}</TableCell>
+                  <TableCell>{ci.line_number}</TableCell>
+                  <TableCell>{ci.scheme_code}</TableCell>
+                  <TableCell>{ci.scheme_name}</TableCell>
+                  <TableCell>{ci.discount}</TableCell>
+                  <TableCell>
+                    <Button
+                      hasIconOnly
+                      iconDescription="Remove claim line"
+                      size="sm"
+                      kind="danger"
+                      onClick={async () => await handleRemoveClaimLine(ci)}
+                      renderIcon={() => <CloseLarge />}
+                    />
+
+                  </TableCell>
+                </TableRow>
+              </>
+            );
+          })}
+      </TableBody>
+    </Table>
+  </>
+}
+export default ClaimInvoiceLineDetails;

package/src/billing/dashboard/v3/claim-visits/claim-visit-details/claim-visit-details.component.scss

@@ -0,0 +1,104 @@
+@use '@carbon/layout';
+
+/* This renders inside the "Claim" tab panel, which adds no padding of its own, so the
+   layout insets itself. */
+.cvLayout {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+  width: 100%;
+  padding: layout.$spacing-05;
+}
+
+/* ---- Header ---- */
+/* Wraps rather than splitting into two fixed-width halves, so the action buttons drop
+   onto their own row under the title instead of being squeezed or clipped on a narrow
+   viewport. */
+.cvHeaderSection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-03 layout.$spacing-05;
+}
+
+.headerTitle h4 {
+  margin: 0;
+}
+
+.headerAction {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+}
+
+/* ---- Details grid ---- */
+/* `auto-fit` with a floor rather than a fixed column count: this reflows from several
+   columns on a wide viewport down to one on a phone, with no media queries. */
+.detailsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: layout.$spacing-05 layout.$spacing-06;
+  margin: 0;
+}
+
+.detailRow {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+
+  dt {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: #6f6f6f;
+  }
+
+  dd {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
+    overflow-wrap: anywhere;
+  }
+}
+
+/* ---- Sections ---- */
+.cvContentSection {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Each category — Invoices, Interventions, Diagnosis, Doctors, Attachments — is its own
+   section, separated by a rule so the groups read distinctly instead of running together
+   as identical, unlabelled rows. */
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  padding-top: layout.$spacing-05;
+  border-top: 1px solid #e0e0e0;
+
+  h6 {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
+  }
+}
+
+/* The first section sits right under the details grid, which already ends in its own
+   gap — a leading rule here would double up with it. */
+.cvContentSection > .section:first-child {
+  padding-top: 0;
+  border-top: none;
+}
+
+/* Wide tables (Interventions runs to ten columns) scroll horizontally instead of
+   overflowing the tab panel on a narrow viewport. */
+.tableScroll {
+  width: 100%;
+  overflow-x: auto;
+}