/* CampusHub Module 12.1 — Premium Home / Feed UI
   Scope: .premium-home only, so existing application logic and other pages remain unchanged. */

:root {
  --ch-navy: #0b1733;
  --ch-navy-2: #102348;
  --ch-blue: #1677ff;
  --ch-blue-2: #2d8cff;
  --ch-teal: #15c6b5;
  --ch-bg: #f4f7fb;
  --ch-card: #ffffff;
  --ch-text: #13203a;
  --ch-muted: #6f7e96;
  --ch-line: #e5ebf3;
  --ch-soft-blue: #eef6ff;
  --ch-soft-teal: #ecfffb;
  --ch-shadow: 0 14px 36px rgba(15, 34, 68, .08);
  --ch-shadow-soft: 0 8px 24px rgba(15, 34, 68, .06);
  --ch-radius-xl: 24px;
  --ch-radius-lg: 20px;
  --ch-radius-md: 16px;
}
/* Module 12.1.1 — Premium top header */
body:has(.premium-home) .topbar {
  background: linear-gradient(135deg, var(--ch-navy) 0%, var(--ch-navy-2) 60%, #12345f 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 8px 24px rgba(11,23,51,.14) !important;
}
body:has(.premium-home) .topbar .brand,
body:has(.premium-home) .topbar .brand-text,
body:has(.premium-home) .topbar .site-name,
body:has(.premium-home) .topbar .app-name,
body:has(.premium-home) .topbar .topbar-title,
body:has(.premium-home) .topbar .logo-text,
body:has(.premium-home) .topbar .navbar-brand {
  color: #fff !important;
}
body:has(.premium-home) .topbar a,
body:has(.premium-home) .topbar button,
body:has(.premium-home) .topbar i {
  color: #fff;
}
body:has(.premium-home) .topbar input[type="search"],
body:has(.premium-home) .topbar input[type="text"] {
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: var(--ch-text) !important;
}
body:has(.premium-home) .topbar input::placeholder {
  color: #7d899b !important;
}
body:has(.premium-home) .topbar .notification-btn,
body:has(.premium-home) .topbar .topbar-action,
body:has(.premium-home) .topbar .icon-btn,
body:has(.premium-home) .topbar .action-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.13) !important;
}
body:has(.premium-home) .topbar img {
  border-color: rgba(255,255,255,.82) !important;
}
@media (max-width: 768px) {
  body:has(.premium-home) .topbar {
    background: linear-gradient(135deg, #0b1733 0%, #102348 65%, #12345f 100%) !important;
    box-shadow: 0 6px 18px rgba(11,23,51,.16) !important;
  }
}


body:has(.premium-home) {
  background:
    radial-gradient(circle at 12% 2%, rgba(45,140,255,.08), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(21,198,181,.06), transparent 28%),
    var(--ch-bg);
}

.layout.premium-home {
  align-items: start;
  gap: 18px;
}

.premium-home .main-content {
  min-width: 0;
}

/* Welcome strip */
.ch-home-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 4px 4px 0;
}
.ch-home-intro h1 {
  margin: 0;
  color: var(--ch-navy);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
}
.ch-home-intro p {
  margin: 5px 0 0;
  color: var(--ch-muted);
  font-size: .94rem;
}
.ch-home-intro-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #dce8f8;
  border-radius: 999px;
  color: #1b5fba;
  background: rgba(255,255,255,.88);
  box-shadow: var(--ch-shadow-soft);
  font-size: .82rem;
  font-weight: 750;
}
.ch-home-intro-badge i { color: var(--ch-blue); }

/* Composer */
.ch-composer-card {
  position: relative;
  overflow: visible;
  background: rgba(255,255,255,.97) !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-radius-xl) !important;
  padding: 18px !important;
  box-shadow: var(--ch-shadow) !important;
}
.ch-composer-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 12px;
  align-items: start;
}
.ch-composer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(15, 34, 68, .12);
}
.ch-composer-main { min-width: 0; }
.ch-composer-main .app-post-input-wrap {
  padding: 0 !important;
}
.ch-composer-main .composer-one-line {
  width: 100%;
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 1px solid #e1e8f1 !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  color: var(--ch-text) !important;
  font-size: .98rem;
  line-height: 1.5;
  outline: none;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ch-composer-main .composer-one-line:focus {
  border-color: #a9cbff !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(22,119,255,.08) !important;
}
.ch-composer-main .composer-one-line::placeholder {
  color: #8996aa;
}
.ch-composer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 2px 0;
  color: var(--ch-muted);
  font-size: .82rem;
}
.ch-composer-meta strong { color: var(--ch-text); }

.ch-composer-card .composer-extras {
  margin: 14px 0 0 60px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #e3ecf7;
  border-radius: 16px;
}
.ch-composer-card .composer-actions {
  margin: 12px 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.ch-composer-card .composer-actions .btn-primary {
  min-width: 122px;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--ch-blue), #2364e8) !important;
  box-shadow: 0 8px 20px rgba(22,119,255,.22);
  font-weight: 750;
}

/* Quick actions */
.ch-home-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf1f6;
}
.ch-quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  background: #fff;
  color: #2b3851;
  text-decoration: none !important;
  font-size: .88rem;
  font-weight: 750;
  box-shadow: 0 5px 14px rgba(15,34,68,.035);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ch-quick-action:hover {
  transform: translateY(-1px);
  border-color: #cfe0f5;
  box-shadow: 0 10px 22px rgba(15,34,68,.07);
  color: var(--ch-navy);
}
.ch-quick-action i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.ch-quick-action.is-post i { background: #eaf3ff; color: #1573ee; }
.ch-quick-action.is-ai i { background: #f0edff; color: #7856e8; }
.ch-quick-action.is-people i { background: #eafcf8; color: #0aa98f; }
.ch-quick-action.is-chat i { background: #fff1e9; color: #f0782d; }

/* Feed heading */
.ch-feed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 22px 2px 12px;
}
.ch-feed-heading h2 {
  margin: 0;
  color: var(--ch-navy);
  font-size: 1.24rem;
  font-weight: 820;
  letter-spacing: -.02em;
}
.ch-feed-heading p {
  margin: 4px 0 0;
  color: var(--ch-muted);
  font-size: .88rem;
}
.ch-feed-refresh {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 13px !important;
  border: 1px solid #dfe8f3 !important;
  background: #fff !important;
  color: #5e718d !important;
  box-shadow: 0 6px 16px rgba(15,34,68,.04);
}
.ch-feed-refresh:hover { color: var(--ch-blue) !important; }

/* Feed cards returned by existing AJAX */
.premium-home #feedWrap {
  display: grid;
  gap: 14px;
  margin-top: 0 !important;
}
.premium-home #feedWrap > .feed-card,
.premium-home #feedWrap .feed-card {
  position: relative;
  overflow: hidden;
  background: var(--ch-card) !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-radius-xl) !important;
  box-shadow: var(--ch-shadow-soft) !important;
  padding: 17px 18px 12px !important;
}
.premium-home .feed-card:hover {
  box-shadow: 0 14px 32px rgba(15,34,68,.08) !important;
}
.premium-home .feed-card .user-link,
.premium-home .feed-card strong,
.premium-home .feed-card .post-author,
.premium-home .feed-card .post-user-name {
  color: var(--ch-text) !important;
  font-weight: 800;
  text-decoration: none;
}
.premium-home .feed-card .muted,
.premium-home .feed-card .post-meta,
.premium-home .feed-card small {
  color: #7c8ba1 !important;
}
.premium-home .feed-card .post-body {
  margin-top: 12px;
  color: #25324a;
  font-size: .96rem;
  line-height: 1.62;
}
.premium-home .feed-card .post-body p { margin-bottom: 8px; }
.premium-home .feed-card .readMoreBtn,
.premium-home .feed-card .readMoreCommentBtn {
  border: 0;
  background: transparent;
  color: var(--ch-blue);
  padding: 0;
  font-weight: 700;
}
.premium-home .feed-card .post-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  padding: 11px 2px 9px;
  border-top: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  color: #75859d;
  font-size: .84rem;
}
.premium-home .feed-card .stat-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: #75859d;
  padding: 0;
  font-size: .84rem;
  cursor: pointer;
}
.premium-home .feed-card .post-actions,
.premium-home .feed-card .feed-actions,
.premium-home .feed-card .action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
  padding-top: 8px;
}
.premium-home .feed-card .likePostBtn,
.premium-home .feed-card .commentBtn,
.premium-home .feed-card .sharePostBtn,
.premium-home .feed-card .post-action-btn {
  min-height: 38px;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #5f718b !important;
  font-weight: 720 !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease;
}
.premium-home .feed-card .likePostBtn:hover,
.premium-home .feed-card .commentBtn:hover,
.premium-home .feed-card .sharePostBtn:hover,
.premium-home .feed-card .post-action-btn:hover {
  background: #f5f8fc !important;
  color: var(--ch-blue) !important;
}
.premium-home .feed-card .likePostBtn.liked,
.premium-home .feed-card .liked {
  color: #ef476f !important;
}
.premium-home #feedWrap .feed-loading,
.premium-home #feedWrap .empty-state {
  border: 1px dashed #d6e0eb;
  border-radius: 20px;
  background: rgba(255,255,255,.8);
  color: var(--ch-muted);
  padding: 28px 18px;
  text-align: center;
}

/* Right column polish */
.premium-home + * { box-sizing: border-box; }
.layout.premium-home .right-panel .card {
  border: 1px solid var(--ch-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--ch-shadow-soft) !important;
  background: rgba(255,255,255,.95) !important;
}
.layout.premium-home .right-panel .section-title {
  color: var(--ch-navy);
  font-weight: 800;
}

/* Comments bottom sheet */
body:has(.premium-home) #appSheet .app-sheet-panel {
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 60px rgba(15,34,68,.16);
}
body:has(.premium-home) #appSheet .app-sheet-head h3 {
  color: var(--ch-navy);
  font-weight: 800;
}
body:has(.premium-home) #appSheet .one-line-comment-input {
  border-radius: 16px !important;
  border: 1px solid #dde7f1 !important;
  background: #f8fafc !important;
}

/* Desktop */
@media (min-width: 1200px) {
  .layout.premium-home .main-content {
    max-width: 760px;
  }
  .layout.premium-home .right-panel {
    position: sticky;
    top: 92px;
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .ch-home-quick-actions {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* Mobile */
@media (max-width: 768px) {
  body:has(.premium-home) {
    background: #f5f8fc;
  }
  .layout.premium-home {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 10px calc(92px + env(safe-area-inset-bottom,0px)) !important;
  }
  .layout.premium-home .main-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .ch-home-intro {
    margin: 2px 3px 12px;
  }
  .ch-home-intro h1 { font-size: 1.22rem; }
  .ch-home-intro p { font-size: .84rem; }
  .ch-home-intro-badge { display: none; }
  .ch-composer-card {
    border-radius: 20px !important;
    padding: 14px !important;
    box-shadow: 0 8px 24px rgba(15,34,68,.055) !important;
  }
  .ch-composer-row {
    grid-template-columns: 42px minmax(0,1fr);
    gap: 10px;
  }
  .ch-composer-avatar {
    width: 42px;
    height: 42px;
  }
  .ch-composer-main .composer-one-line {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    font-size: .94rem;
  }
  .ch-composer-meta { display: none; }
  .ch-composer-card .composer-extras,
  .ch-composer-card .composer-actions {
    margin-left: 52px;
  }
  .ch-home-quick-actions {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 7px;
    margin-top: 13px;
    padding-top: 13px;
  }
  .ch-quick-action {
    min-height: 66px;
    flex-direction: column;
    gap: 5px;
    padding: 8px 4px;
    border-radius: 15px;
    font-size: .72rem;
    line-height: 1.05;
    text-align: center;
  }
  .ch-quick-action i {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .ch-feed-heading {
    margin: 18px 3px 10px;
  }
  .ch-feed-heading h2 { font-size: 1.12rem; }
  .ch-feed-heading p { font-size: .8rem; }
  .ch-feed-refresh {
    width: 38px;
    height: 38px;
  }
  .premium-home #feedWrap {
    gap: 11px;
  }
  .premium-home #feedWrap > .feed-card,
  .premium-home #feedWrap .feed-card {
    border-radius: 20px !important;
    padding: 15px 14px 10px !important;
    box-shadow: 0 6px 18px rgba(15,34,68,.045) !important;
  }
  .premium-home .feed-card .post-body {
    font-size: .93rem;
    line-height: 1.58;
  }
  .premium-home .feed-card .post-stats {
    gap: 8px 12px;
    font-size: .79rem;
  }
}

@media (max-width: 390px) {
  .ch-quick-action span { font-size: .68rem; }
  .ch-home-quick-actions { gap: 5px; }
  .ch-composer-card { padding: 12px !important; }
}

/* Accessibility / reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ch-quick-action,
  .ch-composer-main .composer-one-line { transition: none !important; }
}