/* ================================
   GLOBAL
================================ */
body {
    background-color: white;
}

body,
p,
label,
input,
button,
.btn {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

.btn {
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: .02em;
}

/* ================================
   LABELS
================================ */
label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #555;
}

#gjs label {
    font-size: unset;
    font-weight: unset;
    color: unset;
}

/* ================================
   PRIMARY BUTTON – SaaS Style (Option A)
   exakt wie index.php
================================ */
.btn-primary {
    /* exakt gleiche Farben wie Public */
    --btn-grad-1: #3b5bfd;
    --btn-grad-2: #5b7cfa;
    --btn-ring: rgba(59, 91, 253, 0.45);

    background: linear-gradient(135deg,
            var(--btn-grad-1),
            var(--btn-grad-2));
    border: none;
    border-radius: 999px;

    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.2px;

    padding: 0.65rem 1.5rem;
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    box-shadow:
        0 14px 38px rgba(59, 91, 253, 0.28);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;
    transform: translateY(-2px);
    filter: saturate(1.08);

    box-shadow:
        0 22px 55px rgba(59, 91, 253, 0.38);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow:
        0 10px 28px rgba(59, 91, 253, 0.30);
}

.btn-primary:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 4px var(--btn-ring),
        0 22px 55px rgba(59, 91, 253, 0.38);
}

.btn-primary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ================================
   SECONDARY BUTTON – Dark / Ghost
================================ */
.btn-secondary {
    background: rgba(0, 0, 0, .85);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.6rem 1.4rem;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .15);

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: #000000;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 14px 35px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, .30),
        inset 0 2px 6px rgba(0, 0, 0, .25);
}

/* ================================
   OPTIONAL: GHOST BUTTON
================================ */
.btn-outline-secondary {
    background: transparent;
    color: #444;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 999px;
    font-weight: 600;
    padding: 0.55rem 1.2rem;
    transition: all .2s ease;
}

.btn-outline-secondary:hover {
    background: rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .35);
}

/* ================================
   PAGINATION (unchanged, slight polish)
================================ */
.pagination {
    --bs-pagination-active-bg: #000000;
}

.active>.page-link,
.page-link.active {
    background-color: #000000;
    border-color: #000000;
}

.page-link {
    font-size: 12px;
    color: #000000;
}

/* ================================
   TABLE CLEANUP
================================ */
.table td,
.table th {
    border-left: none !important;
    border-right: none !important;
}

/* =========================================
   FIX: Link-Buttons behalten weiße Schrift
========================================= */

/* Grundzustand */
a.btn-cta,
a.btn-ghost {
    color: #fff;
}

/* Hover / Focus / Active */
a.btn-cta:hover,
a.btn-cta:focus,
a.btn-cta:active,
a.btn-ghost:hover,
a.btn-ghost:focus,
a.btn-ghost:active {
    color: #fff;
    text-decoration: none;
}

.btn-cta,
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active {
    color: #fff;
}

.btn-cta {
    color: #fff;
}

.btn-cta * {
    color: inherit;
}