:root{
  --c-body-bg:#fff; --c-bg-box:#f7f7f7; --c-bg-table-head:#ececec; --c-bg-table-head-highlights:#8c8cdb; --c-bg-table-highlights:#fafafc; --c-bg-table-row-alt:#fafafa;
  --c-border:#d0d0d0; --c-primary:#0066ff; --c-success:#28a745; --c-danger:#dc3545; --c-warn:#FFBF00; --c-text:#222;
  --c-badge-ok:#e6f6ec; --c-badge-fail:#fde7e9; --text-muted:#555555;
  --secret-fg: var(--c-text);
  --secret-bg: color-mix(in srgb, var(--c-text) 8%, var(--c-body-bg));
  --secret-br: color-mix(in srgb, var(--c-text) 25%, transparent);
  --secret-bg-hover: color-mix(in srgb, var(--c-text) 12%, var(--c-body-bg));
  /* base colours of statuses - next mixed with background using color-mix */
  --status-primary: var(--c-primary);  /* queued */
  --status-info:    #3b82f6;           /* sent */
  --status-success: #2ba84a;           /* acked/done */
  --status-danger:  #e03131;           /* failed */
  --status-warning: #e0a100;           /* approval */
  --status-neutral: #6b7280;           /* paused */
  /* mixing background/border of badges */
  --badge-bg-mix:   14%;
  --badge-br-mix:   55%;
  /*colours for badges syslog */
  --c-badge-yellow-bg: #fff3bf;
  --c-badge-blue-bg: #d0ebff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-body-bg:#000; --c-bg-box:#111; --c-bg-table-head:#1c1c1c; --c-bg-table-head-highlights:#000054; --c-bg-table-highlights:#00001f; --c-bg-table-row-alt:#151515;
    --c-border:#333; --c-primary:#1e4ebd; --c-success:#46c270; --c-danger:#ff6b6b; --c-warn:#8B8000; --c-text:#eee;
    --c-badge-ok:#13361f; --c-badge-fail:#3a1b1d; --text-muted:#aaaaaa;
    /* making a bit lighter for dark theme */
    --status-info:    #93c5fd;
    --status-success: #6ee7a0;
    --status-danger:  #ff8787;
    --status-warning: #ffcd4d;
    --status-neutral: #9ca3af;

    --badge-bg-mix:   20%;
    --badge-br-mix:   60%;
    /*colours for badges syslog */
    --c-badge-yellow-bg: #b5960b;
    --c-badge-blue-bg:   #055a9c;
  }
}
:root[data-theme="dark"]{
  --c-body-bg:#000; --c-bg-box:#111; --c-bg-table-head:#1c1c1c; --c-bg-table-head-highlights:#000054; --c-bg-table-highlights:#00001f; --c-bg-table-row-alt:#151515;
  --c-border:#333; --c-primary:#1e4ebd; --c-success:#46c270; --c-danger:#ff6b6b; --c-warn:#8B8000; --c-text:#eee;
  --c-badge-ok:#13361f; --c-badge-fail:#3a1b1d; --text-muted:#aaaaaa;
  --status-info:    #93c5fd;
  --status-success: #6ee7a0;
  --status-danger:  #ff8787;
  --status-warning: #ffcd4d;
  --status-neutral: #9ca3af;

  --badge-bg-mix:   20%;
  --badge-br-mix:   60%;
  --c-badge-yellow-bg: #b5960b;
  --c-badge-blue-bg:   #055a9c;
}
:root[data-theme="light"]{
  --c-body-bg:#fff; --c-bg-box:#f7f7f7; --c-bg-table-head:#ececec; --c-bg-table-head-highlights:#8c8cdb; --c-bg-table-highlights:#fafafc; --c-bg-table-row-alt:#fafafa;
  --c-border:#d0d0d0; --c-primary:#0066ff; --c-success:#28a745; --c-danger:#dc3545; --c-warn:#FFBF00; --c-text:#222;
  --c-badge-ok:#e6f6ec; --c-badge-fail:#fde7e9; --text-muted:#555555;
  --secret-fg: var(--c-text);
  --secret-bg: color-mix(in srgb, var(--c-text) 8%, var(--c-body-bg));
  --secret-br: color-mix(in srgb, var(--c-text) 25%, transparent);
  --secret-bg-hover: color-mix(in srgb, var(--c-text) 12%, var(--c-body-bg));
  --status-primary: var(--c-primary);
  --status-info:    #3b82f6;
  --status-success: #2ba84a;
  --status-danger:  #e03131;
  --status-warning: #e0a100;
  --status-neutral: #6b7280;
  --badge-bg-mix:   14%;
  --badge-br-mix:   55%;
  --c-badge-yellow-bg: #fff3bf;
  --c-badge-blue-bg: #d0ebff;
}

html{scroll-behavior:smooth; background:var(--c-body-bg); color:var(--c-text);}
body{
  font-family: Arial, sans-serif; margin:0; padding:20px;
  background:var(--c-body-bg); color:var(--c-text); text-align:center;
}

.hidden{display:none!important;}
ul{line-height:1.8em;}
a{color:inherit;}

/* --- Alerts --- */
.alert{
  display:block;
  padding:10px 12px;
  border:1px solid var(--c-border);
  border-radius:8px;
  background:var(--c-bg-box);
  color:var(--c-text);
  margin:10px 0;
}
.alert.success{
  border-color: color-mix(in srgb, var(--c-success) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-success) 10%, var(--c-body-bg));
}
.alert.error{
  border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-danger) 10%, var(--c-body-bg));
}
.alert.warning{
  border-color: color-mix(in srgb, #ffb000 45%, var(--c-border));
  background: color-mix(in srgb, #ffb000 12%, var(--c-body-bg));
}