diff --git a/static/css/TABLE_CONSOLIDATION_EXAMPLE.html b/static/css/TABLE_CONSOLIDATION_EXAMPLE.html new file mode 100644 index 0000000..38ee0ac --- /dev/null +++ b/static/css/TABLE_CONSOLIDATION_EXAMPLE.html @@ -0,0 +1,201 @@ + + + +
+

BEFORE (Current Implementation)

+
+ + + + + + + + + + + + + + + + + + + +
CompanyTypeUsersStatusActions
+
+
Acme Corp
+
acme-corp
+
+ 		+ Company + +
+ 25 + users +
+ 		+ Active + +
+ View + Edit +
+
+
+
+ + +
+

AFTER (Consolidated Implementation)

+
+
+ + + + + + + + + + + + + + + + + + + +
CompanyTypeUsersStatusActions
+
+
Acme Corp
+
acme-corp
+
+ 		+ Company + +
+ 25 + users +
+ 		+ Active + +
+ View + Edit +
+
+
+
+
+ + +
+

Mobile-Optimized Version

+
+ + + + + + + + + + + + + + + + + + + +
CompanyTypeUsersStatusActions
+
+
Acme Corp
+
acme-corp
+
+ 		+ Company + 25 users + Active + +
+ View + Edit +
+
+
+
+ + +
+

Key Improvements with Consolidated Tables:

+ +
+ + +
+

CSS Classes Comparison

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Old ClassNew ClassPurpose
data-tabletable table--hoverBasic data table with hover
users-tabletable table--hover table--adminAdmin user management table
entries-tabletable table--hover table--time-entriesTime tracking entries
status-badge status-activetable-badge table-badge--successStatus indicators
badge badge-companytable-badge table-badge--infoType badges
+
\ No newline at end of file diff --git a/static/css/TABLE_MIGRATION_GUIDE.md b/static/css/TABLE_MIGRATION_GUIDE.md new file mode 100644 index 0000000..eb08379 --- /dev/null +++ b/static/css/TABLE_MIGRATION_GUIDE.md @@ -0,0 +1,263 @@ +# Table Styles Migration Guide + +This guide helps migrate from the old scattered table styles to the new consolidated table system. + +## Overview + +The new consolidated table system provides: +- A single base `.table` class with all common styles +- Modifier classes for variations (hover, striped, compact, etc.) +- Consistent spacing and colors using CSS variables +- Better dark mode support +- Mobile-responsive options + +## Migration Steps + +### 1. Include the new CSS file + +Add to your base template (layout.html): +```html + +``` + +### 2. Update Table Classes + +#### Basic Tables + +**Old:** +```html + +
+
+``` + +**New:** +```html +
+``` + +#### Time Entries Table + +**Old:** +```html +
+``` + +**New:** +```html +
+``` + +#### Admin Tables + +**Old:** +```html +
+
+``` + +**New:** +```html +
+``` + +### 3. Add Container Classes + +Wrap tables in proper containers for better styling: + +```html +
+
+
+ +
+ + +``` + +### 4. Update Table Components + +#### Actions Column + +**Old:** +```html + +
+ + +
+ +``` + +**New:** +```html + +
+ + +
+ +``` + +#### Status Badges + +**Old:** +```html +Active +``` + +**New:** +```html +Active +``` + +### 5. Mobile Optimization + +For better mobile display, add data attributes: + +```html + + + + + + + + +
John Doejohn@example.com + Active +
+``` + +## Available Modifier Classes + +### Base Modifiers +- `.table--hover` - Adds hover effect to rows +- `.table--striped` - Alternating row colors +- `.table--bordered` - Adds borders to all cells +- `.table--compact` - Reduces padding +- `.table--sm` - Smaller font size +- `.table--fixed` - Fixed table layout + +### Specialized Modifiers +- `.table--time-entries` - Time tracking table styling +- `.table--admin` - Admin panel tables +- `.table--data` - Data-heavy tables +- `.table--mobile-stack` - Stacks on mobile + +### Responsive Options +- `.table-responsive` - Horizontal scroll on small screens +- `.table--scroll-body` - Fixed header with scrollable body + +## Examples + +### Basic Data Table +```html +
+ + + + + + + + + + + + + + + +
NameEmailActions
John Doejohn@example.com +
+ +
+
+
+``` + +### Time Entries Table +```html +
+ + + + + + + + + + + + + + + + + +
DateTimeDurationProject
+ 15 + JAN + 09:00 - 17:008h 00mTimeTrack Development
+
+``` + +### Mobile-Friendly Table +```html +
+ + + + + + + + + + + + + + + + + +
UserRoleStatusActions
+ + Jane Smith + Administrator + Active + +
+ +
+
+
+``` + +## Removing Old Styles + +Once migration is complete, the following CSS can be removed: + +1. From `style.css`: + - `.data-table` definitions (lines 1510-1537) + - `.users-table, .projects-table` definitions (lines 1286-1313) + - `.time-history` definitions (lines 788-815) + +2. From `time-tracking.css`: + - `.entries-table` definitions (lines 334-355) + +3. From dark mode CSS: + - Individual table class overrides can be simplified + +## Testing Checklist + +- [ ] All tables display correctly in light mode +- [ ] All tables display correctly in dark mode +- [ ] Hover effects work +- [ ] Mobile responsiveness works +- [ ] Table actions are clickable +- [ ] Badges and status indicators display correctly +- [ ] No visual regressions from previous implementation \ No newline at end of file diff --git a/static/css/auth.css b/static/css/auth.css index 6bebcc4..b7f9280 100644 --- a/static/css/auth.css +++ b/static/css/auth.css @@ -579,4 +579,120 @@ textarea.form-control { align-items: center; height: 48px; /* Match input height */ top: 0; +} + +/* Dark Mode Styles for Auth Pages */ +[data-theme="dark"] body.auth-page { + background: linear-gradient(135deg, #2d3561 0%, #3b2451 100%); +} + +[data-theme="dark"] .auth-container { + background: var(--bg-card); + color: var(--text-primary); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); +} + +[data-theme="dark"] .auth-header h1 { + color: var(--text-primary); +} + +[data-theme="dark"] .auth-header p { + color: var(--text-secondary); +} + +[data-theme="dark"] .form-group label { + color: var(--text-secondary); +} + +[data-theme="dark"] .form-control { + background-color: var(--bg-input); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .form-control:focus { + background-color: var(--bg-input); + border-color: var(--primary-color); + color: var(--text-primary); + box-shadow: 0 0 0 0.2rem rgba(122, 141, 245, 0.25); +} + +[data-theme="dark"] .form-control::placeholder { + color: var(--text-tertiary); +} + +[data-theme="dark"] .input-icon i { + color: var(--text-tertiary); +} + +[data-theme="dark"] .auth-divider { + color: var(--text-tertiary); +} + +[data-theme="dark"] .auth-divider::before, +[data-theme="dark"] .auth-divider::after { + background-color: var(--border-primary); +} + +[data-theme="dark"] .auth-footer { + color: var(--text-secondary); +} + +[data-theme="dark"] .auth-footer a { + color: var(--primary-color); +} + +[data-theme="dark"] .form-text { + color: var(--text-tertiary); +} + +[data-theme="dark"] .progress-step-number { + background: var(--bg-tertiary); + color: var(--text-secondary); +} + +[data-theme="dark"] .progress-step.active .progress-step-number { + background: var(--primary-color); + color: white; +} + +[data-theme="dark"] .progress-step-label { + color: var(--text-secondary); +} + +[data-theme="dark"] .invite-info { + background-color: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .invite-info strong { + color: var(--text-primary); +} + +[data-theme="dark"] .company-info-card { + background-color: var(--bg-secondary); + border-color: var(--primary-color); +} + +[data-theme="dark"] .password-strength-bar { + background-color: var(--bg-tertiary); +} + +[data-theme="dark"] .password-requirements li { + color: var(--text-secondary); +} + +[data-theme="dark"] .password-requirements li.valid { + color: var(--success-color); +} + +[data-theme="dark"] .social-buttons .btn-outline-dark { + background-color: transparent; + color: var(--text-primary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .social-buttons .btn-outline-dark:hover { + background-color: var(--bg-hover); + border-color: var(--border-hover); } \ No newline at end of file diff --git a/static/css/dark-mode.css b/static/css/dark-mode.css new file mode 100644 index 0000000..d6120eb --- /dev/null +++ b/static/css/dark-mode.css @@ -0,0 +1,2885 @@ +/* Dark Mode Theme for TimeTrack */ + +/* Dark mode CSS variables */ +[data-theme="dark"] { + /* Background colors */ + --bg-primary: #0f0f0f; + --bg-secondary: #1a1a1a; + --bg-tertiary: #242424; + --bg-card: #1e1e1e; + --bg-hover: #2a2a2a; + --bg-active: #333333; + --bg-input: #1a1a1a; + --bg-modal: #1e1e1e; + + /* Text colors */ + --text-primary: #f0f0f0; /* Brighter for better readability */ + --text-secondary: #b8b8b8; /* Slightly brighter */ + --text-tertiary: #8c8c8c; /* More readable */ + --text-muted: #7b7b7b; + --text-inverse: #0f0f0f; + --text-heading: #ffffff; /* Pure white for headings */ + --text-title: #f8f8f8; /* Near white for titles */ + + /* Border colors */ + --border-primary: #333333; + --border-secondary: #2a2a2a; + --border-hover: #404040; + --border-focus: #5a5a5a; + + /* Brand colors (slightly adjusted for dark mode) */ + --primary-color: #7a8df5; + --primary-gradient-start: #7a8df5; + --primary-gradient-end: #8b5bc9; + --primary-hover: #8e9ff7; + --primary-active: #6a7de5; + + /* Semantic colors */ + --success-color: #4ade80; + --success-bg: rgba(74, 222, 128, 0.1); + --warning-color: #fbbf24; + --warning-bg: rgba(251, 191, 36, 0.1); + --error-color: #f87171; + --error-bg: rgba(248, 113, 113, 0.1); + --info-color: #60a5fa; + --info-bg: rgba(96, 165, 250, 0.1); + + /* Shadows (more subtle in dark mode) */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); + --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6); + + /* Specific component colors */ + --sidebar-bg: #1e1e1e; /* Lighter sidebar background */ + --sidebar-hover: #2a2a2a; + --sidebar-active: #333333; + --sidebar-text: #f5f5f5; /* Even brighter sidebar text */ + --sidebar-icon: #d4d4d4; /* Much brighter icons */ + + --header-bg: linear-gradient(135deg, #7a8df5 0%, #8b5bc9 100%); + --header-text: #ffffff; + + --table-header-bg: #242424; + --table-row-hover: #1e1e1e; + --table-row-stripe: #1a1a1a; + + --dropdown-bg: #242424; + --dropdown-hover: #2a2a2a; + + --badge-bg: rgba(122, 141, 245, 0.2); + --badge-text: #a8b9ff; + + /* Chart colors */ + --chart-grid: #333333; + --chart-text: #a8a8a8; + + /* Scrollbar */ + --scrollbar-track: #1a1a1a; + --scrollbar-thumb: #4a4a4a; + --scrollbar-thumb-hover: #5a5a5a; +} + +/* Base dark mode styles */ +[data-theme="dark"] { + color-scheme: dark; +} + +[data-theme="dark"] body { + background-color: var(--bg-primary); + color: var(--text-primary); +} + +/* Global heading styles for better readability */ +[data-theme="dark"] h1, +[data-theme="dark"] h2, +[data-theme="dark"] h3, +[data-theme="dark"] h4, +[data-theme="dark"] h5, +[data-theme="dark"] h6 { + color: var(--text-title); +} + +[data-theme="dark"] h1 { + color: var(--text-heading); +} + +[data-theme="dark"] h2 { + color: var(--text-heading); +} + +/* Main layout components */ +[data-theme="dark"] .main-content { + background-color: var(--bg-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .sidebar { + background-color: var(--sidebar-bg); + color: var(--sidebar-text); + border-right: 1px solid var(--border-primary); +} + +[data-theme="dark"] .sidebar-header { + background: linear-gradient(135deg, + rgba(122, 141, 245, 0.12) 0%, + rgba(139, 91, 201, 0.12) 50%, + rgba(122, 141, 245, 0.08) 100%) !important; + border-bottom: 1px solid rgba(122, 141, 245, 0.25); + box-shadow: + 0 2px 10px rgba(122, 141, 245, 0.15), + inset 0 -1px 0 rgba(122, 141, 245, 0.2); + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .sidebar-header::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + rgba(122, 141, 245, 0.6) 50%, + transparent 100%); + animation: shimmer 3s ease-in-out infinite; +} + +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +[data-theme="dark"] .sidebar-header h2, +[data-theme="dark"] .sidebar-header h2 a { + color: var(--sidebar-text) !important; +} + +[data-theme="dark"] .sidebar-header h2 a:hover { + color: var(--primary-color) !important; +} + +[data-theme="dark"] .sidebar-header small { + color: var(--text-tertiary) !important; +} + +/* Sidebar Navigation - Lighter colors for better visibility */ +[data-theme="dark"] .sidebar-nav { + background-color: transparent; +} + +[data-theme="dark"] .sidebar-nav ul { + background-color: transparent; +} + +[data-theme="dark"] .sidebar-nav li { + background-color: transparent; +} + +[data-theme="dark"] .sidebar-nav a, +[data-theme="dark"] .nav-link { + color: var(--sidebar-text); + transition: all 0.2s ease; +} + +[data-theme="dark"] .sidebar-nav a:hover, +[data-theme="dark"] .nav-link:hover { + background-color: var(--sidebar-hover); + color: var(--text-heading); +} + +[data-theme="dark"] .sidebar-nav a.active, +[data-theme="dark"] .nav-link.active { + background-color: var(--sidebar-active); + color: var(--text-heading); +} + +[data-theme="dark"] .sidebar-nav i, +[data-theme="dark"] .nav-link i { + color: var(--sidebar-icon); +} + +[data-theme="dark"] .sidebar-nav a:hover i, +[data-theme="dark"] .nav-link:hover i, +[data-theme="dark"] .sidebar-nav a.active i, +[data-theme="dark"] .nav-link.active i { + color: var(--primary-color); +} + +/* Nav divider */ +[data-theme="dark"] .nav-divider { + color: var(--text-tertiary); + border-top: 1px solid var(--border-primary); + margin: 0.5rem 0; + padding-top: 0.5rem; + opacity: 0.7; +} + +/* Cards and containers */ +[data-theme="dark"] .card, +[data-theme="dark"] .admin-card, +[data-theme="dark"] .feature-card, +[data-theme="dark"] .management-card, +[data-theme="dark"] .widget { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .card-header { + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary); + color: var(--text-heading); +} + +/* Card titles and headings */ +[data-theme="dark"] .card-header h1, +[data-theme="dark"] .card-header h2, +[data-theme="dark"] .card-header h3, +[data-theme="dark"] .card-header h4, +[data-theme="dark"] .card-header h5, +[data-theme="dark"] .card-header h6 { + color: var(--text-heading); +} + +[data-theme="dark"] .card h1, +[data-theme="dark"] .card h2, +[data-theme="dark"] .card h3, +[data-theme="dark"] .card h4, +[data-theme="dark"] .card h5, +[data-theme="dark"] .card h6 { + color: var(--text-title); +} + +[data-theme="dark"] .page-container { + background-color: transparent; +} + +/* ========================================== + COMMON HEADER STYLES + All headers follow this consistent pattern: + - Background: gradient or solid secondary + - Text: white or heading color + - Border: primary color + - Consistent padding and spacing + ========================================== */ + +/* Primary page headers with gradient */ +[data-theme="dark"] .page-header { + background: linear-gradient(135deg, + rgba(122, 141, 245, 0.15) 0%, + rgba(139, 91, 201, 0.15) 50%, + rgba(122, 141, 245, 0.10) 100%); + color: var(--header-text); + border: 1px solid rgba(122, 141, 245, 0.3); + padding: 2rem; + border-radius: 12px; + box-shadow: + 0 0 20px rgba(122, 141, 245, 0.2), + 0 0 40px rgba(139, 91, 201, 0.1), + inset 0 0 20px rgba(122, 141, 245, 0.05); + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .page-header::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient( + circle, + rgba(122, 141, 245, 0.1) 0%, + transparent 70% + ); + animation: pulse-glow 4s ease-in-out infinite; + pointer-events: none; +} + +@keyframes pulse-glow { + 0%, 100% { opacity: 0.5; transform: scale(1); } + 50% { opacity: 0.8; transform: scale(1.05); } +} + margin-bottom: 2rem; +} + +[data-theme="dark"] .page-title, +[data-theme="dark"] .page-subtitle { + color: var(--header-text); +} + +/* Secondary headers (cards, sections, panels) */ +[data-theme="dark"] .card-header, +[data-theme="dark"] .section-header, +[data-theme="dark"] .panel-header, +[data-theme="dark"] .widget-header, +[data-theme="dark"] .modal-header, +[data-theme="dark"] .settings-header, +[data-theme="dark"] .table-header, +[data-theme="dark"] .form-header, +[data-theme="dark"] .admin-header, +[data-theme="dark"] .system-header, +[data-theme="dark"] .company-header, +[data-theme="dark"] .config-header, +[data-theme="dark"] .management-header { + background-color: var(--bg-secondary); + color: var(--text-heading); + border-bottom: 1px solid var(--border-primary); + padding: 1.5rem; +} + +/* Ensure all header titles use heading color */ +[data-theme="dark"] .card-header h1, +[data-theme="dark"] .card-header h2, +[data-theme="dark"] .card-header h3, +[data-theme="dark"] .card-header h4, +[data-theme="dark"] .section-header h1, +[data-theme="dark"] .section-header h2, +[data-theme="dark"] .section-header h3, +[data-theme="dark"] .panel-header h1, +[data-theme="dark"] .panel-header h2, +[data-theme="dark"] .panel-header h3, +[data-theme="dark"] .settings-header h1, +[data-theme="dark"] .settings-header h2, +[data-theme="dark"] .settings-header h3 { + color: var(--text-heading); +} + +/* Header content and actions */ +[data-theme="dark"] .header-content { + color: inherit; +} + +[data-theme="dark"] .header-actions .btn { + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--text-heading); +} + +[data-theme="dark"] .header-actions .btn:hover { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.3); +} + +/* Forms and inputs */ +[data-theme="dark"] input, +[data-theme="dark"] select, +[data-theme="dark"] textarea { + background-color: var(--bg-input); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] input:focus, +[data-theme="dark"] select:focus, +[data-theme="dark"] textarea:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(122, 141, 245, 0.2); +} + +[data-theme="dark"] input::placeholder, +[data-theme="dark"] textarea::placeholder { + color: var(--text-tertiary); +} + +[data-theme="dark"] label { + color: var(--text-secondary); +} + +/* Buttons */ +[data-theme="dark"] .btn { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .btn:hover { + background-color: var(--bg-hover); + border-color: var(--border-hover); +} + +[data-theme="dark"] .btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + color: white; +} + +[data-theme="dark"] .btn-primary:hover { + background-color: var(--primary-hover); + border-color: var(--primary-hover); +} + +[data-theme="dark"] .btn-secondary { + background-color: transparent; + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .btn-secondary:hover { + background-color: var(--bg-hover); + border-color: var(--border-hover); +} + +[data-theme="dark"] .btn-danger { + background-color: var(--error-color); + border-color: var(--error-color); + color: white; +} + +[data-theme="dark"] .btn-success { + background-color: var(--success-color); + border-color: var(--success-color); + color: var(--text-inverse); +} + +/* Tables */ +[data-theme="dark"] .data-table, +[data-theme="dark"] table { + background-color: var(--bg-card); + color: var(--text-primary); +} + +[data-theme="dark"] .data-table thead, +[data-theme="dark"] table thead { + background-color: var(--table-header-bg); +} + +[data-theme="dark"] .data-table th, +[data-theme="dark"] table th { + color: var(--text-title); + font-weight: 600; + border-bottom: 2px solid var(--border-primary); +} + +[data-theme="dark"] .data-table td, +[data-theme="dark"] table td { + border-bottom: 1px solid var(--border-secondary); +} + +[data-theme="dark"] .data-table tbody tr:hover, +[data-theme="dark"] table tbody tr:hover { + background-color: var(--table-row-hover); +} + +[data-theme="dark"] .data-table tbody tr:nth-child(even), +[data-theme="dark"] table tbody tr:nth-child(even) { + background-color: var(--table-row-stripe); +} + +/* Modals */ +[data-theme="dark"] .modal-content { + background-color: var(--bg-modal); + color: var(--text-primary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .modal-header { + border-bottom: 1px solid var(--border-primary); +} + +[data-theme="dark"] .modal-footer { + border-top: 1px solid var(--border-primary); +} + +[data-theme="dark"] .close { + color: var(--text-secondary); +} + +[data-theme="dark"] .close:hover { + color: var(--text-primary); +} + +/* Dropdowns */ +[data-theme="dark"] .dropdown-menu { + background-color: var(--dropdown-bg); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .dropdown-item { + color: var(--text-primary); +} + +[data-theme="dark"] .dropdown-item:hover { + background-color: var(--dropdown-hover); +} + +[data-theme="dark"] .dropdown-divider { + border-top: 1px solid var(--border-primary); +} + +/* Badges and alerts */ +[data-theme="dark"] .badge { + background-color: var(--badge-bg); + color: var(--badge-text); +} + +[data-theme="dark"] .alert { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .alert-success { + background-color: var(--success-bg); + border-color: var(--success-color); + color: var(--success-color); +} + +[data-theme="dark"] .alert-danger { + background-color: var(--error-bg); + border-color: var(--error-color); + color: var(--error-color); +} + +[data-theme="dark"] .alert-warning { + background-color: var(--warning-bg); + border-color: var(--warning-color); + color: var(--warning-color); +} + +[data-theme="dark"] .alert-info { + background-color: var(--info-bg); + border-color: var(--info-color); + color: var(--info-color); +} + +/* Scrollbars */ +[data-theme="dark"] ::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +[data-theme="dark"] ::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 6px; +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); +} + +/* Mobile header */ +[data-theme="dark"] .mobile-header { + background: linear-gradient(135deg, + rgba(122, 141, 245, 0.12) 0%, + rgba(139, 91, 201, 0.12) 50%, + rgba(122, 141, 245, 0.08) 100%) !important; + border-bottom: 1px solid rgba(122, 141, 245, 0.25); + box-shadow: + 0 2px 15px rgba(122, 141, 245, 0.2), + inset 0 -1px 0 rgba(122, 141, 245, 0.2); + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .mobile-header::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + rgba(122, 141, 245, 0.6) 50%, + transparent 100%); + animation: shimmer 3s ease-in-out infinite; +} + +[data-theme="dark"] .mobile-nav-toggle span { + background-color: var(--primary-color) !important; +} + +/* Footer */ +[data-theme="dark"] footer { + background-color: var(--bg-secondary); + color: var(--text-secondary); + border-top: 1px solid var(--border-primary); +} + +/* Links */ +[data-theme="dark"] a { + color: var(--primary-color); +} + +[data-theme="dark"] a:hover { + color: var(--primary-hover); +} + +/* Code blocks */ +[data-theme="dark"] pre, +[data-theme="dark"] code { + background-color: var(--bg-tertiary); + color: var(--text-primary); + border: 1px solid var(--border-primary); +} + +/* Pagination */ +[data-theme="dark"] .pagination .page-link { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .pagination .page-link:hover { + background-color: var(--bg-hover); + border-color: var(--border-hover); +} + +[data-theme="dark"] .pagination .page-item.active .page-link { + background-color: var(--primary-color); + border-color: var(--primary-color); + color: white; +} + +/* Progress bars */ +[data-theme="dark"] .progress { + background-color: var(--bg-tertiary); +} + +/* Tooltips */ +[data-theme="dark"] .tooltip-inner { + background-color: var(--bg-tertiary); + color: var(--text-primary); +} + +/* User dropdown */ +[data-theme="dark"] .user-dropdown-modal { + background-color: var(--dropdown-bg) !important; + border: 1px solid var(--border-primary); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; +} + +[data-theme="dark"] .user-dropdown-header { + background-color: var(--bg-secondary) !important; + color: var(--text-primary) !important; + border-bottom: 1px solid var(--border-primary) !important; +} + +[data-theme="dark"] .user-dropdown-header h3 { + color: var(--text-heading) !important; +} + +[data-theme="dark"] .user-dropdown-header .user-info { + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .user-dropdown-menu a { + color: var(--text-primary); +} + +[data-theme="dark"] .user-dropdown-menu a:hover { + background-color: var(--dropdown-hover); + color: var(--text-heading); +} + +[data-theme="dark"] .user-dropdown-divider { + border-top: 1px solid var(--border-primary); +} + +/* Override mobile-specific white background */ +@media (max-width: 1024px) { + [data-theme="dark"] .sidebar.active .user-dropdown-modal.active, + [data-theme="dark"] .sidebar.mobile-open .user-dropdown-modal.active { + background: var(--dropdown-bg) !important; + } +} + +/* Theme toggle button */ +.theme-toggle { + position: fixed; + bottom: 20px; + right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: var(--bg-secondary, #f3f4f6); + border: 2px solid var(--border-primary, #e5e7eb); + color: var(--text-primary, #1f2937); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + z-index: 1000; + box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1)); +} + +/* Light mode theme toggle */ +[data-theme="light"] .theme-toggle, +:root:not([data-theme]) .theme-toggle { + background-color: #ffffff; + border: 2px solid #e5e7eb; + color: #1f2937; + box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); +} + +[data-theme="light"] .theme-toggle:hover, +:root:not([data-theme]) .theme-toggle:hover { + background-color: #f3f4f6; + border-color: #d1d5db; +} + +.theme-toggle:hover { + transform: scale(1.1); + box-shadow: var(--shadow-xl); +} + +.theme-toggle i { + font-size: 1.25rem; +} + +/* Smooth transitions */ +* { + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; +} + +/* Enhanced title and heading styles */ +[data-theme="dark"] .modal-title, +[data-theme="dark"] .section-title, +[data-theme="dark"] .widget-title, +[data-theme="dark"] .panel-title, +[data-theme="dark"] .form-title { + color: var(--text-heading); +} + +[data-theme="dark"] .page-title { + color: var(--text-heading); + font-weight: 600; +} + +[data-theme="dark"] .card-title { + color: var(--text-title); +} + +[data-theme="dark"] .list-group-item-heading { + color: var(--text-title); +} + +/* Bottom navigation with better contrast */ +[data-theme="dark"] .nav-item a { + color: var(--text-secondary); + transition: color 0.2s ease; +} + +[data-theme="dark"] .nav-item.active a, +[data-theme="dark"] .nav-item a:hover { + color: var(--primary-color); +} + +/* Specific component overrides */ +[data-theme="dark"] .timer-card { + background-color: var(--bg-card); +} + +[data-theme="dark"] .stat-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .feature-icon { + background: var(--header-bg); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +[data-theme="dark"] .section-title::after { + background: var(--header-bg); +} + +/* Charts (if using Chart.js) */ +[data-theme="dark"] .chart-container { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +/* Calendar styling */ +[data-theme="dark"] .calendar-day { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .calendar-day:hover { + background-color: var(--bg-hover); +} + +[data-theme="dark"] .calendar-day.active { + background-color: var(--primary-color); + color: white; +} + +/* Email nag banner */ +[data-theme="dark"] .email-nag-banner { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +/* Bottom navigation */ +[data-theme="dark"] .mobile-bottom-nav { + background-color: var(--bg-secondary); + border-top: 1px solid var(--border-primary); +} + +/* Adjust theme toggle position when bottom nav is present */ +@media (max-width: 768px) { + .has-bottom-nav .theme-toggle { + bottom: 80px; + } +} + +[data-theme="dark"] .nav-item a { + color: var(--text-secondary); +} + +[data-theme="dark"] .nav-item.active a { + color: var(--primary-color); +} + +/* Announcement styles */ +[data-theme="dark"] .announcement { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .announcement-priority-high { + border-left: 4px solid var(--error-color); +} + +[data-theme="dark"] .announcement-priority-medium { + border-left: 4px solid var(--warning-color); +} + +[data-theme="dark"] .announcement-priority-low { + border-left: 4px solid var(--info-color); +} + +/* Task cards */ +[data-theme="dark"] .task-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .subtask-item { + background-color: var(--bg-secondary); + border: 1px solid var(--border-secondary); +} + +/* Invoice specific */ +[data-theme="dark"] .invoice-header { + background-color: var(--bg-secondary); + border-bottom: 2px solid var(--border-primary); +} + +[data-theme="dark"] .invoice-status { + background-color: var(--bg-tertiary); + border: 1px solid var(--border-primary); +} + +/* Sprint board and Task columns */ +[data-theme="dark"] .sprint-column, +[data-theme="dark"] .task-column { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .sprint-task, +[data-theme="dark"] .task-card { + background-color: var(--bg-card); + border: 1px solid var(--border-secondary); +} + +[data-theme="dark"] .column-header { + background-color: var(--bg-tertiary); + color: var(--text-heading) !important; + border-bottom: 1px solid var(--border-primary); +} + +[data-theme="dark"] .column-header h1, +[data-theme="dark"] .column-header h2, +[data-theme="dark"] .column-header h3, +[data-theme="dark"] .column-header h4, +[data-theme="dark"] .column-header h5, +[data-theme="dark"] .column-header h6, +[data-theme="dark"] .column-header .column-title, +[data-theme="dark"] .column-header span, +[data-theme="dark"] .column-header p { + color: var(--text-heading) !important; +} + +[data-theme="dark"] .column-content { + background-color: var(--bg-secondary); +} + +[data-theme="dark"] .task-board { + background-color: var(--bg-primary); +} + +/* Note editor */ +[data-theme="dark"] .note-editor { + background-color: var(--bg-card); + color: var(--text-primary); +} + +[data-theme="dark"] .ace_editor { + background-color: var(--bg-tertiary) !important; + color: var(--text-primary) !important; +} + +/* Notes sidebar and cards */ +[data-theme="dark"] .notes-sidebar { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .note-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .note-card:hover { + box-shadow: 0 8px 24px rgba(0,0,0,0.3); + background-color: var(--bg-hover); +} + +[data-theme="dark"] .note-card.pinned { + border-color: var(--warning-color); +} + +[data-theme="dark"] .note-card.drag-over { + border: 2px dashed var(--primary-color); +} + +[data-theme="dark"] .note-card-header { + border-bottom: 1px solid var(--border-secondary); +} + +[data-theme="dark"] .linked-notes-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .note-meta { + color: var(--text-secondary); +} + +[data-theme="dark"] .note-tags .tag { + background-color: var(--bg-tertiary); + color: var(--text-secondary); + border: 1px solid var(--border-secondary); +} + +[data-theme="dark"] .note-excerpt { + color: var(--text-secondary); +} + +/* Time tracking specific */ +[data-theme="dark"] .timer-display { + color: var(--primary-color); +} + +[data-theme="dark"] .active-timer { + background-color: var(--bg-card); + border: 2px solid var(--success-color); +} + +/* Export options */ +[data-theme="dark"] .export-option { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .export-option:hover { + background-color: var(--bg-hover); + border-color: var(--primary-color); +} + +/* Team summary */ +[data-theme="dark"] .team-member-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .hours-badge { + background-color: var(--bg-tertiary); + color: var(--text-primary); +} + +/* Analytics charts */ +[data-theme="dark"] .chart-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +/* Project categories */ +[data-theme="dark"] .category-badge { + filter: brightness(0.8); +} + +/* Project cards */ +[data-theme="dark"] .project-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .project-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); + background-color: var(--bg-hover); +} + +[data-theme="dark"] .project-card.inactive { + opacity: 0.6; +} + +[data-theme="dark"] .project-header { + background-color: var(--bg-secondary) !important; + border-bottom: 1px solid var(--border-secondary); +} + +/* Override inline gradient styles on project headers */ +[data-theme="dark"] .project-header[style*="background: linear-gradient"] { + background: var(--bg-secondary) !important; + position: relative; +} + +[data-theme="dark"] .project-header[style*="background: linear-gradient"]::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(122, 141, 245, 0.1) 0%, rgba(122, 141, 245, 0.05) 100%); + pointer-events: none; + border-radius: inherit; +} + +[data-theme="dark"] .project-meta { + color: var(--text-secondary); +} + +[data-theme="dark"] .project-description { + color: var(--text-secondary); +} + +[data-theme="dark"] .project-stats { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .project-actions { + background-color: var(--bg-secondary); + border-top: 1px solid var(--border-secondary); + padding: 1rem; +} + +[data-theme="dark"] .project-actions .btn { + background-color: var(--bg-tertiary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .project-actions .btn:hover { + background-color: var(--bg-hover); + border-color: var(--primary-color); + color: var(--primary-color); +} + +[data-theme="dark"] .project-info { + background-color: var(--bg-secondary); + color: var(--text-primary); +} + +[data-theme="dark"] .project-info .info-item { + color: var(--text-secondary); +} + +[data-theme="dark"] .project-info .info-icon { + color: var(--text-tertiary); +} + +/* Billing badges */ +[data-theme="dark"] .billing-badge { + opacity: 0.9; +} + +/* Admin panels */ +[data-theme="dark"] .admin-panel { + background-color: transparent; +} + +[data-theme="dark"] .admin-stat { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +/* Filter panels */ +[data-theme="dark"] .filter-panel { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +/* Tab navigation */ +[data-theme="dark"] .tab-btn { + background-color: var(--bg-secondary); + color: var(--text-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .tab-btn:hover { + background-color: var(--bg-hover); + color: var(--text-primary); +} + +[data-theme="dark"] .tab-btn.active { + background-color: var(--primary-color); + color: white; + border-color: var(--primary-color); +} + +/* Loading states */ +[data-theme="dark"] .loading-spinner { + border-color: var(--border-primary); + border-top-color: var(--primary-color); +} + +/* Empty states */ +[data-theme="dark"] .empty-state { + background-color: var(--bg-card); + color: var(--text-secondary); + border: 2px dashed var(--border-primary); +} + +[data-theme="dark"] .empty-state h3 { + color: var(--text-title); +} + +[data-theme="dark"] .empty-state p { + color: var(--text-secondary); +} + +[data-theme="dark"] .empty-state-icon, +[data-theme="dark"] .empty-icon { + color: var(--text-tertiary); +} + +/* Search inputs */ +[data-theme="dark"] .search-box { + background-color: var(--bg-input); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .search-box input { + background-color: var(--bg-input); + color: var(--text-primary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .search-box input:focus { + background-color: var(--bg-input); + border-color: var(--primary-color); + color: var(--text-primary); + box-shadow: 0 0 0 2px rgba(122, 141, 245, 0.2); +} + +[data-theme="dark"] .search-container { + background-color: var(--bg-input); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .search-container .search-input { + background-color: var(--bg-input); + color: var(--text-primary); +} + +[data-theme="dark"] .search-container .search-icon { + color: var(--text-tertiary); +} + +[data-theme="dark"] .search-input { + background-color: var(--bg-input); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .search-input:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(122, 141, 245, 0.2); +} + +/* File upload areas */ +[data-theme="dark"] .upload-area { + background-color: var(--bg-secondary); + border: 2px dashed var(--border-primary); +} + +[data-theme="dark"] .upload-area:hover { + border-color: var(--primary-color); + background-color: var(--bg-hover); +} + +/* Status indicators */ +[data-theme="dark"] .status-indicator { + filter: brightness(1.2); +} + +/* Breadcrumbs */ +[data-theme="dark"] .breadcrumb { + background-color: var(--bg-secondary); +} + +[data-theme="dark"] .breadcrumb-item a { + color: var(--text-secondary); +} + +[data-theme="dark"] .breadcrumb-item.active { + color: var(--text-primary); +} + +/* Settings panels and containers */ +[data-theme="dark"] .settings-section, +[data-theme="dark"] .settings-container, +[data-theme="dark"] .settings-panel { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .settings-header { + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary); +} + +[data-theme="dark"] .settings-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .settings-group { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .settings-item { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .settings-item:hover { + background-color: var(--bg-hover); +} + +[data-theme="dark"] .settings-label { + color: var(--text-secondary); +} + +[data-theme="dark"] .settings-title { + color: var(--text-heading); +} + +/* Help text */ +[data-theme="dark"] .help-text, +[data-theme="dark"] .form-text { + color: var(--text-tertiary); +} + +/* Info panels */ +[data-theme="dark"] .info-panel { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .info-item { + color: var(--text-secondary); +} + +[data-theme="dark"] .info-box { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +/* Invitations */ +[data-theme="dark"] .invitation-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .invitation-card.pending { + border-left: 4px solid var(--warning-color); +} + +[data-theme="dark"] .invitation-card.accepted { + border-left: 4px solid var(--success-color); +} + +[data-theme="dark"] .invitation-card.expired { + border-left: 4px solid var(--error-color); +} + +[data-theme="dark"] .invitation-card:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + background-color: var(--bg-hover); +} + +[data-theme="dark"] .invitation-header { + border-bottom: 1px solid var(--border-secondary); +} + +[data-theme="dark"] .invitation-details { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .invitation-meta { + color: var(--text-secondary); +} + +[data-theme="dark"] .invitation-actions { + border-top: 1px solid var(--border-secondary); +} + +/* Focus states */ +[data-theme="dark"] *:focus { + outline-color: var(--primary-color); +} + +/* Selection */ +[data-theme="dark"] ::selection { + background-color: var(--primary-color); + color: white; +} + +[data-theme="dark"] ::-moz-selection { + background-color: var(--primary-color); + color: white; +} + +/* Action items */ +[data-theme="dark"] .action-item { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .action-item:hover { + background-color: var(--bg-hover); + border-color: var(--primary-color); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); +} + +[data-theme="dark"] .action-icon { + background-color: var(--bg-secondary); + color: var(--primary-color); +} + +[data-theme="dark"] .action-content h3 { + color: var(--text-primary); +} + +[data-theme="dark"] .action-content p { + color: var(--text-secondary); +} + +/* Company items */ +[data-theme="dark"] .company-item { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .company-item:hover { + background-color: var(--bg-hover); +} + +[data-theme="dark"] .company-info h4 { + color: var(--text-primary); +} + +[data-theme="dark"] .company-stats, +[data-theme="dark"] .company-meta { + color: var(--text-secondary); +} + +/* Override inline styles that set white backgrounds */ +[data-theme="dark"] [style*="background: white"], +[data-theme="dark"] [style*="background:white"], +[data-theme="dark"] [style*="background-color: white"], +[data-theme="dark"] [style*="background-color:white"], +[data-theme="dark"] [style*="background: #fff"], +[data-theme="dark"] [style*="background:#fff"], +[data-theme="dark"] [style*="background-color: #fff"], +[data-theme="dark"] [style*="background-color:#fff"], +[data-theme="dark"] [style*="background: #ffffff"], +[data-theme="dark"] [style*="background:#ffffff"], +[data-theme="dark"] [style*="background-color: #ffffff"], +[data-theme="dark"] [style*="background-color:#ffffff"], +[data-theme="dark"] [style*="background: rgb(255, 255, 255)"], +[data-theme="dark"] [style*="background:rgb(255, 255, 255)"], +[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"], +[data-theme="dark"] [style*="background-color:rgb(255, 255, 255)"] { + background-color: var(--bg-card) !important; +} + +/* Override inline styles for info panels and settings */ +[data-theme="dark"] [style*="background: #f3f4f6"], +[data-theme="dark"] [style*="background:#f3f4f6"], +[data-theme="dark"] [style*="background-color: #f3f4f6"], +[data-theme="dark"] [style*="background-color:#f3f4f6"] { + background-color: var(--bg-secondary) !important; +} + +/* Override inline white borders */ +[data-theme="dark"] [style*="border-color: white"], +[data-theme="dark"] [style*="border-color:white"], +[data-theme="dark"] [style*="border-color: #fff"], +[data-theme="dark"] [style*="border-color:#fff"], +[data-theme="dark"] [style*="border-color: #ffffff"], +[data-theme="dark"] [style*="border-color:#ffffff"], +[data-theme="dark"] [style*="border: 1px solid white"], +[data-theme="dark"] [style*="border:1px solid white"], +[data-theme="dark"] [style*="border: 1px solid #fff"], +[data-theme="dark"] [style*="border:1px solid #fff"] { + border-color: var(--border-primary) !important; +} + +/* Fix light box-shadows that appear as white borders in dark mode */ +[data-theme="dark"] .filter-panel, +[data-theme="dark"] .card, +[data-theme="dark"] .panel, +[data-theme="dark"] .modal-content, +[data-theme="dark"] .dropdown-menu { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; +} + +[data-theme="dark"] .table, +[data-theme="dark"] table { + box-shadow: none !important; +} + +/* Specific overrides for components that might have inline styles */ +[data-theme="dark"] .form-card, +[data-theme="dark"] .content-card, +[data-theme="dark"] .detail-card { + background-color: var(--bg-card) !important; + border: 1px solid var(--border-primary) !important; + color: var(--text-primary) !important; +} + +/* System Settings and Company Admin Styles */ +[data-theme="dark"] .company-admin-container, +[data-theme="dark"] .system-admin-container, +[data-theme="dark"] .admin-container { + background-color: transparent; +} + +[data-theme="dark"] .admin-section, +[data-theme="dark"] .system-section, +[data-theme="dark"] .company-section { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + margin-bottom: 2rem; + border-radius: 12px; +} + +[data-theme="dark"] .config-section, +[data-theme="dark"] .config-card, +[data-theme="dark"] .config-panel { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .config-header { + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary); + color: var(--text-heading); +} + +[data-theme="dark"] .system-info-card, +[data-theme="dark"] .company-info-card { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .stats-section { + background-color: transparent; +} + +[data-theme="dark"] .stat-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .stat-card:hover { + background-color: var(--bg-hover); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); +} + +[data-theme="dark"] .stat-value { + color: var(--primary-color); +} + +[data-theme="dark"] .stat-label { + color: var(--text-secondary); +} + + +/* Content grid styles */ +[data-theme="dark"] .content-grid { + background-color: transparent; +} + +[data-theme="dark"] .content-card, +[data-theme="dark"] .info-card, +[data-theme="dark"] .feature-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .content-card:hover, +[data-theme="dark"] .info-card:hover, +[data-theme="dark"] .feature-card:hover { + background-color: var(--bg-hover); + border-color: var(--primary-color); +} + +/* System health indicators */ +[data-theme="dark"] .health-indicator { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .health-good { + color: var(--success-color); +} + +[data-theme="dark"] .health-warning { + color: var(--warning-color); +} + +[data-theme="dark"] .health-error { + color: var(--error-color); +} + +/* Tax configuration styles */ +[data-theme="dark"] .tax-config-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .tax-config-header { + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary); + color: var(--text-heading); +} + +/* Billing configuration */ +[data-theme="dark"] .billing-section, +[data-theme="dark"] .billing-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .billing-rate { + color: var(--text-primary); +} + +[data-theme="dark"] .currency-symbol { + color: var(--text-secondary); +} + +/* Timer Section */ +[data-theme="dark"] .timer-section { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .timer-section .card { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +/* Settings Groups - Fixed typo from setting-group */ +[data-theme="dark"] .setting-group, +[data-theme="dark"] .settings-group { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + padding: 1.5rem; + margin-bottom: 1.5rem; + border-radius: 8px; +} + +[data-theme="dark"] .setting-group h3, +[data-theme="dark"] .settings-group h3 { + color: var(--text-heading); + margin-bottom: 1rem; +} + +[data-theme="dark"] .setting-group .form-group, +[data-theme="dark"] .settings-group .form-group { + background-color: transparent; +} + +/* Action Cards */ +[data-theme="dark"] .action-card { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); + transition: all 0.3s ease; +} + +[data-theme="dark"] .action-card:hover { + background-color: var(--bg-hover); + border-color: var(--primary-color); + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(122, 141, 245, 0.2); +} + +[data-theme="dark"] .action-card .action-header { + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary); + padding: 1rem; +} + +[data-theme="dark"] .action-card .action-body { + padding: 1rem; +} + +[data-theme="dark"] .action-card h4, +[data-theme="dark"] .action-card h5 { + color: var(--text-heading); +} + +/* Danger Zone */ +[data-theme="dark"] .danger-zone { + background-color: rgba(239, 68, 68, 0.1); + border: 2px solid var(--error-color); + color: var(--text-primary); + padding: 2rem; + border-radius: 12px; + margin-top: 2rem; +} + +[data-theme="dark"] .danger-zone h3, +[data-theme="dark"] .danger-zone h4 { + color: var(--error-color); +} + +[data-theme="dark"] .danger-zone p { + color: var(--text-secondary); +} + +[data-theme="dark"] .danger-zone .btn-danger { + background-color: var(--error-color); + border-color: var(--error-color); + color: white; +} + +[data-theme="dark"] .danger-zone .btn-danger:hover { + background-color: #dc2626; + border-color: #dc2626; +} + +/* Additional settings-related elements */ +[data-theme="dark"] .settings-content { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + padding: 2rem; + border-radius: 8px; +} + +[data-theme="dark"] .settings-row { + background-color: var(--bg-secondary); + padding: 1rem; + margin-bottom: 0.5rem; + border-radius: 6px; + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .settings-row:hover { + background-color: var(--bg-hover); +} + +[data-theme="dark"] .config-item { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + padding: 1.5rem; + margin-bottom: 1rem; + border-radius: 8px; +} + +[data-theme="dark"] .config-value { + background-color: var(--bg-secondary); + padding: 0.5rem 1rem; + border-radius: 4px; + color: var(--text-primary); +} + +/* Activity Items - Fix dark font color */ +[data-theme="dark"] .activity-item { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .activity-item h4, +[data-theme="dark"] .activity-item h5, +[data-theme="dark"] .activity-item .activity-title { + color: var(--text-heading); +} + +[data-theme="dark"] .activity-item p, +[data-theme="dark"] .activity-item .activity-description, +[data-theme="dark"] .activity-item .activity-text { + color: var(--text-secondary); +} + +[data-theme="dark"] .activity-item .activity-meta, +[data-theme="dark"] .activity-item .activity-time, +[data-theme="dark"] .activity-item .activity-date { + color: var(--text-tertiary); +} + +/* Activity Value - Fix dark text */ +[data-theme="dark"] .activity-value { + color: var(--text-heading) !important; +} + +[data-theme="dark"] .activity-label { + color: var(--text-secondary) !important; +} + +/* Search Section - Fix white border */ +[data-theme="dark"] .search-section { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .search-box, +[data-theme="dark"] .search-container { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .search-input, +[data-theme="dark"] .search-field { + background-color: var(--bg-input); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .search-input:focus, +[data-theme="dark"] .search-field:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(122, 141, 245, 0.2); +} + +/* Table Headers - Fix white on white issue */ +[data-theme="dark"] .table thead th, +[data-theme="dark"] .data-table thead th, +[data-theme="dark"] table thead th { + background-color: var(--table-header-bg) !important; + color: var(--text-heading) !important; + border-color: var(--border-primary) !important; +} + +/* Specifically for admin tables */ +[data-theme="dark"] .admin-table thead, +[data-theme="dark"] .users-table thead, +[data-theme="dark"] .system-table thead { + background-color: var(--table-header-bg) !important; +} + +[data-theme="dark"] .admin-table th, +[data-theme="dark"] .users-table th, +[data-theme="dark"] .system-table th { + background-color: var(--table-header-bg) !important; + color: var(--text-heading) !important; + border-bottom: 2px solid var(--border-primary) !important; +} + + +/* Filter Panel and Filter Row */ +[data-theme="dark"] .filter-panel { + background: var(--bg-card) !important; + border: 1px solid var(--border-primary) !important; + color: var(--text-primary); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; +} + +[data-theme="dark"] .filter-row { + background-color: var(--bg-secondary) !important; + border: 1px solid var(--border-primary) !important; + padding: 1rem; + border-radius: 6px; +} + +[data-theme="dark"] .filter-header { + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary) !important; + color: var(--text-heading); +} + +[data-theme="dark"] .filter-body { + background-color: var(--bg-card); + border: none !important; +} + +[data-theme="dark"] .filter-group { + background-color: transparent !important; + border: none !important; + margin-bottom: 0; + padding: 0; +} + +[data-theme="dark"] .filter-label { + color: var(--text-secondary); +} + +[data-theme="dark"] .filter-option { + color: var(--text-primary); +} + +[data-theme="dark"] .filter-option:hover { + background-color: var(--bg-hover); +} + +/* Table Responsive - Custom mobile table wrapper */ +[data-theme="dark"] .table-responsive { + background-color: transparent; + border: none !important; + box-shadow: none !important; +} + +[data-theme="dark"] .table-responsive table { + background-color: var(--bg-card); + border: 1px solid var(--border-primary) !important; +} + +[data-theme="dark"] .table-responsive::-webkit-scrollbar { + height: 8px; +} + +[data-theme="dark"] .table-responsive::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} + +[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 4px; +} + +/* Override any inline white borders */ +[data-theme="dark"] .table-responsive[style*="border"] { + border-color: var(--border-primary) !important; +} + +/* Entries Table - Override hardcoded colors from time-tracking.css */ +[data-theme="dark"] .entries-table { + background-color: var(--bg-card) !important; + border: 1px solid var(--border-primary) !important; + box-shadow: none !important; +} + +[data-theme="dark"] .entries-table th { + background-color: var(--table-header-bg) !important; + color: var(--text-heading) !important; + border-bottom: 2px solid var(--border-primary) !important; + border-left: none !important; + border-right: none !important; + border-top: none !important; +} + +[data-theme="dark"] .entries-table td { + border-bottom: 1px solid var(--border-secondary) !important; + border-left: none !important; + border-right: none !important; + border-top: none !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .entries-table tbody tr:hover { + background-color: var(--table-row-hover) !important; +} + +[data-theme="dark"] .entries-table-container { + background-color: transparent !important; + border: none !important; + box-shadow: none !important; + outline: none !important; +} + +/* Stat Card - Fix positioning and colors */ +[data-theme="dark"] .stat-card { + position: relative !important; /* Required for absolute positioned stat-link */ + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .stat-card span { + color: var(--text-primary) !important; +} + +[data-theme="dark"] .stat-card .stat-value { + color: var(--primary-color); +} + +[data-theme="dark"] .stat-card .stat-label { + color: var(--text-secondary); +} + +[data-theme="dark"] .stat-card .stat-icon { + color: var(--primary-color); + opacity: 0.8; +} + +[data-theme="dark"] .stat-card .stat-subtitle, +[data-theme="dark"] .stat-card .stat-description { + color: var(--text-secondary); +} + +/* Fix stat-link positioning */ +[data-theme="dark"] .stat-link { + position: absolute !important; + bottom: 0.75rem !important; + right: 1rem !important; + left: auto !important; + color: var(--primary-color) !important; + font-size: 0.875rem; + opacity: 0.8; + z-index: 1; +} + +[data-theme="dark"] .stat-link:hover { + color: var(--primary-hover) !important; + opacity: 1; +} + +/* View Content and Headers */ +[data-theme="dark"] .view-content { + background-color: transparent; + color: var(--text-primary); +} + +[data-theme="dark"] .view-header { + border-bottom: 1px solid var(--border-primary) !important; +} + +[data-theme="dark"] .view-header h3 { + color: var(--text-heading) !important; +} + +[data-theme="dark"] .export-buttons .btn { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .export-buttons .btn:hover { + background-color: var(--bg-hover); + border-color: var(--border-hover); +} + +/* Table Container */ +[data-theme="dark"] .table-container { + background: var(--bg-card) !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; + border: 1px solid var(--border-primary); +} + +/* Time History Table */ +[data-theme="dark"] .time-history { + background-color: var(--bg-card); + box-shadow: none !important; +} + +[data-theme="dark"] .time-history th, +[data-theme="dark"] .time-history td { + border-bottom: 1px solid var(--border-secondary) !important; + color: var(--text-primary); +} + +[data-theme="dark"] .time-history th { + background-color: var(--table-header-bg) !important; + color: var(--text-heading) !important; +} + +[data-theme="dark"] .time-history tr:hover { + background-color: var(--table-row-hover) !important; +} + +[data-theme="dark"] .time-history .text-center { + color: var(--text-secondary); +} + +/* Content Section */ +[data-theme="dark"] .content-section { + background-color: transparent; + color: var(--text-primary); +} + +/* Company Cell */ +[data-theme="dark"] .company-cell { + color: var(--text-primary); +} + +[data-theme="dark"] .company-name { + color: var(--text-heading); + font-weight: 500; +} + +[data-theme="dark"] .company-slug { + color: var(--text-secondary); + font-size: 0.875rem; +} + +/* Badge Overrides - Fix light backgrounds */ +[data-theme="dark"] .badge-freelancer { + background-color: rgba(139, 92, 201, 0.2) !important; + color: #c4b5fd !important; + border: 1px solid rgba(139, 92, 201, 0.3); +} + +[data-theme="dark"] .badge-company { + background-color: rgba(122, 141, 245, 0.2) !important; + color: #a8b9ff !important; + border: 1px solid rgba(122, 141, 245, 0.3); +} + +/* Stat Cell in Tables */ +[data-theme="dark"] .stat-cell { + color: var(--text-primary); +} + +[data-theme="dark"] .stat-cell .stat-number { + color: var(--text-heading); + font-weight: 600; +} + +[data-theme="dark"] .stat-cell .stat-label { + color: var(--text-secondary); + font-size: 0.875rem; +} + +/* Status Badge Overrides - Fix light backgrounds */ +[data-theme="dark"] .status-badge { + border: 1px solid transparent; +} + +[data-theme="dark"] .status-active, +[data-theme="dark"] .status-badge.status-active { + background-color: var(--success-bg) !important; + color: var(--success-color) !important; + border-color: var(--success-color) !important; +} + +[data-theme="dark"] .status-inactive, +[data-theme="dark"] .status-badge.status-inactive { + background-color: rgba(239, 68, 68, 0.1) !important; + color: #f87171 !important; + border-color: #f87171 !important; +} + +[data-theme="dark"] .status-badge.PLANNING { + background-color: var(--warning-bg) !important; + color: var(--warning-color) !important; + border-color: var(--warning-color) !important; +} + +[data-theme="dark"] .status-badge.ACTIVE, +[data-theme="dark"] .status-badge.IN_PROGRESS { + background-color: var(--info-bg) !important; + color: var(--info-color) !important; + border-color: var(--info-color) !important; +} + +[data-theme="dark"] .status-badge.COMPLETED { + background-color: var(--success-bg) !important; + color: var(--success-color) !important; + border-color: var(--success-color) !important; +} + +[data-theme="dark"] .status-badge.CANCELLED { + background-color: var(--error-bg) !important; + color: var(--error-color) !important; + border-color: var(--error-color) !important; +} + +[data-theme="dark"] .status-badge.NOT_STARTED, +[data-theme="dark"] .status-badge.ON_HOLD { + background-color: rgba(156, 163, 175, 0.1) !important; + color: #d1d5db !important; + border-color: #9ca3af !important; +} + +/* Date Text */ +[data-theme="dark"] .date-text { + color: var(--text-secondary); +} + +/* Table Actions */ +[data-theme="dark"] .table-actions { + display: flex; + gap: 0.5rem; +} + +[data-theme="dark"] .table-actions .btn-icon { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .table-actions .btn-icon:hover { + background-color: var(--bg-hover); + border-color: var(--primary-color); + color: var(--primary-color); +} + +/* Inactive Row */ +[data-theme="dark"] .inactive-row { + opacity: 0.6; +} + +[data-theme="dark"] .inactive-row:hover { + opacity: 0.8; +} + +/* Override data-table specific light backgrounds */ +[data-theme="dark"] .data-table { + box-shadow: none !important; +} + +[data-theme="dark"] .data-table th { + background-color: var(--table-header-bg) !important; + border-bottom: 2px solid var(--border-primary) !important; +} + +[data-theme="dark"] .data-table td { + border-bottom: 1px solid var(--border-secondary) !important; +} + +/* Email Preview */ +[data-theme="dark"] .email-preview { + background-color: var(--bg-card); + border: 1px solid var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .email-preview-header { + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--border-primary); + color: var(--text-heading); +} + +[data-theme="dark"] .email-preview-body { + background-color: var(--bg-card); + color: var(--text-primary); +} + +[data-theme="dark"] .email-subject { + color: var(--text-heading); +} + +[data-theme="dark"] .email-from, +[data-theme="dark"] .email-to, +[data-theme="dark"] .email-meta { + color: var(--text-secondary); +} + +[data-theme="dark"] .email-content { + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + padding: 1.5rem; + border-radius: 6px; + color: var(--text-primary); +} + +[data-theme="dark"] .email-preview pre, +[data-theme="dark"] .email-preview code { + background-color: var(--bg-tertiary); + color: var(--text-primary); + border: 1px solid var(--border-primary); +} + +/* MOBILE BOTTOM NAVIGATION */ +@media (max-width: 768px) { + [data-theme="dark"] .mobile-bottom-nav { + background: var(--bg-secondary); + border-top: 1px solid var(--border-primary); + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); + } + + [data-theme="dark"] .bottom-nav-item { + color: var(--text-secondary); + } + + [data-theme="dark"] .bottom-nav-item i { + color: var(--text-secondary); + } + + [data-theme="dark"] .bottom-nav-item span { + color: var(--text-secondary); + } + + [data-theme="dark"] .bottom-nav-item.active { + color: var(--primary-color); + } + + [data-theme="dark"] .bottom-nav-item.active i { + color: var(--primary-color); + } + + [data-theme="dark"] .bottom-nav-item.active span { + color: var(--primary-color); + } + + /* Touch feedback in dark mode */ + [data-theme="dark"] .bottom-nav-item:active { + opacity: 0.6; + } + + /* FAB button in dark mode */ + [data-theme="dark"] .bottom-nav-item.nav-fab .fab-button { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-end) 100%); + box-shadow: 0 4px 12px rgba(122, 141, 245, 0.3); + } + + [data-theme="dark"] .bottom-nav-item.nav-fab .fab-button i { + color: white; + } + + /* Notification badge in dark mode */ + [data-theme="dark"] .nav-badge { + background: var(--error-color); + color: white; + } +} + +/* SPLASH PAGE MOBILE DARK MODE */ +@media (max-width: 768px) { + /* Hero section mobile adjustments */ + [data-theme="dark"] .splash-hero::before { + background-image: + radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08) 0%, transparent 40%); + } + + /* Mobile CTA buttons */ + [data-theme="dark"] .cta-buttons .btn-primary { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-end) 100%); + box-shadow: 0 4px 12px rgba(122, 141, 245, 0.3); + } + + [data-theme="dark"] .cta-buttons .btn-primary:hover { + box-shadow: 0 2px 8px rgba(122, 141, 245, 0.2); + } + + [data-theme="dark"] .cta-buttons .btn-secondary { + background: rgba(255, 255, 255, 0.1); + border: 2px solid rgba(255, 255, 255, 0.6); + color: white; + } + + [data-theme="dark"] .cta-buttons .btn-secondary:hover { + background: rgba(255, 255, 255, 0.15); + } + + /* Mobile feature cards */ + [data-theme="dark"] .feature-card { + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + } + + /* Mobile testimonial cards */ + [data-theme="dark"] .testimonial-card { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + } + + /* Mobile pricing cards */ + [data-theme="dark"] .pricing-card { + box-shadow: 0 5px 20px rgba(0,0,0,0.3); + } + + /* Mobile pricing buttons */ + [data-theme="dark"] .btn-pricing { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-end) 100%); + } + + /* Mobile statistics section */ + [data-theme="dark"] .statistics { + background: linear-gradient(135deg, #2a3142 0%, #3a3e4a 100%); + } + + /* Mobile final CTA */ + [data-theme="dark"] .final-cta { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-end) 100%); + } + + /* Focus states for mobile */ + [data-theme="dark"] .splash-container *:focus { + outline: 3px solid var(--primary-color); + } + + /* Mobile secondary button focus */ + [data-theme="dark"] .cta-buttons .btn-secondary:active { + border: 2px solid white; + } + + [data-theme="dark"] .cta-buttons .btn-secondary:focus { + background: rgba(255, 255, 255, 0.9); + color: var(--primary-color); + border: 2px solid var(--primary-color); + } +} + +/* TASK MODAL DARK MODE STYLES */ +/* Override inline styles with higher specificity */ +[data-theme="dark"] .task-modal .modal-content { + background-color: var(--bg-modal) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .task-modal-content { + background-color: var(--bg-modal) !important; + color: var(--text-primary) !important; +} + +/* Form sections */ +[data-theme="dark"] .task-modal .form-section, +[data-theme="dark"] .form-section { + border-bottom-color: var(--border-primary) !important; +} + +[data-theme="dark"] .form-section h3 { + color: var(--text-heading) !important; + border-bottom-color: var(--border-secondary) !important; +} + +/* Dependencies section */ +[data-theme="dark"] .task-modal .dependency-column, +[data-theme="dark"] .dependency-column { + background: var(--bg-secondary) !important; + border: 1px solid var(--border-primary) !important; +} + +[data-theme="dark"] .dependency-column h4 { + color: var(--text-heading) !important; +} + +[data-theme="dark"] .dependency-help { + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .task-modal .dependency-item, +[data-theme="dark"] .dependency-item { + background: var(--bg-card) !important; + border-color: var(--border-primary) !important; + box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; +} + +[data-theme="dark"] .dependency-task-number { + color: var(--primary-color) !important; + background: rgba(122, 141, 245, 0.15) !important; +} + +[data-theme="dark"] .dependency-task-title { + color: var(--text-primary) !important; +} + +[data-theme="dark"] .task-modal .dependency-input, +[data-theme="dark"] .dependency-input { + background: var(--bg-input) !important; + border-color: var(--border-primary) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .dependency-input:focus { + border-color: var(--primary-color) !important; + box-shadow: 0 0 0 2px rgba(122, 141, 245, 0.1) !important; +} + +[data-theme="dark"] .dependency-input::placeholder { + color: var(--text-muted) !important; +} + +/* Subtasks */ +[data-theme="dark"] .task-modal .subtask-item, +[data-theme="dark"] .subtask-item { + background: var(--bg-secondary) !important; + border: 1px solid var(--border-primary) !important; +} + +[data-theme="dark"] .subtask-item input[type="text"] { + background: var(--bg-input) !important; + border-color: var(--border-primary) !important; + color: var(--text-primary) !important; +} + +/* Date inputs */ +[data-theme="dark"] .task-modal .date-input-formatted, +[data-theme="dark"] .date-input-formatted { + background: var(--bg-input) !important; + border-color: var(--border-primary) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .task-modal .calendar-picker-btn, +[data-theme="dark"] .calendar-picker-btn { + background: var(--bg-tertiary) !important; + border-color: var(--border-primary) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .calendar-picker-btn:hover { + background: var(--bg-hover) !important; +} + +/* Comments section */ +[data-theme="dark"] .task-modal .comment-item, +[data-theme="dark"] .comment-item { + background: var(--bg-secondary) !important; + border-color: var(--border-primary) !important; +} + +[data-theme="dark"] .comment-author { + color: var(--text-heading) !important; +} + +[data-theme="dark"] .comment-time { + color: var(--text-tertiary) !important; +} + +[data-theme="dark"] .comment-visibility-badge { + background: var(--bg-tertiary) !important; + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .comment-visibility-badge.team { + background: rgba(251, 191, 36, 0.15) !important; + color: var(--warning-color) !important; +} + +[data-theme="dark"] .comment-content { + color: var(--text-primary) !important; +} + +[data-theme="dark"] .comment-action { + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .comment-action:hover { + background: var(--bg-hover) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .task-modal .comment-form, +[data-theme="dark"] .comment-form { + background: var(--bg-secondary) !important; + border-color: var(--border-primary) !important; +} + +[data-theme="dark"] .task-modal #new-comment, +[data-theme="dark"] #new-comment, +[data-theme="dark"] .comment-edit-textarea { + background: var(--bg-input) !important; + border-color: var(--border-primary) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .comment-visibility-select { + background: var(--bg-input) !important; + border-color: var(--border-primary) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .comment-reply { + background: var(--bg-card) !important; + border-color: var(--border-primary) !important; +} + +[data-theme="dark"] .no-comments { + color: var(--text-tertiary) !important; +} + +/* Form inputs in modal */ +[data-theme="dark"] .task-modal .form-group label, +[data-theme="dark"] .form-group label { + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .task-modal .form-group input, +[data-theme="dark"] .task-modal .form-group select, +[data-theme="dark"] .task-modal .form-group textarea, +[data-theme="dark"] .form-group input, +[data-theme="dark"] .form-group select, +[data-theme="dark"] .form-group textarea { + background: var(--bg-input) !important; + border-color: var(--border-primary) !important; + color: var(--text-primary) !important; +} + +[data-theme="dark"] .task-modal .form-group input:focus, +[data-theme="dark"] .task-modal .form-group select:focus, +[data-theme="dark"] .task-modal .form-group textarea:focus, +[data-theme="dark"] .form-group input:focus, +[data-theme="dark"] .form-group select:focus, +[data-theme="dark"] .form-group textarea:focus { + border-color: var(--primary-color) !important; + box-shadow: 0 0 0 0.1rem rgba(122, 141, 245, 0.25) !important; +} + +/* Modal overlay */ +[data-theme="dark"] .task-modal { + background-color: rgba(0, 0, 0, 0.8) !important; +} + +/* Select dropdowns - fix option colors */ +[data-theme="dark"] .task-modal option, +[data-theme="dark"] select option { + background-color: var(--bg-secondary) !important; + color: var(--text-primary) !important; +} + +/* Fix any remaining white text issues */ +[data-theme="dark"] .task-modal h3 i, +[data-theme="dark"] .task-modal h4 i { + color: var(--text-heading) !important; +} + +/* Modal footer */ +[data-theme="dark"] .task-modal .modal-footer { + background-color: var(--bg-modal) !important; + border-top-color: var(--border-primary) !important; +} + +/* Modal header */ +[data-theme="dark"] .task-modal .modal-header { + background-color: var(--bg-modal) !important; + border-bottom-color: var(--border-primary) !important; + color: var(--text-heading) !important; +} + +[data-theme="dark"] .task-modal .modal-header h2 { + color: var(--text-heading) !important; +} + +/* Close button */ +[data-theme="dark"] .task-modal .close { + color: var(--text-secondary) !important; +} + +[data-theme="dark"] .task-modal .close:hover { + color: var(--text-primary) !important; +} + +/* Sprint Management Dark Mode */ +[data-theme="dark"] .filter-section { + background: var(--bg-tertiary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .view-switcher { + background: var(--bg-secondary); +} + +[data-theme="dark"] .view-btn { + color: var(--text-secondary); +} + +[data-theme="dark"] .view-btn.active { + background: var(--primary-color); + color: white; +} + +[data-theme="dark"] .view-btn:hover:not(.active) { + background: var(--bg-hover); + color: var(--text-primary); +} + +/* Sprint Metrics */ +[data-theme="dark"] .metric { + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .metric-number { + color: var(--primary-color); +} + +[data-theme="dark"] .metric-label { + color: var(--text-secondary); +} + +/* Sprint Cards */ +[data-theme="dark"] .sprint-card { + background: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .sprint-header { + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .sprint-title { + color: var(--text-primary); +} + +[data-theme="dark"] .sprint-dates { + color: var(--text-secondary); +} + +[data-theme="dark"] .sprint-goal { + color: var(--text-secondary); +} + +/* Notes Tags Dark Mode */ +[data-theme="dark"] .tag-link { + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + color: var(--text-secondary); +} + +[data-theme="dark"] .tag-link:hover { + background: var(--bg-hover); + border-color: var(--border-hover); + color: var(--text-primary); +} + +[data-theme="dark"] .tag-link.active { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-end) 100%); + color: white; + border-color: transparent; +} + +[data-theme="dark"] .tag-count { + color: var(--text-tertiary); +} + +[data-theme="dark"] .tag-chip { + background: var(--bg-tertiary); + color: var(--text-secondary); + border: 1px solid var(--border-primary); +} + +[data-theme="dark"] .visibility-link { + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + color: var(--text-secondary); +} + +[data-theme="dark"] .visibility-link:hover { + background: var(--bg-hover); + border-color: var(--border-hover); + color: var(--text-primary); +} + +[data-theme="dark"] .visibility-link.active { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-gradient-end) 100%); + color: white; + border-color: transparent; +} + +/* Active Filters Dark Mode */ +[data-theme="dark"] .active-filters { + background: var(--bg-secondary); + border-color: var(--border-primary); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); + color: var(--text-secondary); +} + +[data-theme="dark"] .filter-tag { + background: var(--bg-tertiary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .filter-tag i { + color: var(--primary-color); +} + +[data-theme="dark"] .remove-filter { + color: var(--error-color); +} + +[data-theme="dark"] .remove-filter:hover { + color: #ff6b6b; +} + +[data-theme="dark"] .clear-all { + color: var(--primary-color); +} + +[data-theme="dark"] .clear-all:hover { + color: var(--primary-hover); +} + +/* View Toggle Buttons Dark Mode */ +[data-theme="dark"] .view-toggle { + background: transparent; +} + +[data-theme="dark"] .toggle-btn { + background: var(--bg-secondary); + border-color: var(--border-primary); + color: var(--text-secondary); +} + +[data-theme="dark"] .toggle-btn:hover { + background: var(--bg-hover); + border-color: var(--border-hover); + color: var(--text-primary); +} + +[data-theme="dark"] .toggle-btn.active { + background: var(--primary-color); + color: white; + border-color: var(--primary-color); +} + +[data-theme="dark"] .view-controls { + background: transparent; +} + +/* Ensure all view switcher patterns are covered */ +[data-theme="dark"] .view-container { + background: transparent; +} + +[data-theme="dark"] .entries-grid { + background: transparent; +} + +[data-theme="dark"] .entry-card { + background: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .entry-card:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +/* Pinned Notes Dark Mode */ +[data-theme="dark"] .notes-table tr.pinned { + background: rgba(251, 191, 36, 0.1); /* warning color with low opacity */ +} + +[data-theme="dark"] .notes-table tr.pinned:hover { + background: rgba(251, 191, 36, 0.15); +} + +[data-theme="dark"] .note-row.pinned { + background: rgba(251, 191, 36, 0.1); +} + +[data-theme="dark"] .note-row.pinned:hover { + background: rgba(251, 191, 36, 0.15); +} + +[data-theme="dark"] .pin-indicator { + color: var(--warning-color); +} + +/* Categories Section Dark Mode */ +[data-theme="dark"] .categories-section { + background: var(--bg-tertiary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .section-header { + color: var(--text-primary); +} + +[data-theme="dark"] .section-title { + color: var(--text-primary); +} + +[data-theme="dark"] .category-card { + background: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .category-card:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .category-header { + /* The gradient and border color are inline styled, so we need to ensure text is readable */ + color: var(--text-primary); +} + +[data-theme="dark"] .category-name { + color: var(--text-primary); +} + +[data-theme="dark"] .category-description { + color: var(--text-secondary); +} + +[data-theme="dark"] .category-stats { + color: var(--text-secondary); +} + +[data-theme="dark"] .category-actions .btn-icon { + background: var(--bg-tertiary); + border-color: var(--border-primary); + color: var(--text-secondary); +} + +[data-theme="dark"] .category-actions .btn-icon:hover { + background: var(--bg-hover); + color: var(--text-primary); +} + +/* Category Modal Dark Mode */ +[data-theme="dark"] #category-modal .modal-content { + background: var(--bg-secondary); + color: var(--text-primary); +} + +[data-theme="dark"] #category-modal .modal-header { + background: var(--bg-secondary); + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] #category-modal .modal-body { + background: var(--bg-secondary); +} + +[data-theme="dark"] #category-modal .modal-footer { + background: var(--bg-secondary); + border-top-color: var(--border-primary); +} + +[data-theme="dark"] #category-modal .form-control { + background: var(--bg-tertiary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] #category-modal .form-control:focus { + background: var(--bg-tertiary); + border-color: var(--primary-color); +} + +[data-theme="dark"] #category-modal .form-label { + color: var(--text-primary); +} + +[data-theme="dark"] #category-modal .form-hint { + color: var(--text-secondary); +} \ No newline at end of file diff --git a/static/css/mobile-bottom-nav.css b/static/css/mobile-bottom-nav.css index c53ed62..5a09318 100644 --- a/static/css/mobile-bottom-nav.css +++ b/static/css/mobile-bottom-nav.css @@ -1,125 +1,122 @@ /* Mobile Bottom Navigation Bar */ + +/* Bottom Navigation Container */ +.mobile-bottom-nav { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: white; + border-top: 1px solid var(--border-color, #e0e0e0); + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + z-index: 100; + display: flex; + justify-content: space-around; + align-items: center; + padding: 8px 0; + padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)); + display: none; /* Hidden by default */ +} + +/* Only show on mobile devices */ @media (max-width: 768px) { - /* Bottom Navigation Container */ .mobile-bottom-nav { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: white; - border-top: 1px solid var(--border-color, #e0e0e0); - box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); - z-index: 100; display: flex; - justify-content: space-around; - align-items: center; - padding: 8px 0; - padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)); - } - - /* Hide on desktop */ - @media (min-width: 769px) { - .mobile-bottom-nav { - display: none; - } - } - - /* Navigation Items */ - .bottom-nav-item { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 48px; - padding: 4px; - text-decoration: none; - color: var(--text-secondary, #666); - transition: all 0.2s ease; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - position: relative; - } - - /* Icon styling */ - .bottom-nav-item i { - font-size: 24px; - margin-bottom: 2px; - transition: transform 0.2s ease; - } - - /* Label styling */ - .bottom-nav-item span { - font-size: 11px; - font-weight: 500; - } - - /* Active state */ - .bottom-nav-item.active { - color: var(--primary-color, #667eea); - } - - .bottom-nav-item.active i { - transform: scale(1.1); - } - - /* Touch feedback */ - .bottom-nav-item:active { - opacity: 0.7; - transform: scale(0.95); - } - - /* Center FAB-style time tracking button */ - .bottom-nav-item.nav-fab { - position: relative; - top: -10px; - } - - .bottom-nav-item.nav-fab .fab-button { - width: 56px; - height: 56px; - border-radius: 50%; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); - margin-bottom: 4px; - } - - .bottom-nav-item.nav-fab .fab-button i { - color: white; - font-size: 28px; - margin: 0; - } - - .bottom-nav-item.nav-fab span { - position: absolute; - bottom: -4px; - white-space: nowrap; - } - - /* Notification badge */ - .nav-badge { - position: absolute; - top: 4px; - right: calc(50% - 16px); - background: #ff3b30; - color: white; - font-size: 10px; - font-weight: bold; - padding: 2px 4px; - border-radius: 10px; - min-width: 16px; - text-align: center; } /* Adjust main content to avoid overlap */ .has-bottom-nav .content { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important; } - - /* Keep sidebar for hamburger menu functionality */ - /* Removed the rule that was hiding sidebar */ +} + +/* Navigation Items */ +.bottom-nav-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 48px; + padding: 4px; + text-decoration: none; + color: var(--text-secondary, #666); + transition: all 0.2s ease; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + position: relative; +} + +/* Icon styling */ +.bottom-nav-item i { + font-size: 24px; + margin-bottom: 2px; + transition: transform 0.2s ease; +} + +/* Label styling */ +.bottom-nav-item span { + font-size: 11px; + font-weight: 500; +} + +/* Active state */ +.bottom-nav-item.active { + color: var(--primary-color, #667eea); +} + +.bottom-nav-item.active i { + transform: scale(1.1); +} + +/* Touch feedback */ +.bottom-nav-item:active { + opacity: 0.7; + transform: scale(0.95); +} + +/* Center FAB-style time tracking button */ +.bottom-nav-item.nav-fab { + position: relative; + top: -10px; +} + +.bottom-nav-item.nav-fab .fab-button { + width: 56px; + height: 56px; + border-radius: 50%; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); + margin-bottom: 4px; +} + +.bottom-nav-item.nav-fab .fab-button i { + color: white; + font-size: 28px; + margin: 0; +} + +.bottom-nav-item.nav-fab span { + position: absolute; + bottom: -4px; + white-space: nowrap; +} + +/* Notification badge */ +.nav-badge { + position: absolute; + top: 4px; + right: calc(50% - 16px); + background: #ff3b30; + color: white; + font-size: 10px; + font-weight: bold; + padding: 2px 4px; + border-radius: 10px; + min-width: 16px; + text-align: center; } \ No newline at end of file diff --git a/static/css/splash.css b/static/css/splash.css index 204c3a8..4480472 100644 --- a/static/css/splash.css +++ b/static/css/splash.css @@ -743,4 +743,180 @@ body:not(.has-user) { transform: scale(4); opacity: 0; } +} + +/* Dark Mode Styles for Splash Page */ +[data-theme="dark"] body:not(.has-user) { + background-color: var(--bg-primary); +} + +[data-theme="dark"] .splash-hero { + background: linear-gradient(135deg, #4a5dab 0%, #6341a1 100%); +} + +[data-theme="dark"] .hero-title, +[data-theme="dark"] .hero-subtitle { + color: white; +} + +[data-theme="dark"] .btn-secondary { + border-color: rgba(255, 255, 255, 0.8); + color: white; +} + +[data-theme="dark"] .btn-secondary:hover { + background: rgba(255, 255, 255, 0.9); + color: #4a5dab; + border-color: white; +} + +[data-theme="dark"] .features-grid { + background: var(--bg-secondary); +} + +[data-theme="dark"] .section-title { + color: var(--text-primary); +} + +[data-theme="dark"] .section-title::after { + background: linear-gradient(135deg, #7a8df5 0%, #8b5bc9 100%); +} + +[data-theme="dark"] .feature-card { + background: var(--bg-card); + border-color: var(--border-primary); + color: var(--text-primary); + box-shadow: 0 5px 20px rgba(0,0,0,0.3); +} + +[data-theme="dark"] .feature-card:hover { + transform: translateY(-3px); + box-shadow: 0 10px 30px rgba(122, 141, 245, 0.3); + border-color: var(--primary-color); +} + +[data-theme="dark"] .feature-card h3 { + color: var(--text-primary); +} + +[data-theme="dark"] .feature-card p { + color: var(--text-secondary); +} + +[data-theme="dark"] .feature-icon { + background: linear-gradient(135deg, #7a8df5 0%, #8b5bc9 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +[data-theme="dark"] .statistics { + background: linear-gradient(135deg, #2a3142 0%, #3a3e4a 100%); +} + +[data-theme="dark"] .stat-item { + color: white; +} + +[data-theme="dark"] .stat-number { + color: white; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +[data-theme="dark"] .stat-label { + color: rgba(255, 255, 255, 0.9); +} + +[data-theme="dark"] .testimonials { + background: var(--bg-primary); +} + +[data-theme="dark"] .testimonial-card { + background: var(--bg-card); + border-color: var(--border-primary); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .testimonial-card:hover { + box-shadow: 0 12px 40px rgba(122, 141, 245, 0.25); + border-color: var(--primary-color); +} + +[data-theme="dark"] .testimonial-card p { + color: var(--text-secondary); +} + +[data-theme="dark"] .testimonial-author strong { + color: var(--text-primary); +} + +[data-theme="dark"] .testimonial-author span { + color: var(--text-tertiary); +} + +[data-theme="dark"] .pricing { + background: var(--bg-secondary); +} + +[data-theme="dark"] .pricing-card { + background: var(--bg-card); + border-color: var(--border-primary); + box-shadow: 0 5px 20px rgba(0,0,0,0.3); +} + +[data-theme="dark"] .pricing-card:hover { + box-shadow: 0 15px 40px rgba(122, 141, 245, 0.25); +} + +[data-theme="dark"] .pricing-card.featured { + box-shadow: 0 10px 40px rgba(0,0,0,0.4); + border-image: linear-gradient(135deg, #7a8df5 0%, #8b5bc9 100%) 1; +} + +[data-theme="dark"] .pricing-card h3 { + color: var(--text-primary); +} + +[data-theme="dark"] .price { + color: var(--primary-color); +} + +[data-theme="dark"] .price span { + color: var(--text-secondary); +} + +[data-theme="dark"] .pricing-features li { + color: var(--text-secondary); + border-color: var(--border-secondary); +} + +[data-theme="dark"] .final-cta { + background: linear-gradient(135deg, #4a5dab 0%, #6341a1 100%); +} + +[data-theme="dark"] .features-banner { + background: linear-gradient(135deg, #1a1d26 0%, #2a2d36 100%); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 -2px 10px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .features-banner.reverse { + background: linear-gradient(135deg, #2a2d36 0%, #3a3d46 100%); +} + +[data-theme="dark"] .feature-item { + color: var(--text-primary); +} + +[data-theme="dark"] .feature-item i { + color: #9ca3ff; + text-shadow: 0 0 10px rgba(156, 163, 255, 0.5); +} + +[data-theme="dark"] .feature-item:hover i { + color: #b8beff; + text-shadow: 0 0 15px rgba(184, 190, 255, 0.7); +} + +[data-theme="dark"] .feature-item span { + opacity: 0.9; } \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 07b0d6c..cf1f74a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -284,7 +284,7 @@ button { .sidebar.collapsed .nav-icon { margin-right: 0; - font-size: 1.1rem; + font-size: 1.75rem; } /* Hide text in collapsed state */ @@ -1052,7 +1052,7 @@ input[type="time"]::-webkit-datetime-edit { .system-dashboard-container { max-width: 1600px; margin: 0 auto; - padding: 2rem; + padding: 1rem; } /* Common Admin Page Styles */ diff --git a/static/css/tables-consolidated.css b/static/css/tables-consolidated.css new file mode 100644 index 0000000..387f334 --- /dev/null +++ b/static/css/tables-consolidated.css @@ -0,0 +1,410 @@ +/* Consolidated Table Styles for TimeTrack */ +/* This file provides a unified approach to table styling across the application */ + +/* ======================================== + CSS VARIABLES FOR TABLES + ======================================== */ +:root { + /* Table Colors - Light Mode */ + --table-bg: #ffffff; + --table-header-bg: #f8f9fa; + --table-border-color: #e5e7eb; + --table-header-text: #374151; + --table-body-text: #1f2937; + --table-hover-bg: #f8f9fa; + --table-stripe-bg: #f9fafb; + --table-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + + /* Table Spacing */ + --table-cell-padding: 1rem; + --table-cell-padding-compact: 0.5rem; + --table-border-width: 1px; + --table-header-border-width: 2px; + + /* Table Typography */ + --table-font-size: 1rem; + --table-font-size-sm: 0.875rem; + --table-header-font-weight: 600; +} + +/* Dark mode variables are already defined in dark-mode.css */ + +/* ======================================== + BASE TABLE STYLES + ======================================== */ +.table { + width: 100%; + border-collapse: collapse; + background-color: var(--table-bg); + color: var(--table-body-text); + font-size: var(--table-font-size); +} + +/* Table Container */ +.table-container { + background: var(--table-bg); + border-radius: 12px; + overflow: hidden; + box-shadow: var(--table-shadow); + border: 1px solid var(--table-border-color); + margin-bottom: 2rem; +} + +/* Responsive wrapper */ +.table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + margin: 0 -1rem; + padding: 0 1rem; +} + +@media (min-width: 769px) { + .table-responsive { + margin: 0; + padding: 0; + } +} + +/* Table Headers */ +.table thead th { + background-color: var(--table-header-bg); + color: var(--table-header-text); + font-weight: var(--table-header-font-weight); + text-align: left; + padding: var(--table-cell-padding); + border-bottom: var(--table-header-border-width) solid var(--table-border-color); + white-space: nowrap; +} + +/* Table Body */ +.table tbody td { + padding: var(--table-cell-padding); + border-bottom: var(--table-border-width) solid var(--table-border-color); + vertical-align: middle; +} + +/* Remove last row border */ +.table tbody tr:last-child td { + border-bottom: none; +} + +/* ======================================== + TABLE MODIFIERS + ======================================== */ + +/* Hover Effect */ +.table--hover tbody tr { + transition: background-color 0.2s ease; +} + +.table--hover tbody tr:hover { + background-color: var(--table-hover-bg); +} + +/* Striped Rows */ +.table--striped tbody tr:nth-child(even) { + background-color: var(--table-stripe-bg); +} + +/* Compact Table */ +.table--compact thead th, +.table--compact tbody td { + padding: var(--table-cell-padding-compact); +} + +/* Bordered Table */ +.table--bordered { + border: var(--table-border-width) solid var(--table-border-color); +} + +.table--bordered thead th, +.table--bordered tbody td { + border: var(--table-border-width) solid var(--table-border-color); +} + +/* Small Font Size */ +.table--sm { + font-size: var(--table-font-size-sm); +} + +/* Fixed Layout */ +.table--fixed { + table-layout: fixed; +} + +/* Scrollable Body */ +.table--scroll-body { + display: block; +} + +.table--scroll-body thead, +.table--scroll-body tbody { + display: block; +} + +.table--scroll-body tbody { + max-height: 400px; + overflow-y: auto; +} + +.table--scroll-body thead th, +.table--scroll-body tbody td { + width: 25%; /* Adjust based on column count */ +} + +/* ======================================== + SPECIALIZED TABLE STYLES + ======================================== */ + +/* Time Entries Table */ +.table--time-entries .date-cell { + text-align: center; + width: 80px; +} + +.table--time-entries .date-day { + font-size: 1.25rem; + font-weight: 700; + display: block; +} + +.table--time-entries .date-month { + font-size: 0.75rem; + color: var(--text-secondary); + text-transform: uppercase; + display: block; +} + +.table--time-entries .time-cell { + font-family: 'Monaco', 'Courier New', monospace; + white-space: nowrap; +} + +.table--time-entries .duration-cell { + font-weight: 600; + color: var(--primary-color); +} + +/* Admin Tables */ +.table--admin { + box-shadow: var(--table-shadow); +} + +.table--admin thead th { + text-transform: uppercase; + font-size: 0.75rem; + letter-spacing: 0.5px; +} + +/* Data Tables */ +.table--data { + min-width: 600px; +} + +.table--data .actions-cell { + width: 150px; + text-align: right; +} + +/* ======================================== + TABLE COMPONENTS + ======================================== */ + +/* Table Actions */ +.table-actions { + display: flex; + gap: 0.5rem; + justify-content: flex-end; +} + +.table-actions .btn { + padding: 0.25rem 0.5rem; + font-size: 0.875rem; +} + +/* Table Avatar */ +.table-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 0.75rem; + vertical-align: middle; +} + +/* Table Badges */ +.table-badge { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 12px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; +} + +/* Status Badges */ +.table-badge--success { + background: var(--success-bg); + color: var(--success-color); +} + +.table-badge--warning { + background: var(--warning-bg); + color: var(--warning-color); +} + +.table-badge--error { + background: var(--error-bg); + color: var(--error-color); +} + +.table-badge--info { + background: var(--info-bg); + color: var(--info-color); +} + +/* Empty State */ +.table-empty { + text-align: center; + padding: 3rem; + color: var(--text-secondary); +} + +.table-empty-icon { + font-size: 3rem; + margin-bottom: 1rem; + opacity: 0.5; +} + +.table-empty-message { + font-size: 1.125rem; + margin-bottom: 0.5rem; +} + +/* ======================================== + MOBILE OPTIMIZATIONS + ======================================== */ +@media (max-width: 768px) { + /* Stack table on mobile */ + .table--mobile-stack thead { + display: none; + } + + .table--mobile-stack tbody tr { + display: block; + margin-bottom: 1rem; + border: 1px solid var(--table-border-color); + border-radius: 8px; + padding: 1rem; + } + + .table--mobile-stack tbody td { + display: block; + border: none; + padding: 0.25rem 0; + } + + .table--mobile-stack tbody td::before { + content: attr(data-label); + font-weight: 600; + display: inline-block; + width: 40%; + margin-right: 1rem; + color: var(--text-secondary); + } + + /* Mobile font adjustments */ + .table { + font-size: 0.875rem; + } + + .table thead th, + .table tbody td { + padding: 0.75rem 0.5rem; + } +} + +/* ======================================== + DARK MODE SUPPORT + ======================================== */ +[data-theme="dark"] .table { + background-color: var(--bg-card); + color: var(--text-primary); +} + +[data-theme="dark"] .table thead th { + background-color: var(--table-header-bg); + color: var(--text-heading); + border-color: var(--border-primary); +} + +[data-theme="dark"] .table tbody td { + border-color: var(--border-secondary); +} + +[data-theme="dark"] .table--hover tbody tr:hover { + background-color: var(--table-row-hover); +} + +[data-theme="dark"] .table--striped tbody tr:nth-child(even) { + background-color: var(--table-row-stripe); +} + +[data-theme="dark"] .table-container { + background: var(--bg-card); + border-color: var(--border-primary); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* ======================================== + MIGRATION CLASSES + ======================================== */ +/* These classes map old table classes to new consolidated ones */ +/* They can be removed once all templates are updated */ + +.data-table, +.entries-table, +.users-table, +.projects-table, +.time-history { + @extend .table; + @extend .table--hover; +} + +.entries-table { + @extend .table--time-entries; +} + +.users-table, +.projects-table { + @extend .table--admin; +} + +/* For backwards compatibility without @extend (CSS-only) */ +.data-table, +.entries-table, +.users-table, +.projects-table, +.time-history { + width: 100%; + border-collapse: collapse; + background-color: var(--table-bg); + color: var(--table-body-text); + font-size: var(--table-font-size); +} + +/* Copy hover styles */ +.data-table tbody tr, +.entries-table tbody tr, +.users-table tbody tr, +.projects-table tbody tr, +.time-history tbody tr { + transition: background-color 0.2s ease; +} + +.data-table tbody tr:hover, +.entries-table tbody tr:hover, +.users-table tbody tr:hover, +.projects-table tbody tr:hover, +.time-history tbody tr:hover { + background-color: var(--table-hover-bg); +} \ No newline at end of file diff --git a/static/css/time-tracking.css b/static/css/time-tracking.css index 77b6639..6e2012d 100644 --- a/static/css/time-tracking.css +++ b/static/css/time-tracking.css @@ -767,4 +767,218 @@ .entries-table td { padding: 0.5rem; } +} + +/* Dark Mode Styles for Time Tracking */ +[data-theme="dark"] .timer-card { + background-color: var(--bg-card); + border-color: var(--border-primary); +} + +[data-theme="dark"] .timer-card.active { + border-color: var(--success-color); + background-color: var(--bg-card); +} + +[data-theme="dark"] .timer-value { + color: var(--primary-color); +} + +[data-theme="dark"] .timer-info { + background-color: var(--bg-secondary); + color: var(--text-secondary); +} + +[data-theme="dark"] .timer-controls { + background-color: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .btn-stop { + background-color: var(--error-color); + border-color: var(--error-color); + color: white; +} + +[data-theme="dark"] .btn-stop:hover { + background-color: #ef4444; + border-color: #ef4444; +} + +[data-theme="dark"] .entries-section { + background-color: var(--bg-card); + border-color: var(--border-primary); +} + +[data-theme="dark"] .entries-header { + border-color: var(--border-primary); +} + +[data-theme="dark"] .filter-controls { + background-color: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .search-input { + background-color: var(--bg-input); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .search-input:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(122, 141, 245, 0.1); +} + +[data-theme="dark"] .entries-card { + background-color: var(--bg-card); + border-color: var(--border-primary); +} + +[data-theme="dark"] .entries-card:hover { + background-color: var(--bg-hover); + border-color: var(--primary-color); +} + +[data-theme="dark"] .entry-header { + border-color: var(--border-secondary); +} + +[data-theme="dark"] .entry-date { + color: var(--text-primary); +} + +[data-theme="dark"] .entry-project { + background-color: var(--bg-tertiary); + color: var(--text-secondary); +} + +[data-theme="dark"] .entry-time { + color: var(--text-tertiary); +} + +[data-theme="dark"] .entry-duration { + background-color: var(--bg-tertiary); + color: var(--text-primary); +} + +[data-theme="dark"] .entry-actions .btn { + background-color: var(--bg-secondary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .entry-actions .btn:hover { + background-color: var(--bg-hover); + border-color: var(--border-hover); +} + +[data-theme="dark"] .entry-actions .btn-danger { + background-color: transparent; + border-color: var(--error-color); + color: var(--error-color); +} + +[data-theme="dark"] .entry-actions .btn-danger:hover { + background-color: var(--error-color); + color: white; +} + +[data-theme="dark"] .entries-table { + background-color: var(--bg-card); +} + +[data-theme="dark"] .entries-table thead { + background-color: var(--table-header-bg); + border-color: var(--border-primary); +} + +[data-theme="dark"] .entries-table th { + color: var(--text-primary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .entries-table td { + border-color: var(--border-secondary); + color: var(--text-primary); +} + +[data-theme="dark"] .entries-table tbody tr:hover { + background-color: var(--table-row-hover); +} + +[data-theme="dark"] .total-row { + background-color: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .modal { + background-color: rgba(0, 0, 0, 0.75); +} + +[data-theme="dark"] .modal-content { + background-color: var(--bg-modal); + color: var(--text-primary); +} + +[data-theme="dark"] .modal-header { + border-color: var(--border-primary); +} + +[data-theme="dark"] .modal-title { + color: var(--text-primary); +} + +[data-theme="dark"] .modal-close { + background-color: var(--bg-secondary); + color: var(--text-secondary); +} + +[data-theme="dark"] .modal-close:hover { + background-color: var(--bg-hover); + color: var(--text-primary); +} + +[data-theme="dark"] .modal-footer { + border-color: var(--border-primary); +} + +[data-theme="dark"] .form-label { + color: var(--text-secondary); +} + +[data-theme="dark"] .form-control, +[data-theme="dark"] .form-select { + background-color: var(--bg-input); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .form-control:focus, +[data-theme="dark"] .form-select:focus { + background-color: var(--bg-input); + border-color: var(--primary-color); + color: var(--text-primary); + box-shadow: 0 0 0 3px rgba(122, 141, 245, 0.1); +} + +[data-theme="dark"] .stats-grid { + gap: 1.5rem; +} + +[data-theme="dark"] .stat-card { + background-color: var(--bg-card); + border-color: var(--border-primary); +} + +[data-theme="dark"] .stat-icon { + background-color: var(--bg-secondary); +} + +[data-theme="dark"] .stat-label { + color: var(--text-secondary); +} + +[data-theme="dark"] .stat-value { + color: var(--text-primary); } \ No newline at end of file diff --git a/static/js/theme-switcher.js b/static/js/theme-switcher.js new file mode 100644 index 0000000..ea89c49 --- /dev/null +++ b/static/js/theme-switcher.js @@ -0,0 +1,163 @@ +// Dark Mode Theme Switcher +(function() { + // Theme constants + const THEME_KEY = 'timetrack-theme'; + const LIGHT_THEME = 'light'; + const DARK_THEME = 'dark'; + const DEFAULT_THEME = LIGHT_THEME; + + // Icons for theme toggle + const LIGHT_ICON = ''; + const DARK_ICON = ''; + + // Get saved theme or default + function getSavedTheme() { + return localStorage.getItem(THEME_KEY) || DEFAULT_THEME; + } + + // Save theme preference + function saveTheme(theme) { + localStorage.setItem(THEME_KEY, theme); + } + + // Apply theme to document + function applyTheme(theme) { + document.documentElement.setAttribute('data-theme', theme); + updateToggleButton(theme); + + // Update meta theme-color for mobile browsers + const metaThemeColor = document.querySelector('meta[name="theme-color"]'); + if (metaThemeColor) { + metaThemeColor.content = theme === DARK_THEME ? '#0f0f0f' : '#ffffff'; + } + } + + // Update toggle button icon + function updateToggleButton(theme) { + const toggleButton = document.querySelector('.theme-toggle'); + if (toggleButton) { + toggleButton.innerHTML = theme === DARK_THEME ? LIGHT_ICON : DARK_ICON; + toggleButton.setAttribute('title', theme === DARK_THEME ? 'Switch to Light Mode' : 'Switch to Dark Mode'); + } + } + + // Toggle theme + function toggleTheme() { + const currentTheme = document.documentElement.getAttribute('data-theme') || DEFAULT_THEME; + const newTheme = currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME; + + applyTheme(newTheme); + saveTheme(newTheme); + + // Dispatch custom event for other components to react + window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: newTheme } })); + } + + // Create theme toggle button + function createToggleButton() { + const button = document.createElement('button'); + button.className = 'theme-toggle'; + button.setAttribute('aria-label', 'Toggle theme'); + button.innerHTML = getSavedTheme() === DARK_THEME ? LIGHT_ICON : DARK_ICON; + button.addEventListener('click', toggleTheme); + + // Add to body + document.body.appendChild(button); + + return button; + } + + // Initialize theme system + function initTheme() { + // Apply saved theme immediately to prevent flash + const savedTheme = getSavedTheme(); + applyTheme(savedTheme); + + // Create toggle button when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', createToggleButton); + } else { + createToggleButton(); + } + + // Listen for system theme changes + if (window.matchMedia) { + const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); + + // Check if no saved preference, use system preference + if (!localStorage.getItem(THEME_KEY)) { + applyTheme(darkModeQuery.matches ? DARK_THEME : LIGHT_THEME); + } + + // Listen for system theme changes + darkModeQuery.addEventListener('change', (e) => { + // Only apply if user hasn't set a preference + if (!localStorage.getItem(THEME_KEY)) { + const newTheme = e.matches ? DARK_THEME : LIGHT_THEME; + applyTheme(newTheme); + } + }); + } + + // Add keyboard shortcut (Ctrl/Cmd + Shift + D) + document.addEventListener('keydown', (e) => { + if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'D') { + e.preventDefault(); + toggleTheme(); + } + }); + } + + // Handle theme for specific components that might need updates + window.addEventListener('themeChanged', (e) => { + const theme = e.detail.theme; + + // Update Chart.js charts if present + if (window.Chart) { + Chart.defaults.color = theme === DARK_THEME ? '#a8a8a8' : '#666'; + Chart.defaults.borderColor = theme === DARK_THEME ? '#333333' : '#e5e7eb'; + Chart.defaults.plugins.legend.labels.color = theme === DARK_THEME ? '#a8a8a8' : '#666'; + + // Update all existing charts + Object.keys(Chart.instances).forEach(key => { + const chart = Chart.instances[key]; + chart.options.scales.x.ticks.color = theme === DARK_THEME ? '#a8a8a8' : '#666'; + chart.options.scales.y.ticks.color = theme === DARK_THEME ? '#a8a8a8' : '#666'; + chart.options.scales.x.grid.color = theme === DARK_THEME ? '#333333' : '#e5e7eb'; + chart.options.scales.y.grid.color = theme === DARK_THEME ? '#333333' : '#e5e7eb'; + chart.update(); + }); + } + + // Update Ace editor theme if present + if (window.ace) { + const editors = document.querySelectorAll('.ace_editor'); + editors.forEach(editorEl => { + const editor = ace.edit(editorEl); + editor.setTheme(theme === DARK_THEME ? 'ace/theme/monokai' : 'ace/theme/github'); + }); + } + }); + + // Prevent flash of incorrect theme + document.documentElement.style.visibility = 'hidden'; + document.addEventListener('DOMContentLoaded', () => { + requestAnimationFrame(() => { + document.documentElement.style.visibility = ''; + }); + }); + + // Initialize immediately + initTheme(); + + // Export functions for use in other scripts + window.ThemeSwitcher = { + toggle: toggleTheme, + getTheme: () => document.documentElement.getAttribute('data-theme') || DEFAULT_THEME, + setTheme: (theme) => { + applyTheme(theme); + saveTheme(theme); + }, + isDark: () => (document.documentElement.getAttribute('data-theme') || DEFAULT_THEME) === DARK_THEME + }; +})(); \ No newline at end of file diff --git a/templates/admin_organization.html b/templates/admin_organization.html index ecd277f..a82864a 100644 --- a/templates/admin_organization.html +++ b/templates/admin_organization.html @@ -1180,6 +1180,158 @@ flex-direction: column; } } + +/* Dark mode support for team components */ +[data-theme="dark"] .view-btn { + background: var(--bg-secondary); + border-color: var(--border-primary); + color: var(--text-secondary); +} + +[data-theme="dark"] .view-btn:hover { + background: var(--bg-hover); + border-color: var(--primary-color); + color: var(--primary-color); +} + +[data-theme="dark"] .view-btn.active { + background: var(--primary-color); + color: white; + border-color: var(--primary-color); +} + +[data-theme="dark"] .team-card { + background: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .team-card:hover { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .team-header { + background: var(--bg-tertiary); + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .team-name { + color: var(--text-primary); +} + +[data-theme="dark"] .team-description { + color: var(--text-secondary); +} + +[data-theme="dark"] .team-stats { + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .team-stat { + color: var(--text-secondary); +} + +[data-theme="dark"] .member-item:hover { + background: var(--bg-hover); +} + +[data-theme="dark"] .member-name { + color: var(--text-primary); +} + +[data-theme="dark"] .member-role { + color: var(--text-secondary); +} + +[data-theme="dark"] .more-members { + color: var(--text-secondary); +} + +[data-theme="dark"] .empty-members { + color: var(--text-secondary); +} + +[data-theme="dark"] .unassigned-section { + background: var(--bg-tertiary); +} + +[data-theme="dark"] .section-title { + color: var(--text-primary); +} + +[data-theme="dark"] .unassigned-user { + background: var(--bg-secondary); + border-color: var(--border-primary); +} + +[data-theme="dark"] .user-name { + color: var(--text-primary); +} + +[data-theme="dark"] .user-email { + color: var(--text-secondary); +} + +[data-theme="dark"] .users-table-container { + background: var(--bg-secondary); +} + +[data-theme="dark"] .users-table tbody tr:hover { + background: var(--bg-hover); +} + +[data-theme="dark"] .users-table td { + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .form-control { + background-color: var(--bg-tertiary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .form-control:focus { + background-color: var(--bg-secondary); + border-color: var(--primary-color); +} + +[data-theme="dark"] .form-hint { + color: var(--text-secondary); +} + +[data-theme="dark"] .modal-content { + background: var(--bg-secondary); + color: var(--text-primary); +} + +[data-theme="dark"] .modal-header { + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .modal-title { + color: var(--text-primary); +} + +[data-theme="dark"] .modal-close { + color: var(--text-secondary); + background: transparent; +} + +[data-theme="dark"] .modal-close:hover { + background: var(--bg-hover); + color: var(--text-primary); +} + +[data-theme="dark"] .modal-footer { + border-top-color: var(--border-primary); +} + +[data-theme="dark"] .empty-state { + color: var(--text-secondary); +} + +[data-theme="dark"] .empty-state h3 { + color: var(--text-primary); +} + @@ -37,6 +46,7 @@ + @@ -335,6 +345,7 @@ {% endif %} + diff --git a/templates/profile.html b/templates/profile.html index 900e435..dea04e8 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -310,7 +310,7 @@ .profile-container { max-width: 1400px; margin: 0 auto; - padding: 2rem; + padding: 1rem; } /* Page Header */