@charset "UTF-8";

/*=== GENERAL & VARIABLES ===*/
/*===========================*/
:root {
  --frss-padding-top-bottom: 0.5rem;
  --frss-loading-image: url("loader.gif");

  /* --- BACKGROUND (Alucard / Dracula Light) --- */
  /* Main background color: #FFFBEB (Cream) */
  /* Selection color: #CFCFDE (Light purple/gray) */

  --background-color-light-gradient1: #fffbeb;
  --background-color-light-gradient2: #f2eedd; /* Slightly darker shade for depth */
  --background-color-light: #fffbeb;
  --background-color-light-shadowed: #f2eedd;
  --background-color-light-shadowed-transparent: #fffbeba8;
  --background-color-grey: #f2eedd; /* Used in headers/sidebars */
  --background-color-hover: #cfcfde; /* Alucard Selection Color */

  /* --- ARTICLES --- */
  --unread-article-background-color: #fffbeb;
  --unread-article-background-color-hover: #ebe7d6;
  --unread-article-border-color: #a34d14; /* Alucard Orange */

  --favorite-article-background-color: #fffbeb;
  --favorite-article-background-color-hover: #ebe7d6;
  --favorite-article-border-color: #846e15; /* Alucard Yellow */

  /* --- PRIMARY ACTIONS / BUTTONS (Purple) --- */
  --contrast-background-color: #644ac9; /* Alucard Purple */
  --contrast-background-color-gradient: #644ac9;
  --contrast-background-color-hover: #7e66db; /* Slightly lighter purple */
  --contrast-background-color-active: #a3144d; /* Alucard Pink on click */
  --contrast-border-color: #644ac9;

  --contrast-background-font-color: #fffbeb; /* Light text on dark purple */

  /* --- DANGEROUS ACTIONS (Red) --- */
  --attention-background-color-gradient1: #cb3a2a; /* Alucard Red */
  --attention-background-color-gradient2: #cb3a2a;
  --attention-background-color-gradient1-hover: #d65c4f;
  --attention-background-color-gradient2-hover: #d65c4f;
  --attention-background-color-active: #cb3a2a;
  --attention-border-color: #cb3a2a;

  /* --- FEED STATUS --- */
  --empty-feed-color: #a34d14; /* Orange */
  --error-feed-color: #cb3a2a; /* Red */

  /* --- ALERTS AND NOTIFICATIONS --- */
  /* Warning */
  --alert-warn-background-color: #fff5e6; /* Lightened Orange */
  --alert-warn-font-color: #a34d14;
  --alert-warn-border-color: #a34d14;

  /* Success */
  --alert-success-background-color: #e8f5e9; /* Lightened Green */
  --alert-success-font-color: #14710a; /* Alucard Green */
  --alert-success-border-color: #14710a;

  /* Error */
  --alert-error-background-color: #ffebeb; /* Lightened Red */
  --alert-error-font-color: #cb3a2a; /* Alucard Red */
  --alert-error-boder-color: #cb3a2a;

  /* Notifications */
  --notification-good-background-color: #e8f5e9;
  --notification-good-border-color: #14710a;
  --notification-good-font-color: #14710a;

  --notification-bad-background-color: #ffebeb;
  --notification-bad-font-color: #cb3a2a;
  --notification-bad-border-color: #cb3a2a;
  --notification-close-background-color-hover: #cfcfde;

  /* --- TYPOGRAPHY --- */
  --font-color: #1f1f1f; /* Alucard Foreground */
  --font-color-grey: #6c664b; /* Alucard Comment (for less important text) */
  --font-color-light-shadowed: #6c664b;
  --font-color-light: #fffbeb; /* For text on dark buttons */

  --text-shadow-color: #ddd;
  --text-shadow-color-dark: #bbb;

  /* Shadows */
  --box-shadow-color: #6c664b40;
  --box-shadow-color-inset: #cfcfde;

  /* --- LINKS (Cyan) --- */
  --font-color-link: #036a96; /* Alucard Cyan */
  --font-color-link-hover: #644ac9; /* Alucard Purple on hover */

  /* --- BORDERS --- */
  --border-color: #cfcfde; /* Alucard Selection */
  --border-color-shadow-side: #b8b8c9;
  --frss-border-color: var(--border-color);
  --contrast-border-color-active: #644ac9;

  /* --- FORMS --- */
  --form-element-font-color-focus: #644ac9;
  --form-element-border-color-focus: #644ac9;
  --form-element-focus-box-shadow-color-inset: #cfcfde;
  --form-element-border-color-invalid: #cb3a2a;
  --form-element-invalid-box-shadow-color-inset: #cb3a2a20;
}

html,
body {
  background-color: var(--background-color-light);
  color: var(--font-color);
  font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
}

/*=== Links */
a,
button.as-link {
  color: var(--font-color-link);
  outline: none;
}

a:hover,
button.as-link:hover {
  color: var(--font-color-link-hover);
}

/*=== Forms */
legend {
  margin: 20px 0 5px;
  padding: 5px 0;
  font-size: 1.4em;
  border-bottom: 1px solid var(--border-color);
}

label {
  min-height: 25px;
  padding: 5px 0;
  cursor: pointer;
}

input:hover,
select:hover,
textarea:hover {
  color: var(--font-color);
}

input,
select,
textarea {
  background-color: var(--background-color-light);
  color: var(--font-color-grey);
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

option {
  padding: 0 0.5em;
}

input:focus,
select:focus,
textarea:focus,
input[type="password"]:focus + .toggle-password {
  color: var(--form-element-font-color-focus);
  border-color: var(--form-element-border-color-focus);
  outline: none;
}

input:invalid,
select:invalid {
  border-color: var(--form-element-border-color-invalid);
  box-shadow: 0 0 2px 2px var(--form-element-invalid-box-shadow-color-inset)
    inset;
}

input:disabled,
select:disabled {
  background-color: var(--background-color-light-shadowed);
}

/*=== Tables */
table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid var(--border-color);
}

th {
  background-color: var(--background-color-light-shadowed);
}

.config-articleicons td,
.config-articleicons th {
  font-weight: normal;
  text-align: center;
}

/*=== COMPONENTS ===*/
/*==================*/
/*=== Forms */
.form-group.form-actions {
  margin-bottom: 40px;
  padding: 5px 0;
  background-color: var(--background-color-light-shadowed-transparent);
  border-top: 1px solid var(--border-color);
}

.form-group.form-actions .btn {
  margin: 0 20px 0 0;
}

.form-group .group-name {
  padding: 10px 0;
}

.form-group .group-controls {
  min-height: 25px;
  padding: 0.5rem 0;
}

.form-group.form-actions .group-controls .btn {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.form-group .group-controls label:not(.btn) {
  padding: 0;
}

.form-group .group-controls > input,
.form-group .group-controls > select,
.form-group .group-controls > textarea,
.form-group .group-controls .stick {
  margin: -5px 0 5px 0;
}

.form-group .group-controls .stick .btn {
  padding-top: 2px;
  padding-bottom: 2px;
}

/*=== Buttons */

.stick .btn-important:first-child {
  border-right: 1px solid var(--contrast-border-color);
}

.stick input + .btn {
  border-top: 1px solid var(--border-color);
}

.btn {
  margin: 0;
  padding: 0.25rem 0.5rem;
  background-image: linear-gradient(
    to bottom,
    var(--background-color-light-gradient1) 0%,
    var(--background-color-light-gradient2) 100%
  );
  color: var(--font-color-grey);
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color-shadow-side);
  border-bottom: 1px solid var(--border-color-shadow-side);
  border-radius: 3px;
  min-height: 25px;
  min-width: 15px;
  line-height: 1.7;
  vertical-align: middle;
}

.btn:hover {
  background-image: none;
  background-color: var(--background-color-hover);
  text-decoration: none;
}

a:hover .icon,
button:hover .icon,
.btn:hover .icon {
  filter: brightness(1.5);
  transition: 0.1s linear;
}

#toggle-starred:hover .icon,
.bookmark:hover .icon {
  filter: brightness(1.1);
}

#toggle-search.active > .icon {
  filter: invert(8%) sepia(99%) saturate(7064%) hue-rotate(248deg)
    brightness(99%) contrast(142%);
}

.btn.active,
.btn:active,
.dropdown-target:target ~ .btn.dropdown-toggle {
  background-color: var(--background-color-grey);
  box-shadow:
    0px 2px 4px var(--box-shadow-color-inset) inset,
    0px 1px 2px var(--background-color-grey);
}

.dropdown-target:target ~ .btn.dropdown-toggle .icon {
  filter: brightness(1.1);
}

.btn.active,
.btn:active {
  filter: brightness(0.95);
}

.btn.active .icon,
.btn:active .icon {
  filter: brightness(1.1);
}

.btn-important {
  background-image: linear-gradient(
    to bottom,
    var(--contrast-background-color),
    var(--contrast-background-color-gradient)
  );
  color: var(--font-color-light);
  border: 1px solid var(--contrast-border-color);
  font-weight: normal;
  border-radius: 0;
}

.btn-important:hover {
  background-image: linear-gradient(
    to bottom,
    var(--contrast-background-color-hover),
    var(--contrast-background-color-gradient)
  );
  color: var(--font-color-light);
}

.btn-important:hover .icon {
  filter: brightness(3);
}

.btn-important:active {
  background-color: var(--contrast-background-color-active);
  box-shadow: none;
}

.btn-important .icon {
  filter: brightness(3);
}

.btn-attention {
  background-image: linear-gradient(
    to bottom,
    var(--attention-background-color-gradient1),
    var(--attention-background-color-gradient2)
  );
  color: var(--font-color-light);
  border: 1px solid var(--attention-border-color);
  text-shadow: 0px -1px 0px var(--text-shadow-color-dark);
}

.btn-attention:hover {
  background-image: linear-gradient(
    to bottom,
    var(--attention-background-color-gradient1-hover),
    var(--attention-background-color-gradient2-hover)
  );
  color: var(--font-color-light);
}

.btn-attention:active {
  background-color: var(--attention-background-color-active);
  box-shadow: none;
}

/*=== Navigation */
.nav-list {
  font-size: 0.9rem;
}

.nav-list .item,
.nav-list .item.nav-header {
  min-height: 2.5em;
  line-height: 2.5;
}

.nav-list .nav-section .item:hover a,
.nav-list .nav-section .item:hover .as-link {
  background-color: var(--background-color-hover);
  color: var(--font-color-link-hover);
}

.nav-list .nav-section .item.active:hover a,
.nav-list .nav-section .item.active:hover .as-link,
.nav-list .item.active {
  background-color: var(--contrast-background-color-active);
  color: var(--font-color-light);
}

.nav-list .item.active a,
.nav-list .item.active .as-link {
  color: var(--font-color-light);
}

.nav-list .item > a,
.nav-list .item > .as-link,
.nav-list .item > span,
.nav-list .item > div {
  padding: 0 1rem;
}

.nav-list .item > span {
  font-style: italic;
  color: var(--font-color-grey);
}

.nav-list a:hover {
  text-decoration: none;
}

.nav-list .nav-header {
  background-color: var(--background-color-grey);
  color: var(--font-color-grey);
  font-weight: bold;
}

.nav-list .nav-form {
  padding: 3px;
  text-align: center;
}

/*=== Dropdown Menu */
.dropdown-menu {
  margin: 5px 0 0;
  padding: 5px 0;
  background-color: var(--background-color-light);
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: 3px 3px 3px var(--box-shadow-color);
  text-align: left;
}

.dropdown-menu::after {
  border-color: var(--border-color);
}

.dropdown-header,
.dropdown-section .dropdown-section-title {
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  color: var(--font-color-grey);
  font-weight: bold;
  text-align: left;
}

.dropdown-menu .item > a,
.dropdown-menu .item > span,
.dropdown-menu .item > .as-link {
  padding: 0 22px;
  line-height: 2.5;
  font-size: inherit;
}

.dropdown-menu .dropdown-section .item > a,
.dropdown-menu .dropdown-section .item > span,
.dropdown-menu .dropdown-section .item > .as-link {
  padding-left: 2rem;
}

.dropdown-menu .dropdown-section .item:last-child {
  margin-bottom: 0.5rem;
}

.dropdown-menu .item > a:focus,
.dropdown-menu .item > a:hover,
.dropdown-menu .item > button:focus:not([disabled]),
.dropdown-menu .item > button:hover:not([disabled]),
.dropdown-menu .item > label:focus:not(.noHover),
.dropdown-menu .item > label:hover:not(.noHover) {
  background-color: var(--contrast-background-color-active);
  color: var(--font-color-light);
}

.dropdown-menu .item > label {
  padding: 0;
}

.dropdown-menu > .item:hover > a > .icon,
.dropdown-menu .item.dropdown-section .item:hover .icon {
  filter: grayscale(100%) brightness(2.5);
}

.dropdown-menu > .item[aria-checked="true"] > a::before {
  font-weight: bold;
  margin: 0 0 0 -14px;
}

.dropdown-menu .input select,
.dropdown-menu .input input {
  margin: 0 auto 5px;
  padding: 2px 5px;
  border-radius: 3px;
}

.dropdown-menu input[type="checkbox"] {
  margin-left: 1rem;
}

.dropdown-menu .item .emptyLabels {
  padding-left: 1rem;
  padding-right: 1rem;
}

.item ~ .dropdown-header,
.dropdown-section ~ .dropdown-section,
.item.separator {
  border-top-color: var(--border-color);
}

/*=== Alerts */
.alert {
  background-color: var(--background-color-grey);
  color: var(--font-color-grey);
  font-size: 0.9em;
  border: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color-shadow-side);
  border-bottom: 1px solid var(--border-color-shadow-side);
  border-radius: 5px;
}

.alert-head {
  font-size: 1.15em;
}

.alert > a {
  color: inherit;
  text-decoration: underline;
}

.alert-warn {
  background-color: var(--alert-warn-background-color);
  color: var(--alert-warn-font-color);
  border: 1px solid var(--alert-warn-border-color);
}

.alert-success {
  background-color: var(--alert-success-background-color);
  color: var(--alert-success-font-color);
  border: 1px solid var(--alert-success-border-color);
}

.alert-error {
  background-color: var(--alert-error-background-color);
  color: var(--alert-error-font-color);
  border: 1px solid var(--alert-error-boder-color);
}

.alert-error a {
  color: var(--alert-error-font-color);
  font-weight: bold;
}

/*=== Pagination */
.pagination {
  background-color: var(--background-color-light);
  color: var(--font-color-grey);
}

.pagination .item a:hover {
  background-color: var(--background-color-hover);
}

.pagination:first-child .item {
  border-bottom: 1px solid var(--border-color);
}

.pagination:last-child .item {
  border-top: 1px solid var(--border-color);
}

/*=== Boxes */
.box {
  background-color: var(--background-color-light);
  border-radius: 5px;
  box-shadow: 0 0 3px var(--box-shadow-color);
}

.box .box-title {
  background-color: var(--background-color-grey);
  border-bottom: 1px solid var(--border-color);
  border-radius: 5px 5px 0 0;
}

.box .box-title .configure {
  margin-right: 4px;
}

.box .box-content .item {
  padding-bottom: 0.25rem;
}

/*=== Tree View */
.tree {
  margin: 10px 0;
}

.tree-folder-title {
  position: relative;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background-color: var(--background-color-light);
  font-size: 1rem;
}

.aside_feed .tree-folder.all .tree-folder-title .title,
.aside_feed .tree-folder.important .tree-folder-title .title,
.aside_feed .tree-folder.favorites .tree-folder-title .title {
  margin-left: 0.25rem;
}

.aside_feed .tree-folder-title button.dropdown-toggle {
  margin: -0.75rem 0.25rem -0.75rem -0.75rem;
  padding: 0.75rem 0 0.75rem 0.75rem;
}

.aside_feed .tree-folder-title:hover button.dropdown-toggle .icon {
  filter: none;
}

.aside_feed .tree-folder-title button.dropdown-toggle:hover .icon {
  filter: brightness(1.5);
  transition: 0.1s linear;
}

.tree-folder-title .title {
  background: inherit;
  color: var(--font-color);
}

.tree-folder-title:hover {
  background-color: var(--background-color-hover);
}

.tree-folder-title .title:hover {
  text-decoration: none;
}

.tree-folder.active .tree-folder-title {
  background-color: var(--background-color-grey);
  font-weight: bold;
}

.tree-folder.active .tree-folder-title .title {
  color: var(--font-color-link);
}

.tree-folder-items {
  background-color: var(--background-color-light-shadowed);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.tree-folder-items > .item {
  line-height: 1.7;
  font-size: 0.8rem;
}

.tree-folder-items .item:hover {
  background-color: var(--background-color-light);
}

.tree-folder-items > .item.active {
  background-color: var(--contrast-background-color-active);
}

.tree-folder-items > .item.active .icon {
  filter: brightness(3);
}

.tree-folder-items > .item > a {
  text-decoration: none;
}

.tree-folder-items > .item.active > a {
  color: var(--font-color-light);
}

/*=== STRUCTURE ===*/
/*=================*/
/*=== Header */
.header {
  background-color: var(--background-color-grey);
}

.header > .item {
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  text-align: center;
}

.header > .item.title {
  width: 300px;
}

.header > .item.title a:hover .logo {
  filter: brightness(1.4);
}

.header > .item.search input {
  width: 350px;
}

/*=== Body */
.aside {
  background-color: var(--background-color-light);
  border-right: 1px solid var(--border-color);
}

.aside.aside_feed {
  padding: 0.5rem 0;
  text-align: center;
  background-color: var(--background-color-light);
}

.aside.aside_feed .tree {
  margin: 10px 0 50px;
}

/*=== Main Page Sidebar (Categories) */
.aside.aside_feed .category .title:not([data-unread="0"])::after,
.global .box.category .title:not([data-unread="0"])::after,
.global .feed .item-title:not([data-unread="0"])::after {
  background-color: var(--background-color-light-shadowed);
  color: var(--font-color-grey);
}

.aside.aside_feed
  .category
  .tree-folder-title:hover
  .title:not([data-unread="0"])::after {
  background-color: var(--background-color-light);
}

.aside.aside_feed .feed .item-title:not([data-unread="0"])::after {
  background-color: var(--background-color-light);
  color: var(--font-color-grey);
}

.aside.aside_feed .feed:hover .item-title:not([data-unread="0"])::after {
  background-color: var(--background-color-light-shadowed);
}

/*=== Main Page Sidebar (Feeds) */
.feed.item.empty.active {
  background-color: var(--empty-feed-color);
}

.feed.item.error.active {
  background-color: var(--error-feed-color);
}

.feed.item.empty,
.feed.item.empty > a {
  color: var(--empty-feed-color);
}

.feed.item.error,
.feed.item.error > a {
  color: var(--error-feed-color);
}

.feed.item.empty.active,
.feed.item.error.active,
.feed.item.empty.active > a,
.feed.item.error.active > a {
  color: var(--font-color-light);
}

.aside_feed .tree-folder-items .dropdown-menu::after {
  left: 2px;
}

/*=== Prompt (Centered) */
.prompt .form-group {
  margin-bottom: 1rem;
}

.prompt .form-group::after {
  display: none;
}

.prompt .form-group.form-group-actions {
  display: flex;
  margin-top: 2rem;
  align-items: center;
  justify-content: space-between;
}

.prompt .btn.btn-important {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 1.1rem;
}

/*=== New article notification */
#new-article {
  background-color: var(--contrast-background-color);
  text-align: center;
  font-size: 0.9em;
}

#new-article > a {
  color: var(--font-color-light);
  font-weight: bold;
}

#new-article > a:hover {
  text-decoration: none;
  background-color: var(--contrast-background-color-hover);
}

/*=== Transition indication, e.g. day divider */
.transition {
  padding: 0 10px;
  font-weight: bold;
  line-height: 3;
  background-color: var(--background-color-light);
  border-top: 1px solid var(--border-color);
}

.transition span {
  line-height: 1.5;
}

#new-article + .transition {
  border-top: none;
}

.transition .name {
  padding: 0 10px 0 0;
  color: var(--font-color-light-shadowed);
  font-size: 1.8em;
  opacity: 0.3;
  text-shadow: 0px -1px 0px var(--text-shadow-color-dark);
  font-style: italic;
  text-align: right;
}

/*=== Index menu */
.nav_menu {
  background-color: var(--background-color-light-shadowed);
  border-bottom: 1px solid var(--border-color);
}

/*=== Feed articles (MODIFIED FOR DIMMED READ STATE) */
.flux {
  /* READ: Dimmed background, grey text */
  background-color: var(--background-color-light-shadowed);
  color: var(--font-color-grey);
  border-left: 2px solid transparent;

  /* Italic and no bold */
  font-style: italic;
  font-weight: normal;
}

/* ICON MANAGEMENT (FAVICON) */
/* Default state for READ articles: Gray, semi-transparent */
.flux .favicon {
  filter: grayscale(100%) opacity(40%);
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

/* HOVER on READ: Still gray, but brightened and full opacity */
.flux:hover .favicon {
  filter: grayscale(100%) opacity(100%) brightness(1.3);
}

.flux.current {
  /* CURRENTLY SELECTED: Light background, normal text */
  background-color: var(--background-color-light);
  color: var(--font-color);
  border-left: 2px solid var(--contrast-border-color-active);

  /* Reset text style */
  font-style: normal;
  font-weight: normal;
}

/* EXCEPTIONS: UNREAD and CURRENTLY SELECTED articles - Colored icons */
.flux.not_read .favicon,
.flux.current .favicon {
  filter: none;
  opacity: 1;
}

/* Safeguard: Hover on unread/selected should not break colors */
.flux.not_read:hover .favicon,
.flux.current:hover .favicon {
  filter: none;
  opacity: 1;
}

.flux .flux_header:hover {
  background-color: var(--background-color-hover);
}

.flux .flux_header:not(.current):hover .flux_header,
.flux:not(.current):hover .flux_header .title,
.flux.current .flux_header {
  background-color: var(--background-color-hover);
}

.flux.not_read {
  border-left: 2px solid var(--unread-article-border-color);
  /* UNREAD: Light background, distinct text */
  background-color: var(--background-color-light);
  color: var(--font-color);

  /* Bold and no italic */
  font-weight: bold;
  font-style: normal;
}

.flux.not_read .flux_header {
  background-color: var(--unread-article-background-color);
}

.flux.not_read:not(.current):hover .flux_header .title,
.flux.not_read:not(.current):hover .flux_header,
.flux.not_read.current .flux_header {
  background-color: var(--unread-article-background-color-hover);
}

.flux.favorite {
  border-left: 2px solid var(--favorite-article-border-color);
}

.flux.favorite:not(.current) .flux_header {
  background-color: var(--favorite-article-background-color);
}

.flux.favorite:not(.current):hover .flux_header .title,
.flux.favorite:not(.current):hover .flux_header,
.flux.favorite.current .flux_header {
  background-color: var(--favorite-article-background-color-hover);
}

/* stylelint-disable-next-line no-duplicate-selectors */
.flux.current {
  border-left-width: 5px;
  border-left-style: double;
}

.flux.current > .flux_header {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 3px,
    var(--background-color-hover) 3px
  );
  margin-left: -3px; /* Compensate increased border-left-width */
}

.flux.not_read.current > .flux_header,
.flux.not_read.current > .flux_header:hover {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 3px,
    var(--unread-article-background-color-hover) 3px
  );
}

.flux.favorite.current > .flux_header,
.flux.favorite.current > .flux_header:hover {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 3px,
    var(--favorite-article-background-color-hover) 3px
  );
}

.flux_header {
  font-size: 0.9rem;
  border-top: 1px solid var(--border-color);
  cursor: pointer;
}

.flux .item .date {
  color: var(--font-color-grey);
  font-size: 0.7rem;
}

.day .name {
  flex-grow: 1;
  text-align: center;
}

.flux .bottom {
  font-size: 0.8rem;
  text-align: center;
}

/*=== Content of feed articles */
.content h1.title > a {
  color: var(--font-color);
}

.content hr {
  margin: 30px 10px;
  background-color: var(--background-color-grey);
  height: 1px;
  border: 0;
  box-shadow: 0 2px 5px var(--box-shadow-color);
}

.content pre {
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.content pre code {
  background: transparent;
  color: var(--font-color);
  border: none;
}

.content code {
  background-color: var(--background-color-light-shadowed);
  color: var(--error-feed-color);
  border-color: var(--border-color);
  border-radius: 3px;
}

.content blockquote {
  margin: 0;
  padding: 5px 20px;
  background-color: var(--background-color-light-shadowed);
  display: block;
  color: var(--font-color-grey);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.content blockquote p {
  margin: 0;
}

#stream-footer {
  border-top-color: var(--border-color);
}

/*=== Notifications and actualize notification */
.notification {
  font-size: 0.9em;
  border: 1px solid var(--notification-good-border-color);
  border-radius: 3px;
  box-shadow: 0 0 5px var(--box-shadow-color);
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
}

.notification.good {
  background-color: var(--notification-good-background-color);
  color: var(--notification-good-font-color);
  border: 1px solid var(--notification-good-border-color);
}

.notification.bad {
  background-color: var(--notification-bad-background-color);
  color: var(--notification-bad-font-color);
  border: 1px solid var(--notification-bad-border-color);
}

.notification .close:hover {
  background-color: var(--notification-close-background-color-hover);
}

.notification .close .icon {
  filter: brightness(1.5);
}

.notification .close:hover .icon {
  filter: brightness(0.5);
}

.notification#actualizeProgress {
  line-height: 2em;
}

/*=== "Load more" part */
#bigMarkAsRead.big {
  color: var(--font-color-grey);
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 var(--text-shadow-color);
}

#bigMarkAsRead:hover {
  background-color: var(--background-color-hover);
  color: var(--contrast-border-color-active);
  box-shadow: 0 -5px 10px var(--box-shadow-color-inset) inset;
}

#bigMarkAsRead:hover .bigTick {
  text-shadow: 0 0 5px var(--text-shadow-color);
}

/*=== Navigation menu (for articles) */
#nav_entries {
  background-color: var(--background-color-light);
  border-top: 1px solid var(--border-color);
}

/*=== READER VIEW ===*/
/*===================*/
#stream.reader .flux {
  background-color: var(--background-color-grey);
  border: none;
}

#stream.reader .flux .flux_content {
  background-color: var(--background-color-light);
  border-color: var(--border-color);
}

#stream.reader .flux .author {
  color: var(--font-color-grey);
}

/*=== GLOBAL VIEW ===*/
/*===================*/
.box.category:not([data-unread="0"]) .box-title {
  background-color: var(--contrast-background-color);
}

.box.category .box-title .title {
  display: block;
  font-weight: normal;
}

.box.category:not([data-unread="0"]) .box-title .title {
  color: var(--font-color-light);
  font-weight: bold;
}

.box.category .title:not([data-unread="0"])::after {
  background: none;
  color: var(--font-color-light);
  border: 0;
  box-shadow: none;
  position: absolute;
  top: 5px;
  right: 10px;
  font-weight: bold;
  text-shadow: none;
}

/*=== MISCELLANEOUS ===*/
/*=====================*/
.aside.aside_feed .nav-form input,
.aside.aside_feed .nav-form select {
  width: 140px;
}

.aside.aside_feed .nav-form .dropdown .dropdown-menu {
  right: -20px;
}

.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
  right: 33px;
}

/*=== STATISTICS ===*/
/*==================*/
.stat {
  margin: 10px 0 20px;
}

.stat th,
.stat td,
.stat tr {
  border: none;
}

.stat > table td,
.stat > table th {
  border-bottom: 1px solid var(--border-color);
}

/*=== LOGS ===*/
/*============*/
.pagination .item.active {
  background-color: var(--contrast-background-color-active);
  color: white;
}

#loglist td {
  font-family: monospace;
}

/*=== MOBILE ===*/
/*==============*/

@media (max-width: 840px) {
  .header > .item {
    padding: 0.5rem 1rem;
  }

  .header > .item.title {
    width: 75%;
    text-align: left;
  }

  .header > .item.configure {
    width: 25%;
    text-align: right;
  }

  .form-group .group-name {
    padding-bottom: 0;
  }

  .aside {
    transition: width 200ms linear;
  }

  .aside:target {
    box-shadow: 3px 0 3px var(--text-shadow-color);
  }

  .aside .toggle_aside,
  #overlay .close,
  .dropdown-menu .toggle_aside,
  #slider .toggle_aside {
    background-color: var(--background-color-light-shadowed);
    border-bottom: 1px solid var(--border-color);
  }

  .aside.aside_feed {
    padding: 0;
  }

  .post {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nav_menu .btn {
    margin: 5px 10px;
    padding: 3px 5px;
    min-height: 0;
  }

  .nav_menu .stick,
  .nav_menu .group {
    margin: 0 10px;
  }

  .nav_menu .stick .btn,
  .nav_menu .group .btn {
    margin: 5px 0;
  }

  .dropdown-target:target ~ .dropdown-toggle::after {
    background-color: var(--background-color-light);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
  }

  .dropdown-menu .dropdown-section:last-child {
    margin-bottom: 3rem;
  }

  .item.configure .dropdown .dropdown-menu {
    border-radius: 0;
  }

  #nav_menu_read_all .btn {
    border-left: 1px solid var(--border-color-shadow-side);
    border-radius: 3px;
  }

  #overlay {
    background-color: var(--background-color-light);
  }

  .form-group.form-actions {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .transition .name {
    font-size: 1.1rem;
    text-shadow: none;
  }

  .notification .close {
    background-color: transparent;
    display: block;
    left: 0;
  }

  .notification .close:hover {
    opacity: 0.5;
  }

  .notification .close .icon {
    display: none;
  }
}

/* ========================================================================== */
/* === VISUAL STYLES: COUNTS AND BUTTONS === */
/* ========================================================================== */

/* COUNTS / BADGES (PURPLE PILLS) */
.aside .feed .item-title:not([data-unread="0"])::after,
.aside .category .title:not([data-unread="0"])::after,
.global .box.category .title:not([data-unread="0"])::after {
  background-color: var(--contrast-background-color) !important; /* Purple */
  color: var(--font-color-light) !important;
  border: none !important;
  border-radius: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Count in active feed (Pink) */
.feed.active .item-title:not([data-unread="0"])::after {
  background-color: var(
    --contrast-background-color-active
  ) !important; /* Pink */
  color: var(--contrast-background-font-color) !important;
  box-shadow: 0 0 8px var(--contrast-background-color-active);
}

.btn.btn-important:hover {
  filter: brightness(1.1);
}

/* === DARK MODE (prefers-color-scheme: dark) === */
@media screen and (prefers-color-scheme: dark) {
  :root.darkMode_auto {
    --frss-padding-top-bottom: 0.5rem;

    /* --- Backgrounds (Dracula Dark) --- */
    /* Using #282A36 (Background) and #44475A (Current Line/Selection) */
    --background-color-light-gradient1: #282a36;
    --background-color-light-gradient2: #282a36; /* Flattened gradients for modern look */
    --background-color-light: #1f212a;
    --background-color-light-shadowed: #1e1f29; /* Slightly darker than main bg */
    --background-color-light-shadowed-transparent: #282a36a8;
    --background-color-grey: #282a36;
    --background-color-hover: #44475a; /* Dracula Selection color */

    /* --- Articles --- */
    /* Keeping backgrounds dark to avoid eye strain, using borders for status */
    --unread-article-background-color: #282a36;
    --unread-article-background-color-hover: #44475a;
    --unread-article-border-color: #ffb86c; /* Dracula Orange */

    --favorite-article-background-color: #282a36;
    --favorite-article-background-color-hover: #44475a;
    --favorite-article-border-color: #f1fa8c; /* Dracula Yellow */

    /* --- Primary Actions/Buttons (Purple) --- */
    --contrast-background-color: #bd93f9; /* Dracula Purple */
    --contrast-background-color-gradient: #bd93f9;
    --contrast-background-color-hover: #ff79c6; /* Dracula Pink on hover */
    --contrast-background-color-active: #ff79c6;
    --contrast-border-color: #bd93f9;

    --contrast-background-font-color: #282a36; /* Dark text on bright purple buttons */

    /* --- Dangerous Actions (Red) --- */
    --attention-background-color-gradient1: #ff5555; /* Dracula Red */
    --attention-background-color-gradient2: #ff5555;
    --attention-background-color-gradient1-hover: #ff6e6e;
    --attention-background-color-gradient2-hover: #ff6e6e;
    --attention-background-color-active: #ff5555;
    --attention-border-color: #ff5555;

    /* --- Feed Status --- */
    --empty-feed-color: #ffb86c; /* Orange */
    --error-feed-color: #ff5555; /* Red */

    /* --- Alerts (Inverted for Dark Mode) --- */
    /* Warning */
    --alert-warn-background-color: #44475a; /* Current Line */
    --alert-warn-font-color: #ffb86c; /* Orange */
    --alert-warn-border-color: #ffb86c;

    /* Success */
    --alert-success-background-color: #282a36;
    --alert-success-font-color: #50fa7b; /* Green */
    --alert-success-border-color: #50fa7b;

    /* Error */
    --alert-error-background-color: #282a36;
    --alert-error-font-color: #ff5555; /* Red */
    --alert-error-boder-color: #ff5555;

    /* --- Notifications --- */
    --notification-good-background-color: #44475a;
    --notification-good-border-color: #50fa7b;
    --notification-good-font-color: #50fa7b;

    --notification-bad-background-color: #44475a;
    --notification-bad-font-color: #ff5555;
    --notification-bad-border-color: #ff5555;
    --notification-close-background-color-hover: #6272a4;

    /* --- Typography --- */
    --font-color: #f8f8f2; /* Dracula Foreground */
    --font-color-grey: #6272a4; /* Dracula Comment */
    --font-color-light-shadowed: #6272a4;
    --font-color-light: #f8f8f2;

    --text-shadow-color: #282a36;
    --text-shadow-color-dark: #282a36;

    /* Shadows adjusted for dark mode */
    --box-shadow-color: #00000040;
    --box-shadow-color-inset: #00000040;

    /* Links */
    --font-color-link: #8be9fd; /* Dracula Cyan */
    --font-color-link-hover: #ff79c6; /* Dracula Pink */

    /* --- Borders --- */
    --border-color: #6272a4; /* Dracula Comment */
    --border-color-shadow-side: #44475a;
    --frss-border-color: var(--border-color);
    --contrast-border-color-active: #bd93f9;

    /* --- Forms/Inputs --- */
    --form-element-font-color-focus: #bd93f9; /* Purple */
    --form-element-border-color-focus: #bd93f9;
    --form-element-focus-box-shadow-color-inset: #44475a;
    --form-element-border-color-invalid: #ff5555;
    --form-element-invalid-box-shadow-color-inset: #ff5555;
    --frss-background-color-transparent: #1e1f299e !important;
  }

  :root.darkMode_auto .nav_menu .btn {
    color: #777;
  }

  :root.darkMode_auto .nav_menu .btn:hover {
    color: var(--font-color-grey);
  }

  :root.darkMode_auto .nav_menu .btn.active,
  :root.darkMode_auto .nav_menu .btn:active,
  :root.darkMode_auto .nav_menu .dropdown-target:target ~ .btn.dropdown-toggle {
    background: #292929;
  }

  :root.darkMode_auto .dropdown-menu {
    background-color: #0a0a0a;
  }

  :root.darkMode_auto .nav_menu {
    background-color: #141414;
  }

  :root.darkMode_auto .header {
    background-color: var(--background-color-light-shadowed);
  }

  :root.darkMode_auto .btn.active .icon,
  :root.darkMode_auto .btn:active .icon {
    filter: brightness(1.4);
  }

  :root.darkMode_auto .spinner {
    filter: invert(1) brightness(2);
  }

  /* ========================================================================== */
  /* === GLOBAL FRSS OVERRIDES & FINAL STYLES === */
  /* ========================================================================== */

  :root {
    /* FRSS SYSTEM VARIABLE MAPPING (Fixing white backgrounds) */
    --frss-background-color: var(--background-color-light);
    --frss-background-color-middle: var(--background-color-light-shadowed);
    --frss-background-color-dark: var(--background-color-hover);
    --frss-border-color: var(--border-color);
    --frss-font-color-dark: var(--font-color);
    --frss-font-color-grey-dark: var(--font-color-grey);
    --frss-font-color-light: var(--font-color-light);

    /* Variables for scrollbars (base color) */
    --frss-scrollbar-handle: var(--contrast-background-color);
    --frss-scrollbar-track: var(--background-color-grey);

    /* Forcing scrollbar handle color on hover (to prevent gray) */
    --frss-scrollbar-handle-hover: var(
      --contrast-background-color-hover
    ) !important;
    --frss-scrollbar-track-hover: var(--background-color-hover) !important;

    /* Custom override for transparent background (red) */
    --frss-background-color-transparent: #1e1f29d9 !important;
  }

  @media screen and (prefers-color-scheme: dark) {
    :root.darkMode_auto {
      /* Forcing dark system background for settings */
      --frss-background-color: #282a36 !important;
      --frss-background-color-middle: #44475a !important;
      --frss-font-color-dark: #f8f8f2 !important;

      /* Safeguard against white input backgrounds in settings */
      input,
      select,
      textarea {
        background-color: #282a36 !important;
        color: #f8f8f2 !important;
      }
    }

    /* Forcing dark background globally for stubborn sections */
    #global,
    .post,
    .box,
    main.prompt {
      background-color: var(--background-color-light) !important;
      color: var(--font-color) !important;
    }
  }
}