/* Arbeitszeiterfassung – Stylesheet (WEG-Portal Design) */
* { margin:0; padding:0; box-sizing:border-box; }

/* ── CSS VARIABLEN ──────────────────────────────────────────────────────── */
:root {
    --bg:          #f5f5f5;
    --bg2:         #ffffff;
    --text:        #333333;
    --text-muted:  #888888;
    --border:      #dddddd;
    --hdr-bg1:     #1a3a5c;
    --hdr-bg2:     #2e6da4;
    --hdr-text:    rgba(255,255,255,0.85);
    --hdr-active:  #e8931a;
    --footer-bg:   #f0f0f0;
    --footer-text: #888;
    --card-bg:     #ffffff;
    --card-shadow: 0 2px 8px rgba(0,0,0,0.09);
    --input-bg:    #ffffff;
    --input-border:#cccccc;
    --table-head:  #f0f4f8;
    --table-hover: #f9fbff;
    --accent:      #1a3a5c;
}
[data-theme="dark"] {
    --bg:          #0d1117;
    --bg2:         #161b22;
    --text:        #e6edf3;
    --text-muted:  #8b949e;
    --border:      #30363d;
    --hdr-bg1:     #0d1117;
    --hdr-bg2:     #161b22;
    --hdr-text:    rgba(255,255,255,0.75);
    --hdr-active:  #e8931a;
    --footer-bg:   #0d1117;
    --footer-text: rgba(255,255,255,0.3);
    --card-bg:     #161b22;
    --card-shadow: 0 2px 8px rgba(0,0,0,0.4);
    --input-bg:    #21262d;
    --input-border:#30363d;
    --table-head:  #21262d;
    --table-hover: #1c2128;
    --accent:      #2e6da4;
}

/* ── BASIS ──────────────────────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    transition: background .2s, color .2s;
}
.page-wrapper { display:flex; flex-direction:column; min-height:100vh; }
.page-wrapper > footer { margin-top:auto; }
.container { max-width:1400px; margin:24px auto; padding:0 20px; width:100%; }

/* ── LOGIN ──────────────────────────────────────────────────────────────── */
body.login-page {
    background: linear-gradient(135deg, #1a3a5c 0%, #2e6da4 100%);
    min-height:100vh; display:flex; align-items:center; justify-content:center;
}
.login-container {
    background: rgba(255,255,255,0.13); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.25); border-radius:18px;
    padding:2.5rem 2rem; width:100%; max-width:420px;
    box-shadow:0 24px 64px rgba(0,0,0,0.4);
}
.login-container .logo { display:block; margin:0 auto 1.5rem; width:180px; filter:brightness(0) invert(1); opacity:.9; }
.login-container h1 { color:#fff; font-size:1.4rem; font-weight:700; text-align:center; margin-bottom:.3rem; }
.login-container .subtitle { color:rgba(255,255,255,0.6); font-size:.85rem; text-align:center; margin-bottom:2rem; }
.login-container label { color:rgba(255,255,255,0.85); font-size:.875rem; font-weight:500; display:block; margin-bottom:.4rem; }
.login-container input[type="email"],
.login-container input[type="password"] {
    width:100%; padding:.7rem 1rem; background:rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.3); border-radius:8px; color:#fff;
    font-size:1rem; margin-bottom:1rem;
}
.login-container input::placeholder { color:rgba(255,255,255,0.45); }
.login-container input:focus { outline:none; border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.22); }
.login-container .btn-login {
    width:100%; padding:.75rem; margin-top:.5rem;
    background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4);
    color:#fff; font-size:1rem; font-weight:600; border-radius:8px; cursor:pointer;
}
.login-container .btn-login:hover { background:rgba(255,255,255,0.3); }
.login-error { background:rgba(220,53,69,.3); border:1px solid rgba(220,53,69,.5); color:#ffc5cc; border-radius:8px; padding:.6rem 1rem; margin-bottom:1rem; font-size:.875rem; }
#logo-bg { position:fixed; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0; }
#logo-bg img { opacity:.35; max-width:75%; max-height:75%; }

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.header {
    background: var(--hdr-bg1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    position: sticky; top:0; z-index:100;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.header-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; min-height: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.header-logo { display:flex; align-items:center; gap:10px; }
.header-logo img { height:26px; filter:brightness(0) invert(1); opacity:.85; }
.header-title { color:rgba(255,255,255,0.9); font-size:.9rem; font-weight:600; white-space:nowrap; }
.header-right { display:flex; align-items:center; gap:8px; }
.header-user  { color:rgba(255,255,255,0.6); font-size:.78rem; white-space:nowrap; }
.header-role  { display:inline-block; font-size:.68rem; padding:.1rem .45rem; border-radius:4px; font-weight:700; margin-left:4px; }
.role-admin       { background:#dc3545; color:#fff; }
.role-verwaltung  { background:#6f42c1; color:#fff; }
.role-beirat      { background:#ffc107; color:#000; }
.role-mitarbeiter { background:#0d6efd; color:#fff; }
.btn-icon { color:rgba(255,255,255,.7); text-decoration:none; font-size:1rem; padding:4px 6px; border-radius:5px; }
.btn-icon:hover { background:rgba(255,255,255,.12); }
.btn-abmelden {
    color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.3);
    background:transparent; padding:.25rem .75rem; border-radius:6px;
    text-decoration:none; font-size:.8rem; white-space:nowrap;
}
.btn-abmelden:hover { background:rgba(255,255,255,.15); }

.header-bottom {
    display: flex; align-items: center;
    padding: 0 8px; overflow-x: auto; -webkit-overflow-scrolling:touch;
}
.header-nav { display:flex; align-items:center; flex:1; }
.header-nav a {
    color: var(--hdr-text); text-decoration:none;
    padding: 0 12px; height:42px; display:flex; align-items:center;
    font-size:.82rem; white-space:nowrap;
    border-bottom: 3px solid transparent;
    transition: background .15s, color .15s;
}
.header-nav a:hover  { background:rgba(255,255,255,0.07); color:#fff; }
.header-nav a.active { color:#fff; border-bottom-color: var(--hdr-active); background:rgba(255,255,255,0.05); }

.theme-toggle {
    background:transparent; border:1px solid rgba(255,255,255,.25);
    color:rgba(255,255,255,.8); border-radius:6px; padding:4px 8px;
    cursor:pointer; font-size:1rem; margin-left:8px; white-space:nowrap;
    flex-shrink:0;
}
.theme-toggle:hover { background:rgba(255,255,255,.12); }

/* ── FLASH ──────────────────────────────────────────────────────────────── */
.flash { padding:10px 20px; border-radius:8px; margin:12px 20px 0; font-size:.875rem; }
.flash-success { background:#d4edda; color:#155724; border-left:4px solid #28a745; }
.flash-warning { background:#fff3cd; color:#856404; border-left:4px solid #ffc107; }
.flash-danger  { background:#f8d7da; color:#721c24; border-left:4px solid #dc3545; }
.flash-info    { background:#d1ecf1; color:#0c5460; border-left:4px solid #17a2b8; }
[data-theme="dark"] .flash-success { background:#1a3a26; color:#75c996; }
[data-theme="dark"] .flash-warning { background:#3a2e00; color:#f0c040; }
[data-theme="dark"] .flash-danger  { background:#3a1a1a; color:#f08080; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding:12px 20px;
    font-size:.8rem;
    border-top: 1px solid var(--border);
}
.footer-inner {
    display:flex; flex-wrap:wrap; gap:12px;
    align-items:center; justify-content:space-between;
    max-width:1200px; margin:0 auto;
}
.footer-links { display:flex; gap:16px; }
.footer-links a { color:var(--footer-text); text-decoration:underline; }
.footer-links a:hover { color:var(--primary); }

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--card-bg); border-radius:12px;
    box-shadow: var(--card-shadow); margin-bottom:24px; overflow:hidden;
    border: 1px solid var(--border);
}
.card-header {
    background:linear-gradient(135deg,#1a3a5c,#2e6da4);
    color:#fff; padding:14px 20px; font-size:.95rem; font-weight:600;
    display:flex; align-items:center; justify-content:space-between;
}
[data-theme="dark"] .card-header { background:linear-gradient(135deg,#1c2a3a,#1e3a5c); }
.card-body { padding:20px; }

/* ── STATS ──────────────────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card  { background:var(--card-bg); padding:20px; border-radius:12px; box-shadow:var(--card-shadow); border:1px solid var(--border); }
.stat-card h3 { color:var(--text-muted); font-size:.8rem; font-weight:500; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
.stat-value   { font-size:2rem; font-weight:700; color:var(--accent); }
.stat-value.green { color:#28a745; }
.progress-bar { background:var(--border); height:22px; border-radius:11px; overflow:hidden; margin-top:12px; }
.progress-fill { height:100%; background:linear-gradient(90deg,#1a3a5c,#2e6da4); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:.78rem; }

/* ── STECHUHR ───────────────────────────────────────────────────────────── */
.stechuhr-card { text-align:center; }
.stechuhr-laufzeit { font-size:3rem; font-weight:700; color:#28a745; font-variant-numeric:tabular-nums; }
.stechuhr-sub  { color:var(--text-muted); font-size:.85rem; margin:.3rem 0 1rem; }
.stechuhr-info { color:var(--text-muted); font-size:.9rem; margin-bottom:1.5rem; }
.btn-kommen { width:100%; padding:1rem; background:#28a745; color:#fff; border:none; border-radius:8px; font-size:1.1rem; font-weight:700; cursor:pointer; }
.btn-kommen:hover { background:#218838; }
.btn-gehen  { width:100%; padding:1rem; background:#dc3545; color:#fff; border:none; border-radius:8px; font-size:1.1rem; font-weight:700; cursor:pointer; }
.btn-gehen:hover  { background:#c82333; }
.warn-box { background:#fff3cd; color:#856404; border:1px solid #ffc107; border-radius:8px; padding:10px 14px; margin-bottom:1rem; font-size:.875rem; }

/* ── GRIDS ──────────────────────────────────────────────────────────────── */
.stechuhr-grid { display:grid; grid-template-columns:1fr 1fr;   gap:24px; align-items:start; }
.az-grid       { display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start; }
.urlaub-grid   { display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start; }
.az-grid > *, .urlaub-grid > *, .stechuhr-grid > * { min-width:0; }

/* ── TABELLEN ───────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table { min-width:480px; }
table.data { width:100%; border-collapse:collapse; font-size:.88rem; }
table.data th { background:var(--table-head); color:var(--accent); padding:9px 12px; text-align:left; font-weight:600; border-bottom:2px solid var(--border); }
table.data td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data tr:last-child td { border-bottom:none; }
table.data tr:hover td { background:var(--table-hover); }
table.data tr.row-warn td { background:#fffbea; }
table.data tr.row-auto td { background:var(--table-head); color:var(--text-muted); }
table.data tfoot td { background:var(--table-head); font-weight:700; color:var(--accent); }

/* ── BADGES ─────────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:12px; font-size:.72rem; font-weight:700; }
.badge-ok       { background:#d4edda; color:#155724; }
.badge-warn     { background:#fff3cd; color:#856404; }
.badge-auto     { background:#e2e3e5; color:#383d41; }
.badge-offen    { background:#fff3cd; color:#856404; }
.badge-pending  { background:#e2e3e5; color:#383d41; }
.badge-approved { background:#d4edda; color:#155724; }
.badge-denied   { background:#f8d7da; color:#721c24; }
[data-theme="dark"] .badge-ok       { background:#1a3a26; color:#75c996; }
[data-theme="dark"] .badge-approved { background:#1a3a26; color:#75c996; }
[data-theme="dark"] .badge-denied   { background:#3a1a1a; color:#f08080; }
[data-theme="dark"] .badge-warn, [data-theme="dark"] .badge-offen { background:#3a2e00; color:#f0c040; }
[data-theme="dark"] .badge-auto, [data-theme="dark"] .badge-pending { background:#21262d; color:#8b949e; }

/* ── FORMULARE ──────────────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.form-grid > * { min-width:0; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:.875rem; font-weight:500; color:var(--text); }
.form-group input, .form-group select, .form-group textarea {
    padding:.5rem .8rem; border:1px solid var(--input-border);
    border-radius:6px; font-size:.88rem; font-family:inherit;
    background:var(--input-bg); color:var(--text);
    transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:#2e6da4; }
.form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.form-row .form-group { flex:1; min-width:140px; }
.required { color:#dc3545; }
.tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn { display:inline-block; padding:.42rem 1rem; border-radius:6px; font-size:.855rem; font-weight:600; cursor:pointer; border:none; text-decoration:none; transition:opacity .2s; }
.btn:hover { opacity:.85; }
.btn-primary   { background:#1a3a5c; color:#fff; }
.btn-success   { background:#28a745; color:#fff; }
.btn-danger    { background:#dc3545; color:#fff; }
.btn-warning   { background:#e8931a; color:#fff; }
.btn-secondary { background:#6c757d; color:#fff; }
.btn-outline   { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-sm        { padding:.25rem .65rem; font-size:.78rem; }
.btn-block     { display:block; width:100%; text-align:center; }

/* ── UTILS ──────────────────────────────────────────────────────────────── */
.text-muted  { color:var(--text-muted); }
.text-right  { text-align:right; }
.text-center { text-align:center; }
.mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;}
.mb-1{margin-bottom:.5rem;} .mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;}
.flex         { display:flex; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.flex-gap     { gap:10px; }
.empty-state  { text-align:center; padding:36px 20px; color:var(--text-muted); }
.empty-state .icon { font-size:2.8rem; display:block; margin-bottom:12px; }
.divider      { border:none; border-top:1px solid var(--border); margin:18px 0; }

/* ── DRUCK ──────────────────────────────────────────────────────────────── */
@media print {
    .header, footer, .no-print, .btn { display:none !important; }
    body { background:#fff; color:#000; }
    .card { box-shadow:none; border:1px solid #ccc; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:768px) {
    .container    { padding:0 12px; margin:16px auto; }
    .stats-grid   { grid-template-columns:1fr 1fr; }
    .form-grid    { grid-template-columns:1fr; }
    .header-user  { display:none; }
    .az-grid, .urlaub-grid { grid-template-columns:1fr; }
    .stechuhr-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
    .stats-grid   { grid-template-columns:1fr; }
}