/* Shearia Styleguide - CSS File */

/* ===========================
   CSS-Variablen
   =========================== */
:root {
    /* Farben */
    --shearia-primary: #9ED6D0;
    --shearia-secondary: #30444A;
    --shearia-text-dark: #3D3D3D;
    --shearia-text-secondary: #A7BBC2;
    --shearia-bg-base: #FAFAFA;
    --shearia-bg-secondary: #E8F3F1;
    --shearia-bg-alternative: #D8CFC4;
    --shearia-border: #C2DAD6;
    --shearia-border-width: 1px;
    --shearia-separator-width: 2px;
    --shearia-accent1: #A86E8C;
    --shearia-accent2: #8E5572;
    /* Zustände */
    --shearia-success: var(--shearia-primary);
    --shearia-warning: var(--shearia-accent1);
    --shearia-error: var(--shearia-accent2);   
    
    /* Typografie */
    --shearia-font-family: 'Montserrat', sans-serif;
    --shearia-font-size-axis: 12px;
    --shearia-font-size-base: 16px;
    --shearia-font-size-h1: 32px;
    --shearia-font-size-h2: 24px;
    --shearia-font-size-h3: 18px;
    
    /* Spacing & Layout */
    --shearia-radius: 14px;
    --shearia-spacing-xs: 8px;
    --shearia-spacing-sm: 12px;
    --shearia-spacing-md: 16px;
    --shearia-spacing-lg: 24px;
    --shearia-spacing-xl: 32px;
}
 

/* ===========================
   Globale Basis-Styles
   =========================== */
html {
    scroll-behavior: smooth;
}

/* Hero Pill */
.hero-pill {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 6px 16px;
    font-family: var(--shearia-font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--shearia-secondary);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin-bottom: 20px;
}

@media (max-width: 768px) {
  .hero-pill {
    font-size: 11px !important;
    padding: 4px 12px !important;
    margin-bottom: 12px !important;
  }
}

/* AppShell header border matches primary so it blends with hero gradient */
.mantine-AppShell-header {
    border-bottom-color: var(--shearia-primary) !important;
}

/* Full-bleed sections break out of AppShell padding */
.section-full-bleed {
    margin-left: calc(-1 * var(--app-shell-padding));
    margin-right: calc(-1 * var(--app-shell-padding));
}

/* Remove AppShell bottom padding so footer sits flush */
.mantine-AppShell-main {
    padding-bottom: 0 !important;
}

.section-full-bleed-top {
    margin-top: calc(-1 * var(--app-shell-padding));
}

body {
    font-family: var(--shearia-font-family);
    font-size: var(--shearia-font-size-base);
    color: var(--shearia-text-dark);
    background-color: var(--shearia-bg-base);
    margin: 0;
    padding: 0;
}

/* ===========================
   Typografie
   =========================== */
h1, .mantine-Title-root[data-order="1"] {
    font-size: var(--shearia-font-size-h1);
    font-weight: 600;
    color: var(--shearia-text-dark);
    font-family: var(--shearia-font-family);
}

h2, .mantine-Title-root[data-order="2"] {
    font-size: var(--shearia-font-size-h2);
    font-weight: 600;
    color: var(--shearia-text-dark);
    font-family: var(--shearia-font-family);
}

h3, .mantine-Title-root[data-order="3"] {
    font-size: var(--shearia-font-size-h3);
    font-weight: 600;
    color: var(--shearia-text-dark);
    font-family: var(--shearia-font-family);
}

/* ===========================
   Alerts
   =========================== */


.mantine-Alert-root {
  background-color: var(--shearia-bg-base) !important;
  color: var(--shearia-primary) !important;
  border: var(--shearia-border-width) solid var(--shearia-border) !important;
  border-radius: var(--shearia-radius);
}


.alert-success.mantine-Alert-root,
.alert-success.mantine-Alert-root .mantine-Alert-wrapper {
  background-color: var(--shearia-bg-base) !important;
  /*border: 1px solid var(--shearia-success) !important; */
  color: var(--shearia-success) !important;
}

.alert-success .mantine-Alert-title,
/*.alert-success .mantine-Alert-message,*/
.alert-success .mantine-Alert-icon {
  color: var(--shearia-success) !important;
}


.alert-error.mantine-Alert-root,
.alert-error.mantine-Alert-root .mantine-Alert-wrapper {
  background-color: var(--shearia-bg-base) !important;
  /*border: 1px solid var(--shearia-error) !important;*/
  color: var(--shearia-error) !important;
}

.alert-error .mantine-Alert-title,
/*.alert-error .mantine-Alert-message,*/
.alert-error .mantine-Alert-icon {
  color: var(--shearia-error) !important;
}


.alert-warning.mantine-Alert-root,
.alert-warning.mantine-Alert-root .mantine-Alert-wrapper {
  background-color: var(--shearia-bg-base) !important;
  /*border: 1px solid var(--shearia-warning) !important;*/
  color: var(--shearia-warning) !important;
  
}
.alert-warning .mantine-Alert-title,
/*.alert-warning .mantine-Alert-message,*/
.alert-warning .mantine-Alert-icon {
  color: var(--shearia-warning) !important;
}

/* Journal Editor */
#journal-editor {
  border-radius: var(--shearia-radius);
  overflow: hidden;
  --mantine-color-default-border: var(--shearia-border) !important;
  --rte-border-color: var(--shearia-border);
  --rte-controls-border-color: var(--shearia-border);
  --rte-color: var(--shearia-border);
}
#journal-editor.mantine-RichTextEditor-root,
#journal-editor .mantine-RichTextEditor-root {
  border-radius: var(--shearia-radius);
  overflow: hidden;
  border: var(--shearia-border-width) solid var(--shearia-border) !important;
}
#journal-editor .mantine-RichTextEditor-toolbar {
  border-radius: var(--shearia-radius) var(--shearia-radius) 0 0;
  border-bottom: var(--shearia-border-width) solid var(--shearia-border) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
#journal-editor .mantine-RichTextEditor-content {
  border-radius: 0 0 var(--shearia-radius) var(--shearia-radius);
  border: 0 !important;
}





/* ===========================
   Input errors
   =========================== */

.mantine-TextInput-input[data-error="true"],
.mantine-PasswordInput-input[data-error="true"] {
  border-color: var(--shearia-error) !important;
  background-color: rgba(255, 0, 0, 0.04) !important;
  color: var(--shearia-accent2) !important;        /* <-- Textfarbe */
}

/* Label und Fehlermeldung */
.mantine-TextInput-label[data-error="true"],
.mantine-TextInput-error,
.mantine-PasswordInput-label[data-error="true"],
.mantine-PasswordInput-error {
  color: var(--shearia-error) !important;
}


/* Left- oder Right-Section-Icon (z. B. Email-Symbol) */
.mantine-Input-section[data-position="left"],
.mantine-Input-section[data-position="right"] {
  color: inherit !important; /* erbt Farbe vom Input */
}

.mantine-TextInput-input[data-error="true"] + .mantine-Input-section,
.mantine-Input-wrapper[data-error="true"] .mantine-Input-section {
  color: var(--shearia-error) !important;        /* färbt das Icon */
}

/* Cursor-Fokus auch in Error-Farbe */
.mantine-TextInput-input[data-error="true"]:focus,
.mantine-PasswordInput-input[data-error="true"]:focus {
  outline: var(--shearia-border-width) solid var(--shearia-error) !important;
}
/* ===========================
   Buttons
   =========================== */
/*.alert-error.mantine-Alert-root[data-variant="filled"]{
  background-color: var(--shearia-bg-base) !important;
  color: var(--shearia-accent1) !important;
  border: 1px solid var(--shearia-accent1) !important;
}
.alert-error .mantine-Alert-icon,
.alert-error .mantine-Alert-title,
.alert-error .mantine-Alert-message {
    color: var(--shearia-accent1, #fff) !important;
}
*/
.mantine-Stepper-contentInner {
  border: none !important;
}

.mantine-Button-root {
    font-weight: 500;
    border-radius: var(--shearia-radius);
    transition: background-color 0.2s ease;
    --button-bg: var(--shearia-primary);
    --button-hover: var(--shearia-border);
    --button-color: white;
     text-decoration: none;
}
a.mantine-Button-root,
a.mantine-Button-root:hover,
.mantine-Button-root:where(a):hover {
  text-decoration: none !important;
}

.mantine-Button-root[data-variant="primary-inverse"]{
    font-weight: 500;
    border-radius: var(--shearia-radius);
    transition: background-color 0.2s ease;
    --button-bg: white;
    --button-hover: var(--shearia-primary);
    --button-color: var(--shearia-primary);
}

.mantine-Button-root[data-variant="primary-inverse"].flush-active {
  background-color: var(--shearia-primary);
  color: white;
  border-color: var(--shearia-primary);
}


.mantine-Button-root:hover[data-variant="primary-inverse"]{
    background-color: var(--button-hover);
    color: white;
}

.mantine-Button-root[data-variant="secondary"] {
    font-weight: 500;
    border-radius: var(--shearia-radius);
    transition: background-color 0.2s ease;
    --button-bg: var(--shearia-secondary);
    --button-color: white;
    --button-hover: var(--shearia-border);
}
.mantine-Button-root:hover[data-variant="secondary"]{
    background-color: var(--button-hover);
    color: white;
}

.mantine-Button-root[data-variant="accent"] {
    font-weight: 500;
    border-radius: var(--shearia-radius);
    transition: background-color 0.2s ease;
    --button-bg: var(--shearia-accent1);
    --button-hover: var(--shearia-accent2);
    --button-color: white;
}

.mantine-ActionIcon-root {
    border-radius: var(--shearia-radius);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="primary"],
.mantine-ActionIcon-root[data-variant="light"][data-color="primary"] {
    background-color: var(--shearia-primary);
    color: white;
    border: var(--shearia-border-width) solid var(--shearia-primary);
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="primary"]:hover,
.mantine-ActionIcon-root[data-variant="light"][data-color="primary"]:hover {
    background-color: var(--shearia-border);
    color: white;
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="secondary"],
.mantine-ActionIcon-root[data-variant="light"][data-color="secondary"] {
    background-color: var(--shearia-secondary);
    color: white;
    border: var(--shearia-border-width) solid var(--shearia-secondary);
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="secondary"]:hover,
.mantine-ActionIcon-root[data-variant="light"][data-color="secondary"]:hover {
    background-color: var(--shearia-border);
    color: white;
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="accent"],
.mantine-ActionIcon-root[data-variant="light"][data-color="accent"] {
    background-color: var(--shearia-accent1);
    color: white;
    border: var(--shearia-border-width) solid var(--shearia-accent1);
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="accent"]:hover,
.mantine-ActionIcon-root[data-variant="light"][data-color="accent"]:hover {
    background-color: var(--shearia-accent2);
    color: white;
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="danger"],
.mantine-ActionIcon-root[data-variant="light"][data-color="danger"] {
    background-color: var(--shearia-warning);
    color: white;
    border: var(--shearia-border-width) solid var(--shearia-warning);
}

.mantine-ActionIcon-root[data-variant="filled"][data-color="danger"]:hover,
.mantine-ActionIcon-root[data-variant="light"][data-color="danger"]:hover {
    background-color: var(--shearia-error);
    color: white;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="primary"] {
    background-color: transparent;
    color: var(--shearia-primary);
    border: none;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="primary"]:hover {
    background-color: var(--shearia-primary);
    color: white;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="secondary"] {
    background-color: transparent;
    color: var(--shearia-secondary);
    border: none;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="secondary"]:hover {
    background-color: var(--shearia-secondary);
    color: white;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="accent"] {
    background-color: transparent;
    color: var(--shearia-accent1);
    border: none;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="accent"]:hover {
    background-color: var(--shearia-accent2);
    color: white;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="danger"] {
    background-color: transparent;
    color: var(--shearia-warning);
    border: none;
}

.mantine-ActionIcon-root[data-variant="subtle"][data-color="danger"]:hover {
    background-color: var(--shearia-warning);
    color: white;
}

/* Häkchen-Hintergrund + Rahmen, wenn angehakt */
.mantine-Checkbox-input:checked,
.mantine-Checkbox-input[data-checked] {
  background-color: var(--shearia-primary) !important;
  border-color: var(--shearia-primary) !important;
}

/* Fokus-Ring */
.mantine-Checkbox-input:focus-visible {
  outline: 2px solid var(--shearia-primary);
  outline-offset: 2px;
}

/* Häkchen-Farbe (Icon) */
.mantine-Checkbox-icon {
  color: #fff; /* oder var(--shearia-on-primary) */
}

/* ===========================
   Cards & Paper
   =========================== */
.mantine-Card-root {
    background-color: var(--shearia-bg-secondary);
    border: var(--shearia-border-width) solid var(--shearia-border);
    border-radius: var(--shearia-radius);
}

.mantine-Paper-root {
    background-color: var(--shearia-bg-base);
    border: var(--shearia-border-width) solid var(--shearia-border);
    border-radius: var(--shearia-radius);
}

#tag-sidebar .mantine-Accordion-item {
    border: var(--shearia-border-width) solid var(--shearia-border) !important;
}

#tag-sidebar .mantine-Accordion-panel {
    border-top: var(--shearia-border-width) solid var(--shearia-border) !important;
}




/* ===========================
   Stepper
   =========================== */

/* ===========================
   Text
   =========================== */
.mantine-Text-root {
    color: var(--shearia-text-dark);
}

.text-secondary {
    color: var(--shearia-text-secondary);
}

/* ===========================
   Navigation
   =========================== */
.mantine-Header-root,
.mantine-Navbar-root {
    background-color: white;
    color: var(--shearia-secondary);
}

/* Active step */
.mantine-Stepper-stepIcon[data-progress="true"] {
  background-color: var(--shearia-primary);
  border-color: var(--shearia-primary);
  color: white;
}

/* Completed step */
.mantine-Stepper-stepIcon[data-completed="true"] {
  background-color: var(--shearia-primary);
  border-color: var(--shearia-primary);
  color: white;
}

/* Inactive steps */
.mantine-Stepper-stepIcon {
  background-color: white;
  border-color: var(--shearia-border);
  color: var(--shearia-text);
}

/* Labels */
.mantine-Stepper-stepLabel {
  font-weight: 600;
  color: var(--shearia-text);
}

/* Descriptions */
.mantine-Stepper-stepDescription {
  color: var(--shearia-muted);
}

/* Connector line */
.mantine-Stepper-separator {
  border-top: var(--shearia-separator-width) solid var(--shearia-border);
  border-color: var(--shearia-border);
}

/* ===========================
   Progress Bar
   =========================== */

.progress-warning .mantine-Progress-section {
  background-color: var(--shearia-warning) !important;
}

.progress-error .mantine-Progress-section {
  background-color: var(--shearia-error) !important;
}

/* ===========================
   Contact Section – dark-bg form fields
   =========================== */
.contact-field-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ===========================
   Footer
   =========================== */
.mantine-Footer-root {
    background-color: var(--shearia-secondary);
    color: white;
}

/* ===========================
   Inputs
   =========================== */
.mantine-Input-input {
    border-width: var(--shearia-border-width);
    border-style: solid;
    border-color: var(--shearia-border);
    border-radius: var(--shearia-radius);
    font-family: var(--shearia-font-family);
}

.mantine-Input-input:focus {
    border-color: var(--shearia-primary);
}

.shearia-auth-field {
  width: 100%;
  max-width: 340px;
}

.centered-field {
  margin-left: auto;
  margin-right: auto;
}


/* ===========================
   Utility Classes
   =========================== */
.shearia-card {
  background-color: #fff;
  border: var(--shearia-border-width) solid var(--shearia-border);
  border-radius: var(--shearia-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: var(--shearia-spacing-md);
}

.section-alternative {
    background-color: var(--shearia-bg-alternative);
    padding: var(--shearia-spacing-lg);
    border-radius: var(--shearia-radius);
}

.shearia-paper-content .mantine-Paper-root {
  background-color: #fff !important;
  border-color: var(--shearia-border);
  border-radius: var(--shearia-radius);
  overflow: hidden;
}

.bg-base {
    background-color: var(--shearia-bg-base);
}

.bg-secondary {
    background-color: var(--shearia-bg-secondary);
}

.bg-alternative {
    background-color: var(--shearia-bg-alternative);
}

.text-dark {
    color: var(--shearia-text-dark);
}

.text-secondary {
    color: var(--shearia-text-secondary);
}


.spin {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* Hover-Farbe für Zeilen */


body .shearia-grid.ag-theme-alpine {
  --ag-selected-row-background-color: var(--shearia-bg-secondary);
  --ag-row-hover-color: var(--shearia-bg-secondary);
}


body .shearia-grid.ag-theme-alpine .ag-row-hover {
  background: var(--shearia-bg-secondary) !important;
}

/* Selektierte Zeile (optional angleichen) */
body .shearia-grid.ag-theme-alpine .ag-row-selected {
  background: var(--shearia-bg-secondary) !important;
}

/* Farbe des Haken/Checkbox */
body .shearia-grid.ag-theme-alpine .ag-selection-checkbox .ag-icon {
  color: var(--shearia-accent1) !important;
}

/* Variante über CSS-Variablen */
body .shearia-grid.ag-theme-alpine {
  --ag-checkbox-checked-color: var(--shearia-accent1);
  --ag-icon-color: var(--shearia-accent1); /* falls Icons generell */
}

/* Fallback/zusätzliche Spezifizität auf die Icon-Klasse */
body .shearia-grid.ag-theme-alpine .ag-icon-checkbox-checked,
body .shearia-grid.ag-theme-alpine .ag-icon-checkbox-indeterminate {
  color: var(--shearia-accent1) !important;
}

.dmc-mention,
.journal-mention {
    border-radius: var(--shearia-radius) !important;
    padding: 2px 10px !important;
    display: inline-flex;
    align-items: center;
    line-height: 1.25 !important;
    margin-right: 2px;
    background-clip: padding-box;
    border: var(--shearia-border-width) solid currentColor !important;
    border-color: color-mix(in srgb, currentColor 45%, transparent) !important;
    font-weight: 600 !important;
}

.dmc-mention-deleted {
    opacity: 0.78;
    border-style: dashed !important;
    text-decoration: line-through;
}

/* Mention dropdown */
.mention-dropdown {
    position: absolute;
    min-width: 200px;
    background: #fff;
    border: var(--shearia-border-width) solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 2000;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.mention-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.mention-item:hover {
    background: #f1f4ff;
}

.mention-item span {
    font-weight: 500;
}

.mention-item small {
    color: #6b7280;
    font-size: 12px;
}


/* Plotly: Querformat-Hinweis nur auf Mobile */
.plot-mobile-hint {
  display: none;
}
@media (max-width: 768px) {
  .plot-mobile-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--shearia-text-secondary);
    padding: 4px 0 2px;
  }
}

/* Plotly: kleinere Schrift + Modebar ausblenden auf Mobile */
@media (max-width: 768px) {
  .js-plotly-plot text {
    font-size: 10px !important;
  }
  .js-plotly-plot .gtitle {
    font-size: 13px !important;
  }
  .js-plotly-plot .modebar-container {
    display: none !important;
  }
}

/* Plotly modebar transparent */
.js-plotly-plot .modebar {
  background: transparent !important;
  box-shadow: none !important;
}
.js-plotly-plot .modebar-group {
  background: transparent !important;
}
.js-plotly-plot .modebar-btn path {
  fill: var(--shearia-text-secondary) !important;
}
.settings-navlink-shared[data-active="true"] {
  color: var(--shearia-secondary);
}

.settings-navlink-shared[data-active="true"] .mantine-NavLink-section,
.settings-navlink-shared[data-active="true"] .mantine-NavLink-description {
  color: var(--shearia-secondary);
}

.settings-navlink-shared:not([data-active="true"]) {
  color: var(--shearia-text-secondary);
}

.settings-navlink-shared:not([data-active="true"]) .mantine-NavLink-section,
.settings-navlink-shared:not([data-active="true"]) .mantine-NavLink-description {
  color: var(--shearia-text-secondary);
}

.settings-navlink-shared:hover,
.user-menu-item:hover {
  background-color: var(--shearia-bg-secondary);
}

.settings-navlink-shared.settings-navlink-strong[data-active="true"] {
  font-weight: 600;
}

/* Carousel: Kurstext auf max. 4 Zeilen begrenzen */
.course-card-text-wrap {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  margin-bottom: var(--mantine-spacing-xs);
}

/* Carousel Controls */

.dmc-controls {
  transition: opacity 150ms ease;
  opacity: 0;
}

.dmc-root {
  &:hover {
    .dmc-controls {
      opacity: 1;
    }
  }
}

/* ===========================
   Mobile Journal Layout
   =========================== */

@media (max-width: 768px) {

  /* Carousel-Slide auf Mobile höher für 4 Textzeilen */
  .dmc-root .mantine-Carousel-slide {
    height: 420px !important;
  }

  /* Tabs horizontal scrollbar statt Zeilenumbruch, linksausgerichtet */
  .mantine-Tabs-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
    mask-image: linear-gradient(to right, black 80%, transparent 100%) !important;
  }
  .mantine-Tabs-list::-webkit-scrollbar {
    display: none !important;
  }

  /* Weniger Container-Padding → Editor nutzt mehr Breite */
  .mantine-TabsPanel-panel .mantine-Container-root {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Journal Button-Bar: Delete icon-only, Save füllt Rest */
  #journal-delete-btn .mantine-Button-label { display: none !important; }
  #journal-delete-btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  #journal-save-btn { flex: 1 !important; }

  /* Horizontale Verbindungslinie zwischen den Bullets */
  #journal-timeline {
    --tl-line-width: 0px !important; /* Mantines vertikale Linie aus */
    position: relative !important;
  }
  #journal-timeline::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 12px !important;
    left: 28px !important;
    right: 28px !important;
    height: 2px !important;
    background: var(--shearia-primary) !important;
    z-index: 0 !important;
  }
  #journal-timeline .mantine-Timeline-itemBullet {
    z-index: 1 !important;
    position: relative !important;
  }

  /* --- Timeline-Wrapper (jetzt html.Div): horizontal scroll --- */
  #journal-timeline-scroll {
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  #journal-timeline-scroll::-webkit-scrollbar {
    display: none !important;
  }

  /* --- Timeline: horizontal, Bullet + Datum --- */
  #journal-timeline {
    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
    width: max-content !important;
  }

  #journal-timeline .mantine-Timeline-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 56px !important;
    flex-shrink: 0 !important;
    padding-left: 0 !important;
  }

  #journal-timeline .mantine-Timeline-item::before {
    content: none !important;
    display: none !important;
  }

  #journal-timeline .mantine-Timeline-itemBullet {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 2px auto 4px !important;
    align-self: center !important;
  }

  #journal-timeline .mantine-Timeline-itemContent {
    padding-left: 0 !important;
    width: 56px !important;
    text-align: center !important;
  }

  #journal-timeline .mantine-Timeline-itemBody {
    display: none !important;
  }

  /* Datum-Text erzwingen: sichtbar + zentriert */
  #journal-timeline .mantine-Timeline-itemTitle,
  #journal-timeline .mantine-Timeline-itemTitle p,
  #journal-timeline .mantine-Timeline-itemTitle span,
  #journal-timeline .mantine-Timeline-itemTitle div {
    display: block !important;
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: var(--shearia-text-dark) !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* --- GridCol Padding entfernen → volle Breite nutzen --- */
  #journal-editor-col,
  #journal-tag-sidebar-col.mantine-GridCol-root,
  .mantine-Grid-root > .mantine-GridCol-root {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Button-Leiste --- */
  #journal-button-bar {
    padding-bottom: 12px !important;
  }

  /* Delete: nach rechts schieben, Datum bleibt links */
  #journal-delete-btn { margin-left: auto !important; padding-inline: 10px !important; }
  #journal-delete-btn .mantine-Button-label { display: none !important; }
  #journal-delete-btn .mantine-Button-section { margin-inline-end: 0 !important; }
  #journal-delete-btn .mantine-Button-inner { justify-content: center !important; }

  /* Save: kompakterer Text */
  #journal-save-btn .mantine-Button-label { font-size: 0.82rem !important; }

  /* --- Tags-FAB --- */
  #mobile-tags-pill-wrapper {
    position: fixed !important;
    right: 8px !important;
    top: 50vh !important;
    transform: translateY(-50%) !important;
    z-index: 400 !important;
    display: block !important;
  }

  /* --- Tag-Sidebar: Bottom Sheet --- */
  #journal-tag-sidebar-col {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 300 !important;
    background: white !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    padding: 8px 16px 16px !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
  }
  #journal-tag-sidebar-col::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background: #ccc !important;
    border-radius: 2px !important;
    margin: 0 auto 12px !important;
    flex-shrink: 0 !important;
  }
  #journal-tag-sidebar-col.mobile-open {
    transform: translateY(0) !important;
  }
  #journal-tag-sidebar-col #tag-sidebar {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* --- Mention-Dropdown --- */
  .mention-dropdown {
    position: fixed !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* Tags-Pille auf Desktop verstecken */
@media (min-width: 769px) {
  #mobile-tags-pill-wrapper { display: none !important; }

  /* Settings-Accordion auf Desktop: Chevron ausblenden */
  #settings-nav-accordion .mantine-Accordion-chevron { display: none !important; }
  #settings-nav-accordion .mantine-Accordion-item { border-bottom: none !important; }

  /* Carousel-Card Buttons nicht full-width auf Desktop */
  .dmc-root .mantine-Button-root {
    width: auto !important;
  }
}

/* ===========================
   Header: Mobile
   =========================== */
@media (max-width: 768px) {
  #header-nav-links { display: none !important; }
  .mantine-AppShellHeader-root { padding-left: 16px !important; padding-right: 16px !important; }

  /* Allgemeine Verkleinerung und Anpassung für Buttons, Inputs und Text auf Mobile */
  .mantine-Button-root { font-size: 13px !important; padding-left: 14px !important; padding-right: 14px !important; height: 34px !important; width: 100% !important; }
  .mantine-Group-root { flex-wrap: wrap !important; }
  .mantine-TextInput-input, .mantine-PasswordInput-input { font-size: 14px !important; height: 34px !important; min-height: 34px !important; }
  .mantine-TextInput-label, .mantine-PasswordInput-label, .mantine-InputWrapper-label { font-size: 13px !important; }
  .mantine-Text-root { font-size: 14px !important; }
  .mantine-Paper-root { padding: 16px !important; }

  /* Sidebar-Layouts (Settings, Account) stapeln auf Mobile */
  #settings-menu-panel, #account-menu-panel { width: 100% !important; }
  .mantine-Flex-root:has(#settings-menu-panel),
  .mantine-Flex-root:has(#account-menu-panel) { flex-direction: column !important; }

  /* Hero-Bild auf Mobile kompakter, links abschneiden damit Person mittiger wirkt */
  #hero .mantine-Grid-col:last-child { min-height: 220px !important; }

  /* Features-Kurve horizontal spiegeln */
  #features {
    clip-path: polygon(100% 78px, 88% 75px, 75% 72px, 65% 68px, 58% 60px, 43% 60px, 35% 38px, 28% 12px, 20% 38px, 10% 22px, 0% 58px, 0% 100%, 100% 100%) !important;
    -webkit-clip-path: polygon(100% 78px, 88% 75px, 75% 72px, 65% 68px, 58% 60px, 43% 60px, 35% 38px, 28% 12px, 20% 38px, 10% 22px, 0% 58px, 0% 100%, 100% 100%) !important;
  }

  /* Feature-Karten: Icons und Überschriften kleiner */
  #features svg, #features iconify-icon { width: 28px !important; height: 28px !important; }
  #features .mantine-Title-root { font-size: 1rem !important; }
}

/* ===========================
   Journal-Timeline: Mobile (horizontal scroll)
   =========================== */
@media (max-width: 768px) {
  /* Verbindungslinie der Mantine-Timeline ausblenden */
  #journal-timeline > *::before,
  #journal-timeline > *::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
  }

  /* Scroll-Wrapper */
  #journal-timeline-scroll {
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-left: 4px !important;
    padding-top: 4px !important;
  }

  /* Timeline-Root: horizontale Flex-Reihe */
  #journal-timeline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
    width: max-content !important;
  }

  /* Jedes Timeline-Item: vertikale Spalte */
  #journal-timeline > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 56px !important;
    flex-shrink: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Bullet: aus absoluter Positionierung lösen */
  #journal-timeline > * > *:first-child {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 2px auto 4px auto !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }

  /* Content-Bereich */
  #journal-timeline > * > *:nth-child(2) {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 56px !important;
    text-align: center !important;
  }

  /* Datum-Label */
  #journal-timeline > * > *:nth-child(2) > *:first-child {
    display: block !important;
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    color: #3D3D3D !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #journal-timeline > * > *:nth-child(2) > *:first-child * {
    display: block !important;
    font-size: 0.65rem !important;
    text-align: center !important;
    color: #3D3D3D !important;
    white-space: normal !important;
    margin: 0 !important;
  }

  /* Vorschau-Text auf Mobile ausblenden */
  #journal-timeline > * > *:nth-child(2) > *:nth-child(2) {
    display: none !important;
  }
}

/* Scroll-Wrapper auf Desktop: Platz für Aktiv-Ring */
@media (min-width: 769px) {
  #journal-timeline-scroll {
    padding-left: 4px !important;
    padding-top: 4px !important;
  }
}

/* Notifications: Mobile unten mittig */
@media (max-width: 768px) {
  .mantine-Notifications-root {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}