/* =====================================================
   GLOBAL
===================================================== */

*,
*::before,
*::after {
    box-sizing:border-box;
}


html,
body {

    width:100%;
    min-height:100vh;

    margin:0;
    padding:0;

    background:#0a0a0a;

    color:white;

    font-family:
            'Segoe UI',
            Tahoma,
            Geneva,
            Verdana,
            sans-serif;

    overflow-x:hidden;

}


body {

    padding:20px;

}


/* =====================================================
   CONTAINER
===================================================== */


.container {

    width:100%;

    max-width:1100px;

    margin:40px auto;

    padding:20px;

}



/* =====================================================
   HEADINGS
===================================================== */


h1,
h2,
h3,
h4 {

    color:#ff0033;

    text-align:center;

    margin-bottom:25px;

}



/* =====================================================
   LOGO
===================================================== */


.logo {

    display:block;

    max-width:200px;

    margin:0 auto 30px;

}



/* =====================================================
   BUTTONS
===================================================== */


.button,
button,
input[type="submit"] {


    display:inline-block;

    background:#ff0033;

    color:white;


    padding:12px 20px;


    border:none;

    border-radius:10px;


    text-decoration:none;


    font-size:1rem;

    font-weight:bold;


    cursor:pointer;


    transition:.2s;


}



.button:hover,
button:hover,
input[type="submit"]:hover {


    background:#cc002a;

    transform:translateY(-2px);

}



.button-danger {

    background:#990000;

}


.button-danger:hover {

    background:#cc0000;

}



/* =====================================================
   CARDS
===================================================== */


.card {


    background:#151515;

    border:1px solid #292929;


    border-radius:18px;


    padding:25px;


    margin-bottom:25px;


    box-shadow:
            0 10px 25px rgba(0,0,0,.35);


}



.card-header {


    display:flex;

    justify-content:space-between;

    align-items:center;


    margin-bottom:20px;


}



.card-title {


    color:#ff0033;

    font-size:1.3rem;

    font-weight:bold;


}



/* =====================================================
   DASHBOARD KACHELN
===================================================== */


.button-grid {


    display:grid;


    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));


    gap:25px;


    margin-top:30px;


}



.dashboard-card {


    background:
            linear-gradient(
                    145deg,
                    #181818,
                    #252525
            );


    border:1px solid #333;


    border-radius:18px;


    min-height:160px;


    padding:25px;


    color:white;


    text-decoration:none;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


    box-shadow:
            0 10px 25px rgba(0,0,0,.45);


    transition:.2s;


}



.dashboard-card:hover {


    transform:translateY(-6px);


    border-color:#ff0033;


}



.dashboard-icon {


    font-size:42px;


    margin-bottom:15px;


}



.dashboard-title {


    font-size:1.25rem;


    font-weight:bold;


    margin-bottom:8px;


}



.dashboard-desc {


    color:#aaa;


    font-size:.9rem;


}



/* =====================================================
   FORMULARE
===================================================== */


.form-grid {


    display:grid;


    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));


    gap:20px;


}



.form-group {


    display:flex;

    flex-direction:column;


    margin-bottom:20px;


}



label {


    color:#aaa;

    margin-bottom:6px;

    font-size:.9rem;


}



input,
select,
textarea {


    width:100%;


    background:#202020;


    color:white;


    border:1px solid #333;


    border-radius:10px;


    padding:12px;


    font-size:1rem;


}



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


    outline:none;


    border-color:#ff0033;


}



/* =====================================================
   INFO BOXEN
===================================================== */


.info-box {


    background:#25000a;


    border:1px solid #ff0033;


    color:#ff0033;


    padding:15px;


    border-radius:10px;


    margin-bottom:20px;


    font-weight:bold;


}



/* =====================================================
   BADGES
===================================================== */


.badge {


    display:inline-block;


    padding:6px 12px;


    border-radius:20px;


    background:#222;


    color:#ccc;


    font-size:.85rem;


}



/* =====================================================
   TABLES
===================================================== */


table {


    width:100%;


    border-collapse:collapse;


    background:#151515;


    border-radius:12px;


    overflow:hidden;


}



th {


    background:#222;


    color:#ff0033;


}



th,
td {


    padding:14px;


    border-bottom:1px solid #333;


    text-align:left;


}



/* =====================================================
   STATUS
===================================================== */


.status-offen {
    color:white;
}


.status-entwurf,
.status-storniert {

    color:gray;

}


.status-teilweise_bezahlt {

    color:#f1c40f;

}


.status-bezahlt {

    color:#1aff1a;

}


.status-ueberfaellig {

    color:red;

}



/* =====================================================
   LOGIN
===================================================== */


.login-box {


    max-width:380px;


    margin:80px auto;


    background:#121212;


    padding:40px 30px;


    border-radius:15px;


    box-shadow:
            0 10px 30px rgba(255,0,51,.3);


    text-align:center;


}



/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:768px){


    body {

        padding:10px;

    }


    .container {

        padding:10px;

    }



    .button-grid {


        grid-template-columns:1fr;


    }



    .button,
    button,
    input[type="submit"] {


        width:100%;

        text-align:center;


    }



    .card {

        padding:18px;

    }



    table {

        display:block;

        overflow-x:auto;

    }


}

/* =====================================
   DASHBOARD KARTEN
===================================== */


.button-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

    width:100%;

    max-width:1000px;

    margin:30px auto;

}



.dashboard-card {

    background:
            linear-gradient(
                    145deg,
                    #181818,
                    #252525
            );

    border:1px solid #333;

    border-radius:18px;

    min-height:160px;

    padding:25px;

    color:white;

    text-decoration:none;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;


    box-shadow:
            0 10px 25px rgba(0,0,0,.45);


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

}



.dashboard-card:hover {

    transform:translateY(-6px);

    border-color:#ff0033;

    background:
            linear-gradient(
                    145deg,
                    #222,
                    #33000a
            );

}



.dashboard-icon {

    font-size:42px;

    margin-bottom:15px;

}



.dashboard-title {

    font-size:1.25rem;

    font-weight:bold;

    color:white;

    margin-bottom:8px;

}



.dashboard-desc {

    color:#aaa;

    font-size:.9rem;

}



@media(max-width:768px){

    .button-grid {

        grid-template-columns:1fr;

    }

}

/* =====================================
   STATISTIK DASHBOARD
===================================== */


.stats-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin:30px 0;

}



.stat-card {


    background:
            linear-gradient(
                    145deg,
                    #181818,
                    #252525
            );


    border:1px solid #333;

    border-radius:18px;

    padding:25px;


    text-align:center;


    box-shadow:
            0 10px 25px rgba(0,0,0,.45);


    transition:.2s;


}



.stat-card:hover {

    transform:translateY(-5px);

    border-color:#ff0033;

}



.stat-icon {

    font-size:42px;

    margin-bottom:15px;

}



.stat-title {

    color:#aaa;

    font-size:.95rem;

    margin-bottom:10px;

}



.stat-value {

    font-size:1.8rem;

    font-weight:bold;

    color:white;

}



.money {

    color:#1aff1a;

}



.profit {

    color:#00d9ff;

}




/* Statistik Bereiche */


.section-box {

    background:#151515;

    border:1px solid #292929;

    border-radius:18px;

    padding:25px;

    margin-top:30px;

    box-shadow:
            0 10px 25px rgba(0,0,0,.35);

}



.section-box h2 {

    margin-top:0;

}



.table-wrapper {

    overflow-x:auto;

}


/* =====================================================
   ZENTRALE UI-KOMPONENTEN
===================================================== */

:root {
    --ui-surface: #171717;
    --ui-surface-2: #232323;
    --ui-border: #363636;
    --ui-text: #ffffff;
    --ui-muted: #b5b5b5;
    --ui-accent: #ff0033;
    --ui-danger: #ef4444;
    --ui-warning: #f59e0b;
    --ui-success: #22c55e;
}

body.auth-screen {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-card,
.login-box,
.not-found-box,
.ui-error-card {
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface), var(--ui-surface-2));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .48);
    text-align: center;
}

.brand-logo-frame {
    display: flex;
    width: 100%;
    min-height: var(--dashboard-logo-height, 110px);
    margin: 0 0 var(--dashboard-logo-gap, 22px);
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand-logo-frame.is-left { justify-content: flex-start; }
.brand-logo-frame.is-right { justify-content: flex-end; }

.brand-logo-frame img,
.brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: min(var(--dashboard-logo-width, 280px), 100%);
    max-height: var(--dashboard-logo-height, 110px);
    margin: 0;
    object-fit: contain;
    object-position: center;
}

.button-secondary {
    background: #444 !important;
}

.ui-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    padding: 18px;
    place-items: center;
    background: rgba(0, 0, 0, .76);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    backdrop-filter: blur(5px);
}

.ui-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ui-modal-dialog {
    width: min(520px, 100%);
    padding: 26px;
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--ui-surface), var(--ui-surface-2));
    color: var(--ui-text);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .62);
    text-align: center;
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
}

.ui-modal-overlay.is-open .ui-modal-dialog {
    transform: translateY(0) scale(1);
}

.ui-modal-icon,
.ui-error-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    place-items: center;
    background: color-mix(in srgb, var(--ui-danger) 20%, transparent);
    color: var(--ui-danger);
    font-size: 2rem;
    font-weight: 900;
}

.ui-success .ui-modal-icon {
    background: color-mix(in srgb, var(--ui-success) 20%, transparent);
    color: var(--ui-success);
}

.ui-warning .ui-modal-icon {
    background: color-mix(in srgb, var(--ui-warning) 20%, transparent);
    color: var(--ui-warning);
}

.ui-info .ui-modal-icon {
    background: rgba(59, 130, 246, .18);
    color: #60a5fa;
}

.ui-modal-dialog h2,
.ui-error-card h1 {
    margin: 0 0 12px;
    color: var(--ui-text);
    text-align: center;
}

.ui-modal-message,
.ui-error-card p {
    margin: 0;
    color: var(--ui-muted);
    line-height: 1.55;
    white-space: pre-line;
}

.ui-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.ui-error-page {
    width: 100%;
}

.readonly-field {
    padding: 11px 12px;
    border: 1px solid #353535;
    border-radius: 9px;
    background: #0d0d0d;
    color: var(--ui-muted);
}

.field-help {
    color: var(--ui-muted);
    font-size: .86rem;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .auth-card,
    .login-box,
    .not-found-box,
    .ui-error-card,
    .ui-modal-dialog {
        padding: 23px 18px;
    }

    .ui-modal-actions .button,
    .ui-modal-actions button {
        width: 100%;
    }
}

/* =====================================================
   V20 RESPONSIVE BASELINE
   Einheitliche Schutzregeln für Windows-Desktop, Tablets und Mobilgeräte.
   Modul-CSS darf sein eigenes Layout behalten; diese Regeln verhindern nur
   Überläufe, unbedienbare Formulare und zu kleine Touch-Ziele.
===================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; }
img, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
.table-wrapper, .table-scroll, .customer-table-wrap, .responsive-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
.actions, .toolbar, .inline-actions, .page-actions { flex-wrap: wrap; }

@media (max-width: 900px) {
    .container,
    main:not(.chat-messages),
    .page,
    .page-container,
    .content,
    .content-wrapper {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    form { max-width: 100%; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        min-width: 0 !important;
    }
    .grid, .form-grid, .stats-grid, .cards, .button-grid {
        min-width: 0;
    }
}

@media (max-width: 700px) {
    body:not(.dashboard-page) { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
    .actions > a.button,
    .actions > button,
    .page-actions > a.button,
    .page-actions > button {
        min-height: 44px;
    }
    .table-wrapper, .table-scroll { overflow-x: auto !important; }
}

@media (pointer: coarse) {
    a.button, button, input[type="submit"], input[type="button"] { min-height: 44px; }
}

/* V20: Tabellen, die auf Mobilgeräten tatsächlich breiter als ihr Container
   sind und keinen eigenen Scroll-Wrapper besitzen, werden von ui.js in diesen
   neutralen Container gesetzt. Desktop-DOM bleibt unverändert. */
.ui-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
}
.ui-table-scroll > table { margin-left: 0; margin-right: 0; }