refactor: extract shared data table styles into reusable classes

Replace duplicated table styling across orgs, users, user-details,
and cost-centers views with shared .data-table-wrap and .data-table
CSS classes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: asizikov

src/App.css

@@ -212,6 +212,41 @@
   width: 100%;
 }
 
+/* Shared data table */
+.data-table-wrap {
+  background: #ffffff;
+  border: 1px solid #d1d9e0;
+  border-radius: 6px;
+  overflow: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f6f8fa;
+  white-space: nowrap;
+}
+
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.data-table th {
+  text-align: left;
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #636c76;
+  background: #ffffff;
+}
+
 /* Users view */
 .users-view {
   display: flex;
@@ -258,35 +293,8 @@
   color: #636c76;
 }
 
-.orgs-view__tableWrap {
-  background: #ffffff;
-  border: 1px solid #d1d9e0;
-  border-radius: 6px;
-  overflow: auto;
-}
-
-.orgs-view__table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.orgs-view__table th,
-.orgs-view__table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid #f6f8fa;
-  white-space: nowrap;
-}
-
-.orgs-view__table th {
-  text-align: left;
-  font-size: 12px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #636c76;
-  background: #f6f8fa;
-  position: sticky;
-  top: 0;
+.orgs-view__table th.orgs-view__num {
+  text-align: right;
 }
 
 .orgs-view__num {
@@ -799,9 +807,6 @@
 }
 
 .cost-centers-view__tableWrap {
-  background: #ffffff;
-  border: 1px solid #d1d9e0;
-  border-radius: 6px;
   overflow: hidden;
 }
 
@@ -816,33 +821,6 @@
   background: #f6f8fa;
 }
 
-.cost-centers-view__table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.cost-centers-view__table th,
-.cost-centers-view__table td {
-  padding: 12px 16px;
-  border-bottom: 1px solid #f6f8fa;
-  white-space: nowrap;
-}
-
-.cost-centers-view__table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.cost-centers-view__table th {
-  text-align: left;
-  font-size: 11px;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  font-weight: 600;
-  color: #636c76;
-  background: #ffffff;
-}
-
 .cost-centers-view__num {
   text-align: right;
   font-variant-numeric: tabular-nums;
@@ -880,10 +858,9 @@ td.cost-centers-view__num {
 
 /* Per-model breakdown */
 .per-model {
-  background: #ffffff;
-  border: 1px solid #d1d9e0;
-  border-radius: 6px;
-  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .per-model__header {
@@ -1033,26 +1010,6 @@ td.cost-centers-view__num {
   outline-offset: 2px;
 }
 
-.users-view__tableWrap {
-  background: #ffffff;
-  border: 1px solid #d1d9e0;
-  border-radius: 6px;
-  overflow: auto;
-}
-
-.users-view__table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.users-view__table th,
-.users-view__table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid #f6f8fa;
-  white-space: nowrap;
-}
-
 .users-view__row--clickable {
   cursor: pointer;
 }
@@ -1066,15 +1023,8 @@ td.cost-centers-view__num {
   outline-offset: -2px;
 }
 
-.users-view__table th {
-  text-align: left;
-  font-size: 12px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #636c76;
-  background: #f6f8fa;
-  position: sticky;
-  top: 0;
+.users-view__table th.users-view__num {
+  text-align: right;
 }
 
 .users-view__num {
@@ -1165,35 +1115,8 @@ td.cost-centers-view__num {
   color: #636c76;
 }
 
-.user-details__tableWrap {
-  background: #ffffff;
-  border: 1px solid #d1d9e0;
-  border-radius: 6px;
-  overflow: auto;
-}
-
-.user-details__table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.user-details__table th,
-.user-details__table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid #f6f8fa;
-  white-space: nowrap;
-}
-
-.user-details__table th {
-  text-align: left;
-  font-size: 12px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #636c76;
-  background: #f6f8fa;
-  position: sticky;
-  top: 0;
+.user-details__table th.user-details__num {
+  text-align: right;
 }
 
 .user-details__num {

src/views/CostCentersView.tsx

@@ -133,9 +133,9 @@ export function CostCentersView({ data, rangeStart }: { data: CostCenterResult;
       </div>
 
       <div className="cost-centers-view__tables">
-        <div className="cost-centers-view__tableWrap">
+          <div className="cost-centers-view__tableWrap data-table-wrap">
           <div className="cost-centers-view__tableTitle">Per model</div>
-          <table className="cost-centers-view__table">
+          <table className="cost-centers-view__table data-table">
             <thead>
               <tr>
                 <th>Model</th>
@@ -166,9 +166,9 @@ export function CostCentersView({ data, rangeStart }: { data: CostCenterResult;
           </table>
         </div>
 
-        <div className="cost-centers-view__tableWrap">
+          <div className="cost-centers-view__tableWrap data-table-wrap">
           <div className="cost-centers-view__tableTitle">Per user</div>
-          <table className="cost-centers-view__table">
+          <table className="cost-centers-view__table data-table">
             <thead>
               <tr>
                 <th>User</th>

src/views/OrganizationsView.tsx

@@ -20,8 +20,8 @@ export function OrganizationsView({ data }: { data: OrganizationResult }) {
         </div>
       </div>
 
-      <div className="orgs-view__tableWrap">
-        <table className="orgs-view__table">
+      <div className="orgs-view__tableWrap data-table-wrap">
+        <table className="orgs-view__table data-table">
           <thead>
             <tr>
               <th>Organization</th>

src/views/UserDetailsView.tsx

@@ -161,8 +161,8 @@ export function UserDetailsView({ user }: UserDetailsViewProps) {
             <MultiSeriesStackedBarChart title="Daily AI Credits by Model" labels={labels} series={aiuSeries} height={340} />
           </div>
 
-          <div className="user-details__tableWrap">
-            <table className="user-details__table">
+          <div className="user-details__tableWrap data-table-wrap">
+            <table className="user-details__table data-table">
               <thead>
                 <tr>
                   <th>Date</th>

src/views/UsersView.tsx

@@ -56,8 +56,8 @@ export function UsersView({ users, onSelectUser }: UsersViewProps) {
         aria-label="Search users"
       />
 
-      <div className="users-view__tableWrap">
-        <table className="users-view__table">
+      <div className="users-view__tableWrap data-table-wrap">
+        <table className="users-view__table data-table">
           <thead>
             <tr>
               <th>User</th>