/* origr3n — Shaarli Theme
 * gr3n design language: Deep Forest, Quicksand, dark/light toggle
 * https://github.com/gruenheit/origr3n
 */

/* ============================================================
   1. FONT
   ============================================================ */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Quicksand-latin.woff2') format('woff2');
}

/* ============================================================
   2. DESIGN TOKENS — Dark Mode (Default)
   ============================================================ */
:root {
  --color-primary:      #3d8e12;
  --color-primary-h:    #4aa316;
  --color-primary-a:    #338a0f;

  --bg-base:            #141414;
  --bg-surface:         #2a2a2a;
  --bg-elevated:        #2e2e2e;
  --bg-input:           #333333;

  --text-primary:       #ffffff;
  --text-secondary:     #b0b0b0;
  --text-muted:         #707070;

  --border-color:       #3a3a3a;
  --border-radius:      6px;

  --font-main:          'Quicksand', system-ui, sans-serif;
  --font-size-base:     16px;
  --line-height-base:   1.6;

  --shadow-sm:          0 2px 8px rgba(0,0,0,0.45);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.5);

  --toggle-bg:          #2e2e2e;

  /* shaarli.min.css verwendet --main-color (20×) — auf Primärfarbe mappen */
  --main-color:         #3d8e12;
  --background-color:   #141414;

  /* Primärfarbe als RGB-Tripel — für rgba()-Transparenzen */
  --color-primary-rgb:  61, 142, 18;

  /* Semantische Farben — Public / Private / Akzente */
  --color-success:      #5cb81a;
  --color-success-l:    #6abf3a;
  --color-public:       #5a7a4a;
  --color-private:      #d4851a;
  --color-private-h:    #e8a030;
  --color-amber:        #b07820;

  /* Feste Dimensionen — Icon-Buttons, FAB, Header */
  --size-icon-btn:      32px;
  --size-fab:           56px;
  --size-header:        52px;
}

/* ============================================================
   3. DESIGN TOKENS — Light Mode
   ============================================================ */
[data-theme="light"] {
  --main-color:         #3d8e12;
  --background-color:   #f5f5f5;

  --bg-base:            #f5f5f5;
  --bg-surface:         #ffffff;
  --bg-elevated:        #eeeeee;
  --bg-input:           #ffffff;

  --text-primary:       #1a1a1a;
  --text-secondary:     #444444;
  --text-muted:         #888888;

  --border-color:       #d0d0d0;
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.15);

  --toggle-bg:          #e8e8e8;
}

/* ============================================================
   4. BASE RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Formular-Elemente erben im Browser NICHT automatisch — explizit erzwingen */
input, button, select, textarea, optgroup {
  font-family: var(--font-main);
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body,
.pure-g [class*="pure-u"] {
  font-family: var(--font-main);
}

body {
  font-weight: 400;
  line-height: var(--line-height-base);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background 0.2s ease, color 0.2s ease;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-h);
  text-decoration: underline;
}

a:visited {
  color: var(--color-primary);
}

a:visited:hover {
  color: var(--color-primary-h);
}

/* ============================================================
   5. NAVIGATION
   ============================================================ */
#shaarli-menu {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  position: sticky !important;
  top: 0;
  z-index: 100 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Titel-Link (Desktop + Mobile) */
.shaarli-title,
a.shaarli-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary) !important;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  overflow: hidden;
}

/* Titeltext — Ellipsis bei Overflow */
.shaarli-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.origr3n-logo {
  display: inline-block;
  position: relative;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary);
}

.origr3n-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.5;
  animation: origr3n-pulse 2.5s ease-in-out infinite;
}

@keyframes origr3n-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%       { transform: scale(2.2); opacity: 0; }
}

.shaarli-title:hover,
a.shaarli-title:hover {
  color: var(--color-primary-h) !important;
  text-decoration: none;
}

/* Pure-Menu Overrides */
.pure-menu-link {
  color: var(--text-secondary) !important;
  padding: 1rem 0.75rem;
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  transition: color 0.15s, background 0.15s;
}

.pure-menu-link:hover,
.pure-menu-link:focus {
  background: transparent !important;
  color: var(--color-primary) !important;
  text-decoration: none;
}

.pure-menu-list {
  background: transparent;
}

.pure-menu-item.pure-menu-selected > .pure-menu-link,
.pure-menu-item.pure-menu-active > .pure-menu-link {
  color: var(--color-primary) !important;
  background: transparent !important;
}

/* ---- FAB: nur auf Linklist-Seite anzeigen ---- */
li:has(> #shaarli-menu-shaare) {
  display: none !important;
}
body:has(#linklist) li:has(> #shaarli-menu-shaare) {
  position: fixed !important;
  bottom: 4rem !important;
  right: 2rem !important;
  z-index: 999;
  list-style: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

#shaarli-menu-shaare {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--size-fab) !important;
  height: var(--size-fab) !important;
  border-radius: 50% !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
  position: relative !important;
}

#shaarli-menu-shaare:hover {
  background: var(--color-primary-h) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
}

#shaarli-menu-shaare .fa {
  display: none !important;
}

#shaarli-menu-shaare::before,
#shaarli-menu-shaare::after {
  content: '' !important;
  position: absolute !important;
  background: #fff !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
}

#shaarli-menu-shaare::before {
  width: 2px !important;
  height: 20px !important;
  transform: translate(-50%, -50%) !important;
}

#shaarli-menu-shaare::after {
  width: 20px !important;
  height: 2px !important;
  transform: translate(-50%, -50%) !important;
}

/* Header-Row Desktop: Flexbox auf .pure-menu-horizontal — zentriert alle Kinder vertikal
   WICHTIG: flex-wrap:nowrap deaktiviert align-content von .pure-g (flex-start);
            sonst sitzt die Flex-Zeile oben statt mittig trotz align-items:center */
@media screen and (min-width: 64em) {
  #shaarli-menu .pure-menu-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    height: var(--size-header) !important;
    width: 100% !important;
  }
  /* Nav-Spalte */
  #shaarli-menu .pure-menu-horizontal > .pure-u-lg-5-6 {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0;
  }
  /* Nav-Links: line-height zentriert Text unabhängig von Container-Höhe */
  #shaarli-menu .pure-menu-horizontal > .pure-u-lg-5-6 .pure-menu-link {
    line-height: var(--size-header) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  li:has(> #shaarli-title-desktop) {
    margin-right: auto !important;
    flex-shrink: 0;
  }
  /* Icon-Spalte: durch parent align-items:center zentriert, plus Fine-Tune-Offset.
     translateY(3px) gleicht einen echten Versatz zwischen flex-zentrierten Icons
     und line-height-zentriertem Nav-Text aus. Bei 52px betraegt dieser Versatz
     ~3px (bestaetigt: ohne Transform sitzen Icons hier zu hoch). Der Wert ist an
     die 52px-Headerhoehe gekoppelt, nicht generell gueltig (bei 40px zu groß). */
  #shaarli-menu .header-buttons {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 6px;
    transform: translateY(3px);
  }
  #shaarli-menu .header-buttons .pure-menu-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px;
    flex-wrap: nowrap;
  }
  #shaarli-menu .header-buttons .pure-menu-item {
    display: flex !important;
    align-items: center !important;
    height: var(--size-header) !important;
    flex-shrink: 0;
  }
}

/* Header-Buttons (Suche, RSS, Login, Theme-Toggle, Zeitstrahl, Filter, Select)
   .pure-menu-link deckt nur <a>-Elemente ab — Theme-Toggle/Zeitstrahl/Filter/Select
   sind aber <button>-Elemente ohne diese Klasse und blieben bislang ungestylt
   (Browser-Default-Box), was bei kleinerer Headerhöhe als Treppen-Versatz auffiel. */
.header-buttons .pure-menu-link,
.header-buttons button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--size-icon-btn) !important;
  height: var(--size-icon-btn) !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 50% !important;
  color: var(--text-muted) !important;
}

.header-buttons .pure-menu-link:hover,
.header-buttons button:hover {
  color: var(--color-primary) !important;
  background: var(--bg-elevated) !important;
  border-radius: 50% !important;
}

/* Mobile Menu Hintergrund */
.menu-transform {
  background: var(--bg-surface);
}

/* ---- Mobile Header Bar: Logo | Icons | Hamburger ---- */
@media screen and (max-width: 63.99em) {
  .pure-u-lg-0 .pure-menu {
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    min-height: 44px;
  }
  .pure-u-lg-0 .pure-menu header {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .pure-u-lg-0 .pure-menu .menu-toggle {
    position: static !important;
    flex-shrink: 0;
    order: 99;
    top: auto !important;
    right: auto !important;
  }
  .mobile-header-icons {
    order: 2;
  }
  /* Nav-Leiste auf Mobile unsichtbar wenn Hamburger zu — verhindert Doppelheader */
  .menu-transform.pure-menu-horizontal {
    display: none !important;
  }
}

/* Mobile Icon Buttons */
.mobile-header-icons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.mobile-header-icons button,
.mobile-header-icons a {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: var(--size-icon-btn);
  height: var(--size-icon-btn);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted) !important;
  transition: color 0.15s, background 0.15s;
  padding: 0 !important;
  text-decoration: none !important;
}

.mobile-header-icons button:hover,
.mobile-header-icons a:hover {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
}

.mobile-header-icons button:focus { outline: none; }


/* ============================================================
   6. LAYOUT
   ============================================================ */
#content {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}

/* Daily, Tags: mehr als 860px */
#content:has(#daily),
#content:has(#cloudtag),
#content:has(#taglist) {
  max-width: 1280px;
}

/* Picwall: auf 8 Tiles/Zeile ausgelegt — (1316-32)×20/24−24 = 1046px → 8×125+7×6.4 = 1044.8px */
#content:has(#picwall-container) {
  max-width: 1316px;
}

/* Shaare-Zähler */
/* Stats oben (top-right Sidebar) — ausgeblendet, ersetzt durch Bottom-Stats */
.linkcount {
  display: none !important;
}

/* Stats unten — sehr dezente Kursivzeile unterhalb der unteren Pagination */
.linklist-stats-bottom {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-style: italic;
  opacity: 0.55;
  padding: 0.35rem 0 0.75rem;
}

/* ============================================================
   7. SUCHLEISTE — Overlay
   ============================================================ */

/* Inline-Suche in linklist.html ausblenden (Overlay übernimmt) */
#search-linklist { display: none !important; }

/* Alle subheader-forms standardmäßig versteckt; Shaarli-JS setzt .open */
.subheader-form { display: none; }
.subheader-form.open { display: block; }

/* #search wird zum Backdrop; Shaarli setzt width:100%/height:30px/visibility — alles überschreiben */
#search.subheader-form.open {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 999 !important;
  text-align: left !important;
  visibility: visible !important;
  cursor: pointer;
}

/* shaarli.min.css: .header-search * { visibility: hidden } auf Mobile — Kinder explizit sichtbar */
#search.subheader-form.open * {
  visibility: visible !important;
}

/* Die <form> ist die eigentliche Overlay-Box */
#search.subheader-form.open .searchform {
  width: 480px;
  max-width: 90vw;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.1rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  cursor: default;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
}

/* Inputs: Theme-Farben gegen Shaarlis #f5f5f5 */
#search.subheader-form input[type="text"] {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  padding: 0.45rem 1.9rem 0.45rem 0.7rem !important;
  box-shadow: none !important;
  height: auto !important;
  width: 100%;
  box-sizing: border-box;
}
#search.subheader-form input[type="text"]::placeholder {
  color: var(--text-secondary) !important;
}

/* Wrapper je Feld — hält Clear-Button positioniert; gilt für jedes Suchfeld im Theme */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}
/* Breitenverhältnis nur im Header-Suchpanel (Suchbegriff + Tags nebeneinander) —
   1.2:1 statt 1.6:1: bei 1.6:1 schnitt der deutsche Platzhalter "Nach Tag filtern"
   (länger als engl. "Filter by tag") im Tag-Feld ab */
#search .search-field:nth-of-type(1) { flex: 1.2; } /* Suchbegriff */
#search .search-field:nth-of-type(2) { flex: 1; }    /* Tags */

/* Awesomplete wrappt Tag-Felder automatisch — Wrapper muss die volle Breite füllen */
.search-field .awesomplete {
  display: block;
  flex: 1;
  min-width: 0;
}

/* Platz für den Clear-Button rechts im Feld — auch außerhalb des Header-Suchpanels */
.search-field input[type="text"] {
  padding-right: 1.9rem;
  box-sizing: border-box;
  text-overflow: ellipsis; /* Sicherheitsnetz falls Platzhalter/Text trotzdem nicht passt */
}

/* Clear-Button (×) je Feld — !important gegen Shaarli-Core-Regeln wie
   .search-tagcloud button{width:90%} / .search-linklist button{width:100%} */
.search-field-clear {
  position: absolute !important;
  right: 0.35rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.1rem 0.35rem !important;
  display: none;
  z-index: 2;
}
.search-field-clear.visible {
  display: block;
}
.search-field-clear:hover {
  color: var(--color-primary) !important;
}

/* Such-Button: gleiche Höhe/Achse wie die Eingabefelder, kein Pure.css-Rand */
#search .search-button {
  margin: 0 !important;
  padding: 0.45rem 0.9rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Awesomplete-Dropdown Dark-Mode — gilt für jedes Awesomplete-Feld im Theme,
   nicht nur das Header-Suchpanel (sonst fallen Tag-Liste/Cloud auf grelle Core-Defaults zurück) */
.awesomplete > ul {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  z-index: 1002 !important;
}
.awesomplete > ul > li {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  text-align: left !important; /* .searchform-block{text-align:center} aus Shaarli-Core sickert sonst durch */
}
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
  background: rgba(61, 142, 18, 0.18) !important;
  color: var(--text-primary) !important;
}
.awesomplete > ul > li > mark {
  background: transparent !important;
  color: var(--color-primary) !important;
  font-weight: 700;
}
.awesomplete > ul > li[aria-selected="true"] > mark,
.awesomplete > ul > li:hover > mark {
  color: var(--color-success-l) !important;
}
/* Core-Zeiger-Pfeil vor der Liste: hardcoded weiß, bei schmalen/nebeneinanderliegenden
   Feldern vom Nachbarfeld überdeckt — rein dekorativ, daher ausgeblendet statt Position je Feldbreite zu jagen */
.awesomplete > ul:before {
  display: none !important;
}

/* Action-Buttons (submit) */
.search-overlay-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  align-items: center;
}


/* Andere subheader-forms bleiben inline (Actions, Login, Bulk-Tag) */
#actions.subheader-form.open,
.header-login-form.subheader-form.open,
[id^="bulk-tag-action"].subheader-form.open {
  position: static;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

/* Tastenkürzel-Hilfe (?) — gleiches Overlay-Muster wie #search */
#shortcuts-help.subheader-form.open {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 999 !important;
  text-align: left !important;
  cursor: pointer;
}
#shortcuts-help.subheader-form.open * {
  visibility: visible !important;
}
.shortcuts-help-box {
  position: relative;
  width: 380px;
  max-width: 90vw;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.shortcuts-help-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.shortcuts-help-close:hover {
  color: var(--color-primary);
}
.shortcuts-help-title {
  margin: 0 0 0.75rem;
  color: var(--color-primary);
  font-size: 1.05rem;
}
.shortcuts-help-list {
  margin: 0;
}
.shortcuts-help-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-color);
}
.shortcuts-help-row:last-child {
  border-bottom: none;
}
.shortcuts-help-row dt {
  flex: 0 0 2.4rem;
  font-family: monospace;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  text-align: center;
  color: var(--color-primary);
  font-weight: 700;
}
.shortcuts-help-row dd {
  margin: 0;
  color: var(--text-primary);
}

/* ============================================================
   8. FILTER PANEL — Dropdown unter Filter-Icon
   ============================================================ */

#filter-btn {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: var(--size-icon-btn);
  height: var(--size-icon-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted) !important;
  transition: color 0.15s, background 0.15s;
  padding: 0 !important;
}
#filter-btn:hover {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
}
#filter-btn:focus {
  outline: none;
}
.filter-active-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  pointer-events: none;
}

#filter-panel {
  display: none;
  position: fixed;
  top: 54px;
  right: 8px;
  z-index: 998;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  min-width: 180px;
}
#filter-panel.open {
  display: block;
}

.filter-panel-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.filter-panel-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.filter-panel-pills {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.filter-panel-divider {
  border-top: 1px solid var(--border-color);
  margin: 0.65rem 0;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-pill:visited {
  color: var(--text-secondary);
}
.filter-pill:hover,
.filter-pill:visited:hover {
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  background: transparent;
}
.filter-pill.active,
.filter-pill.active:visited {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff !important;
}
.filter-pill.active:hover {
  opacity: 0.9;
}
.filter-pill-reset {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* ============================================================
   9. LINK CARDS
   ============================================================ */
#linklist {
  margin-top: 0.5rem;
}

.linklist-item {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.15rem 1.3rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}


/* Shaarli-Base setzt background:#f5f5f5 auf .linklist-item-title */
.linklist-item-title {
  background: transparent !important;
  color: var(--text-primary) !important;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: start;
}

/* Private Links: Amber-Akzent statt Grün.
   .private-Klasse wird von Shaarli nicht zuverlässig gesetzt —
   :has(.label-private) greift direkt auf das DOM-Badge. */
.linklist-item.private,
.linklist-item.private:hover,
.linklist-item:has(.label-private),
.linklist-item:has(.label-private):hover {
  border-left: 2px solid var(--color-amber) !important;
}

/* Private Hover: amber statt grün — höhere Spezifität schlägt :hover-Regel */
.linklist-item.private:hover,
.linklist-item:has(.label-private):hover {
  border-color: var(--color-amber);
}

/* Sticky: kein visueller Unterschied — nur Pinnnadel reicht */

.linklist-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

/* Titel — shaarli.min.css setzt padding:3px 10px 0 auf h2, explizit zurücksetzen */
.linklist-item-title h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.3rem;
  padding: 0 !important;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.linklist-item-title h2 a,
.linklist-item-title .linklist-link,
.linklist-real-url {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* Shaarli-Base: .linklist-link:hover { color: #252525 } — auf dunklem Bg unsichtbar */
.linklist-item-title h2 a:hover,
.linklist-item-title .linklist-link:hover,
.linklist-real-url:hover {
  color: var(--color-primary-h) !important;
  text-decoration: none;
}

/* Domain-URL unterhalb des Titels */
.linklist-item-domain {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linklist-item-domain a {
  color: var(--text-muted) !important;
}

.linklist-item-domain a:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* Thumbnail — 110×75, rechte Grid-Spalte
   shaarli.min.css setzt float:right + height:90px — beides überschreiben */
.linklist-item-thumbnail {
  float: none !important;
  width: 110px;
  height: auto !important;
  flex-shrink: 0;
}
.linklist-item-thumbnail.hidden {
  display: none;
}
.linklist-item-thumbnail .thumbnail {
  width: 110px;
  height: 75px;
  overflow: hidden;
  border-radius: 4px;
}
.linklist-item-thumbnail .thumbnail img {
  width: 110px !important;
  height: 75px !important;
  object-fit: cover;
  display: block;
}

/* Editbuttons (Privat/Sticky-Badge oben links) — ausgeblendet; Footer-Controls übernehmen diese Rolle.
   DOM-Elemente bleiben für :has(.label-private)-Selektoren (Kartenakzent) erhalten. */
.linklist-item-editbuttons {
  display: none !important;
}
.linklist-item-editbuttons * {
  float: none !important;
  display: inline-flex !important;
  margin: 0 !important;
}

/* Beschreibung — shaarli.min.css setzt padding:0 10px, explizit zurücksetzen */
.linklist-item-description {
  color: var(--text-secondary) !important;
  font-size: 0.88rem;
  margin: 0.3rem 0 0.5rem;
  padding: 0 !important;
  line-height: 1.55;
}

/* shaarli.min.css setzt Links in Content-Bereichen auf #252525 — auf dunklem Bg unsichtbar */
.linklist-item-description a,
.linklist-item-description a:visited {
  color: var(--color-primary) !important;
}

.linklist-item-description a:hover,
.linklist-item-description a:visited:hover {
  color: var(--color-primary-h) !important;
  text-decoration: underline;
}

.linklist-item-description .markdown p {
  margin: 0;
}

/* Markdown-Überschriften in Karten: Größe begrenzen — sonst Editorial-Optik */
.linklist-item-description h1,
.linklist-item-description h2,
.linklist-item-description h3,
.linklist-item-description h4 {
  font-size: 1.05rem !important;
  font-weight: 600;
  line-height: 1.4;
  margin: 0.25rem 0 0.15rem;
  color: var(--text-primary) !important;
}

/* Tags */
.linklist-item-tags {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
}

/* Tags-Icon (fa-tags): redundant im Footer-Band, ausblenden */
.linklist-item-tags .fa-tags {
  display: none;
}

/* span.label-tag (Shaarli-Wrapper) im Linklist-Kontext: nur Container, kein eigenes Styling */
.linklist-item-tags .label-tag,
.linklist-item-tags .label.label-tag {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit !important;
}

/* Die <a> innerhalb tragen das gesamte Pill-Styling */
.linklist-item-tags a,
a.tag {
  display: inline-block;
  background: var(--bg-surface);
  color: var(--color-primary) !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.45);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  font-size: 0.76rem;
  font-weight: 500;
  margin: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.linklist-item-tags a:hover,
a.tag:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  text-decoration: none;
  border-color: var(--color-primary) !important;
}

/* Tag-Farbe im Footer-Band nicht durch .linklist-item-infos a {muted} überschreiben lassen */
.linklist-item-infos .linklist-item-tags a {
  color: var(--color-primary) !important;
}

.linklist-item-infos .linklist-item-tags a:hover {
  color: #fff !important;
}

/* Footer-Band: eigenständige Zone, volle Kartenbreite, erhöhter Hintergrund */
/* Shaarli-Base: background:#ddd; padding:4px 8px; color:#252525 — alles überschreiben */
.linklist-item-infos {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0.5rem -1.3rem -1.15rem;
  padding: 0.35rem 1.3rem 0.4rem !important;
  border-top: 1px solid var(--border-color);
  background: var(--bg-elevated) !important;
  border-radius: 0 0 5px 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  cursor: pointer;
}


.linklist-item-infos a {
  color: var(--text-muted) !important;
}

.linklist-item-infos a:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* Datums-Pille: grün, dezent, klickbar als Permalink */
.linkdate {
  display: inline-block;
  background: transparent;
  color: var(--color-primary) !important;
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  border-radius: 20px;
  padding: 0.1rem 0.4rem;
  font-size: 0.76rem;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.linkdate:hover {
  background: rgba(var(--color-primary-rgb), 0.10);
  border-color: rgba(var(--color-primary-rgb), 0.5);
}

/* Permalink-Label: immer ausgeblendet (wird erst beim Footer-Aufklappen relevant) */
.permalink-label {
  display: none;
}

/* URL-Zeile: im Ruhezustand verborgen */
.linklist-item-infos-url {
  display: none;
}

.linklist-item-infos-url a {
  color: var(--text-muted) !important;
  word-break: break-all;
}

/* Link-Icon vor der URL: redundant, raus */
.linklist-item-infos-url .fa-link {
  display: none;
}

/* Datums-Pille und URL-Block nach rechts schieben (kompakter Zustand) */
.linklist-item-infos-date-url-block {
  margin-left: auto;
  flex-shrink: 0;
}

/* PureCSS pure-u-lg-7-12 setzt width: 58.33% — immer überschreiben für kompaktes Layout */
.linklist-item-infos-dateblock {
  width: auto !important;
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
}

/* Controls: Flex-Container immer im Layout — Einzelitems per display:none/flex gesteuert */
.linklist-item-infos-controls-group {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.6rem;
  border-right-color: var(--border-color) !important;
}

/* Alle Controls standardmäßig ausgeblendet (kein Platzbedarf) */
.linklist-item-infos-controls-item {
  display: none;
  align-items: center;
  line-height: 1;
}

.linklist-item-infos-controls-item a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  transition: color 0.12s ease;
}

.linklist-item-infos-controls-item a:hover {
  color: var(--color-primary) !important;
}

/* Multi-Checkbox: nativer Checkbox mit appearance: none — immer anklickbar, kein FA-Trick */
.ctrl-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ctrl-checkbox .link-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  border: 1.5px solid var(--color-public);
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  position: static;
  opacity: 1;
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.ctrl-checkbox .link-checkbox:hover {
  border-color: var(--color-success);
}
.ctrl-checkbox .link-checkbox:checked {
  background: var(--color-success);
  border-color: var(--color-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Private-Share-Link: Amber — konsistent mit Privat-Badge und Kartenakzent */
.linklist-item-infos .fa-share-alt             { color: var(--color-private) !important; }
.linklist-item-infos a:hover .fa-share-alt     { color: var(--color-private-h) !important; }

/* Visibility-Toggle: fa-lock = privat (amber), fa-unlock-alt = öffentlich (muted) */
.linklist-item-infos-controls-group a.visibility-link-private       { color: var(--color-private) !important; }
.linklist-item-infos-controls-group a.visibility-link-private:hover { color: var(--color-private-h) !important; }
.linklist-item-infos-controls-group a.visibility-link-public        { color: var(--color-public) !important; }
.linklist-item-infos-controls-group a.visibility-link-public:hover  { color: var(--color-success) !important; }

/* Variante E — shaarli.min.css-Klassen direkt überschreiben (gleiche Spezifizität, origr3n.css später → gewinnt) */
/* edit-link ist auf <i>, nicht auf <a> → einfacher Klassenselektor reicht */
.edit-link              { color: #3d8e12 !important; }
/* delete-link / pin-link / pinned-link sind auf <a> → höhere Spezifizität nötig gegen .linklist-item-editbuttons a (0,1,1) */
.linklist-item-editbuttons a.delete-link,
.linklist-item-infos-controls-group a.delete-link { color: var(--color-public) !important; }
.linklist-item-editbuttons a.pin-link,
.linklist-item-infos-controls-group a.pin-link    { color: #3d8e12 !important; }
.linklist-item-editbuttons a.pinned-link,
.linklist-item-infos-controls-group a.pinned-link { color: var(--color-success) !important; }
.link-checkbox          { accent-color: var(--color-success) !important; }

/* Delete, Pin, Visibility: haben pure-u-0 auf dem <a> selbst — shaarli.min.css versteckt sie doppelt */
.ctrl-delete a,
.ctrl-pin a,
.ctrl-visibility a {
  display: inline-flex !important;
  align-items: center;
}

/* Fold-Button: verborgen */
.linklist-item-buttons {
  display: none;
}

/* ── SELECTED-STATE ────────────────────────────────────────── */
.linklist-item.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md);
}
/* Private Karte selected: amber gewinnt, kein Glow-Ring — amber hat schon hohen Kontrast */
.linklist-item.selected.private,
.linklist-item.selected:has(.label-private) {
  border-color: var(--color-amber);
  box-shadow: var(--shadow-md);
}

/* footer-open ohne selected: Hover-Rahmen supprimieren — sonst sieht es aus wie selected */
.linklist-item.footer-open:not(.selected):hover {
  border-color: var(--border-color);
}

/* ── STATUS-INDIKATOREN — immer sichtbar wenn aktiv ─────── */
/* :has() prüft ob der Link privat (lock) bzw. sticky (pinned-link) ist.
   display:none am Item entfällt → kein Platzbedarf für inaktive Controls. */
.ctrl-visibility:has(.visibility-link-private),
.ctrl-pin:has(.pinned-link) {
  display: inline-flex;
}

/* ── FOOTER-OPEN — alle Controls einblenden ─────────────── */
.linklist-item.footer-open .linklist-item-infos-controls-item {
  display: inline-flex;
}

/* Edit-Buttons (nur eingeloggt sichtbar) */
.linklist-item-editbuttons a {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  margin-left: 0.4rem;
}

.linklist-item-editbuttons a:hover {
  color: var(--color-primary) !important;
}

/* Pagination */
.shaarli-pagination {
  text-align: center;
  margin: 1.5rem 0;
}

.shaarli-pagination a,
.shaarli-pagination span {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  margin: 0 0.15rem;
  background: var(--bg-surface);
}

.shaarli-pagination a:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-decoration: none;
  border-color: var(--color-primary);
}

/* ============================================================
   9. DARK / LIGHT TOGGLE
   ============================================================ */
#theme-toggle {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: var(--size-icon-btn);
  height: var(--size-icon-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  padding: 0 !important;
  transition: color 0.15s, background 0.15s;
}

#theme-toggle:hover {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
}

#theme-toggle:focus {
  outline: none;
}

/* Fokus-Ring auf Header-Icons unterdrücken */
.header-buttons *:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Shaarli setzt .pure-menu-item:hover::after { background:#fff; height:4px } — im gesamten Header unterdrücken */
#shaarli-menu .pure-menu-item:hover::after,
#shaarli-menu .pure-menu-item::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
   10. FORMULARE
   ============================================================ */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="email"],
textarea,
select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.9rem;
  padding: 0.45rem 0.75rem;
  transition: border-color 0.15s;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}

/* Chrome/Safari überschreiben Autofill-Hintergründe — mit inset box-shadow kaschieren */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}

/* select Option-Elemente */
select option {
  background: var(--bg-input);
  color: var(--text-primary);
}

/* Labels */
label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Buttons */
button,
input[type="submit"],
.btn,
.pure-button {
  background: var(--color-primary) !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  color: #fff !important;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  transition: background 0.15s;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
.pure-button:hover {
  background: var(--color-primary-h) !important;
  color: #fff !important;
  text-decoration: none;
}

/* Globale button-Regel zurücksetzen — Editor-Toolbar-Buttons sollen neutral bleiben */
button {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Nur echte Action-Buttons grün */
input[type="submit"],
.submit-buttons input[type="submit"],
#button-save-edit,
.search-button,
.pure-button-primary {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
}

input[type="submit"]:hover,
.submit-buttons input[type="submit"]:hover,
#button-save-edit:hover,
.search-button:hover {
  background: var(--color-primary-h) !important;
}

/* Checkbox */
input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* ============================================================
   11. FORMULAR-SEITEN (Edit-Shaare, Login, Configure)
   ============================================================ */

/* Container */
.page-form {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-md);
  border-radius: var(--border-radius);
  padding: 0 0.75rem;
}

/* Titelzeile: Überschrift links, Datum-Pill rechts vertikal zentriert */
.page-form .title-row {
  position: relative;
  padding: 10px 0;
}

.page-form .window-title {
  background: var(--bg-surface) !important;
  color: var(--color-primary) !important;
  font-weight: 700;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Visitor-Seiten (daily, tags, picwall): feinere Überschrift wie Tools */
.page-form.page-visitor .window-title {
  font-weight: 500 !important;
}

/* Seitenstreifen amber sobald PRIVAT-Haken gesetzt — live via :has(), kein JS */
.page-form:has([name="lf_private"]:checked),
.page-form:has([name="private"]:checked) {
  border-left-color: var(--color-amber) !important;
}

/* Datum-Pill: top:50% + translateY(-50%) zentriert relativ zur .title-row padding-box */
.page-form .created-date {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary) !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

/* Inputs im Formular — Shaarli setzt hard-coded #eee/#252525 und width: 90% */
.page-form input[type=text],
.page-form input[type=password],
.page-form input[type=url],
.page-form input[type=email],
.page-form textarea,
.page-form select,
.lf_input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Labels — Mikro-Caps */
.page-form div > label {
  color: var(--text-secondary) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Feldlabels (allein in ihrem div) bekommen Abstand — nicht Inline-Labels wie PRIVAT */
.page-form div > label:only-child {
  display: block;
  margin-top: 0.85rem !important;
  margin-bottom: 0.25rem !important;
}
.page-form .md_help a {
  color: var(--text-secondary) !important;
}

/* Submit-Buttons: Flex — Save links dominant, Delete Ghost-Rot rechts */
.page-form .submit-buttons {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem !important;
  border-top: 1px solid var(--border-color) !important;
  padding-top: 0.75rem !important;
}

/* Save-Button: rechts via order (Löschen erscheint links, obwohl es im DOM danach kommt) */
.page-form .submit-buttons input[type=submit] {
  flex: 0 0 auto !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
  height: auto !important;
  line-height: normal !important;
  min-width: 0 !important;
  order: 2 !important;
}

/* Löschen-Button: links — order:1 + margin-right:auto trennt ihn vom Save-Button */
.page-form .submit-buttons a.button-red,
.page-form .submit-buttons .button-red {
  flex: 0 0 auto !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  margin-right: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: normal !important;
  padding: 0.45rem 1.1rem !important;
  order: 1 !important;
}

/* Delete Ghost-Rot */
a.button-red,
.button-red {
  background: transparent !important;
  color: #d04040 !important;
  border: 1px solid #8a2828 !important;
}

a.button-red:hover,
.button-red:hover {
  background: #ac2925 !important;
  color: #fff !important;
  border-color: #ac2925 !important;
  text-decoration: none;
}

a.button-grey,
.button-grey {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

/* Edit-Link-Container Hintergrund */
.edit-link-container {
  background: transparent;
}

/* markdown_toolbar-Plugin — Bootstrap-Markdown (.md-editor .btn) */
.md-editor {
  border-color: var(--border-color) !important;
  overflow: hidden !important;
}
.md-editor .btn-toolbar {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.md-editor .btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
.md-editor .btn:hover,
.md-editor .btn.active,
.md-editor .btn:focus {
  background: var(--bg-surface) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Expand-Button (.md-control): Plugin-CSS (nach origr3n geladen) setzt :hover { color: #333 }
   → auf dunklem Hintergrund unsichtbar. html-Präfix erhöht Spezifität über Plugin-Regel. */
html .md-editor .md-controls .md-control {
  color: var(--text-muted) !important;
}
html .md-editor .md-controls .md-control:hover {
  color: var(--color-primary) !important;
}

/* Fullscreen-Modus — Strategie:
   - body.md-nooverflow: Bootstrap-Markdown setzt diese Klasse → Seitenheader ausblenden
   - Plugin hat .pure-g-Regeln mit Spezifität (0,4,0)+(0,3,1) → html + .pure-g erforderlich
   - :focus/:hover auf .md-input separat abdecken */

/* Page-Header verstecken wenn Fullscreen aktiv (Bootstrap-Markdown setzt md-nooverflow) */
body.md-nooverflow #shaarli-menu {
  display: none !important;
}

/* Wrapper: über alles andere, dunkler Hintergrund */
html .md-editor.md-fullscreen-mode {
  z-index: 100000 !important;
  background: var(--bg-base) !important;
}

/* Textarea + Preview — alle Zustände abdecken */
html .md-editor.md-fullscreen-mode .md-input,
html .md-editor.md-fullscreen-mode .md-input:focus,
html .md-editor.md-fullscreen-mode .md-input:hover,
html .md-editor.md-fullscreen-mode .md-preview {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
}

/* Textarea margin-top: Plugin setzt via .pure-g 30px → html .pure-g schlägt Spez. (0,3,1) */
html .pure-g .md-editor.md-fullscreen-mode textarea {
  margin-top: 0 !important;
}

/* Toolbar: oben, kein margin-top (Plugin: .pure-g → 30px) — html .pure-g schlägt (0,4,0) */
html .pure-g .md-editor.md-fullscreen-mode .md-header.btn-toolbar {
  background: var(--bg-elevated) !important;
  top: 0 !important;
  margin-top: 0 !important;
  z-index: 100001 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 4rem !important;
}

/* Exit-Fullscreen-Button (oben rechts): Plugin setzt a:hover { color: #333 } → unsichtbar */
html .md-editor.md-fullscreen-mode .md-fullscreen-controls a {
  color: var(--text-muted) !important;
}
html .md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
  color: var(--color-primary) !important;
}

/* Toolbar-Buttons */
html .md-editor.md-fullscreen-mode .btn {
  color: var(--text-secondary) !important;
}
html .md-editor.md-fullscreen-mode .btn:hover,
html .md-editor.md-fullscreen-mode .btn.active,
html .md-editor.md-fullscreen-mode .btn:focus {
  color: var(--color-primary) !important;
  background: var(--bg-surface) !important;
}
.md-editor .btn-group + .btn-group {
  border-left: 1px solid var(--border-color) !important;
}
.md-editor .md-footer {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 0.15rem 0.5rem !important;
  text-align: right !important;
}

/* EasyMDE-nativer Toolbar (Fallback, falls Plugin deaktiviert) */
.editor-toolbar {
  background: var(--bg-elevated) !important;
  border-color: var(--border-color) !important;
}
.editor-toolbar a,
.editor-toolbar button {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
}
.editor-toolbar a:hover,
.editor-toolbar a.active,
.editor-toolbar button:hover,
.editor-toolbar button.active {
  background: var(--bg-surface) !important;
  color: var(--color-primary) !important;
  border-color: transparent !important;
}
.editor-toolbar i.separator {
  border-left-color: var(--border-color) !important;
}

/* EasyMDE — CodeMirror-Textbereich */
.CodeMirror {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  font-family: monospace !important;
}
.CodeMirror-cursor {
  border-left-color: var(--text-primary) !important;
}
.CodeMirror-selected {
  background: rgba(61, 142, 18, 0.2) !important;
}

/* EasyMDE — Statuszeile (Char-Counter) */
.editor-statusbar {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 0.15rem 0.5rem !important;
  text-align: right !important;
}

/* ============================================================
   12. LINKLIST-TOOLBAR (Filter, Pagination, Links-per-page)
   ============================================================ */

.linklist-paging {
  padding: 0.4rem 0 0.6rem;
  margin-bottom: 0.75rem;
}

/* Filter-Icons + Links-pro-Seite ausgeblendet — ersetzt durch Header-Filter-Panel */
.linklist-filters,
.linksperpage {
  display: none !important;
}

/* Mobile-Inline-Buttons: komplett ausgeblendet — Hauptkontrollen in Zeile 1 übernehmen alles */
.mobile-buttons {
  display: none !important;
}

/* Filter-Buttons (privat/öffentlich/ungetaggt/alle auswählen) */
.linklist-filters a,
.filter-off,
.filter-on {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-muted) !important;
  margin-right: 0.2rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none !important;
  font-size: 0.85rem;
}

.filter-on {
  background: rgba(61, 142, 18, 0.1) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.filter-off:hover,
.linklist-filters a:hover {
  background: var(--bg-elevated);
  color: var(--text-primary) !important;
  border-color: var(--color-primary);
  text-decoration: none !important;
}

.linklist-filters-text {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-right: 0.3rem;
}

/* Links per page */
.linksperpage a {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-secondary) !important;
  font-size: 0.82rem;
  margin: 0 0.1rem;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s;
}

.linksperpage a.selected,
.linksperpage a:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  text-decoration: none !important;
}

.linksperpage input[type="text"] {
  width: 3.5rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.82rem;
}

/* Pagination (Seite X von Y mit Pfeilen) */
.linklist-pages {
  width: 100% !important;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.linklist-pages .strong {
  font-weight: 400;
  color: var(--text-muted);
}

.linklist-pages a {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.linklist-pages a:hover {
  color: var(--main-color) !important;
  background: rgba(255, 255, 255, 0.13);
  transform: scale(1.12);
  text-decoration: none;
}

[data-theme="light"] .linklist-pages a:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* ============================================================
   13. BENACHRICHTIGUNGEN (Flash-Messages)
   ============================================================ */
.alert,
.flash-message,
[class*="alert-"]:not(.pure-alert-close) {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

/* Shaarli success banner */
#tool-result {
  background: var(--color-primary-a);
  color: #fff;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.9rem;
}

/* ============================================================
   14. TAG-LISTE (Sortierte Tag-Übersicht)
   ============================================================ */

/* Grid-Layout: Tags in Spalten */
.taglist-container,
#taglist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.3rem;
  padding: 0.5rem 0;
}

/* pure-g Override: Item ist nur Grid-Zelle, kein Flex-Wrapper */
.tag-list-item {
  display: block !important;
}

/* Eigentlicher Flex-Zeilencontainer — nicht auf rename-tag-form anwenden */
.tag-list-item > .pure-u-1:not(.rename-tag-form) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  transition: background 0.1s, border-color 0.1s;
}

.tag-list-item > .pure-u-1:not(.rename-tag-form):hover {
  background: var(--bg-elevated);
  border-color: var(--color-primary);
}

/* Reihenfolge: Badge → Name → Icons */
.tag-list-item a.count    { order: 1; }
.tag-list-item a.tag-link { order: 2; }
.tag-list-item a.delete-tag { order: 3; }
.tag-list-item a.rename-tag { order: 4; }

/* Anzahl-Badge */
.tag-list-item a.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  flex-shrink: 0;
  background: #1a3a0a;
  color: var(--color-primary) !important;
  border: 1px solid #2a5c0a;
  border-radius: 3px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  text-decoration: none !important;
  transition: background 0.1s;
}

.tag-list-item a.count:hover {
  background: var(--color-primary);
  color: #fff !important;
  border-color: var(--color-primary);
}

/* Tag-Name */
.tag-list-item a.tag-link {
  color: var(--color-primary) !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  flex: 1;
}

.tag-list-item a.tag-link:hover {
  color: var(--color-primary-h) !important;
}

/* Admin-Icons: rechts, dezent — bei Hover sichtbar */
.tag-list-item a.delete-tag,
.tag-list-item a.rename-tag {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  text-decoration: none !important;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
}

.tag-list-item > .pure-u-1:hover .delete-tag,
.tag-list-item > .pure-u-1:hover .rename-tag {
  opacity: 0.9;
}

.tag-list-item a.delete-tag:hover {
  color: #c0392b !important;
  opacity: 1;
}

.tag-list-item a.rename-tag:hover {
  color: var(--color-primary) !important;
  opacity: 1;
}

/* Umbenennen-Formular: standardmäßig versteckt, klappt per JS auf */
.rename-tag-form {
  display: none;
  position: relative;
  padding: 0.4rem 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-top: 0.15rem;
}

.rename-tag-form .rename-tag-input {
  width: calc(100% - 2.5rem);
  box-sizing: border-box;
}

/* Haken absolut rechts — unabhängig vom JS-gesetzten display-Wert */
.rename-tag-form .validate-rename-tag {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary) !important;
  text-decoration: none;
  font-size: 1rem;
}

.rename-tag-input {
  width: auto;
  min-width: 10rem;
}

/* ============================================================
   15. TOOLS-SEITE (Einstellungen, Bookmarklets, Drittanbieter)
   ============================================================ */

/* .page-form-light = gleiche Basis wie .page-form, aber ohne Tiefen-Schatten;
   wird für Listen-/Menü-Seiten verwendet die kein Eingabe-Formular enthalten */
.page-form-light {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

/* shaarli.min.css: .page-form-light div, p, h2 { text-align: center } — aufheben */
.page-form-light div,
.page-form-light p,
.page-form-light h2,
.page-form-light .window-title {
  text-align: left !important;
}

.page-form-light .window-title {
  padding: 0.6rem 0 0.5rem;
  font-weight: 500 !important;
}

/* Einzelne Werkzeug-Links als Zeilen */
.tools-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}

.tools-item:last-child {
  border-bottom: none;
}

.tools-item a,
.bookmarklet-link {
  display: block;
  text-decoration: none !important;
}

/* Reguläre Tool-Links: Row-Stil mit Pfeil-Prefix */
.tools-item .pure-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 0.38rem 0.25rem;
  border-radius: var(--border-radius);
  font-size: 0.88rem;
  font-weight: 500;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
  transition: color 0.12s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tools-item .pure-button::before {
  content: "→";
  color: var(--color-primary);
  font-weight: 700;
  margin-right: 0.55rem;
}

.tools-item a:hover .pure-button {
  color: var(--text-primary) !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* Bookmarklet-Links: kompakter Ghost-Button statt Row */
.bookmarklet-link .pure-button {
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  padding: 0.35rem 0.9rem !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  font-weight: 600 !important;
  margin: 0.15rem 0;
}

.bookmarklet-link .pure-button::before {
  content: none;
}

.bookmarklet-link:hover .pure-button {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* ============================================================
   16. CONFIGURE-SEITE (Einstellungsformular)
   ============================================================ */

/* Ältere Klassen (.form-label, .form-input, .label-name, .label-desc, .page-form-complete)
   werden noch von install.html, import.html, pluginsadmin.html, export.html genutzt
   und bleiben daher im CSS erhalten. */
.page-form-complete {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0;
  margin: 1rem 0;
}
.form-label {
  padding: 0.6rem 1rem 0.6rem 1.25rem;
  display: flex;
  align-items: flex-start;
}
.form-input { padding: 0.5rem 1rem; }
.label-name { font-weight: 600; color: var(--text-secondary); font-size: 0.9rem; display: block; }
.label-desc { color: var(--text-muted); font-size: 0.78rem; display: block; margin-top: 0.15rem; }
.pure-g + .pure-g .form-label { border-top: 1px solid var(--border-color); }

/* ── Configure: neues Layout (.page-form-configure + cfg-*) ── */

.page-form-configure {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin: 1rem 0;
}

/* Titelzeile */
.page-form-configure .window-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  padding: 0.75rem 1.25rem 0.6rem !important;
  margin: 0 !important;
  border-bottom: 2px solid var(--border-color);
}

/* Abschnitte */
.cfg-section {
  border-bottom: 2px solid var(--border-color);
}
.cfg-section:last-of-type { border-bottom: none; }

/* Zeilen */
.cfg-row { border-bottom: 1px solid var(--border-color); }
.cfg-row:last-child { border-bottom: none; }

/* Text/Select-Zeilen */
.cfg-row-field { padding: 0.65rem 1.25rem; }

.cfg-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.cfg-input {
  width: 100%;
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  padding: 0.35rem 0.6rem !important;
  font-family: var(--font-main);
  font-size: 0.88rem !important;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.cfg-input:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
}

.cfg-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.25rem;
}

/* Zeitzone: zwei Selects nebeneinander */
.cfg-timezone { display: flex; gap: 0.5rem; }
.cfg-timezone .cfg-input { flex: 1; }

/* Toggle-Zeilen */
.cfg-row-toggle,
.cfg-row-thumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
}

.cfg-toggle-label { flex: 1; min-width: 0; }
.cfg-toggle-label .cfg-label { margin-bottom: 0.15rem; }

.cfg-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.cfg-row-field .cfg-desc { margin-top: 0.45rem; }

.cfg-action-link {
  display: block;
  font-size: 0.78rem;
  color: var(--color-primary);
  margin-top: 0.1rem;
  text-decoration: none;
}
.cfg-action-link:hover { text-decoration: underline; }

/* Thumbnails-Select: auto-Breite, nicht full-width */
.cfg-input-sm {
  width: auto !important;
  min-width: 130px;
  flex-shrink: 0;
}

/* ── Toggle-Switch ─────────────────────────────────────────── */
.cfg-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.cfg-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cfg-toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-elevated);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 24px;
  transition: background 0.22s, border-color 0.22s;
}
.cfg-toggle-slider::before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.22s, background 0.22s;
}
.cfg-toggle input:checked + .cfg-toggle-slider {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.cfg-toggle input:checked + .cfg-toggle-slider::before {
  transform: translate(18px, -50%);
  background: #fff;
}

/* ── Submit ─────────────────────────────────────────────────── */
.cfg-submit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-elevated);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  overflow: hidden;
}
.cfg-submit input[type="submit"],
.cfg-submit input[type="submit"].button-red {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: normal !important;
  font-size: 0.82rem !important;
  padding: 0.35rem 1.1rem !important;
  border-radius: 6px !important;
  color: #fff !important;
  border: none !important;
  text-align: center !important;
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: none !important;
  margin: 0 !important;
}
.cfg-submit input[type="submit"]:not(.button-red) {
  background: var(--color-primary) !important;
}
.cfg-submit input[type="submit"]:not(.button-red):hover {
  background: var(--color-primary-h) !important;
}

/* ── Light Mode ─────────────────────────────────────────────── */
[data-theme="light"] .cfg-toggle-slider {
  background: #e0e0e0;
  border-color: #c0c0c0;
}
[data-theme="light"] .cfg-toggle-slider::before { background: #aaa; }
[data-theme="light"] .cfg-toggle input:checked + .cfg-toggle-slider {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme="light"] .cfg-toggle input:checked + .cfg-toggle-slider::before {
  background: #fff;
}

/* ── cfg-btn: <button>-Elemente in cfg-submit ───────────────── */
.cfg-btn {
  display: inline-block !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 0.35rem 1.1rem !important;
  cursor: pointer;
  font-family: var(--font-main) !important;
  text-align: center !important;
  white-space: nowrap;
  transition: background 0.15s;
}
.cfg-btn:hover { background: var(--color-primary-h) !important; }
.cfg-btn-danger { background: #b03a2e !important; }
.cfg-btn-danger:hover { background: #943126 !important; }
.cfg-submit-split .cfg-btn { flex: 1; }

/* ── Danger-Button im cfg-submit (input[type="submit"]) ─────── */
.cfg-submit input.button-red {
  background: #b03a2e !important;
  margin-right: auto;
}
.cfg-submit input.button-red:hover { background: #943126 !important; }

/* ── Radio-Gruppe (export, import) ─────────────────────────── */
.cfg-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.cfg-radio-group label {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.cfg-radio-group input[type="radio"] {
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Datei-Upload-Zeile (import) ────────────────────────────── */
.cfg-file-upload {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.cfg-file-upload input[type="file"] {
  font-size: 0.85rem;
  color: var(--text-primary);
}
.cfg-file-upload p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.4rem 0 0;
}

/* ── Fußnote nach Form (changetag) ─────────────────────────── */
.cfg-footer-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.5rem 1.25rem;
  margin: 0;
  border-top: 1px solid var(--border-color);
}
.cfg-footer-note a { color: var(--color-primary); }

/* ============================================================
   17. TAG-SORT-BAR (erscheint auf Tag-Cloud- und Tag-List-Seiten)
   ============================================================ */

/* Pure.css setzt .pure-alert-success auf grün/weiss — komplett überschreiben */
.tag-sort {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.6rem 1rem !important;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Alle Links gedimmt — aktiver Link + Hover grün */
.tag-sort a {
  color: var(--text-muted) !important;
  margin: 0 0.6rem;
  border: none !important;
  background: none !important;
  font-size: 0.9rem;
  transition: color 0.15s;
}

.tag-sort a.tag-sort-active,
.tag-sort a:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}

.tag-sort a.tag-sort-active {
  font-weight: 600;
}

/* ============================================================
   18. TAG-CLOUD
   ============================================================ */

#cloudtag,
.cloudtag-container {
  padding: 0.5rem 0.5rem 1rem;
  line-height: 1.5;
  text-align: center;
}

/* Tag-Links in der Cloud: Farbe durch cloudtag-gradient.js gesetzt (Dunkelgrün→Hellgrün).
   Kein !important — JS-inline-Style soll gewinnen. Fallback: --color-primary. */
#cloudtag > a,
.cloudtag-container > a {
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.05rem 0.2rem;
  font-weight: 600;
  transition: color 0.15s;
}

#cloudtag > a:hover,
.cloudtag-container > a:hover {
  color: var(--color-primary-h) !important;
  text-decoration: underline;
}

/* Anzahl-Links (.count) erscheinen als hochgestellte kleine Zahl */
#cloudtag a.count,
.cloudtag-container a.count {
  color: var(--text-muted) !important;
  font-size: 0.65em !important;
  vertical-align: super;
  margin-left: 0.1rem;
  text-decoration: none;
  transition: color 0.15s;
}

#cloudtag a.count:hover,
.cloudtag-container a.count:hover {
  color: var(--color-primary) !important;
}

/* Kontext-Label bei Co-Tag-Suche */
.cotag-context-label {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0.25rem 0 0.5rem;
}

.cotag-context-label strong {
  color: var(--color-primary);
}

.cotag-count {
  color: var(--text-muted);
  font-size: 0.75em;
  font-weight: 400;
}

/* Such-Formular in der Tag-Cloud */
#search-tagcloud {
  margin-bottom: 0.75rem;
}

/* Suchfeld + Lupe inline — schmaler als die volle Spalte, sonst wirkt der
   Awesomplete-Dropdown bei kurzen Vorschlägen unproportional breit */
#search-tagcloud form {
  display: flex !important;
  gap: 0.5rem;
  align-items: center;
  width: 420px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

#search-tagcloud input[type="text"] {
  flex: 1;
}

/* Tag-Cloud + Tag-Liste Suchbutton: nie vollbreit */
#content .search-button,
#search-tagcloud input[type="submit"] {
  width: auto;
}

/* ============================================================
   19. BILDWAND (Picture Wall)
   ============================================================ */

.picwall-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0;
}

.picwall-pictureframe {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--bg-elevated);
  flex: 0 0 auto;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  cursor: pointer;
}

.picwall-pictureframe.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.picwall-pictureframe img {
  display: block;
  /* height wird NICHT überschrieben — bLazy braucht die HTML-Attribut-Höhe
     um Bilder korrekt im Viewport zu erkennen und lazy zu laden */
  transition: opacity 0.2s;
}

.picwall-pictureframe:hover img {
  opacity: 0.85;
}

/* Titel-Overlay beim Hover */
.picwall-pictureframe .info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 0.35rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 400 !important;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.2s;
}

.picwall-pictureframe:hover .info {
  opacity: 1;
}

/* ============================================================
   20. DAILY-ANSICHT
   ============================================================ */

/* Navigationsleiste Täglich/Wöchentlich/Monatlich */
.pure-alert.pure-alert-success:not(.tag-sort) {
  display: flex; /* kein !important — Shaarlis Klick-Handler schließt per style.display="none" (ohne !important) */
  align-items: center !important;
  background: var(--bg-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  margin-bottom: 1rem;
  color: var(--text-muted) !important;
}

.pure-alert.pure-alert-success:not(.tag-sort) a {
  color: var(--text-secondary) !important;
  margin: 0 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s;
}

.pure-alert.pure-alert-success:not(.tag-sort) a:hover {
  background: var(--bg-elevated);
  color: var(--text-primary) !important;
  border-color: var(--border-color);
  text-decoration: none;
}

/* Schließen-Icon der Alert-Meldungen (×) — fehlte bisher komplett, rendert sonst
   im hellen Shaarli-Core-Default statt im Dark-Theme */
.pure-alert-close {
  display: inline-flex !important;
  float: none !important;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-radius: var(--border-radius);
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}
.pure-alert-close:hover {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
}

/* Vor/Zurück-Navigation im Daily-View */
.daily-about {
  margin-bottom: 1rem;
}

.daily-about a {
  color: var(--text-secondary) !important;
  font-size: 0.88rem;
  font-weight: 400;
  transition: color 0.15s;
}

.daily-about a:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}

.daily-desc {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Untertitel (Datum) */
.window-subtitle {
  color: var(--text-secondary) !important;
  font-weight: 400;
  font-size: 1.05rem;
  margin: 0.25rem 0 1.25rem;
  text-align: center;
}

/* Daily-Artikel-Blöcke */
.daily-entry {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.6rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.daily-entry:hover {
  border-color: var(--color-primary);
}

.daily-entry.selected {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
}

.daily-entry.selected .daily-entry-title a {
  color: var(--color-primary-h) !important;
}

/* Template nutzt .daily-entry-title (kein h2/h3) */
.daily-entry-title a {
  color: var(--color-primary) !important;
  font-weight: 600;
  text-decoration: none;
}

.daily-entry-title a:hover {
  color: var(--color-primary-h) !important;
  text-decoration: none;
}

/* fa-link Permalink-Icon: klein und gedimmt */
.daily-entry-title .fa-link {
  color: var(--text-muted) !important;
  font-size: 0.75em;
  margin-right: 0.25rem;
}

.daily-entry .daily-entry-description {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-top: 0.3rem;
}

/* ============================================================
   21. FOOTER
   ============================================================ */
#footer {
  text-align: center;
  padding: 0.75rem 1rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  opacity: 0.45;
  border-top: none;
  margin-top: 1rem;
}

#footer a {
  color: var(--text-muted) !important;
}

#footer a:hover {
  color: var(--color-primary) !important;
}

/* ============================================================
   22. STATUS-LABELS & LIGHT MODE SPECIFICS
   ============================================================ */

/* --- Labels (Badges) ---------------------------------------- */

/* Privat-Badge: Amber, auffällig genug um als Status erkennbar zu sein */
.label-private,
.label.label-private {
  display: inline-block;
  background: var(--color-private) !important;
  color: #fff !important;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  letter-spacing: 0.01em;
}

/* Sticky: freistehendes Icon — shaarli.min.css setzt border+color blau, beides überschreiben */
.label-sticky,
.label.label-sticky,
.linklist-item-title .label-sticky {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  color: var(--color-primary) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1.15rem;
  padding: 0 !important;
}

/* Filter-Status-Badge (Sichtbarkeitsfilter, "without any tag") — neutral */
.label-filter,
.label.label-filter {
  display: inline-block;
  background: var(--bg-elevated);
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  letter-spacing: 0.01em;
}

/* Tag-Label — globaler Reset (Karten-Tags bleiben unverändert) */
.label-tag,
.label.label-tag {
  display: inline-block;
  background: var(--bg-elevated);
  color: var(--color-primary) !important;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 0.8rem;
  padding: 0.1rem 0.45rem;
  text-decoration: none;
}

.label-tag a,
.label.label-tag a {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* Filter-Badge im Such-Ergebnis — origr3n Dark-Green-Badge, scoped */
.search-result .label-tag,
.search-result .label.label-tag {
  display: inline-flex !important;
  align-items: center;
  background: #1a3a0a !important;
  border: 1px solid #2a5c0a !important;
  border-radius: 3px !important;
  font-size: 0.76rem !important;
  font-weight: 600;
  padding: 0.1rem 0.4rem !important;
  transition: background 0.1s, border-color 0.1s;
  /* Anti-Inflate */
  vertical-align: middle;
}

.search-result .label-tag:hover,
.search-result .label.label-tag:hover {
  background: #1f4510 !important;
  border-color: var(--color-primary) !important;
  font-size: 0.76rem !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 3px !important;
}

.search-result .label-tag a,
.search-result .label.label-tag a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.search-result .label-tag:hover a {
  color: var(--color-primary-h) !important;
}

/* × (remove) — kein "|" Trenner */
.search-result .label-tag .remove {
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.75em;
  opacity: 0.6;
}

.search-result .label-tag:hover .remove {
  opacity: 0.9;
}

/* --- Such-Ergebnis-Banner ----------------------------------- */

/* Ergebnis-Kontext (aktive Suche/Filter): dezente Textzeile ohne Box */
#search-result-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0 0.4rem !important;
  margin-bottom: 0.25rem !important;
  font-size: 0.78rem !important;
  color: var(--text-muted) !important;
}

/* Fehler-Banner (Nothing found) */
#search-result-block.pure-alert-error,
.pure-alert.pure-alert-error.search-result {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid #8a3030 !important;
  border-radius: 0 !important;
  padding: 0.35rem 0.75rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 0.5rem !important;
}

/* --- Light Mode: Formular-Titel ----------------------------- */

/* .page-form .window-title setzt color: var(--color-primary) !important (immer grün).
   Im hellen Modus ist grün auf weißem Hintergrund zu dominant —
   die grüne Borderlinie der Karte reicht als Primärfarbe-Signal. */
[data-theme="light"] .page-form .window-title,
[data-theme="light"] .page-form-light .window-title,
[data-theme="light"] .page-form-configure .window-title {
  color: var(--text-primary) !important;
}

/* --- Light Mode: Karten-Definition -------------------------- */

/* Im hellen Modus brauchen Karten etwas mehr Tiefe gegen den #f5f5f5-Hintergrund */
[data-theme="light"] .linklist-item {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .linklist-item:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.1), 0 0 0 1px var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
[data-theme="light"] .linklist-item.private:hover,
[data-theme="light"] .linklist-item:has(.label-private):hover {
  border-color: var(--color-amber) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1), 0 0 0 1px var(--color-amber) !important;
}

/* --- Light Mode: Eingabefelder ------------------------------ */

/* Im hellen Modus: Input nicht rein weiß (= unsichtbar auf weißem Hintergrund),
   sondern minimal abgesetzt */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="email"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #f4f4f4 !important;
  border-color: #b8b8b8 !important;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="search"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="url"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
}

/* --- Light Mode: Neutrale Buttons --------------------------- */

/* Im hellen Modus wirken dunkelgraue Toolbar-Buttons (#2e2e2e) deplatziert.
   Ausgenommen: alle Icon-Buttons (transparent) + Action-Buttons (Textlinks) */
[data-theme="light"] button:not(#theme-toggle):not([data-theme-toggle]):not([data-select-toggle]):not(.filter-btn-trigger):not(#filter-btn):not(#origr3n-action-delete):not(#origr3n-action-public):not(#origr3n-action-private):not(#origr3n-select-cancel):not(.btn):not(#origr3n-timeline-btn):not(#origr3n-timeline-btn-mobile) {
  background: #e4e4e4 !important;
  color: #333 !important;
  border-color: #c0c0c0 !important;
}

/* --- Light Mode: Tags --------------------------------------- */

[data-theme="light"] .search-result .label-tag,
[data-theme="light"] .search-result .label.label-tag {
  background: #ffffff !important;
  border-color: var(--color-primary) !important;
}

[data-theme="light"] .search-result .label-tag a,
[data-theme="light"] .search-result .label.label-tag a {
  color: var(--color-primary) !important;
}

[data-theme="light"] .search-result .label-tag:hover,
[data-theme="light"] .search-result .label.label-tag:hover {
  background: #e8f3e0 !important;
  border-color: var(--color-primary) !important;
}

[data-theme="light"] .tag-list-item a.count {
  background: #e8f3e0;
  color: #2d6e0a !important;
  border-color: #b5d99a;
}

[data-theme="light"] #cloudtag > a,
[data-theme="light"] .cloudtag-container > a {
  color: #2d6e0a !important;
}

[data-theme="light"] #cloudtag > a:hover,
[data-theme="light"] .cloudtag-container > a:hover {
  color: var(--color-primary) !important;
}

/* --- Light Mode: Suchfeld-Overlay & Paging-Toolbar ---------- */

[data-theme="light"] #search.subheader-form.open {
  border-color: #c8c8c8;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] #search-backdrop {
  background: rgba(0, 0, 0, 0.35);
}


/* Filter-Buttons im hellen Modus */
[data-theme="light"] .filter-off,
[data-theme="light"] .linklist-filters a {
  background: #e8e8e8 !important;
  border-color: #c0c0c0 !important;
}

/* Links-per-page im hellen Modus */
[data-theme="light"] .linksperpage a {
  background: #e8e8e8 !important;
  border-color: #c0c0c0 !important;
}

/* --- Light Mode: markdown_toolbar + EasyMDE Editor ---------- */
[data-theme="light"] .md-editor {
  border-color: #ccc !important;
}
[data-theme="light"] .md-editor .btn-toolbar {
  background: #f0f0f0 !important;
  border-bottom-color: #d0d0d0 !important;
}
[data-theme="light"] .md-editor .btn {
  color: #555 !important;
  background: transparent !important;
  transition: background 0.12s, color 0.12s;
}
[data-theme="light"] .md-editor .btn:hover,
[data-theme="light"] .md-editor .btn.active {
  background: rgba(61, 142, 18, 0.14) !important;
  color: var(--color-primary) !important;
}
[data-theme="light"] .md-editor .btn-group + .btn-group {
  border-left-color: #d0d0d0 !important;
}
[data-theme="light"] .md-editor .md-footer {
  background: #f0f0f0 !important;
  color: #888 !important;
  border-top-color: #d0d0d0 !important;
}
[data-theme="light"] .editor-toolbar {
  background: #f0f0f0 !important;
  border-color: #d0d0d0 !important;
}
[data-theme="light"] .editor-toolbar button {
  color: #666 !important;
}
[data-theme="light"] .editor-toolbar button:hover,
[data-theme="light"] .editor-toolbar button.active {
  background: #e0e0e0 !important;
  color: var(--color-primary) !important;
}
[data-theme="light"] .editor-toolbar i.separator {
  border-left-color: #d0d0d0 !important;
}
[data-theme="light"] .CodeMirror {
  background: #fff !important;
  color: #222 !important;
  border-color: #ccc !important;
}
[data-theme="light"] .CodeMirror-cursor {
  border-left-color: #222 !important;
}
[data-theme="light"] .editor-statusbar {
  color: #999 !important;
}

/* ============================================================
   23. MARKDOWN — Dark Mode Overrides (markdown.min.css hat #eee/#fff/#000)
   ============================================================ */
/* ============================================================
   24. MOBILE (≤ 64em / Pure.css lg-Breakpoint)
   ============================================================ */

/* --- Hamburger-Balken: shaarli.min.css setzt hardcoded #b0ddce --- */
.menu-toggle .bar {
  background-color: var(--text-secondary) !important;
}

.menu-toggle:hover .bar {
  background-color: var(--color-primary) !important;
}

.menu-toggle.x .bar {
  background-color: var(--color-primary) !important;
}

@media screen and (max-width: 64em) {
  /* --- Content-Padding auf kleinen Screens --- */
  #content {
    padding: 0.6rem 0.5rem 2rem;
  }

  /* --- Karten: etwas weniger Padding --- */
  .linklist-item {
    padding: 0.75rem 0.85rem;
  }

  /* --- Footer-Band: negativen Margin an mobiles Card-Padding anpassen --- */
  .linklist-item-infos {
    margin: 0.5rem -0.85rem -0.75rem;
    padding: 0.4rem 0.85rem 0.5rem !important;
  }

  /* --- Mobile-Menü wenn offen (JS entfernt .pure-menu-horizontal) --- */
  .menu-transform:not(.pure-menu-horizontal) {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
  }

  .menu-transform:not(.pure-menu-horizontal) .pure-menu-list {
    padding: 0.2rem 0;
  }

  .menu-transform:not(.pure-menu-horizontal) .pure-menu-item {
    border-bottom: 1px solid var(--border-color);
  }

  .menu-transform:not(.pure-menu-horizontal) .pure-menu-item:last-child {
    border-bottom: none;
  }

  .menu-transform:not(.pure-menu-horizontal) .pure-menu-link {
    padding: 0.7rem 1rem;
    display: block;
    color: var(--text-primary) !important;
  }

  .menu-transform:not(.pure-menu-horizontal) .pure-menu-link:hover {
    background: var(--bg-elevated) !important;
    color: var(--color-primary) !important;
  }

}

/* .md-preview = Bootstrap-Markdown Editor-Preview — gleiche Styles wie .markdown */
.markdown blockquote,
.md-preview blockquote {
  color: var(--text-secondary) !important;
  border-left: 3px solid var(--color-primary) !important;
  background: var(--bg-elevated);
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: 0.5rem 0;
  font-style: italic;
}

.markdown pre,
.md-preview pre {
  background: var(--bg-elevated) !important;
  box-shadow: none !important;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
}

.markdown pre code,
.md-preview pre code {
  color: var(--text-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.markdown :not(pre) code,
.md-preview :not(pre) code {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
  border-radius: 3px;
  box-shadow: none !important;
  padding: 0.1rem 0.35rem;
}

/* PureCSS resettet padding auf Listen — Bullets brauchen Einzug */
.markdown ul,
.markdown ol,
.md-preview ul,
.md-preview ol {
  padding-left: 1.5rem;
  margin: 0.35rem 0;
}

/* Headings im Editor-Preview: Farbe explizit setzen (markdown.min.css nur .markdown) */
.md-preview h1,
.md-preview h2,
.md-preview h3,
.md-preview h4,
.md-preview h5,
.md-preview h6 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
  margin: 0.5rem 0 0.25rem;
}

.markdown table tr,
.md-preview table tr {
  background-color: var(--bg-surface) !important;
  border-top-color: var(--border-color);
}

.markdown table tr:nth-child(2n),
.md-preview table tr:nth-child(2n) {
  background-color: var(--bg-elevated) !important;
}

.markdown table tr th,
.markdown table tr td,
.md-preview table tr th,
.md-preview table tr td {
  border-color: var(--border-color);
  color: var(--color-primary);
}

/* Light Mode: markdown.min.css defaults sind bereits hell — nur Akzent-Anpassung */
[data-theme="light"] .markdown blockquote,
[data-theme="light"] .md-preview blockquote {
  border-left-color: var(--color-primary) !important;
  background: #f0f7eb;
  color: #444 !important;
}

[data-theme="light"] .markdown :not(pre) code,
[data-theme="light"] .md-preview :not(pre) code {
  background: #e8f3e0 !important;
  color: #2d6e0a !important;
}

/* --- Light Mode: Select-Modus -------------------------------- */

/* Bottom-Bar: weicherer Schatten auf hellem Hintergrund */
[data-theme="light"] #origr3n-select-bar {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* Ausgewählte Karte im Select-Modus: Tint auf weißer Karte etwas stärker */
[data-theme="light"] body.select-mode .linklist-item.selected {
  background: rgba(61, 142, 18, 0.12) !important;
}
[data-theme="light"] body.select-mode .linklist-item.selected.private,
[data-theme="light"] body.select-mode .linklist-item.selected:has(.label-private) {
  background: rgba(176, 120, 32, 0.14) !important;
}

/* Dekoratives Highlight (außerhalb Select-Modus) auf hellen Karten */
[data-theme="light"] .linklist-item.selected {
  background: rgba(61, 142, 18, 0.08) !important;
}

/* ============================================================
   25. RESTLICHE TEMPLATES — Error, Batch-Edit, Server, Plugins
   ============================================================ */

/* --- Error / 404 ------------------------------------------- */
.page-error-container {
  color: var(--text-primary) !important;
  text-align: center;
  padding: 2rem 1rem;
}

.page-error-container h2 {
  color: var(--text-primary) !important;
}

.page-error-container p {
  color: var(--text-secondary) !important;
}

/* --- Batch-Edit Overlay ------------------------------------ */
.dark-layer {
  background-color: rgba(0, 0, 0, 0.82) !important;
}

.dark-layer .screen-center {
  color: var(--color-primary);
}

/* progressbar nutzt var(--main-color) — passt via :root-Mapping;
   Wrapper-Track-Farbe anpassen */
.progressbar {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-color);
}

/* --- Server-Info-Seite ------------------------------------- */
.server-tables-page,
.server-tables {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  margin: 1rem 0;
  overflow: hidden;
}

/* Section-Titel (h3.window-subtitle) als Trennzeile */
.server-tables-page .window-subtitle,
.server-tables .window-subtitle {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
  text-align: left !important;
  padding: 0.55rem 1.25rem !important;
  margin: 0 !important;
  border-top: 2px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

/* Erste Titelzeile braucht keinen top-border (direkt nach window-title) */
.server-tables-page .window-title + .window-subtitle,
.server-tables .window-title + .window-subtitle {
  border-top: 1px solid var(--border-color);
}

.server-tables-page .server-row,
.server-tables .server-row {
  border-bottom: 1px solid var(--border-color);
}

.server-tables-page .server-row:last-child,
.server-tables .server-row:last-child {
  border-bottom: none;
}

.server-tables-page .server-row p,
.server-tables .server-row p {
  text-align: left !important;
  color: var(--text-secondary) !important;
  margin: 0;
  padding: 0.5rem 1.25rem;
  height: auto !important;
}

.server-tables-page .server-label,
.server-tables .server-label {
  color: var(--text-muted) !important;
  font-weight: 500;
}

.server-tables-page i.fa-color-green,
.server-tables i.fa-color-green {
  color: var(--color-primary) !important;
}

/* --- Plugins-Admin ---------------------------------------- */

/* Section headers (Mikro-Caps Trennlinie + grüner Akzent links) */
.pluginform-container .window-subtitle {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-secondary) !important;
  text-align: left !important;
  padding: 0.55rem 1.25rem !important;
  margin: 0 !important;
  border-top: 2px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid var(--color-primary) !important;
  background: var(--bg-elevated);
  display: block;
}

/* Plugin table */
.pluginform-container .plugin-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Feste Spaltenbreiten — sorgt für Ausrichtung zwischen den zwei Tabellen */
.pluginform-container .plugin-table th:nth-child(1) { width: 64px; }
.pluginform-container .plugin-table th:nth-child(2) { width: 170px; }
.pluginform-container .plugin-table th:last-child.center { width: 110px; }

.pluginform-container .plugin-table th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.5rem 0.85rem;
  text-align: left;
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-elevated);
}

.pluginform-container .plugin-table th.center { text-align: center; }

.pluginform-container .plugin-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.88rem;
  vertical-align: middle;
  text-transform: none !important;
}

.pluginform-container .plugin-table tbody tr:last-child td {
  border-bottom: none;
}

.pluginform-container .plugin-table tbody tr:hover td {
  background: var(--bg-elevated);
}

/* Toggle cell — zentriert */
.pluginform-container .plugin-td-toggle {
  width: 52px;
  text-align: center;
}

/* Plugin name — prominent, kein Umbruch */
.pluginform-container .plugin-td-name {
  white-space: nowrap;
}
.pluginform-container .plugin-td-name label {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-transform: capitalize;
}

/* Description — sekundär */
.pluginform-container .plugin-td-desc label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  text-transform: none;
}

/* Order column */
.pluginform-container .plugin-td-order {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

.pluginform-container .order {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  margin: 0 0.15rem;
  text-decoration: none;
}

.pluginform-container .order:hover {
  color: var(--color-primary) !important;
}

/* "More plugins" Hinweis */
.pluginform-container .plugin-more-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.65rem 1.25rem;
  margin: 0;
  border-top: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

.pluginform-container .plugin-more-note a {
  color: var(--color-primary);
}

/* Empty-State */
.pluginform-container .plugin-empty {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 1rem 1.25rem;
  margin: 0;
}

/* Plugin-Config-Parameter rows */
.pluginform-container .plugin-param-section:not(:first-child) .window-subtitle {
  border-top: 2px solid var(--border-color);
}

.pluginform-container .plugin-param-row {
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.pluginform-container .cfg-label code {
  font-size: 0.82rem;
  color: var(--color-primary);
  background: transparent;
  padding: 0;
}

/* --- pure-button-shaarli (Batch-Edit Speichern-Button) ----- */
.pure-button-shaarli {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  font-family: var(--font-main);
  font-weight: 600;
}

/* ── SELECT-MODUS ──────────────────────────────────────────── */

/* Native #actions-Bar verstecken — Bottom-Bar ersetzt sie */
#actions { display: none !important; }

/* Checkboxen unsichtbar; existieren im DOM für Shaarli-JS */
.link-checkbox { display: none !important; }
.ctrl-checkbox  { display: none !important; }

/* Select-Toggle-Button — wie andere Header-Icons (Desktop + Mobile) */
[data-select-toggle] {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: var(--size-icon-btn) !important;
  height: var(--size-icon-btn) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  color: var(--text-muted) !important;
  transition: color 0.15s, background 0.15s;
  outline: none;
  font-size: 14px;
}
[data-select-toggle]:hover {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
}
[data-select-toggle]:focus { outline: none; }

/* Aktiver Zustand aller Header-Icon-Opener — Suche, Filter, Select */
body.select-mode [data-select-toggle],
.subheader-opener[data-open-id="search"].origr3n-active,
.filter-btn-trigger.origr3n-active,
#filter-btn.origr3n-active {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
}

/* Karten im Select-Modus: Pointer-Cursor */
body.select-mode .linklist-item {
  cursor: pointer;
  user-select: none;
}

/* Ausgewählte Karte — grüner Tint */
body.select-mode .linklist-item.selected {
  background: rgba(61, 142, 18, 0.15) !important;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md);
}

/* Ausgewählte private Karte — amber Tint */
body.select-mode .linklist-item.selected.private,
body.select-mode .linklist-item.selected:has(.label-private) {
  background: rgba(176, 120, 32, 0.18) !important;
  border-color: var(--color-amber);
  box-shadow: 0 0 0 1px var(--color-amber), var(--shadow-md);
}

/* Platz für Bottom-Bar */
body.select-mode #content {
  padding-bottom: 4.5rem;
}

/* ── BOTTOM-BAR ─────────────────────────────────────────────── */
#origr3n-select-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: 0.65rem 1.25rem;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.35);
}

body.select-mode #origr3n-select-bar {
  display: flex;
}

#origr3n-select-count {
  color: var(--text-secondary);
  font-size: 0.85rem;
  white-space: nowrap;
  min-width: 7rem;
}

#origr3n-select-all {
  color: var(--color-primary);
  font-size: 0.82rem;
  white-space: nowrap;
  text-decoration: none;
}
#origr3n-select-all:hover {
  text-decoration: underline;
}

.origr3n-select-actions {
  display: flex;
  gap: 1rem;
  margin-left: auto;
  align-items: center;
}

#origr3n-action-delete,
#origr3n-action-public,
#origr3n-action-private,
#origr3n-select-cancel {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: var(--font-main);
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.15s;
}
#origr3n-action-delete:hover,
#origr3n-action-public:hover,
#origr3n-action-private:hover,
#origr3n-select-cancel:hover {
  background: transparent !important;
  opacity: 0.65;
}

#origr3n-action-delete  { color: #c0392b !important; }
#origr3n-action-public  { color: var(--color-primary) !important; }
#origr3n-action-private { color: var(--color-amber) !important; }
#origr3n-select-cancel  { color: var(--text-muted) !important; }

@media screen and (max-width: 63.99em) {
  #origr3n-select-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
  }
  .origr3n-select-actions {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

.pure-button-shaarli:hover {
  background: var(--color-primary-h) !important;
}

/* ============================================================
   ADDLINK-SEITE (Link hinzufügen / Mehrere Links)
   ============================================================ */

/* Awesomplete-Wrapper: standardmäßig inline-block → Formularfeld bleibt schmaler
   als die Textarea darüber. Block + 100% bringt beide auf gleiche Breite. */
.page-form .awesomplete {
  display: block !important;
  width: 100% !important;
}

/* Beschreibungstexte in den Addlink-Formularen: kein Mikro-Caps-Label-Style —
   das sind Hinweis-Sätze, keine Feldnamen */
.batch-addform label[for="urls"],
.addform label[for="shaare"] {
  text-transform: none !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--text-muted) !important;
  margin-top: 0 !important;
}

/* Submit-Button-Container: rechts ausrichten */
.addform > div:last-child,
.batch-addform > div:last-child {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

/* Submit-Buttons in den Addlink-Formularen: kompakter als globale Action-Buttons.
   shaarli.min.css setzt height:35px + line-height:35px → Text oben; mit auto überschreiben. */
#addlink-form input[type="submit"],
#batch-addlink-form input[type="submit"] {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: normal !important;
  font-size: 0.82rem !important;
  padding: 0.3rem 0.85rem !important;
  border-radius: 6px !important;
}

/* Login-Button: gleiche Behandlung wie Addlink-Submit —
   shaarli.min.css setzt height:35px + line-height:35px → Text oben; width meist 100% */
#login-form div:has(input[type="submit"]) {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

#login-form input[type="submit"] {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: normal !important;
  font-size: 0.82rem !important;
  padding: 0.3rem 1.1rem !important;
  border-radius: 6px !important;
}

/* "Mehrere Links"-Umschalter */
.addlink-batch-show-more {
  padding: 0.4rem 0 0.5rem;
}
.addlink-batch-show-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.addlink-batch-show-more a:hover {
  color: var(--color-primary-h);
  text-decoration: underline;
}

/* ── Empty State (0 Treffer) ──────────────────────────────── */
body:has(#origr3n-empty-state) .linklist-paging {
  display: none;
}

#origr3n-empty-state {
  text-align: center;
  padding: 5rem 2rem 3rem;
}
.origr3n-sad-star {
  width: 220px;
  height: 220px;
  max-width: 50vw;
  max-height: 50vw;
  margin: 0 auto 1.5rem;
  background-image: url('../img/sad_star.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.55;
}
[data-theme="dark"] .origr3n-sad-star {
  filter: invert(1) brightness(0.65);
  opacity: 0.7;
}
#origr3n-empty-state p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
}
#origr3n-empty-state p strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ─── Timeline Variant A — DEV only ─────────────────────────────────────── */
.origr3n-timeline-sep {
  display: none;
}
body.origr3n-timeline .origr3n-timeline-sep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  margin: 0.25rem 0 0.5rem;
  user-select: none;
}
body.origr3n-timeline .origr3n-timeline-sep .sep-a-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-primary) 20%, var(--color-primary) 80%, transparent);
  opacity: 0.35;
}
body.origr3n-timeline .origr3n-timeline-sep .sep-a-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
  flex-shrink: 0;
}
#origr3n-timeline-btn,
#origr3n-timeline-btn-mobile {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: var(--size-icon-btn);
  height: var(--size-icon-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  padding: 0 !important;
  transition: color 0.15s, background 0.15s;
}
#origr3n-timeline-btn:hover,
#origr3n-timeline-btn-mobile:hover,
#origr3n-timeline-btn.active,
#origr3n-timeline-btn-mobile.active {
  background: var(--bg-elevated) !important;
  color: var(--color-primary) !important;
}