/* machine_view.css — FORCE KPI 1 ligne + tabs boutons (UI only) */

/* Full width */
.machine-view-wide .main-content{
  max-width:none !important;
  width:calc(100% - 260px) !important;
  padding-left:18px !important;
  padding-right:18px !important;
  overflow-x:hidden !important;
}
.machine-view-wide .machine-view-page > .container,
.machine-view-wide .machine-view-page .container{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
}

/* KPI : 4 cartes sur UNE ligne */
.machine-view-wide .kpis{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap:12px !important;
  margin:12px 0 14px 0 !important;
}
.machine-view-wide .kpis > .card.kpi{
  width:auto !important;
  margin:0 !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  border:1px solid var(--border) !important;
  background:var(--card) !important;
  box-shadow: var(--shadow) !important;
}
.machine-view-wide .kpis > .card.kpi .label{
  font-size:12px !important;
  color:var(--muted) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  margin:0 0 6px 0 !important;
}
.machine-view-wide .kpis > .card.kpi .value{
  font-size:14px !important;
  font-weight:900 !important;
}
.machine-view-wide .mini{ color:var(--muted) !important; font-weight:800 !important; margin-left:8px !important; }

/* responsive */
@media (max-width:1100px){
  .machine-view-wide .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:560px){
  .machine-view-wide .kpis{ grid-template-columns: 1fr !important; }
}

/* Tabs => boutons */
.machine-view-wide .tabs{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  padding:8px 0 2px 0 !important;
  border-bottom:1px solid var(--border) !important;
  margin-bottom:14px !important;
}
.machine-view-wide .tabs > .tab{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px solid var(--border) !important;
  background:#fff !important;
  color:var(--text) !important;
  font-weight:900 !important;
  font-size:13px !important;
  text-decoration:none !important;
}
.machine-view-wide .tabs > .tab:hover{ background:#f8fafc !important; }
.machine-view-wide .tabs > .tab.active{
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.35) !important;
  color:#1e3a8a !important;
}

/* mobile padding */
@media (max-width:700px){
  .machine-view-wide .main-content{
    width:auto !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}
/* ===== FORMULAIRE MACHINE : 3 COLONNES (UI ONLY) ===== */

.machine-view-wide .machine-form{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:14px 18px !important;
}

.machine-view-wide .machine-form .form-group{
  display:flex !important;
  flex-direction:column !important;
}

/* champs pleine largeur (notes, textarea, photos, etc.) */
.machine-view-wide .machine-form .full{
  grid-column: 1 / -1 !important;
}

/* responsive */
@media (max-width:1100px){
  .machine-view-wide .machine-form{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:600px){
  .machine-view-wide .machine-form{
    grid-template-columns: 1fr !important;
  }
}
.badge{
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
}

.machine-view-page .page-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.machine-view-page .machine-header-actions,
.machine-view-page .machine-nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.machine-view-page .machine-action-btn,
.machine-view-page .machine-nav-actions > a,
.machine-view-page .machine-nav-actions > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #d1d5db;
  background:#ffffff;
  color:#111827;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
  box-sizing:border-box;
}

.machine-view-page a.machine-action-btn,
.machine-view-page .machine-nav-actions > a{
  cursor:pointer;
}

.machine-view-page .machine-action-btn.btn-dark{
  border-color:#111827;
  background:#111827;
  color:#ffffff;
}

.machine-view-page .machine-action-btn.btn-light,
.machine-view-page .machine-nav-actions > a.btn-light,
.machine-view-page .machine-nav-actions > span.btn-light{
  border-color:#d1d5db;
  background:#ffffff;
  color:#111827;
}

.machine-view-page a.machine-action-btn:hover,
.machine-view-page .machine-nav-actions > a:hover{
  background:#f8fafc;
}

.machine-view-page .machine-action-btn.btn-dark:hover{
  background:#0f172a;
}

.machine-view-page .machine-action-btn.is-disabled,
.machine-view-page .machine-nav-actions > span{
  opacity:.5;
  cursor:not-allowed;
}

@media (max-width:700px){
  .machine-view-page .page-title{
    align-items:flex-start;
  }
}

.b-ok{
  background:#dcfce7;
  color:#166534;
}

.b-todo{
  background:#fef9c3;
  color:#854d0e;
}

.b-warning{
  background:#fee2e2;
  color:#991b1b;
}