/* User Profile Page Styling - Matches mockup design */

/* ============================================
   HIDE TABS (Projects, Packages, Public Activity, Starred Repositories)
   Using CSS to hide instead of removing template code
   ============================================ */
.user.profile overflow-menu .item[href*="projects"],
.user.profile overflow-menu .item[href*="packages"],
.user.profile overflow-menu .item[href*="activity"],
.user.profile overflow-menu .item[href*="stars"],
.user.profile overflow-menu .item[href*="watching"],
.user.profile overflow-menu .item[href*="code"] {
  display: none !important;
}

/* ============================================
   PROFILE SIDEBAR STYLING
   ============================================ */

/* Profile Card - Light grey background like mockup */
.user.profile .ui.card {
  box-shadow: none;
  border: none;
  border-radius: 12px;
  background: var(--color-muted);
  width: 100%;
  padding: 1.125rem;
}

.user.profile .ui.card .content {
  border: none;
  padding: 0 !important;
}

/* Avatar container - fills the card width */
.user.profile .ui.card #profile-avatar {
  background: transparent;
  border-radius: .75rem;
  padding: 0 !important;
  margin: 0;
  justify-content: center;
  overflow: hidden;
}

.user.profile .ui.card #profile-avatar .image {
  background: transparent;
  border-radius: .5rem;
  display: block;
  width: 100%;
  overflow: hidden;
}

.user.profile .ui.card #profile-avatar img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Username - LEFT aligned, primary color */
.user.profile .ui.card .profile-avatar-name {
  padding: 1.25rem 0 1rem;
  text-align: left !important;
  border-bottom: 1px solid var(--color-secondary);
  margin-bottom: 0;
}

.user.profile .ui.card .profile-avatar-name .header {
  text-align: left !important;
}

.user.profile .ui.card .profile-avatar-name .username {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 500;
  text-align: left !important;
  display: block;
}

.user.profile .ui.card .profile-avatar-name .username a {
  color: var(--color-primary);
}

/* Hide followers/following row */
.user.profile .ui.card .profile-avatar-name .tw-mt-2 {
  display: none;
}

/* User info list - LEFT aligned with divider lines */
.user.profile .ui.card .extra.content {
  padding: 0 !important;
  background: transparent !important;
}

.user.profile .ui.card .extra.content > ul {
  margin: 0;
  padding: 0;
}

.user.profile .ui.card .extra.content > ul > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-secondary);
  font-size: 14px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.user.profile .ui.card .extra.content > ul > li:last-child {
  border-bottom: none;
}

.user.profile .ui.card .extra.content > ul > li .svg {
  color: var(--color-text-light-2);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ============================================
   TABS STYLING
   ============================================ */

/* Keep only Articles tab visible with proper styling */
.user.profile overflow-menu.ui.secondary.pointing.tabular.menu {
  border-bottom: 1px solid var(--color-secondary);
  margin-bottom: 16px;
}

/* Scoped padding for overflow-menu items (instead of global base.css change) */
.user.profile overflow-menu .overflow-menu-items {
  padding: 0 1rem;
}

.user.profile overflow-menu .item {
  padding: 10px 16px !important;
  margin: 0 !important;
}

.user.profile overflow-menu .active.item {
  border-color: var(--color-primary) !important;
  color: var(--color-text) !important;
  font-weight: 500;
}

/* Tab count badge */
.user.profile overflow-menu .ui.small.label {
  background: transparent;
  color: var(--color-text);
  margin-left: 4px;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
}

/* ============================================
   SEARCH BAR STYLING
   ============================================ */

.user.profile .repo-search {
  margin-bottom: 0;
}

.user.profile .repo-search .ui.small.secondary.filter.menu {
  margin-bottom: 16px;
}

/* Filter and Sort dropdowns */
.user.profile .ui.small.secondary.filter.menu .ui.dropdown.type.jump.item {
  padding: 8px 12px;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  background: var(--color-body);
  margin-left: 8px;
}

.user.profile .ui.small.secondary.filter.menu .ui.dropdown.type.jump.item:hover {
  background: var(--color-hover);
}

/* ============================================
   ARTICLE LIST CONTAINER
   ============================================ */

.user.profile .flex-list {
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-body);
}

.user.profile .flex-list .flex-item {
  padding: 16px 20px;
}

.user.profile .flex-list > .flex-item:first-child {
  padding-top: 16px;
}

.user.profile .flex-list > .flex-item:last-child {
  padding-bottom: 16px;
}

/* ============================================
   ARTICLE LIST ITEM STYLING
   ============================================ */

/* Document icon for articles */
.user.profile .flex-item .flex-item-leading {
  align-self: flex-start;
  padding-top: 4px;
}

.user.profile .flex-item .flex-item-leading .svg {
  color: var(--color-text-light-2);
}

/* Article title */
.user.profile .flex-item .flex-item-title a {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 500;
}

/* Article description */
.user.profile .flex-item .flex-item-body.article-description {
  font-size: 14px;
  color: var(--color-text);
  margin-top: 4px;
}

/* Time ago text - italic styling */
.user.profile .flex-item .flex-item-body.article-time {
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-light-2);
  margin-top: 2px;
}

/* Right side stats (eye, forks) */
.user.profile .flex-item .flex-item-trailing {
  display: flex !important;
  gap: 16px;
  align-items: center;
}

.user.profile .flex-item .flex-item-trailing .flex-text-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-light-2);
  font-size: 13px;
}

.user.profile .flex-item .flex-item-trailing .svg {
  color: var(--color-text-light-2);
}