:root { --border:#d0d7de; --muted:#6b7280; --bg:#f6f8fa; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); }
.page { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px; }
.card {
  width: min(460px, 100%);
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
h1 { margin: 0 0 6px; font-size: 1.4rem; }
.muted { color: var(--muted); margin: 0 0 14px; }
label { display:block; margin: 12px 0; font-weight: 600; }
input {
  margin-top: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
}


button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #1F497D;
  color: white;
  font-weight: 700;
  cursor: pointer;
}
button:hover { opacity: 0.95; }
hr { border:0; border-top:1px solid var(--border); margin: 16px 0; }
.msg { margin-top: 12px; font-weight: 600; }
.msg.ok { color: #166534; }
.msg.err { color: #991b1b; }
details summary { cursor: pointer; }
details button { margin-top: 10px; background:#374151; }

/* Select optisch wie Input, Button bleibt untouched */
select {
  margin-top: 6px;
  width: 100%;
  padding: 10px 42px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  background-color: #fff;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Focus wie Input */
select:focus {
  outline: none;
  border-color: #1F497D;
  box-shadow: 0 0 0 3px rgba(31, 73, 125, 0.18);
}

/* Optional: größer nur für Büro */
#officeCode {
  font-size: 1.1rem;
  padding-top: 14px;
  padding-bottom: 14px;
}
.week-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.week-badge.correction-required {
  background: #fde68a; /* yellow */
  color: #92400e;
  border: 1px solid #f59e0b;
}

.week-badge.corrected {
  background: #dbeafe; /* blue */
  color: #1e40af;
  border: 1px solid #60a5fa;
}

/* ================================
   Admin Timesheets – Mini Buttons
   ================================ */
.card-head .mini-btn{
  width: auto;                 /* nicht 100% */
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #1f2937;
  background: #374151;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.2;
}

.card-head .mini-btn:hover:not(:disabled){
  background: #1f2937;
}

.card-head .mini-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* optional: farbige Bedeutungen über data-action */
.card-head .mini-btn[data-action="req"]{
  background:#2563eb; border-color:#1d4ed8;
}
.card-head .mini-btn[data-action="cancel"]{
  background:#ca8a04; border-color:#a16207;
}
.card-head .mini-btn[data-action="lock"]{
  background:#b91c1c; border-color:#991b1b;
}
/* =========================================
   Employee Header – Abstand zum Bildschirmrand
   ========================================= */