/* ── Topbar ── */
.topbar {
  background: #ffffff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 24px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Desktop Nav Tabs ── */
.nav-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-tab {
  padding: 6px 14px;
  border-radius: 7px;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-tab:hover {
  background: var(--bg);
  color: var(--text-primary);
}
.nav-tab.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.nav-tab svg { width: 14px; height: 14px; opacity: 0.7; }
.nav-tab.active svg { opacity: 1; }

/* ── Avatar Button ── */
.avatar-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.avatar-btn:hover { background: #302272; transform: scale(1.05); }
.avatar-btn:active { transform: scale(0.96); }

/* ── Avatar Dropdown ── */
.avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: 6px;
  display: none;
  z-index: 200;
}
.avatar-dropdown.open { display: block; }
.avatar-dropdown-email {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.avatar-dropdown-email .label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.avatar-dropdown-email .email {
  font-size: 12px;
  color: var(--text-secondary);
  word-break: break-all;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: "Manrope", sans-serif;
  color: var(--text-primary);
  transition: background 0.12s;
}
.dropdown-item:hover { background: var(--bg); }
.dropdown-item.logout { color: var(--red); }
.dropdown-item.logout:hover { background: var(--red-bg); }
.dropdown-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.avatar-wrap { position: relative; }

/* ── Hamburger ── */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.15s;
  flex-shrink: 0;
}

/* ── Refresh Button (Security Rating) ── */
.refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.refresh-btn:hover:not(:disabled) { background: var(--bg); color: var(--accent); }
.refresh-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.refresh-btn svg { width: 13px; height: 13px; display: block; }
.refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }
.hamburger-btn:hover { background: var(--bg); }
.hamburger-btn svg { width: 20px; height: 20px; }

/* ── Mobile Nav Drawer ── */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px 12px;
  z-index: 99;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  flex-direction: column;
  gap: 2px;
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: "Manrope", sans-serif;
  transition: background 0.12s;
}
.mobile-nav-tab:hover { background: var(--bg); color: var(--text-primary); }
.mobile-nav-tab.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.mobile-nav-tab svg { width: 16px; height: 16px; }

/* ── Filter Bar ── */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0 10px;
  gap: 8px;
}
.filter-label { font-size: 12px; color: var(--text-secondary); }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  pointer-events: none;
}
.select-pill {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 28px 5px 10px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 120px;
}

/* ── Badges ── */
.badge-blue  { background: var(--accent-light); color: var(--accent); }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red   { background: var(--red-bg); color: var(--red); }
.badge-active  { background: var(--green-bg); color: var(--green); }
.badge-coming  { background: var(--yellow-bg); color: var(--yellow); }
.badge-partner { background: var(--accent-light); color: var(--accent); }

.badge-verified {
  background: var(--green-bg);
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.badge-customers {
  background: var(--accent-light);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}
.ci-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; }

/* ── Meta Row ── */
.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-top: 4px;
}
.industry-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.industry-tag span {
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nav-tabs { display: none; }
  .hamburger-btn { display: flex; width: 40px; height: 40px; }
  .hamburger-btn svg { width: 23px; height: 23px; }

  .avatar-btn { width: 38px; height: 38px; font-size: 14px; }

  .mobile-nav-tab { font-size: 16px; padding: 12px 14px; }
  .mobile-nav-tab svg { width: 18px; height: 18px; }

  .avatar-dropdown-email .label { font-size: 12px; }
  .avatar-dropdown-email .email { font-size: 14px; }
  .dropdown-item { font-size: 15px; padding: 9px 12px; }
  .dropdown-item svg { width: 16px; height: 16px; }

  .filter-label { font-size: 14px; }
  .select-pill { font-size: 14px; padding: 7px 30px 7px 12px; }

  .badge-verified,
  .badge-customers,
  .ci-badge { font-size: 12px; padding: 3px 9px; }

  .industry-tag { font-size: 13px; }
}

@media (max-width: 600px) {
  /* Card header (title + controls, e.g. Security Rating's time tabs) was a
     single unwrapped flex row. On narrow phones "Security Rating" + all 4
     time-tab buttons didn't fit on one line and had nowhere to wrap to,
     which pushed the whole page wider than the viewport and made the
     browser render everything zoomed out to compensate. Wrap the header
     and let the tabs scroll horizontally within their own row instead. */
  .card-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .card-controls {
    width: 100%;
  }
  .time-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .time-tabs::-webkit-scrollbar { display: none; }
  .time-tab {
    flex-shrink: 0;
    font-size: 13px;
    padding: 6px 12px;
  }
}