/* ============================================================
   TIPNIX MODERN UI
   ============================================================ */

:root {
    --tn-bg: #f6f7f9;
    --tn-surface: #ffffff;
    --tn-surface-soft: #f9fafb;
    --tn-text: #17191c;
    --tn-muted: #6c727c;
    --tn-border: #e7e9ed;
    --tn-border-strong: #d9dde3;

    --tn-primary: #15171a;
    --tn-primary-hover: #292c31;
    --tn-primary-text: #ffffff;

    --tn-success: #16794b;
    --tn-success-bg: #edf8f2;

    --tn-warning: #9a6510;
    --tn-warning-bg: #fff8e8;

    --tn-danger: #b42318;
    --tn-danger-bg: #fff1f0;

    --tn-radius-sm: 8px;
    --tn-radius: 12px;
    --tn-radius-lg: 18px;

    --tn-shadow:
        0 1px 2px rgba(16, 24, 40, .03),
        0 4px 14px rgba(16, 24, 40, .04);

    --tn-shadow-hover:
        0 2px 4px rgba(16, 24, 40, .04),
        0 10px 26px rgba(16, 24, 40, .08);

    --tn-container: 1180px;
}


/* ------------------------------------------------------------
   RESET / GRUNDLAYOUT
   ------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--tn-bg);
    color: var(--tn-text);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    width: min(
        calc(100% - 32px),
        var(--tn-container)
    );
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 48px;
}

.container {
    width: min(
        calc(100% - 32px),
        var(--tn-container)
    );
    margin-left: auto;
    margin-right: auto;
}

a {
    color: inherit;
    text-underline-offset: 3px;
}

img {
    max-width: 100%;
}


/* ------------------------------------------------------------
   TYPOGRAFIE
   ------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
    color: var(--tn-text);
    line-height: 1.2;
    letter-spacing: -.025em;
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: clamp(
        28px,
        4vw,
        38px
    );
    font-weight: 750;
}

h2 {
    margin-top: 0;
    font-size: 22px;
    font-weight: 700;
}

h3 {
    font-size: 17px;
    font-weight: 680;
}

p {
    margin-top: 0;
    margin-bottom: 16px;
}

small,
.muted {
    color: var(--tn-muted);
}


/* ------------------------------------------------------------
   NAVIGATION / HEADER
   ------------------------------------------------------------ */

header,
nav,
.navbar,
.topbar,
.site-header {
    background: rgba(
        255,
        255,
        255,
        .94
    );
    border-bottom:
        1px solid
        var(--tn-border);
}

header {
    position: relative;
    z-index: 20;
}

nav,
.navbar,
.topbar {
    min-height: 64px;
}

nav a,
.navbar a,
.topbar a {
    text-decoration: none;
}

nav a:hover,
.navbar a:hover,
.topbar a:hover {
    opacity: .72;
}

.brand,
.logo,
.nav-brand,
.navbar-brand {
    font-weight: 800;
    letter-spacing: -.035em;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.card {
    background: var(--tn-surface);
    border:
        1px solid
        var(--tn-border);
    border-radius: var(--tn-radius-lg);
    padding: 24px;
    box-shadow: var(--tn-shadow);
}

.card + .card {
    margin-top: 18px;
}

.card:hover {
    border-color:
        var(--tn-border-strong);
}

.narrow {
    width: min(
        100%,
        520px
    );
    margin-left: auto;
    margin-right: auto;
}

.two-col {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );
    gap: 20px;
    align-items: start;
}

.grid,
.cards {
    gap: 18px;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

button,
.button,
.btn,
input[type="submit"] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;

    border:
        1px solid
        var(--tn-border-strong);
    border-radius: 10px;

    padding: 9px 16px;

    background: var(--tn-surface);
    color: var(--tn-text);

    font: inherit;
    font-weight: 650;

    text-decoration: none;
    cursor: pointer;

    transition:
        transform .12s ease,
        box-shadow .15s ease,
        background-color .15s ease,
        border-color .15s ease;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover {
    background: var(--tn-surface-soft);
    border-color: #c9ced6;
}

button:active,
.button:active,
.btn:active,
input[type="submit"]:active {
    transform: translateY(1px);
}

button.primary,
.button.primary,
.btn-primary,
input[type="submit"].primary {
    background: var(--tn-primary);
    color: var(--tn-primary-text);
    border-color: var(--tn-primary);
}

button.primary:hover,
.button.primary:hover,
.btn-primary:hover,
input[type="submit"].primary:hover {
    background: var(--tn-primary-hover);
    border-color: var(--tn-primary-hover);
}

button.danger,
.button.danger,
.btn-danger {
    background: var(--tn-danger-bg);
    border-color: #fecaca;
    color: var(--tn-danger);
}


/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

form {
    margin: 0;
}

label {
    display: block;
    margin-bottom: 16px;
    color: #383d44;
    font-size: 14px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 7px;

    border:
        1px solid
        var(--tn-border-strong);
    border-radius: 10px;

    background: var(--tn-surface);
    color: var(--tn-text);

    padding: 11px 12px;

    font: inherit;
    font-weight: 450;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #bec3cb;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #868d98;
    box-shadow:
        0 0 0 3px
        rgba(
            30,
            35,
            40,
            .08
        );
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-top: 0;
    accent-color: var(--tn-primary);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}


/* ------------------------------------------------------------
   MELDUNGEN / FLASH
   ------------------------------------------------------------ */

.flash,
.alert,
.message,
.inline-warning {
    border-radius: var(--tn-radius);
    padding: 13px 15px;
    margin-bottom: 16px;
    border:
        1px solid
        var(--tn-border);
    background: var(--tn-surface-soft);
}

.flash.success,
.alert-success {
    color: var(--tn-success);
    background: var(--tn-success-bg);
    border-color: #bfe8d1;
}

.flash.error,
.flash.danger,
.alert-danger {
    color: var(--tn-danger);
    background: var(--tn-danger-bg);
    border-color: #fecaca;
}

.flash.warning,
.alert-warning,
.inline-warning {
    color: #704b0b;
    background: var(--tn-warning-bg);
    border-color: #f5dfaa;
}


/* ------------------------------------------------------------
   TABELLEN
   ------------------------------------------------------------ */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border:
        1px solid
        var(--tn-border);
    border-radius: var(--tn-radius);
    background: var(--tn-surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

th {
    padding: 12px 14px;
    border-bottom:
        1px solid
        var(--tn-border);

    color: var(--tn-muted);
    background: #fafafa;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
    text-align: left;
}

td {
    padding: 14px;
    border-bottom:
        1px solid
        var(--tn-border);
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover {
    background: #fafbfc;
}


/* ------------------------------------------------------------
   OPTIONEN / WETTEN
   ------------------------------------------------------------ */

.option,
.bet-option,
.market-option,
.choice {
    border:
        1px solid
        var(--tn-border);
    border-radius: var(--tn-radius);

    background: var(--tn-surface);

    padding: 15px 16px;
    margin-bottom: 10px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.option:hover,
.bet-option:hover,
.market-option:hover,
.choice:hover {
    border-color: #c9ced6;
    box-shadow:
        0 5px 18px
        rgba(
            16,
            24,
            40,
            .05
        );
}

.option strong,
.bet-option strong,
.market-option strong {
    font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   BADGES / STATUS
   ------------------------------------------------------------ */

.badge,
.status,
.tag,
.pill {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    border-radius: 999px;

    padding: 3px 9px;

    background: #f0f1f3;
    color: #454b54;

    font-size: 12px;
    font-weight: 700;
}

.status.open,
.badge.success,
.badge.active {
    background: var(--tn-success-bg);
    color: var(--tn-success);
}

.status.closed,
.status.cancelled,
.badge.danger {
    background: var(--tn-danger-bg);
    color: var(--tn-danger);
}


/* ------------------------------------------------------------
   STATISTIK / KPIs
   ------------------------------------------------------------ */

.stat,
.stat-card,
.kpi {
    padding: 18px;
    border:
        1px solid
        var(--tn-border);
    border-radius: var(--tn-radius);
    background: var(--tn-surface);
}

.stat strong,
.stat-card strong,
.kpi strong,
.stat-value {
    display: block;
    margin-top: 4px;

    color: var(--tn-text);

    font-size: 24px;
    font-weight: 760;
    letter-spacing: -.025em;

    font-variant-numeric: tabular-nums;
}

.stats,
.stat-grid,
.kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                150px,
                1fr
            )
        );
    gap: 12px;
}


/* ------------------------------------------------------------
   TRENNLINIEN / LISTEN
   ------------------------------------------------------------ */

hr {
    margin: 24px 0;
    border: 0;
    border-top:
        1px solid
        var(--tn-border);
}

ul,
ol {
    padding-left: 20px;
}


/* ------------------------------------------------------------
   AKTIONEN
   ------------------------------------------------------------ */

.actions,
.button-row,
.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}


/* ------------------------------------------------------------
   DASHBOARD
   ------------------------------------------------------------ */

.dashboard-header,
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.dashboard-header h1,
.page-header h1 {
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   LOGIN / ACCOUNT
   ------------------------------------------------------------ */

body:has(.narrow) main {
    padding-top: 46px;
}

.narrow.card {
    padding: 30px;
}


/* ------------------------------------------------------------
   LEGAL
   ------------------------------------------------------------ */

.legal-page {
    max-width: 860px;
}

.legal-card {
    padding: clamp(
        24px,
        5vw,
        44px
    );
}

.legal-card h2 {
    margin-top: 34px;
    margin-bottom: 12px;
}

.legal-card p,
.legal-card li {
    color: #484e57;
}

.legal-footer {
    margin-top: 48px;
    background: var(--tn-surface);
    border-top:
        1px solid
        var(--tn-border);
    color: var(--tn-muted);
}

.legal-footer-inner {
    width: min(
        calc(100% - 32px),
        var(--tn-container)
    );
    margin: 0 auto;
    padding: 22px 0;
}

.legal-footer a {
    color: #484e57;
    font-weight: 600;
}


/* ------------------------------------------------------------
   SCROLLBAR
   ------------------------------------------------------------ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cdd1d7;
    border-radius: 999px;
    border: 3px solid var(--tn-bg);
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (
    max-width: 800px
) {
    main {
        width: min(
            calc(100% - 22px),
            var(--tn-container)
        );
        padding-top: 20px;
        padding-bottom: 32px;
    }

    .container {
        width: min(
            calc(100% - 22px),
            var(--tn-container)
        );
    }

    .card {
        padding: 18px;
        border-radius: 15px;
    }

    .narrow.card {
        padding: 21px;
    }

    .two-col {
        grid-template-columns: 1fr;
    }

    .dashboard-header,
    .page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-header .actions,
    .page-header .actions {
        width: 100%;
    }

    .dashboard-header .actions > *,
    .page-header .actions > * {
        flex: 1;
    }

    button,
    .button,
    .btn,
    input[type="submit"] {
        min-height: 44px;
    }

    .table-wrap {
        border-radius: 10px;
    }

    th,
    td {
        padding: 11px;
        white-space: nowrap;
    }

    .legal-footer-inner {
        width: min(
            calc(100% - 22px),
            var(--tn-container)
        );
    }
}


/* ------------------------------------------------------------
   SEHR KLEINE DISPLAYS
   ------------------------------------------------------------ */

@media (
    max-width: 480px
) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 27px;
    }

    h2 {
        font-size: 20px;
    }

    .card {
        padding: 16px;
    }

    .actions,
    .button-row,
    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .actions > *,
    .button-row > *,
    .form-actions > * {
        width: 100%;
    }

    .legal-consent {
        padding: 13px;
    }
}