/* style.css - V5.8: Mobile Buttons Big & Bold */

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

/* --- GRUNDLAYOUT --- */
body { 
    background-color: #525659; 
    font-family: Arial, sans-serif; 
    font-size: 11px; 
    margin: 0; padding: 0; display: flex; height: 100vh; overflow: hidden; 
}

/* --- PUBLIC HEADER & SUCCESS VIEWS --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }

.public-header { 
    background: #ffffff; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    position: absolute; 
    top: 0; left: 0; width: 100%; 
    height: 70px; 
    z-index: 1000; 
    display: flex; align-items: center;
}

.public-nav { 
    display: flex; justify-content: space-between; align-items: center; width: 100%;
}

.logo { 
    font-size: 24px; font-weight: 800; color: #2c3e50; 
    text-decoration: none; display: flex; align-items: center; gap: 8px; 
}
.logo span { color: #007bff; font-weight: 400; }
.logo-icon { background: #007bff; color: white; border-radius: 4px; padding: 0 6px; font-size: 18px; }

.btn-login-header { 
    background-color: #2c3e50; color: #ffffff; padding: 8px 20px; 
    border-radius: 4px; text-decoration: none; font-weight: bold; 
    transition: background 0.3s; font-size: 14px;
}
.btn-login-header:hover { background-color: #1a252f; }

/* Views (Register & Verify) */
#register-success-view, #verify-success-view {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #f4f6f8; 
    z-index: 10000; 
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

.success-box {
    background: #ffffff;
    padding: 40px 40px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    text-align: center;
    width: 500px; max-width: 90%;
    border: 1px solid #e1e4e8;
    margin-top: 60px; 
}

.success-icon { margin-bottom: 20px; }
.success-box h2 { font-size: 24px; color: #333; margin-bottom: 15px; font-weight: 700; margin-top: 0; }
.success-box p { font-size: 15px; color: #555; line-height: 1.5; margin-bottom: 10px; }

.btn-primary-large {
    background-color: #007bff; color: white; border: none; padding: 12px 30px;
    font-size: 16px; border-radius: 4px; cursor: pointer; font-weight: bold;
    margin-top: 20px; display: inline-block;
    box-shadow: 0 4px 6px rgba(0,123,255,0.2);
    transition: transform 0.1s;
}
.btn-primary-large:hover { background-color: #0056b3; transform: translateY(-1px); }

/* --- APP LAYOUT --- */
.sidebar {
    width: 200px; min-width: 200px; background-color: #333; color: white;
    display: flex; flex-direction: column; padding: 15px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3); z-index: 10; overflow-y: auto;
}

.company-header {
    padding: 10px 0 15px 0;
    font-weight: bold;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    border-bottom: 1px solid #444;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.employee-section {
    background-color: #222; padding: 10px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #444;
}
.employee-label { font-size: 10px; color: #aaa; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.emp-controls { display: flex; gap: 5px; }
#employee-select { flex: 1; padding: 5px; background: #444; color: white; border: 1px solid #555; border-radius: 3px; width: 100%; }

.year-selector {
    display: flex; justify-content: space-between; align-items: center; background-color: #444;
    padding: 5px 10px; border-radius: 4px; margin-bottom: 15px; border: 1px solid #555;
}
.year-btn { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0 8px; }
.year-btn:hover { color: #007bff; }
#year-input { background: transparent; border: none; color: white; font-size: 16px; font-weight: bold; width: 60px; text-align: center; font-family: inherit; }
#year-input:focus { outline: none; border-bottom: 1px solid #007bff; }
#year-input::-webkit-outer-spin-button, #year-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* MONTH NAV GRID (WIEDERHERGESTELLT) */
#month-nav { 
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 5px;
    margin-bottom: 20px;
    padding: 0;
}

.nav-btn { 
    display: block; width: 100%; 
    background-color: #444; 
    border: 1px solid #555; 
    color: #ccc; 
    padding: 8px 0; /* Kompakteres Padding */
    text-align: center; 
    cursor: pointer; 
    font-size: 11px; 
    border-radius: 4px; 
    transition: all 0.2s; 
    font-weight: bold;
    text-transform: uppercase; /* Sicherstellen, dass JAN groß ist */
}

.nav-btn:hover { background-color: #555; color: white; border-color: #777; }
.nav-btn.active { background-color: #007bff; color: white; border-color: #007bff; }


.main-content { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 40px; background-color: #525659; }

#view-timesheet { display: block; }
#view-dashboard { display: none; width: 100%; max-width: 1400px; }

/* DASHBOARD */
.dashboard-card { background-color: white; width: 100%; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius: 8px; }

.dash-header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; 
}
.dash-header h2 { margin: 0; font-size: 18px; color: #333; }

.dash-actions { display: flex; align-items: center; gap: 8px; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th, .dash-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; }
.dash-table td:last-child { white-space: nowrap; }

.dash-table th { background-color: #f8f9fa; font-weight: bold; color: #555; }
.dash-table tr:hover { background-color: #f1f1f1; }
.val-green { color: #28a745; font-weight: bold; }
.val-red { color: #dc3545; font-weight: bold; }
.btn-action { background: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.btn-action:hover { background: #0056b3; }

.btn-icon-danger {
    background: none; border: none; color: #dc3545; 
    padding: 6px; cursor: pointer; font-size: 14px; margin-left: 5px;
    border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.2s, background-color 0.2s;
}
.btn-icon-danger:hover { background-color: rgba(220, 53, 69, 0.1); color: #a71d2a; }

.actions-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.btn-export, .toggle-view-btn, #btn-recovery { 
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 0 12px; border-radius: 4px; cursor: pointer; 
    font-size: 12px; font-family: inherit; border: none; line-height: 1; margin: 0 !important; 
}

#btn-recovery { display: none; }

.btn-export { background: #28a745; color: white; }
.btn-export:hover { background: #218838; }
.toggle-view-btn { background: #6c757d; color: white; }
.toggle-view-btn:hover { background: #5a6268; }

button[onclick*="openAuditLog"] { background: #17a2b8 !important; }
button[onclick*="openAuditLog"]:hover { background: #138496 !important; }
button[id="btn-recovery"] { background: #6c757d !important; }

.lock-icon { cursor: pointer; font-size: 18px; margin-left: 10px; user-select: none; }
.lock-icon:hover { opacity: 0.7; }
.lock-icon.locked { filter: grayscale(0); }
.locked-banner { background-color: #dc3545; color: white; text-align: center; padding: 10px; font-weight: bold; border-radius: 4px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.emp-link { color: #007bff; text-decoration: none; font-weight: bold; cursor: pointer; }
.emp-link:hover { text-decoration: underline; }

.page { background-color: white; width: 210mm; min-height: 297mm; padding: 20mm; box-shadow: 0 0 10px rgba(0,0,0,0.5); box-sizing: border-box; position: relative; }
.header { margin-bottom: 20px; font-weight: bold; }
.header-click-area { cursor: pointer; padding: 5px; border: 1px dashed transparent; border-radius: 4px; transition: border-color 0.2s; }
.header-click-area:hover { border-color: #ccc; background-color: #f9f9f9; }
.header-row { display: flex; margin-bottom: 5px; align-items: baseline; }
.header-label { width: 80px; }
.header-val { border-bottom: 1px solid black; width: 200px; display: inline-block; min-height: 18px; }

table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
th, td { border: 1px solid #ccc; padding: 2px 4px; text-align: center; }
th { background-color: #f0f0f0; font-weight: bold; height: 30px; vertical-align: middle; }
.col-kw { width: 30px; } .col-nr { width: 25px; } .col-tag { width: 70px; } .col-datum { width: 65px; } .col-time { width: 50px; } .col-bemerkung { width: auto; }

table input[type="time"], table input[type="text"], table input[type="number"] { 
    width: 100%; border: none; text-align: center; font-family: inherit; font-size: inherit; background: transparent; 
}
.weekend { background-color: #e6e6e6; color: #999; } .weekend input { color: #999; }

.blocked-row { background: repeating-linear-gradient(45deg, #f9f9f9, #f9f9f9 10px, #eee 10px, #eee 20px); color: #bbb; }
.blocked-row input { pointer-events: none; color: #bbb; }
.blocked-row .inp-bem { font-style: italic; font-size: 10px; }

.row-vacation { background-color: #d1ecf1 !important; color: #0c5460; }
.row-vacation input { pointer-events: none; color: #0c5460; font-weight: bold; }
.row-sick { background-color: #f8d7da !important; color: #721c24; }
.row-sick input { pointer-events: none; color: #721c24; font-weight: bold; }
.row-other { background-color: #fff3cd !important; color: #856404; }
.row-other input { pointer-events: none; color: #856404; font-weight: bold; }
.row-holiday { background-color: #ffe8cc !important; color: #e8590c; }
.row-holiday input { pointer-events: none; color: #e8590c; font-weight: bold; }

.inp-pause.invalid {
    background-color: #dc3545 !important;
    color: white !important;
    border-radius: 3px;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}
.inp-pause.invalid::placeholder { color: #f8d7da; }

.summary-bar { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 8px 0; margin-top: 15px; margin-bottom: 20px; font-weight: bold; font-size: 12px; background-color: #fcfcfc; }
.signature-section { position: absolute; bottom: 20mm; left: 20mm; right: 20mm; margin-top: 0; display: flex; justify-content: space-between; page-break-inside: avoid; }
.signature-line { border-top: 1px solid black; width: 200px; text-align: center; padding-top: 5px; margin-top: 30px; }
#status-msg { position: fixed; top: 10px; right: 10px; background: #fff; padding: 5px 10px; border-radius: 4px; font-size: 12px; display: none; opacity: 0.8; z-index: 1000; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 10001; }

.modal-box { 
    background: #444; color: white; padding: 25px; border-radius: 8px; 
    width: 450px; max-width: 95%; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); border: 1px solid #555; text-align: center; 
}
.modal-large { width: 600px; max-width: 95%; text-align: left; }

.modal-box h3 { margin-top: 0; margin-bottom: 20px; font-size: 18px; color: #fff; text-align: center; }
.modal-text { margin-bottom: 25px; font-size: 14px; line-height: 1.4; color: #ddd; text-align: center; }
.modal-tabs { display: flex; border-bottom: 1px solid #666; margin-bottom: 15px; }
.tab-btn { background: none; border: none; color: #aaa; padding: 10px 15px; cursor: pointer; font-weight: bold; border-bottom: 2px solid transparent; }
.tab-btn.active { color: white; border-bottom: 2px solid #007bff; }
.tab-btn:hover { color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #ccc; font-size: 12px; }
.modal-input { width: 100%; padding: 10px; margin-bottom: 5px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background-color: #ffffff !important; color: #000000 !important; font-size: 14px; }
.pin-field { text-align: center; letter-spacing: 5px; font-size: 20px; width: 80%; margin: 0 auto 20px auto; display: block; }
.input-error { border: 2px solid #ff4444 !important; background-color: #fff0f0 !important; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-cancel, .btn-save, .btn-danger { flex: 1; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold; color: white; }
.btn-cancel { background: #666; } .btn-cancel:hover { background: #777; }
.btn-save { background: #28a745; } .btn-save:hover { background: #218838; }
.btn-danger { background: #dc3545; } .btn-danger:hover { background: #c82333; }
.absence-form { background: #555; padding: 10px; border-radius: 4px; margin-bottom: 15px; }
.btn-add-abs { background: #28a745; color: white; border: none; padding: 0 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }
.absence-list-container { max-height: 200px; overflow-y: auto; border: 1px solid #555; border-radius: 4px; }
.absence-table { width: 100%; border-collapse: collapse; }
.absence-table th { background: #333; color: #aaa; padding: 5px; text-align: left; font-size: 11px; position: sticky; top: 0; }
.absence-table td { padding: 8px; border-bottom: 1px solid #555; font-size: 12px; }
.btn-del-abs { color: #ff6666; background: none; border: none; cursor: pointer; font-size: 14px; }

.matrix-container { overflow-x: auto; margin-top: 20px; }
.matrix-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.matrix-table th, .matrix-table td { border: 1px solid #ddd; padding: 4px; text-align: center; }
.matrix-table th { background: #f0f0f0; font-weight: bold; color: #555; min-width: 30px; }

.matrix-name { 
    text-align: left !important; min-width: 120px; font-weight: bold; 
    background: #fff; position: sticky; left: 0; z-index: 5; border-right: 2px solid #ccc; font-size: 13px; 
}

.m-cell { width: 30px; height: 30px; font-weight: bold; color: white; line-height: 30px; }
.m-we { background-color: #e0e0e0; color: #999; }
.m-hol { background-color: #e8590c; color: white; } 
.m-vac { background-color: #007bff; color: white; } 
.m-sick { background-color: #dc3545; color: white; } 
.m-school { background-color: #ffc107; color: black; } 
.m-block { background: repeating-linear-gradient(45deg, #eee, #eee 5px, #ddd 5px, #ddd 10px); }
.toggle-view-btn { float: right; background: #6c757d; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 10px; }
.toggle-view-btn:hover { background: #5a6268; }

.backup-list-container { max-height: 300px; overflow-y: auto; margin-bottom: 20px; border: 1px solid #555; }

/* --- LOGIN & LOGOUT --- */
#login-view {
    display: flex; justify-content: center; align-items: center;
    height: 100vh;
    background-color: #f4f6f8; 
    color: #333; 
    position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;
}

.login-box {
    background: #ffffff; 
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
    text-align: center; 
    width: 450px; max-width: 95%; 
    border: 1px solid #e1e4e8;
}

.login-box h2 { color: #333 !important; font-weight: 700; margin-bottom: 15px; }
.login-box p { color: #666 !important; }
.login-box div { color: #666 !important; }

.login-input {
    width: 100%; padding: 12px; margin: 15px 0; 
    border: 1px solid #ced4da; 
    background: #fff; 
    color: #333; 
    font-size: 16px; text-align: center; border-radius: 4px;
    box-sizing: border-box; 
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

.btn-login {
    background: #007bff; color: white; border: none; padding: 12px 20px;
    font-size: 16px; border-radius: 4px; cursor: pointer; width: 100%;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,123,255,0.2);
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-login:hover { 
    background: #0056b3; 
    transform: translateY(-1px);
    box-shadow: 0 6px 8px rgba(0,123,255,0.25);
}
.btn-login:active {
    transform: translateY(0);
    box-shadow: none;
}

.logout-container { margin-top: auto; padding-top: 15px; border-top: 1px solid #444; }
.btn-logout {
    width: 100%; background-color: #dc3545; color: white; border: none;
    padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold; box-sizing: border-box; 
}
.btn-logout:hover { background-color: #c82333; }
.sidebar, .main-content { display: none; }

.modal-box .dash-table th { background-color: #333; color: #eee; border-bottom: 1px solid #555; }
.modal-box .dash-table td { border-bottom: 1px solid #555; color: #eee; }
.modal-box .dash-table tr:hover { background-color: #555 !important; color: #fff !important; }

/* Print Button im Header */
.btn-icon-print {
    background: transparent;
    border: 1px solid #ccc;
    color: #333;
    font-size: 18px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px; 
}
.btn-icon-print:hover {
    background-color: #f0f0f0;
    border-color: #999;
    transform: translateY(-1px);
}

/* --- MAIN NAVIGATION (NEW V54) --- */
.main-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: #ccc;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    border-radius: 0 4px 4px 0;
}

.nav-item:hover {
    background-color: rgba(255,255,255,0.05);
    color: #fff;
}

.nav-item.active {
    background-color: rgba(0, 123, 255, 0.1);
    color: #fff;
    border-left-color: #007bff;
}

.nav-icon {
    font-size: 16px;
    margin-right: 12px;
    width: 20px;
    text-align: center;
}


@media print {
    /* WICHTIG: .btn-icon-print hinzugefügt */
    .sidebar, #status-msg, .modal-overlay, #view-dashboard, .header-click-area span[style*="margin-left"], .toggle-view-btn, .btn-export, #btn-recovery, .btn-icon-print { 
        display: none !important; 
    }
    body, html, .main-content { 
        height: auto !important; 
        overflow: visible !important; 
        background-color: white !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important; 
    }
    .page { 
        width: 100% !important; 
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important; 
        padding: 0 !important;
        box-shadow: none !important; 
        border: none !important;
    }
    body { font-size: 10px !important; }
    table { margin-bottom: 10px !important; font-size: 10px !important; }
    th, td { padding: 1px 2px !important; } 
    h2, h3, .header { margin-bottom: 10px !important; }
    .header-click-area { border: none !important; padding: 0 !important; }
    .header-val { border-bottom: 1px solid black !important; }
    .row-vacation, .row-sick, .row-other, .row-holiday { 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }
    .signature-section { 
        position: relative !important; 
        bottom: auto !important; 
        left: auto !important;
        right: auto !important;
        margin-top: 30px !important;
        width: 100% !important;
        page-break-inside: avoid !important; 
    }
    @page { size: A4 portrait; margin: 10mm; }
}

/* --- TOGGLE SWITCH --- */
.switch { position: relative; display: inline-block; width: 34px; height: 20px; margin-right: 8px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #666; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #007bff; }
input:focus + .slider { box-shadow: 0 0 1px #007bff; }
input:checked + .slider:before { transform: translateX(14px); }

/* --- LIMIT LOCK MODAL --- */
#modal-limit-lock { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); z-index: 100000; }
#modal-limit-lock .modal-box { background: #1e1e1e; border: 1px solid #333; border-top: 4px solid #dc3545; box-shadow: 0 0 40px rgba(220, 53, 69, 0.15); border-radius: 12px; padding: 40px 30px; max-width: 480px; text-align: center; animation: fadeInScale 0.3s ease-out; }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
#modal-limit-lock h3 { color: #ffffff; font-size: 22px; margin-bottom: 15px; font-weight: 700; }
#modal-limit-lock p { color: #b0b3b8; font-size: 15px; line-height: 1.6; margin-bottom: 25px; }
#modal-limit-lock .limit-icon-container { margin-bottom: 20px; }
#modal-limit-lock .limit-icon { width: 64px; height: 64px; fill: none; stroke: #dc3545; stroke-width: 1.5; background: rgba(220, 53, 69, 0.1); border-radius: 50%; padding: 12px; }
#modal-limit-lock .btn-save { background: #28a745; background-image: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); border: 1px solid #28a745; padding: 12px 24px; font-size: 15px; }
#modal-limit-lock .btn-cancel { background: transparent; border: 1px solid #555; color: #ccc; padding: 12px 24px; font-size: 15px; }
#modal-limit-lock .btn-cancel:hover { border-color: #777; color: #fff; background: rgba(255,255,255,0.05); }

/* --- KIOSK MODE (BIG FONT EDITION) --- */
#view-kiosk {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #1a1a1a;
    z-index: 20000;
    display: flex; flex-direction: column;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.kiosk-header {
    background-color: #222; padding: 20px 40px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#kiosk-time { font-size: 48px; font-weight: bold; color: #fff; }
#kiosk-date { font-size: 24px; color: #aaa; margin-left: 20px; flex: 1; }
#kiosk-exit-btn { background: none; border: 1px solid #444; color: #666; font-size: 24px; padding: 10px 20px; cursor: pointer; border-radius: 4px; transition: 0.2s; }
#kiosk-exit-btn:hover { color: #fff; border-color: #888; background: #333; }

.kiosk-grid {
    flex: 1; padding: 40px;
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 30px; 
    overflow-y: auto; align-content: start;
}

.kiosk-card {
    background: #333; border: 2px solid #444;
    border-radius: 16px;
    height: 220px; 
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    cursor: pointer;
    transition: transform 0.1s, background 0.1s, border-color 0.1s;
    user-select: none;
    position: relative; /* Für Badge */
}
.kiosk-card:active { transform: scale(0.95); }
.kiosk-card:hover { background: #444; border-color: #007bff; }

.k-avatar { 
    width: 90px; height: 90px; 
    background: #007bff; color: white; 
    border-radius: 50%; font-size: 36px; font-weight: bold; 
    display: flex; justify-content: center; align-items: center; margin-bottom: 20px; 
}
.k-name { font-size: 28px; font-weight: bold; text-align: center; line-height: 1.3; }

/* Kiosk Badges */
.k-badge {
    position: absolute; top: 15px; right: 15px; width: 20px; height: 20px;
    border-radius: 50%; border: 2px solid #333; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.badge-green { background-color: #28a745; box-shadow: 0 0 10px #28a745; }
.badge-gray { background-color: #555; }
.badge-done { background-color: #007bff; }

/* Kiosk Overlays */
.kiosk-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center; z-index: 20001;
}

.kiosk-box {
    background: #2a2a2a; border: 1px solid #444;
    padding: 40px; border-radius: 20px;
    text-align: center; width: 550px; 
    box-shadow: 0 10px 50px rgba(0,0,0,0.7);
}

.kiosk-box h3 { color: #ffffff; font-size: 36px !important; margin-bottom: 20px; font-weight: 700; }
.kiosk-box p { font-size: 20px; color: #aaa; margin-bottom: 30px; }

#kiosk-action-name { color: #007bff; }
#kiosk-status-text { font-size: 18px; color: #fff; background: #333; padding: 8px 15px; border-radius: 6px; display: inline-block; margin-bottom: 20px; border: 1px solid #555; }

.pin-dots { display: flex; justify-content: center; gap: 20px; margin: 30px 0; }
.pin-dots span { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #666; transition: 0.2s; }
.pin-dots span.filled { background: #007bff; border-color: #007bff; }

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.numpad button { 
    padding: 25px; font-size: 36px; font-weight: bold; 
    border-radius: 16px; border: none; background: #3a3a3a; color: white; cursor: pointer; 
}
.numpad button:active { background: #555; }
.numpad .btn-clear { background: #dc3545; }
.numpad .btn-back { background: #666; font-size: 24px; }

.kiosk-actions { display: flex; gap: 30px; justify-content: center; margin-bottom: 20px; margin-top: 30px; }
.btn-big-green, .btn-big-red {
    flex: 1; padding: 40px 20px; font-size: 32px; font-weight: bold; 
    border: none; border-radius: 16px; cursor: pointer; color: white;
    transition: transform 0.1s;
}
.btn-big-green { background: #28a745; box-shadow: 0 6px 0 #1e7e34; }
.btn-big-green:active { transform: translateY(6px); box-shadow: none; }

.btn-big-red { background: #dc3545; box-shadow: 0 6px 0 #bd2130; }
.btn-big-red:active { transform: translateY(6px); box-shadow: none; }

.btn-disabled { opacity: 0.3 !important; transform: none !important; cursor: not-allowed !important; filter: grayscale(100%); }

.btn-kiosk-cancel { background: transparent; border: 2px solid #555; color: #ccc; padding: 15px 30px; border-radius: 8px; cursor: pointer; margin-top: 20px; font-size: 18px; font-weight: bold; }
.btn-kiosk-cancel:hover { border-color: #777; color: #fff; }

.btn-kiosk-start {
    width: 100%; margin-bottom: 10px; 
    background: #6f42c1; color: white; border: none; padding: 12px; 
    border-radius: 4px; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 0 #5a32a3;
}
.btn-kiosk-start:hover { background: #5a32a3; }
.btn-kiosk-start:active { transform: translateY(2px); box-shadow: 0 2px 0 #4a2885; }

/* SUCCESS MESSAGE */
#kiosk-success-msg { font-size: 40px !important; line-height: 1.4; font-weight: 700; color: white; margin-top: 20px; }
#kiosk-success div { margin-bottom: 10px; }

/* --- Z-INDEX FIXES (WICHTIG) --- */
#modal-message { z-index: 20005 !important; }
#modal-master { z-index: 10001; }

/* ========================================= */
/* --- MOBILE ACTION VIEW (ADDITIV) --- */
/* ========================================= */

#mobile-view-container { display: none; }

/* NUR auf Mobile (< 768px) anwenden */
@media (max-width: 768px) {
    /* 1. Verstecke die Desktop-Elemente (wenn nicht .force-desktop) */
    body:not(.force-desktop) .sidebar,
    body:not(.force-desktop) .public-header,
    body:not(.force-desktop) .header,
    body:not(.force-desktop) table,
    body:not(.force-desktop) .summary-bar,
    body:not(.force-desktop) .signature-section,
    body:not(.force-desktop) #locked-banner,
    body:not(.force-desktop) .dash-header,
    body:not(.force-desktop) .dash-actions, 
    body:not(.force-desktop) .dashboard-card { 
        display: none !important; 
    }

    /* 2. Layout Anpassung */
    body:not(.force-desktop) .main-content {
        margin: 0; padding: 15px; display: block; background: #f0f2f5;
    }
    body:not(.force-desktop) .page {
        width: 100%; box-shadow: none; padding: 0; background: transparent; min-height: auto;
    }

    /* 3. Zeige Mobile Container */
    body:not(.force-desktop) #mobile-view-container {
        display: flex; flex-direction: column; gap: 20px; min-height: 80vh; justify-content: center;
    }
    
    /* 4. Mobile Styles */
    .mob-card {
        background: white; border-radius: 15px; padding: 20px;
        text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    
    #mob-status-header { font-size: 22px; margin: 0 0 15px 0; color: #333; font-weight: 700; }
    
    #mob-status-display {
        margin-top: 15px; padding: 20px; background: #f8f9fa; border-radius: 12px;
    }
    .mob-status-active { background: #e6f9eb !important; border: 1px solid #c3e6cb; color: #28a745; }
    .mob-status-inactive { color: #666; }
    
    .mob-saldo-box { font-size: 14px; color: #666; font-weight: bold; margin-top: 10px; }
    #mob-saldo-val { font-size: 20px; color: #007bff; }

    .mob-actions { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
    
    .btn-mob-large {
        width: 100%; padding: 35px; /* GRÖSSERES PADDING */
        font-size: 24px; /* GRÖSSERE SCHRIFT */
        font-weight: bold;
        border: none; border-radius: 12px; cursor: pointer; color: white;
        display: flex; align-items: center; justify-content: center; gap: 15px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: transform 0.1s;
    }
    .btn-mob-large:active { transform: scale(0.98); }
    .mob-icon { font-size: 24px; }

    .btn-green { background: #28a745; }
    .btn-red { background: #dc3545; }
    .btn-disabled { opacity: 0.5; pointer-events: none; filter: grayscale(1); }
    
    .btn-text-only {
        background: none; border: none; color: #666; text-decoration: underline; margin-top: 30px; font-size: 13px;
    }
}