:root{
  --maint-red: #8f1d1d;
  --maint-gray: #f2f2f3;
  --maint-gray2:#e7e7ea;
  --maint-input:#f8f8fa;
  --text:#1e1e1e;
}

/* ===== Layout ===== */
.maint-wrap{
  max-width: 1200px;
  margin: 14px auto 40px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
}

.maint-side, .maint-main{
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.maint-side{ padding: 14px; }
.maint-main{ padding: 14px; }

/* ===== Sidebar ===== */
.side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.side-title{
  font-weight: 900;
  font-size: 16px;
}

/* ===== Search ===== */
.side-search{
  position: relative;
  margin-bottom: 12px;
}

.side-search::before{
  content:"🔎";
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .6;
}

.side-search input{
  width: 100%;
  padding: 10px 12px 10px 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--maint-input);
  font-size: 14px;
  font-weight: 600;
}

.side-search input:focus{
  outline: none;
  border-color: var(--maint-red);
  background: #fff;
}

/* ===== Machines list ===== */
.machines-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: calc(100vh - 260px);
  overflow:auto;
  padding-right: 4px;
}

.machine-item{
  border: 1px solid rgba(0,0,0,.08);
  background: var(--maint-gray);
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
  transition: transform .06s ease, background .12s ease;
}
.machine-item:hover{
  transform: translateY(-1px);
  background: var(--maint-gray2);
}
.machine-item .name{ font-weight: 900; }
.machine-item .meta{
  font-size: 12px;
  opacity:.75;
  margin-top:2px;
}

/* ===== Calendar header ===== */
.cal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7f7f8, #fff);
  border: 1px solid rgba(0,0,0,.06);
}

.cal-nav{ display:flex; align-items:center; gap:10px; }

.cal-title{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--maint-red);
}

/* ===== Legend ===== */
.cal-legend{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin: 10px 4px 12px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
}
.pill.pending{ background: #fff6cc; }
.pill.done{ background: #d9f7dc; }
.pill.neutral{ background: #f3f3f6; }

/* ===== Calendar ===== */
.calendar{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow: hidden;
}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-dow{
  background: #f3f3f5;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-weight: 900;
  font-size: 12px;
  text-align:center;
  padding: 10px 6px;
}

.cal-cell{
  min-height: 110px;
  border-right: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 8px;
  background: #fafafa;
  position: relative;
  cursor: pointer;
}
.cal-cell:nth-child(7n){ border-right: none; }
.cal-cell.out{ background: #f5f5f6; opacity:.65; }
.cal-cell.today{
  outline: 2px solid rgba(143,29,29,.25);
  outline-offset: -2px;
}

.daynum{
  font-weight: 900;
  font-size: 12px;
  color: #333;
}

.events{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.event-pill{
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-pill.pending{ background: #fff1a8; }
.event-pill.done{ background: #bff1c6; }

/* ===== Modal ===== */
.modal.hidden{ display:none; }

.modal{
  position: fixed;
  inset:0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}

.modal-card{
  width: min(720px, 96vw);
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.10);
  z-index: 2;
}

.modal-scrim{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index: 1;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
}

.modal-title{
  font-weight: 900;
  color: var(--maint-red);
}

.modal-body{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 6px;
}

/* ===== Form fields (KEY FIX) ===== */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field > span{
  font-size: 12px;
  font-weight: 900;
  opacity: .8;
}

.field input,
.field textarea,
.field select{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--maint-input);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: none;
  border-color: var(--maint-red);
  background: #fff;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field.checkbox{
  flex-direction: row;
  align-items:center;
  gap:10px;
  background: #f7f7f9;
  border: 1px solid rgba(0,0,0,.08);
  padding: 12px;
  border-radius: 14px;
}
.field.checkbox span{
  font-size: 13px;
  font-weight: 900;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .maint-wrap{ grid-template-columns: 1fr; }
  .machines-list{ max-height: none; }
  .grid2{ grid-template-columns: 1fr; }
}
/* ===== Header aligné avec le layout ===== */
.maint-shell{
  max-width: 1200px;     /* igual que .maint-wrap */
  margin: 0 auto;
  padding: 0 14px;       /* igual que .maint-wrap */
}

.maint-header{
  background: linear-gradient(135deg, #f6f7f9 0%, #ffffff 70%);
  border: 1px solid rgba(0,0,0,.06);
  border-bottom: 2px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  margin: 14px auto 12px;
}

.maint-header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px;
}

.maint-titlewrap{ display:flex; align-items:center; gap:12px; }

.maint-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.06);
  font-size: 22px;
  flex: 0 0 auto;
}

.maint-main-title{
  font-size: 22px;
  font-weight: 900;
  color:#111827;
  line-height: 1.05;
  letter-spacing: .2px;
}

.maint-subtitle{
  font-size: 13px;
  font-weight: 800;
  color:#6b7280;
  margin-top: 3px;
}

@media (max-width: 720px){
  .maint-header-inner{ flex-direction: column; align-items: stretch; }
}
/* ===== Bouton header : Menu principal ===== */
.btn-header{
  background: #ffffff;
  border: 2px solid rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition:
    transform .08s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.btn-header:hover{
  transform: translateY(-1px);
  border-color: rgba(143,29,29,.45);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  background: #fafafa;
}

.btn-header:active{
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
}