/* Sepia preset variables
 * Sample Custom CSS for long-form reading.
 * Paste into the Custom CSS field for a forum.
 */

html {
  /* Backgrounds */
  --t-bg: #f5efe0 !important;       /* page background */
  --t-bg-2: #ece1cd !important;     /* secondary/footers */
  --t-surface: #fdf7ec !important;  /* post / card surface */
  --t-surface-2: #f1e5d0 !important;/* subtle raised */
  --t-surface-3: #e5d4b7 !important;/* hover / emphasis */
  --t-panel: #f0e3cf !important;    /* user info / side panels */

  /* Borders */
  --t-border: #c3af8a !important;
  --t-border-soft: #d7c6a4 !important;

  /* Text */
  --t-text: #2f281d !important;     /* main text */
  --t-muted: #776750 !important;    /* meta, dates */
  --t-faint: #a08e72 !important;    /* low-priority text */

  /* Links */
  --t-link: #7b5526 !important;
  --t-link-hover: #9a6a30 !important;

  /* Header / accent strip */
  --t-header-top: #ddc39a !important;
  --t-header-bottom: #c3a474 !important;
  --t-header-border: #a4804f !important;

  /* Buttons */
  --t-button-top: #ccb083 !important;
  --t-button-bottom: #ac8b5b !important;
  --t-button-hover-top: #d8bc8d !important;
  --t-button-hover-bottom: #b99663 !important;
  --t-button-border: #8a6b44 !important;

  /* Legacy row / button helpers (for older layouts) */
  --t-row-bg: #fdf7ec !important;
  --t-row-hover: #f1e5d0 !important;
  --t-row-unread: #efe0c2 !important;
  --t-btn-bg: #ccb083 !important;
  --t-btn-text: #2f281d !important;
  --t-btn-border: #8a6b44 !important;
  --t-btn-hover: #b99663 !important;
  --t-dropdown-bg: #fdf7ec !important;
  --t-dropdown-hover: #f1e5d0 !important;
}

/* Page base / reading background */
html,
html body,
html #Body,
html .Container,
html .Content.MainContent,
html .page-content,
html .pageBox,
html .MessageList.Discussion,
html .Comments.pageBox {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
}

/* Modern title bar (React header) */
html .titleBar,
html [class*="TitleBar-classes-bg"],
html [class*="TitleBar-classes-bgContainer"],
html [class*="TitleBar-classes-bar"] {
  background: linear-gradient(
    180deg,
    var(--t-header-top) 0%,
    var(--t-header-bottom) 100%
  ) !important;
  border-bottom: 1px solid var(--t-header-border) !important;
}

/* Header nav links */
html [class*="TitleBar-classes-topElement-"] {
  color: var(--t-link) !important;
  background: transparent !important;
}

html [class*="TitleBar-classes-topElement-"]:hover {
  color: var(--t-link-hover) !important;
}

/* Breadcrumbs / section headings */
html .BreadcrumbsBox,
html .Breadcrumbs,
html .PageTitle,
html .pageHeadingBox {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border) !important;
}

/* Thread list header & side nav header */
html .forum-threadlist-header,
html .forum-threadlist-header .latest-title,
html .Box.BoxCategories.SideNav .SideNav-header {
  background: linear-gradient(
    180deg,
    var(--t-header-top) 0%,
    var(--t-header-bottom) 100%
  ) !important;
  color: #2f281d !important;
  border-bottom: 1px solid var(--t-header-border) !important;
}

/* Thread list rows */
html .forum-threadlist-table th {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

html .forum-threadlist-table tbody td {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

html .forum-threadlist-table tbody tr:nth-child(even) td {
  background: var(--t-surface-2) !important;
}

/* Meta columns (replies, views, last post) */
html td.forum-threadlist-lastpost,
html td.forum-threadlist-replies,
html td.forum-threadlist-views,
html .forum-threadlist-thread-lastposter,
html .threadbit-lastposter {
  background: var(--t-surface) !important;
  color: var(--t-muted) !important;
  border-color: var(--t-border-soft) !important;
}

/* Post header strip */
html .postbit-header {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-bottom: 1px solid var(--t-border-soft) !important;
}

html .postbit-header a,
html .postbit-header .MItem {
  color: var(--t-text) !important;
  background: transparent !important;
}

/* User info column */
html .postbit-userinfo,
html .postbit-userinfo .userinfo-row,
html .postbit-userinfo .userinfo-joindate,
html .postbit-userinfo .userinfo-posts,
html .postbit-userinfo .RoleTitle,
html .postbit-userinfo .MItem {
  background: var(--t-panel) !important;
  color: var(--t-muted) !important;
  border-color: var(--t-border-soft) !important;
}

html .postbit-userinfo a,
html .postbit-userinfo .userinfo-username-title {
  color: var(--t-link) !important;
}

/* Post body / message content */
html .postbit-postbody,
html .postbit-message,
html .message-wrapper,
html .Item-BodyWrap,
html .Item-Body,
html .Message.userContent,
html .userContent,
html .UserSignature {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

/* Typography inside posts: keep background neutral and text dark */
html .Message.userContent p,
html .Message.userContent div,
html .Message.userContent span,
html .Item-Body p,
html .Item-Body div {
  background: transparent !important;
  color: var(--t-text) !important;
}

/* Links, quotes, and code blocks in posts */
html a {
  color: var(--t-link) !important;
}

html a:hover {
  color: var(--t-link-hover) !important;
}

html blockquote,
html pre,
html code,
html [class*="quoteEmbed"],
html [class*="embedContent"] {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border-soft) !important;
}

/* Reaction row and footer under posts */
html .Reactions,
html .Reactions > div,
html .Reactions .ReactButton,
html .Reactions .ReactLabel,
html .clearleft {
  background: var(--t-surface) !important;
  color: var(--t-link) !important;
  border-color: var(--t-border-soft) !important;
}

/* New Discussion button & primary actions */
html .Button,
html .Btn,
html .Primary,
html input[type="submit"],
html .ButtonGroup.NewDiscussion,
html div.ButtonGroup[data-is-kludged="true"],
html .BoxButtons .ButtonGroup.Multi {
  background: linear-gradient(
    180deg,
    var(--t-button-top) 0%,
    var(--t-button-bottom) 100%
  ) !important;
  color: var(--t-btn-text) !important;
  border: 1px solid var(--t-button-border) !important;
}

html .Button:hover,
html .Btn:hover,
html .Primary:hover,
html input[type="submit"]:hover {
  background: linear-gradient(
    180deg,
    var(--t-button-hover-top) 0%,
    var(--t-button-hover-bottom) 100%
  ) !important;
}

/* Optional: soften strong box-shadows if any remain */
html .MessageList.Discussion,
html .Comments.pageBox,
html .postbit-wrapper {
  box-shadow: none !important;
}

/* ============================================================
   Generic buttons and primary actions (Sepia)
   ============================================================ */

html .Button,
html .Btn,
html .Primary,
html input[type="submit"],
html .Buttons .Button,
html .ButtonGroup.NewDiscussion,
html div.ButtonGroup[data-is-kludged="true"],
html .BoxButtons .ButtonGroup.Multi {
  background: linear-gradient(
    180deg,
    var(--t-button-top) 0%,
    var(--t-button-bottom) 100%
  ) !important;
  color: #2f281d !important;
  border: 1px solid var(--t-button-border) !important;
}

html .Button:hover,
html .Btn:hover,
html .Primary:hover,
html input[type="submit"]:hover {
  background: linear-gradient(
    180deg,
    var(--t-button-hover-top) 0%,
    var(--t-button-hover-bottom) 100%
  ) !important;
}

/* ============================================================
   BoardsCleaner extension UI buttons (Sepia)
   ============================================================ */

/* Toggle Profile button */
html #profileToggleBtn {
  background-color: var(--t-button-top) !important;
  color: #2f281d !important;
  border: 1px solid var(--t-button-border) !important;
}

html #profileToggleBtn:hover {
  background-color: var(--t-button-hover-top) !important;
}

/* Info / nav icon buttons in the overlay */
html .infoIcon,
html .navIcon {
  background-color: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

/* Shortcut / help dialog */
html dialog#shortcutDialog {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

/* Edit modal button in forum header */
html #bcEditModalBtn {
  background-color: var(--t-button-top) !important;
  color: #2f281d !important;
  border: 1px solid var(--t-button-border) !important;
}

/* ============================================================
   Legacy nav popup (Sepia)
   ============================================================ */

html #bc-nav-popup-wrap {
  position: relative;
}

html #bc-nav-popup-toggle {
  background: linear-gradient(
    180deg,
    var(--t-button-top) 0%,
    var(--t-button-bottom) 100%
  ) !important;
  color: #2f281d !important;
  border: 1px solid var(--t-button-border) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

html #bc-nav-popup-toggle:hover {
  background: linear-gradient(
    180deg,
    var(--t-button-hover-top) 0%,
    var(--t-button-hover-bottom) 100%
  ) !important;
}

html #bc-nav-popup-panel {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border-soft) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  padding: 6px !important;
  min-width: 190px !important;
}

html .bc-nav-popup-item,
html #bc-nav-popup-hide-toggle {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border-soft) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  margin: 4px 0 !important;
  cursor: pointer !important;
}

html .bc-nav-popup-item:hover,
html #bc-nav-popup-hide-toggle:hover {
  background: var(--t-surface-3) !important;
  color: var(--t-link) !important;
  border-color: var(--t-border) !important;
}

html #bc-nav-popup-sep {
  height: 1px !important;
  background: var(--t-border-soft) !important;
  margin: 8px 0 !important;
}