/* Load after forum.css, forum_detail.css and admin_extra.css.
   Layout refinements only. Keep the forum's compact visual language. */

html, body { max-width: 100%; }
.page-shell, .forum-layout, .forum-main, .forum-sidebar,
.category, .forum-list, .forum-row, .forum-copy, .forum-last,
.topic-list, .topic-row, .topic-copy, .thread-page,
.post-card, .post-content, .reply-panel, .reply-composer-body,
.profile-layout, .profile-content, .profile-sidebar,
.forum-detail, .forum-detail-thread, .forum-detail-thread-main,
.admin-main-shell, .admin-main-shell > .section { min-width: 0; }

/* Images and member markers must remain circular at any zoom level. */
.forum-avatar, .side-topic-avatar, .post-avatar,
.reply-composer-avatar, .profile-avatar, .forum-detail-avatar,
.member-directory-row .post-avatar {
  width: var(--avatar-size, auto);
  height: var(--avatar-size, auto);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  flex-basis: var(--avatar-size, auto);
  flex-shrink: 0;
}
.forum-avatar, .side-topic-avatar { --avatar-size: 25px; }
.post-avatar { --avatar-size: 70px; }
.reply-composer-avatar { --avatar-size: 60px; }
.profile-avatar { --avatar-size: 92px; }
.forum-detail-avatar { --avatar-size: 32px; }
.member-directory-row .post-avatar { --avatar-size: 48px; }
.forum-avatar img, .side-topic-avatar img, .post-avatar img,
.reply-composer-avatar img, .profile-avatar img,
.forum-detail-avatar img, .member-directory-row .post-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.topic-marker { width: 32px; height: 32px; flex: 0 0 32px; aspect-ratio: 1 / 1; border-radius: 50%; }
.forum-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.forum-icon svg { width: 25px; height: 25px; }

/* Allow long translated labels, email addresses and topic titles to wrap. */
.forum-copy > a, .forum-copy strong, .topic-title,
.forum-detail-thread-title, .forum-detail-child-copy strong,
.post-author > strong, .admin-sidebar-label,
.profile-identity, .member-directory-row > span:nth-child(2),
.admin-main-shell .panel, .admin-detail-value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.forum-last strong, .forum-last small { max-width: 100%; }
.forum-toolbar nav, .profile-tabs { scrollbar-width: thin; }
.forum-toolbar nav a, .profile-tabs a { flex-shrink: 0; }

/* Full-width monitors keep a readable content line length. */
@media (min-width: 1600px) {
  .site-header { padding-inline: max(28px, calc((100% - 1180px) / 2)); }
  .page-shell, .site-footer { max-width: 1180px; }
  .forum-toolbar nav { max-width: 1180px; }
  html[data-admin] .admin-main-shell > .section { width: min(100%, 1200px); }
}

/* Tablet: forum list stays a table while the activity rail moves below it. */
@media (min-width: 821px) and (max-width: 1199px) {
  .site-header { padding-inline: clamp(18px, 3vw, 28px); }
  .forum-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .forum-row { grid-template-columns: 30px minmax(0, 1fr) 43px 43px minmax(105px, 180px); gap: 6px; }
  .forum-last strong { max-width: 145px; }
  html[data-admin] .admin-main-shell { padding-inline: 26px; }
}

@media (max-width: 1024px) {
  html[data-admin] .admin-dashboard-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-admin] .admin-dashboard-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-admin] .admin-form-row { grid-template-columns: minmax(150px, 30%) minmax(0, 1fr); }
  html[data-admin] .admin-dashboard-status dl { grid-template-columns: minmax(145px, 30%) minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .site-header { justify-content: space-between; align-content: center; }
  .site-header .brand { flex: 0 1 auto; min-width: 0; }
  .site-header .brand-logo { display: block; width: auto; max-width: min(43vw, 190px); height: auto; max-height: 52px; object-fit: contain; }
  .site-header .main-nav { order: 2; flex: 1 0 100%; gap: 0; min-width: 0; margin: 0; overflow-x: auto; overflow-y: hidden; }
  .site-header .main-nav a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; white-space: nowrap; }
  .site-header .header-actions { order: 1; flex: 0 1 auto; min-width: 0; margin: 0; }
  .forum-toolbar nav { max-width: 100%; overflow-x: auto; white-space: nowrap; }
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .forum-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forum-row { grid-template-columns: 30px minmax(0, 1fr) 43px 43px minmax(110px, 185px); }
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-tabs { overflow-x: auto; white-space: nowrap; }
  html[data-admin] .admin-main-shell { margin-inline-start: 0; padding: 18px 16px 48px; }
  html[data-admin] section.section > .admin-nav.admin-sidebar {
    position: static; width: 100%; height: auto; max-height: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; margin: 0 0 18px; padding: 0 0 12px; overflow: visible;
  }
  html[data-admin] .admin-sidebar-group, html[data-admin] .admin-sidebar-foot { grid-column: 1 / -1; }
  html[data-admin] .admin-sidebar .admin-sidebar-link { min-width: 0; padding: 10px 8px; }
  html[data-admin] .admin-sidebar .admin-sidebar-link .admin-sidebar-label { overflow-wrap: anywhere; }
  html[data-admin] .admin-form-row { grid-template-columns: minmax(145px, 30%) minmax(0, 1fr); }
  html[data-admin] .admin-form-row > label { justify-content: flex-end; padding: 13px 11px; text-align: end; }
  html[data-admin] .admin-form-actions { padding-inline-start: 30%; }
  html[data-admin] .admin-detail-label { text-align: end; }
}

@media (max-width: 620px) {
  /* Keep signed-in controls reachable. The base CSS hides them at this width. */
  .site-header { height: auto; min-height: 0; padding: 6px 10px 0; gap: 0 8px; }
  .site-header .brand { height: 42px; }
  .site-header .brand-logo { max-width: min(46vw, 155px); max-height: 41px; }
  .site-header .main-nav { order: 3; margin-top: 2px; }
  .site-header .header-actions { order: 2; flex: 1 0 100%; display: flex; align-items: center; gap: 12px; min-height: 32px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
  .site-header .header-actions .nav-user,
  .site-header .header-actions .nav-admin,
  .site-header .header-actions .nav-security,
  .site-header .header-actions .logout { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .site-header .header-actions .language-switch { display: block; flex: 0 0 auto; }
  .site-header .header-actions .language-switch select { max-width: 92px; }
  .site-header .header-actions .theme-toggle { flex: 0 0 27px; }
  .site-header .header-actions .button-small { flex: 0 0 auto; }
  .forum-toolbar nav { gap: 15px; min-height: 30px; padding-inline: 10px; }
  .page-shell { padding-inline: 10px; }
  .community-banner { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .community-banner > div { min-width: 0; }
  .forum-heading { align-items: flex-start; flex-wrap: wrap; }
  .forum-heading-actions { flex-wrap: wrap; }
  .forum-row { grid-template-columns: 26px minmax(0, 1fr) 35px 35px; gap: 5px; }
  .forum-last { grid-column: 2 / -1; }
  .forum-avatar, .side-topic-avatar { --avatar-size: 21px; }
  .forum-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .forum-icon svg { width: 23px; height: 23px; }
  .forum-sidebar, .profile-sidebar { grid-template-columns: minmax(0, 1fr); }
  .forum-sidebar .side-panel:first-child { grid-column: auto; }
  .topic-marker { width: 27px; height: 27px; flex-basis: 27px; }
  .topic-row { align-items: flex-start; }
  .topic-copy { flex: 1; }
  .topic-copy small { max-width: 100%; white-space: normal; }
  .reply-count { align-self: center; flex: 0 0 auto; }
  .thread-breadcrumbs, .forum-detail-breadcrumbs { overflow-wrap: anywhere; }
  .topic-head, .forum-detail-heading { align-items: flex-start; flex-wrap: wrap; }
  .post-avatar { --avatar-size: 42px; }
  .reply-composer-avatar { --avatar-size: 42px; }
  .profile-avatar { --avatar-size: 60px; }
  .forum-detail-avatar { --avatar-size: 28px; }
  .member-directory-row .post-avatar { --avatar-size: 42px; }
  .post-card .post-author { min-width: 0; }
  .post-actions { justify-content: flex-start; flex-wrap: wrap; }
  .reply-panel { grid-template-columns: minmax(0, 1fr); }
  .reply-language { flex-wrap: wrap; }
  .reply-composer-footer { align-items: flex-start; flex-wrap: wrap; }
  .editor-toolbar { gap: 1px; }
  .editor-toolbar [data-forum-preview] { margin-inline-start: 0; }
  .search-form { flex-wrap: wrap; }
  .search-form input { flex: 1 1 170px; min-width: 0; }
  .search-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forum-detail-child { grid-template-columns: 26px minmax(0, 1fr) 39px 39px; }
  .forum-detail-child-copy small { white-space: normal; overflow-wrap: anywhere; }
  .forum-detail-last { justify-items: start; text-align: start; }
  html[data-admin] .admin-main-shell { padding: 13px 10px 42px; }
  html[data-admin] .admin-topbar { flex-wrap: wrap; gap: 4px 10px; min-height: 58px; padding: 6px 10px; }
  html[data-admin] .admin-topbar-actions { margin-inline-start: auto; }
  html[data-admin] section.section > .admin-nav.admin-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-admin] .admin-dashboard-overview,
  html[data-admin] .admin-dashboard-alerts,
  html[data-admin] .admin-dashboard-module-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-admin] .admin-dashboard-search-form { flex-wrap: wrap; }
  html[data-admin] .admin-dashboard-search-form input { flex: 1 1 100%; }
  html[data-admin] .admin-dashboard-status dl { grid-template-columns: minmax(0, 1fr); }
  html[data-admin] .admin-form-row { grid-template-columns: minmax(0, 1fr); }
  html[data-admin] .admin-form-row > label { justify-content: flex-start; padding: 10px 12px 2px; text-align: start; }
  html[data-admin] .admin-form-control { padding: 5px 12px 11px; }
  html[data-admin] .admin-form-actions { padding: 10px 12px; }
  html[data-admin] .admin-detail-label { padding: 9px 12px 2px; text-align: start; }
  html[data-admin] .admin-detail-value { padding: 4px 12px 10px; }
  html[data-admin] .admin-data-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html[data-admin] .admin-data-table { min-width: 560px; }
  .topic-staff-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 375px) {
  .page-shell { padding-inline: 8px; }
  .site-header .brand-logo { max-width: 145px; }
  .forum-heading h1 { font-size: 19px; }
  .forum-heading-actions .button { min-height: 34px; }
  .forum-stat small { font-size: 8px; }
  .topic-head h1 { font-size: 20px; }
  .post-card { grid-template-columns: 58px minmax(0, 1fr); }
  .post-card .post-author { padding-inline: 3px; }
  .post-avatar { --avatar-size: 39px; }
  .post-content { padding-inline: 8px; }
  .post-actions { gap: 7px; }
  .reply-count { max-width: 54px; text-align: end; white-space: normal; }
  .search-filters { grid-template-columns: minmax(0, 1fr); }
  .forum-detail-child { grid-template-columns: 24px minmax(0, 1fr) 31px 31px; gap: 4px; }
  .forum-detail-child-count small { font-size: 7px; }
  html[data-admin] .admin-topbar-brand span { font-size: 11px; }
  html[data-admin] .admin-topbar-brand small { font-size: 9px; }
  html[data-admin] .admin-topbar-actions { gap: 7px; }
}

/* Logical alignment when Arabic is active. */
html[dir="rtl"] .forum-detail-last { text-align: start; justify-items: start; }
html[dir="rtl"] .admin-data-table th { text-align: start; }