wtf

public/css/app.css

@@ -185,3 +185,119 @@ a:hover {
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
 }
 
+/* Material-inspired data tables */
+.mui-table-wrapper {
+  border: 1px solid var(--md-card-border);
+  border-radius: 20px;
+  background-color: var(--md-card);
+  box-shadow: var(--md-shadow-ambient);
+  overflow-x: auto;
+}
+
+.mui-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 620px;
+}
+
+.mui-table thead th {
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--md-text-secondary);
+  padding: 0.85rem 1.25rem;
+  background-color: var(--md-surface-variant);
+  border-bottom: 1px solid var(--md-outline);
+}
+
+.mui-table tbody td {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline) 75%, transparent);
+  color: var(--md-text-primary);
+}
+
+.mui-table--compact tbody td {
+  padding: 0.65rem 1rem;
+}
+
+.mui-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.mui-table tbody tr {
+  transition: background-color 0.15s ease, transform 0.15s ease;
+}
+
+.mui-table tbody tr:hover {
+  background-color: color-mix(in srgb, var(--accent-color) 6%, transparent);
+}
+
+.mui-table--striped tbody tr:nth-child(even) {
+  background-color: color-mix(in srgb, var(--accent-color) 4%, transparent);
+}
+
+.mui-table--striped tbody tr:nth-child(even):hover {
+  background-color: color-mix(in srgb, var(--accent-color) 9%, transparent);
+}
+
+.mui-table__number {
+  font-variant-numeric: tabular-nums;
+  color: var(--md-text-secondary);
+  width: 72px;
+}
+
+.mui-table__metric {
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  color: var(--md-text-secondary);
+}
+
+.mui-table__title {
+  font-weight: 600;
+}
+
+.mui-table__title-avatar {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+}
+
+.mui-table__title-avatar img {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  object-fit: cover;
+  border: 1px solid var(--md-card-border);
+}
+
+.mui-table__subtitle {
+  font-size: 0.85rem;
+  color: var(--md-text-secondary);
+}
+
+.mui-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid var(--md-outline);
+  color: var(--accent-color);
+  background-color: transparent;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.mui-icon-button:hover {
+  background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.mui-icon-button svg,
+.mui-icon-button span {
+  font-size: 1rem;
+  line-height: 1;
+}
+