:root {
    --primary: #2563EB; /* Primary Blue */
    --primary-hover: #1D4ED8;
    --secondary: #EFF6FF;
    --accent: #0EA5E9;
    --accent-hover: #0284C7;
    --background: #F5F7FB;
    --surface: #FFFFFF;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --border: #E2E8F0;
    
    /* Status Colors */
    --status-pending: #94A3B8;
    --status-progress: #F59E0B; /* Warning */
    --status-delivered: #16A34A; /* Success */
    --status-delayed: #DC2626; /* Danger */
    
    /* Shadows & Radii */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --radius-md: 0.5rem;   /* 8px */
    --radius-lg: 0.75rem;  /* 12px */
    --radius-xl: 1rem;     /* 16px */
}

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

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

/* Layout */
.app-container { display: flex; height: 100vh; overflow: hidden; background-color: var(--background); }

/* Main Navigation (Horizontal) */
.main-nav { 
    display: flex; 
    gap: 0.5rem; 
    padding: 0 2rem; 
    background-color: var(--surface); 
    border-bottom: 1px solid var(--border); 
    flex-shrink: 0;
}
.nav-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem;
    background: none; border: none; font-family: inherit;
    color: var(--text-muted); font-weight: 500; font-size: 0.95rem;
    transition: all 0.2s ease; cursor: pointer; text-align: center;
    border-bottom: 3px solid transparent;
}
.nav-item i { font-size: 1.25rem; }
.nav-item:hover { color: var(--primary); }
.nav-item.active { 
    color: var(--primary); 
    font-weight: 600; 
    border-bottom-color: var(--primary); 
}

/* Status dots (Firebase) */
.db-status { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--text-muted); margin-right: 0.5rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--status-pending); }
.db-status.online .status-dot { background-color: var(--status-delivered); }

/* Main Wrapper */
.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; background-color: var(--background); }

/* Top Header */
.top-header {
    height: 90px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    z-index: 5;
}

/* Main Content Area */
.content-area { flex: 1; overflow-y: auto; padding: 1.5rem; position: relative; background-color: var(--background); }

/* Project Header Info in Top Header */
.header-project-info { display: flex; align-items: center; gap: 2rem; }
.header-logos { display: flex; gap: 1rem; align-items: center; }
.header-logos img { height: 60px; object-fit: contain; }
.header-title { display: flex; flex-direction: column; }
.header-title h1 { font-size: 1.25rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
.header-title .proj-code { font-size: 0.875rem; color: var(--primary); font-weight: 600; background-color: var(--secondary); display: inline-block; padding: 0.15rem 0.75rem; border-radius: 999px; width: max-content; }

.header-user-actions { display: flex; align-items: center; gap: 1.5rem; }
.user-profile { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.875rem; }
.user-profile img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); }

/* Export Actions (Now inside toolbars instead of floating) */
.export-actions { display: flex; gap: 0.5rem; }
.export-actions .btn { border-radius: var(--radius-md); padding: 0.5rem 1rem; }

/* Views (SPA) */
.view-section { display: none; animation: fadeIn 0.3s ease-out forwards; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.section-header { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end; }
.section-header h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; }
.section-header p { color: var(--text-muted); font-size: 0.875rem; }

/* Dashboard Grid */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }

.chart-container { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
.doughnut-container { height: 220px; }
.gauge-container { height: 200px; }
.s-curve-container { height: 350px; width: 100%; }

.stat-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--border); font-size: 0.875rem; }
.stat-row:last-child { border-bottom: none; }

.proc-box { display: flex; flex-direction: column; align-items: center; padding: 1rem; border-radius: var(--radius-md); flex: 1; text-align: center; }
.proc-box i { font-size: 2rem; margin-bottom: 0.5rem; }
.proc-box.material { background-color: #F0FDF4; color: #166534; }
.proc-box.subcontract { background-color: #EFF6FF; color: #1E40AF; }
.procurement-stats { display: flex; gap: 1rem; }

/* Tables */
.table-container { overflow-x: auto; width: 100%; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; background: var(--surface); }
.data-table th, .data-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); }
.data-table th { background-color: #F8FAFC; font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; white-space: nowrap; border-top: 1px solid var(--border); }
.data-table tbody tr:hover { background-color: #F8FAFC; }
.data-table tfoot td { font-weight: 700; background-color: #F1F5F9; border-top: 2px solid var(--border); }

/* WBS Specific Styles */
.wbs-level-1 td { font-weight: 700; background-color: #F8FAFC; }
.wbs-level-2 td { font-weight: 600; }
.wbs-level-2 td:first-child { padding-left: 2rem; position: relative; }
.wbs-level-2 td:first-child::before { content: "↳"; position: absolute; left: 0.75rem; color: var(--text-muted); }
.wbs-level-3 td:first-child { padding-left: 3.5rem; position: relative; }
.wbs-level-3 td:first-child::before { content: "↳"; position: absolute; left: 2.25rem; color: var(--text-muted); }
.wbs-level-4 td:first-child { padding-left: 5rem; position: relative; }
.wbs-level-4 td:first-child::before { content: "↳"; position: absolute; left: 3.75rem; color: var(--text-muted); }
.wbs-level-5 td:first-child { padding-left: 6.5rem; position: relative; }
.wbs-level-5 td:first-child::before { content: "↳"; position: absolute; left: 5.25rem; color: var(--text-muted); }

.wbs-toggle { background: none; border: none; cursor: pointer; margin-right: 0.5rem; color: var(--text-main); width: 20px; display: inline-block; text-align: center; }
.wbs-row.collapsed + .wbs-child-row { display: none; }

/* Badges & Colors */
.badge { padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; }
.badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; }

.status-pending { background: #F1F5F9; color: #475569; }
.status-pending::before { background: #94A3B8; }
.status-progress { background: #FEF3C7; color: #D97706; }
.status-progress::before { background: #F59E0B; }
.status-delivered { background: #D1FAE5; color: #059669; }
.status-delivered::before { background: #10B981; }
.status-delayed { background: #FEE2E2; color: #DC2626; }
.status-delayed::before { background: #EF4444; }
.status-on-budget { background: #DBEAFE; color: #1D4ED8; }
.status-on-budget::before { background: #3B82F6; }

.status-ahead { color: #059669; }
.status-ontrack { color: #D97706; }
.status-behind { color: #DC2626; }

.text-danger { color: #DC2626 !important; }
.text-success { color: #10B981 !important; }
.text-warning { color: #D97706 !important; }
.text-primary { color: var(--primary) !important; }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.d-none { display: none !important; }

/* Buttons & Inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); font-weight: 500; font-family: inherit; cursor: pointer; border: none; font-size: 0.875rem; transition: all 0.2s; }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.75rem; }
.btn-primary { background-color: var(--primary); color: white; }
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-secondary { background-color: var(--secondary); color: var(--primary); font-weight: 600; }
.btn-secondary:hover { background-color: #DBEAFE; }
.btn-secondary-outline { background-color: var(--surface); color: var(--primary); border: 1px solid var(--primary); font-weight: 600; }
.btn-secondary-outline:hover { background-color: var(--secondary); }
.btn-accent { background-color: var(--accent); color: white; }
.btn-accent:hover { background-color: var(--accent-hover); }
.btn-success { background-color: #10B981; color: white; }
.btn-success:hover { background-color: #059669; }
.btn-danger { background-color: #EF4444; color: white; }
.btn-danger:hover { background-color: #DC2626; }
.w-100 { width: 100%; }

.btn-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-md); font-size: 1.25rem; }
.btn-icon:hover { background-color: var(--secondary); color: var(--text-main); }

.form-control-sm { padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; }

/* Tabs */
.tabs-header { display: flex; border-bottom: 2px solid var(--secondary); padding: 0.5rem 1rem 0 1rem; background: var(--surface); gap: 0.5rem; }
.tab-btn, .tab-btn-budget, .tab-btn-doc { background: transparent; border: none; padding: 0.75rem 1.5rem; font-weight: 600; color: var(--text-muted); cursor: pointer; font-family: inherit; border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-size: 0.875rem; transition: all 0.2s ease; }
.tab-btn:hover, .tab-btn-budget:hover, .tab-btn-doc:hover { background: var(--secondary); color: var(--primary); }
.tab-btn.active, .tab-btn-budget.active, .tab-btn-doc.active { background: var(--primary); color: white; }

/* Progress Stats Bar */
.progress-stats-bar { display: flex; justify-content: space-around; align-items: center; background: var(--surface); }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.stat-item .label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-item strong { font-size: 1.25rem; }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 1; transition: opacity 0.2s; }
.modal-overlay.hidden { opacity: 0; pointer-events: none; }
.modal-content { width: 100%; max-width: 600px; background-color: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; gap: 1rem; }
.form-group.half { flex: 1; }
.form-group.third { flex: 1; }
.form-group.full { width: 100%; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-main); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }

/* Helpers */
.card { background-color: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; }
.card-header { background-color: var(--surface); }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-0 { padding: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }

/* Dashboard Specifics */
.kpi-card { display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid var(--primary); transition: transform 0.2s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--text-main); }

/* WBS Tree Table Styling */
.wbs-row-level-1 { background-color: #EAF2FF; border-left: 4px solid #2563EB; font-weight: 700; color: #0F172A; }
.wbs-row-level-1:hover { background-color: #DBEAFE !important; }

.wbs-row-level-2 { background-color: #F3F8FF; border-left: 3px solid #93C5FD; font-weight: 600; color: #334155; }
.wbs-row-level-2:hover { background-color: #EFF6FF !important; }

.wbs-row-level-3 { background-color: #FFFFFF; border-left: 2px solid #CBD5E1; font-weight: 500; color: #475569; }
.wbs-row-level-3:hover { background-color: #F8FAFC !important; }

.wbs-row-level-4 { background-color: #FAFAFA; border-left: 1px solid #E2E8F0; font-weight: 400; color: #64748B; }
.wbs-row-level-4:hover { background-color: #F8FAFC !important; }

.wbs-row-level-1 > td:first-child { padding-left: 8px; }
.wbs-row-level-2 > td:first-child { padding-left: 24px; }
.wbs-row-level-3 > td:first-child { padding-left: 48px; }
.wbs-row-level-4 > td:first-child { padding-left: 72px; }

.data-table thead th {
    background-color: #F8FAFC;
    color: #475569;
    font-weight: 600;
    border-bottom: 1px solid #E2E8F0;
}


/* Print Styles */
@media print {
    .sidebar, .export-actions, .modal-overlay { display: none !important; }
    .main-content { overflow: visible; padding: 0; }
    .app-container { height: auto; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}

/* Authentication visibility control */
body.not-authenticated .auth-only {
    display: none !important;
}

body.not-authenticated #view-procurement .actions-col,
body.not-authenticated #budget-billing-container .actions-col,
body.not-authenticated #view-progress .actions-col {
    display: none !important;
}