Create dashboard.css

app/static/css/dashboard.css

@@ -0,0 +1,562 @@
+/* --- Base layout for dashboard --- */
+.dashboard-wrapper {
+    display: flex;
+    min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
+    transition: background var(--transition), color var(--transition);
+}
+
+/* --- Sidebar Styles --- */
+.sidebar {
+    width: 250px;
+    background: var(--card);
+    border-right: 1px solid var(--border);
+    padding: 1.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 2px 0 8px 0 rgba(30,41,59,0.02);
+    position: sticky; /* Make it sticky for desktop */
+    top: 0;
+    height: 100vh; /* Make it full height */
+    z-index: 50; /* Below sticky header, above main content on mobile */
+    transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 1.5rem;
+}
+
+.sidebar .logo {
+    font-size: 1.25rem; /* Slightly smaller than main header logo */
+    letter-spacing: 0; /* Remove negative letter spacing for sidebar */
+    padding-left: 0.5rem;
+}
+
+.close-sidebar {
+    display: none; /* Hidden on desktop */
+    background: none;
+    border: none;
+    color: var(--text);
+    cursor: pointer;
+    font-size: 1.5rem;
+    transition: color var(--transition);
+}
+.close-sidebar:hover {
+    color: var(--primary);
+}
+
+.sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    color: var(--text);
+    text-decoration: none;
+    font-weight: 500;
+    transition: background var(--transition), color var(--transition);
+}
+
+.nav-item svg {
+    width: 20px;
+    height: 20px;
+    stroke: currentColor;
+    transition: stroke var(--transition);
+}
+
+.nav-item:hover {
+    background: var(--bg); /* Lighter background on hover */
+    color: var(--primary);
+}
+
+[data-theme="dark"] .nav-item:hover {
+    background: var(--bg-dark); /* Darker background on hover */
+}
+
+.nav-item.active {
+    background: var(--primary);
+    color: var(--text-light);
+    box-shadow: 0 2px 8px rgba(37,99,235,0.2);
+}
+
+.nav-item.active svg {
+    stroke: var(--text-light);
+}
+
+.logout-item {
+    margin-top: auto; /* Pushes logout to the bottom of the sidebar */
+    color: #ef4444; /* Red color for logout */
+}
+
+.logout-item:hover {
+    background: #fef2f2;
+    color: #dc2626;
+}
+[data-theme="dark"] .logout-item:hover {
+    background: #450a0a;
+    color: #fca5a5;
+}
+
+
+/* --- Main Content Area --- */
+.main-content-area {
+    flex-grow: 1;
+    padding: 0; /* Padding handled by .content-padding */
+    transition: margin-left var(--transition);
+}
+
+.dashboard-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 2rem;
+    background: var(--card);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 8px 0 rgba(30,41,59,0.04);
+}
+
+.hamburger-dashboard {
+    display: none; /* Hidden on desktop */
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.3rem;
+    color: var(--text);
+    transition: color var(--transition);
+    padding: 0.5rem;
+}
+.hamburger-dashboard span { /* Hamburger icon lines */
+    display: block;
+    width: 24px;
+    height: 3px;
+    margin: 3px 0;
+    background: var(--text);
+    border-radius: 2px;
+    transition: all 0.3s;
+}
+
+.user-settings {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.user-name {
+    font-weight: 600;
+    color: var(--text);
+}
+
+.user-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: var(--primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-light);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+.user-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+.content-padding {
+    padding: 2rem;
+}
+
+.welcome-title {
+    font-size: 2.2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+}
+
+.subtitle {
+    color: #64748b;
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+}
+[data-theme="dark"] .subtitle {
+    color: #cbd5e1;
+}
+
+/* --- Analytics Grid --- */
+.analytics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2.5rem;
+}
+
+.analytics-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    box-shadow: 0 4px 12px 0 rgba(30,41,59,0.05);
+    transition: background var(--transition), border var(--transition);
+}
+
+.card-label {
+    font-size: 0.9rem;
+    color: #64748b;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+[data-theme="dark"] .card-label {
+    color: #cbd5e1;
+}
+
+.card-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+/* --- Section Cards (for API Key, Upload, Recent Uploads) --- */
+.section-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 1rem;
+    padding: 2rem;
+    box-shadow: 0 4px 12px 0 rgba(30,41,59,0.05);
+    margin-bottom: 2rem;
+    transition: background var(--transition), border var(--transition);
+}
+
+.section-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--text);
+}
+
+.section-description {
+    color: #64748b;
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+}
+[data-theme="dark"] .section-description {
+    color: #cbd5e1;
+}
+
+/* --- API Key Section --- */
+.api-key-section .input-group {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.api-key-section .form-input {
+    flex-grow: 1;
+    cursor: text; /* Allow selection */
+}
+
+.api-key-form {
+    margin-bottom: 1rem;
+}
+
+.docs-link {
+    font-size: 0.95rem;
+}
+
+/* --- Buttons (reusing styles from login/register) --- */
+.btn {
+    padding: 0.75rem 1.25rem;
+    border-radius: 0.5rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background var(--transition), color var(--transition), border-color var(--transition);
+    text-decoration: none; /* For anchor tags styled as buttons */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.primary-btn {
+    background: var(--primary);
+    color: #fff;
+    border: none;
+}
+.primary-btn:hover {
+    background: var(--accent);
+}
+
+.secondary-btn {
+    background: var(--card);
+    color: var(--text);
+    border: 1px solid var(--border);
+}
+.secondary-btn:hover {
+    background: var(--bg);
+    border-color: var(--primary);
+}
+[data-theme="dark"] .secondary-btn:hover {
+    background: var(--bg-dark);
+}
+
+.small-btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+}
+
+
+/* --- Upload Section --- */
+.drop-area {
+    border: 2px dashed var(--border);
+    border-radius: 0.75rem;
+    padding: 2.5rem;
+    text-align: center;
+    cursor: pointer;
+    color: #64748b;
+    font-size: 1rem;
+    transition: border-color var(--transition), background var(--transition);
+}
+.drop-area:hover, .drop-area.drag-over {
+    border-color: var(--primary);
+    background: rgba(37,99,235,0.05);
+}
+[data-theme="dark"] .drop-area:hover, [data-theme="dark"] .drop-area.drag-over {
+    background: rgba(60, 165, 250, 0.1);
+}
+
+.drop-area .browse-link {
+    color: var(--primary);
+    font-weight: 600;
+    text-decoration: underline;
+}
+
+.uploaded-files-list {
+    list-style: none;
+    padding: 0;
+    margin-top: 1rem;
+    text-align: left;
+    color: var(--text);
+    font-size: 0.95rem;
+}
+.uploaded-files-list li {
+    background: var(--bg);
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    margin-bottom: 0.5rem;
+    border: 1px solid var(--border);
+}
+[data-theme="dark"] .uploaded-files-list li {
+    background: var(--card-dark);
+}
+
+.upload-now-btn {
+    margin-top: 1.5rem;
+    width: 100%;
+}
+
+
+/* --- Recent Uploads Table --- */
+.table-responsive {
+    overflow-x: auto; /* Makes table scrollable on small screens */
+    width: 100%; /* Ensures it takes full width */
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+}
+
+.data-table th, .data-table td {
+    text-align: left;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.data-table th {
+    background: var(--bg);
+    font-weight: 600;
+    color: var(--text);
+    font-size: 0.9rem;
+    text-transform: uppercase;
+}
+[data-theme="dark"] .data-table th {
+    background: var(--bg-dark);
+}
+
+.data-table td {
+    color: var(--text);
+    background: var(--card);
+}
+[data-theme="dark"] .data-table td {
+    background: var(--card-dark);
+}
+
+.data-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.data-table tbody tr:hover td {
+    background: var(--bg);
+}
+[data-theme="dark"] .data-table tbody tr:hover td {
+    background: var(--card-dark);
+}
+
+.no-data-message {
+    text-align: center;
+    color: #64748b;
+    padding: 1.5rem;
+    background: var(--bg);
+    border-radius: 0.75rem;
+    border: 1px solid var(--border);
+    font-style: italic;
+}
+[data-theme="dark"] .no-data-message {
+    background: var(--bg-dark);
+}
+
+/* --- Responsive Adjustments --- */
+@media (max-width: 900px) {
+    .dashboard-wrapper {
+        flex-direction: column; /* Stack sidebar and main content */
+    }
+
+    .sidebar {
+        position: fixed; /* Fixed position for mobile sidebar */
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 250px; /* Adjust as needed */
+        transform: translateX(-100%); /* Hidden by default */
+        box-shadow: 4px 0 15px rgba(0,0,0,0.1); /* Stronger shadow when open */
+        border-right: none;
+        z-index: 150; /* Above everything when open */
+    }
+
+    .sidebar.open {
+        transform: translateX(0); /* Slide in */
+    }
+
+    .sidebar-header {
+        justify-content: space-between;
+        padding-right: 1rem; /* Adjust padding for close button */
+    }
+
+    .close-sidebar {
+        display: block; /* Show close button on mobile */
+    }
+
+    .hamburger-dashboard {
+        display: flex; /* Show hamburger to open sidebar */
+    }
+
+    .main-content-area.shifted {
+        /* Optional: Add a slight shift or overlay to main content when sidebar is open */
+        margin-left: 250px; /* Matches sidebar width */
+        filter: brightness(0.8); /* Dim background */
+        pointer-events: none; /* Prevent interaction with main content */
+    }
+
+    .dashboard-header {
+        padding: 0.75rem 1.5rem; /* Reduce header height */
+    }
+
+    .user-name {
+        display: none; /* Hide full name on small screens */
+    }
+
+    .content-padding {
+        padding: 1.5rem; /* Reduce overall padding */
+    }
+
+    .welcome-title {
+        font-size: 1.8rem;
+    }
+    .subtitle {
+        font-size: 1rem;
+    }
+
+    .analytics-grid {
+        grid-template-columns: 1fr; /* Stack analytics cards vertically */
+    }
+
+    .section-card {
+        padding: 1.5rem; /* Reduce section card padding */
+    }
+
+    /* Mobile table adjustments */
+    .data-table thead {
+        display: none; /* Hide table headers on mobile */
+    }
+
+    .data-table, .data-table tbody, .data-table tr, .data-table td {
+        display: block; /* Make table elements act like blocks */
+        width: 100%; /* Full width */
+    }
+
+    .data-table tr {
+        margin-bottom: 1rem;
+        border: 1px solid var(--border);
+        border-radius: 0.75rem;
+        overflow: hidden;
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        background: var(--card);
+        box-shadow: 0 2px 8px rgba(30,41,59,0.05);
+    }
+
+    .data-table td {
+        border-bottom: none; /* Remove individual cell borders */
+        text-align: right; /* Align value to the right */
+        padding: 0.5rem 0; /* Adjust padding */
+        position: relative;
+        padding-left: 50%; /* Make space for data-label */
+    }
+
+    .data-table td::before {
+        content: attr(data-label); /* Use data-label for custom label */
+        position: absolute;
+        left: 0;
+        width: 45%;
+        padding-left: 1rem;
+        font-weight: 600;
+        text-align: left;
+        color: #64748b;
+    }
+    [data-theme="dark"] .data-table td::before {
+        color: #cbd5e1;
+    }
+}
+
+@media (max-width: 600px) {
+    .dashboard-header {
+        padding: 0.5rem 1rem; /* Further reduce header height */
+    }
+    .content-padding {
+        padding: 1rem; /* Smallest padding */
+    }
+    .analytics-card, .section-card, .data-table tr {
+        border-radius: 0.75rem; /* Maintain rounded corners */
+    }
+}