/*
  DBOT Control Room optional template skins — SAFE LAYOUT VERSION
  Original is the default and receives no visual/layout overrides.
  Optional templates paint the native Control Room shell only; app.js and
  styles.css continue to own all layout, navigation and responsive behaviour.
*/

.dbot-template-picker {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  min-width: 0;
  color: var(--muted);
}
.dbot-template-picker-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}
.dbot-template-picker .dbot-template-picker-select {
  width: 100%;
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #0e1419;
  color: var(--text);
  font-size: 11px;
}

html[data-dbot-template="neon-grid"] {
  --bg:#05080b; --panel:#0b1218; --panel2:#101b23; --panel3:#14232d; --line:#1e3947; --line2:#2c586c;
  --text:#eefcff; --muted:#b3cad1; --accent:#00d7ff; --accent2:#6cecff;
  --dbt-bg:#05080b; --dbt-nav:#071017; --dbt-panel:#0b1218; --dbt-panel-2:#101b23; --dbt-panel-3:#14232d;
  --dbt-border:#1e3947; --dbt-border-strong:#2c586c; --dbt-accent:#00d7ff; --dbt-accent-soft:#072733;
  --dbt-accent-deep:#06495d; --dbt-accent-rgb:0,215,255; --dbt-input:#071824;
}
html[data-dbot-template="hazard-ops"] {
  --bg:#090909; --panel:#14130f; --panel2:#1a1812; --panel3:#201d15; --line:#3a3528; --line2:#5b4e2c;
  --text:#fff9ec; --muted:#d1c4a4; --accent:#ffb000; --accent2:#ffd05b;
  --dbt-bg:#090909; --dbt-nav:#11100d; --dbt-panel:#14130f; --dbt-panel-2:#1a1812; --dbt-panel-3:#201d15;
  --dbt-border:#3a3528; --dbt-border-strong:#5b4e2c; --dbt-accent:#ffb000; --dbt-accent-soft:#332400;
  --dbt-accent-deep:#6e4d00; --dbt-accent-rgb:255,176,0; --dbt-input:#18140b;
}
html[data-dbot-template="void-core"] {
  --bg:#07060b; --panel:#12101b; --panel2:#191526; --panel3:#211b31; --line:#3a3151; --line2:#564875;
  --text:#fbf8ff; --muted:#c0b7d1; --accent:#9b5cff; --accent2:#c4a4ff;
  --dbt-bg:#07060b; --dbt-nav:#0b0912; --dbt-panel:#12101b; --dbt-panel-2:#191526; --dbt-panel-3:#211b31;
  --dbt-border:#3a3151; --dbt-border-strong:#564875; --dbt-accent:#9b5cff; --dbt-accent-soft:#241643;
  --dbt-accent-deep:#4b257f; --dbt-accent-rgb:155,92,255; --dbt-input:#131022;
}
html[data-dbot-template="ice-terminal"] {
  --bg:#05080e; --panel:#0e1722; --panel2:#14202c; --panel3:#1a2937; --line:#26394c; --line2:#3a5670;
  --text:#f1f7ff; --muted:#afbdca; --accent:#5aa2ff; --accent2:#9ec6ff;
  --dbt-bg:#05080e; --dbt-nav:#07101a; --dbt-panel:#0e1722; --dbt-panel-2:#14202c; --dbt-panel-3:#1a2937;
  --dbt-border:#26394c; --dbt-border-strong:#3a5670; --dbt-accent:#5aa2ff; --dbt-accent-soft:#10284a;
  --dbt-accent-deep:#214f88; --dbt-accent-rgb:90,162,255; --dbt-input:#0a1625;
}

/* Presentation only. No shell/grid/flex/position/size rules are applied here. */
html[data-dbot-template]:not([data-dbot-template="original"]) body {
  background:
    linear-gradient(rgba(var(--dbt-accent-rgb), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dbt-accent-rgb), .035) 1px, transparent 1px),
    radial-gradient(circle at 18% -5%, rgba(var(--dbt-accent-rgb), .12), transparent 26%),
    linear-gradient(180deg, var(--dbt-bg), #05070a 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
}
html[data-dbot-template]:not([data-dbot-template="original"]) .sidebar {
  background: var(--dbt-nav);
  border-color: var(--dbt-border);
}
html[data-dbot-template]:not([data-dbot-template="original"]) :is(
  .card,
  .user,
  .boot,
  .login,
  .mini-panel,
  .note,
  .codeish,
  details
) {
  border-color: var(--dbt-border);
  background-color: var(--dbt-panel);
}
html[data-dbot-template]:not([data-dbot-template="original"]) :is(
  .card,
  .user,
  .boot,
  .login
) {
  background-image: linear-gradient(180deg, var(--dbt-panel-2), var(--dbt-panel));
}
html[data-dbot-template]:not([data-dbot-template="original"]) :is(
  .field,
  input,
  select,
  textarea,
  .dbot-template-picker-select
) {
  border-color: var(--dbt-border-strong);
  background-color: var(--dbt-input);
  color: var(--text);
}
html[data-dbot-template]:not([data-dbot-template="original"]) :is(
  .btn:not(.primary):not(.danger),
  .nav button
) {
  border-color: var(--dbt-border-strong);
  background: linear-gradient(180deg, var(--dbt-panel-3), var(--dbt-panel));
  color: var(--text);
}
html[data-dbot-template]:not([data-dbot-template="original"]) .nav button.active {
  background: var(--dbt-accent-soft);
  color: var(--dbt-accent);
  box-shadow: inset 3px 0 var(--dbt-accent);
}
html[data-dbot-template]:not([data-dbot-template="original"]) .btn.primary {
  border-color: var(--dbt-accent);
  background: linear-gradient(135deg, var(--dbt-accent-deep), var(--dbt-accent-soft));
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--dbt-accent-rgb), .18);
}
html[data-dbot-template]:not([data-dbot-template="original"]) :is(
  button,
  a,
  input,
  select,
  textarea,
  summary
):focus-visible {
  outline-color: var(--dbt-accent);
}