/* Body + Headings */
body {
  background: #111;
  color: #eee;
  font-family: Arial, sans-serif;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

/* Navigation */
.nav-container {
  text-align: center;
  margin-bottom: 20px;
}

.nav-container form,
.nav-container a {
  display: inline-block;
  margin: 0 5px;
}

.nav-btn {
  background: #444;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.nav-btn:hover {
  background: #666;
}

a.nav-btn {
  text-decoration: none;
}

/* Tabelle */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

th, td {
  border: 1px solid #333;
  padding: 4px;
  text-align: center;
  min-width: 50px;
}

th.name-col, td:first-child {
  width: 1%;
  max-width: max-content;
  text-align: left;
  white-space: nowrap;
}

.team-row {
  background: #222;
  font-weight: bold;
}

button.td-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #ddd;
  cursor: pointer;
}

button.td-btn:hover {
  background: #333;
}

button.shift-btn {
  display: inline-block;
  width: 95%;
  padding: 4px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
}

button.shift-btn.combo-3 {
  font-size: 0.7em;
  line-height: 1em;
  padding: 1px;
}

/* Schichtfarben: Basis */
.btn-F { background: hotpink; color: #000; }
.btn-S { background: #4caf50; }
.btn-N { background: #1e40af; }
.btn-T { background: #006400; }
.btn-H { background: #d2691e; color: #000; } /* HomeOffice fix */
.btn-B { background: turquoise; color: #000; }
.btn-U { background: #f1c40f; color: #000; }
.btn-KR { background: red; }

/* Farbverläufe mit HomeOffice (orange) */
.btn-F-HO { background: linear-gradient(90deg, hotpink 50%, #d2691e 50%); color: #000; }
.btn-F-B  { background: linear-gradient(90deg, hotpink 50%, turquoise 50%); color: #000; }
.btn-F-HO-B { background: linear-gradient(90deg, hotpink 33%, #d2691e 33%, #d2691e 66%, turquoise 66%); color: #000; }

.btn-S-HO { background: linear-gradient(90deg, #4caf50 50%, #d2691e 50%); }
.btn-S-B  { background: linear-gradient(90deg, #4caf50 50%, turquoise 50%); }
.btn-S-HO-B { background: linear-gradient(90deg, #4caf50 33%, #d2691e 33%, #d2691e 66%, turquoise 66%); }

.btn-N-HO { background: linear-gradient(90deg, #1e40af 50%, #d2691e 50%); }
.btn-N-B  { background: linear-gradient(90deg, #1e40af 50%, turquoise 50%); }
.btn-N-HO-B { background: linear-gradient(90deg, #1e40af 33%, #d2691e 33%, #d2691e 66%, turquoise 66%); }

.btn-T-HO { background: linear-gradient(90deg, #006400 50%, #d2691e 50%); }
.btn-T-B  { background: linear-gradient(90deg, #006400 50%, turquoise 50%); }
.btn-T-HO-B { background: linear-gradient(90deg, #006400 33%, #d2691e 33%, #d2691e 66%, turquoise 66%); }

/* Heute-Spalte */
col.today {
  background: #555 !important;
}
.today th, .today td {
  background: #555 !important;
}

/* Wochenende & Feiertage */
.weekend {
  background: #333;
}

.holiday {
  background: orange !important;
  color: #000;
}

/* Legende */
.legend {
  margin-top: 30px;
  text-align: center;
}

.legend button {
  margin: 0 5px;
  font-size: 0.85em;
  padding: 4px 8px;
  width: auto;
  display: inline-block;
}

/* Mobil */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  th, td {
    padding: 2px;
  }

  button.shift-btn {
    width: 100%;
    font-size: 0.85em;
  }

  button.shift-btn.combo-3 {
    font-size: 0.65em;
    line-height: 1em;
    padding: 1px;
  }

  button.td-btn {
    font-size: 0.85em;
  }

  .nav-container form,
  .nav-container a {
    display: block;
    margin: 6px 0;
  }
}