#page-team-structure {
  --team-map-orange: #fe6b00;
  --team-map-red: #d40000;
  --team-map-fill: color-mix(in srgb, var(--crm-surface-solid, #182632) 84%, var(--team-map-orange) 16%);
  --team-map-fill-soft: color-mix(in srgb, var(--crm-surface, #1c2b37) 91%, var(--team-map-orange) 9%);
  --team-map-background: var(--crm-bg, #101b24);
  --team-map-text: var(--crm-text, #eef5f7);
  --team-map-muted: var(--crm-muted, #9fb0bd);
  padding-bottom: 36px;
}

.team-structure-header { align-items: center; flex-wrap: wrap; }
.team-structure-page-active .team-structure-header .period-control { display: none; }
.team-structure-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
.team-structure-scale-control {
  display: grid;
  width: clamp(180px, 14vw, 220px);
  gap: 5px;
  padding: 8px 11px;
  border: 1px solid var(--crm-border, rgba(132,157,173,.2));
  border-radius: var(--crm-control-radius, 9px);
  color: var(--team-map-muted);
  background: var(--crm-surface-soft, rgba(25,39,50,.72));
}
.team-structure-scale-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 750; }
.team-structure-scale-label output { min-width: 38px; color: var(--team-map-text); text-align: right; font-variant-numeric: tabular-nums; }
.team-structure-scale-row { display: grid; grid-template-columns: auto minmax(120px,1fr) auto; align-items: center; gap: 8px; }
.team-structure-scale-row small { color: var(--team-map-muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.team-structure-scale-row input {
  width: 100%;
  height: 16px;
  margin: 0;
  accent-color: var(--team-map-orange);
  cursor: ew-resize;
}
.team-structure-scale-row input:focus-visible { outline: 0; border-radius: 8px; box-shadow: var(--crm-focus-ring, 0 0 0 3px rgba(67,183,168,.28)); }
.team-structure-save {
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--crm-accent, #43b7a8) 62%, transparent);
  border-radius: var(--crm-control-radius, 9px);
  padding: 0 16px;
  color: #fff;
  background: var(--crm-accent, #43b7a8);
  font: inherit;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
}
.team-structure-save:hover { background: var(--crm-accent-hover, #55c4b5); }
.team-structure-save:focus-visible { outline: 0; box-shadow: var(--crm-focus-ring, 0 0 0 3px rgba(67,183,168,.28)); }
.team-structure-save:disabled { opacity: .55; cursor: wait; }

.team-structure-status {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--crm-border, rgba(132,157,173,.2));
  border-radius: var(--crm-control-radius, 9px);
  color: var(--team-map-muted);
  background: var(--crm-surface-soft, rgba(25,39,50,.72));
  font-size: 12px;
}
.team-structure-status[data-tone="success"] { color: color-mix(in srgb, var(--crm-accent, #43b7a8) 78%, var(--team-map-text)); }
.team-structure-status[data-tone="warning"] { color: #e8bd6b; border-color: rgba(232,189,107,.32); }
.team-structure-status[data-tone="error"] { color: #ff938a; border-color: rgba(255,107,96,.34); }

#page-team-structure .team-structure-map-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
#page-team-structure .team-structure-purpose {
  position: absolute;
  z-index: 1;
  top: 82px;
  left: 0;
  display: grid;
  gap: 12px;
  grid-template-rows: 104px minmax(132px, auto);
  width: clamp(220px, 19vw, 280px);
}
#page-team-structure .team-structure-purpose button {
  min-height: 64px;
  padding: 14px 18px;
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-control-radius);
  color: var(--crm-text);
  background: var(--crm-surface-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
#page-team-structure .team-structure-purpose button:hover:not(:disabled) {
  border-color: var(--crm-accent);
  background: var(--crm-surface-hover);
}
#page-team-structure .team-structure-purpose button:focus-visible {
  outline: 0;
  box-shadow: var(--crm-focus-ring);
}
#page-team-structure .team-structure-purpose button:disabled { opacity: .55; cursor: wait; }
#page-team-structure .team-structure-dialog textarea[data-team-dialog-purpose] { min-height: 240px; }
.team-structure-map-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.team-structure-map-heading h2 { margin: 0; color: var(--team-map-text); font-size: 17px; line-height: 1.3; }
.team-structure-map-heading p { margin: 5px 0 0; color: var(--team-map-muted); font-size: 11px; }
.team-structure-map-key { display: inline-flex; align-items: center; gap: 8px; color: var(--team-map-muted); font-size: 10px; white-space: nowrap; }
.team-structure-map-key i { width: 28px; height: 1px; background: var(--team-map-orange); box-shadow: -5px 0 0 4px var(--crm-surface-solid, #182632), -5px 0 0 6px var(--team-map-orange); }
.team-structure-vector {
  min-width: 0;
  max-height: max(360px, calc(100dvh - 190px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.team-structure-svg {
  display: block;
  width: var(--team-structure-svg-size, 1254px);
  min-width: 0;
  max-width: none;
  height: var(--team-structure-svg-size, 1254px);
  margin-inline: auto;
  color: var(--team-map-text);
  background: transparent;
  font-family: "Arial Narrow", Arial, sans-serif;
}
#page-team-structure.page-view .team-structure-svg text { font-family: "Arial Narrow", Arial, sans-serif !important; }
.team-map-connector, .team-map-legend path { fill: none; stroke: var(--team-map-orange); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.team-map-junction, .team-map-legend circle { fill: var(--team-map-background); stroke: var(--team-map-orange); stroke-width: 4; }
.team-map-junction-small { stroke-width: 3; }
.team-map-node { cursor: pointer; outline: none; }
.team-map-node > .team-map-circle { fill: var(--team-map-fill-soft); stroke: var(--team-map-orange); stroke-width: 4; transition: fill .16s ease, stroke-width .16s ease, filter .16s ease; }
.team-map-node:hover > .team-map-circle, .team-map-node:focus-visible > .team-map-circle { fill: var(--team-map-fill); stroke-width: 5; filter: drop-shadow(0 10px 17px rgba(254,107,0,.2)); }
.team-map-node:focus-visible > .team-map-circle { stroke: var(--crm-accent, #43b7a8); }
.team-map-diagram-title { fill: var(--team-map-text); font-family: Arial, sans-serif; font-size: 40px; font-weight: 700; pointer-events: none; }
.team-map-node-title { fill: var(--team-map-red); font-size: 24px; font-weight: 700; pointer-events: none; }
[data-team-circle="sales-management"] .team-map-node-title { font-size: 26px; }
.team-map-node-subtitle { fill: var(--team-map-text); font-size: 21px; font-weight: 400; pointer-events: none; }
.team-map-node-small .team-map-node-title { fill: var(--team-map-text); font-size: 17px; font-weight: 700; }
.team-map-leadership-title { fill: var(--team-map-red); font-size: 33px; font-weight: 700; pointer-events: none; }
.team-map-project, .team-map-project-inner { fill: var(--team-map-orange); }
.team-map-project { stroke: var(--team-map-orange); stroke-width: 4; }
.team-map-project-inner { stroke: var(--team-map-project-ring, #fff); stroke-width: 3; }
.team-map-project-cutout { fill: var(--team-map-fill-soft); }
.team-map-project-title { fill: #fff; font-size: 31px; font-weight: 700; pointer-events: none; }
.team-map-products-title { fill: var(--team-map-red); font-size: 31px; font-weight: 700; pointer-events: none; }
.team-map-products > .team-map-circle { fill: var(--team-map-fill-soft); }
.team-map-person { cursor: pointer; outline: none; }
.team-map-person rect { fill: transparent; stroke: transparent; transition: fill .15s ease, stroke .15s ease; }
.team-map-person text { fill: var(--team-map-text); font-family: Arial, sans-serif !important; font-size: 21px; font-weight: 400; pointer-events: none; }
.team-map-person-separator { fill: var(--team-map-text); font-size: 21px; font-weight: 400; pointer-events: none; }
.team-map-person.is-small text { font-size: 18px; }
#page-team-structure .team-map-people-more { fill: var(--team-map-muted); font-size: 13px; font-weight: 700; pointer-events: none; }
.team-map-person:hover rect, .team-map-person:focus-visible rect { fill: color-mix(in srgb, var(--team-map-orange) 14%, var(--crm-surface-solid, #182632)); stroke: var(--team-map-orange); stroke-width: 1; }
.team-map-person:focus-visible rect { stroke: var(--crm-accent, #43b7a8); stroke-width: 2; }
.team-map-legend text { fill: var(--team-map-text); font-family: Arial, sans-serif !important; font-size: 18px; }
.team-structure-empty { display: grid; min-height: 440px; place-items: center; color: var(--team-map-muted); }
#page-team-structure .team-structure-roster { margin-top: 20px; color: var(--team-map-text); }
#page-team-structure .team-structure-roster:empty { display: none; }
#page-team-structure .team-structure-roster h3 { margin: 0 0 12px; font-size: 18px; }
#page-team-structure .team-structure-roster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
#page-team-structure .team-structure-roster-circle { min-width: 0; padding: 14px; border: 1px solid var(--crm-border); border-radius: 12px; background: var(--crm-surface-soft); }
#page-team-structure .team-structure-roster-circle h4 { margin: 0 0 10px; font-size: 14px; line-height: 1.35; }
#page-team-structure .team-structure-roster-circle > div { display: flex; flex-wrap: wrap; gap: 8px; }
#page-team-structure .team-structure-roster-circle button { min-height: 34px; padding: 7px 10px; border: 1px solid var(--crm-border-strong); border-radius: 8px; color: var(--team-map-text); background: var(--crm-surface-solid); font: inherit; font-size: 13px; line-height: 1.25; text-align: left; cursor: pointer; }
#page-team-structure .team-structure-roster-circle button:hover { border-color: var(--team-map-orange); background: var(--crm-surface-hover); }
#page-team-structure .team-structure-roster-circle button:focus-visible { outline: 0; box-shadow: var(--crm-focus-ring); }

.team-structure-dialog-open { overflow: hidden; }
.team-structure-dialog-layer { position: fixed; z-index: 460; inset: 0; display: grid; place-items: stretch end; padding: 12px; }
.team-structure-dialog-layer[hidden] { display: none; }
.team-structure-dialog-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: default; }
.team-structure-dialog {
  position: relative;
  z-index: 1;
  width: clamp(420px, 44vw, 720px);
  max-width: calc(100vw - 48px);
  height: 100%;
  max-height: none;
  overflow: auto;
  border: 1px solid var(--crm-border-strong, rgba(132,157,173,.34));
  border-radius: 18px;
  color: var(--team-map-text);
  background: var(--crm-surface-solid, #182632);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}
.team-structure-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--crm-border, rgba(132,157,173,.2)); }
.team-structure-dialog-head span { color: var(--team-map-orange); font-size: 9px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.team-structure-dialog-head h2 { margin: 6px 0 0; font-size: 22px; line-height: 1.25; }
.team-structure-dialog-head > button { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 1px solid var(--crm-border, rgba(132,157,173,.2)); border-radius: 50%; color: var(--team-map-muted); background: var(--crm-surface-soft, rgba(25,39,50,.72)); font: inherit; font-size: 21px; cursor: pointer; }
.team-structure-dialog-head > button:hover { color: var(--team-map-text); border-color: var(--team-map-orange); }
.team-structure-dialog-head > button:focus-visible, .team-structure-dialog button:focus-visible, .team-structure-dialog input:focus-visible, .team-structure-dialog textarea:focus-visible { outline: 0; box-shadow: var(--crm-focus-ring, 0 0 0 3px rgba(67,183,168,.28)); }
.team-structure-dialog-body { display: grid; gap: 16px; padding: 20px 22px; }
.team-structure-dialog-body label { display: grid; gap: 7px; }
.team-structure-dialog-body label > span, .team-structure-dialog-people > span, .team-structure-person-assignments > span { color: var(--team-map-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.team-structure-dialog input, .team-structure-dialog textarea { width: 100%; border: 1px solid var(--crm-border-strong, rgba(132,157,173,.34)); border-radius: var(--crm-control-radius, 9px); padding: 10px 11px; color: var(--team-map-text); background: var(--crm-surface-soft, rgba(25,39,50,.72)); font: inherit; font-size: 12px; line-height: 1.5; }
.team-structure-dialog textarea { min-height: 92px; resize: vertical; }
.team-structure-dialog textarea[readonly] { color: var(--team-map-muted); cursor: default; }
.team-structure-dialog-people { display: grid; gap: 8px; }
.team-structure-dialog-people > div { display: flex; flex-wrap: wrap; gap: 7px; }
.team-structure-dialog-people button, .team-structure-dialog-person-assignments button { border: 1px solid color-mix(in srgb, var(--team-map-orange) 42%, transparent); border-radius: 999px; padding: 7px 10px; color: color-mix(in srgb, var(--team-map-orange) 72%, var(--team-map-text)); background: color-mix(in srgb, var(--team-map-orange) 9%, var(--crm-surface-soft, rgba(25,39,50,.72))); font: inherit; font-size: 10px; font-weight: 720; cursor: pointer; }
.team-structure-dialog-note { margin: 0; padding: 10px 11px; border: 1px dashed var(--crm-border-strong, rgba(132,157,173,.34)); border-radius: 9px; color: var(--team-map-muted); font-size: 10px; line-height: 1.5; }
.team-structure-dialog-actions { display: flex; justify-content: flex-end; padding: 0 88px 22px; }
.team-structure-dialog-actions button { min-height: 38px; border: 0; border-radius: var(--crm-control-radius, 9px); padding: 0 15px; color: #fff; background: var(--crm-accent, #43b7a8); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.team-structure-person-summary { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--crm-border, rgba(132,157,173,.2)); border-radius: 12px; background: var(--crm-surface-soft, rgba(25,39,50,.72)); }
.team-structure-person-avatar { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border: 1px solid color-mix(in srgb, var(--team-map-orange) 50%, transparent); border-radius: 50%; color: var(--team-map-orange); background: color-mix(in srgb, var(--team-map-orange) 10%, transparent); font-size: 11px; font-weight: 850; }
.team-structure-person-summary strong, .team-structure-person-summary small { display: block; }
.team-structure-person-summary strong { font-size: 14px; }
.team-structure-person-summary small { margin-top: 3px; color: var(--team-map-muted); font-size: 9px; }
.team-structure-person-assignments { display: grid; gap: 7px; }
.team-structure-person-assignments > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px; border-left: 3px solid var(--team-map-orange); border-radius: 7px; background: color-mix(in srgb, var(--team-map-orange) 7%, var(--crm-surface-soft, rgba(25,39,50,.72))); }
.team-structure-person-assignments b { font-size: 10px; }
.team-structure-person-assignments small { color: var(--team-map-muted); font-size: 9px; }

html[data-theme="light"] #page-team-structure {
  --team-map-fill: #fef5e8;
  --team-map-fill-soft: #fef5e8;
  --team-map-background: #fefefe;
  --team-map-project-ring: #fff;
  --team-map-text: #000;
  --team-map-muted: var(--crm-muted, #6f8391);
}
html[data-theme="light"] .team-map-junction, html[data-theme="light"] .team-map-legend circle { fill: #fefefe; }

@media (max-width: 900px) {
  .team-structure-header-actions { width: 100%; }
  .team-structure-scale-control { width: min(100%, 260px); margin-left: auto; }
  .team-structure-map-heading { align-items: flex-start; flex-direction: column; }
  .team-structure-map-key { white-space: normal; }
}

/* Employee passport: scoped to the person dialog, leaving circle editors intact. */
.team-structure-dialog[data-team-dialog-type="person"] {
  width: 100vw;
  max-width: none;
  max-height: none;
  border-radius: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--crm-text);
  font-family: var(--crm-ui-font);
}
.team-structure-dialog[data-team-dialog-type="person"] button:not(:where(.person-passport-presence button)) {
  font: inherit; color: var(--crm-text); background: var(--crm-surface-soft);
  border: 1px solid var(--crm-border); border-radius: var(--crm-control-radius); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.team-structure-dialog[data-team-dialog-type="person"] button:not(:where(.person-passport-presence button)):hover:not(:disabled) { background: var(--crm-surface-hover); border-color: var(--crm-accent); }
.team-structure-dialog[data-team-dialog-type="person"] button:not(:where(.person-passport-presence button)):disabled { opacity: .6; cursor: wait; }
.team-structure-dialog[data-team-dialog-type="person"] svg { width: 20px; height: 20px; flex: 0 0 auto; }
.person-passport-toolbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--crm-border); }
.person-passport-toolbar > span { margin-left: auto; color: var(--crm-muted); font-size: 12px; }
.person-passport-toolbar button { padding: 8px 12px; font-size: 12px !important; }
.person-passport-toolbar button:last-child { width: 34px; height: 34px; font-size: 22px !important; padding: 0; border-radius: 50%; }
.person-passport-scroll { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 24px; }
.person-passport-hero { display: flex; align-items: center; gap: 22px; padding: 26px; border: 1px solid var(--crm-border); border-radius: var(--crm-panel-radius); background: radial-gradient(ellipse at 95% 0%, color-mix(in srgb, #8a7aec 18%, transparent), transparent 65%), linear-gradient(115deg, color-mix(in srgb, var(--crm-accent) 18%, var(--crm-surface)), var(--crm-surface)); }
.person-passport-avatar { display: grid; place-items: center; width: 92px; height: 92px; flex: 0 0 92px; overflow: hidden; border-radius: 28px; border: 3px solid color-mix(in srgb, var(--crm-accent) 50%, var(--crm-surface-solid)); background: var(--crm-surface-soft); font-size: 32px; font-weight: 750; }
.person-passport-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-passport-identity { min-width: 0; }
.person-passport-eyebrow { font-size: 10px; letter-spacing: .12em; font-weight: 750; color: var(--crm-muted); }
.person-passport-hero h2 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.2; margin: 8px 0; overflow-wrap: anywhere; }
.person-passport-hero p { margin: 0; color: var(--crm-muted); font-size: 12px; overflow-wrap: anywhere; }
.person-passport-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.person-passport-badges span { padding: 5px 10px; font-size: 11px; font-weight: 650; border: 1px solid var(--crm-border); border-radius: 20px; background: var(--crm-surface-soft); }
.person-passport-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, 1fr); gap: 18px; margin-top: 20px; align-items: start; }
.person-passport-main, .person-passport-aside { display: grid; gap: 18px; min-width: 0; }
.person-passport-panel { border: 1px solid var(--crm-border); border-radius: var(--crm-panel-radius); padding: 20px; background: var(--crm-surface); box-shadow: var(--crm-panel-shadow); min-width: 0; }
.person-passport-section-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.person-passport-section-title svg { color: var(--crm-accent); }
.person-passport-section-title h3 { margin: 0; font-size: 15px; font-weight: 750; }
.person-passport-section-title > span { margin-left: auto; color: var(--crm-muted); font-size: 10px; }
.person-passport-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.person-passport-metrics button { display: flex; flex-direction: column; gap: 8px; align-items: start; text-align: left; padding: 14px 10px; border-top: 3px solid var(--crm-accent) !important; }
.person-passport-metrics button:nth-child(2) { border-top-color: #9482ec !important; }
.person-passport-metrics button:nth-child(3) { border-top-color: #e6a75a !important; }
.person-passport-metrics button:nth-child(4) { border-top-color: #64a7e6 !important; }
.person-passport-metrics strong { font-size: 29px; line-height: 1; font-weight: 680; font-variant-numeric: tabular-nums; }
.person-passport-metrics span { font-size: 10px; color: var(--crm-muted); line-height: 1.4; }
.person-passport-today { display: grid; gap: 7px; margin-top: 20px; padding: 14px; border: 1px solid color-mix(in srgb, var(--crm-accent) 36%, var(--crm-border)); border-radius: var(--crm-control-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--crm-accent) 13%, var(--crm-surface-solid)), var(--crm-surface-soft)); }
.person-passport-today > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.person-passport-today h4 { margin: 0; font-size: 13px; }
.person-passport-today > div > button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: var(--crm-accent) !important; font-size: 10px !important; }
.person-passport-today > button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; }
.person-passport-today > button > span { display: grid; min-width: 0; flex: 1; gap: 3px; }
.person-passport-today > button strong { overflow-wrap: anywhere; font-size: 12px; }
.person-passport-today > button small { color: var(--crm-muted); font-size: 10px; }
.person-passport-today > button svg { flex: 0 0 16px; color: var(--crm-accent); }
.person-passport-deadlines { margin-top: 20px; }
.person-passport-deadlines h4 { margin: 0 0 10px; font-size: 12px; }
.person-passport-deadlines button { display: flex; gap: 14px; width: 100%; padding: 10px 12px; text-align: left; margin-bottom: 6px; font-size: 12px !important; align-items: center; }
.person-passport-deadlines button span { flex: 1; overflow-wrap: anywhere; }
.person-passport-deadlines small { flex-shrink: 0; color: var(--crm-muted); }
.person-passport-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.person-passport-quick button, .person-passport-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 11px !important; }
.person-passport-circles { display: grid; gap: 12px; }
.person-passport-circle { border: 1px solid var(--crm-border); border-left: 3px solid var(--crm-accent); border-radius: var(--crm-control-radius); padding: 16px; background: var(--crm-surface-soft); }
.person-passport-circle-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.person-passport-circle-head h4 { margin: 0 0 5px; font-size: 14px; line-height: 1.4; }
.person-passport-circle-head span { color: var(--crm-muted); font-size: 11px; }
.person-passport-circle-head button { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; }
.person-passport-role { border-top: 1px solid var(--crm-border); margin-top: 14px; padding-top: 12px; }
.person-passport-role > strong { font-size: 12px; }
.person-passport-text { font-size: 12px; line-height: 1.65; margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.person-passport-text.is-empty { color: var(--crm-muted); }
.person-passport-circle details { margin: 12px 0; font-size: 12px; }
.person-passport-circle summary { cursor: pointer; color: var(--crm-muted); padding: 6px 0; }
.person-passport-circle summary:focus-visible { outline: 0; box-shadow: var(--crm-focus-ring); border-radius: 4px; }
.person-passport-circle h5 { margin: 14px 0 0; }
.person-passport-panel dl { margin: 18px 0; display: grid; gap: 14px; }
.person-passport-panel dt { color: var(--crm-muted); font-size: 11px; margin-bottom: 5px; }
.person-passport-panel dd { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.person-passport-panel dd small { display: block; color: var(--crm-muted); font-size: 11px; }
.person-passport-edit { width: 100%; padding: 10px; font-size: 12px !important; }
.person-passport-online { display: block; font-size: 18px; line-height: 1.4; }
.person-passport-state { font-size: 11px; line-height: 1.6; color: var(--crm-muted); margin: 12px 0 0; }
.person-passport-state button { padding: 2px 6px; font-size: 10px !important; }
.person-passport-feedback { border-top: 1px solid var(--crm-border); padding: 12px 24px; background: var(--crm-surface-soft); color: var(--crm-text); font-size: 12px; line-height: 1.5; }
.person-passport-feedback[hidden] { display: none; }
[data-passport-form] { display: grid; gap: 14px; }
[data-passport-form] label { display: grid; gap: 7px; font-size: 11px; color: var(--crm-muted); }
[data-passport-form] input, [data-passport-form] textarea { color: var(--crm-text) !important; }
.person-passport-form-actions { display: flex; gap: 8px; }
.person-passport-form-actions button { padding: 9px 13px; font-size: 12px !important; }
.person-passport-form-actions button[type="submit"] { background: color-mix(in srgb, var(--crm-accent) 25%, var(--crm-surface-solid)) !important; border-color: var(--crm-accent) !important; }
@media (max-width: 1000px) {
  .person-passport-layout { grid-template-columns: minmax(0,1fr) minmax(240px,.8fr); }
  .person-passport-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .person-passport-panel, .person-passport-scroll { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-structure-dialog[data-team-dialog-type="person"] button:not(:where(.person-passport-presence button)) { transition: none; }
}

.team-circle-roles { display: grid; gap: 12px; }
.team-circle-roles h3 { font-size: 16px; }
.team-circle-roles .person-passport-circle > span { font-size: 12px; color: var(--crm-accent); }
.person-passport-role-details a { color: var(--crm-accent); }

.person-passport-layer { padding: 0; z-index: 1200; }

.person-passport-presence .login-history-body { overflow: visible; }

/* Keep the original presence controls independent of passport button styles. */
.person-passport-scroll { padding: 16px; }
.person-passport-hero { padding: 16px 20px; gap: 16px; }
.person-passport-avatar { width: 64px; height: 64px; flex-basis: 64px; border-radius: 20px; }
.person-passport-hero h2 { font-size: 26px; margin: 4px 0; }
.person-passport-badges { margin-top: 8px; }
.person-passport-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.person-passport-main, .person-passport-aside { gap: 14px; }
.person-passport-panel { padding: 16px; }
.person-passport-panel dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; margin: 12px 0; }
.person-passport-section-title { margin-bottom: 12px; }
.person-passport-presence-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.person-passport-presence-head > p { flex-basis: 100%; order: 2; margin: 0; }
.person-passport-presence-head .login-history-recognition { min-width: 190px; flex-basis: auto; min-height: 46px; }
.person-passport-presence .login-history-summary { padding: 12px; border-radius: 12px; }
.person-passport-presence .login-history-body { min-height: 0; padding: 12px 0 0; }
.person-passport-presence .login-history-day-title { min-width: 130px; flex-basis: 170px; }
.person-passport-presence .login-history-day-summary { gap: 6px; padding: 9px; }
.person-passport-presence .login-history-session-times { gap: 10px; }
.person-passport-presence .login-history-duration { min-width: 54px; }
body .person-passport-presence .login-history-sections-card:hover,
body .person-passport-presence .login-history-day-sections:hover,
body .person-passport-presence .login-history-day-sessions:hover { background: var(--crm-surface-hover); border-color: var(--crm-accent); color: var(--crm-accent); }
body .person-passport-presence .login-history-section-row { padding: 6px; border-radius: 6px; transition: background .15s ease; }
body .person-passport-presence .login-history-section-row:hover { background: var(--crm-surface-hover); }

.person-passport-header { display: grid; grid-template-columns: minmax(430px, 1fr) minmax(0, 1.65fr); gap: 16px; align-items: stretch; }
.person-passport-header .person-passport-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .92fr); align-items: center; padding: 14px 16px; gap: 14px; }
body:has(#page-team-structure) .person-passport-hero-person { display: flex; min-width: 0; align-items: center; gap: 12px; }
.person-passport-header .person-passport-avatar { width: 52px; height: 52px; flex-basis: 52px; border-radius: 16px; font-size: 22px; }
body:has(#page-team-structure) .person-passport-header .person-passport-identity { min-width: 0; }
.person-passport-header .person-passport-hero h2 { font-size: 21px; }
.person-passport-header .person-passport-eyebrow { font-size: 8px; letter-spacing: .08em; }
.person-passport-header .person-passport-badges { gap: 4px; }
.person-passport-header .person-passport-badges span { padding: 4px 7px; font-size: 10px; }
body:has(#page-team-structure) .person-passport-memberships { min-width: 0; padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--crm-accent) 32%, var(--crm-border)); }
body:has(#page-team-structure) .person-passport-memberships-title { display: block; margin-bottom: 7px; color: var(--crm-muted); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body:has(#page-team-structure) .person-passport-memberships-list { display: grid; max-height: 116px; gap: 7px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 3px; }
body:has(#page-team-structure) .person-passport-membership { display: grid; grid-template-columns: minmax(72px, .85fr) minmax(0, 1.15fr); align-items: start; gap: 8px; }
body:has(#page-team-structure) .person-passport-membership-circle { min-width: 0; padding-top: 4px; color: var(--crm-text); font-size: 10px; font-weight: 720; line-height: 1.35; overflow-wrap: anywhere; }
body:has(#page-team-structure) .person-passport-membership-roles { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
body:has(#page-team-structure) .team-structure-dialog[data-team-dialog-type="person"] .person-passport-membership-role { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; padding: 3px 6px; border-color: color-mix(in srgb, var(--crm-accent) 35%, var(--crm-border)); border-radius: 999px; background: color-mix(in srgb, var(--crm-accent) 10%, var(--crm-surface-solid)); color: var(--crm-accent); font-size: 9px !important; font-weight: 700; line-height: 1.35; text-align: left; overflow-wrap: anywhere; }
body:has(#page-team-structure) .person-passport-membership-role span { flex: 0 0 auto; }
body:has(#page-team-structure) .person-passport-membership-missing { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border: 1px dashed var(--crm-border-strong); border-radius: 999px; color: var(--crm-muted); font-size: 9px; line-height: 1.35; }
body:has(#page-team-structure) .person-passport-membership-missing b { font-size: 11px; font-weight: 650; }
body:has(#page-team-structure) .person-passport-membership-empty { color: var(--crm-muted); font-size: 10px; line-height: 1.4; }
body:has(#page-team-structure) .person-passport-role:focus-visible { outline: 0; box-shadow: var(--crm-focus-ring); border-radius: 5px; }
.person-passport-profile-header { display: flex; align-items: center; padding: 14px 16px; }
.person-passport-profile-header [data-passport-profile] { width: 100%; min-width: 0; }
.person-passport-profile-header dl { grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; gap: 12px; }
.person-passport-profile-header dl > div + div { border-left: 1px solid var(--crm-border); padding-left: 12px; }
.person-passport-profile-header dd { font-size: 12px; }
.person-passport-profile-header .person-passport-edit { display: block; width: auto; margin: 12px 0 0 auto; padding: 6px 10px; font-size: 10px !important; }
.person-passport-profile-header [data-passport-form] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; }
.person-passport-profile-header [data-passport-form] > label:first-child,
.person-passport-profile-header .person-passport-state,
.person-passport-profile-header .person-passport-form-actions { grid-column: 1 / -1; }
#page-team-structure .person-passport-work-profile{ display: grid; gap: 10px; }
#page-team-structure .person-passport-work-profile dl{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; }
#page-team-structure .person-passport-work-profile dt{ color: var(--crm-muted); font-size: 11px; }
#page-team-structure .person-passport-work-profile dd{ margin: 3px 0 0; color: var(--crm-text); font-size: 12px; overflow-wrap: anywhere; }
#page-team-structure .person-passport-work-actions,#page-team-structure .person-passport-work-contact-fields,#page-team-structure .person-passport-work-interval{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#page-team-structure .person-passport-work-contact-fields{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
#page-team-structure .person-passport-work-contact-fields label{ display: grid; gap: 4px; min-width: 0; color: var(--crm-muted); font-size: 11px; }
#page-team-structure .person-passport-work-contact-fields input:not([type="checkbox"]),#page-team-structure .person-passport-work-interval input{ min-width: 0; padding: 8px; border: 1px solid var(--crm-border-strong); border-radius: 8px; background: var(--crm-surface-solid); color: var(--crm-text); color-scheme: light; }
html[data-theme="dark"] #page-team-structure .person-passport-work-contact-fields input:not([type="checkbox"]),html[data-theme="dark"] #page-team-structure .person-passport-work-interval input{ color-scheme: dark; }
#page-team-structure .person-passport-work-contact-fields .person-passport-work-consent{ display: flex; align-items: center; grid-column: 1 / -1; }
#page-team-structure .person-passport-work-kind{ display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; padding: 10px; border: 1px solid var(--crm-border); border-radius: 10px; }
#page-team-structure .person-passport-work-kind legend{ color: var(--crm-text); font-weight: 700; }
#page-team-structure .person-passport-work-kind label{ color: var(--crm-text); font-size: 11px; }
#page-team-structure .person-passport-work-day{ display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--crm-border); }
#page-team-structure .person-passport-work-day strong{ color: var(--crm-text); font-size: 11px; }
#page-team-structure .person-passport-work-interval{ margin: 3px 0; }
#page-team-structure .person-passport-work-interval input{ width: 95px; }
#page-team-structure .person-passport-work-profile button{ min-height: 30px; padding: 5px 10px; border: 1px solid var(--crm-border-strong); border-radius: var(--crm-control-radius); background: var(--crm-surface-soft); color: var(--crm-text); font: inherit; font-size: 11px; cursor: pointer; }
#page-team-structure .person-passport-work-profile button:hover{ background: var(--crm-surface-hover); }
#page-team-structure .person-passport-work-profile [data-work-edit]{ border-color: var(--crm-accent); background: color-mix(in srgb, var(--crm-accent) 12%, var(--crm-surface-solid)); color: var(--crm-text); }
#page-team-structure .person-passport-work-profile button[type="submit"],#page-team-structure .person-passport-work-profile [data-work-confirm]{ border-color: var(--crm-accent); background: color-mix(in srgb, var(--crm-accent) 17%, var(--crm-surface-solid)); }
#page-team-structure .person-passport-work-profile button:disabled{ cursor: wait; opacity: .65; }
#page-team-structure .person-passport-work-profile button:focus-visible,#page-team-structure .person-passport-work-profile input:focus-visible{ outline: none; box-shadow: var(--crm-focus-ring); }
@media (max-width: 1100px) {
  .person-passport-header { grid-template-columns: 1fr; }
}

#page-team-structure .team-structure-founders { left: auto; right: 0; }
#page-team-structure .team-structure-founders button {
  background: color-mix(in srgb, var(--team-map-orange) 25%, var(--crm-surface-solid));
  border-color: color-mix(in srgb, var(--team-map-orange) 65%, var(--crm-border));
}
#page-team-structure .team-structure-founders button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--team-map-orange) 38%, var(--crm-surface-solid));
  border-color: var(--team-map-orange);
}
.team-founder-people { display: grid; gap: 8px; max-height: 180px; overflow: auto; padding: 8px; border: 1px solid var(--crm-border); border-radius: var(--crm-control-radius); }
.team-structure-dialog .team-founder-choice { display: flex; align-items: center; gap: 8px; }
.team-structure-dialog .team-founder-choice input { width: auto; min-height: auto; accent-color: var(--crm-accent); }
.team-founder-role { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--crm-border); border-radius: var(--crm-control-radius); }
.team-founder-roles { display: grid; gap: 12px; }
.team-founder-error { color: var(--crm-text); }

.team-structure-dialog [data-founder-role-add],
.team-structure-dialog [data-founder-role-remove] {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--crm-border-strong);
  border-radius: var(--crm-control-radius);
  background: var(--crm-surface-soft);
  color: var(--crm-text);
  font: inherit;
  cursor: pointer;
}
.team-structure-dialog [data-founder-role-add]:hover,
.team-structure-dialog [data-founder-role-remove]:hover { background: var(--crm-surface-hover); }
.team-structure-dialog [data-founder-role-add]:focus-visible,
.team-structure-dialog [data-founder-role-remove]:focus-visible { outline: 0; box-shadow: var(--crm-focus-ring); }
.team-structure-dialog .team-founder-choice span { text-transform: none; letter-spacing: normal; font-size: 12px; }

.team-founder-button-title { display: block; }
.team-founder-button-people { display: grid; gap: 6px; margin-top: 10px; }
.team-founder-button-person { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
.team-founder-unassigned { font-size: 12px; font-weight: 400; color: var(--crm-muted); }
.team-founder-avatar { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--crm-text); background: var(--crm-surface-soft); }
.team-founder-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-structure-dialog [data-team-save-error] { color: var(--crm-text); padding: 12px; background: var(--crm-surface-soft); border-radius: var(--crm-control-radius); }
.team-structure-dialog button:disabled { opacity: .6; cursor: wait; }

#page-team-structure .team-structure-purpose:not(.team-structure-founders) button { height: 80px; align-self: start; }
[data-team-circle="media"] .team-map-node-subtitle { font-size: 16px; }