/* Gemeinsames Basis-Layout */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Container & Boxen */
.container { background: white; padding: 25px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); width: 92%; max-width: 450px; margin: 20px auto; margin-bottom: 110px; box-sizing: border-box; text-align: center; }
h2 { color: #1c1c1e; margin-top: 0; font-weight: 800; font-size: 26px; letter-spacing: -0.5px;}

/* Inputs, Selects & Formulare */
input, select, textarea { font-family: inherit; }
input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], select { width: 100%; padding: 16px; margin: 10px 0; border: 1.5px solid #e5e5ea; border-radius: 12px; box-sizing: border-box; font-size: 16px; background: #fafafa; color: #1c1c1e; outline: none; transition: border-color 0.2s, background 0.2s; appearance: none; -webkit-appearance: none; }
input:focus, select:focus { border-color: #007aff; background: #fff; }
.flex-inputs { display: flex; gap: 10px; width: 100%; } .flex-inputs input { flex: 1; min-width: 0; }

select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007aff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
    padding-right: 40px;
}

/* Buttons mit nativen App-Effekten */
button { width: 100%; padding: 16px; background-color: #007aff; color: white; border: none; border-radius: 14px; font-size: 17px; font-weight: 600; cursor: pointer; margin-top: 10px; box-shadow: 0 4px 12px rgba(0,122,255,0.25); transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); user-select: none; -webkit-user-select: none; }
button:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(0,122,255,0.15); }
.btn-green { background-color: #34c759; box-shadow: 0 4px 12px rgba(52,199,89,0.25); } .btn-green:active { box-shadow: 0 2px 6px rgba(52,199,89,0.15); }
.btn-red { background-color: #ff3b30; box-shadow: 0 4px 12px rgba(255,59,48,0.25); } .btn-red:active { box-shadow: 0 2px 6px rgba(255,59,48,0.15); }
.btn-dark { background: #1c1c1e; box-shadow: 0 4px 12px rgba(28,28,30,0.25); } .btn-dark:active { box-shadow: 0 2px 6px rgba(28,28,30,0.15); }
.btn-blue { background-color: #007aff; }

/* Meldungen */
.error { color: #ff3b30; display: none; margin-top: 10px; font-weight: bold; font-size: 15px; }
.status-box { margin-top: 15px; padding: 18px; border-radius: 14px; background-color: #f2f2f7; border-left: 5px solid #007aff; text-align: left; font-size: 15px; line-height: 1.4; }
.success-box { background-color: #e5f8ed; border-left: 5px solid #34c759; color: #196b34; }
.search-box { width: 100%; padding: 16px; font-size: 16px; border: 2px solid #007aff; border-radius: 14px; margin-bottom: 20px; box-sizing: border-box; background: #fff;}

.obscured-password { font-family: 'Courier New', Courier, monospace; letter-spacing: 4px; background: repeating-linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 2px, transparent 2px, transparent 5px); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.5); text-decoration-thickness: 2px; padding: 5px 10px; display: inline-block; transform: skewX(-10deg); font-size: 20px; font-weight: bold; color: #222; border: 1px dashed #ccc; }

/* Modals */
#qr-modal, #scan-confirm-modal, #totp-modal, #history-modal, #kombi-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index:2000; justify-content:center; align-items:center; }
.modal-content { background:white; padding:30px 25px; border-radius:24px; text-align:center; width: 90%; max-width: 360px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

/* Listen & Details (Akkordeon) */
ul { list-style: none; padding: 0; } 
li { background: #f2f2f7; padding: 16px; margin-bottom: 10px; border-radius: 12px; border-left: 5px solid #007aff; display: flex; justify-content: space-between; align-items: center; }
details { background: #fff; margin-bottom: 12px; border-radius: 14px; border: 1px solid #e5e5ea; outline: none; overflow: hidden; }
summary { padding: 16px; font-weight: 600; cursor: pointer; font-size: 17px; outline: none; user-select: none; -webkit-user-select: none; transition: background 0.2s; }
summary:active { background: #f9f9f9; }
.date-details { background: transparent; border: none; border-bottom: 1px solid #e5e5ea; margin: 0 10px; border-radius: 0; }
.date-details > summary { font-size: 16px; color: #007aff; padding: 14px 0; }
details.record-group { padding: 0; margin: 0; border-left: 5px solid #007aff; border-bottom: none; background: #fff; border-radius: 0; }
details.record-group > summary { display: flex; justify-content: space-between; align-items: center; background: #f9f9f9; border-bottom: 1px solid #eee; }
details.record-group > summary::-webkit-details-marker { display: none; }
.scan-item { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; background: #fff; padding: 12px 15px; border-radius: 12px; border: 1px solid #e5e5ea; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: background-color 0.3s; }
.scan-item input[type="time"] { width: auto; max-width: 105px; padding: 10px; margin: 0; text-align: center; font-weight: 600; }
.scan-item.deleted { opacity: 0.5; background: #f2f2f7; text-decoration: line-through; box-shadow: none; border-color: transparent;}

/* Admin-Spezifisch */
body.admin-mode { background: #f4f7f6; }
body.admin-mode .container { max-width: 900px; margin: 30px auto; padding: 35px; border-radius: 20px; margin-bottom: 40px;}
.header { background: #1c1c1e; color: white; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; }
.nav { background: #2c2c2e; display: flex; overflow-x: auto; }
.nav button { background: none; border: none; color: white; padding: 16px 22px; cursor: pointer; font-size: 16px; margin-top:0; border-radius:0; box-shadow: none; font-weight: 500;}
.nav button:hover, .nav button.active { background: #007aff; }

/* Scanner (Kamera View) */
#reader { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; margin: 25px auto; border-radius: 24px; overflow: hidden; background: #000; display: none; border: none; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
#reader video { object-fit: cover !important; width: 100% !important; height: 100% !important; border-radius: 24px; }

/* Bottom Nav (iOS / Android App Style mit Glas-Effekt) */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid rgba(0,0,0,0.08); display: flex; justify-content: space-around; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); z-index: 1000; display: none; }
.bottom-nav div { color: #8e8e93; text-align: center; font-size: 11px; cursor: pointer; flex: 1; font-weight: 600; transition: color 0.2s; user-select: none; }
.bottom-nav div.active { color: #007aff; }
.bottom-nav div span { display: block; font-size: 26px; margin-bottom: 4px; transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1); }
.bottom-nav div:active span { transform: scale(0.85); }

/* =========================================
   📱 MOBILE OPTIMIERUNG (Smartphones & Tablets)
   ========================================= */
@media (max-width: 768px) {
    body.admin-mode .container { width: 95%; margin: 15px auto; padding: 20px; }
    .header { flex-direction: column; text-align: center; gap: 15px; }
    .nav button { padding: 12px 15px; font-size: 15px; }
    .modal-content { padding: 25px 20px; width: 92%; }
    #kombi-modal .modal-content > div:nth-of-type(1) { flex-direction: column; gap: 10px; }
    
    #page-home div[style*="display:flex; gap:10px"] { flex-direction: column; }
    #page-home div[style*="display:flex; gap:10px"] button { width: 100% !important; margin-top: 5px !important; }
    
    details.rec-user > summary, details.rec-day > summary, details.record-group > summary { flex-direction: column; align-items: flex-start !important; }
    details.rec-user > summary > div, details.rec-day > summary > div, details.record-group > summary > div { width: 100%; justify-content: flex-start !important; margin-top: 12px; }
}

/* =========================================
   🖨️ DRUCK OPTIMIERUNG
   ========================================= */
#print-area { display: none; }

@media print {
    @page { margin: 0; } 
    body { padding: 1cm; background: white; -webkit-print-color-adjust: exact; } 
    body > *:not(#print-area) { display: none !important; }
    #print-area { display: block !important; width: 100%; margin: 0; padding: 0; background: white; color: black; }
    
    body.print-mode-qr #print-area { position: absolute; top: 0; left: 0; width: 100vw; display: flex !important; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100% !important; min-height: 98vh; }
    
    body.print-mode-a4 #print-area { position: relative; display: block !important; }
    #a4-qr-container { display: flex !important; flex-direction: row; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 10px !important; }
    #a4-qr-container > div { width: 22% !important; margin-bottom: 10px !important; text-align: center; page-break-inside: avoid; border: 1px dashed #ccc; padding: 5px; border-radius: 8px;}
    
    body.print-mode-kombi #print-area { display: flex !important; flex-direction: column; justify-content: space-between; text-align: center; font-family: sans-serif; box-sizing: border-box; min-height: 98vh; }
    .kombi-top-section { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .kombi-header { padding-bottom: 10px; border-bottom: 3px solid #333; margin-bottom: 20px; }
    .kombi-main-qr { margin: 20px auto; width: 180px; height: 180px; padding: 15px; border: 3px solid #000; border-radius: 10px; display: inline-block;}
    .kombi-bottom-section { margin-top: auto; width: 100%; margin-bottom: 20px; }
    .kombi-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 2% !important; margin-top: 10px; }
    .kombi-grid-item { width: 18% !important; text-align: center; page-break-inside: avoid; border: 1px dashed #ccc; padding: 5px; border-radius: 8px; box-sizing: border-box; }
    body.print-mode-welcome #print-area { position: absolute; top: 0; left: 0; width: 100vw; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100% !important; min-height: 98vh; background: white; }
}