Align styling across different views.

static/css/style.css

@@ -313,6 +313,7 @@ body:has(.sidebar.collapsed) .main-content {
     border-radius: 4px;
 }
 
+/* Button Base Styles */
 button {
     background-color: #4CAF50;
     color: white;
@@ -320,53 +321,150 @@ button {
     padding: 8px 16px;
     cursor: pointer;
     border-radius: 4px;
+    transition: all 0.2s ease;
 }
 
 .btn {
-    padding: 5px 10px;
+    padding: 0.5rem 1rem;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 1rem;
     text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.2s ease;
+    line-height: 1.5;
+    font-weight: 500;
 }
 
-.btn-primary {
+/* Button Sizes */
-    background-color: #45a049;
+.btn-xs {
-    color: white;
+    padding: 0.25rem 0.5rem;
-    margin-bottom: 1rem;
+    font-size: 0.8rem;
-    margin-right: 1rem;
+    min-width: 50px;
-    margin-left: 1rem;
-    display: inline-block;
-    font-size: medium;
 }
 
 .btn-sm {
-    padding: 5px 10px;
+    padding: 0.375rem 0.75rem;
-    border-radius: 4px;
+    font-size: 0.875rem;
-    font-size: small;
+}
+
+.btn-md {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border-radius: 8px;
+}
+
+.btn-small {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    margin-right: 0.5rem;
+}
+
+/* Button Colors */
+.btn-primary {
+    background-color: #007bff;
+    color: white;
+    border: 1px solid #007bff;
+}
+
+.btn-primary:hover {
+    background-color: #0056b3;
+    border-color: #0056b3;
 }
 
 .btn-secondary {
-    background-color: #f44336;
+    background-color: #6c757d;
     color: white;
+    border: 1px solid #6c757d;
+}
+
+.btn-secondary:hover {
+    background-color: #545b62;
+    border-color: #545b62;
 }
 
 .btn-success {
-    background-color: #4CAF50;
+    background-color: #28a745;
     color: white;
+    border: 1px solid #28a745;
 }
 
-.btn:hover {
+.btn-success:hover {
-    background-color: #45a049;
+    background-color: #218838;
+    border-color: #218838;
 }
 
 .btn-danger {
-    background-color: #f44336;
+    background-color: #dc3545;
+    color: white;
+    border: 1px solid #dc3545;
 }
 
 .btn-danger:hover {
-    background-color: #d32f2f;
+    background-color: #c82333;
+    border-color: #c82333;
+}
+
+.btn-warning {
+    background-color: #ffc107;
+    color: #212529;
+    border: 1px solid #ffc107;
+}
+
+.btn-warning:hover {
+    background-color: #e0a800;
+    border-color: #e0a800;
+}
+
+.btn-info {
+    background-color: #17a2b8;
+    color: white;
+    border: 1px solid #17a2b8;
+}
+
+.btn-info:hover {
+    background-color: #138496;
+    border-color: #138496;
+}
+
+/* Button Outline Variants */
+.btn-outline {
+    border: 1px solid #007bff;
+    color: #007bff;
+    background: transparent;
+}
+
+.btn-outline:hover {
+    background-color: #007bff;
+    color: white;
+}
+
+/* Special Button Styles */
+.btn-filter {
+    padding: 0.5rem 1rem;
+    border: 1px solid #dee2e6;
+    background: white;
+    color: #495057;
+    border-radius: 4px;
+}
+
+.btn-filter:hover {
+    background-color: #f8f9fa;
+    border-color: #adb5bd;
+}
+
+.btn-filter.active {
+    background-color: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+/* Generic Button Hover */
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 footer {
@@ -390,8 +488,12 @@ body:has(.sidebar.collapsed) footer {
 
 /* Time tracking specific styles */
 .timetrack-container {
-    max-width: 800px;
+    max-width: 1200px;
     margin: 0 auto 3rem auto;
+    padding: 1.5rem;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .timer-section {
@@ -437,17 +539,25 @@ body:has(.sidebar.collapsed) footer {
     width: 100%;
     border-collapse: collapse;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-top: 1rem;
 }
 
 .time-history th, .time-history td {
     padding: 0.8rem;
     text-align: left;
     border-bottom: 1px solid #ddd;
+    min-height: 2.5rem;
+    vertical-align: middle;
 }
 
 .time-history th {
     background-color: #f2f2f2;
     font-weight: bold;
+    height: 2.5rem;
+}
+
+.time-history tr {
+    height: 2.5rem;
 }
 
 .time-history tr:hover {
@@ -519,10 +629,10 @@ body:has(.sidebar.collapsed) footer {
 }
 
 .config-container {
-    max-width: 800px;
+    max-width: 1200px;
     margin: 0 auto 3rem auto;
-    padding: 1rem;
+    padding: 1.5rem;
-    background-color: #f9f9f9;
+    background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
@@ -668,11 +778,12 @@ input[type="time"]::-webkit-datetime-edit {
 
 /* Admin Dashboard Styles */
 .admin-container {
+    max-width: 1200px;
+    margin: 0 auto 2rem auto;
     padding: 1.5rem;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    margin-bottom: 2rem;
 }
 
 .admin-header {
@@ -811,17 +922,25 @@ input[type="time"]::-webkit-datetime-edit {
     width: 100%;
     border-collapse: collapse;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-top: 1rem;
 }
 
 .data-table th, .data-table td {
     padding: 0.8rem;
     text-align: left;
     border-bottom: 1px solid #ddd;
+    min-height: 2.5rem;
+    vertical-align: middle;
 }
 
 .data-table th {
     background-color: #f2f2f2;
     font-weight: bold;
+    height: 2.5rem;
+}
+
+.data-table tr {
+    height: 2.5rem;
 }
 
 .data-table tr:hover {
@@ -1086,8 +1205,14 @@ input[type="time"]::-webkit-datetime-edit {
         max-width: 300px;
     }
 
-    .timetrack-container {
+    .timetrack-container,
-        padding: 0;
+    .admin-container,
+    .config-container,
+    .table-container,
+    .team-summary-container {
+        padding: 1rem;
+        margin: 0 1rem 2rem 1rem;
+        max-width: none;
     }
 
     .admin-panel {
@@ -1289,9 +1414,12 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .table-container {
+    max-width: 1200px;
+    margin: 0 auto 2rem auto;
+    padding: 1.5rem;
     background: white;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     overflow: hidden;
 }
 
@@ -1356,9 +1484,12 @@ input[type="time"]::-webkit-datetime-edit {
 }
 
 .team-summary-container {
+    max-width: 1200px;
+    margin: 0 auto 2rem auto;
+    padding: 1.5rem;
     background: white;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     overflow: hidden;
 }
 

templates/admin_projects.html

@@ -66,6 +66,13 @@
 </div>
 
 <style>
+/* Override container width for admin projects page */
+.admin-projects-container {
+    max-width: 1200px !important;
+    width: auto !important;
+    padding: 1.5rem !important;
+    margin: 0 auto 2rem auto !important;
+}
 
 .projects-table {
     overflow-x: auto;
@@ -96,21 +103,7 @@
     white-space: nowrap;
 }
 
-.btn-small {
+/* Button definitions now in main style.css */
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-    margin-right: 0.5rem;
-}
-
-.btn-danger {
-    background-color: #dc3545;
-    border-color: #dc3545;
-}
-
-.btn-danger:hover {
-    background-color: #c82333;
-    border-color: #bd2130;
-}
 
 .no-data {
     text-align: center;

templates/admin_teams.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block content %}
-<div class="container">
+<div class="admin-container">
     <div class="admin-header">
         <h1>Team Management</h1>
         <a href="{{ url_for('create_team') }}" class="btn btn-success">Create New Team</a>
@@ -25,8 +25,8 @@
                         <td>{{ team.description }}</td>
                         <td>{{ team.users|length }}</td>
                         <td>{{ team.created_at.strftime('%Y-%m-%d') }}</td>
-                        <td>
+                        <td class="actions">
-                            <a href="{{ url_for('manage_team', team_id=team.id) }}" class="button btn btn-sm btn-info">Manage</a>
+                            <a href="{{ url_for('manage_team', team_id=team.id) }}" class="button btn btn-sm btn-primary">Manage</a>
                             <form method="POST" action="{{ url_for('delete_team', team_id=team.id) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this team?');">
                                 <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                             </form>

templates/admin_work_policies.html

@@ -283,36 +283,7 @@
     color: #495057;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    text-decoration: none;
-    cursor: pointer;
-    margin-right: 1rem;
-    margin-bottom: 0.5rem;
-    transition: background-color 0.2s ease;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
 
 /* Make preset cards clickable */
 .preset-card {

templates/create_project.html

@@ -112,15 +112,7 @@
     margin-top: 2rem;
 }
 
-.btn-secondary {
+/* Button styles now centralized in main style.css */
-    background-color: #6c757d;
-    border-color: #6c757d;
-}
-
-.btn-secondary:hover {
-    background-color: #5a6268;
-    border-color: #545b62;
-}
 
 #code {
     text-transform: uppercase;

templates/edit_project.html

@@ -174,15 +174,7 @@
     margin-top: 2rem;
 }
 
-.btn-secondary {
+/* Button styles now centralized in main style.css */
-    background-color: #6c757d;
-    border-color: #6c757d;
-}
-
-.btn-secondary:hover {
-    background-color: #5a6268;
-    border-color: #545b62;
-}
 
 #code {
     text-transform: uppercase;

templates/profile.html

@@ -166,41 +166,7 @@
     transition: background-color 0.2s;
 }
 
-.btn-success {
+/* Button styles now centralized in main style.css */
-    background: #28a745;
-    color: white;
-}
-
-.btn-success:hover {
-    background: #218838;
-}
-
-.btn-danger {
-    background: #dc3545;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #c82333;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-warning {
-    background: #ffc107;
-    color: #212529;
-}
-
-.btn-warning:hover {
-    background: #e0a800;
-}
 
 .form-group {
     margin-bottom: 1.5rem;

templates/setup_2fa.html

@@ -175,34 +175,7 @@
     margin-top: 1.5rem;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    display: inline-block;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
 
 .security-notice {
     background: #fff3cd;

templates/system_admin_announcement_form.html

@@ -326,35 +326,7 @@ document.addEventListener('DOMContentLoaded', function() {
     border-top: 1px solid #e9ecef;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-    text-align: center;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
 
 @media (max-width: 768px) {
     .form-row {

templates/system_admin_companies.html

@@ -221,39 +221,7 @@
     gap: 0.5rem;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
 
 .pagination-section {
     margin: 2rem 0;

templates/system_admin_company_detail.html

@@ -536,30 +536,7 @@
     color: #6a1b99;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
 
 .btn-outline {
     background: transparent;

templates/system_admin_dashboard.html

@@ -327,30 +327,7 @@
     flex-wrap: wrap;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
 
 .subtitle {
     color: #6c757d;

templates/system_admin_edit_user.html

@@ -308,43 +308,7 @@
     flex-wrap: wrap;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-danger {
-    background: #dc3545;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #c82333;
-}
 
 .danger-zone {
     margin-left: auto;

templates/system_admin_health.html

@@ -506,27 +506,7 @@
     white-space: pre-wrap;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-    text-decoration: none;
-    color: white;
-}
 
 @media (max-width: 768px) {
     .health-cards {

templates/system_admin_settings.html

@@ -500,52 +500,7 @@
     font-size: 0.875rem;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-danger {
-    background: #dc3545;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #c82333;
-}
-
-.btn-warning {
-    background: #ffc107;
-    color: #212529;
-}
-
-.btn-warning:hover {
-    background: #e0a800;
-}
 
 @media (max-width: 768px) {
     .setting-group {

templates/system_admin_time_entries.html

@@ -390,30 +390,7 @@
     margin: 0;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border: none;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
 
 .btn-outline {
     background: transparent;

templates/system_admin_users.html

@@ -328,37 +328,7 @@
     transition: background-color 0.2s;
 }
 
-.btn-primary {
+/* Button styles now centralized in main style.css */
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
-
-.btn-secondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn-secondary:hover {
-    background: #545b62;
-}
-
-.btn-danger {
-    background: #dc3545;
-    color: white;
-}
-
-.btn-danger:hover {
-    background: #c82333;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-}
 
 .pagination-section {
     margin-top: 2rem;

templates/verify_2fa.html

@@ -102,24 +102,7 @@
     margin-bottom: 1.5rem;
 }
 
-.btn {
+/* Button styles now centralized in main style.css */
-    padding: 0.75rem 2rem;
-    border: none;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.2s;
-    width: 100%;
-}
-
-.btn-primary {
-    background: #007bff;
-    color: white;
-}
-
-.btn-primary:hover {
-    background: #0056b3;
-}
 
 .help-section {
     text-align: center;