design update

src/components/TicketRow.jsx

@@ -102,8 +102,8 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
 
   return (
     <>
-      <tr className="ticket-row">
-        <td className="ticket-id" rowSpan={2}>
+      <tr className={`ticket-row ${expanded ? 'ticket-expanded' : 'ticket-collapsed'}`}>
+        <td className={`ticket-id ${expanded ? 'ticket-id-expanded' : ''}`} rowSpan={2}>
           <div><strong>WOID:</strong> {ticket.woid || ticket.$id?.slice(-5)}</div>
           <div className="ticket-time">{elapsed}</div>
         </td>
@@ -177,13 +177,20 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
       </tr>
       {expanded && (
         <>
-          <tr>
-            <td colSpan={10} className="p-2">
-              <div className="card">
+          <tr className="worksheet-expansion">
+            <td colSpan={10} className="worksheet-cell">
+              <div className="card" style={{ 
+                borderRadius: '0 0 12px 12px',
+                marginTop: 0,
+                border: '1px solid rgba(16, 185, 129, 0.2)',
+                borderTop: 'none'
+              }}>
                 <div className="card-header d-flex justify-content-between align-items-center" style={{
                   background: 'linear-gradient(135deg, #2d3748 0%, #1a202c 100%)',
                   color: 'white',
-                  padding: '1rem 1.5rem'
+                  padding: '1rem 1.5rem',
+                  borderRadius: 0,
+                  borderBottom: '1px solid rgba(16, 185, 129, 0.2)'
                 }}>
                   <span className="fs-5 fw-bold">Details - WOID {ticket.woid || ticket.$id}</span>
                   <button 
@@ -206,7 +213,7 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
                     <FaPlus className="me-2" /> Add Worksheet
                   </button>
                 </div>
-                <div className="card-body">
+                <div className="card-body" style={{ borderRadius: '0 0 12px 12px' }}>
                   <div className="mb-4 p-4 rounded-3 shadow-sm" style={{
                     background: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)',
                     border: '2px solid #10b981'
@@ -257,7 +264,7 @@ export default function TicketRow({ ticket, onUpdate, onExpand }) {
         onCreate={handleCreateWorksheet}
       />
       <tr className="spacer">
-        <td colSpan={10} style={{ height: '8px', background: '#fff' }}></td>
+        <td colSpan={10} style={{ height: '12px', background: 'transparent', border: 'none' }}></td>
       </tr>
     </>
   )