/* --- Root & Reset --- */
:root {
    --primary      : #4f46e5;
    --primary-hover: #4338ca;
    --secondary    : #64748b;
    --bg-main      : #f8fafc;
    --bg-card      : #ffffff;
    --text-main    : #1e293b;
    --text-muted   : #64748b;
    --border       : #e2e8f0;
    --success      : #10b981;
    --warning      : #f59e0b;
    --danger       : #ef4444;
    --radius-lg    : 12px;
    --radius-md    : 8px;
    --shadow       : 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}



* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    height    : 100%;
    margin    : 0;

}

body {
    display       : flex;
    flex-direction: column;
    min-height    : 100vh;
    /* Takes full screen height */
    margin        : 0;
}


/* Custom Thin Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background   : #e2e8f0;
    /* Soft slate */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

body {
    font-family           : 'Inter', sans-serif;
    background-color      : var(--bg-main);
    color                 : var(--text-main);
    line-height           : 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- Navbar --- */
.navbar {
    background     : var(--bg-card);
    border-bottom  : 1px solid var(--border);
    padding        : 0.75rem 2rem;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    position       : sticky;
    top            : 0;
    z-index        : 100;
}

.logo {
    display    : flex;
    align-items: center;
    gap        : 0.5rem;
    font-weight: 800;
    font-size  : 1.25rem;
    color      : var(--primary);
    cursor     : pointer;
}


.nav-actions {
    display: flex;
    gap    : 0.75rem;
}

/* --- Buttons & Interactive Elements --- */
.btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 0.5rem;
    padding      : 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight  : 500;
    font-size    : 0.875rem;
    cursor       : pointer;
    transition   : all 0.2s;
    border       : 1px solid transparent;
}

.btn-primary {
    background: var(--primary);
    color     : white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background  : white;
    border-color: var(--border);
    color       : var(--text-main);
}

.btn-secondary:hover {
    background: var(--bg-main);
}

.icon-btn {
    background   : transparent;
    border       : none;
    color        : var(--text-muted);
    cursor       : pointer;
    padding      : 4px;
    border-radius: 4px;
    transition   : all 0.2s;
}

.icon-btn:hover {
    background: #f1f5f9;
    color     : var(--primary);
}

/* --- Layout Containers --- */
.dashboard-container {
    max-width: 1400px;
    width    : 100%;
    /* Ensures it doesn't shrink on mobile */
    margin   : 0 auto;
    /* CENTERS the 1400px box on the screen */
    padding  : 2rem;
    flex     : 1;
    /* Pushes the footer down to the bottom */
}

.dashboard-header {
    display        : flex;
    justify-content: space-between;
    align-items    : flex-end;
    margin-bottom  : 2rem;
}

.dashboard-header h1 {
    font-size  : 1.875rem;
    font-weight: 700;
    display    : flex;
    align-items: center;
    gap        : 0.75rem;
}

/* --- Grids --- */
.stats-grid,
.insights-grid {
    display      : grid;
    gap          : 1.5rem;
    margin-bottom: 2rem;
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.insights-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

/* --- Cards & Stats --- */
.card {
    background   : var(--bg-card);
    border       : 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding      : 1.5rem;
    box-shadow   : var(--shadow);
}

.stat-card {
    display    : flex;
    align-items: center;
    gap        : 1rem;
}

.stat-icon {
    width          : 48px;
    height         : 48px;
    border-radius  : var(--radius-md);
    background     : #f1f5f9;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : var(--primary);
    transition     : color 0.3s ease, background 0.3s ease;
}

.stat-icon i {
    width       : 24px;
    height      : 24px;
    stroke-width: 2px;
    stroke      : currentColor;
}

.stat-card .stat-icon {
    background   : rgba(255, 255, 255, 0.05);
    padding      : 10px;
    border-radius: 12px;
}

.card-label {
    font-size     : 0.75rem;
    font-weight   : 600;
    text-transform: uppercase;
    color         : var(--text-muted);
    letter-spacing: 0.025em;
}

.stat-content h2 {
    font-size  : 1.5rem;
    font-weight: 700;
}

/* --- Charts --- */
.chart-card h3 {
    font-size  : 1rem;
    font-weight: 600;
}

.chart-container {
    height  : 300px;
    position: relative;
    padding : 0.5rem;
}

#imbalance-alert {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 0.5rem;
    margin         : 1rem;
    background     : #fff7ed;
    color          : #c2410c;
    border         : 1px solid #ffedd5;
    font-weight    : 600;
    font-size      : 0.8125rem;
    animation      : pulseSubtle 2s infinite ease-in-out;
}

/* --- Tables & Lists --- */
.table-card {
    padding : 0;
    overflow: hidden;
}

.card-header-flex,
.card-header-simple {
    padding        : 1.25rem 1.5rem;
    border-bottom  : 1px solid var(--border);
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    flex-wrap      : wrap;
    gap            : 1rem;
}

.table-wrapper,
#stats-container {
    overflow-x   : auto;
    border-radius: var(--radius-md);
    border       : 1px solid var(--border);
    background   : var(--bg-card);
}

table,
.stats-table {
    width          : 100%;
    border-collapse: collapse;
    font-size      : 0.875rem;
    text-align     : left;
}

th,
.stats-table th {
    background   : #f8fafc;
    padding      : 1rem 1.5rem;
    font-weight  : 600;
    color        : var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.stats-table th {
    position      : sticky;
    top           : 0;
    z-index       : 10;
    border-bottom : 2px solid var(--border);
    text-transform: uppercase;
    font-size     : 0.75rem;
    letter-spacing: 0.05em;
    padding       : 12px 16px;
}

td,
.stats-table td {
    padding      : 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    color        : var(--text-main);
}

.stats-table td {
    padding: 12px 16px;
}

tr:hover td,
.stats-table tr:hover td {
    background: #f8fafc;
}

tr:last-child td {
    border-bottom: none;
}

/* --- Tabs --- */
.glass-tabs {
    background   : #f1f5f9;
    padding      : 0.25rem;
    border-radius: var(--radius-md);
    display      : flex;
    gap          : 0.25rem;
}

.tab-btn {
    border       : none;
    padding      : 0.4rem 1rem;
    border-radius: 6px;
    font-size    : 0.875rem;
    font-weight  : 500;
    cursor       : pointer;
    background   : transparent;
    color        : var(--text-muted);
    transition   : all 0.2s;
}

.tab-btn.active {
    background: white;
    color     : var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Data Leakage Analysis --- */
#leakage-section {
    margin-bottom: 2rem;
}

.leakage-card {
    background   : var(--bg-card);
    border       : 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding      : 1.5rem;
    box-shadow   : var(--shadow);
    transition   : transform 0.2s ease;
}

.leakage-card.border-danger {
    border-left: 6px solid var(--danger) !important;
    background : #fffafa;
}

.leakage-card.border-warning {
    border-left: 6px solid var(--warning) !important;
    background : #fffdf5;
}

.leakage-card h3 {
    font-size  : 1.125rem;
    font-weight: 700;
    color      : var(--text-main);
    display    : flex;
    align-items: center;
    gap        : 0.5rem;
}

.leakage-details {
    margin-top    : 1.25rem;
    display       : flex;
    flex-direction: column;
    gap           : 1rem;
}

.leakage-details span[class*="fw-bold"] {
    font-size     : 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display       : block;
    margin-bottom : 0.5rem;
}

.recommendation {
    display    : flex;
    align-items: center;
    gap        : 0.5rem;
    padding-top: 1rem;
    color      : var(--text-muted);
    font-style : italic;
}

.leakage-section .alert-success {
    background   : #f0fdf4;
    border       : 1px solid #dcfce7;
    border-left  : 6px solid var(--success) !important;
    color        : #166534;
    padding      : 1.25rem;
    border-radius: var(--radius-lg);
    display      : flex;
    align-items  : center;
    gap          : 0.75rem;
    box-shadow   : var(--shadow);
}

/* --- Badges & Tags --- */
.badge,
.issue-tag {
    font-size    : 0.75rem;
    padding      : 6px 12px;
    border-radius: 99px;
    font-weight  : 500;
    display      : inline-block;
}

.badge {
    background    : #e0e7ff;
    color         : var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border        : 1px solid transparent;
}

.badge-count {
    background   : #eef2ff;
    color        : var(--primary);
    padding      : 2px 8px;
    border-radius: 4px;
    font-family  : 'JetBrains Mono', 'Fira Code', monospace;
    font-weight  : 600;
    font-size    : 0.8rem;
}

.issue-tag {
    background : #fef2f2;
    color      : var(--danger);
    border     : 1px solid #fee2e2;
    font-weight: 600;
}

.text-muted {
    color    : var(--text-muted);
    font-size: 0.875rem;
}

/* --- Suggestions & Issues --- */
.suggestion-list {
    margin-top    : 1rem;
    display       : flex;
    flex-direction: column;
    gap           : 0.75rem;
}

.suggestion-item {
    padding      : 0.75rem;
    background   : #f0fdf4;
    border-left  : 4px solid var(--success);
    border-radius: 4px;
    font-size    : 0.875rem;
    display      : flex;
    align-items  : center;
    gap          : 0.5rem;
}

.issue-tags {
    display   : flex;
    flex-wrap : wrap;
    gap       : 0.5rem;
    margin-top: 1rem;
}

/* --- Loader System --- */
.stats-loader-container {
    padding   : 5rem 0 !important;
    background: rgba(255, 255, 255, 0.02);
}

.stats-loader-content {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 12px;
}

.spinner-custom {
    width           : 40px;
    height          : 40px;
    border          : 3px solid #f0f0f0;
    border-radius   : 50%;
    border-top-color: var(--primary);
    animation       : spin 0.8s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}

.loader-text {
    font-weight: 600;
    color      : var(--text-main);
    font-size  : 0.95rem;
}

.loader-subtext {
    font-size: 0.8rem;
    color    : var(--text-muted);
}

/* --- Overlay & Tooltip System --- */
.info-icon-trigger {
    background : none;
    border     : none;
    padding    : 0;
    cursor     : pointer;
    display    : inline-flex;
    align-items: center;
    transition : transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.info-icon-trigger:hover {
    transform: scale(1.2);
}

.info-card-overlay {
    display       : none;
    position      : absolute;
    z-index       : 1060;
    width         : 280px;
    right         : 0;
    top           : 110%;
    pointer-events: none;
    background    : #ffffff;
    border        : 1px solid rgba(0, 0, 0, 0.1);
    box-shadow    : 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.info-card-overlay.show {
    display       : block;
    pointer-events: all;
    animation     : popupFadeIn 0.2s ease-out;
}

.info-card-header {
    padding: 10px 14px;
}

.info-card-body {
    padding: 14px;
}

.info-card-footer {
    padding   : 10px 14px;
    background: #f9fafb;
    border-top: 1px solid #f1f1f1;
}

.stat-label {
    font-size: 11px;
    color    : #6b7280;
}

.stat-label strong {
    color: #111827;
}

/* Pointer arrow for overlay */
.info-card-overlay::after {
    content      : "";
    position     : absolute;
    top          : -6px;
    right        : 18px;
    border-left  : 6px solid transparent;
    border-right : 6px solid transparent;
    border-bottom: 6px solid #fff;
}

/* --- Animations & Utilities --- */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseSubtle {
    0% {
        opacity  : 0.9;
        transform: scale(1);
    }

    50% {
        opacity  : 1;
        transform: scale(1.01);
    }

    100% {
        opacity  : 0.9;
        transform: scale(1);
    }
}

@keyframes popupFadeIn {
    from {
        opacity  : 0;
        transform: translateY(10px) scale(0.95);
    }

    to {
        opacity  : 1;
        transform: translateY(0) scale(1);
    }
}

.table-responsive {
    overflow: visible !important;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .navbar {
        padding       : 1rem;
        flex-direction: column;
        gap           : 1rem;
    }

    .nav-actions {
        width          : 100%;
        justify-content: space-between;
    }

    .dashboard-header {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 1rem;
    }

    .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .dashboard-container {
        padding: 0 1rem;
        margin : 1rem auto;
    }

    .btn span {
        display: none;
    }
}


.badge-live {
    display       : inline-flex;
    align-items   : center;
    gap           : 6px;
    padding       : 4px 12px;
    background    : rgba(34, 197, 94, 0.1);
    /* Subtle green tint */
    color         : #166534;
    /* Deep forest green */
    font-size     : 11px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius : 100px;
    /* Perfect pill shape */
    border        : 1px solid rgba(34, 197, 94, 0.2);
    vertical-align: middle;
}

/* Optional: Add a pulsing dot before the text */
.badge-live::before {
    content      : "";
    width        : 6px;
    height       : 6px;
    background   : #22c55e;
    border-radius: 50%;
    display      : inline-block;
    animation    : pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* about page styles */

/* Modal Overlay */
.custom-modal-overlay {
    display        : none;
    position       : fixed;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    background     : rgba(15, 23, 42, 0.6);
    /* Slate-900 with transparency */
    backdrop-filter: blur(4px);
    z-index        : 2000;
    overflow-y     : auto;
    padding        : 2rem 1rem;
}

.custom-modal-overlay.active {
    display: block;
}

/* Modal Content Box */
.custom-modal-content {
    position     : relative;
    background   : #fff;
    margin       : 0 auto;
    border-radius: 20px;
    max-width    : 850px;
    animation    : modalSlideUp 0.3s ease-out;
}

.modal-close-btn {
    position       : absolute;
    top            : 20px;
    right          : 20px;
    background     : #f1f5f9;
    border         : none;
    width          : 32px;
    height         : 32px;
    border-radius  : 50%;
    font-size      : 20px;
    cursor         : pointer;
    z-index        : 10;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : #64748b;
    transition     : background 0.2s;
}

.modal-close-btn:hover {
    background: #e2e8f0;
    color     : #0f172a;
}

@keyframes modalSlideUp {
    from {
        opacity  : 0;
        transform: translateY(30px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

/* Container & Dialog */
.about-container {
    display        : flex;
    justify-content: center;
    padding        : 3rem 1rem;
    background     : #f9fafb;
}

.about-dialog {
    max-width    : 800px;
    width        : 100%;
    background   : #fff;
    border-radius: 20px;
    padding      : 3rem;
}

/* Feature Cards */
.feature-card-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 1.5rem;
}

.feature-mini-card {
    padding      : 1.5rem;
    border       : 1px solid #f1f1f1;
    border-radius: 12px;
}

.mini-icon {
    width          : 36px;
    height         : 36px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 8px;
    margin-bottom  : 12px;
}

/* Highlight Box */
.feature-highlight {
    border-radius: 14px;
    overflow     : hidden;
    border       : 1px solid #eee;
}

.highlight-header {
    padding    : 12px 20px;
    background : #fff5f5;
    color      : #dc3545;
    font-weight: 700;
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.highlight-body {
    padding: 20px;
}

.status-labels {
    display   : flex;
    gap       : 8px;
    margin-top: 12px;
}

/* Architecture Styling */
.border-dashed {
    border    : 1px dashed #cbd5e0;
    background: #fafafa;
}

.architecture-flow {
    display       : flex;
    flex-direction: column;
    padding-left  : 10px;
}

.arch-step {
    display    : flex;
    align-items: center;
    gap        : 16px;
}

.arch-icon {
    width          : 40px;
    height         : 40px;
    background     : #fff;
    border         : 1px solid #e2e8f0;
    border-radius  : 12px;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.arch-connector {
    width      : 2px;
    height     : 20px;
    background : #edf2f7;
    margin-left: 19px;
}

.arch-subtext {
    font-size: 11px;
    color    : #718096;
}

/* Colors */
.text-purple {
    color: #805ad5;
}

.icon-purple {
    color       : #805ad5;
    background  : #faf5ff;
    border-color: #e9d8fd;
}

.icon-blue {
    color       : #3182ce;
    background  : #ebf8ff;
    border-color: #bee3f8;
}

.icon-green {
    color       : #38a169;
    background  : #f0fff4;
    border-color: #c6f6d5;
}

.icon-cyan {
    color       : #00b5ad;
    background  : #e0f7f6;
    border-color: #b2f2f1;
}

/* Inspector Highlight */
.highlight-step .arch-icon {
    border-color: #feb2b2;
    color       : #e53e3e;
    background  : #fff5f5;
    box-shadow  : 0 4px 10px rgba(229, 62, 62, 0.1);
    transform   : scale(1.05);
}

@keyframes fadeIn {
    from {
        opacity  : 0;
        transform: translateY(10px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

.about-dialog {
    animation: fadeIn 0.3s ease-out;
}

/* --- Updated Footer Styling --- */
.custom-footer {
    width     : 100%;
    border-top: 1px solid var(--border);
    padding   : 3rem 0;

    /* Flexbox for perfect centering */
    display        : flex;
    flex-direction : column;
    align-items    : center;
    /* Horizontal Center */
    justify-content: center;
    /* Vertical Center */
    text-align     : center;

    /* Safety check: ensure no legacy floats are active */
    float: none !important;
    clear: both;
}

.footer-status-wrap {
    display        : flex;
    justify-content: center;
    /* Centers the badges/status indicators */
    align-items    : center;
    width          : 100%;
    gap            : 1rem;
}

.btn-sponsor {
    text-decoration: none;
    border: 1px solid #fee2e2;
    background: #fffafb;
}

.icon-heart {
    width: 16px;
    color: #ef4444;
    fill: #ef4444;
}

.text-sponsor {
    color: #b91c1c;
    font-weight: 600;
}