/* ==========================================================================
   DashView — Odoo Live: header, connection card and connection health (v2.21)
   Scoped to #view-odoo-live so the Overview page (which shares the old banner
   class) is untouched. Uses theme tokens only, so every theme / accent works.
   ========================================================================== */

#view-odoo-live {
  --olp-ok: var(--emerald, var(--ios-green, #1f9d55));
  --olp-warn: #d9922b;
  --olp-bad: var(--danger, #d64545);
  --olp-card: var(--paper-soft);
  --olp-edge: color-mix(in srgb, var(--ink) 11%, transparent);
}

/* -- Header -------------------------------------------------------------- */
#view-odoo-live .olp-head { align-items: center; margin-bottom: 20px; gap: 18px 24px; }
#view-odoo-live .olp-title h1 { letter-spacing: -.02em; gap: 14px; }
#view-odoo-live .olp-title p { max-width: 62ch; line-height: 1.5; }

#view-odoo-live #odooLiveStatus {
  gap: 8px; padding: 5px 12px 5px 10px; font: 600 11.5px/1 var(--f-body, inherit);
  letter-spacing: .02em; text-transform: none; border-radius: 999px;
  border: 1px solid var(--olp-edge); background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-50);
  vertical-align: middle; box-shadow: none;
}
#view-odoo-live #odooLiveStatus .dot { width: 7px; height: 7px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
#view-odoo-live #odooLiveStatus.is-live { color: var(--olp-ok); background: color-mix(in srgb, var(--olp-ok) 11%, transparent); border-color: color-mix(in srgb, var(--olp-ok) 32%, transparent); }
#view-odoo-live #odooLiveStatus.is-live .dot { background: var(--olp-ok); }
#view-odoo-live #odooLiveStatus.is-error { color: var(--olp-bad); background: color-mix(in srgb, var(--olp-bad) 10%, transparent); border-color: color-mix(in srgb, var(--olp-bad) 30%, transparent); }
#view-odoo-live #odooLiveStatus.is-error .dot { background: var(--olp-bad); }
#view-odoo-live #odooLiveStatus.is-connecting { color: var(--olp-warn); background: color-mix(in srgb, var(--olp-warn) 11%, transparent); border-color: color-mix(in srgb, var(--olp-warn) 32%, transparent); }

/* Auto-refresh + Refresh as one control */
#view-odoo-live .olp-toolbar {
  gap: 0; padding: 4px; border-radius: 14px; background: var(--olp-card);
  border: 1px solid var(--olp-edge); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
}
#view-odoo-live .olp-auto { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; color: var(--ink-50); cursor: pointer; }
#view-odoo-live .olp-auto select.pro-select {
  border: 0; background-color: transparent; box-shadow: none; height: 34px; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--ink-70); padding-right: 28px; cursor: pointer;
}
#view-odoo-live .olp-auto:hover select.pro-select { color: var(--ink); }
#view-odoo-live .olp-sep { display: block; flex: none; width: 1px; min-width: 1px; max-width: 1px; height: 20px; padding: 0; border: 0; border-radius: 0; background: var(--olp-edge); margin: 0 4px; }
#view-odoo-live .olp-toolbar .btn {
  border: 0; border-radius: 10px; height: 34px; padding: 0 14px; font-weight: 600; font-size: 12.5px;
  background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent), inset 0 0 0 1px var(--olp-edge);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
#view-odoo-live .olp-toolbar .btn:hover { background: color-mix(in srgb, var(--signal) 10%, var(--paper)); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--signal) 40%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--signal) 45%, transparent); }
#view-odoo-live .olp-toolbar .btn:active { transform: translateY(1px); }

/* -- Connection card ------------------------------------------------------ */
#view-odoo-live #odooLiveConnectBanner.olp-conn {
  --tone: var(--signal);
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 20px 22px 20px 24px; margin-bottom: 16px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--olp-edge)); border-radius: 18px; color: var(--ink-70);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 58%),
    var(--olp-card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px -20px color-mix(in srgb, var(--tone) 55%, transparent);
}
#view-odoo-live #odooLiveConnectBanner.olp-conn::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 35%, transparent));
}
#view-odoo-live #odooLiveConnectBanner[data-tone="error"] { --tone: var(--olp-bad); }
#view-odoo-live #odooLiveConnectBanner[data-tone="locked"] { --tone: var(--ink-50); }
#view-odoo-live #odooLiveConnectBanner[hidden] { display: none !important; }

#view-odoo-live .olp-conn-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent);
}
#view-odoo-live .olp-conn-main { min-width: 0; }
#view-odoo-live .olp-conn-main > p { margin: 0; overflow-wrap: anywhere; }
#view-odoo-live .olp-conn-main > p strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin-bottom: 3px; }
#view-odoo-live .olp-conn-main > p span { display: block; font-size: 13px; line-height: 1.55; color: var(--ink-50); max-width: 74ch; }
#view-odoo-live .olp-conn-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 150px; }
#view-odoo-live .olp-conn-actions .btn { justify-content: center; height: 38px; border-radius: 11px; font-weight: 600; }
#view-odoo-live .olp-conn-actions .btn-primary {
  background: var(--signal); color: #1a1300; border: 0;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--signal) 75%, transparent), inset 0 -1px 0 rgba(0,0,0,.12);
}
#view-odoo-live .olp-conn-actions .btn-primary:hover { background: color-mix(in srgb, var(--signal) 88%, #fff); color: #1a1300; transform: translateY(-1px); }
#view-odoo-live #odooLiveConnectBanner[data-tone="error"] .btn-primary { background: var(--olp-bad); color: #fff; }

/* Setup progress */
#view-odoo-live .olp-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#view-odoo-live .olp-step {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--olp-edge); color: var(--ink-50);
}
#view-odoo-live .olp-step-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 700 11px/1 var(--f-mono, monospace); color: var(--ink-50);
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--olp-edge);
}
#view-odoo-live .olp-step-text { display: grid; line-height: 1.2; }
#view-odoo-live .olp-step-text b { font-size: 12.5px; font-weight: 650; color: var(--ink-70); }
#view-odoo-live .olp-step-text em { font-style: normal; font-size: 11px; color: var(--ink-50); }
#view-odoo-live .olp-step.is-done { border-color: color-mix(in srgb, var(--olp-ok) 32%, transparent); background: color-mix(in srgb, var(--olp-ok) 7%, var(--paper)); }
#view-odoo-live .olp-step.is-done .olp-step-dot { background: var(--olp-ok); color: #fff; box-shadow: none; }
#view-odoo-live .olp-step.is-current { border-color: color-mix(in srgb, var(--signal) 55%, transparent); background: color-mix(in srgb, var(--signal) 9%, var(--paper)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent); }
#view-odoo-live .olp-step.is-current .olp-step-dot { background: var(--signal); color: #1a1300; box-shadow: none; }
#view-odoo-live .olp-step.is-current .olp-step-text b { color: var(--ink); }
#view-odoo-live .olp-step.is-error { border-color: color-mix(in srgb, var(--olp-bad) 45%, transparent); background: color-mix(in srgb, var(--olp-bad) 8%, var(--paper)); }
#view-odoo-live .olp-step.is-error .olp-step-dot { background: var(--olp-bad); color: #fff; box-shadow: none; }
#view-odoo-live .olp-step.is-error .olp-step-text em { color: var(--olp-bad); }

/* -- Connection health ----------------------------------------------------- */
#view-odoo-live .odoo-live-checkpoints { margin-bottom: 20px; }
#view-odoo-live .olp-health {
  --meter: var(--signal);
  padding: 18px 20px 20px; border-radius: 18px; background: var(--olp-card); border: 1px solid var(--olp-edge);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
}
#view-odoo-live .olp-health[data-tone="ok"] { --meter: var(--olp-ok); }
#view-odoo-live .olp-health[data-tone="low"] { --meter: var(--olp-warn); }
#view-odoo-live .olp-health-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px; margin-bottom: 16px; }
#view-odoo-live .olp-health-title h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
#view-odoo-live .olp-health-title p { margin: 2px 0 0; font-size: 12px; color: var(--ink-50); }
#view-odoo-live .olp-meter { display: grid; gap: 7px; min-width: 170px; }
#view-odoo-live .olp-meter-num { font-size: 12px; color: var(--ink-50); text-align: right; font-variant-numeric: tabular-nums; }
#view-odoo-live .olp-meter-num b { font-size: 15px; font-weight: 750; color: var(--ink); }
#view-odoo-live .olp-meter-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
#view-odoo-live .olp-meter-bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--meter), color-mix(in srgb, var(--meter) 60%, #fff)); transition: width .5s cubic-bezier(.16,1,.3,1); }
#view-odoo-live .olp-health-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: 600 12.5px var(--f-body, inherit); color: var(--ink-70); background: var(--paper); border: 1px solid var(--olp-edge);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
#view-odoo-live .olp-health-toggle:hover { color: var(--ink); border-color: color-mix(in srgb, var(--signal) 50%, transparent); background: color-mix(in srgb, var(--signal) 8%, var(--paper)); }
#view-odoo-live .olp-chev { transition: transform .2s ease; }
#view-odoo-live .olp-health-toggle[aria-expanded="true"] .olp-chev { transform: rotate(180deg); }

#view-odoo-live .olp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
#view-odoo-live .olp-tile {
  --c: var(--ink-50);
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: 14px; background: var(--paper); border: 1px solid var(--olp-edge);
  transition: transform .15s ease, border-color .15s ease;
}
#view-odoo-live .olp-tile:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
#view-odoo-live .olp-tile.ok { --c: var(--olp-ok); border-color: color-mix(in srgb, var(--olp-ok) 30%, transparent); }
#view-odoo-live .olp-tile.warn { --c: var(--olp-warn); }
#view-odoo-live .olp-tile.blocked { --c: var(--olp-bad); }
#view-odoo-live .olp-tile-icon {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}
#view-odoo-live .olp-tile-text { display: grid; gap: 2px; min-width: 0; }
#view-odoo-live .olp-tile-text b { font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.3; }
#view-odoo-live .olp-tile-text em { font-style: normal; font-size: 11.5px; color: var(--ink-50); line-height: 1.35; }
#view-odoo-live .olp-tile-state {
  font: 700 10.5px/1 var(--f-body, inherit); letter-spacing: .03em; text-transform: uppercase; color: var(--c);
  padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 11%, transparent); white-space: nowrap;
}

#view-odoo-live .olp-ops { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--olp-edge); }
#view-odoo-live .olp-ops[hidden] { display: none; }
#view-odoo-live .olp-ops-title { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
#view-odoo-live .olp-ops-title span { font-weight: 400; color: var(--ink-50); margin-left: 6px; }
#view-odoo-live .olp-ops .odoo-checkpoint-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; }
#view-odoo-live .olp-ops .odoo-checkpoint { background: var(--paper); border-radius: 12px; border-color: var(--olp-edge); }

/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 860px) {
  #view-odoo-live #odooLiveConnectBanner.olp-conn { grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding: 18px 16px 18px 20px; }
  #view-odoo-live .olp-conn-icon { width: 44px; height: 44px; }
  #view-odoo-live .olp-conn-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  #view-odoo-live .olp-conn-actions .btn { flex: 1 1 140px; }
  #view-odoo-live .olp-health-head { grid-template-columns: 1fr; }
  #view-odoo-live .olp-meter { min-width: 0; }
  #view-odoo-live .olp-meter-num { text-align: left; }
  #view-odoo-live .olp-health-toggle { justify-self: start; }
}
@media (max-width: 560px) {
  #view-odoo-live .olp-toolbar { width: 100%; justify-content: space-between; }
  #view-odoo-live .olp-steps { flex-direction: column; }
  #view-odoo-live .olp-step { border-radius: 14px; }
  #view-odoo-live .olp-ops .odoo-checkpoint-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #view-odoo-live .olp-tile, #view-odoo-live .olp-meter-bar i, #view-odoo-live .olp-chev { transition: none; }
}