/*
  ----------------------------------------
  Admin and organization layouts
  ----------------------------------------
*/

@layer styles {
    .admin {
        &.admin-shell {
            height: 100vh;
            overflow: hidden;
        }

        .admin-desktop-shell {
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        .admin-workspace {
            min-height: 0;
            overflow: hidden;
        }

        .admin-header {
            flex: none;
        }

        .admin-body {
            min-height: 0;
            overflow: hidden;
        }

        .admin-sidebar {
            flex: none;
            min-height: 0;
            overflow-y: auto;
        }

        .admin-sidebar--content-padding .nav-link-admin {
            padding-left: calc(var(--space-xs) * 2);
        }

        .operator-sidebar {
            --operator-slate: #325459;
            --operator-slate-700: #284347;
            --operator-slate-300: #6c8b8f;
            --operator-slate-100: #d8e2e3;
            --operator-slate-50: #ecf1f1;
            --operator-straw: #d1cb4f;
            --operator-ink: #1c2821;
            --operator-ink-2: #3a4641;
            --operator-ink-3: #6a7570;
            --operator-ink-4: #9aa39e;
            --operator-line: #e6e7e2;
            --operator-line-2: #d6d8d2;

            flex: none;
            width: 17.5rem;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            border-right: var(--border) solid var(--operator-line);
            background: var(--white);
            color: var(--operator-ink);
        }

        .operator-sidebar-brand {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-sm) var(--space-xs);
            border-bottom: var(--border) solid var(--operator-line);
            min-width: 0;
        }

        .operator-sidebar-brand-mark {
            display: grid;
            width: var(--space-md);
            height: var(--space-md);
            flex: none;
            place-items: center;
            border-radius: var(--rounded);
            background: var(--operator-slate);
            color: var(--operator-straw);
            font-family: var(--font-heading);
            font-size: var(--text-sm);
            font-weight: var(--font-bold);
            letter-spacing: 0.04em;
            text-decoration: none;
        }

        .operator-sidebar-brand-text {
            min-width: 0;
            flex: 1;
        }

        .operator-sidebar-brand-name {
            overflow: hidden;
            color: var(--operator-ink);
            font-family: var(--font-heading);
            font-size: var(--text-sm);
            font-weight: var(--font-bold);
            letter-spacing: 0.08em;
            line-height: 1.3;
            text-overflow: ellipsis;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .operator-sidebar-brand-sub {
            margin-top: var(--space-3xs);
            color: var(--operator-ink-3);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: var(--text-sm);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .operator-sidebar-company {
            padding: var(--space-sm) var(--space-sm) var(--space-xs);
            border-bottom: var(--border) solid var(--operator-line);
        }

        .operator-sidebar-company-label {
            margin-bottom: var(--space-3xs);
            color: var(--operator-ink-3);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: var(--text-sm);
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .operator-sidebar-company-name {
            color: var(--operator-ink);
            font-family: var(--font-heading);
            font-size: var(--text-base);
            font-weight: var(--font-bold);
            line-height: 1.25;
            text-decoration: none;

            &:hover,
            &.is-active {
                color: var(--operator-slate);
            }
        }

        .operator-sidebar-company-meta {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xs);
            margin-top: var(--space-3xs);
            color: var(--operator-ink-3);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: var(--text-sm);
        }

        .operator-sidebar-quick-links {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-3xs) var(--space-2xs);
        }

        .operator-sidebar-quick-links a {
            display: flex;
            align-items: center;
            gap: var(--space-2xs);
            min-width: 0;
            padding: var(--space-3xs) var(--space-2xs);
            border-radius: var(--rounded);
            color: var(--operator-ink-3);
            font-size: var(--text-sm);
            text-decoration: none;

            &:hover,
            &.is-active {
                background: var(--operator-slate-50);
                color: var(--operator-slate);
            }

            span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .operator-sidebar-search {
            position: relative;
            display: block;
            padding: var(--space-xs) var(--space-sm) var(--space-2xs);
            color: var(--operator-ink-3);

            span {
                position: absolute;
                left: calc(var(--space-sm) + var(--space-3xs));
                top: 50%;
                transform: translateY(-34%);
                pointer-events: none;
            }

            input {
                width: 100%;
                min-width: 0;
                padding: var(--space-2xs) var(--space-xs) var(--space-2xs) calc(var(--space-sm) + var(--space-xs));
                border: var(--border) solid var(--operator-line);
                border-radius: var(--rounded-lg);
                outline: 0;
                background: #fafaf7;
                color: var(--operator-ink);
                font: inherit;
                font-size: var(--text-sm);

                &:focus {
                    border-color: var(--operator-slate);
                    background: var(--white);
                }
            }
        }

        .operator-sidebar-filters {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xs);
            padding: var(--space-3xs) var(--space-sm) var(--space-2xs);
        }

        .operator-sidebar-chip {
            padding: var(--space-3xs) var(--space-xs);
            border: var(--border) solid var(--operator-line-2);
            border-radius: 999px;
            background: var(--white);
            color: var(--operator-ink-2);
            cursor: default;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: var(--text-sm);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .operator-sidebar-chip--active {
            border-color: var(--operator-slate);
            background: var(--operator-slate);
            color: var(--white);
        }

        .operator-sidebar-section-label {
            padding: 0 var(--space-sm);
            color: var(--operator-ink-3);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: var(--text-sm);
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .operator-sidebar-empty {
            margin: 0;
            padding: var(--space-sm);
            color: var(--operator-ink-3);
            font-size: var(--text-sm);
        }

        .operator-tree {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 0;
            margin: 0;
            max-width: none;
            padding: var(--space-3xs) var(--space-xs) var(--space-sm);
            overflow: auto;
            list-style: none;
        }

        .operator-tree-item {
            max-width: none;
            padding-left: 0;
            font-size: inherit;
            user-select: none;
        }

        .operator-tree-item::before {
            content: none;
        }

        .operator-tree-children {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin: 0 0 0 var(--space-xs);
            max-width: none;
            padding: 0 0 0 var(--space-3xs);
            border-left: var(--border) dashed var(--operator-line-2);
            list-style: none;

            &.is-collapsed {
                display: none;
            }
        }

        .operator-sidebar.is-searching .operator-tree-children {
            display: block;
        }

        .operator-tree-row {
            display: flex;
            align-items: center;
            gap: var(--space-3xs);
            min-width: 0;
            margin: 0;
        }

        .operator-tree-row--leaf {
            padding-left: var(--space-xs);
        }

        .operator-tree-row--load {
            padding-left: var(--space-xs);
        }

        .operator-tree-row.is-search-match .operator-tree-link {
            outline: var(--border) solid var(--operator-straw);
        }

        .operator-tree-toggle {
            display: inline-flex;
            width: var(--space-sm);
            flex: none;
            justify-content: center;
            border: 0;
            background: transparent;
            color: var(--operator-ink-3);
            cursor: pointer;
            padding: 0;

            &[aria-expanded="true"] svg {
                transform: rotate(90deg);
            }

            svg {
                transition: transform 150ms ease;
            }
        }

        .operator-tree-spacer {
            width: 0;
        }

        .operator-tree-link {
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--space-2xs);
            width: 100%;
            min-width: 0;
            padding: var(--space-3xs) var(--space-xs);
            border-radius: var(--rounded);
            color: var(--operator-ink);
            font-size: var(--text-sm);
            line-height: 1.45;
            text-decoration: none;

            &:hover {
                background: var(--operator-slate-50);
            }

            &.is-active {
                background: var(--operator-slate-100);
                color: var(--operator-slate-700);
                font-weight: var(--font-semibold);
            }

            &.is-active::before {
                content: "";
                position: absolute;
                left: 0;
                top: var(--space-3xs);
                bottom: var(--space-3xs);
                width: var(--border-lg);
                border-radius: var(--rounded-sm);
                background: var(--operator-slate);
            }

        }

        .operator-load-channel-row.is-selected,
        .operator-load-channel-row:target {
            background: var(--highlight);
            outline: var(--border-lg) solid var(--warning);
            outline-offset: calc(-1 * var(--border-lg));
        }

        .operator-tree-icon {
            display: grid;
            width: var(--text-sm);
            height: var(--text-sm);
            flex: none;
            place-items: center;
            color: var(--operator-ink-3);
        }

        .operator-sidebar-quick-links svg,
        .operator-tree-toggle svg,
        .operator-tree-icon svg {
            width: var(--text-base);
            height: var(--text-base);
        }

        .operator-tree-label {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .operator-tree-meta {
            color: var(--operator-ink-3);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: var(--text-sm);
            white-space: nowrap;
        }

        .operator-tree-status-dot {
            width: var(--space-2xs);
            height: var(--space-2xs);
            flex: none;
            border-radius: 999px;
            background: var(--operator-ink-4);
        }

        .operator-tree-status-dot--online {
            background: var(--success);
        }

        .operator-tree-status-dot--stale {
            background: var(--warning);
        }

        .production-calendar {
            --production-calendar-active: var(--brand-1);
            --production-calendar-idle: var(--lighter);
            --production-calendar-border: var(--light);
            --production-calendar-force-on: var(--brand-2);
            --production-calendar-force-on-bg: var(--brand-2-light);
            --production-calendar-force-off: var(--error);
            --production-calendar-force-off-bg: var(--error-light);
        }

        .production-calendar-mono {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        }

        .production-calendar-legend-mark {
            width: 0.65rem;
            height: var(--border-lg);
            border-radius: 999px;
            background: var(--production-calendar-border);
        }

        .production-calendar-legend-mark--on {
            background: var(--production-calendar-active);
        }

        .production-calendar-legend-mark--force-on {
            background: var(--production-calendar-force-on);
        }

        .production-calendar-legend-mark--force-off {
            background: var(--production-calendar-force-off);
        }

        .production-calendar-weekly-grid {
            display: grid;
            grid-template-columns: 3rem repeat(24, minmax(2rem, 1fr));
            gap: var(--border-lg);
            min-width: 70rem;
            overflow-x: auto;
        }

        .production-calendar-hour-cell {
            height: 1.45rem;
            border: var(--border) solid var(--production-calendar-border);
            border-radius: var(--rounded-sm);
            appearance: none;
            background: var(--production-calendar-idle);
            touch-action: none;
        }

        .production-calendar-hour-cell.is-active {
            border-color: var(--production-calendar-active);
            background: var(--production-calendar-active);
        }

        .production-calendar-month-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(6.25rem, 1fr));
            max-width: 45rem;
        }

        .production-calendar-month-empty,
        .production-calendar-date-cell {
            min-height: 4.5rem;
            border: var(--border) solid var(--production-calendar-border);
            border-radius: var(--rounded);
            background: var(--white);
        }

        .production-calendar-date-cell.is-force-on {
            border-color: var(--production-calendar-force-on);
            background: var(--production-calendar-force-on-bg);
        }

        .production-calendar-date-cell.is-force-off {
            border-color: var(--production-calendar-force-off);
            background: var(--production-calendar-force-off-bg);
        }

        .production-calendar-date-status {
            min-height: 1rem;
        }

        .vem-demand-card {
            overflow: hidden;
            color: #1c2821;
        }

        .vem-demand-card__range {
            display: flex;
            justify-content: flex-end;
            padding: var(--space-xs) var(--space-sm) 0;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.6875rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .vem-demand-card__range-link {
            border: var(--border) solid #e6e7e2;
            border-right: 0;
            padding: var(--space-3xs) var(--space-xs);
            color: #4f5a55;
            text-decoration: none;
            line-height: 1;
        }

        .vem-demand-card__range-link:first-child {
            border-radius: 999px 0 0 999px;
        }

        .vem-demand-card__range-link:last-child {
            border-right: var(--border) solid #e6e7e2;
            border-radius: 0 999px 999px 0;
        }

        .vem-demand-card__range-link--active {
            border-color: #325459;
            background: #325459;
            color: #fff;
        }

        .vem-demand-card__header {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--space-sm);
            padding: var(--space-sm);
            border-bottom: var(--border) solid #e6e7e2;
        }

        .vem-demand-card__subtitle,
        .vem-demand-card__toggles {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .vem-demand-card__toggles {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: var(--space-2xs);
            font-size: 0.6875rem;
        }

        .vem-demand-card__toggle {
            display: inline-flex;
            align-items: center;
            border: var(--border) solid #e6e7e2;
            border-radius: 999px;
            padding: var(--space-3xs) var(--space-xs);
            color: #6a7570;
            line-height: 1;
        }

        .vem-demand-card__toggle::before {
            content: "";
            width: 0.45rem;
            height: 0.45rem;
            margin-right: var(--space-3xs);
            border-radius: 0.125rem;
            background: #aeb9b4;
        }

        .vem-demand-card__toggle--active {
            border-color: #6c8b8f;
            color: #284347;
        }

        .vem-demand-card__toggle--active::before {
            background: #325459;
        }

        .vem-demand-card__toggle:nth-child(3)::before {
            background: #c8c34d;
        }

        .vem-demand-card__body {
            padding: var(--space-sm);
        }

        .vem-demand-card__summary {
            position: absolute;
            top: var(--space-sm);
            right: var(--space-sm);
            z-index: 1;
        }

        .vem-demand-card__coverage {
            margin: 0 0 var(--space-xs);
            border: var(--border) solid #e6e7e2;
            border-radius: var(--radius-sm);
            background: #f7f7f3;
            color: #6a7570;
            font-size: 0.8125rem;
            padding: var(--space-2xs) var(--space-xs);
        }

        .vem-metric-panel {
            color: #1c2821;
        }

        .vem-metric-panel__eyebrow {
            margin: 0 0 var(--space-xs);
            color: #79837d;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.6875rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .vem-metric-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: var(--space-xs);
        }

        .vem-metric-card {
            min-width: 0;
            padding: var(--space-sm);
            border: var(--border) solid #e6e7e2;
            border-radius: var(--radius-sm);
            background: var(--white);
        }

        .vem-metric-card__label {
            margin: 0 0 var(--space-2xs);
            color: #79837d;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.6875rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .vem-metric-card__value {
            margin: 0;
            color: #1c2821;
            font-family: var(--font-heading);
            font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
            font-weight: var(--font-bold);
            line-height: 1;
        }

        .vem-metric-card__value span {
            margin-left: var(--space-3xs);
            color: #6a7570;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.75rem;
            font-weight: var(--font-normal);
        }

        .vem-metric-card__detail {
            margin: var(--space-2xs) 0 0;
            color: #6a7570;
            font-size: var(--text-sm);
        }

        .vem-metric-card__bar {
            height: 0.1875rem;
            margin-top: var(--space-xs);
            border-radius: 999px;
            background: linear-gradient(90deg, #c48a12 0 65%, #e6e7e2 65% 100%);
        }

        @media (min-width: 48rem) {
            .vem-metric-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .vem-metric-grid--wide {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (min-width: 80rem) {
            .vem-metric-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            .vem-metric-grid--wide {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .admin-main {
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            background: var(--lighter);
        }

        .admin-content {
            /* Fill short pages, but keep the painted background growing on long pages. */
            flex: 1 0 auto;
            min-height: 100%;
        }

        .admin-content-full-bleed {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
            box-shadow: none;
        }

        /* Admin nav links (left menu) */
        .nav-link-admin {
            display: flex;
            width: 100%;
            align-items: center;
            gap: var(--space-2xs);
            text-decoration: none;
            color: var(--midtone);
            padding: var(--space-xs);
            border-radius: var(--rounded-sm);
            transition: color 300ms ease;

            &.active,
            &:hover,
            &:active {
                background: var(--darker);
                color: var(--white);
            }

            svg {
                width: var(--text-lg);
                height: var(--text-lg);
            }
        }

        .semantic-graph {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
        }

        .semantic-graph-toolbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-2xs);
        }

        .semantic-graph-legend-item {
            display: inline-flex;
            align-items: center;
            gap: var(--space-3xs);
            color: var(--midtone);
            font-size: var(--text-sm);
        }

        .semantic-graph-legend-dot {
            width: var(--space-xs);
            height: var(--space-xs);
            flex: none;
            border-radius: 999px;
            background: var(--midtone);
        }

        .semantic-graph-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-sm);
        }

        .semantic-graph-canvas {
            min-height: 30rem;
            overflow: hidden;
            border: var(--border) solid var(--light);
            border-radius: var(--rounded-sm);
            background: var(--white);
        }

        .semantic-graph-svg {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 30rem;
        }

        .semantic-graph-link {
            stroke: var(--light);
            stroke-width: 1.4;
        }

        .semantic-graph-node {
            cursor: grab;
            stroke: var(--white);
            stroke-width: 2;
        }

        .semantic-graph-node:active {
            cursor: grabbing;
        }

        .semantic-graph-node.is-selected {
            stroke: var(--black);
            stroke-width: 3;
        }

        .semantic-graph-node--organization,
        .semantic-graph-legend-dot--organization {
            fill: var(--brand-1);
            background: var(--brand-1);
        }

        .semantic-graph-node--site,
        .semantic-graph-legend-dot--site {
            fill: var(--info);
            background: var(--info);
        }

        .semantic-graph-node--plant,
        .semantic-graph-legend-dot--plant {
            fill: var(--brand-3);
            background: var(--brand-3);
        }

        .semantic-graph-node--meter,
        .semantic-graph-legend-dot--meter {
            fill: var(--warning);
            background: var(--warning);
        }

        .semantic-graph-node--channel,
        .semantic-graph-legend-dot--channel {
            fill: var(--brand-4);
            background: var(--brand-4);
        }

        .semantic-graph-node--asset,
        .semantic-graph-legend-dot--asset {
            fill: var(--dark);
            background: var(--dark);
        }

        .semantic-graph-node--point,
        .semantic-graph-legend-dot--point {
            fill: var(--error);
            background: var(--error);
        }

        .semantic-graph-node--timeseries,
        .semantic-graph-legend-dot--timeseries {
            fill: var(--success);
            background: var(--success);
        }

        .semantic-graph-label {
            fill: var(--dark);
            font-size: var(--text-sm);
            paint-order: stroke;
            pointer-events: none;
            stroke: var(--white);
            stroke-linejoin: round;
            stroke-width: var(--border-lg);
            text-anchor: middle;
        }

        .semantic-graph-detail {
            min-width: 0;
            padding: var(--space-sm);
            border: var(--border) solid var(--light);
            border-radius: var(--rounded-sm);
            background: var(--lighter);
        }

        .semantic-graph-detail code {
            display: block;
            margin-top: var(--space-xs);
            white-space: normal;
            word-break: break-word;
        }

        .semantic-graph-empty {
            margin: 0;
            color: var(--midtone);
        }

        .admin-monitoring-standards-table {
            table-layout: fixed;
            white-space: normal;

            th,
            td {
                vertical-align: top;
            }

            th:nth-child(1) {
                width: 18%;
            }

            th:nth-child(2) {
                width: 30%;
            }

            th:nth-child(3),
            th:nth-child(4) {
                width: 10%;
            }

            th:nth-child(5) {
                width: 14%;
            }

            th:nth-child(6) {
                width: 6%;
            }

            th:nth-child(7) {
                width: 7%;
            }

            th:nth-child(8) {
                width: 4%;
            }
        }

        .admin-threshold-pill {
            display: inline-flex;
            align-items: center;
            padding: var(--space-3xs) var(--space-2xs);
            border-radius: var(--rounded-sm);
            font-weight: var(--font-semibold);
            line-height: 1.25;
        }

        .admin-threshold-pill--warning {
            background: var(--highlight);
            color: var(--darker);
        }

        .admin-threshold-pill--alarm {
            background: var(--error-light);
            color: var(--error);
        }

        .admin-threshold-pill--emergency {
            background: color-mix(in srgb, var(--error) 78%, var(--black));
            color: var(--white);
            padding-inline: var(--space-xs);
        }

        @media (min-width: 64rem) {
            .semantic-graph-layout {
                grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
            }
        }

        .system-monitor-page {
            display: flex;
            flex: 1;
            flex-direction: column;
            min-height: 0;
        }

        .system-monitor-panel {
            display: flex;
            flex: 1;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
            background: var(--white);
        }

        .system-monitor-toolbar {
            flex: none;
        }

        .system-monitor-frame {
            flex: 1;
            display: block;
            width: 100%;
            height: 100%;
            min-height: 0;
            border: 0;
            background: var(--white);
        }
    }
}