/* ============================================================
   GLASSGRID — COMPONENT VISUAL STYLES
   Visual rules for each named component.
   Structure lives in layout.css. 
   Colors/effects ONLY via token variables.
   ============================================================ */

/* ═══ NAVBAR ═══ */
.navbar {
  /* layout in layout.css */
}

.navbar__logo {
  font: var(--text-subheading);
  background: var(--color-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: var(--letter-spacing-tight);
}

.navbar__icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
  color: var(--color-text-secondary);
}

.navbar__icon-btn:hover,
.navbar__icon-btn:active {
  background: var(--color-interactive-hover);
  color: var(--color-text-primary);
}

/* ═══ BOTTOM NAVIGATION ═══ */
.bottombar-item {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring);
  color: var(--color-text-muted);
  border-radius: var(--radius-lg);
}

.bottombar-item:active {
  transform: scale(0.92);
}

.bottombar-item.active {
  color: var(--color-accent-primary);
}

.bottombar-item__label {
  font: var(--text-micro);
  letter-spacing: var(--letter-spacing-wide);
}

.bottombar-item__dot {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  margin: 0 auto;
}

/* ═══ POST CARD ═══ */
.post-card {
  background: var(--color-glass-fill);
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.post-card:focus-within {
  box-shadow: var(--shadow-lg);
}

.post-card__username {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.post-card__handle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.post-card__timestamp {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

.post-card__more-btn {
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-card__more-btn:hover { color: var(--color-text-primary); }

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

/* ── Action Icons ── */
.post-card__like-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-like-default);
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.post-card__like-btn.liked {
  color: var(--color-like-active);
}

.post-card__like-btn:active {
  transform: scale(0.88);
}

.post-card__comment-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-comment);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: transform var(--duration-fast) var(--ease-spring);
}

.post-card__comment-btn:active {
  transform: scale(0.88);
}

.post-card__save-btn {
  margin-left: auto;
  color: var(--color-save-default);
  transition: color var(--duration-fast) var(--ease-out);
}

.post-card__save-btn.saved {
  color: var(--color-save-active);
}

.post-card__caption-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.post-card__caption-username {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-right: var(--space-2);
}

.post-card__view-comments {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.post-card__view-comments:hover {
  color: var(--color-text-accent);
}

/* ═══ STORY REEL ═══ */
.story-item__ring {
  background: var(--story-ring-gradient);
}

.story-item__ring--seen {
  background: var(--color-glass-border-md);
}

.story-item__avatar {
  border: 2px solid var(--color-bg-base);
  border-radius: var(--radius-full);
}

.story-item__label {
  font: var(--text-micro);
  color: var(--color-text-secondary);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.story-item--add .story-item__ring {
  background: var(--color-glass-fill-md);
  border: 1px dashed var(--color-glass-border-md);
}

/* ═══ PROFILE HEADER ═══ */
.profile-header__stat-value {
  font: var(--text-subheading);
  color: var(--color-text-primary);
}

.profile-header__stat-label {
  font: var(--text-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.profile-header__stat-divider {
  width: 1px;
  background: var(--color-border-subtle);
  height: 32px;
  align-self: center;
}

.profile-header__name {
  font: var(--text-subheading);
  color: var(--color-text-primary);
}

.profile-header__username {
  font: var(--text-caption);
  color: var(--color-text-accent);
}

.profile-header__bio {
  font: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
}

.profile-header__location {
  font: var(--text-micro);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ═══ COMMENT BOX ═══ */
.comment-box__item__body {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-glass-fill);
  border: 1px solid var(--color-glass-border);
  flex: 1;
}

.comment-box__item__username {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.comment-box__item__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.comment-box__item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.comment-box__item__time {
  font: var(--text-micro);
  color: var(--color-text-muted);
}

.comment-box__item__like {
  font: var(--text-micro);
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.comment-box__item__like.liked {
  color: var(--color-like-active);
}

.comment-box__item__reply {
  font: var(--text-micro);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast);
}

.comment-box__item__reply:hover {
  color: var(--color-text-accent);
}

.comment-box__input-row {
  border-top: 1px solid var(--color-glass-border);
}

.comment-box__input {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.comment-box__submit {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  transition: opacity var(--duration-fast);
}

.comment-box__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══ BUTTONS ═══ */
.btn-primary {
  background: var(--color-accent-gradient);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow-accent);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.97) translateY(0);
}

.btn-secondary {
  background: var(--color-glass-fill-md);
  border: 1px solid var(--color-glass-border-md);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.btn-secondary:hover {
  background: var(--color-glass-fill-lg);
}

.btn-ghost {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.btn-ghost:hover {
  background: var(--color-interactive-hover);
  color: var(--color-text-primary);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* ═══ AVATAR ═══ */
.avatar {
  background: var(--color-glass-fill-lg);
  border: 1.5px solid var(--avatar-border-color);
}

.avatar--ring {
  padding: 2px;
  background: var(--story-ring-gradient);
  border: none;
}

.avatar--ring .avatar__img {
  border: 2px solid var(--color-bg-base);
  border-radius: var(--radius-full);
}

/* ═══ BADGE ═══ */
.badge-accent {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: var(--color-accent-primary);
}

.badge-success {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: var(--color-success);
}

.badge-error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.25);
  color: var(--color-error);
}

/* ═══ EXPLORE GRID ═══ */
.explore-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.explore-grid-item:hover img {
  transform: scale(1.04);
}

.explore-grid-item__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-bg-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.explore-grid-item:hover .explore-grid-item__overlay {
  opacity: 1;
}

.explore-grid-item__stats {
  display: flex;
  gap: var(--space-4);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

/* ═══ TOAST ═══ */
.toast {
  background: var(--color-glass-fill-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-glass-border-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ═══ INPUT ═══ */
.input-field {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--input-radius);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.textarea-field {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--input-radius);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  resize: none;
  line-height: var(--line-height-normal);
}

/* ═══ SECTION HEADERS ═══ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--page-padding);
}

.section-header__title {
  font: var(--text-subheading);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.section-header__action {
  font-size: var(--font-size-sm);
  color: var(--color-text-accent);
  font-weight: var(--font-weight-medium);
}

/* ═══ ADMIN PANEL ═══ */
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.admin-nav-item:hover {
  background: var(--color-interactive-hover);
  color: var(--color-text-primary);
}

.admin-nav-item.active {
  background: var(--color-glass-fill-md);
  color: var(--color-text-accent);
  border: 1px solid var(--color-glass-border);
}

.admin-card {
  border-radius: var(--card-radius);
  padding: var(--space-5);
}

.admin-card__title {
  font: var(--text-subheading);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.admin-card__label {
  font: var(--text-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-2);
}

.admin-token-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-glass-border-md);
  cursor: pointer;
  flex-shrink: 0;
}

.admin-token-name {
  font: var(--text-caption);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  flex: 1;
}

.admin-token-value {
  font: var(--text-micro);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}

.theme-card {
  border-radius: var(--card-radius);
  padding: var(--space-4);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.theme-card.selected {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow);
}

.theme-card__preview {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.theme-card__dot {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
}

/* ═══ TOGGLE SWITCH ═══ */
.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch__track {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-glass-fill-md);
  border: 1px solid var(--color-glass-border-md);
  transition: background var(--duration-normal) var(--ease-out);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 var(--space-1);
}

.toggle-switch__track.on {
  background: rgba(168, 85, 247, 0.25);
  border-color: var(--color-accent-primary);
}

.toggle-switch__thumb {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  transition: transform var(--duration-normal) var(--ease-spring),
              background var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}

.toggle-switch__track.on .toggle-switch__thumb {
  transform: translateX(22px);
  background: var(--color-accent-primary);
}

/* ═══ DIVIDER ═══ */
.divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-4) 0;
}