/* Global Styles */
         :root {
             --primary-color: #3498db;
             --primary-dark: #2980b9;
             --secondary-color: #2ecc71;
             --danger-color: #e74c3c;
             --dark-color: #34495e;
             --light-color: #ecf0f1;
             --gray-color: #95a5a6;
             --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             --border-radius: 8px;
         }
 
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
 
         body {
             background-color: #f5f7fa;
             display: flex;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
             padding: 20px;
             line-height: 1.6;
         }
 
         .container {
             max-width: 1000px;
             width: 100%;
             padding: 0;
             background-color: #fff;
             border-radius: var(--border-radius);
             box-shadow: var(--shadow);
             overflow: hidden;
         }
 
         /* Button Styles */
         .btn {
             padding: 10px 18px;
             border: none;
             border-radius: var(--border-radius);
             cursor: pointer;
             font-weight: 600;
             transition: all 0.3s ease;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
         }
 
         .btn-primary {
             background-color: var(--primary-color);
             color: white;
         }
 
         .btn-primary:hover {
             background-color: var(--primary-dark);
         }
 
         .btn-danger {
             background-color: var(--danger-color);
             color: white;
         }
 
         .btn-success {
             background-color: var(--secondary-color);
             color: white;
         }
 
         .btn-outline {
             background-color: transparent;
             border: 1px solid var(--primary-color);
             color: var(--primary-color);
         }
 
         .btn-outline:hover {
             background-color: var(--primary-color);
             color: white;
         }
 
         /* Input Styles */
         .form-group {
             margin-bottom: 20px;
         }
 
         .form-input {
             width: 100%;
             padding: 12px 16px;
             border: 1px solid #ddd;
             border-radius: var(--border-radius);
             font-size: 16px;
             transition: border 0.3s ease;
         }
 
         .form-input:focus {
             border-color: var(--primary-color);
             outline: none;
             box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
         }
 
         .form-select {
             width: 100%;
             padding: 12px 16px;
             border: 1px solid #ddd;
             border-radius: var(--border-radius);
             font-size: 16px;
             appearance: none;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2395a5a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 12px center;
             background-size: 16px;
         }
 
         /* Auth Styles */
         .auth-container {
             display: flex;
             flex-direction: column;
             align-items: center;
             padding: 40px;
             max-width: 480px;
             margin: 0 auto;
         }
 
         .auth-logo {
             margin-bottom: 30px;
             text-align: center;
         }
 
         .auth-logo h1 {
             font-size: 28px;
             color: var(--primary-color);
             margin-bottom: 10px;
         }
 
         .auth-logo p {
             color: var(--gray-color);
             font-size: 16px;
         }
 
         .auth-form {
             width: 100%;
         }
 
         .auth-form h2 {
             text-align: center;
             margin-bottom: 30px;
             color: var(--dark-color);
         }
 
         .auth-footer {
             margin-top: 30px;
             text-align: center;
             color: var(--gray-color);
         }
 
         /* Dashboard Styles */
         .dashboard {
             display: none;
         }
 
         .dashboard-header {
             background-color: var(--primary-color);
             color: white;
             padding: 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
 
         .dashboard-header h2 {
             font-size: 24px;
             font-weight: 600;
         }
 
         .dashboard-header-actions {
             display: flex;
             gap: 10px;
         }
 
         .dashboard-content {
             padding: 30px;
         }
 
         .section-title {
             font-size: 20px;
             color: var(--dark-color);
             margin-bottom: 20px;
             font-weight: 600;
             display: flex;
             align-items: center;
             gap: 10px;
         }
 
         .section-title i {
             color: var(--primary-color);
         }
 
         /* Summary Cards */
         .summary-cards {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
             gap: 20px;
             margin-bottom: 40px;
         }
 
         .card {
             background-color: #fff;
             padding: 20px;
             border-radius: var(--border-radius);
             box-shadow: var(--shadow);
             transition: transform 0.3s ease;
         }
 
         .card:hover {
             transform: translateY(-5px);
         }
 
         .card-balance {
             border-left: 4px solid var(--primary-color);
         }
 
         .card-income {
             border-left: 4px solid var(--secondary-color);
         }
 
         .card-expenses {
             border-left: 4px solid var(--danger-color);
         }
 
         .card-savings {
             border-left: 4px solid #f39c12;
         }
 
         .card h3 {
             color: var(--gray-color);
             font-size: 16px;
             font-weight: 500;
             margin-bottom: 10px;
             display: flex;
             align-items: center;
             gap: 8px;
         }
 
         .card h3 i {
             font-size: 18px;
         }
 
         .card-balance h3 i {
             color: var(--primary-color);
         }
 
         .card-income h3 i {
             color: var(--secondary-color);
         }
 
         .card-expenses h3 i {
             color: var(--danger-color);
         }
 
         .card-savings h3 i {
             color: #f39c12;
         }
 
         .card h2 {
             font-size: 28px;
             font-weight: bold;
             color: var(--dark-color);
         }
 
         /* Transactions */
         .transactions {
             background-color: #fff;
             padding: 25px;
             border-radius: var(--border-radius);
             box-shadow: var(--shadow);
             margin-bottom: 30px;
         }
 
         .transactions-form {
             display: grid;
             grid-template-columns: 2fr 1fr 1fr auto;
             gap: 15px;
             margin-bottom: 30px;
             padding: 20px;
             background-color: #f8f9fa;
             border-radius: var(--border-radius);
         }
 
         .transactions-divider {
             margin: 30px 0;
             border: none;
             height: 1px;
             background-color: #eaeaea;
         }
 
         .transactions-table {
             width: 100%;
             border-collapse: separate;
             border-spacing: 0;
         }
 
         .transactions-table th {
             padding: 15px 10px;
             text-align: left;
             font-weight: 600;
             color: var(--dark-color);
             border-bottom: 2px solid #eaeaea;
         }
 
         .transactions-table td {
             padding: 15px 10px;
             border-bottom: 1px solid #eaeaea;
             color: var(--dark-color);
         }
 
         .transactions-table tr:last-child td {
             border-bottom: none;
         }
 
         .transactions-table tr:hover {
             background-color: #f8f9fa;
         }
 
         .transaction-date {
             color: var(--gray-color);
             font-size: 14px;
         }
 
         .transaction-description {
             font-weight: 500;
         }
 
         .expense {
             color: var(--danger-color);
             font-weight: 600;
         }
 
         .income {
             color: var(--secondary-color);
             font-weight: 600;
         }
 
         .transaction-badge {
             display: inline-block;
             padding: 4px 10px;
             border-radius: 20px;
             font-size: 12px;
             font-weight: 600;
         }
 
         .badge-expense {
             background-color: rgba(231, 76, 60, 0.1);
             color: var(--danger-color);
         }
 
         .badge-income {
             background-color: rgba(46, 204, 113, 0.1);
             color: var(--secondary-color);
         }
 
         /* Loader and Error Styles */
         .loading {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(255, 255, 255, 0.9);
             display: flex;
             justify-content: center;
             align-items: center;
             z-index: 1000;
         }
 
         .loading-spinner {
             width: 50px;
             height: 50px;
             border: 4px solid rgba(52, 152, 219, 0.1);
             border-radius: 50%;
             border-left-color: var(--primary-color);
             animation: spin 1s linear infinite;
         }
 
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
 
         .error-message {
             color: white;
             padding: 15px;
             background-color: var(--danger-color);
             border-radius: var(--border-radius);
             text-align: center;
             margin-bottom: 20px;
             display: none;
             font-weight: 500;
         }
 
         /* Modal Styles */
         .modal {
             display: none;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
             z-index: 1000;
             justify-content: center;
             align-items: center;
         }
 
         .modal-content {
             background-color: #fff;
             border-radius: var(--border-radius);
             padding: 30px;
             width: 400px;
             max-width: 90%;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
             position: relative;
         }
 
         .close-button {
             position: absolute;
             top: 20px;
             right: 20px;
             font-size: 24px;
             color: var(--gray-color);
             cursor: pointer;
             transition: color 0.3s ease;
         }
 
         .close-button:hover {
             color: var(--danger-color);
         }
 
         .modal-title {
             font-size: 22px;
             margin-bottom: 25px;
             color: var(--dark-color);
             text-align: center;
         }
 
         .form-label {
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
             color: var(--dark-color);
         }
 
         /* No transactions state */
         .no-transactions {
             text-align: center;
             padding: 40px 0;
             color: var(--gray-color);
         }
 
         .no-transactions i {
             font-size: 48px;
             margin-bottom: 15px;
             color: #ddd;
         }
 
         .no-transactions p {
             font-size: 18px;
             margin-bottom: 20px;
         }
 
         /* Responsive Styles */
         @media (max-width: 768px) {
             .container {
                 border-radius: 0;
                 box-shadow: none;
             }
 
             .dashboard-header {
                 flex-direction: column;
                 gap: 15px;
                 align-items: flex-start;
             }
 
             .dashboard-content {
                 padding: 20px;
             }
 
             .transactions-form {
                 grid-template-columns: 1fr;
             }
 
             .summary-cards {
                 grid-template-columns: 1fr;
             }
         }
 
         @media (max-width: 576px) {
             .auth-container {
                 padding: 30px 20px;
             }
 
             .dashboard-header-actions {
                 width: 100%;
                 flex-direction: column;
                 gap: 10px;
             }
 
             .dashboard-header-actions button {
                 width: 100%;
             }
 
             .transactions-table th:nth-child(4),
             .transactions-table td:nth-child(4) {
                 display: none;
             }
         }
         .btn-icon {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    transition: color 0.3s ease;
}

.btn-icon:hover {
    color: var(--primary-dark);
}

.transactions-table th:last-child,
.transactions-table td:last-child {
    width: 50px;
    text-align: center;
}
         @media (max-width: 576px) {
    /* Hide action column on small screens */
    .transactions-table th:last-child,
    .transactions-table td:last-child {
        display: none;
    }
    
    /* Already in your CSS, keeping this for completeness */
    .transactions-table th:nth-child(4),
    .transactions-table td:nth-child(4) {
        display: none;
    }
}