.planning-project-workspace-head {
  min-height: 88px;
  box-sizing: border-box;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.planning-project-workspace-head .planning-workspace-heading {
  min-width: 180px;
  padding-bottom: 15px;
}

.planning-project-workspace-head h2 {
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-project-tabs {
  display: flex;
  max-width: 100%;
  align-self: flex-end;
  gap: 4px;
  overflow-x: auto;
}

.planning-project-tabs button {
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--planning-muted);
  font: 700 12px/1 var(--crm-ui-font);
  white-space: nowrap;
  cursor: pointer;
}

.planning-project-tabs button:hover,
.planning-project-tabs button:focus-visible {
  outline: 0;
  background: var(--crm-surface-hover);
  color: var(--planning-text);
}

.planning-project-tabs button[aria-current="page"] {
  z-index: 2;
  margin-bottom: -1px;
  border-color: var(--planning-border);
  background: var(--planning-surface);
  color: var(--planning-accent);
}

.planning-project-panel {
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--planning-border);
  background: var(--planning-surface);
}

.planning-project-materials {
  overflow: hidden;
}

.planning-project-materials .planning-materials-shell {
  min-height: 0;
  height: 100%;
}

.planning-project-map {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
}

.planning-workspace:has(> .planning-project-panel) {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  overflow: hidden;
}

.planning-map-toolbar {
  z-index: 4;
  display: flex;
  min-height: 52px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  border-bottom: 1px solid var(--planning-border);
  background: color-mix(in srgb,var(--planning-surface) 94%,transparent);
}
#page-planning .planning-map-root-navigation { display: flex; flex: none; flex-direction: column; gap: 4px; }
#page-planning .planning-map-root-navigation button { width: 100%; }

.planning-map-toolbar > label:first-child { min-width: 150px; flex: 1 1 220px; }
.planning-map-toolbar input[type="search"] {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--planning-border);
  border-radius: 8px;
  outline: 0;
  background: var(--planning-soft);
  color: var(--planning-text);
  font: 12px var(--crm-ui-font);
}
.planning-map-toolbar input[type="search"]:focus { border-color: var(--planning-accent); box-shadow: 0 0 0 3px var(--planning-accent-soft); }
.planning-map-zoom { display: inline-flex; align-items: center; gap: 3px; }
.planning-map-toolbar button {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--planning-border);
  border-radius: 8px;
  background: var(--planning-soft);
  color: var(--planning-text);
  font: 700 11px var(--crm-ui-font);
  white-space: nowrap;
  cursor: pointer;
}
.planning-map-toolbar button:hover,.planning-map-toolbar button:focus-visible { border-color: var(--planning-accent); outline: 0; color: var(--planning-accent); }
.planning-map-toolbar button:disabled { opacity: .45; cursor: default; }
.planning-map-toolbar output { min-width: 42px; color: var(--planning-muted); font: 700 10px var(--crm-ui-font); text-align: center; }
.planning-map-toolbar [data-map-status] { min-width: max-content; color: var(--planning-muted); font: 11px var(--crm-ui-font); }
.planning-map-toolbar [data-map-status].error { color: var(--planning-red); }
.planning-map-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--planning-muted); font: 11px var(--crm-ui-font); white-space: nowrap; }
#page-planning .planning-map-title-lines { display: inline-flex; align-items: center; gap: 5px; color: var(--planning-muted); font: 11px var(--crm-ui-font); white-space: nowrap; }
#page-planning .planning-map-title-lines select { height: 34px; padding: 0 6px; border: 1px solid var(--planning-border); border-radius: 8px; background: var(--planning-soft); color: var(--planning-text); font: 11px var(--crm-ui-font); }
#page-planning .planning-map-title-lines select:focus-visible { outline: 2px solid var(--planning-accent); outline-offset: 2px; }

@container (max-width: 1180px) {
  .planning-map-toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .planning-map-toolbar > label:first-child {
    min-width: 100%;
    flex-basis: 100%;
  }

  .planning-map-toolbar [data-map-status] {
    margin-left: auto;
  }
}

.planning-map-viewport {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  outline: 0;
  background-color: var(--planning-bg);
  background-image: radial-gradient(circle,color-mix(in srgb,var(--planning-muted) 18%,transparent) 1px,transparent 1px);
  background-size: 22px 22px;
  cursor: grab;
  touch-action: none;
}
.planning-map-guide { position: absolute; z-index: 3; right: 84px; bottom: 12px; max-width: 360px; margin: 0; padding: 7px 10px; border: 1px solid color-mix(in srgb,var(--planning-border) 72%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--crm-surface-solid,var(--planning-surface)) 92%,transparent); color: var(--planning-muted); font: 10px/1.4 var(--crm-ui-font); pointer-events: none; }
.planning-map-viewport:active { cursor: grabbing; }
.planning-map-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--planning-accent); }
.planning-map-viewport:fullscreen { min-height: 100vh; background-color: var(--planning-bg); }

.planning-map-world {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
  will-change: transform;
}
.planning-map-world svg { position: absolute; inset: -5000px; width: 10000px; height: 10000px; overflow: visible; pointer-events: none; }
.planning-map-world svg g { transform: translate(5000px,5000px); }
.planning-map-world path { fill: none; stroke: color-mix(in srgb,var(--map-branch-color,var(--planning-accent)) 38%,var(--planning-border)); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

.planning-map-root,.planning-map-node {
  position: absolute;
  width: 224px;
  box-sizing: border-box;
  border: 1px solid var(--planning-border-strong);
  border-radius: 12px;
  background: var(--crm-surface-solid,var(--planning-surface));
  color: var(--planning-text);
  box-shadow: 0 8px 24px color-mix(in srgb,#0f2535 12%,transparent);
  font-family: var(--crm-ui-font);
  cursor: default;
  user-select: none;
}
.planning-map-root {
  display: flex;
  width: 244px;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 2px solid var(--planning-accent);
  background: color-mix(in srgb,var(--planning-accent-soft) 35%,var(--crm-surface-solid,var(--planning-surface)));
}
.planning-map-root strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
#page-planning .planning-map-root strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--map-title-lines,2); white-space: normal; }
#page-planning .planning-map-root[role="button"] { cursor: pointer; }
#page-planning .planning-map-root[role="button"]:hover,#page-planning .planning-map-root[role="button"]:focus-visible { outline: 3px solid var(--planning-accent-soft); outline-offset: 3px; }
.planning-map-root button,.planning-map-node button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.planning-map-root > button { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--planning-accent); font-size: 20px; }
.planning-map-root > button:hover { background: var(--planning-accent-soft); }

.planning-map-node { min-height: 66px; padding: 8px 8px 5px; border-left: 4px solid var(--map-branch-color,var(--planning-blue)); cursor: move; }
.planning-map-node:hover,.planning-map-node:focus-visible,.planning-map-node.selected { outline: 0; border-color: var(--planning-accent); box-shadow: 0 0 0 3px var(--planning-accent-soft),0 10px 26px color-mix(in srgb,#0f2535 16%,transparent); }
.planning-map-node.dragging { z-index: 4; opacity: .86; pointer-events: none; box-shadow: 0 14px 34px color-mix(in srgb,#0f2535 25%,transparent); }
.planning-map-node.link-target,.planning-map-root.link-target { outline: 3px solid var(--planning-accent); outline-offset: 4px; }
.planning-map-node.done { opacity: .68; }
.planning-map-node.done strong { text-decoration: line-through; }
.planning-map-node-main { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 6px; }
.planning-map-node-main > [data-map-check] { display: grid; width: 19px; height: 19px; place-items: center; padding: 0; border: 1.5px solid var(--planning-border-strong); border-radius: 5px; color: var(--planning-accent); font-size: 12px; }
.planning-map-node-main > [data-map-check][aria-pressed="true"] { border-color: var(--planning-accent); background: var(--planning-accent-soft); }
.planning-map-progress { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--planning-soft); color: var(--planning-muted); font-size: 9px; font-weight: 800; }
.planning-map-open { min-width: 0; padding: 2px 0; text-align: left; }
.planning-map-open strong,.planning-map-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-map-open strong { font-size: 12px; line-height: 1.35; }
#page-planning .planning-map-open strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--map-title-lines,2); white-space: normal; }
.planning-map-open small { margin-top: 3px; color: var(--planning-muted); font-size: 9px; }
.planning-map-node-actions { position: relative; display: flex; min-height: 28px; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 3px; }
.planning-map-node-actions button { min-width: 28px; height: 28px; padding: 0 5px; border-radius: 7px; color: var(--planning-muted); font-size: 12px; }
.planning-map-node-actions button:hover,.planning-map-node-actions button:focus-visible { outline: 0; background: var(--planning-soft); color: var(--planning-accent); }
.planning-map-drag-hint { margin-right: auto; color: var(--planning-faint); font-size: 17px; line-height: 1; cursor: grab; }

.planning-map-popup {
  position: fixed;
  z-index: 1400;
  inset: auto;
  display: grid;
  width: 166px;
  height: max-content;
  max-height: min(280px,calc(100dvh - 24px));
  align-content: start;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--planning-border);
  border-radius: 9px;
  background: var(--crm-surface-solid,var(--planning-surface));
  box-shadow: 0 12px 32px color-mix(in srgb,#000 22%,transparent);
}
.planning-map-popup:not(:popover-open) { display: none; }
.planning-map-popup button { min-height: 34px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--planning-text); font: 12px var(--crm-ui-font); text-align: left; cursor: pointer; }
.planning-map-popup button:hover,.planning-map-popup button:focus-visible { outline: 0; background: var(--planning-soft); color: var(--planning-accent); }
.planning-map-popup button.danger { color: var(--planning-red); }

.planning-map-dialog { position: fixed; inset: 0; width: min(440px,calc(100vw - 40px)); max-height: min(420px,calc(100dvh - 40px)); box-sizing: border-box; margin: auto; padding: 20px; overflow-y: auto; border: 1px solid var(--planning-border); border-radius: 14px; background: var(--crm-surface-solid,var(--planning-surface)); color: var(--planning-text); box-shadow: 0 24px 72px color-mix(in srgb,#000 38%,transparent); font: 13px var(--crm-ui-font); }
.planning-map-dialog::backdrop { background: rgba(4,13,21,.52); }
.planning-map-dialog form,.planning-map-dialog label { display: grid; gap: 12px; }
.planning-map-dialog h3 { margin: 0; font-size: 17px; }
.planning-map-dialog input,.planning-map-dialog select { width: 100%; height: 38px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--planning-border); border-radius: 8px; background: var(--planning-soft); color: var(--planning-text); font: inherit; }
.planning-map-dialog form > div { display: flex; justify-content: flex-end; gap: 8px; }
.planning-map-dialog button { min-height: 34px; padding: 0 12px; border: 1px solid var(--planning-border); border-radius: 8px; background: var(--planning-soft); color: var(--planning-text); font: inherit; cursor: pointer; }
.planning-map-dialog button.primary { border-color: var(--planning-accent); background: var(--planning-accent); color: var(--planning-accent-contrast,#06252a); font-weight: 700; }
.planning-map-dialog button:hover,.planning-map-dialog button:focus-visible { border-color: var(--planning-accent); outline: 0; }

@media (max-width: 900px) {
  .planning-project-workspace-head { align-items: stretch; }
  .planning-project-tabs { width: 100%; }
  .planning-project-materials .planning-materials-shell { grid-template-columns: 180px minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .planning-project-tabs button,.planning-map-node,.planning-map-world { transition: none!important; }
}