/* SkillBridge AI — Employee Home Portal & Feed CSS (1440px Desktop-First) */

.home-view {
  display: none;
  animation: fadeIn 0.2s ease-in-out;
}

/* ─── Hero Header Row & Quick Stats ─── */
.home-top-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* ─── Global AI Search Bar ─── */
.home-search-container {
  position: relative;
  margin-bottom: 28px;
  width: 100%;
}

.home-search-input-wrapper {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 6px 8px 6px 16px;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05);
  transition: all 0.2s ease;
}

.home-search-input-wrapper:focus-within {
  border-color: #1F6B4F;
  box-shadow: 0 0 0 4px rgba(31, 107, 79, 0.14), 0 4px 16px -2px rgba(15, 23, 42, 0.08);
}

.home-search-icon {
  font-size: 22px;
  color: #64748B;
  margin-right: 12px;
  flex-shrink: 0;
}

.home-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14.5px;
  color: #0F172A;
  font-family: inherit;
}

.home-search-input::placeholder {
  color: #94A3B8;
  font-size: 14px;
}

.home-search-clear-btn {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 8px;
  transition: color 0.15s ease;
}

.home-search-clear-btn:hover {
  color: #0F172A;
  background: #F1F5F9;
}

.home-search-submit-btn {
  background: linear-gradient(135deg, #1F6B4F 0%, #16533D 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(31, 107, 79, 0.25);
}

.home-search-submit-btn:hover {
  background: linear-gradient(135deg, #16533D 0%, #0F3D2C 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(31, 107, 79, 0.35);
}

mark.search-highlight {
  background: #FEF08A;
  color: #0F172A;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 3px;
}

/* Floating Results Dropdown */
.home-search-results-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.15);
  z-index: 100;
  max-height: 480px;
  overflow-y: auto;
  padding: 12px 0;
  animation: fadeIn 0.18s ease-out;
}

.search-result-group-header {
  padding: 8px 16px 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 4px;
}

.search-result-item {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.search-result-item:hover {
  background: #F8FAFC;
}

.search-result-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #E8F5EF;
  color: #1F6B4F;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-subtitle {
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #475569;
  flex-shrink: 0;
}

.home-greeting-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 280px;
}

.home-greeting-text h1 {
  font-family: var(--font-headline);
  font-size: 25px;
  font-weight: 700;
  color: #0F172A !important;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
  line-height: 1.35;
  display: flex;
  align-items: center;
  text-shadow: none;
}

.greeting-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 24px;
  line-height: 1;
}

.home-greeting-text p {
  font-size: 15px;
  color: #475569;
  max-width: 660px;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.home-hero-metrics {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-metric-pill {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.home-metric-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #E8F5EF;
  color: #1F6B4F;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-metric-info {
  display: flex;
  flex-direction: column;
}

.home-metric-val {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.home-metric-lbl {
  font-size: 11px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ─── Two-Column Grid Layout (Desktop 1440px) ─── */
.home-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(360px, 1fr);
  gap: 24px;
  align-items: start;
}

/* ─── Feed Left Column ─── */
.home-feed-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Feed Filters & Controls */
.feed-controls-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.feed-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.feed-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feed-filter-btn:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

.feed-filter-btn.active {
  background: #1F6B4F;
  color: #FFFFFF;
  border-color: #1F6B4F;
  box-shadow: 0 2px 8px rgba(31, 107, 79, 0.25);
}

/* Feed Post Card */
.feed-post-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.85);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.feed-post-card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--shadow-md);
}

.feed-post-card.is-pinned {
  border-left: 4px solid #1F6B4F;
  background: linear-gradient(180deg, #F8FAF9 0%, #FFFFFF 100%);
}

.feed-post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.feed-author-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feed-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #12261E 0%, #1F6B4F 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(31, 107, 79, 0.2);
}

.feed-author-text {
  display: flex;
  flex-direction: column;
}

.feed-author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--on-surface);
}

.feed-author-subtitle {
  font-size: 12px;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-category-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 6px;
}

.badge-announcement { background: #E8F5EF; color: #16533D; border: 1px solid #B6DFC9; }
.badge-news { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.badge-update { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.badge-event { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

.feed-pinned-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1F6B4F;
  background: #E8F5EF;
  padding: 3px 8px;
  border-radius: 6px;
}

.feed-post-title {
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
  line-height: 1.35;
}

.feed-post-body {
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  white-space: pre-line;
  margin-bottom: 16px;
}

/* Event Metadata Box */
.feed-event-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.feed-event-box .material-symbols-outlined {
  font-size: 24px;
  color: #D97706;
}

.feed-event-details {
  display: flex;
  flex-direction: column;
}

.feed-event-date {
  font-size: 13px;
  font-weight: 700;
  color: #92400E;
}

.feed-event-loc {
  font-size: 12px;
  color: #B45309;
}

/* Interaction Bar */
.feed-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F1F5F9;
  padding-top: 14px;
  margin-top: 8px;
}

.feed-action-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feed-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748B;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.feed-action-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.feed-action-btn.liked {
  color: #E11D48;
  background: #FFE4E6;
}

.feed-action-btn.liked .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

/* Collapsible Comments Section */
.feed-comments-container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #E2E8F0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feed-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.feed-comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feed-comment-bubble {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 14px;
  flex: 1;
  position: relative;
}

.feed-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.feed-comment-author {
  font-size: 12.5px;
  font-weight: 700;
  color: #0F172A;
}

.feed-comment-time {
  font-size: 11px;
  color: #94A3B8;
}

.feed-comment-text {
  font-size: 13px;
  color: #334155;
  line-height: 1.45;
}

.feed-comment-delete {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
}

.feed-comment-delete:hover {
  color: #EF4444;
}

/* Comment Input Box */
.feed-add-comment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.feed-comment-input {
  flex: 1;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
}

.feed-comment-input:focus {
  background: #FFFFFF;
  border-color: #1F6B4F;
  box-shadow: 0 0 0 3px rgba(31, 107, 79, 0.12);
}

.feed-comment-submit {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1F6B4F;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.feed-comment-submit:hover {
  background: #16533D;
  transform: scale(1.05);
}

/* ─── Right Widgets Column ─── */
.home-widgets-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-widget-card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226, 232, 240, 0.85);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.home-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 12px;
}

.home-widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #0F172A;
}

.home-widget-title .material-symbols-outlined {
  color: #1F6B4F;
  font-size: 20px;
}

/* Pulse Survey Widget Styles */
.survey-question-prompt {
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 12px;
  line-height: 1.45;
}

.survey-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.survey-opt-btn {
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #334155;
  font-family: inherit;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.survey-opt-btn:hover {
  border-color: #1F6B4F;
  background: #E8F5EF;
}

.survey-opt-btn.voted {
  border-color: #1F6B4F;
  background: #E8F5EF;
  font-weight: 600;
  color: #16533D;
}

/* Survey progress bar showing distribution */
.survey-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: rgba(31, 107, 79, 0.15);
  z-index: 1;
  border-radius: 7px;
  transition: width 0.4s ease;
}

.survey-opt-label-group {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Rating Stars */
.survey-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.survey-star-btn {
  background: none;
  border: none;
  color: #CBD5E1;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.15s ease;
  padding: 2px;
}

.survey-star-btn.active,
.survey-star-btn:hover {
  color: #F59E0B;
}

/* Activity Items */
.home-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.home-activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.home-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-activity-icon.task_alt { background: #ECFDF5; color: #059669; }
.home-activity-icon.verified { background: #E8F5EF; color: #1F6B4F; }
.home-activity-icon.pending_actions { background: #FFFBEB; color: #D97706; }
.home-activity-icon.ballot { background: #F0FDF4; color: #16A34A; }
.home-activity-icon.chat_bubble { background: #F8FAFC; color: #64748B; }

.home-activity-text {
  font-size: 13px;
  color: #1E293B;
  line-height: 1.4;
}

.home-activity-time {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .home-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Universal Curved Corner Architecture for Home View */
.home-card,
.home-announcement-card,
.home-poll-card,
.home-feed-card,
.home-learning-card,
.feed-controls-card,
.feed-post-card {
  border-radius: var(--radius-lg);
}

.home-poll-option,
.home-quick-action-btn,
.home-comment-input,
.home-comment-btn,
.home-learning-btn,
.home-filter-btn,
.home-search-container,
.home-search-input-wrapper,
.home-search-submit-btn,
.home-search-results-dropdown,
.home-search-clear-btn,
.btn,
.btn-primary,
.btn-outline,
.btn-secondary {
  border-radius: var(--radius-md);
}

.home-poll-badge,
.home-feed-tag,
.home-filter-chip,
.home-metric-pill,
.home-badge,
.status-pill,
.status-ready,
.status-near,
.status-dev,
.status-info,
.status-critical {
  border-radius: var(--radius-full);
}

.home-feed-author-avatar,
.home-leaderboard-avatar,
.home-metric-icon,
.home-quick-action-icon,
.home-activity-icon,
.search-result-icon {
  border-radius: var(--radius-full);
}

/* Revert Background Color to White */
#home-view,
.home-view,
.home-top-header-row,
.home-greeting-text {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

#home-greeting-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status Pill Centering & Fit Content for Home View */
.home-view .status-pill:not(:empty),
.home-view .status-ready:not(:empty),
.home-view .status-near:not(:empty),
.home-view .status-dev:not(:empty),
.home-view .status-info:not(:empty),
.home-view .status-critical:not(:empty) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: auto !important;
  width: fit-content !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 5px 12px !important;
  flex-shrink: 0 !important;
  border-radius: var(--radius-full) !important;
}

/* Empty alert banners or status pills must NEVER be displayed */
.status-pill:empty,
.status-critical:empty,
#login-error:empty,
#forgot-modal-alert:empty,
.login-error-alert:empty {
  display: none !important;
}