:root {
--bg-base: #F0F2FF;
--bg-card: #FFFFFF;
--bg-sidebar: #0D0F1C;
--accent: #4F46E5;
--accent-light: #EEF2FF;
--text-primary: #0F172A;
--text-secondary: #64748B;
--border: #E2E8F0;
--radius: 14px;
}
* { box-sizing: border-box; }
body {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
background-color: var(--bg-base);
color: var(--text-primary);
}
body.dark-mode { background-color: #0F172A; color: #E2E8F0; }
body.dark-mode #main-content { background: #0A0C1A !important; }
body.dark-mode .bg-white { background-color: #1A2235 !important; }
body.dark-mode .list-row { background: #1A2235 !important; border-color: #2D3748 !important; color: #F1F5F9 !important; }
body.dark-mode .list-row:hover { background: #1E2A40 !important; border-color: #4F46E5 !important; box-shadow: 0 4px 20px -4px rgba(79,70,229,0.3) !important; }
body.dark-mode .col-header { background: rgba(79,70,229,0.15) !important; border-color: rgba(79,70,229,0.2) !important; color: rgba(165,180,252,0.8) !important; }
body.dark-mode header { background: rgba(10,12,26,0.9) !important; border-color: rgba(79,70,229,0.2) !important; }
body.dark-mode .status-pill { filter: brightness(1.3); }
body.dark-mode .contract-id-badge { background: linear-gradient(135deg,#1e1b4b,#2e1065) !important; color: #A5B4FC !important; border-color: #4338CA !important; }
body.dark-mode .detail-input { background: #0F172A !important; border-color: #334155 !important; color: #F1F5F9 !important; }
body.dark-mode .fld-lbl { color: #64748B !important; }
body.dark-mode .fld-val { color: #CBD5E1 !important; }
body.dark-mode .stat-card { background:#1A2235 !important; border-color:#2D3748 !important; }
body.dark-mode #cards-container>div[style*="background:white"]{background:#1A2235 !important;border-color:#2D3748 !important;}
body.dark-mode #cards-container [style*="font-weight:900;color:#0F172A"]{color:#F1F5F9 !important;}
body.dark-mode #detail-panel { background: #1A2235 !important; }
body.dark-mode #detail-panel .text-slate-900,
body.dark-mode #detail-panel .text-slate-800,
body.dark-mode #detail-panel .text-slate-700 { color: #F1F5F9 !important; }
body.dark-mode #detail-panel .text-slate-600,
body.dark-mode #detail-panel .text-slate-500 { color: #94A3B8 !important; }
body.dark-mode #detail-panel .text-slate-400,
body.dark-mode #detail-panel .text-slate-300 { color: #64748B !important; }
body.dark-mode #detail-panel .bg-slate-50 { background: #0F172A !important; }
body.dark-mode #detail-panel .border-slate-100,
body.dark-mode #detail-panel .border-slate-200 { border-color: #2D3748 !important; }
body.dark-mode #detail-panel .bg-slate-50\/90,
body.dark-mode .bg-slate-50\/90 { background: #1A2235 !important; }
body.dark-mode .status-select { background: #1A2235 !important; border-color: #4338CA !important; color: #A5B4FC !important; }
body.dark-mode #cards-container .bg-white { background: #1A2235 !important; }
body.dark-mode #cards-container .border-slate-100 { border-color: #2D3748 !important; }
body.dark-mode #cards-container .text-slate-700 { color: #F1F5F9 !important; }
body.dark-mode #cards-container .text-slate-400 { color: #94A3B8 !important; }
body.dark-mode #cards-container p[style*="color:#0F172A"] { color: #F1F5F9 !important; }
body.dark-mode #cards-container .font-black { color: #F1F5F9 !important; }
body.dark-mode #cards-container .text-slate-900 { color: #F1F5F9 !important; }
body.dark-mode [style*="color:#0F172A"],body.dark-mode [style*="color:#1E293B"],body.dark-mode [style*="color:#334155"],body.dark-mode [style*="color:#475569"]{color:#F1F5F9 !important;}
body.dark-mode aside [style*="color:#64748B"],body.dark-mode aside [style*="color:#94A3B8"]{color:rgba(255,255,255,0.5) !important;}
body.dark-mode .bg-slate-50,
body.dark-mode .bg-slate-50\/50,
body.dark-mode .bg-slate-50\/70,
body.dark-mode .bg-slate-50\/80,
body.dark-mode .bg-slate-50\/90 { background-color: #0F172A !important; }
body.dark-mode .bg-slate-100 { background-color: #334155 !important; }
body.dark-mode .text-slate-900,
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-700 { color: #F1F5F9 !important; }
body.dark-mode .text-slate-600 { color: #CBD5E1 !important; }
body.dark-mode .text-slate-500 { color: #94A3B8 !important; }
body.dark-mode .text-slate-400 { color: #64748B !important; }
body.dark-mode .border,
body.dark-mode .border-b,
body.dark-mode .border-l,
body.dark-mode .border-t,
body.dark-mode .border-slate-100,
body.dark-mode .border-slate-200,
body.dark-mode .border-slate-200\/80 { border-color: #334155 !important; }
body.dark-mode input,
body.dark-mode textarea { background-color: #0F172A !important; color: #E2E8F0 !important; border-color: #475569 !important; }
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #64748B !important; }
body.dark-mode #risk-sidebar { background-color: #1E293B !important; border-color: #334155 !important; }
body.dark-mode #risk-sidebar h3 { color: #F1F5F9 !important; }
body.dark-mode #risk-alert-container .risk-card-overdue { background-color: #450a0a !important; border-color: #991b1b !important; }
body.dark-mode #risk-alert-container .risk-card-urgent { background-color: #431407 !important; border-color: #c2410c !important; }
body.dark-mode #risk-alert-container .risk-card-caution { background-color: #422006 !important; border-color: #b45309 !important; }
body.dark-mode #risk-alert-container .risk-card-safe { background-color: #052e16 !important; border-color: #166534 !important; }
body.dark-mode #risk-alert-container .risk-card-none { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .risk-card-title { color: #F1F5F9 !important; }
body.dark-mode .risk-card-meta { color: #94A3B8 !important; }
body.dark-mode .risk-card-status { color: #93C5FD !important; }
body.dark-mode .risk-delay-text { color: #CBD5E1 !important; }
.card:hover { border-color: #2563EB; transform: translateY(-2px); box-shadow: 0 12px 20px -8px rgba(37, 99, 235, 0.15); }
#detail-modal, #cancel-modal { transition: opacity 0.2s ease; }
#detail-panel, #cancel-panel {
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
transform: translateY(12px) scale(0.98);
opacity: 0;
}
.panel-open { transform: translateY(0) scale(1) !important; opacity: 1 !important; }
.milestone-line-fill { transition: width 0.4s ease-in-out; }
#risk-sidebar {
transition: width 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, padding 0.3s ease;
width: 0;
opacity: 0;
overflow: hidden;
padding-left: 0;
padding-right: 0;
}
#risk-sidebar.sidebar-open {
width: 320px;
opacity: 1;
padding-left: 20px;
padding-right: 20px;
}
.active-sub-tab { background-color: #2563EB !important; color: white !important; border-color: #2563EB !important; }
.manager-chip input:checked + span { outline: 2px solid currentColor; outline-offset: 1px; }
.detail-input { width: 100%; border-radius: 0.75rem; border: 1px solid #E2E8F0; background: #F8FAFC; padding: 0.75rem 0.875rem; font-size: 0.75rem; font-weight: 600; color: #334155; outline: none; transition: all 0.2s ease; }
.detail-input:focus { border-color: #4F46E5; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
.dp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px 16px; font-size:12px; }
.dp-full { grid-column:span 2; }
.fld-lbl { font-size:10px; color:#94A3B8; font-weight:700; margin-bottom:2px; text-transform:uppercase; }
.fld-val { font-weight:500; color:#334155; }
.stat-card { background:white; border-radius:16px; border:1px solid #EEF2FF; padding:20px; }
.copy-btn { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#334155; background:none; border:none; cursor:pointer; padding:0; transition:color 0.2s; }
.copy-btn:hover { color:#2563EB; }
.copy-icon { opacity:0; font-size:10px; color:#60A5FA; transition:opacity 0.2s; }
.copy-btn:hover .copy-icon { opacity:1; }
aside { background: #FFFFFF; border-right: 1px solid #E8EAFF; }
body.dark-mode aside { background: linear-gradient(180deg, #0D0F1C 0%, #131629 100%) !important; border-right-color: #1E2A40 !important; }
.sidebar-logo { background: linear-gradient(135deg, #4F46E5, #7C3AED); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-item { position: relative; transition: all 0.2s ease; }
.nav-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: linear-gradient(180deg, #4F46E5, #7C3AED); border-radius: 0 3px 3px 0; transition: height 0.2s ease; }
.nav-item.active::before, .nav-item:hover::before { height: 60%; }
.nav-item.active { background: rgba(79,70,229,0.08) !important; color: #4F46E5 !important; }
.nav-item:hover { background: rgba(79,70,229,0.06) !important; color: #4F46E5 !important; }
body.dark-mode .nav-item { color: rgba(255,255,255,0.8) !important; }
body.dark-mode .nav-item.active { background: rgba(79,70,229,0.2) !important; color: #A5B4FC !important; }
body.dark-mode .nav-item:hover { background: rgba(255,255,255,0.06) !important; color: #FFFFFF !important; }
body.dark-mode .mgr-filter-btn { color: rgba(255,255,255,0.75) !important; }
body.dark-mode .stat-status-btn span:first-child { opacity: 1 !important; }
body.dark-mode .stat-cnt { color: rgba(255,255,255,0.6) !important; }
header { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(79,70,229,0.1) !important; }
.list-row { position: relative; background: white; border: 1px solid #EEF2FF; border-radius: 12px; transition: all 0.2s ease; overflow: hidden; }
.list-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #4F46E5, #7C3AED); transition: width 0.2s ease; border-radius: 0; }
.list-row:hover { border-color: #C7D2FE; box-shadow: 0 4px 20px -4px rgba(79,70,229,0.15); transform: translateX(2px); }
.list-row:hover::before { width: 3px; }
.list-row-changed { border-color: #FDE68A !important; background: #FFFBEB !important; }
.list-row-changed::before { background: linear-gradient(180deg, #F59E0B, #D97706) !important; }
.list-row-unassigned { border-color: #FECACA !important; }
.list-row-unassigned::before { background: linear-gradient(180deg, #EF4444, #DC2626) !important; }
.status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.01em; }
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.col-header { background: rgba(79,70,229,0.04); border-radius: 10px; border: 1px solid rgba(79,70,229,0.08); }
#search-input { background: rgba(79,70,229,0.05) !important; border-color: rgba(79,70,229,0.15) !important; }
#search-input:focus { background: white !important; border-color: #4F46E5 !important; box-shadow: 0 0 0 3px rgba(79,70,229,0.12) !important; }
.btn-primary { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: white; border: none; border-radius: 10px; padding: 8px 16px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(79,70,229,0.4); }
.btn-ghost { background: rgba(79,70,229,0.06); color: #4F46E5; border: 1px solid rgba(79,70,229,0.15); border-radius: 10px; padding: 7px 14px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
.btn-ghost:hover { background: rgba(79,70,229,0.12); }
.contract-id-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #4F46E5; background: linear-gradient(135deg, #EEF2FF, #E0E7FF); padding: 3px 8px; border-radius: 6px; border: 1px solid #C7D2FE; }
.status-select { border-radius: 8px !important; border: 1px solid #E0E7FF !important; background: #F5F3FF !important; color: #4F46E5 !important; font-weight: 700 !important; font-size: 11px !important; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7D2FE; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #4F46E5; }
#main-content { background: var(--bg-base); }
@keyframes riskBlink {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.12); opacity: 0.55; }
}
.risk-blink { animation: riskBlink 1s ease-in-out infinite; }
.status-select { width: 100%; border-radius: 0.5rem; border: 1px solid #CBD5E1; background: #F8FAFC; padding: 0.3rem 0.5rem; font-size: 0.68rem; font-weight: 800; color: #334155; outline: none; }