{% comment %}
Shared styles for the plugin pages.

Every colour is a CSS custom property from static/css/cloudpanel.css.  Nothing
here hardcodes a hex value, because dark mode is implemented by redefining those
tokens under [data-theme="dark"] — a literal colour would survive the theme
switch and become unreadable.
{% endcomment %}
<style>
  .cp-plugin-warn {
    background: var(--cp-primary-soft);
    border: 1px solid var(--cp-border);
    border-left: 4px solid var(--cp-danger);
    border-radius: var(--cp-radius);
    color: inherit;
  }
  .cp-plugin-warn .fa-triangle-exclamation { color: var(--cp-danger); }

  .cp-plugin-muted { color: var(--cp-neutral); }

  .cp-plugin-mono {
    font-family: var(--cp-font-mono);
    font-size: 0.85em;
    word-break: break-all;
  }

  .cp-plugin-card {
    background: var(--cp-bg);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow);
  }

  .cp-plugin-chip {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--cp-radius-pill);
    background: var(--cp-bg-subtle);
    border: 1px solid var(--cp-border);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0 0.25rem 0.25rem 0;
  }
  .cp-plugin-chip--on   { background: var(--cp-primary-soft); border-color: var(--cp-primary); }
  .cp-plugin-chip--warn { border-color: var(--cp-danger); color: var(--cp-danger); }
  .cp-plugin-chip--info { border-color: var(--cp-info); }

  .cp-plugin-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--cp-neutral);
    margin-right: 0.4rem;
    vertical-align: middle;
  }
  .cp-plugin-dot--live { background: var(--cp-primary); }
  .cp-plugin-dot--bad  { background: var(--cp-danger); }

  .cp-plugin-hook {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-bg-subtle);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }

  .cp-plugin-log {
    font-family: var(--cp-font-mono);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 28rem;
    overflow-y: auto;
    background: var(--cp-bg-subtle);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: 0.75rem 1rem;
  }
  .cp-plugin-log__error   { color: var(--cp-danger); }
  .cp-plugin-log__warning { color: var(--cp-accent); }
  .cp-plugin-log__info    { color: inherit; }
  .cp-plugin-log__debug   { color: var(--cp-neutral); }

  .cp-plugin-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cp-neutral);
  }
</style>