add/delete records

Author: usmannasir

.idea/workspace.xml

@@ -18,15 +18,15 @@
         text-align: center;
         margin-bottom: 3rem;
         padding: 3rem 0;
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         border-radius: 20px;
         animation: fadeInDown 0.5s ease-out;
     }
 
     .page-title {
         font-size: 3rem;
         font-weight: 700;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
@@ -36,7 +36,7 @@
 
     .page-subtitle {
         font-size: 1.25rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 1.5rem;
         max-width: 800px;
         margin-left: auto;
@@ -51,8 +51,8 @@
     }
 
     .info-box {
-        background: #e0e7ff;
-        border: 1px solid #c7d2fe;
+        background: var(--accent-light, #e0e7ff);
+        border: 1px solid var(--accent-border, #c7d2fe);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -68,7 +68,7 @@
 
     .info-box p {
         margin: 0;
-        color: #3730a3;
+        color: var(--info-dark, #3730a3);
         font-size: 0.925rem;
     }
 
@@ -96,9 +96,9 @@
     }
 
     .btn-secondary {
-        background: #fff;
+        background: var(--bg-primary, #fff);
         color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         padding: 0.75rem 2rem;
         border-radius: 10px;
         font-weight: 500;
@@ -112,32 +112,32 @@
     }
 
     .btn-secondary:hover {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         border-color: #5b5fcf;
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(91, 95, 207, 0.2);
     }
 
     .main-card {
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 16px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05)), var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.08));
+        border: 1px solid var(--border-primary, #e8e9ff);
         overflow: hidden;
         margin-bottom: 2rem;
         animation: fadeInUp 0.5s ease-out;
     }
 
     .card-header {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f1ff 100%);
+        background: linear-gradient(135deg, var(--bg-secondary, #f8f9ff) 0%, var(--bg-hover, #f0f1ff) 100%);
         padding: 1.5rem 2rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
     }
 
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin: 0;
         display: flex;
         align-items: center;
@@ -160,18 +160,18 @@
         display: block;
         margin-bottom: 0.5rem;
         font-weight: 500;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
     }
 
     .form-control {
         width: 100%;
         padding: 0.875rem 1rem;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 10px;
         font-size: 0.875rem;
         transition: all 0.3s ease;
-        background: #fff;
+        background: var(--bg-primary, #fff);
     }
 
     .form-control:focus {
@@ -181,8 +181,8 @@
     }
 
     .restore-progress-card {
-        background: #fff3cd;
-        border: 1px solid #ffeaa7;
+        background: var(--warning-light, #fff3cd);
+        border: 1px solid var(--warning-border, #ffeaa7);
         border-radius: 12px;
         padding: 1.5rem;
         margin-bottom: 2rem;
@@ -214,20 +214,20 @@
 
     .status-details h4 {
         margin: 0;
-        color: #856404;
+        color: var(--warning-text, #856404);
         font-size: 1rem;
     }
 
     .status-details p {
         margin: 0;
-        color: #856404;
+        color: var(--warning-text, #856404);
         font-size: 0.875rem;
         opacity: 0.8;
     }
 
     .backup-select-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, #f8f9ff);
+        border: 1px solid var(--border-primary, #e8e9ff);
         border-radius: 12px;
         padding: 2rem;
         margin-bottom: 2rem;
@@ -251,21 +251,21 @@
     }
 
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-light, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
 
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-light, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
 
     .loading-spinner {
         width: 20px;
         height: 20px;
-        border: 3px solid #e8e9ff;
+        border: 3px solid var(--border-primary, #e8e9ff);
         border-top-color: #5b5fcf;
         border-radius: 50%;
         animation: spin 1s linear infinite;
@@ -275,31 +275,31 @@
 
     .progress-table {
         width: 100%;
-        background: white;
+        background: var(--bg-primary, white);
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-primary, #e8e9ff);
     }
 
     .progress-table th {
-        background: #f8f9ff;
+        background: var(--bg-secondary, #f8f9ff);
         padding: 0.75rem;
         text-align: left;
         font-weight: 600;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-primary, #e8e9ff);
     }
 
     .progress-table td {
         padding: 0.75rem;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-size: 0.875rem;
-        border-bottom: 1px solid #f3f4f6;
+        border-bottom: 1px solid var(--border-light, #f3f4f6);
     }
 
     .file-badge {
-        background: #e0e7ff;
+        background: var(--accent-light, #e0e7ff);
         color: #5b5fcf;
         padding: 0.25rem 0.75rem;
         border-radius: 6px;