first drafts for inventory sync page

internal/site/styles/index.css

@@ -17,6 +17,7 @@
     --text-3xl: 1.875rem;
     --text-4xl: 2.25rem;
     --text-5xl: 3rem;
+    --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-lg: var(--radius);
     --default-font-family: var(--font-sans);
@@ -180,6 +181,9 @@
   .mt-\[3em\] {
     margin-top: 3em;
   }
+  .mb-\[0\.5em\] {
+    margin-bottom: 0.5em;
+  }
   .mb-\[1em\] {
     margin-bottom: 1em;
   }
@@ -195,18 +199,27 @@
   .min-h-full {
     min-height: 100%;
   }
+  .w-full {
+    width: 100%;
+  }
   .max-w-\[50\%\] {
     max-width: 50%;
   }
   .max-w-full {
     max-width: 100%;
   }
+  .min-w-fit {
+    min-width: fit-content;
+  }
   .grow {
     flex-grow: 1;
   }
   .basis-full {
     flex-basis: 100%;
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -231,6 +244,9 @@
   .rounded-lg {
     border-radius: var(--radius);
   }
+  .rounded-sm {
+    border-radius: calc(var(--radius) - 4px);
+  }
   .border-\[1px\] {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -244,6 +260,9 @@
   .bg-card {
     background-color: var(--card);
   }
+  .p-\[0\.5em\] {
+    padding: 0.5em;
+  }
   .p-\[1em\] {
     padding: 1em;
   }
@@ -271,9 +290,30 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .hover\:bg-accent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+      }
+    }
+  }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
 }
 @layer base {
   select {
@@ -355,6 +395,12 @@
   --sidebar-accent-foreground: var(--base-800);
   --sidebar-border: var(--base-200);
   --sidebar-ring: var(--primary-300);
+  --table-thead: var(--base-400);
+  --table-tbody: var(--base-200);
+  --table-tfoot: var(--base-400);
+  --table-border: var(--base-300);
+  --table-body-border: var(--base-500);
+  --table-inner-border: var(--base-300);
   --display-color: var(--foreground);
   --text-color: var(--foreground);
   @media (prefers-color-scheme: dark) {
@@ -389,10 +435,18 @@
     --sidebar-accent-foreground: var(--base-200);
     --sidebar-border: var(--base-800);
     --sidebar-ring: var(--primary-300);
+    --table-thead: var(--base-600);
+    --table-tbody: var(--base-800);
+    --table-tfoot: var(--base-600);
+    --table-border: var(--base-700);
+    --table-body-border: var(--base-500);
+    --table-inner-border: var(--base-700);
   }
 }
-* {
-  color: var(--foreground);
+@layer theme {
+  * {
+    color: var(--foreground);
+  }
 }
 .dark {
   --background: var(--base-950);
@@ -477,6 +531,10 @@
     background-color: var(--sidebar-accent);
   }
 }
+:root {
+  --border-thin: 1px;
+  --border-medium: 2px;
+}
 @layer base {
   header,	footer {
     border-color: var(--sidebar-border);
@@ -488,18 +546,83 @@
     border-top-width: 1px;
   }
   select {
-    border-width: 2px;
+    border-width: var(--border-medium);
     border-color: var(--border);
     border-radius: var(--radius-lg);
   }
   .border-thin {
-    border-width: 1px;
+    border-width: var(--border-thin);
+  }
+  .border-medium {
+    border-width: var(--border-medium);
   }
   .border-button {
-    border-width: 2px;
+    border-width: var(--border-medium);
     border-radius: var(--radius-lg);
   }
 }
+@layer components {
+  table {
+    display: block;
+    border-collapse: collapse;
+    thead {
+      border-color: var(--table-border);
+      border-width: var(--border-thin) var(--border-thin) 0 var(--border-thin);
+      & > tr {
+        border-color: var(--table-body-border);
+        & > :is(th, td) {
+          border-color: var(--table-body-border);
+          background-color: var(--table-thead);
+        }
+      }
+      & + tbody {
+        border-top-width: var(--border-thin);
+      }
+    }
+    tbody {
+      border-color: var(--table-body-border) var(--table-border);
+      border-left-width: var(--border-thin);
+      border-right-width: var(--border-thin);
+      border-bottom-width: 0;
+      & > tr {
+        border-color: var(--table-border);
+        & > :is(th, td) {
+          border-color: var(--table-border);
+          background-color: var(--table-tbody);
+        }
+      }
+      &:has(+ tfoot) {
+        border-bottom-width: var(--border-thin);
+      }
+    }
+    tfoot {
+      border-color: var(--table-border);
+      border-width: 0 var(--border-thin) var(--border-thin) var(--border-thin);
+      & > tr {
+        border-color: var(--table-body-border);
+        & > :is(th, td) {
+          border-color: var(--table-body-border);
+          background-color: var(--table-tfoot);
+        }
+      }
+    }
+    th,	td {
+      padding: 0.5em;
+    }
+    tr {
+      border-width: 0 0 var(--border-thin) 0;
+      &:last-child {
+        border: none;
+      }
+    }
+    th, td {
+      border-width: 0 var(--border-thin) 0 0;
+      &:last-child {
+        border: none;
+      }
+    }
+  }
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;