@charset "UTF-8";
/* app.scss */
/* _validation.scss */
.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--mud-palette-success);
  outline-offset: 1px;
}

.invalid {
  outline: 1px solid var(--mud-palette-error);
  outline-offset: 1px;
}

.validation-message {
  color: var(--mud-palette-error);
  font-size: 0.875rem;
  margin-top: 4px;
}

/* end _validation.scss */
/* =========================================
   DEVORA DESIGN SYSTEM
   ========================================= */
:root {
  /* =========================================
     NEUTRAL GRAYS
     ========================================= */
  --gray-100: #F5F8FC;
  --gray-200: #E6E9ED;
  --gray-300: #D1D6DC;
  --gray-400: #BBC2CC;
  --gray-500: #8D98A6;
  --gray-600: #6B7280;
  --gray-700: #3F4753;
  --gray-800: #1E2329;
  --gray-900: #11161C;
  --gray-1000: #0B0F14;
  --gray-darker: #0F141A;
  --gray-dark: #1F2630;
  --gray: #5A6472;
  --gray-light: #A7B0BB;
  --gray-lighter: #DCE3EA;
  --white-dark: #F2F5F9;
  --white: #FFFFFF;
  --white-light: #FAFCFE;
  --background: #F5F8FC;
  --glass: rgba(255, 255, 255, 0.4);
  /* =========================================
     PRIMARY (Sky / Aviation)
     ========================================= */
  --primary-900: #05528E;
  --primary-800: #1A64A8;
  --primary-700: #2F7ABF;
  --primary-600: #468FCC;
  --primary-500: #198CF0;
  --primary-400: #3FA3F3; /* CTA */
  --primary-300: #5AB8E6;
  --primary-200: #8CCBEA;
  --primary-100: #D9EFFA;
  --secondary: #05528E;
  /* =========================================
     ACCENTS
     ========================================= */
  --gold-500: #F8B452;
  --gold-400: #F8C170;
  --red-700: #D92D20;
  --red-600: #B61918;
  --teal-600: #2C8A69;
  --teal-500: #36AFA9;
  /* Card brand marks (payment method placeholder, 555) */
  --brand-visa: #1A1F71;
  --brand-mastercard: #EB001B;
  /* =========================================
     BASIC
     ========================================= */
  --black: #000000;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-subtle: #94A3B8;
  /* =========================================
     TYPOGRAPHY
     ========================================= */
  --font-ui: "Inter", "Segoe UI", sans-serif;
  --font-heading: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  --uav-letter-smallcaps: 0.095em;
  --uav-letter-tight: -0.025em;
  /* =========================================
     EXTENDED / UTILITY
     ========================================= */
  --deep-blue: #0D3D6D;
  --blue: #198CF0;
  --indigo: #4F46E5;
  --purple: #7C3AED;
  --pink: #E83E8C;
  --red: #D92D20;
  --coral: #FF6B4D;
  --orange: #F97316;
  --amber: #FDBA3B;
  --brown: #8B5E34;
  --green: #2C8A69;
  --teal: #36AFA9;
  --cyan: #22D3EE;
  /* =========================================
     SEMANTIC COLORS
     ========================================= */
  --success: #2C8A69;
  --information: #36AFA9;
  --hint: #8CCBEA;
  --warning: #F8B452;
  --danger: #D92D20;
  /* =========================================
     SURFACES
     ========================================= */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F5F8FC;
  --surface-tertiary: #E6E9ED;
  --surface-dialog: #DCE3EA;
  --surface-dark: #1E2329;
  /* =========================================
     BORDERS
     ========================================= */
  --border-light: #DCE3EA;
  --border-medium: #BBC2CC;
  --border-dark: #6B7280;
  /* =========================================
     TAG CHIPS
     ========================================= */
  --tag-chip-bg: rgba(255, 255, 255, 0.55);
  --tag-chip-border: #7899B3;
  --tag-chip-text: #142B45;
  /* =========================================
     SHADOWS
     ========================================= */
  --shadow-sm: 0 1px 2px rgba(15, 20, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 20, 26, 0.08);
  --shadow-lg: 0 12px 24px rgba(15, 20, 26, 0.12);
  /* =========================================
     GRADIENTS
     ========================================= */
  --gradient-primary:
    linear-gradient(
      135deg,
      #05528E 0%,
      #198CF0 100%
    );
  --gradient-sky:
    linear-gradient(
      180deg,
      #D9EFFA 0%,
      #F5F8FC 100%
    );
  --gradient-dark:
    linear-gradient(
      135deg,
      #1E2329 0%,
      #0B0F14 100%
    );
}

/* _typography.scss */
html,
body {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

h1,
.uav-h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

h2,
.uav-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h3,
.uav-h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

h4,
.uav-h4 {
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h5,
.uav-h5 {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

h6,
.uav-h6 {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

p,
.uav-body {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
}

.uav-body-large {
  font-size: 1.125rem;
  line-height: 1.55;
}

.uav-body-small {
  font-size: 0.875rem;
  line-height: 1.5;
}

.uav-caption {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.uav-overline,
.uav-eyebrow,
.uav-section-label,
.uav-metadata-label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--uav-letter-smallcaps);
  text-transform: uppercase;
  color: var(--text-muted);
}

button,
.mud-button,
.uav-button {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

input,
textarea,
select,
.mud-input,
.mud-input-control,
.mud-input-slot {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label.mud-input-label-inputcontrol {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.mud-nav-link,
.uav-nav-link {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.uav-badge,
.uav-status-pill,
.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-size-large {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
}

/* end _typography.scss */
/* _links.scss */
a {
  color: var(--mud-palette-primary);
}

a:hover {
  color: var(--mud-palette-primary-darken);
}

/* end _links.scss */
/* _scrollbars.scss */
.uav-scrollbar {
  scrollbar-color: var(--mud-palette-gray-light) transparent;
}

.uav-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.uav-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}

.uav-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--mud-palette-gray-light);
  border-radius: 999px;
}

.uav-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--mud-palette-gray-default);
}

/* end _scrollbars.scss */
/* _focus.scss */
.uav-focusable:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

.uav-focusable:focus:not(:focus-visible) {
  outline: none;
}

/* end _focus.scss */
/* _text-helpers.scss */
.uav-text-primary {
  color: var(--mud-palette-text-primary) !important;
}

.uav-text-secondary {
  color: var(--mud-palette-text-secondary) !important;
}

.uav-text-disabled {
  color: var(--mud-palette-text-disabled) !important;
}

.uav-text-muted {
  color: var(--mud-palette-text-secondary) !important;
}

.uav-text-success {
  color: var(--mud-palette-success) !important;
}

.uav-text-info {
  color: var(--mud-palette-info) !important;
}

.uav-text-warning {
  color: var(--mud-palette-warning-darken) !important;
}

.uav-text-danger {
  color: var(--mud-palette-error) !important;
}

/* end _text-helpers.scss */
/* _overrides.scss */
/* Hide the floating appbar and drawer on the landing page */
body:has(.home-background) .mud-appbar,
body:has(.home-background) .mud-drawer {
  display: none !important;
}

/* These let the admin banner push the sidebar and page content downward so they don’t overlap. Shared shell boundaries. Components that add a full-width row between the app bar and the
   workspace can override --uav-shell-content-offset without duplicating drawer/main geometry. */
.mud-layout {
  --uav-shell-content-top: 76px;
  --uav-shell-edge-gap: 12px;
}

.mud-appbar .mud-toolbar {
  padding-left: 0 !important;
}

.mud-appbar {
  background: color-mix(in srgb, var(--mud-palette-surface) 20%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--mud-palette-text-primary) !important;
  border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
  border-radius: 16px;
  left: 12px !important;
  right: 12px !important;
  top: 12px !important;
  width: auto !important;
  margin: 0 !important;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--mud-palette-white) 60%, transparent);
}

.mud-appbar .mud-icon-button,
.mud-appbar .mud-button {
  color: var(--mud-palette-text-primary) !important;
}

.mud-appbar .mud-icon-root {
  color: inherit;
}

.mud-drawer {
  background: color-mix(in srgb, var(--mud-palette-surface) 20%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
  border-radius: 16px;
  margin: 0 12px 12px 12px;
  top: var(--uav-shell-content-offset, var(--uav-shell-content-top)) !important;
  height: calc(100vh - var(--uav-shell-content-offset, var(--uav-shell-content-top)) - var(--uav-shell-edge-gap)) !important;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--mud-palette-white) 60%, transparent);
}

.mud-main-content {
  padding-top: var(--uav-shell-content-offset, var(--uav-shell-content-top)) !important;
}

.mud-drawer-overlay,
.mud-overlay-drawer,
.mud-drawer-overlay-mini-temporary,
.mud-drawer-overlay-temporary {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
}

.mud-breadcrumbs ul {
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
}

.mud-table-root {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.mud-table-root .mud-table-head .mud-table-cell {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--uav-letter-smallcaps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mud-table-root .mud-table-body .mud-table-cell {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.mud-table-root .mud-table-body .mud-table-row:hover {
  background-color: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
}

/* end _overrides.scss */
/* _sidebar.scss */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 4px;
  overflow: visible;
  flex: 1 1 auto;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  height: 48px;
  border-radius: var(--mud-default-borderradius);
  color: var(--mud-palette-text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  padding: 0 12px;
  gap: 12px;
  margin: 0 12px;
  overflow: visible;
  white-space: nowrap;
}

.sidebar-nav-item:hover {
  background-color: var(--mud-palette-primary-hover);
  color: var(--mud-palette-primary);
}

.sidebar-nav-item.active {
  background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
  color: var(--mud-palette-primary);
}

.sidebar-nav-item:focus-visible {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

.sidebar-nav-item .mud-icon-root {
  color: inherit;
}

.sidebar-nav-label {
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

/* --- Account / profile footer + flyout --- */
/* Mini-drawer content laid out as a column so the footer sinks to the bottom.
   Filled via the flex algorithm rather than height:100% (which resolves to a
   fractional height). Targets a MudBlazor-internal class — revisit on upgrade. */
.uav-app-drawer .mud-drawer-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
}

/* Let the MudMenu activator fill the rail width. */
.sidebar-footer .mud-menu {
  width: 100%;
}

.sidebar-account-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px;
  border-radius: var(--mud-default-borderradius);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.sidebar-account-btn:hover {
  background-color: var(--mud-palette-primary-hover);
}

/* Text + caret fade in/out with the rail width instead of popping, and the
   avatar stays fixed-left in both states so nothing jumps. */
.sidebar-account-btn.is-expanded .sidebar-account-identity,
.sidebar-account-btn.is-expanded .sidebar-account-caret {
  opacity: 1;
}

.sidebar-account-avatar {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary)) !important;
  color: var(--mud-palette-primary-text) !important;
  font-weight: 600;
  font-size: 0.95rem;
}

.sidebar-account-identity {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.sidebar-account-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--mud-palette-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-account-sub {
  font-size: 12px;
  color: color-mix(in srgb, var(--mud-palette-text-primary) 72%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-account-caret {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--mud-palette-text-secondary);
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* Flyout menu */
.account-menu-popover {
  min-width: 250px;
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
}

.account-menu-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-menu-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--mud-palette-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-email {
  font-size: 11.5px;
  color: var(--mud-palette-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  padding: 8px 16px 4px;
}

.account-menu-section--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.account-menu-section--toggle:hover {
  color: var(--mud-palette-text-primary);
}

.account-menu-section--toggle .account-menu-section-caret {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.account-menu-acct {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.account-menu-acct .acct-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-acct .acct-check {
  flex: 0 0 auto;
  color: var(--mud-palette-primary);
}

.account-menu-acct .acct-check.is-hidden {
  visibility: hidden;
}

.account-menu-role {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
  border-radius: 10px;
  padding: 1px 8px;
}

.account-menu-logout,
.account-menu-logout .mud-icon-root {
  color: var(--mud-palette-error);
}

/* end _sidebar.scss */
/* _page-backdrop.scss */
.page-backdrop {
  margin: 0 12px 12px 24px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, var(--uav-backdrop-alpha, 0.2));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--mud-palette-white) 60%, transparent);
  color: var(--mud-palette-text-primary);
  min-height: calc(100vh - 88px);
}

.page-backdrop > .mud-container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding-top: 12px !important;
  padding-left: 12px !important;
}

.missions-section {
  max-width: 1280px;
}

/* end _page-backdrop.scss */
/* _page-header.scss */
/* The theme sets no margins on h1-h6 (see theme/_typography.scss), so every
   page used its own utility classes and the spacing drifted. These rules are
   the single place page-header rhythm is defined. */
.uav-page-header {
  margin-bottom: 24px;
}

/* Used both by UavPageHeader and directly by the pages that keep their own
   header markup, so the subtitle looks the same either way. */
.uav-page-header__subtitle,
.uav-page-subtitle {
  margin-top: 4px;
  color: var(--text-secondary);
}

/* On pages without the component there's no wrapper to carry the gap, so the
   subtitle carries it instead. Same 24px either way — keep the two in step. */
.uav-page-subtitle {
  margin-bottom: 24px;
}

/* end _page-header.scss */
/* _page-backgrounds.scss */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-bg-no-drone {
  background-image: url("/images/dashboard_no_drone.png");
}

.page-bg-fewer-clouds {
  background-image: url("/images/dashboard_fewer_clouds.png");
}

.page-bg-no-clouds {
  background-image: url("/images/dashboard_no_clouds.png");
}

/* end _page-backgrounds.scss */
/* _buttons.scss */
.login-button,
.mud-button-root.login-button {
  color: var(--mud-palette-white) !important;
  border-color: color-mix(in srgb, var(--mud-palette-white) 80%, transparent) !important;
  background-color: color-mix(in srgb, var(--mud-palette-black) 35%, transparent);
}

.login-button:hover,
.mud-button-root.login-button:hover {
  color: var(--mud-palette-white) !important;
  border-color: var(--mud-palette-white) !important;
  background-color: color-mix(in srgb, var(--mud-palette-white) 15%, transparent);
}

.login-button:focus-visible,
.mud-button-root.login-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mud-palette-white) 70%, transparent);
  outline-offset: 2px;
}

/* end _buttons.scss */
/* _checkboxes.scss */
.darker-border-checkbox.form-check-input {
  border-color: var(--mud-palette-lines-inputs);
}

.darker-border-checkbox.form-check-input:hover {
  border-color: var(--mud-palette-primary);
}

.darker-border-checkbox.form-check-input:focus {
  border-color: var(--mud-palette-primary);
  box-shadow: 0 0 0 0.2rem var(--mud-palette-primary-hover);
}

.darker-border-checkbox.form-check-input:checked {
  background-color: var(--mud-palette-primary);
  border-color: var(--mud-palette-primary);
}

.darker-border-checkbox.form-check-input:disabled {
  border-color: var(--mud-palette-action-disabled);
}

/* end _checkboxes.scss */
/* _dialogs.scss */
/* Enables resizing on MudDialog */
.resizable-dialog {
  resize: both;
  overflow: auto;
  min-width: 400px;
  min-height: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background-color: var(--surface-dialog);
  color: var(--mud-palette-text-primary);
  border: 1px solid var(--mud-palette-lines-default);
}

/* Content panels blend into the dialog surface instead of painting their own */
.uav-dialog .mud-paper {
  background-color: transparent;
}

/* Entry fields stay white against the blue-gray dialog surface (#DCE3EA).
   border-radius matches the outlined border so the white fill doesn't peek
   square corners past the rounded edge. */
.uav-dialog .mud-input.mud-input-outlined,
.uav-dialog .mud-input.mud-input-filled {
  background-color: var(--surface-primary);
  border-radius: var(--mud-default-borderradius);
}

/* Ensure content stretches */
.resizable-dialog .mud-dialog-content {
  height: 100%;
  color: var(--mud-palette-text-primary);
}

/* Optional visual separation for dialog actions */
.resizable-dialog .mud-dialog-actions {
  border-top: 1px solid var(--mud-palette-divider);
}

/* FileViewerDialog per-file-type widths. Scoped to .resizable-dialog so they
   outrank MudBlazor's .mud-dialog-width-full (the callers pass FullWidth=true). */
.resizable-dialog.file-viewer-pdf {
  width: 900px;
}

.resizable-dialog.file-viewer-text {
  width: 700px;
}

.resizable-dialog.file-viewer-fallback {
  width: 500px;
}

/* Image preview — box hugs the image at its natural size (a small logo stays
   small/sharp), capped so large images don't fill the viewport. */
.resizable-dialog.file-viewer-image {
  /* Box hugs the image at its natural size (a small logo stays small/sharp),
     capped at 800px so large images don't fill the viewport. Resize is both-axis
     (from .resizable-dialog), so any image with room under the cap can be dragged. */
  width: auto;
  min-width: 360px;
  max-width: min(800px, 100vw - 32px);
  min-height: auto;
}

.resizable-dialog.file-viewer-image img {
  display: block;
  margin: 0 auto;
}

/* Video preview — a comfortable fixed width the video fills, so small clips open
   at a watchable size (upscaled) and large ones cap here, instead of opening at
   their raw pixel size. */
.resizable-dialog.file-viewer-video {
  width: min(720px, 100vw - 32px);
  min-height: auto;
}

/* Shared frame for the PDF and large-text iframes */
.file-viewer-frame {
  width: 100%;
  height: 80vh;
  border: 0;
}

/* Inline text preview — height follows the content, scrolls once it passes the cap */
.file-viewer-text-content {
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: 8px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
}

/* Share dialog rows: long emails wrap rather than widening the dialog.
   Flex items default to min-width:auto, so without this an address pushes past
   the dialog's fixed width instead of wrapping. */
.share-dialog .mud-list-item .mud-stack {
  min-width: 0;
}

.share-dialog .mud-list-item .mud-typography {
  overflow-wrap: anywhere;
}

/* The trailing access level ("Can view") is short and must stay readable —
   exempt it from the shrinking above, or the row steals its width. */
.share-dialog .share-access-label {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Short confirms shouldn't inherit the 300px form-dialog minimum — the content
   is two lines and the empty space reads as a rendering bug */
.resizable-dialog.uav-confirm-dialog {
  min-height: 0;
  resize: none;
}

/* end _dialogs.scss */
/* _dropzone.scss */
.uav-drop-zone-card {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 29, 46, 0.06), 0 4px 16px rgba(15, 29, 46, 0.06);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.uav-drop-zone-card__inner {
  border: 1.5px dashed rgba(78, 166, 217, 0.45);
  border-radius: 10px;
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(78, 166, 217, 0.05) 0%, rgba(78, 166, 217, 0.1) 100%);
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  pointer-events: none;
}

.uav-drop-zone-card:hover,
.uav-drop-zone-card--over {
  box-shadow: 0 1px 2px rgba(15, 29, 46, 0.06), 0 8px 24px rgba(15, 29, 46, 0.1);
}

.uav-drop-zone-card:hover .uav-drop-zone-card__inner,
.uav-drop-zone-card--over .uav-drop-zone-card__inner {
  background: rgba(214, 235, 247, 0.5);
  border-color: #4ea6d9;
}

.uav-drop-zone-card__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  place-items: center;
  color: #2f7eb0;
  box-shadow: 0 1px 2px rgba(15, 29, 46, 0.06), 0 2px 6px rgba(15, 29, 46, 0.06);
}

.uav-drop-zone-card__icon .mud-icon-root {
  color: #2f7eb0;
}

.uav-drop-zone-card__title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #0f1d2e;
}

.uav-drop-zone-card__sub {
  color: var(--mud-palette-text-secondary);
}

.uav-drop-zone-card__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* end _dropzone.scss */
/* _upload-queue.scss */
.uav-upload-queue__add {
  position: relative;
  border: 1.5px dashed var(--primary-200);
  border-radius: 10px;
  padding: 20px 16px;
  background: var(--primary-100);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.uav-upload-queue__add:hover,
.uav-upload-queue__add--over {
  border-color: var(--primary-400);
}

.uav-upload-queue__add-inner {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--primary-800);
}

.uav-upload-queue__add-title {
  font-weight: 600;
  color: var(--text-primary);
}

.uav-upload-queue__add-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.uav-upload-queue__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  background: var(--surface-primary);
}

.uav-upload-queue__row--cancelled {
  opacity: 0.55;
}

.uav-upload-queue__row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.uav-upload-queue__row-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uav-upload-queue__row-sub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uav-upload-queue__row .flex-none {
  flex: 0 0 auto;
}

/* end _upload-queue.scss */
/* _error-boundary.scss */
.blazor-error-boundary {
  background-color: var(--mud-palette-error);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.8rem 1.8rem;
  padding: 1rem 1rem 1rem 3.7rem;
  color: var(--mud-palette-error-text);
  border-radius: var(--mud-default-borderradius);
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* end _error-boundary.scss */
/* _status-badges.scss */
.uav-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.mud-chip.uav-status-active {
  background-color: var(--mud-palette-success) !important;
  color: var(--mud-palette-success-text) !important;
}

.mud-chip.uav-status-success {
  background-color: var(--mud-palette-success-hover) !important;
  color: var(--mud-palette-success) !important;
}

.mud-chip.uav-status-info {
  background-color: var(--mud-palette-info-hover) !important;
  color: var(--mud-palette-info) !important;
}

.mud-chip.uav-status-warning {
  background-color: var(--mud-palette-warning-hover) !important;
  color: var(--mud-palette-warning-darken) !important;
}

.mud-chip.uav-status-danger {
  background-color: var(--mud-palette-error-hover) !important;
  color: var(--mud-palette-error) !important;
}

.mud-chip.uav-status-muted {
  background-color: var(--mud-palette-background-gray) !important;
  color: var(--mud-palette-text-secondary) !important;
}

/* end _status-badges.scss */
/* _empty-states.scss */
.uav-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  padding: 24px;
  border: 1px dashed var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  background-color: var(--mud-palette-surface);
  color: var(--mud-palette-text-secondary);
  text-align: center;
}

.uav-empty-state-icon {
  color: var(--mud-palette-primary);
  opacity: 0.75;
}

.uav-empty-state-title {
  color: var(--mud-palette-text-primary);
  font-weight: 600;
}

.uav-empty-state-message {
  color: var(--mud-palette-text-secondary);
  font-size: 0.875rem;
  max-width: 520px;
}

/* end _empty-states.scss */
/* _search-results.scss */
.uav-result-row {
  background-color: #ffffff;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  padding: 8px 12px;
  margin-bottom: 8px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.uav-result-row:last-child {
  margin-bottom: 0;
}
.uav-result-row:hover {
  border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
  box-shadow: 0 1px 2px rgba(15, 29, 46, 0.06), 0 6px 18px rgba(15, 29, 46, 0.08);
  transform: translateY(-1px);
}

.uav-grid-link {
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 -4px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.uav-grid-link:hover {
  background-color: var(--primary-100);
}
.uav-grid-link:active {
  background-color: var(--primary-200);
}

/* end _search-results.scss */
/* _surfaces.scss */
:root {
  --uav-card-bg-alpha: 0.7;
  --uav-backdrop-alpha: 0.2;
}

.mud-main-content .mud-paper,
.mud-main-content .mud-card,
.mud-main-content .mud-table-container,
.mud-main-content .mud-expansion-panel {
  background-color: rgba(255, 255, 255, var(--uav-card-bg-alpha));
}

.uav-surface {
  background-color: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
}

.uav-surface-subtle {
  background-color: var(--mud-palette-background-gray);
  color: var(--mud-palette-text-primary);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
}

.uav-surface-elevated {
  background-color: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  box-shadow: var(--mud-elevation-2);
}

.uav-surface-header {
  border-bottom: 1px solid var(--mud-palette-divider);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

/* end _surfaces.scss */
/* _typography.scss */
.uav-subtitle {
  margin-bottom: 8px;
}

/* end _typography.scss */
/* _forms.scss */
/* Keeps an entry field white on a tinted page surface, the same way dialog fields
   stay white against the blue-gray dialog background (see _dialogs.scss). */
.uav-field-light .mud-input.mud-input-outlined,
.uav-field-light .mud-input.mud-input-filled {
  background-color: var(--surface-primary);
  border-radius: var(--mud-default-borderradius);
}

.uav-form-control {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--mud-palette-lines-inputs);
  border-radius: var(--mud-default-borderradius);
  background-color: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary);
  font: inherit;
}

.uav-form-control:hover {
  border-color: var(--mud-palette-primary);
}

.uav-form-control:focus {
  border-color: var(--mud-palette-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--mud-palette-primary-hover);
}

.uav-form-control:disabled,
.uav-form-control[readonly] {
  background-color: var(--mud-palette-action-disabled-background);
  color: var(--mud-palette-text-disabled);
  border-color: var(--mud-palette-lines-default);
  cursor: not-allowed;
}

.uav-form-control.invalid,
.uav-form-control.input-validation-error {
  border-color: var(--mud-palette-error);
}

.uav-form-label {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--mud-palette-text-primary);
  font-weight: 500;
}

.uav-form-help {
  margin-top: 4px;
  color: var(--mud-palette-text-secondary);
  font-size: 0.875rem;
}

/* end _forms.scss */
/* _uav-card.scss */
/* One gap for every pill pairing on a card — the status/count pills in the header
   and the tag pills in the Tags row — so the two can't drift apart. */
.uav-card {
  border-radius: 6px;
}

/* Entity list card header — Project / Client / Mission / Drone / Pilot.
   Replaces MudBlazor's <MudCardHeader> so we control the slots directly.

   Row 1: [avatar] name [kebab] — avatar and kebab are rigid (flex:0 0 auto), the
   name is the only flexible item and carries min-width:0, so a long name WRAPS
   inside its own column instead of shoving the kebab off the card. That's what
   makes name/kebab overlap impossible at any width.
   Row 2: the status + tag chips. */
.uav-card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 0;
  flex: 0 0 auto;
}

.uav-card-header__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uav-card-header__avatar,
.uav-card-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.uav-card-header__actions {
  margin-right: -8px; /* pull the icon button into the corner */
}

/* Between MudBlazor's Small (32px) and Medium (40px): Small reads too small next
   to the title, Medium crowds the name's column on narrow cards. */
.uav-card-header__avatar .mud-avatar {
  width: 36px;
  height: 36px;
}

/* Never truncates. overflow-wrap:break-word (NOT anywhere) only splits a
   pathologically long single token; normal names wrap on spaces or not at all. */
.uav-card-header__name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Status chip + count pill share one wrapping row, left-aligned so the first
   pill's leading edge lines up with the avatar above it. */
.uav-card-header__chips {
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* MudChip ships its own margin, which would indent the first pill out of line
   with the avatar — the row's gap handles spacing instead. */
.uav-card-header__chips .mud-chip {
  margin: 0;
}

/* The count pill is wrapped in a MudBadge (for the count bubble); make the
   wrapper a bare flex box so it can't add spacing of its own and widen the
   Active↔Projects gap relative to the tag pills. */
.uav-card-header__chips .mud-badge-root {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Footer — anchored to the card bottom (mt-auto in markup) so the created date,
   the count pill and the View Details action land at the SAME position on every
   card regardless of how much variable detail sits above. All three share one
   row to save vertical space; they wrap only if the card gets very narrow. */
.uav-card-footer {
  padding-bottom: 16px;
}

.uav-card-footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px;
}

/* Labeled detail rows in the card body. Every field keeps its label so the
   layout is uniform card-to-card; an empty field shows a muted em dash rather
   than collapsing (which would shift everything below it). Editing stays in the
   card's kebab menu — a grid is for scanning, not data entry. */
.uav-detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
}

.uav-detail-row__label {
  flex: 0 0 6rem; /* fits the longest label ("Manufacturer") so values align */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.7;
}

.uav-detail-row__value {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Tags are many-valued, so they get the full row instead of the narrow value
   column: the label sits above and the chips start at the row's left edge,
   left-justified with it, and wrap across as many lines as they need. */
.uav-detail-row--tags {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 0; /* tags are the last row — no need for spacing
   under the pills before the footer gap */
}

.uav-detail-row--tags .uav-detail-row__label {
  flex: 0 0 auto; /* in a column the 6rem basis would set height */
}

/* Tag chips: drop MudChip's built-in margin so the first tag starts flush at the
   row's left edge, and space them with a gap instead. */
.uav-detail-row .mud-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.uav-detail-row .mud-chipset .mud-chip {
  margin: 0;
}

/* Match Typo.body2 (what real values render as). Otherwise the plain span
   inherits the larger base font, empty rows render taller than filled ones, and
   cards with different amounts of data end up with different gaps above the
   footer. */
.uav-detail-row__empty {
  color: var(--text-subtle);
  font-size: 0.875rem;
  line-height: 1.43;
}

/* Opaque variant: matches the data grid surface instead of the translucent paper default */
.mud-main-content .uav-card-solid {
  background-color: var(--white);
}

/* end _typography.scss */
/* Heading-styled edit trigger: entity name + pencil rendered inside the page h1 */
.editable-title {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: none;
  border: none;
  padding: 0.125rem 0.625rem;
  margin-left: -0.625rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: inherit;
}
.editable-title .editable-title-pencil {
  color: var(--gray-500);
  font-size: 1.35rem;
  transition: color 120ms ease;
}
.editable-title:hover, .editable-title:focus-visible {
  background: var(--primary-100);
}
.editable-title:hover .editable-title-pencil, .editable-title:focus-visible .editable-title-pencil {
  color: var(--primary-500);
}
.editable-title:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Non-interactive informational tag chips on entity detail pages (client, project, mission) */
.detail-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.detail-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  background: var(--tag-chip-bg);
  border: 1px solid var(--tag-chip-border);
  color: var(--tag-chip-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
}

.detail-tag-chip .detail-tag-icon {
  font-size: 13px;
  flex: 0 0 auto;
}

.uav-data-grid .mud-table-toolbar {
  height: auto;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.uav-data-grid-clickable tbody .mud-table-row {
  cursor: pointer;
}

.uav-filter-row > * {
  flex: 1 1 200px;
  max-width: 340px;
}

.uav-filter-row > .uav-filter-search {
  flex: 1 1 240px;
  max-width: 460px;
}

.uav-filter-row > .mud-spacer {
  flex: 1 1 auto;
  max-width: none;
}

.uav-filter-row > .uav-filter-clear {
  flex: 0 0 auto;
  max-width: none;
}

/* _kpi-tiles.scss */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 760px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 4 columns only once cards are wide enough for the Active card's 3-stat breakdown */
@media (min-width: 1480px) {
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.kpi-card.uav-card {
  min-width: 0;
  min-height: 130px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kpi-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.kpi-top {
  min-width: 0;
}

.kpi-label {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: clamp(0.95rem, 0.45vw + 0.84rem, 1.15rem);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The Active card's rows line up with the other cards': .kpi-value and .kpi-num share
   line-height (the number-row height), and the label->number, number->caption and
   caption->bar gaps mirror the Active card's (.kpi-active-stats / .kpi-stat-label /
   .kpi-bar margin-top). .kpi-sub and .kpi-stat-label also share a size. Keep paired. */
.kpi-value {
  margin-top: 10px;
  font-size: clamp(1.45rem, 1vw + 0.95rem, 1.95rem);
  font-weight: 700;
  line-height: 2.1rem;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  white-space: nowrap;
}

.kpi-bottom {
  min-width: 0;
  margin-top: 6px;
}

.kpi-sub {
  font-size: clamp(0.85rem, 0.3vw + 0.78rem, 1rem);
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-bar {
  margin-top: 10px;
}

.kpi-active-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kpi-active-stats .kpi-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kpi-active-stats .kpi-num {
  font-size: clamp(1.1rem, 1vw + 0.44rem, 1.55rem);
  font-weight: 700;
  line-height: 2.1rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}
.kpi-active-stats .kpi-stat-label {
  max-width: 100%;
  margin-top: 6px;
  font-size: clamp(0.85rem, 0.3vw + 0.78rem, 1rem);
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-active-stats .kpi-bar {
  width: 100%;
  margin-top: 10px;
}

/* end _kpi-tiles.scss */
/* _storage-banner.scss */
/* The storage figure carries its own state chip beside the label, on both the dashboard tile
   and the usage page panel, rather than a full-width banner repeating the number shown
   directly beneath it. */
.storage-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.storage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.storage-pill .mud-icon-root {
  font-size: 0.85rem;
}

/* Tints of the theme's warning (#ffb545) and error (#ff3f5f), darkened enough for the text to
   stay legible on the pale fill. */
.storage-pill--warn {
  background-color: rgba(255, 181, 69, 0.18);
  color: #8a5200;
}

.storage-pill--critical {
  background-color: rgba(255, 63, 95, 0.14);
  color: #a3123a;
}

.storage-kpi-action {
  margin-top: 12px;
}

/* Usage page tiles stretch to the tallest in their row instead of hugging content */
.usage-tile {
  height: 100%;
}

/* end _storage-banner.scss */
/* _buy-storage-blocks.scss */
/* Icon badge beside the Buy Storage Blocks dialog title */
.buy-blocks-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  background-color: var(--primary-100);
}
.buy-blocks-title-icon .mud-icon-root {
  font-size: 1.25rem;
  color: var(--primary-800);
}

/* Circled close button top-right (MudIconButton is already round — just outline it) */
.buy-blocks-close {
  border: 1px solid var(--gray-300);
}

/* Segmented − / value / + stepper. The middle is a real numeric field so typing
   still works; the segment borders frame it instead of the field's own chrome. */
.buy-blocks-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  background-color: var(--surface-primary);
  overflow: hidden;
}
.buy-blocks-stepper .mud-icon-button {
  border-radius: 0;
  width: 44px;
  height: 44px;
}
.buy-blocks-stepper .buy-blocks-stepper-value {
  width: 72px;
  border-left: 1px solid var(--mud-palette-lines-default);
  border-right: 1px solid var(--mud-palette-lines-default);
}
.buy-blocks-stepper .buy-blocks-stepper-value input {
  text-align: center;
  font-weight: 600;
  font-size: 1.25rem;
  height: 100%;
}
.buy-blocks-stepper .buy-blocks-stepper-value .mud-input:before,
.buy-blocks-stepper .buy-blocks-stepper-value .mud-input:after {
  display: none;
}

/* Before → after summary card; white against the blue-gray dialog surface */
.buy-blocks-summary {
  background-color: var(--surface-primary);
  border: 1px solid var(--gray-200);
  border-radius: var(--mud-default-borderradius);
  padding: 4px 16px;
}
.buy-blocks-summary .buy-blocks-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.buy-blocks-summary .buy-blocks-summary-row + .buy-blocks-summary-row {
  border-top: 1px solid var(--gray-400);
}
.buy-blocks-summary .buy-blocks-after {
  font-weight: 700;
}

/* Card brand mark in a bordered chip — shared by the buy dialog's payment row
   and the selector's method rows */
.payment-method-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 34px;
  flex: none;
  background-color: var(--surface-primary);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}
.payment-method-brand .mud-icon-root {
  font-size: 1.4rem;
  color: var(--primary-800);
}
.payment-method-brand.brand-visa .mud-icon-root {
  color: var(--brand-visa);
}
.payment-method-brand.brand-mastercard .mud-icon-root {
  color: var(--brand-mastercard);
}

/* Filled circular check badge on the selected method row */
.payment-method-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background-color: var(--primary-500);
}
.payment-method-check .mud-icon-root {
  font-size: 0.8rem;
  color: var(--white);
}

/* Payment method row on the billing page keeps a card-like width */
.billing-payment {
  max-width: 480px;
}

/* Current payment method row on the buy dialog */
.buy-blocks-payment {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--surface-primary);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  padding: 10px 16px;
}
.buy-blocks-payment .buy-blocks-payment-text {
  flex: 1;
  min-width: 0;
}

/* Selectable rows in the payment method placeholder dialog */
.payment-method-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.payment-method-list .payment-method-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background-color: var(--surface-primary);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.payment-method-list .payment-method-row:hover {
  border-color: var(--primary-400);
}
.payment-method-list .payment-method-row.selected {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 1px var(--primary-500);
  background-color: color-mix(in srgb, var(--primary-100) 45%, var(--surface-primary));
}
.payment-method-list .payment-method-row .payment-method-text {
  flex: 1;
  min-width: 0;
}
.payment-method-list .payment-method-add > .mud-icon-root {
  font-size: 1.25rem;
  color: var(--primary-500);
}

/* Neutral secondary Cancel under the primary Buy — visibly clickable without
   competing blue-on-blue with the purchase button */
.mud-button-root.buy-blocks-cancel {
  background-color: var(--surface-primary);
  border-color: var(--gray-300);
  color: var(--text-secondary);
}
.mud-button-root.buy-blocks-cancel:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}

/* Bottom breathing room to mirror the title area's spacing — the footnote is the
   last element, so without this it sits tight against the dialog edge */
.buy-blocks-dialog .mud-dialog-content {
  padding-bottom: 24px;
}

/* Centered assurance line under the stacked action buttons */
.buy-blocks-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
}
.buy-blocks-footnote .mud-icon-root {
  font-size: 0.9rem;
}

/* end _buy-storage-blocks.scss */
/* _storage-usage-bar.scss */
/* Segmented capacity bar: the track is total capacity split by source (plan,
   purchased blocks, budget headroom); the fill is usage flowing across it.
   Fill color follows the 554 thresholds: warning at 75%, error at 90%. */
.storage-usage-bar {
  width: 100%;
}
.storage-usage-bar .storage-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
}
.storage-usage-bar .storage-usage-used,
.storage-usage-bar .storage-usage-pct {
  font-weight: 600;
}
.storage-usage-bar .storage-usage-track {
  display: flex;
  gap: 2px;
  height: 14px;
}
.storage-usage-bar .storage-usage-track .storage-usage-seg {
  min-width: 0;
  overflow: hidden;
  background-color: var(--gray-200);
}
.storage-usage-bar .storage-usage-track .storage-usage-seg:first-child {
  border-radius: 999px 0 0 999px;
}
.storage-usage-bar .storage-usage-track .storage-usage-seg:last-child {
  border-radius: 0 999px 999px 0;
}
.storage-usage-bar .storage-usage-track .storage-usage-seg:only-child {
  border-radius: 999px;
}
.storage-usage-bar .storage-usage-track .storage-usage-seg.blocks {
  background-color: var(--primary-100);
}
.storage-usage-bar .storage-usage-track .storage-usage-seg {
  /* Budget capacity is potential, not purchased — striped, not solid */
}
.storage-usage-bar .storage-usage-track .storage-usage-seg.budget {
  background: repeating-linear-gradient(135deg, var(--primary-100) 0 6px, var(--gray-100) 6px 12px);
}
.storage-usage-bar .storage-usage-track .storage-usage-seg .storage-usage-fill {
  height: 100%;
  background-color: var(--primary-500);
}
.storage-usage-bar .storage-usage-track.warn .storage-usage-fill {
  background-color: var(--mud-palette-warning);
}
.storage-usage-bar .storage-usage-track.critical .storage-usage-fill {
  background-color: var(--mud-palette-error);
}
.storage-usage-bar .storage-usage-labels {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.storage-usage-bar .storage-usage-labels span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* end _storage-usage-bar.scss */
/* _budget-section.scss */
/* Range facts stacked right-aligned under the slider; anchors the popover */
.budget-range-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  position: relative;
}

.budget-range-popover {
  min-width: 280px;
}

.budget-range-preview {
  font-weight: 600;
}

/* end _budget-section.scss */
/* _tag-editor.scss */
.tag-editor {
  min-height: 42px;
  border-radius: 8px;
}

.tag-input {
  min-width: 140px;
  flex: 1 1 140px;
}

/* end _tag-editor.scss */
/* _global-search-bar.scss
   Header global search bar. Search, date range, and Active-only are three parts
   of one search (they all drive the same /search querystring), so they render as
   a single segmented "instrument" pill rather than three separate controls.

   Colors come from the theme palette via CSS vars + color-mix, matching the
   frosted-glass app bar treatment in mud/_overrides.scss.

   Responsive behavior:
   - Header search bar is visible at >= 800px viewport.
   - Below 800px, the header bar collapses to a search icon button that
     links to /search. */
/* 24px gap between the brand and the search group (mockup spec). */
.header-search-slot {
  display: flex;
  align-items: center;
  margin-left: 24px;
}

.header-search-icon-slot {
  display: none;
  margin-left: 24px;
}

@media (max-width: 800px) {
  .header-search-slot {
    display: none;
  }
  .header-search-icon-slot {
    display: flex;
    align-items: center;
  }
}
.global-search-bar {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  /* Scale fluidly with viewport so the group always leaves room for
     logo + AccountSwitcher + ProfileMenu + padding.
     At very wide viewports caps at 720px; at narrow ones floors at 360px. */
  width: clamp(360px, 100vw - 480px, 720px);
}

.search-instrument {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--mud-palette-surface);
  border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
  /* MudMenu wraps the date-range activator in a wrapper that collapses to its
     content height; force the chain to fill the instrument so the applied tint
     reaches the pill's top and bottom like the other segments. */
}
.search-instrument .mud-menu,
.search-instrument .mud-menu-activator {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.search-instrument .si-divider {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 24px;
  background: color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}
.search-instrument .si-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding-left: 12px;
}
.search-instrument .si-seg {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--mud-palette-text-primary);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.search-instrument .si-seg:hover {
  background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}
.search-instrument button.si-seg {
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
}
.search-instrument button.si-seg:hover {
  background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}
.search-instrument {
  /* Match the search text (16px regular) so the filter labels read as
     secondary controls rather than bold emphasis. */
}
.search-instrument .si-seg-label {
  font-size: 1rem;
  font-weight: 400;
}
.search-instrument .si-seg .si-chev {
  opacity: 0.6;
}
.search-instrument .si-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mud-palette-text-secondary);
  transition: background-color 0.15s ease;
}
.search-instrument {
  /* applied (date range set) / on (active-only engaged): tint with the
     primary palette so the bar shows what's filtering at a glance. */
}
.search-instrument .si-seg.si-applied,
.search-instrument .si-seg.si-on {
  background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
  color: var(--mud-palette-primary);
}
.search-instrument .si-seg.si-applied .mud-icon-root,
.search-instrument .si-seg.si-applied .si-chev,
.search-instrument .si-seg.si-on .mud-icon-root,
.search-instrument .si-seg.si-on .si-chev {
  color: var(--mud-palette-primary);
}
.search-instrument .si-seg.si-applied:hover,
.search-instrument .si-seg.si-on:hover {
  background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}
.search-instrument .si-seg.si-on .si-dot {
  background: var(--mud-palette-primary);
}
.search-instrument .si-search-input {
  flex: 1 1 auto;
  margin: 0;
}
.search-instrument .si-search-input .mud-input-control,
.search-instrument .si-search-input .mud-input {
  margin-top: 0;
}
.search-instrument .si-search-input .mud-input.mud-input-text {
  padding: 0;
}
.search-instrument .si-search-input .mud-input-slot {
  color: var(--mud-palette-text-primary);
  /* MudBlazor's dense input has uneven vertical padding (3px/7px)
     that pushes the text off center; even it out. !important is
     needed to beat MudBlazor's more specific padding-top rule. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.search-instrument .si-search-input .mud-input-slot::placeholder {
  color: var(--mud-palette-text-secondary);
  opacity: 1;
}
.search-instrument .si-search-input .mud-input-adornment .mud-icon-root {
  color: var(--mud-palette-text-secondary);
}

/* end _global-search-bar.scss */
/* _markdown.scss */
.markdown-body {
  color: var(--mud-palette-text-primary);
  line-height: 1.6;
  font-size: 14px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 1.25em 0 0.5em;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h1 {
  font-size: 1.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--mud-palette-divider);
}

.markdown-body h2 {
  font-size: 1.4em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--mud-palette-divider);
}

.markdown-body h3 {
  font-size: 1.2em;
}

.markdown-body h4 {
  font-size: 1.05em;
}

.markdown-body h5 {
  font-size: 1em;
}

.markdown-body h6 {
  font-size: 0.9em;
  color: var(--mud-palette-text-secondary);
}

.markdown-body p {
  margin: 0 0 0.85em;
}

.markdown-body ul,
.markdown-body ol {
  margin: 0 0 0.85em;
  padding-left: 2em;
}

.markdown-body li + li {
  margin-top: 0.25em;
}

.markdown-body a {
  color: var(--mud-palette-primary);
  text-decoration: none;
}

.markdown-body a:hover {
  text-decoration: underline;
}

.markdown-body code {
  background-color: var(--mud-palette-action-default-hover);
  padding: 0.15em 0.35em;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.markdown-body pre {
  background-color: var(--mud-palette-action-default-hover);
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0 0 0.85em;
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.9em;
  line-height: 1.5;
}

.markdown-body blockquote {
  margin: 0 0 0.85em;
  padding: 0.25em 1em;
  color: var(--mud-palette-text-secondary);
  border-left: 4px solid var(--mud-palette-divider);
  background-color: var(--mud-palette-background-gray);
}

.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-body table {
  border-collapse: collapse;
  margin: 0 0 0.85em;
  width: auto;
  max-width: 100%;
}

.markdown-body th,
.markdown-body td {
  border: 1px solid var(--mud-palette-divider);
  padding: 6px 12px;
  text-align: left;
  vertical-align: top;
}

.markdown-body th {
  background-color: var(--mud-palette-background-gray);
  font-weight: 600;
}

.markdown-body hr {
  border: 0;
  border-top: 1px solid var(--mud-palette-divider);
  margin: 1.5em 0;
}

.markdown-body img {
  max-width: 100%;
  height: auto;
}

/* end _markdown.scss */
/* _cookie-consent.scss */
.cookie-consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1300; /* below MudDialog (1400) so Customize layers on top */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 16px 24px;
  background-color: var(--surface-primary);
  border-top: 1px solid var(--border-medium);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

.cookie-consent-banner__text {
  flex: 1 1 320px;
  min-width: 0;
  color: var(--text-secondary);
}

.cookie-consent-banner__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.cookie-consent-option {
  margin-bottom: 12px;
}
.cookie-consent-option .mud-input-control {
  margin-bottom: 0;
}
.cookie-consent-option .mud-typography-caption {
  display: block;
  margin-inline-start: 52px; /* align under the switch label */
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .cookie-consent-banner__actions {
    width: 100%;
  }
  .cookie-consent-banner__actions .mud-button {
    flex: 1 1 auto;
  }
}
/* end _cookie-consent.scss */
/* _impersonation-banner.scss */
/* Deliberately high-contrast and pinned below the app bar: an employee must never mistake a
   client's account for their own, so this stays visible on every page and scroll. The banner is
   a real shell row: the complete drawer surface and main content both begin below it. */
.uav-layout--impersonating,
.mud-layout:has(> .uav-impersonation-banner) {
  --uav-impersonation-banner-height: 48px;
  --uav-impersonation-banner-gap: 12px;
  --uav-shell-content-offset: calc(
      var(--uav-shell-content-top)
      + var(--uav-impersonation-banner-height)
      + var(--uav-impersonation-banner-gap)
  );
}

.uav-impersonation-banner {
  position: fixed;
  top: var(--uav-shell-content-top);
  left: 0;
  right: 0;
  z-index: calc(var(--mud-zindex-drawer, 1100) + 1);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px 16px;
  width: 100%;
  height: var(--uav-impersonation-banner-height, 48px);
  padding: 8px 24px;
  background-color: var(--warning);
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-primary);
}

.uav-impersonation-banner__icon {
  flex: 0 0 auto;
}

.uav-impersonation-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.uav-impersonation-banner__exit {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* Section nav across the internal admin pages */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}

.admin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.admin-nav-item:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}
.admin-nav-item.active {
  background: var(--primary-100);
  color: var(--primary-800);
}

/* Rows on the admin Staff screen: identity on the left, staff toggle on the right */
.admin-staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}
.admin-staff-row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

/* The staff search looks for one person, so it stays short rather than
   stretching the full container width like a filter over a list would. */
.admin-staff-search {
  max-width: 420px;
}

/* Presence indicator on the admin online-users list */
.online-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

/* Admin audit log table */
/* Timestamps carry no useful wrap point: without this the date breaks across
   three lines and doubles the height of every row. */
.audit-log-table th:first-child,
.audit-log-table td:first-child {
  white-space: nowrap;
}

/* Expanded detail row on the admin audit log table */
.audit-log-details {
  background: var(--gray-100);
  border-bottom: 1px solid var(--border-light);
}

.audit-log-json {
  margin: 4px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--gray-100);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

.audit-log-useragent {
  max-width: 480px;
  overflow-wrap: anywhere;
}

/* _public-footer.scss */
/*
   Shared public footer. Rendered unfixed on the home page, where it inherits the
   white text of the dark home panel, and pinned to the viewport bottom on the
   public content pages via FixedPublicFooterComponent, where it gets the storm
   treatment below.
*/
.public-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: inherit;
}

.public-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}

.public-footer-legal {
  font-size: 0.75rem;
  opacity: 0.7;
}

/*
   Fixed variant — "dark storm" bar with "lightning" text.

   The bar is a dark storm sky: a near-black vertical base with two off-centre
   radial washes standing in for cloud break, one deep blue and one indigo. The
   asymmetric placement is deliberate, since an even gradient reads as a UI
   panel rather than weather.

   The links are the lightning: near-white with a cyan core glow and a wider,
   softer blue halo. Hover tightens the core and widens the halo, so the link
   reads as a strike brightening rather than a colour change.

   All colours come from theme tokens, per the SCSS rules — no literals.
*/
.fixed-public-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: radial-gradient(ellipse 60% 140% at 22% 0%, color-mix(in srgb, var(--deep-blue) 55%, transparent) 0%, transparent 62%), radial-gradient(ellipse 50% 120% at 78% 8%, color-mix(in srgb, var(--indigo) 28%, transparent) 0%, transparent 58%), linear-gradient(180deg, var(--text-primary) 0%, color-mix(in srgb, var(--black) 82%, var(--text-primary)) 100%);
  border-top: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent);
  box-shadow: 0 -2px 14px color-mix(in srgb, var(--blue) 16%, transparent);
}

.fixed-public-footer .public-footer {
  margin-top: 0;
  color: color-mix(in srgb, var(--white) 90%, var(--cyan));
}

.fixed-public-footer .public-footer-links a {
  color: inherit;
  letter-spacing: 0.01em;
  text-shadow: 0 0 4px color-mix(in srgb, var(--cyan) 50%, transparent), 0 0 12px color-mix(in srgb, var(--blue) 32%, transparent);
  transition: color 160ms ease, text-shadow 160ms ease;
}

.fixed-public-footer .public-footer-links a:hover,
.fixed-public-footer .public-footer-links a:focus-visible {
  color: var(--white);
  text-shadow: 0 0 5px var(--cyan), 0 0 18px color-mix(in srgb, var(--blue) 55%, transparent);
}

.fixed-public-footer .public-footer-legal {
  opacity: 1;
  color: color-mix(in srgb, var(--white) 52%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--blue) 22%, transparent);
}

.fixed-public-footer-spacer {
  height: 4.5rem;
}

/* end _public-footer.scss */
/* _settings.scss */
.account-nav {
  background-color: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius);
  box-shadow: var(--mud-elevation-1);
}

.account-nav-menu .mud-nav-item > a.mud-nav-link {
  color: var(--mud-palette-text-primary);
}
.account-nav-menu .mud-nav-item > a.mud-nav-link:hover {
  background-color: var(--mud-palette-action-default-hover);
  color: var(--mud-palette-primary);
}
.account-nav-menu .mud-nav-item > a.mud-nav-link.active {
  position: relative;
  font-weight: 600;
  color: var(--mud-palette-primary) !important;
  background-color: var(--mud-palette-primary-hover);
}
.account-nav-menu .mud-nav-item > a.mud-nav-link.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background-color: var(--mud-palette-primary);
  border-radius: 2px;
}
.account-nav-menu .mud-nav-item > a.mud-nav-link.active .mud-nav-link-icon {
  color: var(--mud-palette-primary) !important;
}

.nav-group-spacer {
  height: 12px;
}

/* end _settings.scss */
/* _subscription.scss */
/* Two modes only: all three side by side, or all stacked. The switch keys off the
   cards' own container, at the exact point content starts spilling: the widest
   title row ("Professional" + selection icon) measures 164px, so a card holds
   together down to 208px (padding + selected border included) and three-across
   needs 648px of container (2 × 12px gaps). Below that, stack. */
.tier-grid-container {
  container-type: inline-size;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@container (max-width: 647px) {
  .tier-grid {
    grid-template-columns: 1fr;
  }
}
.tier-card {
  height: 100%;
  padding: 20px;
  cursor: pointer;
  border: 1px solid var(--mud-palette-lines-default);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.tier-card:hover {
  transform: translateY(-2px);
  border-color: var(--mud-palette-primary);
}

.tier-card-selected {
  border: 2px solid var(--mud-palette-primary);
}

/* Read-only cards (public pricing page): no click affordance. */
.tier-card--static {
  cursor: default;
}

.tier-card--static:hover {
  transform: none;
  border-color: var(--mud-palette-lines-default);
}

.tier-feature-list {
  margin: 0;
  padding-left: 20px;
}

.tier-feature-list li {
  margin-bottom: 6px;
}

/* end _subscription.scss */
/* _dashboard.scss */
.dashboard-background {
  position: relative;
  min-height: 100vh;
  background: transparent;
  color: var(--mud-palette-text-primary);
}

.dashboard-background .mud-container {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.dashboard-background .mud-container .missions-section {
  max-width: 1280px;
}

/* end _dashboard.scss */
/* _home.scss */
.home-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("/images/home-bg.png") center/cover no-repeat;
  display: flex;
  align-items: stretch;
}

.home-panel {
  position: relative;
  z-index: 1;
  width: 52%;
  min-width: 640px;
  margin-left: 4rem;
  background: color-mix(in srgb, var(--mud-palette-dark) 42%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 3rem;
  color: var(--mud-palette-white);
}

.home-title {
  font-size: 6.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  color: var(--mud-palette-white);
}

.home-tagline {
  font-style: italic;
  font-weight: 300;
  font-size: 1.75rem;
  margin: 0.2rem 0 2rem 0;
  color: color-mix(in srgb, var(--mud-palette-white) 95%, transparent);
  white-space: nowrap;
  text-align: center;
}

.home-login-btn {
  align-self: center;
  min-width: 160px;
}

.home-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.5rem;
  padding: 0.5rem 0;
  color: var(--mud-palette-white);
}

.home-feature {
  text-align: center;
  padding: 0 0.75rem;
  border-right: 1px solid color-mix(in srgb, var(--mud-palette-white) 15%, transparent);
}

.home-features .home-feature:last-child {
  border-right: none;
}

.home-feature-icon {
  color: var(--mud-palette-primary-lighten) !important;
  font-size: 2.25rem !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  margin-bottom: 0.5rem;
}

.home-feature-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--mud-palette-white);
}

.home-feature-desc {
  font-size: 0.85rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--mud-palette-white) 88%, transparent);
}

/* end _home.scss */
.contact-us-page {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.contact-us-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface-primary);
}

.contact-us-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-us-turnstile {
  min-height: 65px;
}

html,
body {
  min-height: 100%;
  background-color: var(--background);
  background-image: url("/images/app-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-primary);
}

body {
  margin: 0;
}

h1:focus {
  outline: none;
}

#app,
.uav-app,
.uav-page {
  min-height: 100vh;
  color: var(--text-primary);
}

.uav-app,
.uav-page {
  background: transparent;
}

/* end app.scss */

/*# sourceMappingURL=app.css.map */