/* =========================================================
   CSS VARIABLES - THEME SYSTEM
   ========================================================= */

   :root {
    /* Base Sizing */
    --size-base: 1rem;
    --default-padding: calc(var(--size-base) * 1.5);
    
    /* Typography */
    --family-primary: "Source Sans 3", system-ui, -apple-system, sans-serif;
    --family-sans-serif: "Source Sans 3", system-ui, -apple-system, sans-serif;
    --family-secondary: "Source Sans 3", system-ui, -apple-system, sans-serif;
  

    /* Component Dimensions */
    --navbar-height: 3.25rem;
    --navbar-item-h-padding: calc(var(--default-padding) * 0.75);
    --navbar-avatar-size: 1.75rem;
    
    --aside-width: calc(var(--size-base) * 14);
    --aside-mobile-width: calc(var(--size-base) * 15);
    --aside-icon-width: calc(var(--size-base) * 3);
    --aside-submenu-font-size: calc(var(--size-base) * 0.95);
    --aside-box-shadow: none;
    
    --footer-logo-height: calc(var(--size-base) * 2);
    
    /* Icons */
    --icon-update-mark-size: calc(var(--size-base) * 0.5);
    --icon-update-mark-color: #ffdd57;
    
    color-scheme: dark;
  }
  
/* =========================================================
   DARK THEME (VS CODE DARK+)
   ========================================================= */
   html:not([data-theme]),
   html[data-theme="dark"] {
     color-scheme: dark;
   
     /* Base */
     --base-color: #1e1e1e;
     --base-color-light: rgba(255, 255, 255, 0.06);
   
     /* Surfaces */
     --body-background-color: #1e1e1e;   /* VS Code editor bg */
     --surface-card: #252526;           /* panels/cards */
     --surface-elevated: #2d2d2d;       /* hover/raised */
   
     /* Aside (sidebar) - VS Code */
     --aside-background-color: #252526;         /* side bar */
     --aside-tools-background-color: #2d2d2d;   /* top strip in sidebar */
     --aside-tools-color: #d4d4d4;
   
     /* Navbar - VS Code top bar */
     --navbar-background-color: #252526;
     --navbar-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
     --navbar-input-color: #d4d4d4;
     --navbar-input-placeholder-color: #808080;
     --navbar-divider-border: 1px solid rgba(255, 255, 255, 0.08);
   
     /* Borders */
     --light-border: 1px solid rgba(255, 255, 255, 0.10);
     --hr-height: 1px;
   
     /* Text */
     --text-primary: #d4d4d4;     /* VS Code foreground */
     --text-secondary: #9da1a6;   /* softer */
     --text-tertiary: #808080;    /* muted */
   
     /* Accent + status (optional, but nice in VS Code style) */
     --icon-update-mark-color: #4fc1ff;  /* VS Code blue-ish */
   
     /* Bulma menu overrides */
     --bulma-menu-item-hover-background-color: #2a2d2e; /* selection/hover */
     /*--bulma-menu-item-hover-background-color:rgb(30, 30, 30);*/
     --bulma-menu-item-hover-color: #ffffff;
     --bulma-menu-label-color: #c5c5c5;

     /* Primary Color */
      --bulma-primary-h: 102;
      --bulma-primary-s: 56%;
      --bulma-primary-l: 41%;
      --bulma-primary: #46a52d;
      --bulma-primary-invert: #ffffff;
      --bulma-primary-light: #5fc93f;
      --bulma-primary-dark: #3a8a26;

   }
   
   /* =========================================================
      LIGHT THEME (VS CODE LIGHT+)
      ========================================================= */
   html[data-theme="light"] {
     color-scheme: light;
   
     /* Base */
     --base-color: #ffffff;
     --base-color-light: rgba(0, 0, 0, 0.06);
   
     /* Surfaces */
     --body-background-color: #ffffff;   /* VS Code editor bg */
     --surface-card: #f3f3f3;            /* panels */
     --surface-elevated: #eaeaea;        /* hover/raised */
   
     /* Aside (sidebar) - VS Code */
     --aside-background-color: #f3f3f3;
     --aside-tools-background-color: #eaeaea;
     --aside-tools-color: #1e1e1e;
   
     /* Navbar */
     --navbar-background-color: #f3f3f3;
     --navbar-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
     --navbar-input-color: #1e1e1e;
     --navbar-input-placeholder-color: rgba(30, 30, 30, 0.45);
     --navbar-divider-border: 1px solid rgba(0, 0, 0, 0.10);
   
     /* Borders */
     --light-border: 1px solid rgba(0, 0, 0, 0.10);
     --hr-height: 1px;
   
     /* Text */
     --text-primary: #1e1e1e;
     --text-secondary: #4d4d4d;
     --text-tertiary: #6f6f6f;
   
     /* Accent */
     --icon-update-mark-color: #007acc; /* VS Code primary blue */
   
     /* Bulma menu overrides */
     --bulma-menu-item-hover-background-color: #e1e1e1;
     --bulma-menu-item-hover-color: #1e1e1e;
     --bulma-menu-label-color: #4d4d4d;

     /* Primary Color */
    --bulma-primary-h: 102;
    --bulma-primary-s: 56%;
    --bulma-primary-l: 41%;
    --bulma-primary: #46a52d;
    --bulma-primary-invert: #ffffff;
    --bulma-primary-light: #5fc93f;
    --bulma-primary-dark: #3a8a26;
   }
   
  
  html[data-theme="light"] body {
    background: var(--body-background-color);
    color: var(--text-primary);
  }
  
  /* =========================================================
     BASE STYLES + STICKY FOOTER
     ========================================================= */
  html,
  body,
  #app,
  nav.navbar,
  aside.aside {
    font-family: var(--family-sans-serif);
  }
  
  html,
  body {
    height: 100%;
    margin: 0;
  }
  
  body {
    background: var(--body-background-color);
  }
  
  /* Sticky Footer Layout */
  #app {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  main {
    flex: 1 0 auto;
  }
  
  footer.footer {
    flex-shrink: 0;
  }
  
  .transition-padding-left {
    transition: padding-left 250ms ease-in-out 50ms;
  }
  .transition-margin-left {
    transition: margin-left 250ms ease-in-out 50ms;
  }
  .transition-left {
    transition: left 250ms ease-in-out 50ms;
  }
  
  /* Update mark */
  .icon.has-update-mark {
    position: relative;
  }
  .icon.has-update-mark::after {
    content: "";
    position: absolute;
    top: 0.35em;
    width: var(--icon-update-mark-size);
    height: var(--icon-update-mark-size);
    border-radius: 9999px;
    background: var(--icon-update-mark-color);
    right: 0.65em;
  }
  
  /* =========================================================
     ASIDE (SIDEBAR) - ORIGINAL FUNKTIONALITÄT
     ========================================================= */
  
  /* Desktop: >= 1024px */
  @media screen and (min-width: 1024px) {
    html.has-aside-left.has-aside-expanded nav.navbar,
    html.has-aside-left.has-aside-expanded body {
      padding-left: var(--aside-width);
    }
  
    html.has-aside-left nav.navbar,
    html.has-aside-left body {
      transition: padding-left 250ms ease-in-out 50ms;
    }
  
    html.has-aside-left aside.is-placed-left {
      display: block;
    }
  
    aside.aside.is-expanded {
      width: var(--aside-width);
    }
  
    aside.aside.is-expanded .menu-list .icon {
      width: var(--aside-icon-width);
    }
    aside.aside.is-expanded .menu-list .icon.has-update-mark::after {
      right: calc((var(--aside-icon-width) * 0.5) - 0.85rem);
    }
  
    aside.aside.is-expanded .menu-list span.menu-item-label {
      display: inline-block;
    }
  
    aside.aside.is-expanded .menu-list li.is-active > ul {
      display: block;
    }
  }
  
  /* Base aside */
  aside.aside {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    height: 100vh;
    padding: 0;
    box-shadow: var(--aside-box-shadow);
    background: var(--aside-background-color);
  }



  
  /* tools bar */
  aside.aside .aside-tools {
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: var(--aside-tools-background-color);
    color: var(--aside-tools-color);
    line-height: var(--navbar-height);
    height: var(--navbar-height);

    flex: 1;
    display:flex; align-items:center; justify-content:center; width: 100%;
  }
  aside .aside-tools svg {
    width: 190px;
  }
  
  aside.aside .aside-tools .icon {
    margin-right: calc(var(--default-padding) * 0.5);
  }
  
  aside.aside .menu-list li a {
    background-color: transparent;
    padding: 8px 0;
    color: var(--bulma-menu-label-color);
  }
  
  aside.aside .menu-list li a:hover {
    background-color: var(--bulma-menu-item-hover-background-color, #262930);
    color: var(--bulma-menu-item-hover-color, #fff);
  }
  
  aside.aside .menu-list li a.is-active,
  aside.aside .menu-list li.is-active > a {
    background-color: var(--bulma-menu-item-hover-background-color, #262930);
    color: var(--bulma-menu-item-hover-color, #fff);
  }
  
  /* dropdown icon spacing */
  aside.aside .menu-list li a.has-dropdown-icon {
    position: relative;
    padding-right: var(--aside-icon-width);
  }
  aside.aside .menu-list li a.has-dropdown-icon .dropdown-icon {
    position: absolute;
    top: calc(var(--size-base) * 0.5);
    right: 0;
  }
  
  /* submenu */
  aside.aside .menu-list li ul {
    display: none;
    border-left: 0;
    background-color: #2a2e36;
    padding-left: 0;
    margin: 0 0 calc(var(--default-padding) * 0.5);
  }
  
  aside.aside .menu-list li ul li a {
    padding: calc(var(--default-padding) * 0.5) 0 calc(var(--default-padding) * 0.5) calc(var(--default-padding) * 0.5);
    font-size: var(--aside-submenu-font-size);
  }
  aside.aside .menu-list li ul li a.has-icon {
    padding-left: 0;
  }
  aside.aside .menu-list li ul li a.is-active:not(:hover) {
    background: transparent;
  }
  
  aside.aside .menu-label {
    padding: 0 calc(var(--default-padding) * 0.5);
    margin-top: calc(var(--default-padding) * 0.5);
    margin-bottom: calc(var(--default-padding) * 0.5);
  }
  
  /* Touch: < 1024px */
  @media screen and (max-width: 1023px) {
    #app,
    nav.navbar {
      transition: margin-left 250ms ease-in-out 50ms;
    }
    aside.aside {
      transition: left 250ms ease-in-out 50ms;
    }
  
    html.has-aside-mobile-transition body {
      overflow-x: hidden;
    }
    html.has-aside-mobile-transition body,
    html.has-aside-mobile-transition #app,
    html.has-aside-mobile-transition nav.navbar {
      width: 100vw;
    }
  
    html.has-aside-mobile-transition aside.aside {
      width: var(--aside-mobile-width);
      display: block;
      left: calc(var(--aside-mobile-width) * -1);
    }
  
    html.has-aside-mobile-transition aside.aside .image img {
      max-width: calc(var(--aside-mobile-width) * 0.33);
    }
  
    html.has-aside-mobile-transition aside.aside .menu-list li.is-active > ul {
      display: block;
    }
  
    html.has-aside-mobile-transition aside.aside .menu-list a .icon {
      width: var(--aside-icon-width);
    }
    html.has-aside-mobile-transition aside.aside .menu-list a .icon.has-update-mark::after {
      right: calc((var(--aside-icon-width) * 0.5) - 0.85rem);
    }
    html.has-aside-mobile-transition aside.aside .menu-list a span.menu-item-label {
      display: inline-block;
    }
  
    html.has-aside-mobile-expanded #app,
    html.has-aside-mobile-expanded nav.navbar {
      margin-left: var(--aside-mobile-width);
    }
    html.has-aside-mobile-expanded aside.aside {
      left: 0;
    }
  }
  
  /* =========================================================
     NAVBAR - JETZT MIT THEME STYLING
     ========================================================= */
  nav.navbar {
    background-color: var(--navbar-background-color);
    box-shadow: var(--navbar-box-shadow);
    border-bottom: 1px solid var(--light-border);
  }
  
  nav.navbar .navbar-item {
    color: var(--text-primary);
  }
  
  nav.navbar .navbar-dropdown .navbar-item {
    background: var(--surface-elevated);
  }

  nav.navbar .navbar-item.has-user-avatar .is-user-avatar {
    margin-right: calc(var(--default-padding) * 0.5);
    display: inline-flex;
    width: var(--navbar-avatar-size);
    height: var(--navbar-avatar-size);
  }
  
  nav.navbar .navbar-item.has-divider {
    border-right: var(--navbar-divider-border);
  }
  
  nav.navbar .navbar-item.no-left-space {
    padding-left: 0;
  }
  
  nav.navbar .navbar-item.has-dropdown {
    padding-right: 0;
    padding-left: 0;
  }
  
  nav.navbar .navbar-item.has-dropdown .navbar-link {
    padding-right: var(--navbar-item-h-padding);
    padding-left: var(--navbar-item-h-padding);
    color: var(--text-primary);
  }
  
  nav.navbar .navbar-item.has-control {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  nav.navbar .navbar-item .control .input {
    color: var(--navbar-input-color);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  nav.navbar .navbar-item .control .input::placeholder {
    color: var(--navbar-input-placeholder-color);
  }
  
  /* Navbar Dropdown */
  nav.navbar .navbar-dropdown {
    background-color: var(--surface-elevated);
    border: 1px solid var(--light-border);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }
  
  nav.navbar .navbar-dropdown .navbar-item {
    color: var(--text-primary);
  }
  
  nav.navbar .navbar-dropdown .navbar-item:hover {
    background-color: var(--surface-card);
  }
  
  /* Touch navbar layout: < 1024px */
  @media screen and (max-width: 1023px) {
    nav.navbar {
      display: flex;
      padding-right: 0;
    }
  
    nav.navbar .navbar-brand {
      flex: 1;
    }
    nav.navbar .navbar-brand.is-right {
      flex: none;
    }
  
    nav.navbar .navbar-item.no-left-space-touch {
      padding-left: 0;
    }
  
    nav.navbar .navbar-menu {
      position: absolute;
      width: 100vw;
      padding-top: 0;
      top: var(--navbar-height);
      left: 0;
      background-color: var(--navbar-background-color);
    }
  
    nav.navbar .navbar-menu .navbar-item .icon:first-child {
      margin-right: calc(var(--default-padding) * 0.5);
    }
  
    nav.navbar .navbar-menu .navbar-item.has-dropdown > .navbar-link {
      background-color: var(--surface-elevated);
    }
    nav.navbar .navbar-menu .navbar-item.has-dropdown > .navbar-link .icon:last-child {
      display: none;
    }
  
    nav.navbar .navbar-menu .navbar-item.has-user-avatar > .navbar-link {
      display: flex;
      align-items: center;
      padding-top: calc(var(--default-padding) * 0.5);
      padding-bottom: calc(var(--default-padding) * 0.5);
    }
  }
  
  /* Desktop navbar spacing: >= 1024px */
  @media screen and (min-width: 1024px) {
    nav.navbar .navbar-item {
      padding-right: var(--navbar-item-h-padding);
      padding-left: var(--navbar-item-h-padding);
    }
  
    nav.navbar .navbar-item:not(.is-desktop-icon-only) .icon:first-child {
      margin-right: calc(var(--default-padding) * 0.5);
    }
  
    nav.navbar .navbar-item.is-desktop-icon-only span:not(.icon) {
      display: none;
    }
  }
  
  /* =========================================================
     MAIN SECTION - JETZT MIT THEME STYLING
     ========================================================= */
  section.section.is-main-section {
    padding: var(--default-padding);
    padding-bottom: 10px;
  }
  
  /* Cards */
  .card {
    background-color: var(--surface-card);
    border: 1px solid var(--light-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--light-border);
  }
  
  .card-header-title {
    color: var(--text-primary);
  }
  
  .card-content {
    color: var(--text-primary);
  }
  
  /* Tables */
  .table {
    background-color: var(--surface-card);
    color: var(--text-primary);
  }
  
  .table thead th {
    color: var(--text-primary);
    border-bottom-color: var(--light-border);
  }
  
  .table tbody tr {
    background-color: var(--surface-card);
  }
  
  .table tbody tr:hover {
    background-color: var(--surface-elevated);
  }
  
  .table td,
  .table th {
    border-color: var(--light-border);
    color: var(--text-primary);
  }
  
  /* Titles */
  .title,
  .subtitle {
    color: var(--text-primary);
  }
  
  .button.is-light {
    background-color: rgba(255,255,255,0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.12);
  }
  
  .button.is-light:hover {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
  }
  
  /* =========================================================
     FOOTER
     ========================================================= */
  footer.footer {
    background-color: var(--surface-card);
    border-top: 1px solid var(--light-border);
    padding: 0.5rem 1.5rem;
  }
  
  footer.footer .logo img {
    width: auto;
    height: var(--footer-logo-height);
  }
  
  /* Mobile: <= 768px */
  @media screen and (max-width: 768px) {
    .footer-copyright {
      text-align: center;
    }
  }

  /* =========================================================
   MISSING BULMA ELEMENTS (VS CODE STYLE PATCH)
   - append at end of your css
   ========================================================= */

/* --- Box --- */
.box {
  background-color: var(--surface-card)!important;
  color: var(--text-primary);
  border: 1px solid var(--light-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.box a { color: inherit; }

/* --- Content links / code --- */
.content { color: var(--text-primary); }
.content a { color: var(--icon-update-mark-color); }
.content code,
code {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--light-border);
}

/* --- Inputs / Select / Textarea --- */
.input,
.textarea,
.select select {
  background-color: var(--surface-card);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
html[data-theme="light"] .input,
html[data-theme="light"] .textarea,
html[data-theme="light"] .select select {
  border-color: rgba(0,0,0,0.12);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-tertiary);
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--icon-update-mark-color);
  box-shadow: 0 0 0 1px var(--icon-update-mark-color);
}

/* Disabled */
.input[disabled],
.textarea[disabled],
.select select[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: #333;
}

/* --- Field / Labels / Help --- */
.label { color: var(--text-primary); }
.help { color: var(--text-tertiary); }

/* --- Dropdown --- */
.dropdown-content {
  background: var(--surface-elevated);
  border: 1px solid var(--light-border);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.dropdown-item,
.dropdown .dropdown-content .dropdown-item {
  color: var(--text-primary);
}
.dropdown-item:hover {
  background: var(--surface-card);
}

/* --- Message / Notification --- */
.message {
  background: var(--surface-card);
  border: 1px solid var(--light-border);
}
.message-header {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-bottom: 1px solid var(--light-border);
}
.message-body { color: var(--text-primary); }

.notification {
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--light-border);
}

/* --- Modal --- */
.modal-card-head,
.modal-card-foot {
  background: var(--surface-elevated);
  border-color: var(--light-border);
}
.modal-card-head .delete:focus {
  outline: none;
  box-shadow: none;
}

.modal-card-body {
  background: var(--surface-card);
  color: var(--text-primary);
}
.modal-card-title { color: var(--text-primary); }

.modal-card-head {
  padding: 1.1rem 1.5rem!important;
  min-height: auto;
}


.modal-card-title {
  font-size: 0.95rem!important;
  line-height: 1.2!important;
}

.modal-card-foot {
  padding: 1.1rem 1.5rem!important;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* wenn nur EIN button drin ist → zentrieren */
.modal-card-foot:has(.button:only-child) {
  justify-content: center;
}

/* --- Tabs --- */
.tabs a {
  color: var(--text-secondary);
  border-bottom-color: transparent;
}
.tabs li.is-active a {
  color: var(--text-primary);
  border-bottom-color: var(--icon-update-mark-color);
}
.tabs a:hover {
  color: var(--text-primary);
  border-bottom-color: rgba(255,255,255,0.18);
}

/* --- Breadcrumb --- */
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb li.is-active a { color: var(--text-primary); }
.breadcrumb a:hover { color: var(--text-primary); }

/* --- Pagination --- */
.pagination-link,
.pagination-next,
.pagination-previous {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-color: var(--light-border);
}
.pagination-link.is-current {
  background: var(--icon-update-mark-color);
  border-color: var(--icon-update-mark-color);
  color: #111; /* readable on blue */
}

/* --- Tag --- */
.tag {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--light-border);
}

/* --- Panel --- */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--light-border);
}
.panel-heading {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border-bottom: 1px solid var(--light-border);
}
.panel-block { color: var(--text-primary); }
.panel-block:hover { background: var(--surface-elevated); }

/* --- HR --- */
hr {
  background-color: transparent;
  border: 0;
  border-top: var(--hr-height) solid rgba(255,255,255,0.10);
}
html[data-theme="light"] hr {
  border-top-color: rgba(0,0,0,0.10);
}

/* Theme all default buttons */



#filter-clear.button {
  background-color: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.12);
}
#filter-clear.button:hover { background-color: var(--surface-card); }



.field-option-group .control {
  min-height: 2.5em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.45rem;
}

.field-option-group .radio,
.field-option-group .checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  line-height: 1.2;
}

.field-option-group .radio input,
.field-option-group .checkbox input {
  margin-top: 0;
  margin-right: 0.5rem;
  flex: 0 0 auto;
}

.field-option-group .radio span,
.field-option-group .checkbox span {
  display: inline-block;
  line-height: 1.2;
}

.single-check-control {
  min-height: 2.5em;
  display: flex;
  align-items: center;
}