/* =========================================================
   TSL – TRANSPORT SERVICE LEMKE
   ULTRA PREMIUM ADMIN THEME V4
   Complete High-End SaaS Layout
   Author: ChatGPT High-End Build
========================================================= */

/* =========================================================
   1. GLOBAL RESET & BASE
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    color: #e5e7eb;
    overflow-x: hidden;
}

/* Background Glass */
body {
    background-image: url('/img/lkw-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(10, 20, 40, 0.55);
        backdrop-filter: blur(4px);
        z-index: -1;
    }

/* Main content area (under topbar) */
.content {
    padding: 120px 40px 60px 40px;
}

.page-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 60px; /* vorher 40px */
    letter-spacing: 0.5px;
    text-shadow: 0 0 18px rgba(0,255,255,.35);
}



/* =========================================================
   2. TOPBAR NAVIGATION (ULTRA PREMIUM)
========================================================= */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    background: rgba(5, 15, 30, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,255,255,0.18);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 9999;
}

.topbar-logo {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(0,255,255,0.55);
}

/* Navigation Buttons */
.topbar-nav a,
.header-formglas-btn {
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e5e7eb;
    font-weight: 600;
    font-size: 1.05rem;
    backdrop-filter: blur(16px);
    transition: .25s ease;
}

    .topbar-nav a:hover {
        background: rgba(255,255,255,0.20);
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0,255,255,0.4);
    }

.logout-btn {
    background: rgba(255,50,50,0.15) !important;
    border-color: rgba(255,50,50,0.30) !important;
}

    .logout-btn:hover {
        background: rgba(255,50,50,0.25) !important;
        box-shadow: 0 0 18px rgba(255,80,80,0.55);
    }


/* =========================================================
   3. LOGIN ULTRA PREMIUM HIGH-END V4
========================================================= */

.login-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    width: 480px;
    padding: 45px 40px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(18px);
    text-align: center;
    box-shadow: 0 0 45px rgba(0,0,0,0.55);
    animation: fadeIn .6s ease-out;
}

.login-title {
    font-size: 2.3rem;
    font-weight: 800;
    margin-bottom: 28px;
    color: white;
    text-shadow: 0 0 15px rgba(255,255,255,0.35);
}

.login-input {
    width: 100%;
    padding: 15px 14px;
    margin-bottom: 20px;
    font-size: 1.2rem;
    background: rgba(255,255,255,0.22);
    border-radius: 12px;
    border: none;
    outline: none;
    color: white;
}

    .login-input::placeholder {
        color: #dbeafe;
    }

.login-button {
    width: 100%;
    padding: 14px;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    background: linear-gradient(90deg, #0ea5e9, #22d3ee);
    color: white;
    cursor: pointer;
    transition: .25s ease;
}

    .login-button:hover {
        transform: translateY(-3px);
        opacity: .90;
    }

.login-error {
    color: #f87171;
    margin-top: 10px;
}

/* Fade-In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================================
   4. ULTRA PREMIUM TOOLBAR / ACTIONBAR (ORDERS)
========================================================= */

.order-topbar-ultra {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(22px);
    padding: 28px 32px; /* vorher 22px 28px */
    margin-top: 20px; /* vorher 10px */
    margin-bottom: 45px; /* vorher 35px */
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: 0 14px 45px rgba(0,0,0,0.50);
}
    .order-topbar-ultra::after {
        content: "";
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: -18px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(34,211,238,0.6), transparent );
    }


.left-stack,
.right-stack {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}


/* =========================================================
   5. ULTRA BUTTONS
========================================================= */

.btn-ultra {
    padding: 12px 20px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .25s ease;
}

.btn-create {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    color: white;
    box-shadow: 0 0 20px rgba(56,189,248,0.35);
}

    .btn-create:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(56,189,248,0.55);
    }

.btn-export {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
}

    .btn-export:hover {
        background: rgba(255,255,255,0.25);
    }


/* =========================================================
   6. SEARCHBAR ULTRA V4
========================================================= */

.search-ultra {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 10px 14px;
    width: 320px;
    border-radius: 14px;
    backdrop-filter: blur(14px);
    transition: .25s ease;
}

    .search-ultra:hover {
        background: rgba(255,255,255,0.18);
        box-shadow: 0 0 18px rgba(34,211,238,0.35);
    }

    .search-ultra input {
        background: transparent;
        border: none;
        outline: none;
        width: 100%;
        color: white;
        font-size: .95rem;
        letter-spacing: .3px;
    }


/* =========================================================
   7. CHIP GROUPS ULTRA PREMIUM V4
========================================================= */

.tsl-chip-group,
.chip-ultra-group {
    display: flex;
    align-items: center;
    gap: 16px; /* vorher 12px */
}


.tsl-chip,
.chip-ultra {
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    color: white;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
    transition: .25s ease;
    gap: 14px;
}

    .tsl-chip:hover,
    .chip-ultra:hover {
        background: rgba(255,255,255,0.20);
        box-shadow: 0 0 14px rgba(34,211,238,0.35);
        transform: translateY(-2px);
    }

    .tsl-chip.active,
    .chip-ultra.active {
        background: linear-gradient(90deg, #22d3ee, #0ea5e9);
        border: none;
        box-shadow: 0 0 14px rgba(34,211,238,0.6);
    }


/* =========================================================
   8. COLUMN TOGGLE – CHECKBOX BAR V4
   (Einheitlicher Stil wie Tabelle)
========================================================= */

.tsl-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    background: rgba(255,255,255,0.08);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.20);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.45);
}

    .tsl-chip-bar .tsl-chip {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border-radius: 14px;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.22);
    }

    .tsl-chip-bar input[type="checkbox"] {
        transform: scale(1.25);
        accent-color: #22d3ee;
        cursor: pointer;
    }


/* =========================================================
   9. TABLE ULTRA V4 – GRADIENT FRAME + SHADOW
========================================================= */

.table-glass {
    margin-top: 35px; /* vorher 25px */
    background: rgba(255,255,255,0.10);
    border-radius: 24px;
    padding: 28px; /* leicht mehr Luft */
    border: 1px solid rgba(255,255,255,0.22);
    border-image: linear-gradient( 120deg, rgba(34,211,238,0.35), rgba(14,165,233,0.18) ) 1;
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 55px rgba(0,0,0,0.55);
    overflow: hidden;
}


.table-premium {
    width: 100%;
    border-collapse: collapse;
}

    .table-premium thead {
        background: rgba(255,255,255,0.13);
        backdrop-filter: blur(12px);
    }

    .table-premium th {
        padding: 14px 12px;
        font-weight: 700;
        font-size: .95rem;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,0.22);
    }

    .table-premium td {
        padding: 14px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.12);
        transition: .2s ease;
    }

    .table-premium tbody tr:hover {
        background: rgba(255,255,255,0.12);
        box-shadow: inset 0 0 16px rgba(34,211,238,0.40);
        cursor: pointer;
    }


/* =========================================================
   10. INLINE INPUTS / SELECTS WITH TABLE STYLE
========================================================= */

.inline-select,
.status-select {
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.14);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
}

.inline-input {
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
}


/* =========================================================
   11. TRACKING DOT (LIVE STATUS)
========================================================= */

.tracking-dot {
    width: 13px;
    height: 13px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(74,222,128,.8);
}

    .tracking-dot.pulse {
        animation: pulseDot 1s infinite;
    }

@keyframes pulseDot {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: .6;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* =========================================================
   12. FORM CARDS – ULTRA PREMIUM
========================================================= */

.form-card {
    background: rgba(255,255,255,0.10);
    padding: 35px;
    width: 520px;
    border-radius: 22px;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 15px 45px rgba(0,0,0,0.50);
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .form-card input,
    .form-card select,
    .form-card textarea {
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255,255,255,0.14);
        color: white;
        border: 1px solid rgba(255,255,255,0.25);
        outline: none;
        font-size: 1rem;
    }

    .form-card textarea {
        min-height: 120px;
        resize: vertical;
    }

    .form-card button {
        margin-top: 10px;
    }


/* =========================================================
   13. BUTTON SET – GLOBAL
========================================================= */

.btn,
.btn-primary,
.btn-danger,
.btn-secondary {
    padding: 12px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    border: none;
    transition: .25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(90deg, #0ea5e9, #22d3ee);
    color: white;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        opacity: .90;
    }

.btn-danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    color: white;
}

    .btn-danger:hover {
        transform: translateY(-2px);
        opacity: .90;
    }

.btn-secondary {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
}

    .btn-secondary:hover {
        background: rgba(255,255,255,0.28);
    }


/* =========================================================
   14. FOOTER
========================================================= */

.footer {
    margin-top: 50px;
    padding: 28px 0;
    text-align: center;
    font-size: .95rem;
    color: #e5e7eb;
    opacity: .8;
}



/* =========================================================
   15. DASHBOARD – KPI + SECTION DESIGN ULTRA
========================================================= */

.dashboard-container {
    padding-top: 20px;
}

.section-title {
    margin-top: 45px;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 0 14px rgba(255,255,255,0.35);
    letter-spacing: .3px;
}

.kpi-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 32px; /* vorher 28px */
    margin-bottom: 55px; /* vorher 40px */
}


.kpi-card {
    width: 280px;
    padding: 34px 36px;
    border-radius: 22px;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.18), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(16px);
    box-shadow: 0 16px 45px rgba(0,0,0,0.55);
    transition: .25s ease;
}

    .kpi-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 55px rgba(0,0,0,0.65);
    }

    .kpi-card span {
        font-size: .95rem;
        opacity: .8;
    }

    .kpi-card strong {
        display: block;
        margin-top: 8px;
        font-size: 2.2rem;
        font-weight: 800;
    }

.kpi-blue {
    border-left: 5px solid #38bdf8;
}

.kpi-orange {
    border-left: 5px solid #fb923c;
}

.kpi-green {
    border-left: 5px solid #4ade80;
}

.kpi-money {
    border-left: 5px solid #22c55e;
}



/* =========================================================
   16. MOBILE RESPONSIVE ULTRA
========================================================= */

@media (max-width: 1100px) {
    .order-topbar-ultra {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .search-ultra {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .content {
        padding: 100px 20px;
    }

    .page-title {
        font-size: 2rem;
    }

    .table-premium th,
    .table-premium td {
        font-size: .85rem;
        padding: 10px;
    }

    .kpi-card {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 550px) {
    .login-container {
        width: 100%;
        padding: 32px 24px;
    }

    .login-title {
        font-size: 1.5rem;
    }
}
/* =========================================================
   ULTRA-PREMIUM ORDER TOOLBAR (MATCH V4 STYLE)
========================================================= */

.order-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 28px;
}

/* --- Neuer Auftrag Button --- */
.btn-neworder {
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    color: white;
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
    box-shadow: 0 0 22px rgba(56,189,248,0.35);
    transition: .25s ease;
}

    .btn-neworder:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 35px rgba(56,189,248,0.55);
    }

/* --- Filter Buttons als Ultra Chips --- */
.filter-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.filter-btn {
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    color: white;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: .25s ease;
}

    .filter-btn:hover {
        background: rgba(255,255,255,0.20);
        box-shadow: 0 0 14px rgba(34,211,238,0.35);
        transform: translateY(-2px);
    }

    .filter-btn.active {
        background: linear-gradient(90deg, #22d3ee, #0ea5e9);
        border: none;
        box-shadow: 0 0 18px rgba(34,211,238,.6);
    }

/* --- Searchbox im Ultra Stil --- */
.order-search {
    padding: 12px 16px;
    width: 320px;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    outline: none;
    color: white;
    backdrop-filter: blur(14px);
    transition: .25s ease;
}

    .order-search::placeholder {
        color: #d1e7f5;
    }

    .order-search:hover {
        background: rgba(255,255,255,0.18);
        box-shadow: 0 0 18px rgba(34,211,238,0.35);
    }

/* --- Export Button Ultra Style --- */
.btn-tsl {
    padding: 12px 20px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    font-weight: 600;
    transition: .25s ease;
}

    .btn-tsl:hover {
        background: rgba(255,255,255,0.25);
        box-shadow: 0 0 18px rgba(255,255,255,0.4);
        transform: translateY(-2px);
    }
/* =========================================================
   INVOICE PAGE – MATCH ORDERS DESIGN
========================================================= */

/* gleiche Column-Hidden-Klasse */
.hidden-col {
    display: none;
}

/* Drag Handle */
.drag-handle {
    cursor: grab;
    opacity: .7;
}

/* Hover Effekte wie Orders */
#invoiceTable tbody tr:hover {
    background: rgba(255,255,255,0.12);
    box-shadow: inset 0 0 16px rgba(34,211,238,0.40);
}

/* KPI-Text-Shadow einheitlich */
.kpi-card p {
    text-shadow: 0 0 18px rgba(0,255,255,0.35);
}

/* ================================================
   DRIVER MANAGEMENT – BADGES
================================================ */

.badge-gray {
    background: rgba(255,255,255,0.25);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: .85rem;
    color: #d1d5db;
}

.badge-blue {
    background: rgba(56,189,248,0.35);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: .85rem;
    color: white;
}

.badge-green {
    background: rgba(74,222,128,0.55);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: .85rem;
}

.badge-orange {
    background: rgba(251,146,60,0.55);
    padding: 6px 12px;
    border-radius: 10px;
}

.badge-red {
    background: rgba(239,68,68,0.55);
    padding: 6px 12px;
    border-radius: 10px;
}

/* Table hover fix */
#driverTable tbody tr:hover {
    background: rgba(255,255,255,0.12);
    box-shadow: inset 0 0 16px rgba(34,211,238,0.40);
}
/* Hideable sections in driver form */
#loginFields, #adrFields {
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.20);
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 12px;
    margin-bottom: 22px;
    font-size: 1.05rem;
}

.detail-divider {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin: 25px 0;
}

/* =============================================
   CUSTOM DARK SELECT (TSL ULTRA PREMIUM)
============================================= */

.tsl-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.tsl-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(20, 30, 50, 0.75);
    color: #e5e7eb;
    border: 1px solid rgba(0,255,255,0.35);
    backdrop-filter: blur(8px);
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.tsl-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #00ffff;
    font-size: 14px;
}

/* DROPDOWN LISTE */
.tsl-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(15, 20, 40, 0.95);
    border: 1px solid rgba(0,255,255,0.35);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 6px 0;
    z-index: 2000;
    display: none;
    max-height: 260px;
    overflow-y: auto;
}

.tsl-option {
    padding: 10px 14px;
    cursor: pointer;
    color: #e5e7eb;
}

    .tsl-option:hover {
        background: rgba(0,255,255,0.25);
        color: #fff;
    }