@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }

.nav-link { padding: 0 14px; height: 56px; display: inline-flex; align-items: center; font-size: 14px; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.1s; }
.nav-link:hover { color: #0f172a; }
.nav-link.active { color: #0f172a; font-weight: 600; border-bottom-color: #C9960A; }

.panel-wrap { width: 0; flex-shrink: 0; transition: width 0.3s cubic-bezier(0.4,0,0.2,1); overflow: hidden; }
.panel-wrap.open { width: 460px; border-left: 1px solid #e2e8f0; }

.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 500; line-height: 1.6; }
.badge-strong { background: #fef3c7; color: #92400e; }
.badge-good { background: #f1f5f9; color: #475569; }

.filter-pill { padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; background: #f1f5f9; color: #475569; transition: background 0.1s; }
.filter-pill.active { background: #0f172a; color: white; }
.filter-pill:hover:not(.active) { background: #e2e8f0; }

.subtab { padding: 10px 0; margin-right: 28px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; color: #64748b; cursor: pointer; white-space: nowrap; }
.subtab.active { color: #0f172a; border-bottom-color: #C9960A; }
.subtab:hover:not(.active) { color: #334155; }

.imsg-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border-radius: 10px; background: #007AFF; color: white; font-size: 13px; font-weight: 500; cursor: pointer; border: none; text-align: left; text-decoration: none; transition: background 0.1s; }
.imsg-btn:hover { background: #0062cc; }

.slot-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; transition: all 0.2s; overflow: hidden; }
.slot-circle.empty { border: 2px dashed #cbd5e1; background: white; color: #94a3b8; }

.panel-scroll { width: 100%; height: 100%; overflow-y: auto; }
.panel-scroll::-webkit-scrollbar { width: 4px; }
.panel-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* Mobile: the detail panel becomes a full-screen overlay instead of a
   460px sidebar squeezed next to the card grid, and non-functional nav
   decoration (search box, "Reports" tab) gives way to space the real
   nav items need to stay on one line without horizontal scroll. */
@media (max-width: 768px) {
  .panel-wrap.open {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-left: none;
    z-index: 60;
    background: white;
  }
  .hide-mobile { display: none !important; }
  .nav-link { padding: 0 8px; }
  .identity-text { font-size: 12px !important; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
}