Apply pill tab style across all portal pages (team, client, external)

src/pages/client/MyRequests.jsx

@@ -153,37 +153,22 @@ export default function MyRequests() {
         </div>
       ) : (
         <div>
-          <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-            <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
-              {[
-                { id: 'active', label: 'Active', count: activeTasks.length },
-                { id: 'client-review', label: 'Client Review', count: reviewTasks.length },
-                { id: 'completed', label: 'Completed', count: completedTasks.length },
-                { id: 'closed', label: 'Fully Closed', count: closedTasks.length },
-              ].map((tab, index) => (
-                <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-                  {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-                  <button
-                    type="button"
-                    onClick={() => setActiveTab(tab.id)}
-                    style={{
-                      background: 'none',
-                      border: 'none',
-                      padding: 0,
-                      margin: 0,
-                      cursor: 'pointer',
-                      color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                      font: 'inherit',
-                      textTransform: 'inherit',
-                      letterSpacing: 'inherit',
-                    }}
-                  >
-                    {tab.label}
-                    <span className="request-company-count" style={{ marginLeft: 6 }}>{tab.count}</span>
-                  </button>
-                </span>
-              ))}
-            </div>
+          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+            {[
+              { id: 'active', label: 'Active', count: activeTasks.length },
+              { id: 'client-review', label: 'Client Review', count: reviewTasks.length },
+              { id: 'completed', label: 'Completed', count: completedTasks.length },
+              { id: 'closed', label: 'Fully Closed', count: closedTasks.length },
+            ].map(tab => (
+              <button
+                key={tab.id}
+                type="button"
+                className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
+                onClick={() => setActiveTab(tab.id)}
+              >
+                {tab.label} ({tab.count})
+              </button>
+            ))}
           </div>
 
           {[

src/pages/external/MyRequests.jsx

@@ -204,26 +204,17 @@ export default function ExternalMyRequests() {
         </div>
       ) : (
         <div>
-          <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-            <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
-              {tabList.map((tab, index) => (
-                <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-                  {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-                  <button
-                    type="button"
-                    onClick={() => setActiveTab(tab.id)}
-                    style={{
-                      background: 'none', border: 'none', padding: 0, margin: 0, cursor: 'pointer',
-                      color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                      font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit',
-                    }}
-                  >
-                    {tab.label}
-                    <span className="request-company-count" style={{ marginLeft: 6 }}>{tab.groups.length}</span>
-                  </button>
-                </span>
-              ))}
-            </div>
+          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+            {tabList.map(tab => (
+              <button
+                key={tab.id}
+                type="button"
+                className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
+                onClick={() => setActiveTab(tab.id)}
+              >
+                {tab.label} ({tab.groups.length})
+              </button>
+            ))}
           </div>
 
           {currentGroups.length === 0 ? (

src/pages/team/Companies.jsx

@@ -275,33 +275,21 @@ export default function Companies() {
         </div>
       )}
 
-      <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-        <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
           {[
             { id: 'companies', label: 'Companies' },
             { id: 'clients', label: 'Clients' },
             { id: 'subcontractors', label: 'Subcontractors' },
-          ].map((tab, index) => (
-            <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-              <button
-                type="button"
-                onClick={() => setActiveTab(tab.id)}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  padding: 0,
-                  margin: 0,
-                  cursor: 'pointer',
-                  color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                  font: 'inherit',
-                  textTransform: 'inherit',
-                  letterSpacing: 'inherit',
-                }}
-              >
-                {tab.label}
-              </button>
-            </span>
+          ].map(tab => (
+            <button
+              key={tab.id}
+              type="button"
+              className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              {tab.label}
+            </button>
           ))}
         </div>
         {activeTab === 'companies' && (

src/pages/team/CompanyDetail.jsx

@@ -267,22 +267,17 @@ export default function CompanyDetail() {
       </div>
 
       {/* Tabs */}
-      <div style={{ display: 'flex', gap: 4, marginBottom: 24, borderBottom: '1px solid var(--border)', paddingBottom: 0 }}>
+      <div style={{ display: 'flex', gap: 4, marginBottom: 24, flexWrap: 'wrap' }}>
         {['users', 'projects', 'pricing'].map(t => (
           <button
             key={t}
             onClick={() => setTab(t)}
-            style={{
-              background: 'none', border: 'none', cursor: 'pointer',
-              padding: '8px 16px', fontSize: 13, fontWeight: 600,
-              color: tab === t ? 'var(--accent)' : 'var(--text-muted)',
-              borderBottom: tab === t ? '2px solid var(--accent)' : '2px solid transparent',
-              marginBottom: -1, textTransform: 'capitalize', fontFamily: 'inherit',
-            }}
+            className={`tab-btn${tab === t ? ' active' : ''}`}
+            style={{ textTransform: 'capitalize' }}
           >
             {t}
             {t === 'users' && availableUsers.length > 0 && (
-              <span style={{ marginLeft: 6, fontSize: 10, background: 'var(--danger)', color: 'white', padding: '1px 5px', borderRadius: 10, fontWeight: 700 }}>
+              <span style={{ marginLeft: 6, fontSize: 10, background: tab === t ? 'rgba(0,0,0,0.3)' : 'var(--danger)', color: 'white', padding: '1px 5px', borderRadius: 10, fontWeight: 700 }}>
                 {availableUsers.length}
               </span>
             )}

src/pages/team/Invoices.jsx

@@ -498,33 +498,21 @@ export default function Invoices() {
         </div>
       </div>
 
-      <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-        <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
           {[
             { id: 'invoices', label: 'Invoices' },
             { id: 'sub-invoices', label: 'Subcontractor Invoices' },
             { id: 'expenses', label: 'Expenses' },
-          ].map((tab, index) => (
-            <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-              <button
-                type="button"
-                onClick={() => setActiveTab(tab.id)}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  padding: 0,
-                  margin: 0,
-                  cursor: 'pointer',
-                  color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                  font: 'inherit',
-                  textTransform: 'inherit',
-                  letterSpacing: 'inherit',
-                }}
-              >
-                {tab.label}
-              </button>
-            </span>
+          ].map(tab => (
+            <button
+              key={tab.id}
+              type="button"
+              className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              {tab.label}
+            </button>
           ))}
         </div>
         {activeTab === 'invoices' && (

src/pages/team/Requests.jsx

@@ -419,37 +419,22 @@ export default function Requests() {
         </div>
       ) : (
         <div>
-          <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-            <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
-              {[
-                { id: 'active', label: 'Active', count: activeGroups.length },
-                { id: 'client-review', label: 'Client Review', count: clientReviewGroups.length },
-                { id: 'completed', label: 'Completed', count: completedGroups.length },
-                { id: 'closed', label: 'Fully Closed', count: closedGroups.length },
-              ].map((tab, index) => (
-                <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-                  {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-                  <button
-                    type="button"
-                    onClick={() => setActiveTab(tab.id)}
-                    style={{
-                      background: 'none',
-                      border: 'none',
-                      padding: 0,
-                      margin: 0,
-                      cursor: 'pointer',
-                      color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                      font: 'inherit',
-                      textTransform: 'inherit',
-                      letterSpacing: 'inherit',
-                    }}
-                  >
-                    {tab.label}
-                    <span className="request-company-count" style={{ marginLeft: 6 }}>{tab.count}</span>
-                  </button>
-                </span>
-              ))}
-            </div>
+          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+            {[
+              { id: 'active', label: 'Active', count: activeGroups.length },
+              { id: 'client-review', label: 'Client Review', count: clientReviewGroups.length },
+              { id: 'completed', label: 'Completed', count: completedGroups.length },
+              { id: 'closed', label: 'Fully Closed', count: closedGroups.length },
+            ].map(tab => (
+              <button
+                key={tab.id}
+                type="button"
+                className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
+                onClick={() => setActiveTab(tab.id)}
+              >
+                {tab.label} ({tab.count})
+              </button>
+            ))}
           </div>
 
           {activeTab === 'active' && (