/* ============================================================
   EllioPROD 2 — compléments à la charte EllioCurl (app.css)
   ============================================================ */
:root {
  --st-running: var(--status-good);
  --st-incident: var(--status-critical);
  --st-qualify: var(--status-warning);
  --st-noorder: var(--series-5);
  --st-long: var(--text-muted);
  --st-silent: var(--axis);
}

/* ---- tuiles de ligne (tableau de bord) ---- */
.lines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1250px) { .lines-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .lines-grid { grid-template-columns: 1fr; } }
.line-tile { cursor: pointer; position: relative; border-left: 4px solid var(--axis); transition: border-color .2s; }
.line-tile:hover { background: var(--surface-2); }
.line-tile.st-running { border-left-color: var(--st-running); }
.line-tile.st-incident { border-left-color: var(--st-incident); }
.line-tile.st-no_order { border-left-color: var(--st-noorder); }
.line-tile.st-silent { border-left-color: var(--st-silent); }
.line-tile .head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.line-tile .head b { font-size: 15px; }
.line-tile .head .desc { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-tile .speed { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.line-tile .speed .v { font-size: 34px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.line-tile .speed .u { font-size: 13px; color: var(--text-secondary); }
.line-tile .speed .nom { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.line-tile .meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; flex-wrap: wrap; }
.line-tile .meta b { color: var(--text-primary); font-weight: 600; }
.line-tile canvas.spark { height: 46px; margin-top: 8px; }
.line-tile .foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.line-tile .foot .right { margin-left: auto; }

.badge.st-running { background: color-mix(in srgb, var(--st-running) 16%, transparent); color: var(--st-running); }
.badge.st-incident { background: color-mix(in srgb, var(--st-incident) 16%, transparent); color: var(--st-incident); }
.badge.st-to_qualify, .badge.st-qualify { background: color-mix(in srgb, var(--st-qualify) 22%, transparent); color: color-mix(in srgb, var(--st-qualify) 70%, var(--text-primary)); }
.badge.st-no_order { background: color-mix(in srgb, var(--st-noorder) 16%, transparent); color: var(--st-noorder); }
.badge.st-long_stop { background: var(--surface-2); color: var(--text-secondary); }
.badge.st-ignored { background: var(--surface-2); color: var(--text-muted); text-decoration: line-through; }
.badge.st-open { background: color-mix(in srgb, var(--st-incident) 16%, transparent); color: var(--st-incident); }
.badge.st-qualified { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--status-good); }
.badge.st-silent { background: var(--surface-2); color: var(--text-muted); }
.badge.blink i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .badge.blink i, .live-dot i { animation: none; } }

/* ---- bandeau d'en-tête de vue ---- */
.strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.strip .spacer { flex: 1; }
.strip .title { font-size: 15px; font-weight: 600; }
.strip .sub { color: var(--text-muted); font-size: 12.5px; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 1200px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpis .card { padding: 12px 14px; }
.kpi .v.small { font-size: 20px; }
.kpi .v .unit { font-size: 12px; color: var(--text-muted); font-weight: 500; margin-left: 3px; }

/* ---- onglets ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--grid); margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { border: none; background: transparent; border-radius: 8px 8px 0 0; padding: 9px 14px; color: var(--text-secondary); font-weight: 500; }
.tabs button.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); background: transparent; }
.tabs button:hover { filter: none; background: var(--surface-2); }

/* ---- listes d'incidents ---- */
.tbl tr.to_qualify td:first-child { box-shadow: inset 3px 0 0 var(--st-qualify); }
.tbl tr.open td:first-child { box-shadow: inset 3px 0 0 var(--st-incident); }
.tbl td.wrap { white-space: normal; min-width: 180px; }
.tbl td.actions { text-align: right; white-space: nowrap; }
.dur { font-variant-numeric: tabular-nums; }
.legend-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.legend-row i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }

/* ---- formulaires ---- */
.form-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; align-items: center; }
.form-grid label { font-size: 12.5px; color: var(--text-secondary); }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
textarea { font: inherit; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; outline: none; resize: vertical; min-height: 64px; }
textarea:focus { border-color: var(--accent); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; align-items: center; }
.form-actions .msg { margin-right: auto; font-size: 12.5px; color: var(--text-muted); }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.cause-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; padding: 2px; }
.cause-pick button { text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.cause-pick button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.cause-pick .code { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 11.5px; min-width: 28px; }
.cause-pick .sec { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cause-pick button.np { opacity: .8; }

/* ---- planning ---- */
.plan-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.plan-day { border: 1px solid var(--border); border-radius: 10px; padding: 8px 9px; min-height: 92px; background: var(--surface-1); }
.plan-day.weekend { background: var(--surface-2); }
.plan-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-day .d { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; display: flex; justify-content: space-between; }
.plan-day .sh { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin: 3px 0; }
.plan-day .sh i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--axis); }
.plan-day .sh select { padding: 2px 4px; font-size: 11.5px; border-radius: 6px; flex: 1; min-width: 0; }
.plan-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 6px; }
.plan-head div { padding: 0 9px; }
@media (max-width: 900px) { .plan-grid, .plan-head { grid-template-columns: repeat(2, 1fr); } }

/* ---- acquisition ---- */
.src-box { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.src-box .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.src-box .ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
.mono { font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace; font-size: 12.5px; }
.ok-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--status-good); margin-right: 6px; }
.ok-dot.ko { background: var(--status-critical); }

/* ---- divers ---- */
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); font-weight: 600; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.clickable { cursor: pointer; }
.pill.warn { background: var(--status-warning); color: #0b0b0b; }
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--surface-1); border: 1px solid var(--border); border-left: 4px solid var(--status-good);
  border-radius: 10px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 99; font-size: 13px; max-width: 360px; }
.toast.err { border-left-color: var(--status-critical); }
.progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--seq-300), var(--seq-500)); border-radius: 99px; }
.stack-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.stack-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.oee-row { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--grid); font-size: 13px; }
.oee-row.head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 600; }
.oee-row .bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.oee-row .bar i { display: block; height: 100%; border-radius: 99px; }
.oee-row .num { font-variant-numeric: tabular-nums; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.empty small { display: block; margin-top: 6px; }

/* ---------------- mobile : spécifique EllioProd (prod.css est chargé après app.css) ---------------- */
@media (max-width: 640px) {
  /* Rapports (app.js : style="grid-template-columns:repeat(4|3,1fr)") → 2 colonnes */
  .kpis, .kpis[style] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .kpis .card { padding: 10px 12px; }
  /* OEE par ligne : nom sur une ligne, 4 mesures en 2 × 2 libellées
     (libellés = en-tête .oee-row.head du JS : garder les deux en cohérence) */
  .oee-row { grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px 0; }
  .oee-row.head { display: none; }
  .oee-row > :first-child { grid-column: 1 / -1; }
  .oee-row > div:nth-child(n+2)::before {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); margin-bottom: 3px; font-weight: 600;
  }
  .oee-row > div:nth-child(2)::before { content: 'Disponibilité'; }
  .oee-row > div:nth-child(3)::before { content: 'Performance'; }
  .oee-row > div:nth-child(4)::before { content: 'Qualité'; }
  .oee-row > div:nth-child(5)::before { content: 'OEE'; }
  .oee-row .right { text-align: left; }
  /* formulaires : libellé au-dessus du champ ; app.js max-width:520px inline */
  .form-grid, .form-grid[style] { grid-template-columns: 1fr; gap: 4px 0; max-width: none !important; }
  .form-grid textarea, textarea { font-size: 16px; }   /* prod.css est chargé après app.css : il faut le redire ici */
  .form-grid label { margin-top: 8px; }
  .form-grid label:first-child { margin-top: 0; }
  /* jeton présentateur (app.js min-width:280px inline) */
  .inline > input[style] { min-width: 0 !important; width: 100%; flex: 1 1 100%; }
  /* sélecteur de causes */
  .cause-pick { grid-template-columns: 1fr; max-height: 45vh; max-height: 45dvh; }
  /* planning : un jour par ligne (les cases de décalage en tête de mois restent vides) */
  .plan-head { display: none; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plan-day { min-height: 0; }
  .plan-day .sh select { font-size: 16px; padding: 6px 8px; }
  .two, .lines-grid { grid-template-columns: minmax(0, 1fr); }
  .two > *, .lines-grid > * { min-width: 0; }
  .line-tile .speed .v { font-size: 30px; }
  .tbl td.wrap { min-width: 140px; }
  .toast { left: 12px; right: 12px; max-width: none; bottom: calc(var(--tabbar-h) + 14px + var(--sab)); }
}
@media (hover: none) and (pointer: coarse) {
  .line-tile:hover { background: var(--surface-1); }
  .tabs button:hover { background: transparent; }
}