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

:root {
  --blue: #4a90e2;
  --blue-dark: #357abd;
  --green: #27ae60;
  --orange: #e67e22;
  --red: #e74c3c;
  --gray-light: #f5f7fa;
  --gray: #dde1e7;
  --gray-dark: #888;
  --text: #2c3e50;
  --text-light: #555;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,.08);
}

body { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--gray-light); }

/* Layout */
#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
#topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1.2rem; background: #fff; border-bottom: 1px solid var(--gray); flex-shrink: 0; }
#topbar h1 { font-size: 1.1rem; font-weight: 700; color: var(--blue); }
#topbar .spacer { flex: 1; }
#user-info { font-size: .85rem; color: var(--gray-dark); display: flex; align-items: center; gap: .75rem; }
#user-info .badge-admin { background: var(--blue); color: #fff; padding: .2rem .5rem; border-radius: 4px; font-size: .75rem; }
#user-info .badge-tester { background: var(--gray); color: var(--text-light); padding: .2rem .5rem; border-radius: 4px; font-size: .75rem; }

/* Tabs */
#tabs { display: flex; gap: 0; padding: 0 1.2rem; background: #fff; border-bottom: 1px solid var(--gray); flex-shrink: 0; }
.tab-btn { padding: .75rem 1.25rem; border: none; background: none; cursor: pointer; font-size: .9rem; color: var(--text-light); border-bottom: 3px solid transparent; font-weight: 500; }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-btn:hover:not(.active) { color: var(--text); }

#tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.tab-panel { display: none; flex: 1; overflow: hidden; }
.tab-panel.active { display: flex; flex-direction: column; }

/* Buttons */
.btn { padding: .45rem .9rem; border: none; border-radius: var(--radius); cursor: pointer; font-size: .85rem; font-weight: 500; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-secondary { background: var(--gray); color: var(--text); }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }
.btn-icon { background: none; border: none; cursor: pointer; padding: .25rem; border-radius: 4px; color: var(--gray-dark); }
.btn-icon:hover { background: var(--gray-light); color: var(--text); }

/* Cards */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.card-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.card-header h3 { font-size: .95rem; font-weight: 600; flex: 1; }

/* Forms */
.form-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .8rem; font-weight: 600; color: var(--text-light); }
.form-group input, .form-group select, .form-group textarea {
  padding: .45rem .7rem; border: 1px solid var(--gray); border-radius: 6px; font-size: .9rem; color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--blue);
}
.form-group.flex-1 { flex: 1; min-width: 140px; }
.form-group.flex-2 { flex: 2; min-width: 200px; }

/* Filter panel */
#filter-panel { background: #fff; border-bottom: 1px solid var(--gray); padding: .75rem 1.2rem; }
.filter-toggle { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--text-light); user-select: none; }
.filter-body { margin-top: .75rem; display: none; }
.filter-body.open { display: block; }

/* Projects split view */
#projects-panel { display: flex; gap: 1rem; flex: 1; overflow: hidden; padding: 1rem; }
.project-col { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
.project-col-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; flex-shrink: 0; }
.project-col-header h2 { font-size: .95rem; font-weight: 700; flex: 1; }
.project-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }

/* Project card */
.project-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem 1rem; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.project-card:hover { border-color: var(--blue); }
.project-card.selected { border-color: var(--blue); background: #eef4fc; }
.project-card .pname { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.project-card .pmeta { font-size: .8rem; color: var(--gray-dark); display: flex; gap: .5rem; flex-wrap: wrap; }
.project-card .pmeta span { background: var(--gray-light); padding: .1rem .4rem; border-radius: 4px; }
.project-card .pmeta .tag-ifi { background: #d4efdf; color: var(--green); }
.project-card .pmeta .tag-overlap { background: #fde8d8; color: var(--orange); }

/* Badges */
.badge { display: inline-block; padding: .1rem .45rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.badge-pending { background: #fff3cd; color: #856404; }
.badge-approved { background: #d4edda; color: #155724; }
.badge-rejected { background: #f8d7da; color: #721c24; }

/* Pagination */
.pagination { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; justify-content: center; flex-shrink: 0; }
.pagination button { padding: .3rem .6rem; border: 1px solid var(--gray); border-radius: 4px; background: #fff; cursor: pointer; }
.pagination button.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.pagination button:disabled { opacity: .4; cursor: default; }

/* Timeline */
#timeline-container { background: #fff; border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.timeline-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .82rem; }
.timeline-label { width: 200px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-light); }
.timeline-bar-wrap { flex: 1; position: relative; height: 22px; background: var(--gray-light); border-radius: 3px; overflow: visible; }
.timeline-bar { position: absolute; height: 100%; border-radius: 3px; }
.bar-project { background: var(--blue); opacity: .8; }
.bar-overlap { background: var(--orange); opacity: .7; background-image: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,.4) 3px, rgba(255,255,255,.4) 6px); }
.bar-gap { background: var(--gray); opacity: .5; border: 1px dashed var(--gray-dark); }
.timeline-meta { font-size: .78rem; color: var(--gray-dark); white-space: nowrap; }
.timeline-warn { color: var(--orange); font-weight: 600; }
.timeline-gap-warn { color: #856404; font-weight: 600; }

/* Eligibility */
.elig-result { border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .75rem; }
.elig-eligible { background: #d4edda; }
.elig-partial { background: #fff3cd; }
.elig-not_eligible { background: #f8d7da; }
.elig-checks table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .5rem; }
.elig-checks th { text-align: left; padding: .3rem .5rem; background: rgba(0,0,0,.05); }
.elig-checks td { padding: .3rem .5rem; border-top: 1px solid rgba(0,0,0,.06); }
.status-pass { color: var(--green); font-weight: 600; }
.status-fail { color: var(--red); font-weight: 600; }
.status-warn { color: var(--orange); font-weight: 600; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-overlay.hidden { display: none; }
.modal { background: #fff; border-radius: 12px; padding: 1.5rem; width: 640px; max-height: 85vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.2); }
.modal-header { display: flex; align-items: center; margin-bottom: 1.25rem; }
.modal-header h2 { flex: 1; font-size: 1.1rem; }
.modal .form-row { margin-bottom: 1rem; }

/* CV Preview */
#cv-panel { display: flex; gap: 1rem; flex: 1; overflow: hidden; padding: 1rem; }
#cv-selected { flex: 1; overflow-y: auto; }
#cv-preview-pane { flex: 1.2; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.cv-proj-item { background: #fff; border-radius: var(--radius); padding: .75rem 1rem; display: flex; align-items: center; gap: .5rem; box-shadow: var(--shadow); cursor: grab; }
.cv-proj-item:active { cursor: grabbing; }
.cv-proj-item .drag-handle { color: var(--gray-dark); font-size: 1.1rem; }
.cv-proj-item .pname { flex: 1; font-size: .88rem; font-weight: 600; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 3px; }

/* Spinner */
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--gray); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
#toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; display: flex; flex-direction: column; gap: .5rem; }
.toast-msg { background: #323232; color: #fff; padding: .65rem 1.1rem; border-radius: 8px; font-size: .85rem; animation: slideIn .2s ease; }
.toast-msg.success { background: var(--green); }
.toast-msg.error { background: var(--red); }
@keyframes slideIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* Sub tabs */
.sub-tab-btn { padding:.55rem 1rem; border:none; background:none; cursor:pointer; font-size:.85rem; color:var(--text-light); border-bottom:3px solid transparent; font-weight:500; white-space:nowrap; }
.sub-tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
.sub-tab-btn:hover:not(.active) { color:var(--text); }
.sub-panel { display:none; flex:1; overflow:hidden; }
.sub-panel.active { display:flex; flex-direction:column; }

/* Admin panel dropdown */
#admin-dropdown { position: absolute; right: 1.2rem; top: 3.2rem; background: #fff; border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,.15); padding: .75rem; width: 360px; z-index: 50; display: none; }
#admin-dropdown.open { display: block; }