Apply admin table styling to reports table for consistency

Updated reports table to use the same robust styling as admin table:

 Added:
- border-radius: 8px and overflow: hidden for rounded corners
- box-shadow: 0 2px 4px var(--shadow) for elevation
- color: var(--text-color) on table element for inheritance
- Consistent border styling with 1px borders
- font-weight: bold for headers (matching admin)

 Improved:
- Better dark mode support with proper color inheritance
- Consistent visual appearance between admin and public tables
- Removed duplicate box-shadow from table-container
- Simplified header borders (removed 2px, sticky positioning complexity)

Both tables now share the same visual design language and dark mode behavior.
This commit is contained in:
Deco Vander 2025-07-03 21:09:12 -04:00
parent ebb5c06773
commit 83173da778

View file

@ -325,14 +325,16 @@ footer {
/* Table view styles */
.table-container {
overflow-x: auto;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.reports-table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
color: var(--text-color);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px var(--shadow);
font-size: 14px;
transition: background-color 0.3s ease;
}
@ -340,19 +342,16 @@ footer {
.reports-table th {
background-color: var(--table-header-bg);
color: var(--text-color);
font-weight: 600;
font-weight: bold;
padding: 12px;
text-align: left;
border-bottom: 2px solid var(--border-color);
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid var(--border-color);
}
.reports-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--border-color);
vertical-align: top;
color: var(--text-color);
}