/* misago 0.39 overrides */

/* navigation bar */

.navbar-branding-logo img {
    height: 34px;
}
.navbar-branding-text {
  font-size: 21px !important;
}
/* phones in portrait: logo only, the forum name does not fit next to the buttons */
/* 767px is Misago's own mobile breakpoint (Bootstrap 3 "xs") */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .navbar-branding-text {
    display: none;
  }
}

/* extra menu on the left, next to the logo; icons and buttons stay on the right */
.navbar-right {
  flex: 1 1 auto;
  justify-content: flex-end; /* keeps buttons right when the menu is hidden on phones */
}
.navbar-extra-menu {
  font-size: 16.8px;
  margin-right: auto;
}

/* extra menu links: colours and hover as on 0.34, colours set by theme variables */
/* !important and the .navbar prefix are needed to beat "body.dark a:hover" etc. in darktheme.css */
.navbar .navbar-extra-menu a,
.navbar .navbar-extra-menu a:link,
.navbar .navbar-extra-menu a:visited {
  padding: 6px 15px;
  color: var(--text-color-dim) !important;
}
.navbar .navbar-extra-menu a:hover,
.navbar .navbar-extra-menu a:focus,
.navbar .navbar-extra-menu a:active {
  color: var(--text-color) !important;
  background-color: transparent;
}

#styleSwitch {
    margin-top: 0 !important;
    font-size: 15px;
    margin-left: 20px !important;
    border: none;
}
/* below 768px Misago hides the whole extra menu, and the style switch with it (it is */
/* the menu's last li); show the menu again with only that last item */
@media screen and (max-width: 767px) {
  .navbar-extra-menu {
    display: block;
  }
  .navbar-extra-menu > li:not(:last-child) {
    display: none;
  }
  #styleSwitch {
    margin-left: 8px !important;
  }
}
/* phone portrait: a logged-in navbar has 4 icon buttons, so make room for the switch */
@media screen and (max-width: 419px) {
  #styleSwitch {
    font-size: 12px;
    margin-left: 0 !important;
  }
  .navbar-branding {
    margin-right: 12px;
  }
}

/* category levels: each ul.list-group-category is one first-level category, */
/* its first li is that category itself, the following li's are its children */
/* (0.34's list-group-item-first class is no longer set) */

/* first-level categories */

ul.list-group-category > li.list-group-item:first-child h4.media-heading a {
  color: var(--section-1-color) !important;
}
ul.list-group-category > li.list-group-item:first-child div.category-last-thread {
  display: none !important;
}


/* second-level categories */
ul.list-group-category > li.list-group-item:not(:first-child) h4.media-heading a {
  color: var(--section-2-color) !important;
  font-size: 0.9em !important;
  /*font-style: italic !important;*/
}

/* thread starter avatars, three states; hovered avatar shows unfiltered */
/* filters are placeholders, only to tell the states apart */
:root {
  --avatar-guest-filter: unset;
  --avatar-read-filter: grayscale(0%) opacity(20%);
  --avatar-unread-filter: unset;
}
body.dark {
  --avatar-guest-filter: grayscale(40%);
  --avatar-read-filter: sepia(100%) brightness(60%) opacity(60%);
  --avatar-unread-filter: grayscale(40%);
}
/* 1. not logged in */
body:not(.misago-authenticated) .threads-list-item-col-starter .threads-list-item-starter:not(:hover) img {
  filter: var(--avatar-guest-filter);
}
/* 2. logged in, no new posts */
.threads-list-item:has(.threads-list-read-icon) .threads-list-item-col-starter .threads-list-item-starter:not(:hover) img {
  filter: var(--avatar-read-filter);
}
/* 3. logged in, new posts */
.threads-list-item:has(.threads-list-unread-icon) .threads-list-item-col-starter .threads-list-item-starter:not(:hover) img {
  filter: var(--avatar-unread-filter);
}

/* read/unread icons (not in 0.34): ring = read, dot = unread */
/* threads list (next to the starter avatar) and notifications (page, dropdown, overlay) */
/* named read-status-* to stay clear of --read-icon-* used by categories.css */
:root {
  --read-status-read-color: #dfe1e7;   /* Misago default #ebecf0, a bit darker */
  --read-status-unread-color: #2563eb; /* Misago default */
}
body.dark {
  --read-status-read-color: hsl(38, 32%, 30%);  /*var(--text-color-small-dim);*/
  --read-status-unread-color: hsl(38, 32%, 62%);  /*var(--text-color-small);*/
}
.threads-list-read-icon,
.notification-read-icon {
  border-color: var(--read-status-read-color);
}
.threads-list-unread-icon,
.notification-unread-icon {
  background-color: var(--read-status-unread-color);
}

/* notification text: page, dropdown and overlay; Misago uses one colour for read and unread */
:root {
  --notification-read-color: #172b4d;   /* Misago default */
  --notification-unread-color: #172b4d; /* Misago default */
  --notification-timestamp-color: #5e6c84; /* Misago default */
}
body.dark {
  --notification-read-color: var(--text-color-dim);
  --notification-unread-color: var(--text-color);
  --notification-timestamp-color: var(--text-color-small-dim);
}
/* .notifications-list-item prefix and !important to beat "body.dark a" / "body.dark a:hover" in darktheme.css */
.notifications-list-item .notification-message-read,
.notifications-list-item .notification-message-read:link,
.notifications-list-item .notification-message-read:visited,
.notifications-list-item .notification-message-read:hover,
.notifications-list-item .notification-message-read:focus,
.notifications-list-item .notification-message-read:active {
  color: var(--notification-read-color) !important;
}
.notifications-list-item .notification-message-unread,
.notifications-list-item .notification-message-unread:link,
.notifications-list-item .notification-message-unread:visited,
.notifications-list-item .notification-message-unread:hover,
.notifications-list-item .notification-message-unread:focus,
.notifications-list-item .notification-message-unread:active {
  color: var(--notification-unread-color) !important;
}
.notifications-list-item-timestamp {
  color: var(--notification-timestamp-color);
}
/* notification rows (page, dropdown, overlay) keep the zebra of categories.css, */
/* light uses its colours unchanged, dark is a bit lighter than other lists */
/* declared on body, not :root: var() resolves where it is declared, and body.light */
/* in categories.css sets --list-*-bg-color on body */
body {
  --notifications-odd-bg-color: var(--list-odd-bg-color);
  --notifications-even-bg-color: var(--list-even-bg-color);
}
body.dark {
  --notifications-odd-bg-color: rgb(30, 30, 30);
  --notifications-even-bg-color: rgb(48, 48, 48);
}
/* !important and .notifications-list prefix to beat the zebra rule in categories.css */
.notifications-list li.list-group-item:nth-child(2n+1) {
  background: var(--notifications-odd-bg-color) !important;
}
.notifications-list li.list-group-item:nth-child(2n) {
  background: var(--notifications-even-bg-color) !important;
}

/* dark theme: 0.39 elements not covered by darktheme.css; light stays Misago default */
/* empty / error / info messages inside lists ("You don't have any notifications." etc.) */
body.dark .list-group-empty,
body.dark .list-group-error,
body.dark .list-group-message {
  color: var(--text-color-dim);
}
body.dark .list-group-empty-icon,
body.dark .list-group-error-icon,
body.dark .list-group-message-icon {
  color: var(--text-color-small-dim);
}
body.dark .list-group-error-detail,
body.dark .list-group-message-detail {
  color: var(--text-color-small);
}
/* pills ("All / Unread / Read" in notifications, and elsewhere): darktheme.css gives them */
/* Misago's light colours; same selectors here, loaded later, so these win */
/* inactive = default button, active = primary button */
body.dark .nav-pills>li>a,
body.dark .nav-pills>li>a:link,
body.dark .nav-pills>li>a:visited {
  background-color: var(--btn-bg-color) !important;
  color: var(--btn-color) !important;
}
body.dark .nav-pills>li>a:hover,
body.dark .nav-pills>li>a:focus,
body.dark .nav-pills>li>a:active {
  background-color: var(--btn-bg-color-hover) !important;
  color: var(--btn-color-hover) !important;
}
body.dark .nav-pills>li.active>a,
body.dark .nav-pills>li.active>a:link,
body.dark .nav-pills>li.active>a:visited,
body.dark .nav-pills>li.active>a:hover,
body.dark .nav-pills>li.active>a:focus,
body.dark .nav-pills>li.active>a:active {
  background-color: var(--btn-pri-bg-color) !important;
  color: var(--btn-pri-color) !important;
}
/* dropdown popups: site menu (hamburger), user menu, notifications, and every other */
/* .dropdown-menu on the site (thread tools, moderation...) - Misago draws them white */
body.dark {
  --dropdown-bg-color: var(--page-bg-color);       /* as the popups (modals) */
  --dropdown-border-color: var(--main-cat-border-color);
  --dropdown-link-color: var(--text-color-dim);
  --dropdown-link-hover-color: var(--text-color);
  --dropdown-link-hover-bg-color: var(--main-cat-bg-color);
}
body.dark .dropdown-menu {
  background-color: var(--dropdown-bg-color);
  border-color: var(--dropdown-border-color);
}
body.dark .dropdown-header,
body.dark .dropdown-subheader {
  color: var(--text-color);
}
body.dark .dropdown-menu .divider {
  background-color: var(--dropdown-border-color);
}
body.dark .dropdown-pills {
  border-bottom-color: var(--dropdown-border-color);
}
body.dark .dropdown-footer {
  border-top-color: var(--dropdown-border-color);
}
/* links: "html" prefix and !important to beat darktheme.css, which forces */
/* "body.dark .dropdown-menu>li>a { #172b4d !important }" and "body.dark a" */
html body.dark .dropdown-menu-item > a,
html body.dark .dropdown-menu-item > .btn-link,
html body.dark .dropdown-menu > li > a,
html body.dark .dropdown-menu > li > .btn-link {
  color: var(--dropdown-link-color) !important;
}
html body.dark .dropdown-menu-item > a:hover,
html body.dark .dropdown-menu-item > a:focus,
html body.dark .dropdown-menu-item > .btn-link:hover,
html body.dark .dropdown-menu-item > .btn-link:focus,
html body.dark .dropdown-menu > li > a:hover,
html body.dark .dropdown-menu > li > a:focus,
html body.dark .dropdown-menu > li > .btn-link:hover,
html body.dark .dropdown-menu > li > .btn-link:focus {
  color: var(--dropdown-link-hover-color) !important;
  background-color: var(--dropdown-link-hover-bg-color);
}
/* the same menus open as full-screen overlays on phones (Misago: .overlay, white) */
body.dark .overlay {
  background-color: var(--dropdown-bg-color);
}
body.dark .overlay-header-caption {
  color: var(--text-color);
}
body.dark .btn-overlay-close,
body.dark .btn-overlay-close:hover,
body.dark .btn-overlay-close:focus {
  color: var(--dropdown-link-color);
}
body.dark .btn-overlay-close:active {
  color: var(--dropdown-link-hover-color);
  background-color: var(--dropdown-link-hover-bg-color);
  border-color: var(--dropdown-link-hover-bg-color);
}
body.dark .overlay-menu-list .divider {
  background-color: var(--dropdown-border-color);
}
/* post editor: the dialog itself stays light for now, but the full-width strip behind it */
/* (#posting-mount, Misago paints it with the light page background) and its glow go dark */
body.dark #posting-mount.show {
  background-color: var(--body-bg-color);
}
body.dark .posting-dialog {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}
/* disabled default buttons: Misago's opacity 0.25 is fine on light, almost invisible on dark */
body.dark .btn-default:disabled,
body.dark .btn-default.disabled {
  opacity: 0.5;
}
/* navbar bottom border (0.34 had none; this blends into the navbar background) */
body.dark .navbar {
  border-bottom-color: var(--main-cat-border-color);
}
/* Sign in / Register (navbar, site menu, overlay): both primary buttons, as in light */
body.dark .btn-sign-in,
body.dark .btn-sign-in:link,
body.dark .btn-sign-in:visited,
body.dark .btn-register,
body.dark .btn-register:link,
body.dark .btn-register:visited {
  color: var(--btn-pri-color) !important;
  background: var(--btn-pri-bg-color) !important;
  border-color: var(--btn-pri-bg-color) !important;
}
body.dark .btn-sign-in:hover,
body.dark .btn-sign-in:focus,
body.dark .btn-sign-in:active,
body.dark .btn-register:hover,
body.dark .btn-register:focus,
body.dark .btn-register:active {
  color: var(--btn-pri-color-hover) !important;
  background: var(--btn-pri-bg-color-hover) !important;
  border-color: var(--btn-pri-bg-color-hover) !important;
}
/* page numbers next to thread title (not in 0.34) */
body.dark .threads-list-item-goto-page,
body.dark .threads-list-item-goto-page:link,
body.dark .threads-list-item-goto-page:visited {
  color: var(--text-color-dim) !important;
  background-color: transparent;
  border-color: var(--main-cat-border-color);
}
body.dark .threads-list-item-goto-page:hover,
body.dark .threads-list-item-goto-page:focus {
  color: var(--text-color) !important;
  border-color: var(--text-color-small-dim);
}
body.dark .threads-list-item-goto-page:active {
  color: var(--text-color) !important;
  background-color: var(--main-cat-bg-color);
  border-color: var(--main-cat-bg-color);
}
/* popups (sign in, register and all other modals) */
body.dark .modal-backdrop {
  background-color: #000;
}
/* !important to beat "body.dark .modal-content { chocolate }" in the plugin's default.css */
body.dark .modal-content {
  color: var(--text-color);
  background-color: var(--page-bg-color) !important;
  border-color: var(--main-cat-border-color);
}
body.dark .modal-header {
  background-color: var(--main-cat-bg-color);
  border-bottom-color: var(--main-cat-border-color);
}
body.dark .modal-title,
body.dark .modal-header .close {
  color: var(--text-color);
  text-shadow: none;
}
body.dark .modal-footer {
  border-top-color: var(--main-cat-border-color);
}
body.dark .modal .form-control {
  color: var(--text-color);
  background-color: var(--block-bg-color);
  border-color: var(--main-cat-border-color);
}
body.dark .modal .form-control::placeholder {
  color: var(--text-color-small-dim);
}
body.dark .modal .form-control:focus {
  border-color: var(--text-color-small-dim);
  box-shadow: none;
}
body.dark .modal .progress {
  background-color: var(--block-bg-color);
}
body.dark .modal .text-small,
body.dark .modal .help-block {
  color: var(--text-color-small);
}

/* category CSS */

/* first level category */

ul.list-group-category > li.list-group-item:first-child {
  background-color: var(--section-1-bg-color) !important;
}
/* everything under first level category */
ul.list-group-category > li.list-group-item:not(:first-child) {
  background-color: var(--section-2-bg-color) !important;
}
/* category stats ("N threads / N posts") and last-post dates: dim theme text in every theme */
/* (dark gets the same from darktheme.css; this keeps light as it was before that rule was */
/* scoped to body.dark) */
ul.category-stats,
li.category-last-thread-date a {
  color: var(--text-color-dim) !important;
}

/* menu item for logged-in users only */
body:not(.misago-authenticated) .needs-logged-in {
  display: none;
}
/* site menu (dropdown and mobile overlay): hide the Users section for guests, */
/* i.e. the divider and every li after it, however many items come before or after */
body:not(.misago-authenticated) .site-nav-menu .site-nav-users-divider,
body:not(.misago-authenticated) .site-nav-menu .site-nav-users-divider ~ li {
  display: none;
}