.logged-in-banner {
    width: 100%;
    background-color: #222;
    color: white;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    box-sizing: border-box;
}


    .server-table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .server-table th,
    .server-table td {
      padding: 0.75rem 1rem;
      border: 1px solid #ccc;
      text-align: left;
    }

    .server-table th {
      background-color: #007bff;
      color: white;
    }

    .status-online { color: green; font-weight: bold; }
    .status-offline { color: red; font-weight: bold; }
    .status-unknown { color: #888; font-style: italic; }

    @media (max-width: 768px) {
      .server-table,
      .server-table thead,
      .server-table tbody,
      .server-table th,
      .server-table td,
      .server-table tr {
        display: block;
      }

      .server-table thead {
        display: none;
      }

      .server-table tr {
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        padding: 1rem;
        background: #fff;
      }

      .server-table td {
        border: none;
        padding: 0.5rem 0;
      }

      .server-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        color: #007bff;
        margin-bottom: 0.25rem;
      }

      canvas {
        width: 100%;
      }
    }

    .chart-container {
      display: none;
      margin-top: 1rem;
    }

      .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
  }

  .grid input {
    width: 100%;
    padding: 0.5rem;
  }
  #portscanner-box {
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#portscanner-box form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#portscanner-box input,
#portscanner-box button {
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #bbb;
  border-radius: 0; /* keine runden Ecken */
  box-sizing: border-box;
  width: 100%;
}

#portscanner-box button {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border: none;
}

#portscanner-box button:hover {
  background-color: #0056b3;
}

.scan-status {
  margin-top: 1rem;
  font-family: monospace;
  white-space: pre-wrap;
  background: #fff;
  border: 1px dashed #ccc;
  padding: 0.75rem;
  font-size: 0.95rem;
  border-radius: 0;
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 600px) {
  #portscanner-box input,
  #portscanner-box button {
    font-size: 0.95rem;
  }
}

.server-summary-box {

}

.server-summary-box h3 {
  margin-top: 0;
  color: #007bff;
}

.server-summary-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.server-summary-box li {
  margin: 0.5rem 0;
}
    .dash-wrapper {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .dash-toggle {
      display: none;
    }

    .dash-menu-label {
      display: none;
      background: #333;
      color: white;
      padding: 1rem;
      font-size: 1.2rem;
      cursor: pointer;
    }

    .dash-container {
      display: flex;
      flex: 1;
    }

    .dash-sidebar {
      width: 250px;
      background-color: #222;
      color: white;
      padding: 1rem;
      display: flex;
      flex-direction: column;
    }

    .dash-sidebar nav a {
      color: white;
      text-decoration: none;
      padding: 0.5rem 0;
      display: block;
    }

    .dash-sidebar nav a:hover {
      background: #444;
      padding-left: 0.5rem;
    }

    .dash-content {
      flex: 1;
    }

    /* Responsive Verhalten */
    @media (max-width: 768px) {
      .dash-container {
        flex-direction: column;
      }

      .dash-menu-label {
        display: block;
      }

      .dash-sidebar {
        display: none;
      }

      .dash-toggle:checked ~ .dash-container .dash-sidebar {
        display: flex;
      }
    }