From 8a3631d5f5bf3565c2cbdce96e4d5f4da76c00af Mon Sep 17 00:00:00 2001 From: kris Date: Thu, 18 Sep 2025 09:29:34 +0000 Subject: [PATCH] Add subscription management system with website URL functionality MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Complete subscription tracking with monthly/annual billing cycles - Dashboard integration with simplified card-based layout - Website URL fields with clickable links for easy service access - Comprehensive form validation and error handling - Database schema with proper website_url column support - Responsive design with mobile-friendly interface - Export functionality for subscription data management - Real-time dashboard summaries showing total costs and service counts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- index.html | 351 ++++++++--- script.js | 644 +++++++++++++++++++- server.js | 315 +++++++++- styles.css | 1656 +++++++++++++++++++++++++++++++++++++--------------- 4 files changed, 2414 insertions(+), 552 deletions(-) diff --git a/index.html b/index.html index a0e010f..7b04716 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,14 @@ 📋 Trade History +
  • + 📱 + Subscriptions +
    • +
  • + âž• + Add Subscription +
  • 🧮 CGT Settings @@ -94,95 +102,45 @@
    -
    -
    -

    Current Portfolio Value

    -
    €0.00
    -
    Using cost basis
    -
    - -
    -

    Total Gains/Losses

    -
    €0.00
    -
    0.0%
    -
    - -
    -

    Monthly Investment

    -
    €0.00
    -
    0 trades
    -
    - -
    -

    Yearly Investment

    -
    €0.00
    -
    0 trades
    -
    - -
    -

    Total Shares

    -
    0
    -
    0 ETFs
    -
    - -
    -

    Total Investment

    -
    €0.00
    -
    Avg return: 0.0%
    -
    -
    - - -
    -
    -

    Total Holdings

    -
    -
    - Portfolio Value: - €0.00 -
    -
    - Cash Savings: - €0.00 -
    -
    -
    - Total Value: - €0.00 -
    +
    +
    +
    +

    Portfolio

    +
    +
    +
    €0.00
    +
    €0.00
    -
    - - diff --git a/script.js b/script.js index ecf097f..3ede27c 100644 --- a/script.js +++ b/script.js @@ -33,10 +33,20 @@ class ETFTradeTracker { const form = document.getElementById('trade-form'); const clearBtn = document.getElementById('clear-trades'); const exportBtn = document.getElementById('export-trades'); + const subscriptionForm = document.getElementById('subscription-form'); form.addEventListener('submit', (e) => this.handleSubmit(e)); clearBtn.addEventListener('click', () => this.clearAllTrades()); exportBtn.addEventListener('click', () => this.exportTrades()); + + if (subscriptionForm) { + subscriptionForm.addEventListener('submit', (e) => this.handleSubscriptionSubmit(e)); + } + + const editSubscriptionForm = document.getElementById('edit-subscription-form'); + if (editSubscriptionForm) { + editSubscriptionForm.addEventListener('submit', (e) => this.handleEditSubscriptionSubmit(e)); + } } bindNavigation() { @@ -47,16 +57,7 @@ class ETFTradeTracker { menuItems.forEach(item => { item.addEventListener('click', () => { const page = item.dataset.page; - this.showPage(page); - - // Update active menu item - menuItems.forEach(mi => mi.classList.remove('active')); - item.classList.add('active'); - - // Hide sidebar on mobile after selection - if (window.innerWidth <= 768) { - sidebar.classList.remove('open'); - } + this.navigateToPage(page); }); }); @@ -74,6 +75,25 @@ class ETFTradeTracker { }); } + navigateToPage(pageId) { + const menuItems = document.querySelectorAll('.menu-item'); + const sidebar = document.querySelector('.sidebar'); + + // Show the page + this.showPage(pageId); + + // Update active menu item + menuItems.forEach(mi => mi.classList.remove('active')); + const targetMenuItem = document.querySelector(`[data-page="${pageId}"]`); + if (targetMenuItem) { + targetMenuItem.classList.add('active'); + } + + // Hide sidebar on mobile after selection + if (window.innerWidth <= 768) { + sidebar.classList.remove('open'); + } + } showPage(pageId) { const pages = document.querySelectorAll('.page'); @@ -99,6 +119,8 @@ class ETFTradeTracker { 'tokens': 'API Tokens', 'cash-accounts': 'Cash Accounts', 'add-transfer': 'Add Transfer', + 'subscriptions': 'Subscriptions', + 'add-subscription': 'Add Subscription', 'admin': 'Admin Panel' }; @@ -117,6 +139,10 @@ class ETFTradeTracker { this.renderCashAccountsPage(); } else if (pageId === 'add-transfer') { this.renderAddTransferPage(); + } else if (pageId === 'subscriptions') { + this.renderSubscriptionsPage(); + } else if (pageId === 'add-subscription') { + this.renderAddSubscriptionPage(); } else if (pageId === 'admin') { this.renderAdminPage(); } @@ -627,9 +653,121 @@ class ETFTradeTracker { } updateDashboard() { - this.calculateDashboardMetrics(); - this.renderETFBreakdown(); - this.loadDashboardCashData(); + this.calculateSimplifiedDashboard(); + } + + async calculateSimplifiedDashboard() { + try { + // Calculate portfolio totals + const portfolioData = this.calculatePortfolioTotals(); + + // Load cash and subscription data in parallel + const [cashData, subscriptionData] = await Promise.all([ + this.fetchCashSummary(), + this.fetchSubscriptionsSummary() + ]); + + // Update dashboard with calculated data + this.updateDashboardSummary(portfolioData, cashData, subscriptionData); + } catch (error) { + console.error('Error updating dashboard:', error); + } + } + + calculatePortfolioTotals() { + let totalCostBasis = 0; + let totalCurrentValue = 0; + let hasCurrentPrices = false; + + const etfMap = this.getActiveETFPositions(); + etfMap.forEach((etf, symbol) => { + totalCostBasis += etf.totalValue; + + const currentPrice = this.currentPrices.get(symbol); + if (currentPrice) { + totalCurrentValue += etf.shares * currentPrice; + hasCurrentPrices = true; + } else { + totalCurrentValue += etf.totalValue; + } + }); + + const totalGains = totalCurrentValue - totalCostBasis; + const gainsPercentage = totalCostBasis > 0 ? ((totalGains / totalCostBasis) * 100) : 0; + + return { + currentValue: totalCurrentValue, + totalGains, + gainsPercentage, + hasCurrentPrices + }; + } + + async fetchCashSummary() { + try { + const response = await fetch(`${this.apiUrl}/cash-summary`, { + credentials: 'include' + }); + if (response.ok) { + return await response.json(); + } + } catch (error) { + console.error('Error fetching cash summary:', error); + } + return { total_eur: 0, total_usd: 0, account_count: 0 }; + } + + async fetchSubscriptionsSummary() { + try { + const response = await fetch(`${this.apiUrl}/subscriptions-summary`, { + credentials: 'include' + }); + if (response.ok) { + const data = await response.json(); + console.log('Subscription summary data:', data); // Debug log + return data; + } + } catch (error) { + console.error('Error fetching subscriptions summary:', error); + } + return []; + } + + updateDashboardSummary(portfolioData, cashData, subscriptionData) { + // Portfolio card - force EUR display + document.getElementById('dashboard-current-value').textContent = this.formatCurrency(portfolioData.currentValue, 'EUR'); + document.getElementById('dashboard-total-gains').textContent = + `${portfolioData.totalGains >= 0 ? '+' : ''}${this.formatCurrency(portfolioData.totalGains, 'EUR')}`; + + // Cash card - force EUR display + const totalCash = cashData.total_eur + (cashData.total_usd * 1.1); // Simple EUR conversion + document.getElementById('dashboard-cash-total').textContent = this.formatCurrency(totalCash, 'EUR'); + document.getElementById('dashboard-account-count').textContent = `${cashData.account_count} accounts`; + + // Subscriptions card - using summary data structure + let monthlyTotal = 0; + let subscriptionCount = 0; + + if (subscriptionData && Array.isArray(subscriptionData) && subscriptionData.length > 0) { + // If we get an array of summary objects (grouped by currency) + subscriptionData.forEach(summary => { + monthlyTotal += summary.total_monthly_cost || 0; + subscriptionCount += summary.total_subscriptions || 0; + }); + } else if (subscriptionData && subscriptionData.total_monthly_cost !== undefined) { + // If we get a single summary object + monthlyTotal = subscriptionData.total_monthly_cost || 0; + subscriptionCount = subscriptionData.total_subscriptions || 0; + } + + document.getElementById('dashboard-subscription-monthly').textContent = this.formatCurrency(monthlyTotal, 'EUR') + '/mo'; + document.getElementById('dashboard-subscription-count').textContent = `${subscriptionCount} services`; + + // Total value card - force EUR display + const totalValue = portfolioData.currentValue + totalCash; + document.getElementById('dashboard-total-combined').textContent = this.formatCurrency(totalValue, 'EUR'); + document.getElementById('dashboard-performance').textContent = + `${portfolioData.gainsPercentage >= 0 ? '+' : ''}${portfolioData.gainsPercentage.toFixed(1)}%`; } updateDashboardColors(totalGains) { @@ -2912,6 +3050,486 @@ class ETFTradeTracker { div.textContent = text; return div.innerHTML; } + + // Subscription Management Functions + async renderSubscriptionsPage() { + await this.loadSubscriptions(); + await this.loadSubscriptionsSummary(); + } + + async renderAddSubscriptionPage() { + // Set default date to today + const today = new Date().toISOString().split('T')[0]; + document.getElementById('subscription-start-date').value = today; + } + + async loadSubscriptions() { + try { + const response = await fetch(`${this.apiUrl}/subscriptions`, { + credentials: 'include' + }); + + if (!response.ok) { + throw new Error('Failed to fetch subscriptions'); + } + + const subscriptions = await response.json(); + this.renderSubscriptionsList(subscriptions); + } catch (error) { + console.error('Error loading subscriptions:', error); + this.showNotification('Failed to load subscriptions', 'error'); + } + } + + async loadSubscriptionsSummary() { + try { + const response = await fetch(`${this.apiUrl}/subscriptions-summary`, { + credentials: 'include' + }); + + if (!response.ok) { + throw new Error('Failed to fetch subscriptions summary'); + } + + const summary = await response.json(); + this.renderSubscriptionsSummary(summary); + } catch (error) { + console.error('Error loading subscriptions summary:', error); + } + } + + renderSubscriptionsList(subscriptions) { + const container = document.getElementById('subscriptions-list'); + + if (subscriptions.length === 0) { + container.innerHTML = '

    No subscriptions recorded yet. Add your first subscription above!

    '; + return; + } + + const subscriptionsHTML = subscriptions.map(subscription => this.createSubscriptionHTML(subscription)).join(''); + container.innerHTML = subscriptionsHTML; + } + + createSubscriptionHTML(subscription) { + const monthlyPrice = subscription.billingCycle === 'monthly' + ? subscription.monthlyPrice + : (subscription.annualPrice / 12); + + const currency = this.getCurrencySymbol(subscription.currency); + const nextBilling = this.calculateNextBilling(subscription.startDate, subscription.billingCycle); + const startDate = new Date(subscription.startDate).toLocaleDateString(); + + return ` +
    +
    + ${this.escapeHtml(subscription.serviceName)} + ${subscription.billingCycle.toUpperCase()} +
    + ${currency}${monthlyPrice.toFixed(2)}/month + ${subscription.website_url ? `🔗` : ''} +
    + + +
    +
    +
    +
    +
    + ${subscription.billingCycle === 'annual' ? `(${currency}${subscription.annualPrice.toFixed(2)}/year)` : ''} + ${subscription.category} + ${subscription.freeTrialDays > 0 ? `Free trial: ${subscription.freeTrialDays} days` : ''} +
    +
    + Started: ${startDate} + Next billing: ${nextBilling} + ${subscription.endDate ? `Ends: ${new Date(subscription.endDate).toLocaleDateString()}` : ''} +
    + ${subscription.notes ? `
    ${this.escapeHtml(subscription.notes)}
    ` : ''} +
    +
    + `; + } + + renderSubscriptionsSummary(summary) { + const monthlyTotal = document.getElementById('monthly-total'); + const annualTotal = document.getElementById('annual-total'); + const totalSubscriptions = document.getElementById('total-subscriptions'); + + if (summary.length > 0) { + let totalMonthly = 0; + let totalAnnual = 0; + let totalSubs = 0; + + summary.forEach(s => { + totalMonthly += s.total_monthly_cost || 0; + totalAnnual += s.total_annual_cost || 0; + totalSubs += s.total_subscriptions || 0; + }); + + monthlyTotal.textContent = `€${totalMonthly.toFixed(2)}`; + annualTotal.textContent = `€${totalAnnual.toFixed(2)}`; + totalSubscriptions.textContent = totalSubs; + } else { + monthlyTotal.textContent = '€0.00'; + annualTotal.textContent = '€0.00'; + totalSubscriptions.textContent = '0'; + } + } + + async handleSubscriptionSubmit(e) { + e.preventDefault(); + + const formData = new FormData(e.target); + const subscriptionData = { + serviceName: formData.get('serviceName'), + category: formData.get('category'), + billingCycle: formData.get('billingCycle'), + currency: formData.get('currency'), + monthlyPrice: formData.get('monthlyPrice') ? parseFloat(formData.get('monthlyPrice')) : null, + annualPrice: formData.get('annualPrice') ? parseFloat(formData.get('annualPrice')) : null, + startDate: formData.get('startDate'), + endDate: formData.get('endDate') || null, + freeTrialDays: parseInt(formData.get('freeTrialDays')) || 0, + notes: formData.get('notes'), + websiteUrl: formData.get('websiteUrl') + }; + + if (!subscriptionData.monthlyPrice && !subscriptionData.annualPrice) { + this.showNotification('Please provide either monthly or annual price', 'error'); + return; + } + + try { + const response = await fetch(`${this.apiUrl}/subscriptions`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + credentials: 'include', + body: JSON.stringify(subscriptionData) + }); + + if (!response.ok) { + const error = await response.json(); + throw new Error(error.error || 'Failed to add subscription'); + } + + this.showNotification('Subscription added successfully!', 'success'); + e.target.reset(); + this.showPage('subscriptions'); + this.updateDashboard(); // Refresh dashboard data + + } catch (error) { + console.error('Error adding subscription:', error); + this.showNotification(error.message, 'error'); + } + } + + async deleteSubscription(subscriptionId) { + if (confirm('Are you sure you want to delete this subscription?')) { + try { + const response = await fetch(`${this.apiUrl}/subscriptions/${subscriptionId}`, { + method: 'DELETE', + credentials: 'include' + }); + + if (!response.ok) { + const error = await response.json(); + throw new Error(error.error || 'Failed to delete subscription'); + } + + await this.loadSubscriptions(); + await this.loadSubscriptionsSummary(); + this.updateDashboard(); // Refresh dashboard data + this.showNotification('Subscription deleted successfully!', 'success'); + + } catch (error) { + console.error('Error deleting subscription:', error); + this.showNotification(error.message || 'Failed to delete subscription', 'error'); + } + } + } + + // Subscription Modal Functions + openEditSubscriptionModal(subscriptionId) { + // First fetch the subscription data + this.fetchSubscriptions().then(subscriptions => { + const subscription = subscriptions.find(s => s.id == subscriptionId); + if (!subscription) { + this.showNotification('Subscription not found', 'error'); + return; + } + + // Populate the form + document.getElementById('edit-subscription-service-name').value = subscription.serviceName; + document.getElementById('edit-subscription-category').value = subscription.category; + document.getElementById('edit-subscription-billing-cycle').value = subscription.billingCycle; + document.getElementById('edit-subscription-currency').value = subscription.currency; + document.getElementById('edit-subscription-monthly-price').value = subscription.monthlyPrice || ''; + document.getElementById('edit-subscription-annual-price').value = subscription.annualPrice || ''; + document.getElementById('edit-subscription-start-date').value = subscription.startDate; + document.getElementById('edit-subscription-end-date').value = subscription.endDate || ''; + document.getElementById('edit-subscription-free-trial').value = subscription.freeTrialDays; + document.getElementById('edit-subscription-notes').value = subscription.notes || ''; + document.getElementById('edit-subscription-website-url').value = subscription.website_url || ''; + + // Store the subscription ID for later use + const form = document.getElementById('edit-subscription-form'); + form.dataset.subscriptionId = subscriptionId; + + // Show the modal + document.getElementById('edit-subscription-modal').style.display = 'block'; + }).catch(error => { + console.error('Error fetching subscription for edit:', error); + this.showNotification('Failed to load subscription data', 'error'); + }); + } + + closeEditSubscriptionModal() { + document.getElementById('edit-subscription-modal').style.display = 'none'; + } + + async handleEditSubscriptionSubmit(e) { + e.preventDefault(); + + const subscriptionId = e.target.dataset.subscriptionId; + const formData = new FormData(e.target); + const subscriptionData = { + serviceName: formData.get('serviceName'), + category: formData.get('category'), + billingCycle: formData.get('billingCycle'), + currency: formData.get('currency'), + monthlyPrice: formData.get('monthlyPrice') ? parseFloat(formData.get('monthlyPrice')) : null, + annualPrice: formData.get('annualPrice') ? parseFloat(formData.get('annualPrice')) : null, + startDate: formData.get('startDate'), + endDate: formData.get('endDate') || null, + freeTrialDays: parseInt(formData.get('freeTrialDays')) || 0, + notes: formData.get('notes'), + websiteUrl: formData.get('websiteUrl') + }; + + + if (!subscriptionData.monthlyPrice && !subscriptionData.annualPrice) { + this.showNotification('Please provide either monthly or annual price', 'error'); + return; + } + + try { + const response = await fetch(`${this.apiUrl}/subscriptions/${subscriptionId}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + credentials: 'include', + body: JSON.stringify(subscriptionData) + }); + + if (!response.ok) { + const error = await response.json(); + throw new Error(error.error || 'Failed to update subscription'); + } + + this.closeEditSubscriptionModal(); + await this.loadSubscriptions(); + await this.loadSubscriptionsSummary(); + this.updateDashboard(); + this.showNotification('Subscription updated successfully!', 'success'); + + } catch (error) { + console.error('Error updating subscription:', error); + this.showNotification(error.message, 'error'); + } + } + + exportSubscriptions() { + // First fetch all subscriptions + this.fetchSubscriptions().then(subscriptions => { + if (subscriptions.length === 0) { + this.showNotification('No subscriptions to export', 'error'); + return; + } + + const dataStr = JSON.stringify(subscriptions, null, 2); + const dataBlob = new Blob([dataStr], { type: 'application/json' }); + + const link = document.createElement('a'); + link.href = URL.createObjectURL(dataBlob); + link.download = `subscriptions_${new Date().toISOString().split('T')[0]}.json`; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + this.showNotification('Subscriptions exported successfully!', 'success'); + }).catch(error => { + console.error('Error exporting subscriptions:', error); + this.showNotification('Failed to export subscriptions', 'error'); + }); + } + + calculateNextBilling(startDate, billingCycle) { + const start = new Date(startDate); + const today = new Date(); + + let nextBilling = new Date(start); + + while (nextBilling <= today) { + if (billingCycle === 'monthly') { + nextBilling.setMonth(nextBilling.getMonth() + 1); + } else { + nextBilling.setFullYear(nextBilling.getFullYear() + 1); + } + } + + return nextBilling.toLocaleDateString(); + } + + // Dashboard Subscription Functions + async loadDashboardSubscriptionData() { + try { + const [subscriptions, summary] = await Promise.all([ + this.fetchSubscriptions(), + this.fetchSubscriptionsSummary() + ]); + + this.updateDashboardSubscriptionSummary(summary); + this.renderDashboardSubscriptions(subscriptions); + + // Update the holdings section + this.updateHoldingsSubscriptions(summary); + + } catch (error) { + console.error('Error loading dashboard subscription data:', error); + } + } + + async fetchSubscriptions() { + try { + const response = await fetch(`${this.apiUrl}/subscriptions`, { + credentials: 'include' + }); + return response.ok ? await response.json() : []; + } catch (error) { + console.error('Error fetching subscriptions:', error); + return []; + } + } + + async fetchSubscriptionsSummary() { + try { + const response = await fetch(`${this.apiUrl}/subscriptions-summary`, { + credentials: 'include' + }); + return response.ok ? await response.json() : []; + } catch (error) { + console.error('Error fetching subscriptions summary:', error); + return []; + } + } + + updateDashboardSubscriptionSummary(summary) { + const monthlyTotal = document.getElementById('dashboard-subscription-monthly'); + const annualTotal = document.getElementById('dashboard-subscription-annual'); + const subscriptionCount = document.getElementById('dashboard-subscription-count'); + const nextBilling = document.getElementById('dashboard-next-billing'); + + if (summary.length > 0) { + let totalMonthly = 0; + let totalAnnual = 0; + let totalSubs = 0; + + summary.forEach(s => { + totalMonthly += s.total_monthly_cost || 0; + totalAnnual += s.total_annual_cost || 0; + totalSubs += s.total_subscriptions || 0; + }); + + if (monthlyTotal) monthlyTotal.textContent = `€${totalMonthly.toFixed(2)}`; + if (annualTotal) annualTotal.textContent = `€${totalAnnual.toFixed(2)}`; + if (subscriptionCount) subscriptionCount.textContent = `${totalSubs} subscription${totalSubs !== 1 ? 's' : ''}`; + + // Show subscription breakdown if there are subscriptions + const subscriptionBreakdown = document.getElementById('subscription-breakdown'); + if (subscriptionBreakdown && totalSubs > 0) { + subscriptionBreakdown.style.display = 'block'; + } + } else { + if (monthlyTotal) monthlyTotal.textContent = '€0.00'; + if (annualTotal) annualTotal.textContent = '€0.00'; + if (subscriptionCount) subscriptionCount.textContent = '0 subscriptions'; + if (nextBilling) nextBilling.textContent = 'Next billing: --'; + } + } + + renderDashboardSubscriptions(subscriptions) { + const container = document.getElementById('dashboard-subscriptions-list'); + if (!container) return; + + if (subscriptions.length === 0) { + container.innerHTML = '

    No subscriptions yet

    '; + return; + } + + // Show top 5 subscriptions by monthly cost + const sortedSubscriptions = subscriptions + .map(sub => ({ + ...sub, + monthlyEquivalent: sub.billingCycle === 'monthly' + ? sub.monthlyPrice + : (sub.annualPrice / 12) + })) + .sort((a, b) => b.monthlyEquivalent - a.monthlyEquivalent) + .slice(0, 5); + + let nextBillingDate = null; + let nextBillingService = ''; + + const subscriptionItems = sortedSubscriptions.map(subscription => { + const currency = this.getCurrencySymbol(subscription.currency); + const nextBilling = this.calculateNextBilling(subscription.startDate, subscription.billingCycle); + + // Track the nearest billing date + const billingDateObj = new Date(nextBilling.split('/').reverse().join('-')); + if (!nextBillingDate || billingDateObj < nextBillingDate) { + nextBillingDate = billingDateObj; + nextBillingService = subscription.serviceName; + } + + return ` +
    +
    ${this.escapeHtml(subscription.serviceName)}
    +
    + ${currency}${subscription.monthlyEquivalent.toFixed(2)}/month + ${subscription.billingCycle} + ${subscription.category} +
    +
    + `; + }).join(''); + + container.innerHTML = subscriptionItems; + + // Update next billing information + const nextBillingElement = document.getElementById('dashboard-next-billing'); + if (nextBillingElement && nextBillingDate) { + const billingText = `Next billing: ${nextBillingService} on ${nextBillingDate.toLocaleDateString()}`; + nextBillingElement.textContent = billingText; + } + } + + updateHoldingsSubscriptions(summary) { + const subscriptionsValue = document.getElementById('total-holdings-subscriptions'); + if (!subscriptionsValue) return; + + if (summary.length > 0) { + let totalMonthly = 0; + summary.forEach(s => { + totalMonthly += s.total_monthly_cost || 0; + }); + subscriptionsValue.textContent = `€${totalMonthly.toFixed(2)}`; + } else { + subscriptionsValue.textContent = '€0.00'; + } + } } const app = new ETFTradeTracker(); \ No newline at end of file diff --git a/server.js b/server.js index d24053f..2e58b09 100644 --- a/server.js +++ b/server.js @@ -235,7 +235,7 @@ function initializeDatabase() { FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE ) `; - + db.run(createPriceHistoryTableSQL, (err) => { if (err) { console.error('Error creating price history table:', err.message); @@ -243,6 +243,47 @@ function initializeDatabase() { console.log('Price history table ready'); } }); + + // Create subscriptions table + const createSubscriptionsTableSQL = ` + CREATE TABLE IF NOT EXISTS subscriptions ( + id INTEGER PRIMARY KEY AUTOINCREMENT, + user_id INTEGER NOT NULL, + service_name TEXT NOT NULL, + monthly_price REAL CHECK (monthly_price > 0), + annual_price REAL CHECK (annual_price > 0), + billing_cycle TEXT NOT NULL CHECK (billing_cycle IN ('monthly', 'annual')), + currency TEXT NOT NULL DEFAULT 'EUR' CHECK (currency IN ('EUR', 'USD', 'GBP')), + start_date DATE NOT NULL, + end_date DATE, + free_trial_days INTEGER DEFAULT 0 CHECK (free_trial_days >= 0), + category TEXT DEFAULT 'other', + notes TEXT, + website_url TEXT, + is_active BOOLEAN DEFAULT 1, + created_at DATETIME DEFAULT CURRENT_TIMESTAMP, + updated_at DATETIME DEFAULT CURRENT_TIMESTAMP, + FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE, + CHECK (monthly_price IS NOT NULL OR annual_price IS NOT NULL) + ) + `; + + db.run(createSubscriptionsTableSQL, (err) => { + if (err) { + console.error('Error creating subscriptions table:', err.message); + } else { + console.log('Subscriptions table ready'); + + // Add website_url column if it doesn't exist (for existing databases) + db.run(`ALTER TABLE subscriptions ADD COLUMN website_url TEXT`, (alterErr) => { + if (alterErr && !alterErr.message.includes('duplicate column name')) { + console.error('Error adding website_url column:', alterErr.message); + } else if (!alterErr) { + console.log('Added website_url column to subscriptions table'); + } + }); + } + }); } async function createDefaultAdmin() { @@ -1321,6 +1362,278 @@ app.get('/api/latest-prices', requireAuthOrToken, (req, res) => { }); }); +// Subscriptions Management endpoints +app.get('/api/subscriptions', requireAuthOrToken, (req, res) => { + const sql = ` + SELECT id, service_name, monthly_price, annual_price, billing_cycle, currency, + start_date, end_date, free_trial_days, category, notes, website_url, is_active, + created_at, updated_at + FROM subscriptions + WHERE user_id = ? AND is_active = 1 + ORDER BY service_name ASC + `; + + db.all(sql, [req.session.userId], (err, rows) => { + if (err) { + console.error('Error fetching subscriptions:', err.message); + res.status(500).json({ error: 'Failed to fetch subscriptions' }); + return; + } + + const subscriptions = rows.map(row => ({ + id: row.id, + serviceName: row.service_name, + monthlyPrice: row.monthly_price, + annualPrice: row.annual_price, + billingCycle: row.billing_cycle, + currency: row.currency, + startDate: row.start_date, + endDate: row.end_date, + freeTrialDays: row.free_trial_days, + category: row.category, + notes: row.notes, + website_url: row.website_url, + isActive: row.is_active === 1, + createdAt: row.created_at, + updatedAt: row.updated_at + })); + + res.json(subscriptions); + }); +}); + +app.post('/api/subscriptions', requireAuthOrToken, (req, res) => { + const { + serviceName, + monthlyPrice, + annualPrice, + billingCycle, + currency = 'EUR', + startDate, + endDate, + freeTrialDays = 0, + category = 'other', + notes = '', + websiteUrl = '' + } = req.body; + + if (!serviceName || !billingCycle || !startDate) { + return res.status(400).json({ error: 'Service name, billing cycle, and start date are required' }); + } + + if (!['monthly', 'annual'].includes(billingCycle)) { + return res.status(400).json({ error: 'Billing cycle must be monthly or annual' }); + } + + if (!['EUR', 'USD', 'GBP'].includes(currency)) { + return res.status(400).json({ error: 'Currency must be EUR, USD, or GBP' }); + } + + if (!monthlyPrice && !annualPrice) { + return res.status(400).json({ error: 'Either monthly price or annual price must be provided' }); + } + + if (monthlyPrice && monthlyPrice <= 0) { + return res.status(400).json({ error: 'Monthly price must be greater than 0' }); + } + + if (annualPrice && annualPrice <= 0) { + return res.status(400).json({ error: 'Annual price must be greater than 0' }); + } + + if (freeTrialDays < 0) { + return res.status(400).json({ error: 'Free trial days cannot be negative' }); + } + + const sql = ` + INSERT INTO subscriptions ( + user_id, service_name, monthly_price, annual_price, billing_cycle, currency, + start_date, end_date, free_trial_days, category, notes, website_url + ) + VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?) + `; + + db.run(sql, [ + req.session.userId, + serviceName.trim(), + monthlyPrice || null, + annualPrice || null, + billingCycle, + currency, + startDate, + endDate || null, + freeTrialDays, + category.trim(), + notes.trim(), + websiteUrl ? websiteUrl.trim() : null + ], function(err) { + if (err) { + console.error('Error creating subscription:', err.message); + res.status(500).json({ error: 'Failed to create subscription' }); + return; + } + + res.status(201).json({ + id: this.lastID, + serviceName: serviceName.trim(), + monthlyPrice, + annualPrice, + billingCycle, + currency, + startDate, + endDate, + freeTrialDays, + category: category.trim(), + notes: notes.trim(), + message: 'Subscription created successfully' + }); + }); +}); + +app.put('/api/subscriptions/:id', requireAuthOrToken, (req, res) => { + const subscriptionId = req.params.id; + const { + serviceName, + monthlyPrice, + annualPrice, + billingCycle, + currency, + startDate, + endDate, + freeTrialDays = 0, + category = 'other', + notes = '', + websiteUrl = '' + } = req.body; + + + if (!subscriptionId || isNaN(subscriptionId)) { + return res.status(400).json({ error: 'Invalid subscription ID' }); + } + + if (!serviceName || !billingCycle || !startDate) { + return res.status(400).json({ error: 'Service name, billing cycle, and start date are required' }); + } + + if (!['monthly', 'annual'].includes(billingCycle)) { + return res.status(400).json({ error: 'Billing cycle must be monthly or annual' }); + } + + if (!['EUR', 'USD', 'GBP'].includes(currency)) { + return res.status(400).json({ error: 'Currency must be EUR, USD, or GBP' }); + } + + if (!monthlyPrice && !annualPrice) { + return res.status(400).json({ error: 'Either monthly price or annual price must be provided' }); + } + + const sql = ` + UPDATE subscriptions + SET service_name = ?, monthly_price = ?, annual_price = ?, billing_cycle = ?, + currency = ?, start_date = ?, end_date = ?, free_trial_days = ?, + category = ?, notes = ?, website_url = ?, updated_at = CURRENT_TIMESTAMP + WHERE id = ? AND user_id = ? + `; + + const websiteUrlValue = websiteUrl ? websiteUrl.trim() : null; + + db.run(sql, [ + serviceName.trim(), + monthlyPrice || null, + annualPrice || null, + billingCycle, + currency, + startDate, + endDate || null, + freeTrialDays, + category.trim(), + notes.trim(), + websiteUrlValue, + subscriptionId, + req.session.userId + ], function(err) { + if (err) { + console.error('Error updating subscription:', err.message); + res.status(500).json({ error: 'Failed to update subscription' }); + return; + } + + if (this.changes === 0) { + res.status(404).json({ error: 'Subscription not found' }); + return; + } + + res.json({ message: 'Subscription updated successfully' }); + }); +}); + +app.delete('/api/subscriptions/:id', requireAuthOrToken, (req, res) => { + const subscriptionId = req.params.id; + + if (!subscriptionId || isNaN(subscriptionId)) { + return res.status(400).json({ error: 'Invalid subscription ID' }); + } + + const sql = 'UPDATE subscriptions SET is_active = 0 WHERE id = ? AND user_id = ?'; + + db.run(sql, [subscriptionId, req.session.userId], function(err) { + if (err) { + console.error('Error deleting subscription:', err.message); + res.status(500).json({ error: 'Failed to delete subscription' }); + return; + } + + if (this.changes === 0) { + res.status(404).json({ error: 'Subscription not found' }); + return; + } + + res.json({ message: 'Subscription deleted successfully' }); + }); +}); + +app.get('/api/subscriptions-summary', requireAuthOrToken, (req, res) => { + const sql = ` + SELECT + COUNT(*) as total_subscriptions, + SUM(CASE + WHEN billing_cycle = 'monthly' AND monthly_price IS NOT NULL THEN monthly_price + WHEN billing_cycle = 'annual' AND annual_price IS NOT NULL THEN annual_price / 12 + ELSE 0 + END) as total_monthly_cost, + SUM(CASE + WHEN billing_cycle = 'annual' AND annual_price IS NOT NULL THEN annual_price + WHEN billing_cycle = 'monthly' AND monthly_price IS NOT NULL THEN monthly_price * 12 + ELSE 0 + END) as total_annual_cost, + currency, + COUNT(CASE WHEN billing_cycle = 'monthly' THEN 1 END) as monthly_subscriptions, + COUNT(CASE WHEN billing_cycle = 'annual' THEN 1 END) as annual_subscriptions + FROM subscriptions + WHERE user_id = ? AND is_active = 1 + GROUP BY currency + `; + + db.all(sql, [req.session.userId], (err, rows) => { + if (err) { + console.error('Error fetching subscriptions summary:', err.message); + res.status(500).json({ error: 'Failed to fetch subscriptions summary' }); + return; + } + + const summary = rows.length ? rows : [{ + total_subscriptions: 0, + total_monthly_cost: 0, + total_annual_cost: 0, + currency: 'EUR', + monthly_subscriptions: 0, + annual_subscriptions: 0 + }]; + + res.json(summary); + }); +}); + app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'index.html')); }); diff --git a/styles.css b/styles.css index 9a45d09..d57cef1 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,128 @@ +/* =========================================== + CSS VARIABLES FOR THEME SUPPORT + =========================================== */ + +:root { + /* Light Theme Colors */ + --bg-primary: #f5f5f5; + --bg-secondary: #ffffff; + --bg-tertiary: #f8f9fa; + --bg-sidebar: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + + --text-primary: #333333; + --text-secondary: #666666; + --text-muted: #999999; + --text-inverse: #ffffff; + + --border-light: #dee2e6; + --border-medium: #e1e5e9; + --border-dark: rgba(0, 0, 0, 0.1); + + --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1); + --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1); + --shadow-heavy: 0 2px 10px rgba(0, 0, 0, 0.1); + + --accent-primary: #667eea; + --accent-secondary: #764ba2; + --success: #28a745; + --warning: #6366f1; + --danger: #dc3545; + --info: #17a2b8; + + --input-bg: #ffffff; + --input-border: #e1e5e9; + --input-focus: #667eea; + + --modal-overlay: rgba(0, 0, 0, 0.5); + --sidebar-overlay: rgba(255, 255, 255, 0.1); + /* Additional semantic colors */ + --success-bg: #d4edda; + --success-border: #c3e6cb; + --success-text: #155724; + + --danger-bg: #f8d7da; + --danger-border: #f5c6cb; + --danger-text: #721c24; + + --warning-bg: #e0e7ff; + --warning-border: #c7d2fe; + --warning-text: #4338ca; + --warning-dark: #5b21b6; + --warning-darker: #4c1d95; + + --info-bg: #cce5ff; + --info-text: #004085; + --info-dark: #0056b3; + + --text-muted-dark: #5a6268; + --accent-purple: #6f42c1; + --accent-purple-dark: #5a32a3; + --bg-dark: #2d3748; + --text-light: #e2e8f0; +} + +/* Dark Theme Colors */ +@media (prefers-color-scheme: dark) { + :root { + --bg-primary: #1a1a1a; + --bg-secondary: #2d2d2d; + --bg-tertiary: #3a3a3a; + --bg-sidebar: linear-gradient(135deg, #4a5568 0%, #553c9a 100%); + + --text-primary: #ffffff; + --text-secondary: #b0b0b0; + --text-muted: #808080; + --text-inverse: #1a1a1a; + + --border-light: #404040; + --border-medium: #505050; + --border-dark: rgba(255, 255, 255, 0.1); + + --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3); + --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.3); + --shadow-heavy: 0 2px 10px rgba(0, 0, 0, 0.4); + + --accent-primary: #7c8aed; + --accent-secondary: #8b5fbf; + --success: #34d058; + --warning: #8b5cf6; + --danger: #f85149; + --info: #1f6feb; + + --input-bg: #3a3a3a; + --input-border: #505050; + --input-focus: #7c8aed; + + --modal-overlay: rgba(0, 0, 0, 0.7); + --sidebar-overlay: rgba(255, 255, 255, 0.15); + /* Additional dark theme overrides */ + --success-bg: #1e4d2b; + --success-border: #2d5e37; + --success-text: #66d084; + + --danger-bg: #4d1e1e; + --danger-border: #5e2d2d; + --danger-text: #ff8a8a; + + --warning-bg: #312e81; + --warning-border: #3730a3; + --warning-text: #a5b4fc; + --warning-dark: #8b5cf6; + --warning-darker: #7c3aed; + + --info-bg: #1e2d4d; + --info-border: #2d3d5e; + --info-text: #66b3ff; + --info-dark: #4da6ff; + + --text-muted-dark: #b0b0b0; + --accent-purple: #a855f7; + --accent-purple-dark: #9333ea; + --bg-dark: #1a1a1a; + --text-light: #ffffff; + } +} + * { margin: 0; padding: 0; @@ -7,11 +132,12 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; - color: #333; - background-color: #f5f5f5; + color: var(--text-primary); + background-color: var(--bg-primary); min-height: 100vh; margin: 0; padding: 0; + transition: background-color 0.3s ease, color 0.3s ease; } .app-container { @@ -20,11 +146,11 @@ body { } .sidebar { - width: 260px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; + width: 240px; + background: var(--bg-sidebar); + color: var(--text-inverse); padding: 0; - box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-medium); position: fixed; height: 100vh; overflow-y: auto; @@ -34,8 +160,8 @@ body { .sidebar-header { - padding: 30px 20px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 20px 15px; + border-bottom: 1px solid var(--border-dark); text-align: center; } @@ -52,23 +178,23 @@ body { } .menu-item { - padding: 15px 25px; + padding: 12px 20px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; - gap: 15px; - border-left: 4px solid transparent; + gap: 12px; + border-left: 3px solid transparent; } .menu-item:hover { - background-color: rgba(255, 255, 255, 0.1); - border-left-color: rgba(255, 255, 255, 0.3); + background-color: var(--sidebar-overlay); + border-left-color: var(--border-dark); } .menu-item.active { - background-color: rgba(255, 255, 255, 0.15); - border-left-color: white; + background-color: var(--sidebar-overlay); + border-left-color: var(--text-inverse); font-weight: 600; } @@ -123,21 +249,22 @@ body { .main-content { flex: 1; - margin-left: 260px; + margin-left: 240px; display: flex; flex-direction: column; } .top-header { - background: white; - padding: 20px 30px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + background: var(--bg-secondary); + padding: 12px 20px; + box-shadow: var(--shadow-light); display: flex; align-items: center; - gap: 20px; + gap: 15px; position: sticky; top: 0; z-index: 100; + transition: background-color 0.3s ease; } .sidebar-toggle { @@ -149,25 +276,37 @@ body { padding: 8px; border-radius: 6px; transition: all 0.2s ease; - color: #666; + color: var(--text-secondary); } .sidebar-toggle:hover { - background: #f1f3f4; - color: #333; + background: var(--bg-tertiary); + color: var(--text-primary); } #page-title { margin: 0; - font-size: 1.8rem; + font-size: 1.5rem; font-weight: 600; - color: #333; + color: var(--text-primary); +} + +@media (max-width: 768px) { + #page-title { + font-size: 1.3rem; + } +} + +@media (max-width: 480px) { + #page-title { + font-size: 1.1rem; + } } .content-area { flex: 1; - padding: 30px; + padding: 15px 20px; overflow-y: auto; } @@ -188,23 +327,46 @@ body { @media (max-width: 768px) { .sidebar { transform: translateX(-100%); - width: 280px; + width: 250px; } - + .sidebar.open { transform: translateX(0); } - + .main-content { margin-left: 0; } - + .sidebar-toggle { display: block; } - + .content-area { - padding: 20px; + padding: 10px 15px; + } + + .dashboard-grid { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 10px; + } + + .dashboard-card { + padding: 12px; + } + + .metric-value { + font-size: 1.3rem; + } + + .trade-form-container, + .trade-history-container, + .portfolio-container, + .gains-losses-container, + .login-container, + .admin-container { + padding: 15px; + margin: 0 5px; } } @@ -214,11 +376,11 @@ body { .gains-losses-container, .login-container, .admin-container { - background: white; - padding: 30px; - border-radius: 12px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - max-width: 1000px; + background: var(--bg-secondary); + padding: 20px; + border-radius: 8px; + box-shadow: var(--shadow-light); + max-width: 1200px; margin: 0 auto; } @@ -251,30 +413,37 @@ body { } .login-info { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; - border-left: 4px solid #17a2b8; + border-left: 4px solid var(--info); text-align: left; } .login-info p { margin: 5px 0; - color: #495057; + color: var(--text-secondary); font-size: 0.9rem; } .admin-actions { - margin-bottom: 40px; - padding: 25px; - background: #f8f9fa; - border-radius: 12px; - border-left: 4px solid #667eea; + margin-bottom: 25px; + padding: 20px; + background: var(--bg-tertiary); + border-radius: 8px; + border-left: 3px solid #667eea; +} + +@media (max-width: 480px) { + .admin-actions { + padding: 15px; + margin-bottom: 20px; + } } .admin-actions h3 { margin: 0 0 20px 0; - color: #333; + color: var(--text-primary); font-size: 1.2rem; } @@ -297,7 +466,7 @@ body { } .create-user-btn { - background: linear-gradient(135deg, #28a745 0%, #20c997 100%); + background: linear-gradient(135deg, var(--success) 0%, #20c997 100%); color: white; border: none; padding: 12px 24px; @@ -314,10 +483,10 @@ body { } .users-list-section h3 { - color: #333; + color: var(--text-primary); margin-bottom: 20px; font-size: 1.3rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } @@ -327,15 +496,15 @@ body { } .user-item { - background: #f8f9fa; - border: 1px solid #dee2e6; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); border-radius: 10px; padding: 20px; transition: all 0.2s ease; } .user-item:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-medium); } .user-header { @@ -348,7 +517,7 @@ body { .user-username { font-weight: 700; font-size: 1.1rem; - color: #333; + color: var(--text-primary); } .user-badges { @@ -365,22 +534,22 @@ body { } .admin-badge { - background: #dc3545; + background: var(--danger); color: white; } .user-badge { - background: #6c757d; + background: var(--text-muted); color: white; } .current-badge { - background: #17a2b8; + background: var(--info); color: white; } .delete-user-btn { - background: #dc3545; + background: var(--danger); color: white; border: none; padding: 6px 12px; @@ -391,7 +560,7 @@ body { } .delete-user-btn:hover { - background: #c82333; + background: var(--danger); } .user-info { @@ -399,11 +568,11 @@ body { gap: 20px; flex-wrap: wrap; font-size: 0.9rem; - color: #666; + color: var(--text-secondary); } .user-info span { - background: #e9ecef; + background: var(--bg-tertiary); padding: 4px 8px; border-radius: 4px; } @@ -425,114 +594,174 @@ body { } } -.dashboard-grid { +/* Simplified Dashboard Layout */ +.dashboard-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; - margin-bottom: 30px; + max-width: 1200px; + margin: 0 auto; } -.dashboard-card { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - padding: 20px; +@media (max-width: 768px) { + .dashboard-summary { + grid-template-columns: 1fr 1fr; + gap: 15px; + } +} + +@media (max-width: 480px) { + .dashboard-summary { + grid-template-columns: 1fr; + gap: 12px; + } +} + +/* Summary Card Styles */ +.summary-card { + background: var(--bg-secondary); border-radius: 12px; - border-left: 4px solid #667eea; - transition: transform 0.2s ease, box-shadow 0.2s ease; + padding: 20px; + box-shadow: var(--shadow-light); + border-left: 4px solid var(--accent-primary); + transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; + cursor: pointer; + user-select: none; } -.dashboard-card:hover { - transform: translateY(-2px); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +.summary-card:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-heavy); + background: var(--bg-tertiary); } -.dashboard-card h3 { - margin: 0 0 10px 0; - font-size: 0.9rem; - color: #666; +.summary-card:active { + transform: translateY(-1px); +} + +.summary-header { + margin-bottom: 15px; +} + +.summary-header h3 { + margin: 0; + font-size: 1rem; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } -.metric-value { - font-size: 2rem; +.summary-content { + display: flex; + flex-direction: column; + gap: 5px; +} + +.primary-value { + font-size: 1.8rem; font-weight: 700; - color: #333; - margin-bottom: 5px; + color: var(--text-primary); + line-height: 1.2; } -.metric-change { - font-size: 0.9rem; - color: #28a745; - font-weight: 600; +.primary-value.total { + color: var(--accent-primary); } -.metric-detail { +.secondary-value { font-size: 0.9rem; - color: #666; + color: var(--text-secondary); font-weight: 500; } +/* Card-specific colors */ +.portfolio-summary { + border-left-color: var(--success); +} + +.cash-summary { + border-left-color: var(--info); +} + +.subscriptions-summary { + border-left-color: var(--accent-purple); +} + +.total-summary { + border-left-color: var(--accent-primary); +} + +@media (max-width: 480px) { + .summary-card { + padding: 15px; + } + + .primary-value { + font-size: 1.5rem; + } +} + .dashboard-card.total-value { - border-left-color: #28a745; + border-left-color: var(--success); } .dashboard-card.monthly-investment { - border-left-color: #17a2b8; + border-left-color: var(--info); } .dashboard-card.yearly-investment { - border-left-color: #ffc107; + border-left-color: var(--accent-purple); } .dashboard-card.total-shares { - border-left-color: #dc3545; + border-left-color: var(--danger); } .dashboard-card.cost-basis { - border-left-color: #6f42c1; + border-left-color: var(--accent-purple); } /* Dashboard Performance Indicators */ .dashboard-card.positive { - background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); - border-left-color: #28a745; + background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-border) 100%); + border-left-color: var(--success); } .dashboard-card.negative { - background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); - border-left-color: #dc3545; + background: linear-gradient(135deg, var(--danger-bg) 0%, var(--danger-border) 100%); + border-left-color: var(--danger); } .dashboard-card.neutral { - background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%); - border-left-color: #6c757d; + background: linear-gradient(135deg, var(--border-light) 0%, var(--border-medium) 100%); + border-left-color: var(--text-muted); } .dashboard-card.positive .metric-value, .dashboard-card.positive .metric-change { - color: #155724; + color: var(--success-text); } .dashboard-card.negative .metric-value, .dashboard-card.negative .metric-change { - color: #721c24; + color: var(--danger-text); } .dashboard-card.neutral .metric-value, .dashboard-card.neutral .metric-change { - color: #495057; + color: var(--text-secondary); } /* Subtle indicators for related cards */ .dashboard-card.total-value.positive, .dashboard-card.cost-basis.positive { - border-left-color: #28a745; + border-left-color: var(--success); } .dashboard-card.total-value.negative, .dashboard-card.cost-basis.negative { - border-left-color: #dc3545; + border-left-color: var(--danger); } /* Total Holdings Card Styles */ @@ -541,10 +770,10 @@ body { } .total-holdings-card { - background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); + background: linear-gradient(135deg, var(--info-bg) 0%, #bfdbfe 100%); padding: 25px; border-radius: 15px; - border-left: 4px solid #f39c12; + border-left: 4px solid var(--info); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } @@ -557,12 +786,12 @@ body { .total-holdings-card h3 { margin: 0 0 20px 0; font-size: 1.3rem; - color: #e67e22; + color: var(--info-dark); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; text-align: center; - border-bottom: 2px solid #f39c12; + border-bottom: 2px solid var(--info); padding-bottom: 10px; } @@ -581,19 +810,19 @@ body { .holdings-label { font-size: 14px; - color: #6c757d; + color: var(--text-muted); font-weight: 500; } .holdings-value { font-size: 16px; font-weight: 600; - color: #e67e22; + color: var(--info-dark); } .holdings-divider { height: 2px; - background: linear-gradient(90deg, #f39c12 0%, #e67e22 100%); + background: linear-gradient(90deg, var(--info) 0%, var(--info-dark) 100%); margin: 10px 0; border-radius: 1px; } @@ -612,7 +841,7 @@ body { .holdings-total .holdings-label { font-size: 16px; font-weight: 600; - color: #d35400; + color: var(--info-dark); text-transform: uppercase; letter-spacing: 0.5px; } @@ -620,7 +849,7 @@ body { .holdings-total .holdings-value.total { font-size: 20px; font-weight: 700; - color: #d35400; + color: var(--info-dark); } .etf-breakdown { @@ -628,10 +857,10 @@ body { } .etf-breakdown h3 { - color: #333; + color: var(--text-primary); margin-bottom: 20px; font-size: 1.3rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } @@ -641,16 +870,16 @@ body { } .etf-item { - background: #f8f9fa; - border: 1px solid #dee2e6; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); border-radius: 8px; padding: 15px; transition: all 0.2s ease; } .etf-item:hover { - background: #e9ecef; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + background: var(--bg-tertiary); + box-shadow: var(--shadow-light); } .etf-header { @@ -663,13 +892,13 @@ body { .etf-symbol { font-weight: 700; font-size: 1.1rem; - color: #333; + color: var(--text-primary); } .etf-value { font-weight: 600; font-size: 1rem; - color: #28a745; + color: var(--success); } .etf-details { @@ -677,18 +906,18 @@ body { gap: 20px; flex-wrap: wrap; font-size: 0.9rem; - color: #666; + color: var(--text-secondary); } .etf-details span { - background: #dee2e6; + background: var(--border-light); padding: 2px 8px; border-radius: 4px; } .no-data { text-align: center; - color: #666; + color: var(--text-secondary); font-style: italic; padding: 40px 20px; margin: 0; @@ -699,33 +928,53 @@ body { } .portfolio-overview h3 { - color: #333; + color: var(--text-primary); margin-bottom: 20px; font-size: 1.3rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } .overview-stats { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 15px; +} + +@media (max-width: 768px) { + .overview-stats { + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 10px; + } +} + +@media (max-width: 480px) { + .overview-stats { + grid-template-columns: 1fr 1fr; + gap: 8px; + } } .stat-item { - background: #f8f9fa; - padding: 20px; - border-radius: 8px; - border-left: 4px solid #667eea; + background: var(--bg-tertiary); + padding: 15px; + border-radius: 6px; + border-left: 3px solid #667eea; display: flex; flex-direction: column; align-items: center; text-align: center; } +@media (max-width: 480px) { + .stat-item { + padding: 10px; + } +} + .stat-label { font-size: 0.9rem; - color: #666; + color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; @@ -733,30 +982,36 @@ body { } .stat-value { - font-size: 1.5rem; + font-size: 1.3rem; font-weight: 700; - color: #333; + color: var(--text-primary); +} + +@media (max-width: 480px) { + .stat-value { + font-size: 1.1rem; + } } .portfolio-holdings h3 { - color: #333; + color: var(--text-primary); margin-bottom: 20px; font-size: 1.3rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } .holdings-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 15px; } .holding-card { - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 12px; - padding: 20px; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); + border-radius: 8px; + padding: 15px; transition: all 0.2s ease; } @@ -771,13 +1026,13 @@ body { align-items: center; margin-bottom: 15px; padding-bottom: 10px; - border-bottom: 1px solid #dee2e6; + border-bottom: 1px solid var(--border-light); } .holding-symbol { font-weight: 700; font-size: 1.2rem; - color: #333; + color: var(--text-primary); } .holding-allocation { @@ -803,13 +1058,13 @@ body { } .holding-stat span:first-child { - color: #666; + color: var(--text-secondary); font-size: 0.9rem; } .holding-stat span:last-child { font-weight: 600; - color: #333; + color: var(--text-primary); } /* Gains/Losses Page Styles */ @@ -819,16 +1074,16 @@ body { .performance-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 20px; - margin-bottom: 30px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 15px; + margin-bottom: 20px; } .performance-card { - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - padding: 25px; - border-radius: 12px; - border-left: 4px solid #667eea; + background: var(--bg-tertiary); + padding: 15px; + border-radius: 8px; + border-left: 3px solid #667eea; transition: transform 0.2s ease, box-shadow 0.2s ease; text-align: center; } @@ -839,37 +1094,37 @@ body { } .performance-card.positive { - border-left-color: #28a745; - background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); + border-left-color: var(--success); + background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-border) 100%); } .performance-card.negative { - border-left-color: #dc3545; - background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); + border-left-color: var(--danger); + background: linear-gradient(135deg, var(--danger-bg) 0%, var(--danger-border) 100%); } .performance-card h3 { margin: 0 0 15px 0; font-size: 1rem; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .performance-value { - font-size: 2.2rem; + font-size: 1.8rem; font-weight: 700; - color: #333; - margin-bottom: 8px; + color: var(--text-primary); + margin-bottom: 5px; } .performance-card.positive .performance-value { - color: #155724; + color: var(--success-text); } .performance-card.negative .performance-value { - color: #721c24; + color: var(--danger-text); } .performance-percentage { @@ -878,16 +1133,16 @@ body { } .performance-card.positive .performance-percentage { - color: #155724; + color: var(--success-text); } .performance-card.negative .performance-percentage { - color: #721c24; + color: var(--danger-text); } .performance-detail { font-size: 0.9rem; - color: #666; + color: var(--text-secondary); font-style: italic; } @@ -898,10 +1153,10 @@ body { .price-updates-section h3, .gains-breakdown-section h3 { - color: #333; + color: var(--text-primary); margin-bottom: 20px; font-size: 1.3rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } @@ -930,7 +1185,7 @@ body { } .update-info { - color: #666; + color: var(--text-secondary); font-size: 0.9rem; font-style: italic; } @@ -941,16 +1196,16 @@ body { } .price-update-item { - background: #f8f9fa; - border: 1px solid #dee2e6; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); border-radius: 10px; padding: 20px; transition: all 0.2s ease; } .price-update-item:hover { - background: #e9ecef; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + background: var(--bg-tertiary); + box-shadow: var(--shadow-light); } .price-update-header { @@ -963,11 +1218,11 @@ body { .etf-symbol-update { font-weight: 700; font-size: 1.2rem; - color: #333; + color: var(--text-primary); } .etf-position { - color: #666; + color: var(--text-secondary); font-size: 0.9rem; } @@ -981,13 +1236,13 @@ body { .price-update-controls label { font-size: 0.9rem; - color: #666; + color: var(--text-secondary); font-weight: 600; } .current-price-input { padding: 8px 12px; - border: 2px solid #ddd; + border: 2px solid var(--border-medium); border-radius: 6px; font-size: 1rem; transition: border-color 0.3s ease; @@ -1000,7 +1255,7 @@ body { } .update-price-btn { - background: #28a745; + background: var(--success); color: white; border: none; padding: 8px 16px; @@ -1012,7 +1267,7 @@ body { } .update-price-btn:hover { - background: #218838; + background: var(--success); } .price-info { @@ -1020,7 +1275,7 @@ body { justify-content: space-between; align-items: center; font-size: 0.9rem; - color: #666; + color: var(--text-secondary); } .price-change { @@ -1028,11 +1283,11 @@ body { } .price-change.positive { - color: #28a745; + color: var(--success); } .price-change.negative { - color: #dc3545; + color: var(--danger); } .gains-breakdown-list { @@ -1041,25 +1296,25 @@ body { } .gains-breakdown-item { - background: #f8f9fa; - border: 1px solid #dee2e6; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); border-radius: 10px; padding: 20px; transition: all 0.2s ease; } .gains-breakdown-item:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-medium); } .gains-breakdown-item.positive { - border-left: 4px solid #28a745; - background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); + border-left: 4px solid var(--success); + background: linear-gradient(135deg, var(--success-bg) 0%, var(--success-border) 100%); } .gains-breakdown-item.negative { - border-left: 4px solid #dc3545; - background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); + border-left: 4px solid var(--danger); + background: linear-gradient(135deg, var(--danger-bg) 0%, var(--danger-border) 100%); } .breakdown-header { @@ -1074,7 +1329,7 @@ body { .breakdown-symbol { font-weight: 700; font-size: 1.2rem; - color: #333; + color: var(--text-primary); } .breakdown-performance { @@ -1083,11 +1338,11 @@ body { } .gains-breakdown-item.positive .breakdown-performance { - color: #155724; + color: var(--success-text); } .gains-breakdown-item.negative .breakdown-performance { - color: #721c24; + color: var(--danger-text); } .breakdown-details { @@ -1104,21 +1359,21 @@ body { } .breakdown-stat span:first-child { - color: #666; + color: var(--text-secondary); font-size: 0.9rem; } .breakdown-stat span:last-child { font-weight: 600; - color: #333; + color: var(--text-primary); } .trade-form-section h2, .trades-list-section h2 { - color: #333; + color: var(--text-primary); margin-bottom: 25px; font-size: 1.5rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } @@ -1130,21 +1385,22 @@ body { .form-group { display: flex; flex-direction: column; + margin-bottom: 15px; } .form-group label { margin-bottom: 8px; font-weight: 600; - color: #555; + color: var(--text-secondary); } .form-group input, .form-group select, .form-group textarea { - padding: 12px; - border: 2px solid #ddd; - border-radius: 8px; - font-size: 1rem; + padding: 10px; + border: 1px solid var(--border-medium); + border-radius: 6px; + font-size: 0.95rem; transition: border-color 0.3s ease; } @@ -1201,21 +1457,21 @@ body { } .clear-btn { - background-color: #dc3545; + background-color: var(--danger); color: white; } .clear-btn:hover { - background-color: #c82333; + background-color: var(--danger); } .export-btn { - background-color: #28a745; + background-color: var(--success); color: white; } .export-btn:hover { - background-color: #218838; + background-color: var(--success); } .trades-list { @@ -1225,45 +1481,45 @@ body { .no-trades { text-align: center; - color: #666; + color: var(--text-secondary); font-style: italic; padding: 40px 20px; } .trade-item { - background: #f8f9fa; - border: 1px solid #dee2e6; - border-radius: 8px; - margin-bottom: 15px; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); + border-radius: 6px; + margin-bottom: 10px; overflow: hidden; transition: all 0.2s ease; } .trade-item:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-medium); } .trade-item.buy { - border-left: 4px solid #28a745; + border-left: 4px solid var(--success); } .trade-item.sell { - border-left: 4px solid #dc3545; + border-left: 4px solid var(--danger); } .trade-header { display: flex; justify-content: space-between; align-items: center; - padding: 15px 20px; - background: white; - border-bottom: 1px solid #dee2e6; + padding: 12px 15px; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-light); } .etf-symbol { font-weight: 700; font-size: 1.1rem; - color: #333; + color: var(--text-primary); } .trade-type { @@ -1275,17 +1531,17 @@ body { } .trade-type.buy { - background-color: #d4edda; - color: #155724; + background-color: var(--success-bg); + color: var(--success-text); } .trade-type.sell { - background-color: #f8d7da; - color: #721c24; + background-color: var(--danger-bg); + color: var(--danger-text); } .delete-btn { - background: #dc3545; + background: var(--danger); color: white; border: none; width: 30px; @@ -1298,12 +1554,12 @@ body { } .delete-btn:hover { - background: #c82333; + background: var(--danger); transform: scale(1.1); } .trade-details { - padding: 15px 20px; + padding: 12px 15px; } .trade-info { @@ -1314,17 +1570,17 @@ body { } .trade-info span { - background: #e9ecef; + background: var(--bg-tertiary); padding: 4px 8px; border-radius: 4px; font-size: 0.9rem; - color: #495057; + color: var(--text-secondary); } .total-value { font-weight: 600; - color: #333 !important; - background: #fff3cd !important; + color: var(--text-primary) !important; + background: var(--warning-bg) !important; } .trade-datetime { @@ -1332,16 +1588,16 @@ body { gap: 15px; margin-bottom: 10px; font-size: 0.9rem; - color: #666; + color: var(--text-secondary); } .trade-notes { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 10px; border-radius: 4px; font-size: 0.9rem; - color: #495057; - border-left: 3px solid #dee2e6; + color: var(--text-secondary); + border-left: 3px solid var(--border-light); margin-top: 10px; } @@ -1366,63 +1622,108 @@ body { } .notification.success { - background-color: #28a745; + background-color: var(--success); } .notification.error { - background-color: #dc3545; + background-color: var(--danger); } .notification.info { - background-color: #17a2b8; + background-color: var(--info); +} + +/* Medium screens - tablet landscape */ +@media (max-width: 1024px) { + .dashboard-grid { + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + } + + .performance-grid { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + } + + .holdings-grid { + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + } } @media (max-width: 480px) { .container { - padding: 10px; + padding: 5px; } - + + .content-area { + padding: 8px 10px; + } + .trade-form-section, .trades-list-section { - padding: 20px; + padding: 15px; } - + + .dashboard-grid { + grid-template-columns: 1fr 1fr; + gap: 8px; + } + + .dashboard-card { + padding: 10px; + } + + .metric-value { + font-size: 1.1rem; + } + .trade-info { + flex-direction: column; + gap: 5px; + } + + .trades-controls { flex-direction: column; gap: 8px; } - - .trades-controls { - flex-direction: column; - } - + .notification { - left: 10px; - right: 10px; + left: 5px; + right: 5px; max-width: none; } - + .cgt-rates-grid { grid-template-columns: 1fr; - gap: 15px; + gap: 10px; } - + .cgt-grid { grid-template-columns: 1fr; } - - .cgt-preview-chart { - flex-direction: column; - height: auto; + + .trade-form-container, + .trade-history-container, + .portfolio-container, + .gains-losses-container, + .login-container, + .admin-container { + padding: 12px; + margin: 0; + } + + .subscription-summary-cards, + .cash-summary-cards { + grid-template-columns: 1fr; gap: 10px; } - - .rate-bar { - width: 100%; - height: 40px; - flex-direction: row; - justify-content: space-between; - align-items: center; + + .performance-grid { + grid-template-columns: 1fr; + gap: 10px; + } + + .holdings-grid { + grid-template-columns: 1fr; + gap: 10px; } } @@ -1434,23 +1735,23 @@ body { } .cgt-explanation { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 15px; border-radius: 8px; margin-bottom: 25px; - border-left: 4px solid #007bff; + border-left: 4px solid var(--info); } .cgt-explanation p { margin: 0; - color: #666; + color: var(--text-secondary); } .cgt-settings-form { - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); margin-bottom: 25px; } @@ -1469,13 +1770,13 @@ body { .cgt-rate-item label { font-weight: 600; margin-bottom: 8px; - color: #333; + color: var(--text-primary); font-size: 14px; } .cgt-rate-input { padding: 12px; - border: 2px solid #e1e5e9; + border: 2px solid var(--border-medium); border-radius: 6px; font-size: 16px; transition: border-color 0.2s; @@ -1483,18 +1784,18 @@ body { .cgt-rate-input:focus { outline: none; - border-color: #007bff; + border-color: var(--info); } .cgt-options { - border-top: 1px solid #e9ecef; + border-top: 1px solid var(--bg-tertiary); padding-top: 25px; margin-top: 25px; } .cgt-options h3 { margin-bottom: 15px; - color: #333; + color: var(--text-primary); } .cgt-options .form-group { @@ -1505,21 +1806,21 @@ body { display: block; font-weight: 600; margin-bottom: 8px; - color: #333; + color: var(--text-primary); } .cgt-options input[type="number"] { width: 100%; max-width: 250px; padding: 12px; - border: 2px solid #e1e5e9; + border: 2px solid var(--border-medium); border-radius: 6px; font-size: 16px; } .cgt-options small { display: block; - color: #666; + color: var(--text-secondary); font-size: 12px; margin-top: 5px; } @@ -1540,12 +1841,12 @@ body { display: flex; gap: 15px; margin-top: 25px; - border-top: 1px solid #e9ecef; + border-top: 1px solid var(--bg-tertiary); padding-top: 25px; } .save-cgt-btn { - background: #28a745; + background: var(--success); color: white; border: none; padding: 12px 24px; @@ -1556,11 +1857,11 @@ body { } .save-cgt-btn:hover { - background: #218838; + background: var(--success); } .reset-cgt-btn { - background: #6c757d; + background: var(--text-muted); color: white; border: none; padding: 12px 24px; @@ -1571,19 +1872,19 @@ body { } .reset-cgt-btn:hover { - background: #5a6268; + background: var(--text-muted-dark); } .cgt-preview { - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); } .cgt-preview h3 { margin-bottom: 20px; - color: #333; + color: var(--text-primary); } .cgt-preview-chart { @@ -1592,7 +1893,7 @@ body { align-items: flex-end; height: 120px; padding: 20px; - background: #f8f9fa; + background: var(--bg-tertiary); border-radius: 8px; gap: 15px; } @@ -1604,7 +1905,7 @@ body { flex: 1; height: 100%; position: relative; - background: linear-gradient(135deg, #007bff, #0056b3); + background: linear-gradient(135deg, var(--info), var(--info-dark)); border-radius: 4px; justify-content: flex-end; padding: 8px 4px; @@ -1619,7 +1920,7 @@ body { position: absolute; bottom: -25px; font-size: 11px; - color: #666; + color: var(--text-secondary); font-weight: 600; } @@ -1631,16 +1932,16 @@ body { /* CGT Summary Styles */ .cgt-summary { margin-top: 30px; - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - border-left: 4px solid #ffc107; + box-shadow: var(--shadow-heavy); + border-left: 4px solid var(--accent-purple); } .cgt-summary h3 { margin-bottom: 20px; - color: #333; + color: var(--text-primary); display: flex; align-items: center; gap: 8px; @@ -1658,26 +1959,26 @@ body { } .cgt-card { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; - border-left: 4px solid #dee2e6; + border-left: 4px solid var(--border-light); transition: all 0.2s; } .cgt-card.positive { - border-left-color: #28a745; - background: #f8fff9; + border-left-color: var(--success); + background: var(--success-bg); } .cgt-card.negative { - border-left-color: #dc3545; - background: #fffafa; + border-left-color: var(--danger); + background: var(--danger-bg); } .cgt-card h4 { margin-bottom: 12px; - color: #666; + color: var(--text-secondary); font-size: 14px; font-weight: 600; text-transform: uppercase; @@ -1688,20 +1989,20 @@ body { font-size: 24px; font-weight: bold; margin-bottom: 8px; - color: #333; + color: var(--text-primary); } .cgt-card.positive .cgt-value { - color: #28a745; + color: var(--success); } .cgt-card.negative .cgt-value { - color: #dc3545; + color: var(--danger); } .cgt-detail { font-size: 12px; - color: #666; + color: var(--text-secondary); } .holding-periods { @@ -1715,7 +2016,7 @@ body { justify-content: space-between; align-items: center; padding: 8px 0; - border-bottom: 1px solid #e9ecef; + border-bottom: 1px solid var(--bg-tertiary); } .period-item:last-child { @@ -1724,29 +2025,29 @@ body { .period-label { font-size: 12px; - color: #666; + color: var(--text-secondary); font-weight: 500; } .period-value { font-size: 14px; font-weight: 600; - color: #333; + color: var(--text-primary); } /* Long-Term CGT Section (8+ Years) */ .long-term-cgt-section { margin-top: 30px; - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - border-left: 4px solid #17a2b8; + box-shadow: var(--shadow-heavy); + border-left: 4px solid var(--info); } .long-term-cgt-section h3 { margin-bottom: 20px; - color: #333; + color: var(--text-primary); display: flex; align-items: center; gap: 8px; @@ -1765,35 +2066,35 @@ body { } .long-term-cgt-card { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; - border-left: 4px solid #17a2b8; + border-left: 4px solid var(--info); transition: all 0.2s; } .long-term-cgt-card.total-eligible { - border-left-color: #6c757d; + border-left-color: var(--text-muted); } .long-term-cgt-card.total-gains-8yr { - border-left-color: #28a745; - background: #f8fff9; + border-left-color: var(--success); + background: var(--success-bg); } .long-term-cgt-card.cgt-liability-8yr { - border-left-color: #dc3545; - background: #fffafa; + border-left-color: var(--danger); + background: var(--danger-bg); } .long-term-cgt-card.after-tax-8yr { - border-left-color: #007bff; - background: #f8f9ff; + border-left-color: var(--info); + background: var(--info-bg); } .long-term-cgt-card h4 { margin-bottom: 12px; - color: #666; + color: var(--text-secondary); font-size: 14px; font-weight: 600; text-transform: uppercase; @@ -1804,26 +2105,26 @@ body { font-size: 24px; font-weight: bold; margin-bottom: 8px; - color: #28a745; + color: var(--success); } .long-term-value.negative { - color: #dc3545; + color: var(--danger); } .long-term-detail { font-size: 12px; - color: #666; + color: var(--text-secondary); } .long-term-breakdown { - border-top: 1px solid #e9ecef; + border-top: 1px solid var(--bg-tertiary); padding-top: 20px; } .long-term-breakdown h4 { margin-bottom: 15px; - color: #333; + color: var(--text-primary); font-size: 16px; } @@ -1834,15 +2135,15 @@ body { } .long-term-breakdown-item { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 15px; border-radius: 8px; - border-left: 4px solid #17a2b8; + border-left: 4px solid var(--info); } .long-term-breakdown-item.positive { - border-left-color: #28a745; - background: #f8fff9; + border-left-color: var(--success); + background: var(--success-bg); } .long-term-breakdown-header { @@ -1855,16 +2156,16 @@ body { .long-term-symbol { font-weight: bold; font-size: 16px; - color: #333; + color: var(--text-primary); } .long-term-performance { font-weight: bold; - color: #28a745; + color: var(--success); } .long-term-performance.negative { - color: #dc3545; + color: var(--danger); } .long-term-details { @@ -1880,12 +2181,12 @@ body { } .long-term-stat span:first-child { - color: #666; + color: var(--text-secondary); } .long-term-stat span:last-child { font-weight: 600; - color: #333; + color: var(--text-primary); } /* =========================================== @@ -1898,25 +2199,25 @@ body { } .tokens-intro { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; margin-bottom: 30px; - border-left: 4px solid #007bff; + border-left: 4px solid var(--info); } .tokens-intro p { margin: 0; - color: #555; + color: var(--text-secondary); font-size: 0.95em; line-height: 1.5; } .token-actions { - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); margin-bottom: 30px; } @@ -1934,14 +2235,14 @@ body { display: block; margin-bottom: 8px; font-weight: 500; - color: #333; + color: var(--text-primary); } .create-token-form input, .create-token-form select { width: 100%; padding: 10px; - border: 2px solid #e1e5e9; + border: 2px solid var(--border-medium); border-radius: 6px; font-size: 14px; transition: border-color 0.2s; @@ -1950,11 +2251,11 @@ body { .create-token-form input:focus, .create-token-form select:focus { outline: none; - border-color: #007bff; + border-color: var(--info); } .create-token-btn { - background: #007bff; + background: var(--info); color: white; padding: 12px 24px; border: none; @@ -1966,14 +2267,14 @@ body { } .create-token-btn:hover { - background: #0056b3; + background: var(--info-dark); } .tokens-list-section { - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); } .tokens-list { @@ -1983,10 +2284,10 @@ body { } .token-item { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; - border-left: 4px solid #28a745; + border-left: 4px solid var(--success); display: flex; justify-content: space-between; align-items: flex-start; @@ -1998,7 +2299,7 @@ body { .token-name { font-weight: 600; - color: #333; + color: var(--text-primary); margin-bottom: 8px; font-size: 16px; } @@ -2008,7 +2309,7 @@ body { flex-wrap: wrap; gap: 15px; font-size: 13px; - color: #666; + color: var(--text-secondary); } .token-detail { @@ -2019,7 +2320,7 @@ body { .token-prefix { font-family: 'Courier New', monospace; - background: #e9ecef; + background: var(--bg-tertiary); padding: 2px 6px; border-radius: 3px; font-size: 12px; @@ -2034,13 +2335,13 @@ body { } .token-status.active { - background: #d4edda; - color: #155724; + background: var(--success-bg); + color: var(--success-text); } .token-status.expired { - background: #f8d7da; - color: #721c24; + background: var(--danger-bg); + color: var(--danger-text); } .token-actions-buttons { @@ -2059,21 +2360,21 @@ body { } .token-edit-btn { - background: #ffc107; - color: #212529; + background: var(--accent-purple); + color: white; } .token-edit-btn:hover { - background: #e0a800; + background: var(--accent-purple-dark); } .token-delete-btn { - background: #dc3545; + background: var(--danger); color: white; } .token-delete-btn:hover { - background: #c82333; + background: var(--danger); } /* Modal Styles */ @@ -2091,7 +2392,7 @@ body { } .modal-content { - background: white; + background: var(--bg-secondary); padding: 30px; border-radius: 12px; max-width: 600px; @@ -2108,15 +2409,15 @@ body { .token-display input { flex: 1; padding: 10px; - border: 2px solid #28a745; + border: 2px solid var(--success); border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; - background: #f8f9fa; + background: var(--bg-tertiary); } .copy-btn { - background: #28a745; + background: var(--success); color: white; padding: 10px 20px; border: none; @@ -2127,15 +2428,15 @@ body { } .copy-btn:hover { - background: #218838; + background: var(--success); } .copy-btn.copied { - background: #17a2b8; + background: var(--info); } .token-usage { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 15px; border-radius: 6px; margin: 20px 0; @@ -2143,8 +2444,8 @@ body { .usage-example { display: block; - background: #2d3748; - color: #e2e8f0; + background: var(--bg-dark); + color: var(--text-light); padding: 15px; border-radius: 6px; font-family: 'Courier New', monospace; @@ -2156,7 +2457,7 @@ body { } .close-modal-btn { - background: #6c757d; + background: var(--text-muted); color: white; padding: 12px 24px; border: none; @@ -2169,7 +2470,7 @@ body { } .close-modal-btn:hover { - background: #5a6268; + background: var(--text-muted-dark); } /* Responsive Design */ @@ -2205,38 +2506,38 @@ body { } .cash-intro { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; margin-bottom: 30px; - border-left: 4px solid #28a745; + border-left: 4px solid var(--success); } .cash-intro p { margin: 0; - color: #555; + color: var(--text-secondary); font-size: 0.95em; line-height: 1.5; } .cash-summary-cards { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; - margin-bottom: 30px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + margin-bottom: 20px; } .cash-summary-card { - background: white; - padding: 20px; - border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - border-left: 4px solid #28a745; + background: var(--bg-secondary); + padding: 15px; + border-radius: 8px; + box-shadow: var(--shadow-light); + border-left: 3px solid var(--success); } .cash-summary-card h3 { margin: 0 0 15px 0; - color: #333; + color: var(--text-primary); font-size: 16px; } @@ -2254,29 +2555,29 @@ body { .amount-line .currency { font-weight: 500; - color: #666; + color: var(--text-secondary); } .amount-line .amount { font-weight: 600; font-size: 18px; - color: #28a745; + color: var(--success); } .stat-line span:first-child { - color: #666; + color: var(--text-secondary); } .stat-line span:last-child { font-weight: 600; - color: #333; + color: var(--text-primary); } .cash-actions { - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); margin-bottom: 30px; } @@ -2287,7 +2588,7 @@ body { .create-account-form textarea { width: 100%; padding: 10px; - border: 2px solid #e1e5e9; + border: 2px solid var(--border-medium); border-radius: 6px; font-size: 14px; font-family: inherit; @@ -2297,11 +2598,11 @@ body { .create-account-form textarea:focus { outline: none; - border-color: #28a745; + border-color: var(--success); } .create-account-btn { - background: #28a745; + background: var(--success); color: white; padding: 12px 24px; border: none; @@ -2313,14 +2614,14 @@ body { } .create-account-btn:hover { - background: #218838; + background: var(--success); } .accounts-list-section { - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); } .accounts-list { @@ -2330,10 +2631,10 @@ body { } .account-item { - background: #f8f9fa; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; - border-left: 4px solid #28a745; + border-left: 4px solid var(--success); display: flex; justify-content: space-between; align-items: flex-start; @@ -2345,15 +2646,15 @@ body { .account-name { font-weight: 600; - color: #333; + color: var(--text-primary); margin-bottom: 8px; font-size: 16px; } .account-type-badge { display: inline-block; - background: #e9ecef; - color: #495057; + background: var(--bg-tertiary); + color: var(--text-secondary); padding: 2px 8px; border-radius: 12px; font-size: 12px; @@ -2367,7 +2668,7 @@ body { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; font-size: 13px; - color: #666; + color: var(--text-secondary); } .account-detail { @@ -2377,14 +2678,14 @@ body { .account-detail-label { font-weight: 500; - color: #495057; + color: var(--text-secondary); margin-bottom: 2px; } .account-balance { font-weight: 600; font-size: 18px; - color: #28a745; + color: var(--success); } .account-actions-buttons { @@ -2403,21 +2704,21 @@ body { } .account-edit-btn { - background: #ffc107; - color: #212529; + background: var(--accent-purple); + color: white; } .account-edit-btn:hover { - background: #e0a800; + background: var(--accent-purple-dark); } .account-delete-btn { - background: #dc3545; + background: var(--danger); color: white; } .account-delete-btn:hover { - background: #c82333; + background: var(--danger); } /* Modal buttons */ @@ -2428,7 +2729,7 @@ body { } .cancel-btn { - background: #6c757d; + background: var(--text-muted); color: white; padding: 10px 20px; border: none; @@ -2439,11 +2740,11 @@ body { } .cancel-btn:hover { - background: #5a6268; + background: var(--text-muted-dark); } .save-btn { - background: #28a745; + background: var(--success); color: white; padding: 10px 20px; border: none; @@ -2455,16 +2756,16 @@ body { } .save-btn:hover { - background: #218838; + background: var(--success); } /* Transfers Section Styles */ .transfers-section { margin-top: 40px; - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); } .section-header { @@ -2473,12 +2774,12 @@ body { align-items: center; margin-bottom: 20px; padding-bottom: 15px; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); } .section-header h3 { margin: 0; - color: #333; + color: var(--text-primary); font-size: 1.2rem; } @@ -2493,14 +2794,14 @@ body { align-items: center; padding: 15px; margin-bottom: 10px; - background: #f8f9fa; - border: 1px solid #dee2e6; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); border-radius: 8px; transition: box-shadow 0.2s; } .transfer-item:hover { - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: var(--shadow-medium); } .transfer-item:last-child { @@ -2522,7 +2823,7 @@ body { .transfer-account { font-weight: 500; - color: #333; + color: var(--text-primary); font-size: 14px; } @@ -2535,13 +2836,13 @@ body { } .transfer-type.deposit { - background: #d4edda; - color: #155724; + background: var(--success-bg); + color: var(--success-text); } .transfer-type.withdrawal { - background: #f8d7da; - color: #721c24; + background: var(--danger-bg); + color: var(--danger-text); } .transfer-details { @@ -2552,12 +2853,12 @@ body { .transfer-date { font-size: 12px; - color: #666; + color: var(--text-secondary); } .transfer-description { font-size: 12px; - color: #888; + color: var(--text-muted); font-style: italic; } @@ -2569,11 +2870,11 @@ body { } .transfer-amount.deposit { - color: #28a745; + color: var(--success); } .transfer-amount.withdrawal { - color: #dc3545; + color: var(--danger); } .transfer-amount.deposit::before { @@ -2592,48 +2893,48 @@ body { } .transfer-intro { - background: #e8f4fd; + background: var(--bg-tertiary); padding: 20px; border-radius: 8px; margin-bottom: 30px; - border-left: 4px solid #007bff; + border-left: 4px solid var(--info); } .transfer-intro p { margin: 0; - color: #555; + color: var(--text-secondary); font-size: 0.95em; line-height: 1.5; } .transfer-form { - background: white; + background: var(--bg-secondary); padding: 30px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); margin-bottom: 30px; } .transfer-form h2 { margin: 0 0 20px 0; - color: #333; + color: var(--text-primary); font-size: 1.5rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 15px; } .recent-transfers { - background: white; + background: var(--bg-secondary); padding: 25px; border-radius: 12px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-heavy); } .recent-transfers h3 { margin: 0 0 20px 0; - color: #333; + color: var(--text-primary); font-size: 1.2rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } @@ -2666,16 +2967,16 @@ body { } .cash-breakdown h3 { - color: #333; + color: var(--text-primary); margin-bottom: 20px; font-size: 1.3rem; - border-bottom: 2px solid #eee; + border-bottom: 2px solid var(--border-light); padding-bottom: 10px; } .cash-summary-overview { - background: #f8f9fa; - border: 1px solid #dee2e6; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); border-radius: 8px; padding: 20px; margin-bottom: 15px; @@ -2697,7 +2998,7 @@ body { } .currency-label { - color: #666; + color: var(--text-secondary); font-weight: 500; font-size: 14px; min-width: 35px; @@ -2705,7 +3006,7 @@ body { .cash-amount-line .amount { font-weight: 600; - color: #28a745; + color: var(--success); font-size: 16px; } @@ -2717,14 +3018,14 @@ body { } .stat-detail { - color: #666; + color: var(--text-secondary); font-size: 13px; } .cash-account-breakdown-item { - background: #f8f9fa; - border: 1px solid #dee2e6; + background: var(--bg-tertiary); + border: 1px solid var(--border-light); border-radius: 8px; padding: 15px; display: flex; @@ -2734,7 +3035,7 @@ body { } .cash-account-breakdown-item:hover { - box-shadow: 0 2px 8px rgba(0,0,0,0.1); + box-shadow: var(--shadow-medium); } .cash-account-info { @@ -2744,19 +3045,19 @@ body { .cash-account-name { font-weight: 500; - color: #333; + color: var(--text-primary); font-size: 14px; margin-bottom: 2px; } .cash-account-type { font-size: 12px; - color: #666; + color: var(--text-secondary); } .cash-account-balance { font-weight: 600; - color: #28a745; + color: var(--success); font-size: 14px; } @@ -2779,9 +3080,452 @@ body { } } +/* =========================================== + SUBSCRIPTION STYLES + =========================================== */ + +/* Subscription Page Layout */ +.subscriptions-container { + padding: 20px; + max-width: 1200px; + margin: 0 auto; +} + +@media (max-width: 768px) { + .subscriptions-container { + padding: 15px; + } +} + +@media (max-width: 480px) { + .subscriptions-container { + padding: 10px; + } +} + +.subscription-intro { + margin-bottom: 25px; + color: var(--text-secondary); + font-size: 15px; + line-height: 1.5; +} + +/* Subscription Summary Cards */ +.subscription-summary-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + margin-bottom: 20px; +} + +.subscription-summary-card { + background: var(--bg-secondary); + padding: 15px; + border-radius: 8px; + box-shadow: var(--shadow-light); + border-left: 3px solid var(--accent-purple); +} + +.subscription-summary-card.total-monthly { + border-left-color: var(--success); +} + +.subscription-summary-card.total-annual { + border-left-color: var(--info); +} + +.subscription-summary-card.active-count { + border-left-color: var(--accent-purple); +} + +.subscription-summary-card h3 { + margin: 0 0 15px 0; + color: var(--text-primary); + font-size: 16px; + font-weight: 600; +} + +.subscription-amounts { + display: flex; + flex-direction: column; + gap: 8px; +} + +.subscription-amounts .amount-line { + display: flex; + justify-content: space-between; + align-items: center; +} + +.subscription-amounts .amount { + font-size: 20px; + font-weight: 700; + color: var(--text-primary); +} + +/* Subscription Controls */ +.subscriptions-controls { + display: flex; + gap: 15px; + margin-bottom: 30px; + flex-wrap: wrap; +} + +.add-subscription-btn, .export-btn { + padding: 12px 20px; + border: none; + border-radius: 8px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; + font-size: 14px; +} + +.add-subscription-btn { + background: var(--success); + color: white; +} + +.add-subscription-btn:hover { + background: var(--success); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); +} + +.export-btn { + background: var(--info); + color: white; +} + +.export-btn:hover { + background: var(--info-dark); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); +} + +/* Subscription List */ +.subscriptions-list-section h3 { + margin-bottom: 20px; + color: var(--text-primary); + font-size: 18px; + font-weight: 600; +} + +.subscriptions-list { + display: flex; + flex-direction: column; + gap: 15px; +} + +/* Subscription Items */ +.subscription-item { + background: var(--bg-tertiary); + border: 1px solid var(--border-light); + border-radius: 8px; + overflow: hidden; + transition: all 0.2s ease; +} + +.subscription-item:hover { + box-shadow: var(--shadow-medium); +} + +.subscription-item.monthly { + border-left: 4px solid var(--success); +} + +.subscription-item.annual { + border-left: 4px solid var(--info); +} + +.subscription-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-light); +} + +.subscription-header-right { + display: flex; + align-items: center; + gap: 15px; +} + +.subscription-header-right .price { + font-weight: 600; + font-size: 1rem; + color: var(--accent-primary); +} + +.service-name { + font-weight: 700; + font-size: 1.1rem; + color: var(--text-primary); +} + +.website-link { + margin-left: 8px; + color: var(--accent-primary); + text-decoration: none; + font-size: 1rem; + opacity: 0.7; + transition: all 0.2s ease; +} + +.website-link:hover { + opacity: 1; + color: var(--accent-secondary); + transform: scale(1.1); +} + +.billing-cycle-badge { + padding: 4px 8px; + border-radius: 4px; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.billing-cycle-badge.monthly { + background: var(--success-bg); + color: var(--success-text); +} + +.billing-cycle-badge.annual { + background: var(--info-bg); + color: var(--info-text); +} + +.subscription-actions { + display: flex; + gap: 8px; + align-items: center; +} + +.edit-btn { + background: var(--accent-purple); + color: white; + border: none; + padding: 6px 12px; + border-radius: 4px; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + transition: background 0.2s ease; +} + +.edit-btn:hover { + background: var(--accent-purple-dark); +} + +.subscription-details { + padding: 15px 20px; +} + +.subscription-info { + display: flex; + flex-wrap: wrap; + gap: 15px; + margin-bottom: 10px; +} + +.subscription-info span { + font-size: 0.9rem; +} + +.price { + font-weight: 700; + color: var(--success); + font-size: 1rem; +} + +.annual-price { + color: var(--info); + font-weight: 600; +} + +.category { + background: var(--bg-tertiary); + padding: 2px 8px; + border-radius: 12px; + font-size: 0.8rem; + color: var(--text-secondary); + text-transform: capitalize; +} + +.free-trial { + background: var(--warning-bg); + color: var(--warning-text); + padding: 2px 8px; + border-radius: 12px; + font-size: 0.8rem; +} + +.subscription-dates { + display: flex; + flex-wrap: wrap; + gap: 15px; + font-size: 0.85rem; + color: var(--text-secondary); +} + +.subscription-notes { + margin-top: 10px; + padding: 10px; + background: var(--bg-tertiary); + border-radius: 4px; + font-size: 0.9rem; + color: var(--text-secondary); + font-style: italic; +} + +/* Dashboard Subscription Section */ +.subscription-breakdown { + background: var(--bg-secondary); + border-radius: 12px; + padding: 25px; + box-shadow: var(--shadow-heavy); + margin-bottom: 25px; +} + +.subscription-breakdown h3 { + margin: 0 0 20px 0; + color: var(--text-primary); + font-size: 18px; + font-weight: 600; + display: flex; + justify-content: space-between; + align-items: center; +} + +.section-link { + font-size: 14px; + color: var(--accent-purple); + cursor: pointer; + font-weight: 500; + transition: color 0.2s ease; +} + +.section-link:hover { + color: var(--accent-purple-dark); +} + +.subscription-summary-overview { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 20px; + margin-bottom: 20px; +} + +.subscription-total-card { + display: flex; + flex-direction: column; + gap: 8px; +} + +.subscription-amount-line { + display: flex; + align-items: center; + gap: 10px; +} + +.subscription-label { + color: var(--text-secondary); + font-weight: 500; + font-size: 14px; + min-width: 100px; +} + +.subscription-stats-card { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 4px; +} + +.subscription-breakdown-item { + background: var(--bg-tertiary); + border: 1px solid var(--border-light); + border-radius: 8px; + padding: 15px; + display: flex; + justify-content: space-between; + align-items: center; + transition: box-shadow 0.2s; + margin-bottom: 8px; +} + +.subscription-breakdown-item:hover { + box-shadow: var(--shadow-medium); +} + +.subscription-breakdown-item:last-child { + margin-bottom: 0; +} + +.subscription-name { + font-weight: 500; + color: var(--text-primary); + font-size: 14px; + margin-bottom: 2px; +} + +.subscription-details { + display: flex; + gap: 8px; + font-size: 12px; + color: var(--text-secondary); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .subscription-summary-cards { + grid-template-columns: 1fr; + } + + .subscription-summary-overview { + grid-template-columns: 1fr; + gap: 15px; + } + + .subscription-stats-card { + align-items: flex-start; + } + + .subscription-breakdown-item { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + .subscription-header { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .subscription-actions { + align-self: stretch; + justify-content: flex-end; + } + + .subscription-info { + flex-direction: column; + gap: 8px; + } + + .subscription-dates { + flex-direction: column; + gap: 4px; + } +} + /* Price History Styles */ .view-history-btn { - background: #007bff; + background: var(--info); color: white; border: none; padding: 8px 12px; @@ -2793,13 +3537,13 @@ body { } .view-history-btn:hover { - background: #0056b3; + background: var(--info-dark); } .price-history-list { max-height: 400px; overflow-y: auto; - border: 1px solid #ddd; + border: 1px solid var(--border-medium); border-radius: 8px; padding: 16px; } @@ -2809,7 +3553,7 @@ body { justify-content: space-between; align-items: center; padding: 12px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--border-light); transition: background-color 0.2s; } @@ -2818,17 +3562,17 @@ body { } .price-history-entry:hover { - background-color: #f8f9fa; + background-color: var(--bg-tertiary); } .history-price { font-weight: 600; font-size: 1.1em; - color: #007bff; + color: var(--info); } .history-date { - color: #666; + color: var(--text-secondary); font-size: 0.9em; } @@ -2837,26 +3581,26 @@ body { justify-content: space-between; align-items: center; margin-bottom: 20px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--border-light); padding-bottom: 16px; } .modal-header h3 { margin: 0; - color: #333; + color: var(--text-primary); font-size: 1.4em; } .close-modal { font-size: 28px; font-weight: bold; - color: #aaa; + color: var(--text-muted); cursor: pointer; line-height: 1; } .close-modal:hover { - color: #333; + color: var(--text-primary); } @media (max-width: 768px) {