/* ===== RESET & BASE ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #050505;
  color: #e5e7eb;
  -webkit-font-smoothing: antialiased;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0c0c0e; }
::-webkit-scrollbar-thumb { background: #1e1e22; }
::-webkit-scrollbar-thumb:hover { background: #2a2a2e; }

/* ===== VIEW TRANSITIONS ===== */
.app-view { display: none; animation: fadeUp 0.25s ease; }
.app-view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== NAVIGATION ===== */
.nav-btn { color: #6b7280; border-top: 2px solid transparent; }
.nav-btn.nav-btn-active { color: #fbbf24; border-top-color: #fbbf24; }
.nav-btn:hover { color: #e5e7eb; }

.sidebar-btn { border-left: 2px solid transparent; }
.sidebar-btn.sidebar-active { color: #fbbf24; border-left-color: #fbbf24; background: rgba(251, 191, 36, 0.05); }

/* ===== MODALS ===== */
#modal-overlay { transition: opacity 0.25s ease; }
#modal-overlay.active { opacity: 1; }
.modal-content { transform: scale(0.96); transition: transform 0.25s ease; }
#modal-overlay.active .modal-content { transform: scale(1); }

/* ===== SEARCH OVERLAY ===== */
#search-overlay { transition: opacity 0.2s ease; }
#search-overlay:not(.hidden) { display: flex !important; }
#search-overlay input { border-radius: 0; }

/* ===== REP CHART ===== */
.chart-bar-container { display: flex; align-items: flex-end; height: 100%; gap: 6px; padding-top: 12px; }
.chart-bar-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.chart-bar { width: 100%; background: linear-gradient(to top, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.7)); min-height: 4px; transition: height 0.4s ease; }
.chart-bar-wrapper:hover .chart-bar { filter: brightness(1.2); }
.chart-label { font-size: 0.55rem; color: #6b7280; margin-top: 4px; font-family: monospace; }
.chart-tooltip { opacity: 0; pointer-events: none; background: #0c0c0e; border: 1px solid #1e1e22; padding: 4px 8px; font-size: 0.65rem; color: white; position: absolute; bottom: calc(100% + 4px); white-space: nowrap; z-index: 10; transition: opacity 0.2s; }
.chart-bar-wrapper:hover .chart-tooltip { opacity: 1; }

/* ===== UTILITIES ===== */
input, select, textarea { background: #0c0c0e; border: 1px solid #1e1e22; color: #e5e7eb; padding: 0.5rem 0.75rem; font-size: 0.875rem; transition: border-color 0.2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #fbbf24; }
button { transition: all 0.15s ease; }
button:active { transform: scale(0.97); }

/* ===== EXTRA BOTTOM PADDING FOR MOBILE ===== */
@media (max-width: 768px) {
  #view-container {
    padding-bottom: 14rem !important;
  }
}