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

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Bottom container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.app-container .bottom-container {
    display: flex;
    flex-direction: row;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Left container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.app-container .left-container {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 3.5em);
    position: relative;
}

.left-container .row:has(h1) {
    gap: 0.5em;
}

.left-container .row:has(h1) span.material-symbols-outlined {
    font-size: var(--icon-300);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Panel container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.left-container .notifications-container,
.left-container .stakeholders-container,
.left-container .dimensions-container,
.left-container .insights-container,
.left-container .notes-container,
.left-container .tools-container,
.left-container .guidance-container {
    display: none;
}

.left-container[data-panel-id='notifications'] .notifications-container,
.left-container[data-panel-id='stakeholders'] .stakeholders-container,
.left-container[data-panel-id='dimensions'] .dimensions-container,
.left-container[data-panel-id='insights'] .insights-container,
.left-container[data-panel-id='notes'] .notes-container,
.left-container[data-panel-id='tools'] .tools-container,
.left-container[data-panel-id='guidance'] .guidance-container {
    background-color: var(--white);
    direction: rtl;
    display: unset;
    height: 100%;
    margin: 0;
    max-width: 33.3vw;
    overflow-y: auto;
    padding: 1.25em 2em;
}

.left-container .notifications-container *,
.left-container .stakeholders-container *,
.left-container .dimensions-container *,
.left-container .insights-container *,
.left-container .notes-container *,
.left-container .tools-container *,
.left-container .guidance-container * {
    direction: ltr;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Notifications container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.left-container .notifications-container .row:has(h1) {
    margin-bottom: 1em;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Tools container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.left-container .tools-container .row:has(h1) {
    margin-bottom: 1em;
}

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

.left-container .dimensions-container {
}

.left-container .dimensions-container .stakeholder {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

.left-container .dimensions-container .stakeholder .dimension {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 2.75em;
    gap: 0.5em;
}

.left-container .dimensions-container .stakeholder .dimension button.square,
.left-container .dimensions-container .stakeholder .dimension button.switch {
    align-self: center;
}

/* */
/* SECTION: Title */
/* */

.left-container .dimensions-container .stakeholder .dimension .title {
    width: 11.5em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0.5em;
    border-bottom: solid 1px var(--gray-100);
    border-left: solid 1px var(--blue-200);
    border-right: solid 1px var(--blue-200);
}

.left-container .dimensions-container .stakeholder .dimension .title span.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.left-container .dimensions-container .stakeholder .dimension:last-child .title {
    border-bottom: solid 1px var(--blue-200);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.left-container .dimensions-container .stakeholder .dimension .title .badges {
    flex-wrap: wrap;
    gap: 0.25em;
    padding: 0.25em 0;
}

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

.left-container .dimensions-container .badges {
    cursor: default;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25em;
}

.left-container .dimensions-container .badge {
    align-items: center;
    background-color: var(--white);
    border-radius: var(--radius-100);
    display: flex;
    flex-direction: row;
    gap: 0.25em;
    padding: 0.25em;
}

.left-container .dimensions-container .badge span.material-symbols-outlined {
    font-size: var(--icon-100);
}

.left-container .dimensions-container .badge span.text {
    font-size: var(--font-100);
}

.left-container .dimensions-container .badge.data-missing {
    border: solid 1px var(--gray-400);
}

.left-container .dimensions-container .badge.data-missing span.material-symbols-outlined,
.left-container .dimensions-container .badge.data-missing span.text {
    color: var(--gray-400);
}

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

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

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

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

.left-container .dimensions-container .badge.key-stakeholder {
    border: solid 1px var(--purple);
}

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

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

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

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

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

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

.left-container .dimensions-container .stakeholder .dimension[data-dimension='identification'] .title {
    border-bottom: solid 1px var(--blue-200);
    border-radius: var(--radius-small) var(--radius-small) 0 0;
    border-top: solid 1px var(--blue-200);
    background-color: var(--blue-200);
}

.left-container .dimensions-container .stakeholder .dimension[data-dimension='identification'] .title > span.text {
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.left-container .dimensions-container .stakeholder .dimension[data-dimension='badges'] .title {
    border-bottom: solid 1px var(--blue-200);
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Insights container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.left-container .insights-container .chart-container * {
    user-select: none;
}

.left-container .insights-container .chart {
    height: 100%;
    width: 100%;
}

.left-container .insights-container .first-name,
.left-container .insights-container .last-name {
    color: var(--blue-200);
    cursor: pointer;
    fill: var(--blue-200);
    font-size: var(--font-small);
}

.left-container .insights-container .first-name {
    font-variation-settings: var(--weight-black);
}

.left-container .insights-container .node {
    cursor: pointer;
    fill: var(--blue-200);
}

.left-container .insights-container .row:has(h1) {
    margin-bottom: 1em;
}

/* */
/* SECTION: Dimension snapshot */
/* */

.left-container .insights-container [data-collapsible-id='dimension-snapshot'] .pie-slice {
    fill: var(--white);
    stroke: var(--black);
    stroke-width: 1px;
}

.left-container .insights-container [data-collapsible-id='dimension-snapshot'] .pie-label {
    fill: var(--black);
    font-size: var(--font-small);
    font-variation-settings: var(--weight-black);
}

/* */
/* SECTION: Dimension trends */
/* */

.left-container .insights-container [data-collapsible-id='dimension-trends'] {
}

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

.left-container .insights-container [data-collapsible-id='stakeholder-flows'] .connection {
    stroke: var(--blue-200);
    stroke-dasharray: 5, 5;
    stroke-width: 2px;
}

.left-container .insights-container [data-collapsible-id='stakeholder-flows'] .connection-label {
    fill: var(--blue-200);
    font-size: var(--font-tiny);
    font-variation-settings: var(--weight-semibold);
    paint-order: stroke fill;
    stroke: var(--white);
    stroke-width: 5px;
}

/* */
/* SECTION: Stakeholder influence and interest */
/* */

.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .quadrant-bottom-left,
.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .quadrant-bottom-right,
.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .quadrant-top-left,
.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .quadrant-top-right {
    cursor: pointer;
    fill: var(--white);
    stroke: var(--black);
    stroke-width: 1px;
}

.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .quadrant-label {
    fill: var(--black);
    font-size: var(--font-small);
    font-variation-settings: var(--weight-black);
}

.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .x-axis-label,
.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .y-axis-label {
    cursor: pointer;
    fill: var(--black);
    font-size: var(--font-small);
    font-variation-settings: var(--weight-black);
}

.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .x-axis .tick line,
.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .y-axis .tick line {
    stroke: var(--black);
    stroke-width: 1px;
}

.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .x-axis .tick text,
.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .y-axis .tick text {
    fill: var(--black);
    font-size: var(--font-tiny);
}

.left-container .insights-container [data-collapsible-id='stakeholder-influence-interest'] .node {
    fill: var(--blue-200);
}

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

.left-container .insights-container [data-collapsible-id='stakeholder-weighting'] .bubble {
    fill: var(--white);
}

.left-container .insights-container [data-collapsible-id='stakeholder-weighting'] .bubble circle {
    stroke: var(--blue-200);
    stroke-width: 2px;
}

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

.left-container .insights-container [data-collapsible-id='stakeholder-timezones'] .first-name,
.left-container .insights-container [data-collapsible-id='stakeholder-timezones'] .last-name {
    cursor: default;
}

.left-container .insights-container [data-collapsible-id='stakeholder-timezones'] table th:not(:first-of-type),
.left-container .insights-container [data-collapsible-id='stakeholder-timezones'] table td:not(:first-of-type) {
    width: 33%;
}

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Notes container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.left-container .notes-container {
    width: 35em;
}

.left-container .notes-container [data-action='filter-notes'] {
    margin-bottom: 0.5em;
    width: 100%;
}

.left-container .notes-container button.trigger span.text {
    padding: 0.5em;
}

.left-container .notes-container .row {
    gap: 0.5em;
}

.left-container .notes-container .row button.rectangle {
    flex: 1;
    width: auto;
}

/* .left-container .notes-container .select {
    width: 100%;
} */

/* ─────────────────────────────────── */
/* ─────────────────────────────────── */
/* BLOCK: Guidance container */
/* ─────────────────────────────────── */
/* ─────────────────────────────────── */

.left-container .guidance-container .row:has(h1) {
    margin-bottom: 1em;
}

.left-container .guidance-container ul {
    list-style: disc;
    margin: 0;
    padding-left: 1em;
}

.left-container .guidance-container ul li {
    display: list-item;
    margin: 0.25em 0;
    font-size: var(--font-200);
}

.left-container .guidance-container label {
    color: var(--black);
    font-size: var(--font-large);
    font-variation-settings: var(--weight-black);
}

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

.left-container .nav-container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.5em);
}

.left-container .panel-controls {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1.25em 1em 0.25em 1em;
    border-right: solid 2px var(--blue-400);
    position: relative;
}

.left-container .panel-controls::after {
    background: radial-gradient(circle at 100% 100%, transparent 1em, var(--white) 1em);
    bottom: -2em;
    content: '';
    height: 2em;
    left: 0;
    position: absolute;
    width: 1em;
}

.left-container .panel-controls .divider-horizontal {
    background-color: var(--gray-400);
    height: 1px;
    width: 2.5em;
    margin: 0 auto;
}

.left-container .panel-controls .divider-horizontal,
.left-container .panel-controls button.square[data-action='close-panel'] {
    display: none;
}

.left-container:not([data-panel-id='']) .panel-controls .divider-horizontal,
.left-container:not([data-panel-id='']) .panel-controls button.square[data-action='close-panel'] {
    display: flex;
}

.left-container .join-controls::before {
    background-color: var(--white);
    position: relative;
    content: '';
    display: flex;
    left: 1em;
    top: 0%;
    height: 1em;
    width: calc(100% - 1em);
    border-bottom: solid 2px var(--blue-400);
    border-right: solid 2px var(--blue-400);
    border-radius: 0 0 1em 0;
}

.left-container .join-controls::after {
    position: relative;
    content: '';
    display: flex;
    top: calc(0% - 2px);
    height: 1em;
    width: calc(100% - 1em);
    border-top: solid 2px var(--blue-400);
    border-left: solid 2px var(--blue-400);
    border-radius: 1em 0 0 0;
}

.left-container .map-controls {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5em;
    position: relative;
    margin-top: -2px;
    padding: 0.25em 1em 1.25em 1em;
    border-left: solid 2px var(--blue-400);
}