body { font-family: sans-serif; margin: 0; background: #f5f5f5; }
    header {
      background: linear-gradient(180deg,#fafafa,#f0f0f0);
      color: #000;
      padding: 0.7rem 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom:1px solid #d6d6d6;
    }
    header h1 { margin: 0; font-size: 1.1rem; }
    header button {
      padding: 0.3rem 0.6rem;
      border:1px solid #b9b9b9;
      cursor: pointer;
      margin-left: 0.3rem;
    }

    #login-overlay {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.6);
      z-index: 1000;
    }
    #login-box {
      background: #fff; padding: 2rem; border-radius: 8px;
      width: 320px; box-shadow: 0 0 20px rgba(0,0,0,0.45);
    }
    label { display:block; margin-top:0.5rem; font-size: 0.9rem; }
    input, select {
      width:100%; padding:0.4rem; margin-top:0.2rem;
      box-sizing: border-box;
    }
    button {
      margin-top:1rem; padding:0.5rem 1rem;
    }
    #app-content { display:none; padding:1rem; }

    #error { color: red; margin-top: 0.5rem; min-height: 1.2em; font-size: 0.85rem; }

    .section {
      background:#fff;
      border-radius:8px;
      position: relative;
      padding:1rem;
      margin-bottom:1rem;
      box-shadow:0 2px 4px rgba(0,0,0,0.1);
    }
    .section h2 { 
      margin-top:0;
      margin-bottom: 0;
     }


    /* Header mit Titel + Dreieck rechts */
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;   /* genau DAS richtet h2 + button perfekt aus */
        padding: 0;
        margin: 0;
        min-height: 28px;
        }

    /* H2 Abstände entfernen */
    .section-header h2 {
        margin: 0;
        padding: 0;
    }


     /* Pfeil optisch kompakt machen */
    .section-toggle {
        border: none;
        background: none;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;     /* verhindert extra Höhe durch Text */
        padding: 0;         /* verhindert unnötige Höhen */
        margin: 0;          /* keep it tight */

        /* Standard: Inhalt sichtbar → Spitze nach unten */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 10px solid #000;
    }

    /* Wenn Section eingeklappt → Spitze nach links */
    .section.collapsed .section-toggle {
        border-left: 0;
        border-right: 10px solid #000;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }

    /* Inhalt der Section */
    .section-body {
        margin-top: 0.5rem;
    }

    /* Eingeklappt: Inhalt weg, H2 bleibt, weil im Header */
    .section.collapsed .section-body {
        display: none;
    }

    #new-username {
    text-transform: lowercase;
    }



    table {
      width:100%;
      border-collapse: collapse;
      margin-top:0.5rem;
      font-size: 0.85rem;
    }
    th, td {
      border:1px solid #ddd;
      padding:0.4rem 0.5rem;
      text-align:left;
    }
    th { background:#eee; }
    .badge {
      display:inline-block;
      padding:0.1rem 0.4rem;
      border-radius:4px;
      font-size:0.75rem;
      margin-left: 0.3rem;
    }
    .badge-admin { background:#ff9800; color:#fff; }
    .badge-user { background:#2196f3; color:#fff; }
    .badge-inactive { background:#9e9e9e; color:#fff; }

    .flex-row {
      display:flex;
      gap:0.5rem;
      align-items:center;
    }
    .flex-row > * { flex:1; }

    .btn-small {
      font-size:0.75rem;
      padding:0.2rem 0.5rem;
      margin-top:0;
    }

    /* Passwort-Modal */
    #changePasswordModal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.6);
      z-index: 1100;
    }
    #changePasswordBox {
      background:#fff;
      padding:1.5rem;
      border-radius:8px;
      width:320px;
      box-shadow:0 0 20px rgba(0,0,0,0.45);
    }
    #changePasswordBox h3 {
      margin-top:0;
    }
    #changePasswordBox button {
      margin-right: 0.5rem;
    }