/* Navigation styles extracted from navigation.html */
/* Basis */
html, body { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #0f172a; background: #f8fafc; }

/* Navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; transform: none; width: 100%; background: rgba(255,255,255,0.98); border-radius: 0; box-shadow: 0 1px 0 rgba(15,23,42,0.08); padding: 10px 0; z-index: 2000; border-bottom: 1px solid rgba(15,23,42,0.08); box-sizing: border-box; }
.nav__inner { max-width: 1400px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; box-sizing: border-box; }
.nav__left, .nav__right { display: flex; align-items: center; gap: 20px; }
.nav__left { flex: 0 1 auto; }
.nav__right { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; gap: 20px; }
.nav__crumb { display: inline-flex; align-items: center; gap: 10px; border: none; background: transparent; padding: 10px 18px; border-radius: 16px; cursor: pointer; font-size: 13px; color: #0f172a; }
.nav__crumb:hover { background: rgba(166,196,161,0.16); }
.nav__crumb--dropdown { padding-right: 8px; }
.nav__divider { color: #94a3b8; font-size: 12px; margin: 0 6px; }
.nav__icon { width: 16px; height: 16px; color: inherit; }
.nav__crumb-icon{ width: 18px; height: 18px; object-fit: contain; }
.nav__crumb-icon--project-logo{ width: auto; height: 24px; max-width: 84px; }
.nav__caret { width: 12px; height: 12px; margin-left: 4px; }
.nav__icon-btn { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.12); background: rgba(255,255,255,0.96); box-shadow: 0 6px 18px rgba(15,23,42,0.12); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nav__icon-btn:hover { background: rgba(166,196,161,0.14); }
.nav__chip { padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.12); background: rgba(255,255,255,0.96); cursor: pointer; font-size: 13px; box-shadow: 0 4px 14px rgba(15,23,42,0.12); display: inline-flex; align-items: center; gap: 8px; }
.nav__chip:hover { background: rgba(166,196,161,0.18); }
.nav__chip--dropdown { display: inline-flex; align-items: center; gap: 8px; }
.nav__chip--icon { padding: 8px 10px; min-width: 36px; justify-content: center; }
.nav__label--muted { color:#94a3b8; }
.nav__label#shapeDropdownLabel{ color:#0f172a; font-weight:700; }
.nav__dropdown-wrapper { position: relative; }
.nav__menu { position: absolute; top: calc(100% + 8px); left: 0; background: rgba(255,255,255,0.98); border: 1px solid rgba(15,23,42,0.12); border-radius: 14px; box-shadow: 0 18px 36px rgba(15,23,42,0.18); min-width: 240px; padding: 6px; display: none; z-index: 2100; }
.nav__menu.is-open { display: block; }
.nav__dropdown-wrapper--align-right .nav__menu { left: auto; right: 0; }
.nav__menu-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: none; background: transparent; padding: 8px 10px; border-radius: 10px; font-size: 13px; cursor: pointer; color: #1f2937; }
.nav__menu-btn:hover { background: rgba(166,196,161,0.18); }
.nav__menu-btn.is-active { background: rgba(15,118,110,0.1); color: #0f766e; font-weight: 600; }
.nav__menu-btn--section { font-weight: 700; color:#0f172a; border-bottom: 1px solid rgba(15,23,42,0.12); border-radius: 0; margin-bottom: 6px; }
.nav__menu-btn--more { color:#0f172a; font-weight:600; justify-content:center; }
.nav__menu-empty { padding: 8px 10px; font-size: 13px; color:#94a3b8; }
.nav__label { font-weight: 500; }
.nav__chip--primary { background: #0f766e; color: #fff; border-color: #0f766e; }
.nav__chip--primary:hover { background: #115e59; }
.nav__chip--disabled { color:#94a3b8; border-color: rgba(148,163,184,0.4); background: rgba(248,250,252,0.8); cursor:not-allowed; box-shadow:none; }
.project-solo-mode .nav__divider,
.project-solo-mode .nav__dropdown-wrapper { display: none; }

/* Export button active styling */
#navExportBtn:not(.nav__chip--disabled):not([disabled]),
#navExportBtn.export-enabled{
  background: #A6C4A1;
  border-color: #A6C4A1;
  color: #ffffff;
}
#navExportBtn:not(.nav__chip--disabled):not([disabled]):hover,
#navExportBtn.export-enabled:hover{
  background: #95B893; /* slightly darker on hover */
}

/* Status button active styling */
#navStatusBtn:not(.nav__chip--disabled):not([disabled]),
#navStatusBtn.status-enabled{
  background: #A6C4A1;
  border-color: #A6C4A1;
  color: #ffffff;
}
#navStatusBtn:not(.nav__chip--disabled):not([disabled]):hover,
#navStatusBtn.status-enabled:hover{
  background: #95B893;
}
#navShareBtn.share-copied{
  background: #A6C4A1;
  border-color: #A6C4A1;
  color: #ffffff;
}
#navShareBtn.share-copied:hover{
  background: #95B893;
}
.nav__brand{ display:inline-flex; align-items:center; justify-content:flex-start; width: 148px; height: 38px; padding: 0 10px; border-radius: 14px; background: transparent; }
.nav__brand img{ display:block; max-width: 100%; max-height: 22px; object-fit: contain; }
.nav__segmented { display: inline-flex; position: relative; align-items: center; border: 1px solid rgba(15,23,42,0.12); border-radius: 14px; padding: 2px; gap: 0; box-shadow: 0 4px 14px rgba(15,23,42,0.12); background: rgba(241,245,249,0.85); }
.nav__segmented-btn { width: 42px; height: 32px; border: none; background: transparent; cursor: pointer; display:flex; align-items:center; justify-content:center; color: #94a3b8; position: relative; z-index:2; transition: color 140ms ease; }
.nav__segmented-btn:hover { color:#0f172a; }
.nav__segmented--toggle { overflow: visible; }
.nav__segmented-highlight { position: absolute; top: 2px; left: 2px; width: calc((100% - 4px)/3); height: calc(100% - 4px); background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.18); transition: left 180ms ease; z-index:1; pointer-events: none; }
.nav__segmented-btn--active { color:#0f172a; }

/* Tablet optimizations */
@media (max-width: 1024px) {
  .nav__inner { padding: 0 10px; gap: 10px; }
  .nav__left, .nav__right { gap: 12px; }
  .nav__brand{ width: 128px; padding: 0 8px; }
  .nav__crumb{ padding: 8px 12px; gap: 8px; font-size: 12px; }
  #shapeDropdownLabel{ max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__segmented-btn{ width: 38px; height: 30px; }
  .nav__chip{ padding: 6px 10px; gap: 6px; font-size: 12px; }
  .nav__chip--icon { padding: 6px 8px; min-width: 32px; }
  .nav__chip .nav__icon{ width: 15px; height: 15px; }
  .nav__chip-label{ display:inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #navShareBtn .nav__chip-label{ max-width: 90px; }
  #navExportBtn .nav__chip-label{ max-width: 120px; }
  #navStatusBtn .nav__chip-label{ max-width: 160px; }
}

@media (max-width: 860px) {
  .nav__inner { gap: 8px; }
  .nav__left, .nav__right { gap: 10px; }
  .nav__brand{ width: 120px; padding: 0 6px; }
  .nav__divider{ display: none; }
  .nav__crumb{ padding: 6px 8px; gap: 6px; font-size: 12px; }
  #shapeDropdownLabel{ max-width: 140px; }
  .nav__chip{ padding: 6px 8px; }
  .nav__segmented-btn{ width: 34px; height: 28px; }
  /* Hide right-side actions on mobile; moved to bottom toolbar */
  .nav__right{ display: none; }
  /* Mobile dropdown: fixed full-width sheet just under the navbar */
  .nav__dropdown-wrapper{ position: static; }
  .nav__menu{ position: fixed; top: var(--nav-height); left: 0; right: 0; min-width: auto; border-radius: 0 0 14px 14px; padding: 10px; box-shadow: 0 12px 24px rgba(15,23,42,0.16); max-height: calc(100vh - var(--nav-height) - var(--bottom-nav-height) - 12px); overflow: auto; }
}

/* Extra-compact mobile header for more map space */
@media (max-width: 640px) {
  .nav{ padding: 6px 0; }
  .nav__inner{ padding: 0 8px; gap: 6px; }
  .nav__left{ gap: 8px; }
  .nav__brand{ width: 110px; padding: 0 4px; }
  .nav__brand img{ max-height: 18px; }
  .nav__crumb{ padding: 4px 6px; gap: 6px; font-size: 12px; border-radius: 12px; }
  .nav__crumb-icon{ width: 16px; height: 16px; }
  .nav__crumb-icon--project-logo{ width: auto; height: 20px; max-width: 72px; }
  #shapeDropdownLabel{ max-width: 120px; font-size: 12px; }
}

/* Bottom tool navbar (mobile) */
.bottom-nav{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; display: none; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.98); border-top: 1px solid rgba(15,23,42,0.08); box-shadow: 0 -1px 0 rgba(15,23,42,0.04); }
.bottom-nav__btn{ -webkit-tap-highlight-color: transparent; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.12); background: #fff; box-shadow: 0 4px 10px rgba(15,23,42,0.10); display: inline-flex; align-items: center; justify-content: center; color: #0f172a; }
.bottom-nav__btn:hover{ background: rgba(166,196,161,0.12); }
.bottom-nav__icon{ width: 20px; height: 20px; color: currentColor; display: block; }
.bottom-nav__icon--hidden{ display: none; }
.bottom-nav__spacer{ flex: 1 1 auto; }

/* Bottom action states: disabled vs active (brand) */
.bottom-nav__btn[disabled]{ opacity: .5; background: #f1f5f9; color: #94a3b8; border-color: rgba(15,23,42,0.12); cursor: not-allowed; box-shadow: none; }
.bottom-nav__btn.is-active{ background: #A6C4A1; border-color: #A6C4A1; color: #ffffff; }
.bottom-nav__btn.is-active:hover{ background: #95B893; }

@media (max-width: 860px){
  .bottom-nav{ display: flex; }
}

/* Floating UI visibility toggle */
.ui-toggle{ position: fixed; right: 12px; bottom: calc(var(--bottom-nav-height) + 12px); height: 36px; z-index: 2100; border: 1px solid rgba(15,23,42,0.12); border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,0.18); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; color: #0f172a; font-size: 13px; font-weight: 600; }
.ui-toggle:hover{ background: rgba(166,196,161,0.12); }
.ui-toggle__label{ display: inline-block; }
@media (min-width: 861px){ .ui-toggle{ bottom: 12px; } }

/* When UI is hidden, hide both nav bars */
body.ui-hidden .nav{ display: none !important; }
body.ui-hidden .bottom-nav{ display: none !important; }