style(table): style table and input styles in EditableCell and TypeaheadInput components to have a spreadsheet like theme.

src/app/globals.css

@@ -62,11 +62,13 @@ table {
 table th,
 table td {
   border: 1px solid var(--border-color);
-  padding: var(--spacing-sm);
+  padding: 0;
   text-align: left;
   vertical-align: top;
   position: relative;
   min-width: 120px;
+  min-height: 2.5rem;
+  background-color: transparent;
 }
 
 table th {
@@ -144,38 +146,43 @@ table th {
    EDITABLE CELL STYLES
    ================================= */
 
+/* Spreadsheet-like cell styling */
 .editable-cell {
-  position: relative;
   width: 100%;
-  min-height: 2rem;
+  height: 100%;
+  min-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  position: relative;
 }
 
 .editable-cell input,
 .editable-cell textarea {
   width: 100%;
+  height: 100%;
+  background: transparent;
   border: none;
   outline: none;
-  background: transparent;
-  resize: none;
-  padding: var(--spacing-xs);
   font-family: inherit;
   font-size: inherit;
-  transition: all 0.2s ease-in-out;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+  resize: none;
 }
 
-.editable-cell input:focus,
+/* Subtle focus state for the entire cell */
-.editable-cell textarea:focus {
+.editable-cell:focus-within {
-  background-color: #fef3c7;
+  background-color: rgba(59, 130, 246, 0.05); /* Very subtle blue tint */
-  border: 2px solid var(--color-warning);
-  border-radius: var(--border-radius);
 }
 
-.focused-cell {
+/* Dark mode focus state */
-  background-color: #fef3c7 !important;
+.dark .editable-cell:focus-within {
-  border: 2px solid var(--color-warning) !important;
+  background-color: rgba(59, 130, 246, 0.1);
-  border-radius: var(--border-radius);
 }
 
+
 /* =================================
    TYPEAHEAD STYLES
    ================================= */

src/components/EditableCell.tsx

@@ -102,8 +102,9 @@ export function EditableCell({
   }, [inputType, commitInput, setFocusedCell, value]);
   
   const baseClassName = `
-    w-full px-2 py-1 border-none outline-none resize-none
+    w-full h-full bg-transparent text-inherit
-    focus:ring-2 focus:ring-blue-500 focus:ring-inset
+    border-none outline-none focus:outline-none resize-none
+    placeholder:text-gray-400 dark:placeholder:text-gray-500
     ${className}
   `.trim();
   
@@ -118,8 +119,8 @@ export function EditableCell({
           onBlur={handleBlur}
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
-          className={`${baseClassName} min-h-[2rem] max-h-32`}
+          className={baseClassName}
-          rows={1}
+          style={{ minHeight: '2.5rem' }}
         />
       </div>
     );

src/components/TypeaheadInput.tsx

@@ -331,10 +331,9 @@ export function TypeaheadInput({
   }, []);
   
   const baseInputClassName = `
-    w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
+    w-full h-full bg-transparent text-inherit
-    bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
+    border-none outline-none focus:outline-none
-    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+    placeholder:text-gray-400 dark:placeholder:text-gray-500
-    transition-all duration-200 ease-in-out
     ${className}
   `.trim();
   
@@ -469,7 +468,7 @@ export function TypeaheadInput({
   };
   
   return (
-    <div className="relative">
+    <div className="relative w-full h-full flex items-center">
       <input
         ref={inputRef}
         type="text"