Rework Terminal into a real live console; polish danger buttons and Settings

Terminal panel now opens a genuinely interactive shell (ttyd bound to a
unix socket, proxied through Unraid's own /logterminal/ nginx location —
the same mechanism Unraid's own Docker "Console" button uses) instead of
one-shot exec calls, shown inline with a Disconnect action; bash is the
default shell. Container/shell selectors and action buttons are now
correctly bottom-aligned (root cause: Unraid's theme puts a 10px margin
on every <button>, never reset before).

Destructive actions (Disconnect, Compose/Template Delete, Volumes/Images/
Networks Remove) get a consistent, solid red treatment at rest instead of
only tinting on hover, via new --bad-strong/--bad-contrast tokens.

Settings panel restructured: a real save toolbar instead of a button
buried in an empty-label row, card subtitles, a toggle switch instead of
a bare checkbox, and installed-package versions shown as chips.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

webui/plugins/podman/styles/podman.css

@@ -20,7 +20,7 @@
   --border: #dde1e6; --text: #1c2024; --text-dim: #5b6572; --text-faint: #8a94a1;
   --accent: #d8541a; --accent-strong: #b8420f; --accent-contrast: #fff8f3;
   --good: #1a8f4c; --good-bg: #e4f6ea; --warn: #9a6b00; --warn-bg: #fdf1d6;
-  --bad: #c22b3a; --bad-bg: #fbe6e8; --neutral: #5b6572; --neutral-bg: #e9ebee;
+  --bad: #c22b3a; --bad-bg: #fbe6e8; --bad-strong: #9c1f2c; --bad-contrast: #fff5f6; --neutral: #5b6572; --neutral-bg: #e9ebee;
   --shadow: 0 1px 2px rgba(20, 22, 26, .06), 0 4px 12px rgba(20, 22, 26, .05);
   --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;
@@ -35,7 +35,7 @@
     --border: #34383f; --text: #e7e9ec; --text-dim: #9aa1ab; --text-faint: #6b7280;
     --accent: #ef7f3f; --accent-strong: #f6975f; --accent-contrast: #1a1002;
     --good: #4cc785; --good-bg: #123322; --warn: #e0b23d; --warn-bg: #3a2e0d;
-    --bad: #ef6470; --bad-bg: #3a1519; --neutral: #9aa1ab; --neutral-bg: #2b2f36;
+    --bad: #ef6470; --bad-bg: #3a1519; --bad-strong: #f6838c; --bad-contrast: #2a0a0d; --neutral: #9aa1ab; --neutral-bg: #2b2f36;
     --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
   }
 }
@@ -44,7 +44,7 @@
   --border: #34383f; --text: #e7e9ec; --text-dim: #9aa1ab; --text-faint: #6b7280;
   --accent: #ef7f3f; --accent-strong: #f6975f; --accent-contrast: #1a1002;
   --good: #4cc785; --good-bg: #123322; --warn: #e0b23d; --warn-bg: #3a2e0d;
-  --bad: #ef6470; --bad-bg: #3a1519; --neutral: #9aa1ab; --neutral-bg: #2b2f36;
+  --bad: #ef6470; --bad-bg: #3a1519; --bad-strong: #f6838c; --bad-contrast: #2a0a0d; --neutral: #9aa1ab; --neutral-bg: #2b2f36;
   --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
 }
 :root[data-theme="light"] .podman-plugin {
@@ -52,7 +52,7 @@
   --border: #dde1e6; --text: #1c2024; --text-dim: #5b6572; --text-faint: #8a94a1;
   --accent: #d8541a; --accent-strong: #b8420f; --accent-contrast: #fff8f3;
   --good: #1a8f4c; --good-bg: #e4f6ea; --warn: #9a6b00; --warn-bg: #fdf1d6;
-  --bad: #c22b3a; --bad-bg: #fbe6e8; --neutral: #5b6572; --neutral-bg: #e9ebee;
+  --bad: #c22b3a; --bad-bg: #fbe6e8; --bad-strong: #9c1f2c; --bad-contrast: #fff5f6; --neutral: #5b6572; --neutral-bg: #e9ebee;
   --shadow: 0 1px 2px rgba(20,22,26,.06), 0 4px 12px rgba(20,22,26,.05);
 }
 
@@ -76,11 +76,20 @@
 .podman-pagehead .meta .dot-good { color: var(--good); }
 .podman-pagehead .meta .dot-bad { color: var(--bad); }
 
+/*
+ * margin: 0 — Unraid's own webGui theme applies a 10px top/bottom margin
+ * to plain <button> elements site-wide. Without resetting it, every
+ * .podman-btn carries an invisible 10px gap above and below its own box,
+ * which silently breaks flex cross-axis alignment anywhere a button sits
+ * next to a non-button sibling (e.g. align-items: flex-end next to a
+ * <select> — verified live: the button's margin, not its content, was
+ * what left it floating 10px above the dropdown it should line up with).
+ */
 .podman-btn {
   appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text);
   padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer;
   display: inline-flex; align-items: center; gap: 6px; transition: border-color .12s, background .12s;
-  font-family: var(--font-ui);
+  font-family: var(--font-ui); margin: 0;
 }
 .podman-btn:hover { border-color: var(--text-faint); }
 /*
@@ -123,11 +132,31 @@
   background: var(--surface-2) !important; border-color: transparent !important;
   color: var(--text) !important; box-shadow: none !important;
 }
-/* A ghost button can still carry danger intent (e.g. a template's
-   "Delete") — needs its own !important since .podman-btn-ghost's color
-   would otherwise win by rule order. */
-.podman-btn-ghost.podman-btn-danger { color: var(--bad) !important; }
-.podman-btn-ghost.podman-btn-danger:hover { background: var(--bad-bg) !important; color: var(--bad) !important; }
+/*
+ * A ghost button can still carry danger intent (Disconnect, Delete,
+ * template "Delete") — needs its own !important since .podman-btn-ghost's
+ * color/background/border would otherwise win by rule order. Solid fill
+ * at rest (not just a tint, and not just on hover) so it reads with the
+ * same weight as .podman-btn-primary, just in red instead of accent —
+ * a merely tinted/outlined button still read as "just another secondary
+ * action" per live feedback.
+ */
+.podman-btn-ghost.podman-btn-danger {
+  color: var(--bad-contrast) !important; background: var(--bad) !important; border-color: var(--bad) !important;
+}
+.podman-btn-ghost.podman-btn-danger:hover {
+  background: var(--bad-strong) !important; border-color: var(--bad-strong) !important; color: var(--bad-contrast) !important;
+}
+.podman-btn-ghost.podman-btn-danger[disabled] {
+  color: var(--text-faint) !important; background: transparent !important; border-color: var(--border) !important;
+}
+/* Icon-only danger buttons (row "remove" trash icons) carry an emoji
+   glyph, not text — .podman-btn-danger's `color` alone doesn't recolor an
+   emoji, so these get the same solid red fill instead, at rest not just
+   on hover, so "destructive" reads at a glance across a whole table. */
+.podman-btn-icon.podman-btn-danger { border-color: var(--bad) !important; background: var(--bad) !important; }
+.podman-btn-icon.podman-btn-danger:hover { background: var(--bad-strong) !important; border-color: var(--bad-strong) !important; }
+.podman-btn-icon.podman-btn-danger[disabled] { border-color: var(--border) !important; background: transparent !important; }
 
 .podman-subnav {
   margin: 14px 0 0; padding: 0; display: flex; gap: 4px; border-bottom: 1px solid var(--border);
@@ -322,13 +351,23 @@
 .podman-log-pane .lvl-warn { color: #e0b23d; }
 .podman-log-pane .lvl-error { color: #ef6470; }
 
-.podman-term { background: #0f1114; color: #d7dbe0; font-family: var(--font-mono); font-size: 12.6px; border-radius: 8px; padding: 14px 16px; height: 380px; overflow-y: auto; line-height: 1.7; }
-.podman-term .prompt { color: #4cc785; }
-.podman-term .path { color: #6fb2f5; }
-.podman-term-input {
-  width: 100%; margin-top: 10px; background: #0f1114; color: #d7dbe0; border: 1px solid var(--border);
-  border-radius: 6px; padding: 8px 10px; font-family: var(--font-mono); font-size: 12.6px;
+.podman-term-launcher {
+  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
+  padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
 }
+.podman-term-launcher label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
+/*
+ * !important here for the same reason as .podman-search's: Unraid's own
+ * webGui/styles/default-base.css has `select:where(:not(.unapi *))` rules
+ * for background/border/padding that would otherwise still show through
+ * around this class's box-model properties.
+ */
+.podman-term-select {
+  min-width: 180px !important; padding: 7px 12px !important; font-size: 13px !important;
+  font-family: var(--font-mono) !important; color: var(--text) !important;
+  background: var(--surface-3) !important; border: 1px solid var(--accent) !important; border-radius: 6px !important;
+}
+.podman-term-frame { display: block; width: 100%; height: 480px; border: 1px solid var(--border); border-radius: 8px; background: #0f1114; }
 
 .podman-compose-layout { display: grid; grid-template-columns: 230px 1fr; min-height: 480px; }
 @media (max-width: 800px) { .podman-compose-layout { grid-template-columns: 1fr; } }
@@ -360,6 +399,52 @@
   font-size: 13px; color: var(--text); width: 100%; max-width: 340px; font-family: var(--font-ui);
 }
 .podman-danger-card { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
+
+/* Settings panel: a shared save action above all cards (Storage's and
+   Autostart & Lifecycle's fields save together in one call — see
+   settings.js's save() — so one button belongs above both, not buried in
+   either card, and definitely not in its own row with an empty label).
+   Framed as its own small bar (background/border), not bare text+button
+   floating at the top of the page. */
+.podman-settings-actions {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px;
+  padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
+}
+.podman-settings-actions .hint { margin: 0; max-width: 52ch; color: var(--text-dim); }
+.podman-card-head .sub { margin-top: 3px; }
+/* Number field + unit label (GB, seconds) — the input itself stays compact
+   instead of stretching to .podman-field-row's normal 340px text-field width. */
+.podman-input-suffix { display: flex; align-items: center; gap: 8px; }
+.podman-input-suffix input[type="number"] { max-width: 100px; width: auto; }
+.podman-input-suffix span { font-size: 12px; color: var(--text-dim); }
+
+/*
+ * Toggle switch — a plain checkbox reads as a leftover form control next
+ * to everything else in this panel getting a designed treatment; this
+ * hides the native checkbox (still the real, accessible input driving
+ * state) and draws a track+thumb off its :checked state instead. Sized in
+ * em off the track's own font-size so it scales if that ever changes.
+ */
+.podman-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; font-size: 22px; }
+.podman-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+.podman-switch-track {
+  display: inline-block; width: 1.9em; height: 1.05em; border-radius: 999px;
+  background: var(--surface-3); border: 1px solid var(--border); transition: background .15s, border-color .15s;
+}
+.podman-switch-thumb {
+  display: block; width: 0.75em; height: 0.75em; margin: 0.13em; border-radius: 50%;
+  background: var(--text-faint); transition: transform .15s, background .15s;
+}
+.podman-switch input:checked + .podman-switch-track { background: var(--accent); border-color: var(--accent); }
+.podman-switch input:checked + .podman-switch-track .podman-switch-thumb { background: var(--accent-contrast); transform: translateX(0.85em); }
+.podman-switch input:focus-visible + .podman-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.podman-version-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.podman-version-chip {
+  font-size: 11.5px; font-family: var(--font-mono); background: var(--surface-3); color: var(--text-dim);
+  border: 1px solid var(--border); padding: 5px 11px; border-radius: 100px;
+}
+.podman-version-chip b { color: var(--text); font-weight: 600; margin-left: 5px; }
 .podman-danger-card .podman-card-head { border-bottom-color: color-mix(in srgb, var(--bad) 30%, var(--border)); }
 .podman-danger-card .podman-card-head h2 { color: var(--bad); }
 
@@ -460,7 +545,8 @@
   font-family: var(--font-ui); width: 100%;
 }
 .podman-context-menu button:hover { background: var(--surface-2); }
-.podman-context-menu button.danger { color: var(--bad); }
+.podman-context-menu button.danger { color: var(--bad); background: var(--bad-bg); }
+.podman-context-menu button.danger:hover { background: var(--bad); color: var(--bad-contrast); }
 .podman-context-menu button[disabled] { opacity: .4; cursor: not-allowed; }
 .podman-context-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }