diff --git a/Projects/Home Renovation Budget Planner/README.md b/Projects/Home Renovation Budget Planner/README.md
new file mode 100644
index 00000000..26eb1015
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/README.md
@@ -0,0 +1,29 @@
+# 🏗️ Home Renovation Budget Planner
+
+A responsive Home Renovation Budget Planner that helps homeowners, property investors, and interior designers plan renovation budgets and monitor project expenses.
+
+## Features
+
+- **Dashboard Overview**: See your Total Budget, Total Spent, and Remaining balance at a glance.
+- **Budget Utilization Bar**: A visual progress bar that turns warning yellow at 80% capacity, and danger red when exceeding 100%.
+- **Category Breakdown**: View exactly how much you're spending on categories like Interior Design, Painting, Flooring, Plumbing, etc.
+- **Expense History**: Keep track of every single expense with its description, amount, and date.
+- **Data Persistence**: Automatically saves all your data, budget, and project name in `LocalStorage` so you won't lose your work on refresh.
+- **Theme Support**: Includes both Light and Dark mode options.
+- **Navigation**: Switch cleanly between the visual Dashboard and the tabular Expenses views.
+
+## How to Run
+
+1. Clone the repository.
+2. Navigate to `Projects/home-renovation-budget-planner/`.
+3. Open `index.html` in your web browser.
+
+## Technologies Used
+
+- HTML5 (Semantic Structure)
+- CSS3 (Variables, Grid, Flexbox, Responsive Design)
+- Vanilla JavaScript (LocalStorage API, DOM manipulation, Expense Logic)
+
+## Author
+
+- [MistryVishwa](https://github.com/MistryVishwa)
diff --git a/Projects/Home Renovation Budget Planner/index.html b/Projects/Home Renovation Budget Planner/index.html
new file mode 100644
index 00000000..78bc0378
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/index.html
@@ -0,0 +1,186 @@
+
+
+
+
+
+ Home Renovation Budget Planner
+
+
+
+
+
+
+
+
+
+
+
+
+
Budget Dashboard
+
Track your renovation expenses in real-time.
+
+ + Add Expense
+
+
+
+
+
+
+
+
+
+
Budget Utilization
+
+
+
+ 0%
+ 0% Used
+ 100%
+
+
+
+
+
+
+
Spending by Category
+
+
+
+
+
+
+
+
+
+
+
Expense History
+
+
+
+
+ Date
+ Description
+ Category
+ Amount
+ Action
+
+
+
+
+
+
+
+
📄
+
No expenses added yet.
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Projects/Home Renovation Budget Planner/project.json b/Projects/Home Renovation Budget Planner/project.json
new file mode 100644
index 00000000..608ee980
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/project.json
@@ -0,0 +1,17 @@
+{
+ "title": "Home Renovation Budget Planner",
+ "description": "Create a responsive Home Renovation Budget Planner using HTML, CSS, and JavaScript that helps hom...",
+ "author": {
+ "name": "MistryVishwa",
+ "github": "MistryVishwa"
+ },
+ "tags": [
+ "enhancement",
+ "good-first-issue",
+ "javascript",
+ "frontend",
+ "finance",
+ "budgeting"
+ ],
+ "entry": "index.html"
+}
diff --git a/Projects/Home Renovation Budget Planner/script.js b/Projects/Home Renovation Budget Planner/script.js
new file mode 100644
index 00000000..622b4d32
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/script.js
@@ -0,0 +1,265 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // State
+ let expenses = JSON.parse(localStorage.getItem('renoExpenses')) || [];
+ let totalBudget = parseFloat(localStorage.getItem('renoTotalBudget')) || 50000;
+ let projectName = localStorage.getItem('renoProjectName') || 'My Home Renovation';
+
+ // DOM Elements - Sidebar
+ const themeToggle = document.getElementById('themeToggle');
+ const colorBtns = document.querySelectorAll('.color-btn');
+ const projectNameInput = document.getElementById('projectName');
+ const totalBudgetInput = document.getElementById('totalBudget');
+ const navDashboard = document.getElementById('navDashboard');
+ const navExpenses = document.getElementById('navExpenses');
+
+ // DOM Elements - Main
+ const dashboardView = document.getElementById('dashboardView');
+ const expensesView = document.getElementById('expensesView');
+ const displayTotalBudget = document.getElementById('displayTotalBudget');
+ const displayTotalSpent = document.getElementById('displayTotalSpent');
+ const displayRemaining = document.getElementById('displayRemaining');
+ const budgetProgressBar = document.getElementById('budgetProgressBar');
+ const budgetProgressText = document.getElementById('budgetProgressText');
+ const categoryBreakdown = document.getElementById('categoryBreakdown');
+
+ const expenseTableBody = document.getElementById('expenseTableBody');
+ const noExpensesMsg = document.getElementById('noExpensesMsg');
+
+ // DOM Elements - Modal
+ const addExpenseBtn = document.getElementById('addExpenseBtn');
+ const expenseModal = document.getElementById('expenseModal');
+ const closeModalBtn = document.getElementById('closeModalBtn');
+ const expenseForm = document.getElementById('expenseForm');
+
+ // --- Initialization ---
+ // Dark Mode
+ if (localStorage.getItem('renoTheme') === 'dark') {
+ document.body.setAttribute('data-theme', 'dark');
+ themeToggle.textContent = '☀️';
+ }
+
+ // Color Theme
+ const savedColorTheme = localStorage.getItem('renoColorTheme') || 'indigo';
+ document.body.setAttribute('data-color-theme', savedColorTheme);
+ colorBtns.forEach(btn => {
+ if (btn.dataset.color === savedColorTheme) {
+ btn.classList.add('active');
+ } else {
+ btn.classList.remove('active');
+ }
+ });
+
+ projectNameInput.value = projectName;
+ totalBudgetInput.value = totalBudget;
+
+ // Set today as default date in form
+ document.getElementById('expDate').valueAsDate = new Date();
+
+ // --- Utilities ---
+ const formatCurrency = (amount) => {
+ return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+ };
+
+ const calculateTotals = () => {
+ const totalSpent = expenses.reduce((sum, exp) => sum + exp.amount, 0);
+ const remaining = totalBudget - totalSpent;
+ const percentUsed = totalBudget > 0 ? (totalSpent / totalBudget) * 100 : 0;
+
+ return { totalSpent, remaining, percentUsed };
+ };
+
+ const getCategoryBreakdown = () => {
+ const breakdown = {};
+ expenses.forEach(exp => {
+ if (!breakdown[exp.category]) breakdown[exp.category] = 0;
+ breakdown[exp.category] += exp.amount;
+ });
+ return Object.entries(breakdown).sort((a, b) => b[1] - a[1]); // Sort by amount desc
+ };
+
+ const saveData = () => {
+ localStorage.setItem('renoExpenses', JSON.stringify(expenses));
+ localStorage.setItem('renoTotalBudget', totalBudget);
+ localStorage.setItem('renoProjectName', projectName);
+ };
+
+ // --- Render Functions ---
+ const updateDashboard = () => {
+ const { totalSpent, remaining, percentUsed } = calculateTotals();
+
+ // Animate numbers for premium feel
+ displayTotalBudget.textContent = formatCurrency(totalBudget);
+ displayTotalSpent.textContent = formatCurrency(totalSpent);
+ displayRemaining.textContent = formatCurrency(remaining);
+
+ // Update Progress Bar
+ budgetProgressBar.style.width = `${Math.min(percentUsed, 100)}%`;
+ budgetProgressText.textContent = `${percentUsed.toFixed(1)}% Used`;
+
+ if (percentUsed > 100) {
+ budgetProgressBar.style.background = 'var(--danger)';
+ displayRemaining.classList.replace('text-success', 'text-danger');
+ } else if (percentUsed > 80) {
+ budgetProgressBar.style.background = 'var(--warning)';
+ displayRemaining.classList.replace('text-danger', 'text-success');
+ } else {
+ budgetProgressBar.style.background = 'linear-gradient(90deg, var(--primary), var(--primary-hover))';
+ displayRemaining.classList.replace('text-danger', 'text-success');
+ }
+
+ // Update Category List
+ const cats = getCategoryBreakdown();
+ categoryBreakdown.innerHTML = '';
+ if (cats.length === 0) {
+ categoryBreakdown.innerHTML = 'No spending data yet.
';
+ } else {
+ cats.forEach(([cat, amount]) => {
+ const el = document.createElement('div');
+ el.className = 'category-item';
+ el.innerHTML = `
+ ${cat}
+ ${formatCurrency(amount)}
+ `;
+ categoryBreakdown.appendChild(el);
+ });
+ }
+ };
+
+ const updateExpenseTable = () => {
+ expenseTableBody.innerHTML = '';
+
+ if (expenses.length === 0) {
+ noExpensesMsg.style.display = 'block';
+ } else {
+ noExpensesMsg.style.display = 'none';
+ // Sort expenses by date descending
+ const sorted = [...expenses].sort((a, b) => new Date(b.date) - new Date(a.date));
+
+ sorted.forEach(exp => {
+ const tr = document.createElement('tr');
+ tr.innerHTML = `
+ ${new Date(exp.date).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}
+ ${exp.description}
+ ${exp.category}
+ -${formatCurrency(exp.amount)}
+
+ Delete
+
+ `;
+ expenseTableBody.appendChild(tr);
+ });
+
+ // Add delete listeners
+ document.querySelectorAll('.delete-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const id = e.target.getAttribute('data-id');
+ expenses = expenses.filter(x => x.id !== id);
+ saveData();
+ updateAll();
+ });
+ });
+ }
+ };
+
+ const updateAll = () => {
+ updateDashboard();
+ updateExpenseTable();
+ };
+
+ // --- Event Listeners ---
+
+ // Theme Toggle
+ themeToggle.addEventListener('click', () => {
+ const isDark = document.body.hasAttribute('data-theme');
+ if (isDark) {
+ document.body.removeAttribute('data-theme');
+ themeToggle.textContent = '🌙';
+ localStorage.setItem('renoTheme', 'light');
+ } else {
+ document.body.setAttribute('data-theme', 'dark');
+ themeToggle.textContent = '☀️';
+ localStorage.setItem('renoTheme', 'dark');
+ }
+ });
+
+ // Color Theme Picker
+ colorBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const color = btn.dataset.color;
+ document.body.setAttribute('data-color-theme', color);
+ localStorage.setItem('renoColorTheme', color);
+
+ colorBtns.forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+
+ // Re-render dashboard to update progress bar color gradients if needed
+ updateDashboard();
+ });
+ });
+
+ // Navigation
+ navDashboard.addEventListener('click', (e) => {
+ e.preventDefault();
+ navDashboard.classList.add('active');
+ navExpenses.classList.remove('active');
+ dashboardView.classList.remove('hidden');
+ expensesView.classList.add('hidden');
+ });
+
+ navExpenses.addEventListener('click', (e) => {
+ e.preventDefault();
+ navExpenses.classList.add('active');
+ navDashboard.classList.remove('active');
+ expensesView.classList.remove('hidden');
+ dashboardView.classList.add('hidden');
+ });
+
+ // Settings Inputs
+ projectNameInput.addEventListener('change', (e) => {
+ projectName = e.target.value;
+ saveData();
+ });
+
+ totalBudgetInput.addEventListener('change', (e) => {
+ totalBudget = parseFloat(e.target.value) || 0;
+ saveData();
+ updateDashboard();
+ });
+
+ // Modal
+ addExpenseBtn.addEventListener('click', () => {
+ expenseModal.classList.remove('hidden');
+ });
+
+ closeModalBtn.addEventListener('click', () => {
+ expenseModal.classList.add('hidden');
+ });
+
+ // Form Submission
+ expenseForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ const newExpense = {
+ id: Date.now().toString(),
+ description: document.getElementById('expDesc').value,
+ amount: parseFloat(document.getElementById('expAmount').value),
+ category: document.getElementById('expCategory').value,
+ date: document.getElementById('expDate').value
+ };
+
+ expenses.push(newExpense);
+ saveData();
+ updateAll();
+
+ // Reset form and close modal
+ expenseForm.reset();
+ document.getElementById('expDate').valueAsDate = new Date(); // reset to today
+ expenseModal.classList.add('hidden');
+
+ // Switch to expenses view automatically
+ navExpenses.click();
+ });
+
+ // Initial Render
+ updateAll();
+});
diff --git a/Projects/Home Renovation Budget Planner/style.css b/Projects/Home Renovation Budget Planner/style.css
new file mode 100644
index 00000000..2c1c624a
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/style.css
@@ -0,0 +1,609 @@
+/* Base Variables */
+:root {
+ --success: #10b981;
+ --danger: #ef4444;
+ --warning: #f59e0b;
+ --font-main: 'Outfit', sans-serif;
+
+ /* Default Indigo Theme */
+ --primary: #6366f1;
+ --primary-hover: #4f46e5;
+ --primary-light: rgba(99, 102, 241, 0.1);
+
+ /* Light Mode Basics */
+ --bg-body: #f8fafc;
+ --bg-glass: rgba(255, 255, 255, 0.7);
+ --bg-panel: rgba(255, 255, 255, 0.9);
+ --text-main: #0f172a;
+ --text-muted: #64748b;
+ --border-color: rgba(226, 232, 240, 0.8);
+ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+ --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+ --radius-md: 12px;
+ --radius-lg: 20px;
+}
+
+/* Color Themes */
+[data-color-theme="emerald"] {
+ --primary: #10b981;
+ --primary-hover: #059669;
+ --primary-light: rgba(16, 185, 129, 0.1);
+}
+[data-color-theme="rose"] {
+ --primary: #f43f5e;
+ --primary-hover: #e11d48;
+ --primary-light: rgba(244, 63, 94, 0.1);
+}
+[data-color-theme="amber"] {
+ --primary: #f59e0b;
+ --primary-hover: #d97706;
+ --primary-light: rgba(245, 158, 11, 0.1);
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+ --bg-body: #0f172a;
+ --bg-glass: rgba(30, 41, 59, 0.7);
+ --bg-panel: rgba(30, 41, 59, 0.9);
+ --text-main: #f8fafc;
+ --text-muted: #94a3b8;
+ --border-color: rgba(51, 65, 85, 0.8);
+ --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+ --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+ --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: var(--font-main);
+ background-color: var(--bg-body);
+ background-image: radial-gradient(circle at 0% 0%, var(--primary-light) 0%, transparent 50%),
+ radial-gradient(circle at 100% 100%, var(--primary-light) 0%, transparent 50%);
+ background-attachment: fixed;
+ color: var(--text-main);
+ transition: background-color 0.4s ease, color 0.4s ease;
+}
+
+.app-container {
+ display: flex;
+ height: 100vh;
+ overflow: hidden;
+ backdrop-filter: blur(10px);
+}
+
+/* Utilities */
+.text-primary { color: var(--primary); }
+.text-success { color: var(--success); }
+.text-danger { color: var(--danger); }
+.text-warning { color: var(--warning); }
+.fw-bold { font-weight: 700; }
+.hidden { display: none !important; }
+.w-full { width: 100%; }
+
+/* Glassmorphism */
+.glass {
+ background: var(--bg-glass);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border: 1px solid var(--border-color);
+}
+
+.glass-modal {
+ background: var(--bg-panel);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid var(--border-color);
+}
+
+/* Buttons */
+.btn {
+ padding: 10px 20px;
+ border-radius: var(--radius-md);
+ font-weight: 600;
+ font-size: 0.95rem;
+ cursor: pointer;
+ font-family: inherit;
+ border: none;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-primary {
+ background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+ color: white;
+}
+
+.btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 15px var(--primary-light);
+}
+
+.btn-danger {
+ background: rgba(239, 68, 68, 0.1);
+ color: var(--danger);
+ padding: 6px 12px;
+}
+
+.btn-danger:hover {
+ background: var(--danger);
+ color: white;
+ transform: translateY(-1px);
+}
+
+.btn-icon {
+ background: var(--bg-glass);
+ border: 1px solid var(--border-color);
+ color: var(--text-main);
+ font-size: 1.2rem;
+ cursor: pointer;
+ padding: 8px;
+ border-radius: 50%;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.btn-icon:hover {
+ background: var(--primary-light);
+ color: var(--primary);
+ transform: rotate(15deg);
+}
+
+/* Sidebar */
+.sidebar {
+ width: 280px;
+ background: var(--bg-glass);
+ border-right: 1px solid var(--border-color);
+ padding: 30px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+ z-index: 10;
+}
+
+.sidebar-header {
+ margin-bottom: 10px;
+}
+
+.brand {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.brand-icon {
+ font-size: 1.5rem;
+}
+
+.brand h2 {
+ font-size: 1.6rem;
+ font-weight: 700;
+ background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.sidebar-nav {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.nav-item {
+ padding: 12px 18px;
+ text-decoration: none;
+ color: var(--text-muted);
+ border-radius: var(--radius-md);
+ font-weight: 500;
+ font-size: 1.05rem;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.nav-item .icon {
+ font-size: 1.2rem;
+}
+
+.nav-item:hover, .nav-item.active {
+ background: var(--primary-light);
+ color: var(--primary);
+ transform: translateX(5px);
+}
+
+.nav-item.active {
+ font-weight: 600;
+}
+
+.panel {
+ padding: 20px;
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
+}
+
+.panel h3 {
+ font-size: 0.95rem;
+ color: var(--text-main);
+ margin-bottom: 15px;
+ font-weight: 600;
+}
+
+.panel input {
+ width: 100%;
+ padding: 10px 12px;
+ margin-bottom: 12px;
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ background: var(--bg-body);
+ color: var(--text-main);
+ font-family: inherit;
+ font-size: 0.95rem;
+ transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.panel input:focus {
+ outline: none;
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.budget-input label {
+ display: block;
+ font-size: 0.85rem;
+ color: var(--text-muted);
+ margin-bottom: 6px;
+ font-weight: 500;
+}
+
+.theme-controls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.color-picker {
+ display: flex;
+ gap: 8px;
+}
+
+.color-btn {
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ cursor: pointer;
+ transition: transform 0.2s, border-color 0.2s;
+}
+
+.color-btn:hover {
+ transform: scale(1.1);
+}
+
+.color-btn.active {
+ border-color: var(--text-main);
+ transform: scale(1.1);
+}
+
+.color-btn.indigo { background: #6366f1; }
+.color-btn.emerald { background: #10b981; }
+.color-btn.rose { background: #f43f5e; }
+.color-btn.amber { background: #f59e0b; }
+
+/* Main Content */
+.main-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 40px;
+ position: relative;
+}
+
+.main-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 40px;
+}
+
+.page-title {
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--text-main);
+}
+
+.page-subtitle {
+ color: var(--text-muted);
+ font-size: 1rem;
+ margin-top: 4px;
+}
+
+.card {
+ border-radius: var(--radius-lg);
+ padding: 25px;
+ box-shadow: var(--shadow-md);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-hover);
+}
+
+.card h3 {
+ font-size: 1.15rem;
+ margin-bottom: 20px;
+ color: var(--text-main);
+ font-weight: 600;
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+}
+
+.overview-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 30px;
+}
+
+.summary-card {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.card-icon {
+ width: 60px;
+ height: 60px;
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.8rem;
+}
+
+.primary-bg { background: var(--primary-light); }
+.danger-bg { background: rgba(239, 68, 68, 0.1); }
+.success-bg { background: rgba(16, 185, 129, 0.1); }
+
+.summary-card h3 {
+ font-size: 0.95rem;
+ color: var(--text-muted);
+ margin-bottom: 4px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.summary-card .amount {
+ font-size: 2.2rem;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.dashboard-bottom-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 30px;
+}
+
+/* Progress */
+.progress-wrapper {
+ margin-top: 30px;
+}
+
+.progress-container {
+ height: 16px;
+ background: var(--bg-body);
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 12px;
+ box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.progress-bar {
+ height: 100%;
+ background: linear-gradient(90deg, var(--primary), var(--primary-hover));
+ width: 0%;
+ transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
+ border-radius: 8px;
+}
+
+.progress-labels {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.9rem;
+ color: var(--text-muted);
+}
+
+.progress-text {
+ color: var(--text-main);
+}
+
+/* Category List */
+.category-list {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.category-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 15px;
+ background: var(--bg-body);
+ border-radius: var(--radius-md);
+ transition: transform 0.2s ease;
+}
+
+.category-item:hover {
+ transform: translateX(5px);
+}
+
+.cat-name { font-weight: 500; font-size: 1rem;}
+.cat-amount { font-weight: 600; color: var(--text-main); }
+
+/* Table */
+.full-height {
+ min-height: 600px;
+}
+
+.table-container {
+ overflow-x: auto;
+}
+
+.expense-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.expense-table th, .expense-table td {
+ padding: 15px;
+ text-align: left;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.expense-table th {
+ font-weight: 600;
+ color: var(--text-muted);
+ font-size: 0.95rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.expense-table tr {
+ transition: background-color 0.2s;
+}
+
+.expense-table tbody tr:hover {
+ background-color: var(--bg-body);
+}
+
+.empty-state {
+ text-align: center;
+ padding: 60px 20px;
+ color: var(--text-muted);
+}
+
+.empty-icon {
+ font-size: 3rem;
+ display: block;
+ margin-bottom: 15px;
+ opacity: 0.5;
+}
+
+/* Modal */
+.modal-overlay {
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(4px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 100;
+ opacity: 1;
+ transition: opacity 0.3s ease;
+}
+
+.modal-overlay.hidden {
+ opacity: 0;
+ pointer-events: none;
+ display: flex !important; /* Overriding display none for animation */
+}
+
+.modal {
+ width: 90%;
+ max-width: 480px;
+ border-radius: var(--radius-lg);
+ padding: 35px;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+ transform: scale(1);
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.modal-overlay.hidden .modal {
+ transform: scale(0.95);
+}
+
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 25px;
+}
+
+.modal-header h2 {
+ font-size: 1.5rem;
+ font-weight: 700;
+}
+
+.form-group {
+ margin-bottom: 20px;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 0.95rem;
+ font-weight: 500;
+ color: var(--text-main);
+}
+
+.form-group input, .form-group select {
+ width: 100%;
+ padding: 12px 15px;
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ background: var(--bg-body);
+ color: var(--text-main);
+ font-family: inherit;
+ font-size: 1rem;
+ transition: all 0.3s;
+}
+
+.form-group input:focus, .form-group select:focus {
+ outline: none;
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+@media (max-width: 1024px) {
+ .dashboard-bottom-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 768px) {
+ .app-container {
+ flex-direction: column;
+ overflow-y: auto;
+ }
+ .sidebar {
+ width: 100%;
+ height: auto;
+ border-right: none;
+ border-bottom: 1px solid var(--border-color);
+ padding: 20px;
+ }
+ .overview-cards {
+ grid-template-columns: 1fr;
+ }
+ .main-content {
+ padding: 20px;
+ overflow-y: visible;
+ }
+ .main-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 15px;
+ }
+}