/* === Grundstyles === */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Menü === */
.menu {
    display: flex;
    background-color: #4f46e5; /* Indigo-600 passend zu Tailwind */
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-family: inherit;
}

    .menu a,
    .menu button {
        color: white;
        padding: 14px;
        text-decoration: none;
        background: none;
        background-color: #4f46e5; /* Indigo-600 */
        border: none;
        cursor: pointer;
        font-family: inherit;
    }

        .menu a:hover,
        .menu button:hover {
            background-color: #6366f1; /* Indigo-500 */
        }

/* === Content === */
.content {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    font-family: inherit;
}

.content-inner {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* === GridView Styles === */
.gridview, table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-size: clamp(10px, 1.2vw, 12px);
    border-collapse: collapse;
    font-family: inherit;
}

    .gridview th, table th {
        font-weight: bold;
        font-size: inherit;
        text-align: center;
        background-color: #4f46e5; /* Indigo-600 */
        color: white;
        padding: 8px;
        font-family: inherit;
    }

    .gridview td, table td {
        padding: 8px;
        text-align: center;
        border: 1px solid #ccc;
        font-size: inherit;
        font-family: inherit;
    }

    /* === GridView Controls === */
    .gridview input,
    .gridview select,
    .gridview button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-family: inherit;
    }

    .gridview button {
        padding: 5px 10px;
        border-radius: 5px;
    }

/* Multiselect im GridView */
.grid-multiselect {
    width: 100%;
    min-height: 120px;
}

/* === create Button === */
.add-button {
    background-color: #4f46e5 !important; /* Indigo-600 */
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    display: inline-block;
    width: 150px !important;
    margin-bottom: 20px;
}

    .add-button:hover {
        background-color: #6366f1 !important; /* Indigo-500 */
    }

/* === Login Button === */
.login-button {
    background-color: #4f46e5 !important; /* Indigo-600 */
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    display: inline-block;
    width: auto !important;
}

    .login-button:hover {
        background-color: #6366f1 !important; /* Indigo-500 */
    }

/* === Login Box === */
.login-box {
    max-width: 320px;
    margin: 100px auto;
    font-family: inherit;
}

/* Inputs / Buttons / Selects überall */
input, button, select {
    width: 100%;
    margin-bottom: 10px;
    font-family: inherit;
    box-sizing: border-box;
}

/* === Responsive Design === */
@media (max-width: 1024px) {
    .content {
        padding: 10px;
    }

    table, .gridview {
        width: 100%;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .menu {
        flex-direction: column;
    }

    table, .gridview {
        font-size: 12px;
    }
}

/* === Pager === */
.custom-pager {
    text-align: center;
    margin: 10px 0;
    font-family: inherit;
}

    .custom-pager a {
        display: inline-block;
        padding: 5px 10px;
        margin: 0 2px;
        background-color: #4f46e5; /* Indigo-600 */
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-family: inherit;
    }

        .custom-pager a:hover {
            background-color: #6366f1; /* Indigo-500 */
        }

        .custom-pager a.disabled {
            background-color: #ccc;
            pointer-events: none;
            cursor: default;
        }

/* GridView Header */
.gridview th {
    background-color: #4f46e5; /* Indigo-600 */
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    font-family: inherit;
}

    .gridview th a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
        width: 100%;
        font-family: inherit;
    }

        .gridview th a:hover {
            text-decoration: underline;
        }

/* === Page Size Dropdown === */
.page-size-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 15px auto;
    font-family: inherit;
}

    .page-size-container label {
        flex: 0 0 auto;
        text-align: center;
        font-family: inherit;
    }

.page-size-dropdown {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-family: inherit;
    flex: 0 0 auto;
    min-width: 60px;
}

/* === Search Control === */
.search-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 15px;
    width: 100%;
    flex-wrap: nowrap;
    box-sizing: border-box;
    font-family: inherit;
}

.search-box {
    flex: 1 1 auto;
    min-width: 150px;
    padding: 6px 10px;
    box-sizing: border-box;
    font-family: inherit;
}

.search-button {
    width: 250px;
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    background-color: #4f46e5; /* Indigo-600 */
    color: white;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

    .search-button:hover {
        background-color: #6366f1; /* Indigo-500 */
    }

/* === Inputs / Buttons im GridView responsive sichern === */
.gridview input,
.gridview select,
.gridview button {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

/* ============================= */
/* === Modern Login Styling ==== */
/* ============================= */

.login-box {
    max-width: 380px;
    margin: 120px auto;
    padding: 40px 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: left;
}

    .login-box h2 {
        text-align: center;
        margin-bottom: 25px;
        font-size: 22px;
        font-weight: 600;
        color: #111827;
    }

    .login-box img {
        display: block;
        margin: 0 auto 20px auto;
        max-width: 180px;
    }

    /* Labels */
    .login-box label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 6px;
        color: #374151;
    }

    /* Textbox Styling */
    .login-box input[type="text"],
    .login-box input[type="password"],
    .login-box input[type="email"],
    .login-box input {
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background-color: #ffffff;
        font-size: 14px;
        transition: all 0.2s ease;
        margin-bottom: 18px;
    }

        /* Focus Effekt wie Tailwind */
        .login-box input:focus {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
        }

    /* Login Button Full Width */
    .login-box .login-button {
        width: 100% !important;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 8px;
        margin-top: 10px;
    }

/* Error Message */
.error {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: #dc2626; /* red-600 */
    text-align: center;
}