:root {
  color-scheme: dark;
  --bg: #061326;
  --bg-elevated: #0a1c36;
  --surface: rgba(11, 31, 59, 0.92);
  --surface-solid: #0d2342;
  --surface-soft: rgba(20, 49, 86, 0.62);
  --surface-hover: rgba(28, 67, 114, 0.72);
  --header: rgba(4, 15, 31, 0.94);
  --border: rgba(105, 168, 255, 0.24);
  --border-strong: rgba(105, 168, 255, 0.46);
  --text: #f5f8ff;
  --text-strong: #ffffff;
  --muted: #b6c7df;
  --muted-strong: #c9d8ee;
  --primary: #4db8ff;
  --primary-strong: #0b6fb8;
  --primary-soft: rgba(39, 168, 255, 0.13);
  --success: #65eba0;
  --success-soft: rgba(101, 235, 160, 0.12);
  --warning: #ffbd70;
  --warning-soft: rgba(255, 189, 112, 0.12);
  --danger: #ff7d91;
  --danger-soft: rgba(255, 125, 145, 0.12);
  --focus-ring: #9bd7ff;
  --focus-gap: #061326;
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.24);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.16);
  --page-glow-one: rgba(24, 125, 234, 0.19);
  --page-glow-two: rgba(103, 71, 220, 0.13);
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --page-title-size: clamp(1.9rem, 2.55vw, 2.35rem);
  --section-title-size: 1.45rem;
  --page-gap: 1rem;
  --card-padding: 1.5rem;
  --control-height: 44px;
  --table-cell-y: 0.9rem;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef3f9;
  --bg-elevated: #e5edf7;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-solid: #ffffff;
  --surface-soft: #f4f7fb;
  --surface-hover: #e9f2fc;
  --header: rgba(255, 255, 255, 0.94);
  --border: rgba(40, 79, 126, 0.18);
  --border-strong: rgba(25, 106, 184, 0.38);
  --text: #1d2f49;
  --text-strong: #10213a;
  --muted: #52657d;
  --muted-strong: #40546d;
  --primary: #096fb5;
  --primary-strong: #075e99;
  --primary-soft: rgba(8, 125, 204, 0.10);
  --success: #087a42;
  --success-soft: rgba(8, 122, 66, 0.10);
  --warning: #9a5900;
  --warning-soft: rgba(154, 89, 0, 0.10);
  --danger: #b4233b;
  --danger-soft: rgba(180, 35, 59, 0.09);
  --focus-ring: #075e99;
  --focus-gap: #ffffff;
  --shadow: 0 20px 50px rgba(30, 58, 92, 0.10);
  --shadow-soft: 0 10px 26px rgba(30, 58, 92, 0.08);
  --page-glow-one: rgba(42, 139, 225, 0.10);
  --page-glow-two: rgba(111, 92, 219, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 18%, var(--page-glow-one), transparent 34%),
    radial-gradient(circle at 88% 0%, var(--page-glow-two), transparent 32%),
    var(--bg);
  line-height: 1.45;
  transition: background-color 160ms ease, color 160ms ease;
}

[hidden] {
  display: none !important;
}

button,
input,
select {
  font: inherit;
}

button,
input,
select,
.card,
.topbar,
.status-pill,
.count-badge {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

button {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.82rem 1rem;
  font-weight: 760;
  color: #ffffff;
  background: linear-gradient(90deg, var(--primary-strong), var(--primary));
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(13, 130, 220, 0.18);
}

button:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button.secondary {
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: none;
}

button.secondary:hover:not(:disabled) {
  background: var(--surface-hover);
}

button.danger {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
  box-shadow: none;
}

button.compact {
  width: auto;
  min-height: 38px;
  padding: 0.55rem 0.82rem;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--focus-gap);
}

input,
select {
  width: 100%;
  min-height: 44px;
  margin: 0.38rem 0 1rem;
  padding: 0.72rem 0.78rem;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

input::placeholder {
  color: var(--muted);
  opacity: 0.82;
}

input:hover,
select:hover {
  border-color: var(--border-strong);
}

select {
  appearance: auto;
}

label {
  color: var(--muted-strong);
  font-size: 0.9rem;
  font-weight: 680;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0.3rem 0 0.65rem;
  color: var(--text-strong);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
}

h1 span,
.topbar strong span,
.logo-mark span,
.brand-mark span {
  color: var(--primary);
}

a {
  color: var(--primary);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--card-padding);
  backdrop-filter: blur(14px);
}

.card-compact {
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}

.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.card-heading .eyebrow {
  margin-top: 0;
}

.eyebrow {
  margin: 0 0 0.45rem;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.subtle,
.small {
  color: var(--muted);
  line-height: 1.58;
}

.small {
  font-size: 0.8rem;
  text-align: center;
  margin-top: 1rem;
}

.left-aligned {
  text-align: left;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}

.message {
  min-height: 1.35rem;
  margin: 0.8rem 0 0;
  color: var(--success);
}

.message:empty {
  min-height: 0;
  margin: 0;
}

.message.error {
  color: var(--danger);
}

.stacked-form {
  display: grid;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.info-note {
  display: grid;
  gap: 0.3rem;
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.info-note strong {
  color: var(--text);
}

/* Authentication */

.auth-page {
  display: grid;
  place-items: center;
}

.auth-shell {
  width: min(1020px, calc(100% - 2rem));
  min-height: 100vh;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.75fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: 5rem 0 2rem;
}

.auth-theme-control {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.auth-help-button {
  flex: 0 0 auto;
}

.logo-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  color: var(--text-strong);
  font-weight: 900;
  font-size: 1.45rem;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.brand-panel h1 {
  font-size: clamp(2.7rem, 7vw, 5.2rem);
  margin: 0.45rem 0 0.8rem;
}

.brand-panel .subtle {
  max-width: 620px;
}

.tagline {
  margin: 0.4rem 0;
  color: var(--text-strong);
  font-size: 1.22rem;
  font-weight: 680;
}

.auth-card {
  width: 100%;
}

/* Shared navigation */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  padding: 0.7rem max(1rem, 4vw);
  border-bottom: 1px solid var(--border);
  background: var(--header);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 0.72rem;
  font-weight: 900;
}

.topnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.topnav > a {
  padding: 0.62rem 0.76rem;
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  text-decoration: none;
  font-weight: 720;
}

.topnav > a:hover,
.topnav > a.active {
  color: var(--text-strong);
  background: var(--surface-soft);
}

.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

.theme-control span {
  font-size: 0.78rem;
  font-weight: 760;
}

.theme-control select {
  width: auto;
  min-width: 92px;
  min-height: 34px;
  margin: 0;
  padding: 0.36rem 1.7rem 0.36rem 0.55rem;
  border: 0;
  background: var(--surface-soft);
  font-size: 0.82rem;
}

.topbar-theme {
  margin-left: 0.25rem;
  box-shadow: none;
}

/* Main layout */

.dashboard-shell {
  width: min(1280px, calc(100% - 2rem));
  margin: 1.7rem auto 3rem;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.45rem;
}

.hero .subtle {
  margin-bottom: 0;
}

.status-pill,
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 0.78rem;
  color: var(--muted-strong);
  background: var(--surface-soft);
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 720;
}

.count-badge {
  min-width: 76px;
}


.status-online {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
  background: var(--success-soft);
}

.status-offline {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: var(--warning-soft);
}

.metric-grid,
.content-grid {
  display: grid;
  gap: 1rem;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.content-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

.metric {
  min-height: 118px;
}

.metric span {
  display: block;
  color: var(--muted);
  margin-bottom: 0.72rem;
  font-size: 0.9rem;
}

.metric strong {
  color: var(--text-strong);
  font-size: 1.12rem;
}

.feature-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted-strong);
  line-height: 1.95;
}

/* Team Members */

.team-hero {
  align-items: flex-end;
}

.organization-context {
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: end;
}

.organization-selector-wrap {
  min-width: 0;
}

.organization-context select {
  margin: 0.35rem 0 0;
}

.page-message {
  margin: 0 0 1rem;
}

.team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.68fr);
  gap: 1rem;
  align-items: start;
}

.team-sidebar {
  display: grid;
  gap: 1rem;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.section-heading h2 {
  margin-bottom: 0.35rem;
}

.section-heading p:not(.eyebrow) {
  margin: 0;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.data-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--surface-solid) 58%, transparent);
}

.data-table th,
.data-table td {
  padding: 0.92rem 0.82rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover td {
  background: var(--primary-soft);
}

.data-table th {
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.member-identity {
  min-width: 190px;
}

.member-name {
  display: block;
  color: var(--text-strong);
  line-height: 1.25;
}

.table-secondary {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.table-select {
  min-width: 132px;
  min-height: 38px;
  margin: 0;
  padding: 0.5rem 0.62rem;
}

.member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  min-width: 220px;
}

.table-action {
  min-width: auto;
  min-height: 36px;
  padding: 0.45rem 0.68rem;
  font-size: 0.8rem;
}

.empty-state {
  padding: 1.7rem !important;
  color: var(--muted);
  text-align: center !important;
}

.status-badge,
.role-badge,
.access-badge {
  display: inline-flex;
  width: max-content;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.36rem 0.58rem;
  color: var(--muted-strong);
  background: var(--surface-soft);
  font-size: 0.76rem;
  font-weight: 760;
  white-space: nowrap;
}

.role-owner,
.role-admin {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: var(--primary-soft);
}

.access-beta {
  color: #a98cff;
  border-color: rgba(169, 140, 255, 0.35);
  background: rgba(169, 140, 255, 0.10);
}

.access-trial {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 36%, transparent);
  background: var(--warning-soft);
}

.status-active {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
  background: var(--success-soft);
}

.status-disabled {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: var(--warning-soft);
}

.invitation-result {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.invitation-list {
  display: grid;
  gap: 0.75rem;
}

.invitation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.invitation-item > div {
  min-width: 0;
}

.invitation-item strong {
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.invitation-item button {
  flex: 0 0 auto;
}

/* Responsive behavior */

@media (max-width: 1100px) {
  .team-layout {
    grid-template-columns: 1fr;
  }

  .team-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .topbar {
    align-items: flex-start;
  }

  .topnav {
    flex-wrap: wrap;
  }

  .topbar-theme {
    order: 3;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-shell,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .auth-shell {
    max-width: 720px;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: static;
    flex-direction: column;
    padding: 0.8rem 1rem;
  }

  .topnav {
    width: 100%;
    justify-content: flex-start;
  }

  .topnav > a {
    flex: 1 1 auto;
    text-align: center;
  }

  .topnav > button {
    flex: 1 1 auto;
  }

  .topbar-theme {
    flex: 1 1 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .organization-context {
    width: 100%;
  }

  .team-sidebar {
    grid-template-columns: 1fr;
  }

  .data-table {
    min-width: 0;
  }

  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tbody {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .data-table tr {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-solid);
  }

  .data-table td {
    display: grid;
    grid-template-columns: minmax(90px, 0.35fr) minmax(0, 0.65fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.8rem;
    border-bottom: 1px solid var(--border);
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .data-table td.member-identity {
    min-width: 0;
  }

  .member-actions {
    min-width: 0;
  }

  .data-table .empty-state {
    display: block;
  }

  .data-table .empty-state::before {
    content: none;
  }

  .table-select {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .dashboard-shell {
    width: min(100% - 1rem, 1280px);
    margin-top: 1rem;
  }

  .card {
    padding: 1rem;
    border-radius: 14px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .organization-context,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .section-actions {
    justify-content: space-between;
  }

  .section-heading > button {
    width: 100%;
  }

  .auth-theme-control {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
  }

  .auth-theme-control .theme-control {
    width: 100%;
    justify-content: space-between;
  }

  .auth-shell {
    width: min(100% - 1rem, 720px);
    padding-top: 6rem;
    gap: 1.2rem;
  }

  .brand-panel h1 {
    font-size: clamp(2.4rem, 15vw, 4rem);
  }

  .data-table td {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .member-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-actions .danger {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* v0.2.2 Dashboard, profile, and settings foundation */

.page-hero {
  align-items: flex-end;
}

.page-hero h1 {
  max-width: 920px;
  font-size: var(--page-title-size);
}

.hero-copy {
  min-width: 0;
}

.dashboard-context {
  width: min(430px, 100%);
  display: grid;
  gap: 0.8rem;
}

.dashboard-context > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.context-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dashboard-context strong {
  color: var(--text-strong);
  font-size: 0.98rem;
}

.dashboard-context .status-pill {
  width: 100%;
}

.metric {
  display: flex;
  flex-direction: column;
}

.metric small {
  display: block;
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.quick-actions {
  display: grid;
  gap: 0.75rem;
}

.quick-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.quick-action:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.quick-action strong,
.quick-action small {
  display: block;
}

.quick-action strong {
  color: var(--text-strong);
}

.quick-action small {
  margin-top: 0.25rem;
  color: var(--muted);
  line-height: 1.4;
}

.settings-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.settings-card {
  min-height: 100%;
}

.settings-card .card-heading {
  margin-bottom: 1rem;
}

.settings-card .card-heading .subtle {
  margin: 0.45rem 0 0;
}

.field-help {
  margin: -0.55rem 0 1rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.preference-note,
.format-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.preference-note {
  padding: 0.9rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.format-preview {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 1rem;
  padding: 1rem;
}

.format-preview span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.format-preview strong {
  color: var(--text-strong);
  font-size: 1.05rem;
}

.future-settings-card {
  align-self: stretch;
}

input[readonly] {
  color: var(--muted-strong);
  cursor: not-allowed;
  background: color-mix(in srgb, var(--surface-soft) 80%, var(--surface-solid));
}

@media (max-width: 920px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .page-hero {
    align-items: flex-start;
  }

  .dashboard-context {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .page-hero h1 {
    font-size: clamp(1.9rem, 10vw, 2.35rem);
  }
}


/* DroneHQ Online v0.2.3 accessible accent system */
html[data-accent="blue"] {
  --primary: #4db8ff;
  --primary-strong: #0b6fb8;
  --primary-soft: rgba(77, 184, 255, 0.14);
  --focus-ring: #9bd7ff;
}
html[data-accent="emerald"] {
  --primary: #4ade80;
  --primary-strong: #087a42;
  --primary-soft: rgba(74, 222, 128, 0.14);
  --focus-ring: #9af0ba;
}
html[data-accent="purple"] {
  --primary: #c4a7ff;
  --primary-strong: #6d3fc0;
  --primary-soft: rgba(196, 167, 255, 0.14);
  --focus-ring: #dccbff;
}
html[data-accent="orange"] {
  --primary: #ffb866;
  --primary-strong: #a64b00;
  --primary-soft: rgba(255, 184, 102, 0.14);
  --focus-ring: #ffd39f;
}
html[data-accent="red"] {
  --primary: #ff8ea1;
  --primary-strong: #b4233b;
  --primary-soft: rgba(255, 142, 161, 0.14);
  --focus-ring: #ffc2cc;
}
html[data-accent="teal"] {
  --primary: #4fd1c5;
  --primary-strong: #0f766e;
  --primary-soft: rgba(79, 209, 197, 0.14);
  --focus-ring: #9ce7e0;
}

html[data-theme="light"][data-accent="blue"] {
  --primary: #096fb5;
  --primary-strong: #075e99;
  --primary-soft: rgba(9, 111, 181, 0.11);
  --focus-ring: #075e99;
}
html[data-theme="light"][data-accent="emerald"] {
  --primary: #087a42;
  --primary-strong: #066537;
  --primary-soft: rgba(8, 122, 66, 0.10);
  --focus-ring: #066537;
}
html[data-theme="light"][data-accent="purple"] {
  --primary: #6d3fc0;
  --primary-strong: #59319f;
  --primary-soft: rgba(109, 63, 192, 0.10);
  --focus-ring: #59319f;
}
html[data-theme="light"][data-accent="orange"] {
  --primary: #a64b00;
  --primary-strong: #873d00;
  --primary-soft: rgba(166, 75, 0, 0.10);
  --focus-ring: #873d00;
}
html[data-theme="light"][data-accent="red"] {
  --primary: #b4233b;
  --primary-strong: #921b30;
  --primary-soft: rgba(180, 35, 59, 0.10);
  --focus-ring: #921b30;
}
html[data-theme="light"][data-accent="teal"] {
  --primary: #0f766e;
  --primary-strong: #0b615b;
  --primary-soft: rgba(15, 118, 110, 0.10);
  --focus-ring: #0b615b;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  color: #ffffff;
  background: #0b6fb8;
  border-radius: var(--radius-sm);
  font-weight: 800;
}
.skip-link:focus {
  top: 1rem;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1rem;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: linear-gradient(90deg, var(--primary-strong), var(--primary));
  text-decoration: none;
  font-weight: 760;
}
.button-link.secondary {
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
}

.status-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 52%, transparent);
  background: var(--danger-soft);
}

.appearance-preview {
  display: grid;
  gap: 0.75rem;
  margin: 0.2rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.preview-nav-item {
  width: max-content;
  padding: 0.55rem 0.75rem;
  color: var(--text-strong);
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  font-weight: 760;
}
.preview-card {
  padding: 1rem;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.preview-card h3 {
  margin: 0.2rem 0 0.4rem;
  color: var(--text-strong);
}
.preview-actions,
.component-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.preview-actions button {
  width: auto;
}
.component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.component-wide {
  grid-column: 1 / -1;
}
.component-stack {
  display: grid;
  gap: 0.7rem;
}
.component-stack button {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 760px) {
  .component-grid {
    grid-template-columns: 1fr;
  }
}


/* Interface scale and density preferences */
html[data-heading-size="large"] {
  --page-title-size: clamp(2.2rem, 3.1vw, 2.8rem);
  --section-title-size: 1.6rem;
}

html[data-heading-size="standard"] {
  --page-title-size: clamp(2rem, 2.75vw, 2.5rem);
  --section-title-size: 1.5rem;
}

html[data-heading-size="reduced"],
html:not([data-heading-size]) {
  --page-title-size: clamp(1.75rem, 2.25vw, 2.15rem);
  --section-title-size: 1.35rem;
}

html[data-density="compact"] {
  --page-gap: 0.75rem;
  --card-padding: 1.05rem;
  --control-height: 38px;
  --table-cell-y: 0.62rem;
}

html[data-density="comfortable"],
html:not([data-density]) {
  --page-gap: 1rem;
  --card-padding: 1.35rem;
  --control-height: 44px;
  --table-cell-y: 0.82rem;
}

.hero h1,
.page-hero h1,
.team-hero h1 {
  font-size: var(--page-title-size);
  line-height: 1.08;
}

.card h2,
.section-heading h2,
.card-heading h2 {
  font-size: var(--section-title-size);
  line-height: 1.2;
}

.metric-grid,
.content-grid,
.settings-layout,
.team-layout,
.component-grid {
  gap: var(--page-gap);
}

input,
select,
button,
.button-link {
  min-height: var(--control-height);
}

.data-table th,
.data-table td {
  padding-top: var(--table-cell-y);
  padding-bottom: var(--table-cell-y);
}

.interface-preference-grid {
  margin-top: 0.9rem;
}

#save-interface-button {
  width: 100%;
  margin: 0.85rem 0 1rem;
}

html[data-density="compact"] .dashboard-shell {
  margin-top: 1.2rem;
}

html[data-density="compact"] .hero {
  margin-bottom: 1rem;
}

html[data-density="compact"] .card-heading {
  margin-bottom: 0.8rem;
}

@media (max-width: 760px) {
  html[data-heading-size="large"] {
    --page-title-size: 2rem;
  }
}


/* DroneHQ Online v0.2.5 — Global application shell */

:root {
  --shell-height: 72px;
  --crawler-height: 38px;
  --shell-max-width: 1680px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.shell-topbar {
  min-height: var(--shell-height);
  padding: 0.58rem clamp(0.8rem, 2vw, 1.6rem);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--header) 96%, transparent);
  backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-width: max-content;
  color: var(--text-strong);
  text-decoration: none;
}

.shell-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-soft);
}

.shell-brand-copy {
  display: grid;
  line-height: 1.02;
}

.shell-brand-copy strong {
  font-size: 1.03rem;
  letter-spacing: 0.01em;
}

.shell-brand-copy strong span {
  color: var(--primary);
}

.shell-brand-copy small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 740;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shell-navigation {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
}

.shell-navigation > a,
.shell-menu-button {
  min-height: 38px;
  padding: 0.53rem 0.62rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 740;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.shell-navigation > a:hover,
.shell-navigation > a:focus-visible,
.shell-navigation > a.active,
.shell-menu-button:hover,
.shell-menu-button:focus-visible,
.shell-menu.open .shell-menu-button {
  color: var(--text-strong);
  background: var(--surface-soft);
}

.shell-navigation > a.active {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.shell-menu {
  position: relative;
}

.shell-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 140;
  width: max-content;
  min-width: 220px;
  padding: 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  display: none;
}

.shell-menu.open .shell-dropdown {
  display: grid;
}

.shell-dropdown a {
  padding: 0.68rem 0.72rem;
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 680;
}

.shell-dropdown a:hover,
.shell-dropdown a:focus-visible {
  color: var(--text-strong);
  background: var(--surface-soft);
}

.shell-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
  min-width: max-content;
}

.shell-utility,
.shell-icon-button,
.shell-profile-button,
.shell-mobile-toggle {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  background: var(--surface);
  box-shadow: none;
}

.shell-utility,
.shell-profile-button {
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
}

.shell-utility {
  max-width: 185px;
  padding: 0.42rem 0.66rem;
  font-size: 0.78rem;
  font-weight: 720;
}

.shell-utility-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-icon-button {
  position: relative;
  width: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.shell-notification-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--surface);
}

.shell-theme-control select {
  width: auto;
  min-width: 82px;
  min-height: 38px;
  margin: 0;
  padding: 0.35rem 1.65rem 0.35rem 0.58rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
}

.shell-profile-button {
  min-width: 152px;
  padding: 0.3rem 0.55rem 0.3rem 0.36rem;
  text-align: left;
}

.shell-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--primary-contrast);
  background: var(--primary);
  font-size: 0.72rem;
  font-weight: 860;
}

.shell-profile-copy {
  min-width: 0;
  display: grid;
  flex: 1;
}

.shell-profile-copy strong,
.shell-profile-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-profile-copy strong {
  color: var(--text-strong);
  font-size: 0.78rem;
}

.shell-profile-copy small {
  margin-top: 0.08rem;
  color: var(--muted);
  font-size: 0.66rem;
}

.shell-popover-wrap {
  position: relative;
}

.shell-popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 145;
  width: min(380px, calc(100vw - 2rem));
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.shell-popover[hidden] {
  display: none;
}

.profile-popover {
  width: 245px;
  padding: 0.4rem;
  display: grid;
}

.profile-popover a,
.shell-sign-out {
  width: 100%;
  padding: 0.7rem 0.72rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  background: transparent;
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 680;
}

.profile-popover a:hover,
.profile-popover a:focus-visible,
.shell-sign-out:hover,
.shell-sign-out:focus-visible {
  color: var(--text-strong);
  background: var(--surface-soft);
}

.shell-sign-out {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  color: var(--danger);
}

.shell-popover-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}

.shell-popover-heading h2 {
  margin: 0.08rem 0 0;
  font-size: 1rem;
}

.shell-notification-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}

.shell-notification-item:first-of-type {
  border-top: 0;
}

.shell-notification-item p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.notification-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--success);
  background: var(--success-soft);
}

.muted-item .notification-icon {
  color: var(--muted-strong);
  background: var(--surface-soft);
}

.crawler-rail {
  min-height: var(--crawler-height);
  padding: 0.42rem clamp(0.8rem, 2vw, 1.6rem);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface-solid));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  color: var(--muted-strong);
  font-size: 0.76rem;
}

.crawler-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  color: var(--text-strong);
  white-space: nowrap;
}

.crawler-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 16%, transparent);
}

.crawler-message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crawler-action {
  min-height: 28px;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 760;
}

.shell-mobile-toggle {
  display: none;
  width: 40px;
  padding: 0;
  place-items: center;
}

.location-dialog {
  width: min(520px, calc(100% - 2rem));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.location-dialog::backdrop {
  background: rgba(0, 10, 25, 0.72);
  backdrop-filter: blur(5px);
}

.location-dialog form {
  padding: 1.1rem;
}

.dialog-close {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  color: var(--muted-strong);
  background: var(--surface-soft);
  box-shadow: none;
}

.location-state {
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  background: var(--surface-soft);
}

.shell-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  max-width: min(440px, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: var(--radius-md);
  color: var(--text-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  font-size: 0.86rem;
}

.shell-toast[hidden] {
  display: none;
}

body:has(.app-shell-header) .dashboard-shell {
  margin-top: 1.35rem;
}

@media (max-width: 1420px) {
  .shell-brand-copy small,
  .shell-profile-copy,
  .shell-utility-label {
    display: none;
  }

  .shell-profile-button {
    min-width: auto;
  }

  .shell-utility {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 1160px) {
  .shell-topbar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .shell-mobile-toggle {
    display: inline-grid;
  }

  .shell-navigation {
    position: absolute;
    top: var(--shell-height);
    left: 0.7rem;
    right: 0.7rem;
    z-index: 150;
    max-height: calc(100vh - 140px);
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-solid);
    box-shadow: var(--shadow);
    display: none;
    overflow-y: auto;
  }

  .shell-navigation.mobile-open {
    display: grid;
    justify-content: stretch;
  }

  .shell-navigation > a,
  .shell-menu-button {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .shell-dropdown {
    position: static;
    width: 100%;
    margin: 0.25rem 0;
    box-shadow: none;
  }

  .shell-utilities {
    grid-column: 4;
  }
}

@media (max-width: 720px) {
  :root {
    --shell-height: 62px;
  }

  .shell-topbar {
    padding: 0.45rem 0.65rem;
    gap: 0.45rem;
  }

  .shell-logo {
    width: 36px;
    height: 36px;
  }

  .shell-brand-copy {
    display: none;
  }

  .shell-theme-control,
  .shell-profile-button > span:not(.shell-avatar) {
    display: none;
  }

  .shell-profile-button {
    min-width: 40px;
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .shell-avatar {
    width: 30px;
    height: 30px;
  }

  .crawler-rail {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    padding-inline: 0.65rem;
  }

  .crawler-action {
    display: none;
  }

  .crawler-brand strong {
    display: none;
  }
}

.developer-theme-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}


/* Location permission and status */

.location-status-diamond {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  filter: drop-shadow(0 0 5px currentColor);
}

.location-status-active .location-status-diamond,
[data-location-status="active"] .location-status-diamond {
  color: var(--success);
}

.location-status-unavailable .location-status-diamond,
[data-location-status="unavailable"] .location-status-diamond {
  color: var(--danger);
}

.location-status-detecting .location-status-diamond,
[data-location-status="detecting"] .location-status-diamond {
  color: var(--primary);
}

.location-status-active {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
}

.location-status-unavailable {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}

.location-status-detecting {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}

.location-state[data-location-status="active"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: var(--success-soft);
}

.location-state[data-location-status="unavailable"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: var(--danger-soft);
}

.location-state[data-location-status="detecting"] {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: var(--primary-soft);
}

.location-onboarding-dialog {
  width: min(580px, calc(100% - 2rem));
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.location-onboarding-dialog::backdrop {
  background: rgba(0, 10, 25, 0.78);
  backdrop-filter: blur(7px);
}

.location-onboarding-content {
  padding: clamp(1.25rem, 4vw, 2rem);
}

.location-onboarding-content h2 {
  font-size: var(--section-title-size);
  margin-bottom: 0.7rem;
}

.location-benefits {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0;
  padding-left: 1.25rem;
  color: var(--muted-strong);
}

.location-benefits li::marker {
  color: var(--primary);
}

.location-onboarding-actions,
.settings-action-row {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
}

.location-onboarding-actions button,
.settings-action-row button {
  flex: 1;
}

.location-settings-status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.location-settings-status .location-status-diamond {
  font-size: 1rem;
}

.location-settings-status div {
  display: grid;
  gap: 0.15rem;
}

.location-settings-status strong {
  color: var(--text-strong);
}

@media (max-width: 620px) {
  .location-onboarding-actions,
  .settings-action-row {
    flex-direction: column;
  }
}


/* DroneHQ Online v0.2.7 — Customer Management */

.shell-menu-button.active {
  color: var(--primary);
  background: var(--surface-soft);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.customers-hero {
  align-items: flex-end;
}

.customer-context {
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: end;
}

.customer-context select {
  margin: 0.35rem 0 0;
}

.customer-directory-card {
  padding: clamp(1rem, 2vw, var(--card-padding));
}

.customer-list-heading {
  align-items: center;
}

.customer-list-heading .subtle {
  margin: 0.35rem 0 0;
}

.customer-list-heading > button {
  flex: 0 0 auto;
}

.customer-filter-bar {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.8fr)
    minmax(150px, 0.7fr)
    minmax(140px, 0.65fr)
    minmax(130px, 0.6fr)
    auto;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.customer-filter-bar input,
.customer-filter-bar select,
.customer-filter-bar button {
  min-height: var(--control-height);
  margin: 0;
}

.customer-filter-bar button {
  white-space: nowrap;
}

.customer-table-wrap {
  border-radius: var(--radius-md);
}

.customer-table {
  min-width: 1160px;
}

.customer-table th:last-child,
.customer-table td:last-child {
  text-align: right;
}

.customer-identity {
  min-width: 230px;
}

.customer-identity-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
}

.customer-avatar {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.customer-name {
  display: block;
  color: var(--text-strong);
  line-height: 1.25;
}

.customer-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.38rem;
}

.customer-tag {
  display: inline-flex;
  max-width: 130px;
  padding: 0.2rem 0.42rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-table a {
  color: var(--primary);
  text-decoration: none;
}

.customer-table a:hover {
  text-decoration: underline;
}

.customer-financial-pending {
  color: var(--muted);
}

.customer-view-button {
  width: auto;
}

.status-inactive {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: var(--warning-soft);
}

.status-archived {
  color: var(--muted-strong);
  border-color: var(--border);
  background: var(--surface-soft);
}

.customer-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
}

.customer-table-footer p {
  margin: 0;
}

.pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pagination-controls button {
  width: 38px;
  padding-inline: 0;
}

.pagination-controls .count-badge {
  min-width: 38px;
  min-height: 38px;
  padding: 0.45rem;
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: var(--primary-soft);
}

.customer-dialog {
  width: min(820px, calc(100% - 2rem));
  max-height: min(92vh, 980px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.customer-dialog::backdrop {
  background: rgba(0, 10, 25, 0.78);
  backdrop-filter: blur(7px);
}

.customer-dialog-form {
  padding: clamp(1.1rem, 3vw, 1.75rem);
}

.customer-dialog-intro {
  margin: 0 0 1.1rem;
}

.customer-dialog input,
.customer-dialog select,
.customer-dialog textarea {
  margin-bottom: 0.9rem;
}

textarea {
  width: 100%;
  min-height: 110px;
  margin: 0.38rem 0 1rem;
  padding: 0.72rem 0.78rem;
  resize: vertical;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.45;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

textarea::placeholder {
  color: var(--muted);
  opacity: 0.82;
}

textarea:hover {
  border-color: var(--border-strong);
}

textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--focus-gap);
}

.customer-fieldset {
  margin: 0.25rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
}

.customer-fieldset legend {
  padding: 0 0.42rem;
  color: var(--text-strong);
  font-size: 0.92rem;
  font-weight: 760;
}

.customer-address-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(120px, 0.52fr);
  gap: 0.8rem;
}

.optional-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 560;
}

.customer-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

.customer-dialog-actions button {
  width: auto;
  min-width: 145px;
}

@media (max-width: 1050px) {
  .customer-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-search-field {
    grid-column: 1 / -1;
  }

  .customer-filter-bar button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .customers-hero {
    align-items: stretch;
  }

  .customer-context {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .customer-filter-bar,
  .customer-address-grid,
  .customer-dialog .form-grid {
    grid-template-columns: 1fr;
  }

  .customer-search-field {
    grid-column: auto;
  }

  .customer-list-heading,
  .customer-table-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-list-heading > button {
    width: 100%;
  }

  .pagination-controls {
    justify-content: flex-end;
  }

  .customer-dialog-actions {
    flex-direction: column-reverse;
  }

  .customer-dialog-actions button {
    width: 100%;
  }
}


/* DroneHQ Online v0.2.8 — Customer List, Detail, and Add/Edit Workspace */

a.button,
.button {
  display: inline-flex;
  width: auto;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.68rem 0.9rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: linear-gradient(90deg, var(--primary-strong), var(--primary));
  box-shadow: 0 8px 20px rgba(13, 130, 220, 0.18);
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
}

a.button:hover,
.button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

a.button.secondary,
.button.secondary {
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: none;
}

a.button.compact,
.button.compact {
  min-height: 38px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
}

a.button.is-disabled {
  pointer-events: none;
  opacity: 0.55;
}

.customer-page {
  width: min(1480px, calc(100% - 1.5rem));
  margin-top: 0.9rem;
}

.customer-page .page-message {
  width: min(100%, 1480px);
  margin: 0 auto 0.7rem;
}

.customer-screen-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.customer-screen-heading {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
}

.customer-screen-heading .eyebrow {
  margin-bottom: 0.18rem;
  font-size: 0.68rem;
}

.customer-screen-heading h1 {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.48rem);
}

.customer-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.customer-organization-inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.customer-organization-inline select {
  width: min(240px, 28vw);
  min-height: 38px;
  margin: 0;
  padding-block: 0.45rem;
}

.customer-organization-inline .status-pill {
  min-height: 38px;
  padding-block: 0.4rem;
  font-size: 0.75rem;
}

.customer-filter-bar-compact {
  grid-template-columns: minmax(300px, 1.65fr) minmax(145px, 0.42fr) minmax(145px, 0.42fr);
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 54%, transparent);
}

.customer-filter-bar-compact .customer-search-field {
  position: relative;
}

.customer-filter-bar-compact .field-leading-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.customer-filter-bar-compact .customer-search-field input {
  padding-left: 2rem;
}

.customer-table-wrap {
  border: 0;
  border-radius: 0;
}

.customer-table-compact {
  min-width: 1040px;
  table-layout: auto;
}

.customer-table-compact th,
.customer-table-compact td {
  padding: 0.68rem 0.72rem;
}

.customer-table-compact th {
  font-size: 0.67rem;
}

.customer-table-compact tbody tr {
  cursor: pointer;
}

.customer-table-compact tbody tr:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.customer-table-compact .customer-identity {
  min-width: 180px;
}

.customer-table-compact .customer-identity-content {
  display: flex;
  gap: 0.55rem;
}

.customer-avatar-small {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  font-size: 0.58rem;
}

.customer-table-compact .customer-name {
  display: inline-block;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}

.customer-table-compact td {
  font-size: 0.82rem;
  white-space: nowrap;
}

.customer-table-compact td:nth-child(3) {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-table-compact .customer-financial-pending {
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

.customer-open-cell {
  width: 34px;
  padding-left: 0 !important;
  text-align: center !important;
}

.customer-open-link {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--muted-strong) !important;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none !important;
}

.customer-open-link:hover {
  color: var(--primary) !important;
  background: var(--primary-soft);
}

.customer-table-footer {
  min-height: 54px;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 38%, transparent);
}

.customer-table-footer .subtle {
  font-size: 0.78rem;
}

.customer-table-footer .pagination-controls button,
.customer-table-footer .pagination-controls .count-badge {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0.3rem;
  font-size: 0.76rem;
}

/* Customer detail */

.customer-detail-card {
  padding: 0.95rem;
}

.customer-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.back-link {
  display: inline-flex;
  margin-bottom: 0.7rem;
  color: var(--primary);
  font-size: 0.78rem;
  text-decoration: none;
}

.customer-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.customer-title-row h1,
.customer-title-row h2 {
  margin: 0;
}

.customer-detail-header h1 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.customer-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.customer-since {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
}

.customer-detail-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-more-menu {
  position: relative;
}

.customer-more-menu summary {
  list-style: none;
  cursor: pointer;
}

.customer-more-menu summary::-webkit-details-marker {
  display: none;
}

.customer-more-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  width: 190px;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.customer-more-panel a,
.customer-more-panel button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  font-size: 0.78rem;
  text-align: left;
  text-decoration: none;
}

.customer-more-panel a:hover,
.customer-more-panel button:hover {
  background: var(--surface-hover);
  transform: none;
}

.customer-detail-layout {
  display: grid;
  grid-template-columns: minmax(220px, 265px) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.customer-contact-card {
  min-height: 100%;
}

.customer-contact-card h2,
.customer-panel-heading h2 {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.customer-contact-list,
.workspace-contact-list {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
}

.customer-contact-list div,
.workspace-contact-list div {
  display: grid;
  gap: 0.18rem;
}

.customer-contact-list dt,
.workspace-contact-list dt {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.customer-contact-list dd,
.workspace-contact-list dd {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-line;
}

.customer-contact-list a {
  color: var(--text-strong);
  text-decoration: none;
}

.customer-contact-list a:hover {
  color: var(--primary);
}

.customer-contact-card .button {
  width: 100%;
}

.customer-detail-main {
  min-width: 0;
}

.customer-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.customer-summary-metric {
  min-width: 0;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--border);
}

.customer-summary-metric:last-child {
  border-right: 0;
}

.customer-summary-metric strong,
.customer-summary-metric span {
  display: block;
}

.customer-summary-metric strong {
  color: var(--text-strong);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}

.customer-summary-metric span {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.7rem;
}

.customer-summary-danger strong {
  color: var(--danger);
}

.customer-summary-success strong {
  color: var(--success);
}

.customer-tabs {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.7rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.customer-tab {
  width: auto;
  min-width: max-content;
  padding: 0.62rem 0.8rem;
  border-radius: 0;
  color: var(--muted-strong);
  background: transparent;
  box-shadow: none;
  font-size: 0.76rem;
}

.customer-tab:hover {
  color: var(--text);
  background: var(--surface-soft);
  transform: none;
}

.customer-tab.active {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.customer-tab-panel {
  padding-top: 0.7rem;
}

.customer-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.75fr);
  gap: 0.7rem;
}

.customer-activity-card,
.customer-notes-card {
  min-height: 210px;
}

.customer-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.customer-activity-list {
  display: grid;
}

.customer-activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.customer-activity-item:last-child {
  border-bottom: 0;
}

.customer-activity-item strong,
.customer-activity-item span {
  display: block;
}

.customer-activity-item strong {
  color: var(--text-strong);
  font-size: 0.78rem;
  line-height: 1.35;
}

.customer-activity-item .subtle {
  margin-top: 0.15rem;
  font-size: 0.68rem;
}

.customer-activity-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 850;
}

.customer-activity-created {
  color: var(--primary);
  background: var(--primary-soft);
}

.customer-activity-updated {
  color: var(--success);
  background: var(--success-soft);
}

.customer-panel-link,
.link-button {
  display: inline-flex;
  width: auto;
  margin-top: 0.55rem;
  padding: 0;
  border: 0;
  color: var(--primary);
  background: transparent;
  box-shadow: none;
  font-size: 0.75rem;
  text-decoration: none;
}

.link-button:hover,
.customer-panel-link:hover {
  filter: none;
  transform: none;
  text-decoration: underline;
}

.customer-notes-copy {
  min-height: 88px;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-line;
}

.customer-note-meta {
  margin: 0.75rem 0 0;
  font-size: 0.68rem;
}

.customer-future-panel {
  min-height: 190px;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.customer-future-panel h2 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.customer-activity-list-full {
  max-width: 760px;
}

/* Add / Edit customer workspace */

.customer-workspace {
  display: grid;
  grid-template-columns: minmax(235px, 300px) minmax(0, 1fr);
  min-height: 650px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.customer-workspace-directory {
  display: flex;
  min-height: 650px;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 62%, transparent);
}

.customer-workspace-directory-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.customer-workspace-directory-heading .eyebrow {
  margin-bottom: 0.18rem;
  font-size: 0.64rem;
}

.customer-workspace-directory-heading h1 {
  margin: 0;
  font-size: 1rem;
}

.customer-directory-back {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
}

.customer-directory-back:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.customer-workspace-organization {
  padding: 0.65rem 0.75rem 0;
}

.customer-workspace-organization label {
  font-size: 0.7rem;
}

.customer-workspace-organization select {
  margin: 0.25rem 0 0;
}

.workspace-directory-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 105px;
  gap: 0.45rem;
  padding: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.workspace-directory-filter input,
.workspace-directory-filter select {
  min-height: 36px;
  margin: 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.75rem;
}

.workspace-customer-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0;
}

.workspace-customer-item {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.workspace-customer-item:hover {
  background: var(--surface-hover);
  transform: none;
}

.workspace-customer-item.active {
  border-left-color: var(--primary);
  background: var(--primary-soft);
}

.workspace-customer-item-copy {
  min-width: 0;
}

.workspace-customer-item-copy strong,
.workspace-customer-item-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-customer-item-copy strong {
  color: var(--text-strong);
  font-size: 0.76rem;
}

.workspace-customer-item-copy small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.66rem;
}

.workspace-customer-item-status {
  font-size: 0.63rem;
  font-weight: 760;
}

.workspace-customer-item-status.status-active {
  color: var(--success);
}

.workspace-customer-item-status.status-inactive {
  color: var(--warning);
}

.workspace-customer-item-status.status-archived {
  color: var(--muted);
}

.workspace-directory-empty {
  padding: 1rem;
  text-align: center;
}

.workspace-add-customer {
  width: calc(100% - 1rem);
  min-height: 38px;
  margin: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
}

.customer-workspace-content {
  min-width: 0;
  padding: 0.85rem;
}

.workspace-empty-state {
  display: grid;
  min-height: 560px;
  place-content: center;
  text-align: center;
}

.workspace-empty-state h2 {
  margin: 0;
}

.workspace-customer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.workspace-customer-header .eyebrow {
  margin-bottom: 0.35rem;
  font-size: 0.66rem;
}

.workspace-customer-header h2 {
  margin: 0;
  font-size: 1.28rem;
}

.workspace-customer-header > button {
  width: auto;
}

.workspace-summary-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(260px, 1.05fr) minmax(270px, 1.2fr);
  gap: 0.6rem;
}

.workspace-contact-summary,
.workspace-recent-activity {
  min-height: 240px;
}

.workspace-contact-list {
  gap: 0.75rem;
}

.workspace-account-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.workspace-account-summary .customer-summary-metric {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.workspace-account-summary .customer-summary-metric:nth-child(2n) {
  border-right: 0;
}

.workspace-account-summary .customer-summary-metric:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.workspace-recent-activity h3 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.customer-activity-item-compact {
  padding-block: 0.48rem;
}

.workspace-recent-activity > a {
  display: inline-flex;
  margin-top: 0.45rem;
  color: var(--primary);
  font-size: 0.7rem;
  text-decoration: none;
}

.workspace-related-tabs {
  display: flex;
  margin-top: 0.65rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.workspace-related-tabs button {
  width: auto;
  min-width: max-content;
  padding: 0.55rem 0.7rem;
  border-radius: 0;
  color: var(--muted-strong);
  background: transparent;
  box-shadow: none;
  font-size: 0.7rem;
}

.workspace-related-tabs button:hover {
  background: var(--surface-soft);
  transform: none;
}

.workspace-related-tabs button.active {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.workspace-related-tabs span {
  color: var(--muted);
}


.workspace-related-tabs button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  filter: none;
}


.workspace-related-table-wrap {
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.workspace-related-table {
  min-width: 700px;
}

.workspace-related-table th,
.workspace-related-table td {
  padding: 0.62rem 0.68rem;
  font-size: 0.72rem;
}

.workspace-customer-form {
  max-width: 1020px;
}

.workspace-form-section {
  margin-bottom: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-soft) 56%, transparent);
}

.workspace-form-section h3 {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.workspace-customer-form input,
.workspace-customer-form select,
.workspace-customer-form textarea {
  margin-bottom: 0.7rem;
}

.workspace-customer-form .customer-fieldset {
  margin-bottom: 0.75rem;
}

.workspace-customer-form textarea {
  min-height: 92px;
}

.workspace-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.workspace-form-actions button {
  width: auto;
  min-width: 140px;
}

@media (max-width: 1180px) {
  .workspace-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-recent-activity {
    grid-column: 1 / -1;
    min-height: auto;
  }
}

@media (max-width: 980px) {
  .customer-detail-layout {
    grid-template-columns: 1fr;
  }

  .customer-contact-card {
    min-height: auto;
  }

  .customer-workspace {
    grid-template-columns: 235px minmax(0, 1fr);
  }

  .workspace-summary-grid {
    grid-template-columns: 1fr;
  }

  .workspace-recent-activity {
    grid-column: auto;
  }

  .customer-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-summary-metric:nth-child(2) {
    border-right: 0;
  }

  .customer-summary-metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 760px) {
  .customer-page {
    width: min(100% - 0.75rem, 1480px);
  }

  .customer-screen-heading,
  .customer-detail-header,
  .workspace-customer-header {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-heading-actions,
  .customer-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-heading-actions .button,
  .customer-detail-actions .button,
  .customer-more-menu summary {
    width: 100%;
  }

  .customer-organization-inline {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-organization-inline select {
    width: 100%;
  }

  .customer-filter-bar-compact {
    grid-template-columns: 1fr;
  }

  .customer-overview-grid {
    grid-template-columns: 1fr;
  }

  .customer-workspace {
    grid-template-columns: 1fr;
  }

  .customer-workspace-directory {
    min-height: auto;
    max-height: 370px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .workspace-customer-list {
    max-height: 220px;
  }

  .customer-address-grid,
  .workspace-customer-form .form-grid {
    grid-template-columns: 1fr;
  }

  .workspace-form-actions {
    flex-direction: column-reverse;
  }

  .workspace-form-actions button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .customer-metric-strip {
    grid-template-columns: 1fr;
  }

  .customer-summary-metric {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .customer-summary-metric:last-child {
    border-bottom: 0;
  }

  .workspace-directory-filter {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Batch 1 — Application Shell completion (v0.2.9)
   Screens 01–05: header, navigation, crawler, notifications, location.
   -------------------------------------------------------------------------- */

.shell-menu-button.active {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}

.shell-menu-wide {
  position: relative;
}

.shell-mega-menu {
  width: min(620px, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
}

.shell-menu-wide .shell-mega-menu {
  left: 50%;
  transform: translateX(-34%);
}

.shell-mega-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shell-mega-group {
  padding: 1rem;
}

.shell-mega-group + .shell-mega-group {
  border-left: 1px solid var(--border);
}

.shell-mega-group h2 {
  margin: 0 0 0.55rem;
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shell-dropdown .shell-mega-link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 0.62rem;
  padding: 0.68rem;
}

.shell-mega-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 0.9rem;
  font-weight: 850;
}

.shell-mega-link span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.shell-mega-link strong {
  color: var(--text-strong);
  font-size: 0.82rem;
}

.shell-mega-link small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 560;
  line-height: 1.35;
}

.shell-dropdown .shell-mega-footer {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.72rem 1rem;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--primary);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  font-size: 0.76rem;
  font-weight: 780;
}

.location-pin {
  color: var(--primary);
  font-size: 0.9rem;
}

.shell-notification-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--header);
  border-radius: 999px;
  color: #ffffff;
  background: var(--danger);
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;
}

.shell-notification-count[hidden] {
  display: none;
}

.shell-theme-control {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding-left: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-strong);
  background: var(--surface);
}

.shell-theme-icon {
  color: var(--warning);
  font-size: 1rem;
}

.shell-theme-control select {
  border: 0;
  background: transparent;
}

.notification-popover {
  width: min(430px, calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
}

.notification-heading {
  align-items: center;
  margin: 0;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
}

.notification-heading h2 {
  margin: 0;
  font-size: 0.95rem;
}

.shell-text-button {
  width: auto;
  min-height: auto;
  padding: 0.25rem;
  border: 0;
  border-radius: 6px;
  color: var(--primary);
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 760;
}

.shell-text-button:hover:not(:disabled),
.shell-text-button:focus-visible {
  background: var(--primary-soft);
  transform: none;
}

.notification-list {
  max-height: min(480px, 65vh);
  overflow-y: auto;
}

.notification-list .shell-notification-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  margin: 0 0.9rem;
  padding: 0.82rem 0;
  cursor: pointer;
}

.notification-list .shell-notification-item:hover {
  background: color-mix(in srgb, var(--surface-soft) 62%, transparent);
}

.shell-notification-item.is-read {
  opacity: 0.66;
}

.notification-icon {
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
}

.notification-success .notification-icon {
  color: var(--success);
  background: var(--success-soft);
}

.notification-warning .notification-icon {
  color: var(--warning);
  background: var(--warning-soft);
}

.notification-meta {
  min-width: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
  color: var(--muted);
  font-size: 0.66rem;
  white-space: nowrap;
}

.notification-unread {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.notification-footer {
  min-height: 42px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--primary);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  box-shadow: none;
  font-size: 0.76rem;
}

.notification-footer:hover:not(:disabled) {
  transform: none;
}

.crawler-rail {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.crawler-status-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--success);
  background: var(--success-soft);
  font-size: 0.68rem;
  font-weight: 900;
}

.crawler-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
}

.crawler-system-state {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--muted-strong);
}

.crawler-rail[data-crawler-status="warning"] {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning-soft) 78%, var(--surface-solid));
}

.crawler-rail[data-crawler-status="warning"] .crawler-status-icon {
  color: var(--warning);
  background: var(--warning-soft);
}

.crawler-rail[data-crawler-status="warning"] .crawler-pulse {
  background: var(--warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 16%, transparent);
}

.crawler-panel {
  position: absolute;
  top: 100%;
  right: max(0.8rem, 2vw);
  left: max(0.8rem, 2vw);
  z-index: 130;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  color: var(--text);
  background: color-mix(in srgb, var(--surface-solid) 97%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.crawler-panel[hidden] {
  display: none;
}

.crawler-panel-heading,
.crawler-recent-heading,
.location-saved-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.crawler-panel-heading {
  margin-bottom: 0.85rem;
}

.crawler-panel-heading h2,
.crawler-recent-heading h3 {
  margin: 0;
}

.crawler-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.8fr);
  gap: 0.8rem;
}

.crawler-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.crawler-summary-card {
  min-height: 132px;
  display: grid;
  align-content: center;
  gap: 0.3rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.crawler-summary-card > span:first-child {
  color: var(--primary);
  font-size: 1.15rem;
}

.crawler-summary-card > strong {
  color: var(--text-strong);
  font-size: 1.55rem;
  line-height: 1;
}

.crawler-summary-card .crawler-summary-word {
  font-size: 0.92rem;
}

.crawler-summary-card > span:not(:first-child) {
  color: var(--text-strong);
  font-size: 0.74rem;
  font-weight: 760;
}

.crawler-summary-card small {
  color: var(--muted);
  font-size: 0.66rem;
}

.crawler-summary-warning > span:first-child {
  color: var(--warning);
}

.crawler-summary-success > span:first-child,
.crawler-summary-success > strong {
  color: var(--success);
}

.crawler-recent-alerts {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.crawler-recent-heading h3 {
  color: var(--text-strong);
  font-size: 0.85rem;
}

.crawler-empty-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  margin-top: 0.7rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
}

.crawler-empty-alert > span {
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--success);
  background: var(--success-soft);
  font-weight: 850;
}

.crawler-empty-alert strong {
  color: var(--text-strong);
  font-size: 0.78rem;
}

.crawler-empty-alert p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.location-dialog {
  width: min(920px, calc(100% - 2rem));
  max-height: min(760px, calc(100vh - 2rem));
  overflow: hidden;
}

.location-selector-shell {
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.82fr);
}

.location-selector-content {
  min-width: 0;
  padding: 1.05rem;
  overflow-y: auto;
}

.location-section-label {
  margin: 0.9rem 0 0.42rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.location-current-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.location-current-icon,
.location-saved-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  color: var(--primary);
  background: var(--primary-soft);
}

.location-current-card strong {
  color: var(--text-strong);
  font-size: 0.82rem;
}

.location-current-card p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.7rem;
}

.location-state {
  margin: 0.62rem 0;
  padding: 0.65rem 0.72rem;
  font-size: 0.72rem;
}

.location-saved-heading {
  margin-top: 0.7rem;
}

.location-saved-heading .location-section-label {
  margin: 0;
}

.location-saved-list {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.42rem;
}

.location-empty-saved {
  margin: 0;
  padding: 0.8rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.74rem;
  text-align: center;
}

.location-saved-item,
.location-manage-link {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.location-saved-item:hover:not(:disabled),
.location-manage-link:hover:not(:disabled) {
  border-color: var(--border);
  background: var(--surface-soft);
  transform: none;
}

.location-saved-copy {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.location-saved-copy strong {
  color: var(--text-strong);
  font-size: 0.78rem;
}

.location-saved-copy small {
  color: var(--muted);
  font-size: 0.67rem;
}

.location-favorite {
  color: var(--warning);
  font-size: 1rem;
}

.location-manage-link {
  margin-top: 0.55rem;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 720;
}

.location-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.75rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.location-settings-row > div {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.location-settings-row strong {
  color: var(--text-strong);
  font-size: 0.76rem;
}

.location-settings-row small {
  color: var(--muted);
  font-size: 0.67rem;
}

.toggle-control {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
}

.toggle-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.toggle-control > span[aria-hidden="true"] {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  cursor: pointer;
}

.toggle-control > span[aria-hidden="true"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 160ms ease, background-color 160ms ease;
}

.toggle-control input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
}

.toggle-control input:checked + span::after {
  background: #ffffff;
  transform: translateX(18px);
}

.toggle-control input:focus-visible + span {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.location-map-preview {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background:
    linear-gradient(32deg, transparent 43%, rgba(120, 170, 210, 0.20) 44% 46%, transparent 47%),
    linear-gradient(118deg, transparent 28%, rgba(45, 115, 80, 0.22) 29% 34%, transparent 35%),
    radial-gradient(circle at 66% 58%, rgba(19, 132, 223, 0.30), transparent 7%),
    radial-gradient(circle at 30% 22%, rgba(58, 116, 74, 0.28), transparent 23%),
    linear-gradient(145deg, #162b2e, #0a1b27 60%, #102d28);
}

.location-map-preview::before,
.location-map-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(18deg, transparent 0 38px, rgba(255,255,255,0.035) 39px 40px),
    repeating-linear-gradient(102deg, transparent 0 52px, rgba(255,255,255,0.025) 53px 54px);
}

.location-map-preview::after {
  inset: 12% 16%;
  border: 1px solid rgba(53, 153, 238, 0.6);
  border-radius: 50%;
  background: rgba(53, 153, 238, 0.06);
}

.location-map-marker {
  position: absolute;
  top: 46%;
  left: 55%;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,0.85);
  border-radius: 50% 50% 50% 10%;
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transform: rotate(-45deg);
  font-size: 0.95rem;
}

.location-map-marker::first-letter {
  transform: rotate(45deg);
}

.location-map-copy {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
  display: grid;
  gap: 0.2rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: rgba(2, 12, 24, 0.78);
  backdrop-filter: blur(10px);
}

.location-map-copy strong {
  font-size: 0.78rem;
}

.location-map-copy small {
  color: rgba(255,255,255,0.72);
  font-size: 0.66rem;
}

@media (max-width: 1420px) {
  .shell-theme-icon {
    display: none;
  }
}

@media (max-width: 1160px) {
  .shell-menu-wide .shell-mega-menu {
    transform: none;
  }

  .shell-mega-menu {
    width: 100%;
  }

  .shell-mega-columns {
    grid-template-columns: 1fr;
  }

  .shell-mega-group + .shell-mega-group {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .crawler-panel-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .crawler-meta {
    display: none;
  }

  .crawler-rail {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .crawler-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .location-selector-shell {
    grid-template-columns: 1fr;
  }

  .location-map-preview {
    min-height: 250px;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .crawler-panel {
    right: 0.45rem;
    left: 0.45rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .crawler-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .shell-theme-control {
    display: none;
  }

  .notification-popover {
    position: fixed;
    top: calc(var(--shell-height) + 0.4rem);
    right: 0.55rem;
    left: 0.55rem;
    width: auto;
  }

  .location-dialog {
    width: calc(100% - 1rem);
    max-height: calc(100vh - 1rem);
  }

  .location-selector-shell {
    min-height: auto;
  }
}


/* DroneHQ Online v0.2.10 — Batch 6, screen 26: Jobs & Projects List */

.jobs-page {
  width: min(1480px, calc(100% - 2rem));
}

.job-directory-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.job-directory-heading {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.82rem 1rem;
  border-bottom: 1px solid var(--border);
}

.job-directory-heading .eyebrow {
  margin-bottom: 0.18rem;
  font-size: 0.67rem;
}

.job-directory-heading h1 {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.job-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.job-filter-bar {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.45fr)
    minmax(150px, 0.35fr)
    minmax(150px, 0.35fr);
  gap: 0.55rem;
  margin: 0;
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 52%, transparent);
}

.job-filter-bar input,
.job-filter-bar select {
  min-height: 38px;
  margin: 0;
  padding-block: 0.48rem;
  font-size: 0.8rem;
}

.job-search-field {
  position: relative;
}

.job-search-field .field-leading-icon {
  position: absolute;
  left: 0.72rem;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.job-search-field input {
  padding-left: 2rem;
}

.job-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 34%, transparent);
}

.job-summary-card {
  min-height: 92px;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--border);
}

.job-summary-card:last-child {
  border-right: 0;
}

.job-summary-card strong {
  display: block;
  margin-bottom: 0.36rem;
  color: var(--text-strong);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.job-summary-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
}

.job-summary-completed strong {
  color: var(--success);
}

.job-summary-progress strong {
  color: var(--warning);
}

.job-summary-scheduled strong {
  color: var(--primary);
}

.job-summary-hold strong {
  color: var(--danger);
}

.job-table-wrap {
  border: 0;
  border-radius: 0;
}

.job-table {
  min-width: 1080px;
  table-layout: auto;
}

.job-table th,
.job-table td {
  padding: 0.7rem 0.75rem;
}

.job-table th {
  font-size: 0.67rem;
}

.job-table td {
  font-size: 0.81rem;
  white-space: nowrap;
}

.job-identity {
  display: grid;
  min-width: 210px;
  gap: 0.15rem;
}

.job-identity strong {
  color: var(--text-strong);
  font-size: 0.84rem;
}

.job-identity .subtle {
  font-size: 0.69rem;
}

.job-money {
  font-variant-numeric: tabular-nums;
}

.job-balance-pending {
  color: var(--muted-strong);
}

.job-actions-cell {
  width: 42px;
  text-align: center;
}

.job-row-action {
  width: 30px;
  min-height: 30px;
  padding: 0;
  color: var(--muted-strong);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1.15rem;
}

.job-row-action:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.job-status-draft {
  color: var(--muted-strong);
}

.job-status-scheduled {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: var(--primary-soft);
}

.job-status-in_progress {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: var(--warning-soft);
}

.job-status-on_hold,
.job-status-cancelled {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  background: var(--danger-soft);
}

.job-status-completed {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
  background: var(--success-soft);
}

.job-table-footer {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.8rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 38%, transparent);
}

.job-table-footer .subtle {
  margin: 0;
  font-size: 0.78rem;
}

.job-table-footer .pagination-controls button,
.job-table-footer .pagination-controls .count-badge {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0.3rem;
  font-size: 0.76rem;
}

.job-financial-note {
  margin: 0;
  padding: 0.62rem 0.82rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 28%, transparent);
  font-size: 0.72rem;
}

.job-dialog {
  width: min(760px, calc(100% - 2rem));
  max-height: min(92vh, 900px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.job-dialog::backdrop {
  background: rgba(0, 10, 25, 0.78);
  backdrop-filter: blur(7px);
}

.job-dialog-form {
  padding: clamp(1rem, 2.4vw, 1.45rem);
}

.job-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.job-dialog-heading h2 {
  margin: 0.15rem 0 0.35rem;
}

.job-dialog-heading .subtle {
  max-width: 620px;
  margin: 0;
}

.job-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 0.9rem;
}

.job-form-field {
  min-width: 0;
}

.job-form-field label {
  display: block;
  margin-bottom: 0.34rem;
}

.job-form-field input,
.job-form-field select,
.job-form-field textarea {
  margin: 0;
}

.job-form-wide {
  grid-column: 1 / -1;
}

.job-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 980px) {
  .job-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .job-summary-card:nth-child(3) {
    border-right: 0;
  }

  .job-summary-card:nth-child(n + 4) {
    border-top: 1px solid var(--border);
  }

  .job-filter-bar {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(135px, 0.36fr));
  }
}

@media (max-width: 760px) {
  .job-directory-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .job-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .job-heading-actions > button,
  .job-heading-actions .customer-organization-inline {
    width: 100%;
  }

  .job-heading-actions .customer-organization-inline select {
    width: 100%;
  }

  .job-filter-bar,
  .job-form-grid {
    grid-template-columns: 1fr;
  }

  .job-form-wide {
    grid-column: auto;
  }

  .job-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-summary-card:nth-child(2n) {
    border-right: 0;
  }

  .job-summary-card:nth-child(3) {
    border-right: 1px solid var(--border);
  }

  .job-summary-card:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .job-summary-card:last-child {
    grid-column: 1 / -1;
  }

  .job-table {
    min-width: 0;
  }

  .job-actions-cell {
    width: auto;
  }

  .job-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .job-summary-grid {
    grid-template-columns: 1fr;
  }

  .job-summary-card,
  .job-summary-card:nth-child(3) {
    border-right: 0;
    border-top: 1px solid var(--border);
  }

  .job-summary-card:first-child {
    border-top: 0;
  }

  .job-summary-card:last-child {
    grid-column: auto;
  }

  .job-dialog-actions {
    flex-direction: column-reverse;
  }

  .job-dialog-actions button {
    width: 100%;
  }
}


.customer-job-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.customer-job-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.customer-job-item > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.customer-job-item strong,
.customer-job-link {
  color: var(--text-strong);
  font-weight: 760;
}

.customer-job-link {
  text-decoration: none;
}

.customer-job-link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

.customer-job-item .subtle {
  font-size: 0.72rem;
}

.customer-jobs-link {
  width: max-content;
  margin-top: 0.8rem;
}


/* DroneHQ Online v0.2.10.1 — application-shell icon and theme-control hotfix */

.location-pin {
  width: 1rem;
  height: 1rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--primary);
  font-size: inherit;
}

.location-pin svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-bell-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-theme-control select {
  color: var(--text-strong);
  color-scheme: dark;
}

.shell-theme-control select option {
  color: #f5f8ff;
  background-color: #0d2342;
}

html[data-theme="light"] .shell-theme-control select {
  color: var(--text-strong);
  color-scheme: light;
}

html[data-theme="light"] .shell-theme-control select option {
  color: #10213a;
  background-color: #ffffff;
}


/* DroneHQ Online v0.2.11 — Batch 6, screen 27: Job Detail */

.job-name-link {
  color: var(--text-strong);
  font-size: 0.84rem;
  font-weight: 760;
  text-decoration: none;
}

.job-name-link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

a.job-row-action {
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.job-detail-page {
  width: min(1480px, calc(100% - 2rem));
}

.job-detail-screen {
  padding: 1rem;
  border-radius: var(--radius-md);
}

.job-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.job-detail-heading-copy {
  min-width: 0;
}

.job-detail-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.72rem;
}

.job-detail-title-row h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  letter-spacing: -0.02em;
}

.job-detail-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.job-more-menu .customer-more-panel {
  right: 0;
  left: auto;
  min-width: 190px;
}

.job-detail-meta-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0 0;
  padding: 0.8rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.job-detail-meta-strip > div {
  min-width: 0;
  padding: 0 0.85rem;
  border-right: 1px solid var(--border);
}

.job-detail-meta-strip > div:first-child {
  padding-left: 0;
}

.job-detail-meta-strip > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.job-detail-meta-strip dt {
  margin-bottom: 0.28rem;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.job-detail-meta-strip dd {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.82rem;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.job-detail-meta-strip a {
  color: var(--text-strong);
  text-decoration: none;
}

.job-detail-meta-strip a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.job-detail-tabs {
  display: flex;
  gap: 0.18rem;
  margin: 0.72rem 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

.job-detail-tab {
  width: auto;
  min-height: 42px;
  padding: 0.58rem 0.8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted-strong);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  font-size: 0.78rem;
}

.job-detail-tab:hover:not(:disabled) {
  color: var(--text-strong);
  background: var(--primary-soft);
  transform: none;
}

.job-detail-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.job-detail-overview-grid {
  display: grid;
  grid-template-columns:
    minmax(210px, 0.72fr)
    minmax(360px, 1.42fr)
    minmax(230px, 0.72fr);
  gap: 0.72rem;
  align-items: start;
}

.job-detail-left-column,
.job-detail-center-column,
.job-detail-right-column {
  display: grid;
  gap: 0.72rem;
  min-width: 0;
}

.job-detail-overview-grid .card {
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  box-shadow: none;
  background: color-mix(in srgb, var(--surface-solid) 84%, transparent);
}

.job-detail-overview-grid h2 {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.job-project-list,
.job-detail-summary-list,
.job-financial-list,
.job-equipment-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.job-project-list > div {
  padding: 0.56rem 0;
  border-bottom: 1px solid var(--border);
}

.job-project-list > div:last-child {
  border-bottom: 0;
}

.job-project-list dt {
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 720;
}

.job-project-list dd {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-line;
}

.job-project-list dd.subtle {
  margin-top: 0.14rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.job-priority-low {
  color: var(--muted-strong);
}

.job-priority-normal {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 36%, transparent);
  background: var(--primary-soft);
}

.job-priority-high {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: var(--warning-soft);
}

.job-priority-urgent {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  background: var(--danger-soft);
}

.job-pilot-identity {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: 0.75rem;
}

.job-pilot-identity .shell-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.job-pilot-identity > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.job-pilot-identity strong,
.job-pilot-identity span {
  overflow-wrap: anywhere;
}

.job-pilot-identity strong {
  color: var(--text-strong);
  font-size: 0.84rem;
}

.job-pilot-identity .subtle {
  font-size: 0.68rem;
}

.job-pilot-card .button {
  width: 100%;
  text-align: center;
}

.job-pilot-card .button.disabled {
  pointer-events: none;
  opacity: 0.55;
}

.job-map-card {
  min-height: 330px;
}

.job-map-canvas {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(33deg, transparent 45%, rgba(105, 168, 255, 0.15) 46%, rgba(105, 168, 255, 0.15) 49%, transparent 50%),
    linear-gradient(145deg, transparent 34%, rgba(101, 235, 160, 0.09) 35%, rgba(101, 235, 160, 0.09) 44%, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(105, 168, 255, 0.07) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(105, 168, 255, 0.07) 43px 44px),
    #0a2233;
}

html[data-theme="light"] .job-map-canvas {
  background:
    linear-gradient(33deg, transparent 45%, rgba(9, 111, 181, 0.18) 46%, rgba(9, 111, 181, 0.18) 49%, transparent 50%),
    linear-gradient(145deg, transparent 34%, rgba(8, 122, 66, 0.10) 35%, rgba(8, 122, 66, 0.10) 44%, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(40, 79, 126, 0.08) 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(40, 79, 126, 0.08) 43px 44px),
    #dce8e6;
}

.job-map-road {
  position: absolute;
  height: 8px;
  border: 2px solid rgba(230, 240, 255, 0.28);
  border-right: 0;
  border-left: 0;
  transform-origin: center;
}

.job-map-road-one {
  width: 125%;
  top: 48%;
  left: -12%;
  transform: rotate(-12deg);
}

.job-map-road-two {
  width: 86%;
  top: 28%;
  left: 10%;
  transform: rotate(58deg);
  opacity: 0.55;
}

.job-map-marker {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 2;
  width: 38px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 3px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  color: transparent;
  background: var(--primary-strong);
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.35);
  rotate: -45deg;
}

.job-map-marker::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
}

.job-map-canvas[data-has-location="false"] .job-map-marker {
  display: none;
}

.job-map-controls {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  display: grid;
  gap: 0.28rem;
}

.job-map-controls span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-strong);
  background: rgba(4, 15, 31, 0.86);
  font-size: 0.82rem;
}

.job-map-empty {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  left: 0.55rem;
  z-index: 3;
  display: grid;
  gap: 0.12rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(4, 15, 31, 0.86);
  backdrop-filter: blur(8px);
}

.job-map-empty strong {
  color: #ffffff;
  font-size: 0.78rem;
}

.job-map-empty span {
  color: #c9d8ee;
  font-size: 0.66rem;
}

.job-equipment-list > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--border);
}

.job-equipment-list > div:last-child {
  border-bottom: 0;
}

.job-equipment-list dt {
  color: var(--muted);
  font-size: 0.7rem;
}

.job-equipment-list dd {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  color: var(--text-strong);
  font-size: 0.76rem;
  font-weight: 700;
}

.job-equipment-list dd span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
}

.job-detail-summary-list > div,
.job-financial-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.48rem 0;
}

.job-detail-summary-list dt,
.job-financial-list dt {
  color: var(--muted);
  font-size: 0.7rem;
}

.job-detail-summary-list dd,
.job-financial-list dd {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.75rem;
  font-weight: 720;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.job-financial-paid dd {
  color: var(--success);
}

.job-module-note {
  margin: 0.7rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.45;
}

.job-future-module {
  min-height: 220px;
}

.job-future-module h2 {
  margin-bottom: 0.55rem;
}

.job-future-module p {
  margin: 0;
}

.job-activity-list {
  display: grid;
  gap: 0.58rem;
}

.job-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.68rem;
  padding: 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.job-activity-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  font-weight: 850;
}

.job-activity-created {
  color: var(--primary);
  background: var(--primary-soft);
}

.job-activity-updated {
  color: var(--success);
  background: var(--success-soft);
}

.job-activity-item > div {
  display: grid;
  gap: 0.15rem;
}

.job-activity-item strong {
  color: var(--text-strong);
  font-size: 0.78rem;
}

.job-activity-item .subtle {
  font-size: 0.68rem;
}

.job-edit-dialog-form {
  width: min(860px, 100%);
}

@media (max-width: 1160px) {
  .job-detail-overview-grid {
    grid-template-columns: minmax(210px, 0.68fr) minmax(360px, 1.32fr);
  }

  .job-detail-right-column {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .job-detail-header {
    flex-direction: column;
  }

  .job-detail-actions {
    width: 100%;
  }

  .job-detail-meta-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .job-detail-meta-strip > div {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .job-detail-meta-strip > div:nth-child(3n) {
    border-right: 0;
  }

  .job-detail-meta-strip > div:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .job-detail-overview-grid {
    grid-template-columns: 1fr;
  }

  .job-detail-right-column {
    grid-column: auto;
  }

  .job-detail-left-column,
  .job-detail-right-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .job-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .job-detail-actions > button,
  .job-detail-actions details,
  .job-detail-actions summary {
    width: 100%;
  }

  .job-detail-meta-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-detail-meta-strip > div:nth-child(3n) {
    border-right: 1px solid var(--border);
  }

  .job-detail-meta-strip > div:nth-child(2n) {
    border-right: 0;
  }

  .job-detail-meta-strip > div:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--border);
  }

  .job-detail-meta-strip > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .job-detail-left-column,
  .job-detail-right-column {
    grid-template-columns: 1fr;
  }

  .job-map-canvas {
    min-height: 230px;
  }
}


/* --------------------------------------------------------------------------
   DroneHQ Online v0.2.12 — Owner Portal foundation
   Approved reference: Admin System Overview mockup.
   -------------------------------------------------------------------------- */

.shell-dashboard-menu {
  position: relative;
}

.shell-dashboard-dropdown {
  width: 245px;
}

.shell-admin-navigation {
  display: grid;
  padding-top: 0.45rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.shell-admin-navigation[hidden] {
  display: none !important;
}

.shell-admin-navigation > p {
  margin: 0;
  padding: 0.5rem 0.8rem 0.35rem;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-access-gate {
  width: min(680px, calc(100% - 2rem));
  margin: 4rem auto;
}

.admin-access-gate-card {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-access-gate-card h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.admin-access-gate-card .button {
  margin-top: 0.35rem;
}

.admin-access-spinner {
  width: 2.2rem;
  height: 2.2rem;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: admin-spin 0.8s linear infinite;
}

.admin-access-denied {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

.admin-access-denied .admin-access-gate-card {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

@keyframes admin-spin {
  to { transform: rotate(360deg); }
}

.admin-shell {
  width: min(1580px, calc(100% - 2rem));
}

.admin-page-heading,
.admin-placeholder-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1rem;
}

.admin-page-heading h1,
.admin-placeholder-heading h1 {
  margin: 0.18rem 0 0.45rem;
  font-size: var(--page-title-size);
}

.admin-page-heading .subtle,
.admin-placeholder-heading .subtle {
  max-width: 760px;
  margin: 0;
}

.admin-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.admin-date-control {
  display: block;
}

.admin-date-control input {
  width: 235px;
  min-height: 40px;
  margin: 0;
  padding-block: 0.55rem;
  cursor: default;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.admin-metric-card {
  position: relative;
  display: grid;
  min-height: 138px;
  align-content: start;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-metric-card > span:not(.admin-metric-icon) {
  padding-left: 2.6rem;
  color: var(--muted-strong);
  font-size: 0.82rem;
  font-weight: 730;
}

.admin-metric-card > strong {
  margin-top: 0.3rem;
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  line-height: 1;
  color: var(--text-strong);
}

.admin-metric-card > small {
  margin-top: auto;
}

.admin-metric-icon {
  position: absolute;
  top: 0.95rem;
  left: 0.95rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--surface-soft);
  color: var(--primary);
  font-weight: 850;
}

.admin-icon-emerald {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.admin-icon-orange {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.admin-icon-purple,
.admin-label.purple,
.admin-trend.purple {
  color: #b48cff;
}

.admin-icon-purple,
.admin-label.purple {
  background: color-mix(in srgb, #8d5cff 13%, transparent);
  border-color: color-mix(in srgb, #a778ff 38%, transparent);
}

.admin-trend {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 730;
}

.admin-trend.success {
  color: var(--success);
}

.admin-trend.warning {
  color: var(--warning);
}

.admin-data-state {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.admin-empty-cell {
  padding: 0 !important;
}

.admin-empty-state,
.admin-empty-panel {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  color: var(--muted);
  text-align: center;
}

.admin-empty-state strong,
.admin-empty-panel strong {
  color: var(--text-strong);
}

.admin-empty-state span,
.admin-empty-panel span {
  max-width: 42rem;
  font-size: 0.75rem;
  line-height: 1.55;
}

.admin-health-list li.admin-health-unconnected i {
  background: var(--muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 14%, transparent);
}

.admin-health-list li.admin-health-unconnected strong {
  color: var(--muted);
}

.admin-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.29fr);
  gap: 0.9rem;
  align-items: start;
}

.admin-organizations-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.admin-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.admin-card-heading .eyebrow {
  margin: 0 0 0.2rem;
}

.admin-card-heading h2 {
  font-size: 1rem;
}

.admin-card-heading > a,
.admin-card-heading .shell-text-button {
  width: auto;
  padding: 0;
  color: var(--primary);
  background: transparent;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  font-size: 0.76rem;
}

.admin-organization-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px 130px auto auto;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
}

.admin-organization-filters input,
.admin-organization-filters select {
  min-height: 38px;
  margin: 0;
  padding-block: 0.5rem;
  font-size: 0.8rem;
}

.admin-search-field {
  position: relative;
}

.admin-search-field > span {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  z-index: 1;
  color: var(--muted);
  transform: translateY(-50%);
}

.admin-search-field input {
  padding-left: 2rem;
}

.admin-table-wrap {
  border: 0;
  border-radius: 0;
}

.admin-organizations-table {
  min-width: 1320px;
  font-size: 0.74rem;
}

.admin-organizations-table th,
.admin-organizations-table td {
  padding: 0.72rem 0.68rem;
  vertical-align: middle;
}

.admin-organizations-table th {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.admin-organization-name {
  display: flex;
  min-width: 210px;
  align-items: center;
  gap: 0.65rem;
}

.admin-organization-name > span:last-child {
  display: grid;
  gap: 0.08rem;
}

.admin-organization-name strong {
  color: var(--text-strong);
}

.admin-organization-name small {
  color: var(--muted);
}

.admin-org-avatar,
.admin-support-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-strong);
  background: var(--surface-soft);
  font-size: 0.67rem;
  font-weight: 850;
}

.admin-label {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  color: var(--muted-strong);
  background: var(--surface-soft);
  font-size: 0.67rem;
  font-weight: 760;
}

.admin-label.blue {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  background: var(--primary-soft);
}

.admin-label.emerald {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
  background: var(--success-soft);
}

.admin-label.orange {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: var(--warning-soft);
}

.status-warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, transparent);
  background: var(--warning-soft);
}

.admin-online-count,
.admin-agent-dot {
  color: var(--success);
  font-weight: 750;
}

.admin-offline-count {
  color: var(--danger);
  font-weight: 750;
}

.admin-storage {
  display: grid;
  min-width: 86px;
  gap: 0.3rem;
}

.admin-storage i {
  display: block;
  width: 72px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.admin-storage i::after {
  display: block;
  width: var(--usage);
  height: 100%;
  content: "";
  border-radius: inherit;
  background: var(--primary);
}

.admin-row-action {
  width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: none;
}

.admin-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
  padding: 0.75rem 1rem;
  color: var(--muted);
  font-size: 0.77rem;
}

.admin-table-footer .pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-table-footer .pagination button {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.admin-overview-sidebar {
  display: grid;
  gap: 0.75rem;
}

.admin-side-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.admin-health-list,
.admin-activity-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0.9rem 1rem;
  list-style: none;
}

.admin-health-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.75rem;
}

.admin-health-list li span {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.admin-health-list li i {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}

.admin-health-list li strong {
  color: var(--success);
  font-size: 0.7rem;
}

.admin-support-list {
  display: grid;
}

.admin-support-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
}

.admin-support-list article > div:nth-child(2) {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.admin-support-list small {
  color: var(--muted);
  font-size: 0.67rem;
}

.admin-support-time {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 0.25rem;
  text-align: right;
  font-size: 0.65rem;
}

.admin-support-time strong {
  padding: 0.2rem 0.35rem;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  border-radius: 0.3rem;
  color: var(--warning);
  background: var(--warning-soft);
}

.admin-card-footnote {
  margin: 0;
  padding: 0.55rem 1rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.admin-activity-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.admin-activity-list li > span {
  color: var(--primary);
  font-weight: 850;
}

.admin-activity-list li > div {
  display: grid;
  gap: 0.08rem;
}

.admin-activity-list strong {
  font-size: 0.74rem;
}

.admin-activity-list small {
  color: var(--muted);
  font-size: 0.67rem;
}

.admin-data-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.admin-data-note > span {
  color: var(--primary);
  font-size: 1.05rem;
}

.admin-data-note p {
  margin: 0;
  font-size: 0.78rem;
}

.admin-under-development {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  border-radius: 999px;
  color: var(--warning);
  background: var(--warning-soft);
  font-size: 0.78rem;
  font-weight: 760;
  white-space: nowrap;
}

.admin-placeholder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 1rem;
}

.admin-placeholder-primary {
  grid-row: span 2;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-height: 420px;
}

.admin-placeholder-primary h2,
.admin-planned-features h2,
.admin-security-boundary h2 {
  margin: 0;
}

.admin-placeholder-primary > p,
.admin-security-boundary > p {
  margin: 0;
  color: var(--muted);
}

.admin-placeholder-primary .button {
  width: max-content;
  margin-top: auto;
}

.admin-placeholder-icon {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 1.6rem;
}

.admin-planned-features ul {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.admin-planned-features li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}

.admin-planned-features li > span:first-child {
  color: var(--success);
  font-weight: 850;
}

.admin-support-boundary {
  margin-top: 1rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.admin-support-boundary p {
  margin-bottom: 0;
  color: var(--muted);
}

@media (max-width: 1280px) {
  .admin-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-overview-layout {
    grid-template-columns: 1fr;
  }

  .admin-overview-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-support-list article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-support-time {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 980px) {
  .admin-page-heading,
  .admin-placeholder-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-heading-actions {
    justify-content: flex-start;
  }

  .admin-organization-filters {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(125px, 0.35fr));
  }

  .admin-organization-filters button,
  .admin-organization-filters .button {
    width: 100%;
  }

  .admin-overview-sidebar {
    grid-template-columns: 1fr;
  }

  .admin-placeholder-layout {
    grid-template-columns: 1fr;
  }

  .admin-placeholder-primary {
    grid-row: auto;
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .admin-shell {
    width: min(100% - 0.75rem, 1580px);
  }

  .admin-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-date-control input,
  .admin-heading-actions button {
    width: 100%;
  }

  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-organization-filters {
    grid-template-columns: 1fr;
  }

  .admin-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-access-gate {
    width: calc(100% - 1rem);
    margin-block: 2rem;
  }
}

@media (max-width: 460px) {
  .admin-metric-grid {
    grid-template-columns: 1fr;
  }

  .admin-placeholder-primary .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-access-spinner {
    animation: none;
  }
}


/* Admin Organizations v0.2.13 */
.admin-organizations-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-organization-summary-card {
  min-height: 128px;
}

.admin-scope-value {
  font-size: 1.35rem !important;
  letter-spacing: 0.08em;
}

.admin-organizations-directory {
  margin-bottom: 1rem;
}

.admin-organizations-page-filters {
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(118px, 0.24fr)
    minmax(118px, 0.24fr)
    minmax(118px, 0.24fr)
    minmax(118px, 0.24fr)
    auto;
}

.admin-organizations-page-filters select:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.admin-scope-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary-soft) 45%, transparent);
}

.admin-scope-notice > span {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1rem;
}

.admin-scope-notice p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
}

.admin-contact-cell {
  display: grid;
  min-width: 190px;
  gap: 0.12rem;
}

.admin-contact-cell strong {
  color: var(--text-strong);
}

.admin-contact-cell small,
.admin-unconnected-value {
  color: var(--muted);
  font-size: 0.7rem;
}

.admin-organizations-page .admin-organizations-table {
  min-width: 1540px;
}

.admin-organizations-page .status-success {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
  background: var(--success-soft);
}

.admin-organizations-page [data-admin-organizations-pages] {
  display: inline-flex;
  gap: 0.35rem;
}

.admin-organizations-page [data-admin-organizations-pages] button {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

@media (max-width: 1280px) {
  .admin-organizations-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-organizations-page-filters {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(125px, 0.32fr));
  }
}

@media (max-width: 760px) {
  .admin-organizations-summary {
    grid-template-columns: 1fr;
  }

  .admin-organizations-page-filters {
    grid-template-columns: 1fr;
  }
}


/* Admin Organization Detail v0.2.14 */
.admin-organization-detail-heading {
  margin-bottom: 1rem;
}

.admin-detail-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-detail-title-row h1 {
  margin: 0;
}

.admin-organization-identity {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.9rem;
  padding: 1rem;
}

.admin-organization-identity-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.admin-organization-identity-main h2 {
  margin: 0.12rem 0 0.15rem;
}

.admin-org-avatar-large {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  font-size: 1rem;
}

.admin-organization-identity-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.admin-organization-identity-meta > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem;
  border-right: 1px solid var(--border);
}

.admin-organization-identity-meta > div:last-child {
  border-right: 0;
}

.admin-organization-identity-meta dt,
.admin-detail-definition-grid dt,
.admin-detail-status-list dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.admin-organization-identity-meta dd,
.admin-detail-definition-grid dd,
.admin-detail-status-list dd {
  min-width: 0;
  margin: 0;
  color: var(--text-strong);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.admin-detail-tabs {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.9rem;
  padding: 0 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

.admin-detail-tabs button {
  position: relative;
  min-height: 42px;
  padding: 0.65rem 0.8rem;
  color: var(--muted-strong);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-detail-tabs button:hover {
  color: var(--text-strong);
  background: var(--surface-soft);
}

.admin-detail-tabs button[aria-selected="true"] {
  color: var(--primary);
}

.admin-detail-tabs button[aria-selected="true"]::after {
  position: absolute;
  right: 0.45rem;
  bottom: 0;
  left: 0.45rem;
  height: 2px;
  content: "";
  background: var(--primary);
  border-radius: 999px;
}

.admin-detail-tabs button span {
  display: inline-grid;
  min-width: 1.3rem;
  min-height: 1.3rem;
  margin-left: 0.3rem;
  place-items: center;
  color: var(--text-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
}

.admin-detail-panel {
  min-height: 320px;
  margin-bottom: 1rem;
}

.admin-organization-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
  gap: 0.9rem;
}

.admin-organization-detail-main,
.admin-organization-detail-sidebar {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.admin-detail-card {
  padding: 0;
  overflow: hidden;
}

.admin-detail-card > .admin-card-heading {
  padding: 0.85rem 1rem;
}

.admin-detail-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.admin-detail-definition-grid > div {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}

.admin-detail-definition-grid > div:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.admin-detail-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem !important;
  word-break: break-all;
}

.admin-detail-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.admin-detail-metric-grid article {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border-right: 1px solid var(--border);
}

.admin-detail-metric-grid article:last-child {
  border-right: 0;
}

.admin-detail-metric-grid span {
  color: var(--muted);
  font-size: 0.7rem;
}

.admin-detail-metric-grid strong {
  color: var(--text-strong);
  font-size: 1.35rem;
}

.admin-role-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}

.admin-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  padding: 0.28rem 0.52rem;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
}

.admin-role-chip strong {
  color: var(--primary);
}

.admin-owner-role-chip {
  margin-top: 0.3rem;
}

.admin-owner-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}

.admin-owner-profile > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.admin-owner-profile small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.admin-member-avatar {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 850;
}

.admin-detail-status-list {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--border);
}

.admin-detail-status-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.68rem 1rem;
  border-bottom: 1px solid var(--border);
}

.admin-detail-status-list > div:last-child {
  border-bottom: 0;
}

.admin-detail-status-list dd {
  text-align: right;
}

.admin-support-card > p {
  margin: 0;
  padding: 0.9rem 1rem 0;
  border-top: 1px solid var(--border);
}

.admin-support-card > button {
  width: calc(100% - 2rem);
  margin: 0.9rem 1rem 1rem;
}

.admin-detail-empty-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 1.15rem;
}

.admin-detail-empty-card > span {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 0.75rem;
  font-size: 1.1rem;
}

.admin-detail-empty-card h2 {
  margin: 0.15rem 0 0.4rem;
}

.admin-detail-empty-card button {
  margin-top: 0.8rem;
}

.admin-organization-users-table {
  min-width: 1040px;
}

.admin-member-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 220px;
}

.admin-member-cell > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.admin-membership-status {
  display: inline-flex;
  padding: 0.25rem 0.48rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-membership-status.status-active {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.admin-membership-status.status-disabled {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.admin-membership-status.status-removed {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.admin-activity-list {
  padding: 0;
}

.admin-activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
}

.admin-activity-item:first-child {
  border-top: 0;
}

.admin-activity-item > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.admin-activity-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.admin-activity-item time {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}

.admin-activity-icon {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 50%;
}

.admin-organization-link {
  color: var(--text-strong);
  font-weight: 800;
  text-decoration: none;
}

.admin-organization-link:hover,
.admin-organization-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

a.admin-row-action {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

a.admin-row-action:hover,
a.admin-row-action:focus-visible {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--primary-soft);
}

.admin-empty-state.compact {
  min-height: 0;
  padding: 0.4rem 0;
}

@media (max-width: 1180px) {
  .admin-organization-identity {
    grid-template-columns: 1fr;
  }

  .admin-organization-identity-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-organization-identity-meta > div:nth-child(2) {
    border-right: 0;
  }

  .admin-organization-identity-meta > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .admin-organization-detail-layout {
    grid-template-columns: 1fr;
  }

  .admin-organization-detail-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .admin-detail-definition-grid,
  .admin-detail-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-detail-metric-grid article:nth-child(2) {
    border-right: 0;
  }

  .admin-detail-metric-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .admin-organization-detail-sidebar {
    grid-template-columns: 1fr;
  }

  .admin-activity-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-activity-item time {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 580px) {
  .admin-organization-identity-meta,
  .admin-detail-definition-grid,
  .admin-detail-metric-grid {
    grid-template-columns: 1fr;
  }

  .admin-organization-identity-meta > div,
  .admin-organization-identity-meta > div:nth-child(2),
  .admin-detail-definition-grid > div:nth-child(odd),
  .admin-detail-metric-grid article,
  .admin-detail-metric-grid article:nth-child(2) {
    border-right: 0;
  }

  .admin-organization-identity-meta > div,
  .admin-detail-definition-grid > div,
  .admin-detail-metric-grid article {
    border-bottom: 1px solid var(--border);
  }

  .admin-organization-identity-meta > div:last-child,
  .admin-detail-definition-grid > div:last-child,
  .admin-detail-metric-grid article:last-child {
    border-bottom: 0;
  }

  .admin-detail-empty-card {
    grid-template-columns: 1fr;
  }
}


/* Global clickable breadcrumb navigation */
.breadcrumb-nav {
  margin: 0 0 0.85rem;
  min-width: 0;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

.breadcrumb-item:not(:last-child)::after {
  margin: 0 0.48rem;
  color: var(--muted);
  content: "\203A";
  opacity: 0.75;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--primary);
  text-decoration: none;
  border-radius: 0.35rem;
}

.breadcrumb-link:hover {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

.breadcrumb-link:focus-visible {
  color: var(--text-strong);
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.breadcrumb-current {
  display: block;
  max-width: min(42rem, 60vw);
  color: var(--muted-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-density="compact"] .breadcrumb-nav {
  margin-bottom: 0.55rem;
}

html[data-density="compact"] .breadcrumb-link {
  min-height: 26px;
}

@media (max-width: 640px) {
  .breadcrumb-list {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .breadcrumb-item {
    flex: 0 0 auto;
  }

  .breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }

  .breadcrumb-item:first-child:not(:last-child)::after {
    content: "\203A \2026 \203A";
    white-space: pre;
  }

  .breadcrumb-current {
    max-width: 56vw;
  }
}


/* --------------------------------------------------------------------------
   DroneHQ Online v0.2.16 — Client Import Center, phase 1
   Approved reference: Import Data mockup.
   -------------------------------------------------------------------------- */

.shell-client-navigation {
  display: grid;
  padding-top: 0.45rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.shell-client-navigation[hidden] {
  display: none !important;
}

.shell-client-navigation > p {
  margin: 0;
  padding: 0.5rem 0.8rem 0.35rem;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.import-access-gate {
  width: min(680px, calc(100% - 2rem));
  margin: 4rem auto;
}

.import-access-gate-card {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.import-access-gate-card h1 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.import-access-denied .import-access-gate-card {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}

.import-center-page {
  width: min(1500px, calc(100% - 2rem));
}

.import-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.import-page-heading h1 {
  margin: 0.15rem 0 0.35rem;
  font-size: var(--page-title-size);
}

.import-page-heading .subtle {
  max-width: 780px;
  margin: 0;
}

.import-organization-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.import-organization-context [data-import-organization-name] {
  color: var(--text);
  font-weight: 760;
}

.import-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.import-policy-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: start;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background:
    linear-gradient(135deg, var(--primary-soft), transparent 58%),
    var(--surface);
}

.import-policy-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--primary) 65%, var(--border));
  border-radius: 50%;
  color: var(--text-strong);
  background: var(--primary-soft);
  font-weight: 900;
}

.import-policy-copy .eyebrow {
  margin: 0 0 0.2rem;
}

.import-policy-copy h2 {
  margin: 0 0 0.45rem;
  color: var(--text-strong);
  font-size: 1rem;
}

.import-policy-copy p {
  margin: 0.25rem 0 0;
  color: var(--muted-strong);
  font-size: 0.8rem;
  line-height: 1.5;
}

.import-policy-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.import-policy-rules div {
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-solid) 58%, transparent);
}

.import-policy-rules dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.import-policy-rules dd {
  margin: 0.18rem 0 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.import-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.import-progress li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.25rem 1rem 0.25rem 0;
}

.import-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 0.25rem;
  width: 0.8rem;
  border-top: 1px solid var(--border);
}

.import-progress li > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-weight: 850;
}

.import-progress li.is-active > span {
  color: #fff;
  background: linear-gradient(145deg, var(--primary-strong), var(--primary));
  border-color: transparent;
}

.import-progress strong,
.import-progress small {
  display: block;
}

.import-progress strong {
  color: var(--text);
  font-size: 0.83rem;
}

.import-progress small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.import-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 1rem;
  align-items: start;
}

.import-type-panel,
.import-sidebar > .card,
.import-history-card {
  border-radius: var(--radius-md);
}

.import-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.import-card-heading h2 {
  margin-bottom: 0.28rem;
}

.import-card-heading p {
  margin: 0;
}

.import-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.import-type-card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.import-type-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.import-type-card.is-selected {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary), 0 0 0 2px var(--primary-soft);
}

.import-type-card.is-restricted {
  opacity: 0.62;
}

.import-type-card > button {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.55rem;
  width: 100%;
  min-height: 250px;
  padding: 1.15rem 1rem 0.95rem;
  text-align: center;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.import-type-card > button:hover:not(:disabled) {
  filter: none;
  transform: none;
}

.import-type-card > button strong {
  color: var(--text-strong);
  font-size: 1rem;
}

.import-type-card > button > span:not(.import-type-icon) {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.import-type-card > button small {
  align-self: end;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
}

.import-type-card.is-restricted > button small {
  color: var(--warning);
}

.import-type-card > a {
  display: block;
  padding: 0.55rem 0.75rem;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 760;
  text-align: center;
  text-decoration: none;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 50%, transparent);
}

.import-type-card > a:hover {
  text-decoration: underline;
}

.import-type-icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.import-icon-blue { background: #227de5; }
.import-icon-emerald { background: #18a966; }
.import-icon-purple { background: #8e4ce8; }
.import-icon-orange { background: #e69b12; }
.import-icon-red { background: #df5a49; }
.import-icon-teal { background: #24a9b7; }
.import-icon-pink { background: #e33f75; }
.import-icon-slate { background: #53677f; }

.import-supported-formats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}

.import-supported-formats strong {
  padding: 0.25rem 0.48rem;
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
}

.import-supported-formats .subtle {
  margin-left: auto;
  max-width: 540px;
}

.import-sidebar {
  display: grid;
  gap: 1rem;
}

.import-summary-card h2,
.import-next-card h2 {
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.import-empty-summary {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  min-height: 185px;
  align-content: center;
  padding: 1rem;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-soft) 65%, transparent);
}

.import-empty-summary > span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--primary);
  border-radius: 50%;
  background: var(--primary-soft);
  font-size: 1.25rem;
}

.import-empty-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.import-selection-summary {
  display: grid;
  margin: 0;
}

.import-selection-summary > div {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.4fr);
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.import-selection-summary > div:last-child {
  border-bottom: 0;
}

.import-selection-summary dt {
  color: var(--muted);
}

.import-selection-summary dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.import-next-card ol {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}

.import-next-card li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
  color: var(--muted-strong);
  font-size: 0.8rem;
}

.import-next-card li span {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: #fff;
  border-radius: 50%;
  background: var(--primary-strong);
  font-size: 0.7rem;
  font-weight: 850;
}

.import-next-card button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.import-next-card .field-help {
  margin-bottom: 0;
}

.import-safety-banner {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) minmax(420px, 1.7fr);
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.import-safety-icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  color: #fff;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--primary-soft);
  font-size: 1.5rem;
}

.import-safety-banner h2 {
  font-size: 1rem;
}

.import-safety-banner p {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
}

.import-safety-banner ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.import-safety-banner li {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.import-safety-banner li strong {
  color: var(--text);
  font-size: 0.78rem;
}

.import-safety-banner li span {
  color: var(--muted);
  font-size: 0.7rem;
}

.import-history-card {
  min-height: 420px;
}

.import-history-table {
  min-width: 1240px;
}

@media (max-width: 1220px) {
  .import-policy-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .import-policy-rules {
    grid-column: 1 / -1;
  }

  .import-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0.65rem;
  }

  .import-progress li:nth-child(3)::after {
    display: none;
  }

  .import-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .import-safety-banner {
    grid-template-columns: auto 1fr;
  }

  .import-safety-banner ul {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .import-page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .import-heading-actions {
    width: 100%;
  }

  .import-heading-actions .button {
    flex: 1;
    justify-content: center;
  }

  .import-main-layout {
    grid-template-columns: 1fr;
  }

  .import-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .import-policy-banner {
    grid-template-columns: 1fr;
  }

  .import-policy-rules {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .import-center-page {
    width: min(100% - 1rem, 1500px);
  }

  .import-heading-actions,
  .import-sidebar {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .import-heading-actions .button {
    width: 100%;
  }

  .import-progress {
    grid-template-columns: 1fr;
  }

  .import-progress li {
    padding-right: 0;
  }

  .import-progress li::after {
    display: none;
  }

  .import-progress li:not(.is-active) small {
    display: none;
  }

  .import-type-grid {
    grid-template-columns: 1fr;
  }

  .import-type-card > button {
    min-height: 0;
  }

  .import-safety-banner {
    grid-template-columns: 1fr;
  }

  .import-safety-banner ul {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}


/* DroneHQ Online v0.2.17.1 dual customer/developer help */
.shell-help-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-help-button:hover,
.shell-help-button:focus-visible {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  background: var(--primary-soft);
}

body.help-drawer-open {
  overflow: hidden;
}

.help-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 218;
  border: 0;
  background: rgba(0, 10, 25, 0.66);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.help-drawer-backdrop.is-open {
  opacity: 1;
}

.help-drawer-backdrop[hidden],
.help-drawer[hidden] {
  display: none;
}

.help-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 220;
  width: min(470px, 100vw);
  height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--border);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: -20px 0 55px rgba(0, 8, 22, 0.34);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  transform: translateX(100%);
  transition: transform 180ms ease;
}

.help-drawer.is-open {
  transform: translateX(0);
}

.help-drawer-header,
.help-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface-solid);
}

.help-drawer-header {
  border-bottom: 1px solid var(--border);
}

.help-drawer-header h2 {
  margin: 0.2rem 0 0;
  color: var(--text-strong);
  font-size: 1.35rem;
}

.help-drawer-footer {
  border-top: 1px solid var(--border);
}

.help-drawer-footer button {
  min-width: 118px;
}

.help-drawer-scroll {
  min-height: 0;
  padding: 1.15rem 1.2rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.help-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.help-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.28rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 820;
  letter-spacing: 0.015em;
}

.help-status-success {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--surface-solid));
}

.help-status-warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-solid));
}

.help-status-neutral {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--primary-soft);
}

.help-page-path {
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-summary {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted-strong);
  background: var(--surface-soft);
  line-height: 1.6;
}

.help-section {
  margin-top: 1.2rem;
}

.help-section h3 {
  margin: 0 0 0.65rem;
  color: var(--text-strong);
  font-size: 0.92rem;
}

.help-section ul,
.help-section ol {
  display: grid;
  gap: 0.58rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted-strong);
}

.help-section li {
  padding-left: 0.12rem;
  line-height: 1.5;
}

.help-notes {
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning) 6%, var(--surface-solid));
}

.help-related-links {
  display: grid;
  gap: 0.55rem;
}

.help-related-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 42px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: var(--surface-soft);
  text-decoration: none;
  font-weight: 760;
}

.help-related-links a:hover,
.help-related-links a:focus-visible {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-soft);
}

@media (max-width: 720px) {
  .help-drawer {
    width: 100vw;
    border-left: 0;
  }

  .help-drawer-header,
  .help-drawer-footer {
    padding-inline: 0.9rem;
  }

  .help-drawer-scroll {
    padding-inline: 0.9rem;
  }

  .help-drawer-footer button {
    min-width: 0;
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .help-drawer,
  .help-drawer-backdrop {
    transition: none;
  }
}


.help-tab-list {
  display: flex;
  gap: 0.35rem;
  padding: 0.7rem 1.2rem 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-solid);
}

.help-tab {
  min-height: 42px;
  padding: 0.62rem 0.8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--muted-strong);
  background: transparent;
  font-weight: 800;
}

.help-tab:hover,
.help-tab:focus-visible {
  color: var(--text-strong);
  background: var(--surface-soft);
}

.help-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--primary-soft);
}

.help-owner-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 0.35rem;
  padding: 0.15rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.help-page-title {
  margin: 0 0 0.75rem;
  color: var(--text-strong);
  font-size: 1.2rem;
}

.help-section h4 {
  margin: 0 0 0.65rem;
  color: var(--text-strong);
  font-size: 0.92rem;
}

.developer-help-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 120px;
  color: var(--muted-strong);
}

.developer-help-facts {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
}

.developer-help-facts > div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.developer-help-facts dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.developer-help-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--text-strong);
}

.developer-file-list code,
.developer-help-facts code {
  overflow-wrap: anywhere;
  color: var(--primary);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
}

.developer-help-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.developer-help-actions button,
.developer-help-actions .button-link {
  min-height: 42px;
}

.help-inline-error {
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--error) 42%, var(--border));
  border-radius: var(--radius-md);
  color: var(--error);
  background: color-mix(in srgb, var(--error) 8%, var(--surface-solid));
}

@media (max-width: 720px) {
  .help-tab-list {
    padding-inline: 0.9rem;
  }

  .help-tab {
    flex: 1;
    padding-inline: 0.5rem;
  }

  .developer-help-actions {
    grid-template-columns: 1fr;
  }

  .developer-help-facts > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}


/* DroneHQ v0.2.18 — owner-only Developer Tools */
.shell-admin-developer-link {
  margin-top: 0.45rem;
  padding-top: 0.75rem !important;
  border-top: 1px solid var(--border);
}

.developer-tools-shell {
  padding-bottom: 3rem;
}

.developer-tools-heading {
  align-items: flex-end;
}

.developer-tool-tabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.35rem;
  overflow: visible;
  padding: 0.35rem;
  margin: 0 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.developer-tool-tab {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0.42rem 0.38rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.developer-tool-tab:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}

.developer-tool-tab.active {
  background: var(--primary-soft);
  border-color: var(--border-strong);
  color: var(--primary);
}

.developer-tool-tab:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .developer-tool-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .developer-tool-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-tool-tab {
    white-space: normal;
  }
}

.developer-tool-panel {
  min-width: 0;
}

.developer-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--page-gap);
}

.developer-fact-list,
.developer-state-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
}

.developer-fact-list > div,
.developer-state-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.developer-fact-list > div:last-child,
.developer-state-list > div:last-child {
  border-bottom: 0;
}

.developer-fact-list dt,
.developer-state-list span {
  color: var(--muted);
  font-weight: 700;
}

.developer-fact-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.developer-state-list strong {
  justify-self: end;
  text-align: right;
}

.developer-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.developer-summary-grid > div {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.developer-summary-grid strong,
.developer-summary-grid span {
  display: block;
}

.developer-summary-grid strong {
  color: var(--text-strong);
  font-size: 1.55rem;
}

.developer-summary-grid span {
  margin-top: 0.2rem;
  color: var(--muted);
}

.developer-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.developer-search {
  width: min(340px, 100%);
}

.developer-search input {
  width: 100%;
}

.developer-feature-list,
.developer-release-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.developer-feature-item,
.developer-release-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.developer-release-item {
  width: 100%;
  min-height: 52px;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.developer-release-item:hover,
.developer-release-item:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-soft));
  transform: none;
}

.developer-feature-item p {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.developer-release-file {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.developer-release-item code {
  color: var(--muted-strong);
  overflow-wrap: anywhere;
}

.developer-release-open {
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 760;
  white-space: nowrap;
}

.developer-release-dialog {
  width: min(980px, calc(100% - 2rem));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.developer-release-dialog::backdrop {
  background: rgba(0, 10, 25, 0.78);
  backdrop-filter: blur(5px);
}

.developer-release-dialog-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(88vh, 900px);
  padding: 1rem;
}

.developer-release-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.developer-release-dialog-header h2,
.developer-release-dialog-header p {
  margin-bottom: 0;
}

.developer-release-content {
  min-height: 280px;
  margin: 0;
  padding: 1rem 0.2rem 0.2rem;
  overflow: auto;
  color: var(--text);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.developer-service-state {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.status-text-success {
  color: var(--success);
}

.status-text-warning {
  color: var(--warning);
}

[data-dev-routes-body] code,
[data-dev-help-body] code,
[data-dev-migrations-body] code {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .developer-overview-grid {
    grid-template-columns: 1fr;
  }

  .developer-panel-heading,
  .developer-feature-item,
  .developer-release-item {
    align-items: stretch;
    flex-direction: column;
  }

  .developer-release-file {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .developer-search {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .developer-fact-list > div,
  .developer-state-list > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .developer-state-list strong {
    justify-self: start;
    text-align: left;
  }

  .developer-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* DroneHQ Online v0.2.20 customer CSV upload and staging */
.import-next-action {
  display: grid;
  gap: 0.7rem;
  width: 100%;
}

.import-next-card .import-next-action > button {
  position: static;
  width: 100%;
  min-height: 46px;
  margin: 0;
  line-height: 1.2;
  white-space: normal;
}

.import-next-note {
  position: static;
  min-height: 2.7em;
  margin: 0;
  padding: 0;
  line-height: 1.45;
}

.import-progress li.is-complete > span {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--success) 72%, var(--border));
  background: var(--success);
}

.import-progress li.is-complete > span::before {
  content: "✓";
}

.import-progress li.is-complete > span {
  font-size: 0;
}

.import-progress li.is-complete > span::before {
  font-size: 0.85rem;
}

.import-upload-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, var(--primary-soft), transparent 54%),
    color-mix(in srgb, var(--surface-soft) 78%, transparent);
}

.import-upload-panel[hidden] {
  display: none;
}

.import-upload-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.import-upload-heading h3 {
  margin: 0.2rem 0 0.35rem;
  color: var(--text-strong);
  font-size: 1.08rem;
}

.import-upload-heading p {
  max-width: 720px;
  margin-bottom: 0;
}

.import-upload-heading > button {
  flex: 0 0 auto;
}

.import-upload-dropzone {
  position: relative;
  overflow: hidden;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.import-upload-dropzone:hover,
.import-upload-dropzone:focus-within,
.import-upload-dropzone.is-dragging {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.import-upload-dropzone.has-file {
  border-style: solid;
  border-color: color-mix(in srgb, var(--success) 60%, var(--border));
}

.import-upload-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.import-upload-dropzone label {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-height: 190px;
  align-content: center;
  margin: 0;
  padding: 1.25rem;
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.import-upload-dropzone label > span:not(.import-upload-icon),
.import-upload-dropzone label > small {
  color: var(--muted);
  font-weight: 560;
}

.import-upload-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 52%, var(--border));
  border-radius: 50%;
  background: var(--primary-soft);
  font-size: 1.35rem;
  font-weight: 900;
}

.import-file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
}

.import-file-preview[hidden] {
  display: none;
}

.import-file-preview > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.import-file-preview > div > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.import-file-preview strong {
  overflow: hidden;
  color: var(--text-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-file-preview span {
  color: var(--muted);
  font-size: 0.78rem;
}

.import-file-type {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  color: #ffffff !important;
  border-radius: var(--radius-sm);
  background: var(--success);
  font-size: 0.7rem !important;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.import-upload-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) minmax(220px, 1fr);
  gap: 0.75rem;
}

.import-upload-actions button {
  position: static;
  min-height: 46px;
  margin: 0;
}

.import-upload-note {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 45%, transparent);
}

.import-selection-summary dd {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .import-upload-heading,
  .import-file-preview {
    align-items: stretch;
    flex-direction: column;
  }

  .import-upload-heading > button,
  .import-file-preview > button {
    width: 100%;
  }

  .import-upload-actions {
    grid-template-columns: 1fr;
  }
}


/* DroneHQ Online v0.2.21 — Import column mapping */
.import-mapping-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
}

.import-mapping-context h2 {
  margin: 0.18rem 0 0.35rem;
  color: var(--text-strong);
  font-size: 1.15rem;
}

.import-mapping-context p {
  margin: 0;
}

.mapping-source-control {
  display: grid;
  gap: 0.35rem;
}

.mapping-source-control label {
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 760;
}

.mapping-source-control select {
  min-height: var(--control-height);
}

.mapping-source-control .field-help {
  margin: 0;
}

.import-mapping-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 1rem;
  align-items: start;
}

.import-mapping-card {
  min-width: 0;
  padding: 1rem;
}

.mapping-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.mapping-card-header h2 {
  margin: 0.15rem 0 0.3rem;
}

.mapping-card-header p {
  max-width: 760px;
  margin: 0;
}

.mapping-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.mapping-required-note {
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.8rem;
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  font-size: 0.8rem;
}

.mapping-required-note.is-satisfied {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: var(--success-soft);
}

.import-mapping-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.import-mapping-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

.import-mapping-table th,
.import-mapping-table td {
  padding: 0.72rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.import-mapping-table th {
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.import-mapping-table td:first-child {
  width: 20%;
}

.import-mapping-table td:nth-child(2) {
  width: 28%;
}

.import-mapping-table td:nth-child(3) {
  width: 38%;
}

.import-mapping-table td:last-child {
  width: 14%;
}

.import-mapping-table tbody tr:last-child td {
  border-bottom: 0;
}

.import-mapping-table tbody tr.has-conflict {
  background: var(--danger-soft);
  box-shadow: inset 3px 0 0 var(--danger);
}

.import-mapping-table td > strong,
.import-mapping-table td > small {
  display: block;
}

.import-mapping-table td > strong {
  color: var(--text-strong);
  font-size: 0.82rem;
}

.import-mapping-table td > small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.68rem;
}

.mapping-samples {
  display: grid;
  gap: 0.28rem;
}

.mapping-samples > span {
  display: block;
  max-width: 280px;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-field-select {
  width: 100%;
  min-height: 40px;
}

.mapping-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.26rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.mapping-state-mapped {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: var(--success-soft);
}

.mapping-state-suggested {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: var(--primary-soft);
}

.mapping-state-notes {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.mapping-state-preserve {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
  background: var(--warning-soft);
}

.mapping-state-ignore {
  color: var(--muted-strong);
}

.mapping-state-unmapped {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  background: var(--danger-soft);
}

.mapping-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem 1rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.9rem;
}

.mapping-profile h3 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}

.mapping-profile p {
  margin: 0;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.checkbox-row input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.mapping-profile-name {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
  color: var(--muted-strong);
  font-size: 0.76rem;
  font-weight: 760;
}

.mapping-profile-name input {
  min-height: 42px;
}

.mapping-profile [data-profile-match-message] {
  grid-column: 1 / -1;
  margin: 0;
}

.mapping-actions {
  display: grid;
  grid-template-columns: auto minmax(180px, 0.75fr) minmax(210px, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin-top: 1rem;
}

.mapping-actions .button,
.mapping-actions button {
  width: 100%;
  min-height: 44px;
}

.import-mapping-sidebar {
  display: grid;
  gap: 1rem;
}

.import-mapping-sidebar .card {
  padding: 1rem;
}

.import-mapping-sidebar h2 {
  margin: 0.15rem 0 0.75rem;
  font-size: 1.05rem;
}

.mapping-summary-list {
  margin: 0;
}

.mapping-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.52rem 0;
  border-bottom: 1px solid var(--border);
}

.mapping-summary-list > div:last-child {
  border-bottom: 0;
}

.mapping-summary-list dt {
  color: var(--muted);
  font-size: 0.75rem;
}

.mapping-summary-list dd {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.78rem;
  font-weight: 820;
}

.mapping-ready-state {
  margin-top: 0.8rem;
  padding: 0.65rem 0.72rem;
  color: var(--muted-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 0.76rem;
  line-height: 1.45;
}

.mapping-ready-state.is-ready {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: var(--success-soft);
}

.mapping-ready-state.has-warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 32%, var(--border));
  background: var(--warning-soft);
}

.mapping-guidance-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted-strong);
  font-size: 0.76rem;
  line-height: 1.45;
}

.import-policy-compact p {
  margin: 0 0 0.65rem;
  color: var(--muted-strong);
  font-size: 0.77rem;
  line-height: 1.5;
}

.import-policy-compact p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1180px) {
  .import-mapping-layout {
    grid-template-columns: 1fr;
  }

  .import-mapping-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .import-mapping-context {
    grid-template-columns: 1fr;
  }

  .mapping-card-header {
    flex-direction: column;
  }

  .mapping-toolbar {
    justify-content: flex-start;
  }

  .import-mapping-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .mapping-actions {
    grid-template-columns: 1fr;
  }

  .mapping-profile {
    grid-template-columns: 1fr;
  }

  .mapping-profile-name,
  .mapping-profile [data-profile-match-message] {
    grid-column: auto;
  }
}


/* Import Center: Step 4 Validate & Preview */
.validation-file-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.95rem 1rem;
}

.validation-file-context h2 {
  margin: 0.14rem 0 0.25rem;
  font-size: 1.05rem;
}

.validation-file-context p {
  margin: 0;
}

.validation-safety-note {
  display: grid;
  gap: 0.18rem;
  max-width: 390px;
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--muted-strong);
  font-size: 0.75rem;
  line-height: 1.4;
}

.validation-safety-note strong {
  color: var(--text-strong);
}

.validation-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.validation-metric {
  min-width: 0;
  padding: 0.85rem 0.9rem;
}

.validation-metric span,
.validation-metric strong {
  display: block;
}

.validation-metric span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.validation-metric strong {
  margin-top: 0.25rem;
  color: var(--text-strong);
  font-size: 1.45rem;
  line-height: 1;
}

.validation-metric-ready strong {
  color: var(--success);
}

.validation-metric-duplicate strong {
  color: var(--warning);
}

.validation-metric-invalid strong {
  color: var(--danger);
}

.validation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 330px);
  gap: 1rem;
  align-items: start;
}

.validation-preview-card {
  min-width: 0;
  padding: 1rem;
}

.validation-preview-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.validation-preview-header h2 {
  margin: 0.14rem 0 0.25rem;
  font-size: 1.05rem;
}

.validation-preview-header p {
  max-width: 720px;
  margin: 0;
}

.validation-filter-bar {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(150px, 1fr);
  gap: 0.55rem;
  min-width: min(100%, 430px);
}

.validation-filter-bar label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
}

.validation-filter-bar input,
.validation-filter-bar select {
  min-height: 40px;
}

.validation-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.validation-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.validation-table th,
.validation-table td {
  padding: 0.68rem 0.72rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.validation-table th {
  color: var(--muted-strong);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.validation-table th:first-child,
.validation-table td:first-child {
  width: 8%;
}

.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
  width: 19%;
}

.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
  width: 18%;
}

.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
  width: 12%;
}

.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
  width: 29%;
}

.validation-table th:last-child,
.validation-table td:last-child {
  width: 14%;
}

.validation-table tbody tr:last-child td {
  border-bottom: 0;
}

.validation-table tbody tr.has-error {
  background: color-mix(in srgb, var(--danger-soft) 48%, transparent);
  box-shadow: inset 3px 0 0 var(--danger);
}

.validation-table tbody tr.has-duplicate {
  background: color-mix(in srgb, var(--warning-soft) 52%, transparent);
  box-shadow: inset 3px 0 0 var(--warning);
}

.validation-table tbody tr.is-excluded {
  opacity: 0.62;
}

.validation-table td > strong,
.validation-table td > small,
.validation-table td > span {
  display: block;
}

.validation-table td > strong {
  color: var(--text-strong);
  font-size: 0.79rem;
}

.validation-table td > small,
.validation-table td > span {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.validation-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.26rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  font-size: 0.67rem;
  font-weight: 800;
  white-space: nowrap;
}

.validation-status-ready {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: var(--success-soft);
}

.validation-status-duplicate {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
  background: var(--warning-soft);
}

.validation-status-invalid {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: var(--danger-soft);
}

.validation-status-excluded {
  color: var(--muted-strong);
}

.validation-issue-stack {
  display: grid;
  gap: 0.35rem;
}

.validation-issue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem;
  align-items: start;
  padding: 0.34rem 0.42rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  font-size: 0.68rem;
  line-height: 1.35;
}

.validation-issue strong {
  color: var(--text-strong);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.validation-issue span {
  color: var(--muted-strong);
  overflow-wrap: anywhere;
}

.validation-issue-error {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  background: var(--danger-soft);
}

.validation-issue-error strong {
  color: var(--danger);
}

.validation-issue-warning,
.validation-issue-duplicate {
  border-color: color-mix(in srgb, var(--warning) 32%, var(--border));
  background: var(--warning-soft);
}

.validation-issue-warning strong,
.validation-issue-duplicate strong {
  color: var(--warning);
}

.validation-issue-resolved {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: var(--success-soft);
}

.validation-issue-resolved strong,
.validation-issue-resolved span {
  color: var(--success);
}

.validation-no-issues {
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 760;
}

.validation-row-actions {
  display: grid;
  gap: 0.4rem;
}

.validation-row-actions button {
  width: 100%;
}

.validation-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.validation-pagination p {
  margin: 0;
}

.validation-pagination > div {
  display: flex;
  gap: 0.45rem;
}

.validation-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.validation-actions .button,
.validation-actions button {
  width: 100%;
  min-height: 44px;
}

.validation-next-phase-note {
  margin: 0.55rem 0 0;
  text-align: right;
}

.validation-sidebar {
  display: grid;
  gap: 1rem;
}

.validation-sidebar .card {
  padding: 1rem;
}

.validation-sidebar h2 {
  margin: 0.14rem 0 0.7rem;
  font-size: 1.02rem;
}

.validation-readiness {
  padding: 0.72rem 0.78rem;
  color: var(--muted-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 0.75rem;
  line-height: 1.45;
}

.validation-readiness.is-ready {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 38%, var(--border));
  background: var(--success-soft);
}

.validation-readiness.has-warning {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border));
  background: var(--warning-soft);
}

.validation-readiness.has-error {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: var(--danger-soft);
}

.validation-summary-list {
  margin: 0.75rem 0 0;
}

.validation-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.52rem 0;
  border-bottom: 1px solid var(--border);
}

.validation-summary-list > div:last-child {
  border-bottom: 0;
}

.validation-summary-list dt {
  color: var(--muted);
  font-size: 0.74rem;
}

.validation-summary-list dd {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.78rem;
  font-weight: 820;
}

.validation-check-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted-strong);
  font-size: 0.75rem;
  line-height: 1.42;
}

.validation-edit-dialog {
  width: min(860px, calc(100vw - 2rem));
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: auto;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-strong);
}

.validation-edit-dialog::backdrop {
  background: rgba(2, 10, 24, 0.72);
  backdrop-filter: blur(3px);
}

.validation-edit-dialog form {
  padding: 1rem;
}

.validation-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.validation-dialog-header h2 {
  margin: 0.14rem 0 0.25rem;
}

.validation-dialog-header p {
  margin: 0;
}

.validation-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.validation-edit-grid label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted-strong);
  font-size: 0.74rem;
  font-weight: 760;
}

.validation-grid-wide {
  grid-column: span 1;
}

.validation-grid-full {
  grid-column: 1 / -1;
}

.validation-edit-grid input,
.validation-edit-grid select,
.validation-edit-grid textarea {
  width: 100%;
}

.validation-edit-grid textarea {
  resize: vertical;
}

.validation-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 1180px) {
  .validation-layout {
    grid-template-columns: 1fr;
  }

  .validation-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .validation-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .validation-preview-header,
  .validation-file-context {
    align-items: stretch;
    flex-direction: column;
  }

  .validation-filter-bar {
    width: 100%;
  }

  .validation-sidebar {
    grid-template-columns: 1fr;
  }

  .validation-actions {
    grid-template-columns: 1fr;
  }

  .validation-next-phase-note {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .validation-metrics,
  .validation-filter-bar,
  .validation-edit-grid {
    grid-template-columns: 1fr;
  }

  .validation-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .validation-pagination > div {
    width: 100%;
  }

  .validation-pagination button {
    flex: 1;
  }

  .validation-grid-full,
  .validation-grid-wide {
    grid-column: auto;
  }

  .validation-dialog-actions {
    flex-direction: column-reverse;
  }

  .validation-dialog-actions button {
    width: 100%;
  }
}


/* v0.2.23 — Customer duplicate review */
.mapping-state-unmapped {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
}

.duplicate-file-context,
.duplicate-safety-note,
.duplicate-case-header,
.duplicate-record-header,
.duplicate-review-header,
.duplicate-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.duplicate-file-context {
  margin-bottom: var(--page-gap);
}

.duplicate-safety-note {
  max-width: 390px;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--success-soft);
}

.duplicate-safety-note span {
  color: var(--muted);
  font-size: 0.9rem;
}

.duplicate-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: var(--page-gap);
}

.duplicate-metric {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}

.duplicate-metric span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.duplicate-metric strong {
  color: var(--text-strong);
  font-size: 1.75rem;
}

.duplicate-metric-resolved {
  border-color: color-mix(in srgb, var(--success) 36%, var(--border));
}

.duplicate-metric-unresolved {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
}

.duplicate-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1rem;
  align-items: start;
}

.duplicate-review-card {
  min-width: 0;
}

.duplicate-review-header {
  margin-bottom: 1rem;
}

.duplicate-filter-bar label {
  display: grid;
  gap: 0.35rem;
  min-width: 180px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.duplicate-case-list {
  display: grid;
  gap: 1rem;
}

.duplicate-case {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.duplicate-case-unresolved {
  border-color: color-mix(in srgb, var(--warning) 44%, var(--border));
}

.duplicate-case-review_later {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}

.duplicate-case-resolved {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
}

.duplicate-case-header h3 {
  margin: 0.25rem 0 0.25rem;
}

.duplicate-decision-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.duplicate-decision-status-resolved {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.duplicate-decision-status-unresolved {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

.duplicate-decision-status-review_later {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.duplicate-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.9rem 0;
}

.duplicate-record-panel {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.duplicate-record-header {
  display: grid;
  justify-content: stretch;
  gap: 0.2rem;
}

.duplicate-record-label {
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.duplicate-record-header small {
  color: var(--muted);
}

.duplicate-record-details {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
}

.duplicate-record-details > div {
  display: grid;
  grid-template-columns: minmax(88px, 0.45fr) minmax(0, 1fr);
  gap: 0.7rem;
}

.duplicate-record-details dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.duplicate-record-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.duplicate-current-decision {
  margin: 0.7rem 0;
  color: var(--muted-strong);
  font-weight: 650;
}

.duplicate-case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.duplicate-case-actions button {
  width: auto;
}

.duplicate-review-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.1rem;
}

.duplicate-next-phase-note {
  margin: 0.75rem 0 0;
  text-align: right;
}

.duplicate-review-sidebar {
  display: grid;
  gap: 1rem;
}

.duplicate-action-help {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}

.duplicate-action-help > div {
  display: grid;
  gap: 0.18rem;
}

.duplicate-action-help dt {
  color: var(--text-strong);
  font-weight: 800;
}

.duplicate-action-help dd {
  margin: 0;
  color: var(--muted);
}

.duplicate-safety-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}

.duplicate-merge-dialog,
.duplicate-exclude-dialog {
  width: min(1080px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
}

.duplicate-exclude-dialog {
  width: min(680px, calc(100vw - 2rem));
}

.duplicate-merge-dialog::backdrop,
.duplicate-exclude-dialog::backdrop {
  background: rgba(1, 8, 20, 0.72);
  backdrop-filter: blur(5px);
}

.duplicate-merge-dialog form,
.duplicate-exclude-dialog form {
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.25rem;
}

.duplicate-dialog-header {
  margin-bottom: 1rem;
}

.duplicate-name-warning {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
}

.duplicate-survivor-options,
.duplicate-exclude-options {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.duplicate-survivor-options label,
.duplicate-exclude-options label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-weight: 700;
}

.duplicate-survivor-options input,
.duplicate-exclude-options input {
  width: auto;
}

.duplicate-merge-table-wrap {
  max-height: 48vh;
  margin-bottom: 1rem;
}

.duplicate-merge-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.duplicate-merge-table th,
.duplicate-merge-table td {
  padding: 0.7rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.duplicate-merge-table tbody th {
  color: var(--muted-strong);
  white-space: nowrap;
}

.duplicate-merge-table td {
  overflow-wrap: anywhere;
}

.duplicate-merge-table select {
  min-width: 190px;
}

.duplicate-decision-note {
  display: grid;
  gap: 0.4rem;
  color: var(--muted-strong);
  font-weight: 700;
}

.duplicate-decision-note textarea {
  width: 100%;
  resize: vertical;
}

.duplicate-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1rem;
}

.duplicate-dialog-actions button {
  width: auto;
}

@media (max-width: 1100px) {
  .duplicate-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .duplicate-review-layout {
    grid-template-columns: 1fr;
  }

  .duplicate-review-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .duplicate-review-sidebar .import-policy-compact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .duplicate-file-context,
  .duplicate-case-header,
  .duplicate-review-header,
  .duplicate-dialog-header {
    flex-direction: column;
  }

  .duplicate-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .duplicate-comparison,
  .duplicate-review-sidebar {
    grid-template-columns: 1fr;
  }

  .duplicate-review-sidebar .import-policy-compact {
    grid-column: auto;
  }

  .duplicate-filter-bar,
  .duplicate-filter-bar label {
    width: 100%;
  }

  .duplicate-case-actions,
  .duplicate-review-actions,
  .duplicate-dialog-actions {
    flex-direction: column;
  }

  .duplicate-case-actions button,
  .duplicate-review-actions .button,
  .duplicate-review-actions button,
  .duplicate-dialog-actions button {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .duplicate-metrics {
    grid-template-columns: 1fr;
  }
}


/* v0.2.24 — resumable imports, clearer preview controls, paired duplicates */
a.button.success,
.button.success {
  color: #062617;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--success) 78%, #0f7c49),
    var(--success)
  );
  border: 1px solid color-mix(in srgb, var(--success) 68%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--success) 24%, transparent);
}

.import-resume-button {
  white-space: nowrap;
}

.import-resume-count {
  display: inline-grid;
  min-width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  padding: 0 0.3rem;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.38);
  font-size: 0.68rem;
  line-height: 1;
}

.import-history-table td:nth-last-child(2) strong,
.import-history-table td:nth-last-child(2) small {
  display: block;
}

.import-history-table td:nth-last-child(2) small {
  margin-top: 0.2rem;
  color: var(--muted);
  text-transform: capitalize;
}

.import-history-table td:last-child {
  white-space: nowrap;
}

.validation-dialog-close {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 1.1rem;
  line-height: 1;
}

.validation-dialog-close:hover:not(:disabled) {
  color: var(--text-strong);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.validation-dialog-actions > button {
  width: auto;
  min-width: 180px;
}

.validation-table tbody tr[class*="duplicate-pair-"] > td {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--duplicate-pair-color) 11%, transparent),
      transparent 72%
    );
}

.validation-table tbody tr[class*="duplicate-pair-"] > td:first-child {
  border-left: 4px solid var(--duplicate-pair-color);
}

.validation-issue-duplicate[class*="duplicate-pair-"] {
  border-color: color-mix(
    in srgb,
    var(--duplicate-pair-color) 58%,
    var(--border)
  );
  background: color-mix(
    in srgb,
    var(--duplicate-pair-color) 15%,
    var(--surface-soft)
  );
}

.duplicate-pair-0 { --duplicate-pair-color: #ffb84d; }
.duplicate-pair-1 { --duplicate-pair-color: #56c8ff; }
.duplicate-pair-2 { --duplicate-pair-color: #bc8cff; }
.duplicate-pair-3 { --duplicate-pair-color: #55dda1; }
.duplicate-pair-4 { --duplicate-pair-color: #ff7f9f; }
.duplicate-pair-5 { --duplicate-pair-color: #e0d45b; }

@media (max-width: 720px) {
  .validation-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .validation-dialog-actions > button {
    width: 100%;
    min-width: 0;
  }
}


/* v0.2.25 — selected duplicate workflow */
.duplicate-selection-toolbar {
  position: sticky;
  top: calc(var(--shell-height) + var(--crawler-height) + 0.5rem);
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.duplicate-selection-toolbar.has-selection {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
}

.duplicate-selection-toolbar.is-ready {
  border-color: color-mix(in srgb, var(--success) 58%, var(--border));
  background: color-mix(in srgb, var(--success-soft) 42%, var(--surface-solid));
}

.duplicate-selection-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.duplicate-selection-copy strong {
  color: var(--text-strong);
}

.duplicate-selection-copy span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.duplicate-selection-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.duplicate-selection-actions button {
  width: auto;
  white-space: nowrap;
}

.validation-table {
  min-width: 1120px;
}

.validation-table th:first-child,
.validation-table td:first-child {
  width: 4.5%;
  text-align: center;
}

.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
  width: 7%;
}

.validation-table th:nth-child(3),
.validation-table td:nth-child(3) {
  width: 18%;
}

.validation-table th:nth-child(4),
.validation-table td:nth-child(4) {
  width: 17%;
}

.validation-table th:nth-child(5),
.validation-table td:nth-child(5) {
  width: 11%;
}

.validation-table th:nth-child(6),
.validation-table td:nth-child(6) {
  width: 28.5%;
}

.validation-table th:last-child,
.validation-table td:last-child {
  width: 14%;
}

.validation-duplicate-select-cell {
  vertical-align: middle !important;
}

.validation-duplicate-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--duplicate-pair-color, var(--primary));
  cursor: pointer;
}

.validation-duplicate-checkbox:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 3px;
}

.validation-selection-placeholder {
  color: var(--muted);
  opacity: 0.35;
}

.validation-table tbody tr.is-selected-for-duplicate > td {
  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--duplicate-pair-color, var(--primary)) 22%,
        transparent
      ),
      color-mix(in srgb, var(--surface-soft) 72%, transparent)
    );
}

.validation-table tbody tr.is-selected-for-duplicate {
  box-shadow:
    inset 4px 0 0 var(--duplicate-pair-color, var(--primary)),
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--duplicate-pair-color, var(--primary)) 62%,
      transparent
    );
}

.validation-actions-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.duplicate-selected-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: var(--page-gap);
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
}

.duplicate-selected-context[hidden] {
  display: none;
}

.duplicate-selected-context h2 {
  margin: 0.15rem 0 0.25rem;
}

.duplicate-selected-context p {
  margin: 0;
}

.duplicate-selected-position {
  display: inline-flex;
  margin-bottom: 0.35rem;
  padding: 0.25rem 0.55rem;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 999px;
  background: var(--primary-soft);
  font-size: 0.72rem;
  font-weight: 800;
}

.duplicate-case {
  scroll-margin-top: calc(
    var(--shell-height) + var(--crawler-height) + 1.25rem
  );
}

@media (max-width: 900px) {
  .duplicate-selection-toolbar {
    top: calc(var(--shell-height) + 0.5rem);
    align-items: stretch;
    flex-direction: column;
  }

  .duplicate-selection-actions {
    width: 100%;
  }

  .duplicate-selection-actions button {
    flex: 1;
  }

  .duplicate-selected-context {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .duplicate-selection-actions {
    flex-direction: column;
  }

  .duplicate-selection-actions button,
  .duplicate-selected-context .button {
    width: 100%;
  }

  .validation-actions-secondary {
    grid-template-columns: 1fr;
  }
}


/* v0.2.26 Compact Import History and public user-code attribution */

.import-history-explanation {
  margin: 0 0 1rem;
}

.import-history-table-wrap {
  overflow-x: hidden;
}

.import-history-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.import-history-table .import-history-col-import { width: 13%; }
.import-history-table .import-history-col-type { width: 10%; }
.import-history-table .import-history-col-file { width: 23%; }
.import-history-table .import-history-col-user { width: 10%; }
.import-history-table .import-history-col-results { width: 15%; }
.import-history-table .import-history-col-status { width: 17%; }
.import-history-table .import-history-col-actions { width: 12%; }

.import-history-table th,
.import-history-table td {
  min-width: 0;
  padding: 0.78rem 0.68rem;
}

.import-history-table td > strong,
.import-history-table td > small,
.import-history-table td > span,
.import-history-table td > a {
  min-width: 0;
}

.import-history-table .table-secondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-history-filename {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 760;
}

a.import-history-filename {
  text-decoration: none;
}

a.import-history-filename:hover,
a.import-history-filename:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.user-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  padding: 0.38rem 0.55rem;
  color: var(--text-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  cursor: help;
}

.import-history-user-hint {
  font-size: 0.68rem;
}

.import-result-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem 0.45rem;
}

.import-result-summary > span {
  display: inline-flex;
  min-width: 0;
  color: var(--muted-strong);
  font-size: 0.74rem;
  white-space: nowrap;
}

.import-history-status-cell strong,
.import-history-import-cell strong,
.import-history-type-cell strong,
.import-history-results-cell strong {
  display: block;
  overflow: hidden;
  color: var(--text-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-history-actions-cell {
  text-align: right;
  white-space: nowrap;
}

.import-history-resume {
  min-width: 5.2rem;
  justify-content: center;
}

@media (max-width: 1120px) {
  .import-history-table .import-history-col-import { width: 14%; }
  .import-history-table .import-history-col-type { width: 11%; }
  .import-history-table .import-history-col-file { width: 21%; }
  .import-history-table .import-history-col-user { width: 11%; }
  .import-history-table .import-history-col-results { width: 14%; }
  .import-history-table .import-history-col-status { width: 18%; }
  .import-history-table .import-history-col-actions { width: 11%; }

  .import-history-table th,
  .import-history-table td {
    padding-inline: 0.52rem;
    font-size: 0.84rem;
  }

  .import-history-user-hint {
    display: none;
  }
}

@media (max-width: 940px) {
  .import-history-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .import-history-table,
  .import-history-table tbody,
  .import-history-table tr,
  .import-history-table td {
    display: block;
    width: 100%;
  }

  .import-history-table colgroup,
  .import-history-table thead {
    display: none;
  }

  .import-history-table tbody {
    display: grid;
    gap: 0.8rem;
  }

  .import-history-table tr {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-solid);
  }

  .import-history-table td {
    display: grid;
    grid-template-columns: minmax(120px, 0.32fr) minmax(0, 0.68fr);
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.8rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }

  .import-history-table td:last-child {
    border-bottom: 0;
  }

  .import-history-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .import-history-table .empty-state {
    display: block;
  }

  .import-history-table .empty-state::before {
    content: none;
  }

  .import-history-actions-cell {
    text-align: left;
  }

  .import-history-filename,
  .import-history-table .table-secondary {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 560px) {
  .import-history-table td {
    grid-template-columns: 1fr;
    gap: 0.34rem;
  }

  .import-history-resume {
    width: 100%;
  }
}


/* Import validation completion and confirmation review */

.validation-ready-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 1rem 0;
  border-color: color-mix(in srgb, var(--success) 52%, transparent);
  background:
    linear-gradient(90deg, var(--success-soft), transparent 65%),
    var(--surface);
}

.validation-ready-panel h2,
.validation-ready-panel p {
  margin-bottom: 0.25rem;
}

.validation-ready-panel .button {
  flex: 0 0 auto;
  min-width: 240px;
}

.duplicate-selection-toolbar[hidden] {
  display: none !important;
}

.confirm-import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.3fr);
  gap: 1rem;
  align-items: start;
}

.confirm-import-main,
.confirm-import-sidebar {
  display: grid;
  gap: 1rem;
}

.confirm-import-metrics {
  margin: 1rem 0 0;
}

.confirm-check-list {
  margin-top: 1rem;
}

.confirm-acknowledgement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.1rem 0 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.confirm-acknowledgement input {
  width: auto;
  min-height: auto;
  margin: 0.15rem 0 0;
}

.confirm-import-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
  gap: 0.8rem;
  margin-top: 1rem;
}

.confirm-import-not-connected {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: var(--warning-soft);
}

.import-history-user-cell strong {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .validation-ready-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .validation-ready-panel .button {
    width: 100%;
    min-width: 0;
  }

  .confirm-import-layout {
    grid-template-columns: 1fr;
  }

  .confirm-import-actions {
    grid-template-columns: 1fr;
  }
}


/* v0.2.27 — separate Import Queue, completed Import History, and draft discard */
.import-queue-table .import-history-col-import { width: 12%; }
.import-queue-table .import-history-col-type { width: 10%; }
.import-queue-table .import-history-col-file { width: 22%; }
.import-queue-table .import-history-col-user { width: 13%; }
.import-queue-table .import-queue-col-step { width: 16%; }
.import-queue-table .import-queue-col-updated { width: 12%; }
.import-queue-table .import-queue-col-actions { width: 15%; }

.import-queue-updated-cell strong,
.import-queue-updated-cell small {
  display: block;
}

.import-queue-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
}

.import-queue-action-group .button,
.import-queue-action-group button {
  min-width: 0;
  white-space: nowrap;
}

.import-queue-discard {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
}

.import-discard-dialog {
  width: min(560px, calc(100vw - 2rem));
  padding: 0;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-strong);
}

.import-discard-dialog::backdrop {
  background: rgba(2, 10, 24, 0.72);
  backdrop-filter: blur(3px);
}

.import-discard-dialog-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.import-discard-dialog .dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.import-discard-dialog h2,
.import-discard-dialog p {
  margin-bottom: 0;
}

.import-discard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.import-discard-actions button {
  width: auto;
  min-width: 140px;
}

@media (max-width: 1120px) {
  .import-queue-action-group {
    align-items: stretch;
    flex-direction: column;
  }

  .import-queue-action-group .button,
  .import-queue-action-group button {
    width: 100%;
  }
}

@media (max-width: 940px) {
  .import-queue-action-group {
    align-items: stretch;
    flex-direction: row;
    justify-content: flex-start;
  }

  .import-queue-action-group .button,
  .import-queue-action-group button {
    width: auto;
  }
}

@media (max-width: 560px) {
  .import-queue-action-group,
  .import-discard-actions {
    flex-direction: column;
  }

  .import-queue-action-group .button,
  .import-queue-action-group button,
  .import-discard-actions button {
    width: 100%;
  }
}


/* v0.2.27.2 — compact duplicate dialogs with fixed actions */
.duplicate-merge-dialog {
  width: min(920px, calc(100vw - 1.5rem));
  height: min(760px, calc(100dvh - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow: hidden;
}

.duplicate-exclude-dialog {
  width: min(620px, calc(100vw - 1.5rem));
  height: min(520px, calc(100dvh - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow: hidden;
}

.duplicate-merge-dialog .duplicate-dialog-form,
.duplicate-exclude-dialog .duplicate-dialog-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  max-height: inherit;
  padding: 0;
  overflow: hidden;
}

.duplicate-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.9rem 1rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-solid);
}

.duplicate-dialog-header h2 {
  margin-bottom: 0.25rem;
}

.duplicate-dialog-header .subtle {
  margin-bottom: 0;
}

.duplicate-dialog-close {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
  color: var(--muted-strong);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 1rem;
  line-height: 1;
}

.duplicate-dialog-close:hover:not(:disabled) {
  color: var(--text-strong);
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: none;
}

.duplicate-dialog-body {
  min-height: 0;
  padding: 0.85rem 1rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.duplicate-dialog-body .duplicate-name-warning {
  margin-bottom: 0.8rem;
}

.duplicate-dialog-body .duplicate-survivor-options,
.duplicate-dialog-body .duplicate-exclude-options {
  margin-bottom: 0.8rem;
}

.duplicate-dialog-body .duplicate-merge-table-wrap {
  max-height: none;
  margin-bottom: 0.8rem;
}

.duplicate-dialog-footer {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 97%, transparent);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.14);
}

.duplicate-dialog-footer .message {
  margin: 0;
}

.duplicate-dialog-footer .duplicate-dialog-actions {
  margin: 0;
}

.duplicate-dialog-footer button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.82;
}

@media (max-width: 760px) {
  .duplicate-merge-dialog,
  .duplicate-exclude-dialog {
    width: calc(100vw - 0.75rem);
    height: calc(100dvh - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
  }

  .duplicate-dialog-header {
    flex-direction: row;
    padding: 0.75rem;
  }

  .duplicate-dialog-body {
    padding: 0.75rem;
  }

  .duplicate-dialog-footer {
    padding: 0.65rem 0.75rem;
  }

  .duplicate-dialog-footer .duplicate-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .duplicate-dialog-footer .duplicate-dialog-actions button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .duplicate-dialog-footer .duplicate-dialog-actions {
    grid-template-columns: 1fr;
  }
}


/* DroneHQ global semantic status system.
   Green = live/connected/active/healthy/complete
   Blue = informational/action
   Amber = warning/pending/partial/attention
   Red = failed/blocked/critical/disconnected
   Gray = unavailable/disabled/inactive/not configured */
.status-success,
.status-live,
.status-connected,
.status-healthy,
.status-complete {
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 42%, transparent) !important;
  background: var(--success-soft) !important;
}

.status-info,
.status-action {
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  background: var(--primary-soft) !important;
}

.status-warning,
.status-pending,
.status-partial,
.status-attention {
  color: var(--warning) !important;
  border-color: color-mix(in srgb, var(--warning) 42%, transparent) !important;
  background: var(--warning-soft) !important;
}

.status-danger,
.status-failed,
.status-blocked,
.status-critical,
.status-disconnected {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 42%, transparent) !important;
  background: var(--danger-soft) !important;
}

.status-neutral,
.status-unavailable,
.status-disabled,
.status-inactive,
.status-not-configured {
  color: var(--muted-strong) !important;
  border-color: var(--border) !important;
  background: var(--surface-soft) !important;
}

.status-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.status-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.status-legend-item .status-pill {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
}

.status-legend-item small {
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .status-legend {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .status-legend {
    grid-template-columns: 1fr;
  }
}


/* v0.2.39 live Crawler and Sync Agent connection status */
.crawler-message-window {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

.crawler-message-track {
  display: inline-block;
  min-width: max-content;
  padding-left: 100%;
  color: var(--text);
  animation: dronehq-crawler-scroll 14s linear infinite;
  will-change: transform;
}

.crawler-message-track.notice-information {
  color: #55b8ff;
}

.crawler-message-track.notice-success {
  color: var(--success);
}

.crawler-message-track.notice-warning {
  color: var(--warning);
}

.crawler-message-track.notice-danger {
  color: var(--danger);
}

.crawler-message-track.notice-general {
  color: var(--text);
}

@keyframes dronehq-crawler-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

#sync-agent-card[data-status="connected"] {
  border-color: color-mix(in srgb, var(--success) 52%, transparent);
  background: linear-gradient(135deg, var(--success-soft), var(--surface));
}

#sync-agent-card[data-status="connected"] strong {
  color: var(--success);
}

#sync-agent-card[data-status="attention"] strong {
  color: var(--warning);
}

@media (prefers-reduced-motion: reduce) {
  .crawler-message-track {
    padding-left: 0;
    animation: none;
  }
}


/* v0.2.39.1 status-language and crawler readability hotfix */
#sync-agent-card.status-connected,
#sync-agent-card[data-status="connected"] {
  border-color: color-mix(in srgb, var(--success) 62%, transparent) !important;
  background:
    linear-gradient(135deg, var(--success-soft), var(--surface)) !important;
}

#sync-agent-card.status-connected #sync-agent-status,
#sync-agent-card[data-status="connected"] #sync-agent-status {
  color: var(--success) !important;
}

#sync-agent-card.status-attention,
#sync-agent-card[data-status="attention"] {
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
}

#sync-agent-card.status-attention #sync-agent-status,
#sync-agent-card[data-status="attention"] #sync-agent-status {
  color: var(--warning) !important;
}

.crawler-message-window {
  position: relative;
  min-height: 1.5rem;
  overflow: hidden;
}

.crawler-message-track {
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-block;
  min-width: max-content;
  padding-left: 0 !important;
  transform: translateY(-50%);
  animation: none !important;
  white-space: nowrap;
}

.crawler-message-track.notice-information {
  color: #55b8ff !important;
}

.crawler-message-track.notice-success {
  color: var(--success) !important;
}

.crawler-message-track.notice-warning {
  color: var(--warning) !important;
}

.crawler-message-track.notice-danger {
  color: var(--danger) !important;
}

.crawler-message-track.notice-general {
  color: var(--text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .crawler-message-track {
    position: static;
    transform: none;
  }
}


/* v0.2.39 crawler readability and width correction */
.crawler-rail {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 0.65rem !important;
}

.crawler-message-window {
  width: 100%;
  min-width: 0;
  min-height: 1.75rem;
}

.crawler-message-track {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.crawler-message-track.notice-information,
.crawler-message-track.notice-general {
  color: var(--text-strong) !important;
}

.crawler-message-track.notice-success {
  color: var(--success) !important;
}

.crawler-message-track.notice-warning {
  color: var(--warning) !important;
}

.crawler-message-track.notice-danger {
  color: var(--danger) !important;
}

@media (max-width: 980px) {
  .crawler-rail {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .crawler-meta {
    display: none;
  }
}


/* v0.2.39.2 Crawler middle notice lane
   Keeps the System Status card compact while moving live notices into
   the center/right lane of the top status row.
*/
.crawler-strip {
  display: grid !important;
  grid-template-columns: auto minmax(18rem, 1fr) auto !important;
  align-items: center !important;
  gap: 0.9rem !important;
  width: 100% !important;
  min-height: var(--crawler-height) !important;
}

.crawler-strip .crawler-rail {
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.crawler-strip .crawler-message-window {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 1.75rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.crawler-strip .crawler-message-track {
  max-width: none !important;
  white-space: nowrap !important;
}

.crawler-strip .crawler-meta {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  .crawler-strip {
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
  }

  .crawler-strip .crawler-rail {
    max-width: none !important;
    width: 100% !important;
  }

  .crawler-strip .crawler-meta {
    display: none !important;
  }
}


/* v0.2.39.3 moving middle Crawler notice
   The notice crawls only inside the middle lane.
   It no longer moves back into the compact System Status card.
*/
.crawler-strip .crawler-message-window {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.crawler-strip .crawler-message-track {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  display: inline-block !important;
  max-width: none !important;
  white-space: nowrap !important;
  animation: none !important;
  will-change: transform !important;
}


/* v0.2.39.9 final status crawler layout */
.crawler-strip {
  display: grid !important;
  grid-template-columns: 215px minmax(0, 1fr) 285px !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: var(--crawler-height) !important;
  padding: 0 1.5rem 0 0 !important;
  box-sizing: border-box !important;
  background: linear-gradient(
    90deg,
    rgba(13, 47, 82, 0.94),
    rgba(10, 31, 66, 0.92)
  ) !important;
  border-top: 1px solid rgba(76, 145, 205, 0.18) !important;
  border-bottom: 1px solid rgba(76, 145, 205, 0.28) !important;
}

.crawler-strip .crawler-rail {
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  justify-content: start !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0 1rem 0 1.15rem !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 0 !important;
  background: rgba(16, 61, 100, 0.36) !important;
}

.crawler-strip .crawler-brand,
.crawler-strip .crawler-action {
  white-space: nowrap !important;
}

.crawler-strip .crawler-message-window {
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

.crawler-strip .crawler-message-track {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  display: inline-block !important;
  max-width: none !important;
  white-space: nowrap !important;
  animation: none !important;
  color: var(--success) !important;
  font-weight: 800 !important;
  will-change: transform !important;
}

.crawler-strip .crawler-meta {
  justify-self: end !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.85rem !important;
  width: 100% !important;
  padding: 0 0.75rem 0 1rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  background: rgba(9, 24, 54, 0.18) !important;
}

@media (max-width: 980px) {
  .crawler-strip {
    grid-template-columns: 205px minmax(0, 1fr) !important;
    padding-right: 0.85rem !important;
  }

  .crawler-strip .crawler-meta {
    display: none !important;
  }
}


/* v0.2.39.11 full-width crawler overlay lane
   Lets the notice travel across the full status bar without turning
   the crawler into a second row.
*/
.crawler-strip {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 215px minmax(0, 1fr) 285px !important;
  align-items: center !important;
  min-height: var(--crawler-height) !important;
}

.crawler-strip .crawler-rail {
  position: relative !important;
  z-index: 4 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  background: rgba(16, 61, 100, 0.48) !important;
}

.crawler-strip .crawler-meta {
  position: relative !important;
  z-index: 4 !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  background: rgba(9, 24, 54, 0.34) !important;
  padding-right: 1rem !important;
}

.crawler-strip .crawler-message-window {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  box-sizing: border-box !important;

  /* Keep text from sitting directly under the left and right controls. */
  padding-left: 215px !important;
  padding-right: 285px !important;
}

.crawler-strip .crawler-message-track {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  display: inline-block !important;
  max-width: none !important;
  white-space: nowrap !important;
  color: var(--success) !important;
  font-weight: 800 !important;
  animation: none !important;
  will-change: transform !important;
}

/* v0.2.39.12 crawler shield cleanup
   Prevents moving green notice text from showing behind System Status
   and the Updated/API area.
*/
.crawler-strip::before,
.crawler-strip::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: rgba(12, 39, 72, 0.98) !important;
}

.crawler-strip::before {
  left: 0 !important;
  width: 215px !important;
}

.crawler-strip::after {
  right: 0 !important;
  width: 285px !important;
}

.crawler-strip .crawler-rail,
.crawler-strip .crawler-meta {
  z-index: 5 !important;
  background: rgba(12, 39, 72, 0.98) !important;
}

.crawler-strip .crawler-message-window {
  z-index: 2 !important;
}


/* Clean CSS dropdown caret used in the shell header. */
.shell-caret {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.85;
}


/* Crawler panel status lights. Avoids Unicode icon corruption in the shell UI. */
.crawler-status-light {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  min-width: 0.72rem;
  border-radius: 999px;
  padding: 0;
  font-size: 0;
  line-height: 1;
  flex: 0 0 auto;
}

.crawler-summary-card > .crawler-status-light {
  margin-bottom: 0.85rem;
}

.crawler-status-light-muted {
  background: rgba(148, 163, 184, 0.55);
  border: 1px solid rgba(203, 213, 225, 0.35);
  box-shadow: none;
}

.crawler-status-light-success {
  background: #55f29a;
  border: 1px solid rgba(134, 239, 172, 0.8);
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.16),
    0 0 12px rgba(34, 197, 94, 0.55);
}

.crawler-status-light-large {
  width: 0.78rem;
  height: 0.78rem;
  min-width: 0.78rem;
}

.crawler-empty-alert > .crawler-status-light {
  margin-top: 0.45rem;
}


/* Final crawler status-dot polish. */
.crawler-summary-card > .crawler-status-light {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  min-width: 0.55rem;
  margin: 0 0 1.15rem 0;
  border-radius: 999px;
}

.crawler-status-light-muted {
  background: rgba(148, 163, 184, 0.72);
  border: 1px solid rgba(203, 213, 225, 0.5);
  box-shadow: none;
}

.crawler-status-light-success {
  background: #55f29a;
  border: 1px solid rgba(134, 239, 172, 0.85);
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.14),
    0 0 10px rgba(34, 197, 94, 0.42);
}

.crawler-empty-alert > .crawler-status-light {
  width: 0.55rem;
  height: 0.55rem;
  min-width: 0.55rem;
  margin-top: 0.55rem;
  border-radius: 999px;
}


/* Force Recent Alerts status indicator to render as a light, not a badge box. */
.crawler-empty-alert > .crawler-status-light.crawler-status-light-success,
.crawler-empty-alert > span.crawler-status-light.crawler-status-light-success {
  display: inline-block !important;
  width: 0.58rem !important;
  height: 0.58rem !important;
  min-width: 0.58rem !important;
  max-width: 0.58rem !important;
  padding: 0 !important;
  margin: 0.62rem 0.35rem 0 0 !important;
  border-radius: 999px !important;
  background: #55f29a !important;
  border: 1px solid rgba(134, 239, 172, 0.85) !important;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.14),
    0 0 10px rgba(34, 197, 94, 0.42) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}


/* Make the Recent Alerts indicator read as a small LED status light. */
.crawler-empty-alert {
  align-items: flex-start;
}

.crawler-empty-alert > .crawler-status-light.crawler-status-light-success {
  width: 0.48rem !important;
  height: 0.48rem !important;
  min-width: 0.48rem !important;
  max-width: 0.48rem !important;
  margin: 0.38rem 0.55rem 0 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #55f29a !important;
  border: 1px solid rgba(134, 239, 172, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.16),
    0 0 7px rgba(34, 197, 94, 0.5) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}


/* Recent Alerts title LED. This replaces the separate icon/badge element. */
.crawler-empty-alert {
  align-items: flex-start;
}

.crawler-empty-alert > span.crawler-status-light {
  display: none !important;
}

.crawler-alert-title-led {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}

.crawler-alert-title-led::before {
  content: "";
  display: inline-block;
  width: 0.46rem;
  height: 0.46rem;
  min-width: 0.46rem;
  border-radius: 999px;
  background: #55f29a;
  border: 1px solid rgba(134, 239, 172, 0.9);
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.14),
    0 0 7px rgba(34, 197, 94, 0.45);
}

/* Keep the account dropdown above the crawler status row. */
.shell-profile-wrap {
  position: relative !important;
  z-index: 300 !important;
}

.shell-profile-wrap .profile-popover {
  z-index: 301 !important;
}

/* Account dropdown opens below the crawler row instead of behind it. */
.app-shell-header,
.shell-topbar {
  overflow: visible !important;
}

.shell-profile-wrap {
  position: relative !important;
  z-index: 2000 !important;
}

.shell-profile-wrap > .profile-popover {
  top: calc(100% + 3.25rem) !important;
  right: 0 !important;
  z-index: 2001 !important;
  width: 205px !important;
  min-width: 205px !important;
  max-width: 205px !important;
}

.shell-profile-wrap > .profile-popover a,
.shell-profile-wrap > .profile-popover button {
  width: 100% !important;
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   Final crawler button-border protection.
   Let the live notice pass behind the left controls, but never draw over
   the View details button border.
   -------------------------------------------------------------------------- */

.crawler-strip .crawler-rail {
  position: relative !important;
  z-index: 8 !important;
  background: rgba(12, 39, 72, 0.98) !important;
}

.crawler-strip .crawler-brand,
.crawler-strip .crawler-action {
  position: relative !important;
  z-index: 9 !important;
}

.crawler-strip .crawler-action {
  background: rgba(13, 49, 86, 0.98) !important;
  border-color: rgba(74, 163, 255, 0.58) !important;
  box-shadow: 0 0 0 1px rgba(74, 163, 255, 0.08) !important;
}

.crawler-strip .crawler-message-window {
  z-index: 2 !important;
}

/* Keep the original crawler overlay lane width while protecting the button border. */
.crawler-strip {
  grid-template-columns: 215px minmax(0, 1fr) 285px !important;
}

.crawler-strip::before {
  width: 215px !important;
}

.crawler-strip .crawler-message-window {
  padding-left: 215px !important;
  padding-right: 285px !important;
}

/* --------------------------------------------------------------------------
   Header dropdown / crawler stacking fix.
   Keep top navigation dropdowns above the live crawler strip without moving
   the crawler or changing crawler animation behavior.
   -------------------------------------------------------------------------- */

.app-shell-header .shell-topbar {
  position: relative !important;
  z-index: 220 !important;
  overflow: visible !important;
}

.app-shell-header .shell-navigation,
.app-shell-header .shell-menu {
  position: relative !important;
  z-index: 230 !important;
  overflow: visible !important;
}

.app-shell-header .shell-dropdown,
.app-shell-header .shell-mega-menu,
.app-shell-header .shell-popover {
  z-index: 300 !important;
}

.app-shell-header .crawler-strip {
  position: relative !important;
  z-index: 120 !important;
}

/* --------------------------------------------------------------------------
   System Overview command-center layout.
   Move owner status cards above Platform Accounts using CSS only.
   No template, shell, crawler, or JavaScript changes.
   -------------------------------------------------------------------------- */

.admin-overview-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;
}

.admin-overview-sidebar {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: stretch !important;
}

.admin-overview-sidebar .admin-side-card {
  min-width: 0 !important;
  height: 100% !important;
}

.admin-organizations-card {
  grid-row: 2 !important;
  min-width: 0 !important;
}

@media (max-width: 1180px) {
  .admin-overview-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .admin-overview-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   System Overview compact command-center cards.
   Keep all owner status blocks readable while reducing vertical scroll.
   -------------------------------------------------------------------------- */

.admin-overview-sidebar {
  gap: 0.8rem !important;
}

.admin-overview-sidebar .admin-side-card {
  padding: 0 !important;
  overflow: hidden !important;
}

.admin-overview-sidebar .admin-card-heading {
  padding: 0.72rem 0.9rem !important;
  margin: 0 !important;
  min-height: auto !important;
}

.admin-overview-sidebar .admin-card-heading h2 {
  font-size: 0.98rem !important;
  line-height: 1.15 !important;
}

.admin-overview-sidebar .admin-health-list,
.admin-overview-sidebar .admin-support-list,
.admin-overview-sidebar .admin-empty-panel {
  padding: 0.72rem 0.9rem !important;
}

.admin-overview-sidebar .admin-health-list {
  gap: 0.42rem !important;
}

.admin-overview-sidebar .admin-health-list li {
  min-height: 22px !important;
  gap: 0.45rem !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
}

.admin-overview-sidebar .admin-health-list strong {
  font-size: 0.72rem !important;
}

.admin-overview-sidebar .admin-empty-panel {
  min-height: 120px !important;
  justify-content: center !important;
}

.admin-overview-sidebar .admin-empty-panel strong {
  font-size: 0.95rem !important;
}

.admin-overview-sidebar .admin-empty-panel span {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}
/* --------------------------------------------------------------------------
   Header profile photo text protection.
   When the account avatar uses an uploaded image, hide fallback initials that
   older shell logic may write into the same circle.
   -------------------------------------------------------------------------- */

.shell-avatar.shell-avatar-has-image,
[data-shell-avatar].shell-avatar-has-image {
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* Keep the existing crawler box/window in place. */
.crawler-message-window {
  overflow: hidden !important;
}

/* Move only the message text track. */
.crawler-message,
.crawler-message-track {
  max-width: none !important;
  white-space: nowrap !important;
  will-change: transform;
  animation: dronehqCrawlerMessageTravel var(--crawler-message-duration) linear infinite !important;
}

@keyframes dronehqCrawlerMessageTravel {
  from {
    transform: translate3d(var(--crawler-message-start), 0, 0);
  }

  to {
    transform: translate3d(calc(-100% - var(--crawler-message-finish)), 0, 0);
  }
}

/* DroneHQ Crawler JS travel controls
   These settings are read by app/static/shell.js.
   They move only the message travel path, not the crawler box/window. */
.crawler-strip {
  /*
    START:
    Bigger = message starts farther right.
    Smaller = message starts closer to the visible crawler lane.
  */
  --crawler-message-start-extra: 420px;

  /*
    FINISH:
    Bigger = message travels farther left before restarting.
    Smaller = message restarts sooner.
  */
  --crawler-message-finish-extra: 180px;

  /*
    SPEED:
    Pixels per second. Bigger = faster. Smaller = slower.
  */
  --crawler-message-speed: 72;
}

/* DroneHQ Crawler visible finish pass
   Does not move the crawler box/window.
   Lets the message travel behind System Status / View details before resetting. */
.crawler-strip {
  overflow: hidden !important;
}

.crawler-strip .crawler-rail,
.crawler-strip .crawler-meta {
  position: relative !important;
  z-index: 4 !important;
}

.crawler-strip .crawler-message-window {
  overflow: visible !important;
  pointer-events: none !important;
}

.crawler-strip .crawler-message-track {
  pointer-events: none !important;
  z-index: 2 !important;
}

/* DRONEHQ_LIGHT_THEME_VISIBILITY_START */
/*
  Light-mode-only visibility polish.
  This block intentionally scopes every rule to html[data-theme="light"]
  so the default/dark DroneHQ view remains unchanged.
*/
html[data-theme="light"] {
  --bg: #eef3f9;
  --bg-elevated: #e6edf7;
  --surface: rgba(255, 255, 255, 0.98);
  --surface-solid: #ffffff;
  --surface-soft: #edf4fb;
  --surface-hover: #dceaf8;
  --header: rgba(255, 255, 255, 0.98);
  --border: rgba(42, 71, 105, 0.24);
  --border-strong: rgba(18, 94, 166, 0.45);
  --text: #1c3049;
  --text-strong: #0d1f35;
  --muted: #50647d;
  --muted-strong: #344a64;
  --focus-gap: #ffffff;
}

/* Shared shell/header */
html[data-theme="light"] .shell-topbar,
html[data-theme="light"] .crawler-strip,
html[data-theme="light"] .crawler-rail {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #1c3049 !important;
  border-color: rgba(42, 71, 105, 0.24) !important;
}

html[data-theme="light"] .crawler-message-window,
html[data-theme="light"] .crawler-meta {
  background: #f5f8fc !important;
  color: #1c3049 !important;
  border-color: rgba(42, 71, 105, 0.18) !important;
}

html[data-theme="light"] .shell-brand,
html[data-theme="light"] .shell-brand-copy strong,
html[data-theme="light"] .crawler-brand,
html[data-theme="light"] .crawler-brand strong,
html[data-theme="light"] .shell-profile-copy strong {
  color: #0d1f35 !important;
}

html[data-theme="light"] .shell-brand-copy small,
html[data-theme="light"] .shell-profile-copy small,
html[data-theme="light"] .shell-utility-label,
html[data-theme="light"] .crawler-message,
html[data-theme="light"] .crawler-meta {
  color: #50647d !important;
}

html[data-theme="light"] .shell-navigation > a,
html[data-theme="light"] .shell-menu-button,
html[data-theme="light"] .shell-utility,
html[data-theme="light"] .shell-icon-button,
html[data-theme="light"] .shell-profile-button,
html[data-theme="light"] .shell-mobile-toggle,
html[data-theme="light"] .shell-theme-control {
  color: #243b57 !important;
  background: #ffffff !important;
  border-color: rgba(42, 71, 105, 0.26) !important;
  box-shadow: 0 8px 22px rgba(30, 58, 92, 0.08) !important;
}

html[data-theme="light"] .shell-navigation > a:hover,
html[data-theme="light"] .shell-navigation > a:focus-visible,
html[data-theme="light"] .shell-navigation > a.active,
html[data-theme="light"] .shell-menu-button:hover,
html[data-theme="light"] .shell-menu-button:focus-visible,
html[data-theme="light"] .shell-menu.open .shell-menu-button,
html[data-theme="light"] .shell-utility:hover,
html[data-theme="light"] .shell-icon-button:hover,
html[data-theme="light"] .shell-profile-button:hover,
html[data-theme="light"] .shell-mobile-toggle:hover {
  color: #0d1f35 !important;
  background: #e7f0fb !important;
  border-color: rgba(18, 94, 166, 0.42) !important;
}

html[data-theme="light"] .shell-navigation > a.active,
html[data-theme="light"] .shell-menu-button.active {
  color: var(--primary) !important;
}

html[data-theme="light"] .shell-dropdown,
html[data-theme="light"] .shell-popover,
html[data-theme="light"] .location-dialog,
html[data-theme="light"] .crawler-panel {
  color: #1c3049 !important;
  background: #ffffff !important;
  border-color: rgba(42, 71, 105, 0.26) !important;
  box-shadow: 0 18px 48px rgba(30, 58, 92, 0.16) !important;
}

html[data-theme="light"] .shell-dropdown a,
html[data-theme="light"] .shell-mega-link,
html[data-theme="light"] .profile-popover a,
html[data-theme="light"] .shell-sign-out,
html[data-theme="light"] .notification-footer,
html[data-theme="light"] .shell-text-button {
  color: #243b57 !important;
  background: transparent !important;
}

html[data-theme="light"] .shell-dropdown a:hover,
html[data-theme="light"] .shell-dropdown a:focus-visible,
html[data-theme="light"] .shell-mega-link:hover,
html[data-theme="light"] .shell-mega-link:focus-visible,
html[data-theme="light"] .profile-popover a:hover,
html[data-theme="light"] .profile-popover a:focus-visible,
html[data-theme="light"] .shell-sign-out:hover,
html[data-theme="light"] .shell-sign-out:focus-visible,
html[data-theme="light"] .notification-footer:hover,
html[data-theme="light"] .shell-text-button:hover {
  color: #0d1f35 !important;
  background: #e7f0fb !important;
}

html[data-theme="light"] .shell-admin-navigation p,
html[data-theme="light"] .shell-client-navigation p,
html[data-theme="light"] .shell-mega-group h2,
html[data-theme="light"] .shell-popover-heading h2,
html[data-theme="light"] .crawler-panel h2,
html[data-theme="light"] .crawler-panel h3 {
  color: #0d1f35 !important;
}

html[data-theme="light"] .shell-mega-link small,
html[data-theme="light"] .shell-notification-item p,
html[data-theme="light"] .crawler-summary-card small,
html[data-theme="light"] .crawler-empty-alert p {
  color: #50647d !important;
}

/* Buttons, fields, dropdowns */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: #10213a !important;
  background: #ffffff !important;
  border-color: rgba(42, 71, 105, 0.32) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #6b7f98 !important;
  opacity: 1 !important;
}

html[data-theme="light"] select option {
  color: #10213a !important;
  background-color: #ffffff !important;
}

html[data-theme="light"] button.secondary,
html[data-theme="light"] .button-link.secondary,
html[data-theme="light"] .crawler-action,
html[data-theme="light"] .dialog-close {
  color: #10213a !important;
  background: #edf4fb !important;
  border: 1px solid rgba(42, 71, 105, 0.32) !important;
  box-shadow: none !important;
}

html[data-theme="light"] button.secondary:hover:not(:disabled),
html[data-theme="light"] .button-link.secondary:hover,
html[data-theme="light"] .crawler-action:hover,
html[data-theme="light"] .dialog-close:hover {
  color: #0d1f35 !important;
  background: #dceaf8 !important;
  border-color: rgba(18, 94, 166, 0.48) !important;
}

/* Cards, notes, tables */
html[data-theme="light"] .card,
html[data-theme="light"] .preview-card,
html[data-theme="light"] .preference-note,
html[data-theme="light"] .format-preview,
html[data-theme="light"] .location-state,
html[data-theme="light"] .location-current-card,
html[data-theme="light"] .admin-metric-card,
html[data-theme="light"] .admin-organizations-card,
html[data-theme="light"] .admin-scope-notice,
html[data-theme="light"] .admin-data-note {
  color: #1c3049 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(42, 71, 105, 0.24) !important;
}

html[data-theme="light"] .data-table,
html[data-theme="light"] .admin-organizations-table,
html[data-theme="light"] .admin-accounts-table,
html[data-theme="light"] .admin-billing-table,
html[data-theme="light"] .admin-beta-contact-table,
html[data-theme="light"] .admin-beta-lifecycle-table {
  color: #1c3049 !important;
  background: #ffffff !important;
}

html[data-theme="light"] .data-table th,
html[data-theme="light"] .admin-organizations-table th,
html[data-theme="light"] .admin-accounts-table th,
html[data-theme="light"] .admin-billing-table th,
html[data-theme="light"] .admin-beta-contact-table th,
html[data-theme="light"] .admin-beta-lifecycle-table th {
  color: #344a64 !important;
  background: #e8f0f8 !important;
  border-color: rgba(42, 71, 105, 0.24) !important;
}

html[data-theme="light"] .data-table td,
html[data-theme="light"] .admin-organizations-table td,
html[data-theme="light"] .admin-accounts-table td,
html[data-theme="light"] .admin-billing-table td,
html[data-theme="light"] .admin-beta-contact-table td,
html[data-theme="light"] .admin-beta-lifecycle-table td {
  color: #1c3049 !important;
  border-color: rgba(42, 71, 105, 0.18) !important;
}

html[data-theme="light"] .data-table tbody tr:hover td,
html[data-theme="light"] .admin-organizations-table tbody tr:hover td,
html[data-theme="light"] .admin-accounts-table tbody tr:hover td {
  background: #f0f6fd !important;
}

html[data-theme="light"] .subtle,
html[data-theme="light"] .small,
html[data-theme="light"] .field-help,
html[data-theme="light"] .table-secondary,
html[data-theme="light"] .admin-empty-cell,
html[data-theme="light"] .admin-empty-state span {
  color: #50647d !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] strong,
html[data-theme="light"] .member-name,
html[data-theme="light"] .quick-action strong,
html[data-theme="light"] .admin-organization-link,
html[data-theme="light"] .admin-contact-cell strong {
  color: #0d1f35;
}

/* Admin pages with existing dark inline CSS */
html[data-theme="light"] .admin-accounts-shell,
html[data-theme="light"] .admin-accounts-tabs,
html[data-theme="light"] .admin-accounts-table-wrap,
html[data-theme="light"] .admin-billing-card,
html[data-theme="light"] .admin-billing-note,
html[data-theme="light"] .admin-billing-placeholder-card,
html[data-theme="light"] .admin-billing-plan-card,
html[data-theme="light"] .admin-billing-table-wrap,
html[data-theme="light"] .admin-billing-workspace-tabs,
html[data-theme="light"] .admin-beta-contact-card,
html[data-theme="light"] .admin-beta-lifecycle-card,
html[data-theme="light"] .admin-beta-email-composer,
html[data-theme="light"] .admin-beta-contact-table-wrap,
html[data-theme="light"] .admin-beta-lifecycle-table-wrap {
  color: #1c3049 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(42, 71, 105, 0.24) !important;
}

html[data-theme="light"] .admin-accounts-tab,
html[data-theme="light"] .admin-billing-workspace-tab {
  color: #243b57 !important;
  background: #edf4fb !important;
  border-color: rgba(42, 71, 105, 0.28) !important;
}

html[data-theme="light"] .admin-accounts-tab.active,
html[data-theme="light"] .admin-billing-workspace-tab.active {
  color: #ffffff !important;
  background: var(--primary-strong) !important;
  border-color: var(--primary-strong) !important;
}

html[data-theme="light"] .admin-billing-card h3,
html[data-theme="light"] .admin-billing-card strong,
html[data-theme="light"] .admin-billing-plan-card h3,
html[data-theme="light"] .admin-billing-plan-price,
html[data-theme="light"] .admin-beta-contact-heading h2,
html[data-theme="light"] .admin-beta-lifecycle-heading h2 {
  color: #0d1f35 !important;
}

html[data-theme="light"] .admin-billing-card small,
html[data-theme="light"] .admin-billing-plan-description,
html[data-theme="light"] .admin-beta-contact-heading p,
html[data-theme="light"] .admin-beta-lifecycle-heading p,
html[data-theme="light"] .admin-beta-email-side-note {
  color: #50647d !important;
}

html[data-theme="light"] .admin-beta-contact-field input,
html[data-theme="light"] .admin-beta-email-field input,
html[data-theme="light"] .admin-beta-email-field textarea,
html[data-theme="light"] .admin-beta-email-field select,
html[data-theme="light"] .admin-beta-date-input {
  color: #10213a !important;
  background: #ffffff !important;
  border-color: rgba(42, 71, 105, 0.32) !important;
}

/* Keep status colors meaningful while improving contrast */
html[data-theme="light"] .status-pill.status-success,
html[data-theme="light"] .admin-status-pill.green {
  color: #066537 !important;
  background: rgba(8, 122, 66, 0.12) !important;
  border-color: rgba(8, 122, 66, 0.36) !important;
}

html[data-theme="light"] .status-pill.status-warning,
html[data-theme="light"] .admin-status-pill.yellow {
  color: #873d00 !important;
  background: rgba(154, 89, 0, 0.12) !important;
  border-color: rgba(154, 89, 0, 0.36) !important;
}

html[data-theme="light"] .status-pill.status-danger,
html[data-theme="light"] .admin-status-pill.red {
  color: #921b30 !important;
  background: rgba(180, 35, 59, 0.10) !important;
  border-color: rgba(180, 35, 59, 0.34) !important;
}

html[data-theme="light"] .status-pill.status-info {
  color: #075e99 !important;
  background: rgba(9, 111, 181, 0.12) !important;
  border-color: rgba(9, 111, 181, 0.36) !important;
}

html[data-theme="light"] .status-pill.status-neutral,
html[data-theme="light"] .admin-status-pill.gray {
  color: #40546d !important;
  background: #eef3f8 !important;
  border-color: rgba(42, 71, 105, 0.28) !important;
}
/* DRONEHQ_LIGHT_THEME_VISIBILITY_END */

/* DRONEHQ_HEADER_BRAND_ONLY_START */
/*
  Header brand cleanup.
  Removes the visual need for the small "Online" subtitle by making the
  main DroneHQ wordmark slightly stronger.

  Intentionally does not target:
  - .shell-utility
  - .shell-location
  - .shell-utility-label
  - data-location-label
*/
.shell-brand-copy strong {
  font-size: clamp(1.14rem, 1.15vw, 1.32rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.005em !important;
}

.shell-brand-copy {
  line-height: 1 !important;
}

.shell-brand {
  gap: 0.62rem !important;
}
/* DRONEHQ_HEADER_BRAND_ONLY_END */

/* DroneHQ v0.2.39 branding cleanup - login screen */
.login-logo {
  width: 132px;
  height: 132px;
  display: block;
  margin: 0 0 1.35rem;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-soft);
}

.auth-card-heading-centered {
  justify-content: center;
  text-align: center;
  margin-bottom: 1.25rem;
}

.auth-card-heading-centered h2 {
  width: 100%;
}

.tagline-secondary {
  margin-top: 0.15rem;
}

.auth-footer {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 720;
  letter-spacing: 0.02em;
}


@media (max-width: 560px) {
  .login-logo {
    width: 96px;
    height: 96px;
  }
}

/* DRONEHQ_DASHBOARD_PINNED_PAGES_START */
/*
  Dashboard visual cleanup and database-backed pinned-pages foundation.

  Scope:
  - Dashboard layout and Pinned Pages UI only
  - no authentication, organization loading, API health, Sync Agent, or team-count logic changes
*/

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.285fr);
  align-items: center;
  gap: 1rem;
}

.dashboard-hero .hero-copy {
  grid-column: 1;
}

.dashboard-hero .dashboard-context {
  grid-column: 2;
  width: 100%;
  min-height: 92px;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.dashboard-hero .dashboard-context .status-pill {
  width: 100%;
  justify-content: center;
}

.dashboard-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.dashboard-summary-grid .metric {
  min-height: 92px;
  padding: 0.9rem 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dashboard-summary-grid .metric span {
  margin: 0 0 0.28rem;
}

.dashboard-summary-grid .metric strong {
  font-size: 1.04rem;
  line-height: 1.2;
}

.dashboard-summary-grid .metric small {
  max-width: 290px;
  margin-top: 0.2rem;
  line-height: 1.35;
}

.dashboard-pins-grid {
  grid-template-columns: 1fr !important;
  gap: 0;
}

.dashboard-pins-card {
  padding: 1.05rem 1.25rem 1.1rem;
  align-self: start;
}

.dashboard-pins-heading {
  margin-bottom: 0.62rem;
}

.dashboard-pins-heading h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.dashboard-pins-workspace {
  display: grid;
  gap: 0.65rem;
}

.dashboard-pinned-pages {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-soft) 62%, transparent);
}

.dashboard-pin-item {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  overflow: hidden;
}

.dashboard-pin {
  width: auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.72rem;
  border: 0;
  color: var(--muted-strong);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 680;
  line-height: 1.2;
}

.dashboard-pin:hover,
.dashboard-pin:focus-visible {
  color: var(--text-strong);
  background: var(--surface-soft);
}

.dashboard-pin-remove {
  width: auto;
  min-width: 32px;
  min-height: 36px;
  padding: 0 0.58rem;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 700;
}

.dashboard-pin-remove:hover,
.dashboard-pin-remove:focus-visible {
  color: var(--danger);
  background: var(--danger-soft);
  transform: none;
}

.dashboard-pin-controls {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
}

.dashboard-pin-controls select {
  width: min(260px, 100%);
  min-height: 36px;
  margin: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.84rem;
}

.dashboard-pin-control-button {
  width: auto;
  min-height: 36px;
  padding: 0.46rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 680;
}

.dashboard-pin-message {
  min-height: 1.15rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.dashboard-pin-message.error {
  color: var(--danger);
}

.dashboard-pin-message:empty {
  display: none;
}

.dashboard-pin-empty {
  margin: 0;
  padding: 0.45rem 0.62rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.dashboard-pins-card .message:empty {
  display: none;
}

@media (max-width: 1100px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-hero .hero-copy,
  .dashboard-hero .dashboard-context {
    grid-column: auto;
  }

  .dashboard-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dashboard-summary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-pinned-pages,
  .dashboard-pin-controls {
    width: 100%;
    align-items: stretch;
  }

  .dashboard-pin-item,
  .dashboard-pin,
  .dashboard-pin-controls select,
  .dashboard-pin-control-button {
    width: 100%;
  }

  .dashboard-pin-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
/* DRONEHQ_DASHBOARD_PINNED_PAGES_END */

/* DroneHQ v0.2.39 — Developer Tools compact overview */
.developer-command-center {
  display: grid;
  gap: 1rem;
}

.developer-command-heading {
  margin-bottom: 0;
}

.developer-status-strip,
.developer-registry-strip {
  display: grid;
  gap: 0.65rem;
}

.developer-status-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.developer-status-tile,
.developer-registry-strip > div,
.developer-note-grid > div {
  min-width: 0;
  padding: 0.82rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.developer-status-tile {
  display: grid;
  gap: 0.28rem;
  align-content: center;
  min-height: 78px;
}

.developer-status-tile span,
.developer-registry-strip span,
.developer-note-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.developer-status-tile strong {
  color: var(--text-strong);
  font-size: 0.92rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.developer-status-tile code {
  color: var(--text-strong);
  font-size: 0.82rem;
}

.developer-registry-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.developer-registry-strip > div {
  display: grid;
  justify-items: center;
  text-align: center;
}

.developer-registry-strip strong {
  color: var(--text-strong);
  font-size: 1.35rem;
  line-height: 1;
}

.developer-registry-strip span {
  margin-top: 0.28rem;
}

.developer-overview-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.developer-overview-action {
  width: 100%;
  min-height: 82px;
  padding: 0.82rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface-soft);
  box-shadow: none;
  text-align: left;
}

.developer-overview-action:hover,
.developer-overview-action:focus-visible {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  filter: none;
  transform: none;
}

.developer-overview-action span,
.developer-overview-action small {
  display: block;
}

.developer-overview-action span {
  color: var(--text-strong);
  font-weight: 760;
}

.developer-overview-action small {
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.developer-cleanup-notes {
  margin-top: var(--page-gap);
}

.developer-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.developer-note-grid strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-strong);
}

@media (max-width: 1180px) {
  .developer-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-registry-strip,
  .developer-overview-actions,
  .developer-note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .developer-status-strip,
  .developer-registry-strip,
  .developer-overview-actions,
  .developer-note-grid {
    grid-template-columns: 1fr;
  }
}

/* DroneHQ v0.2.39 — Developer Tools Overview v2 */
.developer-overview-action-planned {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 70%, transparent), transparent),
    var(--surface-soft);
}

.developer-overview-action em {
  display: inline-flex;
  width: max-content;
  margin-top: 0.5rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  border-radius: 999px;
  color: var(--warning);
  background: var(--warning-soft);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.developer-registry-strip [data-dev-help-coverage-summary] {
  color: var(--primary);
}


/* Developer Tools Help Registry cleanup */
.developer-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.developer-search-compact {
  min-width: min(24rem, 100%);
}

.developer-help-explainer {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.developer-help-explainer p {
  margin: 0.35rem 0 0;
}

.developer-help-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.developer-help-summary > div {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.developer-help-summary strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
}

.developer-help-summary span {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.developer-help-row-missing td {
  color: var(--warning-text, var(--text-color));
}

.developer-help-row-placeholder td:last-child {
  color: var(--warning-text, var(--text-color));
}

@media (max-width: 900px) {
  .developer-help-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Developer Tools help/feature cleanup */
.developer-panel-heading-compact {
  align-items: flex-start;
  gap: 1rem;
}

.developer-help-registry-card,
.developer-feature-state-card {
  overflow: hidden;
}

.developer-explain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.developer-explain-grid-compact {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.developer-explain-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  padding: 0.95rem 1rem;
}

.developer-explain-card strong {
  display: block;
  margin-bottom: 0.35rem;
}

.developer-explain-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.developer-feature-list-compact {
  margin-top: 1rem;
}

.developer-feature-list-compact .developer-feature-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1rem;
}

.developer-feature-list-compact .developer-feature-item p {
  margin-bottom: 0;
  max-width: 72rem;
}

@media (max-width: 900px) {
  .developer-explain-grid {
    grid-template-columns: 1fr;
  }

  .developer-feature-list-compact .developer-feature-item {
    grid-template-columns: 1fr;
  }
}

/* DRONEHQ_ARCHITECTURE_REGISTRY_CSS_START */
.developer-architecture-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.developer-architecture-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
}

.developer-architecture-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.developer-architecture-card h3,
.developer-architecture-section h3 {
  margin-bottom: 0.35rem;
}

.developer-architecture-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
}

.developer-architecture-detail-view {
  min-height: min(780px, calc(100vh - 160px));
  display: grid;
  gap: 1rem;
}

.developer-architecture-detail-view[hidden],
.developer-architecture-list-view[hidden] {
  display: none;
}

.developer-architecture-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.developer-architecture-detail-grid,
.developer-architecture-detail-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}

.developer-architecture-section {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.developer-architecture-flow {
  display: grid;
  gap: 0.6rem;
}

.developer-architecture-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
}

.developer-architecture-flow-number {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--primary-soft);
  border: 1px solid var(--border-strong);
  color: var(--text-strong);
  font-weight: 700;
}

@media (max-width: 720px) {
  .developer-architecture-detail-header,
  .developer-architecture-meta {
    display: grid;
    justify-content: stretch;
  }
}
/* DRONEHQ_ARCHITECTURE_REGISTRY_CSS_END */

/* DRONEHQ_ARCHITECTURE_COMPACT_SUBTABS_START */
.architecture-compact-shell {
  display: grid;
  gap: 1rem;
}

.architecture-compact-header,
.architecture-compact-detail-header,
.architecture-compact-entry-card,
.architecture-compact-help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.architecture-compact-header h2,
.architecture-compact-detail-header h2,
.architecture-compact-entry-card h3,
.architecture-compact-card h3 {
  margin: 0;
}

.architecture-compact-intro {
  max-width: 80rem;
}

.architecture-compact-help-row {
  align-items: stretch;
}

.architecture-compact-help-row article {
  flex: 1;
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 14px;
  padding: .85rem 1rem;
  background: var(--surface-muted, rgba(15, 45, 78, .58));
}

.architecture-compact-help-row strong,
.architecture-compact-help-row span {
  display: block;
}

.architecture-compact-help-row span {
  margin-top: .25rem;
  color: var(--text-muted, #c7d2e1);
  font-size: .95rem;
  line-height: 1.45;
}

.architecture-compact-group {
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 16px;
  padding: 1rem;
  background: var(--surface-muted, rgba(10, 37, 66, .55));
}

.architecture-compact-card-list {
  display: grid;
  gap: .75rem;
  margin-top: .6rem;
}

.architecture-compact-entry-card {
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 14px;
  padding: .85rem 1rem;
  background: var(--surface-card, rgba(13, 42, 73, .8));
}

.architecture-compact-entry-card p {
  margin: .35rem 0 .6rem;
  color: var(--text-muted, #c7d2e1);
  line-height: 1.45;
}

.architecture-compact-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  font-size: .92rem;
}

.architecture-compact-open,
.architecture-compact-detail-header .compact {
  min-width: 7rem;
  padding: .55rem .8rem;
  min-height: 2.25rem;
}

.architecture-compact-detail-header {
  align-items: flex-start;
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 16px;
  padding: .9rem 1rem;
  background: var(--surface-muted, rgba(10, 37, 66, .55));
}

.architecture-compact-detail-header > div {
  flex: 1;
}

.architecture-compact-detail-header p {
  margin-bottom: 0;
}

.architecture-compact-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 14px;
  padding: .45rem;
  background: var(--surface-muted, rgba(10, 37, 66, .55));
}

.architecture-compact-subtabs button {
  flex: 1 1 9rem;
  min-height: 2.2rem;
  padding: .45rem .75rem;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.2;
  background: transparent;
  border: 1px solid transparent;
}

.architecture-compact-subtabs button.active,
.architecture-compact-subtabs button[aria-selected="true"] {
  border-color: var(--accent, #38bdf8);
  background: rgba(56, 189, 248, .14);
}

.architecture-compact-sections {
  min-height: 16rem;
}

.architecture-compact-section {
  display: grid;
  gap: .85rem;
}

.architecture-compact-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.architecture-compact-card {
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 14px;
  padding: 1rem;
  background: var(--surface-card, rgba(13, 42, 73, .82));
}

.architecture-compact-card-tight {
  padding-block: .85rem;
}

.architecture-compact-card p {
  margin: .55rem 0 0;
  line-height: 1.45;
}

.architecture-compact-list {
  margin: .65rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .65rem;
}

.architecture-compact-list li {
  padding-left: .15rem;
}

.architecture-compact-list strong,
.architecture-compact-list code,
.architecture-compact-list span {
  display: inline;
  margin-right: .35rem;
}

.architecture-compact-list span {
  color: var(--text-muted, #c7d2e1);
}

.architecture-compact-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .65rem;
}

.architecture-compact-pill {
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 999px;
  padding: .35rem .65rem;
  background: rgba(56, 189, 248, .1);
  font-size: .92rem;
}

.architecture-compact-flow {
  list-style: none;
  margin: .65rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.architecture-compact-flow li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .25));
  border-radius: 12px;
  padding: .7rem .85rem;
  background: rgba(10, 37, 66, .55);
}

.architecture-compact-flow-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--accent, #38bdf8);
  font-weight: 700;
}

.architecture-compact-flow p,
.architecture-compact-empty {
  margin: .35rem 0 0;
  color: var(--text-muted, #c7d2e1);
}


.architecture-path-diagram {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .75rem;
}

.architecture-path-node {
  position: relative;
  flex: 1 1 10.5rem;
  min-width: 10.5rem;
  max-width: 16rem;
  border: 1px solid var(--border-soft, rgba(96, 165, 250, .35));
  border-radius: 14px;
  padding: .7rem .8rem .7rem 2.55rem;
  background: rgba(10, 37, 66, .62);
  min-height: 5.1rem;
}

.architecture-path-node strong,
.architecture-path-node small {
  display: block;
}

.architecture-path-node strong {
  line-height: 1.25;
}

.architecture-path-node small {
  margin-top: .35rem;
  color: var(--text-muted, #c7d2e1);
  line-height: 1.35;
}

.architecture-path-number {
  position: absolute;
  top: .7rem;
  left: .75rem;
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--accent, #38bdf8);
  font-size: .8rem;
  font-weight: 800;
}

.architecture-path-arrow {
  align-self: center;
  color: var(--accent, #38bdf8);
  font-size: 1.15rem;
  font-weight: 800;
  opacity: .9;
  margin-inline: -.1rem;
}

.architecture-path-details {
  margin-top: .75rem;
  border-top: 1px solid var(--border-soft, rgba(96, 165, 250, .22));
  padding-top: .65rem;
}

.architecture-path-details summary {
  cursor: pointer;
  color: var(--accent, #38bdf8);
  font-weight: 700;
}

@media (max-width: 900px) {
  .architecture-compact-header,
  .architecture-compact-detail-header,
  .architecture-compact-entry-card,
  .architecture-compact-help-row {
    align-items: stretch;
    flex-direction: column;
  }

  .architecture-compact-two {
    grid-template-columns: 1fr;
  }

  .architecture-compact-open,
  .architecture-compact-detail-header .compact {
    width: 100%;
  }
}
/* DRONEHQ_ARCHITECTURE_COMPACT_SUBTABS_END */

/* DroneHQ operations coming-soon menu cleanup */
a[data-dronehq-coming-soon],
button[data-dronehq-coming-soon] {
  opacity: 0.78;
  cursor: not-allowed;
}

.dronehq-coming-soon-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  max-width: min(520px, calc(100vw - 48px));
  padding: 14px 18px;
  border: 1px solid rgba(84, 190, 255, 0.55);
  border-radius: 14px;
  background: rgba(11, 35, 61, 0.96);
  color: #f6fbff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  font-weight: 700;
  line-height: 1.35;
  transform: translateY(16px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.dronehq-coming-soon-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* DroneHQ Operations coming-soon text weight cleanup */
.operations-coming-soon,
.operations-coming-soon strong,
.operations-placeholder,
.operations-placeholder strong,
.dhq-coming-soon,
.dhq-coming-soon strong,
.placeholder-message,
.placeholder-message strong {
    font-weight: 400;
}

/* DroneHQ Sync Activity connected-card dashboard match */
.dhq-sync-agent-status-card {
  font-weight: 500 !important;
}

.dhq-sync-agent-status-card.dhq-sync-agent-card-connected {
  border-color: rgba(73, 222, 128, 0.78) !important;
  background: linear-gradient(135deg, rgba(8, 47, 36, 0.72), rgba(15, 35, 58, 0.82)) !important;
  box-shadow: inset 0 0 0 1px rgba(73, 222, 128, 0.18) !important;
}

.dhq-sync-agent-status-card.dhq-sync-agent-card-offline {
  border-color: rgba(245, 158, 11, 0.68) !important;
  background: linear-gradient(135deg, rgba(69, 46, 19, 0.55), rgba(22, 32, 55, 0.82)) !important;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.16) !important;
}

.dhq-sync-agent-status-card .dhq-sync-agent-title {
  font-size: 0.78rem !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  color: rgba(235, 245, 255, 0.92) !important;
}

.dhq-sync-agent-status-card .dhq-sync-agent-status-word {
  font-size: 1.25rem !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.dhq-sync-agent-status-card.dhq-sync-agent-card-connected .dhq-sync-agent-status-word {
  color: #4ade80 !important;
}

.dhq-sync-agent-status-card.dhq-sync-agent-card-offline .dhq-sync-agent-status-word {
  color: #fbbf24 !important;
}

.dhq-sync-agent-status-card .dhq-sync-agent-detail {
  font-size: 0.68rem !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  color: rgba(218, 232, 249, 0.88) !important;
}

.dhq-sync-agent-status-card .dhq-sync-agent-small-state {
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
}

.dhq-sync-agent-status-card.dhq-sync-agent-card-connected .dhq-sync-agent-small-state {
  color: #86efac !important;
}

.dhq-sync-agent-status-card.dhq-sync-agent-card-offline .dhq-sync-agent-small-state {
  color: #fde68a !important;
}

/* DRONEHQ_SYNC_AGENT_ACTIVITY_ONLY_START */
/*
  Sync Activity owner cleanup:
  - Sync Agent-only terminology
  - compact Dashboard-sized status cards
  - Accounts & Users-style tab buttons
  - no customer import records
  - page-scoped styles only
*/

.sync-agent-activity-page {
  max-width: 1320px;
}

.sync-agent-activity-page .sync-agent-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  margin: 1.5rem 0 1.35rem;
}

.sync-agent-activity-page .sync-agent-title h1 {
  margin: 0.18rem 0 0.45rem;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.96;
}

.sync-agent-activity-page .sync-agent-title .subtle {
  max-width: 760px;
  font-size: 1rem;
}

.sync-agent-activity-page .sync-agent-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(155px, 1fr));
  gap: 0.7rem;
  align-items: stretch;
  min-width: min(560px, 100%);
}

.sync-agent-activity-page .sync-agent-kpi {
  min-height: 88px;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(49, 151, 245, 0.58);
  border-radius: 0.8rem;
  background: rgba(12, 44, 77, 0.68);
  color: var(--text-primary, #f8fbff);
  text-align: center;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.08rem;
  cursor: pointer;
}

.sync-agent-activity-page .sync-agent-kpi span {
  font-size: 0.72rem;
  line-height: 1.1;
  font-weight: 700;
}

.sync-agent-activity-page .sync-agent-kpi strong {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1;
  font-weight: 650;
  color: #38bdf8;
}

.sync-agent-activity-page .sync-agent-kpi small {
  max-width: 100%;
  font-size: 0.66rem;
  line-height: 1.15;
  font-weight: 600;
  color: rgba(235, 245, 255, 0.86);
}

.sync-agent-activity-page .sync-agent-status-card {
  min-width: 225px;
}

.sync-agent-activity-page .sync-agent-status-card[data-status="connected"],
.sync-agent-activity-page .sync-agent-status-detail[data-status="connected"] {
  border-color: rgba(73, 222, 128, 0.8);
  background: linear-gradient(135deg, rgba(8, 47, 36, 0.8), rgba(14, 45, 60, 0.76));
}

.sync-agent-activity-page .sync-agent-status-card[data-status="attention"],
.sync-agent-activity-page .sync-agent-status-detail[data-status="attention"] {
  border-color: rgba(245, 158, 11, 0.72);
  background: linear-gradient(135deg, rgba(65, 48, 30, 0.72), rgba(29, 35, 58, 0.78));
}

.sync-agent-activity-page .sync-agent-status-card[data-status="error"],
.sync-agent-activity-page .sync-agent-status-detail[data-status="error"] {
  border-color: rgba(248, 113, 113, 0.78);
  background: linear-gradient(135deg, rgba(69, 26, 35, 0.72), rgba(29, 35, 58, 0.78));
}

.sync-agent-activity-page .sync-agent-status-card[data-status="connected"] strong,
.sync-agent-activity-page .sync-agent-status-detail[data-status="connected"] strong {
  color: #4ade80;
}

.sync-agent-activity-page .sync-agent-status-card[data-status="attention"] strong,
.sync-agent-activity-page .sync-agent-status-detail[data-status="attention"] strong {
  color: #fbbf24;
}

.sync-agent-activity-page .sync-agent-status-card[data-status="error"] strong,
.sync-agent-activity-page .sync-agent-status-detail[data-status="error"] strong {
  color: #fb7185;
}

.sync-agent-activity-page .sync-agent-window {
  border: 1px solid rgba(49, 151, 245, 0.5);
  border-radius: 0.9rem;
  background: rgba(7, 28, 50, 0.64);
  overflow: hidden;
}

.sync-agent-activity-page .sync-agent-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid rgba(49, 151, 245, 0.35);
}

.sync-agent-activity-page .sync-agent-tab {
  min-height: 30px;
  padding: 0.38rem 0.85rem;
  border: 1px solid rgba(49, 151, 245, 0.48);
  border-radius: 0.55rem;
  background: rgba(9, 31, 58, 0.86);
  color: rgba(235, 245, 255, 0.94);
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.sync-agent-activity-page .sync-agent-tab.active {
  background: linear-gradient(135deg, rgba(30, 119, 180, 0.82), rgba(25, 87, 136, 0.86));
  border-color: rgba(56, 189, 248, 0.92);
  box-shadow: inset 0 -2px 0 rgba(56, 189, 248, 0.8);
}

.sync-agent-activity-page .sync-agent-body {
  padding: 0.95rem;
}

.sync-agent-activity-page .sync-agent-grid.two {
  display: grid;
  grid-template-columns: minmax(290px, 0.85fr) minmax(0, 1.55fr);
  gap: 1rem;
}

.sync-agent-activity-page .sync-agent-source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.sync-agent-activity-page .sync-agent-card,
.sync-agent-activity-page .sync-agent-status-detail {
  border: 1px solid rgba(49, 151, 245, 0.42);
  border-radius: 0.8rem;
  background: rgba(5, 25, 47, 0.78);
  padding: 1rem 1.1rem;
}

.sync-agent-activity-page .sync-agent-card h3,
.sync-agent-activity-page .sync-agent-status-detail span {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 750;
}

.sync-agent-activity-page .sync-agent-status-detail {
  min-height: 190px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.35rem;
}

.sync-agent-activity-page .sync-agent-status-detail span {
  margin: 0;
  color: rgba(235, 245, 255, 0.86);
}

.sync-agent-activity-page .sync-agent-status-detail strong {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1;
  font-weight: 700;
}

.sync-agent-activity-page .sync-agent-status-detail p {
  max-width: 300px;
  margin: 0.2rem 0 0;
  font-size: 0.83rem;
  line-height: 1.35;
}

.sync-agent-activity-page .sync-agent-detail-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.2rem 0 0.85rem;
}

.sync-agent-activity-page .sync-agent-detail-list div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.48rem 0;
  border-bottom: 1px solid rgba(49, 151, 245, 0.18);
}

.sync-agent-activity-page .sync-agent-detail-list dt {
  color: rgba(197, 211, 230, 0.88);
  font-weight: 650;
}

.sync-agent-activity-page .sync-agent-detail-list dd {
  margin: 0;
  color: rgba(245, 248, 255, 0.95);
}

.sync-agent-activity-page .centered-card {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 190px;
}

.sync-agent-activity-page .sync-agent-number {
  font-size: 2.05rem;
  line-height: 1;
  font-weight: 650;
  color: #38bdf8;
}

.sync-agent-activity-page .sync-agent-number.small {
  font-size: 1.25rem;
}

.sync-agent-activity-page .sync-agent-plain-list {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  color: rgba(230, 240, 255, 0.92);
}

.sync-agent-activity-page .sync-agent-plain-list li {
  margin: 0.38rem 0;
}

.sync-agent-activity-page .mini-source h3 {
  margin-bottom: 0.35rem;
}

.sync-agent-activity-page .mini-source p,
.sync-agent-activity-page .compact-note {
  font-size: 0.85rem;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .sync-agent-activity-page .sync-agent-hero {
    grid-template-columns: 1fr;
  }

  .sync-agent-activity-page .sync-agent-summary {
    width: 100%;
    max-width: 680px;
  }

  .sync-agent-activity-page .sync-agent-grid.two,
  .sync-agent-activity-page .sync-agent-source-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sync-agent-activity-page .sync-agent-summary {
    grid-template-columns: 1fr;
  }

  .sync-agent-activity-page .sync-agent-status-card {
    min-width: 0;
  }

  .sync-agent-activity-page .sync-agent-tabs {
    align-items: stretch;
  }

  .sync-agent-activity-page .sync-agent-tab {
    flex: 1 1 100%;
  }
}
/* DRONEHQ_SYNC_AGENT_ACTIVITY_ONLY_END */

/* === DroneHQ Sync Activity compact tabs/text final cleanup START === */

/*
  Sync Activity page only.
  The :has() selectors keep these overrides scoped to this page without touching
  Accounts & Users, Preflight, Dashboard, or the shared app shell.
*/

/* Page heading closer to Dashboard/System Overview scale */
body:has(.sync-activity-tabs) main h1,
body:has(.sync-agent-tabs) main h1,
body:has([data-sync-tab]) main h1,
body:has(.sync-agent-only-panel) main h1 {
  font-size: clamp(2.45rem, 4.2vw, 3.55rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 0.65rem !important;
}

/* Header stat cards: cleaner, slightly roomier, not heavy */
body:has(.sync-activity-tabs) .sync-activity-summary,
body:has(.sync-agent-tabs) .sync-activity-summary,
body:has([data-sync-tab]) .sync-activity-summary,
body:has(.sync-agent-only-panel) .sync-activity-summary,
body:has(.sync-activity-tabs) .sync-agent-summary,
body:has(.sync-agent-tabs) .sync-agent-summary,
body:has([data-sync-tab]) .sync-agent-summary,
body:has(.sync-agent-only-panel) .sync-agent-summary {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

body:has(.sync-activity-tabs) .sync-activity-summary > *,
body:has(.sync-agent-tabs) .sync-activity-summary > *,
body:has([data-sync-tab]) .sync-activity-summary > *,
body:has(.sync-agent-only-panel) .sync-activity-summary > *,
body:has(.sync-activity-tabs) .sync-agent-summary > *,
body:has(.sync-agent-tabs) .sync-agent-summary > *,
body:has([data-sync-tab]) .sync-agent-summary > *,
body:has(.sync-agent-only-panel) .sync-agent-summary > *,
body:has(.sync-activity-tabs) .sync-kpi-card,
body:has(.sync-agent-tabs) .sync-kpi-card,
body:has([data-sync-tab]) .sync-kpi-card,
body:has(.sync-agent-only-panel) .sync-kpi-card,
body:has(.sync-activity-tabs) .sync-stat-card,
body:has(.sync-agent-tabs) .sync-stat-card,
body:has([data-sync-tab]) .sync-stat-card,
body:has(.sync-agent-only-panel) .sync-stat-card {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 220px !important;
  min-height: 78px !important;
  padding: 0.72rem 0.95rem !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.18rem !important;
}

/* Header labels and values */
body:has(.sync-activity-tabs) .sync-activity-summary h3,
body:has(.sync-agent-tabs) .sync-activity-summary h3,
body:has([data-sync-tab]) .sync-activity-summary h3,
body:has(.sync-agent-only-panel) .sync-activity-summary h3,
body:has(.sync-activity-tabs) .sync-agent-summary h3,
body:has(.sync-agent-tabs) .sync-agent-summary h3,
body:has([data-sync-tab]) .sync-agent-summary h3,
body:has(.sync-agent-only-panel) .sync-agent-summary h3,
body:has(.sync-activity-tabs) .sync-kpi-label,
body:has(.sync-agent-tabs) .sync-kpi-label,
body:has([data-sync-tab]) .sync-kpi-label,
body:has(.sync-agent-only-panel) .sync-kpi-label,
body:has(.sync-activity-tabs) .sync-stat-label,
body:has(.sync-agent-tabs) .sync-stat-label,
body:has([data-sync-tab]) .sync-stat-label,
body:has(.sync-agent-only-panel) .sync-stat-label {
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

body:has(.sync-activity-tabs) .sync-activity-summary strong,
body:has(.sync-agent-tabs) .sync-activity-summary strong,
body:has([data-sync-tab]) .sync-activity-summary strong,
body:has(.sync-agent-only-panel) .sync-activity-summary strong,
body:has(.sync-activity-tabs) .sync-agent-summary strong,
body:has(.sync-agent-tabs) .sync-agent-summary strong,
body:has([data-sync-tab]) .sync-agent-summary strong,
body:has(.sync-agent-only-panel) .sync-agent-summary strong,
body:has(.sync-activity-tabs) .sync-kpi-value,
body:has(.sync-agent-tabs) .sync-kpi-value,
body:has([data-sync-tab]) .sync-kpi-value,
body:has(.sync-agent-only-panel) .sync-kpi-value,
body:has(.sync-activity-tabs) .sync-stat-value,
body:has(.sync-agent-tabs) .sync-stat-value,
body:has([data-sync-tab]) .sync-stat-value,
body:has(.sync-agent-only-panel) .sync-stat-value,
body:has(.sync-activity-tabs) [data-sync-count],
body:has(.sync-agent-tabs) [data-sync-count],
body:has([data-sync-tab]) [data-sync-count],
body:has(.sync-agent-only-panel) [data-sync-count] {
  font-size: 1.72rem !important;
  line-height: 1.0 !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  margin: 0.1rem 0 !important;
}

body:has(.sync-activity-tabs) .sync-activity-summary small,
body:has(.sync-agent-tabs) .sync-activity-summary small,
body:has([data-sync-tab]) .sync-activity-summary small,
body:has(.sync-agent-only-panel) .sync-activity-summary small,
body:has(.sync-activity-tabs) .sync-agent-summary small,
body:has(.sync-agent-tabs) .sync-agent-summary small,
body:has([data-sync-tab]) .sync-agent-summary small,
body:has(.sync-agent-only-panel) .sync-agent-summary small,
body:has(.sync-activity-tabs) .sync-kpi-subtitle,
body:has(.sync-agent-tabs) .sync-kpi-subtitle,
body:has([data-sync-tab]) .sync-kpi-subtitle,
body:has(.sync-agent-only-panel) .sync-kpi-subtitle,
body:has(.sync-activity-tabs) .sync-stat-subtitle,
body:has(.sync-agent-tabs) .sync-stat-subtitle,
body:has([data-sync-tab]) .sync-stat-subtitle,
body:has(.sync-agent-only-panel) .sync-stat-subtitle {
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
  margin: 0 !important;
}

/* Connected top card should be green and less heavy */
body:has(.sync-activity-tabs) .sync-agent-connected,
body:has(.sync-agent-tabs) .sync-agent-connected,
body:has([data-sync-tab]) .sync-agent-connected,
body:has(.sync-agent-only-panel) .sync-agent-connected,
body:has(.sync-activity-tabs) .is-connected,
body:has(.sync-agent-tabs) .is-connected,
body:has([data-sync-tab]) .is-connected,
body:has(.sync-agent-only-panel) .is-connected {
  border-color: rgba(55, 224, 130, 0.82) !important;
  background: rgba(19, 82, 67, 0.62) !important;
  box-shadow: none !important;
}

body:has(.sync-activity-tabs) .sync-agent-connected .sync-kpi-value,
body:has(.sync-agent-tabs) .sync-agent-connected .sync-kpi-value,
body:has([data-sync-tab]) .sync-agent-connected .sync-kpi-value,
body:has(.sync-agent-only-panel) .sync-agent-connected .sync-kpi-value,
body:has(.sync-activity-tabs) .is-connected .sync-kpi-value,
body:has(.sync-agent-tabs) .is-connected .sync-kpi-value,
body:has([data-sync-tab]) .is-connected .sync-kpi-value,
body:has(.sync-agent-only-panel) .is-connected .sync-kpi-value,
body:has(.sync-activity-tabs) .sync-agent-connected strong,
body:has(.sync-agent-tabs) .sync-agent-connected strong,
body:has([data-sync-tab]) .sync-agent-connected strong,
body:has(.sync-agent-only-panel) .sync-agent-connected strong,
body:has(.sync-activity-tabs) .is-connected strong,
body:has(.sync-agent-tabs) .is-connected strong,
body:has([data-sync-tab]) .is-connected strong,
body:has(.sync-agent-only-panel) .is-connected strong {
  color: #55f28c !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}

/* Tabs: small horizontal Accounts & Users style, never full-width rows */
body:has(.sync-activity-tabs) .sync-activity-tabs,
body:has(.sync-agent-tabs) .sync-agent-tabs,
body:has([data-sync-tab]) .sync-activity-tabs,
body:has(.sync-agent-only-panel) .sync-agent-tabs,
body:has(.sync-agent-only-panel) .sync-activity-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.55rem !important;
  width: 100% !important;
  padding: 0.65rem 0.75rem !important;
  min-height: unset !important;
  border-bottom: 1px solid rgba(76, 151, 220, 0.22) !important;
}

body:has(.sync-activity-tabs) .sync-activity-tabs > *,
body:has(.sync-agent-tabs) .sync-agent-tabs > *,
body:has([data-sync-tab]) .sync-activity-tabs > *,
body:has(.sync-agent-only-panel) .sync-agent-tabs > *,
body:has(.sync-agent-only-panel) .sync-activity-tabs > *,
body:has(.sync-activity-tabs) [data-sync-tab],
body:has(.sync-agent-tabs) [data-sync-tab],
body:has(.sync-agent-only-panel) [data-sync-tab] {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: unset !important;
  height: auto !important;
  padding: 0.52rem 0.95rem !important;
  border-radius: 0.55rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Make all card copy readable, not bold-heavy */
body:has(.sync-activity-tabs) .sync-agent-only-panel,
body:has(.sync-agent-tabs) .sync-agent-only-panel,
body:has([data-sync-tab]) .sync-agent-only-panel,
body:has(.sync-agent-only-panel) .sync-agent-only-panel,
body:has(.sync-activity-tabs) .sync-activity-panel,
body:has(.sync-agent-tabs) .sync-activity-panel,
body:has([data-sync-tab]) .sync-activity-panel {
  font-weight: 400 !important;
}

body:has(.sync-activity-tabs) .sync-agent-only-panel h2,
body:has(.sync-agent-tabs) .sync-agent-only-panel h2,
body:has([data-sync-tab]) .sync-agent-only-panel h2,
body:has(.sync-agent-only-panel) .sync-agent-only-panel h2,
body:has(.sync-activity-tabs) .sync-agent-only-panel h3,
body:has(.sync-agent-tabs) .sync-agent-only-panel h3,
body:has([data-sync-tab]) .sync-agent-only-panel h3,
body:has(.sync-agent-only-panel) .sync-agent-only-panel h3,
body:has(.sync-activity-tabs) .sync-activity-panel h2,
body:has(.sync-agent-tabs) .sync-activity-panel h2,
body:has([data-sync-tab]) .sync-activity-panel h2,
body:has(.sync-activity-tabs) .sync-activity-panel h3,
body:has(.sync-agent-tabs) .sync-activity-panel h3,
body:has([data-sync-tab]) .sync-activity-panel h3 {
  font-size: 1.05rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
}

body:has(.sync-activity-tabs) .sync-agent-only-panel p,
body:has(.sync-agent-tabs) .sync-agent-only-panel p,
body:has([data-sync-tab]) .sync-agent-only-panel p,
body:has(.sync-agent-only-panel) .sync-agent-only-panel p,
body:has(.sync-activity-tabs) .sync-agent-only-panel li,
body:has(.sync-agent-tabs) .sync-agent-only-panel li,
body:has([data-sync-tab]) .sync-agent-only-panel li,
body:has(.sync-agent-only-panel) .sync-agent-only-panel li,
body:has(.sync-activity-tabs) .sync-agent-only-panel td,
body:has(.sync-agent-tabs) .sync-agent-only-panel td,
body:has([data-sync-tab]) .sync-agent-only-panel td,
body:has(.sync-agent-only-panel) .sync-agent-only-panel td,
body:has(.sync-activity-tabs) .sync-agent-only-panel span,
body:has(.sync-agent-tabs) .sync-agent-only-panel span,
body:has([data-sync-tab]) .sync-agent-only-panel span,
body:has(.sync-agent-only-panel) .sync-agent-only-panel span,
body:has(.sync-activity-tabs) .sync-activity-panel p,
body:has(.sync-agent-tabs) .sync-activity-panel p,
body:has([data-sync-tab]) .sync-activity-panel p {
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* Main content cards: less oversized, balanced with wider middle/right areas */
body:has(.sync-agent-only-panel) .sync-agent-only-panel,
body:has(.sync-activity-tabs) .sync-agent-only-panel,
body:has(.sync-agent-tabs) .sync-agent-only-panel,
body:has([data-sync-tab]) .sync-agent-only-panel,
body:has(.sync-activity-tabs) .sync-activity-panel,
body:has(.sync-agent-tabs) .sync-activity-panel,
body:has([data-sync-tab]) .sync-activity-panel {
  padding: 1rem !important;
}

body:has(.sync-agent-only-panel) .sync-agent-grid,
body:has(.sync-activity-tabs) .sync-agent-grid,
body:has(.sync-agent-tabs) .sync-agent-grid,
body:has([data-sync-tab]) .sync-agent-grid,
body:has(.sync-agent-only-panel) .sync-activity-grid,
body:has(.sync-activity-tabs) .sync-activity-grid,
body:has(.sync-agent-tabs) .sync-activity-grid,
body:has([data-sync-tab]) .sync-activity-grid {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.9fr) minmax(420px, 1.35fr) minmax(300px, 1fr) !important;
  gap: 0.9rem !important;
  align-items: stretch !important;
}

/* The large status tile should not shout */
body:has(.sync-agent-only-panel) .sync-agent-status-card,
body:has(.sync-activity-tabs) .sync-agent-status-card,
body:has(.sync-agent-tabs) .sync-agent-status-card,
body:has([data-sync-tab]) .sync-agent-status-card {
  min-height: 160px !important;
  padding: 1.1rem !important;
}

body:has(.sync-agent-only-panel) .sync-agent-status-card strong,
body:has(.sync-agent-only-panel) .sync-agent-status-card .sync-kpi-value,
body:has(.sync-agent-only-panel) .sync-agent-status-card .status-value,
body:has(.sync-agent-only-panel) .sync-agent-status-card .connected-value,
body:has(.sync-activity-tabs) .sync-agent-status-card strong,
body:has(.sync-agent-tabs) .sync-agent-status-card strong,
body:has([data-sync-tab]) .sync-agent-status-card strong {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
}

/* Mobile/tablet: compact stack without tall pill rows */
@media (max-width: 1000px) {
  body:has(.sync-agent-only-panel) .sync-agent-grid,
  body:has(.sync-activity-tabs) .sync-agent-grid,
  body:has(.sync-agent-tabs) .sync-agent-grid,
  body:has([data-sync-tab]) .sync-agent-grid,
  body:has(.sync-agent-only-panel) .sync-activity-grid,
  body:has(.sync-activity-tabs) .sync-activity-grid,
  body:has(.sync-agent-tabs) .sync-activity-grid,
  body:has([data-sync-tab]) .sync-activity-grid {
    grid-template-columns: 1fr !important;
  }

  body:has(.sync-activity-tabs) .sync-activity-summary,
  body:has(.sync-agent-tabs) .sync-activity-summary,
  body:has([data-sync-tab]) .sync-activity-summary,
  body:has(.sync-agent-only-panel) .sync-activity-summary,
  body:has(.sync-activity-tabs) .sync-agent-summary,
  body:has(.sync-agent-tabs) .sync-agent-summary,
  body:has([data-sync-tab]) .sync-agent-summary,
  body:has(.sync-agent-only-panel) .sync-agent-summary {
    justify-content: flex-start !important;
  }
}

/* === DroneHQ Sync Activity compact tabs/text final cleanup END === */

/* === DroneHQ Sync Activity Last Sync one-line cleanup START === */

/*
  Sync Activity page only.
  Keeps the top Last Sync date/time on one line and keeps KPI text lighter.
*/

body:has(.sync-agent-activity-page) .sync-agent-summary,
body:has(.sync-agent-tabs) .sync-agent-summary {
  gap: 0.85rem !important;
}

body:has(.sync-agent-activity-page) .sync-agent-summary .sync-agent-kpi,
body:has(.sync-agent-tabs) .sync-agent-summary .sync-agent-kpi {
  min-width: 210px !important;
  width: 210px !important;
  max-width: 235px !important;
  min-height: 78px !important;
  padding: 0.7rem 0.9rem !important;
  text-align: center !important;
}

body:has(.sync-agent-activity-page) .sync-agent-summary .sync-agent-kpi[data-sync-kpi-tab="history"],
body:has(.sync-agent-tabs) .sync-agent-summary .sync-agent-kpi[data-sync-kpi-tab="history"] {
  min-width: 235px !important;
  width: 235px !important;
  max-width: 255px !important;
}

body:has(.sync-agent-activity-page) .sync-agent-summary .sync-agent-kpi[data-sync-kpi-tab="agent"],
body:has(.sync-agent-tabs) .sync-agent-summary .sync-agent-kpi[data-sync-kpi-tab="agent"] {
  min-width: 235px !important;
  width: 235px !important;
  max-width: 260px !important;
}

/* Normal KPI numbers/text should not look oversized or overly bold */
body:has(.sync-agent-activity-page) .sync-agent-summary .sync-agent-kpi strong,
body:has(.sync-agent-tabs) .sync-agent-summary .sync-agent-kpi strong {
  font-weight: 500 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
}

/* Last Sync value: one line, smaller than the numeric count cards */
body:has(.sync-agent-activity-page) .sync-agent-summary [data-sync-last-sync],
body:has(.sync-agent-tabs) .sync-agent-summary [data-sync-last-sync] {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: clamp(1.08rem, 1.45vw, 1.36rem) !important;
  line-height: 1.0 !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  max-width: 100% !important;
}

/* Keep labels/subtitles compact */
body:has(.sync-agent-activity-page) .sync-agent-summary .sync-agent-kpi span,
body:has(.sync-agent-tabs) .sync-agent-summary .sync-agent-kpi span {
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  margin-bottom: 0.12rem !important;
}

body:has(.sync-agent-activity-page) .sync-agent-summary .sync-agent-kpi small,
body:has(.sync-agent-tabs) .sync-agent-summary .sync-agent-kpi small {
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  margin-top: 0.1rem !important;
}

/* Connected Sync Agent top card stays green and readable */
body:has(.sync-agent-activity-page) .sync-agent-status-card[data-status="connected"],
body:has(.sync-agent-tabs) .sync-agent-status-card[data-status="connected"],
body:has(.sync-agent-activity-page) .sync-agent-status-card.is-connected,
body:has(.sync-agent-tabs) .sync-agent-status-card.is-connected {
  border-color: rgba(55, 224, 130, 0.82) !important;
  background: rgba(19, 82, 67, 0.62) !important;
}

body:has(.sync-agent-activity-page) .sync-agent-status-card[data-status="connected"] strong,
body:has(.sync-agent-tabs) .sync-agent-status-card[data-status="connected"] strong,
body:has(.sync-agent-activity-page) .sync-agent-status-card.is-connected strong,
body:has(.sync-agent-tabs) .sync-agent-status-card.is-connected strong {
  color: #55f28c !important;
  font-size: clamp(1.2rem, 1.65vw, 1.58rem) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* === DroneHQ Sync Activity Last Sync one-line cleanup END === */

/* DroneHQ Sync Activity client-safe Sync Agent table */
.sync-agents-org-panel {
  display: grid;
  gap: 0.85rem;
}

.sync-agents-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.1rem 0 0.25rem;
}

.sync-agents-panel-heading h2 {
  margin: 0.05rem 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sync-agents-panel-heading p {
  margin: 0;
  max-width: 68ch;
  color: var(--muted-text, #9aa8ba);
  font-size: 0.82rem;
  line-height: 1.45;
}

.sync-agents-summary-pill {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  color: var(--muted-text, #9aa8ba);
  font-size: 0.76rem;
  white-space: nowrap;
}

.sync-agents-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
}

.sync-agents-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.sync-agents-table th,
.sync-agents-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  vertical-align: middle;
}

.sync-agents-table th {
  color: var(--muted-text, #9aa8ba);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sync-agents-table td {
  color: var(--text-color, #e5eefb);
  font-weight: 400;
}

.sync-agents-table td strong {
  font-weight: 500;
}

.sync-agents-table td small {
  color: var(--muted-text, #9aa8ba);
  font-size: 0.72rem;
  font-weight: 400;
}

.sync-agents-table tr:last-child td {
  border-bottom: 0;
}

.sync-agents-empty {
  padding: 0.9rem !important;
  text-align: center !important;
  color: var(--muted-text, #9aa8ba) !important;
  font-weight: 400 !important;
}

.sync-agent-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.sync-agent-status-pill.green {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
}

.sync-agent-status-pill.yellow {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.26);
}

.sync-agent-status-pill.red {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

@media (max-width: 900px) {
  .sync-agents-panel-heading {
    flex-direction: column;
  }

  .sync-agents-summary-pill {
    align-self: flex-start;
  }
}

/* DroneHQ Sync Activity client-safe Sync Agent table visibility repair */
.sync-agents-org-panel {
  display: grid;
  gap: 0.85rem;
  width: 100%;
}

.sync-agents-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.1rem 0 0.25rem;
}

.sync-agents-panel-heading h2 {
  margin: 0.05rem 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sync-agents-panel-heading p {
  margin: 0;
  max-width: 68ch;
  color: var(--muted-text, #9aa8ba);
  font-size: 0.82rem;
  line-height: 1.45;
}

.sync-agents-summary-pill {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  color: var(--muted-text, #9aa8ba);
  font-size: 0.76rem;
  white-space: nowrap;
}

.sync-agents-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
}

.sync-agents-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.sync-agents-table th,
.sync-agents-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  vertical-align: middle;
}

.sync-agents-table th {
  color: var(--muted-text, #9aa8ba);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sync-agents-table td {
  color: var(--text-color, #e5eefb);
  font-weight: 400;
}

.sync-agents-table td strong {
  font-weight: 500;
}

.sync-agents-table td small {
  color: var(--muted-text, #9aa8ba);
  font-size: 0.72rem;
  font-weight: 400;
}

.sync-agents-table tr:last-child td {
  border-bottom: 0;
}

.sync-agents-empty {
  padding: 0.9rem !important;
  text-align: center !important;
  color: var(--muted-text, #9aa8ba) !important;
  font-weight: 400 !important;
}

.sync-agent-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.sync-agent-status-pill.green {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
}

.sync-agent-status-pill.yellow {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.26);
}

.sync-agent-status-pill.red {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

/* DroneHQ Sync Activity Flight Intake Center V2 */
.sync-flight-intake-summary{grid-template-columns:repeat(4,minmax(185px,1fr))!important}
.sync-intake-agent-card{padding:18px}
.sync-intake-section-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:16px}
.sync-intake-section-heading h3{margin:2px 0 5px;font-size:1.1rem;font-weight:600}
.sync-intake-section-heading p{margin:0;max-width:820px}
.sync-agent-status-pill,.sync-intake-count-pill{flex:0 0 auto;padding:7px 12px;border:1px solid rgba(73,145,205,.55);border-radius:999px;font-weight:500}
.sync-agent-status-pill.connected{color:#42e58f;border-color:rgba(43,214,128,.7);background:rgba(20,92,74,.35)}
.sync-agent-status-pill.attention{color:#f4c861;border-color:rgba(226,170,50,.7)}
.sync-intake-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));margin:0;border:1px solid rgba(69,132,185,.45);border-radius:14px;overflow:hidden}
.sync-intake-detail-grid>div{display:grid;grid-template-columns:minmax(135px,.65fr) minmax(180px,1fr);gap:18px;padding:13px 16px;border-bottom:1px solid rgba(69,132,185,.25)}
.sync-intake-detail-grid>div:nth-child(odd){border-right:1px solid rgba(69,132,185,.25)}
.sync-intake-detail-grid dt{color:var(--text-muted,#a9bfd3);font-weight:500}
.sync-intake-detail-grid dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.sync-intake-foundation-state{padding:16px;border:1px solid rgba(69,132,185,.38);border-radius:12px;background:rgba(12,42,69,.45)}
.sync-intake-foundation-state strong{display:block;margin-bottom:5px;font-weight:600}
.sync-intake-foundation-state p{margin:0;color:var(--text-muted,#b5c7d7)}
@media(max-width:1100px){.sync-flight-intake-summary{grid-template-columns:repeat(2,minmax(185px,1fr))!important}.sync-intake-detail-grid{grid-template-columns:1fr}.sync-intake-detail-grid>div:nth-child(odd){border-right:0}}
@media(max-width:680px){.sync-flight-intake-summary{grid-template-columns:1fr!important}.sync-intake-section-heading{flex-direction:column}.sync-intake-detail-grid>div{grid-template-columns:1fr;gap:5px}}

/* DroneHQ organization-aware Sync Agent summary */
.sync-org-agent-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(69, 132, 185, 0.45);
  border-radius: 14px;
}

.sync-org-agent-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.sync-org-agent-table th,
.sync-org-agent-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(69, 132, 185, 0.25);
  font-weight: 400;
}

.sync-org-agent-table th {
  color: var(--text-muted, #a9bfd3);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sync-org-agent-table tbody tr:last-child td {
  border-bottom: 0;
}

.sync-org-agent-table td:first-child {
  font-weight: 500;
}

.sync-org-agent-you {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  border: 1px solid rgba(73, 145, 205, 0.55);
  border-radius: 999px;
  color: var(--text-muted, #a9bfd3);
  font-size: 0.72rem;
  font-weight: 500;
}

.sync-org-agent-status {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}

.sync-org-agent-status.connected {
  color: #42e58f;
  border: 1px solid rgba(43, 214, 128, 0.7);
  background: rgba(20, 92, 74, 0.35);
}

.sync-org-agent-status.offline {
  color: #f4c861;
  border: 1px solid rgba(226, 170, 50, 0.7);
  background: rgba(100, 72, 17, 0.25);
}

.sync-org-agent-empty {
  text-align: center !important;
  color: var(--text-muted, #a9bfd3);
}

@media (max-width: 780px) {
  .sync-org-agent-table th,
  .sync-org-agent-table td {
    padding: 10px 12px;
  }
}

/* DRONEHQ PATCH: header-location-marker-only-v13 START */
.app-shell-header [data-location-button],
.app-shell-header .shell-location[data-location-button],
.app-shell-header button.shell-location {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline-offset: 2px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: var(--primary) !important;
}

.app-shell-header [data-location-button]:hover,
.app-shell-header [data-location-button]:active,
.app-shell-header [data-location-button][aria-expanded="true"],
.app-shell-header [data-location-button].location-status-active,
.app-shell-header [data-location-button].location-status-unavailable,
.app-shell-header [data-location-button].location-status-detecting,
.app-shell-header [data-location-button][data-location-status="active"],
.app-shell-header [data-location-button][data-location-status="unavailable"],
.app-shell-header [data-location-button][data-location-status="detecting"] {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-shell-header [data-location-button] [data-location-label],
.app-shell-header [data-location-button] .shell-utility-label,
.app-shell-header [data-location-button] .shell-location-label,
.app-shell-header [data-location-button] .shell-utility-copy {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell-header [data-location-button] .location-pin,
.app-shell-header [data-location-button] svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 42%, transparent)) !important;
}

.app-shell-header [data-location-button] svg,
.app-shell-header [data-location-button] svg * {
  stroke: currentColor !important;
}

.app-shell-header [data-location-button] svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.app-shell-header [data-location-button].location-status-active .location-pin,
.app-shell-header [data-location-button].location-status-active svg,
.app-shell-header [data-location-button].location-status-detecting .location-pin,
.app-shell-header [data-location-button].location-status-detecting svg,
.app-shell-header [data-location-button][data-location-status="active"] .location-pin,
.app-shell-header [data-location-button][data-location-status="active"] svg,
.app-shell-header [data-location-button][data-location-status="detecting"] .location-pin,
.app-shell-header [data-location-button][data-location-status="detecting"] svg {
  color: var(--primary) !important;
}

.app-shell-header [data-location-button].location-status-unavailable .location-pin,
.app-shell-header [data-location-button].location-status-unavailable svg,
.app-shell-header [data-location-button][data-location-status="unavailable"] .location-pin,
.app-shell-header [data-location-button][data-location-status="unavailable"] svg {
  color: var(--danger) !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--danger) 48%, transparent)) !important;
}

html[data-theme="light"] .app-shell-header [data-location-button],
html[data-theme="light"] .app-shell-header [data-location-button]:hover,
html[data-theme="light"] .app-shell-header [data-location-button]:active,
html[data-theme="light"] .app-shell-header [data-location-button][aria-expanded="true"] {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* DRONEHQ PATCH: header-location-marker-only-v13 END */

/* DRONEHQ PATCH: header-location-calendar-icon-v15 START */
/*
  Header utility controls:
  - Location marker keeps the existing data-location-button and click/modal behavior.
  - Calendar is an icon-only utility placeholder using existing data-coming-soon behavior.
  - This block intentionally does not target crawler/status/bell/help/system/profile logic.
*/

.app-shell-header [data-location-button],
.app-shell-header .shell-location[data-location-button],
.app-shell-header button.shell-location,
.app-shell-header [data-calendar-utility-button],
.app-shell-header .shell-calendar-utility {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  border: 1px solid rgba(67, 176, 255, 0.42) !important;
  border-radius: 12px !important;
  background: rgba(8, 27, 50, 0.94) !important;
  box-shadow: 0 0 0 1px rgba(38, 156, 255, 0.05), 0 0 18px rgba(32, 169, 255, 0.10) !important;
  outline-offset: 2px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: var(--primary, #38bdf8) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.app-shell-header [data-location-button]:hover,
.app-shell-header [data-location-button]:active,
.app-shell-header [data-location-button][aria-expanded="true"],
.app-shell-header [data-calendar-utility-button]:hover,
.app-shell-header [data-calendar-utility-button]:active,
.app-shell-header [data-calendar-utility-button]:focus-visible {
  border-color: rgba(83, 196, 255, 0.82) !important;
  background: rgba(12, 43, 74, 0.98) !important;
  box-shadow: 0 0 0 1px rgba(65, 190, 255, 0.24), 0 0 22px rgba(32, 169, 255, 0.20) !important;
  color: var(--primary, #38bdf8) !important;
}

.app-shell-header [data-location-button] [data-location-label],
.app-shell-header [data-location-button] .shell-utility-label,
.app-shell-header [data-location-button] .shell-location-label,
.app-shell-header [data-location-button] .shell-utility-copy,
.app-shell-header [data-calendar-utility-button] .shell-utility-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell-header [data-location-button] .location-pin,
.app-shell-header [data-location-button] svg,
.app-shell-header [data-calendar-utility-button] svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  color: currentColor !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 42%, transparent)) !important;
}

.app-shell-header [data-location-button] svg,
.app-shell-header [data-location-button] svg *,
.app-shell-header [data-calendar-utility-button] svg,
.app-shell-header [data-calendar-utility-button] svg * {
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.app-shell-header [data-location-button] svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

.app-shell-header [data-location-button].location-status-active,
.app-shell-header [data-location-button].location-status-detecting,
.app-shell-header [data-location-button][data-location-status="active"],
.app-shell-header [data-location-button][data-location-status="detecting"] {
  color: var(--primary, #38bdf8) !important;
  border-color: rgba(67, 176, 255, 0.42) !important;
  background: rgba(8, 27, 50, 0.94) !important;
}

.app-shell-header [data-location-button].location-status-unavailable,
.app-shell-header [data-location-button][data-location-status="unavailable"],
.app-shell-header [data-location-button].is-location-off,
.app-shell-header [data-location-button][aria-invalid="true"] {
  color: var(--danger, #ff5d73) !important;
  border-color: color-mix(in srgb, var(--danger, #ff5d73) 72%, transparent) !important;
  background: color-mix(in srgb, var(--danger, #ff5d73) 15%, rgba(8, 27, 50, 0.94)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger, #ff5d73) 24%, transparent), 0 0 18px color-mix(in srgb, var(--danger, #ff5d73) 18%, transparent) !important;
}

.app-shell-header [data-location-button].location-status-unavailable:hover,
.app-shell-header [data-location-button][data-location-status="unavailable"]:hover,
.app-shell-header [data-location-button].is-location-off:hover,
.app-shell-header [data-location-button][aria-invalid="true"]:hover {
  color: var(--danger, #ff5d73) !important;
  border-color: color-mix(in srgb, var(--danger, #ff5d73) 88%, transparent) !important;
  background: color-mix(in srgb, var(--danger, #ff5d73) 20%, rgba(8, 27, 50, 0.94)) !important;
}

html[data-theme="light"] .app-shell-header [data-location-button],
html[data-theme="light"] .app-shell-header [data-calendar-utility-button] {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(38, 156, 255, 0.36) !important;
  color: #0f8edb !important;
}

html[data-theme="light"] .app-shell-header [data-location-button].location-status-unavailable,
html[data-theme="light"] .app-shell-header [data-location-button][data-location-status="unavailable"],
html[data-theme="light"] .app-shell-header [data-location-button].is-location-off,
html[data-theme="light"] .app-shell-header [data-location-button][aria-invalid="true"] {
  color: var(--danger, #dc3545) !important;
  border-color: rgba(220, 53, 69, 0.70) !important;
  background: rgba(255, 235, 238, 0.94) !important;
}
/* DRONEHQ PATCH: header-location-calendar-icon-v15 END */

/* DRONEHQ PATCH: header-location-click-only-v17 START */
/*
  Header operating-location trigger:
  - keep the existing click behavior and data-location-button hook
  - show only the centered location marker
  - hide the dropdown arrow/chevron/caret
  - preserve the blue/red location state from the existing header CSS
  - do not target crawler, system status, bell, help, system menu, or profile
*/

.app-shell-header [data-location-button] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.app-shell-header [data-location-button]::after {
  content: none !important;
  display: none !important;
}

.app-shell-header [data-location-button]
:is(
  [data-location-chevron],
  [data-location-arrow],
  [data-location-caret],
  [data-operating-location-chevron],
  [data-operating-location-arrow],
  [data-operating-location-caret],
  .location-chevron,
  .location-arrow,
  .location-caret,
  .dhq-location-chevron,
  .dhq-location-arrow,
  .dhq-location-caret,
  .shell-location-chevron,
  .shell-location-arrow,
  .shell-location-caret,
  .shell-utility-chevron,
  .shell-utility-arrow,
  .shell-utility-caret,
  .app-shell-location-chevron,
  .app-shell-location-arrow,
  .app-shell-location-caret,
  .header-location-chevron,
  .header-location-arrow,
  .header-location-caret,
  .dropdown-chevron,
  .dropdown-arrow,
  .dropdown-caret,
  .dropdown-indicator,
  .chevron,
  .arrow,
  .caret
) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* If the chevron is an extra SVG with no useful class, keep only the first SVG in the location button. */
.app-shell-header [data-location-button] svg:not(:first-of-type) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* If the chevron is plain text in a span, hide all non-icon visible spans inside the marker button. */
.app-shell-header [data-location-button] > span:not(.location-pin):not(.location-icon):not(.location-marker):not(.dhq-location-icon):not(.shell-location-icon):not(.shell-location-marker):not([data-location-icon]):not([data-operating-location-icon]) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell-header [data-location-button]
:is(
  [data-location-icon],
  [data-operating-location-icon],
  .location-pin,
  .location-icon,
  .location-marker,
  .dhq-location-icon,
  .dhq-location-marker,
  .shell-location-icon,
  .shell-location-marker
) {
  margin: 0 !important;
  transform: none !important;
}
/* DRONEHQ PATCH: header-location-click-only-v17 END */

/* DRONEHQ_HELP_NON_BLOCKING_V18_START */
html.dronehq-help-open,
body.dronehq-help-open,
html.help-open,
body.help-open,
html.help-drawer-open,
body.help-drawer-open,
html[data-help-open="true"],
body[data-help-open="true"] {
  overflow: auto !important;
}

[data-help-overlay],
[data-help-backdrop],
.help-overlay,
.help-backdrop,
.help-drawer-backdrop,
.help-modal-backdrop,
.dronehq-help-overlay,
.dronehq-help-backdrop,
#help-overlay,
#dronehq-help-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

[data-help-overlay]::before,
[data-help-backdrop]::before,
.help-overlay::before,
.help-backdrop::before,
.help-drawer-backdrop::before,
.help-modal-backdrop::before,
.dronehq-help-overlay::before,
.dronehq-help-backdrop::before,
#help-overlay::before,
#dronehq-help-overlay::before {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

[data-help-panel],
[data-help-drawer],
.help-panel,
.help-drawer,
.dronehq-help-panel,
.dronehq-help-drawer,
#help-panel,
#dronehq-help-panel {
  pointer-events: auto !important;
}

[data-help-overlay][aria-hidden="false"],
.help-overlay[aria-hidden="false"],
.dronehq-help-overlay[aria-hidden="false"] {
  pointer-events: none !important;
}

[data-help-overlay][aria-hidden="false"] [data-help-panel],
.help-overlay[aria-hidden="false"] .help-panel,
.help-overlay[aria-hidden="false"] .help-drawer,
.dronehq-help-overlay[aria-hidden="false"] .dronehq-help-panel,
.dronehq-help-overlay[aria-hidden="false"] .dronehq-help-drawer {
  pointer-events: auto !important;
}
/* DRONEHQ_HELP_NON_BLOCKING_V18_END */


/* Dashboard organization initialization v148 */
.dashboard-organization-loading {
  display: grid;
  gap: 4px;
  min-height: 76px;
  align-content: center;
  padding: 14px 16px;
  border: 1px solid rgba(73, 156, 224, 0.28);
  border-radius: 10px;
  background: rgba(10, 36, 64, 0.34);
}

.dashboard-organization-loading[hidden] {
  display: none !important;
}

.dashboard-organization-loading strong {
  color: var(--text, #f2f7ff);
}

.dashboard-organization-loading .subtle {
  margin: 0;
}