
:root {
    color-scheme:light;
    --ink:#252b35;
    --muted:#5c6570;
    --line:#c5cad1;
    --green:#496443;
    --cta:#1b6b3f;
    --cta-hover:#145c36;
    --on-cta:#f7fbf8;
    --paper:#f5f6f8;
    --surface:#fff;
    --field:#fff;
    --active:#eef1ea;
    --on-green:#f4f6f3;
    --warning-bg:#fff8e8;
    --warning-line:#e8d5a7;
    --warning-ink:#6b5427;
    --danger-bg:#fff0f2;
    --danger-line:#e4b7bf;
    --danger-ink:#813642;
    --radius-control:8px;
    --radius-surface:12px;
    --ease-out:cubic-bezier(0.2, 0.8, 0.2, 1)}
* {
    box-sizing:border-box}
body {
    margin:0;
    font:15px/1.55 system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink)}
a {
    color:var(--green)}
header {
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:18px 5%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px}
.brand {
    font-size:21px;
    font-weight:800;
    letter-spacing:.04em;
    text-decoration:none}
.brand img {
    display:block;
    width:150px;
    height:auto}
.brand {
    display:flex;
    align-items:center;
    gap:16px}
.brand span {
    font-size:12px;
    color:var(--muted);
    margin-left:8px}
main {
    max-width:1300px;
    margin:auto;
    padding:34px 5% 80px}
h1 {
    font-size:34px;
    line-height:1.2;
    margin:0 0 12px;
    letter-spacing:-.03em}
h2 {
    font-size:20px;
    margin:0 0 14px}
h3 {
    margin:0 0 8px}
.muted,small {
    color:var(--muted)}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    font-weight:800;
    color:var(--green);
    margin-bottom:10px}
.banner {
    background:var(--warning-bg);
    border:1px solid var(--warning-line);
    color:var(--warning-ink);
    border-radius:var(--radius-surface);
    padding:14px 18px;
    margin:22px 0}
.support {
    background:var(--danger-bg);
    border-color:var(--danger-line);
    color:var(--danger-ink)}
.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-surface);
    padding:24px;
    margin:20px 0}
.grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin:24px 0}
.metric {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-surface);
    padding:20px}
.metric strong {
    display:block;
    font-size:30px;
    margin:4px 0}
.metric span {
    color:var(--muted);
    font-size:13px}
nav {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:24px 0}
nav a {
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius-control);
    background:#fff;
    text-decoration:none;
    font-size:13px}
.scroll {
    overflow-x:auto}
.goal-history th[scope="row"] {
    color:var(--ink);
    font-size:13px;
    text-transform:none;
    letter-spacing:normal}
.history-field-label {display:none}
@media(max-width:640px) {
    .goal-history thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    .goal-history table,.goal-history tbody,.goal-history tr,.goal-history th,.goal-history td {display:block;width:auto;max-width:none}
    .goal-history tr {padding:12px 0;border-bottom:1px solid var(--line)}
    .goal-history th[scope="row"] {padding:0 0 8px;border:0;font-weight:700}
    .goal-history td {display:flex;justify-content:space-between;gap:16px;padding:5px 0;border:0;overflow-wrap:normal}
    .goal-history .history-field-label {display:inline;flex-shrink:0;font-weight:650}
}
table {
    width:100%;
    border-collapse:collapse;
    font-size:13px}
th {
    text-align:left;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
    letter-spacing:.01em}
td,th {
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    vertical-align:top}
td {
    max-width:460px;
    overflow-wrap:anywhere}
tr:last-child td {
    border-bottom:0}
tbody tr:hover td {
    background:color-mix(in srgb, var(--ink) 4%, var(--surface))}
.badge {
    display:inline-block;
    background:#eef1ea;
    color:#496443;
    border-radius:var(--radius-control);
    padding:3px 9px;
    font-size:11px}
.empty {
    padding:20px 0;
    color:var(--muted)}
label {
    display:block;
    font-size:13px;
    font-weight:650;
    margin:16px 0 6px}
input,textarea,select {
    width:100%;
    border:1px solid var(--line);
    border-radius:var(--radius-control);
    padding:8px 12px;
    font:inherit;
    color:var(--ink);
    background:#fff}
button {
    background:var(--cta);
    color:var(--on-cta);
    border:0;
    border-radius:var(--radius-control);
    font:600 14px/1.2 system-ui;
    letter-spacing:-.01em;
    padding:8px 14px;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 1px rgba(12,32,20,.14), 0 4px 10px rgba(20,60,36,.12)}
button.secondary, .sidebar-link, .sidebar-backdrop {
    box-shadow:none}
button.secondary {
    background:#fff;
    color:var(--green);
    border:1px solid var(--line)}
.error {
    color:var(--danger-ink)}
.login {
    max-width:460px;
    margin:45px auto}
.login button {
    width:100%;
    margin:22px 0 8px}
.json {
    white-space:pre-wrap;
    font:13px/1.6 system-ui;
    margin:0}
.two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px}
.two .card {
    margin:0}
.footer {
    font-size:12px;
    color:var(--muted);
    margin-top:30px}
@media(max-width:800px) {
    .grid {
    grid-template-columns:repeat(2,minmax(0,1fr))}
.two {
    grid-template-columns:1fr}
main {
    padding:26px 18px 50px}
header {
    padding:16px 18px}
h1 {
    font-size:28px}
.card {
    padding:18px}
td,th {
    padding:10px}
.brand img {
    display:block;
    width:150px;
    height:auto}
.brand {
    display:flex;
    align-items:center;
    gap:16px}
.brand span {
    display:none}
}


:root {
    --surface:#fff;
    --field:#fff;
    --active:#eef1ea}
html[data-theme="dark"] {
    color-scheme:dark;
    --ink:#e7e9ed;
    --muted:#a3aab6;
    --line:#343942;
    --green:#b6c7a6;
    --cta:#3cba73;
    --cta-hover:#2ea866;
    --on-cta:#062015;
    --paper:#191c22;
    --surface:#232730;
    --field:#1b1f26;
    --active:#303b30;
    --on-green:#1a211c;
    --warning-bg:#332d20;
    --warning-line:#6b5427;
    --warning-ink:#ead8ac;
    --danger-bg:#38242b;
    --danger-line:#813642;
    --danger-ink:#efbac5}
[hidden] {
    display:none!important}
header,.card,.metric,button.secondary {
    background:var(--surface)}
input,select,textarea {
    background:var(--field)}
button:not(.secondary):not(.sidebar-link):not(.sidebar-backdrop) {
    background:var(--cta);
    color:var(--on-cta)}
.badge {
    background:var(--active);
    color:var(--green)}
.banner {
    color:var(--warning-ink)}
.support {
    color:#813642}
main {
    max-width:1440px;
    padding:32px 36px 64px;
    min-width:0}
h1 {
    font-size:30px}
.eyebrow {
    color:var(--muted)}
.skip-link {
    position:fixed;
    left:12px;
    top:-80px;
    z-index:100;
    background:var(--surface);
    padding:12px}
.skip-link:focus {
    top:12px}
.dashboard-shell {
    padding-left:250px}
.dashboard-shell header {
    height:64px;
    padding:12px 36px}
.dashboard-shell header .brand img,.dashboard-shell header form {
    display:none}
.sidebar {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:250px;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border-right:1px solid var(--line);
    z-index:30}
.sidebar-brand {
    padding:28px 24px 24px;
    border-bottom:1px solid var(--line)}
.sidebar-brand img {
    width:92px;
    height:auto;
    display:block}
.sidebar-brand span {
    display:block;
    font-size:9px;
    font-weight:650;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:14px}
.organization-switcher {
    padding:12px 16px;
    border-bottom:1px solid var(--line)}
.organization-switcher label {
    margin:0 0 6px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--muted)}
.organization-switcher select {
    font-size:13px;
    padding:8px 10px}
.organization-switcher select:disabled {
    opacity:1}
.organization-switcher small {
    display:block;
    margin-top:6px;
    font-size:10px}
.organization-switcher summary {
    cursor:pointer;
    font-size:12px;
    margin:10px 0}
.organization-switcher textarea {
    font-size:12px;
    min-height:70px}
.organization-switcher button {
    width:100%;
    margin-top:10px;
    padding:8px}
.organization-switcher > a {
    display:block;
    margin-top:10px;
    font-size:12px}
.sidebar-nav {
    display:block;
    flex:1;
    min-height:100px;
    overflow-y:auto;
    padding:14px 9px;
    margin:0;
    scrollbar-width:thin}
.nav-group {
    margin-bottom:18px}
.nav-group-title {
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    padding:10px 15px 8px}
.sidebar .sidebar-link {
    display:flex;
    align-items:center;
    gap:16px;
    min-height:44px;
    padding:10px 16px;
    margin:3px 0;
    width:100%;
    border:1px solid transparent;
    border-radius:var(--radius-control);
    background:transparent;
    color:var(--ink);
    text-decoration:none;
    text-align:left;
    font:400 14px/1.4 system-ui;
    cursor:pointer}
.sidebar-link:hover {
    background:var(--paper)!important}
.sidebar .sidebar-link[aria-current="page"] {
    background:var(--active);
    border-color:#d0dac7;
    color:var(--green);
    font-weight:550}
.sidebar-icon {
    display:inline-block;
    flex:0 0 19px;
    width:19px;
    height:19px;
    background:currentColor;
    mask-image:var(--icon);
    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    -webkit-mask-image:var(--icon);
    -webkit-mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    color:#63745d}
.sidebar-footer {
    border-top:1px solid var(--line);
    padding:12px 9px 8px;
    flex-shrink:0}
.sidebar-user {
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--paper);
    padding:9px;
    border-radius:var(--radius-surface);
    margin:0 7px 8px}
.sidebar-user strong {
    font-size:13px;
    display:block;
    max-width:155px;
    overflow-wrap:anywhere}
.sidebar-user small {
    font-size:10px;
    letter-spacing:.05em;
    display:block}
.user-avatar {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:var(--radius-control);
    background:#718068;
    color:#fff;
    font-weight:650;
    font-size:12px}
.sidebar-footer .sidebar-link {
    min-height:36px;
    font-size:13px;
    margin:0;
    padding:8px 16px}
.sidebar-footer small {
    margin-left:auto;
    font-size:10px}
.dashboard-shell main>.card:first-of-type {
    margin-top:0}
.dashboard-overview {
    margin-bottom:24px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid var(--green);
    outline-offset:3px}
html[data-theme="dark"] .sidebar-brand img,html[data-theme="dark"] .brand img {
    filter:invert(1)}
html[data-theme="dark"] .banner {
    background:var(--warning-bg);
    color:var(--warning-ink)}
html[data-theme="dark"] .support {
    background:var(--danger-bg);
    color:var(--danger-ink)}
html[data-theme="dark"] .sidebar-link[aria-current="page"] {
    border-color:#4c5a45}
.sidebar-backdrop {
    position:fixed;
    inset:0;
    background:rgba(25,28,34,.28)!important;
    backdrop-filter:blur(10px);
    z-index:25;
    border:0;
    border-radius:0;
    padding:0}

@media(max-height:750px) and (min-width:801px) {
    .sidebar-brand {
    padding:18px 24px}
.sidebar-footer .sidebar-link {
    min-height:32px;
    padding-top:6px;
    padding-bottom:6px}
}

@media(max-width:1100px) {
    .grid {
    grid-template-columns:repeat(2,minmax(0,1fr))}
main {
    padding:26px 24px 50px}
.two {
    grid-template-columns:1fr}
}

@media(max-width:800px) {
    .dashboard-shell {
    padding-left:0}
.dashboard-shell .sidebar {
    transform:translateX(-100%);
    visibility:hidden}
.dashboard-shell.sidebar-open .sidebar {
    transform:translateX(0);
    visibility:visible}
.dashboard-shell.sidebar-open {
    overflow:hidden}
.dashboard-shell header {
    padding:12px 18px;
    justify-content:flex-start}
.dashboard-shell header .brand img {
    display:block;
    width:90px}
.dashboard-shell header .brand span {
    display:none}
.dashboard-shell .menu-toggle {
    display:block!important}
.dashboard-shell header .brand {
    margin-left:auto}
main {
    padding:24px 18px 50px}
.sidebar-brand {
    padding:20px 24px}
.sidebar-footer {
    padding-top:8px}
.sidebar-footer .sidebar-link {
    min-height:32px;
    padding-top:6px;
    padding-bottom:6px}
}

@media print {
    .sidebar,header,.skip-link,.sidebar-backdrop {
    display:none!important}
.dashboard-shell {
    padding:0}
main {
    padding:0}
[data-dashboard-panel][hidden] {
    display:block!important}
}


.sidebar-icon {
    opacity:.62;
    object-fit:contain;
    background:transparent}
html[data-theme="dark"] .sidebar-icon {
    filter:invert(1)}

#analytics>form {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    align-items:end}
#analytics>form label {
    margin:0}
#analytics>form button {
    justify-self:start}
#analytics figure {
    margin:22px 0;
    color:#657e9a}
html[data-theme="dark"] #analytics figure {
    color:#9dafc4}
.workspace-state {
    margin-left:auto}
@media(max-width:1100px) {
    #analytics>form {
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px) {
    #analytics>form {
    grid-template-columns:1fr}
.workspace-state {
    font-size:10px;
    max-width:120px;
    text-align:right}
.dashboard-shell header {
    gap:12px}
}

/* Keep environment and support context visible during section navigation. */
.dashboard-shell header { position:sticky; top:0; z-index:20; }
[data-dashboard-panel] { scroll-margin-top:84px; }

#cron .maintenance-history table { min-width:1400px; }
#cron .maintenance-history th, #cron .maintenance-history td { white-space:nowrap; }
#cron .execution-history table, #run-history .execution-history table { min-width:100%; width:max-content; }
#run-history .execution-history th, #run-history .execution-history td { white-space:nowrap; }

#data-management code { overflow-wrap:anywhere; }
#data-management dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 20px; }
#data-management dt { color:var(--muted); }
#data-management dd { margin:0; min-width:0; }
@media(max-width:800px) {
    #data-management dl { grid-template-columns:minmax(0,1fr); gap:4px; }
    #data-management dt { margin-top:8px; }
}

.screenshot-frame { display:block; min-height:170px; background:#edf2ef; }
.screenshot-frame img { display:block; }
.screenshot-frame [hidden] { display:none; }
.screenshot-unavailable { display:flex; align-items:center; justify-content:center; min-height:170px; margin:0; padding:16px; box-sizing:border-box; text-align:center; color:var(--muted); }
.screenshot-detail { min-height:240px; }
.screenshot-detail .screenshot-unavailable { min-height:240px; }

.queue-field-label { display:none; }
.queue-records td:last-child { min-width:160px; }
@media(max-width:800px) {
    .queue-records thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .queue-records table,.queue-records tbody,.queue-records tr,.queue-records td { display:block; width:auto; max-width:none; }
    .queue-records tr { padding:16px 0; border-bottom:1px solid var(--line); }
    .queue-records tr:last-child { border-bottom:0; }
    .queue-records td { padding:8px 0; border:0; }
    .queue-records td:last-child { min-width:0; }
    .queue-records .queue-field-label { display:block; margin-bottom:4px; color:var(--muted); font-size:11px; font-weight:650; }
    .queue-records code { font-size:12px; }
    .queue-records .operations-counts { margin-top:12px; }
}

@media(max-width:800px) {
    .dashboard-shell header { height:auto; min-height:64px; flex-wrap:wrap; }
    .dashboard-shell header .brand { margin-left:0; }
    .dashboard-shell header > div { flex:1 1 100%; min-width:0; overflow-wrap:anywhere; text-align:right; }
}

.operations-heading > div { min-width:0; overflow-wrap:anywhere; }
.dashboard-shell h1 { font-size:24px; font-weight:650; letter-spacing:-.022em; }
.dashboard-shell h2 { font-size:16px; font-weight:600; }
.dashboard-shell h1,.dashboard-shell .eyebrow { overflow-wrap:anywhere; }
.dashboard-shell header > div { min-width:0; overflow-wrap:anywhere; }

.banner.support { overflow-wrap:anywhere; }

.cron-field-label { display:none; }
.cron-records td:nth-child(2) { white-space:nowrap; overflow-wrap:normal; }
.cron-records td:last-child { min-width:250px; }
.cron-records .operations-counts dd[data-run-timing],
.cron-records .operations-counts dd[data-run-detail="processed_count"],
.cron-records .operations-counts dd[data-run-detail="failed_count"] { flex-shrink:0; overflow-wrap:normal; white-space:nowrap; }
@media(max-width:800px) {
    .cron-records thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
    .cron-records table,.cron-records tbody,.cron-records tr,.cron-records td { display:block; width:auto; max-width:none; }
    .cron-records tr { padding:16px 0; border-bottom:1px solid var(--line); }
    .cron-records tr:last-child { border-bottom:0; }
    .cron-records td { padding:8px 0; border:0; }
    .cron-records td:last-child { min-width:0; }
    .cron-records .cron-field-label { display:block; margin-bottom:4px; color:var(--muted); font-size:11px; font-weight:650; }
}

.project-network, #entities, #tasks, #processes { overflow-wrap: anywhere; }

.network-diagram { max-width:100%; max-height:32rem; overflow:auto; margin:16px 0 24px; border:1px solid var(--line); border-radius:var(--radius-surface); background:var(--paper); }
.network-diagram:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.network-diagram svg { display:block; max-width:none; }
.network-edge { fill:none; stroke:var(--muted); stroke-width:1.5; }
.network-edge-project_membership { stroke-dasharray:8 5; }
.network-edge-current_assignment { stroke-dasharray:2 5; }
.network-arrow { fill:var(--muted); }
.network-node { fill:var(--paper); stroke:var(--green); stroke-width:1.5; }
.network-diagram a:hover .network-node, .network-diagram a:focus .network-node { stroke:var(--ink); stroke-width:3; }
.network-node-label { fill:var(--ink); font-size:13px; }
.network-node-kind, .network-column-label { fill:var(--muted); font-size:11px; font-weight:650; }
.network-legend { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font-size:12px; }

button, .sidebar-link {
    transition:transform 180ms var(--ease-out), opacity 180ms var(--ease-out)}
@media (hover:hover) and (pointer:fine) {
    button:not(.secondary):not(.sidebar-link):not(.sidebar-backdrop):hover:not(:disabled) {
        background:var(--cta-hover);
        opacity:1}
    button.secondary:hover:not(:disabled) {
        background:var(--paper);
        opacity:1}
}
button:not(.secondary):not(.sidebar-link):not(.sidebar-backdrop):active:not(:disabled) {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 1px rgba(12,32,20,.16)}
button:active:not(:disabled) { transform:scale(0.97) }
button:disabled { opacity:.45; cursor:not-allowed }
#dashboard-refresh, [data-operations-refresh], .sidebar-link, .sidebar-link:active {
    transition:none;
    transform:none}
table, .metric strong { font-variant-numeric:tabular-nums }
input, textarea { caret-color:var(--green) }
::selection { background:#d5e0cf; color:var(--ink) }
html[data-theme="dark"] ::selection { background:#3d4a38; color:var(--ink) }
[aria-busy="true"] { opacity:.7 }

.analytics-bento {
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:12px;
    margin:16px 0 8px}
#analytics .analytics-bento .analytics-chart { grid-column:1; grid-row:1 / span 2; margin:0 }
.analytics-lead { grid-column:2; grid-row:1 }
.analytics-next { grid-column:2; grid-row:2 }
.analytics-state { grid-column:1 / -1 }
.analytics-lead, .analytics-next, .analytics-state {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-surface);
    padding:16px;
    margin:0}
.analytics-lead strong { font-size:30px; font-variant-numeric:tabular-nums }
@media (max-width:800px) {
    .analytics-bento { grid-template-columns:1fr }
    #analytics .analytics-bento .analytics-chart, .analytics-lead, .analytics-next, .analytics-state { grid-column:1; grid-row:auto }
}

.cockpit section.card {
    background:transparent;
    border:0;
    border-radius:0;
    padding:0 0 16px;
    border-bottom:1px solid var(--line)}
.cockpit section.card:has(form) {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-surface);
    padding:16px}

.screenshot-detail {
    border:1px solid var(--line);
    border-radius:var(--radius-surface);
    background:color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter:blur(10px)}
@media (prefers-reduced-transparency:reduce) {
    .sidebar-backdrop { backdrop-filter:none; background:rgba(25,28,34,.72)!important }
    .screenshot-detail { backdrop-filter:none; background:var(--surface) }
}
@media (prefers-reduced-motion:reduce) {
    button, .sidebar-link { transition:none }
    button:active { transform:none }
}
