/* OrionDrone APP R24 — compact, theme-safe production workspace. */
:root {
  --r24-purple: #5b217a;
  --r24-purple-on-dark: #d9a7f2;
  --r24-turquoise: #008d95;
  --r24-turquoise-on-dark: #42d9dc;
  --r24-divider-size: 10px;
  --r24-panel-width: var(--od-panel-width);
  --r24-mobile-map-height: 36dvh;
}

html[data-theme="dark"] {
  --r24-accent: var(--r24-purple-on-dark);
  --r24-accent-soft: color-mix(in srgb, var(--r24-purple-on-dark) 13%, transparent);
  --r24-teal: var(--r24-turquoise-on-dark);
}

html[data-theme="light"] {
  --r24-accent: var(--r24-purple);
  --r24-accent-soft: color-mix(in srgb, var(--r24-purple) 9%, white);
  --r24-teal: var(--r24-turquoise);
}

/* Rewritten top bar: brand / context / icon actions. */
.od-r24-header {
  display: grid !important;
  grid-template-columns: minmax(150px, auto) minmax(220px, 1fr) minmax(300px, auto);
  gap: 14px;
  height: var(--od-header-height);
  padding-inline: clamp(12px, 1.4vw, 26px);
}

.od-r24-header .od-brand-group { justify-self: start; direction: rtl; }
.od-r24-header .od-brand-logo { width: 76px; }
.od-header-context {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--od-text-2);
}
.od-header-context strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 720;
}
.od-header-context button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--r24-accent) 40%, var(--od-line-2));
  border-radius: 8px;
  background: var(--r24-accent-soft);
  color: var(--r24-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.od-header-context button[hidden] { display: none; }
.od-r24-header .od-header-actions {
  justify-self: end;
  direction: ltr;
  gap: 5px !important;
}
.od-r24-header .od-header-button,
.od-r24-header .od-r24-account-button,
.od-r24-header .od-r24-portal-link {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid var(--od-line-2) !important;
  border-radius: 9px !important;
  background: var(--od-surface-1) !important;
  color: var(--od-text-2) !important;
  box-shadow: none !important;
}
.od-r24-header .od-header-button:hover,
.od-r24-header .od-r24-account-button:hover {
  border-color: var(--r24-accent) !important;
  color: var(--r24-accent) !important;
}
.od-r24-header #od-app-language-button { width: 48px !important; min-width: 48px !important; gap: 3px; }
.od-r24-header #od-app-whatsapp-link { display: inline-flex; align-items: center; justify-content: center; color: var(--r24-teal) !important; }
.od-r24-header .od-r24-portal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 66px !important;
  padding-inline: 10px !important;
  color: var(--r24-accent) !important;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}
.od-r24-header .od-r24-account-button .od-account-copy { display: none !important; }
.od-r24-header .od-r24-account-button .od-account-avatar { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }

/* Resizable workspace. JS supplies a clamped --r24-panel-width. */
.od-app-main {
  grid-template-columns: minmax(420px, 1fr) var(--r24-divider-size) minmax(360px, var(--r24-panel-width)) !important;
}
.od-workspace-divider {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--r24-divider-size);
  min-width: var(--r24-divider-size);
  background: color-mix(in srgb, var(--r24-teal) 10%, var(--od-surface-0));
  border-inline: 1px solid color-mix(in srgb, var(--r24-teal) 34%, var(--od-line-1));
  color: var(--r24-teal);
  cursor: col-resize;
  touch-action: none;
  outline: none;
}
.od-workspace-divider::before { content: ""; width: 2px; height: 46px; border-radius: 2px; background: currentColor; opacity: .72; }
.od-workspace-divider .od-icon { display: none; }
.od-workspace-divider:hover,
.od-workspace-divider:focus-visible,
.od-workspace-divider.is-dragging { background: color-mix(in srgb, var(--r24-teal) 19%, var(--od-surface-0)); }
body.is-r24-resizing { cursor: col-resize; user-select: none; }

.od-mission-description-field { gap: 5px !important; }
.od-mission-description-field textarea { min-height: 72px; max-height: 150px; resize: vertical; }
#od-app-mission-description-optional { color: var(--od-text-4); font-size: 10px; font-weight: 500; }
#od-app-mission-description-counter { color: var(--od-text-4); font-size: 10px; }

/* Exact 2D/3D state remains readable in both themes. */
.od-dimension-badge {
  border-color: color-mix(in srgb, var(--r24-accent) 55%, var(--od-line-2)) !important;
  background: var(--r24-accent-soft) !important;
  color: var(--r24-accent) !important;
  box-shadow: none !important;
}
html[data-mission-dimension="2d"] .od-dimension-badge::before { content: "2D · "; direction: ltr; }
html[data-mission-dimension="3d"] .od-dimension-badge::before { content: "3D · "; direction: ltr; }

/* Terrain-follow is an explicit KMZ option, not a floating checkbox. */
#od-app-terrain-follow-label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--r24-teal) 38%, var(--od-line-2));
  border-radius: 10px;
  background: color-mix(in srgb, var(--r24-teal) 7%, var(--od-surface-1));
}
#od-app-terrain-follow-copy::after {
  content: " · נשלח למנוע KMZ כ־Real‑Time Follow Surface";
  color: var(--r24-teal);
  font-size: 10px;
}

/* Stage 4: three tight GCP rows and true 50/50 product selectors. */
#od-app-service-gcp-body { gap: 0 !important; padding-block: 3px !important; }
#od-app-service-gcp-count-row,
#od-app-service-gcp-status,
#od-app-service-gcp-methods { min-height: 31px !important; margin: 0 !important; }
#od-app-service-gcp-methods { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5px !important; }
.od-r24-split-service .od-service-body { padding: 6px !important; }
.od-r24-product-halves {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.od-r24-product-halves .od-format-chip {
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 8px !important;
  text-align: start;
  border-color: var(--od-line-2) !important;
  background: var(--od-surface-1) !important;
  color: var(--od-text-2) !important;
}
.od-r24-product-halves .od-format-chip span:last-child { display: grid; gap: 2px; }
.od-r24-product-halves .od-format-chip b { color: var(--od-text-1); font-size: 11px; }
.od-r24-product-halves .od-format-chip small { color: var(--od-text-4); font-size: 9px; }
.od-r24-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--r24-teal);
  border-radius: 5px;
  color: transparent;
}
.od-r24-product-halves .od-format-chip.is-selected {
  border-color: var(--r24-teal) !important;
  background: color-mix(in srgb, var(--r24-teal) 8%, var(--od-surface-1)) !important;
}
.od-r24-product-halves .od-format-chip.is-selected .od-r24-check { background: var(--r24-teal); color: var(--od-bg); }
.od-cad-explanation { margin: 0; color: var(--od-text-3); font-size: 10px; line-height: 1.45; }

/* Stage 5 returns to the clean customer quote; manager editing is inline. */
#od-app-admin-pricing { display: none !important; }
.od-admin-price-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--r24-accent) 45%, var(--od-line-2));
  border-radius: 8px;
  background: var(--r24-accent-soft);
  color: var(--r24-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}
.od-admin-price-edit-toggle[hidden] { display: none !important; }
.od-inline-price-editor { display: none; align-items: center; gap: 5px; }
.od-inline-price-editor input {
  width: 92px;
  height: 32px;
  border: 1px solid var(--r24-accent);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--od-surface-2);
  color: var(--od-text-1);
  font: inherit;
  font-weight: 750;
}
html[data-r24-price-editing="true"] .od-inline-price-editor { display: inline-flex; }
html[data-r24-price-editing="true"] .od-r24-price-display { display: none; }
.od-inline-discount-editor {
  display: none;
  grid-template-columns: 110px 100px minmax(140px, 1fr) auto;
  gap: 6px;
  padding: 8px 0 0;
  border-top: 1px solid var(--od-line-1);
}
html[data-r24-price-editing="true"] .od-inline-discount-editor { display: grid; }
.od-inline-discount-editor select,
.od-inline-discount-editor input,
.od-inline-discount-editor button { min-width: 0; height: 32px; border: 1px solid var(--od-line-2); border-radius: 7px; padding: 0 8px; background: var(--od-surface-2); color: var(--od-text-1); font: inherit; font-size: 10px; }
.od-inline-discount-editor button { border-color: var(--r24-accent); background: var(--r24-accent-soft); color: var(--r24-accent); font-weight: 800; }
.od-inline-discount-editor output { grid-column: 1 / -1; min-height: 1em; color: var(--r24-teal); font-size: 10px; }

/* Compact admin flight controls; the start point is selected on the map. */
.od-admin-mission-control {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px !important;
  margin: 5px 0 0 !important;
  padding: 6px 8px !important;
  border: 1px solid var(--od-line-2) !important;
  border-radius: 9px !important;
  background: var(--od-surface-1) !important;
  color: var(--od-text-2) !important;
}
.od-admin-mission-control > div { display: flex; align-items: center; gap: 5px; }
.od-admin-mission-control button {
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 7px !important;
  border: 1px solid var(--od-line-2) !important;
  border-radius: 7px !important;
  background: var(--od-surface-2) !important;
  color: var(--r24-accent) !important;
  font: inherit;
  font-weight: 800;
}
.od-admin-map-start-control button { min-width: 148px !important; }
.od-admin-map-start-control output { color: var(--r24-teal); font-size: 10px; }
.od-admin-map-start-control.is-selecting button { border-color: var(--r24-teal) !important; color: var(--r24-teal) !important; }

@media (orientation: portrait), (max-width: 760px) {
  .od-app-shell {
    grid-template-rows: var(--od-header-height) var(--r24-mobile-map-height) var(--r24-divider-size) minmax(330px, 1fr) var(--od-progress-height) var(--od-footer-height) !important;
    grid-template-areas: "header" "map" "divider" "panel" "progress" "footer" !important;
  }
  .od-app-main { display: contents !important; }
  .od-map-region { grid-area: map; min-height: 210px; }
  .od-workspace-divider {
    grid-area: divider;
    width: 100%;
    min-width: 0;
    height: var(--r24-divider-size);
    min-height: var(--r24-divider-size);
    border-inline: 0;
    border-block: 1px solid color-mix(in srgb, var(--r24-teal) 34%, var(--od-line-1));
    cursor: row-resize;
  }
  .od-workspace-divider::before { width: 46px; height: 2px; }
  body.is-r24-resizing { cursor: row-resize; }
  .od-r24-header {
    grid-template-columns: auto minmax(80px, 1fr) auto;
    gap: 6px;
    padding-inline: 7px;
  }
  .od-r24-header .od-brand-logo { width: 62px; }
  .od-r24-header .od-brand-divider,
  .od-r24-header .od-brand-product { display: none !important; }
  .od-header-context { justify-content: flex-start; }
  .od-header-context strong { font-size: 10px; }
  .od-header-context button { width: 30px; min-width: 30px; padding: 0; font-size: 0; }
  .od-header-context button::after { content: "↻"; font-size: 15px; }
  .od-r24-header .od-header-actions { gap: 2px !important; }
  .od-r24-header .od-header-button,
  .od-r24-header .od-r24-account-button { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; }
  .od-r24-header #od-app-language-button { width: 38px !important; min-width: 38px !important; }
  .od-r24-header .od-r24-portal-link { min-width: 38px !important; height: 30px !important; min-height: 30px !important; padding-inline: 5px !important; font-size: 9px; }
  #od-app-help-button { display: none !important; }
  .od-inline-discount-editor { grid-template-columns: 1fr 1fr; }
  .od-inline-discount-editor input[placeholder] { grid-column: 1 / -1; }
  .od-r24-product-halves { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
  #od-app-video-button { display: none !important; }
  .od-header-context strong { max-width: 110px; }
  .od-r24-product-halves .od-format-chip { min-height: 49px !important; padding: 5px 6px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .od-workspace-divider, .od-admin-price-edit-toggle { transition: none !important; }
}