/* ============================= */
/*         GLOBAL SETTINGS      */
/* ============================= */
:root {
  --primary: #ee172b; /* Wunsch-Pink */
  --table-border-radius: 8px;
  --gray-100: #f6f7f5;
  --gray-200: #eaeae7;
  --gray-300: #dcd5d4;
  --gray-400: #c2bdbd;
  --gray-500: #9f9697;
  --gray-600: #706a69;
  --gray-700: #534e4f;
  --gray-800: #3c383b;
  --gray-900: #2e2c2f;
  --gray-1000: #181517;
  --gray-1100: #0c0c0c;
  --red-400: #d72223;
  --yellow-500: #f5b40d;
  --yellow-500-rgb: 245, 180, 13;
  --yellow-800: #7b5a07;
  --primary-100: #f3e6ed;
  --primary-200: #e1bfd1;
  --primary-300: #cf99b6;
  --primary-400: #ff3366;
  --primary-500: #870048;
  --primary-500-rgb: 135, 0, 72;
  --primary-500-hsl: 328, 100%, 26.5%;
  --primary-600: #ee172b;
  --primary-700: #51002b;
  --primary-800: #3d0020;
  --primary-900: #290016;
}

/* ============================= */
/*           BODY               */
/* ============================= */
body {
  background: url('https://i.pinimg.com/originals/af/87/37/af8737990af6a3f19d0f45dbd8912094.jpg') no-repeat center/cover fixed;
  color: var(--gray-300);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.7);
  z-index: -1;
}

/* ============================= */
/*       THEME DARK COLORS      */
/* ============================= */
.theme-dark {
  --background-primary: var(--gray-1100);
  --background-secondary: var(--gray-1000);
  --background-modifier-border: var(--gray-800);
  --background-modifier-form-field: var(--gray-1100);
  --text-accent: var(--primary-400);
  --text-normal: var(--gray-300);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);
  --text-highlight-bg: var(--yellow-800);
  --text-selection: rgba(var(--yellow-500-rgb), 0.5);
  --text-on-accent: var(--gray-100);
  --interactive-accent: var(--primary-500);
  --interactive-hover: var(--primary-800);
  --scrollbar-active-thumb-bg: var(--primary-700);
  --text-error: var(--red-400);
}

/* ============================= */
/*        STYLE ELEMENTS        */
/* ============================= */
.markdown-preview-view {
  padding: 2rem;
  background: rgba(20, 20, 20, 0.8);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 0, 80, 0.1);
  max-width: 1000px;
  margin: 3rem auto;
}

.markdown-preview-view blockquote {
  background: var(--gray-1000);
  border-left: 4px solid var(--primary-600);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

.markdown-preview-view code,
.cm-s-obsidian .cm-inline-code {
  background: rgba(30, 30, 30, 0.9);
  padding: 0.3em 0.6em;
  border-radius: 6px;
  color: var(--primary-400);
  font-family: Consolas, monospace;
  font-size: 0.95em;
}

.markdown-preview-view a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color 0.3s, border-bottom 0.3s;
}

.markdown-preview-view a:hover {
  color: #ff4f6d;
  border-bottom: 1px solid #ff4f6d;
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 0, 79, 0.4);
  margin-top: 2em;
}

.markdown-preview-view h2 {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-700);
}

.markdown-preview-view h3 {
  cursor: pointer;
  transition: color 0.3s;
}

.markdown-preview-view h3:hover {
  color: #fff;
}

.markdown-preview-view ul,
.markdown-preview-view ol {
  margin: 1.5rem 1rem;
  padding-left: 2rem;
}

.markdown-preview-view table {
  border-collapse: separate;
  border-radius: var(--table-border-radius);
  width: 100%;
  margin: 2.5rem 0;
  font-size: 0.9em;
}

.markdown-preview-view thead tr {
  background: var(--primary-700);
  color: hsl(var(--primary-500-hsl), 70%);
}

.markdown-preview-view th,
.markdown-preview-view td {
  padding: 0.5rem 1rem;
  border: none;
}

.markdown-preview-view tbody tr:nth-child(odd) {
  background: #231f21;
}

.markdown-preview-view tbody tr:nth-child(even) {
  background: var(--gray-1000);
}

.markdown-preview-view tbody tr:hover {
  background: var(--gray-800);
}

/* ============================= */
/*       NAVIGATION             */
/* ============================= */
.nav-file-title,
.nav-folder-title {
  color: var(--primary-600);
}

.nav-file-title.is-active,
.nav-folder-title.is-active,
body:not(.is-grabbing) .nav-file-title:hover,
body:not(.is-grabbing) .nav-folder-title:hover {
  background: rgba(238, 23, 43, 0.1);
  color: var(--primary-400);
  transition: color 0.3s, background-color 0.3s;
}

/* ============================= */
/*           TAGS               */
/* ============================= */
.tag:not(.token) {
  background: rgba(var(--primary-500-rgb), 0.18);
  border: 2px solid hsla(var(--primary-500-hsl), 0.3);
  color: hsl(var(--primary-500-hsl), 70%);
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 14px;
  cursor: pointer;
}

.tag:not(.token):hover {
  background: rgba(var(--primary-500-rgb), 0.4);
  color: #fff;
}

.tag[href^="#obsidian"] { background: #4d3ca6; }
.tag[href^="#important"] { background: red; }
.tag[href^="#complete"] { background: green; }
.tag[href^="#inprogress"] { background: orange; }


/* ============================= */
/*           FOOTER              */
/* ============================= */

/* Footer */
.markdown-preview-view::after {
  content: "Bitte beachte unseren Haftungsausschluss. Du findest ihn im Hauptmenü auf der linken Seite.\A Mifcom Shop: Mifcom.eu\A *Copyright © MIFCOM GmbH*\A Inhalte dieses Angebots unterliegen dem Urheberrecht. Entnahme oder Weiterverwendung ist ohne Zustimmung untersagt.";
  display: block;
  text-align: center;
  font-size: 0.85em;
  color: #888;
  padding: 1.5rem 1rem;
  background: rgba(10, 10, 10, 0.7);
  border-top: 1px solid var(--primary);
  margin-top: auto;
  position: relative;
  width: 100%;
  white-space: pre-line;
}

/* Sicherstellen, dass der Inhalt scrollbar ist und der Footer unten bleibt */
.markdown-preview-view {
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}


/* ============================= */
/*           BUTTONS            */
/* ============================= */
.button-class,
.markdown-preview-view a.button-class {
  display: inline-block;
  background: rgba(255, 79, 109, 0.05);
  color: #fff;
  padding: 10px 20px;
  margin: 8px 0;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(255, 79, 109, 0.25);
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
}

.button-class:hover {
  background: rgba(255, 79, 109, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 79, 109, 0.4);
}

.button-class:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(255, 79, 109, 0.3);
}