/* Clearfork Intelligence Design System */
/* Shared brand tokens for the Clearfork Intelligence product suite */

:root {
  /* Layout Variables */
  --header-height: 56px;

  /* Clearfork Intelligence Brand Colors */
  --primary: #003B5C;
  --primary-light: #1B4F72;
  --primary-dark: #00293d;
  --accent: #4CAF50;
  --accent-light: #66BB6A;
  --accent-dark: #388E3C;

  /* Neutral Palette */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Status Colors */
  --success: #1B5E20;
  --success-light: #2E7D32;
  --success-bg: rgba(5, 150, 105, 0.1);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.1);
  --warning-text: #92400e;
  --warning-border: #fbbf24;
  --warning-surface: #fffbeb;
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.1);
  --info: #0084FF;
  --info-bg: rgba(0, 132, 255, 0.1);
  --info-border: #0084FF;
  --info-surface: #eff6ff;

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

/* ============================================================
   APP HEADER - Solid navy with green product name
   Matches Document Intelligence header pattern
   ============================================================ */

.app-header {
  background: var(--primary);
  color: white;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
}

.app-header .logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.app-header .logo-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.app-header h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent);
}

.app-header .subtitle {
  font-size: 0.8rem;
  opacity: 0.8;
  color: white;
  margin-left: var(--space-2);
  font-weight: 400;
}

.app-header a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}

.app-header a:hover {
  color: white;
}

/* ============================================================
   FULLSCREEN MAP LAYOUT
   Layout uses icon rail + sliding content panels.
   ============================================================ */

/* ============================================================
   SIDEBAR SECTIONS
   ============================================================ */

.sidebar-section-compact {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
}

.sidebar-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 12px 0;
}

/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.search-results-container {
  max-height: 300px;
  overflow-y: auto;
}

.survey-result-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.survey-result-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 59, 92, 0.15);
}

/* ============================================================
   BUTTONS - Brand-consistent overrides
   ============================================================ */

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.btn-success {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

.btn-success:hover {
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.text-brand-primary { color: var(--primary); }
.text-brand-accent { color: var(--accent); }
.text-brand-success { color: var(--success); }
.text-muted { color: var(--gray-500); }
.text-secondary { color: var(--gray-600); }

.bg-brand-surface { background-color: var(--gray-50); }
.bg-brand-success-light { background-color: #e8f5e8; }

/* ============================================================
   STATUS PILLS - Project status summary
   ============================================================ */

.status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.status-pill .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-pill .status-count {
  font-weight: 700;
  color: var(--primary);
}

/* ============================================================
   SECTION DETAILS PANEL
   ============================================================ */

.section-details-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px;
}

.section-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-details-header h6 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.section-details-card .form-group {
  margin-bottom: 8px;
}

.section-details-card label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 3px;
}

.section-details-card textarea {
  font-size: 0.8rem;
  resize: vertical;
}

.save-feedback {
  font-size: 0.7rem;
  color: var(--accent-dark);
  font-style: italic;
  margin-top: 4px;
}

/* ============================================================
   MANAGE STATUSES MODAL
   ============================================================ */

.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  margin-bottom: 6px;
  background: white;
}

.status-row .status-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  flex-shrink: 0;
  cursor: pointer;
}

.status-row .status-label-text {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-row .status-protected {
  font-size: 0.7rem;
  color: var(--gray-400);
  font-style: italic;
}

.add-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  margin-top: 10px;
  background: var(--gray-50);
}

.add-status-row .form-control {
  font-size: 0.8rem;
  padding: 4px 8px;
}

/* ============================================================
   ENHANCED POPUP STYLES
   ============================================================ */

.survey-popup-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  margin-top: 4px;
}

.popup-actions {
  display: flex;
  gap: 4px;
  padding: 6px;
}

.popup-actions button {
  flex: 1;
  padding: 5px 6px;
  border: none;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.popup-actions .popup-btn-status {
  background: #4CAF50;
  color: white;
}

.popup-actions .popup-btn-details {
  background: var(--primary);
  color: white;
}

/* ============================================================
   AUTHENTICATION PAGE
   ============================================================ */

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0b1c2c 0%, #003B5C 50%, #1B4F72 100%);
  padding: 24px;
}

.auth-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  width: 420px;
  max-width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.auth-card__logo {
  margin-bottom: 8px;
}

.auth-card__logo-img {
  width: 280px;
  height: 160px;
  object-fit: contain;
}

.auth-card__title {
  margin: 0 0 4px 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.auth-card__subtitle {
  margin: 0 0 24px 0;
  font-size: 0.85rem;
  color: var(--gray-500);
}

.auth-card__features {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
  text-align: left;
}

.auth-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.8rem;
  color: var(--gray-600);
}

.auth-feature i {
  color: var(--accent);
  width: 16px;
  text-align: center;
}

.auth-card__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.75rem;
  color: var(--gray-400);
}

.auth-card__footer p {
  margin: 0 0 4px 0;
}

.auth-card__footer a {
  color: var(--primary);
  text-decoration: none;
}

.auth-card__footer a:hover {
  text-decoration: underline;
}

/* Firebase UI overrides to match Clearfork brand */
.firebaseui-container {
  max-width: 100% !important;
  font-family: var(--font-family) !important;
}

.firebaseui-idp-button {
  border-radius: var(--radius) !important;
}

.mdl-button--raised.mdl-button--colored {
  background-color: var(--primary) !important;
}

/* ============================================================
   AUTH HEADER BAR (top-right overlay on app)
   ============================================================ */

.auth-header {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-header__user {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 59, 92, 0.9);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 0.78rem;
  color: white;
}

.auth-header__email {
  opacity: 0.85;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-header__signout,
.auth-header__manage,
.auth-header__upgrade {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.auth-header__signout:hover,
.auth-header__manage:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1);
}

.auth-header__upgrade {
  background: var(--accent) !important;
  color: white !important;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
}

.auth-header__upgrade:hover {
  background: var(--accent-dark) !important;
}

/* Tier badges */
.tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tier-badge--free {
  background: var(--gray-600);
  color: white;
}

.tier-badge--starter {
  background: #2563eb;
  color: white;
}

.tier-badge--professional {
  background: var(--accent);
  color: white;
}

.tier-badge--enterprise {
  background: #7c3aed;
  color: white;
}

/* ============================================================
   PRICING MODAL
   ============================================================ */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 8px;
}

.pricing-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  position: relative;
  transition: all 0.2s;
}

.pricing-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 59, 92, 0.1);
}

.pricing-card--popular {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 4px 20px rgba(76, 175, 80, 0.15);
}

.pricing-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  padding: 2px 12px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

.pricing-card__header h4 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: var(--primary);
}

.pricing-card__price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 16px;
}

.pricing-card__price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray-500);
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
}

.pricing-card__features li {
  padding: 4px 0;
  font-size: 0.8rem;
  color: var(--gray-600);
}

.pricing-card__features li::before {
  content: "\2713  ";
  color: var(--accent);
  font-weight: 700;
}

.pricing-card__btn {
  width: 100%;
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .auth-card {
    padding: 24px 20px;
  }
}

/* Suppress Shiny validation errors */
.shiny-output-error-validation {
  display: none;
}

/* Remove default Shiny container padding */
.container-fluid {
  padding: 0 !important;
  max-width: none !important;
}

/* ── Confirm dialogs (deed discard, destructive actions) ──────────────── */
/* Soften all Shiny modals: rounded card, no hard border, deeper shadow.   */
#shiny-modal .modal-content {
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.li-confirm {
  text-align: center;
  padding: 20px 12px 10px;
}

.li-confirm__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--error-bg);
  color: var(--error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.li-confirm__title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.li-confirm__body {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin: 0 auto 20px;
  max-width: 300px;
}

.li-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-bottom: 8px;
}

.li-confirm__actions .btn {
  flex: 1;
  max-width: 170px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 14px;
  transition: all 0.15s ease-in-out;
}

/* "Keep working" — quiet secondary */
.li-confirm__actions .btn-default {
  background: #fff;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}
.li-confirm__actions .btn-default:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-900);
}

/* Destructive confirm */
.btn-li-danger {
  background: var(--error);
  border: 1px solid var(--error);
  color: #fff;
}
.btn-li-danger:hover,
.btn-li-danger:focus {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

/* ── Notifications (toasts) ──────────────────────────────────────────
   Dark brand pills, bottom-center: out of the flight path of parcels
   (which land mid-map), clear of the icon rail, workbench drawer, and
   Mapbox attribution corners. Typed SVG icons via CSS mask; wording
   still carries the semantics. */

#shiny-notification-panel {
  position: fixed;
  bottom: 28px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: auto;
  max-width: min(460px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3000;
  pointer-events: none;
}

.shiny-notification {
  pointer-events: auto;
  position: relative;
  width: fit-content;
  max-width: 100%;
  background: rgba(8, 27, 42, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e8eef4;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 11px 16px 11px 42px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  animation: li-toast-in 0.24s cubic-bezier(0.21, 1.02, 0.73, 1);
}

@keyframes li-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Typed icon: masked SVG so it inherits the accent color exactly. */
.shiny-notification::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  width: 17px;
  height: 17px;
  background-color: #7dd3fc;
  -webkit-mask: var(--li-toast-icon) no-repeat center / contain;
  mask: var(--li-toast-icon) no-repeat center / contain;
  --li-toast-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 3.2a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM9.2 12H6.8v-1h.7V8.8h-.7v-1h1.7V11h.7v1z"/></svg>');
}

.shiny-notification-warning::before {
  background-color: #fbbf24;
  --li-toast-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 1.3 15.4 14H.6L8 1.3zm-.8 4.4v4h1.6v-4H7.2zm0 5.2v1.6h1.6v-1.6H7.2z"/></svg>');
}

.shiny-notification-error::before {
  background-color: #f87171;
  --li-toast-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zM5.2 4.1 8 6.9l2.8-2.8 1.1 1.1L9.1 8l2.8 2.8-1.1 1.1L8 9.1l-2.8 2.8-1.1-1.1L6.9 8 4.1 5.2l1.1-1.1z"/></svg>');
}

/* Close: quiet until hovered. */
.shiny-notification-close {
  position: absolute;
  top: 6px;
  right: 8px;
  float: none;
  font-size: 14px;
  line-height: 1;
  color: rgba(232, 238, 244, 0);
  cursor: pointer;
  transition: color 0.15s ease;
}
.shiny-notification:hover .shiny-notification-close {
  color: rgba(232, 238, 244, 0.55);
}
.shiny-notification:hover .shiny-notification-close:hover {
  color: #ffffff;
}

.shiny-notification .shiny-notification-content-action a {
  color: #7dd3fc;
  font-weight: 600;
  text-decoration: underline;
}

/* ── Plans modal (D5 subscription UI; wells card pattern, Land branding) ── */
.plans-modal { padding: 6px 4px 2px; position: relative; }
.plans-modal__close {
  position: absolute;
  top: -2px;
  right: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 1.05rem;
  padding: 4px 6px;
  cursor: pointer;
  line-height: 1;
}
.plans-modal__close:hover { color: #003B5C; }
.plans-modal__header h4 {
  margin: 0 0 4px 0;
  color: #003B5C;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.plans-modal__sub {
  margin: 0 0 16px 0;
  font-size: 0.82rem;
  color: #64748b;
  max-width: 56ch;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 760px) {
  .plans-grid { grid-template-columns: 1fr; }
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 16px 16px;
  background: #ffffff;
  text-align: center;
}
.plan-card--featured {
  border: 2px solid #003B5C;
  box-shadow: 0 8px 22px rgba(0, 59, 92, 0.14);
}
.plan-card__ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #003B5C;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-card__name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.plan-card__price {
  font-size: 1.75rem;
  font-weight: 700;
  color: #003B5C;
  margin-bottom: 8px;
}
.plan-card__price small {
  font-size: 0.72rem;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 3px;
}
.plan-card__features {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 14px 0;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.5;
  flex: 1;
}
.plan-card__features li {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding: 3px 0;
}
.plan-card__features li .fa-check {
  color: #047857;
  font-size: 0.68rem;
  flex: none;
}
.plan-card__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  font-weight: 600;
  font-size: 0.78rem;
}
.plan-card__muted {
  font-size: 0.75rem;
  color: #94a3b8;
  padding: 6px 0;
}
.plans-modal__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}
.plans-modal__note {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-left: auto;
}
.plans-modal__note a { color: #0369a1; }

/* ── Manual entry card (M-entry): entry-first, full-size controls ── */
.manual-entry {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 6px 0 12px;
}
.manual-entry__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.manual-entry__modes { display: flex; align-items: center; gap: 8px; }
.manual-entry__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748B;
}
.manual-entry__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.manual-entry__row + .manual-entry__row { margin-top: 10px; }
/* The bearing/distance field cluster is ATOMIC - DMS fields and their
   ° ′ ″ symbols never wrap apart mid-group. Below the breakpoint the row
   stacks deliberately: label above, group below (Codex 2026-08-06:
   flex-wrap is not responsive design). */
.manual-entry__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
@media (max-width: 620px) {
  .manual-entry__row { flex-wrap: wrap; }
  .manual-entry__rowlab { width: 100%; }
}
.manual-entry__rowlab {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #94A3B8;
  width: 66px;
  flex-shrink: 0;
}
.manual-entry input[type="number"],
.manual-entry input[type="text"],
.manual-entry select {
  font-size: 14px;
  height: 38px;
  padding: 6px 10px;
}
.manual-entry__sym { color: #94A3B8; font-size: 15px; }
.manual-entry__tie {
  font-size: 12.5px;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 4px;
}
.manual-entry__hint { font-size: 11.5px; color: #94A3B8; margin-top: 8px; }
.manual-entry__warn { font-size: 12.5px; color: #B45309; margin-top: 10px; }
.manual-entry .manual-entry__add {
  font-size: 13.5px;
  padding: 8px 16px;
  height: 38px;
}

/* COGO grid per-row delete */
.cogo-row-del__x {
  color: #cbd5e1;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
}
.tabulator-row:hover .cogo-row-del__x { color: #B91C1C; }
.cogo-row-del .tabulator-cell,
.tabulator-cell.cogo-row-del {
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 !important;
}