@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---- Palette: near-black chrome to match the logo, one blue accent. Loaded after Django's own CSS. ---- */
:root, html[data-theme="light"] {
  --font-family-primary: "Vazirmatn", -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radar-accent: #2563eb;
  --radar-accent-hover: #1d4ed8;
  --radar-surface: #ffffff;
  --radar-row-hover: #f4f6fb;
  --radar-good: #16a34a;
  --radar-bad: #dc2626;

  --primary: #111318;
  --secondary: #111318;
  --header-bg: #0b0b0d;
  --header-color: #a1a1aa;
  --header-branding-color: #ffffff;
  --header-link-color: #e4e4e7;
  --breadcrumbs-bg: transparent;
  --breadcrumbs-fg: var(--body-quiet-color);
  --breadcrumbs-link-fg: var(--body-quiet-color);
  --link-fg: var(--radar-accent);
  --link-hover-color: var(--radar-accent-hover);
  --link-selected-fg: var(--radar-accent);
  --button-bg: #111318;
  --button-hover-bg: #2a2d35;
  --default-button-bg: var(--radar-accent);
  --default-button-hover-bg: var(--radar-accent-hover);
  --object-tools-bg: #111318;
  --object-tools-hover-bg: #2a2d35;
  --selected-bg: #e8eefc;
  --selected-row: #eef3ff;
  --body-bg: #f6f7f9;
}

html[data-theme="dark"] {
  --radar-surface: #16171b;
  --radar-row-hover: #1d1f25;
  --radar-accent: #60a5fa;
  --radar-accent-hover: #93c5fd;
  --body-bg: #0f1013;
  --darkened-bg: #1b1d22;
  --hairline-color: #2a2d34;
  --button-bg: #2a2d35;
  --button-hover-bg: #3a3e48;
  --object-tools-bg: #2a2d35;
  --object-tools-hover-bg: #3a3e48;
  --selected-bg: #1e2a44;
  --selected-row: #172036;
  --default-button-bg: #2563eb;
  --default-button-hover-bg: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --radar-surface: #16171b;
    --radar-row-hover: #1d1f25;
    --radar-accent: #60a5fa;
    --radar-accent-hover: #93c5fd;
    --body-bg: #0f1013;
    --darkened-bg: #1b1d22;
    --hairline-color: #2a2d34;
    --button-bg: #2a2d35;
    --button-hover-bg: #3a3e48;
    --object-tools-bg: #2a2d35;
    --object-tools-hover-bg: #3a3e48;
    --selected-bg: #1e2a44;
    --selected-row: #172036;
    --default-button-bg: #2563eb;
    --default-button-hover-bg: #1d4ed8;
  }
}

body, input, textarea, select, button {
  font-family: var(--font-family-primary);
}

/* ---- Header ---- */
#header {
  padding: 12px 28px;
  min-height: 56px;
  box-sizing: border-box;
  border-bottom: 1px solid #1f2026;
}
#header #site-name { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
#header #site-name a { color: #fff; }
#header #site-name a:hover { color: #fff; opacity: .85; }
#user-tools { font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--header-color); }
#user-tools strong { color: #fff; font-weight: 600; }
#user-tools a { border-bottom: 0; color: var(--header-link-color); }
#user-tools a:hover { color: #fff; text-decoration: underline; }
#user-tools #logout-form button { color: var(--header-link-color); font-size: .8rem; text-transform: none; }

/* ---- Breadcrumbs: modern pill-chip nav ---- */
div.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 28px;
  font-size: .8rem;
  border-bottom: 1px solid var(--hairline-color);
  background: var(--radar-surface);
  flex-wrap: wrap;
  min-height: 38px;
  box-sizing: border-box;
}
div.breadcrumbs a,
div.breadcrumbs > span:not(.bc-sep) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  color: var(--body-quiet-color);
  text-decoration: none;
  transition: background .14s, color .14s;
  white-space: nowrap;
  line-height: 1.4;
}
div.breadcrumbs a:hover {
  background: var(--darkened-bg);
  color: var(--radar-accent);
}
/* Separator chevrons (injected by JS) */
div.breadcrumbs .bc-sep {
  display: inline-flex;
  align-items: center;
  color: var(--body-quiet-color);
  opacity: .35;
  flex-shrink: 0;
  pointer-events: none;
}
/* Current page (last span — not a link) */
div.breadcrumbs > span:not(.bc-sep):last-child {
  color: var(--body-fg);
  font-weight: 500;
  cursor: default;
  background: var(--darkened-bg);
}

/* ---- Sidebar ---- */
#nav-sidebar { background: var(--radar-surface); border-inline-start: 1px solid var(--hairline-color); }
#nav-sidebar .module caption, #nav-sidebar .module caption a { font-size: .8rem; text-transform: none; letter-spacing: 0; }
#nav-sidebar .current-app .section:link, #nav-sidebar .current-app .section:visited { color: #fff; }

/* ---- Modules and headings ---- */
.module h2, .module caption, .inline-group h2 { font-weight: 600; text-transform: none; letter-spacing: 0; border-radius: 8px 8px 0 0; }
#content h1 { font-weight: 700; }

/* =====================================================================
   Light theme polish: soft surfaces, subtle depth, lively accent.
   ===================================================================== */
:root, html[data-theme="light"] {
  --radar-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --radar-shadow-hover: 0 8px 24px -6px rgba(37, 99, 235, .18), 0 2px 6px rgba(16, 24, 40, .06);
  --radar-ring: 0 0 0 3px rgba(37, 99, 235, .18);
  --radar-input-bg: #ffffff;
  --radar-input-border: #d6dae3;
  --radar-accent-soft: #eef3ff;
  --body-quiet-color: #6b7280;
  --hairline-color: #e6e8ee;
  --darkened-bg: #f1f3f7;
  --body-bg: #f5f6fa;
}
html[data-theme="dark"] {
  --radar-shadow: none;
  --radar-shadow-hover: 0 0 0 1px var(--radar-accent);
  --radar-ring: 0 0 0 3px rgba(96, 165, 250, .25);
  --radar-input-bg: #111216;
  --radar-input-border: #30333b;
  --radar-accent-soft: #172036;
  --body-quiet-color: #9ca3af;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --radar-shadow: none;
    --radar-shadow-hover: 0 0 0 1px var(--radar-accent);
    --radar-ring: 0 0 0 3px rgba(96, 165, 250, .25);
    --radar-input-bg: #111216;
    --radar-input-border: #30333b;
    --radar-accent-soft: #172036;
    --body-quiet-color: #9ca3af;
  }
}

/* Cards everywhere get the same soft elevation */
.module, .ld-card, .rl-stat, #changelist .results, #changelist-filter {
  box-shadow: var(--radar-shadow);
}
.rl-stat, .ld-card { transition: box-shadow .2s, transform .2s, border-color .2s; }
.rl-stat:hover { box-shadow: var(--radar-shadow-hover); transform: translateY(-2px); }

/* =====================================================================
   Sidebar
   ===================================================================== */
#nav-sidebar {
  padding: 16px 12px;
  box-sizing: border-box;
}
#nav-sidebar .module {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 18px;
}
#nav-sidebar table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
#nav-sidebar .module caption,
#nav-sidebar .current-app .module caption {
  background: transparent;
  padding: 0 10px 6px;
  text-align: right;
  border-radius: 0;
}
#nav-sidebar .module caption a.section,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--body-quiet-color);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}
#nav-sidebar th, #nav-sidebar td { padding: 0; border: 0; background: transparent; }
#nav-sidebar th a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--body-fg);
  font-weight: 500;
  font-size: .9rem;
  transition: background .15s, color .15s;
}
#nav-sidebar th a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  opacity: .55;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
#nav-sidebar tr:hover th a { background: var(--darkened-bg); }
#nav-sidebar tr.current-model th a {
  background: var(--radar-accent-soft);
  color: var(--radar-accent);
  font-weight: 600;
}
#nav-sidebar tr.current-model th a::before { opacity: 1; }
#nav-sidebar .current-model { background: transparent; }

/* "Add" links collapse to a small + button that appears on hover */
#nav-sidebar td { width: 30px; text-align: center; }
#nav-sidebar a.addlink {
  display: inline-flex;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  font-size: 0;
  background: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
#nav-sidebar a.addlink::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
  color: var(--radar-accent);
}
#nav-sidebar tr:hover a.addlink { opacity: 1; }
#nav-sidebar a.addlink:hover { background: var(--radar-accent-soft); }

/* Sidebar icons (Lucide-style strokes) */
#nav-sidebar tr.model-listing     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21H3z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-monitorconfig { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-divaraccount { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-crawlrun    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-alertchannel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-user        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-group       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20a7 7 0 0 1 14 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M22 20a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E"); }

/* Sidebar search */
#nav-filter {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding-inline-start: 34px;
  background: var(--radar-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px;
}
/* ---- Sidebar toggle: modern floating tab ---- */
#toggle-nav-sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  z-index: 20;
  width: 28px;
  height: 52px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--hairline-color);
  border-inline-end: none;
  border-radius: 10px 0 0 10px;
  background: var(--radar-surface);
  color: var(--body-quiet-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -2px 4px 12px rgba(0,0,0,.08);
  transition: background .15s, color .15s, box-shadow .15s;
}
#toggle-nav-sidebar:hover {
  background: var(--darkened-bg);
  color: var(--radar-accent);
  box-shadow: -2px 4px 16px rgba(37,99,235,.14);
}
/* Hide the default » / « Django puts in via ::before */
#toggle-nav-sidebar::before { display: none !important; }
/* Show a custom panel-toggle SVG icon */
#toggle-nav-sidebar::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: none;
  transition: -webkit-mask-image .2s, mask-image .2s;
}

/* =====================================================================
   Form controls: one consistent input / select / button system
   ===================================================================== */
input[type="text"], input[type="search"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], input[type="tel"], textarea, select,
.vTextField, .vIntegerField, .vURLField {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--radar-input-border);
  border-radius: 10px;
  background-color: var(--radar-input-bg);
  color: var(--body-fg);
  font: inherit;
  font-size: .9rem;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.8; }
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--radar-input-border), var(--body-fg) 18%);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--radar-accent);
  box-shadow: var(--radar-ring);
}
::placeholder { color: var(--body-quiet-color); opacity: .75; }

select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 12px;
  padding-inline-start: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 16px;
  cursor: pointer;
}

/* ── Custom checkbox: list row selection (blue square) ── */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--radar-input-border);
  border-radius: 5px;
  background: var(--radar-input-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input[type="checkbox"]:checked {
  background: var(--radar-accent);
  border-color: var(--radar-accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
input[type="checkbox"]:hover:not(:checked) { border-color: var(--radar-accent); }
input[type="checkbox"]:focus-visible { box-shadow: var(--radar-ring); outline: none; }
input[type="checkbox"]:indeterminate {
  background: var(--radar-accent);
  border-color: var(--radar-accent);
}
input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M2.5 6h7'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M2.5 6h7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ── iOS toggle: only in change forms (not list pages) ── */
.change-form input[type="checkbox"],
.inline-group input[type="checkbox"] {
  width: 44px;
  height: 26px;
  border: none;
  border-radius: 13px;
  background: var(--radar-input-border);
  display: inline-block;
  position: relative;
  transition: background .22s ease;
  box-shadow: none;
}
.change-form input[type="checkbox"]::after,
.inline-group input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: auto;
  bottom: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .22s ease;
  transform: translateX(0);
}
.change-form input[type="checkbox"]:checked,
.inline-group input[type="checkbox"]:checked {
  background: var(--radar-good);
  border-color: transparent;
}
.change-form input[type="checkbox"]:checked::after,
.inline-group input[type="checkbox"]:checked::after {
  transform: translateX(18px);
  background: #fff;
  -webkit-mask: none;
  mask: none;
}
.change-form input[type="checkbox"]:hover:not(:checked),
.inline-group input[type="checkbox"]:hover:not(:checked) { border-color: transparent; }

/* Buttons */
.button, input[type="submit"], input[type="button"], .submit-row input, a.button, button.button,
.object-tools a, .ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s, box-shadow .15s, transform .08s, border-color .15s;
}
.button:hover, input[type="submit"]:hover, input[type="button"]:hover, .submit-row input:hover, a.button:hover, .object-tools a:hover {
  background: var(--button-hover-bg);
}
.button:active, input[type="submit"]:active, input[type="button"]:active, .ld-btn:active { transform: translateY(1px); }
.button:focus-visible, input[type="submit"]:focus-visible, .ld-btn:focus-visible { outline: none; box-shadow: var(--radar-ring); }

/* Primary actions use the accent */
.button.default, input[type="submit"].default, .submit-row input.default {
  background: var(--radar-accent);
  box-shadow: 0 1px 2px rgba(37, 99, 235, .3);
}
.button.default:hover, input[type="submit"].default:hover, .submit-row input.default:hover { background: var(--radar-accent-hover); }

/* Secondary buttons: outlined */
#changelist #toolbar input[type="submit"], #changelist .actions .button, .submit-row input:not(.default) {
  background: var(--radar-input-bg);
  color: var(--body-fg);
  border-color: var(--radar-input-border);
}
#changelist #toolbar input[type="submit"]:hover, #changelist .actions .button:hover, .submit-row input:not(.default):hover {
  background: var(--darkened-bg);
}

/* Destructive */
.submit-row a.deletelink, .deletelink {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: transparent;
  color: var(--radar-bad);
  border: 1px solid color-mix(in srgb, var(--radar-bad), transparent 60%);
  font-weight: 600;
  box-sizing: border-box;
}
.submit-row a.deletelink:hover { background: color-mix(in srgb, var(--radar-bad), transparent 90%); color: var(--radar-bad); }

.submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--hairline-color);
  border-radius: 12px;
  background: var(--radar-surface);
  box-shadow: var(--radar-shadow);
}
.submit-row input, .submit-row a.deletelink { margin: 0; }

.object-tools a { height: 34px; padding: 0 14px; font-size: .8rem; border-radius: 8px; }

/* Messages */
ul.messagelist li {
  border-radius: 10px;
  margin: 0 0 10px;
  font-size: .9rem;
  box-shadow: var(--radar-shadow);
}

/* Change-list search keeps its magnifier but aligns with the new inputs */
#changelist-search img { vertical-align: middle; opacity: .6; }

/* Fieldsets on settings/account forms */
fieldset.module { background: var(--radar-surface); border: 1px solid var(--hairline-color); border-radius: 12px; overflow: visible; }
fieldset.module h2 { background: transparent; color: var(--body-fg); border-bottom: 1px solid var(--hairline-color); padding: 14px 16px; font-size: .95rem; }
.form-row { padding: 14px 16px; border-bottom-color: var(--hairline-color); overflow: visible; }
.help, p.help, div.help { color: var(--body-quiet-color); font-size: .8rem; }

#nav-sidebar tr, #nav-sidebar tbody tr:nth-child(odd), #nav-sidebar tbody tr:nth-child(even) { background: transparent; }
fieldset.module h2, fieldset.module > h2, .module h2.fieldset-heading { border: 0; border-bottom: 1px solid var(--hairline-color); border-radius: 0; margin: 0; }
input.vIntegerField, input[type="number"] { width: 140px; }

/* Header: keep logo, title and user tools on one centred line */
#header { align-items: center; }
#branding { display: flex; align-items: center; }
#header #site-name { margin: 0; line-height: 1; }
#header #site-name a { display: inline-flex; align-items: center; gap: 10px; }
#header #site-name img { display: block; }
#user-tools { margin: 0; line-height: 1.6; }

/* =====================================================================
   Custom dropdown (built by radar-select.js over a native <select>)
   ===================================================================== */
.rs { position: relative; display: inline-block; min-width: 160px; vertical-align: middle; }
.rs > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; height: 100%; }
.rs-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--radar-input-border); border-radius: 10px;
  background: var(--radar-input-bg); color: var(--body-fg);
  font: inherit; font-size: .9rem; text-align: start; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.rs-btn:hover { border-color: color-mix(in srgb, var(--radar-input-border), var(--body-fg) 18%); }
.rs-btn:focus-visible, .rs.open .rs-btn { outline: none; border-color: var(--radar-accent); box-shadow: var(--radar-ring); }
.rs-btn .rs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-btn .rs-label.placeholder { color: var(--body-quiet-color); }
.rs-btn svg { width: 16px; height: 16px; flex: none; stroke: var(--body-quiet-color); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.rs.open .rs-btn svg { transform: rotate(180deg); }
.rs-list {
  position: absolute; z-index: 50; inset-inline-start: 0; top: calc(100% + 6px);
  min-width: 100%; max-height: 300px; overflow: auto; margin: 0; padding: 6px; list-style: none; box-sizing: border-box;
  background: var(--radar-surface); border: 1px solid var(--hairline-color); border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22), 0 4px 8px -4px rgba(16, 24, 40, .08);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s, transform .12s;
}
.rs.up .rs-list { top: auto; bottom: calc(100% + 6px); }
.rs.open .rs-list { opacity: 1; transform: none; pointer-events: auto; }
.rs-list li {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px;
  font-size: .88rem; color: var(--body-fg); cursor: pointer; white-space: nowrap; margin: 0;
}
.rs-list li::before { content: ""; width: 14px; height: 14px; flex: none; }
.rs-list li[aria-selected="true"] { color: var(--radar-accent); font-weight: 600; }
.rs-list li[aria-selected="true"]::before {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rs-list li.active { background: var(--darkened-bg); }
.rs-list li.danger { color: var(--radar-bad); }
.rs-list li[aria-disabled="true"] { opacity: .45; cursor: default; }
.rs-list li.sep { height: 1px; padding: 0; margin: 4px 6px; background: var(--hairline-color); cursor: default; }
.rs-list li.sep::before { display: none; }

/* Home page app list and recent actions as soft cards */
.dashboard #content-main .module, .dashboard #content-related .module {
  background: var(--radar-surface); border: 1px solid var(--hairline-color); border-radius: 12px; overflow: hidden;
}
.dashboard #content-main .module caption, .dashboard #content-related .module h2 {
  background: transparent; color: var(--body-fg); text-align: right; padding: 14px 16px; font-size: .95rem;
  border-bottom: 1px solid var(--hairline-color); border-radius: 0;
}
.dashboard #content-main .module caption a.section { color: var(--body-fg); }
.dashboard .module th, .dashboard .module td { padding: 12px 16px; border-bottom: 1px solid var(--hairline-color); background: transparent; }
.dashboard .module tr:last-child th, .dashboard .module tr:last-child td { border-bottom: 0; }
.dashboard .module tr:hover { background: var(--radar-row-hover); }
.dashboard #content-related { background: transparent; }
.dashboard #content-related h3 { padding: 12px 16px 0; color: var(--body-quiet-color); font-size: .8rem; }
.dashboard #recent-actions-module ul { padding: 8px 16px 14px; }
.rs.open { z-index: 100; }
.rs-list { min-width: max(100%, 240px); width: max-content; max-width: 360px; }
#changelist .actions { position: relative; z-index: 20; }

/* =====================================================================
   Responsive
   ===================================================================== */
html, body { overflow-x: clip; }
.skip-to-content-link { inset-inline-start: 8px; right: auto; left: auto; }

@media (max-width: 1024px) {
  #header, div.breadcrumbs { padding-inline: 16px; }
}

@media (max-width: 767px) {
  /* Header: logo on one line, user links wrap underneath */
  #header { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; justify-content: space-between; }
  #branding { flex: 1 1 auto; }
  #header #site-name { font-size: 1.05rem; }
  #header #site-name img { width: 28px; height: 28px; }
  #user-tools { flex: 1 1 100%; font-size: .75rem; text-align: start; padding: 0; }
  div.breadcrumbs { padding: 6px 16px; font-size: .76rem; }

  /* Sidebar toggle is useless on phones; Django already hides the sidebar itself */
  #toggle-nav-sidebar { display: none; }
  .main.shifted > #nav-sidebar { display: none; }
  #content { padding: 16px; }
  #content h1 { font-size: 1.15rem; }

  /* Stats: compact 2x2 grid */
  .rl-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rl-stat { padding: 12px; gap: 10px; }
  .rl-stat .ic { width: 34px; height: 34px; border-radius: 10px; }
  .rl-stat .ic svg { width: 17px; height: 17px; }
  .rl-stat b { font-size: 1.3rem; }
  .rl-stat span { font-size: .72rem; }

  /* Toolbar and actions stack full width */
  #changelist #toolbar form { display: flex; gap: 8px; }
  #changelist #toolbar #searchbar { min-width: 0; flex: 1; width: auto; }
  #changelist-search img { display: none; }
  #changelist .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  #changelist .actions label { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
  #changelist .actions .rs { flex: 1; min-width: 0; }

  /* Table: keep the essentials, drop secondary columns */
  #result_list .field-specs, #result_list .column-specs,
  #result_list .field-agency, #result_list .column-agency { display: none; }
  td.field-title_cell { min-width: 150px; }
  .rl-title { font-size: .85rem; }
  .rl-thumb { width: 48px; height: 40px; }

  /* Filter panel sits under the list */
  #changelist .changelist-form-container { display: flex; flex-direction: column; }
  #changelist-filter { position: static; width: auto; margin: 16px 0 0; order: 2; }

  /* Settings forms: labels above fields */
  .aligned .form-row > div { display: block; }
  .aligned label { width: auto; float: none; display: block; padding: 0 0 6px; }
  .aligned .help, .aligned p.help { margin-inline-start: 0; padding-inline-start: 0; }
  input.vTextField, .rs { max-width: 100%; }
  .submit-row { flex-direction: column; align-items: stretch; }
  .submit-row input, .submit-row a.deletelink { width: 100%; justify-content: center; }

  /* Home hero */
  .rh { padding: 28px 0 24px; }
  .rh img { width: 96px; height: 96px; border-radius: 22px; }
  .rh h1 { font-size: 1.5rem; }
}
@media (max-width: 767px) {
  #user-tools { box-sizing: border-box; width: 100%; margin: 0; white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  #user-tools .theme-toggle { margin: 0; }
  #result_list .field-status_badge, #result_list .column-status_badge { display: none; }
  td.field-price { font-size: .8rem; }
  #result_list td, #result_list th { padding: 8px 6px; }
}
.rs-btn .rs-label { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767px) {
  #changelist #toolbar, #changelist #toolbar form, #changelist-search > div { width: 100%; box-sizing: border-box; margin: 0; }
  #changelist #toolbar form { display: flex; gap: 8px; align-items: center; }
}
@media (max-width: 767px) {
  #header { flex-direction: column; flex-wrap: nowrap; align-items: stretch; height: auto; gap: 8px; }
  #branding, #user-tools { flex: none; }
}
.rs-btn .rs-label { flex: 1 1 0; width: 0; }
@media (max-width: 767px) {
  html body #header { height: auto; min-height: 0; }
}
#header { flex-shrink: 0; }
#changelist .actions .rs-btn .rs-label, .rs .rs-btn .rs-label { flex: 1 1 0; width: 0; min-width: 0; }
@media (max-width: 767px) {
  #changelist td.field-title_cell { min-width: 120px; }
  #result_list .field-thumb { width: 44px; }
  #changelist .rl-thumb { width: 44px; height: 38px; }
}
@media (max-width: 1024px) {
  #toggle-nav-sidebar, .main > #nav-sidebar, .main.shifted > #nav-sidebar { display: none; }
  .main.shifted > #nav-sidebar + .content, .main > .content { max-width: 100%; margin: 0; }
  #changelist .changelist-form-container { display: flex; flex-direction: column; }
  #changelist .changelist-form-container > div { width: 100%; }
  #changelist-filter { position: static; width: auto; margin: 16px 0 0; order: 2; max-height: none; }
  #changelist .results, #changelist form#changelist-form { margin-inline: 0; }
}
@media (max-width: 1024px) {
  #changelist { flex-direction: column; }
  #changelist > .changelist-form-container { width: 100%; }
  #changelist > #changelist-filter { order: 2; position: static; width: 100%; box-sizing: border-box; margin: 16px 0 0; }
  .rl-stats { grid-template-columns: repeat(2, 1fr); }
}
#header #site-name { display: flex; align-items: center; }

/* =====================================================================
   Change lists (all models): toolbar, actions, filter panel, results table
   ===================================================================== */
  /* Search, actions and filter panel */
  #changelist #toolbar { background: transparent; border: 0; padding: 0 0 12px; }
  #changelist #toolbar #searchbar { height: 38px; border-radius: 8px; padding: 0 12px; min-width: 280px; }
  #changelist #toolbar input[type="submit"] { height: 38px; border-radius: 8px; padding: 0 16px; }
  #changelist .actions { background: transparent; border: 0; padding: 0 0 10px; }
  #changelist .actions select { height: 34px; border-radius: 8px; }
  #changelist .actions .button { height: 34px; border-radius: 8px; }
  #changelist-filter { background: var(--radar-surface); border: 1px solid var(--hairline-color); border-radius: 12px; overflow: hidden; }
  #changelist-filter h2 { background: transparent; color: var(--body-fg); font-size: .95rem; border-bottom: 1px solid var(--hairline-color); }
  #changelist-filter details summary { font-weight: 600; font-size: .85rem; }
  #changelist-filter li { padding-block: 3px; }
  #changelist-filter li.selected a { color: var(--radar-accent); font-weight: 600; }

  /* Custom select inside filter sidebar — override width set by radar-select.js */
  #changelist-filter .rs { display: block; width: 100%; min-width: 0 !important; margin: 4px 0 2px; }
  #changelist-filter .rs-btn { width: 100%; }

  /* Results table */
  #changelist .results { background: var(--radar-surface); border: 1px solid var(--hairline-color); border-radius: 12px; overflow: auto; }
  #result_list { width: 100%; border-collapse: collapse; }
  #result_list thead th { background: transparent; border-bottom: 1px solid var(--hairline-color); color: var(--body-quiet-color); font-weight: 500; font-size: .8rem; padding: 12px 10px; text-transform: none; }
  #result_list thead th a { color: inherit; }
  #result_list tbody tr { background: transparent; }
  #result_list tbody tr:hover { background: var(--radar-row-hover); }
  #result_list tbody tr.selected { background: var(--selected-row); }
  #result_list td, #result_list th { padding: 10px 8px; vertical-align: middle; border-bottom: 1px solid var(--hairline-color); font-size: .88rem; }
  #result_list tbody tr:last-child td, #result_list tbody tr:last-child th { border-bottom: 0; }

  #changelist .paginator { border: 0; background: transparent; padding-top: 14px; }
#changelist, #changelist .changelist-form-container, #changelist form#changelist-form { background: transparent; }
#result_list th.field-username a, #result_list th[class^="field-"] a { font-weight: 600; }

/* =====================================================================
   Scrollbars: page scrollbar on the right while content stays RTL,
   slim themed thumbs everywhere.
   ===================================================================== */
html { direction: ltr; }
body { direction: rtl; }

:root, html[data-theme="light"] {
  --radar-scroll-thumb: #c9ced8;
  --radar-scroll-thumb-hover: #9aa3b2;
  --radar-scroll-track: transparent;
}
html[data-theme="dark"] {
  --radar-scroll-thumb: #3a3e48;
  --radar-scroll-thumb-hover: #565b67;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --radar-scroll-thumb: #3a3e48;
    --radar-scroll-thumb-hover: #565b67;
  }
}

* { scrollbar-width: thin; scrollbar-color: var(--radar-scroll-thumb) var(--radar-scroll-track); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--radar-scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--radar-scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--radar-scroll-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* =====================================================================
   Sticky header: hides while scrolling down, returns on scroll up (radar-header.js)
   ===================================================================== */
#header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
#header.is-hidden { transform: translateY(-100%); }
#header.is-scrolled { box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { #header { transition: none; } }
/* Django's own sticky sidebar follows the header in and out */
#nav-sidebar.sticky { top: var(--radar-header-offset, 0px); max-height: calc(100vh - var(--radar-header-offset, 0px)); transition: top .25s ease, max-height .25s ease; }
/* The sticky header needs a container as tall as the page, not just the viewport */
body:not(.dashboard) #container { height: auto; min-height: 100vh; }

/* =====================================================================
   Loading states (radar-loading.js): progress bar, button spinners,
   image placeholders, skeleton blocks. All colours come from the theme.
   ===================================================================== */
:root, html[data-theme="light"] { --radar-skel-base: #eceef3; --radar-skel-shine: #f7f8fb; }
html[data-theme="dark"] { --radar-skel-base: #1d1f25; --radar-skel-shine: #2a2d35; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --radar-skel-base: #1d1f25; --radar-skel-shine: #2a2d35; } }

@keyframes radar-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes radar-spin { to { transform: rotate(360deg); } }

.rl-skel, .rl-img-wrap {
  background: linear-gradient(100deg, var(--radar-skel-base) 30%, var(--radar-skel-shine) 50%, var(--radar-skel-base) 70%);
  background-size: 200% 100%;
  animation: radar-shimmer 1.3s linear infinite;
}
.rl-skel { border-radius: 6px; display: block; }

/* Images fade in over a shimmer instead of popping in */
img.rl-thumb, .ld-gallery img { opacity: 0; transition: opacity .3s ease; }
img.rl-thumb.is-loaded, .ld-gallery img.is-loaded { opacity: 1; }
.rl-img-wrap.is-loaded { animation: none; background: none; }
.ld-gallery a { display: block; border-radius: 8px; overflow: hidden; }

/* Top progress bar for navigation and form submits */
#radar-progress {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 2000; pointer-events: none;
  transform-origin: right; transform: scaleX(0); opacity: 0;
  background: var(--radar-accent); box-shadow: 0 0 8px var(--radar-accent);
  transition: transform .4s ease, opacity .2s ease;
}
#radar-progress.run { opacity: 1; transform: scaleX(.85); transition: transform 8s cubic-bezier(.1, .7, .2, 1), opacity .15s; }

/* Submit buttons: spinner and no double submit */
.is-loading { position: relative; pointer-events: none; cursor: progress; }
button.is-loading { color: transparent !important; }
button.is-loading::after, .ld-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--button-fg) transparent var(--button-fg) transparent;
  animation: radar-spin .7s linear infinite;
}
.ld-btn.is-loading svg { visibility: hidden; }
input[type="submit"].is-loading { opacity: .65; }
.field-thumb a.rl-img-wrap { display: block; width: fit-content; border-radius: 8px; overflow: hidden; }

/* Live log skeleton */
.rl-logskel { display: grid; gap: 10px; padding: 4px 0; }
.rl-logskel .rl-skel { height: 11px; }

@media (prefers-reduced-motion: reduce) {
  .rl-skel, .rl-img-wrap, button.is-loading::after, .ld-btn.is-loading::after { animation: none; }
  #radar-progress.run { transition: opacity .15s; }
}

/* Icons for sections without a specific one (and Axes login-security pages) */
#nav-sidebar th a::before { -webkit-mask-image: var(--icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E")); mask-image: var(--icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E")); }
#nav-sidebar tr.model-accessattempt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-accessfailurelog { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m10 10 4 4M14 10l-4 4'/%3E%3C/svg%3E"); }
#nav-sidebar tr.model-accesslog { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); }

/* =====================================================================
   Header user area: theme button + user menu (templates/admin/base_site.html)
   ===================================================================== */
#user-tools.ru { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: .85rem; }
#user-tools.ru .theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; transition: background .15s;
}
#user-tools.ru .theme-toggle:hover { background: rgba(255, 255, 255, .08); }
#user-tools.ru .theme-toggle svg { width: 20px; height: 20px; color: #d4d4d8; }

.ru-menu { position: relative; }
.ru-menu > summary { list-style: none; }
.ru-menu > summary::-webkit-details-marker { display: none; }
.ru-user {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 10px; border-radius: 10px; cursor: pointer;
  color: #f4f4f5; transition: background .15s; user-select: none;
}
.ru-user:hover, .ru-menu[open] > .ru-user { background: rgba(255, 255, 255, .08); }
.ru-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; font-weight: 700; font-size: .85rem;
}
.ru-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ru-chev { width: 16px; height: 16px; stroke: #a1a1aa; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ru-menu[open] .ru-chev { transform: rotate(180deg); }

.ru-pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 1100; min-width: 220px; padding: 6px;
  background: var(--radar-surface); border: 1px solid var(--hairline-color); border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .35); animation: ru-in .14s ease;
}
@keyframes ru-in { from { opacity: 0; transform: translateY(-4px); } }
.ru-head { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline-color); text-align: right; direction: rtl; }
.ru-head b { color: var(--body-fg); font-size: .92rem; }
.ru-head span { color: var(--body-quiet-color); font-size: .78rem; }
#user-tools .ru-pop .ru-item, #user-tools .ru-pop form button.ru-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: 9px; background: transparent; color: var(--body-fg); font: inherit; font-size: .88rem;
  text-decoration: none; cursor: pointer; text-transform: none; letter-spacing: 0;
}
#user-tools .ru-pop .ru-item:hover { background: var(--darkened-bg); text-decoration: none; }
#user-tools .ru-pop .ru-item svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
#user-tools .ru-pop .ru-danger,
#user-tools .ru-pop form button.ru-danger { color: var(--radar-bad) !important; }
#user-tools .ru-pop form { margin: 0; }

@media (max-width: 767px) {
  #user-tools.ru { justify-content: space-between; }
  .ru-name { max-width: 120px; }
}

/* ---- System status dot ---- */
#radar-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--body-quiet-color); opacity: .5;
  transition: background .4s, box-shadow .4s, opacity .4s;
  margin-inline-start: 6px; align-self: center;
}
#radar-status-dot.s-active  { background: #22c55e; opacity: 1; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
#radar-status-dot.s-stopped { background: var(--radar-bad); opacity: 1; box-shadow: 0 0 0 3px rgba(220,38,38,.2); }
#radar-status-dot.s-running { background: #3b82f6; opacity: 1; box-shadow: 0 0 0 3px rgba(59,130,246,.2); animation: pulse-dot 1.4s infinite; }
@keyframes pulse-dot { 0%,100%{ box-shadow:0 0 0 3px rgba(59,130,246,.2); } 50%{ box-shadow:0 0 0 6px rgba(59,130,246,.06); } }

/* ---- Job failure notification banner ---- */
#radar-job-alert {
  display: none;
  position: fixed; top: var(--radar-header-offset, 56px); right: 0; left: 0; z-index: 200;
  background: var(--radar-bad); color: #fff;
  padding: 7px 20px; font-size: .82rem; font-weight: 500;
  justify-content: space-between; align-items: center; gap: 12px;
}
#radar-job-alert.visible { display: flex; }
#radar-job-alert a { color: #fff; text-decoration: underline; }
#radar-job-alert button { background: none; border: none; color: #fff; cursor: pointer; font-size: 1.1rem; padding: 0 4px; line-height: 1; }

/* ---- Quick search (Ctrl+K) ---- */
#rqs-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  align-items: flex-start; justify-content: center; padding-top: 80px;
}
#rqs-overlay.open { display: flex; }
#rqs-box {
  background: var(--radar-surface); border: 1px solid var(--hairline-color);
  border-radius: 14px; width: min(560px, 94vw); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
#rqs-input-wrap { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline-color); }
#rqs-input-wrap svg { flex-shrink: 0; color: var(--body-quiet-color); }
#rqs-input {
  flex: 1; border: none; background: none; font: inherit; font-size: 1rem;
  color: var(--body-fg); outline: none;
}
#rqs-input::placeholder { color: var(--body-quiet-color); }
#rqs-results { max-height: 360px; overflow-y: auto; }
.rqs-section { padding: 8px 0; }
.rqs-section-title { padding: 4px 16px; font-size: .72rem; font-weight: 600; color: var(--body-quiet-color); text-transform: uppercase; letter-spacing: .06em; }
.rqs-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  text-decoration: none; color: var(--body-fg); font-size: .88rem;
  transition: background .1s;
}
.rqs-item:hover, .rqs-item.active { background: var(--darkened-bg); text-decoration: none; color: var(--body-fg); }
.rqs-item-icon { width: 30px; height: 30px; border-radius: 7px; background: var(--darkened-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rqs-item-icon svg { width: 15px; height: 15px; color: var(--body-quiet-color); }
.rqs-item-sub { font-size: .75rem; color: var(--body-quiet-color); margin-top: 1px; }
.rqs-item-body { display: flex; flex-direction: column; min-width: 0; }
.rqs-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rqs-empty { padding: 24px 16px; text-align: center; color: var(--body-quiet-color); font-size: .88rem; }
#rqs-footer { padding: 8px 16px; border-top: 1px solid var(--hairline-color); display: flex; gap: 12px; font-size: .72rem; color: var(--body-quiet-color); }
#rqs-footer kbd { background: var(--darkened-bg); border: 1px solid var(--hairline-color); border-radius: 4px; padding: 1px 5px; font-size: .7rem; }

/* ---- Skeleton loading ---- */
@keyframes skeleton-pulse { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.skeleton-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline-color); }
.skeleton-cell { border-radius: 5px; background: var(--darkened-bg); animation: skeleton-pulse 1.4s ease-in-out infinite; }
#result_list tbody tr.skeleton-loading td { padding: 8px; }
#result_list tbody tr.skeleton-loading td .skeleton-cell { height: 14px; width: 100%; display: block; }