@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap');

:root {
  --accent: #5b00a0;

  --primary-50: #eff6ff;
  --primary-100: #dbf0ff;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #38bdf8;
  --primary-500: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --primary-800: #075985;
  --primary-900: #0c4a6e;

  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d8;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  --green-400: #34d399;
  --red-400: #fb7185;

  /* maybe needed for legacy fider css? not sure */
  --primary: var(--primary-400);
  --primary-color: var(--primary-400);
}

.border-primary-base {
  border-color: var(--primary-400) !important;
}

body {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  background: var(--gray-900);
  color: #fff;
}

a.text-link {
  color: var(--primary-400);
}

p.text-subtitle {
  color: var(--gray-200);
}

h1.text-large {
  color: var(--gray-100);
}

/* navbar */
#c-header {
  background: var(--gray-900);
}
#c-header .text-header {
  color: #fff;
  letter-spacing: -2px;
}
#c-header + .page {
  padding-top: 0 !important;
}
/* login link */
#c-header a[href='#'] {
  color: var(--gray-200);
}

/* left block */
.p-home__welcome-col {
  color: var(--gray-300);
  background: none !important;
}
#p-home .p-home__welcome-col > :first-child,
#p-show-post .p-show-post__action-col > :first-child {
  background-color: var(--gray-800);
  border: 1px solid var(--gray-700);
}
.p-home__welcome-col strong {
  display: block;
}
.p-home__welcome-col hr {
  display: none;
}

/* main block */
#p-home .p-home__posts-col,
#p-show-post .p-show-post__main-col {
  padding: 0;
  background-color: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* fix main block grid */
@media only screen and (min-width: 992px) {
  #p-show-post .p-show-post, .c-admin-basepage {
    grid-template-columns: 2fr 7fr;
  }
}
#p-home .p-home__posts-col,
.c-admin-basepage > div:not(.js-admin-menu),
#p-show-post .p-show-post__main-col > div.p-show-post__header-col {
  padding: 16px;
  background-color: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 0.5rem;
}

/* post votes block */
.p-show-post__header-col div:has(> div.border-4.border-blue-500) {
  padding-top: 1rem;
  border-top: 1px solid var(--gray-700);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--gray-700);
}
.p-show-post__header-col div:has(> div.border-4.border-blue-500) > .flex-x > .flex-y.flex--spacing-4 {
  flex-direction: row-reverse !important;
  align-items: start;
  gap: 2rem;
}
.p-show-post__header-col div:has(> div.border-4.border-blue-500) > .flex-x > .flex-y.flex--spacing-4 > .flex-items-center {
  margin-top: 0;
}
.p-show-post__header-col div:has(> div.border-4.border-blue-500) > .flex-x > .flex-y.flex--spacing-4 > .flex-items-center > .text-2xl {
  font-size: 28px !important;
  min-height: 40px !important;
}
.p-show-post__header-col div:has(> div.border-4.border-blue-500) button.c-button--primary {
  min-width: 0 !important;
}
div.border-4.border-blue-500 {
  display: none;
}

/* dropdown menus */
button.c-dropdown__handle {
  color: var(--gray-200);
}
button.c-dropdown__handle > div {
  border-color: var(--gray-700);
}
.c-dropdown__list {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 0.5rem;
}
.c-dropdown__list > .text-medium.uppercase {
  font-size: 0.8rem;
  color: var(--gray-400);
}
.c-dropdown__listitem {
  color: #fff;
}
.clickable.hover:hover,
.c-dropdown__listitem:hover {
  background-color: var(--gray-900);
}
.c-dropdown__divider {
  background-color: var(--gray-900);
}

/* admin side navigation */
.c-side-menu {
  border: 1px solid var(--gray-700);
  border-radius: 0.5rem;
}
.c-side-menu__item {
  background-color: var(--gray-800);
  color: var(--gray-100);
  border-bottom: none !important;
}
.c-side-menu__item--active,
.c-side-menu__item:hover {
  background: var(--gray-900);
}

/* remove border between entries */
.flex-y.flex--divide-4 > * + * {
  border-top: 1px solid var(--gray-700) !important;
}

/* response blocks */
.c-markdown + div.shadow.rounded,
.p-show-post__header-col > div.flex > div.flex-y.flex-items-start {
  background: var(--gray-800);
  border: none;
  margin-bottom: 0.5rem;
  padding: 0;
}
.p-show-post__header-col > div.flex > div.flex-y.flex-items-start::before {
  content: 'Status';
  font-size: 0.8rem;
  color: var(--gray-400);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
}
div:has(> span[class^="c-status-col--"]) {
  background: var(--gray-700);
  border: 1px solid var(--gray-600);
  border-radius: 0.3rem;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: none;
  align-items: center;
}
.c-posts-container__post div:has(> span[class^="c-status-col--"]) {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.c-posts-container__post div:has(> span[class^="c-status-col--"])::before {
  content: 'Status:';
  font-size: 0.8rem;
  color: var(--gray-400);
  font-weight: 700;
  display: inline-block;
}
.c-status-col--planned,
.c-status-col--started {
  color: var(--primary-400);
}
.c-status-col--completed {
  color: var(--green-400);
}
.c-status-col--declined {
  color: var(--red-400);
}

/* user staff icon */
div[data-tooltip='Staff'] {
  color: var(--primary-400);
}
.c-username--staff div svg {
  height: 18px;
}

/* comment blocks */
.c-comment > .flex-grow.rounded-md {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 16px;
}
.c-comment .c-markdown {
  margin-top: 1rem;
  color: var(--gray-200);
  font-size: 0.9rem;
}
.c-reactions {
  margin-top: 1rem;
}
.c-reactions > .c-reactions-add-reaction {
  background-color: var(--gray-600) !important;
  border: 1px solid var(--gray-500) !important;
  color: var(--gray-100) !important;
  border-radius: 100% !important;
  width: 30px;
  height: 30px;
  text-align: center;
  transition: background-color 0.2s ease;
}
.c-reactions > .c-reactions-add-reaction:hover,
.c-reactions > .c-reactions-add-reaction ~ span.inline-flex:hover {
  background-color: var(--gray-500) !important;
}
.c-reactions > .c-reactions-add-reaction ~ span.inline-flex {
  background-color: var(--gray-600) !important;
  border: 1px solid var(--gray-500) !important;
  color: var(--gray-100) !important;
  transition: background-color 0.2s ease;
  font-weight: 700;
}

/* dark mode text fixes */
.text-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
button {
  transition: background-color 0.2s ease;
}
button.c-button--primary {
  color: var(--primary-100);
  background-color: var(--primary-600);
  border-color: var(--primary-700);
}
button.c-button--primary:hover {
  background-color: var(--primary-500);
}
button.c-button--tertiary {
  color: var(--gray-400);
}
button.c-button--secondary {
  color: var(--gray-200);
  background-color: var(--gray-700);
  border-color: var(--gray-600);
}
button.c-button--secondary:hover {
  background-color: var(--gray-600);
  border-color: var(--gray-500);
}
.c-vote-counter__button {
  font-size: 1.5rem;
  color: var(--gray-400);
  background: none !important;
  border: none !important;
}
.text-muted,
.text-category {
  color: var(--gray-400) !important;
}
.text-gray-600 {
  color: var(--gray-400) !important;
}
.text-gray-700 {
  color: var(--gray-300) !important;
}
.text-gray-800 {
  color: var(--gray-200) !important;
}
.c-powered a,
.c-powered a:hover {
  color: var(--gray-400);
}
.c-username {
  color: var(--gray-300);
}
.c-avatar {
  border: 1px solid var(--gray-700);
}
.shadow.rounded {
  border: thin solid hsla(0, 0%, 100%, 0.12);
}
.hover\:bg-gray-100:hover {
  background-color: var(--gray-900) !important;
}

/* dark mode bg fixes */
.bg-gray-50 {
  background-color: var(--gray-800);
  border: thin solid hsla(0, 0%, 100%, 0.12);
}
.bg-gray-100 {
  background-color: var(--gray-900);
}
.bg-gray-200 {
  color: var(--gray-900);
}
.border-gray-200 {
  border-color: var(--gray-700);
}
.border-gray-500 {
  border-color: var(--gray-700);
}

/* form inputs */
.c-input,
.c-textarea {
  color: var(--gray-100);
  background: var(--gray-700);
  border: 1px solid var(--gray-600);
  border-radius: 0.25rem;
}
*:focus {
  border: 1px solid var(--primary-400) !important;
  box-shadow: none !important;
}

/* modals */
.c-modal-window,
.c-modal-footer {
  background: var(--gray-800) !important;
}
.c-modal-window {
  border: thin solid hsla(0, 0%, 100%, 0.12);
}
.c-modal-window .c-modal-footer {
  border-top: thin solid hsla(0, 0%, 100%, 0.12);
}
.c-modal-window .c-modal-footer .c-button--tertiary {
  color: var(--gray-200) !important;
}
.c-modal-window textarea {
  background: #fff;
  color: #000;
}

/* post blocks */
div.c-posts-container__post > div.flex > p.c-markdown.text-gray-700 {
  color: var(--gray-400) !important;
  font-size: 0.9em;
}

/* view more posts link */
div.c-posts-container > div.ml-4:last-child > a {
  display: block;
  background: var(--gray-700);
  border: 1px solid var(--gray-600);
  border-radius: 0.5rem;
  text-align: center;
  padding: 0.3rem;
  margin-top: 2rem;
}

/* tags */
a.c-tag {
  color: var(--gray-200);
  background-color: var(--gray-700);
  border: 1px solid var(--gray-600);
  font-size: 11px;
  padding: 3px 6px;
}
a.c-tag > span {
  width: 10px;
  height: 10px;
}

/* tiptap editor */
.fider-tiptap-editor {
  background-color: var(--gray-800);
  border-color: var(--gray-700);
}
.c-editor-toolbar {
  border-color: var(--gray-700);
}
.c-editor-button, .c-markdown-toggle {
  color: var(--gray-300);
}
.c-editor-button:hover, .c-markdown-toggle:hover {
  background-color: var(--gray-500);
  color: var(--gray-200);
}
.c-markdown code, .tiptap code,
.c-markdown pre, .tiptap pre {
  background-color: #221f1f !important;
  padding: 0.2rem 0.5rem;
}
.c-markdown pre, .tiptap pre {
  border: thin solid hsla(0, 0%, 100%, 0.12);
}