html,
body {

    margin: 0;
    padding: 0;
    min-height: 100%;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at top left,
            #334155 0%,
            #0f172a 45%,
            #020617 100%
        );

    background-attachment:
        fixed;

    color:
        #f8fafc;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar {

    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {

    background:
        rgba(255,255,255,0.05);
}

::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,0.18);

    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {

    background:
        rgba(255,255,255,0.28);
}

/*
|--------------------------------------------------------------------------
| Glass Cards
|--------------------------------------------------------------------------
*/

.glass-card {

    background:
        rgba(15, 23, 42, 0.72);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 10px 40px rgba(0,0,0,0.45);
}

/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

input,
textarea,
select {

    width: 100%;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid rgba(255,255,255,0.08);

    color:
        #f8fafc;

    outline: none;

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

input::placeholder,
textarea::placeholder {

    color:
        rgba(255,255,255,0.35);
}

input:focus,
textarea:focus,
select:focus {

    border-color:
        rgba(96,165,250,0.8);

    box-shadow:
        0 0 0 4px rgba(59,130,246,0.15);

    background:
        rgba(255,255,255,0.09);
}

/*
|--------------------------------------------------------------------------
| Tabellen
|--------------------------------------------------------------------------
*/

table {

    border-collapse:
        separate;

    border-spacing:
        0 10px;
}

thead th {

    color:
        rgba(255,255,255,0.72);

    font-size:
        11px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

tbody tr {

    background:
        rgba(255,255,255,0.04);

    transition:
        background-color .15s ease,
        transform .15s ease;
}

tbody tr:nth-child(even) {

    background:
        rgba(255,255,255,0.07);
}

tbody tr:hover {

    background:
        rgba(255,255,255,0.12);

    transform:
        translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| Zusatzprodukte
|--------------------------------------------------------------------------
*/

tbody tr.product-row {

    background:
        rgba(255,255,255,0.015) !important;

    border-left:
        3px solid rgba(255,255,255,0.08);
}

tbody tr.product-row:nth-child(even) {

    background:
        rgba(255,255,255,0.03) !important;
}

tbody tr.product-row:hover {

    background:
        rgba(255,255,255,0.06) !important;

    transform:
        translateY(-1px);
}

tbody tr.product-row td {

    border-top:
        none !important;

    border-bottom:
        none !important;
}

tbody tr.product-row td:first-child {

    border-left:
        none !important;
}

tbody tr.product-row td:last-child {

    border-right:
        none !important;
}

tbody td {

    border-top:
        1px solid rgba(255,255,255,0.04);

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}

tbody td:first-child {

    border-left:
        1px solid rgba(255,255,255,0.04);

    border-radius:
        18px 0 0 18px;
}

tbody td:last-child {

    border-right:
        1px solid rgba(255,255,255,0.04);

    border-radius:
        0 18px 18px 0;
}

/*
|--------------------------------------------------------------------------
| Inline Editing
|--------------------------------------------------------------------------
*/

.inline-display {

    transition:
        background-color .15s ease;
}

.inline-display:hover {

    background:
        rgba(255,255,255,0.08);
}

.inline-editor {

    background:
        rgba(15,23,42,0.95) !important;

    color:
        #fff !important;

    border:
        1px solid rgba(96,165,250,0.5) !important;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

button,
a {

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

button:hover,
a:hover {

    transform:
        translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| Datumswarnungen
|--------------------------------------------------------------------------
*/

.date-warning {

    background:
        rgba(245, 158, 11, 0.18) !important;

    border:
        1px solid rgba(251, 191, 36, 0.35);

    color:
        #fde68a !important;

    box-shadow:
        inset 0 0 0 1px rgba(251, 191, 36, 0.08);
}

.date-danger {

    background:
        rgba(239, 68, 68, 0.18) !important;

    border:
        1px solid rgba(248, 113, 113, 0.35);

    color:
        #fecaca !important;

    box-shadow:
        inset 0 0 0 1px rgba(248, 113, 113, 0.08);
}