/* HeroUI v3 Card, Avatar, Separator, Input and Button source utilities expanded.
 * Original source: ../reference/heroui-home/{card,avatar,separator,input,button}.css (Apache-2.0).
 * Forum arrangement is adapted to existing PHP data and actions. */
.container.forum-page { width:100%; max-width:1320px; padding-inline:24px; margin-inline:auto; color:#fff; }
.forum-page__toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.forum-page h1 { margin:0; font-size:24px; line-height:32px; font-weight:600; }
.forum-search { display:flex; align-items:center; gap:10px; width:320px; max-width:100%; min-height:38px; padding:0 10px 0 12px; border:0; border-radius:12px; background:#161616; color:oklch(70.5% .015 286.067); }
.forum-search input { width:100%; min-width:0; padding:8px 0; border:0; outline:none; background:transparent; color:#fff; font-size:14px; line-height:20px; }
.forum-search input::placeholder { color:oklch(70.5% .015 286.067); }
.forum-search:focus-within { outline:2px solid #008fff; outline-offset:2px; }
.forum-search button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.forum-search button:hover { background:oklch(27.4% .006 286.033); }
.forum-category { padding:20px; margin-bottom:16px; border:0; border-radius:24px; background:#161616; }
.forum-category__header { display:flex; align-items:center; gap:10px; padding-bottom:12px; }
.forum-category__header > span { color:oklch(70.5% .015 286.067); font-size:16px; }
.forum-category h2 { margin:0; font-size:16px; line-height:24px; font-weight:500; }
.forum-page a { color:#fff; text-decoration:none; }
.forum-page a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.forum-section { display:grid; grid-template-columns:36px minmax(0,1.6fr) 75px minmax(0,1fr); gap:14px; align-items:center; padding:16px 0; }
.forum-section + .forum-section { border-top:1px solid rgba(255,255,255,.07); }
.forum-section__icon { display:flex; align-items:center; justify-content:center; width:36px; height:36px; color:oklch(70.5% .015 286.067); font-size:18px; }
.forum-section__title { font-size:14px; line-height:20px; font-weight:500; }
.forum-section__description { margin:4px 0 0; color:oklch(70.5% .015 286.067); font-size:13px; line-height:20px; }
.forum-section__stats { display:flex; flex-direction:column; gap:4px; color:oklch(70.5% .015 286.067); font-size:12px; line-height:18px; }
.forum-section__stats strong { color:#fff; font-weight:500; }
.forum-section__latest { display:flex; align-items:center; gap:10px; min-width:0; }
.forum-section__avatar { flex-shrink:0; }
.forum-section__avatar img { display:block; width:36px; height:36px; object-fit:cover; border-radius:12px; }
.forum-section__latest-text { min-width:0; }
.forum-section__latest-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; line-height:20px; }
.forum-section__meta { display:flex; flex-wrap:wrap; gap:2px 8px; color:oklch(70.5% .015 286.067); font-size:11px; line-height:16px; }
.forum-section__meta a { color:inherit; }
.forum-section__empty { color:oklch(70.5% .015 286.067); font-size:12px; }
.forum-section__children { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:8px; }
.forum-section__children a { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:oklch(70.5% .015 286.067); }
.forum-page .widget-card { background:#161616 !important; }
.forum-page .widget-card .card-body { font-size:13px; line-height:24px; }
.forum-page .widget-card .card-header { font-size:14px; line-height:20px; }
.forum-page .widget-card .avatar-img { border-radius:12px; object-fit:cover; }
@media(max-width:1199px) { .forum-section { grid-template-columns:32px minmax(0,1fr) 65px; gap:12px; } .forum-section__latest { grid-column:2 / -1; } }
@media(max-width:991px) { .forum-page__sidebar { margin-top:16px; } }
@media(max-width:575px) { .container.forum-page { padding-inline:16px; } .forum-page__toolbar { flex-direction:column; align-items:stretch; gap:16px; } .forum-search { width:100%; } .forum-category { padding:16px; border-radius:24px; } .forum-section { grid-template-columns:24px minmax(0,1fr); gap:10px; } .forum-section__stats { grid-column:2; flex-direction:row; gap:12px; } .forum-section__latest { grid-column:2; } .forum-section__icon { width:24px; height:24px; font-size:16px; } }
/* Finish page-level supporting cards and account actions. */
.forum-page__sidebar > .card { border:0 !important; border-radius:24px !important; background:#161616 !important; box-shadow:none !important; }
.forum-page__sidebar > .card > .card-header { padding:20px 20px 0; background:transparent !important; border:0; color:#fff !important; font-size:14px; line-height:20px; font-weight:500; }
.forum-page__sidebar > .card > .card-body { padding:16px 20px 20px; font-size:13px; line-height:20px; }
.forum-page__sidebar .latest-news-image img { border-radius:8px; object-fit:cover; }
.forum-page__sidebar .latest-news-name { font-size:13px; line-height:20px; font-weight:500; }
.forum-page__sidebar .latest-news-date { margin-top:4px; color:oklch(70.5% .015 286.067); font-size:12px; }
.forum-page .post-avatar img { width:36px; height:36px; border-radius:12px; object-fit:cover; }
.forum-page .post-info { min-width:0; font-size:13px; line-height:20px; }
.forum-page .post-info .username { color:oklch(70.5% .015 286.067) !important; }
body:has(.forum-page) .welcome-card { background:#161616 !important; border:0; border-radius:24px; }
body:has(.forum-page) .welcome-title { color:#fff !important; font-size:16px; line-height:24px; font-weight:500; }
body:has(.forum-page) .welcome-text { color:oklch(70.5% .015 286.067); font-size:14px; line-height:20px; }
body:has(.forum-page) .welcome-lr-col .btn { min-height:36px; padding:8px 16px; border:0; border-radius:24px; background:#008fff; color:#fff; font-size:14px; line-height:20px; font-weight:500; }

/* Cobalt applies an important background to every input; keep this search field unified. */
body .forum-search input { background:transparent !important; border:0 !important; color:#fff !important; height:38px; margin:0; border-radius:0 !important; box-shadow:none !important; }