/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Universal elements */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.right-container button.trigger,
.right-container input.text,
.right-container textarea.text {
    border-color: transparent;
}

.right-container button.trigger:is(:focus, :focus-within, :hover),
.right-container input.text:is(:focus, :focus-within, :hover),
.right-container textarea.text:is(:focus, :focus-within, :hover) {
    border-color: var(--blue-400);
}

.right-container .calendar .trigger span.text,
.right-container input.text,
.right-container .location .trigger span.text,
.right-container .select .trigger span.text,
.right-container textarea.text {
    padding: 0.25em 0.5em;
}

.right-container label {
    font-size: var(--font-100);
    padding-left: 0.625em;
}

.right-container span.spacer.vertical {
    margin: 0.125em 0;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Right container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.bottom-container .right-container {
    background-color: var(--white);
    display: flex;
    flex: 1;
    flex-direction: row;
    height: calc(100vh - 3.5em);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Map container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.right-container .map-container {
    display: flex;
    flex: 1;
    flex-direction: row;
    min-width: 66vw;
    padding: 2em 1em 1em 1em;
    position: relative;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Map */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.map-container .map {
    align-items: center;
    align-content: center;
    column-gap: 7.5em;
    cursor: default;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-height: 100%;
    position: relative;
    width: 100%;
}

.map-container .map.dragging {
    cursor: grabbing !important;
    pointer-events: auto !important;
    user-select: none !important;
}

/* */
/* SECTION: Group */
/* */

.map-container .group {
    align-content: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2em;
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 1em 0 1em 1em;
    position: relative;
    min-width: 12.25em;
    width: fit-content;
}

.map-container .group::before {
    color: var(--gray-300);
    font-size: var(--font-200);
    font-weight: var(--bold-100);
    left: 1em;
    position: absolute;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    top: -1.5em;
    white-space: nowrap;
    width: calc(100% - 1em);
    content: attr(data-group-title);
}

.map-container .map.landscape .group {
    height: calc(100vh - 5.5em);
}

.map-container .map.portrait .group {
    min-height: calc(100vh - 5.5em);
}

.map-container .memberships {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
    width: 100%;
    height: 100%;
}

.map-container .memberships .line {
    fill: none;
    stroke: var(--gray-200);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* */
/* SECTION: Stakeholder */
/* */

.map-container .stakeholder {
    display: flex;
    flex-direction: column;
    width: 11.5em;
    background-color: var(--white);
    border-radius: var(--radius-100);
}

.map-container .map:has(.stakeholder:focus-within) .stakeholder:not(:focus-within) {
    filter: contrast(calc(1 / 3)) brightness(1.5);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Dimensions */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.map-container .dimension {
    padding: 0.5em 0.25em 0.25em 0.25em;
    gap: 0.125em;
    display: flex;
    flex-direction: column;
    border-bottom: solid 1px var(--gray-100);
    border-left: solid 2px var(--blue-200);
    border-right: solid 2px var(--blue-200);
    background-color: var(--white);
}

.map-container .stakeholder .dimension:not(.display-none):not(:has(~ .dimension:not(.display-none))) {
    border-radius: 0 0 var(--radius-small) var(--radius-small);
    border-bottom: solid 2px var(--blue-200);
}

/* */
/* SECTION: Identification */
/* */

.map-container .dimension[data-dimension='identification'] {
    background-color: var(--blue-200);
    border-bottom-color: var(--blue-200);
    border-radius: var(--radius-100);
    border-top: solid 2px var(--blue-200);
    flex-direction: row;
    gap: 0.5em;
    padding: 0 0.5em;
}

body:not(.creating-flows) .map-container .stakeholder:has(.dimension[data-dimension='badges'] button.badge:not(.display-none)) .dimension[data-dimension='identification'],
body:not(.creating-flows) .map-container .stakeholder:has(.dimension:not([data-dimension='identification']):not([data-dimension='badges']):not(.display-none)) .dimension[data-dimension='identification'] {
    border-radius: var(--radius-100) var(--radius-100) 0 0;
}

.map-container .dimension[data-dimension='identification'] .select {
    width: auto;
}

.map-container .dimension[data-dimension='identification'] button.trigger {
    border-radius: var(--radius-100);
    height: 2.5em;
    margin: 0.5em 0;
    white-space: unset;
    width: 2.5em;
    word-break: normal;
}

.map-container .dimension[data-dimension='identification'] button.trigger span.text {
    color: var(--blue-200);
    font-size: var(--font-400);
    font-weight: var(--bold-400);
    padding: 0;
    text-align: center;
    text-overflow: unset;
}

.map-container .dimension[data-dimension='identification'] :has(input.text) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-container .dimension[data-dimension='identification'] input.text {
    border: solid 1px transparent;
    border-radius: 0;
    color: var(--white);
    display: block;
    line-height: 1.1;
    padding: 0;
    width: 100%;
}

.map-container .dimension[data-dimension='identification'] input.text[data-bind='stakeholders.stakeholder_first_name'] {
    font-size: var(--font-400);
    font-weight: var(--bold-400);
}

.map-container .dimension[data-dimension='identification'] input.text[data-bind='stakeholders.stakeholder_last_name'] {
    font-size: var(--font-300);
}

.map-container .dimension[data-dimension='identification'] ::placeholder {
    color: var(--white);
}

.map-container .dimension[data-dimension='identification']:has(input.text:focus),
.map-container .dimension[data-dimension='identification']:has(input.text:hover) {
    background-color: var(--blue-100);
}

.map-container .dimension[data-dimension='identification']:has(input.text:focus) input.text,
.map-container .dimension[data-dimension='identification']:has(input.text:hover) input.text,
.map-container .dimension[data-dimension='identification']:has(input.text:focus) ::placeholder,
.map-container .dimension[data-dimension='identification']:has(input.text:hover) ::placeholder {
    border-color: transparent;
    border-bottom-color: var(--white);
    color: var(--blue-200);
}

/* */
/* SECTION: Badges */
/* */

.map-container .dimension[data-dimension='badges'] {
    border-bottom-color: var(--blue-200);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25em;
    padding: 0.5em;
}

.map-container .dimension[data-dimension='badges']:not(:has(button.badge:not(.display-none))) {
    display: none;
}

.map-container button.badge.accessibility,
.map-container button.badge.notes-total,
.map-container button.badge.sensitivity-very-sensitive,
.map-container button.badge.sensitivity-sensitive {
    background-color: var(--blue-400);
    border: solid 1px var(--blue-400);
}

.map-container button.badge.accessibility:hover,
.map-container button.badge.notes-total:hover,
.map-container button.badge.sensitivity-very-sensitive:hover,
.map-container button.badge.sensitivity-sensitive:hover {
    background-color: var(--white);
}

.map-container button.badge.accessibility:hover span.material-symbols-outlined,
.map-container button.badge.accessibility:hover span.text,
.map-container button.badge.notes-total:hover span.material-symbols-outlined,
.map-container button.badge.notes-total:hover span.text,
.map-container button.badge.sensitivity-very-sensitive:hover span.material-symbols-outlined,
.map-container button.badge.sensitivity-very-sensitive:hover span.text,
.map-container button.badge.sensitivity-sensitive:hover span.material-symbols-outlined,
.map-container button.badge.sensitivity-sensitive:hover span.text {
    color: var(--blue-400);
}

.map-container button.badge.engagement-fresh,
.map-container button.badge.sentiment-very-positive,
.map-container button.badge.sentiment-positive,
.map-container button.badge.mutual-trust-high-very-high {
    background-color: var(--green);
    border: solid 1px var(--green);
}

.map-container button.badge.engagement-fresh:hover,
.map-container button.badge.sentiment-very-positive:hover,
.map-container button.badge.sentiment-positive:hover,
.map-container button.badge.mutual-trust-high-very-high:hover {
    background-color: var(--white);
}

.map-container button.badge.engagement-fresh:hover span.material-symbols-outlined,
.map-container button.badge.engagement-fresh:hover span.text,
.map-container button.badge.sentiment-very-positive:hover span.material-symbols-outlined,
.map-container button.badge.sentiment-very-positive:hover span.text,
.map-container button.badge.sentiment-positive:hover span.material-symbols-outlined,
.map-container button.badge.sentiment-positive:hover span.text,
.map-container button.badge.mutual-trust-high-very-high:hover span.material-symbols-outlined,
.map-container button.badge.mutual-trust-high-very-high:hover span.text {
    color: var(--green);
}

.map-container button.badge.key-stakeholder {
    background-color: var(--purple);
    border: solid 1px var(--purple);
}

.map-container button.badge.key-stakeholder:hover {
    background-color: var(--white);
}

.map-container button.badge.key-stakeholder:hover span.material-symbols-outlined,
.map-container button.badge.key-stakeholder:hover span.text {
    color: var(--purple);
}

.map-container button.badge.engagement-almost-stale,
.map-container button.badge.mutual-trust-mixed,
.map-container button.badge.sentiment-neutral {
    background-color: var(--yellow);
    border: solid 1px var(--yellow);
}

.map-container button.badge.engagement-almost-stale:hover,
.map-container button.badge.mutual-trust-mixed:hover,
.map-container button.badge.sentiment-neutral:hover {
    background-color: var(--white);
}

.map-container button.badge.engagement-almost-stale:hover span.material-symbols-outlined,
.map-container button.badge.engagement-almost-stale:hover span.text,
.map-container button.badge.mutual-trust-mixed:hover span.material-symbols-outlined,
.map-container button.badge.mutual-trust-mixed:hover span.text,
.map-container button.badge.sentiment-neutral:hover span.material-symbols-outlined,
.map-container button.badge.sentiment-neutral:hover span.text {
    color: var(--yellow);
}

.map-container button.badge.engagement-stale,
.map-container button.badge.mutual-trust-low-very-low,
.map-container button.badge.notes-overdue,
.map-container button.badge.sentiment-negative,
.map-container button.badge.sentiment-very-negative {
    background-color: var(--red);
    border: solid 1px var(--red);
}

.map-container button.badge.engagement-stale:hover,
.map-container button.badge.mutual-trust-low-very-low:hover,
.map-container button.badge.notes-overdue:hover,
.map-container button.badge.sentiment-negative:hover,
.map-container button.badge.sentiment-very-negative:hover {
    background-color: var(--white);
}

.map-container button.badge.engagement-stale:hover span.material-symbols-outlined,
.map-container button.badge.engagement-stale:hover span.text,
.map-container button.badge.mutual-trust-low-very-low:hover span.material-symbols-outlined,
.map-container button.badge.mutual-trust-low-very-low:hover span.text,
.map-container button.badge.notes-overdue:hover span.material-symbols-outlined,
.map-container button.badge.notes-overdue:hover span.text,
.map-container button.badge.sentiment-negative:hover span.material-symbols-outlined,
.map-container button.badge.sentiment-negative:hover span.text,
.map-container button.badge.sentiment-very-negative:hover span.material-symbols-outlined,
.map-container button.badge.sentiment-very-negative:hover span.text {
    color: var(--red);
}

.map-container button.badge.notes-total,
.map-container button.badge.notes-overdue {
    padding-right: 0.375em;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Connections */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

body.creating-flows * {
    pointer-events: none !important;
    user-select: none !important;
}

body.creating-flows button.square {
    filter: contrast(calc(1 / 3)) brightness(1.5);
}

body.creating-flows button[data-action='connect-stakeholders'],
body.creating-flows .map-container .map .relationships *,
body.creating-flows .map-container .map .stakeholder,
body.creating-flows .modal-container[data-modal-id='flows'] * {
    filter: unset;
    pointer-events: auto !important;
}

.map-container .relationships .line {
    fill: none;
    filter: contrast(calc(1 / 3)) brightness(1.5);
    stroke: var(--blue-200);
    stroke-dasharray: 5, 5;
    stroke-width: 2;
    transition:
        stroke 0.25s ease-in-out,
        filter 0.25s ease-in-out;
}

.map-container .relationships {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
    width: 100%;
    height: 100%;
}

.map-container .relationships .click {
    stroke: transparent;
    stroke-width: 15;
    fill: none;
    cursor: pointer;
    pointer-events: stroke;
}

/* INLINE: Hover on any line in a flow highlights ALL lines in that flow */
.map-container .relationships:has(.connector:hover) .connector:not(:hover) .line {
    filter: contrast(calc(1 / 3)) brightness(1.5);
}

.map-container .relationships .connector:hover .line {
    filter: none;
    stroke: var(--blue-200);
    stroke-width: 3;
}

.map-container .relationships .connector:hover text.text {
    filter: none;
    font-variation-settings: var(--weight-black);
}

.map-container .relationships label {
    font-size: var(--font-small);
    font-weight: var(--font-semibold);
    fill: var(--blue-400);
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    background-color: var(--white);
    padding: 0.25em 0.5em;
}

.map-container .relationships text.text {
    fill: var(--blue-200);
    filter: contrast(calc(1 / 3)) brightness(1.5);
    font-variation-settings: var(--weight-semibold);
    paint-order: stroke fill;
    stroke: var(--white);
    stroke-width: 5px;
}

/* */
/* SECTION: Flow Category Styles */
/* */

/* INLINE: Information - dash then dot pattern (like rotated 'i' repeated) */
.map-container .relationships .line.flow-category-information {
    stroke-dasharray: 4, 5, 1, 5;
    stroke-linecap: round;
}

/* INLINE: Authority - solid thick line */
.map-container .relationships .line.flow-category-authority {
    stroke-dasharray: none;
    stroke-width: 3;
}

/* INLINE: Access - zigzag pattern using SVG filter */
.map-container .relationships .line.flow-category-access:not(.no-zigzag) {
    stroke-dasharray: none;
    filter: url(#zigzag);
}

/* INLINE: Access with no-zigzag class (for arrow-bearing line) */
.map-container .relationships .line.flow-category-access.no-zigzag {
    stroke: transparent;
}

/* INLINE: Keep zigzag filter on hover for access flow */
.map-container .relationships .connector:hover .line.flow-category-access:not(.no-zigzag) {
    filter: url(#zigzag);
    stroke-width: 3;
}

/* INLINE: Resources - short horizontal bars pattern (thicker bars) */
.map-container .relationships .line.flow-category-resources {
    stroke-dasharray: 2, 2;
    stroke-linecap: butt;
    stroke-width: 5;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Nav container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.right-container .nav-container {
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    padding: 1em calc(1em + 2px) 1em 1em;
    pointer-events: none;
}

.right-container .nav-container > * {
    pointer-events: auto;
}

.right-container button.rectangle {
    flex-wrap: wrap;
    padding: 0.25em;
    width: 10em;
}

.right-container button.rectangle span.text {
    font-size: var(--font-100);
    min-width: 0;
    text-align: center;
    white-space: normal;
}

.right-container [data-action='toggle-orientation'] span.material-symbols-outlined {
    transition: transform 0.25s ease;
}

.app-container:has(.map.portrait) .right-container [data-action='toggle-orientation'] span.material-symbols-outlined {
    transform: rotate(90deg);
}