@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --bg-body: #f1f5f9;
    --bg-surface: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --success: #10b981;
    --danger: #ef4444;

    /* Report Theme (Dark Mode Preservation) */
    --report-bg: #1e293b;
    --report-text: #f8fafc;
    --report-border: #334155;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    padding-bottom: 2rem;
}

/* Navbar */
.navbar {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.nav-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary);
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.btn-logout {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 0.4rem 0.8rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background 0.2s;
}

.btn-logout:hover {
    background-color: #fecaca;
}

/* Layout */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.card {
    background-color: var(--bg-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1rem;
}

.center-screen {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Typography */
h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 1.5rem 0;
}

h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.navbar a {
    text-decoration: none;
}

/* Forms & Inputs */
input[type="text"],
input[type="password"],
select,
input[type="file"] {
    background-color: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.6rem;
    font-family: inherit;
    color: var(--text-main);
    width: 100%;
    box-sizing: border-box;
}

input:focus {
    outline: 2px solid var(--primary);
    border-color: transparent;
}

.btn {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    text-align: center;
}

.btn:hover {
    background-color: var(--primary-hover);
    text-decoration: none;
}

.btn-danger {
    background-color: var(--danger);
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 0.375rem;
    cursor: pointer;
}

/* Tables (Light Theme Default) */
.light-table {
    width: 100%;
    border-collapse: collapse;
}

.light-table th,
.light-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.light-table th {
    background-color: #f8fafc;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- REPORT SPECIFIC (DARK MODE PRESERVATION) --- */
/* Target the specific report cards via ID to force Dark Theme */
#sets .card,
#days .card,
#macd .card {
    background-color: var(--report-bg);
    color: var(--report-text);
    border: 1px solid var(--report-border);
}

/* Report Tables */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#sets table,
#days table,
#macd table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    white-space: nowrap;
    background-color: transparent;
}

#sets th,
#days th,
#macd th {
    background-color: #0f172a;
    color: #f8fafc;
    font-weight: 600;
    text-align: left;
    position: sticky;
    top: 0;
    padding: 10px;
    z-index: 10;
}

#sets td,
#days td,
#macd td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--report-border);
    color: #e2e8f0;
}

#sets tr:hover td,
#days tr:hover td,
#macd tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Report Tabs */
.tabs {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.tab-btn {
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    margin-bottom: -1px;
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

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

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

/* Utilities */
.text-green {
    color: #4ade80 !important;
    font-weight: bold;
}

.text-red {
    color: #f87171 !important;
    font-weight: bold;
}

.msg {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.msg.success {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.msg.error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Scrollbar Polish */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}


/* Grid Layouts */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}


/* Report Utilities & Dark Theme Overrides */
.bg-header-dark {
    background-color: #0f172a;
    color: #e2e8f0;
    border-bottom: 2px solid #334155;
}

.bg-slate {
    background-color: #1e293b;
    color: #f8fafc;
}

.bg-slate-light {
    background-color: #334155;
    color: #f8fafc;
}

.bg-slate-lighter {
    background-color: #475569;
    color: #f8fafc;
}

.text-slate-light {
    color: #cbd5e1 !important;
}

.text-slate-dim {
    color: #94a3b8 !important;
}

.text-black {
    color: #f8fafc !important;
}

/* Inverted for dark theme consistency */

/* Metric Section Colors (Dark Mode Adapted) */
.bg-yellow-iso {
    background-color: #854d0e !important;
    color: #fef08a !important;
}

.border-yellow-iso {
    border-right: 2px solid #ca8a04 !important;
}

.bg-green-iso {
    background-color: #14532d !important;
    color: #86efac !important;
}

.border-green-iso {
    border-right: 2px solid #16a34a !important;
}

/* Separators (Thin vertical lines) */
.separator-yellow {
    background-color: #ca8a04 !important;
    width: 1px !important;
}

.separator-green {
    background-color: #16a34a !important;
    width: 1px !important;
}

/* Sticky behaviors */
.sticky-col {
    position: sticky;
    z-index: 20;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.shadow-right {
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.5);
}

.shadow-right-light {
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.5);
}

/* MACD Specific Overrides for Premium Dark Look */
#macd .sticky-col {
    z-index: 25;
}

#macd th.sticky-header {
    z-index: 40;
}

/* Summary Rows (Top fixed rows) */
#macd .summary-row {
    color: #f8fafc;
}

/* Row Backgrounds - Alternating Dark Shades */


/* Row Backgrounds - Highlighted Summary Section */
/* Main SUM Row - Strong Navy Highlight */
#macd .bg-sum {
    background-color: #49363b !important;
    /* Brighter Blue (blue-900ish but vibrant) */
    color: #ffffff !important;
    border-bottom: 1px solid #3b82f6;
}

/* Alternate Rows - Darker Blue/Slate */

/* Alternate Rows - Darker Blue/Slate */
#macd .bg-white {
    background-color: #1e3a8a !important;
    /* Match SUM row brightness */
    color: #ffffff !important;
}


#macd .bg-subtle {
    background-color: #49363b !important;
    /* Uniform Bright Blue */
    color: #ffffff !important;

}


#macd .summary-cell {
    color: inherit !important;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}


#macd .summary-label {
    color: #e2e8f0 !important;
    /* Brighter label text */
    background-color: #0f172a;
    /* Keep it dark enough to be a 'sidebar' but let's make it match the row slightly or distinct */
    /* actually to match the screenshot request ("do for this part as well"), the labels are clearly dark. 
       but if the user wants the "highlight" to extend, we should let background-color inherit 
       or use the same color as the row. 
       Observing the image, the label column IS dark. 
       Wait, looking at the image provided in step 615, the left column (labels) IS dark navy/black, 
       while the rows on the right are blue/highlighted.
       
       However, if the user means "apply the highlight color to the label column too" (make the blue extend left):
    */
    background-color: inherit !important;
    /* This will make the label take the row's blue color! */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding-left: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.5);
}


/* Highlight the header row too */
#macd th {
    background-color: #0f172a !important;
    /* Very dark indigo */
    color: white;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 3px solid #7c3aed;
    /* Pop border */
}

/* Fix text colors for pos/neg values in summary to pop */
#macd .text-green {
    color: #4ade80 !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}

#macd .text-red {
    color: #f87171 !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.2);
}


/* Ensure sticky columns in MACD report have correct z-index stacking */
#macd .sticky-col {
    z-index: 25;
}

#macd th.sticky-header {
    z-index: 40;
}


/* Borders for Data Table - ensure everything has subtle borders */
#macd td {
    border-bottom: 1px solid #334155;
    border-right: 1px solid #334155;
}

#macd tr:hover td {
    background-color: #334155;
}