/* =============================================================================
   Admin → Drift & Säkerhet: "Backup och återställning" (AT-128), UI-skal 2026-10-23.
   Variant D + knappstil 5 "Mjuk pill", låst av Patrik 2026-10-22.
   Allt är scopat under .br-shell så att inga befintliga adminknappar ändras.
   Färgerna härleds ur temats egna variabler (--accent-primary, --status-*,
   --text-primary, --bg-dark-secondary), så ljusa och mörka teman följer med.
   ============================================================================= */

.br-shell {
  --br-surface: var(--bg-dark-secondary, #252525);
  --br-card-bg: color-mix(in srgb, var(--text-primary) 3%, transparent);
  --br-line: var(--border-color, rgba(255, 255, 255, 0.08));
  --br-acc-bg: color-mix(in srgb, var(--accent-primary) 24%, var(--br-surface));
  --br-acc-bg-h: color-mix(in srgb, var(--accent-primary) 32%, var(--br-surface));
  --br-acc-t: color-mix(in srgb, var(--accent-primary) 40%, var(--text-primary));
  --br-dng: var(--status-danger, #ff4444);
  --br-dng-bg: color-mix(in srgb, var(--br-dng) 20%, var(--br-surface));
  --br-dng-bg-h: color-mix(in srgb, var(--br-dng) 28%, var(--br-surface));
  --br-dng-t: color-mix(in srgb, var(--br-dng) 55%, var(--text-primary));
  --br-sec-bg: color-mix(in srgb, var(--text-primary) 7%, var(--br-surface));
  --br-sec-bg-h: color-mix(in srgb, var(--text-primary) 12%, var(--br-surface));
  --br-sec-t: color-mix(in srgb, var(--text-primary) 80%, transparent);
  /* Patrik 10-22: backup = orange (hämtar hem, moturs), återställning = blå (skickar tillbaka, medurs). */
  --br-warn: color-mix(in srgb, var(--status-warning, #ff9f0a) 80%, var(--text-primary));
  --br-restore: #5ac8fa;
  --br-ok: color-mix(in srgb, var(--status-success, #00c851) 80%, var(--text-primary));
  margin: 8px 0 4px;
}
/* Ljusa teman: ytan är redan tonad, så accenten behöver mer färg för att synas som knapp. */
body.atlas-light-theme .br-shell {
  --br-acc-bg: color-mix(in srgb, var(--accent-primary) 30%, #fff);
  --br-acc-bg-h: color-mix(in srgb, var(--accent-primary) 40%, #fff);
  --br-acc-t: color-mix(in srgb, var(--accent-primary) 62%, var(--text-primary));
  --br-dng-bg: color-mix(in srgb, var(--br-dng) 18%, #fff);
  --br-dng-bg-h: color-mix(in srgb, var(--br-dng) 26%, #fff);
  --br-dng-t: color-mix(in srgb, var(--br-dng) 70%, var(--text-primary));
  --br-sec-bg: color-mix(in srgb, var(--text-primary) 8%, #fff);
  --br-sec-bg-h: color-mix(in srgb, var(--text-primary) 13%, #fff);
  --br-restore: #0a6e99;
  --br-card-bg: color-mix(in srgb, var(--br-surface) 55%, transparent);
}

.br-shell .br-h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 26px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary);
}
.br-shell .br-h4--auto { margin: 22px 0 12px; }
.br-shell .br-lead {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Skalets lägesväljare (tas bort när AT-128 kopplas in) */
.br-shell .br-card {
  border: 1px solid var(--br-line);
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 14px;
  background: var(--br-card-bg);
  min-width: 0;
}
.br-shell .br-card h5,
.br-shell .br-sub-card h6,
.br-shell .br-confirm h6 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.br-shell .br-sub {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.br-shell .br-sub-card { min-width: 0; }
.br-shell .br-center { text-align: center; }
.br-shell .br-mini {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.br-shell .br-help {
  margin: 6px 0 0;
  font-size: var(--text-micro-size, 11px);
  color: var(--text-secondary);
  opacity: var(--text-help-opacity, 0.85);
}
.br-shell .br-nowrap { white-space: nowrap; }
.br-shell code {
  font-size: 11px;
  word-break: break-all;
}
.br-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Ingår / ingår aldrig */
.br-shell .br-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0;
}
.br-shell .br-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-secondary);
}
.br-shell .br-list li {
  position: relative;
  padding: 2px 0 2px 16px;
}
.br-shell .br-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-success, #00c851);
}
.br-shell .br-list--no li::before { background: var(--br-dng); }

/* Varningsrutor (ersätter inline-stilen i Drift-vyns röda block) */
.br-shell .br-alert {
  --c: var(--status-info, #5ac8fa);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: color-mix(in srgb, var(--c) 9%, transparent);
  color: var(--c);
}
.br-shell .br-alert svg { flex: none; margin-top: 2px; }
.br-shell .br-alert div { color: var(--text-primary); min-width: 0; }
.br-shell .br-alert b { color: var(--c); }
.br-shell .br-alert--d { --c: var(--br-dng-t); }
.br-shell .br-alert--w { --c: var(--br-warn); }
.br-shell .br-alert--s { --c: var(--br-ok); }

/* Fält */
.br-shell .br-field { margin: 0 0 12px; }
.br-shell .br-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.br-shell .br-field .admin-config-field { width: 100%; box-sizing: border-box; }
.br-shell .br-chk {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
/* style.css nollställer appearance på alla input, så kryssrutan ritas här. #view-admin behövs
   för att slå temats "#view-admin input { background … !important }". */
#view-admin .br-shell .br-chk input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid color-mix(in srgb, var(--text-secondary) 70%, transparent);
  border-radius: 5px;
  background: var(--br-surface) center / 12px 12px no-repeat !important;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
#view-admin .br-shell .br-chk input:checked {
  border-color: var(--br-dng);
  background-color: var(--br-dng) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
}
.br-shell .br-chk input:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Statusrader */
.br-shell .br-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--br-line);
  font-size: 13px;
  color: var(--text-primary);
}
.br-shell .br-stat:last-child { border-bottom: 0; }
/* AT-223 del 3: nedräkningens klocka (ersätter timglaset) i temats accentfärg, i linje med texten. */
.br-shell .br-countdown-icon { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--accent-primary); }
.br-shell .br-stat > span:first-child { min-width: 0; }
.br-shell .br-stat small {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

/* Jämförelsetabell */
.br-shell .br-table-wrap { max-width: 100%; overflow-x: auto; }
.br-shell table.br-diff {
  width: 100%;
  margin: 8px 0;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-primary);
}
.br-shell table.br-diff th {
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-secondary);
}
.br-shell table.br-diff td {
  padding: 7px 6px;
  text-align: right;
  border-top: 1px solid var(--br-line);
  font-variant-numeric: tabular-nums;
}
.br-shell table.br-diff th,
.br-shell table.br-diff td { white-space: nowrap; }
.br-shell table.br-diff th:first-child,
.br-shell table.br-diff td:first-child { text-align: left; }
.br-shell .br-delta-down { color: var(--br-warn); font-weight: 600; }
.br-shell .br-delta-same { color: var(--text-secondary); }

/* Filval */
.br-shell .br-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 12px;
  padding: 18px 14px;
  border: 2px dashed var(--br-line);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.br-shell .br-drop:hover {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
  color: var(--text-primary);
}
.br-shell .br-file {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--br-sec-bg);
  color: var(--text-primary);
  font-size: 13px;
}
.br-shell .br-file > svg { flex: none; color: var(--accent-primary); }
.br-shell .br-file > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.br-shell .br-file small { display: block; font-size: 11px; color: var(--text-secondary); }

/* Bekräftelse (inline, farlig) */
.br-shell .br-confirm {
  margin: 12px 0 0;
  padding: 16px;
  border: 1px solid var(--br-line);
  border-top: 3px solid var(--br-dng);
  border-radius: 14px;
  background: var(--br-surface);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

/* Stegguide (variant D): siffror i cirklar, etikett under, linje emellan */
.br-shell .br-pst {
  display: flex;
  margin: 6px 0 18px;
  padding: 0;
  list-style: none;
}
.br-shell .br-pst li {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.br-shell .br-pst li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--br-line);
}
.br-shell .br-pst li.done:not(:first-child)::before,
.br-shell .br-pst li.on:not(:first-child)::before { background: var(--status-success, #00c851); }
.br-shell .br-pst i {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  background: var(--br-sec-bg);
  color: var(--br-sec-t);
  border: 1px solid var(--br-line);
}
.br-shell .br-pst li.on { color: var(--text-primary); font-weight: 600; }
.br-shell .br-pst li.on i {
  background: var(--br-acc-bg);
  color: var(--br-acc-t);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}
.br-shell .br-pst li.done i {
  background: color-mix(in srgb, var(--status-success, #00c851) 20%, var(--br-surface));
  color: var(--br-ok);
  border-color: color-mix(in srgb, var(--status-success, #00c851) 45%, transparent);
}
.br-shell .br-slide { animation: br-slidein 0.28s ease-out; }
@keyframes br-slidein {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

/* Knappar: stil 5 "Mjuk pill".
   style.css:318-319 sätter background: transparent !important på alla button/input/select,
   så bakgrunderna här måste också vara !important (samma mönster som husets knappar). */
.br-shell .br-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.br-shell .br-row--center { justify-content: center; }
.br-shell .br-row--pair { flex-wrap: nowrap; }
.br-shell .br-row--pair > .br-btn { flex: 1 1 0; min-width: 0; }
.br-shell .br-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.br-shell .br-btn > span { overflow: hidden; text-overflow: ellipsis; }
.br-shell .br-btn > svg { flex: none; }
.br-shell .br-btn--small {
  min-height: 32px;
  padding: 5px 18px;
  font-size: 12px;
}
.br-shell .br-btn--primary { background: var(--br-acc-bg) !important; color: var(--br-acc-t); }
.br-shell .br-btn--primary:hover:not(:disabled) { background: var(--br-acc-bg-h) !important; }
.br-shell .br-btn--secondary { background: var(--br-sec-bg) !important; color: var(--br-sec-t); box-shadow: none; }
.br-shell .br-btn--secondary:hover:not(:disabled) { background: var(--br-sec-bg-h) !important; }
.br-shell .br-btn--danger { background: var(--br-dng-bg) !important; color: var(--br-dng-t); }
.br-shell .br-btn--danger:hover:not(:disabled) { background: var(--br-dng-bg-h) !important; }
.br-shell .br-btn:active:not(:disabled) { transform: translateY(1px); }
.br-shell .br-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
.br-shell .br-btn--danger:focus-visible { outline-color: var(--br-dng); }
/* Inaktiv: grå pill med dämpad text, så att knappen syns men inte lockar. */
.br-shell .br-btn:disabled {
  background: var(--br-sec-bg) !important;
  color: color-mix(in srgb, var(--text-secondary) 75%, transparent);
  cursor: not-allowed;
  box-shadow: none;
}
/* Patrik 10-22: "Backup pågår" i varningspillrets orangegula ton, "Startar om" i blått */
.br-shell .br-btn.is-busy:disabled { opacity: 1; filter: none; cursor: progress; }
.br-shell .br-btn.is-busy.busy-backup {
  background: color-mix(in srgb, var(--status-warning, #ff9f0a) 24%, var(--br-surface)) !important;
  color: var(--br-warn);
  border-color: color-mix(in srgb, var(--status-warning, #ff9f0a) 35%, transparent);
}
.br-shell .br-btn.is-busy.busy-restore {
  background: color-mix(in srgb, var(--br-restore) 22%, var(--br-surface)) !important;
  color: var(--br-restore);
  border-color: color-mix(in srgb, var(--br-restore) 35%, transparent);
}

/* Snurror: riktningen visar riktningen */
.br-shell .br-bspin,
.br-shell .br-spin {
  flex: none;
  border-radius: 50%;
  border-style: solid;
  animation: br-rot 0.9s linear infinite;
}
.br-shell .br-bspin {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: currentColor;
  border-right-color: transparent;
}
.br-shell .br-spin {
  width: 32px;
  height: 32px;
  margin: 6px auto 10px;
  border-width: 3px;
  border-color: var(--br-line);
}
.br-shell .busy-backup .br-bspin,
.br-shell .br-spin--backup { animation-direction: reverse; }
.br-shell .br-spin--backup { border-top-color: var(--status-warning, #ff9f0a); }
.br-shell .br-spin--restore { border-top-color: var(--br-restore); }
@keyframes br-rot { to { transform: rotate(360deg); } }
.br-shell .br-busy { text-align: center; margin-top: 12px; }

/* Fasmätare (visar bara verkliga steg när AT-128 kopplas in) */
.br-shell .br-meter { max-width: 360px; margin: 4px auto 8px; text-align: left; }
.br-shell .br-meter-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--br-sec-bg);
  overflow: hidden;
}
.br-shell .br-meter-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s ease;
}
.br-shell .br-meter--backup .br-meter-bar span { background: var(--status-warning, #ff9f0a); }
.br-shell .br-meter--restore .br-meter-bar span { background: var(--br-restore); }
.br-shell .br-meter-row {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .br-shell .br-slide { animation: none; }
  .br-shell .br-bspin,
  .br-shell .br-spin { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .br-shell .br-meter-bar span { transition: none; }
}

/* Mobil */
@media (max-width: 560px) {
  .br-shell .br-cols { grid-template-columns: 1fr; }
  .br-shell .br-card { padding: 14px 12px; }
  .br-shell .br-pst li { font-size: 11px; }
  .br-shell .br-btn { padding-left: 16px; padding-right: 16px; }
  .br-shell .br-row:not(.br-row--pair):not(.br-row--center) > .br-btn--primary { flex: 1 1 auto; }
  .br-shell .br-stat { align-items: flex-start; }
}
/* AT-219 tillägg p.4: tidigare återställningsresultat som eget besked ovanför guiden, och säkerhetsbackupen som valfritt steg. */
.br-shell .br-result { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.br-shell .br-result > .br-alert:first-child { padding-right: 40px; }
.br-shell .br-result-close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none !important; color: var(--text-secondary); cursor: pointer; }
.br-shell .br-result-close:hover, .br-shell .br-result-close:focus-visible { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important; }
@media (max-width: 768px) { .br-shell .br-result-close { width: 44px; height: 44px; top: 0; right: 0; } .br-shell .br-result > .br-alert:first-child { padding-right: 48px; } }
.br-shell .br-optional { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--text-secondary) 35%, transparent); background: color-mix(in srgb, var(--text-primary) 3%, transparent); }