/* --- /styles/hea_backoffice.css (organized, dark-mode ready) --- */
/* Backoffice-only extras + legacy shims (tokens come from styles/hea_tokens.css) */
/* =========================
   1) Design tokens
   ========================= */
/* --- /styles/hea_tokens.css — single source of truth --- */

:root{
  /* keep: component-specific extras (not in canon) */
  --radius-sm: 6px;

  /* 🔁 legacy aliases (temporary) — map old names to canon so nothing breaks */
  --brand-color-primary:   var(--brand1);
  --brand-color-secondary: var(--brand2);
  --brand-color-accent:    var(--brand-accent);

  /* ⚠️ status: choose ONE approach
     A) If you standardize on canon names everywhere, map old → canon: */
  --error: var(--fail);
  /* If you need info globally, either add it to canon or keep local: */
  --info:  #0275d8; /* or promote to hea_tokens.css if widely used */

  /* B) Or, if backoffice really wants its own tones, define them here using canon as base:
  --ok:   color-mix(in oklab, var(--ok) 100%, transparent);
  --warn: color-mix(in oklab, var(--warn) 100%, transparent);
  --fail: color-mix(in oklab, var(--fail) 100%, transparent);
  --info: #0275d8;
  */
}

/* Optional: minor dark tweak for local-only colors */
@media (prefers-color-scheme: dark){
  :root{
    /* Only if you kept local custom tones:
    --info: color-mix(in oklab, #3a94ff 92%, black 8%);
    */
  }
}

html{ color-scheme: light dark; }

/* =========================
   2) Type & headings
   ========================= */
h1{ color:var(--ink); }

/* =========================
   3) Buttons
   ========================= */
.button-backoffice{
  padding:.45rem .85rem;
  margin-right:.35rem;
  min-width:50px; max-width:200px;
  background: var(--brand-color-accent);
  color:#fff; border:none; border-radius:var(--radius-sm); cursor:pointer;
  transition: filter .15s ease, transform .03s ease, box-shadow .15s ease;
}
.button-backoffice:hover{ filter:brightness(.95); }
.button-backoffice:active{ transform: translateY(0.5px); }
.button-backoffice:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring);
}

/* Generic small buttons used in log rows etc. */
.button{
  margin-left:.4em; padding:.25em .6em;
  border:none; border-radius:var(--radius-sm); cursor:pointer; color:#fff;
  transition: opacity .15s ease, transform .03s ease, box-shadow .15s ease;
}
.button:hover{ opacity:.92; }
.button:active{ transform: translateY(0.5px); }
.button:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring); }

.retry{ background: var(--info); }
.delete{ background: var(--error); }
.loglink{ font-size:.9em; margin-left:.6em; color:var(--ink); }

/* Badges */
.badge{
  padding:.2em .6em; border-radius:var(--radius-sm); font-size:.8em; color:#fff; display:inline-block;
}
.badge.done{ background: var(--ok); }
.badge.failed{ background: var(--error); }
.badge.pending{ background: #6c757d; }

/* =========================
   4) Logs / Table rows
   ========================= */
.log-row td{
  background: var(--surface-2);
  padding:1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  color: var(--ink);
  border-top:1px solid var(--line);
}

/* Inline levels inside log text */
.log-row .log-success{ color: var(--ok); font-weight:700; }
.log-row .log-error{ color: var(--error); font-weight:700; }
.log-row .log-warning{ color: var(--warn); font-weight:700; }

/* Optional single-line log snippet under items */
.logline{
  display:block; font-size:.85em; color:var(--muted); margin-top:.2em;
}