/* Boxarr Settings — danger zone. Dark crimson, not the old fire-truck fill. */

html[data-theme="settings"] {
  --gold: #e0a8a0;
  --panelFill: color-mix(in srgb, #881f21 58%, #3e2723);
  --dropFill: #3a1216;
  --mainFill: #3a1418;
  --settingsWash: color-mix(in srgb, #881f21 52%, #16080a);
  --settingsLine: color-mix(in srgb, #c77577 75%, #cca37f);
  --themePrimary: #8e2a2d;
  --themeDarkPrimary: #6b1c20;
  --selectedSection: #6b1c20;
}

html[data-theme="settings"] .topbar {
  background: var(--panelFill);
  border-bottom-color: var(--settingsLine);
}
html[data-theme="settings"] .topbar-title { color: var(--gold); }
html[data-theme="settings"] .topbar-burger,
html[data-theme="settings"] .topbar-gear {
  border-color: var(--settingsLine);
  background: var(--dropFill);
  color: var(--gold);
}
html[data-theme="settings"] .topbar-burger:hover,
html[data-theme="settings"] .topbar-gear:hover,
html[data-theme="settings"] .shell.is-sidebar-flip .topbar-burger {
  background: var(--themePrimary);
  color: #f3d4d2;
}
html[data-theme="settings"] .sidebar {
  border-color: var(--settingsLine);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(199, 117, 119, 0.28);
}
html[data-theme="settings"] .sidebar-face {
  background-color: var(--themeDarkPrimary);
  background-image:
    linear-gradient(180deg, rgba(136, 31, 33, 0.78) 0%, rgba(42, 12, 14, 0.92) 100%),
    url("/demo/assets/boxarr/boxarr_background.jpg");
}
html[data-theme="settings"] .sidebar-chevron,
html[data-theme="settings"] .sidebar-rail {
  border-color: var(--settingsLine);
  background: var(--dropFill);
  color: var(--gold);
}
html[data-theme="settings"] .brand-name,
html[data-theme="settings"] .brand-sub,
html[data-theme="settings"] .side-block h2 { color: var(--gold); }
/* Black/white marks → title gold #e0a8a0 */
html[data-theme="settings"] .page-fn-icon,
html[data-theme="settings"] .page-fn-icon.is-white,
html[data-theme="settings"] .sidebar-face-settings .logo-mark {
  filter: brightness(0) saturate(100%) invert(79%) sepia(18%) saturate(620%) hue-rotate(318deg) brightness(0.95) contrast(92%);
  opacity: 1;
}
html[data-theme="settings"] input[type="checkbox"],
html[data-theme="settings"] input[type="radio"] {
  accent-color: #ff2d2d;
}
html[data-theme="settings"] .main-card {
  background: var(--settingsWash);
  border-color: var(--settingsLine);
  --tab-wash: color-mix(in srgb, var(--gold) 42%, transparent);
  grid-template-rows: 1fr auto;
}
html[data-theme="settings"] .page-section {
  --sec-wash: rgba(136, 31, 33, 0.20);
  --tab-wash: color-mix(in srgb, var(--gold) 42%, transparent);
  /* Title + subtabs + action bar. Operator default 72px left a jump gap. */
  --page-head: 12rem;
}
html[data-theme="settings"] .subtab:hover {
  background: color-mix(in srgb, var(--gold) 58%, transparent);
  color: #fff;
}
html[data-theme="settings"] .page-section .panel-head {
  background: color-mix(in srgb, var(--settingsWash) 88%, #000);
  border-color: var(--settingsLine);
}
html[data-theme="settings"] .action-bar {
  border-bottom-color: color-mix(in srgb, var(--settingsLine) 55%, transparent);
}
html[data-theme="settings"] .sub-block {
  border-color: var(--settingsLine);
  background: var(--dropFill);
}
html[data-theme="settings"] .sub-block > .sub-head {
  background: var(--dropFill);
  border-bottom-color: var(--settingsLine);
}
html[data-theme="settings"] .sub-head h2 { color: var(--gold); }
html[data-theme="settings"] .PageStatusBar {
  background: color-mix(in srgb, var(--dropFill) 70%, #000);
  border-top-color: color-mix(in srgb, var(--settingsLine) 40%, transparent);
}

.PageSidebar {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: transparent;
  width: auto;
  overflow: visible;
}
.PageSidebar-group { display: block; }
.PageSidebar-children {
  display: none;
  margin: 0.12rem 0 0.3rem 1.7rem;
  padding: 0.08rem 0 0.08rem 0.4rem;
  border-left: 1px solid color-mix(in srgb, var(--settingsLine, var(--gold)) 55%, transparent);
}
.PageSidebar-group.isOpen > .PageSidebar-children { display: block; }
.PageSidebarItem {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
  padding: 0.45rem 0.4rem;
  border-left: 3px solid transparent;
  border-radius: 8px;
  color: var(--gold);
  text-decoration: none;
}
.PageSidebarItem:hover { color: #f3d4d2; background: rgba(110, 28, 32, 0.45); }
.PageSidebarItem.isActive {
  border-left-color: var(--gold);
  color: #f3d4d2;
  background: var(--selectedSection);
}
.PageSidebarItem-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
}
.PageSidebarItem-icon .ui-ico { width: 16px; height: 16px; }
.PageSidebarItem-label { flex: 1; min-width: 0; }
.PageSidebarItem .ico-chev {
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex: 0 0 12px;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}
.PageSidebar-group.isOpen > .PageSidebarItem.hasChildren > .ico-chev { transform: rotate(-90deg); }
.PageSidebarItem.isChild {
  padding: 0.35rem 0.5rem 0.35rem 0.55rem;
  font-size: 13px;
  border-radius: 0 8px 8px 0;
}
.PageSidebarItem.isChild.noIcon { margin-left: 0; }
.PageSidebarItem.isChild.isActive {
  margin-left: -4px;
  padding-left: calc(0.55rem + 1px);
}

.PageToolbar-title { margin: 0; font-size: 1.45rem; font-weight: 650; color: var(--gold); line-height: 1.15; }
#page-lead { margin: 0; color: var(--muted, #bcaaa4); font-size: 0.9rem; line-height: 1.25; }
.page-acts-extra { display: inline-flex; align-items: center; gap: 0.35rem; }
#btn-fold-all .fold-all-ico {
  width: 14px;
  height: 14px;
  margin: 0;
  transition: transform 0.16s ease;
  transform: rotate(90deg);
}
#btn-fold-all[data-fold="collapsed"] .fold-all-ico,
#btn-fold-all[aria-expanded="false"] .fold-all-ico { transform: rotate(90deg); }
#btn-fold-all[data-fold="headers"] .fold-all-ico { transform: rotate(180deg); }
#btn-fold-all[data-fold="subs"] .fold-all-ico { transform: rotate(-90deg); }
.cat-block[data-fold="collapsed"] > summary.cat-head .ico-chev,
.svc-edit[data-fold="collapsed"] > .svc-edit-head .ico-chev { transform: rotate(90deg); }
.cat-block[data-fold="headers"] > summary.cat-head .ico-chev,
.svc-edit[data-fold="headers"] > .svc-edit-head .ico-chev { transform: rotate(180deg); }
.cat-block[data-fold="subs"] > summary.cat-head .ico-chev,
.svc-edit[data-fold="subs"] > .svc-edit-head .ico-chev,
.cat-block[open][data-fold="subs"] > summary.cat-head .ico-chev,
.svc-edit[open][data-fold="subs"] > .svc-edit-head .ico-chev { transform: rotate(-90deg); }
html[data-theme="settings"] .page-scroll { min-height: 0; overflow: auto; }
html[data-theme="settings"] .subtab-next { margin-left: 0.35rem; opacity: 0.9; }

.PageStatusBar {
  flex: 0 0 36px;
  max-height: 38vh;
  z-index: 2;
  background: #1a1a1a;
  border-top: 1px solid var(--borderColor);
  display: grid;
  grid-template-columns: 56px 80px 48px 1fr;
  grid-template-rows: 36px;
  align-items: center;
  overflow: hidden;
}
.PageStatusBar.isExpanded { flex: 0 0 auto; height: 220px; grid-template-rows: 36px 1fr; }
.PageStatusBar.isRunning, .PageStatusBar.isFailed { flex: 0 0 auto; height: 220px; grid-template-rows: 36px 1fr; }
.PageStatusBar-toggle {
  height: 36px; border: 0; background: transparent; color: var(--textMuted);
  cursor: pointer; font: inherit; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.PageStatusBar-state { font-size: 12px; color: var(--textMuted); }
.PageStatusBar-state.running { color: var(--info); }
.PageStatusBar-state.completed { color: var(--success); }
.PageStatusBar-state.failed { color: var(--danger); }
.PageStatusBar-verb { font-size: 12px; color: var(--textDim); padding-right: 12px; text-align: right; }
.job-mascot { width: 40px; height: 36px; object-fit: contain; justify-self: center; }
.job-mascot[hidden] { display: none !important; }
.PageStatusBar-log {
  display: none; grid-column: 1 / -1;
  margin: 0; padding: 8px 16px 12px;
  overflow: auto; font-family: var(--mono); font-size: 12px;
  color: #d7ccc8; white-space: pre-wrap;
}
.PageStatusBar.isExpanded .PageStatusBar-log,
.PageStatusBar.isRunning .PageStatusBar-log,
.PageStatusBar.isFailed .PageStatusBar-log { display: block; }

.Table { width: 100%; border-collapse: collapse; }
.Table th, .Table td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--settingsLine, var(--gold)) 35%, transparent);
  font-size: 13px;
}
.Table th { color: var(--textMuted); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.Table tr:hover td { background: rgba(255, 255, 255, 0.05); }
.Table .Form-input { max-width: none; height: 28px; padding: 0 6px; font-size: 12px; }
.Table .svc-port { width: 72px; }
.Table td { vertical-align: middle; }

.Label {
  display: inline-block;
  font-size: 11px; padding: 1px 7px; border-radius: 3px;
  background: #2a2436; color: var(--textMuted);
}
.Label--success { background: rgba(39,194,76,0.18); color: var(--success); }
.Label--danger { background: rgba(240,80,80,0.18); color: var(--danger); }
.Label--warning { background: rgba(255,144,43,0.18); color: var(--warning); }
.Label--info { background: rgba(93,156,236,0.18); color: var(--info); }

.Form-group { margin-bottom: 16px; }
.Form-group label { display: block; color: var(--textMuted); font-size: 12px; margin-bottom: 4px; }
.Check {
  display: flex; align-items: center; gap: 8px;
  color: var(--textColor); font-size: 13px; margin: 8px 0;
}
.Check input { margin: 0; accent-color: #ff2d2d; }
.Form-input, .Form-group input, .Form-group select, .Form-group textarea {
  width: 100%; max-width: 480px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--borderColor); border-radius: 3px;
  background: var(--inputBackground); color: var(--textColor); font: inherit;
}
.Help { color: var(--textMuted); font-size: 12px; margin: 0 0 0.8rem; }
.Alert {
  padding: 12px 14px; border-radius: 10px;
  background: var(--dropFill); border: 1px solid var(--settingsLine, var(--gold));
  color: var(--textMuted);
}
.Section { margin-bottom: 1.1rem; }
.Section h2 { margin: 0 0 12px; font-size: 16px; font-weight: 500; color: var(--gold); }
.Stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.Stat {
  background: var(--dropFill); border: 1px solid var(--settingsLine, var(--gold));
  border-radius: 10px; padding: 12px 14px;
}
.Stat-value { font-size: 22px; font-weight: 500; color: var(--themeLightPrimary); }
.Stat-label { font-size: 11px; color: var(--textMuted); letter-spacing: 0.04em; text-transform: uppercase; }

.ToastStack { position: fixed; right: 16px; bottom: 48px; z-index: 10; display: flex; flex-direction: column; gap: 8px; }
.Toast {
  min-width: 240px; padding: 10px 14px; border-radius: 3px;
  background: var(--cardBackground); border-left: 3px solid var(--themePrimary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.Toast.isDanger { border-left-color: var(--danger); }
.Toast.isSuccess { border-left-color: var(--success); }
.toast-saved {
  position: fixed; top: 58px; right: 16px; z-index: 12;
  padding: 0.35rem 0.7rem; border-radius: 8px;
  background: var(--dropFill); border: 1px solid var(--gold); color: var(--gold);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.toast-saved.is-on { opacity: 1; }

.ServiceIcon {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; vertical-align: middle; margin-right: 8px;
}
.LetterTile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--themeDarkPrimary); color: var(--themeLightPrimary);
  font-size: 11px; font-weight: 600; margin-right: 8px; vertical-align: middle;
}

.Dl { margin: 0; }
.Dl > div {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 8px; padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  font-size: 13px;
}
.Dl dt { color: var(--textMuted); }
.Dl dd { margin: 0; }
.muted { color: var(--textMuted); }
.mono { font-family: var(--mono, "Cascadia Mono", Consolas, monospace); }

.tool-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tool-jumps a {
  display: inline-flex;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--dropFill);
  color: var(--gold);
  font-size: 0.72rem;
}
.tool-jumps a:hover { background: var(--themePrimary); color: #d7ccc8; }

.svc-edit {
  border: 1px solid color-mix(in srgb, var(--settingsLine, var(--gold)) 55%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--dropFill) 80%, #000);
  margin: 0 0 0.4rem;
  overflow: hidden;
}
.svc-edit-head {
  display: grid;
  grid-template-columns: 14px 28px minmax(0, 1fr) 88px auto 16px;
  gap: 0.45rem;
  align-items: center;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}
.svc-edit-head::-webkit-details-marker { display: none; }
.svc-edit-head .tlight { width: 10px; height: 10px; justify-self: center; }
.svc-edit-ico {
  width: 24px; height: 24px;
  object-fit: contain;
  justify-self: center;
}
.svc-edit-name { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-edit-container {
  display: none;
  font-family: var(--mono, Consolas, monospace);
  font-size: 0.72rem;
  color: var(--textMuted);
  margin-left: 0.4rem;
}
.shell.show-containers .svc-edit-container { display: inline; }
.svc-edit-port { width: 88px; height: 28px; padding: 0 6px; }
.svc-edit-on { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--textMuted); }
.svc-edit-head .ico-chev {
  width: 12px; height: 12px;
  grid-column: -2 / -1;
  justify-self: end;
  align-self: center;
  margin-left: 0 !important;
  margin-right: 0;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}
.svc-edit[open] > .svc-edit-head .ico-chev { transform: rotate(-90deg); }
.svc-edit-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem 0.8rem;
  padding: 0.35rem 0.75rem 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  background: var(--dropFill);
}
.svc-edit-body label { display: block; font-size: 11px; color: var(--textMuted); }
.svc-edit-body .Form-input { max-width: none; margin-top: 0.2rem; }
.svc-edit-url { grid-column: 1 / -1; }

.shell.is-compact .svc-edit-head { padding: 0.22rem 0.5rem; }
.shell.is-compact .svc-edit { margin-bottom: 0.2rem; }
.shell.reveal-secrets input[data-secret] { font-family: var(--mono, Consolas, monospace); }

.cat-block {
  margin: 0 0 0.65rem;
  border: 1px solid color-mix(in srgb, var(--settingsLine, var(--gold)) 50%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--dropFill) 70%, #000);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.cat-head,
.cat-block > summary.cat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  list-style: none;
  position: static;
  background: transparent;
  border: 0;
  width: 100%;
  box-sizing: border-box;
}
.cat-block > summary.cat-head::-webkit-details-marker { display: none; }
.cat-head h2 {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  flex: 1;
  min-width: 0;
}
.cat-block > summary.cat-head .ico-chev {
  width: 12px; height: 12px;
  flex: 0 0 12px;
  order: 99;
  margin-left: auto !important;
  margin-right: 0;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}
.cat-block[open] > summary.cat-head .ico-chev { transform: rotate(-90deg); }
.cat-body { padding: 0.2rem 0.55rem 0.55rem; }
.cat-count { font-size: 0.72rem; color: var(--textMuted); font-weight: 500; letter-spacing: 0; text-transform: none; }

.hidden-note {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  color: var(--textMuted);
}

.revert-pop {
  position: absolute;
  top: 48px;
  right: 52px;
  z-index: 20;
  width: min(92vw, 360px);
  max-height: 50vh;
  overflow: auto;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--dropFill);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.revert-pop[hidden] { display: none; }
.revert-row {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
}
.revert-row button { flex: 0 0 auto; }
.revert-row p { margin: 0; font-size: 0.78rem; }
.hist-day { margin: 0 0 0.8rem; }
.hist-day h3 { margin: 0 0 0.35rem; font-size: 0.82rem; color: var(--gold); }
.hist-snap {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--panelFill);
  overflow: hidden;
}
.hist-snap summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.55rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  box-sizing: border-box;
}
.hist-snap summary::-webkit-details-marker { display: none; }
.hist-snap summary .ico-chev {
  width: 12px; height: 12px;
  flex: 0 0 12px;
  order: 99;
  margin-left: auto !important;
  margin-right: 0;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}
.hist-snap[open] summary .ico-chev { transform: rotate(-90deg); }
.hist-diff { padding: 0.35rem 0.55rem 0.5rem; background: var(--dropFill); }

.confirm-scrim {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 10, 8, 0.55);
}
.confirm-scrim[hidden] { display: none; }
.confirm-card {
  width: min(92vw, 360px);
  padding: 1rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: var(--dropFill);
}
.confirm-card p { margin: 0 0 0.8rem; }



/* Settings main-pane folds: chevron always visual-right (beat app.css icon-btn resets). */
.shell .main .cat-head .ico-chev,
.shell .main .hist-snap summary .ico-chev,
.shell .page-scroll .cat-head .ico-chev,
.shell .page-scroll .hist-snap summary .ico-chev {
  margin-left: auto !important;
  flex: 0 0 12px;
}
.shell .main .svc-edit-head .ico-chev,
.shell .page-scroll .svc-edit-head .ico-chev {
  margin-left: 0 !important;
  justify-self: end;
}

@media (max-width: 768px) {
  .PageContentBody { padding: 10px; }
  .svc-edit-head {
    grid-template-columns: 14px 24px minmax(0, 1fr) 16px;
  }
  .svc-edit-port, .svc-edit-on { display: none; }
}