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

body {
  background-color: #1e2124;
  color: #dcddde;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 24px 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Navigation semaine ── */
.week-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.week-nav-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

h1#textToSend {
  font-family: 'Uni Sans', 'Segoe UI', sans-serif;
  font-size: 1.3rem;
  color: #ffffff;
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
}

h1#textToSend:focus {
  outline: 2px solid #5865f2;
  background: rgba(88, 101, 242, .08);
}

.btn-nav {
  background: #2c2f33;
  border: 1px solid #40444b;
  color: #dcddde;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}

.btn-nav:hover {
  background: #40444b;
  transform: scale(1.06);
}

.btn-week-current {
  background: #5865f2;
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}

.btn-week-current:hover {
  background: #4752c4;
  transform: scale(1.05);
}



#outputImage {

  display: none;
}



/* ── Tableau ── */
#myTable {
  border-collapse: collapse;
  margin: 0 auto 20px;
  font-family: 'Uni Sans', 'Segoe UI', sans-serif;
  font-size: 17px;
  background: #2c2f33;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
}

td {
  padding: 12px 16px;
  border: 1px solid #40444b;
  vertical-align: middle;
  color: #dcddde;
}

#myTable tr:hover td {
  background: rgba(88, 101, 242, .07);
}

td:first-child {
  font-weight: 600;
  color: #b9bbbe;
  width: 110px;
  white-space: nowrap;
}

/* Connector cell for extra rows of the same day */
.td-connector {
  color: #cc0000 !important;
  font-size: 1.1rem;
  font-weight: 400;
  padding-left: 24px !important;
  width: 110px;
  white-space: nowrap;
  border-top: none !important;
}

/* Base rows get a stronger bottom border when an extra row follows */
#myTable tr:has(+ .extra-row) > td {
  border-bottom: 1px solid #cc000033;
}

/* Extra rows: left red bar + no top border for seamless grouping */
#myTable tr.extra-row {
  background: rgba(100,0,0,0.08);
}

#myTable tr.extra-row td {
  border-top: none;
}

/* Stronger separator between different day groups */
#myTable tr:not(.extra-row) td {
  border-top: 2px solid #1a0000;
}

td:nth-child(2) {
  text-align: center;
  min-width: 380px;
}

td:nth-child(3) {
  text-align: center;
  min-width: 80px;
}

td:last-child {
  text-align: center;
  font-size: 140%;
  padding: 8px;
  min-width: 50px;
}

.td-add {
  padding: 4px 6px !important;
  border-left: none !important;
  width: 30px;
  min-width: 30px;
}

.btn-add-row {
  background: none;
  border: 1px solid #40444b;
  color: #72767d;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-add-row:hover {
  background: #cc0000;
  border-color: #cc0000;
  color: #fff;
}

.btn-add-row.btn-remove-row {
  color: #5c2020;
  border-color: #5c2020;
}

.btn-add-row.btn-remove-row:hover {
  background: #8b0000;
  border-color: #8b0000;
  color: #fff;
}

td.editable:focus {
  outline: 2px solid #5865f2;
  background: rgba(88, 101, 242, .08);
}



/* ── Boutons d'action ── */
.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn-action {
  padding: 11px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
}

.btn-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

.btn-action:active {
  transform: translateY(0);
}

.btn-save {
  background: #57f287;
  color: #0d0d0d;
}

.btn-save:hover {
  background: #3ba55d;
  color: #fff;
}

.btn-clear {
  background: #ed4245;
  color: #fff;
}

.btn-clear:hover {
  background: #a12d2f;
}

/* ── Barre de statut ── */
#status-bar {
  text-align: center;
  font-size: 0.85rem;
  color: #72767d;
  margin-top: 12px;
  min-height: 28px;
  padding: 4px 16px;
  border-radius: 6px;
  transition: color .3s, background .3s;
}

#status-bar.ok {
  color: #57f287;
  background: rgba(87, 242, 135, .1);
  border: 1px solid rgba(87, 242, 135, .25);
}

#status-bar.err {
  color: #ed4245;
  background: rgba(237, 66, 69, .1);
  border: 1px solid rgba(237, 66, 69, .25);
}

#status-bar.ok {
  color: #57f287;
}

#status-bar.err {
  color: #ed4245;
}

/* ── Compatibilité ── */
#outputImage {
  display: none;
}

.center {
  text-align: center;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}